Scribd
Importer
90 vues25 pages

Cours HTML CSS

Transféré par

mamadou.haidara232
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
90 vues25 pages

Cours HTML CSS

Transféré par

mamadou.haidara232
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 25

HTML CSS

CHAPITRE 01 : GENERALITES

I. DEFINITION

Le HTML (hyper text markup language) est un langage dit de marquage, de


structuration ou de balisage dont le rôle est de formalisé l'écriture d'un document
avec des balises de formatage. Les balises permettent d'indiqué les manières
avec la quelle dois être présenté le document et le lien établie avec d'autre
document.
Le langage HTML permet notamment la lecture des documents sur internet à
partir d'ordinateur connecté à un réseau.
C’est le langage de base de la programmation web

II. NOTION DE BALISE

Une balise est un élément de texte (un nom) encadré pas le signe inferieure (<)
et le signe supérieure (>) sa syntaxe est la suivante : <BALISE>
EXEMPLE : <P>

Les balise HTML ne sont pas sensible à la casse c'est à dire qu’elles peuvent
être écrite en minuscule ou en majuscule
On distingue deux types de balise :

III. BALISE PAIRE

Elle est caractérisé par l'utilisation d'une paire de balise dont la première
est appelé balise d'ouverture ou balise ouvrante et la second est appelé
balise de fermeture ou balise fermente cette balise fermette est précédé
pas le caractère anti slash
Balise ouvrante <BALISE> balise fermente </BALISE>
EXEMPLE : <TR> LIGNE</TR>

IV. BALISE IMPAIRE

Appelée aussi balise unique elle est caractérisé par une seul balise qui se
termine par le caractère slash sa syntaxe est la suivante : <BALISE />
EXEMPLE: <IMG/>
NB : le langage HTML autorise l'utilisation combinée de plusieurs balises
tout fois la méthode qui est reconnu c'est l'incrimination de balise c'est à dire
leurs utilisation hiérarchique afin de permettre le cumul de leur propriété
En contrepartie le chevauchement des balises n'est pas toléré

V. NOTION D’ATTRIBUT

Un attribut est un élément présent au sein de la balise d'ouverture permettant de


décrire des propriétés supplémentaire.
Il se présente la plus part du temps sous la forme d'une paire clé="valeur"
EXEMPLE: <p align="center"> mon texte </p>
Le texte a l'intérieure de la double balise P est un paragraphe.
L’attribut align="center" précise qu'il sera affiché de manière centré dans le
navigateur
NB: dans la pratique un attribut peut posséder o, 1 ou plusieurs valeurs

VI. STRUCTURE D’UN DOCUMENT HTML

Les documents HTML commence dans la balise d'ouverture <HTML> et se


termine dans la balise de fermeture </HTML>.
Il contient également une entête délimité par la double balise HEAD
<HEAD>…. </HEAD>
Il possède aussi un corps délimité par la double balise body
<BODY>...</BODY>
La structure de base d'un document HTML est la suivante :
<HTML>
<HEAD>
<TITLE>
Titre de la page
</TITLE>
</HEAD>
<BODY>
Corps de la page
</BODY>
</HTML>
CHAPITRE 02 : OUTILS DE TRAVAIL

I. EDITEURS DE PAGE WEB


C’est un logiciel qui permet d’écrire un code HTML ou tant autre instruction
d’un langage de programmation

II. EDITEUR BASIQUE


Comme son nom l’indique, il permet d’écrire l’instruction en langage de
programmation sans aucune aide
EXEMPLE : BLOC-NOTE WORDPAD

III. EDITEUR EVOLUE


C’est un logiciel qui facilite l’écriture des programmes web en signalant
l’éventuelle erreur en faisant des propositions de code, en mettant en couleur les
particularités d’un programme
EXEMPLE : NOTE PAD++, SUBLIME TEXT

IV. EDITEUR WYSIWYG


