diff --git a/sequences/web/INTRODUCTION.md b/sequences/web/INTRODUCTION.md new file mode 100644 index 0000000..0073656 --- /dev/null +++ b/sequences/web/INTRODUCTION.md @@ -0,0 +1,130 @@ +# Découverte du Web + + + +## ***Activité n°1 : Le navigateur*** + +Le "World Wide Web", plus communément appelé "Web" a été développé au CERN (Conseil Européen pour la Recherche Nucléaire) par le Britannique *Sir Timothy John Berners-Lee* et le Belge *Robert Cailliau* au début des années 90. + +À cette époque les principaux centres de recherche mondiaux étaient déjà connectés les uns aux autres, mais pour faciliter les échanges d'information Tim Berners-Lee met au point le système hypertexte. + +Le système hypertexte permet, à partir d'un document, de consulter d'autres documents en cliquant sur des mots clés. + +Ces mots "cliquables" sont appelés hyperliens et sont souvent soulignés et en bleu. Ces hyperliens sont plutôt connus aujourd'hui sous le simple terme de "liens". + + + +Cette première page web est toujours consultable [ici]( http://info.cern.ch/hypertext/WWW/TheProject.html). + +Tim Berners-Lee développe le premier navigateur web (logiciel permettant de lire des pages contenant des hypertextes), il l'appelle simplement "***WorldWideWeb***". Il faudra attendre 1993 et l'arrivée du navigateur web "NCSA Mosaic" pour que le web commence à devenir populaire en dehors du petit monde de la recherche. + +***Exercice*** + +Donnez les noms des navigateurs auquels appartiennent les logos ci dessous : + + + +| Logo | Nom | +| ------------------------------------------------------ | ---- | +|  | | +|  | | +|  | | +|  | | +|  | | +|  | | +|  | | + +------ + +## ***Activité n°2 : Surfer sur le Web*** + +Techniquement le web se base sur trois choses : le protocole *HTTP* (HyperText Transfert Protocol), les *URL* (Uniform Resource Locator) et le langage de description *HTML* (HyperText Markup Language). Nous aurons, très prochainement l'occasion de revenir sur ces trois éléments. + +Une chose très importante à bien avoir à l'esprit : beaucoup de personnes confondent "web" et "internet". Même si le "web" "s'appuie" sur internet, les deux choses n'ont rien à voir puisqu'"internet" est un "réseau de réseaux" s'appuyant sur le protocole IP (voir le module Internet) alors que, comme nous venons de le voir, le web est la combinaison de trois technologies : HTTP, URL et HTML. D'ailleurs on trouve autre chose que le "web" sur internet, par exemple, les emails avec le protocole SMTP (Simple Mail Transfert Protocol) et les transferts de fichiers avec le protocole FTP (File Transfert Protocol). + +## Comment ? + +Les navigateurs interprètent des **codes** (HTML et CSS) afin d’afficher des pages Web. Il s’agit de langages de description (et non pas de programmation) qui permettent de créer des sites web. +Les langages **HTML** et **CSS** sont à la base du fonctionnement de tous les sites Web. + +Le langage HTML (HyperText Markup Language, langage de balisage hypertexte) a été inventé par Tim Bernes-Lee en 1991. + +Son rôle est de gérer et d’organiser le contenu de la page web (titres, textes, images, etc.). Il répond à une norme très précise. + +Le langage CSS (Cascade Style Sheets, feuilles de style en cascade) est venu compléter le langage HTML en 1996. Son rôle est de gérer l’apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte, etc.). + +Autrement dit, le contenu est écrit dans le fichier HTML et la mise en forme est écrite dans le fichier CSS. + +Vous pouvez examiner le code html du site du lycée : + +https://www.lyc-thierry-maulnier.ac-nice.fr -> clic droit sur la page -> afficher code source + + + + + +Vous aurez donc ce genre de page : + + + +Alors qu'en fait ce que votre navigateur affiche reste : + + + + + +***Exercice*** + +Nous allons utiliser le logiciel *Notepad ++* afin d'ouvrir le ficher index.html + +Repérez les différents éléments qui forment la structure de base d’une page HTML + +· Le doctype : il s’agit de la toute première ligne du document. C’est elle qui indique qu’il s’agit bien d’une page web HTML et qu’elle est écrite en HTML5. + +· La balise : il s’agit de la balise principale du code. Elle définit un conteneur qui englobe tout le contenu de la page web. Cette balise est fermée à l’aide de la balise html> située à la dernière ligne du code. + +La balise
: il s’agit d’une balise définissant le conteneur d’en-tête de la page. Ce conteneur donne des informations générales sur la page comme son titre (donné par la balise. + +· Essayez de modifier la couleur des paragraphes à l'aide du fichier CSS. + +· Indiquez comment modifier les fichiers index.html et style.css pour que les mots HTML et CSS soient écrits en bleu et en italique, mais sans modifier le reste du document. \ No newline at end of file diff --git a/sequences/web/assets/afficher_source.png b/sequences/web/assets/afficher_source.png new file mode 100644 index 0000000..e6d21a2 Binary files /dev/null and b/sequences/web/assets/afficher_source.png differ diff --git a/sequences/web/assets/chrome.svg b/sequences/web/assets/chrome.svg new file mode 100644 index 0000000..3b74f42 --- /dev/null +++ b/sequences/web/assets/chrome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sequences/web/assets/chromium.svg b/sequences/web/assets/chromium.svg new file mode 100644 index 0000000..1a05d13 --- /dev/null +++ b/sequences/web/assets/chromium.svg @@ -0,0 +1,49 @@ + + diff --git a/sequences/web/assets/edge.svg b/sequences/web/assets/edge.svg new file mode 100644 index 0000000..54cd002 --- /dev/null +++ b/sequences/web/assets/edge.svg @@ -0,0 +1,69 @@ + + diff --git a/sequences/web/assets/firefox.svg b/sequences/web/assets/firefox.svg new file mode 100644 index 0000000..d500d6e --- /dev/null +++ b/sequences/web/assets/firefox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sequences/web/assets/internet_explorer.svg b/sequences/web/assets/internet_explorer.svg new file mode 100644 index 0000000..bd8d875 --- /dev/null +++ b/sequences/web/assets/internet_explorer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sequences/web/assets/opera.svg b/sequences/web/assets/opera.svg new file mode 100644 index 0000000..2fddbca --- /dev/null +++ b/sequences/web/assets/opera.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sequences/web/assets/premier_site.png b/sequences/web/assets/premier_site.png new file mode 100644 index 0000000..47ced04 Binary files /dev/null and b/sequences/web/assets/premier_site.png differ diff --git a/sequences/web/assets/safari.svg b/sequences/web/assets/safari.svg new file mode 100644 index 0000000..466004f --- /dev/null +++ b/sequences/web/assets/safari.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sequences/web/assets/site_lycee.png b/sequences/web/assets/site_lycee.png new file mode 100644 index 0000000..d10092e Binary files /dev/null and b/sequences/web/assets/site_lycee.png differ diff --git a/sequences/web/assets/source.png b/sequences/web/assets/source.png new file mode 100644 index 0000000..0ee215e Binary files /dev/null and b/sequences/web/assets/source.png differ