; HTML _HyperText Markup Language
Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out
Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

HTML _HyperText Markup Language

VIEWS: 9 PAGES: 34

  • pg 1
									HTML (HyperText Markup Language)




         Enseignant : Adel Haouas



                   2008-2009
 Plan
 Préambules
 Balises
 Codage des couleurs
 Mise en forme des caractères et des
  paragraphes
 Les listes
 Les liens hyertextes
 Les images
 Les tableaux
 Les formulaires
 CSS
 Javascript
Adel Haouas                             2
 Préambules
HTML est un langage de “structuration de
 documents”
Description de contenus par des éléments
 de formatage
   mettre en forme du texte, des images, du
    sons, etc.
   destinés à être visualisés grâce à un
    navigateur (IE, Opera, Firefox, …)
Liens hypertextuels (références internes
 et externes)
Variante (sous-classe) de SGML
  SGML (Standard Generalized Markup Language) conforme au standard ISO 8879. Ce langage de technique documentaire est très complexe. De
  plus, c'est un langage de structuration de l'information et non un langage de présentation. Or les premières versions du HTML s'éloignent de cet
  aspect de structuration pour tendre vers celle de présentation. En ce sens HTML n'est donc qu'une application abâtardie du SGML


Adel Haouas                                                                                                                                     3
 Conventions d'écriture
Une page HTML est un fichier ASCII : si
 elle est tapée avec un traitement de texte
 (ex : Word), il faut l'enregistrer en texte
 seul.
Il faut que le fichier soit le moins lourd
 possible : il faut donc éviter les retours à
 la ligne et les espacements inutiles. Par
 contre, il vaut mieux indenter ses lignes
 pour faciliter la maintenance.
Un commentaire s'écrit entre <!-- et -->.



Adel Haouas                                     4
 Balises
 HTML utilise des marques - ou balises - pour
  spécifier la façon dont un élément doit apparaître,
  pour afficher des images ou définir des actions.
 Ces marques sont toujours placées entre les
  signes “<” et “>” et agissent très souvent par
  paire : la première spécifie le début d’application
  du style (ou de l’action), la seconde, qui
  comporte le signe “/”, marque la fin d’application
  du style (ou de l’action).
    <b> : gras
    <u> : souligné
    <p> : nouveau paragraphe
    <br> : nouvelle ligne

Adel Haouas                                         5
 Exemple HTML

               <html>
               <head>
Entête de la
   page




                <title>Titre de la page</title>
               </head>
               <body bgcolor="GhostWhite">
                <p>un premier paragraph</p>
à afficher
Contenu




                <b>un texte en gras</b>
               </body>
               </html>

Adel Haouas                                       6
 Codage des couleurs
 Le codage des couleurs en HTML s'appuie sur le
  modèle RVB (Rouge - Vert - Bleu)
 Chaque couleur affichée est décomposable en 3
  couleurs de base, dont la valeur peut varier entre
  0 et 255
 (0,0,0) correspond à la couloir noire
 (255,255,255) correspond à la couloir blanche
 Les couleurs dans une page HTML s'écrivent
  toujours sous la forme #RRVVBB
 Exemples :
    Rouge : #FF0000
    Vert : #008000
    DarkBlue : #00008B
Adel Haouas                                        7
 Les couleurs nommées (Named colors)




Adel Haouas                            8
 Caractères spéciaux
Certains caractères ont une signification
 spécifique dans HTML. Pour les utiliser
 comme tels dans une page, il faut utiliser
 les commandes alternatives pour les
 afficher correctement à l'écran. Ces
 commandes sont :
              • &lt; pour: <
              • &gt; pour: >
              • &amp; pour: &
              • &quot; pour: "




Adel Haouas                                   9
 L’entête <head> </head>
Contient des données descriptives ou
 "informatives" sur la page
Est placé immédiatement après la balise
 <HTML>
Elle englobe plusieurs autres balises
 comme:
   <TITLE>…</TITLE> : spécifie le titre de la page qui
    sera affiché en en haut de la fenêtre du navigateur
   <META> :
              • permettent de bien référencer la page sur les moteurs de recherche (Keywords,
                Description)
              • Passer à une autre page (refresh)
              • Spécifier le type d’encodage (charset)
              • Etc.
Adel Haouas                                                                                     10
 L’entête <head> </head> (suite)
 <meta http-equiv="refresh" content="n;url=adresse de page">
  Permet de basculer vers une page web (interne ou externe) après un
  certain nombre de seconde (n).

 <meta name="author" content="nom">
  Permet de spécifier le nom de l’auteur de la page. S’il y a plusieurs noms,
  il faut les séparer par des virgules.

 <meta name="expires" content="date">
  Indique la date après laquelle la page expire et doit être chargée du
  serveur d’origine directement.

 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
     Définit la table de caractères à utiliser. Par défaut c'est la table de
     caractères occidentale (text/html; charset=iso-8859-1) qui sera utilisée.
     « Charset=windows-1256 » correspond à la table de caractères arabe.




Adel Haouas                                                                      11
 Le corps : <BODY> </BODY>
