H HTML είναι το ακρωνύμιο των λέξεων
HyperText Markup Language, γλώσσα χαρακτηρισμού υπερκειμένου, και
είναι η βασική γλώσσα δόμησης σελίδων του World Wide Web (ή απλά
ιστού: Web).
Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται
πρώτα το κείμενο και έπειτα προσθέτονται ειδικά σύμβολα γύρω από τις λέξεις ή
από ολόκληρες προτάσεις ώστε να καθοριστεί η εμφάνιση τους στην οθόνη. Τα
ειδικά σύμβολα στην HTML λέγονται ετικέτες (tags).
Η HTML διαθέτει ένα πεπερασμένο αριθμό ετικετών που μπορούμε
να χρησιμοποιήσουμε. Η πρώτη οροθετεί την αρχή ισχύος της και η δεύτερη το
τέλος. Για ορισμένες ετικέτες, το δεύτερο μέλος του ζεύγους μπορεί να
παραλειφθεί. Η γενική μορφή είναι:
<tag "πιθανές παράμετροι"> κείμενο... </tag>
Βασικές ετικέτες (tags) της HTML
|
|
<html> ..... </html>
|
Οροθετεί την αρχή και το τέλος μιας ιστοσελίδας
|
<head> ..... </head>
|
Οροθετεί το τμήμα εκείνο της ιστοσελίδας στο οποίο
ορίζονται διαχειριστικής φύσεως πληροφορίες που αφορούν το περιεχόμενο της
ιστοσελίδας
|
<body> ..... </body>
|
Οροθετεί το περιεχόμενο της ιστοσελίδας
|
<title> ..... </title>
|
Ορίζει τον τίτλο της ιστοσελίδας. Τοποθετείται στην
περιοχή μεταξύ <head> και </head>.
Συνήθως εμφανίζεται στον τίτλο του παραθύρου του φυλλομετρητή. π.χ.
<title> Αυτός είναι ο τίτλος </title> |
<h1>
..... </h1>
<h2> ..... </h2> <h3> ..... </h3> <h4> ..... </h4> <h5> ..... </h5> <h6> ..... </h6> |
Καθορισμός επικεφαλίδων. Υπάρχουν 6 επίπεδα
φθίνουσας τάξης με το <h1> να είναι η μεγαλύτερη
επικεφαλίδα και το <h6> η μικρότερη.
|
<p> ..... </p>
|
Ορισμός παραγράφου
|
<b> ..... </b>
|
Έντονη γραφή
|
<i> ..... </i>
|
Πλάγια γραφή
|
<u> ..... </u>
|
Υπογράμμιση
|
<br>
|
Αλλαγή γραμμής
|
|
Εισαγωγή κενού (non-breaking space). Αν γράψετε στο
κείμενό σας 10 κενά, ο φυλλομετρητής θα αφαιρέσει τα 9 από αυτά. Για να
προσθέσετε πραγματικά κενά στο κείμενό σας, μπορείτε να χρησιμοποιήσετε τον
ειδικό χαρακτήρα
|
<ul> ..... </ul>
|
Ορίζει λίστα με κουκίδες (bullets)
|
<ol> ..... </ol>
|
Ορίζει αριθμημένη λίστα
|
<li> ..... </li>
|
Ορίζει τα στοιχεία λίστας αριθμημένης ή όχι. π.χ.
<ol> <li> Πρώτο στοιχείο λίστας </li> <li> Δεύτερο στοιχείο λίστας </li> <li> Τρίτο στοιχείο λίστας </li> </ol> |
<img> ..... </img>
|
Ορίζει την εισαγωγή κάποιας εικόνας (image), η οποία
βρίσκεται σε άλλο αρχείο από αυτό της ιστοσελίδας. Το όνομα του αρχείου
εμφανίζεται ως παράμετρος μέσα στην ετικέτα π.χ.
<img src= "./image1.jpeg" width="200" height="150"> src είναι το όνομα αρχείου που περιέχει την εικόνα, width και height είναι το πλάτος και το ύψος της σε εικονοστοιχεία (pixels). |
<a> ..... </a>
|
Με αυτή την ετικέτα ορίζεται ένας σύνδεσμος προς μια
ιστοσελίδα, η σε σημείο ιστοσελίδας. Ο σύνδεσμος ενεργοποιείται όταν στο
φυλλομετρητή επιλέξουμε αυτό που υπάρχει ανάμεσα στο <a> και
στο </a>. Η ιστοσελίδα στην οποία οδηγεί ο σύνδεσμος μπορεί
να είναι στην ίδια τοποθεσία ή σε οποιαδήποτε άλλη στο διαδίκτυο. π.χ.
<a href="http://www.google.gr"> Αυτός είναι ο σύνδεσμος της google </a> |
- Εισαγωγή στην HTML
- Σημειώσεις για τη Γλώσσα HTML
- Μπορείτε να δείτε μια σειρά από μαθησιακές δραστηριότητες – μαθήματα ανάπτυξης / τροποποίησης κώδικα.
Τα παραπάνω μαθήματα και παιχνίδια ετοιμάστηκαν από την
εταιρία infolearn (www.infolearn.gr)
και ενσωματώθηκαν στο προϊόν της TEST4U (www.test4u.eu)
με την χορηγία του φορέα DIPLOMA (www.diploma.edu.gr).
Δείτε ένα βίντεο tutorial: