En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des services et offres adaptés à vos centres d'intéréts.

Chantier d'Innovation Pédagogique

Chantier d'Innovation Pédagogique

Programmer Les Pages Web Statiques HTML

Chapitre:

Programmer Les Pages Web Statiques HTML

NDJO'O Pierre Anicet, IPR/INFO/OUEST

(14 heures) et (10 heures en 1ère TI)

Objectifs du cours : Initier l'élève à la production des pages web.

-  Télécharger un éditeur de pages du web gratuit (Notepad++, ou bloc note)

téléchargement le navigateur Mozilla Firefox sur le lien : www.mozilla-europe.org/fr/   

I-Structure de base d'un document html

Le  langage html (HyperText Markup Language)  permet de décrire les pages web. Il  sert notamment à organiser les textes, les sons, les images, et à créer des liens avec d'autres services.)

Sa structure est la suivante :

L’entête,  reconnu par les balises <head> et </head>

Le corps de la page avec les balises : <body> et </body>

Ces deux parties sont couvertes par les balises <html> et </html>

Structure d’une page  html :

<html>

   <head> <title>…</title> </head>

   <body> -  - - </body>

</html>

Il est important de relever qu’avant de produire votre page web, il faut définir la standard HTML que vous utilisez.

Exemple : le standard HTML 4.0 se définit par la balise suivante : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN" >

Une structure complète d’une page HTML est finalement :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN" >

<html>

   <head> <title>…</title> </head>

   <body> -  - - </body>

</html>

Avec les explications suivantes :   

     <HTML> : Début du document de type HTML.
     </HTML> : Fin du document de type HTML.
     <HEAD> : Début de la zone d'en-tête.
     </HEAD> : Fin de la zone d'en-tête.
     <TITLE> : Début du titre du document.
     </TITLE> : Fin du titre du document.
     <BODY> : Début du corps du document.
     </BODY> : Fin du corps du document.

Exemple de production d’un document html  (TP);

Ouvrir Notepad++  puis insérer les lignes suivantes :

                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN" >

<html>

   <head> <title>Page1</title> </head>

   <body>  Bonjour à tous ! </body>

</html>

Remarque : page1 est le titre de la page qui sera lu dans la barre des titres du navigateur. Alors que Bonjour à tous est le message qui s’affiche sur notre page web.

Enregistrer cette page avec un nom de votre choix avec l’extension html. Exemple : page.html

Ouvrir cette page à partir de l’emplacement de son enregistrement.

Vous avez votre première page web. Il reste juste à l’enrichir.

II-  Les balises:

-  La balise <body> : Le corps des documents est l'endroit à partir duquel le navigateur va commencer à afficher les véritables données de vos pages, il ce trouve entre les balises <BODY> et </BODY>. Cette balise a plusieurs attributs. Parmi lesquels on peut citer :

BGCOLOR : Définit la couleur du fond de l'écran.

TEXT : Définit la couleur du texte.

LINK : Définit la couleur des liens.

VLINK : Définit la couleur des liens déjà visités.

ALINK : Définit la couleur des liens activés, c'est à dire quand le pointeur de la souris passe au-dessus.

BACKGROUND : Définit l'image (gif ou jpeg) à utiliser comme fond d'écran.

BGPROPERTIES : Quand elle est définie à FIXED, l'image de fond ne défile pas (fonctionne qu'avec I.Explorer).

LEFTMARGIN : Définit la largeur de la marge de gauche en pixels.

TOPMARGIN : Définit la largeur de la marge du haut en pixels.

Exemple :

<body bgcolor="#000000" text="#FFFFFF" leftmargin="3" topmargin="5">

</body>

Couleur de texte

<BODY TEXT="#$$$$$$">

Couleur de lien

<BODY LINK="#$$$$$$">

Lien visité

<BODY VLINK="#$$$$$$">

Lien actif

<BODY ALINK="#$$$$$$">

 

Remarque : les codes couleurs sont formés de six caractères contenant les lettres de l’alphabet allant de a à f et les nombres de 0 à 9.

