032.1 Μάθημα 1

Πιστοποιητικό:

Web Development Essentials

Έκδοση:

1.0

Θέμα:

032 Markup HTML Εγγράφου

Σκοπός:

032.1 Ανατομία HTML Εγγράφου

Μάθημα:

1 απο 1

Εισαγωγή

Η HTML (HyperText Markup Language) είναι μια markup γλώσσα που λέει στα προγράμματα περιήγησης πώς να δομούν και να εμφανίζουν ιστοσελίδες. Η τρέχουσα έκδοση είναι η 5.0, η οποία κυκλοφόρησε το 2012. Η σύνταξη HTML ορίζεται από το World Wide Web Consortium (W3C).

Η HTML είναι μια θεμελιώδης δεξιότητα στην ανάπτυξη web, καθώς καθορίζει τη δομή και ένα μεγάλο μέρος της εμφάνισης ενός ιστότοπου. Εάν θέλετε μια καριέρα στην ανάπτυξη web, η HTML είναι σίγουρα ένα καλό σημείο εκκίνησης.

Ανατομία ενός HTML Εγγράφου

Μια βασική σελίδα HTML έχει την ακόλουθη δομή:

<!DOCTYPE html>
<html>
  <head>
    <title>My HTML Page</title>
    <!-- This is the Document Header -->
  </head>

  <body>
    <!-- This is the Document Body -->
  </body>
</html>

Ας το αναλύσουμε λεπτομερώς τώρα.

HTML Tags

Η HTML χρησιμοποιεί elements και tags για να περιγράψει και να μορφοποιήσει το περιεχόμενο. Τα tags αποτελούνται από αγκύλες γύρω από ένα tag όνομα, για παράδειγμα <title>. Το όνομα του tag δεν κάνει διάκριση πεζών-κεφαλαίων, αν και το World Wide Web Consortium (W3C) συνιστά τη χρήση πεζών γραμμάτων στις τρέχουσες εκδόσεις του HTML. Αυτά τα HTML tags χρησιμοποιούνται για τη δημιουργία HTML elements. Το tag <title> είναι ένα παράδειγμα για ένα opening tag ενός HTML element που ορίζει τον τίτλο ενός HTML εγγράφου. Ωστόσο, ένα element έχει δύο επιπλέον μέρη. Ένα πλήρες <title> element μοιάζει με αυτό:

<title>My HTML Page</title>

Εδώ, το My HTML Page χρησιμεύει ως το element content, ενώ το </title> χρησιμεύει ως το closing tag που δηλώνει ότι αυτό το element είναι ολοκληρωμένο.

Note	Δεν χρειάζεται να κλείσουν όλα τα HTML elements· σε τέτοιες περιπτώσεις, μιλάμε για άδεια elements, αυτοκλειόμενα elements ή κενά elements.

Εδώ είναι τα άλλα HTML elements από το προηγούμενο παράδειγμα:

<html>: Περικλείει ολόκληρο το HTML έγγραφο. Αυτό περιέχει όλα τα tags που απαρτίζουν τη σελίδα. Υποδεικνύει επίσης ότι το περιεχόμενο αυτού του αρχείου είναι σε γλώσσα HTML. Το αντίστοιχο closing tag είναι </html>.
<head>: Ένα container για όλες τις μετα-πληροφορίες σχετικά με τη σελίδα. Το αντίστοιχο closing tag αυτού του element είναι </head>.
<body>: Ένα container για το περιεχόμενο της σελίδας και τη δομική αναπαράστασή του. Το αντίστοιχο closing tag είναι </body>.

Τα tags <html>, <head>, <body> και <title> είναι οι λεγόμενες skeleton tags, οι οποίες παρέχουν τη βασική δομή ενός εγγράφου HTML. Συγκεκριμένα, λένε στο πρόγραμμα περιήγησης ότι διαβάζει μια σελίδα HTML.

Note	Από αυτά τα HTML elements, το μόνο που απαιτείται για την επικύρωση ενός εγγράφου HTML είναι το tag `<title>`.

