![Page 1: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/1.jpg)
HTML
M. Le Yaouanc
13 août 2012
![Page 2: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/2.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions HyperText Markup Language
![Page 3: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/3.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
L'HTML est un langage de balisage (= markup
language) permettant l'écriture de documentshypertextes. La première spéci�cation date de1991. Il permet d'intégrer :
1 des liens vers d'autres documents (HTMLou autre) ;
2 des ressources multimédia ;
3 des formulaires ;
4 des applications (applets Java) ;
C'est l'un des formats de document (texte) leplus répandu et le plus universellement reconnu.
![Page 4: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/4.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
L'HTML est un langage de balisage (= markup
language) permettant l'écriture de documentshypertextes. La première spéci�cation date de1991. Il permet d'intégrer :
1 des liens vers d'autres documents (HTMLou autre) ;
2 des ressources multimédia ;
3 des formulaires ;
4 des applications (applets Java) ;
C'est l'un des formats de document (texte) leplus répandu et le plus universellement reconnu.
![Page 5: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/5.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
L'HTML est un langage de balisage (= markup
language) permettant l'écriture de documentshypertextes. La première spéci�cation date de1991. Il permet d'intégrer :
1 des liens vers d'autres documents (HTMLou autre) ;
2 des ressources multimédia ;
3 des formulaires ;
4 des applications (applets Java) ;
C'est l'un des formats de document (texte) leplus répandu et le plus universellement reconnu.
![Page 6: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/6.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
L'HTML est un langage de balisage (= markup
language) permettant l'écriture de documentshypertextes. La première spéci�cation date de1991. Il permet d'intégrer :
1 des liens vers d'autres documents (HTMLou autre) ;
2 des ressources multimédia ;
3 des formulaires ;
4 des applications (applets Java) ;
C'est l'un des formats de document (texte) leplus répandu et le plus universellement reconnu.
![Page 7: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/7.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
L'HTML est un langage de balisage (= markup
language) permettant l'écriture de documentshypertextes. La première spéci�cation date de1991. Il permet d'intégrer :
1 des liens vers d'autres documents (HTMLou autre) ;
2 des ressources multimédia ;
3 des formulaires ;
4 des applications (applets Java) ;
C'est l'un des formats de document (texte) leplus répandu et le plus universellement reconnu.
![Page 8: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/8.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions Langage de balisage. . .
![Page 9: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/9.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Le principal intérêt des langages à balises estd'être lisibles tant par les êtres humains quefacilement parsables et interprétables par unordinateur.Tous les éléments du document sont contenusentre une balise ouvrante <mot-clef> ou</mot-clef>.Le document est interprété par les butineurs (=navigateur web).
![Page 10: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/10.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Les balises générales sont les suivantes :
<p> paragraph
<h1> header, en-tête
<em> emphasis, insistance (en italique par défaut)
<strong> stronger emphasis (en gras par défaut)
<br /> break, retour à la ligne
<ol> ordered list, liste numérotée
<ul> unordered list, liste à puces
<li> list item, un élément d'une liste
<img src=... /> image
<!� ... �> , commentaires invisibles (à l'interprétation)
![Page 11: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/11.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Les balises générales sont les suivantes :
<p> paragraph
<h1> header, en-tête
<em> emphasis, insistance (en italique par défaut)
<strong> stronger emphasis (en gras par défaut)
<br /> break, retour à la ligne
<ol> ordered list, liste numérotée
<ul> unordered list, liste à puces
<li> list item, un élément d'une liste
<img src=... /> image
<!� ... �> , commentaires invisibles (à l'interprétation)
![Page 12: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/12.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Les balises générales sont les suivantes :
<p> paragraph
<h1> header, en-tête
<em> emphasis, insistance (en italique par défaut)
<strong> stronger emphasis (en gras par défaut)
<br /> break, retour à la ligne
<ol> ordered list, liste numérotée
<ul> unordered list, liste à puces
<li> list item, un élément d'une liste
<img src=... /> image
<!� ... �> , commentaires invisibles (à l'interprétation)
![Page 13: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/13.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Les balises générales sont les suivantes :
<p> paragraph
<h1> header, en-tête
<em> emphasis, insistance (en italique par défaut)
<strong> stronger emphasis (en gras par défaut)
<br /> break, retour à la ligne
<ol> ordered list, liste numérotée
<ul> unordered list, liste à puces
<li> list item, un élément d'une liste
<img src=... /> image
<!� ... �> , commentaires invisibles (à l'interprétation)
![Page 14: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/14.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Les balises générales sont les suivantes :
<p> paragraph
<h1> header, en-tête
<em> emphasis, insistance (en italique par défaut)
<strong> stronger emphasis (en gras par défaut)
<br /> break, retour à la ligne
<ol> ordered list, liste numérotée
<ul> unordered list, liste à puces
<li> list item, un élément d'une liste
<img src=... /> image
<!� ... �> , commentaires invisibles (à l'interprétation)
![Page 15: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/15.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Les balises générales sont les suivantes :
<p> paragraph
<h1> header, en-tête
<em> emphasis, insistance (en italique par défaut)
<strong> stronger emphasis (en gras par défaut)
<br /> break, retour à la ligne
<ol> ordered list, liste numérotée
<ul> unordered list, liste à puces
<li> list item, un élément d'une liste
<img src=... /> image
<!� ... �> , commentaires invisibles (à l'interprétation)
![Page 16: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/16.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Les balises générales sont les suivantes :
<p> paragraph
<h1> header, en-tête
<em> emphasis, insistance (en italique par défaut)
<strong> stronger emphasis (en gras par défaut)
<br /> break, retour à la ligne
<ol> ordered list, liste numérotée
<ul> unordered list, liste à puces
<li> list item, un élément d'une liste
<img src=... /> image
<!� ... �> , commentaires invisibles (à l'interprétation)
![Page 17: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/17.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Les balises générales sont les suivantes :
<p> paragraph
<h1> header, en-tête
<em> emphasis, insistance (en italique par défaut)
<strong> stronger emphasis (en gras par défaut)
<br /> break, retour à la ligne
<ol> ordered list, liste numérotée
<ul> unordered list, liste à puces
<li> list item, un élément d'une liste
<img src=... /> image
<!� ... �> , commentaires invisibles (à l'interprétation)
![Page 18: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/18.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Les balises générales sont les suivantes :
<p> paragraph
<h1> header, en-tête
<em> emphasis, insistance (en italique par défaut)
<strong> stronger emphasis (en gras par défaut)
<br /> break, retour à la ligne
<ol> ordered list, liste numérotée
<ul> unordered list, liste à puces
<li> list item, un élément d'une liste
<img src=... /> image
<!� ... �> , commentaires invisibles (à l'interprétation)
![Page 19: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/19.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Les balises générales sont les suivantes :
<p> paragraph
<h1> header, en-tête
<em> emphasis, insistance (en italique par défaut)
<strong> stronger emphasis (en gras par défaut)
<br /> break, retour à la ligne
<ol> ordered list, liste numérotée
<ul> unordered list, liste à puces
<li> list item, un élément d'une liste
<img src=... /> image
<!� ... �> , commentaires invisibles (à l'interprétation)
![Page 20: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/20.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Les balises générales sont les suivantes :
<p> paragraph
<h1> header, en-tête
<em> emphasis, insistance (en italique par défaut)
<strong> stronger emphasis (en gras par défaut)
<br /> break, retour à la ligne
<ol> ordered list, liste numérotée
<ul> unordered list, liste à puces
<li> list item, un élément d'une liste
<img src=... /> image
<!� ... �> , commentaires invisibles (à l'interprétation)
![Page 21: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/21.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Pour les liens, les balises sont les suivantes :
<a name="...">...</a> ancre, signet
<a href="...">...</a> ancre, lien hypertexte vers un �chier ou uneURL
![Page 22: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/22.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Pour les liens, les balises sont les suivantes :
<a name="...">...</a> ancre, signet
<a href="...">...</a> ancre, lien hypertexte vers un �chier ou uneURL
![Page 23: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/23.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Pour les liens, les balises sont les suivantes :
<a name="...">...</a> ancre, signet
<a href="...">...</a> ancre, lien hypertexte vers un �chier ou uneURL
![Page 24: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/24.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Pour un tableau, les balises sont les suivantes :
<table> table
<th> table header, en tête
<tr> table row, ligne
<td> table data, donnée, ou cellule
![Page 25: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/25.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Pour un tableau, les balises sont les suivantes :
<table> table
<th> table header, en tête
<tr> table row, ligne
<td> table data, donnée, ou cellule
![Page 26: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/26.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Pour un tableau, les balises sont les suivantes :
<table> table
<th> table header, en tête
<tr> table row, ligne
<td> table data, donnée, ou cellule
![Page 27: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/27.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Pour un tableau, les balises sont les suivantes :
<table> table
<th> table header, en tête
<tr> table row, ligne
<td> table data, donnée, ou cellule
![Page 28: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/28.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Pour un tableau, les balises sont les suivantes :
<table> table
<th> table header, en tête
<tr> table row, ligne
<td> table data, donnée, ou cellule
![Page 29: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/29.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Pour la structure générale du document, lesbalises sont les suivantes :
<div> division , tout élément structurel dudocument(paragraphe, section, etc.)
<span> portée , groupe de mots ou de paragraphes
![Page 30: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/30.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
Pour la structure générale du document, lesbalises sont les suivantes :
<div> division , tout élément structurel dudocument(paragraphe, section, etc.)
<span> portée , groupe de mots ou de paragraphes
![Page 31: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/31.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principales balises du HTML
La liste de toutes les balises (HTML4.01/XHTML 1.0) peut se trouver à l'adressesuivante : http ://www.w3schools.com/tags/
![Page 32: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/32.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Structure générale d'une HTML
<!DOCTYPE html ...>
<html ...>
<head>
<title> ... </title>
</head>
<body>
...
</body>
</html>
![Page 33: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/33.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions Séparation forme/fond. . .
![Page 34: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/34.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
À partir de 1996, le W3C publie les premièresspéci�cations d'un langage permettant dedécrire la mise en forme d'une page HTML : cesont les Cascading Style Sheets.À chaque balise (dans son contexte) la feuille destyle dé�nit son style (= son apparence àl'interprétation)
![Page 35: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/35.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principaux mots-clefs du CSS
. . . .. . . (voir un point !)classe, pour toutes lesbalises
...#... identi�ant
![Page 36: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/36.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Principaux mots-clefs du CSS
. . . .. . . (voir un point !)classe, pour toutes lesbalises
...#... identi�ant
![Page 37: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/37.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Exemples pour principaux mots-clefs du
CSS
Exemple
no1 : la CSS
.p {
font-family: times ;
font-size: 10pt;
margin-top: 0em;
margin-bottom: 0em;
}
![Page 38: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/38.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Exemples pour principaux mots-clefs du
CSS
Exemple
no1 : le HTML
<p>
<a href="http://validator.w3.org/
check?uri=referer">
<img src="http://www.w3.org/Icons/
valid-xhtml10"
alt="Valid XHTML 1.0 Strict"
height="31" width="88" /></a><br />
dernière mise à jour : xx/xx/xx
</p>
![Page 39: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/39.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Exemples pour principaux mots-clefs du
CSS
Exemple
no2 : la CSS
div#galerie {
position: absolute;
top: 90px;
left: 120px;
}
#galerie img {
width: 200px;
height: 230px;
margin: 20px;
border: 1px solid;
}
![Page 40: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/40.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Quelques détails supplémentaires : les
dimensions
Toute longueur peut s'exprimerI % (pourcentage), px (pixels), em (largeur
d'une majuscule),. . .qui sont des taillesrelatives ;
I en centimètre (cm), pouces (in),. . . quisont des tailles �xes, pour a�cher uneimage en taille réelle par exemple, mais àéviter en général.
![Page 41: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/41.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Quelques détails supplémentaires : les
dimensions
Toute longueur peut s'exprimerI % (pourcentage), px (pixels), em (largeur
d'une majuscule),. . .qui sont des taillesrelatives ;
I en centimètre (cm), pouces (in),. . . quisont des tailles �xes, pour a�cher uneimage en taille réelle par exemple, mais àéviter en général.
![Page 42: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/42.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Quelques détails supplémentaires : les
dimensions
Toute longueur peut s'exprimerI % (pourcentage), px (pixels), em (largeur
d'une majuscule),. . .qui sont des taillesrelatives ;
I en centimètre (cm), pouces (in),. . . quisont des tailles �xes, pour a�cher uneimage en taille réelle par exemple, mais àéviter en général.
![Page 43: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/43.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Quelques détails supplémentaires : le
positionnement
La propriété CSS position permet trois modesde positionnement :
I fixed : par rapport à l'écran ;I absolute : par rapport au bloc parent ;I relative : par rapport à sa position dans
le �ux normal.
Dans chacun de ces cas, il faut indiquer un oudeux décalage(s) par rapport au point d'origine(qui se trouve en haut à gauche)Il existe un autre type de positionnement appelé�ottant (avec la propriété float) qui permet deplacer un bloc sur la droite ou la gauche etd'écrire du texte autour.
![Page 44: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/44.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions Validation. . .
![Page 45: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/45.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Validation
Le W3C permet de valider une page HTML(publiée) :
http ://validator.w3.org/
ainsi que les CSS associées :
http ://jigsaw.w3.org/css-validator/
Ce sont des outils importants qu'il faut utiliserpour créer des pages correctes.N.B. Les butineurs tolèrent énormémentd'erreurs. . .
![Page 46: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/46.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions Extensions
![Page 47: HTMLdffheight-0.5 -widthheightdepthp ...sco.ljbrel93.ac-creteil.fr/eleyaouanc/ISN/DOCUMENTS/HTML.TS... · des liens vers d'autres documents (HTML ou autre); 2 des ressources multimédia;](https://reader033.vdocuments.net/reader033/viewer/2022060815/60940265db726f7cf4113927/html5/thumbnails/47.jpg)
HTML
M. Le Yaouanc
HTML
Langage de balisage. . .
Séparation forme/fond. . .
Validation
Extensions
Parmi les � extensions � possibles à l'HTML, lejavascript est celle qui est la plus utilisée. Ellepermet d'étendre les capacités interactives duHTML.L'autre manière d'utiliser l'HTML est d'utiliserun autre langage (en général PHP ou Python)pour générer des pages HTML. L'interactivitéest assurée par les formulaires. L'utilisationcomplémentaire des bases de données (etéventuellement d'un composant Flash) permet lacréation d'application web.