des pages « Web » TS2 : Synthèse Créer

(1)

TS2 : Synthèse Créer des pages « Web »

I) OBJECTIF

Nous allons créer une page Web en utilisant un « patron » HTML et CSS à l'aide du module d'inspection Eirebug pour le navigateur Firefox.

Tutoriel HTML : http://fr.html.net/tutorials/html/

Voici un site destiné au développement Web : http://www.webisn.byethost5.com/accueil

Très bon tutoriel : http://www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-site-web-avec-html5-et-css3 II) STRUCTURE D'UNE PAGE WEB, le langage HTML(Hyper Text Markup Language)

La construction d'un site Web peut être comparée à la construction d'une maison.

Construction d'une maison Construction d'une page Web

 posséder le terrain

 faire une demande de permis de construire(déposer les plans,…..)

 bâtir les fondations

 monter les murs, les cloisons

 faire la décoration

 posséder un hébergement (endroit où le site sera enregistré)

 déclarer comment va être construit notre site(Doctype)

 établir les premiers socles

 établir les différentes sections du site (HTML)

 donner un style au site (CSS)

Visualiser la page Web www.csszengarden.com puis télécharger : html. file. Vous obtenez la page BRUTE sans décoration.

Revenez à la page initiale puis ouvrir Firebug

Passer la souris sur <hl> pour visualiser la partie de la page concernée.

Modifier un paramètre du fichier de style CSS comme ci-dessous :

Ce code est constitué de texte et d'indications de mise en page. Ces indications sont appelées balises.

Les balises :

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

Une balise peut être seule, et son effet s'applique à l'endroit où elle se trouve, comme par exemple <BR> qui sert à sauter une ligne, ou en couple balise ouvrante <balise> balise fermante </balise> pour indiquer sur quelle partie de votre code elle s'applique : son effet touche tout ce qui se trouve entre la balise ouvrante et la balise fermante.

Les fondations d'une page Web :

(2)

l°) Un DOCTYPE: déclaration de comment va être construite la maison :

Le Doctype permet de décrire au navigateur la version de HTML utilisée avec l'URL des spécifications W3C(abréviation de WORLD Wide Web Consortium) qui définit les règles des langages de balisage. Le site http://validator.w3.org/ permet de valider notre code.

2°) L'élément HTML: fondation principale sur laquelle va reposer la maison : Il permet de créer la structure pour un site Web

3°) L'élément HEAD: la tuyauterie/électricité cachée nécessaire à la maison :

Il contient les informations non affichées à l'écran relatives à la page comme le titre de la page (affiché dans l'onglet de mozilla), des mots-clefs, des liens vers des feuilles de style …….

4°) L'élément BODY: les murs encadrant notre maison : Il contient les éléments visibles dans le navigateur

III) Ma première page Web

A) Un premier squelette :

Question 1 : ouvrir l'éditeur de texte et copier le code ci-dessous. Enregistrer le fichier squellette.html.

A présent, pour visualiser le résultat, allez dans votre navigateur web, et choisissez dans le menu : fichier->ouvrir et sélectionnez votre fichier squelette.html. Observez et commentez le résultat.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML l.0 Strict//EN"

"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">

<head>

<title> Ma première page </title>

</head>

<body>

<hl> Titre de la page la plus simple du monde </hl>

<p>

Ceci est une page simple.

Il faut comprendre comment fonctionne le balisage pour comprendre l'affichage

</p>

<p> Ceci est un autre paragraphe. Juste pour montrer comment tout fonctionne.

</p>

</body>

</html>

On observe deux nouvelles balises :

 <hl> qui permet de définir des titres (hl pour « headingl »). Il peut y avoir jusqu'à 6 niveaux hiérarchiques de titres (hl à h6).

Ces titres sont très importants pour structurer une page et pour la recherche par moteur de recherche.

 <p> (pour « paragraph ») qui contient des blocs de texte.

Il est inutile de mémoriser toutes les balises. Il existe des sites listant les balises et leurs fonctions.

En utilisant le squelette précédent et le site Sitepoint HTML référence : http://reference.sitepoint.com/html ou http://www.startyourdev.com/html/tag-html-index ,nous allons créer un site pour un magasin de planches de surf.

