PROGRAMMER EN HTML

OUTILS DE PRODUCTION DES SITES WEB STATIQUES

1-Editeurs de textes

Ce sont des programmes dédiés à l'écriture de code. On peut en général les utiliser pour de multiples langages de programmation. Ils se révèlent être de puissants alliés pour les créateurs de sites web. Il existe de nombreux éditeurs dédiés à la création de sites web :

Sous Windows

· Bloc-Notes :On peut tout à fait créer un site web juste avec Bloc-Notes, le logiciel d'édition de texte intégré par défaut sur Windows.

· Notepad++, est l'un des plus utilisés d'entre eux sous Windows. Ce logiciel est simple, en français et gratuit.

D'autres éditeurs disponibles sous Windows existent : jEdit ; PSpad ; ConTEXT.

2-Navigateurs

Ce sont des logiciels qui permettent de visualiser les pages web. Les principaux navigateurs sont : Internet Explorer, Mozilla Firefox, Opéra, Google Chrome, Safari, etc.

3-Les langages du web

HTML et CSS sont deux "langues" qu'il faut connaitre pour créer des sites web. C'est le navigateur web qui fera la traduction entre ces langages informatiques et ce qu’on verra s'afficher à l'écran. Il faut noter cependant que 30% de sites web sont réalisés à partir des CMS (Content Managment System ou Système de Gestion des Contenus) qui sont des plateformes toutes faites tels que : wordpress, joomla, etc.

Le rôle de HTML et CSS : Les deux langages qui se complètent ont des rôles différents :

· HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML qu’on écrit qu’on souhaite que la page affiche : du texte, des liens, des images... On dira par exemple : "Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc.".

· CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleur, taille du texte...). Ce langage est venu compléter le HTML en 1996.

Le travail du navigateur est de lire et exécuter le code HTML et CSS pour afficher un résultat visuel à l'écran. Si le code CSS dit "Les titres sont en rouge", alors le navigateur affichera les titres en rouge.

Les pages web créées uniquement avec le HTML et CSS sont dites statiques parce qu’il n’y a pas interactivité entre l’internaute et le serveur. Pour avoir des sites dynamiques, il faut utiliser en plus d’autres langages comme le JavaScript, PHP par exemple pour compléter le html et le css.

STRUCTURE D’UN DOCUMENT HTML

Le HTML est un langage qui permet de présenter des informations sur Internet et dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents.HTML a été inventé en1991 par un scientifique nommé Tim Berners-Lee. Les différentes versions du HTML sont : HTML1, HTML2, HTML3, HTML4 et HTML5.

Lorsqu’on regarde une page sur internet, ce qu’on voit est l’interprétation par le navigateur du code HTML. Pour voir le code HTML d’une page sur internet, il suffit de cliquer tout simplement sur la rubrique « vue » dans le menu supérieur du navigateur et sélectionner « source ».

Le langage HTML utilise les éléments, les balises et les attributs.

1-Elements

Les éléments donnent la structure d'un document HTML en indiquant comment le navigateur doit présenter la page web.

HTML n’est qu’une question d’éléments, apprendre le HTML c’est apprendre à utiliser les éléments.

Exemples :

p est un élément utilisé pour marquer les paragraphes

b est un élément utilisé pour afficher un texte en caractères gras

i est un élément utilisé pour mettre un texte en italique, etc.

2- Balises

Les balises sont des étiquettes qu’on utilise pour marquer le début et la fin d'un élément. Toutes les balises ont le même format : elles commencent par un signe inférieur à « < » et finissent par un signe supérieur à « > ». On les appelle des « chevrons ».

Il existe deux types de balise :

- Les balises ouvrantes : <b>

- Les balises fermantes : </b>

Exemple :

Si on écrit dans un éditeur de texte

<b>Ce texte doit être en caractères gras. </b>

<b> est une balise ouvrante qui marque le début de la ligne.

</b>est une balise fermante qui marque la fin de la ligne.

Le navigateur va afficher pour cet exemple :

Ce texte doit être en caractères gras.

Cependant, il existe des éléments à la fois ouverts et fermés dans la même balise. Ces éléments dits vides ne sont pas associés à un passage particulier dans le texte, mais sont des étiquettes isolées. Un exemple d'un tel élément est celui de <br />, qui force un saut de ligne (retour à la ligne) :

Exemple :

Si on écrit dans un éditeur de texte

