Scribd
Importer
13 vues133 pages

HTML Endefoc

Le document présente le HTML (HyperText Markup Language) comme un langage de description utilisé pour créer des pages web, en structurant le contenu à l'aide de balises. Il aborde également les outils nécessaires pour écrire du code HTML, les navigateurs web, et les différentes balises et éléments qui composent une page web, comme les paragraphes, les titres, les liens, et les médias. Enfin, il fournit des exemples pratiques et des exercices pour aider à comprendre la création de pages web en HTML.

Transféré par

aressalas11011977
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 PPTX, PDF, TXT ou lisez en ligne sur Scribd
13 vues133 pages

HTML Endefoc

Le document présente le HTML (HyperText Markup Language) comme un langage de description utilisé pour créer des pages web, en structurant le contenu à l'aide de balises. Il aborde également les outils nécessaires pour écrire du code HTML, les navigateurs web, et les différentes balises et éléments qui composent une page web, comme les paragraphes, les titres, les liens, et les médias. Enfin, il fournit des exemples pratiques et des exercices pour aider à comprendre la création de pages web en HTML.

Transféré par

aressalas11011977
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 PPTX, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 133

Les interfaces utilisateurs statiques

HTML
HyperText Markup Language
Introduction :
Pour créer un site web, on doit donner des
instructions à l'ordinateur.
Il ne suffit pas simplement de taper le texte qui
devra figurer dans le site, il faut aussi indiquer
où placer ce texte, où insérer les images, faire
des liens entre les pages, etc.
Pour expliquer à l'ordinateur ce que vous voulez
faire, il va falloir utiliser un langage qu'il
comprend.
Définition
 Qu’est ce que le HTML ?
 Le HTML (HyperText Markup Language) est un langage de
description (présentation) de données, et non un langage de
programmation. Il permet de créer des pages web pouvant être
lues dans des navigateurs.

Le HTML sert à indiquer aux navigateurs quel texte doit être


considéré comme un paragraphe, quel texte doit être considéré
comme un titre, que tel contenu est une image ou une vidéo.
De quel logiciel je vais avoir besoin pour créer
mon site web ?
Il existe effectivement de nombreux logiciels
dédiés à la création de sites web.

Les éditeurs de texte : ce sont des


programmes dédiés à l'écriture de code. On
peut en général les utiliser pour de multiples
langages.
On peut créer un site web uniquement avec
Bloc-Notes, le logiciel d'édition de texte
intégré par défaut à Windows.
Sous Windows
Il existe une grande quantité d'éditeurs de texte:
Notepad++: l'un des plus utilisés parmi ceux
disponibles pour Windows. Ce logiciel est simple, il est
gratuit.
Il existe d'autres éditeurs disponibles sous
Windows.
jEdit ; PSpad ; ConTEXT ;…
Sous Mac OS X
Vous pouvez essayer l'un des logiciels
suivants :
jEdit ; Smultron ; TextWrangler.
Sous Linux
gEdit ;Kate ;vim ;Emacs ;
Les navigateurs

Le navigateur est le programme qui nous

permet de voir les sites web.

le travail du navigateur est de lire le code

HTML et CSS pour afficher un résultat visuel à

l'écran.

Il existe de nombreux navigateurs différents.

Voici les principaux à connaître :


 Balises HTML
 Le HTML utilise des balises (système de balisage) qui vont
permettre de structurer le document et lui donner du sens.

 Une balise HTML est un élément que l'on va ajouter au


texte à afficher pour dire au navigateur de quelle manière
l'afficher. Elle n'est pas affichée telle quelle dans le
navigateur, elle est interprétée par celui-ci.

 syntaxe: <BALISE> (Balise standard )


- Une balise est toujours délimitée par les signes <
et >
- Chaque balise ouverte doit être fermée, cependant
il existe des exceptions
 Balises HTML

 Attributs d’une balise:

- informations complémentaires caractérisant une balise.

- Une balise peut comporter de zéro à plusieurs attributs.

