Σχεδιασμός και Ανάπτυξη Ιστοτόπων

18 May 2020

κανόνες CSS

font-size:120%;

Το μέγεθος των χαρακτήρων στο 120% του τυπικού μεγέθους
χαρακτήρων. Το τυπικό μέγεθος ενός χαρακτήρα σε μια παράγραφο είναι 16px, δηλαδή 16 pixel (εικονοστοιχεία). Το 120% αφορά το αντίστοιχο ποσοστό των 16 pixel και αντιστοιχεί σε 19px. Υπάρχει και η μονάδα μέτρησης em με 1em να αντιστοιχεί στο τυπικό μέγεθος ενός χαρακτήρα. Έτσι 1em = 16px = 100%. Στο παράδειγμά μας 1.2em = 19px = 120%.

border:1px solid black;

Η ενότητα κειμένου θα έχει περίγραμμα συμπαγούς μαύρης
γραμμής, πάχους 1px.
Άλλες μορφές περιγράμματος είναι οι dashed, ridge, dotted,
κ.λπ.

display:inline-block;

Η ενότητα κειμένου θα εμφανιστεί ως ένα μπλοκ το οποίο θα περιοριστεί στο πλάτος του περιεχομένου του, επιτρέποντας σε άλλες ενότητες να σταθούν δίπλα της

18 May 2020

κανόνες CSS

text-align:center;

Στοίχιση του κειμένου στο κέντρο.
Είναι επίσης εφικτή η στοίχιση αριστερά (left), δεξιά (right)
και πλήρως (justified).

color:white;

Λευκό χρώμα των χαρακτήρων.
Οι τιμές των χρωμάτων μπορούν να αποδοθούν με τρεις τρόπους:
α) Ονομαστικά (π.χ. green, red, lightgreen, coral, κ.λπ.).
β) Με τη δεκαδική τιμή τους ως rgb(x,y,z), όπου x μια δεκαδική τιμή από 0 έως 255 που αντιστοιχεί στο κόκκινο χρώμα,
όπου y μια δεκαδική τιμή από 0 έως 255 που αντιστοιχεί στο
πράσινο χρώμα και z μια δεκαδική τιμή από 0 έως 255 που
αντιστοιχεί στο μπλε χρώμα (π.χ. rgb(255,0,0) για το έντονο
κόκκινο, rgb(0,255,0) για το έντονο πράσινο, rgb(255,255,0)
για έντονο κίτρινο, rgb(255,127,80) για το κοραλλί, κ.λπ.).
γ) Με τη δεκαεξαδική τιμή τους ως #ΧΧΥΥΖΖ, όπου ΧΧ μια
δεκαεξαδική τιμή από 00 έως FF που αντιστοιχεί στο κόκκινο
χρώμα, όπου ΥΥ μια δεκαεξαδική τιμή από 00 έως FF που
αντιστοιχεί στο πράσινο χρώμα και ΖΖ μια δεκαεξαδική τιμή
από 00 έως FF που αντιστοιχεί στο μπλε χρώμα (π.χ. #FF0000
για το έντονο κόκκινο, #0000FF για το έντονο μπλε, #FF7F50
για το κοραλλί, κ.λπ.).
Οι πιθανοί συνδυασμοί χρωμάτων είναι 2563
≈16,7 εκατομμύρια χρώματα.

background-color:blue;

Μπλε χρώμα του υποβάθρου (φόντου) των χαρακτήρων.

background-color:yellow;

Κίτρινο χρώμα υποβάθρου χαρακτήρων.

background-color:lightgreen;

Ανοιχτό πράσινο χρώμα υποβάθρου χαρακτήρων.

font-family:courier;

Επιλογή γραμματοσειράς της οικογένειας Courier.
Οι γραμματοσειρές μπορούν εκτός από ονομαστικά, να επιλεγούν και κατά οικογένεια ή κατηγορία (π.χ. serif, sans-serif,
monospace)

12 May 2020

Δραστηριότητα

Προσπαθήστε να ερμηνεύσετε τον παρακάτω κώδικα html. Τι ακριβώς εξάγει εάν τον εκτελέσουμε;

