| Programmez par plaisir! |
30-07-2010 03:45 |
Note : Un certain nombre de balises (font, basefont, center, s, u, b, i, ...) et propriétés (align, width & height (associées à certaines balises), size, color, border, background, bgcolor, face, name, target, ...) sont dépréciées. Il est fortement recommandé de ne pas les utiliser car elles pourraient devenir obsolètes dans un futur proche. En fait, ils ne sont plus pris en charge par les normes actuelles du langage HTML (W3C) donc plus sous garantie. L'objectif des Standards est de séparer le contenu de la mise en forme dans les sites Web en utilisant les feuilles de style CSS. Il est donc recommandé de les utiliser au maximum.
- Tout document html commence par la balise <html> et se
termine par la balise </html>.
- Le document se divise ensuite en deux parties : l'entête du document et le corps du
document.
- L'entête du document va se situer entre les balises <head>
et </head> Ce qui est à l'intérieur ne
sera pas visible à l'écran.
- Le corps du document va se situer entre les balises <body>
et </body>. C'est ce qui est à l'intérieur de
ce document que le visiteur va pouvoir regarder.
| Source de la page | Visualisation de la page |
<html>
|
Bonjour tout le monde !
|
Il est absolument indispensable. Ce titre est affiché dans
la barre de titre du navigateur. Il ne faut pas confondre le titre du document et le nom du
document(fichier). Une page sans titre ne sera pas référencée dans certains
moteurs de recherche. De plus il n'est pas vu dans le document lui-même.
- Pour afficher ce titre dans la barre de titre du navigateur, il faut l'insérer entre
les balises : <title> et </title>
qui se place entre les balises <head> et </head>
| Source d'une partie de la page |
<head>
|
Cet élément va vous permettre de vous identifier en
tant que auteur de vos documents. Vous pouvez y placer des références et des infos
sur les droits d'auteurs. Ceci apparaît généralement en italique : en bas ou
en haut du document. Ce texte est compris entre les balises <address>
et </address>.
Il peut être utile d'insérer une ligne qui sépare votre document de ces
informations tout simplement en insérant une barre de séparation à l'aide
de la balise <hr>.
Ce qui est dans l'entête n'est pas vu dans le document mais
est important. Elle permet de donner de nombreux renseignements : descriptions et mots
clés pour les moteurs de recherche, auteur, email, langage, copyright, etc... La balise
est <meta> et se place entre les balises
<head> et </head>. Les différents
attributs de cette balise sont :
- http-equiv : définit les propriétés pour
l'élément.
- name : fournit une description supplémentaire de
l'élément. Si cet attribut manque il est supposé être identique
à http-equiv.
- url : définit un document cible pour la
propriété.
- content : fournit la valeur de la réponse pour la
propriété.
<meta name
="description"
content="Prog-info : Programmation et
Informatique.">
|
Ces deux balises sont indispensables pour le
référencement.
Vous avez besoin d'informations sur le référencement ?
Web Rank Info
Remarque : <meta http-equiv
="refresh" content="
30"> : permet de recharger la
page de votre navigateur toutes les 30 secondes.
<base> est utilisé pour
spécifier en entier l'url originale du document. Cela permet aux liens relatifs de
fonctionner, même si un document, un fichier a été déplacé
vers un autre répertoire. Un logiciel de visualisation peut ainsi trouver un document
lié, même quand il est dirigé depuis un parent vers un endroit
différent.
Un seul attribut est nécessaire : href qui fournit l'URL.
Cette balise se place entre les balises <head> et </head> juste après les balises
<title>.
...
|
Si l'élément base
permet à un navigateur de localiser un document, la question de ce que doit être
la relation entre deux documents subsiste toujours. Elle devient même crutiale au fur et
à mesure que votre fichier se complexe. L'élément
link permet ainsi de connecter logiquement les documents. Il indique la relation entre le
document qui contient la balise link et un autre document. Elle
consiste en une url qui précise l'objet de référence et un attribut qui
décrit la relation.
Si un document HTML parent contient un lien vers un document enfant, le document actuel fournira
une balise link indiquant cette relation. (placée entre
<head> et </head>)
Voici les différents attributs de l'élément link
et leur fonction :
- href : dirige vers l'url de l'autre document.
- rel : définit les relations entre le document actuel et
les personnes qui ont contribuées à son existence.
- rev : définit les relations entre un autre document HTML
et le document actuel.
- type : spécifie le type et les paramètres pour une
feuille de style liée.
Avec les attributs rev et rel on
peut utiliser "bookmark", "
copyright", "glossary", "help", "home", "index", "toc", "next", "previous".
...
|
L'élément body supporte
un très grand nombre d'attributs, tous importants pour l'apparence générale
de votre document. Voici les différents attributs suivis de leur fonctions : (Plus de
détails seront fournis par la suite)
- alink : définit la couleur d'un lien actif.
- background : pointe sur l'URL d'une image à utiliser pour
le fond du document.
- bgcolor : définit la couleur du fond du document.
- bgproperties : si elle est définie à FIXED,
l'image de fond ne défile pas.
- leftmargin : définit la largeur de la marge de gauche en
pixels.
- link : définit la couleur d'un lien visité.
- text : définit la couleur du texte.
- topmargin : définit la largeur de la marge du haut en
pixels.
- vlink : définit la couleur d'un lien déjà
visité.
<body bgcolor="#FFFFFF" link="#0000FF" vlink="#0000FF" alink="#FF0000" text="#000000" topmargin="0">
|
Vous pouvez choisir une couleur de fond de base : une couleur unique, utiliser une image, des textures ou encore un logo. Le mieux est d'avoir un fond qui correspond au thème de son site web. Il faut tout de même faire attention à ne pas choisir des images trop longues à charger... et à ce que le texte et les liens de votre document restent bien lisibles.
Au début de la création d'un document, vous devez
définir la couleur que vous utiliserez pour vos liens et votre texte. Essayez de grader
les mêmes tons de couleurs pour tout votre site afin de ne pas dépayser le
visiteur. Si vous ne spécifiez rien les couleurs par défaut seront
utilisées : celles du navigateur de l'internaute.
Vous verrez plus tard que les styles vous permettrons de vous simplifier la vie et de
définir des styles une bonne fois pour toute.
Les couleurs en HTML sont définies par un système de codage hexadécimal
basé sur trois couleurs : rouge, vert et bleu (RGB : red, green, blue). On assigne
à chacune de ces couleurs une valeur entre 00 et FF c'est-à-dire une valeur entre
0 et 255. Ces trois valeurs sont précédées du signe dièse : #. Voici
quelques petits exemples :
| Noir | #000000 | Argent | #C0C0C0 | ||
| Marron | #800000 | Rouge | #FF0000 | ||
| Vert | #008000 | Vert Fluot | #00FF00 | ||
| Olive | #808000 | Jaune | #FFFF00 | ||
| Marine | #000080 | Bleu | #0000FF | ||
| Pourpre | #800080 | Fuchsia | #FF00FF | ||
| Vert Foncé | #008080 | Turquoise | #00FFFF | ||
| Gris | #808080 | Blanc | #FFFFFF |
Un modèle de document est un document très simple que vous utiliserez comme point de départ pour la création de toutes vos pages. Il vous permettra de gagner du temps. Ce modèle pourra bien sûr être étoffé lorsque vos connaissances en HTML seront meilleures.
Exemple :
<html>
|
 |
|
