Κατέβασμα παρουσίασης
Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε
1
ΕΦΑΡΜΟΓΕΣ ιστου (Web Applications)
2016 Καθ. Γ. Βούρος - Δρ. Κ. Κώτης –
2
Περιεχομενο διαλεξεων 1-5
Εισαγωγή στην HTML, βασικές εντολές, παραδείγματα προγραμματισμού σε HTML, εισαγωγή στο CSS Χρήση του cms WordPress: κατασκευή ιστότοπου, ιστοσελίδων Εισαγωγή στην XML, βασικά χαρακτηριστικά δομής XML εγγράφων, εμφάνιση εγγράφων XML με τη χρήση CSS Δημιουργία έγκυρων XML εγγράφων (DTD, XML Schema or XSD) Εμφάνιση εγγράφων XML με χρήση XSL (Style Sheets for XML) Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
3
αξιολογηςη Συμμετοχή στο μάθημα (Online παραδείγματα από τα W3C Schools tutorials) Και στις 5 διαλέξεις Εργασία HTML/CSS (WordPress) μετά την διάλεξη 2 Εργασία XML/DTD-XSD/XSL μετά την διάλεξη 5 2/3 στο βαθμό του μαθήματος Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
4
Εισαγωγή 2016 Δρ. Κ. Κώτης
5
Internet Παγκόσμιος ιστός World-Wide Web (WWW)
ένα σύστημα αναζήτησης υπερμεσικών πληροφοριών (hypermedia information) ιστοσελίδες (web pages) υπερμέσα (hypermedia) σύνδεσμοι (links) εξυπηρετητές (servers), και περιηγητές (browsers) Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
6
Η αρχή ... Tim Berners-Lee HYPERTEXT PROJECT 1989
CERN: Conseil European pour la Recherche Nucleaire Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
7
Η ιςτορια του WWW Το WWW ξεκίνησε το 1989 από το Ευρωπαϊκό Κέντρο Πυρηνικών Ερευνών, (CERN) στην Ελβετία. Βασικός του σκοπός ήταν να προσφέρει στους επιστήμονες ένα μέσο προκειμένου να ανταλλάσσουν στοιχεία επιστημονικά δεδομένα και μελέτες, μέσω του διαδικτύου. Η όλη προσπάθεια στηρίχτηκε στην υλοποίηση ενός μέσου που θα επιτρέπει τη σύνδεση μεταξύ διαφορετικών εγγράφων. Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
8
Αρχικα … Το πρώτο λογισμικό ΙΣΤΟΥ δημιουργήθηκε τον Οκτώβριο 1990
Το πρώτο λογισμικό ΙΣΤΟΥ δημιουργήθηκε τον Οκτώβριο 1990 Καλοκαίρι 1991 το CERN διέθεσε το λογισμικό στη διεθνή κοινότητα Ηλεκτρονικά "έγγραφα" με συνδέσεις με άλλα αντικείμενα. Hyperlinks = Συνδέσεις HyperText Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
9
Η ιςτορια του WWW Το μέσο αυτό ονομάστηκε υπερκείμενο(Hyper text)
Το 1994 κατασκευάστηκε το πρόγραμμα Mosaic, το οποίο έδινε τη δυνατότητα στους χρήστες να προσπελαύνουν τις πληροφορίες που ήταν διαθέσιμες στο WWW με γραφικό τρόπο. Στα επόμενα χρόνια το WWW έγινε το απόλυτο μέσο αναζήτησης πληροφοριών για εκατομμύρια χρήστες του διαδικτύου. Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
10
HTML Οι σελίδες WEB δημιουργούνται χρησιμοποιώντας μία γλώσσα που λέγεται Hypertext Markup Language, ή HTML O όρος markup language δηλώνει ότι τα πρωτόγονα σύμβολα της γλώσσας έχουν τη μορφή των tags (ετικέτες), τα οποία βάζουμε σε ένα κείμενο για την επισημείωση (annotation, markup) της πληροφορίας που είναι αποθηκευμένη σε αυτό. Τα tags δείχνουν το πώς η πληροφορία θα πρέπει να εμφανιστεί. Π.χ. μέγεθος, χρώμα, στυλ γραμματοσειράς παράγραφος, εικόνα, λίστα από κουκκίδες, κλπ. Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
11
HTML HTML = HyperText-Markup Language
HTML: Γλώσσα προγραμματισμού που λέει στον web browser τι πληροφορίες να προβάλει και πώς Πώς να εντοπίσει αρχεία με κείμενο, ήχο, γραφικά, video ή multimedia Πώς να τα εμφανίσει στην ιστοσελίδα Δημιουργία ιστοσελίδων με HTML ή με χρήση web authoring εργαλείων όπως FrontPage (Intermediate Level), Dreamweaver (Advanced) WordPress (cms) Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
12
HTML H HTML δεν είναι γλώσσα προγραμματισμού που στηρίζεται σε διαδικασίες-ρουτίνες όπως η Pascal, C ή η Fortran Αρχεία που περιέχουν κώδικα HTML έχουν την κατάληξη .htm ή .html Σε αντίθεση με άλλες γλώσσες προγραμματισμού τα λάθη που συμβαίνουν στο κώδικα της ΗΤΜL δεν είναι καταστροφικά – Fatal Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
13
HTML ςελιδα Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων
8/23/2018
14
HTML κειμενο Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων
8/23/2018
15
Markup Languages Ο όρος Markup αναφέρεται σε ένα σύνολο από ενδείξεις / παρατηρήσεις που αναφέρονται και περιγράφουν τα δεδομένα ενός κειμένου Πρόκειται για οδηγούς στο τρόπο με τον οποίο πρέπει να ερμηνευτούν τα περιεχόμενα του κειμένου Μια συλλογή τέτοιων ενδείξεων, που ακολουθούν καθορισμένο συντακτικό και γραμματική, μπορεί να θεωρηθεί γλώσσα Μία Markup γλώσσα προσδίδει πληροφορία για τα περιεχόμενα ενός κειμένου Οι Markup Languages είναι μια μέθοδος για να δημιουργούμε μεταδεδομένα (metadata) Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
16
Markup Languages To 1969 η ΙΒΜ κατασκεύασε την GML (Generalized Markup Language – Γενικευμένη Γλώσσα Σήμανσης), την πρώτη «σύγχρονη» markup γλώσσα Από τη GML προήλθε η SGML (Standard Generalized Markup Language – Πρότυπη Γενικευμένη Γλώσσα Σήμανσης) η οποία το έγινε ISO standard για αποθήκευση και ανταλλαγή δεδομένων Το 1991 όταν αναπτύχθηκε η HTML (HyperΤext Markup Language – Γλώσσα Σήμανσης Υπερκειμένου) αποτέλεσε μια εφαρμογή της SGML Η ταχύτατη ανάπτυξη του Web και οι περιορισμένες δυνατότητες της HTML γέννησαν την XML (Extensible Markup Language – Επεκτάσιμη Γλώσσα Σήμανσης στα τέλη των ’90s. Ο Σημασιολογικός Ιστός (Web 3.0), μια επέκταση του σημερινού Ιστού, που φέρει δομή στο ουσιαστικό περιεχόμενο των ιστοσελίδων, βασίζεται σε τεχνολογίες που ήδη υπάρχουν (URI και XML) αλλά και σε νέες τεχνολογίες (RDF, RDFS, OWL). Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
17
HTML5 2016 Δρ. Κ. Κώτης
18
W3C School tutorial http://www.w3schools.com/default.asp (γενικά)
(html5) (Styling HTML with CSS) This HTML tutorial contains hundreds of HTML examples. With the online HTML editor, you can edit the HTML, and click on a button to view the result. At the end of the HTML tutorial, you can find more than 200 examples. With our online editor, you can edit and test each example yourself. Go to HTML Examples! Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
19
HTML Introduction What is HTML?
HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements are the building blocks of HTML pages HTML elements are represented by tags HTML tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page … Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
20
HTML Editors Write HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML. Follow the four steps below to create your first web page with Notepad or TextEdit. … Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
21
HTML Basic Examples HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>. … Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
22
HTML Elements http://www.w3schools.com/html/html_elements.asp
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
23
HTML Attributes http://www.w3schools.com/html/html_attributes.asp
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
24
HTML Headings http://www.w3schools.com/html/html_headings.asp
HTML Attributes Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
25
HTML Paragraphs http://www.w3schools.com/html/html_paragraphs.asp
HTML Attributes Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
26
HTML Styles http://www.w3schools.com/html/html_styles.asp
HTML Attributes Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
27
HTML Text Formatting http://www.w3schools.com/html/html_formatting.asp
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
28
HTML Comment Tags http://www.w3schools.com/html/html_comments.asp
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
29
HTML Colors http://www.w3schools.com/html/html_colors.asp
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
30
HTML Styles - CSS http://www.w3schools.com/html/html_css.asp
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
31
HTML Styles - CSS http://www.w3schools.com/html/html_css.asp
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
32
HTML Styles - CSS http://www.w3schools.com/html/html_css.asp
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
33
HTML Styles - CSS http://www.w3schools.com/html/html_css.asp
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
34
HTML Styles - CSS http://www.w3schools.com/html/html_css.asp
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
35
HTML Links http://www.w3schools.com/html/html_links.asp
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
36
HTML Images http://www.w3schools.com/html/html_images.asp
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
37
HTML Tables http://www.w3schools.com/html/html_tables.asp
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
38
HTML Lists http://www.w3schools.com/html/html_lists.asp
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
39
HTML Block and Inline Elements
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
40
HTML The class Attribute
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
41
HTML Iframes http://www.w3schools.com/html/html_iframe.asp
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
42
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων
8/23/2018
43
Thank You! kotis_konstantinos (+30) 6974822712
Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018
Παρόμοιες παρουσιάσεις
© 2024 SlidePlayer.gr Inc.
All rights reserved.