Formation Applications Web : HTML, feuilles de style CSS - BR2CI - Formations en Bretagne et sur toute la France

Afficher le détail

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 entités
• 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" et "keywords"

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

• Structurer un document, respecter la sémantique des éléments
  header, footer, section, article, aside, nav ...
  Utiliser des bibliothèques pour la prise en charge de navigateurs anciens
  
• 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
• Eléments Mulimédia : audio, video, source
  Les différents encodages, proposer des sources différentes pour les navigateurs, solution alternatives...
• Insérer un élément Flash avec un script
  

• Tableaux de données
• Formulaires : les différents champs

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 stylesCSS

• Principes et définitions
• Les différentes versions CSS : CSS2, CSS2.1, CSS3...
  La prise en charge par les principaux navigateurs Desktop
  Les propriétés pour Mozilla, Safari et Google Chrome (moz et webkit)
• 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

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. Créer un gabarit de page

Les stratégies

• Amélioration, progressive, dégradation gracieuse...

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

C. Ateliers

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

La formation peut se dérouler avec l'éditeur dont vous disposez, cela peut être DreamWeaver, Eclipse , Aptana, BlueGriffon...