Question 2 : en prenant exemple sur l'image ci-contre répondez aux 3 questions ci-contre.

 Un titre de page est déjà présent, adapter le en conséquence pour qu'il soit en rapport avec notre magasin de surf.

 Ajouter un titre principal(<hl>, suivi de titres secondaires(<h2>, <h3>).

 Un petit paragraphe d'introduction expliquant aux visiteurs qu'ils sont sur le site d'une boutique de planches de surfs serait utile.

 Ajouter une liste pour les différentes planches disponibles. (balise <ul> pour les listes :

« unordered list ») :

<ul

<li>élément l de la liste</li>

<li>élément 2 de la liste</li>

</ul>

(3)

Question 3 :

Ce site est bien triste sans images. En vous inspirant de la page ci-contre, ajouter une illustration (balise <img>) juste après le paragraphe d'introduction :

commencez par chercher sur le web une image, que vous sauvegarderez sur votre compte. Elle s'utilise selon le modèle suivant (à adapter à votre nom de fichier image) :

Notez qu'il est important de donner un texte alternatif à notre image (au travers de l'attribut alt) afin que notre image soit compréhensible s'il y a un problème de chargement de celle-ci.

De plus, ce sont ces textes qui sont analysés par les moteurs de recherche pour indexer les images (ainsi que les navigateurs pour aveugles).

Il est possible de choisir la taille de l'image et d'utiliser l'image comme un lien hypertexte :

http://www.startyourdev.com/html/tag-html-balise-img

B) Structuration de la page

Nous venons d'ajouter des paragraphes, des titres, des listes, mais il serait peut-être intéressant de rassembler certains paragraphes entre eux dans le but de pouvoir, par la suite, leur donner un style particulier.

L'élément permettant de créer des structures est l'élément <div>. A la différence de paragraphe, il permet d'englober tout autre type d'élément (un paragraphe ne peut contenir des éléments « simples », et ne peut être composé d'autres paragraphes par exemple).

Une division peut soit être associée à un identifiant (id), soit associée à un nom de classe « class » qui lui sera non unique.

Par exemple, on décide de regrouper sous une même division la zone allant de « Bienvenue » à la fin du paragraphe contenant l'image du surfeur fera partie d'une division dont l'id sera « entête ».

Question 4 :

 Insérez une liste avec points juste après l'image du surfeur. Les trois points sont : « Accueil », « Plan d'accès », « Contact ».

Cette liste sera dans une division « menu ».

 L'ensemble de la zone de la page décrivant les produits sera intégrée dans une div « produits ».

 Chaque sous-produit (planches, accessoires, …) sera intégré dans une zone « produit ».

Après avoir réalisé ces changements, observez les résultats obtenus en rechargeant votre navigateur.

C) Liens

Un site n'est jamais composé d'une seule page, nous allons donc créer d'autres pages à notre site et créer des liens permettant de naviguer d'une page à l'autre.

Question 5 :

 Créer 2 nouvelles pages : l'une pour le plan d'accès et l'autre pour le contact.

 Utilisez la balise <a> pour que les 3 entrées du menu permettent de naviguer d'une page à l'autre.

Pensez à tout moment à valider votre code HTML à l'aide du consortium W3C : http://validator.w3.org/

(4)

IV) Modification du style de la page.

En reprenant notre métaphore, nous avons déposé le permis de conduire de notre maison, nous avons déposé des fondations, puis établi des murs et des portes entre les différentes pièces de notre maison. Il reste à décorer un peu notre maison.

CSS(Cascading Style Sheets) est un langage qui permet de changer l'apparence des éléments d'une page(la taille, le style, la couleur d'un texte, la couleur de fond, les bordures, ainsi que la position d'un élément dans la page).

Pour mettre en forme notre page, nous allons utiliser des « patrons » (ou « tem plates »).

Par exemple : www.oswd.org/design/preview/id/3697 Ce patron comporte 2 fichiers séparés index.html et stYle.css.

A) Analyse

On peut rajouter des styles CSS de plusieurs manières :

 Chaque élément HTML peut posséder un attribut style dans lequel nous pouvons ajouter des déclarations.

 Avec la balise <style>, on peut regrouper plusieurs déclarations.

 On peut inclure un fichier contenant tout ou partie des déclarations. Ceci ce fait dans l'en-tête du fichier HTML.

