Table des matières du langage de programmation HTML

1. Prérequis

1.1 Gestionnaire de Version (Git)

Maîtrise de Git pour la gestion du code source, le suivi des modifications et la collaboration avec d'autres développeurs.

2. Introduction au HTML

2.1 Qu'est-ce que HTML

HTML, ou HyperText Markup Language, est le langage standard utilisé pour créer et structurer des pages web. Il définit la structure du contenu web en utilisant des balises pour décrire des éléments tels que les titres, les paragraphes, les liens, les images, et plus encore.

2.2 À quelles fins peut-on utiliser HTML ?

HTML est utilisé pour structurer et présenter le contenu web dans divers contextes :

Création de Pages Web : Structuration du texte et des médias sur une page web en utilisant des balises comme <h1>, <p>, <img>, etc.
Développement d'Interfaces Utilisateur : Création de formulaires et d'interfaces interactives pour les utilisateurs avec des éléments comme <form>, <input>, <button>, etc.
Accessibilité et SEO : Utilisation de balises sémantiques pour améliorer l'accessibilité du contenu et le référencement dans les moteurs de recherche.
Intégration de Médias : Inclusion d'images, de vidéos, et d'autres types de médias en utilisant des balises comme <img> et <video>.

2.3 Avertissement concernant HTML

Bien que HTML soit relativement simple, une mauvaise utilisation des balises et des attributs peut entraîner des problèmes d'accessibilité et de compatibilité entre différents navigateurs. Assurez-vous de suivre les bonnes pratiques pour créer un contenu web valide et accessible.

3. Installation de HTML

3.1 Création d'un Document HTML

Il n'est pas nécessaire d'installer quoi que ce soit pour utiliser HTML. Vous pouvez créer un fichier HTML en utilisant n'importe quel éditeur de texte et le visualiser dans un navigateur web.

index.htmlVoici un exemple de structure de base d'un fichier HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Premier Document HTML</title>
</head>
<body>
    <h1>Bonjour, le Monde !</h1>
    <p>Ceci est un paragraphe dans un document HTML.</p>
</body>
</html>

3.2 Structure d’un Projet HTML

Organiser la structure de votre projet HTML est essentiel pour garantir un développement propre et efficace. En structurant les dossiers comme dans l'exemple, vous séparez clairement les différentes parties de votre projet : les fichiers publics, les composants réutilisables, les pages spécifiques, les styles, les scripts, et les ressources multimédias. Cette organisation permet une meilleure lisibilité du code, facilite la maintenance, et rend la collaboration avec d'autres développeurs plus simple et structurée. Cela vous aide également à garder une vue d'ensemble sur le projet, même à mesure qu'il devient plus complexe.

Structure du Projet
mon-projet/
│
├── public/
│   ├── index.html
│   ├── favicon.ico
│   ├── apple-touch-icon.png 
│   ├── favicon.svg.png 
│   ├── robots.txt
│   ├── sitemap.xml
│   └── manifest.json
│
├── src/
│   ├── components/
│   │   ├── Header.html
│   │   ├── Footer.html
│   │   └── Sidebar.html
│   │
│   ├── pages/
│   │   ├── Home.html
│   │   ├── About.html
│   │   └── Contact.html
│   │
│   ├── styles/
│   │   ├── main.css
│   │   └── components.css
│   │
│   ├── scripts/
│   │   ├── main.js
│   │   └── utils.js
│   │
│   └── assets/
│       ├── images/
│       │   ├── logo.png
│       │   └── background.jpg
│       └── fonts/
│           └── custom-font.woff
│
├── build/
│   └── (fichiers construits lors de la compilation)
│
└── node_modules/
    └── (dépendances du projet)

4. Déclarations et Structuration en HTML

4.1 Les Éléments HTML

Les éléments HTML sont constitués de balises qui définissent le type de contenu. Voici quelques exemples courants :

Déclaration de Type de Document : <!DOCTYPE>
Balises de Structure : <html>, <head>, <body>
Balises de Métadonnées : <meta>, <title>, <link>
Balises de Contenu : <h1> à <h6>, <p>, <a>, <img>
Balises de Liste : <ul>, <ol>, <li>
Balises de Table : <table>, <tr>, <td>, <th>, <thead>
Balises de Formulaire : <form>, <input>, <button>
Balises de Conteneur : <div>, <span>
Balises Sémantiques : <header>, <footer>, <article>, <section>, <nav>
Balises de Script : <script>, <noscript>, <template>
Balises Multimédias : <audio>, <video>, <source>

