Εισαγωγή στις ιδιότητες ετικετών html
Στο μάθημα αυτό θα μιλήσουμε για τις ιδιότητες ετικετών HTML. Οι ετικέτες html, όπως έχουμε πει, ορίζουν την μορφοποίηση του περιεχομένου το οποίο υπάρχει μεταξύ των ετικετών κλεισίματος και ανοίγματος. Σε κάθε ετικέτα html μπορούν να οριστούν μία ή περισσότερες ιδιότητες.
Τι είναι όμως ιδιότητες ετικετών html;
Μια ιδιότητα attribute είναι μια επιπλέον πληροφορία η οποία αφορά την συγκεκριμένη ετικέτα. Ο σκοπός χρήσης είναι η διαφοροποίηση της συγκεκριμένης ετικέτας από άλλες παρεμφερείς μέσα στην html σελίδα. Τοποθετείται πάντα στην ετικέτα ανοίγματος και έχει την ακόλουθη σύνταξη:
<ετικέτα ανοίγματος ιδιότητα=”τιμή”> περιεχόμενο <ετικέτα κλεισίματος>
Σε μια ετικέτα ανοίγματος μπορούν να υπάρχουν περισσότερες από μία ιδιότητες. Στις ιδιότητες γίνεται διάκριση μεταξύ πεζών και κεφαλαίων. Για τον λόγο αυτόν καλό είναι να χρησιμοποιούμε πεζά γράμματα. Η κάθε ετικέτα έχει τις δικές της ιδιότητες αλλά υπάρχουν και κοινές ιδιότητες μεταξύ των ετικετών.
Παράδειγμα ιδιοτήτων στην ετικέτα επικεφαλίδας
Η επικεφαλίδα έχουμε πει ότι ορίζεται με την ετικέτα h1 έως h2. Η επικεφαλίδα 1 λοιπόν μπορεί να οριστεί με την ετικέτα h1 ως εξής:
<h1>Επικεφαλίδα 1</h1>
Ο παραπάνω κώδικας θα δώσει μια κεφαλίδα 1 στοιχισμένη στην αριστερή πλευρά της σελίδας. Εάν όμως θέλουμε να την κεντράρουμε, τότε μπορούμε να χρησιμοποιήσουμε την ιδιότητα align ως εξής:
<h1 align=”center”>Επικεφαλίδα 1</h1>
Με την ιδιότητα align=”center” η κεφαλίδα θα στοιχηθεί στο κέντρο της σελίδας.
Μπορούμε να ορίσουμε περισσότερες από μια ιδιότητες σε μία ετικέτα ανοίγματος. Στην περίπτωση αυτή, αφήνουμε ένα κενό μεταξύ τους όπως στο ακόλουθο παράδειγμα:
<h1 align=”center” lang=”el”>Επικεφαλίδα 1</h1>
Σε αυτό το παράδειγμα εκτός από την ιδιότητα στοίχισης, ορίσαμε και την γλώσσα της επικεφαλίδας στα Ελληνικά με το lang=”el”.
Παράδειγμα ορισμού γλώσσας σε ιστοσελίδα
Όπως είπαμε παραπάνω, υπάρχουν κοινές ιδιότητες μεταξύ html ετικετών. Έτσι λοιπόν την ιδιότητα lang=”el” μπορούμε να την χρησιμοποιήσουμε και μέσα στην ετικέτα html, την βασική δομική ετικέτα κάθε ιστοσελίδας. Για να το κάνουμε αυτό, γράφουμε το ακόλουθο:
<html lang=”el”>
Με τον τρόπο αυτόν οι ελληνικοί χαρακτήρες θα αναγνωρίζονται μέσα στο html έγγραφο. Στην αντίθετη περίπτωση, ο κάθε ελληνικός χαρακτήρας μεταφράζεται ως ένα σύνολο μερικών μη αναγνώσιμων χαρακτήρων. Το αποτέλεσμα είναι ο επιπλέον κώδικας στην σελίδα και συνεπώς η καθυστέρηση καταφόρτωσης, download time.
Πίνακας ιδιοτήτων ετικετών html
| Ιδιότητα | Περιγραφή |
| alt | Ορίζει το εναλλακτικό κείμενο της εικόνας σε περίπτωση μη φόρτωσης της. |
| disabled | Ορίζει εάν ένα πεδίο φόρμας θα είναι ενεργό ή όχι |
| href | Ορίζει το URL (web address) ενός συνδέσμου |
| id | Ορίζει ένα μοναδικό id για την συγκεκριμένη html ετικέτα. Βλ. CSS. |
| src | Ορίζει την διεύθυνση URL μιας εικόνας. |
| style | Ορίζει ένα στυλ γραμμής, inline CSS style, στο συγκεκριμένο στοιχείο. |
| title | Ορίζει μια επιπλέον πληροφορία για την html ετικέτα το οποίο εμφανίζεται ως tooltip |
| value | Ορίζει ένα κείμενο ως αρχική τιμή για ένα html πεδίο φόρμας. |
Επίλογος
Στο μάθημα αυτό κάναμε μια εισαγωγή στις ιδιότητες ετικετών html οι οποίες μπορούν να ορίσουν επιπλέον πληροφορίες για την συγκεκριμένη ετικέτα html στην οποία εφαρμόζονται.
