dep update + B1 html

2022-09-24 17:32:11 +02:00 · 2022-09-24 17:32:11 +02:00 · 68ce35ef06
commit 68ce35ef06
parent 6168f98f9c
5 changed files with 296 additions and 199 deletions
--- a/docs/dev/B1/html.md
+++ b/docs/dev/B1/html.md
@ -1 +1,70 @@
-# HTML B1
+# HTML B1
+
+## HTML
+
+Le HTML (<span lang="en">hyper text markup language</span>) est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe :  
+`<` `nom de la balise` `attributs` `>`  
+`contenu de la balise`  
+`<` `nom de la balise` `/>`
+
+La structure d'un document HTML est donc une suite de balises que l'on organise afin de donner du sens à notre contenu. Il nous revient de construire notre document HTML afin qu'il soit le plus explicite et sémantiquement correcte.
+
+### Les balises indispensables
+
+- `<!DOCTYPE>` = déclaration du type de document
+- `<html>` = racine du document, contient tous les autres éléments
+- `<head>` = fournit des informations générales (métadonnées) sur le document
+- `<body>` = contenu principal du document
+
+### Les balises et attributs recommandés
+
+- `lang` = déclaration du langage utilisé pour le contenu
+- `dir` = Sens de lecture du contenu
+- `charset` = définit l'encodage des caractères utilisés
+- `title` = définit le titre du document (fenêtre/onglet/référencement)
+
+::: details Afficher le code
+<<< @/snippets/html/base.html#base
+:::
+
+### Les balises structurantes
+
+- `<header>` = en-tête
+- `<nav>` = élément contenant des liens, destiné à la navigation
+- `<main>` = contenu principal du document
+- `<article>` = une composition autonome pouvant être utilisée seule
+- `<section>` = zone générique du document, plus utile au développeur qu’à l’utilisateur
+- `<aside>` = contenu secondaire ou indirect à l’inverse de `<main>`
+- `<h1>` - `<h6>` = niveaux des titres du document
+- `<footer>` = pied de page
+
+::: details Afficher le code
+<<< @/snippets/html/base.html#structure
+:::
+
+### Les balises de contenus
+
+On distingue deux catégories de balises: bloc (<span lang="en">block</span>) et en ligne (<span lang="en">inline</span>). Les balises en ligne ne peuvent pas contenir de balises bloc.
+
+Ci-dessous, quelques exemples de balises (listes non exhaustives).
+
+#### Balises bloc
+
+- `<blockquote>` = une citation
+- `<p>` = un paragraphe
+- `<ol>` = liste ordonnée
+- `<ul>` = liste désordonnée (liste à puce)
+- `<li>` = élément d’une liste
+- `<div>` = conteneur générique
+
+#### Balises en ligne
+
+- `<img>` = insertion d’une image
+- `<a>` = un lien
+- `<span>` = conteneur générique en ligne
+- `<strong>` = contenu important (en gras)
+- `<br>` = saut de ligne
+
+::: details Afficher le code
+<<< @/snippets/html/base.html#full
+:::
--- a/docs/dev/B1/index.md
+++ b/docs/dev/B1/index.md
@ -37,3 +37,14 @@ Les sujets seront tous évoqués mais pas forcément dans l'ordre affiché.
   5. Optimisations
 9. Développement local
 10. Mise en ligne
+
+## Concepts et architecture
+
+- **Internet** = réseau de réseaux, infrastructure globale (TPC/IP)
+- **Web** = application basée sur le réseau d’internet (HTTP/HTTPS)
+- **DNS** = annuaire adresse IP/nom de domaine
+- **FTP**/SFTP = transfert de fichiers
+- **HTML** = contenus
+- **CSS** = styles
+- **Javascript** = éléments dynamiques
+- **Fonts** = polices de caractères
--- a/docs/dev/B1/introduction.md
+++ b/docs/dev/B1/introduction.md
@ -1 +0,0 @@
-# Intro B1