Année Universitaire : 2020- 2021
1ère LA-SI
Compétences numériques
Enseignants : Equipe pédagogique
< TP 1 – HTML >
<Exercice 1>
Voici le code HTML complet d'une ébauche de document :
<HTML>
<HEAD>
<TITLE>Ma première page HTML</TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Ceci est une page écrite en langage HTML </CENTER></H1>
<HR width=75%>
<H2>Voici l'en-tête du 1er paragraphe</H2>
Ici est placé le texte du <I>premier </I> <B>paragraphe</B>.
<P>
<H2>Voici l'en-tête du second paragraphe</H2>
Et là, son texte ...
</BODY>
</HTML>
Ci-dessous (entre les 2 traits) voici ce que le navigateur afficherait à la lecture de ce code HTML :
Ceci est une page écrite en langage HTML
Voici l'en-tête du 1er paragraphe
Ici est placé le texte du premier paragraphe.
Voici l'en-tête du second paragraphe
Et là, son texte ...
Expliquer les effets des balises suivantes :
- <i>premier </i>
- <b>paragraphe</b>
- <hr width=75%>
- Comparer <h1> et <h2>
- A quoi sert <center>...</center>
- Quel est le rôle de <p>
Comment comprenez-vous le découpage du code compris dans
- <html>...</html>
- <head>...</head>
- <body>...</body>
ISIM-SFAX | Année Universitaire : 2020-2021
1/3
<Exercice 2>
Voici le code HTML de l’exercice 1
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML</title>
</head>
<body>
<h1 align="center">
Ceci est une page écrite en langage HTML
</h1>
<hr width=75%/>
<h2>Voici l'en-tête du 1er paragraphe </h2>
<p>Ici est placé le texte du <i>premier </i>
<b>paragraphe</b>.
</p>
<h2>Voici l'en-tête du second paragraphe</h2>
Et là, son texte ...</body>
</html>
Ci-dessous (entre les 2 traits) voici ce que le navigateur afficherait à la lecture de ce code HTML :
Ceci est une page écrite en langage HTML
Voici l'en-tête du 1er paragraphe
Ici est placé le texte du premier paragraphe.
Voici l'en-tête du second paragraphe
Et là, son texte ...
Expliquer la différence entre les deux exemples
Quelle est la différence entre HTML et XHTML
<Exercice 3>
Premier document : « doc1_html.html »
- Editer un document HTML qui possède une structure minimale (i.e. un document html vide).
- Visualiser ce document
- Ajouter un titre au document. Visualiser le document. Quels sont les changements ?
- Modifier le document de sorte que le fond de page soit en blanc et le texte soit en Bleu
- Insérer dans le corps du document la phrase : ma première page HTML ! (Attention à l'écriture du
caractère è)
- On voudrait que le texte du titre soit en rouge tout en gardant la couleur du texte du corps du
document en Bleu. Comment faire ?
- Entourer la phrase précédente par deux lignes horizontales centrées. La longueur de chaque ligne
est égale à 70% de la largeur de la page
- Ajouter dans le document les définitions des termes : « www », « hypertexte » et « html »
- Afficher les termes définis en gras
- Modifier le document pour que les trois définitions soient affichées comme suit :
Liste numérotée
Liste non-numérotée
- Envelopper chacun de ces termes par une balise <gras> </gras>
ISIM-SFAX | Année Universitaire : 2020-2021
2/3
- Remplacer la balise <gras> par la balise <toto> </toto>. Conclusion ?
- Corriger le document pour que les termes soient affichés en gras
Quelle est la fonction de la balise <i> ? et la balise <em> ? Quelle est la différence entre ces deux balises ?
<Exercice 4>
Utiliser le Bloc-notes pour créer la page suivante
Ma deuxième page HTML
___ ___ ___________ ___________ ___________
_| |___|O| |Bienvenue| |à l’ISIM | | SFAX |
(_ __ __|--|_ _____ _|--|_ _____ _|--|_ _____ _|
OO OO O O O O O O
- Entourer la phrase ma deuxième page HTML par les balises <h1 align=center et </h1> Quel est
l'effet de cette modification ?
- HTML fournit six balises de marquage de titres : <h1> à <h6>. Quelles sont les différences entre
ces balises ? Essayez-les
<Exercice 5>
Réaliser le squelette d’une page avec les caractéristiques suivantes :
encodage : utf-8
titre de la page : exemple HTML
auteur : vous même
mots clés : html, test, LASI
<Exercice 6>
Réaliser les différentes listes suivantes :
Liste à puce :
Adresse : Pôle technologique de Sfax : Route de Tunis Km 10 B.P. 242 SFAX 3021, 3021 Sfax
Tél : +216 74 862 233
Fax : +216 74 862 432
E-mail : contact@[Link]
Liste dont les puces sont constituées d'une image :
Licence Appliquée en Informatique
Licence Appliquée en Science de l’Informatique
Combinaison de listes numérotée et à puce :
1. Licence Appliquée en Informatique :
Technologie Multimédia & Web
Technologie Informatique & Multimédia
Science de l’Informatique
2. Master professionnel :
Informatique & Multimédia
Innovation et Gestion de Projets
Design d’Expérience et Design d’Interface
3. Ingénieur en Informatique
Liste descriptive :
1990
Certificat de fin d'études secondaires
1993
Maturité scientifique
1998
Licence en physique. Travail de mémoire réalisé dans le domaine des capteurs
ISIM-SFAX | Année Universitaire : 2020-2021
3/3
