Informatique de base Pr. Michel de Rougemont Ghizlane Elghoumari Université Paris II Panthéon - Assas Informatique de base Cours 2: Langage HTML 20/11/2018
Contenu du cours Partie I: Matériels et Logiciels Partie II: Édition sous HTML Applications 20/11/2018
Matériel & Logiciels Partie I Structure Machine M :mémoire M P : processeur D.D. : disque dur D : disquette CD : cédérom R : réseau P CD R D D.D 20/11/2018
Utilisation de la mémoire Utilisateur 2 P1: Éditeur (Word) P2: Navigateur (Netscape) Utilisateur 1 P2 Données P1 Données Système 20/11/2018
Instructions élémentaires 10 millions d ’instructions/ sec Processeur Pentium, PowerPC Horloge : 300 Mhz Instructions élémentaires 10 millions d ’instructions/ sec C.A. C.L. D. D : décodeur C.A. : Circuits arithmétiques C.L. : Circuits Logiques 20/11/2018
Circuits logiques et arithmétiques Interpréter les instructions Réaliser les opérations arithmétiques Exemple : R1 := R1+ R2 Disque dur Capacité: 10Gb Accès : 10ms Lecture :1kb 20/11/2018
Système de fichiers Dreamweaver 2.1 Visualisation d’un fichier HTML Ouvrir le fichier sous Netscape ou Internet explorer (IE6) 20/11/2018
Édition sous HTML Partie II Logiciels Éditeurs Bloc-Notes (accessoire de Windows) Textpad ( .txt) Word (.doc) Dreamweaver (.htm) Navigateurs Netscape (.htm) Explorer 20/11/2018
Éditeurs Code HTML ( 1er exemple) Wysiwyg What you see is what you get A balisage HTML (HyperText Markup Language) TEX, LATEX Code HTML ( 1er exemple) <HTML><TITLE> Ma page </TITLE> <H1>Chapitre 1 </H1> La taille des caractères est déterminée par des balises. <H2>Section 1 </H2> <A HREF="http://www.berkeley.edu" > L ’Université de berkeley </A> </HTML> 20/11/2018
Interprétation du code HTML (1er exemple) 20/11/2018
Détails du code HTML (1er exemple) 1°/ Accès aux fichiers <A HREF="http://www.berkeley.edu" > http (ftp) Serveur www.berkeley.edu ou adresse IP 2°/ Taille des caractères H1, H2, H3 Balise ouvrante <Hi> Balise fermante </Hi> (i=1,2,3) 20/11/2018
mise en forme de paragraphe, images, liens hypertextes, tableaux... Balises Permettent d'ajouter de l'information qui n'est pas du texte pur : mise en forme de paragraphe, images, liens hypertextes, tableaux... Peuvent être écrites en majuscules ou en minuscules Les syntaxes possibles: <balise> texte </balise> <balise attribut=valeur> texte </balise> <balise attribut1=valeur1 attribut2=valeur2 ...> text</balise> <balise> <balise attribut=valeur ...> 20/11/2018
Document HTML commence par la balise <HTML> et se termine par </HTML> 2 parties : Entête Commence par <HEAD> et se termine par </HEAD> Contient des informations générales sur le document Titre est défini entre les balises <TITLE> et </TITLE> Corps commence par <BODY> et se termine par </BODY> 20/11/2018
Structure d’un document HTML <HEAD> <TITLE> titre du document </TITLE> </HEAD> <BODY> texte du document avec balises de mise en page, de mise en forme, de liens hypertextes, d'images, ... </BODY> </HTML> Application Choisissez un document WWW relativement simple avec votre navigateur et visualisez son fichier source. Netscape, dans le menu déroulant Edit, choisissez View Source 20/11/2018
Caractères Code E codé en ASCII Mais é codé par è ou ou Normal, Gras Balise ouvrante <B> Balise fermante </B> 20/11/2018
<BR> : saut de ligne Paragraphes Unité élémentaire <BR> : saut de ligne 20/11/2018
Liste ordonnée Liste non ordonnée Listes <UL> <LI> Cas 1 <OL> <LI> Cas 3 <LI> Cas 4 </OL> 20/11/2018
Interprétation Ma page Cas 1 Cas 2 1. Cas 3 2. Cas 4 20/11/2018
<A HREF="http://www.berkeley.edu" > Hyper-lien <A HREF="http://www.berkeley.edu" > L ’Université de berkeley </A> Visualisation Ma page L’Université de Berkeley 20/11/2018
Exple: www.berkeley.edu Notion d’URL Unified Resource Locator Exple: www.berkeley.edu Suite de caractères (sans espace) Définit l'endroit (locator) où se trouve un document (resource) Champ Location du navigateur Appelée aussi adresse d'une page WWW 20/11/2018
Sur la machine www.upmf-grenoble.fr Syntaxe d’une URL http://www.upmf-grenoble.fr:9999/ctec/NT/HTML/liens.html Accès au document Avec le protocole http Sur la machine www.upmf-grenoble.fr Sur le port 9999 (s'utilise assez rarement) Le document est le fichier /ctec/NT/HTML/liens.html 20/11/2018
Pour les documents HTML protocole est presque toujours http Exemples de domaines Suffixes .com wanadoo.com aol.com Suffixes .edu berkeley.edu, stanford.edu Suffixes .fr u-paris2.fr, lri.fr 20/11/2018
URL absolues, URL relatives URL relative à la machine: /ctec/NT/coursHTML.html URL relatives au répertoire du document ./balises.html : "." signifie le répertoire courant (le même que le fichier d'où part le lien) ../EUDORA/index.html ".." signifie le répertoire en amont (qui contient le répertoire du fichier d'où part le lien) 20/11/2018 Les noms de répertoires sont séparés par des "/". ".." signifie le répertoire en amont (celui qui contient le répertoire du fichier d'où part le lien).
URL absolues, URL relatives URL absolue utilisée lors de la création d’ un lien vers un autre site WWW URL relative au répertoire d'un document lors de la création d’un lien vers un document du même site 20/11/2018 Les noms de répertoires sont séparés par des "/". ".." signifie le répertoire en amont (celui qui contient le répertoire du fichier d'où part le lien).
Vérification des hyper-lien Dreamweaver permet de vérifier si tous les liens d'une page pointent sur des documents existants Vérification: File puis Check links... Les liens sont alors vérifiés un à un 20/11/2018 Les noms de répertoires sont séparés par des "/". ".." signifie le répertoire en amont (celui qui contient le répertoire du fichier d'où part le lien).
Microsoft www.w3c.org Nature des fichiers Images …../cs/fichier.gif …../cs/fichier.jpg Texte f1.txt f2.doc f3.ppt f4.html Microsoft www.w3c.org 20/11/2018
Applications TD 1 /II Édition d’un fichier (AliceMac.txt), code des caractères : ASCII et Unicode Édition HTML manuelle et sous Dreamweaver, Caractères, paragraphes, Images, Ancres, Listes 20/11/2018
FIN du cours 2 20/11/2018