Σύνδεση
Μενού

Τα στοιχεία της HTML

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

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

Ετικέτα έναρξης Περιεχόμενο Ετικέτα τερματισμού
<p> Το περιεχόμενο της παραγράφου </p>
<a href=”an_html_document.html”> Ένας απλός σύνδεσμος </a>
<img src=”an_image.jpg” width=”100” height=”100” />

Σύνταξη στοιχείων HTML

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

Να σημειωθεί πως μερικές ετικέτες της HTML έχουν τη δυνατότητα να είναι καινές. Οι ετικέτες της HTML που μπορούν να μην έχουν περιεχόμενο κλείνουν κατευθείαν στην ετικέτα έναρξης. Ο τρόπος που οι καινές ετικέτες κλείνουν είναι απλός. Απλά πρέπει να προσθέσετε μια πλαγιοκάθετο στα αριστερά της δεξιάς αγκύλης της ετικέτας.

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

<br />
<hr />
<img src=”…” />

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

Ένθετες ετικέτες HTML

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

<html>
<body>
<p>Αυτό είναι ένα δοκιμαστικό κείμενο με ένα <a href=”http://www.stigmahost.com”>σύνδεσμο</a></p>
</body>
</html>

Το παραπάνω έγγραφο περιέχει τέσσερις ετικέτες HTML που είναι ένθετες η μία μέσα στην άλλη. Για παράδειγμα η ετικέτα a είναι ένθετη στην ετικέτα p που με τη σειρά της είναι ένθετη στην ετικέτα body, όπου και αυτή με τη σειρά της είναι ένθετη στην ετικέτα html.

Επεξήγηση του εγγράφου

Στο παραπάνω έγγραφο, η ετικέτα a δημιουργεί ένα υπέρ-σύνδεσμο προς τη σελίδα της StigmaHost. Η ετικέτα του υπέρ-συνδέσμου αποτελείτε από την ετικέτα έναρξης και την ετικέτα τερματισμού, και το περιεχόμενο της ετικέτας είναι το “σύνδεσμος”.

Η ετικέτα p ορίζει μια παράγραφο μέσα στο έγγραφο της HTML μέσα στις ετικέτες έναρξης και τερματισμού p. Το περιεχόμενο της ετικέτας είναι το “Αυτό είναι ένα δοκιμαστικό κείμενο με ένα” και ένα στοιχείο υπέρ-συνδέσμου.

Το στοιχεία body ορίζει τον βασικό κορμό του εγγράφου ανάμεσα στις ετικέτες έναρξης και τερματισμού body. Το περιεχόμενο της ετικέτας body είναι ένα στοιχείο p

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

Μην ξεχνάτε την ετικέτα τερματισμού

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

<p>Μία δοκιμαστική παράγραφος
<p>Ακόμα μια δοκιμαστική παράγραφος

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

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

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

Καινά στοιχεία HTML

Οι ετικέτες που δεν έχουν ετικέτα τερματισμού είναι αυτές που αποκαλούνται καινά στοιχεία. Ένα καινό στοιχείο για παράδειγμα είναι το <br> το οποίο δεν έχει μια ετικέτα τερματισμού.

Συμβουλή: Στην XHTML όλες οι ετικέτες πρέπει να κλείνουν. Για να κλείσετε μια ετικέτα που δεν έχει ετικέτα τερματισμού θα πρέπει να προσθέσετε μια πλαγιοκάθετο στα αριστερά της δεξιάς αγκύλης της ετικέτας. Για παράδειγμα η ετικέτα <br> της HTML στην XHTML κλείνει ως <br />. Αυτός είναι και ο σωστός τρόπος για να κλείνετε καινές ετικέτες στην XHTML.

Συμβουλή: Πεζά γράμματα στης ετικέτες

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

<p>Παράγραφος</p>
<P>Παράγραφος</P>
<img src=”image_file.jpg” />
<IMG src=”image_file.jpg” />
<iMg sRC=”image_file.jpg” />

Ωστόσο εμείς σας προτείνουμε να χρησιμοποιείτε πεζά γράμματα, αφενός γιατί η κοινοπραξία του World Wide Web (W3C) το προτείνει για την HTML 4 ενώ για την XHTML το επιβάλει.

[COL size=”one_half”]« Τα βασικά της HTML[/COL] [COL size=’one_half’ last=’last’]

Ιδιότητες στις ετικέτες HTML »

[/COL]