Formation HTML / CSS

Axel Bouaziz en collaboration avec Leeaarn @axelbouaziz @leeaarn LES BASES
DE LA PROGRAMMATION WEB HTML / CSS

Diﬀérence entre contenu statique et dynamique Qu'est ce que le
HTML ? Diﬀérenciation HTML / CSS Construction d'une page web Choisir son éditeur de code Sa première page web Balises et relations parent-enfant Insérer du texte Insérer un lien Insérer une image Encadrer les balises NOTRE "PETIT" PROGRAMME :)

DIFFÉRENCE ENTRE CONTENU STATIQUE ET DYNAMIQUE

Statique HTML CSS JS ... front-end Dynamique PHP Ruby Python
... back-end

moteur : back-end carrosserie : front-end

QU'EST CE QUE LE HTML ?

HTML = HyperText Markup Language Structure sémantiquement le contenu de
vos pages

DIFFÉRENCIATION HTML / CSS

HTML pour le fond CSS pour la forme Syntaxe diﬀérente
Introduction récente du couple HTML 5 / CSS 3

CONSTRUCTION D'UNE PAGE WEB

HEADER haut de page

HEADER haut de page CONTENT contenu

HEADER haut de page CONTENT contenu FOOTER pied de page

HEADER haut de page CONTENT contenu SIDEBAR encadré

CHOISIR SON ÉDITEUR DE CODE

A quoi ça sert ? coloration syntaxique autocomplétion interface confort
de travail De nombreux éditeurs Notepad++ (Windows) Espresso / TextMate (Mac)

VOTRE PREMIÈRE PAGE WEB

index.html

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> </head>
<body> <header> </header> <section> </section> <aside> </aside> <footer> </footer> </body> </html>

BALISES ET RELATIONS PARENT-ENFANT

Deux types de balises Parent-enfant <head> </head> <img src="images/mon_image.jpeg" />
<html> <head> </head> <body> </body> </html>

INSÉRER DU TEXTE

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

<p> Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </p>

Sauter une ligne dans un paragraphe Si on veut changer
de paragraphe <br> ou <br /> <p> </p> <p> </p>

Titre Sous-titre Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

<h1>Titre</h1> <h2>Sous-titre</h2> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </p>

quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Je souhaite ajouter un commentaire

<h1>Titre</h1>  <h2>Sous-titre</h2> <p>Aenean eu
leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </p>

quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Je souhaite ajouter une liste

Liste non ordonnée Liste ordonnée <ul> <li>Un élément</li> <li>Un autre
élément</li> </ul> <ol> <li>Element 1</li> <li>Element 2</li> </ol>

INSÉRER UN LIEN

page "apprendre" page "enseigner"

Structure <a href="mon lien" title="mon titre"> Un texte </a>

INSÉRER UNE IMAGE

Beaucoup de formats d'image JPEG PNG GIF RAW ... Pourquoi
faire la diﬀérence ? Poids Temps de chargement Modularité ...

insérer cette image

Structure <img src="lien vers mon image" alt="Mon texte alternatif" />

ENCADRER LES BALISES

Beaucoup de code très diﬃcile de s'y retrouver Nécessité d'encadrer
le contenu header d'un côté, footer de l'autre...etc Propreté du code soyez intraitables !

Apparition des div Qu'est ce que c'est ? A quoi
ça sert ? Comment ça marche ? Ce qui est une div et ce qui n'en est pas ?

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> </head>
<body> <header> </header> <section> </section> <aside> </aside> <footer> </footer> </body> </html>

ATELIER PRATIQUE C'EST LE MOMENT D'AGIR !!

Formation HTML / CSS

Formation HTML / CSS

More Decks by Axel Bouaziz

Other Decks in Programming

Featured

Transcript