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
Je n'avais aucune notion en HTML et je repars avec de bonnes bases.
Perrine B. - Responsable marketing aux Éditions Nathan (session du 3 au 4 juillet 2017)
Tous les fondamentaux ont été évoqués dans un ordre très logique. J'ai trouvé le formateur très pédagogue, ce fut un réel plaisir d'apprentissage sans stress.
Laureen B. - Conceptrice Multimedia à la Matmut (session du 9 au 10 mai 2017)
Stage utile, je cherchais à connaitre le langage HTML, c'est fait ! Super boite de formation ... je recommande autour de moi.
Christelle L. - Graphiste à la CNED (session du 3 au 4 avril 2017)