Première - HTML et CSS

Le langage HTML : structure d'une page WEB

Une histoire de balises...

HTML, pour HyperText Markup Language (langage de balisage d’hypertexte), est le langage standard utilisé pour créer et structurer les pages web. Il ne s’agit pas d’un langage de programmation, mais d’un langage de balisage qui permet d’organiser le contenu d’une page grâce à des balises, afin d’indiquer aux navigateurs comment afficher textes, images, liens, tableaux, formulaires, vidéos, etc...

Chaque élément de la page (titre, paragraphe, image, lien, etc.) est défini à l’aide de balises HTML, généralement présentées par paires (une balise ouvrante et une balise fermante), qui encapsulent le contenu concerné .

Par exemple, pour afficher un titre, on utilisera :

<h1>Titre</h1>

Pour définir un paragraphe de texte, ce sera plutôt :

<p>
Voici le contenu d'un paragraphe
</p>

Dans l'exemple ci-dessus, le texte est placé à l'intérieur de la balise <p>, et la fin du paragraphe est indiquée par une balise de fin, qui est similaire à la balise de début mais avec une barre oblique (</p>.) Il est courant d'indenter le contenu dans une balise de plusieurs lignes, mais il est également légal de placer des balises sur la même ligne :

<p>Voici le contenu d'un paragraphe sur une seule ligne</p>

Balises et attributs

Les balises sont parfois complétées par des attributs, qui sont des paires nom-valeur qui modifient le comportement d'une balise. Par exemple, la balise <img> (utilisée pour intégrer une image dans une page) comprend généralement les attributs suivants :

<img src="logo.jpg" alt="Ceci est un logo" />

La balise <img> est une balise orpheline : elle n'est pas suivie d'une balise </img> mais s'écrit <img />.

L'attribut src décrit le chemin vers le fichier image, et l'attribut alt décrit le texte alternatif qui est affiché si l'image n'est pas disponible.

Balises imbriquées

Les balises peuvent être (et sont souvent) imbriquées les unes dans les autres. Les balises ne peuvent pas se chevaucher, de sorte que <a><b></a></b> n'est pas légal, mais <a><b></b></a> l'est.

Un modèle de base

Le code suivant est le code minimal d'une page web :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Élement	Description
`<!DOCTYPE html>`	Il s'agit de la déclaration doctype ; ce doit être la toute première chose dans un document HTML, avant la balise `html`. La déclaration doctype n'est pas une balise HTML, il s'agit d'une instruction au navigateur web concernant la version de HTML dans laquelle la page est écrite.
`<html></html>`	Englobe la page entière
`<head></head>`	Contient des informations d'en-tête (métadonnées, styles CSS, code JavaScript)
`<title></title>`	Titre de la page normalement affiché dans la barre de titre et utilisé dans les résultats de recherche
`<body></body>`	Corps de la page, contenant toutes les parties de la page normalement visibles

Les principales balises HTML

En plus de ces balises essentielles, on retrouve souvent les balises suivantes :

Élement	Nom	Description
`<h1></h1>`	Titre 1	Titre principal
`<h2></h2>`	Titre 2	Titre secondaire. Il existe des titres jusqu'au niveau 6, mais les titres <h1> à <h3> sont les plus courants
`<p></p>`	Paragraphe	La majeure partie du corps d'une page doit être incluse dans des paragraphes.
`<div></div>`	Division	Semblable à un paragraphe, mais marque normalement une section d'une page. Les divisions contiennent généralement des paragraphes

Les pages WEB contiennent souvent des données présentées sous forme de listes, ou rangées dans une tableau.

Élement	Nom	Description
`<ul></ul>`	Liste non ordonnée	Généralement, les éléments de ces listes sont précédés d'un point noir
`<ol></ol>`	Liste ordonnée	Ces listes sont numérotées
`<li></li>`	Élément d'une liste	Utilisé aussi bien pour les listes ordonnées que non ordonnées
`<table></table>`	Tableau	Permet de définir le début et la fin d'un tableau
`<tr></tr>`	Ligne d'un tableau	Permet de définir une ligne dans un tableau. Chaque ligne est indiquée par une paire de <tr>.
`<td></td>`	Cellule d'un tableau	Permet d'écrire des données dans la cellule d'un tableau.Les balises <td> sont imbriquées dans les balises <tr> (elles même imbriquées dans la balise <table>)
`<th></th>`	Cellule titre	Indique d'une cellule est un titre (le contenu est alors mis en gras par défaut)