Je suis<br /> allé à la gare pour voyager en toute sécurité

Dans le navigateur, cela donne :

Je suis
allé à la gare pour voyager en toute sécurité.

Un autre élément ouvert et fermé dans la même balise est<hr />, qui sert à tracer une ligne horizontale ; « hr » tient pour « horizontal rule ».

Autre classification des balises :

- Les balises paires : <b> …..</b>

- Les balises orphelines : <br/>

Remarque :

Les balises s’ouvrent et se ferment dans un ordre précis. Elles doivent être fermées dans le sens inverse de leur ouverture. Ainsi, on peut utiliser plusieurs éléments en même temps, tant qu’on évite les chevauchements.

Exemple :

<b><i>Un texte en caractères gras et en italique</i></b>

Et NON comme cela :

<b><i>Un texte en caractères gras et en italique</b></i>

La différence tient au fait que, dans le premier exemple, on a clos la deuxième balise ouverte d’abord, la première en dernier. On évite ainsi de se tromper ainsi que le navigateur.

Les éléments h1, h2, h3, h4, h5 et h6 servent à marquer des titres, « h » tient pour « heading » où h1 est le premier niveau et avec normalement le corps le plus grand, h2 est le deuxième niveau et normalement un texte légèrement plus petit, et h6 est le sixième et dernier niveau dans la hiérarchie des titres et normalement le plus petit texte

Exemple	Résultat
<h1> Titre Principal</h1>	Titre Principal
<h2> Titre Secondaire </h2>	Titre Secondaire
<h3> Paragraphe Principale </h3>	Paragraphe Principal
<h4> Paragraphe Secondaire </h4>	Paragraphe secondaire
<h5> TitreParagraphe1 Secondaire </h5>	Titre Paragraphe 1 secondaire

3-Les Attributs

Les attributs viennent compléter les balises avec des informations supplémentaires. Ils sont un peu considérés comme les options des balises.

Exemple :

<h2 style="color:blue;">Je retrouve la sérénité </h2>

Ici, style est un attribut ; ’’color : blue’’ est sa valeur. Cet attribut donne une couleur bleue au texte ‘’ Je retrouve la sérénité ’’.

Le navigateur affiche : Je retrouve la sérénité

Les attributs s'inscrivent toujours au sein de la balise ouvrante, et ils sont suivis par un signe égal et la valeur de l'attribut entre des guillemets. Ici le point-virgule sert à séparer plusieurs instructions de style.

4-Structure de base d’un document HTML

La toute première ligne indique que c’est bien un document HTML qu’on veut créer. On le fait avec la balise ouvrante <html>. Ensuite le document a besoin d’un « en-tête » (Head en anglais), qui fournit des informations à propos du document, d’un « corps » (body), qui constitue le contenu du document. Enfin, on ferme le document avec la balise fermante </html>.

Ce qui donne la structure de base suivante :

<html>

<head>

</head>

<body>

……………………………………………………………

…………………………………………………………..

</body>

</html>

Exemple:

<html>

<head>

<title>Mon site Web</title>

</head>

<body>

<h1>Présentation du site</h1>

<p>Mon site web est la vitrine de mes activités sur internet…...</p>

<h2>Page d’accueil du site</h2>

<p>La page d’accueil est la façade principale du site…</p>

</body>

</html>

Remarques :

1°<title>est l’élément servant d’indiquer un titre.

2°Le titre ne s’affiche pas dans la page, mais en haut de celle-ci (le plus souvent dans l’onglet du navigateur).

3°il est fortement recommandé de structurer son code HTML proprement avec des sauts de ligne et des indentations (obtenues avec la touche TAB du clavier).

4°La première ligne peut aussi s’écrire < ! Doctype html>. Ce n’est pas une balise comme les autres.

5-Tester un document HTML

Pour tester un document HTML, il faut d’abord l’écrire dans un éditeur de texte (bloc-note ou notepad++), après, l’enregistrer dans le disque dur de l’ordinateur, enfin l’ouvrir dans un navigateur (internet explorer, Mozilla firefox, etc.)

5.1-Enregistrer un site sur le disque dur :

Pour enregistrer le site sur le disque dur de l’ordinateur :