Les commentaires que vous faites et qui ne seront pas visibles par l’utilisateur s’écrivent entre les balises < !--   et -->

-  Balises de mise en forme élémentaires :

Texte en gras : <B>.....<B> ou <strong>… .</strong>

Texte en italique : <I>......</I> ;

Texte soulignés : <U>.....</U> ;

A la ligne : <BR> ou <br/>

Paragraphe suivant : <p>

La balise des titres <hn>…..</hn> avec n allant de 1 à 6 ;

Espacement : &nbsp;

Centrer le texte : <CENTER>....</CENTER>

Affiche le texte style machine à écrire : <TT>......</TT> ;

Barre le texte : <STRIKE>.....</STRIKE> ;

Police plus grande : <BIG>.....</BIG> ;

Police plus petite : <SMALL>.....</SMALL> ;

Texte en indice : <SUB>.....</SUB> ;

<SUP>.....</SUP> en exposant ;

Texte comme sous définition : <DFN>.....</DFN> ;

Definit une variable : <VAR>.....</VAR> ;

Affichage des caractères de manière littérale : <SAMP>.....</SAMP> ;

Style clavier : <KBD>.....</KBD> ;

Style informatique : <CODE>.....</CODE> ;

Afficher le texte comme citation : <CITE>.....</CITE>.

-  Les polices de caractère : Les polices de caractères ce définissent avec la balise <FONT>....</FONT>.
    Les attributs de la balise <FONT> sont :

Taille du texte avec l’attribut : SIZE

Exemple : <FONT SIZE="-2">le texte</FONT> 

  • Couleur du texte avec la balise : COLOR

Exemple : <FONT COLOR="#0000CC">le texte</FONT>

Ordre de priorité des noms de polices : FACE

Exemple : <FONT FACE= "Arial, Helvetica, sans-serif">le texte</FONT>

-  Balises de liste Une liste numérotée est délimitée par les balises <OL> et </OL> entre lesquelles chaque élément de la liste est précédé de la balise <LI>.

 

 

Exemple :

<OL>
<LI>élément 1,
<LI>élément 2,
<LI>élément 3.
</OL>

Ce qui donne à l'écran :

élément 1,

élément 2,

élément 3.

Les listes à puces : Une liste non numérotée est définie de la même façon, sauf qu'elle est encadrée par les balises <UL> et </UL>.

Exemple :

<UL>
<LI>élément 1,
<LI>élément 2,
<LI>élément 3.
</UL>

On obtient cette fois :

  • élément 1,
  • élément 2,
  • élément 3.

Notez qu'il est possible d'imbriquer des listes du même type ou de types différents.

Exemple :

<UL>
<LI>élément 1 :
    <OL>
    <LI>sous-élément A,
    <LI>sous-élément B.
    </OL>
<LI>élément 2,
<LI>élément 3.
</UL>

On obtient alors :

  • élément 1,

     sous-élément A,

     sous-élément B.

  • élément 2,
  • élément 3.

Nous avons les attributs suivants pour les balises des listes

 

<UL type="disc ">

Puces rondes pleine

<UL type="circle">

Puces rondes creuses

<UL type="square">

Puces carrées

<OL type=1>

(1,2,3)

<OL type=a>

(a,b,c)

<OL type=A>

(A,B,C)

<OL type=i>

(i,ii,iii)

<OL type=I>

(I,II,III)

 

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN" >

<html>

   <head> <title>Page2</title> </head>

    <body bgcolor="#000000" text="#FFFFFF" >

         <h1> Une page text </h1>

        <FONT COLOR="#0000CC"><FONT SIZE="+1">le texte</FONT> </font>

       <UL>
<LI>élément 1 :
    <OL>
    <LI>sous-élément A,
    <LI>sous-élément B.
    </OL>
<LI>élément 2,
<LI>élément 3.
</UL>      

</body>

</html>

-  Balise de tableau :

<TABLE> </TABLE> indique au navigateur le début et la fin d'une table

<TR> </TR> le début et la fin d’une ligne ;

<TH> </TH> (Table Head) début et fin d’une cellule d’en-tête ;

