HTML (aide mémoire)

imagesize:32x32 (recherche Google)
filetype:pdf
intext:"toto"

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




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


<font face="Times" size="1"><b><i>(La cave à Momo)</i></b></font>

<a href="#exemple">
<a name="exemple">

Codes spéciaux

Insécable

&#8209;
Espace
&nbsp;


<
&lt;
>
&gt;

& (esperluette)
&#38;
&nbsp; (espace non cécable)
&#160; decimal (espace)
&#xA0; hexa (espace)

Remarque
<!--       -->

Ω Ω
&Omega;
&#937;

µ
&micro;
&#181;


&#8709;

Ø
&Oslash;


&#x20AC;
&#8364;
&euro;

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

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

¿
&iquest;
(Alt-168 pour le ¿)

¡
&iexcl;
(Alt-173 poiur le ¡)

[
&#91;

]
&#93;

(obèle) (ne fonctionne pas avec : "MS Sans Serif - Windows")
&dagger;
&#86;
&#134;
ou
Ɨ
&#x197;


&#9733;


&#9734;


&uarr;


&darr;



<font size="5">&#9633;</font>

Noire ♩
&#9833;
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"

Police MS Sans Serif
Arial
Geneva
Helvetica
Verdana

Intégrer à la feuille de Style pour le body
<STYLE type="text/css">
BODY {
margin-top:0;
font-family: MS Sans serif, Geneva, Arial, Helvetica ;
font-size: 10pt;
}
</STYLE>


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';" />

<img src="small-image.png" alt="Image" onmouseover="javascript:this.src='image.png';" onmouseout="javascript:this.src='small-image.png';" />

Pour ajuster la taille des deux photos, plus image cliquable.
<a href="simage.jpg" target="_blank"> <img src="simage.jpg" onmouseover="javascript:this.src='image-grande.jpg';" onmouseout="javascript:this.src='simage.jpg';" /></a>



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


Bordure bicolore
box-3{
  background-color: rebeccapurple;
  position: relative;
  border: 8px solid red;
}

.box-3::before{
  content: " ";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 8px solid green;
}

Here, we used a border property to create a red exterior border above the box. We set the green interior border with absolute positioning, and inset it using the top, left, bottom, and right values. These inset values adjust the spacing between the two borders.


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">
<!--
a {text-decoration : none; font-weight : bold;} (bleu par défaut)
a:active{color:red}
a:hover {text-decoration : underline;} (option : overline)
a:visited {color: blue;}
//-->
</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)
&#12516;&#12510;&#12495; &#12491;&#12517;&#12540;&#12473; = 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">
<hr width="50%">



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
Ech.Nom HTMLTraductionRVB
 aquaeau#00FFFF
 blacknoir#000000
 bluebleu#0000FF
 fuchsiafuchsia#FF00FF
 graygris#808080
 greenvert#008000
 limelime, citron vert#00FF00
 maroonmarron#800000
 navybleu marine#000080
 olivevert olive#808000
 purpleviolet#800080
 redrouge#FF0000
 silverargent#C0C0C0
 tealsarcelle#008080
 whiteblanc#FFFFFF
 yellowjaune#FFFF00


