1 / 34

HTML

HTML. Cours 1. 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.

yetty
Télécharger la présentation

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. 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.

  3. Résultat dans le navigateur

  4. 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 :

  5. 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

  6. Structure générale Au plus haut niveau, 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é. • <html> • <head> • <title></title> • </head> • <body> • Le contenu • </body> • </html>

  7. Les liens hypertexte Un hyperlien ou lien hypertexte ou simplement lien, est une référence dans un système hypertexte permettant de passer automatiquement d'un document consulté à un document lié. <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>

  8. Résultat

  9. 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.

  10. 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

  11. Titre du document et en-tête • En HTML on donne le titre du document dans une partie appelée en-tête. Elle se situe au début du document (après la balise <html>) ; elle est délimitée par les balises <head> et </head>. Elle contient des informations qu'un navigateur n'affichera généralement pas dans son espace d'affichage mais qui pourront être utilisées à des fins diverses. • Le titre est défini à l'aide de la balise title. Exemple:<head> <title>Titre de mon document</title> </head>

  12. Corps du document • Le corps du document est la zone que l'on va trouver après l'en-tête. Il est défini par l'élément <body>. Il contient tout ce qui est visible à l’écran. • Exemple:<body> <title>Titre de mon document</title> </body>

  13. 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.

  14. Exercice Faire le laboratoire 1 partie 1

  15. 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>.

  16. Deux types de balises Les balises de type bloc (block) et en ligne (inline) Et voiciun exemple d’un type en lignevoilà

  17. 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.

  18. Boîte de type en ligne • Elles sont affichées dans une succession horizontale. • Les principaux éléments créant des boîtes en ligne sont

  19. 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.

  20. Type bloc Les principaux éléments créant des boîtes bloc sont : • l'élément div ; • 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 ; • Le texte pré-formaté pre ; • L'adresse address.

  21. Document Valide HTML • Pour qu'un document soit valide HTML, il doit avoir une déclaration de type (DOCTYPE) et un encodage (souvent en ISO) conforme aux spécifications du 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.

  22. DTD • Un DOCTYPE (Document Type Declaration) informe le validateur de votre version de (X)HTML. Elle est en première position dans chaque page web. • Les DOCTYPEs sont nécessaires pour les pages conformes aux normes.

  23. Des DOCTYPEs qui marchent HTML 4.01 Strict, Transitional, Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

  24. Exercice Faire le laboratoire 1 partie 2

  25. Les images • Toute utilisation d’image passe par l’emploi de la balise img. • Attributs: src, width, height, border, align, vspace, hspace, alt, style • Align permet de mettre l’image au coeur d’un texte. Valeur: left, right, middle etc. Ex: <img src=“roger.gif” width=“300” height=“100”>

  26. Les tables (tableaux) • Le modèle de la table de HTML permet aux auteurs d'arranger des données (texte, texte préformaté, images, liens, formulaires, champs de formulaires, autres tables, etc.) en rangées et colonnes de cellules. • On peut regrouper les rangées de la table dans des sections d'en-tête, de pied et de corps (via les éléments THEAD, TFOOT et TBODY, respectivement) • Pour l'impression d'une longue table, les informations d'en-tête et de pied peuvent être répétées sur chacune des pages qui contiennent les données de la table.

  27. Les balises des tables • Un minimum de trois balises • <table> Définit la table. Attributs: width, height, border, align (déprécié), cellspacing, style • <tr> (lignes) • <td> (cellule, colonne) attributs: colspan, rowspan

  28. 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. • Ces éléments n’affecteront pas visuellement le tableau. Par contre, ça pourra servir pour mieux déterminer l’apparence avec les CSS.

  29. 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>

  30. Tableau avancé <table border=1 width=95%>  <thead>    <tr>      <th>En-tete colonne 1</th>      <th>En-tete colonne 2</th>    </tr>  </thead>  <tfoot>    <tr>      <td>Pied-de-tableau colonne 1</td>      <td>Pied-de-tableau colonne 2</td>    </tr>  </tfoot>  <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></table>

  31. 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>

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

  33. Exercice Faire le laboratoire 2

More Related