Scribd
Importer
38 vues2 pages

Exo HTML

Le document fournit des instructions détaillées pour créer une page HTML nommée index.html, incluant des éléments de base comme un titre, un en-tête, une image, des listes, et un lien externe. Il demande également d'enrichir la page avec une barre de navigation, des sections supplémentaires, et un formulaire de contact, tout en appliquant des styles CSS dans un fichier externe style.css. Enfin, il propose d'intégrer des éléments avancés comme des vidéos, des grilles CSS, et des animations.

Transféré par

jatiouisalwa246
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 DOCX, PDF, TXT ou lisez en ligne sur Scribd
38 vues2 pages

Exo HTML

Le document fournit des instructions détaillées pour créer une page HTML nommée index.html, incluant des éléments de base comme un titre, un en-tête, une image, des listes, et un lien externe. Il demande également d'enrichir la page avec une barre de navigation, des sections supplémentaires, et un formulaire de contact, tout en appliquant des styles CSS dans un fichier externe style.css. Enfin, il propose d'intégrer des éléments avancés comme des vidéos, des grilles CSS, et des animations.

Transféré par

jatiouisalwa246
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 DOCX, PDF, TXT ou lisez en ligne sur Scribd

Consignes :

1. Créez une page HTML [Link] avec les éléments de base :

1. Titre de la page : "Mon site web enrichi", affiché dans l'onglet du navigateur.
2. En-tête principal : <h1> contenant le texte "Bienvenue sur mon site web enrichi".
3. Description de la page : Un paragraphe <p> expliquant que cette page est un exercice
avancé en HTML et CSS.
4. Image : Ajoutez une image libre de droits (via URL externe) avec les attributs src et
alt.
5. Liste ordonnée : Trois centres d'intérêt.
6. Liste non ordonnée : Langages que vous souhaitez apprendre.
7. Lien externe : Un lien <a> ouvrant dans un nouvel onglet vers un site de votre choix
(ex. MDN Web Docs ou Wikipédia).

2. Enrichissez la structure de la page avec des éléments supplémentaires :

1. Barre de navigation :
o Utilisez une <nav> pour ajouter des liens vers les sections "Accueil", "À
propos", "Projets", et "Contact".
o Les liens doivent être ancrés dans la page pour naviguer vers des sections
spécifiques (ex. <a href="#projets">Projets</a>).
2. Sections supplémentaires :
o Une section <section> "À propos" contenant un paragraphe sur vous-même.
o Une section <section> "Projets" :
 Ajoutez deux <article> représentant des projets, chacun contenant
une image, un titre <h2>, et une description.
o Une section <section> "Contact" contenant un formulaire :
 Champ pour le nom <input type="text">.
 Champ pour l’email <input type="email">.
 Champ texte pour le message <textarea>.
 Bouton "Envoyer" <button>.

3. Appliquez des styles CSS dans un fichier externe [Link] :

1. Typographie et couleurs :
o Fond clair pour la page (#f8f9fa).
o Texte principal de couleur sombre (#333).
o Police d’écriture sans-serif pour tout le contenu.
2. En-tête principal <h1> :
o Couleur personnalisée (ex. bleu ou vert).
o Texte centré.
3. Navigation :
o Barre de navigation horizontale avec un fond contrasté.
o Liens dans la barre de navigation changent de couleur au survol (:hover).
4. Listes <ol> et <ul> :
o Ajoutez des puces personnalisées via CSS.
o Gérez les marges internes (padding) et externes (margin).
5. Conteneur principal <div> :
o Ajoutez une bordure arrondie, un ombrage doux, et un espacement interne.
6. Formulaire :
o Ajoutez des styles pour rendre les champs plus visibles (bordures, arrière-plans
clairs).
o Changez la couleur du bouton lorsqu'il est survolé.

4. Intégrez des éléments avancés :

1. Médias :
o Vidéo : Ajoutez une vidéo dans la section "Projets" avec la balise <video> et
les attributs controls, autoplay, et loop.
o Audio : Optionnel, ajoutez un fichier audio avec la balise <audio> dans la
section "Contact".
2. Grille CSS :
o Utilisez display: grid pour organiser les articles des projets en colonnes.
3. Animations CSS :
o Ajoutez une transition fluide sur les liens (transition: 0.3s ease-in-out).
o Appliquez une animation d’apparition à chaque section lors du défilement
(@keyframes et animation).

Vous aimerez peut-être aussi