HTML tags

1. ΕΙΣΑΓΩΓΙΚΕΣ ΕΝΝΟΙΕΣ ΤΟΥ INTERNET

Τι είναι το World Wide Web (WWW) ;

Το World Wide Web (ή σκέτο Web όπως συνηθίζουμε να το αποκαλούμε) είναι ένα μεγάλο δίκτυο από υπολογιστές σε όλο τον κόσμο, οι οποίοι μπορούν να επικοινωνούν μεταξύ τους για να μοιραστούν ηλεκτρονική πληροφορία. Οι υπολογιστές χρησιμοποιούν το πρωτόκολλο επικοινωνίας HTTP.

Τι είναι το πρωτόκολλο επικοινωνίας HTTP ;

Το πρωτόκολλο επικοινωνίας HTTP είναι η πιο δημοφιλής μορφή επικοινωνίας μεταξύ υπολογιστών στο Web. HTTP είναι το ακρώνυμο του Hyper Text Transfer Protocol που σημαίνει πρωτόκολλο μεταφοράς υπερκειμένου.

Τι είναι το υπερκείμενο (hypertext) ;

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

Πως δουλεύει το Web ;

Το Web είναι μια υπηρεσία του Internet στην οποία όπως είπαμε επικοινωνούν και ανταλλάσσουν πληροφορίες οι υπολογιστές μεταξύ τους. Οι πληροφορίες αυτές βρίσκονται σε έγγραφα που ονομάζονται ιστοσελίδες. Οι ιστοσελίδες είναι αρχεία που βρίσκονται σε υπολογιστές που ονομάζονται Web Servers (οι οποίοι συνήθως είναι 24 ώρες το 24ωρό συνδεμένοι με το Web ώστε να μπορούμε οποιαδήποτε στιγμή να συνδεθούμε και να ανακτήσουμε μια ιστοσελίδα που βρίσκεται σε αυτούς), ενώ οι υπολογιστές που συνδέονται στους Web Servers για να ανακτήσουν τις ιστοσελίδες λέγονται Web Clients.

Τι είναι ο web browser ;

Οι Web Clients χρησιμοποιούν ένα πρόγραμμα για να ανακτήσουν τα περιεχόμενα των ιστοσελίδων που βρίσκονται στους Web Servers. Αυτό το πρόγραμμα ονομάζεται Web browser (πρόγραμμα παρουσίασης ιστοσελίδων). Δύο είναι οι κύριες δουλειές του Web browser:

1) να μπορεί να προσπελάσει τις ιστοσελίδες μετά από μια αίτηση του χρήστη και
2) να εμφανίζει τα περιεχόμενα των ιστοσελίδων.

Οι ιστοσελίδες περιέχονται από οδηγίες για τον τρόπο που θα εμφανίσουν τα περιεχόμενα τους στον Web browser. Οι Web browsers διαβάζουν τις οδηγίες αυτές και εμφανίζουν τις σελίδες στην οθόνη μας. Οι οδηγίες αυτές είναι γραμμένες στην γλώσσα HTML και βρίσκονται μέσα σε HTML αρχεία.

Ορισμένοι από τους πιο δημοφιλής Web browsers είναι οι : Internet Explorer, Mozilla Firefox, Netscape Navigator, Opera.

2. ΧΡΩΜΑΤΑ

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

Υπάρχουν δύο τρόποι για να καθορίσουμε χρώματα:

1. Χρησιμοποιώντας ένα όνομα χρώματος από ένα σύνολο 16 προκαθορισμένων ονομάτων

2. Χρησιμοποιώντας το σύμβολο # ακολουθόμενο από έναν τριψήφιο δεκαεξαδικό αριθμό όπου κάθε ένα από τα τρία ψηφία είναι ένας διψήφιος δεκαεξαδικός αριθμός (π.χ. #CC99FF,). Ο κάθε ένας από τους τρεις διψήφιους δεκαεξαδικούς αριθμούς αντιπροσωπεύει την απόχρωση από τρία χρώματα: το Κόκκινο-Red, το Πράσινο-Green και το Μπλε-Blue και μπορεί να πάρει τιμές από 00 μέχρι FF. Το μοντέλο αυτό καθορισμού χρώματος λέγεται RGB (Red, Green, Blue).

Τον πρώτο τρόπο τον χρησιμοποιούμε κυρίως όταν θέλουμε ένα κύριο χρώμα και όχι μια απόχρωση. Υπάρχουν 16 κύρια χρώματα που μπορούμε να αναφερθούμε σε αυτά με τα όνομα τα τους :

aqua	black	blue	fuchsia
green	gray	lime	maroon
navy	olive	purple	red
silver	teal	white	yellow

Αν και τα ονόματα των χρωμάτων είναι εύκολα να τα θυμόμαστε, η χρήση τους δεν είναι τόσο ευέλικτη. Ακόμα και για έναν μέτρια απαιτητικό σχεδιαστή σελίδων τα 16 κύρια χρώματα είναι πολύ λίγα για να δώσει στο site του το στυλ που θέλει. Έτσι θα διαπιστώσετε και μόνοι σας ότι πολύ συχνά θα χρειάζεται να χρησιμοποιείτε αποχρώσεις των κύριων χρωμάτων κι' έτσι θα καταφεύγετε στο μοντέλο RGB που είναι πιο ευέλικτο. Τα περισσότερα προγράμματα επεξεργασίας HTML σελίδων, αλλά και όλα τα προγράμματα επεξεργασίας γραφικών, διαθέτουν έναν επιλογέα χρωμάτων με τον οποίο όταν επιλέγουμε το χρώμα (από μια παλέτα) που θέλουμε να χρησιμοποιήσουμε, εμφανίζει σε κάποιο σημείο την τιμή RGB την οποιά μπορούμε να χρησιμοποιήσουμε στην σελίδα μας.Στον παρακάτω πίνακα παρουσιάζονται μερικά χρώματα με το μοντέλο RGB

#000000

#000033

#000066

#000099

#0000CC

#0000FF

3. ΓΕΝΙΚΑ ΓΙΑ ΤΗΝ HTML

Η HTML είναι η γλώσσα με την οποία κατασκευάζουμε ιστοσελίδες. Τα αρχικά HTML σημαίνουν HyperText Markup Language. Οι ιστοσελίδες που επισκεπτόμαστε στο Internet δεν είναι τίποτε άλλο παρά αρχεία τα οποία περιέχουν κώδικα γραμμένο στην γλώσσα HTML. Τα αρχεία αυτά έχουν επέκταση .htm ή .html. Οι browsers (όπως οι Internet Explorer, Mozilla Firefox, Opera και αρκετοί άλλοι) διαβάζουν τα αρχεία αυτά και εμφανίζουν το αποτέλεσμα του κώδικα HTML στην οθόνη μας.

Για να πάρετε μια γεύση από HTML κώδικα δεν έχετε παρά να κάνετε δεξί κλικ με το ποντίκι σας επάνω σε οποιοδήποτε σημείο κάποιας σελίδας (όχι επάνω σε εικόνα ή σύνδεσμο) και να επιλέξετε από το μενού που θα εμφανιστεί την επιλογή View page source ή View source ή Προβολή προέλευσης (στην ελληνική έκδοση του Internet Explorer). Θα εμφανιστεί ένα παράθυρο στο οποίο θα δείτε τον HTML κώδικα που κρύβεται πίσω από την σελίδα.

Κώδικας HTML και Προγράμματα Επεξεργασίας Ιστοσελίδων

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

Για την δημιουργία αλλά και την εύκολη διαχείριση των ιστοσελίδων μας επιβάλλεται η χρήση ενός WYSIWYG (What You See Is What You Get) Προγράμματος Επεξεργασίας Ιστοσελίδων. Μερικά τέτοια προγράμματα είναι το Dreamweaver της Macromedia, το CoffeeCup HTML Editor της CoffeCup Softwares, το Effective Site Studio της Effective Studio και πολλά άλλα. Υπάρχουν πληθώρα τέτοιων προγραμμάτων στο Internet από όπου μπορείτε να κατεβάσετε την δοκιμαστική τους έκδοση (trial version) από τις ιστοσελίδες των εταιριών που τα κατασκευάζουν ώστε να καταλήξετε να αγοράσετε την ολοκληρωμένη έκδοση του πακέτου που ταιριάζει στις απαιτήσεις σας. Αρκετοί βέβαια είναι οι σχεδιαστές Ιστοσελίδων που χρησιμοποιούν περισσότερα από ένα πρόγραμμα αξιοποιώντας έτσι τα πλεονεκτήματα του καθενός από αυτά, αφού είναι φυσικό ορισμένα προγράμματα να υπερτερούν σε κάποιες λειτουργίες εκεί που άλλα υστερούν.

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

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

Ο Κώδικας HTML

HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και έπειτα προσθέτονται ειδικά σύμβολα γύρω από τις λέξεις ή από ολόκληρες προτάσεις ώστε να καθοριστεί η εμφάνιση τους στην οθόνη. Τα ειδικά σύμβολα στην HTML λέγονται ετικέτες (tags). Η HTML διαθέτει ένα πεπερασμένο αριθμό ετικετών που μπορούμε να χρησιμοποιήσουμε. Ωστόσο ο αριθμός αυτός δεν παραμένει σταθερός. Κατά διαστήματα το W3 Consortium, το οποίο ανάπτυξε και διαχειρίζεται τα πρότυπα της HTML, δημοσιεύει νέα πρότυπα στα οποία προσθέτει καινούργιες ετικέτες που καλύπτουν ή διορθώνουν μια λειτουργία στο προηγούμενο πρότυπο. Η τελευταία αναθεώρηση του HTML προτύπου είναι η 4.01

Τι είναι οι ετικέτες;

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

Πώς είναι μια ετικέτα ;

Οι HTML ετικέτες γράφονται ανάμεσα στα σύμβολα < και >

< όνομα-ετικέτας >

Οι περισσότερες HTML ετικέτες αποτελούνται από μια ετικέτα αρχής και μια ετικέτα τέλους και ανάμεσα σε αυτές υπάρχει το κείμενο που χαρακτηρίζετε από τις ετικέτες αυτές. Η ετικέτα τέλους περιέχει τον χαρακτήρα / πριν το όνομα της ετικέτας.

< όνομα-ετικέτας > ... κείμενο ... < / όνομα-ετικέτας >

πχ. <em>Κείμενο με έμφαση</em>

Υπάρχουν ορισμένες ετικέτες που δεν έχουν ετικέτες τέλους. Στις ετικέτες αυτές, πριν από το σύμβολο > τοποθετούμε τον χαρακτήρα /

< όνομα-ετικέτας / >

πχ. <br />

Το αρχείο που περιέχει HTML ετικέτες λέγεται HTML αρχείο και έχει επέκταση .html ή .htm . Τα αρχεία αυτά είναι απλά αρχεία κειμένου σε μορφή ASCII και δεν περιέχουν πληροφορίες για το περιβάλλον ή τα προγράμματα με τα οποία θα λειτουργήσουν. Μπορείτε να ανοίξετε και να δείτε τα αρχεία htm ή html με οποιονδήποτε επεξεργαστή κειμένου, π.χ. Σημειωματάριο (Notepad) των Windows

Πώς λειτουργεί μια ετικέτα μέσα σε ένα HTML αρχείο ;

Ένα ζευγάρι ετικετών καθορίζει την μορφή ενός κειμένου ή μιας και μόνο λέξης. Για παράδειγμα αν ήθελα να γράψω στην γλώσσα HTML το κείμενο 'Μαθαίνω HTML' με έντονη γραφή, θα το έγραφα έτσι:

<b>Μαθαίνω HTML</b>.

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

Αν πάλι ήθελα να γράψω την λέξη wlearn με πλάγιους χαρακτήρες θα έγραφα:

<i>wlearn</i>

Το ζευγάρι των ετικετών <i> και </i>, λέει στον browser να εμφανίσει το κείμενο που είναι γραμμένο ανάμεσα σε αυτές τις ετικέτες, με πλάγιους χαρακτήρες. Το γράμμα i είναι το πρώτο γράμμα από την λέξη italics

.

Οι ετικέτες μέσα σε ένα HTML αρχείο μπορούν να είναι γραμμένες είτε με μικρά γράμματα (πεζά), είτε με κεφαλαία. Η ετικέτα <b> είναι ίδια με τη ετικέτα <B>. Μόνο πρέπει να προσέχουμε τις ετικέτες τέλους να είναι γραμμένες όπως η ετικέτες αρχής. Δηλαδή αν μια ετικέτα αρχής είναι γραμμένη με πεζά τότε και η ετικέτα τέλους πρέπει να γραφεί με πεζά. Λάθος τρόπος:

<B>wlearn</b>
Σωστός τρόπος:

<B>wlearn</B> ή
<b>wlearn</b>

Η δομή της HTML

Ένα αρχείο HTML αρχίζει πάντα με την ετικέτα <HTML> και αποτελείται από δύο ενότητες: την κεφαλή (HEAD) και το κυρίως περιεχόμενο (BODY) ή αλλιώς το "σώμα" της σελίδας όπως συνήθως το αποκαλούμε

Η ετικέτα <HTML>

Με την ετικέτα <HTML> αρχίζουμε πάντα τον κώδικα μας και με την ετικέτα </HTML> τον τερματίζουμε. Με αυτόν τον τρόπο πληροφορούμε τον browser ότι οι γραμμές που περικλείονται μέσα σε αυτές τις δύο ετικέτες είναι κώδικας γραμμένος σε γλώσσα HTML.

Η Ενότητα HEAD

Η πρώτη ενότητα (ενότητα HEAD) μιας HTML σελίδας ορίζεται με τις ετικέτες <head>...</head>

Οι ετικέτες που γράφονται στην ενότητα HEAD, αποτελούν τον πρόλογο για την HTML σελίδα. Υπάρχουν μόνο λίγες ετικέτες που γράφονται στην ενότητα αυτή. Η πιο βασική από αυτές είναι η ετικέτα <TITLE>, η οποία καθορίζει τον τίτλο της σελίδας ο οποίος εμφανίζεται στο πάνω μέρος του παραθύρου του web browser.

<title>WLearn</title>

Μια άλλη ετικέτα της ενότητας HEAD είναι η ετικέτα META. Μια από τις λειτουργίες της ετικέτας αυτής είναι να ορίζει το σετ των χαρακτήρων που θα χρησιμοποιήσουμε στην σελίδα, δηλαδή εμείς που θέλουμε να χρησιμοποιήσουμε ελληνικά θα προσθέτουμε στην κεφαλή (<head>) των σελίδων μας την παρακάτω γραμμή:

<META content="text/html; charset=iso-8859-7">

