Vous êtes sur la page 1sur 23

Le langage HTML

HyperText Markup Language


Format privilégié des pages Web

HTML
! Langage : implique syntaxe, règles de grammaire
! Hypertexte :
" C ’est à dire lecture non linéaire :
# liens vers des fichiers extérieurs, sur l ’ordinateur local ou bien sur une
machine quelque part ailleur sur le réseau Internet.
! Des balises (marqueurs, tags) : sont des commandes transmises aux
navigateurs (NetScape, IE, iCab, Chimera, Safari, Mozilla, Lynx …)
! Les fichiers au format HTML, contenant les ordres de mise en page
ont l!’extension .html, ou .htm, ce sont les pages Web
! La page Web : tout ce que l!’on peut voir à l!’aide de son Navigateur,
en jouant avec l!’ascenseur de la fenêtre.
! Une présentation Web contient une ou plusieurs pages Web,
! Un site Web correspond à une présentation Web

1
Fichier de type texte : Plain ASCII
! Code ASCII :
# Nombre entier correspondant à un caractère, un chiffre ou un symbole
(accessible au clavier ou non).
# Ce nombre est compris entre 0 et 255
– Ex: codeASCII (A) = 65, codeASCII (&) = 38

! Une version de HTML est une


" DTD (Document Type Definition),
" Elle fait partie d ’un standard plus vaste SGML (Standard Generalized
Markup Language)
! Ce document est du texte ordinaire, il contient
" Le texte du document,
# C ’est à dire l ’information que vous voulez donner.

" Les balises ou marqueurs HTML, « entourent » le texte :


# Pour préciser la structure du document, la mise en forme du texte et les

liens hypermédias.
" <nomBalise> le texte concerné </nomBalise>
# Les balise vont par deux en général, mais parfois sont seule

Les éditeurs de pages Web


! Les logiciels de traitement de texte
" Simple : WordPad, SimpleText, Teachtext (Mac), bloc-note
" Évolués (Word, AppleWorks), mais surtout sauver en « texte ASCII ».
! Les éditeurs WYSIWYG (visuels)
" Des opensources comme NVU, les commerciaux Adobe GoLive,
MacroMedia DreamWeaver, FrontPage de MicroSoft…
# Créent plus ou moins proprement le code HTML,

# Permettent aussi d ’intervenir dans le code HTML, parallèlement au

mode graphique.
# Ils proposent également des scripts JavaScript (ex : boutons « survol »,

carte réactive), des feuilles de styles etc ...


! Les convertisseurs (moins bons résultats),
" Transforment un texte formaté dans un logiciel de traitement de texte
en texte HTML :
# Rtf2html, lateX2html,

# Des logiciels tels que Word, PowerPoint, Quark XPress… proposent

d ’enregistrer au format HTML.


• Mais il est souhaitable de revoir et de « nettoyer » le code créé.

2
Généralités d!’écriture
! Les Balises
" Nom de la balise encadré par < et >
# Double : affecte une partie de la page

• <baliseGras> texte gras </baliseGras>


– <B> texte gras </B>
# Seule : provoque une rupture dans la page
• Un texte <baliseChangedeLigne>
– Un texte <BR>
" Syntaxe :
• Majuscules et minuscules : indifférent,
• Le changement de ligne tapé dans un texte n ’est pas reconnu par les
navigateurs, il faut le lui signaler par une balise.
" Attributs des balises
# Pour préciser l ’effet d ’une balise on lui adjoint un ou plusieurs attributs

• Chaque attribut est séparé par un espace,


• À chaque attribut est affecté une valeur : texte (entre guillemets) ou
nombre,
<balise attribut1=nbr attribut2=« toto »>
Par exemple :
<font size=2> mon texte </font>
<a href=« http://www.sncf.fr/ »> voyages </a>

! Les caractères spéciaux


" Pour représenter tout ce qui n ’est pas
# Des lettres (de l ’anglais) et des chiffres

• Donc pour les accents, chaque accent porte un nom


• Certains caractères de ponctuation
• Certains caractères qui ont un nom :
– © copyright , & : ampersand , …
# Règle à suivre :
• &laLettrenomAccent;
• &nomCaractère;
• &#CodeASCII;
– Attention il n ’y a pas d ’espace entre les délimiteurs & et ;
– Chaque accent porte un nom, et ce nom est précédé de la lettre à laquelle
s’applique l’accent sous la forme suivante :
Accent aigu : acute, Accent grave : grave, Accent circonflexe : circ
Tréma : uml, Cédille : cedil, Tilde : tilde
Lettre surmontée d’un o : ring, lettre barrée : slash
Lettre collée à une autre (œ, æ) : lig
Exemples :
– &eacute; par exemple le mot Déjà s ’écrit D&eacute;j&agrave;
– &#62; ou bien &#gt; pour le signe >
– &nbsp; indique un espace insécable

3
! Les liens dynamiques
# Ils servent à référencer d ’autres documents des fichiers aux formats
standards du Web :
• Fichiers textes au format HTML, d ’extension : .html ou .htm
• Fichiers multimédias :
– Fichiers sons d ’extension : .au, .midi, .wave, .mov ou .qt (QuickTime)
– Fichiers images d ’extension : ;gif, .jpg ou jpeg, .png
– Fichiers vidéos d ’extension : .mpeg, .avi, .mov .qt (QuickTime)

