HTML
D’après openclassrooms
Alexandre Benoit
TS10
Introduction
Télécharger à partir de la page web du cours le fichier pageoueb.html Ouvrir le fichier avecNotepad++.
Ouvrir le fichier avecFirefox.
I Les balises de base
Lest titres
Pour définir les titres, il existe les balisesHTML 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 m o i n s i m p o r t a n t</h2> Tester toutes les balises titres.
Lest titres
Pour définir les titres, il existe les balisesHTML 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 m o i n s i m p o r t a n t</h2> Tester toutes les balises titres.
Lest titres
Pour définir les titres, il existe les balisesHTML 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 m o i n s i m p o r t a n t</h2>
Tester toutes les balises titres.
Lest titres
Pour définir les titres, il existe les balisesHTML 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 m o i n s i m p o r t a n t</h2>
Tester toutes les balises titres.
La mise en valeur
Pour marquer les textes importants, on utilise les balisesem,strong et mark.
Par exemple
<p> Dans mon p a r a g r a p h e ,
<s t r o n g> c e c i e s t t r e s i m p o r t a n t</s t r o n g>
<em> a l o r s que c e c i l ’ e s t m o i n s</em></p> Tester ces balises.
La mise en valeur
Pour marquer les textes importants, on utilise les balisesem,strong et mark.
Par exemple
<p> Dans mon p a r a g r a p h e ,
<s t r o n g> c e c i e s t t r e s i m p o r t a n t</s t r o n g>
<em> a l o r s que c e c i l ’ e s t m o i n s</em></p>
Tester ces balises.
La mise en valeur
Pour marquer les textes importants, on utilise les balisesem,strong et mark.
Par exemple
<p> Dans mon p a r a g r a p h e ,
<s t r o n g> c e c i e s t t r e s i m p o r t a n t</s t r o n g>
<em> a l o r s que c e c i l ’ e s t m o i n s</em></p>
Tester ces balises.
Les listes
Pour créer une liste on utilise la baliseul pour la définir suivie de la baliseli pour chaque item.
Par exemple :
<u l>
<l i>ISN</l i>
<l i>Maths</l i>
<l i>EPS</l i>
</u l>
On peut numéroter les listes en utilisant la balise ol
Les listes
Pour créer une liste on utilise la baliseul pour la définir suivie de la baliseli pour chaque item.
Par exemple :
<u l>
<l i>ISN</l i>
<l i>Maths</l i>
<l i>EPS</l i>
</u l>
On peut numéroter les listes en utilisant la balise ol
Les listes
Pour créer une liste on utilise la baliseul pour la définir suivie de la baliseli pour chaque item.
Par exemple :
<u l>
<l i>ISN</l i>
<l i>Maths</l i>
<l i>EPS</l i>
</u l>
On peut numéroter les listes en utilisant la balise ol
II Les liens
Les listes
Pour créer une liste on utilise la baliseul pour la définir suivie de la baliseli pour chaque item.
Par exemple :
<u l>
<l i>ISN</l i>
<l i>Maths</l i>
<l i>EPS</l i>
</u l>
On peut numéroter les listes en utilisant la balise ol
Les listes
Pour créer une liste on utilise la baliseul pour la définir suivie de la baliseli pour chaque item.
Par exemple :
<u l>
<l i>ISN</l i>
<l i>Maths</l i>
<l i>EPS</l i>
</u l>
On peut numéroter les listes en utilisant la balise ol
Les listes
Pour créer une liste on utilise la baliseul pour la définir suivie de la baliseli pour chaque item.
Par exemple :
<u l>
<l i>ISN</l i>
<l i>Maths</l i>
<l i>EPS</l i>
</u l>
On peut numéroter les listes en utilisant la balise ol
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 h r e f=" h t t p : / /www . l e m o n d e . 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 h r e f=" p a g e 2 . h t m l "> l a s e c o n d e page</a> .</p>
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 h r e f=" h t t p : / /www . l e m o n d e . 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 h r e f=" p a g e 2 . h t m l "> l a s e c o n d e page</a> .</p>
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 h r e f=" h t t p : / /www . l e m o n d e . 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 h r e f=" p a g e 2 . h t m l "> l a s e c o n d e page</a> .</p>
Ancre
Uneancre 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 i d=" mon_ancre "> T i t r e</h2> Puis de la rappeler par :
<a h r e f="#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 h r e f=" p a g e 2 . h t m l#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 />
Ancre
Uneancre 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 i d=" mon_ancre "> T i t r e</h2>
Puis de la rappeler par :
<a h r e f="#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 h r e f=" p a g e 2 . h t m l#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 />
Ancre
Uneancre 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 i d=" mon_ancre "> T i t r e</h2>
Puis de la rappeler par :
<a h r e f="#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 h r e f=" p a g e 2 . h t m l#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 />
Cas pratiques d’utilisation des liens
On peut utiliser l’attribut titlequi 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 h r e f=" h t t p : / /www . l e m o n d e . 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 h r e f=" h t t p : / /www . l e m o n d e . f r " t a r g e t=" _ b l a n c k "> Le Monde</a> .</p>
Pour créer un lien vers un e-mail :
<p><a h r e f=" m a i l t o : v o t r e n o m @ b i d u l e . com">Envoyez−moi un e−m a i l !</a></p>
Cas pratiques d’utilisation des liens
On peut utiliser l’attribut titlequi 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 h r e f=" h t t p : / /www . l e m o n d e . 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 h r e f=" h t t p : / /www . l e m o n d e . f r " t a r g e t=" _ b l a n c k ">
Le Monde</a> .</p>
Pour créer un lien vers un e-mail :
<p><a h r e f=" m a i l t o : v o t r e n o m @ b i d u l e . com">Envoyez−moi un e−m a i l !</a></p>
Cas pratiques d’utilisation des liens
On peut utiliser l’attribut titlequi 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 h r e f=" h t t p : / /www . l e m o n d e . 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 h r e f=" h t t p : / /www . l e m o n d e . f r " t a r g e t=" _ b l a n c k ">
Le Monde</a> .</p>
III Les images
Insérer une image
Pour insérer une image, on utilise la baliseimg Par exemple :
<p> V o i c i Lenna <img s r c=" . / l e n n a . j p g " a l t=" Lenna " />
</p>
On peut ajouter une infobulle avec title
Insérer une image
Pour insérer une image, on utilise la baliseimg Par exemple :
<p> V o i c i Lenna <img s r c=" . / l e n n a . j p g " a l t=" Lenna " />
</p>
On peut ajouter une infobulle avec title
Les Figures
Unefigureest un élément qui vient enrichir le texte. Il peut être une image, un code source ou autre.
En HTML5, on dispose de la balisefigure. que l’on utilise comme ça :
< f i g u r e>
<img s r c=" . / 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>
Les Figures
Unefigureest un élément qui vient enrichir le texte. Il peut être une image, un code source ou autre.
En HTML5, on dispose de la balisefigure. que l’on utilise comme ça :
< f i g u r e>
<img s r c=" . / 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>
CSS
Il ne reste plus qu’à <og designer fg> notre site. Pour cela on va utiliser CSS.
