HTML
Introduction
HTML pour HyperText Markup Language. Comme indiqué précédemment, c'est le World Wide Web Consortium (W3C) qui publie les recommandations (des traductions en français existent !) concernant le langage HTML. Il s'agit d'un langage utilisant des balises (Les autres termes utilisés sont:marqueurs, repères ou tags) et non de programmation. Vous entendrez donc parler de langage à balises. Le HTML permet de présenter des informations dans un document. En aucun cas, il ne devrait s'occuper de l'apparence ou de l'habillage qui est plutôt dévolu au CSS.
En fait, un fichier HTML est un simple fichier ASCII. Il est donc tout à fait possible d'utiliser le bloc-notes pour se crééer une page (mieux NotePad++).
L'extension du
fichier doit être .html ou .htm
Ce n'est cependant pas la meilleur solution. On préférera des outils plus spécialisés comme par exemple: Thunderbird (gratuit), Dreamweaver (payant), ...
L'avantage de ces outils: Vous voyez directement le rendu sur l'écran.
L'inconvenient: Vous ne savez pas comment est généré le contenu du fichier. Si vous débutez, ce n'est pas forcement important, mais si vous voulez aller plus loin dans la construction de votre site (en utilisant Javascript ou PHP par exemple), il vous faudra connaître au moins les bases du HTML.
Il ne s'agit pas ici de refaire un cours complet sur le HTML, mais d'en connaître les bases.
Certains points ne
seront pas vus ici, il s'agit de tout ce qui touche aux couleurs, positionnement,
...
Il n'est en effet pas conseillé de mettre ces attributs en dur dans votre document. Préférez plutôt l'utilisation d'un fichier css (feuille de style) qui est plus simple à gérer et permet surtout de modifier rapidement un ensemble de documents (voir le chapitre "la page" sur la balise <link> déterminant l'emplacement des ressources comme le CSS) !
Avant la version 4.01 de HTML, les équipes des différents navigateurs inventaient des balises propriétaires souvent orientées "habillage", tout le contraire de ce qu'il fallait faire, bref cela devenait un peu du n'importe quoi.
Depuis, il y a eu un rappel à l'ordre du W3C avec HTML 4.01: il faut bien comprendre que votre page HTML ne doit faire que de la présentation, en aucun cas de l'habillage !!! L'habillage se faisant dans les feuilles CSS. De même, il ne doit pas y avoir de codes javascript ou autre dans la page HTML, mais il faudra passer par des includes !
Pour simplifier:
Il y a d'un coté le développeur, de l'autre le graphiste (web desinger). On sépare bien le boulot des deux, cela évite des situations dramatiques comme la perte d'un pan complet de codes suite à l'intervention d'un graphiste, où à un graphiste de se perdre dans le fichier HTML...
Note: la version 4.01 ne se limite évidemment pas à ce que je viens de dire...
Déclaration des balises
Les balises sont nommées et sont déclarées entre les caractères < et >.
Elles fonctionnent par paires: Une balise d'ouverture et une balise de fermeture. La balise fermante est précédée du caractère / .
Par exemple <H1> pour la balise ouvrante et </H1> pour la balise de fermeture.
Les balises HTML ne
sont pas sensibles à la casse.
Il existe des balises
où la balise de fermeture n'existe pas...
Les balises
- La page
- Structure d'une page
- Document Type Definition (DTD) (<!DOCTYPE HTML PUBLIC ...)
- Du HTML (<html>)
- L'entête (<head>)
- Le titre (<titre>)
- Emplacement des ressources comme le CSS (<link>)
- Les scripts (<script>)
- Le corps du document (<body>)
- L'arrière plan (attributs de body)
- Titres (<H1...H6>),
- Paragraphes (<p>),
- Textes preformattés (<pre>)
- Textes simples (Pas de balise !)
- Retour chariot (<>)
- Gras (<b>)
- Italique (<i>)
- Mise en exergue (<em> ou <strong>)
- Exposant (<sup>)
- Indice (<sub>)
- Barrer (<strike>)
- Souligné(<u>)
- Sigles (<abbr ...>) et acronymes (<acronym ...>)
- citations (<cite>) et définitions (<def>)
- Conclusion
- Les caractères spéciaux
- Lien sur une autre page (<a ...>)
- Ancre
- Lien sur une ancre d'une page
- Lien "interne"
- Les listes
- Balises sans balises de fermetures
- Retour chariot <br>
- Ligne de séparation horizontale <hr>
- Les cadres ou frames
- Options de zoom
- Densité d'affichage
- Annexes
Annexes
- Attention, certains opérateurs (SFR, ...) utilisent un cache pour les images afin "d'optimiser les transfert en 3G". Cependant, celles-ci peuvent être très fortement compressées. De plus, votre site n'autorisera pas forcement un lien externe (pour raisons de sécurité) pour construire sa page. Vous optenez dans ce dernier cas à la place de votre image une représentation de feuille déchirée. Pour éviter ce phénomène, une solution consiste à modifier en permanence le nom du fichier image à charger. Une solution étant d'ajouter au nom une déclaration de paramètre comme par exemple "?dummy=valeur aléatoire". Oui, comme lorsque vous adressez une page web en passant des paramètres à celle-ci. Cependant, cela implique une construction dynamique de ce nom (via php par exemple).
- Résoudre le « Le document est expiré » sur formulaire avec PHP.
- L'attribut id dans une balise est utilisé pour les scripts au niveau du client (javascript par exemple)
L'attribut name quant-à lui sera utilisé côté serveur (php par exemple)
Généralement, le développeur, pour s'y retrouver, utilisera le même nom dans id et name...
Des sites qui parlent du HTML
Ces sites sont nombreux, en voici:
http://www.aliasdmc.fr/courshtml/