Vous êtes sur la page 1sur 15

Table des matires

Chapitre 04 : Langage HTML ........................................................................................................ 2 1. 2. 3. 4. 5. Les balises ............................................................................................................................ 2 Le texte ................................................................................................................................. 3 Les titres et les listes ............................................................................................................ 6 Les liens................................................................................................................................ 7 Les images............................................................................................................................ 8
5.1. Lien sur image ................................................................................................................. 9

6. 7. 8.

Les tableaux ......................................................................................................................... 9 Larrire plan ..................................................................................................................... 12 Les formulaires .................................................................................................................. 13


8.1. 8.2. 8.3. 8.4. Texte libre sur une ligne................................................................................................. 13 Bouton .......................................................................................................................... 14 Menu............................................................................................................................. 14 Texte libre sur plusieurs lignes ....................................................................................... 15

TP : ............................................................................................................................................. 15

Chapitre 04 : Langage HTML


On a besoin: d'un diteur de texte tout simple comme par exemple le Bloc-notes ou Notepad de Windows ou tout autre quivalent dans votre systme d'exploitation, d'un navigateur web : il existe plusieurs, pour toute sorte de matriels (ordinateur personnel, tablette tactile, tlphones mobiles) et pour diffrents systmes dexploitation (Linux, Windows, Mac ). Les plus utiliss en 2012 sont : Google chrome, Mozilla Firefox, Internet Explorer, Safari et Opera. On n'a pas besoin d'tre connect pour crire, voir et peaufiner vos pages Html.

1. Les balises
Voici les premires balises ou tags : Balise
<HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY>

Signification
Le dbut dun document de type HTML La fin dun document de type HTML Le dbut de la zone dentte La fin de la zone dentte Le dbut du titre de la page La fin du titre de la page Le dbut du document La fin du document

On peut remarquer qu chaque balise de dbut d'une action, soit <...>, correspond une balise de fin d'une action </...>. On note aussi que les balises ne sont pas "case sensitive". Il est donc quivalent d'crire <HTML>, <html>, <Html>, etc. Faisons ensemble notre premier document Html: Ouvrir l'diteur de texte. Ecrire les codes Html suivants:

<HTML> <HEAD> <TITLE>Document Html minimum</TITLE> </HEAD>


2

<BODY> </BODY> </HTML> - Enregistrer le document avec l'extension .html ou .htm. Ouvrir le navigateur. Afficher le document via le menu File/Open file... Admirer votre premier document Html.

