Organisme de Formation aux technologies et métiers de L'informatique
html5

Formation Les fondamentaux du développement d'interfaces graphiques avec HTML5, CSS3 et JavaScript

Tirer parti de la dernière version de la norme HTML

Informations générales

WEB999
5 jours (35h)
2 965 €HT
plusieurs certifications possibles

Objectifs

Après ce cours, vous serez capable de :

  • Disposer des compétences nécessaires au développement d'un site internet full HTML5 / CSS3
  • produire des pages compatibles avec les différents navigateurs internet
  • créer des interactions dynamiques avec l'utilisateur sans développement serveur
  • tirer parti des dernières nouveautés HTLM5 comme le lecteur vidéo compatible mobiles

Public

Ce cours s'adresse avant tout aux personnes suivantes :

  • Développeurs .Net ou Java souhaitant savoir exploiter les possibilités offertes par HTML5 et CSS
  • Chargés de développement d'applications informatiques

Prérequis

Pour suivre ce cours, vous devez déjà posséder les connaissances suivantes :

  • Connaissance internet standard, notions d'algorithmie

Programme de la formation

Le HTML5 et le CSS3 sont les dernières versions des principaux langages Web validés par le World Wide Web Consortium (W3C), l'organisme qui a pour mission de développer des protocoles et des standards sur les langages Web et leurs évolutions. Extrêmement complémentaires, le premier permettant d'afficher le contenu des pages web et le second visant à décrire la présentation de ces contenus, ils sont souvent associés dans le cadre des développements pour le web. Cette formation vous permettra d'utiliser les nouvelles possibilités offertes par le HTML5, telles que l'intégration vidéo et audio, grâce aux nouvelles balises et APIs puis de mettre vos pages en forme en tirant parti de la puissance de CSS3.

Présentation

  • HTML : le langage du Web
  • Contexte historique

Environnement et structure

  • Concept et usage des balises
  • Le bon usage des balises
  • Particularités et pièges du HTML
  • Le document HTML minimum

Mise en forme du document

  • Le texte simple
  • Les objets d'un document
  • L'en-tête d'un document HTML

Mise en forme du texte

  • Titres et paragraphes de texte
  • Le contrôle de passage à la ligne
  • Le formatage du texte, l'alignement
  • La taille, la couleur et la police
  • Les caractères spéciaux
  • Les commentaires
  • Les autres balises de texte

Les listes

  • Numérotées, à puces, imbriquées
  • Les listes de définition

Les tableaux

  • Cellules de tableau et fusion des cellules
  • Gestion de la taille du tableau
  • En-tête et légende
  • Les bordures
  • Les groupes de colonnes et de lignes

Les hypertextes

  • La balise de liens
  • Les différents types de liens : vers une autre page, dans une page, vers un site Web, de téléchargement...
  • Les Target
  • L'attribut titre
  • La couleur des liens
  • Liens et feuilles de style

Insertions d'images

  • L'insertion d'une image
  • L'espace autour d'une image
  • L'alignement d'une image
  • Couleur et image d'arrière-plan
  • L'insertion d'un lien sur une image
  • Les images réactives

Les formulaires

  • La déclaration de formulaire
  • Zone de texte à une ligne
  • Menu déroulant
  • Boutons : radio, checkbox, d'envoi, d'annulation, de commande
  • Les formulaires : cachés, de transfert de fichier, de mot de passe
  • L'organisation des éléments d'un formulaire

Les méta-informations

  • Doctype ou DTD

Les feuilles de style

  • Les propriétés : couleur, police, marge,...
  • Les classes
  • Dynamiser un site avec CSS
  • Gérer les positionnements

Introduction à JavaScript

  • JavaScript pour quoi faire ?
  • L'environnement du client Web
  • Le navigateur, les outils

JavaScript : le coeur du langage

  • La syntaxe
  • Les variables, les fonctions globales, les opérateurs, les structures de contrôle
  • Les fonctions : définition, arguments, fonctions littérales, fonctions sous forme de données
  • Objets personnalisés et objets globaux
  • Manipuler les tableaux, les dates, les chaînes de caractères

Les objets du navigateur

  • La hiérarchie des objets
  • Les principaux objets : window, document, location, screen, navigator, form...
  • Manipuler des fenêtres
  • Gérer des timers

Introduction à HTML5

  • Contexte : fonctionnement d'un site internet
  • Histoire et normalisation du HTML
  • La nouvelle vision HTML5
  • Roadmap HTML5

