HTML5, CSS και JavaScript

Transcript

1 Μάθετε HTML5, CSS και JavaScript Όλα σε Ένα 2 Η ΕΚ ΟΣΗ Julie C. Meloni Απόδοση: Γιάννης Β. Σαμαράς Ηλεκτρολόγος Μηχανολόγος Ε.Μ.Π. M.Sc. Computer Science Εκδόσεις: Μ. Γκιούρδας Ζωοδόχου Πηγής Τηλ.: Αθήνα,

2 Τίτλος Πρωτοτύπου: Sams Teach Yourself HTML, CSS and JavaScript All in One ISBN-13: ISBN-10: Copyright 2015 by Pearson Education, Inc. 800 East 96th Street, Indianapolis, Indiana USA Αποκλειστικότητα για την Ελληνική Γλώσσα Εκδόσεις: Μόσχος Γκιούρδας Ζωοδόχου Πηγής Τηλ.: Αθήνα, ISBN: Επιμέλεια κειμένων: Μιχαήλ Μεταξάς Desktop Publishing: Κ. Καλαϊτζής, τηλ.: Εκτύπωση: ΜΗΤΡΟΠΟΛΙΣ Γραφικές Τέχνες Α.Ε., τηλ.: Βιβλιοδεσία: ΣΤΑΜΟΥ Γραφικές Τέχνες - Εκδόσεις, τηλ.: Αναδημοσίευση του βιβλίου σε οποιαδήποτε μορ φή, ολόκληρου ή μέ ρους, καθώς και των περιεχομένων προ γραμ μά των, δεν επιτρέπεται χωρίς την έγγραφη εξου σιο δό τη ση του εκδότη.

3 Συνοπτικός Πίνακας Περιεχόμενων ΜΕΡΟΣ Ι: Αρχίστε να Εργάζεστε στο Web ΚΕΦΑΛΑΙΟ 1: Πώς ουλεύει το Web ΚΕΦΑΛΑΙΟ 2: όμηση ενός Εγγράφου HTML ΚΕΦΑΛΑΙΟ 3: Κατανόηση των ιαδοχικών Φύλλων Στυλ ΚΕΦΑΛΑΙΟ 4: Κατανόηση της JavaScript ΚΕΦΑΛΑΙΟ 5: Επικύρωση και Εκσφαλμάτωση του Κώδικά σας ΜΕΡΟΣ ΙΙ: ομικά Στοιχεία της Πρακτικής Σχεδίασης για το Web ΚΕΦΑΛΑΙΟ 6: Εργασία με Γραμματοσειρές, Μπλοκ Κειμένου, Λίστες και Πίνακες ΚΕΦΑΛΑΙΟ 7: Χρήση Εξωτερικών και Εσωτερικών Συνδέσεων ΚΕΦΑΛΑΙΟ 8: Εργασία με Χρώματα, Εικόνες και Πολυμέσα ΜΕΡΟΣ ΙΙΙ: Προηγμένη Σχεδίαση Ιστοσελίδων με CSS ΚΕΦΑΛΑΙΟ 9: Εργασία με Περιθώρια, Πλήρωση, Στοίχιση και Αιώρηση ΚΕΦΑΛΑΙΟ 10: Κατανόηση του Μοντέλου Πλαισίου CSS και της Τοποθέτησης ΚΕΦΑΛΑΙΟ 11: Χρήση CSS για Προηγμένες Εργασίες με Λίστες, Κείμενο και Πλοήγηση ΚΕΦΑΛΑΙΟ 12: ημιουργία Σταθερών και Ρευστών ιατάξεων ΜΕΡΟΣ IV: Εισαγωγή στις υναμικές Ιστοθέσεις ΚΕΦΑΛΑΙΟ 13: Κατανόηση των υναμικών Ιστοθέσεων και των Εφαρμογών HTML5 ΚΕΦΑΛΑΙΟ 14: Εισαγωγή στον Προγραμματισμό με JavaScript ΚΕΦΑΛΑΙΟ 15: Εργασία με το Μοντέλο Αντικειμένων Εγγράφων (DOM) ΚΕΦΑΛΑΙΟ 16: Χρήση Μεταβλητών, Συμβολοσειρών και Πινάκων της JavaScript ΚΕΦΑΛΑΙΟ 17: Χρήση Συναρτήσεων και Αντικειμένων της JavaScript ΚΕΦΑΛΑΙΟ 18: Έλεγχος Ροής με Συνθήκες και Βρόχους ΚΕΦΑΛΑΙΟ 19: Ανταπόκριση σε Συμβάντα ΚΕΦΑΛΑΙΟ 20: Χρήση Παραθύρων ΜΕΡΟΣ V: Προηγμένος Προγραμματισμός JavaScript ΚΕΦΑΛΑΙΟ 21: Βέλτιστες Πρακτικές JavaScript ΚΕΦΑΛΑΙΟ 22: Χρήση Βιβλιοθηκών και Πλαισίων Εργασίας JavaScript Τρίτων Παραγωγών ΚΕΦΑΛΑΙΟ 23: Εξέταση της jquery ΚΕΦΑΛΑΙΟ 24: Εισαγωγή στην ημιουργία Πλούσιων ιαδράσεων με την jquery UI ΚΕΦΑΛΑΙΟ 25: AJAX: Απομακρυσμένα Σκριπτ ΜΕΡΟΣ IV: Προηγμένες Λειτουργίες και ιαχείριση Ιστοθέσης ΚΕΦΑΛΑΙΟ 26: Εργασία με Φόρμες Web ΚΕΦΑΛΑΙΟ 27: Οργάνωση και ιαχείριση Ιστοθέσεων