# Selon l ’endroit où se trouve le fichier l’adressage peut être


• Absolu sur le réseau Internet
http://www.truc.edu/DD/web/media/images/pict.gif
• Interne absolu , à la machine locale :
nomDD/web/media/images/pict.gif
• Interne relatif :
images/pict.gif
../ressources/fonds/cielDeNuit.gif

Structure d!’un document HTML - La page Web

! Balises de structure globale


" HTML, HEAD, BODY, ADDRESS
<HTML>
<HEAD>
<!-- renseignements utiles sur le document -->
<TITLE>Un Titre causant</TITLE>
</HEAD>
<BODY>
Le corps
…le document = le contenu, l ’information que l ’on veut afficher dans le navigateur des
visiteurs…..
<BODY>
<ADDRESS>
<!-- renseignements utiles pour l’internaute-->
</ADDRESS>
</HTML>
Pour l ’internaute :
apparaît dans la barre de titre de la fenêtre du navigateur,
et est enregistré comme signet
8

4
! L!’en-tête
" On y trouve le titre de la page Web, qui doit être assez explicite : balise TITLE .
" Ce titre s ’affichera
# Dans la barre de titre de la fenêtre de navigation

# Dans la page des signets (marque-pages, bookmarks ou favoris)

# Par défaut, si aucun titre n ’est spécifié, c ’est le nom du fichier qui sera utilisé

• Par exemple : index.html, default.htm … ,


• Ce qui n ’est pas descriptif du contenu de la page, ni mémo-technique.
# Ce nom doit être spécifié ainsi il est différent du nom du fichier HTML de la page

Web.
• N ’oubliez pas que les noms de fichiers ne doivent pas contenir d ’accents,
de blanc, de caractères spéciaux, le titre de la fenêtre peut en contenir !

" On y trouve des renseignements sur le contenu du document qui seront


utilisés par les moteurs de recherche, pour répondre aux requêtes posées par
un visiteur.
# Mais, elles sont non-visibles par le visiteur, le navigateur ne les affiche pas

" <META name=« nom » lang=« langue »


content=« contenuAssociéÀname » >

Ex : <META name=“description“ content=“Phrase_décrivant_votre_site“ >

La balise META
! Les attributs les plus courants à la balise META :
# L’attribut LANG indique le langage dans lequel est rédigé le contenu de l’attribut CONTENT.
Certains moteurs de recherche permettent de faire des sélections en fonction de la langue
utilisée.
# Pour un site en français, mettre lang=«fr» (« en » pour anglais, « en_US » pour
américain, ...). Ce champ n ’est pas obligatoire.
# Les valeurs les plus utiles de l’attribut NAME :
# name=« author » content=« Nom_de_l’auteur » : indique le nom de l’auteur de la page
# name=« keywords » content=« Liste_de_mots_clés_séparés_par_virgule » :
donne une liste de mots-clés qui pourront correspondre aux critères de recherche entrés par
l ’internaute dans un moteur de recherche.
# name=“description“ content=“Phrase_décrivant_votre_site“ : petit texte qui s’affiche
dans les réponses des moteurs de recherche et qui décrit le site. Évitez les accents, tous les
moteurs de recherche ne les traduisent pas.
<HTML>
<HEAD>
<TITLE>Observatoire de Paris</TITLE>
<META name=“author“ lang=“fr“ content=“toto“>
<META name=“keywords“ lang=“fr“
content=“observatoire, Paris, astronomie, recherche“>
<META name=“description“
content=“Le Site de l’Observatoire de Paris.“>
</HEAD>
...
</HTML>
10

5
! Le corps du texte
" Les attributs de la balise BODY permettent de modifier
# La couleur du fond : BGCOLOR

# La couleur du texte : TEXT

# La couleur des liens non visités : LINK

# La couleur des liens déjà visités : VLINK

# La couleur des liens à l ’instant du clic : ALINK

" La règle est :


# ATTRIBUT = #rrggbb

# Où rr, gg et bb indiquent les quantités de couleur Rouge Verte et Bleu

en hexadécimal : entre [00..FF].


Par exemple :
• Noir : 000000 Blanc : FFFFFF
• Rouge : FF0000 Vert : 00FF00 Bleu : 0000FF
• Jaune : FFFF00 Magenta : FF00FF
• Gris moyen : 808080
• Etc …

<HTML>
<HEAD>
...
</HEAD>
<BODY BGCOLOR=« #003366 » TEXT= «#CCCCFF» >
du texte
</BODY>
</HTML>

! Le fond de la page sera bleu foncé et le texte bleu pâle


# Vous pouvez également écrire le nom de la couleur en anglais
ex : <BODY BGCOLOR=pink>

! Le pied de page
" Le texte encadré par la balise ADDRESS sera affiché en italique;
# On y trouve, habituellement, les informations suivantes :
• Nom et coordonnées de l ’auteur
• Adresse électronique de la personne à contacter au sujet de la page
• La date de la dernière modification
• URL de la page
– bien pratique lorsqu ’on l ’imprime de garder une trace de l ’adresse sur le web de la page

! Les commentaires - Pour votre usage personnel : <!-- no comment -->


