Académique Documents
Professionnel Documents
Culture Documents
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
liens hypermédias.
" <nomBalise> le texte concerné </nomBalise>
# Les balise vont par deux en général, mais parfois sont seule
mode graphique.
# Ils proposent également des scripts JavaScript (ex : boutons « survol »,
2
Généralités d!’écriture
! Les Balises
" Nom de la balise encadré par < et >
# Double : affecte une partie de la page
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)
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
# Par défaut, si aucun titre n ’est spécifié, c ’est le nom du fichier qui sera utilisé
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 !
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
<HTML>
<HEAD>
...
</HEAD>
<BODY BGCOLOR=« #003366 » TEXT= «#CCCCFF» >
du texte
</BODY>
</HTML>
! 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
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>
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
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
# Ex :
<H1>Voici le gros titre</H1>
<H2>Voici un plus petit titre</H2>
<H5>Et voici un tout petit titre</H5>
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 >
# Taper <UL> avant la liste (</UL> après) et <LI> devant chaque élément
de la liste.
<UL>
<LI>Entrée
<LI>Pàtes
<UL>
<LI>Lasagnes
<LI>Tortellini
</UL>
<LI>Café
</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ément 1
<LI>Elément 2
<UL>
<LI>Elément 2-1
<LI>Elément 2-2
</UL>
<LI>Elément 3
</OL>
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
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
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
• 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é
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).
" 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
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 :
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
! 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
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
31
32
16
Case à cocher, boutons d!’options
! Case à cocher
<FORM METHOD=post ACTION=« /cgi-bin/traitement.pl>
<BR>Que préfé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ô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
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.
</head>
<FRAMESET ROWS = « 70,* »>
<FRAME NAME =« barreNav »
SRC =« nav.html » >
<FRAME NAME = « pagePrincipale »
SRC =« index.html » >
</FRAMESET>
35
<body>
….
<BR><A HREF = « accueil.html »
TARGET = « pagePrincipale »>
Accueil </A>
<BR><A HREF = « equipe.html »
TARGET = « pagePrincipale »>
L ’é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
37
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.
39
de page.
" Interagir avec l ’utilisateur
# Définir des « gestionnaires d ’événements », bouts de code qui
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
<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>
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é normalement par les navigateur, par contre
<P CLASS=important> celui-ci est trés important, il sera affiché selon le style défini dans la
classe défini plus haut
</body>
</html>
45
23