Celui-ci est vide (et c'est normal) mais tout fait oprationnel! Il faudra maintenant lui fournir votre information l'intrieur des balises <BODY></BODY>. Remarquez que votre "TITLE" est prsent dans la fentre de navigateur. Pour des ventuelles modifications, il n'est pas ncessaire de rouvrir chaque fois le navigateur. Retourner dans l'diteur de texte (sans fermer le navigateur). Modifier les codes Html. Enregistrer le fichier. Utiliser la commande Actualiser.

2. Le texte
Tout document Html contiendra en majorit du texte. Voyons comment l'agrmenter par quelques balises lmentaires. Gras Italique Taille de caractre Couleur de caractre A la ligne Commentaires Centrage [Bold] [Italic] [Font size]
<B>...</B> <STRONG>...</STRONG> <I>...</I> <EM>...</EM> <FONT SIZE=?> ... </FONT>

Dbut et fin de zone en gras Dbut et fin de zone en italique Dbut et fin de zone avec cette taille

[Font color] [Line break] [Comments] [Center]

<FONT COLOR="#$$$$$$"> </FONT> <BR> <!-- *** --> <CENTER></CENTER>

Dbut et fin de zone en couleur Aller la ligne Ne pas afficher Centrer

Ouvrir l'diteur de texte

<HTML>
3

<HEAD><TITLE></TITLE></HEAD> <BODY>texte simple<BR> <B>texte en gras</B><BR> <STRONG>texte en gras</STRONG><BR> <I>texte en italique</I><BR> <EM>texte en italique</EM><BR> <B><I>texte en gras et en italique</I></B><BR> <FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en bleu</FONT> <!--C'est fini--> </BODY> </HTML> Ouvrir le navigateur

Quelques commentaires s'imposent; - Le texte tout simple s'crit sans balises. Il sera repris par le navigateur avec la police et taille de caractres choisies dans sa configuration par dfaut. - Le navigateur affiche le texte qu'on lui "dicte" en passant la ligne lorsque celui-ci atteint le bord de la fentre. Pour le forcer passer outre cette rgle de conduite et faire un saut la ligne comme vous le souhaitez, il faut une instruction particulire. C'est la balise <BR>. Celle-ci reprsente une action ponctuelle et n'a donc pas besoin de balise de fin. - Le mme browser ne tient compte que d'un seul espace entre les mots. Ainsi pour lui <FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en bleu</FONT> est quivalent <FONT SIZE=5>texte</FONT><FONT COLOR="#0000FF">en bleu</FONT> - Il n'est pas rare d'utiliser plusieurs balises pour un mme lment de texte. Il faut veiller bien les imbriquer. Ainsi <B><I>...</I></B> est correct et <B><I>...</B></I> risque de vous crer des ennuis. - La taille dans <FONT SIZE=?> peut tre indique avec un nombre de 1 7. La valeur par dfaut tant 3. - Pour les puristes, les balises <I> et <EM>, <B> et <STRONG> ne sont pas totalement quivalentes. Vous verrez en poussant plus avant votre tude du langage Html que <EM> et <STRONG> appartiennent aux dfinitions structurales (style logique) dont l'apparence dpend des options reprises dans la configuration du browser. Les balises <B> et <I>

appartiennent aux formats de prsentation (style physique) dont l'apparence dpend de la volont de l'auteur. Voici les codes de quelques couleurs basiques. Bleu Blanc Rouge Gris clair #0000FF #FFFFFF #FF0000 Vert Violet Jaune #00FF00 #8000FF #FFFF00 #000000

#C0C0C0 Noir

Des balises de texte, il y en plein des valises! Selon les versions du HTML et l'apparition des diteurs Html volus, certains tags sont moins utiliss. D'autres aussi sont tout bonnement d'un emploi rare ou pour le moins particulier. En voici quelques-uns qui complteront votre panoplie actuelle. Le tag <BLOCKQUOTE>...</BLOCKQUOTE> introduit une citation.

Son utilit serait douteuse si le texte de cette citation n'tait introduit avec un lger retrait gauche et droite. Ce qui est bien pratique pour agrmenter la prsentation. Voici un texte normal sans blockquote. Voici un texte avec blockquote. Remarquez le retrait. Le tag <ADDRESS>...</ADDRESS> pour indiquer une adresse (gnralement en fin de document). Voici une adresse avec cette balise : Van Lancker Luc Rue des Brasseurs, 22 7700 Mouscron (Belgium) La balise <U>...</U> souligne le texte. Comme, par convention, les lments servant d'hyperlien sont souligns, on vitera le souligner des lments de texte pour lui donner de l'importance. On prfrera la mettre en gras ou dans un format ou une couleur de police diffrent. Il ne faut donc pas en abuser. Les tags <SUB>...</SUB> et <SUP>...</SUP> placent le texte respectivement en indice et en exposant. Ainsi, <SUB>escalier</SUB>escalier<SUP>escalier</SUP> aura comme rsultat : escalierescalierescalier
5

Pour aligner du texte, on a utilis l'attribut ALIGN ou le tag <CENTER>. Il existe une balise permettant d'aligner diffrents lments. C'est le tag :

<DIV align=left>...</DIV> <DIV align=center>...</DIV> <DIV align=right>...</DIV> Cette alternative pour l'alignement horizontal du texte est parfois bien utile pour dfinir l'alignement d'une portion de texte. Il existe encore bien d'autr es balises quon va dcouvrir dans n os tudes suivantes.

3. Les titres et les listes


Tout document d'une certaine consistance se doit de prsenter, par exemple dans la table des matires, les diffrents niveaux de son expos. Html a dispos ds son origine d'outils spcialement conus cet effet.
<Hn>...</Hn> Avec n= 1, 2, , 6 <UL>...</UL>

En-ttes

[Heading]

Afficher un en-tte de niveau n et sauter une ligne Afficher le texte sous forme dune liste non-ordonne Afficher le texte sous forme dune

Liste non ordonne

[Bullet list]

Liste ordonne Elment de liste Paragraphe

[Numbered list] [List items] [Paragraph]

<OL>...</OL>

liste ordonne
<LI> <P>...</P>

Voici un lment de la liste Saut de ligne, insrer une ligne vierge et commencer un paragraphe.

- On ouvre son petit diteur de texte <H1>Les mois du printemps</H1> <UL><LI>avril <LI>mai <LI>juin</UL> <P> <H3>Les mois d'automne</H3> <OL><LI>octobre <LI>novembre <LI>d&eacute;cembre</OL> - Et on ouvre le navigateur

Les mois du printemps


avril mai juin
6

Les mois d'automne


1. octobre 2. novembre 3. dcembre

Quelques commentaires s'imposent;

1. &eacute; est l'un de ces caractres spciaux utiliss pour reprsenter le .


Caractre Code Caractre Code Caractre Code Caractre Code

<

&lt ; &eacute ; &agrave ;

&

&amp ; &Eacute ; &iuml ;

>

&gt ; &egrave ;
&ccedil ;

"

&quot ;
&ecirc ; &AElig ;

2. Les paragraphes et les en-ttes peuvent s'aligner gauche, au centre ou droite. <H1 align=left></H1> <P align=left></P> <H1 align=center></H1> <P align=center></P> <H1 align=right></H1> <P align=right></P> 3. Les listes peuvent s'imbriquer: <H4>Les 12 mois</H4> <UL><LI>Les mois du printemps <OL><LI>avril </OL></UL>

4. Les liens
Une des fonctionnalits la plus agrable du langage HTML est la possibilit de crer des liens vers d'autres documents. Ces documents peuvent tre des documents HTML, des images, du son et des films. Le logiciel client WWW prsente ce lien sous forme de mots

souligns ou d'image encadre que l'on appelle ancre ou lien. Ce lien est soit un fichier local, soit une URL(*). Il existe trois types principaux de liens :

Type Lien Un document complet

Syntaxe
<A HREF = "URL">...</A>

Exemple Pour accder aux pages du CRI :


<A HREF="http://www.unice.fr/cri/"> Le CRI </A>

Rsultat

distant Un document complet local Partie dun document courant


<A HREF = "nom_fichier"> </A> <A NAME = "etiquette"> nom </A> <A HREF = "#etiquette"> ancre </A>

Pour accder une autre page local:


<A HREF="2.HTML"> Aller vers le document 2 </A> <A NAME="ANCRES"> Les ancres </A> <A HREF="#ANCRES"> Voyons retournons au dbut du fichier </A>

Aller

vers

le

document 2

Voyons retournons au

dbut du fichier

5. Les images
La commande <IMG> permet d'insrer une image dans le texte. <IMG SRC="image" ALIGN="attribut" HSPACE="hh" VSPACE = "vv" BORDER="bb"> image = adresse d'une image attribut = "MIDDLE" "TOP" "BOTTOM" "LEFT" ou "RIGHT" hh = nombre de pixels de sparation droite et gauche de l'image. (par dfaut hh=0) vv = nombre de pixels de sparation en haut et en bas de l'image. (par dfaut vv=0) bb = nombre de pixels de l'encadrement de l'image. (par dfaut il n'y a pas d'encadrement) Exemple : <IMG SRC="chouetteG.gif" ALIGN="TOP" ALT="mira" HSPACE="100" VSPACE="100" BORDER="60"> <IMG ALIGN=BOTTOM SRC="chouetteG.gif"> La chouette <IMG ALIGN=MIDDLE SRC="chouetteG.gif"> La chouette <IMG ALIGN=TOP SRC="chouetteG.gif"> La chouette

<IMG ALIGN=LEFT SRC="chouetteG.gif"> chouette <BR> nom par lequel on dsigne couramment<BR> certains oiseaux rapaces nocturnes.<BR> <EM>Le Petit Robert</EM>.<BR CLEAR=ALL> Cet attribut permet une meilleure gestion du texte autour des images 5.1. Lien sur image Les balises sont : <A HREF="2.html"><IMG SRC="image.gif"></A> Remarquons que les images cliquables sont entoures d'une bordure.

6. Les tableaux
En Html, les tableaux servent non seulement aligner des chiffres mais surtout placer des lments l'emplacement que vous souhaitez. L'usage des tableaux est donc trs frquent. Un tableau est compos de lignes et de colonnes qui forment les cellules du tableau. Dfinition dun tableau Dfinition dune ligne Dfinition dune cellule [Table] [Table Row] [Table Data]
<Table>...</Table> <TR>...</TR> <TD>...</TD>

Dbut et fin de tableau Dbut et fin de ligne Dbut et fin de cellule

Un tableau deux lignes et deux colonnes se reprsente comme suit :


<TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>

Si vous souhaitez y adjoindre des bordures : Bordure de cadre [Border]


<Table border = ?>...</Table>

<TABLE border=2> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>

Il y a encore trois lments (dfinis par dfaut mais modifiables) : Lespace entre les cellules ou lpaisseur des lignes de quadrillage Lenrobage des cellules ou lespace entre le bord et le cont enu La largeur de la table
<Table cellspacing= ?> <Table cellpadding= ?> <Table width= ?> <Table width= %>

Construisons un exemple :
<TABLE border=2 cellspacing=10> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>

<TABLE border=2 cellpadding=10> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>

Nous n'en avons pas fini avec les tableaux. Allons plus loin dans notre tude en nous penchant sur les cellules de ces tableaux. Avant toutes choses, les cellules peuvent contenir tous les lments Html dj passs en revue soit : du texte des images des liens des arrire-plans et mme des tableaux Bien que l'allure de votre tableau soit dj dtermine, chaque cellule est en quelque sorte un petit univers part qui a ses propres spcifications. Dcouvrons les balises. Largeur dune cellule Fusion de lignes Fusion de colonnes
<TD width=?> en pixels <TD width=%> en pourcentage <TD rowspan=?> <TD colspan=?>

Dcouvrons ceci par des exemples. Je veux un tableau centr qui occupe 60% de la fentre avec sur une ligne, trois colonnes gales. Essayons ceci :
<CENTER><TABLE width=60% border=1>
10

<TR> <TD>cellule1</TD> <TD>cel. 2</TD> <TD>3</TD> </TR> </TABLE></CENTER>

Pas brillant! Et avec la balise de largeur de la cellule?


<CENTER><TABLE width=60% border=1> <TR> <TD width=33%>cellule1</TD> <TD width=33%>cel. 2</TD> <TD width=34%>3</TD> </TR> </TABLE></CENTER>

Impeccable! Prenons le mme tableau mais avec 2 lignes.


<CENTER><TABLE width=60% border=1> <TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD> <TD width=34%>3</TD></TR> <TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD> <TD width=34%>3</TD></TR> </TABLE></CENTER>

Je souhaite que la premire ligne prenne toute la largeur de la ligne. La premire cellule doit donc dborder sur 3cellules horizontales.
<CENTER><TABLE width=60% border=1> <TR> <TD colspan=3>cellule 1</TD> </TR> <TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD> <TD width=34%>3</TD> </TR> </TABLE></CENTER>

Dans le mme style, je souhaite que la premire colonne prenne toute la hauteur de la colonne. La premire cellule doit donc dborder sur 2 cellules verticales.
<CENTER><TABLE width=60% border=1> <TR> <TD width=33% rowspan=2>cellule 1</TD> <TD width=33%>cel 2</TD> <TD width=34%>3</TD> </TR> <TR> <TD width=33%>cel 2</TD> <TD width=34%>3</TD> </TR> </TABLE></CENTER>

Maintenant, il est temps de mettre de l'ordre dans les cellules.

11

<TR align=left/center/right>

Horizontalement Verticalement Horizontalement Verticalement

Ligne de tableau
<TR valign=top/middle/bottom> <TD align=left/center/right>

Cellule de tableau

<TD valign=top/middle/bottom>

A titre d'exemple, reprenons le tableau suivant :


<CENTER><TABLE width=60% border=1> <TR> <TD colspan=3 align=center>Tarif au ../../..</TD> </TR> <TR> <TD width=33% >Article 1</TD><TD width=33%>Ref 002 </TD> <TD width=34% align=right>30fr</TD> </TR> </TABLE></CENTER>

Il est aussi possible de changer la couleur de la cellule. Couleur de la cellule


<TD BGCOLOR="#$$$$$$">

Notre dernier exemple pourrait devenir :


<TD colspan=3 align=center bgcolor="#000088">

7. Larrire plan
Le langage Html permet d'agrmenter la prsentation du document d'un arrire-plan [background] color ou compos d'une image. Ce qui apporte un lment "artistique" votre page. La balise utiliser ne pose pas de problme : Couleur darrire plan
<BODY BGCOLOR="#$$$$$$">

Donc, pas de problmes! On fait un essai...


<BODY BGCOLOR="#000088"> <H1>Bonjour</H1> </BODY>

Joli! Mais la lisibilit n'est pas parfaite. Heureusement, des balises sont prvues pour modifier les couleurs utilises par dfaut par le browser pour le texte et les liens. Couleur de texte
<BODY BGCOLOR="#$$$$$$">

12

Reprenons notre exemple;


<BODY BGCOLOR="#000088" TEXT="#FFFF00"> <H1>Bonjour</H1> </BODY>

On peut aussi prvoir un fond en image. Cette image (petite de prfrence) est affiche en mosaque par le browser. Attention aux raccords... comme lorsque vous posez du papier peint. Texture de larrire plan
<BODY BACKGROUND="Adresse">

<BODY BACKGROUND="PAPER.gif"> <H1>Bonjour</H1> </BODY>

8. Les formulaires
Un formulaire est une fiche que lutilisateur peut remplir. Un formulaire commence et finit par :
<FORM ACTION METHODE> </FORM>

ACTION METHODE

Programme excutable Mthode de transmission de paramtres : Get, post

Il existe plusieurs types de champs : 8.1. Texte libre sur une ligne
<INPUT TYPE NAME SIZE> </INPUT>

Texte TYPE Password NAME SIZE

Pour faire saisir un texte Les caractres saisis sont reprsents par *

Un nom qui identifie le champ texte Taille de lespace de saisie.

Nom et prenom : <INPUT Mot de passe: <INPUT

TYPE=TEXT TYPE=password

NAME=NOM

SIZE=30>

NAME=mot SIZE=30>

13

8.2. Bouton
<INPUT TYPE NAME VALUE CHECKED>

Radio Checkbox TYPE Submit Reset NAME VALUE CHECKED <INPUT Celibataire <INPUT TYPE=RADIO

Boutons multiples Cases cocher Envoyer le formulaire une fois rempli Effacer le contenu du formulaire

Un nom qui identifie le bouton Valeur donne au bouton lorsquil est slectionn Signale un bouton par dfaut (Radio ou Checkbox) TYPE=RADIO NAME=etat VALUE="celib" CHECKED>

NAME=etat VALUE="mar"> Marie

<INPUT <INPUT

TYPE=CHECKBOX

NAME=sexe VALUE="h"> Homme

TYPE=CHECKBOX NAME=sexe VALUE="f"> Femme

<INPUT <INPUT

TYPE=SUBMIT TYPE=RESET

NAME=bouton1 NAME=bouton2

VALUE="Envoyer"> VALUE="Annuler">

8.3. Menu
<SELECT NAME> <OPTION SELECTED> <OPTION> </SELECT>

NAME
<OPTION > SELECTED, CHECKED

Un nom qui identifie le menu Reprsente chaque choix du menu Signale le choix par dfaut

Mois de Naissance <SELECT Mois> <OPTION checked> Janvier


14

<OPTION> Fevrier </SELECT> 8.4. Texte libre sur plusieurs lignes


<TEXTAREA NAME ROWS COLS> </TEXTAREA>

NAME ROWS COLS

Un nom qui identifie le champ texte Nombre de lignes visibles Nombre de colonnes visibles

Vos commentaires <TEXTAREA </TEXTAREA> La balise Pre permet d'afficher un texte en respectant sa structure (saut de ligne, tabulation ). NAME=COM1 ROWS=5 COLS=40>

TP :
Ralisation dune page web personnelle

15