<html>
<head>
<title> Παράδειγμα 1ο</title>
</head>
<body>
<h1>Αυτό είναι το πρώτο παράδειγμα.</h1>
<h2>Εφαρμογή των μέχρι τώρα προαναφερθέντων ετικετών.</h2>
<h4><b>Αυτό το κείμενο είναι έντονο.</b> </h4>
<p> <center> Αυτή η παράγραφος είναι
είναι <i> κεντραρισμένη </i></center> </p>
Τέλος του <u> πρώτου </u> παραδείγματος.
</body>
</html>

Ερμηνεία:

<head>
Η ετικέτα αυτή περιέχει τον τίτλο και άλλες σημαντικές πληροφορίες για το έγγραφο.
<title>
Μέσα σε αυτήν την ετικέτα περικλείεται ο τίτλος του εγγράφου. Ο τίτλος εμφανίζεται στην μπάρα του browser (Chrome, Mozilla FireFox, Internet Explorer κ.α)
<p>
Η ετικέτα αυτή ορίζει μία νέα παράγραφο.
<h…>
Η ετικέτα αυτή καθορίζει το μέγεθος των γραμμάτων. Ο αριθμός μπορεί να είναι από το 1 έως
το 6 (δηλαδή <h1> , <h2> κ.τ.λ.). Το <h1> είναι το μεγαλύτερο μέγεθος και το <h6> είναι το μικρότερο.
<br>
Η ετικέτα <br> ορίζει μία αλλαγή γραμμής.

center>
Από τη στιγμή που εμφανίζεται το <center> σ' ένα έγγραφο μέχρι να κλείσει με </center> όλα όσα περιέχονται εμφανίζονται κεντραρισμένα.
<b>
Η ετικέτα αυτή από την εμφάνισή της και μέχρι τη λήξη της (δηλ. </b>) κάνει το κείμενο να
φαίνεται με έντονη γραφή (bold).
<i>
Η ετικέτα αυτή από την εμφάνισή της και μέχρι τη λήξη της (δηλ. </i>) κάνει το κείμενο να
φαίνεται με πλάγια γραφή (italic).
<u>
Η ετικέτα αυτή από την εμφάνισή της και μέχρι τη λήξη της (δηλ. </u>) κάνει το κείμενο να φαίνεται υπογραμμισμένο (underline).
<!-- σχόλιο -- >
Η ετικέτα αυτή χρησιμοποιείται για να προσθέσουμε ένα σχόλιο

12 May 2020

Δραστηριότητα

Προσπαθήστε να ερμηνεύσετε τον παρακάτω κώδικα html. Τι ακριβώς εξάγει εάν τον εκτελέσουμε;

<html>
<head>
<title>Ένα απλό παράδειγμα</title>
</head>
<body>
<h1>Η HTML είναι εύκολη</h1>
<p> Καλώς ήλθατε στον κόσμο της HTML.
Αυτή είναι η πρώτη παράγραφος. </p>
<p> Και αυτή είναι η δεύτερη παράγραφος.</p>
</body>
</html>

4 April 2020

Δραστηριότητες

Εκτελέστε τον παρακάτω κώδικα htm:

<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

2. Ποιά αποτελέσματα προκύπτουν από την εκτέλεση του παρακάτω κώδικα html;

<h2>An Unordered HTML List</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<h2>An Ordered HTML List</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

3. Τι θα εμφανίσει ο παρακάτω κώδικας html;

<p>This is a <br> paragraph with a line break.</p>

</body>
</html>

2 April 2020

Παράδειγμα HTML Εγγράφου

