[PDF] Maîtrisez les standards de la création de sites web HTML5



Previous PDF Next PDF







Structurer une page Web : HTML

c) Lien entre la page HTML et la feuille de style CSS Les règles de styles associées à la page Tintin html sont contenues dans le fichier tintin css Pour que les effets de style s’appliquent, il est nécessaire de lier les deux fichiers avec une balise Ceci est réalisé par le code ci-dessous :



Le Web Exercice 1 HTML - medias2ftvakamaizednet

Le Web Exercice 3 On donne ci-dessous les codes HTMLde deux pages web et leur interpr´etation : Code HTML de la page 1 Code HTML de la page 2 Sorties ecrans´ M Boehm & C Poulmaire & P Remy 3/13Acad´emie de Versailles



TP3 HTML V2 - lewebpedagogiquecom

1 &OuvrirlespagesWEB«accueil_sans_css html»et«Page2_sans_css html»quisetrouventdansle dossier«FichierssansCSS» Ces#pages#WEB#ne#respectentpas#la#norme#HTML5#car#l'aspectestspécifié#dans#le#fichier#HTML#au# moyen#d'attributs#placés#dans#les#balises #Pour#remédier#à#ce#problème,#il#a#été#décidé#d'utiliser#une#



Maîtrisez les standards de la création de sites web HTML5

gateurs et leur compatibilité avec les éléments HTML et les propriétés CSS, ainsi que les bonnes pratiques de conception de sites web pour obtenir des contenus sémantiques bien conçus Dans la deuxième partie, le lecteur apprend à concevoir la structure des pages web avec des éléments HTML sémantiques dédiés Il étudie



Exemple de code html page d accueil

Html est également une balise indispensable, il doit être présent dans tous vos documents pour inclure le code de vos pages Web Le gestionnaire détermine le chapitre de votre document, cette partie n’est pas visible, mais est nécessaire pour plusieurs raisons



BIOLOGIE 2

m) de deux de ces isozymes A cette fin, on détermine les vitesses initiales de réaction de ces deux enzymes pour différentes concentrations de glucose Les résultats de ces expériences sont consignés dans le tableau ci-dessous Glucose v (mmol min-1) (mM) hexokinase I hexokinase II 0,10 5,00 0,20 0,20 6,67 0,38 0,30 7,50 0,57 0,40 8,00 0,74



TP Web : Les langages de base des pages Web le HTML et le CSS

TP Web : Les langages de base des pages Web le HTML et le CSS En premier lieu il faut dire que les langages HTML et CSS sont deux véritables standards sans concurrent Ils sont donc à la base de tout projet de développement Web ( site de e-commerce, blog, appli, )



Guide de création de Pages Produits pour Amazonfr Jeux

Guide de création de Pages Produits pour Amazon Jeux & Jouets – Bébés & Puériculture Les informations que vous référencerez sur notre site seront visibles par nos clients sur la page détaillée de chaque produit La qualité des données dans notre catalogue et la qualité de la classification des produits sur Amazon



Les Cadres - The Apache Software Foundation

deux autres sortes de cadres qui se trouvent attachés à la Barre d'outils Dessin : le cadre de forme rectangulaire et le cadre Texte : Dans une première étape , je vous propose de découvrir les cadres en réalisant une brochure de 3 pages, extensible à volonté

[PDF] colorer une seule page word 2016

[PDF] colorer une seule page word 2010

[PDF] arrière plan sur une seule page word

[PDF] html plusieurs pages

[PDF] changer la couleur d'une seule page word 2013

[PDF] couleur fond de page word 2010

[PDF] exercice verbe être au présent ? imprimer

[PDF] cycle de vie du papillon maternelle

[PDF] cycle de vie du papillon ce2

[PDF] de la chenille au papillon cycle 3

[PDF] métamorphose chenille papillon cycle 2

[PDF] cycle de vie du papillon ce1

[PDF] le cycle de vie du papillon

[PDF] de la chenille au papillon maternelle

[PDF] hygiène et sécurité au laboratoire d'analyses médicales