# Aide au développement et à la maintenance
# Important dans le cas d ’un travail d ’équipe .

6
Modifier la présentation du texte
! Le texte sous HTML est écrit “!au kilomètre!”.
" Les changements de ligne (par la touche “ RETURN ” ou “ ENTREE ”) ne
sont pas pris en compte par les navigateurs.
• Il faut impérativement mettre de façon explicite dans le HTML les
changements de ligne que l’on veut imposer.
! La balise imposant un changement de ligne est <BR>
# C’est une balise seule, l’abréviation de BREAK.
! Changer de paragraphe balise <P> (pour PARAGRAPHE).
# Impose un changement de ligne puis saut de ligne.
! Tracer une ligne horizontale (en anglais : Horizontal Rule).
# Balise <HR> et ses attributs SIZE, WIDTH, ALIGN …
Ex : <HR SIZE=10 WIDTH=« 50% » ALIGN=left>

Notons que ces trois balises s’utilisent seules.


! Pour centrer du texte dans la page Web :
<CENTER> partie de texte que l ’on veut centrer </CENTER>

13

! Styles de caractères
" Pour faire ressortir certaines informations de votre page Web :
<B> … </B> Gras (Bold face)
<I> … </I> Italique
<U> … </U> Souligné (Underline)
texte
<STRIKE>texte</STRIKE> Barré
# Ce sont des balises doubles (qui encadrent donc le texte affecté), qui
peuvent s’emboîter les unes dans les autres.
" Texte en exposant ou en indice :
<SUP> … </SUP> xèm
<SUB> … </SUB> Xn
" Texte à la manière d ’un télétype :
<TT> … </TT> machines à écrire (taille constante des lettres)
! Police de caractère
" Pour que le navigateur affiche votre texte dans la police de caractère de votre
choix : balise FONT
# Au cas où cette police n ’existerait pas sur l ’ordinateur du visiteur, il est

souhaitable d’indiquer une deuxième police courante comme Arial :


<FONT FACE=«Brush Script , Arial»>
… du texte …
</FONT>

7
! Taille des caractères pour les titres :
" La balise <Hn> où n varie de 1 à 7
# 1 correspondant à la plus grosse taille, 7 à la plus petite

• Cette balise permet d ’écrire le texte encadré en gras, à la taille indiquée,


• Elle provoque un changement de ligne à la fin,
• En général, la taille standard du reste du texte correspond à la taille 4.
• La taille réelle à l ’affichage peut être différente selon le navigateur.

# Ex :
<H1>Voici le gros titre</H1>
<H2>Voici un plus petit titre</H2>
<H5>Et voici un tout petit titre</H5>

Vous donnera quelque chose du genre :

Voici le gros titre


Voici un plus petit titre
Et voici un tout petit titre

! Pour le texte en général :


" Pour améliorer votre présentation, vous pouvez
# Modifier la taille de l ’ensemble du texte, d ’une partie du texte ou de

certains caractères :
<BASEFONT SIZE==«3»>
• N!’affecte pas la taille des titres de la page.
• Cette balise n!’est plus très employée maintenant, elle
est remplacée par l!’utilisation des feuilles de
styles, CSS (voir HTML avancé).
# La balise FONT et son attribut SIZE :
<FONT SIZE=n> … </FONT>
• n représente la taille absolue ou relative des caractères.
• En absolu, n varie de 1 à 7,
• En relatif, n varie de -6 à +6, sans pouvoir dépasser les bornes de taille
absolue 1 et 7.
• Attention, tous les navigateurs ne sont pas capables de gérer les 7 tailles
de caractères
" Actuellement pour la gestion des textes,
# balise DIV et les CSS sont souvent utilisées

Les balises CENTER, FONT … sont dans la norme du html transitionnel et ne sont pas
dans la norme du htlml4 stricte.

8
! Modifier la couleur d!’un texte
" Une partie du texte
<FONT COLOR=«#FF00FF»>texte</FONT >
" Rappel pour l ’ensemble du texte
<BODY TEXT=«#FF00FF»>texte</BODY >
! Créer une citation
# Le navigateur applique un retrait du texte des deux côtés de la page
<BLOCKQUOTE>texte</BLOCKQUOTE >

! La balise <PRE> (preformatted) affiche le texte entré tel quel;


par exemple :
<PRE>
+------------------------+
! Tableau !
+-----------+------------+
! Col 1 ! Col 2 !
+-----------+------------+
</PRE>

Présentation du texte… Les listes


! Pour afficher une liste de “!choses!”, bien alignées :
" Les listes à puces
# Balises <UL> unnumbered list et <LI> ligne

# Taper <UL> avant la liste (</UL> après) et <LI> devant chaque élément

de la liste.
<UL>
<LI>Entr&eacute;e
<LI>P&agrave;tes
<UL>
<LI>Lasagnes
<LI>Tortellini
</UL>
<LI>Caf&eacute;
</UL>
Va donner quelque chose du genre :
•Entrée
•Pâtes
° Lasagnes
° Tortellini
• Café 18

9
" Les listes numérotées
# Balises <OL> (pour Ordered List) et <LI>

