HTML τι είναι ; |HTML Εγχειρίδιο 

 

Οδηγός HTML για αρχάριους

 

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

Ακριβώς αυτό το θέμα εξετάζεται στον παρόντα οδηγό, που συντάχθηκε στα πλαίσια του προγράμματος σπουδών web design MicroMaster in Web Design και Development του Πανεπιστημίου Αιγαίου και του Εργαστηρίου ΤΠΕ Ήρων, με την υποστήριξη της εταιρείας web design – κατασκευής ιστοσελίδων dreamweaver.gr. Ο στόχος είναι να παρέχει μια λεπτομερή, ενδελεχή, αλλά και προσβάσιμη εισαγωγή στην HTML για όσους ενδιαφέρονται να αποκτήσουν μια σταθερή βάση γνώσεων στον τομέα αυτό.

Αν το ερώτημα “HTML τι είναι;” είναι ανάμεσα στις απορίες σας τότε διαβάζετε το κατάλληλο άρθρο για να σας απαντήσει σε αυτό. Η HTML (HyperText Markup Language) είναι η βασική γλώσσα σήμανσης που χρησιμοποιείται για τη δημιουργία ιστοσελίδων. Χρησιμοποιώντας συγκεκριμένους κώδικες, γνωστούς ως ετικέτες ή tags, οι σχεδιαστές και οι προγραμματιστές μπορούν να διαμορφώσουν το κείμενο, να ενσωματώσουν εικόνες, συνδέσμους και άλλα στοιχεία σε μια ιστοσελίδα.

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

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

 

1.    Ξεκινώντας: Τι πρέπει να κάνετε για να ξεκινήσετε και να φτιάξετε την πρώτη σας σελίδα HTML

• Τι είναι η HTML;
• Γιατί να μάθετε HTML;
• Τι πρέπει να γνωρίζετε για την HTML για να ξεκινήσετε

2.   Tags, attributes και elements

• Ποια είναι η διαφορά;
• Στοιχεία HTML
• Tips
• Attributes

3.   Titles. Titles. Paragraphs.

• Η ετικέτα title
• Titles
• Paragraphs
• Unordered, ordered, ορισμός και Nested λίστες
• Unordered λίστες
• Tag λίστες
• Nested λίστες

4. Πώς να δημιουργείτε links προς άλλες σελίδες και αλλού

• Κανονικοί σύνδεσμοι ή σύνδεσμοι κειμένου
• Σύνδεσμοι εικόνων
• Σύνδεσμοι σε διευθύνσεις ηλεκτρονικού ταχυδρομείου
• Σύνδεσμοι anchor
• Άλλες σκέψεις κατά τη δημιουργία συνδέσμων

5.   Πώς να εργάζεστε με εικόνες

• Το χαρακτηριστικό alt
• Τα χαρακτηριστικά width και height
• Ευθυγραμμίστε τις εικόνες σας
• Προσθήκη συνδέσμων στις εικόνες σας

 

6.      Πώς να χρησιμοποιείτε δεδομένα σε πίνακες

• Πότε να χρησιμοποιείτε πίνακες και πότε όχι
• Δημιουργία πινάκων
• Περισσότερα για το χαρακτηριστικό των συνόρων
• Υπότιτλοι ενός πίνακα
• Εργασία με κελιά που καταλαμβάνουν δύο γραμμές ή δύο στήλες
• Διευκόλυνση της ανάγνωσης των δεδομένων
• Οι πίνακες HTML είναι πολύ ευέλικτοι

7.   Πλαίσια κειμένου και άλλα UserInput “Thingamajigs”

• Πεδία φόρμας
• Πεδίο κειμένου
• Κωδικός πρόσβασης
• Checkboxes
• Radio buttons
• Υποβολή
• Submit
• Drop-down μενού
• Περιοχή κειμένου

 

1.  Ξεκινώντας: Τι πρέπει να κάνετε για να ξεκινήσετε και να φτιάξετε την πρώτη σας σελίδα HTML

 

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

 

 

 

1.1  Τι είναι η HTML;

 

Η HTML είναι στην πραγματικότητα συντομογραφία για τη Hypertext Markup Language (γλώσσα σήμανσης υπερκειμένου). Είναι η γλώσσα των ιστοσελίδων που λέει σε ένα πρόγραμμα περιήγησης πώς να εμφανίζει ορισμένα στοιχεία, όπως κείμενο και εικόνες, μέσω της χρήσης κωδικών και συμβόλων.

 

Η HTML είναι το πρότυπο για τη δημιουργία ιστοσελίδων. Το World Wide Web Consortium ή W3C τη συνιστά. Ως εκ τούτου, οι περισσότεροι φυλλομετρητές (browsers) εφαρμόζουν την HTML για να βοηθήσουν στην εμφάνιση των ιστοσελίδων με περισσότερη ή λιγότερη ομοιομορφία.

 

 

 

Η HTML είναι το πνευματικό παιδί του Tim BernersLee. Το 1990, ο BernersLee χρειαζόταν κάτι που θα βοηθούσε τους επιστήμονες που προέρχονταν από διαφορετικά κολέγια και πανεπιστήμια να έχουν πρόσβαση σε έγγραφα και έρευνες άλλων επιστημόνων. Αυτό το πρόβλημα οδήγησε τον BernersLee στην εφεύρεση του Παγκόσμιου Ιστού, του πρωτοκόλλου μεταφοράς υπερκειμένου ή HTTP και της HTML.

 

1.2  Γιατί να μάθετε HTML;

 

 Αυτές τις μέρες, η εξάπλωση των συστημάτων διαχείρισης περιεχομένου (Content Management Systems) όπως το WordPress, καθώς και οι επεξεργαστές HTML μπορούν να σας βοηθήσουν να δημιουργήσετε μια ιστοσελίδα χωρίς να γνωρίζετε HTML.

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

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

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

1.3  Τι πρέπει να γνωρίζετε για την HTML για να ξεκινήσετε

 

Αυτό είναι ένα άλλο καλό νέο: όταν μαθαίνετε HTML, δεν χρειάζεστε πολλά.

 

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

Ή θα μπορούσατε να πάρετε έναν από αυτούς τους επεξεργαστές HTML ή WYSIWYG. WYSIWYG σημαίνει “αυτό που βλέπετε είναι αυτό που παίρνετε”. Σκεφτείτε το ως ένα εργαλείο διάταξης που σας επιτρέπει να δημιουργήσετε εύκολα μια σελίδα HTML και να τη μορφοποιήσετε χωρίς να ασχολείστε πολύ με τις ετικέτες (tags) και τα στοιχεία (elements).

Γι’ αυτό σας συνιστούμε hardcoding αν ακόμα μαθαίνετε. Hardcoding σημαίνει να γράψετε HTML χρησιμοποιώντας έναν επεξεργαστή κειμένου. Υπάρχουν δύο πράγματα που πρέπει να γνωρίζετε για να ξεκινήσετε με την HTML:

 

1. Τα βασικά tags και elements.
2. Η δομή μιας σελίδας HTML.

 

  

1.  Βασικές ετικέτες (tags) και στοιχεία (elements)

 

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

 

 

