IFOCOP143 - HTML5 & CSS3

HTML ⁵ & CSS ³

Antoine BERNIER

ID 143

goo.gl/9jekmx

Au tableau: goo.gl/Ro3QbN

HTML

Voir la spec

1993

Tim Lee-Berners

https://www.w3.org/People/Berners-Lee/

Hyper

HTML

Text

HTML

Markup

HTML

Language

HTML

Hyper

Text

Markup

Language

HyperText

Document A

APPRENDRE v. tr. [61] (lat. apprehendere) 1. Acquérir la connaissance, la pratique de ; Apprendre un métier, les mathématiques. 2. Faire acquérir un savoir, une information ; Apprendre le dessin à un enfant. Il m'a appris la nouvelle.

Document B

MATHÉMATIQUES n.f. [58] Science qui étudie par le moyen du raisonnement déductif les propriétés d'êtres abstraits (nombres, figures géométriques, fonctions, espaces, etc.) ainsi que les relations qui s'établissent entre eux.

Hyper Lien

APPRENDRE v.t. [61] (lat. apprehendere) 1. Acquérir la connaissance, la pratique de ; Apprendre un métier, les mathématiques. 2. Faire acquérir un savoir, une information ; Apprendre le dessin à un enfant. Il m'a appris la nouvelle.

Doc. A

Doc. B

Markup

texte

<a>

</a>

texte

<a>

</a>

balise ouvrante

texte

<a>

</a>

balise fermante

texte

</a>

attribut

texte

</a>

valeur

<a href="http://example.org/doc">texte</a>

URL

balise auto-fermante

Écrivons notre premier document HTML

Bonjour !

Bonjour !

↲
↲
↲
Bonjour !

<!DOCTYPE html>


Bonjour !

<!DOCTYPE html>
<title>hello</title>

Bonjour !

<!DOCTYPE html>
<title>hello</title>

Bonjour !

hello.html

Transformons-le en
page web

<!DOCTYPE html>
<title>hello</title>

Bonjour !

html5.validator.nu

<!DOCTYPE html>
<html lang="fr">
  <title>hello</title>
  
  Bonjour !
</html>

TAB : |------>

SHIFT + TAB : <-----|

<!DOCTYPE html>
<html lang="fr">
  <meta charset="utf-8">
  <title>hello</title>
  
  Bonjour !
</html>

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>hello</title>
  </head>
  <body>
    Bonjour !
  </body>
</html>

<!DOCTYPE html>
<html lang="fr">
  <head>
    {Tête}
  </head>
  <body>
    {Corps}
  </body>
</html>

<head>

<body>

<html>

<head>

<body>

<html>

<!DOCTYPE html>
<html lang="fr">
  <head>
    {Tête}
  </head>
  <body>
    {Corps}
  </body>
</html>

les balises principales/usuelles

header / footer

main / aside / nav

article / section

figure

journal Le monde

CSS

Voir la spec

Contenu
!=
Présentation

<balise style="">

CSS Zen Garden

<link rel="stylesheet">
<link rel="alternate stylesheet" title="Fancy">
<link rel="alternate stylesheet" title="Basic">

voir une démo

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" media="print">

optionnel

body {
  background:red;
}

selecteur {
  propriété:valeur;
}

selecteur {
  propriété1:valeur;
  propriété2:valeur;
}

selecteur1,
selecteur2 {
  propriété:valeur;
}

selecteur {
  propriété2:valeur;
}

selecteur {
  propriété1:valeur;
}

selecteur {
  propriééété:WTF;
}

Styles par défaut du navigateur

body : margin

p : margin-top margin-bottom

ul/ol : padding-left list-style

em/strong : font-style/font-weight

blockquote : margin

reset VS. normalize VS. rien

Colors

#ff00ff

rgb(255, 0, 255);

rgba(255, 0, 255, 0.5);

hsl(0, 100%, 100%)

Background

background-color
background-image
background-repeat
background-attachment
background-position

background-size

background (shorthand)

Border

border-width

border-color

border-style

border (shorthand)

border-radius

Bonus : fabriquer un triangle avec border

Texte

color
font-weight
font-style
font-variant
font-family
@font-face
text-decoration
text-transform
text-align
line-height
font-size
letter-spacing
word-spacing
word-wrap
text-indent
direction
text-shadow
outline

WhatTheFont ?

Units

line-height

1 em

Box

display
padding
margin
width
min-width
max-width
height
min-height
max-height

margin

border

padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae mauris volutpat, placerat tortor sit amet, mollis leo.

margin

border

padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae mauris volutpat, placerat tortor sit amet, mollis leo.

width

box-sizing: content-box

margin

border

padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae mauris volutpat, placerat tortor sit amet, mollis leo.

width

box-sizing: border-box

Flow

inline elements

a
abbr
acronym
b
bdo
big
br
button
cite
code
dfn
em
i
img
input
kbd
label
map
object
q
samp
script
select
small
span
strong
sub
sup
textarea
time
tt
var

reste dans le flow (comme du texte)

pas de width ni de height

pas de margin-top ni margin-bottom

inline-block

float

Selecteurs

*
E
E[foo]
E[foo="bar"]
E[foo~="bar"]
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E[foo|="en"]
E:root
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-child
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
E:link
E:visited
E:active
E:hover
E:focus
E:target
E:lang(fr)
E:enabled
E:disabled
E:checked
E::first-line
E::first-letter
E::before
E::after
E.warning
E#myid
E:not(s)
E F
E > F
E + F
E ~ F

E F

#bobby

.fruit

ancres

Spécificité

http://specificity.keegan.st/

inline styles

IDs

Classes, attributes and pseudo-classes

Elements and pseudo-elements

Sélecteur CSS :

inline styles

IDs

Classes, attributes and pseudo-classes

Elements and pseudo-elements

Sélecteur CSS :

.danger

inline styles

IDs

Classes, attributes and pseudo-classes

Elements and pseudo-elements

Sélecteur CSS :

.danger

div

Exercices