Exemples

<ol>
    <li>un</li>
    <li>deux</li>
    <li>trois</li>
</ol>


    un
    deux
    trois

Même si ce n'est pas indispensable, il est pratique d'indenter les balises imbriquées vers la droite, afin de gagner en lisibilité.

<ul>
    <li>English
    <ol>
        <li>One
        <li>Two
        <li>Three
    </ol>
    </li>
    <li>French
    <ol>
        <li>Un
        <li>Deux
        <li>Trois
    </ol>
    </li>
</ul>


English

One
Two
Three


French

Un
Deux
Trois

<table border=1 cellpadding=8>
    <tr>
        <th>English</th>
        <th>French</th>
    </tr>
    <tr>
        <td>One</td>
        <td>Un</td>
    </tr>
    <tr>
        <td>Two</td>
        <td>Deux</td>
    </tr>
</table>



English
French


One
Un


Two
Deux

English	French
One	Un
Two	Deux

On peut remarquer les deux attributs border=1 et cellpadding=8 de la balise <table> permettant respectivement de définir la taille de la bordure du tableau, ainsi que les marges intérieures des cellules.

Liens et images

Les liens et les images sont tous deux utilisés pour incorporer des ressources externes dans une page. Tous deux dépendent des URI (Universal Resource Indicators), communément appelés URL ou adresses.

Élement	Nom	Description
`<a></a>`	Lien	Permet de créer un lien vers une autre page WEB, avec l'attribut `href`.
`<img />`	Image	Utilisé pour afficher une image. Les formats valides sont .jpg, .png et .gif. Une image doit toujours être accompagnée d'un attribut `alt` décrivant son contenu.

Exemples

Voici <a href="https://python.dellasantina.corsica/">un lien</a> 
pour apprendre à coder en Python.

Voici un lien pour apprendre à coder en Python.

<img src="./cours_premiere/images/python-logo.png" alt="Logo Python" />

Les quelques balises présentées précédemment ne sont que la partie immergée de l'iceberg. Le but n'étant pas de se noyer dans une longue liste de balises pas forcément utiles au premier abord, nous arrêterons là pour ce cours.

Le langage CSS : mise en forme d'une page WEB

CSS, pour Cascading Style Sheets (feuilles de style en cascade), est un langage informatique utilisé pour décrire la présentation visuelle des documents HTML. Il permet de définir l'apparence des pages WEB: couleurs, polices, marges, positionnement des éléments, arrière-plans, etc... Contrairement au HTML, qui structure le contenu, CSS s'occupe exclusivement du style et de la mise en forme.

Fonctionnement de base

CSS fonctionne selon un système de règles : chaque règle cible un ou plusieurs éléments HTML grâce à un sélecteur, puis applique des propriétés de style avec des valeurs spécifiques.

p {
  color: red;
  font-size: 22px;
}

Grâce à l'instruction précédente, le contenu de chacune des balises <p> sera affiché en rouge, avec une taille de 22 pixels.

On peut cibler une balise ou un groupe de balises en utilisant des classes.

/* Code HTML */

<div>
    <p>Un premier paragraphe</p>
    <p class="important">Un second paragraphe</p>
    <p class="important">Un troisième paragraphe</p>
    <p>Un quatrième et dernier paragraphe</p>
</div>

/* Code CSS */

p.important {
    color: red;
    font-size: 22px;
}

Dans cet exemple, seuls les paragraphes possédant la classe important sont modifiés par le CSS.

Un premier paragraphe

Un second paragraphe

Un troisième paragraphe

Un quatrième et dernier paragraphe

Une balise HTML peut posséder plusieurs classes : il suffit de séparer les différentes classes par des espaces, comme par exemple <p class="gras souligne">.

Où écrire du CSS ?

