TP 14:HTML et CSS

Contexte et historique de HTML

Le langage HTML (Hyper Text Markup Language) fait partie d’une classe plus vaste de langages (SGML, XML, XHTML,...) destinés à décrire des documents et leur mise en page tout en distinguant la forme et le fond. Il a été inventé Tim Berners-Lee en 1991 et a d’abord été utilisé par des physiciens du CERN afin de communiquer leurs travaux. Il est a la base du WEB, la partie actuellement la plus utilisée d’internet.

Tim Berners-Lee suit encore aujourd'hui avec attention l'évolution du Web et a créé le World Wide Web Consortium (W3C) qui définit les nouvelles versions des langages. Il a par ailleurs créé plus récemment la World Wide Web Foundation, qui analyse et suit l'évolution du Web.

Activité préparatoire

Exercice : mise en route

  1. Ouvrez le logiciel de traitement de texte libre office et tapez un texte comprenant un titre, deux paragraphes comprenant un mot en rouge. Faites “fichier/enregistrer sous” en choisissant le format “.html”.
  2. Ouvrez le navigateur Firefox, puis faire: “fichier/ouvrir” et sélectionnez le fichier html précédemment sauvegardé.
  3. Faites un clic-droit sur le texte et sélectionnez “voir le code source de la page”. Les éléments de texte et de formatage sont délimités par des balises comme par exemple et .
    1. Quelles balises délimitent votre titre ?
    2. Quelle balises délimitent vos paragraphes ?
    3. Comment est codée la couleur rouge de votre texte ?

Le langage HTML

Un fichier au format HTML (version 5) est avant tout destiné à être lu à l’aide d’un navigateur internet mais peut-être souvent en partie interprété par un traitement de texte comme nous venons de le constater.

La structure typique d’un document HTML (version 5) est la suivante :

<!DOCTYPE html >

< html lang="fr" >

<head >

<title > Titre de la page </title >

</head >

<body>

<p>

Ceci est une phrase avec un <a href="cible.html">hyperlien</a>.

</p>

<p>

Ceci est un paragraphe où il n’y a pas d’hyperlien.

</p>

</body>

</html>

Exercice

  1. Copier ci-dessus de <!DOCTYPE html jusqu' à /html>
  2. Ouvrier l'éditeur de textes gedit et coller ce qui a été copié. Enregistrer dans Document Personnel sous fichier1.html
  3. Aller dans Document Personnel et double-cliquez sur fichier1.html . Vous avez une page très simple mais c'est une page Web
  4. Si vous cliquez sur le lien vous constatez que cela ne marche pas c'est normal il n'existe pas de fichier cible.html. Remplacer cible.html par #
  5. Pour que la page gère les caractères accentués il faut introduire dans le header la balise (simple) <meta charset = "utf-8" />

En Résumé

La première ligne est une description du format du document. Le reste du document séparé en un en-tête et un corps encapsulé par les balises ou tags <html> et </html>.

Les balises les plus courantes (doubles) sont <p> et </p> qui délimitent un paragraphe et les plus importantes <a> et </a> qui définissent un lien hypertexte c’est-à-dire un renvoi vers une autre partie du document courant ou vers un autre document.

Bien qu’il soit possible de transformer un document HTML en une véritable soupe de tags assez indigeste (comme le font souvent les traitements de texte), de bonnes habitudes et de la rigueur permettent d’écrire des documents lisibles dont le fond est relativement séparé de la forme. On écrira ainsi dans des fichiers HTML le contenu et les tags relatifs à la structure et dans un fichier CSS (Cascading Style Sheet) les informations relatives au style. On ne se lancera donc pas dans la rédaction d’un document HTML sans avoir réfléchi avant à sa structure et son découpage en sous-partie. Cette réflexion pourra être conduite au brouillon et à l’aide de schémas. Dans la suite nous construirons petit à petit les bases d’un site internet présentant des recettes de cuisines.

Structurer un document

