1 / 33

HTML

HTML. Cours 1. Aujourd’hui. Le HTML qu’est-ce que c’est? Balise, attribut, valeur Titres et paragraphes Type bloc et type en ligne Insérer une image. HTML.

qiana
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Cours 1

  2. Aujourd’hui • Le HTML qu’est-ce que c’est? • Balise, attribut, valeur • Titres et paragraphes • Type bloc et type en ligne • Insérer une image

  3. HTML • L'Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C'est un langage de balisage qui permet d'écrire de l'hypertexte, d’où son nom. • Permet de structurer et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des éléments programmables. • Tout ce qui gère l’apparence, l’esthétique, est géré en CSS. L’alignement d’un paragraphe, la couleur d’un titre ou la largeur d’une boite.

  4. Résultat dans le navigateur

  5. HTML 4.01 La version 4 de HTML décrit 91 éléments. En suivant la spécification de HTML 4, les fonctionnalités implémentées par HTML peuvent être réparties ainsi :

  6. HTML 5 • Le W3C vise une finalisation de la spécification en 2014, et encourage les développeurs Web à l’utiliser dès maintenant. • Contient des balises spécifiques pour l’audio et le vidéo • etc

  7. W3C • World Wide Web Consortium (W3C) est un organisme de standardisation à but non-lucratif, fondé en octobre 1994 comme un consortium chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML. • Le HTML 5 est développé conjointement avec le WHATWG, composé des développeurs de navigateurs web.

  8. Structure générale Un document HTML est séparé entre un en-tête (head) et un corps (body). • L’en-tête contient les informations sur le document, notamment son titre et éventuellement des métadonnées pour le référencement. • Le corps contient ce qui est affiché à l’écran. <html> <head> <title></title> </head> <body> Le contenu </body> </html>

  9. Les liens hypertexte Un hyperlien ou lien hypertexte ou simplement lien, est une référence dans un système hypertexte permettant de passer du document consulté à un autre. <html> <head> <title>Document 1</title> </head> <body> Ceci est du texte<br> Ceci pointe vers le <a href="Document2.html">document 2</a><br> <a href="Document3.html">Ceci pointe vers le document 3</a> </body> </html>

  10. Résultat

  11. Balise, attribut, valeur Élément Nom, notion abstraite. Balise Forme concrète d'un élément. On parlera aussi de balise ouvrante et fermante. Par exemple <html> est la balise ouvrante de l'élément html. Attribut Propriété d'un élément. Il permet de préciser le rôle ou certaines propriétés d'une balise dans le document. On lui assigne une valeur. Valeur Précisel’attribut.

  12. Balise, attribut, valeur Exemple <a href="http://www.perdu.com">vous êtes-perdus?</a> • a est la balise • href est l’attribut • http://www.perdu.com est sa valeur

  13. Titre du document et en-tête • En HTML on donne le titre du document dans une partie appelée en-tête (le head). Cette partie contient des informations non visibles à l’écran. • Le titre est défini à l'aide de la balise title. Exemple:<head> <title>Titre de mon document</title> </head>

  14. Corps du document • Zone que l'on retrouve après l'en-tête. Il est défini par la balise <body>. Il contient tout ce qui est visible à l’écran. • Exemple:<body> <p>Ceci est un paragraphe</p> </body>

  15. Quelques guides • Écrivez le code HTML en minuscule et sans caractères spéciaux • Ne pas oublier de fermer les balises (par exemple <html>...</html>). • Mettre les valeurs des attributs entre guillemets doubles. • S’assurer que le fichier possède bien l’extension .htm ou .html.

  16. Exercice Faire le laboratoire 1 partie 1

  17. Titres et paragraphes • Les titres sont au nombre de 6, chacun ayant un niveau d'importance. Le plus haut niveau d'importance est le titre <h1>, suivit de <h2> et ainsi de suite jusqu'à <h6>. • Un paragraphe est défini par l'élément <p>.

  18. Deux types de balises • type bloc (block) : p, h1, ul • type en ligne (inline) : i, b, u Et voiciun exemple d’un type en lignevoilà

  19. Flux normal Pour représenter le positionnement en flux normal, on peut imaginer le navigateur parcourant le code HTML du début à la fin et retranscrivant son contenu au fur et à mesure des balises rencontrées. Comme dans la lecture d'un texte, il procède verticalement, commençant en «haut» de l'écran pour aller jusqu'en «bas», et horizontalement de gauche à droite, sur la totalité de l'espace disponible et nécessaire en largeur comme en hauteur.

  20. Boîte de type en ligne Elles sont affichées dans une succession horizontale.

  21. Type bloc • Elles sont affichées dans une succession verticale. • Un élément de type bloc se sépare du reste du texte et occupe toute la largeur possible.

  22. Type bloc • les titres h1, h2, h3, h4, h5, h6 ; • le paragraphe p ; • Les listes et éléments de liste ul, ol, li, dl, dd ; • Le bloc de citation blockquote ; • l'élément div ;

  23. Exercice Faire le laboratoire 1 partie 2

  24. Les images • Toute utilisation d’image passe par l’emploi de la balise img. • Attributs: src, width, height, border, align, vspace, hspace, alt, style Ex: <img src=“roger.gif” width=“300” height=“100”>

  25. Les tableaux Un tableau est composé de lignes, de colonnes et de cellules. On peut regrouper les lignes dans des sections. • en-tête (thead) • de pied de page (tfoot) • et de corps (tbody)

  26. Les tableaux Un minimum de trois balises • <table> Définit la table. Attributs: width, height, border, cellspacing, style. • <tr> (lignes) • <td> (cellule, colonne) attributs: colspan, rowspan, width.

  27. Les balises facultatives • <thead>, <tbody>, <tfoot> • <th> (équivalent de la balise <tr> pour l’entête du tableau) • La balise thead permet de grouper le contenu qui forme l’en-tête du tableau. • Peut servir pour mieux déterminer l’apparence avec les CSS.

  28. Tableau simple • <table> • <tr> • <td>Colonne 1 ligne 1</td> • <td>Colonne 2 ligne 1</td> • <td>Colonne 3 ligne 1</td> • </tr> • <tr> • <td>Colonne 1 ligne 2</td> • <td></td> • <td></td> • </tr> • <tr> • <td>Colonne 1 ligne 3</td> • <td></td> • <td></td> • </tr> • </table>

  29. Tableau avancé <table border="1" width="50%"><thead>    <tr>      <th>En-tete colonne 1</th>      <th>En-tete colonne 2</th>    </tr></thead><tbody>    <tr>      <td>Élément de tableau colonne 1 ligne 1</td>      <td>Élément de tableau colonne 2 ligne 1</td>    </tr>    <tr>      <td>Élément de tableau colonne 1 ligne 2</td>      <td>Élément de tableau colonne 2 ligne 2</td>    </tr></tbody>   <tfoot>    <tr>      <td>Pied-de-tableau colonne 1</td>      <td>Pied-de-tableau colonne 2</td>    </tr></tfoot> </table>

  30. Tableau plus complexe <table border="1"> <tr> <td colspan="2">Titre</td> </tr> <tr> <td bgcolor="grey">Cellule de gauche</td> <td>Cellule de droite</td> </tr> </table>

  31. Exemples de sites web • cihw.org • ckrl.qc.ca • wikipedia.com

  32. Exercice Faire le laboratoire 2

More Related