Initiation à la fabrication de sites web

Les balises

Les balises constituent le principe même du HTML (langage à balises).
Les navigateurs permettent de visualiser le code source correspondant à une page affichée. Avec Internet Explorer le menu Affichage puis l’option Source, révèle le code HTML de la page courante.
Dans le code source, une balise (ou tag) est facilement identifiable : elle est constituée d’un ou plusieurs mots encadrés par les signes inférieur (<) et supérieur (>).
Exemple : <p align= »center »> Fabriquer un site web </p>
texte
Balise d’ouverture Balise de fermeture
p est un élément du langage HTML.
align est un attribut de l’élément p.
= »center » affecte la valeur center à l’attribut align.
Certains éléments peuvent avoir plusieurs attributs.
Chaque balise doit être ouverte puis fermée ; les balises <br /> <hr /> ou <img … /> (respectivement saut de ligne, trait horizontal et insertion d’une image) sont parmi les rares exceptions. On parle alors de balises « auto-fermantes ».
Bien que majuscules et minuscules soient autorisées, les minuscules seront toujours utilisées dans ce document pour être conforme au XHTML (eXtended Hypertext Markup Language) et assurer la compatibilité avec les évolutions du langage

Ossature d’une page HTML

<!DOCTYPE …… >
<!–Déclaration du standard HTML utilisé –>
<html>
<head> Commentaires
<!– En-tête du document –> <!– –>
</head>
<body>
<!– Ici figurent l’ensemble des informations à afficher –>
</body>
</html>
Important:
• Les balises <head> et <body> sont imbriquées dans la balise <html>. Dans les pages HTML l’imbrication des balises est systématique.
L’indentation (non obligatoire) permet de s’assurer du respect de la règle absolue :
La première balise rencontrée dans le source est aussi la dernière fermée.
Réciproquement la dernière balise rencontrée est la première fermée.
Un exemple d’écriture incorrecte :
<html>
<body>
…………
</html>
</body>
• Les commentaires ne sont pas obligatoires et leur couleur est sans importance.
Cependant la présence d’un commentaire peut faciliter la compréhension du code source et les modifications de la page…
Déclaration du standard HTML utilisé
La déclaration du « doctype » qui spécifie le standard HTML utilisé dans la rédaction des pages de site n’est pas obligatoire. Elle est nécessaire pour effectuer auprès du W3C une validation qui consiste à vérifier le respect des normes d’écriture du standard choisi. Elle aide aussi le navigateur à interpréter la page le plus correctement possible.
Dans ces feuillets, il sera toujours question de XHTML, qui est la dernière version du langage HTML. D’où la « formule » doctype correspondante :
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »> <html xmlns= »http://www.w3.org/1999/xhtml » xml:lang= »fr »
lang= »fr »>
L’en-tête du document (<head>)
Après la balise <html>, début de tout code source, la balise <head> donne des informations générales :
• la balise <title> donne le titre de votre page tel qu’il apparaît au-dessus de la fenêtre du navigateur ou dans les favoris du visiteur qui rajoute votre site à sa liste de favoris.
 les balises <meta /> :
<meta http-equiv= »Content-Type » content= »text/html; charset=iso-8859-1″ />
précise le jeu de caractères utilisés pour l’affichage des textes.
<meta name= »keywords » content= »festival, gospel, midi-pyrénées, france » />
énumère des mots clés judicieux permettant aux moteurs de recherche (Google et autres) de référencer votre site.
Le corps du document (<body>)
C’est ici que se trouvent les données à afficher (titres, textes, images, tableaux, liens…)
Une première page web
Pour écrire le code HTML un éditeur élémentaire tel que le Bloc notes sous Windows convient.
Exemple de page minimale (sans doctype ni balises meta) :
<html>
<head> <title> Ma première page</title> </head> <body>
Voici ma première page web!
</body>
</html>
Il faut ensuite enregistrer la page sur le disque dur en lui donnant un nom de fichier.
Une page d’accueil de site se nomme généralement « index.htm ».
Dès lors, un double-clic sur le nom du fichier source de cette page suffira à ouvrir le navigateur Internet et à afficher à l’écran :
Voici ma première page web !
Ce premier succès encourage à composer une page avec un peu plus de contenu.
Il est possible de faire un copier-coller pour récupérer une partie d’un document .doc ou .rtf et l’insérer à la place de la phrase actuelle.
Hélas l’affichage de la nouvelle page par le navigateur ne reflète pas exactement la mise en forme du texte:
• les passages à la ligne suivante et les tabulations sont ignorés.
• les espaces consécutifs sont réduits à un espace unique.
Ce n’est pas un dysfonctionnement, c’est la règle avec le langage HTML !
Un certain nombre de balises seront indispensables pour rendre au texte sa structure.

Les balises indispensables

