Histoire du Web : frise à reconstituer
Web Web...........c'est quoi au juste
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. |
<!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 |
<!DOCTYPE html> |
Explications
<html> toute la page web </html>
<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>
<body> Corps de la page web ... (affiché à l’écran) </body>
|
À 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
|
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 |
|
Réseau social qui permet le partage de photos et de vidéos. |
2003 |
Classmates |
Réseaux sociaux à vocation professionnelle. |
2004 |
|
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 |
|
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 :
À faire n° 3 : Créer une liste numérotée |
Explication :
À faire n°4 : Créer un tableau |
<!DOCTYPE html> <tr>
<td> Le cyberharcèlement</td>
</tr>
<td>Difficulté du droit à l'oubli</td> </tr>
</table>
|
Explication :
À 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> <tr>
<td> Le cyberharcèlement</td>
</tr>
<td>Difficulté du droit à l'oubli</td> </tr>
</table> |
Explication :
À 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.
<!DOCTYPE html> <tr>
<td> Le cyber harcèlement</td>
</tr>
<td>Difficulté du droit à l'oubli</td> </tr>
</table>
|
Explication :
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 :
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 |
body
{
}
Explication:
body
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;
} 1
color : purple; font-weight : bold; padding : 5px; |
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; |
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.
Ce site a été conçu avec Jimdo. Inscrivez-vous gratuitement sur https://fr.jimdo.com