13/11/2011 COURS PROGRAMMATION WEB. HTML : HyperText Markup Language: est un langage de balisage de description du contenu de pages Web.

Transcription

1 COURS PROGRAMMATION WEB BASES DU HTML Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : Année Universitaire : 2011/2012 Le HTML : Définition de l acronyme HTML : HyperText Markup Language: est un langage de balisage de description du contenu de pages Web. Hypertext réfère au fait que les pages contiennent bien plus que du texte seulement: Peut contenir des images, des objets multimédia, des liens référant à d autres partie de la même page/d autres pages. Markup réfère ici que, autre le texte à afficher, une page comporte des balises (tags) pour définir la structure et le contenu d'une page. 2 VERSIONS DU HTML (QUELQUES DATES) HTML 1.0 (Berners-Lee, 1989): très basique, intégration limitée d objet multimédia. HTML 2.0 (IETF, 1994): ont essayé de standardiser cette version, mais plus tardvers , Netscape & IE ont ajoute +sieurs dispositifs divergents. HTML 3.2 (W3C, 1996): ont essayé d unifier le tout en un unique standard, technologies comme Java applets & streaming video n ont pas été prise en considération. HTML 4.0 (W3C, 1997): L'utilisation de frames, des tableaux plus complexes, des améliorations sur les formulaires etc...mais surtout, cette version permet pourla premièrefois l'utilisation de feuilles de stylecss. XHTML 1.0 (W3C, 2000): HTML 4.01 modifié pour être conforme au standard XML. XHTML 2.0 (W3C, 2006): Sortie d'une version de travail de la recommandation XHTML 2.0. HTML5 (2009): Sortie d'une version de travail de la recommandation HTML

