Sample_Html
- 2. Copyright© 2009-2012 -SYSTEM- All rights reserved 2/54
- 3. 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
- 4. 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
- 5. 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
- 6. 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
- 7. 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).