Dans « Bloc-notes », on sélectionne « Enregistrer sous... » dans « Fichier », dans le menu supérieur.
On sélectionne ensuite « Tous fichiers » dans la boîte « Enregistrer avec le type ». C'est très important, car sinon on l'enregistrera comme un document de type texte et non comme document HTML.
Maintenant on sauvegarde le document avec le nom « page1.htm » (le suffixe « .htm » indique qu'il s'agit d'un document HTML, « .html » donne le même résultat). L'endroit où on enregistre le document sur le disque dur importe peu, tant qu’on sait où le retrouver.

5.2-Pour ouvrir un site déjà enregistré

Ouvrez le navigateur Internet Explorer par exemple :

Dans le menu supérieur du navigateur (Internet Explorer par exemple), on sélectionne « Ouvrir » dans « Fichier » OU cliquez sur (CTRL+O).
Cliquez sur « Parcourir » dans le dialogue qui apparaît.
Cherchez ensuite le document HTML et cliquez enfin sur « Ouvrir ».

La page web s’affiche identique à celle qui apparaitra dans le site web.

6-Les commentaires

Un commentaire en HTML est un texte qui sert simplement à expliquer le code à l’utilisateur. Il n’est pas affiché, il n’est pas lu par l’ordinateur, il ne change rien à l’affichage de la page.

Code HTML :

< ! - - Ceci est un commentaire-->

INSERTION DES OBJETS

1-Insertion des liens

Il s’agit d’un texte sur lequel on peut cliquer pour se rendre sur une autre page d’un site ou dans un autre site. Il est généralement souligné et en couleur bleue dans les pages web.

Exemple :<a href= ‘’village’’ > Lien vers village </a>

L'élément « a » tient pour « anchor » (ancre). Et l'attribut href est l'abréviation de « hypertext reference » (appel hypertexte), qui indique où conduit le lien, habituellement à une adresse Internet ou à un nom de fichier.

Le navigateur affiche : Lien vers monFichier

Lorsqu’on clique sur ce lien, on arrive au fichier nommé monFichier

1.1-Liens entre deux pages différentes d’un même site

Si on veut aller de la page 1 à la page 2, on insère un lien à la page 1 de la manière suivante :

<a href="page2.htm">Cliquez ici pour aller à la page 2</a>

Si la page 2 se trouvait dans un sous-dossier (appelé "sous-dossier"), le lien serait alors :

<a href="sous-dossier/page2.htm">Cliquez ici pour aller à la page 2</a>

En sens inverse, un lien de la page 2 (dans le sous-dossier) à la page 1 serait le suivant :

<a href="……./page1.htm">Un lien vers la page 1</a>

Le chemin « ……./ » pointe sur le dossier à un niveau supérieur par rapport à la position du fichier où le lien se trouve. En suivant le même raisonnement, On peut aussi pointer sur une position deux dossiers (ou plus) en amont avec « …../….../ ».

NB : Ici on utilise des liens sans connaitre l’adresse complète d’une page.

Par exemple : <ahref="page2.html">. On dit que c'est un lien relatif. On ne connait pas l’adresse internet complète (URL) de la page 2.

Exemple :

<p>Bonjour. Bien vouloir visiter <a href="page2.html">la page2</a>de notre site avant de continuer la lecture</p>

1.2-Lien à l’intérieur d’une même page

On peut créer des liens internes à une page, par exemple, une table de matières en haut de la page avec des liens vers chaque chapitre en-dessous. On a seulement besoin d'un attribut très utile, appelé id (pour identification), et du symbole « # ». On utilise l'attribut id pour marquer l'élément qu’on veut relier. Il donne un nom "unique" à une balise, pour s'en servir de repère.

Exemple:

<h1 id="heading1">Titre 1</h1>

On crée ensuite un lien vers cet élément en utilisant le symbole « # » dans l'attribut de liaison. Le « # » indique au navigateur de rester sur la même page. Ce caractère doit être suivi de l'id de la balise à relier. Exemple :

<a href="#heading1">Lien vers le titre 1</a>

1.3-Lien vers une ancre

Une ancre est une sorte de point de repère qu’on peut mettre dans une grosse page HTML.

En effet, si la page est très grande, il peut être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse sauter directement à la partie qui l’intéresse.

Pour créer une ancre, il suffit de rajouter l’attribut id à une balise qui va alors servir de repère. Ça peut être n’importe quelle balise, un titre par exemple.

-On crée le lien qui va emmener le visiteur à l’endroit où se trouve l’ancre :

<a href=’’#mon_ancre’’>Aller vers l’ancre </a>

-Ensuite à cet endroit précis, on crée l’ancre.

<h2 id=’’mon_ancre’’> Titre </h2>

Sil’ancre est située dans une autre page, il faut faire un lien qui ouvre une nouvelle page ETqui amène directement à une ancre située plus bas.En pratique, il suffit de taper le nom de la page, suivi d’un dièse (#), suivi du nom de l’ancre.

<a href=’’page2.html # mon_ancre>Aller vers l’ancre </a>

amènera le visiteur sur la page page2.html, au niveau de l’ancre appelée « mon_ancre »

1.4- Lien vers une adresse e-mail

On peut également faire un lien vers une adresse e-mail. Cela se fait presque de la même façon que pour relier un document :

<a href="mailto: myperson@yahoo.fr">Envoyer un e-mail à « myperson » </a>

Le navigateur affiche : Envoyer un e-mail à « myperson»

La seule différence entre un lien d'e-mail et un lien de fichier, c'est que l'on tape « mailto: » suivi d'une adresse e-mail au lieu de taper l'adresse d'un document.

1.5-Liens vers une adresse URL

Lorsqu’on veut faire un lien vers un autre site, il suffit de copier son adresse (URL) en http://.

Exemple : un lien vers le site de nexttel.net

<a href="http://www.nexttel.net/">Voici un lien vers nexttel.net</a>

Le navigateur affiche :Voici un lien vers nextel.net

Dans l'exemple précédent, l'attribut href vaut "http://www.nextell.net", ce qui correspond à l'adresse complète de la société de téléphonie mobile « nexttel » et qu'on appelle une adresse URL (Uniform Resource Locator). Il faut clore l'élément par </a>.Ce lien est dit « absolu » car on indique l’adresse complète.

1.6-Lien qui affiche une infobulle au survol

On peut utiliser l’attribut title qui affiche une bulle d’aide lorsqu’on pointe sur le lien. Cet attribut est facultatif.

Exemple :

<p>Bonjour. Souhaitez-vous visiter la<a href="http://www.cimencam.com" title=" Spécialisée dans la production du ciment ">Société cimencam</a> ?</p>

Le navigateur affiche : Bonjour. Souhaitez-vous visiter la Société cimencam?

1.7- Lien qui ouvre une nouvelle fenêtre

Il est possible de ‘’forcer’’ l’ouverture d’un lien dans une nouvelle fenêtre. Pour cela on rajoutera : Target =’’_blank’’

Exemple :<p>Bonjour. Souhaitez-vous visiter la<ahref="http://www.cimencam.com" target="_blank">Société cimencam</a>?<br /></p>

Le site s'affichera dans une autre fenêtre.

1.8- Lien pour télécharger un fichier

Il faut faire exactement comme si on faisait un lien vers une page web, mais en indiquant cette fois le nom du fichier à télécharger.

Exemple :

<p><a href="monfichier.zip">Télécharger le fichier</a></p>

2-Insertion des images

Pourinsérer une image, on utilise la balise orpheline <img/>.

Exemple :

<imgsrc="ma_photo.jpg» />

Le nom « ma_photo» est celui du fichier image à insérer dans la page, et « .jpg » est le type de fichier de l'image. Tout comme l'extension « .htm » indique qu'il s'agit d'un document HTML, « .jpg » indique au navigateur que ce fichier est une image. L’attribut src (source) indique là où se trouve l’image que l’on veut insérer dans la page.

2.1-insérer des images situées dans d'autres dossiers, ou même situées sur d'autres sites Web

Si l’image à insérer se trouve dans le dossier images, on aura :

<imgsrc="images/twitter.png">

Le fichier image twitter.png se trouve dans le dossier images de l’ordinateur.

Le navigateur affiche :

Exemple :

<imgsrc="http://www.html.net/logo.png">

2.2-les images peuvent être aussi des liens

Exemple :<ahref="page10.htm"><imgsrc="images/BOUTON.GIF"></a>

Pour aller à la page 10, il suffit de cliquer sur l’image du bouton VALIDER

2.3-Quelques autres attributs d’images

· L'attribut alt sert à fournir une description de remplacement de l'image si, pour une raison ou pour une autre, l'image n'était pas affichée par le navigateur. C'est particulièrement important pour les utilisateurs aveugles, ou si la page se charge très lentement. Donc, toujours utiliser l'attribut alt :

Exemple :<imgsrc="logo.gif" alt="Le logo de HTML.net">

· L'attribut title peut servir pour décrire brièvement l'image :

Exemple:<imgsrc="logo.gif" title="Apprenez HTML avec HTML.net">

Si on place le curseur sur l'image sans cliquer, on verra apparaître le texte « Apprenez HTML avec HTML.net » comme message contextuel.

· Deux autres attributs importants sont width et height :

Exemple :<imgsrc="logo.png" width="141" height="32">

On peut utiliser les attributs width et height pour fixer la largeur et la hauteur d'une image.

Exemple:<imgsrc="logo.gif" width="32" height="32">

3-Insertion des formulaires

Toute page HTML peut être enrichie de formulaires interactifs, qui invitent les visiteurs à renseigner des informations : saisir du texte, sélectionner des options, valider avec un bouton...

3.1-Créer un formulaire

On utilise la balise<form>…….</form>. C'est la balise principale du formulaire, elle permet d’indiquer le début et la fin du formulaire.

3.2-insertion d’une zone de texte monoligne

Pour insérer une zone de texte à une ligne, on va utiliser la balise <input />.

<input type="text" />

Pour donner un nom à un élément de formulaire, on utilise l'attribut name. Ici, on va supposer qu'on demande au visiteur de rentrer son pseudo :

<input type="text" name="pseudo" />

Pour créer un libellé, on utilise label

<form method="post" action="traitement.php">

<p>

<label>Votre pseudo</label>: <input type="text"name="pseudo" />

Ce qui donne : Votre pseudo : :

On peut agrandir le champ avec size.

On peut limiter le nombre de caractères que l'on peut saisir avec maxlength.

On peut préremplir le champ avec une valeur par défaut avec value.

Le bouton d’envoi

Pour créer un bouton d'envoi, on écrira donc par exemple :

<input type="submit" value="Envoyer" />

3.3-Insertion d’une zone de texte multiligne

<form method="post" action="traitement.php">

<p>

<label>Insérer votre texte</label>: <input type="text" name="monTexte" />

<textareaname= " monTexte " >

(Insérer le texte ici)

</textarea>

</form>

4-Insertion des listes

4.1- Les listes descriptives

On utilise la balise <dl> pour l’ouverture de la liste, <lh> pour le nom de la liste, <dt> pour le nouveau terme de définition<dd> pour la description de l’élément et </dl> pour la fermeture de la liste

Exemple	Résultat
<dl>
<lh> Terminale<lh>	Terminale
<dt>Tle A</dt>	Tle A
<dd> Allemand & Espagnol</dd>	Allemand & Espagnol
<dt>Tle C </dt>	Tle C
<dd> mathématique</dd>	Mathématique
<dt>Tle D </dt>	Tle D
<dd> science</dd>	Sciences

</dl>

4.2-Les listes non numérotées ou non ordonnées

On utilise les balises <ul> pour l’ouverture de la liste, <lh> pour le nom de la liste, <li> pour matérialiser l’élément de la liste et </ul> pour la fermeture de la liste.

Exemple :

<ul>

<lh>Terminale</lh>

<li>Tle A</li>

<li>Tle C</li>

<li>Tle D</li>

</ul>

Le navigateur donne :

Terminale

Tle A
Tle C
Tle D

4.3-Listes numérotées ou ordonnées

On utilise la balise <ol> pour l’ouverture de la liste, <lh> pour le nom de la liste,<li>pour matérialiser l’élément de la liste et </ol> pour la fermeture de la liste.

Exemple :

<ol>

<li>Je me lève le matin</li>

<li>Je me lave</li>

<li> Je mange</li>

<li> Je vais à l’école</li>

</ol>

Le navigateur donne :

Je me lève le matin
Je me lave
Je mange
Je vais à l’école

NB : « ul » est l'abréviation de « unorderedlist » (liste non ordonnée), et insère des puces pour chaque élément de liste. « ol » est l'abréviation de « orderedlist » (liste ordonnée), et numérote chaque élément de liste. Pour créer les éléments de la liste, on utilise la balise <li>, abréviation de « list item » (élément de liste).

EXERCICES

CONTROLE DES CONNAISSANCES

1-Quelle année et par qui fût inventé le HTML ?

2-Quel est le rôle du HTML ?

3-Citer 02 types de balises.

4-Quels sont les fonctions des balises suivantes :

5- Laquelle des lignes suivantes est-elle juste ? Et pourquoi ?

<b>< i>Ma première page web</b></i>

<b>< i>Ma première page web</i></b>.

6-Qu’est-ce qu’un attribut ?

7-Citer 02 attributs et leurs rôles ?

8-Qu’est-ce qu’un lien ?

9-Une image peut être un lien. VRAI ou FAUX ?

10-Donner la structure de base d’un document HTML

EXERCICE I :

1.Définir : page web, Site Web.

2.Quelle est la différence entre un site web statique et un site web dynamique ?

3. Citer 02 langages de base qu’il faut connaitre pour créer des sites web.

4.Citer 02 logiciels capables de rendre une page web interactive c-à-d dans laquelle l’utilisateur peut dialoguer avec la machine.

5.Donner un exemple de :

a-Editeur de pages web ; Quel est le rôle d’un éditeur de texte ?

b-Navigateur web ; Quel est le rôle d’un navigateur ?

EXERCICE II :

1- Quelle est la fonction de chacune des balises suivantes ?

<B>…</B> ;

<Ul>…</Ul> ;

2-Quelle est la balise qui insère un lien ? une image ?

3-Choisir parmi les éléments suivants ceux qui permettent de créer et exécuter une page web :

a) URL ; b) Editeur de textes ; c) Tableurs ; d) Navigateurs web ; e) WWW