Télécharger le patron « Simple Beauty » : www.oswd.org/design/preview/id/3697.

Clic droit sur le cadre inférieur de la page puis sélectionner cadre puis sélectionner Afficher ce cadre uniquement Clic droit sur la page puis sélectionner

Observer l'inclusion de la feuille de style :

On découvre dans le corps de la page (<body>……..</body>), « les murs de la maison » imbriquées de façon hiérarchique : La structure « container » comprend des sous-structures « header », « main content », « footer » etc …..

(5)

Visualisation du code HTML de la page Web :

1^èreméthode : page Web



code HTML

passer en mode inspection (raccourci : Ctrl + Shift+C) et en survolant la zone voulue dans la page Web, on voit le code correspondant dans Firebug.

2^èmeméthode : code HTML



page Web

Passer la souris sur chacune des structure pour visualiser « les murs » associés sur la page Web.

B) Expérimentation

On remarque que Firebug dispose de 2 fenêtres : le code HTML et le style CSS correspondant à la sélection d'un élément HTML.

Sélectionner cet élément en cliquant sur la balise <h1>

Modifier la couleur du titre : tous les codes couleurs hexadécimaux sur

http://www.code-couleur.net/

Modifier les autres paramètres et visualiser les effets sur la page Web. Pour les modifications, on pourra consulter le lien suivant : http://fr.html.net/tutorials/css/

Question 6 :

 La structure « main-content » comprend deux sous structures

« content » et « menu » (voir ci-dessous) Quel est le rôle de ces deux dernières ?

 A l'aide de la propriété fl0at, inverser la disposition :

Revenir à la disposition initiale.

(6)

Question 7 : le système des marges

Sélectionner l'élément correspondant à la boîte « menu » dans la partie HTML, on découvre notamment que celle-ci « flotte » à droite dans le conteneur de niveau supérieur « main content », que sa largeur est de 139 pixels, puis on découvre la signification de padding:0 20px (voir ci-dessous) et le système des marges CSS en expérimentant des valeurs de 5 ou 10 pixels.

Question 8 :

Télécharger le patron « Simple Beauty » : www.oswd.org/design/preview/id/3697.

Sauvegarder dans un répertoire nommé TPboutiquesurf.

Vous constaterez qu'il comporte au moins deux fichiers séparés : index.html et style.css

Intégrer le contenu HTML de la boutique de surf dans le fichier index.html pour obtenir le résultat ci-dessous :

Ce patron est écrit en XHTML, la nouvelle norme du W3C en matière de langage balisé pour concevoir des documents Web donc il y a quelques règles nouvelles par rapport au HTML : http://openweb.eu.org/articles/html_au_xhtml

Le résultat n'est pas immédiatement satisfaisant, il reste des paramètres à adapter (couleurs, polices de caractères, taille et disposition des éléments etc …) mais vous pouvez expérimenter sa nouvelle mise en forme avec Firebug.

Pensez à tester périodiquement votre fichier à l'aide du validateur du consortium W3C : http://validator.w3.org/

Il vous donnera des informations sur les éventuels types d'erreurs

(7)

Question 9 :

Vous avez compris le principe des boîtes flottantes alors compléter le CSS en créant une nouvelle structure simple pour disposer le paragraphe et la photo sur deux colonnes comme l'exemple ci-dessous.

Vous veillerez a validé à tout moment votre code HTML et CSS

Facultatif : correction de fichier HTML.

1. Affichez le fichier ex_html2.html dans votre navigateur. Est-ce que l'affichage semble correct ? 2. Ouvrez le fichier à l'aide de votre éditeur de texte et corrigez les erreurs de syntaxe HTML.

3. Affichez de nouveau le fichier et vérifiez que l'affichage est conforme à ce qui est attendu.

4. Une fois que vous pensez avoir corrigé toutes les erreurs, testez votre fichier à l'aide du validateur du consortium W3C : http://validator.w3.org/

5. Au fur et à mesure de vos corrections, complétez la liste des conseils pour avoir une page web valide.

Votre enseignant collectera les différents conseils ajoutés afin de constituer une liste la plus complète possible

(8)

