Ενότητα 2: HTML – Hypertext Markup Language. Φώτης Κόκκορας, Καθηγητής Εφαρμογών, Τμήμα Μηχανικών Πληροφορικής Τ.Ε., T.E.I. Θεσσαλίας Προγραμματισμός Εφαρμογών.

Παρουσίαση με θέμα: "Ενότητα 2: HTML – Hypertext Markup Language. Φώτης Κόκκορας, Καθηγητής Εφαρμογών, Τμήμα Μηχανικών Πληροφορικής Τ.Ε., T.E.I. Θεσσαλίας Προγραμματισμός Εφαρμογών."— Μεταγράφημα παρουσίασης:

1 Ενότητα 2: HTML – Hypertext Markup Language. Φώτης Κόκκορας, Καθηγητής Εφαρμογών, Τμήμα Μηχανικών Πληροφορικής Τ.Ε., T.E.I. Θεσσαλίας Προγραμματισμός Εφαρμογών Διαδικτύου

2 2 Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε άλλου τύπου άδειας χρήσης, η άδεια χρήσης αναφέρεται ρητώς. Άδειες Χρήσης

3 3 Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. Χρηματοδότηση

4 4 Προγραμματισμός Εφαρμογών Διαδικτύου Να περιγράφει τα βασικά στοιχεία της HTML. Να ορίζει τις ετικέτες σε κώδικα HTML. Να ορίζει το περιεχόμενο των head και body. Να συντάσσει σωστά επικεφαλίδες και παραγράφους. Να ορίζει τους υπερσυνδέσμους σε κώδικα HTML. Να ορίζει εικόνες σε κώδικα HTML. Να ορίζει λίστες σε κώδικα HTML. Να ορίζει πίνακες σε κώδικα HTML. Να ορίζει φόρμες σε κώδικα HTML. Να περιγράφει λογισμικά που είναι χρήσιμα στην ανάπτυξη ιστοσελίδων. Σκοποί ενότητας

5 Περιεχόμενα ενότητας  HTML - Γενικά. HTML - Γενικά.  Βασική Δομή Ιστοσελίδας Βασική Δομή Ιστοσελίδας  Ετικέτες - Head - Body. Ετικέτες - Head - Body.  Επικεφαλίδες - Παράγραφοι Επικεφαλίδες - Παράγραφοι  Υπερσύνδεσμοι. Υπερσύνδεσμοι.  Εικόνες Εικόνες  Λίστες. Λίστες.  Πίνακες. Πίνακες.  Φόρμες. Φόρμες.  Άλλα Λογισμικά. Άλλα Λογισμικά. Προγραμματισμός Εφαρμογών Διαδικτύου 5

6 HTML – Hypertext Markup Language Γλώσσα Σήμανσης Υπερκειμένου  Δεν είναι γλώσσα προγραμματισμού!  Σχεδιάστηκε ώστε να είναι κατά το μέγιστο δυνατό μεταφέρσιμη και ανεξάρτητη υπολογιστικών συστημάτων.  Χρησιμοποιεί ένα σύνολο από markup tags (ετικέτες σήμανσης) για να ορίσει τον τρόπο παρουσίασης της πληροφορίας μέσα σε μια ιστοσελίδα.  αποσπασματικό παράδειγμα (θα εμφανίσει τη λέξη "δοκιμή" με έντονη γραφή): δοκιμή  Υπάρχει προκαθορισμένο σύνολο ετικετών.  Θα αναφέρουμε αρκετές (όχι όλες) – Θα χρησιμοποιήσουμε λιγότερες (~20)  Σχεδόν όλες οι ετικέτες χρησιμοποιούνται σε ζευγάρια. Για παράδειγμα:  ετικέτα αρχής (ή άνοιγμα)  ετικέτα τέλους (ή κλείσιμο)  Αυτές που δεν χρησιμοποιούνται σε ζευγάρια είναι όσες δεν παίρνουν περιεχόμενο ενδιάμεσα (σημαντικότερες οι img, br και hr)  η ετικέτα strong παίρνει περιεχόμενο και γι αυτό χρησιμοποιείται ζευγαρωτά Προγραμματισμός Εφαρμογών Διαδικτύου 6

7 Στοιχεία Εξέλιξης  Προτάθηκε από τον Tim Berners Lee το 1991  Το 1999 προτάθηκε η έκδοση 4.01 που είναι η περισσότερο διαδεδομένη  Το 2000 προτάθηκε η XΗTML 1.0  η HTML γίνεται εφαρμογή της γλώσσας XML  η σύνταξη γίνεται αυστηρότερη (κατά τα πρότυπα της XML) υπάρχουν 3 επίπεδα αυστηρότητας στη σύνταξη (θα τα δούμε προσεχώς)  Το 2010 παρουσιάζετε η HTML 5  εισάγονται νέα στοιχεία για να καλυφθούν ανάγκες που προέκυψαν από την τρομακτική εξάπλωση της χρήσης του web σε non-PC συσκευές από τις εξελιγμένες δυνατότητες των browsers από τις ανάγκες βελτίωσης, γενικότερα  Την εξέλιξη της HTML την επιβλέπει το W3C  World Wide Web Consortium World Wide Web Consortium Προγραμματισμός Εφαρμογών Διαδικτύου 7

8 HTML και Ιστοσελίδες  Οι ιστοσελίδες είναι αρχεία που σε επίπεδο κώδικα περιέχουν HTML.  Μπορεί να περιέχουν κι άλλου είδους κώδικα (π.χ. JavaScript) αλλά αυτό έχει να κάνει με επεκτάσεις – ας το αγνοήσουμε για την ώρα!  Μέσω της HTML:  Συνδυάζουμε μέσα σε μια ιστοσελίδα πολλά και ετερογενή είδη δεδομένων (κείμενο, εικόνα, video, ήχο, κτλ).  Καθορίζουμε τον τρόπο παρουσίασης του περιεχομένου συνήθως και με τη βοήθεια της γλώσσας CSS  Διασυνδέουμε ιστοσελίδες μεταξύ τους βάζοντας συνδέσμους/links  ενσωματώνουμε μηχανισμούς διαδραστικής αλληλεπίδρασης συνήθως με τη βοήθεια της γλώσσας προγραμματισμού JavaScript  Για τη συγγραφή HTML χρησιμοποιούμε:  απλό κειμενογράφο (Σημειωματάριο/Notepad) – αποφύγετέ το!!!  ειδικό κειμενογράφο με HTML υποστήριξη (Notepad++, PSPad, BlueFish, κτλ)  εξειδικευμένα εργαλεία συγγραφής HTML (Dreamweaver, Expression Web, κτλ) δεν θα σας κάνουν καλό σε αυτή τη φάση – απευθύνονται σε προχωρημένους Προγραμματισμός Εφαρμογών Διαδικτύου 8

9 Χρειάζεστε έναν Ειδικό Text Editor  O editor που θα χρησιμοποιήσετε πρέπει κατ'ελάχιστο να υποστηρίζει χρώμα, τόσο στην HTML όσο και στις JavaScript και PHP (PSPad, Notepad++).  Ο HTML κώδικας γράφεται πλέον με μικρά/πεζά γράμματα! Προγραμματισμός Εφαρμογών Διαδικτύου 9

10 Βασική Δομή Ιστοσελίδας  Έστω το αρχείο test.html με τον κώδικα: Η πρώτη μου ιστοσελίδα! Το ορατό περιεχόμενο της ιστοσελίδας.  html: Δηλώνει την αρχή (και το τέλος) του εγγράφου.  head: περιέχει πληροφορίες που δεν εμφανίζονται μέσα στην ιστοσελίδα αλλά απευθύνονται στην εφαρμογή του browser και στις μηχανές αναζήτησης. Δείτε για παράδειγμα στην εικόνα τι κάνει η ετικέτα title.  body: ότι υπάρχει εντός της είναι το περιεχόμενο της σελίδας που απευθύνεται στον τελικό χρήστη και κατά βάση εμφανίζεται στο χώρο απεικόνισης σελίδας στο παράθυρο του browser. Στην εικόνα βλέπετε το αποτέλεσμα στον Internet Explorer 9 καθώς και το πώς αυτός αντιλαμβάνεται τον κώδικα (2η εικόνα – πατήστε F12 σε οποιονδήποτε browser). Προγραμματισμός Εφαρμογών Διαδικτύου 10

11 Βασικές Έννοιες Χρήσης Ετικετών  Τα html, head και body χρησιμοποιούνται ΜΟΝΟ μία φορά ανά σελίδα.  όλες οι υπόλοιπες ετικέτες (θα δούμε αρκετές σε λίγο) που προορίζονται για χρήση εντός του body, χρησιμοποιούνται όσες φορές θέλουμε  Μέσα σε ζευγάρι ετικετών επιτρέπετε να εσωκλείονται άλλες HTML ετικέτες, χωρίς όμως να "κόβει" το ένα ζευγάρι το άλλο! Στη λάθος σύνταξη, το div κλείνει εντός του 2ου p ενώ άνοιξε εκτός.  Οι browser έχουν μεγάλη ανοχή σε σφάλματα σύνταξης και διορθώνουν απλά λάθη από μόνοι τους. Δεν είναι όμως λόγος αυτός για να επιτρέπουμε λάθη στον κώδικα. Στην XHTML/XHTML5 οι απαιτήσεις για σωστή σύνταξη εξ αρχής, είναι πολύ πιο αυστηρές! Προγραμματισμός Εφαρμογών Διαδικτύου 11

12 Ιδιότητες Ετικετών (attributes)  Εντός μιας ετικέτας ανοίγματος επιτρέπεται να ορίσουμε ιδιότητες (attributes)  Παράδειγμα: η παράγραφος θα μορφοποιηθεί βάσει των ρυθμίσεων του κανόνα μορφοποίησης foo  Οι ιδιότητες παρέχουν επιπρόσθετες πληροφορίες στο HTML στοιχείο.  Συντακτικές λεπτομέρειες των html attributes  εισάγονται ΜΟΝΟ στην ετικέτα ανοίγματος, με όποια σειρά θέλουμε  εισάγονται ως ζευγάρια ιδιότητας-τιμής: π.χ.  οι τιμές πρέπει να βρίσκονται εντός διπλών (κατά προτίμηση) εισαγωγικών είναι αποδεκτά και τα μονά εισαγωγικά αλλά στην XHTML μόνο τα διπλά  Δεν υπάρχει διάκριση πεζών-κεφαλαίων για τις ιδιότητες, αλλά.... ...το W3C προτείνει τη χρήση πεζών (όπως και για τις ετικέτες δηλαδή)  Οι ιδιότητες ετικετών χρησιμοποιήθηκαν στο παρελθόν (προ CSS) κατά κόρο για να γίνονται ρυθμίσεις μορφοποίησης των html στοιχείων.  Πλέον η μορφοποίηση γίνεται μέσω κανόνων CSS.  Οι (λίγες) ιδιότητες που χρησιμοποιούνται ακόμη αφορούν σε άλλα θέματα.  Οι ιδιότητες name, id και class υπάρχουν σε όλες τις ετικέτες. Η name θα μας απασχολήσει στις φόρμες, η id σε Javascript & CSS και η class σε CSS. Προγραμματισμός Εφαρμογών Διαδικτύου 12

13 Τι μπορώ να έχω εντός του ;  title: πολύ σημαντική ετικέτα – είναι ο τίτλος της ιστοσελίδας  φαίνεται στο παράθυρο/tab του browser, το δείχνει και το Google στα αποτελέσματα αναζήτησης  υποχρεωτικό στοιχείο στην XHTML (HTML αυστηρής σύνταξης!)  style: για εντός της σελίδας ορισμό κανόνων CSS (μορφοποίησης) body {color:blue;}  script: για εισαγωγή κώδικα σε κάποια client side γλώσσα προγραμματισμού document.write("Hello World!")  link: για καθορισμό σχέσεων με εξωτερικά αρχεία  π.χ. ενσωμάτωση κανόνων CSS από εξωτερικό αρχεί  meta: καθορισμός ζεύγους τεχνικών πληροφοριών – μερικά παραδείγματα:  θα δούμε τα βασικότερα meta.... μετά! (μελλοντικά - κεφάλαιο SEO) Υπάρχουν 3 τρόποι ενσωμάτωσης CSS κανόνων. Θα τα δούμε στο σχετικό κεφάλαιο. Περισσότερα στο σχετικό κεφάλαιο. Προγραμματισμός Εφαρμογών Διαδικτύου 13

14 Τι μπορώ να έχω εντός του ; Οι βασικότερες ετικέτες είναι οι εξής:  h1, h2... h6: επικεφαλίδες επιπέδου 1 ως 6, αντίστοιχα  p: παράγραφος  img: εικόνες  a: υπερσύνδεσμοι  strong (έντονα), em (πλάγια)  ol, ul: αριθμημένες και μη λίστες, αντίστοιχα  li: στοιχείο λίστας (είτε ol ή ul)  table: πίνακας  tr: σειρά πίνακα  td: κελί πίνακα (μέσα σε σειρά)  form: φόρμα (για συλλογή πληροφοριών)  input, textarea, select, option: στοιχεία διεπαφής εντός φόρμας  div, span: γενικού σκοπού block στοιχείο και inline στοιχείο, αντίστοιχα  το πρώτο πολύ σημαντικό για χωροθέτηση σελίδας (βλ. CSS)  σχόλιο: θεωρείται οτιδήποτε περικλείεται μέσα σε Προγραμματισμός Εφαρμογών Διαδικτύου 14

15 Επικεφαλίδες ως  Υπάρχουν 6 ετικέτες επικεφαλίδας: h1, h2, h3, h4, h5, h6  Block Στοιχείο. Προορίζονται για χρήση σε επικεφαλίδες/τίτλους και γενικά σε κείμενα που έχουν διάρθρωση (ενότητες, υποενότητες, κτλ).  Βασικά attributes: (αποφύγετε τη χρήση τους - )  align με τιμές left (default), right, center  Το κείμενο στις επικεφαλίδες, ειδικά στις "μεγάλες" (h1, h2) λαμβάνετε περισσότερο υπόψη από τις μηχανές αναζήτησης (SEO κανόνας).  Παράδειγμα χρήσης και αποτέλεσμα σε ΙΕ9 Προγραμματισμός Εφαρμογών Διαδικτύου 15

16 Παράγραφοι  Block Στοιχείο. Προορίζεται για ορισμό παραγράφων.  Βασικά attributes:  align με τιμές left (default), right, center  Παράδειγμα χρήσης και αποτέλεσμα σε ΙΕ9  Οι αλλαγές γραμμής γίνονται αυτόματα από τον browser. Για να επιβάλετε αλλαγή γραμμής υπάρχει η ετικέτα (ή σε XHTML)  Συνεχόμενα κενά δεν τυπώνονται. Υπάρχει ειδικός χαρακτήρας κενού: Προγραμματισμός Εφαρμογών Διαδικτύου 16

17 Υπερσύνδεσμοι  In-line στοιχείο. Προορίζεται για δημιουργία υπερσυνδέσμων.  Ο υπερσύνδεσμος μπορεί να οδηγεί:  σε άλλο πόρο (resource) στον ιστό  σε άλλο σημείο εντός της ίδιας σελίδας (εσωτερικός σύνδεσμος)  Βασικά attributes (παράδειγμα χρήσης στο επόμενο slide):  href: υποχρεωτικό – η διεύθυνση προορισμού/στόχου  target: τυπική τιμή _blank – εμφανίζει τη σελίδα στόχο σε νέο παράθυρο/tab  title: κείμενο tooltip/επεξήγηση για τον σύνδεσμο  ανάμεσα στις ετικέτες αρχής-τέλους μπαίνει το κείμενο του συνδέσμου μπορεί να μπει και ετικέτα εικόνας οπότε ολόκληρη η εικόνα γίνεται σύνδεσμος γενικεύοντας, μπορεί να μπει κείμενο ή/και οποιοδήποτε άλλο in-line στοιχείο.  Σύνδεσμος για email: email  Ανοίγει το προεπιλεγμένο πρόγραμμα αλληλογραφίας  Η διεύθυνση email είναι εκτεθειμένη σε mail spiders (ευνοεί το spam)! καλύτερα βάλτε μια εικόνα με το κείμενο της διεύθυνσης ή ως user[at]teilar.gr αλλά θα χάσετε τον αυτοματισμό της εκκίνησης της εφαρμογής email Προγραμματισμός Εφαρμογών Διαδικτύου 17

18 Υπερσύνδεσμοι (συνέχεια)  Παράδειγμα χρήσης και αποτέλεσμα σε ΙΕ9  Προσέξτε την έννοια του inline στοιχείου στο προηγούμενο παράδειγμα:  Τα 2 πρώτα links τυπώνονται διαδοχικά και παράγραφος ξεκινά από κάτω τους, αριστερά (normal flow/κανονική ροή σχεδίασης- θα τα πούμε αργότερα)  Ένα inline στοιχείο μπορεί να μπει στη ροή του κειμένου κάτι που δεν ισχύει για τα block στοιχεία όπως π.χ. το p ή το h1 (περισσότερα για block/inline αργότερα) Προγραμματισμός Εφαρμογών Διαδικτύου 18

19 Εσωτερικοί Υπερσύνδεσμοι  Σύνδεσμοι μέσα στην ίδια την ιστοσελίδα (εσωτερικοί)  Χρήση ως σύνδεσμοι εσωτερικής μετακίνηση σε σελίδες μεγάλου μήκους (το scrolling κουράζει τους χρήστες) αλλά και επιστροφής στην κορυφή της σελίδας Ορίζουμε ένα στόχο σε κάποιο σημείο της σελίδας… σε HTML: Κεφάλαιο 1 σε ΧHTML: Κεφάλαιο 1 Συμβατότητα – βάζουμε και τα δύο!: Κεφάλαιο 1 Προσθέτουμε σύνδεσμο προς το στόχο ως εξής: Κλικ εδώ για Κεφάλαιο 1... Ο στόχος δεν χρειάζεται να περικλείει κάποιο στοιχείο/κείμενο!  Το # ως τιμή στην ιδιότητα href ορίζει ως στόχο την ίδια τη σελίδα και μάλιστα χωρίς επαναφόρτωση.  χρήσιμο για ορισμό dummy συνδέσμων, που θα οριστούν πλήρως μελλοντικά Προγραμματισμός Εφαρμογών Διαδικτύου 19

20 Διάφορες Ετικέτες Μορφοποίησης  Είναι inline στοιχεία. Εξακολουθούν να χρησιμοποιούνται πάρα τη CSS.  br: εξαναγκασμένη αλλαγή γραμμής σε παράγραφο (μονή ετικέτα)  hr: οριζόντια γραμμή (ιδιότητες: width, align) (μονή ετικέτα)  sub και sup: δείκτης και εκθέτης  strong: έντονη γραφή (ή b – έχει καταργηθεί)  em: πλάγια γραφή (ή i – έχει καταργηθεί)  u: υπογραμμισμένη (underline) γραφή  strike: διαγραμμένη γραφή (ή s – έχει καταργηθεί)  font: ιδιότητες face/γραμματοσειρά, size/μέγεθος, color/χρώμα το μαύρο πρόβατο της html – έχει καταργηθεί "δια ροπάλου"! Πλέον, μόνο CSS.  Παραδείγματα Κώδικα: Προγραμματισμός Εφαρμογών Διαδικτύου 20

21 Εικόνες - Πρότυπα Κωδικοποίησης  Joint Photographic Experts Group (.jpeg/.jpg)  απωλεστική συμπίεση, 24-bit χρώμα (real color) 16.7 εκατομ. Χρώματα, ταυτόχρονα  κατάλληλο για φωτογραφίες, screenshots από παιχνίδια  αυστηρά ακατάλληλο για "εικόνες" με κείμενα γιατί εισάγει "θόρυβο"… …εκτός κι αν η συμπίεση είναι πολύ μικρή  Graphics Interchange Format (.gif)  μη απωλεστική συμπίεση, υποστήριξη διαφάνειας και animation 8-bit χρώμα (ως 256 ταυτόχρονα χρώματα) πολύ λίγα για σωστή απεικόνιση φωτογραφιών  κατάλληλο για γραμμικό σχέδιο ή/και κείμενο  Portable Network Graphics (.png)  πρότυπο του W3C στη θέση του GIF  μη απωλεστική συμπίεση με 24-bit χρώμα και διαφάνεια  σε πρόσφατες βελτιώσεις υποστηρίζει και κινούμενες εικόνες  η καλύτερη επιλογή για εικόνες με κείμενα όχι τόσο καλή επιλογή για φωτογραφίες - χαμηλή συμπίεση σε σχέση με JPG Προγραμματισμός Εφαρμογών Διαδικτύου 21

22 Εικόνες – Παραδείγματα #1 Παραδείγματα για να γίνουν κατανοητά τα προηγούμενα! υψηλή JPG συμπίεση χαμηλή JPG συμπίεση PNG κωδικοποίηση  Προσέξτε την αλλοίωση του κειμένου που προκαλεί η υψηλή JPG συμπίεση (αριστερή εικόνα).  Καλύτερη επιλογή για screenshots διεπαφών αλλά και γραφικά διεπαφών/ιστοσελίδων είναι η PNG κωδικοποίηση (δεξιά εικόνα).  αποδεκτή και η JPG κωδικοποίηση χαμηλής όμως συμπίεσης (μεσαία εικόνα)  στην πραγματικότητα, η μεσαία εικόνα είναι ελαφρώς θολή σε σχέση με την PNG εικόνα δεξιά, που ποιοτικά είναι η καλύτερη Προγραμματισμός Εφαρμογών Διαδικτύου 22

23 Εικόνες – Παραδείγματα #2  Αριστερά: η εφαρμογή υπερβολικής JPG συμπίεσης αλλοίωσε την εικόνα, χρωματικά αλλά και γεωμετρικά (δείτε τα artifacts στα περιγράμματα των αερόστατων)  Δεξιά: εικόνα GIF. Προσέξτε στο κάτω δεξιά αερόστατο πώς αλλοιώθηκαν τα χρώματα (φαινόμενο banding – ζώνες ίδιου, flat χρώματος) εξαιτίας του χαμηλού βάθους χρώματος της GIF κωδικοποίησης (ακατάλληλη για ποιοτικές φωτογραφίες – κατάλληλη για απλά γραφικά και λίγα χρώματα). Προγραμματισμός Εφαρμογών Διαδικτύου 23

24 Εικόνες  Στοιχείο μικτής συμπεριφοράς (block και inline) για ενσωμάτωση εικόνας.  Βασικά attributes:  src: υποχρεωτικό - ένα URL που ορίζει τη θέση της εικόνας σχετική διεύθυνση: src="images/logo.png" απόλυτη διεύθυνση: src="http://www.auth.gr/logo_el.gif"  alt: για ορισμό εναλλακτικού κειμένου το οποίο χρειάζεται: σε χρήστες με προβλήματα όρασης και χρήση μηχανικών αναγνωστών σελίδας σε περιπτώσεις αδυναμία φόρτωσης των γραφικών (π.χ. δε βρέθηκε το αρχείο) για σωστότερη δεικτοδότηση (indexing) από τις μηχανές αναζήτησης εικόνων  Την ιδιότητα alt την ορίζουμε μόνο όταν η εικόνα έχει σχέση με το κείμενο και δεν είναι απλά διακοσμητική (πχ γραφικά διεπαφής). Αλλιώς βάζουμε alt=" "  width και height: ορίζουμε της διαστάσεις απεικόνισης μέσα στη σελίδα ο browser μπορεί να κάνει δυναμικό resize (δηλ. όχι μόνιμο!)  align: για στοίχιση (left, right, center)  usemap: για ορισμό hot-spots πάνω στην εικόνα (βλ. συνέχεια)  Εικόνα ως Σύνδεσμος  Προγραμματισμός Εφαρμογών Διαδικτύου 24

25 Image Maps  Εικόνες που πάνω τους έχουμε ορίσει περιοχές που λειτουργούν ως σύνδεσμοι.  Οι περιοχές ορίζονται με ειδική ετικέτα map και χρήση ιδιοτήτων name/id. Είδη περιοχών: ορθογώνια, κύκλοι, πολύγωνα (δύσκολο να οριστούν με το χέρι!)  Η συσχέτιση map και img γίνεται μέσω της ιδιότητας usemap της img.  Παράδειγμα χρήσης και λοιπές λεπτομέρειες κώδικα:  Οι συντεταγμένες είναι σε pixels, με αναφορά την πάνω αριστερή γωνία - (0,0)  Ο κύκλος και το ορθογώνιο στην εικόνα μπήκαν με Photoshop! Δεν φαίνονται!  Το πολύγωνο στη Θεσσαλία φαίνεται όταν πατηθεί το ποντίκι. Προγραμματισμός Εφαρμογών Διαδικτύου 25

26 Εικόνες – Οδηγίες  Οι browsers απεικονίζουν σκέτες εικόνες σε σμίκρυνση αν είναι μεγαλύτερες από τον διαθέσιμο χώρο του παραθύρου.  το κάνουν δυναμικά – δεν αλλάζουν μόνιμα την εικόνα  Καλύτερα να φτιάχνετε τις εικόνες στις διαστάσεις που τις θέλετε και όχι όπως προέκυψαν από την υψηλής ανάλυσης ψηφιακή φωτογραφική μηχανή  Μια ποιοτικά καλή εικόνα για θέαση στην οθόνη, δε χρειάζεται να είναι πάνω από 1024 pixels σε πλάτος. Σε τέτοια διάσταση το παραγόμενο αρχείο είναι σχετικά μικρό (π.χ. <500 ΚΒ) και εξοικονομείτε bandwidth στον web server.  Αν πρέπει να δώσετε πρόσβαση σε μεγάλες εικόνες, φτιάξτε μικρογραφίες (thumbnails) και με σύνδεσμο πάνω τους δώστε την μεγάλη εικόνα.  Για οργανωτικούς και διαχειριστικούς λόγους, καλό είναι οι εικόνες ενός site να βρίσκονται σε δικό τους φάκελο στο server.  Τα γραφικά διεπαφής συνήθως τα τοποθετούμε στο φόντο (background) block στοιχείων μέσω κανόνων CSS. Προγραμματισμός Εφαρμογών Διαδικτύου 26

27 Λίστες και και στοιχεία λίστας  Block στοιχεία για κατασκευή λιστών από (συνήθως) "συναφή" πράγματα.  με ul φτιάχνουμε unordered list (λίστα με κουκίδες)  με ol φτιάχνουμε ordered list (αριθμημένη λίστα)  ΠΡΟΣΟΧΗ: και στις δύο περιπτώσεις, στοιχεία λίστας (list item) βάζει το li  Βασικά attributes  type: καθορίζει το είδος κουκίδας/αρίθμησης σε μια λίστα ή ένα στοιχεί λίστας  Όπως όλες οι ρυθμίσεις μορφοποίησης, έχει αντικατασταθεί από CSS ρυθμίσεις για απλές σελίδες βέβαια, η χρήση είναι αποδεκτή  Επιτρέπονται μικτές λίστες ή/και φωλιασμένες λίστες (δείτε παράδειγμα)  Με CSS μπορούμε να έχουμε οριζόντιες λίστες – έτσι φτιάχνονται τα μενού! Προγραμματισμός Εφαρμογών Διαδικτύου 27

28 Λίστες - Παραδείγματα  Το type χρησιμοποιείται είτε σε ul/ol ή σε li στοιχεία  Προσέξτε πως γίνονται τα φωλιάσματα:  σε ένα li στοιχείο, εκτός από κείμενο, βάζουμε επιπλέον μια νέα λίστα! Προγραμματισμός Εφαρμογών Διαδικτύου 28

29 Πίνακες σειρές πίνακα - κελιά σε σειρά  Block στοιχείο για κατασκευή πινάκων.  Χρησιμοποιήθηκε κατά κόρο παλαιότερα για χωροθέτηση σελίδας. Πλέον γίνεται με CSS (θα τα δούμε και τα δύο σε εργαστήρια)  Η ετικέτα table ορίζει τον πίνακα. Μέσα της έχει tr. Κάθε τέτοιο ορίζει μια σειρά. Μέσα στα tr βάζουμε td για να ορίσουμε κελιά.  Βασικά attributes για table (ξεπερασμένα – πλέον γίνονται με CSS)  width: για ορισμό πλάτους πίνακα ή κελιού (σε pixel ή % του διαθέσιμου πλάτους)  height: για ορισμό ύψους κελιού (σε pixels)  align: για στοίχιση πίνακα ή περιεχομένου κελιού (left, center, right)  cellpadding: κενός χώρος από την έσω πλευρά των κελιών (σε pixels)  cellspacing: κενό ανάμεσα σε γειτονικά κελιά (σε pixels)  border: πάχος γραμμής σκελετού του πίνακα (σε pixels)  bgcolor: χρώμα φόντου σε κελί ή πίνακα  background: για ορισμό εικόνας ως φόντου στο κελί  Υπάρχουν κι άλλες ετικέτες σχετικές με πίνακα αλλά σπανίως χρησιμοποιούνται.  th, caption, thead, tbody, tfoot, col, colgroup (δείτε σε w3Schools)w3Schools Προγραμματισμός Εφαρμογών Διαδικτύου 29

30 Πίνακες – Παράδειγμα Χρήσης  Σημείωση: Η κόκκινη διακεκομμένη γραμμή στο d, προστέθηκε με Photoshop!  Η μορφοποίηση με attributes είναι παρωχημένη. Πλέον γίνεται με CSS.  Το ύψος των κελιών μπορεί να ρυθμιστεί με ιδιότητα height αλλά συνήθως το αφήνουμε να προκύψει με βάση το περιεχόμενο του κελιού.  H ιδιότητα colspan σε κελί/td προκαλεί συγχώνευσή του με τα επόμενα Ν κελιά, όπου Ν η τιμή της ιδιότητας. Όμοια η rowspan προκαλεί συγχώνευση του κελιού με τα Ν από κάτω του κελιά. (βλ.σχήμα τα κελιά με το b και το d) Προγραμματισμός Εφαρμογών Διαδικτύου 30

31 Χωροθέτηση με Πίνακες (ξεπερασμένη!)  Ζητούμενο είναι να ορίσουμε πάνω στη σελίδα ζώνες / περιοχές χρήσης με πίνακα.  Στην εικόνα/παράδειγμα, οι κόκκινες γραμμές μπήκαν με Photoshop για να τονιστούν οι φωλιασμένοι πίνακες!  Η χωροθέτηση με table απαιτεί καλό σχεδιασμό και φωλιασμένους πίνακες.  Ως λύση είναι περιοριστική με τα σημερινά δεδομένα (π.χ. μετέπειτα δραστικές αλλαγές είναι δύσκολες, προκύπτουν "άκαμπτες σχεδιάσεις" που δεν εξυπηρετούν διάφορα μεγέθη συσκευών), είναι όμως γρήγορη λύση.  Σε μικρά sites χωρίς επαγγελματικές απαιτήσεις πιθανώς να είναι αποδεκτή λύση.  Εξακολουθεί να υφίσταται σε πολλά sites γιατί απαιτείται δραστική επανασχεδίαση του site για μετάβαση σε χωροθέτηση με CSS (πολύ μεγάλο κόστος). Προγραμματισμός Εφαρμογών Διαδικτύου 31

32 Παράδειγμα Πολύπλοκης Μορφοποίησης Πίνακα (με CSS)  Τους πίνακες δεδομένων τους φτιάχνουμε...με πίνακες! (εικ. Από phpMyAdmin) Προγραμματισμός Εφαρμογών Διαδικτύου 32

33 Άλλες (Δευτερεύουσες) Ετικέτες Ετικέτες με Σημασιολογία  Είναι όλες inline ετικέτες. Προορίζονται για περιεχόμενο ειδικού τύπου.  Μερικές από αυτές:  dfn: το περιεχόμενο είναι ορισμός (definition term)  code: το περιεχόμενο είναι κώδικας (code) προγραμματισμού  samp: το περιεχόμενο είναι δείγμα (sample) εξόδου κάποιου λογισμικού  kbd: το περιεχόμενο είναι είσοδος σε πληκτρολόγιο (keyboard)  var: το περιεχόμενο είναι μεταβλητή (variable) σε κάποιο τεχνικό κείμενο.  cite: το περιεχόμενο είναι βιβλιογραφική αναφορά (citation)  Εξυπηρετούν πιο σωστά όταν ρυθμιστούν κατάλληλα με CSS κανόνες. Προγραμματισμός Εφαρμογών Διαδικτύου 33

34 Παρατηρήσεις #1 Διαχωρισμός Αρμοδιοτήτων!  Θα κάνουμε ένα διάλλειμα με τις ετικέτες για να παρατηρήσουμε μερικά πράγματα:  Η HTML καθορίζει κύρια θέματα δομής και περιεχομένου μιας ιστοσελίδας. Δευτερευόντως και σε μικρό βαθμό καθορίζει και θέματα όψης (π.χ. ετικέτα strong) και σημασιολογίας (π.χ. ετικέτα code).  Αν και δεν το έχουμε δει ακόμη, πρέπει να έχει γίνει ξεκάθαρο σε αυτό το σημείο ότι η γλώσσα CSS καθορίζει με πλήρη έλεγχο θέματα εμφάνισης και μορφοποίησης.  Μελλοντικά θα δούμε ότι μέσω της client-side γλώσσας προγραμματισμού Javascript και του DOM (εσωτερική αναπαράσταση σελίδας στη μνήμη του browser) ελέγχουμε θέματα αλληλεπίδρασης του χρήστη με τη σελίδα.  Γίνεται λοιπόν φανερός ο διαχωρισμός αρμοδιοτήτων των εμπλεκόμενων τεχνολογιών αλλά και η ωριμότητα τους. Προγραμματισμός Εφαρμογών Διαδικτύου 34