4-Associer à chaque élément de gauche son correspondant à droite

1- Permet de définir le contenu de la page	a) <form></form>
2- Marque la fin du document web	b) </html>
3- Permet d’insérer un champ dans un formulaire	c) <b></b>
4- Permet de mettre un texte en gras	d) <body></body>

EXERCICE III : Associer les éléments de la colonne A à ceux de la colonne B.

Colonne A

Colonne B

1-<vidéo>

2- Cliquez ici

3-<hr/>

4-< ! Doctype html>

5-Blocnote

a-lien

b-balise orpheline

c-indique aussi le début d’une page html

d-balise ouvrante

e-est un éditeur de texte

EXERCICE IV :

Annuler

Vous êtes chargé de réaliser le formulaire ci-dessous

1-Définir : formulaire

2-Quelle balise html utilise-t-on pour créer un formulaire ?

3-A quoi sert la balise <input type = « text »/> dans un formulaire ?

4-Ecrire la balise html complète permettant de créer le bouton Envoyer de ce formulaire.

EXERCICE V :

On voudrait utiliser le langage HTML pour faire la liste suivante :

Terminale

· Tle C

· Tle D

· Tle A

a-Quel nom donne-t-on à cette liste ?

b- Quelle balise doit-on utiliser pour l’ouvrir ?