• Même principe
• On peut bien sûr mélanger les types de listes :
<OL>
<LI>El&eacute;ment 1
<LI>El&eacute;ment 2
<UL>
<LI>El&eacute;ment 2-1
<LI>El&eacute;ment 2-2
</UL>
<LI>El&eacute;ment 3
</OL>

Va afficher quelque chose du genre


1. Elément 1
2. Elément 2
•Elément 2-1
•Elément 2-2
3. Elément 3

! Les listes de définitions (termes et définitions)


# Pour un glossaire par exemple, balises <DL> et <DT>
• Taper <DL> avant la liste (</DL> après)
• <DT> devant chaque terme de la liste
• <DD> devant chaque définition de la liste
<DL>
<DT>Bande passante
<DD>D&eacute;bit maximum utilisable sur une liaison ...
<DT>IPng
<DD>Internet Protocol next generation, future version 6 du protocole
IP etc ...
</DL>

Va afficher quelque chose du genre


Bande passante
Débit maximum utilisable sur une liaison …
Ipng
Internet Protocol next generation, future version 6 du protocole IP etc ...

10
Intégrer une image
! Ne pas oublier, avant d!’insérer une image,
# De vérifier les problèmes de copyright,
# De tenir compte de la résolution, la taille et le poids de l ’image (temps
de chargement, taille écran).
# Qu’une même image utilisée dans plusieurs endroits d’une page Web
n’augmente pas le temps de chargement (copie stockée
provisoirement).
! Pour insérer une image dans une page Web, la balise <IMG>.
# C’est une balise seule.
# Elle possède toujours au moins un attribut qui indique le chemin
d’accès au fichier image qui doit être inclus dans la page web.
• L’inclusion d’une image dans le texte n’implique pas un changement de
ligne. Si on en veut un, il faut ajouter une balise <BR>, ou <P>.
" La forme la plus générale pour l’insertion d’image est la suivante :
<IMG SRC=“NomFichierImage“
ALIGN=aQuelEndroitParRapportTexte
HSPACE=valeur VSPACE=valeur
WIDTH=valeur HEIGHT=valeur
BORDER=valeur ALT= “texteAlternatif“ >

21

! Les attributs de la balise <IMG>


" SRC : Indique le nom complet (chemin d’accès compris) du fichier image.
D’une façon générale, l’image doit être au format JPEG ou GIF ou PNG.
• Ex : <IMG SRC=“../Images/maPomme.jpg“>
" ALIGN, peut prendre les valeurs : top, middle ou bottom pour indiquer
comment l’image doit être alignée par rapport au texte. Top fait correspondre
le haut de l’image à la ligne de texte courante, middle fait correspondre le
milieu de l’image , bottom le bas de l’image.
left ou right pour placer l’image à gauche ou à droite de la page, tout en
permettant au texte de s’écouler autour = habillage de l ’image.
• Ex : Une pomme <IMG SRC=“Images/maPomme.jpg ALIGN=middle>
• Remarque : pour mettre fin à l ’habillage : <BR CLEAR=valeur>, où valeur
peut être left, right, all
Attention, contrairement à la plupart des attributs, il n’y a pas de guillemets autour
du positionnement
" HSPACE et VSPACE : À quelles distances horizontale et verticale du texte
environnant se trouve l’image. La valeur donnée est exprimée en pixels.
" WIDTH et HEIGHT Définissent la taille que l ’on désire lors de l ’affichage
(respectivement la largeur et la hauteur de l’image).
• On peut imposer une nouvelle taille à une image, souvent plus petite. Mais attention
l ’image entière est téléchargée, et à l ’impression on aura la taille originale.
• Il vaut mieux créer une image vignette, dans un logiciel de traitement des images, qui
pointera vers l ’image au format original.

11
" BORDER : Pour dessiner un cadre autour de l’image. La valeur de cet
attribut, exprimée en pixels, indique l’épaisseur de la bordure.
" ALT : Est important
• Pour ceux qui ne disposent pas d’un navigateur graphique (rare),
• Pour ceux (plus nombreux) qui ont désactivé le chargement d’image sur leur
navigateur, afin de gagner du temps de chargement.
• L’attribut ALT permet de mettre un texte qui s’affichera lorsque l’image ne
sera pas chargée. En général, on y met le descriptif ou le nom de l’image.
! Image servant de lien (d’ancre) - Forme générale d!’un lien :
<A HREF=“...“> objet sur lequel on clique </A>,
• Objet : texte ou image à cliquer qui, si on clique dessus, enverra l’utilisateur à
l’adresse indiquée dans l ’ attribut HREF :
<A HREF=“url“> <IMG SRC=“nomFichierImage“></A>
• Exemple d’utilisation : une imagette s’affiche et, si l’on clique dessus, l ’image
correspondante est chargée sur une nouvelle page à sa taille réelle.
• Remarque : Rien n’empêche d’utiliser une image pour changer de page. Par
exemple pour une série de pages Web qui se suivent, utiliser des images de
flèches, pour se déplacer de pages en pages.
• On peut remplacer des éléments de texte par des images symbolisant ces
éléments (puces, trait horizontal, ...) : il faut que leur représentation ne prête
pas à confusion, et rester cohérent dans tout le site.
– HREF nous permet donc d ’établir, selon sa valeur, un lien vers une image ou une
autre page Web

Les liens … résumé


