www.archive-gr-2013.com » GR » E » EEEI

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".

    Archived pages: 1133 . Archive date: 2013-03.

  • Title: ΕΕΕΙ ΕΛΛΗΝΙΚΗ ΕΝΩΣΗ ΕΠΑΓΓΕΛΜΑΤΙΩΝ INTERNET Ελληνική Ένωση Επαγγελματιών Internet
    Descriptive info: .. Σεμινάρια HTML Dreamweaver.. Σημειώσεις Σεμιναρίων Arduino μέρος Α'.. Σημειώσεις Σεμιναρίων HTML Dreamweaver μέρος Α'.. Σημειώσεις Σεμιναρίων HTML Dreamweaver μέρος B'.. Σημειώσεις Σεμιναρίων HTML 5 + Javascript.. Περιοδικό InterBIZ.. Δωρεάν Συνδρομή.. Κείμενα - Αρθρα.. Μαθήματα HTML.. Μαθήματα Perl.. Μαθήματα Javascript.. Μαθήματα HTML Dreamweaver Α' Κύκλος.. Μαθήματα HTML Dreamweaver Β' Κύκλος.. HTML Dreamweaver FAQ.. Μαθήματα Gimp.. Μαθήματα Photoshop.. Ο κόσμος του αύριο blog.. Μαθήματα Internet.. Δικτυακές Ειδήσεις.. What's New.. Left Handed Products.. Διάφορα  ...   κύκλος (zip.. ppt αρχείο 20Mbytes).. Υποδείξεις - Παράπονα.. Ελληνική Ένωση Επαγγελματιών Internet.. Το θέμα της εβδομάδας:.. Το κινητό γίνεται φορητός υπολογιστής και κάτι παραπάνω.. (Η τεχνολογία αλλάζει και πάλι τη ζωή μας).. (Κάθε μήνα η ΕΕΕΙ παρουσιάζει ένα θέμα που θεωρεί σημαντικό για την κοινότητα του Internet.. ).. Προτάσεις για μια εθνική πολιτική στην κοινωνία της πληροφορίας.. Τελευταία Ενημέρωση: 29/4/2009.. Ελληνική Ένωση Επαγγελματιών Internet.. Email:.. gepiti@gepiti.. com.. Fax: 210-9939124.. ΕΕΕΙ © 2005-2009..

    Original link path: /
    Open archive

  • Title: Μαθήματα Arduino
    Descriptive info: Αυτή η παρουσίαση περιέχει στοιχεία τα οποία ίσως να μην προβληθούν σωστά από το πρόγραμμα περιήγησης.. Η παρουσίαση αυτή έχει βελτιστοποιηθεί για τις νεότερες εκδόσεις του Microsoft Internet Explorer.. Εάν θέλετε να συνεχίσετε, κάντε κλικ.. εδώ..

    Original link path: /arduino/Arduino_lessons_A_kyklos.htm
    Open archive

  • Title: Μαθήματα HTML Dreamweaver Α' Κύκλος - ΕΕΕI
    Descriptive info: Μαθήματα.. Dreamweaver - HTML.. Α’ Μέρος.. Τι είναι μια Web Σελίδα (Web Page).. Μία Web Σελίδα είναι ένα text αρχείο Η/Υ κατασκευασμένο με τέτοιο τρόπο που να μπορεί να παρουσιάζεται ολοκληρωμένο και στην επιθυμητή για τον δημιουργό του μορφή, με μία μόνο κλήση από τον χειριστή του κατάλληλου λογισμικού (δηλ.. ενός web client).. Κάθε Web σελίδα έχει την δική της διεύθυνση μέσα στο Internet.. Αυτή η διεύθυνση είναι η διεύθυνση του κόμβου στον οποίο είναι αποθηκευμένη + τα directories πέρα από το αρχικό directory που έχει ορίσει ο Web Server + το όνομά της.. Για παράδειγμα, η αρχική σελίδα του INTERBIZ βρίσκεται στο URL http://www.. eexi.. gr/interbiz/index.. html αλλά αν δούμε τα directories του server θα την βρούμε στο usr/local/sbin/httpd/html/interbiz/index.. html.. Το όνομα του αρχείου δεν είναι απαραίτητο να συμπεριληφθεί στο URL αν είναι index.. htm ή index.. html (κάθε αρχείο που περιέχει μια Web σελίδα πρέπει να έχει όνομα με επέκταση htm ή html) διότι αν δεν βάλουμε το όνομα του αρχείου, τότε ο browser θα ψάξει από μόνος του (by default) για ένα αρχείο με το όνομα index στο URL και path που του έχουμε δώσει.. Σελίδες με Ελληνικούς Χαρακτήρες.. Ο βασικός κανόνας που πρέπει να έχετε υπ’ όψιν σας είναι ότι αν οι σελίδες σας περιέχουν Ελληνικούς χαρακτήρες, αυτοί θα μπορούν να διαβαστούν από όσους έχουν το ίδιο character set στον Η/Υ τους.. Συνήθως προτιμούμε το unicode (UTF-8) γιατί πλεόν αυτό είναι το defacto standard.. Αν πρέπει να συντηρήσετε παλαιότερες σελίδες ίσως να χρησιμοποιήσετε τα Ελληνικά 928 (γνωστά ως ISO-8859-7 ή τα Windows 1253 δηλαδή τα Ελληνικά των Windows).. Τι είναι μια Παρουσίαση (ή Ενότητα) στο Web.. Μια Παρουσίαση στο Web είναι ένα σύνολο από Web σελίδες με λίγο ως πολύ κοινό αντικείμενο, αρχιτεκτονική και δομή.. Τι είναι ένα Web Site.. Ένα σύνολο από Παρουσιάσεις ή Ενότητες Web σελίδων που συνήθως στεγάζονται κάτω από ένα κοινό Web Server.. Τι είναι ένας Web Server.. Web Server ονομάζουμε το λογισμικό που τρέχει σε ένα κόμβο Internet και επιτρέπει σε άλλους υπολογιστές να αποκτούν αντίγραφα των Web σελίδων που είναι αποθηκευμένες σε αυτόν.. Τι είναι ένας Web Client.. Web Client ονομάζουμε το λογισμικό που τρέχει ένας Η/Υ και του επιτρέπει να διαβάζει Web σελίδες (από το σκληρό του δίσκο ή από το Internet αν είναι συνδεδεμένος με αυτό).. Τι ονομάζουμε Δομή μιας Web Παρουσίασης ή ενός Web site.. Ονομάζουμε Δομή μιας Web Παρουσίασης ή ενός Web site τον τρόπο με τον οποίο είναι συνδεδεμένες (παραπέμπουν οι μία στην άλλη) οι Web σελίδες που το απαρτίζουν.. Η Δομή αυτή μπορεί να είναι Ιεραρχική (δηλ.. όπως ένα δενδροειδές διάγραμμα με την αρχή του στην κορυφή), Γραμμική (όπως αυτή των σελίδων ενός βιβλίου όπου έχουμε μια ακολουθία με αρχή την πρώτη σελίδα και τέλος την τελευταία), Μικτή (που αποτελεί ένα συνδυασμό των δύο προηγουμένων) και Ακανόνιστη (χωρίς κεντρική δομή και εμφανή αρχή και τέλος).. Τι είναι το Διάγραμμα Ανάγνωσης (Storyboarding).. Διάγραμμα Ανάγνωσης ονομάζουμε την απεικόνιση σε χαρτί των κυριοτέρων εναλλακτικών διαδρομών που μπορεί να ακολουθήσει ο επισκέπτης ενός Web site.. Ο λόγος ύπαρξής του είναι να μας βοηθήσει να δούμε τα σημεία εκείνα στα οποία μπορεί ο επισκέπτης να αντιμετωπίσει προβλήματα προσανατολισμού, έτσι ώστε να τον βοηθήσουμε να τα ξεπεράσει.. Τι είναι η γλώσσα HTML.. Τα αρχικά HTML προέρχονται από τις λέξεις HyperText Markup Language.. Παρά το γεγονός πως ονομάζουμε την HTML γλώσσα, στην πραγματικότητα αποτελεί απλώς (τουλάχιστον στην απλή μορφή της) έναν ειδικό τρόπο γραφής κειμένου και κλήσης άλλων αρχείων ή εφαρμογών.. Ο Web client αναγνωρίζει αυτόν τον ειδικό τρόπο γραφής και εκτελεί τις εντολές που περιέχονται σε αυτόν.. Τι είναι μια Οδηγία (Tag).. Tag ονομάζουμε μία οδηγία γραμμένη σε HTML, την οποία πρέπει να αναγνωρίσει και ερμηνεύσει ο browser.. Τα tags βρίσκονται πάντοτε μεταξύ των συμβόλων και.. Οι οδηγίες δεν επηρεάζονται από το αν έχουν γραφτεί με πεζά (μικρά) ή κεφαλαία (είναι case insensitive).. Δηλαδή οι οδηγίες title και TITLE είναι ισοδύναμες.. Τι.. είναι.. ένα.. URL (Uniform Resource Locator).. Ένα URL είναι η διεύθυνση ενός αρχείου μέσα στο Internet και αποτελείται από 3 τμήματα:.. α) Το πρωτόκολλο που πρέπει να χρησιμοποιήσουμε για να αποκτήσουμε αυτό το αρχείο.. β) Ο κόμβος στον οποίο είναι τοποθετημένο το αρχείο.. γ) Το directory (με το πλήρες path ή τμήμα αυτού κατά περίπτωση) που βρίσκεται το αρχείο και φυσικά το όνομα του αρχείου.. Π.. χ.. στο URL http://www.. gr/928/interbiz/faq.. html το http:// είναι το πρωτόκολλο (HyperText Transfer Protocol), το www.. gr είναι ο κόμβος και το 928/interbiz/faq.. html είναι το directory και το όνομα του αρχείου.. Το πρωτόκολλο του WWW είναι το http.. Όμως σε ένα Web Browser μπορούμε να χρησιμοποιήσουμε και άλλα URLs.. Τέτοια είναι:.. HTTP HEADERS.. 2xx: Success.. 3xx: Redirect.. 4xx: Error.. ANONYMOUS FTP.. Μπορούμε να καλέσουμε ένα αρχείο που βρίσκεται σε ένα anonymous ftp site και να το δούμε στην οθόνη μας (αν είναι text αρχείο) ή να το αποθηκεύσουμε στον σκληρό μας δίσκο αν δεν είναι.. ftp://ftp.. gr/pub/systems/windows/win31/index.. txt.. Με το URL αυτό μπορούμε να αποκτήσουμε (ή/και να δούμε στην οθόνη μας) το αρχείο index.. txt που βρίσκεται στο αρχείο /pub/systems/windows/win31 του κόμβου ftp.. gr.. NON-ANONYMOUS FTP.. Το ίδιο με το προηγούμενο με την διαφορά πως η σύνταξή του είναι:.. ftp://username:password@ftp.. FILE.. Παρόμοιο με το anonymous ftp χρησιμοποιείται για ανάγνωση αρχείων κειμένου και η σύνταξή του είναι π.. file://eexi.. gr/pub/texts/info.. MAILTO.. Χρησιμοποιείται για να στέλνουμε email.. Απαραίτητη προϋπόθεση για να λειτουργήσει, είναι να το υποστηρίζει ο browser που χρησιμοποιούμε.. Η σύνταξή του είναι: mailto:διεύθυνση_παραλήπτη π.. mailto:gepiti@eexi.. Ειδικοί Χαρακτήρες στα URLs.. Οποιοσδήποτε χαρακτήρας περιέχεται σε ένα URL και δεν είναι γράμμα (Κεφαλαίο ή Πεζό), αριθμός (0-9) ή κάποιο από τα σύμβολα $ - _.. +.. Αν υπάρχει κάποιος ειδικός χαρακτήρας που πρέπει να συμπεριλάβουμε σε ένα URL τότε αυτό θα πρέπει να παρασταθεί με το % ακολουθούμενο από τους δύο χαρακτήρες που το παριστάνουν στο δεκαεξαδικό ISO-Latin-1 character set.. το %20 είναι το διάστημα και το %3f το ερωτηματικό (?).. Πιο συχνά χρησιμοποιούμε τον χαρακτήρα % που υπάρχει σε πολλές email διευθύνσεις και πρέπει να συμπεριληφθεί στο mailto URL.. Εδώ στην θέση του % γράφουμε %25.. Ο δημοφιλέστερος χαρακτήρας πάντως είναι το nbsp; (non breaking space) με το οποίο δηλώνουμε στον browser ότι θέλουμε να αφήσει ένα κενό διάστημα.. (Menu:.. Insert.. -.. HMTL.. -.. Special Characters - Non Breaking Space.. ).. Ορολογία Μετρήσεων.. Σελιδοεμφανίσεις –.. Pageviews -.. Impressions:.. Ο αριθμός των σελίδων που αναγνώστηκαν.. Μοναδικοί Χρήστες –.. Visitors –.. Unique.. Users:.. Ο αριθμός των ανθρώπων που επισκέφθηκαν τον συγκεκριμένο δικτυακό τόπο.. Επισκέψεις.. – Visits – Sessions:.. Ο αριθμός των επισκέψεων που δέχθηκε ο δικτυακός τόπος.. Κατά τη διάρκεια κάθε επίσκεψης ο χρήστης βλέπει μια ή περισσότερες ιστοσελίδες.. Διάρκεια.. Επίσκεψης.. – Session Duration – Avg.. Time on Site:.. Η μέση χρονική διάρκεια μιας επίσκεψης, εξαιρουμένων εκείνων που έχουν μηδενική διάρκεια.. Web 2.. 0.. Η ευκολία δημοσίευσης περιεχομένου στο Internet οδήγησε από πολύ νωρίς στη δημιουργία εργαλείων αναζήτησης, μια και ο όγκος του διαθέσιμου υλικού δεν άργησε να γίνει τεράστιος.. Δυστυχώς όμως, η χρήση ανθρώπων για την ταξινόμηση του περιεχόμενου σε καταλόγους, αποδείχθηκε αντιοικονομική, ενώ οι μηχανές αναζήτησης δεν έλυσαν ικανοποιητικά το πρόβλημα της ανάδειξης χρήσιμων αποτελεσμάτων.. Έτσι, κάποιοι βασίστηκαν στην κρίση των ίδιων των χρηστών και δημιούργησαν το Google, μια μηχανή αναζήτησης που κρίνει την αξία κάθε Web σελίδας με βάση τον αριθμό των άλλων σελίδων (δηλαδή ανθρώπων) που παραπέμπουν προς αυτήν.. Αυτή η πρακτική αποτελεί την πεμπτουσία του Web 2.. 0 που σε απλά λόγια μεταφράζεται σε: «Βάλε τους ίδιους τους χρήστες να προτείνουν και να επιλέξουν».. Στο Google αυτό επιτυγχάνεται «πλαγίως» αλλά πολλές νέες υπηρεσίες εφαρμόζουν δημόσια το ίδιο ακριβώς σκεπτικό.. Το del.. icio.. us επιτρέπει στους χρήστες να μοιράζονται τα bookmarks τους και να τοποθετούν σε κατηγορίες τις σελίδες που θεωρούν σημαντικές.. Επίσης, τα www.. reddit.. com και www.. digg.. com συλλέγουν προτάσεις για ενδιαφέρον περιεχόμενο από τους επισκέπτες τους και προβάλουν όσες λάβουν τις περισσότερες ψήφους.. Οι spammers βέβαια καραδοκούν και για να παραπλανήσουν το Google κατασκευάζουν χιλίαδες ψεύτικες σελίδες με παραπομπές στο site που θέλουν να προωθήσουν, ενώ την ίδια πρακτική (πλαστή εμφάνιση ενδιαφέροντος για κάποιο site) εφαρμόζουν και σε όσες υπηρεσίες συλλέγουν προτάσεις περιεχομένου από τους χρήστες τους.. Η ιδέα του Web 2.. 0 όμως συνεχίζει ακάθεκτη και ήδη οι επιδράσεις της έχουν αρχίσει να γίνονται αισθητές ακόμη και εκτός διαδικτύου.. Στη Χιλή η εφημερίδα Las Ultimas Noticias (Τα Τελευταία Νέα) ήταν παντελώς άγνωστη μέχρι που υιοθέτησε τις πρακτικές του Web 2.. Σήμερα, όλες οι ειδήσεις δημοσιεύονται πρώτα online και η έντυπη έκδοση περιέχει μόνο ό,τι επέλεξαν να δουν οι περισσότεροι επισκέπτες του site, ενώ οι δημοσιογράφοι πληρώνονται ανάλογα με τα clicks που επιτυγχάνουν τα άρθρα τους.. Το κοινό αγκάλιασε αυτή τη δημοκρατική επιλογή κειμένων και έτσι η Las Ultimas Noticias κατάφερε να γίνει η δημοφιλέστερη εφημερίδα στη χώρα.. Συνοπτικές πληροφορίες για την καταχώρηση ονόματος web site.. Για να δει κανείς τις ελεύθερες διευθύνσεις πηγαίνουμε στο:.. https://grweb.. ics.. forth.. gr/whois_el.. jsp.. Μπορούμε να επιλέξουμε καταχωρητή από εδώ:.. http://www.. eett.. gr/opencms/opencms/EETT/Electronic_Communications/DomainNames/search.. html?cat=kat.. Αν επιθυμούμε καταχώρηση από την eexi πηγαίνουμε στο:.. gr/?q=node/34.. (DNS δεν χρειάζεται να συμπληρώσει κανείς παρά μόνο αν έχει ήδη hosting και γνωρίζει τις σχετικές διευθύνσεις).. Δημιουργία της πρώτης μας σελίδας.. Αν έχουμε ορίσει το πρόγραμμα να ξεκινάει με το Designer View επιλέγουμε απλώς.. Create.. New.. HTML.. Αν δεν έχουμε κάνει κάτι τέτοιο επιλέγουμε.. Windows.. –.. Workspace.. Layout.. Designer.. για να αποκτήσει το πρόγραμμα το Designer View.. Σε περίπτωση που μας ζητηθεί να ορίσουμε Manage Sites σε αυτή τη φάση αγνοούμε την προτροπή.. Το πρώτο πράγμα που πρέπει να ορίσουμε είναι η γλώσσα στην οποία θα αποθηκεύεται το περιεχόμενο της σελίδας μας.. Για να το κάνουμε αυτό αρχικά επιλέγουμε.. Edit.. Preferences.. και το παράθυρο που ανοίγει επιλέγουμε.. Fonts.. Αν δεν είναι ήδη επιλεγμένα τα Ελληνικά ορίζουμε από εδώ τη γλώσσα σε Ελληνικά και τις γραμματοσειρές που θέλουμε να χρησιμοποιήσουμε από Default.. Στη συνέχεια από την επιλογή.. Page.. Properties.. του παραθύρου.. που βρίσκεται στο κάτω μέρος της σελίδας επιλέγουμε.. Title.. \.. Encoding.. και ορίζουμε το Character Set της σελίδας μας.. Αν δεν είναι ορατό το παράθυρο.. το εμφανίζουμε κάνοντας κλικ στο μαύρο τρίγωνο που βρίσκεται μέσα σε ένα άσπρο παραλληλόγραμμο στο κάτω μέρος του χώρου τοποθέτησης του περιεχομένου της σελίδας μας.. Από το ίδιο σημείο ορίζουμε και τον τίτλο της σελίδας.. Δηλαδή το κείμενο που εμφανίζεται στην κορυφή του παραθύρου του Browser του χρήστη, καθώς και στο μενού επιλογών του όταν βάλει τη σελίδα μας στο Favorites (Bookmarks/Αγαπημένα).. Αν δεν προβούμε σε αυτές τις ενέργειες τότε το πρώτο μας κείμενο ενώ στην οθόνη μας θα φαίνεται κανονικά ως: «Αυτή είναι η πρώτη μας σελίδα» στην πραγματικότητα θα αναγνωρίζεται από τις μηχανές αναζήτησης του Internet ως:.. Alpha; upsilon; tau; #942; epsilon; #943; nu; alpha; iota; eta; pi; rho; #974; tau; eta; mu; alpha; sigmaf; sigma; epsilon; lambda; #943; delta; alpha;.. Στη λευκή επιφάνεια του προγράμματος γράφουμε (ή κάνουμε paste) το κείμενο της σελίδας μας:.. Στο κάτω μέρος της οθόνης μας, στο πλαίσιο.. μπορούμε να δούμε μια σειρά από επιλογές για το φορμάρισμα του κειμένου μας.. Για παράδειγμα Bold Italic κείμενο στοιχημένο δεξιά, αριστερά, κεντραρισμένο ή περασιά (justified).. Οι επιλογές αυτές λειτουργούν όπως ακριβώς και στο Microsoft Word.. Για να αποθηκεύσουμε την εργασίας μας επιλέγουμε.. File.. Save.. As.. Μπορούμε να τοποθετήσουμε τη σελίδα μας οπουδήποτε θέλουμε στο σκληρό μας δίσκο.. Ωστόσο, επειδή όπως θα δούμε παρακάτω μια web σελίδα αποτελείται συνήθως από περισσότερα του ενός αρχεία είναι προτιμότερο να ορίσουμε ένα directory ως το τόπο του site μέρος του οποίου αποτελεί αυτή η σελίδα.. Για να γίνει αυτό στο δεξιό μέρος της οθόνης μας επιλέγουμε.. Files.. Managed.. Sites.. -.. Site.. Εναλλακτικά επιλέγουμε.. Sites.. από την μπάρα επιλογών στην κορυφή της οθόνης μας.. Δηλώνουμε τον τίτλο του site και τη διεύθυνση που θα έχει:.. Μετά επιλέγουμε Next.. Στην επόμενη οθόνη δηλώνουμε πως δεν θα δημιουργήσουμε εφαρμογές που συνεργάζονται με τον Server (No, I do not want to use server technology).. Η χρήση των τεχνολογιών αυτών δεν αποτελεί μέρος των μαθημάτων που περιλαμβάνονται σε αυτό το εκπαιδευτικό υλικό.. Στη συνέχεια ορίζουμε σε ποιο μέρος του σκληρού μας δίσκου θα αποθηκεύονται όλα τα σχετικά με το site μας αρχεία.. Η επιλογή της απευθείας ενημέρωσης του server συνιστάται μόνο για πολύ έμπειρους χρήστες.. Τέλος επιλέγουμε το είδος σύνδεσης που θα έχουμε με το directory στο σκληρό δίσκο του server όπου θα είναι αποθηκευμένες οι σελίδες και το site μας.. Αν δεν το γνωρίζουμε θα μας ενημερώσει γι’ αυτό ο administrator του site.. Τώρα μπορούμε να σώσουμε τη σελίδα μας.. Ως default directory θα λειτουργήσει αυτό που έχουμε ορίσει προηγουμένως και στο δεξιό μέρος της οθόνης μας θα εμφανίζεται η δομή όλου του site που φυσικά αφού μόλις αρχίσαμε περιέχει μόνο μια σελίδα.. ΤΑ TAGS ΚΑΙ ΟΙ ΛΕΙΤΟΥΡΓΙΕΣ ΠΟΥ ΕΠΙΤΕΛΕΙ ΚΑΘΕΝΑ ΑΠΟ ΑΥΤΑ.. Menu:.. Tag.. αν θέλουμε να μην πληκτρολογήσουμε εμείς αλλά να μπει η οδηγία από το μενού.. HTML.. /HTML.. Κάθε Web σελίδα αρχίζει με την οδηγία (tag) HTML και τελειώνει με την εντολή /HTML.. Η πρώτη πληροφορεί τον Web client πως το αρχείο είναι γραμμένο σε γλώσσα HTML και η τελευταία πως ο HTML κώδικας τελείωσε.. HEAD.. /HEAD.. Τα περιεχόμενά του είναι πληροφοριακά (περικλείουμε σε αυτό κείμενο που μας δίνει διάφορα στοιχεία για την Web σελίδα).. Δεν εμφανίζεται στο κείμενο της σελίδας.. Τοποθετείται πάντοτε μέσα στην οδηγία TITLE.. HEAD TITLE Το πρώτο μου κείμενο σε HTML /TITLE /HEAD.. TITLE.. /TITLE.. Περιέχει τον τίτλο μιας σελίδας.. Ο τίτλος αυτός εμφανίζεται στην κορυφή του παραθύρου του browser που χρησιμοποιούμε για να την δούμε.. Μέσα στον τίτλο τοποθετείται η HEAD και άλλες οδηγίες.. BODY.. /BODY.. Περιέχει το κυρίως σώμα της σελίδας (κείμενο, εικόνες, οδηγίες μορφοποίησης κτλ.. ).. Η οδηγία BODY δεν είναι υποχρεωτική από τεχνικής πλευράς (μπορούμε να την παραλείψουμε) αλλά την απαιτεί το πρότυπο HTML και έχει πολλές χρήσεις.. BASE.. Η οδηγία BASE.. μας επιτρέπει να ορίσουμε το βασικό URL της σελίδας, που θα χρησιμοποιηθεί σαν βάση σε περίπτωση που μια web σελίδα διαβάζεται από άλλο χώρο (local file ή mirror site) και θέλουμε να εξακολουθούν να λειτουργούν οι σχετικές παραπομπές (relative links).. Όπου δεν ορίζεται η παράμετρος BASE ο browser χρησιμοποιεί στην θέση του BASE το URL που μόλις ζήτησε.. Η σύνταξη της BASE είναι BASE HREF= http://www.. myhost.. com/ και βρίσκεται μέσα στην οδηγία HEAD.. Για να δείτε όλες τις οδηγίες (tags) που είναι διαθέσιμες στο Dreamweaver χρησιμοποιήστε την επιλογή:.. Tag Libraries.. Επίσης, για να δείτε όλα τα keyboard shortcuts και να αυξήσετε την παραγωγικότητά σας, χρησιμοποιήστε την επιλογή:.. Keyboard Shortcuts.. Για γενικότερες ρυθμίσεις επιλέγουμε.. Από εκεί μπορούμε να ορίσουμε μια μεγάλη σειρά θεμάτων.. Για παράδειγμα, από το.. General.. ρυθμίζουμε αν θέλουμε να μπορούμε να πληκτρολογήσουμε πολλά διαστήματα μαζί.. Από το.. New Document.. το είδος encoding και άλλων ρυθμίσεων που θέλουμε και από το.. Preview in Browser.. τους Browsers που υπάρχουν δηλωμένοι στο σύστημα.. ΕΠΙΚΕΦΑΛΙΔΕΣ (Headings).. Η οδηγία επικεφαλίδας καθορίζει το μέγεθος των γραμμάτων και ισχύει ανεξάρτητα από την γραμματοσειρά που χρησιμοποιεί ο browser που διαβάζει την σελίδα.. Η μεγαλύτερη σε μέγεθος επικεφαλίδα είναι η H1 , ακολουθούμενη από τις H2.. H6.. Παραδείγματα.. H1 Αυτή είναι η μεγαλύτερη επικεφαλίδα /H1.. H2 Αυτή είναι η δεύτερη μεγαλύτερη επικεφαλίδα /H2.. ΠΑΡΑΓΡΑΦΟΙ P.. Οι παράγραφοι στα HTML κείμενα πρέπει να οριστούν με ειδική οδηγία.. Διαφορετικά όλο το κείμενο θα παρουσιαστεί από τον browser σαν μια παράγραφος, ανεξάρτητα από τον τρόπο που αυτό έχει μορφοποιηθεί σε έναν ASCII editor (παράγραφοι κενές γραμμές και πολλά διαστήματα θα χαθούν).. Η εντολή για να ξεκινήσει μια καινούρια παράγραφος είναι P.. Αντίθετα απ' ότι θα περίμενε κανείς, η οδηγία αυτή δεν κλείνει με ένα /P που να σημαίνει πως τελειώνει παράγραφος (αν και πολλοί συνιστούν να την γράφουμε στο τέλος κάθε παραγράφου για λόγους ομοιομορφίας και τάξεως).. Το τέλος μιας παραγράφου σηματοδοτείται με την οδηγία P με την οποία αρχίζει η επόμενη παράγραφος (αν αρχίζει νέα παράγραφος αυτό ερμηνεύεται κατά τον browser σαν ένδειξη ότι τελειώνει η παλιά και έτσι το κείμενο μορφοποιείται ανάλογα).. ΑΡΙΘΜΗΜΕΝΕΣ ΛΙΣΤΕΣ.. Αν θέλουμε να δημιουργήσουμε μια αριθμημένη λίστα του τύπου.. 1.. Άνδρος.. 2.. Μύκονος.. 3.. Τήνος.. 4.. Σίφνος.. θα πρέπει να χρησιμοποιήσουμε τις εξής οδηγίες:.. OL.. /OL.. Η οδηγία OL (Ordered List) τοποθετείται στην αρχή της λίστας ενώ η οδηγία.. /OL στο τέλος της.. LI.. Κάθε νέα εγγραφή στην λίστα πρέπει να σημειώνεται με την οδηγία LI (οδηγία /LI δεν χρησιμοποιούμε για τον ίδιο λόγο που δεν χρησιμοποιούμε την /P ).. Έτσι η παραπάνω αριθμημένη λίστα θα πρέπει να γραφτεί ως εξής:.. OL LI Άνδρος LI Μύκονος LI Τήνος LI Σίφνος /OL.. ΛΙΣΤΕΣ ΧΩΡΙΣ ΑΡΙΘΜΗΣΗ UL.. /UL Unordered Lists.. Για να δημιουργήσουμε μια λίστα με κουκίδες όπως η παρακάτω θα ακολουθήσουμε την ίδια ακριβώς μεθοδολογία όπως και με τις αριθμημένες με την διαφορά πως αντί για την οδηγία OL θα χρησιμοποιήσουμε την UL.. Έτσι η παραπάνω μη αριθμημένη λίστα θα πρέπει να γραφτεί ως εξής:.. UL LI Άνδρος LI Μύκονος LI Τήνος LI Σίφνος /UL.. Τα ενδεικτικά σημάδια κάθε μέρους μιας μη αριθμημένης λίστας μπορούν να οριστούν με ειδικές παραμέτρους και να πάρουν τις εξής μορφές: Μαύρα δισκάκια (UL TYPE=DISC που είναι το default), Κυκλάκια (UL TYPE=CIRCLE), Τετραγωνάκια (UL TYPE=SQUARE).. ΛΙΣΤΕΣ ΜΕΣΑ ΣΕ ΑΛΛΕΣ ΛΙΣΤΕΣ.. Δεν υπάρχει κανένα πρόβλημα αν θέλετε να συμπεριλάβετε μια λίστα μέσα σε μια άλλη.. Για παράδειγμα, η παρακάτω διάταξη:.. · ΣΠΟΡΑΔΕΣ.. · ΚΥΚΛΑΔΕΣ.. · Άνδρος.. · Μύκονος.. · Τήνος.. · Σίφνος.. · ΔΩΔΕΚΑΝΗΣΑ.. · ΙΟΝΙΑ ΝΗΣΙΑ.. θα πρέπει να έχει καταχωρηθεί με τον ακόλουθο τρόπο:.. UL LI ΣΠΟΡΑΔΕΣ LI ΚΥΚΛΑΔΕΣ UL LI Άνδρος LI Μύκονος LI Τήνος LI Σίφνος /UL LI ΔΩΔΕΚΑΝΗΣΑ LI ΙΟΝΙΑ ΝΗΣΙΑ /UL.. A.. /A ΠΑΡΑΠΟΜΠΕΣ (Anchor Element).. Η πιο γνωστή και χρήσιμη οδηγία.. Επιτρέπει να συνδέσουμε δύο κείμενα οπουδήποτε στο Internet με τέτοιο τρόπο ώστε το ένα να παραπέμπει στο άλλο.. Το πρώτο τμήμα της παραπομπής A.. μπορεί να πάρει τις επιλογές HREF NAME.. HREF.. Προέρχεται από τις λέξεις Hypertext REFerence και η σύνταξή της είναι A HREF= URL υπογραμμισμένο μπλε (η default επιλογή) κείμενο /A όπου URL είναι η διεύθυνση κάποιας Web σελίδας (π.. gr/interbiz), ή κάποιο άλλο αρχείο στο ίδιο ή σε άλλο directory.. Σαν παραπομπή μπορούμε να χρησιμοποιήσουμε κάθε είδους URL (βλέπε παραπάνω) και όχι μόνο το http πρωτόκολλο.. Υπάρχει φυσικά η δυνατότητα να παραπέμψουμε σε άλλη web σελίδα στο ίδιο site (σχετική παραπομπή - relative link).. Αν η σελίδα είναι στο ίδιο directory τότε θα γράψουμε απλώς το όνομα του αρχείου στο οποίο βρίσκεται.. Για παράδειγμα αν παραπέμπει στο αρχείο test2.. htm τότε η παραπομπή θα είναι A HREF= test2.. htm υπογραμμισμένο μπλε κείμενο /A (Menu:.. Hyperlink.. Αν η σελίδα είναι σε διαφορετικό directory (π.. στο subdirectory answers που βρίσκεται μέσα στο directory του αρχείου που είναι ενεργό), τότε η οδηγία είναι a href=.. /answers/όνομα αρχείου.. html.. Προσοχή πρέπει να δοθεί στην αρχική τελεία.. Σε περιβάλλον Windows δεν είναι απαραίτητη αλλά σε unix web server μπορεί να μην δουλέψει η παραπομπή χωρίς αυτήν.. Αν η σελίδα βρίσκεται σε ένα ανώτερο directory (δηλαδή το τρέχον directory αποτελεί subdirectory της) τότε η οδηγία είναι a href=.. /όνομα αρχείου.. html κείμενο παραπομπής /a αν πρέπει να ανέβει κατά ένα directory ο browser για να βρει το αρχείο που θέλουμε, ή a href=.. /.. html κείμενο παραπομπής /a αν πρέπει να ανέβει κατά δύο directories.. Προσοχή 1 Είπαμε πως οι οδηγίες της γλώσσας HTML είναι case insensitive (δεν έχει σημασία αν είναι γραμμένες με κεφαλαία ή πεζά).. Αυτό ΔΕΝ ΙΣΧΥΕΙ για τα URLs.. Το πιο πολλά από αυτά πρέπει να προσπελαστούν μέσα από UNIX όπου η διαφορά πεζών και κεφαλαίων υπάρχει (άλλο το αρχείο TEST.. HTM και άλλο το test.. htm).. Το χειρότερο στην περίπτωση αυτή είναι πως αν γράφετε τις σελίδες σας σε περιβάλλον Windows (που είναι και το πιο πιθανό), τότε αυτές θα δουλεύουν μια χαρά εκεί προσπελασμένα σαν local files (ειδικά τα relative links) αλλά δεν θα δουλεύουν όταν τοποθετηθούν στον Web server.. Γι' αυτό πρέπει ΠΑΝΤΟΤΕ να ξαναελέγχετε την εργασία σας όταν τοποθετηθεί στο Internet.. Προσοχή 2 Οι σχετικές παραπομπές δεν λειτουργούν για το πρωτόκολλο file (ο browser προσπαθεί να βρεί το αρχείο στον δικό του δίσκο και όχι στον δίσκο του κόμβου από τον οποίο πήρε αυτή την διεύθυνση.. Για να ορίσουμε παραπομπή από το Dreamweaver, μαρκάρουμε το κείμενο που θέλουμε και είτε γράφουμε το link (αν είναι εξωτερικό site h διεύθυνση γράφεται.. πάντοτε.. με το http:// μπροστά της) ή κάνουμε κλικ στο φακελάκι και επιλέτουμε το αρχείο.. Εναλλακτικά μπορούμε με το στόχαστρο που βρίσκεται δίπλα στο φάκελο να κάνουμε drag drop το όνομα του αρχείου για να δημιουργηθεί η παραπομπή.. NAME.. Υπάρχει επίσης η δυνατότητα να παραπέμψουμε την browser σε άλλο τμήμα της ίδιας Web σελίδας.. Για να το επιτύχουμε αυτό θα χρησιμοποιήσουμε την παράμετρο NAME που λειτουργεί ως εξής:.. Ορίζουμε μια λέξη ή κείμενο μέσα στην Web σελίδα και του δίνουμε ένα όνομα (identifier) π.. παίρνουμε τις λέξεις: Η σχέση Internet και Επιχειρήσεων και τους δίνουμε το όνομα ΧΧΧ.. Αυτό γίνεται με την οδηγία.. a name= ΧΧΧ Η σχέση Internet και Επιχειρήσεων /a (από το μενού δίδεται ως.. Named Anchor.. Συνήθως οι λέξεις αυτές αποτελούν την επικεφαλίδα κάποιας ενότητας μέσα στην τρέχουσα Web σελίδα.. Η παραπομπή σε αυτές θα γίνει με τον εξής τρόπο:.. Περισσότερες πληροφορίες για τις a href= #ΧΧΧ Επιχειρήσεις και το Internet /a.. Δήλωση ενός μεμονωμένου link σε σελίδα που δεν θέλουμε να καταγραφεί στις μηχανές αναζήτησης.. a href=”http://www.. example.. com” title=“Example” rel=”nofollow” Example Link /a.. Αλλαγές στη λειτουργία ενός μεμονωμένου link.. Αν θέλουμε να επηρεάσουμε τον τρόπο λειτουργίας ενός ειδικού link χωρίς να αλλάξει η εμφάνιση και λειτουργία των υπολοίπων μπορούμε να χρησιμοποιήσουμε τμήματα από τον ακόλουθο κώδικα:.. a href= quote.. html style= color: #ffffcc; text-decoration: none; onMouseOver= this.. style.. color='red'; onMouseOut= this.. color='#ffffcc'; Ask for a quote /a.. Το color: #ffffcc ορίζει το χρώμα που θα έχει το link, το text-decoration: none πως δεν θέλουμε υπογράμμιση και το onMouseOver= this.. color='red' το χρώμα που θα έχει η παραπομπή αν φέρουμε τον δρομέα του ποντικιού επάνω της.. Το onMouseOut χρησιμοποιείται αν θέλουμε να αλλάζει χρώμα η παραπομπή όταν έχει περάσει απά πάνω της ο δρομέας (το χρώμα δηλαδή το οποίο θα έχει η παραπομπή μετά από ένα MouseOver ανεξάρτητα του αν ο χρήστης έκανε κλικ η όχι).. Ωστόσο, ένα τέτοιο εφέ κινδυνεύει να αποπροσανατολίσει τον επισκέπτη της σελίδας μας και γι' αυτό στο παράδειγμα δηλώνουμε πως το χρώμα θα πρέπει να ξαναγίνεται ό,τι ήταν και πριν το MouseOver.. Mail link.. Παραπομπή που επιτρέπει στον επισκέπτη να στείλει ένα email με το πρόγραμμα email που έχει στον Η/Υ του (MS Outlook- Outlook Express – Thunderbird κ.. λπ.. Η μορφή είναι: A HREF=”mailto:gepiti@eexi.. gr” Στείλτε μου e-mail /a.. Από το Dreamweaver η αντίστοιχη εντολή είναι.. Email.. link.. Για να δούμε στο Dreamweaver ένα χάρτη με όλες τις παραπομπές σε όλες τις σελίδες του site μας (ένα site map δηλαδή) από το παράθυρο.. επιλέγουμε:.. View - Site Map.. Τακτοποίηση και έλεγχος καλής λειτουργίας.. Link Checking.. : Για να ελέγξουμε αν υπάρχουν broken links επιλέγουμε:.. Check Page.. Links.. Από το ίδιο μενού ελέγχουμε.. Browser Compatibility.. και.. Accessibility.. HTML Validation.. γίνεται από τις επιλογές:.. Validate.. Συνοδευτικά σχόλια για κάθε αρχείο μπορούμε να δηλώσουμε με τις επιλογές.. Design Notes.. Σχόλια μέσα στον κώδικα τοποθετούμε με το.. Comment.. Με την επιλογή.. View.. ακολουθούμενη από.. Rulers.. ή.. Grid.. Guide.. μπορούμε να ορίσουμε τα οπτικά βοηθήματα που μας παρουσιάζει το Dreamweaver.. Παρουσίαση διάφορων οδηγιών.. B.. /B BOLD.. Bold κείμενο.. I.. /I ITALIC.. Italic κείμενο.. BOLD ITALIC ΜΑΖΙ.. Μπορείτε να τοποθετήσετε την μια οδηγία μέσα στην άλλη και να έχετε κείμενο που θα είναι και.. bold italic.. b i κείμενο που είναι και bold italic /i /b.. U.. /U UNDERLINE.. Υπογραμμισμένο κείμενο.. EM.. /EM ΕΜΦΑΣΗ.. Αν θέλουμε να δώσουμε έμφαση σε κάποιο κείμενο το περικλύουμε με αυτή την οδηγία (συνήθως παρουσιάζεται στον browser σαν μια μορφή italic).. STRONG.. /STRONG ΠΕΡΙΣΣΟΤΕΡΗ ΕΜΦΑΣΗ.. Αν θέλουμε να δώσουμε έμφαση σε κάποιο κείμενο (με διαφορετικό όμως τρόπο από την EM ) το περικλύουμε με αυτή την οδηγία (συνήθως παρουσιάζεται στον browser σαν μια μορφή bold).. CODE.. /CODE.. Κείμενο γραμμένο με courier γραμματοσειρά (όπως οι χαρακτήρες σε ASCII τερματικό).. Χρησιμοποιείται κυρίως για να απεικονιστούν εντολές Η/Υ.. SAMP.. /SAMP.. Παρόμοια με την CODE.. TT.. TT/.. Κείμενο γραμμένο με courier γραμματοσειρά.. BIG.. /BIG.. Κείμενο γραμμένο με μεγαλύτερα γράμματα από ότι η γραμματοσειρά στην οποία είναι γραμμένο το κείμενο που το περιβάλει.. SMALL.. /SMALL.. Αντίθετη της BIG.. S.. /S STRIKE THROUGH.. Κάθε γράμμα διαπερνάται από μια οριζόντια γραμμή.. SUB.. /SUB SUBSCRIPT.. Κείμενο που τοποθετείται ελάχιστα πιο κάτω από το επίπεδο των υπολοίπων γραμμάτων της γραμμής (χρήσιμο για απεικόνιση του παρονομαστή ενός κλάσματος).. SUP.. /SUP SUPERSCRIPT.. Κείμενο που τοποθετείται ελάχιστα πιο πάνω από το επίπεδο των υπολοίπων γραμμάτων της γραμμής (χρήσιμο για απεικόνιση του αριθμητή ενός κλάσματος).. PRE.. /PRE.. Κείμενο που θα παρουσιαστεί όπως είναι μορφοποιημένο σε ASCII (δεν θα χαθούν τα διαστήματα μεταξύ των λέξεων).. Κατάλληλο για πίνακες και ascii art (η γραμματοσειρά που χρησιμοποιείται είναι courier).. ΠΡΟΣΟΧΗ: Μερικοί browsers ίσως να έχουν πρόβλημα στην απεικόνιση των Ελληνικών που βρίσκονται μέσα στην PRE αν δεν έχουν ρυθμιστεί σωστά τα Ελληνικά στην fixed font.. HR.. Μια γραμμή (με το χρώμα του background, τρισδιάστατη όψη και μαύρο περίγραμμα) που ξεκινάει από την μια άκρη της Web σελίδας και κανονικά φτάνει μέχρι την άλλη (δεν υπάρχει /HR αφού μόλις φθάσει στην άκρη της οθόνης η γραμμή σταματά μόνη της).. Παράμετροι της HR (Menu:.. Horizontal Rule.. HR NOSHADE ALIGN=RIGHT SIZE=8 WIDTH=75%).. SIZE Ο αριθμός των pixels του πάχους της οθόνης (default το SIZE=2).. WIDTH Το πλάτος της γραμμής (default το WIDTH=100% που καταλαμβάνει ολόκληρη την οθόνη).. ALIGN Χρειάζεται μόνο αν υπάρχει η παράμετρος WIDTH οπότε πρέπει να οριστεί αν η γραμμή θα αρχίζει από αριστερά (ALIGN=LEFT), δεξιά (ALIGN=RIGHT) ή αν τηα είναι κεντραρισμένη (ALIGN=CENTER που είναι το default).. NOSHADE Η γραμμή θα σχεδιαστεί σε μαύρο χρώμα.. BR (Menu:.. Special Characters - Line Break.. Έναρξη νέας γραμμής.. έχω ένα κείμενο που κανονικά στην πρώτη γραμμή χωρούν 9 λέξεις και στην δεύτερη 5.. Με την BR μπορώ η πρώτη γραμμή να έχει μόνο 3 λέξεις, η δεύτερη 5, η τρίτη 4 κτλ.. ΠΡΟΣΟΧΗ: Η BR δεν αφήνει μια κενή γραμμή.. Απλώς μεταφέρει το υπόλοιπο κομμάτι της τρέχουσας γραμμής στην από κάτω.. Για να αφήσετε κενή γραμμή πρέπει ή να αλλάξετε παράγραφο ή να βάλετε 2 οδηγίες BR ( BR BR ).. ADDRESS.. /ADDRESS.. Ειδική γραμματοσειρά (συνήθως italic) που την χρησιμοποιούμε για να γράψουμε μια email διεύθυνση (συνήθως πρόκειται για την υπογραφή του δημιουργού της σελίδας).. Οι περισσότερες επιλογές για το φορμάρισμα του περιεχομένου της σελίδας μας βρίσκονται κρυμμένες πίσω από το μενού.. Common.. στη γραμμή εργασιών.. Αν η γραμμή εργασιών δεν είναι ορατή επιλέγουμε.. Toolbars.. για να την εμφανίσουμε.. Κάνοντας κλικ πάνω στο Common μπορούμε να αλλάξουμε τις επιλογές που εμφανίζονται στη γραμμή αυτή.. ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ (Entities).. Υπάρχουν ειδικοί χαρακτήρες που δεν μπορούν να απεικονισθούν με απλές πληκτρολογήσεις (πατώντας ένα πλήκτρο ή ένα πλήκτρο και το Shift) αλλά μόνο με πιο περίπλοκους τρόπους (π.. πατώντας το Alt και έναν αριθμό).. Πρόκειται για χαρακτήρες που δεν ανήκουν στο κλασικό 7-bit ASCII character set αλλά στο επεκταμένο 8-bit ASCII.. Οι περισσότεροι browsers αναγνωρίζουν αυτούς τους ISO-Latin-1 (ISO-8859-1) χαρακτήρες αλλά με ειδικό τρόπο.. Για να αναγνωρίσουν τους χαρακτήρες αυτούς οι browsers όσων βλέπουν τις σελίδες μας (ο browser του δικού μας Η/Υ δεν θα έχει πρόβλημα) θα πρέπει να γραφούν με ειδικό τρόπο (με έναν κωδικό που αρχίζει με το και τελειώνει με το ;).. το © είναι #169; ενώ το ® γράφεται σαν #174;.. ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ.. Ας υποθέσουμε πως θέλετε να βάλετε μέσα σε μια οδηγία (tag) τον χαρακτήρα ή θα δείτε πως θα υπάρξει πρόβλημα.. Πχ.. την εντολή B 15 7 /B το Netscape 3 την αναγνωρίζει κανονικά ενώ ο Internet Explorer 2 βλέπει μόνο το 15 και ότι άλλο κείμενο υπάρχει πέρα από αυτό σαν bold (δηλαδή διαβάζει το 7 /Β σαν μια οδηγία που δεν καταλαβαίνει και την προσπερνά χωρίς να την εμφανίζει ή να την ερμηνεύει).. Για τον λόγο αυτό οι ειδικοί χαρακτήρες που περιέχονται στις οδηγίες (tags) όταν θέλουμε να τα δούμε μέσα σε μια σελίδα σαν απλοί χαρακτήρες, πρέπει να απεικονιστούν ως εξής:.. Χαρακτήρας Συμβολισμός.. lt;.. gt;.. amp;.. quot;.. Special Characters.. ΣΤΟΙΧΗΣΗ ΚΕΙΜΕΝΟΥ ALIGN.. Έχουμε την δυνατότητα να στοιχίσουμε (να το κάνουμε περασιά όπως λένε οι τυπογράφοι) ένα κείμενο αριστερά (ALIGN=LEFT που είναι το default), δεξιά (ALIGN=RIGHT), ή στο κέντρο (ALIGN=CENTER).. Παραδείγματα:.. Μια οδηγία για επικεφαλίδες: h1 align=right κείμενο /h1.. Μια οδηγία για παραγράφους: P ALIGN=CENTER.. (στην παράγραφο κάθε γραμμή θα είναι κεντραρισμένη).. DIV.. /DIV (HTML 3.. 2).. Λειτουργεί όπως ακριβώς και η ALIGN με την διαφορά πως αναφέρεται σε μια σειρά από επικεφαλίδες ή παραγράφους συνολικά.. Στο παράδειγμα που ακολουθεί οι Επικεφαλίδες 1 και 2 και η Παράγραφος θα στοιχηθούν δεξιά.. DIV ALIGN=RIGHT H1 Επικεφαλίδα  ...   την λίστα τιμών που έχουμε στην διάθεσή μας.. Αν θέλουμε να επιλέγονται περισσότερες τιμές, τότε χρησιμοποιούμε την τιμή CHECKBOX στην παράμετρο TYPE.. UL.. LI INPUT TYPE= CHECKBOX NAME= USA Value= chosen USA.. LI INPUT TYPE= CHECKBOX NAME= CANADA Value= chosen CANADA.. LI INPUT TYPE= CHECKBOX NAME= UK Value= chosen UK.. LI INPUT TYPE= CHECKBOX NAME= GREECE Value= chosen CHECKED GREECE.. /UL.. Όπως φαίνεται από το παράδειγμα, μπορούμε να χρησιμοποιήσουμε και εδώ την CHECKED όπως κάναμε στα RADIO BUTTONS.. Αντίθετα όμως από τα RADIO BUTTONS η NAME δεν έχει την ίδια τιμή σε όλα ενώ έχουμε την ίδια τιμή στην VALUE (=chosen).. Μπορούμε να ακολουθήσουμε το ίδιο σχήμα με τα RADIO BUTTONS ( ίδιο NAME και διαφορετικό VALUE) αλλά επειδή εδώ έχουμε δυνατότητα πολλαπλών επιλογών δεν θα ήταν βολικό να έχουμε διαφορετικές τιμές με το ίδιο όνομα πεδίου (NAME).. ΠΑΡΑΤΗΡΗΣΗ: Τα RADIO BUTTONS και τα CHECK BOXES μπορούν να βρίσκονται μέσα σε κάθε είδους λίστες (αριθμημένες και μη).. RESET.. Πολλές φορές τυχαίνει ο χρήστης που συμπλήρωσε μια φόρμα, να θέλει να ακυρώσει όλες τις επιλογές του για να τις αντικαταστήσει με άλλες.. Αυτό μπορεί να γίνει με την τιμή RESET της παραμέτρου TYPE που δημιουργεί ένα άλλο πλήκτρο επιλογής.. INPUT TYPE= RESET VALUE= Ακύρωση Επιλογών.. SELECT.. /SELECT.. Η οδηγία αυτή δημιουργεί ένα pull down menu επιλογών από τις οποίες ο χρήστης μπορεί να επιλέξει μια.. Αυτή θα σταλεί στο cgi script μαζί με την τιμή της NAME.. P SELECT A COUNTRY:.. SELECT NAME= COUNTRY.. OPTION GREECE.. OPTION FRANCE.. OPTION GERMANY.. OPTION ITALY.. OPTION SPAIN.. OPTION IRELAND.. OPTION FINLAND.. Οι επιλογές εμφανίζονται στο παράθυρο που δημιουργείται με την σειρά που τις καταγράψαμε παραπάνω.. Αν το επιθυμούμε, μπορούμε η τιμή που θα λάβουμε από το cgi script να είναι διαφορετική από αυτή που γράφεται στο OPTION.. Αυτό γίνεται με την παράμετρο VALUE.. OPTION VALUE= HELLAS GREECE.. Η επιλογή για την χρήστη θα είναι GREECE αλλά η τιμή που θα λάβει ο διαχειριστής της φόρμας από το cgi script θα είναι HELLAS.. Άλλες τιμές της SELECT η MULTIPLE και η SIZE.. Η MULTIPLE επιτρέπει στον χρήστη να επιλέγει περισσότερες από μια τιμές (αλλά δεν είναι λειτουργική και καλό είναι να αποφεύγεται).. Η SIZE καθορίζει το μέγεθος του παραθύρου (πόσες γραμμές θα εμφανίζονται).. SELECT NAME= COUNTRY MULTIPLE SIZE= 5.. ΠΡΟΣΟΧΗ! Σε πολλούς browsers η SIZE θα εμφανίσει μια σειρά λιγότερη από την τιμή της, π.. SIZE= 5 σημαίνει πως θα εμφανιστούν 4 επιλογές.. TEXTAREA.. /TEXTAREA.. Αν θέλουμε ο χρήστης μια φόρμας να συμπεριλάει αρκετό κείμενο σε αυτήν (περισσότερο από μια γραμμή), τότε χρησιμοποιούμε την TEXTAREA.. Οι παράμετροί της είναι NAME, ROWS, COLS.. NAME Η γνωστή από τα προηγούμενα.. ROWS Ο αριθμός των γραμμών που θα υπάρχουν διαθέσιμες.. COLS Ο αριθμός των στηλών (χαρακτήρων ανά γραμμή) που θα είναι διαθέσιμες.. Το κείμενο που θα γραφτεί θα είναι συνήθως με γράμματα courier (κάτι που δημιουργεί αρκετά προβλήματα στα Ελληνικά).. TEXTAREA NAME= dokimh ROWS= 10 COLS= 45 Γράψτε εδώ τις παρατηρήσεις ή τα σχόλιά σας: /TEXTAREA.. Στο παράδειγμα αυτό έχουμε 10 γραμμές 45 χαρακτήρων η κάθε μια και τον τίτλο:.. Γράψτε εδώ τις παρατηρήσεις ή τα σχόλιά σας:.. HIDDEN.. Τιμή της παραμέτρου TYPE.. Χρησιμοποιείται για να δώσουμε μια εντολή στο cgi script που δεν θέλουμε (συνήθως διότι δεν χρειάζεται) να είναι ορατή στους χρήστες της φόρμας.. Η σύνταξή της είναι INPUT TYPE= HIDDEN NAME= xyz VALUE= ABC.. ΔΙΑΧΕΙΡΙΣΗ ΤΩΝ ΑΠΟΤΕΛΕΣΜΑΤΩΝ ΜΙΑΣ ΦΟΡΜΑΣ.. Υπάρχουν διάφοροι τρόποι να αποκτά κανείς τα αποτελέσματα μιας φόρμας που κατασκευάζει ανάλογα με το cgi script που χρησιμοποιεί.. Ένας από τους πιο συνηθισμένους είναι να τα λαμβάνει με email.. Ένα τέτοιο παράδειγμα έχουμε στην παρακάτω περίπτωση όπου χρησιμοποιούμε το script FormMail.. pl:.. P FORM METHOD=POST ACTION= http://www.. gr/cgi-bin/FormMail.. pl.. P Γράψτε το όνομά σας: INPUT NAME= theName P.. /UL p TEXTAREA NAME= dokimh ROWS= 10 COLS= 45 Γράψτε εδώ τις παρατηρήσεις ή τα σχόλιά σας: /TEXTAREA P INPUT TYPE= hidden NAME= recipient VALUE= gepiti@eexi.. gr INPUT TYPE= submit VALUE= Υποβολή P INPUT TYPE= RESET VALUE= Ακύρωση Επιλογών.. ΠΡΟΣΟΧΗ! Αν το cgi script βρίσκεται σε UNIX πρέπει να λάβετε υπ' όψιν σας ότι το UNIX είναι case sensitive.. Τα κεφαλαία είναι διαφορετικά από τα μικρά.. Άλλο το FormMail.. pl και άλλο το formmail.. pl (που δεν υπάρχει και φυσικά θα κάνει την φόρμα σας άχρηστη).. Έλεγχος για Broken links - orphan files.. Πολλές φορές κατά τη διάρκεια των εργασιών μας σε ένα site ξεχνάμε κάποια αρχεία ασύνδετα ή τροποποιούμε σελίδες αλλάζοντας τα ονόματα των αρχείων τους χωρίς να διορθώσουμε όσα links (παραπομπές) οδηγούν σε αυτές.. Για να βρούμε και να διορθώσουμε τέτοια λάθη ανοίγουμε μια από τις σελίδες που βρίσκονται στο root directory του site και επιλέγουμε.. Check Links.. Στη συνέχεια κάνουμε κλικ πάνω στο πράσινο τρίγωνο που βρίσκεται πάνω αριστερά στο σχετικό παράθυρο και ζητούμε έλεγχο ολόκληρου του site.. Με τον τρόπο αυτό θα ελεγθούν μόνο τα εσωτερικά links του site μας.. Παραπομπές προς εξωτερικά sites που δεν λειτουργούν ελέγχοναι μόνο με άλλα προγράμματα όπως το HTTrack.. Προσθήκη κινούμενης εικόνας ή ήχου σε web σελίδες:.. Η προσθήκη ενός αρχείου ήχου ή εικόνας είναι αρκετά εύκολη.. Απλώς κάνεις link το αρχείο σε κάποια εικόνα ή κάποιο κείμενο.. αν έχεις το αρχείο ymnos.. wav βάζεις την ακολουθη παραπομπή:.. Για να ακούσετε τον Εθνικό Ύμνο A HREF= ymnos.. wav κάντε κλικ εδώ (290KB.. wav file) /A.. Το πρόβλημα είναι πως ο επισκέπτης της σελίδας θα πρέπει να έχει την δυνατότητα να παίξει wav ή avi ή ότι άλλα αρχεία του δώσουμε.. Επειδή αυτό δεν το ξέρουμε, για να τον διευκολύνουμε τον πληροφορούμε για το μέγεθος του αρχείου (να ξέρει πόσο θα χρειαστεί να περιμένει για να το αποκτήσει) και για την μορφή του μια και δυστυχώς υπάρχουν πάρα πολλές και μπορεί να μην υποστηρίζει την δική μας.. Υπάρχει και το inline video ή sound που παίζει ήχο ή εικόνα αμέσως μόλις φορτωθεί η σελίδα, αλλά αυτό το υποστηρίζει μόνο ο Explorer.. Για το inline video η οδηγία που πρέπει να δωθεί είναι απλώς μια παράμετρος με το όνομα DYNSRC μέσα σε μια οδηγία IMG.. π.. IMG DYNSRC= shmaia.. avi SRC= shmaia.. gif ALT= [mia shmaia poy kymatizei].. Εδώ έχουμε μια εικόνα, την shmaia.. gif που θα εμφανίζεται στατική αν δεν υποστηρίζει την DYNSRC ο browser ή θα είναι το πρώτο καρέ του video αν την υποστηρίζει.. Το ALT φυσικά δεν είναι απαραίτητο αλλά καλό είναι να μπαίνει για όσους δεν βλέπουν εικόνες.. Για το inline sound η οδηγία είναι BGSOUND SRC= ymnos.. wav Την βάζεις όπου θέλεις μέσα στην Web σελίδα αλλά κατά προτίμηση το πάνω μέρος της.. Ο explorer υποστηρίζει αρχεία au, wav midi.. Ερωτήσεις - Απαντήσεις (FAQ).. Πώς μπορώ να εμποδίσω τους επισκέπτες μου να δουν τον κώδικα της σελίδας μου;.. Δεν μπορείτε.. Υπάρχει κάποιος τρόπος με Javascript να εμποδίσουμε τη λειτουργία view source αλλά δεν αξίζει τον κόπο.. Αν πραγματικά θέλει ο επισκέπτης θα σώσει τη σελίδα στο δίσκο του και θα την ανοίξει μετά με το notepad.. Προτείνω απλώς να το πάρετε απόφαση πως αν θέλει μπορεί οπωσδήποτε να το κάνει.. Κατασκευή μιας απλής σελίδας με ενσωματωμένα style sheets.. Συνήθως ο ορισμός των styles της σελίδας μας γίνεται με την τοποθέτηση ειδικών κανόνων (δηλαδή κατάλληλα διατυπωμένων ρυθμίσεων) μετά την οδηγία HTML και πριν από την οδηγία BODY.. Για παράδειγμα, ο κώδικάς μας μπορεί να είναι:.. HTML STYLE TYPE= text/css !--H2 { color: blue }-- /STYLE HEAD TITLE Η πρώτη μου σελίδα με styles /TITLE /HEAD BODY.. Τι είναι οι κανόνες (rules):.. Οι κανόνες αποτελούν το θεμέλιο των Stylesheets.. Στο παραπάνω παράδειγμα υπάρχει ο κανόνας.. H2 { color: blue }.. ο οποίος δηλώνει στον browser πως όπου συναντήσει την οδηγία H2.. /H2 , όλο το κείμενο που περικλύεται από αυτήν θα πρέπει να εμφανιστεί με μπλε χρώμα.. Κάθε κανόνας αποτελείται από.. στοιχεία (.. selectors.. ).. επιλογές (.. declarations.. Στο παραπάνω παράδειγμα το στοιχείο (selector) μας είναι η οδηγία.. H.. (όλες οι οδηγίες HTML αποτελούν selectors), ενώ η επιλογή (declaration) μας είναι το.. color.. : blue.. Κάθε επιλογή αποτελείται από.. παραμέτρους (.. properties.. τιμές (.. values.. Στο παραπάνω παράδειγμα το.. είναι η παράμετρος (property) και το.. blue.. είναι η τιμή (value).. Μπορούμε να χρησιμοποιήσουμε ως στοιχείο οποιαδήποτε οδηγία HTML.. Επίσης, μπορούμε να ομαδοποιήσουμε στοιχεία και να τους ορίσουμε τις ίδιες επιλογές.. Για παράδειγμα το.. H2, P, BLOCKQUOTE { font-family: arial }.. δηλώνει πως οτιδήποτε περικλύεται από τις οδηγίες H2 , P και BLOCKQUOTE θα εμφανιστεί με arial γραμματοσειρά.. Έτσι, ο κώδικας για τον ταυτόχρονο ορισμό αυτών των τριών στοιχείων θα είναι:.. HTML STYLE TYPE= text/css !--H2, P, BLOCKQUOTE { font-family: arial }-- /STYLE HEAD TITLE Η πρώτη μου σελίδα με styles /TITLE /HEAD BODY.. Αν θέλουμε να ορίσουμε πολλά στοιχεία και πολλές επιλογές ο κώδικάς μας θα διαμορφωθεί ως εξής:.. HTML STYLE TYPE= text/css !--H2 { color: green } P, BLOCKQUOTE { font-family: arial }-- /STYLE HEAD TITLE Η πρώτη μου σελίδα με styles /TITLE /HEAD BODY.. Στο παραπάνω παράδειγμα ορίζουμε πως τα περιεχόμενα της H2 θα είναι πράσινα, ενώ τα περιεχόμενα των P και BLOCKQUOTE θα εμφανιστούν με arial γραμματοσειρά.. Ισχύς των κανόνων:.. Οι κανόνες που ορίζουμε με την οδηγία STYLE έχουν ισχύ σε ολόκληρη τη web σελίδα αν δεν αναιρούνται από ένα άλλο Stylesheet.. Επίσης, κληρονομούν τις ιδιότητές τους σε όλα τα μέρη της σελίδας που επηρεάζονται από τα οριζόμενα στοιχεία.. Για παράδειγμα, ας υποθέσουμε πως έχουμε τον ακόλουθο κώδικα:.. HTML STYLE TYPE= text/css !--B { color: blue }-- /STYLE BODY.. B Τα πάντα u i πρέπει /i /u να δουλεύουν τέλεια /B , είπε ο u i Θανάσης /i /u.. /BODY /HTML.. Εδώ έχουμε ορίσει πως το style της B θα είναι μπλε αλλά δεν έχουμε ορίσει τίποτε για τις u και i.. Γι' αυτό, το περιεχόμενό τους θα αποκτήσει το μπλε χρώμα το οποίο, σύμφωνα με όσα έχουμε δηλώσει, εφαρμόζεται σε οτιδήποτε βρίσκεται μέσα στην οδηγία B.. Η εμφάνιση του κειμένου λοιπόν θα είναι:.. Τα πάντα.. πρέπει.. να δουλεύουν τέλεια.. , είπε ο.. Θανάσης.. Τρόποι ορισμού των style sheets.. Ο ορισμός των styles μετά την οδηγία HTML και πριν από την οδηγία BODY (Embedded Stylesheet) είναι ένα μόνο από τους τρόπους με τους οποίους μπορούνα να δηλώσουμε στον browser ποια styles επιθυμούμε να χρησιμοποιήσει.. ?λλοι τρόποι είναι:.. Δήλωση σε συγκεκριμένο σημείο της σελίδας.. Στο ακόλουθο παράδειγμα κάθε οδηγία διαθέτει τα δικά της styles:.. HTML HEAD.. TITLE Δοκιμές Stylesheets /TITLE.. H2 STYLE= color: yellow; font-family: courier Κίτρινα courier γράμματα /H2.. P STYLE= background: lime; font-family: impact Ανοικτό πράσινο φόντο και έντονα γράμματα /P.. Η εμφάνιση του H2 και του κειμένου της παραγράφου θα είναι:.. Κίτρινα courier γράμματα.. Ανοικτό πράσινο φόντο και έντονα γράμματα.. Όπως φαίνεται και από το παραπάνω παράδειγμα, αν δηλώνουμε τα styles σε κάθε οδηγία ξεχωριστά δεν υπάρχει λόγος να ορίσουμε styles στο BODY.. Αυτό φυσικά είναι εξαιρετικά χρονοβόρο και δεν υπάρχει λόγος να το κάνουμε.. Ωστόσο, στην περίπτωση που έχουμε ορίσει στο BODY κάποιο ειδικό style (π.. STYLE TYPE= text/css !--H2 { color: red; font-family: impact }-- /STYLE ) αλλά θέλουμε μια συγκεκριμένη επικεφαλίδα να ακολουθήσει ένα άλλο (π.. H2 STYLE= color: yellow; font-family: courier ) τότε μπορούμε να παρακάμψουμε τον γενικό κανόνα, ορίζοντας κάτι ιδιαίτερο αποκλειστικά γι' αυτήν.. Δήλωση όλων των styles σε ένα μητρικό stylesheet (linking).. Αν το επιθυμούμε έχουμε τη δυνατότητα να ορίσουμε ένα μητρικό stylesheet και να δηλώσουμε σε όλες τις άλλες σελίδες του site μας (ή σε όσες από αυτές επιθυμούμε) ότι οι παράμετροι των styles τους βρίσκονται στο έγγραφο Χ.. Έτσι, κερδίζουμε σε ταχύτητα κατασκευής αλλά και σε ευελιξία διότι αρκεί κάποια αλλαγή στον κώδικα μιας σελίδας για να μεταβάλουμε την εμφάνιση σε όλες όσες έχουν συνδέσει τα styles τους μαζί της.. Για να το επιτύχουμε αυτό δημιουργούμε ένα ειδικό αρχείο κειμένου στο οποίο δηλώνουμε όλα τα styles που επιθυμούμε και δηλώνουμε τη θέση του σε όλες τις σελίδες οι οποίες θα το χρησιμοποιούν ως οδηγό για την εμφάνιση του περιεχομένου τους.. Στο παράδειγμα που ακολουθεί η σελίδα δηλώνει πως τα styles απεικόνισής της θα ληφθούν από το αρχείο basic.. css.. LINK REL=stylesheet HREF= basic.. css TYPE= text/css.. H3 Ασημόγκριζα έντονα γράμματα /H3.. P Ανοικτό γαλάζιο φόντο και arial γράμματα /P.. Το αρχείο basic.. css είναι ένα απλό αρχείο κειμένου (με οποιοδήποτε όνομα θέλουμε και την επέκταση.. css) το οποίο περιέχει τα ακόλουθα:.. H3 { color: silver; font-family: impact }.. P { background: aqua; font-family: arial }.. h1 {font-size: 150%}.. Εννοείται φυσικά ότι αν το basic.. css δεν βρίσκεται στον ίδιο φάκελο με το αρχείο της σελίδας, στο HREF θα δηλωθεί όλη η διαδρομή (π.. HREF=.. /main/basic.. css ).. Εισαγωγή (importing) styles από ένα άλλο stylesheet.. Για να κρύψουμε τα styles μας από παλαιότερους browsers ή να προσθέσουμε έξτρα styles που δεν θέλουμε να υπάρχουν στο βασικό για να μην είναι πολύ μεγάλο, χρησιμοποιούμε την import.. Στο παράδειγμα που ακολουθεί καλούμε το basic.. css για να χρησιμοποιήσουμε τα styles του, αλλά υποδηλώνουμε και δικά μας (H3 { color: orange; font-family: impact }).. Στο παράδειγμα αυτό η επικεφαλίδα H3 δηλώνεται ως color: silver από το basic.. css και color: orange από ξεχωριστή δήλωση που κάναμε μέσα στην οδηγία STYLE.. Σε περίπτωση παρόμοιας αντίφασης θα επικρατήσει η ρύθμιση η οποία έχει δηλωθεί αυτόνομα (εκτός του αρχείου.. css).. STYLE TYPE= text/css.. !-- @import url(basic.. css); H3 { color: orange; font-family: impact } --.. /STYLE.. H3 Πορτοκαλιά έντονα γράμματα /H3.. Το μεγάλο πλεονέκτημα της τεχνικής αυτής (linking) βρίσκεται στην ευελιξία της.. Μπορούμε δηλαδή να συνθέσουμε τα styles μιας σελίδας, συνδυάζοντας τις ρυθμίσεις ενός εξωτερικού (.. css) αρχείου με ρυθμίσεις που συντάσσουμε ειδικά γι' αυτήν.. Αυτή η δυνατότητα δεν υπάρχει στην περίπτωση της δήλωσης όλων των styles σε ένα μητρικό stylesheet (linking).. Προσοχή! Τα @import rules πρέπει να δηλώνονται πρώτα μέσα στο κείμενο.. Επίσης για λόγους συμβατότητας με XHTML το URL πρέπει να βρίσκεται μέσα σε quotes (εισαγωγικά) αν και όπως βλέπουμε στο παράδειγμα, συνήθως λειτουργεί σωστά και χωρίς αυτά.. Σημείωση: το url στο @import url είναι προαιρετικό.. Css classes - inheritance.. Ένας καλός τρόπος να αυξήσουμε την ποικιλία και την ευελιξία των styles που χρησιμοποιούμε είναι η χρήση των classes.. Δίνουμε δηλαδή ονόματα στα διάφορα Styles και τα χρησιμοποιούμε κατά περίπτωση.. Στο παράδειγμα που ακολουθεί δημιουργήσαμε το style.. foo και το εφαρμόζουμε σε μια DIV.. και το style.. foobar που το εφαρμόζουμε σε μια P.. Τα ονόματα των classes ξεκινούν από τελεία και περιέχουν μόνο αλφαριθμητικούς χαρακτήρες.. Επίσης, διαθέτουν την πολύ χρήσιμη δυνατότητα της κληρονομιάς.. Έτσι, με την τιμή inherit δηλώνουμε σε ένα style πως θα ενεργήσει όπως του ορίζει το μητρικό τους (στους καινούριους browsers η συμπεριφορά αυτή είναι default).. Στο παράδειγμα το div class= foo είναι το μητρικό και το p class= bar είναι το κατιόν (παιδί).. Προσοχή: Η τελεία στην αρχή του ονόματος μιας κλάσης (class) δεν αναγράφεται όταν την καλούμε (π.. p class= foobar ).. foo {.. background-color: white;.. color: black;.. }.. bar {.. background-color: inherit;.. color: inherit;.. font-weight: normal;.. foobar {.. background-color: green;.. color: blue;.. HEAD TITLE Ο Τίτλος /TITLE /HEAD.. BODY bgcolor=red.. h3 Μια Δοκιμή /h3.. div class= foo.. p class= bar.. Λίγο κείμενο σε μία παράγραφο.. /p.. p class= foobar.. Λίγο ακόμη κείμενο σε μία άλλη παράγραφο.. /div.. Χρήση.. CSS Stylesheets στο.. Dreamweaver.. Τι είναι τα Stylesheets: Τα Cascading Stylesheets (για συντομία, CSS) εμφανίστηκαν για πρώτη φορά το 1996.. Αποτελούν μια ειδική διάλεκτο της γλώσσας HTML και μας επιτρέπουν να ορίσουμε με μεγαλύτερη ακρίβεια τον τρόπο απεικόνισης των σελίδων μας από τον browser.. Για την αυτόματη κατασκευή CSS Stylesheets από το Dreamweaver στην αρχική σελίδα του προγράμματος επιλέγουμε.. from.. Samples.. και στη συνέχεια.. CSS.. Style.. Sheets.. Από εκεί.. επιλέγουμε το.. style.. sheet που θέλουμε και μετά το αποθηκεύουμε.. Κατόπιν, δημιουργούμε την σελίδα (ή τις σελίδες που θέλουμε να καλύπτουν αυτό το stylesheet) και το ενσωματώνουμε με:.. Text.. Styles.. Attach.. Sheet.. ή με drag and drop από τα Assets μέσα στον κώδικα της σελίδας.. Με την επιλογή all βλέπουμε όλα τα διαθέσιμα styles ενώ με την current πλήρεις πληροφορίες μόνο για ένα κάθε φορά.. Οι ρυθμίσεις που δηλώνονται με τον παραπάνω τρόπο ισχύουν για ολόκληρη τη σελίδα και αποθηκεύονται σε εξωτερικό αρχείο.. Για ρυθμίσεις που ισχύουν μόνο για όσες σελίδες καλούν το συγκεκριμένο αρχείο.. Εισαγωγή Style Sheet.. Αλλαγή ρυθμίσεων για ένα tag ή class.. Προσθήκη νέου tag.. Μετονομασία μιας class.. Το Dreamweaver έχει την κακή συνήθεια να δίνει σε κάθε class ένα όνομα της μορφής.. style1,.. style2 κ.. που δεν είναι και ιδιαίτερα πρακτικό για να καταλαβαίνουμε τι κάνει η class.. Έτσι, καλό είναι να τα μετονομάζουμε με τον ακόλουθο τρόπο:.. Η οδηγία span.. Πολλές φορές θα δούμε το dreamweaver να ορίζει style σε μια ολόκληρη παράγραφο, ενώ εμείς το θέλουμε μόνο για ένα μέρος της.. Για παράδειγμα: p class= style13.. Κάποιο κείμενο όπου θέλουμε το class να εφαρμοστεί μόνο σε ένα τμήμα του κειμένου.. Για να παρακάμψουμε αυτόν τον σκόπελο αλλάζουμε τον κώδικα ως εξής: Κάποιο κείμενο όπου θέλουμε το class να εφαρμοστεί μόνο span class= style13.. σε ένα τμήμα.. /span του κειμένου.. Ορισμός φόντου – κειμένου με CSS Styles στο Dreamweaver.. Επιλέγουμε.. – του δίνουμε ένα όνομα ή επιλέγουμε την Tag που επιθυμούμε (οι ρυθμίσεις θα ισχύσουν για όλες τις εμφανίσεις της στο κείμενο) και επιλέγουμε αν θέλουμε οι ρυθμίσεις να ισχύουν για όλο το site ή μόνο για την τρέχουσα σελίδα.. Αν θέλουμε να ορίσουμε το φόντο τότε ως τύπο επιλέγουμε.. Background.. Ορίζουμε το χρώμα που επιθυμούμε ή το γραφικό που θα αποτελέσει το φόντο μας.. Αν δεν εμφανίζεται το φόντο πηγαίνουμε στο παράθυρο των CSS Styles (ανοίγει από την επιλογή Window) και με δεξί κλικ πάνω στο όνομα του style επιλέγουμε.. Apply.. Αντίστοιχα λειτουργούμε και με το κείμενο.. Ο αριθμός των διαθέσιμων επιλογών για CSS είναι τεράστιος για να τον απομνημονεύει κανείς.. Η πλήρης λίστα είναι διαθέσιμη στο: http://www.. w3schools.. com/css/css_reference.. asp.. Για παράδειγμα το μέγεθος του κειμένου μπορεί να οριστεί με CSS styles όπως:.. body{font-size: x-large}.. p{font-size: 10px}.. p Λίγο κείμενο σε μία παράγραφο /p.. br Λίγο ακόμη κείμενο σε μία άλλη παράγραφο.. Οι γενικές ρυθμίσεις που αφορούν το μέγεθος του κειμένου είναι:.. Τιμή.. Περιγραφή.. xx-small.. x-small.. small.. medium.. large.. x-large.. xx-large.. Διάφορες διαστάσεις κειμένου με default το medium.. smaller.. Μικρότερο από τη μητρική κλάση.. larger.. Μεγαλύτερο από τη μητρική κλάση.. length.. Συγκεκριμένο μήκος γραμμάτων.. %.. Ποσοστό της μητρικής κλάσης.. Υπάρχουν κυριολεκτικά χιλιάδες css ρυθμίσεις.. Για παράδειγμα για να ορίσεις από ποιά κατεύθυνση θα ακούγεται ο ήχος σε ένα sound element υπάρχει το Azimouth:.. p style= azimuth : right-side; When this paragraph is read, it will heard from the right side.. Η δική μας συμβουλή είναι: Χρησιμοποιήστε μόνο όσες αναγνωρίζει το ίδιο το Dreamweaver.. Διαφορετικά, πιθανότατα θα έχετε πρόβλημα υποστήριξής τους από κάποιους browsers.. Styles που δεν είναι βασισμένα σε CSS.. Πολλές φορές επιθυμούμε να δηλώσουμε styles τα οποία δεν έχουν την ίδια ισχύ σε όλες τις οδηγίες.. Για παράδειγμα, πιθανόν να θέλουμε το κείμενο μιας και μόνης παραπομπής να έχει συγκεκριμένο χρώμα και να μην είναι υπογραμμισμένο.. Αυτό το επιτυγχάνουμε με τον παρακάτω (Javascript) κώδικα:.. color='#ffcc'; onMouseOut= this.. color='#ffffcc'; Παραπομπή /a.. Layers (App Divs).. Με τα Layers είναι δυνατόν να δημιουργήσουμε μια πολυεπίπεδη σελίδα.. Για να εισάγουμε σε μια σελίδα ένα νέο Layer επιλέγουμε.. Layout.. Object.. Layer.. Στη συνέχεια με το ποντίκι μας ορίζουμε τις διαστάσεις του καθώς και τον χώρο που αυτό θα βρίσκεται.. Συνήθως θα θέλουμε να αλλάζουμε στοιχεία πότε στο ένα Layer και πότε στο άλλο.. Η κίνηση μεταξύ των Layers γίνεται από ειδικό παράθυρο που γίνεται ορατό με την επιλογή.. Window.. Layers.. Θεωρητικά η σελίδα μπορεί να αποθηκευτεί ως έχει.. Ωστόσο, επειδή οι παλαιοί browsers δεν υποστηρίζουν Layers είναι προτιμότερο να τα μετατρέπουμε σε tables.. Αυτό επιτυγχάνεται με.. Modify.. Convert.. Layers to Table.. Αν το επιθυμούμε μπορούμε να τοποθετήσουμε ένα layer πάνω σε ένα άλλο.. Ο κώδικας των layers περιέχει μεταξύ άλλων την παράμετρο z-index η οποία ρυθμίζει τη σειρά με την οποία θα εμφανίζονται τα αλληλοεπικαλυπτόμενα layers.. Οδηγίες χρήσης WordPress.. Εισαγωγή.. Το WordPress είναι μια εφαρμογή CMS (Content Management System) για την ευκολότερη διαχείριση ενός web site.. Αντί οι σελίδες να παράγονται «με το χέρι» κάθε φορά που θέλουμε να προσθέσουμε σε αυτό περιεχόμενο, τα δεδομένα που θέλουμε να δημοσιεύσουμε τοποθετούνται σε μια βάση δεδομένου και από αυτή παράγονται αυτόματα οι αντίστοιχες web σελίδες με τη μορφή που έχουμε εμείς ορίσει εκ των προτέρων.. Ο καλύτερος τρόπος για να μάθει κανείς πώς να χρησιμοποιήσει το WordPress είναι να εκπαιδευτεί πάνω στο ελεύθερο δοκιμαστικό site που είναι διαθέσιμο στη διεύθυνση.. http://wordpress.. com/.. Από την επιλογή My Account (απλώς κάντε click πάνω δεξιά στο username σας) μπορείτε να ορίσετε τις βασικές ρυθμίσεις του λογαριασμού σας.. Στο.. Interface.. Language.. επιλέξτε Ελληνικά γιατί ο παρόν οδηγός έχει γραφτεί με βάση αυτή την επιλογή και στην συνέχεια κάντε απλώς.. Changes.. Δημιουργία Κατηγορίας.. Θα μπορούσατε να δουλέψετε και χωρίς αυτές αλλά αργά ή γρήγορα θα χρειαστεί να ορίσετε κατηγορίες περιεχομένου.. Ας το κάνουμε λοιπόν από την αρχή.. Αν δεν τον βλέπετε αυτόματα μπορείτε να πάτε στον.. πίνακα ελέγχου.. από το μενού που ανοίγει όταν περάσει το ποντίκι πάνω από το username σας (πάνω δεξιά) και στη συνέχεια κινηθεί πάνω στο όνομα του blog σας.. (Αν και ονομάζεται blog ο λογαριασμός σας στο WordPress διαθέτει όλα τα χαρακτηριστικά ενός καλού web site CMS).. Κάντε click στις.. Κατηγορίες.. για να προσθέστε μια καινούρια (ας την ονομάσουμε.. δοκιμή.. Αν η κατηγορία σας έχει.. Parent.. (δηλαδή βρίσκεται μέσα σε άλλη κατηγορία) δηλώνεται την ιεραρχικά ανώτερή της.. Διαφορετικά αφήνετε την επιλογή αυτό στο Όχι.. Μπορείτε να δώσετε και περιγραφή στην κατηγορία σας αλλά αυτή άλλες φορές θα εμφανίζεται και άλλες όχι, ανάλογα με το theme (εμφάνιση) που έχετε διαλέξει.. Ακολούθως επιλέγετε.. Προσθήκη Νέας Κατηγορίας.. Από το ίδιο μενού μπορείτε να αλλάξετε τις ρυθμίσεις μιας κατηγορίας ή να τη διαγράψετε (αν περάσετε το ποντίκι σας πάνω στο όνομά της θα εμφανιστούν οι σχετικές επιλογές).. Η διαγραφή κατηγορίας δεν διαγράφει τα άρθρα (posts) της.. Τα μεταφέρει απλώς στην default κατηγορία.. Δημοσίευση Άρθρου.. Άρθρα.. στην αριστερή μπάρα επιλέγετε.. Προσθήκη Νέου.. και συμπληρώνετε να σχετικά πεδία.. Για τις επιλογές μορφοποίησης μπορείτε να χρησιμοποιήσετε τον.. κειμενογράφο.. ή να δώσετε απευθείας κώδικα.. από τη σχετική επιλογή.. Προσέξτε όμως πως για λόγους ασφαλείας (ή επειδή η έκδοση είναι δωρεάν) δεν γίνονται δεκτές όλες οι οδηγίες HTML ή έχουν περιορισμένη ισχύ (π.. όχι styles ή iframes).. Με την.. προεπισκόπιση.. ανοίγει καινούριο παράθυρο για να δούμε πως θα φαίνεται το κείμενο, ενώ με τη.. Δημοσίευση.. δημοσιεύεται.. Προσέξτε πως δεν σας είπα να τοποθετήσετε σε κάποια κατηγορία το άρθρο σας.. Μπορεί να δημοσιευθεί και έτσι και να επιλέξει το WordPress μια κατηγορία αλλά το σωστό είναι να του ορίζετε κατηγορία πριν τη δημοσίευση (ή αν το ξεχάσετε μετά).. Για την επεξεργασία ενός άρθρου πηγαίνουμε στο.. All.. Posts.. Tags.. Με αυτές μπορώ να ορίσω τις λέξεις ή φράσεις που περιγράφουν το κείμενο.. Εμφανίζονται στο κάτω μέρος του άρθρου (ή αλλού ανάλογα με το theme) και καλύτερα να τις ορίζω από το άρθρο παρά από το σχετικό μενού.. Εργαλεία.. Από εδώ μπορείτε να διαγράψετε το site σας και να εισαγάγετε ή να εξαγάγετε δεδομένα.. Υπάρχουν επίσης και άλλες επιλογές όπως η δημοσίευση κειμένων με αποστολή τους μέσω email.. Εμφάνιση.. Εδώ θα βρείτε την επιλογή.. Menus.. για να εμφανίσετε την κατηγορία σας στο κεντρικό μενού.. Από την επιλογή.. κατηγορίες.. επιλέγετε όσες θέλετε να εμφανίζονται.. Πρέπει να κάνετε click στο.. Menu.. για να υλοποιηθεί η εμφάνιση.. Θέματα.. (Themes) μπορείτε να καθορίσετε την εμφάνιση του blog/site σας.. Υπάρχουν πολλά έτοιμα για να επιλέξετε από τα οποία κάποια είναι δωρεάν και άλλα επί πληρωμή.. Κυκλοφορούν επίσης πολύ περισσότερα online.. Σε κάποια από τα themes μπορείτε να βάλετε τις δικές σας ρυθμίσεις.. Για παράδειγμα στο Twenty Ten που προτιμώ εγώ μπορείτε να αλλάξετε την εικόνα της κεφαλής και το φόντο.. Οι ίδιες επιλογές υπάρχουν και από το μενού.. Η επιλογή.. Widgets.. προσφέρει διάφορες έξτρα λειτουργικότητες για το blog σας (στη βασική θέση μπορείτε να βάλετε περισσότερες από μια).. Akismet.. προστατεύει από blog spam, ενώ το.. Facebook.. Like.. Box.. συνδέει τους επισκέπτες σας με τη σελίδα σας στο facebook.. To.. RSS.. είναι επίσης πολύ χρήσιμο ώστε να δημοσιεύετε περιεχόμενο από άλλες πηγές μαζί με το δικό σας.. Σχόλια – Polls – Ratings.. Από αυτές τις επιλογές ρυθμίζετε τις δυνατότητες συμμετοχής των χρηστών στο blog ή το site σας.. Πολυμέσα.. Εδώ μπορείτε να διαχειριστείτε τη βιβλιοθήκη εικόνων, αρχείων ήχου και βίντεο που έχετε δημιουργήσει.. Σελίδες.. Χρήσιμες στην περίπτωση που χρειάζεστε να αυτόνομη σελίδα αντί για μια κατηγορία (π.. το περί ή η σελίδα επικοινωνίας).. Σύνδεσμοι.. Εδώ μπορούμε να δημιουργήσουμε μια συλλογή από links τακτοποιημένα σε διάφορες κατηγορίες.. Αυτά μπορούν να προστεθούν στη σελίδα μας ως widget.. Η ανατομία ενός Theme.. Τα WordPress Themes βρίσκονται σε subdirectories του wp-content/themes/.. Για παράδειγμα το Theme που ονομάζεται test θα βρίσκεται στο directory wp-content/themes/test/.. Μη χρησιμοποιείτε αριθμούς στα ονόματα των theme σας γιατί δεν θα φαίνονται στη λίστα available themes.. Σε κάθε εγκατάσταση του WordPress υπάρχει ένα default theme.. Μπορείτε να το εξετάσετε για να πάρετε μια ιδέα πως λειτουργεί ένα απλό theme.. Τα WordPress Themes έχουν τρία είδη αρχείων εκτός φυσικά από τις εικόνες και τα αρχεία JavaScript.. Υπάρχει το style.. css, το προαιρετικό functions file (functions.. php) και τα template files που ορίζουν πως λειτουργεί η σελίδα.. Μπορείτε πάντως αν θέλετε να φτιάξετε ένα child theme που επειδή έχει γονέα με όλα τα επιθυμητά χαρακτηριστικά χρειάζεται μόνο ένα css και ό,τι αρχεία εικόνων χρειάζεστε.. Ξεκινώντας το Theme σας πρέπει να του δηλώσετε μια σειρά από πληροφορίες ώστε να καταστεί μοναδικό.. Ας δούμε τις πληροφορίες του πολύ δημοφιλούς Twenty Ten.. /*.. Theme Name: Twenty Ten.. Theme URI: http://wordpress.. org/.. Description: The 2010 default theme for WordPress.. Author: wordpressdotorg.. Author URI: http://wordpress.. Version: 1.. Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional).. License:.. License URI:.. General comments (optional).. */.. Για την εγκατάσταση νέου Theme επιλέγουμε.. και εκεί το tab.. Εγκατάσταση Θεμάτων.. Προσέξτε πως για κάθε νέο Theme θα πρέπει να ορίσετε από την αρχή τις.. μονάδες.. όπως έχουν μεταφραστεί στα Ελληνικά τα.. widgets.. Για να τροποποιήσετε την εμφάνιση ενός Theme μέσα από το WordPress επιλέξτε.. Theme.. Options.. Για τα τροποποιήσετε ολόκληρο το Theme μέσα από το WordPress επιλέξτε.. Επεξεργασία.. Προσέξτε πολύ τι κάνετε διότι σε περίπτωση λάθους η επιδιόρθωση ίσως αποδειχθεί πολύ επίπονη.. Εγκατάσταση WordPress.. Για την εγκατάσταση του Wordpress σε ένα web hosting χρησιμοποιούμε την αυτόματη υπηρεσία Fantastico.. Η αρχική σελίδα μας ενημερώνει για τις νέες εκδόσεις προγραμμάτων που χρησιμοποιούμε ήδη ώστε να προβούμε σε αυτόματη αναβάθμιση.. UPDATE NOW!.. Following installations are not up-to-date.. Keep your installations secure and up-to-date and ensure that future versions of Fantastico will be able to maintain your installations by updating now.. Επίσης από τη σελίδα κάθε προγράμματος μπορούμε να προβούμε σε απεγκατάσταση.. - You chose to install in the domain.. gepiti.. com.. , in a subdirectory called.. wordpress.. - The access URL will be:.. http://gepiti.. com/wordpress.. Install WordPress (3/3).. /home/gepiti/public_html/wordpress/wp-config.. php.. configured.. /home/gepiti/public_html/wordpress/data.. sql.. Please notice:.. We only offer auto-installation and auto-configuration of WordPress but do not offer any kind of support.. You need a username and a password to enter the admin area.. Your username is.. XXXX.. Your password is.. xxxxxx.. The full URL to the admin area.. (Bookmark this!).. :.. com/wordpress/wp-admin/.. Πίνακας Ελέγχου:.. Updates.. Πρώτη μας δουλειά είναι να πάμε στην επιλογή Updates να δούμε αν υπάρχει νεότερη έκδοση ώστε να την εγκαταστήσουμε αυτόματα.. Αν δεν φαίνεται η επιλογή updates θα τη δούμε περνώντας το ποντίκι μας πάνω από την επιλογή (Dashboard).. An updated version of WordPress is available.. You can update to.. WordPress 3.. 3.. 2.. automatically or download the package and install it manually:.. Εκτός από το ίδιο το WordPress μπορούμε να ενημερώσουμε τα plugins μας αλλά και τη λίστα των διαθέσιμων Themes.. Settings.. : Οι βασικές ρυθμίσεις.. Writing.. : Εδώ ορίζεται το Default Post Category το Default Post Format και το Default Link Category.. Interface Language.. Αλλάζει από το: Users – Personal Settings.. Blog Language.. Αλλάζει από το.. Settings –.. Αν δεν υπάρχει δυνατότητα αλλαγής γλώσσας πρέπει να επισκεφθούμε το http://www.. wpmania.. gr και να διαβάσουμε από εκεί τις εκάστοτε διαθέσιμες οδηγίες.. Αρχικά θα πρέπει να προμηθευτείς το ελληνικό πακέτο με την ονομασία el.. mo.. Στη συνέχεια αφού εντοπίσεις και ανοίξεις το αρχείο wp-config.. php (το οποίο βρίσκεται στον κύριο φάκελο του WordPress), εντόπισε την ακόλουθη γραμμή.. define ('WPLANG',.. );.. και αντικατέστησε την (copy-paste) με την ακόλουθη.. define ('WPLANG', 'el');.. Ακολούθως θα πρέπει να εντοπίσεις και να ανοίξεις τον φάκελο wp-includes, ο οποίος επίσης βρίσκεται στον κύριο φάκελο του WordPress.. Μέσα στον φάκελο wp-includes δημιούργησε ένα νέο φάκελο με την ονομασία languages.. Τέλος ανέβασε το ελληνικό πακέτο el.. mo στον φάκελο languages που μόλις έχεις δημιουργήσει.. Αν όλα πήγαν καλά το περιβάλλον θα είναι στα Ελληνικά.. Γιώργος Επιτήδειος..

    Original link path: /seminars/htmldr_a/index.html
    Open archive

  • Title: HTML Dreamweaver Μέρος Β
    Descriptive info: Β’ Μέρος.. ΠΛΑΙΣΙΑ (Frames).. Η κατασκευή Web σελίδων που να περιλαμβάνουν περισσότερα από ένα ανεξάρτητα ή (πιο συχνά) συνδεδεμένα μεταξύ τους πλαίσια αποτελεί ένα από τα πιο νέα και ισχυρά εργαλεία που μας δίνει η γλώσσα HTML.. Υποστηρίζονται μόνο από τα Netscape 2 και άνω και Internet Explorer 3 και άνω.. Ωστόσο αυτό δεν αποτελεί πια σοβαρό πρόβλημα αφού οι περισσότεροι χρήστες χρησιμοποιούν κάποιο από τα προγράμματα αυτά.. Για την αυτόματη κατασκευή Frames από το Dreamweaver στην αρχική σελίδα του προγράμματος επιλέγουμε.. Framesets.. Επιλέγουμε το συνδυασμό των Frames που επιθυμούμε και από τα.. –.. Document.. ορίζουμε το encoding της σελίδας.. Στη συνέχεια επιλέγουμε.. Create.. και στην προτροπή ονοματοδοσίας κάθε frame είτε δίνουμε δικά μας ονόματα, είτε διατηρούμε όσα μας προτείνει το πρόγραμμα.. Στη συνέχεια το Dreamweaver χωρίζει το Design View σε τμήματα, κάθε ένα από τα οποία αντιστοιχεί σε μια σελίδα.. Ορίζουμε τις ρυθμίσεις της σελίδας (π.. το Encoding) και στη συνέχεια τοποθετούμε περιεχόμενο και τις αποθηκεύουμε.. Αν στην πορεία της εργασίας μας αποφασίσουμε πως δεν είχαμε κάνει καλή επιλογή από frames και θέλουμε να προσθέσουμε και νέα κάνουμε κλικ στο Design View του frame που θέλουμε να χωρίσουμε περαιτέρω και επιλέγουμε.. Frameset.. Επειδή από το Document View βλέπουμε μόνο τις σελίδες που αποτελούν το Frameset για να αποθηκεύσουμε την ορίζουσα σελίδα μπορούμε να ζητήσουμε Preview όλου του set και αυτομάτως θα μας προταθεί η αποθήκευσή του.. FRAMESET.. Αν υποθέσουμε πως θέλουμε να χωρίσουμε την οθόνη μας σε n τμήματα (2 ή περισσότερα), τότε αυτό θα απαιτήσει από εμάς αρχικά την κατασκευή n+1 σελίδων HTML.. Μια σελίδα για κάθε παράθυρο, συν μια σελίδα που θα καθορίζει τις θέσεις των άλλων.. Αυτή η τελευταία σελίδα είναι η ορίζουσα σελίδα που θα καθορίσει την θέση και το μέγεθος των πλαισίων μέσα στα οποία θα τοποθετηθούν οι υπόλοιπες.. Στην ορίζουσα σελίδα, η οδηγία BODY αντικαθίσταται από την FRAMESET (οι δύο αυτές οδηγίες είναι αμοιβαία αποκλειόμενες).. Η FRAMESET ορίζει το μέγεθος των πλαισίων και δέχεται στο εσωτερικό της μια άλλη οδηγία, την FRAME που καθορίζει το περιεχόμενό τους.. Η FRAMESET δέχεται τις ακόλουθες παραμέτρους που καθορίζουν τον αριθμό και το μέγεθος των πλαισίων που θα δημιουργηθούν:.. COLS= X,X,X.. Η COLS καθορίζει τις στήλες, δηλαδή τα κάθετα πλαίσια που θα δημιουργηθούν.. Στο παράδειγμα αυτό έχουν οριστεί τρεις στήλες.. Έτσι θα δημιουργηθούν τρία κάθετα πλαίσια με μορφή:.. Όσο περισσότερες τιμές περιέχει η COLS τόσο περισσότερα κάθετα πλαίσια θα δημιουργηθούν.. Το πλάτος του κάθε πλαισίου καθορίζεται από τις τιμές που θα τοποθετηθούν μεταξύ των κομμάτων μέσα στα εισαγωγικά (δηλαδή τις τιμές που θα έχει κάθε Χ).. Οι τιμές αυτές μπορεί να οριστούν σε pixels, σαν ποσοστό της συνολικής οθόνης ή σαν ελεύθερες (θα καθορίσει ο browser το μέγεθος του πλαισίου).. στην περίπτωση FRAMESET COLS= 150,15%,* έχουμε το πρώτο πλαίσιο να έχει πλάτος 150 pixels, το δεύτερο να καταλαμβάνει το 15% της οθόνης και το τρίτο να έχει έκταση όσο όλο το εναπομείναν μέρος της.. Το μήκος φυσικά του πλαισίου καθορίζεται από το περιεχόμενό του.. Επειδή, δεν γνωρίζετε το μέγεθος που παραθύρου από το οποίο θα βλέπει ο επισκέπτης σας την σελίδα που δημιουργήσατε, προσπαθήστε πάντοτε να ορίζετε σχετικές τιμές ή να έχετε μια τιμή σε *.. Αν υπάρχουν περισσότεροι από ένας αστερίσκοι, τότε θεωρούνται ισότιμοι.. αν δώσουμε μια οδηγία της μορφής FRAMESET COLS= *,* , τότε ο browser θα χωρίσει την οθόνη σε 2 ίσα μέρη:.. ROWS= X,X,X.. Αντίστοιχα ισχύουν και για την ROWS που με τον ίδιο τρόπο χωρίζει την οθόνη σε οριζόντια πλαίσια με μορφή:.. FRAME.. Αφού αποφασίσαμε για την διαρρύθμιση που θα έχουν τα πλαίσια της σελίδας μας (αν θα είναι στήλες ή γραμμές και τον αριθμό τους), πρέπει τώρα να ορίσουμε τι θα περιέχει το καθένα.. Αυτό γίνεται με την οδηγία FRAME που τοποθετείται μέσα στην FRAMESET.. Η FRAME συντάσσεται με τον ίδιο τρόπο όπως η IMG.. Έχουμε δηλαδή:.. FRAME SRC= page1.. html όπου page1.. html το αρχείο που θέλουμε να εμφανίζεται στο πλαίσιο αυτό.. Έτσι ολόκληρη η ορίζουσα σελίδα των πλαισίων έχει ως εξής:.. HTML HEAD TITLE ΠΑΡΑΔΕΙΓΜΑ FRAMES /TITLE /HEAD.. FRAMESET COLS= 25%,30%,* FRAME SRC= page1.. FRAME SRC= page2.. html FRAME SRC= page3.. html /FRAMESET /HTML.. Στο παράδειγμα αυτό έχουμε ένα σύνολο από τρία κάθετα πλαίσια (στήλες) από τα οποία το πρώτο καταλαμβάνει το 25% της οθόνης και περιέχει την σελίδα που βρίσκεται στο αρχείο page1.. html, το δεύτερο καταλαμβάνει το 30% της οθόνης και περιέχει την σελίδα που βρίσκεται στο αρχείο page2.. html, και το τρίτο καταλαμβάνει το υπόλοιπο τμήμα της οθόνης (45%) και περιέχει την σελίδα που βρίσκεται στο αρχείο page3.. Δηλαδή η θέση των πλαισίων καθορίζεται ανάλογα με την σειρά που αναφέρονται μέσα στην οδηγία FRAMESET.. Από αριστερά προς τα δεξιά για τις στήλες και από πάνω προς τα κάτω για τις γραμμές.. ΠΑΡΑΤΗΡΗΣΕΙΣ:.. Αν δοκιμάσετε να δείτε τα πλαίσια που δημιουργήσατε χωρίς να έχετε προσθέσει την οδηγία FRAME (π.. βάλετε απλώς.. FRAMESET COLS= 25%,30%,* /FRAMESET.. Δεν θα δείτε τίποτε.. Πρέπει να έχει οριστεί και η FRAME για να λειτουργήσει ο οδηγία /FRAMESET.. Η χρήση πλαισίων (Frames) δεν είναι απλή υπόθεση.. Εκτός από τον σχεδιασμό της αρχιτεκτονικής και την κατασκευή τους πρέπει να λάβουμε υπ' όψιν μας και τα περιεχόμενα κάθε πλαισίου για να βεβαιωθούμε πως θα μπορεί να τα διαβάσει με άνεση ο επισκέπτης των σελίδων μας.. Eδώ βοηθά πολύ το Διάγραμμα Ανάγνωσης (Storyboarding).. NOFRAME.. Δυστυχώς, αρκετοί browsers δεν υποστηρίζουν πλαίσια (Frames).. Αυτό σημαίνει πως, τίποτε από ότι έχετε δημιουργήσει δεν θα είναι ορατό από τους ανθρώπους που τους χρησιμοποιούν.. Για να περιορίσουμε τα προβλήματα που δημιουργεί μια τέτοια κατάσταση χρησιμοποιούμε την οδηγία NOFRAME.. Οτιδήποτε βρίσκεται μέσα σε αυτήν (και μπορείτε να βάλετε κείμενο, άλλες οδηγίες, παραπομπές κτλ.. ) δεν θα εμφανιστεί αν ο browser υποστηρίζει πλαίσια.. Θα εμφανιστεί όμως αν ο browser δεν τα υποστηρίζει.. Έτσι, μπορείτε να χρησιμοποιήσετε την NOFRAME για να πληροφορήσετε τον επισκέπτη σας πως δεν βλέπει την σελίδα σας διότι δεν υποστηρίζει Frames ο browser του ή για να δημιουργήσετε μια εναλλακτική πρώτη σελίδα ειδικά για τέτοιες περιπτώσεις.. Η NOFRAME τοποθετείται μέσα στην FRAMESET.. html NOFRAME Ο browser που χρησιμοποιείτε δεν υποστηρίζει Frames.. Για μια πιο απλή περιήγηση των σελίδων μας κάντε κλικ A HREF= noframes.. html εδώ /A.. /NOFRAME /FRAMESET /HTML.. Πιο Περίπλοκοι Συνδυασμοί Πλαισίων.. Ο πιο συνηθισμένος συνδυασμός πλαισίων που συναντούμε σε Web σελίδες είναι αυτός που περιέχει 2 στήλες.. Ωστόσο, σε αρκετές περιπτώσεις μπορεί να χρειαστούμε κάτι πιο περίπλοκο, δηλαδή ένα συνδυασμό γραμμών και στηλών.. Για να το πετύχουμε αυτό χρησιμοποιούμε την οδηγία FRAMESET μέσα στον εαυτό της.. Μπορούμε να ξεκινήσουμε ορίζοντας πρώτα τις στήλες και μετά τις γραμμές ή το αντίστροφο.. Αυτό θα εξαρτηθεί από την αρχιτεκτονική που θέλουμε να πετύχουμε.. Μερικά παραδείγματα είναι τα ακόλουθα:.. FRAMESET ROWS= 75%,* FRAMESET COLS= 25%,* FRAME SRC= page1.. html /FRAMESET FRAME SRC= page3.. Ορίσαμε 2 γραμμές και μετά χωρίσαμε την πρώτη σε 2 στήλες.. FRAMESET COLS= 25%,* FRAME SRC= page1.. FRAMESET ROWS= 75%,*.. html /FRAMESET /FRAMESET.. Ορίσαμε 2 στήλες και μετά χωρίσαμε τη δεύτερη σε 2 γραμμές.. FRAMESET ROWS= *,25% FRAMESET COLS= 25%,* FRAME SRC= page1.. html FRAME SRC= page2.. html /FRAMESET.. FRAMESET COLS= 25%,* FRAME SRC= page3.. FRAME SRC= page4.. Ορίσαμε 2 γραμμές και μετά χωρίσαμε κάθε μια σε 2 στήλες.. Κίνηση Μεταξύ Πλαισίων.. Τα Πλαίσια (Frames) που δημιουργήσαμε παραπάνω έχουν πλήρη αυτονομία.. Ο επισκέπτης των σελίδων μας μπορεί να ακολουθεί τις παραπομπές σε κάποιο από αυτά και να εμφανίζονται νέες σελίδες σε αυτό, χωρίς να αλλάζουν ή να επηρεάζονται τα άλλα.. Αυτή η δυνατότητα όμως δεν μας είναι ιδιαίτερα χρήσιμη (αν και θα μπορούσε ίσως να έχει κάποιες εφαρμογές).. Ο κύριος λόγος που χρησιμοποιούμε τα πλαίσια είναι για επιλέγουμε από κάποια από αυτά και να εμφανίζονται τα αποτελέσματα των επιλογών μας σε κάποια άλλα.. έχουμε δύο πλαίσια και το ένα έχει κάποιον πίνακα περιεχομένων.. Επιλέγοντας στοιχεία από εκεί μεταφερόμαστε σε άλλες σελίδες που εμφανίζονται όμως μόνο στο άλλο πλαίσιο.. Έτσι ο πίνακας περιεχομένων μένει πάντα ορατός.. Για να το επιτύχουμε αυτό, πρέπει πρώτα να δώσουμε ένα όνομα σε κάθε πλαίσιο (με την παράμετρο NAME) και στην συνέχεια να δημιουργήσουμε παραπομπές που να υποδεικνύουμε στον browser σε ποιο πλαίσιο (frame) ή παράθυρο (window) θα τις εμφανίσει (με την παράμετρο TARGET).. Για να δώσουμε όνομα σε ένα πλαίσιο, αρκεί να προσθέσουμε την παράμετρο NAME μέσα στην οδηγία FRAME.. FRAME SRC= periex.. html NAME= TABLECON ή FRAME SRC= wellcome.. html NAME= CONTENTS Το πλαίσιο με το όνομα TABLECON θα το χρησιμοποιήσουμε για την απεικόνιση του πίνακα περιεχομένων (table of contents), και το πλαίσιο CONTENTS για να εμφανίζουμε τις σελίδες με το περιεχόμενο (content).. TARGET.. Με την παράμετρο NAME δώσαμε όνομα στα πλαίσια της σελίδας μας.. Με την TARGET καθοδηγούμε τις παραπομπές που δημιουργούμε έτσι ώστε να εμφανίζονται στο πλαίσιο (συνήθως) ή στο παράθυρο (σπανιότερα) της επιλογής μας.. Η σύνταξη της TARGET είναι:.. A HREF= tango.. html TARGET= CONTENTS το κείμενο της παραπομπής /A.. Σε μερικές περιπτώσεις μπορεί να θέλουμε όλες οι παραπομπές μιας σελίδας να εμφανίζονται στο ίδιο πλαίσιο ή παράθυρο (να έχουν το ίδιο TARGET).. Στην περίπτωση αυτή, μπορούμε να βάλουμε την TARGET μέσα στην οδηγία BASE που ως γνωστόν εμπεριέχεται στην HEAD.. HEAD TITLE Ο ΤΙΤΛΟΣ ΤΗΣ ΣΕΛΙΔΑΣ /TITLE BASE TARGET= CONTENTS /HEAD.. Με τον τρόπο αυτό, όλες οι παραπομπές θα διοχετεύονται στο πλαίσιο CONTENTS.. Αν θέλουμε μια παραπομπή να μην διοχετεύεται στο πλαίσιο ή το παράθυρο που ορίστηκε στην BASE αλλά κάπου αλλού, τότε απλώς θα ορίσουμε το άλλο πλαίσιο ή παράθυρο μέσα στην παραπομπή της όπως θα κάναμε και κανονικά αν δεν υπήρχε η BASE.. Στο παρακάτω παράδειγμα όλες οι παραπομπές ανοίγουν στο πλαίσιο CONTENTS εκτός από την τελευταία που ανοίγει στο πλαίσιο ή παράθυρο που ονομάζεται ALLO.. Αν δεν υπάρχει παράθυρο με αυτό το όνομα, τότε ο browser θα ανοίξει από μόνος του ένα νέο δικό του παράθυρο (window) ανεξάρτητο από τα πλαίσια (frames) που ήδη υπάρχουν (δηλαδή θα ξανανοίξει τον εαυτό του άλλη μια φορά) και θα θεωρήσει πως αυτό το παράθυρο είναι το ALLO.. HTML HEAD TITLE ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ /TITLE BASE TARGET= CONTENTS /HEAD BODY BGCOLOR=WHITE H2 ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ /H2 OL LI A HREF= page1.. html TANGO /A LI A HREF= page2.. html RUMBA /A LI A HREF= page3.. html MAMBO /A LI A HREF= page4.. html CHA CHA /A LI A HREF= page5.. html TARGET= ALLO Άλλο Παράθυρο /A /OL /BODY.. ΠΑΡΑΤΗΡΗΣΗ.. Η TARGET χρησιμοποιείται μόνο όταν θέλουμε να μετακινηθούμε από ένα πλαίσιο ή παράθυρο σε άλλο πλαίσιο ή παράθυρο.. Όταν οι σελίδες μας θα κινηθούν μέσα στο ίδιο πλαίσιο ή παράθυρο (δηλαδή μέσα στο ίδιο frame ή window) τότε δεν είναι απαραίτητη.. Η TARGET δεν μπορεί να πάρει ονόματα που να αρχίζουν από _ (underscore).. Ο χαρακτήρας αυτός χρησιμοποιείται για κάποια ονόματα πλαισίων ή παραθύρων της TARGET που η Netscape τα ονομάζει Μαγικά (Magic).. Αυτά είναι:.. TARGET= _BLANK.. Ανοίγει ένα νέο ανώνυμο παράθυρο.. Αυτή την παράμετρο χρησιμοποιούμε όταν θέλουμε ο χρήστης που κάνει κλικ στην παραπομπή να κρατήσει ανοικτό το παράθυρο που έχει ήδη και να δει τα περιεχόμενα του link σε άλλο καινούριο παράθυρο.. Αν θέλουμε να ορίσουμε το μέγεθος του νέου παραθύρου αυτό θα γίνει χωρίς χρήση της Target αλλά με τον ακόλουθο κώδικα:.. gr onclick= window.. open(this.. href, 'popupwindow', 'width=500,height=500,scrollbars,resizable'); return false; Κλικ εδώ για νέο παράθυρο /a.. TARGET= _TOP.. Για να εμφανίσει αυτή την σελίδα ο browser θα ανοίξει από μόνος του ένα νέο δικό του παράθυρο άσχετα από τα πλαίσια (frames) που ήδη υπάρχουν.. Το παράθυρο αυτό θα είναι maximized, δηλαδή θα καταλαμβάνει ολόκληρη την οθόνη, ανεξάρτητα από το μέγεθος που είχε το άλλο παράθυρο του browser από το οποίο επέλεξε αυτή την παραπομπή ο χρήστης.. Το παλαιό παράθυρο θα πάψει να υφίσταται.. TARGET= _PARENT.. Χρησιμοποιείται σπάνια όταν έχουμε Frameset μέσα σε άλλο Frameset.. Υποχρεώνει την νέα σελίδα που φορτώνεται όταν ακολουθείται αυτή η παραπομπή, να πάρει την θέση ολόκληρου του (εσωτερικού) frameset.. Δηλαδή θα αντικατασταθούν από αυτή όλα τα υπάρχοντα πλαίσια (frames) και την θέση τους θα πάρει αυτή η σελίδα σαν το μοναδικό ορατό κείμενο.. Φυσικά μπορεί η σελίδα αυτή να είναι frameset και έτσι να δημιουργήσει νέα πλαίσια (frames) που θα αντικαταστήσουν τα παλιά.. Προσοχή!.. Η _.. PARENT λειτουργεί ακριβώς όπως και η _.. TOP αν δεν υπάρχει εξωτερικό.. Frame.. TARGET= _SELF.. Η default τιμή της TARGET.. Η νέα σελίδα που θα εμφανιστεί ακολουθώντας μια παραπομπή, θα φορτωθεί πάνω στο ήδη υπάρχον πλαίσιο ή παράθυρο (η νέα σελίδα εξαφανίζει την προηγούμενη και παίρνει την θέση της).. iFRAME.. Μια βολική και χρήσιμη παραλλαγή των frames είναι το iframe μέσω του οποίου μπορούμε να τοποθετήσουμε μια σελίδα μέσα σε μια άλλη.. Ο συνήθης κώδικας iframe είναι ο ακόλουθος:.. iframe src= http://www.. eeei.. gr/navbarhome.. html width=750 height= 207 frameborder=0 scrolling=no /iframe.. Οι διαστάσεις και το source φυσικά ποικίλουν αλλά συνήθως θέλουμε να μην υπάρχει border ούτε scroll bar ώστε να δίδεται η ψευδαίσθηση πως το περιεχόμενο του iframe αποτελεί πραγματικό τμήμα της σελίδας.. Το iframe χρησιμοποιείται συχνά για την ενσωμάτωση διαφημίσεων μέσα στις σελίδες μας.. Για παράδειγμα το ίδιο iframe υπάρχει σε όλες τις σελίδες.. Έτσι, αλλάζοντας μόνο μια σελίδα αλλάζει η διαφήμιση που φαίνεται σε ολόκληρο το site.. Η εισαγωγή χωρίς πληκτρολόγηση κώδικα γίνεται με το.. Frames.. IFrame.. Δημιουργία ενός.. image.. map.. Πολλές φορές είτε για τη δημιουργία ενός μενού είτε για να δώσουμε στον χρήστη δυνατότητα επιλογής από χάρτη θέλουμε να κατασκευάσουμε ένα γραφικό που δεν θα είναι όλο παραπομπή αλλά όταν ο χρήστης κάνει κλικ σε διαφορετικά τμήματά του θα οδηγείται σε διαφορετικές web σελίδες.. Στο παραπάνω παράδειγμα έχουμε εισαγάγει στη σελίδα μας ένα χάρτη και έχουμε κάνει κλικ επάνω του ώστε να εμφανιστούν όλες οι επιλογές.. Το κάτω αριστερά μέρος υπάρχουν οι ρυθμίσεις που θα χρειαστούμε για τη δημιουργία του imagemap.. Ονομάζεται client side image map διότι όλες οι εργασίες για τη λειτουργία του εκτελούνται από τον browser.. Παλαιότερα υπήρχαν και server side image maps αλλά πλέον δεν χρησιμοποιούνται σχεδόν ποτέ.. Το πρώτο πράγμα που πρέπει να κάνουμε είναι να δώσουμε στον χάρτη μας ένα όνομα από το σχετικό πεδίο δίπλα στον τίτλο Map.. Το όνομα είναι απαραίτητο, ειδικά στην περίπτωση που θα υπάρχουν περισσότερα από ένα image maps στη σελίδα μας ώστε το browser να γνωρίζει πώς θα τα απεικονίσει στο χρήστη.. Αφού ονοματίσω τον χάρτη στη συνέχεια επιλέγω το τετράγωνο που βρίσκεται κάτω δεξιά από τη λέξη Map, μαρκάρω την περιοχή που με ενδιαφέρει και δηλώνω το URL όπου θέλω να οδηγείται ο χρήστης όταν κάνει κλικ σε αυτή την περιοχή.. Αν θέλω μπορώ να ορίσω και Target καθώς και Alt κείμενο.. Το ίδιο κάνω και στην περίπτωση που θέλω να μαρκάρω μια οβάλ περιοχή (επιλέγω το σχετικό σχήμα δίπλα στο τετράγωνο).. Λίγο πιο περίπλοκα είναι τα πράγματα όταν θέλω να μαρκάρω ένα πολυγωνικό σχήμα.. Το εικονίδιο για αυτή την εργασία βρίσκεται δίπλα στο οβάλ και εδώ σημαδεύω κινούμενος από δεξιά προς τα αριστερά ή το αντίθετο όλα τα σημεία του πολυγώνου μέχρι να κάνω και πάλι κλικ πάνω στο αρχικό σημείο οπότε το σχήμα ολοκληρώνεται.. Όταν ολοκληρώσουμε την εργασία μας με το χάρτη κάνουμε απλώς κλικ έξω από αυτόν και επανερχόμαστε στα μενού επεξεργασίας της υπόλοιπης σελίδας.. Αν για κάποιο λόγο αλλάξουμε γνώμη για ένα μέρος του image map μπορούμε να κάνουμε κλικ επάνω του και είτε να τροποποιήσουμε τα στοιχεία του (URL, Alt κ.. ) είτε με δεξί κλικ και Cut να το διαγράψουμε.. Η κατανομή του χρόνου ενός.. Web.. Αλλαγή του δρομέα.. Ένα ενδιαφέρον εφέ που μπορούμε να χρησιμοποιήσουμε είναι η αλλαγή του δρομέα του ποντικού είτε για ολόκληρη τη σελίδα είτε για μια μόνο ειδική παραπομπή.. Η ρύθμιση ισχύει μόνο για Microsoft Internet Explorer 4+, Netscape 6+ και Firefox αλλά αυτό δεν μας πειράζει.. Απλώς στους άλλους Browsers ο δρομέας θα φαίνεται με τον παραδοσιακό τρόπο.. Για να αλλαχθεί ο δρομέας μόνο για κάποιες παραπομπές χρησιμοποιούμε κώδικα όπως ο ακόλουθος:.. html head style type= text/css.. xlink {cursor:crosshair}.. hlink{cursor:help}.. /style /head body b.. a href= mypage.. htm class= xlink Σταυρόνημα /a.. br a href= mypage.. htm class= hlink Δρομέας με ερωτηματικό /a.. /b /body /html.. Για να τροποποιήσω τον δρομέα σε ολόκληρη τη σελίδα χρησιμοποιώ τον κώδικα του ακόλουθου παραδείγματος:.. html head style type= text/css body {cursor:crosshair} /style /head.. body b Κείμενο br a href= mypage.. htm Παραπομπή /a br a href= mypage.. htm Άλλη Παραπομπή /a /b /body /html.. Προσέξτε ότι ο τροποποιημένος δρομέας δεν ισχύει πάνω στις παραπομπές (αλλάξαμε το γενικό δρομέα και όχι τον δρομέα των παραπομπών όπως παραπάνω).. Επίσης, ο τροποποιημένος δρομέας ισχύει μόνο για το τμήμα της σελίδας που έχουμε δημιουργήσει.. Στο παράδειγμά μας, η σελίδα έχει μικρότερο μέγεθος από την οθόνη.. Το υπόλοιπο τμήμα της οθόνης δεν επηρεάζεται από τη ρύθμιση και έχει δρομέα με το default σχήμα.. Για να ορίσουμε σε τμήματα της σελίδας αλλαγή της εμφάνισης του δρομέα των παραπομπών χρησιμοποιούμε τον κώδικα του ακόλουθου παραδείγματος.. ;.. html head.. style type= text/css.. xlink A{cursor:crosshair}.. hlink A{cursor:help}.. span class= xlink.. htm CROSS LINK 1 /a br a href= mypage.. htm CROSS LINK 2 /a br a href= mypage.. htm CROSS LINK 3 /a br.. /span br.. span class= hlink.. htm HELP LINK 1 /a br a href= mypage.. htm HELP LINK 2 /a br a href= mypage.. htm HELP LINK 3 /a br /span /b.. /body /html.. Οι διαθέσιμοι δρομείς που μπορούμε να χρησιμοποιήσουμε είναι οι ακόλουθοι:.. Fixed Background με CSS.. Αν το επιθυμείτε μπορείτε με τα CSS να δηλώσετε ένα φόντο στη σελίδα σας που θα είναι σταθερό όσο σκρολάρει προς τα κάτω ή πάνω ο χρήστης.. body.. {.. background-image:.. url( clip_image016_0000.. jpg );.. background-repeat:.. no-repeat;.. background-attachment:.. fixed.. Δείτε το παράδειγμα με Fixed Background.. Δείτε το ίδιο παράδειγμα με Scroll Background.. Δείτε το ίδιο παράδειγμα με repeat-x (οριζόντια) Background.. Δείτε το ίδιο παράδειγμα με repeat-y (κάθετο) Background.. Round box με CSS.. Για να φτιάξουμε ένα κουτί με στρογγυλεμένες άκρες χρειαζόμαστε πρώτα απ' όλα 4 στογγυλεμένα γραφικά:.. Ξεκινάμε με το div όπου θα βρίσκεται το περιεχόμενο: div class= bl Εδώ έχουμε όλο το περιεχόμενο του κουτιού /div και το css class είναι:.. bl {background: url(bl.. gif) 0 100% no-repeat; width: 20em} Κάθε div μπορεί να έχει μόνο ένα background και ξεκινάμε από το κάτω αριστερό.. Αν ξεκινήσουμε από τα πάνω τμήματα τότε σε κάποιους browsers θα έχουμε πρόβλημα με τα περιθώρια.. Προσέξτε πως το CSS έχει στο url της εικόνας path που ορίζεται από το σημείο που βρίσκεται το.. css αρχείο και όχι από εκεί που βρίσκεται η σελίδα.. Επίσης, δηλώνουμε 0 100% δηλαδή να έχει απόσταση 0 (horizontal) από αριστερά και 100% (vertical) από το πάνω μέρος του div και να μην επαναλαμβάνεται.. Το πλάτος του div ορίζεται ως 20em δηλαδή 20 φορές το πλάτος που έχει το γράμμα m στή βασική γραμματοσειρά της σελίδας.. Συνεχίζουμε με το κάτω δεξιά και στη συνέχεια με τα επάνω.. Ο τελικός κώδικας για τη σελίδα είναι:.. div class= bl div class= br div class= tl div class= tr.. Εδώ έχουμε όλο το περιεχόμενο του κουτιού.. /div /div /div /div.. div class= clear nbsp; /div.. Ο κώδικας για το.. CSS.. είναι:.. gif) 0 100% no-repeat #e68200; width: 20em}.. br {background: url(br.. gif) 100% 100% no-repeat}.. tl {background: url(tl.. gif) 0 0 no-repeat}.. tr {background: url(tr.. gif) 100% 0 no-repeat; padding:10px}.. clear {font-size: 1px; height: 1px}.. Προσέξτε ότι προσθέσαμε φόντο για το div με το περιεχόμενο που φυσικά πρέπει να είναι ίδιο με εκείνο των στρογγυλεμένων άκρων, και padding ώστε να μην πέσει το κείμενο πάνω στα γραφικά.. Επειδή τα εσωτερικά elements κληρονομούν τα χαρακτηριστικά των εξωτερικών αν βάλουμε το padding στο αρχικό div θα έχουμε πρόβλημα με τα περιθώρια.. Οπότε το βάζουμε στο πιο εσωτερικό απ' όλα.. Επίσης για να αποφύγουμε ασυμβατότητες σε κάποιες εκδόσεις του Internet Explorer προσθέτουμε τα:.. div class= clear nbsp; /div και.. clear {font-size: 1px; height: 1px}.. Δείτε το παράδειγμα.. σε ξεχωριστή σελίδα.. Λίστες με CSS.. Λίστα με τετραγωνάκια:.. Item one.. Item two.. Item three.. Item four.. Item five.. div id= navcontainera.. ul id= navlista.. li id= active a href= # id= current Item one /a /li.. li a href= # Item two /a /li.. li a href= # Item three /a /li.. li a href= # Item four /a /li.. li a href= # Item five /a /li.. /ul.. #navlista li { list-style-type: square; }.. Εικόνες αντί για κουμπιά:.. div id= navcontainerb.. ul id= navlistb.. #navlistb { list-style-image: url(images/arrow.. gif); }.. Rollover lists.. div id= navcontainerc.. ul id= navlistc.. #navcontainerc { width: 200px; }.. #navcontainerc ul.. margin-left: 0;.. padding-left: 0;.. list-style-type: none;.. font-family: Arial, Helvetica, sans-serif;.. #navcontainerc a.. display: block;.. padding: 3px;.. width: 160px;.. background-color: #036;.. border-bottom: 1px solid #eee;.. #navcontainerc a:link, #navlistc a:visited.. color: #EEE;.. text-decoration: none;.. #navcontainerc a:hover.. background-color: #369;.. color: #fff;.. Λίγα λόγια για τα σημαντικότερα display properties.. display: inline.. είναι το default και το περιεχόμενο θα εμφανιστεί ως μέρος του κειμένο όπως γίνεται και με την οδηγία SPAN.. display: block.. σημαίνει πως το κείμενο θα εμφανιστεί με περιθώρια πάνω και κάτω του όπως συμβαίνει με τις παραγράφους και τις επικεφαλίδες.. display: inline-block.. σημαίνει πως το κείμενο θα εμφανιστεί ως μέρος του κειμένο όπως γίνεται και με την οδηγία SPAN αλλά και με περιθώρια πάνω και κάτω του όπως συμβαίνει με τις παραγράφους και τις επικεφαλίδες.. display: list-item.. σημαίνει πως το κείμενο θα εμφανιστεί ως τμήμα λίστας με βούλα μπροστά του.. Οριζόντια λίστα.. div id= navcontainerd.. ul id= navlistd.. #navlistd ul.. white-space: nowrap;.. }.. #navlistd li.. display: inline; (αυτό κάνει τη λίστα οριζόντια).. #navlistd a { padding: 3px 10px; }.. #navlistd a:link, #navlist a:visited.. #navlistd a:hover.. Λίστα με εφέ:.. div id= navcontainere.. ul id= navliste.. #navcontainere.. margin-left: auto;.. margin-right: auto;.. margin-top: 20px;.. margin-bottom: 10px;.. #navliste li.. display: inline;.. padding-bottom: 14px;.. padding-left: 20px;.. background-repeat: no-repeat;.. #navliste a.. font-weight: bold;.. text-transform: uppercase;.. #navliste a:link, #navlist a:visited.. color: red;.. background: url(images/arrowbullet.. gif);.. background-position: 0 -28px;.. background-repeat: no-repeat;}.. #navliste a:hover.. background-position: 0 -14px;}.. Πηγή:.. http://css.. maxdesign.. au/listamatic/.. Άλλα παραδείγματα με CSS:.. http://w3schools.. com/css/css_examples.. Ποια άλλα sites επισκέπτονται οι χρήστες μας και που κάνουν click στο δικό μας.. Χάρη στα CSS και λίγη υπομονή μπορούμε να χρησιμοποιήσουμε εικόνες που φορτώνουν αυτόματα ώστε να μάθουμε περισσότερα πράγματα για τους χρήστες μας.. Για παράδειγμα με τον κώδικα που ακολουθεί μπορούμε να δούμε ποια άλλα sites (από μια λίστα που εμείς διαλέγουμε) έχουν επιλέξει χρησιμοποιώντας και σε ποια το a.. nav:visited style και που έκαναν click στο δικό μας site (με το a.. nav:active στυλ).. Οι πληροφορίες αυτές καταγράφονται στα log files (χρειαζόμαστε ένα ξεχωριστό αρχείο για κάθε παραπομπή) και από εκεί μπορούμε να διαβάσουμε τις ενέργειες των επισκεπτών μας (εκούσιες και ακούσιες.. κρυμμένες με iframe.. Δείτε.. το παράδειγμα του κώδικα.. Το στυλ:.. a.. nav1:link {background-image:url(images/notvisited1.. jpg); height:22px; width:22px; background-position: top left; background-repeat: no-repeat; background-color: #F6F6F6}.. nav1:visited {background-image:url(images/visited1.. jpg); height:22px; width:22px; background-position: top left; background-repeat: no-repeat; background-color: #F7F7F7}.. nav2:link {background-image:url(images/notvisited2.. nav2:visited {background-image:url(images/visited2.. jpg); height:22px; width:22px; background-position: top left; background-repeat: no-repeat; background-color: #F7F7F7}.. nav2:active {background-image:url(images/active.. nav3:link {background-image:url(images/notvisited3.. nav3:visited {background-image:url(images/visited3.. Ο κώδικας στο body:.. br a class= nav1 href= http://www.. in.. gr In.. gr /a.. br a class= nav2 href= http://www.. gr eeei.. br a class= nav3 href= http://www.. eeeeeeeeei.. gr Non existant /a.. CSS Methods.. Εκτός από Rules, Classes, IDs τα CSS μας προσφέρουν επίσης κάποιες έτοιμες δυνατότητες ρυθμίσεων γνωστές με το όνομα Methods.. Ίσως η πιο ενδιαφέρουσα αυτή τη στιγμή είναι η @font-face χάρη στην οποία μπορούμε να ορίσουμε δικές μας γραμματοσειρές σε μια σελίδα.. παράδειγμα.. δείχνει τη λειτουργία με γραμματοσειρές που κατεβαίνουν αυτόματα από το Google.. @font-face { font-family: 'Vollkorn'; font-style: normal; font-weight: normal; src: local('Vollkorn'), url('http://themes.. googleusercontent.. com/font?kit=_3YMy3W41J9lZ9YHm0HVxA') format('truetype'); }.. Μπορείτε επίσής να επισκεφθείτε το.. google.. com/webfonts.. και να λάβετε από εκεί όποια γραμματοσειρά επιθυμείτε μαζί με τις απαραίτητες οδηγίες.. Λογικά θα χρειαστεί να επιλέξετε από όσες έχουν script: greek αν χρειάζεστε ελληνικά.. Ομαλή αλλαγή χρωμάτων (Gradient).. Μέχρι πρόσφατα για να εμφανίσουμε κάποιο ντεγκραντέ χρώμα θα έπρεπε να κατασκευάσουμε το αντίστοιχο γραφικό και να το βάλουμε ως φόντο στο σημείο που θέλαμε.. Χάρη στα CSS3 αυτό το έργο μπορεί να γίνει πιο εύκολο.. Δυστυχώς όμως δεν υποστηρίζονται παρά μόνο από τους πιο καινούριους browsers.. Για να καταλάβετε πως λειτουργεί δείτε τα παραδείγματα:.. Παράδειγμα linear gradient left to right, dark to light μικρότερο από την οθόνη.. (Σε κάποιους browsers αν η σελίδα είναι μικρότερη από την Οθόνη το pattern θα επαναλαμβάνεται μετά το τέλος της σελίδας.. Παράδειγμα linear gradient top to bottom, dark to light μεγαλύτερο από την οθόνη.. Παράδειγμα linear gradient top to bottom, dark to light μικρότερο από την οθόνη.. Παράδειγμα linear gradient top to bottom, light to dark μικρότερο από την οθόνη.. Παράδειγμα Radial Gradient (Centered, Full Size), μικρότερο από την οθόνη.. Google Maps API.. Με το Google Maps μπορούμε γρήγορα και εύκολα να προσθέσουμε χάρτες σε μια σελίδα όπως φαίνεται στο.. σχετικό παράδειγμα.. Οι ρυθμίσεις που πρέπει να προσέξουμε είναι:.. google.. maps.. LatLng(38.. 7095, 20.. 6520) = Οι συντεταγμένες του σημείου που βρίσκεται στο κέντρο του χάρτη.. zoom: 10 = Η κλίμακα google.. MapTypeId.. TERRAIN ή google.. ROADMAP = Το είδος του χάρτη div id= map_canvas style= width:300; height:300 /div ή div id= map_canvas style= width:50%; height:50% /div = Το μέγεθος του χάρτη στη σελίδα.. Τι να κάνετε αν επιθυμείτε μια λειτουργικότητα που δεν υπάρχει σε αυτές τις σημειώσεις.. Κάποιοι μαθητές μου ζήτησαν ένα διαφορετικό χάρτη από το Google που να περιέχει τη διεύθυνση μαζί με ένα εικονίδιο στο συγκεκριμένο σημείο.. Ψάχνω λοιπόν σε μια μηχανή αναζήτησης για: add google maps location to website.. Με παραπέμπει στο.. http://maps.. com/help/maps/getmaps/quick.. Επιλέγω: Plot one location αφού θέλω μια διεύθυνση.. Διαβάζω τις οδηγίες που μου λένε απλώς να βρω τη διεύθυνση και μετά να επιλέξω το σύμβολο του link για να πάρω τον κώδικα που χρειάζομαι.. Έτοιμο:.. Προβολή μεγαλύτερου χάρτη.. Περισσότερα για τα CSS.. Το θέμα των CSS είναι τεράστιο.. Μπορείτε να δείτε ένα καλό δείγμα όσων μπορείτε να πετύχετε στην ακόλουθη σελίδα:.. smashingmagazine.. com/2007/01/19/53-css-techniques-you-couldnt-live-without/.. Φυσικά, αν το επιθυμείτε, μπορείτε να χρησιμοποιήσετε αυτούς τους κώδικες αυτούσιους ή με αλλαγές στις δικές σας σελίδες.. Παράδειγμα 1:.. Css Based Navigation.. (το ίδιο με.. τροποποίηση.. Παράδειγμα 2:.. Css Tabs (χωρίς IE6 Flickering).. Παράδειγμα 3:.. Διάφορα navigation tab menus.. Robots.. User-agent: *.. Disallow: /*/reactions/.. Disallow: /ajah/.. Disallow: /archives/..  ...   της σελίδας /body /html.. Παρατηρούμε ότι:.. Ο Javascript κώδικάς μας αποτελείται από μια μόνο γραμμή.. Η semicolon στο τέλος θα μπορούσε να απαλειφθεί αλλά τις καλές συνήθειες πρέπει να τις αρχίζουμε από νωρίς.. Ο κώδικας βρίσκεται μέσα στις οδηγίες (tags) script και /script.. Η οδηγία script βρίσκεται μέσα στην οδηγία head.. Θα μπορούσε όμως να βρίσκεται και σε οποιοδήποτε άλλο σημείο της σελίδας αρκεί να είναι μέσα στο body (μεταξύ body και /body ).. Ο browser διαβάζει τη σελίδα από πάνω προς τα κάτω.. Έτσι στο συγκεκριμένο παράδειγμα το alert box.. εμφανίστηκε πριν ακόμη ο χρήστης δει την ίδια τη σελίδα.. Γι’ αυτό θα ήταν καλύτερο ο κώδικας να δομηθεί όπως παρακάτω:.. html head title Δοκιμή Javascript /title /head body Το περιεχόμενο της σελίδας script alert( Ελπίζω να σας άρεσε η σελίδα μας ); /script /body /html.. Έτσι, η ερώτηση του alert box έχει νόημα αφού ο χρήστης πρώτα βλέπει τη σελίδα και μετά ερωτάται αν του αρέσει.. Προβλήματα:.. Αν δοκιμάσατε αυτόν τον κώδικα μόνοι σας πιθανώς να αντιμετωπίσατε τα ακόλουθα προβλήματα:.. Ο Browser (π.. Internet Explorer) δεν εμφανίζει το παράθυρο.. Ανάλογα με τις ρυθμίσεις του ο Browser μπορεί να μην επιτρέπει την εμφάνιση alert boxes για λόγους προστασίας από ανεπιθύμητες διαφημίσεις.. Εδώ μόνο ο χρήστης μπορεί να επιτρέψει την εμφάνιση του σχετικού παραθύρου.. Διαχείριση Ελληνικών.. Ενώ ο Internet Explorer εμφανίζει κανονικά το alert box στον Mozilla τα ελληνικά συνήθως έχουν χαθεί:.. Δυστυχώς αυτό είναι ένα συχνό πρόβλημα και συχνά δεν μπορούμε να κάνουμε εμείς κάτι για να το αποφύγουμε.. Τις περισσότερες φορές πάντως το πρόβλημα διορθώνεται αν δηλώσουμε την ελληνική ως γλώσσα της web σελίδας μας με κάποια οδηγία όπως meta http-equiv=Content-Type content= text/html; charset=windows-1253 ή ακόμη καλύτερα: meta http-equiv= Content-Type content= text/html; charset=utf-8.. Τα ελληνικά.. θα εμφανιστούν σωστά.. στους περισσότερους browsers αν ο κώδικας γίνει:.. meta http-equiv= Content-Type content= text/html; charset=utf-8.. head title Δοκιμή Javascript /title /head body.. Το περιεχόμενο της σελίδας script alert( Ελπίζω να σας άρεσε η σελίδα μας ); /script /body /html.. Τοποθέτηση του κώδικα σε ξεχωριστό αρχείο.. Για να αποφύγουμε την επανάληψη του ίδιου κώδικα σε πολλές σελίδες (κάτι που καθιστά δύσκολη την τροποποίησή του στο μέλλον) μπορούμε να τον τοποθετήσουμε σε ένα ξεχωριστό αρχείο.. Στο προηγούμενο παράδειγμα ο κώδικας ήταν:.. alert( Ελπίζω να σας άρεσε η σελίδα μας );.. Δημιουργούμε λοιπόν ένα ξεχωριστό αρχείο που περιέχει μόνο αυτή τη γραμμή και ονομάζεται kati.. js.. Φυσικά αντί για kati εσείς μπορείτε να του δώσετε όποιο όνομα θέλετε.. Η επέκταση όμως θα πρέπει να είναι πάντοτε.. Σε αυτή την περίπτωση.. η σελίδα μας.. γίνεται:.. html head meta http-equiv= Content-Type content= text/html; charset=utf-8 title Δοκιμή Javascript /title /head body Το περιεχόμενο της σελίδας script src= kati.. js /script /body /html.. Η αλλαγή εδώ βρίσκεται στην οδηγία script που τώρα έγινε: script src= kati.. js /script Εννοείται ότι σε αυτή την περίπτωση το αρχείο kati.. js βρίσκεται στον ίδιο φάκελο με τη web σελίδα.. Αν βρισκόταν αλλού θα έπρεπε να δηλωθεί η πλήρης διαδρομή για το αρχείο για παράδειγμα: script src= fakelos/ypofakelos/kati.. js /script.. Περισσότερα για τον προγραμματισμό με κώδικα Javascript.. θα βρείτε εδώ.. , ενώ ένα απλό παράδειγμα για.. μεταβλητές και concatenation εδώ.. Παραδείγματα με κώδικα κατασκευασμένο από τρίτους.. Παράδειγμα εισαγωγής μενού με υπομενού.. Βήμα 1.. : Κατεβάζουμε το αρχείο με.. όλα τα συνοδευτικά αρχεία και τα παραδείγματα.. Βήμα 2.. : Διαβάζουμε τα αρχεία των παραδειγμάτων.. Οριζόντιο.. Κάθετο.. Βήμα 3.. : Τροποποιούμε τον κώδικα ανάλογα με τις ανάγκες μας.. Για να το κάνουμε αυτό απλώς μέσα στο li.. /li που θέλουμε να αποκτήσει υπομενού τοποθετούμε μια νέα unordered list.. Για περισσότερες πληροφορίες.. δείτε την πηγή του script.. Προσοχή: Για να λειτουργήσει σωστά το script το !--Drop Down Menu 1 HTML-- πρέπει να τοποθετηθεί μέσα στο σώμα (body) της σελίδας αλλά όχι εντός κάποιας άλλης οδηγίας (tag).. Χιονισμένο εφέ.. Απλώς τοποθετούμε τον κώδικα που θα βρείτε στο.. και ορίζουμε το snowsrc να δείχνει στο αρχείο που θέλετε να εμφανίζεται ως βροχή.. Φυσικά αντί για χιόνι θα μπορούσατε να χρησιμοποιήσετε κάτι άλλο, π.. φθινοπωρινά φύλλα.. Expanded Text.. Απλώς τοποθετούμε τον κώδικα που θα βρείτε στο head.. της σελίδας του παραδείγματος.. και ορίζουμε στο body της σελίδας τα στοιχεία που θα έχουν το επιπρόσθετο κείμενο (στο παράδειγμα div και span ).. Προσοχή στα ονόματα που δίνουμε σε κάθε element που θα εκταθεί (Π.. a1, a2 κ.. που μπαίνουν σε δύο σημεία μέσα στο σώμα του κειμένου).. Step Carousel.. Για να υλοποιήσουμε.. τη σελίδα του παραδείγματος.. , Κατεβάζουμε το.. συμπιεσμένο αρχείο.. με όλα τα στοιχεία και τροποποιούμε ό,τι χρειάζεται.. Για παράδειγμα, για να αλλάξουμε τις εικόνες απλώς βάζουμε καινούριες μέσα στο σχετικό div class=stepcarousel.. O κώδικας αναγνωρίζει αυτόματα τον αριθμό τους και τη θέση τους.. Αυτόματα επίσης αλλάζουν και τα εικονίδια κάτω από τον viewer που δείχνουν οπτικά σε ποια εικόνα του συνόλου είμαστε.. Προσέξτε πως εκτός από τον κώδικα στο BODY έχουμε και άλλον στο HEAD ο οποίος καλεί και εξωτερικά javascript αρχεία.. Επίσης αυτή η υλοποίηση απαιτεί να υπάρχει οπωσδήποτε δηλωμένο DOCTYPE.. Αν δεν σας αρέσουν τα βελάκια δεξιά και αριστερά απλώς αλλάζετε τα images (small_previous.. png και small_next.. png).. Τα νούμερα δεξιά τους στον κώδικα ορίζουν την οριζόντια και την κάθετη θέση τους.. Το μέγεθος του περιθωρίου καθορίζεται από το: border: 10px solid black; και τα width: 270px; /*Width of Carousel Viewer itself*/ και height: 200px; /*Height should enough to fit largest content's height*/ καθορίζουν το ύψος και το πλάτος του viewer.. Πρέπει να φροντίσετε ώστε ο viewer να χωράει και την μεγαλύτερη εικόνα (στο παράδειγμα επίτηδες δεν χωράει η τελευταία εικόνα).. Αν τώρα θέλετε το Carousel να αλλάζει εικόνες από μόνο του στο stepcarousel.. setup θα προσθέσετε το:.. autostep: {enable:true, moveby:1, pause:3000},.. Με τον τρόπο αυτό θα αλλάζουν οι εικόνες ανά όσες δηλώνει το moveby μετά το πέρας των milliseconds που έχουν οριστεί στο pause.. Αν ο χρήστης βάλει το ποντίκι πάνω στην εικόνα η αυτόματη αλλαγή σταματάει και συνεχίζει μόλις φύγει το ποντίκι από εκεί.. dynamicdrive.. com/dynamicindex4/stepcarousel.. htm.. Splash Page.. Κατεβάζουμε το.. με όλα τα στοιχεία και τροποποιούμε τη.. σελίδα του Demo.. (μην ξεχάσετε να αλλάξετε το encoding).. Mouseover με εικόνα σε παραπομπή.. Αν θέλουμε η τοποθέτηση του δρομέα πάνω σε ένα link να εμφανίζει ένα παράθυρο με εικόνα και κείμενο, τοποθετούμε τον κώδικα του.. παραδείγματος.. στο head και ρυθμίζουμε όπως στο παράδειγμα.. Η ίδια λειτουργία μπορεί να χρησιμοποιηθεί και για.. image map.. Pop-it Menu.. Αν θέλουμε η τοποθέτηση του δρομέα πάνω σε ένα link να εμφανίζει ένα μικρό μενού επιλογών τοποθετούμε τον κώδικα του.. στο head και ρυθμίζουμε ανάλογα.. Εκτύπωση Σελίδας.. Για να μπορέσει ο χρήστης να τυπώσει απευθείας μια σελίδα μπορούμε να του δώσουμε το ακόλουθο κουμπί:.. Ο κώδικας είναι: input type= button value= Εκτύπωση Σελίδας onClick= window.. print().. Απλός είναι και ο κώδικας που σας επιτρέπει να ανοίγει το παράθυρο εκτύπωσης.. όταν φορτώνεται η σελίδα.. , όπως επίσης και.. όταν κάνουμε Click σε ένα εικονίδιο.. Back Button.. FORM INPUT TYPE= button VALUE= Back onClick= history.. go(-1) /FORM.. Για να επιστρέψει ο χρήστης στην προηγούμενη σελίδα.. Εργασίες με Cookies.. Θέλετε όσοι χρήστες έρχονται για πρώτη φορά στη σελίδα σας να λαμβάνουν έναν χαιρετισμό με ένα.. νέο παράθυρο.. ή να γίνονται.. redirect σε μια ειδική σελίδα.. ;.. Με τα παραπάνω παραδείγματα σερβίρετε το COOKIE1 και COOKIE2 αντίστοιχα.. Για να κάνετε reset το cookie και να θεωρηθούν όλοι οι χρήστες ως καινούριοι απλώς αλλάξτε το όνομά του σε κάτι άλλο (π.. από COOKIE1 σε COOKIE1 στα δύο σημεία που υπάρχει μέσα στον κώδικα).. Προσοχή στην ημερομηνία λήξης που έχετε ορίσει για το Cookie σας.. Επίσης, μην ξεχνάτε πως οι χρήστες συχνά σβήνουν τα Cookies τους.. Χρησιμοποιείστε το παραπάνω μόνο για να αναγνωρίσετε τους νέους επισκέπτες λίγων ημερών ή μιας εβδομάδας το πολύ.. Div επάνω από iframe.. !DOCTYPE HTML html head meta charset= UTF-8 / style #myframe { height:100px; width:200px; margin-left:100px; } #straddle { position:absolute; width:200px; border:1px solid red; background-color:aqua; } /style /head body div id= straddle Here is the straddling div br/ Here is the straddling div /div iframe id= myframe src=.. http://reviews.. gr/culture/oscar2013/.. /iframe /body /html.. Δείτε το παράδειγμα.. Divs χωρισμένα με αυτόματα προσαρμοζόμενο διαχωριστή.. !DOCTYPE HTML html head meta charset= UTF-8 / style #main { width:1000px; margin:0; padding:0; } #left{ margin:0; padding:0; width:490px; float:left; } #right{ margin:0; padding:0; width:490px; float:right; } #inner { padding:15px; } /style /head body bgcolor=aqua div id= main div id= left div id= inner.. aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa aaaaa aaaaaa /div /div div id= right div id= inner bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb bbbbbbbbb.. /div /div /div script type= text/javascript onload=function() { var leftDivHeight = document.. getElementById('left').. offsetHeight; var rightDivHeight = document.. getElementById('right').. offsetHeight; var DivHeight = left: + leftDivHeight + right: + rightDivHeight; // alert(DivHeight); if (leftDivHeight rightDivHeight) { document.. getElementById( left ).. setAttribute( style , border-right:1px solid red ); } else { document.. getElementById( right ).. setAttribute( style , border-left:1px solid red ); } "> } "> /script "> "> /body "> /html "> ">.. Css expandable menu.. meta http-equiv="Content-Type" content="text/html; charset=utf-8".. head title Δοκιμή css expandable menu /title.. #menu {border: 2px solid red;.. padding:5px;.. height:20px;.. width:200px;.. menu_part {float:left;.. font-size:14px;.. margin-left: 10px;.. width:70px; /* Αφού είναι display block οι παραπομπές και δεν χωράνε η μία δίπλα στην άλλη θα πάνε η μία κάτω από την άλλη.. div.. popup a:hover { background-color: lime; }.. menu_part div.. popup { display: none; }.. /* Κανονικά δεν φαίνονται τα περιεχόμενα του popup.. menu_part:hover div.. popup {.. display: block;.. background-color: orange;.. /* Στο hoover πάνω από το menu_part φαίνονται τα περιεχόμενα του popup.. /style.. /head body.. div id="menu".. div class="menu_part".. div a href="#" Ενότητα 1 /a /div.. div class="popup".. a href="#" επιλογή 1 /a.. a href="#" επιλογή 2 /a.. a href="#" επιλογή 3 /a.. div a href="#" Ενότητα 2 /a /div.. p Το περιεχόμενο της σελίδας /p.. p nbsp; /p.. Αναγνώριση χώρας.. Αν θέλετε να σερβίρετε διαφορετική σελίδα στους επισκέπτες σας ανάλογα με τη γλώσσα που έχουν ορίσει τον Browser μπορείτε να χρησιμοποιήσετε αυτό στο script.. Στη μορφή του.. μας δίνει απλώς τη γλώσσα του Browser αλλά με βάση όσα αναφέρονται παραπάνω μπορείτε να το τροποποιήσετε ώστε να κάνει redirect (δείτε την ενότητα Εργασίες με Cookies).. Η γλώσσα προγραμματισμού Php.. Οι php σελίδες (.. P.. HP:.. ypertext.. reprocessor) έχουν την ακόλουθη μορφή:.. body.. ?php.. // Γραμμή με σχόλιο.. echo Hello World ; // κάθε γραμμή τελειώνει με ;.. Ελεύθερο κείμενο με.. σχόλιο.. ?.. /body.. /html.. Ο php κώδικας μπορεί να μπει σε οποιοδήποτε σημείο της σελίδας (ανάμεσα σε ?php και ? αρκεί ο web server να υποστηρίζει php.. Μετά αρκεί η σελίδα (το php αρχείο με όνομα της μορφής something.. php) να βρίσκεται στο χώρο που βάζουμε και τις HTML σελίδες στο server και θα δουλεύει κανονικά.. Μεταβλητές.. $txt= Hello World! ; // κείμενο.. $x=16; // αριθμός.. $a = 4;.. $c = $a + $x;.. echo $c;.. echo $txt; // Θα τυπωθούν και τα δύο αλλά κολλητά.. Προσέξτε.. πως αυτό το παράδειγμα δεν έχει καθόλου html κώδικα.. Το αρχείο θα έχει μόνο τα παραπάνω.. Η HTML είναι επιθυμητή αλλά όχι απαραίτητη.. Προσοχή.. επίσης στα ονόματα των μεταβλητών.. Είναι case sensitive.. Functions και Scope.. $a = 5;.. $b = 10;.. function myTest() // ορίζουμε τη function και το περιεχόμενό της.. global $a, $b; // καλούμε τις global variables για χρήση.. $c = 5;.. $b = $a + $b + $c; // μέσα στη function η $b αλλάζει τιμή.. myTest(); // καλούμε τη function.. echo $b;.. Εδώ έχουμε τις μεταβλητές a και b.. Αυτές είναι global, δηλαδή μπορούν να χρησιμοποιηθούν οπουδήποτε στο πρόγραμμα.. Έχουμε επίσης ένα υποπρόγραμμα (function) με το όνομα myTest.. Μέσα σε αυτό υπάρχει η μεταβλητή $c.. Αυτή μπορεί να χρησιμοποιηθεί μόνο μέσα στην myTest.. Με άλλα λόγια το scope της είναι περιορισμένο μέσα στην mytest (το όνομα δεν είναι case sensitive).. function myTest().. $GLOBALS['b'] = $GLOBALS['a'] + $GLOBALS['b'];.. myTest();.. Όλες οι Global Variables βρίσκονται σε μια Array (μια ακολουθία μεταβλητών) η οποία ονομάζεται GLOBALS.. Παραπάνω φαίνεται ο τρόπος κλήσης της.. Διαχείριση κειμένου (Concatenation κ.. α.. $txt1= Hello World! ;.. $txt2= What a nice day! ;.. echo $txt1.. $txt2;.. Με την τελεία ενώνω τα κείμενα.. Βάζω και ένα κενό για να μην είναι κολλημένα.. echo strlen( Hello world! );.. Εκτός από τις functions που φτιάχνουμε εμείς υπάρχουν και κάποιες ήδη έτοιμες.. Η strlen θα μας δώσει το string length (το μέγεθος σε χαρακτήρες του string).. echo strpos( Hello world! , world );.. Η strpos (string position) μας δίνει τη θέση ενός string (μιας ακολουθίας χαρακτήρων) μέσα στο κείμενο.. If … Else.. $d=date( D );.. if ($d== Fri ).. echo Have a nice weekend! ;.. else.. echo Have a nice day! ;.. Με χρήση της ήδη υπάρχουσας function date ελέγχουμε την ημέρα της εβδομάδας.. Αν είναι Παρασκευή το μήνυμα διαφέρει από τις άλλες ημέρες (π.. Tue είναι η Τρίτη).. echo Hello! br / ;.. echo See you on Monday! ;.. Αν το if ή το else έχουν περισσότερες από μια γραμμές κώδικα τότε πρέπει να περικλύονται από άγκιστρα.. Προσέξτε πως το br / μπορεί να δηλωθεί και ως απλό br.. elseif ($d== Sun ).. echo Have a nice Sunday! ;.. Με τη χρήση της elseif μπορούμε να έχουμε περισσότερες από δύο εναλλακτικές ενέργειες για το πρόγραμμά μας.. Switch (επιλογή μεταξύ εναλλακτικών).. $x=1;.. switch ($x).. case 1:.. echo Number 1 ;.. break;.. case 2:.. echo Number 2 ;.. case 3:.. echo Number 3 ;.. default:.. echo No number between 1 and 3 ;.. Αν το Χ είναι 1 θα εφαρμοστεί το case 1.. Αλλιώς το 2 ή το 3.. Σε όλες τις άλλες περιπτώσεις θα ισχύσει το default.. Numeric Arrays.. $cars[0]= Saab ;.. $cars[1]= Volvo ;.. $cars[2]= BMW ;.. $cars[3]= Toyota ;.. echo $cars[0].. and.. $cars[1].. are Swedish cars.. Το πρόγραμμα θα δώσει: Saab and Volvo are Swedish cars.. Η Array δηλώνεται επίσης και ως: $cars=array( Saab , Volvo , BMW , Toyota );.. Associative Arrays.. $ages = array( Peter = 32, Quagmire = 30, Joe = 34);.. echo Peter is.. $ages['Peter'].. years old.. Το πρόγραμμα θα δώσει: Peter is 32 years old.. Εναλλακτικά:.. $ages['Peter'] = 32 ;.. $ages['Quagmire'] = 30 ;.. $ages['Joe'] = 34 ;.. Με τον ίδιο τρόπο λειτουργεί και αυτό:.. $main_character = 'Peter';.. $ages[$main_character] = 32 ;.. Multidimensional Arrays.. Έτσι ονομάζουμε μια Array που κάθε στοιχείο της είναι μια ξεχωριστή Array.. $families = array.. Griffin = array.. Peter ,.. Lois ,.. Megan.. ),.. Quagmire = array.. Glenn.. Brown = array.. Cleveland ,.. Loretta ,.. Junior.. );.. echo Is.. $families['Griffin'][2].. a part of the Griffin family? ;.. Εδώ έχουμε την multidimensional numeric array families η οποία περιέχει σε κάθε στοιχείο της από μια associative array με το επώνυμο μιας οικογένειας και τα ονόματα των μελών της.. while Loop.. $i=1;.. while($i =5).. echo The number is.. $i.. br / ;.. $i++;.. Θα μας δώσει:.. The number is 1.. The number is 2.. The number is 3.. The number is 4.. The number is 5.. do … while.. Η μορφή είναι:.. do.. { κώδικας που εκτελείται}.. while (.. προϋπόθεση για την εκτέλεση του παραπάνω κώδικα.. Η do στην πραγματικότητα είναι ίδια με τη while με τη διαφορά πως στη while ο έλεγχος γίνεται στην αρχή, ενώ στην do στο τέλος του loop.. $i = 5;.. do {.. echo i =.. ' br ';.. $i--;.. } while ($i 0);.. Μας δίνει:.. i = 5.. i = 4.. i = 3.. i = 2.. i = 1.. The number is 6.. for loop.. for ($i=1; $i =5; $i++).. foreach.. $x=array( one , two , three );.. foreach ($x as $value).. echo $value.. one.. two.. three.. Functions που λαμβάνουν δεδομένα.. function writeName($fname).. echo $fname.. Epitidios.. echo My name is ;.. writeName( Giorgos );.. echo My sister's name is ;.. writeName( Sophia );.. echo My son's name is ;.. writeName( Marios );.. My name is Giorgos Epitidios.. My sister's name is Sophia Epitidios.. My son's name is Marios Epitidios.. Με περισσότερες παραμέτρους έχουμε:.. function writeName($fname,$punctuation).. Epitidios.. $punctuation.. writeName( Giorgos ,.. writeName( Sophia , ! );.. echo My sons's name is ;.. writeName( Marios , ? );.. My sister's name is Sophia Epitidios!.. My sons's name is Marios Epitidios?.. Επιστροφή δεδομένων από μια function.. function add($x,$y).. $total=$x+$y;.. return $total;.. echo 1 + 16 =.. add(1,16);.. Μας δίνει: 1 + 16 = 17.. Πιο συχνά θα το δούμε:.. $sum = add(1,16);.. $sum;.. Φόρμες.. head meta http-equiv=Content-Type content= text/html; charset=utf-8 /head.. form action= http://www.. gepiti.. com/tests/welcome.. php method= post.. Name: input type= text name= fname /.. Age: input type= text name= age /.. input type= submit /.. /form.. Η φόρμα καλεί το welcome.. Welcome ?php echo $_POST[ fname ]; ? ! br /.. You are ?php echo $_POST[ age ]; ? years old.. Τα δεδομένα λαμβάνονται από την predefined (προκαθορισμένη από το σύστημα) μεταβλητή: $_POST.. Φόρμες method=get.. Με τη μέθοδο αυτή όλες οι πληροφορίες (τα πεδία) της φόρμας εμφανίζονται στο URL οπότε χρησιμοποιείται μόνο αν δεν υπάρχει κάποια εμπιστευτική πληροφορία (π.. password) στα πεδία.. Ο κώδικας της σελίδας που περιέχει τη φόρμα είναι ακριβώς ο ίδιος αλλά το method είναι τώρα get.. Το welcome.. php είναι λίγο διαφορετικό.. Welcome ?php echo $_GET[ fname ]; ?.. br /.. You are ?php echo $_GET[ age ]; ? years old!.. Τα δεδομένα λαμβάνονται από την predefined (προκαθορισμένη από το σύστημα) μεταβλητή: $_GET.. Υπάρχει και η μεταβλητή $_REQUEST που μπορεί να χρησιμοποιηθεί για την ίδια δουλειά και για POST και για GET methods.. Welcome ?php echo $_REQUEST[ fname ]; ? ! br /.. You are ?php echo $_REQUEST[ age ]; ? years old.. Date function.. Η συνάρτηση για τη διαχείριση ημερομηνιών αποτελεί μέρος της PHP όπως και πολλές άλλες συναρτήσεις.. Η χρήση της είναι:.. echo date( Y/m/d ).. echo date( Y.. m.. d ).. echo date( Y-m-d );.. Δίνει την τρέχουσα ημερομηνία:.. 2012/05/15.. 2012.. 05.. 15.. 2012-05-15.. Για μια οποιαδήποτε ημερομηνία έχουμε την: mktime() με μορφή: mktime(hour,minute,second,month,day,year,is_dst).. $tomorrow = mktime(0,0,0,date( m ),date( d )+1,date( Y ));.. echo Tomorrow is.. date( Y/m/d , $tomorrow);.. Μας δίνει: Tomorrow is 2012/05/16.. (is_dst είναι η προαιρετική παράμετρος για το daylight savings time).. Include file.. Μπορούμε να εισάγουμε ένα αρχείο με php κώδικα μέσα σε ένα άλλο ή σε μια HTML σελίδα.. ?php include 'header.. php'; ?.. h1 Welcome to my home page! /h1.. p Some text.. Μπορείτε να το δοκιμάσετε βάζοντας ως header.. php το παράδειγμα με τις διαφορετικές γραφές της τρέχουσας ημερομηνίας.. Έχουμε ένα αρχείο με μερικές μεταβλητές:.. $color='red';.. $car='BMW';.. Μπορούμε να το καλέσουμε και να τις χρησιμοποιήσουμε:.. h1 Welcome to my home page.. /h1.. ?php include 'vars.. php';.. echo I have a $color $car ; // I have e red BMW.. Welcome to my home page.. I have a red BMW.. File I/O.. Άνοιγμα αρχείου κειμένου και ανάγνωση έναν έναν τους χαρακτήρες που περιέχει:.. head meta http-equiv=Content-Type content= text/html; charset=utf-8 /head body.. $file=fopen( test2.. txt , r ) or exit( Unable to open file! );.. while (!feof($file)).. echo fgetc($file); // οι χαρακτήρες διαβάζονται ένας ένας.. fclose($file);.. feof = file end of line.. Modes.. Description.. r.. Read only.. Starts at the beginning of the file.. r+.. Read/Write.. w.. Write only.. Opens and clears the contents of file; or creates a new file if it doesn't exist.. w+.. Append.. Opens and writes to the end of the file or creates a new file if it doesn't exist.. a+.. Read/Append.. Preserves file content by writing to the end of the file.. x.. Creates a new file.. Returns FALSE and an error if file already exists.. x+.. Εγγραφή σε αρχείο κειμένου.. html head meta charset= utf-8 /head body.. $fileHandle = fopen('essentials.. txt', 'w+').. OR die ( Can't open file\n );.. $result = fwrite ($fileHandle, This line of text was written by PHP.. Ελληνικά\n );.. if ($result).. echo Data written successfully.. br ;.. } else {.. echo Data write failed.. fclose($fileHandle);.. Το κείμενο θα αποθηκευτεί ως utf-8.. Copy – Rename – Delete File.. if (file_exists('essentials.. txt')){.. copy ('essentials.. txt', 'essentials.. bak'); // Copy the file.. rename ('essentials.. bak', 'essentials.. old'); // Rename the file.. unlink ('essentials.. old'); // Delete the file.. Append to file.. $myFile = testFile.. txt ;.. $fh = fopen($myFile, 'a') or die( can't open file );.. $stringData = New Stuff 1\n ;.. fwrite($fh, $stringData);.. $stringData = New Stuff 2\n ;.. fclose($fh);.. Γράφουμε κείμενο στο αρχείο, γραμμή γραμμή.. Append to file δεδομένων από το URL.. $sitedomain = 'eeei.. gr';.. $after_domain_path = 'data/battles';.. $root_dir = '/home/gepiti/public_html';.. $start_dir = $root_dir.. '/'.. $sitedomain.. $after_domain_path;.. $temp_posititions = $start_dir.. '/temp_positions.. txt';.. $positions = $_GET['p'];.. $fh = fopen($temp_posititions, 'a') or die("can't open file");.. $stringData = "$positions#%#%#%#\n";.. echo "$positions\n";.. To URL θα είναι: ?p= κάποιο string.. Ανάγνωση text file γραμμή ανά γραμμή.. $file = fopen( testFile.. //Output a line of the file until the end is reached.. while(!feof($file)).. echo fgets($file).. Cookies.. Δίνουμε στον browser ένα cookie που θα λήξει σε μια ώρα (3600 δευτερόλεπτα).. setcookie( user , Giorgos Epitidios , time()+3600);.. html body.. Cookie Set !.. Βλέπουμε τα περιεχόμενα του.. cookie με το όνομα.. user.. // Print a cookie.. echo $_COOKIE[ user ];.. echo ALL COOKIES: ;.. // A way to view all cookies.. print_r($_COOKIE);.. Έλεγχος αν υπάρχει το.. cookie.. if (isset($_COOKIE[ user ])).. echo Welcome.. $_COOKIE[ user ].. ! br / ;.. echo Welcome guest! br / ;.. Διαγραφή.. Cookie.. // set the expiration date to one hour ago.. setcookie( user , , time()-3600);.. Λήξη.. cookie σε συγκεκριμένο χρονικό διάστημα.. $expire=time()+60*60*24*30;.. setcookie( user , Giorgos Epitidios , $expire);.. html body Long Cookie expiration date /body /html.. Το cookie θα λήξει σε ένα μήνα ((.. 60 sec * 60 min * 24 hours * 30 days.. Αποστολή email με την PHP.. $to = gepiti@gepiti.. com ;.. $subject = Test mail ;.. $message = Hello! This is a simple email message.. $from = someonelse@example.. $headers = From:.. $from;.. mail($to,$subject,$message,$headers);.. echo Mail Sent.. Μπορούμε να έχουμε και φόρμα που στέλνει η ίδια:.. if (isset($_REQUEST['email'])).. //if email is filled out, send email.. //send email.. $email = $_REQUEST['email'] ;.. $subject = $_REQUEST['subject'] ;.. $message = $_REQUEST['message'] ;.. mail( gepiti@gmail.. com , $subject,.. $message, From:.. $email);.. echo Thank you for using our mail form ;.. //if email is not filled out, display the form.. echo form method='post' action='mailform.. php'.. Email: input name='email' type='text' / br /.. Subject: input name='subject' type='text' / br /.. Message: br /.. input name='message' type='text' br /.. input type='submit' /.. /form ;.. Το script έχει ως action τον εαυτό του οπότε για να τρέξει θα πρέπει να το ονομάσετε mailform.. php ή στη θέση του να βάλετε όποιο όνομα του έχετε δώσει.. Το μήνυμα καλύτερα να είναι σε textarea.. :.. textarea name='message' rows='15' cols='40'.. /textarea br /.. Σύνδεση με MySQL.. $con = mysql_connect( localhost , gepiti_gepiti , gepitiphp );.. if (!$con).. die('Could not connect: '.. mysql_error());.. echo some code ;.. mysql_close($con);.. Το mysql_close($con); κλείνει τη σύνδεση στο μέσο του προγράμματος.. Σε διαφορετική περίπτωση κλείνει αυτόματα όταν τελειώσει το script.. Δημιουργία πίνακα.. if (mysql_query( CREATE DATABASE my_db ,$con)).. echo Database created ;.. echo Error creating database:.. mysql_error();.. Αν λάβετε το μήνυμα: Error creating database: Access denied for user 'xxxx'@'localhost' to database 'my_db' σημαίνει πως η βάση δεν είναι προσβάσιμη για δημιουργία πίνακα και πρέπει αυτό να γίνει με το χέρι από ένα εργαλείο όπως το phpMyAdmin.. Δημιουργία.. table στον Πίνακα.. $con = mysql_connect( localhost , peter , abc123 );.. // Create database.. // Create table.. mysql_select_db( my_db , $con);.. $sql = CREATE TABLE Persons.. personID int NOT NULL AUTO_INCREMENT,.. PRIMARY KEY(personID),.. FirstName varchar(15),.. LastName varchar(15),.. Age int.. ) ;.. // Execute query.. mysql_query($sql,$con);.. Το table ονομάζεται Persons και έχει 3 πεδία: FirstName και LastName (κείμενο) Age (ακέραιος).. Το σωστό είναι να έχει και άλλο ένα: Ένα κλειδί (PRIMARY KEY) με αύξοντα αριθμό.. Και εδώ συνήθως δεν μας δίνει πρόσβαση το web hosting και πρέπει να χρησιμοποιήσουμε το phpMyAdmin για να δημιουργήσουμε με το χέρι τον πίνακα και τα πεδία του.. (Για ελληνικά utf8 επιλέξτε utf8_unicode_ci αν δεν υπάρχει ειδικό utf8_greek_ci).. Εισαγωγή δεδομένων στη βάση.. mysql_select_db( gepiti_test , $con);.. mysql_query( INSERT INTO Persons (FirstName, LastName, Age).. VALUES ('Peter', 'Griffin',35) );.. VALUES ('Glenn', 'Quagmire',33) );.. Φόρμα εισαγωγής δεδομένων.. form action= insert.. Firstname: input type= text name= firstname /.. Lastname: input type= text name= lastname /.. Script εισαγωγής δεδομένων.. $sql= INSERT INTO Persons (FirstName, LastName, Age).. VALUES.. ('$_POST[firstname]','$_POST[lastname]','$_POST[age]') ;.. if (!mysql_query($sql,$con)).. die('Error: '.. echo 1 record added ;.. Λήψη δεδομένων από τη βάση.. $result = mysql_query( SELECT * FROM Persons );.. echo table border='1'.. tr.. th Firstname /th.. th Lastname /th.. /tr ;.. while($row = mysql_fetch_array($result)).. echo tr ;.. echo td.. $row['FirstName'].. /td ;.. $row['LastName'].. echo /tr ;.. echo /table ;.. Αναζήτηση δεδομένων στη βάση.. Για να δούμε όλες τις εγγραφές με μικρό όνομα Peter έχουμε:.. $result = mysql_query( SELECT * FROM Persons.. WHERE FirstName='Peter' );.. echo $row['FirstName'].. $row['LastName'];.. echo br / ;.. Ταξινόμηση.. Για ταξινόμηση με βάση την ηλικία έχουμε:.. $result = mysql_query( SELECT * FROM Persons ORDER BY age );.. echo $row['FirstName'];.. echo.. $row['Age'];.. ? /body.. Αλλαγή πεδίου.. Ενημερώνουμε το πεδίο ηλικία μιας εγγραφής στη βάση:.. mysql_query( UPDATE Persons SET Age=36.. WHERE FirstName='Peter' AND LastName='Griffin' );.. Διαγραφή Εγγραφής.. mysql_query( DELETE FROM Persons WHERE LastName='Griffin' );.. Πηγή παραδειγμάτων php: http://www.. com/php/php_intro..

    Original link path: /seminars/htmldr_b/htmldreav_adv.html
    Open archive

  • Title: Δημιουργία σελίδων και εφαρμογών με Javascript και HTML 5
    Descriptive info: Δημιουργία σελίδων και εφαρμογών με Javascript και HTML 5.. Τα βασικά.. Το ελάχιστο περιεχόμενο που χρειάζεται μια σελίδα HTML5 είναι:.. !DOCTYPE html.. title περιγραφή /title.. /head.. περιεχόμενο.. Ουσιαστικά η μόνη διαφορά από την παραδοσιακή HTML 4 είναι το: !DOCTYPE html.. Στην πραγματικότητα βέβαια χρειάζεται και το: meta http-equiv=Content-Type content= text/html; charset=utf-8 διαφορετικά δεν θα φαίνονται σωστά τα ελληνικά (θεωρούμε ως δεδομένο πως το κείμενο είναι σε μορφή Unicode).. Τα νέα χαρακτηριστικά της HTML 5.. • Το canvas element για ζωγραφική 2D (2 διαστάσεων).. • Τα video και audio elements.. • Υποστήριξη για local storage.. • Νέες ειδικές tags (elements όπως τα αποκαλούν τώρα) όπως article , footer , header , nav , section.. • Νέας μορφής controls, όπως calendar, date, time, email, url, search.. Δυστυχώς όλα αυτά δεν υποστηρίζονται από παλιούς browsers.. Καταργημένα τμήματα της HTML 4.. • acronym.. • applet.. • basefont.. • big.. • center.. • dir.. • font.. • frame.. • frameset.. • noframes.. • strike.. • tt.. Στοιχεία προγραμματισμού σε Javascript.. Εισαγωγή στην Javascript.. Objects (αντικείμενα) ονομάζουμε την ίδια τη σελίδα, καθώς και τα σαφώς ορισμένα μέρη της (π.. Methods ονομάζουμε τα πράγματα (εργασίες) που μπορούν να εκτελέσουν τα Objects.. Για παράδειγμα ανοίγουμε ένα νέο έγγραφο με τη μέθοδο document.. open().. Για να γράψετε Hello World σε ένα έγγραφο δίνεται τη μέθοδο: document.. write( Hello World ).. Events ονομάζουμε τις ενέργειες που βάζουν σε κίνηση το μηχανισμό εκτέλεσης των Methods.. Για παράδειγμα όταν κάνει κλικ ο χρήστης να τρέχει ένα υποπρόγραμμα: onClick= run_my_function().. Το πρώτο μου πρόγραμμα Javascript.. head title Δοκιμή Javascript /title.. script.. /script.. Το περιεχόμενο της σελίδας.. Έτσι στο συγκεκριμένο παράδειγμα το alert box Ελπίζω να σας άρεσε η σελίδα μας εμφανίστηκε πριν ακόμη ο χρήστης δει την ίδια τη σελίδα.. Τις περισσότερες φορές πάντως το πρόβλημα διορθώνεται αν δηλώσουμε την ελληνική ως γλώσσα της web σελίδας μας με κάποια οδηγία όπως meta http-equiv=Content-Type content= text/html; charset=windows-1253.. Τα ελληνικά θα εμφανιστούν σωστά στους περισσότερους browsers αν ο κώδικας γίνει:.. meta http-equiv=Content-Type content= text/html; charset=windows-1253.. Γενικά.. head meta charset=utf-8 title Εισαγωγή στην JavaScript /title /head body.. script language= javascript type= text/javascript.. !-- Βάζουμε τον JavaScript κώδικα μέσα σε commend για όσους browsers δεν τον υποστηρίζουν.. /* Η JavaScript είναι case sensitive - Variables Functions πρέπει να έχουν το ίδιο capitalization.. Οι Variables πρέπει να ξεκινάνε με γράμμα, _, or $ και μετά αριθμούς.. Υπάρχουν 4 Datatypes- Numbers, Strings, Booleans, Objects */.. // Maximum - Minimum Numbers (Ακρίβεια μέχρι 16 digits).. write(Number.. MAX_VALUE+ br / );.. MIN_VALUE+ br / );.. // Strings = Ακολουθίες χαρακτήρεων με quotes γύρω τους.. var samp_str = Εδώ έχουμε escaped characters \' \ \\ \t \n ;.. write(samp_str+ br / ); // Η html αγνοεί τις αλλαγές γραμμών.. // String Functions.. var first_str = First String ;.. var second_str = and Second String ;.. var combined = first_str + second_str;.. write(combined+ br / );.. write( Length of string: + combined.. length+ br / );.. write( Substring + combined.. substring(6,12) + br / );.. // Πηγαίνετε ένα παραπάνω απ' ό,τι χρειάζεστε.. write( Last character + combined.. charAt(combined.. length-1)+ br / );.. write( Index of T + combined.. indexOf('t') + br / );.. // Αυτόματο Variable Conversion.. var str_var = 5 ;.. var num_var = 10;.. var total = num_var + str_var; // Το number γίνεται string.. var mult_total = num_var * str_var; // Το number γίνεται string.. write( 5 + 10 = + total + br / );.. write( 5 * 10 = + mult_total + br / );.. // Force Datatype Conversion.. total = num_var + Number(str_var);.. var num_var2 = String(num_var);.. write(num_var + num_var + br / );.. write(num_var + num_var2 + br / );.. // Μετατροπή Float σε Fixed Length String.. var float_var = 3.. 141592653589793238;.. var float_str = float_var.. toFixed(5);.. write( Shortened PI + float_str + br / );.. write( Integer PI + parseInt(float_var) + br / );.. // Βρες το Datatype μιας Variable.. write( Datatype of float_var + typeof(float_var) + br / );.. write( Datatype of float_str + typeof(float_str) + br / );.. // Boolean Variables είναι false (0 or NaN) ή true (οτιδήποτε άλλο).. bool_var = Boolean(23);.. write( Boolean of 23 + bool_var + br / );.. --.. noscript.. h3 Χρειάζεστε JavaScript /h3.. /noscript /body /html.. Σε αυτή την περίπτωση η σελίδα μας γίνεται:.. script src= kati.. Η αλλαγή εδώ βρίσκεται στην οδηγία script που τώρα έγινε:.. Εννοείται ότι σε αυτή την περίπτωση το αρχείο kati.. Μαθηματικές πράξεις.. Στο παράδειγμα που ακολουθεί διαδοχικά pop ups μας δίνουν το αποτέλεσμα κάποιων εργασιών.. HTML HEAD meta http-equiv=Content-Type content= text/html; charset=utf-8 TITLE Δοκιμές /TITLE /HEAD /BODY.. SCRIPT type= text/javascript.. var numsums = 10 + 2;.. alert( 10 + 2 is + numsums).. var x = 10.. alert( ten is + x).. var y = x * 2.. alert( 10 X 2 = + y).. var z = Hello + Good Bye.. alert(z).. divide = 10 / 2.. alert (divide).. var subtract = 10 - 2;.. alert (subtract).. /SCRIPT h2 Παραδείγματα μαθηματικών πράξεων /h2 /BODY /HTML.. To script λειτουργεί πολύ απλά και ο τρόπος εκτέλεσης των μαθηματικών πράξεων και της ένωσης κειμένων (concatenation) είναι προφανής.. Χρησιμοποιώντας τον τελεστή var δηλώνουμε μεταβλητές (π.. numsums, x, subtract).. Αν και η δημιουργία της μεταβλητής divide μας δείχνει πως ο var δεν είναι υποχρεωτικός, καλό είναι για λόγους συγκροτημένης δομής του προγράμματος.. Τέλος παρατηρούμε ότι το πρόγραμμα με μια εξαίρεση δεν έχει ελληνικά ερωτηματικά (semicolon) στο τέλος κάθε γραμμής.. Αν και είναι προαιρετικά βοηθούν στην καλύτερη ανάγνωση του κώδικα και καλό είναι να χρησιμοποιούνται.. Μαθηματικοί Τελεστές.. + Addition x=y+2 7 5.. - Subtraction x=y-2 3 5.. * Multiplication x=y*2 10 5.. / Division x=y/2 2.. 5 5.. % Modulus (division remainder) x=y%2 1 5.. ++ Increment x=++y 6 6.. x=y++ 5 6.. -- Decrement x=--y 4 4.. x=y-- 5 4.. Απόδοση τιμών (Assignment Operators).. Operator Παράδειγμαe Ίδιο με: Αποτέλεσμα.. = x=y Δεν υπάρχει x=5.. += x+=y x=x+y x=15.. -= x-=y x=x-y x=5.. *= x*=y x=x*y x=50.. /= x/=y x=x/y x=2.. %= x%=y x=x%y x=0.. Τελεστές Σύγκρισης.. Operator Περιγραφή Σύγκριση (αν x=5) Αποτέλεσμα.. == is equal to x==8 false.. x==5 true.. === is exactly equal to (value and type) x=== 5 false.. x===5 true.. != is not equal x!=8 true.. !== is not equal (neither value nor type) x!== 5 true.. x!==5 false.. is greater than x 8 false.. is less than x 8 true.. = is greater than or equal to x =8 false.. = is less than or equal to x =8 true.. Λογικοί Τελεστές.. Operator Περιγραφή Παράδειγμα.. and (x 10 y 1) is true.. || or (x==5 || y==5) is false.. ! not !(x==y) is true.. Javascript Debugging.. Στο προηγούμενο παράδειγμα αντικαθιστούμε τα alert με console.. info και ανοίγουμε Firebug – Κονσόλα – Όλα (κάντε ενεργοποίηση αν το ζητήσει).. Τώρα μπορούμε να βλέπουμε μηνύματα από το πρόγραμμα στα σημεία που επιθυμούμε.. console.. info( X= + numsums); //Firebug Κονσόλα.. info( ten= + x);.. info( 10 X 2 = + y).. info(z).. info(divide).. info(subtract).. Επίσης από το σημείο του κώδικα και μετά που θέλετε να ελέγξετε μπορείτε να γράψετε απλώς debugger; (σκέτο χωρίς κάτι άλλο) Για να το δούμε ανοίγουμε Firebug – Σενάριο Ενεργειών (κάντε ενεργοποίηση ή ανανέωση αν το ζητήσει).. Μετά με F11 μπορείτε να κινείστε βήμα βήμα στο πρόγραμμά σας.. Javascript Functions.. Μια function είναι ένα block κώδικα (μια σειρά εντολών) που θα εκτελεστεί όταν ζητηθεί.. button onclick= myFunction('Μαρία Παπαδοπούλου','καθητήτρια HTML') Πάτησέ με /button.. function myFunction(name,job).. alert( Καλώς Όρισες + name + , που είσαι + job);.. /script /body /html.. Η function μπορεί να πάρει εξωτερικές τιμές και να τις επεξεργαστεί.. Functions που μεταφέρουν δεδομένα η μια στην άλλη.. button onclick= messagefunction() Πάτησέ με /button.. var name = 'Μαρία Παπαδοπούλου';.. var job = 'καθητήτρια HTML';.. function messagefunction (){.. var thismessage= myFunction(name,job);.. alert(thismessage);.. function myFunction(localname,localjob){.. return( Καλώς Όρισες + localname + , που είσαι + localjob);.. Τα δεδομένα μεταφέρονται με την return.. Αν δηλώσουμε return χωρίς κάποια τιμή επιστροφής τότε αυτό σημαίνει πως θέλουμε να τελειώσει η εκτέλεση της fuction κάτι που γίνεται στην ίδια γραμμή (ό,τι κώδικας υπάρχει παρακάτω δεν εκτελείται).. Callbacks.. Η callback στην πραγματικότητα παίρνει μια τιμή και τη δίνει για εκτέλεση.. Το πλεονέκτημα της χρήσης της είναι ο ασύγχρονος χαρακτήρας της που επιτρέπει να τρέχουν και άλλα πράγματα ταυτόχρονα.. Η javascript μπορεί να χρησιμοποιεί αυτή τη σύνταξη διότι θεωρεί τις functions ως objects και μπορεί να τις δώσει από δω και εκεί για εκτέλεση.. html meta charset= utf-8 body.. // Ορίζουμε τη function που έχει callback argument.. function some_function(arg1, arg2, callback) {.. /* θα φτιάξουμε έναν τυχαίο αριθμό μεταξύ του arg1 και του arg2 */.. var my_number = Math.. ceil(Math.. random() * (arg1 - arg2) + arg2);.. /* Η Math.. ceil() στρογγυλοποιεί ένα νούμερο στον ανώτερο ακέραιο.. Math.. ceil(1.. 4) = 2*/.. /* Τώρα καλούμε την callback για να δώσουμε το αποτέλεσμα */.. callback(my_number);.. // Καλούμε τη function που ορίσαμε παραπάνω.. some_function(5, 15, function(num) {.. /* Το τρίτο argument είναι μια ανώνυμη function που θα τρέξει όταν κληθεί η callback */.. alert( callback called! + num);.. });.. For loop.. for (var i=0; i 5; i++).. x= The number is + i + br ;.. write(x + br );.. While loop.. var i = '0';.. while (i 5).. i++;.. Do While.. while (i 5);.. Break Loop.. for (i=0;i 10;i++).. if (i==3).. Το loop σταματάει στο σημείο που έχουμε ορίσει.. Continue Loop.. if (i==3) continue;.. Το loop «πηδάει» ένα iteration και συνεχίζει μέχρι το σημείο που έχουμε ορίσει.. Δημιουργία ενός Message Box.. Κατασκευάζουμε ένα input box που όταν κάνουμε κλικ επάνω του μας δίνει το input που δώσαμε.. HTML HEAD meta http-equiv=Content-Type content= text/html; charset=utf-8.. SCRIPT LANGUAGE= JavaScript.. !-- Beginning of JavaScript -.. function MsgBox (textstring) {.. alert (textstring) }.. // - End of JavaScript - --.. /SCRIPT /HEAD BODY.. FORM INPUT NAME= text1 TYPE=Text.. INPUT NAME= submit TYPE=Button VALUE= Show Me onClick= MsgBox(form.. text1.. value).. /FORM /BODY /HTML.. Επεξήγηση του κώδικα:.. Σχόλια: Οποιαδήποτε γραμμή ξεκινάει από // μέσα στην οδηγία Script δεν εκτελείται.. Το // υποδηλώνει πως σε αυτή τη γραμμή ο προγραμματιστής έγραψε παρατηρήσεις (κείμενο) για χρήση δική του ή άλλων.. Θέση του script: Αν και θεωρητικά μπορεί να τοποθετηθεί οπουδήποτε στη σελίδα συνήθως προτιμούμε τον HEADER όπου αυτό είναι δυνατό:.. (Εδώ μπαίνουν οι JavaScript functions).. /SCRIPT.. Σύνταξη της function:.. Function = υποπρόγραμμα (σύνολο εντολών – εργασιών).. MyFunction = το όνομα της function.. Variable = μεταβλητή (μια τιμή που θα επεξεργαστούμε).. function MyFunction (variable) {.. εργασίες που θα εκτελεστούν σε αυτή την variable.. Η επεξήγηση της:.. alert (textstring).. MsgBox = το όνομα της function.. Textstring = το όνομα της μεταβλητής.. alert (textstring) = Η εντολή alert θα εφαρμοστεί πάνω στη μεταβλητή textstring.. Περιεχόμενο της variable:.. Η μεταβλητή textstring πρέπει να έχει μια τιμή.. Αυτή θα μπορούσε να οριστεί απευθείας από τον κώδικα.. Για παράδειγμα: textstring = “This is a text string” (προσέξτε ότι το κείμενο βρίσκεται μέσα σε εισαγωγικά).. Εκτέλεση της εργασίας:.. Από τη standard HTML αναγνωρίζουμε τις γραμμές 1,2,4.. INPUT NAME= text1 TYPE=Text.. Το μυστικό της γραμμής 3 είναι το: onClick= MsgBox(form.. Τα υπόλοιπα αποτελούν standard HTML.. To onClick λέει στον browser πως όταν ο χρήστης κάνει κλικ θα πρέπει να εκτελέσει την function MsgBox.. Το form.. value σημαίνει πως ο browser θα πρέπει να πάρει από τη φόρμα το object (αντικείμενο) που ονομάζεται text1 και να δώσει στην MsgBox το περιεχόμενό του (δηλαδή αυτό που έγραψε ο χρήστης).. Για να γίνει πιο εμφανής η διαφορά, αν θέλαμε να μάθουμε το μήκος του κειμένου που έγραψε ο χρήστης θα δίναμε: form.. length.. Παραπομπή με message box.. Με τον ακόλουθο απλό κώδικα μόλις ο χρήστης κάνει κλικ στην παραπομπή θα εμφανιστεί ένα μήνυμα.. Όταν κάνει κλικ στο ΟΚ του μηνύματος τότε θα μεταφερθεί στη σχετική σελίδα.. gr onClick= alert('Hi'); return true; Click Me /a.. Αν το return ήταν false αντί για true η ενέργεια της παραπομπής δεν θα εκτελούνταν (όλα θα τελείωναν στο οκ).. Αλλαγή του φόντου μιας σελίδας.. Στόχος αυτού του παραδείγματος είναι καταλάβουμε την έννοια της μεταβλητής και τις διαφορετικές τιμές που μπορεί να λάβει.. Για τον λόγο αυτό θα δημιουργήσουμε μια σελίδα με 4 κουμπιά.. Κάθε φορά που θα πατάμε ένα κουμπί θα αλλάζει το φόντο της σελίδας.. Ο κώδικας είναι:.. function changecolor(code) {.. bgColor=code.. form.. input type= button name= Button1 value= RED onclick= changecolor('red').. input type= button name= Button2 value= GREEN onclick= changecolor('green').. input type= button name= Button3 value= BLUE onclick= changecolor('blue').. input type= button name= Button4 value= WHITE onclick= changecolor('white').. Εδώ έχουμε μόνο μια συνάρτηση που ονομάζεται changecolor.. Η variable ονομάζεται code και της δίνουμε μια τιμή με το onclick= changecolor('κάποιο χρώμα') δηλαδή όταν ο χρήστης κάνει κλικ θεώρησε ότι code = το χρώμα τάδε και εκτέλεσε την function changecolor(code).. IF – ELSE.. Σε αυτό το παράδειγμα θα δούμε με ποιο τρόπο μπορούμε να δώσουμε στην Javascript όρους λειτουργίας της μορφής: Αν συμβαίνει αυτό κάνε το Α, διαφορετικά κάνε το Β.. Για να γίνει αυτό θα δημιουργήσουμε μια σελίδα με password.. Όταν ο χρήστης δώσει το σωστό συνθηματικό τότε θα φορτώνεται μια άλλα σελίδα.. HTML HEAD meta http-equiv=Content-Type content= text/html; charset=utf-8 TITLE If-then statements /TITLE.. function password() {.. Ret = prompt('Type the word eexi', );.. if(Ret== eexi ) {.. location = 'reply.. htm';.. alert( Please try again ).. A HREF= javascript:password() IMG SRC= pict1.. gif NAME= pic1 ALT= about us! BORDER= 0 align= left /A.. H3 Click to enter a password protected document /H3 /BODY /HTML.. Το πρώτο κομμάτι κώδικα που πρέπει να δούμε είναι το:.. Αυτό λέει στον browser να εμφανίσει το prompt με αυτές τις ιδιότητες όταν ο χρήστης κάνει κλικ στην παραπομπή A HREF= javascript:password() που καλεί την function με το όνομα password.. Η παραπομπή γίνεται από γραφικό, αλλά θα μπορούσε κάλλιστα να είναι μια απλή παραπομπή κειμένου.. Ενδιαφέρον είναι να παρατηρήσουμε τα εισαγωγικά που ακολουθούν το 'Type the word eexi.. Σε αυτά μπορούμε να βάλουμε ένα default password, που θα εμφανίζεται αυτόματα στο prompt π.. Ret = prompt('Type the word eexi', eexi );.. Εδώ λέμε στην function πως αν η μεταβλητή Ret έχει την τιμή eexi τότε θα εκτελέσει μια ενέργεια (προσέξτε το διπλό = που σημαίνει ίδιο).. Διαφορετικά θα εκτελέσει μια άλλη.. Στην περίπτωση που Ret == eexi φορτώνουμε μια νέα web σελίδα.. Διαφορετικά εμφανίζουμε ένα μήνυμα στο alert box.. Εκτός από τον τελεστή == πολύ δημοφιλείς είναι και οι μαθηματικοί τελεστές.. Για παράδειγμα μπορούμε να έχουμε μια φόρμα όπου ο χρήστης δίνει την ηλικία του.. Αν ονομάζουμε το input box age τότε με ageinput=form.. age.. value παίρνουμε την ηλικία του χρήστη και με ένα if (age =18) βγάζουμε ένα μήνυμα σχετικό με την ηλικά του ενήλικα χρήστη.. If – Else if.. HTML HEAD meta http-equiv=Content-Type content= text/html; charset=utf-8 TITLE If - else if /TITLE.. script type= text/javascript.. var visitor = principal ;.. if(visitor == teacher ){.. write( My dog ate my homework.. }else if(visitor == principal ){.. write( What stink bombs? );.. write( How do you do? );.. /script /HEAD BODY /body /html.. Javascript getElementById.. Για να λάβουμε το περιεχόμενο ενός input δεδομένων σε σελίδα HTML χρησιμοποιούμε την μέθοδο getElementById η οποία διαβάζει το περιεχόμενο του ενός id (άρα προφανώς χρειάζεται να δηλώσουμε id στο input για να τη χρησιμοποιήσουμε).. function notEmpty(){.. var myTextField = document.. getElementById('myText');.. if(myTextField.. value != ).. alert( You entered: + myTextField.. value).. alert( Would you please enter some text? ).. input type='text' id='myText' /.. input type='button' onclick='notEmpty()' value='Form Checker' /.. Αλλαγή της value ενός button.. Αν έχουμε:.. input type= button id= run value= Run Animation.. Μπορούμε να το αλλάξουμε με το:.. getElementById( run ).. value= Step 1 ;.. Javascript innerHTML.. Η μέθοδος innerHTML χρησιμοποιείται στην περίπτωση που θέλουμε να τροποποιήσουμε ένα μέρος της web σελίδας μας.. Όπως και στην getElementById χρειάζεται να δηλώσουμε id στο input για να τη χρησιμοποιήσουμε.. meta http-equiv=Content-Type content= text/html; charset=utf-8.. function changeText(){.. getElementById('boldStuff').. innerHTML = 'Γιώργο';.. p Welcome to the site b id='boldStuff' φίλε /b /p.. input type='button' onclick='changeText()' value='Change Text'/.. createElement.. HTML HEAD meta http-equiv=Content-Type content= text/html; charset=utf-8 TITLE document.. createElement /TITLE /head.. p Κάντε Click στο κουμπί για να εμφανιστεί ένα δεύτερο με κείμενο.. button onclick= myFunction() Try it /button.. function myFunction().. var btn=document.. createElement( BUTTON );.. var t=document.. createTextNode( ΕΔΩ ΕΙΜΑΙ );.. btn.. appendChild(t);.. body.. appendChild(btn);.. };.. Η createTextNode προσθέτει κείμενο στο κουμπί μέσω της btn.. Form Validation.. Η Javascript είναι ιδανική για τον έλεγχο των στοιχείων που μας δίνει όποιος χρήστης συμπληρώνει τη φόρμα μας.. Το πλεονέκτημα του ελέγχου του form input με javascript είναι πως δεν χρειάζεται να πειράξουμε το action script που κατά πάσα πιθανότητα δεν έχει φτιαχτεί από εμάς και συνεπώς είναι δυσκολότερο να τροποποιηθεί.. Έλεγχος πως είναι πεδίο συμπληρώθηκε:.. Ο κώδικας για μια αυτόνομη σελίδα είναι:.. HTML HEAD meta http-equiv=Content-Type content= text/html; charset=utf-8 TITLE Δοκιμές /TITLE.. script type='text/javascript'.. function isEmpty(elem, helperMsg){.. if(elem.. value.. length == 0){.. alert(helperMsg);.. elem.. focus();.. return true;.. return false;.. /script /head.. body form.. Required Field: input type='text' id='req1'/.. input type='button'.. onclick= isEmpty(document.. getElementById('req1'), 'Please Enter a Value').. value='Check Field' /.. /form /BODY /HTML.. Διαβάζοντας από το τέλος βλέπουμε πως όταν κάνουμε κλικ (onclick) καλείται η function isEmpty και τις δίδονται δύο μεταβλητές.. Η document.. getElementById('req1'), δηλαδή το περιεχόμενο του input box που έχει name req1 και το μήνυμα «Please Enter a Value».. Βλέποντας τώρα ψηλότερα στην function isEmpty ελέγχεται το μέγεθος του κειμένου που υπήρχε στο req1 (είναι η variable elem και η εργασία απεικονίζεται ως: elem.. length).. Αν πράγματι δεν έχει μήκος τότε εμφανίζεται το alert μήνυμα (που φυλάσσεται στη μεταβλητή helperMsg).. Το elem.. focus() μεταφέρει τον δρομέα μέσα στο input πεδίο ώστε ο χρήστης να μη χρειάζεται να μετακινηθεί στο πεδίο για να πληκτρολογήσει το input του.. Το return true; δηλώνει πως μετά το κλικ στο ΟΚ του χρήστη θα εκτελεστεί ο υπόλοιπος κώδικας (ο δρομέας θα πάει στο input πεδίο που δεν έχει συμπληρωθεί).. Έλεγχος πως ένα πεδίο περιέχει μόνο αριθμούς.. Χρήσιμο σε περίπτωση που θέλουμε να εξασφαλίσουμε πως ο χρήστης έδωσε με τον σωστό τρόπο έναν ταχυδρομικό κώδικα, έναν αριθμό πιστωτικής κάρτας ή ένα τηλέφωνο.. function isNumeric(elem, helperMsg){.. var numericExpression = /^[0-9]+$/;.. match(numericExpression)){.. }else{.. /script /HEAD BODY.. Numbers Only: input type='text' id='numbers'/.. onclick= isNumeric(document.. getElementById('numbers'), 'Numbers Only Please').. Η φόρμα είναι δομημένη ακριβώς όπως και στο προηγούμενο παράδειγμα.. Αλλάζει μόνο το name που τώρα είναι numbers (φυσικά θα μπορούσε να είναι οτιδήποτε) και φυσικά το μήνυμα προς τον χρήστη.. Η function παίρνει το input του χρήστη και το μήνυμα λάθους.. Δημιουργεί τη νέα μεταβλητή numericExpression που θα χρησιμοποιηθεί για σύγκριση με την τιμή που έδωσε στο input ο χρήστης.. Το var δηλώνει τη δημιουργία της (είναι σαν να λέμε στη javascript δημιούργησε την numericExpression).. Η νέα μεταβλητή από την αρχή (^) μέχρι το τέλος ($) της πρέπει να περιέχει μόνο αριθμούς ([0-9]) ανεξάρτητα από το πόσοι είναι αυτοί (+).. Αυτός ο τρόπος σύγκρισης strings (ακολουθίες χαρακτήρων) ονομάζεται Regular Expression.. Αν τώρα οι 2 μεταβλητές ταιριάζουν: if(elem.. match(numericExpression)) τότε είμαστε οκ.. Διαφορετικά εμφανίζεται το μήνυμα λάθους.. Έλεγχος πως ένα πεδίο περιέχει μόνο γράμματα.. Λειτουργεί με ακριβώς τον ίδιο τρόπο με τον έλεγχο για αριθμούς.. Η μόνη διαφορά βρίσκεται στη Regular Expression που τώρα είναι /^[a-zA-Z]+$/ δηλαδή αντί για τους αριθμούς [0-9] τώρα έχουμε όλα τα πεζά (μικρά) και κεφαλαία γράμματα από το πρώτο έως το τελευταίο δηλαδή: [a-zA-Z] Δυστυχώς αυτή η Regular Expression αναφέρεται μόνο σε λατινικούς χαρακτήρες.. Για έλεγχο ελληνικών δείτε το ακόλουθο παράδειγμα:.. var numericExpression = /^[a-zA-Zα-ωΑ-ΩάέόώήίύϋϊΆΈΌΏΉΊΎΫ]+$/ ;.. Μόνο γράμματα: input type='text' id='numbers'/.. Περιορισμός του μήκους ενός πεδίου.. Αν δεν θέλουμε το μήκος του πεδίου να ξεπερνά ένα συγκεκριμένο μέγεθος (π.. για να μη μας δώσουν ταχυδρομικό κώδικα με περισσότερα από 5 νούμερα) χρησιμοποιούμε τον ακόλουθο κώδικα:.. HTML HEAD TITLE Δοκιμές /TITLE meta http-equiv=Content-Type content= text/html; charset=utf-8 /HEAD /BODY.. function lengthRestriction(elem, min, max){.. var uInput = elem.. value;.. if(uInput.. length = min uInput.. length = max){.. alert( Please enter between +min+ and +max+ characters );.. Username(6-8 characters): input type='text' id='restrict'/.. onclick= lengthRestriction(document.. getElementById('restrict'), 6, 8).. Εδώ η function ονομάζεται lengthRestriction και της δίνουμε 3 μεταβλητές (variables).. Το input της φόρμας, τον μέγιστο και τον ελάχιστο αριθμό χαρακτήρων.. Εδώ η if έχει δύο μέρη.. Ελέγχει αν η μεταβλητή uInput που περιέχει ό,τι πληκτρολόγησε ο χρήστης έχει μέγεθος = και ταυτόχρονα ( ) = από τη μέγιστη και την ελάχιστη τιμή.. Προσέξτε ότι:.. Η if θα μπορούσε να διατυπωθεί και ως: if(elem.. length = min elem.. length = max).. Δημιουργήσαμε την uInput για να βλέπουμε πιο καθαρά τι κάνουμε.. Για να εμφανίσουμε σε ένα text box τα δεδομένα (περιεχόμενο) μιας μεταβλητής τα περικλείουμε με +.. Υποχρεωτική επιλογή από select.. Για να υποχρεώσουμε έναν χρήστη να επιλέξει οπωσδήποτε μια τιμή από ένα πεδίο select θα χρησιμοποιήσουμε κάτι αντίστοιχο με το ακόλουθο παράδειγμα:.. HTML HEAD TITLE Δοκιμές /TITLE meta http-equiv=Content-Type content= text/html; charset=utf-8 /HEAD BODY.. function madeSelection(elem, helperMsg){.. value == Please Choose ){.. Selection: select id='selection'.. option Please Choose /option.. option Αθήνα /option.. option Θεσσαλονίκη /option.. option Πάτρα /option.. /select.. onclick= madeSelection(document.. getElementById('selection'), 'Please Choose Something').. Εδώ η λειτουργία είναι πολύ απλή.. Αν το input έχει το περιεχόμενο Please Choose τότε ο χρήστης δεν επέλεξε κάτι και τον καλούμε να το πράξει.. Έλεγχος ορθότητας μιας email διεύθυνσης.. Για να σιγουρευτούμε ότι οι χρήστες μας έχουν δώσει μια σωστή email διεύθυνση θα χρησιμοποιήσουμε τον ακόλουθο κώδικα μέσω του οποίου ελέγχουμε ότι μας πληκτρολόγησαν κάτι που περιέχει το @, κάτι αριστερά του, κάτι δεξιά του, μια τελεία, ένα top level domain μετά την τελεία.. Προσοχή: Με τον κώδικα αυτό επιβεβαιώνουμε πως ο χρήσης πληκτρολόγησε κάτι που μοιάζει με email διεύθυνση.. Δεν ελέγχουμε αν η συγκεκριμένη διεύθυνση όντως υπάρχει.. HTML HEAD TITLE Δοκιμές /TITLE /HEAD meta http-equiv=Content-Type content= text/html; charset=utf-8 BODY.. script TYPE= text/javascript.. function emailValidator1(elem, helperMsg){.. var emailExp = /^[\w\-\.. \+]+\@[a-zA-Z0-9\.. \-]+\.. [a-zA-Z0-9]{2,4}$/;.. match(emailExp)){.. Email: INPUT TYPE= text ID= emailer /.. INPUT TYPE= button ONCLICK= emailValidator1(document.. getElementById('emailer'), 'Not a Valid Email') VALUE= Check Field /.. Έλεγχος περισσότερων από ένα πεδίων ταυτόχρονα.. Μέχρι τώρα είδαμε πώς μπορούμε να ελέγξουμε ένα πεδίο σε κάθε φόρμα.. Ωστόσο, συνήθως επιθυμούμε να ελέγχουμε περισσότερα από ένα πεδία στην ίδια φόρμα.. Θα χρησιμοποιήσουμε τη function formValidator μέσω της οποία θα γίνουν όλοι οι έλεγχοι.. html head meta http-equiv=Content-Type content= text/html; charset=utf-8.. function formValidator(){.. // Make quick references to our fields.. var firstname = document.. getElementById('firstname');.. var addr = document.. getElementById('addr');.. var zip = document.. getElementById('zip');.. var state = document.. getElementById('state');.. var username = document.. getElementById('username');.. var email = document.. getElementById('email');.. // Check each input in the order that it appears in the form!.. if(isAlphabet(firstname, Please enter only letters for your name )){.. if(isAlphanumeric(addr, Numbers and Letters Only for Address )){.. if(isNumeric(zip, Please enter a valid zip code )){.. if(madeSelection(state, Please Choose a State )){.. if(lengthRestriction(username, 6, 8)){.. if(emailValidator(email, Please enter a valid email address )){.. focus(); // set the focus to this input.. function isAlphabet(elem, helperMsg){.. var alphaExp = /^[a-zA-Z]+$/;.. match(alphaExp)){.. function isAlphanumeric(elem, helperMsg){.. var alphaExp = /^[0-9a-zA-Z]+$/;.. function emailValidator(elem, helperMsg){.. [a-zA-z0-9]{2,4}$/;.. /script /head body.. form onsubmit='return formValidator()'.. First Name: input type='text' id='firstname' / br /.. Address: input type='text' id='addr' / br /.. Zip Code: input type='text' id='zip' / br /.. State: select id='state'.. option AL /option.. option CA /option.. option TX /option.. option WI /option.. /select br /.. Username(6-8 characters): input type='text' id='username' / br /.. Email: input type='text' id='email' / br /.. input type='submit' value='Check Form' /.. /form /body /html.. Javascript Arrays.. html head meta http-equiv=Content-Type content= text/html; charset=utf-8 /head body.. var i;.. var mycars = new Array();.. mycars[0] = Saab ;.. mycars[1] = Volvo ;.. mycars[2] = BMW ;.. for (i=0;i mycars.. length;i++).. write(mycars[i] + br );.. Array Concatenation.. p id= demo Click στο button για να ενωθούν τρία arrays.. button onclick= myFunction() Ένωση /button.. var hege = [ Γιώργος , Μαρία ];.. var stale = [ Βαγγέλης , Τασία ];.. var kai = [ Στέφανος , Θανάσης ];.. var children = hege.. concat(stale,kai);.. var x=document.. getElementById( demo );.. innerHTML=children;.. Join.. p id= demo Click στο button για να ενωθούν τα arrays.. innerHTML=hege.. join();.. Σύνταξη: array.. join(separator).. Αν δεν οριστεί separator θα χρησιμοποιηθεί το κόμμα.. join('#'); θα έχει ως separator το #.. Push, προσθήκη στο τέλος.. p id= demo Click στο button /p.. button onclick= myFunction() Προσθήκη /button.. var family = [ Γιώργος , Ματίνα ];.. family.. push( Μάριος ).. innerHTML=family.. unshift, προσθήκη στην αρχή.. unshift( Μάριος ).. Δεν λειτουργεί στον Internet Explorer 8.. Pop, Αφαίρεση του τελευταίου element.. pop().. shift, αφαίρεση του πρώτου element.. shift().. reverse, αντιστροφή της σειράς των elements.. reverse().. slice, λήψη τμημάτων της array.. var family = [ Γιώργος , Ματίνα , Μάριος , Αθηνά ];.. var paidia = family.. slice(1,3);.. innerHTML=paidia.. φέρνει το 1 και το 2 αλλά όχι το 3.. slice(start, end).. Start = από αυτό το element και μετά (0 = 1).. End = μέχρι ποιο element θα είναι η φέτα της array (προεραιτικό).. slice(1); θα φέρει: Ματίνα,Μάριος,Αθηνά.. slice(-3,-1); θα μας φέρει τα elements από το τέλος, δηλαδή τα Ματίνα,Μάριος (όταν μετράμε ανάποδα από το τέλος ξεκινάμε από το 1 όχι από το 0).. Αλφαβητική αύξουσα ταξινόμηση.. sort();.. innerHTML=family;.. Splice, προσθήκη ή αφαίρεση elements σε συγκεκριμένο σημείο.. splice(2,0, Στέφανος , Θοδωρής );.. Το πρώτο νούμερο είναι ακέραιος και αναφέρει τη θέση όπου θα μπουν ή θα αφαιρεθούν elements.. Το δεύτερο είναι ακέραιος και αναφέρει πόσα θα αφαιρεθούν.. Ακολουθούν τα elements προς πρόσθεση.. splice(2,2, Στέφανος , Θοδωρής );.. Αφαιρεί τα δύο τελευταία elements και τα αντικαθιστά με καινούρια.. splice(2,1, Στέφανος , Θοδωρής );.. Αφαιρεί το Μάριος και προσθέτει δύο νέα στη θέση του.. Αριθμητική ταξινόμηση (αύξουσα).. var points = [40,100,1,5,25,10];.. points.. sort(function(a,b){return a-b});.. innerHTML=points;.. Αριθμητική ταξινόμηση (φθίνουσα).. sort(function(a,b){return b-a});.. Μετατροπή μιας array σε string.. toString();.. innerHTML=family ;.. var x1=document.. getElementById( demo1 );.. x1.. innerHTML=family[0]; // Η Array παραμένει ως έχει, απλώς την κάναμε να συμπεριφερθεί ως string.. p id= demo1 /p.. Οι τιμές υποχρεωτικά χωρίζονται με κόμμα.. Array of Arrays.. html head meta http-equiv=Content-Type content= text/html; charset=utf-8 title JavaScript Array of Arrays /title /head body.. h1 JavaScript Array of Arrays /h1.. script language= Javascript.. var array = new Array( Γιώργος , Ματίνα ,564,375,new Array(5,6,7),.. net ).. write( array[0] = +array[0]+ br ).. write( array[1] = +array[1]+ br ).. write( array[2] = +array[2]+ br ).. write( array[3] = +array[3]+ br ).. write( array[4][0] = +array[4][0]+ br ).. write( array[4][1] = +array[4][1]+ br ).. write( array[4][2]= +array[4][2]+ br ).. write( array[5]= +array[5]+ br ).. Για να βρουμε το μήκος μιας array που βρίσκεται μέσα σε άλλη το property είναι multidimentionalarray[simplearraypositioninmultidimentional].. SCRIPT language= JavaScript.. !--.. function which_car().. var my_cars= new Array().. my_cars[ cool ]= Mustang ;.. my_cars[ οικογενειακό ]= Station Wagon ;.. my_cars[ μεγάλο ]= SUV ;.. var car_type=prompt( Γράψτε το αυτοκίνητο που προτιμάτε? , );.. if ((car_type== cool ) || (car_type== οικογενειακό ) || (car_type== μεγάλο )).. alert( Νομίζω πως πρέπει να αγοράσετε ένα +my_cars[car_type]+ αμάξι.. alert( Σύγνώμη δεν ξέρω τι χρειάζεστε );.. //--.. INPUT TYPE= button onClick= which_car() value= Βρες τι αμάξι θέλεις!.. /FORM /body /html.. Δοκιμάστε τι θα γίνει αν ψάξετε για οικογενειακό χωρίς τόνο.. Javascript αναζήτηση κειμένου.. var myRegExp = /Μαρία/;.. var string1 = Today John went to the store and talked with Μαρία ;.. var matchPos1 = string1.. search(myRegExp);.. if(matchPos1 != -1).. write( There was a match at position + matchPos1);.. write( There was no match in the first string );.. Προσέξτε πως εδώ έχουμε μόνο αναγνώριση του «Μαρία» το «μαρία» (με πεζό μ) δεν θα αναγνωριστεί.. Για να γίνει αυτό θα πρέπει να ορίσουμε: var myRegExp = /μαρία/i;.. Στρογγυλοποιήσεις.. !DOCTYPE HTML.. head meta http-equiv=Content-Type content= text/html; charset=utf-8 title Rounding /title.. var num = 5.. 56789;.. var n=num.. toFixed(2);.. /* 2 Αν θέλω 2 δεκαδικά ψηφία*/.. alert(n);.. ΠΡΟΣΟΧΉ: Η στογγυλοποίηση γίνεται στην εμφάνιση των δεδομένων.. Η num δεν έχει αλλάξει περιεχόμενο.. Σύνταξη: number.. toFixed(x).. Χρήση: Μετατρέπει έναν αριθμό σε string με x αριθμό δεκαδικών (η δήλωσή του είναι προεραιτική, χωρίς x θα μας δώσει το νούμερο χωρίς υποδιαστολή).. Μετατροπή string σε αριθμό: ParseInt και ParseFloat.. var new_n = parseFloat(n);.. new_n += 1;.. alert(new_n);.. parseFloat('1.. 45kg') // 1.. 45.. parseFloat('77.. 3') // 77.. parseFloat('077.. parseFloat('0x77.. 3') // 0.. parseFloat('.. parseFloat('0.. 1e6') // 100000.. parseInt('123.. 45') // 123.. parseInt('77') // 77.. parseInt('077',10) // 77.. parseInt('77',8) // 63 (= 7 + 7*8).. parseInt('077') // 63 (= 7 + 7*8).. parseInt('77',16) // 119 (= 7 + 7*16).. parseInt('0x77') // 119 (= 7 + 7*16).. parseInt('099') // 0 (9 is not an octal digit).. parseInt('99',8) // NaN (0 in very old browsers e.. g.. IE3).. parseInt('0.. 1e6') // 0.. parseInt('ZZ',36) // 1295 (= 35 + 35*36).. Javascript αντικατάσταση κειμένου.. html meta http-equiv=Content-Type content= text/html; charset=utf-8.. var visitorName = Ματίνα ;.. var myOldString = Hello username! I hope you enjoy your stay username.. var myNewString = myOldString.. replace( username , visitorName);.. write( Old string = + myOldString);.. write( br / New string = + myNewString);.. /script /html.. Αντί για string μπορούμε να χρησιμοποιήσουμε regular expression.. var visitorName = Σοφία ;.. replace(/username/, visitorName);.. Για να κάνουμε την αναζήτηση case insensitive:.. replace(/username/i, visitorName);.. Για πολλαπλή αντικατάσταση έχουμε:.. var visitorName = Κώστα ;.. replace(/username/g, visitorName);.. Javascript Εύρεση τρέχουσας ημερομηνίας.. h4 Τώρα έχουμε.. var currentTime = new Date().. var month = currentTime.. getMonth() + 1.. var day = currentTime.. getDate().. var year = currentTime.. getFullYear().. write(month + / + day + / + year).. /script /h4 /html.. Javascript Εύρεση τρέχουσας ώρας.. h4 Η ώρα είναι.. var hours = currentTime.. getHours().. var minutes = currentTime.. getMinutes().. if (minutes 10){.. minutes = 0 + minutes.. write(hours + : + minutes + ).. if(hours 11){.. write( μ.. μ.. write( π.. Javascript Εύρεση μήκους χαρακτήρων.. var myString = αβγδεζ ;.. var length = myString.. length;.. write( The string is this long: + length);.. /* Η πάνω και η κάτω γραμμή δίνουν το ίδιο αποτέλεσμα.. Στη 2η χρησιμοποιούμε την write function απευθείας χωρίς ενδιάμεση μεταβλητή */.. write( br / Το string έχει μήκος: + myString.. length);.. Javascript IndexOf.. Εύρεση της θέσης ενός string:.. var aURL = http://www.. tizag.. com/ ;.. write(aURL);.. var aPosition = aURL.. indexOf( www );.. write( br Η θέση του www είναι: + aPosition);.. Χρήση offset στην έναρξη αναζήτησης:.. com/www.. html ;.. var secondPos = aURL.. indexOf( www , aPosition + 1);.. write( η θέση του www είναι: + aPosition);.. write( br / Η θέση του δεύτερου www = + secondPos);.. Σύγκριση strings.. var username = Agent006 ;.. if(username == Agent007 ).. write( Welcome special agent 007 );.. write( Access Denied! );.. write( br / br / Would you like to try again? br / br / );.. // Ξαναπροσπαθούμε με άλλο username.. username = Agent007 ;.. Αν θέλουμε η σύγκριση να είναι case insensitive έχουμε:.. var username = someAgent ;.. if(username == SomeAgent ).. write( Welcome special agent );.. // Now as case insensitive.. write( br / br / Ξαναδοκιμάζουμε με έχοντας κάνει LowerCase όλα: br / br / );.. if(username.. toLowerCase() == SomeAgent.. toLowerCase()).. parseInt.. Διαβάζει ένα string και δίνει έναν ακέραιο.. Σύνταξη: parseInt(string, radix).. Το radix είναι προαιρετικό.. Αν δεν υπάρχει κάτι βρίσκει αριθμό στο δεκαδικό σύστημα.. Αν είναι 16 βρίσκει στο δεκαεξαδικό.. Αν το string που θα βρει αρχίζει από 0x θα το θεωρήσει δεκαεξαδικό, ενώ αν αρχίζει από μηδέν οκταδικό (octal).. Τα οκταδικά συστήματα χρησιμοποιούν τα ψηφία από 0 έως 7.. Για παράδειγμα σε binary το 74 του δεκαδικού συστήματος είναι 1001010, αυτό ομαδοποιείται σε: (00)1 001 010 οπότε το οκταδικό του είναι: 112.. html head meta charset=utf-8 /head.. body script.. write(parseInt( 10 ) + br ) ;.. write(parseInt( 10.. 33 ) + br );.. write(parseInt( 34 45 66 ) + br );.. write(parseInt( 60 ) + br );.. write(parseInt( 40 χρονών ) + br );.. write(parseInt( Ήταν 40 ) + br );.. write( br );.. write(parseInt( 10 ,10)+ br );.. write(parseInt( 010 )+ br );.. write(parseInt( 10 ,8)+ br );.. write(parseInt( 0x10 )+ br );.. write(parseInt( 10 ,16)+ br );.. Χρήση της void.. Με void 0 η παραπομπή δεν εκτελείται:.. a href= javascript: void(0) Άχρηστο link /a /html.. Με οποιοδήποτε άλλο νούμερο μπορούμε να το χρησιμοποιήσουμε για περαιτέρω εργασίες.. a href= javascript: void(myNum=10);alert('Νούμερο = '+myNum) Δώσε νούμερο: /a /html.. Και για ένα τυχαίο νούμερο από το 0 έως το 10:.. H Math.. floor(x) μας δίνει τον κοντινότερο προς τα κάτω ακέραιο για ένα δεκαδικό.. χ:.. floor(1.. 6);.. Μας δίνει 1.. script var myNum=Math.. floor(Math.. random()*11); /script.. a href= javascript: void(myNum);alert('Νούμερο = '+myNum).. Δώσε νούμερο: /a /html.. Για να αλλάξει το νούμερο πρέπει να ξαναγίνει load η σελίδα.. Τυχαίο νούμερο από 1 έως 100:.. floor((Math.. random()*100)+1);.. Confirmation Box.. function confirmation() {.. var answer = confirm( Leave tizag.. com? ).. if (answer){.. alert( Bye bye! ).. window.. location = http://www.. else{.. alert( Ευχαριστούμε που παραμείνατε! ).. input type= button onclick= confirmation() value= Πήγαινε σε άλλο site.. /form /body /html /html.. Try … Catch.. Εκτελούμε μια εργασία και παρακολουθούμε πιθανά λάθη.. var txt= ;.. function message().. try.. adddlert( Καλώς όρισες! );.. catch(err).. txt= Η σελίδα έχει λάθος.. \n\n ;.. txt+= Περιγραφή λάθους: + err.. message + \n\n ;.. txt+= Click στο OK για τη συνέχεια.. alert(txt);.. input type= button value= Δες το μήνυμα onclick= message().. Το πρόβλημα εδώ είναι πως γράψαμε adddlert αντί για alert.. Αν το αλλάξουμε δεν θα εμφανίζεται πια το μήνυμα λάθους.. Ternary Operator.. Αντί για if … else ένας άλλος τρόπος να ενεργήσουμε ελέγχους μιας συνθήκης είναι ο ternary operator.. Αντί για.. var b=5;.. If (b ==5) {.. write( ---------------------------σωστό );.. else {.. write( ---------------------------λάθος );.. έχουμε:.. html head meta http-equiv=Content-Type content= text/html; charset=utf-8 /head.. script language=javascript.. (b == 5) ? a= σωστό : a= λάθος ;.. write( --------------------------- +a);.. Αλλάξτε το var b=5 για να δείτε το άλλο condition.. Object Oriented Programming με Javascript.. Για την JavaScript τα πάντα είναι objects, πχ.. Strings, Dates, Arrays, Functions.. κ.. Εκεί όμως που τα πράγματα γίνονται πιο περίπλοκα και ενδιαφέρντα είναι όταν δημιουργούμε δικά μας objects.. Στο παρακάτω κώδικα κατασκευάζουμε το object με όνομα: human.. var human=new Object();.. human.. firstname= Γιώργος ;.. lastname= Επιτήδειος ;.. age=46;.. eyecolor= καστανά ;.. write( Ο + human.. firstname + είναι + human.. age + ετών.. Έχει + human.. eyecolor + μάτια );.. objectName.. propertyName είναι η σύνταξη για να αποκτήσουμε πρόσβαση σε ένα χαρακτηριστικό (property) του object.. Χρήση υπάρχοντος object.. var message= Είμαι και εγώ ένα αντικείμενο! ;.. var x=message.. write( Το μήνυμα έχει μήκος + x + χαρακτήρες );.. Χρήση μεθόδων για ένα αντικείμενο:.. toUpperCase();.. write( Το μήνυμα είναι: + x);.. Εδώ χρησιμοποιούμε τη μέθοδο toUpperCase για να μετατρέψουμε το περιεχόμενο σε κεφαλαία.. Boolean Object.. !DOCTYPE html html body script.. var b1=new Boolean(0);.. var b2=new Boolean(1);.. var b3=new Boolean( );.. var b4=new Boolean(null);.. var b5=new Boolean(NaN);.. var b6=new Boolean( false );.. write( 0 is boolean + b1 + br );.. write( 1 is boolean + b2 + br );.. write( An empty string is boolean + b3 + br );.. write( null is boolean + b4+ br );.. write( NaN is boolean + b5 + br );.. write( The string 'false' is boolean + b6 + br );.. Math Object.. Round (μόνο για ακέραιους).. !DOCTYPE html html head meta charset= utf-8 /head body.. p id= demo Click για στρογγυλοποίηση του 2,5 στον κοντινότερο ακέραιο.. button onclick= myFunction() Δοκιμή /button.. getElementById( demo ).. innerHTML=Math.. round(2.. 5);.. Random (δίνει τιμή από 0 έως 1).. p id= demo Click για έναν τυχαίο αριθμό.. random();.. Max (ο μεγαλύτερος από δύο ή περισσότερους αριθμούς).. p id= demo Click για τον μεγαλύτερο από δύο αριθμούς.. max(5,10);.. Min (ο μικρότερος από δύο ή περισσότερους αριθμούς).. p id= demo Click για τον μικρότερο από δύο αριθμούς.. min(5,10);.. Ajax.. AJAX = Asynchronous JavaScript and XML.. Μια απλή εφαρμογή:.. html head meta charset= utf-8 script.. function loadXMLDoc().. var xmlhttp;.. if (window.. XMLHttpRequest).. {// code for IE7+, Firefox, Chrome, Opera, Safari.. xmlhttp=new XMLHttpRequest();.. {// code for IE6, IE5.. xmlhttp=new ActiveXObject( Microsoft.. XMLHTTP );.. xmlhttp.. onreadystatechange=function().. if (xmlhttp.. readyState==4 xmlhttp.. status==200).. getElementById( myDiv ).. innerHTML=xmlhttp.. responseText;.. open( GET , ajaxtext.. txt ,true);.. send();.. div id= myDiv h2 Αλλαγή του κειμένου με AJAX /h2 /div.. button type= button onclick= loadXMLDoc() Άλλαξέ το /button.. Εδώ όταν ο χρήστης κάνει click στο κουμπί φορτώνεται το περιεχόμενο ενός αρχείου το οποίο στην προκειμένη περίπτωση ονομάζεται ajaxtext.. txt και βρίσκεται στον ίδιο φάκελο με τη σελίδα.. Το περιεχόμενο του αρχείου είναι:.. p Dokimastiko 1 /p.. p Δοκιμαστικό 2 /p.. Τι σημαίνει αυτός ο κώδικας:.. onclick= loadXMLDoc().. Όταν ο χρήστης κάνει click στο κουμπί θα κληθεί η συνάρτηση: loadXMLDoc χωρίς κάποια παράμετρο.. Για νακληθεί η σελίδα (αρχείο στην περίπτωσή μας) με το περιεχόμενο θα δημιουργηθεί το object xmlhttp με χρήση της XMLHttpRequest(), που είναι και αυτή ένα object, εκτός αν αυτή δεν είναι αναγνωρίσιμη από τον browser (IE5 και IE6,) οπότε θα κληθεί το ActiveXObject( Microsoft.. XMLHTTP ).. Ακολούθως στέλνουμε το request για το  ...   top = height*delta + 'px'.. duration: 1000,.. delta: makeEaseOut(quad),.. left = width*delta + px.. Animation χρώματος.. function highlight(elem, delta) {.. var from = [255,0,0], to = [255,255,255].. backgroundColor = 'rgb(' +.. max(Math.. min(parseInt((delta * (to[0] - from[0])) + from[0], 10), 255), 0) + ',' +.. min(parseInt((delta * (to[1] - from[1])) + from[1], 10), 255), 0) + ',' +.. min(parseInt((delta * (to[2] - from[2])) + from[2], 10), 255), 0) + ')'.. }).. /script style /style /head body.. div onclick= highlight(this, linear) style= font-size:150% Click για κίνηση /div.. Δοκιμάστε και το ίδιο με: makeEaseOut(bounce) αντί για linear.. Παράδειγμα με animation input.. Αλλάξτε το body σε:.. p input id= textExample size=200 style= border: 1px solid #BBB; color:#444 value= Η Εκκλησία της Αγγλίας ψήφισε εναντίον της χειροτονίας γυναικών στον επισκοπικό θρόνο, δίνοντας τέλος σε έναν διάλογο που είχε διχάσει το ποίμνιο επί 12 χρόνια.. p button onclick= animateText(document.. getElementById('textExample')) Γράψε! /button /p /body.. Αντικαταστήστε την function highlight με την:.. function animateText(textArea) {.. var text = textArea.. var to = text.. length, from = 0.. duration: 5000,.. delta: bounce,.. var result = (to-from) * delta + from.. textArea.. value = text.. substr(0, Math.. ceil(result)).. και δοκιμάστε το.. CSS Transitions.. Με το CCS 3 μπορούμε να ομαλοποιήσουμε τις αλλαγές στα CSS.. Στο παράδειγμα που ακολουθεί το χρώμα δεν θα αλλάξει αμέσω αλλά σε διάστημα 2 δευτερολέπτων.. Δυστυχώς η κλήση πρέπει να γίνεται με διαφορετικό τρόπο ανάλογα τον browser του χρήστη.. Αν λοιπόν για ένα γενικό:.. animated {.. transition-property: background-color;.. transition-duration: 2s;.. πρέπει να δηλωθεί όπως φαίνεται στο παράδειγμα:.. transition: background-color 2s;.. -webkit-transition: background-color 2s;.. -o-transition: background-color 2s;.. -moz-transition: 2s;.. div class= animated onclick= this.. backgroundColor='red'.. span style= font-size:150% Click για χρωματικό animation (δεν λειτουργεί σε IE 10, και FF 4) /span.. Λιγότερη δουλειά για τον Browser.. Το προηγούμενο παράδειγμα σχεδιάζει τη σελίδα από την αρχή μετά από κάθε κίνηση του div.. Αυτό όμως επιβαρύνει πολύ τον Browser και αν θέλουμε περίπλοκες κινήσεις ή πολλά αντικείμενα ο υπολογιστής του χρήστη δεν θα μπορέσει να ανταποκριθεί.. Ακόμη όμως και αν μπορέσει η κίνηση δεν θα είναι ομαλή.. Κάντε τα 20msec 2 στο προηγούμενο παράδειγμα και θα δείτε πόσο πιο κοφτή γίνεται η κίνηση.. Επίσης αν υπάρχουν πολλοί διαφορετικοί timers αυτό κάνει πολύ περίπλοκη τη διεργασία.. Καλύτερα όλα τα objects να συγχρονίζονται με τον ίδιο timer και να κινούνται ταυτόχρονα με ένα μόνο redraw από τον Browser.. Επίσης, όσο πιο εσωτερικό (nested) είναι το κινούμενο element τόσο περισσότερη δουλειά πρέπει να κάνει ο browser για να υπολογίσει τα γύρω του πριν φτάσει σε αυτό.. Προχωρημένο CANVAS.. Transformations.. Translate.. Με την translate() μπορούμε να μεταφέρουμε μέρη του Canvas από ένα σημείο σε ένα άλλο (αλλάζει η θέση του 0,0 σε ό,τι του πούμε).. Φυσικά κάτι τέτοιο μπορεί να γίνει και με το χέρι αλλά για ένα περίπλοκο γραφικό για παράδειγμα είναι ευκολότερο να του δώσουμε ένα όνομα και να το μεταφέρουμε όλο μαζί σε άλλο σημείο.. var rectWidth = 150;.. var rectHeight = 75;.. // translate context to center of canvas.. translate(canvas.. width / 2, canvas.. fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);.. Στον παραπάνω κώδικα φτιάξαμε απλώς ένα τετράγωνο.. Χωρίς το translate θα εμφανιζόταν στο 0,0.. (γιατί αρνητικές τιμές μεταφράζονται σε μηδέν) με αυτό στο canvas.. height / 2.. Εδώ μεταφράσαμε όλο το context οπότε μεταφέρθηκαν τα πάντα στη νέα θέση.. Στο επόμενο έχουμε μερικά τετράγωνα.. Αλλάζει θέση μόνο όποιο βρίσκεται μετά την translate.. fillRect(2, 2, rectWidth, rectHeight);.. fillRect(100, 100, rectWidth, rectHeight);.. Μεταφέρετε το 2ο τετράγωνο μετά την translate και θα πάψει να φαίνεται διότι πιάνει την ίδια θέση με το τρίτο.. Κάθε νέο translate δίνει τιμές που προστίθενται στις ήδη υπάρχουσες.. translate(50, 50);.. Scale.. Στο ίδιο παράδειγμα αμέσως μετά την translate προσθέστε τη γραμμή:.. scale(1, 0.. scale(scalewidth,scaleheight);.. Στο παράδειγμά μας κρατάμε την ίδια κλίμακα στο πλάτος και το μισό ύψος.. Στο ακόλουθο παράδειγμα έχουμε το ίδιο ορθογώνιο με άλλο scale.. strokeRect(5,5,25,15);.. scale(2,2);.. Παρατηρούμε πως τα δύο ορθογώνια δεν πέφτου το ένα πάνω στο άλλο διότι γίνονται scale και οι θέσεις τους!.. Ό,τι καινούριο κατασκευαστεί θα έχει πλέον το ίδιο scale.. Μετά τα άλλα ορθογώνια για να επιστρέψετε στο σωστό scale προσθέστε το:.. scale(0.. 5,0.. strokeRect(55,55,25,15);.. Βάση πλέον είναι το νέο scale οπότε πρέπει να πάμε στο μισό του.. Rotate.. rotate(angle);.. Όπου angle είναι τα radians της περιστροφής.. Τροποποιόντας το προηγούμενο παράδειγμα προσθέτουμε rotation (περιστροφή) με το:.. rotate(Math.. PI / 4);.. Αυτό θα περιστρέψει κατά 45 μοίρες το κουτί μας.. // rotate 45 degrees clockwise.. Βάλτε το κουτί:.. πάνω και κάτω από το rotate για να δείτε τη μεταβολή.. rotate(20*Math.. PI/180)΄= 20 μοίρες περιστροφή.. Χρησιμοποιήστε αρνητικές τιμές για περιστροφή αντίθετα από τους δείκτες του ρολογιού.. Transform -setTransform.. transform(a,b,c,d,e,f);.. a Scales the drawing horizontally.. b Skew (γύρε) the drawing horizontally.. c Skew (γύρε) the drawing vertically.. d Scales the drawing vertically.. e Moves the drawing horizontally.. f Moves the drawing vertically.. fillStyle= yellow ;.. fillRect(0,0,250,100).. transform(1,0.. 5,-0.. 5,1,30,10);.. fillRect(0,0,250,100);.. fillStyle= blue ;.. Η transform method εκτελείται σε σχέση με άλλες transformations που έκαναν οι rotate(), scale(), translate(), ή transform().. Για να δείτε τη διαφοροποίηση διαγράψτε το κόκκινο ορθογώνιο και θα δείτε πως το μπλε μπαίνει στη θέση του.. Αν δεν θέλουμε να δουλέψουμε με αναλογική διαφοροποίηση χρησιμοποιούμε την setTransform().. Αλλάζοντας το παράδειγμα σε:.. setTransform(1,0.. Πλέον το κόκκινο ορθογώνιο δεν φαίνεται γιατί επάνω του έχει μπει το μπλε αφού πλέον έχουν την ίδια θέση.. Η setTransform χρησιμοποιείται επίσης για να κάνω reset μια Transform και να σταματήσουμε τα transformations που αυτή παράγει:.. fillRect(-rectWidth / 2, rectHeight / -2, rectWidth, rectHeight);.. // Reset Transform.. // 1 0 0.. // 0 1 0.. // 0 0 1.. // apply custom transform.. setTransform(1, 0, 0, 1, 0, 0);.. fillRect(0, 0, rectWidth, rectHeight);.. Εφέ παραμόρφωσης με transform:.. // shear matrix:.. // 1 sx 0.. // sy 1 0.. var sx = 0.. 75;.. //.. 75 horizontal shear.. var sy = 0;.. // no vertical shear.. transform(1, sy, sx, 1, 0, 0);.. Εδώ έχουμε οριζόντια κλήση με σταθερή την κλίμακα (οριζόντια και κάθετα) και χωρίς μετακίνηση.. Βάλτε και var sy =.. 75; για να δείτε κάθετη κλίση.. Επίσης βάλτε 0 οριζόντια και 0.. 75 κάθετη.. Κατοπτρικό εφέ.. Με το context.. scale(1, 1) επιτυγχάνουμε οριζόντιο εφέ αντιστροφής.. scale(1, -1) κάθετης αντιστροφής.. Το context.. scale(1, 1) είναι το φυσιολογικό.. // flip context horizontally.. scale(-1, 1);.. fillText('Hello World!', 0, 0);.. Save και Restore States.. Αν θέλω η εφαρμογή μου να θυμάμαι κάποιες ρυθμίσεις και να τις ανακτήσει μετά χρησιμοποιώ τα Save και Restore.. Απλό παράδειγμα με ένα save και ένα restore:.. save();.. // Κάνω save την translate που ακολουθεί.. // Ζωγραφίζω (ισχύει η παραπάνω translate).. restore();.. /* Κάνω restore την κατάσταση πριν το save (δηλαδή πριν την translate) και ζωγραφίζω κάτι άλλο.. Τώρα έχει εφαρμογή ό,τι ισχύε πριν το save.. */.. Αν έχω περισσότερα από ένα save το restore γίνεται αντίστροφα (πρώτα καλείται το τελευταίο, μετά το προτελευταίο κ.. μέχρι να φτάσω στο πρώτο save που καλείται τελευταίο (αφού έχουν κληθεί όλα τα άλλα).. Παράδειγμα με πολλά save και restore:.. // save state 1.. // save state 2.. // save state 3.. scale(2, 2);.. /* Το μπλε ορθογώνιο έχει όλες τις ιδιότητες (κέντρο, rotated και διπλάσιο) */.. // restore state 3.. /* Το κόκκινο ορθογώνιο έχει τις 2 αρχικές ιδιότητες (κέντρο και rotated αλλά όχι διπλάσιο) */.. // restore state 2.. /* Το κίτρινο ορθογώνιο έχει την αρχική ιδιότητα (κέντρο αλλά δεν είναι rotated ούτε διπλάσιο) */.. // restore state 1.. /* Το πράσινο ορθογώνιο δεν έχει καμία από τις αρχικές ιδιότητες */.. Πολλαπλές ρυθμίσεις στο ίδιο save:.. /* Αποθηκεύτηκαν και οι 3 ρυθμίσεις στο ίδιο save οπότε με το restore φεύγουν και οι τρεις.. /* Το κόκκινο ορθογώνιο έχει χάσει όλες τις ιδιότητες */.. Δημιουργία οβάλ σχήματος.. Για να φτιάξω ένα οβάλ σχήμα χρησιμοποιώ την scale για να κάνω stretch οριζόντια έναν κύκλο.. Στη συνέχεια κάνω restore τις αρχικές ρυθμίσεις για την εμφάνιση.. Το παράδειγμα έχει δύο canvas, ένα με restore και ένα χωρίς.. Βλέπουμε πως η διαφορά είναι στο lineWidthόπου κρατάει και αυτό το scaling και δεν έχει το ίδιο πλάτος σε όλα τα σημεία γύρω από το οβάλ.. Κάντε commend το lineWidth και στα δύο canvas και θα δείτε πως τα σχήματα είναι πλέον ίδια.. #myCanvas1 {.. #myCanvas2 {.. canvas id= myCanvas1 width= 578 height= 200 /canvas.. getElementById('myCanvas1');.. var centerX = 0;.. var centerY = 0;.. var radius = 50;.. // translate context.. // scale context horizontally.. scale(2, 1);.. // draw circle which will be stretched into an oval.. // apply styling.. fillStyle = '#8ED6FF';.. canvas id= myCanvas2 width= 578 height= 200 /canvas.. getElementById('myCanvas2');.. Δημιουργία Σκιών.. Το χρώμα της σκιάς:.. shadowColor = 'blue';.. Μαζί με τη shadowColor χρησιμοποιούμε και τη shadowBlur όπου δίνουμε το βαθμό θολότητας (default το 0).. Όσο πιο μεγάλο είναι το νούμερο τόσο μεγαλύτερο το gradient της σκιάς.. shadowBlur = 20;.. Δοκιμάστε με context.. shadowBlur = 200 για να δείτε τη διαφορά.. rect(188, 40, 200, 100);.. shadowColor = '#999';.. shadowOffsetX = 15;.. shadowOffsetY = 15;.. Χωρίς τα:.. Η σκιά θα περιτριγυρίζει το σχήμα.. Η shadowOffsetX θα μετατοπίσει τη σκιά Χ pixels προς τα δεξιά (αρνητικά νούμερα για αριστερά).. Ομοίως προς τα κάτω θα κάνει ή shadowOffsetY (αρνητικό για επάνω).. Διαφάνεια (Global Alpha).. // draw blue rectangle.. rect(200, 20, 100, 100);.. // draw transparent red circle.. globalAlpha = 0.. 5;.. arc(320, 120, 60, 0, 2 * Math.. Η globalAlpha παίρνει τιμές από 0 (διάφανο) έως 1 (πλήρως αδιαφανές).. Δοκιμάστε να ζωγραφίσετε άλλο ένα τετράγωνο (στον κώδικα κάτω από τον κύκλο) με τα χαρακτηριστηκά:.. rect(300, 20, 100, 100);.. Αν δεν δηλώσουμε νέο globalAlpha θα ισχύει η διαφάνεια που ορίστηκε παραπάνω.. Clip().. Με το clipping μπορούμε να απομονώσουμε μια περιοχή.. Ό,τι ενέργειες εκτελεστούν μετά την clip() αφορούν μόνο τη δική της περιοχή.. Το υπόλοιπο Canvas είναι απροσπέλαστο μέχρι να κάνουμε restore.. Απλό παράδειγμα:.. span Without clip(): /span.. // Draw a rectangle.. rect(50,20,200,120);.. // Draw red rectangle.. fillRect(0,0,150,100);.. span With clip(): /span.. canvas id= myCanvas2 width= 300 height= 150 style= border:1px solid #d3d3d3;.. getElementById( myCanvas2 );.. // Clip a rectangular area.. clip();.. // Draw red rectangle after clip().. Πιο περίπλοκο παράδειγμα:.. var offset = 50;.. /* Πρώτα κάνουμε save() ώστε να μπορέσουμε μετά να επιστρέψουμε στην πρότερη κατάσταση (πριν το clip) */.. arc(x, y, radius, 0, 2 * Math.. PI, false); // Αυτή είναι η περιοχή του clip.. /* Ζωγραφίζουμε μπλε κύκλο στην clipping region.. Το κέντρο βρίσκεται εκτός οπότε ο κύκλος δεν εμφανίζεται ολόκληρος.. Μόνο το μέρος του που βρίσκεται μέσα στο clip.. arc(x - offset, y - offset, radius, 0, 2 * Math.. /* Ζωγραφίζουμε κίτρινο κύκλο στην clipping region.. Το κέντρο βρίσκεται εντός αλλά ο κύκλος δεν χωράει οπότε δεν εμφανίζεται ολόκληρος.. arc(x + offset, y, radius, 0, 2 * Math.. /* Ζωγραφίζουμε κόκκινο κύκλο στην clipping region.. Ισχύει ό,τι και στα υπόλοιπα */.. arc(x, y + offset, radius, 0, 2 * Math.. Το restore() μας επιστρέφει στην πριν το clip κατάσταση.. lineWidth = 10;.. strokeStyle = 'green';.. Για να καταλάβετε καλύτερα τι συμβαίνει κάντε commend τους δύο κύκλους κάθε φορά και δείτε τι φαίνεται από τον τρίτο.. globalCompositeOperation.. Σύνταξη: globalCompositeOperation= source-in ;.. Με αυτή τη μέθοδο ορίζουμε πως θα εμφανιστεί κάτι σε σχέση με κάτι άλλο που υπάρχει ήδη στο σημείο προορισμού του:.. Οι διαθέσιμες ιδιότητες είναι:.. Value Description.. source-over Default.. Displays the source image over the destination image.. source-atop Displays the source image on top of the destination image.. The part of the source image that is outside the destination image is not shown.. source-in Displays the source image in to the destination image.. Only the part of the source image that is INSIDE the destination image is shown, and the destination image is transparent.. source-out Displays the source image out of the destination image.. Only the part of the source image that is OUTSIDE the destination image is shown, and the destination image is transparent.. destination-over Displays the destination image over the source image.. destination-atop Displays the destination image on top of the source image.. The part of the destination image that is outside the source image is not shown.. destination-in Displays the destination image in to the source image.. Only the part of the destination image that is INSIDE the source image is shown, and the source image is transparent.. destination-out Displays the destination image out of the source image.. Only the part of the destination image that is OUTSIDE the source image is shown, and the source image is transparent.. lighter Displays the source image + the destination image.. copy Displays the source image.. The destination image is ignored.. xor The source image is combined by using an exclusive OR with the destination image.. Απλό παράδειγμα με source-over και destination-over:.. fillRect(20,20,75,50);.. fillStyle= blue ;.. globalCompositeOperation= source-over ;.. fillRect(50,50,75,50);.. fillRect(150,20,75,50);.. globalCompositeOperation= destination-over ;.. fillRect(180,50,75,50);.. destination-atop source-atop.. Αλλάξτε το destination-over σε destination-atop για να δείτε πως τα δύο τετράγωνα συνδυάζονται σε ένα.. Στο ίδιο παράδειγμα αλλάξτε το source-over σε source atop και κρατήστε το δεύτερο μέρος ως destination-atop.. Θα δείτε πως το παράδειγμα δεν λειτουργεί.. Αν όμως διαγράψετε το δύο τελευταία κουτιά λειτουργεί:.. globalCompositeOperation= source-atop ;.. Ο λόγος είναι πως μπορούμε να έχουμε μόνο ένα globalCompositeOperation σε κάθε Canvas.. Βάλαμε δύο στο αρχικό παράδειγμα επειδή το πρώτο ήταν source-over που είναι η default λειτουργία.. Source-in.. fillStyle='blue';.. fillRect(10,10,50,50);.. globalCompositeOperation='source-in';.. fillStyle='red';.. arc(50,50,30,0,2*Math.. Source-out.. Ίδιο με το παραπάνω αλλά:.. globalCompositeOperation='source-out';.. Destination-in.. globalCompositeOperation='destination-in';.. Destination-out.. globalCompositeOperation='destination-out';.. Lighter.. globalCompositeOperation='lighter';.. Copy.. globalCompositeOperation='copy';.. Xor.. globalCompositeOperation='xor';.. Hidden Canvas.. Η globalCompositeOperation επιτρέπει τη χρήση της μόνο μια φορά σε κάθε Canvas.. Για να το παρακάμψουμε αυτό θα χρησιμοποιήσουμε ένα κρυφό Canvas.. canvas id= myCanvas width= 578 height= 430 /canvas.. canvas id= tempCanvas width= 578 height= 430 style= display:none; /canvas.. var tempCanvas = document.. getElementById('tempCanvas');.. var tempContext = tempCanvas.. var squareWidth = 55;.. var circleRadius = 35;.. var shapeOffset = 50; // Η απόσταση του δεύτερου σχήματος (του κύκλου) από το πρώτο.. var operationOffset = 150;.. // Φτιάχνουμε μια array με όλες τις ρυθμίσεις της globalCompositeOperation.. var arr = [];.. arr.. push('source-atop');.. push('source-in');.. push('source-out');.. push('source-over');.. push('destination-atop');.. push('destination-in');.. push('destination-out');.. push('destination-over');.. push('lighter');.. push('darker');.. push('xor');.. push('copy');.. // Βάζουμε 10px για padding.. translate(10, 10);.. // Ζωγραφίζουμε μια μια της διαφορετικές περιπτώσεις που έχουμε βάλει στην Array.. for(var n = 0; n arr.. var thisOperation = arr[n];.. tempContext.. // Αδειάζω το temp context από ό,τι περιείχε.. clearRect(0, 0, canvas.. // Ζωγραφίζω το ορθογώνιο (destination).. rect(0, 0, squareWidth, squareWidth); // Ζωγραφίζω πάνω αριστερά.. // Ορίζω το global composite.. globalCompositeOperation = thisOperation;.. // Ζωγραφίζω τον κύκλο (source).. arc(shapeOffset, shapeOffset, circleRadius, 0, 2 * Math.. /* Αφού ζωγραφίσω επαναφέρω το παλιό context (πριν γίνει η ζωγραφική) ώστε να έχουμε την πρότερη κατάσταση.. // Βάζω το κείμενο.. font = '10pt Verdana';.. fillStyle = 'black';.. fillText(thisOperation, 0, squareWidth + 45);.. // translate visible context so operation is drawn in the right place.. /* Τώρα ασχολούμαι με το visible context.. Κάθε κρυφό Canvas πρέπει να εμφανιστεί.. Ουσιαστικά το εμφανίζω κάθε φορά ολόκληρο αλλά το επόμενο που θα έρθει πατάει πάνω στο προηγούμενο και κρύβει ένα μέρος του.. Φυσικά φροντίζω κάθα φορά να το πάω πιο δεξιά ή και πιο κάτω ώστε να μην κρυφτούν τα προηγούμενα που θέλω.. if(n 0) {.. if(n % 4 === 0) {.. translate(operationOffset * -3, operationOffset);.. /* Αφού βάζω 4 σχήματα (άρα 4 temp canvas) σε κάθε γραμμή αν το n διαιρείται ακριβώς με το 4 πηγαίνει 3 θέσεις αριστερά στο οριζόντιο και τα καθορισμένα pixels προς τα κάτω στο κάθετο.. translate(operationOffset, 0);.. /* Αν δεν χρειάζεται να αλλάξω γραμμή απλώς βάζω με το translate λίγο πιο δεξιά το κρυφό canvas*/.. /* Στην πρώτη τοποθέτηση δεν χρειάζεται να κινηθεί κάτι.. Το κρυφό Canvas μπαίνει πάνω αριστερά στο ορατό.. // Τοποθετώ το tempCanvas στο visible canvas.. drawImage(tempCanvas, 0, 0);.. Για να φανεί καλύτερα τι πραγματικά συμβαίνει με το κρυφό canvas μπορείτε μετάξυ του ορθογωνίου και του κύκλου να προσθέσετε:.. moveTo(10,10);.. lineTo(squareWidth * '3',10);.. Έτσι είναι ορατό το υπόλοιπο Canvas όσο αυτό είναι εφικτό (σε κάποια το καλύπτει το globalCompositeOperation.. Λήψη όλων των δεδομένων εμφάνισης ενός Canvas.. Αρχικά ας φτιάξουμε ένα Canvas με μια εικόνα:.. Θα πάρουμε και θα διαβάσουμε ένα από τα pixels της εικόνας με την getImageData.. Η σύνταξη είναι: context.. getImageData(x,y,width,height);.. Στο x,y έχουμε το πάνω αριστερό τμήμα και στο width,height το πλάτος και ύψος της περιοχής που θα διαβαστεί.. canvas id= myCanvas width= 300 height= 150 style= border:1px solid #d3d3d3; /canvas.. var context=c.. var imgData=context.. getImageData(30,30,50,50);.. var red=imgData.. data[0];.. var green=imgData.. data[1];.. var blue=imgData.. data[2];.. var alpha=imgData.. data[3];.. var foundData = red + + green + + blue + + alpha;.. fillText(foundData , 60, 60);.. // alert(foundData);.. Στη συνέχεια θα διαβάσουμε ένα ένα όλα τα δεδομένα:.. var imageData=context.. var data = imageData.. data;.. var foundData = ;.. // Τώρα διαβάζουμε ένα ένα τα δεδομένα για όλα τα pixels.. for(var i = 0, n = data.. length; i n; i += 4) {.. var red = data[i];.. var green = data[i + 1];.. var blue = data[i + 2];.. var alpha = data[i + 3];.. if (i 8) // Κρατάμε πληροφορίες μόνο τα δύο πρώτα pixels.. foundData += red + + green + + blue + + alpha + | ;.. font = '8pt Calibri';.. Μπορούμε επίσης να διαβάσουμε τα pixels με βάση τις συντεταγμένες τους:.. Πρώτα κοιτάμε μια μια τις γραμμές.. for(var y = 0; y sourceHeight; y++) {.. Στη συνέχεια κοιτάμε μια μια τις στήλες.. for(var x = 0; x sourceWidth; x++) {.. var red = data[((sourceWidth * y) + x) * 4];.. var green = data[((sourceWidth * y) + x) * 4 + 1];.. var blue = data[((sourceWidth * y) + x) * 4 + 2];.. var alpha = data[((sourceWidth * y) + x) * 4 + 3];.. Ας φτιάξουμε τώρα ένα Canvas με μια εικόνα:.. html head style.. canvas id= myCanvas width= 300 height= 200 /canvas.. function drawImage(imageObj) {.. var imageX = 10;.. var imageY = 10;.. var imageWidth = imageObj.. var imageHeight = imageObj.. height;.. drawImage(imageObj, imageX, imageY);.. drawImage(this);.. Image Editing on the Fly.. Θα πάρουμε τώρα και θα διαβάσουμε ένα ένα τα pixels της εικόνας με την getImageData.. Τα δεδομένα για τα pixels θα μπουν μέσα στην Array data.. Στη συνέχεια θα αλλάξουμε όλα τα χρώματα με τα αντίθετά τους.. Η getImageData θα λειτουργήσει μόνο αν η σελίδα μας βρίσκεται στο ίδιο domain με αυτό που μας έδωσε την εικόνα.. canvas id= myCanvas width= 578 height= 400 /canvas.. var x = 69;.. var y = 50;.. drawImage(imageObj, x, y);.. var imageData = context.. getImageData(x, y, imageObj.. width, imageObj.. /* Με την for κάνουμε αντιστροφή όλων των χρωμάτων */.. for(var i = 0; i data.. length; i += 4) {.. // red.. data[i] = 255 - data[i];.. // green.. data[i + 1] = 255 - data[i + 1];.. // blue.. data[i + 2] = 255 - data[i + 2];.. // Κάνουμε overwrite την αρχική εικόνα.. putImageData(imageData, x, y);.. com/tests/eeei1.. Αν στη for προσθέσουμε και data[i + 3] = 100 θα αλλάξουμε και το opacity (τη διαφάνεια).. Για να κοκκινίσουμε την εικόνα: data[i] = 255 - 100;.. Για να κάνουμε Grayscale την εικόνα αλλάζουμε τη for ως ακολούθως:.. var brightness = 0.. 34 * data[i] + 0.. 5 * data[i + 1] + 0.. 16 * data[i + 2];.. data[i] = brightness;.. data[i + 1] = brightness;.. data[i + 2] = brightness;.. Αποφασίζω κάθε χρώμα πόσο θα συμμετέχει στη συνολική φωτεινότητα και δίνω την ίδια τιμή σε όλα.. Δημιουργία image από Canvas.. Για να επιτύχουμε αυτό το εφέ θα χρησιμοποιήσουμε την toDataURL.. Εξ ορισμού κατασκευάζεται png αλλά μπορούμε να φτιάξουμε και jpg εικόνα και από 0 έως 1 ορίζουμε την ποιότητά της.. 1 = η καλύτερη ποιότητα.. // get png data url.. var pngUrl = canvas.. toDataURL();.. // get jpeg data url.. var jpegUrl = canvas.. toDataURL('image/jpeg');.. // get low quality jpeg data url.. var lowQualityJpegUrl = canvas.. toDataURL('image/jpeg', 0.. Δείτε ένα παράδειγμα χωρίς jQuery που ανοίγει κατευθείαν νέο παράθυρο με jpeg image.. // draw cloud.. // save canvas image as data url (png format by default).. var dataURL = canvas.. open(dataURL , toDataURL() image , width=600, height=200 );.. Σε αυτό το παράδειγμα χρησιμοποιούμε και jQuery για το άνοιγμα στα textarea (δεν είναι απαραίτητο στην HTML 5).. src= http://ajax.. 7.. 0/jquery.. js.. drawEx1();.. $( #buttonTextArea ).. getElementById( ex1 );.. var dataUrl = canvas.. getElementById( textArea ).. value = dataUrl;.. $( #buttonWindow ).. open(dataUrl, toDataURL() image , width=600, height=200 );.. canvas id= ex1 width= 500 height= 100 style= border: 1px solid #cccccc;.. HTML5 Canvas not supported.. function drawEx1() {.. font = 36px Verdana ;.. fillStyle = #000000 ;.. fillText( HTML5 Canvas Text , 50, 50);.. font = normal 36px Arial ;.. strokeStyle = #000000 ;.. strokeText( HTML5 Canvas Text , 50, 90);.. br/ br/.. input id= buttonTextArea type= button value= Show in textarea /.. input id= buttonWindow type= button value= Show in new window /.. textarea id= textArea cols= 60 rows= 10 /body /html.. Χρήση ήδη κατασκευασμένου data2URL.. Αν έχουμε ήδη δημιουργήσει το image μπορούμε να το φορτώσουμε με ένα AJAX call.. function loadCanvas(dataURL) {.. // load image from data url.. drawImage(this, 0, 0);.. src = dataURL;.. // make ajax call to get image data url.. var request = new XMLHttpRequest();.. request.. open('GET', 'http://www.. com/tests/dataURL.. txt', true);.. onreadystatechange = function() {.. // Makes sure the document is ready to parse.. if(request.. readyState == 4) {.. // Makes sure it's found the file.. status == 200) {.. loadCanvas(request.. responseText);.. send(null);.. Canvas Background.. Μπορείτε να βάλετε φόντο στο canvas σας μέσω CSS και HTML.. Δεν θα εμφανιστεί όμως από την toDataURL.. Η σύνταξη είναι γνωστή:.. canvas { background:url(http://www.. jpg) }.. Canvas Animation.. Reset Canvas.. Υπάρχουν διάφοροι τρόποι να καθαρίσουμε το Canvas ώστε να αρχίσουμε από την αρχή (π.. αλλαγή του width ή καταστροφή και επαναδημιουργία) αλλά έχουν προβλήματα με διάφορους browsers οπότε η καλύτερη λύση είναι το clearRect.. #buttons {.. top: 5px;.. left: 10px;.. #buttons input {.. padding: 10px;.. margin-top: 5px;.. canvas {.. input type= button id= clear value= Clear.. // begin custom shape.. // complete custom shape.. // bind event handler to clear button.. getElementById('clear').. Animation Frames με την window.. setTimeout.. Για να λάβουμε ένα μήνυμα με καθυστέρηση μετά το click δείτε το παράδειγμα:.. html head meta charset= utf-8 /head.. p Κάντε click στο button και θα περιμένετε 3 δευτερόλεπτα για το alert Γεια Χαρά.. button onclick= myFunction() Εδώ /button.. setTimeout(function(){alert( Γεια Χαρά )},3000);.. setTimeout(code,millisec,lang).. Το code είναι function ή expression για evaluation.. Millisec η καθυστέρηση σε χιλιοστά του δευτερολέπτου.. Προαιρετικά δηλώνουμε και τη scripting language: (JScript | VBScript | JavaScript).. requestAnimFrame.. Για να επιτύχουμε κίνηση χρησιμοποιούμε την requestAnimFrame που επιτρέπει στον browser να βρει το ιδανικό FPS (frame per second) για το animation.. Για κάθε animation frame, μπορούμε να ενημερώσουμε (update) τα elements του canvas, να αδειάσουμε (clear) το canvas, να κάνουμε redraw το canvas και μετά να ζητήσουμε ένα άλλο animation frame.. Το ακόλουθο παράδειγμα περιέχει τα απολύτως απαραίτητα για την κίνηση (και δεν κάνει τίποτε).. requestAnimFrame = (function(callback) {.. return window.. requestAnimationFrame || window.. webkitRequestAnimationFrame || window.. mozRequestAnimationFrame || window.. oRequestAnimationFrame || window.. msRequestAnimationFrame ||.. function(callback) {.. setTimeout(callback, 1000 / 60);.. })();.. function animate() {.. // Κοιτάμε σε ποια χρονική στιγμή βρίσκεται η κίνηση.. // Διαγράφω το παλιό frame ώστε να φτιάξω καινούριο.. // Σχεδιάζω κάτι.. // Καλώ νέο frame.. requestAnimFrame(function() {.. animate();.. Η requestAnimFrame είναι ένα shim (ονομάζεται και shiv), δηλαδή ένα κομμάτι κώδικα ή μια μικρή βιβλιοθήκη που εκτελεί μια ενέργεια καλύπτοντας ταυτόχρονα διαφορετικές πλατφόρμες.. Για να το κάνει αυτό μεταφράζει την πληροφορία με τον τρόπο που χρειάζεται κάθε διαφορετικό API το οποίο θα κληθεί να υλοποιήσει τον κώδικά μας.. Στο παράδειγμά μας καλούμε το requestAnimationFrame API (το ξεκίνησε ο Mozilla και το υποστηρίζει και η Google) ή αν δεν είναι διαθέσιμο καλούμε το WebKit (είναι ένα layout engine software σχεδιασμένο ώστε να επιτρέπει σε web browsers να κάνουμε render web σελίδες και χρησιμοποιείται από Safari και Chrome).. Αν δεν είναι ούτε αυτό διαθέσιμο καλεί άλλες πιθανές υλοποιήσεις.. Γραμμική Κίνηση.. /* Το myRectangle object παίρνει τις αρχικές τιμές του.. var myRectangle = {.. x: 0,.. y: 75,.. width: 100,.. height: 50,.. borderWidth: 5.. /* Ζωγραφίζουμε το ορθογώνιο.. drawRectangle(myRectangle, context);.. /* Αναμονή ενός δευτερολέπτου πριν αρχίσει το animation */.. setTimeout(function() {.. var startTime = (new Date()).. animate(myRectangle, canvas, context, startTime);.. }, 1000);.. /* startTime = τα milliseconds από την 1/1/1970.. Δια 1000 θα μας δώσει τα seconds */.. setTimeout(callback, 1000 / 60);.. /* Εμείς καλούμε το παράθυρο κάθε 1 εξηκοστό του δευτερολέπτου.. Αυτό όμως δεν έχει σημασία.. Ο browser θα πάει όσο πιο γρήγορα μπορεί.. /* Με μια function ζωγραφίζουμε το ορθογώνιό μας.. function drawRectangle(myRectangle, context) {.. rect(myRectangle.. x, myRectangle.. y, myRectangle.. width, myRectangle.. /* Το myRectangle είναι object και έχει properties.. lineWidth = myRectangle.. borderWidth;.. function animate(myRectangle, canvas, context, startTime) {.. /* Βρίσκω πόσος χρόνος πέρασε από την αρχή της κίνησης.. var time = (new Date()).. getTime() - startTime;.. /* Ορίζω την απόσταση κίνησης σε pixels*/.. var linearSpeed = 100;.. /* Η νέα θέση βρίσκεται από το pixels * χρόνος που πέρασε ανά δευτερόλεπτο */.. var newX = linearSpeed * time / 1000;.. /* Όσο το ορθογώνιο είναι εντός των ορίων του canvas θα κινείται.. if(newX canvas.. width - myRectangle.. borderWidth / 2) {.. myRectangle.. x = newX;.. /* Διαγράφω το παλιό ορθογώνιο (για την ακρίβεια διαγράφω όλο το canvas και μαζί του και το παλιό ορθογώνιο).. /* Ζωγραφίζω το ορθογώνιο στη νέα θέση.. /* Ζητάω νέο frame για να ξαναρχίσει από την αρχή η function */.. Ένα bug στο πρόγραμμα.. Η κίνηση ξεκινάει από τη θέση 0.. Όταν ξεκινάμε.. getTime() – startTime = 0.. δηλαδή:.. newX ΄= 0 * 100 / 1000 = 0.. Οπότε αν το αρχικό x μπει σε άλλο νούμερο (π.. 100) θα έχουμε το ορθογώνιο αρχικά σε άλλη θέση και μετά θα διακτινιστεί στο 0 για να αρχίσει η κίνηση.. Για να το κάνω να κινηθεί από όποια θέση θέλω θα χρειαστώ τα ακόλουθα:.. x: 100,.. borderWidth: 5,.. originalX : 100.. var newX = linearSpeed * time / 1000 + myRectangle.. originalX;.. Για να κινήσω και τον άξονα y έχω:.. originalX : 100,.. originalY : 75,.. y = newX / (linearSpeed * 2) + myRectangle.. originalY;.. originalY = myRectangle.. y;.. Παράδειγμα με παρακολούθηση της τιμής του x του κουτιού.. // update.. // pixels / second.. if (time % 40 == 0) {.. font = 'italic 10pt Calibri';.. fillStyle = 'black';.. fillText(newX, textX, 20);.. textX = textX + 30;.. // Άλλαξε το clear για να μην σβήνει την πάνω σειρά όπου έχω τη θέση του x του κουτιού.. clearRect(0, 30, canvas.. // request new frame.. var textX = 0; // Η θέση του αριθμού που μας δίνει το x του κουτιού.. // wait one second before starting animation.. Οριζόντια κίνηση rotated κουτιού.. Επειδή με το rotation το canvas γέρνει χρειαζόμαστε μια διόρθωση στο y ώστε να κινηθεί ευθύγραμμα το ορθογώνιο.. Δοκιμάστε χωρίς αυτήν για να δείτε τη διαφορά.. y -= 0.. 6;.. /* Επειδή το Canvas έχει κλίση */.. textX = textX + 40;.. PI / 10);.. Κίνηση rotated και μη rotaged rectangle ταυτόχρονα.. myOtherRectangle.. drawRectangle(myOtherRectangle, context);.. var myOtherRectangle = {.. x: 10,.. y: 40,.. width: 10,.. height: 10,.. borderWidth: 1.. Κάθετη κίνηση με επιτάχυνση.. Για την επιτάχυνση θα χρησιμοποιήσουμε quadratic curve όπως κάναμε σε παλαιότερο μάθημε με τη function quad σε καθαρή javascript.. // pixels / second^2.. var gravity = 200;.. y = 0.. 5 * gravity * Math.. pow(time / 1000, 2);.. if(myRectangle.. y canvas.. height - myRectangle.. y = canvas.. borderWidth / 2;.. // clear.. // draw.. x: 239,.. y: 0,.. // wait one second before dropping rectangle.. }, 2000);.. Αρμονική ταλάντωση (Oscillation).. var amplitude = 150;.. // in ms.. var period = 2000;.. width / 2 - myRectangle.. var nextX = amplitude * Math.. sin(time * 2 * Math.. PI / period) + centerX;.. x = nextX;.. x: 250,.. y: 70,.. Έναρξη – Διακοπή animation.. Για να έχουμε animation ζητούμε διαρκώς νέο frame.. Για να τη διακόψουμε, απλώς σταματάμε να ζητάμε νέο frame.. Στο παράδειγμα που ακολουθεί ακούμε το ποντίκι (όταν κάνει click μέσα στο χώρο του canvas) και κάνουμε το αντίθετο απ’ ό,τι προηγουμένως:.. function drawRect(myRectangle, context) {.. function animate(lastTime, myRectangle, runAnimation, canvas, context) {.. if(runAnimation.. value) {.. var timeDiff = time - lastTime;.. var linearDistEachFrame = linearSpeed * timeDiff / 1000;.. var currentX = myRectangle.. x;.. if(currentX canvas.. var newX = currentX + linearDistEachFrame;.. drawRect(myRectangle, context);.. animate(time, myRectangle, runAnimation, canvas, context);.. Δημιουργούμε ένα runAnimation boolean obect και με βάση αυτό θα αλλάζει η συμπεριφορά της animate.. var runAnimation = {.. value: false.. /* Προσθέτουμε ένα click listener στο canvas */.. getElementById('myCanvas').. /* Αλλάζουεμ την κατάσταση (flip flag) */.. runAnimation.. value = !runAnimation.. var date = new Date();.. var time = date.. Εύρεση των συντεταγμένων του δρομέα (από το ποντίκι).. Για να βρούμε τη θέση του ποντικού θα χρησιμοποιήσουμε την getMousePos(), Για να βρούμε τη θέση του Canvas μέσα στη σελίδα θα χρησιμοποιήσουμε την getBoundingClientRect() method του window object.. function writeMessage(canvas, message) {.. font = '18pt Calibri';.. fillText(message, 10, 25);.. function getMousePos(canvas, evt) {.. var rect = canvas.. getBoundingClientRect();.. return {.. x: evt.. clientX - rect.. left,.. y: evt.. clientY - rect.. top.. /* Διορθώνω τη θέση με τα πάνω και αριστερά offsets (αποστάσεις από το παράθυρο) του canvas.. /* Η function δημιουργεί το object evt και το δίνει για περαιρέρω επεξεργασία.. canvas.. addEventListener('mousemove', function(evt) {.. var mousePos = getMousePos(canvas, evt);.. var message = 'Mouse position: ' + mousePos.. x + ',' + mousePos.. writeMessage(canvas, message);.. Όπως είναι αυτή τη στιγμή το canvas αρχίζει αμέσως στη σελίδα οπότε το 0,0 του canvas είναι πρακτικά και το 0,0 της σελίδας (στην πραγματικότητα υπάρχουν margins αλλά είναι πολύ μικρά.. Προσθέστε ένα p με κάποιο κείμενο πριν το canvas για να το κατεβάσετε πιο κάτω και να δείτε πως η θέση 0,0 υπάρχει ακόμη στο πάνω αριστερά σημείο του canvas παρότι κατέβηκε πιο χαμηλά.. Δημιουργία ακανόνιστης γραμμής.. head meta http-equiv=Content-Type content= text/html; charset=utf-8 title Ακανόνιστη Γραμμή /title /head /body.. genericFrontLine (100,0,150,canvas.. height,5, blue ,5,5);.. function genericFrontLine (lineStartX,lineStartY,lineEndX,lineEndY,lineParts,frontLineColor,frontLineWidth,curveIntensity) {.. /* Creates a ragged front line with bezier sorter lines.. Params:.. Start - End line positions and in how many smaller bezier lines the script will.. divide the front line.. The more the lines the larger number of curves we will get.. curveIntensity = How stiff the curves will be (higher number, smoother curves.. WORKS ON THE Y AXIS.. DRAWS FROM TOP TO BOTTOM.. var perPartY = Math.. ceil((lineEndY - lineStartY) / lineParts);.. var perPartX = Math.. ceil((lineEndX - lineStartX) / lineParts);.. /* Move per line to some direction.. var stepsY = Math.. ceil(perPartY / curveIntensity);.. var stepsX = stepsY;.. /* Steps for bezier control points.. var allPosX = new Array();.. var allPosY = new Array();.. var currentEndX;.. var currentEndY;.. /* The end positions of every part of the front line are kept outside to loop to be used again in the next iteration.. for (var i=0; i lineParts; i++) {.. /* This for is used to find the positions of all X and Ys of all the lines*/.. if (i == 0) {.. /* First Line */.. var currentStartX = lineStartX;.. var currentStartY = lineStartY;.. currentEndX = lineStartX + perPartX;.. currentEndY = lineStartY + perPartY;.. allPosX.. push(currentEndX);.. allPosY.. push(currentEndY);.. else if (i == (lineParts -1)) {.. /* Last Line */.. var currentStartX = currentEndX;.. var currentStartY = currentEndY;.. currentEndX = lineEndX;.. currentEndY = lineEndY;.. /* Lines in between.. currentEndX = currentEndX + perPartX;.. currentEndY = currentEndY + perPartY;.. /*-------------------------------------------------------*/.. moveTo(lineStartX, lineStartY);.. /* This for is used change the positions of all X and Ys of all the lines according to troop movements.. It also draws the front line.. var currentEndX = allPosX[i];.. var currentEndY = allPosY[i];.. var controlX1 = currentStartX + stepsX;.. var controlY1 = currentStartY + stepsY;.. var controlX2 = currentEndX - stepsX;.. var controlY2 = currentEndY - stepsY;.. bezierCurveTo(controlX1, controlY1, controlX2, controlY2, currentEndX, currentEndY);.. var line = currentEndX + - + currentEndY;.. font= 10px Geneva,Arial ;.. fillText(line, currentEndX, currentEndY);.. var currentStartX = allPosX[i-1];.. var currentStartY = allPosY[i-1];.. lineWidth = frontLineWidth;.. strokeStyle = frontLineColor;.. Καταγραφή συντεταγμένων σε click μέσα στο canvas (Δοκιμασμένο σε Firefox και Chrome).. head meta charset= utf-8.. canvas id= myCanvas width= 600 height= 500 /canvas.. addEventListener( mousedown , getPosition, false);.. function getPosition(event).. var x = new Number();.. var y = new Number();.. if (event.. x != undefined event.. y != undefined).. x = event.. y = event.. else // Firefox method to get the position.. clientX + document.. scrollLeft +.. scrollLeft;.. clientY + document.. scrollTop +.. scrollTop;.. x -= canvas.. offsetLeft;.. y -= canvas.. offsetTop;.. var message = x: + x + y: + y;.. Drag and Drop σε Canvas.. meta charset= UTF-8 /.. title Canvas Drag and Drop Test /title.. section.. div.. canvas id= canvas width= 400 height= 300.. Your browser does not support HTML5 Canvas.. var canvas;.. var ctx;.. var x = 75;.. var WIDTH = 400;.. var HEIGHT = 300;.. var dragok = false;.. /* Όταν είναι true κινείται το ορθογώνιο.. /* Η function που ζωγραφίζει το ορθογώνιο.. function rect(x,y,w,h) {.. rect(x,y,w,h);.. /* Καθαρίζουμε την προηγούμενη προβολή για να ζωγραφιστεί η καινούρια.. function clear() {.. clearRect(0, 0, WIDTH, HEIGHT);.. /* Δημιουργούμε το canvas.. canvas = document.. getElementById( canvas );.. ctx = canvas.. return setInterval(draw, 10);.. /* Κάθε 10 milliseconds ξανασχεδιάζεται το canvas.. Δεν έχουμε βάλει clearInterval οπότε δεν σταματάει ποτέ.. function draw() {.. clear();.. /* Η πρώτου δουλειά της draw είναι να καθαρίζει το ήδη υπάρχον canvas για να το αντικαταστήσει με καινούριο.. fillStyle = #FAF7F8 ;.. rect(0,0,WIDTH,HEIGHT);.. /* Καλείτε η function rect που ζωγραφίζει το ορθογώνιο.. fillStyle = #444444 ;.. rect(x - 15, y - 15, 30, 30);.. /* Βάζουμε αυτές τα x - 15, y - 15 ως συντεταγμένες ώστε τα x,y να μας δίνουν το κέντρο του ορθογωνίου.. (Αυτό δεν είναι απαραίτητο αλλά βοηθάει στο παράδειγμα)*/.. /* Η function που εκτελεί την κίνηση.. function myMove(e){.. if (dragok){.. x = e.. pageX - canvas.. y = e.. pageY - canvas.. /* Η πρώτη δουλειά της function myDown είναι να ελέγξει αν το κλικ έγινε μέσα στο χώρο που καταλαμβάνει το ορθογώνιο.. Αν αυτό έχει γίνει αλλάζουμε τα x y του ορθογωνίου και πλέον το είναι ελεύθερο να κινηθεί.. offsetLeft = απόσταση του canvas από το αριστερό κάθετο όριο της σελίδας.. offsetTop = απόσταση του canvas από το πάνω οριζόντιο όριο της σελίδας.. function myDown(e){.. if (e.. pageX x + 15 + canvas.. offsetLeft e.. pageX x - 15 +.. pageY y + 15 + canvas.. offsetTop.. e.. pageY y -15 + canvas.. offsetTop){.. /* Τα x - 15, y - 15 τα βάλαμε ώστε οι παραπάνω δύο γραμμές να είναι πιο απλές στο παράδειγμα.. Αν αντί να τραβήξετε το ποντίκι σας κάνετε απλώς ένα click σε μια γωνία θα δείτε να μετακινεί εκεί το κέντρο του το ορθογώνιο.. Αυτό το κάνουν οι παραπάνω 2 γραμμές.. dragok = true;.. onmousemove = myMove;.. /* Η function που σταματάει την κίνηση.. function myUp(){.. dragok = false;.. onmousemove = null;.. /* Με τη function init() δημιουργήσαμε το canvas object.. Τώρα σε αυτό προσθέτουμε event με το παρακάτω.. Όταν ο χρήστης κάνει click με το ποντίκι του στο canvas ενεργοποιείται το canvas.. onmousedown event και καλεί τη function myDown().. Η myDown λαμβάνει ένα event object (το e) που έχει τις ιδιότητες (properties) του event.. Μεταξύ των άλλων ιδιοτήτων του το event έχει τα pageX και pageY όπου βρίσκονται οι τιμές των τρεχόντων συντεταγμένων x και y του ποντικιού.. Προσοχή: Οι συντεταγμένες (coordinates) αναφέρονται στη σελίδα, όχι στο παράθυρο ή στο canvas.. init();.. onmousedown = myDown;.. onmouseup = myUp;.. /section.. Drag and Drop πολλαπλών boxes.. var context;.. var dragok;.. var box2move = null;.. var units = [.. { name: 'red', x: 50, y: 300, width: 50, height:50, color: red },.. { name: 'blue', x: 75, y: 200, width: 25, height:100, color: blue },.. context = canvas.. return setInterval(drawRect, 10);.. function drawRect () {.. for (i=0;i units.. rect(units[i].. x, units[i].. y, units[i].. width, units[i].. fillStyle = units[i].. color;.. pageX units[i].. x + canvas.. offsetLeft + units[i].. width e.. pageY units[i].. y + canvas.. offsetTop e.. offsetTop + units[i].. height) {.. box2move = i;.. units[i].. x = e.. y = e.. box2move = null;.. units[box2move].. Σχεδίαση γραμμής με το ποντίκι.. var lineArrayX = new Array();;.. var lineArrayY = new Array();;.. return setInterval(drawLine, 10);.. function drawLine () {.. if (typeof lineArrayX[0] !== 'undefined' lineArrayX[0] !== null) {.. for (i=0;i lineArrayX.. moveTo(lineArrayX[i], lineArrayY[i]);.. lineTo(lineArrayX[i], lineArrayY[i]);.. var lineX = e.. var lineY = e.. lineArrayX.. push(lineX);.. lineArrayY.. push(lineY);.. Onmousedown σε Canvas.. p span id= unitname Click on a unit to see it's name here /span.. drawRect();.. addEventListener( mousedown , doMouseDown, false);.. function doMouseDown(e) {.. getElementById('unitname').. innerHTML = units[i].. name;..

    Original link path: /seminars/html5.html
    Open archive

  • Title: Περιοδικό InterBIZ, εβδομαδιαίο newsletter για τις επιχειρηματικές εφαρμογές του Internet
    Descriptive info: Τεύχος 80, 10/5/2005 (Ετος 9ο).. Ειδήσεις και συμβουλές για την επιχειρηματική αξιοποίηση του Internet και όχι μόνο.. Η διαφήμιση γίνεται πιο προσωπική.. (Οι καταναλωτές αλλάζουν, το ίδιο πρέπει να κάνει και η διαφήμιση).. Micropayments: Η επανάσταση που δεν θα έρθει.. (Οτι λάμπει δεν είναι χρυσός).. Η επανάσταση των PC τελείωσε.. (ή μάλλον ξαποσταίνει).. Οι ιοί μετατρέπονται σε εγκληματικά εργαλεία.. (Νέες απειλές έρχονται να προστεθούν στους παλιούς εφιάλτες).. Το Wi-fi υπολογίσιμη απειλή για το 3G.. (Σύντομα τα τεχνικά προβλήματα θα επιλυθούν).. Το spam αποδίδει και το e-commerce υποφέρει.. (Ποια είναι τα ποσοστά αποδοτικότητας των spam emais).. Ποιος κερδίζει τα χαμένα χρήματα;.. (Ποιοί είναι οι επιτυχημένοι του Internet).. Τα ρητά του InterBIZ.. (Κατάλογος με όλα τα ρητά που έχουν δημοσιευθεί σε παλαιότερα τεύχη).. Κείμενα - ’ρθρα παλαιών τευχών.. Δωρεάν συνδρομή στο InterBIZ.. Το InterBIZ newsletter είναι ένα ηλεκτρονικό περιοδικό (ezine) το οποίο.. διανέμεται δωρεάν μια  ...   και πολλά άλλα.. Το InterBIZ διανύει σήμερα τον έκτο χρόνο της ζωής του και κυκλοφορεί σε Ελληνικά ΕΛΟΤ 928 (τα Ελληνικά των Windows), σε μορφή Web σελίδας (HTML), σε μορφή word for windows και σε fragkolevantinika.. Επιτρέπεται η αντιγραφή τμημάτων ή ολόκληρου τεύχους του INTERBIZ NEWS μόνο για μη κερδοσκοπικούς σκοπούς, υπό την προϋπόθεση πως θα αναφέρεται η πηγή: (INTERBIZ NEWS interbiz@gepiti.. com).. Για να αποκτήσετε μια δωρεάν συνδρομή.. απλώς.. συμπληρώστε την ακόλουθη φόρμα.. (τα στοιχεία των συνδρομητών δεν γνωστοποιούνται και δεν πωλούνται):.. Ονοματεπώνυμο:.. Σχόλια - Παρατηρήσεις:.. Αν έχετε προβλήματα με την συμπλήρωση της φόρμας στείλτε μας ένα email στο.. Δήλωση προστασίας απορρήτου προσωπικών στοιχείων (privacy guidelines):.. Οι πληροφορίες που λαμβάνει η ΕΕΕΙ μέσω των φορμών του site της δεν κοινοποιούνται σε τρίτους παρά μόνο εάν αυτό της ζητηθεί από την ελληνική δικαιοσύνη.. Επιστροφή στις.. Επιλογές.. © 2005.. Υποδείξεις, Ερωτήσεις, Σχόλια στην διεύθυνση..

    Original link path: /interbiz/current.htm
    Open archive

  • Title: Συνδρομή InterBIZ newsletter
    Descriptive info: Φόρμα εγγραφής συνδρομητή.. Για να αποκτήσετε μια δωρεάν συνδρομή απλώς συμπληρώστε την ακόλουθη φόρμα (τα στοιχεία των συνδρομητών δεν γνωστοποιούνται και δεν πωλούνται):.. Copyright 2005..

    Original link path: /interbiz/syndrom.htm
    Open archive

  • Title: Αρχείο ’ρθρων Παλαιών Τευχών
    Descriptive info: Δωρεάν συνδρομή.. Ανθολόγιο άρθρων.. Νέα ’ρθρα.. Αρχείο ’ρθρων Προηγούμενων Τευχών.. Internet Advertising & Marketing.. Business Models.. Case Studies.. E-commerce.. Τεχνικά Θέματα.. Κοινωνικά Θέματα.. Ορισμοί (Τι είναι το.. Γενικού Ενδιαφέροντος.. Διάφορα Επιχειρηματικά.. Internet Advertising & Marketing.. Το κινητό γίνεται φορητός υπολογιστής και κάτι παραπάνω.. (10/5/2005).. Το spam αποδίδει και το e-commerce υποφέρει.. (13/5/2004).. Όταν η διαφήμιση γίνεται παιγνίδι.. (24/11/2003).. Τα online παιγνίδια ως εργαλείο Marketing.. (4/6/2003).. Εναλλακτικές διαφημιστικές πρακτικές στο Internet.. (19/9/2002).. Το αυτοκαταστροφικό Internet Marketing (Ooqa Ooqa, Email Cookies, Yahoo! privacy policy).. (19/4/2002).. Παραδοσιακή και δικτυακή διαφήμιση.. Ομοιότητες - Διαφορές - Προτάσεις.. (29/3/2002).. Πώς συντάσσεται ένα διαφημιστικό - εμπορικό email.. (15/3/2002).. Τι είναι και πώς λειτουργεί το email marketing.. (8/3/2002).. Στοιχεία για το παρόν και το μέλλον της ελληνικής αγοράς Internet.. (15/2/2002).. Η ανθρώπινη ψυχολογία ως εργαλείο Marketing.. (7/12/2001).. Τι είναι το Branding και πώς λειτουργεί στο Internet.. (12/10/2001).. Η δύναμη (χάρη στα email newsletters), αλλά και τα προβλήματα, του email marketing.. (5/10/2001).. Φθηνοί και εύκολοι τρόποι διαφήμισης ενός web site ή online καταστήματος.. (13/7/2001).. Ποιες είναι οι αποτελεσματικότερες τοποθεσίες (σελίδες) δημοσίευσης ενός banner.. (20/4/2001).. Τα προβλήματα της επιχειρηματικής αξιοποίησης του email.. (23/2/2001).. Τι είναι τα "error" adverts.. (24/11/2000).. Πόσο χρήσιμα είναι σήμερα τα banners;.. (20/10/2000).. Η αξία των email newsletters ως συμπλήρωμα ενός web site.. (28/7/2000).. Δύσκολο αλλά λαμπρό μέλλον για το email marketing.. (26/5/2000).. Πιο αποδοτικές οι διαφημίσεις σε email zines.. Πώς θα αυξήσετε το click-through των banners σας.. Τα banners και η αποδοτικότητά τους.. Διαφήμιση στο Web - Ποιόν να εμπιστευτείς;.. BANNERS & BUTTON LINKS.. Η επίδραση των Banners στις εκλογικές προτιμήσεις.. Επιστροφή στον.. Πίνακα Θεμάτων Αρχείου.. Business Models.. Micropayments: Η επανάσταση που δεν θα έρθει.. (29/12/2004).. Το Wi-fi υπολογίσιμη απειλή για το 3G.. (3/9/2004).. Ποιος κερδίζει τα χαμένα χρήματα;.. (16/2/2004).. Το Open Source και το Free Software με τα μάτια ενός οικονομολόγου.. (2/8/2002).. Μια επιχειρηματική προσέγγιση του Open Source και του Free Software.. (19/7/2002).. Οι οικονομικές επιπτώσεις του νόμου του Moore.. (7/6/2002).. Η επιχειρηματική αξιοποίηση των καινοτομιών.. (24/5/2002).. Η νέα εποχή στην αναζήτηση πληροφοριών μέσω Internet.. (10/5/2002).. Ένα εικονικό κράτος με πραγματικά χρήματα!.. (5/4/2002).. Ποιο θα είναι το επόμενο Internet Boom.. (9/11/2001).. Γιατί το περιεχόμενο στο Internet θα διατίθεται πάντοτε δωρεάν.. (19/10/2001).. Τα αίτια του dot com crash.. (7/9/2001).. Δικτυακοί τρόποι συγγραφής και προβολής βιβλίων.. (6/7/2001).. Το παρόν και το μέλλον της Web TV.. (23/3/2001).. Επιχειρηματικές εφαρμογές των streaming media.. (2/3/2001).. Οι μικρομεσαίοι αποτελούν την άγνωστη δύναμη του Internet.. (16/2/2001).. Το Internet έγινε καταναλωτικό προϊόν.. (26/1/2001).. Γιατί το Internet οδηγείται σε συγχώνευση και όχι σε σύγκλιση με τα παραδοσιακά μέσα επικοινωνίας.. (12/1/2001).. B2B Marketplaces (ή E- Marketplaces) εναντίων Reverse Auctions.. (1/12/2000).. Γιατί η Interactive TV δεν είναι πραγματικά Interactive.. (17/11/2000).. Η σύγκλιση περιεχομένου και e-commerce.. (27/10/2000).. Email content: Η επόμενη μεγάλη επανάσταση στο Internet.. (29/9/2000).. Τα μυστικά του price differentiation στο Internet.. (15/9/2000).. Το μέλλον του personalization.. (4/8/2000).. Συμβουλές για τα ελληνικά B2B Marketplaces.. (21/7/2000).. Τα E-markets αλλάζουν το Business to Business E-Commerce.. (12/5/2000).. Internet Commerce: Η επέλαση των group-buying models.. Υποστήριξη προϊόντων τρίτων - Μια αναπτυσσόμενη αγορά.. Συνεργασίες Παραπομπών - Ένας αναξιοποίητος τρόπος προώθησης πωλήσεων.. Τι είναι οι πλειστηριασμοί Online και πως λειτουργούν.. Τι είναι οι οργανωμένες αγορές (We-Commerce).. Έτσι γίνονται οι πωλήσεις στο Internet.. On-Line Games: Ο Μεγάλος Κερδοφόρος ’γνωστος.. Case Studies.. Οι online απατεώνες γίνονται όλο και πιο επικίνδυνοι.. (9/8/2002).. Online διαγωνισμοί (case study).. (8/2/2002).. Οι κίνδυνοι της τεχνολαγνείας.. (24/1/2002).. Case Study: Διαβάζοντας τα στατιστικά του www.. (21/9/2001).. Case Study: Pop under windows.. (10/8/2001).. Μια περίπτωση συκοφαντικής δυσφήμισης μέσω Internet.. (22/6/2001).. Πώς λειτουργούν οι επιτυχημένες υπηρεσίες μεσολάβησης στο Internet.. (15/6/2001).. Ένα παράδειγμα δικτυακής απάτης μέσω email.. (11/5/2001).. Case study: After Sales email marketing.. (30/3/2001).. Χαζοί Έλληνες και έξυπνα αμερικανάκια.. E-commerce.. Καθημερινές Ιστορίες Ηλεκτρονικού Εμπορίου -Ηλεκτρονικής Τρέλας.. (21/11/2002).. Δεν αγαπούν όλοι τις ηλεκτρονικές αγορές.. (30/11/2001).. Τα πραγματικά προβλήματα από τη χρήση πιστωτικών καρτών στο Internet.. (18/5/2001).. Το E-commerce δεν είναι απλώς ένα τεχνικό προϊόν, αλλά μία καινούρια φιλοσοφία.. (22/9/2000).. Πιστωτική κάρτα μιας χρήσεως!.. Εναλλακτικοί τρόποι Online πληρωμών.. (9/6/2000).. Ο Δρόμος Προς Το Ηλεκτρονικό Εμπόριο Μέρος 1ο (Τα απαραίτητα βήματα για τη δημιουργία ενός ηλεκτρονικού καταστήματος).. (2/6/2000).. Ο Δρόμος Προς Το Ηλεκτρονικό Εμπόριο Μέρος 2ο (Τα απαραίτητα βήματα για τη δημιουργία ενός ηλεκτρονικού καταστήματος).. (22/6/2000).. Ο Δρόμος Προς Το Ηλεκτρονικό Εμπόριο Μέρος 3ο (Τα απαραίτητα βήματα για τη δημιουργία ενός ηλεκτρονικού καταστήματος).. Παγκοσμιοποιείται το consumer e-commerce.. Η φούσκα του ηλεκτρονικού εμπορίου.. Ελληνικά Ηλεκτρονικά Καταστήματα.. Τα χαρακτηριστικά των επιτυχημένων επιχειρήσεων στο Internet..  ...   (14/12/2001).. Απλά μαθήματα κρυπτογραφικής πολιτικής για τον μέσο πολίτη (Τι είναι η στεγανογραφία).. (28/9/2001).. Παρουσίαση της έκθεσης του Ευρωπαϊκού Κοινοβουλίου για το Echelon.. (29/6/2001).. Η κρατική (οικονομική) κατασκοπία και οι κίνδυνοί της για τον απλό πολίτη.. (6/4/2001).. Τα μειονεκτήματα της κατάργησης των αποστάσεων.. (9/3/2001).. Πώς αναγνωρίζουμε τα πλαστά μηνύματα στο Internet.. (6/10/2000).. Οι εξαρτημένοι του δικτύου.. Το Internet κάνει τους ανθρώπους πιο κοινωνικούς.. (16/6/2000).. Ελέγξτε πάντοτε τις πηγές των πληροφοριών σας.. Κυβερνοτρομοκρατία.. Ένας καταδότης στο σπίτι μας.. (19/5/2000).. PlayStation 2.. Σκέψεις για το μέλλον της ανθρωπότητας.. Εκλογές 2000 και Internet, μέρος Β'.. Εκλογές 2000 και Internet.. Μοναξιά λόγω του Internet; Φυσικά όχι.. Internet & Κοινωνία.. Προεκλογικές εκστρατείες στο Internet.. Internet & Εκπαίδευση.. On-Line Κοινότητες.. Το παρόν και το μέλλον της Τηλεεργασίας.. Πράγματα για τα οποία αξίζει να πληρώσεις.. Το χάσμα των γενεών στο Internet.. Η προστασία από "ανάρμοστους χώρους" στο δίκτυο.. Τι είναι οι Rich Media Ads.. (10/7/2003).. Τι είναι το E-business.. (7/5/2003).. Ελεύθερο Λογισμικό (Free Software) και Λογισμικό Ανοικτού Κώδικα (Open Source).. (28/6/2002).. Τι είναι και πώς λειτουργεί το ECRM (e-customer relationship management).. (14/6/2002).. Τι είναι το QoS (Quality of Service).. (16/11/2001).. Τι είναι το ubiquitous commerce (u-commerce).. (26/10/2001).. Τι είναι τα Walled Gardens.. (20/7/2001).. Τι είναι και πώς λειτουργεί το product placement.. (25/5/2001).. Τι είναι η Νέα Οικονομία (New Economy).. (15/12/2000).. (1/11/2000).. Τι είναι το CRM (customer relationship management).. Τι σημαίνει Forward Compatible.. Τι είναι το Customer Lifetime Value.. (13/10/2000).. Τι είναι Portal (πύλη).. (8/9/2000).. Τι είναι τα Hoaxes ή Urban Legends (Αστικοί Θρύλοι).. Τι είναι το SMS Spam.. Τι είναι ο κυβερνοχώρος.. Γενικού Ενδιαφέροντος.. Οι ιοί μετατρέπονται σε εγκληματικά εργαλεία.. (8/10/2004).. Η ευημερία της Ευρώπης (και του κόσμου) σε θανάσιμο κίνδυνο.. (2/9/2003).. Το Ελληνικό Δημόσιο στον 21ο αιώνα.. (5/7/2002).. Η δημοφιλέστερη απάτη στο δίκτυο (Πυραμιδικά Σχήματα).. (23/11/2001).. Ένα προσωπικό παράδειγμα χρήσης του Internet ως εργαλείου εκμάθησης.. (17/8/2001).. Internet εναντίον TV.. Πώς η τηλεόραση αναγνωρίζει την ήττα της.. (27/7/2001).. Ολυμπιακοί αγώνες και Internet.. (8/12/2000).. Η πρώτη οργανωμένη ψηφιακή ληστεία τραπέζης.. Το 1/3 της εργάσιμης ημέρας μπροστά στην οθόνη!.. Διάφορα στοιχεία για το ελληνικό και το διεθνές Internet.. Πού είναι το content;.. Γενεύη Telecom 99.. Οι συγγραφείς του Web.. Μια μεγάλη παρανόηση για το domain name copyright.. Συνεργασία μέσω Internet - μύθοι και πραγματικότητα.. Πώς βλέπει ο τύπος το Internet.. Κρυπτογραφία: Όχι τόσο ασφαλής όσο νομίζουμε.. Οι 10 πιο δημοφιλείς δραστηριότητες στο Web.. Διάφορα Επιχειρηματικά.. Η διαφήμιση γίνεται πιο προσωπική.. (4/2/2005).. Μαθήματα πολιτικής οικονομίας για Internet Business (μέρος 3ο).. (19/12/2002).. Μαθήματα πολιτικής οικονομίας για Internet Business (μέρος 2ο).. (12/12/2002).. Μαθήματα πολιτικής οικονομίας για Internet Business (μέρος 1ο).. (5/12/2002).. Οι πολλοί managers καταστρέφουν τις επιχειρήσεις.. (31/5/2002).. Τα προβλήματα της πώλησης περιεχομένου.. (22/2/2002).. Αλλάζοντας τον τρόπο λειτουργίας των επιχειρήσεων - Μαθήματα από το Open Source.. (21/12/2001).. Παραλειπόμενα από την παγκόσμια ιστορία των επικοινωνιών.. (24/8/2001).. ΔΙΚΤΥΩΘΕΙΤΕ και άγιος ο Θεός.. Πώς επιλέγουμε έναν σύμβουλο ή συνεργάτη για θέματα Internet.. (1/6/2001).. Τα χαρακτηριστικά των online αγοραστών.. Προβλέψεις για τους μελλοντικούς κερδισμένους και χαμένους του ελληνικού Internet.. Domain Names - Γαλήνη πριν την καταιγίδα;.. Το παρόν και το μέλλον του WAP.. Λίγα ακόμη σχόλια για το WAP.. Σχόλια για το μέλλον του e-commerce στην Ελλάδα.. (7/7/2000).. Εκτιμήσεις για τη διάδοση του web hosting στην Ελλάδα.. Το Σάββατο ανήκει στο Web.. Το παρόν και το μέλλον του Web.. Συμφωνία Microsoft - Ericsson.. Πολύ κακό για το τίποτε.. Κίνδυνοι από απάτες σχετιζόμενες με τον υιό του 2000 στο Internet.. Επενδυτικές πληροφορίες στο Internet.. Τι είναι η εικονική ιδιοκτησία.. Το παρόν και το μέλλον των on-line travel business.. Τα πολυκαταστήματα στο Internet στη σκιά του Amazon.. Προβλέψεις για το 1999.. Τα δημοφιλέστερα εμπορικά sites στις ΗΠΑ για το 1998.. Οι πωλήσεις μέσω Internet έτοιμες για το μεγάλο άλμα.. Απάτες στο Internet.. Κρυπτογραφία και Οικονομία.. Συμβουλές.. Τα περιεχόμενα ενός καλού εταιρικού web site.. (19/6/2002).. Σκέψεις για το παρελθόν και το μέλλον των τηλεπικοινωνιών από τον Nicholas Negroponte.. (1/2/2002).. Πώς επιλέγουμε τις δικτυακές υπηρεσίες ή εφαρμογές στις οποίες αξίζει να επενδύσουμε.. (2/11/2001).. Μην εμπιστεύεστε τις αυθεντίες.. (3/8/2001).. Πώς αξιολογούμε την ευχρηστία ενός site ή μιας εφαρμογής στο web.. (9/2/2001).. Θα μας πνίξουν οι πολυεθνικές και καλά θα κάνουν.. Οι καινοτομίες δεν εξασφαλίζουν πάντοτε την επιτυχία.. Χρειαζόμαστε Web σελίδες με άποψη και προσωπικότητα.. Μην εμπιστεύεστε ό,τι διαβάζετε για το Internet !.. Πώς να τα οικονομήσετε χάρη στο Internet.. (Χιουμοριστικό).. Συμβουλές για όσες επιχειρήσεις αρχίζουν τώρα να χρησιμοποιούν το Internet.. Προσέχετε τα λόγια σας.. Επιχειρηματικές Σελίδες.. © 2005..

    Original link path: /interbiz/articles/index.htm
    Open archive

  • Title: Οδηγίες Κατασκευής Web Σελίδων με τη Γλώσσα HTML
    Descriptive info: Μαθήματα Κατασκευής Web Σελίδων με τη Γλώσσα HTML.. FAQ (Απαντήσεις στις ερωτήσεις σας).. Πώς κατασκευάζουμε σελίδες με Ελληνικούς Χαρακτήρες.. Τι είναι Web Server και Web Client.. Τι ονομάζουμε Δομή μιας Web Παρουσίασης ή ενός Web Site.. Τι είναι ένα URL (Uniform Resource Locator) και ποια είδη URL υπάρχουν.. Τι είναι το pixel.. Πώς συντάσουμε URLs που περιέχουν ειδικούς χαρακτήρες.. Κατασκευή σελίδων με κώδικα HTML ή με αυτόματα προγράμματα;.. Πώς Κατασκευάζονται οι Σελίδες.. Πώς κατασκευάζεται μια απλή Web σελίδα.. Ορισμός Παραγράφων.. Αλλαγές Γραμμών.. Παραπομπές (Links).. Τίτλος σελίδας.. Πώς ορίζουμε το χρώμα του φόντου και του κειμένου της σελίδας.. Διάφορες μορφοποιήσεις κειμένου.. Λίστες (αριθμημένες και μη).. Επικεφαλίδες (Headings).. Στοίχιση ALIGN.. Κεντράρισμα CENTER (Στοίχιση στο κέντρο).. Οριζόντιες Γραμμές HR.. Ειδικοί Χαρακτήρες ( , , , â) και Χαρακτήρες με Ειδικές Λειτουργίες ( , , , ).. Ορισμός γραμματοσειρών FONT.. Εισαγωγή Εικόνων και Γραφικών.. Εισαγωγή μιας εικόνας σαν φόντο της σελίδας.. Πώς βρίσκουμε τον 16εξαδικό κωδικό ενός χρώματος.. Γενικές Συμβουλές για την Χρήση των Γραφικών.. ’λλες πληροφορίες για χρώματα και γραφικά.. Πώς δημιουργούμε απλούς πίνακες.. Πώς δημιουργούμε περίπλοκους πίνακες.. Σελιδοποίηση με πίνακες.. Πώς δημιουργούμε μια φόρμα επικοινωνίας.. Πώς δημιουργούμε ένα site  ...   με το Paintshop Pro.. Πώς κάνουμε μια γραμμή κειμένου να σκρολάρει.. Πώς κάνουμε ένα μέρος της σελίδας (κείμενο και εικόνες) να αναβοσβήνει.. Πώς λειτουργούν οι παραπομπές μιας αρχικής σελίδας που βρίσκεται στον σκληρό δίσκο (ή δισκέτα) του χρήστη BASE.. Πώς κατασκευάζουμε image maps @.. Πώς προσθέτουμε javascripts σε μια σελίδα.. Πώς δημιουργούνται τα Pop Up Windows.. Πώς προσθέτουμε μια σελίδα μέσα σε μια άλλη (iframe).. Τι είναι τα Stylesheets @.. Τα παραπάνω κείμενα περιγράφουν τι είναι το Web, πως κατασκευάζονται οι Web σελίδες με την γλώσσα HTML.. Ο οδηγός είναι γραμμένος με την μορφή ερωτήσεων και απαντήσεων (faq).. Αν είστε αρχάριος, σας συνιστούμε να διαβάσετε τις ερωτήσεις και τις απαντήσεις με την σειρά που παρουσιάζονται.. Αν θέλετε να μάθετε για κάποιο θέμα που δεν καλύπτεται εδώ (ή θέλετε να διορθώσετε ή να συμπληρώσετε κάτι), μπορείτε να.. επικοινωνήσετε.. μαζί μου για να την προσθέσω στον οδηγό.. Όλες οι σελίδες του Οδηγού, είναι γραμμένες με τρόπο που να επιτρέπει την εύκολη εκτύπωση και αντιγραφή τους.. Παρακαλώ, θυμηθείτε πως επιτρέπεται η αντιγραφή, μόνο για.. προσωπική χρήση.. Συγγραφέας του Οδηγού Κατασκευής Web Σελίδων 2005.. Γιώργος Επιτήδειος 2005.. Ελληνικό Οδηγό Χρήσης Internet..

    Original link path: /odhgos/htmlfaq.htm
    Open archive

  • Title: Μαθήματα Προγραμματισμού Perl- ΕΕΕI
    Descriptive info: Επικοινωνία.. Ταυτότητα.. |.. Μαθήματα Προγραμματισμού.. Net Business.. Τα νέα του Internet.. Ο Κόσμος του Αύριο.. Μαθήματα Προγραμματισμού Perl.. Scalar variables.. Τα είδη των quotes (εισαγωγικών).. Η λειτουργία for.. If elsif else.. Μια συντομογραφία των if else (Ο conditional ?).. Ψευδοκώδικας (while - until μέρος πρώτο).. Λίγη θεωρία.. Μια πιο κλασική εφαρμογή της while.. Μια while με μενού επιλογών.. Η «μαγική» while.. Λήψη δεδομένων από το prompt - η @ARGV.. while() do last.. Arrays (σειρές δεδομένων) και Lists.. Η θέση των περιεχομένων μιας array και οι λειτουργίες shift, unshift, push και pop.. Defined - Undefined scalars και arrays.. Η λειτουργία foreach.. Ένα προσωπικό σχόλιο πριν προχωρήσετε παρακάτω.. Εύρεση και διαχείριση αρχείων.. Regular Expressions.. Χρήση Regular Expressions αντί κλασικών προγραμματιστικών εργασιών.. Split και Join (και λίγο substitution).. Greed (Τραβώντας URLs από Web σελίδες).. Συγκρίσεις τιμών και ακολουθιών χαρακτήρων (strings).. Τι είναι τα  ...   files) και επεξεργασία τους χωρίς όμως να πειράξουμε το αρχικό αρχείο.. Αποθήκευση των αποτελεσμάτων ενός προγράμματος σε ένα αρχείο (print redirection).. Print to file - Append to file.. Τοποθετώντας δεδομένα σε καινούρια αρχεία.. Αντικαταστάσεις (substitution operations).. Αντικαταστάσεις μέσα σε λίστες.. Grep και sort (και ένα παράδειγμα κατάργησης διπλοτύπων).. Ένα απλό configuration file.. Ένα απλό CGI script.. System commands (system function).. Λαμβάνοντας μέρη μιας web σελίδας.. Δημιουργία και κλήση υποπρογραμμάτων.. (subroutines).. Εισαγωγή στο scope.. Λαμβάνοντας τιμές από subroutines.. Δίνοντας τιμές σε μια subroutine - Η @_ array.. Η χρήση της local.. Arrays μέσα σε Arrays.. Hashes που περιέχουν άλλες Arrays.. Hashes που περιέχουν άλλες Hashes.. Παραδείγματα διαχείρισης δεδομένων από text files.. Πώς τοποθετούμε τα περιεχόμενα ενός ολόκληρου αρχείου μέσα σε μια scalar.. Last, Next, Redo.. Loop labels.. References (παραπομπές).. Δημιουργία Action φόρμας.. Τρέχουσα Ενότητα:.. Perl.. Φιλικά - συνεργαζόμενα sites:.. Eeei.. gr 2009..

    Original link path: /programming/perl/index.html
    Open archive

  • Title: Μαθήματα Προγραμματισμού Javascript - ΕΕΕI
    Descriptive info: Μαθήματα Προγραμματισμού Javascript.. Εισαγωγή στον προγραμματισμό με Javascript.. Pattern Matching.. Subroutines.. Arrays.. Παράδειγμα φόρμας με πολλαπλά πεδία.. Javascript..

    Original link path: /programming/javascript/index.html
    Open archive


  • Archived pages: 1133