C005-ΕΙ ΙΚΑ ΚΕΦΑΛΑΙΑ ΣΥΣΤΗΜΑΤΩΝ ΛΟΓΙΣΜΙΚΟΥ ΣΤΟ ΙΑ ΙΚΤΥΟ 10ο Εξάµηνο και Μεταπτυχιακός Κύκλος Σπουδών Μέρος Α (Ν. Αβούρης) ΕΒ ΟΜΑ ΙΑΙΑ Ι ΑΣΚΑΛΙΑ (2003-04): 3 ώρες θεωρία (Παρασκευή 9-12) 1 ώρα εργαστήριο: (Α ευτέρα 9-10, Β Τρίτη 9-10, Γ Παρασκευή 12-1) Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 1
Σκοπός - Περιεχόµενο Σκοπός του µαθήµατος είναι η µελέτη της τρέχουσας τεχνολογίας που διευκολύνει την ανάπτυξη συστηµάτων λογισµικού στο διαδίκτυο Μέρος Α (Αβούρης) Εισαγωγή στο διαδίκτυο, αρχιτεκτονική, πρωτόκολλα Γλώσσες διαδικτύου (HTML, JavaScript, XML) Γλώσσες προγραµµατισµού στην πλευρά server (ASP, PHP) Ολοκλήρωση βάσεων δεδοµένων στο διαδίκτυο. Μέρος Β και Γ (Σερπάνος- Χούσος) Internet Cashing, Η ανάπτυξη υποδοµής του διαδικτύου. Αλγόριθµοι και τεχνικές Παραδείγµατα εφαρµογών στο διαδίκτυο: Ηλεκτρονικό Εµπόριο, Εκπαίδευση από απόσταση. Επιτήρηση διεργασιών, Εξυπηρετητές ειδικών υπολογισµών. Application Service Providers Grid technology Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 2
Βιβλιογραφία Σ. Ρετάλης και Γ. Τσέλιος HTML από το απλό στο σύνθετο, Καστανιώτης 2003. D. Ray E. Ray, Mastering HTML 4, Sybex, 1999 D. Martin, et al. Professional XML, Wrox, 2000. etc. Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 3
Εισαγωγή- Ιστορία (1) 60ς: πρώτο Packet Switching Network δίκτυο ARPANET 72 Internet Mail 74 Vint Cerf, Bob Kahn : TCP/IP 83 To ARPANET δέχεται το TCP/IP σαν στάνταρ 83 Το ARPANET χωρίζεται σε ARPANET & MILNET 84 Το Internet ξεπερνά τους 1.000 Hosts 84 Εισαγωγή του Domain Name Server 87 Το Internet ξεπερνά τους 10.000 Hosts Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 4
Εισαγωγή- Ιστορία (2) 89 Το Internet ξεπερνά τους 100,000 Hosts 90 Το ARPANET παύει να υπάρχει 86 ηµιουργία του NSFNET 91 Η NSF αίρει τον περιορισµό εµπορικής χρήσης του διαδικτύου 92 Το Internet ξεπερνά τους 1 εκατοµµύριο Hosts 92 Ο ιστός (Web) ανακαλύφθηκε από τον Tim Berners-Lee (CERN) 93 O γραφικός φυλλοµετρητής MOSAIC δηµιουργήθηκε από τον Marc Andreesen Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 5
Μερικά Ονόµατα... Joseph C.R. Licklider (ARPA/IPTO η ιδέα του δικτύου ARPANET), Bob Taylor (δηµιουργός του ARPANET) Vint Cerf, Bob Kahn (ορίζουν τα TCP IP) Tim Berners-Lee (παγκόσµιος ιστός) Marc Andreessen (γραφικός φυλλοµετρητής MOSAIC, NETSCAPE) Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 6
90ς- σήµερα : Εκθετική αύξηση Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 7
.GR domain (1/04) This Month Last Month Change % Change % Change All TLDs Hosts Counted 329,926 263,061 66,865 +25.4% +2.8% Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 8
Η εξέλιξη... ιαλειτουργικότητα πληροφοριακών συστηµάτων To video και audio streaming προκαλεί σύγκλιση της τηλεόρασης και υπολογιστή. Ανάπτυξη ηλεκτρονικού εµπόριου (electronic commerce), ηλεκτρονικών υπηρεσιών. Ανάπτυξη µηχανισµών χρέωσης των υπηρεσιών του διαδικτύου Η διανοµή λογισµικού µέσω του διαδικτύου Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 9
Ερωτήσεις Q1 Τι είναι τα RFC, ποιο το RFC για το email, FTP Ανακαλύψετε περισσότερες λεπτοµέρειες για τη ζωή των εφευρετών του διαδικτύου (π.χ. πηγή K. Hafner, M. Lyon, 96) Πώς µετράµε τον αριθµό hosts (πηγή ;) Ποια η σχέση παγκόσµιου ιστού και διαδικτύου; Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 10
Αρχιτεκτονική διαδικτύου FTP HTTP TELNET SNMP MBONE TCP UDP Connectionoriented IP (ICMP, IGMP) Connectionless Internet addressing Physical Layer Physical wiring Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 11
ιευθύνσεις IP Μοναδικές διευθύνσεις κάθε κόµβου του διαδικτύου (32 bit). ίνονται από το InterNIC απαρτίζονται από 4 τµήµατα των 8 bit (τιµές 0-255) που ορίζουν ιεραρχικά : κατηγορία δικτύου, διεύθυνση δικτύου, µηχανή Υπάρχουν 3 κατηγορίες IP δικτύου (Α,B,C) Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 12
Κατηγορίες δικτύων IP 7 bits 24 bits Class A 0 Netid Hostid 14 bits 16 bits Class B 1 0 Netid Hostid 21 bits 8 bits Class C 1 1 0 Netid Hostid Class D 28 bits 1 1 1 0 Multicast Group id Class E 27 bits 1 1 1 1 0 ( εσµευµένα για µελλοντική χρήση) Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 13
Εύρος διευθύνσεων Κλάση Εύρος διευθύνσεων A 0.0.0.0 ως 127.255.255.255 Β 128.0.0.0 ως 191.255.255.255 C 192.0.0.0 ως 223.255.255.255 D 224.0.0.0 ως 239.255.255.255 E 240.0.0.0 ως 247.255.255.255 Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 14
Άσκηση (c1) Έστω ότι πρέπει να διαχειριστούµε ένα δίκτυο που έχει IP 150.251.110.21 Να βρείτε τι κατηγορίας δίκτυο είναι. Πόσοι υπολογιστές µε διακριτές διευθύνσεις IP µπορούν να οριστούν στο δίκτυο; προτείνετε τρόπους οργάνωσης των υπολογιστών αυτών Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 15
Subnet Masks Οι µάσκα υποδικτύου είναι µηχανισµός µέσω του οποίου µπορούµε να καθορίσουµε ποιο τµήµα της διεύθυνσης IP είναι η διεύθυνση δικτύου (netid) και ποιο τµήµα είναι η διεύθυνση του υπολογιστή (hostid). Η µάσκα είναι ένας αριθµός 32 bit που έχει ψηφίο 1 για netid και Ο για hostid. 16 bits 8 bits 8 bits Netid subnetid hostid Subnet Mask: 1111111111111111 11111111 00000000 = 255.255.255.0 Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 16
IPv6 Η τρέχουσα έκδοση του πρωτοκόλλου ΙΡ (έκδοση 4) παρουσιάζει προβλήµατα, µε κύριο αυτό του µικρού αριθµού δυνατών διευθύνσεων Νέα έκδοση IPv6 έχει µήκος διευθύνσεων 128 bits γρηγορότερη επεξεργασία επικεφαλίδων που έχουν λιγότερα πεδία µηχανισµοί πιστοποίησης και ασφαλείας µηχανισµοί χαρακτηρισµού πακέτων για εφαρµογές πραγµατικού χρόνου. Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 17
Ασκήσεις (c2) Να περιγράψετε το µηχανισµό µέσω του οποίου ένας υπολογιστής δικτύου µπορεί να αποφασίσει αν µια πληροφορία προορίζεται για υπολογιστή διαφορετικού δικτύου ή υποδικτύου ή του ιδίου υποδικτύου όταν γνωρίζει την διεύθυνση του και την µάσκα υποδικτύου. Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 18
Άσκηση (c3) Έστω ότι η διεύθυνση µας είναι 140.252.1.1 και ότι η µάσκα υποδικτύου είναι 255.255.255.0. Να βρείτε τη σχέση µας µε τους εξής υπολογιστές: (α) 140.252.4.5 (β) 140.252.1.22 (γ) 192.43.235.6 Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 19
DNS Μηχανισµός µετασχηµατισµού των διευθύνσεων IP σε ονόµατα υπολογιστών. Από 150.140.186.106 σε homer.clab.ee.upatras.gr στις διευθύνσεις το πιο ειδικό τµήµα της διεύθυνσης βρίσκεται στο αριστερό άκρο. Μηχανισµοί δροµολόγησης (δυναµική ή στατική), πίνακες δροµολόγησης. Πρωτόκολλο ανίχνευσης σφαλµάτων Internet Control Message Protocol, ICMP) Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 20
Πρωτόκολλα SLIP και PPP Πρωτόκολλα για µεταφορά πακέτων µεταξύ 2 σηµείων µέσω σειριακής γραµµής. SLIP : Παρέχει πλαισίωση Framing όπως το Ethernet, όµως δεν έχει µηχανισµούς για ανταλλαγή πληροφοριών διευθύνσεων, δεν έχει µηχανισµό ανίχνευσης και διόρθωσης λαθών, δεν παρέχει µηχανισµό συµπίεσης PPP απαντά στις ελλείψεις του SLIP. Αποτελείται από το HDLC, LCP, NCP. Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 21
FTP (rfc 959) Υποστηρίζει πιστοποίηση ταυτότητας χρήστη και περιήγηση σε καταλόγους. Επίσης trivial FTP(rfc1350) User Interface User Server Protocol intepreter FTP Commands User protocol intepreter File System Server data transfer module Data connection User data transfer module File System Server-FTP User-FTP Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 22
email SMTP (rfc 821,822), MIME (rfc 2045, 2049), POP, IMAP User Agent SMTP Mail Transfer Agent SMTP Mail Transfer Agent SMTP File I/O Mail Transfer Agent POP/ IMAP SMTP User Agent Message Store Offline Message Store Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 23
Ο Παγκόσµιος ιστός (WWW) URL (ενιαίο πρωτόκολλο διευθύνσεων πόρων) CLIENT (φυλλοµετρητής) HTTP (πρωτόκολλο µετάδοσης) WEB SERVER HTML (γλώσσα µορφοποίησης περιεχοµένου) Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 24
URL ιεύθυνση ενός πόρου του δικτύου : <scheme>:<scheme-specific name> π.χ: <protocol>://<user>:<password>@<host>: <port>/<path> ιστοσελίδα: http://www.ee.upatras.gr/hci/index.html ftp://hermes.clab.ee.upatras.gr/pub/temp.zip Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 25
Hypertext Transfer Protocol (HTTP) Πρωτόκολλο µεταφοράς δεδοµένων µεταξύ πελάτη - εξυπηρετητή παγκόσµιου ιστού. εδοµένα που µεταφέρονται είναι σε µορφή MIME και συνοδεύονται από πληροφορίες χρήσιµες για τη µεταφορά. Σήµερα το HTTP v.1.1 υποστηρίζει: λιγότερες TCP συνδέσεις σε σχέση µε HTTP 1.0 συµπίεση και αποσυµπίεση των δεδοµένων. πολλαπλές γλώσσες. µεταφορά ενός κοµµατιού ενός αρχείου. virtual hosting. Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 26
HTML (γλώσσα µορφοποίησης περιεχοµένου) Απλοποιηµένη έκδοση της γλώσσας SGML Η πιο διαδεδοµένη έκδοση η 3.2. Πρόσφατα έκδοση 4.0. Οργανισµός προτυποποίησης W3C (World-Wide Web Consortium) Επίσης προσπάθεια για έκδοση Dynamic HTML που ενσωµατώνει στοιχεία διαδικαστικής γλώσσας (Ενσωµατώνει Scripting Γλώσσα). Εταιρείες φυλλοµετρητών εκδίδουν επεκτάσεις εκτός προτύπου (MS, Netscape) Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 27
HTML syntax Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 28
οµή σελίδας HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Ο τίτλος της σελίδας</title>... άλλα στοιχεία που τοποθετούνται στο στοιχείο HEAD... </HEAD> <BODY>... κύριος κορµός της σελίδας... </BODY> </HTML> Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 29
Ετικέτες HTML Ετικέτα= <εντολή [παράµετρος1] [παράµετρος2]> Ζεύγη <εντολή>... </εντολή> ετικέτες για... τη µορφοποίηση του κειµένου ηµιουργία πινάκων τη δόµησή του κειµένου σε ενότητες την εισαγωγή εικόνων, φωτογραφιών, ήχου κ.ά. τη σύνδεσή του µε άλλα υπερκείµενα µε τη χρήση υπερσυνδέσµων τη δηµιουργία φορµών Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 30
<!DOCTYPE... Η ετικέτα <!DOCTYPE... > δηλώνει την έκδοση HTML του έγγράφου. Π.χ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 31
Ετικέτες στο Τµήµα <HEAD>.. </HEAD> <TITLE> Ορίζει τον τίτλο της σελίδας <ISINDEX> Μηχανισµός απλών αναζητήσεων <BASE> Ορίζει τη βάση αρχής για καθορισµό των σχετικών URL <SCRIPT> Καθορισµός της scripting γλώσσας <STYLE> Καθορισµός Style Sheets <META> Καθορισµός ζεύγους πληροφοριών όνοµα και τιµή <LINK> Ορισµός σχέσεων µε άλλα κείµενα Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 32
<BODY (παράµετροι) > Παράµετροι που αφορούν όλη τη σελίδα bgcolor Καθορίζει το χρώµα του φόντου της σελίδας. text χρώµα των χαρακτήρων του κειµένου. link χρώµα των χαρακτήρων των link που δεν έχει επισκεφτεί ακόµη ο χρήστης. vlink χρώµα των χαρακτήρων των link που έχει επισκεφτεί ο χρήστης. alink χρώµα των χαρακτήρων των link τη στιγµή που ο χρήστης επιλέγει το link. Background URL µια εικόνας (είδους.gif ή.jpg) που θα χρησιµοποιηθεί επαναληπτικά (tile) για το σχηµατισµό του φόντου της σελίδας Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 33
Χρώµατα Όνοµα Hex Black #000000 Green #008000 Silver #C0C0C0 Lime #00FF00 Grey #808080 Olive #808000 White #FFFFFF Yellow #FFFF00 Όνοµα Hex Maroon #800000 Navy #000080 Red #FF0000 Blue #0000FF Purple #800080 Teal #008080 Fuchsia #FF00FF Aqua #00FFFF Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 34
< BODY> παραδείγµατα <BODY BGCOLOR= #000ABC TEXT= #000000 LINK= #FFFFFF VLINK= #999999 ALINK= #FF0000 > <BODY BACKGROUND= images/baloon.gif > (να βρείτε το νόηµα της ετικέτας) Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 35
Ετικέτες µορφοποίησης παραγράφων-περιοχών κειµένου <H1>, <H2>,... <H6> Επικεφαλίδα π.χ. <H2 ALLIGN= LEFT> </H2> <P > Παράγραφος π.χ. <P ALIGN=LEFT>... </P> <UL> Μη διατεταγµένη λίστα ( ) π.χ. <UL> <LI> Lions <LI> Tigers <LI> Bears </UL> <OL> ιατεταγµένη λίστα (1.,2.,3. ) <DL> Λίστα ορισµού (<DT>, <DD> ) π.χ. <DL> <DT> HTML <DD> Hypertext Mark Up Language </DL> Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 36
Μορφοποίηση κειµένου <I> Πλαγιαστός τύπος κειµένου <B> Τύπος έντονου κειµένου (bold) <U> Τύπος υπογραµµισµένου κειµένου <STRIKE> Τύπος κειµένου strike-through <TT> Κείµενο σε teletype ή monospaced µορφή <BIG> Κείµενο σε κεφαλαία <SMALL> Κείµενο σε πεζά <SUB> Κείµενο σε µορφή δείκτη (Subscript) H<SUB>2</SUB>SO<SUB>4</SUB> <SUP> Κείµενο σε µορφή εκθέτη (Superscript) (x + y) <SUP> 2 </SUP> = x <SUP> 2 </SUP> + y <SUP> 2 </SUP> + 2xy Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 37
Μορφοποίηση κειµένου (συνεχ.) <PRE> </PRE> προ- µορφοποιηµένο κείµενο συνήθως σταθερού διαστήµατος. <DIV> </DIV> Χωρισµός κειµένου σε περιοχές π.χ. <DIV align=center> <CENTER> στοίχιση κειµένου στο κέντρο <BLOCKQUOTE> παράγραφος µε πιο δεξιά στοίχιση από το προηγούµενο κείµενο Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 38
Μορφοποίηση κειµένου (συνεχ.) <HR> οριζόντια γραµµή (Horizontal Rule) δέχεται παραµέτρους: ALIGN, NOSHADE, SIZE, WIDTH π.χ. <HR NOSHADE ALIGN=CENTER WIDTH=50% SIZE=10> <BR> διακοπή κειµένου π.χ. ιεύθυνση: <BR> Μαιζώνος 100 <BR> Πάτρα Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 39
Πίνακας <TABLE BORDER=1> <CAPTION> ονοµα πίνακα </CAPTION> <TR > <TH> επικεφαλίδα 1</TH> </TR> <TH> επικεφαλίδα 2</TH> <TR> <! γραµµή 1> </TR> <TD> κελί 11 </TD> <TD> κελί 12 </TD> <TR > <! γραµµή 2> <TD> κελί 21 </TD> </TR> </TABLE> <TD> κελί 22 </TD> Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 40
<TABLE attr > Πίνακας -2 ALIGN (LEFT, CENTER ή RIGHT). Default: LEFT, αλλά αυτό µπορεί να αλλαχθεί από κάποιο από τα στοιχεία DIV ή CENTER, αν αυτά συµπεριλαµβάνονται µέσα στον πίνακα.. WIDTH θέτει είτε το απόλυτο πλάτος σε pixel (WIDTH=452) είτε επί τοις εκατό κενό µεταξύ αριστερού και δεξιού ορίου (WIDTH=60%). BORDER πλάτος του εξωτερικού περιγράµµατος σε αριθµό pixel (π.χ. BORDER=3). CELLSPACING µέγεθος κενής περιοχής γύρω από κάθε κελί σε pixel (π.χ. CELLSPACING=5). CELLPADDING pixel µεταξύ του ορίου του κελιού µε τα περιεχόµενά του. Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 41
Πίνακας -2 <TABLE BORDER=8 CELLSPACING=5 CELLPADDING=2 WIDTH="90%"> <CAPTION>... Τίτλος Πίνακα... </CAPTION> <TR> <TD> κελί-1</td> <TD> κελί-2</td> </TR> <TR>... </TABLE> Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 42
Πίνακας -3 <CAPTION attr> Τίτλος </CAPTION> ALIGN καθορίζει την τοποθέτηση του τίτλου του πίνακα µε δυνατές τιµές ALIGN=TOP ή ALIGN=BOTTOM. Εξ ορισµού, η τοποθέτηση του τίτλου του πίνακα είναι στο πάνω µέρος. Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 43
<TR> Παράµετροι ετικετών κελιών ALIGN οριζόντια ευθυγράµµιση των περιεχοµένων των κελιών. Αποδεκτές τιµές είναι οι: LEFT, CENTER ή RIGHT. VALIGN κατακόρυφη ευθυγράµµιση των περιεχοµένων των κελιών. Αποδεκτές τιµές είναι οι: TOP, MIDDLE ή BOTTOM <TH>, <TD> εκτός των παραµέτρων ALIGN, VALIGN : NOWRAP απενεργοποιεί την αυτόµατη τύλιξη κειµένου στο χώρο ενός κελιού. ROWSPAN γραµµές που θα καταλάβει το κελί (default=1) COLSPAN στήλες που θα καταληφθούν από αυτό το κελί. (default=1) WIDTH πλάτος των περιεχοµένων κελιού σε pixel εξαιρώντας τις σκιές του κελιού. HEIGHT ύψος των περιεχοµένων ενός κελιού σε pixel εξαιρώντας τις σκιές του κελιού. BGCOLOR χρώµα του φόντου του κελιού Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 44
ALIGN - VALIGN Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 45
Άσκηση-1 <TABLE BORDER=1> <TR> <TD COLSPAN=3> C3 </TD> </TR> <TR> <TD ROWSPAN=2> R2 </TD> <TD> Α </TD> <TD> B </TD > </TR> <TR> <TD> C</TD> <TD> D </TD> </TR> </TABLE> Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 46
Άσκηση-1 C3 R2 A C B D Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 47
Πίνακας : άσκηση-2 Έστω ο εξής πίνακας: ΠΟΛΗ ΚΩ ΙΚΟΣ ΠΑΤΡΑ 2610 ΑΙΓΙΟ 26910 ΑΚΡΑΤΑ 26960 Να ορίσετε τον πίνακα σε HTML Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 48
Φροντιστήριο Φ1 Να γράψετε την εντολή <TABLE> που παράγει το εξής αποτέλεσµα: Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 49
ιασύνδεση ιστοσελίδων <Α> (άγκυρα) Ετικέτα που επιτρέπει τη διασύνδεση µέσω υπερ-συνδέσµου (HREF) π.χ. <A HREF= http://www.ee.upatras.gr > Visit the EE Department </A> Η διασύνδεση µπορεί να γίνει µεταξύ τµηµάτων της ιδίας ιστοσελίδας. <Α ΝΑΜΕ= location L Location L is here</a> H σύνδεση µε το σηµείο αυτό γίνεται ως εξής: <Α HREF= #location L > Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 50
ιασύνδεση µε ηλ. ταχυδρ. <Α HREF=«mailto:announces@ee.upatras.gr»> µήνυµα στο Τµήµα</Α> Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 51
<IMG> Εικόνες (gif, jpeg) ιαφορές gif, jpeg <IMG SRC= logo.gif ALIGN=MIDDLE> Εξηγήστε τις ετικέτες γύρω από την εικόνα: <CENTER><IMG SRC= logo.gif ><BR> </CENTER> Κείµενο αντί εικόνας <IMG SRC= logo.gif ALT= EE Dept Logo > Στοίχιση εικόνας ALIGN={LEFT, RIGHT, TOP, MIDDLE, BOTTOM} Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 52
Εικόνες ALIGN=left right top texttop middle absmiddle baseline bottom absbottom Kαθορίζει τη στοίχιση της εικόνας σε σχέση µε το κείµενο που βρίσκεται γύρω από αυτή ή σε σχέση µε τη σελίδα. HSPACE=xx pixels- VSPACE=xx pixels Kαθορίζουν την οριζόντια ή κάθετη, απόσταση που θα έχει η εικόνα σε σχέση µε το κείµενο που την περιβάλλει. WIDTH=xx pixels - HEIGHT=xx pixels Kαθορίζουν το πλάτος και το ύψος της εικόνας που πρόκειται να εµφανιστεί στη σελίδα. Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 53
Φόρµες <FORM METHOD="POST" ACTION="/cgi-bin/thingie"> Name: <INPUT TYPE="TEXT" NAME="name"><BR> Password: <INPUT TYPE="PASSWORD" NAME="pass"> <BR> Ice Cream: Vanilla <INPUT TYPE="Radio" VALUE="1" CHECKED NAME="ice cream"> Chocolate <INPUT TYPE="Radio" VALUE="2" NAME="ice cream"><br> <INPUT TYPE="submit" VALUE="Send Data "> </FORM> Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 54
<FORM> <INPUT attr> TYPE =text (εξ ορισµού) κείµενο µιας γραµµής SIZE ορατό µήκος. MAXLENGTH µέγιστος αριθµός χαρακτήρων NAME όνοµα τιµής πεδίου VALUE αρχική τιµή πεδίου µόλις φορτωθεί η φόρµα. Π.χ <INPUT TYPE=text SIZE=40 NAME=user VALUE= user1"> Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 55
<FORM> <INPUT attr> TYPE = "text" γραµµή εισαγωγής κειµένου η οποία δέχεται ή περιέχει ήδη κείµενο. TYPE = "button" Εµφανίζει στην οθόνη ένα πλήκτρο. TYPE = "reset" πλήκτρο που όταν πατηθεί, επαναφέρει τη φόρµα στην αρχική της κατάσταση. TYPE = "hidden" Χρησιµοποιείται για αποστολή τιµών οι οποίες δεν καθορίζονται από αυτόν που συµπληρώνει τη φόρµα. Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 56
<FORM> <INPUT attr> TYPE = password <input type=password size=12 name=passwd> TYPE = checkbox <input type=checkbox checked name=uscitizen value=yes> TYPE = radio <input type=radio name=age value="0-30"> <input type=radio name=age value= 30-50" checked> <input type=radio name=age value= 50-"> TYPE = submit όταν πατηθεί αποστέλλει τα δεδοµένα σύµφωνα µε την παράµετρο ACTION Ειδικά Κεφάλαια Συστηµάτων Λογισµικού στο ιαδίκτυο 57