Στο σημερινό άρθρο θα σας παρουσιάσω τις ετικέτες ελέγχου έκδοσης του Internet Explorer έτσι ώστε να είστε σε θέση να φορτώσετε περιεχόμενο στη σελίδα σας που είναι απαραίτητο για όποια έκδοση του browser θέλετε.

Γιατί να χρησιμοποιήσετε ετικέτες ελέγχου για τα CSS;

• Παρουσιάζονται προβλήματα που χρειάζονται ειδική μεταχείριση
• Για να διατηρήσετε το κεντρικό αρχείο CSS της ιστοσελίδας σας καθαρό από Hacks
• Για να μην δημιουργείτε inline Hacks.
• Είναι μια κοινά αποδεκτή τεχνική, ακόμα και από την ίδια την Microsoft.

Σε αυτό το σημείο θα πρέπει να σημειωθεί πως οι ετικέτες ελέγχου δεν είναι μόνο για τα CSS σας. Μπορείτε να τις χρησιμοποιήσετε για να φορτώσετε επίσης διάφορα σενάρια εντολών (JavaScript) ή ακόμα και να εμφανίσετε διάφορα μηνύματα σε χρήστες με Internet Explorer.

Ο κώδικας

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

Επίσης οι κανόνες ελέγχου είναι αρκετά προφανείς. Για να κάνουμε ένα λογικό έλεγχο με τον τελεστή «not» χρησιμοποιούμαι το σύμβολο «!». Έτσι, για να πούμε ότι δεν θέλουμε να είναι ο Internet Explorer η σύνταξη θα είναι κάπως έτσι !IE. Επίσης χρησιμοποιούνται οι τελεστές «gt» (greater than) που σημαίνει μεγαλύτερο από, «gte» (greater than equal) που σημαίνει μεγαλύτερο από ή ίσο, «lt» (lower than) που σημαίνει μικρότερο από και τέλος «lte» (lower than equal) που σημαίνει μικρότερο από ή ίσο.

Στόχευση σε όλες τις εκδόσεις του Internet Explorer

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση όλων των περιηγητών διαδικτύου εκτός του Internet Explorer

<!--[if !IE]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση μόνο του Internet Explorer 7

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση μόνο του Internet Explorer 6

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση μόνο του Internet Explorer 5

<!--[if IE 5]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση μόνο του Internet Explorer 5.5

<!--[if IE 5.5000]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση στους Internet Explorer 6 και κάτω

<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση στους Internet Explorer 7 και κάτω

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση στους Internet Explorer 6 και πάνω

<!--[if gt IE 5.5]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

