Atelier développement web 1 TI11
Programmation Web
TP1 – HTML
Une première page en HTML
Le document html de base se présente ainsi :
Le code associé en HTML :
Exercice 1 : création de votre première page html
Créez un dossier et le nommez Atelier1, dans lequel vous créez un nouveau
dossier nommé Exercice1.
Mme Anwaar BOUKETTAYA
1
Atelier développement web 1 TI11
Enregistrez votre document sous le nom de "[Link]".
Vous prenez un éditeur de texte (textEdit, blocnote, notePad...) et créez votre
propre document html. Ajoutez une balise <p> .....</p> avec le texte de
votre choix.
Visualisez le résultat dans votre navigateur Web (Internet Explorer, Firefox,
Google chrome...)
Le texte
Tout le texte contenu sur votre page se trouvera entre les balises <body> et
</body>.
Les balises titres
Elles permettent de bien structurer votre page mais aussi d'optimiser le futur
référencement de votre site Internet. Les différentes balises se présentent de
cette manière :
Exercice 2 : les titres
Créez dans le dossier Atelier1, un sous dossier intitulé Exercice2 dans lequel
vous créerez 4 pages html que vous nommerez :
[Link]
[Link]
[Link]
[Link]
Pour chacune des pages, vous organiserez le contenu de la manière suivante
en exploitant les balises h1 et h2 pour les titres et les sous-titres :
Mme Anwaar BOUKETTAYA
2
Atelier développement web 1 TI11
Exercice 3 : Formatage de texte
Reprenez les pages html de l'exercice 2 et modifiez les titres et les textes en
y insérant des balises des mises en forme, pensez à enregistrer régulièrement
votre travail. Visualisez le résultat dans votre navigateur.
Il est très simple de modifier la forme du texte en encadrant des mots ou
phrases par des balises.
En voici quelques-unes :
<i> </i> Italique
<b> </b> Gras
<sub> </sub> Indice
<sup> </sup> Exposant
…
Les images
Vous allez ajouter aux pages du contenu visuel.
Exercice 4 : Ajout d'images
Mme Anwaar BOUKETTAYA
3
Atelier développement web 1 TI11
Vous allez reprendre les pages précédentes afin d'y intégrer une image sur
chaque.
Méthode :
Créez un dossier "images" dans votre sous-dossier "Exercice2".
Enregistrez les images ci-dessous dans le dossier "images"
Dans chaque page, insérez la balise <img /> en pointant la source vers
l'image correspondante.
Enregistrez et visionnez le résultat dans votre navigateur Internet.
Le résultat final sera le suivant :
Mme Anwaar BOUKETTAYA
4
Atelier développement web 1 TI11
Les liens
Vous allez maintenant lier vos pages afin de pouvoir naviguer entre elles.
Exercice 5 : les liens
La page "[Link]" servira de page de regroupement.
Dans cette page, ajoutez un menu pointant vers chacune des pages du site.
Vous nommerez les titres du menu du même nom que leurs pages
correspondantes (Présentation, Réalisations, Contact).
Sur la page "[Link]", insérez un lien sur le texte « le site » vers le
site de l’ISET de Sfax. Le lien est le suivant : [Link]
Méthode :
Ouvrez vos pages html.
Insérez les balises de liens sur les mots concernés <a> ….. </a>.
Enregistrez et visionnez le résultat dans votre navigateur Web.
Les listes
Afin de mieux organiser notre menu de la page d'accueil, vous allez organiser
en liste les liens vers les pages.
Exercice 6 : Ajouter une liste au menu
Vous allez reprendre votre page [Link] dans laquelle se trouve votre
menu, et lui appliquer une liste afin d'obtenir le résultat suivant :
Liste non numérotée :
Accueil
Présentation
Réalisations
Contact
Liste numérotée :
1. Accueil
2. Présentation
3. Réalisations
4. Contact
Les Tableaux
Vous allez utiliser les tableaux pour la page "[Link]".
Exercice 7 : Les tableaux
Adapter votre page de contact afin d'y insérer le tableau suivant :
Mme Anwaar BOUKETTAYA
5
Atelier développement web 1 TI11
Remplissez les informations de contact selon vos préférences et visualisez le
résultat.
Mme Anwaar BOUKETTAYA
6
