HTML5
CSS
Programmation Web 2013 :
1 Université du Tampon
Historique
Le Web a été inventé par Tim Berners-Lee au début des années 1990.
Pour créer des sites web, on utilise deux langages informatiques :
HTML : permet d'écrire et organiser le contenu de la page (paragraphes, titres…) ;
CSS : permet de mettre en forme la page (couleur, taille…).
Il y a eu plusieurs versions des langages HTML et CSS.
Les dernières versions sont HTML5 et CSS3.
Le navigateur web est un programme qui permet d'afficher des sites web.
Il lit les langages HTML et CSS pour savoir ce qu'il doit afficher.
Il existe de nombreux navigateurs web différents : Google Chrome, Mozilla Firefox, Internet
Explorer, Safari, Opera…
Chacun affiche un site web de manière légèrement différente des autres navigateurs.
Dans ce cours, nous allons apprendre à utiliser les langages HTML et CSS. Nous travaillerons
dans un programme appelé « éditeur de texte » (Notepad++, jEdit, vim…).
Apprenez à créer votre site web avec HTML5 et CSS3
On utilise l'éditeur de texte
(Notepad++, jEdit, vim…) pour créer un fichier ayant l'extension .html (par exemple :
[Link]). Ce sera notre page web. Ce fichier peut être ouvert dans le navigateur web
simplement en faisant un double-clic dessus. À l'intérieur du fichier, nous écrirons le contenu de
notre page, accompagné de balises HTML.
Les balises peuvent avoir plusieurs formes :
<balise> </balise> :
elles s'ouvrent et se ferment pour délimiter le contenu (début et fin d'un titre, par exemple).
<balise /> : balises orphelines (on ne les insère qu'en un seul exemplaire), elles permettent
d'insérer un élément à un endroit précis (par exemple une image).
Les balises sont parfois accompagnées d'attributs pour donner des indications
supplémentaires (exemple : <image nom="[Link]" />).
Une page web est constituée de deux sections principales :
un en-tête (<head>) et un corps (<body>).
On peut afficher le code source de n'importe quelle page web en faisant un clic droit puis en
sélectionnant afficher le code source de la page.
Oganiser son texte
Le HTML comporte de nombreuses balises qui nous permettent d'organiser le texte de notre
page. Ces balises donnent des indications comme « Ceci est un paragraphe », « Ceci est un
titre », etc. Les paragraphes sont définis par la balise <p> </p> et les sauts de ligne par la
balise <br />. Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6>, à utiliser selon
l'importance du titre.
On peut mettre en valeur certains mots avec les balises <strong>, <em> et <mark>.
Pour créer des listes, on doit utiliser la balise <ul> (liste à puces, non ordonnée) ou <ol> (liste
ordonnée). À l'intérieur, on insère les éléments avec une balise <li> pour chaque item.
Créer des liens
Les liens permettent de changer de page et sont, par défaut, écrits en bleu et soulignés.
Pour insérer un lien, on utilise la balise <a> avec l'attribut href pour indiquer l'adresse de la
page cible. Exemple : <a href="[Link]
On peut faire un lien vers une autre page de son site simplement en écrivant le nom du fichier :
<a href="[Link]">.
Programmation Web 2013 :
2 Université du Tampon
Formats d’images adaptées au Web
Il existe plusieurs formats d'images adaptées au Web : JPEG : pour les photos ;
PNG : pour toutes les autres illustrations ;
GIF : similaire au PNG, plus limité en nombre de couleurs mais qui peut être animé.
On insère une image avec la balise <img />. Elle doit obligatoirement comporter au moins ces
deux attributs : src (nom de l'image) et alt (courte description de l'image).
Si une image illustre le texte (et n'est pas seulement décorative), il est conseillé de la placer au
sein d'une balise <figure>. La balise <figcaption> permet d'écrire la légende de l'image.
Mise en forme CSS
CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme votre
page web. Il faut être vigilant sur la compatibilité des navigateurs avec certaines fonctionnalités
récentes de CSS3. Quand un navigateur ne connaît pas une instruction de mise en forme, il
l'ignore simplement.
On peut écrire le code CSS à plusieurs endroits différents, le plus conseillé étant de créer un
fichier séparé portant l'extension .css (exemple : [Link]).
En CSS, on sélectionne quelles portions de la page HTML on veut modifier et on change leur
présentation avec des propriétés CSS :
Code : CSS balise1 {
propriete1: valeur1;
propriete2: valeur2;
}
Il existe de nombreuses façons de sélectionner la portion de la page que l'on veut mettre en
forme. Par exemple, on peut viser : toutes les balises d'un même type, en écrivant simplement
leur nom (h1 par exemple) ; certaines balises spécifiques, auxquelles on a donné des noms à
l'aide des attributs class ou id (.nomclasse ou #nomid) ; uniquement les balises qui se
trouvent à l'intérieur d'autres balises (h3 em). etc.
Mise en forme CSS
On modifie la taille du texte avec la propriété CSS font-size. On peut indiquer la taille en pixels
(16px), en « em » (1.3em), en pourcentage (110%), etc.
On change la police du texte avec font-family. Attention, seules quelques polices sont connues
par tous les ordinateurs. Vous pouvez cependant utiliser une police personnalisée avec la
directive @font-face : cela forcera les navigateurs à télécharger la police de votre choix.
De nombreuses propriétés de mise en forme du texte existent : font-style pour l'italique, font-
weight pour la mise en gras, text-decoration pour le soulignement, etc.
Le texte peut être aligné avec text-align. On peut faire en sorte qu'une image soit habillée («
entourée ») de texte avec float.
La couleur et le fond
On change la couleur du texte avec la propriété color, la couleur de fond avec background-
color. On peut indiquer une couleur en écrivant son nom en anglais (black, par exemple), sous
forme hexadécimale (#FFC8D3) ou en notation RGB (rgb(250,25,118)). On peut ajouter une
image de fond avec background-image. On peut choisir de fixer l'image de fond, de l'afficher en
mosaïque ou non, et même de la positionner où on veut sur la page. On peut rendre une
portion de la page transparente avec la propriété opacity ou avec la notation RGBa (identique
à la
notation RGB, avec une quatrième valeur indiquant le niveau de transparence).
Programmation Web 2013 :
3 Université du Tampon
Les bordures et les ombres
On peut appliquer une bordure à un élément avec la propriété border. Il faut indiquer la largeur
de la bordure, sa couleur et son type (trait continu, pointillés…).
On peut arrondir les bordures avec border-radius.
On peut ajouter une ombre aux blocs de texte avec box-shadow. On doit indiquer le décalage
vertical et horizontal de l'ombre, son niveau d'adoucissement et sa couleur.
Le texte peut lui aussi avoir une ombre avec text-shadow.
Création d'apparences dynamiques
En CSS, on peut modifier l'apparence de certaines sections dynamiquement, après le
chargement de la page, lorsque certains évènements se produisent. On utilise pour cela les
pseudo-formats. Le pseudo-format : hover permet de changer l'apparence au survol (par
exemple : a: hover pour modifier l'apparence des liens lorsque la souris pointe dessus).
Le pseudo-format : active modifie l'apparence des liens au moment du clic, : visited lorsqu'un
lien a déjà été visité. Le pseudo-format : focus permet de modifier l'apparence d'un élément
sélectionné.
Structurer sa page
Plusieurs balises ont été introduites avec HTML5 pour délimiter les différentes zones qui
constituent la page web :
<header> : en-tête ;
<footer> : pied de page ;
<nav> : liens principaux de navigation ;
<section> : section de page ;
<aside> : informations complémentaires ;
<article> : article indépendant.
Ces balises peuvent être imbriquées les unes dans les autres. Ainsi, une section peut avoir son
propre en-tête. Ces balises ne s'occupent pas de la mise en page. Elles servent seulement à
indiquer à l'ordinateur le sens du texte qu'elles contiennent. On pourrait très bien placer l'en-tête
en bas de la page si on le souhaite. Le code JavaScript HTML5shiv permet de faire en sorte
que ces balises soient reconnues pour les versions d'Internet Explorer antérieures à IE9.
Le modèle des boîtes
On distingue deux principaux types de balises en HTML :
Le type block (<p>, <h1>…) : ces balises créent un retour à la ligne et occupent par défaut
toute la largeur disponible. Elles se suivent de haut en bas.
Le type inline (<a>, <strong>…) : ces balises délimitent du texte au milieu d'une ligne. Elles se
suivent de gauche à droite.
On peut modifier la taille d'une balise de type block avec les propriétés CSS width (largeur) et
height (hauteur). On peut définir des minima et maxima autorisés pour la largeur et la hauteur :
min-width, max-width, minheight, max-height.
Les éléments de la page disposent chacun de marges intérieures (padding) et extérieures
(margin).
S'il y a trop de texte à l'intérieur d'un bloc de dimensions fixes, il y a un risque de débordement.
Dans ce cas, il peut être judicieux de rajouter des barres de défilement avec la propriété
overflow ou de forcer la césure avec word-wrap.
Programmation Web 2013 :
4 Université du Tampon
Le positionnement en CSS
La mise en page d'un site web s'effectue en CSS. Plusieurs techniques sont à notre disposition.
Le positionnement flottant (avec la propriété float) est l'un des plus utilisés à l'heure actuelle. Il
permet par exemple de placer un menu à gauche ou à droite de la page. Néanmoins, cette
propriété n'a pas été initialement conçue pour cela et il est préférable, si possible, d'éviter cette
technique.
Le positionnement inline-block consiste à affecter un type inline-block à nos éléments grâce à
la propriété display. Ils se comporteront comme des inlines (placement de gauche à droite)
mais pourront être redimensionnés comme des blocs (avec width et height). Cette technique
est à préférer au positionnement flottant.
Le positionnement absolu permet de placer un élément où l'on souhaite sur la page, au pixel
près.
Le positionnement fixe est identique au positionnement absolu mais l'élément restera toujours
visible même si on descend plus bas dans la page.
Le positionnement relatif permet de décaler un bloc par rapport à sa position normale.
Un élément A positionné en absolu à l'intérieur d'un autre élément B (lui-même positionné en
absolu, fixe ou relatif) se positionnera par rapport à l'élément B, et non par rapport au coin en
haut à gauche de la page.
Les tableaux
Un tableau s'insère avec la balise <table> et se définit ligne par ligne avec <tr>.
Chaque ligne comporte des cellules <td> (cellules normales) ou <th> (cellules d'en-tête).
Le titre du tableau se définit avec <caption>.
On peut ajouter une bordure aux cellules du tableau avec border. Pour fusionner les bordures,
on utilise la propriété CSS border-collapse.
Un tableau peut être divisé en trois sections : <thead> (en-tête), <tbody> (corps) et <tfoot>
(bas du tableau).
L'utilisation de ces balises n'est pas obligatoire.
On peut fusionner des cellules horizontalement avec l'attribut colspan ou verticalement avec
rowspan. Il faut indiquer combien de cellules doivent être fusionnées.
Les formulaires
Un formulaire est une zone interactive de la page, dans laquelle vos visiteurs peuvent saisir
des informations. On délimite un formulaire avec la balise <form> à laquelle il faut ajouter deux
attributs : method (mode d'envoi des données) et action (page vers laquelle le visiteur sera
redirigé après envoi du formulaire et qui traitera les informations).
Une grande partie des éléments du formulaire peut s'insérer avec la balise <input />. La valeur
de son attribut type permet d'indiquer quel type de champ doit être inséré :
text : zone de texte ;
password : zone de texte pour mot de passe ;
tel : numéro de téléphone ;
checkbox : case à cocher ;
etc.
La balise <label> permet d'écrire un libellé. On l'associe à un champ de formulaire avec
l'attribut for, qui doit avoir la même valeur que l'id du champ de formulaire.
On peut rendre un champ obligatoire avec l'attribut required, faire en sorte qu'il soit sélectionné
par défaut avec autofocus, donner une indication dans le champ avec placeholder…
Pour récupérer ce que les visiteurs ont saisi, le langage HTML ne suffit pas. Il faut utiliser un
langage « serveur » comme PHP… Si vous voulez aller plus loin, il va donc falloir apprendre un
nouveau langage !
Programmation Web 2013 :
5 Université du Tampon
La vidéo et l'audio
Insérer de la musique ou de la vidéo n'était pas possible autrefois en HTML. Il fallait recourir
à un plugin comme Flash. Depuis HTML5, les balises <audio> et <video> ont été introduites et
permettent de jouer de la musique et des vidéos sans plugin.
Il existe plusieurs formats audio et vidéo. Il faut notamment connaître :
pour l'audio : MP3 et Ogg Vorbis ;
pour la vidéo : H.264, Ogg Theora et WebM.
Aucun format n'est reconnu par l'ensemble des navigateurs : il faut proposer différentes
versions de sa musique ou de sa vidéo pour satisfaire tous les navigateurs.
Il faut ajouter l'attribut controls aux balises <audio> et <video> pour permettre au visiteur de
lancer ou d'arrêter le média.
Ces balises ne sont pas conçues pour empêcher le téléchargement de la musique et de la
vidéo. Vous ne pouvez pas protéger votre média contre la copie.
Mise en page adaptative avec les Media Queries
Les media queries permettent de charger des styles CSS différents en fonction de certains
paramètres.
Les paramètres autorisés par les media queries sont nombreux : nombre de couleurs,
résolution de l'écran, orientation…
En pratique, on s'en sert surtout pour modifier l'apparence du site en fonction des différentes
résolutions d'écran.
On crée une media query avec la directive @media suivie du type d'écran et d'une ou
plusieurs conditions (comme la largeur maximale d'écran). Le style CSS qui suit sera activé
uniquement si les conditions sont remplies.
Les navigateurs mobiles simulent une largeur d'écran : on appelle cela le viewport.
On peut cibler les smartphones grâce à une règle basée sur le nombre réel de pixels affichés à
l'écran : max-devicewidth.
Aller plus loin
Pour le moment, votre site web n'est visible que par vous, sur votre ordinateur. Il faut l'envoyer
sur le Web pour qu'il soit visible par tout le monde.
Vous avez besoin de deux éléments :
Un nom de domaine : c'est l'adresse de votre site web. Vous pouvez réserver une adresse en
.com, .fr, .net… Par exemple : [Link].
Un hébergeur : c'est lui qui va stocker votre site web sur une machine appelée « serveur ».
Son rôle sera d'envoyer votre site à vos visiteurs à toute heure du jour et de la nuit.
Pour transmettre les fichiers de votre site au serveur de votre hébergeur, il faut utiliser un
client FTP comme FileZilla.
Pour vous connecter au serveur, vous avez besoin de trois informations : l'adresse IP du
serveur (ou son nom d'hôte), votre login et votre mot de passe. Ceux-ci vous sont fournis par
votre hébergeur.
Programmation Web 2013 :
6 Université du Tampon
Structure de base d'une page HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>
Programmation Web 2013 :
7 Université du Tampon
Programmation Web 2013 :
8 Université du Tampon
