Basic H T M L Langage

1.
PRSENTATION
HTML, langage, langage de marquage hypertexte (HyperText Markup Language en anglais), constituant le langage de base du Web (World Wide Web). Il a t dvelopp par Tim Berners-Lee dans le Laboratoire europen de physique des particules (CERN)
2. LES BALISES DE MARQUAGE

Le langage HTML est un langage de marquage qui ne connat que lalphabet ASCII standard, limit 128 caractres. Le marquage, ralis par des balises (Donc le langage Html est un ensemble de balises), dcrit la structure logique du document et est interprt par les logiciels de navigation (navigateurs ou browsers) lors de laffichage. Les balises attaches une portion de texte dterminent le style dans lequel ce texte sera transcrit. Une balise est constitue de caractres encadrs de chevrons (< ; >). Lutilisation dune balise ncessite lemploi dun marqueur initial (par exemple <B>) et dun marqueur terminal (par exemple </B>). Le premier indique le commencement de la mise en forme et le second la fin de cette mise en forme. Les marqueurs initiaux et terminaux sont souvent appels, respectivement, balises et contre-balises. Il existe ainsi de nombreuses balises, dont le fonctionnement est identique. Elles sont regroupes en trois catgories : Les balises contenant les mta-informations sur le document, Les balises de mise en forme du texte Les balises de liens. Remarque : ASCII (American Standard Code for Information Interchange ) : Schma de codage standard de caractres un octet utilis pour les donnes base de texte. ASCII utilise des combinaisons de nombres 7 bits ou 8 bits dsigns pour reprsenter 128 ou 256 caractres possibles.
3- Le document Html minimum

Voici vos premires balises ou tags :
<HTML> </HTML> <HEAD> Ceci est le dbut d'un document de type HTML. Ceci est la fin d'un document de type HTML. Ceci est le dbut de la zone d'en-tte. (Prologue au document proprement dit contenant des informations destines au browser) Ceci est la fin de la zone d'en-tte. Ceci est le dbut du titre de la page. Ceci est la fin du titre de la page. Ceci est le dbut du document proprement dit. Ceci est la fin du document proprement dit.
</HEAD> <TITLE> </TITLE> <BODY> </BODY>
Exercice 1: Ouvrir l'diteur de texte

<HTML> <HEAD> <TITLE> DOCUMENT HTML MINIMUM </TITLE> </HEAD> <BODY> Salut </BODY> </HTML>
4- Le Texte
Tout document Html contiendra en majorit du texte. Voyons comment l'agrmenter par quelques balises lmentaires. Dbut et fin d'une zone en gras [Italic] Italique <I>...</I> Dbut et fin d'une zone en italique [Font size] <FONT SIZE=?> ... </FONT> Dbut et fin d'une Taille de caractre zone avec cette taille [Font color] <FONT COLOR="#$$$$$$"> Dbut et fin d'une Couleur de caractre ... </FONT> zone en couleur [Line break] <BR> A la ligne Aller la ligne Ne pas afficher Commentaires [Comments]  [Center] Centrage <CENTER> ... </CENTER> Centrer Gras [Bold] <B>...</B>
Exercice 2: Ouvrir l'diteur de texte

<HTML> <HEAD><TITLE> </TITLE></HEAD> <BODY>texte simple<BR> <B>texte en gras</B><BR> <I>texte en italique</I><BR> <B><I>texte en gras et en italique</I></B><BR> <FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en bleu</FONT>  </BODY> </HTML>
les codes de quelques couleurs basiques

Bleu Rouge Vert Jaune #0000FF #FF0000 #00FF00 #FFFF00 Blanc Gris clair Violet Noir #FFFFFF #C0C0C0 #8000FF #000000
5- Les titres et listes

Tout document d'une certaine consistance se doit de prsenter, par exemple dans la table des matires, les diffrents niveaux de son expos. Html a dispos ds son origine d'outils spcialement conus cet effet. En-ttes Liste non-ordonne Liste ordonne Elment de liste Paragraphe [Heading] [Bullet list] [Numbered list] [List items] [Paragraph] <Hn></Hn> avec n=1 6 <UL></UL> <OL></OL> <LI> <P></P> Afficher une en-tte de niveau n et sauter une ligne Afficher le texte sous forme d'une liste non-ordonne. Afficher le texte sous forme d'une liste ordonne. Voici un lment de la liste Saut de ligne, insrer une ligne vierge et commencer un paragraphe
Exercice 3
<H1>Les mois du printemps</H1> <UL><LI>avril <LI>mai <LI>juin</UL> <P> <H3>Les mois d'automne</H3> <OL><LI>octobre <LI>novembre <LI>décembre</OL>
Quelques commentaires s'imposent;

