HTML & CSS για αρχάριους

HTML & CSS για αρχάριους (Μέρος 01): Μια πρώτη ματιά στο HTML, CSS και τα λοιπά.

Όλα τα βίντεο του μαθήματος HTML & CSS για αρχάριους

Η Hypertext Markup Language είναι η κύρια γλώσσα του WWW. Η πρώτη έκδοση αυτής της γλώσσας δημοσιεύτηκε το 1992. Από τότε, το HTML έχει υποστεί πολλές τροποποιήσεις και πλέον έχει φτάσει στην έκδοση 5. (Μολονότι η έκδοση 5 πράγματι δεν έχει επίσημα υιοθετηθεί ως πρότυπο, αλλά υποστηρίζεται ήδη αρκετά καλά σε τρέχοντες περιηγητές).

Το HTML είναι μια γλώσσα σήμανσης με την οποία μπορούν να δομηθούν περιεχόμενα. Για τη μορφοποίηση των περιεχομένων είναι υπεύθυνα τα Stylesheets. Περισσότερα γι' αυτά στη συνέχεια.

Υπεύθυνο για την εξέλιξη του HTML είναι το World Wide Web Consortium (συντομευμένα W3C).

Πρέπει να παρακολουθείτε τον ιστότοπο του W3C τακτικά για να ενημερώνεστε για τις τρέχουσες εξελίξεις στον τομέα του Web.

Όταν αναλύετε το HTML, μια ερώτηση που είναι πολύ σημαντική είναι: Ποια έκδοση θα πρέπει να χρησιμοποιήσω; Φαντάζεστε βέβαια ότι μια γλώσσα όπως το HTML ανανεώνεται συνεχώς. Νέα στοιχεία προστίθενται, άλλα αφαιρούνται.

Εδώ είναι οι σημαντικότερες εκδόσεις γλώσσας ή τα ορόσημα του HTML:

• HTML (Νοέμβριος 1992): Αυτή ήταν η πρώτη έκδοση. Η έμφαση ήταν αποκλειστικά σε κείμενα.

• HTML 2.0 (Νοέμβριος 1995): Τώρα υπάρχουν στοιχεία για εικόνες και φόρμες.

• HTML 4.0 (Δεκέμβριος 1997): Εισάγονται Stylesheets, Frames και Scripts.

• XHTML 1.0 (Ιανουάριος 2000): Πρόκειται για μια νέα διατύπωση του HTML 4.0 μέσω του XML.

• HTML5 (Απρίλιος 2009): Αυτό είναι ακόμα ένα προσχέδιο, άρα δεν έχει ανακοινωθεί ως επίσημο πρότυπο ακόμα.

Η εστίαση στα επόμενα μαθήματα θα είναι στο HTML5. Με το HTML5 επιτέλους θα υπάρξει ένα ανανεωμένο ενδιαφέρον για τον κόσμο του HTML. Και όντως, η νέα προδιαγραφή προσφέρει πολλές ενδιαφέρουσες καινοτομίες. Αυτές περιλαμβάνουν, για παράδειγμα, πιο εύκολες φόρμες, μπάρες προόδου, στοιχεία σχεδίου και μια βελτιωμένη δομή εγγράφου. Επιπλέον, με το νέο πρότυπο μπορούν να ενσωματωθούν βίντεο στις ιστοσελίδες χωρίς την ανάγκη πρόσθετων προγραμμάτων Plug-In, καθώς υπάρχει μια διεπαφή Drag & Drop.

Ο πρώτος προτεινόμενος HTML5 προήλθε ήδη το 2004 από το Web Hypertext Application Technology Working Group (WHATWG) με το όνομα Web Applications 1.0.

Μέχρι σήμερα, το HTML5 δεν έχει ακόμη δημοσιευθεί ως επίσημο πρότυπο, ωστόσο, οι κατασκευαστές περιηγητών έχουν ήδη ενσωματώσει πολλά χαρακτηριστικά HTML5 στα προϊόντα τους. Αυτό δεν είναι έκπληξη, αφού το WHATWG είναι μια συμμαχία των κατασκευαστών περιηγητών Apple, Mozilla και Opera. Η δημιουργία του WHATWG έγινε ως άμεση αντίδραση στην αργή ανάπτυξη των προτύπων του διαδικτύου από το World Wide Web Consortium (W3C).

