HTML

Tous mes trucs & astuces en HTML

Etiquettes:

Comment bien gérer les caractères accentués dans les pages HTML

ISO-8859-1 ou UTF-8/16.

Quel encodage choisir pour afficher correctement tous les caractères accentués qu'il y a dans la langue française ?

Tous les caractères accentués de la langue française sont gérés par la norme ISO-8859-1.

En HTML, il y a une astuce qui consiste à ne pas s'occuper du type de l'encodage des caractères mais utiliser à la place le nom d'entité des caractères (entity name).

Grâce à cette technique, tous les caractères seront toujours affichés correctement.

Source http://www.w3schools.com/

Par exemple, au lieu d'écrire ceci dans une page HTML

<html>
<body>
<p>Ceci est un caractère accentué</p>
</body>
</html>

Qui pourrait provoquer un problème à l'affichage si le codage des caractères est mal défini (comme ceci)

Ceci est un caractÃ¨re accentuÃ©

Il vaut mieux écrire cela

<html>
<body>
<p>Ceci est un caractère accentué</p>
</body>
</html>

Ce qui donne comme résultat

Ceci est un caractère accentué

Plus besoin de se soucier de l'encodage du fichier.

Etiquettes:

Autres caractères supportés en HTML

Character	Entity Number	Entity Name	Description
Œ	Œ	&OElig;	capital ligature OE
œ	œ	&oelig;	small ligature oe
Š	Š	&Scaron;	capital S with caron
š	š	&scaron;	small S with caron
Ÿ	Ÿ	&Yuml;	capital Y with diaeres
ƒ	ƒ	&fnof;	f with hook
ˆ	ˆ	&circ;	modifier letter circumflex accent
˜	˜	&tilde;	small tilde
		&ensp;	en space
		&emsp;	em space
			thin space
‌	‌	&zwnj;	zero width non-joiner
‍	‍	&zwj;	zero width joiner
‎	‎	&lrm;	left-to-right mark
‏	‏	&rlm;	right-to-left mark
–	–	–	en dash
—	—	—	em dash
‘	‘	‘	left single quotation mark
’	’	’	right single quotation mark
‚	‚	&sbquo;	single low-9 quotation mark
“	“	“	left double quotation mark
”	”	”	right double quotation mark
„	„	&bdquo;	double low-9 quotation mark
†	†	&dagger;	dagger
‡	‡	&Dagger;	double dagger
•	•	•	bullet
…	…	…	horizontal ellipsis
‰	‰	&permil;	per mille
′	′	′	minutes
″	″	″	seconds
‹	‹	&lsaquo;	single left angle quotation
›	›	&rsaquo;	single right angle quotation
‾	‾	&oline;	overline
€	€	€	euro
™	™	™	trademark
←	←	←	left arrow
↑	↑	↑	up arrow
→	→	→	right arrow
↓	↓	↓	down arrow
↔	↔	↔	left right arrow
↵	↵	&crarr;	carriage return arrow
⌈	⌈	&lceil;	left ceiling
⌉	⌉	&rceil;	right ceiling
⌊	⌊	&lfloor;	left floor
⌋	⌋	&rfloor;	right floor
◊	◊	&loz;	lozenge
♠	♠	&spades;	spade
♣	♣	&clubs;	club
♥	♥	&hearts;	heart
♦	♦	&diams;	diamond

Etiquettes:

html

Caractères Grec supportés en HTML

