Τι είναι ένα αρχείο HTML;

Η HTML (Hyper Text Markup Language) είναι η επέκταση για ιστοσελίδες που δημιουργούνται για εμφάνιση σε προγράμματα περιήγησης. Γνωστή ως γλώσσα του Ιστού, η HTML έχει εξελιχθεί με απαιτήσεις νέων απαιτήσεων πληροφοριών που πρέπει να εμφανίζονται ως μέρος ιστοσελίδων. Η τελευταία παραλλαγή είναι γνωστή ως HTML 5 που δίνει μεγάλη ευελιξία στην εργασία με τη γλώσσα. Οι σελίδες HTML είτε λαμβάνονται από τον διακομιστή, όπου φιλοξενούνται, είτε μπορούν να φορτωθούν και από το τοπικό σύστημα. Κάθε σελίδα HTML αποτελείται από στοιχεία HTML, όπως φόρμες, κείμενο, εικόνες, κινούμενα σχέδια, συνδέσμους κ.λπ. Αυτά τα στοιχεία αντιπροσωπεύονται από ετικέτες και πολλές άλλες, όπου κάθε ετικέτα έχει αρχή και τέλος. Μπορεί επίσης να ενσωματώσει εφαρμογές γραμμένες σε γλώσσες δέσμης ενεργειών όπως JavaScript και Style Sheets (CSS) για συνολική αναπαράσταση διάταξης.

Σύντομη Ιστορία

Από την έναρξή του και τον πρώτο του ρόλο, οι προδιαγραφές HTML διατηρήθηκαν από την Κοινοπραξία Παγκόσμιου Ιστού (W3C) από το 1996. Το 2000, έγινε επίσης διεθνές πρότυπο (ISO/IEC 15445:2000). Το 1999 δημοσιεύτηκε η HTML 4.01. Το 2004, η ομάδα εργασίας Web Hypertext Application Technology Working Group (WHATWG) άρχισε να εργάζεται για την έκδοση HTML5, η οποία έγινε κοινό παραδοτέο με το W3C το 2008. Ολοκληρώθηκε και τυποποιήθηκε στις 28 Οκτωβρίου 2014.

Δομή μορφής αρχείου HTML

Ένα έγγραφο HTML 4 αποτελείται από τρία μέρη:

  1. μια γραμμή που περιέχει πληροφορίες έκδοσης HTML
  2. μια δηλωτική ενότητα κεφαλίδας
  3. ένα σώμα, το οποίο περιέχει το πραγματικό περιεχόμενο του εγγράφου. Το σώμα μπορεί να υλοποιηθεί από το στοιχείο BODY ή το στοιχείο FRAMESET για να περιέχει το σώμα σε πλαίσια

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <TITLE>Understanding HTML File Format</TITLE>
   </HEAD>
   <BODY>
      <P>Hello World!
   </BODY>
</HTML>

Πληροφορίες έκδοσης

Η πρώτη γραμμή κώδικα, <!DOCTYPE html> , ονομάζεται δήλωση doctype και λέει στο πρόγραμμα περιήγησης σε ποια έκδοση HTML είναι γραμμένη η σελίδα. Ανάλογα με την έκδοση της HTML, υπάρχει ένας αριθμός διαφορετικών δηλώσεων doctype που ονομάζουν τον ορισμό τύπου εγγράφου (DTD) που χρησιμοποιείται για το έγγραφο. Κάθε DTD διαφέρει από τα άλλα ως προς τα στοιχεία που υποστηρίζει και διαφέρει ως εξής:

  • HTML 4.01 Strict - περιλαμβάνει όλα τα στοιχεία και τα χαρακτηριστικά που δεν έχουν καταργηθεί ή δεν εμφανίζονται σε έγγραφα σετ πλαισίων
  • HTML 4.01 Transitional - περιλαμβάνει τα πάντα στο αυστηρό DTD συν καταργημένα στοιχεία και χαρακτηριστικά (τα περισσότερα από τα οποία αφορούν την οπτική παρουσίαση
  • Σύνολο πλαισίων HTML 4.01 - περιλαμβάνει επίσης τα πάντα στα μεταβατικά πλαίσια DTD συν

Για HTML5, οι πληροφορίες έκδοσης είναι απλώς όπως αναφέρονται παρακάτω.

<!DOCTYPE html>

Πληροφορίες κεφαλίδας HTML

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

Για τον ορισμό τίτλου σελίδας, το στοιχείο title είναι το μόνο που απαιτείται εντός του ετικέτες. Το ίδιο χρησιμοποιείται από τις μηχανές αναζήτησης για τον προσδιορισμό του τίτλου μιας σελίδας.

Πληροφορίες σώματος HTML

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Inline Style Sheets referencing</TITLE>
 <STYLE type#"text/css">
  BODY { background: white; color: black}
  A:link { color: red }
  A:visited { color: maroon }
  A:active { color: fuchsia }
 </STYLE>
</HEAD>
<BODY>
  ... document body...
</BODY>
</HTML>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Linking to External style sheets</TITLE>
 <LINK rel#"stylesheet" type#"text/css" href#"smartstyle.css">
</HEAD>
<BODY>
  ... document body...
</BODY>
</HTML>

Στοιχεία HTML

Όπως αναφέρθηκε προηγουμένως, τα περιεχόμενα μέσα στο σώμα HTML αντιπροσωπεύονται από ετικέτες, γνωστές και ως στοιχεία Html. Κάθε ετικέτα μπορεί να έχει πρόσθετες πληροφορίες με τη μορφή χαρακτηριστικών που γράφονται ως<tag attribute1#“value1” attribute2#“value2”> , αν και δεν είναι απαραίτητο να υπάρχουν χαρακτηριστικά με κάθε ετικέτα. Εάν δεν αναφέρονται χαρακτηριστικά, χρησιμοποιούνται προεπιλεγμένες τιμές σε κάθε περίπτωση. Ακολουθούν μερικά από τα παραδείγματα του Στοιχείου:

Κεφαλίδα 

<head>
  <title>The Title</title>
</head>

Επικεφαλίδες 

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Παράγραφοι 

<p>Paragraph 1</p> <p>Paragraph 2</p>

Βιβλιογραφικές αναφορές

See Also