Comment utiliser le HTML5 aujourd'hui

  • Savoir quand choisir le HTML5
  • Utiliser le HTML5 avec des navigateurs qui ne le supportent pas

Le balisage HTML5

  • Structure d'une page
  • Doctype
  • Les nouveaux éléments et les éléments obsolètes
  • HTML5 et CSS3

Les formulaires

  • La balise form
  • Créer et utiliser des formulaires HTML5

Audio et vidéo

  • Les éléments audio et vidéo
  • Les conteneurs, les codecs
  • Compromis pour un site à forte audience

Vue d'ensemble des APIs

  • Les APIs HTML5
  • Audio et vidéo
  • Site web hors ligne
  • Drag & Drop

Dessiner en HTML

  • Canvas vs SVG
  • Contexte et accessibilité

La communication en HTML5

  • Les évènements
  • Envoi de messages entre documents
  • Envoi de messages par canaux
  • Le push et les WebSockets pour plus de performances

La géolocalisation

  • Vue d'ensemble
  • La vie privée de l'utilisateur

Stockage

  • Stockage local
  • Stockage en session
  • Bases de données SQL Web

CSS : standardiser des propriétés

  • Se passer d'images, éviter les astuces
  • Coins arrondis, ombres portées, transparence, animations
  • Autres nouveautés

CSS : mise en page et positionnement

  • Vue d'ensemble : clarifier le code, éviter la multiplication de div imbriquées
  • Niveau de présentation
  • Mise en page par patron
  • Mise en page multi-colonnes
  • Mise en page par boites horizontales ou verticales
  • Positionnement par grille
  • Autres nouveautés
  • CSS pour mobiles et tablettes
plus d'infos

Méthode pédagogique

Chaque participant travaille sur un poste informatique qui lui est dédié. Un support de cours lui est remis soit en début soit en fin de cours. La théorie est complétée par des cas pratiques ou exercices corrigés et discutés avec le formateur. Le formateur projette une présentation pour animer la formation et reste disponible pour répondre à toutes les questions.

Méthode d'évaluation

Tout au long de la formation, les exercices et mises en situation permettent de valider et contrôler les acquis du stagiaire. En fin de formation, le stagiaire complète un QCM d'auto-évaluation.

Certification

Cette formation prépare au passage des certifications suivantes.
N'hésitez pas à nous contacter pour toute information complémentaire.

IT - Développement de sites web

Le test ENI-HTML CSS et entre en jeu dans le cursus de certification Certification IT - Développement de sites web avec le langage de balises HTML et des feuilles de styles CSS.

TOSA Web Développement (90 €HT)

L'examen TOSA se passe en centre agréé ou en ligne. Votre score (sur 1000) vous permettra de communiquer sur votre niveau de connaissances du logiciel.

Ce test évalue votre niveau pour créer un site Internet avec des questions et des cas pratiques en HTML, Javascript, CSS et intégration.

  • Durée : 1h
  • 35 questions QCM et cas pratiques
  • Score sur 1000

Suivre cette formation à distance

  • Un ordinateur avec webcam, micro, haut-parleur et un navigateur (de préférence Chrome ou Firefox). Un casque n'est pas nécessaire suivant l'environnement.
  • Une connexion Internet de type ADSL ou supérieure. Attention, une connexion Internet ne permettant pas, par exemple, de recevoir la télévision par Internet, ne sera pas suffisante, cela engendrera des déconnexions intempestives du stagiaire et dérangera toute la classe.
  • Privilégier une connexion filaire plutôt que le Wifi.
  • Avoir accès au poste depuis lequel vous suivrez le cours à distance au moins 2 jours avant la formation pour effectuer les tests de connexion préalables.
  • Votre numéro de téléphone portable (pour l'envoi du mot de passe d'accès aux supports de cours et pour une messagerie instantanée autre que celle intégrée à la classe virtuelle).
  • Selon la formation, une configuration spécifique de votre machine peut être attendue, merci de nous contacter.
  • Pour les formations incluant le passage d'une certification la dernière journée, un voucher vous est fourni pour passer l'examen en ligne.
  • Pour les formations logiciel (Adobe, Microsoft Office...), il est nécessaire d'avoir le logiciel installé sur votre machine, nous ne fournissons pas de licence ou de version test.
  • Horaires identiques au présentiel.

Mis à jour le 01/02/2024