Εισαγωγή στην HTML

Πρώτα Μαθήματα

Τεχνάσματα διαμόρφωσης σελίδων

Φιλοσοφία της HTML

Πολύ απλή: Γράφουμε κείμενο, τμήματα του οποίου περικλείουμε μεταξύ ετικετών της μορφής:
< name > ...μεταξύ αρχικής-τελικής ετικέτας... </name>
Το κείμενο μεταξύ των ετικετών διαμορφώνεται από τον διακομιστή (browser) σε μιά ορισμένη μορφή, ανάλογα με το όνομα (name) της ετικέτας. Γιά παράδειγμα η ετικέτα
< h1 > ...κείμενο επικεφαλίδας... </h1>
καθορίζει ότι το ...κείμενο επικεφαλίδας... γράφεται σε μιά ξεχωριστή γραμμή με ποιό μεγάλα γράμματα απ΄ότι το συνηθισμένο κείμενο.

Τυπικό έγγραφο (υποχρεωτικές tags)

Ένα τυπικό έγγραφο HTML περιέχει υποχρεωτικά τις tags: 

<html>
<head>
<title>Τίτλος παραθύρου </title>
</head>
<body>
Εδώ το σώμα του εγγράφου.
</body>
</html>

Παράγραφοι

Παράγραφοι ορίζονται από την tag:
<p> ...ενδεικτικό κείμενο... </p>.

Λίστες

Υπάρχουν δύο ειδών λίστες. Οι αριθμημένες και οι μη-αριθμημένες. Οι πρώτες ορίζονται από την tag:
<OL> Λίστα ... </OL>,

και οι δεύτερες από την tag:
<UL> Λίστα ... </UL>.

Τα στοιχεία (γραμμές) της λίστας ορίζονται από την tag:
<LI> Γραμμή της λίστας ... </LI>.

Παράδειγμα λίστας:
  1. Ενα
  2. Δύο
  3. Τρία
Η λίστα αυτή κατασκευάζεται από το απόκομα:
<OL>
<LI>Ενα</LI>
<LI>Δύο</LI>
<LI>Τρία</LI>
</OL>

Πίνακες


Πίνακες ορίζονται από την tag:
<TABLE BORDER=1> Πίνακας ... </TABLE>,

Οι γραμμές ενός πίνακα ορίζονται από την tag:
<TR> Γραμμή του πίνακα ... </TR>.

Τα στοιχεία της γραμμής ορίζονται από την tag:
<TD> Στοιχεία της γραμμής ... </TD>.

Παράδειγμα Πίνακα:
Ενα-1Ενα-2
Δύο-1Δύο-2
Τρία-1Τρία-2
Ο πίνακας αυτός κατασκευάζεται από το απόκομα:
<TABLE BORDER=1>
<TR><td>Ενα-1</td><td>Ενα-2</td></TR>
<TR><td>Δύο-1</td><td>Δύο-2</td></TR>
<TR><td>Τρία-1</td><td>Τρία-2</td></TR>
</TABLE>

Διασυνδέσεις (links)

Διασυνδέσεις εμφανίζονται στον αναγνώστη της σελίδας ως υπογραμμισμένο κείμενο, το οποίο πατόντας το με τον ποντικό παραπέμπει σε άλλη σελίδα ή σε άλλο σημείο της τρέχουσας σελίδας. Διασυνδέσεις ορίζονται με την tag:
<a href="...διεύθυνση παραπομπής...¨> ...κείμενο που υπογραμμίζεται... </a>.
Γιά παράδειγμα, πατώντας εδώ ακριβώς πάμε στην παράγραφο γιά πίνακες.
Το παράδειγμα αντιστοιχεί στο απόκομα:
< a href="#pin"> εδώ ακριβώς </a>

