You are on page 1of 7

Aide-mmoire des Balises (tag) HTML

< balise> et <balise /> = &lt; .........&gt; appels aussi marqueurs. = &copy; droit d'auteur. &quot; &amp; Dise ........ # (nom masculin, le dise) Esperluette & & (nom fminin) signe typographique pour remplacer le "et" Tilde : ~ (nom masculin, le tilde) espace inscable qui ne peut tre divis = &nbsp; ou &#160 <!-- commentaire --> n'apparat pas en clair mais uniquement dans le code source du document. Squelette de tout fichier HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"> <head> <title>Titre de la page</title> </head> <body> <h1>Titre principal du document</h1> <h3 class="intro">Introduction</h3>
<!commentaire html -->

<h4>Premire partie:</h4> <p>Premier paragraphe</p> </body> </html> <!DOCTYPE html> Dfinition du type de document en HTML5
<?xml version="1.0" encoding="windows-1252"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<HTML>..... </HTML> encadre tout le contenu source html d'un fichier. <HEAD> balises d'en-tte ici </HEAD> zone d'en-tte d'un fichier contenant des instructions particulires, dont le TITRE. <TITLE> titre de la page </TITLE> titre de la page, plac entre <Head> et </Head>. <META pour donner des informations relatives la page ou au Site, l'intention des outils de recherche. <META NAME="Author" CONTENT="Bardies henry" LANG="fr"> <META NAME="Description" CONTENT="aide gratuite "> <META NAME="Generator" CONTENT="logiciel"> <META NAME="Keywords" CONTENT="tag html aide-memoire,"> <META NAME="Robots" CONTENT="index,follow"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <BODY> .....</BODY> encadre le corps du document <BODY BACKGROUND=image.gif> utilise une image comme couleur de fond de page. <BODY BGCOLOR="#FF00FF"> image de fond de page avec une couleur en hexadcimale. <BODY TEXT="black" couleur du texte du document par dfaut LINK="blue" couleur des liens non activs VLINK="green" couleur des liens dj activs ALINK="red" couleur des liens l'instant o on les active <BODY link="#0000FF" alink="#FF0000" vlink="#005500"> <BODY ONLOAD="commande"> pour attributs et paramtres de la commande du script. <BODY bgsound="url"> Lecture d'un son. <bgsound balance="LR" loop="n" src="music.wav" volume="v">

FORMAT CARACTERES
<DEL> texte </DEL> pour barrer horizontalement un texte <S> texte </S> <STRIKE> texte <STRIKE> le texte slectionn est barr (voir aussi DEL). <FONT> texte </FONT> pour agir sur une partie distincte du texte. <FONT COLOR="#rrggbb"> couleur du texte en "hexadcimal" ou nom en anglais <FONT FACE="nom de la police"> texte </FONT>. <FONT SIZE="+2"> taille des caractres de 1 7 et 3 par dfaut. <BASEFONT SIZE= 5 > Taille par dfaut entre 1 et 7 avec la valeur 3 par dfaut <B> texte en gras </B> texte en gras (Bold ou Strong) <STRONG> texte </STRONG> formate le texte en gras (comme B) <I> texte en italique </I> texte en italique <EM> texte en vidence </EM> (Emphased) formatage du texte en italique. (formatage = mise en forme) <STYLE> </STYLE> utilis pour dfinir les feuilles de "style". <SUB> texte en indice </SUB> pour dfinir le texte en indice : indice trois. trois <SUP> texte en exposant </SUP> pour dfinir le texte en exposant : exposant <U> texte soulign</U> pour souligner du texte (Underline).

