Travaux pratique
visualiser la page web associée à un fichier HTML
Technique 1 :
1. Ouvrez un éditeur de texte tel que Notepad++, Bloc-notes, etc.
2. Écrivez votre code, y compris la structure de base avec un titre H1.
3. Enregistrez votre fichier avec l'extension .html.
4. Double-cliquez sur le fichier HTML.
Technique 1 :
1. Installez l'éditeur Visual Studio Code.
2. Installez l'extension "HTML Preview".
Pour vérifier la syntaxe, vous pouvez vous référer au site du consortium W3C :
[Link]
Exercice1 :Formatage de texte
Écrivez l'extrait de code HTML qui réalise la structuration du texte dans un fichier nommé
[Link] (vérifiez la syntaxe avec le site du consortium W3C) :
Exercice 2 :Manipulation des image et lien HyperText
Vous récupérez l'image [Link] et créez cinq pages HTML :
[Link]
[Link]
[Link]
[Link]
[Link]
Dans ces pages, vous ajoutez un titre H1 ainsi qu'un lien de retour vers la page
initiale.
Vous créez des zones cliquables avec les balises <img> et <map>.
Pour l'image, utilisez une taille :
width= "249"
height= "260".
Dans la balise <area>, vous utilisez :
Shape : poly
Coordonnées :
o HTTP : 129,0,260,95,129,138
o HTML : 260,96,209,249,130,138
o JS : 209,249,49,249,130,139
o WEB-API : 48,249,0,96,129,138
o CSS : 0,95,128,0,128,137
Exercice 3 : Créer une page qui ressemble à l’image suivante :
Exercice 4 :
Question 1 : Créer un fichier [Link], integrer un code qui affiche sur la page :
Un titre H1 : Cours HTML
Un menu :
Balise
o Tableau
o Paragraphe
o Image
o Audio
CSS
o Couleur
o Taille de texte
Question 2 :
Le titre H1 sera en orange
Le menu de niveau 1 sera en bleu
Le menu de niveau 2 sera en rouge
Question3 :
Appliquer les style en utilisant les trois techniques pour intégrer les CSS dans
une page HTML:
Méthode interne (Internal).
Méthode externe (External).
Méthode en ligne (Inline).
Exercice 5 :
Nous allons désormais créer un Curriculum Vitae en HTML et le mettre en forme
avec un fichier de style. L’objectif est d’obtenir un résultat similaire `a celui obtenu
sur la Figure ci-dessous :
Question 1 : Créer un fichier [Link] et y faire référence dans votre fichier html.
Question 2 : Faire apparaitre le texte au centre de la page en modifiant les valeurs des
marges pour le sélecteur body.
Question 3 : Utiliser la famille sans-serif pour la police de caractères, sur l’ensemble
de la page, en modifiant le sélecteur body.
Question 4 : Définir une classe .img-circle afin de modifier l’affichage de l’image :
1. centrer par rapport au texte
2. diminuer sa taille
3. créer un ovale qui délimite le contour de l’image (la propri´et´e `a modifier est
border-radius).
Assigner cette classe `a l’image dans le fichier html.
Question 5 : Définir une classe .section qui permettre d’obtenir un cadre autour des
différentes sections du CV, en modifiant les propriétés border-top et border- bottom.
Question 6 : Définir une classe .emph qui permettre de mettre en rouge et en italique
les informations importantes.
Question 7 : Diviser les informations vous concernant en deux colonnes avec
l’utilisation d’un tableau. Pour les informations personnelles (âge, date de naissance,
adresse), vous pouvez utiliser une liste non ordonnée .
