Περιεχόμενα με μια ματιά

Μέγεθος: px
Εμφάνιση ξεκινά από τη σελίδα:

Download "Περιεχόμενα με μια ματιά"

Transcript

1

2 Περιεχόμενα με μια ματιά Ευχαριστίες... 6 Εισαγωγή Κεφάλαιο 1 Τα δομικά στοιχεία των ιστοσελίδων Κεφάλαιο 2 Εργασία με αρχεία ιστοσελίδων Κεφάλαιο 3 Η βασική δομή της HTML Κεφάλαιο 4 Κείμενο Κεφάλαιο 5 Εικόνες Κεφάλαιο 6 Σύνδεσμοι Κεφάλαιο 7 Τα θεμέλια της CSS Κεφάλαιο 8 Εργασία με φύλλα στυλ Κεφάλαιο 9 Ορισμός επιλογέων Κεφάλαιο 10 Μορφοποίηση κειμένου με στυλ Κεφάλαιο 11 ιάταξη σελίδων με στυλ Κεφάλαιο 12 Φύλλα στυλ για κινητά μέχρι επιτραπέζιους υπολογιστές Κεφάλαιο 13 Εργασία με γραμματοσειρές Ιστού Κεφάλαιο 14 Βελτιώσεις με τη CSS Κεφάλαιο 15 Λίστες Κεφάλαιο 16 Φόρμες Κεφάλαιο 17 Βίντεο, ήχος, και άλλα πολυμέσα Κεφάλαιο 18 Πίνακες Κεφάλαιο 19 Εργασία με σενάρια Κεφάλαιο 20 Έλεγχος και αποσφαλμάτωση ιστοσελίδων Κεφάλαιο 21 ημοσίευση των σελίδων σας στον Ιστό Παράρτημα Α Οδηγός αναφοράς HTML Παράρτημα Β Ιδιότητες και τιμές CSS Ευρετήριο

3 Περιεχόμενα Ευχαριστίες... 6 Εισαγωγή Η HTML και η CSS με μια ματιά Προοδευτική βελτίωση: Μια βέλτιστη πρακτική Είναι αυτό το βιβλίο κατάλληλο για σας; Πώς χρησιμοποιείται αυτό το βιβλίο Συνοδευτικός ιστότοπος Κεφάλαιο 1 Τα δομικά στοιχεία των ιστοσελίδων Μια βασική σελίδα HTML Σημασιολογική HTML: Σήμανση με σημασία Σήμανση: Στοιχεία, ιδιότητες, και τιμές Το περιεχόμενο κειμένου μιας ιστοσελίδας Σύνδεσμοι, εικόνες, και άλλα στοιχεία που δεν είναι κείμενο Ονόματα αρχείων Διευθύνσεις URL Βασικά σημεία Κεφάλαιο 2 Εργασία με αρχεία ιστοσελίδων Σχεδιασμός της τοποθεσίας σας Δημιουργία νέας ιστοσελίδας Αποθήκευση της ιστοσελίδας σας Καθορισμός προεπιλεγμένης σελίδας ή αρχικής σελίδας Επεξεργασία ιστοσελίδων Οργάνωση αρχείων Προβολή της σελίδας σας σε φυλλομετρητή Έμπνευση από τους άλλους

4 10 Περιεχόμενα Κεφάλαιο 3 Η βασική δομή της HTML Ξεκίνημα της ιστοσελίδας σας Δημιουργία τίτλου Δημιουργία επικεφαλίδων Κατανόηση της διάρθρωσης εγγράφου στην HTML Ομαδοποίηση επικεφαλίδων Συνηθισμένες σχηματικές δομές σελίδων Δημιουργία κεφαλίδας Σήμανση πλοήγησης Δημιουργία άρθρου Ορισμός ενότητας Καθορισμός παράλληλης ενότητας Δημιουργία υποσέλιδου Δημιουργία γενικών αποδεκτών Βελτίωση της προσπελασιμότητας με την ARIA Ονομασία στοιχείων με κλάση ή αναγνωριστικό Προσθήκη της ιδιότητας τίτλου σε στοιχεία Προσθήκη σχολίων Κεφάλαιο 4 Κείμενο Ξεκίνημα νέας παραγράφου Προσθήκη πληροφοριών επικοινωνίας του συγγραφέα Δημιουργία σχήματος Καθορισμός ώρας Σήμανση σημαντικού και εμφατικού κειμένου Καθορισμός παραπομπής ή αναφοράς Παράθεση κειμένου Επισήμανση κειμένου Επεξήγηση συντομογραφιών Καθορισμός όρου Δημιουργία εκθετών και δεικτών Επισήμανση διορθώσεων και ανακριβούς κειμένου Χαρακτηρισμός κώδικα Χρήση προμορφοποιημένου κειμένου Καθορισμός ψιλών γραμμάτων Δημιουργία αλλαγών γραμμών Δημιουργία στοιχείων span Άλλα στοιχεία

5 Περιεχόμενα 11 Κεφάλαιο 5 Εικόνες Εικόνες στον Ιστό Απόκτηση εικόνων Επιλογή προγράμματος επεξεργασίας εικόνων Αποθήκευση των εικόνων σας Εισαγωγή εικόνων σε σελίδα Παροχή εναλλακτικού κειμένου Καθορισμός του μεγέθους εικόνας Αλλαγή της κλίμακας μιας εικόνας με τον φυλλομετρητή Αλλαγή της κλίμακας μιας εικόνας με πρόγραμμα επεξεργασίας εικόνων Προσθήκη εικονιδίων για τον ιστότοπό σας Κεφάλαιο 6 Σύνδεσμοι Η ανατομία ενός συνδέσμου Δημιουργία συνδέσμου προς άλλη ιστοσελίδα Δημιουργία σημείων αγκύρωσης Σύνδεση σε συγκεκριμένο σημείο αγκύρωσης Δημιουργία συνδέσμων άλλων τύπων Κεφάλαιο 7 Τα θεμέλια της CSS Κατασκευή κανόνα στυλ Προσθήκη σχολίων σε κανόνες στυλ Η επαλληλία: Όταν οι κανόνες συγκρούονται Η τιμή μιας ιδιότητας Κεφάλαιο 8 Εργασία με φύλλα στυλ Δημιουργία εξωτερικού φύλλου στυλ Σύνδεση με εξωτερικά φύλλα στυλ Δημιουργία ενσωματωμένου φύλλου στυλ Εφαρμογή εμβόλιμων στυλ Η σημασία της θέσης Χρήση φύλλων στυλ για συγκεκριμένα μέσα Παροχή εναλλακτικών φύλλων στυλ Έμπνευση από τους άλλους: CSS Κεφάλαιο 9 Ορισμός επιλογέων Κατασκευή επιλογέων Επιλογή στοιχείων με βάση το όνομα Επιλογή στοιχείων με βάση την κλάση ή το αναγνωριστικό

6 12 Περιεχόμενα Επιλογή στοιχείων με βάση το θεματικό πλαίσιο Επιλογή μέρους ενός στοιχείου Επιλογή συνδέσμων με βάση την κατάστασή τους Επιλογή στοιχείων με βάση τις ιδιότητες Προσδιορισμός ομάδων στοιχείων Συνδυασμός επιλογέων Ανακεφαλαίωση επιλογέων Κεφάλαιο 10 Μορφοποίηση κειμένου με στυλ Επιλογή οικογένειας γραμματοσειρών Καθορισμός εναλλακτικών γραμματοσειρών Εφαρμογή πλάγιας γραφής Εφαρμογή έντονης γραφής Καθορισμός του μεγέθους γραμματοσειράς Καθορισμός του ύψους γραμμής Καθορισμός όλων των τιμών γραμματοσειράς μαζί Καθορισμός του χρώματος Αλλαγή του φόντου του κειμένου Ρύθμιση των αποστάσεων Προσθήκη εσοχών Καθορισμός ιδιοτήτων του κενού χώρου Στοίχιση κειμένου Αλλαγή πεζών-κεφαλαίων Χρήση μικρών κεφαλαίων Διακόσμηση κειμένου Κεφάλαιο 11 ιάταξη σελίδων με στυλ Ζητήματα που πρέπει να εξετάσετε πριν ξεκινήσετε μια διάταξη σελίδας Δόμηση των σελίδων σας Μορφοποίηση στοιχείων HTML5 σε παλαιούς φυλλομετρητές Επαναφορά ή κανονικοποίηση των προεπιλεγμένων στυλ Το μοντέλο πλαισίων Αλλαγή του φόντου Καθορισμός του ύψους ή του πλάτους για ένα στοιχείο Καθορισμός των περιθωρίων γύρω από ένα στοιχείο Προσθήκη συμπλήρωσης γύρω από ένα στοιχείο Δημιουργία στοιχείων που επιπλέουν

7 Περιεχόμενα 13 Έλεγχος του σημείου όπου επιπλέουν τα στοιχεία Ρύθμιση του περιγράμματος Μετατόπιση στοιχείων στη φυσική ροή Απόλυτη τοποθέτηση στοιχείων Τοποθέτηση στοιχείων σε 3Δ Χειρισμός της υπερχείλισης Κατακόρυφη στοίχιση στοιχείων Αλλαγή του δείκτη του ποντικιού Εμφάνιση και απόκρυψη στοιχείων Κεφάλαιο 12 Φύλλα στυλ για κινητά μέχρι επιτραπέζιους υπολογιστές Στρατηγικές και ζητήματα για κινητά Κατανόηση και υλοποίηση ερωτημάτων μέσων Κατασκευή μιας σελίδας που προσαρμόζεται με ερωτήματα μέσων Κεφάλαιο 13 Εργασία με γραμματοσειρές Ιστού Τι είναι η γραμματοσειρά Ιστού; Πού θα βρείτε γραμματοσειρές Ιστού Κατέβασμα της πρώτης σας γραμματοσειράς Ιστού Χρήση της 386 Μορφοποίηση γραμματοσειρών Ιστού και διαχείριση του μεγέθους αρχείων Κεφάλαιο 14 Βελτιώσεις με τη CSS Κατανόηση των προθεμάτων συγκεκριμένου κατασκευαστή Μια γρήγορη ματιά στη συμβατότητα των φυλλομετρητών Χρήση πολυσυμπληρώσεων για προοδευτική βελτίωση Στρογγύλευση των γωνιών σε στοιχεία Προσθήκη σκιάς σε κείμενο Προσθήκη σκιάς σε άλλα στοιχεία Εφαρμογή πολλών φόντων Χρήση ντεγκραντέ ως φόντου Ρύθμιση της αδιαφάνειας για στοιχεία Κεφάλαιο 15 Λίστες Δημιουργία διατεταγμένης και μη διατεταγμένης λίστας Επιλογή των σημειωτών σας Επιλογή της αρχής για την αρίθμηση της λίστας Χρήση προσαρμοσμένων σημειωτών

8 14 Περιεχόμενα Έλεγχος της προεξοχής των σημειωτών Καθορισμός όλων των ιδιοτήτων στυλ λίστας μονομιάς Μορφοποίηση ένθετης λίστας Δημιουργία λίστας περιγραφών Κεφάλαιο 16 Φόρμες Δημιουργία φορμών Επεξεργασία φορμών Αποστολή φορμών μέσω ηλεκτρονικού ταχυδρομείου Οργάνωση των στοιχείων φόρμας Δημιουργία πλαισίων κειμένου Δημιουργία πλαισίων κωδικού πρόσβασης Δημιουργία πλαισίων ηλεκτρονικού ταχυδρομείου, τηλεφώνου, και URL Δημιουργία ετικετών για τμήματα της φόρμας Δημιουργία ραδιοπλήκτρων Δημιουργία πλαισίων επιλογής Δημιουργία πλαισίων ελέγχου Δημιουργία περιοχών κειμένου Δυνατότητα ανεβάσματος αρχείων από τους χρήστες Δημιουργία κρυφών πεδίων Δημιουργία κουμπιού υποβολής Χρήση εικόνας για την υποβολή μιας φόρμας Απενεργοποίηση στοιχείων φόρμας Νέες λειτουργίες της HTML5 και υποστήριξη από τους φυλλομετρητές Κεφάλαιο 17 Βίντεο, ήχος, και άλλα πολυμέσα Πρόσθετα τρίτων κατασκευαστών και εγγενής υποστήριξη Μορφές αρχείου βίντεο Προσθήκη ενός μόνο βίντεο στην ιστοσελίδα σας Εξερεύνηση των ιδιοτήτων βίντεο Προσθήκη χειριστηρίων και αυτόματης εκτέλεσης στο βίντεό σας Βίντεο σε βρόχο και καθορισμός εικόνας αφίσας Αποτροπή της προφόρτωσης ενός βίντεο Χρήση βίντεο με πολλές προελεύσεις Πολλές προελεύσεις πολυμέσων και το στοιχείο source Προσθήκη βίντεο με υπερσύνδεσμο ως λύση καταφυγής Προσθήκη βίντεο με λύση καταφυγής Flash

9 Περιεχόμενα 15 Παροχή προσπελασιμότητας Προσθήκη μορφών αρχείου ήχου Προσθήκη ενός μόνο αρχείου ήχου στην ιστοσελίδα σας Προσθήκη ενός μόνο αρχείου ήχου στην ιστοσελίδα σας μαζί με χειριστήρια Εξερεύνηση των ιδιοτήτων ήχου Προσθήκη χειριστηρίων και αυτόματη εκτέλεση ήχου σε βρόχο Προφόρτωση ενός αρχείου ήχου Παροχή πολλών προελεύσεων ήχου Προσθήκη ήχου με υπερσύνδεσμο ως λύση καταφυγής Προσθήκη ήχου με λύση καταφυγής Flash Προσθήκη ήχου με υπερσύνδεσμο και Flash ως λύση καταφυγής Λήψη αρχείων πολυμέσων Διαχείριση ψηφιακών πνευματικών δικαιωμάτων (DRM) Ενσωμάτωση κινούμενων εικόνων Flash Ενσωμάτωση βίντεο YouTube Χρήση βίντεο με καμβά Συνδυασμός βίντεο με γραφικά SVG Πρόσθετοι πόροι Κεφάλαιο 18 Πίνακες Δόμηση πινάκων Επέκταση σε πολλές στήλες και γραμμές Κεφάλαιο 19 Εργασία με σενάρια Φόρτωση εξωτερικού σεναρίου Προσθήκη ενσωματωμένου σεναρίου Συμβάντα JavaScript Κεφάλαιο 20 Έλεγχος και αποσφαλμάτωση ιστοσελίδων Δοκιμή κάποιων τεχνικών αποσφαλμάτωσης Έλεγχος των εύκολων πραγμάτων: Γενικά Έλεγχος των εύκολων πραγμάτων: HTML Έλεγχος των εύκολων πραγμάτων: CSS Επικύρωση του κώδικά σας Έλεγχος της σελίδας σας Όταν οι εικόνες δεν εμφανίζονται Ακόμα κολλημένοι;

10 16 Περιεχόμενα Κεφάλαιο 21 ημοσίευση των σελίδων σας στον Ιστό Απόκτηση του δικού σας ονόματος περιοχής Εύρεση υπηρεσίας στέγασης για την τοποθεσία σας Μεταφορά αρχείων στον διακομιστή Παράρτημα Α Οδηγός αναφοράς HTML Παράρτημα Β Ιδιότητες και τιμές CSS Ευρετήριο