! Veillez à vérifier vos liens, une fois qu!’ils sont créés.
" Créer un lien vers une page Web externe
<A HREF=« http://www.u-psud.fr/iut/formation/CAOlink»>
<IMG SRC=“image/logoCAOlink.jpg“></A>

" Créer un lien dans la page elle-même : une ancre


1) Nommer la partie concernée dans la page Web
Donc à un endroit de la page
<A NAME=« etiquette1»></A>
2) Créer un lien vers cette partie (grâce à son nom)
Donc au dessus de l ’endroit étiquetté
<A HREF=«# etiquette1»> ... </A>

" Créer un lien vers une image


<A HREF=“...“> <IMG SRC=“...“></A>

" Créer un lien vers une messagerie électronique


<A HREF=« mailto :prenom.nom@nomDeDomaine»> Envoyez-moi un mél </A>
À éviter pour les problèmes de SPAM

24

12
Tableaux
! Un tableau est utile pour :
" Présenter une liste de données,
" Présenter le texte en colonne comme dans un journal,
" Contrôler le positionnement des objets (textes et images) dans votre page,
" Créer une bordure 3D autour d ’un objet.
! Créer un tableau avec la balise <TABLE>
" Il faut ensuite lui indiquer chaque ligne du tableau, et dans chaque ligne,
indiquer chaque changement de cellule.
# Une ligne de tableau est indiquée par la balise <TR> (pour Table Row).
# Les débuts de cellules sont marquées par <TD> (Table Division). Il n’y
a pas de balise de fin de cellule.
• Remarque : Un tableau peut être formé d’une seule ligne, ou d’une seule
colonne. Certaines cellules peuvent être vides ; il suffit pour cela de ne rien
mettre derrière la balise de début de cellule <TD> mais attention les
navigateurs peuvent interpréter différemment les cellules vides.
• Ex :
<TABLE>
<TR><TD>Cellule 1-1<TD>Cellule 1-2</TR>
<TR><TD>Cellule 2-1<TD>Cellule 2-2</TR>
</TABLE>

25

Ex :Pour obtenir le tableau :

Titre colonne 1 Titre colonne 2


Cellule 1-1 Cellule 1-2
Cellule 2-1 Cellule 2-2
Ceci est un tableau

il faut entrer le code HTML suivant :


<TABLE>
<TR><TH>Titre colonne 1<TH>Titre colonne 2</TR>
<TR><TD>Cellule 1-1<TD ALIGN=right>Cellule 1-2</TR>
<TR><TD>Cellule 2-1<TD ALIGN=right>Cellule 2-2</TR>
<CAPTION><B>Ceci est un tableau</B></CAPTION>
</TABLE>

• Souvent, la première ligne d’un tableau représente le titre des colonnes, Il suffit
pour cela de remplacer, dans la ligne correspondante, les balises de début de
cellule <TD> par <TH> (Table Head).
• Pour obtenir une légende au tableau : la balise <CAPTION>
– L’attribut ALIGN, valeurs top ou bottom (haut ou bas) permet de placer le texte au
dessus ou au dessous du tableau.

13
" Pour choisir le type de justification du texte :
# Alignement à droite, à gauche, ou centré

• Dans chaque ligne ou chaque cellule,


• Pour la position du texte (en haut, en bas ou au centre des cellules).
" Pour ce faire, il faut introduire dans les balises
# <TR> (pour toute une ligne) ou

# <TD> (pour une cellule seulement) les attributs :

ALIGN pour la justification du texte, avec les valeurs left, right ou center
(gauche, droite ou centrée)

VALIGN (alignement vertical) pour la position du texte, avec les valeurs top,
bottom ou center (haut, bas ou centre).

# L ’attribut BORDER permet de dessiner des bords au tableau, la valeur


s ’exprime en pixel
• si BORDER=0 bords invisibles à l ’affichage

Tableaux … les cellules


! On peut accompagner la balise <TABLE> des attributs suivants pour
jouer sur les cellules:
" BORDER=n
# donne l’épaisseur de la bordure de tableau en pixels

" CELLSPACING=n
# donne l’espacement entre les cellules du tableau en pixels

" CELLPADDING=n
# distance entre le bord de cellule et le bord de texte en pixels

" WIDTH=n%, ou =n
# impose la taille du tableau en pourcentage de la taille de la fenêtre du

navigateur, on peut l ’indiquer aussi en nombre de pixels.


Ex :
<TABLE BORDER=6 CELLSPACING=6 CELLPADDING=10
WIDTH=90%>

</TABLE>

28

14
Tableaux de toutes les formes ...
! Les tableaux sont encore souvent utilisés par les créateurs de pages Web
pour fixer les éléments images, textes, barre de navigation dans la page,
quelque soit les caractéristiques de l!’écran du visiteur.
! Groupement de lignes et de colonnes
# L’attribut ROWSPAN=n, indique que n cellules sont regroupées

horizontalement
# Pour regrouper des cellules verticalement, le principe est le même :

l’attribut est COLSPAN=n.


Ex :

la ligne s’écrit : <TR><TD>x<TD>y<TD>z</TR> x y z

la ligne s’écrit : <TR><TD COLSPAN=2>x<TD>z</TR> x z

Remarque : Les créateurs de pages web utilisent de plus en plus les feuilles de style pour la mise en page des éléments des textes, images,
Animations, liens … dans leurs pages.