PARAGRAPHES et LISTES
<P> paragraphe de texte </P> nouveau paragraphe (interligne avant et aprs le texte). <P ALIGN=CENTER> le paragraphe slectionn est centr. <P ALIGN=RIGHT> le paragraphe slectionn est coll droite. <P ALIGN=LEFT> le paragraphe slectionn est coll gauche <PRE> texte </PRE> le texte est pr-format (affichage des espaces, retour ligne, tabulation). <DIV ALIGN=CENTER> division centre </DIV> l'image incluse est centre <DIV ALIGN=LEFT ou RIGHT> texte et image </DIV> l'image est aligne gauche ou droite. <CENTER> centre tout </CENTER> centre tout ce qui se trouve entre ces deux tags. <BR> saut de ligne provoqu volontairement (retour la ligne). <NOBR> texte </NOBR> Empche le rupture de ligne automatique <H3> titre de niveau 3 </H3> (header) pour dfinir la dimension des caractres de titres, de H1 H6. <H1 ALIGN=CENTER> Heading </H1> titre 1 est centr ou LEFT=gauche et RIGHT=droite. <P>Bonjour et <SPAN class="salutations">bienvenue</SPAN> sur mon site !</P> <HR> provoque une ligne horizontale, avec un effet de profondeur ou en noir. <HR NOSHADE> Ombrage pour crer un trait normal avec possibilit d'ajouter color=red (par ex.) <HR ALIGN=LEFT gauche ou RIGHT droite ou CENTER au milieu SIZE=5 (paisseur de la ligne) WIDTH=378 (Longueur de la ligne pixels ou 75% ) COLOR="#006633" (ou green : vert) <UL> liste non ordonne </UL> pour les listes non numrotes puces (Unordered list). <UL type="square"> type de puce: disc, square, circle <LI> item </LI> Liste Item (lment de liste) <OL> liste ordonne </OL> utilis dans une liste ordonne (Ordered List). <OL START=valeur> liste ordonne </OL> dfinit le n de dpart d'une liste ordonne. <OL TYPE=a> liste ordonne </OL> la liste est numrote l'aide de lettres minuscules. <OL TYPE=A> liste numrote</OL> la liste est numrote l'aide de lettres majuscules. <OL TYPE=i> liste numrote </OL> la liste est numrote l'aide de repres i, ii, iii <OL TYPE=I> liste numrote </OL> la liste est numrote l'aide de repres I, II, III <MARQUEE direction=right, left, up, down>Texte avec defilement </MARQUEE> Behavior=alternate, slide, scroll (par defaut). <BLINK > clignotant. </BLINK> fait clignoter le texte. <fieldset title="info-bulle" align="left"> <legend title="Lgende info-bulle"> titre du cadre </legend> <p>paragraphe encadr</p> </fieldset> Balises smantiques: <DL> <!Insertion d'une liste de dfinitions dans un glossaire --> <DT>Ampre</DT> <DD> Unit de mesure du courant lectrique</DD> <DT>Volt</DT> <DD>Unit de mesure de tension lectrique </DD> </DL>

<blockquote cite="adresse">bloc de citation</blockquote> <q cite="rfrence"> </q> <dfn title="Dfinition info bulle"> terme </dfn> Dfinition d'un terme avec info-bulle en ligne, <div class="pro"> block </div> Division (dlimitation d'un bloc gnrique), <CITE> Rien ne sert de courir </CITE> pour une citation, en gnral en italique <CODE> code source </CODE> pour la mise en forme d'un code source <ADRESS> adresse </ADRESS> pour la mise en valeur de texte, si on souhaite donner son adresse, tlphone... se place n'importe o mais gnralement en fond de page avant </BODY>. <em>texte</em> : Amphase (EMphasized, en anglais) (Mise en vidence usuellement en italique). <strong> en vidence </strong> : Amphase forte (usuellement en gras), <abbr title="Institut des Tlcommunications d'Oran">ITO </abbr> Abrviation en info-bulle, <acronym title="Signification">S.I.G.L.E.</acronym> Sigle (initiales) mme principe que <abbr>, <del cite="adresse" datetime="2004-02-18T00:00:00-05:00" title="Explication"></del> Partie supprime. <ins cite="adresse" datetime="2004-02-18T00:00:00-05:00" title="Explication"></ins> Partie insre. <kbd> texte </kbd> Texte rentr par l'utilisateur (texte ou touche(s)), <samp title="infobulle"> sample </samp> Exemple de sortie, <var> varx </var> : Variable (mathmatique ou informatique), <span class=grasitalic>texte avec un style dfinir </span> Bloc en ligne gnrique (dfinit une langue ou un style diffrent, par exemple). Autres attributs applicables aux caractres et paragraphes: dir = ltr, dir=rtl (Direction du texte: left to right, right to left) <span style="font-family:verdana; background-color:red;"> texte avec un fond rouge </span> <span style="font-family:arial;"> texte en arial </span>

