Cours HTML All

Developpement Web
HTML -CSS
Juste AHOUANDJINOU
(Ingénieur Architecte Logiciel)
Ing Informatique
ESGIS -2013
Initiation à HTML
Références
« HTML 4 pour les nuls » par E. Tittel, N. Pitts et C.

Valentine
« HTML : précis et concis » par J. Niederst et J. Guérin au
édition O’Reilly
« Introduction à HTML et CSS » par E. Sarrion au édition
O’Reilly
« HTML et XHTML : La référence » de C. Musciano, B.
Kennedy et J. Guérin au édition O’Reilly
N’importe quel autre bouquin sur HTML…
3/34
Les bases
Principes de publication
Un site est
Réalisé par un concepteur
Hébergé sur un serveur
Consulté par des utilisateurs
Le site est déposé par le concepteur chez l’hébergeur
Site web : ensemble de pages web
Page web : un document HTML+ documents utilisés (ex:
images, sons, vidéo, etc.)
Conception d’un site = réalisation d’un ensemble de pages

connectées entre elles par des liens hypertextes
5/34
Concepts fondamentaux
HTML est le langage du web. 2 concepts se cachent
derrière HTML :
Hypertexte : façon d’inter-relier des documents
multimédias
Balises: façon d’indiquer le formatage des éléments
Mise en forme décrite par des fichiers de style CCS
Tout est exprimé en ASCII 7 bits (et souvent 8 ou
32 bits) pour la portabilité
Les navigateurs sont très tolérants, ils affichent des
choses même quand ils ne comprennent pas (c’est à
dire quand l’utilisateur a fait des erreurs) 6/34
Le langage HTML
HTML : HyperText Markup Language

Langage de description de pages web
Un document HTML est
un fichier texte, construit suivant une syntaxe précise
structuré par des balises
interprété (visualisé) dans un navigateur (Mozilla Firefox, Internet Explorer,
Safari, etc.)
créé dans un éditeur de pages web (NVU, Dreamweaver) ou tout éditeur de
texte (bloc-notes, wordpad, jedit)
7/34
Navigateurs
Logiciel destiné à consulter des pages du web : Firefox, Safari, Internet
Explorer…
Ils savent lire les documents html ou htm, et éventuellement adapter
l’affichage aux différents media :
Moniteurs (écran), Imprimante, Carte son, etc.
Code source HTML (idéal pour apprendre les techniques des autres)
Ils savent aussi transformer exporter/importer une page web dans/depuis un
autre format (traitement de texte …)
Que fait un navigateur qui rencontre un document d’un type inconnu ?
Il recherche un plugin <=> une extension lui apprenant à ouvrir ce type de
fichier
Ou il exécute l’application qui correspond
Pour faire votre site web :
Il faut un hébergeur pour avoir un serveur web
Un logiciel d’édition de texte
Un logiciel FTP (File Transfer Protocol) client (ou SSH comme PSCP ou putty)
pour communiquer avec le serveur (avec ssh de manière sécurisée) 8/34
Code HTML vs. Visualisation
Pour voir le code HTML d'une page :

Menu Affichage / Code source
9/34
Les liens
Un lien est constitué par un mot, une suite de mots, ou une
image repérés par une balise HTML spéciale
Cliquer sur un lien permet de naviguer vers :
Un nouveau document HTML du même serveur ou d’un autre
endroit du web (par URL)
Un autre endroit du même document
Un document quelconque
En général, les liens sont indiqués sur une page web par du
texte souligné ou par un changement d’apparence du
pointeur de la souris.
Dans un navigateur, le passage du pointeur sur un lien fait
afficher la cible en bas de la fenêtre
10/34
Exemple
11/34
Les balises (ou tags)
Une balise est un mot clé encadré par 2 chevrons < et > et
Correspondent à des informations sur la page web ou sur
une zone de la page
La plupart des balises vont par paire:
La balise initiale
La balise terminale (la même que celle du début, mais le chevron
< est remplacé par </ )
Exemple: <HEAD></HEAD>
Certaines balises initiales renferment des valeurs
particulières, appelées attributs, qui précisent des paramètres
Exemples:
<a href="http://www.univ-paris12.fr/lacl/gava"></a>
<img src="gava.jpg">
Zone d'action de la balise : entre la balise ouvrante et la
balise fermante 12/34
Organisation d’un document
Pour faire passer un message, il est idéal que la forme
appuie le fond.
Il faut absolument s’affranchir de la structure linéaire du
papier (un seul ordre de lecture possible)
Les liens hypertexte permettent de donner des structures

