Exercices de HTMLde A i lla e.

o 1 / 18

Exercices de HTML
[Link]–Tutoriels d'informatique

Exercices résolus du tutoriel [Link]/html/

(Ce document inclut des liens vers les sections du tutoriel et vers les solutions des exercices sur le Web)

Qu'est-ce que HTML

2. Premier document HTML

[ EXERCICE 1 ] Créer le premier document HTML

3. Comentarios
[ EJERCICIO 2 ] Crear documento HTML con comentarios

4. Styles
[ EXERCICE 3 ] Quatre paragraphes avec styles

5. Paragraphes
[ EXERCICE 4 ] Données et chiffres

6. Format de texte
[ EXERCICE 5 ] Formats de texte

7. Cabeceras

8. Liens
[ EJERCICIO 6 ] Enlaces favoritos

9. Listes
[ EXERCICE 7 ] Listes de liens

10. Imágenes
[ EJERCICIO 8 ] Receta de patatas fritas

11. Tableaux
[ EXERCICE 9 ] Groupe de musique (Queen)

12. Divisions
[ EXERCICE 10 ] Conception fluide avec deux colonnes

13. Formulaires
[ EJERCICIO 11 ] Notificar una incidencia
 Exercices de HTMLde A i lla e. o 2 / 18

[ EXERCICE 1 ] Créer le premier document HTML

En suivant les indications données dans la section Premier document HTML créer le fichier [Link]
un éditeur de texte et s'assurer qu'il s'affiche correctement dans différents navigateurs web (Google Chrome,
Internet Explorer, Mozilla Firefox...). Par exemple, dans Google Chrome :

O, par exemple, dans Mozilla Firefox :

Resultado: [Link]/html/[Link]
 Exercices de HTMLde A i lla e. o 3 / 18

[ EXERCICE 2 ] Créer un document HTML avec des commentaires

Créer le fichier [Link] prêt et le département Comentarios et vérifier que, bien que les commentaires
les écrits ne s'affichent pas à l'écran, mais sont présents dans le code source :

Résultat :[Link]/html/[Link]
 Exercices de HTMLde A i lla e. o 4 / 18

[ EXERCICE 3 ] Quatre paragraphes avec styles

Écrire le code d'un document HTML qui, lorsqu'il est affiché à l'écran, apparaît :

Pour cela, écrire où il faut les déclarations suivantes seulement une fois :

background:aqua;
background:silver;
couleur:bleu;
couleur:rouge;
police:verdana;
taille de police : 20px ;
text-align:center;
text-align:droite;

Resultado: [Link]/html/[Link]

Solution :[Link]/html/[Link]
 Exercices de HTMLde Aïlla.5 / 18

[ EJERCICIO 4 ] Datos y números

En utilisant les éléments p, pre, br et hr vus dans la section Paragraphe écrire le code d'un
document HTML qui, lorsqu'il est affiché dans un navigateur web, montre ce qui suit :

Resultado: [Link]/html/[Link]

Solution :[Link]/html/[Link]

[ EJERCICIO 5 ] Formatos de texto

Utilisant certains des éléments trouvés dans le paragraphe Format de texte , écrire le code HTML
nécessaire pour voir ce qui suit dans un navigateur :

Resultado: [Link]/html/[Link]

Solution :[Link]/html/[Link]
 Exercices de HTMLde A i lla e. o 6 / 18

[ EXERCICE 6 ] Liens favoris

Créer le fichier [Link] :

En cliquant sur le lien recherché, vous devez accéder (dans le même onglet du navigateur) au fichier suivant :

Dans le document [Link], en cliquant sur les liens BiGg, DuKDuKGo y Google, il faut accéder
respectivement aux sites web suivants dans de nouveaux onglets :

[Link]
[Link]
[Link]

Et en cliquant sur le lien ici, il faut revenir à la page [Link].

 Ejerciciosde HTMLde A i lla e. o 7 / 18

D'autre part, en cliquant sur le lien Réseaux sociaux, il faut accéder (également dans le même onglet du
navigateur) au fichier suivant :

Dans ce cas, en cliquant sur Facebook, Instagram et Twitter, il faut ouvrir de nouveaux onglets sur les sites web :

[Link]
[Link]
[Link]

Resultado: [Link]/html/[Link]

Solución: [Link]/html/[Link]
 Exercices de HTMLde A i lla e. o 8 / 18

[ EXERCICE 7 ] Listes de liens

Crear el archivo listas-de-e la [Link] l :

