Le langage HTML

Enseignante : Nada NEILI

Chapitre 1 : Le
langage HTML
World Wide Web-Définition
World Wide Web = Web = WWW

 Système contenant des documents liés entre eux par des

hyperliens
permettant de passer automatiquement d’un document à
l’autre.

 ensemble de données disponibles sur les serveurs

accessibles
par Internet

pouvant être visualisées et/ou utilisées avec un navigateur

Web
regroupées sous forme de pages et de sites
World Wide Web-Définition
Web ≠ Internet

 Le web n'est qu'un des services accessibles via Internet

Organisation générale du Web
Organisation générale du Web

 Le Web utilise Architecture client-serveur.

 Le protocole d’échange (requête-réponse) est HTTP.

Architecture client-serveur
Architecture client-serveur
Le client = navigateur

 Demande au serveur des informations

 dialogue avec le(s) serveurs

 Affiche des pages pour l’utilisateur

 Il envoie des requêtes au serveur, il attend et reçoit les

réponses du serveur.
Architecture client-serveur
Le serveur (Apache, . . .)

 reçoit en permanence les requêtes des clients

 Le serveur peut servir de nombreux clients simultanément
 L'accès à un serveur web se fait grâce à un URL
 renvoie les documents correspondants
 ce sont des ordinateurs puissants qui stockent et délivrent
des sites web aux internautes, c'est-à-dire aux clients. La
plupart des internautes n'ont jamais vu un serveur de leur
vie. Pourtant, les serveurs sont indispensables au bon
fonctionnement du Web.
Architecture client-serveur
Fonctionnement

 le client envoie une requête au serveur

 le serveur prend en compte cette requête

 il la traite,

 enfin, il envoie le résultat de ce traitement au client qui

avait envoyé la requête
Architecture client-serveur

 Le client et le serveur doivent bien sûr utiliser le même

protocole de communication.

En résumé :

Le client pose une question (ou donne un ordre)… et le

serveur
répond à la question (ou obéit).
 HTTP : HyperText Transfer
Protocol
 HTTP = protocole du Web

 HTTP = protocole d’échange d’informations pour le Web

 Permet à un client Web d’indiquer quelle page il veut obtenir, et

au
serveur Web de lui répondre en lui donnant cette page

 Le but du protocole HTTP est de permettre un transfert de fichiers

(essentiellement au format HTML) localisés grâce à une chaîne de
caractères appelée URL entre un navigateur (le client) et un serveur
Web
 URL
 Le Web permet d’accéder à un ensemble de ressources.

 Une ressource est désignée sur le Web par une adresse

web

 adresse web= URL

 URL : Uniform Resource Locator

 Une URL pointe sur une ressource.

 Le mécanisme de localisation peut faire appel au protocole

DNS
 URL

 Un URL est le moyen de nommer un objet dans le monde

WWW
Toutes les adresses que vous voyez en haut de votre
navigateur,
comme [Link] sont des URL.

Imaginons que votre site s'appelle [Link] et que vous

avez une
page HTML intitulée [Link]. Pour accéder à cette page,
vous
devez aller à l'URL suivante :

[Link]
Site statique ou dynamique
Site web statique =site vitrine

 Un site statique, comme son nom semble l'indiquer, est composé de

pages statiques.

 ce sont des sites réalisés uniquement à l'aide des langages HTML et

CSS.

 Le contenu des pages est fixe: Leurs contenus ne changent ni en

fonction du demandeur ni en fonction d’autres paramètres
éventuellement inclus dans la requête adressée au serveur. Toujours
le même résultat.
Site statique ou dynamique
Site web statique =site vitrine

les pages du site ne sont pas modifiables par des utilisateurs.

Le site est dit statique car les pages HTML qui le composent
sont
toujours identiques entre deux visites sans mise à jour.

Ils fonctionnent très bien mais leur contenu ne peut pas être
mis à
jour automatiquement : il faut que le propriétaire du site (le
webmaster) modifie le code source pour y ajouter des
nouveautés.
Site statique ou dynamique
Site web statique =site vitrine

Pages statiques: n’est pas une page sans mouvements ou

