Scribd
Importer
11 vues2 pages

Création d'un mini CV en HTML/CSS

Le document présente un exercice de développement web statique consistant à créer une page de portfolio avec une section de profil et une grille de compétences en HTML et CSS. Il décrit les étapes pour structurer le code HTML et appliquer des styles CSS, notamment la mise en forme de l'image et la disposition en grille des compétences. Il inclut également des exercices supplémentaires sur la manipulation des tableaux et des formulaires HTML.

Transféré par

x42k92g6jv
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
11 vues2 pages

Création d'un mini CV en HTML/CSS

Le document présente un exercice de développement web statique consistant à créer une page de portfolio avec une section de profil et une grille de compétences en HTML et CSS. Il décrit les étapes pour structurer le code HTML et appliquer des styles CSS, notamment la mise en forme de l'image et la disposition en grille des compétences. Il inclut également des exercices supplémentaires sur la manipulation des tableaux et des formulaires HTML.

Transféré par

x42k92g6jv
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

TD DEVELOPPEMENT WEB STATIC

EXERCICE 1 : Réalisation d’un mini CV

Écrire le code HTML et CSS permettant de créer une page de type portfolio contenant :
- Un profil (nom, photo, description)
- Une grille de compétences

Partie 1 : Structure HTML


1. Dans la balise <body>, crée une div principale de classe container.

2. À l’intérieur de cette div, ajoute une première section div de classe profile.

3. Dans profile :
- Ajoute une image de profil (url : [Link]).
- Ajoute un titre principal (ex: nom de la personne).
- Ajoute une courte description (en une ou deux phrases).

4. Ajoute ensuite une deuxième section div de classe skills contenant :


- Un titre de niveau 2 (<h2>) intitulé "Skills"
- Une div de classe skills-grid contenant 6 blocs de compétences de ton choix (par
ex. HTML, CSS, JavaScript, etc.).

Remarque : Chaque compétence sera dans une div de classe skill.

NAJ-PRO FREELANCE
Partie 2 : Mise en forme CSS
· Applique une police simple (Arial ou équivalent) à toute la page.
· Centre le contenu de la section profile horizontalement.
· Rends l’image ronde, avec une taille de 150×150 px.
· Donne à skills-grid une disposition en grille de plusieurs colonnes responsive :
- Utilise display: grid
- Utilise grid-template-columns pour avoir des colonnes qui s’adaptent à la taille
de l’écran
- Donne un minimum de 120px et un maximum de l’espace disponible
· Ajoute un fond de votre choix à chaque compétence (classe skill), un peu de
padding et des bords arrondis.

EXERCICE 2 : Manipulation des tableaux


Fournissez le code HTML ayant permis d’obtenir le tableau ci-dessous

EXERCICE 3 : Manipulation des formulaires

Objectif de l’exercice :
Cet exercice a pour but de renforcer votre
compréhension des formulaires HTML et CSS.

Tous les éléments présents dans ce formulaire ont


déjà été abordés en cours. À l’aide de vos
connaissances, essayez de reproduire un formulaire
qui se rapproche le plus possible de celui présenté sur
l’image.

Commencez par écrire le code à la main sur papier


avant de le saisir sur l’ordinateur. Cela vous permettra
d’identifier vos lacunes et de mieux structurer votre
raisonnement.

N’oubliez pas que le caractère * indique qu’un champ


est obligatoire. Pensez à utiliser la balise <span> pour
le faire apparaître visuellement à côté des labels.

NAJ-PRO FREELANCE

Vous aimerez peut-être aussi