1.
Copyright© 2009-2012 -SYSTEM- All rights reserved 2/54

2.
Copyright© 2009-2012 -SYSTEM- All rights reserved 3/54
ΠΕΡΙΕΧΟΜΕΝΑ
Μάθημα 1:
3 Εισαγωγή
Μάθημα 2:
3 Κειμενογράφοι – Text Editors
Μάθημα 3:
3 Εγκατάσταση Text Editor
Μάθημα 4:
3 Ιστορική Αναδρομή HTML
Μάθημα 5:
3 Σύνολο Tags Μαθημάτων
Μάθημα 6:
3 Εύρεση & Εγκατάσταση Google
Chrome
Μάθημα 7:
3 Σύνδεση Text Editor με το
φυλλομετρητή
Μάθημα 8:
3 Tags Έναρξης & Λήξης
Μάθημα 9:
3 Ετικέτα DOCTYPE
Μάθημα 10:
3 Ετικέτα HTML
Μάθημα 11:
3 Ετικέτα HEAD
Μάθημα 12:
3 Ετικέτα ΜΕΤΑ
Μάθημα 13:
3 Ετικέτα TITLE
Μάθημα 14:
3 Η χρησιμότητα του utf8
Μάθημα 15:
3 Ετικέτα BODY
Μάθημα 16:
3 Ετικέτες Η1 έως Η6
Μάθημα 17:
3 Ετικέτα PARAGRAPH
Μάθημα 18:
3 Break Line – Αλλαγή Γραμμής
Μάθημα 19:
3 HorizontalR – Οριζόντια Γραμμή
Μάθημα 20:
3 Μορφοποίηση HorizontalR
Μάθημα 21:
3 Προσθήκη Σχολίου
Μάθημα 22:
3 Πλάγια Γραφή – Italic Text
Μάθημα 23:
3 Έντονη Γραφή – Bold Text

3.
Copyright© 2009-2012 -SYSTEM- All rights reserved 4/54
Μάθημα 24:
3 Typewriter
Μάθημα 25:
3 Ετικέτες Small & Big
Μάθημα 26:
3 Ετικέτα Διεύθυνσης - Address
Μάθημα 27:
3 Ετικέτα Acronym
Μάθημα 28:
3 Ετικέτα Σύντμησης - ABBR
Μάθημα 29:
3 Ετικέτα BDO
Μάθημα 30:
3 Ετικέτα BLOCKQUOTE
Μάθημα 31:
3 Ετικέτα EM
Μάθημα 32:
3 Ετικέτα STRONG
Μάθημα 33:
3 Ετικέτα DFN
Μάθημα 34:
3 Ετικέτα CODE
Μάθημα 35:
3 Ετικέτα SAMP
Μάθημα 36:
3 Ετικέτα KBD
Μάθημα 37:
3 Ετικέτες VAR & CITIES
Μάθημα 38:
3 Διακριτή Διαγραφή
Μάθημα 39:
3 Υπογράμμιση Κειμένου
Μάθημα 40:
3 Ετικέτα PRE
Μάθημα 41:
3 Προσθήκη Αγγλικών Εισαγωγικών
Μάθημα 42:
3 Δείκτης
Μάθημα 43:
3 Εκθέτης
Μάθημα 44:
3 Ετικέτα Form
Μάθημα 45:
3 Ετικέτα Input
Μάθημα 46:
3 Ετικέτα Input Text
Μάθημα 47:
3 Ετικέτα Password
Μάθημα 48:
3 Κουμπί Επιλογής - Radio

4.
Copyright© 2009-2012 -SYSTEM- All rights reserved 5/54
Μάθημα 49:
3 Κουμπιά Επιλογών - Checkbox
Μάθημα 50:
3 Κουμπί File
Μάθημα 51:
3 Κουμπί Επαναφοράς - Reset
Μάθημα 52:
3 Κουμπί Αποστολής - Button
Μάθημα 53:
3 Κουμπί Υποβολής - Submit
Μάθημα 54:
3 Κουμπί Εικόνας για Υποβολή
Μάθημα 55:
3 Ετικέτα Hidden
Μάθημα 56:
3 Ετικέτα TextArea
Μάθημα 57:
3 Ετικέτα TextArea Disable
Μάθημα 58:
3 Ετικέτα TextArea Readonly
Μάθημα 59:
3 Αναπτυσσόμενη Λίστα
Μάθημα 60:
3 Λίστα Πολλαπλής επιλογής
Μάθημα 61:
3 Ετικέτα Slect Size
Μάθημα 62:
3 Ετικέτα Select Option
Μάθημα 63:
3 Ετικέτα Select Option Group
Μάθημα 64:
3 Ετικέτα FIELDSET
Μάθημα 65:
3 Ετικέτα LEGEND
Μάθημα 66:
3 Εισαγωγή Εικόνας
Μάθημα 67:
3 Α_HREF
Μάθημα 68:
3 Ετικέτα UL_LI (Δημιουργία Λίστας με
Κουκκίδες)
Μάθημα 69:
3 Ετικέτα OL_LI (Δημιουργία Λίστας με
Αριθμούς)
Μάθημα 70:
3 Ετικέτες DL_DT_DD
Μάθημα 71:
3 Ετικέτα Table (Δημιουργία Πίνακα)
Μάθημα 72:
3 Table Cellpadding