<TD> </TD> (Table Data) début et fin d’une cellule.

Nous pouvons utiliser les attributs suivants pour les tableaux :

Width: pour définir la largeur du tableau;

Border : pour la bordure ;

Align pour aligner le texte.

Largeur d'une cellule

<TD width=x> en pixels

 

<TD width=%> en pourcentage

Fusion de x lignes

<TD rowspan=x>

Fusion de x colonnes

<TD colspan=x>

 

Exemple une table à deux lignes et deux colonnes:

<table align="center"  width="80%" bgcolor="#00CCFF" border="1" >

    <tr>

          <td align="center" width="45%">

             Nom

          </td>

          <td align="center" width="55%">

             Prénom

          </td>

     </tr>

     <tr>

            <td align="justify">

                 DEFFO

            </td>

            <td align="right">

                  Alain Paul

             </td>

      </tr>

 </table>

-  Balise des caractères spéciaux :

VOIR FICHE

-  Balise d’insertion d’image :

<IMG SRC="adresse url de l’image">

<IMG SRC="Photo2.gif" HEIGHT=50  WIDTH=30> image avec dimension (height=hauteur et width=largeur)

<IMG SRC=" Photo2.gif" HEIGHT=30 ALIGN="left"> avec alignement à gauche

<IMG SRC=" Photo2.gif" HEIGHT=30  ALIGN="right">

Remarque pour créer un lien vers le mail. 

<A HREF="mailto:truc@machin.bidule">NOUS CONTACTER</A>.lien émail

Attribut de la balise <img src>

 

(Texte alternatif) alt="****"

Pour le browser n'ayant pas l'option "image" activée

(Dimensions) width=x height=y

Hauteur et largeur (en pixels)

border=x (en pixels)

Bordure

align=top align=middle align=botton align=left align=right

Alignement

 

-  Balise de lien HyperText :   

Les liens hypertextes (ancrages)  permettent aux internautes de naviguer vers une nouvelle adresse lorsque l'on clique dessus. Ils permettent notamment de naviguer :

  • vers un autre endroit du document
  • vers un fichier HTML situé à un emplacement différent sur la machine qui héberge la page
  • vers une autre machine

L'attribut principal des ancrages est href. Il s'écrit sous la forme suivante :

<a href="Adresse ou URL"> nom du lien </a>

Lien externe

Un lien externe est un lien vers une page pointée par son URL
Par exemple :

<a href="http://www.jolo.com">un site</a>
Remarque: pour une image sur le lien on a:

<a href= "#"><IMG SRC="image"></a>

Lien local

On peut créer un lien vers une page située sur le même ordinateur en remplaçant l'URL par le fichier cible.

Ce lien peut être fait de façon relative, en repérant le fichier cible par rapport au fichier source. Si le fichier cible est "page1.html" situé dans le répertoire parent, son lien s'écrira: <a href="../page1.html"> ... </a>

Ce lien peut aussi être défini de façon absolue, en écrivant l'adresse du fichier cible de façon locale:<a href="file:///lecteur:/rep/index.html"> ... </a>

Les signets ou encrage dans la même page web

Point d'ancrage : <A NAME="***">...</A>
*** est le nom de la cible

Lien vers une ancre dans la même page <A HREF="#***">...</A>
Lien vers la cible *** lorsque celle-ci se trouve dans la même page

Attributs de la balise <A>

name="texte"

nomme le lien. Ce nom est unique dans le document.

href="adresse"

spécifie l'emplacement des ressources visées.

hreflang="fr/en/en-us/..."

spécifie la langue des ressources visées.

rel="type de relation"

relation avec d'autres documents

rev="type de relation"

suivi de la liste d'adresse de ressources considérées comme précédentes.

charset="charset"

spécifie l'encodage des caractères des ressources visées.

accesskey, shape, coords, tabindex

sont abordés plus en détails plus loin.

 

III- Insérer un formulaire de données dans une page html

Avant de pouvoir utiliser les différentes sortes de formulaires (ligne de texte, liste déroulante, cases à cocher...), il faut déclarer au browser qu'il devra gérer des formulaires et ce qu'il devra en faire.

