Ξεκινώντας με την HTML


Ξεκινώντας με την HTML

Πίσω από τις ευανάγνωστες οθόνες που βλέπει κανείς σερφάροντας στο Internet, υπάρχει η γλώσσα HTML. Είναι αυτή που επιτρέπει στα προγράμματα αναζήτησης (browser) να εμφανίσουν και να μορφοποιήσουν το περιεχόμενο των ιστοσελίδων, σύμφωνα με τον τρόπο που επιθυμείτε.

H δημιουργία μιας ιστοσελίδας είναι πλέον απλή υπόθεση, καθώς υπάρχουν ειδικά προγράμματα που σας διευκολύνουν. Τα δύο πιο δημοφιλή που μπορεί κανείς να αγοράσει είναι το Dreamweaver της Macromedia και το FrontPage της Microsoft. Στο Internet θα βρείτε παρόμοιες εφαρμογές, όπως τα HotDog, Easy HTML και άλλα, τις οποίες μπορείτε να κατεβάσετε και να χρησιμοποιήσετε χωρίς χρέωση. Η συγγραφή μιας ιστοσελίδας σε αυτά τα προγράμματα γίνεται με παρόμοιο τρόπο. Ο χρήστης έχει στη διάθεσή του μια κενή επιφάνεια εργασίας, μια λευκή σελίδα, πάνω στην οποία μπορεί να γράψει το κείμενο που θέλει, να το μορφοποιήσει αλλάζοντας τις ιδιότητες όπως το χρώμα και η γραμματοσειρά, να εισαγάγει εικόνες και άλλα αντικείμενα.

Το FrontPage Express έρχεται μαζί με τα Windows 98 και θα σας βοηθήσει να δημιουργήσετε τις ιστοσελίδες οπτικά, χωρίς την πληκτρολόγηση εντολών HTML.

Τα Windows 98 προσφέρουν το FrontPage Express 2.0, ένα ακόμα πρόγραμμα συγγραφής ιστοσελίδων, με λιγότερες όμως δυνατότητες από το πλήρες πακέτο FrontPage 2000. Θα καλύψει πάντως τις βασικές ανάγκες σας, υποστηρίζοντας τις πιο πολλές από τις δύσκολες και δύστροπες εντολές της HTML με οπτικό τρόπο, χωρίς να χρειαστεί να γράψετε ούτε μια γραμμή κώδικα. Μια αντίστοιχη αναλογία θα βρείτε στο WordPad και το Word για τη δημιουργία εγγράφων στα Windows. Η Microsoft προσφέρει στο WordPad, που έρχεται όπως και το FrontPage Express μαζί με τα Windows χωρίς πρόσθετη χρέωση, τις βασικές λειτουργίες για την επεξεργασία κειμένου. Αντίθετα, στο Word θα βρείτε πολύ περισσότερες εντολές και τη δυνατότητα να δημιουργήσετε επαγγελματικά έγγραφα με πιο πλούσιο υλικό. Το ίδιο συμβαίνει και με το FrontPage Express, το οποίο μπορείτε να χρησιμοποιήσετε για να φτιάξετε τις δικές σας στατικές ιστοσελίδες, να τις αποθηκεύσετε στο σκληρό σας δίσκο ή να τις στείλετε σε κάποιο διακομιστή. Αν χρειαστείτε την επεξεργασία δυναμικών στοιχείων, μια καλύτερη και πιο ακριβή μορφοποίηση, ή τη σύνδεση της ιστοσελίδας με βάσεις δεδομένων, τότε θα πρέπει να καταφύγετε στο πλήρες πακέτο ή ακόμα και στις εντολές της HTML.

Ξεκινώντας

Ένα από τα ενδιαφέροντα σημεία στην κατασκευή των ιστοσελίδων είναι ότι δεν χρειάζεστε παρά ελάχιστα πράγματα για να αρχίσετε αυτή την απίθανη απασχόληση. Πρακτικά, χρειάζεστε μόνο έναν υπολογιστή και τα Windows 98. Όλα τα υπόλοιπα υπάρχουν στο λειτουργικό σύστημα και στα βοηθητικά προγράμματα τα οποία είναι ήδη εγκατεστημένα στο σκληρό σας δίσκο. Μπορείτε να δημιουργήσετε τις δικές σας ιστοσελίδες χωρίς καν να έχετε συνδεθεί με το Internet, γράφοντας εντολές HTML στο Notepad. Το αποτέλεσμα το βλέπετε μέσα από το πρόγραμμα αναζήτησης, τον Internet Explorer, που έρχεται πλέον ενσωματωμένος στα Windows 98. Στο ξεκίνημα, για απλές λειτουργίες και την εμφάνιση κειμένου, η συγγραφή σελίδων φαίνεται απλή. Καθώς οι σελίδες γίνονται περισσότερο σύνθετες στην εμφάνιση, με γραφικά και φόρμες, η συγγραφή γίνεται δυσκολότερη και οι εντολές πιο σύνθετες. Αν δεν διατηρήσετε έναν ορθολογιστικό τρόπο στην κωδικοποίηση των εντολών HTML, θα σπαταλάτε πολύ χρόνο για διορθώσεις, όπως συμβαίνει και στον «κανονικό» προγραμματισμό. Αν και δεν μπορεί να θεωρηθεί πλήρης γλώσσα προγραμματισμού, η HTML διαθέτει αρκετά από τα χαρακτηριστικά τους. Η συγγραφή των απλών σελίδων, μπορεί να γίνει με έναν απλό editor, το Notepad, για παράδειγμα, αποθηκεύοντας κάθε αρχείο με την κατάληξη «.htm». Για να δείτε τα περιεχόμενά του, κάντε διπλό κλικ στο εικονίδιο «Ο Υπολογιστής μου» και στη συνέχεια, αφού εντοπίσετε το συγκεκριμένο αρχείο, κάντε πάλι διπλό κλικ πάνω του. Αυτόματα θα φορτωθεί ο Internet Explorer και θα εμφανίσει τα περιεχόμενα του αρχείου, με τις εντολές μεταφρασμένες πια σε εικόνες, παραγράφους και σελίδες.

