Conception et réalisation des sites web

HTML
Pr. Aziz MABROUK
Pr.mabrouk.fpt@gmail.com
Site Web ?

Professeur Aziz MABROUK 2

 Site Web ?

➢un ensemble de pages Web hyperliées

entre elles Page Web
Liens
hypertextes

Professeur Aziz MABROUK 3

Site Web ?
➢Organisation hiérarchisée des pages web

Le Web
Professeur Aziz MABROUK 4
Site Web ?
➢Organisation hiérarchisée des pages web

Documen Documen Documen

t t t
secondair secondair secondair
e e e

Documen Documen
t t
secondair Document principal secondair
e e

Documen Documen Documen

t t t
secondair secondair secondair
e e e
Professeur Aziz MABROUK 5
Page Web ?

Professeur Aziz MABROUK 6

Page Web

Professeur Aziz MABROUK 7

 Page Web

Autres images
Que du textes…
Autres
pages
Autres animations
pages
web
pages Code HTML vidéos
web
web Son
Codes de CSS
programmation
Javascript, Php, programmes
Base de Asp,…

données

Page web :
➢ un document texte (HTML,…) + documents utilisés (ex: images, sons, vidéo, etc.)
➢ un assemblage de ressources, textuelles, visuelles, sonores, logicielles.

Professeur Aziz MABROUK 8

Hébergement ??

Professeur Aziz MABROUK 9

 Site Web: hébergement et consultation

Documents

Navigateur Serveu
Consultation r Web
Web
HTTP

Hébergement Serveu
Client FTP
r FTP
FTP

Poste Poste
client Professeur Aziz MABROUK
Serveur
10
Les Outils ?

Professeur Aziz MABROUK 11

Les Outils ?

• Outils de création
•Outils d’édition de code
• Assistants de création des pages web
• Outils multimédia : son, images, animations et
vidéos

• Outils d’hébergement

• Outils de navigation

Professeur Aziz MABROUK 12

Les Outils ?

• Outils de création
•Outils d’édition de code
Bloc-note Notepad++
➢des logiciels très légers

➢permettent de créer et de modifier le code source d'une

page web

➢permettent de rechercher du code

➢Pour certains, la syntaxe du code est mise en relief pour

faciliter la recherche.

Professeur Aziz MABROUK 13

Les Outils ?