4.2 Attributs HTML

Les attributs fournissent des informations supplémentaires sur les éléments HTML. Par exemple :

index.htmlExemple d'utilisation d'attributs dans une balise
<a href="https://www.example.com" target="_blank">Visitez notre site</a>

Ici, 'href' est l'attribut pour spécifier l'URL, et 'target' est utilisé pour ouvrir le lien dans un nouvel onglet.

Attributs Globaux : class, id, style, title, data-*, hidden, accesskey, tabindex, draggable, translate, role, aria-*
Attributs de Métadonnées : charset, name, content, http-equiv, viewport, base
Attributs de Contenu : lang, dir, contenteditable, spellcheck, alt
Attributs de Formulaire : action, method, name, placeholder, value, type, disabled, readonly, required, autocomplete, min, max, step, multiple, pattern, form, enctype, aria-required
Attributs de Liste : type, start, reversed
Attributs de Table : colspan, rowspan, headers, scope, border, cellpadding, cellspacing
Attributs de Lien : href, rel, target, type, hreflang, media
Attributs de Script : src, async, defer, type, integrity, crossorigin
Attributs Multimédias : src, alt, controls, autoplay, loop, poster, preload, muted, playsinline

5. Éléments HTML

5.1 Structure Minimale d'un Fichier HTML

Exemple de Structure de Base<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Titre de la Page</title>
  </head>
  <body>
    <!-- Contenu de la Page -->
  </body>
</html>

Pour qu'un fichier HTML soit valide et correctement interprété par les navigateurs, il est essentiel d'inclure au moins les éléments suivants :

<!doctype html> : Déclaration du type de document HTML5.
<html> : Élément racine du document.
<head> : Contient les métadonnées, comme le jeu de caractères et le titre de la page.
<body> : Contient le contenu visible de la page.

5.2 Head

5.2.1 Head - Base

Exemple<meta charset="UTF-8"> 
<link rel="icon" href="/favicon.ico"> 
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> 
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="manifest" href="manifest.json"> 
<link rel="sitemap" href="sitemap.xml" type="application/xml"> 
<link rel="canonical" href="https://www.harmonyfidelis.com/"> 
<meta name="robots" content="index,follow"> 
<title>Titre de la page</title> 
<meta name="description" content="Description du site en 160 caractères max."> 
<meta name="author" content="Nom de l'auteur"> 
<meta name="language" content="fr"> 
<meta name="copyright" content="Copyright propriétaire">

Les métadonnées essentielles dans la section <head> sont :

<meta charset="UTF-8"> : Définit l'encodage des caractères du document en UTF-8, garantissant la compatibilité avec les caractères internationaux.
<link rel="icon"> : Spécifie l'icône du site affichée dans l'onglet du navigateur. Peut inclure différents formats comme ICO et SVG.
<link rel="apple-touch-icon"> : Définit l'icône utilisée lorsque le site est ajouté à l'écran d'accueil sur les appareils Apple.
<meta name="viewport"> : Configure la vue pour les appareils mobiles, assurant une mise en page responsive.
<link rel="manifest"> : Spécifie le fichier de manifeste pour les applications web progressives (PWA), contenant des informations sur l'application.
<link rel="sitemap"> : Fournit l'emplacement du plan du site XML, utile pour les moteurs de recherche.
<link rel="canonical"> : Indique l'URL canonique de la page pour éviter le contenu dupliqué.
<meta name="robots"> : Donne des directives aux moteurs de recherche sur l'indexation et le suivi des liens de la page.
<title> : Définit le titre de la page, affiché dans l'onglet du navigateur et utilisé pour le référencement.
<meta name="description"> : Fournit une brève description du contenu de la page pour les moteurs de recherche et les aperçus.
<meta name="author"> : Spécifie l'auteur du document.
<meta name="language"> : Indique la langue principale du document.
<meta name="copyright"> : Indique les informations de droit d'auteur pour le contenu de la page.

5.2.2 Head - Social media

