1

Exercice - HTML
Contexte :
Vous allez créer un site web complet qui représente un portfolio personnel. Ce
site comportera plusieurs pages interconnectées, présentant votre parcours, vos
projets, et un ensemble d’articles sur un sujet de votre choix. L’objectif est
d’appliquer vos connaissances en HTML en structurant et en organisant le
contenu de manière claire, cohérente et esthétique.

Images :
Toutes les images que vous utiliserez dans le site devront être stockées dans un
dossier images situé dans le répertoire mon-site. Les images associées aux
articles devront être placées dans un sous-dossier articles à l’intérieur du dossier
images.

Renseignement obligatoire :
Chaque section et chaque partie des pages doit être complétée. Si certaines
informations personnelles vous manquent, vous êtes invité à les imaginer afin
de remplir toutes les parties. Aucune section ne doit rester vide.

Structure générale des pages :

Toutes les pages de votre site doivent être subdivisées en trois parties
principales :

1. Entête :
○ Logo du site : Le logo sera représenté par les initiales de votre
nom. Vous pouvez créer votre logo à l’aide de sites web comme
[Link], [Link], ou [Link].
○ Menu de navigation : Ce menu permettra d'accéder aux différentes
pages du site. Il doit contenir les éléments suivants :
■ Accueil pour accéder à la page [Link],
■ À propos pour accéder à la page [Link],
■ Blog pour accéder à la page [Link],
■ Contact pour accéder à la page [Link].
2. Corps de la page :
Le contenu du corps varie en fonction de la page, suivez les instructions
spécifiques pour chaque page.
3. Pied de page :
○ Insérez la mention "Copyright - Votre nom et prénom".
○ Ajoutez des logos des réseaux sociaux (Facebook, Twitter,
Instagram, et YouTube) avec des liens menant vers vos comptes. Si
vous n'avez pas de compte sur ces réseaux, mettez un lien vers
leurs pages d'accueil respectives.

Par Boris DEHOUMON

 2

Structure du site :

1. Dossier principal :
Créez un dossier nommé mon-site. Ce dossier contiendra tous les fichiers
HTML ainsi que le répertoire d’images du site.
2. Pages du site :
○ Page d'accueil : [Link] - Présentation personnelle
○ Page À propos : [Link] - Biographie complète
○ Dossier articles : Créez un dossier nommé articles dans mon-site
pour héberger 10 articles différents sur un thème de votre choix.
○ Page blog : [Link] - Liste des articles.
○ Page contact : [Link] - Formulaire de contact.

Page d'accueil : [Link] - Présentation personnelle

La page d'accueil présente les informations suivantes de manière structurée :

1. Présentation de l’étudiant : Nom, prénom, photo, description courte

○ Pour le nom et prénom, il est recommandé d’utiliser une balise qui
permet de structurer le texte en titre avec un niveau d'importance
élevé, car c’est l’élément central de la page.
○ La photo doit être insérée avec une balise permettant d’afficher
une image. Pensez à ajouter un texte alternatif pour les utilisateurs
ne pouvant pas voir l'image.
○ La description courte devrait être présentée dans une balise
adaptée à l'affichage de texte en paragraphe.
2. Objectifs ou motivations : Pourquoi avez-vous choisi la filière
informatique
○ Utilisez une balise permettant d'introduire un sous-titre pour cette
section, avec un niveau d’importance inférieur à celui du nom et
prénom.
○ Le texte explicatif devrait être structuré en paragraphe(s),
permettant une lecture fluide.
3. Témoignages : Commentaires ou recommandations de professeurs ou
camarades
○ Chaque commentaire ou recommandation peut être affiché à
l'aide d'une balise permettant de citer du texte de manière formelle.
Vous devez aussi utiliser une autre balise pour indiquer qui a fait le
commentaire (le professeur ou le camarade).

Par Boris DEHOUMON

 3

○ Si vous avez plusieurs témoignages, envisagez de les organiser

