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 Chapitre 2. Le Langage HTML N. Chenfour Eléments de Marquage

Programmation Web Chapitre 2. Le Langage HTML N. Chenfour Eléments de Marquage ou Balises ou Tags Description et Attributs possibles <HTML> …</HTML> Indique le début et la fin du proogramme HTML. Tout le programme se trouve entre <HTML> et </HTML> <BODY> … </BODY> Corps du programme proprement dit, qui correspond à la page Web affichée par le browser. Exemple : <BODY TEXT="#FF0000" BACKGROUND="back.gif"> … </BODY> BACKGROUND = "image" BGPROPERTIES = "FIXED" TEXT = "couleur de texte" BGCOLOR = "couleur de fond" LINK = "couleur des liens" ALINK = "couleur des liens Sélectionnés" VLINK = "couleur des liens visités" <HEAD> … </HEAD> Partie optionnelle du programme HTML qui contient des informations relatives au document devant être affiché au début de la page. Elle peut aussi comporter l’élément <TITLE> <TITLE> … </TITLE> Permet d’indiquer le titre du document qui sera affiché dans la barre de titre de la fenêtre du document. Par défaut (si on n’utilise pas Title) c’est le nom et chemin du fichier ouvert qui est affiché. Exemple : <HTML> <HEAD> <TITLE> Document N° 1 </TITLE> </HEAD> <BODY> texte… </BODY> </HTML> Style du texte : <H1>…</H1> en général : <Hn>…</Hn> avec n=1..6 Permet d’écrire un titre de niveau 1, 2 … ou 6 L’attribut ALIGN est optionnel et est utilisé pour aligner le titre. Exemple : <H1 ALIGN = "center"> Titre N° 1 </H1> ALIGN = ("center", "left", "right", "justify") Balises HTML, N. Chenfour 1 <STRONG>…</STRONG> ou <B>… </B> Texte en Gras <EM>…</EM> ou <I>..</I> Texte Italique <U>..</U> Texte Souligné <BIG>..</BIG> Texte avec gros caractères <SMALL>..</SMALL> Texte avec petits caractères <SUP>..</SUP> Texte en exposant <SUB>..</SUB> Texte en indice <STRIKE>..</STRIKE> Texte barré <TT>..</TT> Texte a espacement entre les caractères fixe et un peut plus grand comme celui-ci. <FONT> … </FONT> Modifie la fonte du texte au milieu sans influencer sur la taille des titres H1 à H6. Exemple : <FONT COLOR = "#FF0000"> Texte en rouge </FONT> COLOR = "#RRVVBB" SIZE = ("+valeur", "-valeur") <MARQUEE>…</MARQUEE> Texte défilant Paragraphes : <P> Nouveau paragraphe ALIGN = ("center", "left", "right", "justify") <BR> Aller à la ligne <HR> Tracer une ligne horizontale centrée par défaut et avec un effet de profondeur (avec NOSHADE on peut éliminer cet effet. Exemples : <HR> <HR SIZE=5 WIDTH=200 ALIGN=left> (les valeurs sont en nombre de pixels) <HR WIDTH=50% NOSHADE> ( une ligne sans ombre sur 50% de la fenêtre) SIZE = "valeur" WIDTH = (valeur, valeur%) ALIGN = (left, right, center) NOSHADE <PRE>…</PRE> Affichage du texte préformaté. Sans changement, tel qu’il est introduit. <CENTER>…</CENTER> Centrer le texte <UL>…</UL> Début et fin d’une liste non numérotée TYPE = (square, disc, circle) <OL>…</OL> Début et fin d’une liste ordonnée (numérotée) TYPE = (A, a, I, i, 1) Balises HTML, N. Chenfour 2 <LI> Option (ou élément) d’une liste. Exemple : <UL> <LI> Option 1 <LI> Option 2 </UL> Liens : <A HREF="URL"> Hypertexte </A> Insertion d’un lien Hypertexte. Avec "URL" indique le chemin ou l’adresse du fichier à ouvrir lorsqu’on clique sur le texte : Hypertexte. Exemples : <A HREF= "lien01.htm"> Lien N° 1 </A> <A HREF= "lien02.htm" TARGET="BLANK"> Lien sur fenêtre séparée </A> <A HREF="http://www.microsoft.com/page.htm"> Lien internet </A> <A HREF="mailto:ali@caramail.com"> envoyer un courrier électronique </A> (lance, au click, l’application responsable des envoies de couriers, exp : microsoft outlook) Hypertexte peut aussi être une image. Exemple : <A HREF= "lienImage.htm"> <IMG SRC=c:\windows\images01.gif> </A> TARGET = "BLANK"  Nouvelle fenêtre d’un nouveau Browser TARGET = "TOP"  sur toute la surface du Browser TARGET = "Nom de Frame"  affichage sur la frame désignée par son nom <IMG SRC = "nom image"> Insertion d’une image à partir du fichier image "nom image". Exemple : <IMG SRC = "image01.gif"> SRC = "nom image" ALIGN = (left, top, bottom, Middle, right) WIDTH = (valeur, valeur%) HEIGHT= (valeur, valeur%) Balises HTML, N. Chenfour 3 <A NAME="Identificateur"> fragment de texte </A> Associe l’identificateur de fragment "Identificateur" au fragment de texte désigné. L’identificateur peut être utilisé pour faire un saut au fragment à l’aide d’un hypertexte du même document, réalisé en respectant la syntaxe suivante : <A HREF="#Identificateur"> Hypertexte </A> le caractère dièse (#) est obligatoire dans ce cas. Exemple : <A HREF="#html"> Introduction à HTML </A> … <A Name="html"> Introduction au langage HTML </A> texte de l’introduction … Tableaux : <TABLE> … </TABLE> Permet d’ouvrir une zone de tableau BORDER BORDER = valeur NOBORDER BORDERCOLOR = "…" BGCOLOR = "…" WIDTH = "valeur%" CELLSPACING="valeur" CELLPADDING="valeur" <TR> … </TR> Définir une ligne (Rangé) du Tableau ALIGN = (left, right, center) VALIGN = (top, Bottom, Middle) <TD> … </TD> Définir une cellule (de Donnée) dans une ligne du Tableau. Exemple 1 : <TR> <TD> Cellule 1 </TD> <TD> Cellule 2 </TD> </TR> Exemple 2 : insertion d’images dans un tableau <TR> <TD> <IMG SRC = "image01.gif"> </TD></TR> Exemple 3 : <TR> <TD> Cellule 1 </TD> <TD> Cellule 2 </TD> </TR> <TR> <TD colspan=2 ALIGN = CENTER> Fusion </TD> </TR> ALIGN = (left, right, center) VALIGN = (top, Bottom, Middle) COLSPAN = valeur : nombre de colonnes réunies dans la même cellule. ROWSPAN = valeur : nombre de lignes réunies dans la même cellule. BGCOLOR = "…" Balises HTML, N. Chenfour 4 C e llu le 1 C e llu le 2 F u s io n <TH> … </TH> Définie une ligne d’entête (Header) du Tableau. Les données dans cette rangée seront par défaut gras et centrées Exemple : <TABLE BORDER> <TR> <TH> Colonne 1 :</TH> <TH> Colonne 2 :</TH> </TR> <TR> <TD> Cel (1, 1) </TD> <TD> Cel (1, 2) </TD> </TR> <TR> <TD> Cel (2, 1) </TD> <TD> Cel (2, 2) </TD> </TR> </TABLE> ALIGN = (left, right, center) VALIGN = (top, Bottom, Middle) COLSPAN = valeur ROWSPAN = valeur <CAPTION>…</CAPTION> Permet de donner un titre au tableau. ALIGN = (left, right, center) Les Cadres ou Frames : <FRAMESET> … </FRAMESET> Permet de diviser l’écran du Browser en plusieurs fenêtres (frames), dans chaque fenêtre est affiché une page différente. Les différentes pages sont des fichiers html inclus par le tag <FRAME>. La partie FRAMESET n’est pas incluse dans <body> …</body> mais elle le remplace. Elle se trouve alors, en général, juste après l’entête <head> …</head>. L’attribut COLS précise que l’écran est divisé en colonnes, et indique la largeur de chacune séparées par des virgules. Le symbole * peut être utilisé comme dernière valeur pour indiquer la largeur restante. L’attribut ROWS indique que l’écran est divisé en cellules horizontales. COLS = "v1,v2,…" ROWS = "v1,v2,…" FRAMEBORDER = valeur Au moins valeur = 1 pour autoriser le redimensionnement <FRAME SRC = "URL"> Caractérise un cadre de la partie FRAMESET. La place de l’élément FRAME est donc dans <FRAMESET> …</FRAMESET> Exemple : <HTML> <HEAD><TITLE> fenêtre à 2 cadres </TITLE></HEAD> <FRAMESET COLS = "200,*"> <FRAME SRC = "page_1.htm"> <FRAME SRC = "page_2.htm"> </FRAMESET> </HTML> SRC = "URL" NAME = "nom du cadre" SCROLLING = ("yes", "no") MARGINWIDTH = valeur MARGINHEIGHT = valeur FRAMEBORDER = valeur NORESIZE Balises HTML, N. Chenfour 5 <NOFRAME> … </NOFAME> Cette partie peut être aussi incluse dans la partie FRAMESET. Elle est exécutée en alternative par les browsers qui n’arrive pas à gérer les frames. En général, on met dans cette partie le corps <body> … </body>. Exemple : <HTML> <HEAD><TITLE> fenêtre à 2 cadres </TITLE></HEAD> <FRAMESET COLS = "200,*"> <FRAME SRC = "page_1.htm"> <FRAME SRC = "page_2.htm"> <NOFRAME> <BODY> Cette page web utilise deux cadres, mais votre browser ne s'en accommode pas. </BODY> </NOFRAME> </FRAMESET> </HTML> Balises HTML, N. Chenfour 6 Les Formulaires : <FORM> … </FORM> Permet de construire une fiche interactive que l’utilisateur peut remplir et envoyer au serveur qui traite les informations qui y figurent. A l’intérieur du formulaire, on peut insérer des Champ de Saisie, des boutons, des Cases à Cocher, des Boutons d’option et des Listes Combinées. ACTION = "chemin ou URL" METHOD = (GET, POST) <INPUT TYPE = ? > … </INPUT> TYPE = RADIO TYPE = CHECKBOX TYPE = SUBMIT TYPE = TEXT TYPE = PASSWORD TYPE = HIDDEN TYPE = IMAGE Button <input name="Name" type="text" value=""><br> <input name="Name" type="hidden" value="">Hidden<br> <input name="Name" type="password" value=""> <input name="Name" type="radio" value="" checked><br> <input name="Name" type="checkbox" value="ON"><br> <input name="Fichier" type="file" size=80><br> <input name="sub" type="image" src="image.gif"><br> <textarea name="Name" rows=5 cols=20 wrap="off"> </textarea><br> <input type="submit" value="Send"><br> <select name="Name" size="1"> <option value="value1">Item1</option> <option value="value2">Item2</option> </select> NAME = "nom du contrôle" VALUE = CHECKED <SELECT>…</SELECT> Contient des Options NAME = "nom du contrôle" <OPTION> … SELECTED <TEXTAREA>… </TEXTAREA> NAME = "nom du contrôle" ROWS = COLS = noplace / alert <A HREF="noplace" onMouseover="alert(’click impossible’)"> secret </A> Balises HTML, N. Chenfour 7 Notes : 1. SGML : Standard Generalized Markup Language. Langage de base pour la plus part des autres langages de marquage. 2. HTML : HyperText Markup Laguages. Issu de SGML. 3. VRML : Virtual Reality Modeling Language. Issu de SGML. 4. Pour insérer un commentaire on utilise :  5. Caractères Spéciaux : certains caractères sont considéré comme des caractères spéciaux en HTML (<, >, &, "). Pour les afficher comme des caractères normaux on doit les référencer de la manière suivantes uploads/s3/ html.pdf