Cours de HTML suite applications
Sommaire... La structure générale d'une page HTML. Le titrage. La mise en forme du texte. Les paragraphes et les retours à la ligne. Les liens hypertextes. Lien vers une page interne. Lien vers une adresse électronique. Lien vers une page externe. Les listes (listes à puces, listes numérotées) Liste à puce. Liste numérotée. Liste à plusieurs niveaux. Les images. Les tableaux. Les commentaires. Le doctype.
Les balises déjà vu et qui nous servirons pour nos exercices.
1- La structure générale d'une page HTML. Les pages HTML ont toujours la même structure globales. Notez-la ici, cela vous servira de référence ultérieurement . Ecrivez une page HTML dans laquelle vous utilisez toutes les balises suivantes, dans le bon ordre (ici elles sont notées par ordre alphabétique), en les fermant correctement (c'est à dire : en les imbriquant comme il faut) : body, head, header, footer, html, title. Mettez '...' là où se trouve le contenu principal de la page.
2- Le titrage. Ecrivez l'extrait de code HTML qui réalise ce titrage
Réponse <html> <head> <title> Test2 </title> <body> <h1>Titre 1</h1> <h2>Titre 2</h2> <h3>Titre 3</h3> </body> </html>
3- La mise en forme du texte Ecrivez l'extrait de code HTML qui réalise ceci (utilisez les balises <b>, <i>, <u>) : <i>Votre texte..</i>
La mise en forme du texte Ecrivez l'extrait de code HTML qui réalise ceci (utilisez les balises <small>, <strong>) :
La mise en forme du texte Ecrivez l'extrait de code HTML qui réalise ceci (utilisez les balises <sub>, <sup>) : <html> <head> <title> Test5 </title> </head> <body> <p> 2 <sup>10</sup> <p> U <sub>o</sub> </body> </html>
La mise en forme du texte Ecrivez l'extrait de code HTML 5 qui réalise cette mise en forme : <html> <head> <title> Test5 </title> </head> <body> <p> texte en <font color='red'>rouge</font> </body> </html>
4- Les paragraphes et les retours à la ligne. A l'intérieur du titrage, tout texte doit être contenu dans un 'conteneur', le plus courant étant le paragraphe (balise <p>). Un retour à la ligne à l'intérieur du même paragraphe se fait avec la balise : <br>. Ecrivez l'extrait de code HTML qui réalise les paragraphes suivants : <p> = Paragraphe normal (par défaut justifié à gauche) <p ALIGN="center"> = Paragraphe ou le texte est centré <p ALIGN="left"> = Paragraphe justifié à gauche <P ALIGN="right"> = Paragraphe justifié à droite <html> <head> <title> Test6 </title> </head> <body> <p style='position: relative; z-index: 2; align: right;'> <h2> SW<font color='cyan'><sup style='font-size: 30px'>3</sup></font>G-L<font color='cyan'><sup style='font-size: 30px'>0</font>RD</h2></p> </body> </html>
5 - Les liens hypertextes. Les liens hypertexte permettent d'écrire un texte sur lequel on peut cliquer pour se rendre vers une nouvelle page, une ressource (fichier, son, image, etc.), une adresse électronique, etc. On utilise la balise <a>et son paramétrage. Lien vers une page interne Ecrivez l'extrait de code HTML qui réalise ce lien vers une autre page : actualite.html (on suppose pour simplifier que la page actualite.html est dans le même répertoire que la page courante) : <html> <head> <title> Test8 </title> </head> <body> <a href="http://www.youtube.com" >YOUTUBE</a> </body>
Lien vers une adresse électronique. Ecrivez l'extrait de code HTML qui réalise ce lien vers une adresse électronique Lien vers une page externe. Quand on fait un lien depuis notre site vers un autre site, on l'ouvre dans un autre onglet pour pas que l'internaute quitte notre site, c'est du marketing (on utilise pour ça l'attribut target= de la balise <a>). Ecrivez l'extrait de code HTML qui réalise ce lien vers un autre site : http://www.esicad.com/ecoles/esicad-montpellier : <html> <head> <title> Test </title> </head> <body> <header> header </header> <p> <b>blablabla</b> </p> <footer> <a href="mailto:prenom.nom@gmail.com">Contacter Prenom Nom Monino</a> </footer> </body> </html> <!-- commentaire -->
6 -Les listes (listes à puces, listes numérotées) On peut faire en HTML des listes à puces ou des listes numérotées. On utilise les balises <ol>, <ul> et <li>. Liste à puce. Ecrivez l'extrait de code HTML qui réalise cette liste à puce : <html> <head> <title> Test8 </title> </head> <body> <ul><li>lililil</li> <li> fezf </li> </ul> <ol> <li>fj</li> <ul><li> niveau </li><ul> </ol> <table > <tr> <td>Titre1</td> <td>Titre2</td> </tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </table><!-- frefefeferfe--> <footer> </br> <a href="mailto:clement.monino@gmail.com">Contactez Moi</a> </footer> </body> </html> <!-- commentaire ftftftftftftftftf-->
Liste numérotée. Ecrivez l'extrait de code HTML qui réalise cette liste numérotée :
Liste à plusieurs niveaux. Ecrivez l'extrait de code HTML qui combine les deux types de liste : <UL> <LI> ... niveau 1, numéro 1... <OL> <LI> ... niveau 2, numéro 1... <LI> ... niveau 2, numéro 2... <OL start="10"> <LI> ... niveau 3, numéro 10... </OL> <LI> ... niveau 2, numéro 1... </OL> <LI> ... niveau 1, numéro 2... </UL>
7 - Les images L'insertion d'images dans une page Web est incontournable. On utilise la balise <img>. Ecrivez l'extrait de code HTML qui insère l'image 'sun.jpg', qui se trouve dans le même répertoire que la page Web. Ecrivez l'extrait de code HTML qui insère l'image 'sun.jpg', qui se trouve dans le sous-répertoire 'images'. <html> <head> <title> Test3 </title> </head> <body> <img src='.\genja.jpg' style='position: relative; float: right'/> </body> </html> <!--Image RELATIVE située dans le même dossier (répertoire) que le document HTML. --> <img src="monImage.png" /> <!--Image RELATIVE au document HTML. --> <img src="/images/monImage.png" /> <!-- Image ABSOLUE avec une l’adresse en entier. Cette située peut se trouver --> <!-- sur un autre serveur (distant) que le document HTML d’origine. --> <img src="http://www.trucsweb.com/images/monImage.png" />
<!--Image RELATIVE située dans le même dossier (répertoire) que le document HTML. --> <img src="monImage.png" /> <!--Image RELATIVE au document HTML. --> <img src="/images/monImage.png" /> <!-- Image ABSOLUE avec une l’adresse en entier. Cette située peut se trouver - -> <!-- sur un autre serveur (distant) que le document HTML d’origine. --> <img src="http://www.trucsweb.com/images/monImage.png" />
Les erreurs fréquentes à l’insertion d’image Les erreurs les plus fréquentes lors de l'insertion d'images. Vous avez tapé scr au lieu de src (source). Vous n'avez pas bien vérifié l'extension de votre image, qui est peut être .jpeg ou .gif au lieu de .jpg. L'image n'est pas dans le même répertoire que la page Web. Cela marche en local mais plus chez l'hébergeur ? Vous n'avez pas respecté la casse dans le chemin vers l'image. Cela marche donc sous Windows mais plus sous Linux.
8 -Les tableaux. On peut faire des tableaux en HTML. Celui-ci est moche, mais on attendra d'aborder le CSS pour aligner le contenu, mettre des bordures, mettre des styles de fond. Pour l'instant, vous avez besoin des balises <table>, <tr>, <th>, <td>. Ecrivez l'extrait de code HTML qui réalise le tableau suivant : 1. La déclaration du tableau. <table width="100%" cellspacing="0" cellpadding="0"> 2. Titre du tableau. <caption>Titre du tableau</caption> 3. Les lignes du tableau. <tr><td>première ligne qui contient une cellule</td></tr> <tr><td>nouvelle ligne qui contient une cellule</td></tr> 4. Les colonnes de chaque ligne appellé cellule. <tr><td>Cellule 1</td><td>>Cellule 2</td></tr> 5. L’en-tête du tableau. <tr><th>En-tête colonne 1</th></tr> 6. Fusions de plusieurs cellules sur une ligne. <tr><td>Colonne 1</td><td>Colonne 2</td></tr> <tr><td colspan="2">Occupe deux cellules</td></tr> 7. Fusions de plusieurs cellules sur une colonne. <tr><td rowspan="2">Colonne 1 sur deux ligne</td><td>Colonne 2 première ligne</td></tr> <tr><td>Colonne 2, deuxième ligne</td></tr> 8. Aviter le saut de ligne à l’intérieur d’une cellule. <th nowrap>Le contenu sera toujours affiché sans saut de ligne</th> 9. balises thead, tbody et tfoot. Ces balises permettent d’identifier les principales sections du tableau. <table> <thead> <tr><td>En-tête</td></tr> </thead> <tfoot> <tr><td>pied de page</td></tr> </tfoot> <tbody> <tr><td>Peemière ligne</td></tr> <tr><td>Deuxième ligne</td></tr> <tr><td>Troisième ligne</td></tr> </tbody> </table>
1. La déclaration du tableau 1. La déclaration du tableau. <table width="100%" cellspacing="0" cellpadding="0"> 2. Titre du tableau. <caption>Titre du tableau</caption> 3. Les lignes du tableau. <tr><td>première ligne qui contient une cellule</td></tr> <tr><td>nouvelle ligne qui contient une cellule</td></tr> 4. Les colonnes de chaque ligne appellé cellule. <tr><td>Cellule 1</td><td>>Cellule 2</td></tr> 5. L’en-tête du tableau. <tr><th>En-tête colonne 1</th></tr> 6. Fusions de plusieurs cellules sur une ligne. <tr><td>Colonne 1</td><td>Colonne 2</td></tr> <tr><td colspan="2">Occupe deux cellules</td></tr>
7. Fusions de plusieurs cellules sur une colonne 7. Fusions de plusieurs cellules sur une colonne. <tr><td rowspan="2">Colonne 1 sur deux ligne</td><td>Colonne 2 première ligne</td></tr> <tr><td>Colonne 2, deuxième ligne</td></tr> 8. Eviter le saut de ligne à l’intérieur d’une cellule. <th nowrap>Le contenu sera toujours affiché sans saut de ligne</th> 9. balises thead, tbody et tfoot. Ces balises permettent d’identifier les principales sections du tableau. <table> <thead> <tr><td>En-tête</td></tr> </thead> <tfoot> <tr><td>pied de page</td></tr> </tfoot> <tbody> <tr><td>Peemière ligne</td></tr> <tr><td>Deuxième ligne</td></tr> <tr><td>Troisième ligne</td></tr> </tbody> </table>
9 - Les commentaires Trouvez les balises qui permettent de commencer et de terminer un commentaire HTML :
10- Le doctype Avant la balise <html>, on doit mettre la balise <!DOCTYPE ...> qui renseigne sur la nature du document qui suit. Notez la balise doctype associé au HTML 5 :
Bonus Exemple de programme à saisir sur notepad++ <!DOCTYPE html> <html> <head> <title>Citations</title> <p> Par Oscar Wilde . </p> </head> <body> Vivre est la chose la plus rare du monde. La plupart des gens ne font qu'exister. </body> </html>