ΠΡΙΝ ΞΕΚΙΝΗΣΟΥΜΕ Πράγματα που αξιολογείτε θετικά σε σχέση με το μάθημα του προηγούμενου τετραμήνου Πράγματα που θα μπορούσαν να βελτιωθούν.

Παρουσίαση με θέμα: "ΠΡΙΝ ΞΕΚΙΝΗΣΟΥΜΕ Πράγματα που αξιολογείτε θετικά σε σχέση με το μάθημα του προηγούμενου τετραμήνου Πράγματα που θα μπορούσαν να βελτιωθούν."— Μεταγράφημα παρουσίασης:

1 ΠΡΙΝ ΞΕΚΙΝΗΣΟΥΜΕ Πράγματα που αξιολογείτε θετικά σε σχέση με το μάθημα του προηγούμενου τετραμήνου Πράγματα που θα μπορούσαν να βελτιωθούν

2 Τεχνικά θέματα: ωράριο προσέλευσης-αποχώρησης Άλλα;

3 Ανάπτυξη διαδικτυακών εφαρμογών

4 Σχετικά μαθήματα του ΑΠΣ: ΤΕΧΝΟΛΟΓΙΕΣ ΚΑΙ ΥΠΗΡΕΣΙΕΣ ΤΟΥ ΔΙΑΔΙΚΤΥΟΥ ΠΡΟΧΩΡΗΜΕΝΕΣ ΤΕΧΝΙΚΕΣ ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΥ ΣΤΟ ΔΙΑΔΙΚΤΥΟ Πρακτικό μάθημα – δραστηριότητες στον υπολογιστή 3 ώρες/βδομάδα Σημαντική η εξάσκηση στο σπίτι

5 Τεχνολογίες για την ανάπτυξη διαδικτυακών εφαρμογών HTML CSS Javascript PHP SQL

6

7 Στο μάθημα μας: Html ΚΑΙ CSS Αντιστοιχούν(εν μέρει) στο πρακτικό κομμάτι του μαθήματος ΤΕΧΝΟΛΟΓΙΕΣ ΚΑΙ ΥΠΗΡΕΣΙΕΣ ΤΟΥ ΔΙΑΔΙΚΤΥΟΥ

8 HTML Από τη Βικιπαίδεια, την ελεύθερη εγκυκλοπαίδεια Η HTML (ακρωνύμιο του αγγλικού HyperText Markup Language, ελλ. Γλώσσα Σήμανσης Υπερκειμένου) είναι η κύρια γλώσσα σήμανσης για τις ιστοσελίδες, και τα στοιχεία της είναι τα βασικά δομικά στοιχεία των ιστοσελίδων.

9 ετικέτες(tags) Η HTML γράφεται υπό μορφή στοιχείων HTML τα οποία αποτελούνται από ετικέτες (tags), οι οποίες περικλείονται μέσα σε σύμβολα «μεγαλύτερο από» και «μικρότερο από» (για παράδειγμα ), μέσα στο περιεχόμενο της ιστοσελίδας. Οι ετικέτες HTML συνήθως λειτουργούν ανά ζεύγη (για παράδειγμα και ), με την πρώτη να ονομάζεται ετικέτα έναρξης και τη δεύτερη ετικέτα λήξης (ή σε άλλες περιπτώσεις ετικέτα ανοίγματος και ετικέτα κλεισίματος αντίστοιχα). Ανάμεσα στις ετικέτες, οι σχεδιαστές ιστοσελίδων μπορούν να τοποθετήσουν κείμενο, πίνακες, εικόνες κλπ.

10 Ο σκοπός ενός web browser είναι να διαβάζει τα έγγραφα HTML και τα συνθέτει σε σελίδες που μπορεί κανείς να διαβάσει ή να ακούσει. Ο browser δεν εμφανίζει τις ετικέτες HTML, αλλά τις χρησιμοποιεί για να ερμηνεύσει το περιεχόμενο της σελίδας.

