TD1 - HTML/CSS : Rappels

Objectifs

Ce premier TD a 2 grandes familles d’objectifs :

  1. Faire un rappel de la conception de sites web statiques que vous avez déjà vu en Licence 1 au semestre 2 dans l’UE Programmation et Applications Interactives. En particulier

    • préparer l’environnement de travail (navigateur web, éditeur VSCode)
    • HTML pour la structure (HelloWorld, head body, imbrication, balises importantesn, formulaires)
    • CSS pour la présentation/mise en forme (Sélecteurs, Propriétés, Valeurs)
  2. Faire les premiers pas en conception de sites web dynamiques, sur les postes du CREMI, et, si vous le souhaitez, aussi sur vos propres ordinateurs

    • CREMI
    • MAMP sur vos postes
    • Hello World

Vocabulaire

Il y a un certain vocabulaire qu’il faut absolument maîtriser :

HTML

  1. Balise

    • nom de balise
    • attribut(s) de balise
    • valeurs des attribut(s) de balise
    • intérieur de balise)
  2. Imbrications de balises

  3. L’arbre DOM

CSS

  1. Sélecteurs, propriétés, valeurs

  2. Box Model (margin, padding, border, …)

  3. Flex layout

Conception de sites web statiques

Dans cet exemple, nous allons créer une page web statique, séparé en structure (via HTML) et présentation (CSS): la page de profil pour un réseau social.

Objectif :

  1. Concevoir une page de profil exemple simple pour un réseau social en HTML.

    • Photo de profil
    • Nom de l’utilisateur
    • Bio/description
    • Nombre d’amis
    • Section des publications (afficher au moins deux publications)
    • Liste d’amis (afficher au moins trois amis)
    • Formulaire pour poster du contenu
  2. Utiliser une sémantique HTML appropriée.

  3. Appliquer une mise en forme de base pour rendre la page visuellement attrayante.

Exercice 1.1 Préparation

