3W

Appearance

Code camp ​

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

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.
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/
    │   ├── fonts/
    │   │   └── arial.woff2
    │   ├── images/
    │   │   └── hero.jpg
    │   └── svg/
    │       └── icon-guitar.svg
    ├── css/
    │   ├── reset.css
    │   └── style.css
    ├── js/
    │   └── main.js
    ├── favicon.ico
    ├── index.html
    └── robots.txt

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)
Afficher le code
html
<!DOCTYPE html>
<html lang="fr" dir="ltr">

<head>
	<meta charset="UTF-8" />
	<title>Document</title>
</head>

<body>
	[Contenu du site]
</body>

</html>

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
Afficher le code
html
<!DOCTYPE html>
<html lang="fr" dir="ltr">

<head>
	<meta charset="UTF-8" />
	<title>Document</title>
</head>

<body>
	<header>
		<nav></nav>
	</header>

	<main>
		<section>
			<h1>Titre principal</h1>
			<article>
				<header>
					<h2>Titre secondaire</h2>
				</header>
			</article>
		</section>
	</main>

	<aside>
		<h2></h2>
	</aside>

	<footer></footer>
</body>

</html>

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
Afficher le code
html
<!DOCTYPE html>
<html lang="fr" dir="ltr">

<body>
	<header>
		<nav>
			<a href="/">accueil</a>
		</nav>
	</header>

	<main>
		<section>
			<h1>Titre principal</h1>
			<article>
				<header>
					<h2>Titre secondaire</h2>
				</header>
				<p>Lorem <strong>ipsum</strong> dolor sit amet.</p>
			</article>
		</section>
	</main>

	<aside>
		<h2></h2>
		<ul>
			<li>item 1</li>
			<li>item 2</li>
		</ul>
	</aside>

	<footer></footer>

</body>

</html>

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 ; }

Afficher l'exemple
css
p { color: blue; }
  • 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

Astuce

Tout est une boîte en HTML/CSS.

Sélecteurs CSS ​

Sélecteurs de balise ​

Ils sont identiques aux balises HTML (sauf head).

Afficher le code
css
body {}
main {}
ul {}
p {}
span {}

Sélecteurs de classe ​

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

Afficher le code
css
.class-personnelle {}
.container {}

Sélecteurs d’attribut ​

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

Afficher le code
css
a[href] {}
a[href="/"] {}

Sélecteurs multiples et chaînés ​

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

Afficher le code
css
ul, ol {}
ul.class-personnelle {}
ul > li {}
.class-personnelle img {}
* + * {}

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é ​

D'après Access42 :

L’accessibilité numérique est un droit fondamental. C’est la possibilité pour toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y accéder.

Selon moi, développer de manière accessible devrait être la norme. La façon normale de créer un site et non pas un correctif ou une surcouche à appliquer.

C'est pourquoi les contenus ici présents intègrent (le plus possible) les bonnes pratiques d'accessibilité numérique par défaut.

Ces contenus sont publiés sous licence Creative Commons

CC BY-SA 4.0