Το HTML Με Πάρα Πολύ Απλά Λόγια

Συγγραφέας

Νίκος Χριστόπουλος (ndc)

Ιστορικό

0.1, ndc, 27 Ιουλίου 2003

0.2, ndc, 11 Σεπτεμβρίου 2003

0.3, ndc, 15 Σεπτεμβρίου 2003

Το κείμενο αυτό είναι βασισμένο στο πολύ απλό εγχειρίδιο που βρήκα στο W3C.
W3C, Getting started with HTML, Dave Raggett, revised 13th February 2002

Τι πρέπει ήδη να γνωρίζουμε πριν ξεκινήσουμε

HTML

Ή αλλιώς HyperText Markup Language, είναι ουσιαστικά ένα συντακτικό για να φτιάχνουμε έγγραφα. Το ΗΤΜL είναι σημαντικό, γιατί αυτό το συντακτικό επιλέχτηκε να χρησιμοποιείται στο web (που είναι ένα από τα "μέρη" που αποτελούν το internet) για την δημιουργία και παρουσίαση σελίδων.

Browser

Επίσης γνωστό ως 'web browser' ή 'HTML user agent', είναι το πρόγραμμα που αναλαμβάνει να επεξεργαστεί και να εμφανίσει HTML έγγραφα.

File, Directory, File Extention

Πρέπει ήδη να γνωρίζουμε τι είναι Αρχείο, Φάκελος (γνωστό και ως 'κατάλογος', 'folder' και 'directory') και Τύπος αρχείου (γνωστό ως 'file extention').

Text Editor

Πρέπει ήδη να γνωρίζουμε να χειριζόμαστε τουλάχιστον ένα κειμενογράφο απλού κειμένου (.txt), δηλαδή τουλάχιστον το notepad (γνωστό και ως 'Σημειωματάριο). Το Word δεν είναι κάτι τέτοιο άσχετα αν μπορεί να σώσει και σε .txt μορφή.

Πριν αρχίσουμε, ας κάνουμε μια δοκιμή στο browser.

Σύμφωνα με το πρότυπο κάθε browser πρέπει να υποστηρίζει τις παρακάτω ψευδο-οικογένειες γραμματοσειρών. Αυτές υπάρχουν, και χρησιμοποιούνται ευρέος, ώστε ως αναγνώστες να μπορούμε να επιλέγουμε την επιθυμητή γραμματοσειρά για κάθε στυλ που επιθυμεί να χρησιμοποιήσει ο συγγραφέας.

Αυτή είναι η εξ' ορισμού 'serif' γραμματοσειρά με το εξ' ορισμού μέγεθος... Πρέπει να είναι συγγενική της Times, Georgia και το μέγεθος το επιθυμητό για να διαβάζουμε κείμενα

Αυτή είναι η εξ' ορισμού 'sans-serif' γραμματοσειρά... Πρέπει να είναι συγγενική της Arial, Trebuchet, Tahoma ή Verdana και το μέγεθος, το επιθυμητό για να διαβάζουμε κείμενα

Αυτή είναι η εξ' ορισμού 'monospace' γραμματοσειρά... Πρέπει να είναι συγγενική της Courier και το μέγεθος το επιθυμητό για να διαβάζουμε κείμενα. Έχει ιδιαίτερη σημασία αυτή η γραμματοσειρά να είναι σταθερού πλάτους, δηλαδή όλα τα γράμματα να έχουν το ίδιο πλάτος, το Ι και το Μ πρέπει να καταλαμβάνουν τον ίδιο χώρο.

Αυτή είναι η εξ' ορισμού 'cursive' γραμματοσειρά... Πρέπει να είναι καλλιγραφική. Το μέγεθος πρέπει να είναι το επιθυμητό για να διαβάζουμε κείμενα

Αυτή είναι η εξ' ορισμού 'fantasy' γραμματοσειρά... Μπορεί να είναι οτιδήποτε (π.χ. Alpha Geometrique, ArtDeco, Western) αρκεί να μας αρέσει. Το μέγεθος πρέπει να είναι το επιθυμητό για να διαβάζουμε κείμενα

Εάν δεν σας αρέσουν αυτές οι ρυθμίσεις, από το μενού του browser θα πρέπει να μπορείτε να δώσετε τα δικά σας ορίσματα.

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

Στην δεξιά πλευρά βλέπουμε πως πρέπει να εμφανίζεται αυτό το κείμενο όταν θα έχουμε ρυθμίσει τον browser ... σχεδόν ... σωστά. Προσέξτε τα στυλ των γραμματοσειρών και προσπαθήστε να τα πλησιάσετε. Τα μεγέθη των serif και sans-serif πρέπει να είναι τα ίδια... Αυτό είναι λίγο δύσκολο να το πετύχετε αλλά αρκετά σημαντικό. Προσέξτε ότι τα monospace φαίνονται μεγαλύτερα από τα υπόλοιπα (δεν είναι όμως). Αυτό είναι λάθος που έχει να κάνει με την φύση των γραμματοσειρών σταθερού πλάτους. Στον konqueror (ο browser μου) δυστυχώς δεν μπορώ να ορίσω το μέγεθος των monospace, εσείς αν μπορείτε κάντε το, να έχετε τα monospace πάντα λίγο πιο μικρά από τα υπόλοιπα fonts. Οι οικογένειες 'fantasy' και 'cursive' δεν χρησιμοποιούνται συχνά, οπότε μην στεναχωρηθεί τε αν δεν βρείτε γραμματοσειρές που να ταιριάζουν. Το παράδειγμα αυτό είναι από το σύστημά μου στο σπίτι, δηλαδή, μην περιμένετε την ίδια ποιότητα, αλλά βολευτεί τε με ότι μπορέσετε να καταφέρετε. Έχω 17'' οθόνη με ανάλυση 1152x864, αυτό σημαίνει ότι τα fonts φαίνονται πιο μεγάλα (ή μικρότερα) από όσο πρέπει για εσάς που έχετε μικρότερη (ή μεγαλύτερη) ανάλυση ή διαφορετικό monitor. Οπότε διαμορφώστε το μέγεθος ανάλογα με της ανάγκες σας.

Χρήση εξομάλυνσης

Η εξομάλυνση γραμματοσειρών (anti-aliasing) έχει σχέση με την ποιότητα εμφάνισης των γραμμάτων. Παρατηρήστε πως εμφανίζονται τα κείμενα στο Adobe Reader - το πρόγραμμα που εμφανίζει αρχεία PDF, ή στα Tex/LaTeX (DVI). Αυτό το θάμπωμα που βλέπεται γύρω από τα γράμματα είναι μια τεχνική που ονομάζεται εξομάλυνση γραμμών.

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

Παράδειγμα

	Με χρήση εξομάλυνσης
	Το ίδιο κείμενο χωρίς εξομάλυνση

Στα σύγχρονα συστήματα αυτή η τεχνολογία υπάρχει και θα τα δούμε.

Windows 95 + MS Plus!

Windows 98/Me/2000/XP

Υπάρχει το λεγόμενο font smoothing το οποίο μπορείτε να ενεργοποιήσετε από τις Ιδιότητες (Properties) της οθόνης. Η ποιότητα είναι πολύ καλή αλλά λειτουργεί για συγκεκριμένα στυλ και μεγέθη (πάνω ή κάτω από κάποιο όριο) τα οποία δεν μπορείτε να ρυθμίσετε.

XFree86 4+

Τα X έχουν εδώ και καιρό πολύ καλή ποιότητα εξομάλυνσης (μέσω της freetype2). Θα πρέπει και εδώ να την ενεργοποιήσετε μόνοι σας είτε από το Κέντρο ελέγχου του KDE ή του Gnome, είτε με το χέρι πειράζοντας τα αρχεία ρυθμίσεων.

Εισαγωγή

Ο περισσότερος κόσμος που δεν γνωρίζει πόσο απλό είναι το HTML, φαντάζεται ότι πρόκειται για κάτι δύσκολο που έχει σχέση με τον προγραμματισμό Η/Υ. Καμιά σχέση... Το HTML είναι τόσο απλό που ο οποιοδήποτε άνθρωπος, ακόμα και παιδιά κάτω των 10, με ελάχιστες γνώσεις μπορεί να το χρησιμοποιήσει και αυτό θα το διαπιστώσετε σ' αυτό το κείμενο.

Όπως θα καταλάβατε, σκοπός αυτού του κειμένου είναι να μπορέσουμε να καταλάβουμε το HTML και το πως γράφουμε HTML, όσο γίνετε με πάρα πολύ απλά λόγια. Ο περισσότερος κόσμος που ξέρει HTML, προτιμά να γράφει με το "χέρι" χρησιμοποιώντας δηλαδή προγράμματα όπως το Notepad και το UEdit (plain text editors), υπάρχουν όμως και έτοιμα προγράμματα που λειτουργούν σαν το Word για τους αρχάριους, πράγμα που εκτός του ότι δημιουργεί πρόβλημα, δεν έχει και μεγάλο νόημα όπως θα δείτε. Ακόμα και να δεν έχετε σκοπό να γράφετε HTML με το χέρι, αυτό το άρθρο θα σας βοηθήσει να χρησιμοποιείται καλύτερα αυτά τα εργαλεία.

Ευρετήριο

1. Ξεκινώντας με ένα τίτλο
2. Προσθέτοντας τίτλους και παραγράφους
3. Προσθέτοντας λίγο στυλ στο κείμενο
4. Προσθέτοντας εικόνες στο έγγραφό μας
5. Προσθέτοντας συνδέσεις σε άλλες σελίδες
6. Τρία είδη λίστας
7. Χρώματα
8. Πίνακες
9. Πρόσθετο Α: Ελληνικά
10. Πρόσθετο Β: Ειδικά σύμβολα στα κείμενα
11. Πρόσθετο Γ: Περισσότερα στύλ κειμένου
12. Πρόσθετο Δ: Υπολογισμός αριθμού χρώματος
13. Πρόσθετο Ε: MarkUp Languages (HTML, LaTeX) και WYSIWYG (i.e. Word)
14. Πρόσθετο Ζ: Προβλήματα και ρύθμιση των browsers
15. Περισσότερες πληροφορίες
16. Λεξικό
17. Βιβλιογραφία

Κάθε HTML χρειάζεται ένα τίτλο, κοιτάξτε λοιπόν τι πρέπει να γράψουμε:

<title>
Το πρώτο μου HTML έγγραφο
</title>

Διαμορφώστε το Το πρώτο μου HTML έγγραφο στο κείμενο που θέλετε. Όπως θα παρατηρήσατε για να δηλώσουμε τον τίτλο πρέπει να γράψουμε πρώτα το title και στο τέλος το /title. Ο τίτλος πρέπει πάντα να γράφετε στην αρχή του εγγράφου.

Για να δοκιμάσετε το παραπάνω, πληκτρολογήστε το σε ένα κειμενογράφο, όπως το notepad (Σημειωματάριο αναφέρεται στα Ελληνικά Windows), και αποθηκεύσετε το αρχείο με το όνομα 'test.html', μετά δείτε το μέσα από κάποιον web browser. Θα πρέπει, λοιπόν, να εμφανιστεί ο τίτλος μας, σαν τίτλος του παράθυρου του browser.

Το HTML όμως θέλει και κάποια πράγματα παραπάνω. Όλα τα έγγραφα αυτού του τύπου πρέπει πάντα να αρχίζουν με το html και να τελειώνουν με το /html.

<html>
<title>
Το πρώτο μου HTML έγγραφο
</title>
</html>

Όλα τα έγγραφα αυτού του τύπου χωρίζονται σε δύο μέρη. Στην κεφαλίδα που δηλώνεται με το head και τελειώνει με το /head και στο κυρίως κείμενο που δηλώνεται με το body και τελειώνει με το /body. Στην κεφαλίδα δηλώνονται πράγματα που αφορούν το κείμενο σαν σύνολο, όπως είναι η γλώσσα που είναι γραμμένο το κείμενο, ο τίτλος του έγγραφου, κ.α. Έτσι για να είναι σωστό το παράδειγμα μας πρέπει να το γράψουμε με τον ακόλουθο τρόπο:

<html>

<head>
<title>Το πρώτο μου HTML έγγραφο</title>
</head>

<body>
Αυτό είναι το κείμενο και το βλέπω στον browser μια χαρά!
</body>

</html>

Αυτά είναι όλα κι όλα τα υποχρεωτικά, όλα τα άλλα που θα αναφερθούμε είναι προαιρετικά και γράφονται στην περιοχή ανάμεσα στα body και /body. Πραγματικά μπορούμε να μην χρησιμοποιήσουμε τίποτα άλλο και απλά να γράψουμε όλο το κείμενό μας έτσι. Όλα τα υπόλοιπα που προσφέρει HTML μας χρειάζονται για να μορφοποιήσουμε το κείμενο, ή για να εκμεταλλευτούμε τις δυνατότητες του internet, κ.λπ., αλλά δεν είναι απαραίτητα.

Στο HTML υπάρχουν 6 επίπεδα τίτλων. Το h1 είναι το πιο μεγάλο και το h6 το πιο μικρό. Δηλαδή, μπορούμε να πούμε ότι το h1 χρησιμοποιείται για επικεφαλίδες, το h2 για τα υποκεφάλαια, το h3 για ενότητες, το h4 για μικρότερες ενότητες, κ.λπ.

Κοιτάξτε τώρα πως θα προσθέσουμε ένα μεγάλο τίτλο:

<h1>Ένας σημαντικός τίτλος</h1>

και έναν μικρότερης σημασίας:

<h2>Μικρότερης σημασίας τίτλος</h2>

Μέσα στο τετράγωνο βλέπουμε το αποτέλεσμα:

Κάθε παράγραφος που γράφουμε πρέπει να ξεκινά με p και να τελειώνει με /p. Το /p δεν είναι απαραίτητο, αλλά αν και κουραστικό είναι καλό να συνηθίζουμε να το γράφουμε διότι στο μέλλον του HTML που λέγετε XML είναι απαραίτητο.

<p>Αυτή είναι η πρώτη παράγραφος.</p>
<p>Αυτή είναι η δεύτερη παράγραφος.</p>

Το κείμενο στο HTML, σπάει σε γραμμές αυτόματα ανάλογα με το πλάτος του browser ή το πλάτος που έχουμε εμείς ορίσει με κάποιο άλλο κωδικό. Μπορεί, λοιπόν, να θέλουμε να "σπάσουμε" το κείμενο σε συγκεκριμένα σημεία, όπως ακριβώς κάνουμε με το πλήκτρο ENTER στους συνηθισμένους κειμενογράφους . Μπορούμε να το κάνουμε αυτό με το br.

<p>Αυτή είναι η πρώτη παράγραφος.</p>
<p>Αυτή είναι η δεύτερη παράγραφος.</p>
<p>Αυτή είναι η τρίτη παράγραφος που "σπάμε" την γραμμή<br> εδώ ακριβώς.</p>

Μέσα στο τετράγωνο βλέπουμε το αποτέλεσμα:

Μπορούμε να ορίζουμε και την στοίχιση της παραγράφου, δηλαδή αν την θέλουμε αριστερά, στο κέντρο ή δεξιά. Αυτό γίνετε με το να δώσουμε τιμή στην παράμετρο align. Η παράμετρος αυτή μπορεί να δεχτεί μία από τις τρείς τιμές, left για αριστερά, center για το κέντρο και right για δεξιά.

<p align=left>   Αυτή είναι η πρώτη παράγραφος, είναι στοιχιμένη αριστερά.</p>
<p align=center> Αυτή είναι η δεύτερη παράγραφος, είναι στοιχιμένη στο κέντρο.</p>
<p align=right>  Αυτή είναι η τρίτη παράγραφος που
"σπάμε" την γραμμή<br> εδώ ακριβώς.
Είναι στοιχιμένη στο δεξια.</p>

Μέσα στο τετράγωνο βλέπουμε το αποτέλεσμα:

Υπάρχει βέβαια και η δυνατότητα να γράφουμε και να εμφανίζουμε κείμενα όπως σε έναν απλό text editor χωρίς να χρειάζεται να πληκτρολογούμε κωδικούς όπως p και br. Αυτό γίνετε με τον κωδικό pre.

Το κείμενο ανάμεσα στο pre και /pre εμφανίζει όλα τα κενά και τις γραμμές ακριβώς όπως τις πληκτρολογήσαμε. Το κείμενο εμφανίζεται με την σταθερού πλάτους γραμματοσειρά (monospace) ώστε να υπολογιστούν σωστά τα κενά. Οι γραμμές δεν σπάνε ανάλογα με το πλάτος του παράθυρου του browser και έτσι αν το κείμενο δεν χωρά τότε συνήθως εμφανίζεται ένα οριζόντια scroll bar για την μετακίνηση.

<pre>
The PRE element tells visual user agents that the enclosed text is "preformatted".
When handling preformatted text, visual user agents:

	* May leave white space intact.
	* May render text with a fixed-pitch font.
	* May disable automatic word wrap.
	* Must not disable bidirectional processing.
</pre>

Μέσα στο τετράγωνο βλέπουμε το αποτέλεσμα:

The PRE element tells visual user agents that the enclosed text is "preformatted".
When handling preformatted text, visual user agents:

	* May leave white space intact.
	* May render text with a fixed-pitch font.
	* May disable automatic word wrap.
	* Must not disable bidirectional processing.

Μπορείτε να δώσετε έμφαση σε μία ή περισσότερες λέξεις, για παράδειγμα με το em

Αυτό είναι πραγματικά <em>ενδιαφέρον</em> θέμα!

Υπάρχουν όμως και άλλοι τρόποι να προσθέσετε στυλ, όπως τα ακόλουθα

em

Έμφαση

strong

Έντονη έμφαση

cite

Αναφορά σε κάτι ή κάποιον

dfn

Όρολογία

address

Διεύθυνση

Παράδειγμα

Αυτό είναι <em>ενδιαφέρον</em> θέμα!
Αυτό, όμως είναι πιο <strong>ενδιαφέρον</strong> θέμα!

... όπως αναφέρει ο <cite>Επίκουρος</cite>...

Το <dfn>web</dfn> είναι ένα μέσο επικοινωνίας.

LH Λογισμική,
<address>
Στουρνάρη 23, Εξάρχεια
Αθήνα
</address>

Μέσα στο τετράγωνο βλέπουμε το αποτέλεσμα:

Όπως επίσης υπάρχουν και οι απλοί και γνώριμοι τρόποι μορφοποίησης

b

Έντονη γραφή (bold)

i

Πλάγια γραφή (italic)

u

Υπογραμμισμένη γραφή (underline)

tt

Χρήση σταθερού πλάτους γραμματοσειράς (teletype/monospace)

<b>Έντονη γραφή</b>.<br>
<i>Πλαγιαστή γραφή</i>.<br>
<u>Υπογραμμισμένη γραφή</u>.<br>
<tt>Χρήση σταθερού πλάτους γραμματοσειράς</tt>.

Μέσα στο τετράγωνο βλέπουμε το αποτέλεσμα:

Τα ακρωνύμια (acronym) και οι συντομογραφίες (abbr) είναι μια όμορφη δυνατότητα του HTML η οποία μας δίνει την δυνατότητα να εξηγήσουμε στον αναγνώστη απ' ευθείας το τι σημαίνουν. Αυτό γίνετε με το να συμπληρώσουμε την παράμετρο title.

Το <acronym title="World Wide Web">WWW</acronym> σημαίνει World Wide Web.
<abbr title="et cetera">etc.</abbr>

Μέσα στο τετράγωνο βλέπουμε το αποτέλεσμα:

Στο παράδειγμά μας αν πάτε με το mouse πάνω από την λέξη WWW θα πρέπει ο browser με κάποιο τρόπο να εμφανίσει το κείμενο World Wide Web.

Αν και η παράμετρος title εδώ έχει ξεκάθαρο νόημα, μπορεί να χρησιμοποιηθεί σε συνεργασία και με τους άλλους κωδικούς1 όπως dfn, em, cite κ.λπ. Η έννοια της title είναι να μπορούμε να δώσουμε μια πληροφορία παραπάνω στον αναγνώστη2, στις περιπτώσεις όμως των acronym και abbr η χρήση της είναι ξεκάθαρη.

Πολλές φορές χρειάζεται να παραθέτουμε κείμενα, αυτό μπορούμε να το κάνουμε με την q για μικρά κείμενα ή με την blockquote για μεγάλα.

Γνωστό είναι ότι <q title="Διογένης Λαέρτιος, VI.34">Επιχείρησε να φάει ωμό κρέας όμως δεν τα κατάφερε</q>.

<blockquote title="Διογένης Λαέρτιος, VI.68">
Η μόρφωση, έλεγε, πως για τους νέους είναι σύνεση, για τους γέρους
παρηγοριά, για τους φτωχούς πλούτος και για τους πλούσιους στολίδι
</blockquote>

Μέσα στο τετράγωνο βλέπουμε το αποτέλεσμα:

Μπορούμε να προσθέσουμε εικόνες στις σελίδες με αρκετούς τρόπους. Ο απλούστερος είναι να χρησιμοποιήσουμε το img. Ας υποθέσουμε ότι έχουμε ένα αρχείο εικόνας που ονομάζεται nick.jpg στο ίδιο κατάλογο με το έγγραφό μας.

<img src="nick.jpg">

Η παράμετρος src χρησιμοποιήσετε για να δηλώσουμε το όνομα του αρχείου, το οποίο μπορεί να περιέχει και τον κατάλογο. Αν και οι κατάλογοι που γράφονται με την μορφή των DOS/Windows υποστηρίζονται αρκετά καλά στους γνωστούς browser, αν η σελίδα αυτή πρόκειται να μεταφερθεί στο internet, προτιμήστε την μορφή του Unix και σχετικούς καταλόγους. Αν για παράδειγμα το αρχείο μας βρίσκετε στο c:\home\web\images, και το HTML αρχείο στο c:\home\web τότε θα ήταν σωστό να το δηλώσουμε σαν images/nick.jpg. Μπορούμε επίσης να χρησιμοποιήσουμε και εικόνες που βρίσκονται σε άλλες σελίδες δίνοντας στο src την πλήρη διεύθυνση της εικόνας π.χ. src=http://my.company-server.gr/images/my-company-logo.png

Μπορούμε, επίσης, να προσθέσουμε και κάποιο κείμενο όπου θα εμφανίζεται στην θέση της εικόνας μέχρι αυτή να φορτωθεί. Το ίδιο κείμενο χρησιμοποιείται επίσης και από τον browser σαν πληροφορία που εμφανίζεται στον αναγνώστη σαν επεξήγηση της εικόνας (tooltip).

<img src="nick.jpg" alt="Η φωτογραφία μου">

Μπορείτε να δημιουργήσετε εικόνες με πολλούς τρόπους, για παράδειγμα με το Corel, ή με ψηφιακή κάμερα ή με scaner. Οι περισσότεροι browsers καταλαβαίνουν τις GIF, JPEG και PNG μορφές, οπότε έχετε αρκετά περιθώρια. Αποφύγετε τις μεγάλες εικόνες, και τις πολλές εικόνες γιατί αυτό καθυστερεί, και πολλές φορές υπερβολικά, την εμφάνιση της σελίδας μας στο internet.

Ανάλογα με την εικόνα που έχετε πρέπει να διαλέγεται και τη μορφή που την αποθηκεύεται.

Το JPEG είναι ιδανικό για φωτογραφίες, η συμπίεση αυτής της μορφής μπορεί να είναι με διαφθορά της εικόνας οπότε και καταφέρνει μεγάλη συμπίεση με την επιθυμητή ζημιά στην ποιότητα της. Το πρόγραμμα επεξεργασίας εικόνας που διαθέτεται πρέπει να σας αφήνει να ρυθμίσετε την τελική συμπύκνωση/ποιότητα της. Πρέπει να γνωρίζεται ότι μια JPEG εικόνα δεν μπορούμε να την επεξεργαστούμε πολλές φορές διότι κάθε φορά που την αποθηκεύουμε, αλλοιώνεται (εκτός αν ρυθμίσουμε σε 1/1 ποιότητα).

Το GIF είναι καλό για εικονίδια διότι διαθέτει ένα εικονικό χρώμα για διαφανές, και υποστηρίζεται σχεδόν από όλους τους browsers. Το κακό με το GIF είναι ότι αντέχει μόνο 256 χρώματα, πράγμα που είναι λίγο βάρβαρο για τις μέρες μας.

Το PNG είναι το καλύτερο για οτιδήποτε άλλο εκτός από φωτογραφίες. Έχει από τις καλύτερες αποδόσεις συμπίεσης χωρίς αλλοίωση, και υποστηρίζει πραγματικό χρώμα (όπως και το JPEG) δηλαδή 16.7M χρώματα. Το μεγαλύτερο πλεονέκτημα του είναι το διαφανές "επίπεδο" που διαθέτει, όπου εκτός από απλά εικονίδια, μπορούμε να έχουμε και εικονίδια με σκιές (alpha channel). Ένα αρνητικό σημείο του PNG είναι ότι στον internet explorer μέχρι και την 6! - έκδοση που έχω δει - ακόμα δεν υποστηρίζει το διαφανές!!!

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

Οι συνδέσεις δηλώνονται με το a. Ας υποθέσουμε ότι έχουμε ένα άλλο έγγραφο, ας πούμε μια μελέτη για τον Δημόκριτο, με όνομα αρχείου demo.html και το έχουμε αποθηκεύσει στον ίδιο κατάλογο με το παράδειγμά μας. .

Αυτή η σύνδεση θα σας μεταφέρει <a href="demo.html">στην μελέτη για τον Δημόκριτο</a>.

Το κείμενο μεταξύ των a... και /a χρησιμοποιείτε σαν τίτλος της σύνδεσης. Είναι συνηθισμένο να εμφανίζεται υπογραμμισμένο και με μπλε χρώμα.

Για να δηλώσουμε μια σύνδεση σε άλλη σελίδα στο internet θα πρέπει να γράψουμε την πλήρη διεύθυνση π.χ. για το site της εταιρείας μας:

Μεταφορά στις σελίδες της <a href="http://lhlogismiki.gr/">LH Λογισμικής</a>.

Μπορούμε να χρησιμοποιούμε εικόνες αντί για κείμενο. Για παράδειγμα έστω ότι έχουμε ένα αρχείο εικόνας με το λογότυπο της εταιρείας μας με όνομα logo.gif. Με το παρακάτω θα εμφανίζεται το λογότυπο της εταιρείας και αν ο αναγνώστης κάνει κλικ στην εικόνα θα μεταφερθεί στο site της εταιρείας μας.

<a href="http://lhlogismiki.gr/"><img src="logo.gif" alt="LH Λογισμική"></a>

Συνδέσεις στην ίδια σελίδα

Μπορούμε να μεταφέρουμε τον αναγνώστη σε συγκεκριμένο μέρος της δική μας ή άλλης σελίδας. Αυτό είναι δυνατό με την ίδια εντολή αλλά με παράμετρο name. Έστω λοιπόν ότι θέλουμε να μπορεί ο χρήστης να μεταφερθεί στην αρχή της σελίδας. Πρέπει λοιπόν στην αρχή της σελίδας να βάλουμε έναν "δείκτη".

<a name="top">Αρχή Σελίδας</a>

Το top είναι το όνομα του "δείκτη". Αν θέλουμε το κείμενο "Αρχή Σελίδας" να μην εμφανίζεται, απλώς δεν το γράφουμε.

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

<a href="#top">Μεταφορά στην αρχή της σελίδας</a>

Το σύμβολο # δηλώνει έναν σελιδοδείκτη και μπορεί να χρησιμοποιηθεί και στην περίπτωση που θέλουμε να μεταφερθούμε σε άλλη σελίδα και συγχρόνως σε συγκεκριμένο μέρος της.

<a href="demo.HTML#democracy">Οι απόψεις του Δημόκριτου για την δημοκρατία</a>

Με αυτές τις τεχνικές μπορούμε να φτιάχνουμε ευρετήρια ή μενού.

Το HTML υποστηρίζει τρεις μορφές εμφάνισης λίστας. Το πρώτο είναι το λεγόμενο bulletted list όπου κάθε στοιχείο εμφανίζεται με μια βούλα (ή άλλο σχέδιο αν βρίσκετε μέσα σε άλλη λίστα) μπροστά του. Συχνά αποκαλείται και Unordered List. Από εκεί και οι κωδικοί αρχής ul και τέλους /ul της λίστας.

<ul>
  <li>Το πρώτο στοιχείο</li>
  <li>Το δεύτερο στοιχείο</li>
  <li>Το τρίτο στοιχείο</li>
</ul>

Μέσα στο τετράγωνο βλέπουμε το αποτέλεσμα:

Παρατηρήστε ότι για να δηλώσουμε τα περιεχόμενα, πρέπει να χρησιμοποιούμε τα li και /li για κάθε στοιχείο. Τα li και /li, λοιπόν, υποδηλώνουν την αρχή και το τέλος του κάθε στοιχείου της λίστας.

Το δεύτερο είδος λίστας είναι το λεγόμενο numbered list δηλαδή αριθμημένη λίστα, που συχνά αναφέρεται και ως Ordered List. Από εκεί και οι κωδικοί αρχής ol και τέλους /ol της λίστας.

<ol>
  <li>Το πρώτο στοιχείο</li>
  <li>Το δεύτερο στοιχείο</li>
  <li>Το τρίτο στοιχείο</li>
</ol>

Μέσα στο τετράγωνο βλέπουμε το αποτέλεσμα:

Μπορούμε να δηλώσουμε το είδος της αρίθμησης που θέλουμε με την παράμετρο type. π.χ. ol type=i. Υποστηρίζονται τα εξής στυλ αρίθμησης:

Μπορούμε επίσης να αλλάξουμε την αρίθμηση με το value που είναι παράμετρος του li

<ol type=i>
	<li>Το πρώτο στοιχείο</li>
	<li>Το δεύτερο στοιχείο</li>
	<li value=9>Το τρίτο στοιχείο</li>
	<li>Το τέταρτο στοιχείο</li>
</ol>

Μέσα στο τετράγωνο βλέπουμε το αποτέλεσμα:

Το τρίτο είδος είναι το λεγόμενο Definition List δηλαδή λίστα ορισμών. Αυτό μας επιτρέπει να γράψουμε μια λίστα με ορισμούς και επεξηγήσεις. Η λίστα αρχίζει και τελειώνει με τα dl και /dl. Αντίστοιχα ο κάθε ορισμός δηλώνετε με τα dt και /dt. Τέλος, κάθε επεξήγηση δηλώνετε με τα dd και /dd.

<dl>
  <dt>WWW</dt>
  <dd>World Wide Web</dd>

  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>PCMCIA</dt>
  <dd>People Can't Memorize Computer Industry Acronyms</dd>
</dl>

Μέσα στο τετράγωνο βλέπουμε το αποτέλεσμα:

Μπορούμε μέσα στις λίστες να γράψουμε και άλλες λίστες.

<ol>
  <li>Πρώτη λίστα, πρώτο στοιχείο</li>

  <li>Δεύτερο στοιχείο, εδώ θα ανοίξουμε και την δεύτερη λίστα.

    <ul>
      <li>Δεύτερη λίστα, πρώτο στοιχείο</li>
      <li>Δεύτερη λίστα, πρώτο στοιχείο</li>
    </ul>
  </li>

  <li>Πρώτη λίστα, τρίτο στοιχείο</li>
</ol>

Φυσικά ενδιάμεσα li και /li μπορούμε να χρησιμοποιήσουμε παραγράφους, επικεφαλίδες κ.λπ.

Τα χρώματα ορίζονται είτε με ένα προκαθορισμένο όνομα, είτε με το δεκαεξαδικό τους αριθμό. Φυσικά δεν θα σας βάλω να μάθετε την κωδικοποίηση αυτή αλλά αντίθετα θα σας δώσω έτοιμους αριθμούς που αντιστοιχούν σε χρώματα. Έτσι όποτε χρειαστείτε ένα χρώμα, μπορείτε από τους παρακάτω πίνακες να βρείτε τον αριθμό του και να τον αντιγράψετε στο έγγραφό σας.

Προκαθορισμένα χρώματα

Δεκαεξαδικοί αριθμοί χρωμάτων (Πρέπει να είναι ενεργοποιημένη η javascript στον browser σας)

Αποχρώσεις του κόκκινου

Αποχρώσεις του πράσινου

Αποχρώσεις του μπλέ

Συνδυασμοί κόκκινου και πράσινου

Συνδιασμοί κόκκινου και μπλέ

Συνδιασμοί πράσινου και μπλέ

Αποχρώσεις του γκρί

Ωραίος ο πίνακας χρωμάτων, έτσι; και να σκεφτείτε ότι πρόκειται για ελάχιστους συνδυασμούς από τα 16.7 εκατομμύρια χρώματα που μπορούν να εμφανίσουν η συντριπτική πλειοψηφία των PC σήμερα. Αυτός ακριβώς είναι και ο λόγος που τα χρώματα συνήθως τα γράφουμε με το δεκαεξαδικό τους αριθμό.

Ας δούμε τώρα πως τα δουλεύουμε. Το font μας επιτρέπει να πειράξουμε λίγο τις γραμματοσειρές. Η παράμετρος του που μας ενδιαφέρει για το χρώμα είναι η color. Με αυτό μπορούμε να αλλάξουμε το χρώμα των γραμμάτων για το κείμενο που βρίσκετε ανάμεσα στο font και /font. Το χρώμα το ορίζουμε δίνοντας τιμή στο color, η τιμή αυτή μπορεί να δοθεί με δύο τρόπους. α) με το όνομα του χρώματος εφόσον αυτό υπάρχει (βλέπε Πίνακα προκαθορισμένων χρωμάτων) ή με τον αριθμό του χρώματος (βλέπε τους παραπάνω πίνακες).

