SlideShare une entreprise Scribd logo
HTML / CSS
INITIATION
MARK04
SAMUEL ROBERT
ALUMNI ESCEN PARIS
http://rbrsamuel.com
f T G p l e w Y S
3
À TÉLÉCHARGER
Sublime Text
4
Comment fonctionne Internet ?
Comment créer un site web ?
HTML 2.0
1995
HTML 3.2
1997
HTML 4.0
1997
HTML 4.1
1999
HTML5
2004
TIM BERNERS-LEE
1991 : Naissance de l’HTML
Les bases de l'HTML / CSS
LES BASESdu déve l o p p e m e nt we b
CSS
Contenu Design
HTML
Structure
Javascript
Animations
QU’EST-CE QUE LE HTML ?
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
NAVIGATEURS
Brave
NEW
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
HTMLHyper Text Mar ku p Langu age
EDITEUR DE TEXTE01
EXPLORATEUR DE FICHIER02
NAVIGATEUR INTERNET03
COMMENT CRÉER UN FICHIER HTML ?
<!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
<balise>
</balise>
<balise/>
BALISES OUVRANTES
BALISES FERMANTES
BALISES ORPHELINES
LES BALISES
01
02
03
<H1> Voici l’introduction </H1>
Balise ouverte Balise fermé
Contenu
LES BALISES
<HTM
EN TÊTE
<link/>
<meta/>
<script>
<style>
<title>
TEXTE
<strong>
<em>
<h1>
<a>
<img>
<p>
LISTES
<ol>
<ul>
<li>
<dl>
<dt>
<dd>
HEAD
BODY
Titre / Langage etc..
Text / Images / Liens
LA STRUCTURE
Les bases de l'HTML / CSS
Les bases de l'HTML / CSS
CS SCascadi n g St y l e Sh e et s
Les bases de l'HTML / CSS
p { color: blue }
Propriété Valeur
Selecteur Déclaration
Les bases de l'HTML / CSS
Les bases de l'HTML / CSS
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
PAUSE
15 Minutes
RE S S OU RCE S
Po u r al l e r p l u s l o i n
https://www.youtube.com/watch?v=06pj3w1c6l4
Les bases de l'HTML / CSS
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/
EN SAVOIR
PLUS
http://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/
https://www.youtube.com/watch?v=66Z5U0J76TA
LET’S GO TO THE SAND BOX
H TML / CSS
DONE
IS BETTER
THAN PERFECT
QUESTIONS
et ré p o n se s
MERCI DE VOTRE ÉCOUTE
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

Contenu connexe

Tendances

Html css
Html cssHtml css
Html css
sloumaallagui1
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
Ines Ouaz
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
Hamid Tasra
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
Abdoulaye Dieng
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Thibault Martinez
 
Cours développement côté serveur
Cours développement côté serveurCours développement côté serveur
Cours développement côté serveur
Houda TOUKABRI
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
Kristen Le Liboux
 
Les principes de base de PHP
 Les principes de base de PHP  Les principes de base de PHP
Les principes de base de PHP
EL JAOUARI Ahmed
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Abdoulaye Dieng
 
Python avancé : Interface graphique et programmation évènementielle
Python avancé : Interface graphique et programmation évènementiellePython avancé : Interface graphique et programmation évènementielle
Python avancé : Interface graphique et programmation évènementielle
ECAM Brussels Engineering School
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
Abdoulaye Dieng
 
Support du cours : Programmation Web 2
Support du cours : Programmation Web 2Support du cours : Programmation Web 2
Support du cours : Programmation Web 2
Faycel Chaoua
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
Atelier Python 2eme partie par Achraf Kacimi El Hassani
Atelier Python 2eme partie par Achraf Kacimi El HassaniAtelier Python 2eme partie par Achraf Kacimi El Hassani
Atelier Python 2eme partie par Achraf Kacimi El Hassani
Shellmates
 
Cours php
Cours php Cours php
Cours php
Yassine Badri
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.ppt
PROFPROF11
 
Langage HTML
Langage HTMLLangage HTML
Formation wordpress
Formation wordpressFormation wordpress
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
Abdoulaye Dieng
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
ENSET, Université Hassan II Casablanca
 

Tendances (20)

Html css
Html cssHtml css
Html css
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Cours développement côté serveur
Cours développement côté serveurCours développement côté serveur
Cours développement côté serveur
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
Les principes de base de PHP
 Les principes de base de PHP  Les principes de base de PHP