29

<EMBED> Ajouter une vidéo ou un son

! Cette balise vous permet d!’ajouter un son ou une vidéo qui sera «!jouée!»
dans le corps de votre page. En interne à la page.
<center>
<p> <H2>Voici un divertissement, musique ou film<H2>
<EMBED SRC = «nomFichierSonouVideo »
AUTOSTART = true
LOOP = true>
</center>
Les attributs souvent utilisés avec <embed> sont
" AUTOSTART (true, false),
# Lu automatiquement ou non, si false l ’internaute doit cliquer pour lancer
" LOOP (true, false),
# Lu en continu, jusqu ’à ce que le lecteur clique ou affiche une autre page
" WIDTH (= nombrePixels)
" HEIGHT(= nombrePixels)
# Largeur et hauteur souhaitées
! Rappel : appel d’un fichier son ou vidéo en externe
<A HREF=« sol.mov »><IMG SRC=«sol.jpg »></A>
Lorsque l ’internaute clique sur l ’image sol.jpg, la vidéo sol.mov (format QuickTime) s ’ouvre dans une nouvelle fenêtre
du navigateur, ou dans l ’application correspondante .

30

15
<FORM> Les formulaires

! Ils vous permettent de recueillir des informations entrées par vos


visiteurs :
" Dans des champs éditables, à l ’aide de boutons radio, ou cases à
cocher que vous mettez à leur disposition.
# Vous les définirez dans vos formulaires

" Ces informations seront ensuite traitées sur le serveur de la page,


# Grâce à un programme appelé script CGI - Common Gateway

Interface.
! Définir un formulaire:
" Entre les balises <FORM> et </FORM>
" Et les attributs
# METHOD, indique le mode de transfert des données d ’un formulaire

rempli par l ’internaute vers le serveur de la page (post ou get).


# ACTION, identifie l ’emplacement du script CGI sur le serveur de la

page, associé au formulaire.


<FORM METHOD=post ACTION=« /cgi-bin/traitement.pl>
ici définir les zones de texte, les cases à cocher, les boutons d ’options
</FORM>

31

Zone de texte dans un formulaire


! Petite zone de texte, balise <INPUT>
<FORM METHOD=post ACTION=« /cgi-bin/traitement.pl>
<BR>Veuillez entrer votre nom de famille :
<INPUT TYPE = « text » NAME=« Nom »
SIZE = « 20 »
MAXLENGTH =« 19 » >
</FORM>

! Grande zone de texte, balise <TEXTAREA>


<FORM METHOD=get ACTION=« /cgi-bin/traitement.pl>
<TEXTAREA NAME=« zoneCommentairesVisiteurs »
ROWS = « 10 »
COLS =« 60 »
WRAP >
</TEXTAREA>
</FORM>
Les nombres de lignes et de colonnes de la zone sont spécifiés par les attributs ROWS et COLS, WRAP
assure le retour à la ligne automatique dans la zone.
Une barre de défilement est automatiquement ajoutée lorsque le texte de l ’internaute ne peut figurer en entier
dans la zone proposée.

32

16
Case à cocher, boutons d!’options
! Case à cocher
<FORM METHOD=post ACTION=« /cgi-bin/traitement.pl>
<BR>Que pr&eacute;f&eacute;rez-vous ? :
<BR> <INPUT TYPE = « checkbox » NAME=«musique »
VALUE = « Classique »
CHECKED> de la musique classique
<BR> <INPUT TYPE = « checkbox » NAME=«musique »
VALUE = « Jazz »> ou plut&ocirc;t du Jazz
</FORM>

! Boutons d!’options
<FORM METHOD=post ACTION=« /cgi-bin/traitement.pl>
<BR> Votez :
<BR> <INPUT TYPE = « radio » NAME=«eval »
VALUE = « pour»> Je vote pour
<BR> <INPUT TYPE = « radio » NAME=«eval »
VALUE = « contre»> Je vote contre
</FORM>
! Il faut donc :
" Donner un terme qui identifie le groupe de choix , par l ’attribut NAME,
" Donner un terme qui défini la valeur du choix, par l ’attribut VALUE,
" Puis indiquer le texte qui sera affiché à côté du bouton ou de la case.

33

Les boutons importants


! Soumission (submit) et Réinitialisation (reset)
<FORM METHOD=post ACTION=« /cgi-bin/etude.pl>
<BR>Que pr&eacute;f&eacute;rez-vous ? :
<BR> <INPUT TYPE = « checkbox » NAME=«musique »
VALUE = « Classique »
CHECKED> de la musique classique
<BR> <INPUT TYPE = « checkbox » NAME=«musique »
VALUE = « Jazz »> ou plut&ocirc;t du Jazz
……………………..
<P> <INPUT TYPE = « submit » VALUE=«Envoyer »>
<P> <INPUT TYPE = « reset » VALUE=«Effacer »>
</FORM>
! Deux méthodes possibles
" GET : si un programme CGI est appelé par la méthode GET,
# Les paramètres sont inclus dans l ’URL de la requête,
# Le serveur les envoie au programme via la variable d ’environnement unix, QUERY_STRING
" POST : si un programme CGI est appelé par la méthode POST,
# Les paramètres sont inclus dans le corps de la requête,
# Le serveur donne le texte au programme via l ’entrée standard unix (stdin)

