ABCSITE

INFORMATIQUE

  
 

Ma première page HTML 

 

 

Généralités sur HTML

HTML : signifie HyperText Markup Language, c'est le langage qui a permis le développement du web et qui reste encore à la base de la majorité des pages publiées malgré que certaines techniques sont venues palier ses insuffisances. Ses caractéristiques sont:

    • un fichier HTML est un texte ASCII , à l'intérieur duquel se trouvent des balises
    • HTML : langage servant à décrire les pages Web et les documents hypertextes
    • Un document HTML est composé de texte et de commandes (tag en anglais). Ces commandes permettent la mise en forme du texte (Titre, image, liens, etc...).
    • HTML: c’est un langage de définition de Documents qui repose sur le protocole HTTP.
    • Ce n’est pas un Langage de Programmation.
    • C'est un langage universel, il est utilisé par tous les Navigateurs.
    • Notons que toute instruction commence par la balise ou tags (en anglais) de début < > et </ > et se termine par la balise de fin. Certaines marques de fin sont facultatives

Un document HTML doit être entouré de marqueurs <HTML> et </HTML>. Le document lui-même est composé de deux parties : l’en tête et le corps.

  · L’en tête est délimité par les marqueurs <HEAD> et </HEAD>. Il est destiné à stocker des informations générales qui concernent le document: auteur, mots-clés, titre de la page, date de création ... .

Ces informations n’apparaissent pas dans le navigateur.

L’en tête contient également les balises <title> et </title>servent à définir le titre du document. Ce titre est affiché dans la barre de titre  du navigateur "browsers", il est souvent utilisé par les "search robots" pour indexer votre page ou pour l'insertion dans les favoris.

  · Le corps du document est délimité par les marqueurs <BODY> et </BODY>. Il contient le texte et toutes les informations qui constituent la partie visible du document (affichés dans le navigateur). 

Voici, à titre d’exemple, le code minimal d’une page HTML. Cette page se contente d’afficher un texte dans la barre de titre du navigateur et un autre texte dans sa zone de travail :

Le premier fichier HTML

<html>
 <head>
  <title>Ma première page web</title>
 </head>
 <body>
  Bonjour tout le monde.
 </body>
</html>

Explication:
  • <html> et </html> Ces balises sont écrites en minuscules ou en majuscules et permettent de définir le type de document HTML.
  • <head> et </head> Ces balises délimitent l'entête du document 
  • <title> et </title> Cette commande contient le titre du document HTML
  • <body> et </body> Ces balises délimitent le corps du fichier et contient le texte qui constitue la partie visible du document.
1- Les commentaires:

Pour insérer un commentaire sans le voir sur votre page html, il suffit de mettre le texte entre les balises sous la forme: <!-- commentaire -->

2- Les Titres:

Il existe 6 niveaux de titre (Headlines) dans HTML.

Un retour à la ligne se fait automatiquement après un titre.

Syntaxe: <Hn></Hn> où n est compris entre 1 et 6 (H1 est le plus grand titre et H6 est le plus petit). Exemples

<H1>Titre 1</H1>

<H6>Titre de niveau 6</H6>
Cette balise peut être utilisé avec le seul attribut ALIGN qui permet de spécifier l’alignement horizontal d’un titre, dont la valeur peut être: ALIGN="LEFT ou CENTER ou RIGHT"

3- les Textes: Ces tags permettant de définir des attributs pour les textes de vos Pages :

    <i>Texte en Italique</i>
    <b>Texte en Gras</b>       Bold en anglais..
    <u>Texte souligné</u>      Underline en anglais..
    <sub>Texte indicé</sub>
    <sup>Texte en exposant</sup>
    <small>Texte en petite Police</small>
    <big>Texte en grande Police</big>
    <strike>Texte Rayé</strike>

    <font size=n> Les valeur de la taille de police (size) vont de 1 à 7;. 3 est la valeur par défaut.

     <font size= -1 > permet de définir la taille de Police en relatif par rapport à la taille par défaut ( 3 ).

4- Paragraphes

A. Paragraphe

Pour définir un nouveau paragraphe, on utilise les balises <p> ... </p> qui  produit un double retour de ligne. Le paramètre ALIGN sert à spécifier l’alignement horizontal du paragraphe:

Syntaxe: align="left ou center ou right"

