Η γλώσσα HTML (HyperText Markup
Language) είναι μια περιγραφική
γλώσσα, είναι ο τρόπος δηλαδή με τον οποίο ο browser απεικονίζει τα
έγγραφα.
Με τον όρο έγγραφα εννοούμε κάθε είδους
αρχείου, όπως αρχείο κειμένου, εικόνες, animation και βίντεο. Τα αρχεία της
HTML είναι απλά αρχεία κειμένου στα οποία υπάρχουν ειδικοί κώδικες, οι οποίοι
ονομάζονται ετικέτες (tags), που δηλώνουν στον browser τον τρόπο με τον
οποίο θα εμφανιστούν τα αρχεία αυτά.
Οι ετικέτες έχουν την παρακάτω γενική δομή:
Οι ετικέτες έχουν την παρακάτω γενική δομή:
<όνομα_ετικέτας> κείμενο
</όνομα_ετικέτας>
Με το όνομα_ετικέτας
δηλώνεται στον browser η ενέργεια που θα εκτελεστεί στο κείμενο. Για
να δηλώσουμε το σημείο που θα σταματήσει να εκτελείται η ενέργεια αυτή
χρησιμοποιούμε την αντίστοιχη ετικέτα κλεισίματος </όνομα_ετικέτας>.
Υπάρχουν περιπτώσεις ετικετών HTML που δεν έχουν ετικέτα κλεισίματος, π.χ. όταν
θέλουμε να εισάγουμε μία εικόνα απλά δηλώνουμε την ενέργεια αυτή με την
αντίστοιχη HTML ετικέτα – η ετικέτα κλεισίματος στην περίπτωση αυτή δεν έχει
κανένα νόημα. Αντίθετα, όταν θέλουμε να κάνουμε ένα κείμενο να έχει έντονη γραφή
τότε πρέπει να συμπεριλάβουμε το κείμενο εντός της αντίστοιχης HTML ετικέτας.
Ας
γράψουμε λίγο κώδικα
1.
Ανοίξτε το Σημειωματάριο (Notepad) από τα
βοηθήματα στην έναρξη των Windows.
2.
Γράψτε τον κώδικα
. Για αρχή δοκιμάστε το παράδειγμα που δίνεται παρακάτω
ΠΑΡΑΔΕΙΓΜΑ 1ο
<html>
<head>
<title>
22ο ΓΕΛ ΑΘΗΝΩΝ – ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ
</title>
</head>
<body>
Μαθαίνουμε
να φτιάχνουμε ιστοσελίδες γράφοντας κώδικα HTML
</body>
/html>
3.
< Αποθηκεύστε το αρχείο
σε καινούργιο φάκελο που θα δημιουργήσετε με το όνομα «Παραδείγματα HTML». ΠΡΟΣΟΧΗ!!
Δώστε του το όνομα Παράδειγμα_1 και την κατάληξη .html και
στον τύπο αρχείου επιλέξτε ‘Όλα τα
αρχεία’ .
4.
Ελαχιστοποιήστε
το παράθυρο του προγράμματος
5.
Ανοίξτε τον φυλλομετρητή (browser) και από το
μενού Αρχείο ανοίξτε το αρχείο με το
παράδειγμα που γράψετε για να δείτε τη μορφή που θα έχει ως ιστοσελίδα.
Μπορείτε να εναλλάσσεστε
μεταξύ του φυλλομετρητή και του σημειωματάριου, να κάνετε αλλαγές στον κώδικα
και να βλέπετε το αποτέλεσμα με ανανέωση της ιστοσελίδας στο φυλλομετρητή.
Επικεφαλίδες
Οι επικεφαλίδες
(headings), χρησιμοποιούνται για την
μορφοποίηση του κειμένου που εμφανίζεται στην σελίδα. Για να δημιουργήσουμε μία
επικεφαλίδα χρησιμοποιούμε την ετικέτα <hN>…</hN>, όπου το N είναι
ένας αριθμός από το 1 έως και το 6. Η επικεφαλίδα <h1>…</h1> είναι
η πιο σημαντική. Όσο αυξάνεται το N τόσο λιγότερο σημαντική γίνεται η επικεφαλίδα. Παρακάτω
δείχνουμε, με ένα παράδειγμα, τον τρόπο με τον οποίο εμφανίζονται διάφορα
επίπεδα επικεφαλίδων στον browser
ΠΑΡΑΔΕΙΓΜΑ 2ο
<html>
<head>
<title>Πίνακας Περιεχομένων</title>
</head>
<body>
<h1>Κεφάλαιο 1: Τα βασικά της HTML</h1>
<h2>Ενότητα 1.1: Ετικέτες (tags)</h2>
<h2>Ενότητα 1.2: Δομή ενός εγγράφου HTML</h2>
<h2>Ενότητα 1.3: Επικεφαλίδες</h2>
<h2>Ενότητα 1.4: Διαχωριστικά</h2>
<h3>Παράγραφος 1.4.1: Παράγραφοι</h3>
<h3>Παράγραφος 1.4.2: Οριζόντιες γραμμές</h3>
<h3>Παράγραφος 1.4.3: Αλλαγή γραμμής</h3>
</body>
</html>
Ακολουθήστε την ίδια διαδικασία όπως στο πρώτο
παράδειγμα. Αποθηκέυστε το ως Παράδειγμα_2.html
Διαχωριστικά Η HTML γενικά αγνοεί τα κενά διαστήματα ή και τις αλλαγές γραμμής.
Για τη δημιουργία τμημάτων κειμένου, τα οποία θα είναι αυτοδύναμα, γίνεται
χρήση διαχωριστικών. Χρησιμοποιούνται οι ετικέτες:
1. <p>…</p>
Ορίζει παραγράφους που
διαχωρίζουν το κείμενο μέσω της εμφάνισης μίας κενής γραμμής . H ετικέτα τερματισμού </p> είναι προαιρετική. Σε
περίπτωση όμως που χρησιμοποιείται
κάποια μέθοδος στοίχισης κειμένου η παρουσία της είναι υποχρεωτική
2.
<br> Παρόμοια λειτουργία με την παράγραφο έχει και η ετικέτα αλλαγής
γραμμής. Όμως, σε αντίθεση με την παράγραφο, δεν αφήνουμε κενή γραμμή. Η
ετικέτα αυτή δεν έχει αντίστοιχη ετικέτα τερματισμού.
3.
<hr>
Άλλος τρόπος διαχωρισμού του κειμένου είναι και οι οριζόντιες γραμμές
(horizontal rules). Η ετικέτα αυτή δεν έχει αντίστοιχη ετικέτα τερματισμού.
Δοκιμάστε τα παραπάνω στο παράδειγμα που ακολουθεί και δείτε τα
αποτελέσματα:
ΠΑΡΑΔΕΙΓΜΑ 3ο
<html>
<head>
<title> Διαχωρισμός κειμένου </title>
</head>
<body>
Η σελίδα αυτή περιέχει δύο τμήματα.
<p>
Στο πρώτο τμήμα ο διαχωρισμός του κειμένου γίνεται μέσω χρήσης
παραγράφων,
<p>
ενώ στο δεύτερο ο διαχωρισμός γίνεται μέσω της επικεφαλίδας 3 και
αλλαγής γραμμής.
<hr>
<h3> Η σελίδα αυτή περιέχει δύο τμήματα. </h3>
Στο πρώτο τμήμα ο διαχωρισμός του κειμένου γίνεται μέσω χρήσης
παραγράφων,
<br>
ενώ στο δεύτερο ο διαχωρισμός γίνεται μέσω της επικεφαλίδας 3 και
αλλαγής γραμμής.
</body>
Αλλαγή
χρώματος φόντου και γραμμάτων
Για
να αλλάξουμε το φόντο μίας σελίδας χρησιμοποιείται η παράμετρος bgcolor της ετικέτας body.
Στην ετικέτα body χρησιμοποιούνται και άλλα χαρακτηριστικά για τον έλεγχο των
χρωμάτων της σελίδας: για το χρώμα του απλού κειμένου χρησιμοποιείται το
χαρακτηριστικό text.
Δοκιμάστε
να αντικαταστήσετ την ετικέτα <Body> σε κάποιο από τα παραδείγματα που έχετε ήδη γράψει με την ετικέτα:
<Body bgcolor = “yellow” text = “blue”>
Τι χρώμα έχει τώρα το
φόντο και τι τα γράμματα;
Ετικέτες
στυλ
Εκτός από τις παραγράφους και τις
επικεφαλίδες, όταν θέλουμε να δώσουμε έμφαση σε κάποιο κείμενο μπορούμε να
χρησιμοποιήσουμε και τις ετικέτες στυλ της HTML. Οι πιο βασικές είναι οι <b>…</b>,
που κάνει το κείμενο να εμφανίζεται με έντονη γραφή, η <i>…</i>
που κάνει το κείμενο να εμφανίζεται με πλάγια γραφή.
Ας γράψουμε το παρακάτω κομμάτι κώδικα για
να δούμε το αποτέλεσμα:
ΠΑΡΑΔΕΙΓΜΑ 4ο
<html>
<head>
<title> Ετικέτες στυλ </title>
</head>
<body>
Στην HTML μπορεί το κείμενο να εμφανίζεται σε
<b> έντονη </b> γραφή, σε <i> πλάγια </i>
γραφή, αλλά και σε διάφορους συνδυασμούς, όπως
<b> <i> έντονο και πλάγιο </i> </b>
ταυτόχρονα.
</body>
</html>
Εισαγωγή
εικόνας
Για την ενσωμάτωση μίας εικόνας σε μία
ιστοσελίδα χρησιμοποιείται η ετικέτα <img
src=όνομα αρχείου εικόνας>. Στην ετικέτα αυτή δηλώνουμε το όνομα του
αρχείου της εικόνας, αλλά μπορούμε να δηλώσουμε και άλλα χαρακτηριστικά, όπως
το ύψος και το πλάτος της. Η πιο χαρακτηριστική ιδιότητα είναι η source που δείχνει την πηγή της εικόνας. Π.χ.
για την ενσωμάτωση του αρχείου contents.gif, χρησιμοποιούμε τον ακόλουθο
κώδικα: <img src=”contents.gif”>.
Εφαρμογή
Αναζητήστε στο διαδίκτυο
μια εικόνα σχετική με την HTML.
Αποθηκεύστε την στον ίδιο
φάκελο που έχετε το αρχείο του παραδείγματος_2 με το όνομα image1. jpg ή image1.gif. Εναλλακτικά δημιουργείστε υποφάκελο images για να συγκεντρώνετε όλες τις φωτογραφίες που θα
χρειαστείτε
Χρησιμοποιούμε την ετικέτα
<IMG> για την εισαγωγή της εικόνας στον ήδη υπάρχοντα
κώδικα του παραδείγματος_2. Συγκριμένα προσθέστε σε όποιο σημείο θέλετε ( στο κυρίως
σώμα του κώδικα) την ετικέτα:
<p><img src= “image1.jpg”> </p>
Η ιδιότητα SRC (source)
δίνει τη διαδρομή και το όνομα ή το URL της εικόνας. Η ετικέτα <p> θέτει την εικόνα σε άλλη παράγραφο.
Ελέγξτε το αποτέλεσμα στον browser.
Δεσμοί υπερκειμένου – Σύνδεσμοι
Η πραγματική
δύναμη της HTML είναι η δυνατότητα δημιουργίας δεσμών υπερκειμένου
(hypertext links) προς άλλα έγγραφα (όπως ιστοσελίδες, γραφικά, βίντεο και
animation). Ο χρήστης, με ένα απλό κλικ του ποντικιού, μπορεί να μεταβεί σε
οποιαδήποτε τοποθεσία του Διαδικτύου.
Για
τη δημιουργία ενός δεσμού σε τοποθεσίες του Internet χρησιμοποιείται η ετικέτα
<a>, όπως και στην περίπτωση των δεσμών σε τοπικά αρχεία. Στην περίπτωση
αυτή στη θέση του ονόματος_αρχείου χρησιμοποιούμε το URL της τοποθεσίας
στην οποία θέλουμε να δείχνει ο δεσμός:
<a href=”URL”>Κείμενο
δεσμού</a>
Π.χ
αν θέλουμε να δηλώσουμε ένα δεσμό που να δείχνει στην κεντρική σελίδα του Πανελλήνιου
Σχολικού δικτύου, με κείμενο ζεύξης το «ΠΣΔ» γράφουμε:
Τοποθετείστε
την παραπάνω ετικέτα στο τέταρτο παράδειγμα σε κατάλληλη θέση.
Κάντε
το ίδιο στο πρώτο παράδειγμα συνδέοντας το με την ιστοσελίδα του μαθήματος και
με κείμενο ζεύξης «Υλικό για το μάθημα»
