Search the Community

Ο χρυσός κανόνας της μηχανικής αναφέρει πως "ό,τι κερδίζουμε σε δρόμο το χάνουμε σε δύναμη". Με άλλα λόγια, αν δεν θέλουμε να χρησιμοποιήσουμε μεγάλη δύναμη, θα πρέπει να καταβάλουμε προσπάθεια για μεγαλύτερο χρονικό διάστημα, ενώ αν θέλουμε να μειώσουμε το χρόνο υλοποίησης θα πρέπει να αφιερώσουμε περισσότερη ισχύ ή πόρους στο έργο. Σε κάθε περίπτωση λοιπόν αν θέλουμε να κερδίσουμε κάπου θα χάσουμε σε έναν άλλον τομέα. Ανάλογα διλήμματα συναντούμε σε πολλές ανθρώπινες δραστηριότητες και η κατασκευή web σελίδων δεν αποτελεί εξαίρεση μια και η δημιουργία τους μπορεί να επιτευχθεί με δύο πολύ διαφορετικούς τρόπους: Ο εύκολος: Δηλαδή, να χρησιμοποιηθεί ένα αυτόματο πρόγραμμα όπως το Frontpage για να σχεδιαστεί η σελίδα με τρόπο ανάλογο της δημιουργίας ενός εγγράφου στο word. Ο δύσκολος: Δηλαδή, να δημιουργηθούν τα πάντα από το μηδέν με τη χρήση κώδικα HTML. Τα πλεονεκτήματα του εύκολου τρόπου είναι: Ταχύτητα εκμάθησης - Ο χρήστης μπορεί να δημιουργήσει τις πρώτες του σελίδες μέσα σε μερικές ώρες. Ταχύτητα λειτουργίας - Ένα site μπορεί να κατασκευαστεί σε πολύ μικρό χρονικό διάστημα. Ταχύτητα ανανέωσης - Το πρόγραμμα φροντίζει για την αυτόματη ενημέρωση των web σελίδων του server με όλες τις αλλαγές που έχουν γίνει μετά την τελευταία ανανέωση. Τα πλεονεκτήματα του δύσκολου τρόπου είναι: Σελίδες που φορτώνουν πιο γρήγορα - Τα αυτόματα προγράμματα τοποθετούν συχνά άχρηστο κώδικα που μπερδεύει τον browser και καθυστερεί την εμφάνιση της σελίδας (π.χ. table rendering) Μεγαλύτερη αξιοπιστία - Όπως κάθε λογισμικό, έτσι και τα προγράμματα κατασκευής σελίδων δεν είναι 100% WYSIWYG (What you see is what you get). Το τελικό αποτέλεσμα που μας παρουσιάζουν λοιπόν δεν είναι πάντοτε ακριβώς το ίδιο με αυτό που θα δει ο επισκέπτης της σελίδας μας. Εξυπνότερη σχεδίαση - Μας είναι ευκολότερο να δημιουργήσουμε σελίδες που θα προσαρμόζονται αυτόματα στις ιδιαιτερότητες της οθόνης κάθε χρήστη (π.χ. χρησιμοποιώντας ποσοστά αντί για απόλυτες τιμές στο πλάτος των tables). Καλύτερος έλεγχος του αποτελέσματος - Κάθε αυτόματο πρόγραμμα αποτελεί ουσιαστικά έναν μεταφραστή που μετατρέπει τη σχεδίαση και τις επιθυμίες μας σε γλώσσα HTML. Καμία μετάφραση όμως δεν είναι άψογη (ειδικά αν γίνεται από υπολογιστή) και πολλά σημαντικά στοιχεία κινδυνεύουν να απαλειφθούν από το τελικό αποτέλεσμα. Υψηλότερη ευελιξία - Μπορούμε να χρησιμοποιήσουμε το σύνολο των δυνατοτήτων της γλώσσας HTML, ενώ κάθε αυτόματο πρόγραμμα υποστηρίζει μόνο ένα υποσύνολο αυτών. Ευκολότερη επίλυση προβλημάτων (debugging) - Επειδή κατανοούμε απόλυτα τις ιδιομορφίες και τα χαρακτηριστικά της σελίδας που δημιουργήσαμε, μπορούμε να βρούμε ευκολότερα και να διορθώσουμε τα όποια προβλήματα εμφανιστούν σε αυτήν (π.χ. ασυμβατότητα με κάποιους browsers). Επέκταση σε άλλα γνωστικά αντικείμενα - Όποιος γνωρίζει κώδικα HTML μπορεί πολύ ευκολότερα να κατανοήσει και να αξιοποιήσει άλλες τεχνολογίες όπως XML, scripting κ.λπ. Οι περισσότεροι άνθρωποι προτιμούν τα αυτόματα προγράμματα δημιουργίας σελίδων (τον εύκολο τρόπο δηλαδή) επειδή τα πλεονεκτήματά τους είναι προφανή και άμεσης απόδοσης. Το γεγονός όμως ότι όλοι οι καλοί επαγγελματίες web designers γνωρίζουν και χρησιμοποιούν τόσο κώδικα όσο και αυτόματα προγράμματα υποδεικνύει τη μεγάλη χρησιμότητα και των δύο προσεγγίσεων. Αν λοιπόν η επαφή σας με τον χώρο είναι περιστασιακή (π.χ. κατασκευή μερικών προσωπικών σελίδων) προτιμήστε την εύκολη λύση. Αν ενδιαφέρεστε επαγγελματικά για web design είναι υποχρεωτικό να τις γνωρίζετε και τις δύο. Αν είστε ή θέλετε να γίνετε προγραμματιστής και έχετε σκοπό να συνδέσετε web σελίδες με άλλες εφαρμογές (π.χ. βάσεις δεδομένων) αρκεστείτε στον κώδικα HTML. Σε κάθε περίπτωση καλή σας επιτυχία.

