Διαχείριση Πληροφοριών στο Διαδίκτυο. Εργαστήριο 3

Transcript

1 Διαχείριση Πληροφοριών στο Διαδίκτυο Εργαστήριο 3 Τεχνολογικό Εκπαιδευτικό Ίδρυμα Καβάλας Σχολή Διοίκησης & Οικονομίας Τμήμα Διαχείρισης Πληροφοριών Διδάσκων Μαρδύρης Βασίλειος, Διπλ. Ηλ. Μηχανικός & Μηχ. Υπολογιστών, Msc 1. Στόχοι Στόχος του εργαστηρίου είναι η εκμάθηση του τρόπου μορφοποίησης κειμένου σε μια σελίδα HTML. Προκειμένου να επιτευχθούν οι στόχοι του εργαστηρίου, αρχικά θα παρουσιαστούν μια σειρά από παραδείγματα σελίδων και στη συνέχεια θα ζητηθεί από τους φοιτητές να πραγματοποιήσουν κάποιες αλλαγές στις σελίδες αυτές, καθώς επίσης να κατασκευάσουν απλές σελίδες. 2. Μορφοποίηση απλού κειμένου i. Αντιγράψτε τον κώδικα της σελίδας page3a.html, ο οποίος βρίσκεται στην σελίδα του 3 ου εργαστηρίου και επικολλήστε τον στο Notepad++ αφού δημιουργήσετε νέο αρχείο: <B> Κείμενο με έντονη γραφή </B> <I> Κείμενο με πλάγια γραφή </I> <U> Κείμενο με υπογράμμιση </U> <B><I> Κείμενο με έντονη και πλάγια γραφή </B></I> Κείμενο με εκθέτη : a⁴ Κείμενο με δείκτη: a₂ i Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB με όνομα page3a.html Ανεβάστε την σελίδα στον server δείτε το αποτέλεσμα με την βοήθεια ενός browser. Δημιουργήστε μια νέα σελίδα την οποία να την ονομάσετε page3a1.html που να εμφανίζει : 1

2 3. Προσθήκη πολλών κενών διαστημάτων και γραμμών i. Δημιουργήστε ένα νέο αρχείο και επικολλήστε τον κώδικα της σελίδας page3b.html. <PRE> Το κάστρο της Καβάλας χτίστηκε τον 5ο αιώνα μ.χ. από τον Ιουστινιανό τον Α' για την προστασία από εχθρούς, κυρίως Βούλγαρους και Σλάβους που πολιορκούσαν συνεχώς τη πόλη εξαιτίας του πλεονεκτήματος της γεωγραφικής της θέσης. </PRE> Το κάστρο της Καβάλας χτίστηκε τον 5ο αιώνα μ.χ. από τον Ιουστινιανό τον Α' για την προστασία από εχθρούς, κυρίως Βούλγαρους και Σλάβους που πολιορκούσαν συνεχώς τη πόλη εξαιτίας του πλεονεκτήματος της γεωγραφικής της θέσης. i Ονομάστε το αρχείο page3b.html και αποθηκέψτε το στον κατάλογο IDM_LAB. Ανεβάστε το αρχείο page3b.html, χρησιμοποιήστε τον Internet Explorer για να δείτε το αποτέλεσμα της σελίδας. Κάντε τις κατάλληλες αλλαγές στον κώδικα έτσι ώστε να έχετε το αποτέλεσμα που ακολουθεί, ονομάστε την σελίδα ως page3b1.html. 2

3 4. Συντομογραφίες και ακρωνύμια i. Αντιγράψτε τις εντολές της σελίδας page3c.html και κάντε επικόλληση σε νέο αρχείο: <ABBR title="information Management Department"> IMD </ABBR> <ACRONYM title="world Wide Web"> WWW </ACRONYM> Η ιδιότητα title χρησιμοποιείτε για την εμφάνιση ολόκληρων των λέξεων όταν κρατήσουμε τον δείκτη του ποντικιού πάνω στη συντομογραφία ή το ακρωνύμιο. i Ονομάστε το αρχείο page3c.html και αποθηκέψτε το στον κατάλογο IDM_LAB. Ανεβάστε την σελίδα page3c.html στον server και δείτε το αποτέλεσμα της. Δημιουργήστε σελίδα που να εμφανίζει το ακρωνύμιο ΤΕΙ Καβάλας, ονομάστε την page3c1.html 5. Εισαγωγή περιθωρίου αριστερά από την παράγραφο i. Δημιουργήστε νέο αρχείο και επικολλήστε τις εντολές του αρχείου page3d.html. 3

4 <BLOCKQUOTE> Παράγραφος με περιθώριο αριστερά. Παράγραφος με περιθώριο αριστερά. Παράγραφος με περιθώριο αριστερά. Παράγραφος με περιθώριο αριστερά. Παράγραφος με περιθώριο αριστερά. </BLOCKQUOTE> Η ετικέτα P δημιουργεί παράγραφο χωρίς περιθώριο αριστερά. Η ετικέτα P δημιουργεί παράγραφο χωρίς περιθώριο αριστερά. Η ετικέτα P δημιουργεί παράγραφο χωρίς περιθώριο αριστερά. <PRE> Και η ετικέτα PRE δημιουργεί παράγραφο χωρίς περιθώριο αριστερά. Και η ετικέτα PRE δημιουργεί παράγραφο χωρίς περιθώριο αριστερά. Και η ετικέτα PRE δημιουργεί παράγραφο χωρίς περιθώριο αριστερά. </PRE> i Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB με όνομα page3d.html Ανεβάστε το αρχείο page3d.html, ανοίξτε την σελίδα χρησιμοποιώντας τον Internet Explorer. 6. Δημιουργία υπερσυνδέσμων (hyperlinks) i. Αντιγράψτε και στη συνέχεια επικολλήστε τον κώδικα της σελίδας page3e.html. <A href="page3d.html"> Προηγούμενη άσκηση </A> <A href=" ΤΕΙ Καβάλας </A> <A href="page3e1.html"> Σελίδα η οποία δεν υπάρχει!! </A> i Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB με όνομα page3e.html Ανεβάστε το αρχείο page3e.html, ανοίξτε την σελίδα χρησιμοποιώντας τον Internet Explorer. Δημιουργήστε σελίδα (page3e1.html) που να εμφανίζει συνδέσμους προς τη σελίδα του Τμήματος Διαχείρισης Πληροφοριών και προς την προσωπική σας σελίδα. 4