11 Τα στοιχεία της HTML χρησιμοποιούνται για να κτίσουν όλους του ιστότοπους. Η HTML επιτρέπει την ενσωμάτωση εικόνων και άλλων αντικειμένων μέσα στη σελίδα, και μπορεί να χρησιμοποιηθεί για να εμφανίσει διαδραστικές φόρμες. Παρέχει τις μεθόδους δημιουργίας δομημένων εγγράφων (δηλαδή εγγράφων που αποτελούνται από το περιεχόμενο που μεταφέρουν και από τον κώδικα μορφοποίησης του περιεχομένου) καθορίζοντας δομικά σημαντικά στοιχεία για το κείμενο, όπως κεφαλίδες, παραγράφους, λίστες, συνδέσμους, παραθέσεις και άλλα. Μπορούν επίσης να ενσωματώνονται σενάρια εντολών σε γλώσσες όπως η JavaScript, τα οποία επηρεάζουν τη συμπεριφορά των ιστοσελίδων HTML.

12 12 HTML HyperText Markup Language Είναι η γλώσσα που καταλαβαίνουν οι web browsers για την αναπαράσταση των δεδομένων Βασικό χαρακτηριστικό: η διασύνδεση με αλλά HTML έγγραφα

13 13 HTML Κείμενο 1 Κείμενο 2Κείμενο 3 Κείμενο 4Κείμενο 5

14 14 HTML – Σύνταξη Βασικό δομικό στοιχείο η ετικέτα (tag) Κάθε διακριτικό της HTML περικλείεται σε <> Τα περισσότερα διακριτικά οµαδοποιούνται σε ζεύγη. Το πρώτο δείχνει την αρχή και το δεύτερο το τέλος επίδρασης του συγκεκριµένου διακριτικού. Πχ …, Σχόλια:

15 15 Δομή σελίδας HTML Ο τίτλος του κειμένου Το κυρίως κείμενο Χρησιμοποιήστε το σημειωματάριο για να δημιουργήσετε την ιστοσελίδα

16 16 Tag Attributes Δίνουμε επιπλέον χαρακτηριστικά σε κάποιο tag. Το γράφουμε μέσα στον ορισμό του tag Πχ … Αλλάξτε σε κόκκινο το φόντο της σελίδας που φτιάξατε

17 CSS http://web.archive.org/web/20120111075401/w ww.cpusers.gr/content.php?r=203- %CE%95%CE%B9%CF%83%CE%B1%CE%B 3%CF%89%CE%B3%CE%AE- %CF%83%CF%84%CE%B1-CSS- %28Tutorial%29 http://web.archive.org/web/20120111075401/w ww.cpusers.gr/content.php?r=203- %CE%95%CE%B9%CF%83%CE%B1%CE%B 3%CF%89%CE%B3%CE%AE- %CF%83%CF%84%CE%B1-CSS- %28Tutorial%29 http://dide.flo.sch.gr/Plinet/Tutorials-CSS- Bible/Tutorials-CSS-Bible-1.html http://dide.flo.sch.gr/Plinet/Tutorials-CSS- Bible/Tutorials-CSS-Bible-1.html

18 Η CSS είναι μια γλώσσα υπολογιστή προορισμένη να αναπτύσσει στυλιστικά μια ιστοσελίδα δηλαδή να διαμορφώνει περισσότερα χαρακτηριστικά, χρώματα, στοίχιση και δίνει περισσότερες δυνατότητες σε σχέση με την html. Για μια όμορφη και καλοσχεδιασμένη ιστοσελίδα η χρήση της CSS κρίνεται ως απαραίτητη.

19 Οι Web browsers μπορούν επίσης να αναφέρονται σε στυλ μορφοποίησης CSS για να ορίζουν την εμφάνιση και τη διάταξη του κειμένου και του υπόλοιπου υλικού. Ο οργανισμός W3C, ο οποίος δημιουργεί και συντηρεί τα πρότυπα για την HTML και τα CSS, ενθαρρύνει τη χρήση των CSS αντί διαφόρων στοιχείων της HTML για σκοπούς παρουσίασης του περιεχομένου.[1]

