Programmation Web HTML. HTML 2 HTML ( Hyper Text MarkUp Language)  C’est est un langage de balisage hypertexte servant à la publication de pages web.

Présentation au sujet: "Programmation Web HTML. HTML 2 HTML ( Hyper Text MarkUp Language)  C’est est un langage de balisage hypertexte servant à la publication de pages web."— Transcription de la présentation:

1 Programmation Web HTML

2 HTML 2 HTML ( Hyper Text MarkUp Language)  C’est est un langage de balisage hypertexte servant à la publication de pages web sur Internet.  Permet la description des pages web –Structure –Affichage –Et liens  Mis au point par Tim Berners-Lee en 1989  HTML est basé sur SGML(Standard Generalized Markup Language) Evolution du HTML HTML 1.0HTML 2.0HTML 3.2HTML 4.0HTML 5.0 Texte de base,Formulaires deJustificationFeuilles de stylePlus de images, lienssaisie(gauche, centre,performance avec hypertextesdroite)de nouvelles -Tableauxfonctionnalité Équations mathématiques

3 Document HTML Structures principales d’un document HTML EntêteEntête Exemple de document HTML Corps 3 Mon 1er document HTML Ceci est un document HTML avec un lien hypertexte Mon site ="http://www.mon-site.com/

4 HTML : Exemple 4

5 Entête : … 5 Rôle Fournir des informations au sujet du document Position en début de document (après la balise et avant la balise ) Contenu … Titre de la fenêtre dans laquelle la page s'affiche

6 Corps du document :... 6 Rôle Délimiter le corps du document Permet de définir l'apparence du fond de l'écran et la couleur des éléments textuels Position Placé immédiatement après la balise Remarques –1 seule balise par page SAUF pour les pages comprenant des frames –La balise peut s'employer seule ou avec des options – est placé immédiatement avant la balise

7 Les options du BODY <BODYBGCOLOR="#RRVVBB" LINK="#RRVVBB" TEXT="#RRVVBB" BACKGROUND= "Adresse_Image" VLINK="#RRVVBB" ALINK="#RRVVBB"> BGCOLOR : couleur de fond de la fenêtre BACKGROUND : image de fond (répétée sous forme de mosaïque) TEXT : couleur du texte ordinaire * LINK : couleur du texte/de la bordure d'une image qui est un lien * VLINK : couleur du texte/de la bordure d'une image qui est un lien amenant sur une page déjà vue * ALINK : couleur prise par un lien tant qu'on clique dessus (peu utilisé) * = si omis, utilisation des couleurs standards (définies dans les préférences utilisateur) Les couleurs de base : 7

8 Mise en forme de titres (de 1 à 6) Titre 1 Titre 2 Titre 3 Titre 4 Titre 5 Titre 6 8

9 Mise en forme des caractères Les styles Gras : Italique : Souligné : …... … Possibilité de fixer la taille de police d’une page web (avec 1  taille  7) Si cette balise n'est pas utilisée, la taille par défaut des caractères est fixée à 3. 9

10 Mise en forme des caractères 10 Spécification d’une police locale <FONTFACE="police" COLOR="#RRVVBB" SIZE="s|+s|-s" "> Exemple <FONTFACE=" Arial " COLOR="#0000dd"> SIZE="4"> SIZE : taille de la police 1 … 7 (taille absolue) +1, +2... (taille relative par rapport à la valeur par défaut)

11 Mise en forme des paragraphes … Alignement des paragraphes situés et Pour passer (ou sauter) une ligne, utiliser des Retour à la ligne Pas de balise fermante ! : 2 retours à la ligne = 1ligne d'espacement Lorem ipsum... egestas Aenean eleifend... ornare. Aenean odio neque... id. 11

12 Le codage des caractères spéciaux De la forme : &entité; Espaceinsécable¦|±± ££¥¥ØØ ©  ®  °° ² 2 ³ 3 && ¼¼½½¾¾ àà&AgraveÀœœ ééÉÉëë îîÎÎçç ""ßßññ <<>>µµ 12

