SlideShare uma empresa Scribd logo
1 de 13
HTML – CSS
création CV-
W3C Norme le web (Organisme)
Le But du html bien codé est améliorer le RN
RN -> <head> : Title, meta, type de html.
<body> : img(alt, title) éviter les erreurs de syntaxe et codage
Globale: Moins de code, mieux codé = Optimisation technique
A Savoir
Avec fermeture
<html> </html>
<head></head>
<body></body>
<div> </div>
Auto fermantes
<img />
<br />
<meta />
<link />
Types des Balises
<div attribut="valeur"
>
</div>
• Attribut au niveau de la balise
OUVRANTE
Balise ouvrante/fermante
les attributs
LES SELECTEURS CSS
ID : Un seul élément de la PAGE.
CLASS : Plusieurs éléments de la page.
.bloc symbole dans la css pour signifier les CLASS
#conteneur_gauche # symbole pour signifier les ID
Doctype
<html>
<head>
<title></title>
<meta />
<link />
<script></script>
</head>
<body>
</body>
<script>Analytics
</script>
</html>
Structure html
Particularités de la CSS
• Penser à tous les navigateurs.
• Adapter la CSS aux navigateurs
Centrer la page -> margin:0 auto;
FF; Chrome; Safari.
Internet Explorer. (9)
Particularités
MEDIA QUERY
/* Smartphones (portrait and landscape */
@media only screen and ( min-width : 320px) and (max-width :
480px) {
}
LES ELEMENTS « FLOAT »
20%
60%
Float:left
(au niveu de la css)
Photo
Description
Texte du CV
Expériences
Formation
Autres
Contact
Loisirs
Photo
Descriptio
n
Texte du CV
Expériences
Formation
Autres
Contact
Loisirs
Photo
Description
Texte du CV
Expériences
Formation
Autres
Wrapperconteneur_gauche conteneur_centre conteneur_droite
Description
Texte du CV
Expériences
Formation
Autres
Contact
Loisirs
padding
Margin

Mais conteúdo relacionado

Semelhante a HTML / CSS Media query et resposivité.

Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxtanokouakouludovic
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3JDerrien
 
Industrialisation Front-end - introduction
Industrialisation Front-end - introductionIndustrialisation Front-end - introduction
Industrialisation Front-end - introductionhalleck45
 
HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?Eroan Boyer
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09Claude Coulombe
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web SémantiqueYounesOuladSayad1
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersFrédéric Simonet
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf4gnzggpfdw
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfYassineZARIOUH
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfYassineZARIOUH
 
cours Cascading style sheet developpement web
cours Cascading style sheet developpement webcours Cascading style sheet developpement web
cours Cascading style sheet developpement webYounesOuladSayad1
 
Css présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamiqueCss présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamiqueDanielMohamed4
 

Semelhante a HTML / CSS Media query et resposivité. (20)

les balises HTML5.pdf
les balises HTML5.pdfles balises HTML5.pdf
les balises HTML5.pdf
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
Initiation html css
Initiation html cssInitiation html css
Initiation html css
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Industrialisation Front-end - introduction
Industrialisation Front-end - introductionIndustrialisation Front-end - introduction
Industrialisation Front-end - introduction
 
HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
 
Formation web
Formation webFormation web
Formation web
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
 
cours Cascading style sheet developpement web
cours Cascading style sheet developpement webcours Cascading style sheet developpement web
cours Cascading style sheet developpement web
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
Css présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamiqueCss présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamique
 
Html
HtmlHtml
Html
 

Último

Formation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadershipFormation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadershipM2i Formation
 
presentation l'interactionnisme symbolique finale.pptx
presentation l'interactionnisme symbolique  finale.pptxpresentation l'interactionnisme symbolique  finale.pptx
presentation l'interactionnisme symbolique finale.pptxMalikaIdseaid1
 
A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.Franck Apolis
 
MaintenanceLa Maintenance Corrective.ppt
MaintenanceLa Maintenance Corrective.pptMaintenanceLa Maintenance Corrective.ppt
MaintenanceLa Maintenance Corrective.pptssusercbaa22
 
