docPrincipales balises HTML
download 
Plainte Transcription
Principales balises HTML
Principales balises HTML
Balises de document
Document : <HTML> </HTML>
En-tête : <HEAD> </HEAD>
Titre : <TITLE> </TITLE>
Corps du texte : <BODY> </BODY>
Tableau
Attributs de ""BODY" :
BACKGROUND=("/chemin/) URL de l'image" pour une image de fond d'écran,
BGCOLOR="#code-couleur" ou ="couleur-en-anglais" pour une couleur de fond d'écran
TEXT="#code-couleur" ou ="couleur-en-anglais" pour la couleur du texte
LINK="#code-couleur" ou ="couleur-en-anglais" pour la couleur des liens non visités
VLINK="#code-couleur" ou ="couleur-en-anglais" pour la couleur des liens visités
ALINK="#code-couleur" ou ="couleur-en-anglais" pour la couleur des liens cliqués
Mise en page
Saut de ligne : <BR>
Ligne horizontale : <HR>
Paragraphe : <P>
Attributs de HR: align=left/center/right
size= ; width=
Commentaire : < - - ! ceci n'apparaitra pas sur la page Web - - >
Style de paragraphe : <Hi> </Hi>, i=1 à 6 (caractères grands ou plus petits).
Style de caractère
Gras : <B></B>
<FONT ></FONT>
cellule
Attributs de <TABLE> :
BORDER="nombre" : épaisseur du cadre
CELLPADDING="nombre" : espace entre le contenu de la cellule et le contour de la cellule
CELLSPACING="nombre", espace entre les cellules
Attributs de <TABLE>,<TR> et <TD>:
WIDTH="nombre" ou "pourcentage" : largeur cellule
HEIGHT="nombre" ou "pourcentage" : hauteur
BGCOLOR="#code-couleur" ou ="couleur-en-anglais" pour une couleur de fond.
ALIGN="Left", "Center" ou "Right" : Justification horizontale
VALIGN="Top", "Middle" ou "Bottom : Justification verticale
COLSPAN="nombre" : regroupement de cellules par colonnes
ROWSPAN="nombre" : regroupement de cellules par lignes
Images
<IMG SRC="url(adresse)"> insère le fichier graphique spécifié par son url (adresse)
Autres attributs de <IMG> : HEIGHT,WIDTH, BORDER, HSPACE, VSPACE
Italique : <I></I>
Attributs de "FONT"
SIZE=n, n de 1 à 7, du plus petit au plus grand
FACE="Polices-installées-sur-l’ordinateur-de-celui-qui-consulte"
COLOR="#code-couleur" ou ="couleur-en-anglais" pour la couleur du texte
Listes
liste ordonnée : <OL> </OL>
liste non ordonnée (puces) : <UL> </UL>
item de liste : <LI>…</LI> (</LI> est facultatif)
tête de liste :<LH>…</LH>
Attributs de liste :
<UL TYPE="circle", "square" ou "disc">
<OL TYPE="1", "i", "I", "a" ou "A" <TABLE>
<TR>…</TR>
ligne
<TD>… </TD>
<TD> … </TD>
</TR>
</TABLE>
START=valeur de départ >
Codage des caractères accentués
Notons # le caractère (minuscule ou majuscule) à accentuer
Aigu : &#acute;
Grave : &#grave;
Circonflexe : &#circ;
Cédille : &#cedil;
Tréma : &#uml;
Tilde : &#tilde;
Les liens
Ancre active : <A HREF="url" (target="_blank")> elt cliquable </A>
Ancre passive : <A name="etiquette"></A>
Syntaxe générale d'une URL (adresse d'une ressource)
URL=protocole:// (nom_serveur/)(chemin/)(nom_document)(#etiquette)
Ex: <A href="http://www.univ-montp3.fr/~amela/DE1/index.html">
Styles
Définition "totalitaire" :
P {font-size :16 pt
; color : blue}
H1,H2,H3 {color : red}
OL LI {color : purple}
Définition "à la carte" via les classes de style :
.rouge
{color : red}
P.grasrouge {color:red ; font-weight:bold font-size :20pt}
Définition ponctuelle
#vert
{ color=green}
ou
P#vert
{ color=green}
Définition interne :
<HEAD> <STYLE type="text/css"> </STYLE></HEAD>
Définition externe dans une feuille de style
Référence à une feuille de style :
<HEAD>
<LINK
REL=stylesheet TYPE=text/css HREF=mafeuillestyle>
</HEAD>
Principales balises HTML
L'attribut CLASS permet d'affecter une classe spécifique à un objet HTML
<P class=grasrouge>
La balise <SPAN> est un bloc de texte non balisé
L'attribut ID permet d'exprimer un paramètre différent d'une classe :
<P class=grasrouge ID=vert>
Spécification des styles
Polices de caractères :
font-size ( taille des caractères en points ou en pourcentage) : X pt
font-style : normal/italic
font-family (famille de caractères) : Courier/Times/Helvetica…cursive,
monospace, fantasy
font-weight (graisse des caractères) : bold/normal
text-transform : capitalize, lowercase, uppercase
line-height (interligne, en points ou en pourcentage)
text-align (alignement-justification) : left/right/center/justify
text-indent (indentation, en points ou en pourcentage }
text-transform(traitement de la casse) : lowercase/uppercase/capitalize
Pour un bloc (P ou Hi)
height
width
background-color
background-image
margin-right
margin-left
margin-top
margin-bottom
padding-right : blanc à droite
padding-left
padding-top
padding-bottom
