Για να γράψουμε κώδικα HTML, το μόνο
που χρειαζόμαστε είναι ένας text editor,
όπως το Σημειωματάριο των Windows ή ο
emacs στο Linux. Επίσης, θα πρέπει να έχε-
τε τουλάχιστον έναν φυλλομετρητή
(
browser) εγκατεστημένο στον υπολογιστή
σας. Η δομή της HTML είναι πολύ απλή. Κά-
θε ενότητα της σελίδας ορίζεται μέσα στις
ειδικές ετικέτες (tags) που παρέχονται από
τη γλώσσα. Τα tags βρίσκονται πάντα μετα-
ξύ των συμβόλων < > ενώ γράφονται πά-
ντα ανά δύο. Για παράδειγμα, ο τίτλος της
σελίδας πρέπει να βρίσκεται μέσα στην ετι-
κέτα title, ενώ μία επικεφαλίδα πρέπει να
την γράψουμε μεταξύ της ετικέτας h1. Μία
πολύ σημαντική ετικέτα, που χρησιμοποιεί-
ται σε συνδυασμό με τη CSS, που θα δούμε
παρακάτω, είναι το div tag. Με αυτό ορί-
ζουμε τις επιμέρους περιοχές της σελίδας
μας, έτσι ώστε να μπορούμε να τις μορφο-
ποιήσουμε ξεχωριστά. Ας δούμε ένα απλό
παράδειγμα σελίδας HTML. Στην εικόνα (1)
βλέπουμε τον κώδικα και στην εικόνα (2)
τη σελίδα μας.
Επεξήγηση Κώδικα:
•
Τo tag <html> δηλώνει πως αρχίζει κώ-
δικας γραμμένος σε γλώσσα HTML.
•
Τo tag <head> δηλώνει πως ό,τι εμπε-
ριέχεται σε αυτό, αποτελεί τμήμα της
επικεφαλίδας.
•
Τo tag <body> δηλώνει πως ό,τι εμπε-
ριέχεται σε αυτό, αποτελεί τμήμα της
σελίδας που θα εμφανιστεί.
•
Τo tag <h1>(heading) δηλώνει επικεφα-
λίδα. Τα μεγέθη τους εκτείνονται
από <h1> που είναι το μεγαλύτερο, μέ-
χρι το <h6>.
•
Τέλος το <p>(paragraph) δηλώνει μία
καινούργια παράγραφο.
CSS
Το CSS( Cascading Style Sheets ) είναι μία
γλώσσα με την οποία μπορούμε να ορίσου-
με με σαφήνεια και ευελιξία τον τρόπο με
τον οποίο θα εμφανίζονται τα διάφορα
στοιχεία στην ιστοσελίδα. Μπορούμε να
πούμε ότι η html χρησιμοποιείται για να δο-
μήσει το περιεχόμενο, ενώ το CSS για να
διαμορφώσει και να μορφοποιήσει το δομη-
μένο περιεχόμενο. Το CSS αποτέλεσε επα-
νάσταση στον κόσμο του Web design, κα-
θώς κατάφερε να απλοποιήσει την επίπονη
διαδικασία της μορφοποίησης του κειμέ-
νου. Τα πλεονεκτήματα που παρέχει είναι
πολλά, για παράδειγμα, δίνει τη δυνατότη-
τα ταυτόχρονου ελέγχου της διάταξης πολ-
λών εγγράφων από ένα μόνο φύλλο στυλ
(
style sheet) ή μπορεί να γίνει εφαρμογή
διαφορετικής διάταξης σε διαφορετικές
εξόδους, όπως οθόνη ή εκτύπωση κ.ά.
Υπάρχουν τρεις τρόποι για να εφαρμόσου-
με CSS σε ένα .html αρχείο. Ο πρώτος είναι
χρησιμοποιώντας την ιδιότητα style της
HTML κατευθείαν στην ετικέτα στην οποία
θέλουμε να κάνουμε μορφοποίηση. Ο δεύ-
τερος τρόπος είναι να γράψουμε τη μορφο-
ποίηση σε γλώσσα CSS εσωτερικά του κει-
μένου της html και, τέλος, μπορούμε να
χρησιμοποιήσουμε έναν εξωτερικό σύνδε-
σμο προς στο αρχείο css που περιέχει τη
μορφοποίηση. Ας δούμε ένα απλό παρά-
δειγμα εφαρμογής CSS στη σελίδα που
φτιάξαμε στο παράδειγμα με την HTML και
με τους τρεις διαθέσιμους τρόπους. Στις ει-
κόνες 3, 4, 5 βλέπουμε τον κώδικα για κάθε
τρόπο αντίστοιχα και στην εικόνα 6 το απο-
131
PC Master
Πρώτος τρόπος εφαρμογής CSS χρησιμοποιώντας την ιδιότητα style.
Δεύτερος τρόπος εφαρμογής CSS εσωτερικά του κειμένου της html.
Τρίτος τρόπος εφαρμογής CSS με εξωτερικό σύνδεσμο.
Το αποτέλεσμα της μορφοποίησης (και με
τους τρεις τρόπους) είναι η εφαρμογή γκρι
φόντου σε ολόκληρη τη σελίδα και κόκκινου
φόντου ανάμεσα στην παράγραφο.
3
4
5
6