B. Paragraphe en retrait

Pour décaler paragraphe vers la droite, on utilise les balises <blockquote> ... </blockquote>

C. Paragraphe préformaté

Pour afficher du texte avec un caractère non proportionnel ("monospaced font"), on utilise la balise <pre> ... </pre>,. Un "w" occupera la même place qu’un "i".

D. Adresse et signature

Pour donner des indications relatives à l’auteur, à la date de la création et à la version du document, on utilise  <address> ... </address>

E. La balise <div>

  le Tag <div>  </div> permet de regrouper et d' aligner des éléments, on peut associer des attributs communs aux éléments contenus entres ces balises.

 

F. Mots et caractères: voir le paragraphe consacré à ceci

5-Listes à puces:

a- Listes à puces: Ces balises <ul> et </ul> permettent de définir des listes à puces. Chaque ligne sera déclarée par la balise <li>. exemple : 

<ul>
<li> Lundi
<li> Mardi
</ul>		 Ce qui donne:
  • Lundi
  • Mardi
<ul TYPE="square"> { fait apparaître un carré }
<ul TYPE="circle"> { fait apparaître un cercle }

b- Les listes ordonnées: Ces balises <ol> et </ol> permettent de définir des listes  numérotées. Chaque ligne sera déclarée par la balise <li>. exemple : 
<ol>
<li> Lundi
<li> Mardi
</ol>
  1. Lundi
  2. Mardi
<ol TYPE="a"> { a b c d... }
<ol TYPE="A"> { A B C D... }
<ol TYPE="i"> { i ii iii iv... }
<ol TYPE="I"> { I II III IV... }

6- Séparateurs et ligne de séparation horizontale:

a- Retour de ligne

La balise  <br> permet d'effectuer un simple retour de ligne ( Il n’est pas utile de fermer par </br>) , elle admet comme paramètre: clear ="left ou right ou all"qui force l’alignement du texte. 

Si l’on veut ne pas les forcer on utilisera la balise : <NOBR>

b- Retour de ligne

Le marqueur  <hr> permet d' insérer une ligne horizontale de séparation, pas de balise de fermeture.

exemple  : <HR WIDTH=70% SIZE=3 COLOR="#ff00cc">

Voici les paramètres de <hr>:

 

Syntaxe 

Exemples

commentaire

size

size=n

<hr size=5> 5 

permet de spécifier l’épaisseur de la ligne horizontale en pixels. 

width

width=n

<hr width=50> <hr width=50%>

permet de spécifier la largeur de la ligne horizontale, soit en pixels, soit en pourcentage de la largeur de la fenêtre.

align

align="left ou center ou right"

<hr aligh="center">

spécifie l’alignement de la barre

noshade

 noshade

<hr noshade> 

permet d'obtenir une ligne pleine sans ombrage. 

7- Les couleurs

Pour embellir une page web  on utilise des couleurs, certaines balises peuvent être accompagnées d'attributs associées à des couleurs. Ces couleurs sont codées en hexadécimal par une suite de 3 nombres représentant les valeurs du rouge, du vert et du bleu. Exemple : <body bgcolor="#0000FF" text="#FFFFFF">

Il est aussi possible d'utiliser certains noms de couleurs : aqua, black, blue, fuchsia, ....
Exemple : <body bgcolor="#white" text="yellow">

  #ffffff   #ccccff   #ffccff   #ffcccc   #ffffcc   #ccffcc
  #999999   #0000ff   #ff00ff   #ff0000   #ffff00   #00ff00
  #000000   #000099   #990099   #990000   #999900   #009900
 
aqua bleu clair black noir blue bleu fucshia lilas
gray gris green vert lime vert clair maroon marron
navy bleu marine olive kaki purple pourpre red rouge
silver argenté teal cyan foncé white blanc yellow jaune
 

8- URL (Uniform Resource Locator).

  URL: c'est le moyen d'identifier un objet dans le monde WWW. La syntaxe utilisée est:   type:serveur:port/chemin_d'acces/fichier#etiquette?parametres

Le type de serveur :

http : pour les URL provenant de serveurs WWW
gopher : pour les serveurs GOPHER
ftp : pour les fichiers à transférer
telnet : pour ouvrir une session interactive
wais : pour interroger une base WAIS
news : pour accéder aux forums
  
 

ABCSITE © copyright 2002