HTML Basics.

HTML

Έκδοση Έτος

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2014
HTML

● H Hypertext Markup Language (HTML) είναι γλώσσα σήμανσης για τη δημιουργία ιστοσελίδων.

● Η HTML περιγράφει τη δομή των ιστοσελίδων χρησιμοποιώντας ειδική σήμανση.

● Τα δομικά συστατικά των ιστοσελίδων είναι τα στοιχεία HTML (HTML elements).

● Τα στοιχεία μιας ιστοσελίδας αναπαριστώνται με ετικέτες (tags).

Ετικέτες (HTML tags)

Οι ετικέτες (tags) στην HTML ορίζουν την αρχή και το τέλος ενός στοιχείου
(element).

Παράδειγμα:
<p>Sample text</p>

● Η ετικέτα <p> είναι η ετικέτα αρχής (start tag).

● Η ετικέτα </p> είναι η ετικέτα τέλους (end tag).
● Το “Sample text" είναι το περιεχόμενο του στοιχείου.
● Οι ετικέτες ορίζουν το στοιχείο p που χρησιμοποιείται για μια παράγραφο.
● Οι ετικέτες γράφονται είτε με πεζά ή με κεφαλαία (case-insensitive), ωστόσο
το W3C προτείνει να γράφονται με πεζά.
HTML στοιχεία (HTML elements)

Τα στοιχεία (elements) στην HTML αποτελούν το δομικό συστατικό των

ιστοσελίδων.

Παράδειγμα:
<div>
<p>Sample text</p>
</div>

● Η ετικέτα <div> είναι η ετικέτα αρχής (start tag).

● Η ετικέτα </div> είναι η ετικέτα τέλους (end tag).
● Οτιδήποτε βρίσκεται ανάμεσα στο <div> και στο </div> αποτελεί περιεχόμενο
του στοιχείου div.
● Τα στοιχεία μπορούν να περιέχουν άλλα στοιχεία.
● Τα κενά στοιχεία (empty elements) δεν έχουν περιεχόμενο.
Κενά στοιχεία (empty elements)

Τα κενά στοιχεία δεν έχουν περιεχόμενο και δεν έχουν ετικέτα κλεισίματος (end
tag).

Παράδειγμα:
<br> ή <br />

Ορισμένα κενά στοιχεία που συναντάμε συχνά είναι τα:

● <br> : αλλαγή γραμμής
● <hr> : οριζόντια γραμμή
● <img> : εικόνα
Ιδιότητες (attributes)

Τα στοιχεία (elements) στην HTML αποτελούν το δομικό συστατικό των

ιστοσελίδων. Πέρα από το περιεχόμενό του ένα στοιχείο στην HTML μπορεί να
έχει και ορισμένες ιδιότητες.

Παράδειγμα:
<a href="https://www.collegelink.gr/">CollegeLink</a>

● Η ετικέτα <a href="..."> είναι η ετικέτα αρχής (start tag).

● Η ετικέτα </a> είναι η ετικέτα τέλους (end tag).
● Το “CollegeLink" είναι το περιεχόμενο του στοιχείου.
● Οι ετικέτες ορίζουν το στοιχείο a που χρησιμοποιείται για ένα σύνδεσμο.
● Το href ονομάζεται ιδιότητα (attribute) του στοιχείου a και αναφέρεται στην
τοποθεσία που οδηγεί ο σύνδεσμος.
Ιδιότητες (attributes)

● Οι ιδιότητες ενός στοιχείου παρέχουν πρόσθετες πληροφορίες για το στοιχείο.

● Όλα τα στοιχεία της HTML μπορούν να έχουν ιδιότητες.

● Οι ιδιότητες ενός στοιχείου βρίσκονται πάντα στην ετικέτα αρχής (start tag).

● Μπορούν να χρησιμοποιηθούν είτε πεζά γράμματα ή κεφαλαία (case-insensitive), ωστόσο το W3C

προτείνει τη χρήση πεζών γραμμάτων.

● Οι ιδιότητες εμφανίζονται συνήθως ως ζεύγη ονόματος και τιμής, δηλαδή name="value".