Nous allons respecter une structure extrêmement classique pour un site internet : un bandeau horizontal en haut donnant l’identité du site (titre, logo), un menu latéral sur le côté gauche (pour la navigation dans la base de données des recettes) et un bloc droit destiné à recevoir les informations plus variables (ici les recettes mais aussi les informations de présentation du site). Il faut donc prévoir dès l'écriture d'une page sa structure en différentes divisions: en-tête, menu, section, article,etc...

Exercice

Nous allons travailler sur 3 bureaux: Sur un bureau avec le traitement de texte Gedit pour coder, sur un autre avec le navigateur Web Firefox pour voir le résultat de notre code et sur un troisième pour voir nos différents fichiers

  1. Télécharger le fichier index.txt ici.

    Ouvrir le fichier index.txt avec Gedit, le sauvegarder en le renommant indextp14.html et encapsuler le texte par les balises < body> et < /body>.

  2. Télécharger le fichier en-tete.txt ici.

    Ouvrir le fichier en-tete.txt inclure son contenu en tête du fichier indextp14.html et terminer le fichier par la balise < /html>.

  3. Mettre un titre entre les balises <title> et < / title> de l’en-tête. C’est sous ce titre que votre document apparaîtra dans l’onglet de votre navigateur.
  4. L’en-tête étant complet, travaillons sur le corps du document.
    1. Encapsuler le bandeau (ie le haut du corps où il y a le titre) par les balises <header > et </header > .
    2. Encapsuler le menu par les balises <nav > et </nav > .
    3. Encadrer la présentation du site par les balises <article > et </article > .
    4. Sauvegarder et faire clic droit ouvrir avec Firefox pour tester votre code. .

    Si vous n’avez pas fait d’erreurs les trois divisions devraient apparaître de façon informe mais chacune débutant sur une ligne.

  5. Encapsuler le texte du bandeau par les balises <h1 > et </h1 > pour en faire un titre de niveau 1. Mettre le “e” de “XXIe” entre les balises <sup > et </sup >. Sauvegarder et tester dans votre navigateur (il suffit de rafraîchir la page avec la petite flèche en haut à droite de la barre URL)
  6. Mettre un titre de niveau 2 au manifeste et des balises <p> et </p> à chacun des deux paragraphes. Tester.
  7. Attaquons nous au menu à présent.
    1. “Au menu” doit devenir un titre de niveau 1, “Entrées/Plats/Desserts” des titres de niveau 2. Sauvegarder et tester.
    2. Encadrer les items de menus par trois balises <ul > et </ul > .
      3. pour en faire des listes non ordonnées (unordered list), et chacun des six noms de recettes par des balises <li > et </li > . pour en faire des items de liste (list item). Tester.

  8. Taper l’adresse “http://validator.w3.org/” dans un nouvel onglet du navigateur et faire valider la page par la méthode “file upload”.

    Si votre document contient des erreurs corrigez les. Sinon vous aurez seulement un avertissement que vous utilisez la dernière version HTML 5 et non la 4 et par conséquent votre page ne peut pas être validée, bien qu'elle soit correctement écrite.

    Aller voir sur le Web l'évolution du langage HTML au cours du temps.

On notera que la mise en forme actuelle est minimale. Nous n’avons indiqué que la nature des choses mais donné aucune véritable instruction de mise en forme. Toute la mise en page a été décidée entièrement par le navigateur à partir de nos instructions de fond. Une bonne page HTML doit toujours être ainsi conçue.

Créer une feuille de style et mettre en page

Les instructions de mise en page sont enregistrées dans une feuille de style au format CSS. La notre s’appelle “style1tp14.css” ce qui n’est pas original mais informatif.

Exercice 3 : design de la page

Télécharger le fichier style1tp14.css ici.

Ouvrir le fichier. Il contient des indications de mises en forme pour le “body”.

  1. Enlever les marques de commentaires <!-- et --> de l’en-tête de votre fichier HTML pour que la feuille de style s’applique. Tester comme on pouvait s’y attendre les couleurs ont changé.
  2. Créer un division <div id=”page”> pour encapsuler vos trois divisions. Tester. Comment sont codées les couleurs noir et blanc ?

