Coder des pages web avec HTML5 et CSS

Présentation


Objectifs

– Connaître le principe du codage des pages webs HTML
– Réaliser des pages webs sans outils logiciel WYSIWYG
– Connaître la mise en page CSS pour personnaliser des sites existants (blog)
– Connaître le langage de mise en page pour les applications ou sites internet

Pré-requis

Pratique régulière d'internet (navigation, email,...), bonnes connaissances informatiques

Public cible

Professionnel de la communication et de l'informatique

Modalité d'évaluation

questionnaire de satisfaction

Durée

20 heures soit 3 jours

Les plus de la formation

Formation en petit groupe permettant d’adapter le rythme et de personnaliser les exemples de la formation

Zone géographique

Bordeaux, Bergerac, Agen, Arcachon, Angoulême, Aquitaine

Modalité de formation

inter-entreprise, intra-entreprise

Modalité de formation

Individuelle, En petit groupe (moins de 5 personnes), Personnalisée/Sur mesure

Programme

Première demi-journée : Introduction au langage HTML et premier document
• Place du HTML dans l’environnement web
• Différencier le rôle d’HTML et de CSS
• Comprendre le principe des balises HTML
• Comprendre la Structure d’un document HTML
• Comprendre le fonctionnement des attributs dans les balises HTML
• Les documents HTML Minimum
• Utiliser les balises Metas importantes
• Utiliser la balise titre


Deuxième demi-journée : mise en forme du texte, liens hypertextes, images et tableaux

Intégrer du texte
• Intégrer du Texte simple
• Ajouter des Titres et des paragraphes
• Ajouter des listes à puces ou numérotées
• Gérer les caractères spéciaux et l’encodage des caractères

Créer des liens hypertextes
• Utiliser la balise « a » pour intégrer des liens hypertextes
• Gérer les URL cibles (pages d’un même site, pages d’un autre site,…)
• Utiliser les Ancres nommées pour créer un lien qui renvoie à un endroit précis d’une page web
• Utiliser l’attribut target pour gérer l’ouverture de nouveaux onglets

Intégrer des images et gérer des arrière-plans
• Les formats d’images pour le web
• Intégrer une image avec la balise img
• Combiner images et liens hypertextes

Utiliser des tableaux
• Balise table, tr, td
• Imbrication des tableaux
• Groupement de colonnes
• Groupement de lignes


Troisième demi-journée : formulaires et premières feuilles de style

Utiliser des formulaires
• Propriétés du formulaire
• Intégrer différents types de champs de saisie
• Mettre en place une vérification des formulaires

Les feuilles de styles
• La syntaxe de base : sélecteur, propriété, valeur
• Utiliser les style « inline », style « interne » et feuille de style externe
• L’application d’un style dans une page Html
• Les éléments class et id


Quatrième demi-journée : mise en page html/css et sélecteurs avancés

Gérer les blocs de mise en page
• Utiliser les balises Div et Span
• Gérer les tailles, marges, bordures et arrères plans de blocs
• Différencier les affichages inline et block
• Gestion des dépassements avec overflow
• Comprendre les blocs « flottants » et le flux (left, right)
• Placer les images à gauche et à droite
• Créer des mises en page à plusieurs colonnes
• Utiliser des gabarits et des grilles html/css
• Utiliser les balises de blocs sémantiques (HTML5)

Utiliser des sélecteurs CSS « avancés »
• Le sélecteur :first-child
• Le sélecteur d’enfants
• Le sélecteur d’adjacence
• Le sélecteur d’attribut
• Quelques sélecteurs CSS3


Cinquième demi-journée : spécificités HTML5 et Responsive design

Les spécificités de HTML5
• Intégrer des vidéos et des sons avec les balises médias
• Améliorer la sémantique avec les micro-formats
• Appréhender le potentiel de la balise canvas

Responsive design et périphériques mobiles
• Utiliser les medias queries pour adapter des mises en pages en fonction des types et tailles de périphériques
• Utiliser une grille responsive
• Résolution d’images pour écran retina


Sixième demi-journée : utiliser des outils et des ressources ne ligne, améliorer qualité et productivité

Utiliser des ressources trouvées sur le web
• Personnaliser un template HTML/CSS
• Intégrer des morceux de codes (menu,…)
• Insérer des scripts javascript

Automatiser et optimiser sa production
• Utiliser des plugins (minify, autoprefixer)
• Utiliser des préprocesseurs (LESS, Sass)
• Utiliser des framework

Autres
• Préconisations pour un bon référencement
• Faire ses choix techniques en fonction des problématique de compatibilité de navigateurs
• Utiliser des codes HTML fournis par des sites webs (youtube,…)
• Respecter les standards / Valider son code