Όπως μπορείτε να δείτε, κάθε σελίδα HTML είναι ένα καλά δομημένο έγγραφο και θα μπορούσε ακόμη και να αναφέρεται ως δέντρο, όπου το <html> element αντιπροσωπεύει τη ρίζα του εγγράφου και τα elements <head> και <body>. είναι τα πρώτα κλάδια. Το παράδειγμα δείχνει ότι είναι δυνατό το nesting [εμφώλευση] των elements: Για παράδειγμα, το element <title> είναι nested μέσα στο element <head>, το οποίο με τη σειρά του είναι nested μέσα στο element <html>.

Για να σιγουρέψετε ότι ο κώδικας HTML είναι αναγνώσιμος και συντηρήσιμος, βεβαιωθείτε ότι όλα τα HTML elements είναι κλειστά σωστά και με τη σειρά. Τα προγράμματα περιήγησης μπορεί να εξακολουθούν να αποδίδουν τον ιστότοπό σας όπως αναμένεται, αλλά το εσφαλμένο nesting των elements και των tags τους είναι μια πρακτική επιρρεπής σε σφάλματα.

Τέλος, μια ειδική αναφορά στη δήλωση doctype στην κορυφή της δομής του εγγράφου παραδείγματος. Το <!DOCTYPE> δεν είναι HTML tag, αλλά μια οδηγία για το πρόγραμμα περιήγησης που προσδιορίζει την έκδοση HTML που χρησιμοποιείται στο έγγραφο. Στη βασική δομή του εγγράφου HTML που παρουσιάστηκε προηγουμένως, χρησιμοποιήθηκε το <!DOCTYPE html>, προσδιορίζοντας ότι το HTML5 χρησιμοποιείται σε αυτό το έγγραφο.

HTML Σχόλια

Όταν δημιουργείτε μια σελίδα HTML, είναι καλή πρακτική να εισάγετε σχόλια στον κώδικα για να βελτιώσετε την αναγνωσιμότητά του και να περιγράψετε τον σκοπό των μεγαλύτερων τμημάτων κώδικα. Ένα σχόλιο εισάγεται μεταξύ των tags , όπως φαίνεται στο ακόλουθο παράδειγμα:

<!-- This is a comment. -->

<!--
    This is a
    multiline
    comment.
-->

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

Warning

Δεν είναι δυνατό το nesting των σχολίων.

HTML Attributes

Τα HTML tags μπορεί να περιλαμβάνουν ένα ή περισσότερα attributes για τον καθορισμό λεπτομερειών του HTML element. Ένα απλό tag με δύο attributes έχει την ακόλουθη μορφή:

<tag attribute-a="value-a" attribute-b="value-b">

Τα attributes πρέπει πάντα να ορίζονται στο opening tag.

Ένα attribute αποτελείται από ένα όνομα, το οποίο υποδεικνύει την ιδιότητα που πρέπει να οριστεί, ένα σύμβολο ίσον και την επιθυμητή τιμή εντός εισαγωγικών. Τόσο τα μονά εισαγωγικά όσο και τα διπλά εισαγωγικά είναι αποδεκτά, αλλά συνιστάται η συνεπής χρήση μονών ή διπλών εισαγωγικών σε όλο το έργο. Είναι σημαντικό να μην αναμιγνύετε μονά και διπλά εισαγωγικά για μία τιμή ενός attribute, καθώς το πρόγραμμα περιήγησης δεν θα αναγνωρίσει τα μικτά εισαγωγικά ως μία μονάδα.

Note

Μπορείτε να συμπεριλάβετε έναν τύπο εισαγωγικών στον άλλο τύπο χωρίς κανένα πρόβλημα. Για παράδειγμα, εάν πρέπει να χρησιμοποιήσετε το ' σε μια τιμή ενός attribute, μπορείτε να τυλίξετε αυτήν την τιμή μέσα στο ". Ωστόσο, εάν θέλετε να χρησιμοποιήσετε τον ίδιο τύπο εισαγωγικού εντός της τιμής που χρησιμοποιείτε για να τυλίξετε την τιμή , πρέπει να χρησιμοποιήσετε το " για το " και το ' για το '.