Exemple<meta property="og:title" content="A Basic HTML5 Template"> 
<meta name="twitter:card" content="summary_large_image"> 
<meta property="og:type" content="website"> 
<meta property="og:url" content="https://www.harmonyfidelis.com/"> 
<meta property="og:description" content="description de votre site en 160 caractères max"> 
<meta property="og:image" content="image.png"> 
<meta property="og:image:type" content="image/png"> 
<meta property="og:image:width" content="400"> 
<meta property="og:image:height" content="300"> 
<meta property="og:image:alt" content="description de l'image"> 
<meta property="og:locale" content="fr_FR"> 
<meta name="twitter:site" content="https://twitter.com/website"> 
<meta name="twitter:creator" content="https://twitter.com/SalettesJ"> 
<meta property="og:video" content="video.mp4"> 
<meta property="og:video:type" content="video/mp4"> 
<meta property="og:video:width" content="640"> 
<meta property="og:video:height" content="360"> 
<meta property="og:audio" content="audio.mp3"> 
<meta property="og:audio:type" content="audio/mpeg">

Les métadonnées pour les réseaux sociaux, la vidéo et la musique dans la section <head> sont :

<meta name="twitter:card" content="summary_large_image"> : Définir le type de carte Twitter pour les aperçus de liens partagés sur Twitter.
<meta property="og:title"> : Titre de la page pour les aperçus sociaux.
<meta property="og:type"> : Type de contenu (par exemple, "website").
<meta property="og:url"> : URL de la page.
<meta property="og:description"> : Description du contenu, jusqu'à 160 caractères.
<meta property="og:image"> : URL de l'image à utiliser pour l'aperçu.
<meta property="og:image:type"> : Type MIME de l'image.
<meta property="og:image:width"> : Largeur de l'image.
<meta property="og:image:height"> : Hauteur de l'image.
<meta property="og:image:alt"> : Texte alternatif pour l'image.
<meta property="og:locale"> : Locale du contenu (par exemple, "fr_FR").
<meta name="twitter:site"> : URL du compte Twitter associé au site.
<meta name="twitter:creator"> : URL du compte Twitter de l'auteur.
<meta property="og:video"> : URL de la vidéo à utiliser pour l'aperçu.
<meta property="og:video:type"> : Type MIME de la vidéo.
<meta property="og:video:width"> : Largeur de la vidéo.
<meta property="og:video:height"> : Hauteur de la vidéo.
<meta property="og:audio"> : URL de l'audio à utiliser pour l'aperçu.
<meta property="og:audio:type"> : Type MIME de l'audio.

5.2.3 Head - Sécurité

Exemple<meta name="distribution" content="global"> 
<meta name="rating" content="general"> 
<meta http-equiv="pics-label" content="neutral"> 
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; object-src 'none';"> 
<meta http-equiv="X-Frame-Options" content="DENY"> 
<meta http-equiv="X-XSS-Protection" content="1; mode=block"> 
<meta http-equiv="Strict-Transport-Security" content="max-age=31536000; includeSubDomains; preload">

Les métadonnées essentielles pour la sécurité dans la section <head> sont :

<meta name="distribution"> : Contrôle de la distribution du site.
<meta name="rating"> : Définit le public ciblé (général, adulte, etc.).
<meta http-equiv="pics-label"> : Filtrage du contenu selon le contexte.
<meta http-equiv="Content-Security-Policy"> : Politique de sécurité de contenu (CSP).
<meta http-equiv="X-Frame-Options"> : Protection contre l'intégration dans des iframes externes.
<meta http-equiv="X-XSS-Protection"> : Protection contre les attaques XSS.
<meta http-equiv="Strict-Transport-Security"> : Préchargement HSTS pour forcer l'utilisation de HTTPS.

5.2.4 Head - Styles et Thème

Exemple<meta name="theme-color" content="#4285f4"> <link rel="stylesheet" href="../src/assets/styles/style.css"> <link rel="stylesheet" href="../src/assets/styles/print.css" media="print"> <link rel="stylesheet" href="specific.css" media="print and (feature)"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous" />

Les métadonnées pour les styles et le thème dans la section <head> sont :