Pour ce genre de logiciel l’on n’a pas besoin de maitrisé le langage de
programmation pour pouvoir les utilisés.
Il fonctionne selon deux modes, le mode graphique et le mode code.
En choisissant le mode graphique, l’on peut insérer dans notre page tout élément
souhaité comme si l’on fessait usage d’un document Word.
Par la même occasion en affichant le code, l’on aperçoit toute la balise de
description généré par ce logiciel et qui est en relation avec ce qui a été fait en
mode graphique.
Cela est également possible si l’on commence à écrire le code car le mode
graphique va interpréter tout le programme qui a été écrit.
EXEMPLE : ADOBE DREAM WEAER, MICROSOFT SILVER LIGTH
V. NAVIGATEURS
C’est un logiciel qui permet de consulter les pages web, ou d’interpréter des
programmes HTML qui ont été écrits dans nos fichiers
EXEMPLE : GOOGLE CHRONE, MICROSOFT EDGE, MOGILLA
FIREFOX
VI. BONNES PRATIQUES
1) EXPENSION DE FICHIERS HTML
Les fichiers HTML ont pour extension
 .HTML
 .HTM
 XHTML
 XHTM
Pour noter cours tous les fichiers auront pour extension .HTML

2) STRUCTURE DE DOCUMENT HTML


Peu importe le volume ou la longueur d’un programme HTML, la structure du
document qu’il contient devra toujours respecter la structure de base d’un
document HTML

3) INDENTATION DE CODE
Afin de mieux présenter notre programme HTML, il sera nécessaire de
positionner les balises les unes par rapport aux autres de manière hiérarchique
c’est-à-dire d’indenter notre code
CHAPITRE 03 : BALISE DE MISE EN FORME

I. BALISE DE STYLE D’ECRITURE

Les balises de style d’écriture modifient la topographie du texte. Elles peuvent


être indiqué dans d’autre balise de style de la même façon que l’on le ferait avec
un traitement de texte afin d’obtenir une combinaison de propriété.
Ces balises sont :
 <B> … </B> qui permet de mettre le texte en gras
 <STRONG>…. </STRONG> permet aussi de mettre le texte
en gras
 <I>…</I> permet de mettre le texte en italique
 <EM>…</EM> qui permet aussi de mettre le texte en italique
 <S>…</S> permet de barré le texte
 <STRIKE>…. </STRIKE> qui permet aussi de barré le texte
 <BIG>…</BIG> permet d’augmenter le taille du texte
 <SMALL>…</SMALL> permet de diminué la taille du texte
 <SUP>…</SUP> permet de mettre le texte en exposant
 <SUB>…</SUB> permet de mettre le texte en indice
 <U>…</U> permet de souligné le texte

II. BALISE DE NIVEAU DE TITRE

Le langage HTML défini 6 niveaux de titre qui serve a structuré de


maniéré hiérarchique les paragraphes dans un texte.
Ces balises sont :
 <H1>…. </H1>
 <H2>…. </H2>
 <H3>…. </H3>
 <H4>…. </H4>
 <H5>…. </H5>
 <H6>…. </H6>
Comme effet visuel dans le navigateur on considéra que le texte sur le quelle
s’applique la double balise H1 aura une taille plus grande que celui sur laquelle
on appliquera la double balise H2 et cette taille sera de plus en plus décroissante
jusqu’à la double balise H6.
Le principal attribut de ces doubles balises est la suivante :
 Aligne= "left|right|center"
Cet attribut précis le positionnement à GAUCHE, A DROITR ou AU CENTRE
du texte sur lequel est appliqué une de ces doubles balises de niveau de titre
Exemple : <H2 Aligne= "right">titre de la section </H2> le titre de la
section sera positionné à droite

III. BALISE DE PARAGRAPHE

Le langage HTML considère les paraphes comme un bloc de texte.


C’est la double balise <P>…. </P> qui permet de généré le paragraphe
principale.
Le principal attribut de cette double balise est la suivante :
 Align= "left|right|center|justify"
Cet attribut précise le positionnement à GAUCHE, A DROITR, AU CENTRE
ou de manière harmonieuse à gauche et à droite du bloc de texte qui constitue le
paragraphe
EXMPLE : <P Align= "left">ceci est un paragraphe </P>
La balise unique <BR/> provoque un retour à la ligne a partie de son
emplacement dans un bloc de texte.
La double balise <NOBR>…</NOBR> empêche le retour à la ligne dans
l’affichage du bloc de texte sur lequel il est appliqué.
Ce texte sera donc affiché sur une seul ligne peu importe le nombre de caractère.
La balise unique <HR/> insert un trait horizontal de séparation entre deux
paragraphes.
Ces principaux attributs sont :
 Signe="n" indique en pixel l’épaisseur du trait horizontal
 Width="n|n%" indique en pixel ou en pourcentage la longueur du
