Page Web et HTML IFT6800 – E 2007 Jian-Yun Nie. Navigation sur le Web Outils –Navigateur:...

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

http://www.iro.umontreal.ca/~nie/IFT6800/index.htm

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)

http://www.iro.umontreal.ca/

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)

http://en.wikipedia.org/wiki/International_Organization_for_Standardization

http://en.wikipedia.org/wiki/International_Electrotechnical_Commission

É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></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: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"> </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/

Date post:	04-Apr-2015
Category:	Documents
Upload:	baptiste-vignal
View:	104 times
Download:	1 times

Page Web et HTML IFT6800 – E 2007 Jian-Yun Nie. Navigation sur le Web Outils –Navigateur:...

Documents