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

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

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

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

Διαδικασία

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

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

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

paintΥπάρχουν τρεις τρόποι για να οργανώσουμε το layout μιας ιστοσελίδας, οι εξής δύο : CSS :-) .

Τέλοσπάντων, υπήρχαν και άλλοι δύο:

Ας τα δούμε ένα ένα:

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

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

Οδηγίες για την εφαρμογή των CSS (σε μορφή παρουσίασης) θα βρήτε στο σύνδεσμο CSS αριστερά