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

Μέγεθος: 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, ο στόχος σας θα πρέπει να είναι ο ίδιος. Επιλέξτε τα στοιχεία που περιγράφουν καλύτερα τη σημασία του περιεχομένου σας, χωρίς να σας απασχολεί η εμφάνισή τους.

Γαβαλάς Δαμιανός 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 προσδιορίζει τη βασική

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Π Ε Ρ Ι Ε Χ Ο Μ Ε Ν Α

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Σπουδές 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: Ορισμός τοπικής

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

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

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

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

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

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

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

Περιεχόμενα. 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Dreamweaver. Adobe ΒHΜΑ ΠΡΟΣ ΒHΜΑ. Εκδόσεις: Μ. Γκιούρδας. Απόδοση: Αγαμέμνων Μήλιος Μηχανικός Λογισμικού

Dreamweaver. Adobe ΒHΜΑ ΠΡΟΣ ΒHΜΑ. Εκδόσεις: Μ. Γκιούρδας. Απόδοση: Αγαμέμνων Μήλιος Μηχανικός Λογισμικού Adobe Dreamweaver CC ΒHΜΑ ΠΡΟΣ ΒHΜΑ Απόδοση: Αγαμέμνων Μήλιος Μηχανικός Λογισμικού Εκδόσεις: Μ. Γκιούρδας Ζωοδόχου Πηγής 70-74 Τηλ.: 210 3630219 106 81 Αθήνα, 2014 www.mgiurdas.gr Τίτλος Πρωτοτύπου: Adobe

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

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

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ 1. ΔΗΜΙΟΥΡΓΙΑ ΕΓΓΡΑΦΩΝ ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ 1.1. Ορισµός εγγράφου, προτύπου, πρωτεύοντος και δευτερεύοντος εγγράφου 1.2. Πρότυπα 1.2.1. Δηµιουργία, µεταβολή, χρήση και διαγραφή προτύπων εγγράφων 1.2.2.

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

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες

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

ΕΞΕΤΑΣΤΕΑ ΥΛΗ (SYLLABUS) MASTER IN OFFICE microsoft word ΕΚΔΟΣΗ 1.0. Σόλωνος 108,Τηλ. 210.3387190 Φαξ 210.3634576

ΕΞΕΤΑΣΤΕΑ ΥΛΗ (SYLLABUS) MASTER IN OFFICE microsoft word ΕΚΔΟΣΗ 1.0. Σόλωνος 108,Τηλ. 210.3387190 Φαξ 210.3634576 ΕΞΕΤΑΣΤΕΑ ΥΛΗ (SYLLABUS) MASTER IN OFFICE microsoft word ΕΚΔΟΣΗ 1.0 ΤΙ ΕΙΝΑΙ ΤΟ MASTER IN OFFICE Το Master in Office είναι κατάλληλο για άτομα που έχουν κάποια εμπειρία στο Office (πχ. κάτοχοι πτυχίου

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

Πνευματικά Δικαιώματα 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

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

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

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

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

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

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

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

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

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

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

ΕΓΧΕΙΡΙΔΙΟ ΜΑΘΗΤΗ. της Πλατφόρμας Τηλεκατάρτισης

ΕΓΧΕΙΡΙΔΙΟ ΜΑΘΗΤΗ. της Πλατφόρμας Τηλεκατάρτισης ΕΓΧΕΙΡΙΔΙΟ ΜΑΘΗΤΗ της Πλατφόρμας Τηλεκατάρτισης ΠΕΡΙΕΧΟΜΕΝΑ 1. Εισαγωγή...2 2. Αρχική σελίδα, Εισαγωγή & Περιβάλλον Συστήματος...3 2.1. Αρχική σελίδα εισαγωγής...3 2.2. Εισαγωγή στην Πλατφόρμα Τηλε-κατάρτισης...4

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

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

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

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

Δημιουργία η-μαθήματος με τη. 3 ο Μέρος Εισαγωγή πληροφοριών: δημιουργία ιστοσελίδας

Δημιουργία η-μαθήματος με τη. 3 ο Μέρος Εισαγωγή πληροφοριών: δημιουργία ιστοσελίδας Δημιουργία η-μαθήματος με τη χρήση του Moodle 3 ο Μέρος Εισαγωγή πληροφοριών: δημιουργία ιστοσελίδας Δημιουργία η-μαθήματος με τη χρήση του Moodle 3 ο Μέρος Εισαγωγή πληροφοριών: δημιουργία ιστοσελίδας

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

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

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

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

Στην τεχνολογία των CSS, οι κανόνες στυλ (style

Στην τεχνολογία των CSS, οι κανόνες στυλ (style Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ

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

B) Ετοιμάζοντας μια Παρουσίαση

B) Ετοιμάζοντας μια Παρουσίαση B) Ετοιμάζοντας μια Παρουσίαση Τι είναι μια παρουσίαση με τη βοήθεια ηλεκτρονικού υπολογιστή Ο υπολογιστής με την κατάλληλη εφαρμογή, μπορεί να μας βοηθήσει στη δημιουργία εντυπωσιακών εγγράφων, διαφανειών

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

Movie Maker (Δημιουργία βίντεο)

Movie Maker (Δημιουργία βίντεο) Movie Maker (Δημιουργία βίντεο) - Με πόσους τρόπους μπορούμε να διηγηθούμε μια ιστορία; - Μπορούμε να την πούμε ο ένας στον άλλο. - Μπορούμε να την γράψουμε. - Μπορούμε να τη ζωγραφίσουμε κομμάτι-κομμάτι.

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

Η HTML 5 θα αλλάξει το Web?

Η HTML 5 θα αλλάξει το Web? Η HTML 5 θα αλλάξει το Web? (ή αλλιώς, έρχεται το τέλος των plugins?) Αλέξανδρος Καράκος Εργαστήριο Προγραµµατισµού και Επεξεργασίας Πληροφοριών Internet 2... Είναι ένα ξεχωριστό µέσο δηµοσίευσης πληροφοριών

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

Μορφοποίηση εικόνων. Εισαγωγή. Στόχος κεφαλαίου

Μορφοποίηση εικόνων. Εισαγωγή. Στόχος κεφαλαίου Περιεχόμενα Κεφάλαιο 1: Προετοιμασία παρουσίασης...1 Κεφάλαιο 2: Διαχείριση διαφανειών...18 Κεφάλαιο 3: Διαχείριση γραφικών...31 Κεφάλαιο 4: Επεξεργασία εικόνων με το Adobe Photoshop...56 Κεφάλαιο 5: Μορφοποίηση

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

Περιεχόμενα. Μέρος 1: Βασικές έννοιες της πληροφορικής... 13. Πρόλογος... 11

