1

Formation HTML5 / CSS3+ cours JavaScript

Introduction à la formation HTML5 / CSS3 + cours JavaScript

Modèle Client/Server: Les protocoles associés

Sites (statiques,  dynamiques)

Environnement de développement

Atelier pratique:Mise en évidence et installation des outils de développement

Apprendre HTML

Principes de fonctionnement

Structure d’un document XHTML

Doctype

Type des balises

Format des balises

Atelier pratique: Création d’un premier site web

Mettre du contenu texte, Insérer des liens hypertextes

Les entités HTML

Balise de type bloc

Balise de type en ligne

Retour chariot

Les liens

Les ancres

les liens mailto

Liens relatifs

Liens absolus

Utiliser les images et les médias

Formats d’images pour le web

La balise img

Redimensionnement

Les sons, vidéos

Utiliser des listes

Les listes à puces

Les listes numérotées

Les liste de définitions

Atelier pratique:Créer un menu de navigation

Structurer un page avec des tableaux

Spécifier un tableau : taille, bordure, centrage, couleur de fond, …

Créer un tableau html

En têtes de tableau

fusion des cellules d’un tableau

Atelier pratique:Structurer notre site web avec les tableaux

Créer des formulaires

Principes de l’interaction avec l’utilisateur

Les champs de saisie, les boutons de sélection

Cases à cocher

Les listes de sélection

Bouton d’envoi

Atelier pratique: création d’un formulaire de contact

Apprendre les feuilles de style CSS

Fonctionnement et avantages

Insérer et Définir un style

Principes des règles CSS

Associer un style à une balise HTML

Types de sélecteurs : balise, classe, ID, composé

Les couleurs et arrière plans

Organisation en boîtes : bordures et marges

Atelier pratique:mettre en forme notre site web

Mise en forme du texte

Famille de police

Aspect des lettres

Ajustement du texte

Atelier pratique: mettre en forme du texte

Structurer le contenu d’un document

Diviser un document

Les identifiants de division

Identifiant avec CSS

La balise span

Atelier pratique:Structurer notre site web avec les div

Mise en page CSS, positionnement css

Marges intérieures et extérieures

Largeur et hauteur des blocs

Les blocs flottent

Différentes méthodes de positionnement css

Habillage CSS

Gérer l’arrière-plan

Utiliser les images de fond

Mise en pratique

Affichage des blocs et de leur contenu

Voir d’autres sélecteurs avancées

Sélecteurs d’attributs

Imbriquer les sélecteurs

E-marketing

Présentation des enjeux du référencement

Connaître les actions de base.

Choix des mots-clés

Soumission dans les moteurs et annuaires

E-mailing, newsletter et affiliation;

Atelier pratique: référencer les pages de notre site web

Apprendre le langage JavaScript

Déclaration et portée des variables.

Types de données (Number, Boolean, Date, Math, String, Array).

Gestion des chaînes de caractères

Manipulation des dates

Manipulation des tableaux

Opérateurs logiques et arithmétiques.

Boucles (for, while…).

Boîtes de dialogue prédéfinies

Fonctions de base prédéfinies en JavaScript

Atelier pratique: Mise en oeuvre des différentes fonctionnalités Javascript à travers de multiples exemples pratiques.

Déboguer et tester JavaScript

Outils de débogage des navigateurs

Déboguer dans l’éditeur de texte

Gérer les Evénements

Les principaux événements JavaScript

ajouter un gestionnaire d’événement

associer un traitement à un événement

Atelier pratique:Changer dynamiquement les propriétés d’une image

Gestion de formulaires HTML

Manipulation de contenu de formulaire

Créer des contrôles de saisie en JavaScript

Fonctions de validation de formulaire.

Evénements liés aux éléments de formulaire : changement, initialisation, clic…

Atelier pratique: Contrôle des champs de formulaire avant soumission

Manipulation de la page (DOM2)

Arbre DOM

Méthodes de sélection d’éléments

Les Propriétés d’état

Les propriétés de relation

Modification du contenu HTML

Modification du style des éléments HTML

Atelier pratique:Mise en oeuvre des différentes fonctionnalités du DOM à travers de multiples exemples pratiques.

Introduction à AJAX / L’API Fetch

Principe de fonctionnement
Programmation asynchrone
L’objet XMLHttpRequest
Créer une requête fetch()
Gérer les erreurs
Syntaxe async et await

Atelier pratique: Lire le contenu d’un fichier texte