HTML

HTML (aide mémoire)

imagesize:32x32 (recherche Google)

Spécial (Lyric)
[00:00.00]
[00:00.01]
[00:00.02]
♪
♫
♬

À = alt 183
Ç = alt 128
È = alt 212
É = alt 144
Ê = alt 210

Codes spéciaux

Insécable
‑
‑
Espace
 

<
<
>
>

& (esperluette)
&
  (espace non cécable)
  decimal (espace)
  hexa (espace)

Remarque


Ω Ω
Ω
Ω

µ
µ
µ

∅
∅

Ø
Ø

€
€
€
€

œ (ne fonctionne pas avec : "MS Sans Serif - Windows")
&oelig;
œ


Œ (ne fonctionne pas avec : "MS Sans Serif - Windows")
&OEelig;
Œ


¿
¿
(Alt-168 pour le ¿)

¡
¡
(Alt-173 poiur le ¡)

[
[

]
]

† (obèle) (ne fonctionne pas avec : "MS Sans Serif - Windows")
&dagger;
V

ou
Ɨ
Ɨ

★
★

☆
☆

↑
↑

↓
↓

□
<font size="5">□</font>

Noire ♩
♩
Croche ♪
&9834;
Croches ramées ♫
&9835;
Doubles croches ramées ♬
&9836;
Bémol ♭
&9837;
Bécarre ♮
&9838;
Dièse ♯
&9839;

lien caractères spéciaux
lien polices
lien Caractères phonétiques

Largeur hauteur d'une image
width="110" height="99"

Texte font size="1" align="right" (font ne doit plus être utilisé mais remplacer par style)

face
color
size : de 1 à 7 (unité par défaut le point pt)
align : left ou right ou center ou justify
title
dir : rtl ou ltr (par défaut de G à D)
style : "text-decoration:underline"
class

Style
style="font-family: Arial ; font-size: 10pt;"

Remplacement de <b>
<span style="font-weight:normal">(page 2)</span>

Une image qui change au passage de la souris <img src="image-1.png"
onmouseover="this.src='image-2.png';"
onmouseout="this.src='image-1.png';">
</img>

Exemple : lancement d'un GIF animé pour garder du temps processeur
<img src="image1.png" alt="Image" onmouseover="javascript:this.src='image2.gif';" onmouseout="javascript:this.src='image1.png';" />

Exemple concret :
<img src="sesenta.jpg" onmouseover="javascript:this.src='sesenta.gif';" onmouseout="javascript:this.src='sesenta.jpg';" />

Pour les tableaux <table width="600" style="font-family: MS Sans serif, Geneva, Arial, Helvetica; font-size: 10pt";>
font family:serif ou sans-serif ou cursive ou fantasy ou monospace;
font-weight:bold;
background:black;
color: white ou #FFFFFF;

<table style="font-family: MS Sans serif, Geneva, Arial, Helvetica; font-size: 10pt">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

<tr valign="top"> aligne toutes les colonnes vers le haut
<tr valign="bottom"> aligne toutes les colonnes vers le bas
<tr valign="center"> aligne toutes les colonnes au centre

<width="100" align="center"> fixe la largeur de la cellule et l'aligne

Groupe les cellules
<th colspan="2"> cellules horizontales centre + gras
<th rowspan="2"> cellules verticales gras

<td colspan="2"> cellules horizontales
<td rowspan="2"> cellules verticales

Pour table
border="1"
cellspacing="0"
cellpadding="0"
align="center"
width="600"
style="font-family: MS Sans serif, Geneva, Arial, Helvetica; font-size: 10pt"
cellspacing="0"
cellpadding="0"

Mettre 2 tableaux cote à cote
<tablestyle="display:inline">

1	2
3	4

1	2
3	4

tbody

Pour tr
bordercolor="#ffcc66"
align="middle"

Pour td
bordercolor="#ffcc66"

Bordure d'une cellule
<td style="border: 2px #000000 double;">

border-style: ridge;

border-style: ridge; border-color: coral red blue green;

border-style: groove;

border-style: groove; border-color: yellow;

border-style: inset;

border-style: inset; border-color: yellow;

border-style: outset;

border: double;

5px #000000 double

5px blue solid

5px red dotted

1px #808080 dashed

border: 5px #808080; border-style: dotted solid double dashed

border-style: dotted solid double dashed; border-color: coral;

Fond de couleur d'une cellule
<td bgcolor="darkviolet">

