HTML

Rectorat 7 Novembre de Carthage Année Universitaire 2009/2010
FSEGN Niveau: 2 L.A - IAG
M L L E . Z E I N E B C H E L LY
LE LANGAGE HTML
HyperText Markup Langage
Langage de mise en forme à base de balises
Les balises permettent d’organiser le contenu du site

Les balises sont interprétées par le navigateur Internet
Les pages du site sont liées par des liens hypertextes sur
lesquels on clique pour naviguer.
MLLE. ZEINEB CHELLY

COMMENT ÉCRIRE DU CODE HTML
En utilisant un éditeur de texte basique de type bloc-notes ou

note pad
On peut aussi utiliser un éditeur spécialisé tel que le front page,
un des plus puissant: Dreamweaver
Enregistrer son programme et lui attribuer l’extension html ou
htm
Ouvrir avec votre navigateur Internet.
MLLE. ZEINEB CHELLY

LE DOCUMENT MINIMAL
Tag/Balise,
<HTML>
Markup/Marqueur
<HEAD>
C'est le conteneur de l'entête.
Contenu </HEAD>
<BODY>
C'est le conteneur du corps.
C'est ici que nous écrirons.
Une paire de balises </BODY>
</HTML>
MLLE. ZEINEB CHELLY

EXEMPLE
<HTML>
<HEAD>
<TITLE> Exemple de page html </TITLE>
</HEAD>
<BODY>
<H1> première partie </H1>
Ce document présente les fondamentaux <P> d'une création de page
html
<H2> le document de base </H2>
</BODY>
</HTML> Exemple de page html
première partie
Ce document présente les
fondamentaux
d'une création de page html
le document de base
MLLE. ZEINEB CHELLY
LES ÉLÉMENTS DU LANGAGE HTML : LES LIENS HYPERTEXTES
Créer un lien ... vers un autre document

 Un lien permet de définir
 une région sensible au clic souris dans un document
 l'endroit ou l'on va se retrouver après ce clic.
 Trois étapes :
1. <A HREF = "nom du fichier" ou HREF = "url du document">
2. lien
3. </A>
 Exemples :
Consultez mon <A HREF = "cvoli.html"> curriculum vitae </A>
Visitez le site de <A HREF = "http://www.cict.fr/urfist"> l'urfist </A>
lien
doc. A doc. B MLLE. ZEINEB CHELLY

Créer un lien ... vers une section spécifique d'un autre document
Définir la cible
dans le document "cible"
<A NAME = "nom de la section"> section </A>
Créer son lien

dans le document "source"
<A HREF = "doc.B # nom de la section"> lien </A>
lien
cible
doc. A doc. B
MLLE. ZEINEB CHELLY
Créer un lien ... vers une section spécifique du doc. courant

même procédé en supprimant le nom de fichier.
lien
partie cible
document A MLLE. ZEINEB CHELLY

LES ÉLÉMENTS DU LANGAGE HTML : AUTRES LIENS
 Lien vers un fichier à télécharger

<A HREF="fichier.exe"> cliquez ici pour télécharger </A>
Lien e-mail
<A HREF="mailto:oli.ert@caramail.com">adresse_e_mail</A>
<A HREF="mailto:oli.ert@caramail.com?subject=renseignement">adresse</A>
<A HREF="mailto:oli.ert@caramail.com?subject=renseignement&BODY=votre
message">adresse_e_mail</A>
MLLE. ZEINEB CHELLY

TITRE & SOUS-TITRE
 Il s'agit ici des titres qui s'afficheront dans la page (et non dans la
barre de titre comme la balise <title> précédemment) : ce sont les
en-têtes de sections ou paragraphes.
 Il existe six niveaux de titres d'importance décroissante :

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
MLLE. ZEINEB CHELLY

MLLE. ZEINEB CHELLY
PARAGRAPHES : LA BALISE <P>
 Fonction : Un paragraphe est délimité par les balises

<p> et </p>. La balise <p> provoque un saut de ligne avant le
paragraphe.
 Attributs : Attributs de la balise <p>