<FORM method="post" action="URL d'expédition" >

... les formulaires proprement dit ...

</FORM>

L'attribut "method" vous offre le choix entre get et post. La différence entre ces deux méthodes repose sur la façon dont les données seront transmises au serveur et exploitées par celui-ci.

L'attribut "action" spécifie l'adresse d'expédition des données.

-  La ligne de texte est reconnue par la balise  <input> entre <form> et  </form>  

Elle  n’a pas de balise de fin.

a)  <FORM>
<INPUT type="text" name="nom" size="50">
</FORM>

L'attribut name="nom de la ligne de texte" est quasiment obligatoire

-  Pour la saisie d’un texte dans un formulaire, on utilise la balise: <TEXTAREA>...</TEXTAREA>

Exemple :

<FORM>
<TEXTAREA name="nom" rows=4 cols=40>Valeur par défaut</TEXTAREA>
</FORM>

L'attribut name permet de donner un nom à la zone de texte.
L'attribut rows=x détermine le nombre de lignes de la zone de texte.
L'attribut cols=y détermine le nombre de caractères visibles sur chaque ligne ou si vous préférez le nombre de colonnes.
L'attribut wrap (optionnel) détermine la façon dont les sauts de ligne seront traités lors d'un changement de ligne.

Avec wrap=virtual, les changements de lignes sont effectués automatiquement dans la zone de texte mais le tout sera transmis en une seule ligne.
Avec wrap=physical, les changements de lignes sont effectués automatiquement dans la zone de texte et ceux-ci sont également transmis.
Avec wrap=off, il n'y a aucun changement de ligne.

 

-  Une liste déroulante est reconnue par la balise : <SELECT></SELECT>.

Les éléments de la liste par la balise <option>

Exemple :

 <FORM>
    <SELECT name="nom" size="1">
        <OPTION Value="Lundi">lundi
        <OPTION Value="Mardi">mardi
        <OPTION Value="Mercredi">mercredi
        <OPTION Value="Jeudi">jeudi
        <OPTION Value="Vendredi">vendredi
     </SELECT>
</FORM>

Remarque : la balise </option> est optionnelle.

-  Le bouton option : Les boutons d'option, aussi appelés boutons radio, ont comme particularité qu'une seule option à la fois peut être activée (le "ou" exclusif).

La syntaxe de base est :

b) <FORM>
<INPUT type="radio" name="nom du groupe" value="valeur du bouton">
</FORM>

Exemple :

<FORM>
  <INPUT type= "radio" name="ville" value="Yaoundé"> Yaoundé
  <INPUT type= "radio" name="ville" value="Garoua "> Garoua
 <INPUT type= "radio" name="ville" value="Douala "> Douala
</FORM>

Les attribute de la balise <input>

v    size : taille de la zone de saisie

v    maxlength : taille maximale acceptée

v    type :

 int : saisie de nombres entiers

 float : saisie de nombres décimaux acceptée

 date : saisie de dates

url : saisie d’une adresse internet

password : les caractères saisis ne sont pas visibles et sont remplacés par des astérisques

-  Choix simultanés réalisés :

<FORM>
     <INPUT type="checkbox" name="choix1" value="1"> Pierre
     <INPUT type="checkbox" name="choix2" value="2"> Paul
     <INPUT type="checkbox" name="choix3" value="3"> Pauline
     <INPUT type="checkbox" name="choix4" value="4"> Alain
</FORM>

 

-  Bouton  envoyer et bouton annuler

<FORM>
   <INPUT TYPE="submit" NAME="nom" VALUE="Envoyer">
</FORM>

 

      <FORM>
         <INPUT TYPE="reset" NAME="nom" VALUE="Annuler">
     </FORM>

HTML est un langage de programmation statique. Il ne peut permettre l’interactivité entre l’internaute et les pages actives. Il ne peut gérer les bases de données.



05/11/2011
4 Poster un commentaire

A découvrir aussi


⨯

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 267 autres membres