Histoire du Web :  frise à reconstituer

Web Web...........c'est quoi au juste

                               Testez vos connaissances

Le Web

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.

Une page WEB écrite proprement est en fait constituée de deux fichiers.

•   Un fichier HTML qui va s’occuper uniquement du contenu brut de la page web.

•   Un fichier CSS qui va s’occuper uniquement de la décoration de la page web.

Les langages HTML et CSS sont des langages informatiques de description

PARTIE 1 :     DÉCOUVERTE DU FICHIER HTML

 

1.   Ouvrir l’éditeur de texte notepad++ puis recopier le texte suivant en respectant autant que possible la mise en page

 

Le HTML

Le HTML est un langage informatique utilisé sur l’internet. Il sert à décrire le contenu brut des pages web.

HTML signifie HyperText Markup Language, c’est-à-dire langage de balisage d’hypertexte. Comme nous le verrons, ce langage utilise des balises.

Les balises permettent de mettre en forme le texte, les liens, les images...

 

 

1.   Sauvegarder la page dans le dossier pages WEB sous le nom : exercice1.html

2.   Ouvrir cette page avec un navigateur internet (avec un clic droit sur le fichier faire "ouvrir avec Chrome")

3.   Que constate-t-on :

·         Concernant la mise la mise en page.........................................................

·         Concernant l’accentuation des caractères ? ………………………………… 

 

Conclusion:  

Pour écrire une page HTML, il ne suffit pas de taper le texte comme on le ferait dans un traitement de texte (l’accentuation et la mise en page ne sont pas respectées). Aussi, Il va falloir "décrire" la page HTML à l’aide de   balises pour qu’elle soit interprétée correctement par le navigateur internet.

 

STRUCTURE CORRECTE DE LA PAGE HTML

  1. Ouvrir le document précédent et le compléter comme ci-dessous afin d’obtenir la structure balisée suivante:

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title> introduction au HTML    </title>

</head>

<body>

<h1>Le HTML</h1>

Le HTML est un langage informatique utilisé sur l’internet. <br /> Il sert à décrire le contenu brut des pages web. <br />

HTML signifie HyperText Markup Language, c’est-à-dire langage de balisage d’hypertexte.  <br /> Comme nous le verrons, ce langage utilise des balises. <br />

Les balises permettent de mettre en forme le texte, les liens, les images...

</body>

</html>

 

2. Sauvegarder le fichier exercice1.html puis l’ouvrir à nouveau avec un navigateur internet



PARTIE 2 :     Comment baliser correctement un fichier html avec trinket

À faire n°1 :  Créer ma première page web

  1. Modifier votre fichier dans trinket afin d'obtenir la structure balisée à gauche ci-dessous. Enregistrez le fichier dans trinket sous le titre « Ma première page web » Qu'observez-vous ?

<!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>

(Voici ce qu'il faut obtenir)

Explications     

  

  • 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’intégralité de la page html est balisée par la balise ouvrante <html> et la balise fermante </html>

<html>

toute la page web

</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

<head>

<meta charset="utf-8" /> Permet d’utiliser les caractères accentués

<title> introduction au HTML </title> Titre de la page apparaissant dans l’onglet du navigateur

</head>

  • L'élément <body> contient le contenu visible de la page

<body>

Corps de la page web ... (affiché à l’écran)

</body>

  • <h1>Titre important </h1>
  •  <p>Ceci est un paragraphe </p>
  • Je saute une ligne <br/>

 

  

À RETENIR :                         Structure correcte d’une page HTML.

 

 

 

À faire n° 2  : Créer une liste non numérotée

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 micro blogage).

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

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 )

 

 

<!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>

 

 

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>

À faire n° 3 : 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

 

<!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>

Voici ce qu'il faut obtenir 

 

Explication :

  • La balise <ol>crée une liste numérotée
  • Chaque balise <li> représente un élément de la liste ci-dessus.

À faire n°4 : 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 des réseaux sociaux.

<!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>

Voici ce qu'il faut obtenir 

 

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

À faire n°5 : Créer un lien hypertexte

A l'aide d'une recherche sur le Web, expliquez les termes suivants : exclusion, flaming, dénigrement, usurpation d'identité, outing, happy slapping.

Modifier votre fichier HTML afin de placer des liens vers des sites Web expliquant ces termes

 

<!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>

Voici ce qu'il faut obtenir 

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>

À faire n°6 :  Insérer une image

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.

  1. Modifier votre fichier HTML afin d'afficher ces images

<!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 cyber harcè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>

 

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 ...)
  • Exemple : Rendez-vous sur le site Pixabay, cherchez puis cliquez sur une image de chaton. Faites ensuite un clic droit sur l’image et sélectionnez “Copiez l’adresse de l’image”. Collez alors cette URL entre les guillemets de l’attribut src (src="url-de-votre-image"). Si l’image s’affiche c’est que vous avez réussi, sinon reprenez la procédure attentivement.

 

