Université Abou Bekr Belkaid Tlemcen 2023-2024
Département d’Informatique
1 ING-INFO --- TP BUR & WEB
TP 5 : Création de pages web en HTML/CSS/JS
Objectifs :
1. Maîtriser les balises de base de HTML.
2. Apprendre la mise en forme avec CSS.
Exercice 1 : Création du contenu d’une page HTML.
HTML (Hyper Text Markup Language), est un langage de description de pages web. Il permet de
présenter les documents hypertextes destinés à être affichés par un navigateur.
Q0 : Voici à quoi ressemble la structure de base d’une page HTML :
<!-- Ceci est un commentaire -->
<!DOCTYPE html> <!-- Pour dire qu'il s'agit d'un fichier HTML -->
<html lang="en"> <!-- C'est la balise principale où l’attribut «lang» fixe la
langue par défaut à ENGLISH. Fr pour français -->
<head> <!-- C'est la balise qui contient les informations sur la page -->
<title> Document </title> <!-- Donner un titre à la page -->
</head>
<body>
<!-- Ici le contenu de la page -->
<header> <!--L’entête de la page -->
</header>
<main> <!--Contient le contenu principal de la page -->
</main>
<footer> <!--Le pied-de-page -->
</footer>
</body>
</html> <!-- Fin de la page html-->
Q1:Titres - ouvrez un éditeur de texte (exp : Sublime, VS code, Notebloc, Notepad++,
BlocNote) et créez un nouveau fichier à enregistrer sous le nom « [Link] ».
Copiez/Collez le code de base ci-dessus et ajoutez les lignes suivantes entre <header> et
</header> :
<h1> Titre de niveau 1 </h1> <!-- Titre de niveau 1 -->
<h2> Titre de niveau 2 </h2> <!-- Titre de niveau 2 -->
<h3> Titre de niveau 3 </h3> <!-- Titre de niveau 3 -->
<h4> Titre de niveau 4 </h4> <!-- Titre de niveau 4 -->
<h5> Titre de niveau 5 </h5> <!-- Titre de niveau 5 -->
<h6> Titre de niveau 6 </h6> <!-- Titre de niveau 6 -->
Université Abou Bekr Belkaid Tlemcen 2023-2024
Q2: Mise en forme du texte - ajouter le code ci-dessous entre <main> et </main>,
analysez chaque balise, puis visualisez le document à l’aide d’un navigateur web.
<p> <!-- Paragraphe -->
<b>Paragraphe (en gras) :</b> <!-- <b> texte en gras -->
<i>italic</i> <!-- <b> texte en italique -->
<em>emphasis</em> <!-- L'élément em représente l'accentuation de son contenu. -->
<strong>strong</strong ><!--Indiquer une importance particulière(sémantique)-->
<mark>mark</mark> <!-- Texte marqué -->
<small> small </small> <!-- Texte en petit -->
Texte <sub> sub </sub> <!-- Texte en indice -->
Texte <sup> sup </sup> <!-- Texte en exposant -->
<u> Statements </u> <!-- Texte souligné -->
<s> not relevant </s> <!-- Texte barré -->
This is a <q>short " quote </q> <!-- Guillemets -->
<br> <!-- Saut de ligne -->
<marquee behavior="alternate" direction="right">Text marquee est un texte qui se
déplace vers la gauche ou vers la droite </marquee>
<!-- Texte qui se déplace (obsolète)-->
</p>
Q3:Tableau - complétez le contenu de <main> avec les lignes suivantes puis visualisez la page
web.
<table> <!-- Insertion d'un tableau -->
<caption > Caption </caption> <!-- Insérer une légende -->
<thead> <!-- Ligne d'entête -->
<tr> <!-- Nouvelle ligne -->
<th>Numbers</thcolspan="2"> <!-- Cellule d'entête -->
<th>Letters</th>
<th>Colors</th>
</tr> <!-- Fin de la ligne -->
</thead>
<tfoot> <!-- Dernière ligne -->
<tr> <!-- Nouvelle ligne -->
<td>123</td> <!-- Cellule -->
<td>ABC</td>
<td>RGB</td>
</tr>
</tfoot>
<tbody> <!-- Lignes du milieu -->
<tr> <!-- Nouvelle ligne -->
<td colspan="2" rowspan="2" >1</tdcolspan="2">
<td>A</td>
<td>Red</td>
</tr> <!-- Fin de la ligne -->
<tr> <!-- Nouvelle ligne -->
<td>2</td>
<td>B</td>
<td >Green</td>
</tr> <!-- Fin de la ligne -->
</tbody>
</table>
Université Abou Bekr Belkaid Tlemcen 2023-2024
Q4: Listes - complétez le contenu de <main> avec les lignes suivantes puis visualisez la
page web.
<ol> <!-- Liste numérotée (ordered list)-->
<li>List item</li> <!-- List item -->
<li>List item</li>
<li>List item</li>
</ol>
<ul> <!-- Liste à puce (unordered list)-->
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
Q5 : Composants graphiques - pour insérer une barre de progression et un formulaire,
ajoutez le code suivant dans le main :
<!-- Barre de progression -->
<progress value="33" max="100"></progress>
<!-- Formulaire avec un ensemble de champs d'étiquettes et une légende -->
<form action="" method="get"> <!--action spécifie l’URL qui traite l’envoie du
formulaire -->
<!--method définit la méthode HTTP utilisée pour
les données au serveur (method="post") -->
<!-- Une légende pour un objet d'une interface utilisateur (exp : l’objet
ayant l’identifiant "browser" -->
<label for="browser">Choose your browser:</label>
<!--input pour créer un contôle interactif selon la valeur de Type
(list, button, checkbox, color,date, datetime
local, email, file, radio, password, url, submit, tel) -->
<input list="browsersid" name="browser" id="browser">
<!-- list prend comme valeur la valeur
de l'attribut id de l'élément <datalist> fournissant les options
d'autocomplétion -->
<datalist id="browsersid"> <!-- Liste à plusieurs options -->
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<!-- input de type submit => Bouton qui envoie le formulaire -->
<input type="submit">
<!-- Une légende (label) pour l’objet ayant l’identifiant "name" -->
<label for="name">Enter your name: </label>
<!-- Zone de texte = input de type text (avec option required)-->
<input type="text" name="name" id="name" required>
<!-- fieldset pour regrouper plusieurs champs de formulaire
dans un même ensemble -->
<fieldset>
<legend>Titre</legend>
<!-- Radio bouton = input de type radio -->
<label><input type="radio" name="radio">Sélectionnez-moi</label>
</fieldset>
</form>
Université Abou Bekr Belkaid Tlemcen 2023-2024
Q6 : Insertion de ressources - pour insérer une vidéo, un audio, une image, une forme
SVG, une page HTML, utilisez le code suivant :
<!-- Insérer une forme (cercle) vectorielle au format SVG -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-
width="4" fill="yellow" />
</svg>
<!-- Insérer un fichier audio (contenu sonore) -->
<!-- L'attribut controls permet au navigateur d'afficher les boutons de
contrôl (play, pause, volume,..) -->
<audio controls>
<!-- code pour afficher le texte contenu dans un élément donné (exp audio) -->
I'm sorry. You're browser doesn't support HTML5 <code>audio</code>.
<!-- L'élément <audio> peut contenir une ou plusieurs sources audio et c’est le
navigateur qui choisira celle qui lui convient le mieux=>maximiser la compatibilité-->
<source src="[Link] type
="audio/ogg">
<source src="[Link] type
="audio/mpeg">
</audio>
<!-- Insérer une vidéo -->
<video width="640" height="480" src="[Link]
sident/Popeye_forPresident_512kb.mp4" controls>
<track kind="subtitles" src="subtitles_de.vtt" srclang="de" label="Dutch" >
<!-- Ajouter une piste texte pour le sous titrage en spécifiant la source et sa langue-->
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English" >
<track kind="subtitles" src="subtitles_ja.vtt" srclang="ja" label="Japanese" >
</video>
<!-- Une figure avec légende facultative -->
<figure>
<!-- Insérer une image -->
<!-- alt pour une description textuelle de l'image -->
<img src="[Link] alt="placeholder-image">
<figcaption> Caption.</figcaption>
</figure>
<!-- Insérer un contexte de navigation imbriqué (une page html intégrée
dans la page courante) -->
<iframe src="[Link]
aPW59ma?si=PogFcGg9QqapyoPbn2lVOw" width="300" height="380"></iframe>
Q7 : Hyperliens - ajouter le code ci-dessous entre <footer> et </footer>, afin de créer un
lien vers un endroit de la même page, vers une autre page, vers un endroit d’une autre page,
vers un site externe qui s’ouvre dans une nouvelle fenêtre, lien pour envoyer un email et
lien pour télécharger un fichier.
Université Abou Bekr Belkaid Tlemcen 2023-2024
.<!-- Ajouter des liens -->
<!-- Lien pour envoyer un email -->
<address> relevant contacts <a href="[Link]
<!-- Lien vers une page web -->
<a href="[Link] vers le website (URL) </a>.
<!-- Lien vers une page web qui s'ouvre dans un nouveau onglet -->
<a href="[Link] target ="_blank">ouvrir le lien sur un nouvel onglet
</a>.
<!-- Lien vers un autre endroit de la page HTML courante -->
<a href="#browser"> lien vers le champ browser du formulaire</a>.
<!--Lien vers un endroit précis d'une autre page-->
<a href="[Link]#name">Vers un endroit precis de la page [Link]</a>.
<!--Lien pour télécharger un fichier stocké au même endroit que la pageweb -->
<a href="[Link]">Télécharger mon fichier </a>.
Q8: Liens - <link> pour établir des liens vers des ressources externes. Ajoutez une icône à
la page HTML en insérant la ligne suivante dans la partie <head>.
<!-- Pour ajouter l’icone à la page web => établir une relation entre le document courant
(la page web) et la ressource externe (l’image) -->
<link rel="icon" href="[Link]">
Q9 : Balises génériques - utilisation conteneurs génériques : div et span.
<!--L'élément span ne signifie rien en soi, mais peut être utile lorsqu'il est
utilisé avec les attributs globaux (un conteneur interne à un élément HTML exp :
<p>) -->
<p> une partie du texte a mettre dans un <span> span pour lui affecter un traitement
personnalisé </span> </p>
<!-- Un conteneur à plusieurs éléments HTML -->
<div>
<ul>
<li>List item</li>
<li>List item</li>
</ul>
</div>
Exercice 2 : Mise en forme d’une page HTML.
CSS (Cascading Style Sheets), est un langage de style utilisé pour apporter du design aux fichiers
et aux pages HTML.
Q1: Ajouter un style directement sur une balise via l’attribut style. Dans le fichier
« [Link] », remplacez la ligne suivant, puis visualisez avec le navigateur.
<h1 style="text-align:center;background-
color: lightblue;color: green;"> Titre de niveau 1 </h1 style="text-
align:center;background-color: lightblue;color: green;>
Université Abou Bekr Belkaid Tlemcen 2023-2024
Q2: Ajouter un style directement sur la page html avec la balise <style>< /style>. Insérez la
ligne suivante entre <head> et </head> puis testez le résultat.
<style>
body {
font-style:italic;
background-color: gray;
text-align: center;
}
</style>
Q3: Faire une référence à une feuille de style (CSS). Dans la partie <head> ajoutez la ligne
suivante :
<-- Appliquer la feuille de style [Link] à la page HTML -->
<link rel="stylesheet" href="[Link]">
Q4: Ouvrez le fichier [Link] dans votre éditeur, insérez les lignes suivantes et testez.
html{
margin:auto 12px 10%; /*Ajuster les marges (espace entre les bordures et les éléments
extérieurs) de la page HTML*/
/*Ici on peut spécifier 4 valeurs pour les 4 côtés */
padding: auto ; /*Ajuster l'escape entre les bordures et le contenu des éléments (auto=>
ajusté par le navigateur */
}
body {
font: 75% georgia, sans-serif; /*Police*/
line-height:1.88889;
color:#555753;
background: #fff url([Link]) repeat bottom right;
}
p {
margin-top:0;
text-align:justily; /*Allignement du texte */
}
h3 {
font: italic normal 1.4em georgia, sans-serif;
letter-spacing:1px;
margin-bottom:o;
color:#7D775C;
}
a:link{ /* texte des liens "a" en couleur violet */
font-weight: bold;
text-decoration:none;
color:rgb(224, 15, 130);
}
a:visited { /* texte des liens "a" visités en couleur verte */
font-weight: bold;
text-decoration:none;
color:rgb(22, 206, 31);
}
Université Abou Bekr Belkaid Tlemcen 2023-2024
a:hover, a:focus, a:active { /* Souligner le texte des liens "a" au moment du survol et
du clic de la souris*/
text-decoration:underline; }
Q5: Les attributs globaux « class » et « id » pouvant être utilisés dans la balise ouvrante de
n’importe quel élément HTML afin de cibler un élément particulier (id est unique et class
non). Ajoutez les lignes suivantes dans <main> de la page HTML.
<h1 id="orange">Un titre de niveau 1</h1>
<p class="noir">Un premier paragraphe</p>
<p class="noir">Un autre paragraphe </p>
<ul>
<li>Elément de liste 1</li>
<li class="vert"> Elément de liste 2</li>
</ul>
<p id="gros">Un troisième paragraphe</p>
Ensuite, ajoutez les lignes suivantes dans la feuille de style « [Link] » et testez.
#orange{ /*# pour faire référence à un id */
color: orange;
}
#gros{
font-size:24px;
}
.noir{/* . pour faire référence à une class */
color: rgb(22, 22, 24);
}
.vert{
color: green;
}