η οποία πληροφορεί τον browser ότι το περιεχόμενο της σελίδας είναι κώδικας HTML (content="text/html) και ότι το σετ των χαρακτήρων που χρησιμοποιούμε στην σελίδα είναι το iso-8859-7 (charset=iso-8859-7), το οποίο αντιστοιχεί στο ελληνικό σετ χαρακτήρων.

Οι HTML ετικέτες που μπαίνουν στην ενότητα HEAD είναι οι παρακάτω:<!--, <!DOCTYPE>, <LINK>, <META>, <SCRIPT>, <STYLE>, <TITLE>

Ότι γράφουμε μέσα στην ενότητα HEAD δεν εμφανίζεται στην οθόνη του browser

Η Ενότητα BODY

Η δεύτερη ενότητα (ενότητα body) ορίζεται με τις ετικέτες <body>...</body>

Το ζευγάρι των ετικετών <body> και </body> ορίζει το κυρίως περιεχόμενο της σελίδας μέσα στο οποίο γράφουμε το κείμενο που θέλουμε να εμφανιστεί μαζί με τις HTML ετικέτες που το μορφοποιούν. Στην ενότητα αυτή τοποθετούμε επίσης εικόνες, video και ότι άλλο θέλουμε να εμφανιστεί στην σελίδα.

Μπορείτε να δείτε την Λίστα ετικετών, όπου περιγράφονται αναλυτικά όλες οι ετικέτες της HTML

Το πρώτο μου HTML αρχείο

<html>

<head>

<title>My first web site</title>

</head>

<body>

This is <b>Great</b>!!! <b>YEAH!!!</b><br />

I can build my own <i>web site</i>. <b>YEAH!!!</b><br />

<i>Hey Ma look!!!</i> I can do it by <b>myself</b>

</body>

</html>

Η ετικέτα <br /> αλλάζει γραμμή και τοποθετεί το κείμενο που είναι γραμμένο μετά την ετικέτα στην αρχή της επόμενης γραμμής

Ο τρόπος που διαβάζουν οι browsers ένα HTML αρχείο

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

4. ΒΑΣΙΚΕΣ ΕΤΙΚΕΤΕΣ

Οι πiιο βασικές HTML ετικέτες καθορίζουν επικεφαλίδες, παραγράφους και γραμμές

Επικεφαλίδες

Οι HTML επικεφαλίδες είναι κείμενο που εμφανίζετε με μεγάλα και έντονα γράμματα. Οι επικεφαλίδες ορίζονται από τις ετικέτες <h1>, <h2>, <h3>, <h4>, <h5> και <h6>. Με την <h1> ορίζουμε την μεγαλύτερη ετικέτα ενώ με την <h6> την μικρότερη.

<h1>Αυτή είναι μια επικεφαλίδα</h1>

<h2>Αυτή είναι μια επικεφαλίδα</h2>

<h3>Αυτή είναι μια επικεφαλίδα</h3>

<h4>Αυτή είναι μια επικεφαλίδα</h4>

<h5>Αυτή είναι μια επικεφαλίδα</h5>

<h6>Αυτή είναι μια επικεφαλίδα</h6>

Πριν και μετά την επικεφαλίδα εισάγεται αυτόματα στον browser μια κενή γραμμή

Παράγραφοι

Οι παράγραφοι ορίζονται από το ζευγάρι ετικετών <p> και </p>

<p>Αυτή είναι μια παράγραφος</p>
<p>Αυτή είναι μια άλλη παράγραφος</p>
<p>Αυτή είναι μια τρίτη παράγραφος</p>

Πριν και μετά την παράγραφο εισάγεται αυτόματα στον browser μια κενή γραμμή

Αλλαγή γραμμής

Η ετικέτα <br /> χρησιμοποιείται όταν θέλουμε να τελειώσουμε μια γραμμή κειμένου και να αρχίσουμε μια καινούργια

Αυτή είναι μια γραμμή<br />
Αυτή είναι μια άλλη γραμμή<br />
Αυτή είναι μια τρίτη γραμμή

Οριζόντια γραμμή

Η οριζόντια γραμμή είναι ένα απλό γραφικό που μπορούμε να χρησιμοποιήσουμε στην σελίδα μας (κυρίως σαν διαχωριστικό). Με την ετικέτα <hr> τοποθετούμε μια οριζόντια γραμμή στην σελίδα μας.Αυτή είναι μια οριζόντια γραμμή
<hr>

Σχόλια στην HTML

Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα. Δεν εμφανίζονται στην οθόνη του browser. Ένας λόγος για να χρησιμοποιήσουμε σχόλια μέσα σε ένα html αρχείο είναι να γράψουμε την ημερομηνία που δημιουργήσαμε το αρχείο. Ένα σχόλιο αρχίζει με το <!-- και τελειώνει με το -->

<!-- Αυτό είναι ένα σχόλιο και δεν θα εμφανιστεί στην οθόνη του browser -->

Τι ονομάζουμε Στοιχείο της Σελίδας ;

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

5. ΙΔΙΟΤΗΤΕΣ ΕΤΙΚΕΤΩΝ

Οι ιδιότητες (attributes) των ετικετών είναι τιμές που δίνουν στην ετικέτα διάφορα χαρακτηριστικά. Κάθε μια από αυτές τις τιμές επιδρά διαφορετικά στην εμφάνιση ή την λειτουργία των ετικετών. Μια ιδιότητα μπαίνει αμέσως μετά το όνομα της ετικέτας και αποτελείται από το όνομα της και μια τιμή μέσα σε διπλά εισαγωγικά.

Μια ετικέτα με ιδιότητες είναι κάπως έτσι:

<όνομα-ετικέτας ιδιότητα1="τιμη" ιδιότητα2="τιμη" ιδιότητα3="τιμη">...</όνομα-ετικέτας>

Η ετικέτα <p>, για παράδειγμα, μπορεί να πάρει την ιδιότητα align η οποία ορίζει την στοίχιση του κειμένου μέσα στην παράγραφο. Η ιδιότητα align παίρνει μια από τις τιμές: left, center, right, justify

<p align="center">Παράγραφος</p>
<p align="left">Παράγραφος</p>
<p align="right">Παράγραφος</p>
<p align="justify">Παράγραφος</p>

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

Διαμόρφωση κειμένου

Στην HTML υπάρχουν ετικέτες που ορίζουν την εμφάνιση του κειμένου. Παρακάτω παρουσιάζονται αυτές οι ετικέτες

Η ετικέτα <b>, <strong> και <big>

Και οι τρεις αυτές ετικέτες εμφανίζουν το κείμενο με έντονη μορφή. Η <b> και <strong> έχουν την ίδια ακριβώς επίδραση στο κείμενο, ενώ η <big> εμφανίζει το κείμενο με έντονη μορφή όπως οι <b> και <strong> αλλά με ελαφρώς μεγαλύτερα γράμματα.

<b>Αυτό το κείμενο είναι bold</b>
<strong>Αυτό το κείμενο είναι strong</strong>
<big>Αυτό το κείμενο είναι big</big>

Η ετικέτα <em>

Η ετικέτα <em> εμφανίζει το κείμενο με πλάγιους και κάπως αχνά γραμμένους χαρακτήρες. Το em είναι τα δύο πρώτα γράμματα από την λέξη emphasize.

<em>Αυτό το κείμενο είναι emphasized</em>

Η ετικέτα <i>

Η ετικέτα <i> εμφανίζει το κείμενο με πλάγιους χαρακτήρες. Το i είναι το πρώτο γράμμα από την λέξη italics

<i>Αυτό το κείμενο είναι italic</i>

Η ετικέτα <u>

Η ετικέτα <u> εμφανίζει το κείμενο υπογραμμισμένο. Το u είναι το πρώτο γράμμα από την λέξη underline

<u>Αυτό το κείμενο είναι υπογραμμισμένο</u>

Θέση και στοίχιση του κειμένου

Υπάρχουν HTML ετικέτες με τις οποίες ορίζουμε την θέση και την στοίχιση του κειμένου μας

Η ετικέτες <p>, <center>, <blockquote>

Η ετικέτα <p> ομαδοποιεί το κείμενο σε μια παράγραφο, αφήνοντας αυτόματα μια κενή γραμμή πριν την αρχή της παραγράφου και μια μετα το τέλος αυτής. Μια από τις ιδιότητες της ετικέτας <p> είναι και η align η οποία ορίζει την στοίχιση του κειμένου της παραγράφου

<p align="center">Αυτή είναι μια παράγραφος με στοίχιση στο κέντρο</p>
<p align="left">Αυτή είναι μια παράγραφος με αριστερή στοίχιση</p>
<p align="right">Αυτή είναι μια παράγραφος με δεξιά στοίχιση</p>
<p align="justify">Αυτή είναι μια ευθυγραμμισμένη παράγραφος</p>

Η ετικέτα <center> εμφανίζει το κείμενο με στοίχιση στο κέντρο της οθόνης

<center>Το κείμενο αυτό εμφανίζεται με στοίχιση στο κέντρο της οθόνης</center>

Η ετικέτα <blockquote> εμφανίζει το κείμενο αρχίζοντας από δεξιότερη εσοχή απ' ότι το υπόλοιπο κείμενο

<blockquote>Το κείμενο αυτό εμφανίζεται στην οθόνη αρχίζοντας από δεξιότερη εσοχή απ' ότι το υπόλοιπο κείμενο</blockquote>

Η ετικέτα font

Η ετικέτα <font> ορίζει την γραμματοσειρά, το μέγεθος και το χρώμα του κειμένου. Οι ιδιότητες που μπορεί να πάρει είναι οι size, face και color.

Η ετικέτα <font> δεν συμπεριλαμβάνεται στα τελευταία πρότυπα της HTML. Αν και οι περισσότεροι browsers την συμπεριλαμβάνουν στην δική τους βιβλιοθήκη ετικετών και η χρήση της δεν επιφέρει κάποιο πρόβλημα στις σελίδες που αυτή χρησιμοποιείται, καλό είναι πάντα να συντάσσουμε τις ιστοσελίδες μας σύμφωνα με τα πρότυπα της HTML και κατ' επέκταση να μην χρησιμοποιούμε την ετικέτα αυτή. Ο σωστός τρόπος για να διαμορφώσουμε ένα κείμενο είναι να χρησιμοποιούμε CSS

Η ιδιότητα face

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

<font face="Times New Roman">Κείμενο</font>
<font face="Arial">Κείμενο</font>
<font face="Tahoma">Κείμενο</font>
<font face=" sans-serif, Helvetica, Verdana, Arial">Κείμενο</font>

Στην τελευταία περίπτωση, αν ο υπολογιστής δεν υποστηρίζει την γραμματοσειρά sans-serif τότε το κείμενο εμφανίζεται στην γραμματοσειρά Helvetica. Αν ούτε η Helvetica δεν υποστηρίζεται από τον υπολογιστή, τότε το κείμενο εμφανίζεται στην γραμματοσειρά Verdana και πάει λέγοντας.

Η ιδιότητα size

Η ιδιότητα size ορίζει το μέγεθος του κειμένου. Υπάρχουν δύο τρόποι να γράψουμε την τιμή που θα έχει:

1. size = "αριθμός του μεγέθους του κειμένου (το εύρος τιμών είναι, 1 μέχρι 7)"

<font size="1">Κείμενο</font>
<font size="2">Κείμενο</font>
<font size="3">Κείμενο</font>
<font size="4">Κείμενο</font>
<font size="5">Κείμενο</font>
<font size="6">Κείμενο</font>
<font size="7">Κείμενο</font>

2. size = "αριθμός του μεγέθους του κειμένου (το εύρος τιμών είναι, -6 μέχρι +6)"

<font size="-3">Κείμενο</font>
<font size="-2">Κείμενο</font>
<font size="-1">Κείμενο</font>
<font size="+1">Κείμενο</font>
<font size="+2">Κείμενο</font>
<font size="+3">Κείμενο</font>
<font size="+4">Κείμενο</font>

Στην περίπτωση αυτή μεγαλώνουμε ή μικραίνουμε το μέγεθος του κειμένου σε σχέση με το μέγεθος του κειμένου που ορίζει ο browser. Συνήθως στους περισσότερους browser η προκαθορισμένη τιμή είναι 3, αλλά ο κάθε χρήστης μπορεί να αλλάξει την τιμή αυτή από το menu του browser του.

Η ιδιότητα color

Με την ιδιότητα color αλλάζουμε το χρώμα του κειμένου. Υπάρχουν δύο τρόποι που μπορούμε να ορίσουμε χρώμα:

1. βάζοντας σαν τιμή της ιδιότητας το όνομα του χρώματος (υπάρχει μια καθορισμένη λίστα με τα ονόματα των χρωμάτων)

<font color="blue">Κείμενο</font>
<font color="red">Κείμενο</font>
<font color="green">Κείμενο</font>
<font color="yellow">Κείμενο</font>

2. βάζοντας σαν τιμή της ιδιότητας την τιμή RGB του χρώματος. Τα περισσότερα προγράμματα επεξεργασίας εικόνων έχουν έναν επιλογέα χρωμάτων οι οποίοι εμφανίζουν την τιμή RGB των χρωμάτων που επιλέγετε.

<font color="#0000FF">Κείμενο</font>
<font color="#FF0000">Κείμενο</font>
<font color="#009900">Κείμενο</font>
<font color="#FFFF00">Κείμενο</font>

Αλλαγή του χρώματος του κειμένου

Η ετικέτα <font> περιλαμβάνει την ιδιότητα color με την οποία ορίζουμε το χρώμα του κειμένου.

<body>

<font color="red">RED</font> <br />

<font color="green">GREEN</font> <br />

<font color="blue">BLUE</font> <br />

<font color="yellow">YELLOW</font> <br />

<font color="black">BLACK</font> <br />

<font color="#CCCC33">#CCCC33</font> <br />

<font color="#660066">#660066</font> <br />

<font color="#3300CC">#3300CC</font>

</body>

Αλλαγή του χρώματος του κειμένου για όλη την σελίδα

Η ετικέτα <body> περιλαμβάνει την ιδιότητα text με την οποία ορίζουμε το χρώμα του κειμένου για όλη την σελίδα.

<body text="red">

</body>

Αλλαγή του χρώματος φόντου της σελίδας

Η ετικέτα <body> περιλαμβάνει την ιδιότητα bgcolor με την οποία ορίζουμε το χρώμα του φόντου όλης της σελίδας.

<body bgcolor="#9999FF">

6. Κοινές ιδιότητες για όλες τις ετικέτες

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

Αυτές είναι οι παρακάτω :

Ιδιότητα	Τιμή	Περιγραφή	Εξαιρούνται οι ετικέτες
accesskey	χαρακτήρας	Ορίζει ένα χαρακτήρα του πληκτρολογίου με τον οποίο, όταν θα πατάμε, θα έχουμε άμεση προσπέλαση στο στοιχείο
class	κανόνας μιας κλάσης ή όνομα της κλάσης	Ορίζει το στυλ του στοιχείου	<base>,<head>,<html>, <meta>,<param>,<script>, <style>, <title>
dir	ltr (left to right)ή rtl (right to left)	Ορίζει την κατεύθυνση του κειμένου. Η γραφή μερικών γλωσσών (κυρίως των ανατολικών χωρών) αποτυπώνεται από τα δεξιά προς τα αριστερά (ltr)	<base>,<br/>,<frame>, <frameset>,<hr>,<iframe>, <param>, <script>
id	όνομα id	ορίζει ένα μοναδικό όνομα (ταυτότητα) για ένα στοιχείο της σελίδας ώστε να μπορούμε να αναφερθούμε σε αυτό μέσα από ένα script (π.χ. JavaScript ή VBScript)	<base>,<head>,<html>, <meta>, <param>,<script>,<style>, <title>
lang	κωδικός της γλώσσας	Ορίζει τον κωδικό της γλώσσας (GR για τα ελληνικά, EN για τα αγγλικά, κτλ.)	<base>,<br/>,<frame>, <frameset>,<hr>,<iframe>, <param>, <script>
style	κανόνας style	ορίζει το στυλ του στοιχείου	<base>,<head>,<html>, <meta>,<param>,<script>, <style>, <title>
tabindex	αριθμός	ορίζει την σειρά tab των στοιχείων της σελίδας
title	κείμενο	ορίζει το κείμενο του πλαισίου το οποίο εμφανίζεται όταν αφήνουμε τον δείκτη του ποντικιού μας επάνω στο στοιχείο (mouseover event)	<base>,<head>,<html>, <meta>,<param>,<script>, <style>, <title>

7. ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ

Ορισμένοι χαρακτήρες (όπως < > &) είναι δεσμευμένοι από την HTML γιατί αυτοί χρησιμοποιούνται από την ίδια την γλώσσα HTML. Για να προσθέσουμε τέτοιους χαρακτήρες στην σελίδα μας, χρησιμοποιούμε κωδικούς διαφυγής (escape codes ή special entities) για κάθε έναν δεσμευμένο χαρακτήρα.

Ένας κωδικός διαφυγής αρχίζει από τον χαρακτήρα & , ακολουθεί ένας προκαθορισμένος κωδικός (που αποτελείτε από δύο ή περισσότερα λατινικά γράμματα) και τελειώνει με τον χαρακτήρα ; (ελληνικό ερωτηματικό). Για παράδειγμα ο κωδικός διαφυγής & lt; αντιστοιχεί στον χαρακτήρα <. Η HTML χρησιμοποιεί τον χαρακτήρα αυτόν για την εισαγωγή μιας ετικέτας. Όποτε λοιπόν θέλουμε να εμφανίσουμε στο κείμενο της σελίδα μας τον χαρακτήρα < θα γράφουμε τον κωδικό διαφυγής & lt;.

ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ
Χαρακτήρας	Κωδικός διαφυγής	Ερμηνεία Συμβόλου
	& nbsp;	nbsp = non-breaking space
<	& lt;	lt = less than
>	& gt;	gt = greater than
&	& amp;	amp = ampersand
"	& quot;	quot = quote
'	& apos;	apos = apostrophe

Για παράδειγμα αν θέλουμε να εμφανίσουμε στην σελίδα μας την μαθηματική εξίσωση x < 25 + 100, θα το γράψουμε ως εξής:

Σωστός τρόπος:

x & lt; 25 + 100

Λάθος τρόπος:

x < 25 + 100

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

Παραδείγματα:

Παπαδόπουλος & amp; Υιος

Αποτέλεσμα στον browser:

Παπαδόπουλος & Υιος

Μαθαίνω & quot;HTML& quot;

Αποτέλεσμα στον browser:

Μαθαίνω "HTML"

102 &gt; 94

Αποτέλεσμα στον browser:

102 > 94

Αλλα σύμβολα που χρησιμοποιούνται συχνά στις σελίδες

ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ
Χαρακτήρας	Κωδικός διαφυγής	Ερμηνεία Συμβόλου
¢	& cent;	cent
£	& pound;	pound
¥	& yen;	yen
§	& sec;	section
©	& copy;	copy
®	& reg;	registered trademark
×	& times;	multiplication
÷	& divide;	division

Ο κωδικός διαφυγής & nbsp;

Ο κωδικός διαφυγής & nbsp; αντιστοιχεί στο κενό (space). Στην ενότητα Η δομή της HTML και στην παράγραφο Ο τρόπος που διαβάζει ο browser ένα HTML αρχείο, αναφέραμε το εξής: όταν ένας browser διαβάζει ένα HTML έγγραφο, αγνοεί τα διαδοχικά κενά διαστήματα, τους στηλοθέτες (tabs) και τις αλλαγές γραμμών που βρίσκονται στον πηγαίο κώδικα HTML. Έτσι αν θέλουμε εμφανίσουμε στην σελίδα μας διαδοχικά κενά διαστήματα τότε χρησιμοποιούμε τον κωδικό διαφυγής & nbsp;

Για παράδειγμα αν ήθελα να γράψω τις λέξεις Κωδικός διαφυγής χωρισμένες μεταξύ τους με 6 κενά (spaces), τότε θα έγραφα:

Σωστός τρόπος:

Κωδικός & nbsp;& nbsp;& nbsp;& nbsp; διαφυγής

Λάθος τρόπος:

Κωδικός διαφυγής

Στον Λάθος τρόπο ο browser αγνοεί τα διαδοχικά κενά και εμφανίζει τις δύο λέξεις χωρισμένες μόνο με ένα κενό διάστημα, ενώ στον σωστό τρόπο θα εμφανίσει τις δύο λέξεις χωρισμένες με 6 κενά διαστήματα (4 κενά διαστήματα με τον κωδικό διαφυγής & nbsp ; και 2 κενά διαστήματα πριν και μετά τους κώδικες διαφυγής).

8. ΛΙΣΤΕΣ

Στην σελίδα μας μπορούμε να εισάγουμε Λίστες. Μια λίστα είναι κάπως έτσι:

• Coffee
• Tea
• Milk

Μη αριθμημένη λίστα

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Η ετικέτα <ul> εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το ul είναι τα δύο πρώτα γράμματα από το Unordered List. Η ετικέτα <li> προσθέτει γραμμές στην λίστα. Η ιδιότητα type της ετικέτας <ul> ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα type είναι οι εξής: disc, circle, square

Η ετικέτα <dir> κάνει την ίδια δουλιά με την ετικέτα <ul>. Ο παραπάνω κώδικας αν γραφεί έτσι:

<dir>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</dir>

θα έχει το ίδιο αποτέλεσμα

Αριθμημένη λίστα

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Η ετικέτα <ol> εισάγει μια αριθμημένη λίστα στην σελίδα μας, Το ol είναι τα δύο πρώτα γράμματα από το Ordered List. Η ιδιότητα type της ετικέτας <ol> ορίζει τον τύπο της ταξινόμησης. Οι τιμές που παίρνει η ιδιότητα type είναι οι εξής: A, a, I, i

Λίστα ορισμών

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Η ετικέτα <dl> εισάγει μια λίστα ορισμών στην σελίδα μας, Το dl είναι τα δύο πρώτα γράμματα από το Definition List. Η ετικέτα <dt> ορίζει τον περιγραφικό τίτλο των γραμμών που ακολουθούν, οι οποίες γραμμές ορίζονται από την ετικέτα <dd>

9. ΕΙΚΟΝΕΣ

Με την HTML μπορούμε να εισάγουμε εικόνες στην σελίδα μας

Η ετικέτα <img>

Με την ετικέτα αυτή εισάγουμε μια εικόνα στην σελίδα μας. Η ετικέτα <img> δεν έχει ετικέτα τέλους, οπότε βάζουμε τον χαρακτήρα / πριν τον χαρακτήρα >.

Έχει τις εξής ιδιότητες:

Ιδιότητα	Τιμή	Περιγραφή
align	baseline, top, middle, bottom, absmiddle, absbottom, left, right	Ορίζει την στοίχιση της εικόνας με το κείμενο
alt*	Κείμενο	Ορίζει εναλλακτικό κείμενο (χρησιμοποιείται για τους browsers που δεν υποστηρίζουν την εμφάνιση γραφικών)
border	αριθμός pixels	Ορίζει το πάχος του περιγράμματος της εικόνας
height	αριθμός pixels, %	Ορίζει το ύψος της εικόνας
hspase	αριθμός pixels	Ορίζει τον κενό χώρο μεταξύ της εικόνας και των υπόλοιπων περιεχομένων της σελίδας που βρίσκονται αριστερά και δεξιά του
ismap	URL	Ορίζει την εικόνα σαν "χάρτη"
longdesc	URL	Ένα URL προς μια μεγάλη περιγραφή για το εικονίδιο
src*	URL	Ορίζει το URL του αρχείου της εικόνας
usemap	URL	Ορίζει έναν χάρτη επάνω στην εικόνα με τον οποίον μπορούμε να έχουμε links σε διάφορα σημεία μέσα στην εικόνα Δείτε επίσης: <map> <area>
vspase	αριθμός pixels	Ορίζει τον κενό χώρο μεταξύ της εικόνας και των υπόλοιπων περιεχομένων της σελίδας που βρίσκονται επάνω και κάτω του
width	αριθμός pixels, %	Ορίζει το μήκος της εικόνας

* Required Attributes: Ιδιότητες που πρέπει απαραίτητα να υπάρχουν στην ετικέτα<img src="bird.jpg" width="100" height="30" border="2" alt="Χρωματιστός παπαγάλος" />

Με τον παραπάνω κώδικα προσθέτουμε στην σελίδα μας την εικόνα με όνομα bird.jpg, η οποία έχει μήκος 100 pixels και ύψος 30 pixels και το περίγραμμα της έχει πάχος 2 pixel

Η ιδιότητα alt

Υπάρχουν ορισμένοι browsers που δεν υποστηρίζουν την εμφάνιση γραφικών με αποτέλεσμα να μην εμφανίζονται οι εικόνες που τοποθετούμε στις σελίδες μας. Η χρήση της ιδιότητας alt έχει σαν αποτέλεσμα σε έναν τέτοιο browser να εμφανίζετε αντί της εικόνας, το κείμενο το οποίο ορίζεται με την ιδιότητα. Συνήθως το κείμενο αυτό περιγράφει την εικόνα έτσι ώστε ο χρήστης που δεν μπορεί να την δει, να πάρει μια ιδέα για το τι απεικονίζετε σε αυτήν. Το alt είναι τα τρια πρώτα γράμματα από την λέξη alternative

<img src="bird.jpg" width="100" height="30" border="2" alt="χρωματιστός παπαγάλος" />

Διαστάσεις της εικόνας

Οι ετικέτες width και height ορίζουν τις διαστάσεις της εικόνας σε pixels. Το συνηθέστερο είναι να γράφουμε τις πραγματικές διαστάσεις της εικόνας. Ορισμένες φορές όμως θέλουμε να εμφανίσουμε την εικόνα με μικρότερες ή μεγαλύτερες από τις κανονικές διαστάσεις προσαρμόζοντας ανάλογα τις ιδιότητες width και height. Βέβαια αν οι διαστάσεις που ορίζουμε απέχουν πολύ από τις πραγματικές διαστάσεις της εικόνας, τότε αυτή εμφανίζεται αλλοιωμένη. Γι' αυτό είναι προτιμότερο να μικραίνετε ή να μεγαλώνετε την εικόνα μέσα σε κάποιο πακέτο επεξεργασίας γραφικών γιατί εκεί χρησιμοποιούνται ειδικές συναρτήσεις που αλλάζουν το μέγεθος της εικόνας χωρίς να την αλλοιώνουν.

<img src="bird.jpg" width="100" height="30" />

Η ιδιότητα align

Καθορίζει την στοίχιση της εικόνας με το κείμενο που είναι δίπλα σε αυτήν. Οι τιμές που μπορεί να πάρει είναι οι εξής: baseline, top, middle, bottom, absmiddle, absbottom, left, right

<img src="koumpi.jpg" width="100" height="51" align="top" />
Περίγραμμα στις εικόνες

Στις εικόνες έχουμε δυνατότητα να βάλουμε περίγραμμα, του οποίου το πάχος το ορίζουμε με την ιδιότητα border

<img src="bird.jpg" width="100" height="30" border="2" alt="χρωματιστός παπαγάλος" />
Οι εικόνες σαν φόντο

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

Βέβαια η εικόνα αυτή δεν προσφέρεται για φόντο. Συνήθως για φόντο χρησιμοποιούμε πολύ μικρά εικονίδια τα οποία όταν επαναλαμβάνονται δείχνουν σαν μια μεγάλη και ενιαία εικόνα, όπως το παρακάτω εικονίδιο το οποίο έχει μέγεθος 15Χ15:

Αυτά τα εικονίδια λέγονται textures και υπάρχουν άπειρα και πολύ όμορφα στο Internet τα οποία μπορείτε να κατεβάσετε και να χρησιμοποιήσετε στις δικές σας σελίδες

Πώς μπορώ να βάλω μια εικόνα σαν φόντο στην σελίδα μου;

Η ιδιότητα background της ετικέτας <body> ορίζει την εικόνα που θα τοποθετηθεί στο φόντο της σελίδας μας.

<html>

<head>

<title>Εικόνα σαν φόντο</title>

<META content="text/html; charset=iso-8859-7" />

</head>

<body background=../images/fill_left_td.gif>

<p>Αυτή η σελίδα έχει background ένα εικονίδιο το οποίο έχει μέγεθος μόλις 1 pixel μήκος και 5 pixel ύψος (1Χ5). Το εικονίδιο αυτό επαναλαμβάνεται μέχρι να γεμίσει όλη η οθόνη.</p>

</body>

</html>

10. ΣΥΝΔΕΣΜΟΙ ΚΑΙ ΔΕΣΜΟΙ

Μέχρι τώρα μάθαμε πως να διαμορφώνουμε κείμενο σε μια σελίδα, πως να προσθέτουμε σε αυτήν παραγράφους, χρώματα και λίστες, αλλά δεν μάθαμε την βασικότερη λειτουργία του υπερ-κειμένου, δηλαδή την διασύνδεση μεταξύ των σελίδων που χτίζουμε, αλλά και την διασύνδεση των σελίδων μας με οποιαδήποτε άλλη τοποθεσία στο Web. Ένας σύνδεσμος (link) χρησιμοποιείτε για να μεταφερθούμε σε ένα άλλο HTML έγγραφο μέσα στο web

Η ετικέτα <A> και η ιδιότητα HREF

Δημιουργούμε συνδέσμους με την ετικέτα <a> (a από την λέξη Anchor). Η πιο βασική ιδιότητα της ετικέτας είναι η href, η οποία περιέχει το url ενός αρχείου. Το κείμενο που γράφεται ανάμεσα στην ετικέτα αρχής και τέλους είναι το κείμενο που φαίνεται στην οθόνη και πατάει ο χρήστης επάνω σε αυτό για να μεταφερθεί στην σελίδα που δείχνει η ιδιότητα href. Η εμφάνιση ενός συνδέσμου στην οθόνη μας ποικίλει ανάλογα με τον browser που χρησιμοποιούμε. Οι περισσότεροι browsers, όπως οι Internet Explorer και Mozilla Firefox, εξ' ορισμού τους εμφανίζουν με Μπλε και υπογραμμισμένα γράμματα, ενώ τους συνδέσμους που έχουμε επισκεφτεί στο παρελθόν τους εμφανίζουν με Μοβ γράμματα. Βέβαια τα χρώματα αυτά μπορούμε να τα αλλάξουμε όπως είδαμε στην Ενότητα Χρώματα ή με την χρήση CSS.

Τα μέρη ενός Συνδέσμου

Διασύνδεση μιας σελίδας με άλλες σελίδες στο Web

Μπορούμε να δημιουργήσουμε σύνδεσμο στην σελίδα μας προς μια άλλη τοποθεσία στο Web, όπως η σελίδα του Yahoo.

<a h ref="http://www.yahoo.com">Yahoo</a>
<a hr ef="http://www.google.com">Google</a>

Η ιδιότητα target της ετικέτας <a>

Με την ιδιότητα target ορίζουμε σε ποιο παράθυρο ή μέρος του παραθύρου θα εμφανιστεί η σελίδα που ανοίγουμε πατώντας τον σύνδεσμο. Η ιδιότητα παίρνει τις εξής τιμές:

Τιμή	Σχόλιο
_self	ανοίγει την σελίδα στο ίδιο πλαίσιο
_blank	ανοίγει την σελίδα σε νέο παράθυρο. Αφού πατήσετε τον σύνδεσμο, ανοίγει ένα νέο παράθυρο του browser στο οποίο θα εμφανιστεί την σελίδα
_top	ανοίγει την σελίδα στο ίδιο παράθυρο αγνοώντας τα πλαίσια που τυχόν υπάρχουν
_parent	ανοίγει την σελίδα στο "πατρικό πλαίσιο "

Την πρώτη, τρίτη και τέταρτη ιδιότητα θα τις σχολιάσουμε εκτενέστερα στην Ενότητα Πλαίσια (frames).

Δημιουργία συνδέσμου προς άλλα δικά μας HTML έγγραφα του Site μας

Όταν "χτίζουμε" την δικιά μας ιστοσελίδα, χρησιμοποιούμε κυρίως συνδέσμους προς έγγραφα που βρίσκονται είτε στον ίδιο φάκελο με το HTML αρχείο που βρίσκεται το link είτε σε διαφορετικό φάκελο.

Στην παραπάνω εικόνα φαίνεται ο τρόπος που συνδέονται μεταξύ τους οι σελίδες ενός site. Όλα τα HTML αρχεία που φαίνονται στην εικόνα είναι οργανωμένα σε φακέλους και βρίσκονται αποθηκευμένα στον τοπικό σκληρό δίσκο του Server που φιλοξενεί το site. Κάθε ένα από αυτά τα αρχεία περιέχει συνδέσμους προς άλλα αρχεία του site. Για παράδειγμα στην σελίδα index.html υπάρχει σύνδεσμος προς την σελίδα mathimata/index.html. Η σελίδα mathimata/index.html περιέχει έναν σύνδεσμο προς την σελίδα mathimata/css.html κ.ο.κ

Φανταστείτε τώρα ότι τα αρχεία του site που χτίζουμε περιέχονται στην παρακάτω δομή αρχείων:

Η δομή φακέλων και αρχείων PublicMysite index.html info.html Imageslogo.jpg leftarrow.jpgmyphoto.jpgrightarrow.jpgMathimataindex.htmlHtmlbasikesetiketes.htmleidikoixarakthres.htmleisagwgh.htmlhdomihtml.htmlJavascripteisagwgh.htmlfunctions.htmlloops.htmlsinthiki.html

Η δομή μόνο των φακέλων (ώστε να είναι κατανοητά τα επίπεδα των φακέλων) PublicMysite ImagesMathimataHtmlJavascript Η παραπάνω δομή φακέλων περιέχει 4 επίπεδα: Επίπεδο 0 : Public Επίπεδο 1 : Mysite Επίπεδο 2 : Images, Mathimata Επίπεδο 3 : Html, Javascript

Αν τώρα θέλω να προσθέσω στο html αρχείο public/mysite/index.html ένα link προς το html αρχείο public/mysite/info.html, τότε το link αυτό θα το γράψω έτσι:

<a href="info.html">Link προς το αρχείο info.html</a>

Αν πάλι θέλω να προσθέσω στο html αρχείο public/mysite/index.html ένα link προς το html αρχείο public/mysite/mathimata/html/eisagwgh.html, τότε το link αυτό θα το γράψω έτσι:

<a href="mathimata/html/eidagwgh.html">Link προς το αρχείο eisagwgh.html</a>

Στην περίπτωση αυτή το αρχείο που δείχνει ο link δεν βρίσκεται στον ίδιο φάκελο και έτσι αναφερόμαστε σε αυτό γράφοντας ολόκληρη την διαδρομή του αρχείου από το σημείο που βρίσκεται το έγγραφο public/mysite/index.html

Αν θέλω να προσθέσω στο html αρχείο public/mysite/mathimata/index.html ένα link προς την κεντρική σελίδα, δηλαδή την public/mysite/index.html, τότε το link αυτό θα το γράψω έτσι:

<a href="../index.html">Link προς την κεντρική σελίδα</a>

Στην περίπτωση αυτή το αρχείο που δείχνει ο link βρίσκεται σε φάκελο προηγούμενου επιπέδου.

Με τις δύο τελείες ( .. ) αναφερόμαστε στο αμέσως προηγούμενο επίπεδο φακέλων από τον φάκελο που βρίσκεται το αρχείο που περιέχει το link

Αν θέλω να προσθέσω στο html αρχείο

public/mysite/mathimata/javascript/loops.html

ένα link προς την κεντρική σελίδα,

δηλαδή την public/mysite/index.html, τότε το link αυτό θα το γράψω έτσι:

<a href="../../index.html">Link προς την κεντρική σελίδα</a>

Αν θέλω να προσθέσω στο html αρχείο

public/mysite/mathimata/javascript/loops.html

ένα link προς την σελίδα

public/mysite/mathimata/html/eisagwgh.html

τότε το link αυτό θα το γράψω έτσι:

<a href="../html/eisagwgh.html">Link προς την σελίδα html/eisagwgh.html</a>

Δημιουργία δεσμών

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

Οι δεσμοί δημιουργούνται χρησιμοποιώντας την ίδια ετικέτα που χρησιμοποιούν και οι σύνδεσμοι, δηλαδή την <a>, με την διαφορά αντί για την ιδιότητα HREF, χρησιμοποιούμε την ιδιότητα NAME με την οποία δίνουμε ένα όνομα στον δεσμό. Για παράδειγμα αν θέλαμε να δημιουργήσουμε έναν δεσμό με όνομα paragraph1 σε ένα σημείο της σελίδας μας, τότε θα γράφαμε:

<a name="paragraph1">Δεσμοί και σύνδεσμοι</a>

Τώρα αν θέλουμε να προσθέσουμε στην ίδια σελίδα έναν σύνδεσμο (link) που θα μας οδηγεί στον δεσμό του εγγράφου που ονομάζεται paragraph1, τότε θα γράφαμε:

<a href="http://localhost/#paragraph1">Πήγαινε στην πρώτη παράγραφο.</a>

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

public/mysite/mathimata/javascript/loops.html

προς τον δεσμό με όνομα paragraph1 της σελίδας

public/mysite/index.html,

τότε θα γράφαμε:

<a href="../../mathimata/index.html#paragraph1">Link προς τον δεσμό με όνομα paragraph1 του αρχείου index.html</a>

αρκεί βέβαια να υπάρχει ο αντίστοιχος Δεσμός, με όνομα paragraph1, στην σελίδα αυτή.

Αλλαγή του χρώματος των συνδέσμων για όλη την σελίδα

Η ετικέτα <body> περιλαμβάνει τις ιδιότητες link, vlink και alink. Η ιδιότητα link ορίζει το χρώμα των κανονικών συνδέσμων που ο χρήστης δεν έχει επισκεφτεί στο παρελθόν (οι σύνδεσμοι που εξ ορισμού εμφανίζονται μπλε). Η ιδιότητα vlink (visited link) ορίζει το χρώμα των συνδέσμων που ο χρήστης έχει επισκεφτεί στο παρελθόν (οι σύνδεσμοι που εξ ορισμού εμφανίζονται Μοβ ή Κόκκινοι). Η ιδιότητα alink (active link) ορίζει το χρώμα ενός συνδέσμου πάνω στον οποίον έχετε κάνει κλικ και δεν έχετε ακόμη ελευθερώσει του κουμπί του ποντικιού(αυτό λέγεται ενεργοποιημένος σύνδεσμος και εξ ορισμού συνήθως εμφανίζεται με κόκκινο χρώμα). Τα χρώματα που θα ορίσουμε στις παραπάνω ιδιότητες ισχύουν για κάθε σύνδεσμό που υπάρχει στην σελίδα .

<body link="red" vlink="yellow" alink="black">

Πώς μπορώ να βάλω link σε μια εικόνα;

<html>

<head>

<title>Link σε πίνακα</title>

<META content="text/html; charset=iso-8859-7" />

</head>

<body>

<a href="http://www.wlearn.gr" target="_blank"><img src=only_logo.jpg width="180" height="100" border="0"></a>

</body>

</html>

11. ΠΙΝΑΚΕΣ

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

Πίνακας 1x2

1,1

1,2

Πίνακας 2Χ3

1,1	1,2	1,3
2,1	2,2	2,3

Πίνακας 5Χ5

1,1	1,2	1,3	1,4	1,5
2,1	2,2	2,3	2,4	2,5
3,1	3,2	3,3	3,4	3,5
4,1	4,2	4,3	4,4	4,5
5,1	5,2	5,3	5,4	5,5

Ορισμός πινάκων

<table border="1">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>

Με τις ετικέτες <table>...</table> ορίζουμε έναν πίνακα. Το ζεύγος των ετικετών <tr>...</tr> ορίζει μια γραμμή του πίνακα, ενώ το ζεύγος των ετικετών <td>...</td> ορίζουν ένα κελί στην γραμμή του πίνακα. Η ιδιότητα border της ετικέτας <table> ορίζει το πάχος του περιγράμματος του πίνακα. Στο παραπάνω παράδειγμα δημιουργήσαμε πίνακα με δύο γραμμές που η κάθε μια από αυτές έχει δύο στήλες (2X2)

Επικεφαλίδες του πίνακα

<table border="1">
<tr>
<th>Επικεφαλίδα 1</th>
<th>Επικεφαλίδα 2</th>
</tr>
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>

Με την ετικέτα <th> ορίζουμε μια επικεφαλίδα σε μια στήλη του πίνακα. Το κείμενο που βρίσκετε μέσα στις ετικέτες <th> και </th> εμφανίζεται με bold χαρακτήρες. Η ετικέτες <th>...</th> τοποθετούνται μέσα στις ετικέτες <tr>...</tr> όπως οι ετικέτες <td>...</td>
Λεζάντα στον πίνακα

<table border="1">
<caption>Τίτλος του Πίνακα</caption>
<tr>
<th>Επικεφαλίδα 1</th>
<th>Επικεφαλίδα 2</th>
</tr>
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>

Με την ετικέτα <caption> τοποθετούμε λεζάντα στον πίνακα μας. Η λεζάντα τοποθετείται επάνω από τον πίνακα με στοίχιση στο κέντρο.

Περιγράμματα στον πίνακα

<table border="1">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>

Η ιδιότητα border της ετικέτας <table> ορίζει το πάχος του περιγράμματος του πίνακα.Μήκος και ύψος του πίνακα

<table border="1" width="400">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 3, στήλη 1</td>
<td>γραμμή 3, στήλη 2</td>
</tr>
</table>

Με την ιδιότητα width ορίζουμε το μήκος του πίνακα. Η ιδιότητα αυτή μπορεί να μπει επίσης στις ετικέτες <td> και <th> . Το παρακάτω παράδειγμα έχει το ίδιο αποτέλεσμα με το προηγούμενο όσο αφορά το σύνολο του μήκους του πίνακα. Στο επόμενο παράδειγμα ορίζουμε το μήκος για κάθε ένα κελί των γραμμών του πίνακα.

<table border="1">
<tr>
<td width="150">γραμμή 1, στήλη 1</td>
<td width="250">γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 3, στήλη 1</td>
<td>γραμμή 3, στήλη 2</td>
</tr>
</table>

Στο παραπάνω παράδειγμα τοποθετήσαμε την ιδιότητα width στην ετικέτα <td> αντί στην ετικέτα <table>. Το πρώτο κελί κάθε γραμμής του πίνακα έχει μήκος 150 pixels, ενώ το δεύτερο κελί κάθε γραμμής του πίνακα έχει μήκος 250 pixels, οπότε το συνολικό μήκος της κάθε γραμμής, άρα και του πίνακα, είναι 400 pixels. Η ιδιότητα width τοποθετείται μόνο στα κελιά (<td> ή <th>) της πρώτης γραμμής και εφαρμόζετε για όλα τα κελιά του πίνακα. Με αυτόν τον τρόπο όταν θέλουμε να αλλάξουμε το μήκος των κελιών ενός πίνακα, αλλάζουμε μόνο το μήκος των κελιών της πρώτης γραμμής του. Δεν είναι λάθος να τοποθετούμε την ιδιότητα width σε όλα τα κελιά (<td>) όλων των γραμμών του πίνακα. Φανταστείτε όμως έναν πίνακα με 100 γραμμές και κάθε μια από αυτές να έχει 8 κελιά. Αν ποτέ θελήσουμε να αλλάξουμε διαστάσεις στα κελιά του πίνακα αυτού θα χρειαζόταν να κάνουμε 100*8=800 αλλαγές τιμών! Ενώ αν τοποθετήσουμε την ιδιότητα width μόνο στα 8 κελιά της πρώτης γραμμής, τότε θα χρειαζόταν να κάνουμε μόνο 8 αλλαγές τιμών οι οποίες θα παρασύρουν όλα τα κελιά των επόμενων γραμμών του πίνακα.

Είναι προτιμότερο και συνηθέστερο να ορίζουμε το μήκος των κελιών (η ιδιότητα width στις ετικέτες <td> ή <th>) και όχι του συνολικού πίνακα (η ιδιότητα width στην ετικέτα <table>).

Με την ιδιότητα height ορίζουμε το ύψος των κελιών των γραμμών ενός πίνακα. Η ιδιότητα αυτή μπαίνει και στην ετικέτα <th>. Αν στον παραπάνω πίνακα θέλουμε να ορίσουμε ύψος 100 pixels στην πρώτη γραμμή του πίνακα, ύψος 200 pixels στην δεύτερη γραμμή του πίνακα και ύψος 150 pixels στην τρίτη γραμμή του πίνακα, τότε θα γράφαμε :

<table border="1">
<tr>
<td width="150" height="100">γραμμή 1, στήλη 1</td>
<td width="250">γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td height="200">γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
<tr>
<td height="150">γραμμή 3, στήλη 1</td>
<td>γραμμή 3, στήλη 2</td>
</tr>
</table>

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

Στοίχιση του πίνακα μέσα στην σελίδα

<table border="1" align="center">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>

Η ιδιότητα align της ετικέτας <table> ορίζει την στοίχιση του πίνακα μέσα στην σελίδα. Οι τιμές που μπορεί να πάρει η ιδιότητα align είναι: left, center και right

Στοίχιση κειμένου μέσα στα κελιά

<table border="1">
<tr>
<td align="left">γραμμή 1, στήλη 1</td>
<td align="left">γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td align="right">γραμμή 2, στήλη 1</td>
<td align="right">γραμμή 2, στήλη 2</td>
</tr>
<tr>
<td align="center">γραμμή 3, στήλη 1</td>
<td align="center">γραμμή 3, στήλη 2</td>
</tr>
<tr align="center">
<td>γραμμή 4, στήλη 1</td>
<td>γραμμή 4, στήλη 2</td>
</tr>
</table>

Με την ιδιότητα align των ετικετών <td> και <tr> καθορίζουμε την στοίχιση του κειμένου μέσα στα κελιά. Αν η ιδιότητα είναι στην ετικέτα <td> τότε η στοίχιση που καθορίσαμε θα ισχύει μόνο για το συγκεκριμένο κελί, ενώ αν είναι στην ετικέτα <tr> τότε η στοίχιση θα ισχύσει για όλα τα κελιά της γραμμής

Κελιά χωρίς περιεχόμενο

<table border="1" align="center">
<tr>
<td>&nbsp;</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>

Σε μερικούς browsers δεν εμφανίζονται σωστά οι πίνακες με κενά κελιά. Γι' αυτό τον λόγο καλό είναι να χρησιμοποιήτε τον κωδικό διαφυγής & nbsp;

Χρώμα σε όλο τον πίνακα, στην γραμμή, στο κελί

Background σε όλο τον πίνακα
<table border="1" bgcolor="red">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>
<br />
Background σε μια γραμμή του πίνακα
<table border="1">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr bgcolor="red">
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>
<br />
Background σε ένα κελί του πίνακα
<table border="1">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td bgcolor="red">γραμμή 2, στήλη 2</td>
</tr>
</table>

Μπορούμε να βάλουμε χρώμα σε όλο τον πίνακα ή σε μια γραμμή του πίνακα ή σε ένα κελί του πίνακα, ανάλογα που θα τοποθετήσουμε την ιδιότητα bgcolor ( δηλαδή ή στην ετικέτα <table> ή στην <tr> ή στην <td> ).

Εικόνα σαν φόντο σε όλο τον πίνακα, στην γραμμή, στο κελί

Background σε όλο τον πίνακα
<table border="1" background="bird.jpg">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>

<br />
Background σε μια γραμμή του πίνακα
<table border="1">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr background="bird.jpg">
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>
<br />
Background σε ένα κελί του πίνακα
<table border="1">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td background="bird.jpg">γραμμή 2, στήλη 2</td>
</tr>
</table>

Με την ιδιότητα background των ετικετών <table>, <tr> και <td> ορίζουμε μια εικόνα για φόντο σε ολόκληρο τον πίνακα ή σε μια γραμμή ή σε ένα κελί, ανάλογα σε ποια από τις τρεις ετικέτες θα το τοποθετήσουμε

Πώς μπορώ να βάλω μια εικόνα σαν φόντο σε ολόκληρο πίνακα ή σε ορισμένα κελιά αυτού;

<html>

<head>

<title>Εικόνα σαν φόντο σε πίνακα</title>

<META content="text/html; charset=iso-8859-7" />

</head>

<body>

<table width="449" height="221" border="1" cellpadding="0" cellspacing="0" background="only_logo.jpg">

<caption> Εικόνα σαν φόντο σε όλο τον πίνακα </caption>

<tr align="center" valign="middle">

<td><strong><font color="#FF0000">κελί 1,1</font></strong></td>

<td><strong><font color="#FF0000">κελί 1,2</font></strong></td>

<td><strong><font color="#FF0000">κελί 1,3</font></strong></td>

</tr>

<tr align="center" valign="middle">

<td><strong><font color="#FF0000">κελί 2,1</font></strong></td>

<td><strong><font color="#FF0000">κελί 2,2</font></strong></td>

<td><strong><font color="#FF0000">κελί 2,3</font></strong></td>

</tr>

<tr align="center" valign="middle">

<td><strong><font color="#FF0000">κελί 3,1</font></strong></td>

<td><strong><font color="#FF0000">κελί 3,2</font></strong></td>

<td><strong><font color="#FF0000">κελί 3,3</font></strong></td>

</tr>

</table>

Για να ορίσουμε μια εικόνα σαν φόντο σε ολόκληρο τον πίνακα, χρησιμοποιούμε την

ιδιότητα background στην ετικέτα table

<p> </p>

<table width="449" height="221" border="1" cellpadding="0" cellspacing="0">

<caption> Εικόνα σαν φόντο σε μια γραμμή του πίνακα </caption>

<tr align="center" valign="middle" background="only_logo.jpg">

<td><strong><font color="#FF0000">κελί 1,1</font></strong></td>

<td><strong><font color="#FF0000">κελί 1,2</font></strong></td>

<td><strong><font color="#FF0000">κελί 1,3</font></strong></td>

</tr>

<tr align="center" valign="middle">

<td><strong><font color="#FF0000">κελί 2,1</font></strong></td>

<td><strong><font color="#FF0000">κελί 2,2</font></strong></td>

<td><strong><font color="#FF0000">κελί 2,3</font></strong></td>

</tr>

<tr align="center" valign="middle">

<td><strong><font color="#FF0000">κελί 3,1</font></strong></td>

<td><strong><font color="#FF0000">κελί 3,2</font></strong></td>

<td><strong><font color="#FF0000">κελί 3,3</font></strong></td>

</tr>

</table>

Για να ορίσουμε μια εικόνα σαν φόντο σε μια γραμμή του πίνακα, χρησιμοποιούμε

την ιδιότητα background στην ετικέτα tr

<p> </p>

<table width="449" height="221" border="1" cellpadding="0" cellspacing="0">

<caption> Εικόνα σαν φόντο σε ένα κελί του πίνακα </caption>

<tr align="center" valign="middle">

<td><strong><font color="#FF0000">κελί 1,1</font></strong></td>

<td><strong><font color="#FF0000">κελί 1,2</font></strong></td>

<td><strong><font color="#FF0000">κελί 1,3</font></strong></td>

</tr>

<tr align="center" valign="middle">

<td background="only_logo.jpg"> <strong><font color="#FF0000"> κελί 2,1 </font> </strong> </td>

<td><strong><font color="#FF0000">κελί 2,2</font></strong></td>

<td><strong><font color="#FF0000">κελί 2,3</font></strong></td>

</tr>

<tr align="center" valign="middle">

<td><strong><font color="#FF0000">κελί 3,1</font></strong></td>

<td><strong><font color="#FF0000">κελί 3,2</font></strong></td>

<td><strong><font color="#FF0000">κελί 3,3</font></strong></td>

</tr>

</table>

Για να ορίσουμε μια εικόνα σαν φόντο σε ένα κελί του πίνακα, χρησιμοποιούμε την

ιδιότητα background στην ετικέτα td

<p> </p>

<p> </p>

</body>

</html>

Οι ιδιότητες cellspacing και cellpadding της ετικέτας <table>

Με την ιδιότητα cellspacing της ετικέτας <table> ορίζουμε το πάχος των σκιασμένων γραμμών που διαχωρίζουν τα κελιά, ενώ με την ιδιότητα cellpadding της ετικέτας ορίζουμε τον κενό χώρο μεταξύ του πλαισίου των κελιών και του περιεχομένου αυτών

Με την μπλε γραμμή παρουσιάζεται το κενό που ορίζει η ιδιότητα cellspacing, ενώ με την κόκκινη γραμμή παρουσιάζεται το κενό που ορίζει η ιδιότητα cellpadding

Ο παρακάτω πίνακας έχει cellpadding 10

1,1 1,2 2,1 2,2

Ο παρακάτω πίνακας έχει cellspacing 10

1,1 1,2 2,1 2,2

Ο παρακάτω πίνακας έχει cellpadding 10 ΚΑΙ cellspacing 10

1,1 1,2 2,1 2,2

Συγχώνευση κελιών

Οριζόντια συγχώνευση κελιών :

Όταν θέλουμε ένα κελί να επεκτείνεται σε πολλές κολόνες, χρησιμοποιούμε την ιδιότητα colspan η οποία ορίζει τον αριθμό των κολόνων που επεκτείνεται. Η ιδιότητα αυτή χρησιμοποιείται και στην ετικέτα <th>

<table width="264" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" bgcolor="#66CCFF">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="3" bgcolor="#66CCFF">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
Κάθετη συγχώνευση κελιών :

Πολλές φορές θέλουμε ορισμένα κελιά στον πίνακα να επεκτείνονται σε πολλές γραμμές. Αυτό γίνετε με την ιδιότητα rowspan της ετικέτας <td>. Η ιδιότητα rowspan ορίζει τον αριθμό των γραμμών που θα επεκτείνεται το κελί. Η ιδιότητα αυτή χρησιμοποιείται και στην ετικέτα <th>

<table width="264" border="1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" bgcolor="#66CCFF">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td rowspan="3" bgcolor="#66CCFF">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

12. ΦΟΡΜΕΣ

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

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

Τα στοιχεία μιας Φόρμας

Παρακάτω παρουσιάζονται τα στοιχεία μιας Φόρμας

Λεζάντα των στοιχείων μιας Φόρμας

Όλα τα στοιχεία μιας Φόρμας, είτε αυτά είναι πεδία κειμένου, είτε είναι περιοχές κειμένου, είτε είναι κουμπιά επιλογών κ.ο.κ., έχουν σχεδιαστεί να δέχονται με συγκεκριμένο τρόπο (είτε με πληκτρολόγηση, είτε με επιλογή με το ποντίκι) συγκεκριμένες (σημασιολογικά) τιμές οι οποίες θα επεξεργαστούν από κάποιο script αρχείο.

Για τον λόγο αυτόν κάθε στοιχείο μιας φόρμας θα πρέπει να έχει ένα κείμενο (δίπλα του ή σε οποιοδήποτε άλλο σημείο ώστε να είναι εμφανή η αντιστοιχία του με το στοιχείο της Φόρμας) το οποίο κείμενο να προσδίδει έναν χαρακτηρισμό στο στοιχείο της Φόρμας (π.χ.: όνομα, επώνυμο, τηλέφωνο κ.ο.κ.) ώστε ο επισκέπτης της σελίδας να ξέρει ποια πληροφορία ζητά το στοιχείο αυτό. Για παράδειγμα, το πεδίο κειμένου το οποίο δέχεται το επώνυμο χαρακτηρίζεται από το κείμενο Επώνυμο. Το κείμενο αυτό ονομάζεται Λεζάντα του πεδίου κειμένου που δέχεται το επώνυμο.

Με λίγα λόγια η Λεζάντα ενός στοιχείου της Φόρμας είναι το κείμενο που χαρακτηρίζει το περιεχόμενο του πεδίου που πρέπει να πληκτρολογήσει ή να επιλέξει ο επισκέπτης. Το κείμενο αυτό μπορούμε βέβαια να το μορφοποιήσουμε με HTML ετικέτες.

Η ετικέτα <FORM>

Για να δημιουργήσουμε μια φόρμα χρησιμοποιούμε τις ετικέτες <FORM> και </FORM>. Οι κυριότερες ιδιότητες της ετικέτας είναι οι name, method και action.

Με την ιδιότητα name δίνουμε ένα όνομα στην φόρμα ώστε να μπορούμε να αναφερόμαστε σε αυτή μέσα από τον κώδικα ενός script. Καλό είναι πάντα να δίνουμε όνομα στις Φόρμες που κατασκευάζουμε, ιδιαίτερα στις περιπτώσεις που έχουμε περισσότερες από μια Φόρμες στην ίδια σελίδα.

Η ιδιότητα action περιέχει το URL του αρχείου script στον Server το οποίο θα επεξεργαστεί τα στοιχεία της Φόρμας. Το script είναι ένα πρόγραμμα το οποίο τρέχει στον Server και το οποίο μεταξύ των άλλων μπορεί να δέχεται σαν είσοδο δεδομένα τα οποία λαμβάνει ο Server από τον browser του επισκέπτη (συνήθως από μια Φόρμα). Το script , χρησιμοποιώντας μια script γλώσσα προγραμματισμού (π.χ. asp , php κτλ.) , επεξεργάζεται τα δεδομένα αυτά και έπειτα επιστρέφει στον browser μια HTML σελίδα. Η επεξεργασία αυτή μπορεί να είναι από απλές πράξεις μεταξύ των δεδομένων έως και αναζήτηση σε μια περίπλοκη Βάση Δεδομένων με βάση τα δεδομένα αυτά (ένα τέτοιο script περιέχει κατάλληλες εντολές ώστε να συνδεθεί σε μια Βάση Δεδομένων και να προσπελάσει αλλα και να προσθέσει και να διαγράψει εγγραφές)

Η method καθορίζει τον τρόπο με τον οποίο στέλνονται τα δεδομένα της Φόρμας στον Server που βρίσκεται το πρόγραμμα script που θα τα επεξεργαστεί και μπορεί να πάρει τις τιμές get ή post. Με την μέθοδο get τα δεδομένα προσθέτονται στο τέλος του URL που "δείχνει" η ιδιότητα action και χωρίζονται από το σύμβολο &. Με την μέθοδο post τα δεδομένα στέλνονται ξεχωριστά από το URL . Στην περίπτωση post το αρχείο script παίρνει τα δεδομένα της Φόρμας μέσω της στάνταρ εισόδου. Παρακάτω η ιδιότητα method αναφέρεται πιο αναλυτικά.

Μέσα στα όρια των ετικετών <FORM> και </FORM> εκτός απο τα στοιχεία της Φόρμας μπορούμε επίσης να προσθέσουμε κείμενο (συνήθως Λεζάντες των στοιχείων) μαζί με ετικέτες μορφοποίησης<FORM name="form1" method="post" action="example.php">
<INPUT>
<INPUT>
</FORM>

Η ετικέτα <INPUT>

Με την ετικέτα <INPUT> εισάγουμε τα περισσότερα στοιχεία της φόρμας. Οι κυριότερες ιδιότητες της ετικέτας είναι η type η οποία καθορίζει τον τύπο του στοιχείου της Φόρμας (Πεδίο Κειμένου ή Περιοχή Κειμένου ή Κουμπί Επιλογών ή Κουτί Πολλαπλών Επιλογών ή Κουμπί), η name με την οποία δίνουμε ένα μοναδικό όνομα στο στοιχείο της φόρμας (δεν πρέπει να υπάρχουν στοιχεία φόρμας με τα ίδια ονόματα) και η value με την οποία δίνουμε μια αρχική τιμή στο στοιχείο της φόρμας. Η ετικέτα <INPUT> δεν έχει ετικέτα τέλους

<FORM name="form1" method="post" action="http://www.mysite.gr/script.php">
Ηλικία: <INPUT type="text" name="age" value="0" />
</FORM>

Πώς εισάγουμε ένα Πεδίο Κειμένου (text field) στην Φόρμα μας ;

<FORM name="form1" method="post" action="example1.php">
Όνομα: <INPUT type="text" name="pedio_keimenou" value="Πληκτρολογήστε το όνομα σας εδώ" size="35" maxlength="33" />
<INPUT type="Submit" name="Submit" value="Αποστολή">
</FORM>

Για να εισάγουμε ένα Πεδίο Κειμένου χρησιμοποιούμε την ετικέτα <INPUT> ορίζοντας την τιμή text στην ιδιότητα type.

Η χρήση της ιδιότητας value σε αυτήν την περίπτωση εμφανίζει μέσα στο πλαίσιο κειμένου την τιμή της ιδιότητας. Μια άλλη ιδιότητα που μπορεί να πάρει η ετικέτα <INPUT> είναι η size η οποία καθορίζει τον αριθμό των ορατών χαρακτήρων που μπορεί να χωρέσει το Πεδίο Κειμένου. Η ιδιότητα maxlength καθορίζει τον αριθμό χαρακτήρων που μπορεί να πληκτρολογήσει ο επισκέπτης.

Την λεζάντα του πεδίου κειμένου (Όνομα) μπορούμε να την διαμορφώσουμε όπως εμείς θέλουμε προσθέτοντας HTML ετικέτες. Για παράδειγμα :

<FORM name="form1" method="post" action="example1.php">
<font size="2" color="blue" face="Tahoma">Όνομα:</font>
<INPUT type="text" name="pedio_keimenou" value="Πληκτρολογήστε το όνομα σας εδώ" size="35" maxlength="30" />
<INPUT type="Submit" name="Submit" value="Αποστολή" />
</FORM>

Πώς εισάγουμε ένα Πεδίο Password στην Φόρμα μας ;

<FORM name="form1" method="post" action="example1.php">
Password: <INPUT type="password" name="kodikos" size="20" maxlength="20" />
<INPUT type="Submit" name="Submit" value="Αποστολή" />
</FORM>

Πολλές φορές κατά την πλοήγηση μας στο Internet χρειάζεται να πληκτρολογήσουμε ένα Username και κάποιον κωδικό μέσα σε ένα πεδίο κειμένου για να εισέλθουμε σε κάποια ελεγχόμενη περιοχή, όπως Forums , Chats , Web emails κτλ. Όταν γράφουμε μέσα στην περιοχή κειμένου του Password εμφανίζονται ή αστεράκια ή βουλίτσες, ανάλογα τον browser που χρησιμοποιούμε.

Για να εισάγουμε στην δική μας Φόρμα ένα τέτοιο πεδίο στο οποίο όταν ο επισκέπτης της σελίδας μας πληκτρολογεί μέσα σε αυτό, να εμφανίζονται βουλίτσες ή αστεράκια απλά βάζουμε την τιμή password στην ιδιότητα type της ετικέτας <INPUT>. Η ιδιότητες size και maxlength μπορούν να χρησιμοποιηθούν όπως και στην περίπτωση του απλού Πεδίου ΚειμένουΠώς εισάγουμε Κουμπιά Επιλογών (radio buttons) στην Φόρμα μας ;

<FORM name="form1" method="post" action="example2.php">
Φύλο: <INPUT type="radio" name="sex" value="male" checked="checked" > Ανδρας &nbsp;&nbsp;
<INPUT type="radio" name="sex" value="female" /> Γυναίκα
<INPUT type="Submit" name="Submit" value="Αποστολή" />
</FORM>

Για να εισάγουμε κουμπιά επιλογής χρησιμοποιούμε την ετικέτα <INPUT> ορίζοντας την τιμή radio στην ιδιότητα type.

Η ιδιότητα name εκτός από το να δίνει ένα όνομα στα κουμπιά επιλογής, εδώ παίζει και τον ρόλο της ομαδοποίησης. Δηλαδή ομαδοποιεί τα κουμπιά επιλογής (ορίζοντας στην ιδιότητα name την ίδια τιμή) έτσι ώστε μόνο ένα από αυτά να μπορεί να επιλέγεται από τον χρήστη. Στο παράδειγμα της φόρμας συμπλήρωσης στοιχείων που βρίσκεται στην αρχή της ενότητας, αν στο Φύλο επιλέξουμε Γυναίκα τότε παύει να είναι επιλεγμένο το κουμπί που αναφέρετε στην επιλογή Ανδρας. Αν τα δύο αυτά κουμπιά επιλογής είχαν διαφορετική τιμή στην ιδιότητα name τότε η Φόρμα θα μας επέτρεπε να είχαμε και τις δύο επιλογές επιλεγμένες (Ανδρας, Γυναίκα).

Η διότητα value ορίζει την τιμή που θα στείλει η φόρμα στον Server αφού πατήσουμε το κουμπί αποστολής. Σύμφωνα με τον κώδικα HTML που βρίσκεται πιο πάνω, εάν ο επισκέπτης επιλέξει την επιλογή Ανδρας τότε στον Server θα σταλεί η τιμή "male" , ενώ αν επιλέξει Γυναίκα θα σταλεί η τιμή "female".

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

Πώς εισάγουμε Κουτιά Πολλαπλών Επιλογών (checkbox) στην Φόρμα μας ;

<FORM name="form1" method="post" action="example3.php">
<INPUT type="checkbox" name="sports" value="1" /> Αθλητισμός<br />
<INPUT type="checkbox" name="tv" value="1" /> Τηλεόραση<br />
<INPUT type="checkbox" name="travel" value="1" /> Ταξίδια<br />
<INPUT type="checkbox" name="movies" value="1" /> Κινηματογράφος
<INPUT type="Submit" name="Submit" value="Αποστολή" />
</FORM>

Για να εισάγουμε Κουτιά Πολλαπλών Επιλογών χρησιμοποιούμε την ετικέτα <INPUT> ορίζοντας την τιμή checkbox στην ιδιότητα type.

Όταν ένα κουτί επιλογής είναι τσεκαρισμένο τότε η τιμή του πεδίου που θα σταλεί στον Server ορίζεται από την ιδιότητα value. Σύμφωνα με τον πιο πάνω κώδικα, αν επιλέξουμε το κουτί επιλογών Ταξίδια τότε η τιμή του πεδίου με όνομα travel θα πάρει την τιμή 1. Όταν κάποιο από τα κουτιά δεν είναι τσεκαρισμένο τότε η τιμή του πεδίου θα είναι κενή, δηλαδή δεν θα περιέχει τίποτα.

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

Πώς εισάγουμε Περιοχή Κειμένου στην Φόρμα μας ;

<FORM name="form1" method="post" action="example4.php">
<textarea name="textarea2" cols="30" rows="3"></textarea>
<INPUT type="Submit" name="Submit" value="Αποστολή" />
</FORM>
Για να εισάγουμε Περιοχή Κειμένου στην Φόρμα μας χρησιμοποιούμε την ετικέτα <TEXTAREA>.

Η ιδιότητα cols ορίζει τον αριθμό των ορατών χαρακτήρων (αυτοί δηλαδή που φαίνονται χωρίς οριζόντιο scrolling) που θα χωράει κάθε γραμμή στην Περιοχή Κειμένου, ενώ η ιδιότητα rows ορίζει τον αριθμό των ορατών γραμμών (αυτές δηλαδή που φαίνονται χωρίς κάθετο scrolling) που θα έχει η Περιοχή Κειμένου. Η χρήση και των δύο αυτών ιδιοτήτων είναι απαραίτητη. Όταν ο επισκέπτης πατάει το Κουμπί Υποβολής της Φόρμας αυτό που θα σταλεί στον Server είναι ολόκληρο το κείμενο που πληκτρολόγησε στη Περιοχή κειμένου

Πώς εισάγουμε Λίστα Επιλογών στην Φόρμα μας ;

<FORM name="form1" method="post" action="example5.php">
<select name="countries">
<option value="GR" selected="selected" >Ελλάδα</option>
<option value="FR">Γαλλία</option>
<option value="ES">Ισπανία</option>
<option value="GE">Γερμανία</option>
<option value="IT">Ιταλία</option>
<option value="NE">Ολλανδία</option>
<option value="PO">Πορτογαλλία</option>
<option value="UK">Αγγλία</option>
</select>
</FORM>

Για να εισάγουμε Λίστα Επιλογών στην Φόρμα μας χρησιμοποιούμε την ετικέτα <SELECT>.

Η ετικέτα <OPTION> τοποθετείται μέσα στις ετικέτες <SELECT> και </SELECT> και αντιστοιχεί σε μια επιλογή της λίστας. Όσες επιλογές επιθυμούμε να περιλαμβάνει η Λίστα Επιλογών τόσες ετικέτες <OPTION> πρέπει να προσθέσουμε. Μεταξύ των ετικετών <OPTION> και </OPTION> γράφουμε το κείμενο που θέλουμε να εμφανίζεται στην λίστα (σύμφωνα με τον παραπάνω κώδικα το κείμενο της πρώτης επιλογής της Λίστας Επιλογών είναι Ελλάδα, το κείμενο της δεύτερης επιλογής είναι Γαλλία κ.ο.κ.).

Με την ιδιότητα value της <OPTION> ορίζουμε την τιμή που θα σταλεί στον Server (σύμφωνα με τον παραπάνω κώδικα αν ο επισκέπτης επιλέξει την επιλογή Ελλάδα και πατήσει το κουμπί αποστολής της φόρμας, τότε θα σταλεί στον Server η τιμή GR, ενώ αν επιλέξει την επιλογή Γαλλία θα σταλεί στον Server η τιμή FR κ.ο.κ.).

Η χρήση της ιδιότητας size της ετικέτας <SELECT> εμφανίζει την Λίστα Επιλογών σαν ένα πλαίσιο επιλογών με οριζόντια μπάρα ολίσθησης. Η ιδιότητα size παίρνει σαν τιμή της έναν αριθμό ο οποίος ορίζει τον αριθμό γραμμών που θα εμφανίζονται στο πλαίσιο επιλογών. Για παράδειγμα αν γράφαμε τον παραπάνω κώδικα με τον παρακάτω τρόπο:

<FORM name="form1" method="post" action="example5.php">
<select name="countries" size="3">
<option value="GR" selected="selected" >Ελλάδα</option>
<option value="FR">Γαλλία</option>
<option value="ES">Ισπανία</option>
<option value="GE">Γερμανία</option>
<option value="IT">Ιταλία</option>
<option value="NE">Ολλανδία</option>
<option value="PO">Πορτογαλλία</option>
<option value="UK">Αγγλία</option>
</select>
</FORM>

τότε θα είχαμε το παρακάτω αποτέλεσμα:

Όπως βλέπετε η άλλοτε Λίστα επιλογών εμφανίζεται τώρα σαν ένα πλαίσιο επιλογών στο οποίο φαίνονται οι τρεις πρώτες επιλογές, ενώ τις υπόλοιπες μπορούμε να τις δούμε πατώντας το κάτω βελάκι της μπάρας ολίσθησης. Αν θέλαμε να εμφανίσουμε όλες τις επιλογές χωρίς ο επισκέπτης να χρειάζεται να χρησιμοποιεί την μπάρα ολίσθησης για να τις δει τότε θα ορίζαμε ως τιμή στην ιδιότητα size τον αριθμό επιλογών που στην περίπτωση μας είναι 8

Σε ορισμένες περιπτώσεις επιθυμούμε ο επισκέπτης να έχει την δυνατότητα να επιλέξει παραπάνω από μια επιλογή. Για παράδειγμα στην παρακάτω λίστα έχοντας πατημένο το κουμπί Ctrl (Control) του πληκτρολογίου μας μπορούμε να επιλέξουμε με τον δείκτη του ποντικιού μας περισσότερες από μια επιλογές.

Για να έχουμε το παραπάνω πλαίσιο πολλαπλών επιλογών απλά προσθέτουμε την ιδιότητα multiple στην ετικέτα <SELECT>. Η ιδιότητα multiple δεν παίρνει τιμές.

<FORM name="form1" method="post" action="example5.php">
<select name="countries" size="8" multiple>
<option value="GR">Ελλάδα</option>
<option value="FR">Γαλλία</option>
<option value="ES">Ισπανία</option>
<option value="GE">Γερμανία</option>
<option value="IT">Ιταλία</option>
<option value="NE">Ολλανδία</option>
<option value="PO">Πορτογαλλία</option>
<option value="EN">Αγγλία</option>
</select>
<INPUT type="Submit" name="Submit" value="Αποστολή" />
</FORM>

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

Κρυφά πεδία της Φόρμας

<FORM name="form1" method="post" action="example1.php">
<INPUT type="hidden" name="married" value="1">
<INPUT type="Submit" name="Submit" value="Αποστολή" />
</FORM>

Για να εισάγουμε Κρυφά Πεδία στην φόρμα μας χρησιμοποιούμε την ετικέτα <INPUT> ορίζοντας την τιμή hidden στην ιδιότητα type.

Τα κρυφά πεδία δεν εμφανίζονται στον browser. Χρησιμοποιούμε κρυφά πεδία όταν θέλουμε να περάσουμε στο αρχείο script μια τιμή μαζί με τις υπόλοιπες τιμές που πληκτρολογεί ή επιλέγει ο επισκέπτης.

Για παράδειγμα ας φανταστούμε ότι έχουμε μια σελίδα η οποία περιέχει δύο Φόρμες η κάθε μια από τις οποίες ζητάει από τον επισκέπτη όνομα, επώνυμο και ηλικία. Την πρώτη Φόρμα την συμπληρώνουν όσοι είναι παντρεμένοι, ενώ την δεύτερη όσοι δεν είναι. Δείτε την σελίδα με τις δύο φόρμες

Παρακάτω παρουσιάζεται ο κώδικας της πρώτης Φόρμας:

<FORM name="married1" method="post" action="married.php">
<INPUT type="text" name="onoma" />
<INPUT type="text" name="eponimo" />
<INPUT type="text" name="ilikia" />
<INPUT type="hidden" name="married" value="1" />
<INPUT type="Submit" name="Submit" value="Αποστολή" />
</FORM>

και παρακάτω παρουσιάζεται ο κώδικας της δεύτερης Φόρμας:

<FORM name="married2" method="post" action="example1.php">
<INPUT type="text" name="onoma" />
<INPUT type="text" name="eponimo" />
<INPUT type="text" name="ilikia" />
<INPUT type="hidden" name="married" value="0" />
<INPUT type="Submit" name="Submit" value="Αποστολή" />
</FORM> Οι τιμές που θα πληκτρολογήσει ο επισκέπτης, αφού πατήσει το κουμπί αποστολής οποιασδήποτε από τις δύο Φόρμες, πηγαίνουν στο ίδιο script αφού και οι δύο φόρμες έχουν στην ιδιότητα action το ίδιο URL. Το script με την σειρά του παίρνει αυτές τις τιμές και κάνει κάποια ενέργεια ανάλογα αν τα στοιχεία προήλθαν από την πρώτη φόρμα οπότε έχουμε να κάνουμε με έναν παντρεμένο ή μια παντρεμένη, ή από την δεύτερη φόρμα οπότε έχουμε να κάνουμε με έναν ανύπαντρο ή μια ανύπαντρη. Τα τρία πεδία κειμένου και στις δύο φόρμες χρησιμοποιούν τα ίδια ονόματα στα πεδία τους (onoma, eponimo, ilikia).

Πως το script καταλαβαίνει από ποια από τις δύο Φόρμες προέρχονται τα δεδομένα; Με την χρήση ενός κρυφού πεδίου με όνομα married. Στην πρώτη Φόρμα το κρυφό πεδίο married έχει τιμή 0, οπότε αν ο επισκέπτης πατήσει το κουμπί αποστολής της πρώτης Φόρμας τότε θα σταλούν στο script τα στοιχεία που πληκτρολόγησε ο επισκέπτης μαζί με το κρυφό πεδίο married το οποίο θα έχει την τιμή 0. Ενώ αν ο επισκέπτης πατήσει το κουμπί της δεύτερης Φόρμας τότε θα σταλούν στο script τα στοιχεία που πληκτρολόγησε ο χρήστης μαζί με το κρυφό πεδίο married το οποίο έχει την τιμή 1. Με λίγα λόγια δηλαδή, το πεδίο married της Φόρμας, ανάλογα αν είναι 0 ή ένα, "λέει" στο script αν ο επισκέπτης που πληκτρολόγησε τα στοιχεία του είναι παντρεμένος ή όχι. Φυσικά αντί για 0 και 1 θα μπορούσαμε να είχαμε οποιαδήποτε τιμή αρκεί βέβαια να συμφωνεί με τον κώδικα του script.

Βέβαια είναι πλεονασμός και καθόλου λειτουργική λύση να χρησιμοποιούμε δύο Φόρμες για να στείλουμε στο script την πληροφορία της οικογενειακής κατάστασης του επισκέπτη. Αντί αυτό θα μπορούσαμε κάλλιστα να προσθέταμε στην πρώτη Φόρμα μια Λίστα Επιλογής με δύο επιλογές: Αγγαμος, Έγγαμος και με αυτό τον τρόπο πολύ απλά θα περνούσαμε την πληροφορία που θέλαμε στο Script. Ή ακόμα θα μπορούσαμε αντί της Λίστας Επιλογών να είχαμε Κουμπιά Επιλογών. Ο λόγος που γράφτηκε το παράδειγμα αυτό είναι μόνο για διδακτικό σκοπό ώστε να κατανοηθεί η χρήση των κρυφών πεδίων σε μια Φόρμα.

Το κουμπί Υποβολής της Φόρμας

<FORM name="form1" method="post" action="example.php">
<INPUT>
<INPUT>
<INPUT type="Submit" name="SubmitFrom" value="Αποστολή Στοιχείων" />
</FORM>

Το πάτημα του Κουμπιού Υποβολής της Φόρμας στέλνει στον Server τα δεδομένα που πληκτρολόγησε ο χρήστης. Για να εισάγουμε στην Φόρμα μας Κουμπί Υποβολής χρησιμοποιούμε την ετικέτα <INPUT> ορίζοντας την τιμή Submit στην ιδιότητα type. Η ιδιότητα value ορίζει το κείμενο στο Κουμπί Υποβολής.

Στο παράδειγμα της φόρμας συμπλήρωσης στοιχείων στην αρχή της σελίδας, το Κουμπί Υποβολής είναι το:

Η τοποθέτηση του Κουμπιού Υποβολής στην Φόρμα μας είναι προαιρετική. Σχεδόν όλες οι φόρμες έχουν Κουμπί Υποβολής. Αυτές που δεν έχουν η υποβολή της Φόρμας γίνετε με κώδικα script (συνήθως γραμμένο σε Javascript) που ενεργοποιείται μετά από ένα HTML γεγονός

Αποστολή στοιχείων στον Server (Μέθοδος GET και POST)

Η αποστολή των τιμών από την φόρμα του browser προς το αρχείο script του Server που θα τα επεξεργαστεί, γίνεται με βάση την ιδιότητα method (μέθοδος) της ετικέτας <FORM> η οποία μπορεί να πάρει τις τιμές get και post.

Στην περίπτωση χρήσης της μεθόδου GET κάθε όνομα ενός στοιχείου συνοδεύεται με την τιμή που πληκτρολόγησε ή επέλεξε ο επισκέπτης και αυτό το "πακέτο" (όνομα στοιχείου-τιμή στοιχείου) προστίθεται στο τέλος του URL που δείχνει η ιδιότητα action της ετικέτας <FORM>. Για παράδειγμα αν έχουμε τον παρακάτω κώδικα:

<FORM name="form1" method="get" action="http://www.mysite.gr/doityourself/get_example.php">
Όνομα: <INPUT type="text" name="onoma">
<INPUT type="Submit" name="Submit" value="Αποστολή" />
</FORM>

και ο επισκέπτης πληκτρολογήσει το όνομα Akis στο πεδίο κειμένου με όνομα onoma και έπειτα πατήσει το κουμπί Submit, τότε το URL που θα ανοίξει ο browser θα είναι το: http://www.mysite.gr/doityourself/get_example.php?onoma=Dimitris&Submit=Submit

Στο τέλος του URL μπαίνει ένα λατινικό ερωτηματικό και στην συνέχεια ακολουθεί το όνομα του στοιχείου την φόρμας, που στην προκειμένη περίπτωση είναι onoma , ακολουθεί το σύμβολο = (ίσον) και αμέσως μετά η τιμή που πληκτρολόγησε ο επισκέπτης. Στην περίπτωση αυτή η Φόρμα στέλνει δύο ονόματα στοιχείων ( onoma και Submit ) μαζί με τις τιμές τους (value) στον Server. Όταν υπάρχουν περισσότερα από ένα πεδία στην Φόρμα, όπως στην περίπτωση αυτή, τότε τα "πακέτα" τιμών στο URL χωρίζονται με το σύμβολο &.

Στο παρακάτω παράδειγμα η Φόρμα θα στείλει 3 "πακέτα" τιμών (onoma, eponimo και Submit).

<FORM name="form1" method="get" action="http://www.mysite.gr/doityourself/get_example.php">
Όνομα: <INPUT type="text" name="onoma" />
Επώνυμο:<INPUT type="text" name="eponimo" />
<INPUT type="Submit" name="Submit" value="Αποστολή" />
</FORM>

Αν ο επισκέπτης πληκτρολογήσει όνομα και επίθετο και έπειτα πατήσει το Submit Button , τότε το URL που θα ανοίξει ο browser θα είναι το:

http://www.mysite.gr/doityourself/get_example.php?onoma=Dimitris&eponimo=Kargiofyllis&Submit=Submit

Ο Server αποθηκεύει όλη την συμβολοσειρά του URL μετά το λατινικό ερωτηματικό ( ? ) στην μεταβλητή περιβάλλοντος QUERY_STRING . Έπειτα η συμβολοσειρά αυτή περνάει μέσα στο script το οποίο με προγραμματιστικό κώδικα διαχωρίζει τα πακέτα τιμών (όνομα_στοιχείο=τιμή) μεταξύ τους.

Στην Φόρμα αυτή συμπληρώστε τα στοιχεία που ζητάει και πατήστε το Submit Button. Προσέξτε το URL της σελίδας που θα ανοίξει.

Η μέθοδο POST κάνει το ίδιο πράγμα με την μέθοδο GET , με την διαφορά ότι στέλνει τα δεδομένα της φόρμας σε ξεχωριστή ροή δεδομένων (data stream) και όχι μαζί με το URL όπως με την μέθοδο GET. Ο Server δέχεται τα δεδομένα αυτά και τα αποθηκεύει σε ένα προσωρινό αρχείο και έπειτα τα περνάει μέσα στο script για να τα επεξεργαστεί. Ορισμένοι Server αντί να αποθηκεύουν τα δεδομένα σε κάποιο αρχείο χρησιμοποιούν για την είσοδο των δεδομένων την standard είσοδο (standard input).

Η Φόρμα αυτή χρησιμοποιεί την μέθοδο POST. Συμπληρώστε τα στοιχεία που ζητάει και πατήστε το Submit Button. Έπειτα παρατηρήστε το URL της σελίδας που ανοίγει ο browser μετά το πάτημα του κουμπιού. Στην περίπτωση αυτή δεν υπάρχει το λατινικό ερωτηματικό ακολουθούμενο από τα δεδομένα της Φόρμας όπως γίνεται με την μέθοδο GET.

Αν έχουμε στην Φόρμα μας πολλά στοιχεία τότε η καταλληλότερη μέθοδος για να χρησιμοποιήσουμε είναι η POST , καθώς με την μέθοδο GET όλα τα δεδομένα αποθηκεύονται στην μεταβλητή περιβάλλοντος QUERY_STRING η οποία μπορεί σε μερικούς Servers να έχει όριο όσον αφορά στον όγκο αποθήκευσης (συνήθως οι πληροφορίες που μας δίνουν οι εταιρίες οι οποίες φιλοξενούν το site μας στον Server τους, δεν φτάνουν σε τέτοιο βάθος, έτσι σπάνια γνωρίζουμε τον όγκο της πληροφορίας που μπορούν να αποθηκευτούν στις μεταβλητές περιβάλλοντος του Server ) . Αντίθετα με την μέθοδο POST μπορούμε να έχουμε οσαδήποτε στοιχεία στην Φόρμα μας χωρίς να ανησυχούμε για το όριο της χωρητικότητας αποθήκευσης της μεταβλητής περιβάλλοντος QUERY_STRING.

Ένας άλλος λόγος (και πολύ πιο σημαντικός) για να χρησιμοποιούμε την μέθοδο POST αντί της GET είναι το γεγονός ότι η μέθοδος GET δεν συνιστάται από το τελευταίο επίσημο πρότυπο της HTML

Το κουμπί Καθαρισμού της Φόρμας

<FORM name="form1" method="post" action="example.php">
<INPUT>
<INPUT>
<INPUT type="Reset" name="Reset" value="Καθαρισμός Φόρμας" />
</FORM>

Το πάτημα του Κουμπιού Καθαρισμού της Φόρμας καθαρίζεί όλα τα πεδία της Φόρμας από τα δεδομένα που πληκτρολόγησε ή επέλεξε ο επισκέπτης. Για να εισάγουμε στην Φόρμα μας Κουμπί Υποβολής χρησιμοποιούμε την ετικέτα <INPUT> ορίζοντας την τιμή Reset στην ιδιότητα type.Πώς εισάγουμε Κουμπί (Button) στην Φόρμα μας

<FORM name="form1" method="post" action="example.php">
<input type="button" name="koumpi" value="Υπολογισμός Αθροίσματος" onClick="function()" />
</FORM>

Εκτός από τα δύο ειδικά κουμπιά της Φόρμας (κουμπί Υποβολής και κουμπί Καθαρισμού Φόρμας), έχουμε την δυνατότητα να εισάγουμε απλά κουμπιά χρησιμοποιώντας την ετικέτα <INPUT> και ορίζοντας την τιμή button στην ιδιότητα type. Η ιδιότητα value ορίζει το κείμενο του κουμπιού.

Ο μόνος λόγος χρήσης απλών κουμπιών είναι η εκτέλεση ενός script (συνήθως σε Javascript). Στην ετικέτα <INPUT> προσθέτουμε ένα HTML γεγονός (onclick, ondblclick, onkeypress, onkeydown, onkeyup), για να εκτελέσεί μια λειτουργία ενός script

13. ΠΙΟ ΕΙΔΙΚΕΥΜΕΝΕΣ ΕΤΙΚΕΤΕΣ

Η ετικέτα <small>

Η ετικέτα <small> εμφανίζει το κείμενο με μικρούς χαρακτήρες.

<small>Αυτό το κείμενο είναι μικρότερο σε μέγεθος από το κανονικό</small>

Η ετικέτες <sub> και <sup>

Η ετικέτα <sub> τοποθετεί το κείμενο σαν μαθηματική βάση, δηλαδή σε χαμηλότερο σημείο απ' ότι βρίσκεται το υπόλοιπο κείμενο.

_{Αυτό το κείμενο είναι βάση}

Η ετικέτα <sup> τοποθετεί το κείμενο σαν μαθηματικό εκθέτη, δηλαδή σε ψηλότερο σημείο απ' ότι βρίσκεται το υπόλοιπο κείμενο.

^{Αυτό το κείμενο είναι εκθέτης}

Η ετικέτα <addreess>

Την ετικέτα <address> την χρησιμοποιούμε κυρίως για να γράψουμε ταχυδρομικές διευθύνσεις. Το κείμενο που βρίσκεται ανάμεσα στην ετικέτα αρχής και την ετικέτα τέλους γράφεται με πλάγιους χαρακτήρες.

<address>
Δημήτριος Δημητρίου<br />
Τ.Θ. 12345<br />
Καστοριά<br />
Ελλάδα
</address>

Γραμματοσειρές υπολογιστών

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

Η ετικέτα <code> εμφανίζει το κείμενο έτσι ώστε να μοιάζει με κώδικα μιας γλώσσας προγραμματισμού.

<code>Αυτό το κείμενο είναι κώδικας</code>

Την ετικέτα <var> την χρησιμοποιούμε για να εμφανίσουμε μια μεταβλητή του κώδικα μιας γλώσσας προγραμματισμού

<var>Αυτό το κείμενο είναι μεταβλητή</var>

H ετικέτα <tt> εμφανίζει το κείμενο σαν κείμενο από τηλέτυπο

<tt>Αυτό το κείμενο είναι κείμενο τηλετύπου</tt>

14. ΕΥΡΕΤΗΡΙΟ HTML ΕΤΙΚΕΤΩΝ

<!-->
Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα. Δεν εμφανίζονται στην οθόνη του browser. Ένας λόγος για να χρησιμοποιήσουμε σχόλια μέσα σε ένα html αρχείο είναι να γράψουμε την ημερομηνία που δημιουργήσαμε το αρχείο. Ένα σχόλιο αρχίζει με το <!-- και τελειώνει με το -->

<!DOCTYPE>
Η ετικέτα <!DOCTYPE> είναι η πρώτη ετικέτα που μπορείτε να χρησιμοποιήσετε στο έγγραφο σας και γράφεται πριν την ετικέτα <HTML> . Η <!DOCTYPE> λέει στον browser ποιο πρότυπο της HTML ή της XML θα χρησιμοποιήσετε στο έγγραφο.

<a>
Η κύρια χρήση της ετικέτας <a> είναι η δημιουργία συνδέσμου (Link) προς ένα άλλο έγγραφο χρησιμοποιώντας την ιδιότητα href. Μπορούμε επίσης να δημιουργήσουμε δεσμό στην σελίδα μας (όπως είναι ο σελιδοδείκτηw για το βιβλίο) χρησιμοποιώντας την ιδιότητα name ή id. Ετικέτα τέλους: </a>

<abbr>
Η ετικέτα αυτή υποδεικνύει μια συντόμευση, όπως "etc.", "GR", "St.". Χρησιμοποιώντας την ετικέτα <abbr> για να χαρακτηρίσουμε μια λέξη σαν συντόμευση, δίνουμε χρήσιμες πληροφορίες στον browser, στις μηχανές αναζήτησης, σε κάποιο πρόγραμμα ελέγχου ορθογραφίας, ή σε ένα πρόγραμμα μετάφρασης. Στους περισσότερους browsers, όταν αφήνουμε για λίγο τον δείκτη του ποντικιού μας επάνω στην συντόμευση, εμφανίζεται το περιεχόμενο της ιδιότητας title. Ετικέτα τέλους: </abbr>

<acronym>
Η ετικέτα <acronym> οριζει ένα ακρώνυμο, όπως "Ο.Τ.Ε.", "Δ.Ε.Η.". Χρησιμοποιώντας την ετικέτα <acronym> για να χαρακτηρίσουμε μια λέξη σαν ένα ακρώνυμο, δίνουμε χρήσιμες πληροφορίες στον browser, στις μηχανές αναζήτησης, σε κάποιο πρόγραμμα ελέγχου ορθογραφίας, ή σε ένα πρόγραμμα μετάφρασης. Στους περισσότερους browsers, όταν αφήνουμε για λίγο τον δείκτη του ποντικιού μας επάνω στο ακρώνυμο εμφανίζεται το περιεχόμενο της ιδιότητας title. Ετικέτα τέλους: </acronym>

<address>
Με την ετικέτα <address> ορίζουμε μια ειδική μορφή εμφάνισης. Συνήθως την χρησιμοποιούμε όταν θέλουμε να γράψουμε διευθύνσεις, υπογραφές, πληροφορίες σχετικά με τον συγγραφέα. Συνήθως το κείμενο που είναι γραμμένο μέσα στις ετικέτες <address> και </address> , εμφανίζεται με πλάγιους χαρακτήρες (italics). Οι περισσότεροι browsers αφήνουν κενή γραμμή πριν και μετά το κείμενο που βρίσκεται ανάμεσα στην ετικέτα αρχής και την ετικέτα τέλους. Ετικέτα τέλους: </address>

<applet>
Η ετικέτα <applet> εισάγει μια εφαρμογή Java. Ετικέτα τέλους: </applet>

<area>
Η ετικέτα <area> ορίζει μια περιοχή μέσα σε μια εικόνα ως link. Η ετικέτα <area> τοποθετείται πάντα μέσα στις ετικέτες <map> και </map>

Για να ορίσουμε μια περιοχή μέσα σε μια εικόνα ως link, χρησιμοποιούμε την ιδιότητα usemap της ετικέτας <img> , η οποία αναφέρεται στην ιδιότητα id ή name της ετικέτας <map> . <b>
<b> εμφανίζει το κείμενο με έντονη μορφή. Το b είναι το πρώτο γράμμα από την λέξη bold. Ετικέτα τέλους: </b>

<base>
Με την ετικέτα <base> ορίζουμε το url ενός φακέλου αρχείων ο οποίος αποτελεί την βάση για όλα τα url μέσα στην σελίδα. Η ετικέτα αυτή γράφεται μέσα στην ενότητα <HEAD> του HTML εγγράφου.

<basefont>
Η ετικέτα <basefont> ορίζει έναν αριθμό βάση του οποίου θα καθορίζουμε το μέγεθος του κείμενου μέσα στο HTML έγγραφο με την ετικέτα <font> . Μπορούμε να την τοποθετούμε είτε στην ενότητα <HEAD> είτε στην ενότητα <BODY> .

<bdo>
Η ετικέτα <bdo> χρησιμοποιείται για να αλλάξουμε την κατεύθυνση του κειμένου. Δύο είναι οι κατευθύνσεις του κειμένου. Η default κατεύθυνση είναι η Left-To-Right, οπότε προσθέτουμε αυτήν την ετικέτα μόνο αν θέλουμε να χρησιμοποιήσουμε την κατεύθυνση Right-To-Left. Ετικέτα τέλους: </bdo>

<big>
Η ετικέτα <big> εμφανίζει το κείμενο με ελαφρώς μεγαλύτερα γράμματα.
Ετικέτα τέλους: </big>

<blockquote>
Η ετικέτα <blockquote> εμφανίζει το κείμενο αρχίζοντας από δεξιότερη εσοχή απ ότι το υπόλοιπο κείμενο. Ετικέτα τέλους: </blockquote>

<body>
Η ετικέτα <body> ορίζει το κυρίως περιεχόμενο της HTML σελίδας μέσα στο οποίο γράφουμε το κείμενο που θέλουμε να εμφανιστεί μαζί με τις HTML ετικέτες που το μορφοποιούν. Στην ενότητα αυτή τοποθετούμε επίσης εικόνες, video και ότι άλλο θέλουμε να εμφανιστεί στην σελίδα Ετικέτα τέλους: </body>

<br />

Χρησιμοποιούμε την ετικέτα <br /> όταν θέλουμε να τελειώσουμε μια γραμμή κειμένου και να αρχίσουμε μια καινούργια.

<button>
Με την ετικέτα αυτή εισάγουμε ένα κουμπί στην σελίδα μας. Μέσα στις ετικέτες <button> και </button> μπορούμε να προσθέσουμε περιεχόμενο, όπως κείμενο ή εικόνες. Αυτή είναι η διαφορά με το κουμπί που δημιουργείται με την ετικέτα <input> Ετικέτα τέλους: </button>

<caption>
Με την ετικέτα αυτή τοποθετούμε λεζάντα στον πίνακα μας. Η ετικέτα <caption> τοποθετείται αμέσως μετά την ετικέτα <table> . Μπορούμε να ορίσουμε μόνο μια λεζάντα σε κάθε πίνακα Η λεζάντα τοποθετείται επάνω από τον πίνακα με στοίχιση στο κέντρο Ετικέτα τέλους: </caption>

<center>
Η ετικέτα <center> εμφανίζει το κείμενο με στοίχιση στο κέντρο της οθόνης
Ετικέτα τέλους: </center>
<code>
<code> εμφανίζει το κείμενο έτσι ώστε να μοιάζει με κώδικα μιας γλώσσας προγραμματισμού.
Ετικέτα τέλους: </code>
<col>
Η ετικέτα <col> ορίζει της ιδιότητες μιας στήλης ενός πίνακα. Μπορούμε να χρησιμοποιήσουμε αυτήν την ετικέτα μόνο μέσα στην ετικέτα <table> ...</table> . Η ετικέτα <col> περιέχει μόνο ιδιότητες (ανάμεσα στην ετικέτα αρχής και την ετικέτα τέλους δεν γράφεται τίποτα)
Ετικέτα τέλους: </col>
<colgroup>
Η ετικέτα <colgroup> ορίζει μια ομάδα στηλών του πίνακα που έχουν τις ίδιες τιμές στις ιδιότητες τους. Μπορούμε να χρησιμοποιήσουμε αυτήν την ετικέτα μόνο μέσα στην ετικέτα <table> ...</table> .
Ετικέτα τέλους: </colgroup>
<del>
Η ετικέτα <del> εμφανίζει το κείμενο διαγραμμένο, δηλαδή με μια γραμμή επάνω από το κείμενο
Ετικέτα τέλους: </del>
<dfn>
<dfn> υποδηλώνει έναν όρο
Ετικέτα τέλους: </dfn>
<dir>
Με την ετικέτα <dir> δημιουργούμε λίστα
Ετικέτα τέλους: </dir>
<div>
Η ετικέτα <div> ορίζει ένα τμήμα στο HTML έγγραφο. Ένα τμήμα ομαδοποιεί τα περιεχόμενα που είναι μέσα στις ετικέτες <div> ...</div> ώστε να μπορούμε να ορίζουμε ένα ενιαίο στυλ (χρώμα, γραμματοσειρά, στοίχιση) με την ιδιότητα style. Συνήθως πριν και μετά το τμήμα div ο browser αφήνει μια γραμμή κενή
Ετικέτα τέλους: </div>
<dl>
Η ετικέτα <dl> εισάγει μια λίστα ορισμών στην σελίδα μας, Το dl είναι τα δύο πρώτα γράμματα από το Definition List.
Ετικέτα τέλους: </dl>
<dt>
Η ετικέτα <dt> ορίζει την γραμμή που περιέχει τον όρο σε μια λίστα ορισμών
Ετικέτα τέλους: </dt>
<em>
<em> εμφανίζει το κείμενο με πλάγιους και κάπως αχνά γραμμένους χαρακτήρες
Ετικέτα τέλους: </em>
<fieldset>
Η ετικέτα <fieldset> δημιουργεί ένα πλαίσιο γύρο από τα περιεχόμενα που βρίσκονται μεταξύ της ετικέτας αρχής και τέλους
Ετικέτα τέλους: </fieldset>
<font>
Η ετικέτα <font> ορίζει το μέγεθος, την γραμματοσειρά και το χρώμα του κειμένου.
Eίναι καλό να αποφεύγουμε την χρήση της, σύμφωνα με το πρωτότυπο της HTML. Είναι προτιμότερο να χρησιμοποιούμε στυλ (styles) αντί για την ετικέτα <font>
Ετικέτα τέλους: </font>
<form>
Με την ετικέτα <form> εισάγουμε φόρμες στην σελίδα μας. Μια φόρμα δίνει την δυνατότητα στον χρήστη να στείλει δεδομένα στον server
Ετικέτα τέλους: </form>
<frame>
Με την ετικέτα <frame> εισάγουμε Πλαίσια (frames) στο έγγραφο μας. Η ετικέτα τοποθετείται μέσα στις ετικέτες <frameset> ...</frameset>
Ετικέτα τέλους: </frame>
<frameset>
Η ετικέτα <frameset> εισάγει στην σελίδα μας ένα σετ Πλαισίων. Χρησιμοποιείται για να οργανώνει πολλαπλά Πλαίσια τα οποία κάθε ένα από αυτά είναι ένα ξεχωριστό HTML έγγραφο
Ετικέτα τέλους: </frameset>
<h1 ... h6>
Οι HTML επικεφαλίδες είναι κείμενο που εμφανίζετε με μεγάλα γράμματα. Οι επικεφαλίδες ορίζονται από τις ετικέτες <h1> , <h2> , <h3> , <h4> , <h5> και <h6> . Με την <h1> ορίζουμε την μεγαλύτερη ετικέτα ενώ με την <h6> την μικρότερη.
Ετικέτες τέλους: </h1> , </h2> , </h3> , </h4> , </h5> , </h6>
<head>
H ετικέτα <head> ορίζει την κεφαλή της σελίδας. Μέσα στην κεφαλή μπορούμε να προσθέσουμε ετικέτες που παρέχουν πληροφορίες στον browser για την HTML σελίδα, όπως τίτλος σελίδας, συγγραφέας, ημερομηνία δημιουργίας κ.α. Οι παρακάτω ετικέτες τοποθετούνται στην κεφαλή: <base> , <link> , <meta> , <script> , <style> , and <title> . Ο browser δεν εμφανίζει στην οθόνη ότι είναι γραμμένο μέσα στην κεφαλή
Ετικέτα τέλους: </head>
<hr>
Με την ετικέτα <hr> τοποθετούμε μια οριζόντια γραμμή στην σελίδα μας. Η οριζόντια γραμμή είναι ένα απλό γραφικό που μπορούμε να χρησιμοποιήσουμε στην σελίδα μας (κυρίως σαν διαχωριστικό). <html>
Ένα αρχείο HTML αρχίζει πάντα με την ετικέτα <html>
Ετικέτες τέλους: </html>
<i>
<i> εμφανίζει το κείμενο με πλάγιους χαρακτήρες. Το i είναι το πρώτο γράμμα από την λέξη italics
Ετικέτες τέλους: </i>
<iframe>
Με την ετικέτα <iframe> εισάγουμε στο έγγραφο μας ένα ένθετο παράθυρο στο οποίο παρουσιάζεται ένα άλλο HTML έγγραφο
Ετικέτες τέλους: </iframe>
<img>
Με την ετικέτα <img> εισάγουμε μια εικόνα στην σελίδα μας<input>
Με την ετικέτα <input> εισάγουμε ένα πεδίο φόρμας στο οποίο ο χρήστης μπορεί να πληκτρολογήσει δεδομένα<ins>
Η ετικέτα <ins> ορίζει ένα κείμενο σαν προστιθέμενο και το εμφανίζει υπογραμμισμένο
Ετικέτα τέλους: </ins>
<kbd>
Η ετικέτα <kbd> υποδικνύει το κείμενο που πρέπει να πληκτρολογίσει ο χρήστης
Ετικέτα τέλους: </kbd>
<label>
Η ετικέτα <label> ορίζει ένα κείμενο για έναν μηχανισμό μιας φόρμας (πχ. ένα κουμπί επιλογής). Αν πατήσουμε μέσα σε αυτό το κείμενο θα ενεργοποιηθεί αυτός ο μηχανισμός. Η ιδιότητα for της ετικέτας αναφέρεται στο id του μηχανισμού
Ετικέτα τέλους: </label>
<legend>
Η ετικέτα <legend> ορίζει μια λεζάντα για ένα στοιχείο fieldset
Ετικέτα τέλους: </legend>
<li>
Με την ετικέτα <li> προσθέτουμε γραμμές σε μια λίστα
Ετικέτα τέλους: </li>
<link>
Με την ετικέτα <link> ορίζουμε την σχέση μεταξύ του τρέχον εγγράφου με ένα εξωτερικό αρχείο φύλλου στυλ. Με αυτόν τον τρόπο μπορούμε να καθορίσουμε ένα ενιαίο στυλ για πολλαπλά HTML έγγραφα.
Η ετικέτα αυτή γράφεται μέσα στην ενότητα <HEAD>
<map>
Η ετικέτα <map> ορίζει τις περιοχές επάνω σε μια εικόνα που θα είναι σύνδεσμοι (links)
Ετικέτα τέλους: </map>
<menu>
Με την ετικέτα <menu> προσθέτουμε μενού στην σελίδα μας. Η χρήση της ετικέτας αυτής δεν συνιστάται από το πρότυπο της HTML. Γι αυτό καλύτερα να την αποφεύγουμε στις σελίδες που σχεδιάζουμε. Μάθε πώς να εισάγεις Λίστες στην σελίδα σου
Ετικέτα τέλους: </menu>
<meta>
Η ετικέτα <meta> περιέχει μετα-πληροφορίες (meta-information) για το HTML έγγραφο όπως ο συγγραφέας, η περιγραφή του εγγράφου, λέξεις κλειδιά που διαβάζονται από τις μηχανές αναζήτησης κτλ. Η ετικέτα αυτή γράφεται μέσα στην ενότητα <HEAD>
<noframes>
Με την ετικέτα <noframes> εμφανίζουμε κείμενο όταν ο browser του χρήστη δεν υποστηρίζει πλαίσια (frames). Συνήθως τα περιεχόμενα που γράφονται μέσα στις ετικέτες <noframes> ...</noframes> είναι η σελίδα μας χωρίς την χρήση πλαισίων. Μερικοί άλλοι web designers απλά τοποθετούν ένα απλό κείμενο που ενημερώνει τον χρήστη ότι ο browser που χρησιμοποιεί δεν υποστηρίζει πλαίσια και γι αυτό δεν μπορεί να δει την σελίδα.
Ετικέτα τέλους: </noframes>

<noscript>
Με την ετικέτα <noscript> εμφανίζουμε κείμενο όταν ο browser του χρήστη δεν υποστηρίζει scripts (Javascripts, VBscripts κτλ.).
Ετικέτα τέλους: </noscript>
<object>
Η ετικέτα <object> ορίζει ένα εσωτερικό αντικείμενο. Χρησιμοποιούμε την ετικέτα αυτή για να εισάγουμε πολυμέσα στην HTML σελίδα μας. Το κείμενο μεταξύ της ετικέτας αρχής και τέλους εμφανίζεται όταν o browser του χρήστη δεν υποστηρίζει την ετικέτα <object>
Ετικέτα τέλους: </object>
<ol>
Η ετικέτα <ol> εισάγει μια αριθμημένη λίστα στην σελίδα μας. Το ol είναι τα δύο πρώτα γράμματα από το Ordered List.
Ετικέτα τέλους: </ol>
<optgroup>
Η ετικέτα <optgroup> ομαδοποιεί επιλογές στις λίστες επιλογών
Ετικέτα τέλους: </optgroup>
<option>
Η ετικέτα <option> τοποθετείται μέσα στις ετικέτες <select> και </select> και αντιστοιχεί σε μια επιλογή της λίστας.
Ετικέτα τέλους: </option>
<p>
Η ετικέτα <p> ομαδοποιεί το κείμενο σε μια παράγραφο, αφήνοντας αυτόματα μια κενή γραμμή πριν την αρχή της παραγράφου και μια μετα το τέλος αυτής.
Ετικέτα τέλους: </p>
<param>
Με την ετικέτα <param> θέτουμε τιμές για ένα αντικείμενο (object). Η ετικέτα αυτή γράφεται πάντα μεσα στις ετικέτες <object> και </object> .<pre>
Η ετικέτα <pre> εμφανίζει το κείμενο σαν προ-μορφοποιημένο. Δηλαδή το κείμενο μαζί με τις κενές γραμμές τα κενά μεταξύ των λέξεων που γράφουμε μέσα στις ετικέτες <pre> και </pre> θα εμφανιστούν ακριβώς όπως τα γράψαμε
Ετικέτα τέλους: </pre>
<q>
Η ετικέτα <q> ορίζει το κείμενο σαν σύντομο απόσπασμα (quote) χωρίς όμως να αλλάζει παράγραφό όπως γίνεται με την ετικέτα <quote> . Το αυτό κείμενο γράφεται μέσα σε εισαγωγικά
Ετικέτα τέλους: </q>
<s>
Η ετικέτες <s> εμφανίζουν το κείμενο σαν διαγραμμένο. Σύμφωνα με το πρότυπο της HTML την ετικέτα αυτή είναι καλό να την αποφεύγουμε
Ετικέτες τέλους: </s>
<samp>
Η ετικέτα <samp> Προσδιορίζει το αποτέλεσμα ενός κώδικα
Ετικέτες τέλους: </samp>
<script>
Η ετικέτα <script> εισάγει στην σελίδα μας κώδικα script
Ετικέτα τέλους: </script>
<select>
Με την ετικέτα <select> εισάγουμε Λίστες Επιλογών στην σελίδα μας
Ετικέτα τέλους: </select>
<script>
Η ετικέτα <script> εισάγει στην σελίδα μας κώδικα script
Ετικέτα τέλους: </script>
<small>
Η ετικέτα <small> εμφανίζει το κείμενο με μικρούς χαρακτήρες
Ετικέτα τέλους: </small>
<span>
Με την ετικέτα <span> ομαδοποιούμε κείμενο για να ορίσουμε κοινό στυλ
Ετικέτα τέλους: </span>
<strike>
Η ετικέτες <strike> εμφανίζουν το κείμενο σαν διαγραμμένο. Σύμφωνα με το πρότυπο της HTML την ετικέτα αυτή είναι καλό να την αποφεύγουμε
Ετικέτες τέλους: </strike>
<strong>
Η ετικέτα <strong> εμφανίζει το κείμενο με έντονη μορφή.
Ετικέτες τέλους: </strong>
<style>
Η ετικέτα <style> ορίζει ένα στυλ για την σελίδα μας. Η ετικέτα αυτή γράφεται μέσα στην ενότητα <HEAD>
Ετικέτα τέλους: </style>
<sub>
Η ετικέτα _{τοποθετεί το κείμενο σαν μαθηματική βάση, δηλαδή σε χαμηλότερο σημείο απ ότι βρίσκεται το υπόλοιπο κείμενο.
Ετικέτες τέλους:}
<sup>
Η ετικέτα ^{τοποθετεί το κείμενο σαν μαθηματικό εκθέτη, δηλαδή σε ψηλότερο σημείο απ ότι βρίσκεται το υπόλοιπο κείμενο.
Ετικέτες τέλους:}
<table>
Με την ετικέτα <table> εισάγουμε έναν πίνακα στην σελίδα μας.
Ετικέτα τέλους: </table>
<tbody>
Με την ετικέτα <tbody> ορίζουμε τις γραμμές που βρίσκονται μέσα στις ετικέτες <tbody> και </tbody> ως το κυρίως περιεχόμενο του πίνακα.
Ετικέτα τέλους: </tbody>
<td>
Με την ετικέτα <td> ορίζουμε ένα κελί στην γραμμή ενός πίνακα
Ετικέτα τέλους: </td>
<textarea>
Με την ετικέτα <textarea> εισάγουμε Περιοχή Κειμένου στην Φόρμα μας
Ετικέτα τέλους: </textarea>
<tfoot>
Με την ετικέτα <tfoot> ορίζουμε τις γραμμές που βρίσκονται μέσα στις ετικέτες <tfoot> και </tfoot> ως το υποσέλιδο του πίνακα.
Ετικέτα τέλους: </tfoot>
<th>
Με την ετικέτα <th> ορίζουμε επικεφαλίδες στον πίνακα σε ένα πίνακα. Το κείμενο που βρίσκετε μέσα στις ετικέτες <th> και </th> εμφανίζεται με bold χαρακτήρες
Ετικέτα τέλους: </th>
<thead>
Με την ετικέτα <thead> ορίζουμε τις γραμμές που βρίσκονται μέσα στις ετικέτες <thead> και </thead> ως επικεφαλίδες του πίνακα.
Ετικέτα τέλους: </thead>
<title>
Η ετικέτα <title> ορίζει τον τίτλο μιας HTML Σελίδας. Η ετικέτα αυτή τοποθετήτε στην ενότητα HEAD
Ετικέτα τέλους: </title>
<tr>
Το ζεύγος των ετικετών <tr> ...</tr> ορίζει μια γραμμή του πίνακα. Μια γραμμή του πίνακα περιέχει πολλά κελιά
Ετικέτα τέλους: </tr>
<tt>
Η ετικέτα <tt> εμφανίζει το κείμενο σαν κείμενο από τηλέτυπο
Ετικέτα τέλους: </tt>
<u>
Η ετικέτα <u> εμφανίζει το κείμενο υπογραμμισμένο. Eίναι προτιμότερο να αποφεύγουμε την χρήση της, σύμφωνα με το πρωτότυπο της HTML
Ετικέτα τέλους: </u>
<ul>
Η ετικέτα <ul> εισάγει μια μη αριθμημένη Λίστα στην σελίδα μας
Ετικέτα τέλους: </ul>
<var>
Η ετικέτα <var> μια μεταβλητή του κώδικα μιας γλώσσας προγραμματισμού
Ετικέτα τέλους: </var>

Posted in: SOFTWARE