docHTMLTD1 Texte de base en HTML
download 
Plainte Transcription
HTMLTD1 Texte de base en HTML
H.T.M.L.TD1
Texte de base en HTML
Tester vos travaux HTML hors connexion
Outre qu'il permet de naviguer sur le Web (ou plutôt de faire "naviguer" les fichiers html via Internet), le navigateur
interprète le code HTML et produit la page Web décrite par le code. Cette fonction du navigateur n'utilise pas
Internet. On peut donc tester HTML hors ligne, mis à part les liens vers des documents "distants".
La notion de balise
Sous un logiciel de traitement de texte, lorsqu’on veut mettre un mot en gras, on sélectionne le mot, puis on active la
commande de mise en forme gras. Cela a pour effet d’afficher le mot dans la graisse choisie. De façon interne et sans
que cela apparaisse à l’écran, le logiciel de traitement de texte inscrit dans le fichier un code spécifiant que le mot
sélectionné doit apparaitre (être restitué, à l’écran ou sur papier) en gras.
Dans le langage HTML, ces codes, dits balises, sont explicites et à la charge de l’auteur du document.
I. Méthode de travail pour la mise au point de vos programmes HTML
1. Editer le code source HTML :
a) activer un éditeur de texte (BBEdit, le Blocnotes (PC))
b) écrire le code HTML (voir exemples en II ci-dessous)
c)
l'enregistrer sous un nom avec le suffixe .html (td1.html, p.ex.)
2. Faire interpréter ce code source par le navigateur :
a) activer un navigateur (Safari, Internet-Explorer, etc.)
b) ouvrir éventuellement une nouvelle fenêtre du navigateur (Fichier/Nouvelle fenêtre)
c)
exécuter la commande Fichier/Ouvrir un fichier …
d) sélectionner le fichier .html à interpréter
c+d <=> faire glisser le fichier .html sur l'icône du navigateur.
L'interprétation du code source s'affichera sous le navigateur.
Si vous n'êtes pas satisfait
•
retourner sous l'éditeur de texte sans quitter le navigateur
•
corriger le code HTML
•
activer le navigateur et exécuter la commande Actualiser pour faire prendre en compte vos modifications.
II. Balises HTML de base
Balises de structuration générale
<HTML>... </HTML> :
début et de fin du document HTML.
<HEAD> ... </HEAD> :
tête de document
<!-- ... --> :
commentaires concernant le document (non affiché sur la page Web)
<TITLE> ... </TITLE>
titre du document (apparait dans la barre de titre de la fenêtre du navigateur
<BODY> ... </BODY>
corps du document
☛ Testez, en suivant la méthode de travail décrite ci-dessus, le code source suivant :
<HTML>
<HEAD>
<!--Auteur:A.Mela - Date = Mardi 26 septembre 2006-->
<TITLE>Exemple de document HTML</TITLE>
</HEAD>
<BODY>
Voici l'endroit où l'on écrit le texte du document
</BODY>
</HTML>
☛ Que remarquez-vous ? Corrigez votre code en vous reportant au document Caracteres_html.pdf (téléchargeable
1
sur http://www.univ-montp3.fr/~amela/DE1, paragraphe "Ressources utiles pour l'ensemble du cours"/
Codage des caractères accentués en HTML.
Les délimiteurs
Les retours à la ligne dans le fichier du code source sont ignorés par le navigateur. Seuls les délimiteurs explicites
sont pris en compte.
<P> ... {</P> }
: balise de paragraphe (balise fermante non obligatoire).
: saut à la ligne
<BR>
<HR> : Insertion d'une ligne horizontale de séparation
☛ Exemple à tester
<html>
<head>
<title>Document HTML</title>
</head>
<body>
Après cette ligne-ci un saut à la ligne simple<BR>
sur la ligne suivante sera inséré.
<HR>Ce texte est encadré par deux lignes horizontales<HR>
</body>
</html>
Attributs et balises
Certaines balises peuvent admettre des attributs, chacun d’entre eux ayant une valeur.
La syntaxe de la balise est alors la suivante :
<balise attribut1="valeur" ... attributn="valeur" >
Exemples :
<hr align= "left/center/right"
(alignement
size="20"
épaisseur
<font size =1 color=red face="arial">
width ="100">
largeur du trait en pixels
taille, couleur et police des caractères
<HR width=30% size=10 align= " right">
<BODY bgcolor = " pink ">
<BODY background= " fichiergraphique.gif "> où fichiergraphique est l’adresse(URL) d’une
image.
<BODY text = " red ">
Notez que la valeur de l’attribut est spécifiée après le signe " = " suivant l’attribut. Elle est notée entre guillemets si
cette valeur est alphanumérique.
Balises de mise en forme
<B>
: gras
<I>
: italiques
<U>
: souligné
<SUP>
: met le(s) caractère(s) qui sui(ven)t en exposant
<FONT>
: agit sur un bloc de caractères
<FONT SIZE=n COLOR="x" FACE ="police de caractères">
<CENTER>
<BODY BGCOLOR=x>
Codage des couleurs : modèle RGB (Red Green Blue) : synthèse des 3 couleurs fondamentales
Les couleurs prédéfinies sont: black (noir), white (blanc), red (rouge), green (vert), blue (bleu), yellow (jaune),
aqua (bleu-vert clair), fuchsia (rose), gray (gris), lime (vert citron), maroon (bordeaux), purple (violet), navy (bleu
marine), olive (vert olive), silver (argenté), teal (gris-vert). Si ces couleurs ne suffisent pas, il est possible d'en
définir de nouvelles, avec la commande #rrvvbb où rr, vv et bb représentent des valeurs hexadécimales
représentant les pourcentages des couleurs rouge, vert et bleu à utiliser dans le mélange des couleurs. ff est le plus
2
grand (100%) et 00 le plus petit (indications: cc = 80%, 99=60%, 66=40%, 33 = 20%). Par exemple, #ff0000
représente le rouge brillant, #660099 le bleu-violet.
Les titres
En HTML, il existe 6 styles de paragraphe prédéfinis : <Hi>, i variant de 1 à 6.
☛ À tester :
<html>
<head>
<title>Document HTML</title>
</head>
<body>
<H1>Une très grande taille.</H1>
<H2>Une grande taille.</H2>
<H3>Une taille moyenne.</H3>
<H4>Une petite taille.</H4>
<H5>Une très petite taille.</H5>
<H6>Une taille minuscule.</H6>
</body>
</html>
Les listes
Il existe plusieurs types de listes HTML, chaque type correspondant à un style de présentation.
Les listes peuvent être enchassées.
<UL>...</UL>
<OL> ... </OL>
liste à puces
liste numérotée
<LH> : en-tête de liste
(ni puce /ni symbole/ni numéro)
<LI>... (</LI>) : élément de liste
a) La liste ordonnée (OL)
L'attribut TYPE dans les listes ordonnées permet de redéfinir le type de numérotation (chiffres arabes par défaut):
<OL TYPE = valeur> où valeur ∈ {1,A,a,I,i}
<OL START = valeur> : permet de rompre le séquencement et de le réinitialiser à une autre valeur.
b) La liste non ordonnée (UL)
L'attribut TYPE dans les listes non ordonnées permet de redéfinir le symbole précédent les élts: <UL TYPE =
valeur> où valeur ∈{square, circle,disc}.
Les listes suivantes peuvent être obtenues:
A. Majuscules
a. Minuscules
1. Chiffres arabes
B.
b.
2.
I. Chiffres romains
i. Chiffres romains minuscules
4. On démarre à 4
II.
ii.
5.
☛ Exemple à tester
<html>
<head>
<title>Document HTML</title>
</head>
<body>
La liste qui suit est non numérotée :
<UL>
<LI>Premier élément de cette liste
<LI>Deuxième élément de cette liste
<LI>Troisième élément de cette liste
</UL>
La liste qui suit est numérotée ; elle contient une liste emboîtée :
<OL>
<LI>Premier paragraphe
<LI>Deuxième paragraphe
3
<OL>
<LI>Première section du deuxième paragraphe
<LI>Deuxième section du deuxième paragraphe
</OL>
<LI>Troisième paragraphe
</OL>
</body>
</html>
! Remarquez l'indentation dans le code HTML
☛ Exercice de synthèse : Réalisez l'affichage suivant :
4