Στις μοντέρνες ιστοσελίδες στο Internet τα πράγματα δεν είναι τόσο απλά, καθώς θα χρειαστεί να ενσωματώσετε γραφικά, συνδέοντας πολλές φορές διαφορετικά τμήματα της ίδιας εικόνας με διαφορετικές λειτουργίες. Για να απλοποιηθούν αυτές οι σύνθετες σελίδες και για να μη χρειάζεται να γράφετε ένα κατεβατό εντολών κάθε φορά, μπορείτε να χρησιμοποιήσετε τα ειδικά προγράμματα συγγραφής. Όποιο πρόγραμμα και αv χρησιμοποιήσετε για τη συγγραφή των σελίδων σας για το Internet, δεν θα μπορέσετε να αποφύγετε τηv ίδια τη γλώσσα HTML και τις περίεργες εντολές της.

Η Γλώσσα HTML

Το πλήρες όνομά της είναι Hypertext Markup Language και σημαίνει σε ελεύθερη μετάφραση γλώσσα σημείωσης υπερκειμένων. Αυτό προέρχεται από την ίδια τη δομή της γλώσσας με την οποία σημειώνει κανείς περιοχές του κειμένου με απλές εντολές («ταμπέλες») μορφοποίησης, έτσι ώστε στη συνέχεια να μπορεί να φορτωθεί σε έναν υπολογιστή, απομονώνοντας κάθε μαρκαρισμένη περιοχή. Η HTML είναι η βασική γλώσσα συγγραφής κάθε ιστοσελίδας που θα βρείτε στο Internet. Στην πιο συνηθισμένη και απλή μορφή οι σελίδες στο Internet αποτελούνται από αρχεία κειμένου με εντολές μορφοποίησης (tag) που μοιάζουν με ταμπέλες. Οι ταμπέλες αυτές είναι ουσιαστικά εντολές της γλώσσας HTML και συνήθως γράφονται σε ζεύγη, δηλώνοντας την αρχή και το τέλος της εντολής. Η εντολή, για παράδειγμα, <Β> και </Β> δηλώνει την αρχή και το τέλος της εμφάνισης του κειμένου με έντονη γραφή (bold). Οι κωδικοί αυτοί, κλεισμένοι στις αγκύλες, διαβάζονται από το πρόγραμμα αναζήτησης το οποίο μορφοποιεί κατάλληλα το κείμενο στηv οθόνη. Η γλώσσα HTML δεν περιγράφει μια σελίδα όπως κάνουν οι περισσότερες γλώσσες πρoγραμματισμoύ. Δεν χρειάζεται να δηλώσει κανείς επακριβώς κάθε γραφικό στοιχείο και τη θέση του στην οθόνη. Απλώς μαρκάρει το κείμενο με προκαθορισμένα χαρακτηριστικά και αφήνει το πρόγραμμα αναζήτησης να το παρουσιάσει στην κατάλληλη μορφή. Μέσω των ταμπελών μπορείτε εύκολα να εισαγάγετε και να μορφοποιήσετε κείμενο, γραφικά, ήχο, βίντεο, να δημιουργήσετε φόρμες και συνδέσεις, τόσο στο ίδιο το κείμενο όσο και σε άλλα αρχεία.

Το FrontPage Express σάς επιτρέπει να βλέπετε τον κώδικα και να αλλάζετε τις εντολές HTML, από την επιλογή Προβολή, HTML.

Η έννοια του Υπερκειμένου (Hypertext) είναι ίσως η σημαντικότερη δυνατότητα και τo καθοριστικό χαρακτηριστικό που προκάλεσε αρχικά τη μεγάλη διάδοσή του. Σημαίνει ότι κάθε τμήμα κειμένου ή γραφικού μπορεί να συνδεθεί με ένα άλλο κείμενο HTML, από τον ίδιο το σκληρό δίσκο ή και από οποιοδήποτε άλλο σημείο μέσα στο Internet. Αυτό το χαρακτηριστικό έχει πλέον ατονήσει στην ορολογία της Πληροφορικής, καθώς τα περισσότερα σημεία σε μια εφαρμογή κρύβουν από πίσω τους διαφορετικές λειτουργίες οι οποίες εκτελούνται κάνοντας κλικ, διπλό κλικ και δεξί κλικ κ.ο.κ. Οι χρήστες είναι πλέον συνηθισμένοι με τις γραφικές επιφάνειες εργασίας και τη λειτουργία του ποντικιού. Το ίδιο συμβαίνει και στο Internet. Το πρόγραμμα αναζήτησης, μόλις βρει μια τέτοια εντολή, φροντίζει να φορτώσει το αντίστοιχο κείμενο ή την αντίστοιχη ιστοσελίδα.

