HTML 5, CSS 3, Responsive - Création de pages Web
Web 3090 € HT
Objectifs
Toute personne souhaitant développer des applications Web en HTML5 et CSS3
À l'issue de la formation, le stagiaire sera 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
Methodes et outils pédagogiques
- Alternance exposés théoriques et exercices pratiques (80% pratique)
- Support de cours adapté au logiciel étudié et au niveau suivi
- Assistance téléphonique gratuite et illimitée
Modalité d'évaluation
- Evaluation formative au travers de nombreux exercices tout au long de la formation permettant de valider les compétences acquises.
Attestation de stage. - Emargement quotidien d’une feuille de présence
- Possibilité de passage de la certification Tosa en fin de formation
Accessibilité aux personnes handicapées
Pour tout besoin d’adaptation, retrouver le contact de notre référent handicap et les modalités d’accueil sur la page : Infos pratiques/Situation de Handicap
Public concerné
Tout public
Pré-requis
Connaissances internet standard - Une expérience pratique du web est souhaitable
3 jours
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
Travaux pratiques
- Pour chaque point du programme abordé :
Présentation et démonstration par le formateur, mise en pratique sur les fonctionnalités abordées par le stagiaire avec l’appui du formateur et du groupe, feedbacks du formateur tout au long de l’activité.