c-Que fait la balise<lh> terminale</lh> ?

EXCERCICE VI :

1-Quelle est la fonction des balises suivantes :

2-.Quelle balise utilise-t-on :

a-pour insérer un lien dans une page web ?

b-pour insérer une image dans une page web ?

EXCERCICE VII :

On vous donne le code html suivant :
1.<!DOCTYPE html>
2.<html>
3.<head>
4.<meta charset="utf-8" />
5.<title>Zozor - Le Site Web</title>
6.</head>
7.<body>
8.<header>
9.<h1>Zozor</h1>
10.<h2>Carnets de voyage</h2>
11.</header>
12.<nav>
13.<ul>
14.<li><a href="#">Accueil</a></li>
15.<li><a href="#">Blog</a></li>
16.<li><a href="#">CV</a></li>
17.</ul>
18.</nav>
19.<section>
20.<aside>
21.<h1>A propos de l'auteur</h1>
22.<p>C'est moi, Zozor ! Je suis né un 23 novembre2005.</p>
23.</aside>
24.<article>
25.<h1>Je suis un grand voyageur</h1>
26.<p>Bla bla bla bla (texte de l'article)</p>
27.</article>
28.</section>
29.<footer>
30.<p>Copyright Zozor - Tous droits réservés
31.<a href="#">Me contacter !</a></p>
32.</footer>
33.</body>
34.</html>

Utiliser vos connaissances en programmation html pour répondre aux questions suivantes :

1. Indentez ce code.

2. Identifier dans ce code

a) un lien