Παράδειγμα HTML Εγγράφου
<html>
<head>
<title>Παράδειγμα 1.</title>
</head>
<body>
<h1>Αυτό είναι το πρώτο παράδειγμα.</h1>
<h2>Εφαρμογή των μέχρι τώρα προαναφερθέντων εντολών.</h2>
<br>
<h4><b>Αυτό το κείμενο είναι έντονο.</b>
<p>
<center>Και όλες οι παρακάτω σειρές
είναι <i>κεντραρισμένες</i>.
Τέλος του <u>πρώτου</u> παραδείγματος.
</body>
</html>
Εντολές HTML - Παραδείγματα
<head>
Όπως έχει προαναφερθεί η εντολή αυτή περιέχει τον τίτλο και άλλες σημαντικές πληροφορίες για το έγγραφο.
<title>
Μέσα σε αυτήν την εντολή περικλείεται ο τίτλος του εγγράφου. Ο τίτλος εμφανίζεται στην μπάρα του browser (Netscape, Explorer κ.α)
<p>
Η εντολή αυτή ορίζει μία νέα παράγραφο.
<h1>
Η εντολή αυτή καθορίζει το μέγεθος των γραμμάτων. Ο αριθμός μπορεί να ανέλθει ως το 6 (δηλαδή <h2> , <h3> ?). Το <h1> είναι το μεγαλύτερο μέγεθος και το <h6> είναι το μικρότερο.
<br>
Η εντολή <br> αναγκάζει το κείμενο (και όλο το υπόλοιπο υλικό που περιέχει η σελίδα) να συνεχίσει στη επόμενη σειρά. (Το </br> δεν έχει νόημα).
<center>
Από τη στιγμή που εμφανίζεται το <center> σ' ένα έγγραφο μέχρι να κλείσει με </center> όλα όσα περιέχονται εμφανίζονται κεντραρισμένα
<b>
Η εντολή αυτή από την εμφάνισή της και μέχρι την λήξη της (δηλ. </b>) αναγκάζει το κείμενο να φαίνεται με έντονη γραφή (bold).
<i>
Η εντολή αυτή από την εμφάνισή της και μέχρι την λήξη της (δηλ. </i>) αναγκάζει το κείμενο να φαίνεται με πλάγια γραφή (italic).
<u>
Η εντολή αυτή από την εμφάνισή της και μέχρι την λήξη της (δηλ. </u>) αναγκάζει το κείμενο να φαίνεται υπογραμμισμένο (underline).

2 April 2020

Περιεχόμενο με σημασία

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

Ξεκινούμε με τη γραμμή 5, όπου στην ετικέτα html προσθέσαμε μια παράμετρο lang. Με αυτή δηλώνουμε τη γλώσσα στην οποία είναι γραμμένο το περιεχόμενο. Αυτό βοηθά μια μηχανή αναζήτησης να επιλέξει τη συγκεκριμένη σελίδα, στην περίπτωση που τα κριτήρια αναζήτησης ταιριάζουν και ο χρήστης έχει επιλέξει ότι θέλει να βρει ιστοσελίδες γραμμένες στα Ελληνικά. Το πρώτο συνθετικό της τιμής “el-GR” αναφέρεται στη γλώσσα, ενώ το δεύτερο στη χώρα.

Οι γραμμές 11 και 15 επισημαίνονται από τις ετικέτες <header> … </header> οι οποίες χαρακτηρίζουν εκείνο το τμήμα περιεχομένου ως κεφαλίδα της ιστοσελίδας. Δεν αλλάζει τη μορφοποίηση, παρά μόνο του δίνει τη σημασία της κεφαλής. Ομοίως στις επόμενες γραμμές τρεις περιοχές (γραμμές 16-30, 31-43, 44-53) χαρακτηρίζονται ως άρθρα με την <article>… </article> και μια περιοχή (γραμμές 54-57) ως υποσέλιδο με τη <footer> … </footer>. Ο προσδιορισμός της σημασίας που έχει για εμάς το περιεχόμενο μπορεί να βοηθήσει έτσι ώστε και η μηχανή να το «καταλαβαίνει» κατά κάποιο τρόπο. Αυτό θα έχει εφαρμογή σε πιο επιτυχημένες λ.χ. αναζητήσεις από μηχανές αναζήτησης ή στην αρτιότερη πιθανή ενσωμάτωση της
ιστοσελίδας μας σε κάποιο ιστότοπο που βασίζεται σε ένα σύστημα διαχείρισης περιεχομένου(Content Management System, CMS), όπως το WordPress, το Joomla, το Drupal, κ.α. Επίσης μας δίνεται η δυνατότητα να ορίσουμε εμείς κανόνες μορφοποίησης μέσω της γλώσσας των διαδοχικών φύλλων στυλ. Οι όροι κεφαλίδα και υποσέλιδο δεν αφορούν την επανάληψη αυτών των περιοχών κατά την εκτύπωση, όπως συμβαίνει στα έγγραφα των επεξεργαστών κειμένου.