Οι ετικέτες διατίθενται συνήθως σε ζεύγη. Μια εναρκτήρια ετικέτα (starting tag) σημαίνει ότι το πρόγραμμα περιήγησης θα πρέπει να μεταχειρίζεται το επόμενο κείμενο χρησιμοποιώντας τις ιδιότητες της συγκεκριμένης ετικέτας και μια κλειστή ετικέτα (closing tag) θα την τερματίσει.

 

Για παράδειγμα, η εναρκτήρια ετικέτα <strong> και η αντίστοιχη </strong> που την κλείνει, θα εμφανίσει όλο το κείμενο που βρίσκεται ενδιάμεσα με έντονη γραφή, δηλ,

 

Το όνομά μου είναι <strong>Θανάσης Δαβαλάς</strong>” θα εμφανιστεί ως: Το όνομά μου είναι Θανάσης Δαβαλάς.

 

Και έπειτα υπάρχουν αυτά που αποκαλούμε “κενά στοιχεία” ή αυτά που λειτουργούν χωρίς ετικέτα κλεισίματος ή ανοίγματος. Τα κενά στοιχεία περιγράφονται συχνά ως αυτοκλειόμενες ετικέτες.

 

Υπάρχουν αρκετά κενά στοιχεία όπως:

• area
• base
• basefont
• br
• col
• frame
• hr
• img

 

• input
• isindex
• link
• meta
• param

Όλα αυτά μπορούν να σταθούν μόνα τους. Για παράδειγμα, τα διαλείμματα γραμμής (line breaks) σε έγγραφα HTML συχνά συμβολίζονται με <br />.

 

2.  Δομή μιας σελίδας HTML

 

Η HTML είναι πολύ απλή και λογική. Ένα πρόγραμμα περιήγησης θα αρχίσει να διαβάζει μια σελίδα HTML από πάνω προς τα κάτω, από αριστερά προς τα δεξιά.

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

Στη συνέχεια, υπάρχουν τα δύο άλλα τμήματα που ονομάζονται <head> και <body> του εγγράφου σας.

Στο <head> τοποθετείτε όλες τις πληροφορίες που θέλετε να συμπεριλάβετε σχετικά με το έγγραφό σας.

Το <body> είναι ουσιαστικά το περιεχόμενο του εγγράφου HTML σας.

Με άλλα λόγια, το τμήμα <body> είναι αυτό που βλέπουν οι χρήστες όταν βλέπουν το έγγραφο HTML σας.

 

 

Θυμάστε πώς πρέπει να κλείνετε μια ετικέτα στην HTML; Θα πρέπει επίσης να κλείσετε

<html>, <head> και <body>, έτσι ώστε το βασικό έγγραφο HTML να μοιάζει ως εξής:

 

<html>

<head>

</head>

<body>

</body>

</html>

 

 Τώρα έχετε τις βάσεις για τη δημιουργία της πρώτης σας σελίδας HTML!

 

2.  Tags, attributes και elements

 

 

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

 

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

 

2.1  Ποια είναι η διαφορά;

 

Τεχνικά, τα έγγραφα HTML περιέχουν μόνο ετικέτες. Κατά την πρόσβαση σε ένα πρόγραμμα περιήγησης, τα έγγραφα HTML αναλύονται έτσι ώστε να μπορούν να εμφανιστούν χρησιμοποιώντας το Μοντέλο Αντικειμένου Εγγράφου (DOM). Οι ετικέτες υπάρχουν στο έγγραφο HTML, αλλά τα στοιχεία HTML εμφανίζονται μόνο μετά την ανάλυση του εγγράφου.

 

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

Τα στοιχεία HTML, από την άλλη πλευρά, περιλαμβάνουν το περιεχόμενο.

Έτσι, δεδομένου αυτού: <p> Αυτή είναι η διαφορά μεταξύ των στοιχείων και των ετικετών της HTML. </p>. Οι ετικέτες εδώ είναι <p> και </p> , ενώ το όλο πράγμα ονομάζεται στοιχείο HTML.

 

2.2  Στοιχεία HTML

 

Τώρα που τελειώσαμε με αυτό, ας ρίξουμε μια ματιά στα στοιχεία HTML. Ένα στοιχείο HTML έχει την ακόλουθη σύνταξη:

1. Ένα στοιχείο HTML αρχίζει με μια ετικέτα έναρξης ή έναρξης, δηλαδή <p>.
2. Ένα στοιχείο HTML τελειώνει με μια ετικέτα κλεισίματος ή τέλους, π.χ. </p>.
3. Η ιδιότητα ενός περιεχομένου HTML περικλείεται μέσα στις ετικέτες αρχής και τέλους, δηλ,

<p> Αυτό είναι το περιεχόμενο του στοιχείου.</p>.

4. Μπορεί επίσης να περιέχει ένα χαρακτηριστικό.

 

1.  Κενά στοιχεία

 

Ορισμένα στοιχεία HTML δεν έχουν περιεχόμενο και ονομάζονται απλά κενά στοιχεία. Αυτά τα στοιχεία τελειώνουν ή κλείνουν με την ετικέτα ανοίγματος, δηλαδή <br/>.

 

2.  Nested στοιχεία

 

Στη συνέχεια, υπάρχει επίσης αυτό που ονομάζεται “nested στοιχεία”. Τα nested στοιχεία είναι στοιχεία HTML που βρίσκονται μέσα σε άλλα στοιχεία HTML. Για παράδειγμα, αυτό εδώ είναι ένα nested στοιχείο:

<p>I do not know <strong>what it was</strong>.</p>

Τέλος, ένα στοιχείο HTML μπορεί να περιέχει χαρακτηριστικά, τα οποία θα συζητήσουμε στη συνέχεια.

 

3.  Ορισμένες ευρέως χρησιμοποιούμενες ετικέτες HTML περιλαμβάνουν:

 

<a> που εμφανίζει έναν υπερσύνδεσμο

<b> που εμφανίζει κείμενο με έντονη γραφή

<br> το οποίο εισάγει ένα διάλειμμα γραμμής στις παραγράφους

<div> που εισάγει ένα τμήμα του εγγράφου

<em> που δείχνει έμφαση

<h1>, <h2>, <h3>, έως <h6> εμφανίζουν επικεφαλίδες HTML

<hr> που εισάγει έναν οριζόντιο κανόνα

<p> που εισάγει μια παράγραφο

<table> που εισάγει έναν πίνακα

 

4.  Χρήσεις των στοιχείων HTML

 

Τα στοιχεία HTML εξυπηρετούν διάφορους σκοπούς:

1. Τα στοιχεία HTML μπορούν να περιγράψουν το σκοπό του κειμένου, καθώς και να του δώσουν δομή. Ένα καλό παράδειγμα αυτού του τύπου στοιχείων HTML είναι τα <h1>, <h2> και άλλες επικεφαλίδες HTML. Για παράδειγμα,<h1>Εισαγωγή</h1> επικοινωνεί ότι η “Εισαγωγή” είναι μια επικεφαλίδα πρώτου επιπέδου. Λάβετε υπόψη ότι τα δομικά στοιχεία HTML παρέχουν μόνο δομή και δεν έχουν συγκεκριμένα πρότυπα για την εμφάνισή τους. Ένα πρόγραμμα περιήγησης, ωστόσο, μπορεί να έχει προεπιλεγμένη απεικόνιση για αυτού του είδους τα στοιχεία, γι’ αυτό και συχνά βλέπετε τις ετικέτες επικεφαλίδων να είναι μεγαλύτερες από το κανονικό κείμενο στο πρόγραμμα περιήγησής σας.

 