Οι Βασικές Εντολές

Μια ιστοσελίδα αποτελείται από δύο βασικά τμήματα, την επικεφαλίδα (HEAD) και το βασικό κορμό ή σώμα (BODY). Οι λέξεις μέσα στις δύο αγκύλες < > αποτελούν τις εντολές (ταμπέλες) της γλώσσας HTML. Ο χαρακτήρας «!» σηματοδοτεί την αρχή σχολίων. Κάθε αρχείο πρέπει να ξεκινά από την παραπομπή < HTML >, που δηλώνει τον τύπο του κειμένου, και να τελειώνει με τηv παραπομπή </HTML>. Η επικεφαλίδα περιλαμβάνει γενικές πληροφορίες, όπως ο τίτλος, ο κατασκευαστής, η γλώσσα και άλλα. Βρίσκεται ανάμεσα στις εντολές <HEAD> και </HEAD>. Οι πληροφορίες που βρίσκονται στο τμήμα της επικεφαλίδας δεν εμφανίζονται στο πρόγραμμα αναζήτησης. Οι εντολές <BΟDY> και </BΟDY> δείχνουν την αρχή και το τέλος του βασικού κορμού της ιστοσελίδας και περιέχουν όλες τις άλλες εντολές μορφοποίησης. Αντίθετα από την επικεφαλίδα, το περιεχόμενο και οι εντολές HTML που βρίσκονται στο βασικό κορμό εμφανίζονται μέσα από το πρόγραμμα αναζήτησης. Μην ξεχάσετε στο τέλος της σελίδας τις αvτίστoιxες εvτoλές </BΟDY> και </HTML>.

Στη γλώσσα HTML υπάρχουν οι απλές εντολές μορφοποίησης, όπως οι <HR>,<br>,<p> αλλά και οι πιο σύνθετες για τη δημιουργία πινάκων, φορμών και ειδικών εφέ, η πολυπλοκότητα των οποίων θα σας αναγκάσει να χρησιμοποιήσετε ένα πρόγραμμα συγγραφής. Πάντα όμως θα χρειαστεί η δική σας παρέμβαση για τη διόρθωση ορισμένων και την εισαγωγή άλλων εντολών HTML. Ας ξεκινήσουμε όμως από την αρχή, ρίχνοντας μια πρώτη ματιά στις εύκολες εντολές που μπορείτε να περάσετε σε ένα αρχείο του NotePad. Η εντολή <HR> εμφανίζει μια οριζόντια γραμμή. Μπορείτε να αλλάξετε το μήκος, το πλάτος αλλά και το χρώμα με το οποίο θα εμφανιστεί στην ιστοσελίδα.

<html>

<head>

<meta http-equiv="Content-Type"

content="text/html; charset=windows-1253">

<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">

<title>Περιοδικό</title>

</head>

<body bgcolor="#F9CFFE">

<p align="center"></p>

<hr size="5" color="#0000FF">

<hr size="5" width="80%" color="#0000FF">

<hr size="5" width="70%" color="#0000FF">

<hr size="5" width="60%" color="#0000FF">

<hr size="5" width="50%" color="#0000FF">

<h1 align="center"><br>

Περιοδικό<br></h1>

<hr size="5" width="50%" color="#0000FF">

<hr size="5" width="60%" color="#0000FF">

<hr size="5" width="70%" color="#0000FF">

<hr size="5" width="80%" color="#0000FF">

<hr size="5" color="#0000FF">

</body>

</html>

Στην επικεφαλίδα (μεταξύ <HEAD> και </HEAD>) υπάρχουν η κωδικοποίηση της γλώσσας (charset=windows-1253), η πληροφορία ότι δημιουργήθηκε από το FrontPage Express και ο τίτλος της ιστοσελίδας που εμφανίζεται στην μπλε γραμμή, στο παράθυρο του Internet Explorer. Οι εντολές μορφοποίησης βρίσκονται στο βασικό τμήμα (<BODY>) της ιστοσελίδας. Στην πρώτη γραμμή υπάρχει η δήλωση για το χρώμα του φόντου (bgcolor="#F9CFFE"). Στη συνέχεια επαναλαμβάνεται η εντολή <HR> που δημιουργεί μια οριζόντια γραμμή με διαφορετικό μήκος (width) κάθε φορά και με στοίχιση στο κέντρο. Το αποτέλεσμα φαίνεται στην πιο κάτω εικόνα. Οι παράμετροι size και color δηλώνουν το πάχος και το χρώμα της οριζόντιας γραμμής αντίστοιχα. Αντί για τους περίεργους αριθμούς μπορείτε να εισαγάγετε τα «πιο ανθρώπινα» ονόματα των χρωμάτων, όπως, για παράδειγμα, color="fuchsia", color="red" κ.λπ. Την αντιστοίχιση θα τη βρείτε στη παρακάτω εικόνα.

Το αποτέλεσμα της εντολής <HR> όπως φαίνεται μέσα από το FrontPage Express και τον Internet Explorer.