MLLE. ZEINEB CHELLY

PARAGRAPHES : LA BALISE <BR>
 Fonction : Force un retour en début de ligne suivante à

l'intérieur d'un même paragraphe. La balise fermante est
facultative.
MLLE. ZEINEB CHELLY

LA BALISE <HR>
 Elle est destinée à séparer différentes parties d'un document
au moyen d'un trait horizontal de longueur et d'épaisseur
variables, et généralement pourvu d'un ombrage.
 Cette balise possède des attributs,
MLLE. ZEINEB CHELLY

MISE EN FORME DU TEXTE
MLLE. ZEINEB CHELLY

AUTRES BALISES
 La balise <center> permet de centrer son contenu. Il est

recommandé d'utiliser plutôt l'attribut align="center".
 <blockquote>, prévu pour des citations de plusieurs lignes,

cette balise permet de produire un effet d'indentation sur les
deux marges latérales.
MLLE. ZEINEB CHELLY

PRÉSENTATION D'UNE ENTITÉ DE CARACTÈRE
MLLE. ZEINEB CHELLY

CODAGE DE LA COULEUR
LES BALISES DE LISTE
Type de liste Exemple de code Représentation
Liste non Quelques fruits Quelques fruits

ordonnée <UL> • Pommes
<LI>Pommes • Poires
<LI>Poires
</UL>
Liste Les premières villes de France Les premières villes de France
ordonnée <OL> 1. Paris
<LI>Paris 2. Lyon
<LI>Lyon
</OL>
Liste de <DL> Quelques définitions de Quelques définitions de termes
Définition termes HTML
<DT>HTML Hypertext Markup Language
<DD>Hypertext Markup Language WWW
<DT>WWW World Wide Web
<DD>World Wide Web </DL>
MLLE. ZEINEB CHELLY
REMARQUES ET COMPLÉMENTS
Le paramètre TYPE de la balise <UL> permet de choisir la puce affichée pour chaque
entrée de liste :
Type Représentation
<UL TYPE="disc"> •
<LI>
<LI> •
</UL>
<UL TYPE="circle"> o
<LI>
<LI> o
</UL>
<UL TYPE="square"> 
<LI>
<LI> 
</UL>
MLLE. ZEINEB CHELLY
Le paramètre TYPE de la balise <OL> permet de choisir le
type de numérotation :
Type Représentation
<OL TYPE=1> 1.
<LI> 2.
<LI>
</OL>
<OL TYPE="A"> A.
<LI> B.
<LI>
</OL>
<OL TYPE="a"> a.
<LI> b.
<LI>
</OL>
<OL TYPE="I"> I.
<LI> II.
<LI> MLLE. ZEINEB CHELLY
</OL>
Donner le code html du plan suivant
 villes françaises
1. toulouse
a. toulouse centre
b. toulouse sud
c. toulouse nord Exercice
2. paris
.centre ville
.arrondissements
.périphérie
3. bordeaux
 villes étrangères
1. new-york
2. londres
3. munich
MLLE. ZEINEB CHELLY
<UL>
<LI> Villes françaises
<OL>
<LI> Toulouse
<OL TYPE = "a">
<LI> toulouse centre
<LI> toulouse sud
<LI> toulouse nord
</OL>
<LI> Paris
<UL WRAP = "horiz">
Solution
<LI>centre ville
<LI>arrondissements
<LI>périphérie
</UL>
<LI> Bordeaux
</OL>
<LI> Villes étrangères
<OL>
<LI> New-York
<LI> Londres
<LI> Munich
</OL>
MLLE. ZEINEB CHELLY
</UL>
FORME DU TABLEAU
 Un tableau commence par <TABLE> et finit par </TABLE>

 Une ligne dans un tableau commence par <TR> et finit par </TR>
 Une cellule dans une ligne commence par <TD> et finit par </TD>
 Une cellule d'en-tête dans une ligne commence par <TH> et
finit par </TH>
 <Caption> et </Caption> servent à définir un titre pour le tableau.
MLLE. ZEINEB CHELLY

