Aide Memoire HTML

BALISES HTML
Je vous donne ici un "Aide-mémoire" pour retrouver rapidement une balise

HTML, mais si vous n'avez pas lu le cours correspondant aux balises :
faites-le !!!
Bases d'une page HTML :
<HTML>
<HEAD>
<TITLE>Le titre de votre page</TITLE>
</HEAD>
<BODY>
Le contenu de votre page
</BODY>
</HTML>
Gestion du texte :
- <b>texte</b> (BOLD en anglais) : permet de mettre un texte en gras.

Résultat : voici un texte en gras.
- <i>texte</i> (Italic) : permet de passer un texte en Italique. Résultat
: voici un texte en italique.
- <u>texte</u> (Underligne) : permet de souligner un texte. Résultat
: voici un texte souligné.
- <s>texte</s> (Strike) : permet de rayer un texte. Beaucoup moins utile.
Résultat : voici un texte rayé.
Mise en page :
<BR> : passer à la ligne (effet cumulable : deux <BR> saute une ligne)
<P> : sauter une ligne (effet non cumulable)
<CENTER>texte</CENTER> : pour centre un texte dans la page (très utile
!)
<P ALIGN="LEFT ou RIGHT ou CENTER">texte à aligner</P> : pour aligner
votre texte
<HR SIZE="épaisseur en pixels" WIDTH=largeur ALIGN=alignement> :
créé une barre, peu utilisée mais utile parfois...
Images :
<IMG SRC="nomdevotreimage.extension" WIDTH="largeurenpixel"

HEIGHT="hauteurenpixel"> : pour insérer vos images.
Tableaux :
Structure simple d'un tableau (dans l'ordre d'apparition des balises) :
- <TABLE> : pour ouvrir un tableau.

- <TR> : pour ouvrir une ligne.
- <TD></TD> : pour ouvrir et fermer une cellule.
- <TH></TH> : pour ouvrir et fermer une cellule contenant du texte centré
et en gras.
- </TR> : pour fermer une ligne.
- </TABLE> : pour fermer le tableau.
Options de tableau :
<TABLE WIDTH="X" HEIGHT="X"> : où X est la largeur ou la hauteur du

tableau définie en pixels ou en pourcentage en ajoutant %.
<TABLE BORDER="X"> : où X est l'épaisseur de la bordure.
<TABLE CELLSPACING="X"> : où X est l'espace entre les cellules.
<TABLE CELLPADDING="X"> : où X est l'espace entre une cellule et son
contenu.
Fusionner les cellules :
GHOUALI SAMIR, Univ Mascara 2021-2022 1

BALISES HTML
<TD COLSPAN="X"> : où X est le nombre de colonnes sur lequel s'étend la

cellule.
<TD ROWSPAN="X"> : où X est le nombre de lignes sur lequel s'étend la
cellule.
Liens :
Un lien externe c'est : <A HREF="http://www.nomdusite.com">Accès au

site nomdusite.com</A>
Un lien interne c'est : <A HREF="mapage.html">Aller sur ma page</A>
Un lien mail c'est : <A HREF="mailto:pseudo@provider.com">Cliquez pour
m'écrire sur pseudo@provider.com</A>
Un lien sur une image c'est : <A
HREF="http://www.nomdusite.com"><IMG SRC="logodusite.jpg"
BORDER="0" WIDTH="X" HEIGHT="X"></A>
Un lien sur une image avec une bulle d'information c'est : <A
HREF="http://www.nomdusite.com"><IMG SRC="logodusite.jpg"
BORDER="0" WIDTH="X" HEIGHT="X" ALT="votre texte pour
information"></A>
Couleurs :
Polices :
De la couleur pour votre texte c'est : <FONT

COLOR="#votrecodeenhexa">votre texte</FONT>
Définir la taille de votre police c'est : <FONT SIZE="votre taille de 1 à
7">votre texte</FONT>
Définir le type de votre police c'est : <FONT FACE="type de police">votre
texte</FONT>
Page :
Définir le fond de page c'est : <BODY BGCOLOR="#votrecodeenhexa">
Tableaux :
Définir la couleur de bordure de votre tableau c'est : <TABLE

