|
|
|
| <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. |
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 :
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.
Elles sont destinées aux moteurs de recherche
qui indexent les sites web.
Cela n'est donc utile que si l'on souhaite faire référencer
son site.
Elles permettent de :
- décrire le contenu du site,
- donner des informations sur son auteur,
- donner des indications aux robots qui parcourent les sites.
Les balises META sont de différentes sortes :
Informations sur la nature du document :
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
Informations sur l'auteur, la langue utilisée,
le contenu du site :
<META NAME="author" CONTENT="Alain
MEST">
<META http-equiv="content-language" CONTENT="fr">
<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">
Plus de précisions sur le site d'Henry :
- http://www.aidenet.com\pageperso13ae.htm
La balise HEAD peut contenir également du code JavaScript. C'est un code de programmation qui permet d'exécuter des commandes que le code HTML ne peut effectuer.
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.
Un code JavaScript débute par la balise <SCRIPT> et se termine par la balise </SCRIPT>
exemple :
<SCRIPT type=text/javascript>
function favorites()
... etc
</SCRIPT>
Différents codes JavaScript sont disponibles en téléchargement sur certains sites (voir)
Ne pas oublier que la présence de code JavaScript dans une page,
ralentit fortement 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), 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 :
C'est elle qui 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.
Pour approfondir la connaissance des balises, et leur
signification :
http://www.aidenet.com/lexique0.htm
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.
Sur le site d'Henry, il y a un nuancier pour apprécier
le choix des couleurs :
http://www.aidenet.com/pageperso64a.htm
<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>L'interligne entre deux paragraphes est assez important</P>
<P>Pour limiter l'espacement entre deux lignes<BR>
Il faut utiliser la balise de retour à la ligne</P>
La balise <FONT> permet de choisir la police
de caractère, sa taille, sa couleur.
Les balises <B> et <I> déterminent
le style.
Exemple :
<font face="Arial, Helvetica, sans-serif"><b><i>
<font size="2" color="#FF0000">Exemple de
texte</font></i></b></font>
On remarque :
| Le nom de la police utilisée : | <font face="Arial, Helvetica, sans-serif"> |
| Le style (gras, italique) : | <b><i> |
| La taille et la couleur du texte : | <font size="2" color="#FF0000"> |
| Le texte qui s'affiche à l'écran : | Exemple de texte |
| Les balises sortantes : : | </font></i></b></font> |
Ce qui donnera :
Exemple de texte
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"
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.
Un lien hypertexte est composé de deux parties :
- le lien en lui-même (partie sur laquelle on clique),
défini par HREF
- la cible (endroit où renvoie le lien).
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
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 :
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>
Les balises WIDTH et HEIGHT, BORDER, BGCOLOR, ALIGN seront insérées dans la balise 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).
3/09/01 5:00 A compléter :-)
|
