1 - La session
1.1 - Notions de base
1.1.1 Le HTML - Définition
Le HTML, HyperText Markup Language (langage de balisage hypertexte) est un langage de balisage.
1.1.2 - Les balises
Les balises servent à indiquer au navigateur la structure de la page, spécifient certaines mises en forme et intègrent certains éléments.
Il existe deux types de balises :
- Les balises ouvrantes/fermantes telles que <div></div>
- Les balises orphelines (qui n'ont pas besoin de balise fermante) telles que <img src="">
1.1.3 - Regarder le code source d'une page web
Afin d'inspecter le code source d'une page web, il suffit de faire un clic droit sur la page et de sélectionner "Inspecter" pour faire apparaître le moniteur (ou "Code source de la page" pour afficher le code source dans une nouvelle fenêtre, sur Mozilla Firefox).
1.1.4 - L'éditeur de code
Pour la durée de la formation, Visual Studio Code sera utilisé pour la réalisation des documents web.
Retour au sommaire1.2 - Création d'une page web en HTML
1.2.1 Déclarations et en-tête
1.2.1.2 - Déclaration du format HTML
La première ligne du document doit contenir la balise <!DOCTYPE html>. Ce préambule indique au navigateur le rendu à adopter et les spécifications qu'il va rencontrer.
1.2.1.3 - La racine du document et la langue utilisée
La balise <html> est le premier élément du document, l'élément racine. Les éléments suivants en seront les descendants. On y intègre l'attribut lang destiné aux lecteurs d'écran. La balise fermante </html> sera la dernière balise du document.
1.2.1.3 - L'en-tête
L'en-tête est inséré dans la balise <head></head>. Son contenu ne sera pas affiché sur la page web directement. Il contient toutes les informations concernant la page web récupérées par les machines, parmi lesquelles :
L'encodage des caractères
<meta charset="UTF-8"> permet au navigateur d'afficher les caractères utilisés dans la page, UTF-8 est l'encodage utilisé dans les sites européens. C'est une balise orpheline (qui ne se ferme pas).
Le titre du document
<title></title> donnera le nom à l'onglet mais aussi l'en-tête du résultat des moteurs de recherche
La description du document
<meta name="description" content="Description du site dans les moteurs de recherche">
1.2.2 - Le corps de la page
1.2.2.1 - La balise <body></body>
La balise <body></body> contient tous les éléments qui seront affichés pour l'utilisateur.
1.2.2.2 - Les titres
La balise titre <h1></h1> encadre du contenu qui sera formaté en fonction du numéro utilisé (de 1 à 6). Il représente un niveau d'importance de titre. L'usage veut que l'on utilise un nombre maximum de balises d'un niveau correspondant au niveau indiqué (1 titre h1 maximum, 2 h2, jusqu'à 6 titres en h6). Le titre h1 est censé représenter et contenir le titre de la page.
Titre en h1
Titre en h2
Titre en h3
Titre en h4
Titre en h5
Titre en h6
1.2.2.3 - Les paragraphes
La balise <p></p> affiche le texte non-formaté.
Retour au sommaire1.3 - Autres aspects
1.3.1 - Balises de mise en forme du texte
<b>Texte en gras</b> ou <strong>Texte en gras</strong>
<i>Texte en italique</i>
<u>Texte souligné</u>
Texte en <sup>Exposant</sup>
1.3.2 - Les liens
Les liens sont spécifiés à l'intérieur des balises d'ancrage <a href=""></a>
1.3.2.1 - Lien vers une page interne
<a href="dossier/page1.html">Cliquer sur ce texte redirigera vers la page1</a>
1.3.2.2 - Lien vers une page externe
<a href="https://www.site.fr">Cliquer sur ce texte redirigera vers le site</a>
1.3.2.3 - Lien vers une ancre
L'ancre permet d'identifier un élément précis de la page. Elle doit être déclarée à l'aide d'un identifiant (id) unique à l'intérieur d'une balise.
1.3.2.4 - Lien vers une adresse email
<a href="mailto:adresse@domaine.extension">Ouvre une fenêtre de rédaction d'email (en fonction des réglages du système d'exploitation) avec adresse@domaine.extension comme destinataire.</a>
1.3.2.5 - Lien vers un numéro de téléphone
<a href="tel:2922355644">Lance un appel (en fonction des réglages du système d'exploitation)</a>
1.3.3 - Les listes
Une liste est constituée d'au moins un type de liste et d'un élément dans la liste.
1.3.3.1 - Liste ordonnée
Liste ordonnée <ol></ol> (oredered list) permet de dresser une liste numérotée d'éléments <li></li>
<li>Élément 1</li>
<li>Élément 2</li>
</ol>
- Élément 1
- Élément 2
1.3.3.2 - Liste non-ordonnée
Liste non-ordonnée <ul></ul> (unoredered list) permet de dresser une liste d'éléments <li></li> précédés de puces.
<li>Élément 3</li>
<li>Élément 4</li>
</ul>
- Élément 1
- Élément 2
1.3.3.3 - Listes imbriquées
Il est possible d'imbriquer des listes dans d'autres listes.
<li>Élément 1</li>
<ol>
<li>Élément 1.1</li>
<li>Élément 1.2</li>
</ol>
<li>Élément 2</li>
</ul>
- Élément 1
- Élément 1.1
- Élément 1.2
- Élément 2
1.3.4 - Ajout d'image
La balise orpheline <img src="" alt="">permet d'afficher une image dans la page. L'attribut src (source) contient le chemin qui permet d'accéder au fichier de l'image, l'attribut alt (alternative text) contient le texte affiché si l'image ne parvient pas à être affiché (c'est aussi le texte qui sera lu par un robot de moteur de recherche ou par un lecteur d'écran)
Retour au sommaire
2 - Les exercices
Listes et liens
Consignes : Réaliser 3 pages contenant une liste ordonnée et une liste non-ordonnée contenant les liens renvoyant vers chacune des trois pages.
Résultat : Concluant (cette page est déjà bien assez illisible comme ça, non ?)
Reproduction d'un document PDF en HTML
Consignes : "Représenter cette page en HTML, mettre un lien sur le mot HTML (rouge) qui renvoi sur une
deuxième page. Le nom de cette page devra être index.html
Représenter ensuite la deuxième page en HTML, mettre un lien sur le mot <retour page web
(rouge) qui renvoi sur la première page. Le nom de cette page devra être page2.html"
Résultat : Concluant (un lien sera peut-être disponible à l'avenir...)
Retour au sommaire3 - Faits d'hiver
Petite rubrique visant à relater des faits qui n'ont pas de rapport direct avec le cours, mais pas que...
"J" a triché !
Oui, il y a parfois des gens qui se croient tout permis. Passant outre les consignes, faisant preuve d'un zèle hors du commun, une personne que nous appellerons "J" a pris la liberté de targuer son code HTML d'un attribut de style, d'utiliser un langage autre que HTML ! En effet, il est possible de mettre en forme les éléments HTML à l'aide d'attributs en CSS. Ainsi, un élément normalement <span>en noir</span> sera coloré en <span style="color: red">rouge</span> (ou autre couleur) grâce à l'attribut de style "color: red".
On applaudit chaleureusement "J" pour ce spoiler !
"C" : le code est dans le pré
Premier jour ne veut pas dire commencer en douceur... Parmi les nombreuses choses apprises aujourd'hui, il en est une digne de cette rubrique.
Non content d'être un formateur, un développeur, ainsi qu'un chef d'entreprise très occupé, Monsieur "C" est aussi un épicurien, un poète, un amoureux de la nature pour qui les petites frimousses à sabots sus-incrémentées représentent un objectif d'acquisition. Vous avez bien lu : en vue d'étoffer sa collection de soldats à plumes et à poils et pour mieux envahir ses champs de bétail, "C" souhaite enrôler ce type de recrues dans sa future ferme pédagogique.
Chapeau !
Déjà le jour 5
Le temps passe vite, cette page est enfin "terminée". Plus que au moins un jour de plus (mais ce n'est pas déjà pour demain) et une page d'accueil potable avant le "déploiement".