Démarrer avec HTML et les feuilles de style CSS (HTML5)

Vous êtes ici

Présentation: 

HTML et CSS sont les langages de base utilisées dans la construction des pages Web.

Cette formation apporte aux participants les connaissances nécessaires pour construire des pages Web , les mettre en forme, prendre en compte les différents environnements : mobile, tablette, ordinateur... Cette formation aborde les techniques de mise en oeuvre du HTML et CSS, les bonnes pratiques, l'utilisation de framework UI (User Interface) tel que Bootstrap...

Objectifs: 

Acquérir les bases HTML et CSS (HTML5 et CSS3)

  • Savoir créer des documents Web conformes aux recommandations du W3C
  • Comprendre les contraintes et la diversité des environnements : navigateurs, Desktop (machines de bureau, ordinateurs portables...), tablette, mobile...
  • Savoir créer une interface utilisateur responsive (compatible Desktop et mobile)
  • Découvrir le framework Bootstrap
Prérequis: 
Débutant, pratiquer Internet et la bureautique
Public: 
Webmasters, webdesigners, créateur de pages Web, personnes souhaitant créer un site Internet, personnes en charge d'un projet Internet, personnes souhaitant créer un modèle de page pour un gestionnaire de contenu...
Durée: 
3 jours (21 heures)
Programme: 

A. HTML

L'environnement

  • Les standards du Web, le W3C
  • L'environnement
    les principaux navigateurs, moteurs de rendu
    les différents supports de rendu : ordinateurs, tablette, téléphone mobile...
  • L'environnement de travail : les éditeurs, les outils de validation, le navigateur...
  • Les recommandations du W3C, la législation, l'accessibilité
  • Les priorités, niveaux de conformité

Introduction au langage HTML

  • Les balises, les attributs, les références de caractère
  • L'imbrication des éléments
  • La structure d'un document
  • La déclaration DOCTYPE, l'en-tête, le corps du document, les commentaires
  • Les différentes versions HTML...
    La prise en charge par les principaux navigateurs
  • Valider un document

Créer un document HTML

  • Définir le type du document (DOCTYPE)
  • Définir la langue et l'encodage du document
  • Définir le titre du document, les éléments méta comme "description"

Structurer un document et insérer les différents éléments

  • Titres, paragraphes, listes non ordonnées, ordonnées, de définitions
    Valider la structure du document : le plan de la page
  • Liens : lien vers une page Web, un document, une adresse électronique
  • Images
  • Éléments Multimédia : audio, vidéo, source
    Les différents encodages, proposer des sources différentes pour les navigateurs, solution alternatives...
  • Tableaux de données
  • Formulaires : les différents champs
  • Structurer un document

Mettre en forme / Séparer le fond et la forme

  • Principe de la séparation du fond et de la forme

B. Styles CSS

Introduction aux styles CSS

  • Principes et définitions 
    La prise en charge par les principaux navigateurs Desktop
  • La syntaxe CSS
  • Définir les styles : dans un attribut style,  dans le document, dans un fichier externe
  • Définir les sélecteurs, les médias, les unités et couleurs

Les principaux sélecteurs

  • Les sélecteurs de base
  • Quelques sélecteurs avancés

Définir les styles des bordures

  • Les différents types de boîtes CSS
  • Définir les bordures, les espacements internes et externes ...

Définir les styles de fond

  • Définir les couleurs
  • Définir une image de fond, répétition, positionnement...

Définir les styles de la  typographie

  • Définir les caractéristiques d'un texte : la taille, la police, la couleur, alignement ...
  • Choisir et définir les paramètres pour tout un document ou tout un site
  • Appliquer un style à tout un paragraphe ou à une partie du paragraphe

Définir les styles d'une liste

  • Définir les puces...

Définir les styles des liens

Définir les styles d'un tableau

  • Définir le placement de la boîte de légende
  • Définir le modèle de bordure...

Définir les styles de positionnement

  • Définir les dimensions, visibilité...
  • Définir le positionnement, le flottant...

Utiliser une feuille de styles pour chaque type d'équipement

  • Principe des mediaqueries

C. HTML et CSS en pratique

Introduction

  • Portabilité HTML5 : librairies et polyfills
  • Techniques CSS : reset CSS, systèmes de grille, sprites...
  • Présentation du Design Responsive, Mobile First, Desktop First...
    Définir une structure adaptable aux différents types de supports ( Mobile, Tablette, Desktop....)
  • Présentation de frameworks d'interface utilisateur comme Bootstrap, Pure CSS...

Principe d'un design responsive

  • Présentation
  • Insérer une image dans une image adaptable...   
  • Créer un layout responsive

Principe du framework Bootstrap

  • Principe de Bootstrap
  • Présentation des différents éléments
  • Créer un layout avec une grille   

D. Créer un gabarit de page

Créer un gabarit de page pour ordinateur de bureau étape par étape

  • Définir la mise en page et les scénarios de page
  • Appeler des bibliothèques pour réinitialiser les styles et prendre en compte certains navigateurs anciens
  • Définir et positionner des zones, centrer une zone
  • Habiller les contenus des différentes zones
  • Valider le rendu avec différents navigateurs

E. Ateliers

Les ateliers illustrent par des exemples concrets les sujets abordés, 
apportant ainsi aux participants une première expérience HTML/CSS. 

Contact

Financement

Financement possible au titre de la formation continue. Consultez votre entreprise, votre OPCA (Organisme Paritaire Collecteur Agréé).

Intermittents du spectacle

Consultez l'AFDAS pour connaître les possibilités de financement.

En recherche d'emploi

Consultez Pôle Emploi pour connaître les possibilités de financement.

Formation en intra

Nous assurons nos formations en intra dans vos locaux. Pour cela nous nous déplaçons dans toute la France:

Bretagne, Normandie, Pays de Loire...

Rennes, St Brieuc, Quimper, Vannes, Brest, Lorient, Nantes, Angers, Caen, Laval, Tours, Poitiers, Orléans...

Formation sur mesure

Formation sur mesure en groupe ou en individuel, que vous soyez développeur, webdesigner ou débutant "total", le programme de chaque formation peut être adapté pour répondre parfaitement à vos attentes et votre expérience. Déplacement sur toute la France.