Τα attributes μπορούν να κατηγοριοποιηθούν σε core attributes και specific attributes όπως εξηγείται στις ακόλουθες ενότητες.

Core Attributes

Τα core attributes είναι attributes που μπορούν να χρησιμοποιηθούν σε οποιοδήποτε HTML element. Περιλαμβάνουν:

title: Περιγράφει το περιεχόμενο του element. Η τιμή του εμφανίζεται συχνά ως tooltip που εμφανίζεται όταν ο χρήστης μετακινεί τον κέρσορα πάνω από το element.
id: Συσχετίζει ένα μοναδικό αναγνωριστικό με ένα element. Αυτό το αναγνωριστικό πρέπει να είναι μοναδικό εντός του εγγράφου και το έγγραφο δεν θα επικυρώνεται όταν πολλά elements μοιράζονται το ίδιο id.
style: Αναθέτει ιδιότητες γραφικών (CSS styles) στο element.
class: Καθορίζει μία ή πολλές κλάσεις για το element σε μια λίστα ονομάτων κλάσης, διαχωρισμένη με κενά διαστήματα. Αυτές οι κλάσεις μπορούν να αναφέρονται σε CSS stylesheets.
lang: Καθορίζει τη γλώσσα του element content χρησιμοποιώντας τους τυπικούς κωδικούς γλώσσας δύο χαρακτήρων ISO-639.

Note

Ο προγραμματιστής μπορεί να αποθηκεύσει προσαρμοσμένες πληροφορίες σχετικά με ένα element ορίζοντας ένα αποκαλούμενο data- attribute, το οποίο υποδεικνύεται με την προσθήκη του προθέματος data- στο επιθυμητό όνομα, όπως στο data-additionalinfo. Μπορείτε να εκχωρήσετε σε αυτό το attribute μια τιμή όπως σε κάθε άλλο attribute.

Specific Attributes

Άλλα attributes είναι συγκεκριμένα για κάθε HTML element. Για παράδειγμα, το attribute src ενός HTML element <img> καθορίζει τη διεύθυνση URL μιας εικόνας. Υπάρχουν πολλά πιο συγκεκριμένα attributes, τα οποία θα καλυφθούν στα επόμενα μαθήματα.

Header Εγγράφου

Το header του εγγράφου ορίζει μετα-πληροφορίες σχετικά με τη σελίδα και περιγράφεται από το element <head>. Από προεπιλογή, οι πληροφορίες στο header του εγγράφου δεν αποδίδονται από το πρόγραμμα περιήγησης. Αν και είναι δυνατό να χρησιμοποιηθεί το element <head> για να συμπεριληφθούν άλλα HTML elements που θα μπορούσαν να εμφανιστούν στη σελίδα, δεν συνιστάται.

Τίτλος

Ο τίτλος του εγγράφου καθορίζεται χρησιμοποιώντας το element <title>. Ο τίτλος που ορίζεται μεταξύ των tags εμφανίζεται στη γραμμή τίτλου του προγράμματος περιήγησης και είναι το προτεινόμενο όνομα για τον σελιδοδείκτη όταν προσπαθείτε να προσθέσετε ένα σελιδοδείκτη για την συγκεκριμένη ιστοσελίδα. Εμφανίζεται επίσης στα αποτελέσματα των μηχανών αναζήτησης ως τίτλος της ιστοσελίδας.

Ένα παράδειγμα αυτού του element είναι το ακόλουθο:

<title>My test page</title>

Το tag <title> απαιτείται σε όλα τα έγγραφα HTML και πρέπει να εμφανίζεται μόνο μία φορά σε κάθε έγγραφο.

Note	Μην συγχέετε τον τίτλο του εγγράφου με την επικεφαλίδα της σελίδας, η οποία έχει οριστεί στο σώμα.

Metadata

