HTML

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
&egrave;re accentu&eacute;</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.

Autres caractères supportés en HTML

Autres caractères supportés en HTML

Character Entity Number Entity Name Description
Π&#338; &OElig; capital ligature OE
œ &#339; &oelig; small ligature oe
Š &#352; &Scaron; capital S with caron
š &#353; &scaron; small S with caron
Ÿ &#376; &Yuml; capital Y with diaeres
ƒ &#402; &fnof; f with hook
ˆ &#710; &circ; modifier letter circumflex accent
˜ &#732; &tilde; small tilde
&#8194; &ensp; en space
&#8195; &emsp; em space
&#8201; &thinsp; thin space
&#8204; &zwnj; zero width non-joiner
&#8205; &zwj; zero width joiner
&#8206; &lrm; left-to-right mark
&#8207; &rlm; right-to-left mark
&#8211; &ndash; en dash
&#8212; &mdash; em dash
&#8216; &lsquo; left single quotation mark
&#8217; &rsquo; right single quotation mark
&#8218; &sbquo; single low-9 quotation mark
&#8220; &ldquo; left double quotation mark
&#8221; &rdquo; right double quotation mark
&#8222; &bdquo; double low-9 quotation mark
&#8224; &dagger; dagger
&#8225; &Dagger; double dagger
&#8226; &bull; bullet
&#8230; &hellip; horizontal ellipsis
&#8240; &permil; per mille 
&#8242; &prime; minutes
&#8243; &Prime; seconds
&#8249; &lsaquo; single left angle quotation
&#8250; &rsaquo; single right angle quotation
&#8254; &oline; overline
&#8364; &euro; euro
&#8482; &trade; trademark
&#8592; &larr; left arrow
&#8593; &uarr; up arrow
&#8594; &rarr; right arrow
&#8595; &darr; down arrow
&#8596; &harr; left right arrow
&#8629; &crarr; carriage return arrow
&#8968; &lceil; left ceiling
&#8969; &rceil; right ceiling
&#8970; &lfloor; left floor
&#8971; &rfloor; right floor
&#9674; &loz; lozenge
&#9824; &spades; spade
&#9827; &clubs; club
&#9829; &hearts; heart
&#9830; &diams; diamond

 

Etiquettes: 

Caractères Grec supportés en HTML

Caractères Grec supportés en HTML

Character Entity Number Entity Name Description
Α &#913; &Alpha; Alpha
Β &#914; &Beta; Beta
Γ &#915; &Gamma; Gamma
Δ &#916; &Delta; Delta
Ε &#917; &Epsilon; Epsilon
Ζ &#918; &Zeta; Zeta
Η &#919; &Eta; Eta
Θ &#920; &Theta; Theta
Ι &#921; &Iota; Iota
Κ &#922; &Kappa; Kappa
Λ &#923; &Lambda; Lambda
Μ &#924; &Mu; Mu
Ν &#925; &Nu; Nu
Ξ &#926; &Xi; Xi
Ο &#927; &Omicron; Omicron
Π &#928; &Pi; Pi
Ρ &#929; &Rho; Rho
Σ &#931; &Sigma; Sigma
Τ &#932; &Tau; Tau
Υ &#933; &Upsilon; Upsilon
Φ &#934; &Phi; Phi
Χ &#935; &Chi; Chi
Ψ &#936; &Psi; Psi
Ω &#937; &Omega; Omega
α &#945; &alpha; alpha
β &#946; &beta; beta
γ &#947; &gamma; gamma
δ &#948; &delta; delta
ε &#949; &epsilon; epsilon
ζ &#950; &zeta; zeta
η &#951; &eta; eta
θ &#952; &theta; theta
ι &#953; &iota; iota
κ &#954; &kappa; kappa
λ &#955; &lambda; lambda
μ &#956; &mu; mu
ν &#957; &nu; nu
ξ &#958; &xi; xi
ο &#959; &omicron; omicron
π &#960; &pi; pi
ρ &#961; &rho; rho
ς &#962; &sigmaf; sigmaf
σ &#963; &sigma; sigma
τ &#964; &tau; tau
υ &#965; &upsilon; upsilon
φ &#966; &phi; phi
χ &#967; &chi; chi
ψ &#968; &psi; psi
ω &#969; &omega; omega
ϑ &#977; &thetasym; theta symbol
ϒ &#978; &upsih; upsilon symbol
ϖ &#982; &piv; pi symbol

 

Etiquettes: 

Caractères ISO 8859-1

Caractères ISO 8859-1

Character Entity Number Entity Name Description
À &#192; &Agrave; capital a, grave accent
Á &#193; &Aacute; capital a, acute accent
 &#194; &Acirc; capital a, circumflex accent