Εκτός από την οριζόντια γραμμή, υπάρχουν και οι εντολές αλλαγής γραμμής και παραγράφου, <br> και <p> αντίστοιχα. Η αλλαγή παραγράφου δημιουργείται αυτόματα από το FrontPage Express πατώντας το <Enter> σε οποιοδήποτε σημείο του κειμένου, όπως ακριβώς γίνεται και με το Word στην επεξεργασία κειμένου. Η ιστοσελίδα εμφανίζει μια μεγαλύτερη απόσταση μεταξύ των δύο γραμμών, από ό,τι η απλή αλλαγή γραμμής που δημιουργείται με την εντολή <br>.

Ο πιο κάτω κώδικας, για παράδειγμα, θα εμφανίσει μία διεύθυνση, στοιχισμένη αριστερά, έτοιμη να τυπωθεί σε μια επιστολή.

<html>

<p><b>Σύνταξη</b><br>

Πανεπιστημίου 39,<br>

Αθήνα 105 64,<br>

τηλ: 3716.006-9, <br>

Fax: 3716.012</p>

</html>

Προσθέτοντας την εντολή <p align="right"> ή <p align="right"> αντί της <p>, οι στήλες με τη διεύθυνση θα στοιχιστούν στο κέντρο και δεξιά της σελίδας αντίστοιχα.

Εκτός όμως από απλό κείμενο μπορεί κανείς να εισαγάγει εικόνες που αφενός δημιουργούν μια πιο ευανάγνωστη σελίδα και αφετέρου προσφέρουν και πρόσθετη λειτουργικότητα. Κάνοντας κλικ πάνω σε μια εικόνα ή σε ένα τμήμα της το πρόγραμμα αναζήτησης μπορεί να φορτώσει μια άλλη ιστοσελίδα ή να σας μεταφέρει σε μια άλλη διεύθυνση στο Internet. Η εντολή για την εισαγωγή μιας εικόνας είναι η <img src="CD.jpg">, όπου η παράμετρος src δείχνει την τοποθεσία που βρίσκεται η εικόνα. Μπορείτε να την τοποθετήσετε οπουδήποτε θέλετε στην ιστοσελίδα, στην αρχή, στο τέλος ή ακόμα και ανάμεσα σε μια λέξη. Ο πιο κάτω κώδικας θα εμφανίσει μια εικόνα (CD.jpg) ανάμεσα στο κείμενο.

<html>

<head>

<meta http-equiv="Content-Type"

content="text/html; charset=windows-1253">

<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">

<title>Εικόνες με HTML</title>

</head>

<body bgcolor="#FFFFFF">

<h1 align="center">Περιοδικό</h1>

<p>Τα δύο CD που

<img src="CD.jpg" align="absmiddle" width="211" height="181">

συνοδεύουν το περιοδικό <font color="red"></font>

</p>

</body>

</html>

Οι παράμετροι width και height ορίζουν το μέγεθος της εικόνας που μπορεί να συμπιέσει κανείς, όπως στο συγκεκριμένο παράδειγμα, αλλά και να αυξήσει τις διαστάσεις της αρχικής εικόνας. Φυσικά, η εικόνα θα δείξει παραμορφωμένη ανάλογα με το αρχικό της μέγεθος. Η παράμετρος align="absmiddle" ορίζει τη στοίχιση της εικόνας σε σχέση με τη γραμμή του κειμένου. Στην περίπτωση του παραδείγματος η στοίχιση είναι στη μέση της γραμμής. Μπορείτε όμως να επιλέξετε τη στοίχιση στο κάτω μέρος, στο πάνω μέρος, στη βάση της γραμμής αλλάζοντας την παράμετρο align σε bottom, top και absbottom αντίστοιχα.

Θα παρατηρήσετε, δουλεύοντας με εικόνες και κείμενο, ότι δεν είναι καθόλου εύκολο να στοιχίσετε το κείμενο και να εμφανίσετε ένα ομοιογενές και καλαίσθητο αποτέλεσμα. Πολλές φορές το κείμενο «τρέχει» από τη μία άκρη, οι φωτογραφίες δεν είναι στοιχισμένες η μία κάτω από την άλλη, υπάρχουν μεγάλα ή μικρότερα κενά και πολλά άλλα. Τη λύση έρχεται να δώσει ο Πίνακας (Table), στα κελιά του οποίου μπορεί να στοιχίσει κανείς πιο εύκολα το κείμενο και τις εικόνες. Ο Πίνακας δημιουργείται με τις εντολές <table> και </table>. Ο παρακάτω κώδικας δημιουργεί έναν πίνακα με δύο σειρές και τέσσερις στήλες, με τις εντολές <tr> και <td> αντίστοιχα. Το πλάτος του πίνακα καταλαμβάνει το 70% της σελίδας (width="70%") και περικλείεται από ένα στενό περίγραμμα (border="1"), που είναι όμως ορατό. Τα περιεχόμενα της πρώτης στήλης έχουν αριστερή στοίχιση, της δεύτερης είναι στοιχισμένα στο κέντρο και της τρίτης στα δεξιά (align="center"). Η τέταρτη στήλη αντί για κείμενο περιλαμβάνει μια εικόνα (BULLET.gif) και τα κελιά της εμφανίζονται σε σκούρο μπλε χρώμα. Το χρώμα στο φόντο του κελιού καθορίζεται από την εντολή bgcolor="navy" ή bgcolor="#000080", αν ακολουθήσετε τους κωδικούς των χρωμάτων και όχι τα ονόματα.