LIENS, ANCRE
<A HREF="www.ito.dz" target="_bank"> site de lINTTIC </A> pour tablir un lien <A HREF="moodle.ito.dz/" target="_bank"> <img src="image.gif"> </A> image cliquable target= attribut servant dsigner le Cadre cible fix par un lien. (Associ _self, _blank, _parent, _top) target=_blank : nouvelle fentre ou onglet, Ancre dans la cration d'un lien ciblant sur une partie de document, matrialise cet objectif o va se positionner la page. (en anglais ANCHOR) <A NAME="NomDeLAncre"></a> pour dfinir la position de l'ancre <A HREF="page.html#ancre">Texte_du_lien</A> pour faire un lien vers une ancre <A HREF="page.htm" TITLE="description"> Texte_ou_image__cliquer </A> Affiche une info-bulle Attention: * Les noms de rpertoires sont sensibles la casse dans les systmes UNIX. *Il faut toujours prfrer des liens relatifs ( la page en cours). Pas de slash inverse dans les URL.

Rsum sur les liens : Exemples Types Local <a href="local.htm">ReVoirLoc</a>


Mme dossier

Rsultats ReVoirLoc Site HTML fichier PDF ReVoirAbs ReVoirRel ReVoirRel2 Contactez Aller

Vers un site
URL indispensable

<a href="http://www.ito.dz/sdir/index.htm">Site HTML</a> <a href="ftp://moodle.ito.dz/sdir/fichier.pdf">fichier PDF</a> <a href="file://C:/dossier/absolu.htm">ReVoirAbs</a>

Absolu
Chemin complet

<a href="../dossier/relatif.htm">ReVoirRel</a> <a href="../../sdir/relatif2.htm">ReVoirRel2</a> <a href="mailto:hachemani@yahoo.com">Contactez</a> Courrier messagerie <a href="mailto:hachemani@gmail.com?subject=test">Contactez</a> Poser ancre : <a name="ici">Rendez vous</a> <a href="#ici">Aller</a> Y aller :

Relatif

../remonte

Image
Hyper-image

<a href="fichiercible.htm"><img src="imagel.gif"></a> <form action="fichiercible.htm"> <input type="submit" value="Go"> </form> Retour

Bouton
Comme lien

Retour
javascript

<a href="#" onClick="window.history.go(-1)"> Retour </a> <form><input type="button" value="retour" onClick="window.history.go(-1)"></form>

Autres rfrences pour les liens

Syntaxe <A HREF="page.html"> <A HREF="#page2"> <A HREF="http://www.ito.dz"> <A HREF="pnm://"> <A HREF="ftp://moodle.ito.dz">

Description Protocole par dfaut : HTTP Lien interne, protocole HTTP Protocol http absolu Protocol PNM pour le streaming en RealAudio Protocol FTP pour le transfert de fichiers

<A HREF="mailto:rabah@yahoo.fr"> Protocol SMTP pour le courrier lectronique <A HREF="news:"> <A HREF="telnet://"> <A HREF="gopher://"> <A HREF="wais://"> <A HREF="file://C:/page.html"> Protocol NNTP pour les forums de discussion Protocol Telnet pour le contrle d'un ordinateur distant Protocol Gopher pour discussion et transfert de fichier Protocol Wais Adressage local sur un poste non-distant

IMAGES
<IMG> pour insrer une image <IMG SRC="images/logo.png" ALT="Logo du site" ID="logo"> <IMG ALT="Tour de Pise> affiche un texte en remplacement de l'image durant son tlchargement. <IMG SRC="b200.gif" WIDTH=26 HEIGHT=41 ALIGN=LEFT> image "b200.gif d'une dimension de 26x41 pixels et aligne gauche LEFT, droite RIGHT ou au centre avec<CENTER> et </CENTER> qui encadrent le tout. <IMG SRC="image.gif" ALIGN=BOTTOM> texte <P> Le texte vient se placer en bas droite de l'image <IMG SRC="image.png" ALIGN=TOP> texte <P> Le texte vient se placer droite en haut de l'image <IMG src="image.gif" hspace=10 vspace=20 > Espacement entre l'image et le texte <IMG SRC="../images/image.jpg" ALIGN=MIDDLE>texte<P> Le texte vient se placer droite au centre de l'image