<meta name="theme-color"> : Définit la couleur de l'interface du navigateur pour correspondre au thème du site.
<link rel="stylesheet" href="../src/assets/styles/style.css"> : Fichier de style principal pour le site.
<link rel="stylesheet" href="../src/assets/styles/print.css" media="print"> : Fichier de style destiné à l'impression.
<link rel="stylesheet" href="specific.css" media="print and (feature)"> : Fichier de style conditionnel appliqué selon les médias et fonctionnalités spécifiées.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HS...69psu" crossorigin="anonymous"> : Fichier de style Bootstrap pour les composants et la mise en page, avec intégrité et attribut de sécurité.

5.2.5 Head - Scripts

Scripts

Exemple<script src="../src/assets/scripts/main.js"></script>

<script src="specific.js" defer></script>
<script src="specific.js" async></script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

Scripts dans <head> :

<script src="../src/assets/scripts/main.js"></script> : Script JavaScript principal pour les fonctionnalités globales.
<script src="specific.js" defer></script> : Script exécuté après que le document soit complètement analysé, dans l'ordre où il apparaît.
<script src="specific.js" async></script> : Script exécuté dès qu'il est téléchargé, sans attendre la fin de l'analyse du document.
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script> : jQuery avec attribut crossorigin pour CORS.
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> : Vue.js minifié pour les interfaces utilisateur.

5.2.6 Head - Performance

Exemple<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 

<link rel="dns-prefetch" href="https://example.com"> 

<link rel="prefetch" href="next-page.html">

<meta http-equiv="x-dns-prefetch-control" content="on"> 
<meta http-equiv="x-dns-prefetch-control" content="off"> 

<link rel="prerender" href="https://example.com"> 

<link rel="preload" href="styles.css" as="style"> 
<link rel="preload" href="image.jpg" as="image"> 
<link rel="preload" href="script.js" as="script"> 

<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="cache-control" content="max-age=3600"> 
<meta http-equiv="pragma" content="no-cache"> 

<meta http-equiv="content-encoding" content="gzip">

Les métadonnées pour optimiser les performances dans la section <head> sont :

<link rel="preconnect"> : Établit une connexion anticipée à un domaine pour améliorer les performances.
<link rel="dns-prefetch"> : Résout les noms de domaine avant que les ressources ne soient demandées.
<link rel="prefetch"> : Précharge des ressources qui seront nécessaires dans un futur proche.
<meta http-equiv="x-dns-prefetch-control"> : Active ou désactive la prélecture DNS.
<link rel="prerender"> : Précharge une page entière pour une navigation plus rapide.
<link rel="preload"> : Charge les ressources spécifiées dès que possible pour une utilisation immédiate.
<meta http-equiv="cache-control"> : Contrôle le comportement de mise en cache du navigateur.
<meta http-equiv="pragma"> : Contrôle la mise en cache pour les navigateurs plus anciens.
<meta http-equiv="content-encoding"> : Spécifie l'encodage de contenu du document.

5.3 Body

5.3.1 Body - Conteneur

Exemple<div></div>
<span></span>

Les éléments conteneur utilisés dans la section <body> :

<div> : Conteneur générique utilisé pour grouper des sections de contenu et appliquer des styles CSS.
<span> : Élément en ligne utilisé pour appliquer des styles ou manipuler des parties spécifiques de texte sans affecter la mise en forme globale.

5.3.1 Body - Sémantiques

Exemple<header></header>
<nav></nav>
<main></main>
<footer></footer>
<aside></aside>
<section></section>
<article></article>

Les éléments sémantiques utilisés dans la section <body> :

<header> : Conteneur pour l'introduction ou les en-têtes du document, souvent utilisé pour les logos, titres, et menus de navigation.
<nav> : Conteneur pour la navigation principale du site.
<main> : Conteneur pour le contenu principal du document, essentiel pour l'accessibilité.
<footer> : Conteneur pour le bas de page, souvent utilisé pour les informations de copyright ou des liens supplémentaires.
<aside> : Conteneur pour le contenu secondaire ou complémentaire, comme des barres latérales ou widgets.
<section> : Conteneur pour une section thématique du document, regroupant des contenus connexes.
<article> : Conteneur pour un contenu autonome, comme un article de blog ou une publication.

5.4 Javascript

Was this blog post helpful to you? Oui (0) Non(0)

Publié dans: Ingénierie, Ingénieur logiciel, Langage HTML

Laissez un commentaire

Nom

E-mail

Sujet

Commentaire

Note :

★

Code de sécurité :