Cours de HTML/CSS
Sommaire
Introduction
Qu'est-ce que le HTML ?
Le HTML est un langage de balisage qui permet de structurer et de mettre en forme du contenu. Il est utilisé pour créer
des pages web.
Qu'est-ce que le CSS ?
Le CSS est un langage de style qui permet de mettre en forme du contenu. Il est utilisé pour mettre en forme des pages
web.
Les balises HTML
Les balises HTML sont des éléments qui permettent de structurer et de mettre en forme du contenu. Elles sont composées
d'un nom et de deux chevrons.
<balise></balise> <!-- balise n'est pas une balise HTML, mais simplement un exemple ! -->
Voici la liste de toutes les balises et de leur utilité :
-
<html></html>: balise racine, elle contient toutes les autres balises -
<head></head>: balise d'en-tête, elle contient des informations sur la page -
<body></body>: balise de corps, elle contient le contenu de la page -
<h1></h1>: balise de titre, elle permet de créer un titre-
<h2></h2>: balise de sous-titre, elle permet de créer un sous-titre- etc ...
-
-
<p></p>: balise de paragraphe, elle permet de créer un paragraphe -
<br>: balise de saut de ligne, elle permet de créer un saut de ligne -
<hr>: balise de séparation, elle permet de créer une séparation -
<a></a>: balise de lien, elle permet de créer un lien -
<img src="image.jpg">: balise d'image, elle permet d'afficher une image -
<ul></ul>: balise de liste non-ordonnée, elle permet de créer une liste non-ordonnée-
<li></li>: balise d'élément de liste, elle permet de créer un élément de liste
-
-
<ol></ol>: balise de liste ordonnée, elle permet de créer une liste ordonnée-
<li></li>: balise d'élément de liste, elle permet de créer un élément de liste
-
-
<table></table>: balise de tableau, elle permet de créer un tableau-
<tr></tr>: balise de ligne de tableau, elle permet de créer une ligne de tableau-
<td></td>: balise de cellule de tableau, elle permet de créer une cellule de tableau
-
-
-
<div></div>: balise de division, elle permet de créer une division -
<span></span>: balise de span, elle permet de créer un span
Les attributs HTML
Les attributs HTML sont des éléments qui permettent de modifier le comportement ou l'apparence d'une balise. Ils sont
composés d'un nom et d'une valeur.
<balise attribut="valeur"></balise> <!-- balise n'est pas une balise HTML, mais simplement un exemple ! -->
Voici la liste de tous les attributs et de leur utilité :
-
id="valeur": attribut d'identifiant, il permet d'identifier une balise -
class="valeur": attribut de classe, il permet de classer une balise -
style="valeur": attribut de style, il permet de mettre en forme une balise -
href="valeur": attribut d'hyperlien, il permet de créer un lien -
src="valeur": attribut de source, il permet de définir la source d'une balise -
alt="valeur": attribut d'alternative, il permet de définir une alternative à une balise -
title="valeur": attribut de titre, il permet de définir un titre à une balise
Les sélecteurs CSS
Les sélecteurs CSS sont des éléments qui permettent de sélectionner des balises. Ils sont composés d'un nom et de deux
accolades.
.selecteur {
propriété: valeur;
}
/* sélecteur n'est pas un sélecteur CSS, mais simplement un exemple ! */
Voici la liste de tous les sélecteurs et de leur utilité :
-
*: sélecteur universel, il permet de sélectionner toutes les balises -
balise: sélecteur de balise, il permet de sélectionner une balise -
.classe: sélecteur de classe, il permet de sélectionner une balise ayant une classe -
#identifiant: sélecteur d'identifiant, il permet de sélectionner une balise ayant un identifiant
Les propriétés CSS
Les propriétés CSS sont des éléments qui permettent de modifier le comportement ou l'apparence d'une balise. Elles sont
composées d'un nom et d'une valeur.
propriété: valeur;
/* propriété n'est pas une propriété CSS, mais simplement un exemple ! */
Voici la liste de toutes les propriétés et de leur utilité :
-
color: valeur;: propriété de couleur, elle permet de définir la couleur du texte -
background-color: valeur;: propriété de couleur de fond, elle permet de définir la couleur de fond -
font-family: valeur;: propriété de police, elle permet de définir la police -
font-size: valeur;: propriété de taille de police, elle permet de définir la taille de police -
font-weight: valeur;: propriété de graisse de police, elle permet de définir la graisse de police - et j'en passe ... !
Exemples
<form action="page.php" method="post">
<input type="text" name="nom">
<input type="submit" value="Envoyer">
</form>
En php je récupère les données du formulaire avec la variable superglobale $_POST['nom']
Il peut y'avoir plusieurs classe CSS sur une balise HTML, exemple :
<p class="classe1 classe2 classe3">Paragraphe</p>
le css :
.classe1 {
color: red;
}
.classe2 {
font-size: 20px;
}
.classe3 {
font-weight: bold;
}
Ici, j'ai une classe qui va mettre le texte en rouge, une autre qui va mettre la taille de la police à 20px et une autre
qui va mettre le texte en gras.
Et pour les ID, c'est pareil !
Pour les balises HTML voici certains cas ou cela peut être utile :
lien :
<a href="https://google.fr">Google</a>
image :
<img src="image.jpg" alt="Image">
tableau :
<table>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
Liste :
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
Liste ordonnée (numérotée) :
<ol>
<li>Element 1</li>
<li>Element 2</li>
</ol>
Division (Une boite dans laquelle on peut mettre du contenu) :
<div>Division 1</div>
<div>Division 2</div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<h1>Titre 1</h1>
<h2>Titre 2</h2>
Retour à la ligne :
<br>
Formulaires :
<form action="page.php" method="post">
<input type="text" name="nom">
<input type="submit" value="Envoyer">
</form>
<head>
<title>Titre</title>
</head>
Top comments (0)