Approche-des-risques-par-l’analyse-des-accidents-1.pptx
Approche-des-risques-par-l’analyse-des-accidents-1.pptxApproche-des-risques-par-l’analyse-des-accidents-1.pptx
Approche-des-risques-par-l’analyse-des-accidents-1.pptxssusercbaa22
 
Bolero. pptx . Film de A nnne Fontaine
Bolero. pptx . Film   de  A nnne FontaineBolero. pptx . Film   de  A nnne Fontaine
Bolero. pptx . Film de A nnne FontaineTxaruka
 
Fondation Louis Vuitton. pptx
Fondation      Louis      Vuitton.   pptxFondation      Louis      Vuitton.   pptx
Fondation Louis Vuitton. pptxTxaruka
 
Guide Final de rédaction de mémoire de fin d'étude
Guide Final de rédaction de mémoire de fin d'étudeGuide Final de rédaction de mémoire de fin d'étude
Guide Final de rédaction de mémoire de fin d'étudeBenamraneMarwa
 
systeme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expertsysteme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expertChristianMbip
 
Cours-irrigation_et_drainage_cours1.pptx
Cours-irrigation_et_drainage_cours1.pptxCours-irrigation_et_drainage_cours1.pptx
Cours-irrigation_et_drainage_cours1.pptxlamourfrantz
 
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptxSAID MASHATE
 
Présentation de cartes d'extension zhr..pptx
Présentation de cartes d'extension zhr..pptxPrésentation de cartes d'extension zhr..pptx
Présentation de cartes d'extension zhr..pptxpopzair
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...Faga1939
 

Último (15)

Formation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadershipFormation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadership
 
presentation l'interactionnisme symbolique finale.pptx
presentation l'interactionnisme symbolique  finale.pptxpresentation l'interactionnisme symbolique  finale.pptx
presentation l'interactionnisme symbolique finale.pptx
 
Evaluación Alumnos de Ecole Victor Hugo
Evaluación Alumnos de Ecole  Victor HugoEvaluación Alumnos de Ecole  Victor Hugo
Evaluación Alumnos de Ecole Victor Hugo
 
Pâques de Sainte Marie-Euphrasie Pelletier
Pâques de Sainte Marie-Euphrasie PelletierPâques de Sainte Marie-Euphrasie Pelletier
Pâques de Sainte Marie-Euphrasie Pelletier
 
A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.
 
MaintenanceLa Maintenance Corrective.ppt
MaintenanceLa Maintenance Corrective.pptMaintenanceLa Maintenance Corrective.ppt
MaintenanceLa Maintenance Corrective.ppt
 
Approche-des-risques-par-l’analyse-des-accidents-1.pptx
Approche-des-risques-par-l’analyse-des-accidents-1.pptxApproche-des-risques-par-l’analyse-des-accidents-1.pptx
Approche-des-risques-par-l’analyse-des-accidents-1.pptx
 
Bolero. pptx . Film de A nnne Fontaine
Bolero. pptx . Film   de  A nnne FontaineBolero. pptx . Film   de  A nnne Fontaine
Bolero. pptx . Film de A nnne Fontaine
 
Fondation Louis Vuitton. pptx
Fondation      Louis      Vuitton.   pptxFondation      Louis      Vuitton.   pptx
Fondation Louis Vuitton. pptx
 
Guide Final de rédaction de mémoire de fin d'étude
Guide Final de rédaction de mémoire de fin d'étudeGuide Final de rédaction de mémoire de fin d'étude
Guide Final de rédaction de mémoire de fin d'étude
 
systeme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expertsysteme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expert
 
Cours-irrigation_et_drainage_cours1.pptx
Cours-irrigation_et_drainage_cours1.pptxCours-irrigation_et_drainage_cours1.pptx
Cours-irrigation_et_drainage_cours1.pptx
 
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
 
Présentation de cartes d'extension zhr..pptx
Présentation de cartes d'extension zhr..pptxPrésentation de cartes d'extension zhr..pptx
Présentation de cartes d'extension zhr..pptx
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
 

HTML / CSS Media query et resposivité.