Seconde – SNT – Le Web / Réseaux Sociaux
Séance n°1 : Le langage HTML
Polyvalent
Albert EINSTEIN
Cette série de TP consacrée au thème : LE WEB, se clô turera par un mini projet (la création d’un mini-
site Web). Lors de ce TP, vous allez créer une première page WEB. Cette page WEB doit être déposée
sur Pronote, car elle fera partie de la tâ che finale que vous aurez à rendre. Vous devez créer votre site
Web en suivant les instructions données. En même temps, vous devez lire, comprendre et retenir les
explications données. Une évaluation finale sera faite en classe en fin de thème.
L’HyperText Markup Langage, généralement abrégé HTML, est le langage conçu pour représenter les pages
web. C’est un langage permettant d’écrire de l’hypertexte, d’où son nom.
Tâche n°1 : Premier fichier
1 Ouvrir l’éditeur de texte notepad++.
2 Recopier le texte suivant en respectant autant que possible la mise en page :
Les Réseaux Sociaux
Les réseaux sociaux sont des applications basées sur les technologies du Web qui offrent un
service de mise en relation d'internautes pour ainsi développer des communautés d'intérêts.
En 2018, on estimait à 3,2 milliards le nombre d'utilisateurs actifs des réseaux sociaux.
3 Créer un dossier et sauvegarder à l’intérieur la page sous le
nom : Nom_prenom.html avec votre nom et votre prénom, bien
sû r !
ATTENTION à l’extension du fichier « .html »
4 Ouvrir le fichier que vous venez de créer avec un navigateur
internet. Observez la mise en page obtenue.
5 Partagez votre écran avec votre fichier html ouvert dans le navigateur et le même fichier ouvert dans
notepad++.
Tâche n°2 : Première page web
Modifier votre fichier dans notepad++ afin d’obtenir la structure balisée ci-dessous. Enregistrez le fichier dans
notepad++ puis actualisez la page dans le navigateur. Qu’observez-vous ?
Comprendre et Retenir :
La déclaration <! DOCTYPE html> définit le document comme étant HTML5
L'élément <html> est l'élément racine d'une page HTML
L'élément <head> contient des méta-informations sur le document (non visible dans la page)
L'élément <title> spécifie le titre du document
L'élément <meta charset="UTF-8"> spécifie le type d'encodage document (ici UTF-8)
L'élément <body> contient le contenu visible de la page
<h1>Titre important</h1>
<p>Ceci est un paragraphe</p>
Je saute une ligne <br/>
Tâche n°3 : Créer une liste non numérotée
⯈1. A l’aide d’une recherche sur le Web, associez les réseaux sociaux ci-dessous à leur date d’apparition et leur
caractérisation.
Réseau social qui permet l’échange de courts messages, limités au
Facebook 1995 départ à 140 puis à 280 caractères (on parle de microblogage).
WhatsApp 2003 Réseau social qui permet le partage de photos et de vidéos.
Classmates 2004 Réseaux sociaux à vocation professionnelle.
Messagerie instantanée qui se substitue à l’utilisation des SMS et
Instagram 2006
MMS chez beaucoup d’utilisateurs.
Myspace L’un des premiers réseaux sociaux qui permettent aux étudiants de
2009
LinkedIn rester en relation.
Réseau social qui permet, sur plateformes mobiles, le partage de
Twitter 2010 photos et de vidéos, avec une limitation de durée.
Réseau social d’abord réservé aux étudiants de l’université Harvard,
Snapchat 2011
puis ouvert au grand public en 2006.
⯈2. Modifier votre fichier HTML afin de créer une liste des réseaux sociaux ci-dessus avec leur date d’appari-
tion (voir le fichier à la page suivante).
Comprendre et Retenir :
La balise <ul> crée une liste non numérotée
Chaque balise <li> représente un élément de la liste ci-dessus.
<h2>Titre un peu moins important</h2>
Tâche n°4 : Créer une liste numérotée
⯈1. A l’aide d’une recherche sur le Web, classez les principaux réseaux sociaux selon un ordre de grandeur de
leurs nombres d’abonnés.
⯈2. Modifier votre fichier afin de créer une liste numérotée des réseaux sociaux selon leur nombre d’abonnés.
Comprendre et Retenir :
La balise <ol> crée une liste numérotée
Chaque balise <li> représente un élément de la liste ci-dessus.
Tâche n°5 : Créer un tableau
⯈1. A l’aide d’une recherche sur le Web, cherchez les principaux dangers des réseaux sociaux.
⯈2. Modifier votre fichier HTML afin de créer un tableau présentant les principaux dangers.
Comprendre et Retenir :
La balise <table> crée un tableau
Chaque balise <tr> représente une ligne du tableau
Pour chaque ligne, chaque balise <td> représente une colonne du tableau
Tâche n°6 : Créer un lien hypertexte
⯈1. A l’aide d’une recherche sur le Web, expliquez les termes suivants : exclusion, flaming, dénigrement, usurpa-
tion d’identité, outing, happy slapping, sexting …
⯈2. Modifier votre fichier HTML afin de placer des liens vers des sites Web expliquant ces termes.
Comprendre et Retenir :
La balise <table> crée un tableau
<h3> Titre moins important (sous-titre) </h3>
Tâche n°7 : Insérer une image
⯈1. A l’aide d’une recherche sur le Web, récupérez les logos de quelques réseaux sociaux et enregistrez-les
dans le même dossier que votre fichier html.
⯈2. Modifier votre fichier HTML afin d’afficher ces images.
Comprendre et Retenir :
La balise <img> insère une image
width= permet d’imposer une taille d’image
src= doit contenir l’adresse exacte de la photo