<TABLE>
<TR>
<TD>C e l l u l e 1 ,1</TD>
</TR>
<TR>
</TR>
</TABLE>
MLLE. ZEINEB CHELLY

LIAISON DE CELLULES
 Vous pouvez lier des cellules sur une ligne ou une colonne :
Pour lier plusieurs cellules sur une ligne, utiliser COLSPAN
(avec les tags TH et TD).
 Pour lier plusieurs cellules sur une colonne, utiliser

ROWSPAN (avec les tags TH et TD).
MLLE. ZEINEB CHELLY

EXEMPLE
<TABLE BORDER=1>
<TR>
<TD colspan="2" >Liaison de 2 colonnes</TD>
</TR>
<TR>
<TD>Information 1</TD>
<TD rowspan="2">Liaison de 2 lignes</TD>
</TR>
<TR>
<TD>Information 2</TD>
</TR>
</TABLE>
MLLE. ZEINEB CHELLY

MISE EN PAGE DU TABLEAU
 WIDTH : largeur du tableau ou d'une cellule, en pixels ou

pourcentage.
 HEIGHT : hauteur du tableau ou d'une cellule, en pixels ou
pourcentage.
 BORDER :taille en pixels de la bordure du tableau.
 CELLPADDING : l'espace la bordure et le contenu de la cellule.
 CELLSPACING : l'espace entre les cellules.
MLLE. ZEINEB CHELLY

MISE EN PAGE DU TABLEAU
 BGCOLOR : couleur d'une cellule, ligne ou tableau.
 BORDERCOLOR : couleur de la bordure du tableau.
 BORDERCOLORLIGHT :couleur claire de la bordure
du tableau.
 BORDERCOLORDARK : couleur de l'ombre de la
bordure du tableau.
 BACKGROUND l'URL de l'image à afficher comme
image d'arrière plan du tableau.
 NOWRAP : empêche le retour à la ligne du texte de la
cellule.
MLLE. ZEINEB CHELLY

LES FORMULAIRES HTML
Les formulaires interactifs permettent aux auteurs de pages

Web de doter leur page web d'éléments interactifs
permettant par exemple un dialogue avec les internaute.
Le lecteur saisit des informations en remplissant des

champs ou en cliquant sur des boutons, puis appuie sur
un bouton de soumission (submit) pour l'envoyer soit à
un URL, (@ e-mail) ou à un script de page web
dynamique tel que PHP.
MLLE. ZEINEB CHELLY

LA BALISE PRINCIPALE
Les formulaires sont délimités par la balise <FORM> ...

</FORM>, une balise qui permet de regrouper plusieurs
éléments de formulaire (boutons, champs de saisie,...) et qui
Possède les attributs obligatoires suivants :
 Method (GET / POST): permet de définir la méthode
de transfert des données vers le serveur.
 Action: action à exécuter lors de l’envoi des données.
<FORM METHOD="POST" ACTION=
« http://www.serveur.fr/cgi-bin/script">….<FORM>
MLLE. ZEINEB CHELLY

MLLE. ZEINEB CHELLY
CHAMP DE SAISIE SIMPLE : CHAMP DE TEXTE SIMPLE
 Il permet d'entrer un texte très court comme le nom, l'âge, l'e-
mail...
 Il a pour syntaxe : <INPUT TYPE="text"> et pour attributs :
 NAME : le nom du champ,
 SIZE : la taille du champ en nombre de caractères,
 MAXLENGTH : la taille maximale de la chaîne de caractère qu'il
peut contenir,
 VALUE : le texte à mettre par défaut à l'intérieur du champ.
Syntaxe :
<INPUT TYPE="text" NAME="nom_du_champ" SIZE="taille"
MAXLENGTH="taille_maximum" VALUE="texte_par_défaut">
MLLE. ZEINEB CHELLY

EXEMPLES
Votre nom : Yesmin
Votre nom : <INPUT TYPE="text" NAME="nom" SIZE="20"

