Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
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
2
Contenu du cours Partie I: Matériels et Logiciels
Partie II: Édition sous HTML Applications 20/11/2018
3
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
4
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
5
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
6
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
7
Système de fichiers Dreamweaver 2.1 Visualisation d’un fichier HTML
Ouvrir le fichier sous Netscape ou Internet explorer (IE6) 20/11/2018
8
É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
9
É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=" > L ’Université de berkeley </A> </HTML> 20/11/2018
10
Interprétation du code HTML (1er exemple)
20/11/2018
11
Détails du code HTML (1er exemple)
1°/ Accès aux fichiers <A HREF=" > http (ftp) Serveur ou adresse IP 2°/ Taille des caractères H1, H2, H3 Balise ouvrante <Hi> Balise fermante </Hi> (i=1,2,3) 20/11/2018
12
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
13
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
14
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
15
Caractères Code E codé en ASCII
Mais é codé par è ou ou Normal, Gras Balise ouvrante <B> Balise fermante </B> 20/11/2018
16
<BR> : saut de ligne
Paragraphes Unité élémentaire <BR> : saut de ligne 20/11/2018
17
Liste ordonnée Liste non ordonnée Listes <UL> <LI> Cas 1
<OL> <LI> Cas 3 <LI> Cas 4 </OL> 20/11/2018
18
Interprétation Ma page Cas 1 Cas 2 1. Cas 3 2. Cas 4 20/11/2018
19
<A HREF="http://www.berkeley.edu" >
Hyper-lien <A HREF=" > L ’Université de berkeley </A> Visualisation Ma page L’Université de Berkeley 20/11/2018
20
Exple: www.berkeley.edu
Notion d’URL Unified Resource Locator Exple: 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
21
Sur la machine www.upmf-grenoble.fr
Syntaxe d’une URL Accès au document Avec le protocole http Sur la machine Sur le port 9999 (s'utilise assez rarement) Le document est le fichier /ctec/NT/HTML/liens.html 20/11/2018
22
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
23
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).
24
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).
25
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).
26
Microsoft www.w3c.org Nature des fichiers Images …../cs/fichier.gif
…../cs/fichier.jpg Texte f1.txt f2.doc f3.ppt f4.html Microsoft 20/11/2018
27
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
28
FIN du cours 2 20/11/2018
Présentations similaires