5 7. Εικόνα ως υπερσύνδεσμος i. Δημιουργήστε νέο αρχείο και επικολλήστε τις εντολές του αρχείου page3f.html. Μπορείτε να χρησιμοποιήσετε μια εικόνα ως υπερσύνδεσμο: <A href="page3e.html"> <IMG border="0" src="an_image.gif" width="65" height="38"> </A> i Ονομάστε το αρχείο page3f.html και αποθηκέψτε το στον κατάλογο IDM_LAB. Αφού ανεβάσετε το αρχείο δείτε το αποτέλεσμα της σελίδας. Δημιουργήστε σελίδα (page3f1.html) που να εμφανίζει τη φωτογραφία σας η οποία θα είναι σύνδεσμος προς την αρχική σελίδα σας 8. Εμφάνιση συνδέσμου σε καινούριο παράθυρο i. Δημιουργήστε ένα νέο αρχείο και επικολλήστε τον κώδικα της σελίδας page3g.html. <A href="page3f.html" target="_blank">προηγούμενη άσκηση</a> Αν θέσετε στην ιδιότητα target την τιμή "_blank", ο σύνδεσμος θα εμφανιστεί σε καινούριο παράθυρο. <A href="page3f.html">προηγούμενη άσκηση</a> Αν δεν θέσετε στην ιδιότητα target την τιμή "_self" ή αν δεν έχετε καθόλου την ιδιότητα target ο σύνδεσμος θα εμφανιστεί στο ίδιο παράθυρο. i Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB με όνομα page3g.html Ανεβάστε το αρχείο page3g.html στον server, ανοίξτε την σελίδα για να δείτε το αποτέλεσμα. 9. Προώθηση σε κάποιο άλλο σημείο της σελίδας i. Στο Notepad++ επικολλήστε τις εντολές της σελίδας page3h.html. 5

6 <A href="#c4"> Πήγαινε στο Κεφάλαιο 4. </A> <HR> <H2>Κεφάλαιο 1</H2> Σ αυτό το κεφάλαιο μπλα μπλα μπλα <H2>Κεφάλαιο 2</H2> Σ αυτό το κεφάλαιο μπλα μπλα μπλα <H2>Κεφάλαιο 3</H2> Σ αυτό το κεφάλαιο μπλα μπλα μπλα <Α name="c4"><h2>κεφάλαιο 4</H2></Α> Σ αυτό το κεφάλαιο μπλα μπλα μπλα <H2>Κεφάλαιο 5</H2> Σ αυτό το κεφάλαιο μπλα μπλα μπλα <H2>Κεφάλαιο 6</H2> Σ αυτό το κεφάλαιο μπλα μπλα μπλα <H2>Κεφάλαιο 7</H2> Σ αυτό το κεφάλαιο μπλα μπλα μπλα <H2>Κεφάλαιο 8</H2> Σ αυτό το κεφάλαιο μπλα μπλα μπλα i Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB με όνομα page3h.html Ανεβάστε το αρχείο page3h.html, δείτε το αποτέλεσμα. Τροποποιήστε τον κώδικα ώστε να υπάρχει δεύτερος σύνδεσμος για προώθηση στο Κεφάλαιο Δημιουργία συνδέσμου για αποστολή i. Αντιγράψτε και στη συνέχεια επικολλήστε τον κώδικα της σελίδας page3i.html. Αυτός είναι ένας σύνδεσμος για αποστολή <A href="mailto:someone@teikav.edu.gr?subject=γειά%20χαρά"> Αποστολή μηνύματος </A> <B>Παρατήρηση:</B> Τα κενά διαστήματα μεταξύ των λέξεων στο subject αναπαριστώνται με %20. 6

7 i Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB με όνομα page3i.html Ανεβάστε στον server το αρχείο page3i.html, δείτε το αποτέλεσμα. Δημιουργήστε σελίδα page3i1.html που να περιέχει σύνδεσμο με τον οποίο να γίνεται αποστολή μηνύματος στη Γραμματεία του Τμήματος. Η ψηφιοποίηση του εκπαιδευτικού υλικού έγινε στο πλαίσιο υλοποίησης της πράξης με τίτλο «ΕΝΙΣΧΥΣΗ ΣΠΟΥΔΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ στο ΤΕΙ ΚΑΒΑΛΑΣ», του Μέτρου 2.2 «Αναμόρφωση Προγραμμάτων Σπουδών - Διεύρυνση Τριτοβάθμιας Εκπαίδευσης» του ΕΠΕΑΕΚ ΙΙ, που συγχρηματοδοτείται από το Ευρωπαϊκό Κοινωνικό Ταμείο (Ε.Κ.Τ.) κατά 80% και Εθνικούς πόρους κατά 20%. 7