IMAGES MAPPEES
<MAP NAME="namemap" ID=idmap> </MAP> dans une image sensible (IMAP) une zone bien dfinie fonctionne comme un lien, et plusieurs liens possibles sur une mme image <AREA shape="rect" coords="x1,y1,x2,y2" href="page1.html" alt="rectangle"> <AREA shape="circle" coords="x1,y1,R" href="page2.html" alt="cercle"> <AREA shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4" href="page2.html" alt="polygone"> <map name="map1" id="id_map"> <!--informations de la map --> <area shape="rect" coords="10,10,20,30" href="a.html" alt="vers a"> <area shape="circle" coords="40,20,10" href="b.html" alt="vers b"> <area shape="poly" coords="10,30,30,30,20,50" href="c.html" alt="vers c"> <!-- ainsi de suite --> </map> <img src="image.png" height="100" width="100" usemap="#map1" alt="texte image" >

TABLEAUX
<TABLE> </TABLE> pour la structure d'un tableau marquant le dbut et la fin. <TABLE summary="Texte"></TABLE> summary (facultatif) dcrit le contenu du tableau, <TABLE BGCOLOR="blue"> pour dfinir la couleur de fond d'un tableau (en hexadcimal ou en anglais entre guillemets). <TABLE BORDER=0> pour dfinir l'paisseur des lignes dans un tableau (0 = invisible). <TABLE BORDERCOLOR="red"> pour dfinir la couleur du cadre du tableau. <TABLE CELLPADDING=15> pour dfinir l'espacement en pixels entre le contenu des cellules et le bord de ces cellules. <TABLE CELLSPACING=10> pour dfinir l'espacement entre les cellules, y compris avec le bord du tableau. <TABLE HEIGHT=50%> hauteur d'un tableau en pourcentage de la fentre d'affichage. <TABLE HEIGHT=100> hauteur d'un tableau en pixels. <TABLE WIDTH=50%> largeur d'un tableau en pourcentage de la fentre d'affichage. <TABLE WIDTH=200> largeur d'un tableau en pixels. <TD> cellule </TD> dsigne chaque cellule d'un tableau..

<TD ALIGN=CENTER> Le texte ou sujet l'intrieur d'une cellule est centr. <TD BGCOLOR="#555"> pour dfinir la couleur de fond d'une cellule. <TD COLSPAN=3> pour fusionner des colonnes dans un tableau. <TD HEIGHT=10%> pour fixer la hauteur d'une cellule. <TD HEIGHT=30> pour dfinir la hauteur d'une cellule en pixels. <TD ROWSPAN=2> Nombre de lignes fusionner dans un tableau. <TD VALIGN=MIDDLE> pour centrer verticalement le contenu d'une cellule. <TD VALIGN=TOP> pour aligner vers le haut de la cellule son contenu. <TD VALIGN=BOTTOM> pour aligner vers le bas de la cellule son contenu. <TD WIDTH=40%> Largeur d'une cellule en pourcentage par rapport la fentre d'affichage. <TD WIDTH=120> Largeur en pixels d'une cellule. <TH> titre de colonne </TH> dfinit une cellule qui sert de titre (en gras). <TH ALIGN=CENTER> sert centrer ce titre dans la cellule. <TH ALIGN=LEFT> aligne le titre gauche dans la cellule. <TH BGCOLOR=couleur> couleur de fond d'une cellule d'en-tte. <TH COLSPAN=2> sert dfinir le nombre de colonnes qui vont fusionner dans une ligne. <TH HEIGHT=40%> hauteur d'une cellule d'en-tte en pourcentage par rapport la hauteur de la fentre <TH ROWSPAN=3> pour fusionner des lignes dans une colonne. <TH ALIGN="Bottom"> pour aligner vers le bas le contenu d'une cellule d'en-tte. <TH VALIGN="middle"> pour centrer verticalement le contenu d'une cellule d'en-tte. <TH VALIGN="top"> pour aligner vers le haut le contenu d'une cellule d'en-tte. <TH WIDTH=10%> largeur d'une cellule d'en-tte en pourcentage par rapport la fentre <TR> ligne </TR> contient toutes les diffrents tags de la ligne d'un tableau. <CAPTION ALIGN="center"> pour centrer la lgende du tableau <CAPTION ALIGN="left"> alignement de lgende du tableau gauche ou droite <thead> titre du tableau</thead> <tbody> </tbody> <tfoot>Pied de page </tfoot> Lgende <TABLE border=1 align="right"> 3 cellules fusionnes cellule <CAPTION align="center"> Lgende</CAPTION> <TR><TD COLSPAN=3>3 cellules fusionnes</TD> <TD>cellule</TD></TR> cellule cellule cellule <TR><TD ROWSPAN=3>3 cellules </TD> <TD>cellule</TD><TD>cellule</TD><TD>cellule</TD 3 cellules cellule > </TR><TR><TD>cellule</TD> 2 cellules <TD COLSPAN=2 ROWSPAN=2>2 cellules</TD></TR> cellule <TR><TD>cellule</TD></TR> </TABLE>