Texte blanc sur fond bleu

Couleur du texte
<th bgcolor="mediumblue" style="color: white;">Texte blanc sur fond bleu</th>

Texte blanc sur fond bleu

Image de fond de cellule
<td background="test.jpg">

En CSS
<style> .bluecolor { background: blue; } .blueimage { background-image: url("blue.jpg"); } </style>
<td class="bluecolor">

Body
<body style="background-image:url(image/top.jpg)">

Pre (Préformaté) <pre> </pre>

Options
<pre style="
font-family: MS Sans serif, Geneva, Arial, Helvetica;
font-size: 10pt;
margin-top:-5;
background-color: red;
color: white;
>

Nombre de caractères définis
<pre width="80">... </pre> (ne fonctionne pas)

Sens de lecture
<pre dir="ltr"> </pre>
LTR: de gauche à droite.
RTL: de droite à gauche.

<pre class="nom"> </pre>

<pre id="nom"> </pre>

<pre lang="fr"> </pre>
<pre lang="fr" xml:lang="fr">texte XHTML</pre>

<pre xml:space="reserve"> Texte XHTML</pre>
preserve, chaque espace est préservé.
default, plusieurs espaces à la suite, ne représentent qu'un espace.

Meta <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> = clavier français
<meta http-equiv="Refresh" content="10;URL='http://free.fr'" target="_blank"> = redirection 10 secondes
<meta http-equiv="pragma" content="no-cache"> = interdit la mise en cache

Adresse email <script language="JavaScript" type="text/javascript">
var login = 'tutu';
var domaine = 'eniris.com';
document.write('<a href=\"mailto:' + login + '@' + domaine + '\">');
document.write(login + '@' + domaine + '</a>');
// --> </script>

Lien hypertexte Lien interne
<a href="#texte">
<a name="texte">

Couleur bleu, gras, sans soulignement
<style type="text/css">

</style>

Balises
_blank - ouvre le document dans un nouvel onglet.
_parent - ouvre le doucement à l'emplacement d'origine.
_self - ouvre dans la même fenêtre (par défaut),ne sert à rien.
_top - Opens the linked document in the full body of the window
framename - Opens the linked document in the named iframe

Les boutons et/ou menus Menu rotatif sur lui-même
http://gmz.ek.la/menu-rotatif-css-a113048510

Menu Dropdown

Balise de remplacement Target
<a href="http://www.lesite.com" target="_blank">Le site</a>
Devient :
<a href="http://www.lesite.com" onclick="window.open(this.href);return false">Le site</a>

Réglage de l'ouverture
IE = Outils -> Options Internet -> Général -> [onglet] Paramètres -> Lorsqu'une fenêtre publicitaire est détectée :

Insérer du son

http://beta.rdsign.net/article_81

Feuille de style
Comment ça marche

Pour les langues étrangères

Notepad ++ et Ctrl+E

ヤマハニュース = Nouvelle de Yamaha (Ymaha News - Actualité Yamaha)
ヤマハ ニュース = Nouvelle de Yamaha

Encodeur Unicode

Table Unicode (ne fonctionne pas avec IE)

Traducteur

Clavier

Balise HR (Horizontal Rule)
La couleur ne marche pas avec Opera et Netscape

Options
align=
noshade=
size=
width=
color=

<hr size="5">

CSS

Pour mettre un fond de couleur pour un texte/titre.

<style type="text/css">
.bleu {background:dodgerblue;padding-left:5px;padding-right:5px}
</style>

<p class="bleu">Fond pour un titre</p> (provoque un saut de ligne)

Fond pour un titre

ou

<font class="bleu" style="display:block" >Fond pour un titre</font> (sans BR) Fond pour un titre

<p class="bleu" style="display:inline">Fond pour un mot</p>

Fond pour un mot

ou
<font class="bleu" >Fond pour un mot</font>
Fond pour un mot

Pour mettre un lien en couleur.

<a style="color: rgb(0, 204, 204);" href=" ">Lien en couleur</a>
Lien en couleur

Couleur de l'encre
color

<hr width="90%">

Font