13 Les listes Il y a deux types de liste –Les listes ordonnées : liste numérotée (... )) –Les listes non-ordonnées :liste à puces(... ) Marqueur des éléments d’une liste Syntaxe : Élément 1 Élément 2 Élément 3 Élément 1 Élément 2 Élément 3 Option TYPE="disc|circle|square" dans Permet de choisir la forme de la puce 13

14 La balise Div La balise est un conteneur (à appréhender comme un cadre) qui peut inclure tous les balises html (tels que les paragraphes les tableaux, les listes, les images..., et également d'autres divisions). Exemple d'une div de hauteur fixe contenant une liste entrainant l'apparition d'une scrollbar : Elémént 1 Elémént 2 Elémént 3 Elémént 4 Elémént 5 Elémént 6 Elémént 7 Elémént 8 Elémént 9 Elémént 10 Elémént 11 Elémént 12 14

15 Création de lignes horizontales <HR<HRSIZE="s" WIDTH="w|w%" ALIGN="LEFT|CENTER|RIGHT" COLOR="#RRVVBB" NOSHADE > SIZE :épaisseur en pixel de la ligne WIDTH : largeur de la ligne. ALIGN : alignement à gauche| au centre | à droite dans la fenêtre : Utilisée sans option, cette balise produit une ligne grise ombrée de 1 pixel d'épaisseur faisant toute la largeur de la fenêtre COLOR="#RRVVBB" :Option valable avec Internet Explorer Permet de spécifier la couleur de la ligne NOSHADE : Permet de désactiver l'ombrage de la ligne 15

16 Les liens hypertextes (hyperliens) Donnent accès à une autre page html, une photo, un document, une adresse de courriel, un fichier exécutable sur serveur…. Syntaxe : … Exemple : Goof Google Lien; www.google.com/, vous y trouverez...ref="http://www,google.com/Lien; www.google.com/ 16

17 Les liens hypertextes (hyperliens) suite … Liens absolus Un lien absolu indique l'adresse complète du fichier. Il est généralement utilisé pour afficher une page d'un autre site. Exemples : Une encyclopédie vraiment géniale http://fr.wikipedia.org Mon mail Liens relatifs Un lien relatif indique l'adresse du fichier par rapport à la page actuelle. Il est vivement conseillé de l'utiliser le plus souvent dans son site web, car cela permet de changer d'hébergeur sans devoir rééditer chaque lien. Exemples : Lien vers le fichier « exemple.html » se trouvant dans le même répertoire que la page actuelle Lien vers le fichier «logo.png » se trouvant dans le sous-répertoire images du répertoire courant 17

18 Les liens hypertextes Les noms de fichiers Les fichiers HTML ont des extensions précises :.htm,.html, … Première page d'un site (ou d'un dossier du site) En général : index.html. Dans 99% des cas, cela permet d'atteindre le site ou le dossier. Les fichiers images Images de qualité photographique : JPEG (extension :.jpg) Images de type dessin, ayant au maximum 256 couleurs (dont une éventuellement transparente) ou les images animées : GIF (extension.gif) Les images de type.PNG 18

19 Liens hypertextes dans les images 19

20 Les images Syntaxe : SRC="url" Adresse du fichier image à insérer. WIDTH="w|w%" Largeur de l'image affichée. Si cette option n'est pas spécifiée, l'image est affichée à sa taille réelle. On indique soit la valeur en pixel, soit en pourcentage de la taille originale de l'image HEIGHT="h|h%" Hauteur de l'image affichée (mêmes remarques que pour WIDTH). NB : quand une seule des deux options WIDTH ou HEIGHT est spécifiée, l'autre est automatiquement calculée en proportion. NB2 : toujours indiquer au moins un des deux paramètres pour accélérer l'affichage ALT="texte" Texte apparaissant dans une info-bulle quand la souris est positionnée pendant 1 à 2 secondes sur l'image. BORDER="b" BORDER : taille en pixel de la bordure autour de l'image. Si l'image est un lien et qu'on ne veut pas voir de bordure de la couleur spécifiée dans l’option LINK du BODY, mettre 0. 2