Στη γραμμή 14 χρησιμοποιούμε τις ετικέτες <abbr> … </abbr> για να ορίσουμε ένα tool tip, δηλαδή ένα ταμπελάκι το οποίο θα εμφανίζεται αυτόματα, όταν το ποντίκι μας σταθεί πάνω από το κείμενο «ΠΣΔ», εμφανίζοντας την εξήγηση του όρου. Αυτό επιτυγχάνεται χάρη στην παράμετρο title η οποία όταν χρησιμοποιηθεί και στις ετικέτες των επικεφαλίδων και των παραγράφων (γραμμές 12, 17, 19, 32, 33, 45, 46) έχει το ίδιο αποτέλεσμα. Οι γραμμές 20-24 χαρακτηρίζονται από τις ετικέτες <mark> … </mark> με αποτέλεσμα στο φυλλομετρητή να εμφανίζονται με κίτρινο χρώμα, σαν να τις έχουμε μαρκάρει με κίτρινο μαρκαδόρο επισήμανσης. Οι ετικέτες <u> … </u> στη γραμμή 40 προκαλούν την υπογράμμιση του κειμένου, ενώ η <hr> της γραμμής 55 εμφανίζει μια οριζόντια γραμμή. Στη γραμμή 33 υπάρχει η ετικέτα <em> η οποία θα δώσει έμφαση στο κείμενο μέχρι τη γραμμή 34 γράφοντάς το με πλάγια γράμματα. Το ίδιο θα συμβεί και με τη χρήση της <i> στις γραμμές 48-50. Η διαφορά είναι ότι ίσως η <em> να προκαλεί την εμφάνιση λιγότερο ή περισσότερο πλάγιων χαρακτήρων από φυλλομετρητή σε φυλλομετρητή, αλλά το σημαντικότερο είναι ότι η <em> προσδίδει τη σημασία της έμφασης στο περιεχόμενο και μας δίνει τη δυνατότητα να διαφοροποιήσουμε εμείς τη μορφοποίηση χρησιμοποιώντας τη γλώσσα CSS.

2 April 2020

Εφαρμογή 2: Συμβολικό… κείμενο
Το δεύτερο παράδειγμα εφαρμογής αφορά τον τρόπο που γράφουμε κείμενο και πως μπορούμε να το εμπλουτίσουμε με σύμβολα. Στο πλαίσιο Πηγαίος κώδικας 2 παρουσιάζεται ο κώδικας της δεύτερης εφαρμογής μας.

Ένα έγγραφο αποτελείται συνήθως στο μεγαλύτερο τμήμα του από κείμενο, το οποίο οργανώνεται σε παραγράφους. Έτσι στο παράδειγμά μας χρησιμοποιούμε το στοιχείο παραγράφων (ετικέτες <p> … </p>) για να καθορίσουμε τα όρια των τριών παραγράφων που απαρτίζουν το κείμενο (γραμμές 11-23, 25, 27, 28-35). Η κάθε παράγραφος αποτελεί μία μικρή ενότητα κειμένου. Στον κώδικα παρατηρούμε επίσης την ύπαρξη κωδικών που ξεκινούν με το χαρακτήρα ampersand ( & ) και τελειώνουν με το χαρακτήρα colon ( ; ) (το ερωτηματικό). Οι κωδικοί αυτοί ονομάζονται οντότητες (entities) και κατά την απόδοση του κώδικα στο φυλλομετρητή μετατρέπονται στα αντίστοιχα σύμβολα.

