Vous êtes sur la page 1sur 5

Université SAAD DAHLEB –BLIDA TP : Technologie Web Année universitaire

Faculté de Technologie HTML 2020-2021

TPN01 : INITIATION DANS LE LANGAGE HTML


BUT
Le principal but de ce TP est d’apprendre à manipuler le langage HTML pour la création
d’une page WEB.
STRUCTURE GLOBALE

Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant un


ensemble de convention d'écriture. Un fichier HTML peut être écrit à l'aide de n'importe quel
éditeur de texte simple (des éditeurs plus évolués existent également).

Lorsque vous consultez un site web, les fichiers HTML (extension .htm ou .html) sont
envoyés à votre navigateur et le code html est interprété sur VOTRE machine par VOTRE
navigateur

Le code html est interprété par le navigateur pour visualiser le résultat. Ce code est
constitué de texte et d'indications de mise en page. Ces indications sont appelées éléments ou
balises.

Au sein de l'élément <html>, le document aura une « tête » (head en anglais) située
entre les balises <head> et </head> et un « corps » (body en anglais) situé entre les balises
<body> et </body>.

 Les balises

Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à
l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit
afficher.
Les balises se repèrent facilement. Elles sont entourées de « chevrons », c'est-à-dire des
symboles < et >, comme ceci : <balise>.

À quoi est-ce qu'elles servent ?

Elles indiquent la nature du texte qu'elles encadrent. Elles veulent dire par exemple : « Ceci est
le titre de la page », « Ceci est une image », « Ceci est un paragraphe de texte », etc.

On distingue deux types de balises : les balises en paires et les balises orphelines.

1
Université SAAD DAHLEB –BLIDA TP : Technologie Web Année universitaire
Faculté de Technologie HTML 2020-2021

 Les balises paires

Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent :

 Les balises orphelines

Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par
exemple une image).

ATTRIBUT :
Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des
informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus
souvent une valeur, comme ceci :
Exemple :
<p align= "center "> voici ce qu’il faut </p>
<p> </p> : balise. aligne= "center " : attribut. Voici ce qu’il faut : contenue.

Exercice 01 :
Methodes
1/
Enregistrez votre document sous le nom de "mapage.html», Attention à bien renseigner
l'extension en.html et non en.txt
Tapez le code html en respectant bien l'écriture des balises.
Visualisez le résultat dans votre navigateur Web (Internet Explorer, Firefox, Safari...)

2
Université SAAD DAHLEB –BLIDA TP : Technologie Web Année universitaire
Faculté de Technologie HTML 2020-2021

2/ Changeons un peu le texte de notre page, pour quelque chose comme :

Ajoutez ces lignes dans la page précédente, et vérifier l'affichage.

Exercice 02 :
Inserer une image dans votre page web avec cette balise
<IMG SRC="telecom.jpg">
Expliquer chaque ligne du code HTML suivant .

3
Université SAAD DAHLEB –BLIDA TP : Technologie Web Année universitaire
Faculté de Technologie HTML 2020-2021

4
Université SAAD DAHLEB –BLIDA TP : Technologie Web Année universitaire
Faculté de Technologie HTML 2020-2021

Rendu final du TP

1/ Réalisez un mini site comprenant votre CV selon le descriptif suivant:

•Un tableau avec bordure fine qui comportera les informations "standards».

•4 rubriques, Formation, Expérience professionnelle, Compétences, et Informations


complémentaires (titre en H2 par exemple).

•Pour chaque rubrique un tableau à 2 colonnes et N lignes, chaque ligne comprend à gauche les
années X+1-X dans une liste à puces et la colonne de droite comporte la description de l'année
en question (cf. plus bas!).

2/ Insérer aussi une photo.