Page Web et HTML IFT6800 – E 2007 Jian-Yun Nie. Navigation sur le Web Outils –Navigateur: Netscape, Explorer, (Mosaic, …) Indiquer une adresse URL (Uniform.

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 à lURL 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 lorganisation 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 C'est le conteneur de l'entête. C'est le conteneur du corps. C'est ici que nous écrirons. 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)www.iro.umontreal.ca Permission dajouter 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 dautres 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.,, …), –le format daffichage (e.g. ), –Le type de données (e.g. … ) –… Essentiellement, HTML vise à indiquer le format daffichage –+ 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 )ISOIEC –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"> Bonjour nie 1 0 2007-08-15T04:40:00Z 1 9 DIRO 1 9 10.6830 Clean MicrosoftInternetExplorer4  /* 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";} Bonjour!

But du cours Apprendre à comprendre les codes HTML Savoir comment ajouter des éléments supplémentaire (code JavaScript) bonjour Bonjour!

Un autre exemple Exemple de HTML Ceci est une phrase avec un hyperlien. Ceci est un paragraphe où il n'y a pas d'hyperlien. html head title texte body texte a p

Les éléments HTML Emboîtement:

Les éléments en détails … –Délimite le document en HTML … –Section en-tête … –Corps du document

En-tête … –Titre du document (au plus un par document) – –Spécifie lURL de base à partir de laquelle les références relatives sont interprétées –Spédifie les liens vers dautres documents (e.g. précédent, suivant, stylesheet, …) … –Pour ajouter JavaScript … – … –Spécifie le style du document … –Utilisé pour inclure des objets génériques –Utilisé pour spécifier des méta-données (e.g. auteur, date, …) –

Corps Éléments dans des phrases – … : emphasis – … : strong emphasis – … : quotation – … : citation –… Pour des codes – … : code snippet – … : sample –… Formatage spécial – … … : index ou exposant – : line break Lien – … : link text Image et objet –, … Bloc – … : paragraphe – : ligne horizontale Heading – …, … … List – … : créer une liste Table – … : créer une table – … : table row – … : data cell …

Affichage du Corps : couleur de fond : image de fond : couleur du texte : couleur des liens : couleur des liens visités : les marges …

Lien Texte_ou_image_à_cliquer Introduction Introduction Introduction Lien interne: –Départ : Texte_ou_image_à_cliquer –Arrivée : Texte_ou_image Email – Ecrivez-moi Ecrivez-moi Ecrivez-moi – Texte_ou_image_à_cliquer

Type de protocole pour un Lien SyntaxeDescription 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) ligne 1, colonne1 ligne1, colonne2 ligne 2, colonne1 ligne 2, colonne2 ligne 3, colonne1 ligne 3, colonne2

Autres éléments de tableau légende en haut : Légende en haut légende en bas : Légende en bas colonne 1 colonne 2 : définir les entêtes des colonnes : Taille aligné en haut : Lalignement dans la cellule dun tableau : couleur de fond …

Cadre menu primaire som- mairearticle

Formulaire le contenu du formulaire à envoyer par email à votre adresse mail Votre nom : Votre code secret : Votre qualité : Monsieur Madame Mademoiselle Isidor ****

Image.

Zone 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 – Pour une seule instance: – –Le texte inclu dans ce conteneur sera de couleur rouge. Pour tout – Importer une feuille de style – @import url(adresse) – –E.g.:

Inclure des codes JavaScript JavaScript: un langage script qui sera exécuté suite à lactivation par lutilisateur (e.g. bougeant le curseur, cliquer, …) Permet certain dynamisme à la page Langage dérivé de Java Syntaxe pour inclure du code dans une page: – votre code javascript ici – mon_script.js: contient le code

Premier exemple document.write('bonjour'); –Afficher « bonjour » –« document » = document courant –« write » ici –Afficher « Allo! » dans une petite fenêtre message Q –OK, ANNULER

Variable var s; s = 'bonjour'; document.write(s); –Fait la même chose que le script précédent

Fonction function afficherBonjour() { s = 'bonjour'; document.write(s); } afficherBonjour(); Définition Appel

Fonction function afficher(i) { if(i '); else document.write('Votre nombre : +i,' '); } afficher(25); afficher(125); Une fonction qui accepte un paramètre

Afficher la date et lheure today = new Date(); document.write("Nous sommes le ",today.getDate(),"/",today.getMonth()+1,"/", today.getYear()," "); document.write("Il est ",today.getHours(),":",today.getMinutes(),":", today.getSeconds()," "); 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

Popup Cliquez ici ! 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? function verif_email() { if(document.inscription.email.value == '') { alert("Vous devez saisir votre adresse de messagerie électronique !"); return false; } else return true; } Votre email :

Caractère spéciaux Par défaut: UTF-8 – caractères sans accent Pour les caractères spéciaux: &nom; –accent grâvegrave –accent aigüeacute –accent circonflexecirc –cédilecedil –trémauml –tildetilde Eg –à: à –À: À –ç: ç –é: é –É: É

Références HTML –http://www.iro.umontreal.ca/~pift6800/Cours/C ours4/HTML.htmhttp://www.iro.umontreal.ca/~pift6800/Cours/C ours4/HTML.htm –http://www.iro.umontreal.ca/~pift1146/default. htmhttp://www.iro.umontreal.ca/~pift1146/default. htm –http://www.iro.umontreal.ca/~pift1945/http://www.iro.umontreal.ca/~pift1945/

Page Web et HTML IFT6800 – E 2007 Jian-Yun Nie. Navigation sur le Web Outils –Navigateur: Netscape, Explorer, (Mosaic, …) Indiquer une adresse URL (Uniform.

Présentations similaires

Présentation au sujet: "Page Web et HTML IFT6800 – E 2007 Jian-Yun Nie. Navigation sur le Web Outils –Navigateur: Netscape, Explorer, (Mosaic, …) Indiquer une adresse URL (Uniform."— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

Page Web et HTML IFT6800 – E 2007 Jian-Yun Nie. Navigation sur le Web Outils –Navigateur: Netscape, Explorer, (Mosaic, …) Indiquer une adresse URL (Uniform.

Présentations similaires

Présentation au sujet: "Page Web et HTML IFT6800 – E 2007 Jian-Yun Nie. Navigation sur le Web Outils –Navigateur: Netscape, Explorer, (Mosaic, …) Indiquer une adresse URL (Uniform."— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back