HTML / CSS Media query et resposivité.

584 vues

Publié le

Suite de notre cours sur la création d'une page HTML. Ce cours va traiter des sujets comme la resposivité, l'adaptabilité et des hacks au niveau de la CSS. Nous allons parler du HTML 5 et toujours depuis un point de vue d'adaptabilité et d'optimisation SEO

Publié dans : Formation
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

HTML / CSS Media query et resposivité.

  1. 1. HTML – CSS création CV-
  2. 2. 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
  3. 3. Avec fermeture <html> </html> <head></head> <body></body> <div> </div> Auto fermantes <img /> <br /> <meta /> <link /> Types des Balises
  4. 4. <div attribut="valeur" > </div> • Attribut au niveau de la balise OUVRANTE Balise ouvrante/fermante les attributs
  5. 5. 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
  6. 6. Doctype <html> <head> <title></title> <meta /> <link /> <script></script> </head> <body> </body> <script>Analytics </script> </html> Structure html
  7. 7. 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
  8. 8. MEDIA QUERY /* Smartphones (portrait and landscape */ @media only screen and ( min-width : 320px) and (max-width : 480px) { }
  9. 9. LES ELEMENTS « FLOAT » 20% 60% Float:left (au niveu de la css)
  10. 10. Photo Description Texte du CV Expériences Formation Autres Contact Loisirs
  11. 11. Photo Descriptio n Texte du CV Expériences Formation Autres Contact Loisirs Photo Description Texte du CV Expériences Formation Autres
  12. 12. Wrapperconteneur_gauche conteneur_centre conteneur_droite Description Texte du CV Expériences Formation Autres Contact Loisirs
  13. 13. padding Margin

×