BORDERCOLOR="#votrecouleurenhexa" BORDER="tailledelabordure">
ou <TABLE BORDERCOLORLIGHT="#0000FF"
BORDERCOLORDARK="#votrecouleurenhexa"
BORDER="tailledelabordure">
Définir la couleur de fond de votre tableau c'est : <TABLE
BGCOLOR="#votrecouleurenhexa">
Définir la couleur de fond d'une cellule de votre tableau c'est : <TD
BGCOLOR="#votrecouleurenhexa">
Liens (Bonus) :
Définir la couleur de vos liens c'est (code à mettre entre les balises
<HEAD> et </HEAD>) :
<style TYPE="text/css">
A:link {color: #0000FF}
A:visited {color:#000082}
A:hover {color:#FF0000}
</style>
Formulaires :
Insérer un formulaire commence toujours par le placement de :
<FORM METHOD="post" ACTION="mailto:votrepseudo@votreprovider.com"

ENCTYPE="TEXT/PLAIN">
Ici vos champs de choix.
</FORM>

BALISES HTML
Les différents champs (à mettre entre les balises <FORM> et </FORM>

sont (par exemple) :
Champ de ligne simple : <INPUT TYPE="text" NAME="sonnom" SIZE="25"

MAXLENGTH="50" VALUE="Entrez ici votre nom">
Champ multi-lignes : <TEXTAREA NAME="son adresse" ROWS="3"

COLS="25" WRAP="PHYSICAL">Entrez ici votre adresse</TEXTAREA>
Une liste déroulante :

<SELECT NAME="genre" SIZE="1">
<OPTION VALUE="Madame" selected>Madame</OPTION>
<OPTION VALUE="Mademoiselle">Mademoiselle</OPTION>
<OPTION VALUE="Monsieur">Monsieur</OPTION>
</SELECT>
Des boutons radio : <INPUT TYPE="radio" NAME="Bouton choisi"

VALUE="Contact téléphonique">
Des cases à cocher : <INPUT TYPE="checkbox" NAME="Case coché"

VALUE="Création de site">
Un bouton d'envoi : <INPUT TYPE="submit" NAME="Submit" VALUE="A

répondu à mon formulaire">
Un jeu de frame simple (sommaire en haut, contenu en bas) :
<html>
<head>
<title>Bienvenue sur mon site</title>
</head>
<frameset rows="50,*" frameborder="NO" border="0" framespacing="0">

<frame name="sommaire" src="sommaire.html" noresize scrolling="NO">
<frame name="contenu" src="page1.html">
</frameset>
<noframes>
<body bgcolor="#FFFFFF">
Désolé votre navigateur ne gère pas les frames !
</body>
</noframes>
</html>
< balise> et <balise /> = < .........> appelés aussi marqueurs.

© = © droit d'auteur. " &
Dièse ........ # (nom masculin, le dièse)
Esperluette & & (nom féminin) signe typographique pour remplacer le "et"
Tilde : ~ (nom masculin, le tilde)
espace insécable qui ne peut être divisé = ou &#160
 n'apparaît 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>Première partie:</h4>
<p>Premier paragraphe</p>
</body>
</html>
BALISES HTML
<!DOCTYPE html> Définition 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-tête ici </HEAD> zone d'en-tête d'un fichier contenant des instructions
particulières, 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
hexadécimale.
<BODY TEXT="black" couleur du texte du document par défaut
LINK="blue" couleur des liens non activés
VLINK="green" couleur des liens déjà activés
ALINK="red" couleur des liens à l'instant où on les active
<BODY link="#0000FF" alink="#FF0000" vlink="#005500">
<BODY ONLOAD="commande"> pour attributs et paramètres 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 sélectionné est barré (voir aussi DEL).
<FONT> texte </FONT> pour agir sur une partie distincte du texte.
<FONT COLOR="#rrggbb"> couleur du texte en "hexadécimal" ou nom en anglais
<FONT FACE="nom de la police"> texte </FONT>.
<FONT SIZE="+2"> taille des caractères de 1 à 7 et 3 par défaut.
<BASEFONT SIZE= 5 > Taille par défaut entre 1 et 7 avec la valeur 3 par défaut
<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 définir les feuilles de "style".
<SUB> texte en indice </SUB> pour définir le texte en indice : indice trois.
<SUP> texte en exposant </SUP> pour définir le texte en exposant : exposant trois
<U> texte souligné</U> pour souligner du texte (Underline).

BALISES HTML
PARAGRAPHES et LISTES
<P> paragraphe de texte </P> nouveau paragraphe (interligne avant et après le texte).
<P ALIGN=CENTER> le paragraphe sélectionné est centré.
<P ALIGN=RIGHT> le paragraphe sélectionné est collé à droite.
<P ALIGN=LEFT> le paragraphe sélectionné est collé à gauche
<PRE> texte </PRE> le texte est pré-formaté (affichage des espaces, retour ligne,
tabulation).
<DIV ALIGN=CENTER> division centrée </DIV> l'image incluse est centrée
<DIV ALIGN=LEFT ou RIGHT> texte et image </DIV> l'image est alignée à 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> Empêche le rupture de ligne automatique
<H3> titre de niveau 3 </H3> (header) pour définir la dimension des caractères 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 créer 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 ordonnée </UL> pour les listes non numérotées à puces (Unordered list).
<UL type="square"> type de puce: disc, square, circle
<LI> item </LI> Liste Item (élément de liste)
<OL> liste ordonnée </OL> utilisé dans une liste ordonnée (Ordered List).
<OL START=valeur> liste ordonnée </OL> définit le n° de départ d'une liste ordonnée.
<OL TYPE=a> liste ordonnée </OL> la liste est numérotée à l'aide de lettres
minuscules.
<OL TYPE=A> liste numérotée</OL> la liste est numérotée à l'aide de lettres majuscules.
<OL TYPE=i> liste numérotée </OL> la liste est numérotée à l'aide de repères i, ii, iii
<OL TYPE=I> liste numérotée </OL> la liste est numérotée à l'aide de repères 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="Légende info-bulle"> titre du cadre </legend>
<p>paragraphe encadré</p>
</fieldset>
Balises sémantiques:
<DL> <!—Insertion d'une liste de définitions dans un glossaire -->
<DT>Ampère</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="référence"> </q>
<dfn title="Définition info bulle"> terme </dfn> Définition d'un terme avec info-bulle en
ligne,

BALISES HTML
<div class="pro"> block </div> Division (délimitation d'un bloc générique),

<CITE> Rien ne sert de courir </CITE> pour une citation, en général 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, téléphone... se place n'importe où mais généralement 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 Télécommunications d'Oran">ITO</abbr> Abréviation en info-bulle,
<acronym title="Signification">S.I.G.L.E.</acronym> Sigle (initiales) même principe que
<abbr>,
<del cite="adresse" datetime="2004-02-18T00:00:00-05:00" title="Explication"></del> Partie
supprimée.
<ins cite="adresse" datetime="2004-02-18T00:00:00-05:00" title="Explication"></ins> Partie
insérée.
<kbd> texte </kbd> Texte rentré par l'utilisateur (texte ou touche(s)),
<samp title="infobulle"> sample </samp> Exemple de sortie,
<var> varx </var> : Variable (mathématique ou informatique),
<span class=grasitalic>texte avec un style à définir </span> Bloc en ligne générique (définit
une langue ou un style différent, par exemple).
Autres attributs applicables aux caractères 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 l’INTTIC </A> pour établir un lien
<A HREF="moodle.ito.dz/" target="_bank"> <img src="image.gif"> </A> image cliquable
target= attribut servant à désigner le Cadre cible fixé par un lien. (Associé à _self, _blank,
_parent, _top)
target=_blank : nouvelle fenêtre ou onglet,
Ancre dans la création d'un lien ciblant sur une partie de document, matérialise cet objectif
où va se positionner la page. (en anglais ANCHOR)
<A NAME="NomDeLAncre"></a> pour définir 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
Résumé sur les liens :

Types Exemples Résultats
Local <a href="local.htm">ReVoirLoc</a> ReVoirLoc
Même dossier
Vers un site <a href="http://www.ito.dz/sdir/index.htm">Site HTML</a> Site HTML
URL
indispensable
<a href="ftp://moodle.ito.dz/sdir/fichier.pdf">fichier PDF</a> fichier PDF
Absolu <a href="file://C:/dossier/absolu.htm">ReVoirAbs</a> ReVoirAbs
Chemin complet
Relatif <a href="../dossier/relatif.htm">ReVoirRel</a> ReVoirRel
../remonte <a href="../../sdir/relatif2.htm">ReVoirRel2</a> ReVoirRel2
<a href="mailto:hachemani@yahoo.com">Contactez</a>
Courrier <a
Contactez
messagerie href="mailto:hachemani@gmail.com?subject=test">Contactez
</a>

BALISES HTML
Poser ancre
<a name="ici">Rendez vous</a>
: Aller
<a href="#ici">Aller</a>
Y aller :
Image <a href="fichiercible.htm"><img src="imagel.gif"></a>
Hyper-image
Bouton <form action="fichiercible.htm">

Comme lien <input type="submit" value="Go"> </form>
<a href="#" onClick="window.history.go(-1)"> Retour </a> Retour
Retour <form><input type="button" value="retour"
javascript
onClick="window.history.go(-1)"></form>
Autres références pour les liens

Syntaxe Description
<A HREF="page.html"> Protocole par défaut : HTTP
<A HREF="#page2"> Lien interne, protocole HTTP
<A HREF="http://www.ito.dz"> Protocol http absolu
<A HREF="pnm://"> Protocol PNM pour le streaming en RealAudio
<A HREF="ftp://moodle.ito.dz"> Protocol FTP pour le transfert de fichiers
<A
Protocol SMTP pour le courrier électronique
HREF="mailto:rabah@yahoo.fr">
<A HREF="news:"> Protocol NNTP pour les forums de discussion
<A HREF="telnet://"> Protocol Telnet pour le contrôle d'un ordinateur distant
<A HREF="gopher://"> Protocol Gopher pour discussion et transfert de fichier
<A HREF="wais://"> Protocol Wais
<A HREF="file://C:/page.html"> Adressage local sur un poste non-distant
IMAGES
<IMG> pour insérer 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
téléchargement.
<IMG SRC="b200.gif" WIDTH=26 HEIGHT=41 ALIGN=LEFT> image "b200.gif d'une
dimension de 26x41 pixels et alignée à 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

BALISES HTML
<MAP NAME="namemap" ID=idmap> </MAP> dans une image sensible (IMAP) une zone
bien définie fonctionne comme un lien, et plusieurs liens possibles sur une même 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">


<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">

</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 début et la fin.
<TABLE summary="Texte"></TABLE> summary (facultatif) décrit le contenu du tableau,
<TABLE BGCOLOR="blue"> pour définir la couleur de fond d'un tableau (en hexadécimal
ou en anglais entre guillemets).
<TABLE BORDER=0> pour définir l'épaisseur des lignes dans un tableau (0 = invisible).
<TABLE BORDERCOLOR="red"> pour définir la couleur du cadre du tableau.
<TABLE CELLPADDING=15> pour définir l'espacement en pixels entre le contenu des
cellules et le bord de ces cellules.
<TABLE CELLSPACING=10> pour définir l'espacement entre les cellules, y compris avec
le bord du tableau.
<TABLE HEIGHT=50%> hauteur d'un tableau en pourcentage de la fenêtre d'affichage.
<TABLE HEIGHT=100> hauteur d'un tableau en pixels.
<TABLE WIDTH=50%> largeur d'un tableau en pourcentage de la fenêtre d'affichage.
<TABLE WIDTH=200> largeur d'un tableau en pixels.
<TD> cellule </TD> désigne chaque cellule d'un tableau..
<TD ALIGN=CENTER> Le texte ou sujet à l'intérieur d'une cellule est centré.
<TD BGCOLOR="#555"> pour définir 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 définir 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 fenêtre
d'affichage.
<TD WIDTH=120> Largeur en pixels d'une cellule.
<TH> titre de colonne </TH> définit 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-tête.
<TH COLSPAN=2> sert à définir le nombre de colonnes qui vont fusionner dans une ligne.
<TH HEIGHT=40%> hauteur d'une cellule d'en-tête en pourcentage par rapport à la hauteur
de la fenêtre
<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-tête.
<TH VALIGN="middle"> pour centrer verticalement le contenu d'une cellule d'en-tête.
<TH VALIGN="top"> pour aligner vers le haut le contenu d'une cellule d'en-tête.
<TH WIDTH=10%> largeur d'une cellule d'en-tête en pourcentage par rapport à la
fenêtre
<TR> ligne </TR> contient toutes les différents tags de la ligne d'un tableau.
<CAPTION ALIGN="center"> pour centrer la légende du tableau

BALISES HTML
<CAPTION ALIGN="left"> alignement de légende du tableau à gauche ou droite

<thead> titre du tableau</thead>
<tbody> </tbody>
<tfoot>Pied de page </tfoot>
Légende
<TABLE border=1 align="right"> 3 cellules fusionnées cellule
<CAPTION align="center">
Légende</CAPTION>
<TR><TD COLSPAN=3>3 cellules cellule cellule cellule
fusionnées</TD> <TD>cellule</TD></TR>
<TR><TD ROWSPAN=3>3 cellules </TD> 3 cellules cellule
<TD>cellule</TD><TD>cellule</TD><TD>ce 2 cellules
llule</TD> </TR><TR><TD>cellule</TD>
cellule
<TD COLSPAN=2 ROWSPAN=2>2
cellules</TD></TR>
<TR><TD>cellule</TD></TR>
</TABLE>
CADRES ou FRAMES
<FRAMESET> ensemble de cadres </FRAMESET> pour définir le nombre de colonnes ou
lignes d'un fichier de Frames, remplace les balises <BODY> … </BODY>
<FRAME> cadre </FRAME> définit le cadre.
<FRAME SRC="nom du fichier" > pour définir dans un FRAMESET le contenu des
FRAMES concernées.
<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 obsolète, sert
parfois pour le référencement !
<frameset cols="330,*" framespacing="1" haut

frameborder="1" border="2">
<frame name="gauche"
src="recherche.html"> gauche droite
<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>
Attributs:
border=x est l'attribut qui permet de définir l'épaisseur d'un trait en pixels qui entoure un
cadre.
scrolling= pour placer (yes, no ou auto) les barres de défilement dans les Cadres de son
choix mais surtout suivant le contenu proposé..
name= utilisé dans un cadre permet ensuite de définir (à l'aide de l'attribut "target") le cadre
qui devra recevoir l'information désigné par le lien. C'est comme la navigation entre cadres
(target="droite".
marginwidth= précise l'espacement compris entre le contenu du cadre et le bord droite et
gauche de ce dernier.

BALISES HTML
marginheight= précise l'espacement compris entre le contenu du cadre et le bord haut et

bas
frameborder= (0 ou 1) pour les cadres, permet de définir si les cadres ont ou pas de
bordure. (en pixels)
framespacing= définit un espace entre les cadres et s'exprime en pixels.
scr= va indiquer la source de l'élément à placer dans le cadre défini par "name".
cols pour les Cadres définit la dimension en largeur des cadres verticaux.
rows pour les Cadres définit le nombre de lignes.
noresize permet d'interdire la modification des dimensions des Cadres par le visiteur.
<iframe src="URL"> </iframe> Inline frame: cadre inséré en local

Attributs de iframe:
src : URL du document qui sera montré dans le iframe.
srcdoc: context du contenu de l'iframe
name: spécifie le nom de l' iframe.
sendbox: restrictions sur le contenu de l'iframe
height: spécifie la hauteur de l'iframe. width: spécifie 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'éléments 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" type="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>

BALISES HTML
FORMULAIRES
<FORM> ..... </FORM> encadre la structure d'un formulaire. Les noms des éléments sont
des identificateurs sensibles à la casse d'où format à respecter.
<FORM ACTION="url" METHOD="post" NAME="form1"> L'URL définit le serveur où est
déposé le script CGI et METHOD détermine 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 caractères par ligne de la fenêtre de texte.
<SELECT NAME="nom"> ..... </SELECT> Définition d'une liste de choix dans un
formulaire.
<OPTION SELECTED> dans un formulaire pour option pré-sélectionnée.
<OPTION value=1 >Option 1</OPTION> entrée 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 cachée dans un formulaire
<INPUT TYPE="checkbox NAME="nom"> définition d'une (ou plusieurs) case à cocher
<INPUT TYPE="radio" NAME= "nom"> définition d'une seule case à cocher
<INPUT TYPE="submit" VALUE= "Envoyer"> pour envoyer ou soumettre le formulaire
<INPUT TYPE="reset" VALUE="Effacer"> pour réinitialiser le formulaire, annuler la
saisie.

Aide Memoire HTML

Transféré par

Informations du document

Titre original

Copyright

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 :

Aide Memoire HTML

Titre original :

Transféré par

Droits d'auteur :

BALISES HTML

Je vous donne ici un "Aide-mémoire" pour retrouver rapidement une balise

- <b>texte</b> (BOLD en anglais) : permet de mettre un texte en gras.

<IMG SRC="nomdevotreimage.extension" WIDTH="largeurenpixel"

Structure simple d'un tableau (dans l'ordre d'apparition des balises) :

- <TABLE> : pour ouvrir un tableau.

<TABLE WIDTH="X" HEIGHT="X"> : où X est la largeur ou la hauteur du

Fusionner les cellules :

GHOUALI SAMIR, Univ Mascara 2021-2022 1

<TD COLSPAN="X"> : où X est le nombre de colonnes sur lequel s'étend la

Un lien externe c'est : <A HREF="http://www.nomdusite.com">Accès au

De la couleur pour votre texte c'est : <FONT

Définir le fond de page c'est : <BODY BGCOLOR="#votrecodeenhexa">

Définir la couleur de bordure de votre tableau c'est : <TABLE

Insérer un formulaire commence toujours par le placement de :

<FORM METHOD="post" ACTION="mailto:votrepseudo@votreprovider.com"

GHOUALI SAMIR, Univ Mascara 2021-2022 2

Les différents champs (à mettre entre les balises <FORM> et </FORM>

Champ de ligne simple : <INPUT TYPE="text" NAME="sonnom" SIZE="25"

Champ multi-lignes : <TEXTAREA NAME="son adresse" ROWS="3"

Une liste déroulante :

Des boutons radio : <INPUT TYPE="radio" NAME="Bouton choisi"

Des cases à cocher : <INPUT TYPE="checkbox" NAME="Case coché"

Un bouton d'envoi : <INPUT TYPE="submit" NAME="Submit" VALUE="A

Un jeu de frame simple (sommaire en haut, contenu en bas) :

<frameset rows="50,*" frameborder="NO" border="0" framespacing="0">

< balise> et <balise /> = &lt; .........&gt; appelés aussi marqueurs.

Squelette de tout fichier HTML 4.01

<!DOCTYPE html> Définition du type de document en HTML5

<HTML>..... </HTML> encadre tout le contenu source html d'un fichier.

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<BODY> .....</BODY> encadre le corps du document

GHOUALI SAMIR, Univ Mascara 2021-2022 4

<HR> provoque une ligne horizontale, avec un effet de profondeur ou en noir.

<MARQUEE direction=right, left, up, down>Texte avec defilement </MARQUEE>

GHOUALI SAMIR, Univ Mascara 2021-2022 5

<div class="pro"> block </div> Division (délimitation d'un bloc générique),

Résumé sur les liens :

GHOUALI SAMIR, Univ Mascara 2021-2022 6

Bouton <form action="fichiercible.htm">

Autres références pour les liens

GHOUALI SAMIR, Univ Mascara 2021-2022 7

<map name="map1" id="id_map">

GHOUALI SAMIR, Univ Mascara 2021-2022 8

<CAPTION ALIGN="left"> alignement de légende du tableau à gauche ou droite

<frameset cols="330,*" framespacing="1" haut

GHOUALI SAMIR, Univ Mascara 2021-2022 9

marginheight= précise l'espacement compris entre le contenu du cadre et le bord haut et

<iframe src="URL"> </iframe> Inline frame: cadre inséré en local

AUDIO, VIDEO, Animations

<EMBED NAME='musique' SRC='good.wav' LOOP="0" MASTERSOUND

GHOUALI SAMIR, Univ Mascara 2021-2022 10

GHOUALI SAMIR, Univ Mascara 2021-2022 11

Vous aimerez peut-être aussi

< balise> et <balise /> = < .........> appelés aussi marqueurs.