RAPPELS DE B1
Qu'avez vous retenu de la première année d'intégration ?
Balises de l'en-tête
Balises de l'en-tête
Balises multimédias
Balises multimédias
Balises de formulaire
Balises de formulaire
< form > pour indiquer que ce qui est dedans sera lié au formulaire, < input > qui sont les champs de saisie de base, < textarea > pour une zone de texte multilignes, ou encore < select > et < option > pour créer une liste déroulante.
Balises de liaison
Balises de liaison
Le code est directement intégré à la page de structure HTML.La balise < link > permet de créer un lien vers d'autres ressources (CSS/JS/PHP/images etc...). C'est grace a cette balise que l'on peut séparer les fichiers de codes en fichiers dédiés.
Attributs
Attributs
- Class : Permet de cibler un élément (CSS / JS) et de regrouper ces éléments
- ID : Permet de cibler précisément un élément car un ID est unique sur une page
- Attributs : Les attributs regroupent tout les éléments que l'on rajoute à une balise (y compris les classes et les ID). On en utilise parfois sans s'en rendre compte comme : title / alt / href ou src
Extensions utiles VSCode
Extensions de base
Extensions dev et IA
HTML / CSS
Coder pour optimiser son site
La sémantique HTML
Introduction
Dans le contexte du HTML, la sémantique concerne l'utilisation d'éléments (balises) qui transmettent clairement la signification de la section de contenu qu'ils encadrent. Au lieu de simplement décrire la présentation, les éléments sémantiques décrivent le type de contenu.
Exemple : en utilisant la balise <article>, on indique que le contenu encadré est un article autonome
Balises de section
Cette balise est utilisée pour définir l’en-tête ou la partie supérieure d’une section spécifique dans une page web. Chaque section d’une page peut avoir son propre en-tête, ce qui contribue à la structure sémantique de la page.
Les balises <header> et <head> sont deux éléments distincts en HTML et servent à des fins différentes dans la structure d’une page web.
<header>
<img decoding="async" src="logo.png" alt="Logo de mon site">
<h1>Titre de Mon Site Web</h1>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">À Propos</a></li>
</ul>
</nav>
</header>
Cette balise est utilisée pour définir la navigation principale de la page, généralement sous forme de menus ou de liens vers différentes sections du site.
Elle se place généralement dans le header du site. L’utilisation appropriée de balises HTML comme < nav > aide à donner une structure sémantique à votre page web, ce qui est important pour l’accessibilité et le référencement.
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">À Propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Cette balise englobe le contenu principal de la page, c’est-à-dire le contenu central et le plus important :
-
Contenu central
La balise <main> est utilisée pour entourer le contenu central et principal de la page, tel que le texte principal, les images ou d'autres éléments importants qui constituent le cœur de la page.
-
Accessibilité
L'utilisation de la balise <main> aide à améliorer l'accessibilité, car elle permet aux technologies d'assistance et aux lecteurs d'écran de comprendre immédiatement où se trouve le contenu principal de la page.
-
Utilisation unique
Il est recommandé de n'utiliser la balise <main> qu'une seule fois par page. Elle doit englober le contenu qui est spécifique à la page et qui en constitue le contenu principal.
<main>
<h1>Titre Principal</h1>
<p>Ceci est le contenu principal de la page...</p>
<img decoding="async" src="image.jpg" alt="Une image représentant le sujet principal">
</main>
Cette balise est utilisée pour définir le contenu complémentaire ou accessoire à l’article principal. Il peut contenir des informations contextuelles, des publicités, des liens connexes, etc.
La bonne utilisation de cette balise peut aider les moteurs de recherche à mieux comprendre le contenu de la page.
<aside>
<h3>Articles connexes</h3>
<ul>
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Article 3</a></li>
</ul>
</aside>
Cette balise représente une section générique d’une page.
-
Segmentation du contenu
La balise <section> est utilisée pour définir des sections indépendantes de contenu, chacune ayant un sens ou un sujet distinct. Elle peut être utilisée pour diviser le contenu en chapitres, sujets, articles, etc.
-
Sémantique
L'utilisation de la balise <section> renforce la sémantique de la page en indiquant que le contenu englobé a une signification cohérente en lui-même.
-
En-tête de section
Il est courant d'utiliser la balise <header> à l'intérieur de <section> pour ajouter un en-tête décrivant le contenu de la section.
-
Organisation
L'utilisation de <section> facilite la mise en forme du contenu en appliquant des styles CSS spécifiques à chaque section.
<section>
<h2>Section d'introduction</h2>
<p>Cette section contient du texte d'introduction.</p>
</section>
<section>
<h2>Section de contenu principal</h2>
<header>
<h3>En-tête de la section de contenu principal</h3>
</header>
<p>Ceci est le contenu principal de la section.</p>
</section>
La balise <article> est utilisée pour encapsuler un contenu autonome qui peut être distribué ou réutilisé indépendamment. Par exemple, un article de blog, une actualité, un commentaire, etc.
Comme on s’en doute, cette balise permet d’indiquer un article aux moteurs de recherches et aux moteurs de lecteurs d’écran de comprendre qu’il s’agit d’un contenu à lire.
<aside>
<h3>Articles connexes</h3>
<ul>
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Article 3</a></li>
</ul>
</aside>
Balises de contenus
<hN>
-
<h1>
C'est le titre principal d'une page ou d'une section. Il devrait y avoir idéalement un seul <h1> par page pour des raisons de référencement (SEO) et d'accessibilité.
-
<h2>
Utilisé pour les sous-titres ou les titres de sections principales sous le <h1>.
-
<h3>
Représente les sous-sections des sections <h3>
-
<h4>, <h5>, <h6>
Ces balises définissent des niveaux de sous-sections encore plus détaillés. Dans la pratique, <h4> à <h6> sont moins couramment utilisés que <h1> à <h3>, car la plupart des documents n'ont pas besoin d'une telle granularité dans la structuration.
Il est important de noter que l’utilisation de ces balises ne devrait pas être basée sur l’apparence visuelle (par exemple, choisir une balise parce qu’elle a la taille de police souhaitée), mais plutôt sur la structure et la hiérarchie du contenu. Les styles visuels peuvent être ajustés avec CSS.
<body>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h3></h3>
<h4></h4>
<h2></h2>
<h3></h3>
<h3></h3>
<script>(()=>{class RocketElementorPreload{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}t(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this.i(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach((t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this.o(t)}catch(t){}}))}o(t){const e=JSON.parse(t.dataset.settings),i=e.m||e.animation_delay||0,n=e[this.animationSettingKeys.find((t=>e[t]))];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let o=setTimeout((()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this.l(t,e)}),i);window.addEventListener("rocket-startLoading",(function(){clearTimeout(o)}))}i(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach((t=>{e.forEach((e=>{i.push(t+e)}))})),i}l(t,e){this.i().forEach((t=>delete e[t])),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorPreload;requestAnimationFrame(t.t.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorPreload.run)})();</script></body>
<p>
Cette balise est utilisée pour définir un paragraphe de texte. Elle est essentielle pour organiser le contenu d’une page web en sections lisibles. Chaque fois que vous fermez une balise <p>, un espace est automatiquement inséré avant le prochain élément ou le prochain paragraphe, ce qui aide à séparer visuellement les blocs de texte.
En réalité il s’agit d’une marge appliquée automatiquement. Il est possible de la supprimer ou la modifier via la propriété CSS ‘margin‘ appliquée sur l’élément <p>
<body>
<p>Ceci est un exemple de paragraphe. Il contient quelques phrases pour
illustrer comment le texte est structuré.</p>
<p>Voici un autre paragraphe. Comme vous pouvez le voir, il est séparé
du précédent par un espace automatique.</p>
</body>
<ul> / <li>
<ul> est utilisée pour créer des listes non-ordonnées (à puces). Les éléments de liste sont marqués avec la balise <li>, qui représente chaque élément de la liste.
<ol> / <li>
<ol> est utilisée pour créer des listes ordonnées (numérotées). De la même manière que pour les listes non-ordonnées, les éléments de liste sont définis avec la balise <li>.
<ol>
<li>Pomme</li>
<li>Banane</li>
<li>Cerise</li>
<li>Orange</li>
</ol>
<ul>
<li>Pomme</li>
<li>Banane</li>
<li>Cerise</li>
<li>Orange</li>
</ul>
Balises de mise en forme
<em>
Utilisée pour mettre en emphase ou en italique le texte. Cela indique que le texte a une signification différente ou spéciale dans le contexte.
<p>Il est <em>essentiel</em> de boire suffisamment d'eau chaque jour.</p>
Il est essentiel de boire suffisamment d’eau chaque jour
<strong>
Cette balise est utilisée pour mettre en évidence ou en gras le texte. Elle indique que le texte est d’une importance particulière, souvent utilisée pour des mots-clés ou des informations vitales.
<p>Il est <strong>crucial</strong> de suivre les instructions pour garantir
la sécurité.</p>
Il est crucial de suivre les instructions pour garantir la sécurité
<mark>
Cette balise permet de surligner un texte pour le mettre en évidence visuellement. Elle est souvent utilisée pour indiquer des parties spécifiques d’un texte qui doivent attirer l’attention.
<p>La <mark>photosynthèse</mark> est le processus
par lequel les plantes vertes ...</p>
<code>
Utilisée pour encadrer un fragment de code, cette balise indique que le texte à l’intérieur est une représentation de code source. Le texte peut apparaître avec une police à largeur fixe pour le différencier du texte normal.
C’est cet élément qui est utilisé depuis le début de la page pour te présenter le code d’exemple !
<code>Ceci est une balise code affichée par une balise code ! #codeception</code>
Optimiser l'écriture du HTML
Il existe des fonctionnalités dans VSCode pour améliorer et accélérer notre écriture du HTML lorsque l’on commence a maîtriser le langage.
-
Emmet
Enorme boite a outils pour développeurs ... directement intégré à VS Code ! Il se présente sous la forme de syntaxe particulière à écrire pour accélérer la création de notre page
“!” puis Entrée => Insère toute la partie DOCTYPE
! =>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
“balise” + “:” => Insère la balise voulue avec en lien le fichier que vous séléctionnerez
link:css =>
“balise” + “>” + balise => insère la hiérarchie de balises voulue
section>ul>li>a =>
<section>
<ul>
<li><a href=""></a></li>
</ul>
</section>
Mettre en page son fichier HTML
-
Prettier
Plugin permettant de mettre en page tout ou partie d'un fichier HTML , CSS etc ... . Il se base sur l'ouverture et la fermeture des balises , attention a bein structure son fichier !
Lorsque l’on tape un fichier HTML il est parfois intéressant de ne pas trop porter attention aux indentations et autres mise en page. Il est possible de le faire en une fois de manière automatisé.
Sélectionnes le code a mettre en page et utilise la raccourci clavier : Alt + Maj + F / Option + Maj + F
<!DOCTYPE html>
<html>
<head>
<title>Exemple HTML Non Indenté</title>
</head>
<body>
<h1>Ceci est un exemple de code HTML
non indenté.</h1>
<p>Ce code n'est pas correctement
formaté en termes d'indentation,
ce qui le rend moins lisible.</p>
<ul>
<li>Liste d'éléments non indentée.</li>
<li>Pas de sauts de ligne ni d'espaces
pour structurer le code.</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Exemple HTML Indenté</title>
</head>
<body>
<h1>Ceci est un exemple de code HTML
correctement indenté.</h1>
<p>Ce code est maintenant formaté avec
une indentation appropriée, ce qui le
rend plus lisible.</p>
<ul>
<li>Liste d'éléments indentée.</li>
<li>Les sauts de ligne et l'espacement
structurent le code.</li>
</ul>
</body>
</html>
