HTML et CSS

Un article de Wiki URFIST.

Version du 9 mars 2011 à 16:57 par GG (Discuter | Contributions)
(diff) ← Version précédente | voir la version courante (diff) | Version suivante → (diff)



Sommaire

[modifier] HTML

[modifier] 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

[modifier] 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

[modifier] 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. Utilsez par exemple Notepade2 (coloration syntaxique) :

  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

[modifier] 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.

[modifier] 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.

Dès 2000, le xHTML (http://www.w3.org/TR/xhtml1/ ) 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, ...). C'est une reformulation du HTML 4 en 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émantisation du contenu. (cf : http://fr.wikipedia.org/wiki/Hypertext_Markup_Language#2007_.C3.A0_nos_jours )

[modifier] Utilisation de Kompozer (suite de Nvu)

Un éditeur (x)HTML libre et multiOS : http://www.kompozer.net/l10n/ ne pas oublier de télécharger la "francisation" extension "xpi"

Bien que la dernière version stable (0.7.10) date un peu (2007-08-30): ... le projet est relancé : http://www.geckozone.org/forum/viewtopic.php?t=74242

2 ou 3 tuto :


Exercice en cours

[modifier] Quelques liens utiles



[modifier] CSS

[modifier] Principe

Les CSS (Cascading Style Sheets), feuilles de style, permettent de gérer la présentation de vos à pages web. Chaque "balise" (structure) de votre fichier HTML (page web) peut recevoir des attributs qui styliseront votre page web. La plupart des sites web, simples fichiers HTML associés ou plateforme de gestion de contenu, utilisent les CSS. Il est doc devenu indispensable de savoir modifier ou créer les CSS. L'objectif de cette partie est de vous initier aux CSS. Aussi, sur la base des pages web réalisées dans la précédente partie, nous ajouter ou refaire des styles.

[modifier] Interne ou Externe

Les attributs peuvent être dans l'entête du fichier HTML (Interne) ou appelés par le fichier HTML (Externe).

Une CSS interne sera plutôt dédiée à stylage minimaliste et sur une page web

Une Css externe sera plutôt dédiée à un stylage plus important et sur plusieurs page web.

Image:HTMLCSS.jpeg

[modifier] Exercices

  • Feuille de style simple à télécharger (à renommer avec l'extension ".css") : Feuilledetest
  • lien à introduire dans le head HTML
<link rel="stylesheet" href="SD.css" type="text/css" title="default" />
  • Projet sur 1 page avec plusieurs feuilles de styles à télécharger (à renommer avec l'extension ".zip" et à extraire) : Projet
  • faire référence à une feuille de style en ligne / partager la même feuille de style : http://www.unice.fr/urfist/urfistnew/CoursHTML_CSS/SD.css
  • démonstration sur des plateformes de gestion de contenu web :
    • Collection (Tampon) sur [HAL]
    • sur le [wiki-test] de L'urfist (mémo pour GG ; sur pomme K > wiki/skins/monobook/main.css) et (pour l'image de fond headbgcoursHTMLCSS-GG.jpg
    • ...
  • sur les bloc DIV exemple de Projet (à télécharger, à renommer avec l'extension ".zip" et à extraire)
    • <Div> , id, class dans le HTML
    • flaot (left, right, none), position (absolute, relative, fixed, top, ...) ,z-index et padding dans le CSS

[modifier] Quelques liens utiles



[modifier] Javascript

Selon le déroulement su stage

[modifier] Initiation - utilisation de bibliothèques de scripts

Ce chapitre n'a pas la prétention de vous apprendre le javascript, mais de vous servir des bibliothèques de scripts sur le web.


.... une recherche sur votre moteur favori vous donnera toutes ces adresses et plus encore.

Pour cela il faudra repérer le code du scripts, l'insérer au bon endroit et modifier les variables pour les appliquer à votre travail.

[modifier] Exemple d'un "menu directionnel" :

Le script dans le <head>

<script language="javascript">
 
 <!--
 function chgpage(formulaire)
 {
 if (formulaire.listepages.selectedIndex != 0)
 {
 location.href = formulaire.listepages.options[formulaire.listepages.selectedIndex].value;
 }
 }
 //-->
</script>

Le script dans <body> :

<select name="listepages" size="1" onchange="chgpage(this.form)">
<option selected="selected">Choix de la page </option>
<option value="pageA.html">Vers ma page A </option>
<option value="pageB.html">Vers ma page B </option>
<option value="pageC.html">Vers ma page C </option>
</select>
</form>