2. Τα στοιχεία HTML μπορούν να υπαγορεύσουν τον τρόπο εμφάνισης συγκεκριμένου περιεχομένου. Για παράδειγμα, χρησιμοποιώντας το <b> θα εμφανίσει το κείμενο με έντονη γραφή, ενώ η χρήση του <i> θα εμφανίσει το κείμενο με πλάγια γραφή.

3. Στοιχεία HTML που συνδέουν το έγγραφο HTML σας με άλλα έγγραφα. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε <a> για να συνδέσετε το έγγραφό σας με ένα άλλο έγγραφο.

 

2.3  Tips

 

1. Πάντα να βάζετε την ετικέτα κλεισίματος.(closing tag)

 

Υπάρχουν στοιχεία HTML που δεν είναι κενά στοιχεία αλλά μπορούν να γραφτούν χωρίς ετικέτα κλεισίματος. Επειδή οι φυλλομετρητές είναι σε θέση να τα αναγνωρίσουν, δεν παρουσιάζουν κανένα πρόβλημα. Για παράδειγμα, το στοιχείο <p>, με το οποίο αρχίζει μια παράγραφος, συχνά δεν κλείνει.

<p>Αυτό εννοούμε.

Ωστόσο, εξακολουθεί να αποτελεί καλή πρακτική το κλείσιμο των στοιχείων HTML.

Τα περισσότερα προγράμματα περιήγησης θα θεωρήσουν την ετικέτα κλεισίματος για το <p> προαιρετική και η παράγραφος θα εμφανιστεί σωστά. Ωστόσο, αυτό δεν ισχύει για όλους τους φυλλομετρητές. Για να είστε σίγουροι, βάζετε πάντα την ετικέτα κλεισίματος στο τέλος.

Σε τι διαφέρει αυτή η περίπτωση από τα κενά στοιχεία; Ένα κενό στοιχείο είναι όταν δεν απαιτούνται ετικέτες κλεισίματος. Επιπλέον, δεν υπάρχουν ή δεν επιτρέπονται ετικέτες κλεισίματος σε κενά στοιχεία. Για παράδειγμα, το <br> δεν έχει αντίστοιχη ετικέτα κλεισίματος: </br> δεν υπάρχει στην HTML.

Ενώ, τεχνικά, θα έπρεπε να κλείσετε το παραπάνω στοιχείο HTML χρησιμοποιώντας </p>.

 

2. Χρησιμοποιήστε πεζά γράμματα όταν γράφετε στοιχεία.

Οι ετικέτες HTML δεν είναι ευαίσθητες στην πεζότητα (case sensitive). Αυτό σημαίνει ότι μπορείτε να γράψετε <p>, <P> ή ακόμα και

</P> ή </p>.

Ωστόσο, τα πρότυπα και οι συστάσεις του World Wide Web Consortium ή W3C συνιστούν τη χρήση πεζών χαρακτήρων για τα στοιχεία της HTML στην HTML4 και την απαιτούν στην XHTML. Επομένως, μπορείτε κάλλιστα να αρχίσετε να εκπαιδεύεστε στο να γράφετε στοιχεία HTML με πεζά γράμματα.

 

2.4  Attributes

 

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

 

Το στοιχείο HTML <a href=”nextofkin.html“>Επόμενος συγγενής</a> περιέχει το χαρακτηριστικό

href=”nextofkin.html“. Τα χαρακτηριστικά χρησιμοποιούν συνήθως την ακόλουθη σύνταξη:

 

<tag attribute=”αξία του χαρακτηριστικού”>περιεχόμενο</tag>

  

Πολλοί άνθρωποι συγχέουν το χαρακτηριστικό alt ως ετικέτα. Δεν είναι. Το χαρακτηριστικό alt τροποποιεί το

<img>, <area>, <input> και <applet>, γεγονός που το καθιστά χαρακτηριστικό.

 

 

Ορισμένα από τα πιο συχνά χρησιμοποιούμενα χαρακτηριστικά, εκτός από τα href και alt, περιλαμβάνουν:

• allign
• bgcolor
• src
• height
• width
• value
• href
• hspace
• id
• category

 

• style
• title
• dir
• lang

Αυτά είναι τα βασικά που πρέπει να γνωρίζετε για τις ετικέτες, τα χαρακτηριστικά και τα στοιχεία.

 

3.  Titles. Titles. Paragraphs

 

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

 

Έτσι, κοιτάζοντας τον πηγαίο κώδικα, θα μπορείτε να κοιτάξετε ένα έγγραφο HTML και να καταλάβετε πώς θα είναι μια σελίδα.

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

 

3.1  Το title tag

 

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

 

Ο τίτλος είναι απαραίτητος για όλα τα έγγραφα HTML και συνοδεύεται από άλλα πλεονεκτήματα:

• Θα προσδιορίσει το αντικείμενο του εγγράφου σας.
• Οι τίτλοι εμφανίζονται επίσης στο παράθυρο του προγράμματος περιήγησης ή στην καρτέλα, διευκολύνοντας τους χρήστες να αναγνωρίσουν σε ποια καρτέλα πρέπει να κάνουν κλικ για να αποκτήσουν πρόσβαση στην ιστοσελίδα σας, εάν έχουν πολλές καρτέλες ανοιχτές ταυτόχρονα.
• Είναι ένα από τα πράγματα που εξετάζουν οι μηχανές αναζήτησης για να προσδιορίσουν το περιεχόμενο της σελίδας σας. Οι σελίδες αποτελεσμάτων των μηχανών αναζήτησης (SERPs) θα εμφανίζουν τον τίτλο του εγγράφου σας ως κύρια επικεφαλίδα του αποτελέσματος.
• Αντιλαμβανόμαστε όλοι την βαρύνουσα σημασία που έχει στην προώθηση μιας ιστοσελίδας αυτή η ετικέτα όσο αφορά την αναγνώριση της από το google και τις άλλες μηχανές αναζήτησης

 

 

Είναι σίγουρο ότι θα σας βοηθήσει να καταταγείτε υψηλότερα στις μηχανές αναζήτησης αν επιλέξετε σωστά τους τίτλους σας.

• Μπορεί να χρησιμοποιηθεί από άλλα συστήματα, όπως οι αναζητήσεις WAIS και τα συστήματα αρχειοθέτησης εγγράφων, για τον εντοπισμό του εγγράφου σας.
• Τα title tags χρησιμοποιούνται επίσης για τους σελιδοδείκτες. Έτσι, αν συνηθίζετε να αποθηκεύετε σελίδες σελιδοδείκτες, τα title tags θα παρέχουν έναν καλό τρόπο για τον εντοπισμό των σελίδων στο μέλλον.

Ο σωστός τρόπος για να γράψετε τον τίτλο σας είναι να χρησιμοποιήσετε την ακόλουθη σύνταξη:

<title> Write your document title here.</title>

  Θα πρέπει να τοποθετήσετε το title tag μέσα στην ενότητα <head> του εγγράφου HTML.

Όταν έχετε τοποθετήσει το <title>, μπορείτε τώρα να αρχίσετε να γράφετε το περιεχόμενο που είναι ορατό