à &#195; &Atilde; capital a, tilde
Ä &#196; &Auml; capital a, umlaut mark
Å &#197; &Aring; capital a, ring
Æ &#198; &AElig; capital ae
Ç &#199; &Ccedil; capital c, cedilla
È &#200; &Egrave; capital e, grave accent
É &#201; &Eacute; capital e, acute accent
Ê &#202; &Ecirc; capital e, circumflex accent
Ë &#203; &Euml; capital e, umlaut mark
Ì &#204; &Igrave; capital i, grave accent
Í &#205; &Iacute; capital i, acute accent
Î &#206; &Icirc; capital i, circumflex accent
Ï &#207; &Iuml; capital i, umlaut mark
Ð &#208; &ETH; capital eth, Icelandic
Ñ &#209; &Ntilde; capital n, tilde
Ò &#210; &Ograve; capital o, grave accent
Ó &#211; &Oacute; capital o, acute accent
Ô &#212; &Ocirc; capital o, circumflex accent
Õ &#213; &Otilde; capital o, tilde
Ö &#214; &Ouml; capital o, umlaut mark
Ø &#216; &Oslash; capital o, slash
Ù &#217; &Ugrave; capital u, grave accent
Ú &#218; &Uacute; capital u, acute accent
Û &#219; &Ucirc; capital u, circumflex accent
Ü &#220; &Uuml; capital u, umlaut mark
Ý &#221; &Yacute; capital y, acute accent
Þ &#222; &THORN; capital THORN, Icelandic
ß &#223; &szlig; small sharp s, German
à &#224; &agrave; small a, grave accent
á &#225; &aacute; small a, acute accent
â &#226; &acirc; small a, circumflex accent
ã &#227; &atilde; small a, tilde
ä &#228; &auml; small a, umlaut mark
å &#229; &aring; small a, ring
æ &#230; &aelig; small ae
ç &#231; &ccedil; small c, cedilla
è &#232; &egrave; small e, grave accent
é &#233; &eacute; small e, acute accent
ê &#234; &ecirc; small e, circumflex accent
ë &#235; &euml; small e, umlaut mark
ì &#236; &igrave; small i, grave accent
í &#237; &iacute; small i, acute accent
î &#238; &icirc; small i, circumflex accent
ï &#239; &iuml; small i, umlaut mark
ð &#240; &eth; small eth, Icelandic
ñ &#241; &ntilde; small n, tilde
ò &#242; &ograve; small o, grave accent
ó &#243; &oacute; small o, acute accent
ô &#244; &ocirc; small o, circumflex accent
õ &#245; &otilde; small o, tilde
ö &#246; &ouml; small o, umlaut mark
ø &#248; &oslash; small o, slash
ù &#249; &ugrave; small u, grave accent
ú &#250; &uacute; small u, acute accent
û &#251; &ucirc; small u, circumflex accent
ü &#252; &uuml; small u, umlaut mark
ý &#253; &yacute; small y, acute accent
þ &#254; &thorn; small thorn, Icelandic
ÿ &#255; &yuml; small y, umlaut mark

 

Etiquettes: 

Les caractères réservés en HTML

Les caractères réservés en HTML

Character Entity Number Entity Name Description
" &#34; &quot; quotation mark
' &#39; &apos; (does not work in IE) apostrophe 
& &#38; &amp; ampersand
< &#60; &lt; less-than
> &#62; &gt; greater-than

 

Etiquettes: 

Symbols ISO 8859-1

Symbols ISO 8859-1

Character Entity Number Entity Name Description
  &#160; &nbsp; non-breaking space
¡ &#161; &iexcl; inverted exclamation mark
¢ &#162; &cent; cent
£ &#163; &pound; pound
¤ &#164; &curren; currency
¥ &#165; &yen; yen
¦ &#166; &brvbar; broken vertical bar
§ &#167; &sect; section
¨ &#168; &uml; spacing diaeresis
© &#169; &copy; copyright
ª &#170; &ordf; feminine ordinal indicator
« &#171; &laquo; angle quotation mark (left)
¬ &#172; &not; negation
  &#173; &shy; soft hyphen
® &#174; &reg; registered trademark
¯ &#175; &macr; spacing macron
° &#176; &deg; degree
± &#177; &plusmn; plus-or-minus 
² &#178; &sup2; superscript 2
³ &#179; &sup3; superscript 3
´ &#180; &acute; spacing acute
µ &#181; &micro; micro
&#182; &para; paragraph
· &#183; &middot; middle dot
¸ &#184; &cedil; spacing cedilla
¹ &#185; &sup1; superscript 1
º &#186; &ordm; masculine ordinal indicator
» &#187; &raquo; angle quotation mark (right)
¼ &#188; &frac14; fraction 1/4
½ &#189; &frac12; fraction 1/2
¾ &#190; &frac34; fraction 3/4
¿ &#191; &iquest; inverted question mark
× &#215; &times; multiplication
÷ &#247; &divide; division

 

Symbols mathématiques supportés en HTML

Symbols mathématiques supportés en HTML

Character Entity Number Entity Name Description
&#8704; &forall; for all
&#8706; &part; part
&#8707; &exist; exists
&#8709; &empty; empty
&#8711; &nabla; nabla
&#8712; &isin; isin
&#8713; &notin; notin
&#8715; &ni; ni
&#8719; &prod; prod
&#8721; &sum; sum
&#8722; &minus; minus
&#8727; &lowast; lowast
&#8730; &radic; square root
&#8733; &prop; proportional to
&#8734; &infin; infinity
&#8736; &ang; angle
&#8743; &and; and
&#8744; &or; or
&#8745; &cap; cap
&#8746; &cup; cup
&#8747; &int; integral
&#8756; &there4; therefore
&#8764; &sim; similar to
&#8773; &cong; congruent to
&#8776; &asymp; almost equal
&#8800; &ne; not equal
&#8801; &equiv; equivalent
&#8804; &le; less or equal
&#8805; &ge; greater or equal
&#8834; &sub; subset of
&#8835; &sup; superset of
&#8836; &nsub; not subset of
&#8838; &sube; subset or equal
&#8839; &supe; superset or equal
&#8853; &oplus; circled plus
&#8855; &otimes; circled times
&#8869; &perp; perpendicular
&#8901; &sdot; dot operator

 

Etiquettes: 

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: 

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: