ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση ιστοσελίδων στο Web, και αποτελεί υποσύνολο των SGML (Standard General Markup Language). Η επέκταση των αρχείων HTML, είναι.html ή.htm. Τα αρχεία HTML είναι ASCII (American Standard Code form Information Interchange) αρχεία, μέσα στα οποία ενσωματώνονται εντολές με τη μορφή ετικετών (tags), οι οποίες «μεταφράζονται» από τον φυλλομετρητή ιστοσελίδων (Web browser). Το πλεονέκτημα της HTML είναι ότι αυτή περιγράφει αρχεία με πολύ συγκεκριμένο τρόπο, ο οποίος παραμένει ανεξάρτητος από το μηχάνημα (και το λειτουργικό του σύστημα) που χρησιμοποιείται για την απεικόνιση της ιστοσελίδας. Οι εντολές της HTML που εμφανίζονται με τη μορφή ετικετών μέσα στα HTML αρχεία, συνήθως εμφανίζονται ανά ζευγάρι : η πρώτη εμφάνιση της ετικέτας προσδιορίζει το σημείο αρχής εκτέλεσης της εντολής, ενώ η δεύτερη, το τέλος της. Οι ετικέτες εμφανίζονται μεταξύ των συμβόλων «<» και «>», προκειμένου να οριοθετηθεί η αρχή της εντολής, και «</» και «>», προκειμένου να οριοθετηθεί το τέλος της εντολής, αντίστοιχα. Π.χ. : <b> Κείμενο </b> Στην περίπτωση αυτή, η πρώτη ετικέτα (<b>), δηλώνει ότι από το σημείο εμφάνισής της και μετά, το κείμενο που ακολουθεί θα εμφανίζεται σε έντονη γραφή, και αυτό θα ισχύει μέχρι την εμφάνιση της δεύτερης ετικέτας (</b>). Κάθε HTML αρχείο πρέπει να περιλαμβάνει τα ακόλουθα στοιχεία : HTML: Η ετικέτα αυτή υποδηλώνει στον browser, ότι πρόκειται για ένα HTML αρχείο. Τα αρχεία HTML, ξεκινούν πάντα με <HTML> και κλείνουν με </HTML> HEAD: Η ετικέτα αυτή χρησιμοποιείται για να προσδιορίσει την επικεφαλίδα του αρχείου. Στην επικεφαλίδα του αρχείου μπαίνει ο τίτλος της ιστοσελίδας TITLE: Η ετικέτα αυτή προσδιορίζει τον τίτλο της ιστοσελίδας (αυτό που φαίνεται σαν περιγραφή της ιστοσελίδας στη γραμμή Τίτλου του φυλλομετρητή ιστοσελίδων, όταν φορτωθεί η ιστοσελίδα). BODY: Η ετικέτα αυτή προσδιορίζει το κυρίως σώμα της ιστοσελίδας. Όλο το κείμενο, οι δεσμοί, οι εικόνες κ.ά., πρέπει να βρίσκονται στο κομμάτι αυτό του αρχείου. Η δομή μιας ιστοσελίδας, στην πλέον βασική της μορφή, είναι όπως παρακάτω : <html> <head> <title> Τίτλος του εγγράφου </title> </head> <body> Σώμα του εγγράφου - 1 -
</body> </html> Σε κάθε ιστοσελίδα, μπορούμε να καθορίσουμε 5 διαφορετικά χρώματα, μέσω της ακόλουθης εντολής : <body bgcolor=#xxxxxx text=#χχχχχχ link=#χχχχχχ alink=#χχχχχχ vlink=#χχχχχχ>, όπου X μπορεί να είναι οποιαδήποτε τιμή μεταξύ 0 και F (δεκαεξαδικό σύστημα αρίθμησης). bgcolor καθορίζει το χρώμα του φόντου της ιστοσελίδας Text καθορίζει το χρώμα του κυρίως κειμένου Link καθορίζει το χρώμα ενός δεσμού, τον οποίο δεν έχουμε επισκεφθεί Alink (Active Link) καθορίζει το χρώμα ενός δεσμού, ο οποίος είναι ενεργός (επιλεγμένος) Vlink (Visited Link) καθορίζει το χρώμα ενός δεσμού, τον οποίο έχουμε ήδη επισκεφθεί Για την περιγραφή των χρωμάτων, το μοντέλο που χρησιμοποιείται είναι το χρωματικό μοντέλο RGB (Red, Green, Blue), σύμφωνα με το οποίο οποιοδήποτε χρώμα μπορεί να περιγραφεί σαν συνδυασμός των τριών βασικών χρωμάτων. Στο μοντέλο αυτό για παράδειγμα, ο συνδυασμός FF0000 απεικονίζει το πιο έντονο κόκκινο χρώμα, ο συνδυασμός 00FF00 απεικονίζει το πιο έντονο πράσινο χρώμα, ενώ τέλος, ο συνδυασμός 0000FF απεικονίζει το πιο έντονο μπλε χρώμα. Σημείωση : Οι εντολές σε HTML δεν είναι case-sensitive, δηλαδή δεν έχει σημασία αν θα τις γράψουμε με πεζά ή κεφαλαία γράμματα. 1. Κάνετε διπλό κλικ στο εικονίδιο «Ο Υπολογιστής μου» στην Επιφάνεια Εργασίας σας. 2. Από το μενού Εργαλεία, επιλέξτε «Επιλογές Φακέλων», πηγαίνετε στην καρτέλα «Προβολή» και αποεπιλέξτε την επιλογή «Απόκρυψη επεκτάσεων για γνωστούς τύπους αρχείων». Με αυτό τον τρόπο θα εμφανίζεται η επέκταση όλων των αρχείων στον υπολογιστή σας. - 2 -
3. Από το κουμπί Έναρξη, επιλέξτε εκτέλεση, γράψτε notepad και πατήστε ENTER. 4. Αποθηκεύστε το αρχείο σας με το όνομα index.html, στην Επιφάνεια Εργασίας σας. Αν ερωτηθείτε για την αλλαγή του τύπου του αρχείου, επιβεβαιώστε πατώντας «Ναι,». 5. Γράψτε τα ακόλουθα, αποθηκεύοντας το αρχείο σας ανά τακτά χρονικά διαστήματα : <html> <head> <title> Ανωτάτη Σχολή Παιδαγωγικής και Τεχνολογικής Εκπαίδευσης </title> </head> <body bgcolor=#fefefe text=#0000bb> <hr width=100% size=4 color=#0000dd noshade> <h3>πρόγραμμα Μαθημάτων</h3> <hr width=100% size=4 color=#0000dd noshade> <p> Το μάθημα <b>"παιδαγωγικές Εφαρμογές στους Η/Υ"</b>, θα διδαχθεί ως εξής : <p> <table border=2 align=center> <tr><th bgcolor=#dddddd> Τμήματα </th> <th bgcolor=#dddddd> Διδάσκοντες </th> <tr> <td align=center>... <td align=left>... <tr> <td align=center> Α3α <td align=left> Ασλανίδου, Παπαδόπουλος <tr> <td align=center> Α3β - 3 -
<td align=left> Μενεξές, Πάσχος </table> <p> <hr width=100% size=4 color=#dd0000 noshade> <p align=center> Για περισσότερες πληροφορίες επισκεφτείτε το <a href="http://www.aspete.gr"> site </a> της σχολής </p> <marquee> Το ονοματεπώνυμό σας </marquee> </body> </html> 6. Κλείστε το αρχείο και ελέγξτε, ότι στην Επιφάνεια Εργασίας σας υπάρχει το αρχείο Index.html, με εικονίδιο αυτό του Internet Explorer (ή άλλου φυλλομετρητή ιστοσελίδων). Μπορείτε να εξηγήσετε γιατί συμβαίνει αυτό; 7. Κάνετε διπλό κλικ στο αρχείο σας. Ποιο πρόγραμμα εκτελείται; 8. Παρατηρείστε αν η ιστοσελίδα που απεικονίζεται στον Internet Explorer, είναι έτσι, όπως ακριβώς εσείς την ορίσατε με τον κώδικα HTML που γράψατε. 9. Προσπαθήστε να κάνετε μορφοποιήσεις στην ιστοσελίδα σας, χρησιμοποιώντας εντολές HTML όπως αυτές που παρουσιάζονται συνοπτικά παρακάτω. Βασικές εντολές HTML Μέγεθος Επικεφαλίδας <h*> Κείμενο </h*>, όπου * είναι ένας αριθμός από το 1-6 Αλλαγή γραμμής <BR> Αλλαγή παραγράφου <p align=*> Κείμενο </p> όπου * μπορεί να είναι left, right, center <Blockquote> Κείμενο </Blockquote> Σχόλια <!-- σχόλια> Μορφοποίηση κειμένου <font color=#rrggbb size=*> Κείμενο </font>, όπου RRGGBB είναι ο αριθμός που υποδηλώνει το χρώμα και * είναι ένας αριθμός μεταξύ 1 και 7-4 -
<b>κείμενο</b> <i>κείμενο</i> <u>κείμενο</u> <TT>Κείμενο</TT> <blink>κείμενο</blink> Κείμενο <sub> Κείμενο </sub> Κείμενο <sup> Κείμενο </sup> <small>κείμενο</small> <big>κείμενο</big> <s>κείμενο</s> <CITE>Κείμενο</CITE> <EM>Κείμενο</EM> <STRONG>Κείμενο</STRONG> <PRE>Κείμενο</PRE> <CODE>Κείμενο</CODE> <KBD>Κείμενο</KBD> <DFN>Κείμενο</DFN> <VAR>Κείμενο</VAR> <SAMP>Κείμενο</SAMP> <Q>Κείμενο</Q> <PERSON>Κείμενο</PERSON> <AU>Κείμενο</AU> <ADDRESS>Κείμενο</ADDRESS> Γραμμές <hr size=.. width=.. align=.. Noshade> Size πάχος της γραμμής Noshade χωρίς σκιά Width πλάτος της γραμμής (τιμή ή ποσοστό στο πλάτος της οθόνης) Align στοίχιση της γραμμής (εξ ορισμού στο κέντρο) Λίστες με κουκίδες (Unorderd Lists) <UL> <LI type=disc>ένα Κουκίδα με <LI type=circle>δύο Κουκίδα με <LI type=square>τρία Κουκίδα με </UL> Λίστες με αρίθμηση (Ordered Lists) <OL> <LI type=a>μικρά γράμματα <LI type=a>κεφαλαία γράμματα <LI type=i>μικροί ρωμαϊκοί αριθμοί <LI type=i>κεφαλαίοι ρωμαϊκοί αριθμοί a, b, c, A, B, C, i, ii, iii, I, II, III, - 5 -
</OL> <LI type=1>απλοί αριθμοί 1, 2, 3, Εικόνες <src=image_url align=.. width=.. height=.. border=..> Align (top, middle, bottom) Στοιχίζει το κείμενο σε σχέση με την εικόνα Align (left, middle, right) Αριστερή, κεντρική, ή δεξιά στοίχιση της εικόνας Width Πλάτος της εικόνας σε pixels Height Το ύψος της εικόνας σε pixels Border Το πάχος του περιγράμματος σε pixels Πίνακες <table>...</table> Αρχή και τέλος του πίνακα <th>... </th> Αρχή και τέλος της γραμμής επικεφαλίδας του πίνακα <tr>... Αρχή και τέλος μιας γραμμής του πίνακα <td>... Αρχή και τέλος των δεδομένων του κελιού του πίνακα <caption>... </caption> Αρχή και τέλος της περιγραφής του πίνακα Άλλες παράμετροι : border Πάχος γραμμής περιγράμματος του πίνακα bgcolor Χρώμα φόντου για τον πίνακα colspan Συγχώνευση στηλών rowspan Συγχώνευση γραμμών height Ύψος πίνακα ή γραμμής align Αριστερή, κεντρική ή δεξιά στοίχιση των περιεχομένων valign Κατακόρυφη στοίχιση των περιεχομένων του πίνακα Σύνδεσμοι (Links) <a href="*"> Ενεργό κείμενο </a>, όπου * είναι το URL του συνδέσμου (π.χ. http://www.in.gr) - 6 -