Upload
baptiste-vignal
View
107
Download
1
Embed Size (px)
Citation preview
Page Web et HTML
IFT6800 – E 2007
Jian-Yun Nie
Navigation sur le Web
• Outils– Navigateur: Netscape, Explorer, (Mosaic, …)
• Indiquer une adresse URL (Uniform Resource Locator)
• Download le document correspondant à l’URL
• Interpréter et afficher
URL• Chaque ressource (document, programme, …) sur le
Web correspond à une adresse URL• URL = adresse du serveur Web + adresse de la
ressource sur le sitewww.iro.umontreal.ca/~nie/IFT6800/index.htm
• Adresse sur un site:– Hiérarchique, comme l’organisation des répertoires et fichiers
sur Unixwww.iro.umontreal.ca
… ~nie …
… IFT6800 …
… index.htm … Répertoire HTML dans mon compte
Savoir comment afficher un document
• Comment afficher le document « index.htm »?– Formatage, couleur, taille de caractère, …
• Il faut que le document soit décrit dans un langage standard, compris par tous les navigateurs du Web– HTML: Hyper-Text Markup Language– Un document écrit dans ce langage a une
extension .html ou .htm
Exemple simple
<HTML>
<HEAD>
C'est le conteneur de l'entête.
</HEAD>
<BODY>
C'est le conteneur du corps.C'est ici que nous écrirons.
</BODY>
</HTML>
Tag/Balise, Markup/Marqueur
contenu
Une paire de balises
Comment mettre une page sur le Web?
• Un serveur Web (e.g. www.iro.umontreal.ca)• Permission d’ajouter une page dans un
répertoire accessible• Éditer une page Web• Stocker la page dans un répertoire accessible
par le serveur Web• (la page devient accessible)• Pour être visible, la page peut être référencée
par d’autres pages (lien hypertexte vers la page)
Principe de HTML
• En plus du contenu, on ajoute les balises pour indiquer – le rôle de chaque segment de contenu (e.g. <H1>,
<HEAD>, …), – le format d’affichage (e.g. <font color="white“>),– Le type de données (e.g. <script language =
"javascript">…</script> )– …
• Essentiellement, HTML vise à indiquer le format d’affichage – + extension pour intégrer certains programmes
À propos de HTML
• Hypertext = lien entre des objets, documents, …• Markup = ajout sur des documents pour indiquer
comment afficher• Historique
– 1980: Tim Berners-Lee a développé un système prototype hypertexte ENQUIRE au CERN (Centre européen de recherche nucléaire)
– 1989: Système hypertexte pour internet (Robert Caillau)– 1991: première version de HTML (une application de SGML– 1994: fondation de W3C– 1995: HTML 2.0– 2000: HTML devient un standard international (ISO/IEC
15445:2000 )– 1999: HTML 4.01 (dernière version)
Éditer une page Web• Amaya editor (WYSIWYG)
Editeur• Dreamweaver
Editeur• Frontpage SharePoint Designer; Expression Web
Word
• Créer un document Word
• Stocker comme un document .htm ou .html
• Beaucoup de balises et informations ajoutées
<html xmlns:o="urn:schemas-microsoft-com:office:office"xmlns:w="urn:schemas-microsoft-com:office:word"xmlns="http://www.w3.org/TR/REC-html40">
<head><meta http-equiv=Content-Type content="text/html; charset=windows-1252"><meta name=ProgId content=Word.Document><meta name=Generator content="Microsoft Word 10"><meta name=Originator content="Microsoft Word 10"><link rel=File-List href="Bonjour_files/filelist.xml"><title>Bonjour</title><!--[if gte mso 9]><xml> <o:DocumentProperties> <o:Author>nie</o:Author> <o:LastAuthor>nie</o:LastAuthor> <o:Revision>1</o:Revision> <o:TotalTime>0</o:TotalTime> <o:Created>2007-08-15T04:40:00Z</o:Created> <o:LastSaved>2007-08-15T04:40:00Z</o:LastSaved> <o:Pages>1</o:Pages> <o:Words>1</o:Words> <o:Characters>9</o:Characters> <o:Company>DIRO</o:Company> <o:Lines>1</o:Lines> <o:Paragraphs>1</o:Paragraphs> <o:CharactersWithSpaces>9</o:CharactersWithSpaces> <o:Version>10.6830</o:Version> </o:DocumentProperties></xml><![endif]--><!--[if gte mso 9]><xml> <w:WordDocument> <w:SpellingState>Clean</w:SpellingState> <w:GrammarState>Clean</w:GrammarState> <w:Compatibility> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:UseFELayout/> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument></xml><![endif]--><style><!-- /* Font Definitions */ @font-face
{font-family:SimSun;panose-1:2 1 6 0 3 1 1 1 1 1;mso-font-alt:\5B8B\4F53;mso-font-charset:134;mso-generic-font-family:auto;mso-font-pitch:variable;mso-font-signature:3 135135232 16 0 262145 0;}
@font-face{font-family:"\@SimSun";panose-1:2 1 6 0 3 1 1 1 1 1;mso-font-charset:134;mso-generic-font-family:auto;mso-font-pitch:variable;mso-font-signature:3 135135232 16 0 262145 0;}
/* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";margin:0cm;margin-bottom:.0001pt;mso-pagination:widow-orphan;font-size:12.0pt;font-family:"Times New Roman";mso-fareast-font-family:SimSun;mso-ansi-language:EN-CA;}
@page Section1{size:612.0pt 792.0pt;margin:72.0pt 90.0pt 72.0pt 90.0pt;mso-header-margin:36.0pt;mso-footer-margin:36.0pt;mso-paper-source:0;}
div.Section1{page:Section1;}
--></style><!--[if gte mso 10]><style> /* Style Definitions */ table.MsoNormalTable
{mso-style-name:"Table Normal";mso-tstyle-rowband-size:0;mso-tstyle-colband-size:0;mso-style-noshow:yes;mso-style-parent:"";mso-padding-alt:0cm 5.4pt 0cm 5.4pt;mso-para-margin:0cm;mso-para-margin-bottom:.0001pt;mso-pagination:widow-orphan;font-size:10.0pt;font-family:"Times New Roman";}
</style><![endif]--></head>
<body lang=EN-US style='tab-interval:36.0pt'>
<div class=Section1>
<p class=MsoNormal><span lang=FR-CA style='mso-ansi-language:FR-CA'>Bonjour!<o:p></o:p></span></p>
<p class=MsoNormal><span lang=FR-CA style='mso-ansi-language:FR-CA'><o:p> </o:p></span></p>
</div>
</body>
</html>
But du cours
• Apprendre à comprendre les codes HTML• Savoir comment ajouter des éléments supplémentaire
(code JavaScript)
<html> <head> <title> bonjour </title> </head> <body>
Bonjour!</body> </html>
Un autre exemple<!DOCTYPE html PUBLIC "-//IETF//DTD
HTML 2.0//EN"> <html> <head> <title> Exemple de HTML </title> </head> <body> Ceci est une phrase avec un
<a href="cible.html">hyperlien</a>. <p> Ceci est un paragraphe où il
n'y a pas d'hyperlien. </p> </body> </html>
htmlhead
title
texte
body
texte
a
texte
p
texte
Les éléments HTML
Emboîtement:
Les éléments en détails
• <html>…</html> – Délimite le document en HTML
• <head>…</head>– Section en-tête
• <body>…</body> – Corps du document
En-tête• <title>…</title>
– Titre du document (au plus un par document)• <base … />
– <base href="http://www.w3schools.com/”> – Spécifie l’URL de base à partir de laquelle les références relatives sont interprétées
• <link … />– Spédifie les liens vers d’autres documents (e.g. précédent, suivant, stylesheet, …)
• <script>…</script>– Pour ajouter JavaScript
• <style>…</style>– <style type="text/css">…</style> – Spécifie le style du document
• <object>…</object> – Utilisé pour inclure des objets génériques
• <meta … /> – Utilisé pour spécifier des méta-données (e.g. auteur, date, …)
– <META NAME="Author" LANG="fr" CONTENT="Hugo ETIEVANT"> <META NAME="Publisher" CONTENT="Hugo ETIEVANT">
<META NAME="Reply-to" CONTENT="[email protected] (Hugo ETIEVANT)">
Corps• Éléments dans des phrases
– <em>…</em>: emphasis– <strong>…</strong>: strong emphasis– <q>…</q>: quotation– <cite>…</cite>: citation– …
• Pour des codes– <code>…</code>: code snippet– <samp>…</samp>: sample– …
• Formatage spécial– <sub>…</sub> <sup>…</sup>: index ou exposant– <br>: line break
• Lien– <a>…</a>: <a href="URL" title="additional information">link text</a>
• Image et objet– <img …/>, <object>…</object>
• Bloc– <p>…</p>: paragraphe– <hr/>: ligne horizontale
• Heading– <h1>…</h1>, … <h6>…</h6>
• List– <li>…</li> : créer une liste
• Table– <table>…</table> : créer une table– <tr>…</tr> : table row– <td>…</td> : data cell
• …
Affichage du Corps• <BODY BGCOLOR="purple">
</BODY>: couleur de fond• <BODY BACKGROUND="../images/fond.gif">
</BODY> : image de fond• <BODY TEXT="black">
</BODY>: couleur du texte• <BODY LINK="navy">
</BODY> : couleur des liens• <BODY VLINK="#808080">
</BODY>: couleur des liens visités• <BODY TOPMARGIN="50" BOTTOMMARGIN="50"
LEFTMARGIN="40" RIGHTMARGIN="40" ></BODY>: les marges
• …
Lien• <A HREF="adresse_destination"> Texte_ou_image_à_cliquer </A> • <A HREF="intro.txt">Introduction</A>
Introduction • <A HREF="html/intro.php3" TARGET="cadre1"><IMG
SRC="images/a1.gif"></A>
• Lien interne:– Départ :
<A HREF="#mot_clé">Texte_ou_image_à_cliquer</A>– Arrivée :
<A NAME="mot_clé">Texte_ou_image</A> • Email
– <A HREF="mailto:[email protected]"> Ecrivez-moi</A> Ecrivez-moi
– <A HREF="mailto:votre_email?subject= sujet_du_message"> Texte_ou_image_à_cliquer</A>
– <A HREF="mailto:votre_email?body= corps_du_message"> Texte_ou_image_à_cliquer</A>
Type de protocole pour un Lien
Syntaxe Description<A HREF=""> Protocol par défaut : HTTP<A HREF="#"> Lien interne, protocol HTTP<A HREF="http://"> Protocol HTTP<A HREF="pnm://"> Protocol PNM pour le streaming en RealAudio<A HREF="ftp://"> Protocol FTP pour le transfert de fichiers<A HREF="mailto:"> Protocol SMTP pour le courrier électronique<A HREF="news:"> Protocol NNTP pour les forums de discussion<A HREF="telnet://"> Protocol Telnet pour le contrôle d'un ordinateur distant<A HREF="gopher://"> Protocol Gopher pour discussion et transfert de fichier<A HREF="wais://"> Protocol Wais<A HREF="file://"> Adressage local sur un poste non-distant
22
Tableau
• Exemple: un tableau de 3 ligne et 2 colonnes (bordure)
<TABLE BORDER><TR>
<TD>ligne 1, colonne1</TD><TD>ligne1, colonne2</TD></TR><TR>
<TD>ligne 2, colonne1</TD><TD>ligne 2, colonne2</TD></TR><TR>
<TD>ligne 3, colonne1</TD><TD>ligne 3, colonne2</TD></TR></TABLE>
Autres éléments de tableau
• <CAPTION>légende en haut</CAPTION>: Légende en haut
• <CAPTION ALIGN="bottom">légende en bas</CAPTION>: Légende en bas
• <TR><TH>colonne 1</TH><TH>colonne 2</TH></TR>: définir les entêtes des colonnes
• <TABLE BORDER WIDTH=100 HEIGHT=100>: Taille• <TD VALIGN="top">aligné en haut</TD>: L’alignement
dans la cellule d’un tableau• <TABLE BORDER BGCOLOR="red">: couleur de fond• …
Cadre<FRAMESET ROWS="15%,*">
<FRAME NAME="menu primaire" SRC="menu0.php3"> <FRAMESET COLS="50%,*"> <FRAME NAME="sommaire" SRC="sommaire.php3"> <FRAME NAME="article" SRC="article1.php3"></FRAMESET>
</FRAMESET>
menu primaire
som-maire article
Formulaire• <FORM NAME="cyberformulaire"
ACTION="mailto:[email protected]" METHOD="post" ENCTYPE="text/plain"> le contenu du formulaire à envoyer par email à votre adresse mail
</FORM> • Votre nom :
Votre nom : <INPUT TYPE="text" NAME="nom" SIZE="20" MAXLENGTH="30" VALUE="Isidor">
• Votre code secret : Votre code secret : <INPUT TYPE="password" NAME="secret" SIZE="8" MAXLENGTH="8">
• Votre qualité : <BR><INPUT TYPE="radio" NAME="qualite" VALUE="M" CHECKED>Monsieur<BR><INPUT TYPE="radio" NAME="qualite" VALUE="Mme">Madame<BR><INPUT TYPE="radio" NAME="qualite" VALUE="Mlle">Mademoiselle
Isidor
****
Image
• <IMG SRC="adresse_de_l'image" NAME="nom_de_l'image" WIDTH="largeur" HEIGHT="hauteur" ALT="commentaire" BORDER="épaisseur_de_la_bordure" ALIGN="alignement" HSPACE="marge_horizonale" VSPACE="marge_verticale"
USEMAP="#nom_de_la_carte">. • <IMG SRC="images/logo.gif NAME="logo-html" WIDTH=161
HEIGHT=68 ALT="Le point sur les balises HTML" BORDER=1
ALIGN="right" HSPACE=20>
Zone
• <MAP NAME="bulles"><AREA SHAPE="circle" COORDS="50,50,40" HREF="#bulles"></MAP><IMG SRC="images/map1.gif" WIDTH=180
HEIGHT=100 BORDER=0 USEMAP="#bulles">
On peut cliquer ici
Feuille de style• CSS, Cascading Style Sheets • Définir votre propre style pour chaque type de donnée
– Permet de faire un changement global– Réutilisation
• Syntaxe– <BALISE style="propriété: valeur">
• Pour une seule instance:– <H1 style="color: #FF0000">– Le texte inclu dans ce conteneur <H1> sera de couleur rouge.
• Pour tout– <HEAD>
<STYLE type="text/css"> <!-- BALISE { propriété: valeur } --></STYLE></HEAD>
• Importer une feuille de style– <HEAD>
<STYLE type="text/css">@import url(adresse)</STYLE></HEAD>
– <HEAD><LINK href="adresse" rel="stylesheet" type="text/css"></HEAD>
– E.g.: <HEAD> <LINK href="../styles/toto.css" rel="stylesheet" type="text/css">
</HEAD>
Inclure des codes JavaScript
• JavaScript: un langage script qui sera exécuté suite à l’activation par l’utilisateur (e.g. bougeant le curseur, cliquer, …)
• Permet certain dynamisme à la page• Langage dérivé de Java• Syntaxe pour inclure du code dans une page:
– <script language="javascript">votre code javascript ici</script>
– <script type="text/javascript">votre code javascript ici</script>
– <script src="mon_script.js" type="text/javascript" />• mon_script.js: contient le code
Premier exemple
• <script language="javascript">document.write('bonjour');</script>– Afficher « bonjour »– « document » = document courant– « write »
• <a href="javascript:alert('Allo!');">ici</a>– Afficher « Allo! » dans une petite fenêtre message
• <a href="javascript:confirm('d’accord?');">Q</a>– OK, ANNULER
Variable
• <script language="javascript">var s;s = 'bonjour';document.write(s);</script> – Fait la même chose que le script précédent
Fonction
<script language="javascript">function afficherBonjour() { s = 'bonjour'; document.write(s);}afficherBonjour();</script>
Définition
Appel
Fonction
• <script language="javascript">function afficher(i) { if(i<=100) document.write(-i,'<br />'); else document.write('Votre nombre : ‘+i,'<br />');}afficher(25);afficher(125);</script>
• Une fonction qui accepte un paramètre
Afficher la date et l’heure
• <script language="javascript">today = new Date();document.write("Nous sommes le ",today.getDate(),"/",today.getMonth()+1,"/", today.getYear(),"<br />");document.write("Il est ",today.getHours(),":",today.getMinutes(),":", today.getSeconds(),"<br />");</script>
• Nous sommes le 15/8/2007Il est 0:2:54
• today: une variable• getDate(): obtenir la date courante
Rollover
• Changer une image à une autre selon la position du curseur
<a href="index.php3" onMouseOver="document.ex1.src='../images/milieu_.gif’ " onMouseOut="document.ex1.src='../images/milieu.gif’ "> <img src="../images/milieu.gif" width="15" height="17" border="0" name="ex1" /></a>
Popup
• <a href="javascript:void(0); " onClick="window.open(document.location, 'Mapopup','width=200,height=300');"> Cliquez ici !</a>
• Paramètre de open:– l'URL de la page à ouvrir, – le titre que devra porter cette nouvelle fenêtre, – et divers paramètres
• void(0): permet le popup d’être désactivé
Que fait ce code?<script language="javascript">
function verif_email() { if(document.inscription.email.value == '') { alert("Vous devez saisir votre adresse de messagerie électronique !"); return false; } else return true;}</script><form action="mailto:[email protected]" method="POST" enctype="text/plain" name="inscription" onSubmit="return verif_email();"> Votre email : <input type="text" name="email" /> <input type="submit" value="Je m'abonne !" /></form>
Caractère spéciaux
• Par défaut: UTF-8 – caractères sans accent• Pour les caractères spéciaux: &nom;
– accent grâve grave– accent aigüe acute– accent circonflexe circ– cédile cedil– tréma uml– tilde tilde
• Eg– à: à – À: À – ç: ç – é: é – É: É
Références
• HTML– http://www.iro.umontreal.ca/~pift6800/Cours/
Cours4/HTML.htm– http://www.iro.umontreal.ca/~pift1146/
default.htm– http://www.iro.umontreal.ca/~pift1945/