trait de séparation
 Aligne= "left|right|center" Il précise si le trait horizontal est à
gauche, à droite et au centre.
 Color ="nom ou code de couleur"
EXEMPLE :<HR size="5" width="75%" color="red"
align="center">

IV. BALISE DE POLICE DE CARACTERE

Cette balise permet de faire usage d’une police de caractère précise dans notre
texte.
La double balise <FONT>…</FONT>
Ces principaux attributs sont :
 Face="police1, police2,……" il précise la police de caractère a
utilisé pour affiché le texte.
 Size="1|2|3|4|5|6|7|-2|-1|+1|+2|+3|+4" il précise la taille du texte et
sa valeur par défaut est 3
 Color ="nom ou code de couleur" il impose une couleur au texte.
 Background-color=“ nom ou code de couleur“ couleur du font
<FONT size="5" face= "arial" color="green">
EXEMPLE :
AGITEL</FONT>

V. CARACTERES SPECIAUX

Les normes HTML n’autorise pas l’usage des caractères accentué cependant afin
de faire apparaitre les caractères spéciaux pour accentué dans les pages web, une
codification a été trouver.
C’est une combinaison qui débute pas le symbole (&) et se termine par un (;)
Exemple : é= &eacute ; ç= &credil ;
A=&agrave ;

VI. COMMNTAIRES
Les balise de commentaire HTML permette d’apporté des explications au
programme sans que ceux si n’apparait dans le navigateur.
Ces balises se représentent de la manière suivant :
< !--……-->
Exemple : < !—ceci est mon commentaire-->
Quelque balise
 <a> … </a> qui permet d’inséré un lien
Quelque attribut de la balise (a)

 href
 target = “blank“ qui permet d’ouvrir le lien dans un autre onglet
Exemple : <a
href = “http://www.google.com “, target = “blank“>le
site Google</a>
Le site Google : décrit le lien
http://www.google.com : le lien
<img/> qui permet d’affiché une image
Quelque attribut de la balise (img)

 src : insertion d’image


 alt : description de l’image
Exemple : <img src = “image1.jpg“, alt = “ma photo“>
IMAGE A PARTIR D’UN LIEN
<a href =“http://www.google.com “><img src= “image1.jpg“></a>
CHAPITRE 04 : BALISE DE LISTES

I. PRESENTATION

Une liste est un paragraphe structuré contenant une suite ou une séquence
d’article. Le langage HTML définie trois types de liste :
La liste ordonnée, la liste non ordonné et la liste de définition.
II. TYPS DE LISTE

1) LISTE ORDONNEE
Appelé aussi liste numéroté ou encore liste indexé, c’est une liste dans laquelle il
existe une hiérarchie entre les différents éléments de la sorte à ce que l’on peut
identifier la position d’un élément parmi les autres
La balise qui permet de généré cette liste est la double balise (OL)
<OL>…..</OL>
Ses principaux attributs sont :
 Type = “1|i|I|a|A|“ : Il précise la nature de la numérotation qui sera
utilisé pour identifier chaque élément de la liste. Sa valeur par défaut est 1
 Start = “n“ : Start indique la position à partie de la quelle vas débuter
la liste
 Compact : Il réduit l’interligne entre les différents éléments de la liste
Reversed= "reversed" : Il reverse la numérotation ou l’indexation des
éléments de la liste
Les différents éléments de la liste son généré par la double balise (LI)
<LI>…</LI>
Il possède 1 seul attribut qui est :
 Value= “1|i|I|a|A“
EXEMPLE : soit la liste ordonnée suivant :
A. COCODY
B. PLATEAU
C. YOPOUGON

Le code HTML est :


<OL type = “A“>
<LI> COCODY</LI>
<LI> PLATEAU</LI>
<LI> YOPOUGON</LI>
</OL>
2) LISTE NON-ORDONNEE
C’est une liste dans laquelle il n’existe pas d’hiérarchie entre les éléments qui la
constitue.
La balise qui permet de généré cette liste est la double balise (UL)
<UL>…..</UL>
Ses principaux attributs sont :
 Type = “disc|circle|square|“ : Il précise le type de puce précèdent