<font color=navy>Αυτό το κείμενο έχει μια απόχρωση του μπλε</font><br>
<font color=#6F6F6F>Αυτό το κείμενο έχει μια απόχρωση του γκρι</font>

Μέσα στο τετράγωνο βλέπουμε το αποτέλεσμα:

Το πρώτο χρώμα, δηλαδή το navy, το βρήκαμε στον πίνακα προκαθορισμένων χρωμάτων. Το χρώμα #6F6F6F μπορούμε να το δούμε στον πίνακα των χρωμάτων σ' αυτό εδώ το σημείο. Αντίστοιχα μπορούμε να χρησιμοποιήσουμε κάποιο άλλο χρώμα-αριθμό από τον πίνακα Δεκαεξαδικοί αριθμοί χρωμάτων.

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

<table border=1 cellpadding=4 cellspacing=0>
<tr> <td> Ιανουάριος  </td> <td> 1000 </td> </tr>
<tr> <td> Φεβρουάριος </td> <td>  700 </td> </tr>
</table>

Δείτε το αποτέλεσμα

Όπως παρατηρούμε, ο πίνακας αυτός περιέχει δύο γραμμές και δύο στήλες. Αρχίζει με τον κωδικό table και τελειώνει με τον κωδικό /table. Αντίστοιχα οι γραμμές των πινάκων, Table Rows, δηλώνονται με τα tr και /tr. Και τέλος τα κελιά της κάθε γραμμής, Table Data δηλώνονται με τα td και /td.