Παράδειγμα διασύνδεσης με έγγραφο που ευρίσκεται σε άλλο υπολογιστή, συνδεδεμένο με το δίκτυο:
Πανεπιστήμιο Κρήτης
Το οποίο παράγεται από το απόκομα:
< a href="http://www.uoc.gr"> Πανεπιστήμιο Κρήτης </a>.

Ανάλογα ορίζονται διασυνέσεις με άλλα έγγραφα του ίδιου υπολογιστή, ακόμη και διaσυνδέσεις με κάποια ειδική παράγραφο ενός εγγράφου, όπως φανερώνει το δεύτερο παράδειγμα:
< a href="C:/Τα έγγραφά μου/MyPhoneBook.html"> Tα τηλέφωνά μου </a>
< a href="C:/Τα έγγραφά μου/MyPhoneBook.html#nikos"> Tηλέφωνο Νίκου </a>
Τέλος υπάρχει η διασύνδεση με την οποία ο αναγνώστης μπορεί να στήλει e-mail σε μιάν ορισμένη διεύθυνση:

Στήλε μου γράμμα: Πάρις Πάμφιλος

Αρκεί να πατήσει ο αναγνώστης το υπογραμμισμένο όνομα γιά να ενεργοποιηθεί το πρόγραμμα αποστολής e-mail στο οποίο καταχωρείται αυτόματα η διεύθυνση του παραλήπτη.

Εικόνες

Εικόνες εισάγονται στην σελίδα με την ετικέτα <img>. Γιά παράδειγμα η επόμενη εικόνα εισάγεται από το απόκομα:
<img src="introduction_pics/FermatTheorem.gif" align="left" alt="Θεώρημα του Fermat" width="322" height="233">
Θεώρημα του Fermat Το χαρακτηριστικό (attribute) alt="θεώρημα του Fermat", καθορίζει ένα σύντομο κείμενο που εμφανίζεται στην οθόνη των χρηστών, των οποίων ο διακομιστής (είναι παλιός και) δεν επιτρέπει παρουσίαση εικόνων. Αντί της εικόνας εμφανίζεται αυτό το κείμενο.
Τα χαρακτηριστικά width="322" height="233" είναι οι διαστάσεις της εικόνας σε pixels.
Το χαρακτηριστικό align="left" τοποθετεί την εικόνα στο αριστερό μέρος τους εγγράφου και προξενεί ροή του κειμένου από τα δεξιά της εικόνας.
Η <img> δεν έχει αντίστοιχη </img> ετικέτα.






Κείμενο σε στήλες με πίνακες

I say, in my slight way I may proceed
play upon the surface of Humanity.
I write the world, nor care if the world read,
At least for this I cannot spare its vanity.
My Muse hath bred, and still perhaps may breed
More foes by this same scroll: when I began it, I
Thought that it might turn out so now I know it,
But still I am, or was, a pretty poet
    Byron, Don Juan, Canto XV, 60 		Yet I love Glory: - glory’s a great thing;
Think what it is to be in your old age
Maintained at the expense of your good king:
A moderate pension shakes full man a sage,
And heroes are but made for bards to sing,
Which is still better; thus in verse to wage
Your wars eternally, besides enjoying
Half-pay for life, make mankind worth destroying.
    Byron, Don Juan, Canto VIII-14

Γιά τον τρόπο λειτουργίας δέστε τον πηγέο κώδικα παραγωγής αυτής της σελίδας.

Μπάρα πλοήγησης με πίνακες

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

Φιλοσοφία Τυπικό Παράγραφοι Λίστες Πίνακες Διασυνδέσεις Εικόνες

Κείμενο πάνω σε εικόνα-φόντο

Εδώ χρησιμοποιούμε έναν πίνακα με μία γραμμή και ένα μόνο κελί. Ο πίνακας αρχίζει με την ετικέτα που περιέχει την πληροφορία γιά το υπόβαθρο (φόντο) πάνω στο οποίο θα εμφανισθεί το κείμενο:
<table align="center" background ="introduction_picstoixos.jpg">


