HTML - CPE
Transcription
HTML - CPE
Site Web - HTML © CPE Nanur-Hainaut 2008 Rudi Réz Sommaire y y y y y y y y Introduction Utilisations du HTML Structure HTML Les balises Les liens l h hypertexte Les Form Exemples Exercices Introduction HTML : HyperText Mark-up Language Le langage HTML Permet de formater une page de texte et d’établir des liens vers d’autre pages. La consultation de ces pages par un navigateur Le HTML est indépendant du système d d’exploitation exploitation Le HTML est indépendant du hardware. Historique q HTML HTML+ HTML 2.0 20 1990 1994 Novembre 1995 HTML 3.0 1996 Standardisation du HTML CSS 1 CERN (Tim Berners-lee) IETF Version de transition – non diffusée Decembre 1996 HTML 3.2 Janvier 1997 HTML 4.0 Décembre 1997 - Avril 1998 tables, applets, text flow, superscripts & subscripts Ameliorations graphique – feuille de style, frame,… XML 1998 Extensible Marked Language CSS2 HTML 4.01 Mai 1998 Décembre é 1999 JAVA, javascript, Vbscript, ActiveX, CGI, PHP XHTML 1.0 0 Janvier Ja e 2000 000 XHTML 1.1 Janvier 2000 Intégration des règles du XML CSS3 2001 RFC1866 Objectif y Réaliser un ensemble de documents HTML de présentation de la formation Réaliser un site web local. (Gérer le site web avec EASYPHP) y Contenu du site web y y ◦ ◦ ◦ ◦ ◦ ◦ ◦ Page d d’accueil accueil Présentation de la formation Présentation des matières Liste et présentation des participants Liste et présentation des formateurs Planning Intégrer les présentations Utilisations du HTML Standard de format de texte Liens hypertexte yp fonctionnement du HTML Structure HTMP <html> <head> <title>Nom du document</title> </head> <body> texte de la page </body> </html> Fichier : HTML_exemple1.html <html> <head> <title>exemple1</title> </head> <body> Page web </body> </html> Les balises de texte y Entete <h1> … <h6> ◦ ◦ ◦ ◦ y <h1>Texte <h2>Texte <h3>Texte <h6>Texte format format format format h1</h1> h2</h2> h3</h3> h6</h6> Paragraphe <p> ◦ <p>premier paragraphe </p> ◦ <p>second paragraphe</p> y Saut de page <br> ou <br/> y Texte gras <b> y It li Italique <i> i y Souligné <u> Fichier : HTML_exemple2.html _ p <html> <head> <title>exemple2</title> </head> <body> Les entetes <h1>entete h1</h1> <h2>entete h2</h2> <h3>entete h3</h3> <h4>entete h4</h4> <h5>entete h5</h5> <h6>entete h6</h6> Elements de texte <p> ceci est un paragraphe</p> <p> p ceci est un second p paragraphe</p> g p /p <br> (saut de ligne) <b>style gras</b> <u>souligné</u> <i>style italique</i> </body> </html> Les balises de texte - suite y Ligne horizontale <hr> y Baré <s> y Grand texte <big> y Petit texte <small> y Texte renforcé <strong> y Indice <sub> y Exposant <sup> y Commentaires <!-- --> ◦ <!–- commentaire invisible à l’affichage --> Les listes y y y y y y Liste sans ordre <ul> l <li>premier point</li> <li>second point</li> </ul> Liste avec ordre <ol> <li>premier point</li> <li>second point</li> </ol> / Liste de définition <dl> <dt>premier point</dt> <dd>définition 1</dd> / <dt>second point</dt> <dd>définition 2</dd> </dl> y Styles de liste ◦ <ul type=« square »> ◦ ◦ ◦ ◦ ◦ <ol <ol <ol <ol <ol type=« type=« type=« type=« type=« A »> a »> I »> i »> 1 »> Fichier : HTML_exemple3.html _ p <html> <head> <title>exemple</title> </head> <body> Liste sans ordre <ul> <li>premier point</li> <li>second point</li> </ul> Liste avec ordre <ol> <li>premier point</li> <li>second point</li> </ol> Liste de Definition <dl> <dt>premier point</dt> <dd>definition 1</dd> <dt>second point</dt> <dd>definition 2</dd> </dl> </body> </html> Les tables <table border="1"> <tr> <th>Titre 1</th> <th>Titre 2</th> </tr> <tr> <td>texte 1</td> <td>texte 2</td> </tr> <tr> <td>texte 3</td> <td>texte 4</td> </tr> </table> Options de table ◦ ◦ ◦ ◦ ◦ ColSpan=« ColSpan «2» Rowspan=« 3 » Width=« 120 » Cellspacing=« 5 » Align=« center » Fichier : HTML_exemple4.html _ p <html> <head> <title>exemple</title> </head> <body> Les tables <table border="1"> <tr> <th>Titre 1</th> <th>Titre 2</th> </tr> <tr> <td>texte 1</td> <td>texte 2</td> </tr> <tr> <td>texte 3</td> <td>texte 4</td> </tr> </table> </body> </html> Les frames <FRAMESET ROWS="*,30" BORDER="2"> <FRAMESET COLS COLS="160,*"> "160 *"> <FRAME SRC="frame_navig.html" NAME="navig"> <FRAME SRC="frame_page.html" NAME="page"> </FRAMESET> / <FRAME SRC="frame_pied.html" NORESIZE SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1" NAME="pied"> <NOFRAME> <B>Attention</B> : ce document contient des "frames" q que votre navigateur g WWW n'est p pas capable d'interpréter. Utilisez Netscape Navigator (vers. 2 ou sup.) ou Microsoft Internet Explorer (vers. 3 ou sup.) ; sinon, <A HREF="frame_navig.html"><B>suivez ce lien</B></A>. </NOFRAME> </FRAMESET> Fichier : HTML_exemple5.html _ p <html> <head> <title>exemple</title> </head> <FRAMESET ROWS="*,30" BORDER="2"> <FRAMESET COLS="160,*"> <FRAME SRC="frame_1.html" NAME="navig"> <FRAME SRC="frame SRC frame_2.html 2.html" NAME="page"> NAME page > </FRAMESET> <FRAME SRC="frame_3.html" NORESIZE SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1" NAME="pied"> <NOFRAME> <B>Attention</B> : ce document contient des "frames" que votre navigateur WWW n'est pas capable d'interpréter. Utilisez Netscape Navigator (vers. 2 ou sup.) ou Microsoft Internet Explorer (vers. 3 ou sup.) ; sinon, <A HREF="frame HREF= frame_navig.html navig html"><B>suivez ><B>suivez ce lien</B></A> lien</B></A>. </NOFRAME> </FRAMESET> <body> </body> </html> Les Divisions <DIV> </DIV> <DIV class=« modele1 »> avec une définition de « modele1 » dans la partie <head> <style type=« text/css »> div.modele1 {position:absolute, left:0; top:10; bottom:290; width:350; idth 350 text-align:center; te t align cente color:red} colo ed} </style> Ou <DIV style=« position:relative, left:5; top:10; width:350; text-align:right »> Fichier : HTML_exemple6.html _ p <html> <head> <title>exemple</title> <style type="text/css"> div.modele1 { Position:relative; left:120; top:200; bottom:290; width:350; textalign:center; color:green; border-style:ridge; border-width: 10pt} </style> </head> / <body> Les divisions <DIV class= class="modele1"> modele1 > Texte affiché dans la division numéro 1 </DIV> <DIV style="position:absolute; left:5; top:100; width:550; text-align:center; color:red; border-style:groove; border style:groove; border-width: border width: 10pt 10pt"> > Texte affiché dans la division numéro 2 </DIV> </body> </html> Les balises de liens y Liens <a> ◦ <a href=http://www.cpee.be>lien h f htt // b li vers lle site it du d CPE</a> CPE / y Image <img> ◦ <img g src=“cpee.gif" p g width="144" height="50" g /> y Audio – Vidéo <embed> ◦ <embed src=“macarena.wav" autostart=“true” loop=“true” /> Fichier : HTML_exemple0.html _ p <html> <head> <title>exemple0</title> </head> <body> Liens vers les exemples <br> <!-- ceci redirige le browser vers une autre page --> <a href=./HTML_exemple1.html>lien vers exemple1</a><br> <a href=./HTML_exemple2.html>lien vers exemple2</a><br> <a href=./HTML_exemple3.html>lien vers exemple3</a><br> <a href=./HTML_exemple4.html>lien f vers exemple4</a><br> <a href=./HTML_exemple5.html>lien vers exemple5</a><br> <a href=./HTML_exemple6.html>lien vers exemple6</a><br> </body> / y </html> Les images y Image de fond <body background="fichier.jpg"> y Image dans le texte <img i src="carres.jpg" " j " align="left"> li "l ft" y Image dimentionnée <img src= src="boules boules.jpg jpg" width=100 height=40> y Bordure <img i src="nom_fichier.jpg" " fi hi j " b border=0> d 0 y Alternative < img src= src="bidon bidon.gif gif" alt = " Grâce à ALT vous le savez ! " > Les cartes y y HTML_exemple8.html HTML exemple8 html <map> définit et nomme l'ensemble des régions. <area> permet de les réaliser. réaliser Plusieurs formes sont disponibles : rectangle, rectangle cercle, polygone. <img src="..." usemap="#..."> appelle l'image et les régions. <map name="MesZones"> <area shape="rect" coords="x,y,a,b" href="fichierR.htm"> <area shape="circle" coords="x,y,r" href="fichierC.htm"> <area shape="poly" coords="x,y,a,b,s,t, ... , ... " href="fichierP.htm"> </map> <img src="MonImage.jpg" usemap="#MesZones" > y Si deux régions se superposent, la première dans la liste est active. Inclure une p page g web <iframe src =« http://www.telecom.cpehn.be/page.php p p p g p p » width=« 80% » height=« 300 »> <p>Your browser does not support iframes.</p> </iframe> -- Pas supporté en HTML 4.0.1 et en XHTML -- Les Formes Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant par exemple un dialogue avec les internaute, à la manière des coupons-réponse présents dans certains magazines. Le lecteur saisit des informations en remplissant des champs ou en cliquant sur des boutons, puis appuie sur un bouton de soumission (submit) pour l'envoyer soit à un URL, c'est-à-dire de façon générale à une adresse e-mail ou à un script de page web dynamique tel que PHP PHP, ASP ou un script CGI CGI. <FORM METHOD="POST" ou "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded"> <FORM METHOD=POST ACTION="mailto:[email protected]"> Fichier : HTML_exemple10.html _ p <HTML> <HEAD> <!-- Le Site BARESPACE --> <TITLE> ENQUETE </TITLE> </HEAD> <BODYBGCOLOR=#00FFFF> <FORM> <H3 ALIGN=CENTER> Enquête sur la satisfaction des Utilisateurs</H3> <FORM METHOD="POST" ACTION="mailto:[email protected]" > <PRE> <P> Nom : <INPUT TYPE="texte" NAME="Nom1" SIZE="30"> Prénom : <INPUT TYPE="texte" NAME="Prenom1" SIZE="40"> E-mail : <INPUT TYPE="texte" NAME="E-mail" SIZE="50"> Adresse : <INPUT TYPE="texte" NAME="Adr1" SIZE="30"> <INPUT TYPE="texte" NAME="SIZE="30"> Code Postale : <INPUT TYPE="texte" NAME="code postal" SIZE="10"> Ville : <INPUT TYPE="texte" NAME="ville" SIZE="50"> <P> <OL> <LI> <INPUT TYPE ="CHECKBOX" NAME="topping1" VALUE="Marie"> Marié <LI> <INPUT TYPE ="CHECKBOX" NAME="topping2" VALUE="Célibataire"> Célibataire <LI> <INPUT TYPE ="CHECKBOX" NAME="topping3" VALUE="Etudiant"> Etudiant <LI> <INPUT TYPE ="CHECKBOX" NAME="topping4" VALUE="Cadre"> Cadre </OL> <P> Votre opinion <SELECT NAME=OPTION1> <OPTION> Très Satisfait <OPTION> Satisfait <OPTION> Indifferent <OPTION> C'est C est très nul !! </SELECT> <P> Vos commentaires : <TEXTAREA NAME=COM1 ROWS="6" COLS="70" A></textarea> <P> <INPUT TYPE=SUBMIT VALUE="Envoyer" <INPUT TYPE=RESET VALUE="Annuler" </BODY> </PRE> </FORM> </HTML> Les Modifications de style <html> <head> <title>Example Style Settings</title> </head> <style type="text/css"> <!-body {background: #FFFFFF; color: #000000; margin-top: 6%; margin-left: 3%; margin-right: 3%} h1 {font: 14pt ariel; color: #0000FF} h2 h3, h2, h3 h4 {margin {margin-left: left: -3%} 3%} p {font: 12pt roman; text-indent: 0.5in} a {color: #00FF00; text-decoration: none} --> </style> OU <link href="style.css" rel="stylesheet" type="text/css"> http://www.csszengarden.com/tr/francais/ Les couleurs HTML exemple11 html HTML_exemple11.html body {background: #FFFFFF; color: #000000} body {background: white; color: black} 3 octets pour 3 couleurs – RGB #FF0000 = red #00FF00 = green #0000FF = blue #FFFF00 = yellow #FF00FF = magenta #00FFFF = cyan #BEBEBE = grey Rouge Vert Bleu Jaune magenta cyan Gris [R [Rouge V Vertt Bl Bleu]] Les META <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="GENERATOR" content="Arachnophilia 3.9"> <meta name= name="description" description content= content="The The Computer Technology Documentation HTML Guide - Setting Document Style"> <meta name="keywords" content="Documentation, HTML, html document style, style, setting document style, setting html document style"> <title>The CTDP HTML Guide - Setting Document Style</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> . . . </body> Les META NAME <meta name="Nom du tag" CONTENT="Attribut"> Nom du tag Attribut Utilité Author Informations sur l'auteur Informations sur l'auteur de la page Copyright Informations de copyright Permet de référencer des informations de droits d'auteur d auteur Description Description de votre site Permet de donner une information à afficher lors du résultat d'une recherche Expires Never date à laquelle la page expire Indique au robot la date d'expiration de la page Generator Nom du logiciel Nom de l'éditeur HTML ayant généré la page web Keywords mot clé, mot clé, etc." Mots clés décrivant la page Web g Rating general g Type yp de contenu (public (p visé)) Rev Votre@email Mail du Webmestre Revisit-after x days Délai de visite par le robot Robots All none Permet à tous les robots d'indexer d indexer Subject Sujet de la pag Permet de préciser le sujet de la page Les META NAME <META HTTP-EQUIV="Nom HTTP-EQUIV= Nom du tag" tag CONTENT= CONTENT="Attribut"> Attribut > Nom du tag Attribut Utilité Pragma no-cache Empêche le navigateur de garder la page dans son cache Refresh X;URL="adresse" Appelle une autre page (située à l'URL spécifiée) après un délai d'attente de x secondes Robots all follow index nofollow noindex none Permet au robot de référencer toute la page (par défaut) Permet au robot de suivre les liens de la page Permet au robot d'indexer la page Interdit au robot de suivre les liens Interdit au robot d'indexer la page Empêche le robot de poursuivre l'indexation du site Windowtarget _blank _top Force le browser à afficher la page dans une nouvelle fenêtre Affiche la page dans la fenêtre entière (pas dans une frame). Le XML dans HTML • On peut toujours incorporer du XML dans un fichier Html avec la balise <xml> ... </xml>. • Mais quand les navigateurs rencontrent ces balises inconnues, rien n'est affiché • ll’astuce astuce : "îlots îlots de données" données [data islands]. <xml id="fichierxml" src="simple.xml"></xml> données : [datasrc="#id« [datasrc= #id« ] Nom des champs :[datafld="balise_xml"]. Liens utile La spécification HTML 4 4.01 01 : http://www.la-grange.net/w3c/html4.01/ http://www la-grange net/w3c/html4 01/ La spécification XHTML 1.0 : http://www.la-grange.net/w3c/xhtml1/ Les CSS 1 : http://www.yoyodesign.org/doc/w3c/css1/index.html Les CSS 2 : http://www.yoyodesign.org/doc/w3c/css2/cover.html p y y g g Validateur (X)HTML : http://validator.w3.org/ Validateur CSS : http://jigsaw.w3.org/css-validator/