Cours de HTML et CSS
Introduction
Le HTML (HyperText Markup Language) et le CSS (Cascading Style Sheets) sont les deux piliers fondamentaux du développement web. Ensemble, ils permettent de structurer et de styliser des pages web. Ce cours s’adresse à des étudiants de niveau BAC +1 en informatique et BAC +3 en communication. L’objectif est de vous permettre de maîtriser les bases du HTML et du CSS afin de créer des pages web modernes, fonctionnelles et esthétiques.
Objectifs pédagogiques
- Comprendre la structure et la syntaxe du HTML.
- Apprendre à utiliser les balises HTML les plus courantes.
- Comprendre le rôle et la syntaxe du CSS.
- Maîtriser les sélecteurs, les propriétés et les valeurs CSS.
- Concevoir des mises en page réactives (responsive design).
- Appliquer des bonnes pratiques en matière de sémantique HTML et d’accessibilité.
Prérequis
Aucun prérequis technique n’est nécessaire pour suivre ce cours. Une connaissance de base de l’environnement informatique (système de fichiers, navigation sur le web) est recommandée.
Module 1 : Introduction au HTML
- Qu’est-ce que le HTML ?
- Définition et rôle du HTML dans le web.
- Notions de client-serveur et de navigateur.
- Structure de base d’une page HTML
- La balise
<!DOCTYPE>. - Les balises
<html>,<head>,<body>. - Les balises méta et le titre de la page (
<meta>,<title>).
- Les balises essentielles
- Les balises de texte :
<h1>à<h6>,<p>,<span>,<br>, etc. - Les balises de mise en forme :
<strong>,<em>,<mark>, etc. - Les listes :
<ul>,<ol>,<li>. - Les liens hypertextes :
<a href="">. - Les images :
<img src="" alt="">. - Les tableaux :
<table>,<tr>,<td>,<th>. - Les formulaires et leurs champs :
<form>,<input>,<textarea>,<button>, etc.
- Bonnes pratiques en HTML
- Utiliser des balises sémantiques (
<header>,<footer>,<main>, etc.). - Respecter la sémantique et l’accessibilité.
Module 2 : Introduction au CSS
- Qu’est-ce que le CSS ?
- Définition et rôle du CSS.
- La séparation du contenu (HTML) et de la présentation (CSS).
- Syntaxe du CSS
- Règle CSS : sélecteur, propriété, valeur.
- Les méthodes d’intégration du CSS : en ligne, interne, externe.
- Les sélecteurs CSS
- Sélecteurs de base (
*,element,.class,#id). - Sélecteurs combinés, de relation et pseudo-sélecteurs.
- Les propriétés CSS essentielles
- Propriétés de texte (police, taille, couleur, interlignage, etc.).
- Propriétés de boîte (padding, margin, border, width, height).
- Couleurs et arrière-plans (background-color, background-image).
- Positions et affichages (position, display, flexbox, grid).
- Conception réactive (Responsive Design)
- Introduction à la notion de responsive.
- Les médias queries.
- Techniques de mise en page (Flexbox, Grid).
- Bonnes pratiques CSS
- Centraliser les styles dans un fichier CSS externe.
- Respecter la lisibilité et l’organisation du fichier CSS.
Projet de fin de cours
Les étudiants réaliseront un mini-projet de création de site web. Ce projet permettra de mettre en pratique les notions de HTML et CSS acquises durant le cours.
Exemple de projet
- Créer un portfolio en ligne.
- Réaliser une page produit pour un site e-commerce.
- Conçoit une page de blog.
Ressources pédagogiques
- Diaporamas de cours.
- Exercices pratiques corrigés.
- Liens vers des ressources supplémentaires (MDN, W3Schools, etc.).
Modalités d’évaluation
- QCM de validation des connaissances.
- Exercices pratiques à réaliser.
- Évaluation du mini-projet de fin de cours.
Conclusion
Ce cours est conçu pour équiper les étudiants de BAC +1 en informatique et BAC +3 en communication des compétences nécessaires pour créer des sites web esthétiques, ergonomiques et conformes aux standards du web moderne. Ces compétences leur permettront de poursuivre des parcours plus avancés en développement web ou de réaliser des projets professionnels dans le cadre de la communication numérique.
No responses yet