Ce livre sur le langage HTML5 (en version 5.2 au moment de l'écriture) et les feuilles de styles CSS3, langages fondateurs dans la création de sites web, s'adresse aux développeurs qui souhaitent disposer des connaissances nécessaires pour créer et faire évoluer des sites web dans le respect des bonnes pratiques. Le livre est rédigé de façon à permettre un apprentissage progressif

des éléments HTML et des propriétés CSS les plus couramment utili-sés. Il n'a pas pour objectif de présenter l'ensemble des sy

ntaxes mais uniquement celles couramment exploitées dans la création de sites web modernes. Les exemples de code présentés par l'auteur sont illu strés par des captures d'écran afin que le lecteur puisse se faire une idée de l'affichage obtenu. Dans la première partie du livre, l'auteur donne les informations néces- saires pour bien appréhender la conception de site web. Il présente les spécifications techniques du HTML et des CSS (les fameuses recommandations proposées par le W3C), le rôle essentiel des navi- gateurs et leur compatibilité avec les éléments HTML et les proprié tés CSS, ainsi que les bonnes pratiques de conception de sites web pour obtenir des contenus sémantiques bien conçus. Dans la deuxième partie, le lecteur apprend à concevoir la structure des pages web avec des éléments HTML sémantiques dédiés. Il étudie ensuite les éléments qui permettent d'insérer du texte, des liens, des tableaux, des images, des formulaires, sans oublier des contenus

multimédias. Un chapitre est consacré aux Microdata permettant d'ob-tenir un site sémantique et d'optimiser son référencement.

La troisième partie permet au lecteur d'exploiter les CSS afin de mettre en forme et de mettre en page un site web. Il y apprend la syntaxe des CSS et des sélecteurs puis étudie les notions d'héritage et de cascade. Ensuite, il découvre comment mettre en forme chaque composant d'une page web : le texte, les images, les formulaires ainsi que les boîtes conteneurs. Les différentes techniques de mise en p age et la conception des sites Responsive sont également détaillées. L'auteur termine avec l'étude des modules CSS dédiés aux animations pour dynamiser des pages web.

Responsable pédagogique dans un centre

de formation et formateur sur les techno- logies Web et les Arts graphiques pendant plus de quinze ans, Christophe AUBRY est aujourd'hui dirigeant de la société netPlume spécialisée dans la rédaction pédagogique et la création de sites internet. Auteur de nombreux livres et vidéos aux Editions ENI (HTML/CSS,

RWD, WordPress, Drupal, Joomla...), il

reste au fait des nouveautés concernant la conception des sites web en effectuant une veille technologique régulière.

Christophe AUBRY

HTML5 et CSS3

Maîtrisez les standards

de la création de sites web 3 e

édition

Nouvelle édition

HTML5 et CSS3

Maîtrisez les standards de la création de sites web

HTML5 et CSS3

Maîtrisez les standards de la création de sites webLes chapitres du livre

Avant-propos

• Partie Aborder la conception des sites web : L'évolution des spécifications • Les navigateurs •

Les bonnes pratiques

• Partie L'HTML

5.2 : Les éléments HTML

• La structure des pages • Les conteneurs séman- tiques • Les conteneurs de texte • La mise en forme sémantique du texte • Les

éléments d'interaction

• Les liens • Les tableaux • Les images • Les formulaires

Le multimédia

• Le web sémantique avec Microdata • Partie Les CSS3 : Intégrer les styles CSS • Définir les styles CSS

Les styles pour les polices de carac-

tères • Les styles pour le texte • Les styles pour les conteneurs de texte • Les styles pour les boîtes • La mise en page

à l'aide des boîtes

• Le Responsive Web

Design

• Les modules d'animation • Des modules CSS pour les graphistes • Les feuilles de style pour l'impression

ISBN : 978-2-409-01783-4

29,90 €

Pour plus

d'informations : 1

Table des matières

Avant-propos

Partie 1 : Aborder la conception des sites web

Chapitre 1-1

L'évolution des spécifications

1. Une brève histoire du Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17

2. Les travaux d'élaboration des spécifications. . . . . . . . . . . . . . . . . . . .18

3. L'évolution du HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19

4. L'évolution des CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20

Chapitre 1-2

Les navigateurs

1. L'évolution des navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23

2. Les outils de développement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24

3. La compatibilité des navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24

Chapitre 1-3

Les bonnes pratiques

1. Séparer le contenu de la mise en forme. . . . . . . . . . . . . . . . . . . . . . . .27

2. Utiliser une structure sémantique. . . . . . . . . . . . . . . . . . . . . . . . . . . .28

3. Optimiser le code et organiser vos fichiers . . . . . . . . . . . . . . . . . . . . .28

4. Un exemple d'une page bien formée . . . . . . . . . . . . . . . . . . . . . . . . . .29

5. Valider le code de vos pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32

2 Maîtrisez les standards de la création de sites web

HTML5 et CSS3

Partie 2 : Aborder la conception des sites web

Chapitre 2-1

Les éléments HTML

1. Bien utiliser le HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33

2. Les balises et les contenus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34

3. Les attributs des éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35

4. Le bon usage de la syntaxe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36

5. L'imbrication des éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36

6. Les commentaires. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38

Chapitre 2-2

La structure des pages

1. La structure générale des pages web . . . . . . . . . . . . . . . . . . . . . . . . . .39

2. La déclaration doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40

3. L'élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40

4. L'élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40

