# Code camp Vous êtes sur le point de commencer une semaine intensive de développement web. Soufflez un coup, tout va bien se passer :relaxed: [[toc]] ## 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 ## Configuration et préparation - Paramétrons votre environnement de développement. - Préparons votre dossier de travail local. - Jetons un œil à la maquette. ::: details Afficher la structure ``` code-camp/ ├── 00_sources/ │ ├── fonts/ │ │ └── arial.ttf │ └── images/ │ └── unsplash-concert_crowd.png ├── 01_templates/ │ ├── index.fig │ ├── index.sketch │ └── index.xd ├── 02_export/ │ ├── images/ │ │ └── hero.jpg │ └── icons/ │ └── icon-guitar.svg └── 03_web/ ├── assets/ │ ├── css/ │ │ └── style.css │ ├── fonts/ │ │ └── arial.woff2 │ ├── images/ │ │ └── hero.jpg │ ├── js/ │ │ └── main.js │ └── svg/ │ └── icon-guitar.svg ├── favicon.ico └── index.html ``` ::: ## HTML Le HTML 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 - `` = déclaration du type de document - `` = racine du document, contient tous les autres éléments - `` = fournit des informations générales (métadonnées) sur le document - `` = 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 - `

` = en-tête - `