Seconde
Première S
Premières L et ES
Terminale S
Spécialité
MPS
B2I
Les pages internet
Qu'est-ce que internet ?
Le client : celui qu'on appelle "le client", c'est vous 
. C'est vous qui êtes tranquille pépère installé devant votre ordinateur, et qui demandez à voir une page web. Tous les visiteurs d'un site web sont des clients. On va représenter l'ordinateur du client par cette machine :
Le serveur : il n'y en a qu'un seul. Le serveur, c'est une sorte de gros ordinateur tout le temps connecté à Internet (avec une connexion très rapide). Cet ordinateur est installé quelque part dans le monde, il est tout le temps allumé, et personne n'y touche. Il travaille 24h/24, et ne s'occupe que de distribuer votre site web. En d'autres termes, personne ne joue dessus 
Sa fonction ? Il contient votre site web sur son disque dur, et dès qu'un client demande à voir une page web, il la lui envoie. Pour représenter le serveur, je vais utiliser cette machine (notez qu'en général le serveur n'a pas d'écran : ça ne sert à rien puisque personne ne travaille dessus) :
Vous voyez ? C'est en fait très simple.
Pour ceux qui n'auraient pas tout bien compris, voici un exemple...
Imaginez un restaurant. Vous rentrez dedans, vous êtes le client. Vous commandez un Couscous Royal (arf j'ai faim 
). Le cuisinier, lui, c'est le serveur : vous lui avez demandé tel plat, il vous le livre.
Dès qu'un autre client se présente et demande un autre plat, le cuisinier le lui donne. Et il travaille ainsi inlassablement tout le temps.
Eh bien c'est pareil sur Internet : le serveur est un ordinateur qui envoie des pages web aux clients qui le lui demandent. Et il travaille sans arrêt comme un forcené.
En gros voici comment ça fonctionne pour une page HTML :
Il y a 2 étapes :
⇒ Le client (c'est vous, le visiteur) demande à voir une page web. Il va donc faire une demande au serveur : "S'il te plaît, envoie-moi la page vacances.html".
⇒ Le serveur lui répond en lui envoyant la page vacances.html : "Tiens, voici la page que tu m'as demandée".
Tout ça se passe très poliment bien entendu
Le client voulait consulter la page vacances.html sur un site web : il l'a demandée au serveur qui gère ce site, et le serveur lui a envoyé la page que le client voulait. La page s'affiche alors sur l'écran du client, sous ses yeux ébahis 
Cela se passe à chaque fois que vous consultez une page HTML.
Il existe d'autres langage que le XHTML, par exemple le php (utilisé pour ce site, regardez dans la barre d'adresse de ce site sur cette page, l'adresse se termine par php). Le php contient du XHTML et il est capable d'écrire des page XHTM a votre place.
Les bases du XHTML
XHTML : c'est l'abréviation de eXtensible HyperText Markup Language.(ne pas retenir)
C'est avec ce langage que l'on tape le contenu d'une page web.
CSS : c'est l'abréviation de Cascading Style Sheets ("Feuille de style").
Ce langage nous sert uniquement à présenter la page web. C'est en CSS que l'on dira : "Mes titres sont en rouge et sont soulignés, mon texte est dans la police arial.
Ces langages sont donc complémentaires, l'un ne va pas sans l'autre.
Les logiciels nécessaires
Des logiciels qui permettent de créer un site web, il y en a des tonnes.
Mais pourquoi aller chercher un logiciel payant et compliqué, alors que vous avez déjà tout ce qu'il faut chez vous ?
Il est possible de créer un site web avec un simple éditeur de texte, par exemple "Bloc-note" dans windows
Bon, en théorie donc, Bloc-Notes suffit, mais c'est pas facile car il n'y a pas de couleur. Il est préférable d'utiliser notepad++
Page de téléchargement de Notepad++
Prenez la version avec installeur (.exe) et non le .zip
Pour l'instant, ne vous préoccupez pas de savoir ce que signifie tout ce charabia que vous pouvez voir.On comprend que la couleur permet de mieux lire le code.
Les navigateurs
Le navigateur, c'est le programme qui vous permet de voir des sites web. Si vous lisez ces lignes, c'est donc que votre navigateur est ouvert et que vous l'avez sous les yeux
Le travail du navigateur, c'est de lire le code XHTML / CSS que vous avez écrit, et d'afficher ce qu'il représente. Si votre code CSS dit "Les titres sont en rouge", alors le navigateur affichera les titres en rouge.
| Parmi les navigateurs qui existent, citons : |
|
Le fonctionnement d'un site dépend du navigateur, l'idéal c'est que votre site fonctionne sur tout les navigateurs mais ce n'est toujours facile à réliser.
Les principeux navigateurs sont internet explorer et firefox. Il faut donc tester vos pages au moins avec ces deux navigareurs
On peut demander au navigateur de nous montrer le code XHTML qu'il interprête. Dans le menu "affichage" ,cliquer sur "code source de la page"
⇒ Montrer moi je code source de d'une page internet.
Les balises et les attributs
Avant de commencer à écrire notre première page web, il faut que je vous présente à quoi ressemble ce fameux langage XHTML.
Les balises
En effet dans une page XHTML, en plus du texte, vous allez trouver un autre élément au milieu : ce sont les balises.
Une balise commence par "<" et se termine par ">". Par exemple :
<balise>
Il existe 2 types de balises : certaines balises apparaissent toujours par paire, d'autres au contraire sont toutes seules.
Les balises existant par paire : ce sont les plus courantes. On écrit la première balise, on tape du texte, puis on "ferme" la balise en la réécrivant avec un slash devant "/". Par exemple
code:XML
<titre>Bienvenue sur mon site !</titre> |
La première balise <titre> indique le début du titre, et elle est refermée plus loin avec </titre> .
Le navigateur comprend que ce qui est entre <titre> et </titre> est le titre de votre site web, et que celui-ci est "Bienvenue sur mon site !"
Les balises seules : elles sont un peu plus rares, mais il y en a quand même. On s'en sert en général pour insérer un élément dans une page.
Ce type de balise se termine toujours par un slash "/", mais cette fois le slash se trouve à la fin de la balise. Par exemple la balise qui permet d'insérer une image :
Code: XML
<image/>
|
Cette balise indique juste qu'il y a une image à cet endroit
Les attributs
Les attributs sont un moyen de donner des précisions sur une balise. On peut trouver des attributs sur les deux types de balises (par paire ou seules).
Par exemple, prenons la balise seule <image /> . C'est bien beau de dire qu'on insère une image, mais encore faut-il indiquer laquelle. On fera ça avec un attribut :
<image nom="soleil.jpg" /> |
Ici, l'attribut est "nom", et il a pour valeur "soleil.jpg". Cela indique que l'image que l'on veut insérer s'appelle "soleil.jpg" tout simplement.
Dans le cas d'une balise fonctionnant "par paire", on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Par exemple, ce code indique que la citation est de Neil Armstrong et qu'elle date du 21 Juillet 1969
<citation auteur="Neil Armstrong" date="21/07/1969"> C'est un petit pas pour l´homme` un bond de géant pour l´humanité. </citation> |
Comme vous le voyez, on ferme la balise en mettant simplement </citation> sans répéter les attributs (ça ne servirait à rien).
En résumé
Bien entendu, les balises ci-dessus sont inventés, en réalité <image /> et <citation> n'existent pas. Mais vous allez avoir tout le temps d'apprendre les vrais noms.
Avant de terminer cette petite partie théorique, je vais vous donner ici quelques règles pas bien compliquées qu'il faudra retenir si vous voulez faire une parfaite petite page web :
Allez, maintenant on passe à la pratique ! 
Une page XHTML
C'est le moment d'ouvrir votre éditeur (Bloc-Notes, Notepad++ ou un autre), et de tester avec moi votre première page web
Voici le code de base d'une page web, qui va servir de point de départ à chacune de nos pages :
code:XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
Voici les explications ligne par ligne :
Encore une fois, retenir ce que ça signifie exactement n'est pas indispensable. Ce qui est indispensable, c'est de se servir de ce modèle à chaque fois que vous créerez une nouvelle page web.
Recopiez ce code dans votre éditeur, et enregistrez la page avec l'extension .html (ou .htm ça marche aussi). Par exemple avec Notepad++, allez dans le menu "Fichier / Enregistrer", et tapez "essai.html" comme sur la capture d'écran ci-dessous :
Rendez-vous ensuite dans le dossier où vous avez enregistré la page(c'est à dire sur votre clé). Vous devriez voir votre fichier (x)HTML :
Bravo vous venez de créer votre première page vide !
Il faudra donc écrire du code entre les balise <body></body>
Mais rassurez-vous quand même, la page n'est en fait pas si vide que ça : elle contient des tonnes d'informations dont votre navigateur aura besoin. En plus, le titre de la page apparaît déjà dans la barre de titre de la fenêtre (si si, regardez tout en haut à gauche de la fenêtre : "Bienvenue sur mon site !")
⇒ Allez ! maintenant c'est à vous de travailler. Créer une page XHTML qui écrit: "Bonjour tout le monde"
Les commentaires
Les commentaires sont des informations que vous écrivez pour vous. Les commentaires n'apparaissent pas aux yeux des visiteurs.
Vous pouvez par exemple utiliser les commentaires pour marquer des repères si votre page XHTML est très grosse, ou pour vous servir de rappel.
Un commentaire est une balise un peu spéciale commençant par <!-- et terminant par -->
Voici un exemple de commentaires dans le code de tout à l'heure :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ |
⇒ Créer une page XHTML avec un commentaire et vérifier que le commentaire n'apparait pas pour le visiteur (on pourra reprendre la page de tout à l'heure)
⇒ A partir du navigateur faites apparaitre le code source et montrer moi votre commentaire.
⇒ Essayer d'ajouter une image dans votre page.(image prise sur internet et enregistrée sur votre clé)
Si vous n'avez pas réussi je vous montre en vidéo:ici
Merci à Mateo pour le tutoriel sur le Site du zéro