Fichier Html Début et fin de fichier Html

<HTML>•••</HTML>

Zone d'en-tête d'un fichier Html

<HEAD>•••</HEAD>

Les principales balises en HTML

Mise en forme des caractères Texte en gras

<B>•••</B>

Agrandissement de la taille des caractères

<BIG>•••</BIG>

Titre affiché par le browser (élément de HEAD)

<TITLE>•••</TITLE>

Début et fin du corps du fichier Html

<BODY>•••</BODY>

Couleur d'arrière-plan (en hexadécimal)

<BODY

bgcolor="#XXXXXX">

Image d'arrière-plan

<BODY

background="xyz•gif">

Mise en forme du texte Commentaire ignoré par le navigateur

A la ligne

<BR>

Citation (introduit un retrait du texte)

<BLOCKQUOTE>•••</BLOCKQUOTE>

Centre tout élément compris dans le tag

<CENTER>•••</CENTER>

Centre l'élément encadré par le tag

<DIV align=center> •••</DIV>

Aligne l'élément à gauche

<DIV align=left> •••</DIV>

Aligne l'élément à droite

<DIV align=right> •••</DIV>

Titre où x a une valeur de 1 à 7

<Hx>•••</Hx>

Titre centré

<Hx align=center>•••</Hx>

Titre aligné à gauche

<Hx align=left>•••</Hx>

Titre aligné à droite

<Hx align=right>•••</Hx>

Nouveau paragraphe

<P>•••</P>

Paragraphe centré

<P align=center>•••</P>

Paragraphe aligné à gauche

<P align=left>•••</P>

Paragraphe aligné à droite

<P align=right>•••</P>

Texte clignotant (Netscape seul)

<BLINK>•••</BLINK>

Texte en italique

<EM>•••</EM>

Texte en couleur où XXXXXX est une valeur hexadécimale

<FONT

color="#XXXXXX">•••</FONT>

Taille des caractères où X est une valeur de 1 à 7

<FONT size=X>•••</FONT>

Texte en italique

<I>•••</I>

Empêche les ruptures automatiques de ligne des navigateurs

<NOBR>•••</NOBR>

Texte préformaté, soit avec affichage de tous les espaces et sauts de ligne

<PRE>•••</PRE>

Réduction de la taille des caractères

<SMALL>•••</SMALL>

Mise en gras du texte

<STRONG>•••</STRONG>

Texte en indice

<SUB>•••</SUB>

Texte en exposant

<SUP>•••</SUP>

Texte souligné

<U>•••</U>

Listes Liste non numérotée (dite à puces)

<UL>

<LI> Elément de liste

</UL>

Liste numérotée

<OL>

<LI> Elément de liste

</OL>

Liste de glossaire

<DL>

<DT>•••</DT> Terme de glossaire (sans retrait)

<DD>•••</DD> Explication du terme (avec retrait)

</DL> Ligne de séparation Trait horizontal (centré par défaut)

<HR>

Largeur du trait en %

<HR

width="x%">

Largeur du trait en pixels

<HR width=x>

Hauteur du trait en pixels

<HR size=x>

Trait centré (défaut)

<HR

align=center>

Trait aligné à gauche

<HR align=left>

Trait aligné à droite

<HR align=right>

Trait sans effet d'ombrage

<HR noshade>

(9)

Hyperliens

^Tableau

Lien vers une page Web

<A

href="http://•••">•••</A>

Lien vers une adresse Email

<A href="mailto:•••">•••</A>

Lien vers la page locale fichier.htm située dans le même dossier

<A href="fichier•htm">•••</A>

Définition d'une ancre

<A name="xyz">•••</A>

Lien vers une ancre

<A href="xyz">•••</A>

<A href="fichier#xyz">•••</A>

Définition d'un tableau

<TABLE>•••</TABLE>

Largeur du tableau en %

<TABLE width="x%">

Largeur du tableau en pixels

< TABLE width=x>

Largeur de la bordure

<TABLE border=x>

Espace entre la bordure et le texte

<TABLE cellpadding=x>

Epaisseur du trait entre les cellules

<TABLE cellspacing=x>

Ligne du tableau

<TR>•••</TR>

Cellule du tableau

<TD>•••</TD>

Couleur d'une cellule de tableau