1. é est l'un de ces caractres spciaux utiliss pour reprsenter le . Les diteurs Html vous dchargeront de cette corve. 2. Les paragraphes et les en-ttes peuvent s'aligner gauche, au centre ou droite. <H1 align=left></H1> <P align=left></P> <H1 align=center></H1> <P align=center></P> <H1 align=right></H1> <P align=right></P> 3. Les listes peuvent s'imbriquer: <H4>Les 12 mois</H4> <UL><LI>Les mois du printemps <OL><LI>avril </OL></UL>
Les arrire-plans
Le langage Html permet d'agrmenter la prsentation du document d'un arrire-plan [background] color ou compos d'une image. Couleur d'arrire-plan On fait un essai... <BODY BGCOLOR="#000088"> <H1 align="center">Bonjour</H1> </BODY> <BODY BGCOLOR="#$$$$$$">
Couleur de texte Couleur de lien Lien visit Lien actif Reprenons notre exemple;
<BODY TEXT="#$$$$$$"> <BODY LINK="#$$$$$$> <BODY VLINK="#$$$$$$> <BODY ALINK="#$$$$$$>
<BODY BGCOLOR="#000088" TEXT="#FFFF00'> <H1 align="center">Bonjour</H1> </BODY>
Texture d'arrire-plan
<BODY BACKGROUND="Adresse"
Voici une image qui peut servir de fond un document.
Ce qui peut nous donner : <BODY BACKGROUND="PAPER.gif"> <H1>Bonjour</H1> </BODY>
Les frames ou les cadres

Pour diviser l'cran en plusieurs fentres, les balises sont peu nombreuses : Zone avec des fentres <FRAMESET> </FRAMESET> Agencement des <FRAMESET ROWS="..."> fentres <FRAMESET COLS="..."> Pour obtenir un agencement ainsi : Dbut de zone avec des fentres Fin de zone avec des fentres Fentres horizontales Fentres verticales
<HTML> <HEAD></HEAD> <FRAMESET ROWS="30%,70%"> <FRAME> <FRAME> </FRAMESET> </HTML>
Attention! <FRAMESET></FRAMESET> remplace <BODY></BODY>
L'attribut ROWS="hauteur1,hauteur2,...,hauteurN" dfinit la hauteur des diffrentes fentres en cas de division horizontale. Le mme pour un agencement vertical <FRAMESET COLS="30%,70%"> <FRAME> <FRAME> </FRAMESET>
L'attribut COLS="largeur1,largeur2,...,largeurN" dfinit la largeur des diffrentes fentres en cas de division verticale
On peut mlanger les deux : <FRAMESET ROWS="30%,70%"> <FRAME> <FRAMESET COLS="30%,70%"> <FRAME> <FRAME> </FRAMESET> </FRAMESET>
On va maintenant remplir ces frames par des attributs de la balise <FRAME>. SRC="URL" adresse du document afficher dans la fentre
On construit 3 fichiers Html lmentaires que l'on place dans le mme rpertoire que le fichier de frames. A.html <HTML><BODY> <H4>A</H4> </BODY></HTML> B.html <HTML><BODY> <H1>B</H1> </BODY></HTML> C.html <HTML><BODY> <H1>C</H1> </BODY></HTML>
On reprend le fichier de frame prcdent que l'on complte. <FRAMESET ROWS="30%,70%"> <FRAME SRC="A.html"> <FRAMEST COLS="30%,70%"> <FRAME SRC="B.html"> <FRAME SRC="C.html"> </FRAMESET></FRAMESET>
Remarques: Pour enlever l'espace entre les cadres la balise devient alors par exemple : <FRAMESET COLS="30%,70%" border=0 frameborder=no framespacing=0> Les ascenseurs, comme la fentre A, apparaissent automatiquement. Par l'attribut de la balise <FRAME> SCROLLING="yes/no/auto" vous pouvez indiquer si la fentre doit ou non possder une barre de dfilement
Les liens
Vous permet en cliquant sur un mot, gnralement soulign (ou une image) de vous transporter;
o o o
vers un autre endroit du document. vers un autre fichier Html situ sur votre ordinateur. vers un autre ordinateur situ sur le Web.
La syntaxe de ces liens entre plusieurs pages, est simple mais entranera de nombreux commentaires : <A HREF="URL ou Adresse">...</A>
Lien externe
Tout ordinateur situ sur le rseau Internet possde une adresse ou une URL [Universal Ressource Locator]. Les adresses du type : http://serveur/chemin.../fichier pour le Web ftp://serveur/chemin.../fichier pour le tlchargement mailto:utilisateur@hte pour le courrier lectronique
Lien local
Nous entendons par l un lien vers un fichier situ dans le rpertoire de votre site. L'adresse du lien sera alors tout simplement fichier.htm
Lien mixte
Nous entendons par l un lien vers un fichier situ un autre endroit de votre ordinateur (et donc non situ dans le rpertoire de votre site). L'adresse prendra la forme file:///lecteur:/rpertoire/fichier.htm (en adressage absolu). ../../../fichier.htm (en adressage relatif).
Exercice : nous allons crer deux fichiers Html