MAXLENGTH="30" VALUE="Yesmin">
Votre e-mail : L.A.IAG@yahoo.fr
Votre e-mail : <INPUT TYPE="text" NAME="nom" SIZE="20"

MAXLENGTH="30" VALUE="L.A.IAG@yahoo.fr"></FONT>
MLLE. ZEINEB CHELLY

CHAMP DE SAISIE SIMPLE : MOT DE PASSE
Il vous est aussi donné d'utiliser ce champ afin de contrôler

des mots de passe qui apparaitront en astérix grace à la
balise <INPUT TYPE="password">.
Syntaxe :
<INPUT TYPE="password" NAME="nom_du_champ"
SIZE="taille" MAXLENGTH="taille_maximum">
MLLE. ZEINEB CHELLY

EXEMPLE
A password field:
< INPUT TYPE="password" NAME="secret" SIZE="8" MAXLENGTH="8">
MLLE. ZEINEB CHELLY

CHAMP DE SAISIE MULTI-LIGNE
Il est souvent nécessaire à l'intèrnautre d'écrire un commentaire

assez long:
On utilise le conteneur <TEXTAREA> pour offrir au visiteur
un espace multi-lignes.
Il a pour attributs :
 NAME : le nom du champ,
 ROWS : le nombres de lignes,
 COLS : le nombres de colonnes,
 READONLY : le champs se trouve alors en mode lecture
seule c'est-à-dire que le texte par défaut qui s'y trouve ne peut
en être effacé.
MLLE. ZEINEB CHELLY

Syntaxe :
<TEXTAREA NAME="nom_du_champ"
ROWS="nombre_de_lignes" COLS="nombre_de_colonnes">
</TEXTAREA>
Exemples :
Que faites-vous dans la vie ?
Que faites-vous dans la vie ?

<TEXTAREA NAME="vie_internaute" ROWS="5" COLS="50"> </TEXTAREA>
MLLE. ZEINEB CHELLY

Voici ce que j'en pense :
<TEXTAREA NAME="pense" ROWS="5" COLS="50"
READONLY>
C'est un scandale,
c'est inadmissible.
Montons sur Paris, Dressons les baricades !
</TEXTAREA>
Voici ce que j'en pense :
C'est un scandale,
c'est inadmissible.
Montons sur Paris, Dressons les baricades !
MLLE. ZEINEB CHELLY

BOUTON RADIO
Le bouton radio sert à faire un choix à l'internaute parmi

plusieurs propositions.
Un seul choix est possible et le nombre de propositions n'est
pas limité.
On utilise pour cela la balise <INPUT TYPE="radio">
Les attributs sont:
 NAME : le nom du champ dans lequel ira la valeur
finalement sélectionnée,
 VALUE : le texte qui sera inscrit dans le champ,
 CHECKED : facultatif car indique le bouton coché par
défaut.
Syntaxe :
<INPUT TYPE="radio" NAME="nom_du_groupe" VALUE="valeur"
[CHECKED]> MLLE. ZEINEB CHELLY
EXEMPLE
Exemple :
Votre qualité :
Monsieur
Madame
Mademoiselle
Votre qualité : <BR>

<INPUT TYPE="radio" NAME="qualite" VALUE="M"
CHECKED>Monsieur<BR>
<INPUT TYPE="radio" NAME="qualite" VALUE="Mme">Madame<BR>
<INPUT TYPE="radio" NAME="qualite" VALUE="Mlle">Mademoiselle
MLLE. ZEINEB CHELLY

BOUTON CHECKBOX
Le bouton checkbox est très semblable au bouton radio à la

seule différence qu'il est possible d'en sélectionner plusieurs
appartenant au même groupe. Les attributs sont strictement les
mêmes. Mais on utilise cette fois-ci la balise
<INPUT TYPE="checkbox">.
Syntaxe :
<INPUT TYPE="checkbox" NAME="nom_du_groupe "
VALUE="valeur" [CHECKED]>
MLLE. ZEINEB CHELLY

EXEMPLE
Exemple :
Vos sports préférés :
Vos sports préférés : <BR>