forme: nom_attribut="valeur"

exemple : <html lang="fr">


 Balises simples – balises
doubles
Deux types de balises :
Balises dites
 balises "vides": ne(orpheline)
simples contiennent aucune autre balise HTML
Ces balises n'ont pas besoin d'être fermées.
exemple
<img src="adresse_de_l’image"> (insertion d’une image)

 balises doubles
Deux balises ouvrantes/fermantes, entre lesquelles sont
situées d'autres balises ou du texte.
La balise fermante: identique à la balise ouvrante.
contient un "/" pour indiquer la
fermeture.
exemple<p>
: ici du texte ou tout autre balise </p> (nv paragraphe)
 Les éléments HTML:

Les éléments sont constitués de balises. Dans la majorité des


cas, un élément est constitué d’une paire de balises : une
balise ouvrante et une balise fermante.
Structure de base d'un fichier HTML

<-- titre de la page

<– corps de la page

Une balise <html> contenant une seule balise <head> et une seule balise
<body>.
Le doctype
La toute première ligne s'appelle le
doctype. Elle est indispensable car c'est
elle qui indique qu'il s'agit bien d'une
page web HTML. (cela signifie que la
page est écrite en HTML5)
Ce n'est pas vraiment une balise comme
les autres (elle commence par un point
d'exclamation)
• Cette balise indique l'encodage utilisé dans
votre fichier

• Cette méthode d'encodage permet d'afficher

sans aucun problème tous les symboles de

toutes les langues de notre planète


 L’entête du document - Head
La balise <head> contient de
nombreux renseignements sur la page, sur l'auteur
...
 Le titre de la page
entre les balises <title> et </title>
Très important :
 Apparaît dans la barre de titre du navigateur.
 Son contenu sera affiché en titre des
résultats de la recherche dans les moteurs de
recherche
---> mettre le maximum de mots-clefs importants.
 Le corps du document - Body
La balise <body> va contenir tout le texte et toutes
les images affichés dans la page web.

<HTML>
<HEAD>
<TITLE>cours HTML – … </TITLE>
</HEAD>
<body>
entre les "body" se situe le corps du code
</body>
</HTML>
Insérer un commentaire
Un commentaire est une balise HTML avec une
forme bien spéciale :
Code : HTML <!-- Ceci est un commentaire
-->
Vous pouvez le mettre où vous voulez au sein de
votre code source : il n'a aucun impact sur votre
page, mais vous pouvez vous en servir pour vous
aider à vous repérer dans votre code source
(surtout s'il est long).
 Le corps du document - Body

 Les paragraphes de texte

 La mise en forme de texte

 Les niveaux de titres

 Les liens hypertextes

 Les listes

 Les tableaux

 Les images et zones réactives

 Les formulaires

 Les cadres
 Body – Les paragraphes de texte
 Balise <p> </p>
- Permet la segmentation du texte en paragraphes.
- Précise où commence un paragraphe et où il se termine.
<p> signifie « Début du paragraphe »
</p> signifie « Fin du paragraphe ».
Exemple :
Sauter une ligne : <br />.
C'est une balise orpheline qui sert juste à
indiquer qu'on doit aller à la ligne Vous devez
obligatoirement la mettre à l'intérieur d'un
paragraphe.
Exemple :
 Le corps du document - Body

 Les paragraphes de texte

 La mise en forme de texte

 Les niveaux de titres

 Les liens hypertextes

 Les listes

 Les tableaux

 Les images et zones réactives

 Les formulaires

 Les cadres
 Body – La mise en forme de texte
<CENTER>...</CENTER> Centre tout élément compris dans le tag
<P align=center>...</P>Paragraphe centré
<P align=right>...</P>Paragraphe aligné à droite
<P align=left>...</P>Paragraphe aligné à
gauche
 Body – La mise en forme de texte

 Balise <b> … </b>: texte en gras


<b>Ce texte s'affichera en gras</b>
 Balise <i> … </i>: texte en italique
<i>Ce texte s'affichera en italique</i>
 Balise <u> … </u>: texte souligné
<u>Ce texte sera souligné</u>
 Balise <s> … </s>: texte barré
<s>Ce texte sera barré</s>
 Body – La mise en forme de
texte
Exemple :
 Body – Modifier la couleur du texte
 Balise <font> … </font> - attribut
<color>
exemple:
<font color="#ff0000">texte en rouge</font>

 Les couleurs peuvent être écrites de deux manières :


- En hexadécimal de type RVB et précédées d'un dièse (#)
exemples :
#ff0000 =>rouge
#00ff00 => vert
#0000ff => bleu
- Textuelles en anglais US
exemples :
red, yellow, pink.
 Body – Modifier la couleur du texte
Exemple :
 Body – Modifier la police ou la taille du
texte
 Balise <font> … </font> - attribut <face>
exemple:

<font face="Arial">texte en Arial</font>


<font face="Arial,times">Ce texte sera en Arial sinon en times</font>

 Balise <font> … </font> - attribut


<size>
exemple :
<font size="5">Ce texte sera en taille 5.</font>
- Par défaut, la valeur de l'attribut size vaut "3".
- Possible réunir les trois attributs (color, face,
size) dans la même balise <font>.
 Body – Modifier la police ou la taille du
texte
Exemple :
 Body – Modifier la police ou la taille du
texte
 Le corps du document - Body

 Les paragraphes de texte

 La mise en forme de texte

 Les niveaux de titres

 Les liens hypertextes

 Les listes

 Les tableaux

 Les images et zones réactives

 Les formulaires

 Les cadres
 Body – Les niveaux de titre

 Balise <hn> où n représente le niveau


Il existe différents niveaux de titres ( 1 à 6 ) (tous
importants)

 Attribut de la balise
<Hx align=center>...</Hx> Titre centré

<Hx align=left>...</Hx> Titre aligné à gauche

<Hx align=right>...</Hx> Titre aligné à droite


 Body – Les niveaux de titre

exemple :
 Body – Les niveaux de titre
Exercice: Réaliser la page html ci-dessous:
Solution
 Le corps du document - Body

 Les paragraphes de texte

 La mise en forme de texte

 Les niveaux de titres

 Les liens hypertextes

 Les listes

 Les tableaux

 Les images et zones réactives

 Les formulaires

 Les cadres
 Body – les liens HTML
 HTML donne la possibilité de créer des liens vers d'autres
documents :
- documents HTML
- des images
- du son
- des Vidéos……

 Le navigteur présente ce lien sous forme de mots soulignés ou


d'image encadrée que l'on appelle ancre ou lien.
 Ce lien est soit un fichier local, soit une URL

Remarque:
Il est facile de reconnaître les liens sur une page : ils sont écrits
d'une façon différente (par défaut, en bleu et soulignés) et un
curseur en forme de main apparaît lorsqu'on pointe dessus.
 Body – les liens HTML

Pour faire un lien, on utilise la balise: <a>. Il faut

cependant lui ajouter un attribut, href,


pour indiquer vers quelle page le lien doit conduire.
Par exemple, le code ci-dessous est un lien qui amène
vers le Site du ministère ,
 Body – les liens HTML

Liens vers un document complet


local :Syntaxe :

<A HREF=nom_de_fichier_local"> ancre </A>


 Deux pages situées dans un même dossier
Pour faire un lien de la page 1 vers la page 2, sans
avoir d'adresse en http://:
Si les deux fichiers sont situés dans le même dossier,
il suffit d'écrire comme cible du lien le nom du fichier
vers lequel on veut amener.
Par exemple :
<a href="page2.html">. On dit que c'est un lien
relatif .
Deux pages situées dans un même dossier
Voici le code que nous allons utiliser dans nos fichiers page1.html
 Deux pages situées dans des dossiers
différents
Imaginons que page2.html se trouve dans un sous-dossier appelé
contenu, comme à la figure suivante.

Dans ce cas de figure, le lien doit être rédigé comme


ceci :
 Résumé :
Exercice: lien hypertext

1/ Créer 3 pages web appelés respectivement sommaire, chapitre1, chapitre2.

2/ Relier les 3 pages en créant les liens hypertextes suivants :

a) La page sommaire est reliée à chapitre1 et chapitre2 à l’aide des textes chapitre1 et
chapitre2.

b) Un retour vers la page sommaire à l’aide du texte Retour

