2. Première page simple

2.1 Premier essai

Nous allons utiliser l'éditeur de texte notpad++. S'il n'est pas installé sur votre PC demander au professeur de le faire (il s'agit d'un éditeur de texte gratuit, enrichi afin de mieux repérer les syntaxes en fonction du langage utilisé).

Les étapes :

1. Créer un dossier « page_web » dans votre espace de travail. Vous y copierez les images nécessaires au TP.

2. Lancer notepad++

3. Créer un nouveau fichier.

4. Dans l'onglet langage sélectionner Xml.

5. Taper le texte suivant :
Bonjour le monde.
Bienvenue sur mon premier site web.

6. Enregistrer le fichier dans votre dossier « page_web » en le nommant test.html.

7. Ouvrer votre fichier « test.html » avec le navigateur Mozilla Firefox.

8. Noter vos observations.

2.2 Premiers éléments HTML et première page HTML.

___________________________ Données __________________________________

Les balises :

Le texte que vous vous avez écrit dans ce fichier est le code html qui est interprété par un navigateur pour visualiser le résultat. Ce code est constitué de texte et d’indications de mise en page. Ces indications sont appelées balises.

Une balise html (ou tag en anglais) respecte la syntaxe suivante : <balise>

Les pages HTML sont remplies de ces balises. Celles-ci sont invisibles à l'écran pour les visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher.
Les balises se repèrent facilement. Elles sont entourées de "chevrons", c'est-à-dire des symboles < et >, comme ceci : <balise>

À quoi est-ce qu'elles servent ?

Elles indiquent la nature du texte autour d'elles. Par exemple : "Le titre de la page", "Une image", "Un paragraphe ", etc. …

On distingue deux types de balises : les balises en paires et les balises orphelines.

Les balises en paires : elles s'ouvrent (<balise>), contiennent du texte, et se ferment plus loin (</balise>).

Les balises orphelines : ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur d'insérer une image à un endroit

Les attributs :

Les attributs sont un peu les options des balises. Ils viennent compléter les balises pour donner des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur.
<balise attribut="valeur">
Prenons la balise <image />, seule, elle ne sert pas à grand chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher.
<image nom="photo.jpg" />

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

C'est un petit pas pour l'homme un bond de géant pour l´humanité.

     </citation>

Structure de base d'une page HTML5 :

Toutes les pages html seront écrites avec la structure ci-dessous :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>
     <body>
     </body>
</html>

Vous noterez que les balises s'ouvrent et se ferment dans un ordre précis. Par exemple, la balise <html> est la première que l'on ouvre, et c'est aussi la dernière que l'on ferme (tout à la fin du code, avec </html>). Les balises doivent être fermées dans le sens inverse de leur ouverture.

Exemple :

<html><body></body></html> : correct.

Une balise qui est ouverte à l'intérieur d'une autre doit aussi être fermée à l'intérieur.

<html><body></html></body> : incorrect. les balises s'entremêlent.

Le doctype

La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML.

Ce n'est pas vraiment une balise comme les autres (elle commence par un point d'exclamation), vous pouvez considérer que c'est un peu l'exception qui confirme la règle.

La balise <html>

C'est la balise principale du code. Elle englobe tout le contenu de la page. La balise fermante </html> se trouve tout à la fin du code.

L'en-tête <head> et le corps <body>

Une page web est constituée de 2 parties :

L'en-tête <head> : cette section donne quelques informations générales sur la page, comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement assez courte. Les informations que l'en-tête contient ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur. Elles sont cependant très importantes !

Le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre code.

L'encodage (charset)

Cette balise indique l'encodage utilisé dans votre fichier .html.
Sans rentrer dans les détails, car cela pourrait vite devenir compliqué, l'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, symboles arabes, etc.).
Il y a plusieurs techniques d'encodage aux noms bizarres utilisées en fonction des langues : ISO-8859-1, OEM 775, Windows-1253... Un seul cependant devrait être utilisé aujourd'hui autant que possible : UTF-8. Cette méthode d'encodage permet d'afficher sans aucun problème pratiquement tous les symboles de toutes les langues de notre planète.
Il faut aussi que votre fichier soit bien enregistré en UTF-8. C'est le cas le plus souvent sous Linux par défaut, mais sous Windows il faut généralement le dire au logiciel.
__________________________________________________________________________________

