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

Formation HTML5, CSS3, Responsive - Création de pages web

Créer des applications web dynamiques et responsives, avec le langage HTML5 et les feuilles de style CSS3

Informations générales

WEB953
3 jours (21h)
1 965 €HT
90 €HT TOSA Web Développement

Objectifs

Après ce cours, vous serez capable de :

  • Concevoir et développer des applications Web en HTML5 et CSS3
  • Mettre en place et valider la structure HTML 5 des pages Web
  • Habiller des pages Web en CSS3 afin de les rendre plus attractives
  • Savoir produire des pages compatibles avec les différents navigateurs internet
  • Rendre responsive design les pages Web d'un site
  • Créer des images et des animations vectorielles

Public

Ce cours s'adresse avant tout aux personnes suivantes :

  • Développeurs
  • Concepteurs web
  • Chefs de projets…

Prérequis

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

  • Connaissances internet standard
  • Une expérience pratique du web est souhaitable

Programme de la formation

Présentation

  • Contexte historique
  • HTML : le langage du Web
  • Fonctionnement d'un site internet
  • Histoire et normalisation du HTML
  • La nouvelle vision HTML5

Structure d'un document HTML

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

L'en-tête d'un document HTML

  • Doctype ou DTD
  • Méta-informations

Le corps d'un document HTML

  • Texte sans balise
  • Types de balise et référencement
  • Balises de type block et inline

Structurer le texte

  • Titres et paragraphes de texte
  • Le contrôle de passage à la ligne
  • Les caractères spéciaux
  • Les commentaires
  • Les autres balises de texte

Les feuilles de style

  • Dynamiser un site avec CSS : styles inline, balise style, balise link
  • Les commentaires
  • Les propriétés
  • Styles du texte : couleur, police, taille, alignement, ...
  • Intérêt des balises div et span
  • Styles des boites : bordures, fond, taille, marge, ...
  • Les sélecteurs : balise, classe, id, pseudo-classes ...
  • Gérer les positionnements

Les listes

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

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
  • Styles dans les tableaux

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
  • Pseudo-classes des liens
  • Styles dans les liens

Insertion d'images

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

Les formulaires

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

Le balisage HTML5

  • Référencement et web sémantique
  • Les nouveaux éléments (main, header, footer...)

Audio et vidéo

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

CSS3 – les styles avancés

  • Se passer d'images, éviter les astuces
  • Coins arrondis, ombres portées, transparence, animations
  • Niveau de présentation
  • Mise en page par patron
  • Mise en page multi-colonnes
  • Mise en page par boites horizontales ou verticales (flexbox)
  • Positionnement par grille (grid)
  • Autres nouveautés

Responsive Web Design

  • Découverte du viewport
  • Présentation en mode grille
  • Media queries
  • Introduction à Boostrap
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 de la certification suivante.
N'hésitez pas à nous contacter pour toute information complémentaire.

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 08/11/2023