Κοιτάζοντας προσεκτικά τον κώδικα του παραδείγματος παρατηρούμε ότι υπάρχουν κάποια κενά διαστήματα μεταξύ λέξεων και παραγράφων. Ανοίγοντας όμως το αρχείο του παραδείγματος με το φυλλομετρητή μας, παρατηρούμε ότι τα διαστήματα αυτά δεν εμφανίζονται. Αυτό συμβαίνει διότι οι χαρακτήρες αλλαγής γραμμής (Line Feed, LF, με κωδικό ASCII 10), οριζόντιου διαστήματος (Horizontal Tab, HT, με κωδικό ASCII 9) και επιστροφής του δρομέα στην αρχή της γραμμής (Carriage Return, CR, με κωδικό ASCII 13), είναι μη-εκτυπώσιμοι χαρακτήρες ελέγχου. Η γλώσσα HTML προέρχεται από την Πρότυπη Γενικευμένη Γλώσσα Σήμανσης (Standard Generalized Markup Language, SGML). Στις εφαρμογές της SGML η χρήση χαρακτήρων ελέγχου περιορίζεται για να υπάρχει μεγαλύτερη πιθανότητα επιτυχούς ανταλλαγής πληροφοριών μεταξύ ετερογενών συστημάτων μέσω ετερογενών δικτύων. Στην HTML μόνο οι τρεις προηγούμενοι χαρακτήρες ερμηνεύονται και μόνο όταν αποτελούν περιεχόμενα του στοιχείου <pre> … </pre>.

Έτσι λοιπόν στην HTML η ύπαρξη συνεχόμενων μη εκτυπώσιμων χαρακτήρων, όπως οι στηλοθέτες (tab), οι αλλαγές παραγράφου (enter/return) και τα διαστήματα (space) αντικαθίστανται από ένα απλό διάστημα. Επομένως, όπως συμβαίνει και σε ένα λογισμικό κειμενογράφου, η αλλαγή γραμμής γίνεται αυτόματα, ενώ παράγραφος θεωρείται ότι περικλείεται στις ετικέτες <p> … </p> (στον κειμενογράφου πατούμε το πλήκτρο Enter για αλλαγή παραγράφου).
Αλλαγή γραμμής, αλλά όχι παραγράφου υλοποιείται με την ετικέτα <hr> (όπως όταν πατούμε Shift+Enter στον κειμενογράφο μας) (γραμμές 12, 19). Παρατηρούμε επίσης ότι η γραμμή 27 που αποτελεί από μόνη της μία παράγραφο έχει μεγαλύτερη απόσταση από την παράγραφο που ακολουθεί, σε σχέση με τη γραμμή 12 στην οποία απλά εισάγεται μια αλλαγή γραμμής. Η παράγραφος είναι μια ενότητα περιεχομένου η οποία μπορεί με τις κατάλληλες οδηγίες να
έχει τα δικά της περιθώρια και τη δική της θέση στη ροή του κειμένου της ιστοσελίδας.

Τέλος, στη γραμμή 12 παρατηρούμε τις ετικέτες <strong> … </strong> που ορίζουν να εμφανιστεί το κείμενο με έντονα γράμματα, όπως συμβαίνει και με τις ετικέτες <b> … </b> της γραμμής 27. Η διαφορά έγκειται μόνο στη σημασιολογία, καθώς το στοιχείο strong δίνει ένα επιπλέον νόημα στο κείμενο, το οποίο συνήθως εκμεταλλευόμαστε σε πολυπλοκότερα έγγραφα. Το κείμενο των γραμμών 20-22 γράφεται με μικρότερα γράμματα, λόγω της επισήμανσής του με τις ετικέτες <small> … </small>. Πολυπλοκότερες βέβαια μορφοποιήσεις προτείνεται
να γίνονται χρησιμοποιώντας τη γλώσσα των Διαδοχικών Φύλλων Στυλ (Cascading Style Sheet, CSS), καθώς η μορφοποίηση με ετικέτες της γλώσσας HTML έχει περιορισμούς, ενώ πολλές από τις παλαιότερες ετικέτες μορφοποίησης έχουν πλέον αποχαρακτηριστεί, οπότε υπάρχει πιθανότητα να μην υποστηρίζονται από μελλοντικές εκδόσεις των φυλλομετρητών.

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

