TD1 - HTML/CSS : Rappels
Objectifs
Ce premier TD a 2 grandes familles d’objectifs :
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)
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
Balise
- nom de balise
- attribut(s) de balise
- valeurs des attribut(s) de balise
- intérieur de balise)
Imbrications de balises
L’arbre DOM
CSS
Sélecteurs, propriétés, valeurs
Box Model (margin, padding, border, …)
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 :
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
Utiliser une sémantique HTML appropriée.
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 :
Au CREMI, dans votre dossier
espaces/www
, créez un dossiercswd
. Dans ce dossier, créez un sous-dossiertd1
.Si vous travaillez sur votre ordinateur personnel, dans vos documents, créez un dossier
cswd
. Dans ce dossier, créez un sous-dossiertd1
.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/).
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 !
Créez un nouveau fichier dans votre dossier
cswd/td1
, et sauvegardez le sous le nomprofile.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
- 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>
- 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.
: 20px;
margin: 20px;
padding: #ffffff;
background-color: 12px;
border-radius: 0 5px 9px rgba(0, 0, 0, 0.2); box-shadow
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 :
: #1b529a;
background-color: #ffffff;
color: center;
text-align: 10px; padding
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.