HyperText Markup Language

Une des trois inventions fondatrices du World Wide Web (avec HTTP et les URL)

Début du projet en 1989

Naissance du W3C et d'HTML en 1994 (Tim Berners-Lee)

Qu'est-ce que c'est ?

HTML est un langage de balisage

Il permet de structurer le contenu d'une page web

Il est composé d'éléments appelés balises

Chaque élément peut avoir des attributs

Structuration du code HTML

Le code HTML (souvent) composé de couple de balise (ouvrante + fermante)

Deux parties dans une page

• Partie head : les données destinées au traitement automatisé
• Partie body : le corps de la page

Exemple de code HTML

Quelques balises HTML

Balises de titre

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

Balises de contenu

<p> : paragraphe

<ul> : liste non ordonnée (avec des points)

<ol> : liste ordonnée (numérotée)

<li> : élément de liste

<img> : insertion d'images

<table> : tableaux

<a> : insertion d'hyperliens

Et le meilleur ami de tout développeur front...

<div> !

Conteneurs génériques pour grouper des éléments

Plusieurs autres conteneurs

<header>, <nav>, <main>, <footer> : pour structurer la page

<span> : bloc inline

<section>, <article> : section générique

Pourquoi plusieurs conteneurs ? Rendre le code plus lisible, comportement différent

Cascading Style Sheet

CSS sert à modifier l'apparence des pages Web

Une des trois inventions fondatrices du World Wide Web (avec HTTP et les URL)

Version publiée fin 1996

Plusieurs moyens d'insérer du code CSS

• dans l'élément HTML
• dans une balise style
• dans un fichier séparé

Écrire le code dans un fichier séparé est plus recommandé, car plus facilement maintenable

Structuration du code CSS

Types de sélecteurs

• sélecteur universel
• sélecteur de type
• sélecteur de classe
• sélecteur d'identifiant
• sélecteur d'attribut

Sélecteur universel

							* {
								margin: 0;
							}
						

Sélecteur de type

							p {
								font-size: 18px;
							}
						

Sélecteur de classe et d'identifiant

							.ma-classe {
								/* Mon code CSS */
							}

							#mon-id {
								/* Mon code CSS */
							}
						

Une classe est utilisable plusieurs fois, tandis qu'un ID n'est utilisé qu'une seule fois

Sélecteur d'attribut

							a[title] {
								color: purple;
							}
						

Cible les éléments en fonction de la présence d'un attribut donné

Ici, sélectionne les éléments a avec un attribut title

Pseudo-classe

Les pseudo-classes permettent de sélectionner un élément dans un état spécifique

							a {
								/* Mon code CSS */
							}

							a:hover {
								/* Mon code CSS exécuté au survol d'un hyperlien */
							}
						

Ils commencent toujours par ":"

Exemples de pseudo-classes

:hover : au survol d'un élément

:visited : pour un lien déjà visité

:focus : sur le focus d'un élément

:first-child : premier élément du noeud

:nth-of-type(fn) : n-ième élément du noeud selon la règle fn

Et beaucoup d'autres...

Pseudo-élément

Les pseudo-éléments permettent de sélectionner une partie d'un élément

							p {
								/* Mon code CSS */
							}

							p::first-letter {
								/* Mon code CSS exécuté sur la première lettre d'un élément */
							}
						

Ils commencent toujours par "::"

Exemples de pseudo-éléments

::first-line : première ligne

::first-letter : première lettre

::before : avant l'élément

::after : après l'élément

::selection : texte sélectionné

Et beaucoup d'autres...

Quelques propriétés CSS

Effets de couleur

Effets sur le texte

Position des éléments

Flex : design adaptatif à l'écran

Grid : position en grille

Variables CSS

Plus avancé, mais utile pour stocker des couleurs et les modifier d'un seul coup.

							* {
								--primary-color: #007bff;
								--secondary-color: #6c757d;
							}

							.ma-classe {
								color: var(--primary-color);
							}
						

JavaScript

Un langage de programmation pour rendre les pages web interactives

Première version publiée fin 1995

Langage plus complet, mais pas très utile pour le projet

Comment les trois technos interagissent

Imaginez... une porte

(ou n'importe quel autre objet)

HTML crée la porte

CSS lui donne une apparence

							porte {
								color: wooden;
							}
						

JavaScript lui ajoute des comportements

							porte = document.getElementById(portecouloir);
							[...]
						

Comment ça fonctionnent vraiment ?

Un site Web est un logiciel qui est exécuté par un navigateur

On donne un paquet d'HTML/CSS/JS à un navigateur, qui va l'afficher

→ Votre ordinateur ne fait que télécharger et afficher un logiciel

Peut-on parler de logiciel distribué ?

Oui, parfaitement.

Le front est un logiciel à part qui s'exécute dans votre navigateur (côté client)

Le back est aussi un logiciel, mais qui s'exécute chez l'hébergeur (côté serveur)

Et tout communique dans votre navigateur !