Au calendrier
Sélectionnez
En français
Sélectionnez un lieu
  • Durée: 2 jours
  • Prix régulier: CA$965.00
  • Prix préférentiel: CA$885.00
  • Matériel pédagogique inclus

Programmation HTML (Base)

Module 1 : HTML5 et CSS3 - Une introduction

Aujourd’hui, les technologies web prennent une place prépondérante dans notre vie quotidienne. Le web, selon nous, remplacera sûrement le livre physique tel qu’on le connaît et la formation telle qu’on la vie aujourd’hui. Il devient donc important d’être en mesure de participer à la création de pages web et de comprendre comment elle sont construites. Cette formation introduit le participant à des technologies qui lui permettront de créer et de styliser ses propres pages web.

Préalables

Aucune connaissance particulière n’est nécessaire pour suivre cette formation.

Méthode pédagogique
Cette formation contient plusieurs exercices de création de pages web.
Cette formation utilise plusieurs stratégies d'apprentissage dont:
  • Présentations théoriques;
  • Démonstrations;
  • Des ateliers pratiques et des exercices;
  • Des défis;
  • Des échanges.
Matériel inclu :
Manuel théorique, exercices et ateliers pratiques

Objectifs

Après cette formation, le participant devrait être en mesure de pouvoir travailler sur les éléments suivants :
  • HTML
  • CSS
  • Tableaux
  • Formulaires
  • Images
  • Listes

Contenu

Introduction
  • Présenter comment fonctionne le web
  • Présenter les rôles du client (navigateur web) et du serveur (serveur web)
  • Présenter comment est servie une page web Statique
  • Présenter ce que sont les technologies HTML5 et CSS3
  • Présenter comment est servie une page web dynamique
  • Ajouter de la vie dans la partie cliente au moyen de JavaScript
Créer une première page web
  • Choisir un éditeur
  • Présenter la structure ce base d'une page web
    - Sélectionner un standard pour notre page web (doctype)
  • Construire une page modèle de base
  • Styliser notre modèle de base
  • Déployer ses pages web auprès d’un serveur web pour les visualiser dans un navigateur
  • Présenter la notion d’URL
  • Visualiser d’une page web au moyen d'un navigateur client
  • Visualiser le code de la page web présente dans le navigateur web
Construire un site web adaptatif - responsive
  • Définir un site web adaptatif
  • Identifier pourquoi on devrait toujours construire des sites web adaptatifs
Présenter la structure de base d'une page web
  • Présenter la structure de base d'une page web
  • Construire une première page web
Présenter la structure de base de la syntaxe HTML
  • Présenter la structure des balises HTML et comment bien les utiliser
  • Ajouter des attributs aux balises HTML
  • Ajouter des commentaires dans une page Web pour commenter ou pour soustraire temporairement une section de code HTML de notre page web
  • Utiliser l'indentation du code pour rendre le code HTML plus simple à lire et à maintenir
Présenter la structure de base de la syntaxe CSS
  • Présenter la structure de base et les composants des règles de styles CSS
  • Présenter les notions de sélecteur, propriété et valeur
Tester et valider nos pages web
  • Tester une page web au fur et à mesure
  • Valider le code HTML avec un validateur reconnu
  • Corriger les erreurs
Paramétrer la section entête d'une page web
  • Ajouter un titre à la page
  • Assigner une icône favicon à notre page
  • Ajouter des métadonnées
Ajouter du contenu à la section body d'une page web
  • Présenter les différents éléments HTML simples et les utiliser
    - Balises titres et textes
    - Balises pour créer des liens
Ajouter du Style à notre code HTML
  • Présenter les méthodes pour ajouter du style à une page web
  • Utiliser des rustines pour ajouter de la compatibilité entre navigateurs
  • Utiliser les classes et les ID pour structurer nos styles
Styliser nos pages webs avec CSS
  • Ajuster les grandeurs des éléments HTML
  • Présenter les différents unités de mesure disponibles
  • Ajuster la couleur des éléments HTML
  • Assigner des styles à des balises HTML
  • Assigner des styles à des combinaisons de balises HTML
  • Assigner des styles via des attributs, des classes et des ids
  • Présenter les pseudo-classes et pseudo-éléments
  • Comprendre la notion de cascade dans les styles
  • Utiliser la console de développeur de Chrome pour identifier d'où provient les styles appliqués
  • Choisir une police de caractères
  • Ajouter du texte et le styliser
Disposer les éléments HTML avec CSS
  • Présenter le modèle de boîte utilisé pour positionner les éléments HTML
  • Ajuster les différents paramètres de la boîte contenant un élément HTML
  • Ajuster l'espace entre les éléments HTML
  • Ajouter des bordures et un fond à un élément HTML
Structurer nos pages web au moyen de colonnes, et autres
  • Positionner les éléments au moyen de float
  • Utiliser les marges
  • Présenter différentes méthodes de positionnement
Travailler avec des listes et des liens
  • Présenter les différentes listes disponibles
  • Construire des liste à un ou plusieurs niveaux d'imbrication
  • Ajuster le format des listes
  • Créer des liens pour naviguer
  • Créer un menu ou barre de navigation
Construire des pages adaptatives à la surface de visualisation
  • Présenter comment passer d’un design à largeur fixe à celui d’un design fluide
  • Paramétrer le meta viewport de manière à ce que les appareils mobiles soit bien traités
  • Travailler avec la notion de media query de manière à permette à nos pages web de s’ajuster à la surface de présentation disponibles (@media only screen)
Travailler avec des images
  • Choisir un type d’image
  • Inclure une image dans une page web
  • Ajuster la dimension de l’image
  • Positionner l’image
  • Ajouter une légende à l’image
  • Créer un favicon
Travailler avec des tableaux
  • Introduire la terminologie et les balises pour construire un tableaux
  • Ajouter du style à nos tableaux
  • Ajouter une légende à un tableau
  • Fusionner des lignes et des cellules
  • Imbriquer des tableaux
Travailler avec des formulaires
  • Présenter la structure de base d’un formulaire
  • Présenter les champs d’un formulaire et leur codage
  • Disposer les constituants d’un formulaire
  • Valider les données
  • Transmettre les données du formulaire au serveur
Varia (audio et video)

Savoir s’entourer des meilleurs

Simon Bourassa
Formateur et conseiller en TI
Simon est passionné par le développement logiciel et le développement de produits, mais avant tout par l’ensemble des gens cachés derrière ces codes, qui travaillent main dans la main pour développer des solutions innovantes.
Pierre-Edouard Brondel
Pierre-Edouard Brondel
Formateur et conseiller en bureautique
Expert en pédagogie dans le domaine des technologies et de la bureautique cumulant plus de 25 ans d’expérience, Pierre-Édouard est d’abord et avant tout un passionné de capital humain.
Valère Drainville
Valère Drainville
Formateur et conseiller en efficacité professionnelle
Expert en collaboration et en efficacité professionnelle, Valère Drainville saura vous accompagner dans l’adoption et la gestion de vos outils de travail collaboratifs.
Frédéric Paradis
Formateur certifié et architecte en solutions infonuagiques
Formateur certifié Microsoft, Frédéric se décrit comme un magicien de l’infonuagique, cet espace mythique entre technologie et réalité.