AVANT TOUTE CHOSE : enregistrer le fichier distribué dans le dossier \MesDocuments\Devoirs\Feuillard\Web en le renommant de la forme Web-Activ5-MONNOM-20X où X est le numéro de votre classe.

Vous compléterez sous les questions avec vos réponses.

I. Introduction au HTML

Qu'est-ce que le HTML ?

Voici la définition que nous en donne Wikipedia :

L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias, dont des images, des formulaires de saisie, et des programmes informatiques […]. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade).

Grâce au HTML vous allez pouvoir, dans votre navigateur (Firefox, Chrome, Opera,....), afficher du texte, afficher des images, proposer des hyperliens (liens vers d'autres pages web), afficher des formulaires et même maintenant afficher des vidéos (grâce à la dernière version du HTML, l'HTML5).

HTML n'est pas un langage de programmation (comme le Python par exemple), ici, pas question de conditions, de boucles.… c'est un langage de description.

Pour aborder le HTML, nous allons, dans un premier temps utiliser le site http://jsfiddle.net/ qui permet d’entrer le code html et de visualiser directement ce qu’il donne après avoir cliqué sur « Run ».

Remarque : d’autres sites existent avec la même fonctionnalité : https://jsitor.com/

Par ailleurs, il est possible de faire la même chose en ouvrant Bloc-notes ou Notepad++, en tapant le texte désiré, et en l’enregistrant avec l’extension .html au lieu de .txt : son ouverture avec un navigateur internet vous donnera l’affichage de la page web.

Après avoir lancé votre navigateur web (Firefox de préférence), tapez dans la barre d'adresse l’une ou l’autre des adresses des sites précédents.

Vous devriez voir apparaître ceci :

 Nous allons pour l'instant uniquement utiliser la fenêtre « HTML » et la fenêtre « Result ».

1. Écrire dans le cadre « HTML » une phrase quelconque sur une seule ligne, appuyer sur « Run » puis regarder le résultat dans le cadre en bas à droite.

2. Revenez à la ligne et ajouter maintenant une deuxième phrase sur la deuxième ligne. Observer le résultat. Quel est le problème ?

3. Pour palier au problème, il faut ajouter une balise paragraphe :

avant chaque ligne ou paragraphe, et

à la fin pour refermer la balise. Observer le résultat.

4. On peut aussi ajouter la balise
qui elle, ne nécessite pas d’être refermée.

Ajouter une troisième ligne après avoir mis cette balise à la fin de votre texte précédent (après la balise

). Quelle différence y-a-t-il avec la balise paragraphe ?

 

5. Pour modifier le type de titre (la taille de la police), on insère des balises

,

,

,…

Remarque : en changeant le formatage de la police, il est inutile de faire un nouveau paragraphe avec

.
Écrire le code html pour qu’apparaisse le texte ci-contre (avec le même formatage) :

Faire un copier/coller de votre code dans le fichier  puis faire vérifier par le professeur.

6. Insérer une image

Lorsque l’image est dans le même dossier que le fichier html, il suffit d’indiquer son nom.

"<img src="logo_html.jpg"/>"

Comme ce n’est pas le cas ici vous allez effectuer la solution suivante.

Lorsque l’image est sur le web, il faut indiquer son url : 

<img src="https://www.w3.org/html/logo/img/html5-display.png"/>

=> Recopier cette ligne et regarder le résultat.

7. Ajouter un lien hypertextes

La balise a permet de créer des liens hypertextes, ce sont ces liens hypertextes qui vous permettent de "voyager" entre les pages d'un site ou entre les sites. Les liens hypertextes sont par défaut soulignés et de couleur bleue (modifiable grâce au CSS). La balise a possède un attribut href qui a pour valeur le chemin du fichier que l'on cherche à atteindre ou l'adresse du site cible.

Exemple :

Cliquez ici pour vous rendre sur google.fr

Entre la balise ouvrante et fermante, on trouve le texte qui s'affichera à l'écran (c'est ce texte qui est souligné et de couleur bleue). La balise peut sans problème se trouver en plein milieu d'un paragraphe.

=> Créer une page web permettant d’aller sur la page d’accueil d’ATRIUM (Copier/coller votre code sur votre fichier réponse.)

II. Introduction au CSS

Le HTML n'a pas été conçu pour gérer la mise en page (c'est possible, mais c'est une mauvaise pratique). Le HTML s'occupe uniquement du contenu et de la sémantique, pour tout ce qui concerne la mise en page et l'aspect « décoratif » (on parle du « style » de la page), on utilisera le CSS (Cascading Style Sheets).

Les CSS représentent une façon d'appliquer des styles aux éléments HTML.

Ils vous permettent de définir n'importe quelle propriété de style comme la bordure, la couleur de fond, le type de caractère, l'espace entre les lettres, etc.

Il y a trois endroits possibles de définir des styles CSS :

a. Dans le corps du code HTML (simple, mais pas idéal) : le ou les styles définis ne seront utilisés qu'une seule et unique fois. Il faudra recopier le code pour la fois suivante.

b. Dans l'en-tête de la page (simple, un peu mieux). Dans ce cas là, le style peut-être « appelé » plusieurs fois dans la page, mais uniquement dans celle-ci.

c. Dans une feuille de style totalement séparée du code HTML (l’idéal). Le style peut-être appelé dans toutes les pages faisant référence à la feuille de style css.

 

1. Créer dans une entête (balises ) du code html le style « test1 » suivant :

Écrire le texte « Activité 5 » entouré de cette balise « test1 » et regarder le résultat.

On peut créer autant de styles que l’on veut dans cette entête « css ». Ils doivent être écrit à l’intérieur de la balise « <style>.

2. Après l’accolade qui ferme la définition du style « test1 », ajouter :

 

A quoi sert cette fonction ?

3. Le CSS peut être utilisé pour mettre en forme les images, que ce soit pour les redimensionner ou pour les afficher d’une façon ou d’une autre ou à un endroit ou à un autre dans nos pages.

 Juste en dessous de la dernière accolade de la question 2) recopier ceci :

Qu’a modifié cette instruction ?

Replacer « solid » par « solid blue » : que se passe-t-il ?

III. Réaliser une page web

L’objectif de cette question, est d’écrire le code html et css pour refaire la page web dont l’aperçu est ci-dessous. Vous chercherez des images similaires sur le web

 
Remarques :

- pour placer à un endroit spécifique un paragraphe (<p> qui contient un texte,une image,...) utiliser juste après l’ouverture du paragraphe : <span style="position: absolute; top: 50px; left: 50px"/>

- pour colorer en jaune un texte contenu dans un paragraphe, il est possible d’utliser la blaise suivante :

<FONT color="yellow">Mon texte en jaune</FONT>

- pour espacer des lignes de 2 fois la hauteur de la police appliquée, il faut rajouter « line-height : 2; »