21 Les images Syntaxe : Exemple : 21

22 Les images et les hyperliens Syntaxe : Exemple 22

23 Permettent d'atteindre un URL précis Suivant la zone où l’on clique sur une image Les cartes cliquables Zone cliquable 23 rect : est défini par ses coins opposés (x-gauche, y-haut, x-droit, y-bas), circle : est défini par son centre et son rayon (x-centre, y-centre, rayon), poly : est défini par un ensemble de points (x1, y1, x2, y2, …, xn,yn), default : est défini par les points non définis précédemment.

24 Les cartes cliquables Exemple 24

25 Les tableaux 25

26 Les tableaux : ouverture et fermeture du tableau : ouverture et fermeture de ligne (Row) : ouverture et fermeture de cellule (Data) 3 types d’éléments imbriqués … Remarques Ne jamais oublier les balises de fermeture  le tableau pourrait être désordonné, voire ne pas s'afficher. Les tableaux sont imbricables Exemple simple : Division 1 Division 2 26

27 ... 27 WIDTH="w|w%" Largeur du tableau exprimée en pixel ou en pourcentage de la largeur de la fenêtre (à utiliser avec prudence). BORDER="b" Largeur de l'encadrement du tableau et des cellules exprimée en pixels. Si une cellule est vide, il n'apparaît pas. CELLPADDING="cp" Marge intérieure de chaque cellule (en pixels). CELLSPACING="cs" Espacements horizontal et vertical entre les cellules du tableau

28 Les lignes : … <TR<TRALIGN="LEFT|CENTER|RIGHT|JUSTIFY" VALIGN="TOP|MIDDLE|BOTTOM"> ALIGN="LEFT|CENTER|RIGHT|JUSTIFY" Alignement horizontal du contenu de toutes les cellules de la ligne : VALIGN="TOP|MIDDLE|BOTTOM"> Alignement vertical du contenu de toutes les cellules de la ligne <TDALIGN="LEFT|CENTER|RIGHT|JUSTIFY" VALIGN="TOP|MIDDLE|BOTTOM" COLSPAN="c" ROWSPAN="r" WIDTH="w|w%"> ALIGN="LEFT|CENTER|RIGHT|JUSTIFY" Alignement horizontal cellule par cellule (cf. … ). VALIGN="TOP|MIDDLE|BOTTOM" Alignement vertical cellule par cellule (cf. … ). 28

29 Les cellules : … WIDTH="w|w%" Largeur de la cellule en pixels ou en pourcentage de la largeur du tableau. A spécifier une seule fois dans le tableau (ie pour une seule ligne) car elle détermine la largeur de la colonne dont fait partie la cellule. Remarques Veiller à avoir le même nombre de cellules pour chaque ligne du tableau (en fusionner éventuellement). Si une cellule sur une ligne est vide, y mettre quand même un espace insécable ( ) COLSPAN="c" Nombre de cellules fusionnées à l'horizontal. Permet de disposer du texte au dessus de plusieurs colonnes. ROWSPAN="r" idem pour les fusions à la verticale <TD ROWSPAN=3> 29

30 Les tableaux (suite) Exempleavec plusieurs lignes: Division 1 Division 2 Division 3 Division 4 30

31 Les tableaux (suite) Exemple avec un titre pour chaque colonne: Numéro d’usager Note globale 684 40 % 685 83 % 31

32 Les tableaux (suite) Exemple avec fusion de cellules : Numéro d’usager Note globale Diplôme obtenu? 684 40 % Non 685 Non disponible... 686 83 % Oui 3434

33 FRAME 33