sans
animations, mais une page visible telle qu'elle a été conçue.
Ces pages peuvent présenter toute forme de
contenu, animations
flash, images, musique, vidéo etc... mais elles sont toujours
présentées
de la même façon. Elles ne changent pas et c'est en ce sens
qu'elles
sont statiques.
Site statique ou dynamique
Site web dynamique

 plus complexes, ils utilisent d'autres langages en plus de

HTML et CSS, tels que PHP et MySQL.

 Les pages du site qui le compose peuvent être modifiables

par les
Visiteurs (sans l'intervention du webmaster)

 Entre deux visites sur un même site, le contenu de la page

peut être
différents sans action de l'administrateur du site Internet.
Site statique ou dynamique
Site web dynamique

Les grandes applications de ce type de site sont : les forums,

les
Wiki(Wikipedia étant le plus grand représentant du genre) et
tous les
sites communautaires (Facebook, Twitter, etc.).
Site statique ou dynamique
Transferts avec un site statique

1. le client demande au serveur à voir une page web ;

2. le serveur lui répond en lui envoyant la page réclamée.
La communication est donc plutôt basique :
3. « Bonjour, je suis le client, je voudrais voir cette page web. »
4. « Tiens, voilà la page que tu m'as demandée. »

Sur un site statique, il ne se passe rien d'autre. Le serveur

stocke des
pages web et les envoie aux clients qui les demandent sans les
modifier.
Site statique ou dynamique
Transferts avec un site statique
Site statique ou dynamique
Cas d'un site dynamique

Lorsque le site est dynamique, il y a une étape intermédiaire : la

page est générée .
1. Le client demande au serveur à voir une page web ;
2. le serveur prépare la page spécialement pour le client ;
3. le serveur lui envoie la page qu'il vient de générer.

La page web est générée à chaque fois qu'un client la réclame. C'est
précisément ce qui rend les sites dynamiques vivants : le contenu
d'une même page peut changer d'un instant à l'autre.
C'est comme cela que certains sites parviennent à afficher par
exemple
votre pseudonyme sur toutes les pages.
Site statique ou dynamique
Cas d'un site dynamique
 Les langages du Web
Pour un site statique : HTML et CSS

De nombreux langages ont été créés pour produire des sites

web.
Deux d'entre eux constituent une base incontournable pour
tous les
webmasters.

 HTML : c'est le langage à la base des sites web.

 CSS : c'est le langage de mise en forme des sites web.

 Les langages du Web
Pour un site dynamique : ajoutez PHP et MySQL

 PHP : c'est un langage que seuls les serveurs comprennent et

qui permet de rendre votre site dynamique.

 MySQL : c'est ce qu'on appelle un SGBD (Système de Gestion de

Base de Données). Pour faire simple, son rôle est d'enregistrer des
données de manière organisée afin de vous aider à les retrouver
Facilement plus tard. C'est grâce à MySQL que vous pourrez
enregistrer la liste des membres de votre site, les messages postés
sur
le forum, etc. Le langage qui permet de communiquer avec la base
de
données s'appelle le SQL.
 Les pages web
 Une ressource du World Wide Web

 Créée par des webmasters à l’aide des langages

HTML/XHTML
et CSS .

 Possède une adresse Web (URL).

 Peut contenir du texte, des images, des tableaux, des

formulaires
et autres éléments multimédias.

 Visualisée par les internautes grâce à des navigateurs Web

 Les pages web

 stocké dans un fichier *.html ou *.htm

 permet d’accéder à d’autres pages en suivant des liens

 Site web

 Site web = ensemble de pages web .

 Site Web: est un ensemble de pages web liées (lien

hypertexte) entre
elles et mises en ligne à une adresse web.
 Problème de lenteur de
chargement
 Le serveur d'hébergement

 les feuilles de styles CSS non optimisées et non regroupées

dans des fichiers externes

 du code JavaScript non optimisé et non regroupé dans des

fichiers externes

 des animations Flash de nombreuses photos

 Vos premiers outils
Vous avez besoin:

1. d'un éditeur de texte

2. d'un navigateur
 Editeur de texte
Un éditeur de texte tout simple comme par exemple le Bloc-
notes ou
Notepad de Windows ou tout autre équivalent dans votre
système
d'exploitation
 Le navigateur
 Un navigateur (en anglais "browser") est donc un logiciel
qui interprète à l'écran les commandes HTML contenues
dans un document accessible sur le WWW.
 Le navigateur web est un programme qui permet d'afficher
des sites web.
 Il existe de nombreux navigateurs web différents : Google
Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera…
 Tester continuellement son site sur au moins deux
navigateurs à la fois pendant sa création, afin d’être sûr
que tous vos visiteurs aient un résultat correct.
 hébergeur Web

Entreprise de services informatiques hébergeant (mettant en

ligne) sur
ses serveurs Web les ressources constituant les sites Web de
ses
clients.
Exemple :OVH
 HTML, c’est quoi ?

« Un langage pour écrire des pages web… »

 Généralités sur le langage
HTML
 HTML: Hyper Text Markup Langage (ou langage hypertexte
et à balises ) .

 contenu statique

 C'est un langage à balises (tag).

 HTML n'est pas un langage de programmation !

 Ce n'est qu'un langage de description de documents

 Les versions de HTML
Les versions de HTML :

HTML 1, HTML 2, HTML 3, HTML 4, HTML 5

Généralités sur les fichiers
HTML
 Un fichier HTML n'est pas compilé (ce n'est pas un
programme)

 Un fichier HTML est un fichier texte simple, parfaitement