• Outils de création
•Assistants de création des pages web
✓Logiciels dédiés
✓un éditeur dit "WYSIWIG",
✓(le condensé en anglais de what you see is what you get qui
signifie "vous obtenez ce que vous voyez").
✓permet de voir directement le résultat obtenu sans être "obligé" de
consulter le code (le même principe que "word« )
✓ des notions d'html soient plutôt conseillées par la suite.

Professeur Aziz MABROUK 14

Les Outils ?
• Outils de création
•Outils multimédia : son, images, animations et vidéos

➢créer des en-têtes, des logos, des bannieres, boutons etc ..

➢créer d'images animés
➢assembler plusieurs images GIF ensemble pour n'en faire qu'une
seule et choisir l'ordre d'apparition des images ainsi que la
vitesse de passage d'une image à une autre.
➢Créer et assembler des vidéos

Photoshop Easy Flash Maker Windows Movie Maker

The Gimp
(SWF Creator)
Professeur Aziz MABROUK 15
 Les Outils ?
• Outils d’hébergement
➢ Des logiciel de transfert de fichiers sur l'hébergeur
➢ Certains éditeurs HTML permettent de transférer les s fichiers

FTP Filezill
Expert a
Professeur Aziz MABROUK 16
 Le Web

Est ce que HTML

est
un langage de programmation?
 Le Web
Le langage HTML

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
○ créé dans un éditeur de pages web (Dreamweaver, Namo,..) ou tout
éditeur de texte (bloc-notes, notepad++, …)
○ interprété (visualisé) dans un navigateur (Mozilla Firefox, Internet
Explorer, Safari, etc.)
 Le Web
Le langage HTML

Document HTML

Edition Visualisation/ Interprétation du code

 Le Web
Le langage HTML

Le principe des balises

➢balise = limite d'une boîte où l'on peut mettre des choses

<balise> chose </balise>
à chaque balise ouvrante <balise> ...
... on associe une balise fermante </balise>
➢balises sans contenu : <autrebalise />
➢<balise attribut1="valeur" attribut2="valeur">...</balise>
➢commentaire : <!-- bla bla bla -->
 Le Web
Le langage HTML

Structure d’un document HTML ?

 Le Web
Le langage HTML

Structure d’un document HTML

 Le Web
Le langage HTML

l'entête ?
 Le Web
Le langage HTML

l'entête

<head> ... </head>

informations qui ne seront pas affichées sur la page HMTL

➢titre de la page : <title>ma page html</title>

➢informations utilisées par les moteurs de recherche :

<meta name="description" content="Formation HTML" />

 Le Web
Le langage HTML

le corps?
 Le Web
Le langage HTML

le corps

<body> ... </body>

informations qui vont s'afficher dans le navigateur

 Le Web
Le langage HTML

Structuration du texte
 Le Web
Le langage HTML

Structuration du texte

<p>paragraphe</p>
<hr/> (trait horizontal)

<h1>important</h1>

<h6>moins important</h6>

<div>bloc</div>
 Le Web
Le langage HTML

Structuration du texte
les listes non ordonnées :

les listes ordonnées :

 Le Web
Le langage HTML

Structuration du texte
les listes non ordonnées :
<ul>
<li>amuse</li>
<li>soir</li>
</ul>

les listes ordonnées :

<ol>
<li>pouquoi</li>
<li>banane</li>
</ol>
 Le Web
Le langage HTML

Structuration du texte
les tables :
 Le Web
Le langage HTML

Structuration du texte
les tables :
<table>
<tr>
<td>1ère ligne, 1ère colonne</td>
<td>1ère ligne, 2ème colonne</td>
</tr>
<tr>
<td>2ème ligne, 1ère colonne</td>
<td>2ème ligne, 2ème colonne</td>
</tr>
</table>
<h1>une table un peu plus compliquée...</h1>
<table border="1">
<tr>
<td colspan="3">
1ère ligne, 1ère colonne
</td>
<td>1ère ligne, 4ème colonne</td>
</tr>
<tr>
<td>2ème ligne, 1ère colonne</td>
<td>2ème ligne, 2ème colonne</td>
<td>2ème ligne, 3ème colonne</td>
<td rowspan="2">
2ème ligne, 4ème colonne
</td>
</tr>
<tr>
<td colspan="2" rowspan="2">
3ème ligne, 1ère col
</td>
<td>3ème ligne 3ème colonne</td>
</tr>
<tr>
<td>4ème ligne, 3ème colonne</td>
<td>4ème ligne, 4ème colonne</td>
</tr>
</table>
 Le Web
Le langage HTML

Balise propres à l’hypertexte et au multimédia

les liens :
<a href="http://fpl.ma">page web</a>
<a href="page2.html">autre page</a>
<a href="mailto:admin@fpl.com">email</a>

les images :
<img src="ma_photo.jpg" alt="description" />
une image lien :
<a href="http://www.fpl.com">
<img src=“fpl.png" alt=“FPL" />
</a>
Créer cette page web

http://www.fpl.ma
<html>
<head>
<title>Visite de la FPL</title>
</head>
<body>
<p>Ceci est un paragraphe</p>
<hr/>
<h1>bonjour!</h1>
<h3>moyenjour.</h3>
<h6>mauvaisjour.</h6>
<p><i>je vais aller</i>
<a href="http://www.fpl.ma">
rendre visite à la Faculté polydisciplinaire
de Larache</a>.
<br><img src="fpl.jpg" alt="fpl" />.</p>
<ul>
<li>un élément</li>
<li>un autre élément</li>
</ul>
<ol>
<li><b>premier élément</b></li>
<li>deuxième élément</li>
</ol>
</body>
</html>
 Le Web
Le langage HTML

Balises de formatage/mise en page

aller à la ligne : <br/>

écrire en italique : <i>...</i>

écrire en gras : <b>...</b>

A faire et à envoyer à pr.mabrouk.fpt@gmail.com
➢ Créer ces trois pages hyperliées
✓ index.htm
✓ page1.htm
✓ page2.htm Je suis la page 1

Je suis le lien vers

la page d’accueil

Je suite
la Page d’accueil
page1.htm

1.Je suis le lien vers la page 1

2.Je suis le lien vers la page 2 Je suis la page 2

Je suis le lien vers

Index.htm la page d’accueil

page2.htm
 Le Web
Le langage HTML

Les formulaires ?
 Le Web
Le langage HTML
Les formulaires

➢servent à envoyer des données au serveur,

✓Les données remplies en général par un
visiteur, que ce soit pour l'inscription sur un
site ou un formulaire de contact par exemple.

➢sont dotés de divers contrôles comme :

✓des champs de saisie,
✓des boutons,
✓des listes, etc,

➢permettent au visiteur d'interagir avec la page

qu'il est en train de consulter.
 Le Web
Le langage HTML
Les formulaires
La balise form

<form action="envoi-formulaire.php" method="post">

<!-- Contenu du formulaire -->
</form>

➢ Tous les champs de formulaires quels

qu'ils soient doivent se trouver dans cette
balise <form>.
 Le Web
Le langage HTML
Les formulaires
Les champs texte monolignes
➢caractérisé par la balise <input>
➢l'attribut type prend la valeur :
➢"text"
➢"password".

➢l'attribut name est le nom du champ,

✓ permet de retrouver la valeur lors de l'envoi
du formulaire.
➢l'attribut value permet d'attribuer une valeur par défaut au champ,
➢l'attribut size permet de préciser la taille du champ en nombre de caractères,
➢Maxlength limiter le nombre de caractères
possibles,
➢readonly prend pour seule valeur "readonly" et verrouille le champ,
➢ disabled prend pour seule valeur "disabled" et permet de désactiver le champ.
 Le Web
Le langage HTML
Les formulaires
Les champs texte monolignes

<input type="text" name="textfield" value="Je suis un champ texte " />

<input type="password" value="Mot de passe" />

<input type="text" value="Je suis un champ texte désactivé" size="35" disabled/>

<input type="text" value="Tu ne peux pas me modifier" size="35" readonly="true" />

 Le Web
Le langage HTML
Les formulaires
Les champs texte multilignes

➢Permettent de saisir de longs textes, comme des champs

de commentaires pour des articles.

➢l'utilisation de la balise <textarea>

➢son contenu est écrit entre les balises

ouvrante et fermante et non dans un
attribut value.
➢L’attribut rows contient le nombre de lignes
➢L’attribut cols qui contient le nombre de colonnes.

➢On peut, rajouter les attributs name,

readonly et disabled
 Le Web
Le langage HTML
Les formulaires
Les champs texte multilignes

<html>
<head>
<title>champs de texte</title>
</head>
<body>

<textarea name="commentaire" rows="5" cols="40"></textarea>

<br><br>

<textarea name="sujet" rows="6" cols="50">Texte par défaut</textarea>

</body>
</html>
 Le Web
Le langage HTML
Les formulaires
Les champs cachés
➢un champ caché,
➢N’est pas affiché dans le navigateur
➢La balise dans le code source de la page
➢on utilise la balise <input> avec "hidden" comme valeur de l'attribut type

Exemple de champ caché

<input type="hidden" name="clef" value="a182f8e84f">

 Le Web
Le langage HTML
Les formulaires
Les champs de fichiers

Exemple de champ file

<input type="file" name="image">
 Le Web
Le langage HTML
Les formulaires
Les champs de fichiers

<input type="file"
name="image">
➢Permettent d'envoyer des fichiers par l'intermédiaire du formulaire
➢On utilise la balise <input> dont l'attribut type est renseigné à "file".
➢un champ avec un bouton "Parcourir" sera disponible
➢il faut impérativement renseigner l'attribut enctype de la balise <form> à
"multipart/form-data".
 Le Web
Le langage HTML
Les formulaires
Les boutons radio

Exemples de groupes de boutons radio

 Le Web
Le langage HTML
Les formulaires
Les boutons radio

Exemples de groupes de boutons radio

<p>
<input type="radio" name="civilité" value="mlle"> Mademoiselle
<input type="radio" name="civilité" value="mme"> Madame
<input type="radio" name="civilité" value="mr"> Monsieur
</p>
<p>
<input type="radio" name="genre" value="homme" checked="checked"> Homme
<input type="radio" name="genre" value="femme"> Femme
<input type="radio" name="genre" value="et"> Alien
<input type="radio" name="genre" value="indéfini"> Indéfini
</p>
 Le Web
Le langage HTML
Les formulaires
Les boutons radio

<input type="radio" name="genre" value="homme"

checked="checked">
➢laisser aux visiteurs un choix et un seul parmi une liste de
propositions.

➢La balise est alors <input> dont l'attribut type est renseigné à "radio".

➢Ces boutons radio vont par groupe, ils doivent avoir le même nom pour un groupe de
propositions.
✓Le nom est renseigné avec l'attribut name.

➢La valeur de l'attribut value va être transmise au serveur en fonction du bouton choisi.

➢un bouton radio d'un groupe est coché si l'attribut checked a la valeur "checked".
 Le Web
Le langage HTML

Les formulaires
Les cases à cocher

➢permettent un choix multiple pour un groupe de

propositions.
➢ l'attribut type prend pour valeur "checkbox".

Exemple de cases à cocher

 Le Web
Le langage HTML

Les formulaires
Les cases à cocher

➢permettent un choix multiple pour un groupe de

propositions.
➢ l'attribut type prend pour valeur "checkbox".

Exemple de cases à cocher

<input type="checkbox" name=« intel" value="intelligent"> Intelligent

<input type="checkbox" name=« beau" value="beau"> Beau
<input type="checkbox" name=« serviable" value="serviable"> Serviable
 Le Web
Le langage HTML

Les formulaires
Le bouton d'envoi

➢ sert à envoyer les données du formulaire au serveur.

➢Il est caractérisé par la valeur "submit" de l'attribut
type des balises <input> et <button>.

Exemples de boutons d'envoi

 Le Web
Le langage HTML

Les formulaires
Le bouton d'envoi

➢ sert à envoyer les données du formulaire au serveur.

➢Il est caractérisé par la valeur "submit" de l'attribut
type des balises <input> et <button>.

Exemples de boutons d'envoi

<input type="submit" name="envoyer" value="Valider">
<button type="submit" name="soumettre">Soumettre<br>les réponses</button>
 Le Web
Le langage HTML

Les formulaires
Le bouton image

➢Une image qui se comporte exactement comme un bouton d'envoi

➢sert à personnaliser un bouton
➢l'attribut type de la balise <input> ayant pour valeur "image" et l'on
renseigne l'adresse de l'image avec l'attribut src.
➢ne peut pas être géré par la balise <button>.

Exemple de bouton image

<input type="image" name="envoyer" src="fpl.jpg">

 Le Web
Le langage HTML

Les formulaires
Le bouton effacer

➢sert à réinitialiser toutes les valeurs du formulaire

➢caractérisé par la valeur "reset" de l'attribut type des

balises <input> et <button>.

Exemples de boutons effacer

 Le Web
Le langage HTML

Les formulaires
Le bouton effacer

➢sert à réinitialiser toutes les valeurs du formulaire

➢caractérisé par la valeur "reset" de l'attribut type des

balises <input> et <button>.

Exemples de boutons effacer

<input type="reset" name="effacer" value="Effacer toutes les valeurs">

<button type="reset" name="effacer"> Réinitialiser </button>
 Le Web
Le langage HTML

Les formulaires
Les listes
➢ permettent de laisser un choix aux visiteurs, au même titre que les boutons
radio ou les cases à cocher,
➢ sont plus pratiques lorsqu'il s'agit de proposer un grand nombre de choix.

➢ On distingue deux types de listes,

✓les listes normales
✓les listes déroulantes.
 Le Web
Le langage HTML

Les formulaires
Les listes normales

Les listes déroulantes

 Le Web
Le langage HTML

Les formulaires
Les listes normales
<select name="couleur_yeux">
<option value="bleus">Bleus</option>
<option value="bruns" selected="selected">Bruns</option>
<option value="verts">Verts</option>
</select>

Les listes déroulantes

<select name="couleur_yeux" size=" 3" >
<option value="bleus">Bleus</option>
<option value="bruns" selected="selected">Bruns</option>
<option value="verts">Verts</option>
</select>