2.2.1 Maintenant on crée notre première page HTML :

1. Créer, sous Notepad ++ un nouveau fichier nommé test1.html
2. Sous Notepad++, allez dans le menu Encodage > Encoder en UTF-8 (sans BOM) pour que votre fichier soit enregistré en UTF-8 dès le début. Cela ne s'applique qu'au fichier actuellement ouvert. Pour ne pas avoir à le faire pour chaque nouveau fichier, il est conseillé d'aller dans le menu Paramétrage > Préférences, onglet Nouveau document/Dossier. Sélectionnez UTF-8 sans BOM dans la liste.
3. Recopier toute la structure de base d'une page web (vu précédemment).
4. Mettre en titre : Mon premier site Web
5. Enregistrer le fichier dans votre dossier.
6. Ouvrir le nouveau fichier avec Mozilla Firefox.
7. Décrire ce que fait votre page et notamment où s'affiche votre titre.

2.2.2 Commençons maintenant à remplir cette première page

__________________________________ Données ______________________________________

Créer des paragraphes
La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de paragraphes. Le langage HTML propose justement la balise <p> pour délimiter les paragraphes.
Exemple
: <p>Bienvenue sur mon site web</p>
<p> signifie "Début du paragraphe"
</p> signifie "Fin du paragraphe"
Bien sûr il faut écrire le contenu de notre site entre les balises <body></body>.

Insérer un commentaire
Un commentaire est une balise HTML avec une forme bien spéciale :
Exemple :


______________________________________________________________________________________

Réalisation :

1. Dans votre fichier test1.html : écrire le texte suivant dans un seul paragraphe (avec la balise <p>) :
    Bonjour et bienvenue sur mon premier site web !
    Je vous demande d'être indulgent car je viens tout juste de commencer.
    Je sais que mon site n'est pas encore très fourni.
    Mais d'ici la fin de ce TP je devrais faire bien mieux …

2. Enregistrer le fichier sous le nom : test2.html
3. Ouvrir ce nouveau fichier avec Mozilla Firefox.
4. Tester le fonctionnement et noter vos observations

Amélioration :

___________________________ Données ______________________________________

Il existe une balise "Aller à la ligne" !
C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne : <br />.
Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe, à l'endroit ou vous souhaitez retourner à la ligne.
______________________________________________________________________________

5. Modifier le fichier test2.html afin de revenir à la ligne après chaque phrase. Faire valider par le professeur.

2.2.3 Un peu de mise en page

___________________________ Données ______________________________________

Créer des titres

Attention : Ne pas confondre avec la balise <title> ! La balise <title> qui permet d'afficher le titre de la page dans la barre de titre du navigateur.
Les titres <h1> , <h2>, etc, eux, servent à créer des titres qui seront affichés dans la page web.
Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes, cela va devenir difficile pour vos visiteurs de se repérer. C'est là que les titres deviennent utiles.
En HTML on a le droit d'utiliser 6 niveaux de titres différents. Ce qui veux dire par là qu'on peut dire "Ceci est un titre très important", "Ceci est un titre un peu moins important", "Ceci est un titre encore moins important", etc. On a donc 6 balises de titre différentes :
<h1> </h1> : signifie "titre très important". En général, on s'en sert pour afficher le titre de la page au début de celle-ci.
<h2> </h2> : signifie "titre important".
<h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un "sous-titre" si vous voulez).
<h4> </h4> : titre encore moins important.
<h5> </h5> : titre pas important.
<h6> </h6> : titre vraiment, mais alors là vraiment pas important du tout.
______________________________________________________________________________

Réalisation :