2 SYNTAXE DU LANGAGE Balises (ou "tag") conteneur de texte => attribuent une fonction spécifique au segment encadré. fonctionnent habituellement par paire (balise d'ouverture et de fermeture) entouré par "<"et">«: Ex: <head> Attributs précisent la fonction ou le mode d'application des balises. sont séparés par un espace sont mentionés uniquement dans la balise d'ouverture leur ordre n'a pas d'importance peuvent avoir une valeur (nom, unité de mesure...) inscrite entre guillemets Syntaxe <Nom de la balise de début Attribut1 = "valeur1" Attribut2 = "valeur2"... Attribut n = "valeur n"> texte mis en forme </Nom de la balise de fin> 4 HTML EST UN LANGAGE INTERPRÉTÉ Les balises sont invisibles pour l'internaute : Le navigateur va lire le document HTML et l'afficher sous forme d'une page Web. Le navigateur n'affiche pas les balises HTML mais il utilise les balises pour interpréter le contenu de la page. HTML n'est pas un langage de programmation mais de balisage qui est interprété ligne par ligne par le navigateur pour produire le contenu structuré selon les balises utilisées. 5 UNE BALISE ÇA SERT À QUOI? En parcourant un document HTML, les balises servent comme marqueur au navigateur pour indiquer : La fonction du texte ( lien hypertexte, titre, ) : La mise en forme du texte (gras, italique, etc.) : 6 2

3 LE DOCUMENT MINIMAL <HTML> <HEAD>  </HEAD> <BODY>  </BODY> </HTML> 7 PARTIES D UN DOCUMENT HTML 4.01 (1/2) La balise <html>: C'est la balise principale qui englobera toute votre page HTML. On ne la ferme qu'en dernier avec </html>. Les deux parties fondamentales d'un document HTML sont l'en-tête (<head>) puis ensuite dans l'ordre le corps (<body> <body>) l'en-tête (<head>) : sert à enregistrer des informations complémentaires (mots-clefs, feuilles de styles applicables, des scripts à utiliser, des chargements annexes, etc.) Le corps (<body> <body>) : Il contient tout ce qui apparaîtra 8 dans la fenêtre du navigateur. PARTIES D UN DOCUMENT HTML 4.01 (2/2) Le corps : <body> Paragraphes Titres Images Liens hypertextes Balises de mise en forme Listes Tableaux Formulaire Objets multimédia Cadres (frames) L'en-tête : <head> Title Link Script Méta Style Etc. 9 3

4 BALISES FONDAMENTA Titres <title>... </title> utilisé comme bookmark placé dans l'en-tête <head> du document Intertitres <h1>... </h1>, <h2>... </h2>,... <h6>... </h6> Paragraphes <p> Remarques penser à indenter le code source pour préserver la lisibilité ne pas croiser les balises <h1> cours sur les <b> plantes </h1></b> ==> code non-interprétable <h1> cours sur les <b> plantes </b></h1> ==> code correct 10 LE TOUT PREMIER EXEMPLE DE PAGE HTML 11 SYNTAXE D'UN ÉLÉMENT HTML Un élément commence par une balise d'ouverture et se termine par une balise de fermeture Syntaxe : <balise> contenu </balise> Exemple : <p>ceci est un paragraphe.</p> Certains éléments HTML ont un contenu vide. Les éléments vides sont fermés dans la balise de début Syntaxe: <balise /> Exemple : <br /> permet d'insérer un saut de ligne à l'intérieur d'un 12 paragraphe. 4

5 DISPOSITION DU TEXTE Généralement, la disposition du textedoit être laisser à la charge du navigateur: +sieurs espaces sont interprétés comme un seul espace. Les retours a la ligne sont fais automatiquement par le navigateur. HTML donne la possibilité de forcer la disposition du texte: Un retour a la ligne: avec la balise <br/> Un nouveau paragraphe (laisser une ligne vide et retour a la ligne) en utilisant <p> </p> Ajouter un espace dans un emplacement supposé être sans espace: 13 le symbole L'ÉLÉMENT PARAGRAPHE L'élément <p> définit un paragraphe dans le document HTML. L'élément paragraphe a une balise de début <p> et une balise de fin </p>. La balise <p> provoque un saut de ligne avant le paragraphe. Un paragraphe ne peut en contenir un autre. Attribut de la balise <p>:

6 TITRE ET SOUS-TITRE Il s'agit ici des titres qui s'afficheront dans la page : ce sont les en-têtes de sections ou paragraphes. Il existe 6 niveaux de titres d'importance décroissante : <h1> </h1> : signifie "titre très important". En général, on s'en sert pour afficher le titre de la page en haut. <h2> </h2> : signifie "titre important". <h6> </h6> : titre vraiment pas important du tout FORMATAGE DE CARACTÈRES Styles physiques Indépendants du navigateur utilisé et de sa configuration : <b> </b> Gras <i> </i> Italique <strike> </strike> texte barré <u> </u> souligné <sub> </sub> indice <sup> </sup> exposé <small> </small> petite police <big>. </big> grande police 18 6

7 FORMATAGE DE CARACTÈRES Styles logiques peuvent dépendre du navigateur utilisé et de sa configuration : <strong> </strong> Gras <em> </em> mettre le texte en valeur (italique) <strike> </strike> texte barré <dfn> </dfn> définition <code> </code> programme informatique <cite> </cite> citation bibliographique etc. 19 CARACTÈRES SPÉCIAUX à à â â ä ä æ æ é é è è ê ê ë ë ù ù û û ü ü ö ö ï ï î î ç ç œ œ 20 LIEN... VERS UN AUTRE DOCUMENT Un lien permet de définir Une région sensible au clic souris dans un document L'endroit où l'on va se retrouver après ce clic. Trois étapes : <A HREF = "nom du fichier" ou HREF = "url du document"> lien </A> Exemples : Consultez mon <A HREF = "cvoli.html"> curriculum vitae </A> Visitez le site de <A HREF = " l ESSAI </A> lien 21 doc. A doc. B 7

8 CRÉER UN LIEN... VERS UNE SECTION SPÉCIFIQUE D'UN AUTRE DOCUMENT Définir la cible dans le document "cible" <A name= "nom de la section"> section </A> Créer son lien dans le document "source" <A href= "doc.b # nom de la section"> lien </A> lien cible 22 doc. A doc. B CRÉER UN LIEN... VERS UNE SECTION SPÉCIFIQUE DU DOC. COURANT Même procédé en supprimant le nom de fichier. lien partie cible document A 23 Lien vers un serveur de news <a href="news:comp.html.news">... </a> AUTRES LIENS Pour que le lien soit valide, le visiteur doit être abonné au serveur de news Lien vers un fichier à télécharger <a href="fichier.exe"> cliquez ici pour télécharger </a> Lien <a href="mailto:oli.ert@caramail.com">adresse_e_mail</a> avec sujet <a href="mailto:chakerfatma@yahoo.fr?subject=renseignement">adresse</a> avec sujet et texte dans le corps du message <a href="mailto:chakerfatma@yahoo.fr?subject=renseignement&body=votre message">adresse_e_mail</a> avec sujet, envoyé à 2 personnes <a href="mailto:chakerfatma@yahoo.fr?cc=webmaster@essai.rnu.tn &subject=renseignement">adresse_e_mail</a> 24 8

9 EN BREF... Types de liens internes (doc. renvoie à une de ses sections) externes (doc. renvoie à un autre doc. ou à une section d'un autre doc.) exécutables (fichiers en téléchargement, déclenchement d'animations ou de programmes -plug-in) IMPORTANT On peut imbriquer une ancre dans une balise <h1> <a href="texte.htm"> Chanson </a> </h1> Mais ne jamais faire l'inverse <a href="texte.htm"> <h1>chanson</h1> </a> 25 IMAGES 1/3 La balise <img> est le moyen le plus simple d'insérer une image dans une page Web Syntaxe : <img src="url" alt="some_text" title="text"/> La balise <img> est vide, c.à.d. elle contient uniquement des attributs et pas de balise de fermeture. src est l'url de l'image que vous souhaitez afficher. alt est un texte alternatif à afficher si l image ne se charge pas. title affiche un texte dans une info-bulle. align= «top/middle/bottom/right/left/center» Exemple : 26 IMAGES 2/3 27 9

10 IMAGES 3/3 Le navigateur affiche l'image où la balise <img> se trouve. Si vous placez la balise <img> entre 2 paragraphes, le navigateur affiche l'image entre le 1er et le 2èmeparagraphe. Utilisez l'attribut align pour laisser une image flottante à gauche ou à droite d'un paragraphe : Une image comme lien hypertexte : 28 BALISES DE LISTE La notion de liste permet de structurer un ensemble de données : Type 1 : Listes non ordonnées (Unordred List) : Une liste non ordonnée commence par la balise <ul>. Chaque élément de la liste commence avec la balise <li>. Il y aura autant de <li> que d'élément dans la liste. Syntaxe : <ul> <li> premier item</li> <li>second item </li> </ul> Type 2 : Les listes numérotées (Ordered List) Une liste non ordonnée commence par la balise <ol>. Chaque élément de la liste commence avec la balise <li> Syntaxe : <ol> <li> premier item</li> <li>second item </li> </ol> 29 BALISES DE LISTE Type 3 : Les listes de définition (Definition List) La balise <dl> définit une liste de définitions. La balise <dt> (définit l'élément de la liste) et La balise <dd> (décrit l'élément de la liste) Syntaxe : <dl> <dt> terme 1 à définir </dt> <dd> définition </dd> <dt> terme 2 </dt> <dd> définition 2 </dd> </dl> 30 10

11 LISTES... VARIANTES TYPOGRAPHIQUES Listes non-ordonnées TYPE = "disc/circle/square" PLAIN SRC = "cercle.gif" DINGBAT WRAP = "horiz" Listes ordonnées TYPE = "1/A/a/I/i" START = "n" Listes de définition COMPACT 31 PETIT EXERCICE... Donner le code html du plan suivant villes Tunisienne 1. Hammamet a. Hammamet centre b. Hammamet sud c. Hammamet nord 2. Tunis. centre ville. arrondissements. périphérie 3. bordeaux villes étrangères 1. new-york 2. londres 3. munich 32 CORRECTION <ul> <li> Villes Tunisienne </li> <ol> <li> Hammamet </li> <ol type = "a"> <li> hammamet centre </li> <li> hammamet sud </li> <li> hammamet nord </li> </ol> <li> Tunis </li> <ul wrap= "horiz"> <li>centre ville <li>/ <li>arrondissements </li> <li>périphérie </li> </ul> <li> Bordeaux </li> </ol> <li> Villes étrangères </li> <ol> <li> New-York </li> <li> Londres </li> <li> Munich </li> </ol> </ul> 33 11

12 Texte préformatté <pre>... </pre> Citations <blockquote>... </ blockquote > AUTRES BALISES Cassure forcée de ligne <br /> Ligne horizontale <hr> size= "px" width= "px" ou "%" align= «left/right/center" noshade Commentaires  34 MISE EN EN FORME HTML défini plusieurs balises pour changer la mise en forme du texte: 35 TABLEAUX En HTML, un tableau est un conteneur définie par la balise <table> et constitué de lignes <tr> (pour Table Row) et de cellules <td> (pour Table Data) Un tableau est divisé en lignes (avec les <tr>), et chaque rangée est divisée en cellules de données (avec les <td>). <td> peut contenir du texte, liens, images, listes, formulaires, d'autres tables, etc. Par default, le contenu des colonnes est justifié à gauche, et sans bordure pour cela il faut définir un alignement et les bordures explicitement

13 TABLEAUX TABLEAUX : E : EXEMPLE 37 Bordure : Si vous ne spécifiez pas un attribut de bordure (border), le tableau sera affiché sans bordure. Syntaxe : <table border=valeur> TABLEAUX (SUITE) En-tête: Définie avec la balise <th>. Le texte dans un élément sera en gras et centré. Légende : <CAPTION> titre du tableau </CAPTION> attribut align= "top" (valeur par défaut) ou "bottom" 38 TABLEAUX : ATTRIBUTS ROWSPAN ET COLSPAN rowspan : Relier des cellules dans une rangée sur plusieurs colonnes colspan : Relier des cellules dans une colonne sur plusieurs rangées 39 13

14 Cellules vides <td></td> ou <td><br /></td> Affichage align= «left" «right" «center" «justify" Alignement dans les cellules <td halign = "left/right/center"> <td valign = "top/middle/bottom"> mêmes attributs dans <tr> vaudront pour toute la ligne par défaut en-têtes centrées horiz. et vert. données centrées et alignées à gauche TABLEAUX (SUITE) left center right align top middle valign 40 bottom LA BALISE <BODY> Fond d écran <body background= «nom_image»> Répétition d une image sur l écran du navigateur Couleurs <body bgcolor=«#000000» : couleur de fond text= «#000000» : couelur du texte link=«#000000» : couleur des liens non encore visités vlink=«#000000» : couleyr des liens visités alink=«#000000» : couleur des liens lors du clic Nom des couleurs : en clair : blue, teal, en notation héxadécimal RGB

15 RÉFÉRENCER SON SITE Un site n a intérêt que s il est connu et facilement atteignable Enregistrer son site manuellement sur les principaux moteurs de recherche (google, yahoo, altavista, etc.) Utiliser des produits commerciaux ou gratuits qui font le référencement automatiquement Faire inscrire des liens vers son propre site dans des sites déjà référencés. Faut-il encore que le site soit correctement référencé Il faut renseigner dans sa page des balises META et utiliser l attribut ALT pour les images. 43 LA BALISE META <meta name="author" content=«f. Chaker-kharrat"> <meta name="keywords" content="html, initiation"> <meta name="description" content="cette page fournit une introduction au langage HTML"> <meta name="date" content=" t16:55:37+01:00"> <meta http-equiv="content-language" content="fr" / > <meta name="robots" content="index,follow" / > 44 15