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>
<img>
→ image : PNG, JPEG ou SVG
<picture>
→ image adaptative (on en parle plus tard)
<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<br> :
saut de ligne impératif
<hr> :
filet horizontal
<big>,
<center>,
<font>,
<small>,
<strike>,
<tt>,
<u>
<i>
= rupture de la langue ou du discours
≠ <em>
≠ <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>L’<i class="glossaire">utilisabilité</i> est une exigence…</p>
<p>Ceci est en italiques : <i>exemple</i>.</p><b>
= rupture typographique
≠ <strong>
<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…">
▏ ▏ <link rel="stylesheet" href="…URL d'une feuille de style…">
▏ </head>
▏ <body>
▏ ▏ …contenu de la page…
▏ </body>
</html><!-- …commentaire… -->
<!-- <balise>… -->
ul de liste à puce
vs ul de menu déroulant<link rel="stylesheet" type="text/css" href="feuille.css" /><style>
▏ /* règles CSS */
</style><balise style="/* déclarations CSS */" …>…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;
}Cascade = gestion des conflits
⇒ Une classe l’emporte sur des balises.
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 : couleur d’écriture, héritéebackground-color : couleur de fond, non héritée<p class="abc">Test 1</p>
<p class="def">
▏ Test 2
▏ <q>test 3</q>
</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;serif, sans-serif, mono…)
font-size et line-height
font-style,
font-weight,
font-variant,
color,
text-…
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é ¾pt = 1pxin : 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 »
<ul> représente une liste à puces
dans le cas général,
ou un menu déroulant (ou burger, ou nuage de tags…)
dans un bloc de navigation
E est immédiatement dans un élément P,
E est appelé l’enfant et P le parent
E est inclus dans un élément A,
E est appelé enfant ou descendant
A est appelé ancêtre ou ascendant
A E
signifie « E qui est dans A »
A E ≠
S1, S2B.C
h1 { text-weight: bold; color: #800000; }
h1 strong { 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; }X::before : dans X, avant le contenu de l’élémentX::after : dans X, après son contenuX::first-letter : premier caractère de XX::first-line : première ligne du bloc XX::selection : texte sélectionné dans X:visited : est un lien visité:link : est un lien pas encore visité:hover : est survolé:active : est activé:focus : a le focus (saisie):checked,
:default,
:focus-within,
:valid,
:invalid,
:disabled,
:read-only,
:read-write,
:required…
:empty,
:lang(…),
:first-of-type,
:nth-of-type(…),
:last-of-type,
:first-child,
:nth-child(…),
:nth-last-child(…),
:last-child…
:root,
:target,
:not(…)…
* |
pronom personnel indéfini, “on” |
balise |
nom commun |
.classe |
adjectif qualificatif, complément de nom |
#identifiant |
nom propre (unique dans chaque page) |
style="…" |
doigt pointé (unique sur le web) |
* {…} /* spécificité = 0 0 0 (pas du tout spécifique) */
li {…} /* spécificité = 0 0 1 (faible : très général) */
q::before {…} /* spécificité = 0 0 2 */
nav ul {…} /* spécificité = 0 0 2 */
ul ul li {…} /* spécificité = 0 0 3 */
aside.framed {…} /* spécificité = 0 1 1 */
a:hover {…} /* spécificité = 0 1 1 */
nav ul li.here {…} /* spécificité = 0 1 3 */
#x34y {…} /* spécificité = 1 0 0 */
#banner nav {…} /* spécificité = 1 0 1 (forte : très spécifique) */style="…" est le plus spécifique (1000)