Εισαγωγή στην ASP.NET 4.0

Transcript

1 Εισαγωγή στην ASP.NET 4.0 Σημειώσεις Σεμιναρίου Επιμέλεια: Βασίλης Κόλιας Ενότητα 1 Το Web και η αρχιτεκτονική του HyperText Markup Language Cascading Style Sheets 1.0.0

2 Πίνακας Περιεχομένων Πίνακας Περιεχομένων Εισαγωγή Τι είναι το Web Λίγη ιστορία Η αρχιτεκτονική του Web URL Browser Web Server Πόροι HTTP HTML ASP.NET Εισαγωγή στην HTML <title> Σχόλια <h*> <p> <br /> <hr> <b> <i> <u> <div> <span> <a> <img> <table> Φόρμες Cascading Style Sheets Inline Styles Embedded Styles External Styles Κανόνες CSS Universal Selector Descendant Selector Child Selector

3 Class Selector ID Selectors Ιδιότητες Μορφοποίησης Πλεονεκτήματα CSS

4 1. Εισαγωγή Καλωσορίσατε στο σεμινάριο Εισαγωγή στην ASP.NET 4.0! Όπως κάθε ταξίδι ξεκινά με ένα μικρό βήμα, έτσι και η εκμάθηση μιας γλώσσας ή μιας τεχνολογίας ξεκινά με τις θεμελιώδεις έννοιες που την αποτελούν. Παρόλο που το σεμινάριο αυτό επικεντρώνεται στην τεχνολογία ASP.NET, είναι χρήσιμο πριν ξεκινήσουμε με την παρουσίασή της να την τοποθετήσουμε στο περιβάλλον της να παρουσιάσουμε δηλαδή όλες τις τεχνολογίες που με τον έναν ή τον άλλο τρόπο σχετίζονται με αυτήν και επηρεάζουν άμεσα ή έμμεσα την ανάπτυξη μιας εφαρμογής ASP.NET. Σε αυτό το εισαγωγικό κεφάλαιο θα ασχοληθούμε με τα βασικά χαρακτηριστικά του Web, του συστήματος διασυνδεδεμένων υπερκειμένων που λειτουργεί πάνω στο Internet. Χρησιμοποιώντας έναν web browser (φυλλομετρητή), ένας χρήστης μπορεί να δει ιστοσελίδες που μπορεί να περιέχουν κείμενο, εικόνες, videos και άλλα πολυμέσα και να πλοηγηθεί μεταξύ τους μέσω των υπερσυνδέσμων Τι είναι το Web To World Wide Web (σε συντόμευση www ή w3) κοινώς γνωστό απλά ως Web, είναι ένα κατανεμημένο σύστημα παράδοσης εγγράφων, που χρησιμοποιεί πρωτόκολλα εφαρμογών στο Διαδίκτυο. Το Web έχει ξεπεράσει αισίως τη δεύτερη δεκαετία ύπαρξής του, ωστόσο ακόμα θεωρείται ένα νέο τεχνολογικό και κοινωνικό φαινόμενο, ενώ πλέον μελετάται και αντιμετωπίζεται σαν ένας οργανισμός. Το Web αποτελεί μια εντυπωσιακή πλατφόρμα με χιλιάδες επιτυχημένους καρπούς και η δυναμική του είναι τέτοια που σίγουρα θα επεκταθεί περεταίρω, ώστε να ενσωματώνει νέες γλώσσες, να είναι πλουσιότερο σε πολυμέσα και δραστηριότητες, να φιλοξενεί περισσότερες πληροφορίες και παράλληλα να παρέχει τα εργαλεία και τις μεθόδους που απαιτούνται για την επεξεργασία και την αξιοποίηση των νέων δεδομένων Λίγη ιστορία Τον Μάρτιο του 1989 o Tim Burners-Lee, ένας ερευνητής στο κέντρο ερευνών CERN της Γενεύης, δημοσίευσε μια πρόταση για τη δημιουργία ενός συστήματος που θα διευκόλυνε τη δημιουργία, τη δημοσίευση και τη διαχείριση των αποτελεσμάτων της έρευνας των μελών του CERN. Το σύστημα αυτό θα υποστήριζε μεταξύ άλλων, «τη δημιουργία συνδέσμων και υλικού από τους χρήστες του, έτσι ώστε η συγγραφή τους να είναι καθολική» αλλά και την «αυτόματη ειδοποίηση ενός αναγνώστη όταν νέο υλικό που τον ενδιαφέρει γίνει διαθέσιμο». Λίγο αργότερα κατάφερε να υλοποιήσει τις περισσότερες από τις προδιαγραφές του, ωστόσο οι περισσότερες από αυτές ωρίμασαν πολύ αργότερα, όπως η ιδέα του wiki, τα blogs και τα RSS/Atom feeds. Αυτό που κατάφερε να υλοποιήσει όμως ο Tim Berners-Lee ήταν ουσιαστικά όλα τα εργαλεία που χρειάζονταν για να αποδείξει ότι η ιδέα του ήταν ρεαλιστική: τον πρώτο web server, τον πρώτο web browser και την πρώτη ιστοσελίδα. Κατά την υλοποίηση της ιδέας του ανέπτυξε επίσης τρεις θεμελιώδεις τεχνολογίες: 1. Ένα σύστημα μοναδικών αναγνωριστών για τις εργασίες των ερευνητών, τότε γνωστό ως Universal Document Identifier, σήμερα γνωστό ως Uniform Resource Identifier. 2. Τη γλώσσα μορφοποίησης του κειμένου των εργασιών, την HyperText Markup Language (HTML). 3. Το πρωτόκολλο επικοινωνίας μεταξύ του browser και του server, το HyperText Transfer Protocol (HTTP). Από τότε το Web εξελίχθηκε. Προστέθηκαν πολλές τεχνολογίες για να το υποστηρίξουν, ενώ οι χρήστες του αυξήθηκαν με τρομερούς ρυθμούς, καθιστώντας το σήμερα αναπόσπαστο κομμάτι της καθημερινότητας των σύγχρονων κοινωνιών. Τα 4

5 θεμελιώδη χαρακτηριστικά του όμως παρέμειναν αναλλοίωτα. Στις επόμενες παραγράφους ακολουθεί η αναλυτική περιγραφή τους. Εικόνα Ο δημιουργός του Web, Tim Burners-Lee, ο πρώτος Web Server και ο πρώτος Web Browser 1.3. Η αρχιτεκτονική του Web Όταν ένας χρήστης εισάγει μια διεύθυνση (URL) στον browser του π.χ. ο browser του χρήστη αποστέλλει ένα αίτημα (request) στον αντίστοιχο web server για έναν πόρο (resource), που τις περισσότερες φορές είναι μια ιστοσελίδα σε HTML. Ο server αποστέλλει μέσω του πρωτοκόλλου HTTP τη συγκεκριμένη ιστοσελίδα την οποία με τη σειρά του ο browser θα μεταφράσει σε διάφορα οπτικά αντικείμενα και θα τα προβάλει στο χρήση. Αυτό το απλό σενάριο λαμβάνει χώρα στο Web χιλιάδες φορές και σε καθημερινή βάση. Στο σενάριο αυτό, που είναι η βάση της επικοινωνίας στο Web, συναντήσαμε τους όρους URL, Browser, Web Server, πόρος, HTTP και HTML. Ας δούμε καθ ένα από αυτούς τους όρους ξεχωριστά URL Ένα Uniform Resource Locator (URL) είναι μια συγκεκριμένη συμβολοσειρά που αποτελεί μια αναφορά σε έναν πόρο στο Internet. Ένα URL είναι μια κατηγορία ενός Uniform Resource Identifier (URI) αλλά σε πολλές περιπτώσεις οι δύο όροι χρησιμοποιούνται (εσφαλμένα) σαν συνώνυμοι. Το συντακτικό ενός URL είναι το ακόλουθο: scheme://domain:port/path?query_string#fragment_id Όπου: scheme: (συχνά καλούμενο ως πρωτόκολλο) ένα όνομα που καθορίζει τον ονοματοχώρο, τον σκοπό και το συντακτικό του υπόλοιπου URL. Για παράδειγμα το πρόγραμμα (π.χ. ο browser) που θα επεξεργαστεί το URL θα κάνει ένα αίτημα HTTP στον host example.org. Αν το URL ήταν της μορφής mailto: bob@example.com θα άνοιγε τον mail client του χρήστη για την προετοιμασία ενός προς τον χρήστη bob@example.com. Άλλα παραδείγματα σχημάτων αποτελούν τα https, ftp, gopher, wais. domain: ένα πεδίο όπου μπαίνει το domain name ή η διεύθυνση IP του προορισμού στον οποίο αναφέρεται το URL. Για παράδειγμα το domain google.com αντιστοιχεί στη διεύθυνση , οπότε οποιοδήποτε 5