La balise p
Elle indique un paragraphe (au sens littéraire) et provoque un saut de ligne.
Exemple: Résultat :
<p>Le premier paragraphe </p> Le premier paragraphe
<p>Le deuxième paragraphe </p>
<p>Le troisième paragraphe</p> Le deuxième paragraphe
Le troisième paragraphe
La balise br
Elle permet un simple passage à la ligne suivante sans saut de ligne.
Exemple:
<p> /* Début du paragraphe */
La première phrase <br />
/* ligne suivante */
La deuxième <br />
/* ligne suivante */
La troisième
</p> /* Fin du paragraphe */
Le paragraphe est fini !
Résultat :
La première phrase
La deuxième
La troisième
Le paragraphe est fini !
La balise a
Indique un lien hypertexte
Exemple: Résultat :
Visitez notre <a href= »page.html » title= »Nos activités »>Page web</a>
Visitez notre Page web
Attributs associés à la balise a :
href : indique l’adresse (relative ou absolue – cf répertoires et arborescence) de la cible vers laquelle le lien renvoie.
La cible peut être une autre page du site (cas des menus) ou d’un autre site.
Page web est le lien hypertexte vers « page.html », fichier situé dans le même répertoire que le source.
title : Permet de spécifier une description du lien.
Au passage de la souris sur le lien, le navigateur affichera « Nos activités » dans une bulle.
Le lien décrit par l’attribut href peut être :
– interne à une page web (cas du sommaire d’une page)
– vers une page différente (cas d’un menu général de site)
– vers un site différent
– vers un e-mail (Exemple écrire au webmestre : ouverture automatique
du logiciel de messagerie avec l’adresse de destination déjà remplie).
Les divers cas de figure sont détaillés page 25: Maîtriser les liens.
La balise img
Insertion d’une image
Exemple: Résultat :
<p>
Les singes et les hommes Les singes et les hommes
<img src= »singes.jpg »
alt= »photo de singes » />
</p>
Attributs associés :
src : Attribut obligatoire qui donne l’adresse de l’image (relative ou absolue – cf répertoires et arborescence).
alt : Texte alternatif qui permet aux déficients visuels utilisant un logiciel de lecture audio d’avoir une interprétation de l’image.
La balise ul
Délimite une liste à puces
Exemple: Résultat :
<p>Voici une liste :</p>
<ul> Voici une liste:
<li> Rubrique1 </li>
<li> Rubrique2 </li>  Rubrique1
<li> Rubrique3 </li>  Rubrique2
<li> Rubrique4 </li>  Rubrique3
</ul>
 Rubrique4
Les items de la liste sont placés à l’intérieur de balises <li> et s’affichent précédés d’une puce.
La balise h1 à h6
Titre hiérarchisés du niveau 1 (le plus gros) au niveau 6 (le plus petit)
Exemple:
<h1>Titre général</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3>
<h2>Un autre titre de niveau 2</h2>
Résultat :
Titre général
Titre de niveau 2
Titre de niveau 3
La balise strong
Caractères gras
Exemple:
<p>
Il faut définir ce que sont <strong>les balises</strong>
</p>
Un autre titre de niveau 2
Résultat :
Il faut définir ce que sont les balises
La balise em
Caractères obliques
Exemple:
<p>
Nous devrons revenir sur <em>les liens hypertexte</em> car ils sont la base de la navigation sur Internet.
</p>
Résultat :
Nous devrons revenir sur les liens hypertexte car ils sont la base de la navigation sur Internet.
La balise div
Division de texte. Cette balise générique ne produit par défaut aucun effet particulier. Elle sert à diviser le texte en bloc ayant une unité sémantique et (ou) une mise en page particulière.
Exemple:
<div>
Dans ce chapitre nous aborderons les arguments en faveur des documents bien structurés, et de la mise en page soignée qui rend leur consultation plus agréable.
</div>
Résultat :
Dans ce chapitre nous aborderons les arguments en faveur des documents bien structurés, et de la mise en page soignée qui rend leur consultation plus agréable.

Concepts de base du HTML
1. Les liens hypertexte
2. Les balises
3. Ossature d’une page HTML
Une première page web
1. Les balises indispensables
2. Balises bloc, balises en ligne
3. Hiérarchie et propriétés des blocs d’informations
Mise en page et feuilles de style
1. Structure d’une feuille de style
2. Unités de mesures et couleurs
2.1 Mesures absolues
2.2 Mesures relatives
2.3 Indications de couleurs
3. Positionnement des blocs
3.1. Marges externes, marges internes et dimensions
3.2. Positionnement flottant
3.3. Positions absolues, fixes et relatives
Ecriture des pages d’un site
1. Matériel nécessaire
2. Etapes de la fabrication d’un site
Créer des menus simples
1. Un menu vertical
2. Un menu horizontal
Maîtriser les liens
Liens internes à une page
Liens vers une page différente
Liens externes au site
Liens e-mail
Balises HTML
1. Les balises bloc
2. Les balises en ligne
1. Marges
2. Positionnement des blocs
3. Alignement de texte
4. Formatage d’écriture
5. Bordures
6. Arrières-plans
7. Formatage des listes
8. Formatage des tableaux
Glossaire Internet
Codification des caractères spéciaux