Exercice 4 : style du bandeau

Au fur et à mesure que vous avez compris une propriété CSS commentez la dans le fichier style1tp14.css avec /* et */

  1. Mettons le bandeau en forme en ajoutant une par une les instructions suivantes et en testant à chaque fois : 
     					
 			 header
			 {
   				margin:2em 3% 1% 3%;
   				padding:0.05em 0 0.05em 0;
   				font-size:200%;
   				background-color:#ffd000;
   				border-radius:25px;
			 }
  2. Rajouter : 
    					
			 header h1
			 {
   				font-family:"Comic Sans MS",Arial,Helvetica,sans-serif;
   				text-align:center;
			 }

  3. Il manque manifestement un logo pour notre bandeau. Insérer dans la division du bandeau une division <div class=“logo”>. On notera l’utilisation de class plutôt que id. Contrairement aux id, les class ne sont pas uniques et peuvent apparaître plusieurs fois avec le même nom dans un même fichier. Chercher des explications sur le Web.

    Télécharger l'image logo.png ici.

    Insérer <img src="logo.png" width="100" alt="Logo"/>. Tester.

  4. Pour positionner le logo utiliser le style : 
    		 	 
		 	 header .logo
			{
   				float:left;
   				display:block;
			}
    Ajouter une marge de 15 pixels tout autour. Puis faire revalider votre page par le W3C.

Exercice 5 : style du menu

  1. Positionnons le menu par : 
       
   			left:5%;
   			position:absolute;
   			width:15%;
   			overflow:hidden;
    Que signifie position:absolute ? Chercher sur le site OpenWeb.
  2. Tester. On se rend compte qu’il faut positionner immédiatement le manifeste. Le faire avec une instruction margin provisoire. Inutile de faire quelque chose de très précis, nous y reviendrons en son temps.
  3. Choisissez des couleurs de fond et d’avant plan pour le menu. Puis donner les attributs suivants aux titres de niveau 2 du menu (vous pouvez changer la couleur) : 
       	
   			border-color:#f09000;
   			border-style:solid;
   			border-width:0 0 3px 0;
   			font-size:medium;
   			font-weight:700;
   			margin:0;
   			padding-left:0em;
   			text-transform:uppercase;
    Que signifie em ? Que signifie font-weight ?
  4. Changer la couleur de la première lettre des titres de niveau 2 en utilisant nav h2:first-letter.
  5. Terminer par la mise page des liste avec pour < ul > : 
      
  			margin-bottom:1.5em;
   			margin-top:0.5em;
    et pour <li> : 
    
   			list-style:none;

Exercice 6 : style du manifeste

  1. Positionner le manifeste plus précisément par : 
    	 
      		
  		 	background-color:#f5f8fc;
   			border:1px solid #6090c0;
   			line-height:150%;
   			margin:0 3% 2em 21%;
   			padding:0 2% 3em 2%;
   			color:#000000;
    et changer éventuellement les couleurs. Que signifie line-height ?
  2. Choisir une mise en forme pour les titres de niveau 2.

Créer des liens

La vocation d’une page HTML est d’être liée à d’autres pages. Ainsi nous souhaitons qu’un clic sur un item de menu renvoie à la recette correspondante.

Exercice 7 : liens vers les autres pages

  1. Modifier les items de menu comme par exemple <a href = "far-casimir.html">Far Casimir</a>.
  2. On constate que le menu n’est plus aussi joli. On va corriger cela dans la feuille de style. Ajouter 
    	  
	   		 nav a
	   		 {
	   			display:block;
      				text-decoration:none;
      		 	 }
    Vous pouvez changer d’autres propriétés à votre guise. Que signifient les propriétés précédentes ?
  3. Changer la couleur du fond pour nav a:hover et tester. Valider la page mainteant complête par le W3C.

