UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
Classes : SI3
Matière : TP WEB
Enseignants : S. Mabrouk, R. Gahar, Med. A. Dahdeh
A-U : 16/17
Semaine : 18/09/2016
Nb pages : 6
TP n°1
HTML
Dans ces premiers TPs vous allez créer votre site web. Il sera enrichi au fur et à mesure que
vous avancez dans le cours, il vous sera demandé par ailleurs d’être autonome pour finaliser
l’édition de vos pages à la maison. La note du TP vous sera attribuée sur la base du rendu
final de votre site (Attention, une note par séance peut également être comptabilisée).
Environnement de travail
Navigateur web
Editeur de texte : Bloc-notes, Notepad++, Sublime Text, Geany,….
Partie 1
Rappel
Une page HTLM est un fichier texte ASCII avec l’extension .html, destinés à structurer un
document via des balises (markup) et à faciliter le partage de l'information via les textes
enrichis (hypertext). La structure d’un document HTML est la suivante :
<!DOCTYPE html>
<html>
<!-- Tout contenu html doit être encadré entre les deux balises
html.
En général, on a une balise ouvrante et une balise fermante
caractérisée par le "/". -->
<head>
<!-- En-tête de la page : type du document, encodage, titre de la
page, auteurs, mots clefs,
indications aux moteurs de recherche, styles etc.-->
</head>
<body>
<!-- Le corps du document structure tout ce que l'on voit dans la
fenêtre de son navigateur :
titres, textes, images, menus, barres etc.-->
Advertisement
</body>
</html>
Plus de détails…
Contenu de la balise <head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- données spécifiques au référencement de la page ainsi que
l'encodage utilisé -->
<meta name="author" content="Nom de l'auteur"/>
<meta name="keywords" content="Mots clefs relatifs à cette page"/>
<meta name="description" content="Descriptif court"/>
<title>Titre de ma page</title>
<link rel="stylesheet" type="text/css"
href="monstyle.css" media="all" />
<!-- utiliser la page " monstyle.css" comme feuille de style pour ma
page-->
</head>
Contenu de la balise <body>
Une page web est une disposition particulière de boîtes, ou conteneurs, pouvant contenir
d'autres structures html (tableaux, listes, formulaires, etc.). On distingue deux types
importants de structures :
1. les structures de type bloc
comme les paragraphes <p> : passage à un nouveau paragraphe tout en insérant une
ligne vide entre le paragraphe précédant et le nouveau paragraphe.
les listes <ul>,
les titres :
<H1>Texte</H1>
<H2>texte</H2>
<H3>texte</H3>
<H4>texte</H4>
<H5>texte</H5>
<H6>texte</H6>
les sections <section> imposent un saut de ligne et s'étendent au maximum en largeur.
2. Les structures de type enligne (inline), comme <span> ou <a>, ne peuvent se mettre que
côte à côte. Une structure de type inline ne peut contenir que des éléments du même
type.
3. Autres balises utiles
Advertisement
</BR> : retour à la ligne
<em> permet de mettre le texte en italique
<strong> permet de mettre le texte en gras
<u> et <mark> permettent respectivement de souligner et de surligner le texte
2
Travail demandé
1. Créez 5 blocs selon la figure ci-dessous « index.htm ».
2. Remplissez votre page avec le contenu approprié en l’adaptant à vos informations personnelles (rajoutez des paragraphes si nécessaire).
Header
<div id=content>
Aside
Article
Footer
3
Vous auriez besoins pour cette partie 2 de :
Votre page html de la partie 1.
Partie 2
Un dossier MesImages contenant les images nécessaires pour ce TP, ce dossier peut
être téléchargé à l’adresse suivante :
http://www.mediafire.com/download/ndzd4ulh6yvax6n/MesImages.rar
(En cas d’absence de connexion demandez le dossier à votre enseignant)
Rappel
Insertion d’image
Pour insérer une image la balise img est utilisée en spécifiant dans son attribut scr
l’emplacement de l’image. L’attribut alt signifie "texte alternatif", on doit toujours indiquer
un texte alternatif à l'image, c'est-à-dire un court texte qui décrit ce que contient l'image.
Exemple : <img src="images/maphoto.jpg" alt="Ma Photo" />
Les liens externes
<A HREF="URL de la page web cible">texte ou image représentant la
zone cliquable</A>
Exemple :
La zone cliquable est un texte : <A HREF= "URL"> Cliquez ici </A>
la zone cliquable est une image : <A HREF= "URL "> <IMG SRC="globe.gif"></A>
Adresse absolue et adresse relative :
Adresse absolue :
Il s’agit de l’adresse complète du site avec l’indication du lieu du document (texte ou image)
Advertisement
<A HREF= "http://www.website.com/index.html"> Cliquez ici </A>
Adresse RELATIVE
Il s’agit de la localisation du document à partir du dossier ouvert.
<A HREF= "index.html"> Cliquez ici </A>
Nous devons utiliser l’adresse relative pour que les liens fonctionnent indépendamment
de la localisation du site.
Liens internes
Lien interne vers une ancre : <A HREF="#nom_ancre "> texte ou image </A>
Définition de l’ancre :
4
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va servir de repère. Ce
peut être n'importe quelle balise.
Exemple : <h2 id="mon_ancre">Titre</h2>
Lien interne externe
Lien externe vers une ancre dans le document de départ:
<A HREF="URL du fichier cible#nom_ancre">texte ou image</A>
Lien Exécutable
Fait référence à un programme exécutable ou à un service de l'Internet (FTP, E-Mail ... ).
Exemple :
<A HREF="http://www.FAO.org">texte ou image</A> : ce lien permet l’accès au
site de la FAO
<A HREF="mailto :[email protected]">texte ou image</A> : ce lien
permet l’accès au logiciel de messagerie électronique et l’envoi de messages.
Création de menu
La balise <nav> permet la création de menu en HTML5, généralement, dans cette balise on
trouve des liens permettant d’accéder soit à d’autres pages du site, soit à différents contenus
de la page.
Exemple :
<nav>
<ul>
<li><a href="pageDuMenu1">Menu1</a></li>
<li>Menu2
<ul>
<li><a href="pageSM1.html">Sous-Menu2.1</a></li>
<li><a href="pageSM2.html">Sous-Menu2.2</a></li>
<li><a href="pageSM3.html">Sous-Menu2.3</a></li>
</ul>
Advertisement
</li>
<li><a href=" pageDuMenu3">Menu3</a></li>
<li>…< /li>
</ul>
</nav>
5
Travail demandé
1. Insérez les images et créez les liens de la figure ci dessous.
2. Créez un menu à l’aide de la balise <nav>…</nav> au début du bloc « content »
contenant les éléments suivants :
3. Rédigez une autre page « cv.htm » contenant votre CV ayant l’allure suivante et ajouter un
lien externe entre cette page et votre page d’accueil.
Curriculm Viteae
Header
État civil
o Nom :
o Prénom :
o
o Nationalité :
Date et lieu de naissance :
Diplômes
o 2004
o 2002
o 2003
Article
Stages
o 2004
o 2002
1. stage 1
2. stage2
1. stage 1
2. stage2
Accueil
Footer
6