● Η τιμή μπορεί είτε να τοποθετηθεί σε εισαγωγικά ή να γραφτεί χωρίς αυτά. Ωστόσο, προτείνεται η
χρήση εισαγωγικών για αποφυγή σφαλμάτων. Τα εισαγωγικά μπορούν να είναι είτε μονά ‘ ή διπλά “.
Συνήθως χρησιμοποιούνται διπλά, γιατί τα μονά μπορεί να υπάρχουν μέσα στην τιμή.

● Ορισμένες ιδιότητες όπως id, class και style μπορούν να οριστούν σε κάθε στοιχείο της HTML και
ονομάζονται global attributes. Άλλες ιδιότητες ορίζονται σε συγκεκριμένα στοιχεία.
Global attributes

● id : Ορίζει ένα μοναδικό αναγνωριστικό για το στοιχείο. Η τιμή πρέπει να υπάρχει μόνο μια φορά
μέσα στο έγγραφο HTML, να αποτελείται από τουλάχιστον ένα χαρακτήρα και να μην περιέχει κενά.
Για παράδειγμα:
<a id="main-link" href="https://www.collegelink.gr/">CollegeLink</a>

● class : Ορίζει ένα ή περισσότερα ονόματα κλάσεων για το στοιχείο. Τα ονόματα χωρίζονται μεταξύ
τους με ένα κενό, πρέπει να ξεκινάνε με χαρακτήρα μεταξύ a-z και A-Z ακολουθούμενο από
οποιοδήποτε πλήθος χαρακτήρων (a-z και A-Z), ψηφίων (0-9), παύλας (“-") και κάτω παύλας (“_").
Για παράδειγμα:
<a class="menu-link" href="https://www.collegelink.gr/">CollegeLink</a>

● style : Ορίζει στη γραμμή (inline) οδηγίες CSS για την τροποποίηση της εμφάνισης του στοιχείου. Οι
οδηγίες χωρίζονται με ερωτηματικό (semicolon). Για παράδειγμα:
<p style="color: blue; text-align: center">Sample paragraph</p>

● title : Ορίζει πρόσθετες πληροφορίες για το στοιχείο που εμφανίζονται όταν το ποντίκι σταματήσει
πάνω από το στοιχείο. Για παράδειγμα:
<a title="Download presentation"
href="presentation.pdf">presentation</a>
Έγγραφο HTML (HTML Document)

<!DOCTYPE html> <!DOCTYPE html>

<html> <html>
<head> <head>
<title>Collegelink</title> <title>Collegelink</title>
</head> </head>
<body> <body>
<h1>Welcome to the Web Development <h1>
Workshop</h1> Welcome to the Web
<p>This workshop covers all the necessary Development Workshop
technologies to develop dynamic web content and </h1>
web applications.</p> <p>
</body> This workshop covers all the
</html> necessary technologies to
develop dynamic web content
and web applications.
</p>
</body>
</html>
DOCTYPE

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

Όλα τα έγγραφα που είναι γραμμένα σε HTML5 πρέπει να ξεκινάνε με:

<!DOCTYPE html>

Στη συνέχεια ορίζονται η αρχή και το τέλος του εγγράφου με τις ετικέτες <html> και </html> αντίστοιχα.

Το περιεχόμενο ανάμεσα στις ετικέτες <head> και </head> είναι μη ορατό και παρέχει στον browser
πληροφορίες σχετικά με το έγγραφο, όπως είναι ο τίτλος, η κωδικοποίηση και οι πρόσθετοι πόροι (αρχεία
κ.ά.) που είναι απαραίτητοι για την ορθή προβολή της ιστοσελίδας.

Το περιεχόμενο ανάμεσα στις ετικέτες <body> και </body> είναι ορατό και περιλαμβάνει την πληροφορία
που προβάλλεται στο χρήστη.
<head>

Το στοιχείο head παρέχει στον browser πληροφορίες σχετικά με το έγγραφο HTML.

Τα στοιχεία που χρησιμοποιούνται στο head είναι:

● <title> : Απαραίτητο σε κάθε HTML έγγραφο και περιέχει τον τίτλο της ιστοσελίδας.
● <style> : Περιέχει οδηγίες (CSS) για την προβολή του περιεχομένου της ιστοσελίδας.
● <base> : Περιέχει την τοποθεσία-βάση για όλα τα URL που δεν περιέχουν πλήρη διαδρομή.
● <link> : Περιγράφει τη συσχέτιση με έναν εξωτερικό πόρο (συνήθως αρχεία CSS).
● <meta> : Περιέχει μεταδεδομένα της ιστοσελίδας χρήσιμα για τον browser και για SEO.
● <script> : Περιέχει κώδικα που εκτελείται στην πλευρά του πελάτη (JavaScript).
● <noscript> : Περιέχει εναλλακτικό περιεχόμενο σε περίπτωση που δεν επιτρέπεται η εκτέλεση κώδικα
στην πλευρά του πελάτη. Όταν βρίσκεται στο στοιχείο head μπορεί να περιέχει μόνο τα στοιχεία <link>,
<style> και <meta>.
<link>

Το στοιχείο link περιγράφει τη συσχέτιση με έναν εξωτερικό πόρο.

Ορισμένες από τις ιδιότητες που χρησιμοποιούνται στο link είναι:

● <rel> : Απαραίτητη ιδιότητα και προσδιορίζει τη σχέση μεταξύ εγγράφου και πόρου.
● <media> : Περιγράφει τον τύπο συσκευής που θα προβληθεί ο πόρος
● <type> : Περιγράφει τον τύπο δεδομένων του πόρου
● <href> : Περιέχει την τοποθεσία του πόρου.

Για παράδειγμα:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<script>

Το στοιχείο script περιέχει κώδικα που εκτελείται στην πλευρά του πελάτη (browser).

Ορισμένες από τις ιδιότητες που χρησιμοποιούνται στο script είναι:

● <async> : Ασύγχρονη εκτέλεση.
● <defer> : Εκτέλεση μετά το φόρτωμα του εγγράφου.
● <type> : Περιγράφει τον τύπο δεδομένων του πόρου.
● <src> : Περιέχει την τοποθεσία του αρχείου κώδικα. Αν υπάρχει η ιδιότητα src το στοιχείο script δεν
πρέπει να περιλαμβάνει περιεχόμενο κώδικα.

Για παράδειγμα:
<head>
<script async defer src="main_script.js"></script>
<script type="text/javascript">
document.title = “Web Development Workshop";
</script>
</head>
<body>

Το στοιχείο body περιέχει την ορατή πληροφορία της ιστοσελίδας μαζί με τα στοιχεία που τη μορφοποιούν.

Ορισμένα από τα στοιχεία που χρησιμοποιούνται πιο συχνά στο body είναι:

● <a> : Περιέχει σύνδεσμο προς ενότητα της σελίδας ή άλλη ιστοσελίδα.

● <br> : Αλλαγή γραμμής.
● <button> : Κουμπί για εκτέλεση ενέργειας.
● <div> : Ορίζει ένα τμήμα του περιεχομένου.
● <h1> <h2> <h3> ... <h6> : Περιέχουν επικεφαλίδες. Το 1 έχει μεγαλύτερη βαρύτητα από το 2 κ.ο.κ.
● <hr> : Οριζόντια διαχωριστική γραμμή
● <img> : Περιέχει εικόνα
● <p> : Περιέχει μια παράγραφο κειμένου.
● <span> : Ορίζει ένα τμήμα του περιεχομένου.
<a>

Το στοιχείο a περιέχει σύνδεσμο προς τμήμα της τρέχουσας σελίδας ή προς άλλο πόρο (ιστοσελίδα, αρχείο
κ.ά.).

Ορισμένες από τις ιδιότητες που χρησιμοποιούνται στο a είναι:

● <href> : Περιέχει το URL που οδηγεί ο σύνδεσμος.
● <rel> : Προσδιορίζει τη σχέση μεταξύ εγγράφου και πόρου.
● <target> : Καθορίζει που θα ανοίξει ο νέος πόρος.
● <type> : Περιγράφει τον τύπο δεδομένων του πόρου.