lisible, respectant un ensemble de convention d'écriture

 Un fichier HTML peut être écrit à l'aide de n'importe quel

éditeur de texte simple (des éditeurs plus évolués existent
également)

 Il n'est pas indispensable de posséder un serveur HTTP

pour écrire des pages HTML.
 Généralités sur les fichiers
HTML
 Lorsque vous consultez un site web, les fichiers HTML
(extension .htm ou .html) sont envoyés à votre navigateur
et le code html est interprété sur VOTRE machine par
VOTRE navigateur
 Les balises

Balise = tag

 Les balises HTML sont les éléments de base du codage HTML d’une
page web.

 Les balises peuvent être écrites en majuscules ou en minuscules.

 Les balises de la forme </balise> sont des balises de fermeture.

Exemple de balise :

<p> Ceci est un paragraphe</p>

 Les attributs

 Les attributs permettent d'apporter certaines précisions à des

balises.

 La syntaxe utilisée est la suivante:

<balise attribut1="valeur1" attribut2="valeur2" attribut3="vale

ur3">blabla</balise>

 Exemple:

<p align="right">Ceci est un paragraphe aligné à droite.</p>

un document HTML minimal
<html>
<head>
<title>Document Html minimum</title>
</head>
<body>
<p>Bonjour tout le monde!</p>
</body>
</html>

 En-tête (partie <head>)

 Contenu (partie <body>)

un document HTML minimal
 <HTML> Ceci est le début d'un document de type HTML.
 </HTML> Ceci est la fin d'un document de type HTML.
 <HEAD> Ceci est le début de la zone d'en-tête
 </HEAD> Ceci est la fin de la zone d'en-tête.
 <TITLE> Ceci est le début du titre de la page.
 </TITLE> Ceci est la fin du titre de la page.
 <BODY> Ceci est le début du document proprement dit.
 </ BODY> Ceci est la fin du document proprement dit.
 Commentaire HTML

<!-- Ceci est un commentaire --!>

Les commentaires peuvent être placés n'importe où dans un

document HTML à condition de ne pas être imbriqués.
Ils sont placés entre les chaînes de caractère <!-- et -->.
 L'entête

Élément title

Le contenu de l'élément title est le titre du document HTML :

ce titre
est affiché dans la barre de titre du navigateur.
<title>Titre de la page</title>

<title>Le titre </title><title>Le titre </title>

<title>Le titre </title>
 Les caractères spéciaux

Les navigateurs ne reconnaissent pas les caractères

spéciaux.
Heureusement chaque caractère possède une abréviation
(ENTITY)
permettant de le coder.

Exemple : < &lt;

> &gt;

Espace &nbsp;
 Les attributs de <body>
La balise body accepte plusieurs attributs:

 text : permet de changer la couleur du texte.

 bgcolor : permet de changer la couleur du fond de la page.

 background : permet de spécifier une image de fond.

