Introduction

Le chat connait bien Internet

Le HTML, le CSS et d'autres formats (XML, SVG, RDF etc.) sont des standards définis par le W3C. Le W3C est une association à but non lucratif et ces définitions s'appellent aussi les "standards du web". Les constructeurs des navigateurs web tentent de respecter ces standards pour garantir une interopérabilité et la fonctionnalité d'une page web tout court.

Une page web se structure généralement en contenu - écrit en HTML, en style, écrit en CSS et en effets visuels - écrits en Javascript.
Le contenu peut être statique - une page HTML, ou généré de manière dynamique - via le PHP qui peut puiser dans une base de données - au format MySQL.

Inspecter le code source, les CSS et les scripts

Suivant les navigateurs, il y a différents outils pour regarder le code source d'une page :

Retour au sommaire

HTML

HTML
Hypertext Markup Language, Langage de balisage pour écrire de l'hypertexte. Voir aussi l'article Wikipedia sur le HTML
hypertexte
un ensemble de textes/objets reliés par des noeuds. Voir aussi l'article Wikipedia sur l'hypertexte

En fait, parler uniquement de «HTML» n'est pas très précis.
Il y a eu plusieurs standards HTML définis par le W3C : le plus récent s'appelle le standard HTML4. Ce standard est très répandu.
Mais il y a aussi eu un standard qui devait remplacer le HTML4, le XHTML (versions XHTML1 et XHTML1.1). Le XHTML a une sytaxe légèrement différente que le HTML4. Le HTML4 ne connaît pas de balises autofermantes.

Un nouveau standard est maintenant en cours d'élaboration, le HTML5. Ce standard remplacera le HTML4 et le XHTML. Le HTML5 est compatible avec le XHTML et le HTML4, c'est à dire que la syntaxe des deux restera valide.
Le HTML5 introduira quelques nouvelles balises HTML, qui visent à rendre un navigateur web plus intelligent : on n'aura par exemple plus besoin de Flash pour inclure une vidéo dans une page.
La syntaxe que nous vous proposons pour cet atelier est l'ancienne syntaxe XHTML, dans une page compatible HTML5. Cela est indiqué par la balise doctype en début de fichier.

Editeurs HTML

Une page HTML est une page au format texte, avec l'extension .html

Pour écrire du HTML, il est préférable d'utiliser un éditeur qui ait une coloration du texte.

Structure d'une page HTML

Le contenu doit être structuré de manière logique : titres, paragraphes, colonnes.

			<doctype>
			<html>
				<head>
					<!-- titre, javascripts, fils rss, favicon, feuilles de style -->
				</head>
				<body>
					<!-- partie visible -->
				</body>
			</html>
		

Sur la page Wikipedia sur le HTML il y a une visualisation de cette structure.

Note : Quand vous regardez le code source de cette partie de la page vous allez voir des entités HTML. On utilise ces entités afin que le navigateur n'interprète pas les balises mais les affiche uniquement. Voir liste exhaustive des entités HTML.

De manière générale les balises vont toujours par pair :

Il y a aussi des balises dites autofermantes.

Les balises HTML

Balises principales

<html>, <head>, <body>
sont les balises principales et obligatoires d'une page HTML.
<title>
titre de la page, dans la partie <head>
<meta>
données méta, dans la partie <head>
<script>
pour inclure un script, dans la partie <head>
<link>
pour inclure un fichier CSS ou XML, dans la partie <head>
<doctype>
définit le format de la page

Structure de page

<div>
division
<header>
en-tête, depuis HTML5
<footer>
pied de page, depuis HTML5
<!-- -->
commentaire HTML (le contenu de cette balise sera visible uniquement dans le code source)

Formatage du texte

<h1>
headline 1, titre le plus important
<h2>
headline 2,titre moins important
<p>
paragraphe
<sub>
texte bas
<sup>
texte supérieur
<pre>
preformatted text, texte préformaté
<code>
du code
<blockquote>
block d'une citation longue
<br />
break, saut de ligne
<hr />
horizontal ruler, un trait horizontal