Character	Entity Number	Entity Name	Description
Α	Α	Α	Alpha
Β	Β	Β	Beta
Γ	Γ	Γ	Gamma
Δ	Δ	Δ	Delta
Ε	Ε	Ε	Epsilon
Ζ	Ζ	Ζ	Zeta
Η	Η	Η	Eta
Θ	Θ	Θ	Theta
Ι	Ι	Ι	Iota
Κ	Κ	Κ	Kappa
Λ	Λ	Λ	Lambda
Μ	Μ	Μ	Mu
Ν	Ν	Ν	Nu
Ξ	Ξ	Ξ	Xi
Ο	Ο	Ο	Omicron
Π	Π	Π	Pi
Ρ	Ρ	Ρ	Rho
Σ	Σ	Σ	Sigma
Τ	Τ	Τ	Tau
Υ	Υ	Υ	Upsilon
Φ	Φ	Φ	Phi
Χ	Χ	Χ	Chi
Ψ	Ψ	Ψ	Psi
Ω	Ω	Ω	Omega
α	α	α	alpha
β	β	β	beta
γ	γ	γ	gamma
δ	δ	δ	delta
ε	ε	ε	epsilon
ζ	ζ	ζ	zeta
η	η	η	eta
θ	θ	θ	theta
ι	ι	ι	iota
κ	κ	κ	kappa
λ	λ	λ	lambda
μ	μ	μ	mu
ν	ν	ν	nu
ξ	ξ	ξ	xi
ο	ο	ο	omicron
π	π	π	pi
ρ	ρ	ρ	rho
ς	ς	&sigmaf;	sigmaf
σ	σ	σ	sigma
τ	τ	τ	tau
υ	υ	υ	upsilon
φ	φ	φ	phi
χ	χ	χ	chi
ψ	ψ	ψ	psi
ω	ω	ω	omega
ϑ	ϑ	&thetasym;	theta symbol
ϒ	ϒ	&upsih;	upsilon symbol
ϖ	ϖ	ϖ	pi symbol

Etiquettes:

html

Caractères ISO 8859-1

Character	Entity Number	Entity Name	Description
À	À	À	capital a, grave accent
Á	Á	Á	capital a, acute accent
Â	Â	Â	capital a, circumflex accent
Ã	Ã	Ã	capital a, tilde
Ä	Ä	Ä	capital a, umlaut mark
Å	Å	Å	capital a, ring
Æ	Æ	Æ	capital ae
Ç	Ç	Ç	capital c, cedilla
È	È	È	capital e, grave accent
É	É	É	capital e, acute accent
Ê	Ê	Ê	capital e, circumflex accent
Ë	Ë	Ë	capital e, umlaut mark
Ì	Ì	Ì	capital i, grave accent
Í	Í	Í	capital i, acute accent
Î	Î	Î	capital i, circumflex accent
Ï	Ï	Ï	capital i, umlaut mark
Ð	Ð	Ð	capital eth, Icelandic
Ñ	Ñ	Ñ	capital n, tilde
Ò	Ò	Ò	capital o, grave accent
Ó	Ó	Ó	capital o, acute accent
Ô	Ô	Ô	capital o, circumflex accent
Õ	Õ	Õ	capital o, tilde
Ö	Ö	Ö	capital o, umlaut mark
Ø	Ø	Ø	capital o, slash
Ù	Ù	Ù	capital u, grave accent
Ú	Ú	Ú	capital u, acute accent
Û	Û	Û	capital u, circumflex accent
Ü	Ü	Ü	capital u, umlaut mark
Ý	Ý	Ý	capital y, acute accent
Þ	Þ	Þ	capital THORN, Icelandic
ß	ß	ß	small sharp s, German
à	à	à	small a, grave accent
á	á	á	small a, acute accent
â	â	â	small a, circumflex accent
ã	ã	ã	small a, tilde
ä	ä	ä	small a, umlaut mark
å	å	å	small a, ring
æ	æ	æ	small ae
ç	ç	ç	small c, cedilla
è	è	è	small e, grave accent
é	é	é	small e, acute accent
ê	ê	ê	small e, circumflex accent
ë	ë	ë	small e, umlaut mark
ì	ì	ì	small i, grave accent
í	í	í	small i, acute accent
î	î	î	small i, circumflex accent
ï	ï	ï	small i, umlaut mark
ð	ð	ð	small eth, Icelandic
ñ	ñ	ñ	small n, tilde
ò	ò	ò	small o, grave accent
ó	ó	ó	small o, acute accent
ô	ô	ô	small o, circumflex accent
õ	õ	õ	small o, tilde
ö	ö	ö	small o, umlaut mark
ø	ø	ø	small o, slash
ù	ù	ù	small u, grave accent
ú	ú	ú	small u, acute accent
û	û	û	small u, circumflex accent
ü	ü	ü	small u, umlaut mark
ý	ý	ý	small y, acute accent
þ	þ	þ	small thorn, Icelandic
ÿ	ÿ	ÿ	small y, umlaut mark

