creation_d_une_page

Création d'une page web HTML (1)

But : Comprendre et mettre en oeuvre les principes de base de la création d'une page HTML grâce à la pratique.

Outils : Le navigateur Firefox (logiciel libre gratuit) supposé être utilisé pour ouvrir cette page.

Ouverture d'un petit éditeur HTML :
Voici un petit éditeur en ligne pour simplifier l'écriture du code HTML (ici)
Uniquement la partie "HTML PUR" du menu de l'éditeur va nous être utile dans ce qui suit :

Utilisation de l'éditeur :

dans le menu de l'éditeur,
cliquez sur -> Structure
puis sur -> page de base

il apparaît alors dans la plage de saisie de l'éditeur (en dessous), le code de base d'une page HTML.

remarquer les balises :
<html></html> qui délimitent le code source de la page entière
qui est subdivisée en deux partie : "l'en tête" de la page et "le corps" de la page
les balises <head></head> délimitent "l'en tête" de la page
les balises <body></body> délimitent "le corps" de la page
cliquez sur "validez votre script" (en dessous le la plage de saisie)

la page qui correspond au code source qui est dans la barre de saisie s'ouvre dans un nouvel onglet.
appuyez sur la combinaison de touches Ctrl U (au clavier)
Firefox ouvre alors une page qui montre le code source de la page web
(le même que celui contenu dans l'éditeur)
Fermer ensuite ce nouvel onglet.

Analysons le contenu de l'en tête ( tout ce qui est compris entre les balises <head></head> )

la partie <meta charset="utf-8"> indique au navigateur le type de codage utilisé
(nous laisserons ceci de coté)
la partie délimitée par les balises <style type="text/css"> </style>
va nous servir à changer l'apparence générale de la page
(couleur du fond de page, couleur du texte, taille de la police de caractère)
- remplacer : background-color : black;
  par : background-color : green;
  puis validez votre script avec "validez votre script",
  constatez ce qui se passe alors
  (essayer d'autres noms de couleurs: white, yellow, blue, orange, purple)
- remplacer : color : white;
  par : color : green;
  puis validez votre script avec "validez votre script",
  constatez ce qui se passe alors
  (essayer d'autres noms de couleurs )
- remplacer : font-size : 18px;
  par : font-size : 40px;
  puis validez votre script avec "validez votre script",
  constatez ce qui se passe alors
  (essayer d'autres nombres de pixels )

Analysons le contenu du corps de page ( tout ce qui est compris entre les balises <body></body> )

remplacer : <div align="center"> titre de ma page</div>
par : <div align="center"> coucou </div>
puis validez votre script avec "validez votre script",
constatez ce qui se passe alors
Mettez alors comme titre : TP1 page HTML
création de PARAGRAPHES dans la page web
Placer le curseur dans la plage de saisie de l'éditeur, une ligne en dessous de la ligne
<div align="center"> TP1 page HTML </div>
puis au menu cliquer sur : Parties
puis sur : <p> </p>
il apparaît alors dans le code source les balises <p> </p>
qui délimitent un paragraphe dans lequel vous pouvez écrire.
remplacer alors ceci : <p> </p>
par ceci : <p> ceci est le contenu de mon premier paragraphe </p>
puis validez votre script avec "validez votre script",
constatez ce qui se passe alors.
On peut ainsi, les uns à la suite des autres, enchaîner les paragraphes.
validez votre script, puis,
sauvegardez votre page sous le nom tp1_page_html.html (avec fichier, enregistrer sous,...)
dans votre dossier Mes Documents
dans un sous dossier Mathematiques que vous aurez créé au préalable
revenez à l'éditeur puis sauvegardez votre code source en cliquant sur le bouton
"sauvegarde du programme",
donner comme nom : tp1 _page_html
puis confirmez la sauvegarde du programme.
Pour retrouver le code source quand vous le souhaitez,
cliquer surle bouton "vers mes programmes",
puis choisissez parmi les programmes que vous avez enregistré

Dans ce TP vous avez donc apppris à :
- utiliser un petit éditeur en ligne pour écrire le code source de base d'une page web
  qui affiche uniquement le titre de la page
- modifier le code source pour modifier l'apparence générale de la page
  (couleur de fond, couleur du texte, taille de police)
- ajouter du code source pour créer des paragraphes
- visualiser le code source d'une page avec : Ctrl U
- enregistrer le code source sur votre compte personnel en ligne
- enregistrer la page web sur votre compte kwartz au lycée

(suite au TP2)