Η παράμετρος border ορίζει πόσα pixels θέλουμε για περίγραμμα. Το περίγραμμα θα εμφανιστεί πιο παχύ απο ότι το περιμένουμε γιατί είναι διπλό, ένα για ολόκληρο τον πίνακα και ένα για κάθε κελί ξεχωριστά. Η άλλη παράμετρος που ορίζουμε, η cellpadding, ορίζει το περιθώριο γύρω από τα περιεχόμενα του κάθε κελιού. Τέλος, η παράμετρος cellspacing, ορίζει το περιθώριο ανάμεσα στα κελιά. Και οι τρεις αυτές παράμετροι είναι προαιρετικές, αλλά θα χρειαστεί πολύ συχνά να τις ορίζουμε.

Ας δούμε το ίδιο παράδειγμα με άλλες τιμές στις παραμέτρους

<table border=4 cellpadding=4 cellspacing=16>

Αντίστοιχα με το td υπάρχει και το th. Ενώ το td δηλώνει απλά κελιά το th (Table Header) δηλώνει ότι τα κελιά αυτά είναι μέρος του τίτλου του πίνακα. Επίσης υπάρχει και ο κωδικός caption που μας επιτρέπει να δώσουμε μια επικεφαλίδα για όλο τον πίνακα. Πάμε λοιπόν να προσθέσουμε τίτλους στο παράδειγμά μας.

