Sie sind auf Seite 1von 84

Langage HTML

HTML (HyperText Markup Language). C'est un langage qui permet de dfinir l'habillage d'un document. Cest dire : la faon dont il doit s'afficher l'cran d'un navigateur. Le HTML nest pas un langage de programmation.

Fichier HTML :
Une page HTML est un fichier texte enrichi de codes et de commandes appeles balises. Le fichier source porte gnralement lextension : .htm ou .html On peut crire du code HTML laide de nimporte quel diteur de texte.

Code HTML :
Il existe des diteurs WYSIWYG : What You See Is What You Get (Ce que vous voyer est ce que vous obtenez) Le code source doit tre sauvegard sur le serveur Web. Il est envoy vers les clients laide du protocole HTTP

Source HTML :
Le code HTML est interprt par le navigateur et laffiche sur cran sous forme de : textes mis en forme, images, animations, multimdias, Le source est visible aux utilisateurs mais ils ne pourront pas le modifier (facilement) sur le serveur.

Notion de Balise :
C'est un mot cl encadr par < et > Pour la plupart des balises, il existe une balise de dbut et une balise de fermeture prcde par /
<HTML> ..... </HTML>

Certaines balises nont pas de balises fermantes :


<BR>

Pour dautres, la balise fermante est facultative : <P>, <TD>

Attribut de balise:
Pour la majorit des balises, il existe un ou plusieurs attributs. Les attributs sont des mots rservs. A chaque attribut, on affecte une valeur comme suit:
<Nom_Balise att_1="val_1" att_2="val_2" att_n="val_n">

Remarques :
- Certains attributs (cas rares) nont pas de valeurs.
<HR noshade>

- Chaque balise a ses propres attributs. - Certains attributs sont communs entre plusieurs balises : Color, Align, - Mais aussi, certaines balises nont pas dattributs.

Valeurs des attributs :


Certaines valeurs doivent appartenir un ensemble fini :
align="left"

Certaines valeurs doivent obir une syntaxe bien prcise :


color ="#FF0080"

Dautres sont libres :


name = "Master IL"

Valeurs particulires : Les couleurs


Par nom : white black blue green red Par code RGB : #RRGGBB. RR, GG ou BB est une valeur hexadcimale entre 00 (correspond 0) et FF (255 dcimal). RR est le dosage de la couleur bleue, GG est le dosage de la couleur verte, BB est le dosage de la couleur bleue.
color ="#FF0080"

Valeurs particulires : Noms de fichiers


Relatif Le fichier doit tre disponible sur le mme serveur Web que le fichier contenant le code HTML. Sur le mme rpertoire le nom du fichier directement : "image.jpg" Sur un rpertoire fils : "images/image.gif" Sur un rpertoire parent : "../page.html" Combinaison : "../dossier/page.htm"

Valeurs particulires : Noms de fichiers


Absolu: Que le fichier soit sur le mme seveur Web ou sur un autre. On donne ladresse complte du fichier.
http://www.nomsite.org/doss//fich.ext

Il faut faire trs attention lcriture dans le cas des fichiers et surtout la casse (majuscules et minuscules).

Valeurs particulires : La taille


Absolu : On donne une valeur entire positive ou nulle n et a correspondra n pixels. Relatif : On donne une valeur entire positive ou nulle suivi du symbole % (n%) et a correspondra n% de lespace disponible.

Valeurs particulires : Lalignement


Horizontalement : "Left" : gauche.
"Right" : droite "Center" : centr

Verticalement : "Top" : haut.


"Middle" : milieu. "Bottom" : bas.

Structuration d'une Page HTML


<HTML> <HEAD> <TITLE> </HEAD> <BODY> ... ... </BODY> </HTML> <!-- en-tte --> Titre de la page </TITLE> <!-- Corps de la page -->

Remarque : L'indentation facilite la lecture du code.

Remarques :
- On peut crire les balises en majuscules ou en minuscules. (Linterprteur du HTML ne tient pas compte de la casse) - Le formatage Manuel: saut de lignes, espaces ..., sont toujours ignors. - Les images, animations, sons, vidos, sont insrs partir de fichiers externes et ne font pas partie du source HTML.

