Cours HTML

HTML
Plan
Prsentation du langage HTML
qu'est ce que l'HTML? qu'est ce qu'une balise? de quoi avez-vous besoin?
Prsentation des balises usuelles
votre premier document balises simples balises de mise en forme listes tableaux images et rfrences organisation du texte
Le langage HTML
Qu'est ce que l'HTML?
HTML est le langage de balisage hypertexte utilis dans le Web (HyperText Markup Language). Ce n'est pas un langage de programmation proprement dit. Ce sont "simplement" des balises pour mettre en forme (avec des liens, en tableau, etc...) du texte et des images. Pour avoir une ide de l'aspect d'une page crite en HTML, cliquez sur "Affichage" (ou "View") dans votre navigateur, puis slectionnez "page source".
Qu'est ce qu'une balise?

Une balise est une "instruction" comprise entre crochets < > qui possde un nom et parfois des attributs. <br> est, par exemple, la balise utilise pour spcifier qu'il faut passer la ligne. La plupart des balises doivent tre ouvertes puis refermes. On retrouvera donc souvent une balise de dbut et une balise de fin. La balise de fin porte le mme nom que la balise de dbut mais est en plus prcde du signe /. Nous aurons donc: (ouverture) <nom_de_balise> et (fermeture) </nom_de_balise>. Par exemple: <b>mon texte en gras (bold)</b>. Le nom de la balise (contenu entre les crochets) n'est pas sensible la casse: il peut tre crit indiffremment en majuscule, en minuscule ou en un mlange des 2. L'attribut d'une balise est dfini comme suit: nom_attribut="valeur" Par exemple, la balise utilise pour faire un lien a pour nom "a", et pour nom d'attribut "href". Ainsi, <a href="http://www.google.fr">Google</a> permet de faire un lien vers la page principale du site de Google. Dans ce cas, la valeur de l'attribut "href" est donc "http://www.google.fr".
De quoi avez-vous besoin ?

