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. 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.
Résultat dans le navigateur
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 : Structure générale d’un document HTML Informations sur la langue Marquage sémantique Listes Tables Hyperliens Inclusion d’images, d’applets et d’objets divers Éléments de regroupement Style de la présentation Marquage de présentation du texte Cadres Formulaire pour l’insertion interactive de données Scripts
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
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>
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>
Résultat
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écise l’attribut.
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
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>
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>
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.
Exercice Faire le laboratoire 1 partie 1
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>.
Deux types de balises Les balises de type bloc (block) et en ligne (inline) Et voici un exemple d’un type en ligne voilà Type bloc
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.
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 Le format de texte <font> L'élément <span> Le lien <a> L'image <img> Les emphases <em> et <strong> Le gras <b> et <strong> L’italique <i> ou <em>
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.
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.
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.
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.
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">
Exercice Faire le laboratoire 1 partie 2
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”>
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.
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
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.
Tableau simple <table> <tr> <td>Colonne 1 ligne 1</td> <td>Colonne 2 ligne 1</td> <td>Colonne 3 ligne 1</td> </tr> <td>Colonne 1 ligne 2</td> <td></td> <td>Colonne 1 ligne 3</td> </table>
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>
Tableau plus complexe <table border="1"> <tr> <td colspan="2">Titre</td> </tr> <td bgcolor="grey">Cellule de gauche</td> <td>Cellule de droite</td> </table>
Exemples de sites web cihw.org ckrl.qc.ca wikipedia.com
Exercice Faire le laboratoire 2