HTML et CSS

Un article de Wiki URFIST.

(Différences entre les versions)
Version du 4 mai 2009 à 11:27 (modifier)
Gallezot (Discuter | Contributions)
(versions de HTML)
← Différence précédente
Version du 4 mai 2009 à 11:27 (modifier) (défaire)
Gallezot (Discuter | Contributions)
m (versions de HTML)
Différence suivante →
Ligne 55 : Ligne 55 :
A chaque fois qu'un utilisateur demande d'accèder à une page, une requête HTTP est envoyée au serveur, qui renvoie le document HTML correspondant. La page HTML est ensuite décodée et affichée par le navigateur de l'utilisateur. A chaque fois qu'un utilisateur demande d'accèder à une page, une requête HTTP est envoyée au serveur, qui renvoie le document HTML correspondant. La page HTML est ensuite décodée et affichée par le navigateur de l'utilisateur.
-== versions de HTML ==+== Versions de HTML ==
Comme tout standard le HTML évolue. Observera à ce propos le site du W3C : http://www.w3.org/html/ Comme tout standard le HTML évolue. Observera à ce propos le site du W3C : http://www.w3.org/html/

Version du 4 mai 2009 à 11:27

En cours de réalisation



Sommaire

Origine du HTML

Le langage HTML (HyperText Markup Language) tire son origine du SGML (Standard Generalized Markup Language) développé par Charles Golfarb et du concept de l'Hypertexte créé par Ted Nelson. C'est Tim Berners-lee, en mars 89, qui défini le principe du HTML

Principe

Comme le SGML, le HTML différencie au sein d'un document, les données de la structure et du format. Il donne des règles de balisages ("marquage" de l'information avec des balises) qui décrivent une structure arborescente ou chaque noeud est identifié par une étiquette. Ces étiquettes sont reconnues et interprétées par le navigateur.

Exemple : <title> titre de la page </title>

A l'instar du concept d'hypertexte, le HTML offre la possibilité de créer des contenus de documents ou des ensembles de documents dont la lecture n'est pas forcément séquentielle : une zone du document (texte ou image) est "cliquable" et permet l'accès à une autre zone du document ou à un autre document.

Cet ligne est une zone cliquable qui permet d'accéder à la fin de cette partie sur le HTML

Un document HTML n'est rien de plus qu'un fichier texte. Il peut donc être reconnu sans problème de conversion d'un environnement à un autre. Une page HTML peut donc être lue et interprétée ( pas forcément de façon identique) par n'importe quel navigateur sur n'importe quelle plate-forme.

Ci-dessous est présenté la structure basique d'une page HTML

<HTML> première ligne du document
<head> ouverture de la zone d'entête
<title> titre de la page </title>
</head> fermeture de la zone d'entête.
<body> ouverture du corps du document

Mettre le texte et les images ici, les tableau, etc.... tout ce qui devra être visible pour l'usager

</body> fin du corps du document
</HTML> fin du document HTML

Visualiser le HTML

Comme nous l'avons déjà évoqué, une page HTML, n'est rien de plus qu'un document enregistré au format texte, dont le contenu est structuré par des balises pour être interprété par un navigateur.

Il y a donc deux façons de visualiser une page HTML :

  • 1 - avec un traitement de texte

Cette méthode est à utiliser dans un but didactique. Elle permet de visualiser les balises et ainsi de repérer, percevoir et apprendre la construction, l'imbrication des étiquettes HTML. Cela nous servira pour le travail sur les CSS

  exemple :
  dans le menu Afficher (voir) du navigateur --> Source de la page (voir la source du document)
  avec un traitement de texte --> Ouvrir le document nom_du_fichier.html
  • 2 - avec un navigateur

cette méthode permet d'interpréter les balises d'une page HTML sans les visualiser. Pour qu'une page HTML soit reconnue par un navigateur , il est nécessaire d'attribuer à son nom une extension :

  .html ou .htm
  exemple : mapage.html ou mapage.htm

Rapport entre WEB et HTML

Le Web se compose d'un maillage d'ordinateurs hébergeant des sites (sur des serveurs HTTP), auxquels on peut accéder par le mode hypertexte. En effet, chaque site se compose de fichiers au format HTML (dites "pages Web", ou "pages HTML") pouvant comporter un ou plusieurs liens hypertextes. Ces liens (en général des mots soulignés) permettent d'accéder d'un simple clic à d'autres pages, sur le même site ou n'importe où ailleurs sur le Web. Le Web est largement multimedia, c'est-à-dire qu'une page peut afficher indistinctement des images, de la vidéo, du son, etc. Tout élément du Web (page, image...) est référencé de façon unique par son adresse (ou URL), de la forme : http://www.site.dom/repertoire/page.html Si l'on connait son URL et si l'accès n'en est pas restreint, il est donc possible d'accèder directement à toute information présente sur le Web. Le Web utilise le protocole HTTP (HyperText Transfer Protocol). Les demandes de chaque utilisateur sont traitées par le logiciel serveur installé sur la machine hébergeant le site. A chaque fois qu'un utilisateur demande d'accèder à une page, une requête HTTP est envoyée au serveur, qui renvoie le document HTML correspondant. La page HTML est ensuite décodée et affichée par le navigateur de l'utilisateur.

Versions de HTML

Comme tout standard le HTML évolue. Observera à ce propos le site du W3C : http://www.w3.org/html/

La dernière de version stable de HTML est le 4.01.

Dès 2000, le xHTML est né. X pour eXtensible, comme pour le XML sur lequel il est basé. il propose ainsi de nouvelles fonctionalités (synthèse vocale, appareil mobile, lecteur XML, ...).

La DOCTYPE : sert à annoncer au navigateur dans version de (x)HTML est écrite la page. Le "transitionnal" indique un mélange de version.

Aujourd'hui, en réaction au xHTML 2, le HTML 5 est en developpement : http://dev.w3.org/html5/spec/Overview.html il devrait être un compromis entre le besoin de filiation directe avec le HTML préexistant et l'évolution vers une sémentisation du contenu. (cf : http://fr.wikipedia.org/wiki/Hypertext_Markup_Language#2007_.C3.A0_nos_jours )

Utilisation de Kompozer (suite de Nvu)

Un éditeur (x)HTML libre et multiOS : http://www.nvu.com/index.php version française : http://frenchmozilla.sourceforge.net/nvu/ Tutoriel sur Framasoft : http://www.framasoft.net/article2656.html Exercice en cours

Quelques liens utiles

Markup Validation Service : http://validator.w3.org/ Outils pour le Web Accessibility Initiative (WAI) : http://webxact.watchfire.com/ xHTML au W3C : http://www.la-grange.net/w3c/xhtml11/ Couleurs hexadécimal : webcolours Le Dublin core en français : http://www-rocq.inria.fr/%7Evercoust/METADATA/DC-fr.1.1.html Gimp : http://www.gimp-fr.org/news.php Inkscape : http://www.inkscape.org/