4 Πίνακας περιεχομένων ΚΕΦΑΛΑΙΟ 1: Πώς ουλεύει το Web...1 Συνοπτικό Ιστορικό της HTML και του World Wide Web...1 ημιουργία Περιεχομένου για το Web...2 Παράδοση Περιεχομένου για το Web...3 Επιλογή Παρόχου Υπηρεσιών Φιλοξενίας για το Web...6 οκιμή με Πολλαπλά Προγράμματα Πλοήγησης στο Web...8 ημιουργία είγματος Αρχείου...10 Χρήση FTP για Μεταφορά Αρχείων...10 Πού να Τοποθετήσετε Αρχεία στον ιακομιστή Web...15 ιανομή Περιεχομένου Χωρίς ιακομιστή Web...19 Συμβουλές για οκιμή Περιεχομένου Web...20 Περίληψη...21 Ε&Α...22 Εργασίες...23 ΚΕΦΑΛΑΙΟ 2: όμηση ενός Εγγράφου HTML...25 Προετοιμασία...25 Αρχίστε με μια Απλή Ιστοσελίδα...26 Σημάνσεις HTML, που Πρέπει να Έχει Κάθε Ιστοσελίδα...30 Οργάνωση μιας Σελίδας με Παραγράφους και Αλλαγές Γραμμών...32 Οργάνωση του Περιεχομένου με Κεφαλίδες...34 Κατανόηση των Σημασιολογικών Στοιχείων...36 Χρήση της <header> με Πολλούς Τρόπους...43 Κατανόηση του Στοιχείου <section>...44 Χρήση της <article>...45 Υλοποίηση του Στοιχείου <nav>...46 Πότε να Χρησιμοποιείτε το <aside>...47 Αποδοτική Χρήση της <footer>...49 Περίληψη...50 Ε&Α...51 Εργασίες...52 ΚΕΦΑΛΑΙΟ 3: Κατανόηση των ιαδοχικών Φύλλων Στυλ...55 Πώς Λειτουργούν τα CSS...56 Ένα Βασικό Φύλλο Στυλ...57 Εισαγωγή στα Στυλ CSS...62 Χρήση Κλάσεων Στυλ...67 Χρήση ID Στυλ...69 Εσωτερικά Φύλλα Στυλ και Εμβόλιμα Στυλ...70 Περίληψη...73 Ε&Α...74 Εργασίες...75 ΚΕΦΑΛΑΙΟ 4: Κατανόηση της JavaScript...77 Τα Βασικά Στοιχεία της ημιουργίας εσμών Ενεργειών για το Web...77

5 ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ vii Πώς Προσαρμόζεται η JavaScript σε μια Ιστοσελίδα...79 Εξερεύνηση των υνατοτήτων της JavaScript...82 Εμφάνιση της Ώρας με την JavaScript...84 οκιμή της έσμης Ενεργειών...87 Περίληψη...91 Ε&Α...92 Εργασίες...93 ΚΕΦΑΛΑΙΟ 5: Επικύρωση και Εκσφαλμάτωση του Κώδικά σας...95 Επικύρωση Περιεχομένου του Web...95 Εκσφαλμάτωση HTML και CSS με Χρήση Εργαλείων Προγραμματιστή...98 Εκσφαλμάτωση JavaScript με Χρήση Εργαλείων Προγραμματιστή Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 6: Εργασία με Γραμματοσειρές, Μπλοκ Κειμένου, Λίστες και Πίνακες Εργασία με Ειδικούς Χαρακτήρες Έντονη Γραφή, Πλάγια Γραφή και Ειδική Μορφοποίηση Κειμένου "Πειράξτε" τη Γραμματοσειρά Χρήση Γραμματοσειρών του Web Στοίχιση Κειμένου σε Σελίδα Οι Τρεις Τύποι Λιστών HTML Τοποθέτηση Λιστών μέσα σε Λίστες ημιουργία ενός Απλού Πίνακα Έλεγχος Μεγέθους Πινάκων Στοίχιση και Συγχώνευση μέσα σε Πίνακες ιάταξη Σελίδων με Πίνακες Χρήση Στηλών CSS Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 7: Χρήση Εξωτερικών και Εσωτερικών Συνδέσεων Χρήση ιευθύνσεων του Web ημιουργία Συνδέσεων μέσα σε μια Σελίδα με Χρήση Σημείων Αγκύρωσης Σύνδεση Μεταξύ του Περιεχομένου σας Web Σύνδεση με Εξωτερικό Περιεχόμενο Web Σύνδεση με μια ιεύθυνση Άνοιγμα μιας Σύνδεσης σε ένα Νέο Παράθυρο Προγράμματος Πλοήγησης Χρήση CSS για Εφαρμογή Στυλ σε Υπερσυνδέσεις Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 8: Εργασία με Χρώματα, Εικόνες και Πολυμέσα Βέλτιστες Πρακτικές για Επιλογή Χρωμάτων Τα Χρώματα στο Web...192

6 viii ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ Χρήση εκαεξαδικών Τιμών για Χρώματα Χρήση CSS για Ορισμό Χρωμάτων Φόντου, Κειμένου και Περιγραμμάτων Επιλογή Λογισμικού Γραφικών Όσα Πρέπει να Γνωρίζετε για Γραφικά Προετοιμασία Εικόνων από Φωτογραφίες ημιουργία Πλαισίων και Κουμπιών Μείωση ή Αφαίρεση του Αριθμού Χρωμάτων σε μια Εικόνα ημιουργία Φόντων με Μορφή Πλακιδίων ημιουργία Κινούμενων Γραφικών για το Web Τοποθέτηση Εικόνων σε Ιστοσελίδες Περιγραφή Εικόνων με Κείμενο Καθορισμός Ύψους και Πλάτους Εικόνας Στοίχιση Εικόνων Μετατροπή Εικόνων σε Συνδέσεις Χρήση Εικόνων Φόντου Χρήση Χαρτών Εικόνων Σύνδεση με Αρχεία Πολυμέσων Ενσωμάτωση Αρχείων Πολυμέσων Χρήση Αμιγούς HTML5 για Αναπαραγωγή Ήχου και Βίντεο Πρόσθετες Συμβουλές για Χρήση Πολυμέσων Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 9: Εργασία με Περιθώρια, Πλήρωση, Στοίχιση και Αιώρηση Χρήση Περιθωρίων Πλήρωση Στοιχείων Στοιχίστε τα Όλα Η Ιδιότητα Float Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 10: Κατανόηση του Μοντέλου Πλαισίου CSS και της Τοποθέτησης Το Μοντέλο Πλαισίου CSS Τα Πάντα για την Τοποθέτηση Έλεγχος της Στοίβαξης ιαχείριση της Ροής Κειμένου Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 11: Χρήση CSS για Προηγμένες Εργασίες με Λίστες, Κείμενο και Πλοήγηση Ανακεφαλαίωση για τις Λίστες HTML Πώς Επηρεάζει τις Λίστες το Μοντέλο Πλαισίου CSS Τοποθέτηση εικτών Στοιχείων Λιστών ημιουργία Χαρτών Εικόνων με Στοιχεία Λιστών και CSS ιαφορές των Λιστών Πλοήγησης από τις Κανονικές Λίστες...296