dans une structure de liste ou en les séparant de séparateur de
ligne.
4. Mes Valeurs : Une brève description des valeurs qui vous guident
○ Pour les valeurs, une liste est idéale pour organiser et présenter
chaque valeur (comme l’engagement, la créativité, etc.). Utilisez
une balise adaptée pour chaque élément de la liste, en mettant en
avant ce qui mérite d’être souligné.
5. Citation Inspirante : Un slogan personnel ou une citation
○ Utilisez une balise spécifique pour les citations, qui permet de
mettre en avant une phrase ou une idée clé. Si la citation est
attribuée à une autre personne, il existe une balise dédiée pour citer
l’auteur.
○ Pour un slogan personnel, une balise spéciale pourrait être utilisée
afin de souligner l’importance de ce message dans votre
présentation.

Page à-propos : [Link] - Biographie complète

Informations générales :

Chaque section de la biographie devra être structurée en sections distinctes,

avec des titres de même niveau pour chaque partie.

Détails pour chaque partie :

1. Introduction : Nom, prénom, date de naissance, lieu de naissance,

nationalité

La présentation inclut des informations personnelles telles que le nom,

prénom, date de naissance, lieu de naissance, et nationalité. Ces
informations doivent être structurées en paragraphes clairs.

2. Parcours scolaire : Présentez vos études sous forme de tableau

○ La présentation des études se fait sous forme d’un tableau
comprenant deux colonnes :
■ Une colonne pour les années de fréquentation (exemple :
2005-2011).
■ Une colonne pour le nom des établissements (exemple :
École primaire ABC).
○ Exigence : Ce tableau doit comporter au moins trois lignes
correspondant à trois établissements différents (école primaire,
collège, université).
3. Expériences professionnelles : Décrivez vos stages ou emplois
précédents

Par Boris DEHOUMON

 4

Utilisez des listes de définition pour structurer cette partie. Chaque poste
ou stage séparé par un tiret pour définir la durée peut être un terme
défini, avec une description pour expliquer les responsabilités, et les
tâches effectuées.

4. Compétences et talents : Mettez en avant vos compétences

Utilisez une liste pour énumérer vos principales compétences ou talents.

Chaque compétence peut être accompagnée d'une description pour
expliquer son importance ou ses applications.

5. Activités extrascolaires : Mentionnez vos clubs, sports ou activités

culturelles

Présentez les activités extrascolaires sous forme de tableau, en

mentionnant les clubs, sports ou activités culturelles dans lesquels vous
êtes engagé(e), avec une courte description pour chaque activité.

6. Intérêts personnels : Loisirs et passions

Utilisez soit des paragraphes, soit une liste pour décrire vos loisirs et
passions. Chaque intérêt peut être détaillé avec des exemples d'activités
associées.

7. Projets futurs : Objectifs de carrière

Décrivez vos objectifs de carrière sous forme de paragraphes. Vous

pouvez diviser cette section en sous-parties si vous avez des objectifs
académiques et professionnels distincts.

8. Voyages et cultures : Expériences à l'étranger ou échanges culturels

Utilisez des listes de définition pour structurer cette section. Chaque lieu
visité ou échange culturel peut être un terme défini, avec une description
expliquant comment cela a enrichi votre perspective ou influencé votre
parcours.

9. Défis rencontrés : Obstacles surmontés

Décrivez chaque défi rencontré sous forme de paragraphe, en expliquant

les leçons apprises ou les obstacles que vous avez réussi à surmonter.

10. Réflexions personnelles : Pensées et rêves pour l'avenir

Organisez cette section en paragraphes, où vous exprimez vos aspirations

et rêves pour l'avenir, avec une réflexion sur votre parcours jusqu'à
présent.

Par Boris DEHOUMON

 5

Dossier articles - Création et structure des pages d'articles

Informations générales :

Dans le dossier mon-site, vous devez créer un sous-dossier nommé articles. Ce