<table border="1" width="70%">

<tr>

<td width="25%">(1,1)</td>

<td align="center" width="25%">(1,2)</td>

<td align="right" width="25%">(1,3)</td>

<td align="center" width="25%" bgcolor="navy"><p

align="center"><img src="IMAGES/BULLET.gif" width="10"

height="13"></p>

</tr>

<tr>

<td width="25%">(2,1)</td>

<td align="center" width="25%">(2,2)</td>

<td align="right" width="25%">(2,3)</td>

<td align="center" width="25%" bgcolor="navy"><p

align="center"><img src="IMAGES/BULLET.gif" width="10"

height="13"></p>

</tr>

</table>

Επιλέγοντας Ενημερωμένες Εκδόσεις από τη διεύθυνση «http://windowsupdate.Microsoft.com» το σύστημα θα προσπαθήσει να διαβάσει τις πληροφορίες από το δικό σας PC.

Το ενδιαφέρον με τη γλώσσα HTML και το Internet είναι αυτή ακριβώς η δυνατότητα παραμετροποίησης. Αν μικρύνετε το παράθυρο του Internet Explorer, θα δείτε ότι ο πίνακας αυτόματα μικραίνει, διατηρώντας την αναλογία 7:10 που έχει καθοριστεί στην εντολή width="70%". Το ίδιο συμβαίνει και με τα υπόλοιπα κελιά του πίνακα. Έτσι, μπορείτε να διατηρήσετε την ομοιογένεια και τη στοίχιση του κειμένου και των εικόνων στην ιστοσελίδα. Μπορείτε επίσης να εισαγάγετε έναν πίνακα μέσα σε ένα κελί ενός άλλου πίνακα στην περίπτωση που υπάρχει σύνθετο περιεχόμενο που θα πρέπει να μορφοποιηθεί κατάλληλα.

HTML 4.0

Η γλώσσα HTML έχει διανύσει μια μεγάλη πορεία εξέλιξης, ανάλογη με αυτήν του Internet και φυσικά εξακολουθεί να εξελίσσεται και σήμερα. Η τελευταία της έκδοση είναι η 4.01, η οποία ενσωματώνει αρκετές νέες και δυναμικές εντολές. Μία παραλλαγή της αρχικής γλώσσας είναι η XHTML που στοχεύει στην ενσωμάτωση του πρότυπου XML στις ιστοσελίδες και στη δημιουργία πιο πλούσιων ιστοσελίδων. Περισσότερες λεπτομέρειες για τις εξελίξεις της γλώσσας HTML μπορείτε να βρείτε στο Internet, στη διεύθυνση « Στη συνέχεια θα εμφανιστεί μια λίστα με τις ενημερωμένες εκδόσεις των επιμέρους προγραμμάτων.

Το FrontPage Express εμφανίζει μια κενή επιφάνεια εργασίας, μια λευκή σελίδα πάνω στην οποία μπορείτε να τοποθετήσετε τα δικά σας αντικείμενα, δημιουργώντας σιγά σιγά την ιστοσελίδα έτσι όπως τη θέλετε.

Οπτική Συγγραφή