Το element <meta> χρησιμοποιείται για τον καθορισμό μετα-πληροφοριών για την περαιτέρω περιγραφή του περιεχομένου ενός εγγράφου HTML. Είναι ένα λεγόμενο self-closing element, που σημαίνει ότι δεν έχει closing tag. Εκτός από τα core attributes που ισχύουν για κάθε HTML element, το element <meta> χρησιμοποιεί επίσης τα ακόλουθα attributes:

name: Καθορίζει ποια metadata θα περιγραφούν σε αυτό το element. Μπορεί να οριστεί σε οποιαδήποτε ειδικά προσαρμοσμένα καθορισμένη τιμή, αλλά οι τιμές που χρησιμοποιούνται συνήθως είναι author, description και keywords.
http-equiv: Παρέχει ένα HTTP header για την τιμή του attribute content. Μια κοινή τιμή είναι η refresh, η οποία θα εξηγηθεί αργότερα. Εάν έχει οριστεί αυτό το attribute, δεν θα πρέπει να οριστεί το attribute name.
content: Παρέχει την τιμή που σχετίζεται με το attribute name ή http-equiv.
charset: Καθορίζει την κωδικοποίηση χαρακτήρων για το έγγραφο HTML, για παράδειγμα utf-8 για να το ορίσετε σε Unicode Transformation Format — 8-bit.

Προσθήκη Συγγραφέα, Περιγραφής και Λέξεων-Κλειδιών

Χρησιμοποιώντας το tag <meta>, μπορείτε να καθορίσετε πρόσθετες πληροφορίες σχετικά με τον συγγραφέα της σελίδας HTML και να περιγράψετε το περιεχόμενο της σελίδας ως εξής:

<meta name="author" content="Name Surname">
<meta name="description" content="A short summary of the page content.">

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

Εάν θέλετε επίσης να παρέχετε πρόσθετες λέξεις-κλειδιά που σχετίζονται με την ιστοσελίδα στις μηχανές αναζήτησης, μπορείτε να προσθέσετε αυτό το στοιχείο:

<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5">

Note

Στο παρελθόν, οι spammers εισήγαγαν εκατοντάδες λέξεις-κλειδιά και περιγραφές άσχετες με το πραγματικό περιεχόμενο της σελίδας, έτσι ώστε να εμφανίζεται και σε αναζητήσεις που δεν σχετίζονται με τους όρους που αναζήτησαν οι χρήστες. Σήμερα, τα tags <meta> έχουν υποβαθμιστεί σε δευτερεύουσα θέση και χρησιμοποιούνται μόνο για την συνένωση των θεμάτων που καλύπτονται στην ιστοσελίδα, έτσι ώστε να μην είναι πλέον δυνατή η παραπλάνηση των νέων και πιο εξελιγμένων αλγορίθμων των μηχανών αναζήτησης.

Ανακατεύθυνση HTML Σελίδας και Ορισμός Χρονικού Διαστήματος Ανανέωσης του Εγγράφου

Χρησιμοποιώντας το tag <meta>, μπορείτε να ανανεώσετε αυτόματα μια σελίδα HTML μετά από μια συγκεκριμένη περίοδο (για παράδειγμα μετά από 30 δευτερόλεπτα) με αυτόν τον τρόπο:

<meta http-equiv="refresh" content="30">

Εναλλακτικά, μπορείτε να ανακατευθύνετε μια ιστοσελίδα σε άλλη ιστοσελίδα μετά από το ίδιο χρονικό διάστημα με τον ακόλουθο κώδικα:

<meta http-equiv="refresh" content="30; url=http://www.lpi.org">

Σε αυτό το παράδειγμα, ο χρήστης ανακατευθύνεται από την τρέχουσα σελίδα στο http://www.lpi.org μετά από 30 δευτερόλεπτα. Οι τιμές μπορεί να είναι οτιδήποτε θέλετε. Για παράδειγμα, εάν καθορίσετε content="0; url=http://www.lpi.org", η σελίδα ανακατευθύνεται αμέσως.

Καθορισμός της Κωδικοποίησης Χαρακτήρων