6 από τα δύο μπορεί να χρησιμοποιηθεί. Την αντιστοίχηση του ευκολομνημόνευτου domain name με μια IP αναλαμβάνει η υποδομή του Internet μέσα από το Domain Name System. port: ένας προαιρετικός αριθμός που αντιστοιχεί σε μια θύρα του απομακρυσμένου server. Για το scheme http η προεπιλεγμένη τιμή, που είναι η 80 οπότε αν ο server έχει την ανάλογη ρύθμιση το συγκεκριμένο πεδίο μπορεί να παραληφθεί. Κάθε scheme έχει τη δική του προεπιλεγμένη τιμή. path: ένα πεδίο που προσδιορίζει την ακριβή τοποθεσία του συγκεκριμένου πόρου που αιτείται ο χρήστης ή του προγράμματος που θα εκτελεστεί στο server. Συνήθως γίνεται διάκριση μεταξύ πεζών και κεφαλαίων γραμμάτων, οπότε χρειάζεται προσοχή κατά τη σύνταξή του. Το path μπορεί να αντιστοιχεί στο πραγματικό path προς το συγκεκριμένο πόρο/αρχείο του file system του απομακρυσμένου server ή να είναι εικονικό. query_string: στο πεδίο αυτό περιλαμβάνονται δεδομένα που προωθούνται στο λογισμικό που τρέχει στον server. Ξεκινά πάντα με το χαρακτήρα? και αποτελείται από ζευγάρια παραμέτρων/τιμών τα οποία διαχωρίζονται με το χαρακτήρα & (ampersand), για παράδειγμα:?first_name=john&last_name=milton fragment_id: το πεδίο αυτό προσδιορίζει ένα τμήμα ή μια θέση μέσα στον αιτειθέντα πόρο. Συνήθως προσδιορίζει ένα τμήμα μέσα σε μια ιστοσελίδα, οπότε ο browser εμφανίζει τη σελίδα κατευθείαν σε αυτό το τμήμα. Το πεδίο αυτό ξεκινά πάντα με το χαρακτήρα #. Είναι πολύ σημαντικό να γνωρίζουμε το συντακτικό ενός URL και τι αντιπροσωπεύουν τα τμήματά του Browser Ο browser δεν είναι τίποτα άλλο από μια εφαρμογή (software application) εγκαταστημένη στον υπολογιστή ή κινητό του χρήστη. Οι βασικές δουλειές που επιτελεί ένας browser είναι τρεις: (α) Να αιτείται πόρους από διάφορους web servers που ενδιαφέρουν το χρήστη όπως π.χ. ιστοσελίδες, αρχεία μουσικής, video, εικόνες κ.τ.λ. και (β) να λαμβάνει αρχεία γραμμένα στην ειδική γλώσσα HTML τα οποία ονομάζουμε ιστοσελίδες (ή εναλλακτικά αρχεία μουσικής, video και εικόνες) και γ) να τα παρουσιάζει στο χρήστη. Τα συνηθέστερα συστατικά του παραθύρου ενός browser είναι: Βασικά κουμπιά περιήγησης (μπροστά, πίσω, refresh, stop). Μια γραμμή για την εισαγωγή URL (Uniform Resource Locator). Μια μεγάλη περιοχή για την εμφάνιση των ιστοσελίδων. Στην καρδιά ενός browser βρίσκεται η μηχανή browser (browser engine) η οποία λαμβάνει περιεχόμενο με σημάνσεις (markup) όπως HTML ή XML και οδηγίες μορφοποίησης όπως CSS ή XSL και εμφανίζει τα παραχθέντα γραφικά στην οθόνη του χρήστη. Χειρίζεται επίσης τους υπερσυνδέσμους μιας ιστοσελίδας, τα cookies, τα plug-ins και φυσικά οποιαδήποτε μικροπρογράμματα (scripts) πρέπει να τρέξουν για μια ιστοσελίδα. Οι πιο διάσημοι browsers είναι: ο Internet Explorer με τη μηχανή Trident, Mozilla Firefox με τη μηχανή Gecko, Google Chrome και Safari με τη μηχανή WebKit και Opera με τη μηχανή Presto Web Server Ένας web server είναι ο συνδυασμός ενός, ή περισσότερων υπολογιστών και ενός προγράμματος που έχει εγκατασταθεί σε αυτούς και τρέχει διαρκώς στο παρασκήνιο (service). Σε ένα απλό παράδειγμα ο υπολογιστής που λειτουργεί ως web server είναι συνδεμένος στο Internet και φέρει μια στατική μοναδική διεύθυνση IP (π.χ ) η οποία έχει αντιστοιχηθεί με μια διεύθυνση εύκολη στην απομνημόνευση όπως π.χ. Σε μια απλή περίπτωση, στον web server είναι αποθηκευμένοι όλοι οι πόροι που μπορεί να θελήσει ο χρήστης και είναι οργανωμένοι σε φακέλους και υποφακέλους. Ανάλογα με το αίτημα του χρήστη ο web server είναι υποχρεωμένος να αναζητήσει τον 6

7 κατάλληλο πόρο και να το στείλει στον κατάλληλο χρήστη. Η αναζήτηση γίνεται με βάση το URI (Uniform Resource Identifier) που εισήγαγε ο χρήστης. Οι πιο διάσημοι web servers όσον αφορά το software είναι ο Apache Web Server και o Microsoft IIS. Συνήθως μηχανήματα που τρέχουν ως servers είναι εξοπλισμένα με πολυπύρηνους επεξεργαστές Intel Xeon και πολλά Gb μνήμης, χωρίς αυτό να είναι περιοριστικό. Ανάλογα με τον αναμενόμενο φόρτο εργασιών, είναι δυνατόν να αρκεί ένας παλιός Pentium ή να απαιτούνται πάρα πολλά μηχανήματα τα οποία θα συνεργάζονται σε ειδική διάταξη (π.χ. clusters υπολογιστών) Πόροι Στο Web τα δεδομένα που ανταλλάσσονται μεταξύ ενός πελάτη και ενός εξυπηρέτη ομαδοποιούνται κάτω από την έννοια ενός πόρου (resource) που στην πλειονότητα των περιπτώσεων αντιστοιχεί σε ένα αρχείο. Κάθε πόρος στο Web είναι ουσιαστικά οτιδήποτε έχει ταυτότητα και μπορεί να δημοσιευτεί. Κάθε πόρος επίσης συνοδεύεται από μια προδιαγραφή του τύπου δεδομένων του (format). Η προδιαγραφή αυτή ενσωματώνει μια συμφωνία για τη σωστή απόδοση της αναπαράστασης των δεδομένων. Έτσι για παράδειγμα η προδιαγραφή της HTML ορίζει τους κανόνες εμφάνισης κάποιου περιεχομένου, ενώ η προδιαγραφή των εικόνων τύπου JPEG ορίζει πως θα εμφανιστεί ένα αρχείο εικόνας στην οθόνη του υπολογιστή. Χωρίς αυτές τις προδιαγραφές τα επικοινωνούντα μέρη δεν θα μπορούσαν να συμφωνήσουν στη σημασιολογία ενός πόρου και ουσιαστικά δεν θα ήξεραν τι να κάνουν με τα ανταλλασσόμενα δεδομένα. Οι τύποι δεδομένων των πόρων πρωταρχικά διακρίνονται σε δύο κατηγορίες: α) Τους δυαδικούς τύπους (binary types) που αφορούν στα δεδομένα που προσδιορίζονται για άμεση χρήση από τους επεξεργαστές (π.χ. αριθμητικές τιμές, δείκτες, συμπιεσμένα δεδομένα) και β) στους κειμενικούς τύπους (textual types) που προσδιορίζονται με μια προκαθορισμένη κωδικοποίηση σαν μια σειρά χαρακτήρων (π.χ. μια HTML σελίδα, ένα μήνυμα ηλεκτρονικού ταχυδρομείου). Παρόλο που είναι σαφής, η παραπάνω διάκριση δεν αρκεί για την αποδοτική χρήση των πόρων στο Web. Το πρότυπο MIME (Multipurpose Internet Mail Extensions) δημοσιεύτηκε το 1996 με το Request for Comment (RFC) έγγραφα Η βασική έννοια του προτύπου αυτού είναι οι τύποι μέσων (media types) που ονοματίζουν μοναδικά διαφορετικούς τύπους δεδομένων έτσι ώστε οι εφαρμογές που τους υποστηρίζουν να μπορούν να «αντιμετωπίζουν τα δεδομένα με τον κατάλληλο τρόπο». Η ενότητα 5 του RFC 2045 προσδιορίζει ότι ένας τύπος μέσου αποτελείται από έναν προσδιοριστή της μορφής type/subtype και ένα σύνολο προαιρετικών παραμέτρων attribute=value. Για παράδειγμα ο προεπιλεγμένος τύπος μέσου text/plain; charset=us-ascii προσδιορίζει ένα κειμενικό αρχείο στην κωδικοποίηση US-ASCII. Το RFC 2046 ορίζει ένα σύνολο συνηθισμένων τύπων δεδομένων και τις παραμέτρους τους, ωστόσο δεν γίνεται να απαριθμηθούν όλοι οι τύποι δεδομένων σε ένα RFC. Για το λόγο αυτό, το RFC 2048 και η ενημέρωσή του RFC 4288 ορίζουν μια διαδικασία καταχώρησης, με την οποία νέοι τύποι μέσων καταχωρούνται στον οργανισμό IANA. Μέχρι τις αρχές του 2010 η επίσημη λίστα περιείχε περισσότερους από χίλιους τύπους όπως text/html, image/jpeg και application/msword, οργανωμένους κάτω από οχτώ κατηγορίες HTTP Οι δυο οντότητες που περιγράφηκαν παραπάνω δηλαδή ο browser (που στην ουσία αντιπροσωπεύει το χρήστη) και ο web server, επικοινωνούν μέσω ενός πρωτοκόλλου που ονομάζεται HTTP. Να διευκρινίσουμε ότι με τον όρο πρωτόκολλο υπολογιστή ονομάζουμε ένα σύνολο κανόνων για την επιτυχή επικοινωνία μεταξύ ενός server και ενός client. Στην ουσία αποτελείται από συγκεκριμένα μηνύματα τα οποία ανταλλάσσονται μεταξύ δύο υπολογιστών με συγκεκριμένη σειρά για την επίτευξη μιας εργασίας. Στην περίπτωση του Web, η εργασία αυτή είναι ο διαμοιρασμός πόρων (HTML σελίδων, εικόνων κ.τ.λ.) μεταξύ ενός web browser και ενός web server. Το HTTP ανήκει στην κατηγορία πρωτοκόλλων request-response. Αυτό πρακτικά σημαίνει ότι κάθε φάση του πρωτοκόλλου ολοκληρώνεται με την ανταλλαγή ενός αιτήματος 7

8 (request) από τον browser που λέμε ότι παίζει το ρόλο του πελάτη (του εξυπηρετούμενου) και μιας απάντησης σε αυτό το αίτημα (response) από το server (του εξυπηρέτη). Τόσο ένα μήνυμα request όσο και ένα μήνυμα response έχουν μια προκαθορισμένη δομή. Ένα HTTP request μπορεί να χωριστεί σε τρία βασικά μέρη. Το πρώτο κομμάτι περιλαμβάνει τις εξής πληροφορίες: HTTP Request Method, το οποίο δηλώνει την πράξη που επιθυμούμε να εκτελεστεί σε ένα πόρο στο server. Η HTTP υποστηρίζει συνολικά εννιά τέτοιες πράξεις-μεθόδους: HEAD, GET, POST, PUT, DELETE, TRACE, OPTIONS, CONNECT, PATCH. Από αυτές οι πιο συχνά χρησιμοποιούμενες μεταξύ ενός browser και ενός server είναι η GET και η POST γι αυτό και θα αναλυθούν παρακάτω με μεγαλύτερη λεπτομέρεια. URL, το οποίο δηλώνει τη διεύθυνση του πόρου τον οποίο αιτείται ο πελάτης (χρήστης). Την έκδοση του HTTP πρωτοκόλλου που χρησιμοποιεί ο χρήστης. Το δεύτερο τμήμα ενός μηνύματος HTTP request περιλαμβάνει ένα ή περισσότερα headers. Αυτά είναι διάφορα πεδία που χρησιμοποιούνται για να δώσουν πληροφορίες (δευτερευούσης κυρίως) σημασίας σχετικά με τον πελάτη, όπως π.χ. τι είδους browser χρησιμοποιεί ο πελάτης, το λειτουργικό του σύστημα κ.α. Καθ ένα από τα headers καταλαμβάνει μια γραμμή η οποία αποτελείται από το όνομα του header, το χαρακτήρα : και τέλος την τιμή για το συγκεκριμένο πεδίο. Το τρίτο τμήμα ενός μηνύματος HTTP request είναι γνωστό ως body. Το κομμάτι αυτό είναι προαιρετικό αλλά όταν υπάρχει, περιλαμβάνει τα δεδομένα που ενδέχεται να συνοδεύουν το αίτημα του πελάτη π.χ. τα δεδομένα μιας φόρμας που συμπλήρωσε ο χρήστης. Το HTTP Request Body διαχωρίζεται από το HTTP Request Header απαραίτητα με μια κενή γραμμή. Ένα HTTP Response έχει παρόμοια δομή με αυτή ενός HTTP Request. Και αυτό το μήνυμα αποτελείται από τρία βασικά τμήματα. Το πρώτο τμήμα περιλαμβάνει τις εξής πληροφορίες: Την έκδοση του HTTP πρωτοκόλλου που χρησιμοποιείται. Ένα κωδικό με το αποτέλεσμα την διαδικασίας (π.χ. κωδικός για επιτυχία ή κωδικός κάποιου λάθους) Μια λέξη που περιγράφει το αποτέλεσμα της διαδικασίας. Το δεύτερο τμήμα περιλαμβάνει headers παρόμοια σε σκοπό και δομή με αυτά των HTTP Request Headers. Το τρίτο τμήμα περιλαμβάνει το body το οποίο στις περισσότερες των περιπτώσεων περιλαμβάνει τον κώδικα HTML της ιστοσελίδας που είχε αιτηθεί ο client. Σε αυτό το σημείο θα πρέπει να αναφερθούμε αναλυτικότερα στις δύο βασικές μεθόδους για ένα HTTP Request, τη GET και την POST. Η μέθοδος GET χρησιμοποιείται για την αίτηση αποστολής ενός πόρου από το server πίσω στον πελάτη. Σύμφωνα με το πρότυπο η μέθοδος GET θα πρέπει να χρησιμοποιείται αποκλειστικά για την ανάκτηση δεδομένων (π.χ. μιας ιστοσελίδας) και για κανένα επιπρόσθετο λόγο (π.χ. αποθήκευση ή ενημέρωση δεδομένων στο server κ.τ.λ.) αν και αυτό στην πράξη δεν τηρείται πάντα. Είναι δυνατόν κάθε request να συνοδεύεται από δεδομένα του πελάτη. Στην περίπτωση της GET τα δεδομένα αυτά προσκολλώνται στo URL με το query string που εξετάσαμε παραπάνω. Στη μέθοδο GET το μέγεθος των δεδομένων που μεταδίδονται είναι σχετικά περιορισμένο και είναι ορατό άμεσα από το χρήστη, αφού εμφανίζεται στο URL. Αντίθετα η μέθοδος POST χρησιμοποιείται τυπικά για την αποστολή δεδομένων στο server προς περαιτέρω επεξεργασία, για παράδειγμα το όνομα και ο κωδικός ενός χρήστη που αποστέλονται στο server μέσω μιας φόρμας login. Σε αντίθεση με την GET τα δεδομένα προς αποστολή δεν προσκολλώνται στην URL παρά τοποθετούνται στο HTTP Request Body. Κατά συνέπεια μπορεί να έχουν πολύ μεγαλύτερο μέγεθος και φυσικά δεν είναι άμεσα ορατά από τον χρήστη. Τα παρακάτω παραδείγματα παρουσιάζουν ένα HTTP Request με τη μέθοδο GET και POST αντίστοιχα. GET HTTP/1.0 User-Agent: Mozilla/4.0 8

9 Εισαγωγή στην ASP.NET 4.0 [κενή γραµµή] POST HTTP/1.0 From: User-Agent: Mozilla/4.0 Content-Type: application/x-www-form-urlencoded Content-Length: 30 Username=testName&password=1234 Ένα HTTP Response έχει την παρακάτω μορφή: HTTP/ OK Date: Sun, 18 March :59:59 GMT Content-Type: text/html Content-Length: 1354 <h1>hello World!</h1>... Το HTTP χαρακτηρίζεται ως ένα connectionless και stateless πρωτόκολλο, πράγμα που σημαίνει πως μόλις ένας κύκλος request/response έχει ολοκληρωθεί όλες οι πληροφορίες που έχει ο server για τον client χάνονται. Αυτό ίσως έρχεται σε αντίθεση με τη θεώρηση που έχουν οι περισσότεροι χρήστες για το HTTP μέσα από την καθημερινή τους εμπειρία. Π.χ. όταν ο χρήστης κάνει login σε μια σελίδα Α και εν συνεχεία μεταβαίνει σε μια σελίδα Β, η σελίδα Β μοιάζει να θυμάται ότι ο χρήστης είναι ο ίδιος που είχε κάνει προηγουμένως login. Ωστόσο θα πρέπει να τονιστεί ότι για την επίτευξη τέτοιων λειτουργιών έχουν αναπτυχθεί ειδικές τεχνικές (π.χ. cookies) τις οποίες και θα μελετήσουμε σε επόμενα κεφάλαια. Να διευκρινιστεί τέλος ότι η διαδικασία ανταλλαγής μηνυμάτων γίνεται σιωπηρά στο παρασκήνιο από το browser και τον server και ο χρήστης σε καμία περίπτωση δεν έρχεται σε επαφή με αυτά τα μηνύματα παρά μόνο βλέπει το τελικό αποτέλεσμα π.χ. την ιστοσελίδα που ζήτησε. ΗTTP Request POST HTTP/1.0 User-Agent: Mozilla/4.0 Content-Type: application/x-wwwform-urlencoded Content-Length: 30 Username=testName HTTP Response HTTP/ OK Date: Sun, 18 March :59:59 GMT Content-Type: text/html Content-Length: 1354 <h1>hello World!</h1> Εικόνα Μια τυπική δοσοληψία στο Web 9

