Print
Category: Υλικό Μαθήματος
Hits: 1298

Η γλώσσα HTML (HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερκειμένου) αποτελείται από ένα σύνολο ετικετών (tags) με τις οποίες ορίζονται τόσο η δομή του κειμένου όσο και στοιχεία μορφοποίησης. Οι ετικέτες εμφανίζονται κατά ζεύγη. Η πρώτη οροθετεί την αρχή ισχύος της και η δεύτερη το τέλος. Για ορισμένες ετικέτες, το δεύτερο μέλος του ζεύγους μπορεί να παραλειφθεί. Η γενική μορφή είναι:
<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>  Αλλαγή γραμμής
<hr>  Εισαγωγή οριζόντιας γραμμής
&nbsp;  Εισαγωγή κενού (non-breaking space). Αν γράψετε στο κείμενό σας 10 κενά, ο φυλλομετρητής θα αφαιρέσει τα 9 από αυτά. Για να προσθέσετε πραγματικά κενά στο κείμενό σας, μπορείτε να χρησιμοποιήσετε τον ειδικό χαρακτήρα &nbsp;
<ul> ..... </ul>  Ορίζει μη αριθμημένη λίστα (unordered list), π.χ. κουκίδες. Συνδυάζεται με την ετικέτα <li>
<ol> ..... </ol>  Ορίζει αριθμημένη λίστα (ordered list). Συνδυάζεται με την ετικέτα <li>
<li> ..... </li>

 Ορίζει τα στοιχεία λίστας αριθμημένης ή όχι. π.χ.
<ol>
     <li> Πρώτο στοιχείο λίστας </li>
     <li> Δεύτερο στοιχείο λίστας </li>
     <li> Τρίτο στοιχείο λίστας </li>
</ol>

<img src= "photo">

 Ορίζει την εισαγωγή κάποιας εικόνας (image), η οποία βρίσκεται σε άλλο αρχείο από αυτό της ιστοσελίδας. Το όνομα του αρχείου εμφανίζεται ως παράμετρος μέσα στην ετικέτα π.χ.
<img src= "image.jpg">     ή
<img src= "./folder/image.jpg" width="200" height="150">
src είναι το όνομα αρχείου που περιέχει την εικόνα, width και height είναι το πλάτος και το ύψος της σε εικονοστοιχεία (pixels). Folder είναι το όνομα του φακέλου που περιέχει τη φωτογραφία μας.

<a href= "...."> .... </a>  Με αυτή την ετικέτα ορίζεται ένας σύνδεσμος προς μια ιστοσελίδα, η σε σημείο ιστοσελίδας. Ο σύνδεσμος ενεργοποιείται όταν στο φυλλομετρητή επιλέξουμε το κείμενο που υπάρχει ανάμεσα στο <a> και στο </a>. Η ιστοσελίδα στην οποία οδηγεί ο σύνδεσμος μπορεί να είναι στην ίδια τοποθεσία ή σε οποιαδήποτε άλλη στο διαδίκτυο. π.χ.
<a href="http://www.google.gr"> Αυτός είναι ο σύνδεσμος της google </a>