Formatage du texte

L'effet des balises suivantes pourrait être atteint aussi via une feuille de style. Seul <em> et <strong> servent réellement : à indiquer aux moteurs de recherche les mots ou phrases importantes d'une page.

<em>
emphasized, texte accentué
<strong>
strong emphasized text, texte accentué plus
<span>
span, étendue de texte
<i>
italic, italique
<b>
bold, gras
<small>
petit texte
<big>
texte plus grand

Liens

Listes

<ul>
unordered list, liste non ordonnée
<ol>
ordered list, liste ordonnée
<li>
list item, élément de liste, dans une liste ordonnée ou non ordonnée
<dl>
dictionary list, liste de définitions de termes
<dt>
dictionary term, terme/mot/notion à définir dans une liste de définitions
<dd>
dictionary description, description du terme/mot/notion, dans une liste de définitions

Tableaux

<table>
un tableau
<thead>
en-tête du tableau
<tfoot>
pied du tableau
<tbody>
corps du tableau
<tr>
table row, ligne d'un tableau
<td>
table data, champ dans une ligne d'un tableau
<th>
table head, champ en-tête dans une ligne d'un tableau
<colgroup>
column group, une groupe de colonnes dans un tableau

Formulaires

<form>
un formulaire
<fieldset>
ensemble de champs de formulaire
<legend>
légende d'un ensemble de champs de formulaire
<input>
champ. Il y a différents types de champ : text, password, checkbox, radio, submit, hidden.
<label>
un titre pour chaque champ
<textarea>
champ de texte multiligne

Contenu multimédia

<img>
image, pour inclure une image.
<object>
pour inclure un objet, par exemple une application Flash
<embed>
embedded, pour inclure un objet audio, vidéo
<audio>
pour inclure de l'audio, depuis HTML5
<video>
pour inclure de la vidéo, depuis HTML5

Les balises et attributs obsolètes

Certaines balises sont obsolètes ("deprecated") mais existent encore sur beaucoup de pages HTML sur le net.
Il s'agit entre autres de font, center.

De la même manière il y a des attributs qui apparaissent sur certaines pages HTML qu'il faut éviter, notamment : align, alink, background, bgcolor, hspace, border, vlink.

Références

Retour au sommaire

Accessibilité

Accessibilité, ça veut dire quoi ?

Un chat avec un ordinateur portable

Ça veut dire utiliser du code qui respecte les standards du web afin qu'une page web puisse être lue par un ordinateur pour les aveugles, vue par une personne qui souffre de daltonisme ou par une personne malvoyante.
Ça veut dire éviter le Flash.
Ça veut dire séparer le contenu de sa présentation. Respecter la sémantique.

Pourquoi ?

Un code qui respecte les standards nous permet d'agrandir le texte à notre convenance.
Le Flash est une technologie non accessible. Regardons la source d'un fichier flash. Testons notre page web avec un navigateur texte, comme lynx.

5% de la population souffre de daltonisme, notamment des hommes.

Comment ?

Faire de la mise en page à l'aide de tableaux (table) n'est pas accessible, parcque un tableau se lit en colonne, du coup le contenu est forcément dans le mauvais ordre. Il faut utiliser les tableaux uniquement pour représenter un contenu adapté : par exemple les points d'un match de volleyball.

On peut créer et mettre à disposition des feuilles de style aurales non seulement pour les aveugles, mais aussi pour les personnes analphabètes ou ayant des difficultés à lire. De nos jours, seul quelques lecteurs d'écran spécialisés lisent les feuilles de style aurales.

Outils pour l'accessibilité

Daltonisme
Malvoyants et aveugles

Retour au sommaire

CSS - Feuilles de style

CSS - cascading style sheets - feuille de style en cascade. Un fichier au format texte avec l'extension .css.
La CSS permet de positionner les éléments de la page. Elle permet aussi de définir des couleurs, des polices, des tailles ou encore des images de fond en les définissant pour chaque balise HTML.