Exemple :

<body bgcolor="#0066CC" text="#3333FF">

 Titre et 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>.
 Paragraphes

<p>Ceci est un paragraphe</p>

Attributs de la balise <p> :

Attribut Valeur(s)
left (par défaut)
right
align
center
justify
 Le retour à la ligne

Pour mettre fin à une ligne, il faut utiliser la balise <br> qui
vous
permet de revenir à la ligne.
 Les lignes horizontales

 Elles permettent de séparer vos paragraphes avec une ligne

horizontale. Ceci est très pratique pour séparer différentes
idées ou
thèmes d'un document .

 La balise qui permet de faire cela est <hr> , elle crée un

saut de
paragraphe au dessus et en dessous d'elle.

Exemples :
<hr align="center“ width="90%">
<hr align="right" width="120" size="5“ color="#0000FF">
 Les lignes horizontales

Les attributs de la balise <hr>

 align : peut être égal à left, center, right.

 width : c'est la longueur de la ligne horizontale. Elle peut

être en
pixels ou en pourcentage, dans ce cas il faut ajouter le signe %.

 size : cet attribut définit la hauteur de la ligne en pixels .

C’est l’ épaisseur du trait

 color : précise la couleur de la ligne. Un valeur RGB

hexadécimale ou un nom de couleur standard peut être
utilisé.
 Modifier la police du texte

 Pour modifier la police du texte on utilise l'attribut face de

la
balise <font>

Exemples :

<font face="verdana"> Ce texte sera en verdana </font>

 Modifier la couleur du texte

 Pour modifier la couleur du texte on utilise

l'attribut color de la
balise <font>

Exemple :

<font color="#ff0000"> Ce texte sera en rouge </font>

 Modifier la couleur du texte

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.
 Modifier la taille du texte

 Pour modifier la taille du texte on utilise l'attribut size de la

balise <font>

 Par défaut, la valeur de l'attribut size vaut "3".

 lesvaleurs possibles sont les entiers de "1" à "7".

Exemple :

<font size="5">Ce texte sera en taille 5.</font>

 Autres balises

 <big> taille supérieure à la taille courante </big>

 <small> taille inférieure à la taille courante</small>

 <i> texte en italique </i>

 <em> texte en italique </em>

 <s> texte barré </s>

 < strike > texte barré </strike>

 Autres balises

 <b> texte en gras </b>

 <strong> texte en gras </strong>

 <u> texte souligné </u>

 <q> citation courte </q>

 ^exposant

 _indice

 Autres balises

 <tt> Affiche le texte comme tapé à la machine à écrire

</tt>

 <center>texte centré </center>

 Hypertexte

Hypertexte = lien

 Hypertexte : quand on clique sur un mot, cette action vous

conduit à un autre texte .
 Les liens - H.T.M.L

Html est un langage hypertexte (et hyper graphique) qui

vous permet
en cliquant sur un mot , généralement souligné (ou une
image) de
vous transporter

 vers un autre endroit du document = Un ancre

 vers un autre fichier Html situé sur votre ordinateur.

 vers un autre ordinateur situé sur le Web.

 Les liens - H.T.M.L
<a href="URL ou adresse »> Lien par défaut en bleu et
soulignés </a>

 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 enforme de main apparaît
lorsqu'on pointe dessus.

 L’attribut, href, pour indiquer vers quelle page le lien doit

conduire.
 Les liens - H.T.M.L.
Les principaux attributs de la balise a :

Propriétés Définition Valeurs

href URL du document cible ouvert lors du clic URL
sur le lien

target _top :ouvre le lien dans la fenêtre _top

principale du navigateur _self
_self :ouvre le lien dans la fenêtre _blank
courante _parent
_blank :ouvre le lien dans une nouvelle
fenêtre sans nom
_parent :ouvre le lien dans la frame parent

title Texte affiché au survol du lien Texte

 Un lien vers un autre site
Exemple:

<a href="[Link]

 Le lien que nous venons de voir est appelé lien absolu car
on
indique l'adresse complète.
 Un lien vers une autre page de son site

 Nous venons d'apprendre à créer des liens vers des sites

existants.
Mais je suis sûr que vous aimeriez faire des liens entre les
différentes
pages de votre site, non ?
 Un lien vers une autre page de son site

Deux pages situées dans un même dossier

On a 2 pages web : [Link] et [Link]

Si ces 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="[Link]">.

On dit que c'est un lien relatif.

 Un lien vers une autre page de son site

Deux pages situées dans un même dossier

Voici le code que nous allons utiliser dans le fichier

[Link] pour
accéder à la page [Link]

<p> Souhaitez-vous consulter <a href="[Link]">la

page 2</a>
</p>
Un lien vers une autre page
de son site
Deux pages situées dans des dossiers différents

Imaginons que [Link] se trouve dans un sous-dossier

appelé contenu, comme à la figure suivante.
 Un lien vers une autre page de son site

Deux pages situées dans des dossiers différents

Voici le code que nous allons utiliser dans le fichier

[Link] pour
accéder à la page [Link]

<p> Pour consulter <a href="contenu/[Link]">la page

2</a>
</p>
 Un lien vers une autre page de son site

Deux pages situées dans des dossiers différents

Si votre fichier cible est placé dans un dossier qui se trouve «

plus haut
» dans l'arborescence, il faut écrire deux points comme ceci :

<a href="../[Link]">
Un lien vers une autre page de son site
 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.

En effet, il peut alors être utile de faire un lien amenant plus bas dans
la même page pour que le visiteur puisse sauter directement à la
partie qui l'intéresse.

Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui
va alors servir de repère.

Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira

ensuite pour faire un lien vers cette ancre.
 Un lien vers une ancre
Exemple :

<h2 id="mon-ancre">Titre</h2>

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.

<a href="#mon-ancre">Aller vers l'ancre</a>

Lien vers une ancre située dans une autre page

L'idée, c'est de faire un lien qui ouvre une autre page ET qui
amène
directement à une ancre .

En pratique : il suffit de taper le nom de la page, suivi d'un