À faire n°7 :  Intégrer une vidéo

 

Dans un nouvel onglet du navigateur, allez sur YouTube et lancez une vidéo de votre choix. Cliquez droit sur la vidéo puis cliquez sur « Copier le code d’intégration ». Collez maintenant (Ctrl+V) ce code à la suite de votre code HTML (toujours avant la balise </body>). Vous venez d’intégrer une vidéo dans votre page Web !

 

Voici le genre de code correspondant à un code d’intégration :

 

<iframe width="853" height="480" src="https://www.youtube.com/embed/PbCG_BeL5dY"

title="Tim Berners-Lee, le génie inventeur du web" frameborder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;

picture-in-picture" allowfullscreen></iframe>

 

Pour voir ce qu'il faut obtenir

 

Explication :

  • La balise <iframe> permet d’intégrer une autre page HTML (qui est ici une vidéo) dans la page HTML courante ;
  • width="853" height="480" sont les attributs qui définissent la largeur (width) et la hauteur (height) en pixel de la page à intégrer ;
  • src="https://www.youtube.com/embed/PbCG_BeL5dY est l’attribut qui définit l’URL de la page à intégrer (src pour source).

Partie 3 : Mise en forme de la page Web en CSS

Les CSS, Cascading Style Sheets (feuilles de styles en cascade), servent à mettre en forme des documents web, type page HTML.

À faire n° 1 :  Créer le fichier CSS

  1. Ouvrir Trinket.
  2. Créer un nouveau bibelot sous le nom: "Reseaux.css" puis recopier le texte ci-contre en respectant la mise en page :

body
{

margin : 20 px;
font-family : Verdana;
background : yellow;
color : blue;

}


Explication:

 

  1. margin : Notre texte est pour l’instant beaucoup trop proche des bords de la fenêtre : nous aimerions le doter de marges (margin en anglais).pour créer des marges en bord de page
  2. font-family : pour choisir la police de caractère utilisée
  3. Pour obtenir un fond de couleur, nous devrons, dans la feuille de style, définir la propriété background de la balise correspondant à l’intégralité de la page : body .              (background : pour colorier l'arrière plan)  Par exemple :

body

 {
          background: Cornsilk;
}

CSS permet d’appliquer des marges aux éléments de notre choix. Par exemple, pour obtenir des titres  <h1>, de couleur bleu, avec des marges de 20 pixels :

 {

 color: blue;

 margin: 20px;

 }

 

Modifier le fichier CSS de l’exercice précédent, pour appliquer des marges de 20 pixels, aux titres de  niveau h1 et aux paragraphes  p.

1. Choisissez une couleur de fond à l’adresse suivante :

                                            https://en.wikipedia.org/wiki/Web_colors#X11_color_names.

 

2. Modifier votre fichier CSS de façon à obtenir un fond coloré.

À faire n° 2 :  Mettre en forme sa page web

Choisissez une mise en forme pour votre page en vous inspirant des exemples ci-dessous

h1
{
color : grey;
text-align : center;
font-weight : bold;
font-size : 40 px;
} 		h2
{
color : orange;
text-align : center;
font-style : italic;
font-size : 30 px;
background : purple;
}
 ol
{
color : green;
text-align : right;
font-variant : small-caps;
}
table
{
border : 2px dotted black;
} 		 ul
{
color : red;
text-align : left;
font-weight : bold;
text-decoration : underline;
list-style-type : circle;
}
td
{
border : 2px outset silver;
color : purple;
font-weight : bold;
padding : 5px;
} 1 		a
{
color : rgb(102,255,255);
text-decoration : underline;
}
a:<style="color: red"="" style="color: #000000; font-family: Garamond; font-size: 19.2px; font-weight: bold;" data-mce-style="color: #000000; font-family: Garamond; font-size: 19.2px; font-weight: bold;">hover
{
color: #009999;
text-decoration : underline;
cursor : pointer;
}
   

Résumé des principales balises

                                                          Sujet de Mini - Projet, niveau Entraînement :

En vous inspirant du travail réalisé ci-dessus, créer votre première pageWeb personnelle :

• Dans le dossier  Fichiers Html déposé dans l'espace de travail sur école directe, les

     fichiers, 03_un_peu_de_style.html et style.css, fournissent une architecture de départ.

• Les copier dans votre répertoire_de_travail_HTML_ CSS ,

• renommer le premier fichier du nom de votre choix,

• choisir un thème :

Une passion, un loisir ou, si vous n’avez pas d’idée, une page de présentation de l’enseignement de SNT pour les élèves de troisième qui viendront au lycée l’an prochain.

Mentions légales | Politique de confidentialité | Plan du site | Rétractation du contrat
Connexion Déconnecter | Modifier
Jimdo

Ce site a été conçu avec Jimdo Creator. Inscrivez-vous gratuitement sur https://fr.jimdo.com