34

17
<FRAMESET> Les cadres
! Permet de scinder la fenêtre d!’un navigateur en plusieurs parties.
! Il faut spécifier :
" La hauteur et la largeur de chaque cadre,
" Le nom du fichier html affiché dans chaque cadre,
# Chaque partie présente le contenu d ’un fichier HTML distinct.

" Cette technique est de moins en moins utilisée.


# Elle peut être utile

• pour créer une « barre de navigation »,


• des informations annexes : copyright, notes de bas de pages …
" La balise de définition des cadres <FRAMESET>
# se place en dessous de la balise de fin d ’en-tête </HEAD>

</head>
<FRAMESET ROWS = « 70,* »>
<FRAME NAME =« barreNav »
SRC =« nav.html » >
<FRAME NAME = « pagePrincipale »
SRC =« index.html » >
</FRAMESET>
35

! Créer un lien affichant un fichier HTML dans un cadre.


" Cela vous permet de créer une barre de navigation
# La barre de navigation est un fichier HTML, qui affichera des choix :

• Repérés par un texte, une image ou les deux,


• Qui seront des liens vers un autre fichier HTML et le navigateur devra
afficher ce fichier dans le cadre de votre choix. Balise <TARGET> (cible).
" Dans le fichier HTML où vous voulez créer les liens (nav.html, par
exemple) :

<body>
….
<BR><A HREF = « accueil.html »
TARGET = « pagePrincipale »>
Accueil </A>
<BR><A HREF = « equipe.html »
TARGET = « pagePrincipale »>
L ’&eacute;quipe </A>
…...
</body>

18
DHTML
! Dynamic Hypertext Markup Language
! Le DHTML n'est pas un langage propre, il désigne des pages Web
dynamiques. C’est la combinaison de feuilles de styles (CSS), et de
scripts (JavaScript pour la plupart).
" Le HTML dynamique :
# Est un ensemble de technologies incorporées à la plupart des

navigateurs de génération 4.
# Il est basé sur plusieurs technologies développées en même temps par

le consortium de World Wide Web :


• le HTML,
• les feuilles de style, cascading style sheets (CSS, CSS2 et HTML),
• et le JavaScript.
" Ensemble, ces technologies supportent un contenu plus riche et plus
dynamique.
# Toutes les astuces utilisées hier par les pionniers du HTML

• qui manipulaient les tableaux pour simuler le multi-colonage,


• ou qui truffaient leurs pages d'images transparentes pour justifier leur texte
• peuvent être évitées par l ’usage des feuilles de style qui font partie maintenant de la
norme HTML, toutefois tester toujours vos pages dans différents navigateurs en
particulier si vous utilisez les CSS2

37

<SCRIPT> java et javascript


! Les pages Web écrites en HTML pur sont très statiques.
! Pour rendre les documents plus interactifs,
" Il existe diverses techniques, plus ou moins bien intégrées au langage
HTML et plus ou moins bien interprétées par tous les navigateurs,
entre autre Java et JavaScript.
" Java, est un langage de programmation orienté objet (comme le C++).
# Langage de programmation conçu par SUN
# Une machine « virtuelle » java sur la machine de l ’internaute traite le
code objet téléchargé et exécute l ’applet java.
" JavaScript repose sur la syntaxe Java, mais avec des allègements et
des simplifications.
# Langage simple et interprété conçu par NetScape
# Du côté client, le code JavaScript est inclus dans le document HTML, il
permet d ’avoir du code exécutable diffusé sur le réseau.
# Du côté serveur, c ’est une alternative aux CGI.

38

19
JavaScript
! C'est un langage de programmation interprété:
" Les programmes sont lus et exécutés ligne par ligne, comme les fichiers
BASIC, DOS ou PERL.
# Les demandes de l'utilisateur, tel qu'un clic de souris ou le passage de la souris
au-dessus d'un lien = gestion des événements, sont traquées par Javascript qui
permet de programmer des actions en réponse aux demandes.
# A la différence d'un script CGI, par exemple, où les calculs se font sur le serveur
Web, JavaScript s'exerce directement sur la machine de l'utilisateur.
• Donc plus rapide, puisqu'il n'est pas nécessaire d'émettre puis de recevoir des
données.

! On écrit le code JavaScript :


" Dans la partie HEAD du fichier HTML,
" Puis on place dans la partie BODY une commande qui l'exécute
# L'exécution peut se faire:
• automatiquement, par exemple à l'ouverture du fichier HTML ("onLoad")
• lors d'un clic de souris (commande "onClick")
• lors du passage de la souris sur une zone réactive ("onMouseOver")

39

! Ce que vous pouvez faire avec JavaScript :


" Contrôler le contenu et la mise en page de la page Web, générer du
code HTML :
# Une partie d ’un document Web ou tout un document ,

# Il sera analysé par l ’arpenteur.

# Grâce à l ’objet Document de JavaScript.

" Contrôler le comportement de l ’arpenteur :


# Créer des boîtes de dialogue,

# Ouvrir de nouvelles fenêtres de l ’arpenteur …

" Interagir avec le document


# En particulier avec l ’objet Form, permet de lire et écrire des éléments