dossier contiendra 10 fichiers HTML distincts, nommés [Link] à
[Link]. Chaque fichier représentera un article distinct traitant d’un sujet
commun que vous aurez choisi (ex. : mode, sport, technologie). Cependant,
chaque article pourra aborder une sous-catégorie différente du sujet principal.

Tous les articles doivent être structurés en sections distinctes, avec des titres
de même niveau pour chaque partie, afin de garantir une organisation claire. Le
contenu doit être suffisamment fourni, soit en étant rédigé par vous-même, soit
en utilisant des articles trouvées sur internet.

Les images associées aux articles doivent être placées dans un sous-dossier
articles à l'intérieur du répertoire images.

Détails pour chaque partie d'un article :

1. Titre de l'article

Chaque article doit commencer par un titre principal bien visible qui
résume le sujet spécifique de l’article. Ce titre doit utiliser une balise
réservée pour les titres majeurs.

2. Catégorie

Indiquez une catégorie pour chaque article, en fonction de la

sous-thématique abordée dans l'article. Cette catégorie peut être stylisée
ou mise en valeur avec un formatage simple.

3. Image d'illustration

Chaque article doit inclure une image d'illustration liée au contenu de

l'article. Utilisez une balise appropriée pour intégrer l’image, avec un texte
alternatif (alt) pour des raisons d’accessibilité ou si l’image ne se charge
pas.

4. Date de création

La date de création de chaque article doit être incluse et visible, sous un

format clair (ex. : JJ-MM-AAAA). Vous pouvez choisir de placer cette
information avant ou après le contenu de l'article.

5. Auteur

Par Boris DEHOUMON

 6

Mentionnez le nom de l'auteur de l'article. Cette information doit être

affichée dans une section dédiée.

6. Contenu structuré de l'article

Le contenu principal de chaque article doit être divisé en plusieurs

sections, chacune avec un titre secondaire qui introduit un sous-thème
du contenu. Le texte devra être organisé de manière structurée avec les
éléments suivants :

○ Paragraphes pour les explications et descriptions.

○ Listes (à puces ou numérotées) si le contenu nécessite une
énumération d'éléments.
○ Citations pour introduire des avis ou des références externes.
○ Liens hypertextes pour pointer vers d'autres articles ou sources
d'information.
○ Tableaux, si vous devez présenter des données sous forme
tabulaire.

Page [Link] - Liste des articles

Informations générales :

La page [Link] doit afficher une liste des articles sous une forme visuelle
attrayante. Chaque article sera présenté dans un rectangle, contenant l'image
d'illustration et le titre de l'article. L'utilisateur pourra cliquer sur chaque
rectangle pour accéder à l'article complet. Vous devez créer un lien pour chaque
article qui renverra vers le fichier HTML correspondant dans le dossier articles
(ex. : [Link]).

Chaque rectangle doit être bien structuré pour séparer visuellement l'image et
le titre de l'article.

Détails pour chaque partie d'un article dans la liste :

1. Image d'illustration

Insérez une image pour chaque article. Cette image doit être extraite des
pages des articles déjà créées. L’image doit être redimensionnée pour
s’adapter à l’espace alloué dans chaque rectangle.

2. Titre de l'article

Affichez le titre de chaque article de manière claire et concise. Ce titre

doit être cliquable pour permettre la navigation vers l’article
correspondant. Utilisez une balise appropriée pour créer un lien autour du
titre afin que l'utilisateur puisse être redirigé vers l'article pertinent.

Par Boris DEHOUMON

 7

3. Structure du rectangle

Chaque article doit être placé dans un rectangle distinct qui contient à la
fois l'image et le titre de l'article. Le rectangle devra avoir une mise en
forme cohérente, en utilisant des balises adéquates pour structurer son
contenu de manière claire. Il ne s’agit pas de dessiner un rectangle, mais
la disposition doit être sous forme de rectangle.

