Révision HTML 5
3ème STI
Web
Le web se composé de millions de sites web
Chaque site web est composé de plusieurs pages web
Les sites et pages web se trouvent dans des serveurs
Chaque page web contient des informations
Les sites et pages web sont reliés entre eux par des
liens
site web?
Etapes de Création d’un site web
Etapes de Création d’un site web
HTML 5?
HTML 5?
HTML5 (HyperText Markup Language 5) est la dernière révision
majeure du HTML (format de données conçu pour représenter
les pages web). Cette version a été finalisée le 28 octobre 2014.
Editeurs web
Pour coder en HTML : nous n’avons besoin que d’un éditeur de texte ou
un logiciel WYSIWYG
Les éditeurs de texte : ce sont des programmes dédiés à l'écriture de
code. On peut en général les utiliser pour de multiples langages, pas
seulement HTML et CSS. Ils se révèlent être de puissants alliés pour les
créateurs de sites web.
Exemple: Notepad ++, sublime text, visualstudio code,…
Les WYSIWYG(WhatYou SeeIs WhatYou Get-Ce Que Vous Voyez Est Ce
Que Vous Obtenez) : ce
sont des programmes qui se veulent très faciles d'emploi, ils permettent
de créer des sites web sans apprendre de langage particulier. Parmi les
plus connus d'entre eux : Mozilla Composer, Microsoft Expression Web,
Dreamweaver…
Structure générale d’un document HTML5
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>….</title>
</head>
<body> ….</body>
</html>
DOCTYPE: Le type de document a été introduit pour marquer
la différence entre les anciens navigateurs qui suivaient le format
usuel dans les années 90 et les navigateurs plus récents
Head: l’entête du document
Title: le titre de la page web
meta charset="utf-8" Pour les pages en chinois ou japonais,
un autre codage est nécessaire.
Body: corps du document
Exercice
Créer les 3 pages web suivantes
Covid.html
protection.html
statistiques.html
Les titres
Listes:
Les liens
Les images
Vidéo
Audio
Tableau: caption
Tableau: <thead> <tbody> <tfoot>
Les balises d’architecture
Question1:
l'hébergement consiste à
Identifier les objectifs et la structure du site web
Créer les pages web
X Mettre le site web en ligne
Changer le contenu du site
Question 2:
Le référencement d’un site web consiste à
Mettre le site en ligne
Créer les pages web
Changer le contenu du site
X Faire connaitre le site auprès de Google
Question 3:
HTML est un langage qui
Permet de structurer les informations dans une
X
page web
X Utilise les balises
Permet de créer des programmes Python
Permet d’insérer des images et des vidéos dans
X une page web
Question 4:
La partie HEAD du document HTML contient.
Toutes les balises d'un fichier HTML
La balise Body
X Des informations générales sur la page web
X La balise Title
Question 5:
La balise <title> text </title>
Se trouve dans la balise Body
X Se trouve dans la balise Head
X Permet de nommer la page web
Question 6:
La structure de base d’une page web est.
<HTML><HEAD><TITLE> ></TITLE></HEAD>
<BODY></BODY></HTML>
X <HTML>><TITLE><HEAD</HEAD></TITLE>
<BODY></BODY></HTML>
<HTML><HEAD><TITLE></HEAD></TITLE><BODY>
</BODY></HTML>
Question 7:
Ces balises permettent de structurer un document HTML.
X <HEADER></HEADER>
<TITLE></TITLE>
X <NAV></NAV>
X <SECTION></SECTION>
Question 8:
La partie encadrée dans cette page web se trouve dans la/les balise(s)
<header> <footer> <nav><section><aside>
Question 9:
La partie encadrée dans cette page web se trouve dans la/les balise(s)
<header> <footer> <nav><section><aside>
Question 10:
La partie encadrée dans cette page web se trouve dans la/les balise(s)
<header> <footer> <nav><section><aside>
Question 11:
La partie encadrée dans cette page web se trouve dans la/les balise(s)
<header> <footer> <nav><section><aside>
Question 12:
La partie encadrée dans cette page web se trouve dans la/les balise(s)
<header> <footer> <nav><section><aside>
Question 13:
<img src="affiche.png" >
Permet d'ajouter un son
Permet d'ajouter une vidéo
Permet d'ajouter une liste
X Permet d'ajouter une image
Question 14:
La balise <TITLE></TITLE> se trouve dans :
<BODY></BODY>
X <HEAD></HEAD>
X <HTML></HTML>
<H1></H1>
<HEADER></HEADER>
Question 15:
Pour créer cette liste on utilise le code HTML
suivant :
X <UL><LI>A</LI><LI>B</LI></UL>
<LI><UL>A</UL><UL>B</UL></LI>
<P>A</P> <P>B</P>
<H1>A</H1> <H1>B</H1>
<IMG SRC="A"> <IMG SRC="B">
EXERCICE