34 <FRAMESET 34 ROWS|COLS="d1[,d2,d3…],*" BORDER="b" FRAMEBORDER="YES|NO" FRAMESPACING="fs"> Les frames (ou cadres) Permettent d'obtenir une ou plusieurs divisions horizontales et/ou verticales de la fenêtre du navigateur, et ainsi de disposer "virtuellement" de plusieurs fenêtres. Pour créer une page contenant des frames Définir le découpage (FRAMESET). Définir le contenu des cadres (pages HTML classiques). ROWS|COLS="d1[,d2,d3…],*" ROWS COLSCOLS  division en lignes (horizontale) pour une division en colonnes (verticale) d1[,d2, d3…] : indique la hauteur (largeur) en pixel de chaque ligne (colonne) ; le séparateur de valeurs est la virgule. * permet d'attribuer à la dernière ligne (colonne) tout l'espace restant. Possibilité d'indiquer une valeur en pourcentage de la taille de la page. Attention : l'affichage dépendra de la taille de la fenêtre du navigateur !

35 Exemple de découpage en frame Fichier frame.html menu titre Fichier3.html Fichier1.html Fichier2.html contenu 35

36 36 <FRAMESRC= "url" NORESIZE BORDER="b" NAME="nom de la frame" SCROLLING="YES|NO|AUTO FRAMEBORDER="YES|NO" FRAMESPACING="fs" MARGINWIDTH="mw" MARGINHEIGHT="mh"> SRC= "url" URL de la page chargée dans la fenêtre SCROLLING="YES|NO|AUTO" Gère l'affichage des ascenseurs YES : toujours présents NO : jamais AUTO : affichés si nécessaire

37 NAME="nom de la frame" Désignation utilisée pour identifier chaque cadre. Sert à désigner le cadre dans lequel va s’afficher un document pointé par un lien hypertexte. Option TARGET (dans un élément A) utilisée avec HREF. L’absence de TARGET dans un élément A provoque l ’affichage dans le cadre qui contient le lien. Nom de cadre prédéfinis : _parent, _top, _blank,... Exemple lien NORESIZE Empêche le redimensionnement d’un cadre. FRAMEBORDER, BORDER et FRAMESPACING Mêmes fonctions que pour la balise FRAMESET mais leur action est prioritaire s'ils sont ajoutés à la balise FRAME. MARGINWIDTH="mw" Espace vide laissé à gauche du cadre (en pixels). MARGINHEIGHT="mh" Espace vide laissé en haut du cadre (en pixels). 37

38 Découpages multiples Exemple de découpages multiples Deux façons de faire Découpages imbriqués dans un seul fichier Découpages dans plusieurs fichiers 4040

39 Découpage unique imbriqué Découpages imbriqués dans un seul fichier 39

40 Découpages en plusieurs fois 22 1 Découpages imbriqués dans plusieurs fichiers frameset.html f2.html 2 2121 2 3 2323 231 40 232 f23.html

41 Découpage unique vs. découpages en plusieurs fois Découpage unique Avantage : Inconvénient : Facilite la maintenance car il n'y a qu'un seul fichier FRAMESET. impossibilité de remettre simultanément à jour plusieurs cadres. Intérêt du découpage en plusieurs fois Avantage :souplesse de mise à jour des cadres car il est possible de désigner des cadres isolés ou des Inconvénient : 41 ensembles de cadres. lourd à maintenir.

42 Définition d’une fenêtre dans une page IFRAME: Inline Frame: Permet d'afficher une page HTML dans une autre page. Ces deux pages peuvent être stockées sur des serveurs différents. Elle est, par exemple, souvent utilisée afin d'insérer des bandeaux publicitaires hébergés sur des serveurs dédiés. <IFRAMENAME="nom de la frame"SRC= "url"HEIGTH="h" WIDTH="w" ALIGN="left|center|right|justify" SCROLLING="YES|NO|AUTO" FRAMEBORDER="YES|NO"MARGINWIDTH="mw" MARGINHEIGHT="mh"> NAME="nom de la frame" Identifiant de la fenêtre pour l'utiliser dans les TARGET SRC= "url" URL de la page chargée dans la fenêtre 42

43 Définition d’une fenêtre dans une page HEIGTH="h" : Hauteur de la fenêtre en pixel WIDTH="w" : Largeur de la fenêtre en pixel ALIGN="left|center|right|justify" :Alignement de la fenêtre dans le document qui la contient SCROLLING, FRAMEBORDER, MARGINWIDTH, MARGINHEIGHT Idem que dans FRAME 43