5.
Copyright© 2009-2012 -SYSTEM- All rights reserved 6/54
Μάθημα 73:
3 Table Frame_Box_Boarder_VOID
(Πλαίσια Πίνακα)
Μάθημα 74:
3 Table Above - Below
Μάθημα 75:
3 Table Vsides-Hsides
Μάθημα 76:
3 Table Lhsides-Rhsides
Μάθημα 77:
3 Table Rules_Rows_Cells
Μάθημα 78:
3 Table Rules_None_All_Groups
Μάθημα 79:
3 Rules Summary (Αναγνώστες Οθόνης)
Μάθημα 80:
3 Table width – height
Μάθημα 81:
3 Table CellSpacing
Μάθημα 82:
3 Table Caption (Προσθήκη Λεζάντας σε
πίνακα)
Μάθημα 83:
3 Link CSS
Μάθημα 84:
3 Style
Μάθημα 85:
3 Ετικέτα DIV
Μάθημα 85:
3 Ετικέτα Span

6.
Copyright© 2009-2012 -SYSTEM- All rights reserved 7/54
ΚΕΦΑΛΑΙΟ 1o
ΕΙΣΑΓΩΓΗ
Τι είναι η HTML
Η HTML είναι η γλώσσα σήμανσης με την οποία κατασκευάζουμε ιστοσελίδες. Τα
αρχικά HTML σημαίνουν HyperTextMarkup Language. Σκοπός των browser είναι να
διαβάζουν τα έγγραφα HTML και να τα εμφανίζουν ως ιστοσελίδες. Οι browsers (όπως
οι Mozilla Firefox, Google Chrome, Opera, Internet Explorer και αρκετοί άλλοι) διαβάζουν
τα αρχεία αυτά και εμφανίζουν το αποτέλεσμα του κώδικα HTML στην οθόνη μας.
Γλώσσα σήμανσης είναι μια περιγραφική γλώσσα. Tag ονομάζουμε μία οδηγία γραμμένη
σε HTML, την οποία πρέπει να αναγνωρίσει και ερμηνεύσει ο browser.
Κατασκευή σελίδων με κώδικα HTML ή με αυτόματα προγράμματα;
H κατασκευή web σελίδων μπορεί να επιτευχθεί με δύο πολύ διαφορετικούς τρόπους:
1. Ο εύκολος: Δηλαδή, να χρησιμοποιηθεί ένα αυτόματο πρόγραμμα όπως το
Frontpage για να σχεδιαστεί η σελίδα με τρόπο ανάλογο της δημιουργίας ενός
εγγράφου στο word.
2. Ο δύσκολος: Δηλαδή, να δημιουργηθούν τα πάντα από το μηδέν με τη χρήση
κώδικα HTML.
Τα πλεονεκτήματα του εύκολου τρόπου είναι:
1. Ταχύτητα εκμάθησης - Ο χρήστης μπορεί να δημιουργήσει τις πρώτες του
σελίδες μέσα σε μερικές ώρες.
2. Ταχύτητα λειτουργίας - Ένα site μπορεί να κατασκευαστεί σε πολύ μικρό
χρονικό διάστημα.
3. Ταχύτητα ανανέωσης - Το πρόγραμμα φροντίζει για την αυτόματη ενημέρωση
των web σελίδων του server με όλες τις αλλαγές που έχουν γίνει μετά την
τελευταία ανανέωση.
Τα πλεονεκτήματα του δύσκολου τρόπου είναι:
1. Σελίδες που φορτώνουν πιο γρήγορα - Τα αυτόματα προγράμματα
τοποθετούν συχνά άχρηστο κώδικα που μπερδεύει τον browser και καθυστερεί
την εμφάνιση της σελίδας (π.χ. table rendering)
2. Μεγαλύτερη αξιοπιστία - Όπως κάθε λογισμικό, έτσι και τα προγράμματα
κατασκευής σελίδων δεν είναι 100% WYSIWYG (What you see is what you get). Το
τελικό αποτέλεσμα που μας παρουσιάζουν λοιπόν δεν είναι πάντοτε ακριβώς το
ίδιο με αυτό που θα δει ο επισκέπτης της σελίδας μας.
3. Εξυπνότερη σχεδίαση - Μας είναι ευκολότερο να δημιουργήσουμε σελίδες που
θα προσαρμόζονται αυτόματα στις ιδιαιτερότητες της οθόνης κάθε χρήστη (π.χ.
χρησιμοποιώντας ποσοστά αντί για απόλυτες τιμές στο πλάτος των tables).