complexes à des sites web dans l’idée des « livres donc vous
êtes le héros » ou par une organisation hiérarchisée
13/34
Organisation hiérarchisée (1)
14/34
Organisation hiérarchisée (2)
Document Document Document
secondaire secondaire secondaire
Document Document
secondaire Document principal secondaire
Document Document Document

secondaire secondaire secondaire
15/34
Comment faire ?
Un simple éditeur de texte permet de créer une page
On sauvegarde la page avec l’extension .html ou .htm
Ensuite on l’ouvre, « à côté » avec un navigateur
Puis on commence le cycle édition/correction :
Modifier/éditer la page
L’afficher,
Recommencer jusqu’à satisfaction
Remarque : certain éditeur de textes peuvent fournir un
mode spécial d’édition pour les pages HTML et il existe de
nombreux éditeurs spécialisés pour HTML (difficilement
comparables)
Remarque : ne pas utiliser Microsoft Word pour générer de
pages HTLM ; le code généré est immonde
16/34
La programmation HTML
Exemple simple HTML
<html> Début document
<head> Début de l’entête
<title>Exemple</title>
</head> Fin entête
<body> Début corp
Bonjour à tous !
</body> Fin corp
</html> Fin document

18/34
Structuration
19/34
Principales balises (1)
<html> : pour dire que l’on va parler en HTML
<head> : pour décrire le document, l’en tête du fichier
<body> : pour écrire le document, le corps du fichier
Balises de formatage/mise en page
<p></p> paragraphe (pas obligatoire)
<h1></h1> style de caractères
<font></font> police d’écriture
Balise propres à l’hypertexte et au multimédia
<a href="cible">texte</a> ancre/lien vers cible (chemin dans le
système de fichier ou url) et avec un texte
<img src="cible"> insertion d’une image (cible est un chemin ou
un url)
<applet> </applet> insertion d’un programme en JAVA
20/34
Exemple (2)
<html>
<head>
<title>Exemple 2</title>
</head>
<body bgcolor=black>
<img src=«affiche.jpg» width=60%>
<hr>
<font color=red>
<h1>Bonjour à tous !</h1>
</font>
</body>
</html>
21/34
<br> : saut de ligne
<hr> : trait verticale sur toute la page
Styles de caractère :
Il existe par défaut 7 niveaux ;lLe premier niveau est compris entre les
balises <h1> et </h1>, le second est compris entre les balises <h2> et
</h2>, etc.
Des lettres ou des mots peuvent avoir un style différent. On a pour cela à
dispositions les balises pour marquer en gras (entre <b> et </b>), en
italique (entre <i> et </i>, en style machine à écrire (entre <tt> et </tt>)
Création de listes :
Il y a deux types de listes : les listes numérotées et les listes à puces. Une
liste numérotées est comprise entre les balises <ol> et </ol>. Une liste à
puces est comprise entre les balises <ul> et </ul>
Chaque élément de la liste est quant à lui compris entre les balises <li>
et </li>. Il est possible d’imbriquer des listes
22/34
Balise images :
Il peut également contenir un attribut align qui va indiquer
comment le texte est aligné par rapport à l’image (cet attribut peut
prendre les valeurs top, bottom, middle) et un attribut alt qui donne
un texte de remplacement au cas où le navigateur ne pourrait
afficher l’image.
Exemple : <img src="logo.gif" alt="le logo" align="top"></img>
Divers :
Pour centrer un texte, il suffit de le mettre en les balises <center>
et </center>
La balise <body> permet l’utilisation de nombreux attributs dont
l’attribut bgcolor qui indique la couleur de fond de la page
La balise <font> … </font> permet de modifier l’apparence de
caractères ou de mots par l’utilisation des attributs size (qui peut
prendre des valeurs entre –3 et +4) et color (qui prend des noms de
couleur comme Red, White, Blue, etc.) 23/34
• La balise BODY peut contenir des attributs pour définir les couleurs de la page
Attributs Signification
Bgcolor Couleur de fond de page
Background Image de fond de page
Text Couleur du texte
Link Couleur des liens
Alink Couleur du lien actif
Vlink Couleur des liens déjà visités
• La définition des couleur se fait soit en les appelons par leurs nom : black,
white, yellow … ou encore en donnant leur code RBV en hexadécimal précédé
du caractère # :
bleu = #0000FF vert = #00FF00
blanc = #FFFFFF violet = #8000FF
rouge = #FF0000 jaune = #FFFF00
gris clair = #C0C0C0 noir = #000000
• Tout document HTML contiendra en majorité du texte
• Voici quelques balises élémentaires :
<b> … </b> Début et fin de zone en gras

<i> … </i> Début et fin de zone en italique
<u> … </u> Début et fin de zone soulignée
<FONT SIZE=?> … </FONT> Début et fin de zone avec cette taille
<FONT COLOR=‘’blue’’> … Début et fin de zone en couleur
<br> </FONT> Aller à la ligne

• Les accents
• lors de la rédaction d’une page Web, il ne faut pas écrire les accents directement
dans le code
<b> Voici la page Web des étudiants en Biologie </b>
Lettres Code HTML

e accent aigu é
e accent grave è
e accent circonflexe ê
a accent aigu á
a accent grave à
a accent circonflexe â
a trema ( ä ) ä
e trema ( ë ) ë
c cédille ( ç ) ç
• Les listes : listes non-ordonnées et listes ordonnées
<UL> … </UL> afficher le texte sous forme d’une liste non-
ordonnée
<OL> … </OL> affiche le texte sous forme d’une liste ordonnée
<LI> un élément de la liste
<BODY bgcolor=‘’white’’ text=‘’black’’ link=‘’blue’’ alink=‘’red’’

vlink=‘’magenta’’>
<H1> Les mois du printemps </H1>
<UL>
<LI> Avril
<LI> Mai
<LI> Juin
</UL>
<H1> Les mois d’automne </H1>
<OL>
<LI> Octobre
<LI> Novembre
<LI> Décembre
</OL>
• Paragraphes
• utile pour formater le texte de paragraphes
• il est possible d’utiliser l’attribut align pour centrer ou justifier le texte
• les quatre valeurs possibles pour align sont : left, right, center et justify
<HTML>
<HEAD>
<TITLE> La page Web des étudiants en L1IIR </TITLE>
<META name=‘’author’’ content=‘’Votre nom’’>
</HEAD>
<BODY bgcolor=‘’white’’ text=‘’black’’ link=‘’blue’’ alink=‘’red’’
vlink=‘’magenta’’>
<P align=‘’center’’ > le paragraphe suivant sera justifié au centre </P>
<P align=‘’justify’’ > alors que celui-ci sera doublement justifié </P>
</BODY>
</HTML>
Tableaux en HTML (1)
Les tableaux sont construits en utilisant quatre balises :
<table>, <th>, <tr> et <td>
La première balise permet simplement de délimiter le
tableau. Ensuite chaque ligne du tableau est comprise entre
<tr> et </tr> et chaque cellule entre <td> et </td>. La balise
<th> est utilisée pour les cellules de titre
Par exemple le code suivant :
<table>
<tr> <th>Auteur</th> <th>Titre</th> </tr>
<tr> <td>Zola</td> <td>L’assomoir</td> </tr>
<tr> <td>Balzac</td> <td>Eugénie Grandet</td> </tr>
</table>
donnera le tableau suivant :
29/34
Le balises <TR> et <TD> peuvent être agrémentée des
attributs : Bordercolor et bgcolor
Quelques attributs possible pour la balise <TR> :
Bgcolor : Précise la couleur de fond de la ligne concernée
Valign : Permet de préciser l'alignement vertical du contenu de

chaque ligne.
Les valeurs possibles sont : top, middle, bottom,baseline
30/34
Quelques attributs possible pour la balise <TD>:
Colspan="valeur"
Spécifie le nombre de colonnes occupées par la cellule. La valeur par défaut est
1
Rowspan="valeur«
Spécifie le nombre de colonnes occupées par la cellule. La valeur par défaut est
1
Height : Spécifie la hauteur de la cellule.

Height : Spécifie la largeur de la cellule.
31/34
• La balise TABLE
• les tableaux sont très utilisés en HTML car ils permettent une mise en page simple des images
et du texte
• les cellules des tableaux peuvent être regroupées et elles peuvent contenir des listes, des
paragraphes, des formulaires, des images, du texte, ou d’autres tableaux
• La balise TABLE débute un tableau, et accueillir les attributs suivants :
Attribut Signification Attribut Signification

Align Spécifie l’alignement du tableau dans Cellspacing Largeur entre les cellules
la page
Width Détermine la largeur du tableau (en Cellpadding Marge intérieure des cellules
% ou en pixels)
Cols Spécifie le nombre de colonnes du Frame Spécifie quels côtés de la bordure
tableau sont visibles
Bgcolor Couleur de fond des cellules Id Donne un identifiant au tableau
Border Contrôle la largeur de la bordure class Détermine le style qui doit être
appliqué au tableau
Les images (1)
• il est possible d’insérer des images dans un document HTML
• il est aussi possible de leur donner des caractéristiques :
• images simples
• images réactives aux événements de la souris
• images à zones réactives (images dont les zones réagissent à la souris et mènent à
des liens différents)
Les images (2)
• La balise IMG permet de placer une image sur le document
<IMG src=‘’images/nom_image.jpg’’ alt=‘’Logo de l’université’’>
Attribut Signification Attribut Signification
src URL de l’image à alt Texte alternatif (texte s’affichant en cas de

inclure problème avec l’image
width Largeur de l’image align Alignement de l’image
(facultatif)
height Hauteur de l’image border Contrôle la largeur de la bordure (0 par
(facultatif) défaut
Les hyperliens (1)
• ils représentent tout l’intérêt du langage HTML
• ils sont la garantie de pouvoir se déplacer sur le World Wide Web et de retrouver des
informations rapidement
• un lien pointe sur une autre page ou à un endroit précis d’une page
<A href=‘’http://www.univ-st-
etienne/sommaire.html’’>Page d’accueil de l’université St
Etienne</A>
• l’attribut href désigne l’adresse Web de destination du lien
• le texte contenu dans la balise (ici Page d’accueil de l’université St Etienne) apparaîtra
donc comme un lien : texte souligné en bleu
Validation d’une page HTML
Il est possible de voir si une page est correcte (si elle suit
bien les règles de formations) en utilisant les vérificateurs
du W3C à l’adresse : http://validator.w3.org
Il faut toutefois pour que les feuilles soient correctes entrer
les informations supplémentaires suivantes au début de la
page :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
Ceci veut dire que nous utilisons la version XHTML 1.0
Strict pour écrire nos pages et les valider
36/34
Les Formulaires en
HTML
La déclaration d'un formulaire (1)
La définition des différents éléments du

formulaire se fait en utilisant l'élément
<FORM>. L'action a réaliser pour traiter le
formulaire doit être précisée en utilisant les
deux attributs suivants :
 ACTION
METHOD
 L'attribut ACTION :
Il indique l'action à exécuter lorsque lors de l'envoi des données.

(La page à exécuter : un script php par exemple ) ou un logiciel du
serveur. On peu aussi utiliser un script JAVAscript.
 L'attribut METHOD :
Il permet de définir la méthode de transfert des données vers le
serveur. Les deux valeurs possibles sont GET et POST.
La syntaxe habituelle est donc :
La syntaxe habituelle est donc :
<FORM METHOD="POST" ACTION=" traitement.php">

…………….
…………….
</FORM>
Les éléments de formulaires (1)
Les éléments de formulaires sont répartis en 3 classes :
 Input : Champs de saisie de texte et différents types de boutons

 Select : Listes (menus déroulants et ascenseurs)
Textarea : Zone de saisie de texte libre
Les éléments input (1)
Cet élément est utilisé pour définir des zones d'entrée de texte simple, des boutons,
des cases à cocher ou des boutons radio. Le type d'élément dont il s'agit sera précisé
en utilisant l'attribut TYPE.
L'élément SELECT (1)
Cet élément sert à définir des listes (menus déroulant ou ascenseurs). Elle s'utilise
avec l'élément OPTION.
L'élément TEXTAREA (1)
Permet de créer une zone de texte en spécifiant sa taille grâce aux
attributs ROWS et COLS.
Champ caché (1)
Il est quelque fois nécessaire, pour s'y retrouver lorsqu'on
reçoit les données dans sa boite aux lettre, d'inclure des
données cachées permettant de savoir de quel formulaire
viennent les données, de quel site web elles proviennent (en
cas de formulaire partagé) ou d'insérer des données issus de
calculs ou encore des données provenant de JavaScript
indiquant le navigateur, l'adresse IP, le nombre de visites ou
tout autre renseignement sur le visiteur... Pour cela on utilise
la balise <INPUT TYPE="hidden"> dont les atributs sont
NAME : nom du champ caché et VALUE le contenu du
champ c'est-à-dire sa valeur. Ce champ ne sera pas vu par
l'internaute mais il sera inclu parmi les données.
Champ caché (2)
Syntaxe :
<INPUT TYPE="hidden" NAME="nom_du_champ "

VALUE="valeur">
Exemple :
[ invisible ]
<INPUT TYPE="hidden" NAME="Origine"
VALUE="CyberZoïde">
Pièce jointe (1)
Vos visiteurs auront sans doute envie de vous laisser un fichier, pour
cela il vous faut utiliser la balise <INPUT TYPE="file"> dont l'attribut
SIZE a pour valeur la taille (en caractères) du champ correspondant.
Ce champ sera suivit d'un bouton qui permet d'ouvrir une boite de
dialogue Open pour choisir le fichier.
Point capital nécessaire pour l'envoi d'un fichier en pièce jointe : il

faut changer la valeur de l'attribut ENCTYPE du conteneur FORM en
multipart/form-data. En effet, ENCTYPE précise au navigateur le type
MIME du message envoyé lors de la validation du formulaire.
Pièce jointe (2)
 Le type MIME plain/text vu plus haut signifie texte brut, alors que
multipart/form-data signifie que le message peut contenir des données
binaires. Si vous oubliez de spécifier le bon code MIME pour l'envoi
d'un fichier, vous ne recevrez qu'une chaîne de caractères contenant le
nom et le chemin de ce fichier dans l'ordinateur de l'internaute !
Il est également possible de limiter la taille du fichier à envoyer afin

de limiter l'encombrement de votre boite aux lettres. Pour cela, ajouter
un champs caché nommé MAX_FILE_SIZE et de valeur la taille
maximal acceptée en octets.
Pièce jointe (3)
Syntaxe :
<FORM NAME="nom_du_formulaire"
ACTION="mailto:votre@email" METHOD="post"
ENCTYPE="multipart/form-data">
<INPUT TYPE="hidden" NAME="MAX_FILE_SIZE"
VALUE="taille">
<INPUT TYPE="file" NAME="nom_du_champ" SIZE="taille">
</FORM>
Traitement des formulaires (1)
Il s'agit de récupérer les données saisies par l'utilisateur et
de les retraiter. Il existe 3 techniques.
La passerelle CGI :
L’une des techniques classique consiste à utiliser la passerelle

CGI (Common Gateway Interface) pour exécuter un
programme de traitement sur le serveur. Le programme en
question recevra toutes les données saisies par l'utilisateur et
construira une nouvelle page en réponse.
Cette technique est bien puissante. Elle est capable de traiter
un grand volume de données. Néanmoins elle nécessite l'accès
à la programmation du serveur.
.
Les scripts :
Ils permettent de réaliser de petites applications simples

sans interaction avec le serveur.
Exemple: Une page nommé par exemple traitement.php contenu

dans l’attribut ACTION du formulaire qui sera exécuter des qu’on
soumet le formulaire.
Cette méthode reste la plus simple à utiliser même si elle
ne permet pas de traiter un grand nombre de données. Il
suffit d'indiquer une adresse électronique comme action.
Se faire expédier les données par mail :
<form action="mailto:mon.nom@mon.adresse.fr"
method="POST">
<form action="mailto:mon.nom@mon.adresse.fr"
method="POST">
Cette technique présente deux inconvénients majeurs :
 Tout d'abord les données sont renvoyées légèrement codées —

les espaces sont remplacés par des signes "+" et les caractères
accentués ou spéciaux par leur code en hexadécimal précédé du
symbole "%« .
 Ensuite tous les navigateurs ne le permettent pas. D'ailleurs ceux

qui le permettent nécessitent que le lien avec un logiciel de courrier
électronique soit correctement paramétré.
Les feuilles de styles
Divers
La suite : Le CSS !

Cours HTML All

Transféré par

Informations du document

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Cours HTML All

Titre original :

Transféré par

Droits d'auteur :

Developpement Web

« HTML 4 pour les nuls » par E. Tittel, N. Pitts et C.

Conception d’un site = réalisation d’un ensemble de pages

HTML : HyperText Markup Language

Pour voir le code HTML d'une page :

Les liens hypertexte permettent de donner des structures

Document Document Document

<head> Début de l’entête

<body> Début corp

</html> Fin document

<b> … </b> Début et fin de zone en gras

Lettres Code HTML

<BODY bgcolor=‘’white’’ text=‘’black’’ link=‘’blue’’ alink=‘’red’’

Bgcolor : Précise la couleur de fond de la ligne concernée

Valign : Permet de préciser l'alignement vertical du contenu de

Height : Spécifie la hauteur de la cellule.

• La balise TABLE débute un tableau, et accueillir les attributs suivants :

Attribut Signification Attribut Signification

Attribut Signification Attribut Signification

src URL de l’image à alt Texte alternatif (texte s’affichant en cas de

La définition des différents éléments du

Il indique l'action à exécuter lorsque lors de l'envoi des données.

La syntaxe habituelle est donc :

<FORM METHOD="POST" ACTION=" traitement.php">

Les éléments de formulaires sont répartis en 3 classes :

 Input : Champs de saisie de texte et différents types de boutons

<INPUT TYPE="hidden" NAME="nom_du_champ "

Point capital nécessaire pour l'envoi d'un fichier en pièce jointe : il

Il est également possible de limiter la taille du fichier à envoyer afin

L’une des techniques classique consiste à utiliser la passerelle

Ils permettent de réaliser de petites applications simples

Exemple: Une page nommé par exemple traitement.php contenu

Se faire expédier les données par mail :

Cette technique présente deux inconvénients majeurs :

 Tout d'abord les données sont renvoyées légèrement codées —

 Ensuite tous les navigateurs ne le permettent pas. D'ailleurs ceux

Centres d'intérêt liés

Vous aimerez peut-être aussi