Les principes de base de PHP
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Python avancé : Interface graphique et programmation évènementielle
Python avancé : Interface graphique et programmation évènementiellePython avancé : Interface graphique et programmation évènementielle
Python avancé : Interface graphique et programmation évènementielle
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Support du cours : Programmation Web 2
Support du cours : Programmation Web 2Support du cours : Programmation Web 2
Support du cours : Programmation Web 2
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Atelier Python 2eme partie par Achraf Kacimi El Hassani
Atelier Python 2eme partie par Achraf Kacimi El HassaniAtelier Python 2eme partie par Achraf Kacimi El Hassani
Atelier Python 2eme partie par Achraf Kacimi El Hassani
 
Cours php
Cours php Cours php
Cours php
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.ppt
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Formation wordpress
Formation wordpressFormation wordpress
Formation wordpress
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 

En vedette

HTML5 et JS accessible mission impossible
HTML5 et JS accessible mission impossibleHTML5 et JS accessible mission impossible
HTML5 et JS accessible mission impossible
levy aurélien
 
Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?
Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?
Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?
Frédéric Mandrea
 
How ZMOT affects Consumers' Behavior During Recession
How ZMOT affects Consumers' Behavior During RecessionHow ZMOT affects Consumers' Behavior During Recession
How ZMOT affects Consumers' Behavior During Recession
XPLAIN
 
“Google’s Zero Moment of Truth”
“Google’s Zero Moment of Truth”“Google’s Zero Moment of Truth”
“Google’s Zero Moment of Truth”
Content Marketing World
 
17 Cartoons That Will Change Your Business by @BrianSolis @Gapingvoid
17 Cartoons That Will Change Your Business by @BrianSolis @Gapingvoid17 Cartoons That Will Change Your Business by @BrianSolis @Gapingvoid
17 Cartoons That Will Change Your Business by @BrianSolis @Gapingvoid
Brian Solis
 
The Future of Digital Music and Artistry - Brian Solis at Midem 2015
The Future of Digital Music and Artistry - Brian Solis at Midem 2015The Future of Digital Music and Artistry - Brian Solis at Midem 2015
The Future of Digital Music and Artistry - Brian Solis at Midem 2015
Brian Solis
 
Relationship Economics: How to improve employee and customer relationships wi...
Relationship Economics: How to improve employee and customer relationships wi...Relationship Economics: How to improve employee and customer relationships wi...
Relationship Economics: How to improve employee and customer relationships wi...
Brian Solis
 
Digital Influence: Social Capital, Social Currency and Personal Branding
Digital Influence: Social Capital, Social Currency and Personal BrandingDigital Influence: Social Capital, Social Currency and Personal Branding
Digital Influence: Social Capital, Social Currency and Personal Branding
Brian Solis
 
Insights: Interviews on the Future of Social Media - Edited by Anil Dash & Gi...
Insights: Interviews on the Future of Social Media - Edited by Anil Dash & Gi...Insights: Interviews on the Future of Social Media - Edited by Anil Dash & Gi...
Insights: Interviews on the Future of Social Media - Edited by Anil Dash & Gi...
Brian Solis
 
A Manifesto for Building Relationships in the Digital Era by Brian Solis and ...
A Manifesto for Building Relationships in the Digital Era by Brian Solis and ...A Manifesto for Building Relationships in the Digital Era by Brian Solis and ...
A Manifesto for Building Relationships in the Digital Era by Brian Solis and ...
Brian Solis
 
15 Startups to Watch in 2015 -2016 by Brian Solis
15 Startups to Watch in 2015 -2016 by Brian Solis15 Startups to Watch in 2015 -2016 by Brian Solis
15 Startups to Watch in 2015 -2016 by Brian Solis
Brian Solis
 
Using WordPress for a Course Website
Using WordPress for a Course WebsiteUsing WordPress for a Course Website
Using WordPress for a Course Website
Jeremy Boggs
 
The Rise of Digital Darwinism and the Fall of Business As Usual by Brian Solis
The Rise of Digital Darwinism and the Fall of Business As Usual by Brian SolisThe Rise of Digital Darwinism and the Fall of Business As Usual by Brian Solis
The Rise of Digital Darwinism and the Fall of Business As Usual by Brian Solis
Brian Solis
 
Creating truly personal omni-channel customer experiences by Brian Solis and ...
Creating truly personal omni-channel customer experiences by Brian Solis and ...Creating truly personal omni-channel customer experiences by Brian Solis and ...
Creating truly personal omni-channel customer experiences by Brian Solis and ...
Brian Solis
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
Mai Moustafa
 
HTML/CSS/JS基础
HTML/CSS/JS基础HTML/CSS/JS基础
HTML/CSS/JS基础
jay li
 
ZMOT: Zero Moment of Truth
ZMOT: Zero Moment of TruthZMOT: Zero Moment of Truth
ZMOT: Zero Moment of Truth
Douglas Karr
 