7 ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ ix ημιουργία Κάθετης Πλοήγησης με CSS ημιουργία Οριζόντιας Πλοήγησης με CSS Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 12: ημιουργία Σταθερών και Ρευστών ιατάξεων Σταθερές ιατάξεις Ρευστές ιατάξεις ημιουργία μιας Υβριδικής Σταθερής/Ρευστής ιάταξης Μελέτη μιας εκτικής Σχεδίασης για το Web Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 13: Κατανόηση των υναμικών Ιστοθέσεων και των Εφαρμογών HTML ιάφοροι Τύποι εσμών Ενεργειών Προσθήκη JavaScript σε HTML Εμφάνιση Τυχαίου Περιεχομένου Μοντέλο Αντικειμένων Εγγράφου Αλλαγή Εικόνων με Βάση την ιάδραση με τον Χρήστη Σκεφθείτε εκ των Προτέρων για την Ανάπτυξη Εφαρμογών HTML Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 14: Εισαγωγή στον Προγραμματισμό με JavaScript Βασικές Έννοιες Κανόνες Σύνταξης της JavaScript Χρήση Σχολίων Βέλτιστες Πρακτικές για την JavaScript Κατανόηση του JSON Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 15: Εργασία με το Μοντέλο Αντικειμένων Εγγράφων (DOM) Κατανόηση του Μοντέλου Αντικειμένων Εγγράφου (DOM) Χρήση Αντικειμένων window Εργασία με το Αντικείμενο document Προσπέλαση του Ιστορικού Προγραμμάτων Πλοήγησης Εργασία με το Αντικείμενο location Περισσότερα για τη ομή DOM Εργασία με Κόμβους DOM ημιουργία Στοιχείων με υνατότητα Τοποθέτησης (Επίπεδα) Απόκρυψη και Εμφάνιση Αντικειμένων Τροποποίηση Κειμένου μέσα σε μια Σελίδα Προσθήκη Κειμένου σε Σελίδα...389

8 x ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 16: Χρήση Μεταβλητών, Συμβολοσειρών και Πινάκων της JavaScript Χρήση Μεταβλητών Εκφράσεις και Τελεστές Τύποι εδομένων της JavaScript Μετατροπή Μεταξύ Τύπων εδομένων Χρήση Αντικειμένων String Εργασία με Υποσυμβολοσειρές Χρήση Αριθμητικών Πινάκων Χρήση Πινάκων Συμβολοσειρών Ταξινόμηση Αριθμητικού Πίνακα Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 17: Χρήση Συναρτήσεων και Αντικειμένων της JavaScript Χρήση Συναρτήσεων Εισαγωγή στα Αντικείμενα Χρήση Αντικειμένων για Απλοποίηση της Συγγραφής Σκριπτ Επέκταση Ενσωματωμένων Αντικειμένων Χρήση του Αντικειμένου Math Εργασία με Μεθόδους Math Εργασία με Ημερομηνίες Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 18: Έλεγχος Ροής με Συνθήκες και Βρόχους Η Πρόταση if Χρήση Σύντομων Εκφράσεων Συνθήκης οκιμή Πολλαπλών Συνθηκών με if και else Χρήση Πολλαπλών Συνθηκών με την switch Χρήση Βρόχων for Χρήση Βρόχων while Χρήση Βρόχων do...while Εργασία με Βρόχους Εκτέλεση Βρόχου σε Ιδιότητες Αντικειμένων Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 19: Ανταπόκριση σε Συμβάντα Οι Χειριστές Συμβάντων Χρήση Συμβάντων Ποντικιού Χρήση Συμβάντων Πληκτρολογίου Χρήση Συμβάντων onload και onunload...477

9 ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ xi Χρήση του onclick για Αλλαγή της Εμφάνισης ενός <div> Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 20: Χρήση Παραθύρων Έλεγχος Παραθύρων με Αντικείμενα Μετακίνηση και Αλλαγή Μεγέθους Παραθύρων Χρήση ιαλειμμάτων Εμφάνιση Παραθύρων ιαλόγου Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 21: Βέλτιστες Πρακτικές JavaScript Βέλτιστες Πρακτικές Συγγραφής Σκριπτ Ανάγνωση Πληροφοριών Προγραμμάτων Πλοήγησης ημιουργία εσμών Ενεργειών για Όλα τα Προγράμματα Πλοήγησης Υποστήριξη Προγραμμάτων Πλοήγησης που εν Υποστηρίζουν την JavaScript Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 22: Χρήση Βιβλιοθηκών και Πλαισίων Εργασίας JavaScript Τρίτων Παραγωγών Χρήση Βιβλιοθηκών JavaScript Τρίτων Προσθήκη Εφέ JavaScript με Χρήση μιας Βιβλιοθήκης Τρίτου Χρήση Πλαισίων Εργασίας JavaScript Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 23: Εξέταση της jquery Προετοιμασία για Χρήση της jquery Εξοικείωση με τον Χειριστή $(document).ready Επιλογή Περιεχομένου DOM και CSS Χειρισμός Περιεχομένου HTML Σύνθεση των Κομματιών για ημιουργία μιας Κίνησης jquery Χειρισμός Συμβάντων με την jquery Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 24: Εισαγωγή στην ημιουργία Πλούσιων ιαδράσεων με την jquery UI Προετοιμασία για Χρήση της jquery UI Χρήση Επιλογέων στην jquery UI Τοποθέτηση Στοιχείων UI με την jquery UI Εφαρμογή Εφέ jquery UI Χρήση jquery UI Widgets για Προηγμένες ιαδράσεις Τι Μπορείτε να Κάνετε στην Συνέχεια...585

