Remerciez-le!

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

PROGRAMMATION WEB SURVOL DU LANGAGE HTML 1 Ecole Supérieure Polytechnique Forma

PROGRAMMATION WEB SURVOL DU LANGAGE HTML 1 Ecole Supérieure Polytechnique Formateur M. Mouhamed DIOP mouhamed.diop@esp.sn Université Cheikh Anta Diop Ecole Supérieure Polytechnique Département Génie Informatique NIVEAU LICENCE Contenu Structure d’un document HTML Organisation du texte Les liens Les listes Les images Les tableaux Les formulaires 2 HTML Le HTML (HyperText Markup Language) C’est un format de présentation de données Il permet de créer des pages web pouvant être lues dans des navigateurs C'est un langage de description de données Le HTML n’est pas un langage de programmation 3 HTML ET CSS le W3C préconise de maintenir une séparation entre la structure et la présentation d’un document Séparation du fond et de la forme Il adjoint au HTML la notion de feuille de style à travers le langage CSS HTML décrit la structure du document, CSS se charge de la présentation. Un même document HTML peut être présenté de différentes façons à l'aide de différentes feuilles de style. 4 XHTML XHTML : eXtensible HyperText Markup Language C’est une variante du langage HTML et lui ressemble beaucoup XHTML 1 est apparu suite à la version 4 du langage HTML (HTML 4) Fonctionne sur des règles plus strictes que le HTML C’est une version de HTML conforme au standard XML Différences entre HTML et XHTML La différence se joue principalement sur la syntaxe qui est plus rigoureuse Les différences de syntaxe sont minimes facilité de passer de l’un à l’autre Dans ce cours, nous ferons du XHTML (les différences seront discutées au fur et à mesure qu’on avance dans le cours) 5 Document HTML Un document (ou page) HTML est constitué de : Textes simples Pour écrire « Bonjour » dans une page, il suffit d’écrire ce même texte dans le code de la page Balises Les balises peuvent éventuellement avoir des attributs 6 Les Balises Les balises HTML sont les éléments de base du codage HTML d’une page web Une balise est délimitée par un « < » et un « > » respectivement pour ouvrir et fermer la balise Elles sont invisibles pour le visiteur Ce sont des marqueurs donnant des directives au navigateur (paragraphe, saut de ligne, etc.) Le visiteur peut les voir en visualisant le code source de la page Elles disposent d’une balise ouvrante et d’une balise fermante A l’exception des balises « orphelines » Les balises orphelines sont fermées juste après leur ouverture ( Ex : <br /> ) Les balises orphelines n’ont pas de contenu 7 Les Balises 8 Structure de base d’un document XHTML 9 Le doctype Définit le langage utilisé par la page ainsi que le jeu de règles voulu Elle précise la syntaxe (HTML ou XHTML) et le numéro de version utilisée Il ne s’agit pas de « parcoeuriser » la chaine, mais de comprendre le pourquoi de sa présence Peut être utilisé pour : Dire qu'un document contient du HTML « valide » Détecter les erreurs de balisage 10 XHTML : le document Un document XHTML se délimite par les balises <html> et </html>. Exemple : … <html> … </html> 11 XHTML : les entêtes Les en-têtes sont délimitées par les balises <head> et </head> elles ne sont pas directement destinées à l’affichage Le contenu de l'élément « title » est le titre du document il est affiché dans la barre de titre du navigateur Il est exploité par les moteurs de recherche L'élément « meta » permet de donner des informations supplémentaires sur le document 12 XHTML : le corps Les balises <body> et </body> délimitent le corps de la page. Exemple : … <body> … </body> … 13 XHTML : les commentaires Il est souvent utile de commenter son code source afin d’en faciliter la relecture. Les commentaires ne sont pas interprétés par le navigateur ils sont invisibles au visiteur Exemple : 14 XHTML : un exemple de page 15 Organiser son texte : titre Il existe six niveaux de titres, par ordre d'importance décroissante h1 à h6 <h1> </h1> : En général, on s'en sert pour afficher le titre de la page <h2> </h2> : utilisé souvent pour donner un titre aux paragraphes <h3> </h3> : utilisé souvent pour donner un "sous-titre" aux paragraphes. <h4> </h4> : peu utilisé <h5> </h5> : peu utilisé <h6> </h6> : peu utilisé 16 Organiser son texte : titre 17 Organiser son texte : les paragraphes En XHTML, il est possible de segmenter son texte en paragraphes Chaque paragraphe se trouve entre les balises <p> et </p> L'élément <br /> permet d'insérer un saut de ligne à l'intérieur d'un paragraphe Avant de l'utiliser, il faut se demander s'il n'y a pas lieu de scinder ce dernier en deux éléments p distincts 18 Organiser son texte : les paragraphes 19 Organiser son texte : mise en forme Mettre en gras : <b>texte</b> Mettre en italique : <i>texte</i> Souligner un texte: <u>texte</u> Mettre en exposant : <sup>texte</sup> Mettre en indice : <sub>texte</sub> 20 Les liens Un lien hypertexte est un élément HTML permettant d'envoyer le visiteur vers une nouvelle page (lien externe) ou vers une autre zone de la page courante (lien interne). Un lien sera représenté dans le code par la balise <a>. L'adresse de destination doit se trouver dans l'attribut href Exemple : <a href="chemin/du/fichier/destination.html">Texte du lien</a> Il faut indiquer le chemin pour accéder à la page de destination. 21 Les liens Si les 2 pages sont sur le même répertoire, on indique juste le nom de la page. <a href="destination.html">Texte du lien</a> Si la page de destination se trouve par exemple dans un sous dossier. <a href="sous_dossier/destination.html">Texte du lien</a> Lien vers un site externe, on indique l’url complet du site <a href="http://www.google.sn">lien vers google</a> 22 Les liens L’attribut « title » affiche une bulle d’aide lorsqu’on pointe la souris sur le lien <a href="http://www.google.sn" target='_blank' title='lien vers google sur une nouvelle page' >lien vers google</a> <a href="http://www.google.sn" target='_self ' title= "lien vers google sur la même page" >lien vers google</a> Il est possible d’utiliser les liens pour envoyer un email. <a href="mailto:webmaster@monsite.sn">Ecrivez-moi</a> 23 Les liens Les ancres permettent de naviguer à l'intérieur d'une même page. Pour faire une ancre, il faut utiliser le signe dièse (#) suivi d'un mot-clef <a href="#motClef">Texte de mon ancre</a> ... <h2 id="motClef">Texte vers lequel l'ancre est renvoyée</h2> 24 Les liens L’attribut target permet de spécifier la manière dont la page de destination va s’ouvrir _ self : remplace la page courante par la nouvelle page _blank : affiche la page de destination dans une nouvelle page Exemples <a href="http://www.google.sn" target='_blank'>lien vers google</a>. <a href="http://www.google.sn" target='_self'>lien vers google</a>. 25 Les listes Listes non ordonnées <UL>Eléments de la liste</UL> Attribut optionnel TYPE="DISC", "SQUARE" ou "CIRCLE Listes ordonnées <OL>Eléments de la liste</OL> Attribut optionnel TYPE="1" (décimal), "a" (minuscule), "A"(majuscule), "i" ou "I" (romain) Eléments de la liste : <li>…</li> 26 Les listes 27 Les images Pour afficher une image, on utilise la balise <img>. L'attribut « src » permet de renseigner le chemin de l'image L’attribut « alt » permet de renseigner le texte à afficher si l’image n’est pas chargée Est aussi exploité par les moteurs de recherches L’attribut « height » permet de définir la hauteur de l’image L’attribut « width » permet de définir la largeur de l’image <img src=« chemin/de/l/image" alt="texte si l’image ne s’est pas chargée" /> 28 Les tableaux 29 FIN MERCI DE VOTRE ATTENTION 30 uploads/s1/ html 5 .pdf