Permet de définir l'apparence du fond de
 l'écran et la couleur des éléments
 textuels.
      <body bgcolor="beige" text="#rrvvbb">

Une seule balise body par page
Placée immédiatement après la balise
 </HEAD>
</BODY> est placé immédiatement avant
 la balise </HTML>




Adel Haouas                                   12
 Mise en forme des caractères
<b></b> : gras
<strong></strong> : gras
<i></i> : italique
<em></em> : italique
<u></u> : souligné
<font face="police1[,police2,…]"
 size="s|+s|-s" color="#rrvvbb"></font>
 face: liste des polices de caractères à
 utiliser
 size: taille du texte. s Є [1,7]
 color: colour du texte

Adel Haouas                                13
 Mise en forme des paragraphes
<center> </center> : centrer le
 paragraphe
<br> : retour à la ligne
<p align="left|center|right|justify">
 </p> : aligner le paragraphe
<p align="center"></p> équivaut à
 <center></center>
<p></p> équivaut à <BR><BR>




Adel Haouas                              14
 Les listes
Il y a deux types de listes:
   Liste ordonnée




              • L’attribut type peut être: 1, A, a, I et i
              • Par défaut, il est égal à 1
              • Chaque élément de la liste est précédé par la balise <li>
              • pour démarrer la liste à une valeur spécifique autre que 1, utiliser l‘attribut
                START=nombre de départ



Adel Haouas                                                                                       15
 Les listes (suite)
Il y a deux types de listes:
   Liste non ordonnée




              • L’attribut type peut être: disc, circle et Square
              • Par défaut, il est égal à disc
              • Chaque élément de la liste est précédé par la balise <li>



Adel Haouas                                                                 16
 Création de lignes horizontales
 <hr size="s"
      width="w|w%"
      align="left|center|right"
      color="#rrvvbb" (! option valable avec internet
  explorer)
      noshade (! option valable avec netscape navigator)>
         SIZE : épaisseur en pixel de la ligne
         WIDTH : largeur de la ligne. Peut s'exprimer en valeur absolue (pixels) ou relative (en pourcentage de la
          largeur de la fenêtre)
         ALIGN : alignement à gauche|au centre|à droite dans la fenêtre (à utiliser si la ligne ne fait pas toute la
          largeur de la fenêtre)
         COLOR : couleur de la ligne
         NOSHADE : désactivation de l'ombrage de la ligne
 <hr> seul affiche une ligne grise ombrée de 1 pixel
  d'épaisseur faisant toute la largeur de la fenêtre




Adel Haouas                                                                                                         17
 <pre></pre>
Affiche le texte comme il a été entré,
 espaces et retours à la ligne compris.




Adel Haouas                               18
 Les liens hypertextes
C'est un élément graphique ou textuel
 d'une page web qui sous l'action d'un clic
 de souris commande le chargement d'une
 autre page dans le navigateur.

La balise utilisée est : <a></a>
Syntaxe:
     <a href="adresse_destination">texte_ou_image_à_cliquer</a>

Exemples:
       <a href="actualites.html">Actualités</a>
       <a href="html/intro.php" target="_blank"><img src="images/a1.gif"></a>
       <a href="mailto:info@site.com?subject=un_sujet">nous contacter </a> est un
        lien courrier. Quand on clique dessus, une fenêtre de mail dont le destinataire est
        info@site.com et le sujet est un_sujet s'ouvre.
Adel Haouas                                                                              19
 Les liens internes (anchors)
Un lien interne est un lien qui amène à un
 endroit spécifique de la page HTML en
 cours
 Il se construit en deux temps :
       mise en place d'une étiquette à l'emplacement à atteindre avec la balise :
        <A NAME="nom de l'étiquette"> … </A>
       appel du lien de manière classique, mais où l'adresse de la page à atteindre est
        remplacée par le nom de l'étiquette précédée d'un #
        <A HREF="#nom de l'étiquette"> … </A>
 NB : il est possible d'atteindre un emplacement spécifique
  d'une page différente de celle où a lieu l'appel de lien, c'est
  à dire de combiner les liens externes et internes, en faisant
  suivre le nom du fichier HTML par un # et le nom de
  l'étiquette
      <a href="html/livres.html#redhat"><img src="images/redhat.gif"></a>



Adel Haouas                                                                                20
 Les images
 <img src="nom du fichier" width="w|w%"
  height="h|h%" alt="texte" border="b">
       Insertion du fichier image spécifié en SRC. Utiliser le nom complet. On peut
        utiliser le chemin relatif ou absolu. Il est fortement recommandé de travailler avec
        le chemin relatif.
       WIDTH : largeur de l'image affichée. Si cette option n'est pas spécifiée, l'image
        est affichée à sa taille réelle. On indique soit la valeur en pixel, soit en
        pourcentage de la taille originale de l'image
       HEIGHT : hauteur de l'image affichée. Mêmes remarques que pour WIDTH
              • NB : quand une seule des deux options WIDTH ou HEIGHT est spécifiée, l'autre est
                automatiquement calculée en proportion.
              • NB2 : toujours indiquer au moins un des deux paramètres pour accélérer l'affichage
       ALT : texte apparaissant dans une info-bulle quand la souris est positionnée
        pendant 1 à 2 secondes sur l'image
       BORDER : taille en pixel de la bordure autour de l'image.




