Formation d'initiation aux langages web: HTML et CSS

Séance 1 et 2 :

Création d'un premier fichier web et interprétation du navigateur.

Balises html de base (Cf. liste + bas)

Tp : Jeu de caractères

Meta charset

Séance 1:

Logiciel : browser + bloc-notes

Séance 2:

Logiciel : notepad ++ pour visualisation code .

Notions théoriques :

Différences entre internet et web. Serveur local et serveur web. Site web en local et en prod.

Séance 3:

Logiciel: netbeans

How to ... Create project, tips : auto indentation, word wrap, running browser.

Tp : Minisite

1. Règles de styles : Css attribut <style=""> inline.
2. Structure de page en HTML5 semantic.

Minisite 3 pages comparaison css:

• inline
• internal style sheet
• external style sheet.

Notions théoriques :

URL relative et URL absolue ; Chemin et arborescence

Séance 5

Tp : Règles de styles

1. Menu Horizontal : mise en application des notions block et inline
2. How to import other dev JS

Css horz nav

Collaborative dev.

Github demo

Notions théoriques :

Cascading style sheet demo.

Les outils du développeur : Dev tools firefox

Tp : ID CLASS

Exercices pratiques : attribut de style ID et CLASS.

Séance 6

Media querries

TP Timeline: Suivre un tuto en ligne

W3schools: Integration step by step HTML et CSS ext. Custom css charte graphique site by F12 inspect élément analyse dev HTML et CSS.

Plan du cours :

• Comment fonctionnent les sites WEB ?
• Les langages WEB interprétés par les navigateurs
  • HTML
    • Balises
      • doctype
      • html
      • head
        • title
        • charset
        • meta
          • desc
          • key
          • author
          • viewport
      • body
        • h1 - h6
        • p
        • ul/ol li
        • Block - inline (notions)
        • a
        • img
        • Bonus : table
  • HTML5
    • Structure
      • header
        • nav
      • footer
      • section
      • article
    • Bonus : Video
    • Attribut
      • href
      • src
        • URL rel absolue (rappel)
        • alt
          • width
          • height
      • title
      • lang
      • class
      • id
  • CSS
    • Mise en forme du texte: police, taille, couleur
    • %
    • position, block, inline
  • CSS3
    • border-radius
    • media queries
    • ...
    • transition, animation
    • shadow
    • gradient
    • @font-face