Ech.Nom HTMLTraductionRVB
 alicebluebleu Alice#F0F8FF
 antiquewhiteblanc antique#FAEBD7
 aquaeau#00FFFF
 aquamarineaigue-marine#7FFFD4
 azureazurin#F0FFFF
 beigebeige#F5F5DC
 bisquebisque#FFE4C4
 blacknoir#000000
 blanchedalmondamande blanchi#FFEBCD
 bluebleu#0000FF
 bluevioletparme bleuté#8A2BE2
 brownbrun#A52A2A
 burlywoodbois dur#DEB887
 cadetbluepétrole clair#5F9EA0
 chartreusevert chartreuse#7FFF00
 chocolatechocolat#D2691E
 coralcorail#FF7F50
 cornflowerbluebleuet#6495ED
 cornsilkjaune maïs doux#FFF8DC
 crimsonpourpre#DC143C
 cyancyan#00FFFF
 darkbluebleu sombre#00008B
 darkcyancyan sombre#008B8B
 darkgoldenrodjaune paille sombre#B8860B
 darkgraygris cliar (!)#A9A9A9
 darkgreenvert sombre#006400
 darkkhakikaki sombre#BDB76B
 darkmagentamagenta sombre#8B008B
 darkolivegreenvert olive sombre#556B2F
 darkorangeorange sombre#FF8C00
 darkorchidorchidée sombre#9932CC
 darkredrouge sombre#8B0000
 darksalmonsaumon sombre#E9967A
 darkseagreenvert océan sombre#8FBC8F
 darkslatebluebleu ardoise sombre#483D8B
 darkslategraygris ardoise sombre#2F4F4F
 darkturquoiseturquoise sombre#00CED1
 darkvioletviolet sombre#9400D3
 deeppinkrose profond#FF1493
 deepskybluebleu ciel profond#00BFFF
 dimgraygris rabattu#696969
 dodgerblue?#1E90FF
 firebrickrouge brique#B22222
 floralwhiteblanc floral#FFFAF0
 forestgreenvert forêt#228B22
 fuchsiafuchsia#FF00FF
 gainsboro?#DCDCDC
 ghostwhiteblanc spectral#F8F8FF
 goldor#FFD700
 goldenrodjaune paille#DAA520
 graygris#808080
 greenvert#008000
 greenyellowjaune-vert#ADFF2F
 honeydewmiellé#F0FFF0
 hotpinkrose chaud#FF69B4
 indianredrouge indien#CD5C5C
 indigoindigo#4B0082
 ivoryivoire#FFFFF0
 khakikaki#F0E68C
 lavenderlavande#E6E6FA
 lavenderblushlavande rougeâtre#FFF0F5
 lawngreenvert prairie#7CFC00
 lemonchiffonjaune chiffoné ?#FFFACD
 lightbluebleu clair#ADD8E6
 lightcoralcorail clair#F08080
 lightcyancyan clair#E0FFFF
 lightgoldenrodyellowjaune paille clair#FAFAD2
 lightgreenvert clair#90EE90
 lightgreygris clair#D3D3D3
 lightpinkrose clair#FFB6C1
 lightsalmonsaumon clair#FFA07A
 lightseagreenvert océan clair#20B2AA
 lightskybluebleu ciel clair#87CEFA
 lightslategraygris ardoise clair#778899
 lightsteelbluebleu acier clair#B0C4DE
 lightyellowjaune clair#FFFFE0
 limecitron vert#00FF00
 limegreencitron vert foncé#32CD32
 linenblanc de lin#FAF0E6
 magentamagenta#FF00FF
 maroonmarron#800000
 mediumaquamarineaigue-marine moyen#66CDAA
 mediumbluebleu moyen#0000CD
 mediumorchidorchidée moyen#BA55D3
 mediumpurplelavande#9370DB
 mediumseagreenvert océan moyen#3CB371
 mediumslatebluebleu ardoise moyen#7B68EE
 mediumspringgreenvert printemps moyen#00FA9A
 mediumturquoiseturquoise moyen#48D1CC
 mediumvioletredrouge violacé moyen#C71585
 midnightbluebleu nuit#191970
 mintcreamblanc mentholé#F5FFFA
 mistyroserose voilé#FFE4E1
 moccasinbeige mocassin#FFE4B5
 navajowhiteblanc navarro#FFDEAD
 navybleu marine#000080
 oldlacevieux blanc#FDF5E6
 olivevert olive#808000
 olivedrabvert olive terne#6B8E23
 orangeorange#FFA500
 orangeredrouge orangé#FF4500
 orchidorchidée#DA70D6
 palegoldenrodjaune paille pâle#EEE8AA
 palegreenvert pâle#98FB98
 paleturquoiseturquoise pâle#AFEEEE
 palevioletredrouge violacé pâle#DB7093
 papayawhippapaye délavé#FFEFD5
 peachpuffpêche passé#FFDAB9
 perupérou#CD853F
 pinkrose#FFC0CB
 plumprune#DDA0DD
 powderbluebleu poudré#B0E0E6
 purpleviolet#800080
 redrouge#FF0000
 rosybrownbois de rose#BC8F8F
 royalbluebleu roi#4169E1
 saddlebrowncuir#8B4513
 salmonsaumon#FA8072
 sandybrownbrun sable#F4A460
 seagreenvert océan#2E8B57
 seashellcoquillage#FFF5EE
 siennaterre-de-sienne#A0522D
 silverargent#C0C0C0
 skybluebleu ciel#87CEEB
 slatebluebleu ardoise#6A5ACD
 slategraygris ardoise#708090
 snowblanc neigeux#FFFAFA
 springgreenvert printemps#00FF7F
 steelbluebleu acier#4682B4
 tanbrun tané#D2B48C
 tealsarcelle#008080
 thistlechardon#D8BFD8
 tomatorouge tomate#FF6347
 turquoiseturquoise#40E0D0
 violetparme#EE82EE
 wheatblé#F5DEB3
 whiteblanc#FFFFFF
 whitesmokeblanc fumée#F5F5F5
 yellowjaune#FFFF00
 yellowgreenvert 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