10 HTML Οι ιστοσελίδες γράφονται με βάση τη γλώσσα Hyper Text Markup Language (HTML). Η τελευταία έκδοση της HTML είναι η έκδοση 5, η οποία ωστόσο δεν έχει οριστικοποιηθεί, δεν έχει πλήρη υποστήριξη από τους browsers και γι αυτό δεν θα την εξετάσουμε σε βάθος. Είναι σημαντικό να γίνει κατανοητό ότι αρχεία HTML δεν είναι τίποτα άλλο από απλά αρχεία κειμένου που απλά ακολουθούν ένα συγκεκριμένο συντακτικό. Τα αρχεία αυτά περιέχουν λοιπόν, κείμενο και άλλες δεσμευμένες λέξεις οι οποίες δίνουν οδηγίες στον browser για το πώς να εμφανίσει το περιεχόμενό τους. Οι δεσμευμένες λέξεις ονομάζονται ετικέτες (tags) και συνθέτουν στοιχεία (elements) το οποία είναι οπτικά αντικείμενα. Ο browser του χρήστη είναι κατασκευασμένος έτσι ώστε να αντιλαμβάνεται αυτό το συντακτικό, να μεταφράζει ακολουθίες χαρακτήρων ως οδηγίες και εν συνεχεία να παρουσιάζει κατάλληλα το περιεχόμενο του αρχείου στην οθόνη σύμφωνα με αυτές τις οδηγίες. Είναι πολύ απλό να δημιουργήσουμε την πρώτη μας ιστοσελίδα. Στην επόμενη ενότητα θα μπούμε σε περισσότερες λεπτομέρειες σχετικά με την HTML. Το πρόβληµα µε την HTML Η HMTL είναι μια πολύ επιτυχημένη γλώσσα και αποτελεί ένα από τα κύρια συστατικά του web. Μέσω αυτής μπορούν να δημιουργηθούν από πολύ απλά sites τα οποία μπορούν να εμφανιστούν ακόμα και στις οθόνες κινητών τηλεφώνων με περιορισμένες δυνατότητες έως και πολύπλοκα sites που περιλαμβάνουν κίνηση και μουσική! Το πρόβλημα με την HTML είναι ότι από μόνη της είναι «στατική». Με τον όρο «στατική» δεν εννοούμε φυσικά το αν σελίδες σε HTML θα περιλαμβάνουν γραφικά με κίνηση αλλά σελίδες που μεταβάλουν το περιεχόμενό τους αυτόματα ανάλογα με το αν συντρέχουν κάποιες συγκυρίες. Πολύ συχνά θέλουμε κάποιες σελίδες να εμφανίζονται με βάση δεδομένα τα οποία αλλάζουν γρήγορα. Π.χ. μια ιστοσελίδα βιβλιοπωλείου παρουσιάζει τα best sellers του εκάστοτε μήνα. Είναι δυνατόν κάθε μήνα να υπάρχουν ανακατατάξεις γεγονός που θα οδηγούσε στην ανάγκη δημιουργίας και αποθήκευσης στον web server μια νέας σελίδας με την ανανεωμένη λίστα μια φορά το μήνα. Μια φορά το μήνα φυσικά μπορεί να μην είναι δραματικός φόρτος εργασίας για ένα προγραμματιστή ωστόσο υπάρχουν εφαρμογές που η ανανέωση απαιτείται να γίνεται πολύ πιο συχνά π.χ. κάθε ώρα ή κάθε λεπτό όπως π.χ. σε εφαρμογές χρηματιστηρίου ASP.NET Η ASP.ΝΕΤ δημιουργήθηκε για να καλύψει αυτή την ανάγκη. Η ASP.ΝΕΤ ανήκει στην κατηγορία γλωσσών ανάπτυξης web εφαρμογών που περιλαμβάνει τεχνολογίες όπως η PHP, JSP, Ruby on Rails. Τέτοιου είδους γλώσσες είναι σχεδιασμένες να τρέχουν στο server και όχι στον browser του πελάτη (χρήστη). Ο κώδικας που ο προγραμματιστής γράφει σε ASP.NET εκτελείται στο server και παράγει HTML σελίδες δυναμικά. Ανάλογα με τη λογική της εφαρμογής μια συγκεκριμένη σελίδα μπορεί να μοιάζει διαφορετική π.χ. για διαφορετικούς χρήστες, ή σε διαφορετικές χρονικές στιγμές. Αυτό γίνεται αυτόματα χωρίς να χρειάζεται τροποποίηση της σελίδας όπως θα είχαμε στην περίπτωση των HTML σελίδων. Οι σελίδες γραμμένες σε ASP.NET ονομάζονται Web Forms και τέτοιου είδους web sites ονομάζονται εφαρμογές web (web applications). Tα αρχεία αυτής της μορφής έχουν κατάληξη «.aspx». Μερικά από τα βασικά πλεονεκτήματα που καθιέρωσαν την ASP.NET ως μια από τις σημαντικότερες γλώσσες ανάπτυξης web εφαρμογών είναι: Χρησιμοποιεί το.net framework, ένα πακέτο που προσφέρει έτοιμη λειτουργικότητα στον προγραμματιστή για την διευκόλυνσή του με βασικές διαδικασίες. Επιτρέπει την συγγραφή κώδικα με μια από περισσότερες από 40 γλώσσες προγραμματισμού μεταξύ των οποίων και οι πιο διαδεδομένες C# και Visual Basic. Βάση σχεδιασμού επιτρέπει την ανεξαρτητοποίηση της λογικής μιας σελίδας από το παρουσιαστικό της. Αλλαγές που κάνει ενδεχομένως κάποιος στην 10

11 εμφάνιση μιας web εφαρμογής δεν επηρεάζουν απαραίτητα και τη λογική της εφαρμογής. Υπάρχουν κορυφαία εργαλεία ανάπτυξης εφαρμογών με ASP.NET όπως είναι το Visual Studio Εισαγωγή στην HTML Η HTML είναι η πιο διαδεδομένη γλώσσα που χρησιμοποιείται για την περιγραφή ιστοσελίδων. Δεν είναι γλώσσα προγραμματισμού αφού δεν χρησιμοποιείται για να καθορίσει κανείς τη συμπεριφορά προγραμμάτων, αλλά μέσω αυτής καθορίζεται το παρουσιαστικό μιας ιστοσελίδας. Η προδιαγραφή της HTML ορίζει ένα σύνολο από στοιχεία (elements), τα οποία αναπαριστώνται με tags, δηλαδή με λέξεις-κλειδιά που περικλείονται μεταξύ των χαρακτήρων «<» και «>» ή «</» και «>». Τα html tags συνήθως πάνε σε ζευγάρια με το πρώτο κομμάτι να ονομάζεται opening tag και το δεύτερο μέρος closing tag. Ανάλογα με το εκάστοτε στοιχείο μεταξύ του opening και closing tag ενδέχεται να μην υπάρχει τίποτα, να υπάρχει κείμενο ή ακόμα και άλλα στοιχεία. Κάθε tag υποστηρίζει ένα σύνολο από ιδιότητες (attributes). Η τιμή κάθε attribute πρέπει να περικλείεται πάντα μεταξύ των χαρακτήρων. Θέτοντας μια τιμή σε ένα attribute καθορίζεται ένα συγκεκριμένο χαρακτηριστικό (π.χ. μέγεθος κ.τ.λ.) του στοιχείου για το οποίο είναι υπεύθυνο το tag. Η τυπική δομή ενός element φαίνεται παρακάτω: Opening tag Content <textarea rows= 5 > Sample text </textarea> Attribute Closing tag Εικόνα Η δομή ενός HTML Element Κάθε tag αποτελεί μια οδηγία στον browser για την εμφάνιση ενός συγκεκριμένου οπτικού αντικειμένου στην οθόνη ή μια οδηγία η οποίαεπηρεάσει τον τρόπο με τον οποίο ο browser θα εμφανίσει ένα στοιχείο. Τα βασικά και απαραίτητα στοιχεία μιας σελίδας είναι τρία: To, που χρησιμοποιείται για να ορίσει μια ιστοσελίδα. Το, που χρησιμοποιείται για να ορίσει τον τίτλο μια ιστοσελίδας καθώς και άλλες πληροφορίες που δεν είναι ορατές στο χρήστη. Το, που χρησιμοποιείται για να ορίσει το κυρίως μέρος μιας σελίδας που τελικά θα παρουσιάζεται στο χρήστη. Μια ιστοσελίδα στην πιο απλή μορφή της έχει λοιπόν την ακόλουθη δομή: <title> Όνοµα Σελίδας... </title> Η πρώτη µου ιστοσελίδα! Λίστα 1.1- Η πιο απλή ιστοσελίδα 11

