Internet > Création web > Le HTML 2

Créer une page en HTML (2)

 

 

Les balises :

En HTML, chaque instruction est composé d'une balise entrante, et d'une balise sortante.

exemple, la balise "p" qui désigne un paragraphe :
<p>Ceci est un paragraphe</p>

Chaque balise est encadrée par < et >
La balise sortante est précédée par le signe /

 

Les balises doivent être écrites en caractères minuscules.
(si elles sont parfois écrites en majuscule dans ces pages pour des raisons de lisibilité).

 

Les balises HTML, TITLE, HEAD et BODY :

Il existe quatre balises essentielles :
- HTML = précise que c'est un document html.
- TITLE = affiche le nom de la page en haut de la fenêtre du navigateur.
- HEAD = délimite l'en-tête du document (qui contient des informations diverses).
- BODY = délimite le corps du document (qui contient le texte, les images, etc.).

On peut citer également la balise DOCTYPE :
Essentielle, elle est à placer avant la balise <HTML> (voir ma page : la balise DOCTYPE)

<DOCTYPE> Donne des informations essentielles pour l'interprétation du code par le navigateur.
<HTML> C'est la balise qui détermine la nature du document.
<HEAD> HEAD = tête. C'est la partie contenant des informations sur la page. Elle contient notamment le titre de la page.
<TITLE>Ma page</TITLE> Titre de la page.
</HEAD> fin de l'en-tête du document.
<BODY> BODY = corps. C'est la partie "visible" de la page.
<P>bonjour</P> P = paragraphe. C'est un exemple d'affichage de texte.
</BODY> fin du corps du document.
</HTML> fin du document.

Remarque A remarquer :
La balise TITLE est "imbriquée" dans la balise HEAD
Les balises HEAD et BODY sont "imbriquées" dans la balise HTML

Pour toutes les autres balises, on respectera également ce système d'imbrication :
exemple : <p>un texte <b>mis en gras</b> et rétabli en normal</p>
La balise <b> (bold = gras) est imbriquée dans la balise <p> (paragraphe).
Ce qui donne :

un texte mis en gras et rétabli en normal

et dans la fenêtre d'un éditeur :
les balises

 

La balise HTML est indispensable pour déterminer qu'il s'agit d'une page web. Mais on n'a pas à s'en occuper.
La balise TITRE sert à afficher le nom de la page. Il est indiqué une fois pour toutes.

Ce sont donc les balises HEAD et BODY les plus importantes à connaître :
- la balise HEAD contient des informations sur le contenu de la page,
- la balise BODY contient le contenu affiché de la page.

 

La balise HEAD :

Les informations qu'elle contient sont lues en premier pour afficher la page.

Quand on débute, il n'est pas nécessaire de s'intéresser au contenu de la balise HEAD.
On peut passer directement au contenu de la balise BODY (voir plus bas).

La balise HEAD contient essentiellement :
- des balises META,
- du code JavaScript,
- des références aux feuilles de style.

 

Les balises META :

Elles contiennent des informations sur le contenu de la page

Elles sont destinées essentiellement aux moteurs de recherche qui indexent les sites web.

Elles permettent de :
- donner des informations sur l'auteur, la langue utilisée,
- donner des informations sur le contenu de la page,
- donner des indications aux robots qui parcourent les sites.

 

Les balises META sont de différentes sortes :

Informations sur la nature du document, les caractères utilisés, l'auteur, la langue.

<meta http-equiv="Content-Type" content ="text/html; charset=iso-8859-1">
<meta name="author" content ="Alain MEST">
<meta http-equiv="content-language" content ="fr">

Informations sur le contenu de la page :

<meta name="Description" content="Le contenu de mon site">
<meta name="Keywords" content="informatique,windows">

Informations destinées aux robots :

<meta name="robots" content="index, follow, all ">

 

 

Le code JavaScript :

La balise HEAD peut contenir également du code JavaScript.

Le JavaScript est un code de programmation qui permet d'exécuter des commandes que le code HTML ne peut effectuer.
exemple : afficher la date.

Comme la partie HEAD est lue en premier lors de l'ouverture de la page, le code JavaScript sera déjà chargé en mémoire, au moment où la page commencera à s'afficher.

 

 

Il y a deux façons de placer du code javascript dans une page :
- mettre un lien vers un fichier javascript,
- mettre le code javascript dans la page

Un code JavaScript débute par la balise <script> et se termine par la balise </script>

 

Mettre un lien vers un fichier javascript :

Exemple :

<script type="text/javascript" src="scriptdate.js"></script>
<script type="text/javascript" src="script.js"></script>

On peut :
- mettre un lien vers un fichier javascript pour une fonction particulière : exemple : scriptdate.js
ou / et :
- rassembler les fonctions javascript dans un fichier : exemple : script.js

 

Mettre le code javascript dans la page :

exemple :

<script type=text/javascript>
function favorites()
... etc
</script>

 

 

Différents codes JavaScript sont disponibles en téléchargement sur certains sites

Pour télécharger des Javascript :
http://www.toutjavascript.com

 

 