<!--[if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση στους Internet Explorer 7 και πάνω

<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση στους Internet Explorer 8 και πάνω

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Τι είναι ένα υπέρ-κείμενο;

Ο όρος υπέρ-κείμενο σημαίνει πως κάποιο κομμάτι κειμένου σε ένα έγγραφο HTML είναι συνδεδεμένο μέσω ενός συνδέσμου σε μια διαφορετική θέση του ιδίου εγγράφου ή σε άλλο έγγραφο. Κάνοντας ο χρήστης κλικ πάνω σε αυτό το «θερμό σημείο» ο χρήστης μεταφέρετε σε αυτή τη θέση.

Τι είναι η σήμανση;

Σήμανση σημαίνει πως κάποια τμήματα του εγγράφου μιας ιστοσελίδας έχουν την κατάλληλη σήμανση για να υποδείξουν το πως πρέπει να εμφανίζονται στον Web Browser.

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

Τι θα μάθετε σε αυτή τη σειρά άρθρων

Αυτή η σειρά μαθημάτων για HTML θα σας μάθει τα βασικά για την HTML και τις ετικέτες της. Μετά το πέρας αυτής της σειράς άρθρων θα είστε σε θέση να δημιουργήσετε μια απλή ιστοσελίδα.

Η σειρά μαθημάτων για βασική HTML αποτελείτε από 24 ενότητες και είναι οι ακόλουθες:

Τι θα χρειαστείτε;

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

• Ένα επεξεργαστή κειμένου
• Ένα περιηγητή διαδικτύου
• Τη δημιουργικότητα σας!

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

Αν ο υπολογιστής σας έχει Windows, σας προτείνω το Σημειωματάριο ή το WordPad. Σε συστήματα που έχουν UNIX λογισμικό μπορείτε να χρησιμοποιήσετε είτε το PICO είτε το VI-EDITOR. Αν αποφασίσετε να εργαστείτε με κάποιο άλλο πρόγραμμα να θυμάστε πως πρέπει να αποθηκεύεται τα αρχεία HTML σε μορφή απλού κειμένου ASCII. Για να αποθηκεύσετε ένα αρχείο με το Σημειωματάριο κάντε κλικ στο Αρχείο -> Αποθήκευση ως. Ένας διάλογος του συστήματος θα εμφανιστεί. Πληκτρολογήστε το όνομα του αρχείου και στο τέλος βάλτε την επέκταση .htm ή .html στο πεδίο «Όνομα αρχείου:» και επιλέξτε «Όλα τα αρχεία» στο πεδίο «Αποθήκευση ως».

Όλα καλά ως εδώ. Ποια επέκταση επιλέξατε δεν έχει καμία σημασία. Το μόνο που πρέπει να θυμάστε είναι πως η επέκταση που επιλέξατε θα πρέπει να παραμείνει ίδια και για τις υπόλοιπες σελίδες του web site σας.

Για να δείτε το αποτέλεσμα της ιστοσελίδας σας, χρειάζεστε ένα περιηγητή διαδικτύου. Ευτυχώς για εμάς υπάρχουν πολλοί διαθέσιμοι και είναι όλοι τους δωρεάν. Μια καλή πρακτική ως web developers είναι να κάνετε έλεγχο για το πως τελικά εμφανίζεται η ιστοσελίδα σας σε όσο ποιο πολλούς web browsers μπορείτε. Υπό κανονικές συνθήκες, η σελίδα σας θα πρέπει να εμφανίζεται ακριβώς το ίδιο σε όλους τους web browsers. Αυτό αποκαλείτε cross-browser compatibility.

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

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

Αν ο ηλεκτρονικός σας υπολογιστής έχει Windows ανοίξτε το Σημειωματάριο

Τώρα πληκτρολογήστε τον ακόλουθο κώδικα:

<html>
<head>
    <title>Η πρώτη μου σελίδα σε HTML</title>
</head>
<body>
    Αυτή είναι η πρώτη μου σελίδα σε HTML
</body>
</html>

Αν βαριέστε να γράψετε τον παραπάνω κώδικα απλά αντιγράψτε τον και κάντε επικόλληση στο σημειωματάριο. Όπως και να έχει εγώ προτείνω να τον γράψετε γιατί έτσι θα αποστηθίσετε καλύτερα τις «εντολές» της HTML.

Τώρα δημιουργήστε ένα νέο κατάλογο στον σκληρό σας δίσκο. Ας τον ονομάσουμε «htmlprojects«. Στη συνέχεια, στο Σημειωματάριο κάντε κλικ στο «Αρχείο -> Αποθήκευση ως» και πλοηγηθείτε μέχρι τον νέο φάκελο που μόλις δημιουργήσατε. Για όνομα αρχείου πληκτρολογήστε »first.html«, και στο πεδίο «Αποθήκευση ως» επιλέξτε «Όλα τα αρχεία», και τέλος κάντε κλικ στο «Αποθήκευση»

Η εικόνα που ακολουθεί παρουσιάζει συνοπτικά την παραπάνω διαδικασία :

Τώρα ανοίξτε την Εξερεύνηση των Windows και ανοίξτε τον νέο φάκελο που δημιουργήσαμε πριν «htmlprojects». Αν έχετε ακολουθήσει τις παραπάνω οδηγίες σωστά θα πρέπει να έχετε το πρώτο σας αρχείο html σε αυτό το φάκελο. Κάντε διπλό κλικ πάνω στο αρχείο για να ανοίξει. Ο προ επιλεγμένος περιηγητής διαδικτύου που έχετε στον υπολογιστή σας θα ανοίξει το αρχείο.

Το τελικό αποτέλεσμα θα πρέπει να είναι κάπως έτσι:

Αυτός είναι ο κώδικας του προηγούμενου άρθρου:

<html>
<head>
    <title>Η πρώτη μου σελίδα σε HTML</title>
</head>
<body>
    Αυτή είναι η πρώτη μου σελίδα σε HTML
</body>
</html>

Και αυτό είναι το τελικό αποτέλεσμα σε ένα web browser:

Ας αναλύσουμε λοιπόν των κώδικα σε συνδυασμός με το τελικό αποτέλεσμα στον web browser:

• Ο κώδικας αρχίζει με την ετικέτα <html> και τελειώνει με την ετικέτα </html>. Αυτές οι ετικέτες είναι που καθορίζουν την αρχή και το τέλος ενός εγγράφου HTML. Σε κάθε HTML έγγραφο θα βρείτε την ετικέτα <html> στην αρχή του εγγράφου και την ετικέτα </html> στο τέλος του εγγράφου. Αυτές οι ετικέτες δεν είναι υποχρεωτικές, ωστόσο είναι καλή πρακτική να τις περιλαμβάνετε στον έγγραφο σας.
• Ένα έγγραφο HTML έχει επίσης ένα τμήμα HEAD και ένα τμήμα BODY. Οι ετικέτες <head> και </head> καθορίζουν το HEAD τμήμα της σελίδας, ενώ οι ετικέτες <body> και </body> καθορίζουν το BODY τμήμα της σελίδας.
• Στο τμήμα HEAD επίσης θα έχετε δει τις ετικέτες <title> και </title>, με το κείμενο «Η πρώτη μου σελίδα σε HTML» ανάμεσα τους. Ποιος είναι ο λόγος ύπαρξης αυτής της ετικέτας όμως; Αν παρατηρήσετε το έγγραφο σας στον web browser, το κείμενο «Η πρώτη μου σελίδα σε HTML» εμφανίζεται πάνω στην καρτέλα του περιηγητή σας. Οπότε το κείμενο που γράφετε μεταξύ των ετικετών <title> και </title> θα εμφανίζετε σε αυτό το μέρος του web browser.
• Και τώρα το ποιο ζουμερό κομμάτι μιας ιστοσελίδας, οι ετικέτες <body> και </body>. Ότι γράφουμε μεταξύ αυτών των δυο ετικετών εμφανίζεται στον Web Browser. Στην περίπτωση μας έχουμε γράψει το κείμενο «Αυτή είναι η πρώτη μου σελίδα σε HTML».  Προφανώς και θα έχετε παρατηρήσει πως αυτό είναι και το κείμενο που εμφανίζεται μέσα στο παράθυρο του web browser.

Συμπεράσματα

• Κάθε HTML έγγραφο αρχίζει και τελειώνει με τις ετικέτες <html> και </html>
• Κάθε HTML έγγραφο αποτελείτε από το τμήμα HEAD που περιβάλλεται από τις ετικέτες <head> και </head> και ένα τμήμα BODY που περιβάλλεται από τις ετικέτες <body> και </body> αντίστοιχα.
• Οι περισσότερες ετικέτες στην HTML είναι σε ζευγάρια (εκτός από μερικές που δεν έχουν ετικέτα τερματισμού), με την ετικέτα τερματισμού να έχει το σύμβολο «/» στα αριστερά από το όνομά της.
• Μερικές ετικέτες μπορούν να περιέχουν μέσα τους άλλες ετικέτες. Αυτό αποκαλείτε ενθυλάκωση. Στην περίπτωση μας η ετικέτες <title>…</title> είναι ενθυλακωμένες στις ετικέτες <head>…</head>.
• Το κείμενο μέσα στις ετικέτες <title></title> εμφανίζεται στον τίτλο του παραθύρου του Web Browser.
• Το κείμενο μέσα στις ετικέτες <body></body> εμφανίζεται μέσα στο παράθυρο του Web Browser.

Η βασική σύνταξη μιας ετικέτας είναι η ακόλουθη:

<όνομα_ετικέτας {ιδιότητα1{=»τιμή_ιδιότητας1″}}>{κείμενο που επηρεάζεται}</όνομα_ετικέτας>

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

• Κάθε ετικέτα αποτελείτε από το όνομα της μέσα στα σύμβολα του μικρότερου από «<» και του μεγαλύτερου από «>».
• Το όνομα μιας ετικέτας δεν μπορεί να έχει κενά, οπότε η ετικέτα <ht ml> είναι λανθασμένη.
• Οι περισσότερες ετικέτες απαιτούν μια ετικέτα τερματισμού η οποία διαφέρει από την ετικέτα αρχής γιατί έχει στα αριστερά του ονόματος μια πλαγιοκάθετο «/». Οπότε για την ετικέτα <strong> θέλουμε και την ετικέτα </strong>.
• Οι ιδιότητες ελέγχουν τα διάφορα χαρακτηριστικά της ετικέτας. Κάθε ετικέτα έχει κάποιες προεπιλεγμένες τιμές για τις ιδιότητες της. Για να αλλάξετε αυτές τις τιμές θα πρέπει να ορίσετε την νέα τιμή στην αντίστοιχη ιδιότητα. Για παράδειγμα αν θέλετε να δημιουργήσετε μια οριζόντια γραμμή κατά μήκος της σελίδας σας θα πρέπει να χρησιμοποιήσετε την ετικέτα <hr>. Αυτή η ετικέτα δημιουργεί μια γραμμή σαν αυτή που ακολουθεί:
  

  ---

  Ωστόσο η ετικέτα <hr> χωρίς καμία ιδιότητα δημιουργεί μια γραμμή που καλύπτει το 100% της σελίδας. Για να μειώσετε το πλάτος της στο μισό θα πρέπει να αλλάξετε την τιμή πλάτους στο 50%. Το όνομα της ιδιότητας και η τιμή της γράφονται πάντα στην ετικέτα αρχής στα δεξιά του ονόματος της. Άρα ο για να αλλάξουμε το πλάτος της γραμμής μας θα πρέπει η ετικέτα να μοιάζει κάπως έτσι: <hr width=»50%»>, και το αποτέλεσμα θα είναι κάπως έτσι:

  ---

  Κάθε ετικέτα μπορεί να έχει πολλές ιδιότητες και κάθε ιδιότητα με τη σειρά της μπορεί να έχει περισσότερες από μια τιμές. Επίσης θα πρέπει να σημειωθεί πως υπάρχουν και ιδιότητες χωρίς τιμές.

• Συχνά οι ετικέτες περιβάλουν κάποιο κείμενο. Αυτό το κείμενο εμφανίζετε με την κατάλληλη μορφή βάση των οδηγιών που δίνει η ετικέτα και οι ιδιότητες της ετικέτας που το περιβάλει στον περιηγητή διαδικτύου.
  Ένα απλό παράδειγμα είναι τα έντονα γράμματα που δημιουργούνται με την ετικέτα <b></b>. Όταν αυτές οι ετικέτες περιβάλουν ένα κείμενο, τότε το κείμενο εμφανίζετε έντονα γραμμένο όπως και το παράδειγμα που ακολουθεί: Ένα έντονο κείμενο και η HTML είναι <b>Ένα έντονο κείμενο</b>
• Οι περιηγητές διαδικτύου αγνοούν τις άγνωστες ετικέτες και ιδιότητες. Για παράδειγμα η ετικέτα <train> δεν είναι κατανοητή από τον περιηγητή διαδικτύου και έτσι την αγνοεί.

Υπάρχουν έξι επίπεδα επικεφαλίδων στην HTML που ορίζονται από τις ακόλουθες ετικέτες: <h1>, <h2>, <h3>, <h4>, <h5> και <h6>.

Η έξοδος από αυτές τις ετικέτες είναι η ακόλουθη:

<h1>Μια ετικέτα h1</h1>

Μια ετικέτα h1

<h2>Μια ετικέτα h2</h2>

Μια ετικέτα h2

<h3>Μια ετικέτα h3</h3>

Μια ετικέτα h3

<h4>Μια ετικέτα h4</h4>

Μια ετικέτα h4

<h5>Μια ετικέτα h5</h5>

Μια ετικέτα h5

<h6>Μια ετικέτα h6</h6>

Μια ετικέτα h6

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

Τώρα ας δημιουργήσουμε ακόμα ένα αρχείο html. Ανοίξτε το Σημειωματάριο των Windows και γράψτε τον κώδικα που ακολουθεί:

<html>
<head>
    <title>Σελίδα με επικεφαλίδες</title>
</head>
<body>
    <h1>Επικεφαλίδα μεγέθους 1</h1>
    <h2>Επικεφαλίδα μεγέθους 2</h2>
    <h3>Επικεφαλίδα μεγέθους 3</h3>
    <h4>Επικεφαλίδα μεγέθους 4</h4>
    <h5>Επικεφαλίδα μεγέθους 5</h5>
    <h6>Επικεφαλίδα μεγέθους 6</h6>
</body>
</html>

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

Τι είναι οι ιδιότητες ετικέτας στην HTML

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

<όνομα_ετικέτας ιδιότητα=»τιμή»>….</όνομα_ετικέτας>

Άρα:

• Η ιδιότητες και οι τιμές τους τοποθετούνται στην ετικέτα αρχής.
• Το σύμβολο της ισότητας «=» χωρίζει το όνομα της ιδιότητας από την τιμή
• Η τιμή της ιδιότητας περιβάλλεται από εισαγωγικά. Τα εισαγωγικά είναι απαραίτητα αν η τιμή περιέχει κενά. Όπως και να έχει εγώ τα χρησιμοποιώ και σας συμβουλεύω να το κάνετε και εσείς.

Όλες οι ετικέτες επικεφαλίδας από την <h1> μέχρι την <h6> έχουν ιδιότητες. Οι ποιο σημαντικές βέβαια είναι οι ιδιότητες align και title.

Η ιδιότητα align μπορεί να δεχτεί μια από τις τέσσερις τιμές left, right, center και justify

Ακολουθεί ένα παράδειγμα :

<h3 align=»left»>Αριστερή στοίχιση</h3>

Αριστερή στοίχιση

<h3 align=»center»>Στοίχιση στο κέντρο</h3>

Στοίχιση στο κέντρο

<h3 align=»right»>Δεξιά στοίχιση</h3>

Δεξιά στοίχιση

Στην ιδιότητα title μπορείτε να βάλετε κάποιο κείμενο συμβουλευτικό το οποίο θα εμφανίζεται όταν ο χρήστης θα περνά το ποντίκι του πάνω από την επικεφαλίδα.

<h3 title=»Να ένας τίτλος επικεφαλίδας»>Πέρνα το ποντίκι από πάνω μου</h3>

Πέρνα το ποντίκι από πάνω μου

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

Η ετικέτα αρχής για τα σχόλια στην HTML είναι η «<!–» ενώ η ετικέτα τερματισμού είναι η «–>»

Μέσα στις ετικέτες σχολίων μπορείτε να γράψετε όσα σχόλια θέλετε, και σε όσες γραμμές θέλετε χωρίς να έχετε την αγονία μην φανούν στη σελίδα σας. Ότι υπάρχει μεταξύ των ετικετών <!– και –> οι περιηγητές διαδικτύου απλά τα αγνοούν.

Αν θέλετε μπορείτε να δημιουργήσετε ένα νέο αρχείο στο Σημειωματάριο και να γράψετε τον κώδικα που ακολουθεί:

<html>
<head>
    <title>Μια σελίδα με σχόλια</title>
    <!--
    Σε αυτό το τμήμα έχω γράψει
    ένα σχόλιο που θέλει περισσότερες
    από μια γραμμές για να διατυπωθεί.
    -->
</head>
<body>
    Αυτό το κείμενο είναι ορατό
    <!-- Αυτό το κείμενο δεν είναι ορατό -->
</body>
</html>

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

Η προτροπή μου είναι να αρχίσετε από τώρα που μαθαίνετε την HTML να χρησιμοποιείτε τα σχόλια για να σας γίνουν συνήθεια.

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

<html>
<head>
<title>Δοκιμή για την ετικέτα br</title>
</head>
<body>
Αυτό είναι ένα πραγματικά μεγάλο κείμενο που αποτελείτε από τρις
προτάσεις και σας παρουσιάζει τον τρόπο λειτουργίας της
ετικέτας δημιουργίας νέας γραμμής. Αυτή η ετικέτα χρησιμοποιείτε συχνά
για να δημιουργήσει νέες γραμμές στον κώδικα μιας html σελίδας. Επίσης χρησιμοποιείτε
για να δημιουργήσει καινό χώρο σε ένα έγγραφο.
</body>
</html>

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

Αυτή τη φορά δοκιμάστε να πατήσετε το πλήκτρο Enter 10 φορές στο τέλος μιας γραμμής, αποθηκεύστε το αρχείο και κάντε ξανά προβολή. Θα παρατηρήσετε πως και τώρα δεν θα δημιουργηθούν νέες γραμμές. Αλλά γιατί; Αυτό συμβαίνει επειδή η HTML έχει συγκεκριμένη ετικέτα για να αφήνετε κενές γραμμές. Αυτή η ετικέτα είναι η <br>.

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

<html>
<head>
<title>Δοκιμή για την ετικέτα br</title>
</head>
<body>
Αυτό είναι ένα πραγματικά μεγάλο κείμενο που αποτελείτε από τρις<br>
προτάσεις και σας παρουσιάζει τον τρόπο λειτουργίας της<br>
ετικέτας δημιουργίας νέας γραμμής. Αυτή η ετικέτα χρησιμοποιείτε συχνά<br>
για να δημιουργήσει νέες γραμμές στον κώδικα μιας html σελίδας. Επίσης χρησιμοποιείτε<br>
για να δημιουργήσει καινό χώρο σε ένα έγγραφο.
</body>
</html>

Το κείμενο με την ετικέτα <br> αυτή τη φορά θα πρέπει να εμφανίζετε στον Web Browser σε πέντε γραμμές.

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

Η αντίθετη ετικέτα τη <br> είναι η ετικέτα <nobr> που σε αντίθεση με την <br> έχει ετικέτα τερματισμού.

Όταν χρησιμοποιείτε την ετικέτα <nobr>, το κείμενο μέσα στην ετικέτα δεν θα αναδιπλωθεί ακόμα και αν το πλάτος του ξεπερνά το συνολικό πλάτος του περιηγητή διαδικτύου. Σε αυτή την περίπτωση θα δημιουργηθεί μια οριζόντια μπάρα κύλισης στο κάτω μέρος του web browser.

Δοκιμάστε τον κώδικα που ακολουθεί για να δείτε πως λειτουργεί η ετικέτα <nobr>

<html>
<head>
<title>Testing the BR tag</title>
</head>
<body>
<nobr>
Αυτό είναι ένα μεγάλο τμήμα κειμένου το οποίο αποτελείτε από τρις
προτάσεις και προβάλει τη λειτουργία της ετικέτας nobr. Η ετικέτα nobr
υποχρεώνει το κείμενο μέσα στην ετικέτα αρχής και τερματισμού
να προβάλετε σε μια μόνο γραμμή και σαν αποτέλεσμα θα έχει να
εμφανίσει μια οριζόντια γραμμή κύλισης αν το κείμενο είναι πραγματικά πολύ μεγάλο και συνεχίζει
και συνεχίζει και συνεχίζει και συνεχίζει και συνεχίζει και συνεχίζει
και συνεχίζει και συνεχίζει και συνεχίζει και συνεχίζει και συνεχίζει
και συνεχίζει και συνεχίζει και συνεχίζει και συνεχίζει και συνεχίζει
και συνεχίζει και συνεχίζει και συνεχίζει και συνεχίζει και συνεχίζει
και συνεχίζει και συνεχίζει και συνεχίζει και συνεχίζει και συνεχίζει
</nobr>
</body>
</html>