Ξεκινήστε γράφοντας τις λέξεις που θα αποτελέσουν την επικεφαλίδα. Στη συνέχεια επιλέξτε την και αντιστοιχίστε την με το «Επικεφαλίδα 1» από το μενού επιλογών «Αλλαγή στιλ». Θα δείτε να αλλάζει το σχήμα του κειμένου. Καλό θα είναι να στοιχίσετε την επικεφαλίδα στο κέντρο, κάνοντας κλικ στο αντίστοιχο κουμπί εντολών. Προσοχή στη γραμματοσειρά! Θα πρέπει στο κείμενο που γράφετε να επιλέξετε μια ελληνική γραμματοσειρά, όπως, για παράδειγμα, η Arial Greek. Ταυτόχρονα, θα πρέπει να επιλέξετε την Ελληνική κωδικοποίηση στο σύνολο των στοιχείων της ιστοσελίδας, διαφορετικά οι χαρακτήρες που εμφανίζονται μέσα από τον Internet Explorer δεν θα μπορούν να διαβαστούν. Για να γίνει αυτό κάντε δεξί κλικ στην επιφάνεια της σελίδας και επιλέξτε το «Ιδιότητες σελίδας». Στη συνέχεια, στο πλαίσιο «Κωδικοποίηση HTML» επιλέξτε το Ελληνικό. Στην οθόνη με τις ιδιότητες της ιστοσελίδας θα δείτε ότι υπάρχουν αρκετά ακόμα πεδία με ενδιαφέρουσες πληροφορίες, όπως, π.χ., ο τίτλος και η δυνατότητα ενσωμάτωσης ενός ηχητικού παραδείγματος που ακούγεται μόλις εμφανιστεί η σελίδα στον Internet Explorer. Στην ίδια οθόνη υπάρχει επίσης και η ετικέτα «Φόντο», από όπου μπορεί κανείς να αλλάξει το χρώμα του φόντου στη σελίδα. Εκτός από τα προεπιλεγμένα χρώματα μπορείτε να σχεδιάσετε τη δική σας απόχρωση επιλέγοντας το Προσαρμοσμένο χρώμα. Η επόμενη οθόνη θα εμφανίσει τη χρωματική παλέτα των Windows. Κάντε κλικ με το ποντίκι στην κλίμακα που θέλετε και προσθέστε το στη λίστα των χρωμάτων (Προσθήκη). Άλλο ένα ενδιαφέρον χαρακτηριστικό είναι η δυνατότητα να προσθέσετε στο φόντο μια ολόκληρη εικόνα και ένα υδατογράφημα που εμφανίζεται σε αχνή μορφή πάνω στη φωτογραφία. Για να αλλάξετε παράγραφο πατήστε το <Enter> και για να αλλάξετε γραμμή το <Shift> και το <Enter>. Για να εισαγάγετε μια εικόνα σε οποιαδήποτε θέση στην ιστοσελίδα θα πρέπει πρώτα να μετακινήσετε το ποντίκι στη συγκεκριμένη θέση και στη συνέχεια να επιλέξετε το εικονίδιο Εισαγωγή εικόνας. Αφού επιλέξετε την εικόνα που θέλετε από το σκληρό σας δίσκο, θα δείτε να εμφανίζεται στην ιστοσελίδα από όπου μπορείτε να αλλάξετε τις ιδιότητες, όπως είναι το μέγεθος, το φόντο και άλλες. Κάντε δεξί κλικ στην εικόνα και επιλέξτε «Ιδιότητες Εικόνας». Στο πλαίσιο «Κείμενο» μπορείτε να πληκτρολογήσετε την περιγραφή της εικόνας που εμφανίζεται μόλις ο δείκτης του ποντικιού μείνει μερικά δευτερόλεπτα σταθερός πάνω από την εικόνα, όταν αυτή φαίνεται από τον Internet Explorer. Μόλις τελειώσετε με την εισαγωγή του κειμένου, των εικόνων και μορφοποιήσετε όπως θα θέλατε την ιστοσελίδα, θα πρέπει να την αποθηκεύσετε στο σκληρό σας δίσκο. Κάθε ιστοσελίδα θα πρέπει να αποθηκεύεται σε ένα ξεχωριστό αρχείο. Η σύνδεση μεταξύ των σελίδων γίνεται με τη Δημιουργία υπερσύνδεσης. Επιλέξετε μια λέξη ή μια εικόνα και κάντε κλικ στο εικονίδιο της σύνδεσης. Στην οθόνη που θα εμφανιστεί μπορείτε να επιλέξετε το είδος της σύνδεσης και τη διεύθυνση προορισμού. Το FrontPage Express δεν σας επιτρέπει να συνδέσετε ένα μόνο τμήμα της εικόνας με την αντίστοιχη διεύθυνση και έτσι θα πρέπει να το κάνετε χειροκίνητα με εντολές HTML. Αν μάλιστα φορτώσετε το αρχείο της Λίστας 1 (\CORNER\HTML\01\list1.html) στο FrontPage Express, δεν θα μπορέσετε να επεξεργαστείτε τις επιμέρους υπερσυνδέσεις πάνω στην εικόνα.

Κινούμενα GIF

Θα έχετε δει αρκετές φορές ορισμένα εικονίδια να κινούνται ή να αλλάζουν μορφή, με πιο κλασικό παράδειγμα τις διαφημίσεις (banner) που βλέπει κανείς συνήθως στο πάνω μέρος των ιστοσελίδων. Η μορφή της κινούμενης εικόνας προέρχεται από την εναλλαγή πολλών καρέ που βρίσκονται αποθηκευμένα μέσα στην εικόνα. Είναι μια λειτουργία που έχει ενσωματωθεί στο πρότυπο του αρχείου GIF από το 1989. Το αρχείο GIF με πολλά καρέ ονομάζεται κινούμενο (animated) GIF. Η κίνηση, η εμφάνιση δηλαδή των διαφορετικών καρέ το ένα μετά το άλλο, γίνεται μόνο εφόσον το επιτρέπει η εφαρμογή. Έτσι, μπορείτε να δείτε την κίνηση από τον Internet Explorer. Αντίθετα, εμφανίζεται μια στατική εικόνα αν το κοιτάξετε από το Paint ή την προεπισκόπηση του Windows Explorer, καθώς κανένα από αυτά τα δύο προγράμματα δεν έχει τη δυνατότητα να επεξεργαστεί τα κινούμενα GIF.

Η εγκατάσταση θα ξεκινήσει αφού αποδεχθείτε τους όρους χρήσης, και θα ολοκληρωθεί σε μερικά μόνο λεπτά, ειδοποιώντας παράλληλα για την πρόοδο.