Remarque Les limitations du javascript :
- Le javascript peut être désactivé dans le navigateur. Donc ça n'est pas une solution fiable à 100%. C'est pour cela qu'on préférera une solution entièrement en CSS pour les menus par exemple.
- La présence de code JavaScript dans une page ralentit l'affichage de celle-ci. Il faut donc user... mais ne pas abuser ;-)

 

 

Les références aux feuilles de style :

Quand on utilise des feuilles de style (voir mes pages), c'est dans la partie HEAD que les informations les concernant sont placées.

exemple :

<link rel="stylesheet" href="styles.css">

cette instruction fait référence à une feuille de style nommée : styles.css

 

 

La balise BODY :

La balise BODY contient le code HTML de tout ce qui s'affiche à l'écran : textes, images, tableaux, liens hypertexte.
C'est là que se situe le véritable travail sur une page web :-)

 

 

Composition d'une page web :

Voici des commandes très simples en HTML pour concevoir sommairement :
- le fond de page,
- le texte,
- les images,
- les liens hypertextes,
- les tableaux.

 

 

Le fond de page :

Pour commencer, voyons l'aspect général de la page. Il sera déterminé par le début de la balise BODY :

 

<body bgcolor="#FFFFFF" text="#000099">

Avec la balise BGCOLOR, on choisit la couleur du fond de la page.
Avec la balise TEXT, on choisit la couleur du texte.

 

 

<body background="images/fond.jpg" bgproperties="fixed">

Avec la balise BACKGROUND, on place une image en fond d'écran. Celle-ci pourra être un motif de petite dimension, qui sera répété pour couvrir l'ensemble de la page.
La balise BGPROPERTIES permet de "fixer" l'image du fond, et ainsi de donner l'impression que le texte "glisse" lorsqu'on fait défiler la page.

 

<a name="home"></a>

Ceci est une ancre (voir) que l'on pourra placer juste après la balise BODY, afin de revenir en haut de la page, grâce à un lien hypertexte.

 

 

Le texte :

Le texte d'un page web peut s'écrire de plusieurs façons :

La balise <p> marque le début d'un paragraphe, </p> marque la fin.
La balise <br / > désigne un retour à la ligne. Elle s'utilise sans balise de fin.

Exemple :

<p>Ceci est un paragraphe</p>

<p>Pour limiter l'espacement entre deux lignes<br / >
Il faut utiliser la balise de retour à la ligne</p>

 

La balise <font> permettait de choisir la police de caractère, sa taille, sa couleur.

Remarque La balise FONT est maintenant obsolète avec les nouvelles normes HTML
Il faut éviter de l'utiliser et lui préférer les feuilles de style (voir ma page : Les feuilles de style)

 

Les balises <b> et <i> déterminent le style : Gras (Bold) ou Italique
Elles sont complétées par les balises <strong> qui remplace <b> et <em> qui remplace <i>

 

Précision : en fait, les balises <b> et <i> sont toujours conformes.
Mais leur utilisation est spécifique et différente des balises <strong> et <em>

 

  ancienne norme nouvelle norme
Police <font face="Arial, Helvetica, sans-serif"> <p style="font-family:Arial, Helvetica, sans-serif;">
Style <b><i> <strong><em>
Taille et couleur <font size="2" color="#FF0000"> <p style="font-size:12px; color:#000000;">

 

Liens :

Alsacreations.com - Quelles polices de caractères (fontes) utiliser sur le Web ?

Openweb.eu.org - Compatibilité multi-navigateurs des polices de caractères

 

 

Les titres :

Les titres d'une page web sont très importants.
Ils permettent au visiteur de discerner l'importance des différents chapitres de la page.
Ils permettent aux moteurs de recherche d'évaluer l'importance de la page.

 

Un titre décrit brièvement le sujet de la section qu'il présente :

"A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically"

 

En dehors de la balise title qui est le nom de la page, Il existe 6 niveaux de titres : h1 à h6

 

Parmi les règles d'utilisation :
- Toute page doit comportement un titre h1
- Un titre h1 doit être suivi d'un titre h2 avant d'utiliser le titre h3

 

Voir :

Alsacreations.com - Bien construire sa hiérarchie de titres

 

 

Les images :

Voici la commande de base pour insérer une image dans une page web :

<img src="images/dessin.gif">

Il faudra évidemment que l'image dessin.gif soit à l'intérieur du dossier images (voir plus haut).

 

Instructions complémentaires :

On pourra rajouter :

La taille de l'image : width="xx" height="xx"
La bordure de l'image : border="x"
Un texte qui s'affichera quand le pointeur de la souris survolera l'image : alt="Mon image"
La balise de description de l'image : title="description de l'image"

Ce qui donnera par exemple :

<img src="images/dessin.gif" width="30" height="35" border="0" alt="Mon image">

 

 

Les liens hypertexte :

C'est la base de la conception d'une page web.
C'est ce qui permet la "navigation" entre les pages web.

 

Le lien et la cible :