Χωρίς περίσκεψιν, χωρίς λύπην, χωρίς αιδώ
μεγάλα κ' υψηλά τριγύρω μου έκτισαν τείχη.

Και κάθομαι και απελπίζομαι τώρα εδώ.
Αλλο δεν σκέπτομαι: τον νουν μου τρώγει αυτή η τύχη·

διότι πράγματα πολλά έξω να κάμω είχον.
Α όταν έκτιζαν τα τείχη πώς να μην προσέξω.

Αλλά δεν άκουσα ποτέ κρότον κτιστών ή ήχον.
Ανεπαισθήτως μ' έκλεισαν από τον κόσμον έξω.

Κωνσταντίνος Π. Καβάφης (1896)

Το υπόβαθρο (background) σχηματίζεται από μία μικρή εικόνα, την οποία ο διακομιστής χειρίζεται σαν πλάκα και τοποθετεί πολλές φορές, την μία δίπλα στην άλλη σ΄όλη την έκταση του πίνακα και τον στρώνει, όπως ο μάστορας στρώνει με πλάκες ένα πεζοδρόμιο.
Οι λεπτομέρειες κατασκευής αυτής της παραγράφου φαίνονται στον πηγαίο κώδικα.

Ροή κειμένου ανάμεσα σε δύο εικόνες

Deltoid Trochoid2 Το παράδειγμα αφορά στις ευθείες Simson ενός τριγώνου ΑΒΓ από τα σημεία Ρ της περιγεγραμμένης περιφέρειας. Οι ευθείες αυτές ορίζονται από τις προβολές του Ρ πάνω στις πλευρές του τριγώνου. Συμβαίνει και οι τρείς προβολές του Ρ να περιέχονται σε μιά ευθεία Ε(Ρ) που λέγεται ευθεία Simson του τριγώνου, ως προς το σημείο Ρ. Καθώς το Ρ κινήται πάνω στον κύκλο η ευθεία Ε(Ρ) είναι εφαπτόμενη του Δελτοειδούς αριστερά. Το τροχοειδές δεξιά διαγράφεται από το σημείο τομής δύο Simson ευθειών E(Ρ) και Ε΄(Ρ΄), γιά τις οποίες η επίκεντρος γωνία ΡΟΡ΄ είναι σταθερή.



Οι ετικέτες που ορίζουν τις εικόνες τοποθετήθηκαν, και οι δύο, στην αρχή του κειμένου με το απόκομα:
<img src="introduction_pics/Deltoid.gif" align="left" alt="Deltoid" width="285" height="341">
<img src="introduction_pics/Trochoid2.gif" align="right" alt="Trochoid2" width="264" height="267">

Άλλα θέματα

Υπάρχει πληθώρα τεχνασμάτων τα οποία μπορούν να κάνουν μιά ιστοσελίδα πιό ελκυστική ή αποκρουστική. Όσο πιό σύνθετη είναι μία σελίδα, τόσο περισσότερο αργεί να φορτωθεί από τον διακομιστή και τόσο περισσότεροι επισκέπτες, που γίνονται ολοένα και πιό ανυπόμονοι, την εγκαταλείπουν πριν ολοκληρωθεί η φόρτωσή της και πάνε αλλού. Επίσης αυξάνει και η δυσκολία γιά τον δημιουργό της σελίδας καθώς φανερώνεται η ανάγκη πολύ καλής οργάνωσης του κώδικα ώστε να είναι ευανάγνωστος. Ήδη η ανάγνωση του κώδικα της παρούσης σελίδας είναι μιά καλή άσκηση γιά τον αρχάριο. Μετά απ΄αυτήν την άσκηση, μπορεί ο αναγνώστης να περιδιαβεί το διαδίκτυο και να επισκεφθεί τούς τόπους που αναφέρω παρακάτω μαζεύοντας περισσότερες πληροφορίες γιά την HTML.