«This is for everyone
»
Tim Berners-Lee
Exemple d'instrument au CERN :
Exemple d'article du CERN : Search for a Standard Model Higgs boson…
<phrase><sujet>Le chat</sujet> <verbe>mange</verbe>
<complement>la souris</complement>.</phrase><q><i>Le malade imaginaire</i> de <b>Molière</b>
c'est aussi… <br />l'imaginaire malade.</q>
<abc>
</abc>
<abc />
<img src="logo_ACME_XS.jpeg" alt="ACME SARL" />| entité | explication | valeur |
|---|---|---|
< | plus petit que (less than) | < |
" | guillemets doubles | " |
& | esperluette (ampersand) | & |
| espace insécable | |
« | guillemet français ouvrant
(left angle quote) |
« |
é | e accent aigu (acute) | é |
ê | e accent circonflexe | ê |
ç | c cédille | ç |
€ | euro | € |
| entité | explication | valeur |
|---|---|---|
> | plus grand que (greater than) | > |
' | guillemet simple | ' |
­ | tiret conditionnel | - |
» | guillemet français fermant
(left angle quote) |
» |
è | e accent grave | è |
ë | e tréma (umlaut) | ë |
© | copyright | © |
http://…nom_serveur…/dossier1/dossier2/…/fichierhttps:…
/dossier1/dossier2/…/fichiersous-dossier1/sous-dossier2/…/fichier..http://serveur/chemin?nom1=valeur1&nom2=val2&…<a href="…?nom1=val1&nom2=…">…
<a href="…url…">…contenu…</a><br>
→ saut de ligne impératif ↲
<hr>
→ filet horizontal (sur toute la largeur)
<img>
→ image : PNG, JPEG ou SVGsauf
IE8−
<object>,
<embed>
→ autre contenu externe
<em>
→ souligner
oui, vraiment
<cite>
→ référence de citation
le journal Le Monde
<strong>
→ insister si, j'insiste
<code>
→ code (programme, HTML…)
<code>
<samp>,
<kbd>,
<var>
<sub>
et <sup>
→ indice et exposant
xi et m3
<span> → marquage neutre
<i>
balise une rupture de la langue ou du discours
<em> ni
<cite> :
<p>Le <i lang="en">web</i> est un outil fantastique.</p>
<p>Le <i class="taxonomie">Felis silvestris</i> mange la Souris.</p>
<p>Le terme <i class="glossaire">utilisabilité</i>, défini ci-après…</p>
<p>Ceci est en italiques : <i>exemple</i>.</p><b>
balise une rupture typographique
<strong>
<big>,
<center>,
<font>,
<s>,
<small>,
<strike>,
<tt>,
<u>
<s>
Le fichier HTML ne comporte pas que son contenu :
<!DOCTYPE html>
<html lang="fr"><!-- code de langue ISO 639 -->
▏ <head>
▏ ▏ <meta charset="utf-8"><!-- encodage des caractères -->
▏ ▏ <title>…titre de la page…</title>
▏ ▏ <meta name="author" content="…nom / URL de l'auteur…">
▏ ▏ <meta name="description" content="…description du contenu…">
▏ ▏ <meta name="keywords" content="mot-clé,mot-clé,…">
▏ ▏ <link rel="stylesheet" href="…URL d'une feuille de style…">
▏ </head>
▏ <body>
▏ ▏ …contenu de la page…
▏ </body>
</html><!-- …commentaire… --><!-- <balise>… -->
<link rel="stylesheet" type="text/css" href="feuille.css" /><style>
▏ /* règles CSS */
</style><element style="/* déclarations CSS */" …>…Exemple : balises h3
<h3>Lorem ipsum</h3>
<p>Dolor sit amet…</p>h3 {
▏ background: #B77E8D; /* */
▏ color: #411422; /* */
▏ font-size: 144%;
▏ margin: 10px 0 20px 0;
}{background:url(decors/grille.png)} h3 {text-align:left}
balise1, balise2, … {
▏ propriété1: valeur1;
▏ propriété2: valeur2;
▏ …
}Équivaut (presque) à :
balise1 {
▏ propriété1: valeur1; propriété2: valeur2; …
}
balise2 {
▏ propriété1: valeur1; propriété2: valeur2; …
}
…Les classes équivalent à des catégories “personnelles” spécialisant des balises génériques.
Affectées à un élément par l'attribut class en HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="alinea">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>Introduites par un point
en CSS
.alinea {
▏ text-indent: 50px;
}black |
#000000 |
noir | |
gray |
#808080 |
gris foncé (50%) | |
silver |
#C0C0C0 |
gris foncé (75%) | |
white |
#FFFFFF |
blanc | |
maroon |
#800000 |
pourpre, rouge foncé | |
red |
#FF0000 |
rouge vif | |
purple |
#800080 |
violet, mauve | |
fuchsia |
#FF00FF |
fuchsia, rose |
green |
#008000 |
vert foncé | |
lime |
#00FF00 |
vert vif | |
olive |
#808000 |
marron, khaki | |
yellow |
#FFFF00 |
jaune vif | |
navy |
#000080 |
outremer, bleu foncé | |
blue |
#0000FF |
bleu vif | |
teal |
#008080 |
turquoise foncé | |
aqua |
#00FFFF |
turquoise clair |
transparent
| hexadécimal | 00 |
33 |
66 |
99 |
CC |
FF |
|---|---|---|---|---|---|---|
| décimal | 0 | 51 | 102 | 153 | 204 | 255 |
| proportion | 0% | 20% | 40% | 60% | 80% | 100% |
#3366CC
équivaut à rgb(51, 102, 204)
rgb(20%, 40%, 80%)
rgba(51, 102, 204, 0.25)
rgba(20%, 40%, 80%, 25%)
color, background-color
<p class="abc">Test 1</p>
<p class="def">Test 2</p>.abc {
▏ background-color: #0F2D40;
▏ color: #3E8C84;
}
.def {
▏ background-color:
▏ ▏ rgba(47, 0, 38, .6);
▏ color: rgb(168, 204, 132);
}background-image,
background-repeat,
background-position
.ex {
▏ background-color: #C6D4D7;
▏ background-image: url(decors/logo-UP-2011.svg);
▏ background-repeat: no-repeat; /* repeat|repeat-x|repeat-y */
▏ background-position: 0 0; /* δx δy */
}<p class="ex">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
font-family
font-family: Baskerville, 'Times New Roman', "Heisi Mincho W3", serif;font-size et line-height
font-style,
font-weight,
font-variant,
color
p {
▏ font-family: YanoneKaffeesatz, Arial, Helvetica, sans-serif;
▏ font-weight: 300; /* normal=400, bold=700 */
▏ font-size: 26pt;
}
h4 {
▏ font-family: Baskerville, 'Times New Roman', "Heisi Mincho W3", serif;
▏ font-weight: bold; /* habituellement par défaut */
▏ font-size: 32pt;
}<h4>Lorem ipsum dolor sit amet ℏ 😎 万维网</h4>
<p class="ex">consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>width × heightmargin: haut droite bas gauche;border: épaisseur style couleur;padding: haut droite bas gauche;ex : hauteur d'x,
hauteur des lettres sans “jambe”em : largeur d'M,
référence de la fonte (font-size)rem : font-size de la racine du document
— référence à préférer pour les polices% : pourcentage par rapport au conteneur de référencepx : point d'écran de référence
— pixel sur un PCpt : point “d'impression”
— en réalité 1px = ¾ptin : pouce “d'impression”
— en fait 1in = 72pt = 96pxcm : centimètre “d'impression”
— en fait 1in = 2,54cmp.alinea {…}.highlight.css {…}B.C : un élément de balise B
et de classe C
A E :
un élément E (enfant) qui est dans un élément A
(parent ou autre ascendant)
A E ≠
S1, S2B.C
h1 { text-weight: bold; color: #800000; }
h1 b { text-weight: normal; }
.valeur { text-weight: bold; color: #800000; }
h1 .valeur { color: #336666; }
ul { list-style-image: url(puce-liste-12x12.png); }
ul ul { list-style-image: url(puce-liste-10x10.png); }
ul ul ul { list-style-image: url(puce-liste-8x8.png); }
em { font-style: italic; }
em em { font-style: normal; }::before : avant le contenu d'un élément::first-letter : premier caractère d'un élément::first-line : première ligne d'un bloc::after : après le contenu d'un élément:visited : est un lien visité:link : est un lien pas encore visité:hover : est survolé:active : est activé:focus : a le focus (saisie):target : est la cible (#) de l'URI (CSS3):first-child,
:last-child,
:nth-child(…),
:nth-of-type(…),
:not(…) …
!important
> normal
> config. utilisateur
> navigateur
#identifiant > .classe
> balise > *
* : pronom personnel indéfini, “on”.classe : adjectif qualificatif, complément de nom#identifiant : nom propre (unique dans une page)* /* spécificité = 0 0 0 (pas spécifique) */
li {...} /* spécificité = 0 0 1 (faible : très général) */
li::first-line {...} /* spécificité = 0 0 2 */
ul li {...} /* spécificité = 0 0 2 */
ul ol li {...} /* spécificité = 0 0 3 */
li.plus {...} /* spécificité = 0 1 1 */
a:hover {...} /* spécificité = 0 1 1 */
nav ul li.plus {...} /* spécificité = 0 1 3 */
#x34y {...} /* spécificité = 1 0 0 */
#banner nav {...} /* spécificité = 1 0 1 (forte : très spécifique) */style="…" compte comme plus spécifique que tout.