35 Παρατηρήσεις #2 Block και In-Line στοιχεία  Tα στοιχεία της HTML που είναι τύπου block:  Αποτελούν τα δομικά στοιχεία της σελίδας και μπορεί να περιέχουν άλλα block ή/και inline στοιχεία ή/και κείμενο.  Συνήθως σχεδιάζονται κάτω από τα προηγούμενα (στην σειρά του κώδικα) στοιχεία, ξεκινώντας από αριστερά και καταλαμβάνουν μια ορθογώνια περιοχή που εκτίνεται σε όλο το διαθέσιμο πλάτος.  Ορισμένες φορές ένα block στοιχείο δεν επιτρέπεται να περιέχει άλλα block στοιχεία (π.χ. μέσα σε δεν μπορούμε να βάλουμε - θα "σπάσει" η παράγραφος στα δύο!).  Tα στοιχεία της HTML που είναι τύπου inline:  Μπορεί να περιέχουν μόνο άλλα inline στοιχεία και κείμενο (π.χ. )  Συνήθως εμφανίζονται στη ροή του κειμένου και εμπεριέχονται μέσα σε block στοιχεία.  Υπάρχουν και HTML στοιχεία με μικτή συμπεριφορά (π.χ. ) Προγραμματισμός Εφαρμογών Διαδικτύου 35

36 Φόρμες #1 και κύρια στοιχεία φόρμας:,,,  Χρησιμοποιούνται για είσοδο δεδομένων από το χρήστη και "υποβολή" τους.  Τα δεδομένα που εισάγονται μπορούμε να τα επεξεργαστούμε:  στον client/browser με χρήση της JavaScript για έλεγχο ορθής συμπλήρωσης της φόρμας (validation) συμπληρώθηκαν τα υποχρεωτικά στοιχεία; είναι αποδεκτές οι τιμές; για εκτέλεση υπολογισμών τοπικά στον browser, κτλ  στον server (μετά από submit) με χρήση server-side-scripting (PHP, κτλ) για έλεγχο ορθής συμπλήρωσης, καταχώρηση σε βάσεις δεδομένων, κτλ  Ως ετικέτα, η φόρμα (form) είναι block στοιχείο που μέσα της βάζουμε άλλα στοιχεία διεπαφής (λίστες, κουμπιά, πεδία κειμένου, κτλ)  Βασικά attributes:  name: το όνομα της φόρμας – χρήσιμο για πρόσβαση στα στοιχεία της  method: παίρνει τιμή POST ή GET που καθορίζει τον τρόπο αποστολής  action: URL του αρχείου που θα παραλάβει τα δεδομένα που στέλνει η φόρμα  enctype: ο τρόπος κωδικοποίησης των δεδομένων που θα σταλούν Προγραμματισμός Εφαρμογών Διαδικτύου 36

37 Φόρμες #2  Παράδειγμα δήλωσης φόρμας: εδώ μπαίνουν τα στοιχεία διεπαφής που θέλουμε  η ετικέτα φόρμας έχει άνοιγμα και κλείσιμο  σκέτη η ετικέτα φόρμας δεν εμφανίζει κάτι στον browser  τα στοιχεία διεπαφής μέσα στη φόρμα μπορεί να οργανωθούν με HTML κώδικα, κατά βούληση  η διάταξη και η μορφοποίηση των στοιχείων διεπαφής στις φόρμες είναι καθοριστικοί παράγοντες για να είναι αυτές εύχρηστες και λειτουργικές  Η παράμετρος enctype δεν είναι συνήθως απαραίτητη στη δήλωση φόρμας.  Μας καλύπτει η default τιμή: application/x-www-form-urlencoded  Αν όμως η φόρμα χρησιμοποιείται και για αποστολή/ανέβασμα (upload) αρχείου, τότε την χρησιμοποιούμε υποχρεωτικά βάζοντας τιμή: enctype="multipart/form-data" Προγραμματισμός Εφαρμογών Διαδικτύου 37

38 Φόρμες #3: Αποστολή με GET ή POST;  method="GET"  Τα δεδομένα που αποστέλλονται προσκολλούνται στο URL ως ζευγάρια name=value, όπου name είναι η τιμή της παραμέτρου name ενός στοιχείου διεπαφής, και value η τιμή αυτού του στοιχείου. δες παράδειγμα στο επόμενο slide  Πλεονέκτημα: το αποτέλεσμα της υποβολής της φόρμας (δηλ. η σελίδα του action με τις παραμέτρους που υποβλήθηκαν) μπορεί να γίνει bookmark. Έτσι: ξανακαλούμε εύκολα τη σελίδα χωρίς να συμπληρώσουμε τη φόρμα! μπορούμε να στείλουμε τη σελίδα αποτελεσμάτων σε φίλο μπορούμε να οδηγήσουμε τα web-bots σε δεδομένα που είναι προσβάσιμα με φόρμα το web-bot "δεν ξέρει" να συμπληρώσει μια σύνθετη φόρμα!!!  Μειονέκτημα: Υπάρχει όριο στο πόσα δεδομένα μπορεί να αποσταλούν με αυτό τον τρόπο. Δεν ενδείκνυται για πολλά - το όριο εξαρτάται από τον browser  Μειονέκτημα: Επειδή τα δεδομένα που αποστέλλονται είναι ορατά στο URL της σελίδας του action (άρα και στο παράθυρο του browser, στη θέση της διεύ- θυνσης), δεν ενδείκνυται για αποστολή ευαίσθητων προσωπικών δεδομένων. Προγραμματισμός Εφαρμογών Διαδικτύου 38

39 Φόρμες #4 Επίδειξη έκθεσης Πληροφορίας κατά την υποβολή με GET  Κώδικας φόρμας:  Όψη φόρμας σε browser (αριστερά) και σελίδα αποτελεσμάτων (δεξιά)  Προσέξτε πώς τα προσωπικά δεδομένα που αποστάλθηκαν είναι ορατά και εκτεθειμένα στο browser, όταν η φόρμα γίνεται submit με GET  To URL δεξιά μπορεί να γίνει bookmark!  Σημείωση: τα URLs έχουν υποστεί επεξεργασία για να βγουν μικρά τα screenshots. Προγραμματισμός Εφαρμογών Διαδικτύου 39

40 Φόρμες #5: Αποστολή με GET ή POST ;  method="POST"  Αυτή η μέθοδος στέλνει τα δεδομένα της φόρμας μέσω HTTP post συναλλαγής.  Δεν είναι ορατά στο URL όπως με τη μέθοδο GET.  Μειονέκτημα: Δεν είναι εφικτό να γίνει bookmark η σελίδα αποτελεσμάτων, δηλαδή η σελίδα που είναι δηλωμένη στο action attribute της φόρμας.  Πλεονέκτημα: Δεν υπάρχει όριο στο πόσα δεδομένα μπορεί να σταλούν με POST  Πλεονέκτημα: Καθώς τα δεδομένα που αποστέλλονται δεν εκτίθενται στο URL, είναι πιο ασφαλής μέθοδος συγκριτικά με την GET.  Δεν είναι όμως απόλυτα ασφαλής μέθοδος! Υψηλή ασφάλεια παρέχει μόνο η χρήση πρωτόκολλου https που κρυπτογραφεί τα δεδομένα που αποστέλλονται!  Υποχρεωτική μέθοδος αν γίνεται και upload/ανέβασμα αρχείου! Θα δούμε στη συνέχεια τα στοιχεία διεπαφής που μπορούμε να βάλουμε σε μια φόρμα. Προγραμματισμός Εφαρμογών Διαδικτύου 40

41 Φόρμες #6:  Πρόκειται για ένα πολυμορφικό στοιχείο διεπαφής που ανάλογα τη ρύθμιση (μέσω του attribute type) παίρνει διάφορες μορφές.  Το στοιχείο input ως πεδίο κειμένου:  πεδίο κειμένου: (για λίγο κείμενο, μιας σειράς)  πεδίο κειμένου, ασφαλείας: (δείχνει κουκίδες) δεν είναι πλήρως ασφαλής η χρήση του με GET – μόνο με https και κρυπτογράφιση  Attributes (πέρα από τα id, name και class)  size: για το πλήθος ορατών χαρακτήρων (default 20) – καθορίζει το πλάτος  maxlength: για τον max επιτρεπτό αριθμό χαρακτήρων που μπορεί να γραφούν  value: για μια προκαθορισμένη τιμή (κείμενο) – αν δεν υπάρχει, εμφανίζεται άδειο!  Παράδειγμα Κώδικα Προγραμματισμός Εφαρμογών Διαδικτύου 41

42 Άλλα Λογισμικά  WYSIWYG editors (δεν χρειάζονται για το εργαστήριο – έχουν αρκετές ευκολίες αλλά είναι δεσμευτικά αν κανείς τα χρησιμοποιήσει εκτενώς):  DreamWeaver (Adobe) ή Expression Web (Microsoft) το 2 ο είναι διαθέσιμο και δωρεάν με Ακαδημαϊκή Άδεια Χρήσης  Τι άλλο υπάρχει: http://en.wikipedia.org/wiki/Comparison_of_HTML_editors http://en.wikipedia.org/wiki/Comparison_of_HTML_editors Προγραμματισμός Εφαρμογών Διαδικτύου 42

43 Λογισμικά που Χρησιμοποιεί η Αγορά Εργασίας  Για ανάπτυξη Δυναμικών Ιστοσελίδων χρειάζεστε:  Εφαρμογή/editor ανάπτυξης ιστοσελίδων  Web Server – Έχετε τις εξής κύριες επιλογές: Apache (www.apache.org): open source – "servίρει" πάνω από το μισό web (2008) εκδόσεις για όλα τα λειτουργικά συστήματα IIS – Ο web server της Microsoft. Υπάρχει στις Pro εκδόσεις των Windows (αλλά δεν εγκαθίσταται by default – πρέπει να το ζητήσουμε και μπορεί να γίνει και εκ των υστέρων). Δημοφιλές το MS WebMatrix: http://www.microsoft.com/web/webmatrix/ http://www.microsoft.com/web/webmatrix/  Τους 3 "μεγάλους" browsers (Internet Explorer, Firefox, Chrome) Προγραμματισμός Εφαρμογών Διαδικτύου 43

44 ...συνέχεια...  Server-Side Scripting Languages: οι πιο διαδεδομένες τεχνολογίες είναι:  PHP (www.php.net) de-facto standard (με Apache) για non-windows περιβάλλοντα (Unix, Linux, κτλ) πλέον και για IIS με επίσημη υποστήριξη από Microsoft (http://www.iis.net/)  ASP / ASP.NET Η "επίσημη" λύση σε πλατφόρμες MS – Συνοδεύει τον IIS – (χρήση Visual Studio)  JSP Java Server Pages Η γνωστή Java σε έκδοση για Server Side Scripting – Απαιτεί την εγκατάσταση του Tomcat (application server) σε συνεργασία με τον Apache web server. Διαδεδομένη λύση σε enterprise περιβάλλοντα (μεγάλες εταιρικές εφαρμογές).  Σύστημα Διαχείρισης Βάσης Δεδομένων  MySQL: open source με έκδοση για όλα τα Λειτουργικά Συστήματα  MS SQL Server (μόνο σε Windows πλατφόρμες, δωρεάν η developer edition) ...γενικά υποστηρίζονται όλα τα διαδεδομένα Συστήματα Διαχείρισης Βάσεων Δεδομένων (RDBMS) όπως Oracle, DB2 (της IBM), Sybase, κτλ  Υπάρχουν και αρκετά ολοκληρωμένα περιβάλλοντα (IDE) για ανάπτυξη web εφαρμογών με PHP: NetBeans for PHP, CakePHP, Zend, κτλ Προγραμματισμός Εφαρμογών Διαδικτύου 44

45 Τέλος Ενότητας