Vous êtes sur la page 1sur 6

Exercice I

1. Définir : La balise, HTML, Page Web, Site web, Attribut.

2. Quels sont les outils nécessaires pour la création d’une page html ?

3. Quelle est la structure d’un élément html ?

4. Donner les éléments de la structure minimale d’une page web

5. La déclaration DOCTYPE est-elle obligatoire ? Où doit-elle être placée ? Quelles informations


contient-elle ?

Exercice II

1. Où est déclaré le nom de l’élément racine du document ? Quel est son rôle et son nom ?

2. Quels sont les éléments enfants de l’élément <html>?

3. A quoi sert l’élément <head> ? Quels sont ses éléments enfants ? Peuvent-ils être employés
plusieurs fois dans le même document ?

4. Quel élément est obligatoire dans l’élément <head> ? À quoi sert-il ?

Exercice III

1. Peut-on écrire le code suivant dans une page ?

<body>

CAMERECOLE ! Le meilleur des sites éducatif.

<h1>Le site du HTML 5 et de CSS 3</hl>

</body>

2. Écrire une page contenant des titres de chapitres suivis d’une introduction puis d’un paragraphe
ayant un titre et une conclusion. Choisir les éléments appropriés à une bonne structuration.

Exercice IV

1. Écrire les mots HTML et CSS en gras dans un texte normal.

2. Créer une liste de noms numérotés de l à 4.

3. Créer une liste de noms numérotés de 7 à 11.

4. Créer la même liste de noms avec des puces.

5. Quels sont les attributs indispensables dans l’élément <img />?

Exercice VI

1. Inclure une image JPEG dans un paragraphe tout en faisant en sorte qu’elle conserve ses
dimensions initiales.
2. Soit la phrase : « Le langage HTML permet la création de pages structurées, CSS3 des présentations
variées. » créer un lien sur HTML qui pointe sur www.camerecole.org

3. Citer tous les éléments spécialisés utilisables pour la création des tableaux et leur ordre
d’apparition dans le code HTML5.

4. Créer un tableau composé de quatre lignes et de cinq colonnes.

5. L’attribut action de l’élément <form> est-il obligatoire ? Quel est son rôle ?

Correction exercice I

1. Définition

La balise, tag en anglais, désigne dans le domaine de la programmation une série de caractères
destinée à déclencher, de façon automatique, l'exécution d'une action par un programme
informatique. À la lecture d'une balise, un programme informatique exécute ainsi instantanément
une commande spécifique.

Le HTML (HyperText Markup Language) est un langage permettant de concevoir les pages web
statique.

Page Web : Tout document pouvant s’ouvrir dans un navigateur, Fichier conçus à partir du langage
HTML.

Site web : Ensemble de pages web liées entre elles par des liens hypertextes.

Attribut : Paramètre ou propriété d’une balise permettant de donner plus de précision sur l’action
d’une balise. L’attribut permet d’enrichir l’action de la balise.

2. Pour créer une page web statique, nous avons besoin de deux éléments logiciels :

a) Un éditeur de texte

b) Un Navigateur.

3. Un élément a la structure suivante : <non> Contenu </non>

4. La structure minimale d’une page web est composée de deux parties : l’entête et le corps.

5. La déclaration Doctype est obligatoire et doit être placée en tête du code. Elle contient le nom de
l'élément racine soit html.

Correction exercice I

1. Définition

La balise, tag en anglais, désigne dans le domaine de la programmation une série de caractères
destinée à déclencher, de façon automatique, l'exécution d'une action par un programme
informatique. À la lecture d'une balise, un programme informatique exécute ainsi instantanément
une commande spécifique.

Le HTML (HyperText Markup Language) est un langage permettant de concevoir les pages web
statique.
Page Web : Tout document pouvant s’ouvrir dans un navigateur, Fichier conçus à partir du langage
HTML.

Site web : Ensemble de pages web liées entre elles par des liens hypertextes.

Attribut : Paramètre ou propriété d’une balise permettant de donner plus de précision sur l’action
d’une balise. L’attribut permet d’enrichir l’action de la balise.

2. Pour créer une page web statique, nous avons besoin de deux éléments logiciels :

a) Un éditeur de texte

b) Un Navigateur.

3. Un élément a la structure suivante : <non> Contenu </non>

4. La structure minimale d’une page web est composée de deux parties : l’entête et le corps.

