Glénan
Finistère
Bretagne

L'archipel des Glénan à Fouesnant
une production
LÉOST Informatique
Nouvelle version 2016 du site sur Glenan.fr
[Accueil] [Glénan] [Fouesnant] [Textes] [Séjours] [Visite virtuelle] [Jeux] [ Formation] [Bonus]

Formation multimédia
[Accueil] [PowerPoint] [FrontPage] [Dreamweaver] [Contribute] [Traitement image] [Flash] [HTML]

HTML
[Mémento HTML] [Exemple : les Glénan 1] [Les Glénan 1 commentés]

Mémento HTML

Ce mémento permet de retrouver les principales variations de la syntaxe d'une balise (Tag) HTML

Pour comprendre l'usage de la syntaxe, utiliser l'exemple sur les Glénan et son code commenté,
ou la version Adobe acrobat (PDF) du Mémento HTML

symbolique utilisée ci-dessous :

[] : facultatif
| : choix possibles
italique : voir le tableau commentaire

Rubriques du Mémento

Balises de fenêtre

<HTML> et </HTML> Balise de début et de fin de page
<HEAD> et </HEAD> Tête : contient principalement les méta balises
<TITLE> et </TITLE> Titre de la page dans le navigateur
<META HTTP-EQUIV="nom" CONTENT="valeur"> Balise équivalente à celles envoyées par le serveur
nom valeur descriptif
Refresh durée[;URL=url] rafraîchi une page et éventuellement renvoi vers une autre page
Content-Type mime;jeu_carac type de document et jeu de caractères utilisé
Pragma no-cache force le téléchargement de la page
Window-target _top affichage dans une nouvelle fenêtre
Expires never | date date d'expiration (pas de disparition) de la page
<META NAME="nom" CONTENT="valeur"> Balises importantes pour le référencement du site
nom valeur
 descriptif