Όσο εντυπωσιακή είναι η εμφάνιση της κίνησης τόσο εύκολη είναι και η κατασκευή του. Το πρώτο πράγμα που πρέπει να κάνει κανείς είναι να δημιουργήσει τις επιμέρους εικόνες που το αποτελούν. Μπορείτε να χρησιμοποιήσετε οποιαδήποτε εφαρμογή επεξεργασίας εικόνων, όπως είναι το PhotoShop, το PhotoPaint της Corel ή ακόμα και αυτό το απλό πρόγραμμα ζωγραφικής (Paint) που έρχεται με τα Windows. Αυτές οι εφαρμογές δεν χρειάζεται να υποστηρίζουν τη μορφή του κινούμενου GIF για να δημιουργήσετε τις επιμέρους εικόνες. Θα χρειαστείτε όμως ένα ειδικό πρόγραμμα, που υποστηρίζει τα κινούμενα GIF, «βλέπει» τις εικόνες μία μία ξεχωριστά και σας επιτρέπει να τις βάλετε στη σωστή σειρά, να ορίσετε το χρόνο εμφάνισης της καθεμιάς και να δημιουργήσετε το αρχείο GIF συμπιέζοντάς το τόσο, ώστε να κατεβαίνει γρήγορα από το Internet. Υπάρχουν αρκετά προγράμματα που μπορείτε να χρησιμοποιήσετε για αυτήν τη δουλειά, όπως το GIF Construction Set από την Alchemy MindWorks και το GIF Animator από την Ulead, μια εταιρεία με παράδοση και πολλά προϊόντα στην επεξεργασία εικόνας και βίντεο. Και τα δύο προσφέρουν ένα εύκολο περιβάλλον εργασίας και αρκετές πρόσθετες λειτουργίες, τις οποίες μπορεί κανείς να χρησιμοποιήσει για να φτιάξει κινούμενα αρχεία GIF. Θα βρείτε ένα παράδειγμα από ένα κινούμενο GIF (ericcson_bnr1.gif) στον κατάλογο \CORNER\HTML.

Σύνθετες Εντολές HTML

Μέχρι τώρα αναφερθήκαμε στις απλές εντολές HTML που περιλαμβάνονται στο βασικό τμήμα (BODY) της ιστοσελίδας. Όμως, υπάρχουν και οι εντολές που μπορεί κανείς να εισαγάγει στην επικεφαλίδα της ιστοσελίδας, στο τμήμα HEAD. Μία από αυτές είναι η εντολή META που δέχεται μια σειρά από παραμέτρους και χρησιμοποιείται για να δηλωθούν το όνομα, η γλώσσα και οι βασικές ιδιότητες της ιστοσελίδας. Μπορείτε όμως να τη χρησιμοποιήσετε για να υποχρεώσετε, για παράδειγμα, το πρόγραμμα αναζήτησης να φορτώνει πάντα τα περιεχόμενα της συγκεκριμένης ιστοσελίδας κάθε δύο δευτερόλεπτα. Η εντολή <META HTTP-EQUIV="REFRESH" CONTENT=2> θα έχει αυτό ακριβώς το αποτέλεσμα. Μπορείτε επίσης να «στείλετε» το πρόγραμμα αναζήτησης, αυτόματα, έπειτα από μερικά δευτερόλεπτα, σε μια άλλη τοποθεσία χρησιμοποιώντας την εντολή <META HTTP-EQUIV="REFRESH" CONTENT="3; URL=http://www.in.gr">. Η διεύθυνση στην οποία θα μεταφερθεί το πρόγραμμα αναζήτησης ύστερα από τρία δευτερόλεπτα δηλώνεται στην παράμετρο URL και είναι η αρχική σελίδα του in.gr στην προηγούμενη εντολή.

Μέχρι τώρα είδαμε ορισμένες από τις πιο συνηθισμένες εντολές μορφοποίησης που περιλαμβάνει η γλώσσα HTML. Όλες αυτές έχουν ένα κοινό σημείο. Για να εκτελεστούν και να μορφοποιήσουν το κείμενο θα πρέπει να υπάρχουν στη συγκεκριμένη θέση. Αν, π.χ., θέλετε η κάθε επικεφαλίδα να είναι στοιχισμένη στο μέσο και να έχει χρώμα κόκκινο, θα πρέπει κάθε φορά αμέσως μετά την εντολή <H1> να πληκτρολογείτε και τις υπόλοιπες εντολές

<h1 align="center">

<FONT color="red" face="Helvetica">

</FONT>

Αν έχετε αρκετές επικεφαλίδες σε κάθε ιστοσελίδα, τότε θα πρέπει πάντα να επαναλαμβάνετε τις ίδιες εντολές. Ακόμα και αν χρησιμοποιήσετε ένα οπτικό πρόγραμμα συγγραφής, η δημιουργία είναι αρκετά κοπιαστική και το αποτέλεσμα είναι ένα αρχείο αρκετά μεγαλύτερο από το κανονικό, χωρίς τις εντολές μορφοποίησης. Τα στιλ μορφοποίησης CSS (Cascading Style Sheets) θα σας βοηθήσουν να αποφύγετε αυτή την επανάληψη, δηλώνοντας το στιλ που θέλετε μόνο μία φορά. Ο πιο κάτω κώδικας δημιουργεί ένα στιλ που συνοδεύει ολόκληρο το έγγραφο, καθώς αναφέρεται στην εντολή <BODY>.

<STYLE type="text/css">

<!--

BODY {color: red;

background-color: white;

font-size: 16px;

font-family: Arial;

line-height: 20px;

margin-left: 5%}

-->

</STYLE>

