Document 7346642

Transcript Document 7346642

Page Web et HTML
IFT6800 – E 2008
Pierre Poulin
Navigation sur le Web
• Outils
– Navigateurs: firefox, Explorer, netscape, …
• 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 site
www.iro.umontreal.ca/~nie/IFT6800/index.htm
• Adresse sur un site:
– Hiérarchique, comme l’organisation des répertoires et fichiers
sur Unix
www.iro.umontreal.ca
…
~nie
…
IFT6800
…
index.htm
…
Répertoire
HTML dans le
compte de
l’usager nie
…
…
Savoir comment afficher un
document
• Comment afficher le document « index.htm »?
– Formatage, couleur, taille de caractères, …
• 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
Tag/Balise,
Markup/Marqueur
Contenu
Une paire de balises
<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>
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; vérifier les permissions)
• Pour être à partir d’autres pages, 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
– rôle de chaque segment de contenu (e.g. <H1>,
<HEAD>, …),
– format d’affichage (e.g. <font color="white“>),
– type de données (e.g. <script language =
"javascript">…</script> )
–…
• Essentiellement, HTML vise à indiquer le format
d’affichage et des extensions 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 du W3C
– 1995: HTML 2.0
– 1999: HTML 4.01 (dernière version)
– 2000: HTML devient un standard international (ISO/IEC
15445:2000 )
É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>

<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>

</head>
<body lang=EN-US style='tab-interval:36.0pt'>
<div class=Section1>
<p class=MsoNormal><span lang=FR-CA style='mso-ansi-language:FRCA'>Bonjour!<o:p></o:p></span></p>
<p class=MsoNormal><span lang=FR-CA style='mso-ansi-language:FRCA'><o:p> </o:p></span></p>
</div>
</body>
</html>
But du cours
• Apprendre à comprendre les codes HTML
• Savoir comment ajouter des éléments supplémentaires
(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>
html
head
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>
–
•
<base … />
–
–
•
Pour ajouter JavaScript
<style type="text/css">…</style>
Spécifie le style du document
<object>…</object>
–
•
Spécifie les liens vers d’autres documents (e.g. précédent, suivant, stylesheet, …)
<style>…</style>
–
–
•
<base href="http://www.w3schools.com/>
Spécifie l’URL de base à partir de laquelle les références relatives sont interprétées
<script>…</script>
–
•
empty element tag: balise sans contenu
<link … />
–
•
Titre du document (au plus un par document)
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
–
–
–
–
–
•
Pour des codes
–
–
–
•
<em>…</em>: emphasis
<strong>…</strong>: strong emphasis
<q>…</q>: quotation
<cite>…</cite>: citation
…
<code>…</code>: code snippet
<samp>…</samp>: sample
…
Formatage spécial
–
–
<sub>…</sub> <sup>…</sup>: index ou exposant
<br>: line break
•
Lien
•
Image et objet
–
–
•
<p>…</p>: paragraphe
<hr>: ligne horizontale
Heading
–
•
List
•
Table
–
–
–
–
•
<img …/>, <object>…</object>
Bloc
–
–
•
<a>…</a>: <a href="URL" title="additional information">link text</a>
…
<h1>…</h1>, … <h6>…</h6>
<li>…</li> : créer une liste
<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
couleur:
un nom,
• <BODY TEXT="black">
trois #hexadécimal,
</BODY>: couleur du texte
un rgb(0-255,0-255,0-255)
• <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
•
•
•
•
•
•
•
•
•
•
•
<A HREF="">
HTTP<A HREF="#">
<A HREF="http://">
<A HREF="pnm://">
<A HREF="ftp://">
<A HREF="mailto:">
<A HREF="news:">
<A HREF="telnet://">
<A HREF="gopher://"> …plus désuet…
<A HREF="wais://"> … plus désuet…
<A HREF="file://">
Tableau
• Exemple: un tableau de 3 lignes 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 en-têtes des colonnes
• <TABLE BORDER WIDTH=100 HEIGHT=100>: Taille
• <TD VALIGN="top">aligné en haut
</TD>: alignement dans la cellule d’un tableau
• <TABLE BORDER BGCOLOR="red">: couleur de fond
• …
Cadre
<FRAMESET ROWS="15%,*">
<FRAME NAME="menu" SRC="menu0.php3">
<FRAMESET COLS="50%,*">
<FRAME NAME="sommaire" SRC="sommaire.php3">
<FRAME NAME="article" SRC="article1.php3">
</FRAMESET>
</FRAMESET>
menu primaire
sommaire article
Formulaire
• <FORM NAME="cyberformulaire"
ACTION="mailto:[email protected]" METHOD="post"
ENCTYPE="text/plain">
le contenu du formulaire à envoyer par email à votre adresse email
</FORM>
• Votre nom : Isidor
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<BR>
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ées
–
–
•
Syntaxe
–
•
<H1 style="color: #FF0000">
Le texte inclus dans ce conteneur <H1> sera de couleur rouge.
Pour tout
–
•
<BALISE style="propriété:valeur">
Pour une seule instance:
–
–
•
Permet de faire un changement global
Réutilisation
<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 du code JavaScript
• JavaScript: un langage script qui sera exécuté suite à
l’activation par l’utilisateur (e.g. en bougeant le curseur,
en cliquant, …)
• Permet un 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: fichier qui 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 avec un paramètre
<script language="javascript">
function afficher(i) {
document.write('<p>Votre nombre ’, i, ' est ');
if (i<=100)
document.write('inferieur a 100 <br>');
else
document.write('superieur a 100 <br>');
}
afficher(25);
afficher(125);
</script>
Afficher la date et l’heure
• <script language="javascript">
today = new Date();
document.write("Nous sommes le", today.getDate(), "/",
today.getMonth()+1, "/", today.getFullYear(), ".<br>");
document.write("Il est ", today.getHours(), ":",
today.getMinutes(), ":", today.getSeconds(), ".<br>");
</script>
• Nous sommes le 15/8/2007.
Il est 0:2:54.
• today: une variable
• getDate(): obtenir la date courante
today.getMonth retourne 0
pour janvier.
today.getYear débute en 1900
sur certains navigateurs!
Rollover
• <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>
• Changer une image à une autre selon la position du curseur
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ères spéciaux
• Par défaut: UTF-8 – caractères sans accent
• Pour les caractères spéciaux: &nom;
–
–
–
–
–
–
accent grave
accent aigu
accent circonflexe
cédille
tréma
tilde
• E.g.
–
–
–
–
–
à: à
À: À
ç: ç
é: é
É: É
grave
acute
circ
cedil
uml
tilde
Références
• HTML
– http://www.iro.umontreal.ca/~pift6800/Cours/Cours4/H
TML.htm
– http://www.iro.umontreal.ca/~pift1146/default.htm
– http://www.iro.umontreal.ca/~pift1945/

Document 7346642

Transcript Document 7346642

Directory