HTMLdffheight-0.5 -widthheightdepthp...

M. Le Yaouanc

13 août 2012

M. Le Yaouanc

Langage de balisage. . .

Séparation forme/fond. . .

Validation

Extensions HyperText Markup Language

M. Le Yaouanc

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.

M. Le Yaouanc

Validation

Extensions

3 des formulaires ;

M. Le Yaouanc

Validation

Extensions

3 des formulaires ;

M. Le Yaouanc

Validation

Extensions

3 des formulaires ;

M. Le Yaouanc

Validation

Extensions

3 des formulaires ;

M. Le Yaouanc

Validation

Extensions Langage de balisage. . .

M. Le Yaouanc

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).

M. Le Yaouanc

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)

M. Le Yaouanc

Validation

Extensions

<p> paragraph

M. Le Yaouanc

Validation

Extensions

<p> paragraph

M. Le Yaouanc

Validation

Extensions

<p> paragraph

M. Le Yaouanc

Validation

Extensions

<p> paragraph

M. Le Yaouanc

Validation

Extensions

<p> paragraph

M. Le Yaouanc

Validation

Extensions

<p> paragraph

M. Le Yaouanc

Validation

Extensions

<p> paragraph

M. Le Yaouanc

Validation

Extensions

<p> paragraph

M. Le Yaouanc

Validation

Extensions

<p> paragraph

M. Le Yaouanc

Validation

Extensions

<p> paragraph

M. Le Yaouanc

Validation

Extensions

Pour les liens, les balises sont les suivantes :

<a name="...">...</a> ancre, signet

<a href="...">...</a> ancre, lien hypertexte vers un �chier ou uneURL

M. Le Yaouanc

Validation

Extensions

M. Le Yaouanc

Validation

Extensions

M. Le Yaouanc

Validation

Extensions

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

M. Le Yaouanc

Validation

Extensions

<table> table

M. Le Yaouanc

Validation

Extensions

<table> table

M. Le Yaouanc

Validation

Extensions

<table> table

M. Le Yaouanc

Validation

Extensions

<table> table

M. Le Yaouanc

Validation

Extensions

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

M. Le Yaouanc

Validation

Extensions

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

M. Le Yaouanc

Validation

Extensions

La liste de toutes les balises (HTML4.01/XHTML 1.0) peut se trouver à l'adressesuivante : http ://www.w3schools.com/tags/

M. Le Yaouanc

Validation

Extensions

Structure générale d'une HTML

<!DOCTYPE html ...>

<head>

</head>

<body>

</body>

</html>

M. Le Yaouanc

Validation

Extensions Séparation forme/fond. . .

M. Le Yaouanc

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)

M. Le Yaouanc

Validation

Extensions

Principaux mots-clefs du CSS

. . . .. . . (voir un point !)classe, pour toutes lesbalises

...#... identi�ant

M. Le Yaouanc

Validation

Extensions

Principaux mots-clefs du CSS

. . . .. . . (voir un point !)classe, pour toutes lesbalises

...#... identi�ant

M. Le Yaouanc

Validation

Extensions

Exemples pour principaux mots-clefs du

Exemple

no1 : la CSS

font-family: times ;

font-size: 10pt;

margin-top: 0em;

margin-bottom: 0em;

M. Le Yaouanc

Validation

Extensions

Exemple

no1 : le HTML

<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

M. Le Yaouanc

Validation

Extensions

Exemple

no2 : la CSS

div#galerie {

position: absolute;

top: 90px;

left: 120px;

#galerie img {

width: 200px;

height: 230px;

margin: 20px;

border: 1px solid;

M. Le Yaouanc

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.

M. Le Yaouanc

Validation

Extensions

dimensions

M. Le Yaouanc

Validation

Extensions

dimensions

M. Le Yaouanc

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.

M. Le Yaouanc

Validation

Extensions Validation. . .

M. Le Yaouanc

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. . .

M. Le Yaouanc

Validation

Extensions Extensions

M. Le Yaouanc

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.

HTMLdffheight-0.5 -widthheightdepthp...

Documents

Transcript of HTMLdffheight-0.5 -widthheightdepthp...