Le langage HTML - Bienvenue dans l`ENT du collège Louise Michel

Transcription

Le langage HTML - Bienvenue dans l`ENT du collège Louise Michel
.
Le langage HTML
Technologie
(Technologie)
Le langage HTML
1/8
Comment afficher la page d’un site web ?
(Technologie)
Le langage HTML
2/8
Comment afficher la page d’un site web ?
Avec un navigateur :
Pour afficher un site Web, on utilise un navigateur internet.
Celui-ci traduit le langage HTML et nous affiche
correctement les éléments de la page (le texte, les images,
les vidéos...)
(Technologie)
Le langage HTML
2/8
Qu’est-ce que le langage HTML ?
(Technologie)
Le langage HTML
3/8
Qu’est-ce que le langage HTML ?
Définition
Le HTML (ou HyperText Markup Language) est un langage
hypertexte à balises.
(Technologie)
Le langage HTML
3/8
Un exemple de code source d’une page HTML :
(Technologie)
Le langage HTML
4/8
Un exemple de code source d’une page HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
</head>
<body>
Bonjour !
</body>
</html>
Que va afficher cette page ?
(Technologie)
Le langage HTML
4/8
Un exemple de code source d’une page HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
</head>
<body>
Bonjour !
</body>
</html>
Que va afficher cette page ?
Résultat :
Bonjour !
(Technologie)
Le langage HTML
4/8
Définition
Une page HTML, est constituée de texte et de balises.
Celles-ci permettant de mettre en page le texte, ou
d’insérer certains éléments dans la page, comme des
images, des vidéos, ou du code Javascript.
Attention
Ne pas confondre le langage Javascript et le Java. Ils se
ressemblent mais ce ne sont pas les mêmes langages !
(Technologie)
Le langage HTML
5/8
Les balises
Les signes < et > délimitent une balise.
Exemple : <html> <tr> <table>
(Technologie)
Le langage HTML
6/8
Les balises
Les signes < et > délimitent une balise.
Exemple : <html> <tr> <table>
Le slash
Une balise doit être (re)fermée, avec le slash /. Exemple :
<html></html><table></table> <font color="red">Bonjour !</font>
(Technologie)
Le langage HTML
6/8
Les balises
Les signes < et > délimitent une balise.
Exemple : <html> <tr> <table>
Le slash
Une balise doit être (re)fermée, avec le slash /. Exemple :
<html></html><table></table> <font color="red">Bonjour !</font>
Plusieurs balises
Une balise peut contenir plusieurs autres balises. Exemple :
<html>
<head><title>Facebook</title></head><body>Bienvenue !</body>
</html>
(Technologie)
Le langage HTML
6/8
Les balises
Les signes < et > délimitent une balise.
Exemple : <html> <tr> <table>
Le slash
Une balise doit être (re)fermée, avec le slash /. Exemple :
<html></html><table></table> <font color="red">Bonjour !</font>
Plusieurs balises
Une balise peut contenir plusieurs autres balises. Exemple :
<html>
<head><title>Facebook</title></head><body>Bienvenue !</body>
</html>
Balises "Orpheline"
Certaines sont "orpheline" et ne se ferment pas.
(Technologie)
Le langage HTML
6/8
Création d’une première page d’un site web
Il suffit de créer un fichier nommé index.html et d’y écrire
le texte ci-dessous :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Page d’accueil</title>
</head>
<body>
Bienvenue sur notre site
</body>
</html>
(Technologie)
Le langage HTML
7/8
Création d’une première page d’un site web
Il suffit de créer un fichier nommé index.html et d’y écrire
le texte ci-dessous :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Page d’accueil</title>
</head>
<body>
Bienvenue sur notre site
</body>
</html>
Visualisation de la page
Il suffit d’ouvrir le fichier index.html avec un navigateur.
(Technologie)
Le langage HTML
7/8
Exercice :
Raccourcis XP -> Notepad++
Enregistrer sous
Créer le dossier "HTML"
Enregistrer sous le nom de fichier : "index.html" dansMes
Documents/HTML
Recopier le code HTML
Lancer Firefox
Fichier -> Ouvrir : Mes Documents/HTML/index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Page d’accueil</title>
</head>
<body>
Bienvenue sur notre site
</body>
</html>
(Technologie)
Le langage HTML
8/8

Documents pareils