Cours HTML

Langages et Techniques Internet
cole Nationale dIngnieurs de Sfax
2009-2010
HTML HyperText Markup Language
Historique
1989 1992 1989-1992 : Aboutissant un premier HTML (version 0) 1993 : HTML 1.0 et cration du navigateur MOSAIC. 1995 : HTML 2.0 (insertion dimages, de tableaux, de listes et de formulaires) puis HTML 3.0 (pas de consensus) 1996 : HTML 3.2 (liens sur images, applet Java, JavaScript) 1997 : HTML 4.0 (frames, feuilles de style, intgration de documents multimdias) ) 1999 : HTML 4.01; depuis 2000 XHTML prend la relve
3
Introduction
HTML nest pas un langage de programmation. Cest un langage descriptif qui dcrit la structure et la prsentation des documents dans le Web. HTML est un hypertext, il est capable de relier des documents entre eux.
Ces documents peuvent tre de mme type (HTML) ou non. Ces liens peuvent se faire par le biais de protocoles identiques (HTTP) ou dautres comme FTP, NEWQ, etc.
HTML: Structure
La structure gnral dun document HTML est la suivante: i
<HTML> : Tout document HTML commence par cette balise <!-<! Commentaire --> : Il est ignor lors de la mise en forme > <HEAD> text header - lments dcrivant et caractrisant le document (typiquement le titre <TITLE> titre du document</TITLE>) </HEAD> <BODY> text body - Le contenu du document, lequel peut tre compos de paragraphes de titres liens, etc. paragraphes, titres, liens etc </BODY> </HTML>
5
HTML: Exemple1
<html> <head> <title> Mon premier document HTML</title> </head> <body> Bonjour tout le monde ! </body> </html>
HTML: Mise en Forme

Style des caractr es c res
Format titre Gras <Hn> </Hn> <B> </B> <STRONG> </STRONG> /STRONG <U> </U> <I> </I> <EM> </EM> <FONT SIZE=?> </FONT> Formatage en titre avec n entre 1 et 6 Dbut et fin de zone en gras Dbut et fin de zone en soulign Dbut et fin de zone en italique Dbut et fin de zone avec une taille (SIZE) entre 1 et 7 Dbut fin de Db et fi d zone en police Dbut et fin de zone en couleur
Soulign Italique Taille de caractre
R glages des c caractr res
Police d P li de caractre <FONT FACE "? "> t FACE="? </FONT> Couleur de caractre <FONT COLOR="#$$$$$$"> </FONT>
HTML: Codage couleurs et polices

Codage de quelque couleurs
Bleu Blanc Rouge Gris clair #0000FF #FFFFFF #FF0000 #C0C0C0 Vert Violet Jaune Noir #00FF00 #8000FF #FFFF00 #000000
Codage de quelque polices

Arial Arial Black Comic Sans MS Courier New Arial Arial Black Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS Georgia Impact Times New Roman Trebuchet MS
HTML: Exemple2
<HTML> <HEAD> <TITLE> Deuxime Page HTML </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> SIZE 5>t t </FONT> <FONT COLOR="#0000FF">en bleu</FONT> <BR> <FONT face="Arial Black">texte en Arial Black</FONT>  <! C'est fini > </BODY> </HTML>
HTML: Mise en Forme

Au paragraphe <P> . </P> <BR> <DIV ALIGN=? > </DIV> <CENTER></CENTER> <BODY BGCOLOR=?> </BODY> Nouveau paragraphe Aller la ligne Aligner: LEFT | CENTER | RIGHT | JUSTIFY Centrer paragraphe et mme caractre Modifier la couleur du fond
Rgla ages des parag graphes Rgla ages du Fo ond
A la ligne Alignement
Centrage Changement de couleur Chargement dune image Traage d T dun trait Conservation de la mise en forme
<BODY BACKGROUND Affichage d.une image ="url_image"> </BODY> comme fond de la page <HR SIZE=? WIDTH=? SIZE ? WIDTH ? ALIGN=?> <PRE> Tracer un travers T t travers la page conserver le formatage du texte dlimit par cette Balise
For rmatage
10
HTML: Mise en Forme

Liste non ordonne Liste ordonne <UL> </UL> <OL TYPE= ? Start= ?> </OL> Ouverture et fermeture dune liste non ordonne Ouverture et fermeture dune liste ordonne , - TYPE pour dfinir la numrotation, 1 pour chiffre, A (resp. a) pour alphabtique majuscule (resp. minuscule), I (resp. i) pour romain majuscule (resp. minuscule); - START pour dfinir la valeur de dpart Affichage de llment de la liste - dl: Ouverture et fermeture de la liste (On n'utilise pas la balise li pour les n utilise lments) - dt : Le terme dcrire - dd: La description du terme
Str ructura ation
Elment de liste Liste descriptif
<LI> <dl> <dt> </dt> <dd> </dd> </dl>
11
HTML: Exemple3
<HTML> <HEAD> <TITLE> Example de liste </TITLE> </HEAD> p <BODY> <! Liste non ordonne--> <UL> <LI> Gnie Informatique 1 </LI> <LI> Gnie Informatique 2 </LI> <LI> Gnie Informatique 3 </LI> </UL> <!Liste ordonne --> <OL TYPE=I START=1> <LI> Language C </LI> L <LI> JAVA </LI> <LI> .NET </LI> </OL> </BODY> </HTML>
12
Les liens
Liens
Point d'ancrage Lien vers une ancre dans la mme page Lien vers une ancre dans une autre page <A NAME="***">...</A> <A HREF="#***">...</A> <A HREF="URL#***"> </A> HREF= URL# >...</A> Ceci est une cible Lien vers la cible *** dans la mme page Lien vers la cible *** dans une autre page
Couleurs C l
Couleur de lien Lien visit Lien actif <BODY LINK="#$$$$$$"> <BODY VLINK="#$$$$$$"> <BODY ALINK="#$$$$$$">
13
Les images
<IMG > Src= "" Alt = " width=? height=? border=?
La balise principale des images Prcise la source et la source de lmage Indique la hauteur et la largeur de limage afficher Indique la hauteur et la largeur de limage afficher l image (en pixels). par dfaut, le navigateur affiche un cadre de 1 pixel d'paisseur autour de l'image. 0 signifie qu'il n'y a pas d d' d l' f 'l ' de cadre (en pixels). Spcifie lemplacement de limage (en pixels). Alignement de limage sur la page
vspace/hspace=? align="left/center/right"
14
Les images
<HTML> <HEAD> </HEAD> <BODY> <IMG src=enis.gif border=5 align=center width=130 height= 120 vspace=40 hspace=30> </BODY> </HTML>
15
Les tableaux
Dfinition du tableau Dfinition dune ligne <TABLE> </TABLE> <TR> </TR> Dbut et fin du tableau Dbut et fin de la ligne Dbut et fin de cellule
Dfinition d une cellule dune <TD> </TD> <TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>
Bordure de cadre <TABLE border=?> </TABLE> <TABLE b d TABLE border=3> 3 <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>
16
Les tableaux
L'espace entre les cellules ou l'paisseur des lignes du quadrillage L'enrobage des cellules ou l'espace entre le bord et le contenu La largeur de la table g Largeur d'une cellule Fusion de lignes Fusion de colonnes <TABLE cellspacing=?> <TABLE cellpadding=?> <TABLE width=?> en pixels p <TABLE width=%> en pourcentage <TD width=?> en pixels <TD width %> en pourcentage width=%> <TD rowspan=?> <TD colspan=?>
17
Les tableaux
Exemple1: <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>
18
Les tableaux
Exemple2: <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> id h 34%>3</TD> </TR> <TR> <TD width=33%>cel 2</TD> <TD width=34%>3</TD> </TR> </TABLE></CENTER>
19
Les frames
On utilise les frames pour diviser l'cran en plusieurs fentres Zone avec des fentres <FRAMESET>Dbut de zone avec des fentres. </FRAMESET>Fin de zone avec des fentres Agencement des fentres <FRAMESET ROWS="...">Fentres horizontales <FRAMESET COLS="...">Fentres verticales Remarque : <FRAMESET></FRAMESET> remplace <BODY></BODY> Vous pouvez indiquer si la fentre doit ou non possder une barre d dfil b de dfilement. <FRAME SCROLLING " / / SCROLLING="yes/no/auto > 20
Les frames
<HTML> <FRAMESET ROWS="25%,75%"> <FRAME SRC=partie1.html" NAME=nom1"> <FRAMESET COLS="*,2*"> <FRAME SRC="gauche.html NAME="basgauche"> <FRAME SRC=droite.html NAME="basdroite"> </FRAMESET> </FRAMESET> </HTML>
21
Les formulaires
Les formulaires peuvent prendre la forme : d'une ligne de texte dune zone de texte dun bouton radio de cases cocher d'un menu de slection Ils se dcrivent entre les balises <FORM> </FORM>
22
Les formulaires: Ligne de texte
<INPUT TYPE "t t" NAME="Nom du champ" VALUE="texte TYPE="text" NAME "N d h " VALUE "t t initial" SIZE=longueur >
INPUT TYPE="text" La balise principale du formulaire Prciser le type du texte. La valeur texteest la valeur par dfaut. ( (facultatif) )
NAME
VALUE SIZE MAXLENGTH
23
Prciser le nom du champ (utile pour la programmation). Donner un texte visible au champ.
Fixer la longueur visible du champ (ventuellement son contenu dfile vers la gauche). Limiter le nombre de caractres pouvant tre entrs dans le champ. champ
Les formulaires: Ligne de texte

<HTML> <BODY> <FORM> Texte saisir : <INPUT type="text" name="nom" SIZE="50" MAXLENGTH="50"> </FORM> </BODY> </HTML> /HTML
24
Les formulaires: Mot de passe

Lorsquil s'agit d'un mot de passe, on utilise le composant dont le l type est TYPE PASSWORD TYPE=PASSWORD. <HTML> <BODY> <FORM> Code Entrez votre mot de passe : <INPUT TYPE="password" MAXLENGTH=5> </FORM> </BODY> </HTML>
25
Les formulaires: Zone de saisie
<TEXTAREA NAME="..." ROWS= ... COLS= ...> Texte affich par dfaut </TEXTAREA>
<TEXTAREA> </TEXTAREA> NAME ROWS COLS Introduire une zone de texte multilignes et non plus une simple ligne de texte. dfinir le nom de la zone du texte Prciser le nombre de lignes de la fentre de saisie. saisie Prciser le nombre de colonnes.
26
Les formulaires: Zone de saisie

<HTML> <BODY> <FORM> FORM <TEXTAREA name="nom" rows=4 cols=40 > Valeur par dfaut</TEXTAREA> </FORM> </BODY> </HTML>
27
Les formulaires: Liste de slection
<SELECT> </SELECT> permettre un choix dans une liste de plusieurs options p prsentes sous forme de liste droulante, <OPTION>. NAME SIZE Introduire par la balise dfinir le nom du formulaire. Dtermine le nombre d'lments de liste affiche dans la boite d'entre. size="1" est optionnel car "1" est la valeur par dfaut. slectionner cette option par dfaut Autoriser slectionner plusieurs options dans la liste facultatif ;
<OPTION SELECTED> <SELECT MULTIPLE>

28

Exemple1
<FORM> <SELECT name="nom" size="1"> <OPTION>lundi <OPTION>mardi <OPTION> di <OPTION>mercredi <OPTION>jeudi OPTION jeudi <OPTION>vendredi </SELECT> </FORM>
29

Exemple2
<FORM> <SELECT name="nom" size="3"> <OPTION>lundi <OPTION selected>mardi <OPTION>mercredi <OPTION >jeudi <OPTION>vendredi </SELECT> </FORM>
30
Les formulaires: Bouton doption d option

Les boutons d'option, aussi appels boutons radio, ont comme articularit qu'une seule option la fois peut tre active ' f (le "ou " exclusif).
<FORM> <INPUT type="radio" name="nom du groupe" value="valeur du bouton bouton"> </FORM>
TYPE ="radio" NAME="nom" VALUE="..." VALUE " " CHECKED
31
Produire des bouton radio. Grouper l'ensemble des boutons avec le mme nom. Chaque b t radio d it possder une valeur spcifique Ch bouton di doit d l ifi pour diffrencier les options. Permetre de prslectionner un bouton radio (optionnel).
Les formulaires: Bouton doption d option

<FORM> <INPUT type= "radio" name="tarif" value="jour"> Tarif de jour <INPUT type= "radio" name="tarif" value="nuit"> T if d nuit INPUT " di " " if" l " i " Tarif de i <INPUT type= "radio" name="tarif" value="week-end"> Tarif de week end week-end </FORM>
32
Les formulaires : Case cocher
<FORM> <INPUT type="checkbox" name="nom" value="valeur attache au Bouton " CHECKED> </FORM>
<TYPE ="checkbox" > Produire une boite cocher. checkbox cocher NAME=".." CHECKED s'il y a plusieurs boites, chaque case doit avoir un nom spcifique. Cocher par dfaut la boite .
33
Les formulaires: Case cocher

<FORM> <INPUT type="checkbox" name="choix1" value="1"> glace vanille <INPUT type="checkbox" name="choix2" value="2"> chantilly " " " " " " <INPUT type="checkbox" name="choix3" value="3"> chocolat chaud <INPUT type="checkbox" name="choix4" value="4"> bi i " h kb " " h i 4" l "4"> biscuit </FORM>
34
Les formulaires: Bouton de commande

Avec l'introduction des langages de scripts (Javascript et VBscript) l'usage du bouton de commande prsente un intrt ) ' certain <FORM> <INPUT type="button" name="nom" value= "Bouton de test" onclick= alert( Test onclick="alert('Test russi ! ) > !')"> </FORM>
35
Les formulaires : Submit et Reset