στους ανθρώπους. Είναι το περιεχόμενο που τοποθετείτε μέσα στην ενότητα <body> του εγγράφου HTML.

 

Ας ξεκινήσουμε με τις επικεφαλίδες και τις παραγράφους.

 

3.2  Τίτλοι

 

Οι επικεφαλίδες είναι σημαντικό να χρησιμοποιούνται στο έγγραφό σας. Του δίνουν κάποια δομή. Η HTML σας επιτρέπει να έχετε έξι διαφορετικές επικεφαλίδες: <h1>, <h2>, <h3>, <h4>, <h5> και <h6>.

 

Οι επικεφαλίδες ακολουθούν την ακόλουθη σύνταξη:

<h1>The Headings for Tag 1 go here</h1>

<h2> The Headings for Tag 2 go here</h2>

<h3> The Headings for Tag 3 go here</h3>

<h4> The Headings for Tag 4 go here</h4>

<h5> The Headings for Tag 5 go here</h5>

<h6> The Headings for Tag 6 go here</h6>

 

 Μπορείτε να χρησιμοποιήσετε επικεφαλίδες ανάλογα με τη σημασία τους. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε <h1> για τις πιο σημαντικές επικεφαλίδες σας και <h2> έως <h6> για τις λιγότερο σημαντικές.

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

Ως εκ τούτου, είναι πολύ σημαντικό να χρησιμοποιείτε επικεφαλίδες για να:

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

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

Για παράδειγμα:

 

<big>This is a Heading</big> μπορεί να εμφανίζεται με τον ίδιο τρόπο όπως το

<h1>This is a Heading </h1>

 

 Ωστόσο, αν κοιτάξετε τον πηγαίο κώδικα, θα ήταν πολύ πιο εύκολο να γνωρίζετε ότι </p><h1> είναι η κύρια επικεφαλίδα από ό,τι αν χρησιμοποιείτε <big> και άλλες παρόμοιες ετικέτες.

 

Λάβετε υπόψη ότι οι επικεφαλίδες δεν είναι ετικέτες μορφοποίησης (formatting tags) και ότι δεν λένε στο πρόγραμμα περιήγησης πώς να εμφανίσει το περιεχόμενο με συγκεκριμένο τρόπο. Συμβαίνει απλώς να αναγνωρίζουν οι περισσότεροι φυλλομετρητές τις επικεφαλίδες και να έχουν το δικό τους τρόπο εμφάνισης. Η διαφορετική μορφοποίηση που βλέπετε για τα <h1>, <h2> έως <h6> εξαρτάται από το πρόγραμμα περιήγησης που χρησιμοποιείτε.

Μπορείτε, ωστόσο, να διαμορφώσετε τις επικεφαλίδες σας ώστε να εμφανίζονται με τη χρήση cascading stylesheets.

 

3.3  Παράγραφοι

 

Όταν εργάζεστε με έγγραφα HTML, θα πρέπει να χρησιμοποιήσετε την ετικέτα παραγράφου <p> για να εισαγάγετε κενό διάστημα μεταξύ δύο παραγράφων.

Μπορείτε να χρησιμοποιήσετε την ακόλουθη σύνταξη όταν γράφετε μια παράγραφο για το έγγραφο HTML σας:

<p>Paragraph 1 starts here</p>.

<p>The second paragraph would follow here.</p>

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

Μπορείτε να παραλείψετε να προσθέσετε </p> στο τέλος, και οι περισσότεροι φυλλομετρητές θα το αγνοήσουν και θα εμφανίσουν την παράγραφο σωστά. Αλλά ορισμένοι φυλλομετρητές μπορεί να επιστρέψουν σφάλματα όταν δεν βάλετε το

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

4.  Unordered, ordered, ορισμός και Nested lists (Μέρος 4)

 

 

 

Υπάρχουν δύο πιο συνηθισμένες λίστες που χρησιμοποιούνται στην HTML και είναι οι εξής:

• Λίστα με σειρά (Ordered)
• Λίστα χωρίς σειρά (Unordered)

 

4.1  Ordered λίστες

 

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

<ol>

<li> This is the first item on the list.</li>

<li> This is the second item on the list.</li>

<li> This is the third item on the list.</li>

</ol>

 

 Αυτό θα εμφανιστεί ως:

1. This is the first item on the
2. This is the second item on the
3. This is the third item on the

Χαρακτηριστικά που μπορείτε να χρησιμοποιήσετε με ordered λίστες

 

Όπως και με άλλες ετικέτες, μπορείτε να αλλάξετε την εμφάνιση των ordered λιστών προσθέτοντας χαρακτηριστικά (attributes). Δύο από τα πιο συχνά χρησιμοποιούμενα χαρακτηριστικά είναι τα type και start.

 

1. Type

 

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

<ol type=”a“> θα εμφανίσει τα a, b, c

<ol type=”A“> θα εμφανίσει τα A, B, C

<ol type=”i“> θα εμφανίζει i, ii, iii

<ol type=”I“> θα εμφανίζει I, II, III

 

2. Start

 Μπορείτε να ξεκινήσετε τις λίστες σας με οποιονδήποτε αριθμό θέλετε. Για παράδειγμα:

 

<ol start=”3″>

Η λίστα που θα προκύψει θα αρχίζει με 3 που θα συνοδεύει το πρώτο στοιχείο.

<ol start=”3″>

<li> This is the first item on the list.</li>

<li> This is the second item on the list.</li>

<li> This is the third item on the list.</li>

</ol>

  

Αυτό θα εμφανιστεί ως:

1. This is the first item on the
2. This is the second item on the
3. This is the third item on the

 

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

4.2  Unordered λίστες

 

Οι μη ταξινομημένες (unordered) λίστες ονομάζονται επίσης λίστες με κουκκίδες και, σε αντίθεση με τις ταξινομημένες (ordered) λίστες, η σειρά των στοιχείων δεν είναι σημαντική σε αυτόν τον τύπο λίστας.

 

 

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

 

Μπορείτε να δημιουργήσετε μια μη ταξινομημένη λίστα χρησιμοποιώντας την ακόλουθη σύνταξη:

<ul>

<li>This is item #1.</li>

<li> This is item #2.</li>

<li> This is item #3.</li>

</ul>

 

 Αυτό θα εμφανιστεί ως:

• This is item #1.
• This is item #2.
• This is item #3.

 

Επιπλέον, αν χρησιμοποιείτε εκδόσεις HTML προγενέστερες της HTML 4, μπορείτε να αλλάξετε την ενότητα καθορίζοντας τον τύπο.

Για παράδειγμα, χρησιμοποιώντας:

 

<ul type=”square“> θα εμφανίσει ένα τετράγωνο γεμάτο σφαίρα.

<ul type=”circle“> θα εμφανίσει μια σφαίρα κύκλου που δεν είναι συμπληρωμένη.

 

Ενώ οι διατεταγμένες (ordered) και οι μη διατεταγμένες (unordered) λίστες είναι βασικές μορφές λιστών, μπορεί να χρειαστεί να χρησιμοποιήσετε λίστες που έχουν περισσότερες πληροφορίες εκτός από τα στοιχεία της λίστας. Η HTML μπορεί να το χειριστεί και αυτό. Ας ρίξουμε μια ματιά στις λίστες περιγραφής και στις Nested λίστες.

 