Μαθήματα Κατασκευής Web Σελίδων με τη Γλώσσα HTML Γενικά Τι είναι μια Web Σελίδα (Web Page) Πώς κατασκευάζουμε σελίδες με Ελληνικούς Χαρακτήρες Τι είναι ένα Web Site Τι είναι Web Server και Web Client Τι ονομάζουμε Δομή μιας Web Παρουσίασης ή ενός Web Site Τι είναι το Διάγραμμα Ανάγνωσης (Storyboarding) Τι είναι η γλώσσα HTML Τι είναι μια Οδηγία (Tag) Τι είναι ένα URL (Uniform Resource Locator) και ποια είδη URL υπάρχουν Τι είναι το pixel Πώς συντάσουμε URLs που περιέχουν ειδικούς χαρακτήρες Κατασκευή σελίδων με κώδικα HTML ή με αυτόματα προγράμματα; Πώς Κατασκευάζονται οι Σελίδες Πώς κατασκευάζεται μια απλή Web σελίδα Ορισμός Παραγράφων Αλλαγές Γραμμών Παραπομπές (Links) Τίτλος σελίδας Πώς ορίζουμε το χρώμα του φόντου και του κειμένου της σελίδας Διάφορες μορφοποιήσεις κειμένου Λίστες (αριθμημένες και μη) Επικεφαλίδες (Headings) Στοίχιση <ALIGN> Κεντράρισμα <CENTER> (Στοίχιση στο κέντρο) Οριζόντιες Γραμμές <HR> Ειδικοί Χαρακτήρες (¥, §, ©, â) και Χαρακτήρες με Ειδικές Λειτουργίες (<, >, &, ") Ορισμός γραμματοσειρών <FONT> ... </FONT> Εισαγωγή Εικόνων και Γραφικών Εισαγωγή μιας εικόνας σαν φόντο της σελίδας Πώς βρίσκουμε τον 16εξαδικό κωδικό ενός χρώματος Γενικές Συμβουλές για την Χρήση των Γραφικών ’λλες πληροφορίες για χρώματα και γραφικά Πώς δημιουργούμε απλούς πίνακες Πώς δημιουργούμε περίπλοκους πίνακες Σελιδοποίηση με πίνακες Πώς δημιουργούμε μια φόρμα επικοινωνίας Πώς δημιουργούμε ένα site με πλαίσια (frames) Πώς δημιουργούμε ένα animated gif Πώς κάνουμε μια σελίδα να καλεί αυτόματα μια άλλη (redirection) Πώς κάνουμε μια σελίδα να καλεί κατά τακτά χρονικά διαστήματα τον εαυτό της (refresh) Πώς κάνουμε μια σελίδα να παίζει ήχο Στοίχιση με την τεχνική του διάφανου pixel Διαχείριση ομάδων κειμένου με τις BLOCKQUOTE και DIV Πώς προσθέτουμε σχόλια στον κώδικα μιας σελίδας Πώς κάνουμε διάφανο ένα γραφικό με το Paintshop Pro Πώς κάνουμε μια γραμμή κειμένου να σκρολάρει Πώς κάνουμε ένα μέρος της σελίδας (κείμενο και εικόνες) να αναβοσβήνει Πώς λειτουργούν οι παραπομπές μιας αρχικής σελίδας που βρίσκεται στον σκληρό δίσκο (ή δισκέτα) του χρήστη <BASE> Πώς κατασκευάζουμε image maps @ Πώς προσθέτουμε javascripts σε μια σελίδα Πώς δημιουργούνται τα Pop Up Windows Μικρός οδηγός για τις Meta Tags Τι είναι το Robots Exclusion Protocol Πώς προσθέτουμε μια σελίδα μέσα σε μια άλλη (iframe) Τι είναι τα Stylesheets @ Τα παραπάνω κείμενα περιγράφουν τι είναι το Web, πως κατασκευάζονται οι Web σελίδες με την γλώσσα HTML. Ο οδηγός είναι γραμμένος με την μορφή ερωτήσεων και απαντήσεων (faq). Αν είστε αρχάριος, σας συνιστούμε να διαβάσετε τις ερωτήσεις και τις απαντήσεις με την σειρά που παρουσιάζονται. Αν θέλετε να μάθετε για κάποιο θέμα που δεν καλύπτεται εδώ (ή θέλετε να διορθώσετε ή να συμπληρώσετε κάτι), μπορείτε να επικοινωνήσετε μαζί μου για να την προσθέσω στον οδηγό. Όλες οι σελίδες του Οδηγού, είναι γραμμένες με τρόπο που να επιτρέπει την εύκολη εκτύπωση και αντιγραφή τους. Παρακαλώ, θυμηθείτε πως επιτρέπεται η αντιγραφή, μόνο για προσωπική χρήση.

Τα αρχικά HTML προέρχονται από τις λέξεις HyperText Markup Language. Η HTML δεν είναι μια γλώσσα προγραμματισμού (αν και ονομάζουμε όσους την χρησιμοποιούν HTML programmers). Είναι μια περιγραφική γλώσσα, δηλαδή ένας ειδικός τρόπος γραφής κειμένου και κλήσης άλλων αρχείων ή εφαρμογών βασισμένος σε οδηγίες (tags). Ο Web client αναγνωρίζει αυτόν τον ειδικό τρόπο γραφής και εκτελεί τις εντολές που περιέχονται σε αυτόν.