<table border=1 cellpadding=4 cellspacing=0>
<caption>Χρεώσεις</caption>
<tr> <th> Μήνας       </th> <th> Ποσό </th> </tr>
<tr> <td> Ιανουάριος  </td> <td> 1000 </td> </tr>
<tr> <td> Φεβρουάριος </td> <td>  700 </td> </tr>
</table>

Δείτε το αποτέλεσμα

Υπάρχουν επίσης και δύο ακόμα ενδιαφέρουσες παράμετροι οι οποίες δηλώνονται στο tr ή στο td ανάλογα αν απευθυνόμαστε στη γραμμή (δηλαδή ισχύει για όλα τα κελιά της γραμμής) ή στο κελί. Η πρώτη είναι η align, η οποία αναλαμβάνει την στοίχιση των στοιχείων μέσα στο κελί και παίρνει τιμές left, right ή center, για στοίχιση αριστερά, δεξιά ή στο κέντρο αντίστοιχα. Η δεύτερη είναι η bgcolor που μπορεί να πάρει τιμές το χρώμα που θα χρησιμοποιηθεί για φόντο στο κελί ή στην γραμμή (ανάλογα που την δηλώνουμε). Πάμε λοιπόν να ραφινάρουμε τον πίνακά μας:

<table border=0 cellpadding=8 cellspacing=1>
<caption>Χρεώσεις</caption>
<tr bgcolor=gray>  <th> Μήνας </th> <th> Ποσό </th> </tr>
<tr bgcolor=silver> <td> Ιανουάριος  </td> <td align=right> 1000 </td> </tr>
<tr bgcolor=silver> <td> Φεβρουάριος </td> <td align=right>  700 </td> </tr>
</table>

Δείτε το αποτέλεσμα

Πρόσθετα

Για να το δηλώσουμε ότι το έγγραφο είναι γραμμένο στην Νέο-Ελληνική γλώσσα πρέπει να προσθέσουμε στην περιοχή του <head> την εξής δήλωση

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-7">

Δηλαδή το παράδειγμα μας θα πρέπει να μετατραπεί σ' αυτή την μορφή

<HTML>
<head>
<title>Το πρώτο μου HTML έγγραφο</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-7">
</head>
<body>

...

</body>
</HTML>

Πληροφοριακά, έτσι, για να καταλάβετε περισσότερο αυτή την δήλωση, το ISO-8859-7 είναι το πρότυπο υλοποίησης Νέο-Ελληνικών για τους Η/Υ, και ISO είναι ο διεθνής οργανισμός πρωτοτύπων (standards).

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

Απλά σύμβολα που αγνοεί το HTML

Σύμβολα εμπορίου

Μαθηματικά Σύμβολα

Άλλα Σύμβολα

kbd

Κείμενο προς πληκτρολόγιση

q

Κείμενο μέσα σε εισαγωγικά

Παράθεση, παραπομπή

code

Κώδικας προγράμματος

Γραμμές εντολών (π.χ. DOS)

Γραμμές αρχείου σε text editor (π.χ. για INI αρχεία)

samp

Αποτελέσματα προγράμματος

Αποτελέσματα - παράδειγμα

var

Μεταβλητή προγράμματος

Παράμετρος ρουτίνας προγράμματος

Παράμετρος γραμμής εντολών

Για να επιστρέψετε πληκτρολογήστε <kbd>exit</kbd> και πατήστε το πλήκτρο <kbd>ENTER</kbd>

Το παρακάτω παράδειγμα σε γλώσσα προγραμματισμού <dfn>BASIC</dfn><br>
<code>
LET name$="Nick":PRINT "Hello "; name$
</code><br>
παράγει το αποτέλεσμα
<samp>Hello Nick</samp>.<br>
Όπου <q>Nick</q> είναι το περιεχόμενο
της μεταβλητής <var>name$</var>.

s

??? γραφή (strike throught)

small

Μικρότερη γραφή

big

Μεγαλύτερη γραφή

sup

Εκθέτης

sub

Δείκτης

<s>??? γραφή</s>.<br>
Φυσιολογική γραφή <small>Μικρότερη γραφή</small>.<br>
Φυσιολογική γραφή <big>Μεγαλύτερη γραφή</big>.<br>
Φυσιολογική γραφή <sup>εκθέτης</sup>.<br>
Φυσιολογική γραφή <sub>δείκτης</sub>.<br>

Τα INS και DEL χρησιμοποιούνται για να εμφανίσουν αλλαγές που γίνανε στο έγγραφο.

Αυτά τα δύο δέχονται (προαιρετικά) δύο παραμέτρους, το title που το έχουμε ήδη εξηγήσει και το datetime που εκφράζει την ημερομηνία των αλλαγών. Η μορφή του datetime είναι :

YYYY-MM-DDThh:mm:ssTZD

     YYYY = έτος
     MM   = δύο ψηφία του μήνα (01=Ιανουάριος, κ.λπ.)
     DD   = δύο ψηφία η ημέρα (01 έως 31)
     hh   = δύο ψηφία η ώρα (00 έως 23) (am/pm δεν επιτρέπεται)
     mm   = δύο ψηφία τα λεπτά (00 έως 59)
     ss   = δύο ψηφία τα δευτερόλεπτα (00 έως 59)

Το TZD είναι (time zone):

Z

Για UTC. Το "Z" πρέπει να είναι αγγλικό κεφαλαίο.

+hh:mm

-hh:mm

Τοπικός χρόνος, όπου hh είναι οι ώρες και mm το λεπτά διαφοράς από το UTC.

Το MASTER κοστίζει <del>1000</del><ins>1500</ins> €.

