INF2005– Programmation web– A. Obaid Éléments de marquage.

Présentation au sujet: "INF2005– Programmation web– A. Obaid Éléments de marquage."— Transcription de la présentation:

1 INF2005– Programmation web– A. Obaid Éléments de marquage

2 INF2005– Programmation web– A. Obaid La page HTML Contient les éléments de marquage du site web. Respectent une structure de document. 2 … … Contenu visible de la page …

3 INF2005– Programmation web– A. Obaid Les éléments HTML Permettent de représenter des aspects de formatage – Paragraphes, hyperliens, images, tableaux, multimédia,… Format: – Contenu – (Élement vide) Exemples: – Doivent avoir une balise fermante … : entête … : container – N’ont pas de balise fermante (ou ): retour à la ligne (ou ) : trait horizontal 3

4 INF2005– Programmation web– A. Obaid Les attributs Rendent plus spécifiques les comportements des éléments Syntaxe : –... Quelques attributs: – class : décrit le groupe auquel appartient un élément – id : spécifie un identificateur unique d’un élément – style : définit le style d’un élément – title : pour annoter un élément (infobulle) – … 4

5 INF2005– Programmation web– A. Obaid Les attributs Certains attributs acceptables dans HTML4 sont désuets (mais encore acceptés !) pour HTML5: – Exemple pour l'élément background: spécifie une image de background bgcolor: Spécifie le couleur de la page text: Spécifie le couleur du texte de la page … On leur préfèrera des propriétés de style CSS! Des attribut globaux ont été définis pour HTML5 5 attributs1.html

6 INF2005– Programmation web– A. Obaid Les attributs globaux Attributs applicables à tous les éléments. Quelques parmi eux: – class:nom de la classe d'un élément (Voir CSS). – contenteditable: indique si le contenu peut être édité (true/false). – dir: indique la direction d'écriture du texte. – draggable:Indique si on peut faire glisser le contenu. – hidden: cache l'élément. – id:identificateur unique (Voir CSS). – spellcheck:spécifie si l'élément sera vérifié pour les erreurs. – style:spécifie un style CSS à applique à l'élément. – title : pour annoter un élément (infobulle). – … 6 attributs2.html

7 INF2005– Programmation web– A. Obaid Un premier exemple <!– Fichier: html1.html  Ma page d'accueil Bienvenue sur ma page Vous trouverez sur ce site des informations sur: Ma biographie. Mes enseignements. Mes travaux de recherche. Pour me contacter html1.html

8 INF2005– Programmation web– A. Obaid Les éléments de base Titres Entêtes (ou sections) Paragraphes Listes Ancrages Images multimédia Tableaux Containers Tables de dessin … 8

9 INF2005– Programmation web– A. Obaid Les entêtes et les paragraphes Entêtes – – Six éléments correspondant à six niveaux. texte : Plus gros caractères. texte texte : Plus petits caractères. – Attributs: align, attributs globaux Paragraphes – Élément: – Attributs: align, attributs globaux. – Les espacements successifs dont remplacés par un seul espace – Les coupures de ligne sont ignorées et remplacés par des espacements – Il est recommandé de fermer le paragraphe avec 9

10 INF2005– Programmation web– A. Obaid Entêtes et Paragraphes-Exemple 10 titres de section Exemple de titres de section : introduction titre niveau 2 titre niveau 3 titre niveau 4 titre niveau 5 titre niveau 6 Le reste du document. Le 15 septembre 2008, la banque d'affaires Lehman brothers était déclarée en faillite, le premier signe tangible d'une crise du crédit engagée depuis la fin des années 1990. pendant deux ans, à la suite de cette chute emblématique, les indicateurs économiques ont fluctué au gré des soubresauts de la crise économique. Retour en neuf infographies sur les événements qui ont jalonné l'actualité économique depuis septembre 2008. html2.html

11 INF2005– Programmation web– A. Obaid L’encodage des caractères En principe, on doit spécifier l’encodage des caractères dans la page – Pour demander au navigateur d’interpréter des caractères particuliers : accents, langues étrangères,… Moyens: – Élément dans la page – Entête HTTP Content-type généré par le serveur. 11

12 INF2005– Programmation web– A. Obaid L’encodage des caractères Le codage de base est ASCII-Latin (ISO-8859- 1) sur 8 bits : – 128 premiers caractères: Chiffres 0-9, alphabet anglais, quelque caractères spéciaux. – Caractères accentués européens Autre codage international : UTF-8 Entités HTTML – Caractères réservés au langage 12 Caractère Code < < > > & & " " Espace... Car. asciiHTML à à à á á á À À À ô ô ô... ISO-88591