Séparer contenu et présentation

Indépendance du contenu et de la présentation, voir : CSS Zengarden.

Inclure la feuille de style

Référence à un fichier externe

		<head>
			<link rel="stylesheet" type="text/css" href="style.css" />
			<link rel="stylesheet" type="text/css" href="styleforprintandhandheld.css" media="print, handheld" />
		</head>
		

CSS interne importée

		<head>
			<style type="text/css">
				@import url("style.css");
				@import url("styleforhandhelds.css") handheld;
				@import url("styleforprinters.css") print;
			</style>
		</head>
		

CSS interne

		<head>
			<style type="text/css">
				p {margin-left: 20px; color: red; }
				body {background-image:url("images/back40.gif");}
			</style>
		</head>
		

CSS inline

		<p style="color: red; margin-left: 20px">Mon petit paragraphe.</p>
		

La façon la plus propre et la plus rapide, dès qu'un site contient plus qu'une seule page HTML, est d'utiliser des feuilles de style externes. Cela permet de modifier l'apparence d'un site web en modifiant un seul fichier au lieu de reprendre tous les fichiers HTML.

Comme on peut voir, il est possible d'appeller plusieurs feuilles de style à la fois. L'ordre est important : si on redéfinit un même sélecteur deux fois, c'est la dernière définition qui est prise en compte (héritage).

Définition d'une feuille de style pour un media particulier

De plus, on peut définir l'utilisation ("media type") d'une feuille de style, comme on peut voir ci-dessus par ailleurs :
screen, handheld, projection, print, embossed (braille), speech, tv. Voir à ce sujet la référence du W3C.

Cette définition n'est pas obligatoire. Si elle est omise, la feuille de style s'appliquera tout simplement pour tous les media.

Mais il y a déjà un style là ?

Comme on peut voir avec la page présente, sans feuille de style il y a déjà un style : tailles de polices variées, polices différentes pour la balise <pre>, texte gras, marges et indentations. Parce que chaque navigateur a une feuille de style par défaut.

Comment écrire une feuille de style ?

C'est une bonne pratique de commencer sa feuille de style par un commentaire qui peut contenir la date, l'auteur ou le/la graphiste, le site qui utilise la CSS, les couleurs de base.

		/*
		Ceci est un commentaire dans une feuille de style. Le contenu n'est pas interprété et ne sert qu'aux humains qui travaillent avec la CSS.
		Les couleurs de base :
			* texte : #000000
			* liens : blue
		Auteur et copyright : collectif
		*/
		

En CSS, on opère avec des sélecteurs, ce sont des tags HTML, des id ou des class. Le sélecteur c'est l'élément HTML qu'on vise, qu'on veut «styler». On le style en modifiant une propriété - un attribut -, comme sa couleur, sa taille, sa police, son espacement. Et à chaque propriété on donne une valeur.

Exemple ou p est le sélecteur, color est la propriété CSS et red la valeur de la propriété :

		p {
			color: red;
		}
		

La propriété et la valeur doivent toujours être entourées d'accolades et la définition d'une propriété avec sa valeur doit toujours être terminée par un point virgule, autrement la propriété suivante ne peut plus être interprétée.

Il n'y a pas vraiment de règles pour l'écriture même de la CSS. Ainsi, les 3 prochaines manières d'écrire aboutissent au même résultat :

		/* possibilité 1 */
		p {
			color: red;
		}

		/* possibilité 2 */
		p
		{
			color: red;
		}

		/* possibilité 3 */
		p { color: red; }
		

On peut tout écrire sur une ligne si on veut. Mais il est préférable d'indenter les lignes dans le fichier pour une meilleure lisibilité.

Les sélecteurs

Généralement, un code HTML propre facilite le design en CSS.
Un sélecteur peut être toute balise HTML :

		/* vise tous les paragraphes */
		p {
			color: red;
		}
		