chaque élément de la liste à savoir : les discs les cercle ou encore un carré
 Compact : Il réduit l’interligne entre les différents éléments de la liste
Les différents éléments de la liste son généré par la double balise (LI)
<LI>…..</LI>
Il possède 1 seul attribut qui est :
 Type = “disc|circle|square|“
EXEMPLE : soit la liste non-ordonnée suivant:

 COCODY
 PLATEAU
 YOPOUGON
Le code HTML est :
<UL type = “square“>
<LI> COCODY</LI>
<LI> PLATEAU</LI>
<LI> YOPOUGON</LI>
</UL>

3) LISTE DE DEFINITION
Comme son nom l’indique c’est une liste dans laquelle on n’associe à chaque
élément une définition.
La balise qui permet de généré cette liste est la double balise (DL)
<DL>…..</DL>
Les éléments sont mis en évidence grâce a la double balise <DL>…..</DL>
Chaque définition associé est généré par la double balise <DL>…..</DL>
EXEMPLE : soit la liste de définition suivant :

Afrique
Abidjan
Europe
Paris
Le code HTML est :
<DL>
<DT> COCODY</DT>
<DD> PLATEAU</DD>
<DT> YOPOUGON</DT>
</DL>

CHAPITRE 05 : BALISE DE TABLEAU

I. PRESENTATION
Il est souvent utile de présenté les informations d’une meilleure manière
qu’avec les listes. Les tableaux permettent de les affichés en ligne et en
colonne.
En HTML les tableaux son défini comme étant une suite de ligne

II. BALISE DE BASE

1) LA DOUBLE BALISE (TABLE)


<TABLE>…. </TABLE>
C’est la toute première balise à utiliser si l’on veut insérer un tableau dans une
page web. Elle possède comme principaux attribut :
 Aligne= "left|right|center" Il précise le positionnement du tableau
à gauche, à droite ou au centre.
 Background = “ nom du fichier image“ Il permet de défini une
image d’arrière-plan du tableau
 Bgcolor = “nom ou code de couleur “ Il permet d’ajouter une
couleur de fond au tableau
 Cellpadding = “n“ il indique en pixel l’espace qu’il y’a a l’intérieure
d’une cellule entre le texte et la bordure de cellule
 Cellspacing = “n“ Il indique en pixel la marge extérieure qu’il y’a
entre les cellules
 Height = “n | n% Défini en pixel ou en pourcentage la hauteur du
tableau
 Width = “n | n%“ Défini en pixel ou en pourcentage la largeur du
tableau
 Bordercolor = “nom ou code de couleur“ Permet de donner des
couleurs aux bordures du tableau
 Border = “n” Il précise en pixel l’épaisseur de la bordure du tableau

2) LA DOUBLE BALISE (CAPTION)
<CAPTION>…. </CAPTION>
Cette balise permet d’ajouter un titre au tableau.
Sont principale attribut est :
 Aligne= "top|botton" Il fixe la position du titre au-dessus ou en
dessous du tableau

3) LA DOUBLE BALISE (TR)


<TR>…. </TR>
Cette double balise permet de généré les différentes lignes du tableau. Ces
principaux attributs sont :
 Aligne= "left|right|center" Il précise le positionnement du tableau
à gauche, à droite, au centre ou de manier justifier les données de la ligne
du tableau
 Valign = “top|botton |middle“ il spécifie l’emplacement en bas, en
haut ou au milieu de la ligne du tableau
 Bgcolor = “nom ou code de couleur“ Il permet d’ajouter une
couleur de fond a la ligne du tableau

4) LA DOUBLE BALISE (TD)


<TD>…. </TD>
Cette double balise TD procède les mêmes attributs que (TR)
A cela on ajoute :
 Height = “n | n% Défini en pixel ou en pourcentage la hauteur de la
cellule
 Width = “n | n%“ Défini en pixel ou en pourcentage la largeur du
tableau
 Colspan =“n“ il permet de fusionner plusieurs ligne adjacente
positionner horizontalement appartenant à plusieurs colonnes
 Rowespan = “n“ ils fusionnent plusieurs cellule situé verticalement et