SXSW 2011 Keynote: Welcome to the EGOsystem, how much are you worth
SXSW 2011 Keynote: Welcome to the EGOsystem, how much are you worthSXSW 2011 Keynote: Welcome to the EGOsystem, how much are you worth
SXSW 2011 Keynote: Welcome to the EGOsystem, how much are you worth
Brian Solis
 
Dell B2B Huddle UK with Brian Solis
Dell B2B Huddle UK with Brian SolisDell B2B Huddle UK with Brian Solis
Dell B2B Huddle UK with Brian Solis
Brian Solis
 
The State of Social Marketing 2012-2013 - Pivot Conference
The State of Social Marketing 2012-2013 - Pivot ConferenceThe State of Social Marketing 2012-2013 - Pivot Conference
The State of Social Marketing 2012-2013 - Pivot Conference
Brian Solis
 

En vedette (20)

HTML5 et JS accessible mission impossible
HTML5 et JS accessible mission impossibleHTML5 et JS accessible mission impossible
HTML5 et JS accessible mission impossible
 
Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?
Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?
Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?
 
How ZMOT affects Consumers' Behavior During Recession
How ZMOT affects Consumers' Behavior During RecessionHow ZMOT affects Consumers' Behavior During Recession
How ZMOT affects Consumers' Behavior During Recession
 
“Google’s Zero Moment of Truth”
“Google’s Zero Moment of Truth”“Google’s Zero Moment of Truth”
“Google’s Zero Moment of Truth”
 
17 Cartoons That Will Change Your Business by @BrianSolis @Gapingvoid
17 Cartoons That Will Change Your Business by @BrianSolis @Gapingvoid17 Cartoons That Will Change Your Business by @BrianSolis @Gapingvoid
17 Cartoons That Will Change Your Business by @BrianSolis @Gapingvoid
 
The Future of Digital Music and Artistry - Brian Solis at Midem 2015
The Future of Digital Music and Artistry - Brian Solis at Midem 2015The Future of Digital Music and Artistry - Brian Solis at Midem 2015
The Future of Digital Music and Artistry - Brian Solis at Midem 2015
 
Relationship Economics: How to improve employee and customer relationships wi...
Relationship Economics: How to improve employee and customer relationships wi...Relationship Economics: How to improve employee and customer relationships wi...
Relationship Economics: How to improve employee and customer relationships wi...
 
Digital Influence: Social Capital, Social Currency and Personal Branding
Digital Influence: Social Capital, Social Currency and Personal BrandingDigital Influence: Social Capital, Social Currency and Personal Branding
Digital Influence: Social Capital, Social Currency and Personal Branding
 
Insights: Interviews on the Future of Social Media - Edited by Anil Dash & Gi...
Insights: Interviews on the Future of Social Media - Edited by Anil Dash & Gi...Insights: Interviews on the Future of Social Media - Edited by Anil Dash & Gi...
Insights: Interviews on the Future of Social Media - Edited by Anil Dash & Gi...
 
A Manifesto for Building Relationships in the Digital Era by Brian Solis and ...
A Manifesto for Building Relationships in the Digital Era by Brian Solis and ...A Manifesto for Building Relationships in the Digital Era by Brian Solis and ...
A Manifesto for Building Relationships in the Digital Era by Brian Solis and ...
 
15 Startups to Watch in 2015 -2016 by Brian Solis
15 Startups to Watch in 2015 -2016 by Brian Solis15 Startups to Watch in 2015 -2016 by Brian Solis
15 Startups to Watch in 2015 -2016 by Brian Solis
 
Using WordPress for a Course Website
Using WordPress for a Course WebsiteUsing WordPress for a Course Website
Using WordPress for a Course Website
 
The Rise of Digital Darwinism and the Fall of Business As Usual by Brian Solis
The Rise of Digital Darwinism and the Fall of Business As Usual by Brian SolisThe Rise of Digital Darwinism and the Fall of Business As Usual by Brian Solis
The Rise of Digital Darwinism and the Fall of Business As Usual by Brian Solis
 
Creating truly personal omni-channel customer experiences by Brian Solis and ...
Creating truly personal omni-channel customer experiences by Brian Solis and ...Creating truly personal omni-channel customer experiences by Brian Solis and ...
Creating truly personal omni-channel customer experiences by Brian Solis and ...
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
HTML/CSS/JS基础
HTML/CSS/JS基础HTML/CSS/JS基础
HTML/CSS/JS基础
 
ZMOT: Zero Moment of Truth
ZMOT: Zero Moment of TruthZMOT: Zero Moment of Truth
ZMOT: Zero Moment of Truth
 
