HTML - CSS : une introduction
Les bases
Une page minimale
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
Hello world !
</body>
</html>
Une page typique
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<h1>Hello world !</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit sed nulla delectus recusandae ipsum corrupti itaque ratione porro neque omnis nisi minima odit quae cum sint quasi dolorum voluptates nihil.</p>
<img src="WebFront101/illustration.jpg" alt="Lorem ipsum" />
</body>
</html>
Les balises
Le HTML est composé de balises qui représentent un arbre.
Chaque balise peut avoir des attributs, des balises enfants ou du contenu texte.
Un balise sans attribut, avec un enfant texte.
<title>Hello World</title>
Un balise avec 2 attributs (ayant chacun une valeur), sans enfant. C'est une balise simple.
<meta name="description" content="Mon super site" />
Un balise sans attribut, avec pour enfant une autre balise.
<body><h1>Hello world !</h1></body>
Les balises les plus communes
- html : encadre la totalité du document.
- head : ses balises enfants permettent de définir les propriétés du document.
- meta : chaque balise meta permet de définir un aspect du document.
- title : c'est le titre afficher dans la barre de titre de la fenêtre du navigateur.
- body : ses balises enfants permettent de définir le contenu du document.
- h1, h2, ... , h6 : pour représenter les différents niveaux de titres.
- p : pour représenter un paragraphe.
- div : pour regrouper plusieurs balises entre elles.
- ul et li : pour représenter une liste et ses éléments.
- table, tr et td : pour représenter un tableau, ses lignes et ses cellules.
- a : pour représenter un lien vers une URL, un fichier ou dans le document.
- img : pour intégrer une image dans le document.
- strong : pour mettre en valeur un ensemble de texte.
- span : pour regrouper un ensemble de texte.
Exemple complet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML : Vue d'ensemble des balises</title>
<meta name="description" content="Plein de balises HTML" />
<meta name="author" content="Moi" />
</head>
<body>
<h1>Vue d'ensemble des balises</h1>
<p> Ceci est un paragraphe
avec un lien <a href="http://www.google.fr">vers Google</a>
et un texte <strong>mis en avant</strong>. </p>
<ul>
<li>Ceci est une liste</li>
<li>avec plusieurs</li>
<li>éléments.</li>
</ul>
<p>Sans oublier une image :
<img src="WebFront101/image.jpg" alt="Ma photo" /> </p>
</body>
</html>
Mise en pratique
A partir de cette capture, reconstituez la page HTML.
Structurer
Avant de pouvoir styler notre page, il nous faut améliorer sa structure.
Pour cela, nous allons utiliser des balises neutres, comme le div et le span, ainsi que des attributs très utiles : id et class.
Les divs : regrouper des balises
Il est souvent utile de regrouper des balises entre elles car elles représente un ensemble.
Par exemple, un article de journal est composé d'un titre, d'un contenu, d'une illustration et d'un auteur.
<h1>Mon journal</h1>
<p>Le meilleur de l'actu en 2 articles</p>
<h2>L'ours bipolaire est désormais une espèce en voie de disparition </h2>
<img src="WebFront101/ours.jpg" />
<p>Surnommé "l'instable du Grand Nord", l'ours bipolaire vient d'être ajouté à la liste rouge des espèces menacées par l'Union Internationale pour la Conservation de la Nature (UICN). A l'heure actuelle, il resterait moins de 300 spécimens de cette espèce qui survit dans les régions arctiques et dont le comportement parfois irrationnel joue contre sa préservation.</p>
<p>Source <a href="http://www.legorafi.fr"></a></p>
<h2>Satellite Gaia : un élève de troisième en stage d'observation coincé à l'intérieur </h2>
<img src="WebFront101/satellite.jpg" />
<p>KOUROU (Guyane française) – Quelques heures après le lancement réussi du télescope GAIA, l'agence spatiale européenne a fait part de son inquiétude. Plusieurs élèves de classe de troisième en stage d'observation étaient présents ce matin pour assister au lancement, et lors d'un recompte il s'est avéré qu'il en manquait un. "Nous avons cherché sur le site, il est fort probable qu'il se trouve à l'intérieur du module du télescope" a expliqué le directeur de l'agence.</p>
<p>Source <a href="http://www.legorafi.fr"></a></p>
<p>Copyright mon journal.</p>
<p><a href="contact.htm">Contactez nous</a>.</p>
Il convient d'ajouter des balises div pour mieux identifier les articles et les autres entités de la page :
<div>
<h1>Mon journal</h1>
<p>Le meilleur de l'actu en 2 articles</p>
</div>
<div>
<h2>L'ours bipolaire est désormais
une espèce en voie de disparition </h2>
<img src="WebFront101/ours.jpg" />
<p>Surnommé "l'instable du Grand Nord", l'ours bipolaire vient d'être ajouté à la liste rouge des espèces menacées par l'Union Internationale pour la Conservation de la Nature (UICN). A l'heure actuelle, il resterait moins de 300 spécimens de cette espèce qui survit dans les régions arctiques et dont le comportement parfois irrationnel joue contre sa préservation.</p>
<p>Source <a href="http://www.legorafi.fr"></a></p>
</div>
<div>
<h2>Satellite Gaia : un élève de troisième en stage
d'observation coincé à l'intérieur </h2>
<img src="WebFront101/satellite.jpg" />
<p>KOUROU (Guyane française) – Quelques heures après le lancement réussi du télescope GAIA, l'agence spatiale européenne a fait part de son inquiétude. Plusieurs élèves de classe de troisième en stage d'observation étaient présents ce matin pour assister au lancement, et lors d'un recompte il s'est avéré qu'il en manquait un. "Nous avons cherché sur le site, il est fort probable qu'il se trouve à l'intérieur du module du télescope" a expliqué le directeur de l'agence.</p>
<p>Source <a href="http://www.legorafi.fr"></a></p>
</div>
<div>
<p>Copyright mon journal.</p>
<p><a href="contact.htm">Contactez nous</a>.</p>
</div>
Classes et identifiants
Une fois la structure correcte, il est possible d'ajouter encore plus de précisions grace aux classes et aux identifiants.
- Chaque identifiant doit être unique dans la page, contrairement aux classes.
- Un élement peut avoir un seul identifiant mais peux avoir plusieurs classes.
<div id="entete" >
<h1>Mon journal</h1>
<p class="slogan" >Le meilleur de l'actu en 2 articles</p>
</div>
<div id="articleOursBipolaire" class="article nature" >
<h2>L'ours bipolaire est désormais
une espèce en voie de disparition </h2>
<img src="WebFront101/ours.jpg" />
<p class="contenu" >Surnommé "l'instable du Grand Nord", l'ours bipolaire vient d'être ajouté à la liste rouge des espèces menacées par l'Union Internationale pour la Conservation de la Nature (UICN). A l'heure actuelle, il resterait moins de 300 spécimens de cette espèce qui survit dans les régions arctiques et dont le comportement parfois irrationnel joue contre sa préservation.</p>
<p class="source" >Source <a href="http://www.legorafi.fr"></a></p>
</div>
<div id="articleSatelliteGaia" class="article science" >
<h2>Satellite Gaia : un élève de troisième en stage
d'observation coincé à l'intérieur </h2>
<img src="WebFront101/satellite.jpg" />
<p class="contenu" >KOUROU (Guyane française) – Quelques heures après le lancement réussi du télescope GAIA, l'agence spatiale européenne a fait part de son inquiétude. Plusieurs élèves de classe de troisième en stage d'observation étaient présents ce matin pour assister au lancement, et lors d'un recompte il s'est avéré qu'il en manquait un. "Nous avons cherché sur le site, il est fort probable qu'il se trouve à l'intérieur du module du télescope" a expliqué le directeur de l'agence.</p>
<p class="source" >Source <a href="http://www.legorafi.fr"></a></p>
</div>
<div id="piedDePage" >
<p>Copyright mon journal.</p>
<p><a href="contact.htm">Contactez nous</a>.</p>
</div>
Mise en pratique
Dans la liste de course, ajouter les balises div nécessaires, ainsi que les classes et identifiants suivants (sur les bons éléments !) :
- liste
- alcool
- sansalcool
- fruit
- legume
- fruitsEtLegumes
- boissons
- menu
Habillage avec CSS
Une fois la structure bien définie avec les balises HTML et leurs attributs, il est possible d'ajouter une (ou plusieurs) feuilles de style à notre document.
Il suffit de créer un fichier .css à côté du fichier html, et d'ajouter la balise dans le head :
<head>
...
<link rel="stylesheet" href="habillage.css" type="text/css" />
...
</head>
et d'ajouter dans le fichier CSS les déclarations pour habiller notre document :
body {
color: #333333;
font-size: 16px;
font-family: arial, sans-serif;
}
h1, h2, h3 {
color: black;
text-transform: uppercase;
}
Principe du CSS
- Le sélecteur permet de cibler les éléments dans le document.
- Les propriétés et valeurs permettent de définir l'habillage de ces éléments.
[SELECTEUR] {
[PROPRIETE]: [VALEUR];
}
A noter qu'un élément peut recevoir plusieurs styles avec plusieurs bloc de CSS.
Le sélecteur
- Pour viser les balises d'un type particulier : il suffit d'écrire son nom. Exemple: p.
- Pour viser les balises ayant une classe particulière : il suffit d'écrire le nom de la classe précédée d'un point.
Exemple: .article. - Pour viser les balises ayant un identifiant particulier : il suffit d'écrire le nom de l'identifiant précédé d'un dièse.
Exemple: #menu.
Il est possible de combiner les sélecteurs :
- Séparés par des virgules pour cumuler les éléments ("et"). Exemple h1, p, .article.
- Séparés par des espaces pour cibler l'enfant d'une hierarchie ("dans"). Exemple div .article h2.
Les propriétés
Il existe des centaines de propriétés et de valeurs CSS. Voici quelques propriétés communes :
Couleurs
- color : défini la couleur du texte. Exemple: color:red; ou color:#FF0000;
- background-color : défini la couleur de fond.
Exemple: background-color:red; ou background-color:#FF0000;
Définition de la couleur
Texte
- font-size : défini la taille du texte. Exemple: font-size:50px;
- font-family : défini la police du texte, séparé par des virgules.
Exemple: font-family: arial, tahoma, sans-serif; - letter-spacing : défini l'espacement des lettres. Exemple: letter-spacing: 10px;.
- text-align : défini l'alignement du texte. Exemple: text-align: center;.
Blocks
- border : défini la bordure d'un élément. Exemple: border: 1px solid black;
- margin : défini la marge d'un élément. Exemple: margin: 10px;
- padding : défini la marge interne d'un élément. Exemple: padding: 10px;
Mise en pratique
A partir de la structure HTML précédente, créer la feuille de style pour arriver à ce résultat :