1. Dans votre fichier test2.html : mettre en titre du site Titres
2. Ecrire le texte suivant en utilisant les paragraphes (on n'utilisera pas les balises <br/> car elles sont ici inutiles)

Bonjour et bienvenue	titre style h1
Voici mon premier site web !	titre style h2
Je vous demande d'être indulgent	titre style h3
Je viens de commencer le langage html.	titre style h4
Je sais que mon site n'est pas encore très fourni.	titre style h5
Mais d'ici la fin de ce TP je devrais faire bien mieux …	titre style h6

3. Enregistrer le fichier sous le nom test3.html
4. Ouvrir ce nouveau fichier avec Mozilla Firefox
5. Décrire ce qui se passe.
6. Faire valider par le professeur.

2.2.4 Encore de la mise en page

_____________________________________ Données ______________________________________

La mise en valeur d'un mot ou groupe de mots dans une phrase

Au sein de vos paragraphes, certains mots sont parfois plus importants que d'autres et vous aimeriez les faire ressortir. HTML vous propose différents moyens de mettre en valeur le texte de votre page.

Mettre un peu en valeur ( cela ressemble à l'italique dans les traitements de texte). Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em>. Son utilisation est très simple : entourez les mots à mettre en valeur par ces balises.
Mettre bien en valeur (cela ressemble au « gras » dans les traitements de texte). Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie "fort", ou "important". Elle s'utilise exactement de la même manière que <em>.

Marquer le texte ( correspond au surlignage)

La balise <mark> permet de faire ressortir visuellement une portion de texte. Le texte n'est pas forcément considéré comme important mais on veut qu'il se distingue bien du reste du texte. Cela peut être utile pour faire ressortir un texte pertinent après une recherche sur votre site par exemple.

______________________________________________________________________________________

Réalisation :

1. Dans votre fichier test3.html vous allez modifier la dernière phrase : « Mais d'ici la fin de ce TP je devrais faire bien mieux … :

enlever la balise de titre H6
Mettre en valeur "Mais"
Mettre bien en valeur "fin de ce TP"
Marquer le texte "mieux"

2. Enregistrer le fichier en le renommant test4.html.
3. Ouvrir ce nouveau fichier avec Mozilla Firefox
4. Décrire ce qui se passe.
5. Faire valider par le professeur.

2.2.5 Encore et toujours de la mise en page : les listes à puces

_____________________________________ Données ______________________________________

Les listes à puces
Les listes à puces nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations.
Il existe deux types de listes à puces :

Les listes non ordonnées :

C'est un système qui nous permet de faire une liste d'éléments, sans notion d'ordre (il n'y a pas de "premier" ni de "dernier"). Pour créer une liste à puces non ordonnée, il suffit d'utiliser la balise <ul> que l'on referme un peu plus loin avec un </ul>.
Ensuite, il faut écrire chacun des éléments de la liste entre 2 balises <li> </li>.
Toutes ces balises doivent se trouver entre <ul> et </ul>.

Les listes ordonnées :

Une liste ordonnée fonctionne de la même façon, seule une balise change. Il faut remplacer <ul> </ul> par <ol> </ol>. À l'intérieur de la liste, on utilise toujours des balises <li> </li> pour délimiter les éléments.
L'ordre dans lequel vous mettez les éléments de la liste est important.
Le premier <li></li> sera l'élément n°1, le second sera le n°2 etc. ...
______________________________________________________________________________________

Réalisation :

1. Dans votre fichier test4.html : rajouter la Phrase « Cette année je suis en STI2D_SIN » (en titre important)
2. Modifier le titre de la page web pour qu'il devienne : « test des listes à puces »
3. Rajouter la phrase « Voici les disciplines enseignées en STI2D_SIN :» (en sous titre)
4. Faire une liste avec des puces non ordonnées puis ordonnée des matières enseignées en STI2D_SIN
5. Enregistrer le fichier sous le nom test5.html.
6. Ouvrir ce nouveau fichier avec Mozilla Firefox
7. Décrire ce qui se passe.
8. Faire valider par le professeur.

2.3 Intégrons des images

___________________________________ Données ______________________________________

Les images

Insérer une image dans une page web ? Vous allez voir, c'est d'une facilité déconcertante.
Il existe différents formats d'image que l'on peut utiliser sur des sites web, et on ne doit pas les choisir au hasard. En effet, les images sont parfois volumineuses à télécharger, ce qui ralentit le temps de chargement de la page.
Quand vous avez une image "entre les mains", vous avez la possibilité de l'enregistrer dans plusieurs "formats" différents. Le poids (en Ko, voire en Mo) de l'image sera plus ou moins élevé selon le format choisi, et la qualité de l'image va changer.
Toutes les images diffusées sur Internet ont un point commun : elles sont compressées. Cela veut dire que l'ordinateur fait des calculs pour qu'elles soient moins lourdes et donc plus rapides à charger.

Les formats images :

Les images au format JPEG (Joint Photographic Expert Group) sont très répandues sur le Web. Ce format est conçu pour réduire la taille des photos, qui peuvent comporter plus de 16 millions de couleurs différentes. Les images JPEG sont enregistrées avec l'extension jpg ou jpeg.
Le format PNG (Portable Network Graphics) est le plus récent de tous. Ce format est adapté à la plupart des graphiques (je serais tenté de dire "à tout ce qui n'est pas une photo"). Le PNG a deux gros avantages : il peut être rendu transparent et il n'altère pas la qualité de l'image.
Le format GIF est un format assez vieux, qui a été néanmoins très utilisé (et qui reste très utilisé par habitude). Aujourd'hui, le PNG est globalement bien meilleur que le GIF : les images sont le plus souvent plus légères et la transparence est de meilleure qualité. Je vous recommande donc d'utiliser le PNG autant que possible. Il est limité à 256 couleurs (alors que le PNG peut aller jusqu'à plusieurs millions de couleurs).

Insertion d'une image

La balise qui va nous permettre d'insérer une image est <img />
C'est une balise de type orpheline (comme <br/>). Cela veut dire qu'on n'a pas besoin de l'écrire en deux exemplaires comme la plupart des autres balises que nous avons vues jusqu'ici.

La balise doit être accompagnée de 2 attributs obligatoires :

src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre un chemin en absolu (ex. : http://www.site.com/microprocesseur.png), soit mettre le chemin en relatif (ce qu'on fait le plus souvent). Ainsi, si votre image est dans un sous-dossier images vous devrez taper : src="images/microprocesseur.png"
alt : cela signifie "texte alternatif". On doit toujours indiquer un texte alternatif à l'image, c'est-à-dire un court texte qui décrit ce que contient l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (ça arrive), ou sur les navigateurs de personnes handicapées (non-voyants) qui ne peuvent malheureusement pas "voir" l'image. Cela aide aussi les robots des moteurs de recherche pour les recherches d'images.

Exemple : <img src="vacances.jpg" alt="Photo de vacances" />

La balise image admet entre autre les propriétés suivantes :

ALIGN= Top , Bottom, Middle, Left ou Right

Exemple : <img src="vacances.jpg" alt="Photo de vacances" align="right"/>

BORDER= PIXELS WIDTH= Pixels ou pourcentages (largeur)

HEIGHT= Pixels ou pourcentages (hauteur)

Exemple: <img src="vacances.jpg" alt="Photo de vacances" align="right" border =2 width=100 height=200"/>
______________________________________________________________________________________

Réalisation :

1. Dans votre fichier test5.html , insérer l'image du lycée (photo_lamache.jpg) sous la dernière ligne de texte (taille de l'image 480*320 pixels).
2. Enregistrer le fichier sous le nom test6.html
3. Ouvrir ce nouveau fichier avec Mozilla Firefox
4. Faire valider par le professeur.
5. Faites des essais avec des valeurs différentes pour les attributs align, border, width et height pour bien comprendre leur rôle et leur impact.

Régi par la licence Creative Commons: Licence d'attribution en partage identique et non commercial 4.0

« Précédent | Suivant »

Equipe STI 2D I2D et options EE et SIN du Lycée LaMache - Combe - Verilhac - Boiron - Varenne
Créé avec le logiciel libre eXeLearning