Un lien hypertexte est composé de deux parties :
- le lien en lui-même (partie sur laquelle on clique), défini par HREF en HTML
- la cible (endroit où renvoie le lien).

lien cible
http://www.aidewindows.net
<a href="http://www.aidewindows.net">http://www.aidewindows.net</a>
http://www.aidewindows.net/vista.php
<a href="http://www.aidewindows.net/vista.php">
http://www.aidewindows.net/vista.php</a>
http://www.aidewindows.net/vista.php#test_vista
<a href="http://www.aidewindows.net/vista.php#test_vista">
http://www.aidewindows.net/vista.php#test_vista</a>
page d'accueil du site

page du site consacrée à Windows Vista


paragraphe "Tests de Windows Vista" sur la page Windows Vista

Lorsque la cible se trouve sur le même site, il est inutile de répéter l'adresse Internet :
exemple : vista.php

Lorsque la cible se trouve sur la même page, il est inutile d'indique le nom de la page :
exemple : #images

 

L'ancre :

Si la cible est une adresse Internet ou une autre page du site, il n'y aura rien à rajouter.
Si la cible est un endroit précis d'une page à l'intérieur du site, il faudra rajouter une ancre à cet endroit.

L'ancre sera définie par NAME

exemple : #images qui s'écrit :

<a name="images"></a>

 

Target :

Il existe deux possibilités de concevoir l'accès à un lien :
- dans la même fenêtre,
- dans une nouvelle fenêtre.

1 - Dans la même fenêtre :

exemple : lien menant vers une autre partie du site.

<a href="vista.php">cliquer ici pour accéder à la page consacrée à Windows Vista</a>

 

2 - Dans une nouvelle fenêtre :

exemple : lien menant vers un autre site.

<a href="http://www.aidemac.net" target="_blank">cliquer ici pour accéder au site Aidemac.net</a>

Code utilisé :
Pour ouvrir le lien dans une nouvelle fenêtre il faudra ajouter la mention target="_blank" dans le code du lien hypertexte.

 

Les nouvelles normes :

PS : Les nouvelles normes recommandent de ne plus utiliser la mention target="_blank", ceci pour faciliter la consultation des personnes handicapées ou mal-voyantes.
Il est conseillé d'utiliser le bouton Précédent du navigateur pour revenir à la page précédemment consultée.

Cette recommandation est encore peu appliquée, car les webmasters hésitent à "perdre leurs visiteurs" ainsi :-)

Voir aussi :

alsacreations.com - "target=_blank" n'est pas valide en doctype strict. Que faire ?
"La propriété "Target" est une façon d'imposer une navigation aux visiteurs. Elle n'est plus acceptée par le W3C dans les versions strictes de HTML et XHTML."

 

 

Ecriture d'un lien hypertexte :

 

1 - Ecriture du lien :

Pour intégrer un lien hypertexte à l'intérieur d'une page, il faudra taper le texte suivant :

<a href="lien">cliquer ici</a>

A la place du mot lien, on pourra écrire :
- 1 - une adresse Internet, par exemple : http://www.aidewindows.net
- 2 - une autre page du site, par exemple : page1.htm
Dans ces deux cas, le lien sera utilisable tel quel.

Ces liens seront utilisés par exemple :
- 1 dans une page de liens,
- 2 dans le menu d'un site, pour accéder aux autres pages de ce site.

A la place du mot lien on pourra écrire :
- 3 - un endroit précis de la page en cours, par exemple : #home
- 4 - un endroit précis d'une autre page, par exemple : page1.htm#home
Dans ces deux cas, il faudra ajouter, à l'endroit visé par le lien, la cible correspondante.

Le sigle # précisera qu'il s'agit d'un endroit précis de la page.

 

2 - Ecriture de la cible (aussi appelé = ancre) :

La cible sera à indiquer quand le lien contiendra le sigle #

Si le lien désigne : #home la cible s'écrira home

<a name="home"></a>

Souvent, la cible sera placée près d'un titre de chapitre à l'intérieur d'une page.

 

 

Les tableaux :

Les tableaux sont indispensables pour effectuer une mise en page dans une page web (voir).

On pourra choisir :
- le nombre de lignes et de colonnes, en ajoutant des balises <TR> et <TD>
- la taille du tableau, avec les balises WIDTH et HEIGHT
- la couleur de fond du tableau, ou des cellules du tableau, avec la balise BGCOLOR
- la taille des bordures du tableau ou des cellules, avec la balise BORDER
- l'alignement à l'intérieur des cellules, avec les balises ALIGN et VALIGN

Un tableau, dans sa plus simple expression :

<table>
<tr>
<td><p>hello</p>
</td>
</tr>
</table>

La balise TR désignera une ligne (à indiquer en premier dans un tableau).
La balise TD désignera une colonne (il pourra y en avoir plusieurs dans une ligne).

 

Les balises WIDTH et HEIGHT, BORDER, BGCOLOR, ALIGN seront insérées dans la balise TABLE.

<table width="100%" height="50" border="1" cellspacing="0" bordercolor="#666666" cellpadding="5">

 

Infos sur les tableaux :
allhtml.com - Les Tableaux