Workshop ESAAT Roubaix 16-19 décembre 2024
Sélection de collectifs et designers utilisant du web2print
Sélection de projets éditoriaux utilisant le web2print
Workshops et cours autour web2print
Liste de sites ressources pour apprendre le HTML et le CSS
Liste de sites proposant des typographies libres
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><ul>
<li>un élément de la liste</li>
<li>un autre élément</li>
</ul><a href="http://coucou.fr">texte du lien</a><figure>
<img src="images/monimage.jpg" alt="texte descriptif de l'image">
</figure>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;
}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; }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