Table des matières - Page personnelle de Mehdi Khaneboubi

UE 3EC 4 Master EEME
IUFM de l'université de Cergy-Pontoise
Introduction aux HTML/CSS
Mehdi Khaneboubi
Septembre 2012
Les applications conseillées sont le plus souvent issues du site http://www.framasoft.net qui est un
annuaire de logiciel libre gratuit pour les systèmes d'exploitation Windows, MacOs et Linux.
Table des matières
1 Principes élémentaires de fonctionnement du web.......................................................................... 2
1.1 Serveurs, clients, protocoles..................................................................................................... 2
1.2 Le lien hypertexte..................................................................................................................... 2
1.3 Les adresses web.......................................................................................................................2
Les noms de domaines................................................................................................................ 3
Adresse web et pérennité de l'information.................................................................................. 3
1.4 Les navigateurs web..................................................................................................................3
Afficher un document structuré.................................................................................................. 3
Autres fonctionnalités................................................................................................................. 4
Les navigateurs web les plus utilisés.......................................................................................... 4
2 Le HTML..........................................................................................................................................5
2.1 Les balises.................................................................................................................................5
2.2 Activité .....................................................................................................................................6
Première partie............................................................................................................................ 6
Deuxième partie.......................................................................................................................... 8
2.3 Balise et attributs.................................................................................................................... 10
2.4 la balise méta.......................................................................................................................... 10
2.5 Les différents types de balises................................................................................................ 11
Les balises de niveau texte (inline)..................................................................................... 11
Les balises de niveau bloc (block) : ................................................................................... 11
2.6 Structure élémentaire.............................................................................................................. 12
2.7 Les feuilles de styles CSS....................................................................................................... 12
2.8 Pour conclure à propos du HTML /CSS................................................................................. 14
2.9 Faire produire des pages Web à un logiciel............................................................................ 14
2.10 Mise en ligne.........................................................................................................................16
2.11 Les limites du HTML............................................................................................................17
Mehdi Khaneboubi 2010
1
1 Principes élémentaires de fonctionnement du web
Le Web est fréquemment confondu avec Internet. Le Web n’est qu’une des applications d’Internet.
Le courrier électronique, la messagerie instantanée, le chat, les réseaux de peer to peer, les jeux en
réseaux constituent d'autres applications d'internet et font appel à d'autres protocoles même s’il est
souvent possible d'y accéder au travers du web.
Le langage fondamental du web se nomme Hypertexte Markup Language (HTML). Il permet de
produire l'essence du web : diffuser des documents organisés en mettant en évidence les éléments
permettant d'accéder à d'autres documents.
Le World Wide Web est une création de Tim Berners-Lee et Robert Cailliau qui à la fin des années
80 ont défini les caractéristiques techniques de l'hypertexte et du protocole de communication
HTTP.
1.1 Serveurs, clients, protocoles
Surfer sur le web c'est utiliser un réseau informatique. Un réseau informatique est un ensemble
d'équipements reliés entre eux permettant d'échanger des données.
Un réseau se compose d'une part d'applications et de machines dites serveurs et d'autre part
d'applications et de machines dites clientes. Les informations sont échangées sous forme de
données, par le biais d'un protocole de communication. Un protocole de communication est une
description formelle des formats et des règles d'échanges de données lors d'une connexion, c'est en
quelque sorte la grammaire de la communication.
Le plus souvent, on surfe le web avec un navigateur (browser en anglais), c'est l'application cliente.
On se connecte à des sites qui sont hébergés par des serveurs (un certain type d'ordinateur).
La connexion à un serveur web s'effectue par le biais du protocole HyperText Transfert Protocole
(HTTP) c'est pourquoi l'adresse d'un site web commence par « http:// ».
1.2 Le lien hypertexte
Le lien hypertexte ou hyperlien constitue l'innovation la plus importante du web. Elle est tellement
banalisée, que l'on n'y fait presque plus attention. Un lien hypertexte est un élément d'une page web
permettant d'accéder immédiatement à une pages tiers.
Voici un lien hypertexte vers un article de l'encyclopédie libre et gratuite Wikipédia présentant en
anglais un historique du concept d'hypertexte.
1.3 Les adresses web
Les adresses web ou URL (Uniform Resource Locator) constituent ce qui permet d'accéder à une
page web. Du point de vue technique, une adresse web commence par un numéro que l'on appelle
adresse IP. Mais par souci de commodité il est possible d'utiliser des adresses web composées par
des mots. Apprendre à lire une adresse web est très utile. En effet, une adresse web fournit des
informations sur la source d'un document, elle permet de caractériser l'origine d'un document.
Exemple
http://exemple.fr/home/article.html
http:// : indique le protocole de communication du web
Mehdi Khaneboubi 2010
2
exemple.fr : indique le nom de domaine qui est composé d'une racine « exemple » et d'une
extension « .fr »
home : est le nom du répertoire public sur le serveur
article.html : est le nom du document que l'on cherche à consulter.
Les noms de domaines
Les noms de domaines constituent l'équivalent d'un éditeur dans le domaine du livre, ils indiquent
l'organisme qui publie l'information. Une institution ou une entreprise commerciale loue un nom de
domaine lié à sa marque ou à son nom. Par exemple, la municipalité de la ville de Paris loue le nom
de domaine paris.fr. L'entreprise Cocacola loue les noms de domaine : cocacola.com, cocacola.fr,
cocacola.es, etc.
On appelle un nom de domaine de premiers niveaux, les noms de domaines : free.fr, google.com...
Ces noms de domaines doivent être loués auprès d'une société ou d'une association appelée registrar
gérant leur réservation auprès d'une association gérant internationalement les noms de domaines de
premiers niveaux. On appelle noms de domaines de deuxièmes niveaux, les noms de domaines
composés avec des noms de domaines de premiers niveaux : mail.google.com, pageperso.free.fr...
qui sont gérés par les ayant droits du nom de domaines de premiers niveaux.
Il existe deux types d'extensions. Les extensions nationales comme ".fr" pour la France ou ".es"
pour l'Espagne et les extensions génériques ".com" pour les activités commerciales, ".org" pour les
organisations à but non lucratif, ".info" pour les services d'informations, ".edu" pour les organismes
d'enseignements...
On peut identifier l'organisme ou la personne qui a déposé un nom de domaine de premier niveau
auprès de divers sites comme WHOIS. À titre d'exemple, vous pouvez constater que le nom de
domaine u-cergy.fr qui est le nom ce domaine de l'université de Cergy Pontoise, a été déposé le
premier janvier 1995 auprès de RENATER : http://www.whois.net/whois/u-cergy.fr, ainsi que les
adresses et téléphone de ceux qui sont responsables du site.
Adresse web et pérennité de l'information
Une adresse web n'est pas un élément stable dans le temps. Ainsi les sites et les noms de domaine
sont modifiés au grès de mises à jour, des évolutions technologiques, etc. Même s’il est possible de
retrouver un document auprès de services qui « sauvegardent » une partie du web, une adresse web
reste quelque chose d'éphémère. Il est possible de prendre des mesures techniques particulières pour
permettre à un site de garantir la pérennité d'une adresse, on parlera alors de liens permanents.
1.4 Les navigateurs web
Afficher un document structuré
Tous les navigateurs web remplissent au moins une fonction élémentaire : afficher un texte de façon
structurée. Autrement dit, un navigateur a pour rôle premier de transformer un programme en un
document mis en forme pour une lecture humaine. Lire une page web par le biais d'un navigateur,
c'est effectuer une requête à un serveur qui renvoie à notre navigateur des données qu'il va afficher
de façon organisée et produire un document structuré. Les données se trouvent en ligne dans un
répertoire public accessible par tous les navigateurs.
C'est pour cette raison que les sites web sont affichables par toutes les machines équipées d'un
Mehdi Khaneboubi 2010
3
navigateur web, quel que soit le matériel ou le système d'exploitation qui les équipes. Un des
langages qui permet à un navigateur d'afficher une information organisée est le langage HTML.
Nous verrons dans la suite de ce cours comment il s'utilise.
Autres fonctionnalités
Si dans les premiers instants du web, les navigateurs avaient pour unique fonction la mise en forme
du texte, d'autres fonctionnalités sont aujourd'hui nécessaires pour accéder aux contenus de la
plupart des sites. Il est important de mentionner certaines fonctionnalités que les navigateurs
remplissent aujourd'hui pour accéder aux contenus du web qui ne sont plus exclusivement formatés
en HTML.
Le langage HTML tel qu'il a été conçu jusqu'en 2007 (version 4.0 et XHTML) ne permet pas de
diffuser des sons, des vidéos ou des animations avec fiabilité. Ce sera probablement possible avec la
version 5, mais pour l'heure il est nécessaire d'avoir recours à d'autres types de technologies. Ainsi
pour accéder à la plateforme Acolad il est nécessaire d'avoir installé un module complémentaire
(plug-in) java, pour lire des vidéos sur YouTube il est nécessaire d'avoir installé le plug-in flash.
En outre, les navigateurs permettent de sauvegarder des marques pages, d'enregistrer des mots de
passe, d'avoir accès à un moteur de recherche, de ne pas afficher la publicité, de synchroniser des
marques pages entre différents ordinateurs, de recevoir des informations par flux RSS, ou de faire
fonctionner d'autres logiciels comme Acrobat Reader...
Les navigateurs web les plus utilisés
Il existe un grand nombre de navigateurs web. Vous pouvez consultez ici une frise présentant les
navigateurs les plus importants. Aujourd'hui, les navigateurs web les plus utilisés sont :
Internet Explorer, fourni par défaut avec le système d'exploitation Windows
Mozilla Firefox, fourni par défaut avec le système d'exploitation Ubuntu
Safari, fourni par défaut avec le système d'exploitation MacOs.
Mehdi Khaneboubi 2010
4
Les éditeurs de ces logiciels diffusent des versions de leurs navigateurs pour Windows et pour
MacOs gratuitement. Il est donc possible d'installer Firefox sur Windows ou sur MacOs (ce que
nous vous conseillons de faire en consultant le site francophone de Firefox).
2 Le HTML
Le HTML est la technologie élémentaire sur laquelle s'est construit et se construit encore le web. Le
HTML (HyperText Markup Language) est un langage à balises qui permet de concevoir des pages
web dites « statiques ». On dit qu'un site web est statique lorsqu’un serveur web envoie « tel quel »
des données contenues sur son disque dur. Une page est dite dynamique lorsqu’un serveur web
exécute un ou plusieurs programmes qui vont générer la page web avant de la transmettre. Ces
programmes vont dynamiquement construire la page en fonction des informations communiquées
par le navigateur et par le serveur. Par exemple, l'affichage d'une page ne sera pas la même pour un
administrateur que pour un visiteur ordinaire.
Il y a maintenant assez peu de sites qui sont en HTML « pur ». Le plus souvent, d'autres langages
comme le java, le flash, le PHP ou l'asp sont utilisés pour générer des pages web.
Il est possible de lire le code HTML de la plupart des sites web. Dans un navigateur, il suffit de faire
un clic droit sur la page du site et de choisir « afficher le code source de la page ».
Vous pouvez faire un essai avec le site de l'université de Cergy Pontoise : http://www.u-cergy.fr.
Vous lirez quelque chose qui commence par :
«
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML dir="ltr" lang="fr">
<head>
<title>Bienvenue sur Site Internet de l&#8217;université de Cergy
Pontoise</title>
... »
Nous verrons dans la suite de ce cours ce que signifie ce texte.
2.1 Les balises
Le principe du langage HTML repose sur la mise en forme d'un texte brut grâce à un balisage. Un
texte brut c'est un texte sans mise en forme d'aucune sorte. Une balise (mark up) est un élément qui
indique quel rôle « joue » un fragment de texte dans la structure générale du document. Cela peut
être un titre, un lien hypertexte, une métadonnée, un élément à souligner, à afficher en italique, en
gras...
Structurer un document permet à une application de reconnaître si telle ou telle partie du texte est
un titre, un paragraphe, un élément de bibliographie, une note de bas de page, une table des
matières, une liste, etc. On peut de ce fait, appliquer des traitements automatiques comme produire
une table des matières automatique, une bibliographie... Cela va aussi permettre de mettre en forme
le document de façon automatisée et d'afficher le texte dans un navigateur avec une présentation
adaptée, et ce, quelle que soit la machine qui cherchera à le lire.
Mehdi Khaneboubi 2010
5
Exemple
-les balises <u> </u> vont permettre de souligner le texte qui se trouvera entre elles :
<u> texte à souligner </u>
-les balises <b></b> vont mettre en gras :
<b> texte en gras </b>
-les balises <title> </title> vont indiquer au navigateur le titre de la page web :
<title> bienvenue sur ma page web </title>
Le principe élémentaire du HTML est donc de mettre entre balises un texte brut qui sera affiché en
fonction des balises utilisées.
Il existe un grand nombre de balises HTML. Dans l'activité qui suit, nous allons voir les plus
importantes.
2.2 Activité
Voyons comment créer une page HTML. Il n'est pas nécessaire de disposer d'un logiciel particulier,
mais sous Windows il faut avoir décoché l'option « Masquer les extensions des fichiers dont le type
est connu ». Pour effectuer cette manipulation suivez ce très court tutoriel ou celui-ci prenez contact
avec un tuteur en cas de soucis.
Première partie
1) Ouvrir un éditeur de texte.
Dans Windows le Bloc note (ou Notepad) : démarrer → programmes → accessoires → Bloc Note
Dans Ubuntu Gedit : applications → accessoires → éditeur de texte Gedit
Dans MacOs : applications → Textedit (nb : si vous utilisez MacOs, nous vous conseillons d'utiliser
le logiciel Smultron)
Mehdi Khaneboubi 2010
6
2) Écrire dans votre éditeur de texte :
3) Sauvegarder le fichier que vous venez de créer :
Fichier → enregistrer sous. Placer votre document sur le bureau après lui avoir donné un nom
simple comme (ma_page).
4) Fermez maintenant votre éditeur de texte et rendez-vous sur le bureau.
5) Faites un clic droit sur le fichier que vous venez de créer et choisissez « renommer ».
6) Remplacez la fin du fichier « .txt » par « .html » puis tapez la touche entrer. Sous Windows vous
devez confirmer que vous voulez changer l'extension de fichier.
7) Ouvrez maintenant le fichier que vous venez de créer avec votre navigateur :
clic droit sur le fichier que vous venez de créer → « ouvrir avec » → Firefox (par exemple)
Mehdi Khaneboubi 2010
7
Vous devez maintenant voir ceci :
Deuxième partie
Remarquez que seuls les titres sont placés à la ligne automatiquement. Pour aller à la ligne, il faut
utiliser la balise <br>.
1) Ne fermez pas votre navigateur. Faites un clic droit sur le fichier HTML et choisissez
« ouvrir avec » → Bloc note (ou éditeur de texte Gedit sous Ubuntu, ou Smultron sous MacOs).
2) Modifiez le code en ajoutant les balises <br> comme dans l'exemple suivant.
<HTML>
<title> premier document HTML <title>
<u> un texte avec soulignement </u>
<br>
un <i>mot</i> en italique
<br>
<br>
<h1> titre de niveau 1 </h1>
<h2> titre de niveau 2 </h2>
<h3> titre de niveau 3 </h3>
</HTML>
3) Sauvegardez (fichier → enregistrer ou bien « control+s ») et retournez dans votre navigateur
sans fermer votre éditeur de texte.
Mehdi Khaneboubi 2010
8
4) Pour voir les modifications que vous venez d'apporter à votre document il n'est pas nécessaire de
réouvrir votre navigateur il suffit de rafraichir la page (ou de l'actualiser) en appuyant sur la touche
« F5 » depuis votre navigateur.
Vous devez constater que le texte situé après la balise <br> est à la ligne :
Remarque : Il est possible de faciliter la lisibilité d'un code HTML. Sous Ubuntu, dans l'éditeur de
texte Gedit en activant la coloration syntaxique du texte, allez dans le menu affichage → mode de
coloration → balisage → HTML. C'est aussi possible avec Windows après avoir installé Notepad 2.
Avec MacOs le programme Smultron offre aussi cette fonctionnalité.
5) Afficher une image
Pour afficher une image, il faut tout d'abord l'avoir copiée au même endroit que votre fichier
HTML. Si vous avez suivi ce cours à la lettre votre fichier HTML doit se trouver sur votre bureau,
copiez donc l'image sur votre bureau.
Ensuite, ajoutez dans votre code la balise : <image src="nomdemonimage.jpg">.
Si vous enregistrez votre document depuis votre éditeur de texte et que vous actualisez votre page
web dans votre navigateur (en appuyant sur F5) vous devriez voir apparaître votre image.
Vous pouvez aussi indiquer directement l'adresse web d'une image. Pour afficher la photographie
d'une maison bretonne qui figure sur un article de Wikipédia regardez comment cette balise est
construite puis insérez là dans votre code HTML :
<image
src="http://upload.wikimedia.org/wikipedia/commons/b/b7/Bretagne_Finistere_Bauer
nhausaufCrozon_19064.jpg"> Remarquez qu'il s'agit ici de l'adresse web complète d'une image.
Mehdi Khaneboubi 2010
9
2.3 Balise et attributs
On a vu qu'une balise permettait au navigateur d'identifier ce qu'il devait afficher et comment
l'afficher.
Par exemple pour afficher une image on utilise la balise image :
<image src="nomdevotreimage.jpg">
Il est nécessaire de définir quelle image le navigateur va afficher, c'est la fonction remplie par
l'élément "src" (comme source) qui se trouve dans la balise <image>. "SRC" constitue ce que l'on
appelle un attribut. C'est un élément qui complète la balise. Dans ce cas, on dit que la balise
<image> a pour attribut "src".
De même pour créer un lien hypertexte on utilise la balise <a> :
<a href="http://www.google.fr/"> voici un lien vers un moteur de recherche
</a>
Remarquez qu'il est nécessaire de définir vers quelle adresse web doit pointer le texte encadré par la
balise, c'est la fonction de href. La balise <a> à pour attribut href.
Une balise peut avoir plusieurs attributs. Par exemple, on peut préciser à la balise <image> les
attributs suivants :
src="nomdufichierimage" indique l'emplacement et le nom du fichier image.
align="top|middle|bottom|left|right" indique où afficher l'image : haut ou au milieu ou en
bas ou à gauche ou à droite.
width= indique la largeur à afficher en pixels
height= indique la hauteur à afficher en pixels.
alt="texte" affiche « texte » si l'image n'est pas affichable ou lorsque la souris reste pointée
dessus.
Exemple
Pour afficher une image centrée large de 50 pixels et haute de 70, la balise se composera ainsi :
<image src="nomdufichier.jpg" align="middle" width="50" height="70">
Certains attributs sont obligatoires comme src, d'autres sont optionnels comme align ou width.
2.4 la balise méta
Les métadonnées d'une page web sont des informations qui documentent la page web. Les
métadonnées d'une page web sont élément très important et doivent être renseignées. On les fait
figurer dans l'entête de la page web entre les balises <head> et </head>.
On a vu qu'il était possible d'afficher une page web sans métadonnées pourtant il est très fortement
conseillé de documenter les métadonnées d'un document HTML notamment pour que les robots des
moteurs de recherche la référencent lorsqu'elle sera mise en ligne. C'est le rôle de la balise <meta>.
Cette balise à différents attributs. Voici les éléments que nous vous conseillons de faire figurer
Mehdi Khaneboubi 2010
10
systématiquement avec cette balise :
Langue de la page en français : <meta name="Content-language" content="fr"> « en » si la
page est en anglais, « es » pour l'espagnol...
auteur : <meta name="author" content="Prénom Nom ou Institution"> ,
date de création de la page Web : <meta name="created" content="2010-10-12"> pour le
12 octobre 2010,
date de mise à jour : <meta name="changed" content="2010-10-13"> ,
éditeur : <meta name="publisher" content="Institution ou Association"> ,
mots clés : <meta name="keywords" content="mots clés"> ,
résumé : <meta name="description" content="résumé"> ,
Format de la page et encodage de la page :
<meta HTTP-equiv="Content-Type" content="text/HTML; charset=UTF-8"> dans ce
cas, c'est la table des caractères UTF-8 qui est choisit on peut aussi choisir iso-8859-1 pour la
table des caractères française spécifique. Option à essayer si votre page affiche des caractères
bizarres à la place des lettres accentuées.
Indications aux moteurs de recherches : <meta name="robots" content="index, follow">
indiquera aux robots des moteurs de recherche d'indexer votre page et toute celle de votre site.
Si vous changez les valeurs des attributs ainsi :
<meta name="robots" content="noindex, nofollow"> les robots des moteurs de recherche
n'indexeront ni votre page d'accueil ni les pages vers lesquels elle pointe.
De plus, il est important de faire figurer dans l'entête de la page web un titre avec la balise :
<title> </title>
2.5 Les différents types de balises
Il existe deux grandes catégories de balises : les balises de niveaux texte et les balises de niveau
bloc.
Les balises de niveau texte (inline)
Les balises de niveau texte sont les micros structures qui affichent de petits morceaux de textes. Se
sont les balises que l'on utilise à l'intérieur d'un paragraphe : <i>, <b>, <image>, <a>, etc. Ces
éléments sont affichés sur une même ligne du bloc qui les contient. Autrement dit, le texte qui se
trouve à l'intérieur d'une balise de niveau texte s'écrit à la suite du texte précédent, sur la même
ligne.
Les balises de niveau bloc (block) :
Ce sont des structures plus grandes qui contiennent d'autres structures par exemple : les titres (<h1>,
<h2>, <h3>...), paragraphe (<p> et </p>) ou les balises <HTML>, <head>, <body> … Une balise de
Mehdi Khaneboubi 2010
11
type "block" crée automatiquement un retour à la ligne avant et après le bloc. Pour plus
d'informations, consultez ce document.
2.6 Structure élémentaire
Il est important de respecter une structure de base pour que tout type de navigateur affiche les pages
sans problèmes particuliers. Cette normalisation n'est pas obligatoire, mais elle permet un degré de
structuration qui rendra l'affichage de votre page robuste quelque soit le matériel utilisé.
Voici la structure minimale à respecter :
<HTML>
<head>
Ici, indiquer les informations qui concernent cette page avec la balise <title> et les balises
<meta>
</head>
<body>
Ici le texte de la page en utilisant les balises de titres ( <h1>, <h2>, etc.) et la balise de paragraphe
(<p> et </p>)
</body>
</HTML>
Il s'agit donc de créer deux blocs fondamentaux : l'en-tête de la page et le corps de la page.
Dans l'en-tête, identifier par les balises <head> et </head> doit figurer les balises <meta>. Dans le
corps de la page, identifiez par les balises <body> et </body> figure le texte de la page. Le
navigateur n'affichera que le corps de la page, l'en-tête n'est pas affiché. Si vous retournez voir le
code source de la page d'accueil du site de l'université de Cergy Pontoise vous reconnaitrez cette
structure.
Nous venons de présenter le fonctionnement élémentaire du HTML. Si vous désirez aller plus loin
vous trouverez sur ce site la liste des balises en Xhtml : http://www.siteduzero.com/tutoriel-313661-liste-des-balises-xhtml.html les plus utilisées. Voir aussi : http://www.unpeud.info/xhtml.
Voyons maintenant comment gérer une mise en forme rigoureuse et harmonieuse.
2.7 Les feuilles de styles CSS
Une feuille de style CSS est un fragment de code particulier qui indique au navigateur quelle
présentation appliquer au texte. Autrement dit, une feuille de style va nous permettre d'afficher un
texte entre balises selon une taille, une couleur et un espacement que l'on aura défini à l'avance.
Les feuilles de styles CSS (Cascading Style Sheets) remplissent les mêmes fonctions que les
feuilles de styles d'un traitement de texte : définir une fois pour toutes les caractéristiques de
présentation des titres, des paragraphes, des citations, etc. Il s'agit donc ici d'avoir un moyen pour
différencier le texte brut de sa mise en forme. Ce principe, séparer le contenu de la forme est un
principe extrêmement important sur le web, nous verrons plus loin qu'il permet de générer diverses
fonctionnalités.
Exemple
Mehdi Khaneboubi 2010
12
Les balises de titres <h1>, <h2>, <h3> affichent par défaut un texte brut « titre de niveau 1 », « titre
de niveau 2 » et « titre de niveau 3 » comme représenté sur l'illustration suivante :
Définir une feuille de style va nous permettre de définir l'affichage des titres de niveau 1 en rouge
d'une taille de 1 centimètre. Tous les titres de niveau 2 en bleu d'un demi-centimètre, etc. comme
représenté sur l'illustration suivante :
Pour que le navigateur « reconnaisse » la feuille de style, il existe plusieurs solutions. Une façon de
procéder est d'ajouter ces informations dans l'entête de la page web entre les balises :
<style type="text/css"> et </style>.
Ensuite, il faut indiquer le nom de la balise concernée et définir son affichage. Dans notre exemple
il s'agit de la balise de titre 1 : h1 puis de la balise h2 et enfin de la balise h3 dont on veut modifier
la couleur et la taille. Voici le fragment de code qui va définir cet affichage essayer le dans votre
propre page web :
<style type="text/css">
h1 {color: red; font-size: 1cm;}
h2 {color: blue; font-size: 0.5cm;}
h3 {color: green; font-size: 0.25cm;}
</style>
Mehdi Khaneboubi 2010
13
Ce code CSS va donc indiquer au navigateur que la balise h1 doit être afficher en couleur ( color)
rouge (red) de taille (font-size) 1 centimètre.
Vous remarquerez que la syntaxe n'est pas la même qu'en HTML. Les balises sont précisées sans
« < » « > », la définition des tailles et des couleurs se fait entre accolades séparées par des « ; ».
Remarque
Plutôt que de définir une taille de caractère en cm, il est prudent de définir une taille relative en
utilisant des pourcentages. Cela permettra un affichage lisible sur tous types de navigateur. Le code
suivant sera donc plus « robuste » que celui de l'exemple précédent :
<style type="text/css">
h1 {color: red; font-size: 200%;}
h2 {color: blue; font-size: 150%;}
h3 {color: green; font-size: 125%;}
</style>
2.8 Pour conclure à propos du HTML /CSS
Vous trouverez ici un exemple de page HTML dans lequel figure une feuille de style et l'ensemble
de ce que nous avons vu dans cette partie. Surtout aller consulter la source de cette page et n'hésitez
pas à en faire des copier/coller. Ce qui figure entre les balises <!-- et --> sont des commentaires
que le navigateur ne prendra pas en compte. Même chose pour le signe /* dans le CSS.
Pour plus d'information sur les feuilles des styles reportez-vous à ce tutoriel extrêmement bien
réalisé http://www.siteduzero.com/tutoriel-3-13517-mettre-en-place-le-css.html ou bien à celui-ci
http://www.unpeud.info/seconde-css
Enfin, à titre d'illustration vous pouvez aller naviguer sur le site : http://www.csszengarden.com/
et constater que le code HTML est le même sur chacune de ses pages et que seule sa feuille de style
CSS change.
2.9 Faire produire des pages Web à un logiciel
Produire un document long en HTML « à la main », c'est-à-dire avec un éditeur de texte (comme
Bloc note ou Gedit), représente un travail aride. Pour gagner du temps, il est possible de faire appel
à des logiciels dits WYSIWYG : What You See Is What You Get.
Les WYSIWIG les plus connus sont les traitements de texte comme Word ou Open Office Writer. En
effet, il est possible d'enregistrer un document au format .html plutôt que .doc ou .odt avec Word ou
Writer.
Voici comment procéder avec Open Office Writer. Après avoir rédiger un texte et fait « fichier » →
« enregistrer sous » choisissez le format HTML :
1) Ouvrir la fenêtre qui permet de choisir le type de fichier :
Mehdi Khaneboubi 2010
14
2) Choisir le format de fichier HTML :
3) Donner un nom au fichier et cliquer sur « enregistrer ».
Mehdi Khaneboubi 2010
15
Je vous déconseille fortement d'utiliser Word dans cette optique, car le code HTML qu'il génère est
particulièrement confus. Open Office Writer est convenable, mais il existe aussi des logiciels
spécialisés. Celui issu de la suite Microsoft Office se nomme FrontPage, son utilisation est
déconseillée, car le code généré est fort compliqué. L'application professionnelle la plus utilisée se
nomme Dreamweaver, mais elle est fort chère. Le logiciel libre et gratuit Kompozer
http://www.kompozer.net/ est un outil pratique qui produit un code propre. Néanmoins, le traitement
de texte Writer d'Open Office génère un code propre qui conviendra tout autant pour des documents
cours.
2.10
Mise en ligne
Avertissement important
La création d'un site web revient à acquérir un espace d'expression public consultable
dans le monde entier. Il est essentiel de respecter la législation du pays dans lequel on se
trouve ainsi que les règles de bienséances partagées par toute l'humanité. Diffamations,
insultes, propos xénophobes, propos sexistes, non-respect du droit d'auteur,
pornographie, apologie de substances psychotropes, apologie de la violence, etc.
représentent des éléments de contenus punis par la loi dans la plupart des pays du monde
(pour ne pas dire tous).
De plus, dans un grand nombre de pays la liberté d'expression et la confidentialité des
données personnelles ne constituent pas, en pratique, des droits garantis par des
institutions efficaces. L'expression d'opinions portant sur les libertés individuelles,
politiques ou religieuses est souvent source de problèmes dans ces pays. Sur Internet, il
n'est pas possible de s'exprimer anonymement et un certain nombre d'administrations ou
d'entreprises disposent de systèmes de surveillance efficaces.
Enfin, l'auteur d'un site web est responsable devant la loi de ce qui figure sur son site. Il
est donc important de protéger techniquement son site (notamment en choisissant des
mots de passe robustes1) de façon à ne pas se faire pirater et être tenu pour responsable
d'infractions commises par d'autres. Cet avertissement deviendra d'autant plus important
que l'on avance dans ce cours et que l'on découvre des technologies permettant de faire
participer des inconnus à l'élaboration d'un site web (commentaires de blog, wiki...). Il
convient donc d'être prudent.
Une fois que l'on a créé une page web comment la mettre en ligne ? Il est nécessaire de disposer de
trois éléments :
- un espace sur un serveur c'est-à-dire le répertoire public où sera située la page HTML,
- une adresse web qui est souvent une adresse de deuxième niveau fourni avec le répertoire public,
- un client FTP c'est-à-dire une application permettant de téléverser la page web depuis son
ordinateur vers le serveur.
Un ordinateur ordinaire jouerait très bien le rôle de serveur. Néanmoins, pour plus de fiabilité et de
sécurité il est fortement recommandé d'avoir recours à un service spécialisé. En France, la plupart
1 Un mot de passe robuste commence et fini par un chiffre, mélange minuscules et majuscules et ne figure pas dans le
dictionnaire c'est-à-dire qu'il n'a de sens que pour celui qui le choisit pour plus d'information consulter notamment
http://doc.ubuntu-fr.org/securite#choisir_de_bons_mots_de_passe
Mehdi Khaneboubi 2010
16
des fournisseurs d'accès à internet proposent gratuitement des espaces web et fournissent un nom de
domaine de deuxième niveau. Dans un contexte professionnel, disposer d'un espace web requiert
l'appui d'un service institutionnel ou d'une entreprise de commerce spécialisé dans cette œuvre.
Un client FTP est un logiciel qui va permettre de communiquer avec le serveur grâce au protocole
de communication FTP. Grâce à cet instrument, on va pouvoir déposer sur le serveur la page web
que nous avons créée.
Avec Ubuntu, vous pouvez utiliser le logiciel Gftp, avec Windows ou MacOs je vous conseille
Filezilla.
On pourra ensuite consulter la page web en tapant dans un navigateur l'adresse :
http://nomdedomainededeuxièmenive.au/nomdudocument.html
2.11
Les limites du HTML
Le HTML est un langage souple et puissant qui permet d'apprendre facilement. Mais c'est aussi un
langage statique qui rend fastidieuses les mises à jour d'un site web et qui nécessite de faire appel à
d'autres technologies pour afficher des éléments multimédias. De plus, il n'est pas possible de faire
figurer un forum, un livre d'or ou des commentaires avec du HTML, pour ce faire il faudra faire
appel à d'autres langages.
Ainsi pour disposer des modules de chats de la plateforme Acolad il est nécessaire d'avoir installé
JavaScript sur son ordinateur, pour visionner une vidéo sur YouTube il faut avoir installé le plug-in
Flash, etc. Une évolution attendue par les webmestres et les développeurs web est l'achèvement de
la version 5 du HTML qui devrait rattraper les défauts du HTML 4 et du XHTML. Voici un site qui
utilise les nouvelles fonctionnalités du HTML 5.
Néanmoins pour présenter des images ou des textes simples le HTML reste un langage facile
d'accès. Si vous souhaitez aller plus loin dans la réalisation de votre propre site vous trouverez un
grand nombre de ressources sur le web traitant du sujet par exemple celui-ci ou celui-là ou celui-ci
ou celui-là.
Mehdi Khaneboubi 2010
17