ToutSurTout.biz / Le Guide Rapide Du Langage HTML

Solenne · Discussion postée le 03-11-2009 à 21:30:37

Le Guide Rapide Du Langage HTML

Table des matières

1. MATÉRIEL D'INTRODUCTION
* Qu'est ce qui est unique à propos de ce guide
* < B>Quelles sont les étiquettes HTML qui y sont incluses
* Comment le document est conçu (incluant une description des symboles et abbréviations)

2. ÉTIQUETTES HTML
* Éléments de base (tous les documents HTML devraient les contenir)
* Définition structurale (apparence controlée par les spécifications du navigateur)
* Formattage de la présentation (l'auteur spécifie l'apparence du texte)
* Liens et graphiques
* Séparateurs
* Listes
* Arrières-plans et couleurs
* Caractères spéciaux
* Formulaires
* Tableaux
* Cadres
* Java
* Divers

Solenne · Réponse postée le 03-11-2009 à 21:31:02

GÉNÉRAL

Type de document <HTML></HTML> (au début et à la fin du document)
Titre <TITLE></TITLE>    (nom du fichier; doit être dans l'en-tête)
En-tête <HEAD></HEAD>    (titre de description)
Corps <BODY></BODY>    (corps du document)

Solenne · Réponse postée le 03-11-2009 à 21:33:12

DÉFINITION STRUCTURALE

En-tête <H?></H? > (6 niveaux d'en-têtes)

En-tête alignée <H? ALIGN=LEFT|CENTER|RIGHT></H?>

Division <DIV></DIV>

Division alignée <DIV ALIGN=LEFT|CENTER|RIGHT|JUSTIFY></DIV>

Bloc en retrait <BLOCKQUOTE></BLOCKQUOTE>

Emphase <EM></EM> (habituellement présenté en italique)

Forte emphase <STRONG></STRONG> (habituellement présenté en gras)

Citation <CITE></CITE> (habituellement en italique)

Code <CODE></CODE> (pour l'affichage de fichier de programmation)

Échantillon de sortie <SAMP></SAMP>

Entrée au clavier <KBD></KBD>

Variable <VAR></VAR>

Définition <DFN></DFN> (non officiel)

Adresse de l'auteur(e) <ADDRESS></ADDRESS>

Grande police de caractères <BIG></BIG>

Petite police de caractères <SMALL></SMALL>

Solenne · Réponse postée le 03-11-2009 à 21:35:40

FORMAT DE PRÉSENTATION

Gras <B></B>

Italique <I></I>

Souligné <U></U> (non officiel)

Rayé <STRIKE></STRIKE> (non officiel)

Rayé <S></S> (non officiel)

Indice <SUB></SUB>

Exposant <SUP></SUP>

Imprimé <TT></TT> (présenté dans une police de caractères à simple espacement)

Préformaté <PRE></PRE> (affiche le texte dans son format original)

Largeur <PRE WIDTH=?></PRE> (s'applique aux caractères)

Centré < CENTER></CENTER> [*] (pour le texte et les images)

Clignotement <BLINK>< /BLINK> (étiquette tournée en dérision)

Grandeur de la police <FONT SIZE=?></FONT> (entre 1-7)

Changement de la grandeur de la police <FONTSIZE=+|-?></FONT>

Grandeur de la police de base <BASEFONT SIZE=?> (entre 1-7; par défaut 3)

Couleur de la police <FONT COLOR="#$$$$$$"></FONT>

Sélection de fonte

<FONT FACE="***"></FONT>

Texte en multi-colonnes

<MULTICOL COLS=?></MULTICOL>

Longueur de la colonne

<MULTICOL GUTTER=?></MULTICOL>

(défaut est 10 pixels)

Largeur de la colonne

<MULTICOL WIDTH=?></MULTICOL>

Espaceur

<SPACER>

Type d'espaceur

<SPACER TYPE=horizontal| vertical|block>

Grandeur d'espaceur

<SPACER SIZE=?>

Dimensions de l'espaceur

<SPACER WIDTH=? HEIGHT=?>

Alignement de l'espaceur

<SPACER ALIGN=left|right|center>

Solenne · Réponse postée le 03-11-2009 à 21:37:27

LIENS ET IMAGES

Lier quelque chose <A HREF="URL"></A>

Lier un pointeur <A HREF="URL#***"></A> (si c'est dans un autre document)

<A HREF="#***">< /A> (si c'est dans le même document)

Fenêtre cible <A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"></A>

Définition du pointeur <A NAME="***"></A>

Relation

<A REL="***"></A>

(pas largement implanté)

Relation inverse

<A REV="***"></A>

(pas largement implanté)
Afficher une image <IMG SRC="URL">

Alignement <IMG SRC="URL"ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>

Alignement <IMG SRC="URL" ALIGN=LEFT|RIGHT|TEXTTOP|
ABSMIDDLE|BASELINE|ABSBOTTOM>

Alternative <IMG SRC="URL" ALT="***"> (si l'image n'est pas affichée)

Carte-image <IMG SRC="URL" ISMAP> (requiert un exécutable)

Carte-image client <IMG SRC="URL" USEMAP="URL"> (requiert un exécutable)

Nom de la carte <MAP NAME="***"></MAP> (décrit la carte)

Sections de la carte <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>

Dimensions <IMG SRC="URL" WIDTH="?" HEIGHT="?"> (en pixels)

Bordure <IMG SRC="URL" BORDER=?> (en pixels)

Espace environnant <IMG SRC="URL" HSPACE=? VSPACE=?> (en pixels)

Low-Res Proxy <IMG SRC="URL"LOWSRC="URL">

Appel client

<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">

Objet encastré

<EMBED SRC="URL">

(insert un objet dans la page)

Dimension de l'objet

<EMBED SRC="URL" WIDTH=? HEIGHT=?>

Solenne · Réponse postée le 03-11-2009 à 21:38:36

SÉPARATEURS

Paragraphe <P></P> [* ] (étiquette de fin souvent pas nécessaire)

Alignement du texte <P ALIGN=LEFT|CENTER|RIGHT></P> (double retour)

Fin de ligne <BR> (simple retour)

Alignement forcé <BR CLEAR=LEFT|RIGHT|ALL>

Ligne horizontale <HR>

Alignement <HR ALIGN=LEFT|RIGHT|CENTER>

Épaisseur <HR SIZE=?> (en pixels)

Largeur <HR WIDTH=?> (en pixels)

Largeur <HR WIDTH=%> (en tant que pourcentage de la largeur de la page)

Ligne pleine <HR NOSHADE> (sans l'effet 3D)

Sans-coupure <NOBR></NOBR> (prévient la coupure des lignes)

Coupure de mot <WBR> (endroit où couper une ligne si nécessaire)

Solenne · Réponse postée le 03-11-2009 à 21:39:51

LISTES

Liste non-ordonnée <UL><LI></UL> (<LI> avant chaque item de la liste)

Compacte

<UL COMPACT></UL>

Type d'indicateur <UL TYPE=DISC|CIRCLE|SQUARE> (pour la liste entière)

<LI TYPE=DISC|CIRCLE|SQUARE> (celui-ci & subséquent)

Liste ordonnée <OL><LI></OL> (<LI> avant chaque item de la liste)

Compacte

<OL COMPACT></OL>

Type de nombres <OL TYPE=A|a|I|i|1> (pour la liste entière)

<LI TYPE=A|a|I|i|1> (celui-ci & subséquent)

Nombre de départ <OL START=?> (pour la liste entière)

<LI VALUE=?> (celui-ci & subséquent)

Liste de définitions <DL><DT><DD></DL> (<DT>=terme, <DD>=définition)

Compacte

<DL COMPACT></DL>

Liste de menus <MENU><LI></MENU> (<LI> avant chaque item de la liste)

Compacte

<MENU COMPACT></MENU>

Liste de répertoires <DIR><LI></DIR> (< LI> avant chaque item de la liste)

Compacte

<DIR COMPACT></DIR>

Solenne · Réponse postée le 03-11-2009 à 21:40:35

ARRIÈRE-PLAN ET COULEURS

Couleur d'arrière-plan <BODY BGCOLOR="#$$$$$$"> [*] (ordre est rouge/vert/bleu)

Texture <BODY BACKGROUND="URL"> [*]

Couleur du texte <BODY TEXT="#$$$"> [*]

Couleur des liens <BODY LINK="#$$$"> [*]

Couleur des liens visités <BODY VLINK="#$$$"> [*]

Liens actifs <BODY ALINK="#$$$">

Solenne · Réponse postée le 03-11-2009 à 21:41:18

CARACTÈRES SPÉCIAUX

code ISO &#?; (où le ? représente le code ISO8859-1)

< <

> >

& &

" "

Registered TM ®

Copyright ©

Espace  

Solenne · Réponse postée le 03-11-2009 à 21:42:22

FORMULAIRES

Formulaire <FORM ACTION="URL" METHOD=GET|POST></FORM>

Transfert de fichier <FORM ENCTYPE="multipart/form-data></FORM>

Champ d'entrée de données <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN| SUBMIT|RESET">

Nom du champ <INPUT NAME="***">

Valeur du champ <INPUT VALUE="***">

Vérifié? <INPUT CHECKED> (boutons de vérification et boutons radio)

Grandeur du champ <INPUT SIZE=?> (en caractères)

Longueur maximum <INPUT MAXLENGTH=?> (en caractères)

Liste de sélection <SELECT></SELECT>

Nom d'une liste <SELECT NAME="***"></SELECT>

Nombre d'options <SELECT SIZE=?></SELECT>

Choix multiples <SELECT MULTIPLE> (permet une sélection multiple)

Option < OPTION> (items qui peuvent être sélectionnés)

Option par défaut <OPTION SELECTED>

Grandeur de la boîte d'entrée de données <TEXTAREA ROWS=? COLS=?>
</TEXTAREA>

Nom de la boîte <TEXTAREA NAME="***">
</TEXTARE A>

"Wrap Text" <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL> </TEXTAREA>

Solenne · Réponse postée le 03-11-2009 à 21:44:01

TABLEAUX

Définition d'un tableau <TABLE></TABLE> [*]

Bordure du tableau <TABLE BORDER=?></TABLE>

Espace des cellules <TABLE CELLSPACING=?>

Espace de la bordure des cellules <TABLE CELLPADDING=?>

Largeur <TABLE WIDTH=?> (en pixels)

Largeur <TABLE WIDTH=%> (pourcentage de la page)

Lignes du tableau <TR></TR>

Alignement <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

Cellules du tableau <TD></TD> (doit apparaître à l'intérieur des lignes d'un tableau)

Alignement <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

Sans-coupure <TD NOWRAP>

Débordement d'une colonne <TD COLSPAN=?>

Débordement des lignes <TD ROWSPAN=?>

Largeur <TD WIDTH=?> (en pixels)

Largeur <TD WIDTH=%> (en pourcentage du tableau)

Couleur de cellule

<TD BGCOLOR="#$$$$$$">

En-tête du tableau <TH></TH> (semblable aux données, centré et gras)

Alignement <TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>

Sans-retour <TH NOWRAP>

Débordement de colonnes <TH COLSPAN=?>

Débordement de lignes <TH ROWSPAN=?>

Largeur <TH WIDTH=?> (en pixels)

Largeur <TH WIDTH=%> (en pourcentage du tableau)

Couleur de cellule

<TH BGCOLOR="#$$$$$$">

Légende du tableau <CAPTION></CAPTION>

Alignement <CAPTION ALIGN=TOP|BOTTOM> (sur ou sous le tableau)

Solenne · Réponse postée le 03-11-2009 à 21:45:29

CADRES

Cadre du document <FRAMESET></FRAMESET> (au lieu de <BODY>)

Hauteur des lignes <FRAMESET ROWS=,,,></FRAMESET> (en pixels ou pourcentage)

Hauteur des lignes <FRAMESET ROWS=*></FRAMESET> (* = grandeur relative)

Largeur des colonnes <FRAMESET COLS=,,,></FRAMESET> (en pixels ou pourcentage)

Largeur des colonnes <FRAMESET COLS=*></FRAMESET> (* = grandeur relative)

Lageur de la bordure

<FRAMESET BORDER=?>

Bordures

<FRAMESET FRAMEBORDER="yes|no">

Couleur de la bordure

<FRAMESET BORDERCOLOR="#$$$$$$">

Définition d'un cadre <FRAME> (items d'un cadre individuel)

Afficher le document <FRAME SRC="URL">

Nom du cadre <FRAME NAME="***"|_blank|_self|_parent|_top>

Largeur de la marge <FRAME MARGINWIDTH=?> (marges à gauche et à droite)

Hauteur de la marge <FRAME MARGINHEIGHT=?> (marges en haut et en bas)

Défilement du texte <FRAME SCROLLING="YES|NO|AUTO">

Défilement du texte <FRAME NORESIZE>

Bordures

<FRAME FRAMEBORDER="yes|no">

Couleur de la bordure

<FRAME BORDERCOLOR="#$$$$$$">

Contenu non-encadré <NOFRAMES></NOFRAMES> (pour les lecteurs WWW incapables d'utiliser les cadres)

Solenne · Réponse postée le 03-11-2009 à 21:46:27

JAVA

Applet

<APPLET></APPLET>

Nom de fichier applet

<APPLET CODE="***">

Paramètres

<APPLET PARAM NAME="***">

Position de l'applet

<APPLET CODEBASE="URL">

Identificateur Applet

<APPLET NAME="***">

(pour faire référence ailleurs dans une page)

Alternative en texte

<APPLET ALT="***">

(pour les navigateurs non-java)

Alignement

<APPLET ALIGN="LEFT|RIGHT|CENTER">

Grandeur

<APPLET WIDTH=? HEIGHT=?>

(en pixels)

Espacement

<APPLET HSPACE=? VSPACE=?>

(en pixels)

Solenne · Réponse postée le 03-11-2009 à 21:47:16

DIVERS

Commentaires  (n'est pas affiché par le lecteur WWW)

Prologue HTML 3.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD W3 HTML 3.2//EN"> [*]

Indicateur de recherche <ISINDEX> (indique un index de recherche)

Ligne de commande <ISINDEX PROMPT="***"> (texte pour indiquer l'entrée de données)

Envoie de la recherche <A HREF="URL?***"></A> (utiliser un point d'interrogation)

URL de ce fichier <BASE HREF="URL"> (doit être dans l'en-tête du document)

Nom de base de la fenêtre <BASE TARGET="***"> (doit être dans l'en-tête du document)

Relation <LINK REV="***" REL="***" HREF="URL"> (dans l'en-tête du document)

Information META <META> (dans l'en-tête du document)

Feuilles de styles

<STYLE></STYLE>

(pas supporté largement)

Scripts

<SCRIPT></SCRIPT>

(pas supporté largement)

Caroline · Réponse postée le 03-11-2009 à 21:51:27

Bravoo

Loic · Réponse postée le 28-10-2011 à 08:06:35

Très utile.

Alex31 · Réponse postée le 14-10-2012 à 15:02:59

Super Solenne, ça me rappel mes débuts et découvertes du html il y a quelques années.

On vas le poursuivre un peut

LES CODES PLAYERS
Windows Media Player :

<object id="MediaPlayer" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" type="application/x-oleobject" standby="Loading Microsoft Windows Media Player components..." height=128" width="240" align="absmiddle">
<param name="enabled" value="true" />
<param name="defaultframe" />
<param name="enablecontextmenu" value="false" />
<param name="stretchtofit" value="true" />
<param name="windowlessvideo" value="true" />
<param name="url" value="ma-zik.mp3" />
<param name="autostart" value="false" />
<param name="uimode" value="full" />
<param name="volume" value="30" />
<embed type="application/x-mplayer"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
SRC="ma-zik.mp3"
name="MediaPlayer"
width=240
height=128
autostart=1
showcontrols=1> </embed>
</object>

on peut remplacer .mp3 par .asx ou .wmp ou tous autres formats de windows.

Real Player :

<OBJECT CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" WIDTH="175" HEIGHT="30">

<PARAM NAME="CONTROLS" VALUE="ControlPanel">
<PARAM NAME="CONSOLE" VALUE="Clip1">
<PARAM NAME="AUTOSTART" VALUE="false">
<PARAM NAME="nologo" VALUE="true">
<PARAM NAME="NOJAVA" VALUE="true">
<PARAM NAME="SRC" VALUE="ma-video.rpm">
<PARAM NAME="LOOP" VALUE="false">

<EMBED SRC="ma-video.rpm" WIDTH="175" HEIGHT="30"
TYPE="audio/x-pn-realaudio-plugin"
NOLOGO="true" NOJAVA="true" CONTROLS="ControlPanel" CONSOLE="Clip1"
AUTOSTART="false" LOOP="false"> </EMBED>

</OBJECT>

OU ALORS :

<object id="RealPlayer" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="384" height="288">
<param name="SRC" value="mavideo.rpm">
<param name="CONTROLS" value="ImageWindow">
<param name="AUTOSTART" value="0">
<param name="NOLABELS" value="true">
<param name="RESET" value="true">
<param name="CONSOLE" value="musik">
<embed width="384" height="288" src="mavideo.rpm" loop="false" console="musik" type="audio/x-pn-realaudio-plugin" autostart="false" controls="ImageWindow">
</embed> </object>

<object id="RealPlayer" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="384" height="60">
<param name="SRC" value="mavideo.rpm">
<param name="CONTROLS" value="all">
<param name="AUTOSTART" value="0">
<param name="NOLABELS" value="true">
<param name="RESET" value="true">
<param name="CONSOLE" value="musik">
<embed width="384" height="60" src="mavideo.rpm" loop="false" console="musik" type="audio/x-pn-realaudio-plugin" autostart="false" controls="all">
</embed> </object>

Quick Time Player :

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="160" HEIGHT="16"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">

<PARAM name="SRC" VALUE="ma-piste.mp3">
<PARAM name="AUTOPLAY" VALUE="false">
<PARAM name="LOOP" VALUE="false">
<PARAM name="CONTROLLER" VALUE="true">

<EMBED type="audio/x-mpegurl" src="ma-piste.mp3" autoplay="false" width="160px"

height="16px" loop="false" controller="true" PLUGINSPAGE="http://www.apple.com/quicktime/download/">
</EMBED>

</OBJECT>

Et encore je vous gatte, car après maintes bouts de codes pour VLC, chez moi avec firefox un seul fonctionne réellement :

<div id="VLCplayerother"><object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab#Version=0,8,6,0"
width="420"
height="342"
id="vlc-ie"
events="True">
<param name="Src" value="ma-video.vlc"/>
<param name="ShowDisplay" value="True"/>
<param name="AutoLoop" value="False"/>
<param name="AutoPlay" value="True"/>
<param name="Volume" value="50"/>

<embed pluginspage="http://www.videolan.org"
type="application/x-vlc-plugin" progid="VideoLAN.VLCPlugin.2"
width="420"
height="342"
autoplay="yes"
loop="no"
target="ma-video.vlc"
id="vlc-other">
</embed>

Et pour finir avec le flash : soit on met le code d'un lecteur et on doit se prendre un peut la tête avec des fichiers à mettre par ftp, soit on peut faire simple voir même très simple :

<source src="video/ma-video.ogg" />

bien entendu on peut remplacer .ogg par .avi ou .mpg ou .flv ou .wmv ou .mkv ou .mp4 soit ou .mp3 etc.

• Annonce ToutSurTout

Message 1 Discussion postée le 03-11-2009 à 21:30:37

Le Guide Rapide Du Langage HTML

Message 2 Réponse postée le 03-11-2009 à 21:31:02

Re: Le Guide Rapide Du Langage HTML

Message 3 Réponse postée le 03-11-2009 à 21:33:12

Re: Le Guide Rapide Du Langage HTML

Message 4 Réponse postée le 03-11-2009 à 21:35:40

Re: Le Guide Rapide Du Langage HTML

Message 5 Réponse postée le 03-11-2009 à 21:37:27

Re: Le Guide Rapide Du Langage HTML

Message 6 Réponse postée le 03-11-2009 à 21:38:36

Re: Le Guide Rapide Du Langage HTML

Message 7 Réponse postée le 03-11-2009 à 21:39:51

Re: Le Guide Rapide Du Langage HTML

Message 8 Réponse postée le 03-11-2009 à 21:40:35

Re: Le Guide Rapide Du Langage HTML

Message 9 Réponse postée le 03-11-2009 à 21:41:18

Re: Le Guide Rapide Du Langage HTML

Message 10 Réponse postée le 03-11-2009 à 21:42:22

Re: Le Guide Rapide Du Langage HTML

Message 11 Réponse postée le 03-11-2009 à 21:44:01

Re: Le Guide Rapide Du Langage HTML

Message 12 Réponse postée le 03-11-2009 à 21:45:29

Re: Le Guide Rapide Du Langage HTML

Message 13 Réponse postée le 03-11-2009 à 21:46:27

Re: Le Guide Rapide Du Langage HTML

Message 14 Réponse postée le 03-11-2009 à 21:47:16

Re: Le Guide Rapide Du Langage HTML

Message 15 Réponse postée le 03-11-2009 à 21:51:27

Re: Le Guide Rapide Du Langage HTML

Message 16 Réponse postée le 28-10-2011 à 08:06:35

Re: Le Guide Rapide Du Langage HTML

Message 17 Réponse postée le 14-10-2012 à 15:02:59

Re: Le Guide Rapide Du Langage HTML