Σε αυτό το σημείο μπορεί κανείς να αναρωτηθεί τι ώθησε τους κατασκευαστές περιηγητών να αναπτύξουν ένα δικό τους πρότυπο HTML. Μέχρι σήμερα, η ανάπτυξη του HTML βρισκόταν στα χέρια του W3C. Από την άποψη των κατασκευαστών περιηγητών, τα προβλήματα ξεκίνησαν με το γεγονός ότι το W3C μετέτρεψε το HTML 4.01 σε XHTML 1 χωρίς να υπάρξουν σημαντικές διορθώσεις περιεχομένου. Αρχικά, το W3C επιθυμούσε να καθιερώσει το XHTML 1 ως έναν πρώτο βήμα προς ένα βασισμένο σε XML web. Μετά την ολοκλήρωση της ανάπτυξης θα ακολουθούσε το XHTML 2. Ακριβώς αυτή η προσανατολισμένη στο XML προσέγγιση ενόχλησε τους κατασκευαστές περιηγητών. Κατά τη γνώμη τους, η προσέγγιση XML είναι μη πρακτική και δεν αντανακλά τις πραγματικές επιθυμίες των χρηστών. (Παρεμπιπτόντως, το W3C έχει διαφορετική άποψη).

Από το 2007, το W3C και το WHATWG αναπτύσσουν από κοινού μια προδιαγραφή HTML5. Τις τρέχουσες εξελίξεις σχετικά με το HTML5 μπορείτε να τις βρείτε στο http://www.w3.org/TR/html5/.

Η εστίαση στα επόμενα μαθήματα θα είναι στο ίδιο το HTML5.

CSS για τη μορφοποίηση

Σίγουρα έχετε χρησιμοποιήσει πρότυπα εγγράφων στο Word ή άλλα προγράμματα επεξεργασίας κειμένου. Έτσι, για παράδειγμα, αν επιλέξετε μια γραμμή, μπορείτε να επιλέξετε ένα πρότυπο μορφοποίησης.

HTML & CSS για αρχάριους (Μέρος 01): Μια πρώτη ματιά στο HTML, CSS και λοιπά.



Ανάλογα με τη μορφοποίηση στο πρότυπο εγγράφου γι' αυτό το πρότυπο, θα εμφανιστεί ο τίτλος. Όταν αλλάξετε το πρότυπο εγγράφου, αλλάζει και το εμφανιστικό του τίτλου.

Τι έχει σχέση μεταξύ του Word και του HTML; Και για τα έγγραφα HTML υπάρχουν πρότυπα μορφοποίησης. Αυτά τα πρότυπα μπορούν να οριστούν μέσω CSS (Cascading Stylesheets). Χάρη στο CSS, μπορεί κανείς, για παράδειγμα, να ορίσει ότι οι κύριοι τίτλοι (h1) θα πρέπει να εμφανίζονται μεγέθους 22 pixel και με πράσινη γραμματοσειρά Arial.

Τα Stylesheets επιτρέπουν την αυστηρή διάκριση μεταξύ δομής και διάταξης. Για τη δομή των εγγράφων, το HTML κατέχει τον ρόλο. Το πως εμφανίζονται τα στοιχεία τελικά, καθορίζεται με το CSS.

Τι χρειάζεστε

Στα επόμενα μαθήματα θα μάθετε βήμα-βήμα HTML και CSS. Για να μπορείτε να υλοποιείτε ιστοσελίδες βασισμέ

Μπορεί να μην είναι ιδιαίτερα άνετος, αλλά είναι επαρκής για αρχή. Αν κάποιος προτιμά να έχει λίγο περισσότερη άνεση, τότε ίσως θα έπρεπε να ψάξει για έναν "πραγματικό" επεξεργαστή HTML. Ένας από τους κλασικούς είναι βεβαίως ο Dreamweaver.

Αυτός ο επεξεργαστής, ωστόσο, δεν είναι δωρεάν.

HTML & CSS για αρχάριους (Μέρος 01): Μια πρώτη ματιά στο HTML, CSS & Co.

Στην αντίθεση, για τους ιδιώτες είναι δωρεάν το phase5 ( http://www.phase5.info/ ). Έτσι, αν θέλετε να χρησιμοποιήσετε τον επεξεργαστή για προσωπικούς λόγους, έχετε στη διάθεσή σας ένα καλό και δωρεάν εργαλείο.

HTML & CSS για αρχάριους (Μέρος 01): Μια πρώτη ματιά στο HTML, CSS και λοιπά.



Εκτός από έναν επεξεργαστή, θα έπρεπε επίσης να έχετε εγκαταστήσει τους σημαντικότερους περιηγητές για τον έλεγχο της ιστοσελίδας. Πράγματι, οι περιηγητές μερικές φορές ερμηνεύουν το HTML και το CSS με πολύ προσωπικό τρόπο. Κάτω από αυτό το πρίσμα, η εκτεταμένη δοκιμή των σελίδων σε διάφορους περιηγητές είναι υποχρέωση. Θα έπρεπε να έχετε εγκαταστήσει τουλάχιστον τον Internet Explorer, το Google Chrome και το Mozilla Firefox. Ιδανικά, θα έπρεπε να δοκιμάσετε τη σελίδα και στον περιηγητή Opera και σε tablet/smartphone.