Contactez-nous

HTML, CSS et les bases du web

Formation HTML, CSS et les bases du web

Le web a été inventé à la fin des années 80 par Tim Berners-Lee alors chercheur au CERN. L’idée était d’appliquer le concept hypertext à un réseau distribué. Il crée alors le premier navigateur, le premier serveur web, les URL, le protocole HTTP et le langage HTML. Aujourd’hui le protocole HTTP et le HTML sont normés et on n’utilise le HTML que pour décrire la structure d’un document. CSS apparu à la fin des années 90 est le langage permettant la mise en forme d’une page web. Cette formation s’adresse au développeurs novices sur les technologies web, qui souhaiteraient en comprendre le fonctionnement et utiliser les deux principaux langages du navigateur : le HTML et le CSS.

Objectifs

  • Comprendre les fondamentaux du Web
  • Utiliser HTML pour décrire la structure d’une page
  • Pouvoir mettre en forme une page web en CSS
  • Connaitre les principaux outils du développement web

Programme

Jour 1

  • Les bases du web
    • Les navigateurs et les serveurs web
    • Les URL
    • Le Protocole HTTP
    • Les languages utilisés sur le web
    • Les outils de développement : IDE, serveurs de dev, validateurs…
  • HTML : Sémantique d’une page web
    • Les différentes versions : HTML 3.2, HTML 4.01, XHTML, HTML5, HTML Living Standard
    • Les balises et attributs pour décrire le contenu
    • Structure d’une page web : doctype, html, head, body
  • Les balises HTML de structure
    • Les balises du head : title, meta, link…
    • Les balises blocs : h1, p, div, header, main, footer…
    • Les listes : ul, ol, dl…
    • Les tableaux : table, tr, th, td…
    • Les balises inlines : span, b, i, u, strong, em, br…
  • Les balises interactives
    • Les liens vers d’autres pages : relatifs, absolus, ancres…
    • Intégrer du JavaScript et du CSS
    • Multimédia : img, audio, video, iframe…
    • Les formulaires : form, input, select

Jour 2

  • CSS : Mise en forme
    • Les différentes versions : CSS1, CSS2.1, modules CSS3, modules CSS4
    • Mise en page par défaut des navigateurs
    • Intégrer du CSS : externe, interne, inline
    • Compatibilité des navigateurs
    • Cascade de propriétés, héritage
    • Les Sélecteurs CSS, versions 1 à 4
    • Spécificité : priorité des sélecteurs
  • Les unités CSS
    • Les couleurs : noms, hexa, rgb, hsl, rgba, hsla
    • Pour l’écran : em, px, %
    • Les nouvelles unités : rem, vw, vh, vmin, vmax
    • Pour l’impression : em, cm, mm, in, pt, pc, %
  • Les propriétés texte
    • Polices, Largeur, hauteur, ligne, direction
    • Couleurs, italique, épaisseur, ombres
    • Soulignement, surlignement
    • Centrer horizontalement et verticalement
  • Le modèle de boîte
    • Hauteur, largeur, box-sizing, overflow
    • Marges et fusion
    • Padding, bordures, arrondis et fond
    • Centrer horizontalement et verticalement
    • Mettre en forme les listes et les tableaux

Jour 3

  • CSS Avancé
    • Transformations 2D et 3D
    • Transitions
    • Animations et keyframes
    • Variables et calc
  • Responsive Design
    • Viewport
    • Media Queries : width, height, device-width, device-pixel-ratio, orientation…
    • Concept de grille
    • Points de rupture
    • Images responsive
  • Layout Moderne
    • Flexbox : distribution, alignements, ordonnancement, flexibilité…
    • CSS Grid : template, zone nommées, répartition, gaps, flex

Jour 4

  • Outils de productivité CSS
    • Gestionnaires de dépendances : npm, yarn, pnpm…
    • Les Préprocesseurs : LESS, SASS, SCSS, Stylus
    • Les Postprocesseurs : PostCSS, PostCSS Preset Env, CSS Modules, cssnano, Browserslist, Autoprefixer…
    • Qualité du code : htmllint, stylelint, prettier...
    • Les méthodologies : Reset CSS, BEM, ITCSS…
  • Les frameworks CSS
    • Bootstrap
    • Semantic UI
    • Materialize
    • Bulma