Sommaire 1/ chapitre1 2/ chapitre2

1/ chapitre1

2/ chapitre2

Retour Retour
 Un lien vers une ancre
Une ancre est une sorte de point de repère que vous pouvez
mettre dans vos pages HTML lorsqu'elles sont très longues.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise
(pour donner un nom à l'ancre) qui va alors servir de repère (pour
faire un lien vers cette ancre).
Par exemple :

Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois


l'attribut href contiendra un dièse (#) suivi du nom de l'ancre.
Exemple :
 Lien vers une ancre située dans une
autre page

Pour faire un lien qui ouvre une autre page ET qui

amène directement à une ancre située plus bas sur

cette page.

Il suffit de taper le nom de la page, suivi d'un dièse (#),

suivi du nom de l'ancre.

Par exemple :
 Body – Insertion du son
 lien hypertexte vers un fichier media :

<a href="nomFichier.extension">……</a>

exemples d’extension : .mid, .wmv, .wav, .mp3, .ram …

53
 Body – Insertion du son
 Intégrer un fichier son dans la page : on ajoute

<embed src=" nomFichier.extension ">


exemple:
<p><embed src="sprng_01.mid" width="150" height="40"
autostart="false" loop="false"></p>
Remarques:
Autostart= "true" :lancement automatique du son
"false" : lancement à volonté du son

