logo
Seconde SNT
Sciences Numériques et Technologie

Internet
Le Web
Réseaux
Données
Localisation
Objets
Photos
Le Programme



Source : HTML contenus, structure, liens from Université Lille SHS on Vimeo.



Etape n°1 : Créer une page Web en langage HTML

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. Copier-Coller le texte suivant, en respectant les paragraphes :
    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. Dans votre dossier, sauvegarder 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 cette page avec un navigateur internet. Observez la mise en page obtenue (Pour voir ce qu'il faut obtenir …)
  5. Partagez votre écran avec votre fichier html ouvert dans le navigateur et le même fichier ouvert dans notepad++.

    6. Pour ceux qui n'y arrive pas, vous pouvez travailler, en ligne, sur le site ci-dessous et télécharger votre fichier à la fin.

Tâche n°2 : Première page web

  1. Modifier votre fichier dans notepad++ afin d'obtenir la structure balisée à gauche ci-dessous. Enregistrez le fichier dans notepad++ puis actualisez la page dans le navigateur (Pour voir ce qu'il faut obtenir …). Qu'observez-vous ?
    2. <!DOCTYPE html>
    <html>
    <head>
    <meta     charset="utf-8">
    <title>     Les Réseaux Sociaux </title>
    </head>

    <body>
    <h1>     Les Réseaux Sociaux </h1>
    <p>    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. <br/>
    En 2018, on estimait à 3,2 milliards le nombre d'utilisateurs actifs des réseaux sociaux.</p>
    </body>
    </html>

  2. Explication :
    • 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.
    Facebook
    Réseau social qui permet l'échange de courts messages, limités au départ à 140 puis à 280 caractères (on parle de microblogage).
    1995
    WhatsApp
    Réseau social qui permet le partage de photos et de vidéos.
    2003
    Classmates
    Réseaux sociaux à vocation professionnelle.
    2004
    Instagram
    Messagerie instantanée qui se substitue à l'utilisation des SMS et MMS chez beaucoup d'utilisateurs.
    2006
    Myspace LinkedIn
    L'un des premiers réseaux sociaux qui permettent aux étudiants de rester en relation.
    2009
    Twitter
    Réseau social qui permet, sur plateformes mobiles, le partage de photos et de vidéos, avec une limitation de durée.
    2010
    Snapchat
    Réseau social d'abord réservé aux étudiants de l'université Harvard, puis ouvert au grand public en 2006.
    2011


  2. Modifier votre fichier HTML afin de créer une liste des réseaux sociaux ci-dessus avec leur date d'apparition (Pour voir ce qu'il faut obtenir …).
    3. <!DOCTYPE html>
    <html>
    <head>
    <meta     charset="utf-8">
    <title>     Les Réseaux Sociaux </title>
    </head>

    <body>
    <h1>     Les Réseaux Sociaux </h1>
    <p>    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. <br/>
    En 2018, on estimait à 3,2 milliards le nombre d'utilisateurs actifs des réseaux sociaux.</p>

    <h2>    Repères historiques</h2>
    <ul>
    <li>1995 : Nom du réseau social apparu en 1995</li>
    <li>2003 : ... à vous de créer cette liste ...</li>
    </ul>
    </body>
    </html>

  3. Explication :
    • 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 HTML afin de créer une liste numérotée des réseaux sociaux selon leur nombre d'abonnés (Pour voir ce qu'il faut obtenir …).
    3. <!DOCTYPE html>
    <html>
    <head>
    <meta     charset="utf-8">
    <title>     Les Réseaux Sociaux </title>
    </head>

    <body>
    <h1>     Les Réseaux Sociaux </h1>
    <p>    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. <br/>
    En 2018, on estimait à 3,2 milliards le nombre d'utilisateurs actifs des réseaux sociaux.</p>

    <h2>    Repères historiques</h2>
    <ul>
    <li>1995 : Nom du réseau social apparu en 1995</li>
    <li>2003 : ... à vous de créer cette liste ...</li>
    </ul>

    <h2>    Les réseaux sociaux les plus utilisés :</h2>
    <ol>
    <li>    Facebook avec 2,45 milliards d'abonnés</li>
    <li>     ... à vous de créer cette liste ...</li>
    </ol>
    </body>
    </html>

  3. Explication :
    • 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 (Pour voir ce qu'il faut obtenir …).
    3. <!DOCTYPE html>
    <html>
    <head>
    <meta     charset="utf-8">
    <title>     Les Réseaux Sociaux </title>
    </head>

    <body>
    <h1>     Les Réseaux Sociaux </h1>
    <p>    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. <br/>
    En 2018, on estimait à 3,2 milliards le nombre d'utilisateurs actifs des réseaux sociaux.</p>

    <h2>    Repères historiques</h2>
    <ul>
    <li>1995 : Nom du réseau social apparu en 1995</li>
    <li>2003 : ... à vous de créer cette liste ...</li>
    </ul>

    <h2>    Les réseaux sociaux les plus utilisés :</h2>
    <ol>
    <li>    Facebook avec 2,45 milliards d'abonnés</li>
    <li>     ... à vous de créer cette liste ...</li>
    </ol>

    <h2>    Les dangers des réseaux sociaux</h2>
    <table>
    <tr>
    <td> Le cyberharcèlement</td>
    <td> Le harcèlement est le fait de tenir des propos ou d'avoir des comportements répétés ayant pour but ou effet une dégradation des conditions de vie de la victime.</td>
    </tr>
    <tr>
    <td>Difficulté du droit à l'oubli</td>
    <td> ... à vous d'en rechercher la signification ...</td>
    </tr>
    </table>
    </body>
    </html>

  3. Explication :
    • 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, usurpation d'identité, outing, happy slapping.
  2. Modifier votre fichier HTML afin de placer des liens vers des sites Web expliquant ces termes (Pour voir ce qu'il faut obtenir …).
    3. <!DOCTYPE html>
    <html>
    <head>
    <meta     charset="utf-8">
    <title>     Les Réseaux Sociaux </title>
    </head>

    <body>
    <h1>     Les Réseaux Sociaux </h1>
    <p>    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. <br/>
    En 2018, on estimait à 3,2 milliards le nombre d'utilisateurs actifs des réseaux sociaux.</p>

    <h2>    Repères historiques</h2>
    <ul>
    <li>1995 : Nom du réseau social apparu en 1995</li>
    <li>2003 : ... à vous de créer cette liste ...</li>
    </ul>

    <h2>    Les réseaux sociaux les plus utilisés :</h2>
    <ol>
    <li>    Facebook avec 2,45 milliards d'abonnés</li>
    <li>     ... à vous de créer cette liste ...</li>
    </ol>

    <h2>    Les dangers des réseaux sociaux</h2>
    <table>
    <tr>
    <td> Le cyberharcèlement</td>
    <td> Le harcèlement est le fait de tenir des propos ou d'avoir des comportements répétés ayant pour but ou effet une dégradation des conditions de vie de la victime.</td>
    </tr>
    <tr>
    <td>Difficulté du droit à l'oubli</td>
    <td> ... à vous d'en rechercher la signification ...</td>
    </tr>
    </table>

    <h3>Quelques liens intéressants :</h3>
    <a href="https://www.juritravail.com/codes/code-penal/article/222-33-2-2.html">Article 222-33-2-2</a>
    </body>
    </html>

  3. Explication :
    • La balise <a href="Adresse URL de la page souhaitée">Article 222-33-2-2</a> crée un lien hypertexte entre deux pages Web
    • <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 (Pour voir ce qu'il faut obtenir …).
    3. <!DOCTYPE html>
    <html>
    <head>
    <meta     charset="utf-8">
    <title>     Les Réseaux Sociaux </title>
    </head>

    <body>
    <h1>     Les Réseaux Sociaux </h1>
    <p>    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. <br/>
    En 2018, on estimait à 3,2 milliards le nombre d'utilisateurs actifs des réseaux sociaux.</p>

    <h2>    Repères historiques</h2>
    <ul>
    <li>1995 : Nom du réseau social apparu en 1995</li>
    <li>2003 : ... à vous de créer cette liste ...</li>
    </ul>

    <h2>    Les réseaux sociaux les plus utilisés :</h2>
    <ol>
    <li>    Facebook avec 2,45 milliards d'abonnés</li>
    <li>     ... à vous de créer cette liste ...</li>
    </ol>

    <h2>    Les dangers des réseaux sociaux</h2>
    <table>
    <tr>
    <td> Le cyberharcèlement</td>
    <td> Le harcèlement est le fait de tenir des propos ou d'avoir des comportements répétés ayant pour but ou effet une dégradation des conditions de vie de la victime.</td>
    </tr>
    <tr>
    <td>Difficulté du droit à l'oubli</td>
    <td> ... à vous d'en rechercher la signification ...</td>
    </tr>
    </table>

    <h3>Quelques liens intéressants :</h3>
    <a href="https://www.juritravail.com/codes/code-penal/article/222-33-2-2.html">Article 222-33-2-2</a>

    <h3>Quelques logos :</h3>
    <img width="100" src="facebook.jpg"/>
    </body>
    </html>

  3. Explication :
    • La balise <img> insère une image
    • width= permet d'imposer une taille d'image, width pour la largeur, height pour la hauteur
    • src= doit contenir le nom exact de la photo, en respectant la casse (majuscules et minuscules) et l'extension (.jpg .png ...)

    • 4.2 Rassembler les ressources from Université Lille SHS on Vimeo.

Bilan des balises HTML

Mémento des balises HTML
Source : OPENCLASSROOMS