Η δημιουργία του στιλ γίνεται με την εντολή <STYLE>. Η επόμενη εντολή (!--) υπάρχει για τη συμβατότητα των προγραμμάτων αναζήτησης. Στις παλαιότερες εκδόσεις του Internet Explorer, για παράδειγμα, ο κώδικας ανάμεσα στις εντολές «<!--» και «-->» θα αγνοηθεί, θεωρώντας ότι είναι σχόλιο και όχι εντολές δημιουργίας του στιλ. Ο παρακάτω κώδικας δημιουργεί ένα στιλ για την επικεφαλίδα H1.

<HTML>

<head>

<meta http-equiv="Content-Type"

content="text/html; charset=windows-1253">

<TITLE>Η σελίδα του Bach (παράδειγμα CSS)</TITLE>

<STYLE>

H1 { color: red }

</STYLE>

</head>

<BODY>

<H1> Η σελίδα του Bach </H1>

<P>Ο Γιόχαν Σεμπάστιαν Μπαχ ήταν ένας παραγωγικός και ιδιαίτερα σεβαστός συνθέτης. Μεταξύ των πολλών και σημαντικών έργων του υπάρχουν τα εξής:

<UL>

<LI> Goldberg Variations (Goldberg-Variationen)

<LI> Brandenburg Concertos

<LI> Christmas (Weihnachts) Oratorio

</UL>

<H1> Ιστορικά στοιχεία</H1>

<P>Ο Μπαχ συνέθεσε τα έργα του στις αρχές του 18ου αιώνα, μια περίοδος που ονομάζεται μπαρόκ (Baroque).

<H1><font color="navy">Βιογραφικά στοιχεία</font></H1>

<P>Ο Μπαχ γεννήθηκε το 1685 στη Γερμανία και πέθανε το 1750 στο Leipzig της Γερμανίας.

</BODY>

</HTML>

Εμφάνιση μιας λωρίδας κειμένου σε μορφή σαρωτή, με τη μικρή γραμμούλα να διατρέχει το κείμενο από τη μια άκρη στην άλλη.

Ενσωματώνοντας το στιλ στην ιστοσελίδα δεν χρειάζεται πλέον να αλλάζετε το χρώμα της γραμματοσειράς σε κόκκινο για κάθε <H1>. Το συγκεκριμένο χαρακτηριστικό έχει ενσωματωθεί στο στιλ και επιλέγεται αυτόματα, εκτός αν δηλώσει κανείς κάποιο άλλο χρώμα στη συγκεκριμένη επικεφαλίδα, όπως γίνεται στο πιο πάνω παράδειγμα, στην επικεφαλίδα με τα Βιογραφικά στοιχεία του συνθέτη που εμφανίζεται με μπλε χρώμα. Θα βρείτε το παράδειγμα στο αρχείο \CORNER\HTML\ 06\css.html. Αν είστε λάτρης του οπτικού προγραμματισμού το FrontPage Express, θα σας απογοητεύσει, καθώς δεν υποστηρίζει τη δημιουργία και την επεξεργασία τέτοιων στιλ (CSS).

Επόμενα Βήματα

Σκοπός μας σε αυτό το μικρό οδοιπορικό στη συγγραφή στατικών ιστοσελίδων είναι το Internet και η ξενάγηση στα μυστικά της γλώσσας HTML. Ξεκινήσαμε από τις απλές εντολές, ρίχνοντας μια ματιά στη φιλοσοφία αυτής της γλώσσας που αποτελεί τη ραχοκοκαλιά του Internet, όπως το ξέρουμε σήμερα. Παράλληλα πήρατε μια πρώτη γεύση από την οπτική συγγραφή μιας ιστοσελίδας που μπορεί να γίνει με εφαρμογές και βοηθητικά προγράμματα, επιτρέποντάς σας να απαγκιστρωθείτε από τις περίεργες εντολές HTML. Το FrontPage Express, πάνω στο οποίο έχουν στηθεί οι ιστοσελίδες του παραδείγματος, μπορείτε να το κατεβάσετε από το Internet. Ακόμα υπάρχουν τα προγράμματα HotDog 6.0 για συγγραφή ιστοσελίδων, καθώς και τα Ulead Gif Animator και Gif Construction Set Professional 2.0 για τη δημιουργία κινούμενων εικόνων GIF.

Στη συνέχεια, σε επόμενα τεύχη μας, συνεχίζοντας το οδοιπορικό στο Internet, θα γνωρίσουμε και άλλες σύνθετες εντολές όπως τα Frames, η συγγραφή δυναμικών ιστοσελίδων και ιστοσελίδων με περίεργες και δύστροπες εντολές μορφοποίησης όπου δύσκολα μπορεί κανείς να αποφύγει τον κώδικα, όσο καλό πρόγραμμα συγγραφής και αν χρησιμοποιεί. Οι δυναμικές εντολές, η κίνηση και η αλληλεπίδραση με το κλικ του ποντικιού υλοποιούνται με τη γλώσσα προγραμματισμού JavaScript. Είναι μια γλώσσα που μπορεί να ενσωματωθεί σε οποιαδήποτε ιστοσελίδα και να της δώσει ζωντάνια και κίνηση. Μαζί θα δημιουργήσουμε ένα παιχνίδι σε HTML που θα μπορείτε να τρέχετε μέσα από οποιοδήποτε πρόγραμμα αναζήτησης.

Κ.Καρακατσάνης


Κεντρική σελίδα