HTML et CSS - Créer des pages web stylisées

Ce cours couvre les fondamentaux de la création de pages web avec HTML et la mise en forme avancée grâce aux feuilles de styles CSS. Il aborde la structure des balises HTML, les sélecteurs CSS, les propriétés de mise en page, ainsi que les bonnes pratiques pour concevoir des sites web responsifs et accessibles. Ce PDF, offert gratuitement par Olivier Glück, permet d'acquérir des compétences pratiques pour développer des interfaces modernes et optimisées. Il inclut des exemples concrets, des exercices et des astuces pour maîtriser rapidement l'intégration web. Idéal pour les débutants et ceux souhaitant se perfectionner, ce support pédagogique est un outil essentiel pour tout projet de développement web.

Objectifs d'apprentissage

Comprendre les principes fondamentaux du HTML, y compris la structure de base d'un document et l'utilisation des balises et attributs.
Maîtriser la création de paragraphes, de titres et de sauts de ligne pour organiser le contenu.
Appliquer les techniques de formatage du texte (gras, italique, souligné, etc.) pour améliorer la lisibilité.
Créer et structurer des listes (ordonnées et non ordonnées) ainsi que des liens hypertextes pour une navigation efficace.
Intégrer des images dans une page HTML et optimiser leur affichage.
Concevoir des tableaux pour présenter des données de manière claire et organisée.
Comprendre les principes des feuilles de styles CSS et leur rôle dans la mise en forme des pages web.
Utiliser les classes et sous-classes CSS pour styliser des éléments spécifiques.
Maîtriser les techniques de positionnement des éléments (statique, relatif, absolu, fixe) pour créer des mises en page dynamiques.

Public cible

Ce cours s'adresse aux débutants en développement web souhaitant acquérir des compétences solides en HTML et CSS. Il est idéal pour les étudiants, les professionnels en reconversion ou toute personne désireuse de créer des sites web modernes et bien structurés. Aucune connaissance préalable en programmation n'est requise, bien qu'une familiarité avec l'utilisation d'un ordinateur et d'un navigateur web soit recommandée.

Contenu détaillé

Principes du HTML, balises et attributs

Le HTML (HyperText Markup Language) est le langage de base pour créer des pages web. Il utilise des balises pour structurer le contenu et des attributs pour définir des propriétés supplémentaires. Un document HTML commence toujours par une déclaration de type de document, suivie des balises <html>, <head> et <body>. La section <head> contient des métadonnées, tandis que le <body> héberge le contenu visible.

Les paragraphes, les titres et sauts de ligne

Les paragraphes sont définis avec la balise <p>, tandis que les titres utilisent les balises <h1> à <h6> pour indiquer différents niveaux d'importance. Les sauts de ligne sont insérés avec <br>. Ces éléments sont essentiels pour organiser le contenu et améliorer l'expérience utilisateur.

Formatage du texte

Le HTML offre plusieurs balises pour formater le texte, comme <strong> pour le gras, <em> pour l'italique, et <u> pour le souligné. Ces balises aident à mettre en valeur des informations importantes et à guider le lecteur.

Les listes, les liens

Les listes peuvent être ordonnées (<ol>) ou non ordonnées (<ul>), avec chaque élément représenté par <li>. Les liens, créés avec la balise <a>, permettent de naviguer entre les pages ou vers des ressources externes. L'attribut "href" spécifie la destination du lien.

Les images

Les images sont intégrées avec la balise <img>, accompagnée des attributs "src" (source) et "alt" (texte alternatif). Le texte alternatif est crucial pour l'accessibilité et le référencement.

Les tableaux

Les tableaux sont construits avec les balises <table>, <tr> (ligne), <td> (cellule) et <th> (en-tête). Ils sont utiles pour présenter des données tabulaires de manière claire et organisée.

Principes des feuilles de styles

Les CSS (Cascading Style Sheets) séparent le contenu (HTML) de la présentation. Elles permettent de définir des styles pour les éléments HTML, comme les couleurs, les polices et les marges. Les CSS peuvent être intégrées directement dans le HTML, dans une balise <style>, ou dans un fichier externe.

Les classes et sous-classes

Les classes CSS (définies avec un point, par exemple .ma-classe) permettent d'appliquer des styles à plusieurs éléments. Les sous-classes, comme :hover ou :active, modifient l'apparence d'un élément dans des états spécifiques.

Positionner des éléments dans une page

Le positionnement CSS contrôle la disposition des éléments. Les options incluent "static" (par défaut), "relative" (décalé par rapport à sa position normale), "absolute" (par rapport à son parent positionné) et "fixed" (par rapport à la fenêtre du navigateur). Flexbox et Grid sont des techniques modernes pour créer des mises en page complexes.

Télécharger le cours