HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και έπειτα προσθέτονται ειδικά σύμβολα γύρω από τις λέξεις ή από ολόκληρες προτάσεις ώστε να καθοριστεί η εμφάνιση τους στην οθόνη. Τα ειδικά σύμβολα στην HTML λέγονται ετικέτες (tags). Η HTML διαθέτει ένα πεπερασμένο αριθμό ετικετών που μπορούμε να χρησιμοποιήσουμε. Ωστόσο ο αριθμός αυτός δεν παραμένει σταθερός. Κατά διαστήματα το W3 Consortium, το οποίο ανάπτυξε και διαχειρίζεται τα πρότυπα της HTML, δημοσιεύει νέα πρότυπα στα οποία προσθέτει καινούργιες ετικέτες που καλύπτουν ή διορθώνουν μια λειτουργία στο προηγούμενο πρότυπο. Η τελευταία αναθεώρηση του HTML προτύπου είναι η HTML5
Η δομή μίας σελίδας σε HTML
Ας δούμε πως είναι η βασική δομή μιας σελίδας σε κώδικα HTML.
<html>
<head>
<title>Ο τίτλος που εμφανίζεται στην σελίδα σας και στα αποτελέσματα των μηχανών αναζήτησης</title>
<meta name=?description? content=?Η περιγραφή της σελίδας, όπως θέλετε να εμφανίζεται στα αποτελέσματα των μηχανών αναζήτησης?>
<meta name=?keywords? content=?Εδώ εισάγονται 5 με 10 keywords σχετικές με το θέμα της σελίδας, χωρισμένες με κόμμα. ?>
</head>
<body>
Τα περιεχόμενα της σελίδας. Εδώ μπορείτε να εισάγετε κείμενο, φωτογραφίες, video και γενικότερα ότι επιθυμείτε να περιέχεται μέσα στην σελίδα.
</body>
</html>
Βασικές αρχές του HTML
Οι βασικές εντολές του HTML αποτελούνται από tags ή στα Ελληνικά ετικέτες. Οπότε έχουμε την opening tag, το κείμενο που επηρεάζει η tag και την closing tag. Ας δούμε ένα παράδειγμα.
Ας υποθέσουμε πως θέλουμε να τονίσουμε με bold την λέξη ?πρώτη? στην ακόλουθη πρόταση.
Η πρώτη μου ιστοσελίδα
Η openingtagγια τα boldείναι η <b> και η closing</b>. Η forward slash (/) χρησιμοποιείται πάντα μέσα στην closing tag. Οπότε ο HTML κώδικας είναι κάπως έτσι:
Η<b>πρώτη</b>μου ιστοδελίδα, οποίος μας δίνει το:
Η πρώτη μου ιστοσελίδα
Αν θέλαμε να εμφανιστεί όλη η πρόταση με bold τότε η closing tag θα έμπαινε μετά την λέξη tutorial. Δηλαδή:
<b>Η πρώτη μου ιστοσελίδα</b>, που μας δίνει το:
Η πρώτη μου ιστοσελίδα
Δύσκολο; Δεν νομίζω? Ας δούμε τις υπόλοιπες βασικές εντολές και πως επηρεάζουν το κείμενο.
Underline: Υπογραμμίζει το κείμενο ανάμεσα στις tags. Η opening tag είναι η <u> και η closing η </u>
Italics:Εμφανίζει με πλάγια γραφή το κείμενο. Opening tag <i>, closing tag </i>.
Νέα παράγραφος: Η tag <p> ξεκινάει μια νέα παράγραφο και αφήνει μία κενή γραμμή ανάμεσα στις παραγράφους. H closing tag </p>, δεν είναι απαραίτητη.
Line Break: Η tag <br>Αλλάζει γραμμή στο κείμενο. Δύο <br> tags ισοδυναμούν με μία <p>. Closing tag δεν υπάρχει.
Στοίχιση κειμένου αριστερά: <p align=?left?> και για closing tag χρησιμοποιείται η </p>.
Στοίχιση κειμένου δεξιά: <p align=?right?> και για closing tag χρησιμοποιείται η </p>.
Στοίχιση στο κέντρο:<center> για opening tag και </center> για closing tag.
Αλλαγή γραμματοσειράς: <font face=?Arial?>. Ανάμεσα στα εισαγωγικά, γράφετε το όνομα της γραμματοσειράς που θέλετε να εμφανίζεται. Για closing tag χρησιμοποιείται η </font>.
Αλλαγή χρώματος γραμματοσειράς: <font color=?red?>. Για closing tag χρησιμοποιείται πάλι η </font>, όπως και για κάθε tag γραμματοσειράς.
Αλλαγή μεγέθους γραμματοσειράς:<font size=?5?>. Επιλέγουμε έναν αριθμό από το 1 μέχρι το 7.
Εισαγωγή Hyperlinks
Τα hyperlinks είναι links που μεταφέρουν τους επισκέπτες σε άλλη σελίδα ή σε κάποιο άλλο website.
Η βασική μορφή του HTML για ένα hyperlink είναι η εξής:
<a href=?http://www.mysite.gr?>Anchor text</a>
Για παράδειγμα, αν το website που θέλουμε να καταλήγει το link είναι το www.mysite.gr, με anchor text το ?Toδικό μου site?, ο κώδικας θα είναι κάπως έτσι:
<a href=?http://www.mysite.gr?>Toδικό μου site</a> και το link θα εμφανίζεται ωςToδικό μου site.
Το συγκεκριμένο link θα ανοίγει το website στο ίδιο παράθυρο. Αν θέλετε το link να ανοίγει σε ένα δεύτερο παράθυρο, ώστε οι επισκέπτες να μην φεύγουν από την ιστοσελίδα σας, θα πρέπει να προσθέσετε την παράμετρο ?target?.
<a href=?http://www.mysite.gr?target=?_blank?>Τοδικόμου site</a>
Το προεπιλεγμένο χρώμα των links είναι το μπλε. Μπορείτε να αλλάξετε το χρώμα, αν στο μέσα στην <body> tag της σελίδας εισάγετε τον ακόλουθο κώδικα.
<body link=?red?>
Σε αυτό το παράδειγμα, όλα τα links της σελίδας θα εμφανίζονται με κόκκινο χρώμα. Αν τώρα θέλετε όλα τα links που έχουν ήδη κλικαριστεί, να εμφανίζονται με διαφορετικό χρώμα, ο κώδικας αλλάζει ως εξής:
<body link=?red? vlink=?green?>
Εδώ, όλα τα links εμφανίζονται με κόκκινο χρώμα και αυτά που έχουν κλικαριστεί από τον επισκέπτη με πράσινο.
Τέλος έχετε την επιλογή να αλλάζει το χρώμα του link, κάθε φορά που βρίσκεται πάνω του ο κέρσορας του mouse.
<body link=?red? vlink=?green? alink=?blue?>
Έτσι, κάθε φορά που περνάει ο κέρσορας πάνω από το link, το χρώμα του αλλάζει σε μπλε.
Χρησιμοποιώντας περισσότερα χρώματα
Στα παραπάνω παραδείγματα έχουν χρησιμοποιηθεί τα βασικά χρώματα. Μπορείτε να επιλέξετε οποιαδήποτε απόχρωση επιθυμείτε, αντικαθιστώντας το βασικό χρώμα με την απόχρωση που θέλετε να χρησιμοποιήσετε.
Για να το πετύχετε αυτό, πρέπει να αντικαταστήσετε το βασικό χρώμα, με την αντίστοιχη hex (hexadecimal) value της απόχρωσης. Σε όλα τα χρώματα, αντιστοιχεί κάποια hex value. Για παράδειγμα δείτε τις hex values των βασικών χρωμάτων.
Μαύρο = #000000
Κόκκινο = #FF0000
Κίτρινο = #FFFF00
Μπλε = #0000FF
Άσπρο = #FFFFFF
Πράσινο = #00FF00
Ας υποθέσουμε πως θέλουμε το χρώμα της γραμματοσειράς να είναι το κόκκινο. Ο HTML κώδικας που χρησιμοποιείται είναι ο: <font color=?red?>. Μπορούμε αντί για την λέξη red, να εισάγουμε την hex value του κόκκινου, οπότε ο κώδικας γίνεται: <font color=?#FF0000?>.
Εισαγωγή φωτογραφιών
Πρώτα από όλα θα πρέπει να ανεβάσετε μία φωτογραφία στον server σας χρησιμοποιώντας ένα FTP πρόγραμμα(π.χ.FileZilla). Μεγάλο ρόλο στον HTML κώδικα που θα δημιουργήσετε, παίζει ο φάκελος που θα ανεβάσετε την φωτογραφία στον server. Ας υποθέσουμε πως θέλετε να εμφανίζεται στην σελίδα σας, που έχει θέμα το HTML, μία φωτογραφία που ονομάζεται html.gif.
Ας υποθέσουμε πως ανεβάζετε την φωτογραφία στον φάκελο photos, ο οποίος βρίσκεται κάτω από το root directory του server σας. Ο HTML κώδικας θα δείχνει κάπως έτσι:
<img src=?photos/html.gif?>
Τώρα ας υποθέσουμε πως η φωτογραφία html.gif, βρίσκεται κάτω από τον φάκελο web_design, ο οποίος βρίσκεται μέσα στον φάκελο photos, κάτω από το root directory.
Σε αυτή την περίπτωση, ο κώδικας θα πρέπει να περιέχει όλη την διαδρομή η path της φωτογραφίας.
<img src=?photos/web_design/html.gif?>
Μία επιπλέον προαιρετική tag που προτείνω να χρησιμοποιείτε, είναι η Alt tag. Η συγκεκριμένη tag, επιτρέπει στους browsers να εμφανίσουν κάποιο εναλλακτικό γραπτό κείμενο, σε περίπτωση που υπάρχει πρόβλημα στην φόρτωση της φωτογραφίας.
Χρησιμοποιώντας το παραπάνω παράδειγμα, ο κώδικας με την προσθήκη της Alt tag θα δείχνει κάπως έτσι:
<img src=?photos/web_design/html.gif? alt=?Free HTML tutorials?> ή οτιδήποτε θέλετε να εμφανίζεται σαν γραπτό κείμενο. Επίσης, το κείμενο αυτό θα εμφανίζεται όταν ο κέρσορας του mouse περνάει πάνω από την φωτογραφία.
Προσθέτοντας Περιθώριο
Μπορείτε να προσθέσετε περιθώριο σε μια φωτογραφία, είτε για αισθητικούς λόγους, είτε για να απομακρύνετε μερικά pixels, το κείμενο που βρίσκεται κοντά στην φωτογραφία. Στον βασικό HTML κώδικα εισαγωγής φωτογραφίας, προσθέτετε το ?border? attribute.
<img src=?photos/web_design/html.gif? border=?3?>
Ο αριθμός 3 αντιστοιχεί στο μέγεθος του περιθωρίου. Ο αριθμός 0 σημαίνει πως δεν υπάρχει καθόλου περιθώριο. Για να αλλάξουμε το χρώμα του περιθωρίου προσθέτουμε το border color attribute.
<img src=?photos/web_design/html.gif? border=?3? bordercolor=?red? >
Ρυθμίζοντας το μέγεθος μιας φωτογραφίας
Το μέγεθος μιας φωτογραφίας ορίζεται σε pixels. Μπορείτε να ορίσετε μέσα από τον κώδικα πόσα pixels θέλετε να είναι το ύψος και πόσο το πλάτος μιας φωτογραφίας.
<img src=?photos/web_design/html.gif? border=?3? height=?250? width=?350? alt=?Free HTML Tutorials?>
Ο παραπάνω κώδικας θα εμφανίσει την html.gif με ύψος 250 pixels, πλάτος 300, περιθώριο 3 και alt text το ?Free HTML Tutorials?. Η σειρά που βρίσκονται τα χαρακτηριστικά δεν παίζει κανένα ρόλο.
Αν πριν από τον παραπάνω κώδικα προσθέσουμε το εξής,
<a href=?http://www.thedomain.gr?>
Τότε έχουμε προσθέσει ένα hyperlink. Όποιος κάνει click στην φωτογραφία, κατευθύνεται στο website που αναφέρει το link. Ολοκληρωμένος ο κώδικας εμφανίζεται έτσι:
<a href=?http://www.thedomain.gr?><img src=?photos/web_design/html.gif? border=?3? height=?250? width=?350? alt=?Free HTML Tutorials?>
Δημιουργώντας πίνακες
Η δημιουργία πίνακα με HTML είναι ελαφρώς πολύπλοκη υπόθεση, όμως καλό είναι να γνωρίζετε σε την διαδικασία, σε περίπτωση που ο table generator του editor, δεν σας δίνει το αποτέλεσμα που θέλετε.
Ας δούμε κατά αρχήν τις βασικές tags ενός πίνακα:
Η opening tag για ένα πίνακα είναι η <table> και η closing tag η </table>.
Η tag <tr> αντιπροσωπεύει μία σειρά, ενώ η <td> ένα κελί.
Οι closing tags είναι αντίστοιχα </tr> και </td>.
Ας δούμε πως θα δημιουργήσουμε έναν πίνακα με μία σειρά και 3 στήλες.
<table>
<tr> <td>A</td> <td>B</td> <td>Γ</td> </tr>
</table>
Ο συγκεκριμένος κώδικας εμφανίζει το εξής πίνακα:
|
A |
B |
Γ |
Αντίστοιχα, μπορούμε να προσθέσουμε όσες στήλες και σειρές επιθυμούμε. Ας δούμε έναν 3χ3 πίνακα:
<table>
<tr> <td>A</td> <td>B</td> <td>Γ</td> </tr>
<tr> <td>Δ</td> <td>Ε</td> <td>Ζ</td> </tr>
</table>
Ο οποίος εμφανίζεται έτσι:
|
A |
B |
Γ |
|
Δ |
Ε |
Ζ |
Μπορείτε μέσα στην opening tag <table>, να εισάγετε τα χαρακτηριστικά που επιθυμείτε να έχει ο πίνακας, όπως ύψος, πλάτος, περιθώριο, απόσταση μεταξύ των κελιών κλπ.
Για παράδειγμα, ο ακόλουθος πίνακας έχει ύψος 200 pixels, πλάτος 100 και περιθώριο 3.
<table height=?200? width=?100? border=?3?>
<tr> <td>A</td> <td>B</td> <td>Γ</td> </tr>
<tr> <td>Δ</td> <td>Ε</td> <td>Ζ</td> </tr>
</table>
Ο οποίος εμφανίζεται έτσι:
|
A |
B |
Γ |
|
Δ |
Ε |
Ζ |
Για να ρυθμίσετε τις αποστάσεις μεταξύ των κελιών χρησιμοποιούνται οι εντολές: cellspacing=?..? και cellpadding=?..? , μέσα στην opening <table> tag.
Τέλος, αν θέλετε έχουν τα κελιά του πίνακα διαφορετικό μέγεθος, εισάγουμε τα ανάλογα χαρακτηριστικά, μέσα στην <td> tag του κάθε κελιού.
<table height=?200? width=?100? border=?3?>
<tr> <td width=?100?>A</td> <td>B</td> <td>Γ</td> </tr>
<tr> <td width=?100?>Δ</td> <td>Ε</td> <td>Ζ</td> </tr>
</table>
Ο οποίος εμφανίζεται έτσι:
|
A |
B |
Γ |
|
Δ |
Ε |
Ζ |