Dans ce fichier, il faut écrire la structure suivante de listes imbriquées (notez qu'il y a deux listes à l'intérieur d'une autre) :

<ul>
<li>Moteurs de recherche</li>
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>Réseaux sociaux</li>
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>
</ul>

Dans le document, en cliquant sur les liens Bi g , Google, Fa e ook et T itte , vous accéderez à de nouvelles
onglets aux adresses web suivantes :
[Link]
[Link]
[Link]
[Link]

Además, hay que tener en cuenta las siguientes consideraciones:

Le texte des liens non visités – dans ce cas Facebook et Twitter – doit être affiché en rouge
(couleur:rouge;), et être souligné (l'option par défaut du navigateur).
En passant le pointeur de la souris sur le texte d'un lien qui n'a pas encore été visité, la couleur
changer de rouge en vert (couleur: vert;) et ne sera pas souligné (text-decoration: none;).
E l'image est le aso du e la e à Google .
 Exercices HTMLde A i lla e. o 9 / 18

Le texte d'un lien vers un site web déjà visité s'affichera en violet (couleur: violet;), comme c'est
le cas de l'e la e à Bi g .
El texto de un enlace activo debe ser de color lima (color:lime;). Por ejemplo, véase en la siguiente
l'image à laquelle vous faites référence est fictive, il est déduit, il se fait prêter du crédit sur lui :

Voici le code nécessaire pour respecter ces considérations :

a:link {
couleur:rouge;
}
a:hover {
couleur:vert;
text-decoration:none;
}
a:visited {
color:purple;
}
a:active {
couleur : lime;
}

Il faut également respecter les indications suivantes :

Le type de police utilisé dans tout le document est Verdana.

La couleur de fond d'écran est jaune (couleur:jaune;).
Le texte des Listes de sélections est écrit de façon défectueuse d'un élément h1 défini de manière aléatoire.
(couleur:orange;), taille 20px et centré.
Tous les textes relatifs aux éléments de la liste ont une taille de 15p.

Resultado: [Link]/html/[Link]

Solution :[Link]/html/[Link]
 Exercices de HTMLde A i lla e. o 10 / 18

[ EJERCICIO 8 ] Receta de patatas fritas

Étant donné la structure suivante de fichiers et de dossiers :

C:/html/recetas-de-cocina/[Link]
C:/html/recetas-de-cocina/[Link]
C:/html/recettes-de-cuisine/imagettes/[Link]

En visualisant le fichier [Link] dans un navigateur web, vous verrez quelque chose comme :

Écrire le code des fichiers [Link] et [Link], en tenant compte des indications suivantes :
Tous les styles sont spécifiés dans le fichier [Link].
Le type de police utilisé dans tout le document est Verdana.
La taille de l'image est de 300 x 225 pixels.
 Exercices HTMLde A i lla e. o 11 / 18

Dans le tableau suivant, les couleurs et tailles des différents éléments apparaissant sur la page web sont indiquées :

Éléments Couleur du texte Tamaño

h1 #333 20px

h2 #666 16px

p #000 12px
li

On peut utiliserarcetteimage ou toute autre.

Résultat :[Link]/html/recetas-de-cocina/[Link]

Solution :[Link]/html/[Link]

Amélioration de l'exercice

Dans le dossier recettes-de-cuisine, créez le fichier [Link] qui affiche une liste de liens vers plusieurs recettes.
cuisine. Par exemple :

Créer donc les fichiers [Link], [Link], etc. Tous doivent

faire usage du fichier [Link]. De plus, dans chaque recette de cuisine, inclure un lien vers le fichier [Link] pour
revenir.

Tous les liens doivent être affichés en bleu et en 12 pixels.

Toutes les images doivent être dans le dossier images.

 Exercices de HTMLde A i lla e. o 12 / 18

[ EJERCICIO 9 ] Grupo de música (Queen)

Étant donné la structure suivante de fichiers et de dossiers :

C:/html/groupes-de-musique/[Link]
C:/html/groupes-de-musique/[Link]
C:/html/grupos-de-musica/imagenes/[Link]

En ouvrant le fichier [Link] dans un navigateur web, vous verrez quelque chose de semblable à :
 Ejerciciosde HTMLde A i lla e. o 13 / 18

Écrire le code des fichiers [Link] et [Link], en tenant compte des indications suivantes :

Tous les styles sont spécifiés dans le fichier [Link].

Le type de police utilisé dans tout le document est Verdana.
La taille de l'image est de 400 x 200 pixels.
Le bord de la table est de 1px et de couleur noire.
L'espace entre le contenu des cellules du tableau et leur bord est de 10px.
Le lien vers le site officiel de Queen doit s'ouvrir dans un nouvel onglet.

Dans le tableau suivant, les couleurs et les tailles de différents éléments affichés sur la page web sont indiquées :

Éléments Couleur du texte Tamaño

En-tête h1 #333 20px

En-têtes h2 #666 16px

Céllules d'en-tête du tableau blanc 12px

Lien bleu 12px

Paragraphe. #000 12px

Éléments de la liste.
Données du corps et pied de la table.

Titre du tableau #000 14px

Les couleurs de fond du tableau sont :

Parties de la table Couleur de fond

En-tête de la table #666

Corps du tableau #fff

Pied de la table #ccc

On peut utiliserarc'estimage ou toute autre.

Resultado: [Link]/html/groupes-de-musique/[Link]

Solution :[Link]/html/[Link]

Amélioration de l'exercice

Dans le dossier groupes-de-musique, créez le fichier [Link] qui affiche une liste de liens vers plusieurs groupes.
música. Por ejemplo:
 Exercices de HTMLde A i lla e. o 14 / 18

Par conséquent, créez également les fichiers [Link], [Link], etc. Tous doivent faire usage
du fichier [Link]. De plus, dans chaque groupe de musique, inclure un lien vers le fichier [Link] pour revenir.

Toutes les images des groupes de musique doivent être dans le dossier images.

[ EJERCICIO 10 ] Diseño fluido con dos columnas

Étant donné le fichier [Link], dont le contenu est :

* {
marge:0;
padding:0;
}
a:link, a:visited, a:hover, a:active {
couleur:#cfc;
taille de police:1em;
}
corps {
background:#eed;
font-family:verdana;
}
h1 {
couleur:#00a;
taille de police:1.8em;
padding-bottom:.5em;
}
img {
hauteur:auto;
margin-bottom:.5em;
margin-top:.2em;
max-width:100%;
}
li {
margin-left:1.3em;
padding-bottom:.3em;
padding-right:.2em;
}
 Exercices de HTMLde A i lla e. o 15 / 18

p {
taille-de-font:1em;
padding-bottom:.5em;
}
#cabecera {
couleur de fond : #000;
couleur:#f96;
padding:2%;
}
#columnas {
couleur de fond:#ddd;
overflow: hidden;
padding-bottom:2%;
}
#contenedor {
marge:10px auto;
largeur:95%;
}
#contenido {
couleur de fond:#ddd;
float:gauche;
marge-inférieure:-32767px;
max-width:-moz-calc(92% - 120px);
max-width:-webkit-calc(92% - 120px);
max-width:calc(92% - 120px);
remplissage:2%;
rembourrage-bas:32767px;
largeur:71%;
}
#menu {
couleur d'arrière-plan:#999;
float:gauche;
margin-bottom:-32767px;
largeur minimale : 120px;
remplissage:2%;
padding-bottom:32767px;
largeur:21%;
}
#pie {
couleur de fond:#bbb;
claire:les deux;
couleur:#900;
padding:2%;
text-align:center;
}