Για παράδειγμα:
<body>
<a href="https://www.collegelink.gr/ " target="_blank">CollegeLink</a>
</body>
<img>

Το στοιχείο img επιτρέπει την εισαγωγή εικόνων στο περιεχόμενο των εγγράφων HTML.

Ορισμένες από τις ιδιότητες που χρησιμοποιούνται στο img είναι:

● <src> : Περιέχει το URL της τοποθεσίας που βρίσκεται η εικόνα και είναι απαραίτητο.
● <alt> : Περιέχει το εναλλακτικό κείμενο για την εικόνα και είναι απαραίτητο.
● <height> : Καθορίζει το ύψος της εικόνας.
● <width> : Καθορίζει το πλάτος της εικόνας.

Για παράδειγμα:
<head>
<base href=" https://www.collegelink.gr/css/ ">
</head>
<body>
<img src="images/logo_css.png" alt="CollegeLink logo">
</body>
Σχόλια

Για να εισάγουμε σχόλια στον κώδικα της HTML τα γράφουμε στην ετικέτα <!-- … -->

Τα σχόλια δεν εμφανίζονται στο χρήστη και είναι αναγνώσιμα μόνο στον κώδικα της ιστοσελίδας.

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

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

<!-- this is a comment -->

Στοιχεία μορφοποίησης κειμένου

Για τη μορφοποίηση κειμένου η HTML παρέχει αρκετά στοιχεία που χρησιμοποιούνται ανάλογα με το
περιεχόμενο και τα δεδομένα που παρουσιάζονται.

Ορισμένα βασικά στοιχεία μορφοποίησης κειμένου είναι:

● <b> : έντονη γραφή
● <i> : πλάγια γραφή
● <s> : σβησμένο κείμενο
● <sub> : κείμενο ως βάση
● <sup> : κείμενο ως εκθέτης
● <u> : υπογραμμισμένη γραφή

Για παράδειγμα:
<body>
<p>
<i>E = mc²</i>
</p>
</body>
Λίστες

Για τη δημιουργία μιας λίστας από δεδομένα η HTML παρέχει τα εξής στοιχεία:

● <ul> : μη αριθμημένη λίστα

● <ol> : αριθμημένη λίστα
● <li> : στοιχείο λίστας (αριθμημένης και μη)
● <dl> : λίστα ορισμών
● <dt> : όρος σε λίστα ορισμών
● <dd> : ορισμός ενός όρου σε λίστα ορισμών

Για παράδειγμα:
<ul>
<li>Web Development Academy - Day 1
<ul>
<li>Web Development Introduction</li>
<li>HTML Basics</li>
<li>CSS Basics</li>
</ul>
</li>
</ul>
Πίνακες

Για την αναπαράσταση δεδομένων σε πίνακα η HTML παρέχει τα εξής στοιχεία:

● <table> : ορίζει ένα πίνακα

● <caption> : ορίζει τον τίτλο ενός πίνακα
● <thead> : ομαδοποιεί τα στοιχεία της κεφαλίδας του πίνακα
● <tfoot> : ομαδοποιεί τα στοιχεία στο τέλος του πίνακα
● <tbody> : ομαδοποιεί τα στοιχεία που ανήκουν στο κυρίως μέρος του πίνακα
● <tr> : ορίζει μια εγγραφή (γραμμή) στον πίνακα
● <th> : ορίζει ένα κελί τίτλου
● <td> : ορίζει ένα κελί δεδομένων
● <colgroup> : ομαδοποιεί μια ή περισσότερες στήλες για λόγους μορφοποίησης
● <col> : ορίζει τις ιδιότητες σε μια ή περισσότερες στήλες
Πίνακες - Παράδειγμα 1
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Πίνακες - Παράδειγμα 2
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Χρήσιμοι σύνδεσμοι

● https://www.w3schools.com/tags/default.asp
● https://www.w3schools.com/tags/ref_standardattributes.asp
● https://www.w3schools.com/tags/ref_attributes.asp
● https://www.w3.org/WAI/tutorials/tables/irregular/