Περιεχόμενα. Μέρος 1: Βασικές έννοιες της πληροφορικής... 13. Πρόλογος... 11 Περιεχόμενα Πρόλογος... 11 Μέρος 1: Βασικές έννοιες της πληροφορικής... 13 1.1 Windows XP... 15 1.2 Επιφάνεια εργασίας... 19 1.3 Γραμμή εργασιών... 24 1.4 Χειρισμός παραθύρων... 30 1.5 Μενού... 36 1.6

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

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

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

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

Συνοπτικός Οδηγός Χρήσης του Moodle για τον Καθηγητή

Συνοπτικός Οδηγός Χρήσης του Moodle για τον Καθηγητή Συνοπτικός Οδηγός Χρήσης του Moodle για τον Καθηγητή 1 Πίνακας Περιεχομένων 1. Εισαγωγή... 4 1.1 Περιβάλλον Moodle...4 1.2 Χρήση ονόματος χρήστη και κωδικού...4 1.3 Δημιουργία νέου μαθήματος...4 1.3.1

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

Πίνακες, περιγράµµατα και σκίαση

Πίνακες, περιγράµµατα και σκίαση Πίνακες, περιγράµµατα και σκίαση Οι πίνακες Οι πίνακες είναι ορθογώνια πλαίσια που χωρίζονται σε γραµµές και στήλες. Η τοµή µιας γραµµής µε µια στήλη προσδιορίζει ένα κελί. Τα στοιχεία, που παρουσιάζουµε,

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

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

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

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

Χρήστος Στασινός. ουλεύοντας με τη. Microsoft Access ΑΘΗΝΑ

Χρήστος Στασινός. ουλεύοντας με τη. Microsoft Access ΑΘΗΝΑ Χρήστος Στασινός ουλεύοντας με τη Microsoft Access ΑΘΗΝΑ Κάθε γνήσιο αντίγραφο έχει την υπογραφή του συγγραφέα Έκδοση 1η, Copyright 1998 Έκδοση 2η, Copyright 2007 ISBN: 978-960-8105-97-3 ΕΚΔΟΣΕΙΣ ΝΕΩΝ

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

Εργαστήριο #12. Βήμα 1 ο. Βήμα 2 ο. Βήμα 3 ο. Βήμα 4 ο.

Εργαστήριο #12. Βήμα 1 ο. Βήμα 2 ο. Βήμα 3 ο. Βήμα 4 ο. Εργαστήριο #12 Από τα προηγούμενα εργαστήρια: Το εργαστήριο αυτό είναι ανεξάρτητο από τα προηγούμενα επειδή όμως ασχολείται με τη γλώσσα JavaScript, βεβαιωθείτε ότι έχετε διαβάσει το εισαγωγικό Παράρτημα

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

2 Αποδοτική εργασία στα Windows Vista 103

2 Αποδοτική εργασία στα Windows Vista 103 Περιεχόμενα Οι συγγραφείς... 11 Εισαγωγή στα Windows Vista... 13 Οι εκδόσεις των Windows Vista...14 Ας ξεκινήσουμε!...18 Το πρόγραμμα πιστοποίησης επιχειρήσεων της Microsoft... 19 Πληροφορίες για νέους

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

Vodafone Business Connect

Vodafone Business Connect Vodafone Business Connect Vodafone Business WebHosting Αναλυτικός Οδηγός Χρήσης Photo Album Αναλυτικός οδηγός χρήσης: Photo Album Vodafone Business Connect - Υπηρεσίες φιλοξενίας εταιρικού e-mail & web

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

ΟΔΗΓΟΣ ΧΡΗΣΗΣ(ΜΑΝUΑL) ΔΙΑΧΕΙΡΙΣΤΗ-ΧΡΗΣΤΗ.

ΟΔΗΓΟΣ ΧΡΗΣΗΣ(ΜΑΝUΑL) ΔΙΑΧΕΙΡΙΣΤΗ-ΧΡΗΣΤΗ. ΟΔΗΓΟΣ ΧΡΗΣΗΣ(ΜΑΝUΑL) ΔΙΑΧΕΙΡΙΣΤΗ-ΧΡΗΣΤΗ. Οδηγός Διαχειριστή Το m-learning Toolkit είναι μια ολοκληρωμένη πλατφόρμα εξ αποστάσεως εκπαίδευσης που έχει σχεδιαστεί για να υπάρχει η δυνατότητα της πρόσβασης

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

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

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

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

Certified Web Designer (CWD) Εξεταστέα Ύλη (Syllabus) Έκδοση 1.0

Certified Web Designer (CWD) Εξεταστέα Ύλη (Syllabus) Έκδοση 1.0 Certified Web Designer (CWD) Εξεταστέα Ύλη (Syllabus) Πνευµατικά ικαιώµατα Το παρόν είναι πνευµατική ιδιοκτησία της ACTA Α.Ε. και προστατεύεται από την Ελληνική και Ευρωπαϊκή νοµοθεσία που αφορά τα πνευµατικά

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