13 INF2005– Programmation web– A. Obaid Le codage des couleurs Pour les couleurs de texte, de fond, etc. Sont représentées dans le modèle RGB (Red-Green-Blue): – Pour chaque composante, on spécifie sa quantité entre 0 et 255 en notation hexadécimale: #RRGGBB: FF0000 – rouge 888888 – gris 004400 – vert foncé FFFF00 – jaune Plusieurs couleurs sont pré-nommées (red, blue, green,...) Utilisés dans certains attributs: – color= #03FF88 – background-color= #FFFF00 13

14 INF2005– Programmation web– A. Obaid Les listes : liste ordonnée – Attributs: type : type de numérotation – 1: chiffre, I: romain majuscule, i : romain minuscule, A: lettres majuscule, a: lettre minuscule start: début de la numérotation reversed: ordre inversé. : liste non ordonnée. Utilise des puces – Attributs: attributs globaux. 14 Oranges Pommes Macintosh Red Delicious, Spartan Empire One Two Three Four Five Six

15 INF2005– Programmation web– A. Obaid Les liens Liens hypertextes pour naviguer entre différentes pages – Formation du web L’élément : spécifie un ancrage entre lien et un hypertexte. – Lien vers une page sur le web, une ressource programme, une section dans une page. – Le lien peut être absolu ou relatif Attributs – name: donne un nom au lien de sorte qu'un autre lien puisse y référer. – href : indique l’adresse URL du lien – Attributs globaux Exemple – Site de l’UQAM : 15

16 INF2005– Programmation web– A. Obaid Les liens Certains nouveaux attributs: – download:le document dans le lien sera téléchargé. – hreflang:la langue du document cherché. – media:le type de media pour le document cherché. – target: la page ou sera affichée le document :_blank, _parent, _self, _top – type: le type du document cherché. 16 Telecharger les notes du cours Version imprimée http://www.labunix.uqam.ca/~obaid/INF2005

17 INF2005– Programmation web– A. Obaid Les encrages Avec on crée un encrage avec un document. On peut avoir un encrage vers une section d’un document avec l’attribut name ou id – Avec name: Le sport Les sports – Crée un hyperlien – Avec id : Le sport Les sports Ne crée pas de lien ! 17

18 INF2005– Programmation web– A. Obaid Liens - Exemple Liens hypertextes Google Page d'accueuil Le sport … Le texte: Nunc vero inanes flatus quorundam vile esse quicquid extra urbis pomerium nascitur aestimant praeter orbos et caelibes, nec credi potest qua obsequiorum diversitate coluntur homines sine liberis Romae. Les sports Le sport dans le passé a ete considéré comme un moyen de se distraire. Maintenant c'est de la performance qu'on parle.... <img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"> 18 html4.html

