STRUCTURE D'UNE PAGE HTML/CSS
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
STRUCTURE D’UNE PAGE HTML/CSS
—
C011. STRUCTURE
—
Le langage Html est composé de balises ou (tags) qui permettent de structu-
rer le texte, de le mettre en forme et d’insérer des images.
Ces instructions sont le plus souvent de la forme :
ici le texte une balise est composé
d’une action et peut avoir des propriétés indiquant comment l’action doit
être effectué.
Le plus souvent on trouve une balise d’ouverture :et une de fermeture :
Par exemple pour mettre le mot internet en gras on écrira : internet (la
balise détermine ici le caractère gras).
Pour qu’une page portant l’extension .html ou .htm soit interprêté correcte-
ment dans le navigateur, celle-ci doit posséder des balises élémentaires
dans un ordre précis exemple de code :
début du document html
ma page perso
on insère ici les balises meta tags
c’est entre ces balises que le texte s’affichera dans la page web
fin du document html
Tous les documents html commence par la balise et se finissent par
, entre les deux sera renfermer le contenu du document.
Les balises et correspondent à l’entête du document, on y
trouve entre autre qui encadrent le titre du document et les
balises meta.
Les balises et renferment le contenu du document c’est à
dire ce qui sera affiché par le navigateur, en l’occurence votre texte.
C022. LE DOCTYPE
—
On parle de “doctype“ pour faire court, mais il s’agit en fait d’une ligne de
déclaration du type de document, qui indique au navigateur dans quel type
de HTML la page a été écrite (HTML-3.2 “classique“, HTML-4 de transition ou
strict, XHTML, etc...).
Dans une écriture plus complète, cette ligne a l’allure suivante :
où :
- type_de_HTML est l’identificateur de la version du HTML utilisé.
- et où adresse_de_DTD donne l’URL de la “document type declaration“ (DTD),
à savoir un document spécifiant les propriétés de chaque élément, balises et
attributs, de ce type de HTML.
Par exemple, on pourra rencontrer la déclaration
Ces doctypes sont généralement mis en place par l’éditeur HTML utilisé. La
question de l’écrire soi-même ou de le modifier ne se pose que si on code soi-
même ses pages à la main.
Pour beaucoup d’entre nous, ça sert avant tout à faire passer nos pages au
validateur du consortium W3C, afin de vérifier qu’on n’a pas fait d’erreur sur
la syntaxe du HTML. Sans ce doctype, le validateur se borne à répondre qu’il
ne peut pas deviner la nature du document et il se croise les bras.
Côté navigateur, d’abord, cette ligne n’est prise en compte que par les navi-
gateurs les plus récents (comme Mozilla, NN7, Opera7, IE5 sur Mac ou IE6
sur Windows). En principe, cela permet un fonctionnement plus propre, du
moins plus simple. Sans ce doctype, le navigateur essaie de donner un sens
à l’intruction litigieuse en revenant à des versions antérieures du HTML ou à
des habitudes qui se sont mises en place dans les premiers navigateurs sans
trop tenir compte de la norme internationale de l’époque.
Actuellement, dans la pratique, les URL dans la ligne “doctype“ ne jouent pas
du tout le rôle prévu à l’origine par le W3C.
Le validateur du W3C n’en tient actuellement aucun compte. On peut y mettre
l’adresse attendue ou n’importe quoi d’autre, l’analyse de la page n’est pas
modifiée. Apparemment, Mozilla et les autres navigateurs conformes font de
même.
Actuellement, ces URL n’ont de réelle importance qu’en HTML-4 ou 4.01 Tran-
sitional, pour faire passer IE5-mac ou IE6 (ou Opera-7) du mode Microsoft à
un mode “conforme“. Mais ce mode est entaché de bugs parfois fort gênants
dans le cas de IE5-mac, et il n’y a pas de solution satisfaisante pour s’en
accommoder.
C033. LES BALISES HTML
—
lien hypertexte
ou texte en gras
retrait de texte
code informatique
frames ou cadres
balise de texte
trait horizontal
cellule de tableau
ou texte en italique
insertion d’une image
élement de liste
liste
paragraphe
ligne au travers d’un texte
feuille de style
chiffre en indice
chiffre en exposant
tableau
cellule de tableau
ligne de tableau
texte télétype
ligne en dessous d’un texte
liste à puces
C044. LES BALISES METAS
—
Les meta-tags, meta-balises ou metas-données sont des balises situées
dans l’en-tête du code html, entre les balises et .
Ces balises sont composés d’informations descriptive sur le site, elles seront
analysés par les robots pour permettre une indexation dans les moteurs de
recherche c’est pourquoi elles doivent être correctement remplies.
Balises de référencement
title
titre du site ou de la page
Le titre du site
description
description du site en une phrase de 200 caractères
keywords
mots clés du site
identifier-url
adresse du site
author
auteur du site
robots
diriger les robots(suivra ici la page d“index puis suivantes)
revisit-after
revisite du robot en jours
copyright
copyright du site
la balise meta keywords peut contenir 1000 caractères
la balise meta description ne doit pas contenir plus de 200 caractères
C055. CRÉER LA STRUCTRE HTML
—
Pour commencer, créer une page «index.html“, à la racine du site avec ce
code HTML :
Michard Ardiller
...topbar content...
...navbar content...
...column left content...
...column right content...
C066. CRÉER LA FEUILLE DE STYLES CSS
—
Enfin, un petit copier/coller dans votre fichier styles.css
L’élément #container fait dans ce code 780 pixels: Chaque éléments placés
dans #container doit faire moins de 780 pixels!
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
/*
div.spacer, permet de faire deux colonne dans #container
*/
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}
C07Vous pouvez aussi lire
