Langage HTML Grégory BOURGUIN
Généralités WWW (World Wide Web) : Un ensemble de serveurs d'informations reliés les uns aux autres par des liens physiques (le réseau matériel) et des liens logiques (les liens hypertextes). Ces liens hypertextes permettent de voyager d'un serveur à l'autre sur le réseau Internet. Le Web n’est qu’une partie de l’Internet. C’est le service le plus connu, mais il en existe d’autres : FTP (File Transfer Protocol), le P2P…
Généralités HTTP, HTML Le WWW relie des serveurs HTTP qui envoient des pages HTML à des postes dotés d'un navigateur HTML (HyperText Markup Language) Le langage permettant de décrire les pages Web HTTP (HyperText Transfer Protocol) Le protocole de communication entre les navigateurs et les serveurs
Généralités Qu’est-ce qu’un URL (Uniform Resource Locator) Un URL est le moyen de nommer un objet dans le monde WWW La syntaxe d'un URL est la suivante : type:serveur:port/chemin_d'acces/fichier#etiquette?parametres Le type de serveur : http : pour les URL provenant de serveurs WWW ftp : pour les fichiers à transférer …
Généralités Document HTML Un document HTML est un hypertexte décrit à l'aide du langage HTML Un hypertexte est un texte contenant des hyperliens Un hyperlien est un élément particulier sur lequel on clique pour se déplacer vers : un autre emplacement du document, un autre document sur le même site, un document sur un autre site WEB, un autre service Internet (mail, ftp… )
Généralités Le HTML est un langage de structuration de documents : insertion de textes, tableaux, listes… insertion d'images insertion de composants multimédia : son, vidéo... création d'hyperliens définition de formulaires de saisie insertion et activation d'applications interactives : applets java, flash, etc. Les éléments peuvent se succéder et s’imbriquer Définition d’une arborescence d’éléments (->DOM)
Structure Le langage HTML repose sur l’utilisation de balises pour délimiter les différents éléments d’un document Les balises ont la forme <…> et </…>, ou <…/> Ex. <title>Un titre</title> Les balises peuvent avoir des attributs qui en modifient les propriétés Ex. <img src=« photo.jpg »/> Structure de base d’un document <!doctype html> <html> <head>En-tête d'un document HTML</head> <body>Le corps du document HTML</body> </html>
Structure DOCTYPE HTML HEAD BODY est une directive SGML (Standard Generalized Markup Language) permet d'identifier un document comme étant de type HTML simplifié avec HTML 5 : <!doctype html> HTML démarre le document HTML tout le reste sera compris entre <html></html>. HEAD en-tête du document est réservée aux méta-informations (les informations relatives au document) comme son titre, … BODY corps du document
Exemple simple Fichier premiere.html : <!doctype html> <html lang=« fr »> <head> <title> Ceci est le titre de ma page</title> </head> <body> Voici ma première page Web. </body> </html>
<HEAD>…</HEAD> Dans l'en-tête, on peut trouver les commandes suivantes : title: titre du document <title>HELLO WORLD !!!</title> base : une adresse de base qui complétera tout les chemins relatifs <base href=‘http://www.univ-littoral.fr’ target=‘_blank’> link : liaison entre le document présent et une ressource extérieure <link rel=‘stylesheet’ type=‘text/css’ href=‘mystyle.css’> meta : fournir des informations sur le document Exemples de description de l’encodage des caractères : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"> <meta charset="UTF-8"> style : du style pour notre document (CSS) script : décrire ou inclure des script (JavaScript)
<BODY>…</BODY> Contient les balises qui structurent le document (cf. la suite du cours !) Possède divers attributs dont ceux qui décrivent les couleur et font d’écran Mettre une couleur : <body bgcolor=« blue »> Appliquer un motif (image) : <body background=« /image1.jpg »> Aujourd’hui on utilisera plutôt des feuilles de styles !
Balises <p>…</p> <br> <hr> Définit un paragraphe Ex. <p align="center"> Un paragraphe. </p> Contient des éléments de phrasé : Du texte, <em>, <strong>, <abbr>, <ins>, <del>, <q>, … <br> Signifie break Permet de revenir à la ligne sans définir de nouveau paragraphe Pas de balise fermante !!! <hr> Horizontal Rule Permet de tracer une ligne horizontale Marque un changement de contenu Pas de balise fermante
Balises Donner de l’importance : <strong> … </strong> Ecrire en gras : <b>…</b> Emphase : <em> … </em> Italique: <i> … </i> Souligné: <u> … </u> Texte barré: <s> … </s> Un texte surligné : <mark>…</mark> Petits caractères d’imprimerie : <small>…</small> Une définition : <dfn>…</dfn> Une abréviation : <abbr title=«…»>…</abbr> Un fragment de code : <code>…</code> Une entrée au clavier : <kbd>…</kbd> Un exemple ou échantillon : <samp>…</samp> Indice : <sub> … </sub> / Exposant : <sup> … </sup> Texte en style machine à écrire : <tt> … </tt> Faire une citation : <blockquote> … </blockquote> Faire une citation entre guillemets: <q> … </q> Donner le titre d’une œuvre : <cite> … </cite> Ecrire à l’envers : <bdo dir=rtl>…</bdo> …
Balises - Listes Les listes : <ol>…</ol> Il y a trois type de liste en HTML Liste ordonnée : <ol>…</ol> Liste non ordonnée : <ul>…</ul> Liste de définition : <dl>…</dl> <ol>…</ol> Liste ordonnée Prend les attributs suivants : type : préciser le type de liste (A, a, 1, i, I) <ol type="A"> start : démarrer à une valeur précise <ol start=2000> reversed <ol> <li> item 1 </li> <li> item 2 </li> <li> item 3 </li> <li> item 4 </li> </ol>
Balises - Listes <ul>…</ul> <dl>…</dl> Liste non ordonnée Attribut : type = circle | square | disc <dl>…</dl> Liste de définition <ul> <li> item 1 </li> <li> item 2 </li> <li> item 3 </li> <li> item 4 </li> </ul> <dl> <dt>smartphone</dt> <dd>Téléphone intelligent</dd> <dt>laptop</dt> <dd>Ordinateur portable</dd> </dl>
Balises - Images <img…/> Insérer une image Prend les attributs : src : fichier source <IMG src=‘image1.jpg’/> alt : proposer une alternative à l’image title : attribuer un titre a l’image (lors du survol avec la souris) … à remplacer par du CSS : align : [top|bottom|middle|left|right] pour aligner l’image valign : [top|middle|bottom] pour aligner l’image verticalement border : entourer une image avec une bordure (ex. border=1px) width : spécifier la largeur de l’image (ex. width=150px) height : spécifier la hauteur de l’image Définition de zone de liens cliquables : usemap… (cf. plus loin)
Balises <figure> utilisée pour regrouper des éléments tels que des images ou des vidéos avec leur légende <img src=‘images/chaton.jpg’ title=‘oh le beau chaton’/> <figcaption>Un petit chat mignon tout plein</figcaption> </figure> <h1>….</h1> jusqu’à <h6>…..</h6> Titres de niveau 1 à 6 <h1> le plus grand, <h6> le plus petit <hgroup> représente l’entête d’une section <h1>Titre</h1> <h2>Sous-titre</h2> </hgroup>
Balises <time> permet d’écrire des dates et des heures La date que l’on indique dans l’attribut datetime est au format ISO 8601 <p>Rendez-vous le <time datetime="2010-10-05">5 octobre</time>.</p> <p>On se fait un ciné <time>demain</time> ?</p> <p>Dernière connexion le <time datetime="2010-02-05T10:42:00">5 février à 10:42</time></p> <canvas> permet de dessiner du bitmap en Javascript API 2D et bientôt 3D La mort de Flash ?
Balises Les commentaires: <pre>…</pre> <!-- ……. --> Permet de commenter son code HTML (non affiché par le navigateur) Il peut être mis partout dans le document Exemple : <!– ceci est un commentaire --> <pre>…</pre> Permet d’afficher un texte pré-formaté Exemple avec des tabulations : <pre> Prix HT TVA Prix TTC 100 19.6 119.6 Euros 200 39.2 239.2 Euros 300 58.8 358.8 Euros </pre>
Balises - Hyperliens <a>….</a> Permet de définir un hyperlien Exemple : <a href=‘http://www.google.fr’>Google</a> Pour utiliser un signet il faut Définir son emplacement dans la page grâce à la balise <a id=‘nom_du_signet’>Mon signet</a> On peut alors le référencer dans le lien <a href=‘#nom_du_signet’>Cliquez ici</a> Pour spécifier l’endroit ou un document pointé par un hyperlien va s’afficher, on utilise l’attribut target=_blank|_self|_parent|_top <a href=‘doc1.html’ target=‘_blank’>Cliquez ici</a>
Balises - Hyperliens Les hyperliens et mél: Les hyperliens et images: Un hyperlien peut pointer vers une adresse email Quand l’utilisateur clique sur ce lien, le navigateur ouvre le client mail installé par défaut et rempli les champs automatiquement <a href=‘mailto:darthvador@empire.com’> Même pas peur</a> <a href =‘mailto:lorddooku@sith.edu?cc=emperor@empire.com&subject=h euu&body=juste pour dire que rien du tout’>Mail à l’admin</a> Les hyperliens et images: <a href=‘http://www.google.fr’><img src=‘logo-google.gif’/></a>
Les caractères spéciaux Pas de problème en HTML 5 grâce à : <meta charset="UTF-8"> Avant HTML 5, si respect du codage des caractères ASCII 7 bits : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> les caractères spéciaux ne sont alors pas autorisés Un caractère accentué doit alors être décrit par une combinaison précédée du caractère « & » et terminée par « ; » < < > > & & " «
Les caractères spéciaux Les caractères accentués é é É É è è ê ê à à ï ï ï ç ç ñ ñ Æ Æ …
Conteneurs Les conteneurs : <div>….</div> Est un conteneur qui peut inclure tout les tags html Il sert a structurer le document en plusieurs sections Applique un saut à la ligne Prend les attributs suivants : id, name, class, width, height, style … Exemple: <div>Un texte en <b>gras</b></div> <span>….</span> Même chose que <div>, sans le saut à la ligne Exemple: <span>Un texte en <b>gras</b></span>
Sections Les sections correspondent à des zones possédant une valeur sémantique Les différentes sections <section> <article> <nav> <aside> <header> <footer>
Sections <section> est un groupage thématique du contenu C’est un <div> qui a du sens <section id="articles">…</section> <section id="twitter">…</section> NB : Il ne faut pas remplacer tous les <div> par des <section> ! A n’utiliser que si le bloc possède une valeur sémantique
Sections <header> <footer> permet d’introduire une section et de fournir une aide à la navigation <body> <header id="header">…</header> <section id="news"> <header>…</header> <footer> donne des informations sur la section … <footer>…</footer> </section>
Sections <nav> Une section permettant de naviguer <h1>Navigation</h1> <ul> <li><a href="/">Accueil</a></li> <li><a href="/actualites/">Actualités</a></li> </ul> </nav>
Sections <article> <aside> Une section représentant un contenu indépendant du reste du document <section id="articles"> <h1>Articles</h1> <article>Article 1… </article> <article>Article 2… </article> <aside> Destiné à accueillir des informations connexes (à la section)
Sections : un exemple <body> <header> header <nav>nav</nav> </header> <section> section <article>article</article> </section> <aside> aside </aside> <footer> footer </footer> </body>
Les tableaux <table>…</table> Contient des données tabulaires On y trouve les balises : <caption> : titre <colgroup> : définition d’un groupe de colonnes <thead> : en-tête du tableau <tfoot> : pied du tableau <tbody> : corps du tableau <tr> : lignes du tableau contenant <th> ou <td>
Les tableaux Un exemple minimal <table > <tr> <td>Nom</td> <td>Bourguin</td> </tr> <td>Prénom</td> <td>Grégory</td> </table>
Les tableaux Un exemple plus complexe <table width=200px> <caption>Notes de la classe</caption> <thead> <tr> <th>Nom</th><th>Note</th> </tr> </thead> <tfoot> <td>Moyenne</td><td>10</td> </tfoot> <tbody> <td>John</td><td>13</td> </tr><tr> <td>Bill</td><td>7</td> </tbody> </table>
Les tableaux de cellules colspan (attribut) indique le nombre de colonnes occupées par la cellule applicable à <td> et <th> rowspan (attribut) indique le nombre de lignes occupées par la cellule Exemple : <table width="150px" border="1px"> <tr> <th colspan="2">Liste des élèves</th> </tr> <td>John</td> <td>Bill</td> </table>
Les tableaux <colgroup> Utilisée pour définir les propriétés communes à un groupe de colonnes Possède l’attribut : span spécifie le nombre de colonnes affectées Peut contenir des balises <col> Pour définir les propriétés individuelles de chaque colonne Exemple : <table border="1px"> <colgroup span="2" style="background: lightgray"> <col style="width: 100px;background: red"> <col style="width: 50px"> </colgroup> <tr> <td>Cellule 1</td><td>Cellule 2</td><td>Cellule 3</td> </tr> </table>
Images Réactives Principe On calque sur l’image des zones correspondant à plusieurs hyperliens Pour définir une zone cliquable, il faut fixer : sa forme : rect, circle, polygon ses coordonnées : rectangle (coins supérieur gauche et inférieur droit) cercle (centre et rayon) polygone (coordonnées des points ; 3 minimum) le lien associé à la zone
Images Réactives La balise <map> : Exemple : <map name="unNom"> <area shape="uneForme" coords="x,y,... » href="destination"> … </map> <img src="uneImage" usemap="#unNom"> Exemple : <map name="un_Nom_de_carte"> <area shape="rect" coords="0,0,53,59" href="Test1.html"> <area shape="rect" coords="53,0,120,59" href="Test2.html"> <area shape="rect" coords="0,59,53,101" href="Test3.html"> <area shape="rect" coords="53,59,120,101" href="Test4.html"> <img src="uneImage" usemap="#un_Nom_de_carte ">
Inline Frame <iframe… Permet d’afficher une autre page web dans le document …une fenêtre dans le document -> à utiliser avec précaution Attributs principaux : scr : URL du document à afficher width et/ou height : % ou pixels en largeur et/ou hauteur name : nom (unique!) de l’iframe à utiliser dans l’attribut target d’un lien seamless : affichage de l’iframe sans bordures sandbox : restrictions de sécurité (pas encore partout !) si vide : toutes les restriction son activées allow-forms : ok pour formulaires allow-same-origin : contenu traité comme venant de la même origine allows-scripts : ok pour les scripts (hormis pop-ups) allow-top-navigation : ok pour accéder au niveau supérieur
Inline Frame Un exemple <h1>Une iFrame : </h1> Liens à afficher dans l'iframe : <nav> <a href="10 sections.html" target="MonIframe">Paroles de Let's bang</a> | <a href="http://tv.shakaponk.com" target="MonIframe">tv.shakaponk.com</a> </nav> <br> <iframe name="MonIframe" width="800px" height="600px" src="10 sections.html"/>
Multimédia Pour l’insertion spécifique de données multimédia, voir les balises : <embed>, <object>, <video>, <audio>