Première NSI Mme Pierrot
WEB - Partie 1 : Structurer le contenu d’une page web en html5
Thème :
Interaction entre l’homme et la machine sur le Web
Compétences à acquerir :
• savoir écrire une page web (sans mise en forme)
• Structurer son contenu avec des balises-html5
• Créer des liens hypertexte entre pages Notions :
Langage de structuration/description d’un texte : html5
Eléments d’information et exemples.
Sitographie :
• Un tuto pour apprendre (openclassrooms) :
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
• La liste des balises :
https://jaetheme.com/balises-html5/#liste-balises-html5 https://www.w3schools.com/tags/default.asp
HTML :
HyperText Markup Language
en français :Langage de balisage de liens hypertextes
Squelette d’une page web en html :
<!doctype html>
<html>
<!--La partie head n'apparait dans la fenetre du navigateur. Elle contient des infos importantes pour garantir un affichage correct, référencé et stylé -->
<head>
<meta charset="UTF-8" http-equiv="content-type">
<title>Titre de ma page</title>
</head>
<!--La partie body englobe le contenu textuel structuré et les liens vers : - soit des éléments multimédia (photo, audio, vidéo)
- soit des pages déjà présentes sur le web - soit d'autres pages que vous créez... -->
<body>
<!--Structurer son texte-->
<h1>titre de niveau 1</h1>
...
<h6>titre de niveau 2</h6>
<p>paragraphe</p>
Texte standart après lequel il faudra sauter à la ligne...<br>
<!--y integrer des images-->
<img alt="Texte alternatif" src="adressedemonimage"><br>
<!--y integrer des vidéos-->
<video controls> <source src="video.mp4"> </source> </video>
<!--y integrer des sons-->
<audio controls> <source src="chanson.mp3"> </source> </audio>
<!--y integrer des liens vers d'autres pages...-->
<a href="http://www.adressedelanouvellepage.html">Le texte cliquable</a><br>
</body>
</html>
Travail à réaliser
1) Ouvrir le fichier squellette.html avec un éditeur de texte puis avec un navigateur.... C’est sobre !
2) En utilisant l’éditeur de texte (blocnote ou sublimtext ou etc..) créer deux pages web sur un sujet de votre choix avec « image » « vidéo » et « son », une circulation d’une page vers l’autre, des liens vers d’autres pages déjà présentes sur le web.
Dans un premier temps il ne sera pas question de mise en forme : vous devez uniquement organiser votre contenu.