D'ailleurs, on peut écrire plusieurs sélecteurs sur une même ligne, si on veut leur appliquer les mêmes propriétés :

		/* tous les titres doivent avoir une couleur de fond orange et le texte doit être noir */
		h1, h2, h3, h4, h5 {
			background-color: orange;
			color: black;
		}

		/* le h1 se comporte d'abord comme tous les titres (héritage), mais le texte doit être blanc, on le redéfinit après */
		h1 {
			color: white;
		}
		
Viser un élément particulier avec les id et les class

Si on veut viser un élément particulier on peut utiliser ou insérer l'attribut id dans notre code source HTML :

		/* un id est représenté par le signe "dièze". */
		p#description {
			color: red;
		}

		/* autre manière d'écrire qui ne se restreint pas à un paragraphe */
		#description {
			color: red;
		}

		

On visera ici donc le paragraphe qui a l'id«description» et aucun autre paragraphe. Un id ne doit apparaître qu'une fois dans une page HTML. UN élément ne peut avoir qu'un id à la fois.

Un id est un nom unique qu'on va donner à un élément dans la page HTML. Le nommage est libre, mais le nom ne doit pas comporter des signes spéciaux autre que - et _, donc pas d'accents, pas d'espace. Aussi, un id ne peut pas juste être un chiffre.

Pour viser un élément particulier, on peut aussi indiquer l'arborescence pour arriver à cet élément dans notre fichier HTML :

		/* vise seulement les paragraphes dans le div avec l'id "footer" */
		#footer p {
			color: red;
		}

		/* on peut aussi indiquer tout le chemin de parent en enfant pour viser un élément particulier */
		body #footer p a {
			color: red;
		}
		

Pour viser plusieurs éléments à la fois, parce que celles ci sont récurrents, on utilise ou on introduit l'attribut "class" dans le code HTML
Une class est un nom qu'on peut donner à plusieurs éléments dans la page HTML. Généralement, on l'utilise pour désigner des éléments récurrents. Par exemple, le lien "Retour au sommaire" apparaît plusieurs fois dans notre page, et comme c'est toujours le même, on pourra lui donner une même apparence en utilisant sa class dans notre feuille de style.
Le nommage est libre ici aussi, mais le nom ne doit pas comporter des signes spéciaux autre que - et _, donc pas d'accents, pas d'espace. Aussi, une class ne peut pas juste être un chiffre.


		/* une class est représentée par le signe "point". */
		p.retoursommaire {
			text-align: right;
		}

		/* Encore une fois il suffirait d'écrire */
		.retoursommaire {
			text-align: right;
		}

		/* vise le lien avec la class "retoursommaire" */
		p.retoursommaire a {
			color: green;
		}

		

Un élément peut avoir plusieurs class à la fois et hérite de toutes les propriétés de ces classes.

Il y a aussi des pseudo sélecteurs qui permettent par exemple de viser la première lettre d'une paragraphe, ou un champ sur lequel on a cliqué ou encore quand on passe la souris au dessus d'un élément, ou encore quand on visite un lien qu'on a déjà visité avant.

		/* la premiere lettre de tous les paragraphes doit être verte */
		p:first-letter {
			color: green;
		}

		/* quand on passe la souris sur un lien, celui-ci apparaît non souligné */
		a:hover {
			text-decoration: none;
		}

		/* les liens qu'on a déjà visités doivent être grisés */
		a:visited {
			color: gray;
		}
		

Le joker

		/* L'étoile est un joker, et permet de viser tous les éléments.
		Pour remettre à zero les marges et marges internes (padding) des feuilles de style par défaut des navigateurs, beaucoup de CSS commencent par : */
		* {
			margin: 0;
			padding: 0;
		}
		

Les propriétés

Un élément hérite toujours de son parent qui hérite de son parent etc.
Quand on définit une couleur pour le body, les paragraphes contenus dans le body hériteront de cette couleur.
Il est nécessaire de comprendre l'emboitement des éléments pour écrire des CSS et structurer mieux le HTML. Tester avec Firebug.

