Cooking is coding / Coding is cooking

Workshop ESAC Cambrai 24-26 octobre 2022

Annexes

Ressources

Mémo HTML

Le html utilise des balises pour créer des éléments ou blocs avec cette synthaxe:

<balise>contenu</balise>

Les balises peuvent contenir des attributs, sorte de paramètres de celles-ci, certains attributs sont spécifiques à la balise d'autres sont génériques.

<balise attribut="valeur">contenu</balise>

Un document HTML5 se structure ainsi :

<!DOCTYPE html>
	<html lang="fr"> 
	<head>   
		<meta charset="UTF-8">
		<title>Le titre de la page</title>
	</head> 
	<body>
		<!-- commentaires -->
	</body>
</html>

Les balises de bases

Créer une liste

<ul>
	<li>un élément de la liste</li>
	<li>un autre élément</li>
</ul>

Insérer un lien

<a href="http://coucou.fr">texte du lien</a>

Insérer une image

<figure>
	<img src="images/monimage.jpg" alt="texte descriptif de l'image">
</figure>

Mémo CSS

Le css est le langage qui va permettre de designer une page web: choix des typographies, positionnement, couleurs, marges etc.

Pour insérer une feuille de style, nommé par exemple style.css, il faut ajouter la balise

<link>
dans le
<head>
de son html, comme suit:
<link rel="stylesheet" href="style.css">

En css on commence par cibler un élément, puis on lui change les valeurs de ses propriétés. Par exemple si on veut changer la couleur d'un paragraphe, on écrira:

p{
  color: red;
}

Quelques propriétés css de base

La class et l'id

Pour cibler en particulier des élémént on peut utiliser soit l'attribut class soit l'attribut id.

L'id est unique, la class est réutilisable. Un seul id par élément, une ou plusieurs class par élément.

<p id="paragraphe-unique">du texte</p>
<p class="paragraphe-rouge">encore du texte</p>

Il y a plusieurs manière de cibler un élément en css:

.cibler-une-classe{ propriété: valeur; }
 #cibler-une-id{ propriété: valeur; }
.parent .enfant{ propriété: valeur; }

CSS tricks & tips

Quand un élément a une taille définie (width), margin : auto permet de centrer celui-ci horizontalement.

.element{   
  width: 50%;   
  margin: auto;
}

Pour positionner les éléments côte à côte, on peut utiliser les flexbox.

.parent{  
  display:flex; 
  justify-content:space-between; 
} 

Plus d'infos sur les flexbox ici