de page.
" Interagir avec l ’utilisateur
# Définir des « gestionnaires d ’événements », bouts de code qui

s ’exécuteront en réponse à une action de l ’utilisateur.


" Lire ou écrire des « cookies ».
" Réaliser n ’importe quel calcul.
" …

20
Un exemple JavaScript
! <!-- This script has been in the http://www.javascripts.com Javascript Public Library! -->
<HTML>
<HEAD>
<TITLE>Number Square</TITLE>
<SCRIPT>
function compute(obj) {
obj.result.value =
eval(obj.number.value * obj.number.value)
}
function Clear(obj) {
obj.result.value = "";
obj.number.value = "";
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="evalform">Please Enter A Number:<BR>
<INPUT TYPE=text NAME="number" SIZE=20 ><BR>
<INPUT TYPE="button" VALUE="Square Of Number" onClick="compute(this.form)"><BR>
Result:<BR>
<INPUT TYPE=text NAME="result" SIZE=20 ><BR>
<INPUT TYPE="button" VALUE="Clear" onClick="Clear(this.form)">
</FORM>
</BODY>
</HTML>
<!-- de Tommy Raven (Min) says Moo. -->

41

Les feuilles de style


! Cascading Style Sheet!: feuilles de styles
# Les feuilles de styles en cascade (CSS), utilisées dans un document
HTML, définissent les propriétés des balises HTML du document, c’est-
à-dire sa mise en forme.
# La gestion, la conception d’un site Web sont optimisées par l’utilisation
de feuilles de style.
# Avec un seul document externe, “ la feuille de style ”, fichier au format
texte, dont le nom porte l’extension .css peut contrôler l'ensemble de la
présentation de l’ensemble des pages d'un site web.
! Vous pouvez donc élaborer une feuille de styles qui définisse la mise en
forme et la mise en page!:
• Pour une page : dans la page Web, pour laquelle vous souhaitez utiliser
une mise en forme particulière, différente de la mise en forme due aux
balises standard du html, vous allez utiliser la balise :
<STYLE>, entre les balises <HEAD> et </HEAD >

<HEAD>
<STYLE>
les définitions des caractéristiques de balises
</STYLE>
</HEAD >
42

21
Exemple :
<HEAD>
<STYLE>
H1 {text-align : center ; font-style : italic}
</STYLE>
</HEAD>
<!..Ensuite dans le corps du fichier html -->
<BODY>
<H1>Hello World </H1>
</BODY>
Les navigateur tiendront compte de la redéfinition de la balise H1 pour la mise en page de Hello World, qui sera affiché en
italique et centré dans la page.

# Pour un ensemble de pages Web, pour le site : à l’aide d’un éditeur de texte tout simple,
créez un fichier (feuille de styles) contenant les définitions de mise en forme :
• 1) Créez le fichier monStyle.css, contenant :
H1 {text-align : center ; font-style : italic}
P{color #FF00FF}
• 2) Dans chacune des pages Web associée à cette feuille de style :
<HEAD>
<LINK REL=stylesheet TYPE= ”text/css ”
HREF=monStyle.css>
</HEAD>
<!..Ensuite dans le corps du fichier html -->
<BODY>
<H1>Bienvenue à tous</H1>
<P> Voici donc un paragraphe , le texte est de couleur FF00FF en hexadecimal, soit un mélange de rouge
et de bleu, plein pot ….
</BODY>

Créer une classe

! Pour un contrôle plus étendu de la mise en forme et en page des


informations, il est possible de définir une classe , par exemple :
" Pour mettre en évidence certains passages du document, vous
définirez une classe à partir de la balise <P>.
" Pour que les éléments du texte soit mis en valeur comme par la balise
<H1> mais centrés, vous définirez une classe.
! Définir une classe
" BALISE.nomClass {définition des caractéristiques}
<STYLE>
P.important { font-style : italic; color : #FF0000 }
H1.centrersvp{text-align : center}
</STYLE>

! Portée de la classe : dans le corps du document,


# CLASS = nomClass l’attribut limite à la balise concernée, il permet
d ’indiquer au navigateur comment afficher les élément encadrés :
<BODY>
<H1 CLASS = centrersvp>Bienvenue à tous</H1>
<P CLASS = important > Voici donc un paragraphe , le texte est de couleur FF00FF en
hexadecimal, soit un mélange de rouge et de bleu, plein pot ….
</BODY>

44

22
Masquer la feuille de styles
" Cacher l’utilisation des styles aux anciens navigateurs (avant les versions 4) qui ne
reconnaissent pas les feuilles de styles et ne savent pas interpréter leur code.
" Grâce aux balises de commentaires :<!-- et --> seules.
<html>
<head>
<title>les CCS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>
<!- -
H1{text-align:center}
P.important{font-style:italic;
font-weight : bold;
color:#FF00FF}
-->
</style>
<body bgcolor="#FFFFFF">
<H1> Bienvenue </H1>
<P> Ce paragraphe normal sera affich&eacute; normalement par les navigateur, par contre
<P CLASS=important> celui-ci est tr&eacute;s important, il sera affich&eacute; selon le style défini dans la
classe d&eacute;fini plus haut
</body>
</html>

45

23

Vous aimerez peut-être aussi