4.1 Les éléments enfant de l'en-tête . . . . . . . . . . . . . . . . . . . . . . . . .40

4.2 Les éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41

4.3 L'élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42</h4> <h4>4.4 L'élément <link>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42</h4> <h4>4.5 L'élément <style>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42</h4> <h4>4.6 L'élément <script> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43</h4> <h4>5. L'élément <body>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43</h4> <h4>6. Exemple d'une structure simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43</h4> 3 <h3>Table des matières</h3> <h3>Chapitre 2-3</h3> <h3>Les conteneurs sémantiques</h3> <h4>1. Bien utiliser les conteneurs sémantiques . . . . . . . . . . . . . . . . . . . . . .45</h4> <h4>2. L'élément <div> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46</h4> <h4>3. L'élément <span> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46</h4> <h4>4. L'élément <header>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47</h4> <h4>5. L'élément <footer> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48</h4> <h4>6. L'élément <aside> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48</h4> <h4>7. L'élément <nav> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48</h4> <h4>8. L'élément <main>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49</h4> <h4>9. L'élément <section> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49</h4> <h4>10. L'élément <article> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49</h4> <h4>11. Deux exemples de structure sémantique de page. . . . . . . . . . . . . . . .50</h4> <h4>11.1 Une structure sémantique simple . . . . . . . . . . . . . . . . . . . . . . . .50</h4> <h4>11.2 Une structure sémantique plus élaborée. . . . . . . . . . . . . . . . . . .51</h4> <h4>12. Un exemple de structure sémantique d'un article . . . . . . . . . . . . . . .52</h4> <h3>Chapitre 2-4</h3> <h3>Les conteneurs de texte</h3> <h4>1. Bien utiliser les conteneurs de texte . . . . . . . . . . . . . . . . . . . . . . . . . .55</h4> <h4>2. La langue et la direction du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . .55</h4> <h4>3. Les titres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56</h4> <h4>4. Les paragraphes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58</h4> <h4>5. Les citations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58</h4> <h4>6. Les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60</h4> <h4>6.1 Les différents types de liste . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60</h4> <h4>6.2 Les listes non ordonnées. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60</h4> <h4>6.3 Les listes ordonnées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61</h4> 4 Maîtrisez les standards de la création de sites web <h3>HTML5 et CSS3</h3> <h4>6.4 L'attribut de <li>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63</h4> <h4>6.5 Les listes de définitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63</h4> <h4>7. Les adresses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .64</h4> <h4>8. Le texte préformaté . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65</h4> <h4>9. Les lignes horizontales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67</h4> <h3>Chapitre 2-5</h3> <h3>La mise en forme sémantique du texte</h3> <h4>1. Utiliser une mise en forme sémantique . . . . . . . . . . . . . . . . . . . . . . .69</h4> <h4>2. Insérer des caractères spéciaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69</h4> <h4>3. L'emphase forte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71</h4> <h4>4. L'emphase simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71</h4> <h4>5. Mettre en gras et en italique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72</h4> <h4>6. L'indice et l'exposant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .73</h4> <h4>7. Le souligné. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .73</h4> <h4>8. Le barré . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74</h4> <h4>9. Réduire la taille de caractère . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75</h4>quotesdbs_dbs7.pdfusesText_13 </div> </div> <div class="left"> <br/> <div style="width:100%;min-height:300px !important;padding:2px;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1570187411384203" crossorigin="anonymous"></script> <!-- Responsive1 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1570187411384203" data-ad-slot="2836242943" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div> <!-- The Modal --> <div> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="closeA">×</span> if you Get <b>No preview available</b> Click on (Next PDF) <a href="https://pdfprof.com/PDFV2/Documents4/4798/18/-1" class="bblinkss"> Next PDF </a> <iframe frameBorder="0" width="100%" height="50" frameBorder="0" src="https://pdfprof.com/PDFV2/ShowLink.php?links=https://static.fnac-static.com/multimedia/editorial/pdf/9782409017834.pdf" ></iframe> <iframe id="ppif" frameBorder="0" width="100%" src="https://pdfprof.com/PDFV2/getFrameTestV3.php?links=https://static.fnac-static.com/multimedia/editorial/pdf/9782409017834.pdf&idt=4798&t=18&view=-2&url=https://pdfprof.com/PDFV2/Documents4/4798/18/-2" style="width:100%;height:90vh;" ></iframe> </div> </div> </div> <style> body {font-family: Arial, Helvetica, sans-serif;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 10px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 5px; border: 1px solid #888; width: 85%; } /* The Close Button */ .closeA { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; background:red; padding:1px; } .closeA:hover, .closeA:focus { color: #000; text-decoration: none; cursor: pointer; } </style> <script> // Get the modal var modal = document.getElementById("myModal"); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("closeA")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body>