3W
/
cours
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
cours/docs/dev/code-camp/index.md

6.2 KiB
Raw Blame History

Code camp

Vous êtes sur le point de commencer une semaine intensive de développement web. Soufflez un coup, tout va bien se passer ☺️

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

  • <!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 (block) et en ligne (inline). 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 :::

CSS

Le langage CSS (cascading style sheets) permet d'agir sur le style du document HTML. C'est-à dire toute la partie visuelle du contenu comme par exemple :

  • la mise en page
  • les couleurs
  • les tailles
  • la justification
  • les polices de caractères
  • etc.

On parle de « règle CSS ». Une règle se construit ainsi :

sélecteur { propriété : valeur ; }

::: details Afficher l'exemple

<<< @/snippets/css/base.css#rule

  • p est le sélecteur
  • color est la propriété
  • blue est la valeur
  • color: blue; est la déclaration
  • l'ensemble forme la règle

:::

::: tip Astuce Tout est une boîte en HTML/CSS. :::

Sélecteurs CSS

Sélecteurs de balise

Ils sont identiques aux balises HTML (sauf head).

::: details Afficher le code <<< @/snippets/css/base.css#tag :::

Sélecteurs de classe

Cible une classe définie dans le HTML avec un point.

::: details Afficher le code <<< @/snippets/css/base.css#class :::

Sélecteurs d’attribut

Cible un attribut spécifique avec ou sans valeur entre crochets.

::: details Afficher le code <<< @/snippets/css/base.css#attr :::

Sélecteurs multiples et chaînés

Il est possible de cibler plusieurs éléments ou d’enchaîner les sélecteurs.

::: details Afficher le code <<< @/snippets/css/base.css#chain :::

Propriétés CSS

::: info Il en existe beaucoup trop pour essayer de les résumer ici. Se référer à la documentation. :::

La cascade du style

Le CSS est régit par un concept appelé la cascade. La cascade est un ensemble de règles de priorité et d'importance. Elles servent à déterminer la règle CSS qui sera appliquée en cas de « conflit » entre plusieurs règles.

Les deux éléments de la cascade que nous utiliseront le plus ici sont la spécificité et l'ordre.

  • Cette présentation en anglais explique en détails le fonctionnement de la cascade.
  • Cette page (en anglais également) permet de visualiser graphiquement la cascade.

Accessibilité

Mise en ligne

Bonus