4.3  Description λίστες

 

Οι λίστες περιγραφής (description) σας επιτρέπουν να έχετε μια περιγραφή για κάθε στοιχείο της λίστας σας. Σε αντίθεση με το <ol> και το <ul>, δεν θα χρησιμοποιήσετε το <li> για τα στοιχεία της λίστας. Αντ’ αυτού, οι ετικέτες <dl> χρειάζονται <dt> για τα στοιχεία της λίστας και <dd> για την περιγραφή. Οι λίστες περιγραφής είναι επίσης γνωστές ως λίστες ορισμού.

 

Η σωστή σύνταξη θα ήταν:

<dl>

<dt> This is item #1.</dt>

<dd> This is a description of item #1</dd>

<dt> This is item #2.</dt>

<dd> This is a description of item #2</dd>

</dl>

 

Το πρόγραμμα περιήγησης θα το εμφανίσει ως εξής:

This is item #1.

• This is a description of item #1
• This is item #2.
• This is a description of item #2

Όπως μπορείτε να δείτε, μόνο η περιγραφή είναι σε εσοχή.

 

4.4  Nested λίστες

 

Μια nested λίστα μπορεί να είναι μια μη ταξινομημένη λίστα ή μια ταξινομημένη λίστα όπου μπορείτε να έχετε υπο-λίστες για οποιοδήποτε στοιχείο θέλετε. Αυτό είναι καλό αν έχετε πολύπλοκες λίστες στις οποίες μπορεί να χρειαστεί να απαριθμήσετε μια άλλη λίστα για ένα στοιχείο της αρχικής σας λίστας. Ίσως ο απλούστερος τρόπος για να περιγράψετε τις nested λίστες είναι ότι πρόκειται για μια λίστα μέσα σε μια λίστα.

 

Η σωστή σύνταξη για nested λίστες θα ήταν:

<ul>

<li> This is item #1.</li>

<li> This is item #2.

<ul>

<li> This is item #1 (α).</li>

<li> This is item #2 (β).</li>

</ul>

</li>

<li> This is item #3.</li>

</ul>

 

 Αυτό θα εμφανιζόταν ως:

• This is item #1.
• This is item #2.
• This is item #2 (α).
• This is item #2 (β).
• This is item #3.

 

Αν πρέπει να χρησιμοποιήσετε μια ordered λίστα, μπορείτε απλώς να αντικαταστήσετε το <ul> με το <ol>. Για παράδειγμα:

<ol>

<li>Jeans</li>

<li>Shirts

<ul>

 

<li>Navy blue.</li>

<li>Plain white.</li>

</ul>

</li>

<li>This is item #3.</li>

</ol>

Θα εμφανιστεί ως:

1. Jeans
2. Shirts
   • Navy blue.
   • Plain white.
3. This is item #3.

Και με αυτόν τον τρόπο δημιουργείτε λίστες για τους κωδικούς HTML σας. Στιγμιότυπο που δείχνει τη χρήση διαφόρων στυλ λίστας HTML:

 

5.  HTML για αρχάριους: Πώς να κάνετε συνδέσμους (links) προς άλλες σελίδες και αλλού

 

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

 

Ως εκ τούτου, υπάρχουν πολλοί διαφορετικοί τύποι συνδέσμων που πρέπει να γνωρίζετε όταν μαθαίνετε HTML. Ας επικεντρωθούμε πρώτα στο σώμα του εγγράφου HTML. Ποιοι είναι αυτοί οι τύποι συνδέσμων που πρέπει να γνωρίζετε;

• Κανονικοί σύνδεσμοι ή σύνδεσμοι κειμένου
• Σύνδεσμοι εικόνων
• Σύνδεσμοι σε διευθύνσεις ηλεκτρονικού ταχυδρομείου
• Σύνδεσμοι “placeholder” ή άγκυρας (anchor links)

5.1  Κανονικοί σύνδεσμοι ή σύνδεσμοι κειμένου

 

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

Για να δημιουργήσετε έναν απλό σύνδεσμο κειμένου, χρησιμοποιήστε την ετικέτα <a> ακολουθώντας την εξής σύνταξη:

<a href=”URL of page you want to link to”>link text</a>

 

 Τι σημαίνει αυτή η σύνταξη;

• Η ετικέτα <a> ανοίγει το στοιχείο συνδέσμου.
• Το χαρακτηριστικό href θα σας ενημερώσει για τον προορισμό του συνδέσμου.
• Το “link text” μπορεί να είναι οτιδήποτε, από μια απλή περιγραφή της συνδεδεμένης σελίδας μέχρι κάτι σαν “κάντε κλικ εδώ” ή “επισκεφθείτε τη σελίδα”.
• Η ετικέτα </a> κλείνει το στοιχείο.

Για παράδειγμα:

<a href=“http://www.google.com”>Google It!</a>

Θα εμφανιζόταν ως: Google It!

 

Κάνοντας κλικ σε αυτόν τον σύνδεσμο θα μεταφερθείτε στο http://www.google.com. Λάβετε υπόψη ότι η διεύθυνση URL προορισμού δεν χρειάζεται να είναι σελίδα HTML ή ιστοσελίδα. Οι σύνδεσμοι μπορούν να σας οδηγήσουν σε ένα αρχείο εικόνας, ένα έγγραφο Word, ένα αρχείο PDF ή ακόμη και σε αρχεία ήχου, βίντεο και άλλα αρχεία πολυμέσων.

5.2  Σύνδεσμοι εικόνας

 

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

 

<a href=”URL”>

<img src=”image.jpg” alt=”alt text of image”></a>

  

Στη σελίδα σας, η εικόνα που ονομάζεται image.jpg θα συνδέεται με οποιαδήποτε διεύθυνση URL έχετε.

5.3  Σύνδεσμοι σε διευθύνσεις ηλεκτρονικού ταχυδρομείου

 

Αντί για URL, εικόνα ή βίντεο και άλλα παρόμοια αρχεία, μπορείτε να δημιουργήσετε έναν σύνδεσμο ηλεκτρονικού ταχυδρομείου. Ένας σύνδεσμος ηλεκτρονικού ταχυδρομείου θα άνοιγε το προεπιλεγμένο πρόγραμμα ηλεκτρονικού ταχυδρομείου του χρήστη (Gmail, Outlook, Apple Mail κ.λπ.) και θα ξεκινούσε ένα νέο μήνυμα με τις καθορισμένες διευθύνσεις ηλεκτρονικού ταχυδρομείου που έχουν ήδη συμπληρωθεί στο πεδίο TO:. Εάν έχετε επίσης καθορίσει ένα θέμα, το περιεχόμενο θα συμπληρωθεί επίσης αυτόματα.

 

Πώς το κάνετε αυτό; Χρησιμοποιήστε την ακόλουθη σύνταξη:

 

<a href=“mailto:you@yourdomain.com?Subject=Creating an email link!”> Send me an e­mail!</a>

Στη σελίδα σας, αυτό θα εμφανιστεί ως

“Send me an e-mail!”

  