Le bouton Submit a la tche spcifique de transmettre toutes les informations contenues dans le formulaire l'URL dsigne f f ' dans les attributs ACTION et METHOD du tag <FORM>.
<FORM> <INPUT TYPE="submit" NAME="nom" VALUE="texte du bouton"> </FORM>
Le bouton Reset permet d'annuler les modifications apportes aux contrles dun formulaire et de restaurer les valeurs par d un dfaut.
<FORM> <INPUT TYPE="reset" NAME="nom" VALUE="texte du bouton"> </FORM>
36
Exercice
37
Solution
38

Cours HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cours HTML

Uploaded by

Copyright:

Available Formats

Langages et Techniques Internet

cole Nationale dIngnieurs de Sfax

HTML HyperText Markup Language

HTML: Mise en Forme

Soulign Italique Taille de caractre

R glages des c caractr res

HTML: Codage couleurs et polices

Codage de quelque polices

HTML: Mise en Forme

Rgla ages des parag graphes Rgla ages du Fo ond

HTML: Mise en Forme

Str ructura ation

Elment de liste Liste descriptif

<LI> <dl> <dt> </dt> <dd> </dd> </dl>

<IMG > Src= "" Alt = " width=? height=? border=?

Les formulaires: Ligne de texte

Les formulaires: Ligne de texte

Les formulaires: Mot de passe

Les formulaires: Zone de saisie

Les formulaires: Zone de saisie

Les formulaires: Liste de slection

<OPTION SELECTED> <SELECT MULTIPLE>

Les formulaires: Liste de slection

Les formulaires: Liste de slection

Les formulaires: Bouton doption d option

Les formulaires: Bouton doption d option

Les formulaires : Case cocher

Les formulaires: Case cocher

Les formulaires: Bouton de commande

Les formulaires : Submit et Reset

You might also like