Les couleurs

On peut indiquer la même couleur dans différents formats :

		body {
			background: rgb(255,255,255);
			color: #333; /* c'est la même chose que #333333 */
		}
		

Historiquement, les écrans d'ordinateur ne pouvaient afficher que 256 couleurs. De cette contrainte il y a eu une définition de 256 valeurs de couleur pour le web ("websafe"). Seul ces 256 couleurs ont des noms. Toutes les autres couleurs qu'on voudrait afficher doivent être indiquées dans un autre format de ceux proposés ci-dessus.
En CSS2, le standard en vigueur, il n'est pas possible de faire des dégradés.

Les polices

Les polices définies dans une CSS ne sont pas mises à disposition par le serveur, mais par le client. L'affichage d'un site dépend donc des polices installées sur un ordinateur. Evidemment Windows, Mac OS et GNU/Linux ne mettent pas à disposition les mêmes polices par défaut pour des raisons de licence. Il nous faut alors toujours définir un "fallback", une solution de repli.

		/* Les cotes et guillemets sont optionnels : */
		body {
			font-family: "Helvetica", 'Arial', Verdana, sans-serif;
			font-size: 12px;
			font-weight: normal;
			font-style: italic;
			text-transform: uppercase;
		}
		

Comme pour tous les éléments on peut définir la taille des polices en pixels (px), points (pt), pourcents (%) ou cadratins (em).

Pour utiliser d'autres polices (fournies par le serveur)

Les tailles

Les positions

Le positionnement est la partie la plus dure à comprendre pour beaucoup de gens.

Ce qu'il faut savoir :

  • float Un élément flottant a la taille de son contenu, sauf si autrement spécifié. Il flotte à gauche ou à droite.
  • clear Pour aligner un élément après un élément flottant, sans que cet élément flotte soi-même et sans qu'il soit impacté par des éléments flottants qui le précèdent.
  • position: absolute; Aligner un élément par rapport à un parent. Ce parent doit alors avoir une position: relative, autrement on monte dans la hiérarchie jusqu'à ce qu'on arrive à un élément avec cette propriété ou le .
  • position: fixed; Pour aligner un élément à un endroit fixe, même en scrollant, cet élément ne bouge pas.

Les propriétés left, right, top, bottom s'appliquent uniquement sur des éléments pour lesquels on a aussi défini la propriété position. Autrement elle ne sont pas pris en compte et doivent être remplacées par margin-left, margin-right, margin-top, margin-bottom.

Margin et padding

Le margin est la marge extérieure d'un élément, le padding sa marge intérieure. Avec Firebug on peut bien distinguer les margins (jaunes) des paddings (violets) en passant la souris au dessus d'un élément dans la partie HTML de Firebug.

		/* on indique dans l'ordre : top right bottom left */
		p {
			margin: 10px 10px 10px 10px;
		}
		/* comme c'est partout la même chose il suffit d'écrire */
		p {
			margin: 10px;
		}

		/* on indique dans l'ordre : top right bottom left */
		div {
			padding: 10px 5px 10px 5px;
		}
		/* ce qui reviendrait à écrire  top & bottom, right & left. */
		div {
			margin: 10px 5px;
		}

		/* on indique dans l'ordre : top right bottom left */
		img {
			margin: 10px 5px 0 5px;
		}
		/* ce qui reviendrait à écrire */
		img {
			margin: 10px 5px 0;
		}
		

Comment garantir qu'un site a la même apparence dans tous les navigateurs ?

Evidemment, on va travailler dans un navigateur de notre choix, a priori Firefox. Mais il peut arriver que la CSS peut ne fonctionne pas entièrement de la même manière dans d'autres navigateurs parce que chaque navigateur / constructeur a implémenté les recommandations et standards différemment. On est donc obligés de "hacker" notre CSS. Il faut toujours tester la CSS partout et c'est souvent ces tests (ainsi que le déboguage qui en résulte) qui prennent le plus de temps.

