Les bases de l'HTML / CSS

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

HTML 3.21997

HTML 4.01997

HTML 4.11999

HTML52004

TIM BERNERS-LEE1991 : Naissance de l’HTML

L E S B A S E Sd u d é v e l o p p e m e n t w e 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

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

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 ORPHELINESLES BALISES

01

02

03

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

Contenu

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>

HEAD

BODY

Titre / Langage etc..

Text / Images / Liens

LA STRUCTURE

C S SC a s c a d i n g S t y l e S h e e t s

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

PAUSE15 Minutes

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

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

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

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

LET’S GO TO THE SAND BOXH T M L / C S S

DONE IS BETTER THAN PERFECT

QUESTIONSe t r é p o n s e 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

https://dribbble.com

https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal

http://www.shutterstock.com/

http://www.fevad.com/

http://frenchweb.fr/

http://www.definitions-marketing.com/definition/marketing/

http://www.youtube.com/

http://www.shutterstock.com