4. Disposition globale

Organisez tous les rectangles d'articles sous forme de grille ou de liste.

Vous pouvez organiser les rectangles de manière à ce qu’ils soient
disposés en colonnes ou en lignes, en fonction de l'apparence souhaitée.
Assurez-vous que la présentation soit uniforme et que chaque article soit
facilement accessible.

Page [Link] - Formulaire de contact

Informations générales :

La page [Link] doit contenir un formulaire de contact complet,

permettant aux utilisateurs de saisir des informations personnelles et d’envoyer
une demande. Le formulaire doit inclure des champs de saisie variés (texte,
numérique, e-mail, etc.), ainsi que des éléments de validation pour vérifier que
certaines informations sont correctement renseignées avant l'envoi. Il est
important d’ajouter une zone de confirmation ou d’erreur après l’envoi pour
informer l’utilisateur si le formulaire a été soumis avec succès ou non.

Détails pour chaque champ du formulaire :

1. Nom (champ de texte)

Un champ de texte simple pour saisir le nom de l’utilisateur. Ce champ

doit être requis, et l’utilisateur doit recevoir un message d’erreur s’il tente
de soumettre le formulaire sans le remplir.

2. Prénom (champ de texte)

Un second champ de texte pour le prénom de l’utilisateur, également

requis.

3. Âge (champ numérique)

Un champ numérique pour permettre à l’utilisateur d’entrer son âge.

Assurez-vous d’ajouter une validation pour accepter uniquement des
valeurs numériques.

Par Boris DEHOUMON

 8

4. E-mail (champ de saisie pour adresse e-mail)

Un champ de saisie spécifique pour l’adresse e-mail de l’utilisateur. Ce

champ doit être configuré pour vérifier que l’adresse saisie est valide
(conforme au format e-mail).

5. Téléphone (optionnel)

Un champ optionnel pour saisir le numéro de téléphone. Vous pouvez

indiquer que le numéro est facultatif et ne pas marquer ce champ comme
requis.

6. URL (optionnel)

Un autre champ optionnel pour permettre à l’utilisateur d’entrer une URL

(ex. : un lien vers son site web ou profil). Vous pouvez préciser qu'il est
facultatif et non requis pour soumettre le formulaire.

7. Sujet (liste déroulante)

Un menu déroulant avec plusieurs options de sujets (à définir),

permettant à l’utilisateur de choisir la raison de sa demande.

8. Préférence de contact (boutons radio)

Des boutons radio pour sélectionner une préférence de contact (par

e-mail ou téléphone). Cela permet à l’utilisateur d'indiquer par quel
moyen il souhaite être contacté.

9. Newsletter (case à cocher)

Une case à cocher pour permettre à l’utilisateur de s'inscrire à une

newsletter. Cette option doit être facultative.

10. Message (zone de texte)

Une zone de texte pour permettre à l’utilisateur de rédiger un message

ou une demande. Il s’agit d’un champ plus large pour saisir des
informations détaillées.

11. Date limite de disponibilité (sélection de date)

Un sélecteur de date pour indiquer une date limite de disponibilité. Ce

champ permettra à l’utilisateur de choisir une date précise.

12. Heure préférée de contact (sélection d’heure)

Par Boris DEHOUMON

 9

Un sélecteur d’heure pour permettre à l’utilisateur de choisir une heure

de contact préférée.

13. Bouton Envoyer

Un bouton d'envoi pour soumettre le formulaire. Lorsque l’utilisateur

clique sur ce bouton, le formulaire sera validé et soumis.

14. Bouton Réinitialiser

Un bouton de réinitialisation pour permettre à l’utilisateur de vider tous

les champs du formulaire et de recommencer.

15. Zone de confirmation ou d'erreur

Un espace dédié pour afficher un message de confirmation en cas de

succès ou un message d'erreur si le formulaire contient des champs
invalides ou manquants.

Par Boris DEHOUMON