Courshtml 2

1
Le langage HTML
Hyper Text Markup Language

Langage hypertexte à balises
Eric Hitti
Eric.Hitti@univ-rennes1.fr
2
Tables des matières
L'origine de la page WEB 3
Balises de documents 8
Balises de mise en page 11
Balises de mise en forme 13
Balise de listes 15
Caractères spéciaux 16
Les images 17
Les liens 21
Les tableaux 23
Les cadres (frames) 28
Les formulaires 36
Exemple de php 44
Exemples de javascript 47
Les styles 51
L'origine de la page WEB 3
Transmettre des informations à l'autre bout du monde

Le code ASCII=255 caractères
Le fichier
01000101 01110010 01101001 01100011
informatique
L'éditeur de texte E r i c
(Bloc-notes)
Le traitement de texte Eric  Instructions de mise en forme

(Word)  balises
L'origine de la page WEB : éditeur simple
4
- Je veux : Eric
- Je créé un fichier .HTML <i> Eric </i>

Et j'utilise des balises de mise en forme
- Je visualise le résultat à l'aide d'un navigateur (Netscape)

qui interprète le code
L'origine de la page WEB : éditeur évolué
5
- Je veux : Eric en gras

- Je sélectionne le texte avec ma souris Eric
- J'utilise le bouton adéquat
Fichier.html
- L'éditeur modifie le code en insérant

<b> Eric </b>
les balises au bon endroit
- Et en même temps donne un aperçu
du résultat
L'origine de la page WEB : un fichier complet
6
La page source en .htm ou .html

Elle est créé à l'aide d'un simple
éditeur de texte
HTML n'est pas un langage de
programmation !
Ce n'est qu'un langage de description de
documents.
Le navigateur (Netscape) permet de visualiser la page web en

interprétant le code
Règles simples 7
• HTML est un langage à balises
• Les balises permettent de réaliser des actions sur un groupe de

mots
<début balise> texte affecté par la balise </fin de la balise>
Ex : <b> HTML </b> met HTML en gras
• Les balises en minuscules
• Les balises peuvent recevoir des attributs (options) en

Ex :
<body bgcolor=red> le font d'écran sera en rouge
balise option
<html> … </html> début et fin de document

<head> … </head> l’entête du document
<! ………………> commentaires
Dans la section head