19 INF2005– Programmation web– A. Obaid La directive ! DOCTYPE Spécifie la version de HTML utilisée – Elle précise le DTD (Document Type Definition) utilisé Utilisée pour valider le document auprès d’un site de validation (ex. http://validator.w3.org/http://validator.w3.org/ Pour HTML5, un seul doctype: 19

20 INF2005– Programmation web– A. Obaid Les métadonnées : contient des informations sur la page : métadonnées. Informations généralement utilisées – par les moteurs de recherche – les navigateurs pour le décodage des caractères, les redirections, … Exemples – Mots-clés pour les moteurs de recherche – Description pour les moteurs de recherche – Logiciel utilisé pour produire la page. – Codage UTF-8. 20

21 INF2005– Programmation web– A. Obaid Les entêtes de page contient l'en-tête du document. – Informations non visibles sur le navigateur. – On peut y trouver d’autres éléments :,,,,, etc. Définit le titre du document – Utilisé par le navigateur comme le titre dans la barre de la fenêtre – Utilisé par les moteurs de recherche 21

22 INF2005– Programmation web– A. Obaid Les images Plusieurs formats différents d'images sont supportés. Automatiquement reconnus par les navigateurs: GIF: Graphics Interchange Format JPEG:Joint Photographic Experts Group PNG: Portable Network Graphics SVG: Scalable Vector Graphics... Caractéristiques – Nombre de couleurs – Transparence – Qualité – Taille – … 22

23 INF2005– Programmation web– A. Obaid Les images GIF – Bitmaps. Limité à 256 couleurs JPEG – Avec pertes. Fichiers de plus petites tailles – Pour les images qualité photographie. PNG – Vectorielles. Sans perte SVG – Description XML de l’image seulement. – Pas reconnus par tous les navigateurs. Choix: – Photos: JPEG et PNG – Images synthétiques: GIF ou PNG 23

24 INF2005– Programmation web– A. Obaid Insertion d’images On utilise l’élément Attributs: src: URL du fichier contenant l'image alt : texte qui apparait si l’image ne s’affiche pas ! width : largeur (pixel ou pourcentage des la page) height :hauteur (pixel ou pourcentage des la page) longdescURL d'une description détaillée de l'image. usemapSpécifie le nom d'une description de carte (voir ). 24 Une image:.

25 INF2005– Programmation web– A. Obaid Les images - Exemple Les images Inserer une image a partir d'un fichier : Inserer une image a partir d'un site web : Une image dans le texte. Une image dans le texte Une image avant le texte Une image apres les texte Un paragraphe avec une image avec un alignement gauche de l'image. L'image flottera a gauche du paragraphe. Un paragraphe avec une image avec un alignement gauche de l'image. L'image flottera a gauche du paragraphe... Un paragraphe avec une image avec un alignement droite de l'image. L'image flottera a droite du paragraphe. … html5.html.hl 25

26 INF2005– Programmation web– A. Obaid Les liens avec des images On peut utiliser une image comme hypertexte. – On peut cliquer sur l'image. – L’ images est par défaut entourée d'une bordure. À moins d'ajouter l'attribut border=0. Exemple: – 26

27 INF2005– Programmation web– A. Obaid Tailles des images On peut créer un effet de perspective avec différentes tailles de l'image. Histoire de vaches ! taillesImage.html 27

28 INF2005– Programmation web– A. Obaid Les tableaux permet de dessiner un tableau On peut de configurer la table : – Disposition des colonnes, espacements, tailles des cellules, etc. – On peut utiliser les attributs (obsolètes) ou du CSS Sous éléments: – : Titre de la table. – : une nouvelle ligne de la table. – : un en-tête de colonne – : un é l é ment de donn é es. 28

29 INF2005– Programmation web– A. Obaid Tableaux - Exemples Exemple de table Tableau de notes Nom Test 1 (20%) Test 2 (30%) Jean 17 25 Annie 14 22 Michel 12 27 </HTML table1.html 29

30 INF2005– Programmation web– A. Obaid Les cellules de tableaux définit une cellule (un élément de donnée de la table) Attributs: – colspan :nombre de colonnes qu'occupe la cellule. – rowspan : nombre de lignes qu'occupe la cellule Sexe Male Femelle Status Marié(e) Célibataire Divorcé(e) 30 table2.html

31 INF2005– Programmation web– A. Obaid Tableaux imbriqués On peut placer un tableau dans le contenu d'une cellule On permet ainsi de construire des structures complexes 1 1 2 3 1 2 3 4 5 ImbriqueTable.html 31

32 INF2005– Programmation web– A. Obaid Tableaux multi-colonnes Avec le même outil, on peut concevoir pages multi- colonnes. Colonne 1 Avec des tables on peut faire des colonnes de texte! On sépare ces colonnes par les colonnes vides d'une certaine (ex. 5%) (WIDTH="5%"). Colonne 2 On divise les 3 colonnes selon des pourcentages (WIDTH="30%"). On suppose que les trois colonnes sont d'egales longeuers. Colonne 3 Les separations de 10% laissent un reste de 30% pour cette dernière colonne (WIDTH="30%").. multicoltable.html 32

33 INF2005– Programmation web– A. Obaid Les containers Servent pour contenir d’autres éléments – Éléments de regroupement – Attributs: attributs globaux Deux éléments sont définis: – : un élément de bloc Début un nouveau paragraphe sans style – : élément de ligne Flot continu sans style Utilisés essentiellement pour leur associer des styles CSS 33

34 INF2005– Programmation web– A. Obaid Les containers - Exemple 34 Ceci est un pagaraphe: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mi mauris, congue a placerat id, blandit id eros. Mauris a velit nisi, et volutpat arcu…. Ceci est un texte contenant un <div> Aliquam ligula diam, bibendum id sodales eu, euismod ac nibh. …Pellentesque --- interdum … Ceci est un autre paragraphe contenant des <span> Ceci est le même texte contenant des <span> Aliquam ligula… Pellentesque interdum rutrum …met ac elit. Aliquam … … html21.html