L'en-tte :
La majorit des lments napparaissent pas. Certains sont lis la page Certains sont des informations destines aux moteurs de recherches Certains sont utiliss pour raliser des traitements sur la machine cliente (petites animations ou dfilements, vrifications, )

lments de l'en-tte :
Le titre : Il apparatra sur la barre de titre du navigateur. On linsre entre les balises <title> et
</title>

Un son de fond : <bgsound src="fichier son" loop="nb_repetitions"> loop -1 infini On peut insrer des scripts cot client (en JavaScript par exemple).

lments de l'en-tte : les meta


<META name="nom_META" content="valeur" lang="code_langue"> <META http-equiv="nom_META" content="valeur">

Name : Author Title Keywords


Description Date Generator ProgId

http-equiv : Content-type ContentLanguage

La valeur de content dpend de la valeur de name ou de http-equiv

Exemples de meta :
Lattribut lang (pas pour toutes les meta) aura comme valeur le code de la langue : fr, en, ar-dz,
<META name="keywords" content="html; programmation web; php" lang="fr"> <meta name="description" content="site destin aux tudiants" lang="fr"> <meta http-equiv="Content-Type" Content="text/html; charset="windows1252">

Le corps :
Dfini par la balise <body> Tout ce qui sera mis (ou presque) dans cette partie saffichera sur la page Contient tous les lments afficher : textes, images,

Le Commentaire :
Il y a aussi des balises de commentaires Peut tre insr n'importe o dans la page mais ne sera pas affich par le navigateur.
<!-- ... le commentaire ... -->

Peut tre sur une ou plusieurs lignes. Pas dimbrication de commentaires

Proprits de la page (1) :


A laide des attributs de la balise BODY. Ces attributs sont facultatifs La couleur de fond de la page Lattribut BGCOLOR. La couleur par dfaut du texte Lattribut TEXT. La couleur par dfaut des liens Lattribut LINK.

Proprits de la page (2):


La couleur par dfaut des liens visits Lattribut VLINK. La couleur par dfaut des liens actifs Lattribut ALINK. Les valeurs de tous ces attributs obissent la syntaxe de la couleur (nom ou RGB).

Proprits de la page (3):


Image de fond sur la page Lattribut BACKGROUND. Sa valeur obit la syntaxe des fichiers. Par dfaut limage de fond dfile avec le texte, pour la fixer on rajoute lattribut bgproperties="fixed".

Proprits de la page (4) :


Direction de lcriture du texte : par dfaut de gauche droite Pour modifier la direction Lattribut DIR. Lattribut DIR="rtl" pour une direction de droite gauche (texte en Arabe, par exemple). Les marges de la page : La marge du haut Lattribut topmargin La marge gauche Lattribut leftmargin

Mise en forme du texte (1) :


Pour dfinir la police, la taille et/ou la couleur dun texte en le met entre <font> et </font>. Comme suit :
<font face=nom_police_car color=couleur size=nb> le texte </font>

On peut dfinir un, deux ou tous les attributs pour cette balise.

Mise en forme du texte (2) :


Face : on peut attribuer un ou plusieurs noms de

polices de caractres
Color : Obit la syntaxe de la couleur Size : dfinit la taille du caractre et peut prendre

les valeurs de 1 7. 1 correspond 8pts, 3 12pts et 7 36pts.

Mise en forme du texte (3) :


Gras : <B> </B> ou <Strong> </Strong> Italique : <I> </I> ou <Em> </Em> Soulign : <U> </U> Exposant : <SUP> </SUP> Indice : <SUB> </SUB>

Mise en forme du texte (4) :


Il faut faire attention la fermeture de balises : ordre pile En cas de conflit entre balises, la balise la plus proche sera applique Il y a dautre balises comme blink (clignotant) et strike (barr) qui sont dconseilles.

Mises en formes particulires :


Niveau de titres : balise <H1> <H6>. Code : <code> </code> Clavier : <kbd> </kbd> Variable : <var> </var> Citation : <cite> </cite> Dfinition : <dfn> </dfn> Exemple : <samp> </samp>

Mises en formes particulires :


Bloc en retrait : <blockquote>
</blockquote>