20 Στο ερώτημα ποια είναι η διαφορά ανάμεσα στα CSS και την HTML, μπορούμε να πούμε ότι η HTML χρησιμοποιείται για να δομήσει το περιεχόμενο (content), ενώ τα CSS χρησιμοποιούνται για τη διαμόρφωση ή μορφοποίηση (formatting) του δομημένου περιεχομένου. Σύντομα θα γίνει σαφές το τι εννοούμε. Από το ξεκίνημά της, η HTML χρησιμοποιείτο μόνο για να μπορούμε να προσθέτουμε δομή στο κείμενο, όπως για να επισημαίνουμε ποια είναι κεφαλίδα (headline) ή ποια είναι παράγραφος (paragraph) με τα γνωστά tags (ετικέτες) της HTML, όπως είναι τα και. Όμως, καθώς η δημοτικότητα του Web αύξανε συνεχώς, οι σχεδιαστές των ιστοσελίδων άρχισαν να ψάχνουν για επιπλέον δυνατότητες, όπως προσθήκη διάταξης (layout) στα έγγραφα. Για να γίνει αυτό, οι φυλλομετρητές επινόησαν καινούργια HTML tags, όπως για παράδειγμα το, τα οποία διέφεραν από τα αρχικά HTML tags καθώς όριζαν τη διάταξη και όχι τη δομή μιας ιστοσελίδας.

21 τι μπορούμε να κάνουμε με τα CSS τα CSS έχουν να κάνουν με γραμματοσειρές (fonts), με χρώματα (colours), με περιθώρια (margins), με εικόνες φόντου (background images) και με πολλά άλλα. Με την HTML θα δυσκολευτούμε να αλλάξουμε τη διάταξη των ιστοσελίδων μας, αλλά τα CSS προσφέρουν πολλές επιλογές και είναι πολύ πιο συγκεκριμένα στις λεπτομέρειες. Επιπλέον, υποστηρίζονται απ’ όλους τους φυλλομετρητές.

22 τι μπορούμε να κάνουμε με τα CSS Δυνατότητα για τον ταυτόχρονο έλεγχο της διάταξης (layout) πολλών εγγράφων από ένα μόνο φύλλο στυλ (style sheet). Πιο ακριβής έλεγχος της διάταξης (layout) των ιστοσελίδων. Εφαρμογή διαφορετικής διάταξης σε διαφορετικές εξόδους, όπως screen, print κ.ά. Αναρίθμητες προηγμένες και εξεζητημένες τεχνικές.

23 το βασικό μοντέλο των CSS : selector (επιλογέας) { property (ιδιότητα): value (τιμή); } selector property value Σε ποια tags Μια ιδιότητα Η τιμή της ιδιότητας, εφαρμόζεται είναι το χρώμα όπως π.χ. κόκκινο η ιδιότητα φόντου για το χρώμα φόντου (π.χ. body) (background color)

24 body { background-color: blue; } Γραψτε τα παραπανω στο σημειωματαριο και αποθηκεύστε ως test.css

25 Τροποποιήστε το test.html ωστε να χρησιμοποιεί το test.css Κύρια Ιστοσελίδα

26

27 javascript

28 28 Παραδείγματα

29 29 Παραδείγματα (2) Η συνάρτηση submit() είναι ορισμένη μέσα στο έγγραφο. Μπορεί να ελέγχει όλα τα πεδία μιας φόρμας. Παίρνουμε τα στοιχεία με συναρτήσεις getelementbyName(‘όνομα_πεδίου_φόρμας’).value()

30 30 Παραδείγματα (3) function submit () { var price = parseInt(document.testform.price_txtBox.value); if ( price < 0 ) { retval = false; } retrun retval; } … Price:

31 javascript var name=prompt("What's your name?") document.write("hello ",name)