SXSW 2011 Keynote: Welcome to the EGOsystem, how much are you worth
SXSW 2011 Keynote: Welcome to the EGOsystem, how much are you worthSXSW 2011 Keynote: Welcome to the EGOsystem, how much are you worth
SXSW 2011 Keynote: Welcome to the EGOsystem, how much are you worth
 
Dell B2B Huddle UK with Brian Solis
Dell B2B Huddle UK with Brian SolisDell B2B Huddle UK with Brian Solis
Dell B2B Huddle UK with Brian Solis
 
The State of Social Marketing 2012-2013 - Pivot Conference
The State of Social Marketing 2012-2013 - Pivot ConferenceThe State of Social Marketing 2012-2013 - Pivot Conference
The State of Social Marketing 2012-2013 - Pivot Conference
 

Plus de Samuel Robert

Qu'est-ce que LinkedIn ? Comment l'utiliser ?
Qu'est-ce que LinkedIn ? Comment l'utiliser ?Qu'est-ce que LinkedIn ? Comment l'utiliser ?
Qu'est-ce que LinkedIn ? Comment l'utiliser ?
Samuel Robert
 
Qu'est-ce qu'Hootsuite ? Comment l'utiliser pour sa stratégie de social media ?
Qu'est-ce qu'Hootsuite ? Comment l'utiliser pour sa stratégie de social media ?Qu'est-ce qu'Hootsuite ? Comment l'utiliser pour sa stratégie de social media ?
Qu'est-ce qu'Hootsuite ? Comment l'utiliser pour sa stratégie de social media ?
Samuel Robert
 
STARTUP PROJECT : Girafe Pitch Deck
STARTUP PROJECT : Girafe Pitch DeckSTARTUP PROJECT : Girafe Pitch Deck
STARTUP PROJECT : Girafe Pitch Deck
Samuel Robert
 
Initiation au e-commerce !
Initiation au e-commerce !Initiation au e-commerce !
Initiation au e-commerce !
Samuel Robert
 
Comment faire une recherche efficace sur Google ?
Comment faire une recherche efficace sur Google ?Comment faire une recherche efficace sur Google ?
Comment faire une recherche efficace sur Google ?
Samuel Robert
 
Web tool box : Les nouveaux outils du web !
Web tool box  : Les nouveaux outils du web !Web tool box  : Les nouveaux outils du web !
Web tool box : Les nouveaux outils du web !
Samuel Robert
 
Quelle stratégie adopter sur Facebook ?
Quelle stratégie adopter sur Facebook ? Quelle stratégie adopter sur Facebook ?
Quelle stratégie adopter sur Facebook ?
Samuel Robert
 
Les métiers du web
Les métiers du webLes métiers du web
Les métiers du web
Samuel Robert
 

Plus de Samuel Robert (8)

Qu'est-ce que LinkedIn ? Comment l'utiliser ?
Qu'est-ce que LinkedIn ? Comment l'utiliser ?Qu'est-ce que LinkedIn ? Comment l'utiliser ?
Qu'est-ce que LinkedIn ? Comment l'utiliser ?
 
Qu'est-ce qu'Hootsuite ? Comment l'utiliser pour sa stratégie de social media ?
Qu'est-ce qu'Hootsuite ? Comment l'utiliser pour sa stratégie de social media ?Qu'est-ce qu'Hootsuite ? Comment l'utiliser pour sa stratégie de social media ?
Qu'est-ce qu'Hootsuite ? Comment l'utiliser pour sa stratégie de social media ?
 
STARTUP PROJECT : Girafe Pitch Deck
STARTUP PROJECT : Girafe Pitch DeckSTARTUP PROJECT : Girafe Pitch Deck
STARTUP PROJECT : Girafe Pitch Deck
 
Initiation au e-commerce !
Initiation au e-commerce !Initiation au e-commerce !
Initiation au e-commerce !
 
Comment faire une recherche efficace sur Google ?
Comment faire une recherche efficace sur Google ?Comment faire une recherche efficace sur Google ?
Comment faire une recherche efficace sur Google ?
 
Web tool box : Les nouveaux outils du web !
Web tool box  : Les nouveaux outils du web !Web tool box  : Les nouveaux outils du web !
Web tool box : Les nouveaux outils du web !
 
Quelle stratégie adopter sur Facebook ?
Quelle stratégie adopter sur Facebook ? Quelle stratégie adopter sur Facebook ?
Quelle stratégie adopter sur Facebook ?
 
Les métiers du web
Les métiers du webLes métiers du web
Les métiers du web
 

Les bases de l'HTML / CSS