Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

HTML & CSS Karima Boudaoud IUT- R&T Plan Karima Boudaoud IUT R&T - Sophia Antip

HTML & CSS Karima Boudaoud IUT- R&T Plan Karima Boudaoud IUT R&T - Sophia Antipolis 3 Plan ● Qu’est ce que le W3C ? ● Qu’est ce que HTML & CSS? ● Références bibliographiques ● Introduction à HTML5 ● Exemple d’une page Web ● Elements structurant un document ● Elements multimédias ● Formulaires Karima Boudaoud IUT R&T - Sophia Antipolis 4 Qu’est ce que le W3C ❍ W3C ● World Wide Web Consortium: www.w3.org/ ● Organisme de normalisation, fondé en octobre 1994, qui définit les standards pour le Web tels que: HTML, XML, RDF, CSS, SOAP,… ● Fondé par Tim Berners Lee, l’inventeur du Web, au MIT (Massachusetts Institute of Technology) ● 4 Sites : USA (MIT), Europe (INRIA puis ERCIM), Asie (Université de Keio au Japon et Université de Beihang à Pekin) ● Plusieurs bureaux régionaux dans le monde: diffusion des spécifications localement Karima Boudaoud IUT R&T - Sophia Antipolis 5 HTML & CSS ❍ HTML (Hypertext Markup Language) ● Créé par Tim Berners-Lee en 1991 ● Définit le contenu: crée et organise le contenu d’une page Web ● Gère le texte, les images, les liens vers d’autres pages,… ❍ CSS (Cascading Style Sheet) ● Créé par Bert Boss et Hakon Lie en 1996 ● Définit la forme: gère la mise en forme (i.e. l’apparence d’une page Web) ● Gère le positionnement, la couleur, la taille du texte,… Karima Boudaoud IUT R&T - Sophia Antipolis 6 Références bibliographiques ● Cours de Philippe Renevier, MCF à l’UNS ● Michel Buffa, MCF à l’EPU ● Site du zéro tutoriel de Mathieu Nebra ● Tutoriel du site HTML Dog u http://www.htmldog.com/guides/html/ ● W3 schools qui n’a aucun lien avec W3C u W3 Schoolshttp://www.w3schools.com/ HTML5 Karima Boudaoud IUT- R&T Karima Boudaoud IUT R&T - Sophia Antipolis 8 Introduction à HTML5 (1/2) ❍ Langage à balises ● Une balise est une instruction de mise en forme ● Une balise permet de structurer le contenu d’une page Web ❍ Navigateur ● Les navigateurs recherchent les balises et les interprètent pour afficher une page Web ● <NOM_DE_BALISE> Text </NOM_DE_BALISE> ❍ URL ● Format de nommage universel pour désigner une ressource sur Internet ● Un document HTML peut être accédé grâce à une URL. ❍ Validation ● Un document HTML doit toujours être validé : http://validator.w3.org Karima Boudaoud IUT R&T - Sophia Antipolis 9 Introduction à HTML5 (2/2) ❍ Balises en paires ● balise d’ouverture + texte + balise de fermeture ● Exemple: <title>Ceci est le titre de ma 1ère page Web</title> ❍ Balises orphelines ● Ne contiennent pas de texte, n’ont pas de balise de fermeture ● Utilisées pour insérer un élément à un endroit précis de la page ● Exemple: <br />, <img /> ❍ Balises avec attributs ● Une balise peut avoir des attributs avec ou sans valeurs ● Exemple: ● <img src="images/blocnotes.png" alt="Bloc-Notes" /> ● <input type= "checkbox" checked/> Karima Boudaoud R&T Sophia Antipolis 10 Exemple d’une page Web ❍ Code minimum <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ceci est le titre de ma 1ère page Web</title> </head> <body> Ceci est le contenu de ma 1ère page Web </body> </html> Eléments structurant un document Karima Boudaoud IUT R&T - Sophia Antipolis 12 Balises Structurelles (1/3) ❍ Balises de base ● <!DOCTYPE > : type du document. ● <!DOCTYPE html > : Document de type HTML5 ● <html></html>: balise principale englobant le contenu de la page Web ● <head></head>: en-tête du document ● <meta />: permet de rajouter d’autres informations concernant le document. Balise non obligatoire. Cette balise peut avoir plusieurs attributs tels que : ● charset : type d’encodage de la page, important pour caractères spéciaux (ex. <meta charset="utf-8" />) ● name : a généralement la valeur author, description ou keywords. S’il existe il est suivi de l’attribut content. ● content : bref description de ce qui est indiqué dans name. ● <title></title>: titre de la page Web ● <body></body>: contenu principal de la page Web Karima Boudaoud IUT R&T - Sophia Antipolis 13 Balises Structurelles (2/3) ❍ Cas particulier des commentaires ● <!– Ceci est un commentaire --> ❍ Caractères spéciaux ● < , > , & et " : < , > , & , " ● Espace : ● Caractères accentués : é(é), è(è), ê(ê), à(à), … Karima Boudaoud IUT R&T - Sophia Antipolis 14 Balises Structurelles (3/3) ❍ Balises de regroupement sans sémantique ● <div></div> : bloc de texte – généralement utilisé pour découper un document en bloc. On verra son utilité plus tard avec CSS. ● <span></span> : bloc plus petit - généralement utilisé pour découper un paragraphe en sous-bloc. ❍ Balises de regroupement avec sémantique ● <article> : pour indiquer que c’est l’article d’un blog ou d’un journal ● <section> : section de contenu – utilisé si l’on a plusieurs sections d’un document. Exemple plusieurs chapitres ● <nav> : liens de navigation ● <header> : en-tête de la page ● <footer> : pied de page ● <aside> : pour l’annexe d’un article ● <details> : pour donner plus de détails ● <summary> : utilisé pour écrire le résumé de l’article Karima Boudaoud IUT R&T - Sophia Antipolis 15 Balises Textuelles (1/2) ❍ Balises titres/sous-titres ● <hn></hn> : affiche un en-tête de niveau n et saute une ligne ● <h1>, <h2>, <h3>, <h4>, <h5>, <h6> : h1 étant le niveau le titre le plus haut et h6 le sous-titre le plus bas ❍ Balises pour un bloc de texte ● <p></p> : paragraphe ● <br> ou <br /> : saut de ligne ● <pre></pre> : texte pré-formaté ● <code></code> : portion de code ● <dfn></dfn> : définition ● <samp></samp> :exemple Karima Boudaoud IUT R&T - Sophia Antipolis 16 Balises Textuelles (2/2) ❍ Balises pour mise en valeur ● <em></em> : mettre texte italique ● <strong></strong> : mettre texte gras ● <mark></mark>: surligner texte ❍ Autres balises ● <abbr></abbr> : abbréviation ● <address></address> : contenu de type adresse email ● <blockquote></blockquote>: référence à un texte écrit dans un autre document ● <cite></cite> : citation Karima Boudaoud IUT R&T - Sophia Antipolis 17 Balises Listes (1/3) ❍ Liste non ordonnée ● <ul></ul> : indique que c’est une liste non ordonnée ● <li></li>: définit les différents élements de la liste ● Exemple: <ul> <li>1er élement de la liste</li> <li>2nd élement de la liste</li> </ul> ❍ Liste ordonnée ● <ol></ol> : indique que c’est une liste ordonnée ● <li></li>: définit les différents élements de la liste ● Exemple: <ol> <li>1er élement de la liste</li> <li>2nd élement de la liste</li> </ol> Karima Boudaoud IUT R&T - Sophia Antipolis 18 Balises Listes (2/3) ❍ Liste de définitions ● <dl></dl> : indique que c’est une liste de définitions ● <dt></dt>: indique le terme à définir ● <dd></dd> : donne la définition du terme ● Exemple: <dl> <dt>1er terme à définir</dt> <dd>définition du 1er terme</dd> <dt>2ème terme à définir</dt> <dd>définition du 2ème terme</dd> </dl> Karima Boudaoud IUT R&T - Sophia Antipolis 19 Balises Listes (3/3) ❍ Listes imbriquées ● Exemple: <ol> <li>1er élement de la liste <ul> <li>1er élement de la liste</li> <li>2nd élement de la liste</li> </ul> </li> <li>2nd élement de la liste</li> </ol> Karima Boudaoud IUT R&T - Sophia Antipolis 20 Balises Hypertext ❍ Lien vers une page Web ● Lien vers une autre page Web locale ● <a href="mon_Autre_Page">une autre page de mon site</a> ● Lien vers une autre page Web ● <a href="http://www.unice.fr">Site de l’université de Nice Sophia</a> ❍ Créer un ancre pour référencer une partie dans une page ● Création d’un ancre pour donner un identifiant à la partie à référencer ● <p id="nom de l’ancre">Titre de mon de ancre</p> ● La balise <p>peut être remplacée par une balise titre comme <h1>ou <h2>,… ❍ Lien vers une partie dans une page Web ● Lien vers une partie de la page Web courante u <a href="#nom de l’ancre">Titre</a> ● Lien vers une partie d’une page Web locale u <a href="nom_Fichier_Local#nom de l’ancre">Titre</a> ● Lien vers une partie dans une autre page Web u <a href="http=//courses/cours.html#nom de l’ancre">Titre</a> Karima Boudaoud IUT R&T - Sophia Antipolis 21 Balises Tables (1/4) ❍ Tableau simple ● Tableau se construit ligne par ligne ● Chaque ligne doit contenir la liste des cellules ● <table></table> : indique que ce qui suit est un tableau ● <caption></caption>: : indique titre du tableau ● <tr></tr> : indique que c’est une ligne du tableau ● <th></th> : indique que c’est l’en-tête du tableau (1ère ligne du tableau) ● <td></td> : indique que c’est une cellule/case du tableau ❍ Remarque ● Pour ajouter un case/cellule vide, utiliser : Karima Boudaoud IUT R&T - Sophia Antipolis 22 Balises Tables (2/4) ❍ Tableau simple ● Exemple: <table> <caption>Liste des enseignants du département R&T</caption> <tr> <th>Nom Enseignant</th> <th>Matière enseignée</th> </tr> <tr> <td>Chagnon</td> <td>Anglais</td> </tr> <tr> <td>Bouché</td> <td>Communication</td> </tr> </table> Karima Boudaoud IUT R&T - Sophia Antipolis 23 Balises Tables (3/4) ❍ Tableau structuré ● Concerne les tableaux complexes ● Division en 3 parties: en-tête, corps et pied du tableau ● <thead></thead> : indique que c’est l’en-tête du tableau ● <tbody></tbody>: : indique uploads/s3/ module-1106-cours-html5-2018-2019.pdf