Un fichier HTML est un fichier texte (appelé aussi ASCII) dans lequel sont insérées
des balises appelant des commandes. Ce fichier doit avoir l'extension .HTM
ou .HTML
Les balises sont entourées par '<' et '>'
La plupart des balises vont par paire, une balise de début, et une
balise de fin.
Le bloc de texte contenu entre la balise de début et la balise de
fin, subit la modification (exemple: en gras)
La syntaxe d'une balise de fin est la suivante : </COMMANDE>
Le '/' signifiant 'fin de'.
Les retours charriots du document HTML ne sont pas pris en compte.
De même pour les successions d'espaces et les tabulations.
Des commentaires peuvent être ajoutés à l'intérieur d'une balise spéciale:
<!--Ceci est un commentaire-->
Balises fondamentales
Texte en gras : bloc délimité par <B> et </B>
Texte en italique : bloc délimité par <I> et </I>
Texte en souligné : bloc délimité par <U> et
</U> (à éviter car utilisé par liens)
Texte avec police à espacement fixe (courrier) : bloc délimité par <TT> et </TT>
On indique les retours chariots par <BR> (pas de balise de fin),
les lignes horizontales de séparation par <HR>
les nouveaux paragraphes par <P> (balise de fin optionnelle),
Texte preformaté en police courrier : bloc <PRE>
Texte centré: bloc <CENTER> ... </CENTER>
Attributs
Certaines commandes peuvent prendre des arguments:
La syntaxe d'une balise de début est alors la suivante <COMMANDE ATTRIBUT1="VALEUR1"
ATTRIBUT2="VALEUR2" ...>
Les attributs d'une commande doivent se trouver à l'intérieur de la balise de début. Les valeurs affectées aux attributs peuvent être entre guillemets ("). Ces guillemets ne sont obligatoires que si la valeur contient des espaces.
Police de caractères: <FONT COLOR="yellow" face="Arial,Helvetica" size=+3>mon texte en jaune</FONT>
Le document HTML tout entier est un bloc compris entre les balises <HTML>
et </HTML>
Ce document est décomposé en deux sous blocs :
<HEAD> ... </HEAD> (informations générales dont
barre de titre de la fenêtre) et <BODY> ... </BODY> (document
à proprement parler).
Dans le bloc HEAD, on peut définir le texte à afficher dans la barre de titre de la fenêtre. Ce texte doit se trouver dans un bloc <TITLE> ... </TITLE>
Les balises <h1> <h2> .. <h6> (avec balise de fin correspondante) servent à identifier les différents niveaux de titres au sein du corps du document.
Une mise en forme par défaut est appliquée à ces titres (en gras avec une taille qui dépend du niveau).
Il est important d'employer ces balises plutôt que des balises de mise en forme (<B>, <I> <FONT>,...) car les moteurs de recherche s'appuient sur le contenu de ces balises (ainsi que sur le contenu de la balise <TITLE> du bloc <HEAD>) pour établir les mots clés associés à une page.
Le format à appliquer au bloc de texte contenu entre ces balises peut être adapté pour un document entier par l'utilisation des feuilles de style. Par exemple, l'ajout de la ligne
<style>h1 { color: blue }</style> mettra tous les titres de niveau 1 de la page en bleu.
Couleurs
Le codage de couleurs utilisé est RVB, les niveaux sont indiqués
en hexadécimal.
Vous pouvez aussi utiliser des valeurs prédéfinies: nom des couleurs en anglais (plus faciles à mémoriser!)
Exemples:
<BODY BGCOLOR="bisque"> ou <FONT COLOR="blue">mon texte</font>.
On peut mettre un bloc en couleurs en l'entourant de balises appropriées:
<FONT COLOR=FF00FF>Mon texte</FONT>
ou
<FONT COLOR="violet">Mon texte</FONT>
affichera 'Mon texte' en violet.
On peut préciser des attributs de couleur applicables à
l'ensemble du document dans la balise <BODY>. attributs possibles:
BGCOLOR, TEXT, LINK, ...
<BODY BGCOLOR="#00FF00" TEXT="#FF0000">
On aura ici un document à fond vert et écrit en rouge.
Caractères spéciaux
Les caractères spéciaux sont écris entre '&'
et ';'
< permet d'obtenir < (lt : lower than càd inférieur)
> permet d'obtenir > & permet d'obtenir & (amp : ampersand càd
'et' commercial)
Accents:
on tape la lettre à accentuer, suivie du type d'accent.
acute (aigu), grave, circ (circonflexe), ou uml (umlaut càd tréma)
é permet d'obtenir é è permet d'obtenir è ê permet d'obtenir ê
Ce codage n'est pas indispensable sur certains systèmes (non
UNIX). On peut alors taper directement le caractère accentué.
On indique le nom du fichier GIF ou JPG (seuls formats graphiques reconnus)
entre guillemets (facultatifs) après 'IMG SRC='
<IMG SRC="image1.gif"> pas de balise de fin.
On peut affecter une URL quelconque d'image à l'attribut SRC de la commande IMG.
Certains fichiers GIF peuvent contenir des images animées.
Autres paramêtres possibles de la commande IMG: WIDTH, HEIGHT,
BORDER, ALT (permet d'indiquer un texte de remplacement si le chargement
d'image est désactivé par le client)
Pour afficher une image en fond d'écran, on utilise l'attribut BACKGROUND=URL de la commande BODY. L'image (qui doit être petite!) sera mise en mosaïque.
S'intègre dans un bloc <UL> ... </UL>
Chaque ligne du bloc est précédée par <LI> (balise
de fin optionnelle)
A chaque balise <LI> correspondra une pastille.
Les blocs UL peuvent s'imbriquer pour créer des sous-listes. La commande UL accepte un attribut facultatif TYPE qui peut prendre les valeurs disc, circle ou square.
Listes numerotées automatiquement : bloc <OL>...</OL>
A chaque balise <LI> correspondra un numéro.
La commande OL accepte un attribut facultatif TYPE qui peut prendre les valeurs A,a,i,I ou 1 (défaut). L'attribut facultatif START permet de spécifier le début de la numérotation.
Tableau : bloc <TABLE> ...</TABLE>
Chaque ligne du tableau est un bloc <TR> ... </TR> et dans
chaque ligne une colonne est repérée par <TD> ...</TD>
Les balises </TR> et </TD> sont facultatives.
Un élément de tableau peut contenir des retours chariot
(<BR>), des images, et des balises HTML quelconques.
Attributs possibles pour chaque élément (TR ou TD): ALIGN=CENTER,RIGHT,LEFT, VALIGN=TOP,BOTTOM,MIDDLE
Attributs possibles pour la table : BORDER (épaisseur
du trait de contour, attention, sans contour par défaut), CELLSPACING=.. (espacement entre cellules) et CELLPADDING=.. (espacement entre bordure et contenu) Il est néanmoins préférable de passer par CSS pour formatter une table.
L'élement CAPTION se place juste au dessous de <TABLE> et avant les autres balises (<tr>)
(exemple)
Liens
Lien : Indiquer le texte à souligner (le lien) dans un bloc <A HREF=URL>
... </A>
URL: Uniform Ressource Location. C'est l'adresse où l'on doit aller si l'on clique sur ce lien.
<A HREF="Nom_fichier.html">Ceci est un lien!</A>
URL
http://www.audiovie.org/pays/france.htm
URL absolue: fichier situé sur un serveur web
page2.htm
fichier situé dans le même dossier que la page courante
donnees/page2.htm
fichier situé dans le dossier donnees
../page2.htm
fichier situé dans le dossier parent
/babel/page2.htm
fichier situé dans le dossier babel, lui même à la racine du site
Référence locale, cible
<A NAME="introduction"></A><H3>Introduction</H3>
Référence locale : le # indique une cible dans un fichier
<A HREF="#introduction">Introduction</A>
Exemples URL
Exemple d'adresse URL complète
http://
172.17.246.16
/fiches/
html.htm
#p8
Accès web (presque toujours)
Nom du serveur
Chemin
Nom du fichier
Emplacement dans le fichier
Adresse email :
<A HREF="mailto:toto@wanadoo.fr, titi@free.fr?subject=Coucou&body=mon texte&bcc=tata@gmail.com">Nous écrire</A> Nous écrire
On fera les exercices pas à pas en rechargeant la page HTML entre chaque manipulation.
On fera précéder chaque exercice d'une barre de séparation (HR) puis d'un nom pour l'exo en titre 2.
Créer une page HTML avec "Exercices de HTML" dans la barre de titre et en titre 1 (H1).
Ecrire quelques lignes avec les différents styles: gras, italique, souligné.
Télécharger l'image des exemples et l'enregistrer dans votre répertoire de travail.
L'afficher dans la page HTML.
Afficher une image du web à partir de son URL absolue.
Enumérer vos hobbies au sein d'une liste.
Même exercice avec une liste numérotée.
Créer une table centrée de 2x3 contenant 6x l'image des exemples.
Créer un tableau 3x3 avec bordure avec:
en fond des cellules les couleurs courantes,
en contenu le nom des couleurs affichées.
Donner à la page un fond vert (attribut BGCOLOR de BODY)
Mettre une image en fond de page (attribut BACKGROUND de BODY)
Jouer en musique de fond la musique canyon.mid (Commande <BGSOUND SRC=fichier musique (.mid, .au ou .wav)>
Créer un lien absolu vers la page d'accueil du cours de HTML (lien texte).
Créer un lien vers une page HTML locale par clic sur une image.
Créer un signet au haut de votre page et un lien interne vers ce signet.
Listes