Module : Gestion Web des Bases de Données pour l'IoT
Niveau : 1ère année IRIC
Travaux Pratiques HTML CSS
§ Contenu du TP 1 :
Exercice 1A : Introduction au HTML
o Balises de base : <html>, <head>, <body>, <title>.
o Structuration : titres (<h1> à <h6>), paragraphes (<p>), listes
(<ul>, <ol>, <li>).
o Mise en gras et italique : <strong>, <em>.
o Ajout de la déclaration <!DOCTYPE html> et des attributs
comme lang et meta.
Exercice 1B : Les liens
o Liens absolus et relatifs avec <a href="">.
o Ouverture des liens dans un nouvel onglet (target="_blank").
Exercice 1C : Les images
o Inclusion d’images avec <img> et utilisation des attributs src, alt, width,
et height.
o Ajout de règles horizontales avec <hr>.
Exercice 1D : Introduction au CSS
o Utilisation de la balise <style> dans <head>.
o Sélecteurs simples (h1, h2, p).
o Propriétés CSS : font-family, font-size, color, line-height.
o Notions de couleurs en codes hexadécimaux (#FFFFFF).
§ Contenu du TP 2:
Exercice 2A : Sélecteurs de classes CSS
o Ajout de classes CSS aux balises HTML avec l’attribut class.
o Utilisation de la balise <span> pour styliser une partie d’un texte.
o Propriété opacity pour définir la transparence des éléments.
Exercice 2B : Divs, IDs, et mise en page basique
o Regroupement du contenu avec <div> pour organiser visuellement la page.
o Utilisation des IDs (id) pour styliser des éléments uniques.
o Propriétés CSS :
§ width et max-width pour gérer les dimensions.
§ background-color pour le fond.
§ padding et margin pour gérer les espaces internes et externes.
§ border et son écriture raccourcie.
16 Pr. Belkhala
Module : Gestion Web des Bases de Données pour l'IoT
Niveau : 1ère année IRIC
o Introduction au principe DRY (Don't Repeat Yourself) pour optimiser le code
CSS.
Exercice 2C : Utilisation des outils de développement du navigateur
o Exploration des DevTools dans Chrome pour inspecter et modifier le DOM et
CSS en temps réel.
o Désactivation et édition des propriétés CSS.
o Ajustements de styles (ex. marges, largeur) directement dans le navigateur.
Exercice 2D : Balises HTML sémantiques et validation
o Introduction aux balises sémantiques HTML5
comme <header>, <footer>, <nav>, <section>, <article>,
et <aside>.
o Différence entre <article> et <section>.
o Ajout de <figure> et <figcaption> pour des images accompagnées de
légendes.
o Validation du code HTML via des outils en ligne ([Link]).
§ Contenu du TP3 :
Exercice 3A : Mise en page d'une page de voyage
• Organisation du contenu en sections sémantiques
(<header>, <nav>, <main>, <footer>).
• Ajout d’images et balisage des titres.
• Introduction à la hiérarchie des balises et au regroupement logique du contenu.
Exercice 3B : Le modèle de boîte (Box Model)
• Explication du concept : contenu, padding, bordure et marge.
• Définition de dimensions (width, max-width) et de styles généraux (polices,
couleurs, interlignes).
• Ajout d’espaces entre les sections et à l’intérieur des éléments.
Exercice 3C : Flottants et images
• Utilisation de l’attribut CSS float pour positionner les images à gauche ou à droite
du texte.
• Introduction aux "hero images" (images principales en haut de page).
• Gestion des marges et alignement des images pour un affichage propre.
Exercice 3D : Liens et ancrages
• Création de liens internes à une page (ancrages avec id et href="#id").
• Liens externes avec target="_blank" pour ouverture dans un nouvel onglet.
• Ajout de liens autour des images et création de "back-to-top" pour faciliter la
navigation.
17 Pr. Belkhala
Module : Gestion Web des Bases de Données pour l'IoT
Niveau : 1ère année IRIC
§ Contenu du TP4 :
Exercice 4A : Stylisation des liens
o Pseudo-classes : :link, :visited, :hover, :focus, :active.
o Ordre d'application des styles pour les liens (priorité et spécificité).
o Groupement des sélecteurs pour combiner des styles similaires.
Exercice 4B : Stylisation de la navigation
o Suppression des styles par défaut des listes dans les menus de navigation.
o Utilisation de sélecteurs descendants pour cibler des sous-éléments spécifiques
(nav ul, nav li).
o Création d'un menu horizontal avec des liens cliquables élargis (inline-
block et padding).
Exercice 4C : Spécificité, CSS partagé et centrage de contenu
o Compréhension de la spécificité en CSS et comment elle impacte le rendu des
styles.
o Migration des styles internes (balise <style>) vers un fichier CSS externe
pour partage et optimisation.
o Utilisation de la propriété text-align pour centrer du contenu.
o Centrage horizontal des éléments en utilisant margin: auto.
o Révision des marges et paddings pour un affichage cohérent sur toutes les
pages.
Exercice 4D : Configuration du meta viewport
o Ajout de la balise meta viewport pour optimiser l'affichage sur mobile.
o Désactivation de l'ajustement automatique de la taille du texte par les
navigateurs mobiles.
o Utilisation de initial-scale, device-width, et maximum-
scale pour contrôler le zoom et la largeur de l'écran.
§ Contenu du TP5 :
Exercice 5A : Création d'un nouveau site et images d'arrière-plan en CSS
o Définition d'une police par défaut pour la page.
o Suppression des marges par défaut de la page.
o Lien vers une feuille de styles externe.
o Propriétés CSS pour les images d'arrière-plan :
§ background-image, background-position, background-
repeat, background-size.
o Création d'une section "hero" avec texte et image d'arrière-plan.
Exercice 5B : Utilisation des polices avec Google Fonts
18 Pr. Belkhala
Module : Gestion Web des Bases de Données pour l'IoT
Niveau : 1ère année IRIC
o Intégration de Google Fonts et utilisation de polices personnalisées.
o Configuration de "fallback fonts" pour assurer la compatibilité.
o Amélioration de la lisibilité des textes avec les propriétés line-
height et margin.
o Style des titres et des paragraphes avec des polices spécifiques.
Exercice 5C : Affinement de la mise en page avec le modèle de boîte
o Réduction de l'espace inutilisé sous une image (propriété vertical-
align).
o Limitation de la largeur des éléments avec max-width.
o Création de conteneurs internes et externes (wrappers).
o Différences entre les sélecteurs d'ID et de classe.
§ Contenu du TP6 :
Exercice 6A : Boutons CSS et flottants
o Création d'une navigation avec des balises sémantiques (<nav>).
o Stylisation de listes et liens en navigation (suppression des puces, mise en
ligne des items).
o Utilisation de float pour la mise en page (navigation alignée à droite,
éléments flottants).
o Création de boutons avec CSS :
§ Propriétés : background-color, border-
radius, padding, text-transform.
§ Affinement du style avec line-height et margin.
o Réutilisation de sélecteurs de classe pour plusieurs éléments.
Exercice 6B : Images haute résolution
o Optimisation des images pour les écrans HiDPI ou Retina (@2x images).
o Utilisation d’images haute résolution en doublant leur taille native dans le
HTML/CSS.
o Explication des pixels dans le code vs. pixels matériels.
o Remplacement des images basse résolution par des images HiDPI dans un site
existant.
o Tests visuels pour valider les différences de qualité d’affichage.
Exercice 6C : Création de colonnes avec CSS Grid et media queries
o Introduction à CSS Grid pour la mise en page :
§ Création de colonnes (grid-template-columns) et gestion des
espaces (gap).
§ Utilisation de grid-column pour faire en sorte qu’un élément
occupe plusieurs colonnes.
o Identification d’un breakpoint pertinent pour passer d’un design à deux
colonnes à un design à une colonne.
19 Pr. Belkhala
