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

Slides:



Advertisements
Παρόμοιες παρουσιάσεις
Οδηγός δημιουργίας ιστολογίου στο blogger.com
Advertisements

Τεχνολογίες Web Απαραίτητες γνώσεις για την υλοποίηση της άσκησης.
Τεχνικές Προγραμματισμού με την JavaScript Στυλιάδης Κων/νος Φλώρινα, Οκτώβριος 2004.
Να περιγράψετε τους 2 τρόπους οργάνωσης Ιστοσελίδων
Προγραμματισμός Διαδικτύου Δρ. Παναγιώτης Συμεωνίδης Διεπαφή Εφαρμογής Παγκόσμιου Ιστού (Front End Programming)
Επιμέλεια: Δέγγλερη Σοφία
5η Συνάντηση Εκπαιδευτικών Πληροφορικής στη Δυτική Μακεδονία Πτολεμαΐδα, 29 Σεπτ 2005 Δημιουργία Δυναμικών Ιστοσελίδων με PHP και Dreamweaver MX Στυλιάδης.
Η γλώσσα μορφοποίησης υπερκειμένου HTML
Δ.Π.Θ. Επεξεργασία Κειμένου - 1 Επεξεργασία Κειμένου Ένα πρόγραμμα σε γλώσσα HTML είναι ανεξάρτητο της μηχανής όπου θα εκτελεστεί. Δηλαδή αγνοούνται τα.
Copyright ©: SAMSUNG & Samsung Hope for Youth. Με επιφύλαξη κάθε νόμιμου δικαιώματος Εκπαιδευτικό υλικό Λογισμικό: Δημιουργία εφαρμογών Επίπεδο.
Οδηγός δημιουργίας ιστολογίου στο blogger.com
HTML.
Σχεδιαστικά εργαλεία Διαχείριση σελίδων Βιβλιοθήκες αντικειμένων Διαχείριση αντικειμένων Επιφάνεια ψηφιακής μελάνης Πληκτρολόγιο οθόνης ΟΦΕΛΗ Αναγνώριση.
Copyright ©: SAMSUNG & Samsung Hope for Youth. Με επιφύλαξη κάθε νόμιμου δικαιώματος Εκπαιδευτικό υλικό Λογισμικό: Επεξεργασία κειμένου Επίπεδο.
Επιμέλεια: Δέγγλερη Σοφία
Ανοικτά Ακαδημαϊκά Μαθήματα
Πάντειο Πανεπιστήμιο Κοινωνικών και Πολιτικών Επιστημών ΠΜΣ Δυνητικές κοινότητες Μάθημα: Εισαγωγικά Θέματα W.W.W. CSS CASCADING STYLE SHEETS ΑΠΟΔΟΣΗ ΕΚΦΡΑΣΤΙΚΟΥ.
CSS Cascading Style Sheets
Κείμενο – ASCII – Unicode - HTML Κωδικοποίηση ASCII / Unicode HTML
ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis Φόρμες Δημιουργία Περιεχομένου Ι.
Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία. Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι.
Δημιουργία Παρουσίασης
Ιστοσελίδες -- Web-site. Εισαγωγή Στατικές ιστοσελίδες Δυναμικές ή Διαδραστικές ιστοσελίδες:  Ο τρόπος παρουσίασης και τα περιεχόμενά της ιστοσελίδας.
Τα Διαδοχικά Φύλλα Στυλ CSS
PHP/MYSQL ΠΑΡΟΥΣΙΑΣΗ ΣΤΑ ΠΛΑΙΣΙΑ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΕΠΟΙΚΟΙΝΩΝΙΑ ΑΝΘΡΩΠΟΥ-ΜΗΧΑΝΗΣ ΤΥΡΟΛΟΓΟΥ ΓΛΥΚΕΡΙΑ ΑΜ 875 ΡΙΖΟΥ ΔΕΣΠΟΙΝΑ ΑΜ 816.
Επικοινωνία Ανθρώπου Μηχανής HTML CGI JAVASCRIPT Κουμπούλης Χρήστος Α.Μ. 921 Χαλαβαζής Βασίλης Α.Μ. 988.
Η Γλώσσα Σήμανσης ΥπερΚειμένου HTML
Εκπαιδευτικό μάθημα Διεξαγωγή Προηγμένης αναζήτησης στο EBSCOhost Πεδία εύρεσης βάσει οδηγιών
CSS – Cascading Style Sheets (Φύλλα επάλληλων στυλ) Κανόνες που καθορίζουν τη μορφή και τη διάταξη των στοιχείων των σελίδων (X)HTML Σκοπός είναι ο διαχωρισμός.
Applets Εκμεταλλεύονται τo γραφικό υπόβαθρο που παρέχουν οι browsers, έχοντας έτσι τη δυνατότητα προβολής γραφικών και τη δυνατότητα υλοποίησης ενός γραφικού.
CSS – Cascading Style Sheets (Το μοντέλο box) Κάθε στοιχείο της HTML περιέχεται σε ένα “κουτί” (box). Το μοντέλο box μας βοηθάει στο σχεδιασμό της ιστοσελίδας.
1Κεφάλαιο 4 Κανόνες Σύνταξης HTML Όλες οι ετικέτες εσωκλείονται μεταξύ των χαρακτήρων “ “. Κάθε τι που βρίσκεται μεταξύ των χαρακτήρων “ ”, αποτελεί σχόλιο.
Adobe Dreamweaver Καριπίδης Πέτρος Α.Μ. 767 Τσολάκης Κωνσταντίνος Α.Μ. 840.
HTML-PHP Καμπέρης Άρης Α.Μ. 763 Zaher Owda Α.Μ. 849.
Εφαρμογές Πολυμέσων: Εισαγωγή στην HTML (1)
HTML 3. Στόχος της ώρας Απαιτήσεις XHTML 1.0 Strict Ιδιότητα title HTML Entities Ετικέτα label Favicon «Κακές» ιδιότητες Παραδείγματα.
Ο Παγκόσμιος ιστός World Wide Web (WWW) Είναι μια υπηρεσία του Internet ΠΡΟΣΟΧΗ μην την ταυτίζουμε με το ιντερνέτ Αποτελείται από εκατομμύρια ιστοσελίδες.
Μπόλαρη Αγγελικη(1451) Επιβλέπων Βολογιαννίδης Σταύρος ΑΤΕΙ ΣΕΡΡΩΝ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΚΩΝ ΕΦΑΡΜΟΓΩΝ ΤΜΗΜΑ ΠΛΗΡΟΦΟΡΙΚΗΣ & ΕΠΙΚΟΙΝΩΝΙΩΝ Σέρρες 2013.
Και η εκπαιδευτική τους χρήση.  Web 2.0 τεχνολογίες, εφαρμογές και υπηρεσίες  Δημιουργία μαθημάτων με τη χρήση εργαλείων Web 2.0, διαδικτύου – σύγκριση.
Προγραμματιστικά Εργαλεία για το Διαδίκτυο Κατασκευή Ιστοσελίδων 3 ο Κεφάλαιο Βελώνης Γεώργιος – Καθηγητής Πληροφορικής ΠΕ20.
Παπαδημητρίου Δημήτριος Σιμώνης Εμμανουήλ Επιβλέπων καθηγητής: Δρ. Τσιμπίρης Αλκιβιάδης 1.
ΠΛΗΡΟΦΟΡΙΚΗ Ι Τμήμα Λογιστικής ΤΕΙ Κρήτης Γιάννης Χρυσάκης
ΥΠΟΛΟΓΙΣΤΙΚΕΣ ΤΕΧΝΙΚΕΣ ΓΙΑ ΣΥΣΤΗΜΑΤΑ ΜΕΤΑΔΟΣΗΣ ΠΛΗΡΟΦΟΡΙΑΣ Αντικειμενοστραφής προγραμματισμός Web Site: ΕΘΝΙΚΟ ΜΕΤΣΟΒΙΟ.
HTML/CSS: Εισαγωγή Θερινό Σχολείο, 14 – 20 Ιουλίου 2014 Γιώργος Φουρτούνης Μονάδα Αριστείας ΕΛ/ΛΑΚ ΤΕΙ Αθήνας.
ΔΗΜΙΟΥΡΓΙΑ ΙΣΤΟΣΕΛΙΔΩΝ Ένας Συνοπτικός Οδηγός Καμήλαλη Δέσποινα Μαθηματικός, MSc Πληροφορικής, Υποψήφια Διδάκτωρ Χαροκοπείου Πανεπιστημίου Αθηνών.
ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΣΕΡΡΩΝ
ΠΛΗΡΟΦΟΡΙΚΗ Ι Ενότητα # 10: Εισαγωγή στο Ms Powerpoint Τμήμα Ιστορίας
Wikis Ο Cunningham εμπνεύστηκε τον όρο wiki από τα "wiki wiki", δηλαδή τα "γρήγορα" λεωφορεία πυκνών δρομολογίων στον αερολιμένα της Χονολουλού.
Εργασία στο μάθημα «Προγραμματισμός ΙΙ»
ΔΙΑΔΙΚΤΥΟ, WEB2.0 KAI WEB X Από τον WEB 1.0 στον WEB X.0
Web, Web 2.0, Web 3.0 και Web X.0 ΚΕΦΑΛΑΙΟ 9.
Κεφάλαιο 6o. Επίπεδο εφαρμογής
Κεφαλαιο 11 ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML.
Υπηρεσίες του διαδικτύου
Google docs Google docs forms
Εφαρμογές Πληροφορικής Κεφάλαιο 11
HTML - CSS Δίνεται παρακάτω ο κώδικας HTML μιας ιστοσελίδας
Εισαγωγή στην HTML ΚΕΦΑΛΑΙΟ 11.
Εισαγωγή στην HTML Κεφάλαιο 11.
Διαδικτυακό σκάκι Χριστόφορος Παναγιωτούδης ΑΕΜ: 3209
ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΗΣ ΣΕ ΔΙΑΔΙΚΤΥΑΚΗ ΠΛΑΤΦΟΡΜΑ
Microsoft Word.
Συγγραφέας: Ζαγκότας Στεφανος Επιβλέπων Καθηγητής: Ούτσιος Ευάγγελος
Οδηγός δημιουργίας ιστολογίου στο blogger.com
Εισαγωγή στην HTML ΚΕΦΑΛΑΙΟ 11.
ΕΝΟΤΗΤΑ 3 – Επικοινωνία και Διαδίκτυο Κεφάλαιο 11-Εισαγωγή στην HTML
Φόρμες Φόρμες χρησιμοποιούνται για να δημιουργήσουμε ένα φιλικό περιβάλλον για την διαχείριση των δεδομένων της βάσης. Επίσης δίνεται η δυνατότητα δημιουργίας.
Λογισμικό Εφαρμογών/Επεξεργασία Κειμένου
Κεφάλαιο 11 Τροποποίηση φόρμας.
Διδάσκων: Χρήστος Κατσάνος
Μεταγράφημα παρουσίασης:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS 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 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 Bible/Tutorials-CSS-Bible-1.html Bible/Tutorials-CSS-Bible-1.html

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

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

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

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

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

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

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

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

javascript

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

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

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

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