^{Κατασκευή ιστοσελίδων}

Τι είναι μια ιστοσελίδα

Ουσιαστικά πρόκειται για ένα αρχείο κειμένου, που μπορεί να φτιαχτεί με οποιονδήποτε απλό κειμενογράφο (text editor), ακόμα και με το Σημειωματάριο (Notepad) των Windows. Συνήθως όμως δουλεύουμε με προγράμματα που εκτός από το να γράφουμε το κείμενο-κώδικα, μας επιτρέπουν και να δουλεύουμε με το ποντίκι σε μια (προσεγγιστικά) οπτική μορφή της ιστοσελίδας μας (visual editors). Τέτοιοι είναι ο BlueGriffon, το MS Expression Web, o Adobe Dreamweaver κ.ά. (Παρουσίαση μερικών από τα παραπάνω λογισμικά)

Ο κώδικας-κείμενο αποτελείται από τρία μέρη: Το κομμάτι που χαρακτηρίζει τις διάφορες κατηγορίες του περιεχομένου (λίστες, πίνακες, παραγράφους, επικεφαλίδες, εικόνες...) γραμμένο με τη γλώσσα HTML, το κομμάτι που ρυθμίζει την εμφάνιση (χρώματα κλπ) και τη δομή (layout) γραμμένο σήμερα με τη γλώσσα CSS και το κομμάτι της αλληλεπίδρασης με τον χρήστη γραμμένο σε JavaScript συνήθως.

Βεβαίως υπάρχουν και άλλοι τρόποι για να φτιάξετε μια ιστοσελίδα από το μηδέν, αλλά είναι πιο σπάνιοι, απαιτούν δε εξειδικευμένο, ακριβό και συνήθως δύσκολο στη χρήση λογισμικό (π.χ. Adobe Flash).

Διαδικασία

Ένας συνηθισμένος τρόπος δημιουργίας ενός μικρού στατικού ιστοτόπου από το μηδέν είναι ο εξής - χωρίς να είναι ο μοναδικός:

1. Συγγραφή του κειμένου: γεμίζουμε την αρχική μας σελίδα με απλό, σκέτο κείμενο
2. Χαρακτηρισμός περιεχομένου: χωρίζουμε το κείμενο με ετικέτες HTML σε παραγράφους, επικεφαλίδες, λίστες κλπ. Ως μη αριθμημένες λίστες <ul> χαρακτηρίζουμε επίσης τους κάθε λογής συνδέσμους.
3. Εμφάνιση & layout: Δημιουργούμε τους κατάλληλους κανόνες CSS.
4. Εξαγωγή κανόνων CSS: Μεταφέρουμε τους κανόνες CSS σε χωριστό αρχείο.
5. Δημιουργία επόμενης σελίδας: Με καλούπι αυτήν που φτιάξαμε ήδη.

Εμφάνιση και δομή (layout)

Υπάρχουν τρεις τρόποι για να οργανώσουμε το layout μιας ιστοσελίδας, οι εξής δύο : CSS :-). Τέλοσπάντων, υπήρχαν και άλλοι δύο: Frames και Πίνακες. Ας τα δούμε ένα ένα:

1. Τα frames είναι νεκρά προ πολλού, οπότε ξεχάστε τα... (εξήγηση για τους περίεργους). H δε HTML5 δεν τα υποστηρίζει καθόλου.
2. Οι πίνακες πάλι (για χρήση στο layout) είναι ετοιμοθάνατοι. Ο κανονικός ρόλος τους είναι για ταξινόμηση δεδομένων. Ωστόσο, είναι ευκολότεροι στο αρχικό στήσιμο, οπότε είναι καταλληλότεροι για αρχαρίους και απλές σελίδες. Όμως:
   • Είναι δύσκολοι στις εκ των υστέρων αλλαγές
   • Δημιουργούν δυσανάγνωστο κώδικα
   • Κάνουν την σελίδα αργή στο φόρτωμα
3. Τα CSS (= Cascading Style Sheets) είναι δυσκολότερα στην αρχή, αφού πρόκειται για μια γλώσσα οπότε απαιτούν εξοικείωση με εντολές και συντακτικό, έχουν όμως μεγάλες δυνατότητες και ευελιξία.

Αν θέλετε να δείτε και να θαυμάσετε πώς μπορεί μια ιστοσελίδα με το ίδιο ακριβώς περιεχόμενο να αλλάζει εμφάνιση με τη χρήση των CSS, πηγαίνετε στο CSS Zen Garden. Οδηγίες για την εφαρμογή των CSS (σε μορφή παρουσίασης) θα βρήτε στο σύνδεσμο CSS3 αριστερά

HTML5 - CSS3

Ξέρω τι σκέφτεστε: "Και τώρα; ακόμα περισσότερα αλαμπουρνέζικα θα μάθω;" Η απάντηση είναι ότι τώρα θα μάθουμε ακόμα λιγότερα, προς όφελος της ψυχικής μας υγείας. Γιατί η HTML5 είναι απλούστερη.

Επιπλέον μας δίνει δυνατότητες που προηγουμένως είτε πολύ δύσκολα είτε με χρήση επιπρόσθετων τεχνολογιών (Flash, JavaScript) μπορούσαν να υλοποιηθούν. Και το καλύτερο: Ότι είχα φτιάξει ως τώρα με HTML 4 ή XHTML, θα δουλέψει κανονικά, και ότι φτιάχνω με HTML 5 θα δουλεύει με όλους τους browser. Όλους;;;; Όχι! γιατί σε μια (όχι και τόσο μικρή) γωνιά του διαδικτύου ένας browser αντιστέκεται ακόμα: O Internet Explorer φυσικά! (ως την έκδοση 8, από την έκδοση 9 και μετά, που όμως δεν τρέχει σε Windows XP ή παλιότερο, είναι πιο υπάκουος). Για όσους επιθυμούν 100% συμβατότητα, ας ρίξουν μια ματιά στα παλιά μαθήματα