Les Bases Du HTML

Les bases du HTML
SOURCE : PCASTUCES.COM
Convention syntaxiques :
Il n’existe pas de langage sans règles et HTML ne fait pas exception à cela. Ces règles
définissent la structure de base de tout document HTML. Elles doivent donc être respectées
en toutes circonstances.
Les documents HTML contiennent des tags, le texte qui détermine la façon dont le contenu
sera affiché. Ces tags seront interprétés par le navigateur qui se charge de l’affichage du
document HTML à l’écran.
Tous les tags HTML sont inclus dans les caractères " < " et " > ". Entre ces 2 caractères, on
place le nom du tag utilisé.
Remarque: Que vous saisissiez le nom du tag en majuscule ou en minuscule n’a aucune
importance.
Il ne faut pas saisir d’espace avant et après le nom du tag. Cela pourrait avoir pour
conséquence la non-prise en compte du tag par le navigateur.
Une situation enclenchée par un tag reste active jusqu’à ce que vous désactiviez le tag.
Pour faire cela, il suffit d’utiliser le même tag que celui de l’activation en ajoutant un slash
"/" avant son nom.
Par exemple si je met devant un texte, tout celui ci s ‘écrit en italique. Si je veux que
seule une partie soit en italique, il suffit d’encadrer le texte à mettre en italique par 
Votre texte à mettre en italique Le texte ici redevient normal.
Remarque : les tags peuvent être imbriqués. Vous pouvez mettre une partie en gras et
italique et un mot de cette partie souligné.
Certains tags n'ont pas besoin de tags de fin. Il s'agit de tags qui ont une action unique tel
le saut du ligne ou l'insertion d'une image.
Pour certains tags, il est nécessaire de spécifier des attributs. Ceux-ci se placent après le
nom du tag mais toujours entre "<" et ">".
Il faut laisser un espace entre le nom du tag et l'attribut.
Caractères spéciaux:
Certains caractères ne peuvent être affichés directement : par exemple les guillemets car
ils sont utilisés dans la syntaxe du HTML. Il existe donc des entités qui codent certains
caractères. Les accents doivent être mis ainsi, car sur une machine non configurée pour la
langue française, les accent ne seront correctement affichés que sous forme d'entités.
Pour consulter la liste des entités, cliquez-ici
Structure générale des pages HTML:
Toutes les pages HTML ont la même structure de base :
<HTML>
<HEAD>
<TITLE>On place ici le titre de la page</TITLE>
</HEAD>
<BODY>
On place ici le contenu effectif de la page ...
</BODY>
</HTML>
Dans l'en-tête, dont la définition commence par le tag <HEAD> et finit par </HEAD>, sont
stockées les informations relatives au document. ( titre, auteur, etc...)
Le contenu effectif de la page Web est placé entre les tags <BODY> et </BODY>. Le tag
</HTML> termine le document HTML.
Mise en forme du texte
1. Style physique
texte : le texte inclus dans le tag ... apparaît en gras

texte : le texte inclus dans le tag ... apparaît en italique
texte : le texte inclus dans le tag ... apparaît souligné
<S>texte</S> : le texte inclus dans le tag <S>...</S> apparaît barré
<BIG>texte</BIG> : le texte inclus dans le tag <BIG>...</BIG> apparaît plus gros que
normalement
texte : le texte inclus dans le tag ... apparaît plus
petit que normalement
texte : le texte inclus dans le tag ... apparaît en indice
texte : le texte inclus dans le tag ... apparaît en exposant
2. Style logique et titre
<H1>texte</H1> : de taille 1 ( maximum )

