Introduction

au
développeme
nt web
Cours de codage
Partie 1 - HTML
Partie 2 - CSS

1
Bienvenu
e!

2
Bienvenue!
● Comment les cours seront-ils organisés

● Ce que nous allons apprendre sur ce parcours

○ HTML

○ CSS

○ UX - Expérience utilisateur

○ GitHub, référentiels et contrôle de version

○ Twitter Bootstrap

○ Javascript and JQuery

● Présentation de nos instructeurs

● Présentez-vous! Quel est ton fromage préféré?

3
Installatio
ns

4
Installations
● Vérifiez que vous avez les éléments suivants sur votre ordinateur

○ Le programme d'édition de texte appelés 'Atom'[[Link]

○ Le navigateur Web "Google Chrome" [

[Link]

○ Cette version de l'application client de bureau GitHub[https

://[Link]/[Link]]

● Inscrivez-vous pour un compte ‘GitHub’

○ Aller à [Link]

● Téléchargez vos documents de cours (format PDF) sur votre bureau

Si vous n'avez aucun de ces problèmes ou si vous avez des

problèmes, informez-en votre instructeur!

5
Introduction
au codage

6
Qu'est-ce que le codage?

● Trois langages différents que nous utilisons dans le codage web

○ HTML - un langage de "balisage"
○ CSS- un langage de ‘mise en forme'
○ JavaScript - un langage de programmation

7
 HTML CSS JavaScript
HyperText Markup Cascading Style Sheets
Language

un langage de balisage une feuille de style un langage de

Décrit la structure des programmation
pages Web. Décrit la présentation
des pages Web, y Permet l'interactivité
Les documents HTML
compris les couleurs, la de l'utilisateur et
sont décrits par des mise en page et les permet aux pages Web
balises HTML, et [Link] permet un d'être dynamiques.
design réactif; pour (Habituellement sans
chaque balise décrit un adapter la présentation avoir besoin de
élément différent. à différents types recharger la page)
d'appareils.
* C'est un type de
langage de
programmation,
scripting.

8
L’internet
& le Site
web

9
L’internet & Le Site Web

● Qu'est-ce qu'Internet et comment ça marche?

● Comment fonctionne le web?
● Qu'est-ce que fait un site web?

10
Chapitre 1: Qu'est-ce
qu'Internet et comment ça
Internet Web

marche?
HARDWARE SOFTWARE

● Un grand réseau ● Le système que vous utilisez pour

accéder à Internet
● Beaucoup d'ordinateurs connectés
les uns aux autres ● Navigateur, email, messagerie
instantanée, ...
● les serveurs
● les clients

11
Chapitre 2 - Comment
fonctionne Internet?
serveur les clients
demand Le logiciel sur les
Les ordinateurs
e ordinateurs que les
contenant des gens utilisent pour
accéder au web
pages Web, des répondr
sites et des e Ordinateur de bureau,
ordinateur portable,
applications téléphone, ...

12
L'anatomie d'une URL

[Link]

hôt Les
protocole données
e
comment
où le quoi chercher
chercher
chercher
l'information

13
URL et adresse IP

[Link]
[Link]

14
Deux types de site Web

Statique Dynamique

● Pré-définit ● Generated on the fly

● Toujours le même ● Pulls data from a database

E.g. [Link]

15
Mettre en place un site
web
Hébergement Domaine
Un nom de domaine à pointer
Un serveur pour héberger votre site web
vers ce site

16
Chapter 3 - Qu'est-ce qui
fait un site web
Site web
● Une collection de
pages Web liées

● La page d’acceuil est

[Link]

Icons by KΛPKLΛM from the Noun Project

17
Le dossier du site
Essayez de vous
Chaque site Web a en tenir aux noms
besoin d'un fichier Dossier du
de dossiers et de
[Link]. Ceci est fichiers sans
la page d'accueil de Site
espace
votre site. —— [Link]
—— [Link]
—— images
—— [Link]
Organisez vos —— css Les autres pages
fichiers d'actifs de votre site Web
dans des dossiers. —— [Link] auront .html
Cela rendra plus —— js comme extension
facile de les
localiser. —— [Link]

18
Les composants d'une page
Web
Texte la colonne
HTML
s vertébrale
Mise en à quoi ça
CSS
forme ressemble
script comment ça
JavaScript
s interagit
divertissemen
Images, video, medias
t
audio, etc.

19
 Il n'y a pas de secrets
dans HTML, CSS or JS

Découvrez les outils de développement

de Google Chrome

20
Partie 1
Hyper
Text
Markup
Languag
e ou
“HTML”
21
Chapitre 4 - Création d'une
page HTML de base
Tout ce dont tu as besoin c'est :

● Un éditeur de Texte
● Un navigateur Web

22
Créer un dossier
cours_codage

23
<h1>Hello World</h1>

24
Chapitre 5 - Les bases du
La version de
HTML "Le DOM HTML" HTML que vous
utilisez
<!DOCTYPE html>
Le commencement
<html> d’un document
HTML
<head>
<title>Page title</title> La Tête du Site
Web
…
</head>
<body> La partie visible
… du Site Web dans
le navigateur
</body> La fin du document
</html> HTML

25
Elements du HTML

<h1>Hello world</h1>

<img src=”[Link]” alt=”A smiley

face”>

26
Elements d’ouverture et de
fermeture
<tag
.. stuff .. </tag>
>

Balise Balise de
d’ouverture fermetire
<h1>Hello world</h1>
<h2>Sous-Titre</h2>
<p>Un paragraphe de texte. Avec autant de phrases que vous
souhaitez.</p>
<p>ça c’est<strong>un texte en gras</strong> et ça c’est
<em>un texte en italique</em>.</p>
<div>
<p>Une division.</p>
</div>
27
Éléments tout-en-un
<Baliseattribute=”valu >
e”

Le contenu de
l'élément est
La balise contenu dans un La balise
s'ouvre ici attribut
se ferme
ici

<img src=”[Link]” alt=”A smiley

face”>

28
Les attributs
<Balis attribute=”valu
>
e e”

Guillemets
Aucun entourant la
espace de valeur de
chaque côté l'attribut
du signe =

<div class=”info-section”>
<img src=”[Link]” alt=”A smiley
face”>
<a href=”[Link]
29
Bonne pratique de codage
VALID
CODE
● Toujours indenter le <div>
<h1>Hello world</h1>
code imbriqué. <p>
● La dernière balise que <em>I
<strong>really</strong>
vous avez ouvert est la mean that</em>
première balise que <p>

vous fermerez. <div>

<h2>A subtitle</p>
<p>A few sentences to go with
the subtitle. About nothing in
particular, just making up the
numbers.</p>
</div>
</div>

30
 DEMO

https://
[Link]/
dianaklee/pen/
rOMzNj

31
 Tâche

https://
[Link]/
code61/
learning_html

32
Markdown cheatsheet
Headers Unordered lists Ordered lists

# An <h1> tag - Item 1 1. Item 1

## An <h2> tag - Item 2 2. Item 2

###### An <h6>
tag

Emphasis Table

*This text will be italic* Column title Column title

**This text will be bold** Row cell Row cell

Row cell Row cell

33
Partie 2
Cascadin
g Style
Sheets
ou
“CSS”
34
Récapitulatif
website-folder
● Un site Web est une
collection de fichiers dans un —— [Link]
dossier
—— [Link]
● Le dossier peut contenir des
fichiers HTML, CSS et —— images
JavaScript
● Nous pouvons créer et éditer —— [Link]
les fichiers localement
—— css
● Nous pouvons voir les
fichiers localement dans un —— [Link]
navigateur
—— js
—— [Link]

35
Chapitre 6 - Qu'est-ce que le
CSS?
Feuilles de style en cascade

● Ajoute des styles au document HTML

● Un fichier HTML peut être stylé de façon infinie avec CSS

36
Chapitre 7 - Liaison de CSS à
HTML
Dans une ligne dans Dans l’element
HTML <head>
<p style=“color:
<!DOCTYPE html>
red”>
Peut être utile, mais devrait être <html>
évité <head>
<style>
p {
color: red;
}
</style>
</head>
…
Mieux, mais à utiliser
seulement quand il y a une
37
bonne raison pour cela.
Lier du CSS au HTML
Dans un fichier CSS séparé

<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet”
href=“css/[Link]”>
</head>
…
● Sépare le contenu de la conception, évitant le HTML
encombré
● Réduire la répétition du code
● Un fichier CSS pour l'ensemble d'un site Web
38
L’anatomie de la balise de
lien
<link rel=“stylesheet” type=“text/css”
href=“[Link]”>
typ Fichie
relation
e r
Quelle est la Le type
relation du Où se
de
fichier lié à ce trouve le
fichier
document fichier CSS

39
Les types de liens

● Liens absolus
● Liens relatifs à la racine
first_site
● Liens relatifs au document
— [Link]
— images
—
[Link]
— css
— [Link]

40
Liens absolus

In HTML
<link rel=“stylesheet” first_site
type=“text/css” href=“ — [Link]
[Link]
— images
css/[Link]”>
—
In CSS [Link]
body {
— css
background-image:
url(“ — [Link]
[Link]
ages/[Link] 41
Liens relatif à la
racine
In HTML
<link rel=“stylesheet” first_site
type=“text/css” href=“/css — [Link]
/[Link]”>
— images
—
Les liens relatifs à la
[Link]
racine commencent
— css
toujours par /
— [Link]

42
Liens relatifs au
document
In HTML
<link rel=“stylesheet” first_site
type=“text/css” href=“css — [Link]
/[Link]”>
— images
In CSS —
body { [Link]
background-image:
— css
url(“..
/images/[Link]”); — [Link]
}
43
Chapitre 8 – Rédaction du code CSS
et quelques définitions de base.
[Link]
<!DOCTYPE html>
<html>
<head>
<title>First site</title>
<link rel=“stylesheet” type=“text/css”
href=“css/[Link]”>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>

h1 {
color: red; [Link]

}
44
L'anatomie d’une règle CSS
L’element que
vous souhaitez
metre en forme

selector {
property: value;
} Bloc de
déclaration
La valeur d'effet
Ce que vous du style
mettez en forme

45
Les selecteurs en CSS

h1 { .. }
img { .. }
div { .. }
div h1 { .. }
ul { .. }
ul li { .. }
li { .. }
a { .. }
p a { .. }

46
Les propriétés en CSS

h1 { font-family: .. }
img { width: .. }
div { height: .. }
div h1 { color: .. }
ul { list-style-type: .. }
ul li { padding-left: .. }
li { margin-bottom: .. }
a { text-decoration: .. }
p a { border: .. }

47
Les valeurs en CSS

h1 { font-family: ‘Helvetica’, sans-serif; }

img { width: 300px; }
div { height: 595px; }
div h1 { color: blue; }
ul { list-style-type: none; }
ul li { padding-left: 30px; }
li { margin-bottom: 50px; }
a { text-decoration: underline; }
p a { border: 1px solid #000; }

48
 DEMO

[Link]
dianaklee/pen/JYbbRx

49
 TASK
DOWNLOAD

[Link]
CodeFirstGirls/html2

50
 Chapitre 9 - Sélecteurs et
Etattributs
si vous voulez mettre en forme les deux éléments <h2>
différemment?

<div>
<h1>Praesent dapibus</h1>
<h2>The first h2 heading</h2>
<p>Donec nec justo eget felis facilisis fermentum.</p>
<p>Aliquam porttitor mauris sit amet orci.</p>
<h2>The second h2 heading</h2>
<p>Morbi in sem quis dui placerat ornare.</p>
<p>Pellentesque odio nisi, euismod in, pharetra a.</p>
<p>Praesent dapibus, neque id cursus faucibus.</p>
</div>

51
Récapitulatif sur les
attributs
attribute=”valu
<Balise >
e”

Guillemets
Aucun entourant la
espace de valeur de
chaque côté l'attribut
du signe =

<div class=”info-section”>
<img src=”[Link]” alt=”A smiley
face”>
<a href=”[Link]
52
 DEMO

[Link]
dianaklee/pen/meOWaY

53
Chapitre 10 - Utilisation des
sélecteurs d'ID et de classe
ID Class

Unique: Cet identifiant Ce n'est pas unique: la

ne peut être utilisé que même classe peut être
sur une page HTML utilisée sur plusieurs
éléments d'une page
HTML
<h2 id=”title”>Puddings</h2>

<ul>
<li class=”item”>Gateau</li>
<li class=”item”>Cake</li>
<li class=”item”>Pie</li>
</ul> 54
Utilisation de sélecteurs d'ID
dans CSS
<h2 id=”title”>Puddings</h2>

#title { .. }
Les deux sont
h2#title { .. }
valables

55
Utilisation de sélecteurs de
classe dans CSS
.item { .. } <ul>
<li class=”item”>Gateau</li>
[Link] { .. }
<li class=”item”>Cake</li>
ul .item { .. } <li class=”item”>Pie</li>
</ul>
ul [Link] { .. }

Tous sont valides

56
Spécificité des sélecteurs
<p>Sed egestas, ante et vulputate volutpat, eros pede semper est,
vitae luctus metus libero eu augue.</p>
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida
id, est.</p>
<p class=“highlight”>Sed lectus. Praesent elementum hendrerit
tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a
ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien
ornare nisl.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed,
urna.</p>
p { color: #333; }
.highlight { color: pink;
} 57
Chapitre 11 - Le sélecteur
universel
Cela correspond à n'importe quel élément dans le
contexte dans lequel il est placé.

* {
font-family: Helvetica, sans-
serif;
Cela va changer
}
toute la police du
texte sur la page
web en Helvetica
58
Soyez plus sélectif avec le
sélecteur universel
<ul id=“products_list”>
<li class="product_item">Black forrest gateau</li>
<li class="product_item">Raspberry lemon swirl
cheesecake</li>
<li class="product_item">Sticky toffee pudding</li>
<li class="product_item">Death-by-chocolate cake</li>
</ul>

.product_item { .. }
Les deux sont valides
#products_list * { .. }

59
Chapitre 12 – Les Balises <div>
et <span> en HTML
<div> <span>

● Idéal pour les block de Texte ● C'est une balise de type

● Permet de regrouper des ligne = il ne démarre pas sur
balises HTML qui vont une nouvelle ligne
ensemble
● Il est généralement utilisé à
● C'est une balise de type bloc
l'intérieur d'autres balises
= il va commencer une
nouvelle ligne avant et après
<div>
l'élément
<p>Ceci est un paragraphe dans la section info. Nous
pouvons utiliser une durée pour cibler <span
class=“important”> certaines parties de texte important
</span>.<p>
60
</div>
Style [Link]
to look like
exercise2_solution.p
ng

It’s inside the html2

folder you downloaded
earlier

61