11 ΕΙΣΑΓΩΓΗ Είτε απλώς ξεκινάτε τώρα το ταξίδι σας στην κατασκευή ιστότοπων, είτε έχετε κατασκευάσει ιστότοπους και στο παρελθόν αλλά θέλετε να εξασφαλίσετε ότι οι γνώσεις σας είναι επίκαιρες, ήρθατε σε μια πολύ συναρπαστική περίοδο για αυτόν τον κλάδο. Ο τρόπος με τον οποίο δημιουργούμε και μορφοποιούμε σελίδες, οι φυλλομετρητές στους ο- ποίους προβάλλουμε τις σελίδες, και οι συσκευές στις οποίες εμφανίζουμε τους φυλλομετρητές έχουν εξελιχθεί με αλματώδη βήματα τα τελευταία χρόνια. Ενώ κάποτε ήμασταν περιορισμένοι στη φυλλομέτρηση του Ιστού από τους επιτραπέζιους ή τους φορητούς υπολογιστές μας, τώρα μπορούμε να πάρουμε τον Ιστό μαζί μας σε μια μεγάλη ποικιλία συσκευών: τηλέφωνα, ταμπλέτες, και ναι, φορητούς και επιτραπέζιους υπολογιστές, και πολλά άλλα. Κάτι που είναι και το αναμενόμενο, επειδή η μεγάλη υπόσχεση του Ιστού ήταν πάντα η κατάργηση των ορίων η δυνατότητα να μοιραζόμαστε και να προσπελάζουμε πληροφορίες ελεύθερα από οποιαδήποτε μεγαλούπολη ή αγροτική κοινότητα, ή από οπουδήποτε ενδιάμεσα, και με οποιαδήποτε συσκευή που να έχει δυνατότητα χρήσης του Ιστού. Με λίγα λόγια, η υπόσχεση του Ιστού έγκειται στην καθολικότητά του. Και η εμβέλεια του Ιστού συνεχίζει να επεκτείνεται καθώς η τεχνολογία βρίσκει τρόπους για να προσεγγίσει κοινότητες που ήταν κάποτε αποκλεισμένες. Ένα άλλο πράγμα που συμβάλλει στο μεγαλείο του Ιστού είναι το ότι ο οποιοσδήποτε είναι ε- λεύθερος να δημιουργήσει και να ξεκινήσει έναν ιστότοπο (ή τοποθεσία Ιστού). Το βιβλίο αυτό σας δείχνει τον τρόπο. Είναι ιδανικό για τους αρχάριους που δεν έχουν γνώσεις HTML ή CSS και θέλουν να αρχίσουν να δημιουργούν ιστοσελίδες. Εδώ θα βρείτε ξεκάθαρες, εύκολες στην εκτέλεση οδηγίες που σας καθοδηγούν βήμα προς βήμα στη διαδικασία της δημιουργίας σελίδων. Τέλος, το βιβλίο αποτελεί χρήσιμο οδηγό αναφοράς. Μπορείτε να αναζητήσετε θέματα στον πίνακα περιεχομένων και το ευρετήριο και να συμβουλευτείτε μόνο τα θέματα εκείνα για τα οποία χρειάζεστε περισσότερες πληροφορίες. 17

12 18 Εισαγωγή Η HTML και η CSS με μια ματιά Στη ρίζα της επιτυχίας του Ιστού βρίσκεται μια απλή, βασισμένη σε κείμενο γλώσσα σήμανσης που είναι εύκολη στην εκμάθηση και την οποία μπορεί να διαβάσει οποιαδήποτε συσκευή με έναν απλό φυλλομετρητή Ιστού: η HTML. Όλες οι ιστοσελίδες απαιτούν τουλάχιστον κάποιον κώδικα HTML χωρίς αυτόν δεν θα ήταν ιστοσελίδες. Όπως θα μάθετε με περισσότερες λεπτομέρειες καθώς προχωράτε στη μελέτη αυτού του βιβλίου, η HTML χρησιμοποιείται για τον καθορισμό της σημασίας του περιεχομένου, ενώ η γλώσσα CSS χρησιμοποιείται για τον καθορισμό της εμφάνισης του περιεχομένου και της ιστοσελίδας. Τόσο οι σελίδες HTML όσα και τα αρχεία CSS (τα φύλλα στυλ) είναι αρχεία κειμένου, γεγονός που κάνει εύκολη την επεξεργασία τους. Μπορείτε να δείτε αποσπάσματα κώδικα HTML και CSS στην ενότητα «Πώς χρησιμοποιείται αυτό το βιβλίο», κοντά στο τέλος αυτής της εισαγωγής. Θα ξεκινήσετε να μαθαίνετε τα βασικά στοιχεία μιας σελίδας HTML ήδη από το Κεφάλαιο 1, και θα αρχίσετε να μαθαίνετε πώς να μορφοποιείτε τις σελίδες σας με εντολές CSS στο Κεφάλαιο 7. Στην ενότητα «Τι θα σας μάθει αυτό το βιβλίο» μπορείτε να δείτε μια επισκόπηση όλων των κεφαλαίων, καθώς και μια σύνοψη των θεμάτων που καλύπτονται. Τι είναι η HTML5; Είναι χρήσιμο να γνωρίζετε κάποια βασικά πράγματα σχετικά με την προέλευση της HTML, έτσι ώστε να μπορέσετε να κατανοήσετε την HTML5. Η HTML ξεκίνησε στις αρχές της δεκαετίας του 1990 ως ένα σύντομο έγγραφο που παρέθετε κάποια λίγα στοιχεία τα οποία χρησιμοποιούνταν για την κατασκευή ιστοσελίδων. Πολλά από αυτά τα στοιχεία αφορούσαν την περιγραφή περιεχομένου ιστοσελίδων όπως οι επικεφαλίδες, οι παράγραφοι, και οι λίστες. Ο αριθμός έκδοσης της HTML μεγάλωνε καθώς η γλώσσα εξελισσόταν με την εισαγωγή νέων στοιχείων και προσαρμογών στους κανόνες της. Η τελευταία έκδοση είναι η HTML5. Η HTML5 αποτελεί φυσική εξέλιξη των προηγούμενων εκδόσεων της HTML και προσπαθεί να καλύψει τις ανάγκες των υπαρχόντων και των μελλοντικών ιστότοπων. Κληρονομεί τη συντριπτική πλειονότητα των λειτουργιών από τους προκατόχους της, γεγονός που σημαίνει ότι αν έχετε γράψει κώδικα HTML πριν από την έλευση της HTML5, γνωρίζετε ήδη πολλά για την HTML5. Αυτό σημαίνει επίσης ότι μεγάλο μέρος της HTML5 λειτουργεί τόσο σε παλιούς όσο και σε νέους φυλλομετρητές η προς τα πίσω συμβατότητα αποτελεί βασική αρχή στον σχεδιασμό της HTML5 (δείτε τη σελίδα TR/html-design-principles/). Η HTML5 προσθέτει επίσης άφθονες νέες λειτουργίες. Πολλές από αυτές είναι απλές, όπως τα πρόσθετα στοιχεία (article, section, figure, και πολλά άλλα) που χρησιμοποιούνται για την περιγραφή περιεχομένου. Άλλες είναι αρκετά περίπλοκες και βοηθούν στη δημιουργία ισχυρών εφαρμογών Ιστού. Θα χρειαστεί να κατανοήσετε σε βάθος τον τρόπο δημιουργίας ιστοσελίδων πριν να μπορέσετε να προχωρήσετε στις πιο περίπλοκες λειτουργίες που παρέχει η HTML5. Η HTML5 εισάγει επίσης την εγγενή αναπαραγωγή ήχου και βίντεο στις ιστοσελίδες σας, που καλύπτεται σε αυτό το βιβλίο. Τι είναι η CSS3; Η πρώτη έκδοση της γλώσσας CSS εμφανίστηκε χρόνια μετά την έλευση της HTML, και επισημοποιήθηκε το Όπως συμβαίνει και με την HTML5 και τη σχέση της με τις προηγούμενες εκδόσεις της HTML, η CSS3 αποτελεί φυσική εξέλιξη των προηγούμενων εκδόσεων της γλώσσας CSS. Η CSS3 είναι πιο ισχυρή από τις προηγούμενες εκδόσεις της γλώσσας CSS και εισάγει διάφορα οπτικά εφέ, όπως οι σκιές σε πλαίσια και κείμενο, οι στρογγυλεμένες γωνίες, και τα ντεγκραντέ. (Στην ενότητα «Τι θα σας μάθει αυτό το βιβλίο» θα δούμε λεπτομερώς τα θέματα που θα καλυφθούν στο βιβλίο.) Πρότυπα και προδιαγραφές Ιστού Μπορεί να αναρωτιέστε ποιος δημιούργησε αρχικά την HTML και τη CSS, και ποιος συνεχίζει να τις εξελίσσει. Η Κοινοπραξία Παγκόσμιου Ιστού (World Wide Web Consortium, W3C) την οποία διευθύνει ο εφευρέτης του Ιστού και της HTML, ο Tim Berners-Lee είναι ο οργανισμός που είναι υπεύθυνος για την επίβλεψη της ανάπτυξης των προτύπων για τον Ιστό. Οι προδιαγραφές (specifications ή specs, για συντομία) είναι έγγραφα που ορίζουν τις παραμέτρους

