Formation HTML 5 et CSS 3

Initiation au développement Web

Standards actuels publiés par le W3C (World Wide Web Consortium) pour la conception et le développement de sites Internet, le HTML5 et le CSS3 apportent aussi de nouvelles spécificités :

  • le HTML5  (Hyper Text Markup Language) permet de développer une couche application  (API) et un algorithme permettant de traiter les documents web non conforme.
  • CSS3 (Cascading Style Sheet) devient « modulaire », facilitant par ce biais les mises à jours, comme son implémentation sur des navigateurs variés.
    Découvrez et exploitez toute la richesse de ces langages de programmation.

Programme de la formation

Généralités sur le Web, concepts et termes techniques

  • Fonctionnement du Web, réseaux, services
  • Clients et serveurs : rôles, technologies
  • Hébergement Web et hébergeurs
  • Domaines, ressources, adresses (URL)
  • Qu'est-ce qu'un site Web, qu'est-ce qu'un CMS ?
  • Le FTP : fonctionnement, utilité
  • Les différentes technologies

Les bases du langage HTML, le code source

  • Hypertexte, balisage et attributs de balise
  • Structure d'un document HTML : les éléments essentiels
  • Séparation du contenu et de la forme : le langage CSS
  • Edition du code source, éditeurs WYSIWIG des CMS
  • Affichage, rendu et inspection dans les différents navigateurs

Créer un document au format HTML 5

  • Sémantique du balisage HTML5 et structuration des contenus
  • En-tête simple : langue du document, titre, description
  • Différence entre les éléments en ligne et en bloc
  • Qu'est-ce que le Flux du document ?
  • Eléments HTML simples : paragraphes, headings
  • Eléments HTML composés : listes et tableaux
  • Conteneurs : div, span, section
  • Mise en forme avec strong, em et CSS
  • Formulaires (initiation)

Mise en forme avec CSS

  • Les différents médias d'affichage
  • Couleurs, polices, unités, bordures
  • Styles et attributs de style
  • Assignation d'un style au document
  • Assignation d'un style a un élément
  • Sélecteurs, attributs id et classes, raccourcis
  • Cascade des styles
  • Création d'une feuille de style, réutilisation sur plusieurs pages

Insérer des images

  • Adapter ses images pour le Web
  • L'élément <img> et ses attributs
  • Positionnement des images
  • Animations d'images et effets (initiation)

Ancres et liens

  • URL absolue, relative, paramètres d'URL
  • Nommage des fichiers
  • Protocoles : HTTP, HTTPS, FTP...
  • L'élément <a> et ses attributs
  • Lien vers une page interne du site, lien vers une page externe
  • Définir des ancres et établir des liens vers ces ancres dans une même page
  • Le type de lien mailto: intérêt et fonctionnalités
  • Mise en forme des liens et effets de style avec CSS

Positionnement CSS

  • Margin, padding, border, height/width
  • Le positionnement dans le flux : relatif, absolu, fixe et z-index
  • Le positionnement flottant
  • Cas pratiques pour l'alignement

CSS pour Smartphones et tablettes (initiation)

  • Problématiques des appareils mobiless
  • Media Queries
  • Images, menus
  • Le Responsive Design
  • Les "Framework" CSS

Tester son site

  • Validateur W3C
  • Désactiver le CSS
  • Débogage avec l'inspecteur Web
  • Liens cassés, chemins et droits
  • Codes d'erreur HTTP (400, 404)
  • Tester la compatiblité de son site sur plusieurs navigateurs et appareils
  • Tester et comprendre la performance de son site

Objectifs de la formation

  • Savoir créer et modifier des pages et contenus en HTML
  • S'initier à la mise en forme d'un site web avec les feuilles de style CSS

Public visé

  • Vous travaillez sur un site Web ou vous avez un projet de mise en place de site Web
  • Vous souhaitez acquérir rapidement de l'autonomie dans la gestion du site Web de votre entreprise

Prérequis

  • Vous disposez de connaissances en informatique et bureautique, traitement de texte, gestion de fichiers et images
  • Vous savez utiliser Internet pour un usage personnel ou professionnel

 Modalités de suivi

  • Il est demandé aux stagiaires à chaque début de demi-journée la signature de la feuille de présence.
  • Durant la formation, le formateur veille à la bonne compréhension et acquisition de l'information au travers de questions posées aux stagiaires.

Moyens pédagogiques

  • Méthodes expositives, démonstratives et actives
  • Travaux pratiques
  • Matériel informatique récent mis a disposition
  • Diaporamas et cartes heuristiques (mindmap)
  • Supports remis aux stagiaires dès le début de la formation
  • Plateforme d'apprentissage en ligne Moodle

        Pour compléter cette formation

         Durée : 4 x 7 heures

        Prochaines dates

         Alençon

        • Nous consulter

         Caen

        • Nous consulter

         St-Lô

        • Nous consulter