<title> … </title> barre de titre et sauvegarde de signet
<meta> les moteurs de recherche utilisent ces
informations pour l'indexation
Exemples :
<meta http-equiv="author" content="Eric Hitti">
<meta http-equiv="Description" content="Ce documentblabla">
<meta http-equiv="Keywords" content="Hitti;recherche;…">
<meta http-equiv="Copyright" content="Super labo">
<body> … </body> le corps du document
Options :
background="image" image de fond d’écran
bgcolor="couleur" couleur du fond d’écran
text="couleur" couleur du texte
link ="couleur" couleur des liens non consultés
alink ="couleur" couleur des liens actifs
couleur=(aqua, black, fuschia, gray, green, lime, marroon, navy, olive,

purple, red, silver, teal, white, yellow)
Les autres couleurs sont définie en hexa (#FF0000 =rouge)
Exemple 10
<html>
<head>
<title> Mon super site </title>
</head>
<body bgcolor="yellow" text="blue">
<! A partir de là ma page commence>
bla bla bla et que je te raconte ma vie
</body>
</html>
<p options > </p> saut de paragraphe

align="Justify/left/right"
<br> passage à la ligne

<center> …</center> centrage
<hr options> Insertion d’une ligne de séparation

Options :
size="+n" épaisseur du trait
noshade sans ombre
width="n%" largeur de la ligne
align="left | rigth"centré par défaut
Exemple
<body>
<center>Un paragraphe
</center>
<p> Premiere ligne <br>
Deuxieme ligne</p>
<hr size="3" width="50%"
align="left">
</body>
<hn> … </hn> titre de niveau n (1 à 6)

<b> … </b> afficher en gras
<i> … </i> afficher en italique
<u> … </u> afficher en souligné
<s> … </s> barrer le texte
<big> … </big> Le texte est agrandi d’une unité de taille
<small> … </small> Le texte est diminué d’une unité de taille
<blink> … </blink> afficher en clignotant
<sup> … </sup> exposants
<sub> … </sub> indices
Exemple
<body>
<h1> C’est un titre de niveau 1 </h1>
<h2> C’est un titre de niveau 2 </h2>
<b> c’est gras </b> <br>
<u> <i> en italique souligne </i> </u><br>
1<sup>er</sup>
</body>
Balises de listes 15
Les listes ordonnées

<ol start="2">
<li type="A"> coucou </li>
<li type="i">recoucou</li>
</ol>
Les liste non ordonnées

<ul type="square"ou"disc"ou"circle">
<li>coucou</li>
<li>recoucou </li>
</ul>
Caractères spéciaux 16
< < é é
> > è è
& & ê ê
&nspb; (un blanc) à à
<< « ï ï
>> » ç ç

© &copy
ñ ñ
Les images 17
• Images de types GIF ou JPEG (PNG)
• Conseils
- Pas d’images de tailles trop importantes
- Des petites images cliquables pour voir les grandes
- Récupérer les icônes et images sur d’autres sites
- Spécifier les valeurs de width et de heigth des images
(en pixels) afin d'accélérer l'affichage.
• Sites d’icônes
http://www.gifworld.com/
http://www.iconbazaar.com/
Les images 18
Pour insérer une image <img src=" Nom du fichier " >
Options
align=" attibut " (middle, top, bottom) position verticale
(left, right) permettent au texte de s’enrouler
autour de l’image
alt=" titre " apparaît si la souris s’arrête sur l’image
border="n" cadre noir autour de l’image d’épaisseur n
width="y" largeur du tableau (en pixel)
height="y" hauteur du tableau (en pixel)
Exemple
<img src="mafoto.jpg" align="middle" border="2" alt="Ma photo">
Les images réactives 19
• Permettent de lier des documents en fonction de la zone

cliquée (une carte de France où chaque région est reliée à un
document)
• 2 éléments indispensables:
 un fichier image
 définir les zones réactives, de 3 types :
- cercle : coordonnées du centre + rayon : Xc,Yc,R
coordonnées du centre et d'un point du cercle
- rectangle : points supérieur gauche et inférieur droit
: X1,Y1,X2,Y2
- polygone : coordonnées de chaque sommets
Les coordonnées sont définies en pixels
pour définir les zones on utilise Mapedit
(http://www.boutell.com/mapedit) ou Dreamweaver
Les images réactives : exemple 20
Définition des zones cliquables

<map name="NomPartition"> Options:
<area shape="rect" Circle
href="lelien" poly
alt="textepourlasouris"
coords="les coordonnées">
<area … >
</map>
Image associée à la partition
<img src="nomdufichierimage"
usemap="#NomPartition" >
Exemple
http://www.univ-rouen.fr/pharmacie/facultes/france2.html
Les liens 21
Image ou texte
• vers un document distant :
<a href="url du document cible"> zone cliquable </a>
option: target="_blank" ou "nomduframe"
• vers un document local :
<a href="nom du fichier"> zone cliquable </a>
• vers une partie précise du document :

<a href="#NomAncre"> zone cliquable </a>
<a href="url#NomAncre"> zone cliquable </a>
<a href="fichier#NomAncre"> zone cliquable </a>
Le point à atteindre doit être marqué par :

<a href="NomAncre"> texte </a>
Les liens : autres 22
Image ou texte
• vers un courier électronique :
<a href="mailto:email"> zone cliquable </a>
exemple
<a href="mailto:Eric.Hitti@univ-rennes1.fr ?
Subject=Cours&Body=Coucou"> pour m'ecrire </a>
• vers un serveur ftp :

<a href="ftp://nomduserveur"> zone cliquable </a>
• vers un serveur telnet :

<a href="telnet://nomduserveur"> zone cliquable </a>
Les tableaux 23
Ils permettent d’organiser le texte et les images avec

ou sans visualisation des cadres
<table (liste des options)> … <\table>
border="n" contour d’épaisseur n (0 pas de contour)

cellpading="x" espace entre le texte et le contour de cellules
cellspacing="x" épaisseur du trait entre les cellules
width="y" largeur du tableau (en pixel ou en %)
height="y" hauteur du tableau (en pixel ou en %)
bgcolor="red" couleur de fond du tableau
align="left" left, center ou right
Tableau : les éléments 24
Titre d’un tableau : caption
<caption options> le titre du tableau </caption>

align="bottom" (ou "top") position du titre
Les lignes : tr
<tr options> … </tr>

align= "center" (right, left) alignement horizontal
valign="top" (middle, bottom) alignement vertical
Tableau : les éléments 25
Les éléments de la lignes : td
<td options> … </td>

colspan="n" la cellule s’étend sur n colonnes
rowspan="n" la cellule s’étend sur n lignes
<td></td> donne une cellule vide sans bordure
<td>&nbsp</td> donne une cellule vide avec bordure
Cellule titre : th
<th options> … </th>

Équivalent à td mais le texte est automatiquement centré et gras
Tableau : exemple 26
Pour construire un tableau on raisonne par ligne.
On commence par construire un tableau avec le maximum de lignes

et de colonnes nécessaires, ici 4 lig 5 col
Puis ligne par ligne on définit les fusions s'il y en a, et on ne

redéfinit pas une cellule qui a déjà été fusionné à la ligne
précédente
3c en lig 2c col 2c col

1c 1c 1c rien rien
1c 1c 1c 1c 1c
1c 1c 1c 1c 1c
<table border="0" bgcolor="yellow">

<caption align="top"> Comparatif modèle économique </caption>
<tr>
<th colspan=3> Modèle </th>
<th rowspan=2> Vitesse <br> en km/heure </th>
<th rowspan=2> Consommation <br> en litre/100 km </th>
</tr>
<tr>
<th> Marque </th> <th> Type </th> <th> Numéro de serie </th>
</tr>
<rt>
<td> Peugeot 106 </dt> <td>b2 </td>
<td align=middle> 234.34 </td><td> 132 </td> <td> 5,7 </td>
</tr>
<tr>
<td> Citroën AX</td> <td> AT67B8</td>
<td align=middle> 6789 </td><td> 126 </td> <td> 5,5 </td>
</tr>
</table>
Les cadres ou Frames 29
• permettent de diviser une page HTML en plusieurs zones

(ou cadres), chacune pouvant afficher, indépendamment
des autres, une pages HTML
• Intérêt
afficher en permanence certaine informations :
- boutons de navigations,
- table des matières,
- logos,
-…
Les frames : syntaxe 30
• un fichier définit la partition de l’écran
• il n’y a plus de balise « body »
• la balise FRAMESET partitionne une fenêtre
• la balise FRAME définie le contenue d’une fenêtre

Les frames : syntaxe 31
FRAMESET 1 FRAMESET 2
FRAME 2
FRAME 1
FRAME 3
Les frames : structure 32
<html>
<head> …</head>
d’autres frames
<frameset attributs> ou d’autres
<frame attributs> frameset
…
…
</frameset>
<noframe> … </noframe>
</html>
pour les navigateurs ne gérant pas les frames

Les frames : attributs de FRAMESET 33
rows = "n, n%, …,*"

divise la zones en cellules horizontales
n hauteur en nombre de pixels
n% hauteur en % de l’écran
* hauteur restante
cols = "n, n%, …,*"
divise la zones en cellules verticales
border="n"
taille de la bordure en pixels
frameborder =" yes" | "no"
détermine si la frontière entre deux cadres doit être visible ou
non (yes par défaut)
bordercolor = "couleur"
détermine la couleur des frontières
Les frames : attributs de FRAME 34
name="nom" le nom du cadre
src = "url" le document à afficher
marginwidth="n" taille de la marge (pixels)
marginheight = "n" nombre pixels entre la frontière

haute/basse et le document
scrolling ="yes/no/auto" barre de déroulement
noresize empêche de modifier la taille à

l’aide de la souris
Les frames : exemple 35
<html>
<head> …</head>
<frameset cols ="25%,*">
<frame scrolling="YES" name="cadre1" src=
" documents1.html">
<frameset rows ="50%,50%">
<frame scrolling="YES" name="cadre2"
src="documents2.html">
<frame scrolling="NO" name="cadre3"
src="documents3.html">
</frameset>
</frameset>
<noframe>
Dommage votre <I> Browser </I> ne permet pas les frames
</noframe>
</html>
Les frames : exemple 36
cadre2
cadre1
cadre3
Les formulaires 37
Entre les balises <form> </form> on trouve

les balises définissant les éléments du formulaire
du texte précisant le rôle des éléments
Attributs
method = GET ou POST
Définit la méthode de transfert des données
action quel script doit être appelé pour traiter le formulaire
action ="mailto:Eric.Hitti@univ-rennes1.fr"
action="confirmation.php3"
name="nom_du_formulaire"
enctype="MULTIPART/FORM-DATA" (pour le php)
="text/plain" (pour le mail)
target si nécessaire il précise l'endroit ou doit être renvoyé les
informations
Les formulaires : les éléments 38
<input> définit un élément du formulaire
<input type="TEXT">
Attribut name="Nom_Champ" nom de la variable
Attribut size="nb", taille en nb de caractères
Attribut value="Valeur" valeur par défaut
<unput type="PASSWORD">
Permet la saisie avec affichage * à la place de chaque caractère
<input type="BUTTON">
Attribut value="Texte" texte affiché sur le bouton
<input type="SUBMIT">
provoque le transfert des données du formulaire vers le serveur
< input type ="RESET">

Réinitialise le formulaire
Attribut name ="Nom_Champ" nom de la variable
Attribut value="Texte" texte affiché sur le bouton
< input type ="RADIO">

Attribut name ="Nom_Champ" nom de la variable
Attribut value ="valeur" valeur fourni au serveur
Attribut checked, il permet de sélectionner un bouton par
défaut dans un ensemble de boutons portants le même nom (NAME), un
seul bouton peut avoir cette valeur
< input type ="CHEKBOX"> ensemble de cases à cocher

Attributs :
name="Nom_Ensemble" nom de la variable
value="valeur" valeur associé à la case
checked, état initial de la case,
plusieurs cases peuvent être cochées
<textarea> … </textarea>
permet de créer une zone de saisie de texte de plusieurs lignes
Attributs :
name="Nom_Zone" nom de la variable
rows="nl" nombre de lignes
cols="nc" nombre de colonnes
<select> … </select>
Liste à options, menus déroulant ou ascenseur, choix définit par <option>
Attribut name="Nom_Liste"
Attribut size="nb" nb d'éléments visibles simultanéments
si nb>1 ascenseur, si nb=1 menu déroulant
Attribut multiple autorise la sélection de plusieurs items
<option>
Attribut value="valeur" valeur transmise au serveur
Attribut selected valeur d'option qui apparaît en premier
Exemple <SELECT name="Liste1" size="1">

<OPTION value="1" >Bleu
<OPTION value="2" selected>Blanc
<OPTION value="3" >Rouge
</SELECT>
Les formulaires : exemple 42
<form method="post" action="mailto:Eric.Hitti@univ-rennes1.fr?subject=reservation"

enctype="text/plain" >
Nom :<input type="text" name="NOM" size="20"><br>
Mot de passe <input type="password" name="PASS"><br><br>
Enseignant <input type="radio" name="STATUT" value="prof">
Etudiant <input type="radio" name=" STATUT " value="etudiant" checked>
<br><br>
Choisir le mois du stage<br>
<select name="MOIS" size="2">
<option value="septembre">septembre</option>
<option value="octobre">octobre</option>
<option value="novembre">novembre</option>
<option value="decembre">decembre</option>
</select><br>
Taper vos commentaires <br>
<textarea name="COMMENTAIRES" rows="10" cols="50"> </textarea><br>
<input type="submit" value="Envoyer" name="submit">
<input type="reset" name="reset" value="Effacer">
</form>
Les formulaires : exemple 43
Les formulaires : résultat 44
Un exemple de php : confirmation.php3 45
Je veux que l'envoie du formulaire provoque les actions suivantes :
Vérifier que le mot de passe est bon

Vérifier que tous les Nom et Mois ont été rempli
Donner les erreurs correspondantes

Confirmer le bon déroulement de l'inscription
Ajouter l'inscription dans un fichier texte
Envoyer un mail spécifiant l'inscription
On modifie le formulaire précédent

<form method="POST" action="confirmation.php3"
enctype=" MULTIPART/FORM-DATA " >
Un exemple de php : confirmation.php3 46
<html>
<body>
<center><h1>Prise en compte d'une inscription</h1></center>
<?
echo"<h2>$NOM</h2>";
$erreur="0";
if (empty($NOM) or empty(PASS) or empty(MOIS))
{echo"Tous les champs n'ont pas été rempli <P>";$erreur="1";}
if ($PASS<>"toto"){echo"Le mot de passe n'est pas bon <P>";$erreur="1";}
if ( $erreur=="0")
{
mail("Eric.Hitti@univ-rennes1.fr","Inscription_cours_html","$NOM $STATUT,
$MOIS, $COMMENTAIRES");
$F=fopen("inscrits.txt","a");
$LIGNE= "$NOM $STATUT, $MOIS, $COMMENTAIRES" ;
fputs($F,"$LIGNE\n");
fclose($F);
echo"Votre etes inscript pour le mois de $MOIS";
}
?>
</body>
</html>
Les formulaires : avec php 47
Un exemple de javascript 48
Dans ma bibliographie je veux que lorsque l'on cherche à

télécharger un de mes articles, une fenêtre s'ouvre rappelant
qu'il y a un copyright sur ce document et ne lançant le
téléchargement que si l'utilisateur a appuyé sur un bouton de
confirmation
Un exemple de javascript :copyright.html49
<HTML>
<HEAD>
<SCRIPT Language="Javascript">
function Autorisation (nomfichier)
{
var resultat=window.confirm('Il y a un copyright sur ce document blablabla');
if (resultat==true)
{
open(nomfichier);
}
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="JavaScript:Autorisation('toto.txt')"> CLIQUER pour avoir l'article
</A>
</BODY>
</HTML>
Un exemple de javascript : résultat 50
Un autre exemple de javascript 51
<BODY onload="OuvrirEvt(evenement.htm','doc','location=no,toolbar=no,
status=no,directories=no,scrollbars=yes,width=440,height=350,
bgcolor=#FF2D00')">
Les feuilles de style 52
Avec les feuilles de style c'est le créateur du document qui impose sa

conception de la mise en page et non plus le visiteur ou le navigateur
que ce dernier utilise.
<head>
<title> Bloc style incorporé </title>
<link ref="STYLESHEET" type="text/css" href="style.css">
<style type="text/css">
H1 {font-size:20pt; font-family:arial; color:red}
H2 {font-size:15pt; text-align:right; color:maginta}
</style>
</head>
<body>
<p style="margin-left: 2 cm">
Exemple de page à réaliser 53
Titre Titre de la page

Mots clés En-tête 1
Ma page perso
Description Université rennes1 Lien site univ
adresse
Fond d'écran Lien courrier
mail
Une photo
Enseignement
Tableau invisible
En-tête 2 Centré, réduit
Recherche
a
b
Liste à puces abc
Tableau
Biblio
Cellule de taille 
1
et couleurs  Liste à puces 123
2

Courshtml 2

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Courshtml 2

Hochgeladen von

Copyright:

Verfügbare Formate

1

Hyper Text Markup Language

Transmettre des informations à l'autre bout du monde

Le traitement de texte Eric  Instructions de mise en forme

- Je créé un fichier .HTML <i> Eric </i>

- Je visualise le résultat à l'aide d'un navigateur (Netscape)

- Je veux : Eric en gras

- L'éditeur modifie le code en insérant

La page source en .htm ou .html

Le navigateur (Netscape) permet de visualiser la page web en

• HTML est un langage à balises

• Les balises permettent de réaliser des actions sur un groupe de

• Les balises en minuscules

• Les balises peuvent recevoir des attributs (options) en

<html> … </html> début et fin de document

Dans la section head

<body> … </body> le corps du document

couleur=(aqua, black, fuschia, gray, green, lime, marroon, navy, olive,

<p options > </p> saut de paragraphe

<br> passage à la ligne

<hr options> Insertion d’une ligne de séparation

<hn> … </hn> titre de niveau n (1 à 6)

Les listes ordonnées

Les liste non ordonnées

< &lt; é &eacute;

> &gt; è &egrave;

& &amp; ê &ecirc;

&nspb; (un blanc) à &agrave;

<< &#171; ï &iuml;

>> &#187; ç &ccedil;

• Images de types GIF ou JPEG (PNG)

Pour insérer une image <img src=" Nom du fichier " >

• Permettent de lier des documents en fonction de la zone

Définition des zones cliquables

• vers une partie précise du document :

Le point à atteindre doit être marqué par :

• vers un serveur ftp :

• vers un serveur telnet :

Ils permettent d’organiser le texte et les images avec

<table (liste des options)> … <\table>

border="n" contour d’épaisseur n (0 pas de contour)

Titre d’un tableau : caption

<caption options> le titre du tableau </caption>

<tr options> … </tr>

Les éléments de la lignes : td

<td options> … </td>

<th options> … </th>

Pour construire un tableau on raisonne par ligne.

On commence par construire un tableau avec le maximum de lignes

Puis ligne par ligne on définit les fusions s'il y en a, et on ne

3c en lig 2c col 2c col

<table border="0" bgcolor="yellow">

• permettent de diviser une page HTML en plusieurs zones

• un fichier définit la partition de l’écran

• il n’y a plus de balise « body »

• la balise FRAMESET partitionne une fenêtre

• la balise FRAME définie le contenue d’une fenêtre

pour les navigateurs ne gérant pas les frames

rows = "n, n%, …,*"

name="nom" le nom du cadre

src = "url" le document à afficher

marginwidth="n" taille de la marge (pixels)

marginheight = "n" nombre pixels entre la frontière

< < é é

> > è è

& & ê ê

&nspb; (un blanc) à à

<< « ï ï

>> » ç ç