Votre mission, même si vous ne l’acceptez-pas, consiste à réaliser une page HTML.
Dans cette page, vous rédigerez un petit texte qui expliquera en quelques lignes comment le numérique intervient dans votre vie de tous les jours.
Téléchargez la trame de votre page ici et ouvrez-là avec sublime Text.
Pour vous aider à réaliser la mise en page :
- La balise de paragraphe :
<p> signifie « Début du paragraphe »
</p> signifie « Fin du paragraphe »
Pour sauter une ligne, il suffit d’ajouter un paragraphe vide. Par exemple, en ajoutant la ligne <p></p>
– - Les balises de titres :
<h1> </h1> : signifie « titre très important ». En général, on s’en sert pour afficher le titre de la page au début de celle-ci.
<h2> </h2> : signifie « titre important ».
<h3> </h3> : pareil, c’est un titre un peu moins important (on peut dire un « sous-titre » si vous voulez).
<h4> </h4> : titre encore moins important.
<h5> </h5> : titre pas important.
<h6> </h6> : titre vraiment, mais alors vraiment pas important du tout.
– - Les balises vues lors de l’étape 1 :
!DOCTYPE : Le doctype de la 1ère ligne qui indique qu’il s’agit d’une page web HTML.
<html> </html> : La balise principale qui englobe tout le code de la page.-
<head> </head> : Les informations supplémentaires qui n’apparaissent pas directement sur la page, comme par exemple les styles utilisés sur la page, le nom donné à la page ou l’encodage (pour la gestion des caractères spéciaux).
<body> </body> : La partie principale de la page. Tout ce que nous écrirons ici apparaîtra sur la page.
<title> </title> : Cette balise, inscrite dans la partie head, correspond en fait au texte qui sera affiché comme titre de l’onglet.
–
Exercice 1 :
A partir de ces informations, réalisez votre page en respectant les critères suivants :
- Créez votre page dans Sublime Text et enregistrez le fichier sous le nom page1.html
- Ajoutez un nom à votre page (il doit s’afficher dans les onglets) : La première page de (vos prénoms)
- Ajoutez au moins un titre important : Comment le numérique intervient dans votre vie de tous les jours ?
- Ajoutez votre texte avec au moins 2 paragraphes
- Sauvegardez le fichier, puis ouvrez-le avec un navigateur pour vérifier le résultat
- Appelez un des professeurs quand vous avez terminé le travail
–
Voyons maintenant comment ajouter une image :
- Quelle est la fameuse balise qui va nous permettre d’insérer une image ? Il s’agit de… <img />
C’est une balise de type orpheline. Cela veut dire qu’on n’a pas besoin de l’écrire en deux exemplaires comme la plupart des autres balises que nous avons vues jusqu’ici. En effet, nous n’avons pas besoin de délimiter une portion de texte, nous voulons juste insérer une image à un endroit précis.
– - La balise doit être accompagnée de deux attributs obligatoires :
– src : il permet d’indiquer où se trouve l’image que l’on veut insérer. Vous pouvez soit mettre un chemin absolu (ex. : http://www.site.com/fleur.png), soit mettre le chemin en relatif (ce qu’on fait le plus souvent). Ainsi, si votre image est dans un sous-dossier images, vous devrez taper : src= »images/fleur.png »
– alt : cela signifie « texte alternatif ». On doit toujours indiquer un texte alternatif à l’image, c’est-à-dire un court texte qui décrit ce que contient l’image. Ce texte sera affiché à la place de l’image si celle-ci ne peut pas être téléchargée (cela arrive), ou dans les navigateurs de personnes handicapées (non-voyants) qui ne peuvent malheureusement pas « voir » l’image. Cela aide aussi les robots des moteurs de recherche pour les recherches d’images. Pour la fleur, on mettrait par exemple : alt= »Une fleur ».
– - Les images doivent se trouver obligatoirement à l’intérieur d’un paragraphe (<p></p>).
Voici un exemple d’insertion d’image :
Le fichier montagne.jpg doit se trouver dans un répertoire images, lui même situé dans le même répertoire que votre fichier page1.html
Exercice 2 :
- Créez un répertoire images là où se trouve le fichier page1.html
- Placez un fichier JPG au choix (téléchargé depuis internet) dans ce répertoire images
- Insérez cette image entre vos 2 paragraphes.
- Faites valider votre travail pour passer à l’étape suivante !
