01 40 26 00 99 15 rue de turbigo - 75002 Paris Nous contacter

Création de sites / intégration HTML5 : les fondamentaux

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

Icon2018 quiz amont Icon2018 module presentiel Icon2018 quiz quiz aval
ObjectifsIdentifier les éléments qui constituent une page WebChoisir les outils pour analyser et écrire du codeOrganiser les fichiers d’un site WebRéaliser ou modifier des pages WebS’initier au langage CSSMettre en ligne un site Web
Public concernéTous les professionnels amenés à intervenir sur des sites développés en HTML.
Pré-requisLes apprenants 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, , , , , <meta></p> <p class='line'>Découvrir l’affichage des balises block, inline et inline-block dans le navigateur</p> <p class='line stronged'>Décrypter et coder : les balises les plus courantes</p><p class='line'>Hiérarchiser le texte avec les balises de titre</p> <p class='line'>Mettre du texte en gras et en italique</p> <p class='line'>Créer des listes à puce et numérotées</p> <p class='line'>Examiner les balises HTML5 et leur usage</p> <p class='line with_arrow'>Exercice : coder une page Web simple contenant les balises les plus courantes</p><p class='line stronged'>Ajouter de l’interactivité avec les liens hypertextes</p><p class='line'>Créer des liens absolus vers des pages externes</p> <p class='line'>Organiser les fichiers d’un site</p> <p class='line'>Créer des liens relatifs vers d’autres pages et fichiers du site</p> <p class='line'>Créer des liens vers une adresse mail</p> <p class='line'>Créer des liens vers des ancres</p> <p class='line with_arrow'>Jeu pédagogique sur la nomenclature des liens et les chemins relatifs</p><p class='line bolded'>Afficher des images et les habiller avec du texte</p><p class='line'>Comprendre le principe de l’affichage des images</p> <p class='line'>Insérer la balise <img> et son attribut <src> pour afficher ses images</p> <p class='line'>Ajouter l’attribut <alt> pour rendre l’image accessible</p> <p class='line'>Rendre une image cliquable</p> <p class='line with_arrow'>Exercice : ajouter des images dans une page Web</p><p class='line bolded'>Créer des tableaux pour afficher des données ou modifier une newsletter</p><p class='line'>Assembler les balises <table>, <tr>, <td>, <th> pour créer un tableau de données</p> <p class='line'>Étude de cas : visualiser le code d’une newsletter</p> <p class='line'>S’initier au langage CSS</p> <p class='line'>Mettre en place une feuille de style</p> <p class='line'>Styliser le texte (police, taille, couleur)</p> <p class='line'>Ajouter un arrière-plan</p> <p class='line'>Habiller une image avec du texte</p> <p class='line'>Créer une feuille de style externe</p> <p class='line with_arrow'>Exercice : habiller graphiquement une page Web</p><p class='line bolded'>Mettre en ligne un site Web</p><p class='line'>Comprendre les principes de mise en ligne : upload, download, client, hôte, URL</p> <p class='line'>Utiliser un outil de FTP</p> <p class='line'>Tester et valider son site dans un navigateur</p> <p class='line with_arrow'>Exercice : mise en ligne d’un mini-site</p> </div> <div class='group' data-tab='2'> <span class='group_title lightgreen'>Méthodes pédagogiques</span>Logiciels : Brackets, FileZilla, FTP… </div> <div class='group arrowed' data-tab='2'> <span class='group_title lightgreen'>Moyens techniques</span><strong>Moyens spécifiques à cette formation :</strong><span class='line'>Alternance de théorie et de mise en pratique grâce à de nombreux exercices. La formation est articulée autour de la mise en œuvre d’un mini-site qui est mis en ligne à la fin du stage.</span><br /> <p> <strong>Moyens génériques :</strong> </p> <ul> <li>d’un poste de travail Mac ou PC de dernière génération équipé d’un écran plat 21” ou 27”</li> <li>d’une tablette graphique</li> <li>d’un iPad sur demande</li> <li>d’une connexion très haut débit à Internet</li> <li>d’une clé USB de 8 Go offerte en début de formation</li> <li>Le poste du formateur est relié à un système de vidéo projection</li> <li>8 participants maximum par stage</li> <li>9 participants pour les formations certifiantes</li> <li>Toutes les formations sont dispensées sur les dernières versions officielles de chaque logiciel</li> <li>Un support de cours ou un livre est remis à l’issue des principaux stages</li> </ul> </div> <div class='arrowed group lightgreen' data-tab='2'> <span class='group_title'>Suivi</span> <ul> <li>Chaque apprenant bénéficie d’une hotline gratuite et illimitée par e-mail</li> <li>Fiche d’évaluation, feuille d’émargement et attestation de présence</li> </ul> </div> <div class='group' data-tab='2'> <span class='group_title lightgreen'>Profil du formateur</span><p class='line'>Webdesigner ayant plus de 10 ans d’expérience en enseignement.</p> </div> <div id='before_after'><div class='tabs'> <nav class='tabs-navigation'> <ul class='tabs-menu'> <li class='tabs-menu-item is-active'> <a> Vous pouvez suivre avant </a> </li> <li class='tabs-menu-item'> <a> Vous pouvez suivre après </a> </li> </ul> </nav> <article class='tab-panel'> <div class='form_tab_content'> <a class="training" title="Médias sociaux : élaborer une stratégie 2.0 - Pyramyd Formation" href="/formations/medias-sociaux-elaborer-une-strategie-2-0-wm0402018/2018"><div class='meta-specs'></div> <h4>Médias sociaux : élaborer une stratégie 2.0</h4> <p> 3 jours - 21 heures - 1 700 € HT </p> <p> Prochaine session : Le 18 décembre 2017 </p> <p class='highlight lightgreen' style="font-family: 'med'; margin-top: 0.25rem">›› Programme 2018 disponible</p> </a> </div> <div class='form_tab_content'> <a class="training" title="CSS3 : les fondamentaux - Pyramyd Formation" href="/formations/css3-les-fondamentaux-wm0642018/2018"><div class='meta-specs'></div> <h4>CSS3 : les fondamentaux</h4> <p> 2 jours - 14 heures - 1 550 € HT </p> <p> Prochaine session : Le 9 novembre 2017 </p> <p class='highlight lightgreen' style="font-family: 'med'; margin-top: 0.25rem">›› Programme 2018 disponible</p> </a> </div> </article> </div> </div> </td> <td id='col--right' valign='top'> <a id="back_to_list" href="/domaines/marketing-digital-web-medias-sociaux"><i class='icon ion ion-ios-arrow-right'></i> <span id='back_title'>Marketing Digital <br /> Web <br /> Médias sociaux</span> <span>Voir toutes les formations</span> </a><form class="lightgreen" id="start_full_inscription" action="#" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="pTQ66x4gnLgJxHT+DbMysR2gYaID5KEF1AYu6bJyaLdHOr9VgbrK9prceZFOP5jP9hoQ+f5FUR3fKLe0PBPtHQ==" /> <div class='tabs'> <nav class='tabs-navigation'> <ul class='tabs-menu'> <li class='is-active tabs-menu-item'> <a>Formations Inter</a> </li> <li class='tabs-menu-item'> <a>Formations intra</a> </li> </ul> </nav> <article class='tab-panel'> <div class='form_tab_content'> <h2 class='lightgreen'>HTML5 : les fondamentaux</h2> <div class='sideStats'> <div class='misc_row'> <span class='bg item lightgreen'> 2 jours </span> <span class='bg item lightgreen'> 14 heures </span> <span class='bg item lightgreen' data-inde='1 150 € HT' data-reg='1 150 € HT' id='modular_price' style='text-align: right; padding-right: 0.35rem'>1 150 € HT</span> </div> <br> </div> <p class='smallmargin'>Sélectionner une date dans la liste :</p> <p class='error-warning'>Vous devez sélectionner une date</p> <ul class='dates req'> <li class='field' style='line-height: 3.8rem; height: 4rem;'> <input type='radio' class='regular-radio' name='date' id='date-0' value='4559' /> <label data-date='15.01.2018' for='date-0'></label> <label data-date='15.01.2018' for='date-0' class='two_lines '><span>Du 15 au 16 janvier 2018</span></label> </li> <li class='field' style='line-height: 3.8rem; height: 4rem;'> <input type='radio' class='regular-radio' name='date' id='date-1' value='4560' /> <label data-date='05.03.2018' for='date-1'></label> <label data-date='05.03.2018' for='date-1' class='two_lines '><span>Du 5 au 6 mars 2018</span></label> </li> <li class='field' style='line-height: 3.8rem; height: 4rem;'> <input type='radio' class='regular-radio' name='date' id='date-2' value='4561' /> <label data-date='22.05.2018' for='date-2'></label> <label data-date='22.05.2018' for='date-2' class='two_lines '><span>Du 22 au 23 mai 2018</span></label> </li> <li class='field' style='line-height: 3.8rem; height: 4rem;'> <input type='radio' class='regular-radio' name='date' id='date-3' value='4562' /> <label data-date='18.06.2018' for='date-3'></label> <label data-date='18.06.2018' for='date-3' class='two_lines '><span>Du 18 au 19 juin 2018</span></label> </li> <li class='field' style='line-height: 3.8rem; height: 4rem;'> <input type='radio' class='regular-radio' name='date' id='date-4' value='4563' /> <label data-date='27.08.2018' for='date-4'></label> <label data-date='27.08.2018' for='date-4' class='two_lines '><span>Du 27 au 28 août 2018</span></label> </li> <li class='field' style='line-height: 3.8rem; height: 4rem;'> <input type='radio' class='regular-radio' name='date' id='date-5' value='4564' /> <label data-date='08.10.2018' for='date-5'></label> <label data-date='08.10.2018' for='date-5' class='two_lines '><span>Du 8 au 9 octobre 2018</span></label> </li> <li class='field' style='line-height: 3.8rem; height: 4rem;'> <input type='radio' class='regular-radio' name='date' id='date-6' value='4565' /> <label data-date='10.12.2018' for='date-6'></label> <label data-date='10.12.2018' for='date-6' class='two_lines '><span>Du 10 au 11 décembre 2018</span></label> </li> </ul> <div id='selectProfile'> <p class='smallmargin'>Sélectionner votre profil :</p> </div> <p class='error-warning'>Vous devez sélectionner votre profil</p> <ul class='types req'> <li class='field modulars'> <input type="radio" class="regular-radio" name="profile_type" id="data-salarie" value="salarie" /> <label data-user-type='salarie' for="data-salarie"></label> <label data-user-type='salarie' for="data-salarie">Salarié (entreprise ou collectivité)</label> </li> <li class='field modulars'> <input type="radio" class="regular-radio" name="profile_type" id="data-independant" value="independant" /> <label data-user-type='independant' for="data-independant" /></label> <label data-user-type='independant' for="data-independant">Particulier/Indépendant </li> </ul> <input type='hidden' name='training_id' value='585' /> <input type='hidden' name='training_slug' value='html5-les-fondamentaux-wm0602018' /> <input type='hidden' name='slug' value='html5-les-fondamentaux-wm0602018' /> <button class='lightgreen bg larger btn' name='submit' style='font-size: 0.9rem; whte-space: nowrap'> S'inscrire à cette formation </button> </div> <div class='form_tab_content'> <h2 class='lightgreen'>HTML5 : les fondamentaux</h2> <div class='bg lightgreen sideStats'> <span class='bg item lightgreen'> 2 jours </span> <span class='bg item lightgreen'> 14 heures </span> <span class='bg item lightgreen' style='position:relative; background-color: inherit;'>1 290 €HT*</span> </div> <br> <br> <p style='margin-top: -2rem; font-size: 0.8rem;'>* Prix par jour (à partir de)</p> <p>Organisez cette formation dans votre entreprise selon vos plannings et les disponibilités de nos intervenants (dates continues ou discontinues).</p> <p class='more_bottom small'> <u>Cliquez ici</u> pour plus d'informations </p> <div class='smallerArea'> <p> <strong>Ce tarif inclut :</strong> </p> <ul> <li>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</li> <li>Un entretien téléphonique avec le formateur</li> <li>L’animation de cette formation dans vos locaux pour 3 stagiaires maximum</li> <li>Les supports de cours (si prévus)</li> <li>La gestion administrative de la formation (frais de dossier, devis, conventions…)</li> </ul> <p> <strong>Ce tarif n’inclut pas :</strong> </p> <ul> <li>La mise à disposition du matériel nécessaire au bon déroulé de la formation (ordinateurs, vidéo-projecteur, logiciels…),</li> <li>De rendez-vous de préparation avec le formateur,</li> <li>La conception de supports spécifiques,</li> <li>Les éventuels frais de déplacement et d’hébergement du formateur.</li> </ul> <p> <strong>Important :</strong> </p> <ul> <li>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).</li> <li>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</li> </ul> <p class='more_bottom small close'> <i class='icon ion ion-ios-close-empty'></i> Fermer </p> </div> <a class="lightgreen bg btn larger" style="text-align: center" href="/formations/html5-les-fondamentaux-wm0602018/devis?devis_type=intra">Demander un devis </a></div> </article> </div> </form> <div id='added_elements'> <div class='separator'>Vous pouvez également :</div> <div class='bottom_bloc'> <a target="_blank" class="btn lightgreen bg auto" href="/download_fiche">Télécharger le bulletin d'inscription </a></div> <div class='bottom_bloc'> <a class="lightgreen bg btn larger" style="text-align: center; width: 273px" href="/formations/html5-les-fondamentaux-wm0602018/devis?devis_type=inter&inter=true">Demander un devis </a></div> </div> <div class='bordered boxed lightgreen' id='testimonials'> <div class='separator'>L'avis des participants</div> <div class='testimonial'> <div class='lightgreen testimonial_text'> <span>Je n'avais aucune notion en HTML et je repars avec de bonnes bases.</span> </div> <div class='lightgreen testimonial_subline'>Perrine B. - Responsable marketing aux Éditions Nathan (session du 3 au 4 juillet 2017)</div> </div> <div class='testimonial'> <div class='lightgreen testimonial_text'> <span>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.</span> </div> <div class='lightgreen testimonial_subline'>Laureen B. - Conceptrice Multimedia à la Matmut (session du 9 au 10 mai 2017)</div> </div> <div class='testimonial'> <div class='lightgreen testimonial_text'> <span>Stage utile, je cherchais à connaitre le langage HTML, c'est fait ! Super boite de formation ... je recommande autour de moi. </span> </div> <div class='lightgreen testimonial_subline'>Christelle L. - Graphiste à la CNED (session du 3 au 4 avril 2017)</div> </div> </div> </td> </tr> </table> </div> </div> </div> <div class='clear'></div> </div> <footer> <div class='added' id='footer_background'> <video autoplay='' muted='' loop='' id='video-hero' class='hero__video'> <source data-src='/video.mp4' type='video/mp4' src='/video.mp4'> </video> <div id='footer_background_wrapper' style='z-index: 10000;'> <div class='container_12'> <a class="bloc grid_4 push_2" title="Recevoir la newsletter Pyramyd Formations" href="/newsletter"><i class='ion-android-arrow-forward ion'></i> Recevoir la newsletter </a><a target="_blank" class="bloc grid_4 push_2" title="Découvrir Bloc Notes" href="http://blog.pyramyd-formation.com"><i class='ion-android-arrow-forward ion'></i> Découvrir le blog </a></div> </div> </div> <div class='footer_menu'> <div class='container_12'> <div class='grid_12'> <span>Pyramyd NTCV ©2017</span> <a title="Mentions Légales" href="/article/mentions-legales">Mentions légales </a><a title="Les conditions générales de vente" href="/article/conditions-generales-de-vente--2">CGV </a><a title="Nous contacter à propos des formations" href="/contact">Contact </a></div> </div> </div> <div class='brands'> <span class='brand--header'> <a href='http://www.abilways.com/' id='abilways-v2' target='_blank' title='ABILWAYS - Talent development & learning solutions'> <span></span> </a> </span> <a href='http://www.efe.fr/' id='efe' target='_blank' title='EFE - L’expert des formations opérationnelles'> <span></span> </a> <a href='http://www.cfpj.com/' id='cfpj' target='_blank' title='CFPJ - L’expert médias et communication '> <span></span> </a> <a href='http://www.acpformation.fr/' id='acp' target='_blank' title='ACP FORMATION - Le spécialiste du secteur public '> <span></span> </a> <a href='http://www.ism.fr/' id='ism' target='_blank' title='ISM - L’Institut supérieur du marketing '> <span></span> </a> <a href='http://www.idcc.fr/' id='idcc' target='_blank' title='IDCC - Le spécialiste de l’expérience client'> <span></span> </a> <a href='http://pyramyd-formation.com/' id='pyramyd' target='_blank' title='PYRAMYD - La référence dans les métiers de la création et de la communication visuelle'> <span></span> </a> <a href='http://www.ifebenelux.com/' id='ifebenelux' target='_blank' title='IFE Benelux - L’expert des formations opérationnelles en Belgique et au Luxembourg'> <span></span> </a> <a href='http://www.ife.pt/' id='ife-portugal' target='_blank' title='IFE Portugal - Le partenaire des métiers RH au Portugal'> <span></span> </a> <a href='http://www.elearningtime.com' id='elearningtime' target='_blank' title='E-learning Time - L’expert e-learning du groupe'> <span></span> </a> <a href='http://www.abilways-digital.com' id='abilways-digital' target='_blank' title='ABILWAYS DIGITAL - Formation & évolution'> <span></span> </a> </div> </footer> <div class='modalBg' id='newsletter_modal'> <div class='modal'> <button class='closer'>Close modal</button> <div class='body'> <form id="popup_newsletter" class="form" action="/newsletter" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="RkfVFS5zXKUJ8JglcrsbYsJXXWNuLT3hZ30RfLubf+ykSVCrsekK65rolUoxN7EcKe0sOJOMzflsU4ghNfr6Rg==" /> <h3>Recevoir la newsletter</h3> <div class='field req'> <label>Email</label> <input class='field-element' name='email' placeholder='Préciser votre adresse mail' required='' type='text'> </div> <div class='button-bar'> <button class='btn'>Valider</button> </div> <div class='spinnerHolder'> <div class='spinner' style='width:25px;height:25px;'> <div class='bar1'></div> <div class='bar2'></div> <div class='bar3'></div> <div class='bar4'></div> <div class='bar5'></div> <div class='bar6'></div> <div class='bar7'></div> <div class='bar8'></div> <div class='bar9'></div> <div class='bar10'></div> <div class='bar11'></div> <div class='bar12'></div> </div> </div> <div class='successHolder'> <h3>Votre inscription a été enregistrée</h3> </div> </form> </div> </div> </div> <div class='modalBg' id='forward_modal'> <div class='modal'> <button class='closer'>Close modal</button> <div class='body'> <form id="popup_forward" class="form" action="/formations/html5-les-fondamentaux-wm0602018/forward" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="6sLQeb0Lf9Hwa5QcvVgRx/NMLSRSVhSnLtqalesEixwIzFXHIpEpn2NzmXP+1Lu5GPZcf6/35L8l9APIZWUOtg==" /> <h3 style='color: #444'> <span class='lightgreen'>Envoyer cette fiche</span> HTML5 : les fondamentaux </h3> <div class='field req half left'> <label>Votre Prénom</label> <input class='field-element' name='firstname' placeholder='Préciser votre prénom' required='' type='text'> </div> <div class='field req half right'> <label>Votre nom</label> <input class='field-element' name='lastname' placeholder='Préciser votre nom' required='' type='text'> </div> <div class='field req'> <label>Votre email</label> <input class='field-element' name='email' placeholder='Préciser votre adresse mail' required='' type='text'> </div> <div class='field req'> <label>Destinataire(s)</label> <input class='field-element' name='emails' placeholder='Destinataire(s)' required='' type='text'> </div> <div class='field req'> <label>Ajouter un message</label> <textarea name="message" id="message" placeholder="Ajouter un message"> </textarea> </div> <div class='field recaptcha'><script src="https://www.google.com/recaptcha/api.js" async defer></script> <div class="g-recaptcha" data-sitekey="6Lc8chATAAAAANau4q1gCqePMeTv_hEc-_gL1nXQ"></div> <noscript> <div style="width: 302px; height: 352px;"> <div style="width: 302px; height: 352px; position: relative;"> <div style="width: 302px; height: 352px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Lc8chATAAAAANau4q1gCqePMeTv_hEc-_gL1nXQ" frameborder="0" scrolling="no" style="width: 302px; height:352px; border-style: none;"> </iframe> </div> <div style="width: 250px; height: 80px; position: absolute; border-style: none; bottom: 21px; left: 25px; margin: 0px; padding: 0px; right: 25px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 80px; border: 1px solid #c1c1c1; margin: 0px; padding: 0px; resize: none;" value=""> </textarea> </div> </div> </div> </noscript> </div> <div class='button-bar'> <button class='bg btn lightgreen'>Valider</button> </div> <div class='spinnerHolder'> <div class='spinner' style='width:25px;height:25px;'> <div class='bar1'></div> <div class='bar2'></div> <div class='bar3'></div> <div class='bar4'></div> <div class='bar5'></div> <div class='bar6'></div> <div class='bar7'></div> <div class='bar8'></div> <div class='bar9'></div> <div class='bar10'></div> <div class='bar11'></div> <div class='bar12'></div> </div> </div> <div class='successHolder'> <h3>La fiche a été envoyée</h3> </div> </form> </div> </div> </div> <div id='scrollTop'> <i class='ion icon ion-android-arrow-up'></i> </div> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-1622489-30', 'auto'); ga('send', 'pageview'); </script> <script type="text/javascript"> var google_conversion_id = 976071249; var google_custom_params = window.google_tag_params; var google_remarketing_only = true; </script> <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script> <noscript> <div style="display:inline;"><img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/982867151/?value=0&guid=ON&script=0" /></div> </noscript> </body> </html>