Βάσεις Δεδομένων Κωδικός Μαθήματος: MK741 Είδος Μαθήματος: Επιλογής-Εργαστηριακό Εξάμηνο: 7o Διδάσκων: Κοντογιάννης Σωτήριος Email: skontog@gmail.com, skontog@cc.uoi.gr
HTML Η HTML δεν είναι μια γλώσσα προγραμματισμού. Είναι μια γλώσσα σημειώσεων Αν θέλουμε να εμφανιστεί στην οθόνη το κείμενο this is in italics σε πλαγιαστά γράμματα γράφουμε : <I>this is in italics</I> Τα <I> , </I> λέγονται marks, ή tags (ετικέτες) Ο καλός προγραμματιστής πρέπει να γνωρίζει πιο tags κάνει τί. Επειδή η HTML είναι μια γλώσσα tag-oriented αρκεί ένας απλός ASCII διορθωτής κειμένου, για τη δημιουργία HTML σελίδων π.χ. o Notepad (Microsoft) ή ο vi/nano σε UNIX
Ένα απλό παράδειγμα <HTML> <HEAD> <TITLE>A Simple Sample HTML document </TITLE> </HEAD> <BODY> <H1>Welcome to the World of HTML</H1> <HR> HTML documents can be as simple as this Web page, which consists of just asingle page of <B>text</B> and <I>links</I>, or as complex as a 10,000 page corporate intranet site replete with Java applets and CGI data base access. <P>In this book, we'll explore the possibilities of HTML, but we'll also check out what can be done by adding other elements to your documents. <P>Click <A HREF="sample.htm">HERE</A> to reload this page!<P> </BODY> </HTML>
Αν σώσουμε αυτό το κείμενο με όνομα test Αν σώσουμε αυτό το κείμενο με όνομα test.html και το ανοίξουμε με κάποιο φυλλομετρητή (Web browser ) θα δούμε την εικόνα:
Εμφάνιση της σελίδας στο WWW Αν θέλουμε να εμφανίσουμε τη σελίδα αυτή στο World Wide Web, θα πρέπει να τη φορτώσουμε σε ένα ISP (Internet service provider = Πάροχος Υπηρεσιών Internet). Ένας ISP είναι ο υπολογιστής kalipso.math.uoi.gr Αν μετονομάσουμε το αρχείο test.html σε index.html και το μεταφέρουμε με τη βοήθεια του FTP τότε η ανάγνωση της σελίδας από το Internet μπορεί να γίνει γράφοντας: http://kalipso.math.uoi.gr/~loginname
Διαθέσιμα προγράμματα δημιουργίας και συντήρησης ιστοσελίδων Aptana, for build web applications quickly and easily : http://www.aptana.com/ Bluefish supports many programming and markup languages: http://bluefish.openoffice.nl/index.html W3C's Editor/Browser (Amaya) : http://www.w3.org/Amaya/ NVU - Finally! A complete Web Authoring System for Linux Desktop, Microsoft Windows and Macintosh users: http://www.nvu.com/ SeaMonkey project is a all-in-one internet application suite: http://www.seamonkey-project.org/ NetBeans IDE (http://spooky.math.uoi.gr/directory/Baseis_Dedomenon/IDE/) Geany IDE – IDE for PHP/HTML(http://www.geany.org)
Εισαγωγή στην HTML Η γενική μορφή μιας HTML ετικέτας είναι: <tag_name>Σώμα κειμένου</tag_name> ΣΗΜΕΙΩΣΗ: Είναι το ίδιο για τον web browser εάν βάλετε κεφαλαία ή μικρά. Για παράδειγμα, <h3>...</h3> δεν διαφέρει απο το <H3>...</H3> Εάν κάνετε κάποιο τυπογραφικό λάθος στην HTML, δεν θα κρεμάσει το σύστημα αλλά θα εμφανίσει λάθος την ιστοσελίδα σας. Αυτό που έχετε να κάνετε είναι να μπείτε μέσα στην HTML και να διορθώσετε το λάθος. Το ενδιαφέρον θέμα της HTML είναι ότι αν ο browser δεν καταλαβαίνει τι να κάνει με την ετικέτα, την αγνοεί. Για παράδειγμα, στο παρακάτω έγγραφο, η ετικέτα wiggle: <wiggle><h3>Τι είναι οι ετικέτες της HTML;</h3></wiggle> O browser δεν αναγνωρίζει την ετικέτα <wiggle>, συνεχίζει με αυτά που αναγνωρίζει.
Δομή της HTML (1) Η βασική δομή μιας σελίδας HTML είναι η εξής: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <!-- Το head περιέχει πληροφορίες που αφορά το αρχείο και δεν εμφανίζεται στην οθόνη. --> <meta charset="UTF-8"> </head> <body> <!-- η HTML που θα εμφανιστεί --> : : </body> </html>
Δομή της HTML- Meta TAGS 1. Ορισμού λέξεων κλειδιών που χρησιμοποιούν οι μηχανές αναζήτησης: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> 2. Ορισμού περιγραφής της σελίδας: <meta name="description" content="Free Web tutorials on HTML and CSS"> 3. Ορισμού Συγγραφέα: <meta name="author" content="Hege Refsnes"> 4. Αυτόματη ανανέωση σελίδας: <meta http-equiv="refresh" content="30"> 5. Ορισμός κωδικοποίησης γραμματοσειράς: <meta charset="UTF-8">
Δομή της HTML (2) Όλη η HTML περιέχεται μέσα στην <html>...</html> ετικέτα. Μέσα σε αυτή περιέχονται η <head>...</head> και μετά η <body>...</body> Η πρώτη γραμμή <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> δεν είναι τεχνικά απαραίτητη αλλά είναι ένας κώδικας που λέει στον browser για ποιά έκδοση της HTML είναι γραμμένη η συγκεκριμένη σελίδα. – Αντικαθίσταται από <!doctype html> (HTML 4.X 5.X SGML style). Επίσης σημειώνουμε ότι τα σχόλια περιέχονται μέσα στα <!-- διάφορα σχόλια --> Καταγραφή ημερομηνιών τροποποίησης με meta tags στην επικεφαλίδα: <meta name="content_origin" content="2005-04-02"> <meta name="content_updated" content="2005-04-02"> <meta name="minor_updates" content="2005-04-02; 2005-05-09; 2009-09-21">
Δομή της HTML (3) Oρίζουμε ώς κωδικοποίηση χαρακτήρων την Unicode κωδικοποίηση <meta charset="UTF-8"> Ορίζουμε περιγραφή της σελίδας και λέξεις κλειδιά: <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> Ορίζουμε εικονίδιο και τίτλο: <title> Ο τίτλος μου </title> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> Το favicon.ico πρέπει να υπάρχει σε διαστάσει 16x16 ή 32x32 px. Οι γραμματοσειρές μετριούνται σε pt (ποιντς), oi εικόνες σε Pixels (px). Επιπρόσθετα υπάρχει αντιστοιχία μεταξύ pt και px. 12pt=16px (1px=0.75pt) 1 pt is 1/72 of an in, and a px is 1/96 of an in
Bασικά HTML tags (4) <hN>Κείμενο Τίτλου</hN> όπου Ν είναι ένα νούμερο από το 1 μέχρι το 6 και ορίζει το μέγεθος της επικεφαλίδας
Bασικά HTML tags (5) Ο web browser αγνοεί όλα τα κενά από το πάτημα του ENTER μέσα στο κείμενο. Για αυτό το λόγο, η HTML έχει ετικέτα για την τοποθέτηση μιας παραγράφου. Αυτή η ετικέτα λέει στον browser να αφήσει μία κενή γραμμή. Ο κώδικας είναι ο ακόλουθος: <p> Η ετικέτα της παραγράφου, δεν χρειάζεται ετικέτα τέλους όπως οι άλλες: </p>
HTML ΛΙΣΤΕΣ (1) Λίστες: Μη Αριθμημένες Λίστες (Unordered) Αυτές οι λίστες εμφανίζουν αντικείμενα με "βούλες" ή με άλλες μάρκες στην αρχή του κειμένου. Λέγονται <ul> .. </ul> ετικέτες στον κώδικα της HTML. Δείτε το παρακάτω παράδειγμα: Αριθμημένες λίστες (Ordered) Οι τακτοποιημένες λίστες είναι αυτές που τα αντικείμενα ξεκινούν με το "1.". Η μόνη διαφορά στην ετικέτα είναι οτι αλλάζει μόνο το ul σε ol.
HTML ΛΙΣΤΕΣ (2) Ένθετες λίστες Οι αριθμημένες και οι μη αριθμημένες λίστες, μπορούν να έχουν διαφορετικά επίπεδα. Η κάθε μία, μπορεί να κάνει υπο-επίπεδα μέσα στη λίστα, με άλλες λίστες (βλέπε παράδειγμα). Το μείζων θέμα είναι η επαλήθευση της κάθε λίστας ώστε να τελειώνει σωστά και να είναι σωστή η ένωση. Μπορείτε να ξεκινήσετε με μια πολύπλοκη ματιά με αυτές τις ετικέτες <ol> <li> </ul> <li>, αλλά θυμηθείτε τη βασική δομή:
HTML ΛΙΣΤΕΣ (3) Ένθετες λίστες -- μεταξύ των δύο Δεν μπορείτε μόνο να περιλαμβάνετε αριθμημένες με αριθμημένες, αλλά και τους δύο τύπους ταυτόχρονα.
HTML ΛΙΣΤΕΣ (4) Ιδιότητες λιστών: <ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
HTML ΛΙΣΤΕΣ (5) Ιδιότητες λιστών: <ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Περιγραφικές Λίστες: H HTML έχει τη δυνατότητα απεικόνισης και περιγραφικών λιστών: <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> Επανέναρξη αρίθμησης ταξινομημένης λίστας: <ol start="50">
Προσθέτοντας γραφικά Περιορισμοί: Οταν μια εικόνα τοποθετηθεί σωστά μέσα στο κείμενο το κάνει να εμφανίζεται πιο ενημερωμένο και περισσότερο ενδιαφέρον Περιορισμοί: Τα Graphic files (εικόνες) φορτώνονται πολύ αργά Τα εργαλεία αναζήτησης (Search engines) δεν γνωρίζουν τι πρέπει να κάνουν με τις εικόνες Ισως κάποιοι χρήστες δεν διαθέτουν browsers για γραφικά π.χ. τον Lynx, ή έχουν απενεργοποιημένη τη εμφάνιση των εικόνων
Περί των Formats των γραφικών GIF JPEG PCX PNG WMF BMP, κτλ. Οταν όμως πρόκειται για χρήση σε μια σελίδα HTML προτιμούνται τα : GIF και JPEG Το format GIF υποστηρίζει 256 χρώματα. Tο JPEG μέχρι 16.7 εκατομμύρια. Συνίσταται όμως το PNG Λόγω της καλού λόγου συμπίεσης-απεικόνισης
Πρόσθεση εικόνας στη σελίδα Η πρόσθεση μιας εικόνας υλοποιείται εύκολα με την ετικέτα <IMG> και την ιδιότητα SRC που προσδιορίζει τη διεύθυνση που βρίσκεται η εικόνα Π.χ. η εντολή <IMG SRC="filename.gif"> αυτόματα τοποθετεί την εικόνα filename.gif δεξιά του προηγούμενου αντικειμένου Όταν παρεμβάλλεται μια εικόνα σε κείμενο, αυτόματα το κείμενο ευθυγραμμίζεται με το κάτω μέρος της εικόνας Με τη βοήθεια της ιδιότητας ALIGN μπορούμε να διορθώσουμε την τοποθέτηση της εικόνας
Έστω το πρόγραμμα <HTML> <HEAD> <TITLE> Χρήση της ετικέτας IMG </TITLE> </HEAD> <BODY> <P> <IMG SRC="note.gif"> Το κείμενο αυτό ακολουθεί την εικόνα. </P> <P> Το κείμενο αυτό διακόπτεται <IMG SRC="note.gif"> από την τοποθέτηση της εικόνας. </P> <P> Το κείμενο αυτό προηγείται από την εικόνα. <IMG SRC="note.gif"> </P> </BODY> </HTML>
Η εμφάνιση της σελίδας
Μέγεθος εικόνας Με τη βοήθεια των ιδιοτήτων: HEIGHT και WIDTH μπορούμε να ορίσουμε το ακριβές μέγεθος σε pixels που πρέπει να δεσμεύσουμε για την τοποθέτηση της εικόνας στη σελίδα Π.χ. <HTML> <HEAD> <TITLE>Using HEIGHT and WIDTH </TITLE> </HEAD> <BODY> <IMG SRC="exclam.gif" WIDTH=320 HEIGHT=240> <IMG SRC="exclam.gif" WIDTH=200 HEIGHT=140> <IMG SRC="exclam.gif" WIDTH=30 HEIGHT=30> </BODY> </HTML>
Οι τιμές της ιδιότητας ALIGN
Εναλλακτικό κείμενο και Περίγραμμα εικόνας Εναλλακτικό κείμενο και Περίγραμμα εικόνας Σε κάθε εικόνα μπορούμε να συνδέσουμε ένα κείμενο σαν εναλλακτική λύση στην περίπτωση που δεν εμφανιστεί η εικόνα μέσα στη σελίδα ή θέλουμε να εμφανίζεται επι πλέον πληροφορία Π.χ. γράφοντας <IMG SRC="filename" ALT="Description"> αυτό σημαίνει ότι αν ο φυλλομετρητής δεν εμφανίζει εικόνες τότε, θα εμφανιστεί στη θέση της εικόνας το εναλλακτικό κείμενο που ακολουθεί την ιδιότητα ALT. Με τη βοήθεια της ιδιότητας BORDER μπορούμε να ορίσουμε και το εύρος του περιγράμματος μιας εικόνας σε pixels Π.χ.
Παράδειγμα <HTML> <HEAD> <TITLE>Using BORDER </TITLE> </HEAD> <BODY> <IMG SRC="exclam.gif" BORDER=5 ALT="Περιγραφή της εικόνας"> </BODY> </HTML>
Παράδειγμα 2 <HTML> <HEAD> <TITLE> Χρήση της ιδιότητας BORDER </TITLE> </HEAD> <BODY> <IMG SRC="demo.jpg" BORDER=0> <BR> <IMG SRC="demo.jpg" BORDER=5> <IMG SRC="demo.jpg" BORDER=10> <IMG SRC="demo.jpg" BORDER=20> </BODY> </HTML>
Συνδέοντας έγγραφα Μια σύνδεση στο Web (link) αποτελείται από δύο μέρη : Aυτό που βλέπουμε στη σελίδα και λέγεται άγκυρα (anchor) Aυτό που όταν κάνουμε click θα εμφανιστεί στην οθόνη του υπολογιστή μας Ενα anchor μπορεί να είναι μια λέξη μια ομάδα λέξεων μια εικόνα Κάθε σύνδεση σημαίνει οτι ο φυλλομετρητής θα φορτώσει το περιεχόμενο της αντίστοιχης διεύθυνσης Η διεύθυνση αυτή είναι είτε σχετική είτε απόλυτη
Σχετική αναφορά Όταν η διεύθυνση (URL) αφορά ένα νέο αρχείο στον ίδιο υπολογιστή τότε λέμε οτι έχουμε σχετική αναφορά Π.χ. άν έχει φορτωθεί μια σελίδα από τη διεύθυνση : http://www.mysite.com/page τότε η σχετική αναφορά στον κατάλογο picture θα αφορά τη διεύθυνση: http://www.mysite.com/page/picture Και η σχετική αναφορά /picture θα αφορά τη διεύθυνση: http://www.mysite.com/picture Το ενδιαφέρον της σχετικής αναφοράς βρίσκεται στο γεγονός ότι είναι πιο εύκολο να γραφτεί και δεν χρειάζεται ολόκληρη η διεύθυνση Επίσης, επιτρέπει πολύ εύκολα να μεταφέρουμε σελίδες επειδή οι αναφορές στο URL είναι σχετικές προς τον υπολογιστή που φιλοξενεί τις σελίδες Web
Απόλυτη αναφορά Απόλυτη αναφορά, λέμε την αναφορά σε κάποιο URL όπου προσδιορίζεται επακριβώς ο υπολογιστής, ο υποκατάλογος και το αρχείο μιας σελίδας Web Οι απόλυτες αναφορές χρειάζονται όταν κάνουμε συνδέσεις σε σελίδες Web άλλων υπολογιστών, σε αντίθεση με τις σχετικές αναφορές που αφορούν τον ίδιο υπολογιστή Για να πραγματοποιηθεί η σύνδεση ενός αρχείου (link) σε μια σελίδα Web αρκεί να προσδιορίσουμε ποιο στοιχείο του αρχείου HTML είναι ένας anchor και τη διεύθυνση στο διαδίκτυο του αρχείου ή της πηγής στην οποία θέλουμε να γίνει η σύνδεση
Συνδέσεις των αρχείων Η γενική μορφή σύνδεσης είναι : <A HREF=URL>Anchor</A> Π.χ. το πρόγραμμα : <HTML> <HEAD> <TITLE>Παράδειγμα σύνδεσης</TITLE> </HEAD> <BODY> Αφού βλέπετε αυτή τη σελίδα στο Διαδίκτυο γιατί να μην επισκεφτείτε και την προσωπική σελίδα του <A HREF=http://195.130.84.222/~skontog>Συγγραφέα </A> όπου θα βρείτε ενδιαφέροντα θέματα. </BODY> </HTML>
Εικόνες και εικονίδια Όταν θέλουμε να περιλάβουμε σε μια ιστοσελίδα εικόνες μεγάλης ανάλυσης άρα και μεγάλoυ μεγέθους, πρέπει να είμαστε πολύ προσεκτικοί επειδή καθυστερούν σημαντικά να εμφανιστούν στον τελικό χρήστη Ο χρόνος εμφάνισης εξαρτάται από την ταχύτητα σύνδεσης στο Διαδίκτυο των χρηστών και από το πλήθος των εικόνων Για να μην αποθαρρύνουμε τους επισκέπτες της σελίδας και να τους υποχρεώνουμε να παραμένουν αδρανείς μέχρι την τελική εμφάνιση των εικόνων, μπορούμε να δημιουργήσουμε μια "προεπισκόπηση" των εικόνων. Με την "προεπισκόπηση" εμφανίζουμε σε μορφή εικονιδίων το περιεχόμενο των εικόνων σε σμίκρυνση.
Αν γράψουμε τον κώδικα: <A HREF="image.jpg" TITLE="Αεροφωτογραφία"> <IMG SRC="image2.jpg" BORDER="0" ALT="Παραλία από ψηλά"> <BR> Φωτογραφία από αεροπλάνο της παραλίας (πατήστε εδώ για μεγέθυνση της εικόνας) </A> Τότε στην οθόνη θα εμφανιστεί η εικόνα του αρχείου image2.jpg Η εικόνα αυτή αποτελεί το εικονίδιο της εικόνας των μεγάλων διαστάσεων image.jpg. Όταν ο χρήστης θέλει να δεί την εικόνα των μεγάλων διαστάσεων αρκεί να κάνει κλικ στο υπογραμμισμένο κείμενο της διασύνδεσης οπότε εμφανίζεται στην οθόνη η εικόνα:
Plug-In (Ενσωμάτωση) Όταν ο χρήστης κάνει click σε κάποιο link που προσδιορίζει μια άλλη σελίδα, τότε ο φυλλομετρητής ανοίγει αυτή τη σελίδα στο παράθυρό του Όταν όμως αφορά άλλο τύπο εγγράφου τότε φορτώνει (download) το έγγραφο στον υπολογιστή του χρήστη και στη συνέχεια αποφασίζει τι θα κάνει με αυτό Αν γνωρίζει τον τύπο του αρχείου π.χ. αν είναι μια εικόνα, τότε φορτώνει την εικόνα και την εμφανίζει στην οθόνη Σε μερικές περιπτώσεις χρησιμοποιεί και κάποιο plug-in, δηλαδή ένα άλλο πρόγραμμα, για να εμφανίσει το αρχείο σε κάποιο ξεχωριστό παράθυρο στην οθόνη Αν δεν γνωρίζει τον τύπο του αρχείου, δηλαδή δεν γνωρίζει πως θα το αντιμετωπίσει, τότε αναζητά κάποιες βοηθητικές εφαρμογές που γνωρίζουν πως θα το επεξεργαστούν Π.χ. για ένα αρχείο AVI video γίνεται αναζήτηση άν υπάρχει η κατάλληλη εφαρμογή για να εμφανίσει το video σε ξεχωριστό παράθυρο στην οθόνη
Σύνδεση σε άλλες πηγές Υπάρχουν πολλές άλλες πηγές που μπορούν να ενσωματωθούν σε μια σελίδα για να την κάνουν πιο ενδιαφέρουσα Π.χ. τα Usenet news, το προσωπικό e-mail, η υπηρεσία Telnet κτλ. Link για E-Mail Η δημιουργία μιας σύνδεσης για αποστολή e-mail είναι πολύ εύκολη, αρκεί στη θέση του http: να τοποθετηθεί το mailto: και η αντίστοιχη διεύθυνση Π.χ. αρκεί να γράψουμε: <A HREF="mailto:me@mycom.com">Send me E-mail</A>
Σύνδεση ενός FTP Site Με το πρωτόκολλο FTP (File Transfer Protocol) μπορούμε να συνδεθούμε σ’ ένα απομακρυσμένο υπολογιστή για να μεταφέρουμε αρχεία από και προς στο δικό μας υπολογιστή Για τη δημιουργία μιας σύνδεσης σε κάποιο FTP site στη θέση του http: τοποθετείται το ftp: και στη συνέχεια η διεύθυνση (URL address) π.χ. ftp://site_name/path Προσοχή το FTP site πρέπει να αποδέχεται συνδέσεις χωρίς password (anonymous FTP connections) Αν απαιτείται password θα πρέπει να προστεθεί το username και το σύμβολο (@) πριν από το όνομα του site. Π.χ. Access my <A HREF=“ftp://kalipso.math.uoi.gr/">ftp site ! </A> Όταν πραγματοποιηθεί η σύνδεση τότε ζητείται από το χρήστη να πληκτρολογήσει το password που απαιτείται για να ξεκινήσει η μεταφορά των αρχείων
Εισαγωγή αντικειμένων Εκτός από εικόνες και κείμενο σε μια σελίδα μπορούν εύκολα να τοποθετηθούν και άλλα αντικείμενα. Γενικά, υπάρχουν τρεις τεχνικές για να τοποθετηθούν αντικείμενα πολυμεσικής μορφής (multimedia) στις σελίδες : a. Ενσωμάτωση (Plug-ins) b. Java applets c. Flash-animation Και τα τρία υλοποιούνται με τα τη βοήθεια των ετικετών <EMBED> και <OBJECT>
Η ετικέτα <EMBED> Η ετικέτα <OBJECT> εμφανίστηκε από την έκδοση 4.0. της γλώσσας HTML και συμπληρώνει την ετικέτα <EMBED> Η βασική διαφορά βρίσκεται στο όνομα της ιδιότητας για τον ορισμό του URL του αρχείου που περιέχει το αντικείμενο Με την EMBED χρησιμοποιούμε την SRC ενώ με την OBJECT χρησιμοποιούμε την DATA
<HTML> <HEAD> <TITLE>Ενσωμάτωση αρχείου ήχου με τη βοήθεια της EMBED /TITLE> </HEAD> <BODY> <EMBED SRC=EXAMPLE.WAV HEIGHT=60 WIDTH=144> </BODY> </HTML> --------------------------------------------------------------------- <TITLE>Ενσωμάτωση αρχείου ήχου με τη βοήθεια της OBJECT </TITLE> <OBJECT DATA=EXAMPLE.WAV WIDTH=144 HEIGHT=60> </OBJECT> </BODY> </HTML>
Οι ιδιότητες του αρχείου Video (LiveVideo) Ιδιότητα Περιγραφή AUTOPLAY= τιμή TRUE ξεκινά αυτόματα να παίζει το video FALSE δεν ξεκινά αυτόματα να παίζει LOOP=τιμή TRUE το video επαναλαμβάνεται αυτόματα FALSE το video παίζει μόνο μια φορά CONTROLS =τιμή TRUE το plug-in εμφανίζει τα controls του video FALSE το plug-in δεν εμφανίζει τα controls του video
Java Applets Λέμε Java applets, τα προγράμματα σε γλώσσα Java τα οποία μπορούν να ενσωματωθούν σε κώδικα HTML Τα Java applets υποστηρίζονται από όλους τους φυλλομετρητές και όλες τις πλατφόρμες των λειτουργικών συστημάτων Για να γράψουμε ένα Java applets πρέπει να διαθέτουμε το Java Development Kit από τη Javasoft ή τη Visual J++ Η Javasoft διαθέτει το Java Development Kit δωρεάν στη διεύθυνση : http://www.javasoft.com -oracle
Παράδειγμα προγράμματος Tο κλασικό πρόγραμμα που εμφανίζει το κείμενο "Hello World" σε Java Applet είναι: import java.applet.*; import java.awt.*; class HelloWorld extends Applet { public void paint(Graphics g) { g.drawString("Hello World!",30,35); } } Για να χρησιμοποιηθεί αυτό το applet σε μια σελίδα HTML πρέπει να γίνει χρήση της ετικέτας <APPLET> δηλαδή:
<HTML> <HEAD> <TITLE>HelloWorld Applet</TITLE> </HEAD> <BODY> <APPLET CODE=HelloWorld HEIGHT=100 WIDTH=150> </APPLET> </BODY> </HTML>
Διεθνοποίηση content="text/html; charset=iso-8859-7"> ή Η HTML, μέχρι την έκδοση 3, χρησιμοποιούσε μόνο το σύνολο χαρακτήρων του ISO 8859-1 (Latin-1) Αυτό το σύνολο χαρακτήρων περιέχει τα λατινικά γράμματα, αλλά όχι ελληνικά, εβραϊκά, αραβικά, ή κυριλλικά γράμματα επειδή είναι κωδικοποιημένα σε ένα (1) μόνο byte (8-bits) Η HTML 4.0 χρησιμοποιεί το Universal Character Set (UCS) ως σύνολο χαρακτήρων. Το UCS είναι ισοδύναμο με το Unicode 2.0 το οποίο χρησιμοποιεί δύο (2) bytes (16-bits) Για να μην παρατηρηθεί πρόβλημα με την εμφάνιση των Ελληνικών γραμμάτων θα πρέπει να χρησιμοποιηθεί το σύνολο χαρακτήρων ISO-8859-7 δηλαδή θα πρέπει να προστεθεί στο τμήμα της επικεφαλίδας που θα περιέχει και Ελληνικά γράμματα το εξής: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7"> ή content="text/html; charset=utf-8"> Σύνταξη HTML 4.0
Στην HTML μπορούμε να ορίσουμε και πίνακες Πίνακες (Tables) Στην HTML μπορούμε να ορίσουμε και πίνακες Οι βασικές ετικέτες για την επεξεργασία πινάκων είναι: <TABLE> </TABLE Ορισμός πίνακα <TR> </TR> Νέα γραμμή <TD> </TD> Ορίζει ένα κελί <TH> </TH> Ορίζει την επικεφαλίδα Επίσης υπάρχουν και οι ιδιότητες : BORDER Ορίzει το περίγραμμα. (Border=0 , χωρίς περίγραμμα) ALIGN Μπορεί να πάρει τιμές LEFT, RIGHT, και CENTER (default LEFT CAPTION Ορίζει ένα τίτλο
<HTML> <HEAD> <TITLE>Παραδείγματα πινάκων</TITLE> </HEAD> <BODY> <TABLE BORDER=1> <TR> <TH>Τα Χρώματα</TH> <TH>του Ουράνιου</TH> <TH>τόξου</TH> <TD>Κόκκινο</TD> <TD>Πορτοκαλί</TD> <TD>Κίτρινο</TD> </TR> <TD>Πράσινο</TD> <TD>Μπλέ</TD> <TD>Ιώδες</TD> </TABLE> <HR>
<CAPTION>My Favorite Groups</CAPTION> <TR> <TABLE BORDER=3> <CAPTION>My Favorite Groups</CAPTION> <TR> <TH>Rock</TH> <TD>Pink Floyd</TD> <TD>Led Zepplin</TD> <TD>The Dobbie Brothers</TD> </TR> <TH>Soft</TH> <TD>Simon and Garfunkel</TD> <TD>Peter, Paul, & Mary</TD> <TD>Neil Young</TD> </TABLE> </BODY> </HTML>
Πλαίσια (Frames) Λέμε πλαίσιο (frame) στη γλώσσα HTML ένα εργαλείο το οποίο επιτρέπει να τεμαχίσουμε αποτελεσματικά την εμφάνιση και το περιεχόμενο μιας σελίδας Μπορούμε να τεμαχίσουμε την οθόνη σε περισσότερα πλαίσια αλλά συνήθως περιοριζόμαστε σε δύο ή τρία πλαίσια Στο κάθε πλαίσιο μπορούμε να ορίσουμε τις διαστάσεις είτε σε απόλυτα είτε σε σχετικά μεγέθη είτε ακόμη και αναλογικά Τα πλαίσια πρέπει να εμπεριέχονται μέσα σε μια δομή που καλείται <FRAMESET>, η οποία και αντικαθιστά την ετικέτα <BODY>
Γενική μορφή της δομής <FRAMESET> <FRAMESET ROWS="τιμές" COLS=" τιμές"> …………. </FRAMESET> Π.χ. <FRAMESET ROWS="100,240,140"> <FRAMESET ROWS="25%,50%,25%"> <FRAMESET COLS="*, 2*, 3*"> <FRAMESET COLS="100, 25%, *, 2*"> <FRAMESET ROWS="*, 2*, *" COLS="2*, *">
Η ετικέτα <FRAME> <FRAME SRC="url"> Π.χ. <FRAME SRC="sample.htm">
<HTML> <HEAD> <TITLE>Διευθέτηση ενός πίνακα</TITLE> </HEAD> <FRAMESET ROWS="25%,50%,25%"> <FRAME SRC="header.htm"> <FRAMESET COLS="25%,75%"> <FRAME SRC="image2.htm"> <FRAME SRC="config10.htm"> </FRAMESET> <FRAME SRC="config7.htm"> <NOFRAMES> Ο φυλλομετρητής δεν μπορεί να εμφανίσει frames. </NOFRAMES> </HTML>
Τιμές των ιδιοτήτων της <FRAME>
Δεσμευμένα ονόματα πλαισίων
Η ετικέτα <IFRAME> Κύριο χαρακτηριστικό της ετικέτας είναι ότι δεν απαιτείται η εντολή FRAMESET Η γενική μορφή της είναι: <IFRAME ιδιότητα1=τιμή, ιδιότητα2=τιμή … </IFRAME>
<HTML> <HEAD> <TITLE> Παράδειγμα εσωτερικού iframe </TITLE> <meta charset="UTF-8"> </HEAD> <BODY> <H2>Εργαλεία αναζήτησης πληροφοριών </H2> Εκτός από το εμφανιζόμενο εργαλείο αναζήτησης μπορείτε να επιλέξετε και ένα απο τα ακόλουθα <BR><BR> <DIV> <a href="http://www.yahoo.com" target="internal">Yahoo</a></DIV> <DIV><a href="http://www.in.gr" target="internal">InGR</a></DIV><BR> <IFRAME src="http://www.google.com" style="width: 100%; height: 300px" name="internal"> Προσοχή, ο φυλλομετρητής σας δεν υποστηρίζει iframes. </IFRAME> </BODY> </HTML>
Σύνοψη άλλων HTML στοιχείων – Tags (1) <abbr>…</abbr> Abbreviation or Acronym <address>…</address> Address <audio> Ορίζει ηχητικό περιεχόμενο Παράδειγμα: <audio controls autoplay loop> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <blockquote> Ορίζει τμήμα κειμένου από άλλη πηγή: <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>
Σύνοψη HTML στοιχείων – Tags (2) <br> ή <br /> Αλλαγή γραμμής Προσθήκη κενού χαρακτήρα (‘ ‘) <button> Ορισμός κουμπιού Παράδειγμα: <button type="button" onclick="alert('Hello world!')">Click Me!</button> <div> Ορίζει ένα τμήμα της σελίδας <hr> Ορίζει θεματική αλλαγή σε μία σελίδα <mark>…</mark> Highlighted Text
Σύνοψη HTML στοιχείων – Tags (3) <video> Ορίζει περιεχόμενο βίντεο ή ταινίας Παράδειγμα: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> <thead> <th colspan=13> Ορίζει επικεφαλίδες πίνακα </thead> <tbody> … <tr rowspan=>…<td colspan>..</td></tr></tbody> => Ορίζει κυρίως σώμα πίνακα
Σύνοψη HTML στοιχείων – Tags (4) <sub>..</sub> Subscript <sup>…</sup> Superscript <strong>…</strong> Bolded important text <strike>…. </strike> Strikethrough Text <section> Document section Παράδειγμα: <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section>
Σύνοψη HTML στοιχείων – Tags (5) <em>Emphasized text</em><br> <strong>Strong text</strong><br> <code>A piece of computer code</code><br> <samp>Sample output from a computer program</samp><br> <kbd>Keyboard input</kbd><br> <var>Variable</var> <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
HTML symbols (1)
HTML symbols (2)
HTML symbols (3)
HTML MAPS H ετικέτα map χρησιμοποιείται για τον ορισμό ενός χάρτη-εικόνας: Ένας χάρτης εικόνας είναι μια εικόνα με επιλέξιμες περιοχές. Ένα στοιχείο map περιλαμβάνει πολά στοιχεία area: Οι περιοχές ορίζονται με απόλυτες διαστάσεις πάνω στην αρχική διάσταση της εικόνας (που επίσης δίνεται με απόλυτες διαστάσεις) Παράδειγμα: <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.html" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.html" alt="Venus"> </map>
HTML MAPS (2) Οι χάρτες εδώ είναι client-side maps!!!! Δυνατότητες ορισμού περιοχής: shape="rect" coords="10,20,75,40" shape="circle" coords="50,80,20" shape="poly" coords="217,305,218,306,218,306,228,316,243,316,243,325,229,325,229,322,217,310“ Παράδειγμα 2: <div> <map name="beachmap"> <area href="/" shape="poly" coords="17,51,42,35,66,51,66,89,17,89" alt="Beach hut" title="Beach hut - where you get changed"> <area shape="circle" coords="99,92,12" nohref alt=""> <area href="/" shape="circle" coords="99,92,23" alt="Life ring" title="Life ring - to help you swim"> <area href="/" shape="rect" coords="129,27,171,52" alt="Flag" title="Flag - says if it safe to swim"> </map> </div> <p><img src="../jsexamples/imagemap.png" alt="" usemap="#beachmap"></p>
HTML MAPS (3) Server-side maps – GOOGLE MAPS: To API των Google maps μας επιτρέπει να απεικονίζουμε χάρτες στη σελίδα μας: To Google maps API είναι μια js βιβλιοθήκη που βρίσκεται εδώ και μπαίνει στην αρχή κάθε σελίδας μας εφόσον θέλουμε να εμφανίσουμε χάρτη: <script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script> H παράμετρος ?callback=myMap είναι μία JavaScript συνάρτηση που βρίσκεται στον κώδικά μας και που καλείται όταν τα Google maps είναι έτοιμα: H συνάρτηση myMap αρχικοποιεί και εμφανίζει το χάρτη:
HTML MAPS (4) H συνάρτηση MyMap: <script> function myMap() { var mapCanvas = document.getElementById("map"); var mapOptions = { center: new google.maps.LatLng(51.508742,-0.120850), zoom: 5 }; var map = new google.maps.Map(mapCanvas, mapOptions); } </script> Συντεταγμένες κέντρου χάρτη Default zoom-level (up to 19-20) H google επιτρέπει την κλήση του χάρτη χιλιάδες φορές την ημέρα – Σε μεγαλύτερη κίνηση απαιτείται κλειδί: js?key=YOUR_KEY Απόκτηση κλειδιού developer: https://console.developers.google.com
HTML MAPS (5) Οι βασικοί τύποι χαρτών που υποστηρίζονται από την GOOGLE: ROADMAP (normal, default 2D map) SATELLITE (photographic map) HYBRID (photographic map + roads and city names) TERRAIN (map with mountains, rivers, etc.) Αλλάζουμε τον εξορισμού χάρτη βάζοντας την ιδιότητα: mapTypeId: google.maps.MapTypeId.HYBRID Ή με την εντολή: map.setMapTypeId(google.maps.MapTypeId.HYBRID); Βασικά στοιχεία ελέγχου σε χάρτη - Προσθέτω στο mapoptions τις επιλογές: panControl: true, == Pan Control zoomControl: true, == Zoom control mapTypeControl: true, == MapType control scaleControl: true, == Map scale display streetViewControl: true, ==Pegman icon that can be dragged to the map to enable street view overviewMapControl: true, == Map viewport rotateControl: true == Circular icon for map rotation
HTML MAPS (6) <div id="map" style="width:100%;height:500px"></div> <script> function myMap() { var mapCanvas = document.getElementById("map"); var mapOptions = { center: new google.maps.LatLng(51.508742, -0.120850), zoom: 7, panControl: true, zoomControl: true, mapTypeControl: true, scaleControl: true, streetViewControl: true, overviewMapControl: true, rotateControl: true }; var map = new google.maps.Map(mapCanvas, mapOptions); } </script> <script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>