Html5 / Css3

Html(5)/Css3

Objectif de la formation

Réaliser des sites Internet - Créer des pages formatées avec des Div et des CSS - Importer et formater les textes . Ajouter des éléments graphiques tels que la couleur, la transparence, les arrondis, les ombres, l’orientation, les translations, placer des médias sons, vidéos et animations utilisant les dernières spécificités Html5 et Css3 - Mettre en place un système de navigation - Créer des formulaires html5. Aborder des sujets tels que la géolocalisation, la sauvegarde local, le glisser déposer

Niveau requis

Connaissance de l’environnement informatique (pratique courante d’OS X ou de Windows). La pratique d’un logiciel de création d’images est souhaitée.

Public concerné

Webmasters, créateurs de sites internet.

Les étapes de la création d’un site

  • Le système de navigation
  • L’hébergement
  • Le référencement
  • Création de pages Web

Le Balisage de base

  • Paragraphe
  • Header
  • Image
  • Lien hypertexte

Le langage HTML

  • Les balises
  • Les Classes
  • Les ID
  • Les attributs

Mise en page avec des calques

  • Positionnement
  • Propriétés des calques: index Z
  • Calques imbriqués

Mise en page avec tableaux

  • Propriétés des tableaux
  • Propriétés des cellules
  • Tableaux imbriqués

balise DIV

  • Les CSS
  • Lieu de stockage des styles: interne, externe
  • Les DIV
  • Les classes
  • Les balises
  • Imbrication de styles
  • Liens entre pages et styles CSS

Le texte

  • Polices, styles, taille
  • Utilisation des CSS pour le balisage du texte
  • Les propriétés CSS liées au texte

Les fichiers utilisables dans un site Web

  • Les extensions de fichiers
  • Les formats d’images
  • Les formats des autres types de médias

Images

  • Les formats d’images spécifiques au Web: GIF, JPEG, PNG
  • La transparence dans les images
  • Les propriétés des images
  • Le rôle de la balise ALT, title
  • Optimisation et manipulations avec les outils de la palette Propriétés
  • Liens avec Photoshop et ou Fireworks

La navigation et les liens

  • Les liens entre les pages
  • Les liens internes aux pages
  • Les liens vers des sites externes
  • Les liens vers le courrier électronique

Les tableaux

Propriétés (tableau, rangée, cellule)

Insertion de médias

  • Insertion d’animations
  • Insertion de vidéos

Formulaires

  • Insertion et paramétrage des objets de formulaire: champ de texte, champ multi-ligne, cases à cocher, boutons radio, menu et liste déroulante, bouton .
  • Liaison d’un formulaire avec une adresse email

Comportements

  • Le rôle du langage JavaScript
  • Ajouts d’actions JavaScript

Transfert FTP

  • Réglages FTP
  • Mise à jour des pages

Introduction à HTML 5 et CSS3

  • Pourquoi une nouvelle version
  • Quel navigateurs  supportent ce standard
  • L’ouverture vers les mobiles Iphone, androïd, tablette

HTML 5

  • La vision sémantique du HTML 5
  • Balisage HTML 5
  • Le Doctype
  • Les nouveaux éléments : section, article, aside, nav, ...
  • Les pseudo-element
    • :hover, :before, :after , :first-letter
    • Les formulaires HTML 5
    • Audio et Video en HTML 5
    • Glisser déposer

CSS3

  • Mise en page et positionnement
  • Flottement, ...
  • Taille relative, taille absolu

Design et interaction

  • Coins arrondis, ombres portés, couleurs et transparence
  • Les translations
  • L’animation
  • L’interactivité
  • Intégrer ses propres polices
  • Mise en page multi-colonnes
  • Media Queries CSS3 pour créer des sites Web plus réactifs
  • Responsive design - Feuille de style CSS multi-écran pour ordinateur, mobile et tablette