loop "true" : le son est joué en boucle


= "false" : le son n’est joué qu’une seul fois
loop="5" le son est joué 5 fois
54 :
 Body – Insertion du son
 Intégrer un fichier son dans le fond de la page :

<embed src=" nomFichier.extension " hidden >

exemple:
<p><embed src="sprng_01.mid" autostart="true" loop="false"
hidden="true">
Musique de fond en cours de diffusion.</p>
 Body – Insertion de vidéo
 lien hypertexte vers un fichier video :

<a href=" nomFichier.extension ">……</a>


exemple:
<a href="aucland45.MPEG">Un petit film au format mpeg</a>
 Intégrer un fichier video dans la page:
<img dynsrc="aucland45.MPEG>
exemple:

<img dynsrc="nomClip.MPEG" start="fileopen">


Un petit film au format mpeg </a>
fileopen= la vidéo est affichée à l’ouverture
mouseover= la vidéo est affichée au passage de la souris
 Le corps du document - Body

 Les paragraphes de texte

 La mise en forme de texte

 Les niveaux de titres

 Les liens hypertextes

 Les listes

 Les tableaux

 Les images et zones réactives

 Les formulaires

 Les cadres
 Body – Les listes

Les listes nous permettent souvent de

mieux structurer notre texte et d'ordonner

nos informations.

Nous allons découvrir ici deux types de

listes :

 les listes non ordonnées ou listes à

puces ;
 Les listes à puce