Οι κάρτες οθόνης που χρησιμοποιούν το λεγόμενο true color, δηλαδή 16.7M χρώματα αποθηκεύουν την τιμή τους σε 3 bytes. Αν ο αναγνώστης δεν έχει τέτοια κάρτα ή έχει επιλέξει να εργάζεται με λιγότερα χρώματα, δεν υπάρχει κανένα πρόβλημα, ο browser αναλαμβάνει να μετατρέψει το χρώμα στο ανάλογο για τον Η/Υ του αναγνώστη.

Όπως είπαμε οι κάρτες αποθηκεύουν το χρώμα σε 3 bytes, ένα byte για κάθε βασικό χρώμα. Το byte είναι μονάδα μέτρησης της "πληροφορίας" και αποτελείται από 8 bit. Το 1 bit είναι το μικρότερο ποσό πληροφορίας με πεδίο τιμών από 0 έως και ... 1. Όπως ένας διακόπτης δηλαδή που μπορεί να είναι μόνο ανοικτός (1) ή μόνο κλειστός (0). Το 1 byte όπως είπαμε, αποτελείται από 8 bit, πράγμα που σημαίνει ότι μπορεί να πάρει μία τιμή από 2^8 = 256 δυνατούς συνδυασμούς. Δηλαδή έχει πεδίο τιμών από 0 έως και 255.

Οι κάρτες οθόνης αντιλαμβάνονται το χρώμα ως ένα συνδυασμό των τριών βασικών χρωμάτων δηλαδή κόκκινο, πράσινο και μπλε. Για κάθε ένα από τα βασικά χρώματα χρησιμοποιούν 1 byte, 256 δυνατές τιμές δηλαδή για κάθε βασικό χρώμα. Έτσι έχουμε 256^3 = 16777216 συνδυασμοί.

Το δεκαεξαδικό σύστημα μέτρησης είναι πολύ βολικότερο από το δεκαδικό όταν μετράμε μονάδες πληροφορίας και αυτό γιατί όλες οι τιμές που μπορεί να έχει ένα byte μπορούν να γραφτούν με δύο δεκαεξαδικά ψηφία. Στο HTML το σύμβολο για τους δεκαεξαδικούς αριθμούς είναι το #. Δηλαδή ο αριθμός 99 είναι δεκαδικός, ενώ ο αριθμός #99 είναι δεκαεξαδικός.

Για τα χρώματα δεν θα χρειαστεί να κάνετε υπολογισμούς στο δεκαεξαδικό, ούτε με δυνάμεις, ούτε με bytes, ούτε με bits, αλλά θα χρειαστεί να το καταλάβετε. Πρέπει να είστε σε θέση να αντιλαμβάνεστε ποιος αριθμός αντιστοιχεί σε ποια ψηφία και πως να κατεβάζετε ή να ανεβάζεται την τιμή ενός χρώματος. Δηλαδή έστω ότι έχετε το χρώμα #564C9F και θέλετε να μειώσετε το λίγο το πράσινο, τι θα κάνετε;

Ας το δούμε με απλή αριθμητική. 0, 1, 2 .. 9, A (=10), B (=11), C (=12), D (=13), E (=14), F (=15), 10, 11, 12 ... 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, κ.λπ. Όπως και στο δεκαδικό αλλάζουμε δεκάδα κάθε 10 αριθμούς, έτσι και στο δεκαεξαδικό αλλάζουμε δεκαεξάδα κάθε 16 αριθμούς.

Δεκαδικό	Με απλή αριθμητική	Δεκαεξαδικό	Με απλή αριθμητική
0	0	#0	0
16	1 x 10 + 6	#10	1 x 16 + 0
32	3 x 10 + 2	#20	2 x 16 + 0
...	...	...	...
144	1 x 100 + 4 x 10 + 4	#90	9 x 16 + 0
160	1 x 100 + 6 x 10 + 0	#A0	A (δηλαδή 10) x 16 + 0
176	1 x 100 + 4 x 10 + 4	#B0	B (δηλαδή 11) x 16 + 0
...	...	...	...
249	2 x 100 + 4 x 10 + 9	#F9	F (δηλαδή 15) x 16 + 9
250	2 x 100 + 5 x 10 + 0	#FA	F (δηλαδή 15) x 16 + A (δηλαδή 10)
251	2 x 100 + 5 x 10 + 1	#FB	F (δηλαδή 15) x 16 + B (δηλαδή 11)
...	...	...	...
255	2 x 100 + 5 x 10 + 5	#FF	F (δηλαδή 15) x 16 + F (δηλαδή 15)
256	2 x 100 + 5 x 10 + 6	#100	1 x 16 x 16 + 0 x 16 + 0

Όπως είπαμε το χρώμα αποτελείται από 3 bytes. Τα bytes αυτά γράφονται με την σειρά των βασικών χρωμάτων. Δηλαδή πρώτα το κόκκινο, μετά το πράσινο και τέλος το μπλέ (RGB). Κάθε βασικό χρώμα μπορεί να πάρει τιμές από 0 έως και 255. Αυτές οι τιμές στο δεκαεξαδικό συμβολίζονται με δύο ψηφία, δηλαδή από #00 έως και #FF. Αν για παράδειγμα θέλουμε να δηλώσουμε ένα χρώμα που έχει για κόκκινο τιμή #01, πράσινο #43 και κόκκινο #A9, τότε το χρώμα γράφεται ως #0143A9. Δηλαδή το χρώμα είναι με την μορφή #ΚΚΠΠΜΜ, όπου ΚΚ τα δύο ψηφία του κόκκινου, όπου ΠΠ τα δύο ψηφία του πράσινου και όπου ΜΜ τα δύο ψηφία του μπλε.

Η ευκολία που μας δίνουν τα WYSIWYG προγράμματα είναι αυτονόητη. Όλοι μας έτσι κι αλλιώς έχουμε δουλέψει σε κάποιον επεξεργαστή κειμένων. Τa προτερήματα των markup languages όμως δεν τα ξέρετε και είναι λάθος να κρίνετε από το HTML.. Το HTML δεν πλησιάζει την απόδοση τέτοιων συστημάτων, παρ' όλα αυτά έχει πολλά από τα καλά τους.

Τι παρέχουν λοιπόν αυτά τα συστήματα;

• Σιγουριά. Το έγγραφο αποθηκεύεται σε απλό text file. Μπορεί να το βρίσκετε αστείο, αλλά ότι και να γίνει, από ένα απλό text file ποτέ δεν χάνουμε τα περιεχόμενα του. Ότι καταστροφή και να γίνει μπορείτε να ανακτήσετε τα περιεχόμενα του αρχείου αυτού. Το αρχείο αυτό θα παραμείνει αναγνώσιμο ακόμα και αν διαβάζεται σε σύστημα που δεν υπάρχουν τα απαραίτητα εργαλεία.
  Αντίθετα τώρα, πολλά WYSIWYG, όπως το Word, το WordPerfect, κ.λπ. κρατάνε το format τους κλειστό και ουσιαστικά σας δένουν με την εταιρεία τους. Το έγγραφο δεν ανήκει πια σε εσάς αλλά στην εταιρεία, δεν μπορείτε να το δώσετε σε άλλον που δεν έχει, ας πούμε Word, ούτε μπορείτε να μην έχετε Word στο σπίτι σας. Γενικά δεν έχετε καμιά επιλογή εκτός από αυτές που σαν δίνει η εταιρεία του, τις οποίες φυσικά θα απαιτεί και να τις πληρώσετε.
  Σκεφτήτε τι θα γινόταν αν αντί για HTML στο Web χρησιμοποιούσαν τα .doc του Word!!!
• Δυνατότητα επεξεργασίας. Ένα απλό text αρχείο μπορούμε να το επεξεργαστούμε με διάφορα scripts, ή να φτιάξουμε δικά μας scirpts πράγμα που έχω κάνει αρκετές φορές και ήδη αυτό γίνετε και στο site μας για να εμφανίζει τα HTML του Πέτρου με το στυλ του site, και μέσα στις σελίδες (με το μενού, κ.λπ.) του site.
• Μετατροπείς. Επειδή ακριβώς η μορφή του είναι αναγκαστικά ανοικτή, κυκλοφορούν από διάφορους πολλοί μετατροπείς σε άλλες μορφές. Έτσι το LaTex για παράδειγμα βγάζει output σε πολλές μορφές όπως HTML, pdf, rtf, eps, κ.α. έτσι αν θέλουμε να έχουμε το έγγραφό μας σε πολλές μορφές η λύση είναι μονόδρομος
• Αλλαγή στύλ, σε ένα ή περισσότερα αρχεία, είναι πανεύκολη. Αυτό το χαρακτηριστικό το απέκτησε και το HTML με τα λεγόμενα Cascade styles (CSS).
• Ένα έγγραφο βασισμένο σ' αυτή την τεχνολογία, μπορεί κάλλιστα να προσαρμοστεί χωρίς αλλαγές στις προτιμήσεις του χρήστη. Το ίδιο συμβαίνει και με το HTML αλλά σε μικρότερο βαθμό κυρίως λόγο των προβλημάτων των browsers. Είναι τα μόνα που μπορούν να εμφανιστούν με δυναμικό τρόπο, έτσι ένα έγγραφο φτιαγμένο για A4 μπορεί να τυπωθεί και σε A0 με όμορφο τρόπο ή να μεγεθυνθεί σε υπερβολικό βαθμό για κάποιον με προβλήματα όρασης. Δεν ομιλώ για 'zoom' αλλά για πραγματική αλλαγή μεγέθους.
• Πληκτρολογούνται σε απλούς text editors και αυτό μειώνει στο ελάχιστο το κόστος και την περίπτωση κρασαρίσματος του προγράμματος :)