Les hacks pour IE :

		/* L'instruction normale : */
		#footer p {
			color: green;
		}

		/* Une instruction particulière pour IE6 : */
		* html #footer p {
			color: lawngreen;
		}

		/* Une instruction particulière pour IE7 : */
		*:first-child+html #footer p {
			color: seagreen;
		}
		

Ces hacks sont pratiques et rapides, mais elle invalident la CSS.
Pour ne pas en arriver là, on peut aussi inclure une CSS spécifique dans le <head> en utilisant des conditions HTML :

		<!--[if IE]>
			<link rel="stylesheet" type="text/css" href="ie-tous.css" />
		<![endif]-->

		<!--[if lt IE 7]>
			<link rel="stylesheet" type="text/css" href="ie-7etmoins.css" />
		<![endif]-->
		
lt = less than, gt = greater than, lte = less then or equal, gte = greater than or equal

Quand on a fini d'écrire une CSS, on vérifie qu'elle respecte les standards et qu'il n'y a pas d'erreurs ici : W3C CSS validator

CSS3

Le standard CSS3 propose plusieurs nouveautés qui sont assez jolies, notamment des ombres sur le texte, des ombres sur des images ou des divs, images de fond multiples, etc. De plus, on pourra organiser le texte en de multiples colonnes, comme dans un journal, uniquement en CSS, sans devoir définir des div pour chaque colonne.
Ce qui est génial, c'est que certains navigateurs ont déjà implémenté, du moins en partie, le standard CSS3.

Toutes les références CSS

Retour au sommaire

Protocoles HTTP & FTP

HTTP

HTTP est un des protocoles de communication utilisé sur Internet.
Par exemple, quand on demande la page "ateliers-femmes.du-libre.org" dans un navigateur (client) à l'ordinateur qui héberge le site (serveur), les informations qui s'affichent sur la page auront été transmises en utilisant le protocole HTTP.
HTTP sert à établir les règles de communication entre les serveurs web (là où sont hébergés les sites internet) et les clients (navigateur web par exemple) grâce notamment au système d'URL.
Il existe une variante "sécurisée" de HTTP : HTTPS. La sécurisation du protocole consiste en la possibilité de vérifier l'identité du site qu'on visite et chiffre les communications entre notre machine et le serveur qui héberge le site.

FTP

FTP est un autre protocole de communication utilisé sur Internet. Il sert à transférer des fichiers depuis un ordinateur (client) vers un serveur et vice versa.
Le FTP gère l'authentification par mot de passe. C'est le moyen utilisé par beaucoup d'hébergeurs pour permettre à leurs utilisateurs à transférer des fichiers.

Un mot sur les URL

			/
			|_ index.html
			|_ aline/
				|_ bibliographie.html
				|_ index.html
				|_ css/
					|_ styles.css
				|_ images/
					|_ screenshot.png
				|_ pages/
					|_ index.html
					|_ jeu.html
			|_ sarah/
				|_ index.html
				|_ css/
					|_ formulaires.css
					|_ style.css
					|_ images/
						|_ logo.jpg
				|_ images/
					|_ ma-voiture.jpg
					|_ mon-enfant.jpg
					|_ monchat.jpg
		
  • http://ateliers-femmes.du-libre.org est une URL absolue
  • /index.html est une URL absolue. Le slash indique qu'on commence à parcourir l'arborescence des fichiers à partir de la racine de notre hébergement web.
  • index.html est une URL relative, depuis /aline/bibliographie.html j'arriverai donc sur /aline/index.html (On reste dans le même répertoire). Si je veux arriver sur l'index.html dans le répertoire de Sarah je dois utiliser l'URL /sarah/index.html ou alors /sarah/ (sur la plupart des configurations de serveur web, on n'est pas obligé d'indiquer le fichier par défaut qui s'appelle souvent index.html ou index.php) ou encore ../sarah.index.html (les deux points indiquent qu'on monte d'un cran).

Retour au sommaire