Σε αυτή την σελίδα περιγράφονται οι βασικές εντολές του HTML, ώστε να μπορέσετε να έχετε τον πλήρη έλεγχο της σελίδας σας. Στις μέρες μας οι website builders δεν καθιστούν απαραίτητη την γνώση HTML, αφού είναι εξοπλισμένοι με κουμπάκια και λειτουργίες, έτσι ώστε η εισαγωγή των περιεχομένων σε ένα website να γίνεται με μερικά απλά clicks.
Η γνώση λοιπόν του HTML δεν είναι απαραίτητη, καλό όμως είναι κατά την γνώμη μου να γνωρίζετε τις βασικές εντολές, αφού η γνώση αυτή θα σας δώσει πολύ μεγαλύτερη ευελιξία και ικανότητα να προσθέσετε στοιχεία στην σελίδα σας, χωρίς την βοήθεια κάποιου web designer.
Το HTML είναι μια πολύ απλή γλώσσα εμφάνισης, δεν πρέπει σε καμία περίπτωση να σας τρομάζει και αφού μάθετε την φιλοσοφία της και τις βασικές εντολές, σας προτείνω να επισκεφτείτε την W3Schools, που προσφέρει δωρεάν HTML tutorials για προχωρημένους.
Η δομή μίας σελίδας σε HTML
Ας δούμε πως είναι η βασική δομή μιας σελίδας σε κώδικα HTML.
<html>
<head>
<title>Ο τίτλος που εμφανίζεται στην σελίδα σας και στα αποτελέσματα των μηχανών αναζήτησης</title>
<meta name=”description” content=”Η περιγραφή της σελίδας, όπως θέλετε να εμφανίζεται στα αποτελέσματα των μηχανών αναζήτησης“>
<meta name=”keywords” content=“Εδώ εισάγονται 5 με 10 keywords σχετικές με το θέμα της σελίδας, χωρισμένες με κόμμα. “>
</head>
<body>
<p align=”left”>
Τα περιεχόμενα της σελίδας. Εδώ μπορείτε να εισάγετε κείμενο, φωτογραφίες, video και γενικότερα ότι επιθυμείτε να περιέχεται μέσα στην σελίδα.
</p>
</body>
</html>
Βασικές αρχές του HTML
Οι βασικές εντολές του HTML αποτελούνται από tags ή στα Ελληνικά ετικέτες. Οπότε έχουμε την opening tag, το κείμενο που επηρεάζει η tag και την closing tag. Ας δούμε ένα παράδειγμα.
Ας υποθέσουμε πως θέλουμε να τονίσουμε με bold την λέξη “free” στην ακόλουθη πρόταση.
Free HTML tutorial
Η opening tag για τα bold είναι η <b> και η closing </b>. Η forward slash (/) χρησιμοποιείται πάντα μέσα στην closing tag. Οπότε ο HTML κώδικας είναι κάπως έτσι:
<b>Free</b> HTML tutorial, οποίος μας δίνει το:
Free HTML tutorial
Αν θέλαμε να εμφανιστεί όλη η πρόταση με bold τότε η closing tag θα έμπαινε μετά την λέξη tutorial. Δηλαδή:
<b>Free HTML tutorial</b>, που μας δίνει το:
Free HTML tutorial
Δύσκολο; Δεν νομίζω… Ας δούμε τις υπόλοιπες βασικές εντολές και πως επηρεάζουν το κείμενο.
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=”Calibri”>. Ανάμεσα στα εισαγωγικά, γράφετε το όνομα της γραμματοσειράς που θέλετε να εμφανίζεται. Για closing tag χρησιμοποιείται η </font>.
Αλλαγή χρώματος γραμματοσειράς: <font color=”red”>. Για closing tag χρησιμοποιείται πάλι η </font>, όπως και για κάθε tag γραμματοσειράς.
Αλλαγή μεγέθους γραμματοσειράς:<font size=”5″>. Επιλέγουμε έναν αριθμό από το 1 μέχρι το 7.
Αν μέχρι στιγμής δεν καταλαβαίνετε και πολλά, καλύτερα να απευθυνθείτε στο Site Build It, που θα σας επιτρέψει να δημιουργήσετε ένα επαγγελματικό website, χωρίς να γνωρίζετε καθόλου από HTML.
Εισαγωγή Hyperlinks
Τα hyperlinks είναι links που μεταφέρουν τους επισκέπτες σε άλλη σελίδα ή σε κάποιο άλλο website.
Η βασική μορφή του HTML για ένα hyperlink είναι η εξής:
<a href=”http://www.website.com”>Anchor text</a>
Για παράδειγμα, αν το website που θέλουμε να καταλήγει το link είναι το www.freehtml.gr, με anchor text το “free html”, ο κώδικας θα είναι κάπως έτσι:
<a href=”http://www.freehtml.gr”>free html</a> και το link θα εμφανίζεται ως free html.
Το συγκεκριμένο link θα ανοίγει το website στο ίδιο παράθυρο. Αν θέλετε το link να ανοίγει σε ένα δεύτερο παράθυρο, ώστε οι επισκέπτες να μην φεύγουν από την ιστοσελίδα σας, θα πρέπει να προσθέσετε την παράμετρο “target”.
<a href=”http://www.freehtml.gr”target=”_blank”>free html</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″>.
Με την ίδια λογική μπορούμε να χρησιμοποιήσουμε οποιαδήποτε απόχρωση επιθυμούμε, αρκεί να γνωρίζουμε την hex value της απόχρωσης. Ο πίνακας που ακολουθεί σας δίνει την hex value για κάθε απόχρωση, καθώς και αποχρώσεις που ταιριάζουν με την αρχική απόχρωση που επιλέξατε.
Από την στιγμή που ένα website χρησιμοποιεί 3 – 4 βασικά χρώματα, ο παραπάνω πίνακας σας δίνει μια πολύ καλή ένδειξη για τα χρώματα που πρέπει να χρησιμοποιήσετε.
Εισαγωγή φωτογραφιών
Πρώτα από όλα θα πρέπει να ανεβάσετε μία φωτογραφία στον server σας χρησιμοποιώντας ένα FTP πρόγραμμα. Αν δεν γνωρίζετε πώς να ανεβάσετε αρχεία χρησιμοποιώντας FTP, ρίξτε μια ματιά στην σελίδα FTP πως ανεβάσετε αρχεία όπου θα βρείτε ένα video tutorial.
Μεγάλο ρόλο στον 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 | Γ |
| Δ | Ε | Ζ |
Η κατηγορία με τους πίνακες ολοκληρώνει το free html tutorial αυτής της σελίδας και θα ήθελα να σας θυμίσω πως στις μέρες μας υπάρχουν πολύ δυνατοί website builders, που σας επιτρέπουν την δημιουργία website χωρίς την γνώση HTML, όπως το Site Build It.