HyperText Markup Language
Introduction
Anonymiser sa navigation avec tor
Après cette présentation
- Le fonctionnement d'HTML tu comprendras
- Des applications modernes "SPA" créer tu voudras
- La différence entre HTML et SVG tu feras
- Des pages web simple construire tu pourras
- Le maniement de l'éditeur de code tu maîtrisera
- Un code HTML valide tu rendras
HTML : HYPERTEXT MARKUP LANGUAGE
-
Le langage le plus utilisé pour créer des pages web
depuis 1990 - la dernière version : HTML 5 celle que nous utiliserons
Le HTML ''Classique''
Voici comment fonctionne HTML depuis sa conception
- Requête : Le navigateur demande une page web au serveur
- Réponse : Le serveur envoie la page web au navigateur
- Le navigateur affiche la page web
Navigateur
Serveur
Requête
Réponse
single page application (spa)
Aujourd'hui l'utilisation peut être plus complexe
Navigateur
Serveur
Requête
Réponse
- Requête asynchrone : navigateur demande une partie de page
- Réponse asynchrone : serveur envoie la partie de page
- Le navigateur met à jour la partie de page concernée
- On recommence !
Requête asynchrone
Réponse asynchrone
- Requête : Le navigateur demande une page web au serveur
- Réponse : Le serveur envoie la page web au navigateur
- Le navigateur affiche la page web
Une alternative au HTML
Ci-dessous un exemple de page web de type SVG
<svg xmlns="http://www.w3.org/2000/svg">
<text x="10" y="30"
style="font-weight:bold; font-size:34">Ma page Web</text>
<text x="10" y="80"
style="font-size:34">Cette page est incroyable !</text>
</svg>Un autre exemple svg
C'est quoi le svg ???
- Scalable Vector Graphics | graphique vectoriel adaptable
- Format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML.
éditeur SVG - Inkscape
comparaison
- SVG - approche graphique, quelques librairies
- HTML - approche texte, une infinité de librairies
éléments html que nous allons étudier
| Structure de base | <html> <head> <body> |
| Entête <head> | <meta> <style> <link> <script> |
| Corps <body> | <h1> <p> |
cheatography
éléments html
On appelle les "commandes" HTML des éléments
Habituellement, un élément possède :
une
balise d'ouverture
et une
balise de fermeture
<p> . . . </p>
Il existe des exceptions que nous verrons plus tard
structure d'une page html
<!DOCTYPE html>
<html lang="fr"><head></head>... éléments de l'entête ...
<body></body>... éléments du contenu principal de la page ...
</html>Page HTML de base
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Une simple page web</title>
<meta name="author" content="Laure Dinateur">
</head>
<body>
<h1>Ma page web</h1>
<p>Cette page web est incroyable!</p>
</body>
</html>Afficher le code source d'une page
Ctrl-U (PC)
⌥⌘U (Mac Chrome, Safari) ou ⌘U (Mac Firefox)
inspecter une page web
Code de l'entête <heaD>
On place dans <head> des informations sur la page,
qui ne sont normalement pas visible.
<title>Une simple page web</title>
<meta name="author" content="Laure Dinateur">Visiblement il s'agit du titre et de l'auteur de la page web
Voyons les deux lignes dans <head>
Autres éléments utilisés dans <head>
<style>body{background-color: yellow;}</style>Style - que nous verrons plus tard
<link rel="stylesheet" href="style-de-la-mort-qui-tue.css"><meta charset="UTF-8">
<meta name="description" content="la page la plus belle de tout le net">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width" />Autres méta-informations
<script>
function darkVader() {
alert("Je suis ton père !");
}
</script>Scripts - oui, plus tard aussi
<script src="luke-skywalker.js"></script>attributs html
<meta name="author" content="Laure Dinateur">
<img src="laure.jpg">- Permettent de passer des paramètres à un élément
- Leur valeur doit être entourée de guillemets doubles
- Certains attributs n'ont pas de valeur
<input type="text" required ><h1> et <p>
<h1> - heading 1 - tire de niveau 1
<p> - paragraph - paragraphe
<h1>Ma page web</h1>
<p>Cette page web est incroyable!</p>
Voyons ce qu'on a dans le contenu principal
Sémentique
éditeurs html WYSIWYG
- Il existe des centaines d'éditeurs WYSIWYG
- Ils fournissent des IHM qui nous aident a créer du code
- Ils facilitent l'apprentissage de nouveaux langages
What You See Is What You Get
Exemple TinyMCE
Editeur de code
- Coloration syntaxique
- Auto-complétion
- Indentation automatique
- Raccourcis
- Rechercher / remplacer
- ...
Pour commencer nous utiliserons : www.sublimetext.com
Exercice - première page
- Créer un répertoire "intro-html-css"
- Créer un fichier "base.html" et l'ouvrir dans Sublime Text
- Copier/coller le code HTML de base ci-dessous dans "base.html"
- Personnaliser le titre, l'auteur et le contenu de la page
- Sauvegarder la page et l'ouvrir dans le navigateur
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Une simple page web</title>
<meta name="author" content="Laure Dinateur">
</head>
<body>
<h1>Ma page web</h1>
<p>Cette page web est incroyable!</p>
</body>
</html>Raccourcis
- CTRL + C pour copier
- CTRL + V pour coller
- CTRL + X pour couper
- CTRL + S pour sauvegarder
- ALT + TAB pour passer d'une app à une autre
- F5 pour rafraîchir le navigateur
valider son code html
- by URI : Valider en entrant l'adresse d'une page web
- by File Upload : Valider en envoyant une fichier HTML
- by Direct Input : Valider en collant son code HTML
valider l'accessibilité
<meta charset="UTF-8">code de qualité
- Nom des fichiers HTML
- pas de caractères spéciaux
- tout en minuscule
- séparer les mots-clés avec des tirets
- KO : "Ma page de contact.html"
- OK : "page-contact.html"
- Indentation et aération
- indenter avec 4 espaces
- pas de tabulations
- Ne pas dépasser les 80 caractères par ligne de code
exercice - 'petit cv'
Éléments HTML à utiliser
<h1> <h2> <h3>
<p> <br> <hr> <img>
<ul> <ol> <li>
Référence de tous les éléments HTML :
https://developer.mozilla.org
101 - 02 - HTML - Introduction
By Steve Fallet