Écrire le code d'un document HTML ([Link]) associé au fichier estilo-dos

[Link] pour que lors de sa visualisation dans un navigateur web, cela se voit :
 Exercices HTMLde A i lla e. o 16 / 18

La valeur de l'attribut href des liens du menu doit être : "#"

En bas de page, le lien vers leTutoriel HTMLil doit s'ouvrir dans un nouvel onglet du navigateur.
L'image du logo d'Abrirllave peut être téléchargéearici.

Resultado: [Link]/html/[Link]

Solution :[Link]/html/[Link]
 Exercices de HTMLde A i lla e. o 17 / 18

[ EXERCICE 11 ] Notifier un incident

Supposons qu'Ana Sanz Tin soit une employée du département marketing d'une entreprise et, à travers un
formulaire web de l'intranet de cette entreprise, souhaite informer que l'imprimante de son département a cessé
de fonctionner et affiche le message suivant :

Le toner de couleur jaune est vide.

Dans un navigateur web, le formulaire aura un aspect similaire à :

Écrire le code du fichier [Link] en tenant compte que :

Les contrôles du premier groupe doivent être étiquetés en utilisant des attributs for dans les éléments <label>.
les associant avec des attributs id.
Les données du formulaire (utilisateur, département, etc.) doivent être envoyées à [Link].
Dans l'entreprise, il existe 3 départements : Informatique, Marketing et Ventes.
Dans la description de l'incident, plusieurs lignes de texte peuvent être écrites. Cependant, ce contrôle doit être
définir le de 3 lignes par 40 colonnes.
Dans le deuxième groupe du formulaire, il y a deux boutons, l'un pour réinitialiser les données saisies et l'autre
pour les envoyer.

Lorsque Ana Sanz Tin remplira le formulaire, à l'écran il pourrait être affiché :
 Exercices HTMLde A i lla e. o 18 / 18

Resultado: [Link]/html/[Link]

Solution :[Link]/html/[Link]

À PROPOS DU CONTENU DE CE DOCUMENT

Tous les contenus de ce document font partie deTutoriel de HTMLdeOuvrir cléet sont sous la licence
Creative Commons Attribution 4.0 International(CC BY 4.0).