Πρόσθετο Ζ: Τα προβλήματα των browsers

Εκτός του ότι κανένας browser δεν λειτουργεί σωστά, με το ζόρι ακολουθούν το πρότυπο, ΔΕΝ είναι και ρυθμισμένοι σωστά απο μόνοι τους.

Η συστολή του μήκους

Άν υπάρξει ποτέ Λ.Σ. που να δείχνει σωστά τις γραμματοσειρές, θα το καταλάβετε διότι όταν αλλάξετε ανάλυση τα fonts θα παραμείνουν στο ίδιο μέγεθος. Τα points, βλέπετε, ως μονάδα μέτρησης είναι με βάση την ίντσα και δεν είναι θεωρητικά δυνατό να μικραίνει η ίντσα όταν μεγαλώνει η ανάλυση της οθόνης!

Το περιθώριο διαφοράς μεταξύ των OS/Browsers και εκδόσεις αυτών φτάνει το 1.5

Ειλικρινά είναι τεράστιο λάθος να ορίζουμε εμείς που γράφουμε σελίδες το μέγεθος των γραμματοσειρών σε απόλυτες τιμές. Ο χρήστης έχει άποψη για το πως θέλει να τα βλέπει και εμάς δεν μας πέφτει λόγος σ' αυτό. Μπορούμε φυσικά να παίζουμε με το μέγεθος για τα στυλ μας, αλλά αυτό πρέπει να γίνετε με σχετικές μονάδες όπως το em, το ex, και το ποσοστό. Δυστυχώς όμως, οι εξ' ορισμού τιμές και η ανικανότητα που έχουν οι browsers, τα Λ.Σ. και το πρότυπου (δεν είναι αυστηρό όσο θα έπρεπε) να μας δώσουν την ικανότητα να ορίσουμε πάνω-κάτω τι μέγεθος θέλουμε, ή να έρχονται με ένα σταθερό μέγεθος όλοι, ή έστω να δουλεύανε τα points!
Μας αναγκάζει λοιπόν να χρησιμοποιούμε απόλυτες τιμές και μάλιστα σε pixels (μιας και είναι η πιο σταθερή μέτρηση!) πράγμα που από μόνο του δημιουργεί προβλήματα. Το εξ' ορισμού μέγεθος των γραμματοσειρών του IE (το "μεσαίο"), που αυτό μας ενδιαφέρει ως Έλληνες είναι πολύ μεγάλο για σελίδες... για εκτύπωση είναι καλό αν και πάλι μεγάλο το βρίσκω. Αυτό σε σχέση με τους headers και οποιαδήποτε άλλη μορφοποίηση καταλαβαίνετε τι συμβαίνει... Αντίθετα το "μικρό" μέγεθος του IE είναι αρκετά βολικό αλλά δεν είναι το default.

Κάλιο αργά παρά ποτέ!
MSDN: [new] As of Internet Explorer 6, when you use the !DOCTYPE declaration to specify standards-compliant mode, the default value for this property is small, not medium.

Υπάρχει όμως ένα bug στους IE5..IE6 το οποίο θα μας βοηθήσει! Βάλτε το παρακάτω στο τέλος του CSS και θα λύσετε μερικώς το προβλήματα των IE, διότι αυτή η δήλωση αγνοείται από τους λοιπούς browsers.

/* IE 5-6 font-size bug-fix */
* HTML		{ font-size: 11px; font-family: verdana; }
* HTML li	{ font-size: 11px; font-family: verdana; }
* HTML td	{ font-size: 11px; font-family: verdana; }
* HTML th	{ font-size: 11px; font-family: verdana; }
* HTML caption { font-size: 11px; font-family: verdana; }
* HTML body { font-size: 11px; font-family: verdana; }

Font-family bugs

Εκτός αυτής της διαφοράς που κάνει άλλες σελίδες να εμφανίζονται με ενοχλητικά μεγάλα και άλλες με ενοχλητικά μικρά γράμματα. Οι browsers έχουν πρόβλημα να αντιληφθούν τις σωστές γραμματοσειρές σύμφωνα με το πρότυπο. Έτσι πολλές φορές η σελίδα ζητά sans-serif και ο browser τα παρουσιάζει με serif (π.χ. Times (serif) αντί για verdana (sans-serif)).

Περισσότερα για Fonts καί Font styles

Οχι, δεν τελειώσαμε, οι browsers, δεν υποστηρίζουν και πολλά που περιέχονται στο πρότυπο, και ιδιαίτερα ότι αφορά τα fonts. Ορίσετε ή όχι το panose number, ή condensed ο browser θα το αγνοήσει επιδεικτικά. Αν έχετε παρατηρήσει, ειδικά στα Ελληνικά sites, όλα λειτουργούν με απόλυτο μέγεθος γραμματοσειρών και ελάχιστα fonts χρησιμοποιούνται.... μετρημένα στα δάχτυλα Verdana, Arial, Tahoma, Courier, και πιο σπάνια Trebuchet (διότι άργησε η MS να το δώσει (IE5.5+), με τα Ελληνικά σύμβολα) και ακόμα πιο σπάνια Times New Roman.

Το κάθε ένα από αυτά έχει το δικό του πρόβλημα. π.χ. τα Verdana με μέγεθος άνω των 10pt, είναι πολύ άσχημα, τα Tahoma το ίδιο, τα Times δεν βλέπονται σε μέγεθος κάτω των 16pt, δεν μπορούν ουσιαστικά να χρησιμοποιηθούν σαν bold καθώς επίσης έχουν δική τους άποψη για το πόσο μέγεθος έχει το 1pt. Τουλάχιστον αν είχαμε το anti-aliasing by default, θα είχαμε λύση για αυτά...

Συμβαίνουν και θαύματα! Αλλά δεν λειτουργούν!

Ούτε τώρα τελειώσαμε. Υποτίθεται ότι σύμφωνα με το πρότυπο μπορεί κάποιος να ενσωματώσει γραμματοσειρές στις σελίδες, όμως αυτό δεν λειτουργεί. Στον IE και στο NS που υπάρχει μια τέτοια δυνατότητα, κανένας τους δεν υποστηρίζει απλά truetypes, αλλά απαιτούν να μετατραπούν τα fonts σε μια δική τους μορφή η οποία εκτός από ασύμβατη έχει και πολλά ΑΠΑΡΑΔΕΚΤΑ προβλήματα, τουλάχιστον του IE που το δοκίμασα.

Μαζέψτε ότι μπορείτε...

Λοιπόν σύμφωνα με το πρότυπο, μη σας ταλαιπωρώ με τις περιγραφές, θα αναφέρω τα font families που πρέπει να δηλώνουμε

serif

Times New Roman, Century Schoolbook, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit, Athena

sans-serif

MS Trebuchet, ITC Avant Garde Gothic, Microsoft Sans-Serif, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica

cursive (κοντά στο handwriting style)

Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery

fantasy (ασαφές, όπως και το όνομα της κατηγορίας)

Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz

monospace (fixed fonts)

Courier, MS Courier New, Andale Mono, Lucida Console, Prestige, Everson Mono

Δεν αναφέρω τα default μεγέθη διότι με το σχετικό point δεν έχει νόημα. Αλλά το έγγραφο που αυτή την στιγμή διαβάζεται χρησιμοποιεί τα default μεγέθη και fonts. Οπότε αν ρυθμίσετε τον browser σ' αυτό το έγγραφο, τότε το έχετε ρυθμίσει σωστά.

Αν είστε έτοιμοι να μάθετε περισσότερα, διαβάστε τα παρακάτω άρθρα του Dave Raggett Advanced HTML και adding a touch of style τα οποία βρήκα ως ιδανικά για αρχάριους

