Partager l'article ! Chapitre N=°2 : Premiers Pas ( Partie 1 ): Dans le précédent chapitre nous avions un peu pris notre temps pour comprendre ce qu’était le HTML et ...
Présentation
- : Le blog de Renji
-
- : Hi Tech
- Partager ce blog
- Retour à la page d'accueil
- Contact
Liens
Créer un Blog
Recherche
Articles récents
Calendrier
| Juin 2012 | ||||||||||
| L | M | M | J | V | S | D | ||||
| 1 | 2 | 3 | ||||||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 | ||||
| 11 | 12 | 13 | 14 | 15 | 16 | 17 | ||||
| 18 | 19 | 20 | 21 | 22 | 23 | 24 | ||||
| 25 | 26 | 27 | 28 | 29 | 30 | |||||
|
||||||||||
Lundi 20 juillet 2009
1
20
/07
/Juil
/2009
15:04
Dans le précédent chapitre nous avions un peu pris notre temps pour comprendre ce qu’était le HTML et ce dont nous avions besoin pour programmer.
Dans ce chapitre nous allons utiliser les deux logiciel que je vous ai demandé d'installer, et faire notre première page Web. C’est ici que tout commence alors suivez bien.
Structure d’une page Web :
Comme vous le savez désormais une page web se compose de plusieurs balises. Ces balises sont organisées de la manière suivante :
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Ma première page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body>
<!-- c'est ici qu'on bossera le plus -->
</body> </html> |
Vous remarquez que cette page comporte 4 balises differentes :
1- <!DOCTYPE> : Dans les normes du HTML et du XHTML, un DOCTYPE (contraction pour "Document Type Declaration") informe le validateur de la version de (X)HTML que vous utilisez, et doit apparaitre en première position dans chaque page web. Les DOCTYPEs sont des composants primordiaux pour les pages conformes aux normes : ni votre balisage ni vos CSS ne passeront une validation sans DOCTYPE.
Si vous faites du HTML ou du XHTML n’oubliez jamais de mettre cette balise sous peine d’avoir quelques problèmes. Dans notre cas, nous allons utiliser le XHTML 1.0.
2- <html>
</html> : l’ensemble des balises de la page se trouveront dans cette balise. Enlevez-la et votre code plantera lamentablement 
Cette balise possède deux attributs, qui sont marqués en rouge:
xmlns: qui ne nous einteresse pas trop, il faut seulement l'écrire.
xml:lang: ici, on met la langue dans laquelle est écrite notre page, par exemple : si vous faites un site français, on ecrira : xml:lang="fr" .
3- <Head> </Head> : Cette balise va contenir entre autres le CSS, Les balises <Meta /> qui servent par exemple à optimiser votre référencement par des moteurs de recherche (La réalité cruelle de notre époque veut que très peu de moteurs de recherche tiennent encore compte de ces balises ) et la balise <title> </title>.
<title> </title> est une balise à laquelle vous avez chaque jour affaire sans même vous en apercevoir.
Exemple :
La partie entourée en rouge est en fait un texte qui se trouve dans la balise <title></title>
Quand vous ouvrez un onglet sous firefox, ou que vous avez plusieurs fenêtres web ouvertes en bas dans la barre des tache,. Ces barre portent généralement le nom du site web sur lequel vous êtes et parfois le titre de la page et bien il s’agit d’un texte qui se trouve dans la balise. <title> </title>.
Exemple :
<Title> Espace Programmation : Bienvenue aux bloggers </title>
<Head> < /head> peut contenir aussi une balise nommé <Link>. Mais nous en parlerons un peu plus tard.
4- <body></body> : Notre espace de travail, c’est ici que nous allons passez le plus claire de notre temps. En effet, mise à part les balises cités précédemment, toutes les autres balises relatives au texte seront insérés ici.
Les balises et les attributs :
Les balises:
L'éternelle question du premier chapitre revient et vous savez normalement maintenant ce que c’est qu’une balise.
En fait, jusqu'à présent quand je parlais de balises, et que je donné mes petits exemples ; je donnais toujours des balises de ce type : <balise></balise>. Mais dans le cas de <Meta /> par exemple, elle n’était composée que d’une seule partie.
Eh bien, il faut savoir qu’il existe selon cette écriture deux types de balises :
Dans les deux cas qu’elle soient doubles ou uniques les balises s’écrivent de la manière suivante :
« Le signe plus petit que » Nom
de la balise « Signe plus grand que »
Ce qui donne :
1 - < nom de la balise > < /nom de la
balise >
ou
2- < nom de la balise />.
On avait compris la première fois 
...
Je sais, mais tenais quand même à bien vous l’expliquer. Parce que moi à mes débuts, j’avais cherché
carrément une journée pour trouver comme faire « le signe plus grand et plus petit que ». Faut dire que je n’étais pas un très grand Fan d’exposés de Math, et ces deux signes au cas ou
vous seriez à ma place se trouvent sur la touche qui doit normalement se situer à droite de la touche « Shift » ou Maj 
.
Les attributs :
On en a parlé en haut mais on a pas vraiment donné d’explications. Les attributs ont des utilités variés, et sont indispensables pour le bon fonctionnement de certaines balises.
Ainsi pour une balise qu’on nommera image par exemple :
|
<image lien="http://www.kiffegrave.com/wp-content/uploads/2009/03/le_tire_bouchon_-_mousse_au_chocolat.jpg"> |
Lien est un attribue qui va indiquer à la balise image l’emplacement de l’image d’une coupe de chocolat, pour que la balise image puisse l’afficher a notre écran.
Les attributs ont des rôles variés, comme par exemple l’attribut « Width » qui peut servir à indiquer la largeur d’une image, l’attribut « Name » qui donne un nom a une balise » ...Etc
Remarque:
1- Depuis tout à l'heure j'utilise des balises comme <image /> ou <balise> ou encore < nom de la balise />. Ces balises n'éxistent pas en réalité je les utilise juste pour vous faire comprendre le principe d'appelation d'une balise ou d'un attribut
2- L'emplacement d'un attribut est toujours à l'interieur d'une balise.
3- Une balise peut contenir plusieurs attributs differents.
Au cas, ou ça ne serai pas le cas, prenez tout votre temps pour relire. Ce qu'il faut comprendre dans tout ce joyeux K.O est qu'il existe des balises, et des attributs. Les attributs optimisent
l'utilisation des balises qui existent sous deux formes différentes : uniques ou doubles.
Ahh, ça y'est <!--[if !vml]--> Alors, place aux expériences, mouhahahaha 
....
Bon pour ce chapitre, j'ai décidé tout compte fait de le diviser en deux chapitres...
Pourquoi ???
Parce que notre chère hébergeur "overblog" me dit que j'ai dépassé 130000 caractères html par article.
ça ne me fait
pas vraiment plaisir mais que voulez vous 
, je me vengerai un jour ou l'autre ...
Cartaman