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 Adresse sur un site: –Hiérarchique, comme lorganisation des répertoires et fichiers sur Unix …~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. 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=" 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é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 – 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 à 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 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_ () { if(document.inscription. .value == '') { alert("Vous devez saisir votre adresse de messagerie électronique !"); return false; } else return true; } Votre
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 – ours4/HTML.htmhttp:// ours4/HTML.htm – htmhttp:// htm –