les bases de l'html / css
Post on 15-Apr-2017
109 Views
Preview:
TRANSCRIPT
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
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
top related