Page Web et HTML

Transcript Page Web et HTML

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 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
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>
Tag/Balise, Markup/Marqueur
<HEAD>
C'est le conteneur de l'entête.
contenu
</HEAD>
<BODY>
C'est le conteneur du corps.
C'est ici que nous écrirons.
</BODY>
</HTML>
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>

<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é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>
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 … />
–
–
•
<style type="text/css">…</style>
Spécifie le style du document
<object>…</object>
–
•
Pour ajouter JavaScript
<style>…</style>
–
–
•
Spédifie les liens vers d’autres documents (e.g. précédent, suivant, stylesheet, …)
<script>…</script>
–
•
<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 … />
–
•
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
• <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
<A HREF="">
<A HREF="#">
<A HREF="http://">
<A HREF="pnm://">
<A HREF="ftp://">
<A HREF="mailto:">
<A HREF="news:">
<A HREF="telnet://">
<A HREF="gopher://">
<A HREF="wais://">
<A HREF="file://">
Description
Protocol par défaut : HTTP
Lien interne, protocol HTTP
Protocol HTTP
Protocol PNM pour le streaming en RealAudio
Protocol FTP pour le transfert de fichiers
Protocol SMTP pour le courrier électronique
Protocol NNTP pour les forums de discussion
Protocol Telnet pour le contrôle d'un ordinateur distant
Protocol Gopher pour discussion et transfert de fichier
Protocol Wais
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
sommaire 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 : 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
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
–
–
•
Syntaxe
–
•
<H1 style="color: #FF0000">
Le texte inclu 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 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/2007
Il 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/m
ilieu_.gif’ "
onMouseOut="document.ex1.src='../images/mil
ieu.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
accent aigüe
accent circonflexe
cédile
tréma
tilde
• Eg
–
–
–
–
–
à: à
À: À
ç: ç
é: é
É: É
grave
acute
circ
cedil
uml
tilde
Références
• HTML
– http://www.iro.umontreal.ca/~pift6800/Cours/C
ours4/HTML.htm
– http://www.iro.umontreal.ca/~pift1146/default.
htm
– http://www.iro.umontreal.ca/~pift1945/

Page Web et HTML

Transcript Page Web et HTML

Directory