appartenant à plusieurs lignes.

III. AUTRES BALISES

1) LA DOUBLE BALISE (THEARD)


<THEAD>…. </THEAD>
Cette double balise permet de positionner en haut du tableau une ou plusieurs
lignes qui seront considéré comme entête du tableau.

2) LA DOUBLE BALISE (TFOOT)


<TFOOT>…. </TFOOT>
Cette double balise permet de définir plusieurs lignes comme pieds du tableau.

3) LA DOUBLE BALISE (TBODY)


<TBODY>…. </TBODY>
Cette double balise défini plusieurs lignes du tableau comme tant le corps du
tableau.
REMARQUE : <TH>…<TH>
Il est possible de définir une cellule d’entête en plus des cellules de
donnée, c’est cellule sont défini grâce à la double balise (PH) qui possède
les mêmes attributs que la double balise (TD) mai son aspect dans le
navigateur est plus accentuer
EXEMPLE : soit le tableau suivant ;

Couleur Ville Fruit


bleu Bouaké banane
jaune Jacqueville Mangue
Le code html qui permet d’obtenir le tableau est :
<html>
<head>
<title>
c'est un tableau
</title>
</head>
<body>
<table align="center" border="1" cellpadding="5" cellspacing="0"
width="800">
<caption align="top"> variétés </caption>
<tr>
<th align="center">coleur</th>
<th align="center">ville</th>
<th align="center">fruit</th>
</tr>
<tr>
<td>blen</td>
<td>bouaké</td>
<td>banane</td>
</tr>
<tr>
<td>jaune</td>
<td>jacqueville</td>
<td>mangue</td>
</tr>
</table>
</body>
</html>
CHAPITRE 06 : BALISE DE CONTENU MULTIMEDIA

I. PRESENTATION
Un contenu multimédia est un objet qui contient un grand nombre d’information
Ainsi on n’a des images, des séquences audio, des séquences vidéo, des
animations, des applets,….
Pour notre cours nous allons nous intéresser à l’insertion dans une page web
D’une image, d’une séquence audio et d’une séquence vidéo.

II. BALISE D’INSERTION D’UNE IMAGE


L’image est inséré dans notre page grâce à la balise unique <IMG/>.
Ces principaux attributs sont :
 SRC= “nom ou adresse de l’image “ il est obligatoire et précise l’image a
inséré dans la page web
 Width= “ n|n%|auto“ il définit la largeur en pixel, en pourcentage et
original de l’image
 height= “ n|n%|auto“ il définit la hauteur en pixel, en pourcentage et
original de l’image
 Border= “n“ indique en pixel la bordure de l’image
 Aligne= "left|right|top" il donne le positionnement à gauche, à
droite, en haut et en bas de l’image par rapport à son
environnement
 Hspace=“n“ Il ajoute un espace en pixel à gauche et à droite
de l’image.
 Vspace= “n“ il ajoute un espace en pixel en haut et en bas d
l’image
 Alt= “ texte alternatif “ il indique le texte de remplacement qui
apparaitra dans le navigateur si l’image a été détruite ou son nom
mal écrit
EXEMPLE :<img src=“soleil.jpg“ width=“600“
height=“400“ border=“2“ alt=“beau soleil“/>
III. BALISE D’INSERTION D’UNE SEQUENCE AUDIO
L’insertion d’une séquence audio dans une page web se fait grâce à la double
balise <AUDIO>…</AUDIO>.
Ces principaux attributs sont :
 Src=“nom ou adresse de fichier audio“ il précise le nom de l’adresse du
fichier à insérer dans la page web. Il est obligatoire
 Controls=“controls“ il permet d’afficher les boutons de gestion de la
séquence audio
 Loop=“loop“ cet attribut permet de faire jouer en boucle la séquence
audio
 Auto Play=“auto Play“ il fait jouer seul ou automatiquement l’audio une
fois que la page web s’affiche.
 muted Il permet de couper le son afin de ne pas entendre la séquence
audio une fois que la page web s’affiche.
 Preload=“none|metadata|auto“ il précise le changement à effectuer de
