| TP 3 | [Ma première page web en CSS](tp/tp3_css_ma_page.md) | Création d'une page personnelle avec CSS | Markdown + [template HTML](tp/tp3_template.html) + [template CSS](tp/tp3_style.css) |
### Progression
1.**TP 1** : Observer et comprendre le code HTML d'une page existante
2.**TP 2** : Analyser des sites web du point de vue de l'utilisateur
3.**TP 3** : Créer sa propre page web avec HTML et CSS
### Fichiers de travail
- [`tp/1/index.html`](tp/1/index.html) : Page HTML de référence (utilisée dans le TP 1)
- [`tp/1/style.css`](tp/1/style.css) : Feuille de style associée
- [`tp/tp3_template.html`](tp/tp3_template.html) : Template de démarrage pour le TP 3
- [`tp/tp3_style.css`](tp/tp3_style.css) : Feuille de style de démarrage pour le TP 3
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.
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.
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).
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 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.).
· Le doctype < !DOCTYPE html > : 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 <html> : 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 <head> : 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 <title>), son encodage (donné par la balise <metacharset=.../> et utile pour la gestion de certains caractères), etc.
· Celles-ci ne sont pas affichées sur la page, mais sont extrêmement importantes puisqu'elles sont nécessaires au navigateur pour une bonne interprétation du code.
· La balise <body> : il s'agit d'une balise définissant le conteneur du corps de la page. Ce conteneur contient tous les éléments qui seront affichés sur la page.
· Indiquez à quoi correspondent les attributs width et height de la balise img. Expliquez comment les modifier pour que l'image soit un rectangle de taille 200 x100 pixels.
· 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.