<INPUT TYPE="checkbox" NAME="qualites" VALUE="natation"
CHECKED>Natation<BR>
<INPUT TYPE="checkbox" NAME="qualites" VALUE="cyclisme">Cyclisme<BR>
<INPUT TYPE="checkbox" NAME="qualites" VALUE="ski">Ski<BR>
<INPUT TYPE="checkbox" NAME="qualites" VALUE="petanque"
CHECKED>Pétanque<BR>
<INPUT TYPE="checkbox" NAME="qualites" VALUE="basket">Basket
MLLE. ZEINEB CHELLY
LISTES
Les boutons radio et checkbox sont bien mais quand on a un choix à faire entre
36 valeurs différentes, mieux vaut utiliser les listes déroulantes avec le
conteneur <SELECT>
Les attributs sont:
 NAME : le nom de la liste,
 SIZE (facultatif) dont la valeur unité (par défaut) signifie qu'on a affaire à
une liste déroulante sinon c'est une liste normale mais avec barre de
défilement,
 MULTIPLE (facultatif) qui signifie qu'il est possible de sélectionner
plusieurs valeurs.
MLLE. ZEINEB CHELLY

Syntaxe :
<SELECT NAME="nom_de_la_liste" [SIZE] [MULTIPLE]>
<OPTION VALUE="valeur_1">Choix_1
<OPTION VALUE="valeur_2">Choix_2
<OPTION VALUE="valeur_X" [SELECTED]>Choix_X
</SELECT>
MLLE. ZEINEB CHELLY

EXEMPLE 1
Quel est votre type de femme :
Quel est votre type de femme :

<SELECT NAME="femme">
<OPTION VALUE="blondes">Blondes
<OPTION VALUE="brunes">Brunes
<OPTION VALUE="rousses">Rousses
</SELECT>
MLLE. ZEINEB CHELLY

EXEMPLE 2
A quels jeux avez-vous déjà joué :
A quels jeux avez-vous déjà joué : <BR>

<SELECT NAME="jeux" SIZE=4 MULTIPLE">
<OPTION VALUE="dd">Destruction Derby
<OPTION VALUE="racer">Moto Racer
<OPTION VALUE="doom" SELECTED>Doom
<OPTION VALUE="duke">Duke Nukem
<OPTION VALUE="quake">Quake
<OPTION VALUE="civ" SELECTED>Civilisation
<OPTION VALUE="sim">Sim City
</SELECT>
MLLE. ZEINEB CHELLY
BOUTONS DE FONCTION : BOUTON ENVOYER
Une fois que votre visiteur a fini de remplir le formulaire, il faut

qu'il puisse vous l'envoyer.
Pour cela il lui faudra cliquer sur un bouton comme dans une
boite de dialogue windows et dont la balise correspondante est
<INPUT TYPE="submit"> dont l'attribut VALUE a pour valeur
le texte affiché sur le bouton.
Syntaxe :
<INPUT TYPE="submit" VALUE="texte_à_afficher">
MLLE. ZEINEB CHELLY

EXEMPLE
Envoyer
<INPUT TYPE="submit" VALUE="Envoyer">
MLLE. ZEINEB CHELLY

BOUTONS DE FONCTION : BOUTON EFFACER
L'internaute pourra aussi vouloir effacer toutes les réponses

qu'il aura donné. L'utilisation de la balise
<INPUT TYPE="reset"> fera apparaître un bouton qui
permet d'initialiser le formulaire.
Syntaxe :
<INPUT TYPE="reset" VALUE="texte_à_afficher">
MLLE. ZEINEB CHELLY

EXEMPLE
Effacer
<INPUT TYPE="reset" VALUE="Effacer">
MLLE. ZEINEB CHELLY

BOUTONS DE FONCTION : BOUTON SIMPLE
Pour des besoins de contrôle du formulaire avec JavaScript, pour
pouvez être amené à créer un bouton qui ne soit dédié ni à l'envoit
du formulaire ni à son ré-initialisation.
L'utilisation de la balise <INPUT TYPE="button"> fera
apparaître un bouton simple qui peut appeler une fonction
JavaScript.
Syntaxe :
<INPUT TYPE="button" VALUE="texte_à_afficher"
onClick="fonction_JavaScript()">
MLLE. ZEINEB CHELLY