le fichier 1.htm: <A HREF="2.HTML>Aller vers le document 2</A> le fichier 2.htm: <A HREF="1.HTML">Retour au document 1</A>
Remarques: Des liens peuvent aussi pointer vers un endroit prcis du mme document ou d'un autre fichier. C'est ce qu'on appelle les ancres, ancrages, signets ou pointeurs [Anchor]. Point d'ancrage <A NAME="***">...</A> Lien vers une ancre <A HREF="#***">...</A> dans la mme page Lien vers une ancre <A HREF="URL#***">...</A> dans une autre page Ceci est une cible Lien vers la cible *** dans la mme page Lien vers la cible *** dans une autre page
Pour dfinir par exemple le mot Dbut comme un point d'ancrage. <A NAME="exemple">... Dbut ...</A> Le code du lien sera : <A HREF="#exemple"> Revenir au dbut </A>
Les images
Le code Html est : <IMG SRC="Adresse de l'image"> Afficher l'image qui se trouve l'adresse... La balise image possde de nombreux attributs. Dimensions Bordure Alignement width=? height=? border=? align=top align=middle align=botton align=left align=right Hauteur et largeur (en pixels) (en pixels)
L'attribut Align L'attribut align positionne l'image par rapport au texte : <IMG SRC="HELP.gif" align=TOP>Fichier d'aide <IMG SRC="HELP.gif" align=CENTER>Fichier d'aide <IMG SRC="HELP.gif" align=BOTTOM>Fichier d'aide
Lien sur image
En cliquant sur l'image, vous ouvrirez un fichier nomm "MaVille". Les balises sont : <A HREF="ABC.htm"><IMG SRC="image0001.jpeg"></A> Remarquons que les images cliquables sont par dfaut entoures d'une bordure. Pour enlever cette bordure, il suffit d'ajouter l'attribut border=0.
Les tableaux
Un tableau est compos de lignes et de colonnes qui forment les cellules du tableau. Les balises de base sont donc Dfinition du tableau [Table] <TABLE></TABLE> Dbut et fin de tableau Dfinition d'une ligne [Table Row] <TR></TR> Dbut et fin de ligne Dbut et fin de cellule Dfinition d'une cellule [Table Data] <TD></TD> Un tableau deux lignes et deux colonnes, et donc quatre cellules se reprsente comme suit : <TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>
Si vous souhaitez y adjoindre des bordures : Bordure de cadre [Border] <TABLE border=?></TABLE>
<TABLE border=2> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>
Il y a encore trois lments (dfinis par dfaut mais modifiables) : L'espace entre les cellules ou l'paisseur des lignes du quadrillage L'enrobage des cellules ou l'espace entre le bord et le contenu La largeur de la table <TABLE cellspacing=?> <TABLE cellpadding=?> <TABLE width=?> <TABLE width=%>
Construisons un exemple : <TABLE border=2 cellspacing=10> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>
<TABLE border=2 cellpadding=10> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>

Basic H T M L Langage

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Basic H T M L Langage

Transféré par

Droits d'auteur :

Formats disponibles

1.

2. LES BALISES DE MARQUAGE

3- Le document Html minimum

</HEAD> <TITLE> </TITLE> <BODY> </BODY>

Exercice 1: Ouvrir l'diteur de texte

Exercice 2: Ouvrir l'diteur de texte

les codes de quelques couleurs basiques

5- Les titres et listes

Quelques commentaires s'imposent;

<BODY TEXT="#$$$$$$"> <BODY LINK="#$$$$$$> <BODY VLINK="#$$$$$$> <BODY ALINK="#$$$$$$>

<BODY BGCOLOR="#000088" TEXT="#FFFF00'> <H1 align="center">Bonjour</H1> </BODY>

Voici une image qui peut servir de fond un document.

Ce qui peut nous donner : <BODY BACKGROUND="PAPER.gif"> <H1>Bonjour</H1> </BODY>

Les frames ou les cadres

<HTML> <HEAD></HEAD> <FRAMESET ROWS="30%,70%"> <FRAME> <FRAME> </FRAMESET> </HTML>

Attention! <FRAMESET></FRAMESET> remplace <BODY></BODY>

Exercice : nous allons crer deux fichiers Html

Lien sur image

<TABLE border=2> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>

Construisons un exemple : <TABLE border=2 cellspacing=10> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>

<TABLE border=2 cellpadding=10> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>

Vous aimerez peut-être aussi