13 Εισαγωγή 19 ❶ Η τοποθεσία του W3C είναι η κύρια πηγή του κλάδου ως προς τις προδιαγραφές των προτύπων για τον Ιστό. για γλώσσες όπως η HTML και η CSS. Με άλλα λόγια, οι προδιαγραφές προτυποποιούν τους κανόνες. Μπορείτε να δείτε τη δραστηριότητα του W3C στη διεύθυνση ❶. Για διάφορους λόγους, ένας άλλος οργανισμός η Ομάδα Εργασίας για την Τεχνολογία Εφαρμογών Υπερ-Κειμένου στον Ιστό (Web Hypertext Application Technology Working Group ή WHATWG, δείτε τη διεύθυνση αναπτύσσει τις προδιαγραφές για την HTML5. Το W3C ενσωματώνει τη δουλειά της WHATWG στην επίσημη έκδοση των εν εξελίξει προδιαγραφών. Αφού υπάρχουν τα πρότυπα, μπορούμε να κατασκευάσουμε τις σελίδες μας με βάση το συμφωνημένο σύνολο κανόνων, και μπορούν να φτιαχτούν φυλλομετρητές όπως οι Chrome, Firefox, Internet Explorer (IE), Opera, και Safari για την εμφάνιση των σελίδων μας με βάση αυτούς τους κανόνες. (Σε γενικές γραμμές, οι φυλλομετρητές υλοποιούν καλά τα πρότυπα. Κάποια προβλήματα υπάρχουν στις παλαιότερες εκδόσεις του IE, και ειδικά στον IE6.) Οι προδιαγραφές περνούν από διάφορα στάδια ανάπτυξης πριν θεωρηθούν οριστικές, οπότε α- ποκαλούνται Συστάσεις (Recommendations, δείτε τη σελίδα /tr). Κάποια τμήματα των προδιαγραφών για την HTML5 και τη CSS3 είναι ακόμα στο στάδιο της οριστικοποίησης, όμως αυτό δεν σημαίνει ότι δεν μπορείτε να τα χρησιμοποιείτε. Απαιτείται πολύς καιρός (στην κυριολεξία χρόνια) για να περάσει τα διάφορα στάδια η προτυποποίηση. Οι φυλλομετρητές αρχίζουν να υλοποιούν τις λειτουργίες των προδιαγραφών πολύ πριν αυτές να γίνουν Σύσταση, επειδή αυτό αποτελεί ανάδραση και για την ίδια τη διαδικασία ανάπτυξης των προδιαγραφών. Έτσι οι φυλλομετρητές περιλαμβάνουν ήδη μεγάλο εύρος λειτουργιών HTML5 και CSS3, παρά το ότι αυτές δεν είναι ακόμα Συστάσεις. Συνολικά, οι λειτουργίες που καλύπτονται σε αυτό το βιβλίο είναι καλά θεμελιωμένες στις αντίστοιχες προδιαγραφές τους, έτσι ο κίνδυνος να αλλάξουν πριν να γίνουν Συστάσεις είναι ελάχιστος. Οι κατασκευαστές ιστότοπων χρησιμοποιούν πολλές λειτουργίες HTML5 και CSS3 εδώ και καιρό. Το ίδιο μπορείτε να κάνετε και εσείς.

14 20 Εισαγωγή Προοδευτική βελτίωση: Μια βέλτιστη πρακτική Ξεκίνησα την εισαγωγή μιλώντας για την καθολικότητα του Ιστού την ιδέα ότι οι πληροφορίες του Ιστού θα πρέπει να είναι προσπελάσιμες από όλους. Η προοδευτική βελτίωση (progressive enhancement) μάς βοηθά να κατασκευάζουμε τοποθεσίες έχοντας κατά νου την καθολικότητα. Δεν είναι κάποια γλώσσα, αλλά είναι μια προσέγγιση ως προς την κατασκευή τοποθεσιών, την οποία δημιούργησε ο Steve Champeon το 2003 (http://en.wikipedia.org/wiki/ Progressive_enhancement). Η ιδέα είναι απλή αλλά πανίσχυρη: Ξεκινάτε την τοποθεσία σας με περιεχόμενο και συμπεριφορές HTML που να είναι προσπελάσιμα από ό- λους τους επισκέπτες ❶. Στην ίδια σελίδα, προσθέτετε σχεδιαστική μορφοποίηση με εντολές CSS ❷ και πρόσθετες συμπεριφορές με JavaScript, συνήθως με φόρτωσή τους από εξωτερικά αρχεία (θα μάθετε πώς να το κάνετε αυτό). Το αποτέλεσμα είναι ότι οι συσκευές και οι φυλλομετρητές που έχουν δυνατότητα προσπέλασης μόνο των απλών σελίδων θα πάρουν το απλοποιημένο, προεπιλεγμένο περιβάλλον οι συσκευές και οι φυλλομετρητές που μπορούν να εμφανίσουν πιο εμπλουτισμένες τοποθεσίες θα προβάλουν τη βελτιωμένη έκδοση. Η αίσθηση που αποδίδει η τοποθεσία σας δεν είναι απαραίτητο να είναι ίδια για όλους, εφόσον το περιεχόμενό σας είναι προσπελάσιμο. Ουσιαστικά, η ιδέα πίσω από την προοδευτική βελτίωση είναι ότι όλοι βγαίνουν κερδισμένοι. ❶ Μια απλή σελίδα HTML χωρίς την εφαρμογή καμίας προσαρμοσμένης μορφοποίησης με φύλλα CSS. Η σελίδα μπορεί να μην έχει σπουδαία εμφάνιση, όμως οι πληροφορίες είναι προσπελάσιμες και αυτό είναι το σημαντικό. Ακόμα και οι φυλλομετρητές που χρονολογούνται από τις απαρχές του Ιστού, περισσότερα από 20 χρόνια πριν, μπορούν να εμφανίσουν αυτή τη σελίδα το ίδιο συμβαίνει και με τα παλαιότερα κινητά τηλέφωνα με φυλλομετρητές Ιστού. Και οι αναγνώστες οθόνης (screen readers), που είναι λογισμικό το οποίο εκφωνεί το περιεχόμενο ιστοσελίδων για λογαριασμό επισκεπτών με προβλήματα όρασης, θα μπορούν εύκολα να πλοηγηθούν σε αυτή.

15 Εισαγωγή 21 ❷ Η ίδια σελίδα όπως προβάλλεται από έναν φυλλομετρητή που υποστηρίζει φύλλα CSS. Οι πληροφορίες είναι ίδιες, όμως απλώς παρουσιάζονται με διαφορετικό τρόπο. Οι χρήστες που διαθέτουν συσκευές και φυλλομετρητές με περισσότερες δυνατότητες έχουν βελτιωμένη εμπειρία από την επίσκεψη στη σελίδα. Το βιβλίο αυτό θα σας μάθει πώς να κατασκευάζετε τοποθεσίες σύμφωνα με την αρχή της προοδευτικής βελτίωσης, ακόμα και όταν το κάνει αυτό χωρίς να το αναφέρει ρητά. Πρόκειται για φυσικό αποτέλεσμα των βέλτιστων πρακτικών που μεταδίδονται μέσω του βιβλίου. Όμως τα Κεφάλαια 12 και 14 όντως ασχολούνται άμεσα με την προοδευτική βελτίωση. Ρίξτε μια γρήγορη ματιά στα κεφάλαια αυτά αν θέλετε να δείτε με ποιον τρόπο η αρχή της προοδευτικής βελτίωσης βοηθά στην κατασκευή μιας τοποθεσίας που προσαρμόζει τη διάταξή της με βάση το μέγεθος οθόνης της συσκευής και τις δυνατότητες του φυλλομετρητή, ή με ποιον τρόπο οι παλαιότεροι φυλλομετρητές θα εμφανίζουν απλοποιημένες σχεδιάσεις ενώ οι σύγχρονοι φυλλομετρητές θα εμφανίζουν σχεδιάσεις που είναι εμπλουτισμένες με εφέ CSS3. Η προοδευτική βελτίωση είναι μια βασική βέλτιστη πρακτική που βρίσκεται στον πυρήνα της κατασκευής τοποθεσιών για όλους.

16 22 Εισαγωγή Είναι αυτό το βιβλίο κατάλληλο για σας; Το βιβλίο αυτό δεν προϋποθέτει καμία προηγούμενη γνώση σχετικά με την κατασκευή ιστότοπων. Έτσι, κατ αυτή την έννοια, απευθύνεται στους τελείως αρχάριους. Θα μάθετε τόσο για την HTML όσο και για τη CSS από μηδενική βάση. Στην πορεία θα μάθετε επίσης για λειτουργίες που είναι νέες στην HTML5 και τη CSS3, με έμφαση στις λειτουργίες εκείνες τις οποίες χρησιμοποιούν σήμερα οι σχεδιαστές και οι προγραμματιστές στην καθημερινή τους δουλειά. Όμως ακόμα και αν είστε εξοικειωμένοι με την HTML και τη CSS, και πάλι θα μάθετε από αυτό το βιβλίο, ειδικά αν θέλετε να ενημερωθείτε στα γρήγορα για τις τελευταίες εξελίξεις στην HTML5, τη CSS3, και τις βέλτιστες πρακτικές. Τι θα σας μάθει αυτό το βιβλίο Προσθέσαμε περίπου 125 σελίδες στο βιβλίο σε σχέση με την προηγούμενη αγγλική έκδοση, έ- τσι ώστε να σας δώσουμε όσο το δυνατόν περισσότερο υλικό. (Η πρώτη έκδοση του βιβλίου, που δημοσιεύτηκε το 1996, είχε συνολικά 176 σελίδες.) Κάναμε επίσης ουσιαστική ενημέρωση (ή και εξολοκλήρου συγγραφή εκ νέου) σε σχεδόν όλες τις σελίδες της προηγούμενης έκδοσης. Με λίγα λόγια, αυτή η Έβδομη Έκδοση αντιπροσωπεύει μια πολύ σημαντική αναθεώρηση. Τα κεφάλαια είναι οργανωμένα ως εξής: Τα Κεφάλαια 1 έως 6 και 15 έως 18 καλύπτουν τις αρχές της δημιουργίας σελίδων HTML και την εργαλειοθήκη στοιχείων HTML που έχετε στη διάθεσή σας, δείχνοντας ξεκάθαρα πού να χρησιμοποιήσετε το καθένα από αυτά. Τα Κεφάλαια 7 έως 14 ασχολούνται με τη CSS, από τη δημιουργία του πρώτου σας κανόνα στυλ μέχρι την εφαρμογή βελτιωμένων οπτικών εφέ με τη CSS3. Το Κεφάλαιο 19 δείχνει πώς να προσθέτετε έτοιμο κώδικα JavaScript στις σελίδες σας. Το Κεφάλαιο 20 δείχνει πώς να ελέγχετε και να αποσφαλματώνετε τις σελίδες σας, πριν να τις τοποθετήσετε στον Ιστό. Το Κεφάλαιο 21 εξηγεί πώς να αποκτήσετε το δικό σας όνομα περιοχής και πώς να δημοσιεύσετε την τοποθεσία σας στον Ιστό ώστε να μπορεί να τη δει το κοινό. Πιο αναλυτικά, κάποια από τα θέματα που καλύπτονται είναι τα εξής: Δημιουργία, αποθήκευση, και επεξεργασία αρχείων HTML και CSS. Τι είναι η συγγραφή σημασιολογικής HTML (semantic HTML) και γιατί είναι σημαντική. Πώς να διαχωρίσετε το περιεχόμενο της σελίδας σας (δηλαδή τον κώδικα HTML σας) από την παρουσίασή του (δηλαδή τα στυλ CSS σας) που είναι μια βασική πτυχή της προοδευτικής βελτίωσης. Δόμηση του περιεχομένου σας με έναν τρόπο που να έχει νόημα, με χρήση τόσο στοιχείων HTML που υπάρχουν εδώ και χρόνια, όσο και νέων στοιχείων της HTML5. Βελτίωση της προσπελασιμότητας της τοποθεσίας σας με ρόλους οροσήμου ARIA και άλλες καλές πρακτικές συγγραφής κώδικα. Προσθήκη εικόνων στις σελίδες σας και βελτιστοποίησή τους για τον Ιστό. Σύνδεση από τη μία ιστοσελίδα σε μια άλλη, ή από το ένα μέρος της σελίδας σε ένα άλλο. Μορφοποίηση του κειμένου (μέγεθος, χρώμα, έντονα, πλάγια, και άλλα) προσθήκη χρωμάτων και εικόνων φόντου και υλοποίηση μιας ρευστής και πολύστηλης διάταξης σελίδας που να μπορεί να συρρικνώνεται και να επεκτείνεται έτσι ώστε να χωράει σε διάφορα μεγέθη οθόνης.

17 Εισαγωγή 23 Χρήση των νέων επιλογέων της CSS3 που σας επιτρέπουν να στοχεύσετε τα στυλ σας με περισσότερους τρόπους απ ό,τι στο παρελθόν. Παρουσίαση των επιλογών σας σχετικά με την κάλυψη των επισκεπτών που χρησιμοποιούν συσκευές κινητών. Κατασκευή μίας μόνο τοποθεσίας για όλους τους χρήστες ανεξάρτητα από το αν χρησιμοποιούν κινητό τηλέφωνο, ταμπλέτα, φορητό υπολογιστή, επιτραπέζιο υπολογιστή, ή κάποια άλλη συσκευή με δυνατότητα χρήσης του Ιστού με βάση πολλές από τις αρχές της ανταποκρινόμενης σχεδίασης για τον Ι- στό, κάποιες από τις οποίες χρησιμοποιούν ερωτήματα μέσων CSS3. Προσθήκη προσαρμοσμένων γραμματοσειρών Ιστού στις σελίδες σας με τη Χρήση εφέ CSS3 όπως η αδιαφάνεια, η διαφάνεια φόντου με κανάλια άλφα, τα ντεγκραντέ, οι στρογγυλεμένες γωνίες, οι σκιές, οι σκιές μέσα σε στοιχεία, οι σκιές κειμένου, και οι πολλαπλές εικόνες φόντου. Κατασκευή φορμών για τη λήψη εισόδου από τους επισκέπτες σας, όπου συμπεριλαμβάνεται και η χρήση κάποιων από τα νέα στοιχεία εισόδου φορμών της HTML5. Συμπερίληψη πολυμέσων στις σελίδες σας με τα στοιχεία audio και video της HTML5. Και πολλά άλλα. Τα θέματα αυτά συμπληρώνονται με πολλές δεκάδες δείγματα κώδικα που σας δείχνουν με ποιον τρόπο να υλοποιήσετε τις λειτουργίες, με βάση τις βέλτιστες πρακτικές του κλάδου. Τι δεν θα σας μάθει αυτό το βιβλίο Δυστυχώς, ακόμα και μετά την προσθήκη τόσο πολλών σελίδων σε σύγκριση με την προηγούμενη έκδοση, υπάρχουν τόσο πολλά πράγματα που μπορεί να πει κανείς για την HTML και τη CSS που έπρεπε υποχρεωτικά να παραλείψουμε κάποια θέματα. Με ελάχιστες εξαιρέσεις, επιλέξαμε να παραλείψουμε στοιχεία που θα έχετε λιγότερες ευκαιρίες να χρησιμοποιήσετε, βρίσκονται ακόμα σε φάση αλλαγών, δεν έχουν ευρεία υποστήριξη από τους φυλλομετρητές, απαιτούν γνώση της JavaScript, ή είναι προηγμένες λειτουργίες. Κάποια από τα θέματα που δεν καλύπτονται είναι τα εξής: Τα στοιχεία details, summary, menu, command, και keygen της HTML5. Το στοιχείο canvas της HTML5, που σας επιτρέπει να σχεδιάζετε γραφικά (ή ακόμα και να δημιουργείτε παιχνίδια) σε συνδυασμό με την JavaScript. Τις Διασυνδέσεις Προγραμματισμού Εφαρμογών HTML5 (HTML5 API) και άλλες προηγμένες λειτουργίες που απαιτούν γνώση JavaScript ή δεν σχετίζονται άμεσα με τα νέα σημασιολογικά στοιχεία της HTML5. Τα μπλοκ εικονοστοιχείων CSS (CSS sprites). Η τεχνική αυτή περιλαμβάνει τον συνδυασμό πολλών εικόνων σε μία, κάτι που είναι πολύ χρήσιμο για την ελαχιστοποίηση του πλήθους πόρων που θα πρέπει να φορτώσει η σελίδα σας. Για περισσότερες πληροφορίες δείτε τη διεύθυνση Αντικατάσταση εικόνων CSS. Οι τεχνικές αυτές συχνά συνδυάζονται με τα μπλοκ εικονοστοιχείων CSS. Για περισσότερες πληροφορίες δείτε τη διεύθυνση Μετασχηματισμοί, κινούμενες εικόνες, και μεταβάσεις CSS3. Οι νέες υπομονάδες διάταξης σελίδας CSS3.

18 24 Εισαγωγή Πώς χρησιμοποιείται αυτό το βιβλίο Σχεδόν όλες οι ενότητες του βιβλίου περιέχουν πρακτικά παραδείγματα που δείχνουν τη χρήση σε πραγματικές συνθήκες (❶ και ❷). Συνήθως, τα παραδείγματα αυτά συνδυάζονται με στιγμιότυπα οθόνης που δείχνουν τα αποτελέσματα του κώδικα όταν προβάλλετε την ιστοσελίδα σε έναν φυλλομετρητή ❸. Πολλά από τα στιγμιότυπα οθόνης απεικονίζουν την τελευταία έκδοση του Firefox που ήταν διαθέσιμη κατά τη στιγμή της παραγωγής του βιβλίου. Όμως αυτό δεν σημαίνει κάποια προτίμηση στον Firefox έναντι οποιουδήποτε άλλου φυλλομετρητή. Τα δείγματα κώδικα θα έχουν παρόμοια εμφάνιση σε οποιαδήποτε από τις τελευταίες εκδόσεις των Chrome, Internet Explorer, Opera, ή Safari. Όπως θα μάθετε στο Κεφάλαιο 20, θα πρέπει να ελέγχετε τις σελίδες σας σε ένα μεγάλο εύρος φυλλομετρητών πριν να τις δημοσιεύσετε στον Ιστό, επειδή δεν μπορείτε να ξέρετε ποιον φυλλομετρητή θα χρησιμοποιούν οι επισκέπτες σας. Ο κώδικας και τα στιγμιότυπα οθονών συνοδεύονται από περιγραφές των στοιχείων HTML ή των ιδιοτήτων CSS που εξετάζονται, τόσο για να φαίνεται το θεματικό πλαίσιο του δείγματος κώδικα, όσο και για να μπορέσετε να τον κατανοήσετε ευκολότερα. Σε πολλές περιπτώσεις θα διαπιστώσετε ότι οι περιγραφές και τα δείγματα κώδικα είναι αρκετά για να αρχίσετε να χρησιμοποιείτε τις λειτουργίες HTML και CSS. Αν όμως χρειάζεστε ρητή καθοδήγηση ως προς τον τρόπο χρήσης τους, παρέχονται επίσης και βήμα προς βήμα οδηγίες. Τέλος, οι περισσότερες ενότητες περιλαμβάνουν συμβουλές που περιέχουν πρόσθετες πληροφορίες χρήσης, βέλτιστες πρακτικές, αναφορές σε συναφή τμήματα του βιβλίου, συνδέσμους σε σχετικούς πόρους, και πολλά άλλα. ❶ Θα βρείτε αποσπάσματα κώδικα HTML σε πολλές σελίδες, με επισημασμένα τα συναφή τμήματα. Τα αποσιωπητικά (...) αντιπροσωπεύουν πρόσθετο κώδικα ή περιεχόμενο που παραλείφθηκε για λόγους συντομίας. Συχνά το τμήμα που έχει παραλειφθεί φαίνεται σε κάποια άλλη εικόνα με κώδικα.... <body> <header role="banner">... <nav role="navigation"> <ul class="nav"> <li><a href="/" class="current">home</a></li> <li><a href="/about/">about</a></li> <li><a href="/resources/">resources</a></li> <li><a href="/archives/">archives</a></li> </ul> </nav>... </header>... </body> </html>

19 Εισαγωγή 25 ❷ Αν ο κώδικας CSS σχετίζεται με το παράδειγμα, θα εμφανίζεται σε δικό του πλαίσιο, με επισημασμένες τις συναφείς ενότητες. /* Πλοήγηση τοποθεσίας */.nav li { float: left; font-size:.75em; /* makes the bullets smaller */ }.nav li a { font-size: 1.5em; }.nav li:first-child { list-style: none; padding-left: 0; } ❸ Στιγμιότυπα οθόνης από έναν ή περισσότερους φυλλομετρητές δείχνουν με ποιον τρόπο επηρεάζει ο κώδικας αυτός τη σελίδα. Συμβάσεις που χρησιμοποιούνται σε αυτό το βιβλίο Στο βιβλίο χρησιμοποιούνται οι ακόλουθες συμβάσεις: Η λέξη HTML έχει γενικό περιεχόμενο, και αντιπροσωπεύει τη γλώσσα συνολικά. Όταν αναφέρομαι στη συγκεκριμένη έκδοση της HTML χρησιμοποιώ τη λέξη HTML5 για παράδειγμα, αυτό συμβαίνει όταν αναφέρομαι σε κάποια λειτουργία που είναι καινούργια στην HTML5 και δεν υπήρχε σε προηγούμενες εκδόσεις της HTML. Η ίδια προσέγγιση ισχύει και για τη χρήση των όρων CSS (γενικά) και CSS3 (συγκεκριμένα για τη CSS3). Το κείμενο ή ο κώδικας που αποτελεί δεσμευτικό θέσης για μια τιμή την οποία θα πρέπει να δημιουργήσετε εσείς εμφανίζεται με πλάγια. Για παράδειγμα, «Ή πληκτρολογήστε #rrggbb, όπου το rrggbb είναι η δεκαεξαδική αναπαράσταση του χρώματος». Ο κώδικας τον οποίο θα πρέπει να πληκτρολογήσετε πραγματικά ή που αναπαριστάνει στοιχεία HTML ή CSS εμφανίζεται με αυτή τη γραμματοσειρά. Το βέλος ( ) σε μια εικόνα κώδικα δείχνει ότι πρόκειται για συνέχεια της προηγούμενης γραμμής η γραμμή έχει αναδιπλωθεί για να χωράει στη στήλη του βιβλίου ❷. Το βέλος δεν αποτελεί τμήμα του ίδιου του κώδικα, έτσι δεν είναι κάτι που θα πρέπει να πληκτρολογήσετε. Αντιθέτως, θα πρέπει να πληκτρολογήσετε τη γραμμή συνεχόμενα, σαν να μην αναδιπλωνόταν σε άλλη γραμμή. Στην πρώτη παρουσία ενός όρου χρησιμοποιείται πλάγια γραφή εκεί όπου δίνεται ο ορισμός του. Το IE χρησιμοποιείται συχνά ως δημοφιλής συντομογραφία για τον Internet Explorer. Για παράδειγμα, το IE9 είναι συνώνυμο του Internet Explorer 9. Όταν υπάρχει ένα σύμβολο συν (+) μετά από τον αριθμό έκδοσης ενός φυλλομετρητή, αυτό υποδηλώνει τη συγκεκριμένη έκδοση που αναφέρεται καθώς και όλες τις επόμενες εκδόσεις. Για παράδειγμα, ο Firefox 8+ αναφέρεται στον Firefox 8.0 και όλες τις μεταγενέστερες εκδόσεις.

20 26 Εισαγωγή Συνοδευτικός ιστότοπος Η τοποθεσία του βιβλίου, στη διεύθυνση περιέχει τον πίνακα περιεχομένων (του αγγλικού βιβλίου), κάθε ολοκληρωμένο παράδειγμα κώδικα που παρουσιάζεται στο βιβλίο (συν κάποια πρόσθετα παραδείγματα που δεν χωρούσαν στο βιβλίο), συνδέσμους σε πόρους που αναφέρονται στο βιβλίο (αλλά και σε πρόσθετους πόρους), πληροφορίες σχετικά με τις αναφορές που χρησιμοποιήθηκαν κατά τη συγγραφή, κατάλογο παροραμάτων, και πολλά άλλα. Η τοποθεσία περιλαμβάνει επίσης δύο ενότητες αναφοράς (Παραρτήματα Α και Β) που δεν υ- πήρχε χώρος για να συμπεριληφθούν στην αγγλική έκδοση του βιβλίου (αλλά συμπεριλαμβάνονται στην ελληνική έκδοση). Οι αναφορές αυτές είναι χρήσιμες για τη γρήγορη αναζήτηση σχετικά με στοιχεία και ιδιότητες HTML ή ιδιότητες και τιμές CSS. (Περιέχουν επίσης και κάποιες πληροφορίες που δεν καλύπτονται στο κυρίως σώμα του βιβλίου.) Μπορείτε να βρείτε τα παραδείγματα κώδικα στη διεύθυνση htmlcss/examples/. Από εκεί μπορείτε είτε να τα εξετάσετε είτε να τα κατεβάσετε στον υπολογιστή σας όλα τα αρχεία HTML και CSS είναι στη διάθεσή σας. Σε κάποιες περιπτώσεις έχω συμπεριλάβει πρόσθετα σχόλια στον κώδικα, για να εξηγήσω περισσότερα σχετικά με το αποτέλεσμα που έχει ή τον τρόπο χρήσης του. Κάποια από τα δείγματα κώδικα του βιβλίου έχουν περικοπεί για λόγους χώρου, όμως στον ιστότοπο του βιβλίου υπάρχουν οι πλήρεις εκδόσεις. Χρησιμοποιήστε ε- λεύθερα τον κώδικα με όποιον τρόπο σας αρέσει, τροποποιώντας τον σύμφωνα με τις ανάγκες των έργων σας. Οι διευθύνσεις URL για κάποιες από τις βασικές σελίδες της τοποθεσίας του βιβλίου είναι οι ε- ξής: Αρχική σελίδα: Παραδείγματα κώδικα: Παράρτημα A: Οδηγός αναφοράς HTML: Παράρτημα B: Ιδιότητες και τιμές CSS: Ελπίζω ότι η τοποθεσία θα σας φανεί χρήσιμη.

21 ΤΑ ΟΜΙΚΑ ΣΤΟΙΧΕΙΑ ΤΩΝ ΙΣΤΟΣΕΛΙ ΩΝ Αν και οι ιστοσελίδες έχουν γίνει όλο και πιο πολύπλοκες, η εσωτερική δομή τους παραμένει αξιοσημείωτα απλή. Το πρώτο πράγμα που θα πρέπει να γνωρίζετε είναι ότι είναι αδύνατο να δημιουργήσετε μια ιστοσελίδα χωρίς HTML. Όπως θα μάθετε, η HTML στεγάζει το περιεχόμενό σας και περιγράφει τη σημασία του. Με τη σειρά τους, οι φυλλομετρητές Ιστού αποδίδουν (render) το περιβεβλημένο από χαρακτηρισμούς HTML περιεχόμενο ώστε να το προβάλουν στους χρήστες. Η ιστοσελίδα αποτελείται κατά κύριο λόγο από τρία συστατικά στοιχεία: Περιεχόμενο κειμένου: Το απλό κείμενο που εμφανίζεται στη σελίδα για να πληροφορήσει τους επισκέπτες σχετικά με την επιχείρησή σας, τις οικογενειακές διακοπές σας, τα προϊόντα σας, ή όποιο άλλο μπορεί να είναι το αντικείμενο της σελίδας σας. Αναφορές σε άλλα αρχεία: Αυτές φορτώνουν στοιχεία όπως εικόνες, αρχεία ήχου και βίντεο, ή αρχεία SVG, και παρέχουν σύνδεση με άλλες σελίδες και στοιχεία, καθώς και με φύλλα στυλ (τα οποία ελέγχουν την οπτική διάταξη της σελίδας σας) και με αρχεία JavaScript (που προσθέτουν συμπεριφορές behaviors στη σελίδα σας). Σήμανση: Αυτά είναι τα στοιχεία HTML που περιγράφουν το περιεχόμενο κειμένου σας και κάνουν τις αναφορές να λειτουργούν. (Το γράμμα m στη λέξη HTML προέρχεται από τη λέξη markup που σημαίνει σήμανση.) Σε αυτό το κεφάλαιο Μια βασική σελίδα HTML 29 Σημασιολογική HTML: Σήμανση με σημασία 32 Σήμανση: Στοιχεία, ιδιότητες, και τιμές 39 Το περιεχόμενο κειμένου μιας ιστοσελίδας 42 Σύνδεσμοι, εικόνες, και άλλα στοιχεία που δεν είναι κείμενο 43 Ονόματα αρχείων 45 Διευθύνσεις URL 46 Βασικά σημεία 50 27

22 28 Κεφάλαιο 1 Είναι σημαντικό να τονίσουμε ότι το καθένα από αυτά τα στοιχεία σε μια ιστοσελίδα αποτελείται αποκλειστικά από κείμενο. Αυτό σημαίνει ότι οι ιστοσελίδες αποθηκεύονται σε μορφή α- πλού κειμένου και μπορούν να προβληθούν από πρακτικά οποιονδήποτε φυλλομετρητή σε ο- ποιαδήποτε υπολογιστική πλατφόρμα, ανεξάρτητα από το αν είναι επιτραπέζιος υπολογιστής, κινητό τηλέφωνο, ταμπλέτα, ή κάτι άλλο. Αυτό εξασφαλίζει την καθολικότητα του Ιστού. Η σελίδα μπορεί να έχει διαφορετική εμφάνιση όταν προβάλλεται σε διαφορετικές συσκευές, όμως αυτό δεν πειράζει. Το σημαντικό πρώτο βήμα είναι να γίνει το περιεχόμενο διαθέσιμο σε ό- λους τους χρήστες, και αυτό το παρέχει η HTML. Εκτός από τα τρία αυτά συστατικά στοιχεία από τα οποία αποτελείται κατά κύριο λόγο μια ιστοσελίδα, στη σελίδα περιλαμβάνεται επίσης κώδικας HTML που παρέχει πληροφορίες σχετικά με την ίδια τη σελίδα, τον οποίο οι χρήστες κανονικά δεν βλέπουν και ο οποίος προορίζεται για τους φυλλομετρητές και τις μηχανές αναζήτησης. Στον κώδικα αυτόν μπορεί να περιλαμβάνονται πληροφορίες σχετικά με την κύρια γλώσσα του περιεχομένου (Αγγλικά, Ελληνικά, και λοιπά), την κωδικοποίηση των χαρακτήρων (συνήθως UTF-8), και πολλά άλλα. Στο κεφάλαιο αυτό θα αναλύσουμε μια βασική σελίδα HTML, θα δούμε κάποιες βέλτιστες πρακτικές, και θα εξηγήσουμε καθένα από τα τρία αυτά σημαντικά συστατικά στοιχεία. Σημείωση: Όπως αναφέρθηκε και στην εισαγωγή, χρησιμοποιώ τον όρο HTML για να αναφερθώ στη γλώσσα γενικά. Στις περιπτώσεις όπου θέλω να τονίσω κάποια ειδικά χαρακτηριστικά που υπάρχουν μόνο σε μια συγκεκριμένη έκδοση της γλώσσας, θα χρησιμοποιώ ξεχωριστό ό- νομα. Για παράδειγμα, «η HTML5 εισάγει αρκετά νέα στοιχεία και επαναπροσδιορίζει ή απαλείφει άλλα που υπήρχαν προηγουμένως στην HTML 4 και την XHTML 1.0.» Για περισσότερες λεπτομέρειες, δείτε την ενότητα «Πώς χρησιμοποιείται αυτό το βιβλίο» στην Εισαγωγή.

23 Τα δομικά στοιχεία των ιστοσελίδων 29 ❶ Η τυπική προεπιλεγμένη απόδοση της σελίδας. Αν και η εικόνα δείχνει τη σελίδα στον Firefox, η σελίδα έχει παρόμοια εμφάνιση και στους άλλους φυλλομετρητές. Μια βασική σελίδα HTML Ας ρίξουμε μια ματιά σε μια βασική σελίδα HTML, για να πάρετε μια ιδέα σχετικά με τα όσα θα ακολουθήσουν σε αυτό το κεφάλαιο και τα επόμενα. Η Εικόνα ❶ δείχνει πώς αποδίδουν συνήθως οι φυλλομετρητές επιτραπέζιων υπολογιστών τον κώδικα HTML της Εικόνας ❷. Θα μάθετε κάποια από τα βασικά σχετικά με τον κώδικα της Εικόνας ❷, όμως μην ανησυχείτε αν δεν τον κατανοείτε όλο τώρα. Ο στόχος είναι να πάρετε απλώς μια γεύση από την HTML. Έχετε το υπόλοιπο βιβλίο για να μάθετε περισσότερα σχετικά με αυτή. Μπορείτε πιθανότατα να μαντέψετε κάποια από τα όσα γίνονται στον κώδικα, ειδικά στην ενότητα body. Ας εξετάσουμε όμως πρώτα το τμήμα πριν από την ενότητα body. ❷ Αυτός είναι ο κώδικας για τη βασική σελίδα HTML. Έχω επισημάνει τα τμήματα HTML έτσι ώστε να μπορείτε να τα ξεχωρίσετε από το περιεχόμενο κειμένου της σελίδας. Όπως φαίνεται στην Εικόνα ❶, ο κώδικας HTML που περιβάλλει το περιεχόμενο κειμένου δεν εμφανίζεται όταν βλέπετε τη σελίδα σε έναν φυλλομετρητή. Όπως όμως θα μάθετε, η σήμανση είναι απαραίτητη επειδή περιγράφει τη σημασία του περιεχομένου. Σημειώστε, επίσης, ότι κάθε γραμμή φαίνεται να τερματίζεται με χαρακτήρα αλλαγής γραμμής. Αυτό δεν είναι υποχρεωτικό και δεν επηρεάζει την απόδοση της σελίδας. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>blue Flax (Linum lewisii)</title> </head> <body> <article> <h1>the Ephemeral Blue Flax</h1> <img src="blueflax.jpg" width="300" height="175" alt="blue Flax (Linum lewisii)" /> <p>i am continually <em>amazed</em> at the beautiful, delicate <a href="http:// en.wikipedia.org/wiki/linum_lewisii" rel="external" title="learn more about Blue Flax">Blue Flax</a> that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p> </article> </body> </html>

24 30 Κεφάλαιο 1 Όλα όσα βρίσκονται πάνω από την ετικέτα αρχής <body> είναι οι ενημερωτικές πληροφορίες για τους φυλλομετρητές και τις μηχανές αναζήτησης που αναφέραμε προηγουμένως ❸. Όλες οι σελίδες ξεκινούν με τη δήλωση DOCTYPE (τύπος εγγράφου), που ενημερώνει τον φυλλομετρητή σχετικά με την έκδοση HTML της σελίδας. Θα πρέπει να χρησιμοποιείτε πάντα την εντολή DOCTYPE της HTML5, που είναι η <!DOCTYPE html>. Δεν έχει σημασία η γραφή των λέξεων με πεζά ή κεφαλαία, όμως είναι πιο συνηθισμένο να γράφετε τη λέξη DOCTYPE με κεφαλαία. Ανεξάρτητα από αυτό, να συμπεριλαμβάνετε πάντα τη δήλωση DOCTYPE στις σελίδες σας. (Για περισσότερες πληροφορίες δείτε το ειδικό πλαίσιο «Η βελτιωμένη εντολή DOCTYPE της HTML5» στο Κεφάλαιο 3.) Όσα βρίσκονται ανάμεσα στην εντολή <!DOCTYPE html> και την εντολή </head> είναι αόρατα για τους χρήστες, με μία εξαίρεση: το κείμενο ανάμεσα στις ετικέτες <title> και </title> δηλαδή το κείμενο Blue Flax (Linum lewisii) εμφανίζεται ως τίτλος στην κορυφή του παραθύρου του φυλλομετρητή και στην καρτέλα του φυλλομετρητή ❷. Επίσης, αποτελεί συνήθως το προεπιλεγμένο όνομα για σελιδοδείκτη στον φυλλομετρητή και είναι μια πολύτιμη πληροφορία για τις μηχανές αναζήτησης. Το Κεφάλαιο 3 εξηγεί τι κάνουν τα υπόλοιπα κομμάτια του αρχικού τμήματος της σελίδας. ❸ Το στοιχείο κειμένου title είναι το μοναδικό τμήμα της αρχής ενός εγγράφου HTML που βλέπουν οι χρήστες. Τα υπόλοιπα είναι πληροφορίες σχετικά με τη σελίδα που προορίζονται για φυλλομετρητές και μηχανές αναζήτησης. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>the Ephemeral Blue Flax (Linum lewisii)</title> </head>

25 Τα δομικά στοιχεία των ιστοσελίδων 31 ❹ Το περιεχόμενο της σελίδας βρίσκεται ανάμεσα στις ετικέτες αρχής και τέλους του στοιχείου body. Το έγγραφο τερματίζεται στην ετικέτα </html>. <!DOCTYPE html> <html lang="en">... [document head]... <body> <article> <h1>the Ephemeral Blue Flax</h1> <img src="blueflax.jpg" width="300" height="175" alt="blue Flax (Linum lewisii)" /> <p>i am continually <em>amazed</em> at the beautiful, delicate <a href="http://en.wikipedia.org/ wiki/linum_lewisii" rel="external" title="learn more about Blue Flax"> Blue Flax</a> that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p> </article> </body> </html> Στο μεταξύ, το περιεχόμενο της σελίδας σας δηλαδή αυτά που είναι ορατά στους χρήστες βρίσκεται ανάμεσα στις ετικέτες <body> και </body>. Τέλος, η τελική ετικέτα </html> σηματοδοτεί το τέλος της σελίδας ❹. Οι εσοχές που βλέπετε στον κώδικα δεν έχουν απολύτως καμία σχέση με το αν ο κώδικας αποτελεί έγκυρη HTML. Δεν επηρεάζουν επίσης τον τρόπο προβολής του περιεχομένου στον φυλλομετρητή (η μοναδική εξαίρεση, όπως θα μάθετε στο Κεφάλαιο 4, είναι το στοιχείο pre). Παρόλα αυτά, είναι συνηθισμένο να τοποθετούμε σε εσοχή τον κώδικα που είναι ένθετος σε κάποιο γονικό στοιχείο, έτσι ώστε να μπορούμε να δούμε με μια ματιά την ιεραρχία των στοιχείων καθώς διαβάζουμε τον κώδικα. Θα μάθετε περισσότερα για τα γονικά και τα θυγατρικά στοιχεία στη συνέχεια του κεφαλαίου. Θα μάθετε επίσης περισσότερα σχετικά με την προεπιλεγμένη απόδοση (rendering) από τους φυλλομετρητές. Κατ αρχήν, ας δούμε τι σημαίνει η συγγραφή σημασιολογικής HTML (semantic HTML) και γιατί αποτελεί θεμέλιο λίθο για έναν αποτελεσματικό ιστότοπο.

26 32 Κεφάλαιο 1 Σημασιολογική HTML: Σήμανση με σημασία Η HTML είναι ένα έξυπνο σύστημα συμπερίληψης πληροφοριών σχετικά με το περιεχόμενο μέσα σε ένα έγγραφο κειμένου. Οι πληροφορίες αυτές, που ονομάζονται σήμανση (markup), περιγράφουν τη σημασία του περιεχομένου, δηλαδή τη σημασιολογία. Έχετε ήδη δει μερικά παραδείγματα στη βασική σελίδα μας HTML, όπως το στοιχείο p που σηματοδοτεί περιεχόμενο παραγράφου. Η HTML δεν ορίζει με ποιον τρόπο θα πρέπει να εμφανιστεί το περιεχόμενο στον φυλλομετρητή αυτός είναι ο ρόλος των CSS (Cascading Style Sheets, επάλληλα φύλλα στυλ). Η HTML5 τονίζει αυτή τη διάκριση πιο εμφατικά από οποιαδήποτε προηγούμενη έκδοση της HTML. Η διάκριση βρίσκεται στον πυρήνα της ίδιας της γλώσσας. Μπορεί λοιπόν να αναρωτιέστε γιατί, εφόσον συμβαίνει αυτό, κάποιο κείμενο στη βασική σελίδα μας HTML ❶ φαίνεται μεγαλύτερο από το υπόλοιπο κείμενο, ή έχει έντονη ή πλάγια γραφή ❷. Πολύ καλή ερώτηση. Ο λόγος είναι ότι ο κάθε φυλλομετρητής Ιστού διαθέτει ένα ενσωματωμένο αρχείο CSS (ένα φύλλο στυλ) που επιβάλλει τον προεπιλεγμένο τρόπο προβολής του κάθε στοιχείου HTML, εκτός κι αν δημιουργήσετε το δικό σας φύλλο στυλ που θα υπερισχύει. Η προεπιλεγμένη αναπαράσταση ποικίλλει ελαφρώς από φυλλομετρητή σε φυλλομετρητή, όμως γενικά είναι αρκετά συνεπής. Το πιο σημαντικό είναι ότι παραμένουν αναλλοίωτες η εσωτερική δομή και η σημασία του περιεχομένου, όπως περιγράφονται από τον κώδικα HTML που δημιουργήσατε. ❶ Το περιεχόμενο της βασικής σελίδας μας μαζί με την προσθήκη μιας δεύτερης παραγράφου στο τέλος. Τα στοιχεία HTML δεν επιβάλλουν τον τρόπο εμφάνισης του περιεχομένου, αλλά απλώς δηλώνουν τη σημασία του. Από την άλλη πλευρά, το ενσωματωμένο φύλλο στυλ του κάθε φυλλομετρητή καθορίζει ποια θα είναι η προεπιλεγμένη εμφάνιση του περιεχομένου ❷.... <body> <article> <h1>the Ephemeral Blue Flax</h1> <img src="blueflax.jpg" width="300" height="175" alt="blue Flax (Linum lewisii)" /> <p>i am continually <em>amazed</em> at the beautiful, delicate <a href="http://en.wikipedia.org/ wiki/linum_lewisii" rel="external" title="learn more about Blue Flax"> Blue Flax</a> that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p> <p><small> Blue Flax Society. </small></p> </article> </body> </html>

27 Τα δομικά στοιχεία των ιστοσελίδων 33 ❷ Το προεπιλεγμένο φύλλο στυλ του φυλλομετρητή αποδίδει τις επικεφαλίδες (τα στοιχεία h1 h6) με διαφορετικό τρόπο από το κανονικό κείμενο, εμφανίζει με πλάγια γραφή το κείμενο em, και χρωματίζει και υπογραμμίζει τους συνδέσμους. Επιπρόσθετα, κάποια στοιχεία ξεκινούν σε δική τους γραμμή (για παράδειγμα, τα h1 και p), ενώ άλλα εμφανίζονται ανάμεσα σε περιεχόμενο που τα περιβάλλει (όπως τα στοιχεία a και em). Το παράδειγμα αυτό περιλαμβάνει μια δεύτερη παράγραφο (τη σημείωση πνευματικών δικαιωμάτων) για να δείξει ξεκάθαρα ότι η κάθε παράγραφος ξεκινά σε ξεχωριστή γραμμή. Μπορείτε εύκολα να αντικαταστήσετε κάποιον ή και όλους αυτούς του κανόνες παρουσίασης χρησιμοποιώντας τα δικά σας φύλλα στυλ. Στοιχεία επιπέδου μπλοκ, εμβόλιμα στοιχεία, και HTML5 Όπως μπορείτε να δείτε, κάποια στοιχεία HTML (για παράδειγμα, τα στοιχεία article, h1, και p) εμφανίζονται σε δική τους γραμμή όπως συμβαίνει με τις παραγράφους ενός βιβλίου, ενώ άλλα (για παράδειγμα, τα a και em) αποδίδονται στην ίδια γραμμή με το υπόλοιπο περιεχόμενο ❷. Και πάλι, αυτό έχει να κάνει με τους προεπιλεγμένους κανόνες στυλ του φυλλομετρητή, και όχι με τα ίδια τα στοιχεία HTML. Ας το αναλύσουμε αυτό λίγο περισσότερο. Πριν από την HTML5, τα περισσότερα στοιχεία κατηγοριοποιούνταν είτε ως επιπέδου μπλοκ (block-level, τα στοιχεία που εμφανίζονται σε δική τους γραμμή), είτε ως εμβόλιμα (inline, τα στοιχεία που εμφανίζονται μέσα σε μια γραμμή κειμένου). Η HTML5 απομακρύνεται από αυτούς τους όρους, επειδή συσχετίζουν τα στοιχεία με την παρουσίαση, που όπως μάθατε δεν είναι ο ρόλος της HTML. Σε αντιδιαστολή, γενικά, τα στοιχεία που προηγουμένως χαρακτηρίζονταν ως εμβόλιμα κατηγοριοποιούνται στην HTML5 ως περιεχόμενο διατύπωσης (phrasing content) δηλαδή πρόκειται για στοιχεία με αντίστοιχο περιεχόμενο τα οποία εμφανίζονταν κυρίως στο εσωτερικό μιας παραγράφου. (Το Κεφάλαιο 4 εστιάζει σχεδόν αποκλειστικά στο περιεχόμενο διατύπωσης. Μπορείτε να δείτε έναν πλήρη κατάλογο στη διεύθυνση Τα παλιά στοιχεία επιπέδου μπλοκ υπάγονται επίσης σε νέες κατηγορίες HTML5 που εστιάζουν στη σημασιολογία τους. Πολλά από αυτά τα στοιχεία αφορούν τα κύρια δομικά μπλοκ και τις επικεφαλίδες του περιεχομένου σας (στο Κεφάλαιο 3 θα μάθετε περισσότερα σχετικά με τις ενότητες περιεχομένου και τα στοιχεία επικεφαλίδων περιεχομένου). Αφού τα είπαμε όλα αυτά, πρέπει να πούμε ότι οι φυλλομετρητές δεν έχουν αλλάξει τους προεπιλεγμένους κανόνες εμφάνισης για τα στοιχεία αυτά, ούτε και θα έπρεπε να το κάνουν. Άλλωστε, πιθανότατα δεν θα θέλετε οι δύο παράγραφοι (τα στοιχεία p) να πέφτουν η μία πάνω στην άλλη, ή το κείμενο em (όπως η λέξη amazed στη

28 34 Κεφάλαιο 1 σελίδα) να σπάει στη μέση την πρόταση και να εμφανίζεται σε δική του γραμμή (το em είναι το στοιχείο που χρησιμοποιείτε για να δώσετε έμφαση σε κάτι). Έτσι, συνήθως οι επικεφαλίδες, οι παράγραφοι, και τα δομικά στοιχεία όπως το article εμφανίζονται σε ξεχωριστή γραμμή, ενώ το περιεχόμενο διατύπωσης εμφανίζεται στην ίδια γραμμή με το περιεχόμενο που το περιβάλλει. Και παρά το ότι η HTML5 δεν χρησιμοποιεί πλέον τους όρους «επίπεδο μπλοκ» και «εμβόλιμο», είναι χρήσιμο να ξέρετε τι σημαίνουν. Είναι πολύ συνηθισμένο να χρησιμοποιούνται οι όροι αυτοί σε εκπαιδευτικά βοηθήματα, αφού ήταν ριζωμένοι στη διάλεκτο της HTML πριν από την HTML5. Υπάρχει περίπτωση να χρησιμοποιήσω περιστασιακά τους όρους αυτούς στο βιβλίο για να δείξω στα γρήγορα αν το στοιχείο εμφανίζεται εξ ορισμού σε δική του γραμμή, ή μοιράζεται την ίδια γραμμή με άλλο περιεχόμενο. Θα καλύψουμε εκτενώς τα φύλλα CSS σε επόμενα κεφάλαια, όμως προς το παρόν πρέπει να γνωρίζετε ότι το φύλλο στυλ, όπως και η σελίδα HTML, είναι απλώς κείμενο, έτσι μπορείτε να το δημιουργείτε με το ίδιο πρόγραμμα διόρθωσης κειμένου όπως και για την HTML. Η εστίαση της HTML5 στη σημασιολογία Η HTML5 δίνει έμφαση στη σημασιολογία HTML, αφήνοντας όλη την οπτική μορφοποίηση για τα φύλλα CSS. Όμως αυτό δεν συνέβαινε πάντα με τις προηγούμενες εκδόσεις της HTML. Τα πρώτα χρόνια του Ιστού δεν υπήρχε κάποια καλή μέθοδος για τη μορφοποίηση σελίδων. Η HTML είχε ήδη ηλικία κάποιων ετών όταν παρουσιάστηκε επίσημα το πρότυπο CSS1, τον Δεκέμβριο του Για να καλύψει στο μεταξύ το κενό, η HTML περιλάμβανε μερικά στοιχεία παρουσίασης των οποίων ο σκοπός ήταν να επιτρέπουν κάποιες βασικές μορφοποιήσεις στο κείμενο, όπως η εφαρμογή έντονης ή πλάγιας γραφής ή η χρήση διαφορετικού μεγέθους από το περιβάλλον κείμενο. Τα στοιχεία αυτά εξυπηρέτησαν τον σκοπό τους για εκείνη την εποχή, όμως δικαιωματικά έπεσαν σε δυσμένεια καθώς αναπτύσσονταν καλύτερες πρακτικές για την κατασκευή ιστοσελίδων. Η κεντρική ιδέα ήταν και σε μεγάλο βαθμό είναι ακόμα ότι η HTML αφορά μόνο την περιγραφή της σημασίας του περιεχομένου, και όχι την εμφάνισή του. Τα στοιχεία παρουσίασης της HTML έρχονταν σε αντίθεση με αυτή τη βέλτιστη πρακτική. Έ- τσι, η HTML 4 αποθάρρυνε τη χρήση τους, συνιστώντας στους δημιουργούς σελίδων να χρησιμοποιούν φύλλα CSS για τη μορφοποίηση του κειμένου και των άλλων στοιχείων της σελίδας. Η HTML5 προχωρά ακόμα παραπέρα εξαλείφει κάποια στοιχεία παρουσίασης και επαναπροσδιορίζει άλλα έτσι ώστε να μεταφέρουν σημασιολογική ερμηνεία, αντί να επιβάλλουν έναν τρόπο παρουσίασης. Ένα τέτοιο παράδειγμα είναι το στοιχείο small. Αρχικά είχε ως στόχο να κάνει το κείμενο μικρότερο από το κανονικό κείμενο. Ό- μως στην HTML5 το στοιχείο small αναπαριστάνει τα «ψιλά γράμματα», όπως στις νομικές υποσημειώσεις. Μπορείτε, αν θέλετε, να χρησιμοποιήσετε κώδικα CSS για να το κάνετε το μεγαλύτερο κείμενο στη σελίδα, όμως αυτό δεν πρόκειται να αλλάξει τη σημασία του περιεχομένου small. Στο μεταξύ, το παλιό αντίθετο του small, το στοιχείο big, δεν υπάρχει στην HTML5. Υπάρχουν και άλλα τέτοια παραδείγματα, τα οποία θα μάθετε στη συνέχεια του βιβλίου. Η HTML5 ορίζει επίσης νέα στοιχεία, όπως τα στοιχεία header, footer, nav, article, section, και πολλά άλλα που εμπλουτίζουν τη σημασιολογία του περιεχομένου σας. Και για αυτά επίσης θα μιλήσουμε αργότερα. Όμως, ανεξάρτητα από το αν χρησιμοποιείτε κάποιο στοιχείο HTML που υπήρχε από το ξεκίνημα της γλώσσας ή κάποιο που πρωτοεμφανίστηκε με την HTML5, ο στόχος σας θα πρέπει να είναι ο ίδιος. Επιλέξτε τα στοιχεία που περιγράφουν καλύτερα τη σημασία του περιεχομένου σας, χωρίς να σας απασχολεί η εμφάνισή τους.

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση

Διαβάστε περισσότερα

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 ΣΤΟΧΟΙ ΕΞΕΤΑΣΗΣ Η ενότητα ECDL WebStarter απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών

Διαβάστε περισσότερα

Βασίλειος Κοντογιάννης ΠΕ19

Βασίλειος Κοντογιάννης ΠΕ19 Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου

Διαβάστε περισσότερα

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας; Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι

Διαβάστε περισσότερα

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής:

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head> Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,

Διαβάστε περισσότερα

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS)

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική

Διαβάστε περισσότερα

Ο Οδηγός γρήγορης εκκίνησης

Ο Οδηγός γρήγορης εκκίνησης Ο Οδηγός γρήγορης εκκίνησης του Microsoft PowerPoint 2013 έχει διαφορετική εμφάνιση από προηγούμενες εκδόσεις. Γι αυτό το λόγο, δημιουργήσαμε αυτόν τον οδηγό για να ελαχιστοποιήσουμε την καμπύλη εκμάθησης.

Διαβάστε περισσότερα

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από

Διαβάστε περισσότερα

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο FrontPage 2003 Πρακτικός Οδηγός Χρήσης Το FrontPage είναι ένα πρόγραμμα δημιουργίας ιστοσελίδων και δικτυακών τόπων που επιτρέπει το σχεδιασμό ιστοσελίδων μέσα από γραφικό περιβάλλον αλλά και την ταυτόχρονη

Διαβάστε περισσότερα

ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΟΥ Explorer & Outlook 2013

ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΟΥ Explorer & Outlook 2013 ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΟΥ Explorer & Outlook 2013 1. Δίκτυα Υπολογιστών και Διαδίκτυο... 3 1.1. Όροι Και Έννοιες... 3 1.2. Ασφάλεια Στο Διαδίκτυο... 5 2. Περιήγηση στον Παγκόσμιο Ιστό 7 Το Περιβάλλον Ενός Φυλλομετρητή...

Διαβάστε περισσότερα

Τίτλος Πακέτου Certified Computer Expert-ACTA

Τίτλος Πακέτου Certified Computer Expert-ACTA Κωδικός Πακέτου ACTA - CCE - 002 Τίτλος Πακέτου Certified Computer Expert-ACTA Εκπαιδευτικές Ενότητες Επεξεργασία Κειμένου - Word Δημιουργία Εγγράφου Προχωρημένες τεχνικές επεξεργασίας κειμένου & αρχείων

Διαβάστε περισσότερα

Δημιουργία. Ιστολογίου (blog) 7/5/2015. Χρυσάνθη Γιομέλου ΚΔΒΜ ΝΙΚΑΙΑΣ

Δημιουργία. Ιστολογίου (blog)  7/5/2015. Χρυσάνθη Γιομέλου ΚΔΒΜ ΝΙΚΑΙΑΣ Δημιουργία 7/5/2015 Ιστολογίου (blog) www.blogger.com Χρυσάνθη Γιομέλου ΚΔΒΜ ΝΙΚΑΙΑΣ ΠΕΡΙΕΧΟΜΕΝΑ TI EINAI TO ΙΣΤΟΛΟΓΙΟ... 2 ΓΙΑΤΙ ΙΣΤΟΛΟΓΙΟ;... 2 ΠΛΕΟΝΕΚΤΗΜΑΤΑ ΤΗΣ ΧΡΗΣΗΣ ΙΣΤΟΛΟΓΙΟΥ... 2 ΔΗΜΙΟΥΡΓΙΑ ΛΟΓΑΡΙΑΣΜΟΥ

Διαβάστε περισσότερα

Οδηγός γρήγορης εκκίνησης

Οδηγός γρήγορης εκκίνησης Οδηγός γρήγορης εκκίνησης Το Microsoft Word 2013 έχει διαφορετική εμφάνιση από προηγούμενες εκδόσεις. Γι αυτό το λόγο, δημιουργήσαμε αυτόν τον οδηγό για να ελαχιστοποιήσουμε την καμπύλη εκμάθησης. Γραμμή

Διαβάστε περισσότερα

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ 1. ΒΑΣΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ ΚΑΙ ΠΕΡΙΒΑΛΛΟΝ ΕΦΑΡΜΟΓΗΣ ΕΠΕΞΕΡΓΑΣΙΑΣ ΚΕΙΜΕΝΟΥ 1.1. Χειρισµός εγγράφων 1.1.1. ηµιουργία, Άνοιγµα, Κλείσιµο, Αποθήκευση εγγράφου 1.1.2. Αποθήκευση εγγράφου µε

Διαβάστε περισσότερα

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες

Διαβάστε περισσότερα

Περιεχόμενα. Κεφάλαιο 1 Εισαγωγή στο PowerPoint 9. Κεφάλαιο 2 Εργασία με κείμενο 41

Περιεχόμενα. Κεφάλαιο 1 Εισαγωγή στο PowerPoint 9. Κεφάλαιο 2 Εργασία με κείμενο 41 Περιεχόμενα Κεφάλαιο 1 Εισαγωγή στο PowerPoint 9 Βασικές έννοιες... 10 Το παράθυρο του PowerPoint... 13 Δημιουργία νέας παρουσίασης... 18 Βασικές εργασίες με διαφάνειες... 24 Προβολές παρουσίασης... 28

Διαβάστε περισσότερα

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Πνευματικά Δικαιώματα 2005 Ίδρυμα ECDL (ECDL Foundation www.ecdl.com) Όλα τα δικαιώματα είναι κατοχυρωμένα. Κανένα μέρος αυτού του εγγράφου δεν μπορεί να αναπαραχθεί

Διαβάστε περισσότερα

Κεφάλαιο 1 Χρήση προτύπου 2. Κεφάλαιο 2 Τροποποίηση μιας παρουσίασης 9. Κεφάλαιο 4 Προσθήκη αντικειμένων 26. Κεφάλαιο 5 Ειδικά εφέ 35

Κεφάλαιο 1 Χρήση προτύπου 2. Κεφάλαιο 2 Τροποποίηση μιας παρουσίασης 9. Κεφάλαιο 4 Προσθήκη αντικειμένων 26. Κεφάλαιο 5 Ειδικά εφέ 35 Περιεχόμενα Κεφάλαιο 1 Χρήση προτύπου 2 Κεφάλαιο 2 Τροποποίηση μιας παρουσίασης 9 Κεφάλαιο 3 Εφαρμογή σχεδίων 19 Κεφάλαιο 4 Προσθήκη αντικειμένων 26 Κεφάλαιο 5 Ειδικά εφέ 35 Κεφάλαιο 6 Κουμπιά ενεργειών

Διαβάστε περισσότερα

Γεωργάκης Αριστείδης ΠΕ20

Γεωργάκης Αριστείδης ΠΕ20 1 Εκκίνηση για πρώτη φορά Όπως συμβαίνει και με τις υπόλοιπες εφαρμογές του OpenOffice, έτσι και το Impress μπορούμε να το εκκινήσουμε μέσω της συντόμευσης που εγκαθίσταται αυτόματα στην επιφάνεια εργασίας

Διαβάστε περισσότερα

Εργασία-3: Παρουσίαση Εργασίας. Ομάδα Α. Προετοιμασία Αναφοράς

Εργασία-3: Παρουσίαση Εργασίας. Ομάδα Α. Προετοιμασία Αναφοράς Εργασία-3: Παρουσίαση Εργασίας Ομάδα Α. Προετοιμασία Αναφοράς Αρκετοί πιστεύουν πως η επιτυχία μιας παρουσίασης είναι δεδομένη εάν ο παρουσιαστής κατέχει το θέμα που πρόκειται να παρουσιάσει και είναι

Διαβάστε περισσότερα

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία Blog στο Wordpress Επιμέλεια: Δέγγλερη Σοφία Περιεχόμενα Μετάβαση στο blog Σύνδεση ως διαχειριστής Πίνακας ελέγχου Εμφάνιση Ρυθμίσεις Άρθρα Σελίδες Πολυμέσα Σύνδεσμοι Widgets Μετάβαση στο blog Πληκτρολογούμε

Διαβάστε περισσότερα

Πρόλογος... 7 ΕΙΔΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ

Πρόλογος... 7 ΕΙΔΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΠΕΡΙΕΧΟΜΕΝΑ Πρόλογος... 7 ΕΙΔΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΘΕΜΑΤΙΚΗ ΕΝΟΤΗΤΑ Α Δομή και λειτουργία προσωπικού υπολογιστή...11 ΘΕΜΑΤΙΚΗ ΕΝΟΤΗΤΑ Β Δομή και χρήση λειτουργικών συστημάτων DOS, UNIX και λειτουργικού

Διαβάστε περισσότερα

Π Ε Ρ Ι Ε Χ Ο Μ Ε Ν Α

Π Ε Ρ Ι Ε Χ Ο Μ Ε Ν Α Π Ε Ρ Ι Ε Χ Ο Μ Ε Ν Α 1 Windows 8.1 1.1 Βασικές Έννοιες Πληροφορικής και Επικοινωνιών Εισαγωγή 19 Τι είναι ο Ηλεκτρονικός Υπολογιστής 20 Κατηγορίες Υπολογιστών 21 Κύρια μέρη ενός Προσωπικού Υπολογιστή

Διαβάστε περισσότερα

ΕΙΔΙΚΟΤΗΤΑ: ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΘΗΜΑ: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΠΛΗΡΟΦΟΡΙΚΗ

ΕΙΔΙΚΟΤΗΤΑ: ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΘΗΜΑ: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΠΛΗΡΟΦΟΡΙΚΗ ΕΙΔΙΚΟΤΗΤΑ: ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΘΗΜΑ: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΠΛΗΡΟΦΟΡΙΚΗ (Σημειώσεις Word) ΕΚΠΑΙΔΕΥΤΕΣ: ΒΑΡΕΛΑΣ ΙΩΑΝΝΗΣ, ΠΟΖΟΥΚΙΔΗΣ ΚΩΝΣΤΑΝΤΙΝΟΣ MICROSOFT WORD (ΕΚΠΑΙΔΕΥΤΙΚΕΣ ΣΗΜΕΙΩΣΕΙΣ) ΠΕΡΙΕΧΟΜΕΝΑ

Διαβάστε περισσότερα

Περιεχόμενα. Εισαγωγή στο Word 2003...9. Βασικές μορφοποιήσεις κειμένων... 41. Κεφάλαιο 1. Κεφάλαιο 2

Περιεχόμενα. Εισαγωγή στο Word 2003...9. Βασικές μορφοποιήσεις κειμένων... 41. Κεφάλαιο 1. Κεφάλαιο 2 Περιεχόμενα Κεφάλαιο 1 Εισαγωγή στο Word 2003...9 Η οθόνη του Word... 9 Δημιουργία νέου εγγράφου... 14 Προσθήκη και διαγραφή κειμένου... 17 Πρώτα επιλογή, μετά εργασία... 18 Εύρεση και αντικατάσταση κειμένου...

Διαβάστε περισσότερα

Περιεχόμενα. Γαβαλάς Δαμιανός

Περιεχόμενα. Γαβαλάς Δαμιανός Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα

Διαβάστε περισσότερα

Δημιουργία προσβάσιμων παρουσιάσεων με χρήση MS-PowerPoint 2010

Δημιουργία προσβάσιμων παρουσιάσεων με χρήση MS-PowerPoint 2010 Δημιουργία προσβάσιμων παρουσιάσεων με χρήση MS-PowerPoint 2010 Άδειες χρήσης Το παρόν υλικό υπόκειται σε άδειες χρήσης Creative Commons. Ανοικτά Ψηφιακά Μαθήματα 2 Περιεχόμενα Εισαγωγή Προσβάσιμες παρουσιάσεις

Διαβάστε περισσότερα

PowerPoint Ένα εργαλείο παρουσίασης

PowerPoint Ένα εργαλείο παρουσίασης Εργασία 7η 2 Αρκετοί πιστεύουν πως η επιτυχία μιας παρουσίασης είναι δεδομένη εάν ο παρουσιαστής κατέχει το θέμα που πρόκειται να παρουσιάσει και είναι σε θέση να χειρίζεται ί ά άνετα έ ένα πρόγραμμα ό

Διαβάστε περισσότερα

ΕΞΕΤΑΣΤΕΑ ΥΛΗ KeyCERT EXPERT: ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Έκδοση 2.0

ΕΞΕΤΑΣΤΕΑ ΥΛΗ KeyCERT EXPERT: ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Έκδοση 2.0 ΕΞΕΤΑΣΤΕΑ ΥΛΗ KeyCERT EXPERT: ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ Έκδοση 2.0 MICROSOFT WORD EXPERT ΓΝΩΣΤΙΚΟ ΑΝΤΙΚΕΙΜΕΝΟ: ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ Το πρόγραμμα Microsoft Word Expert περιλαμβάνει εξαιρετικά χρήσιμες δυνατότητες,

Διαβάστε περισσότερα

Περιεχόμενα. Κεφάλαιο 1 Εισαγωγή στην Access Κεφάλαιο 2 Χειρισμός πινάκων... 27

Περιεχόμενα. Κεφάλαιο 1 Εισαγωγή στην Access Κεφάλαιο 2 Χειρισμός πινάκων... 27 Περιεχόμενα Κεφάλαιο 1 Εισαγωγή στην Access... 9 Γνωριμία με την Access... 12 Δημιουργία βάσης δεδομένων... 22 Άνοιγμα και κλείσιμο βάσης δεδομένων... 24 Ερωτήσεις ανακεφαλαίωσης... 25 Πρακτική εξάσκηση...

Διαβάστε περισσότερα

7.Α.1 Παρουσιάσεις. 7.Α.2 Περιγραφή περιεχομένων της εφαρμογής

7.Α.1 Παρουσιάσεις. 7.Α.2 Περιγραφή περιεχομένων της εφαρμογής Μάθημα 7ο Πολυμέσα 7.Α.1 Παρουσιάσεις Οι παρουσιάσεις είναι μια εφαρμογή που χρησιμεύει στην παρουσίαση των εργασιών μας. Αποτελούν μια συνοπτική μορφή των εργασιών μας. Μέσω δημιουργίας διαφανειών, μορφοποιήσεων

Διαβάστε περισσότερα

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο 1 Γλώσσες Σήµανσης Γλώσσες σήµανσης: Αρχικά για τον καθορισµό εµφάνισης σελίδων, γραµµατοσειρών. Στη συνέχεια επεκτάθηκαν

Διαβάστε περισσότερα

Junior A (Κωδ.Τμήματος AJ1)

Junior A (Κωδ.Τμήματος AJ1) International Diploma in It Skills Foundation for Young Learners Junior A (Κωδ.Τμήματος AJ1) Χρήση Υπολογιστή (Κωδ. AJ1.A 01) 1.1 Γενικές διαδικασίες και ρυθμίσεις 1.1.1 Βασικές λειτουργίες και ρυθμίσεις

Διαβάστε περισσότερα

Εισαγωγή στο Libre Office Παρουσιάσεις με το Impress. Bάιος Κολοφωτιάς Επιστημονικός Συνεργάτης Sweng Lab A.Π.Θ

Εισαγωγή στο Libre Office Παρουσιάσεις με το Impress. Bάιος Κολοφωτιάς Επιστημονικός Συνεργάτης Sweng Lab A.Π.Θ Εισαγωγή στο Libre Office Παρουσιάσεις με το Impress Bάιος Κολοφωτιάς Επιστημονικός Συνεργάτης Sweng Lab A.Π.Θ Εισαγωγικά Οι παρουσιάσεις είναι μια εφαρμογή που χρησιμεύει στην παρουσίαση των εργασιών

Διαβάστε περισσότερα

ΕΞΕΤΑΣΤΕΑ ΥΛΗ - SYLLABUS Version 1.0.1

ΕΞΕΤΑΣΤΕΑ ΥΛΗ - SYLLABUS Version 1.0.1 ΕΞΕΤΑΣΤΕΑ ΥΛΗ - SYLLABUS Version 1.0.1 ΓΝΩΣΤΙΚΑ ΑΝΤΙΚΕΙΜΕΝΑ Χρήση Η/Υ και διαχείριση αρχείων Επεξεργασία κειμένων Υπολογιστικά φύλλα Υπηρεσίες διαδικτύου Βάσεις δεδομένων Παρουσιάσεις ΣΥΣΤΗΜΑ ΕΞΕΤΑΣΕΩΝ

Διαβάστε περισσότερα

Περιεχόμενα. Μέρος 1: Βασικές έννοιες Πληροφορικής και επικοινωνιών Μέρος 2: Χρήση υπολογιστή και διαχείριση αρχείων Πρόλογος...

Περιεχόμενα. Μέρος 1: Βασικές έννοιες Πληροφορικής και επικοινωνιών Μέρος 2: Χρήση υπολογιστή και διαχείριση αρχείων Πρόλογος... Περιεχόμενα Πρόλογος...11 Μέρος 1: Βασικές έννοιες Πληροφορικής και επικοινωνιών... 13 1.1 Εισαγωγή στους υπολογιστές... 15 1.2 Μονάδες μέτρησης... 27 1.3 Οι βασικές λειτουργίες ενός ηλεκτρονικού υπολογιστή...

Διαβάστε περισσότερα

Κατασκευή Ιστολόγιου

Κατασκευή Ιστολόγιου Κατασκευή Ιστολόγιου Τι είναι το ιστολόγιο Τα blog είναι ιστοχώροι ή ιστοσελίδες που ανανεώνονται τακτικά συνήθως σε καθημερινή βάση. Περιέχουν πληροφορίες σχετικές με ένα θέμα και συνήθως χρησιμοποιούνται

Διαβάστε περισσότερα

Περιεχόμενα Πώς να χρησιμοποιήσετε το βιβλίο... 7 Αντί προλόγου... 9 Κεφάλαιο 1: Κεφάλαιο 2: Κεφάλαιο 3: Κεφάλαιο 4: Κεφάλαιο 5: Πώς να δημιουργήσω το Προφίλ μου και να γίνω μέλος στο Facebook;... 15 Τι

Διαβάστε περισσότερα

Επεξεργασία κειμένου: Word 2003

Επεξεργασία κειμένου: Word 2003 Περιεχόμενα Λίγα λόγια από το συγγραφέα...7 Κεφάλαιο 1: Ρυθμίσεις γραμμών εργαλείων και μενού...9 Κεφάλαιο 2: Διαχείριση παραθύρων και προβολές...26 Κεφάλαιο 3: Εύρεση, αντικατάσταση, και μετάβαση σε συγκεκριμένο

Διαβάστε περισσότερα

Περιεχόμενα. Γαβαλάς Δαμιανός Τρέχον status της HTML

Περιεχόμενα. Γαβαλάς Δαμιανός Τρέχον status της HTML Δικτυακά Πολυμέσα ΙΙ Διάλεξη #2 η : Βασικές έννοιες σχεδιασμού στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Τρέχον status της HTML Μετάβαση από την HTML στην XHTML Κλέ Καλές πρακτικές συγγραφής

Διαβάστε περισσότερα

POWERPOINT 2003. Είναι το δημοφιλέστερο πρόγραμμα παρουσιάσεων.

POWERPOINT 2003. Είναι το δημοφιλέστερο πρόγραμμα παρουσιάσεων. POWERPOINT 2003 1. Τι είναι το PowerPoint (ppt)? Είναι το δημοφιλέστερο πρόγραμμα παρουσιάσεων. 2. Τι δυνατότητες έχει? Δημιουργία παρουσίασης. Μορφοποίηση παρουσίασης. Δημιουργία γραφικών. Δημιουργία

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο 2014-2015 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό

Διαβάστε περισσότερα

Περιεχόμενα. 1 Προετοιμασία βιβλίου εργασίας 47. 2 Εργασία με δεδομένα και πίνακες Excel 75. Ευχαριστίες...11. Εισαγωγή στο Microsoft Excel 2010...

Περιεχόμενα. 1 Προετοιμασία βιβλίου εργασίας 47. 2 Εργασία με δεδομένα και πίνακες Excel 75. Ευχαριστίες...11. Εισαγωγή στο Microsoft Excel 2010... Περιεχόμενα Ευχαριστίες...11 Εισαγωγή στο Microsoft Excel 2010...13 Τροποποίηση της εμφάνισης της Κορδέλας...29 Χαρακτηριστικά και συμβάσεις του βιβλίου...35 Χρήση των αρχείων εξάσκησης...37 Βοήθεια...41

Διαβάστε περισσότερα

α2. Αποθήκευση παρουσίασης με διαφορετικό τύπου ή/και σε διαφορετική θέση/ ή/και με διαφορετικό όνομα

α2. Αποθήκευση παρουσίασης με διαφορετικό τύπου ή/και σε διαφορετική θέση/ ή/και με διαφορετικό όνομα Αντικείμενα Αξιολόγησης Κριτήρια Απόδοσης Δεξιότητες που θα εξεταστούν(power point ) 1. Βασικές λειτουργίες & Περιβάλλον εφαρμογής παρουσιάσεων α. Χειρισμός παρουσιάσεωνα1. Δημιουργία, άνοιγμα, Κλείσιμο,

Διαβάστε περισσότερα

Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να

Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να κάνουμε μέσω ενός εξωτερικού αρχείου.το αρχείο αυτό

Διαβάστε περισσότερα

Βασίλειος Κοντογιάννης ΠΕ19

Βασίλειος Κοντογιάννης ΠΕ19 Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου

Διαβάστε περισσότερα

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία Blog στο Wordpress Επιμέλεια: Δέγγλερη Σοφία Περιεχόμενα Μετάβαση στο blog Σύνδεση ως διαχειριστής Πίνακας ελέγχου Εμφάνιση Ρυθμίσεις Άρθρα Σελίδες Πολυμέσα Σύνδεσμοι Μετάβαση στο blog Πληκτρολογούμε στη

Διαβάστε περισσότερα

Βάσεις δεδομένων (Access)

Βάσεις δεδομένων (Access) Βάσεις δεδομένων (Access) Όταν εκκινούμε την Access εμφανίζεται το παρακάτω παράθυρο: Για να φτιάξουμε μια νέα ΒΔ κάνουμε κλικ στην επιλογή «Κενή βάση δεδομένων» στο Παράθυρο Εργασιών. Θα εμφανιστεί το

Διαβάστε περισσότερα

PowerPoint 2007. Δημιουργία βασικής παρουσίασης στο PowerPoint 2007. Καθορισμός του αριθμού των διαφανειών που χρειάζονται

PowerPoint 2007. Δημιουργία βασικής παρουσίασης στο PowerPoint 2007. Καθορισμός του αριθμού των διαφανειών που χρειάζονται PowerPoint 2007 Δημιουργία παρουσίασης Δημιουργία βασικής παρουσίασης στο PowerPoint 2007 Γνωρίστε το χώρο εργασίας του PowerPoint Ονομασία και αποθήκευση της παρουσίασής σας Προσθήκη, αναδιάταξη και διαγραφή

Διαβάστε περισσότερα

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface Copyright 2012-2015 -SYSTEM- All rights reserved 2/180 ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: Εισαγωγή στο Dreamwever Μάθημα 2: Γραμμές εργαλείων document Μάθημα 3: Προετοιμασία τοποθεσίας ιστού Μάθημα 4: Ορισμός τοπικής

Διαβάστε περισσότερα

Ένα διαδικτυακό εργαλείο δημιουργίας παρουσιάσεων

Ένα διαδικτυακό εργαλείο δημιουργίας παρουσιάσεων Ένα διαδικτυακό εργαλείο δημιουργίας παρουσιάσεων Περιεχόμενα 1. Περιγραφή 2. Οδηγίες χρήσης 2.1 Δημιουργία λογαριασμού 2.2 Περιβάλλον εργασίας 2.3 Βασικές λειτουργίες 2.3.1 Εισαγωγή (Insert) 2.3.2 Πλαίσιο

Διαβάστε περισσότερα

Σύγκριση FLASH και HTML 5 HTML 5 σχετικά με την υποστήριξη πολυμέσων

Σύγκριση FLASH και HTML 5 HTML 5 σχετικά με την υποστήριξη πολυμέσων ΓΤΠ61 καθηγητής-σύμβουλος Δημήτριος Ζευγώλης Εργασία του Κ. Μακρόπουλου Σύγκριση FLASH και HTML 5 HTML 5 σχετικά με την υποστήριξη πολυμέσων 1 Εισαγωγή Το έτος 2009 υπολογίζεται ότι περισσότεροι από 1,5

Διαβάστε περισσότερα

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο Το περιβάλλον εργασίας Ανοίγοντας την Ελληνική Έκδοση του FrontPage, για πρώτη φορά, η εικόνα που θα συναντήσουμε είναι αυτή της Εικόνας 1 με τα Μενού Εντολών και τη Γραμμή Εργαλείων, στο πάνω μέρος της

Διαβάστε περισσότερα

HTML5, CSS και JavaScript

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

Διαβάστε περισσότερα

Περιεχόμενα. Περιβάλλον ηλεκτρονικού υπολογιστή...9 Επιφάνεια εργασίας...12 Διαχείριση αρχείων...15 Ιοί Η/Υ...21 Διαχείριση εκτυπώσεων...

Περιεχόμενα. Περιβάλλον ηλεκτρονικού υπολογιστή...9 Επιφάνεια εργασίας...12 Διαχείριση αρχείων...15 Ιοί Η/Υ...21 Διαχείριση εκτυπώσεων... Περιεχόμενα Περιβάλλον ηλεκτρονικού υπολογιστή...9 Επιφάνεια εργασίας...12 Διαχείριση αρχείων...15 Ιοί Η/Υ...21 Διαχείριση εκτυπώσεων...22 Περιβάλλον ηλεκτρονικού υπολογιστή...23 Επιφάνεια εργασίας...26

Διαβάστε περισσότερα

HTML Εργαστήριο 5. Δομή εγγράφου

HTML Εργαστήριο 5. Δομή εγγράφου Ετικέτα HTML 5 HTML Εργαστήριο 5. Δομή εγγράφου 1. Αρχικά, θα πρέπει να ορίσετε ότι η σελίδα που ακολουθεί είναι τύπου html 5. Αυτό μπορεί να επιτευχθεί προσθέτοντας στην δομή που ήδη γνωρίζετε και πριν

Διαβάστε περισσότερα

Ανοιχτά Ακαδημαϊκά Μαθήματα στο ΠΑΜΑΚ

Ανοιχτά Ακαδημαϊκά Μαθήματα στο ΠΑΜΑΚ ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ ΠΑΝΕΠΙΣΤΗΜΙΟ ΜΑΚΕΔΟΝΙΑΣ Ανοιχτά Ακαδημαϊκά Μαθήματα στο ΠΑΜΑΚ Σεμινάριο Ενημέρωσης: 26 Σεπτεμβρίου 2013 Επιστημονικός Υπεύθυνος Έργου: Καθηγητής Μάνος Ρουμελιώτης Άδειες Χρήσης Το παρόν

Διαβάστε περισσότερα

1.1 Βασικές Έννοιες της Πληροφορικής Εισαγωγή 21 Τι είναι ο Ηλεκτρονικός Υπολογιστής 22 Υλικό (Hardware) - Λογισµικό (Software) 23 Ιστορική Εξέλιξη

1.1 Βασικές Έννοιες της Πληροφορικής Εισαγωγή 21 Τι είναι ο Ηλεκτρονικός Υπολογιστής 22 Υλικό (Hardware) - Λογισµικό (Software) 23 Ιστορική Εξέλιξη Π Ε Ρ Ι Ε Χ Ο Μ Ε Ν Α Μαθαίνετε Εύκολα Microsoft Office 2003 1 Εισαγωγή στην Πληροφορική 1.1 Βασικές Έννοιες της Πληροφορικής Εισαγωγή 21 Τι είναι ο Ηλεκτρονικός Υπολογιστής 22 Υλικό (Hardware) - Λογισµικό

Διαβάστε περισσότερα

Ενότητα 3 Επεξεργασία Κειμένου

Ενότητα 3 Επεξεργασία Κειμένου Ενότητα 3 Επεξεργασία Κειμένου Εξεταστέα Ύλη (Syllabus) Έκδοση 4.0 Πνευματικά Δικαιώματα 2003 Ίδρυμα ECDL (ECDL Foundation www.ecdl.com) Όλα τα δικαιώματα είναι κατοχυρωμένα. Κανένα μέρος αυτού του εγγράφου

Διαβάστε περισσότερα

Εξεταστέα Ύλη (Syllabus) Έκδοση 5.0

Εξεταστέα Ύλη (Syllabus) Έκδοση 5.0 Εξεταστέα Ύλη (Syllabus) Έκδοση 5.0 Πνευματικά Δικαιώματα 2007 Ίδρυμα ECDL (ECDL Foundation www.ecdl.org) Όλα τα δικαιώματα είναι κατοχυρωμένα. Κανένα μέρος αυτού του εγγράφου δεν μπορεί να αναπαραχθεί

Διαβάστε περισσότερα

Οδηγός γρήγορης εκκίνησης

Οδηγός γρήγορης εκκίνησης Οδηγός γρήγορης εκκίνησης Το Microsoft Visio 2013 έχει διαφορετική εμφάνιση από προηγούμενες εκδόσεις. Γι αυτό το λόγο, δημιουργήσαμε αυτόν τον οδηγό για να ελαχιστοποιήσουμε την καμπύλη εκμάθησης. Ενημερωμένα

Διαβάστε περισσότερα

Ελέγξτε την ταινία σας

Ελέγξτε την ταινία σας Ελέγξτε την ταινία σας Σε αυτές τις ασκήσεις, θα κάνετε εισαγωγή μιας ταινίας και θα χρησιμοποιήσετε τις επιλογές που παρουσιάστηκαν στο μάθημα. Άσκηση 1: Εισαγωγή αρχείου ταινίας 1. Κάντε κλικ στη μικρογραφία

Διαβάστε περισσότερα

Δραστηριότητα 9 Δημιουργία και διαχείριση blog μέσω του Blogger. Δημιουργία ιστολογίου

Δραστηριότητα 9 Δημιουργία και διαχείριση blog μέσω του Blogger. Δημιουργία ιστολογίου Δραστηριότητα 9 Δημιουργία και διαχείριση blog μέσω του Blogger Δημιουργία ιστολογίου 1. Ανοίξτε το φυλλομετρητή Google Chrome, πληκτρολογήστε στη γραμμή διευθύνσεων τη διεύθυνση www.blogger.com και πατήστε

Διαβάστε περισσότερα

Περιεχόμενα. Περιεχόμενα...v

Περιεχόμενα. Περιεχόμενα...v Περιεχόμενα Περιεχόμενα...v Κεφάλαιο 1: Ρυθμίσεις γραμμών εργαλείων και μενού...1 Κεφάλαιο 2: Διαχείριση παραθύρων και προβολές...18 Κεφάλαιο 3: Εύρεση, αντικατάσταση, και μετάβαση σε συγκεκριμένο στοιχείο...35

Διαβάστε περισσότερα

Έργα. Οδηγός γρήγορης εκκίνησης. Παρακολούθηση των εργασιών σας. Προβολή εργασιών σε λωρίδα χρόνου. Κοινή χρήση του έργου σας με άλλα άτομα

Έργα. Οδηγός γρήγορης εκκίνησης. Παρακολούθηση των εργασιών σας. Προβολή εργασιών σε λωρίδα χρόνου. Κοινή χρήση του έργου σας με άλλα άτομα Έργα Οδηγός γρήγορης εκκίνησης Παρακολούθηση των εργασιών σας Η λίστα εργασιών του SharePoint είναι μια εύχρηστη λύση για να παρακολουθείτε όλα όσα χρειάζεται να γίνουν σε ένα έργο. Μπορείτε να προσθέτετε

Διαβάστε περισσότερα

Επεξεργασία Εικόνας. Κωδικός Πακέτου ACTA - CGD+CWD Τίτλος Πακέτου ΕΠΕΞΕΡΓΑΣΙΑ ΕΙΚΟΝΑΣ - ΣΧΕ ΙΑΣΗ ΙΣΤΟΣΕΛΙ ΑΣ. Εκπαιδευτικές Ενότητες

Επεξεργασία Εικόνας. Κωδικός Πακέτου ACTA - CGD+CWD Τίτλος Πακέτου ΕΠΕΞΕΡΓΑΣΙΑ ΕΙΚΟΝΑΣ - ΣΧΕ ΙΑΣΗ ΙΣΤΟΣΕΛΙ ΑΣ. Εκπαιδευτικές Ενότητες Κωδικός Πακέτου ACTA - CGD+CWD - 013 Τίτλος Πακέτου ΕΠΕΞΕΡΓΑΣΙΑ ΕΙΚΟΝΑΣ - ΣΧΕ ΙΑΣΗ ΙΣΤΟΣΕΛΙ ΑΣ Εκπαιδευτικές Ενότητες ΕΠΕΞΕΡΓΑΣΙΑ ΕΙΚΟΝΑΣ ιαχείριση Αρχείων Εκτυπώσεις Βασικές Λειτουργίες Επιλογές τµηµάτων

Διαβάστε περισσότερα

Σημειώσεις στο PowerPoint

Σημειώσεις στο PowerPoint Σημειώσεις στο PowerPoint Τι είναι το PowerPoint; Το PowerPoint 2010 είναι μια οπτική και γραφική εφαρμογή που χρησιμοποιείται κυρίως για τη δημιουργία παρουσιάσεων. Με το PowerPoint, μπορείτε να δημιουργήσετε

Διαβάστε περισσότερα

Αλλαγή της εμφάνισης κειμένου: μέγεθος γραμματοσειράς, είδος γραμματοσειράς

Αλλαγή της εμφάνισης κειμένου: μέγεθος γραμματοσειράς, είδος γραμματοσειράς 3.3.1.1 Αλλαγή της εμφάνισης κειμένου: μέγεθος γραμματοσειράς, είδος γραμματοσειράς Γραμματοσειρές Η λέξη γραμματοσειρά αναφέρεται στο στυλ που εμφανίζονται τα γράμματα. Παρακάτω ακολουθούν κάποια παραδείγματα,

Διαβάστε περισσότερα

GreekLUG Ελεύθερο Λογισμικό & Λογισμικό Ανοικτού Κώδικα

GreekLUG Ελεύθερο Λογισμικό & Λογισμικό Ανοικτού Κώδικα GreekLUG Ελεύθερο Λογισμικό & Λογισμικό Ανοικτού Κώδικα Μάθημα 6ο Σουίτα Γραφείου LibreOffice 2 Ύλη Μαθημάτων V Μαθ. 5/6 : Σουίτα Γραφείου LibreOffice LibreOffice Γενικά, Κειμενογράφος - LibreOffice Writer,

Διαβάστε περισσότερα

Εργαλεία Ανάπτυξης Εφαρμογών Internet I

Εργαλεία Ανάπτυξης Εφαρμογών Internet I Εργαλεία Ανάπτυξης Εφαρμογών Internet I 1: Εισαγωγή στον Παγκόσμιο Ιστό Σταύρος Καμμάς Δομή μαθήματος 1. Εισαγωγή στον Παγκόσμιο Ιστό (www, υπερκείμενο, υπερσύνδεσμοι, υπερμέσα, πολυμέσα, πλοηγοί, παραδείγματα)

Διαβάστε περισσότερα

ΟΔΗΓΙΕΣ ΚΕΙΜΕΝΟΓΡΑΦΟΥ 2007

ΟΔΗΓΙΕΣ ΚΕΙΜΕΝΟΓΡΑΦΟΥ 2007 1. ΓΡΑΜΜΗ ΜΕΝΟΥ ΟΔΗΓΙΕΣ ΚΕΙΜΕΝΟΓΡΑΦΟΥ 2007 2. ΓΡΑΜΜΗ ΕΡΓΑΛΕΙΩΝ Κάθε μενού έχει τις δικές της δυνατότητες, όπως για παράδειγμα μόλις πατήσετε το κουμπί κεντρική βγαίνουν τα εικονίδια των δυνατοτήτων που

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Εργαλεία. Επικοινωνίας & Συνεργασίας Πανεπιστήμιο Κύπρου

Εργαλεία. Επικοινωνίας & Συνεργασίας Πανεπιστήμιο Κύπρου Εργαλεία Επικοινωνίας & Συνεργασίας Πανεπιστήμιο Κύπρου Ιούλιος 2017 Copyright 2017 Πανεπιστήμιο Κύπρου. Όλα τα πνευματικά δικαιώματα κατοχυρωμένα. Δημιουργός: Λευτέρης Γ. Ζαχαρία Σ ε λ ί δ α 1 Πίνακας

Διαβάστε περισσότερα

4. Γνωστικά Αντικείμενα και Αντίστοιχες Γνώσεις/Δεξιότητες προς Εξέταση

4. Γνωστικά Αντικείμενα και Αντίστοιχες Γνώσεις/Δεξιότητες προς Εξέταση Κωδ.: CSR-APDX2C Ισχύς: 01/10/2014 Έκδοση: 01 Σελίδα 1 από 8 Σύνταξη: Υπεύθυνος Διαχείρισης Ποιότητας Έγκριση: Διευθύνων Σύμβουλος 1. Γενικές Προδιαγραφές Πιστοποιητικών Οι ειδικές απαιτήσεις για την πιστοποίηση

Διαβάστε περισσότερα

Απαντήστε στις παρακάτω ερωτήσεις πολλαπλής επιλογής (μόνο μία ερώτηση είναι σωστή):

Απαντήστε στις παρακάτω ερωτήσεις πολλαπλής επιλογής (μόνο μία ερώτηση είναι σωστή): Απαντήστε στις παρακάτω ερωτήσεις πολλαπλής επιλογής (μόνο μία ερώτηση είναι σωστή): 1. Ο Παγκόσμιος Ιστός (world wide web): a. Ταυτίζεται με το Internet b. Είναι υπηρεσία διαχείρισης και πρόσβασης σε

Διαβάστε περισσότερα

Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες

Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες 1 η Ερώτηση (Ορισμός): Τι είναι το Διαδίκτυο; Διαδίκτυο είναι το παγκόσμιο δίκτυο όλων των επιμέρους δικτύων που έχουν συμφωνήσει σε κοινούς κανόνες επικοινωνίας και

Διαβάστε περισσότερα

6 Εισαγωγή στο Wordpress 3.x

6 Εισαγωγή στο Wordpress 3.x Περιεχόμενα 1 Εγκατάσταση του WordPress... 11 Ελάχιστες απαιτήσεις... 11 Easy PHP... 12 Εγκατάσταση Easy PHP... 12 Βήματα εγκατάστασης EasyPHP με εικόνες... 13 Το EasyPHP στα Ελληνικά... 17 Κατέβασμα και

Διαβάστε περισσότερα

ΧΡΗΣΗ Η/Υ ΚΑΙ ΔΙΑΧΕΙΡΙΣΗ ΑΡΧΕΙΩΝ

ΧΡΗΣΗ Η/Υ ΚΑΙ ΔΙΑΧΕΙΡΙΣΗ ΑΡΧΕΙΩΝ ΧΡΗΣΗ Η/Υ ΚΑΙ ΔΙΑΧΕΙΡΙΣΗ ΑΡΧΕΙΩΝ 1. ΠΕΡΙΒΑΛΛΟΝ ΗΛΕΚΤΡΟΝΙΚΟΥ ΥΠΟΛΟΓΙΣΤΗ 1.1. Βασικές Λειτουργίες και Ρυθµίσεις 1.1.1 Εκκίνηση, Τερµατισµός, Επανεκκίνηση του Η/Υ ακολουθώντας τις κατάλληλες διαδικασίες 1.1.2

Διαβάστε περισσότερα

Χρήση υπολογιστή και διαχείριση αρχείων..15

Χρήση υπολογιστή και διαχείριση αρχείων..15 150 Περιεχ μενα Ενότητα 1 Χρήση υπολογιστή και διαχείριση αρχείων..15 Κεφάλαιο 1 Εργασία με τα Windows 98... 17 Το περιβάλλον των Windows 98...18 Χρήση του πληκτρολογίου...19 Χειρισμοί με το ποντίκι...22

Διαβάστε περισσότερα

Περιεχόμενα. 1 Εισαγωγή: Tο βιβλίο Τι νέο υπάρχει στο Excel Πρώτα βήματα στο Excel Ευχαριστίες...

Περιεχόμενα. 1 Εισαγωγή: Tο βιβλίο Τι νέο υπάρχει στο Excel Πρώτα βήματα στο Excel Ευχαριστίες... Περιεχόμενα Ευχαριστίες... 13 1 Εισαγωγή: Tο βιβλίο... 15 Χωρίς τεχνικούς όρους!... 15 Σύντομη παρουσίαση... 16 Μερικές συμβάσεις... 18 Μία τελευταία λέξη (ή και περισσότερες)... 18 2 Τι νέο υπάρχει στο

Διαβάστε περισσότερα

Πρότυπα βιβλίων εργασίας και ονόματα κελιών

Πρότυπα βιβλίων εργασίας και ονόματα κελιών Περιεχόμενα Λίγα λόγια από το συγγραφέα...7 Κεφάλαιο 1: Ρυθμίσεις γραμμών εργαλείων και μενού...9 Κεφάλαιο 2: Διαχείριση παραθύρων και προβολές...25 Κεφάλαιο 3: Εισαγωγή δεδομένων...44 Κεφάλαιο 4: Προσαρμογή

Διαβάστε περισσότερα

ΗΛΕΚΤΡΟΝΙΚΟ ΣΥΣΤΗΜΑ ΥΠΟΒΟΛΗΣ ΜΗΧΑΝΟΓΡΑΦΙΚΟΥ ΔΕΛΤΙΟΥ

ΗΛΕΚΤΡΟΝΙΚΟ ΣΥΣΤΗΜΑ ΥΠΟΒΟΛΗΣ ΜΗΧΑΝΟΓΡΑΦΙΚΟΥ ΔΕΛΤΙΟΥ ΗΛΕΚΤΡΟΝΙΚΟ ΣΥΣΤΗΜΑ ΥΠΟΒΟΛΗΣ ΜΗΧΑΝΟΓΡΑΦΙΚΟΥ ΔΕΛΤΙΟΥ ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ ΥΠΟΨΗΦΙΟΥ ΕΠΑΛ Α Έκδοση 1.0, Ιούνιος 2011 ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ ΥΠΟΥΡΓΕΙΟ ΠΑΙΔΕΙΑΣ ΔΙΑ ΒΙΟΥ ΜΑΘΗΣΗΣ ΚΑΙ ΘΡΗΣΚΕΥΜΑΤΩΝ ΛΙΣΤΑ ΣΧΗΜΑΤΩΝ ΠΙΝΑΚΑΣ

Διαβάστε περισσότερα

Άσκηση 5 Firefox Αποθήκευση αρχείων

Άσκηση 5 Firefox Αποθήκευση αρχείων Άσκηση 5 Firefox Αποθήκευση αρχείων Παρουσίαση Γραμμών Εργαλείων Ανοίγουμε τον περιηγητή ιστού Firefox. Αποθήκευση εικόνων Ανοίγουμε την σελίδα www.google.gr Στην πάνω αριστερά γωνία κάνουμε αριστερό κλικ

Διαβάστε περισσότερα

Περιεχόμενα. Δημιουργία σύνδεσης... 27 5. ΤΙ ΕΙΝΑΙ ΙΣΤΟΣΕΛΙΔΕΣ ΚΑΙ ΤΙ ΤΟΠΟΘΕΣΙΕΣ ΙΣΤΟΥ... 37. Γνωριμία με μια ιστοσελίδα:... 38

Περιεχόμενα. Δημιουργία σύνδεσης... 27 5. ΤΙ ΕΙΝΑΙ ΙΣΤΟΣΕΛΙΔΕΣ ΚΑΙ ΤΙ ΤΟΠΟΘΕΣΙΕΣ ΙΣΤΟΥ... 37. Γνωριμία με μια ιστοσελίδα:... 38 Περιεχόμενα ΠΡΟΛΟΓΟΣ... 11 ΔΙΑΔΙΚΤΥΟ... 13 1. ΙΣΤΟΡΙΑ ΤΟΥ ΔΙΑΔΙΚΤΥΟΥ... 15 2. ΤΙ ΕΙΝΑΙ ΤΟ ΔΙΑΔΙΚΤΥΟ INTERNET;... 16 3. ΤΙ ΠΡΟΣΦΕΡΕΙ ΤΟ ΔΙΑΔΙΚΤΥΟ, ΤΙ ΜΠΟΡΕΙ ΝΑ ΒΡΕΙ ΚΑΝΕΙΣ... 19 4. ΤΙ ΑΠΑΙΤΕΙΤΑΙ ΓΙΑ ΝΑ

Διαβάστε περισσότερα

Υπηρεσία Ιστοτόπου - Ιστολογίου

Υπηρεσία Ιστοτόπου - Ιστολογίου Πολυτεχνείο Κρήτης Διεύθυνση Τηλεπικοινωνιών, Δικτύων και Υπολογιστικής Υποδομής Τμήμα Εκπαιδευτικής Υπολογιστικής Υποδομής Υπηρεσία Ιστοτόπου - Ιστολογίου 1. Εισαγωγή... 3 2. Βασικές γνώσεις για τη δημιουργία

Διαβάστε περισσότερα

Εισαγωγή Κεφάλαιο 1: Εγκατάσταση της Access Κεφάλαιο 2: Βάσεις δεδομένων και δομικά στοιχεία της Access

Εισαγωγή Κεφάλαιο 1: Εγκατάσταση της Access Κεφάλαιο 2: Βάσεις δεδομένων και δομικά στοιχεία της Access ΠΕΡΙΕΧΟΜΕΝΑ Εισαγωγή...15 Κεφάλαιο 1: Εγκατάσταση της Access 2002...17 Τι είναι το Office XP;...17 Τεχνικές απαιτήσεις του Office XP...17 Πρόσθετα απαιτούμενα για την αξιοποίηση εξειδικευμένων χαρακτηριστικών...18

Διαβάστε περισσότερα

Λίγα λόγια από το συγγραφέα Κεφάλαιο 1: PowerPoint Κεφάλαιο 2: Εκκίνηση του PowerPoint... 13

Λίγα λόγια από το συγγραφέα Κεφάλαιο 1: PowerPoint Κεφάλαιο 2: Εκκίνηση του PowerPoint... 13 Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Κεφάλαιο 1: PowerPoint... 9 Κεφάλαιο 2: Εκκίνηση του PowerPoint... 13 Κεφάλαιο 3: Δημιουργία νέας παρουσίασης... 27 Κεφάλαιο 4: Μορφοποίηση κειμένου παρουσίασης...

Διαβάστε περισσότερα

Έκδοση: 1.0. με το. Ασημίνα

Έκδοση: 1.0. με το. Ασημίνα Έκδοση: 1.0 Σύντομες οδηγίες για τη δημιουργία προσβάσιμων εγγράφων με το MS-Word 20100 Ασημίνα Σπανίδου και Γεώργιος Κουρουπέτρογλου aspanidou@di.uoa.gr koupe@di.uoa.gr Έργο «Κεντρικό Μητρώο Ελληνικών

Διαβάστε περισσότερα

Διαδικτυακό Περιβάλλον Διαχείρισης Ασκήσεων Προγραμματισμού

Διαδικτυακό Περιβάλλον Διαχείρισης Ασκήσεων Προγραμματισμού ΠΑΝΕΠΙΣΤΗΜΙΟ ΜΑΚΕΔΟΝΙΑΣ ΔΙΑΤΜΗΜΑΤΙΚΟ ΜΕΤΑΠΤΥΧΙΑΚΟ ΠΡΟΓΡΑΜΜΑ ΣΤΑ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ Διπλωματική Εργασία με θέμα: Διαδικτυακό Περιβάλλον Διαχείρισης Ασκήσεων Προγραμματισμού Καραγιάννης Ιωάννης Α.Μ.

Διαβάστε περισσότερα

Γιώργος Χρ. Μακρής. Σύγχρονες Γλώσσες Σήμανσης του Διαδικτύου. Αναπαράσταση Μαθηματικών κειμένων στο διαδίκτυο. Η Γλώσσα MathML

Γιώργος Χρ. Μακρής. Σύγχρονες Γλώσσες Σήμανσης του Διαδικτύου. Αναπαράσταση Μαθηματικών κειμένων στο διαδίκτυο. Η Γλώσσα MathML Σύγχρονες Γλώσσες Σήμανσης του Διαδικτύου. Αναπαράσταση Μαθηματικών κειμένων στο διαδίκτυο. Η Γλώσσα MathML Γιώργος Χρ. Μακρής Θεσσαλονίκη, Μάρτιος 2012 Αναπαράσταση Μαθηματικών Κειμένων στο διαδίκτυο

Διαβάστε περισσότερα

Λίγα λόγια από το συγγραφέα Κεφάλαιο 1: Microsoft Excel Κεφάλαιο 2: Η δομή ενός φύλλου εργασίας... 26

Λίγα λόγια από το συγγραφέα Κεφάλαιο 1: Microsoft Excel Κεφάλαιο 2: Η δομή ενός φύλλου εργασίας... 26 Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Κεφάλαιο 1: Microsoft Excel 2002... 9 Κεφάλαιο 2: Η δομή ενός φύλλου εργασίας... 26 Κεφάλαιο 3: Δημιουργία νέου βιβλίου εργασίας και καταχώριση δεδομένων...

Διαβάστε περισσότερα

Οδηγός γρήγορης εκκίνησης

Οδηγός γρήγορης εκκίνησης Οδηγός γρήγορης εκκίνησης Το Microsoft Publisher 2013 έχει διαφορετική εμφάνιση από προηγούμενες εκδόσεις. Γι αυτό το λόγο, δημιουργήσαμε αυτόν τον οδηγό για να ελαχιστοποιήσουμε την καμπύλη εκμάθησης.

Διαβάστε περισσότερα

Πνευματικά Δικαιώματα 2013 Ίδρυμα ECDL (ECDL Foundation - www.ecdl.org)

Πνευματικά Δικαιώματα 2013 Ίδρυμα ECDL (ECDL Foundation - www.ecdl.org) PEOPLECERT Hellas A.E - Φορέας Πιστοποίησης Ανθρώπινου Δυναμικού Κοραή 3, 105 64 Αθήνα, Τηλ.: 210 372 9100, Fax: 210 372 9101, e-mail: info@peoplecert.org, www.peoplecert.org Πνευματικά Δικαιώματα 2013

Διαβάστε περισσότερα

ΓΝΩΣΤΙΚΑ ΑΝΤΙΚΕΙΜΕΝΑ ΟΕΕΚ ΜΕ ΑΝΑΛΥΤΙΚΗ ΠΡΟΣΘΗΚΗ MICROSOFT OFFICE SPECIALIST

ΓΝΩΣΤΙΚΑ ΑΝΤΙΚΕΙΜΕΝΑ ΟΕΕΚ ΜΕ ΑΝΑΛΥΤΙΚΗ ΠΡΟΣΘΗΚΗ MICROSOFT OFFICE SPECIALIST ΓΝΩΣΤΙΚΑ ΑΝΤΙΚΕΙΜΕΝΑ ΟΕΕΚ ΜΕ ΑΝΑΛΥΤΙΚΗ ΠΡΟΣΘΗΚΗ MICROSOFT OFFICE SPECIALIST ΑΡΘΡΟ 49. ΓΝΩΣΤΙΚΟ ΑΝΤΙΚΕΙΜΕΝΟ: ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ 1. Βασικές Λειτουργίες και Περιβάλλον Εφαρµογής Επεξεργασίας Κειµένου α.

Διαβάστε περισσότερα

Animation με χρήση HTML 5. Στέλιος Σκουρλής

Animation με χρήση HTML 5. Στέλιος Σκουρλής Animation με χρήση HTML 5 Στέλιος Σκουρλής Τι είναι η HTML???? Με απλά λόγια, μία ιστοσελίδα (HTML αρχείο) ) είναι ένα αρχείο κειμένου που δημιουργήθηκε χρησιμοποιώντας Hypertext Markup Language (HTML)

Διαβάστε περισσότερα

1 Εισαγωγή στην Πληροφορική

1 Εισαγωγή στην Πληροφορική ΠΕΡΙΕΧΟΜΕΝΑ Χρήση Ηλεκτρονικού Υπολογιστή 1 Εισαγωγή στην Πληροφορική 1.1 Βασικές Έννοιες της Πληροφορικής Εισαγωγή 17 Τι είναι ο Ηλεκτρονικός Υπολογιστής 18 Υλικό Λογισµικό 19 Ιστορική Εξέλιξη των Η/Υ

Διαβάστε περισσότερα

Περιεχόμενα. Αντί προλόγου Πώς να χρησιμοποιήσετε το βιβλίο Κεφάλαιο 1: Πώς δημιουργώ το Προφίλ μου στο Facebook;...

Περιεχόμενα. Αντί προλόγου Πώς να χρησιμοποιήσετε το βιβλίο Κεφάλαιο 1: Πώς δημιουργώ το Προφίλ μου στο Facebook;... Περιεχόμενα Αντί προλόγου... 7 Πώς να χρησιμοποιήσετε το βιβλίο... 13 Κεφάλαιο 1: Πώς δημιουργώ το Προφίλ μου στο Facebook;...15 Κεφάλαιο 2: Τι βλέπω στην οθόνη μου όταν ολοκληρώσω τη δημιουργία του Προφίλ

Διαβάστε περισσότερα

Εισαγωγή στο πρόγραμμα Microsoft word 2003

Εισαγωγή στο πρόγραμμα Microsoft word 2003 Εισαγωγή στο πρόγραμμα Microsoft word 2003 Έναρξη 1. Εκκίνηση του προγράμματος Για να ξεκινήσουμε το Word, πατάμε στο κουμπί Εναρξη και από το μενού που εμφανίζεται επιλέγουμε Προγράμματα και Microsoft

Διαβάστε περισσότερα

ΕΞΕΤΑΣΤΕΑ ΥΛΗ (SYLLABUS) INTERMEDIATE Επεξεργασία Κειμένου ΕΚΔΟΣΗ 1.0. Διεύθυνση: Ασκληπιού 18 Τηλέφωνο: 215.5515254

ΕΞΕΤΑΣΤΕΑ ΥΛΗ (SYLLABUS) INTERMEDIATE Επεξεργασία Κειμένου ΕΚΔΟΣΗ 1.0. Διεύθυνση: Ασκληπιού 18 Τηλέφωνο: 215.5515254 ΕΞΕΤΑΣΤΕΑ ΥΛΗ (SYLLABUS) INTERMEDIATE Επεξεργασία Κειμένου ΕΚΔΟΣΗ 1.0 ΤΙ ΕΙΝΑΙ ΤΟ INTERMEDIATE Το Intermediate είναι εστιασμένο σε γνώσεις πληροφορικής και χρήσης ηλεκτρονικών υπολογιστών και περιλαμβάνει

Διαβάστε περισσότερα

ΗΛΕΚΤΡΟΝΙΚΟ ΣΥΣΤΗΜΑ ΥΠΟΒΟΛΗΣ ΜΗΧΑΝΟΓΡΑΦΙΚΟΥ ΔΕΛΤΙΟΥ

ΗΛΕΚΤΡΟΝΙΚΟ ΣΥΣΤΗΜΑ ΥΠΟΒΟΛΗΣ ΜΗΧΑΝΟΓΡΑΦΙΚΟΥ ΔΕΛΤΙΟΥ ΗΛΕΚΤΡΟΝΙΚΟ ΣΥΣΤΗΜΑ ΥΠΟΒΟΛΗΣ ΜΗΧΑΝΟΓΡΑΦΙΚΟΥ ΔΕΛΤΙΟΥ ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ ΥΠΟΨΗΦΙΟΥ ΓΕΛ & ΕΠΑΛ Β Έκδοση 1.0, Ιούνιος 2012 ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ ΥΠΟΥΡΓΕΙΟ ΠΑΙΔΕΙΑΣ ΔΙΑ ΒΙΟΥ ΜΑΘΗΣΗΣ ΚΑΙ ΘΡΗΣΚΕΥΜΑΤΩΝ ΛΙΣΤΑ ΣΧΗΜΑΤΩΝ

Διαβάστε περισσότερα