Rapport Complet : Apprentissage du HTML et du CSS
Introduction
Dans le cadre de mon initiation au développement web, j’ai suivi les 71 tutoriels de Pierre
Giraud consacrés aux bases de HTML et CSS. Ce rapport présente un résumé des notions que
j’ai retenues tout au long de ce parcours.
HTML : HyperText Markup Language
Définition
HTML est un langage de balisage qui permet de structurer et d’organiser le contenu d’une
page web. Il sert de fondation pour tout site web.
Structure de base
Une page HTML commence toujours par une structure minimale, composée des balises
suivantes :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
</head>
<body>
<!-- Contenu principal -->
</body>
</html>
Doctype : Déclaration du type de document pour spécifier la version de HTML utilisée.
Balises principales :
<html> : Encapsule l'ensemble du document.
<head> : Contient les métadonnées, le titre, les liens vers les fichiers CSS, etc.
<body> : Contient le contenu visible de la page, tel que les textes, images, liens, etc.
Balises et éléments essentiels
Titres : Utilisation des balises <h1> à <h6> pour définir les niveaux de titres.
Paragraphes : Balise <p> pour délimiter les blocs de texte.
Création de liens en HTML
Les liens hypertextes sont créés à l'aide de l'élément <a> avec l'attribut href spécifiant la
destination :
Lien interne : Pointe vers une section du même document ou du même site.
<a href="#section1">Aller à la section 1</a>
Lien externe : Pointe vers une ressource sur un autre site web.
<a href="https://www.exemple.com">Visiter Exemple</a>
L'attribut target contrôle l'ouverture du lien :
target="_blank" : Ouvre le lien dans un nouvel onglet ou une nouvelle fenêtre
<a href="https://www.exemple.com" target="_blank">Visiter Exemple</a>
Les liens peuvent également être utilisés pour déclencher des téléchargements en
spécifiant l'attribut download :
<a href="fichier.pdf" download>Télécharger le fichier PDF</a>
Éléments block et inline
Éléments block : Occupent toute la largeur disponible et commencent sur une
nouvelle ligne. Exemples : <div>, <p>, <h1>.
Éléments inline : Occupent seulement l'espace nécessaire à leur contenu et ne
commencent pas sur une nouvelle ligne. Exemples : <span>, <a>, <strong>.
Indentation et commentaires en HTML
Indentation : Utiliser des espaces ou des tabulations pour structurer le code de
manière lisible, facilitant ainsi la maintenance et la compréhension.
Commentaires : Ajouter des notes dans le code sans qu'elles soient affichées par le
navigateur :
<!-- Ceci est un commentaire -->
Gestion des espaces et des retours à la ligne en HTML
En HTML, les espaces multiples et les retours à la ligne dans le code source ne sont pas
nécessairement reflétés dans le rendu final par le navigateur. Pour contrôler explicitement les
sauts de ligne, l'élément <br> est utilisé :
Gestion de l'importance du texte
Pour indiquer l'importance ou l'emphase sur certaines portions de texte, HTML propose des
éléments spécifiques :
<strong> : Indique une importance forte, généralement rendu en gras par les
navigateurs.
<em> : Indique une emphase modérée, généralement rendu en italique.
Ces éléments améliorent l'accessibilité et le référencement en fournissant des indications
sémantiques sur le contenu.
Insertion d'images en HTML
L'élément <img> permet d'insérer des images dans une page web en spécifiant
l'attribut src avec le chemin de l'image :
<img src="image.jpg" alt="Description de l'image">
L'attribut alt fournit une description alternative pour les lecteurs d'écran et en cas de
problème de chargement de l'image.
Les formats d'image couramment utilisés incluent :
JPEG/JPG : Adapté aux photographies avec une bonne compression mais une perte
de qualité.
PNG : Supporte la transparence et offre une compression sans perte, idéal pour les
graphiques et logos.
GIF : Supporte les animations simples et une palette de couleurs limitée.
Il est crucial d'optimiser le poids des images pour améliorer les performances de
chargement des pages. Des images trop lourdes peuvent ralentir le site et affecter
l'expérience utilisateur.
Les listes en HTML
Les listes permettent d'organiser des ensembles d'éléments de manière structurée :
Listes non ordonnées (<ul>) : Utilisent des puces pour chaque élément.
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
Listes ordonnées (<ol>) : Utilisent des numéros pour chaque élément.
<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>
Listes de définition (<dl>) : Utilisées pour des paires terme-définition.
<dl>
<dt>Terme</dt>
<dd>Définition du terme.</dd>
</dl>
Entités HTML
Les entités HTML sont utilisées pour représenter des caractères spéciaux ou des symboles qui
ne peuvent pas être saisis directement dans le code source. Par exemple, l'entité &
représente le caractère &, et < représente le caractère <.
Différence entre HTML et CSS
HTML (HyperText Markup Language) : Langage de balisage utilisé pour structurer
le contenu des pages web. Il définit les éléments tels que les titres, paragraphes,
images, liens, etc.
CSS (Cascading Style Sheets) : Langage de feuille de style utilisé pour contrôler la
présentation visuelle des pages web. Il permet de définir les couleurs, polices, mises
en page, etc.
En somme, le HTML fournit la structure de base d'une page web, tandis que le CSS en
détermine l'apparence visuelle.
Liaison du CSS au HTML
Pour appliquer des styles CSS à une page HTML, plusieurs méthodes sont possibles :
Feuille de style externe : Créer un fichier .css séparé et le lier au document HTML à
l'aide de la balise <link> dans le <head> :
<link rel="stylesheet" href="styles.css">
Style interne : Intégrer le CSS directement dans le document HTML en utilisant la
balise <style> dans le <head> :
<style>
/* Styles CSS ici */
</style>
Style en ligne : Appliquer des styles directement sur un élément HTML via l'attribut
style :
<p style="color: blue;">Texte en bleu</p>
L'utilisation d'une feuille de style externe est recommandée pour une meilleure maintenance et
réutilisation du code.
Sélecteurs et propriétés en CSS
Le CSS permet de cibler des éléments HTML spécifiques à l'aide de sélecteurs et de leur
appliquer des styles via des propriétés. Une règle CSS se compose d'un sélecteur suivi d'un
bloc de déclarations, chaque déclaration étant une propriété et sa valeur.
p{
color: red;
}
Sélecteurs CSS simples
Les sélecteurs CSS simples permettent de cibler des éléments HTML en fonction de leur type,
classe ou identifiant :
Sélecteur de type : Cible tous les éléments d'un certain type.
p{
color: blue;
}
Sélecteur de classe : Cible tous les éléments ayant une certaine classe.
.ma-classe {
color: green;
}
Sélecteur d'identifiant : Cible l'élément ayant un certain identifiant.
#mon-id {
color: red;
}
Mise en forme du texte en CSS
Propriétés liées aux polices :
o font-family : Définition de la police de caractères.
o font-size : Définition de la taille du texte.
o font-weight : Définition de l'épaisseur du texte.
Propriétés liées au texte :
o text-align : Alignement du texte (gauche, droite, centré, justifié).
o text-decoration : Ajout de décorations au texte (souligné, barré, etc.).
o text-transform : Transformation du texte (majuscule, minuscule, capitaliser).
Gestion des couleurs en CSS
Les couleurs en CSS peuvent être définies de plusieurs façons : par nom de couleur,
par code hexadécimal, par valeur RGB ou RGBA. Voici les différentes méthodes :
Couleurs nommées
Certaines couleurs ont des noms réservés en CSS, comme red, blue, green, etc. Exemple :
p{
color: red;
}
Code hexadécimal
Les couleurs peuvent être spécifiées en utilisant un code hexadécimal de six
chiffres, commençant par un #. Les deux premiers chiffres représentent la valeur
du rouge, les deux suivants pour le vert, et les deux derniers pour le bleu (RGB).
Exemple pour une couleur bleue :
p{
color: #0000FF;
}
RGB (Rouge, Vert, Bleu)
La méthode rgb() permet de spécifier une couleur en fonction de la quantité de
rouge, de vert et de bleu. Les valeurs vont de 0 à 255 pour chaque composant.
Exemple :
p{
color: rgb(255, 0, 0); /* Rouge */
}
RGBA (Rouge, Vert, Bleu, Alpha)
rgba() est similaire à rgb(), mais elle inclut également un quatrième paramètre pour
l'opacité, allant de 0 (complètement transparent) à 1 (complètement opaque).
Exemple :
p{
color: rgba(0, 0, 255, 0.5); /* Bleu avec une opacité de 50% */
}
Opacité en CSS
L'opacité en CSS peut être ajustée pour contrôler la transparence d'un élément. Cela se fait à
l'aide de la propriété opacity, qui prend une valeur allant de 0 (complètement transparent) à 1
(complètement opaque). Exemple :
div {
opacity: 0.5; /* L'élément sera semi-transparent */
}
Avec opacity, toute l'image ou l'élément devient transparent, y compris son contenu.
Cependant, si vous souhaitez seulement affecter l'opacité de l'arrière-plan, vous pouvez
utiliser la valeur rgba dans les couleurs.
Le modèle des boîtes (Box Model)
Concept : Chaque élément est représenté comme une boîte englobant le contenu, le
padding, la bordure et la marge.
Propriétés associées :
o width et height : Dimensions du contenu.
o padding : Espacement intérieur entre le contenu et la bordure.
o border : Bordure entourant le padding et le contenu.
o margin : Espacement extérieur entre la bordure et les autres éléments.
Positionnement et affichage des éléments
Propriété display : Contrôle de la manière dont un élément est affiché (bloc, en ligne,
etc.).
Propriété position : Définition du positionnement des éléments (statique, relatif,
absolu, fixe).
Propriété float : Alignement des éléments à gauche ou à droite pour un flux de texte
autour d'eux.
Fonds, dégradés et ombres en CSS
Couleur de fond : Définition de la propriété background-color.
Images de fond : Utilisation de la propriété background-image pour ajouter des
images en arrière-plan.
Dégradés :
o Linéaires : Création de transitions progressives entre plusieurs couleurs en
ligne droite.
o Radiaux : Création de transitions circulaires ou elliptiques entre plusieurs
couleurs.
Ombres :
o Texte : Application d'ombres portées sur le texte avec text-shadow.
o Boîtes : Application d'ombres portées sur les éléments avec box-shadow.
Sélecteurs CSS complexes
Sélecteurs d'attributs : Ciblage des éléments en fonction de la présence ou de la
valeur d'un attribut spécifique.
Pseudo-classes :
o :hover : Appliquer des styles lors du survol d'un élément.
o :nth-child() : Cibler un élément en fonction de sa position parmi ses frères.
Pseudo-éléments :
o ::before et ::after : Insérer du contenu avant ou après un élément, souvent
utilisé pour ajouter des décorations ou des icônes.
Transitions, animations et transformations en CSS
Transitions :
o Propriété transition : Application de changements progressifs sur les
propriétés CSS pour créer des effets fluides lors des interactions utilisateur.
Animations :
o @keyframes : Définition d'étapes clés pour animer des éléments de manière
complexe.
o Propriétés associées : animation-name, animation-duration, animation-timing-
function, etc.
Étude des propriétés display en CSS
Objectifs :
Comprendre le fonctionnement de display.
Découvrir les valeurs : inline, block, inline-block, flex, grid, etc.
Faire des exercices pratiques.
Plan :
Introduction à display :
o Différences entre inline et block.
o Utilisation de inline-block pour combiner les deux comportements.
Propriétés avancées (flex, grid) :
o Créer une mise en page flexible avec display: flex.
o Réaliser une grille avec display: grid.
Positionnement des éléments en CSS
Objectifs :
Étudier la propriété position et ses valeurs : static, relative, absolute, fixed, sticky.
Découvrir l'utilité du z-index.
Plan :
Les bases de position :
o Explication des valeurs et de leur impact sur la position des éléments.
Gérer les empilements avec z-index.
Exercices pratiques :
o Positionner des éléments fixes comme une barre de navigation.
Propriétés float et clear en CSS
Objectifs :
Comprendre comment les éléments flottent avec float.
Utiliser clear pour gérer les débordements.
Plan :
Flottement d’éléments (float) :
o Exemple : Créer une mise en page avec des images flottantes.
Utilisation de clear pour réinitialiser le flot des éléments.
Combiner avec overflow pour gérer les débordements.
Couleurs et arrière-plans en CSS
Objectifs :
Maîtriser les propriétés de fond et de couleur.
Ajouter des dégradés linéaires et radiaux.
Plan :
Couleurs de fond (background-color) :
o Découvrir les différentes notations : mots-clés, hexadécimal, rgb, hsl.
Images de fond (background-image) :
o Insérer une image de fond, ajuster sa position, sa taille et son répétition.
Dégradés (linear-gradient, radial-gradient) :
o Créer des dégradés simples et complexes.
o Comprendre les préfixes vendeurs (-webkit-, -o-, etc.).
Tableaux en HTML et CSS
Objectifs :
Structurer des tableaux en HTML.
Mettre en forme les tableaux avec CSS.
Plan :
Création de tableaux HTML :
o Utilisation des éléments <table>, <tr>, <th>, <td>.
Mise en forme avec CSS :
o Bordures, espacements, et styles avec nth-child().
Médias en HTML et CSS
Objectifs :
Insérer des images, audio et vidéos dans une page web.
Étudier les bonnes pratiques pour l’intégration.
Plan :
Images :
o Insérer, redimensionner et positionner des images avec CSS.
o Ajouter un cadre autour des images.
Audio et vidéo :
o Utiliser les balises <audio> et <video>.
o Étudier les attributs comme controls, autoplay, loop.
Utilisation de plateformes externes (YouTube, Vimeo).
7 Sélecteurs CSS avancés
Objectifs :
Découvrir et utiliser les sélecteurs avancés et les pseudo-classes/éléments.
Plan :
Sélecteurs avancés :
o Sélecteurs universels, d’attributs, et combinatoires.
Pseudo-classes :
o Étudier :hover, :first-child, :nth-child(), etc.
Pseudo-éléments :
o Utilisation de ::first-letter, ::before, ::after.
Transitions et animations en CSS
Objectifs :
Créer des transitions et animations interactives.
Plan :
Transitions CSS :
o Étudier les propriétés transition-property, transition-duration.
o Ajouter des transitions simples et complexes.
Animations avec @keyframes :
o Créer des animations complexes.
o Étudier les propriétés comme animation-delay, animation-iteration-count.
Formulaires en HTML et CSS
Objectifs :
Étudier les éléments de formulaire en HTML.
Améliorer leur style et leur interaction.
Plan :
Bases des formulaires :
o Créer un formulaire simple avec les attributs method, action, name.
Éléments avancés :
o Utiliser des attributs comme autofocus, placeholder, required.
Mise en forme des formulaires avec CSS.
Responsive Design
Objectifs :
Adapter un site aux écrans de différentes tailles.
Comprendre les media queries.
Plan :
Introduction :
o Étudier l’utilité du responsive design et le rôle de la balise <meta> avec
viewport.
Media Queries :
o Utilisation de @media pour définir des styles spécifiques.
Création d’un site responsive :
o Adapter les mises en page pour différents appareils.
Conclusion
Ce parcours m’a permis de comprendre les bases du développement web en HTML et CSS.
J’ai appris à structurer une page web, à la styliser, et à la rendre interactive et accessible sur
plusieurs types d’appareils.
