Introduction
1 Qu'est-ce
que le langage HTML?
Le langage HTML n'est
pas un langage de programmation. C'est un langage de balises qui
permet de formater un texte.
Ainsi, pour modifier un texte, vous
devez l'entourer de balises. Par exemple, la balise <b>
permet de mettre du texte en gras. Vous devrez pour ça utiliser
la balise comme suis :
<b>texte en gras</b>
La balise <b> active le mode gras
et la balise </b> le désactive. Ces balises
n'apparaissent pas dans le navigateur.
Pour être un as de la programmation
HTML, vous devrez donc connaître toutes ces balises et leurs
effets.
Il est bien sur possible d'améliorer
vos pages en utilisant du java, du javascript, du VBscript ou
d'autres outils mais vous pouvez commencer avec les seules
balises HTML et un bon traitement de texte.
2 Règles a respecter
Même si la constitution française
garantit la liberté d'expression, vous ne pouvez pas tout
mettre sur votre site web.
Les personnes offensées ou blessées
par les propos que vous tenez sur votre site pourrons porter
plainte pour diffamation ou calomnie.
De plus, si votre site reçoit des
informations personnelles, relatives aux visiteurs, n'oubliez
pas de le déclarer auprès de la CNIL.
Il existe un "code de
conduite" sur internet qu'il vaut mieux suivre pour éviter
les problèmes : la Netiquette. Elle contient un certain nombre
de régales qui assurent la convivialité du web.
|
|
Chapitre 1
I Las bases du langage HTML
I.1 Architecture
Les documents HTML sont composés
de trois types de balises conteneur. Une balise est un élément de
code qui prends la forme <balise>. Un conteneur est une paire de
ces balises sous la forme : <balise></balise>.
Le premier élément active la fonction et le
suivant la désactive. Ces balises n'apparaissent pas à l'écran.
Exemple :
<b>Ceci est en gras</b> Mais pas ceci.
La balise <b> active le mode gras et la balise
</b> le désactive. Voici le résultat :
Ceci est en gras Mais pas ceci.
La balise la plus importante dans le langage HTML
est la balise <html>. Elle et sa balise finale </html>
doivent obligatoirement encadrer le code HTML de votre page pour que
le navigateur le reconnaisse en tant que tel.
I.2 L'en-tête
I.2.1 Introduction
L'en-tête de la page doit être entouré des
balises <head> et </head>. Elle n'est pas obligatoire mais
permet de fournir des informations au navigateur.
Vous pouvez, dans l'en-tête :
- donner un titre au document
- établir une relation entre plusieurs documents
- commander au navigateur de faire un formulaire de recherche
- fournir une méthode pour envoyer des messages spéciaux
I.2.2 Nommer le document
L'élément <title> est le seul requis
pour l'en-tête. Le titre apparaît généralement dans la barre de
titre du navigateur. Il n'a aucun rapport avec le nom du fichier HTML.
Il doit être contenu entre les balises <title>
et </title>.
Exemple :
<title>tchadien.ca</title>
I.2.3 Créer une hiérarchie de document
Les documents HTML sont quasiment tout le temps
en relation avec d'autres documents. Or, il y a deux types de liens :
les liens relatifs et les liens absolus.
Ces deux types de liens peuvent casser si l'on déplace
l'un des deux éléments en relation.
Pour éviter d'avoir à modifier le fichier à
chaque fois, les concepteurs du langage HTML ont mis en place les éléments
"base" et "link".
I.2.3.1 Base
Cet élément sers à spécifier en entier l'URL
du document. Cela permet aux liens relatifs de fonctionner.
Exemple :
<base href="//www.tchadien.ca.tc">
I.2.3.2 Link
Maintenant que le navigateur à localisé le
document, il reste à définir la relation entre les documents. C'est
le rôle de la balise <link>. Cette balise contient une URL qui
précise l'objet de référence et un attribut qui décrit la
relation.
Il faut donc autant d'éléments link que de
relations.
Voici les attributs :
| href |
URL du document de référence |
| rel |
définit les relations entre un autre document et le
document actuel |
| rev |
relation vers les personnes qui ont contribué à la réalisation
du document |
| type |
spécifie le type et les paramètres pour une feuille de
style liée |
La liste des types de relation n'est pas bien définie mais en voila
quelques-unes.
rev :
- made
- author
- editor
- publisher
- owner
exemple :
<link href="mailto:webmaster" rev="made">
rel :
- bookmark
- copyright
- glossary
- help
- home
- index
- toc (table of content)
- next
- previous
I.2.4 Personnaliser l'information d'en-tête
La procédure d'approbation de nouvelles spécifications
du langage HTML étant assez longue, les sociétés qui éditent les
navigateurs n'attendent pas les nouvelles standardisations pour sortir
de nouvelles versions.
L'élément "meta" permet donc de définir
ce qui n'est pas encore dans le langage HTML officiel.
Bien sûr, cet élément n'est pas indispensable
dans un document HTMl de base mais il devient vite utile au fur et à
mesure que vos documents se compléxifient.
Exemple :
<meta http-equiv="refresh" content="60" url="http://www.tchadien.ca/index.shtml">
Internet Explorer et Netscape interprètent la ligne précédente
comme ceci :
Attendre 60 secondes puis charger la page située à
l'adresse : http://www.tchadien.ca/index.shtml.
Cet exemple sers souvent dans le cas de sites qui ont été déplacés.
Cela permet de ne laisser qu'une petite page à l'ancien emplacement
qui renvoie vers le nouveau.
La propriété la plus utilisée de l'élément
"meta" est "keywords". Beaucoup de moteurs de
recherche utilisent cette propriété pour indexer la page.Dans ce
genre d'utilisation, il vaut mieux utiliser aussi la propriété
"description" qui permettra de donner une description résumée
de la page aux moteurs de recherche.
Attributs de meta :
| http-equiv |
définit les propriétés |
| name |
fournit une description supplémentaire. s'il est absent, il
prend la valeur de http-equiv |
| url |
cible de la propriété |
| content |
valeur de la réponse pour la propriété |
I.2.5 Autres éléments
Il reste deux éléments à voir,
"style" et "script" qui seront étudiés plus
tard.
I.3 Le corps du document Même si le
web est de plus en plus graphique, les internautes seront avant tout
intéressés par le contenu de votre site.
Il faudra donc passer beaucoup de temps à
travailler le corps du document.
I.3.1 Modèle de document
Avant de mettre en place le contenu de
votre document, vous devrez définir un modèle de document qui
contiendra les éléments indispensables.
<html>
<head>
<title>Ceci est
un modèle de document</title>
</head>
<body>
Entrez le corps ici
</body>
</html>
Dans ce document, vous pouvez voir les balises
vues plus tôt; à savoir <html> et <head> mais aussi une
nouvelle balise : <body>.
Cette balise et son contraire </body>
bornent le corps du document.
I.3.2 Attributs de body
| alink |
définit la couleur d'un lien actif |
| background |
Pointe sur l'url d'une image qui servira de fond |
| bgcolor |
couleur de fond |
| bgproperties |
si cet attribut vaut "fixed", l'image de fond ne défilera
pas |
| leftmargin |
largeur de la marge de gauche en pixels |
| link |
couleur d'un lien non visité |
| text |
couleur du texte |
| topmargin |
hauteur de la marge du haut en pixels |
| vlink |
couleur des liens visités |
I.3.3 Colorer un document
Une des première chose à faire lors de
la création d'un document est de choisir les couleurs que vous
utiliserez. si vous n'en définissez pas, ce seront les couleurs
choisies par le navigateur qui seront utilisées.
Il n'y a pas de règle absolue pour créer une
bonne palette de couleurs mais veillez à ce que votre document reste
lisible. Il faut garder un contraste assez élevé entre le texte et
le fond.
I.3.3.1 Définir
les couleurs
En HTML, les couleurs sont définies par
un système héxadécimal basé sur trois couleurs de base : Rouge,
vert et bleu appelé RGB (red, green ans blue). Chaque couleur est
représentée par une valeur comprise entre 00 et FF (soit 0 et 255 en
décimal). Ces trois valeurs sont ensuite rassemblées et précédées
d'un # (dièse).
Ainsi, #FFFFFF correspond au blanc.
Il existe 16 couleurs prédéfinies en HTML :
| noir |
#000000 |
| marron |
#800000 |
| vert |
#008000 |
| olive |
#808000 |
| marine |
#000080 |
| pourpre |
#800080 |
| vert foncé |
#008080 |
| gris |
#808080 |
| argent |
#C0C0C0 |
| rouge |
#FF0000 |
| vert fluo |
#00FF00 |
| jaune |
#FFFF00 |
| bleu |
#0000FF |
| fuschia |
#FF00FF |
| turquoise |
#00FFFF |
| blanc |
#FFFFFF |
Vous pouvez remplacer les définitions héxadécimales
des couleurs par leur nom.
Exemple :
<body bgcolor="#000000">
<body bgcolor="noir">
I.3.3.2 Les
couleurs du corps
L'attribut bgcolor sert à définir la
couleur de fond du document. Si vous utilisez une image de fond, prévoyez
de mettre une couleur de fond assez proche de la couleur dominante de
l'image. Cela permettra aux utilisateurs de lire le texte avant que
l'image de fond soit chargée ou s'ils ont désactivé le chargement
des images.
L'attribut "text" définit la
couleur du texte du document. Pour que votre document soit lisible,
veillez à choisir plutôt une couleur foncée sur un fond clair.
L'attribut "link" donne la couleur
des liens visités. Prenez une couleur assez différente de celle du
texte pour que l'on identifie bien les liens.
L'attribut "vlink" correspond à la
couleur des liens visités. On choisit généralement une couleur plus
sombre que celle l'attribut "link".
L'attribut "alink" donne la couleur
des liens dit actifs. Cela est utilisé généralement pour des
documents ayant des cadres.
I.3.4 Le fond
L'image de fond permet d'habiller un
document HTML. C'est un fichier d'image, le plus souvent au format GIF.
Beaucoup d'images de fond sont petites et répétées
sur tout le fond.
Il convient d'éviter les images trop colorées
ou trop chargées pour ne pas nuire à la lisibilité du document.
L'image de fond ne sera pas visible par les
personnes qui ont désactivé le chargement des images. c'est
pourquoi, comme nous l'avons déjà dit, il faut essayer de mettre une
couleur de fond proche de la couleur principale de l'image.
I.3.5 Commenter le document
Vous pouvez commenter votre fichier HTML
en mettant du texte entre les balises <!-- et -->. Ce texte ne
sera pas affiché dans le navigateur. Ceci est très utile pour
faciliter les modifications ultérieures dans le fichier.
I.3.6 L'élément "address"
Cet élément vous permet de vous
identifier en tant qu'auteur d'un document et éventuellement de
donner vos coordonnées aux internautes.
Exemple :
<address>tchadien.ca : webmaster</address>
donnera
|
le gratuit du web
