HTML D après openclassrooms Alexandre Benoit TS 2016/2017
Introduction Télécharger à partir de la page web du cours le fichier pageoueb.html Ouvrir le fichier avec Notepad++. Ouvrir le fichier avec Firefox. 2 / 14
I Les balises de base 3 / 14
Les titres Pour définir les titres, il existe les balises HTML allant de h1 jusqu à h6. 4 / 14
Les titres Pour définir les titres, il existe les balises HTML allant de h1 jusqu à h6. On a par exemple : <h1>c e c i e s t l e t i t r e l e p l u s i m p o r t a n t</h1> 4 / 14
Les titres Pour définir les titres, il existe les balises HTML allant de h1 jusqu à h6. On a par exemple : <h1>c e c i e s t l e t i t r e l e p l u s i m p o r t a n t</h1> ou encore <h2>c e c i e s t moins i m p o r t a n t</h2> 4 / 14
Les titres Pour définir les titres, il existe les balises HTML allant de h1 jusqu à h6. On a par exemple : <h1>c e c i e s t l e t i t r e l e p l u s i m p o r t a n t</h1> ou encore <h2>c e c i e s t moins i m p o r t a n t</h2> Tester toutes les balises titres. 4 / 14
La mise en valeur Pour marquer les textes importants, on utilise les balises em, strong et mark. 5 / 14
La mise en valeur Pour marquer les textes importants, on utilise les balises em, strong et mark. Par exemple <p> Dans mon paragraphe, <strong>c e c i e s t t r e s i m p o r t a n t</ strong> <em>a l o r s que c e c i l e s t moins</em></p> 5 / 14
La mise en valeur Pour marquer les textes importants, on utilise les balises em, strong et mark. Par exemple <p> Dans mon paragraphe, <strong>c e c i e s t t r e s i m p o r t a n t</ strong> <em>a l o r s que c e c i l e s t moins</em></p> Tester ces balises. 5 / 14
Les listes Pour créer une liste on utilise la balise ul pour la définir suivie de la balise li pour chaque item. 6 / 14
Les listes Pour créer une liste on utilise la balise ul pour la définir suivie de la balise li pour chaque item. Par exemple : <ul> < l i>isn</ l i> < l i>maths</ l i> < l i>eps</ l i> </ ul> 6 / 14
Les listes Pour créer une liste on utilise la balise ul pour la définir suivie de la balise li pour chaque item. Par exemple : <ul> < l i>isn</ l i> < l i>maths</ l i> < l i>eps</ l i> </ ul> On peut numéroter les listes en utilisant la balise ol 6 / 14
II Les liens 7 / 14
Lien vers d autres sites Pour créer un lien vers un autre site web, on utilise une balise a. 8 / 14
Lien vers d autres sites Pour créer un lien vers un autre site web, on utilise une balise a. Par exemple pour avoir un lien vers le Monde : <p>v o i c i un l i e n v e r s <a href=" h t t p : / /www. lemonde. f r ">Le Monde</a>.</p> 8 / 14
Lien vers d autres sites Pour créer un lien vers un autre site web, on utilise une balise a. Par exemple pour avoir un lien vers le Monde : <p>v o i c i un l i e n v e r s <a href=" h t t p : / /www. lemonde. f r ">Le Monde</a>.</p> On peut aussi faire un lien vers la page page2.html situé dans le même dossier. <p>v o i c i un l i e n v e r s <a href=" page2. html ">l a seconde page</a>.</p> 8 / 14
Ancre Une ancre est une sorte de point de repère que l on peut mettre dans vos pages HTML lorsqu elles sont très longues. 9 / 14
Ancre Une ancre est une sorte de point de repère que l on peut mettre dans vos pages HTML lorsqu elles sont très longues. On lance l ancre vers un titre du texte en utilisant : <h2 id="mon_ancre">t i t r e</h2> Puis de la rappeler par : <a href="#mon_ancre">a l l e r v e r s l a n c r e</a> 9 / 14
Ancre Une ancre est une sorte de point de repère que l on peut mettre dans vos pages HTML lorsqu elles sont très longues. On lance l ancre vers un titre du texte en utilisant : <h2 id="mon_ancre">t i t r e</h2> Puis de la rappeler par : <a href="#mon_ancre">a l l e r v e r s l a n c r e</a> On peut aussi mettre un lien vers une ancre située dans une autre page. Par exemple : <a href=" page2. html#monancre ">A l l e r v e r s l a n c r e de l a u t r e page</a><br /> 9 / 14
Cas pratiques d utilisation des liens On peut utiliser l attribut title qui affiche une bulle d aide lorsqu on pointe sur le lien. Cet attribut est facultatif. <p>v o i c i un l i e n v e r s <a href=" h t t p : / /www. lemonde. f r " t i t l e=" l e s i t e d i n f o "> Le Monde</a>.</p> 10 / 14
Cas pratiques d utilisation des liens On peut utiliser l attribut title qui affiche une bulle d aide lorsqu on pointe sur le lien. Cet attribut est facultatif. <p>v o i c i un l i e n v e r s <a href=" h t t p : / /www. lemonde. f r " t i t l e=" l e s i t e d i n f o "> Le Monde</a>.</p> Il est possible de «forcer» l ouverture d un lien dans une nouvelle fenêtre. Pour cela, on rajoutera target="_blank" : <p>v o i c i un l i e n v e r s <a href=" h t t p : / /www. lemonde. f r " t a r g e t=" _blanck "> Le Monde</a>.</p> 10 / 14
Cas pratiques d utilisation des liens On peut utiliser l attribut title qui affiche une bulle d aide lorsqu on pointe sur le lien. Cet attribut est facultatif. <p>v o i c i un l i e n v e r s <a href=" h t t p : / /www. lemonde. f r " t i t l e=" l e s i t e d i n f o "> Le Monde</a>.</p> Il est possible de «forcer» l ouverture d un lien dans une nouvelle fenêtre. Pour cela, on rajoutera target="_blank" : <p>v o i c i un l i e n v e r s <a href=" h t t p : / /www. lemonde. f r " t a r g e t=" _blanck "> Le Monde</a>.</p> Pour créer un lien vers un e-mail : <p><a href=" m a i l t o : votrenom@bidule. com"> Envoyez moi un e m a i l!</a></p> 10 / 14
III Les images 11 / 14
Insérer une image Pour insérer une image, on utilise la balise img Par exemple : <p> V o i c i A l e x a n d r e Dumas <img src=". / dumas. j p g a l t="dumas"/> </p> 12 / 14
Insérer une image Pour insérer une image, on utilise la balise img Par exemple : <p> V o i c i A l e x a n d r e Dumas <img src=". / dumas. j p g a l t="dumas"/> </p> On peut ajouter une infobulle avec title 12 / 14
Les Figures Une figure est un élément qui vient enrichir le texte. Il peut être une image, un code source ou autre. 13 / 14
Les Figures Une figure est un élément qui vient enrichir le texte. Il peut être une image, un code source ou autre. En HTML5, on dispose de la balise figure. que l on utilise comme ça : <f i g u r e> <img src=". / l e n n a. j p g " a l t=" Lenna "/> <f i g c a p t i o n>lenna</ f i g c a p t i o n> </ f i g u r e> 13 / 14
CSS Il ne reste plus qu à «designer» notre site. Pour cela on va utiliser CSS. 14 / 14