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 Adresse sur un site: –Hiérarchique, comme l’organisation des répertoires et fichiers sur Unix …~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. 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=" Bonjour nie T04:40:00Z 1 9 DIRO Clean MicrosoftInternetExplorer4 <!-- /* Font Definitions {font-family:SimSun; panose-1: ; mso-font-alt:\5B8B\4F53; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature: panose-1: ; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature: ;} /* 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; 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 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 – 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 à votre adresse 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 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_ () { if(document.inscription. .value == '') { alert("Vous devez saisir votre adresse de messagerie électronique !"); return false; } else return true; } Votre
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 – HTML.htmhttp:// HTML.htm – –