Les bases de l'HTML / CSS

•

4 j'aime•1,539 vues

Présentation réalisée dans le cadre du cours de "HTML / CSS "donné à l'École Supérieure de Commerce et d'Économie Numérique de Paris. PLAN : 0.Introduction 1. Les bases du developpement web - Qu'est-ce que le HTML ? - Son fonctionnement - Les navigateurs - Les dossiers 2. HTML5 - Comment créer un fichier HTML - Doctype - Les balises - La structure 3. CSS - Link CSS - Les propriétés 4. Les ressources du web 5. Sand Box 6. Q&A

Internet

MARK04
SAMUEL ROBERT
ALUMNI ESCEN PARIS
http://rbrsamuel.com
f T G p l e w Y S

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

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

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

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

p { color: blue }
Propriété Valeur
Selecteur Déclaration

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

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

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

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

Manuel des TP : Atelier Web 2Faycel Chaoua

Examen principal - PHPInes Ouaz

HTML & CSSHamid Tasra

Support de cours angularENSET, Université Hassan II Casablanca

Application web php5 html5 css3 bootstrapBassem ABCHA

Support de cours Spring M.youssfiENSET, Université Hassan II Casablanca

Introduction à LaravelAbdoulaye Dieng

Cours php & Mysql - 1ére partiekadzaki

Support programmation orientée objet c# .net version f8ENSET, Université Hassan II Casablanca

Examen principal- php - correctionInes Ouaz

Support du cours : Systèmes d'exploitation 2 (linux)Faycel Chaoua

Cours développement côté serveurHouda TOUKABRI

Initiation html cssthamer belfkih

Sécurité des Applications Web avec Json Web Token (JWT)ENSET, Université Hassan II Casablanca

Initiation à BootstrapAbdoulaye Dieng

Cours JavaScriptOlivier Le Goaër

Support JEE Servlet Jsp MVC M.YoussfiENSET, Université Hassan II Casablanca

Développement d'un site web jee de e commerce basé sur spring (m.youssfi)ENSET, Université Hassan II Casablanca

Theses Soutenues sous Direction et Co-Direction du Pr YOUSSFIENSET, Université Hassan II Casablanca

Intégration Web HTML 5 & CSS 3Stephane PERES

Tendances (20)

Manuel des TP : Atelier Web 2

Examen principal - PHP

HTML & CSS

Support de cours angular

Application web php5 html5 css3 bootstrap

Support de cours Spring M.youssfi

Introduction à Laravel

Cours php & Mysql - 1ére partie

Support programmation orientée objet c# .net version f8

Examen principal- php - correction

Support du cours : Systèmes d'exploitation 2 (linux)

Cours développement côté serveur

Initiation html css

Sécurité des Applications Web avec Json Web Token (JWT)

Initiation à Bootstrap

Cours JavaScript

Support JEE Servlet Jsp MVC M.Youssfi

Développement d'un site web jee de e commerce basé sur spring (m.youssfi)

Theses Soutenues sous Direction et Co-Direction du Pr YOUSSFI

Intégration Web HTML 5 & CSS 3

En vedette

HTML5 et JS accessible mission impossiblelevy aurélien

Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?Frédéric Mandrea

How ZMOT affects Consumers' Behavior During RecessionXPLAIN

“Google’s Zero Moment of Truth”Content Marketing World

17 Cartoons That Will Change Your Business by @BrianSolis @GapingvoidBrian Solis

The Future of Digital Music and Artistry - Brian Solis at Midem 2015Brian Solis

Relationship Economics: How to improve employee and customer relationships wi...Brian Solis

Digital Influence: Social Capital, Social Currency and Personal BrandingBrian Solis

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 ...Brian Solis

15 Startups to Watch in 2015 -2016 by Brian SolisBrian Solis

Using WordPress for a Course WebsiteJeremy Boggs

The Rise of Digital Darwinism and the Fall of Business As Usual by Brian SolisBrian Solis

Creating truly personal omni-channel customer experiences by Brian Solis and ...Brian Solis

HTML CSS BasicsMai Moustafa

HTML/CSS/JS基础jay li

ZMOT: Zero Moment of TruthDouglas Karr

SXSW 2011 Keynote: Welcome to the EGOsystem, how much are you worthBrian Solis