12 Εικόνα 1.4 Η πιο απλή ιστοσελίδα Τα αρχεία HTML πρέπει πάντα να έχουν κατάληξη.html ή.htm. Το αποτέλεσμα από το παραπάνω παράδειγμα δεν μοιάζει πολύ διαφορετικό από ότι θα βλέπαμε αν γράφαμε το ίδιο σε ένα απλό αρχείο κειμένου. Η HTML ορίζει ένα πλήθος από tags ωστόσο εμείς στη συνέχεια θα εξετάσουμε τα πιο βασικά από αυτά Ορίζει την αρχή και το τέλος μίας ιστοσελίδας. Είναι ένα από τα απαραίτητα tags κάθε ιστοσελίδας. Οποιαδήποτε άλλη πληροφορία ή οποιοδήποτε άλλο αντικείμενο εμπερικλείεται εντός αυτών των tags. Συχνά χαρακτηρίζεται ως το στοιχείο «ρίζα» (root element) της σελίδας Ορίζει ένα ειδικό τμήμα της σελίδας στο οποίο μπορούμε εν συνεχεία να ορίσουμε ειδικά χαρακτηριστικά της σελίδας δευτερευούσης σημασίας όπως π.χ., τίτλος, meta-data κ.τ.λ. Επίσης εντός του πεδίου μπορούν να οριστούν scripts δηλαδή μικρά προγράμματα (γραμμένα συνήθως στη γλώσσα προγραμματισμού JavaScript) τα οποία επιτελούν μια απλή διαδικασία. Εντός του head μπορεί να περιέχονται τα εξής tags: base Θέτει τη βάση των διευθύνσεων link Θέτει μια αναφορά σε ένα συγκεκριμένο πόρο meta Περιέχει μετα-δεδομένα όπως η περίληψη της σελίδας κ.τ.λ. object Ορίζει ένα αντικείμενο πολυμέσων (π.χ. ένα video τύπου flash) script Ορίζει ένα μικρό πρόγραμμα ή περιέχει μια αναφορά σε ένα αρχείο που περιέχει αυτό το πρόγραμμα. Προγράμματα αυτού του είδους είναι γραμμένα στη γλώσσα προγραμματισμού JavaScript και εκτελούνται εντός του browser (όχι απευθείας στο λειτουργικό σύστημα) style Ορίζει μια περιοχή στην οποία μπορούμε να γράψουμε οδηγίες μορφοποίησης CSS. 12

13 Ορίζει το βασικό σώμα της σελίδας μέσα στο οποίο θα οριστούν τα βασικά αντικείμενα της όπως π.χ. εικόνες, κείμενο, κουμπιά, φόρμες συμπλήρωσης στοιχείων κ.τ.λ <title> Ορίζει τον τίτλο της σελίδας. Το συγκεκριμένο tag μπορεί να περικλείεται μόνο εντός του Σχόλια Τα σχόλια είναι σημαντικό να υπάρχουν σε κάθε σελίδα ώστε να επεξηγείται η δομή και η χρησιμότητα ορισμένων ενδεχομένως κρίσιμων κομματιών της σε οποιονδήποτε διαβάζει τον πηγαίο κώδικα της σελίδας (π.χ. σε ένα άλλο προγραμματιστή). Τα σχόλια λοιπόν, ορίζονται μέσω της ακολουθίας <!--" και -->. Οτιδήποτε περικλείεται εντός αυτών των ακολουθιών θα αγνοηθεί από τον browser και δεν θα εμφανιστεί καθόλου. Προσοχή: Εντός ενός σχολίου είναι κακή πρακτική να περικλείουμε την ακολουθία --. Η ακολουθία <! διευκρινίζει στον browser το πρόκειται να ακολουθήσει μια οδηγία και η πραγματική οδηγία είναι --" που μεταφράζεται ως έναρξη σχολίων την πρώτη φορά και λήξη σχολίων τη δεύτερη φορά <h*> Η HTML παρέχει τη δυνατότητα εισαγωγής επικεφαλίδων. Μάλιστα δίδεται η δυνατότητα δημιουργίας επικεφαλίδων διαφορετικού επιπέδου. Έτσι το στοιχείο <h1> δημιουργεί τη βασική επικεφαλίδα της σελίδας, το στοιχείο <h2> μια υπο-επικεφαλίδα κ.ο.κ. Το ανώτατο επίπεδο που μπορεί να οριστεί είναι το <h6>. <title> Όνοµα Σελίδας... </title> <h1> Επικεφαλίδα 1 </h1> <h2> Επικεφαλίδα 2 </h2> <h3> Επικεφαλίδα 3 </h3> <h4> Επικεφαλίδα 4 </h4> <h5> Επικεφαλίδα 5 </h5> <h6> Επικεφαλίδα 6 </h6> Απλό κείµενο... Λίστα 1.2- Παράδειγμα των στοιχείων h Εικόνα 1.5 Παράδειγμα των στοιχείων h 13

14 <p> Όταν είναι επιθυμητό να προσδώσουμε τη μορφή μιας παραγράφου σε ένα κομμάτι κειμένου τότε το συγκεκριμένο στοιχείο εισάγεται περικλείοντας το εν λόγω κείμενο εντός του. <title> Όνοµα Σελίδας... </title> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a arcu erat, eu vehicula ante.</p> <p>donec tempus cursus purus non fermentum.</p> <p>pellentesque habitant. Cras a elit in velit tincidunt hendrerit in et eros.</p> Λίστα Παράδειγμα του στοιχείου p <br /> Εικόνα 1.6 Παράδειγμα του στοιχείου p Στην HTML ότι κείμενο εισάγεται θα εμφανίζεται σε μια μόνο γραμμή στον browser. Αυτό ισχύει ακόμα και αν στον πηγαίο κώδικα πατήσουμε enter για να συνεχίσουμε το κείμενο στην επόμενη γραμμή. Ο μόνος τρόπος για να επιτευχθεί η αλλαγή της γραμμής είναι με τη χρήση της ακολουθίας <br />. Το <br /> είναι ένα από τα λίγα tags που δεν έχει ζευγάρι, δεν χρειάζεται δηλαδή opening tag. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a arcu erat, eu vehicula ante. Donec tempus cursus purus non fermentum. <br /> Pellentesque habitant. <br /> Cras a elit in velit tincidunt hendrerit in et eros. Λίστα 1.4- Παράδειγμα του στοιχείου br Εικόνα 1.7 Παράδειγμα του στοιχείου br Στο παραπάνω παράδειγμα παρατηρούμε ότι παρόλο που στον πηγαίο κώδικα έχουμε αλλαγή γραμμής μετά το ante., στον browser δεν εμφανίζεται κάτι ανάλογο. Αντίθετα το <br /> όπου εμφανίζεται αναγκάζει τον browser να εμφανίσει το κείμενο σε διαφορετική γραμμή ακόμα και αν στον πηγαίο κώδικα ακολουθεί κείμενο στην ίδια γραμμή (παρατηρήστε το δεύτερο <br />) <hr> Συνήθως εισάγεται μεταξύ κειμένου και εμφανίζει μια οριζόντια γραμμή στην οθόνη. 14

15 <title> Όνοµα Σελίδας... </title> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a arcu erat, eu vehicula ante. <hr /> Donec tempus cursus purus non fermentum.<br /> Pellentesque habitant. <br /> Cras a elit in velit tincidunt hendrerit in et eros. Λίστα Παράδειγμα του στοιχείου hr <b> <i> Εικόνα 1.8 Παράδειγμα του στοιχείου hr Εμφανίζει το κείμενο εντός του με έντονη γραμματοσειρά. Εμφανίζει το κείμενο εντός του σε πλάγια γραμματοσειρά <u> Εμφανίζει το κείμενο που εντός του σε υπογραμμισμένη γραμματοσειρά. Η λειτουργικότητα των b, i και u μπορεί να επιτευχθεί εναλλακτικά με CSS, ωστόσο αυτά τα tags παρέχουν ένα άμεσο τρόπο μορφοποίησης κειμένου. <title> Όνοµα Σελίδας... </title> <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a arcu erat, eu vehicula ante.</b> <br/> <i>donec tempus cursus purus non fermentum.</i> <br /> <u>pellentesque habitant. Cras a elit in velit tincidunt hendrerit in et eros.</u> Λίστα 1.6 Τα στοιχεία b, i, u <div> Εικόνα 1.9 Τα στοιχεία b, i, u Ένα div χρησιμοποιείται συνήθως για να οργανώσει τη σελίδα σε εννοιολογικά κομμάτια. Από μόνο του δεν έχει κάποια πρακτική εφαρμογή καθώς δεν εμφανίζει κάποιο αντικείμενο στην οθόνη ούτε μορφοποιεί άλλα, παρόλα αυτά θεωρείται ένα από τα σημαντικότερα tags. Μια πολύ διαδεδομένη πρακτική είναι να χρησιμοποιείται σε συνδυασμό με τα CSS για να οργανώσει τη σελίδα σε κομμάτια όπου ισχύουν διαφορετικοί 15

