ιαχείριση Πληροφοριών στο ιαδίκτυο Εργαστήριο (Φυλλάδιο 2) ΤΕΙ Καβάλας - Σχολή ιοίκησης & Οικονοµίας Τµήµα ιαχείρισης Πληροφοριών ιδάσκων: Μαρδύρης Βασίλειος, ιπλ. Ηλ. Μηχανικός & Μηχ. Υπολογιστών, MSc (El. & Comp. Eng) 1. Στόχοι Στόχος του εργαστηρίου είναι η εκµάθηση του τρόπου µορφοποίησης κειµένου σε µια σελίδα HTML. Προκειµένου να επιτευχθούν οι στόχοι του εργαστηρίου, αρχικά θα πληκτρολογηθούν και θα παρουσιαστούν µια σειρά από παραδείγµατα σελίδων και στη συνέχεια θα ζητηθεί η κατασκευή απλών σελίδων από τους φοιτητές. 2. Αλλαγή του τρόπου εµφάνισης απλού κειµένου <B>Κείµενο µε έντονα γράµµατα</b> <STRONG> Κείµενο µε χρήση του tag STRONG </STRONG> <BIG>Κείµενο µε χρήση του tag BIG</BIG> <EM>Κείµενο µε έµφαση (emphasized)</em> <I>Κείµενο µε πλάγια γράµµατα</i> <SMALL>Κείµενο µε µικρά γράµµατα</small> Κείµενο µε δείκτη : α<sub>1</sub> Κείµενο µε εκθέτη : 2<SUP>8</SUP> Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page2a.html Ανοίξτε το αρχείο page2a.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 1
iv. ηµιουργήστε σελίδα (page2a1) που να εµφανίζει τα εξής: α 2 =β 2 +c, c=b 1 +b 2 3. Προσθήκη πολλών κενών διαστηµάτων και γραµµών <PRE> Σ αυτό το κείµενο ιατηρούνται οι αλλαγές γραµµής Και τα κενά διαστήµατα. </PRE> Το tag PRE είναι κατάλληλο για την εµφάνιση του κώδικα ενός προγράµµατος. <PRE> i=0; while (i!= 10) { i++; } </PRE> Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page2b.html Ανοίξτε το αρχείο page2a.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 2
4. Προκαθορισµένες µορφές κειµένου <CODE>Computer code</code> <KBD>Keyboard input</kbd> <TT>Teletype text</tt> <SAMP>Sample text</samp> <VAR>Computer variable</var> <B>Σηµείωση: </B> Αυτά τα tags χρησιµοποιούνται συχνά για την εµφάνιση κώδικα υπολογιστή ή προγράµµατος. Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page2c.html Ανοίξτε το αρχείο page2c.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 3
5. Εµφάνιση ταχυδροµικής διεύθυνσης <ADDRESS> TEI Καβάλας TK 65404 Αγ.Λουκάς Καβάλα </ADDRESS> Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page2d.html. Ανοίξτε το αρχείο page2d.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το iv. ηµιουργήστε σελίδα (page2d1) που να εµφανίζει τη δική σας διεύθυνση. 6. Συντοµογραφίες και ακρωνύµια <ABBR title="united Nations">UN</ABBR> <ACRONYM title="world Wide Web">WWW</ACRONYM> Η ιδιότητα title χρησιµοποιείτε για την εµφάνιση ολόκληρων των λέξεων όταν κρατήσουµε τον δείκτη του ποντικιού πάνω στη συντοµογραφία ή το ακρωνύµιο. Στον IE 5 λειτουργεί µόνο το tag ACRONYM Στο Netscape 6.2 λειτουργούν και τα δύο tags Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page2e.html 4
Ανοίξτε το αρχείο page2e.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το iv. ηµιουργήστε σελίδα (page2e1) που να εµφανίζει το ακρωνύµιο ΑΤΕΙ 7. Εισαγωγή περιθωρίου αριστερά από την παράγραφο <BLOCKQUOTE> Παράγραφος µε περιθώριο αριστερά. Παράγραφος µε περιθώριο αριστερά. Παράγραφος µε περιθώριο αριστερά. Παράγραφος µε περιθώριο αριστερά. Παράγραφος µε περιθώριο αριστερά. </BLOCKQUOTE> Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page2f.html Ανοίξτε το αρχείο page2f.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 5
8. Ορισµός κειµένου ως inserted ή deleted Μια ντουζίνα αποτελείται από <DEL>δεκατρία</DEL> <INS> δώδεκα </INS> κοµµάτια Οι περισσότεροι browsers εµφανίζουν το deleted κείµενο διεγραµµένο και το inserted κείµενο υπογραµµισµένο. Κάποιοι παλιότεροι browsers εµφανίζουν το deleted και inserted κείµενο σαν απλό κείµενο. Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page2g.html Ανοίξτε το αρχείο page2g.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 9. ηµιουργία υπερσυνδέσµων (hyperlinks) <A href="page2g.html">αυτό το κείµενο</a> είναι ένας σύνδεσµος στη σελίδα της προηγούµενης άσκησης. <A href="http://www.teikav.edu.gr/">αυτό το κείµενο</a> είναι ένας σύνδεσµος στη κεντρική σελίδα του ΤΕΙ Καβάλας. 6
Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page2h.html Ανοίξτε το αρχείο page2h.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το iv. ηµιουργήστε σελίδα (page2h1) που να εµφανίζει συνδέσµους προς τη σελίδα του Τµήµατος ιαχείρισης Πληροφοριών και προς την προσωπική σας σελίδα. 10. Πώς να χρησιµοποιήσετε µια εικόνα ως υπερσύνδεσµο Μπορείτε να χρησιµοποιήσετε µια εικόνα ως υπερσύνδεσµο: <A href="page2h.html"> <IMG border="0" src="an_image.gif" width="65" height="38"> </A> Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page2i.html Ανοίξτε το αρχείο page2i.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 7
iv. ηµιουργήστε σελίδα (page2i1) που να εµφανίζει τη φωτογραφία σας η οποία θα είναι σύνδεσµος προς την αρχική σελίδα σας 11. Εµφάνιση ενός συνδέσµου σε καινούριο παράθυρο <A href="page2i.html" target="_blank">προηγούµενη άσκηση</a> Αν θέσετε στην ιδιότητα target την τιµή "_blank", ο σύνδεσµος θα εµφανιστεί σε καινούριο παράθυρο. Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page2j.html Ανοίξτε το αρχείο page2j.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 12. Προώθηση σε κάποιο άλλο σηµείο της σελίδας <A href="#c4"> Πήγαινε στο Κεφάλαιο 4. </A> <HR> <H2>Κεφάλαιο 1</H2> <H2>Κεφάλαιο 2</H2> <H2>Κεφάλαιο 3</H2> <Α name="c4"><h2>κεφάλαιο 4</H2></Α> <H2>Κεφάλαιο 5</H2> 8
<H2>Κεφάλαιο 6</H2> <H2>Κεφάλαιο 7</H2> <H2>Κεφάλαιο 8</H2> <H2>Κεφάλαιο 9</H2> <H2>Κεφάλαιο 10</H2> <H2>Κεφάλαιο 11</H2> <H2>Κεφάλαιο 12</H2> <H2>Κεφάλαιο 13</H2> <H2>Κεφάλαιο 14</H2> <H2>Κεφάλαιο 15</H2> <H2>Κεφάλαιο 16</H2> <H2>Κεφάλαιο 17</H2> <H2>Κεφάλαιο 18</H2> <H2>Κεφάλαιο 19</H2> Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page2k.html Ανοίξτε το αρχείο page2k.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το 9
iv. Τροποποιήστε τον κώδικα ώστε να υπάρχει σύνδεσµος για προώθηση στο Κεφάλαιο 18 13. ηµιουργία συνδέσµου για αποστολή email Αυτός είναι ένας σύνδεσµος για αποστολή email: <A href="mailto:someone@teikav.edu.gr?subject=γειά%20χαρά"> Αποστολή µηνύµατος </A> <B>Παρατήρηση:</B> Τα κενά διαστήµατα µεταξύ των λέξεων στο subject αναπαριστώνται µε %20. Αποθηκέψτε τον παραπάνω κώδικα στο φάκελο IDM_LAB µε όνοµα page2l.html Ανοίξτε το αρχείο page2l.html χρησιµοποιώντας τον Internet Explorer και σχεδιάστε το iv. ηµιουργήστε σελίδα (page2l1) που να περιέχει σύνδεσµο µε τον οποίο να γίνεται αποστολή µηνύµατος στη Γραµµατεία του Τµήµατος. 10