<H2>texte</H2> : de taille 2
<H6>texte</H6> : de taille 6 ( minimum )
texte Met le texte en valeur
<CODE>texte</CODE> : affiche le texte pour les listings de programme
3. Sauts de ligne
Pour forcer un saut de ligne à un endroit précis, utilisez le tag ( ce tag ne nécessite
pas de tag de fin )
Pour désactiver les sauts de lignes, utilisez le tag texte : Attention, avec
ce tag, le texte risque de déborder de la fenêtre du navigateur.
4. Paragraphes
Les paragraphes sont le meilleur moyen de structurer votre texte. Le début d'un nouveau
paragraphe est matérialisé par le tag ( ce tag crée également un saut de ligne ) et
respecte un espacement vertical plus grand par rapport au texte précédant. Pour fermer le
paragraphe, utilisez le tag qui lui aussi crée automatiquement un saut de ligne.
5. Alignement
La plupart des tags acceptent ALIGN comme attribut. Cet attribut détermine l'alignement
horizontal et vertical du texte.
Pour insérer un texte à droite, il faut utiliser l'attribut ALIGN=RIGHT
Pour insérer un texte à gauche, il faut utiliser l'attribut ALIGN=LEFT
Pour centrer un texte, il faut utiliser l'attribut ALIGN=CENTER
Par exemple pour un paragraphe que l'on veut centrer, on utilisera : 
paragraphe à centrer 
On n'a pas besoin de ressaisir l'attribut d'alignement pour un tag de fin.
Vous pouvez utiliser l'alignement avec les titres, les images, bref, tous les objets.
Remarque:
Pour centrer plusieurs objets en une seule opération, il faut utiliser les tags
<CENTER>....</CENTER>. Tous les objets situés entre ces tags seront centrés :
<CENTER> objets à centrer </CENTER>
6. Taille des caractères
Vous pouvez choisir votre taille de caractère en utilisant le tag <BASEFONT> et son attribut
SIZE ( valeur entre 1 et 7 ). Le tag <BASEFONT> ne nécessite pas de tag de
fermeture. Texte en taille 1
7. Caractères d'un texte
Vous pouvez choisir avec quels jeux de caractères vous voulez que votre page soit écrite. Il
faut pour cela utiliser le tag et son attribut FACE. Vous pouvez également définir
des polices alternatives au cas ou l'ordinateur de l'internaute qui vient voir votre page
n'aurait celle que vous avez choisie.
Voici un exemple d'un texte écrit en arial (attention aux guillemets):
texte en arial
Pour choisir des couleurs alternatives, séparez les par des virgules :
Texte en arial si la police est présente, sinon en