Το attribute charset καθορίζει την κωδικοποίηση χαρακτήρων για το HTML έγγραφο. Ένα κοινό παράδειγμα είναι:

<meta charset="utf-8">

Αυτό το element προσδιορίζει ότι η κωδικοποίηση χαρακτήρων του εγγράφου είναι utf-8, που είναι ένα παγκόσμιο σύνολο χαρακτήρων που περιλαμβάνει σχεδόν οποιονδήποτε χαρακτήρα οποιασδήποτε ανθρώπινης γλώσσας. Επομένως, χρησιμοποιώντας το, θα αποφύγετε προβλήματα στην εμφάνιση ορισμένων χαρακτήρων που μπορεί να έχετε χρησιμοποιώντας άλλα σύνολα χαρακτήρων όπως το ISO-8859-1 (το λατινικό αλφάβητο).

Άλλα Χρήσιμα Παραδείγματα

Δύο άλλες χρήσιμες εφαρμογές του tag <meta> είναι:

Ορισμός cookies για να παρακολουθείτε έναν επισκέπτη του ιστότοπου.
Ανάληψη ελέγχου του viewport [θύρας προβολής] (η ορατή περιοχή μιας ιστοσελίδας μέσα στο παράθυρο του προγράμματος περιήγησης), η οποία εξαρτάται από το μέγεθος της οθόνης της συσκευής του χρήστη (για παράδειγμα, ένα κινητό τηλέφωνο ή ένας υπολογιστής).

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

Καθοδηγούμενες Ασκήσεις

Για καθένα απο τα ακόλουθα tags, υποδείξτε τo αντίστοιχo closing tag:

<body>

<head>

<html>

<meta>

<title>
Ποια είναι η διαφορά μεταξύ ενός tag και ενός element; Χρησιμοποιήστε αυτήν την καταχώριση ως αναφορά:

<title>HTML Page Title</title>
Ποια είναι τα tags ανάμεσα στα οποία πρέπει να τοποθετηθεί ένα σχόλιο;
Εξηγήστε τι είναι ένα attribute και δώστε μερικά παραδείγματα για το tag <meta>.

Ασκήσεις Εξερεύνησης

Δημιουργήστε ένα απλό έγγραφο HTML έκδοσης 5 με τίτλο My first HTML document και μόνο μία παράγραφο στο body, που περιέχει το κείμενο Hello World. Χρησιμοποιήστε τo paragraph tag <p> στο body.
Προσθέστε τον συγγραφέα (Kevin Author) και την περιγραφή (This is my first HTML page.) του εγγράφου HTML.
Προσθέστε τις ακόλουθες λέξεις-κλειδιά που σχετίζονται με το έγγραφο HTML: HTML, Example, Test, και Metadata.
Προσθέστε το element <meta charset="ISO-8859-1"> στο header του εγγράφου και αλλάξτε το κείμενο Hello World σε Ιαπωνικά (こんにちは世界). Τι συμβαίνει; Πώς μπορείτε να λύσετε το πρόβλημα;
Αφού αλλάξετε το κείμενο της παραγράφου ξανά σε Hello World, ανακατευθύνετε τη σελίδα HTML στο https://www.google.com μετά από 30 δευτερόλεπτα και προσθέστε ένα σχόλιο εξηγώντας το αυτό στο header του εγγράφου.

Σύνοψη

Σε αυτό το μάθημα μάθατε:

Το ρόλο του HTML
Τον HTML σκελετό
Την HTML σύνταξη (tags, attributes, comments)
Το HTML head
Τα meta tags
Πώς να δημιουργήσετε ένα απλό έγγραφο HTML

Οι ακόλουθοι όροι συζητήθηκαν σε αυτό το μάθημα:

<!DOCTYPE html>: Το declaration tag.
<html>: Το container για όλα τα tags που απαρτίζουν την σελίδα HTML.
<head>: Το container για όλα τα head elements.
<body>: Το container για όλα τα body elements.
<meta>: Το tag για metadata, που χρησιμοποιείται για τον καθορισμό πρόσθετων πληροφοριών για τη σελίδα HTML (όπως ο συγγραφέας, η περιγραφή και η κωδικοποίηση χαρακτήρων).