Όταν κάνετε κλικ σε αυτόν τον σύνδεσμο, θα ανοίξει το πρόγραμμα ηλεκτρονικού ταχυδρομείου σας για τη σύνταξη ενός νέου παραθύρου μηνύματος. Στο πεδίο TO, θα δείτε το you@yourdomain.com να έχει ήδη εισαχθεί και το θέμα θα έχει την ένδειξη “Δημιουργία συνδέσμου ηλεκτρονικού ταχυδρομείου!”.

 

5.4  Anchor links

 

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

 

Ένας καλός τρόπος για να δημιουργήσετε έναν σύνδεσμο που θα μεταφέρει τους χρήστες σας σε ένα συγκεκριμένο σημείo της ίδιας ιστοσελίδας είναι η δημιουργία anchor links. Για να το κάνετε αυτό, πρέπει πρώτα να δημιουργήσετε έναν σελιδοδείκτη χρησιμοποιώντας το χαρακτηριστικό “id”.

Για παράδειγμα, η απάντηση στην ερώτηση 10 είναι “10. Yes, we do handle that”. Κοιτάξτε τον πηγαίο σας κώδικα, βρείτε την αντίστοιχη γραμμή και προσθέστε τον σελιδοδείκτη ως εξής:

<a id=”AnswerTen”>10. Yes, we do handle that.</a>

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

<a href=”#AnswerTen”>Ερώτηση 10: Do you handle HTML tutorials? </a>

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

 

5.5  Άλλες σκέψεις κατά τη δημιουργία συνδέσμων:

 

1. Λάβετε υπόψη ότι μπορείτε να καθορίσετε πού θα ανοίξει ένας συνδεδεμένος πόρος. Θα μπορούσε να είναι
   • ανοίγει στην ίδια σελίδα (προεπιλογή).
   • ανοίγει σε νέο παράθυρο, οπότε θα πρέπει να προσθέσετε το χαρακτηριστικό target=”_blank” στο στοιχείο του συνδέσμου σας.

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

• target=”_self” θα ανοίξει τον σύνδεσμο στο ίδιο πλαίσιο στο οποίο κάνατε κλικ.
• target=”_parent” θα ανοίξει τη συνδεδεμένη σελίδα στο πλαίσιο γονέα.
• target=”_xyz” θα ανοίξει τη συνδεδεμένη σελίδα στο πλαίσιο με το όνομα “xyz”.

2. Χρήση absolute ή relative URLs.

Οι absolute URLs καθορίζουν την πλήρη διεύθυνση URL, δηλαδή http://www.you.com/me.html. Αυτό χρησιμοποιείται συνήθως όταν συνδέεστε με έναν άλλο ιστότοπο σε άλλο τομέα.

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

 

6.  HTML για αρχάριους: HTML: Εικόνες

 

 

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

 

Πρέπει να χρησιμοποιήσετε αυτόν τον κωδικό:

<img src=”imagefile.jpg” alt=”image on your site” width=”100″ height=”100″>

 

 Η ετικέτα <img> εισάγει μια εικόνα, το χαρακτηριστικό src ή source σας επιτρέπει να δείξετε το αρχείο της εικόνας σας. Το χαρακτηριστικό alt σημαίνει εναλλακτικό κείμενο. Αυτό εμφανίζεται όταν η εικόνα δεν μπορεί να εμφανιστεί για κάποιο λόγο (αργή σύνδεση στο Διαδίκτυο ή ο διακομιστής δεν ανταποκρίνεται). Τα χαρακτηριστικά width και height καθορίζουν τις διαστάσεις της εικόνας.

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

Για παράδειγμα:

<img src=“http://www.whereisyourimage.net/imagefile.jpg” alt=”image on another site” width=”100″ height=”100″>

 

6.1  Το χαρακτηριστικό alt

 

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

Ωστόσο, το χαρακτηριστικό alt, το οποίο τις περισσότερες φορές αποκαλείται λανθασμένα ετικέτα alt, εξυπηρετεί και άλλους σκοπούς.

Για παράδειγμα:

1. Ένα τυφλό άτομο που αποκτά πρόσβαση στον ιστότοπό σας μέσω ενός προγράμματος ανάγνωσης οθόνης θα ακούσει το χαρακτηριστικό alt, επιτρέποντάς του να “δει” την εικόνα που έχετε συμπεριλάβει στη σελίδα σας.
2. Οι φυλλομετρητές κειμένου και οι “αράχνες” μηχανών αναζήτησης θα μπορούν να διαβάσουν το χαρακτηριστικό alt.

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

Υπάρχουν μάλιστα εικασίες μεταξύ των επαγγελματιών του SEO ότι η τοποθέτηση των λέξεων-κλειδιών σας στο κείμενο alt έχει μεγαλύτερη βαρύτητα από ό,τι η τοποθέτηση των λέξεων-κλειδιών σας στις ετικέτες τίτλου ή επικεφαλίδας. Επίσης, οι υπηρεσίες αναζήτησης εικόνων, όπως οι Google Images, Yahoo Image Search και Bing Images, χρησιμοποιούν το χαρακτηριστικό alt.

 

6.2  Τα χαρακτηριστικά πλάτος και ύψος

 

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

Είναι επίσης σημαντικό να χρησιμοποιείτε τις σωστές αναλογίες, ώστε η εικόνα σας να μην φαίνεται παραμορφωμένη. Για παράδειγμα, αν έχετε μια εικόνα με πλάτος 200 pixel και ύψος 200 pixel, ο καθορισμός πλάτους και ύψους 200 pixel και 100 pixel αντίστοιχα θα έχει ως αποτέλεσμα η σελίδα να εμφανίζει μια παραμορφωμένη εικόνα.

 

6.3  Ευθυγραμμίστε τις εικόνες σας

 

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

Θα μπορούσατε να το κάνετε αυτό χρησιμοποιώντας το χαρακτηριστικό align.

• Για να ευθυγραμμίσετε τις εικόνες σας προς τα αριστερά, χρησιμοποιήστε <img align=”left”>
• Για να ευθυγραμμίσετε τις εικόνες σας προς τα δεξιά, χρησιμοποιήστε <img align=”right”>
• Για να ευθυγραμμίσετε τις εικόνες σας στη μέση, χρησιμοποιήστε <img align=”middle”>
• Για να ευθυγραμμίσετε τις εικόνες σας στην κορυφή, χρησιμοποιήστε <img align=”top”>
• Για να ευθυγραμμίσετε τις εικόνες σας στο κάτω μέρος, χρησιμοποιήστε <img align=”bottom”>

Το χαρακτηριστικό align για την ετικέτα <img>, ωστόσο, έχει ήδη καταργηθεί στην HTML 4.01, και αν χρησιμοποιείτε την HTML 5, δεν υποστηρίζεται πλέον.

Μπορείτε, ωστόσο, να χρησιμοποιήσετε CSS για να ευθυγραμμίσετε τις εικόνες σας χρησιμοποιώντας την ακόλουθη σύνταξη:

<img style=”float:right“> για να ευθυγραμμίσετε την εικόνα σας προς τα δεξιά.

 

6.4  Προσθήκη συνδέσμων στις εικόνες σας

 

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

 

Μπορείτε να προσθέσετε έναν σύνδεσμο στην εικόνα σας χρησιμοποιώντας αυτή τη σύνταξη:

<a href=”page.html”><img src=”image.jpg” alt=”image with link” width=”100″ height=”100″></a>

 

