ιαχείριση Πληροφοριών στο ιαδίκτυο

Transcript

1 ιαχείριση Πληροφοριών στο ιαδίκτυο Εργαστήριο (Φυλλάδιο 5) ΤΕΙ Καβάλας - Σχολή ιοίκησης & Οικονοµίας Τµήµα ιαχείρισης Πληροφοριών ιδάσκων: Μαρδύρης Βασίλειος, ιπλ. Ηλ. Μηχανικός & Μηχ. Υπολογιστών, MSc (El. & Comp. Eng) 1. Στόχοι Στόχος του εργαστηρίου είναι η εκµάθηση των λειτουργιών των πινάκων σε µια σελίδα HTML. Προκειµένου να επιτευχθούν οι στόχοι του εργαστηρίου, αρχικά θα πληκτρολογηθούν και θα παρουσιαστούν παραδείγµατα σελίδων και στη συνέχεια θα ζητηθεί η κατασκευή απλών σελίδων από τους φοιτητές. 2. Απλοί πίνακες <P> Κάθε πίνακας ξεκινά µε ένα TABLE tag. Κάθε γραµµή του πίνακα ξεκινά µε ένα TR tag. Κάθε κελί µιας γραµµής ξεκινά µε ένα TD tag. <H4>Μια γραµµή, µια στήλη:</h4> <H4>Μια γραµµή, τρεις στήλες:</h4> <H4> ύο γραµµές, τρεις στήλες:</h4> <TD>400 <TD>500 <TD>600 Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page5a.html µέσα στο 1

2 (όπου username είναι το προσωπικό σας όνοµα χρήστη) και συµπληρώστε το αποτέλεσµα iv. ηµιουργήστε σελίδα (page5a1) που να εµφανίζει πίνακα µε τρεις στήλες. Στην πρώτη να εµφανίζεται αύξων αριθµός, στη δεύτερη τα µαθήµατα που έχετε περάσει το τελευταίο εξάµηνο και στην τρίτη ο βαθµός για κάθε µάθηµα. 3. Πίνακες µε διαφορετικά περιγράµµατα <H4>Με κανονικό περίγραµµα:</h4> <TD>Πρώτη <TD> εύτερη <H4>Με φαρδύ περίγραµµα:</h4> <TABLE border="8"> <TD>Πρώτη <TD> εύτερη <H4>Με πολύ φαρδύ περίγραµµα:</h4> <TABLE border="15"> <TD>Πρώτη <TD> εύτερη 2

3 Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page5b.html µέσα στο και συµπληρώστε το αποτέλεσµα 4. Πίνακες χωρίς περίγραµµα <H4>Αυτός ο πίνακας δεν έχει περίγραµµα:</h4> <TABLE> <TD>400 <TD>500 <TD>600 <H4>Κι αυτός ο πίνακας δεν έχει περίγραµµα:</h4> <TABLE border="0"> <TD>400 <TD>500 <TD>600 3

4 Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page5c.html µέσα στο και συµπληρώστε το αποτέλεσµα στο παρακάτω πλαίσιο. 5. Πίνακες µε επικεφαλίδες <TH>Όνοµα <TH>Τηλέφωνο <TH>FAX <TD>Bill Gates <TD> <TD> <TH>Όνοµα: <TD>Bill Gates <TH>Τηλέφωνο: <TD> <TH>FAX: <TD>

5 Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page5d.html µέσα στο και συµπληρώστε το αποτέλεσµα 6. ύο περιπτώσεις κενού κελιού <TD>1 <TD>2 <TD> <TD>4 <TD>1 <TD>2 <TD><BR> <TD>4 Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page5e.html µέσα στο και συµπληρώστε το αποτέλεσµα 5

6 7. Λεζάντα πίνακα <TABLE border="6"> <CAPTION>Λεζάντα</CAPTION> <TD>400 <TD>500 <TD>600 Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page5f.html µέσα στο και συµπληρώστε το αποτέλεσµα στο παρακάτω πλαίσιο. 6

7 8. Συγχώνευση κελιών <H4>Οριζόντια συγχώνευση:</h4> <TH>Name <TH colspan="2">telephone <TD>Bill Gates <TD> <TD> <H4>Κατακόρυφη συγχώνευση:</h4> <TH>First Name: <TD>Bill Gates <TH rowspan="2">telephone: <TD> <TD> Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page5g.html µέσα στο και συµπληρώστε το αποτέλεσµα 7

8 9. Tags µέσα σε κελιά <TD> <P>Μια παράγραφος <P> εύτερη παράγραφος <TD>Αυτό το κελί περιέχει πίνακα: <TD>A <TD>B <TD>C <TD>D <TD>Αυτό το κελί περιέχει λίστα <UL> <LI>apples <LI>bananas <LI>pineapples </UL> <TD>HELLO Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page5h.html µέσα στο και συµπληρώστε το αποτέλεσµα 8

9 10. Στοίχιση <TABLE width="400" border="1"> <TH align="left">έξοδα... <TH align="right">ιανουάριος <TH align="right">φεβρουάριος <TD align="left">ρούχα <TD align="right"> <TD align="right">50.20 <TD align="left">make-up <TD align="right">30.00 <TD align="right">44.45 <TD align="left">φαγητό <TD align="right"> <TD align="right"> <TH align="left">σύνολο <TH align="right"> <TH align="right"> Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page5i.html µέσα στο και συµπληρώστε το αποτέλεσµα στο παρακάτω πλαίσιο. 9