Exercice 8 : autres pages

  1. Maintenant que la première page est achevée nous allons nous en servir comme modèle pour créer les suivantes. Faire une copie de cette page sous le nom “modele.html”. Puis transformer le logo en lien pour retour à la page d’acceuil.

  2. Télécharger le fichier far-casimir.txt ici.

    Insérer le document far-casimir.txt dans le modèle et sauvegarder sous le nom far-casimir.html.

  3. Créer une division pour l’auteur et la date de mise à jour du document. Et une autre pour les ingrédients. Formater le reste de la page à votre guise.
  4. Trouver comment ajouter une icone dans l’onglet du navigateur et modifier les pages concernées si nécessaire.

Créer une autre feuille de style pour le même fichier html

Pour bien comprendre la différence entre le fond (le texte en dehors des balises) et la forme (défini par le fichier CSS) nous allons travailler sur un autre fichier CSS. Cette fois ci nous voulons mettre le menu à l'horizontale, et ne faire apparaître à l'écran que les mots Entrées, Plats et Desserts. Lorsque la souris survole un de ces mots apparaît alors les items correspondants.

Exercice 9 : Un menu horizontal

Repartir dans le fichier indextp14.html

Dans un premier temps encapsuler chaque titre h2 et la liste ul associée par une balise < div class="container" > qui va nous aider à placer les items de la liste ul bien au-dessous les uns des autres et du titre h2.

Télécharger le fichier style2tp14.css ici.

Ensuite ouvrir le fichier style2tp14.css. Ce dernier est à compléter en partie. Il s'agit de mettre à côté de certains commentaires les commandes CSS correspondantes en vous aidant ici www.w3.org/Style/css3-selectors-updates et ici Fonctionnement de float

Pour comprendre certaines commandes il faudra faire aussi l'arbre montrant la structure du fichier indextp14.html.

Correction

Pour le menu horizontal voici une correction possible.

Télécharger le fichier css style3tp14.css ici.

Voici ce que cela donne en ligne ici.

Pour le même fond avec une autre mise en forme ici.

Ne pas la prendre au pied de la lettre, mais essayer de comprendre les grandes idées comme:

Pour aller plus loin...

Les pages HTML sont faites pour être lues par des navigateurs, des robots de recherche et bien sûr ceux qui les écrivent et les maintiennent. La multiplication des types d’usage différents et l’automatisation des processus à conduit à abandonner les pratiques des années 1990 consistant à mélanger la forme et le fond. On peut produire de mauvaises pages en suivant ces anciens principes à l’aide d’un traitement de texte. Au contraire, l’écriture de bonnes pages faciles à lire, à maintenir et à manipuler par des robots demande une structuration proche de la programmation. Il faut hiérarchiser les contenus, découper en blocs logiques, séparer la structure (HTML proprement dit), de la mise en page (reléguée dans les feuilles de style CSS). Ces bonnes pratiques ont aussi l’avantage d’augmenter la vitesse de chargement des pages (les feuilles de style utilisées plusieurs fois ne sont chargées qu’une fois) et d’optimiser l’espace de stockage de l’information. Nous avons pu constater qu’utiliser du HTML/CSS pur ne permettait toutefois pas d’éviter la répétition de certains contenus (bandeau,menu) ce qui ne facilite pas la maintenance des pages. On peut éviter cela par la division d’une page en plusieurs fichiers envoyés séparément aux navigateurs. Cela correspond à l’utilisation de frame. Nous n’avons pas expliqué cette technique ancienne car elle est déconseillée puisqu’elle rends difficile l’exploitation de liens profonds par les moteurs de recherche et risque de causer des incohérences et des pertes de contenu. Alors que faut-il faire ? La bonne solution consiste à faire construire automatiquement les pages du côté serveur WEB pour qu’elles soient ensuite envoyées complètes au navigateur client. Cela peut se faire par l’utilisation de langages de programmation comme JavaScript ou PHP si l’on souhaite que cette construction soit interactive (les pages sont générées à la demande du client). Mais si aucune interaction avec le client n’est nécessaire, les pages peuvent être aussi créées définitivement par des procédés automatiques avant l’installation sur le serveur. On pourra alors utiliser beaucoup de langages de programmation pour ce faire.

Webographie