Αυτό ακούγεται αρκετά απλό. Τι γίνεται όμως αν πρέπει να προσθέσετε δύο ή περισσότερους συνδέσμους σε μια εικόνα; Πώς το κάνετε αυτό;

Αν και είναι λίγο ξεπερασμένο, θέλετε τουλάχιστον να ξέρετε πώς μπορείτε να δημιουργήσετε τέτοια πράγματα. Ένας χάρτης εικόνας είναι αυτό που θα λέγατε μια ενιαία εικόνα που έχει πολλές περιοχές με υπερσυνδέσμους. Για παράδειγμα, αν έχετε την εικόνα ενός προσώπου και θέλετε να συνδέσετε τα μάτια με μια σελίδα που ονομάζετε eye.html και τα χείλη με την lip.html, θα πρέπει να δημιουργήσετε έναν χάρτη εικόνας.

Για να δημιουργήσετε έναν χάρτη εικόνας, θα πρέπει να λάβετε τις συντεταγμένες των hot spots σας. Τα καυτά σημεία είναι οι περιοχές που μπορούν να πατηθούν με κλικ μέσα στην εικόνα σας. Για να λάβετε τις συντεταγμένες, μπορείτε να χρησιμοποιήσετε ένα λογισμικό επεξεργασίας εικόνας ή ένα διαδικτυακό εργαλείο όπως το Poor Person’s Image Mapper.

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

<img src=”face.jpg” usemap = #face>

<map name=face>

<area shape=rect coords=0,0,129,129 href=”eye.html”>

<area shape=rect coords=130,130,159,159 href=”lip.html”>

</map>

  

Σε αυτόν τον χάρτη εικόνας, η ορθογώνια περιοχή εντός των συντεταγμένων (0, 0) και (129, 129) μπορεί να γίνει κλικ και να συνδεθεί με τη σελίδα eye.html. Ομοίως, η ορθογώνια περιοχή εντός των συντεταγμένων (130, 130) και (159, 159) είναι επίσης επιλέξιμο, αλλά αυτή τη φορά συνδέεται με τη σελίδα lip.html. Υπάρχουν και άλλα σχήματα που θα μπορούσατε να χρησιμοποιήσετε:

<area shape=circle coords=0,0,129,129 href=”url”>

και

<area shape=polygon coords= 0,0,129,129 .., xn,yn Href=”url”>

  Έτσι προσθέτετε εικόνες στον ιστότοπό σας.

7.  HTML για αρχάριους: HTML: Πώς να χρησιμοποιήσετε δεδομένα σε πίνακες: Πώς να χρησιμοποιήσετε δεδομένα σε πίνακες

 

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

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

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

Παρ’ όλα αυτά, γνωρίζοντας τα βασικά και κάνοντας εξάσκηση θα μπορέσετε να βρείτε σωστούς πίνακες.

7.1  Πότε να χρησιμοποιείτε πίνακες και πότε όχι

  

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

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

7.2  Δημιουργία πινάκων

 

 Η ετικέτα <table> ορίζει όλους τους πίνακες σε ένα έγγραφο HTML. Για να σας διευκολύνουμε στον σκληρό κώδικα του πίνακα σας, θα πρέπει πάντα να θυμάστε ότι οι πίνακες HTML λειτουργούν πρώτα με γραμμές (που ορίζονται από την ετικέτα <tr>) , και μετά με στήλες (που ορίζονται από την ετικέτα <td>).

Ας ξεκινήσουμε με ένα μόνο κύτταρο. Για να το κάνουμε αυτό, χρησιμοποιήστε τον ακόλουθο κώδικα:

<table border=”1″>

<tr>

<td>one cell</td>

</tr>

</table>

 Αυτό θα εμφανιστεί ως:

One
Cell

 

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

 

<h4>One row, multi column:</h4>

<table border=”1″>

<tr>

<td>Column 1</td>

<td>Column 2</td>

 

<td>Column 3</td>

</tr>

</table>

  

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

 

Αυτό θα εμφανιστεί ως:

 

column 1

column 2

column 3

 

Τώρα, για κάτι λίγο πιο δύσκολο, γιατί να μην δοκιμάσετε να έχετε έναν πίνακα με δύο γραμμές και τρεις στήλες;

 

<table border=”1″>

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

<td>Row 1, Column 3</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

<td>Row 2, Column 3</td>

</tr>

</table>

  

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

 

Row 1, Column 1	Row 1, Column 2	Row 1, Column 3
Row 2, Column 1	Row 2, Column 2	Row 2, Column 3

 

7.3  Περισσότερα για το χαρακτηριστικό Border

 

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

<table border=”10″>

HTML Table Headers

Εάν πρέπει να συμπεριλάβετε κεφαλίδες στον πίνακα σας, θα πρέπει να χρησιμοποιήσετε την ετικέτα <th> αντί της ετικέτας <td> στο πρώτο σύνολο <tr>.

Για παράδειγμα, για να δημιουργήσετε τον ακόλουθο πίνακα:

 

Header 1	Header 2	Header 3
Row 1, Στήλη 1	Row 1, Column 2	Row 1, Column 3

 

Θα πρέπει να γράψετε τον ακόλουθο κώδικα HTML:

<table border=”1″>

<tr>

<th>Header 1</th>

<th>Header 2</th>

 

<th>Header 3</th>

</tr>

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

<td>Row 1, Column 3</td>

</tr>

</table>

 

7.4  Υπότιτλοι σε έναν πίνακα

 

 Η λεζάντα μπορεί να είναι ο τίτλος ή η σύντομη περιγραφή του πίνακα. Μπορείτε να την προσθέσετε στην κορυφή ή στο κάτω μέρος του πίνακα, αλλά μέσα στις ετικέτες <table>.

 

Για να προσθέσετε μια λεζάντα, χρησιμοποιήστε αυτή τη σύνταξη:

<caption>Title of Your Table</caption>

  

7.5  Εργασία με κελιά που καταλαμβάνουν δύο γραμμές ή δύο στήλες

 

 Υπάρχουν φορές που χρειάζεται να έχετε επικεφαλίδες ή κελιά που εκτείνονται σε δύο ή περισσότερες γραμμές ή στήλες. Μπορείτε να το πετύχετε αυτό χρησιμοποιώντας colspan ή rowspan.

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

 

Category	Examples
Fruit	Apples	Oranges	Grapes

 

Θα γράψετε τον ακόλουθο κώδικα HTML:

 

<table border=”1″>

<tr>

<th>Category</th>

<th colspan=”3″>Examples</th>

</tr>

<tr>

<td>Fruit</td>

<td>Apples</td>

<td>Oranges</td>

<td>Grapes</td>

</tr>

</table>

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

 

<table border=”1″>

<tr>

<th>Department:</th>

<td>Accounting</td>

</tr>

<tr>

<th rowspan=”2″>Contact Person:</th>

<td>Freya Olsen</td>

</tr>

<tr>

<td>Maita Cot</td>

 

</tr>

</table>

 

 θα σας επέτρεπε να έχετε ένα κελί που εκτείνεται σε δύο γραμμές. Παρατηρήστε ότι η επικεφαλίδα για το Contact Person έχει το χαρακτηριστικό rowspan.

 

Department:	Accounting
Contact Person:	Freya Olsen
	Maita Cot

 