Dell B2B Huddle UK with Brian SolisBrian Solis

The State of Social Marketing 2012-2013 - Pivot ConferenceBrian Solis

En vedette (20)

HTML5 et JS accessible mission impossible

Wordcamp Bordeaux 2017 : et si Wordpress devenait votre système d'information ?

How ZMOT affects Consumers' Behavior During Recession

“Google’s Zero Moment of Truth”

17 Cartoons That Will Change Your Business by @BrianSolis @Gapingvoid

The Future of Digital Music and Artistry - Brian Solis at Midem 2015

Relationship Economics: How to improve employee and customer relationships wi...

Digital Influence: Social Capital, Social Currency and Personal Branding

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 ...

15 Startups to Watch in 2015 -2016 by Brian Solis

Using WordPress for a Course Website

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 ...

HTML CSS Basics

HTML/CSS/JS基础

ZMOT: Zero Moment of Truth

SXSW 2011 Keynote: Welcome to the EGOsystem, how much are you worth

Dell B2B Huddle UK with Brian Solis

The State of Social Marketing 2012-2013 - Pivot Conference

Plus de Samuel Robert

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 ?Samuel Robert

STARTUP PROJECT : Girafe Pitch DeckSamuel Robert

Initiation au e-commerce !Samuel Robert

Comment faire une recherche efficace sur Google ?Samuel Robert

Web tool box : Les nouveaux outils du web !Samuel Robert

Quelle stratégie adopter sur Facebook ? Samuel Robert

Les métiers du webSamuel Robert

Plus de Samuel Robert (8)

Qu'est-ce que LinkedIn ? Comment l'utiliser ?

Qu'est-ce qu'Hootsuite ? Comment l'utiliser pour sa stratégie de social media ?

STARTUP PROJECT : Girafe Pitch Deck

Initiation au e-commerce !

Comment faire une recherche efficace sur Google ?

Web tool box : Les nouveaux outils du web !

Quelle stratégie adopter sur Facebook ?

Les métiers du web

Les bases de l'HTML / CSS

1. HTML / CSS INITIATION

2. MARK04 SAMUEL ROBERT ALUMNI ESCEN PARIS http://rbrsamuel.com f T G p l e w Y S

3. 3 À TÉLÉCHARGER Sublime Text

4. 4 Comment fonctionne Internet ? Comment créer un site web ?

5. HTML 2.0 1995 HTML 3.2 1997 HTML 4.0 1997 HTML 4.1 1999 HTML5 2004

6. TIM BERNERS-LEE 1991 : Naissance de l’HTML

8. LES BASESdu déve l o p p e m e nt we b

9. CSS Contenu Design HTML Structure Javascript Animations QU’EST-CE QUE LE HTML ?

10. 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

11. NAVIGATEURS Brave NEW

12. 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

13. HTMLHyper Text Mar ku p Langu age

14. EDITEUR DE TEXTE01 EXPLORATEUR DE FICHIER02 NAVIGATEUR INTERNET03 COMMENT CRÉER UN FICHIER HTML ?

15. <!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

16. <balise> </balise> <balise/> BALISES OUVRANTES BALISES FERMANTES BALISES ORPHELINES LES BALISES 01 02 03

17. <H1> Voici l’introduction </H1> Balise ouverte Balise fermé Contenu

18. 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>

19. HEAD BODY Titre / Langage etc.. Text / Images / Liens LA STRUCTURE

20.

21.

22. CS SCascadi n g St y l e Sh e et s

23.

24. p { color: blue } Propriété Valeur Selecteur Déclaration

25.

26.

27. 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

28. PAUSE 15 Minutes

29. RE S S OU RCE S Po u r al l e r p l u s l o i n

30. https://www.youtube.com/watch?v=06pj3w1c6l4

31.

32. 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/

33. 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/

34. https://www.youtube.com/watch?v=66Z5U0J76TA

35. LET’S GO TO THE SAND BOX H TML / CSS

36. DONE IS BETTER THAN PERFECT

37. QUESTIONS et ré p o n se s

38. MERCI DE VOTRE ÉCOUTE

39. 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

Les bases de l'HTML / CSS

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Plus de Samuel Robert

Plus de Samuel Robert (8)

Les bases de l'HTML / CSS