Vous êtes sur la page 1sur 27

Introduction à l’HTML

Présentée par : Diana Iskandar


2017-2018
Plan (1)

 Qu’est-ce-que l’HTML ?
 Qu’est-ce-qu’une page Web ?
 De
quoi a-t-on besoin pour créer une page
Web ?
 Pourquoi utiliser HTML ?
 Structure d’un document HTML
Plan (2)

 Quellessont les balises nécessaires pour


créer un document HTML ?
 Comment créer une page Web ?
 Quelques balises HTML
 Références
Qu’est-ce-que l’HTML ? (1)
Qu’est-ce-que l’HTML ? (2)

 HTML est le code de base d’une page Web.


Mais qu’est-ce-qu’une page Web ?
Qu’est-ce-qu’une page Web ? (1)

 C’est un document
multimédia.

 Elle est décrite


avec un langage de
description HTML
ou XHTML.
Qu’est-ce-qu’une page Web ? (2)

 Elle est stockée


dans un fichier
d’extension .html
ou .htm.

 Elle est calculée et


affichée par un
navigateur.
Qu’est-ce-qu’une page Web ? (3)

 Elle est localisée


sur Internet à l’aide
d’une adresse URL.

 Elle permet
d’accéder à
d’autres pages en
suivant des liens.
De quoi a-t-on besoin pour créer une
page Web ?

Editeur Browser
de texte ex:
ex : Internet
Notepad Explorer
Pourquoi utiliser HTML ?

Pleins
Simple d’aides

Gratuit
Structure d’un document HTML
Quelles sont les balises nécessaires pour
créer un document HTML ? (1)
Nom de balise Description
<HTML> correspond au début d'un document de type HTML
</HTML> correspond à la fin d'un document de type HTML
<HEAD> correspond au début de la zone d'en-tête
</HEAD> correspond à la fin de la zone d'en-tête
<TITLE> correspond au début du titre de la page
</TITLE> correspond à la fin du titre de la page
<BODY> correspond au début du document proprement dit
</BODY> correspond à la fin du document proprement dit
Quelles sont les balises nécessaires pour
créer un document HTML ? (2)

 Le
code source dans l’éditeur web doit
commencer par <!DOCTYPE html>.
Ce n’est pas vraiment une balise.

Cette ligne indique qu'il s'agit bien


d'une page web HTML.
Quelles sont les balises nécessaires pour
créer un document HTML ? (3)

A chaque balise de début d'une action, soit


<...>, correspond une balise de fin d'une
action </...>.

 Les balises ne sont pas "case sensitive".


Quelles sont les balises nécessaires pour
créer un document HTML ? (4)

 Lesbalises doivent être fermées dans le


sens inverse de leur ouverture :
<html><body></body></html>
Quelles sont les balises nécessaires pour
créer un document HTML ? (5)

<html><body></html></body> : Incorrect
Comment créer une page Web ? (1)

Créer une
page web
Ouvrir le
navigateur Ouvrir l'éditeur
de texte

Enregistrer le doc. avec Ecrire le code


l'extension .html ou .htm HTML
Comment créer une page Web ? (2)

 Exercice1 : La page Web suivante est


affichée sur le navigateur.
Quel est son code source ?
Comment créer une page Web ? (3)
Comment créer une page Web ? (4)

Cliquer sur la bonne réponse !


<!DOCTYPE html> !
Pas exactement <!DOCTYPE html>!
Correct
<HTML> <HTML>
<Head> <Head>
<Title></Title> <Title>Technologie de
l'éducation</Title>
</Head>
</Head>
<Body>Technologie
<Body>Projet 1 :
de l’éducation Introduction à l’HTML
</Body> </Body>
</HTML> </HTML>
Quelques balises HTML (1)

permet de mettre un texte en gras.

permet de mettre un texte en italique.

permet de souligner un texte.

permet d’afficher une en-tête de


niveau n et sauter une ligne.
Quelques balises HTML (2)

permet d’afficher le texte sous forme


de liste non ordonnée.

permet d’afficher le texte sous forme


d'une liste ordonnée.

constitue un élement de la liste.


Quelques balises HTML (3)

 Exercice 2:
Voici un code HTML et 2 résultats possibles.
Choisissez la page Web qui correspond bien à
ce code.
Quelques balises HTML (4)
Quelques balises HTML (5)

Cliquer sur la bonne réponse !


Les mois du printemps 1. Les mois du printemps
Correct ! • Pas
Avril exactement !
• Mai
• avril • Juin
• mai Les mois d’automne
• juin 1. Octobre
2. Novembre

Les mois d’automne

1. octobre
2. novembre
Références

 http://www.guidegratuit.com/premierepag
e.htm
 http://www.lehtml.com/download/html_fr.
pdf
 http://creersonsiteweb.net/page-html-
creer-une-page-web