16 κανόνες μορφοποίησης. Π.χ. σε μια σελίδα υπάρχει ένα div που θα περιλαμβάνει το μενού στην κορυφή που η γραμματοσειρά θα είναι έντονη, άλλο div ορίζει μια στήλη αριστερά που η γραμματοσειρά είναι μεγαλύτερη ενώ ένα τελευταίο ορίζει τη στήλη στα δεξιά της σελίδας που η γραμματοσειρά είναι πιο μικρή κ.τ.λ. <title> Όνοµα Σελίδας... </title> <style type="text/css">.box{ background-color: red; </style> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a arcu erat, eu vehicula ante. <div class="box" > Donec tempus cursus purus non fermentum. Pellentesque habitant. </div> Cras a elit in velit tincidunt hendrerit in et eros. Λίστα 1.7- Παράδειγμα του στοιχείου div Εικόνα 1.10 Παράδειγμα του στοιχείου div Θυμηθείτε ότι στην HTML το κείμενο συνεχίζει στην ίδια γραμμή ακόμα και αν στον κώδικα ο προγραμματιστής έχει αλλάξει γραμμή (πατώντας enter). Παρόλα αυτά στο συγκεκριμένο παράδειγμα παρατηρήστε ότι τα περιεχόμενα εντός του div θα εμφανιστούν σε άλλη γραμμή. Αυτό συμβαίνει γιατί εξ ορισμού το div καταλαμβάνει μια ολόκληρη τη γραμμή. Η κόκκινη γραμμή παρουσιάζει το χώρο που καταλαμβάνει ένα div (εξ ορισμού δεν εμφανίζεται η κόκκινη γραμμή) <span> Το span είναι αρκετά παρόμοιο στη χρήση του με το div. Μια σημαντική διαφορά έγκειται στο γεγονός ότι το span καταλαμβάνει όσο το δυνατόν λιγότερο χώρο. Αντίθετα το div θα εξαντλήσει όλο το πλάτος της γραμμής. Γι αυτό το λόγο το span χρησιμοποιείται κατά κόρον για τη μορφοποίηση/σήμανση κειμένου ενώ το div χρησιμοποιείται για τον ίδιο σκοπό αλλά για ένα σύνολο από αντικείμενα (που μπορεί να είναι κείμενο αλλά και εικόνες). <title> Όνοµα Σελίδας... </title> <style type="text/css"> span{ background-color: red; </style> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span >Proin a arcu erat, eu vehicula ante.</span> Donec tempus cursus purus non fermentum.<br/> Pellentesque habitant. Cras a elit in velit tincidunt hendrerit in et eros. 16

17 Λίστα 1.8- Παράδειγμα του span element Εικόνα 1.11 Παράδειγμα του στοιχείου span Είναι καλό λοιπόν να θεωρούμε το div σαν ένα κουτί που εκτείνεται από το ένα άκρο της οθόνης ως το άλλο και ύψος τόσο όσο τα στοιχεία που περιλαμβάνει. Το span μπορούμε να το θεωρούμε σαν ένα κουτί που έχει μήκος ακριβώς τόσο όσο κείμενο (ή τα άλλα στοιχεία) που περικλείει <a> Εμφανίζει ένα υπερσύνδεσμο (anchor). Μπορεί να περιέχει κείμενο, εικόνα ή και τα δύο. Επίσης υπάρχει η δυνατότητα να δίνει μια αναφορά σε μια διαφορετική ιστοσελίδα ή σε διαφορετικό τμήμα της ίδιας ιστοσελίδας (π.χ. την τρίτη παράγραφο του κειμένου). Στη δεύτερη περίπτωση τιμή του href θα πρέπει να το id του στοιχείου στο οποίο θέλουμε να γίνεται η μετάβαση προηγούμενο από το χαρακτήρα #. Εξ ορισμού το κείμενο αυτό θα υπογραμμιστεί και θα λάβει διαφορετικό χρώμα για να δηλωθεί έτσι ότι είναι πλέον ένας σύνδεσμος. Εξ ορισμού ένας σύνδεσμος τον οποίο δεν έχουμε επισκεφτεί ακόμα έχει χρώμα μπλε, ένας σύνδεσμος τον οποίο έχουμε επισκεφτεί έχει χρώμα μοβ, ενώ ένας σύνδεσμος ακριβώς τη στιγμή που τον πατάμε έχει χρώμα κόκκινο. Φυσικά όλα αυτά μπορούν να αλλάξουν με κατάλληλες ρυθμίσεις. Το πιο σημαντικό από τα attributes ενός υπερσυνδέσμου είναι το href το οποίο καθορίζει που ακριβώς θα μεταβεί η σελίδα. <a href=" <br/> <a href="#paragraph_three"> Τρίτη Παράγραφος </a> <p id="paragraph_one"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla pulvinar enim non pellentesque. Integer eu nisl quis leo facilisis imperdiet non eu tellus. Proin ut erat libero, et pharetra sapien. Nam a felis ligula. Donec sodales molestie condimentum. Vivamus volutpat rutrum rhoncus. Ut placerat, purus nec rutrum imperdiet, odio eros posuere justo, convallis consequat tellus libero id lacus. </p> <p id="paragraph_two"> Vestibulum vulputate sollicitudin nulla, placerat viverra augue varius a. Vestibulum mattis lacus vitae sem ullamcorper sed lobortis felis sollicitudin. Ut eros nisl, pretium in laoreet vel, fermentum suscipit ligula. Ut eget purus lorem. Proin sed justo augue, ac commodo lectus. Aenean a diam et dolor adipiscing congue. Sed justo justo, posuere ac posuere id, cursus non ligula. Nam luctus magna in dolor rutrum consequat. Nulla facilisi. Donec vitae neque massa. Donec eu blandit tellus. Nunc egestas dui in elit mollis nec venenatis nisi pretium. Donec convallis ipsum libero. Sed adipiscing, dui at eleifend fringilla, nisi lacus pharetra mi, vitae convallis neque arcu id purus. Sed vitae est nunc, et blandit risus. </p> <p id="paragraph_three"> Vivamus vestibulum laoreet ante, id consectetur nisi hendrerit quis. Suspendisse porta, lorem ac cursus fringilla, turpis elit tempus enim, et ultrices lorem libero ac nisi. Nulla vitae facilisis sapien. Fusce euismod tortor ut purus dictum porta. Praesent laoreet sem nunc. Morbi cursus condimentum est, sed egestas sapien laoreet sit amet. Nulla mollis, ipsum lobortis elementum consequat, nulla nisi fermentum dolor, vel pulvinar massa eros vel lacus. Maecenas ligula nisi, laoreet sed aliquet a, euismod sagittis neque. </p> 17

18 Λίστα Παράδειγμα του στοιχείου a <img> Στα σύγχρονα web sites οι εικόνες αποτελούν ένα αναπόσπαστο κομμάτι σχεδόν κάθε ιστοσελίδας. Το tag img εμφανίζει στην ιστοσελίδα μια εικόνα συγκεκριμένων διαστάσεων που βρίσκεται σε ένα συγκεκριμένο φάκελο στο server. Τα βασικότερα attributes του συγκεκριμένου tag είναι τα εξής: src που καθορίζει το path (τοποθεσία) της εικόνας στο server. Το path μπορεί να είναι σχετικό (relative) δηλαδή να υποδηλώνει μια τοποθεσία σε σχέση με την τοποθεσία της σελίδας ή απόλυτο, δηλαδή την πλήρη διεύθυνση του πόρου στο server. Ως path τέλος μπορεί να οριστεί μια URL. width που καθορίζει το μήκος της εικόνας. height που καθορίζει το ύψος της εικόνας. alt που καθορίζει το κείμενο που θα εμφανίζεται σε ένα μικρό πλαίσιο όταν ο χρήστης τοποθετεί το κέρσορά του πάνω στην εικόνα. <title> Τίτλος... </title> <img src="./images/1.jpg" width="400" height="300" alt="εικόνα 1" /> <br /> <img src="2.jpg" width="400" height="300" alt="εικόνα 2" /> <br /> <img src=" pg" width="400" height="300" alt="εικόνα από NASA" /> <br /> Λίστα 1.10 Παράδειγμα στοιχείου img <table> Χρησιμοποιείται για να ορίζει ένα πίνακα με ορισμένο αριθμό στηλών και γραμμών. Με την κατάλληλη παραμετροποίηση είναι δυνατόν να εμφανίζεται ή μην εμφανίζεται καθόλου πλαίσιο γύρω από τον πίνακα. Ένας πίνακας ενδέχεται να περικλείει και άλλους πίνακες. Πέρα από την κλασική του χρήση, πολύ συχνά χρησιμοποιείται για να μορφοποιήσει μια σελίδα σε στήλες και γραμμές ή γενικότερα σε περιοχές. Η τελευταία προσέγγιση ωστόσο είναι καλό να αποφεύγεται καθώς μεταξύ των προγραμματιστών υπάρχει η τάση το παρουσιαστικό να είναι και σημασιολογικά σωστό. Αυτό σημαίνει ότι κάθε tag παρουσιάζει περιεχόμενο που ανταποκρίνεται στη σημασία του tag. Άρα ένα table αφού προορίζεται να αναπαριστά έναν πίνακα θα πρέπει να αναπαριστά όντως έναν πίνακα. Οι γραμμές ενός πίνακα ορίζονται μέσω του tag, <tr></tr>. Οι στήλες του με το tag <td></td>. Τα tags των στηλών θα πρέπει οπωσδήποτε να περικλείονται από tags γραμμών. Αντίστοιχα τα tag γραμμών θα πρέπει να περικλείονται απαραίτητα από tags πίνακα. <table> <tr> <td> <b>x</b> </td> 18

19 <td> <b>y</b> </td> </tr> <td> 123 </td> <td> 234 </td> </tr> </tr> <td> 87 </td> <td> 35 </td> </tr> </table> Λίστα Παράδειγμα του στοιχείου table Φόρµες Εικόνα 1.12 Παράδειγμα του στοιχείου table Οι φόρμες χρησιμοποιούνται για την εισαγωγή και την αποστολή δεδομένων του χρήστη στο server. Από μόνες τους φαινομενικά οι φόρμες είναι άχρηστες αφού το μόνο που επιτυγχάνουν είναι να απλώς να αποστέλλουν δεδομένα. Θα πρέπει να τρέχει κάποιο πρόγραμμα στο server το οποίο θα είναι σε θέση να αναγνωρίζει και εν συνεχεία να μεταχειρίζεται (π.χ. να αποθηκεύει) τα δεδομένα αυτά. Το πρόγραμμα αυτό μπορεί να είναι γραμμένο σε ASP.NET, ή κάποια τεχνική που προϋπήρχε της ASP.NET όπως π.χ. CGI, PHP. Τα βασικά tags που σχετίζονται με τις φόρμες είναι το form, textarea, select, option, input. <form> Ορίζει μια φόρμα στη σελίδα. Στοιχεία όπως το textarea, select, option και input μπορούν να περιέχονται μόνο εντός μιας φόρμας. Το μοναδικό υποχρεωτικό attribute της φόρμας είναι το action το οποίο καθορίζει το URL του προγράμματος στο server στο οποίο θα αποσταλούν τα δεδομένα της φόρμας και το οποίο είναι υπεύθυνο για την περεταίρω επεξεργασία τους. Ακόμα ένα σημαντικό attribute είναι το method που καθορίζει τον τρόπο αποστολής δεδομένων στο server. Οι πιθανές τιμές είναι το get και το post (για περισσότερες λεπτομέρειες συμβουλευτείτε την παράγραφο 1.3). Να σημειωθεί ότι κάθε στοιχείο που περιλαμβάνει η φόρμα μας θα πρέπει να φέρει το attribute name. Αυτό δίνει τη δυνατότητα στο εν λόγω πρόγραμμα στο server να αναγνωρίζει ορθά τα αντικείμενα της σελίδας και να ανακτά την τιμή την οποία φέρουν. <input> Μέσω ενός input δίδεται στον προγραμματιστή η δυνατότητα δημιουργίας μιας πληθώρας αντικειμένων στην οθόνη για εισαγωγή δεδομένων (με διαφορετικούς τρόπους) από το χρήστη. Το βασικό attribute του input είναι το type το οποίο καθορίζει τον τύπο αντικειμένου. Ανάλογα με τον τύπο που έχει επιλεγεί υπάρχουν διαφορετικά attributes που ελέγχουν διαφορετικά χαρακτηριστικά του input. 19

20 Text Δημιουργεί ένα κουτί για την εισαγωγή κειμένου από το χρήστη. Θέτοντας κάποια τιμή στο attribute, value ο προγραμματιστής μπορεί να θέσει εξ αρχής το κείμενο του. <form action="test.php"> Όνοµα: <input type="text" name="textbox1" /> </form> Λίστα Το στοιχείο input για την τιμή text του attribute type Password Εικόνα 1.13 Το στοιχείο input για την τιμή text του attribute type Δημιουργεί ένα κουτί για την εισαγωγή κειμένου, παρόμοιο με ένα text, το οποίο όμως αποκρύπτει τα περιεχόμενά του από το χρήστη (π.χ. εμφανίζει αστερίσκους αντί των γραμμάτων που εισάγει ο χρήστης). Χρησιμοποιείται κατά κόρων για την εισαγωγή κωδικών. <form action="test.php"> Kωδικός: <input type="password" name="password1" /> </form> Λίστα Το στοιχείο input για την τιμή password του attribute type Εικόνα 1.14 Το στοιχείο input για την τιμή password του attribute type Checkbox Δημιουργεί ένα κουτί το οποίο μπορεί να λάβει δύο καταστάσεις, check και uncheck. Πολλά checkboxes μπορούν να ομαδοποιηθούν μαζί θέτοντας απλά την ίδια τιμή στο attribute, name. Κατ αυτό τον τρόπο παρέχεται στο χρήστη μια λίστα επιλογών από τις οποίες αυτός μπορεί να επιλέξει μια ή περισσότερες. <form action="test.php"> Επιλογή: <input type="checkbox" name="checkbox1" /> </form> Λίστα Το στοιχείο input για την τιμή checkbox του attribute type 20