Etiquettes:

html

ISO-8859-1

Les caractères réservés en HTML

Character	Entity Number	Entity Name	Description
"	"	"	quotation mark
'	'	' (does not work in IE)	apostrophe
&	&	&	ampersand
<	<	<	less-than
>	>	>	greater-than

Etiquettes:

html

Symbols ISO 8859-1

Character	Entity Number	Entity Name	Description
			non-breaking space
¡	¡	¡	inverted exclamation mark
¢	¢	¢	cent
£	£	£	pound
¤	¤	¤	currency
¥	¥	¥	yen
¦	¦	¦	broken vertical bar
§	§	§	section
¨	¨	¨	spacing diaeresis
©	©	©	copyright
ª	ª	ª	feminine ordinal indicator
«	«	«	angle quotation mark (left)
¬	¬	¬	negation
			soft hyphen
®	®	®	registered trademark
¯	¯	¯	spacing macron
°	°	°	degree
±	±	±	plus-or-minus
²	²	²	superscript 2
³	³	³	superscript 3
´	´	´	spacing acute
µ	µ	µ	micro
¶	¶	¶	paragraph
·	·	·	middle dot
¸	¸	¸	spacing cedilla
¹	¹	¹	superscript 1
º	º	º	masculine ordinal indicator
»	»	»	angle quotation mark (right)
¼	¼	¼	fraction 1/4
½	½	½	fraction 1/2
¾	¾	¾	fraction 3/4
¿	¿	¿	inverted question mark
×	×	×	multiplication
÷	÷	÷	division

Etiquettes:

html

ISO-8859-1

symbols

Symbols mathématiques supportés en HTML

Character	Entity Number	Entity Name	Description
∀	∀	∀	for all
∂	∂	∂	part
∃	∃	∃	exists
∅	∅	∅	empty
∇	∇	∇	nabla
∈	∈	∈	isin
∉	∉	∉	notin
∋	∋	&ni;	ni
∏	∏	∏	prod
∑	∑	∑	sum
−	−	−	minus
∗	∗	&lowast;	lowast
√	√	√	square root
∝	∝	&prop;	proportional to
∞	∞	∞	infinity
∠	∠	&ang;	angle
∧	∧	&and;	and
∨	∨	&or;	or
∩	∩	∩	cap
∪	∪	∪	cup
∫	∫	∫	integral
∴	∴	&there4;	therefore
∼	∼	&sim;	similar to
≅	≅	&cong;	congruent to
≈	≈	≈	almost equal
≠	≠	≠	not equal
≡	≡	&equiv;	equivalent
≤	≤	≤	less or equal
≥	≥	≥	greater or equal
⊂	⊂	⊂	subset of
⊃	⊃	⊃	superset of
⊄	⊄	&nsub;	not subset of
⊆	⊆	&sube;	subset or equal
⊇	⊇	&supe;	superset or equal
⊕	⊕	&oplus;	circled plus
⊗	⊗	&otimes;	circled times
⊥	⊥	&perp;	perpendicular
⋅	⋅	⋅	dot operator

Etiquettes:

html

Templates HTML

Appréhender le html et le javascript n'est pas toujours simple pour mettre en place un site internet avec un joli design et surtout "user friendly".

Le site suivant propose quelques templates html facilement adaptables

https://uidesigndaily.com/

ainsi que celui-ci https://html5up.net/

Etiquettes:

template

html

Un squelette de page HTML

Voici un petit squelette afin de mettre en place une page HTML facilement et rapidement.

Elle inclut le CSS et le javascript Bootstrap ainsi que le javascript JQuery.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>My Page</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <h1>My Page</h1>
    <h2>Start here</h2>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

Un simple copier/coller dans un fichier "index.html" et le tour est joué.

Etiquettes:

html