Les bases de l'HTML / CSS

•

4 j'aime•1,537 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

Cours HTML/CSSAxel Chalon

Appalications JEE avec Servlet/JSPYouness Boukouchi

Support de cours technologie et application m.youssfiENSET, Université Hassan II Casablanca

Android-Tp3: fragments et menusLilia Sfaxi

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

Html csssloumaallagui1

Telecharger Exercices corrigés PL/SQLwebreaker

Support developpement applications mobiles avec ionic v3 et v4ENSET, Université Hassan II Casablanca

Le langage sqlAbderrahim Aitali

Support de Cours JSF2 Première partie Intégration avec SpringENSET, Université Hassan II Casablanca

Chapitre8: Collections et Enumerations En JavaAziz Darouichi

Support NodeJS avec TypeScript Express MongoDBENSET, Université Hassan II Casablanca

Atelier Python 2eme partie par Achraf Kacimi El HassaniShellmates

Tp1 - WS avec JAXWSLilia Sfaxi

Un exemple élémentaire d'application MVC en PHPKristen Le Liboux

exposé en HTMLYaya Im

Tp2 - WS avec JAXRSLilia Sfaxi

Cours JavaScriptOlivier Le Goaër

TD2 - UML - CorrectionLilia Sfaxi

LES JOINTURESdanaobrest

Tendances (20)

Cours HTML/CSS

Appalications JEE avec Servlet/JSP

Support de cours technologie et application m.youssfi

Android-Tp3: fragments et menus

Support de cours Spring M.youssfi

Html css

Telecharger Exercices corrigés PL/SQL

Support developpement applications mobiles avec ionic v3 et v4

Le langage sql

Support de Cours JSF2 Première partie Intégration avec Spring

Chapitre8: Collections et Enumerations En Java

Support NodeJS avec TypeScript Express MongoDB

Atelier Python 2eme partie par Achraf Kacimi El Hassani

Tp1 - WS avec JAXWS

Un exemple élémentaire d'application MVC en PHP

exposé en HTML

Tp2 - WS avec JAXRS

Cours JavaScript

TD2 - UML - Correction

LES JOINTURES

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