Κεφάλαιο 11 - Εισαγωγή στην HTML

Εκτύπωση
Ημερομηνία δημοσίευσης

HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και έπειτα προσθέτονται ειδικά σύμβολα γύρω από τις λέξεις ή από ολόκληρες προτάσεις ώστε να καθοριστεί η εμφάνιση τους στην οθόνη. Τα ειδικά σύμβολα στην 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>  Αλλαγή γραμμής
&nbsp;  Εισαγωγή κενού (non-breaking space). Αν γράψετε στο κείμενό σας 10 κενά, ο φυλλομετρητής θα αφαιρέσει τα 9 από αυτά. Για να προσθέσετε πραγματικά κενά στο κείμενό σας, μπορείτε να χρησιμοποιήσετε τον ειδικό χαρακτήρα &nbsp;
<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 μπορείτε να βρείτε πατώντας εδώ.

Μπορείτε να δείτε μια σειρά από μαθησιακές δραστηριότητες – μαθήματα ανάπτυξης / τροποποίησης κώδικα.

Τα παραπάνω μαθήματα και παιχνίδια ετοιμάστηκαν από την εταιρία infolearn (www.infolearn.gr) και ενσωματώθηκαν στο προϊόν της TEST4U (www.test4u.eu) με την χορηγία του φορέα DIPLOMA (www.diploma.edu.gr) .