Pour crer une page Web en HTML, vous avez besoin de:
un navigateur (Internet Explorer, Netscape, Mozilla, etc...), pour visualiser le rsultat;
un diteur HTML (Notepad ou WordPad feront trs bien l'affaire par exemple), pour crer votre page HTML; NB: vous n'aurez pas besoin d'tre connect Internet pour crer votre site.
Prsentation des balises usuelles

Votre premier document
copiez ceci dans votre diteur: <html>
<head> <title>Mon titre</title> </head> <body> Voici mon premier document! </body> </html>
sauvegardez le document avec comme extension ".htm" ou ".html", et comme type "texte seulement" ou "tout type (*.*)"; puis double-cliquez sur le document: votre navigateur par dfaut sera alors ouvert sur la page. Explications des nouvelles balises utilises: <html> et </html> : informent votre navigateur qu'il s'agit d'une page HTML; la premire balise doit donc tre la premire de votre code, et la seconde doit tre la dernire. <head> et </head> : informent votre navigateur qu'il s'agit de l'en-tte de votre page; cette en-tte comprend pour l'instant le titre de votre page; la balise <head> est toujours place juste aprs la balise <html>. <title> et </title> : informent votre navigateur qu'il s'agit du titre de votre page; ce titre sera plac dans la barre tout au-dessus de votre navigateur; ces balises doivent se situer l'intrieur de la balise "head", c'est--dire entre <head> et </head>. <body> et </body> : informent votre navigateur qu'il s'agit du corps de votre document; c'est l que vous allez placer textes, images, et tout ce que contiendra votre page; la balise <body> doit se situer aprs la balise de fermeture de l'en-tte </head>. On peut donc faire une premire constatation : le code d'une page web est compos de 2 parties, l'en-tte de la page (HEAD) et le corps (BODY); et seul le corps de la page est affich l'cran: dans votre premire page, il n'y a que la phrase "Voici mon premier document!" qui s'est affiche.
Balises simples

<br>: passage la ligne; <b>: mettre un texte en gras (bold); <i>: mettre un texte en italique; <u>: souligner un texte (underline); <center>: centrer un texte; etc... Exemple En tapant a: <center> <b> <u> Mon texte </u> </b> <br> Et la suite... </center> Vous obtenez a: Mon texte Et la suite... Les commentaires  
Balises de mise en forme

La balise de couleur <font color="red">Mon texte</font> <font color="#FF0000">Mon texte</font> Le premier exemple est utilisable pour quelques couleurs prdfinies: red, green, black... Sinon, vous pouvez utiliser le code commenant par #, bas sur le systme "RGB" (Red-Green-Blue):
les 2 premiers chiffres (en base 16, donc allant de 0 F) fournissent le taux de rouge dans la couleur, les 2 suivants le taux de vert,
et les 2 derniers le taux de bleu. Par exemple, si vous voulez obtenir du rose, mlange du rouge et du bleu, tapez <font color="#FF00FF">Mon texte</font> La balise de taille
Taille absolue (de 1 7): <font size=1>Mon texte</font> <font size=2>Mon texte</font> <font size=3>Mon <font size=4>Mon <font size=5> <font size=6>
texte</font>
Mon texte</font>
texte</font>
Mon texte
</font>
<font size=7>
Mon texte
Mon texte</font>
texte</font>
</font>
Ou taille relative: <font size=-2>Mon texte</font> <font size=-1>Mon texte</font> <font size=+1>Mon <font size=+2>
Les listes
En tapant a: <UL> <LI> Ligne 1 <LI> Ligne 2: <OL> <LI> Sous-Ligne 2.1 <LI> Sous-Ligne 2.2 </OL> </UL> Vous obtenez a:
Ligne1 Ligne2 1. SousLigne2.1 2. SousLigne2.2 Explication:

<OL>correspondauxlistesnumrotes(OrderedList) <UL>auxlistespuces(UnorderedList) et<LI>sertspcifierqu'ondmarreunnouvellmentdeliste noterque</LI>existegalement,maisn'estpasncessaire,carsupposl'ouverturedu<LI>suivant, oulafermeturedeliste</UL> Enfin,vouspouvezgalementspcifierlestypesdenumrotationsoudepucesutilises: a. <oltype="a"> b. <oltype="a"> i. <olstyle="liststyletype:lowerroman">
ii. I. II.
<olstyle="liststyletype:lowerroman"> <olstyle="liststyletype:upperroman"> <olstyle="liststyletype:upperroman">
a. <olstyle="liststyletype:loweralpha"> b. <olstyle="liststyletype:loweralpha"> A. <olstyle="liststyletype:upperalpha"> B. <olstyle="liststyletype:upperalpha"> <ultype="disc"> <ultype="disc"> <ultype="circle"> <ultype="circle"> <ultype="square"> <ultype="square">
Lestableaux

<TABLE>et</TABLE>serventrespectivementouvrirunenouvelletable,etfermerlatablecourante <TR>et</TR>serventdfinirunelignedutableau <TD>et</TD>serventdfinirunecelluledutableau(noterque</TD>n'estpasindispensable,pour lammeraisonque</LI>). <TH>et</TH>serventdfiniruntitredeligneoudecolonne(letexteapparaitalorscentrengrasdans lacellulecorrespondante) et<CAPTION>et</CAPTION>serventdfiniruntitrepourletableau. Parexempleentapanta: <table> <caption>Montitre</caption> <tr> <th>Nom1 <th>Nom2 </tr><tr> <td>Cellule1 <td>Cellule2 </tr> </table> Vousobteneza: Montitre Nom1 Nom2 Cellule1 Cellule2 Optionsdelatable:

border:spcifiel'paisseurducadreextrieur,enpixels.Aveclavaleur0, lecadreestinvisible cellspacing:paisseurenpixelsautoursdechaquecellule
cellpadding:paisseurenpixelsentrel'lmentdelacelluleetlecadre width:largeuroccupeparletableauenpixelsouenpourcentages align:l'alignementdutableau:center,rightouleft. Exemple Enremplaantlabalise<table>del'exempleprcdentpar:<tableborder=1cellpadding=2 cellspacing=5>,vousobteneza: Montitre Nom1 Nom2 Cellule1 Cellule2 Optionsdescellules:
<tdcolspan=2>:fusionhorizontalede2cellules <tdrowspan=2>:fusionverticalede2cellules.
Imagesetrfrences
Lesimages <IMGSRC="chemin_d_acces_a_l_image">
Attributs:
align:alignementdsirdel'image(demmequepourlestableaux) alt:texteassocil'image(apparaitquandlasourispasseaudessus,ouenremplacementdel'imagesi cellecin'existepas) width:longueur height:hauteur Leslienshypertextes <AHREF="chemin_d_acces_a_la_page">Textedulien</A> Liensl'intrieurd'unemmepage:
Placer:<aname="myRef"></a>l'intrieurdevotredocument <ahref="#myRef">Textedulien</a>dsignealorsl'emplacementdsign utiliserparexempleenbasdepagepourproposerderevenirenhautdepage. Lescheminsd'accs Lescheminsd'accspeuventtre:
absolus:c'estdirequ'onspcifiel'adressecompltedecequoionfaitrfrence: parexempleC:/images/monImage.gifpouruneimage,ouhttp://www.google.frpourunsite ourelatifs:larfrenceestfaiteparrapportl'endroitol'onsetrouve: parexemple./monImage.gifou./maPage.htmldsignantdesfichierssitusdanslemmerpertoirequele fichierquiyfaitrfrence. Danscecas: "."dsignelerpertoirecourant, et".."dsignelerpertoireparent. Parexemple,dansvotrerpertoirenomm"site"setrouveunrpertoirenomm"images"etunfichier nomm"index.html". Danslefichier"index.html",vousvoulezfairerfrencel'imagenomme"monImage.gif"durpertoire
"images". Larfrencesefaitalorscommesuit:<imgsrc="./images/monImage.gif"> Maintenant,voustesdansunfichierdurpertoire"images"etvousvoulezfairerfrencevotrefichier "index.html". Alorslarfrencesefaitcommesuit:<ahref="../index.html">Maref</a> Optionsdelabalisebody Nousavonsmaintenantassezd'lmentspourintroduirelesprincipalesoptionsdelabalisebody:

bgcolor=couleur:couleurdefond background=chemin_image:imagedefond text=couleur:couleurdutexte link=couleur:couleurdesliens vlink=couleur:couleurdesliensvisits alink=couleur:couleurdesliensactifs(aumomentovouscliquezdessus)

Organisationdutexte
Lesparagraphes <p>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla blablabla</p> <palign=justify>blablablablablablablablablablablablablablablablablablablablablablablablablablabla blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla blablablablablablabla</p> <palign=left>blablablablablablablablablablablablabla</p> <palign=center>blablablablablablablablablablablablabla</p> <palign=right>blablablablablablablablablablablablabla</p> L'indentation <blockquote></blockquote> <blockquote><blockquote></blockquote></blockquote> Lestitres de<H1><H6>:
<H1>Montexte</H1>
<H2>Montexte</H2>
<H3>Montexte</H3>
<H4>Montexte</H4>
<H5>Montexte</H5>
<H6>Montexte</H6>
Lessparateurs <HR> <HRwidth="50%">

Cours HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Cours HTML

Încărcat de

Drepturi de autor:

Formate disponibile

HTML

Prsentation du langage HTML

qu'est ce que l'HTML? qu'est ce qu'une balise? de quoi avez-vous besoin?

Prsentation des balises usuelles

Qu'est ce qu'une balise?

De quoi avez-vous besoin ?

un navigateur (Internet Explorer, Netscape, Mozilla, etc...), pour visualiser le rsultat;

Prsentation des balises usuelles

copiez ceci dans votre diteur: <html>

Balises de mise en forme

Ligne1 Ligne2 1. SousLigne2.1 2. SousLigne2.2 Explication:

<olstyle="liststyletype:lowerroman"> <olstyle="liststyletype:upperroman"> <olstyle="liststyletype:upperroman">

border:spcifiel'paisseurducadreextrieur,enpixels.Aveclavaleur0, lecadreestinvisible cellspacing:paisseurenpixelsautoursdechaquecellule

align:alignementdsirdel'image(demmequepourlestableaux) alt:texteassocil'image(apparaitquandlasourispasseaudessus,ouenremplacementdel'imagesi cellecin'existepas) width:longueur height:hauteur Leslienshypertextes <AHREF="chemin_d_acces_a_la_page">Textedulien</A> Liensl'intrieurd'unemmepage:

Placer:<aname="myRef"></a>l'intrieurdevotredocument <ahref="#myRef">Textedulien</a>dsignealorsl'emplacementdsign utiliserparexempleenbasdepagepourproposerderevenirenhautdepage. Lescheminsd'accs Lescheminsd'accspeuventtre:

bgcolor=couleur:couleurdefond background=chemin_image:imagedefond text=couleur:couleurdutexte link=couleur:couleurdesliens vlink=couleur:couleurdesliensvisits alink=couleur:couleurdesliensactifs(aumomentovouscliquezdessus)

Lessparateurs <HR> <HRwidth="50%">

S-ar putea să vă placă și