HTML 5 & CSS 3

ID 143

Au tableau: goo.gl/Ro3QbN

HTML

Voir la spec

1993

Tim Lee-Berners

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

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.

Markup

texte

texte

<a>

</a>

texte

<a>

</a>

balise ouvrante

texte

<a>

</a>

balise fermante

texte

<a href>

</a>

attribut

texte

<a href="{value}">

</a>

valeur

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

URL

<orpheline/>

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 !
<!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

<center>

<font size="3" color="red">

<table width="500">

<td valign="middle">

<marquee>

<center>

<font size="3" color="red">

<table width="500">

<td valign="middle">

<marquee>

Contenu
!=
Présentation

<link rel="stylesheet">

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

<balise style="">

<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

Units

A

p

line-height

A

p

m

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é

0

1

0

0

inline styles

IDs

Classes, attributes and pseudo-classes

Elements and pseudo-elements

#c

Sélecteur CSS :

0

1

1

0

inline styles

IDs

Classes, attributes and pseudo-classes

Elements and pseudo-elements

#c

Sélecteur CSS :

.danger

0

1

1

1

inline styles

IDs

Classes, attributes and pseudo-classes

Elements and pseudo-elements

#c

Sélecteur CSS :

.danger

div

Exercices

<body>
    <div>
        <ul>
            <li>item A</li>
            <li>item B</li>
            <li>item C</li>
        </ul>
    </div>
</body>

color:red;

font-family:monospace, sans-serif;

gris : #333

vert : yellowGreen

graisse texte normal : 300

graisse titres : 700

-> introduction aux ancres

Bleu (RGB) : 33, 150, 243

Font : Arial

2 techniques de centrage horizontal

display:inline-block;

text-align:center

display:block;

margin-left:auto;

margin-right:auto

width:Xpx

auto

auto

X

width non-définie

width définie à X

TP

Icons : 🤛🏼, 👊🏼, 🤜🏼

<br> INTERDITS

Toutes les unités en ems

<br> INTERDITS

Nom de famille TOUJOURS en majuscules

Lien vers le profil twitter

Arial + Interlignage : 1,5

NB : largeur de la colonne en ems.

NB : la page scrolle vers le bas

Font : Oswald (Google font)

#231d1f

👏🏼

Logo Lavazza : https://svgshare.com/i/5xF.svg

Image tasse : https://goo.gl/puV6bU

NB : le design doit être centré horizontalement quelque soit la largeur de la page

Logo SNCF : https://svgshare.com/i/60U.svg (en background-image)

#1f1e28 gray white

NB : l'intégration doit etre "élastique" ie : s'agrandir avec la fenetre

#323c60

NB : le centrage vertical est optionnel, car non vu encore

NB : les unités doivent être en ems

Logo Ricola : https://svgshare.com/i/5ze.svg

Bonbon : https://goo.gl/yw5fUd

Herbe : https://goo.gl/f5p559

#ffd700 #36985b ( NB : le centrage vertical est optionnel, car non vu encore)

Exercice

Faire un sapin de noel a l'aide de blocks CSS

Pseudo-element

:before

:after

Quote : “

Emoji : 👌 ❤️

Typo commentaire : IBM Plex Sans Condensed

Positionnement

  • position
  • left
  • top
  • right
  • bottom
  • float
  • clear
  • z-index
  • overflow
  • clip
  • visibility

top

bottom

left

right

position:relative (ou absolute)

position:absolute

position:static

z-index

#173691

white

red: #ff6f69;
beige: #ffeead;
yellow: #ffcc5c;

CSS Vars

:root {

  --macouleur: #ccc;

}

 

p {

  color: var(--macouleur);

}

Float

Web font

/* normal */
@font-face {
    font-family: 'ubuntu';
    src: url('ubuntu-regular-webfont.woff2') format('woff2'),
         url('ubuntu-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* nornal italic */
/*@font-face {
    font-family: 'ubuntu';
    src: url('ubuntu-italic-webfont.woff2') format('woff2'),
         url('ubuntu-italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}*/

...

ubuntu.css

SVG sprite

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute; width:0; height:0; visibility:hidden;">

<symbol id="hamburger" viewBox="0 0 500 500">
  ...
</symbol>

</svg>

icons.svg

<svg role="img" class="icon">
  <use xlink:href="icons.svg#hamburger"/>
</svg>
svg.icon {
  width:1em; height:1em;
  fill:currentColor;
}

Forms

<form action="/search" method="post">

  {champs}

</form>

<input type="text" name="firstname">

<input type="number" name="phonenumber">

<input type="date" name="birthday">

 

<select>

  <option>Option A</option>

  <option>Option B</option>

</select>

<input type="radio" name="gender">Femme

<input type="radio" name="gender">Homme

<input type="checkbox" name="topings">Dessert

<input type="checkbox" name="topings">Salade

RWD

320x480

iphone

768x1024

ipad

1440x900

imac

320x480

iphone

768x1024

ipad

1440x900

imac

Maquette mobile : goo.gl/uXKVcc

Maquette desktop : goo.gl/ECSSvS

Maquettes

Mockups

Exercice mockups

screenshots > sketch > gdraw > photoshop

320x480

iphone

768x1024

ipad

1440x900

imac

900px

500px

<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1">

li {width:100%;} /* mobile */

 

@media (min-width:500px) {

  li {width:50%;} /* tablette */

}

li {width:100%;} /* mobile */

 

@media (min-width:500px) {

  li {width:50%;} /* tablette */

}

@media (min-width:900px) {

  li {width:33.33%;} /* desktop */

}

Fork from : codepen.io/abernier/pen/d670cdcf2d865e9a3a6cc85cd9a16cb2

Ex : Sur un écran de plus de 500px, rendre le fond de page en vert

Fork from : codepen.io/abernier/pen/361209ee14f06c0370adbd1c32058456

Sur un écran de plus de 500px, faire en sorte que la div ne prenne plus 100% de large mais seulement 50%

Fork from : codepen.io/abernier/pen/da25e96901f4fc070d613c2d231a1775

Faire en sorte qu'a partir d'un écran de 500px, les 4 divs se disposent côte-à-côte 2 à 2 + changer leur couleur de fond en jaune

Fork from : codepen.io/abernier/pen/da25e96901f4fc070d613c2d231a1775

En plus, faire maintenant en sorte qu'à partir d'un écran de 900px, les 4 divs passent côte-à-côte 3 à 3

CSS grid

voir css-tricks

Testing

Made with Slides.com