Adresse : <address> </address> Imprim (machine crire) : <tt> </tt> Texte prformat : <pre> </pre> Agrandir ou rduire : <big> </big> ou
<small> </small>

Les paragraphes :
Un paragraphe est dfini par <P> La balise fermante </p> est facultative. Lalignement : Lattribut Align qui peut avoir les valeurs : "center", "left" ou "right".

Les sparateurs :
Caractre de retour la ligne <BR> Na pas de balise fermante Afficher une ligne horizontale <HR> Na pas de balise fermante Elle dfinit un nouveau paragraphe indpendant de ce qui la prcde et de ce qui la suit.

Les sparateurs : barre horizontale


Align : alignement de la barre : "left", "center", "right" Width : la largeur de la barre,

Soit en absolu (valeur entire 0) qui correspondra la largeur en pixel. Soit en relatif (valeur entire 0 suivi de %) qui correspondra au pourcentage de lespace disponible.

Les sparateurs : barre horizontale


Size : lpaisseur de la barre en pixels. Noshade : attribut sans valeur pour liminer lombrage 3D. Nest pas reconnu par tous les navigateurs. Color : Obit la syntaxe de la couleur et dfinit la couleur de la barre.

Les listes (1) :


Listes numrots automatiquement : sont insres laide de <OL> et </OL>
<OL> marque le dbut de la liste </OL> marque la fin de la liste

Chaque lment de la liste doit tre prcd par la balise <LI>.


</LI> est facultative.

Les listes (2):


Par dfaut la numrotation est : 1, 2, etc. Pour changer la faon de numroter lattribut type dans <OL>.
Type prend les valeurs : "I" ou "i": grands ou petits chiffres romains, "A" ou "a": alphabets majuscules ou

minuscules, "1": numrotation ordinaire.

Les listes (3):


Par dfaut la numrotation commence partir de 1, a, A, i ou I. (Selon le type) Pour changer le numro du premier lments lattribut start dans <OL>. Sa valeur est un entier "l" et a commencera de : l Si la numrotation, est ordinaire. l en chiffres romains, Si le type est I ou i lme lettre de lalphabet, Si le type est A ou a.

Les listes (4) :


Listes puces : sont insres laide de <UL> et
</UL> <UL> marque le dbut de la liste </UL> marque la fin de la liste

Chaque lment de la liste doit tre prcd par la balise <LI>.


</LI> est facultative.

Les listes (5):


Il est possible de changer la forme de la puce lattribut type : dans <UL> (pour toute la liste) dans <LI> (pour un lment). On peut importer une image pour jouer le rle de la puce lattribut imagesrc dans <UL>. Sa valeur obit la syntaxe des fichiers.

Les listes (6):


On peut imbriquer les listes. Un lment <LI> peut contenir une liste <OL> ou <UL>. On peut insrer un autre type de liste Les listes de dfinitions. Permet d'afficher des glossaires

Les listes (7) :


On utilise <DL> et </DL> pour marquer le dbut et la fin de la liste. Chaque lment (un titre) doit tre encadr par <DT> et </DT>. La dfinition de llment doit tre encadre par <DD> et </DD>.
</DT> et </DD> sont facultatives.

Les liens :
Il y a deux types de liens (appels aussi rfrences) quon peut dfinir sur une texte ou image : Internes: Ils dsignent un point prcis, repr par une balise, dans le corps mme du document. Externes: Spcifient simplement une autre page HTML, un document multimdia ou l'accs un service comme le e-mail ou le FTP.

Les liens internes :


On fixe un endroit dans le document (la cible). On dfinit une tiquette cet endroit (une ancre)
<A NAME="nom_tiquette">...</A>

On dfinit le lien (la rfrence) :


<A HREF="#nom_tiquette">...</A>.

Les liens externes :


<A HREF="fichier">...</A>.

La valeur de HREF obit la syntaxe de fichier. Comme il peut aller vers un autre service si la valeur de HREF est : "ftp://url" : va vers un le serveur ftp spcifi par lurl. "mailto:adr_email" : ouvre lapplication mail pour lenvoi dun email ladresse dfinit par adr_email.

Insertion dune image :


On utilise la balise <IMG> Limage ne fait pas partie du code HTML. Elle est importe partir dun fichier externe. Attribut obligatoire SRC : sa valeur obit la syntaxe de fichier. Extensions : .gif .jpg .jpeg .png Limage sera affiche sa dimension relle.

Proprits dune image (1):


On peut spcifier la dimension (hauteur, largeur) de limage laide des attributs width et height Leurs valeurs doivent tre en pixels. Attention la dformation de limage!!! On peut dfinir un texte alternatif laide de lattribut alt. Sa valeur est texte libre.

Proprits dune image (2):


Bordure autour de limage Attribut border : sa valeur en pixels correspondra lpaisseur. Alignement par rapport au texte autour de limage Attribut align : sa valeur left, right, center, top, bottom ou middle. Espacement par rapport au texte autour de limage Attributs hspace ( droite et gauche) et vspace (en haut et en bas) : valeurs en pixels

Insertion dun tableau :


Les tableaux sont trs importants dans la mise en forme dune page Web. Un tableau est un ensemble de lignes et de colonnes Un lment dune ligne donne i et dune colonne donne j est appel cellule On utilise les balises <TABLE> et </TABLE>

Les tableaux :
Un tableau HTML est organis en lignes (suite de plusieurs lignes). Chaque ligne contient un ensemble de cellules Il faut sassurer dinsrer le mme nombre de cellules dans chaque ligne.
Anne 2000 2002 2004 2006 Effectifs 18000 20000 21000 21500 volution 12% 10% 05% 2.5%

Lignes et Cellules dun tableau :


Ligne (Table Row) Balises <TR> et </TR> : la balise de fin de ligne nest pas obligatoire. Cellule (Table Data) Balises <TD> et </TD> : la balise de fin de cellule nest pas obligatoire. Cellules spciales Balises <TH> et </TH> : Titre de colonne. On peut sen passer!!! Titre du tableau Balises <CAPTION> et </CAPTION> : A insrer juste aprs <TABLE>.

Proprits du tableau (1) :


Alignement du tableau : on encadre le tableau par les balises <DIV> et </DIV> avec comme attribut Align. Aussi laide de lattribut Align de <table>. Largeur et Hauteur attributs width et height : en absolu (pixels) ou en relatif (%).

Proprits du tableau (2):


Bordure attributs border et bordercolor : le 1er en pixels pour lpaisseur de la bordure et le 2me pour dfinir sa couleur. Pour avoir un effet 3D la bordure bordure claire et la bordure sombre avec bordercolorlight et bordercolordark. Leurs valeurs sont des couleurs

Proprits du tableau (3):


Fond attributs bgcolor et background : le 1er pour dfinir la couleur de fond et le 2me pour fixer une image de fond. Espacements attributs cellspacing et cellpadding : Valeurs en pixels; Le 1er pour dfinir lespacement entre 2 cellules et le 2me pour fixer la marge interne des cellules

Proprits des cellules (1) :


A laide des attributs de <TD> (ou <TH>) Alignement laide des attributs Align et VAlign.
left, right ou center pour Align et top, bottom ou middle pour VAlign

Largeur et Hauteur attributs Width et Height : en absolu (pixels) ou en relatif (%).

Proprits des cellules (2) :


Le fond de la mme faon que pour <table> : attributs bgcolor et background. Couleur bordure de la mme faon que pour <table> : attributs bordercolor, bordercolorlight et bordercolordark. viter le renvoi automatique la ligne attribut sans valeur nowrap

Fusionnement des cellules (1) :


On peut fusionner des cellules adjacentes horizontalement ou verticalement. On utilise des attributs dans la balise <TD> Fusionnement horizontal attribut colspan : sa valeur est un entier n 2 qui correspond au nombre de cellules fusionnes. Les n-1 autres cellules sur la mme ligne doivent tre supprimes.

Fusionnement des cellules (2) :


Fusionnement vertical attribut rowspan : sa valeur est un entier n 2 correspondant au nombre de cellules fusionnes. Une cellule sur les n-1 lignes suivantes doit tre supprime.

Frames Cadres :
Les frames (cadres) permettent de dfinir des zones d'affichage dans la page Web.
EN-TETE M E N U Un Contenu

Chaque frame correspond une page HTML + la page des cadres (exple. ci-dessus ncessite 4 pages)

Page des Cadres (1):


La syntaxe de la page des cadres est particulires. Le corps de la page est dfini par la balise <FRAMESET> et </FRAMESET> au lieu de <body>. La balise <FRAMESET> dfinit une dcomposition (horizontale ou verticale) en 2 ou plusieurs cadres. Dcomposition horizontale lattribut COLS. Dcomposition verticale lattribut ROWS.

Page des Cadres (2):


Sa valeur est une suite dlments spars par des virgules. Chaque lment reprsente la hauteur dune ligne ou la largeur dune colonne (espace rserv). Un lment (ligne ou colonne) peut tre un cadre dfini par la balise <FRAME> ou un ensemble de cadres dfini par la balise <FRAMESET>.

Page des Cadres (3):


Lespace rserv (hauteur ou largeur) est dfini par : Le nombre de pixels (entier 0) Un pourcentage (entier 0 suivi de %) * (pour utiliser tout lespace restant). Par exemple :
<Frameset rows="100,*,150,10%">.

Proprits des Cadres (1):


Espacement entre cadres attribut framespacing de la balise <Frameset>. Sa valeur est un entier. Entre <Frameset> et </Frameset>, on doit dfinir tous les cadres. Chaque cadre est dfini par la balise <Frame>. On peut avoir au lieu dun cadre, une autre dcomposition laide de <Frameset>.

Proprits des Cadres (2):


Les autres proprits sont fixes laide des attributs de la balise <Frame>. Nom du cadre attribut Name : valeur libre. Page HTML associe au cadre attribut SRC. Cadre douverture par dfaut des liens attribut Target : sa valeur doit tre le nom dun cadre qui existe.

Proprits des Cadres (3):


Barres de dfilements attribut Scrolling : valeur auto, yes ou no. Interdire de redimensionner le cadre attribut sans valeur noresize. Marges internes du cadre attributs MarginHeight et MarginWidth.

Exemple de Cadres:
On veut obtenir des cadres comme le montre le schma ci-dessous :
EN-TETE M E N U Un Contenu

On a 2 lignes de cadres et la 2me ligne compose de 2 colonnes de cadres.

Liens dans les Cadres (1) :


Il faut dfinir le cadre cible o souvrira le lien. Par dfaut, le lien souvrira dans le cadre spcifi par Target dans la balise <FRAME>, mais on peut le changer. On rajoute la balise <a> lattribut TARGET avec le nom dun cadre comme valeur. Pour ouvrir le lien dans le mme cadre Valeur _self Target.

Liens dans les Cadres (2) :


Pour ouvrir le lien dans le cadre pre Valeur _parent Target. Pour ouvrir le lien dans la page entire Valeur _top Target.
_parent et _top ne donnent pas la mme chose

si le cadre est dans une page de cadres qui est cadre. Pour ouvrir le lien dans une nouvelle fentre Valeur _blank Target.

A propos des Cadres :


Il existe des navigateurs qui ne reconnaissent pas les cadres La solution est dinsrer juste avant la dernire </frameset> le corps de la page qui saffichera au lieu des cadres entre <noframes> et </noframes>. Les cadres sont dconseills pour divers raisons : Le nombre de pages utilises. Lindexation dans les moteurs de recherche.

Les formulaires :
Un formulaire est un ensemble dlments permettant la saisie d'informations. Le HTML s'occupe du cot description seulement, pas du traitement des informations saisies. Pour dfinir un formulaire on utilise les balises : <form> et </form>. Permet de dlimiter les lments du mme formulaire.

Proprits du formulaire (1) :


Parmi les attribut de <form> : Le nom du formulaire Name : trs utile dans les traitements cot client (JavaScript par exemple). Le nom de l application qui traitera le formulaire Action : Sa valeur obit syntaxe fichiers.
Target : Utilis de la mme faon que pour la balise <a> pour laffichage de la rponse (quel

cadre ou nouvelle fentre)

Proprits du formulaire (2) :


La mthode denvoi des donnes Method : 2 valeurs possibles GET : Les donnes sont envoyes avec lURL. Nombre de caractres limit. Donnes apparaissent sur la barre dadresse du navigateur. POST : Les donnes sont envoy dans une zone spciale sur le serveur. Pas de limites pour les donnes.