b) le titre de la page

c) un titre de deuxième niveau

d) l’élément d’une liste

3. Ecrire une ligne de code pour insérer la photo de zozor

4. Relevez 05 balises structurantes dans ce code.

CORRIGES

CONTROLE DES CONNAISSANCES

1-En 1991par le scientifique Tim Berners-Lee.

2-Formalise l’écriture d’un document avec des balise de formatage.

3-Balise ouvrante <…> et balise fermante </…>.

// Autre classification des balises :

- Les balises paires : <b> …..</b>

- Les balises orphelines : <br/>

4-<b>….</b> met un texte en gras

<i>…..</i> met un texte en italique

5-<b><i>Ma première page web </i></b> car les balises se ferment en sens inverse de leur ouverture.

6-Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires.

7-<h2 style= « color :blue »> mon combat</h2> ici style est un attribut et color :blue est sa valeur.

<a href= « village »>Lien vers village</a> ici href est un attribut et village est sa valeur.

8-C’est un texte sur lequel il faut cliquer pour se rendre sur une autre page ou un autre site.

9-VRAI

// losqu’un lien est du texte, c’est un lien hypertexte lorsqu’un lien est un image, c’est un lien hypermedia.

10-<html>

<head>

</head>

<body>

……………………………………………………………

…………………………………………………………..

</body>

</html>

EXERCICE I:

1. -Une page web est un ensemble de documents structurés contenant essentiellement du texte, souvent enrichie d'images, de sons, de vidéos et de liens vers d'autres pages web.

- Site web : Ensemble de pages web liées les unes aux autres par des liens hypertextes.

2-L’utilisateur peut dialoguer avec la machine avec un site web dynamique (on parle d’interactivité avec la machine).
3.HTML et CSS.

4.JavaScript et PHP

-Notepad++ ; Bloc-notes : Permettent de créer une page web.

-Internet Explorer ; Mozilla Firefox, Opéra etc. : Permettent d’exécuter une page web.

2. Entier, réel ; booléen ; caractère.

5-<html>

<head>

</head>

<body>

…………..

</body>

</html>

EXERCICE II :

<b>……</b> met le texte en gras

<ul>……</ul> crée une liste non ordonnée

a-lien : <a href= ‘’…’’ >… </a>

b-image : <img src="… />

3. Editeur de textes : permet de créer des pages web

Navigateur web : permet d’exécuter des pages web

1.d ;

2.b ;

3.a ;

4.c.

EXERCICE III :

1.d

2.a

3.b

4.c

5.e

EXERCICE IV :

1-Un formulaire est un objet HTML qui invite les visiteurs à renseigner des informations : saisir du texte, sélectionner des options, valider avec un bouton.

2- Form>…..</form>

3- insère une zone de texte

4- input type=’’submit’’ value =’’Envoyer’’/>

EXERCICE V :

a- Liste non numérotée

b- la balise<ul>

c- donne le nom de la liste

EXCERCICE VI :

<table>…..</table>permet de créer un tableau

<head>…..</head> permet de créer l’entête d’une page web

2- a- <a href= ‘’…’’ >… </a>

b- <img src="… />

EXCERCICE VII :

1) Indentation du code.

1.<!DOCTYPE html>
2.<html>
3.            <head>
4.                            <meta charset="utf-8" />
5.                            <title>Zozor - Le Site Web</title>
6             .</head>
7.            <body>
8.                            <header>
9.                                           <h1>Zozor</h1>
10                                          .<h2>Carnets de voyage</h2>
11.                          </header>
12.                          <nav>
13.                                         <ul>
14                                                         .<li><a href="#">Accueil</a></li>
15                                                         .<li><a href="#">Blog</a></li>
16                                                         .<li><a href="#">CV</a></li>
17                                          .</ul>
18.                          </nav>
19.                          <section>
20.                                         <aside>
21.                                                        <h1>A propos de l'auteur</h1>
22                                                         .<p>C'est moi, Zozor ! Je suis né un 23 novembre2005.</p>
23           .                              </aside>
24                           .              <article>
25.                                                        <h1>Je suis un grand voyageur</h1>
26.                                                        <p>Bla bla bla bla (texte de l'article)</p>
27.                                         </article>
28.                          </section>
29.                          <footer>
30.                                         <p>Copyright Zozor - Tous droits réservés
31.                                         <a href="#">Me contacter !</a></p>
32.                                         </footer>
33.          </body>
34.</html>

a) un lien : a href="#">Accueil</a></

b) le titre de la page : Le Site Web

c) un titre de deuxième niveau :<h2>Carnets de voyage</h2>

d) l’élément d’une liste :<li><a href="#">Accueil</a></li>

3. <img src= « photo_zozor.png »/>

4. Header, section, article, aside, footer