Formation #DEV180

Formation HTML CSS JavaScript

Durée : 5 jours

Code : DEV180

Si vous avez un besoin URGENT et que vous souhaitez une date de formation plus proche que les sessions programmées (minimum 15 à 20 jours ouvrés à date de votre demande)

Objectifs

  • Créer une page HTML avec des éléments simples (texte, images, listes, liens)
  • Mettre en forme le contenu de la page en CSS
  • Définir des règles de positionnement du contenu
  • Créer et mettre en forme des formulaires de saisie
  • Créer et mettre en forme un tableau de données
  • Intégrer du contenu multimédia
Programme
1/ Introduction
  • Vue d’ensemble de la création de contenu pour le Web
  • Les DTD et la syntaxe XML (structuration, commentaires)
  • La structure d'un document HTML
  • La sémantique HTML : titres, paragraphes, liens, tableaux, formulaires...
  • Le modèle de document (DOM). Le protocole HTTP
  • Optimisation du chemin critique de rendu (Critical Render Path)
  • Topographie des concepts et apports du HTML5
  • Outils de développement HTML5
  • Test de compatibilité, méthode de détection HTML
  • Langages HTML, CSS & JavaScript
  • Organisation d’un site web
  • Outils de création de contenu pour le Web
2/ Structure d'une page
  • Les éléments traditionnels structurant un document HTML (doctype, html, head, body, meta...)
  • Les éléments de structure <nav>, <section>, <article>, <aside>, <header> et <footer>
  • Simplification avec HTML 5
  • Les éléments et leur placement
  • Vue d’ensemble des balises HTML
  • Les catégories de contenus : Metadata, Flow, Sectioning, Heading, Phrasing, Embedded et Interactive content
  • Intérêt des balises structurantes pour le référencement
  • Imbrication et type de contenu
3/ Balises structurantes
  • Blocs div et span
  • Listes
  • Tableaux
  • iFrames
4/ Web Forms 2
  • Champs de saisie
  • Listes déroulantes
  • Boutons radio
  • Champs date
  • Placeholder
  • Slider
  • Validation automatique
5/ Intégration du contenu multimédia
  • Ajouter des images
  • Intégrer des documents audio et vidéo
  • Configurer le composant de contrôle de la lecture
6/ Styles CSS
  • Syntaxe des sélécteurs CSS
  • Pseudo sélecteurs
  • Principales propriétés CSS
  • Règles CSS
  • Frameworks CSS
  • Exemples de travaux pratiques (à titre indicatif)
  • Analyse du site Zen Garden
  • Mise en forme avec CSS
7/ Mise en forme d'un tableau
  • Elément Table
  • Eléments ligne et cellules
  • Groupes de lignes et de colonnes
  • Fusion des cellules
  • Mise en forme d’un tableau
8/ Création de formulaire HTML5
  • Structurer le formulaire avec les éléments Form, FieldSet et Label
  • Ajouter des éléments Input
  • Créer des listes de valeurs pour les éléments Input
  • Afficher des informations avec les éléments Output, Progress et Meter
  • Mettre en forme et valider un formulaire
  • Ajouter des boutons de contrôle
  • Mise en forme d'un formulaire avec Bootstrap
9/ Structure des éléments
  • Le modèle de boîte
  • Eléments block et inline
  • La propriété display
  • Padding, marges et bordures
10/ Positionnement
  • Positionnement dans le flux
  • Positionnement absolu et relatif
  • Positionnement fixé
  • Positionnement flottant
11/ CSS 3
  • Nouveaux sélecteurs
  • Fonts, couleurs et bordures
  • Positionnement en colonnes
  • Media Queries
Approche Pédagogique

Approche Pédagogique

  • Pédagogie très opérationnelle fondée sur l'alternance entre théorie et pratique
  • Cas pratiques
  • Remise d’outils
  • Echanges d’expériences
Public Cible

Personnes Visées

  • Intégrateur Web
  • Web Designer
  • Rédacteur Web
  • Concepteur
  • Développeur