la séquence sur la séquence audio
Si Preload=“none“ aucun changement n’est fait la séquence audio sera écouté
avec des interruptions.
Si Preload=“metadata“ c’est seulement les métadonnées qui sont pré chargé à
savoir (nom, audio)
Si Preload=“auto“ la séquence audio vas se mètre a jouer lorsque tous les
métadonnées seront chargés
EXEMPLE : <AUDIO src= “son mp3“ controls=“controls“
autoplays=“autoplays“ muted>c’est une belle musique </AUDIO>.

VII. BALISE D’INSERTION D’UNE SEQUENCE VIDEO

La balise qui permet d’insérer une séquence vidéo dans une page web est la
double balise <VIDEO>…</VIDEO>.
Ces attributs sont les mêmes que les séquences vidéos
Il indique la première image qui doit apparaitre avant que la séquence vidéo ne
se mette à jouer.
 Width= “ n|n%|auto“ il définit la largeur en pixel, en pourcentage et
original de l’image
 height= “ n|n%|auto“ il définit la hauteur en pixel, en pourcentage et
original de l’image

CHAPITRE 7 : BALISES DE LIENS HYPERTEXTES OU


ANCRAGES

I) PRESENTATION
Les liens hypertextes appelés aussi ancrages ou encore hyperliens sont des
éléments d’une page HTML permettant aux internautes de naviguer vers une
nouvelle adresse lorsque l’on clique dessus. Ce sont les liens hypertextes qui
permettent de lier les pages web entre elles autorisant ainsi la navigation vers :
 Un autre endroit du document
 Un fichier HTML situé à un emplacement différent de la
machine qui héberge la page web
 Une autre machine

II) BALISE DE LIEN HYPERTEXTE


L’insertion d’un ancrage dans une page web se fait grâce à la double balise :
<A>…</A>

Son principal attribut est :


 Href = ‘’nom ou adresse du fichier de destination’’ : il indique le
fichier qui doit apparaître dans le navigateur une fois que l’on clique sur
le lien hypertexte

III) TYPES DE LIENS HYPERTEXTES

1. LIEN INTERNE
C’est un lien permettant d’accéder à un fichier se trouvant sur la machine locale.
Toutefois en fonction de l’adressage du fichier de destination on distinguera
aussi deux (2) types de liens internes.
a. LIEN INTERNE RELATIF
C’est un lien qui s’écrit en repérant le fichier de destination par rapport aux
fichiers sources c’est-à-dire le fichier dans lequel est écrit le fichier de code
hypertexte. Sa syntaxe est la suivante :
<A Href = ‘’../répertoire/fichier.html’’>Texte</A>
EXEMPLE : <A Href = ‘’../cours/programmation.html’’>Pascal</A>

b. LIEN INTERNE ABSOLU


Ici l’adresse du fichier de destination est donnée en fonction de son
emplacement sur la machine locale. Sa syntaxe est :
<A Href = ‘’files://lecteur:/répertoire/fichier.html’’>Texte</A>
EXEMPLE : <A Href = ‘’file://C:/cours/programmation.html’’>Pascal</A>

2. LIEN EXTERNE
Ici le fichier de destination se trouve sur une autre machine. La syntaxe du lien
hypertexte est la suivante :
<A Href = ‘’http://adresse de
l’ordinateur/répertoire/fichier.html>Texte</A>
EXEMPLE :
<A Href
=‘’https://www.codeurs.com/cours /programmation.html’’>Pascal</A>

IV) SIGNET
Le langage HTML nous donne la possibilité d’accéder à un endroit précis d’une
page web en insérant à cet endroit un signet. Le signet se définit grâce à
l’attribut :
Name = ‘’le nom du signet’’ ou Id = ‘’nom du signet’’
Pour accéder à l’endroit où se trouve le signet l’on ajoutera au lien hypertexte
l’expression « # » suivit du nom du signet (#signet) à la fin du nom du fichier
des destinations. La syntaxe sera :
<A Href = ‘’fichier.html#signet’’>Texte</A>
EXEMPLE :
<A Href = ‘’programmation.html#top’’>Pascal</A>

Chapitre 8: BALISES DE FORMULAIRE


I) PRESENTATION

Les formulaires sont des éléments du langage html qui


