Logo HTML, CSS et les bases du web

Formation HTML, CSS et les bases du web

HTML (HyperText Markup Language) et CSS (Cascading Style Sheets) sont deux langages de programmation utilisés pour créer et styliser des pages web. HTML est un langage de balisage qui permet de structurer le contenu d'une page web en utilisant des balises. Les balises HTML sont des mots-clés entourés de crochets qui indiquent à un navigateur web comment afficher le contenu de la page. Par exemple, la balise <h1> indique au navigateur que le contenu qui suit doit être affiché en tant que titre de niveau 1. HTML permet également de créer des liens entre les pages web, d'insérer des images et d'intégrer des vidéos et d'autres types de contenu multimédia. CSS est un langage de feuille de style qui permet de définir l'apparence d'une page web. Les règles CSS décrivent comment les éléments HTML doivent être affichés sur la page, tels que la couleur, la police, la taille, l'alignement et d'autres propriétés de mise en forme. Les développeurs peuvent utiliser CSS pour créer un design cohérent et attrayant pour une page web. HTML et CSS sont utilisés conjointement pour créer des pages web interactives et attrayantes. Ils sont indispensables pour le développement web et sont souvent utilisés avec d'autres technologies telles que JavaScript et PHP pour créer des sites web dynamiques et interactifs.

Objectifs pédagogiques / Compétences visées

  • 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

Pré-requis

  • Savoir utiliser un ordinateur, en particulier un navigateur web

Public

  • Développeurs
  • Chefs de projets

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

Moyens pédagogiques et techniques

  • Formateur validé par nos équipes techniques et pédagogiques
  • Salle de formation informatisée
  • Support de cours numérique

Suivi et appréciation des résultats

  • Questions orales ou écrites (QCM)
  • Exercices pratiques
  • Formulaires d'évaluation
Dernière modification le 26/12/2022