7.6  Διευκόλυνση της ανάγνωσης των δεδομένων

 

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

 

<table border=”1″ cellpadding=”10″>

<tr>

<td>This cell is padded. </td>

<td>This cell is padded too. </td>

</tr>

<tr>

<td>The world is round.</td>

<td>The sky is grey.</td>

</tr>

</table>

Ο πίνακας που θα προκύψει θα έχει το κείμενό σας με αρκετό λευκό χώρο γύρω του.

 

A	B
C	D

 

Αντί να μοιάζει έτσι:

 

A	B
C	D

7.7  Τα HTML tables (πίνακες HTML) είναι πολύ ευέλικτα

 

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

 

8.  Πλαίσια κειμένου και άλλα UserInput “Thingamajigs”

 

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

Κάθε φόρμα HTML εισάγεται από την ετικέτα <form> και αποτελείται από διαφορετικά στοιχεία εισόδου. Η ετικέτα <form> έχει διάφορα χαρακτηριστικά που θα λένε στο πρόγραμμα περιήγησης τι να κάνει με τις πληροφορίες που εισάγονται στα διάφορα πεδία. Αυτά τα χαρακτηριστικά είναι τα εξής: Η μορφή της φόρμας θα πρέπει να είναι η ακόλουθη:

• action
• method

Το χαρακτηριστικό action δηλώνει στο πρόγραμμα περιήγησής σας τη θέση του σεναρίου cgi που θα χρησιμοποιήσετε για την επεξεργασία της φόρμας. Από την άλλη πλευρά, το attribute method έχει δύο πιθανές τιμές, method=get ή method=post, οι οποίες καθορίζουν μια μέθοδο υποβολής δεδομένων στο script που έχετε καθορίσει στο attribute action.

 

8.1  Πεδία φόρμας

 

Κάθε φόρμα HTML μπορεί να περιέχει τα ακόλουθα πεδία. Πρώτα έχετε τα στοιχεία εισόδου:

 

Text

Password Checkbox

Radio

Submit

Reset File Hidden

Image

Button

 

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

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

8.2  Πεδίο κειμένου

 

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

 

Η σύνταξη για ένα πεδίο κειμένου έχει ως εξής:

<input type=”text” name=”shortnameforfield”>

Για παράδειγμα:

Σχολείο: <input type=”text” name=”schoolname”>

 

8.3  Κωδικός πρόσβασης

 

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

Η σύνταξη για ένα πεδίο κωδικού πρόσβασης έχει ως εξής:

<input type=”password” name=”passwd”>

 

8.4  Κουτιά ελέγχου

 

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

 

<input type=”checkbox” name=”color” value=”yes”> Yes, I am interested!!<br>

<input type=”checkbox” name=”color” value=”no”>No, do not contact me.

  

Αν θέλετε να έχετε μια από τις επιλογές στο πλαίσιο ελέγχου σας ήδη επιλεγμένη (προεπιλεγμένη από προεπιλογή), μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό checked για την επιλογή αυτή. Για παράδειγμα:

 

<input type=”checkbox” name=”color” value=”yes” selected> Yes, I am interested!<br>

<input type=”checkbox” name=”color” value=”no”>No, do not contact me.

8.5  Κουμπιά ραδιοφώνου (radio buttons)

 

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

<input type=”radio” name=”reply” value=”yay”> Yup<br>

<input type=”radio” name=”reply” value=”nay”>Nope

 

8.6  Υποβολή

 

Το κουμπί submit επιτρέπει στους επισκέπτες σας να στείλουν την εισαγωγή τους στον διακομιστή. Η σωστή σύνταξη για το κουμπί submit είναι:

<input type=”submit” value=”Submit“>

Μπορείτε να χρησιμοποιήσετε μια εικόνα για το κουμπί υποβολής ή απλά ένα κουμπί εικόνας.

<input type=”image” src=”image.gif” name=”image”>

 

8.7  Κουμπί επαναφοράς

 

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

Η σωστή σύνταξη για το κουμπί επαναφοράς είναι η εξής

<input type=”reset” value=”Reset”>

 

8.8  Drop-down μενού

 

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

Επιπλέον, τα αναπτυσσόμενα μενού τείνουν να καταλαμβάνουν λιγότερο χώρο από τα πλαίσια ελέγχου και τα κουμπιά επιλογής, επειδή δεν χρειάζεται να τοποθετήσετε τα πάντα. Για παράδειγμα, με τα radio κουμπιά και πλαίσια ελέγχου, θα έπρεπε να διαθέσετε πέντε γραμμές για πέντε επιλογές, αλλά με ένα αναπτυσσόμενο πλαίσιο θα έπρεπε να διαθέσετε μόνο μία γραμμή.

Έτσι, αν έχετε ένα πεδίο στο οποίο δεν χρειάζεται να βλέπουν οι χρήστες όλες τις επιλογές ταυτόχρονα, τα αναπτυσσόμενα μενού είναι μια εξαιρετική ιδέα. Ο τυπικός κώδικας για ένα αναπτυσσόμενο πλαίσιο θα ήταν ο εξής:

 

<select name=”alphabets”>

<option value=”a”>A</option>

<option value=”b”>B</option>

<option value=”c” selected>C</option>

<option value=”d”>D</option>

</select>

 

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

Αυτός ο κώδικας HTML θα αναγκάσει τους επισκέπτες σας να επιλέξουν μόνο μία επιλογή. Αν θέλετε να επιτρέψετε στους επισκέπτες σας να επιλέξουν περισσότερες από μία επιλογές, απλά προσθέστε το χαρακτηριστικό multiple στο πεδίο

<select> tag, ως εξής:

<select multiple name=”αλφάβητα”>

 

8.9  Περιοχή κειμένου

 

Μια περιοχή κειμένου λειτουργεί όπως ένα πεδίο κειμένου, μόνο που έχετε περισσότερο χώρο από μία γραμμή. Δεν ορίζεται από μια ετικέτα <input>, αλλά από μια ετικέτα όπως:

 

<textarea> Input text here

</textarea>

 

Αυτό θα εμφανίσει ένα πλαίσιο κειμένου με τις λέξεις “Εισαγωγή κειμένου εδώ” συμπληρωμένες. Μπορείτε επίσης να καθορίσετε τον αριθμό των γραμμών και των στηλών για να ελέγξετε το μέγεθος του πλαισίου κειμένου σας, π.χ. <textarea rows=”15″ cols=”20″>

Αυτά είναι τα διάφορα πεδία φόρμας που μπορείτε να χρησιμοποιήσετε σε μια φόρμα HTML.

Επίλογος

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

Η παρούσα εργασία, η οποία συντάχθηκε στο πλαίσιο του προγράμματος MicroMaster in Web Design και Development του Πανεπιστημίου Αιγαίου, στοχεύει να διαφωτίσει και να κατευθύνει τους ενδιαφερόμενους στην κατανόηση και την εφαρμογή της HTML. Πέρα από την τεχνική κατάρτιση, ο στόχος είναι να προωθηθεί η αντίληψη ότι η γλώσσα αυτή αποτελεί έναν κρίσιμο πυλώνα για την οικοδόμηση μιας ολοκληρωμένης και αποτελεσματικής ψηφιακής ταυτότητας.

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