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

Transcript

1 ιαχείριση Πληροφοριών στο ιαδίκτυο Εργαστήριο (Φυλλάδιο 1) ΤΕΙ Καβάλας - Σχολή ιοίκησης & Οικονοµίας Τµήµα ιαχείρισης Πληροφοριών ιδάσκων: Μαρδύρης Βασίλειος, ιπλ. Ηλ. Μηχανικός & Μηχ. Υπολογιστών, MSc (El. & Comp. Eng) 1. Στόχοι Στο εργαστήριο αυτό θα γίνει η πρώτη επαφή µε την γλώσσα περιγραφής σελίδων HTML. Στόχος είναι η εκµάθηση του τρόπου δηµιουργίας µιας απλής σελίδας και την προβολή της µε την βοήθεια ενός φυλλοµετρητή (browser). Επίσης θα εφαρµοστούν εντολές δηµιουργίας και απλής µορφοποίησης κειµένου σε µια σελίδα. Προκειµένου να επιτευχθούν οι στόχοι του εργαστηρίου, αρχικά θα πληκτρολογηθούν και θα παρουσιαστούν µια σειρά από παραδείγµατα σελίδων, και στη συνέχεια θα ζητηθεί η κατασκευή απλών σελίδων από τους φοιτητές. 2. Προετοιµασία του Η/Υ ίνοντας το όνοµα χρήστη και το κωδικό πρόσβασης συνδεθείτε σε κάποιον από τους υπολογιστές του εργαστηρίου. Στη ρίζα του σκληρού Z: δηµιουργήστε, αν δεν υπάρχει, έναν φάκελο µε όνοµα IDM_LAB. Μέσα σ αυτόν τον κατάλογο θα αποθηκέψετε οποιοδήποτε αρχείο αφορά αυτό και τα επόµενα εργαστήρια του µαθήµατος ιαχείριση Πληροφοριών στο ιαδίκτυο. 3. Η πρώτη σελίδα σε HTML i. Από το µενού Start -> All Programs -> EditPlus 2 επιλέξτε το πρόγραµµα EditPlus 2. Το EditPlus 2 είναι ένα πρόγραµµα δηµιουργίας αρχείων κειµένου (text editor). Για να δηµιουργήσετε ένα νέο αρχείο επιλέξτε File->New->Normal Text. Πληκτρολογήστε τις παρακάτω εντολές : Hello world! iv. Από το µενού File επιλέξτε Save As Στο παράθυρο που θα εµφανιστεί επιλέξτε το φάκελο Z:\IDM_LAB και στο πεδίο File name πληκτρολογήστε page1a.html Από το µενού Start -> All Programs επιλέξτε το πρόγραµµα Internet Explorer. Στη γραµµή Address πληκτρολογήστε Z:\IDM_LAB\page1a.html το αποτέλεσµα της σελίδας που εµφανίστηκε σχεδιάστε το µέσα στο παρακάτω πλαίσιο. 1

2 4. ηµιουργία παραγράφων στο κείµενο µιας σελίδας i. Ακολουθώντας την ίδια διαδικασία µε πριν, ανοίξτε το EditPlus 2 και πληκτρολογήστε τις εντολές : Αυτή είναι η πρώτη παράγραφος. Αυτή είναι η δεύτερη παράγραφος. Αυτή είναι η τρίτη παράγραφος. Μια παράγραφος δηλώνεται µε τις ετικέτες (tags) P και /P Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page1b.html Ανοίξτε το αρχείο page1b.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 5. Μεγαλύτερες παράγραφοι κειµένου (i) Αυτή η παράγραφος Περιλαµβάνει περισσότερες από µια γραµµές στον κώδικά της, αλλά ο φυλλοµετρητής το παραβλέπει. Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page1c.html Ανοίξτε το αρχείο page1c.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 2

3 6. Μεγαλύτερες παράγραφοι κειµένου (ii) Αυτή η παράγραφος περιλαµβάνει περισσότερα από ένα κενά διαστήµατα ανάµεσα στις λέξεις στον κώδικά της, αλλά ο φυλλοµετρητής τα παραβλέπει. Ο αριθµός των γραµµών σε µια παράγραφο εξαρτάται από το οριζόντιο µέγεθος του παραθύρου του φυλλοµετρητή. Αν µεγαλώσουµε ή µικρύνουµε το παράθυρο τότε θα αλλάξει και αριθµός των γραµµών. Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page1d.html Ανοίξτε το αρχείο page1d.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 3

4 7. Αλλαγή γραµµής σε κάποιο σηµείο του κειµένου Για να αλλάξεις γραµµή <BR> Μέσα σε µια παράγραφο, <BR> χρησιµοποίησε την ετικέτα (tag) BR. Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page1e.html Ανοίξτε το αρχείο page1e.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 8. ηµιουργία επικεφαλίδων <H1>Αυτό είναι το µέγεθος 1</H1> <H2> Αυτό είναι το µέγεθος 2</H2> <H3> Αυτό είναι το µέγεθος 3</H3> <H4> Αυτό είναι το µέγεθος 4</H4> <H5> Αυτό είναι το µέγεθος 5</H5> <H6> Αυτό είναι το µέγεθος 6</H6> Για να δηµιουργήσεις επικεφαλίδες χρησιµοποίησε την ετικέτα (tag) Η. Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page1f.html 4

5 Ανοίξτε το αρχείο page1f.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 9. Απλή µορφοποίηση κειµένου <H1 align="center"> Αυτή είναι η επικεφαλίδα µεγέθους 1 </H1> Η παραπάνω επικεφαλίδα είναι στοιχισµένη στο κέντρο της σελίδας. Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page1g.html Ανοίξτε το αρχείο page1g.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 5

6 10. Προσθήκη οριζόντιων γραµµών Η ετικέτα (tag) HR εµφανίζει µια οριζόντια γραµµή <HR> Αυτή είναι µια παράγραφος <HR> Αυτή είναι µια παράγραφος <HR> Αυτή είναι µια παράγραφος Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page1h.html Ανοίξτε το αρχείο page1h.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 11. Σχόλια µέσα στον κώδικα HTML <!--Η παράγραφος αυτή δεν εµφανίζεται --> Η παράγραφος αυτή εµφανίζεται 6

7 Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page1i.html Ανοίξτε το αρχείο page1i.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 12. Χρωµατισµός του φόντου της σελίδας <BODY bgcolor="yellow"> <H2> Κίτρινο Φόντο! </H2> Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page1j.html Ανοίξτε το αρχείο page1j.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 13. Προσθήκη εικόνας στο φόντο της σελίδας i. Με τη βοήθεια του Internet Explorer επισκεφθείτε έναν δικτυακό τόπο και κάνοντας δεξί κλικ πάνω σε µια εικόνα, και επιλέγοντας Save image as αποθηκέψτε την στον φάκελο IDM_LAB µε όνοµα test.jpg 7

8 Στο EditPlus 2 πληκτρολογήστε τις παρακάτω εντολές : <BODY background="test.jpg"> <H3>Εικόνα στο φόντο!</h3> Εικόνες τύπου gif και jpg µπορούν να χρησιµοποιηθούν για φόντο µιας σελίδας. Αν µια εικόνα είναι µικρότερη από το µέγεθος του παραθύρου τότε αυτή επαναλαµβάνεται. iv. Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page1k.html Ανοίξτε το αρχείο page1k.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 8