Description description Descriptif succinct du site (impératif)
Keywords mots_clés Liste des mots clés relatifs au site (impératif)
Robots
  • all | none
  • follow | nofollow
  • index | noindex
    		•
  • Accepte ou non les robots
  • Suivie des liens
  • Indexation des page
    		•
    Revisit-after nb_jour Nombre de jours après lequel le robot doit revisiter la page (qui doit avoir été modifié)
    Author auteur Auteur des pages
    Subject sujet Sujet traité dans la page
    Copyright copyright Informations sur le (les) copyright(s)

    <BODY> et </BODY

    		 Corps : Contient principalement les informations à afficher
    BGCOLOR="couleur" BackGround color (couleur de fond)
    BACKGROUND="url" Image de fond
    TEXT = "couleur" Couleur du texte normal
    LINK="couleur" Couleur des liens hypertexte
    VLINK="couleur" Couleur des liens vistés
    ALINK="couleur" Couleur des liens actifs (peu usité)
    LEFTMARGIN="nbpixel" Marge de gauche (par défaut : 10-Win 8-Mac)
    TOPMARGIN="nbpixel" Marge du haut (par défaut : 15-Win 8-Mac)

    Balises de cadre (frame)

    <FRAMSET> et </FRAMSET> Définition du cadre
         ROWS="ligne1, ligne2,... " ligneN = nb_pixel | %_fenetre | *
    *=reste
         COLS="colonne1, colonne2,..." idem ROWS
         FRAMBORDER="Yes | No" pour avoir la séparation de cadre
         FRAMESPACING=nb_pixel" pour avoir l'épaisseur de la bordure de séparation des cadres
    <FRAME> définition du cadre inclut dans <FRAMESET>
         NAME="nom" nom du cadre à utiliser avec TARGET (voir <A>)
         SRC="url" adresse de la page qui doit être chargée dans le cadre
         SCROLLING="yes | no | auto" permettre les ascenseurs dans le cadre (auto par défaut)
         NORESIZE pas de redimensionnement possible de l'utilisateur
         MARGINWIDTH
         et LEFTMARGIN    		 préférer utiliser les bordures de <BODY> de la fenêtre concernée
         MARGINHEIGHT
         et TOPMARGIN    		 préférer utiliser les bordures de <BODY> de la fenêtre concernée
    <NOFRAME> aprés </FRAMSET> permet d'afficher le contenue de la page des navigateurs n'affichant pas les cadres. Utilise <BODY> pour suivre.
    <BASE TARGET="cible"> à mettre dans <HEAD> pour définir la cible par défaut de tous liens

    Balises de paragraphe

    <Hn> et </Hn> Style de Titre équivalent à Word
    n varie de 1 (important) à 7 (bas niveau)
    <P> et </P> Marque de paragraphe
    <BR> Saut de ligne forcé ("shift"+"entrée")
    <CENTER> et </CENTER> paragraphe(s) centré(s)
    <BLOCKQUOTE> et </BLOCKQUOTE> Retrait de paragraphe (possibilitéd'imbrication)
    <DIV> et </DIV> Modifier l'alignement d'un bloc. Très utile avec les feuilles de style
    <PRE> et </PRE> Texte préformaté (désuet)
    <SPAN> et </SPAN> Changement de style d'une partie d'un élément HTML
    <HR>  

    Balises de caractère

    <FONT> et </FONT>

    Définition de la police affichée avec les paramètre suivants :
    FACE="font1, font2, font3" choix possible de 3 polices par ordre de préférence
    COLOR="couleur" Couleur du texte
    SIZE="taille" taille de la police

    <B> et </B> Attribut de texte : Gras
    <I> et </I> Attribut de texte : Italique
    <U> et </U> Attribut de texte : Souligné (underline)
    <STRIKE> et </STRIKE> Attribut de texte : Barré
    <SUP> et </SUP> Attribut de texte : Exposant (diminue le corps de la police)
    <SUB> et </SUB> Attribut de texte : Indice (diminue le corps de la police)
    <TT> et </TT> Police non proportionnelle, type courrier - courrier news
    <BLINK> et </BLINK> Clignotement qui ne marche pas avec Internet Explorer (ne pas utiliser)

    Balises de lien hypertexte

    <A> et </A> Définit l'Ancrage du texte ou de l'image compris à l'intérieur de la balise
         NAME="nom" nom de l'ancre (ou signet) qui permet un lien depuis HREF
         HREF="url" lien vers l'adresse indiqué
         TARGET="cible" la cible est le nom d'un cadre nommé ou une des valeurs suivante :
    _blank (nouvelle fenêtre) ; _parent (fenêtre ou je de cadre parent) ; _self (par défaut : fenêtre du lien) ; _top (fenêtre de base sans cadre)

    Balises d'image

    <IMG> intégration d'une image (voir paramètre ALIGN)
         SCR="url" SouRCe de l'image
         NAME="nom" nom de l'image pour utilisation avec script
         HEIGHT="nb_pixel" hauteur de l'image, ne pas redimensionner,
    utile pour prévoir la place dans la fenêtre
         WIDTH="nb_pixel" largeur de l'image (idem hauteur)
         ALT="descriptif" infobulle et texte avant chargement
         BORDER="nbpixel" "cadre" autour de l'image
         HSPACE="nbpixel" espace libre à droite et à gauche de l'image
         VSPACE="nbpixel" espace libre en haut et en bas de l'image
         USEMAP="#carte_image" il faut définir la carte image à utiliser <MAP>
    <MAP> et </MAP> carte image de USEMAP avec NAME="carte_image"
    <AREA> et </AREA> zone dans <MAP> avec les paramètres SHAPE, COORDS, HREF, TARGET, ALT
         SHAPE="surface" avec surface = RECT (rectangle), CIRCLE (cercle) ou POLYGON (polygone)
         COORDS="liste_coords" (0,0) est le coin supérieur gauche de l'image. L'axe des X est vers la droite et l'axe des Y vers le bas
    pour RECT : coordonnées (X,Y) du coin supérieur gauche et du coin inférieur droit.
    RECT="X_sup_gauche,Y_sup_gauche,X_inf_droit,Y_inf_droit"
    pour CIRCLE : coordonnées du centre du cercle et son rayon
    CIRCLE="X_centre,Y_centre,Rayon)
    pour POLYGON : la liste des coordoonnées (X,Y) des points constituant le forme
    POLYGON="X_point1,Y_point1,X_point2,Y_point2,... ,X_pointN,Y_pointN,X_point1,Y_point1)

    Balises de liste

    <DL> et </DL> Liste de Définition (déclaration)
    <DT> et </DT> Définition du titre de la liste de définitions
    <DD> et </DD> Définition des données de la liste de définition
    <UL> et </UL> Liste à puces
    <OL> et </OL> Liste numéroté
    <LI> et </LI> Elément de liste <OL> ou <UL>
         TYPE="type" Type puce (utilisable avec <UL>, <OL> et <LI>)
    type commentaire balise
    disc

    disque plein

    		 UL et LI
    circ

    circulaire

    		 UL et LI
    square

    carré

    		 UL et LI
    1 chiffres arabes OL et LI
    A lettres capitales OL et LI
    a lettres minuscules OL et LI
    I chiffres romains OL et LI
    i chiffres romains minuscule OL et LI
         START="valeur" valeur de début de la liste <OL>
         VALUE="valeur" nouvelle valeur de <LI> dans <OL>

    Balises de tableau

    <TABLE> et </TABLE> création de tableau
    <TR> définition d'une ligne (rangée) de cellules
    <TH> titre de cellule (elle est en gras)
    <TD> définition de la cellule
         BORDER="nbpixel" épaisseur de la bordure
         WIDTH="valeur" largeur du tableau en nbpixel ou en pourcentage (ex : 75%)
         HEIGHT="valeur" longueur du tableau en nbpixel ou en pourcentage
         CELLSPACING="nbpixel" espace entre les cellules
         CELLPADDING="nbpixel" espace entre contenue de la cellule et le bord de la cellule
         BGCOLOR="couleur" couleur de <TABLE>, <TR>, <TH> et <TD>
         BACKGROUND="url" image de fond pour <TABLE> et <TD>
         VALIGN="alignement" permet d'aligner le texte en hauteur dans un tableau.voir aussi le paramètre ALIGN
    alignement descriptif
    Top haut de la cellule
    Middle milieu de la cellule
    Bottom bas de la cellule
         ROWSPAN="nb_ligne" nombre le lignes fusionnées dans <TD> ou <TH>
         COLSPAN="nb_ligne" nombre le colonnes fusionnées dans <TD> ou <TH>

    Balises de formulaire

    <FORM> et </FORM> Création du formulaire
    paramètre descriptif
    NAME="nom" nom du formulaire
    ACTION="url" mail ou adresse du script de traitement
    METHOD="get"|"post" façon dont les paramètres sont envoyés
    ENCTYPE="mime" type mime d'envoie des données au serveur
    <INPUT TYPE="type"> pour définir de nombreux éléments de formulaire
    type descriptif paramètres
    TEXT élément de texte (NAME, VALUE, SIZE, MAXSIZE)
    CHECKBOX case à cocher (NAME, VALUE, [CHECKED])
    RADIO bouton radio (NAME, VALUE, [CHECKED])
    HIDDEN champ caché (NAME, VALUE)
    BUTTON bouton vide (NAME, VALUE)
    RESET bouton effacer (NAME, VALUE)
    SUBMIT bouton soumettre
    (le formulaire)    		 (NAME, VALUE)
    <TEXAREA> et </TEXAREA> zone de texte multiligne (déroullante)
    paramètre descriptif
    NAME="nom" nom du champ
    COLS="nb_cols" nombre de colonnes de texte
    ROWS="nb_lignes" nombre de lignes de texte
    WRAP="retour_ligne" type de retour à la ligne : off (par défaut)| hard
    READONLY pour éviter les modifications
    <SELECT> et </SELECT> menu ou liste déroulante
    paramètre descriptif
    NAME="nom" nom du champ
    SIZE="taille" nombre de ligne visible
    MULTIPLE pour permettre des choix multiples
    <OPTION> texte choix </OPTION> liste des choix possible dans <SELECT>
    paramètre descriptif
    VALUE="valeur" valeur du choix
    SELECTED choix préselectionné
         VALUE="valeur" valeur par défaut utilisé à l'affichage
         SIZE="taille" nombre max de caractères ou de ligne visibles
         MAXSIZE="taille" nombre max de caractères pour la variable
         CHECKED coché ou sélectionné par défaut

    Balises d'objet (son, vidéo...)

    <OBJECT> et </OBJECT> fournit au navigateur des informations non prises en charge en standard par le navigateur.
    <BGSOUND> son d'arrière plan uniquement dans IE à mettre dans HEAD (ne pas utiliser)
    <EMBED> et </EMBED> pour charger des objets multimédias non pris en charge en standard par le navigateur
    les paramètres varient souvent en fonction du plug-in, du navigateur, de l'OS...
    <EMBED NAME="nom" SCR="url" HEIGHT="nb_pixel" WIDTH="nb_pixel" > </EMBED>
         SCR="url" adresse du média à incorporer
         AUTOPLAY="true | false" idem pour AUTOSTART. Permet le lancement automatique de du média
         CONTROLLER="true | false" affiche ou non le panneau de contrôle du lecteur multimédia
         LOOP="true |false" lecture en boucle du média
         WIDTH="nb_pixel" largeur du média (valeur 0 possible)
         HEIGHT="nb_pixel" hauteur du média
         CACHE="tue | false" mettre l'objet en pré-chargement pour faciliter sa lecture

    Paramètres d'alignement

    ALIGN="alignement" Modifier l'alignement d'un objet. Utilisable avec les balise IMaGe,Head, Paragraphe, DIVision, TABLEau
    alignement descriptif balise
    Default par défaut pour les images I
    Left par défaut pour les paragraphes I H P D T
    Middle équivalent à <CENTER> I H P D
    Center centre le texte T
    Right alignemnet à droite I H P D T
    Top première ligne aligné en haut de l'image I
    Bottom première ligne aligné en bas de l'image I
    Justify Texte justifié à droite et à gauche H

    Commentaires

    Couleur En hexadécimal (précédé d'un dièse) ou en texte
  • #RRGGBB (ex : #FFFF00 pour jaune)
  • NomDeCouleur (ex : Yellow pour jaune)
    		•
    url Uniform Ressource Locator (adresse internet)
  • Absolue (ex : http://leost.fr/index.html#formation)
  • Relative (ex : images/glenan.png ou #glenan)
  • Mail (ex: mailto:glenan@tech-quimper.fr?cc=p@leost.fr&subject=Les glénan&body=A ce sujet...)
    		•
    nbpixel nombre de pixels
    mime

    Multipurpose Internet Mail Extensions
    Informations sur le document pour faciliter son traitement
    Format : type/sous-type
    ex : text/html ; image/gif ; video/mpeg ; application/pdf ; multipart/form-data et text/plain...
    jeu_carac Table de jeu de caractères utilisée
    ex : iso-8859-1 ; us-ascii ...
    date Format proche de celui d'Excel : jour(3A), numéro_jour(2N) mois(3A) année(3N) HH:MM:SS GMT
    ex : Sat, 22 May 2010 12:00:00 GMT
    description Description du site en moins de 200 caractères (ponctuation comprise), voir en 20 ou 25 mots
    mots_clés Liste des mots clés (y compris féminin et pluriel) caractéristiques de votre activité, positionnement géographique...
    taille Taille de la police. Echelle de correspondance PC (augmentation d'environ 25% pour le Mac)
    1= 7-7,5pts ; 2=10pts ; 3=12pts ; 4=13,5-14pts ; 5=18pts ; 6=24pts ; 7=36pts

    Caractères accentués et spéciaux

    â

    &acirc;

    		 Â &Acirc;
    à

    &agrave;

    		 À &Agrave;
    ç &ccedil; Ç &Ccedil;
    ê

    &ecirc;

    		 Ê &Ecirc;
    é &eacute; É &Eacute;
    è &egrave; È &Egrave;
    î &icirc; Î &Icirc;
    ô &ocirc; Ô &Ocirc;
    ù &ugrave; Ù &Ugrave;
    œ &#156; æ &aelig;
    € &euro;   &nbsp;
    < &lt; > &gt;
    & &amp; " &quot;
    ¤ &curren; µ &micro;
    ° &deg;  

    Type mime

    x-devant un sous-type indique un format propriétaire

    Média

    Type/soustype

    		 Extension
    Text text/plain TXT
    text/html HTM HTML
    text/richtext RTF
    text/css CSS
    Image image/gif GIF
    image/jpeg JPG JPEG
    image/tiff TIF TIFF
    image/x-icon ICO
    image/bmp BMP
    Audio audio/basic AU SND
    audio/x-aiff AIF AIFF AIFC
    audio/wav WAV
    audio/midi MID MIDI
    audio/x-realaudio RA
    Vidéo video/mpeg MPG MPEG
    video/quicktime MOV
    video/msvideo AVI
    Application application/pdf PDF
    application/x-shockwave-flash SWF
    application/msexcel XLS
    application/x-zip-compressed ZIP



     

     

     
    © 2004 Léost Informatique - Fouesnant les Glénan (contact@glenan.fr)
    Chercher version