lments des formulaires :


Le formulaire est compos d'lments d'entre dfinis par l'une des trois balises : <INPUT> <TEXTAREA> <SELECT> Ils ont tous le mme attribut : NAME. Il les identifie de manire unique. Attribut obligatoire et important.

Les lments (champs) <INPUT> :


La valeur de lattribut Type permet de distinguer les lments <INPUT> : TEXT : Zone (Champ) de texte simple. PASSWORD : Zone de saisie de mot de passe. HIDDEN : Champ masqu. RADIO : Case doption (bouton radio). CHECKBOX : Case cocher. FILE : Pour slectionner un fichier envoyer. BUTTON : Bouton de commande (simple). SUBMIT : Bouton denvoi. RESET : Bouton de rinitialisation.

Les champs <INPUT> textuels (1):


Il sagit des champs de type Text, Password et Hidden.
Text : Champ (zone) de saisie de texte simple

permet de saisir un texte comme : nom, prnom,


Password : Zone de saisie mot de passe permet

de faire apparatra lcran chaque caractre en *.


Hidden : Champ textuel masqu. Permet de

transfrer des donnes sans les afficher lcran.

Les champs <INPUT> textuels (2):


Les champs <INPUT> de type Text ou Password peuvent avoir dautres attributs facultatifs : Value : Texte par dfaut qui saffichera. Size : Largeur du champ en nbre de caractres. Maxlength : Le nombre max de caractres. Le champ <INPUT> de type Hidden ncessite obligatoirement lattribut Value.

Les champs <INPUT> cases :


Radio : Case doption (bouton radio). Permet un

choix en exclusion mutuelle (ayant le mme nom).


Checkbox : Case cocher. Pour slectionner

plusieurs options la fois. Ont les mmes attributs : Value: La valeur. Checked: pour slectionner ou cocher par dfaut.

Les champs <INPUT> boutons (1):


Button : Bouton simple, Utile gnralement

avec scripts cot client (Javascript, )


Submit : Lance lenvoi des donnes du

formulaire lapplication (sur le serveur) dfinie par Action.


Reset : Annule le formulaire en effaant toutes

les donnes saisies et en remettant les valeurs par dfaut.

Les champs <INPUT> boutons (2):


Value : Dfinit le label du bouton (texte

apparaissant sur le bouton). Lattribut Name nest pas obligatoire pour Submit et Reset.

Les champs <INPUT> fichier :


File : Permet denvoyer dans le formulaire un

fichier de la machine utilisateur vers le serveur. Zone textuelle + bouton de parcours


Size : La taille de la zone textuelle en nombre de

caractres.
Accept : Dfinit un filtre. Les types de fichiers

autoriss.

Champs de saisie multilignes :


<TEXTAREA> et </TEXTAREA>.

Entre les 2, on peut mettre le texte par dfaut. En plus de name, <textarea> a dautres attributs facultatifs : Rows : Le nombre de lignes quoccupera la zone de saisie. Cols : Le nombre de caractres quoccupera la zone en largeur.

Liste droulante (zone de slection) :


<SELECT> et </SELECT> pour dlimiter la liste.

Marque le dbut et la fin de la liste. En plus de name, <Select> a dautres attributs facultatifs : Size : Le nbre de lignes quoccupera la zone. Multiple : Attribut sans valeur, pour autoriser le choix multiple. (En utilisant la touche clavier CTRL)

lments de la liste droulante :


<OPTION> pour de dfinir un lment de la liste.

Lattribut Value permet dassocier une valeur au choix slectionn. Cest cette valeur qui sera envoye au serveur. Lattribut Selected (sans valeur) permet de slectionner llment par dfaut. Le texte qui saffichera sera mis aprs <OPTION>.

Formulaires (Complment) :
Lattribut TabIndex peut tre rajout toute balise dun lment du formulaire. Sa valeur est un entier. Dfinit lordre de slection de cet lment en utilisant la touche du TABULATION du clavier.
<fieldset> et </fieldset> permet

lintrieur du mme formulaire de crer des blocs.


<Legend> et </Legend> : Pour le titre du bloc.

Das könnte Ihnen auch gefallen