Le Web
Introduction
Ce qu'en dit le programme...
Le Web (toile ou réseau) désigne un système donnant accès à un ensemble de données (page, image, son, vidéo) reliées par des liens hypertextes et accessibles sur le réseau internet.
Repères historiques
Votre manuel Delagrave une vidéo récapitulative de l'histoire du web :Ce qu'en dit le programme...
[survoler ou appuyer pour avoir des détails]- 1965 : invention et programmation du concept d’hypertexte par Ted Nelson.
L'hypertexte correspond à l'idée qu'un texte puisse directement faire référence à un autre texte : c'est le précuseur de ce qu'on appelle le lien internet. - 1989 : naissance au CERN par Tim Berners Lee.
En appliquant l'hypertexte aux pages de texte informatique, il permet de lier rapidement une idée à un texte de référence sans avoir à le recopier intégralement ou demander au lecteur d'aller lui-même faire la recherche. - 1993 : mise dans le domaine public, disponibilité du premier navigateur Mosaic.
Le navigateur est une application qui permet d'afficher une page internet et de suivre les liens qu'elle contient
Mosaïc est le premier à être compatible avec des ordinateurs personnels et permet donc le développement du web. - 1995 : mise à disposition de technologies pour le développement de site Web interactif (langage JavaScript) et dynamique (langage PHP) ;
Grâce à ces langages (Javascript s'éxecute sur l'ordinateur du visiteur et PHP sur le serveur hébergeant le site internet) la page internet n'est plus figée. Elle peut changer d'aspect en fonction des réponses des utilisateurs, ajouter des animations, de petits jeux... - 2001 : standardisation des pages grâce au DOM (Document Object Model) ;
Une page internet est maintenant une arborescence d'objets imbriqués les uns dans les autres et bornés par des balises. - 2010 : mise à disposition de technologies pour le développement d’applications sur mobiles.
Les pages internet sont maintenant principalement consultées par des périphériques mobiles (smartphones, tablettes). La mise en page des sites internet évolue pour s'adapter au format de ces disositifs. De nombreuses applications disponibles sur les stores ne sont que des navigateurs pointant directement sur un site internet.
Normalisation de la présentation de l’information
Ce qu'en dit le programme...
Sur le Web, les textes, photos, vidéos, graphiques, sons, programmes sont exprimés et assemblés dans divers formats normalisés par un consortium mondial (W3C : World Wide Web Consortium), ce qui permet une circulation standardisée de ces informations.
Les pages Web sont écrites dans le langage de balises HTML (HypertextMarkupLanguage). Leur style graphique est défini dans le langage CSS (Cascading Style Sheets).
Les pages ont une adresse unique, nommée URL (Uniform Ressource Locator). Elles sont accessibles via internet en utilisant le protocole HTTP (Hypertext Transfer Protocol) ou sa version sécurisée HTTPS qui crypte les échanges. L’affichage des pages est réalisé chez l’utilisateur par un programme appelé navigateur.
Un hypertexte est un texte augmenté de renvois automatiques à des textes, des images ou des sons. Initialement, un hypertexte se restreignait à la mémoire d’un seul ordinateur. Dans une page Web, ce renvoi se fait sur n’importe quelle machine du réseau internet, par le truchement de l’adresse de la page Web du texte (URL) auquel il fait référence. La toile d’araignée construite par les liens peut être représentée sous la forme d’un graphe qui matérialise la structure du Web.
1) les balises en HTML
Pour nous, on utilise la plus récente :
<!DOCTYPE html>
En-dessous, on indique que la partie HTML commence : tout le reste sera encadré entre la balise <html> et la balise </html>.
Une page est composée de 2 parties, une "tête" <head>...</head> dans laquelle sont définis des paramètres de la page et un "corps" <body>...</body> qui contient la page proprement dite.
2) La tête
Dans cette partie, on va indiquer les paramètres de langue, d'encodage, la position de fichiers supplémentaires nécessaires (style, scripts).- <meta charset='utf-8' /> indique que le texte est encodé en utf-8 (il y a plusieurs façon d'encoder les caractères qui sont des extensions de l'Ascii vu en début d'année, ne pas préciser l'encodage ou indiquer le mauvais risque de faire apparaître des caractères étranges).
- <title>...</title> indique le titre de la page, qui s'affiche dans l'onglet du navigateur.
- <link rel="stylesheet" type="text/css" href="styles/style.css" /> indique l'adresse du fichier définissant la mise en page.
3) le corps
Une page html est composée une arborescence de balises <bidule>...</bidule>.Ces balises définissent des objets (tableau, image, bouton, lien hypertexte) ou une décoration particulière du texte (titre, gras, souligné, ...).
Les balises suivantes sont à connaître :
- <div>...</div> une division est un bloc de données
- <a href="adresse internet">...texte_qui_apparaîtra_souligné...</a> c'est un lien hypertexte qui s'affichera en bleu par défaut
- <img src="adresse de l'image"/> une image
- <em>...</em> écriture en italique
- <strong>...</strong> écriture en gras
- <span>...</span> utilisé pour personnaliser la mise en page d'un texte
- <table> définition d'un tableau
- <tr> définition d'une ligne de tableau
- <td>...</td> définition d'une case dans la ligne </tr> fermeture de la ligne </table> fin du tableau
- les titres <h1>...</h1> (le plus grand) jusqu’à <h6>...</h6>
- Pour aller à la ligne, il faut insérer un break <br>, aller simplement à la ligne dans un texte ne fonctionne pas !
4) La feuille de style
Une feuille de style utilise le langage css qui permet de définir la décoration à appliquer à un objet.Comme la feuille ne fait pas partie de la page html, il va falloir identifier les objets sur lesquels portent la décoration.
Il y a 4 façons d'identifier un objet :
- en fonction de sont type (img, div, a, ...)
- en fonction de sa classe (class= dans les balises concernées)
- en fonction de son identifiant (id)= dans la balise concernée)
- en fonction de ce que vous en faites (si passe le curseur dessus, si on clique ou qu'on déplace)
Propriétés qui s’appliquent à un objet | Propriétés qui s’appliquent à une class | Propriétés qui s’appliquent à un id |
div{ background-color:grey ; } |
.entete{ font-size:15px ; } |
#experiences{ color:#ff0000 ; } |