Embed Size (px)
Citation preview
Thème 2: LE WEB
1. L’histoire du Web
2. Le fonctionnement du Web
3. L’écriture d’une page Web
4. Utiliser un moteur de recherche
Il y a près 2 milliards de sites sur le Web
Le "World Wide Web", plus communément appelé "Web" a étédéveloppé au CERN (Conseil Européen pour la Recherche Nucléaire) par leBritannique Sir Timothy John Berners-Lee et le Belge Robert Cailliau au débutdes années 90.
Pour faciliter les échanges d'informations entre les centres de recherchemondiaux, Tim Berners-Lee met au point le système hypertexte.
Le système hypertexte permet, à partir d'un document, de consulterd'autres documents en cliquant sur des mots clés. Ces mots "cliquables" sontappelés hyperliens et sont souvent soulignés et en bleu.
Tim Berners-Lee développe le premier navigateur web (logicielpermettant de lire des pages contenant des hypertextes), il l'appelle simplement"WorldWideWeb".
Cette première page web est toujours consultable à l'adresse suivante :
http://info.cern.ch/hypertext/WWW/TheProject.html
Thème 2 : LE WEB
Le Web (ou Toile) est un ensemble de données numériques(textes, images, vidéos, audios) reliées entre elles par des lienshypertextes et accessibles sur Internet dans un navigateur. Apartir des années 2000, le Web devient « social » avec l’apparitionde réseaux sociaux comme Facebook, Twitter, Youtube ou Flickr,permettant le partage en tout genre.
Comment fonctionne le Web ?
FAIRE LE POINT SUR VOS CONNAISSANCES
FAIRE LE POINT SUR VOS CONNAISSANCES
Voici un exemple de lien hypertexte vers l’ENT du
lycée.
FAIRE LE POINT SUR VOS CONNAISSANCES
LE FONCTIONNEMENT DU WEBIILe Web désigne un ensemble de données (textes, images, audios, vidéos, …) reliées entreelles par des liens hypertextes et accessibles sur Internet.
Où sont stockées ces données ?
Les données des sites web sont stockéessur les disques durs de puissantes machinesappelées Serveurs Web, accessibles 24h sur 24.
Lorsque l’on souhaite visiter un site surinternet, on ne renseigne pas l’adresse IP de sonserveur Web, difficile à retenir, mais un texte plussimple: son adresse symbolique ou URL (UniformRessource Locator).
La correspondance entre adresse IP et adresse symbolique est enregistrée dans un annuaire : le Domain Name System (DNS).
Cet annuaire est régulièrement mis à jour et conservé sur le disque dur de machines appelées Serveurs DNS.
Exemple:
Adresse IP du serveur de Google France:http://216.58.213.163
Adresse symbolique ou URL:https://www.google.fr
LE FONCTIONNEMENT DU WEBIIh t t p s : / / w w w. l e - r o u t e u r - w i f i . f r
Préfixe Nom de domaineSous-domaine
https://www.afnic.fr/noms-de-domaine/tout-savoir/whois-trouver-un-nom-de-domaine/
LE FONCTIONNEMENT DU WEBIILe Web désigne un ensemble de données (textes, images, audios, vidéos, …) reliées entreelles par des liens hypertextes et accessibles sur Internet.
La composition d’une URL
Les sites Web ont une structure enarborescence: une ressource (page, photo…) peut setrouver dans un dossier, lui-même situé dans unautre dossier et ainsi de suite…
Une URL (Uniform Resource Locator) estl’adresse d’une ressource d’un site Web: elle indiqueoù elle se trouve dans l’arborescence du site. Elle secompose de 3 grande parties: le protocole HTTP, lenom de domaine et le chemin vers la ressource.
Accueil.html
snt
photos videosTheme1.html
Theme2.html
ressources
documents
Activite1.pdfphoto1.jpg
photo2.jpg
video1.mp4
video2.mp4
http://www.snt.fr/ressources/videos/video2.mp4
Protocole
Nom de domaine
Chemin
Activité 4
II) LE FONCTIONNEMENT DU WEB
Lorsque l’on navigue sur le Web, notre ordinateur, tablette ou smartphone estidentifié comme un client qui envoie une requête http à un serveur web. Ce serveur, quihéberge les pages Web ou les applications demandées, renvoie les contenus (textes,images, fichiers, etc.) au client.
Pour accéder à une page, on utilise son URL, un court texte facilementmémorisable qui se décompose en 3 parties : le protocole HTTP, le nom de domaine et lechemin vers la ressource.
Notre navigateur se connecte alors à un serveur DNS (Domain Name System) quiconserve un annuaire des correspondances entre adresses IP et URL.
Serveur DNSClient
Requête: www.google.fr
Réponse: 66.102.13.105
DNS racine
DNS 1er niveau.fr
DNS 2e niveau.google
Requête: 66.102.13.105
Réponse: page web
Serveur Web
Les requêtes HTTP
Le Web s’appuie sur un dialogue entre un client et un serveur Web: le client est le navigateur qui se connecte auWeb et envoie des requêtes HTTP (des demandes) au serveur Web où sont stockées les sites et leurs données.
HTTP (HyperText Transfert Protocol) est le protocole qui permet aux 2 machines de communiquer entre elles.
Exemple de requête HTTP avec la méthode GET envoyée pour récupérer la page d'accueil du site web www.tice-education.fr
La réponse du serveur Web
Le serveur Web répond à la requête HTTP en renvoyant au client du code que le navigateur interprète et met enforme de manière lisible.
L’ÉCRITURE D’UNE PAGE WEBIIIUne page Web est constituée de deux éléments distincts: le code HTML pour la structure etle contenu brut de la page, et la feuille de style CSS pour sa présentation et sa décoration.
Le langage HTML
Le langage HTML (HyperText MarkupLanguage) permet d’organiser et de mettre enforme les éléments d’une page Web.
Vous direz par exemple : « Ceci est mon titre, ceci est monmenu, voici le texte principal de la page, voici une image àafficher, etc... ».
1. Créer un dossier nommé pagesWEB.2. Ouvrir l’éditeur de texte Notepad++ puis recopier le textesuivant en respectant autant que possible la mise en page :
3. Sauvegarder la page dans le dossier pagesWEB sous le nom :exercice1.html4. Ouvrir cette page avec un navigateur internet.
Le HTML
HTML signifie HyperText Markup Language, c’est-à-dire:Langage de balisage d’hypertexte.
Que constate-t-on :• Concernant la mise en page ? ………………………………………………………………………………………………………………………………………..• Concernant le texte ? ……………………………………………………………………………………………………………………
https://jsfiddle.net/
1. Ouvrir le document précédent et le compléter comme ci-dessous afin d’obtenir la structure balisée suivante :
L’ÉCRITURE D’UNE PAGE WEBIIILe langage HTML s’écrit avec des balises qui donnent des indications au navigateur pour mettre enforme le texte, les liens, afficher les images... Les balises fonctionnent soit par deux (la balised’ouverture et la balise de fermeture), soit toute seule (la balise dite « orpheline » s’ouvre et seferme aussitôt).
Les balises en paire:
<commande> ………</commande>Balise ouvrante balise fermante
Une balise orpheline:
<commande />
Les balises <…><!DOCTYPE html><html>
<head><meta charset="utf-8" /><title> introduction au HTML </title>
</head>
<body><h1>Le HTML</h1>HTML signifie HyperText Markup Language, c’est-à-dire:<br />Langage de balisage d’hypertexte.
</body></html>
Remarques:- Les balises sont invisibles à l'écran pour vos visiteurs.- Certaines balises contiennent des attributs qui apportentdes informations supplémentaires et qui se placent justeaprès le nom de la balise ouvrante ou orpheline.
L’ÉCRITURE D’UNE PAGE WEBIII
<!DOCTYPE html><html>
<head><meta charset="utf-8" /><title> titre de la page </title>
</head>
<body>... tout le corps (affiché) de la page ...
</body></html>
Structure de base d’une page HTML
Indique au navigateur que la page est en HTML
<html> … </html> balisent l’intégralité de la page HTML
Permet d’utiliser les caractères accentués
Titre de la page apparaissant dans l’onglet du navigateur
<head> … </head> balisent l’en-tête (non affiché à l’écran)
<body> … </body> balisent le corps de la page (affiché à l’écran)
L’ÉCRITURE D’UNE PAGE WEBIIIQuelques balises utiles pour bien débuter en HTML
L’ÉCRITURE D’UNE PAGE WEBIIIExercice: Réaliser sa première page Web
1. Choisir une fiche métier sur l’un des sites suivants:▪ https://www.fichemetier.fr/liste/metiers▪ https://www.onisep.fr/Decouvrir-les-metiers▪ https://www.cidj.com/metiers/metiers-par-secteur▪ https://www.letudiant.fr/metiers.html
2. Ouvrir le fichier métierSNT.html avec un éditeur HTML commeNotepad++ ou Sublime Text.
3. Modifier le titre de votre page, le contenu de l’introduction(présentation générale du métier) et des différents paragraphes, etindiquer votre prénom et votre nom.
4. Baliser le nom du métier choisi avec <h1>...</h1>, le titre desdifférentes parties avec <h2>...</h2>, les paragraphes avec la balise<p> ... </p>, et éventuellement les différentes idées avec <br />.
5. Créer une liste non numérotée dont les items sont les titres desdifférentes parties, avec les balises <ul>…</ul> et <li>…</li>.
6. Enregistrer le fichier.
<h1>
<h2> <p>
<br />
<li>
<ul>
LE FONCTIONNEMENT D’UN MOTEUR DE RECHERCHEIVLes moteurs de recherche permettent de trouver des informations, des images ou des vidéos dans des pages
dont on ne connaît pas l’adresse, voire dont on ignore l’existence.
Vidéo : https://www.youtube.com/watch?v=pMywV9ZLS4M(1 :36)
LE FONCTIONNEMENT D’UN MOTEUR DE RECHERCHEIVL’indexation des ressources est fondée sur le fait que plus un site est cité par d’autres sites, plus il sera considéré
comme pertinent et donc plus son score sera élevé. Un bon score garantit une place de choix au site dans les pages derésultats: c’est le référencement naturel. Pour améliorer le classement d’un site Web dans les résultats de recherche, leséditeurs de sites doivent notamment bien choisir les mots clés dans leur contenu rédactionnel.
LE FONCTIONNEMENT D’UN MOTEUR DE RECHERCHEIV
La pertinence des pages proposées par le moteur de recherche dépendent de l’efficacité de ses robots explorantle web, et de la qualité de l’algorithme (programme) utilisé, de la popularité des sites.
Le classement des sites
Référencement payant
LE FONCTIONNEMENT D’UN MOTEUR DE RECHERCHEIVExercice : utiliser un moteur de recherche
1. Rechercher une photo ou un dessin libre de droit pour illustrer le métier choisi.
2. Télécharger l’illustration dans le dossier pagesWEB puis la renommercorrectement.
3. Afficher la photo sur votre page html avec la balise <img src="…"/>, juste endessous de vos nom et prénom.
4. Enregistrer votre fichier.
Quelques astuces pour plus d’efficacité:➢ Le – est utilisé pour exclure un mot de la recherche, le + permet de
chercher des pages sur lesquels se trouvent tous les mots choisis.➢ Les guillemets « » permettent de rechercher une phrase exacte mot
pour mot.➢ Utiliser le menu « Outils » sous la barre de recherche de Google pour
accéder à de nombreuses options de recherche intéressantes.
