Scribd
Importer
19 vues4 pages

Saisir Le Code Dans Notepad++, L'enregistrer Sous Vide - HTML, Ce Code Sert de Modèle de Base Et Sera Repris Pour Tous Les Autres Exercices

Ce document présente un TP sur les éléments de base du langage HTML, comprenant plusieurs exercices pratiques. Les exercices incluent la création d'une page HTML de base, l'utilisation de titres et de séparateurs, la création de listes et de tableaux, ainsi que l'insertion d'images avec légendes. Enfin, il est demandé de créer une page d'index pour naviguer entre les exercices réalisés.

Transféré par

lalalili02534
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
19 vues4 pages

Saisir Le Code Dans Notepad++, L'enregistrer Sous Vide - HTML, Ce Code Sert de Modèle de Base Et Sera Repris Pour Tous Les Autres Exercices

Ce document présente un TP sur les éléments de base du langage HTML, comprenant plusieurs exercices pratiques. Les exercices incluent la création d'une page HTML de base, l'utilisation de titres et de séparateurs, la création de listes et de tableaux, ainsi que l'insertion d'images avec légendes. Enfin, il est demandé de créer une page d'index pour naviguer entre les exercices réalisés.

Transféré par

lalalili02534
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

TP1: les éléments de base du langage HTML

Exercice 0:

Saisir le code dans Notepad++, l’enregistrer sous « [Link] » , ce code sert de modèle de base et
sera repris pour tous les autres exercices.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title> Ma première page HTML </title>

</head>

<body>

< !-- mettre ici le contenu de ma page -->

</body>

</html>

Créer un dossier pour y sauvegarder vos exercices. Pour chaque exercice, créer un nouveau
document HTML "exercice+n°.html ".

Exercice 1: titres et séparateurs

Copier le code suivant dans votre éditeur de texte afin de connaitre le rôle de chaque balise

<body>

<h1>Titre niveau 1 (titre principal)</h1>

<h2>Titre niveau 2</h2>

<h3>Titre niveau 3 (en général on s'arrête à ce niveau)</h3>

<h4>Titre niveau 4</h4>

<h5>Titre niveau 5</h5>

<h6>Titre niveau 6</h6>

Ceci est un trait de séparation <hr>


<p> ceci est un
paragraphe .........................................................
....................................................................
....................................................................
.......................</p>

HTML ne tient pas compte

des

sauts

de

ligne <br>

je dois ajouter la balise "br"

</body>

Exercice2 : listes

Écrire le code HTML permettant de reproduire le document suivant:

Module de programmation Web <h1>

Programme :<h2>

1. Introduction :

• http

• url

• html

2. LangageHTML

• En-tête (head)

• Corps (body)

3. Feuilles de Style CSS

4. Le langage JavaScript

5. Langage PHP

• Bases de PHP

• Interaction avec les bases de données MySQL


Exercice 3 : tableaux

Écrire le code HTML permettant de reproduire le document suivant: (la première ligne représente
l'en-tête du tableau, le reste des lignes représentent le orps du tableau)

Élément Rôle sémantique


section Partie portant sur une même thématique (contenu relié)
article Partie autonome (indépendante du reste)
header Partie d’introduction (document ou section), contient le titre, logo,…
main Contenu principal de la page
footer Pied de page (ou de section), contient les coordonnées, liens réseaux sociaux,…
nav Menu de navigation principale, contient des liens
aside Contenu complémentaire , facultatif

Exercice 4:

Nous disposons d'un fichier [Link] (qu'on mettra dans un dossier "images") représentant la
carte de l'Algérie. Créer une page HTML permettant d'afficher cette carte sous forme de
figure avec une légende (caption) "Figure1- Carte de l'Algérie". Prévoir un contenu alternatif
(alt) qui s'affichera si l'image ne peut pas être affichée. On utilisera un adressage relatif.

Exercice 5 :

Créer une page "[Link]" permettant d'accéder aux exercices précédents via des liens de
navigation comme suit:

<header>

<h1> syntehse du tp1 html </h1>

<nav>

<ol>

<li> <a href="[Link]" target="_blank"> titres et sépareteurs </a> </li>

<li> <a href="[Link]"> liste </a> </li>

</ol>
</nav>

</header>

On utilisera l'adressage relatif. On mettra tous les fichiers HTML dans le même dossier (y compris
[Link]), et on mettra l'image de l'exercice 4 dans un dossier "images".

Vous aimerez peut-être aussi