font: italic bold 12px/30px Georgia, serif;
font Family:"MS Sans serif, Geneva, Arial, Helvetica";
font Family:serif ou sans-serif ou cursive ou fantasy ou monospace;
serif (ex: Times) - sans-serif (ex: Arial ou Helvetica) - cursive (ex: Zapf-Chancery) - fantasy (ex: Western) - monospace (ex: Courier)
font Style: italic
font Variant:small-caps
font Weight: bold ou bolder ou lighter ou 100 ou 200 ou 300 ou 400 ou 500 ou 600 ou 700 ou 800 ou 900
font Size: xx-small ou x-small ou small ou medium ou large ou x-large ou xx-large

Faire clignoté du texte avec IE pour les autres c'est BLINK

<script type="text/javascript">
if ( document.all )
{
function blink_show()
{
blink_tags = document.all.tags('blink');
blink_count = blink_tags.length;
for ( i = 0; i < blink_count; i++ )
{
blink_tags[i].style.visibility = 'visible';
}
window.setTimeout( 'blink_hide()', 700 );
}
function blink_hide()
{
blink_tags = document.all.tags('blink');
blink_count = blink_tags.length;
for ( i = 0; i < blink_count; i++ )
{
blink_tags[i].style.visibility = 'hidden';
}
window.setTimeout( 'blink_show()', 250 );
}
window.onload = blink_show;
}
</script>

Faire aouvrir une nouvelle fenêtre spécifique
<a href="#" onClick="window.open('fichier.png ','Morleghemr','toolbar=1, location=1, directories=1, status=01, scrollbars=1, resizable=1, copyhistory=0, menuBar=0, width=500, height=600');">

Lien
Pour caractère spéciaux

Codes de couleur

Nom HTML	Traduction	RVB
aqua	eau	#00FFFF
black	noir	#000000
blue	bleu	#0000FF
fuchsia	fuchsia	#FF00FF
gray	gris	#808080
green	vert	#008000
lime	lime, citron vert	#00FF00
maroon	marron	#800000
navy	bleu marine	#000080
olive	vert olive	#808000
purple	violet	#800080
red	rouge	#FF0000
silver	argent	#C0C0C0
teal	sarcelle	#008080
white	blanc	#FFFFFF
yellow	jaune	#FFFF00

