Prototypage - Création de sites - Intégration HTML5 : les fondamentaux

Créer des pages Web simples ou modifier des contenus HTML existants

Objectifs

→ Identifier les éléments qui constituent une page Web
→ Choisir les outils pour analyser et écrire du code
→ Organiser les fichiers d‘un site Web
→ Réaliser ou modifier des pages Web
→ S‘initier au langage CSS
→ Mettre en ligne un site Web

Public concerné

Tous les professionnels amenés à intervenir sur des sites développés en HTML.

Pré-requis

Les stagiaires doivent avoir une bonne pratique de l'outil informatique et connaître la navigation sur le Web.

Programme

Identifier les éléments qui constituent une page Web

  • Reconnaître les différents langages dans une page Web : le HTML, le CSS, le JavaScript
  • Distinguer les éléments constitutifs d‘une page Web : balises de titre, liens, images, feuilles de style

 

Étude de cas : analyse de sites Web et du code associé

Choisir les outils pour analyser et écrire du code

  • Identifier les différents éditeurs HTML, WYSIWYG, et les outils en ligne
  • Installer un outil d‘analyse et l‘expérimenter sur un site grand public

 

Exercice : prise en main d‘un outil de code

Organiser les fichiers d‘un site Web

  • Nommer et ranger les fichiers d‘un site Internet
  • Assimiler les règles de nomenclature
  • Apprendre les bonnes pratiques pour agencer les éléments d‘un site : images, pages, feuilles de style, polices, autres médias

 

Quiz : validation des bonnes pratiques

Réaliser ou modifier des pages Web

Créer le code pour structurer une page Web

  • Créer un fichier HTML dans l‘éditeur, le nommer et l‘enregistrer
  • Insérer les balises structurelles de la page : doctype, <HTML>, <head>, <body>, <title>, <meta>
  • Découvrir dans le navigateur l‘affichage des balises block, inline et inline-block

 

Décrypter et coder : les balises les plus courantes

  • Hiérarchiser le texte avec les balises de titre
  • Créer des blocs de texte et des sauts de ligne
  • Mettre du texte en gras et en italique
  • Créer des listes à puce et numérotées
  • Examiner les nouvelles balises HTML5 et leur usage

 

Exercice : coder une page Web simple contenant les balises les plus courantes

 

Ajouter de l‘interactivité avec les liens hypertextes

  • Créer des liens absolus vers des pages externes
  • Organiser les fichiers d‘un site
  • Créer des liens relatifs vers d‘autres pages et fichiers du site
  • Créer des liens vers une adresse mail
  • Utiliser l‘attribut <target> pour ouvrir un lien dans un nouvel onglet

 

Jeu pédagogique sur la nomenclature des liens et les chemins relatifs

 

Afficher des images et les habiller avec du texte

  • Comprendre le principe de l‘affichage des images
  • Insérer la balise <img> et son attribut <src> pour afficher ses images
  • Ajouter l‘attribut <alt> pour rendre l‘image accessible
  • Rendre une image cliquable

 

Exercice : ajouter des images dans une page Web

 

Créer des tableaux pour afficher des données ou modifier une newsletter

  • Assembler les balises <table>, <tr>, <td>, <th> pour créer un tableau de données

 

Étude de cas : visualiser le code d‘une newsletter

S‘initier au langage CSS

Mettre en place une feuille de style

  • Styliser le texte (police, taille, couleur)
  • Ajouter un arrière-plan
  • Habiller une image avec du texte
  • Comparer les balises <div> et <span> et les habiller avec les CSS

 

Exercice : habiller graphiquement une page Web

Mettre en ligne un site Web

  • Comprendre les principes de mise en ligne : upload, download, client, hôte, URL
  • Utiliser un outil de FTP
  • Tester et valider son site dans un navigateur

 

Exercice : mise en ligne d‘un mini-site

Méthodes pédagogiques

Alternance de théorie et de mise en pratique grâce à de nombreux exercices. La formation est articulée autour de la mise en oeuvre d‘un mini-site qui est mis en ligne à la fin du stage.

Moyens techniquesMoyens spécifiques à cette formation :

→ Logiciels : Brackets, FileZilla, FTP…


Moyens génériques :

  • d’un poste de travail Mac ou PC de dernière génération équipé d’un écran plat 21” ou 27”
  • d’une tablette graphique
  • d’un iPad sur demande
  • d’une connexion très haut débit à Internet
  • d’une clé USB de 8 Go offerte en début de formation
  • Le poste du formateur est relié à un système de vidéo projection
  • 8 participants maximum par stage
  • 9 participants pour les formations certifiantes
  • Toutes les formations sont dispensées sur les dernières versions officielles de chaque logiciel
  • Un support de cours ou un livre est remis à l’issue des principaux stages
Suivi
  • Chaque apprenant bénéficie d’une hotline gratuite et illimitée par e-mail
  • Fiche d’évaluation, feuille d’émargement et attestation de présence
Profil du formateur

Webdesigner ayant plus de 10 ans d‘expérience en enseignement.

Marketing Digital
Web
Médias sociaux
Voir toutes les formations

HTML5 : les fondamentaux

2 jours 14 heures 1 100 € HT

Sélectionner une date dans la liste :

Vous devez sélectionner une date

Sélectionner votre profil :

Vous devez sélectionner votre profil

HTML5 : les fondamentaux

2 jours 14 heures 2 580 €HT*

* À partir de

Organisez cette formation dans votre entreprise selon vos plannings et les disponibilités de nos intervenants (dates continues ou discontinues).

Cliquez ici pour plus d'informations

Ce tarif inclut :

  • La préparation pédagogique de la formation par notre équipe (validation des pré-requis, définition des objectifs et des compétences visées
  • Un entretien téléphonique avec le formateur
  • L’animation de cette formation dans vos locaux pour 3 stagiaires maximum
  • Les supports de cours (si prévus)
  • La gestion administrative de la formation (frais de dossier, devis, conventions…)

Ce tarif n’inclut pas :

  • La mise à disposition du matériel nécessaire au bon déroulé de la formation (ordinateurs, vidéo-projecteur, logiciels…),
  • De rendez-vous de préparation avec le formateur,
  • La conception de supports spécifiques,
  • Les éventuels frais de déplacement et d’hébergement du formateur.

Important :

  • Ces formations peuvent également être organisées dans nos salles de formation exclusivement pour vos collaborateurs (dans ce cadre, nous nous chargeons de tous les aspects logistiques).
  • Dans le cadre de formations « intra / sur mesure », la durée des formations peut bien sûr être modifiée selon vos impératifs et objectifs

Fermer

Demander un devis
L'avis des participants
Stage très utile pour m'aider à identifier les erreurs de code dans certaines de nos actions
Saïda A. - Chef de projet communication chez BPCE Assurances (session des 10 et 11 octobre 2016)
Débutant, j'ai appris les fondamentaux du HTML. Parfait, merci !
Cheikh B. - Maquettiste senior chez ADLPartner (session des 10 et 11 octobre 2016)
Ce stage a répondu à mes objectifs : analyse des balises, gestion HTML de base. Stage très utile pour améliorer la création et la gestion de la newsletter
Lucia C. - Coordinatrice des ventes chez Showroomprive.com (session des 30 juin et 1er juillet 2016)