5. La déclaration Doctype est obligatoire et doit être placée en tête du code. Elle contient le nom de
l'élément racine soit html.

Correction exercice III

1. Ce code n’est pas conforme car l’élément <body> contient du texte directement (CAMERECOLE !
Le meilleur des sites éducatif.), alors qu’il devrait être inclus dans un des éléments enfants de <body>

2. Écrivons la page

<!DOCTYPE html>

<html >

<head>

<title>première ti : cours surs le langage html</title>

</head>

<body>

<h1>Chapitre 1 : </h1>

<h2>Introduction</h2>

<p>Un formulaire est un objet d’une page web permettant de faciliter la communication entre
l’internaute et le site web. Le formulaire offre une interface permettant de recueillir les informations
d’un utilisateur. Il est composé de plusieurs éléments de l’interface homme-machine : champ de
saisie, boutons à cliquer, liste de choix, radio bouton, case à cocher. </p>

<h2>Conclusion</h2>

<p> Les formulaires sont des objets très important dans la conception des sites web, dans la mesure
où ils permettent une communication entre les internautes et le site par l’intermédiaire des pages
d’inscriptions et autres. Toutes les informations remplies de formulaire sont immédiatement
transmises à une page cible située dans une machine distante ou locale qui se chargera de récupérer
ces informations pour les traiter. L’usage d’un langage de script (Javascript, PHP, etc..) est nécessaire
pour pouvoir écrire le code de traitement </p>

</body>

</html>

Correction exercice V

1. Écrirons les mots HTML et CSS en gras dans un texte normal.

<p>La racine du document <strong>HTML5</strong> est html. Pour mettre du style au code html, on
utilise du <strong>CSS</strong></p>

La racine du document HTML5 est html. Pour mettre du style au code html, on utilise du CSS

2. Créons une liste de noms numérotés de l à 4.

<ol >

<li>Langage XHTML</li>

<li>Styles CSS </li>

<li>Scripts JavaScript</li>

<li>Scripts PHP</li>

</ol>

Langage XHTML

Styles CSS

Scripts JavaScript

Scripts PHP

3. Créons une liste de noms numérotés de 7 à 11.

<ol start="7">

<li>Langage XHTML</li>

<li>Styles CSS </li>

<li>Scripts JavaScript</li>

<li>Scripts PHP</li>

</ol>
Langage XHTML

Styles CSS

Scripts JavaScript

Scripts PHP

4. Créons la même liste de noms avec des puces.

<ul>

<li>Langage XHTML</li>

<li>Styles CSS </li>

<li>Scripts JavaScript</li>

<li>Scripts PHP</li>

</ul>

Langage XHTML

Styles CSS

Scripts JavaScript

Scripts PHP

5. L’attribut alt est obligatoire et src est indispensable car il contient l’URL du fichier image.

Correction exercice VI

1. Image

<img style="border: 1px outset #a119c3; display: block; margin-left: auto; margin-right: auto;"
src="/images/camerecole_noel.png" alt="camerecole noel" />

2. Créons le lien

Le langage HTML permet la création de pages structurées, CSS3 des présentations variées.

3. Citons les éléments spécialisés utilisables pour la création des tableaux et leur ordre d’apparition
dans le code HTML5.

<table>, <thead>, <tbody>, <tr>, <th>, <td>, <tfoot>

4. Créons un tableau composé de quatre lignes et de cinq colonnes.

<table border="1">
<tr> <td> L1 C1 </td><td>L1 C2</td><td>L1 C3</td><td>L1 C4</td><td>L1 C5</td> </tr>

<tr> <td> L2 C1 </td><td>L2 C2</td><td>L2 C3</td><td>L2 C4</td><td>L2 C5</td> </tr>

<tr> <td> L3 C1 </td><td>L3 C2</td><td>L3 C3</td><td>L3 C4</td><td>L3 C5</td> </tr>

<tr> <td> L4 C1 </td><td>L4 C2</td><td>L4 C3</td><td>L4 C4</td><td>L4 C5</td> </tr>

</table>

L1 C1 L1 C2 L1 C3 L1 C4 L1 C5

L2 C1 L2 C2 L2 C3 L2 C4 L2 C5

L3 C1 L3 C2 L3 C3 L3 C4 L3 C5

L4 C1 L4 C2 L4 C3 L4 C4 L4 C5

Vous aimerez peut-être aussi