Nom HTML	Traduction	RVB
aliceblue	bleu Alice	#F0F8FF
antiquewhite	blanc antique	#FAEBD7
aqua	eau	#00FFFF
aquamarine	aigue-marine	#7FFFD4
azure	azurin	#F0FFFF
beige	beige	#F5F5DC
bisque	bisque	#FFE4C4
black	noir	#000000
blanchedalmond	amande blanchi	#FFEBCD
blue	bleu	#0000FF
blueviolet	parme bleuté	#8A2BE2
brown	brun	#A52A2A
burlywood	bois dur	#DEB887
cadetblue	pétrole clair	#5F9EA0
chartreuse	vert chartreuse	#7FFF00
chocolate	chocolat	#D2691E
coral	corail	#FF7F50
cornflowerblue	bleuet	#6495ED
cornsilk	jaune maïs doux	#FFF8DC
crimson	pourpre	#DC143C
cyan	cyan	#00FFFF
darkblue	bleu sombre	#00008B
darkcyan	cyan sombre	#008B8B
darkgoldenrod	jaune paille sombre	#B8860B
darkgray	gris cliar (!)	#A9A9A9
darkgreen	vert sombre	#006400
darkkhaki	kaki sombre	#BDB76B
darkmagenta	magenta sombre	#8B008B
darkolivegreen	vert olive sombre	#556B2F
darkorange	orange sombre	#FF8C00
darkorchid	orchidée sombre	#9932CC
darkred	rouge sombre	#8B0000
darksalmon	saumon sombre	#E9967A
darkseagreen	vert océan sombre	#8FBC8F
darkslateblue	bleu ardoise sombre	#483D8B
darkslategray	gris ardoise sombre	#2F4F4F
darkturquoise	turquoise sombre	#00CED1
darkviolet	violet sombre	#9400D3
deeppink	rose profond	#FF1493
deepskyblue	bleu ciel profond	#00BFFF
dimgray	gris rabattu	#696969
dodgerblue	?	#1E90FF
firebrick	rouge brique	#B22222
floralwhite	blanc floral	#FFFAF0
forestgreen	vert forêt	#228B22
fuchsia	fuchsia	#FF00FF
gainsboro	?	#DCDCDC
ghostwhite	blanc spectral	#F8F8FF
gold	or	#FFD700
goldenrod	jaune paille	#DAA520
gray	gris	#808080
green	vert	#008000
greenyellow	jaune-vert	#ADFF2F
honeydew	miellé	#F0FFF0
hotpink	rose chaud	#FF69B4
indianred	rouge indien	#CD5C5C
indigo	indigo	#4B0082
ivory	ivoire	#FFFFF0
khaki	kaki	#F0E68C
lavender	lavande	#E6E6FA
lavenderblush	lavande rougeâtre	#FFF0F5
lawngreen	vert prairie	#7CFC00
lemonchiffon	jaune chiffoné ?	#FFFACD
lightblue	bleu clair	#ADD8E6
lightcoral	corail clair	#F08080
lightcyan	cyan clair	#E0FFFF
lightgoldenrodyellow	jaune paille clair	#FAFAD2
lightgreen	vert clair	#90EE90
lightgrey	gris clair	#D3D3D3
lightpink	rose clair	#FFB6C1
lightsalmon	saumon clair	#FFA07A
lightseagreen	vert océan clair	#20B2AA
lightskyblue	bleu ciel clair	#87CEFA
lightslategray	gris ardoise clair	#778899
lightsteelblue	bleu acier clair	#B0C4DE
lightyellow	jaune clair	#FFFFE0
lime	citron vert	#00FF00
limegreen	citron vert foncé	#32CD32
linen	blanc de lin	#FAF0E6
magenta	magenta	#FF00FF
maroon	marron	#800000
mediumaquamarine	aigue-marine moyen	#66CDAA
mediumblue	bleu moyen	#0000CD
mediumorchid	orchidée moyen	#BA55D3
mediumpurple	lavande	#9370DB
mediumseagreen	vert océan moyen	#3CB371
mediumslateblue	bleu ardoise moyen	#7B68EE
mediumspringgreen	vert printemps moyen	#00FA9A
mediumturquoise	turquoise moyen	#48D1CC
mediumvioletred	rouge violacé moyen	#C71585
midnightblue	bleu nuit	#191970
mintcream	blanc mentholé	#F5FFFA
mistyrose	rose voilé	#FFE4E1
moccasin	beige mocassin	#FFE4B5
navajowhite	blanc navarro	#FFDEAD
navy	bleu marine	#000080
oldlace	vieux blanc	#FDF5E6
olive	vert olive	#808000
olivedrab	vert olive terne	#6B8E23
orange	orange	#FFA500
orangered	rouge orangé	#FF4500
orchid	orchidée	#DA70D6
palegoldenrod	jaune paille pâle	#EEE8AA
palegreen	vert pâle	#98FB98
paleturquoise	turquoise pâle	#AFEEEE
palevioletred	rouge violacé pâle	#DB7093
papayawhip	papaye délavé	#FFEFD5
peachpuff	pêche passé	#FFDAB9
peru	pérou	#CD853F
pink	rose	#FFC0CB
plum	prune	#DDA0DD
powderblue	bleu poudré	#B0E0E6
purple	violet	#800080
red	rouge	#FF0000
rosybrown	bois de rose	#BC8F8F
royalblue	bleu roi	#4169E1
saddlebrown	cuir	#8B4513
salmon	saumon	#FA8072
sandybrown	brun sable	#F4A460
seagreen	vert océan	#2E8B57
seashell	coquillage	#FFF5EE
sienna	terre-de-sienne	#A0522D
silver	argent	#C0C0C0
skyblue	bleu ciel	#87CEEB
slateblue	bleu ardoise	#6A5ACD
slategray	gris ardoise	#708090
snow	blanc neigeux	#FFFAFA
springgreen	vert printemps	#00FF7F
steelblue	bleu acier	#4682B4
tan	brun tané	#D2B48C
teal	sarcelle	#008080
thistle	chardon	#D8BFD8
tomato	rouge tomate	#FF6347
turquoise	turquoise	#40E0D0
violet	parme	#EE82EE
wheat	blé	#F5DEB3
white	blanc	#FFFFFF
whitesmoke	blanc fumée	#F5F5F5
yellow	jaune	#FFFF00
yellowgreen	vert jaunâtre	#9ACD32

font-family: MS Sans serif, Geneva, Arial, Helvetica; - police du texte
font-size: 10pt; - taille du texte
margin-top:-5; - marge supérieur, négative
background-color: red; - couleur du fond
color: white; - couleur de l'écriture
text-decoration:underline; - soulignement

Liens
https://www.w3schools.com/html/html_tables.asp

Glossaire
TH = Table Head