PC Master
132
τέλεσμα της μορφοποίησης στη σελίδα
μας. Οι δυνατότητες μορφοποίησης κειμέ-
νου με CSS είναι πολλές. Γενικά, μπορούμε
να αλλάξουμε τη γραμματοσειρά, το μέγε-
θος και το χρώμα της, να αλλάξουμε το
χρώμα του φόντου (όπως κάναμε στο πα-
ράδειγμά μας), να ορίσουμε περιθώρια και
συγκεκριμένες θέσεις στις οποίες θα εμφα-
νίζονται τα επιμέρους στοιχεία κ.ά. Για να
μάθετε σε βάθος CSS, πρέπει να πειραματι-
στείτε με τις διάφορες ιδιότητες του.
JAVASCRIPT
Η HTML και το CSS μάς δίνουν τη δυνατό-
τητα να χτίσουμε στατικές ιστοσελίδες και
να τις διακοσμήσουμε με πολλούς και διά-
φορους τρόπους. Τι γίνεται όμως, όταν θέ-
λουμε δυναμικό περιεχόμενο το οποίο να
αλλάζει ανάλογα με τις επιλογές που κάνει
ο χρήστης; Για παράδειγμα, ένα αναδυόμε-
νο μενού που ανοίγει όταν εστιάσουμε σε
αυτό ή μία φόρμα που «καθαρίζει» από κεί-
μενο όταν την επιλέξουμε; Η απάντηση εί-
ναι οι γλώσσες προγραμματισμού τύπου
script, με κύριο εκπρόσωπο την javascript.
Η javascript είναι γλώσσα προγραμματι-
σμού που εκτελείται από την πλευρά του
χρήστη (client side) για τη δημιουργία και
τη διαχείριση δυναμικού περιεχομένου στις
σελίδες. Όπως μπορεί πολλοί να νομίζουν,
η javascript δεν έχει καμία σχέση με την
γλώσσα προγραμματισμού java. Ο λόγος
που δανείζεται την προσωνυμία java είναι
επειδή η σύνταξή της είναι παρόμοια με
εκείνη της java. Στο παρόντα οδηγό δεν θα
δούμε πώς να προγραμματίζουμε σε
javascript. Κάτι τέτοιο θα απαιτούσε ένα
πολυσέλιδο αφιέρωμα από μόνο του. Αντί-
θετα, θα δούμε πώς μπορούμε να χρησιμο-
ποιήσουμε έτοιμα προγράμματα (scripts)
ενσωματώνοντάς τα στον κώδικα της σελί-
δας μας. Η ενσωμάτωση γίνεται με τον ίδιο
τρόπο που ενσωματώνουμε CSS. Ας δούμε
τώρα το παράδειγμα μας, εάν σε αυτό εν-
σωματώσουμε ένα απλό script το οποίο εμ-
φανίζει την ημερομηνία και την ώρα, όταν
πατήσουμε ένα κουμπί. Η εικόνα 7 δείχνει
τον κώδικα που γράψαμε ενώ οι 8 και 9 το
αποτέλεσμα που θα έχει στη σελίδα μας. Η
javascript διαθέτει έναν πολύ μεγάλο αριθ-
μό από βιβλιοθήκες (Jquery κ.λπ.) και έτοι-
μα scripts, έτσι ίσως να μη χρειαστεί ποτέ
να φτιάξουμε κάτι δικό μας από την αρχή.
Βέβαια, αν θέλουμε να κάνουμε κάτι εξεζη-
τημένο, θα πρέπει αργά η γρήγορα να μά-
θουμε να προγραμματίζουμε σε javascript.
PHP/MYSQL Ή ASP/MSSQL
Η HTML και το CSS σε συνδυασμό με
javascript είναι κατάλληλες για το σχεδια-
σμό στατικών ιστοσελίδων με δυναμικό πε-
ριεχόμενο. Από την άλλη, εάν θέλουμε να
δημιουργήσουμε εξ ολοκλήρου δυναμικές
ιστοσελίδες που να χρησιμοποιούν βάση δε-
δομένων για τη διαχείριση χρηστών, δεδο-
μένων κ.λπ. πρέπει να χρησιμοποιήσουμε
είτε PHP με MYSQL είτε ASP με MS-SQL. Οι
PHP και ASP είναι γλώσσες προγραμματι-
σμού που χρησιμοποιούνται για τη δημιουρ-
γία δυναμικών ιστοσελίδων με τη βοήθεια
των MYSQL και MS-SQL αντίστοιχα. Οι MYSQL
και MS SQL είναι συστήματα διαχείρισης σχε-
σιακών βάσεων δεδομένων. Η κύρια διαφο-
ρά των PHP/MYSQL με ASP/MS-SQL είναι ότι
η πρώτη μπορεί να τρέξει σε Linux, αλλά και
Windows servers, ενώ οι ASP/-MS SQL, που
ανήκουν στη Microsoft, εκτελούνται μόνο
σε Windows servers. Έτσι, για να σχεδιά-
σουμε δυναμικές ιστοσελίδες, δεν δουλεύ-
ουμε με HTML κώδικα, αλλά με PHP ή ASP
κώδικα, ο οποίος εκτελείται στον εξυπηρε-
τητή (server side) και μεταφράζεται σε
HTML για να τη «διαβάσει» ο φυλλομετρη-
τής. Ευτυχώς, υπάρχουν ολοκληρωμένα συ-
στήματα που έχουν βασιστεί σε PHP η ASP
όπως θα δούμε παρακάτω, οπότε δεν χρειά-
ζεται να εφεύρουμε ξανά τον τροχό.
CMS
Τα CMS (Content Management Systems)
είναι συστήματα διαχείρισης περιεχομένου
δυναμικών ιστοσελίδων. Είναι στην ουσία,
εφαρμογές γραμμένες σε php ή asp που
επιτρέπουν στο χρήστη να διαχειρίζεται δι-
κτυακό περιεχόμενο, κείμενα, εικόνες κ.λπ.
Έτσι, εγκαθιστώντας στον server το CMS, ο
χρήστης μπορεί να δημιουργήσει εύκολα
και γρήγορα τη δική του δυναμική ιστοσελί-
δα χωρίς να χρειάζεται να έχει ειδικές γνώ-
σεις σχετικές με τη δημιουργία ιστοσελίδων
(
HTML,CSS κ.λπ.). Πολύ γνωστά δωρεάν CMS
στα οποία βασίζονται χιλιάδες ιστοσελίδες,
είναι τα Joomla, Drupal και Wordpress. Ένας
Web developer πρέπει να είναι σε θέση να
χρησιμοποιεί τέτοια συστήματα, αλλά κυ-
ρίως να τα παραμετροποιεί με σκοπό να
μπορούν να φιλοξενήσουν τη δική του ιστο-
σελίδα. Εμείς εδώ δίνουμε απλά τις βάσεις
και το έναυσμα για να αρχίσετε το ψάξιμο,
τα υπόλοιπα είναι στο χέρι σας!
PC
Στο κώδικα που έχουμε γράψει, προσθέτουμε το script της javascript και στο κυρίως σώμα (body)
της html, εισάγουμε μία επικεφαλίδα με id=date στην οποία θα γραφτεί η ημερομηνία και η ώρα,
καθώς και το κουμπί.
Η σελίδα μας προτού πατήσουμε το κουμπί.
Η σελίδα μας αφού πατήσουμε το κουμπί. Βλέ-
πουμε ότι μετά το πάτημα του κουμπιού, η
ημερομηνία και η ώρα αντικατέστησαν το μή-
νυμα προτροπής.
