Βασικά Web εργαλεία και τεχνολογίες Μάθημα 2 Βασικά Web εργαλεία και τεχνολογίες
XML Η XML (Extensive Markup Language) είναι ένα απλό, πολύ προσαρμοστικό σχηματισμός κειμένων. Αρχικά σχεδιασμένος για να αντιμετωπίσει τις προκλήσεις των μεγάλης κλίμακας ηλεκτρονικών εκδόσεων, η XML διαδραματίζει επίσης έναν όλο και περισσότερο σημαντικό ρόλο στην ανταλλαγή μιας ευρείας ποικιλίας στοιχείων όσον αφορά τον παγκόσμιο Ιστό και αλλού. Για τον λόγο αυτό η XML αποτελεί ένα από τα κύρια στοιχεία των WSs και χρησιμοποιείται τόσο στην διαμόρφωση των μηνυμάτων αποστολής και απάντησης των πελατών και των εξυπηρετητών, όσο και στην αποθήκευση δεδομένων και ρυθμίσεων των τεχνολογιών που διαχειρίζονται και φιλοξενούν τις εφαρμογές διαδικτύου. Ένα XML κείμενο έχει μια συγκεκριμένη μορφή και πρέπει να τηρεί αυστηρά αυτή την μορφή για να είναι έγκυρο. Οποιοδήποτε λάθος κατά την διαμόρφωση του XML θα προκαλέσει λάθη κατά την χρήση του ειδικά όταν χρησιμοποιείται σε WSs. Ωστόσο, κάθε τεχνολογία που χρησιμοποιεί το XML επιβάλει τα δικά της πρότυπα διαμόρφωσής του, τα οποία όμως είναι σύμφωνα με τις προδιαγραφές του. Τα XML τα χρησιμοποιούμε (θα το δούμε προς το τέλος του μαθήματος) μέσω ειδικών βιβλιοθηκών ….DOM
XML Ένα απλό παράδειγμα της γλώσσας XML για την περιγραφή ενός βιβλίου είναι το ακόλουθο. <? xml version=”1.0” encoding=”UTF-8”?> <book> <name>Digital Image Processing</name> <author>Gonzales and Woods</author> <publisher>Prentice Hall</publisher> <description> Basic and advanced techniques in digital image processing </description> </book> Οι λέξεις που περικλείονται από “ < > “ στοιχεία (elements). Κάθε στοιχείο πρέπει να ανοίγει και να κλείνει με ένα “ / “ χρησιμοποιώντας πάντα την ίδια λέξη. Τα στοιχεία που περιέχουν υποστοιχεία λέγονται κόμβοι (nodes). Το πρώτο στοιχείο στο έγγραφο λέγεται ρίζα (root element) εξαιρώντας το στοιχείο που δηλώνει τον τύπο του εγγράφου (<? xml version=”1.0” encoding=”UTF-8”?>). Η διαμόρφωση του XML εγγράφου γίνεται σε επίπεδα. Έτσι στο παραπάνω παράδειγμα το στοιχείο <book> είναι η ρίζα του εγγράφου και περιέχει τα στοιχεία παιδιά (child elements) <name>,<author>,<publisher> και <description>. Επίσης είναι και κόμβος και στοιχείο πατέρας (parent element).
HTML H HTML (HyperText Markup Language) περιέχει στοιχεία τα οποία αποτελούνται από ετικέτες (tags), οι οποίες περικλείονται μέσα σε σύμβολα <> Τα στοιχεία αυτά έχουν σαν στόχο την σύνταξη και μορφοποίηση κειμένου. Είναι δηλαδή μια γλώσσα που περιγράφει τον τρόπο που θέλουμε να εμφανίσει το κείμενο (μαζί φυσικά με εξωτερικά και ενσωματωμένα στοιχεία όπως εικόνες, βίντεο κλπ) Το χαρακτηριστικό του είναι η παρουσία υπερσυνδέσμων δηλαδή όλα τα στοιχεία αναπαρίσταται από την διεύθυνση τους στο διαδίκτυο (URL). Μέσω URLs μπορώ επίσης να μεταβώ σε άλλες σελίδες (link). Τέλος κάποια από τα tags αποτελούν κόμβους αλληλεπίδρασης και διάδρασης του χρήστη με την ιστοσελίδα.
Παράδειγμα <HTML> <div align="center"> <center> <table border="1" width="50%"> <tr> <td width="33%“><center>0</td> <td width="33%"><center>2</td> </tr> <td width="100%" colspan="3" bgcolor="#008080"> <form method="POST" action="example13.php3"> <center><p><input type="submit" value="Spin!"></p></center> </div> </form> </td> </table> </center></div> </HTML>
HTML Tag list <!DOCTYPE> Defines the document type <html> Defines an HTML document <title> Defines a title for the document <body> Defines the document's body <h1> to <h6> Defines HTML headings <p> Defines a paragraph <br> Inserts a single line break <hr> Defines a thematic change in the content <!--...--> Defines a comment <b> Defines bold text <form> Defines an HTML form for user input <input> Defines an input control <textarea> Defines a multiline input control (text area) <button> Defines a clickable button <select> Defines a drop-down list <option> Defines an option in a drop-down list <label> Defines a label for an <input> element <img> Defines an image <a> Defines a hyperlink <table> Defines a table <tr> Defines a row in a table <td> Defines a cell in a table ……………………………………. Source w3schools.com
HTML- Δομή του αρχείου <html> <head> <title>This is document title</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <p>Το site μας</p> </body> </html>
HTML-Επικεφαλίδα <head> <title>HTML Basic tags</title> <meta name="Keywords" content="HTML, HEAD" /> <meta name="description" content="HTML HEAD" /> <base href="http://www.mysite.gr" /> <link rel="stylesheet" type="text/css" href=“mystyle.css" /> <script type="text/javascript"> a javascript method here please!!!! </script> </head> Άλλα meta Ανανέωση ιστοσελίδας <meta http-equiv="refresh" content="10" /> Αλλαγές ιστοσελίδας <meta name="revised" content=«”revision details , 6/12/2006" /> redirection <meta http-equiv="refresh“ content="10; url=http://www.tutorialspoint.com" /> cookie <meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 28-Mar-14 20:00:00 GMT; /> author <meta name="author" content=“Me Me" />
Attributes id=“a value“ <p id=“Test">Attributes help in javascript programming also give certain values to parameters</p> title=“Hello“ style="font-family:arial; color:#FF0000;“ Τα tags είναι τα αντικείμενα και τα attributes είναι οι ιδιότητες τους
Attributes align right, left, center Horizontally aligns tags valign top, middle, bottom Vertically aligns tags within an HTML element. bgcolor numeric, hexidecimal, RGB values Places a background color behind an element background URL Places an background image behind an element id User Defined Names an element for use with Cascading Style Sheets. class User Defined Classifies an element for use with Cascading Style width Numeric Value Specifies the width of tables, images, or table cells. height Numeric Value Specifies the height of tables, images, or table title User Defined "Pop-up" title for your elements.
HTML Tags paragraph <p> Defines a paragraph <br> Inserts a single line break formatting <b> Defines bold text <em> Defines emphasized text <i> Defines a part of text in an alternate voice or mood <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text <mark> Defines marked/highlighted text comments <!-- Write your comments here -->
HTML Tags Links Bookmark <a id="tips">Useful Tips Section</a> Να μεταπηδήσω σε ένα bookmark <a href="#tips">Visit the Useful Tips Section</a> Link με bookmark σε άλλη σελίδα <a href=http://www.w3schools.com/html_links.htm#tips> click here</a> Image και image-map <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>
HTML Tags Tables <table border="1" style="width:300px"> < tr> <td>Jill</td> <td>Smith</td> <td>50</td> < /tr> <tr> < td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
HTML Tags <table> Defines a table <th> Defines a header cell in a table <tr> Defines a row in a table <td> Defines a cell in a table <caption> Defines a table caption <colgroup> Specifies a group of one or more columns in a table for formatting <col> Specifies column properties for each column within a <colgroup> element <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table Layout <div> Defines a section in a document (block-level) <span> Defines a section in a document (inline)
<!DOCTYPE html> <html> <body> <table width="500"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>Main Title of Web Page</h1> </td> </tr> <td style="background-color:#FFD700;width:100px;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript <td style="background-color:#eeeeee;height:200px;width:400px;"> Content goes here</td> <td colspan="2" style="background-color:#FFA500;text-align:center;"> Copyright © W3Schools.com</td> </table> </body> </html>
HTML Tags Εισαγωγή ανεξάρτητης σελίδα σε σελίδα…. <iframe> Defines an inline frame <iframe src="http://www.w3schools.com"> <p>Your browser does not support iframes.</p> </iframe>
CSS CSS σημαίνει Cascading Style Sheets Τα CSS ορίζουν τον τρόπο εμφάνισης των στοιχείων της HTML Τo CSS προστέθηκαι στην HTML 4.0 για να λύσει το πρόβλημα της κοινής εμφάνισης των ιστοσελίδων ενός site Το εξωτερικό Style Sheet μπορεί να μας γλιτώσει από πολλή δουλειά αφού κάθε σελίδα που το υιοθετεί ακολουθεί τους κανόνες που περιγράφει και άρα οι εμφάνισης της μοιάζει με όλες τις άλλες. Στο site που έχουμε βάλει style sheet όταν θέλουμε να αλλάξουμε την εμφάνιση ενός HTML αντικειμένου που υπάρχει σε όλες τις σελίδες τότε αντί να κάνουμε την αλλαγή σε όλες τις σελίδες μπορούμε απλά να αλλάξουμε τις ιδιότητες αυτού του αντικειμένου στο style sheet. Τα εξωτερικά Style Sheets αποθηκεύονται σε αρχεία CSS Με το tag <Style> μπορούμε να τροποποιήσουμε ή να εισάγουμε style σε μια ιστοσελίδα (εσωτερικά). Σε αυτή την περίπτωση χάνουμε όμως το πλεονέκτημα της χρηστικότητας που έχει ως εξωτερικό. Συντακτικό: Selector { Declaration; Declaration; Declaration;…….) body {background-color:yellow;}
Παράδειγμα CSS body {background-color:tan;} h1 {color:maroon;font-size:20pt;} p {font-size:11pt;margin-left:15px;} a:link {color:green;} a:visited {color:yellow;} a:hover {color:black;} a:active {color:blue;} ...............class .center {text-align:center;} ……id #id1 { text-align:center; color:red; } Πηγή διαβάσματος w3school.com
Client side προγραμματισμός Τα προγράμματα αυτά εκτελούνται στον browser. Έχουν σαν στόχο τη διαμόρφωση της ιστοσελίδας στη πλευρά του χρήστη και συχνά αυτή η διαμόρφωση γίνεται με επιλογές του χρήστη. Σήμερα ο client side προγραμματισμός είναι δυναμικός, πολύ ισχυρά διαδεδομένος και συμπληρώνει τις δυνατότητες που προσφέρει ο server side δυναμικός προγραμματισμός. Επίσης με τη χρήση κατάλληλων API στην Javascript (που είναι και η πιο διαδεδομένη γλώσσα) μπορούμε να ενημερώνουμε την ιστοσελίδα μας με απομακρυσμένα στοιχεία. Για αυτά θα μιλήσουμε αργότερα όταν θα δουλέψουμε στο HTML5 HTML + Javascript WEB SERVER Get www.mysite.gr/index........
JavaScript Το JavaScripts εισάγεται ανάμεσα στα <script> </script> tagsκαι μπορεί να μπει είτε στο <body> είτε στο <head> της HTML. Για να χρησιμοποιήσουμε ένα HTML element με την JavaScript, θα χρησιμοποιούμε την document.getElementById(id) method. Όπου "id" είναι το attribute που υπάρχει σε όλα τα element του HTML. H javascript είναι case sensitive <html> <body> <h1>My Test in ID with javascript</h1> <p id="myID">Test ID</p> <script> elem = document.getElementById("myID"); elem.innerHTML = "This is a test in javascript ID"; </script> </body> </html> Παραδείγματα w3schools.com
JavaScript <html> <body> <p id="p1">Hello World!</p> <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; </script> <p>The paragraph above was changed by a script.</p> </body> </html> Παραδείγματα w3schools.com
JavaScript Η Javascript γραμμές μπορούν να συντάσσονται μεμονωμένες τρόπος που δεν είναι «όμορφος» είναι όμως «γρήγορος» αλλά δεν είναι σωστό να το υιοθετούμε σε μεγάλη κλίμακα είτε σε μορφή συνάρτησης την οποία καλούμε όταν την χρειαζόμαστε (αυτό να κάνετε !!!)
ΛΑΘΟΣ <html> <body> <h1>My Web Page</h1> <p id="myPar">I am a paragraph.</p> <div id="myDiv">I am a div.</div> <p> <button type="button" onclick="myFunction()">Try it</button> </p> <script> function myFunction() { document.getElementById("myPar").innerHTML="Hello Dolly"; document.getElementById("myDiv").innerHTML="How are you?"; } </script> <p>When you click on "Try it", the two elements will change.</p> </body> </html> ΛΑΘΟΣ <html> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph.</p> <div id="myDIV">A DIV.</div> <script> // Ο Λάθος τρόπος document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?"; /* με τον κώδικα αυτόν Μπορούμε να γράψουμε στην ιστοσελίδα Αλλά με τρόπο όχι κομψό */ </script> </body> </html> Παραδείγματα w3schools.com
JavaScript Examples String Date <script> function myFunction() { var str="Hello World!"; var n=str.length; document.getElementById("demo").innerHTML=n; } </script> String <script> var d=new Date(); document.write(d); </script> Date Παραδείγματα w3schools.com
JavaScript Examples Arrays <script> var i; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (i=0;i<mycars.length;i++) { document.write(mycars[i] + "<br>"); } </script> Arrays Παραδείγματα w3schools.com
JavaScript Examples <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; function myFunction() { fruits.pop(); var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> <script> function myFunction() { var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2,0,"Lemon","Kiwi"); var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> Παραδείγματα w3schools.com
JavaScript Examples Call a function with arguments <button onclick="myFunction('Harry Potter','Wizard')">Try it</button> <script> function myFunction(name,job) { alert("Welcome " + name + ", the " + job); } </script> Call a function with arguments Παραδείγματα w3schools.com
JavaScript Examples On mouse over event <script> function writeText(txt) { document.getElementById("desc").innerHTML=txt; } </script> </head> <body> <img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape ="rect" coords ="0,0,82,126" onmouseover="writeText('The Sun and the gas giant planets like Jupiter are by far the largest objects in our Solar System.')" href ="sun.htm" target ="_blank" alt="Sun" /> </body> </HTML> On mouse over event Παραδείγματα w3schools.com
JavaScript Examples Document object <button onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("demo").innerHTML=Math.round(2.5); } </script> Document object Παραδείγματα w3schools.com
JavaScript Examples Document object <script> document.write("<h1>Hello World!</h1>"); </script> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var x = document.getElementById("demo"); x.innerHTML=document.domain; } </script> Παραδείγματα w3schools.com
JavaScript Examples button onclick="myFunction()">Try it</button> <script> function myFunction() { alert("I am an alert box!"); } </script> Παραδείγματα w3schools.com
Διάβασμα http://www.w3schools.com/js/default.asp JavaScript Basic Examples JavaScript Objects Examples JavaScript HTML DOM Examples JavaScript Browser Objects Examples