Απαντήσεις στις Καθοδηγούμενες Ασκήσεις

Για καθένα απο τα ακόλουθα tags, υποδείξτε τo αντίστοιχo closing tag:

<body>

</body>

<head>

</head>

<html>

</html>

<meta>

None

<title>

</title>
Ποια είναι η διαφορά μεταξύ ενός tag και ενός element; Χρησιμοποιήστε αυτήν την καταχώριση ως αναφορά:

<title>HTML Page Title</title>

Ένα HTML element αποτελείται από ένα start tag, ένα closing tag και τα πάντα μεταξύ τους. Ένα HTML tag χρησιμοποιείται για να επισημάνει την αρχή ή το τέλος ενός element. Επομένως, το <title>HTML Page Title</title> είναι ένα HTML element, ενώ το <title> και το </title> είναι το start και closing tag αντίστοιχα.
Ποια είναι τα tags ανάμεσα στα οποία πρέπει να τοποθετηθεί ένα σχόλιο;

Ένα σχόλιο εισάγεται μεταξύ των tags  και μπορεί να τοποθετηθεί σε μία μόνο γραμμή ή να εκτείνεται σε πολλές γραμμές.
Εξηγήστε τι είναι ένα attribute και δώστε μερικά παραδείγματα για το tag <meta>.

Ένα attribute χρησιμοποιείται για τον ακριβέστερο προσδιορισμό ενός HTML element. Για παράδειγμα, το tag <meta> χρησιμοποιεί το ζεύγος των attribute name και content για να προσθέσει τον συγγραφέα και την περιγραφή μιας σελίδας HTML. Αντίθετα, χρησιμοποιώντας το attribute charset μπορείτε να καθορίσετε την κωδικοποίηση χαρακτήρων για το έγγραφο HTML.

Απαντήσεις στις Ασκήσεις Εξερεύνησης

Δημιουργήστε ένα απλό έγγραφο HTML έκδοσης 5 με τίτλο My first HTML document και μόνο μία παράγραφο στο body, που περιέχει το κείμενο Hello World. Χρησιμοποιήστε τo paragraph tag <p> στο body.
```
<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>
```

Προσθέστε τον συγγραφέα (Kevin Author) και την περιγραφή (This is my first HTML page.) του εγγράφου HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>

Προσθέστε τις ακόλουθες λέξεις-κλειδιά που σχετίζονται με το έγγραφο HTML: HTML, Example, Test, και Metadata.

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
    <meta name="keywords" content="HTML, Example, Test, Metadata">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>

Προσθέστε το element <meta charset="ISO-8859-1"> στο header του εγγράφου και αλλάξτε το κείμενο Hello World σε Ιαπωνικά (こんにちは世界). Τι συμβαίνει; Πώς μπορείτε να λύσετε το πρόβλημα;

Εάν εκτελέσουμε το παράδειγμα όπως περιγράφεται, το ιαπωνικό κείμενο δεν εμφανίζεται σωστά. Αυτό συμβαίνει επειδή το ISO-8859-1 αντιπροσωπεύει την κωδικοποίηση χαρακτήρων για το λατινικό αλφάβητο. Για να προβάλετε το κείμενο, πρέπει να αλλάξετε την κωδικοποίηση χαρακτήρων, χρησιμοποιώντας για παράδειγμα UTF-8 (<meta charset="utf-8">).

Αφού αλλάξετε το κείμενο της παραγράφου ξανά σε Hello World, ανακατευθύνετε τη σελίδα HTML στο https://www.google.com μετά από 30 δευτερόλεπτα και προσθέστε ένα σχόλιο εξηγώντας το αυτό στο header του εγγράφου.

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
    <meta name="keywords" content="HTML, Example, Test, Metadata">
    <meta charset="utf-8">
    <!-- The page is redirected to Google after 30 seconds -->
    <meta http-equiv="refresh" content="30; url=https://www.google.com">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>