Ce sont des listes non ordonnées (il n'y a pas de « premier » ni de « dernier »).
<UL >
<LI> élément1 </LI>
<LI> élément2 </LI>
</UL>
Exemple:
 Liste numérotée :
Ce sont des listes ordonnées.
<OL>
<LI> élément1 </LI>
<LI> élément2 </LI>
</OL>
Exemple:
Remarque:

il existe un troisième type de liste, beaucoup plus

rare : la liste de définitions. Elle fait intervenir les

balises <dl> (pour délimiter la liste), <dt> (pour

délimiter un terme) et <dd> (pour délimiter la


<DL>
définition de ce terme).
<DT> terme1 </DT>
<DD> description du terme
</DD>
<DT> terme2 </DT>
<DD> description du terme
</DD>
</DL>
 Le corps du document - Body

 Les paragraphes de texte

 La mise en forme de texte

 Les niveaux de titres

 Les liens hypertextes

 Les listes

 Les tableaux

 Les images et zones réactives

 Les formulaires

 Les cadres
 Body – Les Tableaux
Structure de base:
<TABLE> </TABLE>
indique au navigateur le début et la fin d'une table
Pour décrire le tableau, on utilise ensuite les balises :
<TR> </TR> (Table Row): Définit une ligne du tableau.
Pour ajouter une ligne au tableau.
<TD> </TD> (Table Data): Définit une série de cellules de données
(qui pourront contenir du texte, des
images, une table...).
<caption> </caption> : Définition du titre du tableau

65
 Body – Les Tableaux
 Body – Les Tableaux
Exemple:
 Body – Les Tableaux
Exemple:

Remarques
Par défaut le tableau n’a pas de bordure , le
texte est systématiquement justifié à gauche .Il
existe des paramètres qui permettent de
personnaliser le tableau.
 Body – Les Tableaux
Attributs de <table>

• border, définit l’épaisseur des traits de bordure en pixels

• width, définit la largeur du tableau soit en pixels soit en % par

rapport à la taille du cadre qui contient le tableau

• bgcolor, permet de colorer le fond du tableau suivant le codage

HTML RGB en code Hexadécimal

• cellpadding & cellspacing, permettent de définir l’espacement

soit du contenu de la cellule avec sa bordure soit entre cellules


 Body – Les Tableaux
Exemple:
 Body – Les Tableaux
 Body – Les Tableaux
exemple
:
 Body – Les Tableaux
border=5
BGCOLOR="#00FF00
BORDERCOLOR=red
"

<tr bgcolor=yellow> CELLSPACING=10 cellpadding=10

Cours
<tr bgcolor=blue>

<tr bgcolor=black>
 Body – Les Tableaux
Exercice: réaliser ce tableau
 Body – Les Tableaux
La solution :
 Body – Les Tableaux

Fusionnement de cellules d'un tableau


Il existe des cas où on a besoin d'avoir un nombre de cellules
différent dans chaque ligne. La solution magique est
le fusionnement des cellules.

On peut fusionner les cellules horizontalement ou verticalement.


Mais le plus fréquent c'est de fusionner à l'horizontale grâce à
l'attribut colspan.
L'attribut colspan
L'attribut colspan est inclus dans la balise de
colonne <td>. Il indique à celle ci combien de colonnes
il faut fusionner pour en avoir qu'une seule à la fin.
 Body – Les Tableaux

Fusionnement de cellules d'un tableau


 Body – Les Tableaux

Fusionnement de cellules d'un tableau

L'attribut rowspan
Si colspan fusionne les colonnes à
l'horizontale, rowspan quant à elle, elle les
fusionne à la verticale. Le principe est le même:
Enlevez la (les) colonnes en plus, et sur celle
qui reste mettez rowspan="le nombre de
colonnes à fusionner".
 Body – Les Tableaux

Fusionnement de cellules d'un tableau


 Body – Les Tableaux
exemple
:
 Body – Les Tableaux
exemple
:
 Body – Les Tableaux
Exercice: réaliser ce tableau
 Body – Les Tableaux
exemple
:
 Body – Les Tableaux
Exercice: réaliser ce tableau
 Body – Les Tableaux
 Le corps du document - Body

 Les paragraphes de texte

 La mise en forme de texte

 Les niveaux de titres

 Les liens hypertextes

 Les listes

 Les tableaux

 Les images

 Les formulaires

 Les cadres
 Body – Insertion d’images

Un navigateur est susceptible de lire n'importe quelle


image toutefois il est fortement conseillé d'en utiliser
certains format bien adaptés pour le web comme png,
jpg ou gif.
La taille de l'image ( en octets) doit être minimisée pour
garantir un téléchargement rapide surtout si la page
html en contient plusieurs.
Le navigateur mettra autant de temps à télécharger
l'image. Donc il est conseillé d'utiliser un logiciel de
traitement d'image avant publication.
 Body – Insertion d’images

Le JPEG
Les images au format JPEG (Joint Photographic Expert
Group) sont très répandues sur le Web. Ce format est
conçu pour
réduire le poids des photos (c'est-à-dire la taille du
fichier associé), qui peuvent comporter plus de 16
millions de couleurs
différentes. La figure suivante est une photo
enregistrée au format JPEG.
 Body – Insertion d’images
Le PNG
Le format PNG (Portable Network Graphics) est
le plus récent de tous. Ce format est adapté à la
plupart des graphiques (je serais tenté de dire «
à tout ce qui n'est pas une photo »). Le PNG a
deux gros avantages : il peut être rendu
transparent et il n'altère pas la qualité de
l'image.
 Body – Insertion d’images

Le GIF
C'est un format assez vieux, qui a été néanmoins très
utilisé Aujourd'hui, le PNG est globalement bien
meilleur que le GIF : les images sont généralement plus
légères et la transparence est de meilleure qualité. Je
vous recommande donc d'utiliser le PNG autant que
possible. Néanmoins, le GIF conserve un certain
avantage que le PNG n'a pas : il peut être animé.
 Body – Insertion d’images

Pour insérer une image à un document HTML

 Balise simple <img>

 Pour insérer une image locale

<img src="chemin de l’image" alt=" texte alternatif ">

 Pour insérer une image distante

<img src="URL" alt=" texte alternatif ">


 Body – Insertion d’images

Les images doivent se trouver obligatoirement à


l'intérieur d'un paragraphe (<p></p>).
Mais si une image illustre le texte (et n'est
pas seulement décorative), il est conseillé
de la placer au sein d'une balise <figure>.
La balise <figcaption> permet d'écrire la
légende de l'image.
 Body – Insertion d’images
 Attributs de la balise <img>
- src : donne le chemin de l'image.
- alt : affiche un texte alternatif à la place de l'image si
celle-ci ne peut pas être chargée
- align : left, right, middle, bottom, top
- width=n ou n% height=m : pour redimensionner
une image
- border=n : pour tracer un cadre autour de l'image
avec un trait de n pixels de large
oo
- vspace=n hspace=m : espace vertical entre l’image et le
texte en pixels (vspace), espace
horizontal image-texte (hspace).
 Body – Insertion d’images

Exemple

Remarque : Je place les deux images photoPC.png et insfp1.jpeg


dans un dossier
appelé par exemple Img
 Body – Insertion d’images
 Le corps du document - Body

 Les paragraphes de texte

 La mise en forme de texte

 Les niveaux de titres

 Les liens hypertextes

 Les listes

 Les tableaux

 Les images et zones réactives

 Les formulaires

 Les cadres
 Les formulaires
Un formulaire est une fiche que l'utilisateur peut remplir, ces
informations ainsi saisies sont traitées par le serveur www.
 Les formulaires

Intérêt d'un formulaire

Les formulaires interactifs permettent de faire :

 un dialogue avec l’internaute,

 la saisie de données ...


 Les formulaires

Un formulaire commence et finit par: FORM


<form action= " " method= " " > … </form>

Les attributs METHOD et ACTION sont obligatoires


 ACTION = " adresse du script qui va recevoir
les données saisies dans le formulaire
 METHOD="méthode d’envoi des données"
(GET/ POST)
 Les formulaires

forme
exemples: d'envoi

<form action="c:\cours\HTML\exple.php" method="POST">

<FORM METHOD="GET" ACTION="mailto:[email protected]">

adresse pour
l'envoi
 Les formulaires
Méthode des formulaires
GET et POST sont des méthodes d'accès
définies dans le protocole HTTP et reprises
dans la spécification HTML.

Le choix de la méthode dépend de la façon


dont les données sont reçues, de la taille et la
nature des données.
La méthode HTTP par défaut lors de la
soumission des données de formulaire est
GET.
 Les formulaires
Méthode des formulaires
- GET : passe les informations d'un formulaire par
l’intermédiaire des URL. Elles sont placées, directement
à la suite de l'adresse URL de la page appelée.
exemple:

inconvénients:
- elle rend visibles les données dans la barre d’adresse
du navigateur donc modifiable par l’internaute.

- la longueur totale est limitée à 255 caractères, ce qui rend


impossible la transmission d’un volume de données important
 Les formulaires
Méthode des formulaires

- POST: Elle envoit un en-tête et un corps de

message au serveur. Le corps est généralement

constitué des données entrées dans le champ de

formulaire par l'utilisateur.

Les données du formulaire n'apparaissent pas

dans l'URL. En conséquence, il n'est pas possible

de récupérer directement les données.


 Les formulaires

A l'intérieur de la balise FORM...

- Insertion de n'importe quel élément HTML de base:


textes, tableaux, liens, ...
- Insertion d’éléments interactifs.
Deux types :
♦ Des éléments pour faire un ou plusieurs choix
♦ Des éléments pour saisir des données
( envoyées à l'URL indiqué dans l'attribut ACTION )
 Les formulaires

A l'intérieur de la balise FORM...

Les éléments interactifs sont :

 la balise INPUT : un ensemble de boutons et de champs de


saisie à une ligne

 la balise TEXTAREA : une zone de saisie multilignes

 la balise SELECT : une liste à choix multiples


 Les formulaires
 Les formulaires

A l'intérieur de la balise FORM...

La balise INPUT :
- balise principale des formulaires

- permet de créer un bon nombre d'éléments "interactifs"

syntaxe générale:

< INPUT NAME VALUE >


TYPE
 Les formulaires
A l'intérieur de la balise FORM...
INPUT : champ de saisie
<INPUT TYPE NAME VALUE SIZE>
</INPUT>
avec
TYPE = TEXT pour faire saisir une ligne de
texte
= les caractères saisis
PASSWORD apparaissent sous forme d’ '*'

NAME = "un nom" qui identifie le champ texte


VALUE SIZE valeur par défaut de la zone de texte
MAXLENGTH largeur de la zone de texte
nombre maximal de caractères
A l'intérieur de la balise FORM...
INPUT : champ de saisie
exemple :
< input name="login" type=“text" >

<input name="pwd" type="password">


 Les formulaires
A l'intérieur de la balise FORM...
INPUT : checkbox (cases à cocher)
exemple :
c: <input name="C" type="checkbox" value="C“ checked>
c++: <input name="Cpp" type="checkbox" value="C++">
Pascal: <input name="Pascal" type="checkbox" value="Pascal">
Java: <input name="Java" type="checkbox" value="Java">
 Les formulaires
A l'intérieur de la balise FORM...
INPUT : Boutons
< INPUT NAME TYPE VALUE CHECKED > …
</INPUT>
avec TYPE = RADIO pour les boutons multiples pour les
CHECKBOX cases à cocher
SUBMIT pour envoyer le formulaire une fois
rempli
RESET pour effacer le contenu du formulaire identifie
NAME = "un nom" le bouton
VALUE= "valeur" donnée au bouton lorsqu'il est
selectionné
CHECKED signale un bouton par défaut (RADIO)
ou une case cochée avant saisie
(CHECKBOX)
 Les formulaires
A l'intérieur de la balise FORM...
INPUT : Bouton-Radio (Zones d’option)
Pour un choix et un seul parmi plusieurs possibilités
exemple :
<INPUT TYPE=RADIO NAME=SECT1 VALUE="UNIV" CHECKED>
Universitaire

<INPUT TYPE=RADIO NAME=SECT1 VALUE="CNRS"> Secondaire


<INPUT TYPE=RADIO NAME=SECT1 VALUE="INSE"> Primaire
<INPUT TYPE=RADIO NAME=SECT1 VALUE="PUBL"> Autre

le groupe est identifié


par le même "name"
qui les lie
 Les formulaires

A l'intérieur de la balise FORM...


INPUT : submit et reset
- reset bouton de remise à zéro
: rétabli l'ensemble des éléments du
formulaire à leurs valeurs par
défaut
- submit : bouton de
soumission
permet l'envoi du formulaire

- Le texte des boutons peut être précisé


grâce à l'attribut value
 Les formulaires

A l'intérieur de la balise
FORM...
INPUT : submit et reset
exemple :

<input type="submit" value="envoyer">

<input type="reset" value="annuler">


 Les formulaires

A l'intérieur de la balise FORM...


TEXTAREA
La balise TEXTAREA permet de définir une zone de saisie
plus vaste par rapport à la simple ligne de saisie que
propose la balise INPUT
 Les formulaires
A l'intérieur de la balise FORM...
TEXTAREA

exemple

<textarea name="adresse“ type="text"></


textarea>
 Les formulaires

A l'intérieur de la balise FORM...


TEXTAREA
Attributs rows et cols:
pour modifier la taille de textarea

<textarea name="ameliorer" rows=" " cols=" "> </textarea>

rows=“10” cols=“50” rows=“20” cols=“25”


 Les formulaires

A l'intérieur de la balise FORM...


SELECT :
permet de créer une liste déroulante d'éléments (précisés par
des balises OPTION à l'intérieur de celle-ci).
Les attributs de cette balise sont :
-name: représente le nom associé au champ, c'est le nom qui
permettra d'identifier le champ dans la paire nom/valeur
-disabled: permet de créer une liste désactivée, c'est-à-dire affichée
en grisée
-size: représente le nombre de lignes dans la liste (cette valeur peut
être plus grande que le nombre d'éléments effectifs dans la liste)
- multiple: marque la possibilité pour l'utilisateur de choisir plusieurs
champs dans la liste
A l'intérieur de la balise FORM...
SELECT :
exemple :
Votre opinion <SELECT
NAME=OPINION1>
<OPTION>Très satisfait
<OPTION SELECTED>Satisfait
<OPTION>Indifférent
<OPTION>C'est nul !!
</SELECT>
 Le corps du document - Body

 Les paragraphes de texte

 La mise en forme de texte

 Les niveaux de titres

 Les liens hypertextes

 Les listes

 Les tableaux

 Les images et zones réactives

 Les formulaires

 Les cadres
 Les frames

Définition et structure de base


Les documents multi-cadres (frames) donnent la possibilité de
diviser la fenêtre du navigateur en plusieurs panneaux ou
cadres indépendants, contenant chacun un document HTML
différent.
 Les frames

Les cadres sont délimités par la balise :


<FRAMESET> </FRAMESET> qui va
remplacer <BODY>
Pour définir ensuite les cadres, on utilise les
balises FRAME disposant chacune d’un
paramètre SRC pour indiquer l'adresse (URL)
du document HTML à afficher dans ce cadre.
 Les frames

2 cadres verticaux
 Les frames
2 cadres horizontaux
 Les frames
2 cadres horizontaux et un vertical
 Les frames
 Les frames
 Les frames

Comment éviter les erreurs avec les


navigateurs non compatibles ?

On utilisera les balises <NOFRAMES> et


</NOFRAMES> permettant de spécifier un
texte HTML à afficher en cas de navigateur ne
permettant pas d'afficher les frames. Le texte
entre les balises <NOFRAMES> et
</NOFRAMES> doit donc contenir les balises
<BODY> ... </BODY>.
 Les frames
 Les frames

Désigner un cadre avec un lien hypertexte

Pour faire afficher des liens dans un des cadres, il


suffit d'utiliser l'attribut target dans la balise <A
HREF ..> pour spécifier le nom du cadre qui a été
spécifié dans la
balise <FRAME> par l'attribut NAME.

Par exemple:

<A HREF="page.htm" TARGET="gauche">

Vous aimerez peut-être aussi