CADRES ou FRAMES
<FRAMESET> ensemble de cadres </FRAMESET> pour dfinir le nombre de colonnes ou lignes d'un fichier de Frames, remplace les balises <BODY> </BODY> <FRAME> cadre </FRAME> dfinit le cadre. <FRAME SRC="nom du fichier" > pour dfinir dans un FRAMESET le contenu des FRAMES concernes. <NOFRAMES> ..... </NOFRAMES> dans un fichier de Frames pour avertir le visiteur si ventuellement il n'a pas activ son navigateur ou que ce dernier est trop ancien et n'accepte pas les frames pour visualiser ce type de document. Devenu pratiquement obsolte, sert parfois pour le rfrencement ! <frameset cols="330,*" framespacing="1" frameborder="1" border="2"> <frame name="gauche" src="recherche.html"> <frameset rows="80,*" frameborder="1"> <frame name="haut" src="menu.html"> <frame name="droite" src="form.php?inv=1" scrolling="auto"> </frameset> <noframes> <p>Votre navigateur ne supporte pas les frames</p> </noframes> </frameset> haut gauche droite

Attributs:

border=x est l'attribut qui permet de dfinir l'paisseur d'un trait en pixels qui entoure un cadre. scrolling= pour placer (yes, no ou auto) les barres de dfilement dans les Cadres de son choix mais surtout suivant le contenu propos.. name= utilis dans un cadre permet ensuite de dfinir ( l'aide de l'attribut "target") le cadre qui devra recevoir l'information dsign par le lien. C'est comme la navigation entre cadres (target="droite". marginwidth= prcise l'espacement compris entre le contenu du cadre et le bord droite et gauche de ce dernier. marginheight= prcise l'espacement compris entre le contenu du cadre et le bord haut et bas frameborder= (0 ou 1) pour les cadres, permet de dfinir si les cadres ont ou pas de bordure. (en pixels) framespacing= dfinit un espace entre les cadres et s'exprime en pixels. scr= va indiquer la source de l'lment placer dans le cadre dfini par "name". cols pour les Cadres dfinit la dimension en largeur des cadres verticaux. rows pour les Cadres dfinit le nombre de lignes. noresize permet d'interdire la modification des dimensions des Cadres par le visiteur. <iframe src="URL"> </iframe> Inline frame: cadre insr en local Attributs de iframe: src : URL du document qui sera montr dans le iframe. srcdoc: context du contenu de l'iframe name: spcifie le nom de l' iframe. sendbox: restrictions sur le contenu de l'iframe height: spcifie la hauteur de l'iframe. width: spcifie la largeur de l'iframe.

APPLET JAVA
<APPLET= ..... </APPLET> pour un applet java avec CODE, WIDHT, HEIGHT <NOSCRIPT> ..... </NOSCRIPT> idem que NOFRAMES mais pour le javascript. <OBJECT> ..... </OBJECT> pour une insertion d'lments un peu semblable aux applets Java.

