La meilleure application est une page blanche. Nous couvrons tout ce dont vous avez besoin pour créer votre premier site Web. De la création de votre première page jusqu'au téléchargement de votre site sur Internet.

1. Fait avec passion ©2021 ericacademy
le développement WEB Responsif
ericacademy
Apprendre Autrement

2. La meilleure application est une
page blanche
“

3. PARETO
VILFREDO
Apprendre un Nouveau Language?
80% du code est écrit
par 20% des
fonctionnalités!

4. Site Internet ou Application
Une analogie simple:
HTML CSS JAVASCRIPT

5. C’Est Quoi le HTML?
HTML est partout autour de nous. Il est utilisé sur les sites web, dans les applications, dans
d'autres logiciels, à chaque fois que la technologie web est utilisée. HTML fournit le conduit
pour le contenu, les mots, les images, la vidéo et l'audio, les formulaires … et est la base solide
sur laquelle tout le reste est construit.
C’est le BAMANANKAN du WEB, la langue du WEB.
logiciel
site WEB
application

6. C’Est Quoi le Language HTML?
•Traitement de texte (Word Processing)
•RUNOFF-GML-XML-HTML
•<…></…>? SCRIBE (formatage != contenu)
•La boite devenu fourre-tout
(combat MS-Netscape, formatage devenu app, …)
•Résistant (avantage ou défaut?)
Le WEB n’est pas une page mais un PARCHEMIN

7. C’Est Quoi le CSS?
Le CSS est un élément fondamental de la conception de sites Web, car il contrôle l'apparence
de vos pages Web. Sans cela, les sites Web ne pourraient afficher que du texte sur fond blanc.
Utilisez les feuilles de style en cascade pour faire passer vos sites Web HTML ordinaires au
niveau supérieur.
sans css avec css

8. avec CSS sans CSS

9. où faut-il commencer?

10. Plani
fi
cation, Clef de Tous les Succès

11. Il est toujours bon d'avoir une
vue d'ensemble de l’objectif et de
ce dont on a besoin pour y arriver.

12. C’est toujours plus OPTIMAL!

13. Par Où Commencer son Site?
Le wireframe (maquette) permet d’avoir une vue d’ensemble de son site avant sa création.
Il est toujours mieux de partir d’un plan avant la construction d’une maison à moins d’être fan de
moments stressants 😅.
header
contenu principal
aside
c’est à qui ce chat 😱?

14. Il Vous Faudra un Éditeur de Code

15. Tout sur:
Basics:
•Ref css
•Relative path
•Absolute path
Premiers Pas:
•Syntax
•Valeurs et unités
•Couleurs
•Texte
•Selecteurs
•Spécificité
•Cascade
Box Model
•Inline, block, inline-block
•Relative path
•Absolute path
Float
CSS
•Basics
•Texte
•Liens
•Images
•Médias
HTML

16. HTML5, les Nouvelles Balises

17. CSS, Existence Dans le HTML
/* FICHIER EXTERNE */
<link rel="stylesheet" href=“/mystyle.css">
/* INTERNE */
<style>
body {
background-color: gray;
}
</style>
/* INLINE */
<h1 style="color:blue;text-align:center;">This is a heading</h1>

18. CSS, Lien RELATIF vs ABSOLUT
/* LIEN RELATIF */
<link rel="stylesheet" href=“mystyle.css">
/* LIEN ABSOLUT */
<link rel="stylesheet" href=“http://monsite.com/mystyle.css”>
<a href=‘http://www.google.com’>mon lien</p>

19. CSS, la Syntaxe
/* notation longue */
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
/* notation courte */
padding: 10px 5px;
p {
color: red;
}
Sélecteur
Valeur
Propriété
Bloc de Déclaration
Déclaration
/* p{color:red;} */

20. CSS, les Unités
/* OK */
color: green;
padding: 10px;
font-size: 3em;
color: rgb(123,0,123);
/* NOK */
padding: red;
font-size: rgb(123,0,123);
/* UNITÉS ABSOLUES */
Toujours fixe.
Cette taille ne change jamais.
EX: px, cm, mm, pt
/* UNITÉS RELATIVES */
Taille flexible.
Dépend de la taille du PARENT.
EX: %, em, rem, vw, vh
/* EXCEPTIONS */
line-height: 1.2;
color: red;

21. CSS, CLASS vs ID
/* CLASS */
/* HTML */
<p class=‘alert’>Ceci est un message important</p>
/* CSS */
.alert { color: red; }
/* ID */
/* HTML */
<p id=‘alert’>Ceci est un message important</p>
/* CSS */
#alert { color: red; }
Réutilisable
Unique
/* <p class=‘alert error message’>Ceci est un message important</p> */

22. CSS, Box Model ou Modèle de Boite
Margin
Border
Padding
CONTENT
/* BOX MODEL */
La chose la plus importante dans le CSS est de pouvoir
calculer la taille d’un élément
(ce n’est pas si simple)
Par rapport à un élément, il y’a 2 notions importantes à savoir:
•CONTENT BLOCK (padding, border, width)
•CONTAINING BLOCK (margin)
Quand un élément ne tient pas dans son parent, le navigateur
peut sacri
fi
er les margin/padding
Le modèle de boite est la base du
positionnement de tout élément sur
une page web.

23. CSS, le Display
UN
DEUX
TROIS
1 2 3
4 UN DEUX
TROIS
BLOCK INLINE INLINE-BLOC NONE
Le DISPLAY permet de changer l’af
fi
chage
(ou pas) d’un élément sur une page WEB.

24. CSS, FLOAT & CLEAR
Flux Normal
du document
Une propriété importante à maitriser dans le CSS.
FLOAT LEFT ou RIGHT bouge l’élément à l’extrême gauche ou l’extrême droite de son
parent.
FLOAT enlève un élément du Flux Normal du Document et le navigateur traite la
partie comme si elle n’existait pas dans le code mais SI d’un point de vue visuel.
img
P
fl
oat left
fl
oat right
/* LEFT | RIGHT | NONE */

25. CSS, le RESET
Le CSS RESET permet d’enlever les valeurs par défaut
appliquées par le navigateur pour commencer un
design sur de bonnes bases.
C’est d’autant plus pertinent que les navigateurs n’ont
pas forcément les mêmes valeurs par défaut.
Donc la meilleure façon de procéder est d’écraser le
style par défaut.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fi
eldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
fi
gure,
fi
gcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details,
fi
gcaption,
fi
gure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}

26. CSS, Le RESPONSIF
@media only screen and (){}
(max-width: ..) and (min-width: ..)
(orientation: landscape)
PC MOBILE
Les con
fi
gurations Responsives nous permettent d’adapter le contenu de notre site
internet à la taille de l’équipement utilisé par nos clients.
On peut paramétrer les tailles, orientations et le support utilise par nos clients
Penser à mettre le meta à jour:
<meta name="viewport" content="width=device-width, initial-scale=1">

27. Un EXEMPLE …

28. Fait avec passion ©2021 ericacademy
MERCI
Des questions? Besoin d’aide?
erickeita@protonmail.com
ericacademy
Apprendre Autrement