Collectifs / Designers
Sélection de collectifs et designers utilisant du web2print
Annexes
Ressources
Projets
Sélection de projets éditoriaux utilisant le web2print
Workshops
Workshops et cours autour web2print
HTML / CSS
Liste de sites ressources pour apprendre le HTML et le CSS
Typographies
Liste de sites proposant des typographies libres
Cuisine
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
- les balises de titrage: h1,h2,h3,h4,h5,h6
- <p> balise pour insérer du texte en paragraphe
- <ul> balise pour créer une liste (unordered list)
- <li> éléments de la liste
- <a> insérer un lien
- <img> insérer une image
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
- background: permet de changer la couleur de fond d'un élément
- color: permet de changer la couleur du texte d'un élément
- font-family: permet de changer la typographie
- font-size: permet de changer la taille d'un texte
- font-weight: permet de changer la graisse d'un texte
- margin: permet de changer les marges extérieures d'un bloc
- padding: permet de changer les marges intérieures d'un bloc
- width et height: permettent respectivement de modifier la largeur et la hauteur d'un bloc
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