EXEMPLE
Cliquer ici !
<INPUT TYPE="button" VALUE="Cliquez ici !"

onClick="fctjs(this.form)"> <INPUT TYPE="text"
NAME="texte">
MLLE. ZEINEB CHELLY

ATTRIBUTS DE LA BALISE FORM ET TYPES D'ENTRÉES
MLLE. ZEINEB CHELLY

MLLE. ZEINEB CHELLY
EXERCICE
MLLE. ZEINEB CHELLY

CORRECTION
MLLE. ZEINEB CHELLY

MLLE. ZEINEB CHELLY

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

HTML

Uploaded by

Copyright:

Available Formats

Rectorat 7 Novembre de Carthage Année Universitaire 2009/2010

FSEGN Niveau: 2 L.A - IAG

HyperText Markup Langage

Langage de mise en forme à base de balises

Les balises permettent d’organiser le contenu du site

MLLE. ZEINEB CHELLY

En utilisant un éditeur de texte basique de type bloc-notes ou

MLLE. ZEINEB CHELLY

MLLE. ZEINEB CHELLY

Créer un lien ... vers un autre document

doc. A doc. B MLLE. ZEINEB CHELLY

Créer son lien

Créer un lien ... vers une section spécifique du doc. courant

document A MLLE. ZEINEB CHELLY

 Lien vers un fichier à télécharger

MLLE. ZEINEB CHELLY

 Il existe six niveaux de titres d'importance décroissante :

MLLE. ZEINEB CHELLY

 Fonction : Un paragraphe est délimité par les balises

 Attributs : Attributs de la balise <p>

MLLE. ZEINEB CHELLY

 Fonction : Force un retour en début de ligne suivante à

MLLE. ZEINEB CHELLY

MLLE. ZEINEB CHELLY

MLLE. ZEINEB CHELLY

 La balise <center> permet de centrer son contenu. Il est

 <blockquote>, prévu pour des citations de plusieurs lignes,

MLLE. ZEINEB CHELLY

MLLE. ZEINEB CHELLY

Liste non Quelques fruits Quelques fruits

 Un tableau commence par <TABLE> et finit par </TABLE>

MLLE. ZEINEB CHELLY

MLLE. ZEINEB CHELLY

 Pour lier plusieurs cellules sur une colonne, utiliser

MLLE. ZEINEB CHELLY

MLLE. ZEINEB CHELLY

 WIDTH : largeur du tableau ou d'une cellule, en pixels ou

MLLE. ZEINEB CHELLY

MLLE. ZEINEB CHELLY

Les formulaires interactifs permettent aux auteurs de pages

Le lecteur saisit des informations en remplissant des

MLLE. ZEINEB CHELLY

Les formulaires sont délimités par la balise <FORM> ...

MLLE. ZEINEB CHELLY

MLLE. ZEINEB CHELLY

Votre nom : Yesmin

Votre nom : <INPUT TYPE="text" NAME="nom" SIZE="20"

Votre e-mail : L.A.IAG@yahoo.fr

Votre e-mail : <INPUT TYPE="text" NAME="nom" SIZE="20"

MLLE. ZEINEB CHELLY

Il vous est aussi donné d'utiliser ce champ afin de contrôler

MLLE. ZEINEB CHELLY

MLLE. ZEINEB CHELLY

Il est souvent nécessaire à l'intèrnautre d'écrire un commentaire

MLLE. ZEINEB CHELLY

Que faites-vous dans la vie ?

MLLE. ZEINEB CHELLY

Voici ce que j'en pense :

MLLE. ZEINEB CHELLY

Le bouton radio sert à faire un choix à l'internaute parmi

Votre qualité : <BR>

MLLE. ZEINEB CHELLY

Le bouton checkbox est très semblable au bouton radio à la

MLLE. ZEINEB CHELLY