Sie sind auf Seite 1von 58

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


LES ÉLÉMENTS DU LANGAGE HTML : LES LIENS HYPERTEXTES
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
LES ÉLÉMENTS DU LANGAGE HTML : LES LIENS HYPERTEXTES

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>
<TD>C e l l u l e 1 ,2</TD>
<TD>C e l l u l e 1 ,3</TD>
</TR>
<TR>
<TD>C e l l u l e 2 ,1</TD>
<TD>C e l l u l e 2 ,2</TD>
<TD>C e l l u l e 2 ,3</TD>
</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