10 xii ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 25: AJAX: Απομακρυσμένα Σκριπτ Εισαγωγή στην AJAX Χρήση του XMLHttpRequest ημιουργία μιας Απλής Βιβλιοθήκης AJAX ημιουργία ενός Κουίζ σε AJAX Χρησιμοποιώντας τη Βιβλιοθήκη Εκσφαλμάτωση Εφαρμογών AJAX Χρήση Ενσωματωμένων Συναρτήσεων της jquery για AJAX Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 26: Εργασία με Φόρμες Web Πώς Λειτουργούν οι Φόρμες HTML ημιουργία Φόρμας Αποδοχή Εισόδου Κειμένου Ονομασία Κάθε Τμήματος εδομένων Φόρμας Ετικέτα σε Κάθε Τμήμα εδομένων Φόρμας Ομαδοποίηση Στοιχείων Φόρμας Εξερεύνηση των Στοιχείων Ελέγχου Εισόδου σε Φόρμες Χρήση HTML5 για Επικύρωση Φόρμας Υποβολή εδομένων Φόρμας Προσπέλαση Στοιχείων Φόρμας με την JavaScript Περίληψη Ε&Α Εργασίες ΚΕΦΑΛΑΙΟ 27: Οργάνωση και ιαχείριση Ιστοθέσεων Όταν μια Σελίδα Αρκεί Οργάνωση μιας Απλής Ιστοθέσης Οργάνωση μιας Μεγαλύτερης Ιστοθέσης Συγγραφή Συντηρήσιμου Κώδικα Σκέψεις για τον Έλεγχο Εκδόσεων Χρήση Πλαισίων Εργασίας HTML και CSS Περίληψη Ε&Α Εργασίες ΕΥΡΕΤΗΡΙΟ...661

11 Η Συγγραφέας Η Julie C. Meloni είναι διευθύντρια ανάπτυξης λογισμικού και τεχνική σύμβουλος και ζει στην Ουάσιγκτον. Έχει γράψει πολλά βιβλία και άρθρα για θέματα γλωσσών του web και βάσεων δεδομένων, μεταξύ των οποίων και τα εξαιρετικά επιτυχημένα Sams Teach Yourself PHP, MySQL and Apache All in One.

12 Πείτε μας την Γνώμη σας! Ως αναγνώστης αυτού του βιβλίου, είστε ο πιο σημαντικός κριτής και σχολιαστής μας. Εκτιμούμε την γνώμη σας και θέλουμε να ξέρουμε αν κάναμε την δουλειά μας σωστά, τι μπορούμε να κάνουμε καλύτερα, ποιες περιοχές θέλετε να καλύψουμε και ό,τι άλλο θέλετε να μας πείτε. Μπορείτε να μας στείλετε ή να μας γράψετε και να μας πείτε τι γνώμη έχετε γι' αυτό το βιβλίο όπως και τι μπορούμε να κάνουμε, για να κάνουμε τα βιβλία μας καλύτερα. Σημειώστε ότι δεν μπορώ να σας βοηθήσω σε τεχνικά θέματα που σχετίζονται με το θέμα αυτού του βιβλίου και ότι, λόγω του μεγάλου όγκου επιστολών που λαμβάνω, δεν θα μπορέσω να τις απαντήσω όλες. Όταν γράφετε, παρακαλώ να περιλαμβάνετε τον τίτλο του βιβλίου, τον αριθμό έκδοσης και το όνομα του συγγραφέα όπως και το όνομά σας και πληροφορίες επαφής. Ταχυδρομείο: Sams Publishing 800 East 96th Street Indianapolis, IN USA Υπηρεσίες Αναγνωστών Επισκεφτείτε την ιστοθέση μας και δηλώστε αυτό το βιβλίο στη διεύθυνση informit.com/register, για να έχετε εύκολη πρόσβαση σε ενημερώσεις, λήψεις ή διορθώσεις σχετικά μ αυτό το βιβλίο.