Il y a 3 façons d'intégrer du code CSS dans une page WEB :

Directement dans la balise à l'aide de l'attribut style.

< p style="color:red;">Le contenu de mon paragraphe< /p>

Dans l'entête de la page (balise < head>) à l'aide de la balise < style>

< html>
< head>
    < style>
    p {
        color:red;
    }
    < /style>
< /head>
< body>
    < p>Le contenu de mon paragraphe< /p>
< /body>
< /html>

Dans un fichier .css séparé du code HTML, en utilisant la balise <link>

/* Fichier index.html */

< html>
< head>
    < link rel="stylesheet" href="style.css">
< /head>
< body>
    < p>Le contenu de mon paragraphe< /p>
< /body>
< /html>

/* Fichier style.css */

p {
    color: red;
}

Cette dernière façon de faire est la méthode recommandée pour séparer le contenu (HTML) et la présentation (CSS).

Les principales propriétés CSS

Pour mettre en forme nos pages WEB à l'aide de CSS, on dipose de propriétés, comme color. Voici les principales :

Type	Propriété CSS	Rôle	Exemple
Mise en forme du texte	`color`	Couleur du texte	color: red;
	`font-family`	Police de caractères	font-family: Arial, sans-serif;
	`font-size`	Taille du texte	font-size: 18px;
	`font-weight`	Épaisseur du texte	font-weight: bold;
	`text-align`	Alignement du texte	text-align: center;
	`text-decoration`	Décoration du texte	text-decoration: underline;
Espacement	`margin`	Marge extérieure	margin: 20px;
Espacement	`padding`	Marge intérieure	padding: 10px;
Mise en page	`width`	Largeur	width: 300px;
	`height`	Hauteur	height: 100px;
	`display`	Type d’affichage	display: flex;
	`position`	Positionnement	position: absolute;
	`overflow`	Gestion du débordement	overflow: auto;
	`z-index`	Ordre d’empilement	z-index: 10;
Bordures	`border`	Bordure	border: 1px solid #000;
Bordures	`border-radius`	Coins arrondis	border-radius: 8px;
Bordures et effets	`box-shadow`	Ombre portée	box-shadow: 2px 2px 5px #888;
Arrière-plan	`background-color`	Couleur de fond	background-color: #f0f0f0;
Arrière-plan	`background-image`	Image de fond	background-image: url('image.jpg');
Effets	`opacity`	Opacité	opacity: 0.8;
	`cursor`	Type de curseur	cursor: pointer;
	`transition`	Animation des changements	transition: all 0.3s;

Cette liste n'est bien entendu pas exhaustive ! Pour plus d'informations, on pourra se référer à la page suivante : https://developer.mozilla.org/fr/docs/Web/CSS/Reference

CSS et les couleurs

Les couleurs en CSS peuvent être définies de plusieurs manières. Voici les principaux formats et usages :

Format	Description	Exemple
`Nom`	CSS reconnaît plus de 140 couleurs nommées (par exemple : `red`, `blue`, `green`, `aqua`, `fuchsia`, etc.). Ces noms sont standards et garantissent un affichage identique sur tous les navigateurs.	`color: red;`
`RGB / RGBA`	`rgb(r, g, b)` : Définit la couleur en précisant la quantité de rouge, vert et bleu (valeurs de 0 à 255 ou en pourcentage). `rgba(r, g, b, a)` : Ajoute un canal alpha pour la transparence (a de 0 à 1).	`color: rgb(255, 0, 0);` `color: rgba(255, 0, 0, 0.5);`
`Hexadécimal (HEX)`	Le format hexadécimal commence par `#` suivi de six caractères héxadécimaux (de 0 à F), représentant les composantes rouge, verte et bleue de la couleur. (par exemple : `#FFA000` est équivalent à `rgb(255, 160, 0)`) . Ce format est très utilisé. On peut également se limiter 3 caractères héxadécimaux : il n'y a alors plus que 16 niveaux par couleur.	`color: #FF0000;` `color: #0A0;`

Envie de jouer avec les couleurs ? https://htmlcolorcodes.com/

Sommaire QCM