<BODY></a> </h3> <p> <img alt="<HTML> <HEAD> <TITLE> <BODY>" title="<HTML> <HEAD> <TITLE> <BODY>" class="news-block-img pull-right" src="/thumbs/26/2082816.jpg"> ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες </p> <a href="/2082816-Html-head-title-body.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2997974-1-ta-tmimata-tis-epifaneias-ergasias-ton-windows.html">1. Τα τμήματα της επιφάνειας εργασίας των Windows</a> </h3> <p> <img alt="1. Τα τμήματα της επιφάνειας εργασίας των Windows" title="1. Τα τμήματα της επιφάνειας εργασίας των Windows" class="news-block-img pull-right" src="/thumbs/24/2997974.jpg"> 1. Τα τμήματα της επιφάνειας εργασίας των Windows Εικονίδια συντομεύσεων (αρχείου-φακέλου) Εικονίδια Ανενεργά Ενεργό Επιφάνεια (αρχείου-φακέλου) παράθυρα παράθυρο εργασίας Γραμμή μενού Γραμμή εργαλείων </p> <a href="/2997974-1-ta-tmimata-tis-epifaneias-ergasias-ton-windows.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/6448791-7-vimata-gia-dimioyrgia-istotopoy-istologioy.html">7 Βήματα για δημιουργία Ιστοτόπου Ιστολογίου</a> </h3> <p> <img alt="7 Βήματα για δημιουργία Ιστοτόπου Ιστολογίου" title="7 Βήματα για δημιουργία Ιστοτόπου Ιστολογίου" class="news-block-img pull-right" src="/thumbs/25/6448791.jpg"> Πολυτεχνείο Κρήτης Διεύθυνση Τηλεπικοινωνιών, Δικτύων και Υπολογιστικής Υποδομής Τμήμα Εκπαιδευτικής Υπολογιστικής Υποδομής 7 Βήματα για δημιουργία Ιστοτόπου Ιστολογίου Τα βήματα δημιουργίας ιστοτόπου </p> <a href="/6448791-7-vimata-gia-dimioyrgia-istotopoy-istologioy.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/6577065-Vodafone-business-connect.html">Vodafone Business Connect</a> </h3> <p> <img alt="Vodafone Business Connect" title="Vodafone Business Connect" class="news-block-img pull-right" src="/thumbs/25/6577065.jpg"> Vodafone Business Connect Vodafone Business WebHosting Αναλυτικός Οδηγός Χρήσης EasySite Optimizer Αναλυτικός οδηγός χρήσης: EasySite Optimizer Vodafone Business Connect - Υπηρεσίες φιλοξενίας εταιρικού </p> <a href="/6577065-Vodafone-business-connect.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/7781750-Microsoft-powerpoint-2007.html">Microsoft PowerPoint 2007</a> </h3> <p> <img alt="Microsoft PowerPoint 2007" title="Microsoft PowerPoint 2007" class="news-block-img pull-right" src="/thumbs/26/7781750.jpg"> Information Technology Services and Solutions Σύμβουλοι Μηχανογράφησης και Εκπαίδευσης Στεφ. Σκουλούδη 27, Καλλίπολη, Πειραιάς 210 45 38 177 http://www.itss.gr/ Microsoft PowerPoint 2007 Κωνσταντίνος Κωβαίος </p> <a href="/7781750-Microsoft-powerpoint-2007.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/705273-Doyleyo-ilektronika-doyleyo-grigora-kai-me-asfaleia-by-e-base-gr.html">«Δουλεύω Ηλεκτρονικά, Δουλεύω Γρήγορα και με Ασφάλεια - by e-base.gr»</a> </h3> <p> <img alt="«Δουλεύω Ηλεκτρονικά, Δουλεύω Γρήγορα και με Ασφάλεια - by e-base.gr»" title="«Δουλεύω Ηλεκτρονικά, Δουλεύω Γρήγορα και με Ασφάλεια - by e-base.gr»" class="news-block-img pull-right" src="/thumbs/18/705273.jpg"> Επεξήγηση web site με λογικό διάγραμμα «Δουλεύω Ηλεκτρονικά, Δουλεύω Γρήγορα και με Ασφάλεια - by e-base.gr» Web : www.e-base.gr E-mail : support@e-base.gr Facebook : Like Twitter : @ebasegr Πολλοί άνθρωποι </p> <a href="/705273-Doyleyo-ilektronika-doyleyo-grigora-kai-me-asfaleia-by-e-base-gr.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4894364-Idrymatiko-apothetirio-tei-peiraia.html">Ιδρυματικό Αποθετήριο ΤΕΙ ΠΕΙΡΑΙΑ</a> </h3> <p> <img alt="Ιδρυματικό Αποθετήριο ΤΕΙ ΠΕΙΡΑΙΑ" title="Ιδρυματικό Αποθετήριο ΤΕΙ ΠΕΙΡΑΙΑ" class="news-block-img pull-right" src="/thumbs/25/4894364.jpg"> Ιδρυματικό Αποθετήριο ΤΕΙ ΠΕΙΡΑΙΑ Οδηγίες κατάθεσης εργασίας στο σύστημα διαχείρισης αποθετηρίου DSpace 2 Κατάθεση εργασίας στο σύστημαdspace 1. Είσοδος στο σύστημα 1. Ανοίγουμε ένα γνωστό φυλλομετρητή </p> <a href="/4894364-Idrymatiko-apothetirio-tei-peiraia.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9739371-Idrymatiko-apothetirio-aei-peiraia-t-t.html">Ιδρυματικό Αποθετήριο ΑΕΙ ΠΕΙΡΑΙΑ Τ.Τ.</a> </h3> <p> <img alt="Ιδρυματικό Αποθετήριο ΑΕΙ ΠΕΙΡΑΙΑ Τ.Τ." title="Ιδρυματικό Αποθετήριο ΑΕΙ ΠΕΙΡΑΙΑ Τ.Τ." class="news-block-img pull-right" src="/thumbs/27/9739371.jpg"> Ιδρυματικό Αποθετήριο ΑΕΙ ΠΕΙΡΑΙΑ Τ.Τ. Οδηγίες κατάθεσης εργασίας στο σύστημα διαχείρισης αποθετηρίου DSpace 2 Κατάθεση εργασίας στο σύστημα Ιδρυματικού Αποθετηρίου 1. Είσοδος στο σύστημα 1. Ανοίγουμε </p> <a href="/9739371-Idrymatiko-apothetirio-aei-peiraia-t-t.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/563740-Mporeite-ta-deite-vinteaki-me-ti-diadikasia-edo-http-www-greektuts-net-greek-in-joomla.html">Μπορείτε τα δείτε βιντεάκι με τη διαδικασία εδώ: http://www.greektuts.net/greek-in-joomla/</a> </h3> <p> <img alt="Μπορείτε τα δείτε βιντεάκι με τη διαδικασία εδώ: http://www.greektuts.net/greek-in-joomla/" title="Μπορείτε τα δείτε βιντεάκι με τη διαδικασία εδώ: http://www.greektuts.net/greek-in-joomla/" class="news-block-img pull-right" src="/thumbs/20/563740.jpg"> 1) Εμφάνιση ιστοσελίδας Ανοίγουμε το πρόγραμμα πλοήγησης (Firefox, Chrome, Internet Explorer κτλ) και στη γραμμή διευθύνσεων πληκτρολογούμε τη διεύθυνση http://localhost ή http://127.0.0.1. Αν δεν βλέπουμε </p> <a href="/563740-Mporeite-ta-deite-vinteaki-me-ti-diadikasia-edo-http-www-greektuts-net-greek-in-joomla.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1535242-Hrisi-i-y-iaheirisi-arheion.html">ΧΡΗΣΗ Η/Υ & ΙΑΧΕΙΡΙΣΗ ΑΡΧΕΙΩΝ</a> </h3> <p> <img alt="ΧΡΗΣΗ Η/Υ & ΙΑΧΕΙΡΙΣΗ ΑΡΧΕΙΩΝ" title="ΧΡΗΣΗ Η/Υ & ΙΑΧΕΙΡΙΣΗ ΑΡΧΕΙΩΝ" class="news-block-img pull-right" src="/thumbs/22/1535242.jpg"> ΧΡΗΣΗ Η/Υ & ΙΑΧΕΙΡΙΣΗ ΑΡΧΕΙΩΝ ΠΕΡΙΒΑΛΛΟΝ ΗΛΕΚΤΡΟΝΙΚΟΥ ΥΠΟΛΟΓΙΣΤΗ Βασικές Λειτουργίες και Ρυθµίσεις 48.1.α.α1 48.1.α.α2 48.1.α.α3 48.1.α.α4 48.1.α.α5 48.1.α.α6 48.1.α.α7 48.1.α.α8 Εκκίνηση, Τερµατισµός, </p> <a href="/1535242-Hrisi-i-y-iaheirisi-arheion.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/5162379-Imioyrgia-paroysiaseon-me-ti-voitheia-toy-powerpoint.html">ημιουργία Παρουσιάσεων με τη βοήθεια του PowerPoint</a> </h3> <p> <img alt="ημιουργία Παρουσιάσεων με τη βοήθεια του PowerPoint" title="ημιουργία Παρουσιάσεων με τη βοήθεια του PowerPoint" class="news-block-img pull-right" src="/thumbs/25/5162379.jpg"> TEXNOΛΟΓΙΚΟ EΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΣΕΡΡΩΝ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΚΩΝ ΕΦΑΡΜΟΓΩΝ ΤΜΗΜΑ ΠΛΗΡΟΦΟΡΙΚΗΣ & ΕΠΙΚΟΙΝΩΝΙΩΝ Τομέας Αρχιτεκτονικής Η/Υ & Βιομηχανικών Εφαρμογών Μάθημα: «EIΣΑΓΩΓΗ ΣΤΗΝ ΠΛΗΡΟΦΟΡΙΚΗ - ΕΡΓΑΣΤΗΡΙΟ» </p> <a href="/5162379-Imioyrgia-paroysiaseon-me-ti-voitheia-toy-powerpoint.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2534387-Periehouena-meros-i-vasika-stoiheia-ton-microsoft-windows-xp-professional-eyharisties-17-eisagogi-19.html">Περιεχόµενα. Μέρος I Βασικά στοιχεία των Microsoft Windows XP Professional. Ευχαριστίες... 17 Εισαγωγή... 19</a> </h3> <p> <img alt="Περιεχόµενα. Μέρος I Βασικά στοιχεία των Microsoft Windows XP Professional. Ευχαριστίες... 17 Εισαγωγή... 19" title="Περιεχόµενα. Μέρος I Βασικά στοιχεία των Microsoft Windows XP Professional. Ευχαριστίες... 17 Εισαγωγή... 19" class="news-block-img pull-right" src="/thumbs/24/2534387.jpg"> Περιεχόµενα Ευχαριστίες... 17 Εισαγωγή... 19 Μέρος I Βασικά στοιχεία των Microsoft Windows XP Professional 1 Εισαγωγή στη διαχείριση των Microsoft Windows XP Professional... 25 Ξεκίνηµα µε τα Windows XP </p> <a href="/2534387-Periehouena-meros-i-vasika-stoiheia-ton-microsoft-windows-xp-professional-eyharisties-17-eisagogi-19.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3860356-Www-costaschatzinikolas-gr.html">www.costaschatzinikolas.gr</a> </h3> <p> <img alt="www.costaschatzinikolas.gr" title="www.costaschatzinikolas.gr" class="news-block-img pull-right" src="/thumbs/24/3860356.jpg"> ECDL CORE ΕΝΟΤΗΤΑ 3 Επεξεργασία Κειμένου Microsoft Word Επαναληπτικές Ερωτήσεις Εξετάσεων ECDL CORE ΕΝΟΤΗΤΑ 3 Επεξεργασία Κειμένου Microsoft Word Επαναληπτικές Ερωτήσεις Εξετάσεων Δημιουργία - Συγγραφή </p> <a href="/3860356-Www-costaschatzinikolas-gr.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4306309-Google-apps-gia-to-office-365-gia-epiheiriseis.html">Google Apps για το Office 365 για επιχειρήσεις</a> </h3> <p> <img alt="Google Apps για το Office 365 για επιχειρήσεις" title="Google Apps για το Office 365 για επιχειρήσεις" class="news-block-img pull-right" src="/thumbs/24/4306309.jpg"> Google Apps για το Office 365 για επιχειρήσεις Πραγματοποίηση της μετάβασης Το Office 365 για επιχειρήσεις έχει διαφορετική εμφάνιση από το Google Apps. Για το λόγο αυτό, όταν συνδεθείτε, θα δείτε αυτήν </p> <a href="/4306309-Google-apps-gia-to-office-365-gia-epiheiriseis.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3598258-Efarmogi-diaheirisis-psifiakis-pliroforias-odigos-hrisis-system-symvoyleytiki-a-e.html">Εφαρμογή Διαχείρισης Ψηφιακής Πληροφορίας ΟΔΗΓΟΣ ΧΡΗΣΗΣ System Συμβουλευτική Α.Ε</a> </h3> <p> <img alt="Εφαρμογή Διαχείρισης Ψηφιακής Πληροφορίας ΟΔΗΓΟΣ ΧΡΗΣΗΣ System Συμβουλευτική Α.Ε" title="Εφαρμογή Διαχείρισης Ψηφιακής Πληροφορίας ΟΔΗΓΟΣ ΧΡΗΣΗΣ System Συμβουλευτική Α.Ε" class="news-block-img pull-right" src="/thumbs/24/3598258.jpg"> σχετικά με τον έλεγχο της καπνιστικής συνήθειας 1 25 Λογισμικές εφαρμογές καταγραφής και αξιοποίησης πληροφοριών σχετικά με τον έλεγχο της καπνιστικής συνήθειας Λογισμική Εφαρμογή Διαχείρισης Ψηφιακής </p> <a href="/3598258-Efarmogi-diaheirisis-psifiakis-pliroforias-odigos-hrisis-system-symvoyleytiki-a-e.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1021066-Egheiridio-egkatastasis-kai-hrisis-periodikon-etwinning.html">Εγχειρίδιο εγκατάστασης και χρήσης περιοδικών etwinning</a> </h3> <p> <img alt="Εγχειρίδιο εγκατάστασης και χρήσης περιοδικών etwinning" title="Εγχειρίδιο εγκατάστασης και χρήσης περιοδικών etwinning" class="news-block-img pull-right" src="/thumbs/20/1021066.jpg"> Εγχειρίδιο εγκατάστασης και χρήσης περιοδικών etwinning Εισαγωγή Η εφαρμογή των περιοδικών etwinning δίνει τη δυνατότητα σε εκπαιδευτικούς που έχουν λογαριασμό στο Πανελλήνιο Σχολικό Δίκτυο και που έχουν </p> <a href="/1021066-Egheiridio-egkatastasis-kai-hrisis-periodikon-etwinning.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2456152-5-o-kefalaio-praktiko-kommati.html">5 ο ΚΕΦΑΛΑΙΟ: ΠΡΑΚΤΙΚΟ ΚΟΜΜΑΤΙ</a> </h3> <p> <img alt="5 ο ΚΕΦΑΛΑΙΟ: ΠΡΑΚΤΙΚΟ ΚΟΜΜΑΤΙ" title="5 ο ΚΕΦΑΛΑΙΟ: ΠΡΑΚΤΙΚΟ ΚΟΜΜΑΤΙ" class="news-block-img pull-right" src="/thumbs/24/2456152.jpg"> 5 ο ΚΕΦΑΛΑΙΟ: ΠΡΑΚΤΙΚΟ ΚΟΜΜΑΤΙ 5.1 Εισαγωγή Το πρακτικό κομμάτι της πτυχιακής μας εργασίας αφορά την δημιουργία μιας λειτουργικής ιστοσελίδας με την χρήση της πλατφόρμας του Weebly, που αποτελεί μια σύγχρονη </p> <a href="/2456152-5-o-kefalaio-praktiko-kommati.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/10503834-Odigies-gia-ti-hrisi-toy-google-drive.html">Οδηγίες για τη Χρήση του Google Drive</a> </h3> <p> <img alt="Οδηγίες για τη Χρήση του Google Drive" title="Οδηγίες για τη Χρήση του Google Drive" class="news-block-img pull-right" src="/thumbs/27/10503834.jpg"> Οδηγίες για τη Χρήση του Google Drive Χαρπαντίδου Ζαχαρούλα Επιμορφώτρια Β επιπέδου ΠΕ 19-20 Υπεύθυνη ΚΕ.ΠΛΗ.ΝΕ.Τ. Δράμας 2013 Περιεχόμενα Δημιουργία λογαριασμού στο Google Drive. 3 Διαχείριση του GoogleDrive.. </p> <a href="/10503834-Odigies-gia-ti-hrisi-toy-google-drive.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2437286-E-kpaideysi-platforua-asyghronis-tile-kpaideysis-odigies-hrisis-gia-toys-spoydastes-toy-tei-athinas-kai-toys-episkeptes-tis-diktyakis-pylis-e-kpaideysi.html">e-κπαίδευση Πλατφόρµα Ασύγχρονης Τηλε-κπαίδευσης Οδηγίες χρήσης για τους σπουδαστές του ΤΕΙ Αθήνας και τους επισκέπτες της δικτυακής πύλης e-κπαίδευση</a> </h3> <p> <img alt="e-κπαίδευση Πλατφόρµα Ασύγχρονης Τηλε-κπαίδευσης Οδηγίες χρήσης για τους σπουδαστές του ΤΕΙ Αθήνας και τους επισκέπτες της δικτυακής πύλης e-κπαίδευση" title="e-κπαίδευση Πλατφόρµα Ασύγχρονης Τηλε-κπαίδευσης Οδηγίες χρήσης για τους σπουδαστές του ΤΕΙ Αθήνας και τους επισκέπτες της δικτυακής πύλης e-κπαίδευση" class="news-block-img pull-right" src="/thumbs/24/2437286.jpg"> e-κπαίδευση Πλατφόρµα Ασύγχρονης Τηλε-κπαίδευσης Οδηγίες χρήσης για τους σπουδαστές του ΤΕΙ Αθήνας και τους επισκέπτες της δικτυακής πύλης e-κπαίδευση - 0 - Πίνακας Περιεχοµένων 1 Εισαγωγή.. 2 1.1 Σχολές/Τµήµατα </p> <a href="/2437286-E-kpaideysi-platforua-asyghronis-tile-kpaideysis-odigies-hrisis-gia-toys-spoydastes-toy-tei-athinas-kai-toys-episkeptes-tis-diktyakis-pylis-e-kpaideysi.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9345198-Idrymatiko-apothetirio-tei-dytikis-makedonias.html">ΙΔΡΥΜΑΤΙΚΟ ΑΠΟΘΕΤΗΡΙΟ ΤΕΙ ΔΥΤΙΚΗΣ ΜΑΚΕΔΟΝΙΑΣ</a> </h3> <p> <img alt="ΙΔΡΥΜΑΤΙΚΟ ΑΠΟΘΕΤΗΡΙΟ ΤΕΙ ΔΥΤΙΚΗΣ ΜΑΚΕΔΟΝΙΑΣ" title="ΙΔΡΥΜΑΤΙΚΟ ΑΠΟΘΕΤΗΡΙΟ ΤΕΙ ΔΥΤΙΚΗΣ ΜΑΚΕΔΟΝΙΑΣ" class="news-block-img pull-right" src="/thumbs/26/9345198.jpg"> ΙΔΡΥΜΑΤΙΚΟ ΑΠΟΘΕΤΗΡΙΟ ΤΕΙ ΔΥΤΙΚΗΣ ΜΑΚΕΔΟΝΙΑΣ EPrints Γενικές οδηγίες ΤΕΙ Δυτικής Μακεδονίας Είσοδος στο σύστημα 1. Ανοίγουμε ένα γνωστό φυλλομετρητή (browser) όπως Mozilla Firefox, Chrome, Internet Explorer, </p> <a href="/9345198-Idrymatiko-apothetirio-tei-dytikis-makedonias.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/10124625-Pinakides-paroysiasis.html">ΠΙΝΑΚΙΔΕΣ ΠΑΡΟΥΣΙΑΣΗΣ</a> </h3> <p> <img alt="ΠΙΝΑΚΙΔΕΣ ΠΑΡΟΥΣΙΑΣΗΣ" title="ΠΙΝΑΚΙΔΕΣ ΠΑΡΟΥΣΙΑΣΗΣ" class="news-block-img pull-right" src="/thumbs/27/10124625.jpg"> ΠΙΝΑΚΙΔΕΣ ΠΑΡΟΥΣΙΑΣΗΣ ΥΠΑΡΧΟΝΤΟΣ ΚΤΗΡΙΟΥ Ή ΣΧΕΔΙΑΣΜΟΥ ΝΕΟΥ ΚΤΗΡΙΟΥ Ένα από τα πιο κρίσιμα σημεία της διαδικασίας σχεδιασμού είναι η παρουσίαση της ανάλυσης της ιδέας σας 1. Έχετε εργαστεί στη διαδικασία </p> <a href="/10124625-Pinakides-paroysiasis.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/164576-Mathima-ergaleia-anaptyxis-efarmogon-internet.html">ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet.</a> </h3> <p> <img alt="ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet." title="ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet." class="news-block-img pull-right" src="/thumbs/17/164576.jpg"> ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet. ΩΡΕΣ ΔΙΔΑΣΚΑΛΙΑΣ: ΕΙΔΟΣ ΜΑΘΗΜΑΤΟΣ: Μικτό Γενικός σκοπός είναι να αποκτήσει ο καταρτιζόμενος τις αναγκαίες γνώσεις σχετικά με εργαλεία και τις τεχνικές για </p> <a href="/164576-Mathima-ergaleia-anaptyxis-efarmogon-internet.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3493505-Tehnologies-shediasis-diadiktyakoy-topoy-web-site-design-technologies.html">ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies)</a> </h3> <p> <img alt="ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies)" title="ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies)" class="news-block-img pull-right" src="/thumbs/24/3493505.jpg"> ΕΠΛ 012 ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies) Διδάσκων Καθηγητής: Δημήτριος Τσουμάκος Εαρινό Εξάμηνο 2010 Βασικές Πληροφορίες Πότε: Δευτέρα & Πέμπτη 10:30-12μμ Πού: ΧΩΔ01 </p> <a href="/3493505-Tehnologies-shediasis-diadiktyakoy-topoy-web-site-design-technologies.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/10624985-Ta-kyria-haraktiristika-poy-kathistoyn-ton-diktyako-kouvo-kali-praktiki-se-shesi-ue-tis-epileguenes-periohes-einai.html">Τα κύρια χαρακτηριστικά που καθιστούν τον δικτυακό κόµβο «καλή πρακτική», σε σχέση µε τις επιλεγµένες περιοχές είναι:</a> </h3> <p> <img alt="Τα κύρια χαρακτηριστικά που καθιστούν τον δικτυακό κόµβο «καλή πρακτική», σε σχέση µε τις επιλεγµένες περιοχές είναι:" title="Τα κύρια χαρακτηριστικά που καθιστούν τον δικτυακό κόµβο «καλή πρακτική», σε σχέση µε τις επιλεγµένες περιοχές είναι:" class="news-block-img pull-right" src="/thumbs/27/10624985.jpg"> Εθνικό Μουσείο Σύγχρονης Τέχνης Όνοµα κόµβου URL Τοµέας Στοιχεία επικοινωνίας Εθνικό Μουσείο Σύγχρονης Τέχνης http://www.emst.gr/ Μουσείο protocol@emst.culture.gr Τα κύρια χαρακτηριστικά που καθιστούν </p> <a href="/10624985-Ta-kyria-haraktiristika-poy-kathistoyn-ton-diktyako-kouvo-kali-praktiki-se-shesi-ue-tis-epileguenes-periohes-einai.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/7412717-Shediasmos-ton-pinakon-mias-vasis-dedomenon.html">Σχεδιασμός των Πινάκων μίας Βάσης Δεδομένων</a> </h3> <p> <img alt="Σχεδιασμός των Πινάκων μίας Βάσης Δεδομένων" title="Σχεδιασμός των Πινάκων μίας Βάσης Δεδομένων" class="news-block-img pull-right" src="/thumbs/26/7412717.jpg"> Σχεδιασμός των Πινάκων μίας Βάσης Δεδομένων 3 ΚΥΡΙΑ ΣΗΜΕΙΑ ΤΟΥ ΚΕΦΑΛΑΙΟΥ Επιλογή τύπου δεδομένων και ιδιότητες πεδίων Δημιουργία πινάκων Συσχετισμός πινάκων ΑΡΧΕΙΑ ΕΡΓΑΣΙΑΣ ΠΑΡΑΓΓΕΛΙΕΣ, ΠΑΡΑΓΓΕΛΙΕΣ ΤΕΛΙΚΟ </p> <a href="/7412717-Shediasmos-ton-pinakon-mias-vasis-dedomenon.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/7781799-Olokliromenes-draseis-provolis-dimosiotitas-gia-to-dimo-arhanon-asteroysion-egheiridio-hrisis-paroysiasi.html">Ολοκληρωμένες Δράσεις προβολής δημοσιότητας για το Δήμο Αρχανών Αστερουσίων Εγχειρίδιο Χρήσης - Παρουσίαση</a> </h3> <p> <img alt="Ολοκληρωμένες Δράσεις προβολής δημοσιότητας για το Δήμο Αρχανών Αστερουσίων Εγχειρίδιο Χρήσης - Παρουσίαση" title="Ολοκληρωμένες Δράσεις προβολής δημοσιότητας για το Δήμο Αρχανών Αστερουσίων Εγχειρίδιο Χρήσης - Παρουσίαση" class="news-block-img pull-right" src="/thumbs/26/7781799.jpg"> Novel Tech «Μέλος του Επιστημονικού & Τεχνολογικού Πάρκου Κρήτης» http://www.noveltech.gr info@noveltech.gr Ολοκληρωμένες Δράσεις προβολής δημοσιότητας για το Δήμο Αρχανών Αστερουσίων Εγχειρίδιο Χρήσης </p> <a href="/7781799-Olokliromenes-draseis-provolis-dimosiotitas-gia-to-dimo-arhanon-asteroysion-egheiridio-hrisis-paroysiasi.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3987000-Eisagogi-se-html-kai-css-panagiotis-tsarhopoylos.html">Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος</a> </h3> <p> <img alt="Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος" title="Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος" class="news-block-img pull-right" src="/thumbs/24/3987000.jpg"> Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές </p> <a href="/3987000-Eisagogi-se-html-kai-css-panagiotis-tsarhopoylos.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/732368-Gmail-i-proseggisi-tis-google-sto-ilektroniko-tahydromeio.html">Gmail: Η προσέγγιση της Google στο ηλεκτρονικό ταχυδρομείο</a> </h3> <p> <img alt="Gmail: Η προσέγγιση της Google στο ηλεκτρονικό ταχυδρομείο" title="Gmail: Η προσέγγιση της Google στο ηλεκτρονικό ταχυδρομείο" class="news-block-img pull-right" src="/thumbs/18/732368.jpg"> Gmail: Η προσέγγιση της Google στο ηλεκτρονικό ταχυδρομείο (Από την ομάδα εργασίας του Gmail) Το Gmail κάνει το ηλεκτρονικό ταχυδρομείο εύκολο και αποτελεσματικό.. Οι 10 κυριότεροι λόγοι για να χρησιμοποιήσετε </p> <a href="/732368-Gmail-i-proseggisi-tis-google-sto-ilektroniko-tahydromeio.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4918028-Psifiaki-ekpaideytiki-platforma-diadrastika-vivlia-kai-apothetirio-mathisiakon-antikeimenon.html">Ψηφιακή Εκπαιδευτική Πλατφόρμα, Διαδραστικά Βιβλία και Αποθετήριο Μαθησιακών Αντικειμένων</a> </h3> <p> <img alt="Ψηφιακή Εκπαιδευτική Πλατφόρμα, Διαδραστικά Βιβλία και Αποθετήριο Μαθησιακών Αντικειμένων" title="Ψηφιακή Εκπαιδευτική Πλατφόρμα, Διαδραστικά Βιβλία και Αποθετήριο Μαθησιακών Αντικειμένων" class="news-block-img pull-right" src="/thumbs/25/4918028.jpg"> Ψηφιακή Εκπαιδευτική Πλατφόρμα, Διαδραστικά Βιβλία και Αποθετήριο Μαθησιακών Αντικειμένων ΑΝΑΖΗΤΗΣΗ ΣΤΟ ΦΩΤΟΔΕΝΤΡΟ Για να αναζητήσετε Μαθησιακά Αντικείμενα στο Φωτόδεντρο χρησιμοποιείστε το πεδίο εισαγωγής </p> <a href="/4918028-Psifiaki-ekpaideytiki-platforma-diadrastika-vivlia-kai-apothetirio-mathisiakon-antikeimenon.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1361536-Spoydes-cad-pliroforikis-oikonomias-dioikisis-kai-d-t-p-me-systima-didaskalias-facetoface.html">Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface</a> </h3> <p> <img alt="Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface" title="Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface" class="news-block-img pull-right" src="/thumbs/22/1361536.jpg"> Copyright 2009-2012 -SYSTEM- All rights reserved 2/159 ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: New - Save Μάθημα 2: Εισαγωγή στη CSS Μάθημα 3: Τρόπος Σύνταξης Μάθημα 4: Σχόλια Μάθημα 5: ID Μάθημα 6: Class Μάθημα 7: Background </p> <a href="/1361536-Spoydes-cad-pliroforikis-oikonomias-dioikisis-kai-d-t-p-me-systima-didaskalias-facetoface.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/10485575-Eisagogi-sto-word-2007-n-papadopoylos.html">Εισαγωγή στο Word 2007 Ν. Παπαδόπουλος</a> </h3> <p> <img alt="Εισαγωγή στο Word 2007 Ν. Παπαδόπουλος" title="Εισαγωγή στο Word 2007 Ν. Παπαδόπουλος" class="news-block-img pull-right" src="/thumbs/27/10485575.jpg"> Εισαγωγή στο Word 2007 Ν. Παπαδόπουλος Πληκτρολογώ το διπλανό κείµενο. Επειδή το κείµενο αποτελείται από δύο παραγράφους πατάω το Enter µόνο στο τέλος της κάθε παραγράφου και όχι σε κάθε γραµµή 1. δηµιουργία </p> <a href="/10485575-Eisagogi-sto-word-2007-n-papadopoylos.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2922480-Energopoiisi-i-apenergopoiisi-tis-aytomatis-prosarmogis-keimenoy.html">Ενεργοποίηση ή απενεργοποίηση της Αυτόματης προσαρμογής κειμένου</a> </h3> <p> <img alt="Ενεργοποίηση ή απενεργοποίηση της Αυτόματης προσαρμογής κειμένου" title="Ενεργοποίηση ή απενεργοποίηση της Αυτόματης προσαρμογής κειμένου" class="news-block-img pull-right" src="/thumbs/24/2922480.jpg"> - 117-2. Στο παράθυρο διαλόγου Επιλογές, κάντε κλικ στην καρτέλα Επεξεργασία και κατόπιν επιλέξτε ή απαλείψτε το πλαίσιο ελέγχου Να επιτρέπεται η μεταφορά και η απόθεση κελιών. Ενεργοποίηση ή απενεργοποίηση </p> <a href="/2922480-Energopoiisi-i-apenergopoiisi-tis-aytomatis-prosarmogis-keimenoy.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/7303416-Zontani-taxi-mathimatos.html">Ζωντανή τάξη μαθήματος</a> </h3> <p> <img alt="Ζωντανή τάξη μαθήματος" title="Ζωντανή τάξη μαθήματος" class="news-block-img pull-right" src="/thumbs/26/7303416.jpg"> Ζωντανή τάξη μαθήματος Οδηγός Χρήσης Εκπαιδευόμενου Υπηρεσία Τεχνικής Υποστήριξης Τηλεπρομηθέα ΠΕΡΙΕΧΟΜΕΝΑ 1 ΖΩΝΤΑΝΗ ΤΑΞΗ ΜΑΘΗΜΑΤΟΣ... 2 1.1 Εισαγωγή... 4 2 ΒΑΣΙΚΕΣ ΔΟΜΕΣ ΖΩΝΤΑΝΗΣ ΤΑΞΗΣ... 5 2.1 Γνωριμία </p> <a href="/7303416-Zontani-taxi-mathimatos.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4454405-Ilektronika-katastiuata-nikolaos-protogeros-panepistiuio-makedonias.html">Ηλεκτρονικά Καταστήµατα. Νικόλαος Πρωτόγερος Πανεπιστήµιο Μακεδονίας</a> </h3> <p> <img alt="Ηλεκτρονικά Καταστήµατα. Νικόλαος Πρωτόγερος Πανεπιστήµιο Μακεδονίας" title="Ηλεκτρονικά Καταστήµατα. Νικόλαος Πρωτόγερος Πανεπιστήµιο Μακεδονίας" class="news-block-img pull-right" src="/thumbs/24/4454405.jpg"> Ηλεκτρονικά Καταστήµατα Νικόλαος Πρωτόγερος Πανεπιστήµιο Μακεδονίας Ορισµός Τα Ηλεκτρονικά Καταστήµατα αποτελούν το ψηφιακό αντίστοιχο µιας επιχείρησης στο Internet που παρουσιάζει την ίδια και τα προϊόντα </p> <a href="/4454405-Ilektronika-katastiuata-nikolaos-protogeros-panepistiuio-makedonias.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1322819-Kefalaio-ii-openoffice-3-x-impress.html">ΚΕΦΑΛΑΙΟ ΙΙ. OpenOffice 3.x Impress</a> </h3> <p> <img alt="ΚΕΦΑΛΑΙΟ ΙΙ. OpenOffice 3.x Impress" title="ΚΕΦΑΛΑΙΟ ΙΙ. OpenOffice 3.x Impress" class="news-block-img pull-right" src="/thumbs/22/1322819.jpg"> ΚΕΦΑΛΑΙΟ ΙΙ OpenOffice 3.x Impress Στόχοι: Με τη βοήθεια του οδηγού αυτού ο εκπαιδευόμενος θα μπορεί να: χρησιμοποιεί τα εργαλεία του Impress για δημιουργία παρουσιάσεων εμπλουτίζει τις παρουσιάσεις με </p> <a href="/1322819-Kefalaio-ii-openoffice-3-x-impress.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2402503-1-sholi-tehnologias-geoponias-tmima-fytikis-paragogis.html">1 ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΑΣ ΓΕΩΠΟΝΙΑΣ - ΤΜΗΜΑ ΦΥΤΙΚΗΣ ΠΑΡΑΓΩΓΗΣ</a> </h3> <p> <img alt="1 ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΑΣ ΓΕΩΠΟΝΙΑΣ - ΤΜΗΜΑ ΦΥΤΙΚΗΣ ΠΑΡΑΓΩΓΗΣ" title="1 ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΑΣ ΓΕΩΠΟΝΙΑΣ - ΤΜΗΜΑ ΦΥΤΙΚΗΣ ΠΑΡΑΓΩΓΗΣ" class="news-block-img pull-right" src="/thumbs/24/2402503.jpg"> 1 2 Περιεχόμενα 1. Εισαγωγή... 5 2. Επεξήγηση των εργαλείων που χρησιμοποιήθηκαν για την δημιουργία της ιστοσελίδας... 6 2.1 Γλώσσα προγραμματισμού ΗΤML για την δημιουργία της Ιστοσελίδας... 6 2.2 Γλώσσα </p> <a href="/2402503-1-sholi-tehnologias-geoponias-tmima-fytikis-paragogis.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/232455-Drastiriotites-kodikos-titlos-epipedo.html">ΔΡΑΣΤΗΡΙΟΤΗΤΕΣ. Κωδικός Τίτλος Επίπεδο</a> </h3> <p> <img alt="ΔΡΑΣΤΗΡΙΟΤΗΤΕΣ. Κωδικός Τίτλος Επίπεδο" title="ΔΡΑΣΤΗΡΙΟΤΗΤΕΣ. Κωδικός Τίτλος Επίπεδο" class="news-block-img pull-right" src="/thumbs/19/232455.jpg"> ΔΡΑΣΤΗΡΙΟΤΗΤΕΣ Ενότητα: Υποενότητα: Διαδικτυακές Υπηρεσίες κι Εφαρμογές Υ8 - Δημοτικοί Ιστότοποι / Google Sites Λίστα Δραστηριοτήτων Κωδικός Τίτλος Επίπεδο Υ8.Δ1 Αναζήτηση δημοτικών ιστοτόπων και αξιολόγηση </p> <a href="/232455-Drastiriotites-kodikos-titlos-epipedo.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/5216426-Politiki-gia-ta-cookie.html">Πολιτική για τα cookie</a> </h3> <p> <img alt="Πολιτική για τα cookie" title="Πολιτική για τα cookie" class="news-block-img pull-right" src="/thumbs/25/5216426.jpg"> Πολιτική για τα cookie Η BSEU χρησιµοποιεί cookie για να βελτιώνει συνεχώς την εµπειρία των επισκεπτών της διαδικτυακής τοποθεσίας της. Πρώτα από όλα, τα cookie µπορούν να βελτιώσουν άµεσα αυτή την εµπειρία, </p> <a href="/5216426-Politiki-gia-ta-cookie.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4505801-Epexergasia-keimenoy-keimenografos-word.html">ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD</a> </h3> <p> <img alt="ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD" title="ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD" class="news-block-img pull-right" src="/thumbs/25/4505801.jpg"> ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ Κειμενογράφος WORD ΣΚΟΠΟΣ Η ανάπτυξη δεξιοτήτων επεξεργασίας κειμένου ΠΡΟΤΑΣΕΙΣ ΚΑΙ ΡΥΘΜΙΣΕΙΣ Άνω περιθώριο (top margin) : 2.49cm Κάτω περιθώριο (bottom margin) :5.99cm Αριστερό περιθώριο </p> <a href="/4505801-Epexergasia-keimenoy-keimenografos-word.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/7666108-Adobe-flash-professional-cc.html">Adobe FLASH Professional CC</a> </h3> <p> <img alt="Adobe FLASH Professional CC" title="Adobe FLASH Professional CC" class="news-block-img pull-right" src="/thumbs/26/7666108.jpg"> Adobe FLASH Professional CC ΒHΜΑ ΠΡΟΣ ΒHΜΑ Απόδοση: Αγαμέμνων Μήλιος Μηχανικός Λογισμικού Εκδόσεις: Μ. Γκιούρδας Ζωοδόχου Πηγής 70-74 - Τηλ.: 210 3630219 106 81 Αθήνα, 2014 www.mgiurdas.gr Τίτλος Πρωτοτύπου: </p> <a href="/7666108-Adobe-flash-professional-cc.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1820063-Eisagogi-6-odigies-gia-kalyteri-hrisi-toy-youtube-12-dimioyrgia-logariasmoy-16-dimioyrgia-kanalioy-26-esoda-apo-ta-vinteo-42.html">Εισαγωγή 6. Οδηγίες για καλύτερη χρήση του YouTube 12. Δημιουργία λογαριασμού 16. Δημιουργία καναλιού 26. Έσοδα από τα βίντεο 42</a> </h3> <p> <img alt="Εισαγωγή 6. Οδηγίες για καλύτερη χρήση του YouTube 12. Δημιουργία λογαριασμού 16. Δημιουργία καναλιού 26. Έσοδα από τα βίντεο 42" title="Εισαγωγή 6. Οδηγίες για καλύτερη χρήση του YouTube 12. Δημιουργία λογαριασμού 16. Δημιουργία καναλιού 26. Έσοδα από τα βίντεο 42" class="news-block-img pull-right" src="/thumbs/23/1820063.jpg"> περιεχόμενα Εισαγωγή 6 Οδηγίες για καλύτερη χρήση του YouTube 12 Δημιουργία λογαριασμού 16 Δημιουργία καναλιού 26 Έσοδα από τα βίντεο 42 Εμφάνιση στατιστικών 57 Μηνύματα και επικοινωνία 65 Επεξεργασία </p> <a href="/1820063-Eisagogi-6-odigies-gia-kalyteri-hrisi-toy-youtube-12-dimioyrgia-logariasmoy-16-dimioyrgia-kanalioy-26-esoda-apo-ta-vinteo-42.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> </div> <!-- END RIGHT SIDEBAR --> </div> </div> </div> <!-- END CONTENT --> </div> <!-- END SIDEBAR & CONTENT --> </div> </div> <!-- BEGIN FOOTER --> <div class="footer"> <div class="container"> <div class="row"> <!-- BEGIN COPYRIGHT --> <div class="col-md-10 col-sm-10 padding-top-10"> 2016 © DocPlayer.gr <a href="/support/privacy-policy/">Πολιτική Απορρήτου</a> | <a href="/support/terms-of-service/">Όροι Χρήσης</a> | <a href="/support/feedback/">Σχόλια</a> </div> <!-- END COPYRIGHT --> <!-- BEGIN PAYMENTS --> <div class="col-md-6 col-sm-6"> </div> <!-- END PAYMENTS --> </div> </div> </div> <!-- END FOOTER --> <!--[if lt IE 9]> <script src="/static/theme/global/plugins/respond.min.js"></script> <![endif]--> <script src="/static/js/97be/total.js" type="text/javascript"></script> <div style="display: none;"> <script> var page_data = {"domain_id":30,"design_id":0,"page_id":0}; (function(){ var img = new Image(); var pixel_image_src = '/pix/'+Math.random()+'/report/pixel.gif?type=pageview&domain_id=30&page_id=0&design_id=0&l='+encodeURIComponent(navigator.language)+'&p='+encodeURIComponent(navigator.platform)+'&url='+encodeURIComponent(document.location); document.write('<img src="'+pixel_image_src+'"> '); }()); </script> </div> </body> </html>