JAVASCRIPT
<SCRIPT> .....</SCRIPT> insertion de script. <SCRIPT LANGUAGE="JavaScript"> instructions javascript </SCRIPT>. <SCRIPT LANGUAGE="langage"> instructions </SCRIPT> pour insertion d'un autre langage. <SRIPT SRC="fichier_javascript.js"></SCRIPT> inclusion fichier source javascript

AUDIO, VIDEO, Animations


<embed alt="string" height=" { number | percentage } " hidden=" { true |false } " pluginspage="uri" src="uri" typ e="MIME type" width="number"> </embed> <embed src="video.mp4" alt="exemple de video" type="video/mp4"> </embed> <embed src="flash-test.swf" align="left"></embed> Attributs de embed: align, alt, border, height, hidden, hspace, vspace, name, pluginspage, type (MIME) <EMBED NAME='musique' SRC='good.wav' LOOP="0" MASTERSOUND AUTOSTART="0" WIDTH=10 HEIGHT=10 hidden="true"> <script language="JavaScript"> function PlayMusique() { eval("document.musique.play();"); } </script>

FORMULAIRES
<FORM> ..... </FORM> encadre la structure d'un formulaire. Les noms des lments sont des identificateurs sensibles la casse d'o format respecter. <FORM ACTION="url" METHOD="post" NAME="form1"> L'URL dfinit le serveur o est dpos le script CGI et METHOD dtermine le type de transmission (GET ou POST). <TEXTAREA> ..... </TEXTAREA> ..... Zone de saisie de plusieurs lignes dans un formulaire. <TEXTAREA NAME="nom" ROWS="nblignes" COLS="nbcolonnes"> ROWS= nombre de lignes disponibles et COLS le nombre de caractres par ligne de la fentre de texte. <SELECT NAME="nom"> ..... </SELECT> Dfinition d'une liste de choix dans un formulaire. <OPTION SELECTED> dans un formulaire pour option pr-slectionne. <OPTION value=1 >Option 1</OPTION> entre de liste ou option dans un formulaire. <INPUT TYPE="text" NAME="nom" VALUE="valeur"> zone de saisie dans un formulaire <INPUT TYPE="password" NAME="nom" zone de saisie de mot de passe dans un formulaire <INPUT TYPE="hidden" NAME="nom" VALUE="valeur"> zone cache dans un formulaire <INPUT TYPE="checkbox NAME="nom"> dfinition d'une (ou plusieurs) case cocher <INPUT TYPE="radio" NAME= "nom"> dfinition d'une seule case cocher <INPUT TYPE="submit" VALUE= "Envoyer"> pour envoyer ou soumettre le formulaire <INPUT TYPE="reset" VALUE="Effacer"> pour rinitialiser le formulaire, annuler la saisie. Formulaire mixte: Form1.html Page affiche par le navigateur <form method="POST" action="test.php" enctype="multipart/form-data"> Zone de texte : <input type="text" name="text" value="une ligne de texte"/><br /><br /> Mot de passe : <input type="password" name="password" value="test"/><br /><br /> Case cocher (checkbox): <input type="checkbox" name="checkbox_1" checked="checked" />Case 1 <input type="checkbox" name="checkbox_2" />Case 2 <input type="checkbox" name="checkbox_3" />Case 3<br /><br /> Groupe de boutons radio : <input type="radio" name="radio" checked="checked" />Radio1 <input type="radio" name="radio" />Radio2 <input type="radio" name="radio" />Radio3<br /><br /><br /> Upload de fichier : <input type="file" name="file" /><br /><br /> Zone de texte, plusieurs lignes :(textarea) <br /> <textarea name="textarea" cols="20" rows="4></textarea><br /><br /> Liste de choix simple (select) : <select name="selection1"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select><br /> <input type="hidden" name="hidden" /><br /> Type image: <br /><input type="image" src="logo.bmp" /><br /> <input type="button" value="Bouton generique" /><br /><br /> Bouton submit<input type="submit" value="Envoyer" /> Bouton reset <input type="reset" value="Rtablir" /> </form>

You might also like