Remerciez-le!

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

MODULE: SITES WEB STATIQUES Formateur: Adnan ET-TAYEB Partie I: langage HTML 5

MODULE: SITES WEB STATIQUES Formateur: Adnan ET-TAYEB Partie I: langage HTML 5 CFP Agadir Adnan.et-tayeb@ofppt.ma Introduction Le langage HTML XHTML HTML5 Structure d’une page crée en HTML5 Les formulaires Autres éléments Sommaire 2 Introduction Le Web: Le client demande un fichier, le serveur lui donne le fichier tel qu'il est stocké: processus statique HTML, CSS, Javascript … Le serveur peut aussi générer un fichier en fonction de la demande du client: processus dynamique Asp.net (ou php …) Utilisation d’une base de données Pour lire les pages web on utilise les versions les plus récentes des navigateurs pour avoir une meilleur compatibilité. 3 Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 HTML Le langage HTML : HyperText Markup Language A été inventé en 1991, Permet de créer des sites web statiques, Gère et organise le contenu des page web, La spécification Html4 est publiée en décembre 1997 La spécification xhtml 1 (publié en 2000) est une reformulation du html 4 La dernière version de ce langage est HTML5. 4 Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 HTML Balises: Un fichier HTML doit comporter au minimum ces 4 balises: <html> .. </html> Délimite le début et la fin du document <head> . . </head> Entête du document <title> . .</title> Titre du document <body> . . </body>Corps du document 5 Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 HTML Autres Balises: <ul> . . </ul> Liste non triée, liste à puces <ol> . . </ol> Liste triée, liste à numéros <li> . . </li> Elément de la liste <B>..</B> gras <I> .. </I> italique <U> .. </U> souligné <img> . . </img> Insère une image <a> . . </a> lien <table> . . </table> tableau <tr> . . </tr> ligne d'un tableau <td> . . </td> cellule d'un tableau 6 Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 7 <p> Paragraphe </p> <br /> Sauter une ligne <h1>titre très important </h1> <h2> titre important</h2> <h3> sous titre</h3> <h4> titre moins important</h4> <h5> titre encore moins important</h5> <h6> titre pas important <h6> <em> texte en italique</em> <strong>texte important</strong> <mark> texte pertinent (n’est pas, forcément, important) </mark> HTML - Mise en forme du texte Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 8 <strong>Liste non ordonnée des langues</strong> <ul> <li>Arabe</li> <li>Français</li> <li>Anglais</li> </ul> <strong>Liste ordonnée des langages de programmation</strong> <ol> <li>C</li> <li>C++</li> <li>C#</li> </ol> HTML - Les listes Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 9 <strong>Liste non ordonnée des langues</strong> <ul> <li>Arabe</li> <li>Français</li> <li>Anglais</li> </ul> O HTML - Les listes Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 10 <a href ="http :// www.site.com">lien vers www.site.com </a> <a href ="page2.html">lien sur une page située dans le même dossier</a> <a href =" nom_sous_dossier/page.html "> lien sur une page située dans le sous dossier </a> <a href =" ../page.html"> lien sur une page située dans le dossier parent </a> <a href ="#introduction">Aller vers l' introduction </a> HTML - Les liens absolus et relatifs Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 11 <a href ="langage_html.html#introduction" title ="cours HTML">Aller vers l' introduction au langage HTML </a> L’attribut : title ="cours HTML" permet d’afficher une infobulle au survol du lien. Cette infobulle contient l’information : "cours HTML" <a href =" http :// www.site.com" target =" _blank “>lien qui ouvre le site www.site.com dans une nouvelle fenetre</a> <a href =" mailto : tec.dev.com@gmail.com">Envoyez - moi un email !</a> <a href =" cours. zip">Télécharger le cours</a> HTML - Les liens absolus et relatifs Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 12 <table> <!– tableau de 2 lignes et 3 colonnes --> <tr> <!– première ligne --> <td>Cellule 11</td> <!– première cellule --> <td>Cellule 12</td> <!– deuxième cellule --> <td>Cellule 13</td> <!– troisième cellule --> </tr> <tr> <!– deuxième ligne --> <td>Cellule 21</td> <td>Cellule 22</td> <td>Cellule 23</td> </tr> </table> Insérer un tableau Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 13 <table>  <tr>  <td colspan="2" >Cellules 11 et 12 fusionnées</td>  <td rowspan ="2" >Cellule 13 et 23 fusionnées</td>  </tr> <tr> <!– deuxième ligne --> <td>Cellule 21</td> <td>Cellule 22</td> </tr> </table> Insérer un tableau Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 XHTML Différence entre HTML 4 et XHTML: XHTML 1.0 (Extensible HyperText Markup Language ) est le successeur de HTML c’est une transposition en syntaxe XML de HTML 4. La différence se joue donc uniquement sur la syntaxe, qui est plus rigoureuse en XML (et donc en XHTML 1.0) qu'en HTML 4. Aucune fonctionnalité n’a été ajoutée ni retirée. XHTML 1.0 est devenu une recommandation du W3C en 2000 14 Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 XHTML En XHTML: Toute balise ouvrante doit être fermée, et les balises dites «vides» sont écrites avec une barre oblique finale (exemple: <br />). Les noms des balises et des attributs sont écrits en minuscules. Les valeurs des attributs sont encadrés par des 'quotes' (apostrophes droites) ou des "double quotes" (guillemets droits). Chaque attribut doit avoir une valeur (pas d'attribut vide comme checked, qui doit être écrit checked="checked"). Les éléments HTML doivent être correctement imbriqués (<strong><span>contenu</span></strong> et pas <strong><span>contenu</strong></span>). 15 Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 XHTML Exemple en XHTML 1.0: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exemple XHTML 1.0</title> </head> <body> <ul> <li>Tous les éléments doivent être explicitement balisés.</li> <li>Les balises fermantes ne sont obligatoires.</li> <li>Les noms d'éléments et d'attributs <em class="important">doivent</em> être en minuscules.</li> <li>Tous les attributs doivent avoir une valeur explicite <input type="checkbox" checked="checked" value="..." />.</li> <li>Les guillemets sont <em class="important">toujours</em> obligatoires autour des valeurs d'attribut.</li> <li>Les éléments vides doivent être fermés <img src="i.png" alt="i"/>.</li> </ul></body></html> 16 Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 XHTML <DOCTYPE… : C’est la ligne de déclaration du type de document, qui indique au navigateur: Dans quel type de HTML la page a été écrite (identificateur de la version) . Le document spécifiant les propriétés de chaque élément, balises et attributs, de ce type de HTML (l'URL de la ‘document type declaration’ (DTD)) Ces doctypes servent avant tout à faire passer nos pages au validateur du consortium W3C afin de vérifier qu'on n'a pas fait d'erreur sur la syntaxe du HTML 17 Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 XHTML Déclaration de Type de Documents en XHTML : XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 18 Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 HTML 5 En 2009 le W3C a officiellement annoncé l'abandon du développement du XHTML 2 afin de se consacrer entièrement à son nouveau successeur : le HTML 5. Ainsi: on peut de nouveau employer minuscule et majuscules dans l’écriture des balises.  le Code est plus simple. Des éléments Media plus riches API de géolocalisation HTML5 rendent l'emplacement, directement disponible pour les application basée sur un navigateur compatibleHTML5. Apparition des balises nouvelles (exemple :<canvas> qui permet de créer des objets programmés en javascript). 19 Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 HTML5 HTML5: HTML5 remplacer la technologie Flash que nous utilisons depuis des années pour tout ce qui touche à l’animation sur internet: lecteurs vidéo comme YouTube Flash est une technologie propriétaire qui appartient à Adobe, tandis que HTML5 est géré par l’organisme mondial W3C. Le W3C ou World Wide Web Consortium existe depuis 1994, c’est l’organisme international qui développe des standards pour le Web afin que les gens puissent communiquer efficacement à travers Internet, 20 Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 HTML5 Avec l'apparition du html 5, de nouvelles balises apparaitront qui n'existent pas en html 4 ni en XHTML 1: Les balises de structuration: <header></header> <section></section> <article></article> <nav> </nav> Les balises d'application web <video> (pour implémenter une vidéo), <canvas>(pour dessiner) 21 Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 HTML5 22 Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 En HTML4 on utilisent la balise div Exemple: <div id="nav"> </div> <div class="header"></div> <div id="footer"></div> Les balise: section article, nav, aside, header, footer segmentent des portions du document et ont une signification particulière pour un navigateur ou un moteur d'indexation HTML5 23 Adnan ET-TAYEB ---- ISTA AGADIR ---- 2022/2023 <header> remplace <div id="header"> <nav> <div id="menu"> L'élément aside revêt le rôle de barre latérale, l'élément section est appelé pour regrouper le contenu principal l'élément footer est destiné au pied-de- page Remarque : Ces balises ne sont reconnues par Internet Explorer que depuis sa version 9 (IE9) HTML5 Compatibilité des navigateurs avec HTML5: Le principal problème avec l'HTML5 est que seuls les navigateurs modernes le supportent. Can i use it - site qui montre la compatibilité de chaque navigateur des options du HTML5 les éléments multimédia doivent être compressé selon de multiples formats afin d'être compatible avec la plupart des navigateurs. Ainsi, on utilise mp3 pour les navigateurs Safari et Chrome et ogg pour les navigateurs Mozilla (Firefox)… 24 Adnan ET-TAYEB ---- ISTA AGADIR uploads/s1/ html-5.pdf