Dans cet exercice, nous allons préparer la création d’un document HTML5 pour la page profil du réseau social. Pour cela :

  1. Au CREMI, dans votre dossier espaces/www, créez un dossier cswd. Dans ce dossier, créez un sous-dossier td1.

  2. Si vous travaillez sur votre ordinateur personnel, dans vos documents, créez un dossier cswd. Dans ce dossier, créez un sous-dossier td1.

  3. Ouvrez un éditeur de texte, je vous conseille VSCode. Au CREMI, il est installé, et sur vos ordinateurs personnels, vous pouvez le télécharger sur (https://code.visualstudio.com/).

  4. Sélectionnez “Open Folder” (et non pas “Open File”) dans VSCode, et ouvrez le dossier cswd. Ceci vous permet d’avoir un accès rapide à toute votre arborescence dans VSCode !

  1. Créez un nouveau fichier dans votre dossier cswd/td1, et sauvegardez le sous le nom profile.html.

    Votre arborescence de fichiers au CREMI sera donc :

    espaces
    └── www
        └── cswd
            └── td1
                └── profile.html
_(si vous travaillez sur vos ordinateurs personnels, ce sera certainement un peu différent, par exemple :)_
    ...
    └── ...
        └── cswd
            └── td1
                └── profile.html
  1. Tapez le code suivant représentant un document HTML5 simpliste et enregistrez-le. Souvenez-vous, ce code se trouve aussi sur la Cheatsheet HTML qui récapitule des balises HTML5 fréquentes. Notez la séparation en en-tête et corps du document, et respectez l’indentation !

Fichier HTML (profile.html):

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width">
        <title>Hello World</title>
    </head> 
    <body>
        <p>Premier exemple HTML5</p>
    </body>
</html>
  1. Ouvrir votre page en allant sur votre page web personnel. Vous pouvez la connaître en vous connectant sur https://services.emi.u-bordeaux.fr/intranet/mesinfos/. La forme de cet URL est comme suit :
https://prenom-nom.emi.u-bordeaux.fr/cswd/td1/profile.html

Exercice 1.2 Code source de votre page

Faites afficher le code source de votre page dans votre navigateur (pour Firefox c’est Affichage\(->\)Code source de la page ou bien \(<\)CTRL\(>\)-U) et comparez-le au contenu de votre fichier de votre éditeur de texte. Qu’observez vous ?

Exercice 1.3 Affichage sur votre téléphone

Comme votre site est en ligne est accessible sur Internet, vous pouvez aussi l’afficher sur votre téléphone. Soit vous saisissez l’URL de votre page sur votre téléphone, soit, vous créez un QR Code de cet URL, p.ex. en utilisant l’outil ci-dessus :

https://patrick-reuter.emi.u-bordeaux.fr/qrcode/phpqrcode/index.php

Exercice 1.4 Page d’une page web

Créez un nouveau fichier dans votre dossier cswd/td1, et sauvegardez le sous le nom index.html.

Fichier HTML (index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">      
    <title>Mon site web</title>
</head>
<body>
    <header>
        <h1>Mon site</h1>
        <nav>
            <ul id="listemenu">
                <li>Accueil</li>
                <li>Profil</li>
                <li>Contact</li>
            </ul>
        </nav>
    </header>
    <main>
        <article class="mespublications">
            <h2>Titre de la publication 1</h2>
            <p>Contenu de la publication 1...</p>
        </article>
        <article class="mespublications">
            <h2>Titre de la publication 2</h2>
            <p>Contenu de la publication 2...</p>
        </article>
    </main>
    <footer>
        <p>2025 Mon site web : créé par xx.</p>
    </footer>
</body>
</html>

Testez votre page.

Exercice 1.5 Lien hypertextes

Dans la liste non-triée avec Accueil, Profile, Contact, transformez le texte “Profile” en un lien hypertexte vers profile.html, et le texte “Contact” en un lien hypertexte vers contact.html (bien que le contenu de contact.html n’est pas encore créé).

Exercice 1.6 Style CSS pour la page profil

Créer un nouveau fichier CSS nommé styles.css dans un sous-dossier css de votre dossier td1.

Dans ce fichier CSS, mettez les règles suivants :

body {
    font-family: 'Arial', sans-serif;   
    background-color: #f4f4f4; 
}

Bien évidemment, il faut lier le fichier styles.css du sous-dossier css au fichier HTML qui l’utilise…

Testez. Voyez-vous la différence ?

Exercice 1.7 suite

Appliquez les règles suivant à la balise main. Il faudra donc que vous choissez le bon sélecteurs.

    margin: 20px;
    padding: 20px;
    background-color: #ffffff; 
    border-radius: 12px; 
    box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2);

Exercice 1.8 suite

Appliquez les règles suivant aux balises header et footer. L’objectif par rapport à l’exercice précédent et de viser deux balises à la fois :

    background-color: #1b529a;
    color: #ffffff;
    text-align: center;
    padding: 10px;

Exercice 1.9 suite

Stylisez la classe mespublications selon vos envies. Il peut y avoir par exemple une bordure, une marge, et un padding, et une couleur de fond/texte.

Exercice 1.10 suite

Stylisez le menu de navigation comme suit :

#listemenu {
    list-style: none;
    padding: 0;
}

#listemenu li {
    display: inline;
    margin: 15px 15px;
}

Exercice 1.11 media queries

Nous voulons maintenant avoir le menu en horizontal pour un affichage sur téléphone mobile :

@media screen and (max-width: 675px)
{

}

Modifiez la propriété display des éléments de liste de menu en valeur block s’il s’agit d’une consultation sur navigateur.

Testez en modifiant la largeur de votre navigateur (en la réduisant au minimum).

Testez également sur votre téléphone.

Vous avez aussi la possibilité de simuler un affichage téléphone sur votre ordinateur. Pour cela, ouvrez l’inspecteur de votre navigateur, et choisissez la vue mobile, ainsi qu’un téléphone de votre choix.

Exercice 1.12 suite

Créez la page profile.

  • Pour une mise en forme cohérente, elle doit utiliser le même header/footer.

  • Incluez une photo de 100x100 d’une personnalité de votre choix.

  • Incluez un paragraphe avec une description de la personallité.

  • Incluez une liste avec trois amis de cette personnalité.

  • Incluez une information de la date de la dernière connexion.

  • Continuez à enrichir la page.

Exercice 1.13 suite

Créez la page contact, et vérifiez que tous les 3 pages sont bien connectées.