Όλα τα στοιχεία HTML μπορούν να έχουν χαρακτηριστικά (attributes).
Τα χαρακτηριστικά (attributes) παρέχουν επιπλέον συμπληρωματική πληροφορία για ένα στοιχείο HTML.
Τα χαρακτηριστικά πάντα περιλαμβάνονται στην ετικέτα ανοίγματος.
Τα χαρακτηριστικά συνήθως αποτελούν συνδυασμό από όνομα και τιμή, όπως για παράδειγμα: name=”value” (όπου name είναι το όνομα και value είναι η τιμή).
Όλα τα παραδείγματα που ακολουθούν παρακάτω μπορείτε να τα βρειτε στο άρθρο μας με θέμα την εισαγωγή στη γλώσσα html.
Το χαρακτηριστικό της γλώσσας
Η γλώσσα του εγγράφου HTML καθορίζεται από το χαρακτηριστικό της γλώσσας (lang attribute). Το χαρακτηριστικό της γλώσσας μπορεί να δηλωθεί στην ετικέτα <html> όπως στο παράδειγμα που ακολουθεί:
<!DOCTYPE html>
<html lang=”en-US”>
<body>
…
</body>
</html>
Η δήλωση της γλώσσας είναι πολύ σημαντική διότι μας εξασφαλίζει οτι το περιεχόμενό μας θα εμφανίζεται σωστά σε κάθε οθόνη. Είτε πρόκειται για υπολογιστή, είτε για tablet είτε για κινητό smart phone, σε οποιαδήποτε γλώσσα.
Τα δυο πρώτα γράμματα καθορίζουν τη γλώσσα (en). Εάν υπάρχει διάλεκτος, τότε χρησιμοποιούμε δυο επιπλέον γράμματα (US).
Το συγκεκριμένο χαρακτηριστικό ενημερώνει το φυλλομετρητή ότι η γλώσσα είναι η Αγγλική και η διάλεκτος είναι των Ηνωμένων Πολιτειών Αμερικής.
Για την Ελληνική γλώσσα θα έπρεπε να χρησιμοποιήσουμε το χαρακτηριστικό <html lang=”el”>.
Το χαρακτηριστικό του τίτλου
Όταν προσθέσουμε χαρακτηριστικό τίτλου (title attribute) σε ένα στοιχείο html τότε το περιεχόμενο του στοιχείου τίτλου θα παρουσιαστεί ως αναδυόμενο κείμενο (tooltip text) όταν μετακινηθεί το ποντίκι πάνω στο συγκεκριμένο στοιχείο.
<p title=”Here is the title”>
Here is the paragraph.
</p>
Το αποτέλεσμα φαίνεται στην εικόνα, στην οποία μπορούμε να διακρίνουμε και το tooltip text:
Το χαρακτηριστικό υπερσύνδεσης
Οι σύνδεσμοι στη γλώσσα html δηλώνονται με την ετικέτα <a>. Η διεύθυνση του συνδέσμου δηλώνεται μέσα στην ετικέτα <a> χρησιμοποιώντας το χαρακτηριστικό υπερσύνδεσης (href attribute).
<a href=”http://www.html.gr”>You can visit html.gr</a>
Το αποτέλεσμα φαίνεται στην εικόνα:
Στο συγκεκριμένο παράδειγμα το χαρακτηριστικό href δηλώνει ότι ο σύνδεσμος οδηγεί στη διεύθυνση http://www.html.gr.
Το χαρακτηριστικό του μεγέθους
Στη γλώσσα html οι εικόνες παρουσιάζονται χρησιμοποιώντας την ετικέτα <img>. Η διεύθυνση του αρχείου της εικόνας καθορίζεται από το χαρακτηριστικό src. Οι διαστάσεις της εικόνας, δηλαδή το πλάτος και το ύψος, καθορίζονται από τα χαρακτηριστικά width και height.
<img src=”http://html.gr/wp-content/uploads/2016/09/eigagogi-stin-html.jpg” alt=”εισαγωγή στην html” width=”1000″ height=”883″>
Το αποτέλεσμα φαίνεται στην εικόνα:
Στο παράδειγμά μας η εικόνα βρίσκεται στη διεύθυνση “http://html.gr/wp-content/uploads/2016/09/eigagogi-stin-html.jpg” και έχει πλάτος 1000px και ύψος 833px.
Το χαρακτηριστικό alt
Στo χαρακτηριστικό alt δηλώνουμε ένα κείμενο το οποίο θα εμφανιστεί σε περίπτωση που το στοιχείο HTML δεν καταφέρει να εμφανιστεί. Την τιμή του alt attribute μπορούν να τη διαβάσουν οι φυλλομετρητές. Τις διαβάζουν με τον τρόπο που θα καταλάβαινε τη σελίδα ένας τυφλός ο οποίος δεν μπορεί να δει τις εικόνες και μπορεί μόνο να ακούσει τα κείμενα.
<img src=”http://html.gr/wp-content/uploads/2016/09/eigagogi-stin-html.jpg” alt=”εισαγωγή στην html” width=”1000″ height=”883″>
Στο παράδειγμά μας εάν η εικόνα δεν καταφέρει να εμφανιστεί στο browser, τότε στη θέση της θα γραφτεί το κείμενο “εισαγωγή στην html”.
Μονά ή διπλά εισαγωγικά;
Για να δηλώσουμε τις τιμές των χαρακτηριστικών μπορούμε να χρησιμοποιήσουμε είτε μονά είτε διπλά εισαγωγικά.
Για παράδειγμα, όπως και να δηλώσουμε το χαρακτηριστικό της γλώσσας, θα γίνει αποδεκτό:
<html lang=’en-US’>
<html lang=”en-US”>
Αρκεί να χρησιμοποιήσουμε μόνο μονά εισαγωγικά ή μόνο διπλά εισαγωγικά μέσα στην ίδια ετικέτα. Σε διαφορετική περίπτωση δεν θα λειτουργήσει σωστά, όπως για παράδειγμα:
<html lang=’en-US”>
Διότι εφόσον άνοιξε με διπλά εισαγωγικά, θα πρέπει να κλείσει με διπλά εισαγωγικά επίσης. Δεν βρίσκει διπλά εισαγωγικά, και δημιουργεί πρόβλημα.
Εάν δεν γνωρίζετε πως να δημιουργήσετε αρχεία HTML στον υπολογιστή σας τότε δεν έχετε παρα να διαβάσετε το άρθρο μας για την εισαγωγή στην κατασκευή ιστοσελίδων στο οποίο εξηγούμε αναλυτικά πως να δημιουργήσετε και να εμφανίσετε την πρώτη σας σελίδα html.