dièse (#),
suivi du nom de l'ancre.

Par exemple : <a href=« [Link]#ancre">

 Insertion d'une image

Avec la balise <img />

La balise doit être accompagnée de deux attributs

obligatoires :

 src : il permet d'indiquer où se trouve l'image que

l'on veut insérer. Vous pouvez soit mettre un chemin absolu
,soit mettre le chemin en relatif

 alt : cela signifie « texte alternatif ». On

doit toujours indiquer un texte alternatif à l'image, c'est-à-
dire un court texte qui décrit ce que contient l'image. Ce
texte sera affiché à la place de l'image si celle-ci ne peut
pas être téléchargée
 Insertion d'une image

Ajouter une infobulle

L'attribut permettant d'afficher une bulle d'aide est le même

que pour
les liens : il s'agit de title. Cet attribut est facultatif
(contrairement
à src).
Exemple :

<img src="[Link]" alt=« Texte alternative" title=« Bulle

aide" />
 Les listes HTML
Le langage HTML définit trois types de listes :

 La liste ordonnée

 La liste non ordonnée

 La liste de définition
 Liste non ordonnée

les listes non ordonnées ou listes à puces

 <ul></ul> délimite toute la liste

 <li></li> délimite un élément de la liste (une puce).

<ul>

<li> article 1 </li>

<li> article 2 </li>

</ul>
 Liste non ordonnée

L’attribut TYPE (pour les listes non ordonnées)

Attribut Valeur Effet

circle puce circulaire
Type
square puce carrée
disc puce en disque
 Liste ordonnée

il faut remplacer <ul></ul> par <ol></ol>.

<ol>

<li> article 1 </li>

<li> article 2 </li>

</ol>
 Liste ordonnée
L’attribut TYPE (pour les listes ordonnées)

Attribut Valeur Effet

1 numérotation chiffrée (par défaut)
A numérotation en capitales
Type a numérotation en bas de casse
I numérotation en chiffres romains (I, II,
III, IV ...)
i numérotation en chiffres romains en
bas de casse
 Liste de définition

<dl>

<dt>article 1</dt>
<dd>définition 1</dd>

<dt>article 2</dt>
<dd>définition 2</dd>

</dl>
 Les tableaux

 <table> </table> : C'est cette balise qui permet d'indiquer

le début et la fin d'un tableau.

 <tr> </tr> : indique le début et la fin d'une ligne du

tableau

 <td> </td> : indique le début et la fin du contenu d'une

cellule.

 En HTML, un tableau se construit ligne par ligne. Dans

chaque ligne (<tr>), on indique le contenu des différentes
cellules (<td>).
 Les tableaux
Par exemple, si je veux faire un tableau à deux lignes, avec
trois
cellules par ligne (donc trois colonnes), je devrai taper ceci :
<table>
<tr>
<td>ligne 1 cellule 1 </td>
<td>ligne 1 cellule 2 </td>
<td>ligne 1 cellule 3 </td>
</tr>
<tr>
<td>ligne 2 cellule 1 </td>
<td>ligne 2 cellule 2</td>
<td>ligne 2 cellule 3</td>
</tr>
</table>
 Les tableaux
La ligne d'en-tête

La ligne d'en-tête se crée avec un <tr> comme on l'a fait

jusqu'ici, mais
les cellules qu'elle contient sont, cette fois, encadrées par
des
balises <th> et non pas <td> !
 Les tableaux
<table>
<tr>
<th>en-tête cellule 1 </th>
<th>en-tête cellule 2</th>
<th>en-tête cellule 3</th>
</tr>
<tr>
<td>ligne 1 cellule 1 </td>
<td>ligne 1 cellule 2 </td>
<td>ligne 1 cellule 3 </td>
</tr>
<tr>
<td>ligne 2 cellule 1 </td>
<td>ligne 2 cellule 2</td>
<td>ligne 2 cellule 3</td>
</tr>
</table>
 Les tableaux
Taille du tableau et des cellules

Par défaut : le navigateur calcul de manière automatique la

taille du
tableau selon la loi du meilleur est le minimum. La taille du
tableau
sera d'autant plus grande que celle des cellules le sont.

On peut tout de même forcer le navigateur à donner telle ou

telle taille
au tableau. Cette taille est exprimée au choix en pixel ou en
pourcentage de l'espace libre dans la fenêtre. Vous pouvez
donc
spécifier de manière précise la largueur : WIDTH=x et la
hauteur
 Les tableaux
Taille du tableau et des cellules

Exemples :

<table border width=100 height=100>

<tr><td>Cellule 1</td></tr>
<tr><td>Cellule 2</td></tr>
</table>
********************************************
<table border width=40%>
<tr><td>Cellule 1</td></tr>
<tr><td>Cellule 2</td></tr>
</table>
 Les tableaux
Taille des cellules

De la même manière que l'on peut fixer la taille d'un tableau, on

peut
en faire autant de chaque lignes et colonnes, sachant que si le
tableau
lui-même n'a pas de dimensions fixées, le navigateur calculera
automatiquement sa taille en fonction des cellules. Si on spécifie la
hauteur d'une cellule, toutes les autres cellules de la même ligne
auront la même hauteur. Si on spécifie la largeur d'une cellule,
toutes
les autres cellules de la même colonne auront la même largueur.
 Les tableaux
Taille des cellules

Exemple:

<table border>

<tr><td>Cellule</td>
<td>Cellule</td>
</tr>

<tr><td WIDTH=60 HEIGHT=150>cellule de 60x150 pixels</td>

<td> </td>
</tr>

</table>
 Les tableaux
Alignement du tableau

On peut aligner le tableau horizontalement grâce à l’attribut

ALIGN
qui peut avoir pour valeur: LEFT, MIDDLE et RIGHT qui ont
pour
effets respectifs d'aligner le tableau à gauche, au milieu ou à
droite
dans la page, ce premier étant l'alignement par défaut.

Exemple :

<table border align="left">

<tr><td>Cellule</td></tr>
</table>
 Les tableaux
Alignement des cellules

En plus d'aligner le tableau au sein de la page, il nous est offert de

pouvoir aligner les données à l'intérieur des cellules grâce aux
attributs ALIGN pour l'alignement horizontal et VALIGN pour la
verticale.

Les valeurs de ALIGN : LEFT (aligné à gauche, par

défaut), CENTER (centré horizontalement) et RIGHT (aligné à
droite).

Les valeurs de VALIGN : TOP (aligné en haut), MIDDLE (centré

verticalement, par défaut), BOTTOM (aligné en bas) et
BASELINE (basé sur la ligne) .
 Les tableaux
Alignement des cellules

Exemple :

<table border>
<tr>
<td>alignement par défaut</td>
<td valign="bottom" height="300">aligné en bas</td>
</tr>
</table>
 Les tableaux
Bordures du tableau

Dès le début de cette page, nous n'avons utiliser que des exemples ou
les tableaux avaient une bordure définie parl'attribut BORDER auquel
on ne donna aucune valeur (par défaut, c'est la valeur 1 qui lui est
donné).

Il est tout à fait envisageable de ne pas mettre de bordure à un tableau

en ne spécifiant pas l'attribut BORDER ou en lui donnant la valeur
zéro. On peut aussi préférer une bordure plus grosse d'une épaisseur
exprimée en pixels selon la syntaxe : BORDER=d. A noter que la
bordure interne aux cellules n'est pas modifiable.
 Les tableaux
Bordures du tableau

Exemple :

<table border=20>
<tr><td>cellule</td></tr>
</table>
 Les tableaux
Espacement entre cellules

on peut espacer les cellules grâce à l'attribut CELLSPACING=n

dont
la valeur n définit l'espacement en pixels entre chaque cellules
d'un
tableau. Par défaut, n=2.

Exemples :

<table border=2 cellspacing=20>

<tr><td>cellule</td></tr>
<tr><td>cellule</td></tr>
</table>
 Les tableaux
Marges internes aux cellules

On peut également spécifier des marges à l'intérieur des cellules

afin
d'espacer les données du bord des cellules grâce à
l'attribut CELLPADDING=q dont la valeur q est exprimé en pixels.
Par défauts, q=1.

Exemple:
<table border=2 cellpadding=10>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
</table>
 Les tableaux
Fusionner lignes et colonnes.

Pour pouvoir fusionner des cellules au niveau d'une ligne ou

d'une
colonne ou même les deux grâce aux attributs
respectifs COLSPAN=x
Et ROWSPAN=y où x et y représentent le nombre de cellules
à
fusionner sur l'axe des lignes ou des colonnes. Ces attributs
sont
valables pour les balises <TD> et <TH>.
 Les tableaux
Fusionner lignes et colonnes

Exemple:

<table border>
<tr><td rowspan=2>C1</td><td>C2</td></tr>
<tr><td>C3</td></tr>
</table>
 Les tableaux
Couleur et image de fond

Il est également permis de mettre une couleur de fond à un

tableau ou à une cellule grâce à l'attribut BGCOLOR dont la
valeur est soit le code hexadécimal correspondant, soit
l'identifiant anglophone.
Exemple
<table border>
<tr><td bgcolor="yellow">C1</td><td
bgcolor="white">C2</td></tr>

<tr><td bgcolor="green">C3</td><td
bgcolor="pink">C4</td></tr>
</table>
 Les formulaires
La balise principale du formulaire : <form> </form>.

Les attribut de la balise <form> :

 ACTION : indique l'adresse d'envoi

 METHOD : Cet attribut indique par quel moyen les

données vont être envoyées

 NAME
 Les formulaires
L'attribut « method »

L'attribut "method" vous offre le choix entre

 get
 post.

La différence entre ces deux méthodes repose sur la façon

dont les
données seront transmises au serveur.
 Les formulaires
L'attribut « method »

method="get" :

 C’est la méthode par défaut

 C'est une méthode en général assez peu adaptée car elle

est limitée à 255 caractères.

 Les informations seront envoyées dans l'adresse de la page

([Link] : L’ envoi des données est codé dans l'URL.

 Les formulaires
method=« post »

method="post" : c'est la méthode la plus utilisée pour les

formulaires
car elle permet d'envoyer un grand nombre d'informations.
Les
données saisies dans le formulaire ne transitent pas par la
barre
d'adresse.
 Les formulaires
L’attribut action

action : c'est l'adresse de la page qui va traiter les

informations .Cette
page se chargera de vous envoyer un e-mail avec le message
si c'est ce
que vous voulez, ou bien d'enregistrer le message avec tous
les autres
dans une base de données.

Cela ne peut pas se faire en HTML et CSS, on utilisera en

général un
autre langage dont vous avez peut-être entendu parler : PHP.
 Les formulaires
Exemple :

<form method="post" action="[Link]">

<p>Texte à l'intérieur du formulaire</p>
</form>

Pour le moment, on ne s’intéresse pas ce qu'il se passe à

l'intérieur de
la page [Link] .
 Les formulaires
Zone de texte monoligne

Pour insérer une zone de texte dans une ligne, on va utiliser la

balise <input /> avec l’attribut type =«text »

Pour donner un nom à un élément de formulaire, on utilise

l'attribut name . name=“Nom” : Ce nom n'apparaît pas sur la
page
mais il vous sera indispensable par la suite. En effet, cela vous
permettra (en PHP ) de reconnaître d'où viennent les
informations

Exemple : <input type="text" name=“Nom”/>

 Les formulaires
Zone de texte monoligne

 On peut agrandir le champ avec size.

 On peut limiter le nombre de caractères que l'on peut saisir

avec maxlength.

 On peut pré-remplir le champ avec une valeur par défaut à

l'aide
de value.
 Les formulaires
La balise <input>

La balise <INPUT> n'a pas de balise de fin.

Type=« password »

il s'agit d'un champ de saisie, dans lequel les caractères

saisis
apparaissent sous forme d'astérisques afin de camoufler la
saisie de
l'utilisateur

<input type="password" name="mot de passe"/>

 Les formulaires
La balise <input>

type=« file »

il s'agit d'un champ permettant à l'utilisateur de préciser

l'emplacement d'un fichier qui sera envoyé avec le
formulaire. Il faut
dans ce cas préciser le type de données pouvant être
envoyées
grâce à l'attribut ACCEPT de la balise FORM

<input type="file" accept="application/pdf"/>

 Les formulaires
La balise <input>

type="checkbox"

il s'agit de cases à cocher pouvant admettre deux états:

checked (coché) et unchecked (non coché).

<input type="checkbox" name="checkbox" />

 Les formulaires
La balise <input>

type="radio"

radio: il s'agit d'un bouton permettant un choix parmi

plusieurs
proposés (l'ensemble des boutons radios devant porter le
même
attribut name.

<input type="radio" name="nom" />

<input type="radio" name="nom" />
<input type="radio" name="nom" />
 Les formulaires
La balise <input>

type=« color »

Ce champ permet de saisir une couleur : <input type="color"

/>
 Les formulaires
La balise <input>

Type=« date »

<input type="date" />

 Les formulaires
La balise <input>

type=« number »

Ce champ permet de saisir un nombre entier

<input type="number" />

 Les formulaires
Le bouton Submit

Le bouton Submit a la tâche spécifique de transmettre toutes

les
informations contenues dans le formulaire à l'URL désignée
dans les
attributs ACTION du tag <FORM>.

la syntaxe Html est :

<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE="texte du
bouton">
</FORM>
 Les formulaires
Le bouton Reset

Le bouton reset remet les valeurs des champs du formulaire à

leur
valeur par défaut.

la syntaxe Html est :

<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE="texte du
bouton">
</FORM>
 Les formulaires
Zones de saisie multilignes

Les zones de saisie multilignes se réalisent à l’aide de la

balise
<textarea> et se terminent par </textarea>.

Les attributs acceptés sont au nombre de deux :

 cols : nombre de colonnes

 rows : nombre de lignes

 Les formulaires
Zones de saisie multilignes

Exemple :

<form action=“URL” method=post>

Votre opinion :<textarea name=“opinion” cols=15 rows=20>
</form>
 Les formulaires
Liste déroulante

La balise <SELECT></SELECT> indique au browser l'usage

d'une
liste déroulante. Les éléments de la liste sont introduits par la
balise
<OPTION> ... (</OPTION> facultatif)

L'attribut size="x" de la balise <SELECT> détermine le

nombre
d'éléments de liste affiché dans la boite d'entrée. En fait,
size="1« est
optionnel car "1" est la valeur par défaut.
 Les formulaires
Liste déroulante

Exemple :

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