Introduction à HTML5 & CSS3
Objectifs du Cours
• Comprendre la structure et les balises fondamentales de HTML5.
• Utiliser les propriétés CSS3 pour styliser et mettre en page des éléments HTML.
• Concevoir des pages web simples mais fonctionnelles avec HTML5 et CSS3.
Plan du Cours
1. Introduction à HTML5
• Structure de base d'un document HTML5
• Balises HTML5 essentielles
• Éléments de texte, liens, images et multimédia
2. CSS3 : Concept et Syntaxe
• Concept de feuille de style
• Structure et syntaxe d'une règle CSS
• Sélecteurs CSS de base
3. Propriétés CSS3 Essentielles
• Couleur et arrière-plan
• Texte et typographie
• Mise en page et alignement
• Modèle de boîte (box model)
4. Projets Pratiques
• Création d'une page de profil simple
• Ajout de styles CSS pour améliorer l'apparence
• Utilisation de CSS pour la mise en page flexible
1. Introduction à HTML5
Structure de Base d'un Document HTML5
Un document HTML5 commence par la déclaration <!DOCTYPE html> , suivie par des balises
structurantes qui organisent le contenu :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Site Web</title>
</head>
<body>
<!-- Contenu de la page -->
</body>
</html>
Balises HTML5 Essentielles
1.1 Balises de Texte
• <h1> à <h6> : Utilisées pour les titres et sous-titres.
<h1>Titre Principal</h1>
<h2>Sous-titre</h2>
• <p> : Balise de paragraphe.
<p>Ceci est un paragraphe de texte.</p>
• <a> : Balise de lien hypertexte.
<a href="[Link] notre site</a>
1.2 Balises de Structure
• <header> , <nav> , <main> , <footer> : Balises sémantiques pour structurer le
document.
<header>
<h1>Mon Site</h1>
</header>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
</ul>
</nav>
1.3 Images et Médias
• <img> : Pour afficher des images.
<img src="[Link]" alt="Description de l'image" width="300">
• <video> et <audio> : Pour intégrer des vidéos et de l'audio.
<video controls>
<source src="video.mp4" type="video/mp4">
Votre navigateur ne supporte pas la vidéo.
</video>
2. CSS3 : Concept et Syntaxe
Qu'est-ce que CSS ?
CSS (Cascading Style Sheets) est un langage de style qui contrôle l'apparence et la mise en
page des documents HTML. Il permet de séparer la structure du contenu de son apparence
visuelle.
Structure d'une Règle CSS
Chaque règle CSS se compose d'un sélecteur et d'un bloc de déclarations :
sélecteur {
propriété: valeur;
}
Exemple
p {
color: blue; /* Propriété de couleur du texte */
font-size: 16px; /* Taille de la police */
}
Sélecteurs CSS de Base
• Sélecteur d'élément : Applique un style à tous les éléments du même type.
p {
color: black;
}
• Sélecteur de classe : Applique un style aux éléments avec une classe donnée.
Utilisé avec un point ( . ).
.highlight {
background-color: yellow;
}
• Sélecteur d'ID : Applique un style à un élément unique. Utilisé avec un dièse ( # ).
#header {
background-color: lightgrey;
}
• Sélecteur universel : Cible tous les éléments.
* {
margin: 0;
padding: 0;
}
3. Propriétés CSS3 Essentielles
3.1 Couleur et Arrière-Plan
• color : Définit la couleur du texte.
body {
color: #333333; /* Couleur hexadécimale */
}
• background-color : Définit la couleur de fond.
header {
background-color: #f8f9fa;
}
• background-image : Définit une image de fond.
body {
background-image: url('[Link]');
background-size: cover; /* Couvre toute la zone */
}
3.2 Texte et Typographie
• font-family : Définit la famille de polices.
p {
font-family: 'Arial', sans-serif;
}
• font-size : Définit la taille de la police.
h1 {
font-size: 24px;
}
• font-weight : Définit l'épaisseur de la police (ex: bold , normal ).
strong {
font-weight: bold;
}
• text-align : Aligne le texte horizontalement.
h2 {
text-align: center;
}
• text-decoration : Ajoute des décorations au texte, comme underline ,
overline , line-through .
a {
text-decoration: none;
}
3.3 Mise en Page et Alignement
• margin : Espace extérieur autour des éléments.
div {
margin: 20px;
}
• padding : Espace intérieur entre le contenu et la bordure de l'élément.
div {
padding: 10px;
}
• border : Ajoute une bordure autour de l'élément.
div {
border: 1px solid #000;
}
• display : Détermine comment un élément est affiché (ex: block , inline ,
flex ).
nav {
display: flex;
justify-content: space-between;
}
• position : Positionne un élément selon les valeurs static , relative ,
absolute , fixed .
.fixed-banner {
position: fixed;
top: 0;
width: 100%;
}
3.4 Modèle de Boîte (Box Model)
Le modèle de boîte est crucial pour comprendre la mise en page en CSS. Chaque élément
est considéré comme une boîte composée de quatre parties :
1. Contenu : Le texte ou les données dans l'élément.
2. Padding : L'espace entre le contenu et la bordure.
3. Bordure : La ligne entourant le padding (si définie).
4. Marge : L'espace entre la bordure et les autres éléments.
Exemple de Code
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid black;
margin: 15px;
}
4. Projets Pratiques
Projet 1 : Création d'une Page de Profil Simple
Objectif : Créer une page de profil personnelle avec HTML5 et CSS3.
Étape 1 : HTML
Créez un fichier [Link] :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil Personnel</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Jean Dupont</h1>
<p>Développeur
Web</p>
</header>
<main>
<section>
<h2>À Propos de Moi</h2>
<p>Passionné par le développement web et les technologies modernes.</p>
</section>
<section>
<h2>Compétences</h2>
<ul>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>PHP & MySQL</li>
</ul>
</section>
</main>
<footer>
<p>Contact: <a href="[Link]
</footer>
</body>
</html>
Étape 2 : CSS
Créez un fichier [Link] :
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
}
header {
background-color: #35424a;
color: #ffffff;
text-align: center;
padding: 20px 0;
}
main {
padding: 20px;
}
h2 {
border-bottom: 2px solid #e8491d;
padding-bottom: 10px;
}
ul {
list-style-type: square;
}
footer {
text-align: center;
padding: 10px;
background-color: #35424a;
color: #ffffff;
position: relative;
bottom: 0;
width: 100%;
}
a {
color: #e8491d;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Projet 2 : Mise en Page Flexible
Objectif : Utiliser les concepts de CSS flexbox pour créer une mise en page adaptative.
Exemple de Structure
<body>
<div class="container">
<header>En-tête</header>
<nav>Navigation</nav>
<main>Contenu Principal</main>
<aside>Barre Latérale</aside>
<footer>Pied de Page</footer>
</div>
</body>
CSS avec Flexbox
.container {
display: flex;
flex-wrap: wrap;
}
header, nav, main, aside, footer {
border: 1px solid #ddd;
padding: 10px;
margin: 5px;
}
header {
flex: 1 100%;
}
nav {
flex: 1;
order: 1;
}
main {
flex: 3;
order: 2;
}
aside {
flex: 1;
order: 3;
}
footer {
flex: 1 100%;
order: 4;
background-color: #f1f1f1;
}
Conclusion
En suivant ce cours, vous avez appris les bases de HTML5 et CSS3. Vous avez découvert
comment structurer une page web avec HTML5 et comment utiliser CSS3 pour contrôler
l'apparence et la mise en page.
Ressources Supplémentaires
• MDN Web Docs : Documentation complète et tutoriels sur HTML et CSS.
• W3Schools : Tutoriels interactifs sur HTML, CSS et JavaScript.
• CSS-Tricks : Astuces, articles et guides sur CSS.
Ce cours offre une base solide pour commencer à créer des pages web. Pour aller plus loin,
explorez des concepts avancés tels que les animations CSS, le responsive design avec
media queries, et l'intégration de JavaScript pour interactivité.