23 March 2020

Εισαγωγή

Τρόπος εργασίας

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

Κώδικας 1

Το έγγραφο που εμφανίζεται στο πλαίσιο Πηγαίος κώδικας 1 είναι γραμμένο σε HTML5,
δηλαδή στην έκδοση 5 της γλώσσας σήμανσης υπερκειμένου HTML. Η HTML είναι η γλώσσα στην οποία είναι γραμμένες οι περισσότερες στατικές ιστοσελίδες του παγκόσμιου ιστού.
Στατικές είναι οι ιστοσελίδες των οποίων το περιεχόμενο μεταφέρεται όπως είναι αποθηκευμένο στον εξυπηρετητή ιστοσελίδων, άρα δεν αλλάζει, αν δεν το αλλάξει εκούσια ο δημιουργός τους.

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

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

Οι γραμμές 2-4 αποτελούν ένα σχόλιο. Κάθε σχόλιο ξεκινά με <!- - και τελειώνει με - ->. Τα
σχόλια δεν λαμβάνονται υπόψη από το φυλλομετρητή, αλλά μας βοηθούν στην τεκμηρίωση
του κώδικα που γράφουμε. Είναι καλή πρακτική να γράφουμε σχόλια στον κώδικα που αναπτύσσουμε, ώστε στο μέλλον να μπορούμε να ανακαλέσουμε τι κάνουμε σε κάθε σημείο του.

Στη γραμμή 5 υπάρχει μια ετικέτα (tag). Η ετικέτα είναι ένα όνομα της γλώσσας HTML, το
οποίο έχει κάποια σημασία για το φυλλομετρητή. Κάθε ετικέτα οριοθετείται από δύο τριγωνικές αγκύλες ( < > ). Παρατηρούμε ότι στη γραμμή 13 υπάρχει μια ετικέτα που μοιάζει με αυτή
της γραμμής 5, αλλά το όνομα της ετικέτας της γραμμής 13 ξεκινά με το χαρακτήρα slash ( /
). Η ετικέτα της γραμμής 5 επισημαίνει την έναρξη ενός στοιχείου (element) και η ετικέτα της
γραμμής 13 επισημαίνει τη λήξη του.

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

<ετικέτα>περιεχόμενο</ετικέτα>
Παρατηρούμε ότι ένα έγγραφο HTML είναι ένα στοιχείο, το html, το οποίο αποτελείται από
δύο επιμέρους στοιχεία, το στοιχείο head (κεφαλή) (γραμμές 6-9) και το στοιχείο body (σώμα)
(γραμμές 10-12). Στην κεφαλή ορίζονται τα μεταδεδομένα της ιστοσελίδας. Τα μεταδεδομένα
είναι πληροφορίες που αφορούν και περιγράφουν το έγγραφο, όπως τίτλος, συγγραφέας, λέξεις κλειδιά, κ.α. Στο σώμα ορίζονται τα περιεχόμενα της ιστοσελίδας, δηλαδή το περιεχόμενο
του εγγράφου που εμφανίζεται στο κεντρικό πλαίσιο του παραθύρου του φυλλομετρητή. Το
μεγαλύτερο μέρος κώδικα αφορά όπως είναι λογικό το σώμα της ιστοσελίδας.

Στη γραμμή 7 ορίζεται ο τίτλος της ιστοσελίδας (title). Ο τίτλος είναι πολύ σημαντικός διότι
εκτός από τη γραμμή του τίτλου στο παράθυρο του φυλλομετρητή, εμφανίζεται και στα αποτελέσματα μιας μηχανής αναζήτησης που έχει εντοπίσει την ιστοσελίδα μας. Έτσι πρέπει να
επιλέγεται με μεγάλη προσοχή. Στη γραμμή 8 ορίζεται ένα επιπλέον μεταδεδομένο (meta) που
αφορά την κωδικοποίηση των χαρακτήρων της ιστοσελίδας.