<TD bgcolor="#XXXXXX">

Largeur de colonne en %

<TD width="x%">

Largeur de colonne en pixels

<TD width=x>

Texte dans la cellule centré

<TD align=center>

Texte dans la cellule aligné à gauche

<TD align=left>

Texte dans la cellule aligné à droite

<TD align=right>

Alignement vers le bas du contenu d'une cellule

<TD valign=bottom>

Centrage vertical du contenu d'une cellule

<TD valign=middle>

Alignement vers le haut du contenu d'une cellule

<TD valign=top>

Nombre de cellules à fusionner horizontalement

<TD colspan=x>

Nombre de cellules à fusionner verticalement

<TD rowspan=x>

Images

Insertion d'une image au format Gif ou Jpg (voir liens pour l'adressage)

<IMG src="xyz•gif">

<IMG src="xyz•pjg>

Mise à l'échelle de l'image en pixels

<IMG •••

width=x height=y>

Définition de la bordure d'une image avec lien

< IMG ••• border=x>

Texte alternatif lorsque l'image n'est pas affichée

<IMG ••• alt="votre texte">

Aligne l'image en bas

<IMG ••• align=bottom>

Aligne l'image au milieu

<IMG ••• align=middle>

Aligne l'image en haut

<IMG ••• align=top>

Aligne l'image à gauche

<IMG ••• align=left>

Aligne l'image à droite

<IMG ••• align=right>

Espacement horizontal entre l'image et le texte

<IMG ••• hspace=x>

Espacement vertical entre l'image et le texte

<IMG ••• vspace=y>

(10)

Les liens

Insérer un lien vers un autre site

Pour faire un lien, on utilise la balise : <a> avec un attribut, href, pour indiquer vers quelle page le lien doit conduire, le tout mis dans un paragraphe

Exemple :

<p> Souhaitez vous visiter le <a href="http://www.lewebpedagogique.com/sfeulvarch/">Site du Prof</a> ? </p>

Remarque : Par défaut le lien apparaît en bleu, puis en violet une fois qu'on s'est rendu dans le lien (jusqu'à ce qu'on vide le cache « historique »). y a moyen de changer la couleur.

Un lien vers une autre page de son site

Créons une deuxième page HTML « page 2.html » que l'on va mettre dans le dossier qui contient la

« page 1.html » pour faire un lien entre la page 1 et la page 2, on utilise <a href="page2.html">

<p> Souhaitez-vous consulter <a href="page2.html">la page 2</a> ?</p>

Si votre page 2 est dans un sous-dossier (par ex., dossier 1) du dossier contenant la page 1, il faudra indiquer le chemin

<p>Souhaitez-vous consulter <a href="dossier 1/page2.html"> la page 2</a>?</p>

Attention : si votre page 2 n'est pas dans un sous-dossier, mais dans un dossier parent on écrira :

<p> Souhaitez-vous consulter <a href="../page2.html">la page 2</a> ?</p>

Un lien vers une ancre

On utilise une ancre lorsque la page est très longue. Cela permet de sauter directement à l'endroit de la page marquer par l'ancre.

Pour créer l'ancre, on rajoute l'attribut id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre par exemple.

Utilisez l'attribut id pour donner un nom à l'ancre.

Cela nous servira ensuite pour faire un lien vers cette ancre.

Par exemple :

<h2 id="ancre 1">Essai 2</h2>

Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre.

<a href="#ancre 1">Aller à Essai 2</a>

Lien vers une ancre située dans une autre page

Allez voir http://www.siteduzero.com/tutoriel-3-13499-un-lien-vers-une-ancre.html

Un lien qui affiche une infobulle au survol

On utilise l'attribut title qui affiche une bulle d'aide lorsqu'on pointe sur le lien.

Exemple :

<p> Souhaitez vous visiter le <a href= " http://www.philippefrey.info" title= "Uniquement pour les bons élèves ">Site du Prof</a> ? </p>

Un lien qui ouvre une nouvelle fenêtre ou un nouvel onglet

Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela, on rajoutera target="_blank" à la balise <a>

Un lien pour envoyer un e-mail

<p><a href="mailto:feulvarch@gmail.com">Ecrivez-moi un e-mail!</a></p>