helvética
Avec le tag font, vous pouvez également utiliser l'attribut SIZE. Pour mettre un texte en
taille 2 et en arial :
texte en taille 2 et en arial 
8. Lignes horizontales de séparation
Vous pouvez tracer des lignes de séparations horizontales. Vous pouvez modifier leur
aspect à l'aide d'attribut. Pour tracer une ligne horizontale, il faut utiliser le tag <HR> ( ne
nécessite pas de tag de fermeture. Le tag <HR> possède comme attributs ALIGN, WIDTH,
SIZE, HEIGH. Normalement, les attributs WIDTH et HEIGHT sont exprimés en pixels, mais
il est possible de définir une largeur en pourcentage de la largeur de la feuille. L'attribut
NOSHADE désactive l'effet 3D standard.
9. Image d'arrière plan
L'insertion d'une image d'arrière plan est très facile. Celle ci se définie à l'intérieur du tag
<BODY>. Vous ne pouvez utiliser qu'une seule image par page. L'image est mise en
mosaïque, cela signifie qu'elle se répète à l'infini sur votre page. Les images à utiliser
doivent être au format GIF ou JPG. Pour insérer une image en fond d'écran :
<BODY BACKGROUND="image.jpg"> ou <BODY BACKGROUND="image.gif"
Remarque: Ne pas oublier les guillemets.
10. Couleur du texte
Le tag a un autre attribut : COLOR. Celui-ci permet de définir la couleur des
caractères inclus entre les tags et . L'attribut COLOR doit être affecté
d'un des seize noms de couleurs reconnus ou d'un code RVB ( rouge, vert, bleu ) ( le code
RVB est précédé du signe # )
Voici la liste des couleurs reconnues :
Nom Couleur Nom Couleur

aqua Bleu clair navy Bleu foncé
black Noir olive Vert olive
blue Bleu ciel purple Violet
fuchsy Brun clair red Rouge
gray Gris silver Gris argent
green Vert teal Gris acier
lime Ocre white Blanc
maroon Brun foncé yellow Jaune
11.
Par exemple pour mettre un texte en rouge, vous avez 2 solutions :
Texte en rouge

ou
Texte en rouge 
Remarque: ne pas oublier le #
12. Couleur d'arrière plan
C'est exactement pareil pour la couleur d'arrière plan. Cette couleur est définie par
l'attribut BGCOLOR du tag <BODY>, avec la possibilité de mettre un nom de couleur ou un
code RVB ( avec le # ). La couleur reste la même sur toute la page, on ne peut pas la
changer à la moitié de la page.
<BODY BGCOLOR=RED>
ou
<BODY BGCOLOR=#FF0000>
13. Couleur des liens
Il existe 3 types de liens :
o liens pas encore visités

o liens déjà visités
o Liens actifs ( sur lesquels un clic est en cours )
Les liens pas encore visités sont pris en charge par l'attribut LINK.
Les liens déjà visités sont pris en charge par l'attribut VLINK.
Les liens actifs sont pris en charge par l'attribut ALINK.
Ces attributs font partie du tag <BODY> et acceptent un nom de couleur ou un code RVB.
Exemple :
<BODY BGCOLOR=BLACK LINK=RED ALINK=GREEN VLINK=BLACK>
Dans l'exercice suivant, vous allez devoir essayer de faire exactement pareil que la page
qui s'affichera après avoir cliqué sur Exercice. Un petit peu d'aide : la couleur de fond
utilisée ici est peachpuff. Si vous n'y arrivez pas, cliquez avec le bouton droit de la
souris en sélectionnant la page d'exercice et sélectionnez Afficher le code
source. Si vous avez trouvez, un grand bravo, vous êtes prêt pour la suite. Sinon,
réessayer jusqu'à réussir.
Insérer des images
Vos pages web deviendront plus vivantes avec des images.
1. Quel format d'image choisir ?<BR<
Les temps de transmissions des images est un gros problème. Il faut donc utiliser
des images compressées. Il existe 2 formats d'images très répendu sur Internet :
Les images GIF :
Les images GIF sont composées au maximum de 256 couleurs. La compression est assez
élevée sans perte de qualité. Avec ce format, vous pouvez également faire des images
transparentes ( une couleur fait office de couleur transparente).
Les images JPG :
L'objectif de ce format est de stocker des images de types photo dans des
volumes acceptables.
2. Le tag <IMG>
Après avoir choisi l'image et le format, vous pouvez maintenant l'insérer dans
votre page web. Pour cela, vous utiliserez le tag <IMG>.
Vous indiquerez le nom du fichier graphique ainsi que son chemin d'accès :
<IMG SRC="image.gif">
Ce tag charge donc l'image Image.gif contenu dans le dossier courant, et l'affiche
dans la taille et la résolution originale.
Pour modifier à l'écran la taille de l'image, on dispose des attributs HEIGHT pour la
hauteur et WIDTH pour la largeur :
<IMG SRC="image.gif" WIDTH=70 HEIGHT=70>
L'alignement de l'image est défini comme d'habitude par l'attribut ALIGN. Voici les
valeurs autorisées :
Valeur Type d'alignement

TOP Alignement sur la bordure supérieure de la ligne
MIDDLE Alignement sur le milieu de la ligne
BOTTOM Alignement sur la bordure inférieure de la ligne
TEXTTOP(N) Alignement sur la bordure supérieure du texte
ABSMIDDLE(N) Alignement sur le centre
BASELINE(N) Alignement sur la ligne de base du texte
ABSBOTTOM Alignement sur la bordure inférieure de la ligne
3. Autres Attributs du tag <IMG>
Texte alternatif qui sera affiché par un navigateur ne sachant pas

ALT
afficher l'image. Si l'image ne peut être affichée.
Indique la largeur de la bordure de l'image (par défaut, les
images n'ont pas de bordure ). Si l'image est définie comme lien,
BORDER
elle encadrée par défaut d'une bordure que vous serez obligé de
désactiver par BORDER=0, si elle vous gêne.
L'image est une Image Map (Necessite un script CGI sur le
ISMAP
serveur )
Créer un espace vide à gauche et à droite de l'image.
HSPACE HSPACE=20 met en place un espace vierge de 20 points à
gauche et à droite de l'image.
Créer un espace vide avant et après l'image. VSPACE=20 met en
VSPACE place un espace vierge de 20 points au-dessus et au-dessous de
l'image.
Indique l'unité de mesure utilisée pour les attributs HEIGHT et
UNITS
WIDTH (par défaut, il s'agit du pixel).
USEMAP Fait une image en liaison avec un tag <MAP>
Créer un lien vers une adresse e-mail

Pour créer un lien vers une adresse e-mail dans votre page Web, il suffit d'utiliser le tag classique A
HREF à quelques variantes près.
Tout d'abord, au lieu d'inscrire:
A HREF="http://www.monsiteWeb.com" il faut déclarer que le lien pointe vers une adresse e-
mail.
Pour cela, il suffit d'employer l'attribut:
mailto:login@monsiteweb.com à la place de l'adresse:
http://www.monsiteweb.com.
Voici ce que vous obtiendrez comme tag:
<a href="mailto:webmaster@pcastuces.com">Signaler un bug</a>
Si un Internaute clique sur ce lien, son logiciel de messagerie électronique se lancera et créera un
nouveau message destiné dans cet exemple à webmaster@pcastuces.com.
A noter que si vous le souhaitez, vous pouvez prédéfinir le champs de saisie Sujet de ce message.
Pour cela, il sufit d'ajouter la syntaxe suivante: ?subject=Signaler un bug après l'adresse e-mail
dans le tag A HREF.
Voici le résultat que vous obtiendrez:
<a href="mailto:webmaster@pcastuces.com?subject=Signaler un bug">

Signaler un bug</a>

Les Bases Du HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Les Bases Du HTML

Uploaded by

Copyright:

Available Formats

Les bases du HTML

Il faut laisser un espace entre le nom du tag et l'attribut.

Pour consulter la liste des entités, cliquez-ici

Structure générale des pages HTML:

Toutes les pages HTML ont la même structure de base :

Mise en forme du texte

<B>texte</B> : le texte inclus dans le tag <B>...</B> apparaît en gras

<H1>texte</H1> : de taille 1 ( maximum )

<CENTER> objets à centrer </CENTER>

6. Taille des caractères

<BASEFONT SIZE=1> Texte en taille 1

7. Caractères d'un texte

Voici un exemple d'un texte écrit en arial (attention aux guillemets):

<FONT FACE="Arial">texte en arial</FONT>

<FONT FACE="Arial,Helvetica">Texte en arial si la police est présente, sinon en

<FONT FACE="Arial" SIZE=2 >texte en taille 2 et en arial </FONT>

8. Lignes horizontales de séparation

9. Image d'arrière plan

10. Couleur du texte

Voici la liste des couleurs reconnues :

Nom Couleur Nom Couleur

Par exemple pour mettre un texte en rouge, vous avez 2 solutions :

<FONT COLOR=RED>Texte en rouge</FONT>

Remarque: ne pas oublier le #

12. Couleur d'arrière plan

13. Couleur des liens

Il existe 3 types de liens :

o liens pas encore visités

Insérer des images

Vos pages web deviendront plus vivantes avec des images.

1. Quel format d'image choisir ?<BR<

Les images GIF :

Les images JPG :

Valeur Type d'alignement

3. Autres Attributs du tag <IMG>

Texte alternatif qui sera affiché par un navigateur ne sachant pas

Créer un lien vers une adresse e-mail

<a href="mailto:webmaster@pcastuces.com">Signaler un bug</a>

<a href="mailto:webmaster@pcastuces.com?subject=Signaler un bug">

You might also like