Page Web et HTML IFT6800 – E 2008 Pierre Poulin. Navigation sur le Web Outils –Navigateurs: firefox, Explorer, netscape, … Indiquer une adresse URL (Uniform.

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 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 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.,, …), –format d’affichage (e.g. ), –type de données (e.g. … ) –… 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 )ISOIEC

É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émentaires (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 l’URL de base à partir de laquelle les références relatives sont interprétées –Spécifie les liens vers d’autres 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, …) – empty element tag: balise sans contenu

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 … couleur: un nom, trois #hexadécimal, un rgb(0-255,0-255,0-255)

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 HTTP …plus désuet…

Tableau Exemple: un tableau de 3 lignes 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 en-têtes des colonnes : Taille aligné en haut : alignement dans la cellule d’un tableau : couleur de fond …

Cadre menu primaire som- mairearticle

Formulaire le contenu du formulaire à envoyer par email à votre adresse email 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ées –Permet de faire un changement global –Réutilisation Syntaxe – Pour une seule instance: – –Le texte inclus dans ce conteneur sera de couleur rouge. Pour tout – Importer une feuille de style – @import url(adresse) – –E.g.:

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: – votre code javascript ici – mon_script.js: fichier qui 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 avec un paramètre function afficher(i) { document.write(' Votre nombre ’, i, ' est '); if (i<=100) document.write('inferieur a 100 '); else document.write('superieur a 100 '); } afficher(25); afficher(125);

Afficher la date et l’heure today = new Date(); document.write("Nous sommes le", today.getDate(), "/", today.getMonth()+1, "/", today.getFullYear(), ". "); 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 today.getYear débute en 1900 sur certains navigateurs! today.getMonth retourne 0 pour janvier.

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ères spéciaux Par défaut: UTF-8 – caractères sans accent Pour les caractères spéciaux: &nom; –accent gravegrave –accent aiguacute –accent circonflexecirc –cédillecedil –trémauml –tildetilde E.g. –à: à –À: À –ç: ç –é: é –É: É

Références HTML –http://www.iro.umontreal.ca/~pift6800/Cours/Cours4/ HTML.htmhttp://www.iro.umontreal.ca/~pift6800/Cours/Cours4/ 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 2008 Pierre Poulin. Navigation sur le Web Outils –Navigateurs: firefox, Explorer, netscape, … Indiquer une adresse URL (Uniform.

Présentations similaires

Présentation au sujet: "Page Web et HTML IFT6800 – E 2008 Pierre Poulin. Navigation sur le Web Outils –Navigateurs: firefox, Explorer, netscape, … 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 2008 Pierre Poulin. Navigation sur le Web Outils –Navigateurs: firefox, Explorer, netscape, … Indiquer une adresse URL (Uniform.

Présentations similaires

Présentation au sujet: "Page Web et HTML IFT6800 – E 2008 Pierre Poulin. Navigation sur le Web Outils –Navigateurs: firefox, Explorer, netscape, … Indiquer une adresse URL (Uniform."— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back