Mémo HTML/CSS

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

Ressources

HTML / CSS

Liste de sites ressources pour apprendre le HTML et le CSS

Typographies

Liste de sites proposant des typographies libres