Adel Haouas                                                                                          21
 Les tableaux
 Il existe 2 grands types d’utilisation des tableaux:
    présentation de données
    mise en page
 Les tableaux sont très pratiques pour faire de la
  mise en page notamment parce qu’ils permettent
  d’aligner correctement des images, des textes
 Les cases du tableau sont appelées cellules
 Une cellule peut contenir du texte, une image, un
  sous-tableau, …
 Toutes les cellules d’une même ligne auront la
  taille de la cellule ayant le plus grand contenu.



Adel Haouas                                          22
 Les tableaux (suite)
 <table>...</table> : crée un tableau
 Attributs :
    align=”center” ou ”left” ou ”right”
    border=”n”, n : nombre de pixels pour l’épaisseur du cadre
    cellpadding = nombre de pixels entre le bord des cellules et
     leurs contenus
    cellspacing = nombre de pixels entre les bords des cellules
    bgcolor pour définir la couleur de fond
    width, height
 Exemple :
     <table border=”2” cellpadding=”3” align=”center” width=”90%”>
      ...
     </table>



Adel Haouas                                                          23
 Les tableaux (suite)
<tr>. . . </tr> crée une nouvelle ligne
 dans un tableau
Attributs :
  align pour un alignement horizontal des
   cellules(”left”, ”center”, ”right”)
  valign pour un alignement vertical des
   cellules(”top”, ”middle”, ”bottom”)
  bgcolor pour définir la couleur de fond de la ligne




Adel Haouas                                              24
 Les tableaux (suite)
 <td>. . . </td> : Crée une nouvelle cellule dans un tableau.
 Une balise <td> est toujours comprise entre des balises
  <tr> et </tr>
 Attributs :
    align pour un alignement horizontal dans la cellule (”left”, ”center”, ”right”)
    valign pour un alignement vertical dans la cellule (”top”, ”middle”,
     ”bottom”)
    bgcolor pour définir la couleur de fond
    colspan pour fusionner plusieurs cellules d’une même ligne (ex :
     colspan=”2”)
    rowspan pour fusionner plusieurs cellules d’une même colonne (ex :
     rowspan=”6”)
    width pour donner la largeur de la cellule
    height pour donner la hauteur de la cellule
 Exemple :
     <td align=”center” valign=”bottom” width=”100” bgcolor=”white”>Contenu</td>

Adel Haouas                                                                        25
 Les tableaux (suite)
 <caption>...</caption> pour mettre une légende au
  tableau

 Si une cellule sur une ligne est vide, y mettre quand même
  un espace insécable (&nbsp;)

 Exemple de tableau:
                         4.0 Transitional




Adel Haouas                                                    26
 Les formulaires
Un formulaire est une fiche que
 l'utilisateur peut remplir, ces informations
 ainsi saisies sont traitées par le serveur
déclaration d’un formulaire




method : get ou post



Adel Haouas                                     27
 Champ de saisie de texte
 Les attributs:
    size longueur de la zone du texte
    maxlength nombre de caractères maximal autorisé
    name identification
    value pour inscrire un texte dans le champ
    type type du contrôle:
              • type=text




              • type=password




              • type=hidden


Adel Haouas                                            28
 Cases à cocher
Les attributs:
   name identification
   value pour spécifier la valeur à envoyer, par défaut
    la valeur on est envoyée
   checked positionne par défaut le bouton en mode
    validé




Adel Haouas                                                29
 Les boutons radio
Les attributs:
   name pour nommer un groupe de boutons (il faut
    donner le même nom à tous les boutons radio du
    même groupe pour qu'ils soient exclusifs)
   value pour spécifier la valeur à envoyer
   checked positionne par défaut le bouton en mode
    validé




Adel Haouas                                           30
 Sélecteur de fichier
Permet l’envoi d’un fichier du client vers le
 serveur
NB : le type d'encodage du formulaire doit
 être : multipart/form-data




Adel Haouas                                  31
 <textarea></textarea>
 Les attributs:
    name nom de la donnée
    rows nombre de lignes
    cols nombre de caractères pour une ligne
    wrap passage à la ligne automatique dans le champ de
     saisie :
              • off : pas activé
              • virtual : affiche le passage à la ligne mais n'envoie pas les retour à la
                ligne au serveur
              • physical : affiche et transmet les retour à la ligne




Adel Haouas                                                                             32
 Liste de choix / menu déroulant
 Les attributs de l'élément <SELECT>:
    name nom de la donnée
    size nombre de lignes affichées pour une liste multiple
    multiple autorise la sélection simultanée de plusieurs items
     de la liste
 Les attributs de l'élément <OPTION>
    value définit la valeur passée au script
    selected pré-sélection d’un élément de la liste ou valeur par
     défaut du menu
       width largeur du menu en pixels




Adel Haouas                                                      33
Adel Haouas   34

								
To top