docstructure d`une page html/css
download 
Plainte Transcription
structure d`une page html/css
STRUCTURE D’UNE PAGE HTML/CSS
—
C01
1. STRUCTURE
—
Le langage Html est composé de balises ou (tags) qui permettent de structurer le texte, de le mettre en forme et d’insérer des images.
Ces instructions sont le plus souvent de la forme :
<balised’ouverture> ici le texte </balisedefermeture> 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 : <b>internet</b> (la
balise <b> détermine ici le caractère gras).
Pour qu’une page portant l’extension .html ou .htm soit interprêté correctement dans le navigateur, celle-ci doit posséder des balises élémentaires
dans un ordre précis exemple de code :
<html> début du document html
<head>
<title>ma page perso</title>
on insère ici les balises meta tags
</head>
<body>
c’est entre ces balises que le texte s’affichera dans la page web
</body>
</html> fin du document html
Tous les documents html commence par la balise <HTML> et se finissent par
</HTML>, entre les deux sera renfermer le contenu du document.
Les balises <HEAD> et </HEAD> correspondent à l’entête du document, on y
trouve entre autre <TITLE> </TITLE> qui encadrent le titre du document et les
balises meta.
Les balises <BODY> et </BODY> renferment le contenu du document c’est à
dire ce qui sera affiché par le navigateur, en l’occurence votre texte.
C02
2. 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 :
<!DOCTYPE HTML PUBLIC “type_de_HTML“ “adresse_de_DTD“>
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
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN“
“http://www.w3.org/TR/html4/loose.dtd“>
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 soimê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 navigateurs 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 Transitional, 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.
C03
3. LES BALISES HTML
—
<a>
lien hypertexte
<b> ou <strong>texte en gras
<blockquote> retrait de texte
<code> code informatique
<frameset>
frames ou cadres
<font> balise de texte
<hr> trait horizontal
<td> cellule de tableau
<i> ou <em>
texte en italique
<img> insertion d’une image
<li>
élement de liste
<ol>liste
<p>paragraphe
<strike>ligne au travers d’un texte
<style> feuille de style
<sub> chiffre en indice
<sup> chiffre en exposant
<table>tableau
<td> cellule de tableau
<tr>
ligne de tableau
<tt>
texte télétype
<u>
ligne en dessous d’un texte
<ul>
liste à puces
C04
4. 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 <head> et </head>.
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
<title>Le titre du site</title>
description
description du site en une phrase de 200 caractères
<meta name=“description“ content=“La description du site“>
keywords
mots clés du site
<meta name=“keywords“ content=“les, mots, clés“>
identifier-url
adresse du site
<meta name=“identifier-url“ content=“http://www.lesitecom“>
author
auteur du site
<meta name=“author“ content=“auteur“>
robots
diriger les robots(suivra ici la page d“index puis suivantes)
<meta name=“robots“ content=“index, follow“>
revisit-after
revisite du robot en jours
<meta name=“revisit-after“ content=“10 days“>
copyright
copyright du site
<meta name=“copyright“ content=“lauteur»“>
la balise meta keywords peut contenir 1000 caractères
la balise meta description ne doit pas contenir plus de 200 caractères
C05
5. CRÉER LA STRUCTRE HTML
—
Pour commencer, créer une page «index.html“, à la racine du site avec ce
code HTML :
<!DOCTYPE html>
<html>
<head>
<title>Michard Ardiller</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=iso-8859-1»/>
<link rel=“stylesheet“ media=“screen“ type=“text/css“ title=“Design“ href=“styles.css“>
</head>
<body>
<div id=“container“>
<div id=“topbar“> ...topbar content... </div>
<div id=“navbar“> ...navbar content... </div>
<!-- the main section where all pages will be loaded using URL variables and PHP include() function -->
<div id=“main“>
<div id=“column_left“> ...column left content... </div>
<div id=“column_right“> ...column right content... </div>
<!-- this layer solve some issue about the css design, forced the #main layer height equal to height of two column
layer (#columnt_left and #column_right) inside itself -->
<div class=“spacer“></div>
<!-- close #main content -->
</div>
<!-- close #container -->
</div>
</body>
</html>
C06
6. 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;}
C07
