# 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 (hyper text markup language) 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
- `