Το πλήρες εγχειρίδιο για το HTML 4, μπορείτε να το βρείτε στο site του W3C, HTML 4.0. Πρόκειται για το πλήρες τεχνικό έγγραφο (είναι το ίδιο το πρότυπο) το οποίο δεν προτείνεται ούτε σε αρχάριους ούτε σε αυτούς που τα θέλουν γραμμένα απλά.

Βιβλία

Στον Παπασωτηρίου και Κλειδάριθμο θα βρείτε πολλά βιβλία και πολλά μεταφρασμένα στα Ελληνικά. Αλλά θα πρότεινα το "The Advanced HTML Companion", Keith Schengili - Roberts, published 1997 by AP Professinal (Academic Press, Inc.)

Ενδιαφέροντα άρθρα

Article: The Difference Between Web Design and GUI Design

Jakob Nielsen's Alertbox for May 1, 1997

Article: Effective Use of Style Sheets

Jakob Nielsen's Alertbox for July 1, 1997

Ενδιαφέροντα Sites

News Group for Stylesheets

Δημόσιες συζητήσεις για τα CSS

WebStandards.ORG

Προσπάθεια για λειτουργούν τα standards HTML, XML, XHTML

CSS Zen Garden

Συλλογή από πετυχημένα CSSs

Εργαλεία

Το πιο σημαντικό είναι ο browser. Τι και αν υπάρχει πρότυπο - το οποίο σε αρκετά σημεία δεν είναι και τόσο ξεκάθαρο - οι browsers που κυκλοφορούν είναι σε μαύρα χάλια. Ως καλύτερο browser, δηλαδή πιο συμβατό, θα έλεγε τον mozila (NS7) όμως θα έλεγα ότι είμαι σχετικά ικανοποιημένος με τον Opera 7, ενώ το W3C προτείνει τον Amaya πράγμα που δεν θα τον πρότεινα για πολλούς λόγους.
Επειδή στην Ελλάδα συμβαίνουν απίθανα πράγματα, κρατήστε κάπου και τον internet explorer, διότι πολλά sites είναι φτιαγμένα αποκλειστικά γι' αυτόν. Άλλες φορές επίτηδες γιατί αυτοί που το έφτιαξαν είναι ανίδεοι, άλλες όχι γιατί ως άσχετοι, δημιούργησαν τις σελίδες τους μέσο του MS FrontPage. Κλασσικό παράδειγμα είναι το κατά τα άλλα υπέροχο αλλά και αγαπημένο μου site, www.physics4u.gr, το οποίο είναι φτιαγμένο με το MS FrontPage 4, και φυσικά λειτουργεί μόνο με IE5+. Πιο συγκεκριμένα, με mozilla 1.2 (netscape 7) εμφανίζεται με προβλήματα, ενώ με opera δεν εμφανίζεται τίποτα!
Αυτές οι ασυμβατότητες δεν είναι καθόλου τυχαίες, γιατί ειδικά κατά την περίοδο που ονομάζουμε "πόλεμος των browsers" (IE3/NS3 μέχρι IE5.5/NS4.7 που υποτίθεται ότι τελείωσε αυτό το χάλι), οι δύο εταιρείες αυθαίρετα "πήραν" στα χέρια τους το πρότυπο, και δημιούργησαν απαράδεκτα επίτηδες πολλές ασυμβατότητες και πολλά άλλα...

UEdit32. Text Editor. Πολύ καλός κειμενογράφος, απλού κειμένου (.txt), για Windows.

DreamWeaver. IDE για HTML. Θεωρείτε από τα καλύτερα προγράμματα δημιουργίας HTML.

MS FrontPage Express. IDE για HTML. Παρ' ότι το μεγάλο πακέτο της M$ δημιουργεί προβλήματα, η μίνι έκδοση express δεν έχω ακούσει να έχει προβλήματα, εκτός βέβαια ότι κρασάρει... Αυτό έρχεται με τον internet explorer, ο οποίος εδώ και χρόνια συνοδεύει τα windows οπότε κάπου θα υπάρχει στον δίσκο σας και μπορείτε να το δοκιμάσετε.

Που θα βρήτε browsers

Mozilla

Open-source πια η πρώην μηχανή του netscape πλήρως ανανεωμένη, είναι η κορυφή με διαφορά αυτή την στιγμή

NetScape

Ο πρώην κυρίαρχος, σήμερα αποτελεί ένα αντίγραφο του mozilla (η ίδια μηχανή ακριβώς)

Opera

Πολύ κοντά στο Mozilla βρίσκεται το Opera. Το Opera είναι ο πιο ελαφρύς (~2MB) graphics browser!

Browser Archive

Όλοι οι browsers και παλιότερες εκδόσεις αυτών

Browser

Ή αλλιώς 'web browser' ή 'HTML user agent', είναι το πρόγραμμα που αναλαμβάνει να επεξεργαστεί και να εμφανίσει HTML έγγραφα.

tag

tag

attribute

attribute

WYSIWYG

Ακρωνύμιο του 'What You See Is What You Get'. Δηλαδή τα προγράμματα που (α) κρατάνε σταθερό το αποτέλεσμα τους είτε αυτό μεταφερθεί σε άλλο PC είτε σε εκτυπωτή, και (b) αυτό που βλέπεις όταν τα δουλεύεις είναι και το τελικό αποτέλεσμα. Τέτοια προγράμματα υποτίθεται ότι είναι το Corel, το Word, το DeamWeaver, το FrontPage, κ.α.

Markup Language

A grammar (in this case, an XML grammar) that can be used to structure information. Once structured, the information can be processed in the context of the markup language. Such processing might include presentation to a user, extraction of key information, transformation into other forms, etc.

Hybrid Markup Language

A Markup Language that is made up of Modules from multiple Namespaces.

DTD

DTD is a grammar in which XML-based markup languages can be defined (there are others, but right now we are talking about DTDs). It is also a term commonly used to refer to the file in which a markup language definition can be found. In the context of XHTML Modules and Markup Languages, a DTD is actually a file that includes the XHTML-family modules that make up the markup language (along with some other helper files). In DTD parlance, this file can also be called a "DTD Driver" file.

W3C

WWW Consortium

Extensible Markup Language (XML) 1.0 (Second Edition)

W3C Recommendation, Tim Bray (NS), Jean Paoli, (MS), C. M. Sperberg-McQueen, Eve Maler Steven Pemberton et al., 26 January 2000

XHTML 1.0: The Extensible HyperText Markup Language, A Reformulation of HTML 4 in XML 1.0

W3C Recommendation, Steven Pemberton et al., 26 January 2000

HTML 4.01 Specification

24 December 1999, David Raggett, Arnaud Le Hors, Ian Jacobs

HTML 3.2 Reference Specification

14 January 1997, David Raggett

HyperText Markup Language Specification Version 3.0

D. Raggett, September 1995

HyperText Markup Language Specification Version 2.0

HTML 2.0 (RFC 1866) was developed by the IETF's HTML Working Group, which closed in 1996

Cascading Style Sheets, level 2 (CSS2) Specification

B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998

Cascading Style Sheets, level 1 (CSS1) Specification

B. Bos, H. W. Lie, 17 December 1996

The Advanced HTML Companion

Keith Schengili - Roberts, published 1997 by AP Professinal (Academic Press, Inc.) - ISBN 0-12-623540-6

Platinum Edition of Using HTML4, Java 1.1 and JavaScript 1.2 (second edition)

Eric Ladd, Jim O'Donnell, published 1998 by Que Corp. - ISBN 0-7897-1477-9

Getting started with HTML

Dave Raggett, revised 13th February 2002

Advanced HTML

Dave Raggett, 29th August 2000

Adding a touch of style

Dave Raggett, 8th April 2002

RFC2854: The text/HTML Media Type

D. Conolly, L. Masinter, June 2000

PNG (Portable Network Graphics) Specification

1 October 1996, Thomas Boutell, Tom Lane

ISO-639.2,1 Codes for the Representation of Names of Languages Part 2: Alpha-3 Code

Μέρος του βρήκα διότι το ISO θέλει να το πληρώνεις για να πάρεις τα standards!
Κωδικοί γλώσσας: Greek, Ancient (to 1453) ver2 μόνο:"grc", Greek, Modern (1453-) ver2: "gre/ell", ver1: "el".

PANOSE (1) Classification Metrics Guide

Hewlett-Packard Corporation, 1997

Panose-2, White Paper

Hewlett-Packard Document EWC-92-0015h, Michael S. De Laurentis