établisse l’inter activité entre un site web et ses visiteurs. Il
constitue ainsi la base de la création d’un site web
dynamique. De se faite, il permet de recueillir des
informations à partir des zones de texte, des case a cochet,
des menus-listes...
II) BALISE DE BASE
1) La double balise <FORM>…</FORM>
C’est cette double balise qui permet d’initier la création d’un
formulaire.
Son principal attribut est :
 action=“nom ou adresse“ il indique le fichier qui doit procéder au
traitement des données saisie dans le formulaire

2) La double balise <FIELDSET>…</ FIELDSET >


Il permet de crée des boques visuel dans le formulaire afin d’en
améliorer la présentation

3) La double balise <LEGEND>…</ LEGEND >


Cette double balise permet de donnée un titre à chaque bloque
visuel
4) La balise unique <INPUT/>
Cette balise unique permet de crée la plus par des composants
d’un formulaire d’on les aspects et les rôles sont très diffèrent.
Sont principale attribut est :
 Name=“nom du composant“ il indique le nom attribué au
composant
Les diffèrent type de composant sont obtenus avec l’attribut
TYPE
a) Type=“text“
Il crée un champ de saisi de texte d’une seule ligne

b) Type=“password“
Il crée un champ de saisi de texte d’une seule ligne
Chapitre 8 : Balises de formulaire

I. Présentation
Les formulaires sont des éléments du langage HTML qui établissent
l’interactivité entre un site Web et ses visiteurs. Ils constituent ainsi la
base de la création des sites web dynamiques. De ce fait il permet de
recueillir des informations à partir de zone de texte, des cases à cocher,
des menus-listes…

II. Balises de base

1. <FORM>…</FORM>
C’est cette double balise qui permet d’initier la création d’un formulaire.
Son principal attribut est :
Action = ‘’nom ou adresse du fichier de destination’’ : il indique le
fichier qui doit procéder au traitement des données saisies dans le
formulaire

2. <FIELDSET>…</FIELDSET>
Il permet de créer des blocs visuels dans le formulaire afin d’en améliorer
la présentation.

3. <LEGEND>…</LEGEND>
Cette double balise sert à donner un titre à chaque bloc visuel.
4. <INPUT/>
Cette balise unique permet de créer la plupart des composants d’un
formulaire dont les aspects et les rôles sont très différent. Son principal
attribut est :
Name = ‘’nom du composant’’ : il indique le nom attribué au
composant
Les différents types de composants sont ici obtenus avec l’attribut
« Type ».

a. Type = ‘’text’’
Il crée un champ de saisi de texte d’une seule ligne.

b. Type = ‘’password’’
Il crée un champ de saisi de mot de passe dans lequel les caractères sont
cryptés.

c. Type = ‘’checkbox’’
Il crée une case à cocher permettant d’effectuer un ou plusieurs choix.

d. Type = ‘’radio’’
Il crée un bouton radio qui autorise qu’un seul choix parmi plusieurs.

e. Type = ‘’file’’
Il permet de faire le transfert de fichier une fois que celui-ci est
sélectionné.

f. Type = ‘’submit’’
Il crée un bouton sur lequel l’utilisateur clique afin de déclencher l’envoi
des données saisi dans le formulaire. Le nom du bouton de soumission est
indiqué grâce à l’attribut « Value = ‘’nom du bouton’’ ».
g. Type = ‘’reset’’
Il permet de créer un bouton de réinitialisation du formulaire le nom de ce
bouton est donné grâce à l’attribut « Value = ‘’nom du bouton’’ ».

5. <TEXTAREA>…</TEXTAREA>
Cette double balise permet de créer une zone de saisie qui contient
plusieurs lignes. Ces principaux attributs sont :

 Rows = ‘’n’’ : il permet d’indiquer le nombre de ligne qui constitue la


zone de saisie

 Cols = ‘’n’’ : il indique le nombre de colonne qui constitue cette zone


de saisie

6. <SELECT>…</SELECT>
Cette double balise crée une liste de sélection ayant plusieurs options
parmi lesquelles l’internaute peut faire un choix. Son principal attribut
est :
Name = ‘’nom de la sélection’’
Les différentes options sont générées grâce à la double balise :

<OPTION>…</OPTION> qui a pour principal attribut « Value = ‘’valeur de


l’option’’ ».

Vous aimerez peut-être aussi