LE GUIDE DU CODE HTML


HTML, balise, attribut, code et language, tag, tableau, liste, formulaire, lien,...

image
Source code HTML
image



Fotolia


STRUCTURE D'UNE PAGE HTML

La première chose à bien mémoriser est la structure d'une page HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Ma première page HTML</title>
    <--  vous pouvez trouver ici d'autres lignes comme
    les "META Tags" les appels au CSS, JavaScript,... -->
  </head>
  <body>
    <--  Zone d'affichage -->
    Contenu de ma première page 
  </body>
</html>

  • <!DOCTYPE HTML.... : Définition du type de document.
  • <head> .... </head> : Entre ces 2 balises nous retrouverons les "META Tags" les appels au CSS, JavaScript,... Les éléments se trouvant ici ne sont pas visibles dans la partie affichée de notre navigateur !
  • <title> .... </title> : Titre de la page qui sera affiché dans la barre supérieur de votre navigateur.
  • <body> .... </body> : Cette partie contiendra les éléments qui constituerons notre page.
  • Copiez le contenu du tableau si dessous dans votre éditeur et sauver le sous le nom "test.html" par exemple.
    Visionnez le resultat dans votre navigateur et vous aurez le résultat suivant :

    Vue de votre première page HTML

    LES BALISES

    Vous avez sans doute remarqué que les balises sont délimitées par un "<" et ">". Ces signes vont permettre aux navigateurs de reconnaître la présence d'une balise et de l'interpréter.
    Sur les premiers exemples que vous avez vu (<head> .... </head> <title> .... </title> <body> .... </body>), il y chaque fois 2 balises, une ouvrante <BALISE> et la seconde fernante </BALISE>.
    Cette pratique de la balise ouvrante et balise fermante, permet de délimité l'action de cette balise à une zone du document à publier.
    Vous verrez des exceptions à cette règle pour par exemple le retour à la ligne "<br>", pour insérer une image "<img ...>", etc...
    Ci-dessous les constituants d'une balise :
  • "<" : signe de début d'une balise.
  • "BALISE" : Nom de l'élément balise (ex "<b>" : bold ou gras).
  • "Attribut" : Propriété donnée à l'élément balise (ex "width="100"" : largeur de 100 points). Une balise peut avoir plusieurs attributs.
  • ">" : signe de fin d'une balise.
  • La balise fermante comporte le signe "/" devant le nom de la balise et ne reçoit pas d'attribut (ex "</b>").
  • "<-- Commentaire -->" : Vous avez constaté que le texte compris entre "<--" et "-->" n'est pas visible dans le navigateur ! L'usage de ces balises vous permetra de placer des commentaires dans votre page qui ne seront pas visible. Par ce moyen, vous pourrez aussi neutraliser l'affichage d'une partie de votre code de manière temporaire ou définitive.


  • <body>...</body> : Encapsule la partie visible du document.
    alink="#..." : Affecte la propriété couleur aux caractères d'un lien durant un clic.
    La valeur peut-être sous 2 formes :
  • Le nom de la couleur en anglais (ex : red pour rouge)
  • "#RRVVBB" où RR (rouge), VV (vert), BB (bleu) sont remplacés par une valeur hexadécimale comprise entre "00" et "FF"
  • link="#..." : Affecte la propriété couleur par défaut aux caractères de tous les liens du document.
    Voir ci-dessus alink="#..." pour la couleur.
    vlink="#..." : Affecte la propriété couleur aux caractères d'un lien déjà visité.
    Voir ci-dessus alink="#..." pour la couleur.
    text="#..." : Affecte la propriété couleur par défaut aux caractères du document.
    Voir ci-dessus alink="#..." pour la couleur.
    background="..." : Pointe l'adresse d'une image qui servira d'arrière plan au document.
    Voir ci-dessus alink="#..." pour la couleur.
    bgcolor="#..." : Affecte la propriété couleur par défaut au fond de la page.
    Compatibilité : IE Firefox
    Attribut : aucun
    image

    image
    Accueil - Code HTML - Littératures - Liens utils - Sites partenaires - Référencés par... - Contact - Plan du site
    image
      © Copyright 2007© VDC
      Tout droits réservés
      Date de création : 26/12/2007
      Dernière mise à jour : 16/02/2008
         image