Download - Les bases de l'HTML / CSS
![Page 1: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/1.jpg)
HTML / CSS INITIATION
![Page 2: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/2.jpg)
MARK04
SAMUEL ROBERT ALUMNI ESCEN PARIS http://rbrsamuel.com
f T G p l e w Y S
![Page 3: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/3.jpg)
3
À TÉLÉCHARGER
Sublime Text
![Page 4: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/4.jpg)
4
Comment fonctionne Internet ?
Comment créer un site web ?
![Page 5: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/5.jpg)
HTML 2.01995
HTML 3.21997
HTML 4.01997
HTML 4.11999
HTML52004
![Page 6: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/6.jpg)
TIM BERNERS-LEE1991 : Naissance de l’HTML
![Page 7: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/7.jpg)
![Page 8: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/8.jpg)
L E S B A S E Sd u d é v e l o p p e m e n t w e b
![Page 9: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/9.jpg)
CSS
Contenu Design
HTML
Structure
Javascript
Animations
QU’EST-CE QUE LE HTML ?
![Page 10: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/10.jpg)
1. Accès via URL
2. Interrogation du serveur de la page
3. Envoi de la page par le serveur
FONCTIONNEMENT
4. Lecture de la page par le navigateur
![Page 11: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/11.jpg)
NAVIGATEURS
Brave
NEW
![Page 12: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/12.jpg)
LES DOSSIERS
IMG
CSS
JS
Règles importantes pour le nom des fichiers - Ne jamais utiliser d’espace / Ne jamais utiliser de caractères spéciaux / Éviter les lettres en majuscules
![Page 13: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/13.jpg)
H T M LH y p e r Te x t M a r k u p L a n g u a g e
![Page 14: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/14.jpg)
EDITEUR DE TEXTE01
EXPLORATEUR DE FICHIER02
NAVIGATEUR INTERNET03
COMMENT CRÉER UN FICHIER HTML ?
![Page 15: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/15.jpg)
<!doctype html> <html> <head>
<meta charset=« utf-8 »> <title>Titre de la page</title> </head> <body> </body> </html>
DOCTYPEDocument Type Declaration
Indique au navigateur internet le type de document à lire
![Page 16: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/16.jpg)
<balise>
</balise>
<balise/>
BALISES OUVRANTES
BALISES FERMANTES
BALISES ORPHELINESLES BALISES
01
02
03
![Page 17: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/17.jpg)
<H1> Voici l’introduction </H1>Balise ouverte Balise fermé
Contenu
![Page 18: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/18.jpg)
LES BALISES<HTML>
EN TÊTE
<link/> <meta/> <script> <style> <title>
TEXTE<strong> <em> <h1> <a> <img> <p>
LISTES<ol> <ul> <li> <dl> <dt> <dd>
![Page 19: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/19.jpg)
HEAD
BODY
Titre / Langage etc..
Text / Images / Liens
LA STRUCTURE
![Page 20: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/20.jpg)
![Page 21: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/21.jpg)
![Page 22: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/22.jpg)
C S SC a s c a d i n g S t y l e S h e e t s
![Page 23: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/23.jpg)
![Page 24: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/24.jpg)
p { color: blue }Propriété Valeur
Selecteur Déclaration
![Page 25: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/25.jpg)
![Page 26: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/26.jpg)
![Page 27: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/27.jpg)
LES PROPRIÉTÉS
{CSS} TEXTE
font-family font-size text-align
text-transform vertical-align
COULEUR
color background-color
background-image background-
position
BOÎTES
width height
min-width min-
height
![Page 28: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/28.jpg)
PAUSE15 Minutes
![Page 29: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/29.jpg)
R E S S O U R C E SP o u r a l l e r p l u s l o i n
![Page 31: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/31.jpg)
![Page 32: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/32.jpg)
RESSOURCES
https://html5up.net/
http://getbootstrap.com/
http://materializecss.com/
http://creative-tim.com/
https://freehtml5.co/page/3/
http://www.templatestash.com/
https://themeforest.net/category/site-templates
http://tympanus.net/codrops/
http://www.cssdesignawards.com/
https://www.market-me.fr/
![Page 33: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/33.jpg)
EN SAVOIR PLUShttp://www.alsacreations.com/
https://openclassrooms.com/
https://www.lynda.com/
http://www.w3schools.com/
https://developer.mozilla.org/fr/docs/Web/Guide/HTML
https://www.codecademy.com/fr
http://www.csszengarden.com/tr/francais/
https://www.video2brain.com/fr/
![Page 34: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/34.jpg)
https://www.youtube.com/watch?v=66Z5U0J76TA
![Page 35: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/35.jpg)
LET’S GO TO THE SAND BOXH T M L / C S S
![Page 36: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/36.jpg)
DONE IS BETTER THAN PERFECT
![Page 37: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/37.jpg)
QUESTIONSe t r é p o n s e s
![Page 38: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/38.jpg)
MERCI DE VOTRE ÉCOUTE
![Page 39: Les bases de l'HTML / CSS](https://reader036.vdocuments.us/reader036/viewer/2022062401/5877825c1a28abc85f8b5c49/html5/thumbnails/39.jpg)
SOURCES
Gifs et animations : https://dribbble.com / Google Image Illustration et photographies : https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal http://www.shutterstock.com/ Informations : http://www.fevad.com/ http://frenchweb.fr/ www.definitions-marketing.com/definition/marketing/
Videos : www.youtube.com/ http://www.shutterstock.com
Utilisation commerciale interdite - Vous n’êtes pas autorisé à faire un usage commercial de cette Oeuvre, tout ou partie du matériel la composant