Εισαγωγή στην ASP.NET 4 - dga.gr · να λαμβάνει αρχεία γραμμένα...

Ενότ• • •

Εισαγωγή στην ASP.NET 4.0 Σημειώσεις Σεμιναρίου

Επιμέλεια: Βασίλης Κόλιας

ητα 1 Το Web και η αρχιτεκτονική του

HyperText Markup Language

Cascading Style Sheets

1.0.0

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

ΠίνακαςΠεΠίνακας Περ

1. Εισαγ

1.1. Τι ε

1.2. Λίγ

1.3. Η α

1.3.1.

1.3.2.

1.3.3.

1.3.4.

1.3.5.

1.3.6.

1.4. ASP

1.5. Εισ

1.5.1.

1.5.2.

1.5.3.

1.5.4.

1.5.5.

1.5.6.

1.5.7.

1.5.8.

1.5.9.

1.5.10.

1.5.11.

1.5.12.

1.5.13.

1.5.14.

1.5.15.

1.5.16.

1.5.17.

1.5.18.

1.6. Cas

1.6.1.

1.6.2.

1.6.3.

1.6.4.

1.6.5.

1.6.6.

1.6.7.

2

ριεχομένωνιεχομένων ............................................................................................................................... 2

ωγή .......................................................................................................................................... 4

ίναι το Web ............................................................................................................................. 4

η ιστορία ................................................................................................................................. 4

ρχιτεκτονική του Web ............................................................................................................. 5

URL ....................................................................................................................................... 5

Browser ................................................................................................................................ 6

Web Server .......................................................................................................................... 6

Πόροι ................................................................................................................................... 7

HTTP ..................................................................................................................................... 7

HTML .................................................................................................................................. 10

.NET ...................................................................................................................................... 10

αγωγή στην HTML ................................................................................................................. 11

<html> ................................................................................................................................ 12

<head> ............................................................................................................................... 12

<body> ............................................................................................................................... 13

<title> ................................................................................................................................. 13

Σχόλια ................................................................................................................................ 13

<h*> ................................................................................................................................... 13

<p> ..................................................................................................................................... 14

<br /> ................................................................................................................................. 14

<hr> .................................................................................................................................... 14

<b>..................................................................................................................................... 15

<i> ...................................................................................................................................... 15

<u>..................................................................................................................................... 15

<div> .................................................................................................................................. 15

<span> ............................................................................................................................... 16

<a> ..................................................................................................................................... 17

<img> ................................................................................................................................. 18

<table> .............................................................................................................................. 18

Φόρμες .............................................................................................................................. 19

cading Style Sheets ............................................................................................................... 25

Inline Styles ........................................................................................................................ 25

Embedded Styles ............................................................................................................... 25

External Styles.................................................................................................................... 26

Κανόνες CSS ....................................................................................................................... 26

Universal Selector .............................................................................................................. 27

Descendant Selector .......................................................................................................... 27

Child Selector ..................................................................................................................... 28

3


1.6.8. Class Selector ..................................................................................................................... 28

1.6.9. ID Selectors ........................................................................................................................ 29

1.6.10. Ιδιότητες Μορφοποίησης ................................................................................................. 30

1.6.11. Πλεονεκτήματα CSS .......................................................................................................... 38

4


1. Εισαγωγή

Καλωσορίσατε στο σεμινάριο Εισαγωγή στην ASP.NET 4.0!

Όπως κάθε ταξίδι ξεκινά με ένα μικρό βήμα, έτσι και η εκμάθηση μιας γλώσσας ή

μιας τεχνολογίας ξεκινά με τις θεμελιώδεις έννοιες που την αποτελούν. Παρόλο που το

σεμινάριο αυτό επικεντρώνεται στην τεχνολογία ASP.NET, είναι χρήσιμο πριν ξεκινήσουμε

με την παρουσίασή της να την τοποθετήσουμε στο περιβάλλον της· να παρουσιάσουμε

δηλαδή όλες τις τεχνολογίες που με τον έναν ή τον άλλο τρόπο σχετίζονται με αυτήν και

επηρεάζουν άμεσα ή έμμεσα την ανάπτυξη μιας εφαρμογής ASP.NET.

Σε αυτό το εισαγωγικό κεφάλαιο θα ασχοληθούμε με τα βασικά χαρακτηριστικά του

Web, του συστήματος διασυνδεδεμένων υπερκειμένων που λειτουργεί πάνω στο Internet.

Χρησιμοποιώντας έναν web browser (φυλλομετρητή), ένας χρήστης μπορεί να δει

ιστοσελίδες που μπορεί να περιέχουν κείμενο, εικόνες, videos και άλλα πολυμέσα και να

πλοηγηθεί μεταξύ τους μέσω των υπερσυνδέσμων.

1.1. Τι είναι το Web To World Wide Web (σε συντόμευση www ή w3) κοινώς γνωστό απλά ως Web, είναι

ένα κατανεμημένο σύστημα παράδοσης εγγράφων, που χρησιμοποιεί πρωτόκολλα

εφαρμογών στο Διαδίκτυο. Το Web έχει ξεπεράσει αισίως τη δεύτερη δεκαετία ύπαρξής

του, ωστόσο ακόμα θεωρείται ένα νέο τεχνολογικό και κοινωνικό φαινόμενο, ενώ πλέον

μελετάται και αντιμετωπίζεται σαν ένας οργανισμός.

Το Web αποτελεί μια εντυπωσιακή πλατφόρμα με χιλιάδες επιτυχημένους καρπούς

και η δυναμική του είναι τέτοια που σίγουρα θα επεκταθεί περεταίρω, ώστε να

ενσωματώνει νέες γλώσσες, να είναι πλουσιότερο σε πολυμέσα και δραστηριότητες, να

φιλοξενεί περισσότερες πληροφορίες και παράλληλα να παρέχει τα εργαλεία και τις

μεθόδους που απαιτούνται για την επεξεργασία και την αξιοποίηση των νέων δεδομένων.

1.2. Λίγη ιστορία Τον Μάρτιο του 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 εξελίχθηκε. Προστέθηκαν πολλές τεχνολογίες για να το

υποστηρίξουν, ενώ οι χρήστες του αυξήθηκαν με τρομερούς ρυθμούς, καθιστώντας το

σήμερα αναπόσπαστο κομμάτι της καθημερινότητας των σύγχρονων κοινωνιών. Τα

5


θεμελιώδη χαρακτηριστικά του όμως παρέμειναν αναλλοίωτα. Στις επόμενες παραγράφους

ακολουθεί η αναλυτική περιγραφή τους.

1.3. Η αρχιτεκτονική του Web Όταν ένας χρήστης εισάγει μια διεύθυνση (URL) στον browser του π.χ.

http://www.asite.gr, ο browser του χρήστη αποστέλλει ένα αίτημα (request) στον αντίστοιχο

web server για έναν πόρο (resource), που τις περισσότερες φορές είναι μια ιστοσελίδα σε

HTML. Ο server αποστέλλει μέσω του πρωτοκόλλου HTTP τη συγκεκριμένη ιστοσελίδα την

οποία με τη σειρά του ο browser θα μεταφράσει σε διάφορα οπτικά αντικείμενα και θα τα

προβάλει στο χρήση. Αυτό το απλό σενάριο λαμβάνει χώρα στο Web χιλιάδες φορές και σε

καθημερινή βάση. Στο σενάριο αυτό, που είναι η βάση της επικοινωνίας στο Web,

συναντήσαμε τους όρους URL, Browser, Web Server, πόρος, HTTP και HTML. Ας δούμε καθ’

ένα από αυτούς τους όρους ξεχωριστά.

1.3.1. 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://example.org θα κάνει ένα αίτημα HTTP στον host example.org. Αν το

URL ήταν της μορφής mailto: [email protected] θα άνοιγε τον mail client

του χρήστη για την προετοιμασία ενός email προς τον χρήστη

[email protected]. Άλλα παραδείγματα σχημάτων αποτελούν τα https, ftp,

gopher, wais.

• domain: ένα πεδίο όπου μπαίνει το domain name ή η διεύθυνση IP του

προορισμού στον οποίο αναφέρεται το URL. Για παράδειγμα το domain

google.com αντιστοιχεί στη διεύθυνση 72.14.207.99, οπότε οποιοδήποτε

Εικόνα 1.1 - Ο δημιουργός του Web, Tim Burners-Lee, ο πρώτος Web Server και ο

πρώτος Web Browser

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 και τι αντιπροσωπεύουν

τα τμήματά του.

1.3.2. 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.

1.3.3. Web Server

Ένας web server είναι ο συνδυασμός ενός, ή περισσότερων υπολογιστών και ενός

προγράμματος που έχει εγκατασταθεί σε αυτούς και τρέχει διαρκώς στο παρασκήνιο

(service). Σε ένα απλό παράδειγμα ο υπολογιστής που λειτουργεί ως web server είναι

συνδεμένος στο Internet και φέρει μια στατική μοναδική διεύθυνση IP (π.χ. 147.102.16.1) η

οποία έχει αντιστοιχηθεί με μια διεύθυνση εύκολη στην απομνημόνευση όπως π.χ.

www.medialab.ntua.gr.

Σε μια απλή περίπτωση, στον web server είναι αποθηκευμένοι όλοι οι πόροι που

μπορεί να θελήσει ο χρήστης και είναι οργανωμένοι σε φακέλους και υποφακέλους.

Ανάλογα με το αίτημα του χρήστη ο web server είναι υποχρεωμένος να αναζητήσει τον

7


κατάλληλο πόρο και να το στείλει στον κατάλληλο χρήστη. Η αναζήτηση γίνεται με βάση το

URI (Uniform Resource Identifier) που εισήγαγε ο χρήστης.

Οι πιο διάσημοι web servers όσον αφορά το software είναι ο Apache Web Server και

o Microsoft IIS. Συνήθως μηχανήματα που τρέχουν ως servers είναι εξοπλισμένα με

πολυπύρηνους επεξεργαστές Intel Xeon και πολλά Gb μνήμης, χωρίς αυτό να είναι

περιοριστικό. Ανάλογα με τον αναμενόμενο φόρτο εργασιών, είναι δυνατόν να αρκεί ένας

παλιός Pentium ή να απαιτούνται πάρα πολλά μηχανήματα τα οποία θα συνεργάζονται σε

ειδική διάταξη (π.χ. clusters υπολογιστών).

1.3.4. Πόροι

Στο Web τα δεδομένα που ανταλλάσσονται μεταξύ ενός πελάτη και ενός εξυπηρέτη

ομαδοποιούνται κάτω από την έννοια ενός πόρου (resource) που στην πλειονότητα των

περιπτώσεων αντιστοιχεί σε ένα αρχείο. Κάθε πόρος στο Web είναι ουσιαστικά οτιδήποτε

έχει ταυτότητα και μπορεί να δημοσιευτεί. Κάθε πόρος επίσης συνοδεύεται από μια

προδιαγραφή του τύπου δεδομένων του (format). Η προδιαγραφή αυτή ενσωματώνει μια

συμφωνία για τη σωστή απόδοση της αναπαράστασης των δεδομένων. Έτσι για παράδειγμα

η προδιαγραφή της HTML ορίζει τους κανόνες εμφάνισης κάποιου περιεχομένου, ενώ η

προδιαγραφή των εικόνων τύπου JPEG ορίζει πως θα εμφανιστεί ένα αρχείο εικόνας στην

οθόνη του υπολογιστή. Χωρίς αυτές τις προδιαγραφές τα επικοινωνούντα μέρη δεν θα

μπορούσαν να συμφωνήσουν στη σημασιολογία ενός πόρου και ουσιαστικά δεν θα ήξεραν

τι να κάνουν με τα ανταλλασσόμενα δεδομένα.

Οι τύποι δεδομένων των πόρων πρωταρχικά διακρίνονται σε δύο κατηγορίες: α) Τους

δυαδικούς τύπους (binary types) που αφορούν στα δεδομένα που προσδιορίζονται για

άμεση χρήση από τους επεξεργαστές (π.χ. αριθμητικές τιμές, δείκτες, συμπιεσμένα

δεδομένα) και β) στους κειμενικούς τύπους (textual types) που προσδιορίζονται με μια

προκαθορισμένη κωδικοποίηση σαν μια σειρά χαρακτήρων (π.χ. μια HTML σελίδα, ένα

μήνυμα ηλεκτρονικού ταχυδρομείου).

Παρόλο που είναι σαφής, η παραπάνω διάκριση δεν αρκεί για την αποδοτική χρήση

των πόρων στο Web. Το πρότυπο MIME (Multipurpose Internet Mail Extensions)

δημοσιεύτηκε το 1996 με το Request for Comment (RFC) έγγραφα 2045-2049. Η βασική

έννοια του προτύπου αυτού είναι οι τύποι μέσων (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, οργανωμένους κάτω

από οχτώ κατηγορίες.

1.3.5. HTTP

Οι δυο οντότητες που περιγράφηκαν παραπάνω δηλαδή ο browser (που στην ουσία

αντιπροσωπεύει το χρήστη) και ο web server, επικοινωνούν μέσω ενός πρωτοκόλλου που

ονομάζεται HTTP.

Να διευκρινίσουμε ότι με τον όρο πρωτόκολλο υπολογιστή ονομάζουμε ένα σύνολο

κανόνων για την επιτυχή επικοινωνία μεταξύ ενός server και ενός client. Στην ουσία

αποτελείται από συγκεκριμένα μηνύματα τα οποία ανταλλάσσονται μεταξύ δύο

υπολογιστών με συγκεκριμένη σειρά για την επίτευξη μιας εργασίας. Στην περίπτωση του

Web, η εργασία αυτή είναι ο διαμοιρασμός πόρων (HTML σελίδων, εικόνων κ.τ.λ.) μεταξύ

ενός web browser και ενός web server.

Το HTTP ανήκει στην κατηγορία πρωτοκόλλων request-response. Αυτό πρακτικά

σημαίνει ότι κάθε φάση του πρωτοκόλλου ολοκληρώνεται με την ανταλλαγή ενός αιτήματος

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 www.test.com/login.html?username=testName&password=1234 HTTP/1.0 User-Agent: Mozilla/4.0

9


[ κενή γραµµή]

POST www.test.com/login.html HTTP/1.0 From: [email protected] User-Agent: Mozilla/4.0 Content-Type: application/x-www-form-urlencoded Content-Length: 30 Username=testName&password=1234

Ένα HTTP Response έχει την παρακάτω μορφή:

HTTP/1.0 200 OK Date: Sun, 18 March 2012 23:59:59 GMT Content-Type: text/html Content-Length: 1354 <html> <body> <h1>Hello World!</h1> . . . </body> </html>

Το HTTP χαρακτηρίζεται ως ένα connectionless και stateless πρωτόκολλο, πράγμα

που σημαίνει πως μόλις ένας κύκλος request/response έχει ολοκληρωθεί όλες οι

πληροφορίες που έχει ο server για τον client χάνονται. Αυτό ίσως έρχεται σε αντίθεση με τη

θεώρηση που έχουν οι περισσότεροι χρήστες για το HTTP μέσα από την καθημερινή τους

εμπειρία. Π.χ. όταν ο χρήστης κάνει login σε μια σελίδα Α και εν συνεχεία μεταβαίνει σε μια

σελίδα Β, η σελίδα Β μοιάζει να “θυμάται” ότι ο χρήστης είναι ο ίδιος που είχε κάνει

προηγουμένως login. Ωστόσο θα πρέπει να τονιστεί ότι για την επίτευξη τέτοιων

λειτουργιών έχουν αναπτυχθεί ειδικές τεχνικές (π.χ. cookies) τις οποίες και θα μελετήσουμε

σε επόμενα κεφάλαια.

Να διευκρινιστεί τέλος ότι η διαδικασία ανταλλαγής μηνυμάτων γίνεται σιωπηρά στο

παρασκήνιο από το browser και τον server και ο χρήστης σε καμία περίπτωση δεν έρχεται σε

επαφή με αυτά τα μηνύματα παρά μόνο βλέπει το τελικό αποτέλεσμα π.χ. την ιστοσελίδα

που ζήτησε.

ΗTTP Request POST www.test.com/test1.html

HTTP/1.0

User-Agent: Mozilla/4.0

Content-Type: application/x-www-

form-urlencoded

Content-Length: 30

Username=testName

HTTP Response HTTP/1.0 200 OK Date: Sun, 18 March 2012 23:59:59

GMT Content-Type: text/html Content-Length: 1354 <html> <body> <h1>Hello World!</h1> </body> </html>

Εικόνα 1.2 - Μια τυπική δοσοληψία στο Web

10


1.3.6. 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 μια νέας σελίδας με

την ανανεωμένη λίστα μια φορά το μήνα. Μια φορά το μήνα φυσικά μπορεί να μην είναι

δραματικός φόρτος εργασίας για ένα προγραμματιστή ωστόσο υπάρχουν εφαρμογές που η

ανανέωση απαιτείται να γίνεται πολύ πιο συχνά π.χ. κάθε ώρα ή κάθε λεπτό όπως π.χ. σε

εφαρμογές χρηματιστηρίου.

1.4. 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.

• Βάση σχεδιασμού επιτρέπει την ανεξαρτητοποίηση της λογικής μιας σελίδας

από το παρουσιαστικό της. Αλλαγές που κάνει ενδεχομένως κάποιος στην

11


εμφάνιση μιας web εφαρμογής δεν επηρεάζουν απαραίτητα και τη λογική

της εφαρμογής.

• Υπάρχουν κορυφαία εργαλεία ανάπτυξης εφαρμογών με ASP.NET όπως είναι

το Visual Studio.

1.5. Εισαγωγή στην HTML Η HTML είναι η πιο διαδεδομένη γλώσσα που χρησιμοποιείται για την περιγραφή

ιστοσελίδων. Δεν είναι γλώσσα προγραμματισμού αφού δεν χρησιμοποιείται για να

καθορίσει κανείς τη συμπεριφορά προγραμμάτων, αλλά μέσω αυτής καθορίζεται το

παρουσιαστικό μιας ιστοσελίδας.

Η προδιαγραφή της HTML ορίζει ένα σύνολο από στοιχεία (elements), τα οποία

αναπαριστώνται με tags, δηλαδή με λέξεις-κλειδιά που περικλείονται μεταξύ των

χαρακτήρων «<» και «>» ή «</» και «>». Τα html tags συνήθως πάνε σε ζευγάρια με το

πρώτο κομμάτι να ονομάζεται opening tag και το δεύτερο μέρος closing tag. Ανάλογα με το

εκάστοτε στοιχείο μεταξύ του opening και closing tag ενδέχεται να μην υπάρχει τίποτα, να

υπάρχει κείμενο ή ακόμα και άλλα στοιχεία. Κάθε tag υποστηρίζει ένα σύνολο από ιδιότητες

(attributes). Η τιμή κάθε attribute πρέπει να περικλείεται πάντα μεταξύ των χαρακτήρων “ ”.

Θέτοντας μια τιμή σε ένα attribute καθορίζεται ένα συγκεκριμένο χαρακτηριστικό (π.χ.

μέγεθος κ.τ.λ.) του στοιχείου για το οποίο είναι υπεύθυνο το tag.

Η τυπική δομή ενός element φαίνεται παρακάτω:

Εικόνα 1.3 - Η δομή ενός HTML Element

Κάθε tag αποτελεί μια οδηγία στον browser για την εμφάνιση ενός συγκεκριμένου

οπτικού αντικειμένου στην οθόνη ή μια οδηγία η οποίαεπηρεάσει τον τρόπο με τον οποίο ο

browser θα εμφανίσει ένα στοιχείο.

Τα βασικά και απαραίτητα στοιχεία μιας σελίδας είναι τρία:

• To <html></html>, που χρησιμοποιείται για να ορίσει μια ιστοσελίδα.

• Το <head></head>, που χρησιμοποιείται για να ορίσει τον τίτλο μια ιστοσελίδας καθώς

και άλλες πληροφορίες που δεν είναι ορατές στο χρήστη.

• Το <body></body>, που χρησιμοποιείται για να ορίσει το κυρίως μέρος μιας σελίδας

που τελικά θα παρουσιάζεται στο χρήστη. Μια ιστοσελίδα στην πιο απλή μορφή της

έχει λοιπόν την ακόλουθη δομή:

<html> <head> <title> Όνοµα Σελίδας... </title> </head> <body> Η πρώτη µου ιστοσελίδα! </body> </html>

Λίστα 1.1- Η πιο απλή ιστοσελίδα

<textarea rows=”5”> Sample text </textarea>

Opening tag

Attribute

Closing tag

Content

12


Εικόνα 1.4 Η πιο απλή ιστοσελίδα

Τα αρχεία HTML πρέπει πάντα να έχουν κατάληξη “.html” ή “.htm”. Το αποτέλεσμα

από το παραπάνω παράδειγμα δεν μοιάζει πολύ διαφορετικό από ότι θα βλέπαμε αν

γράφαμε το ίδιο σε ένα απλό αρχείο κειμένου.

Η HTML ορίζει ένα πλήθος από tags ωστόσο εμείς στη συνέχεια θα εξετάσουμε τα πιο

βασικά από αυτά.

1.5.1. <html>

Ορίζει την αρχή και το τέλος μίας ιστοσελίδας. Είναι ένα από τα απαραίτητα tags

κάθε ιστοσελίδας. Οποιαδήποτε άλλη πληροφορία ή οποιοδήποτε άλλο αντικείμενο

εμπερικλείεται εντός αυτών των tags. Συχνά χαρακτηρίζεται ως το στοιχείο «ρίζα» (root

element) της σελίδας.

1.5.2. <head>

Ορίζει ένα ειδικό τμήμα της σελίδας στο οποίο μπορούμε εν συνεχεία να ορίσουμε

ειδικά χαρακτηριστικά της σελίδας δευτερευούσης σημασίας όπως π.χ., τίτλος, meta-data

κ.τ.λ. Επίσης εντός του πεδίου μπορούν να οριστούν scripts δηλαδή μικρά προγράμματα

(γραμμένα συνήθως στη γλώσσα προγραμματισμού JavaScript) τα οποία επιτελούν μια απλή

διαδικασία. Εντός του head μπορεί να περιέχονται τα εξής tags:

• base – Θέτει τη βάση των διευθύνσεων

• link – Θέτει μια αναφορά σε ένα συγκεκριμένο πόρο

• meta – Περιέχει μετα-δεδομένα όπως η περίληψη της σελίδας κ.τ.λ.

• object – Ορίζει ένα αντικείμενο πολυμέσων (π.χ. ένα video τύπου flash)

• script – Ορίζει ένα μικρό πρόγραμμα ή περιέχει μια αναφορά σε ένα αρχείο που

περιέχει αυτό το πρόγραμμα. Προγράμματα αυτού του είδους είναι γραμμένα στη

γλώσσα προγραμματισμού JavaScript και εκτελούνται εντός του browser (όχι απευθείας

στο λειτουργικό σύστημα)

• style – Ορίζει μια περιοχή στην οποία μπορούμε να γράψουμε οδηγίες μορφοποίησης

CSS.

13


1.5.3. <body>

Ορίζει το βασικό σώμα της σελίδας μέσα στο οποίο θα οριστούν τα βασικά

αντικείμενα της όπως π.χ. εικόνες, κείμενο, κουμπιά, φόρμες συμπλήρωσης στοιχείων κ.τ.λ.

1.5.4. <title>

Ορίζει τον τίτλο της σελίδας. Το συγκεκριμένο tag μπορεί να περικλείεται μόνο εντός

του <head>.

1.5.5. Σχόλια

Τα σχόλια είναι σημαντικό να υπάρχουν σε κάθε σελίδα ώστε να επεξηγείται η δομή

και η χρησιμότητα ορισμένων ενδεχομένως κρίσιμων κομματιών της σε οποιονδήποτε

διαβάζει τον πηγαίο κώδικα της σελίδας (π.χ. σε ένα άλλο προγραμματιστή). Τα σχόλια

λοιπόν, ορίζονται μέσω της ακολουθίας “”. Οτιδήποτε περικλείεται εντός αυτών

των ακολουθιών θα αγνοηθεί από τον browser και δεν θα εμφανιστεί καθόλου. Προσοχή:

Εντός ενός σχολίου είναι κακή πρακτική να περικλείουμε την ακολουθία -- . Η ακολουθία

“<!” διευκρινίζει στον browser το πρόκειται να ακολουθήσει μια οδηγία και η πραγματική

οδηγία είναι “--" που μεταφράζεται ως έναρξη σχολίων την πρώτη φορά και λήξη σχολίων τη

δεύτερη φορά.

1.5.6. <h*>

Η HTML παρέχει τη δυνατότητα εισαγωγής επικεφαλίδων. Μάλιστα δίδεται η

δυνατότητα δημιουργίας επικεφαλίδων διαφορετικού επιπέδου. Έτσι το στοιχείο <h1>

δημιουργεί τη βασική επικεφαλίδα της σελίδας, το στοιχείο <h2> μια υπο-επικεφαλίδα

κ.ο.κ. Το ανώτατο επίπεδο που μπορεί να οριστεί είναι το <h6>.

<html> <head> <title> Όνοµα Σελίδας... </title> </head> <body> <h1> Επικεφαλίδα 1 </h1> <h2> Επικεφαλίδα 2 </h2> <h3> Επικεφαλίδα 3 </h3> <h4> Επικεφαλίδα 4 </h4> <h5> Επικεφαλίδα 5 </h5> <h6> Επικεφαλίδα 6 </h6> Απλό κείµενο... </body> </html>

Λίστα 1.2- Παράδειγμα των στοιχείων h

Εικόνα 1.5 Παράδειγμα των στοιχείων h

14


1.5.7. <p>

Όταν είναι επιθυμητό να προσδώσουμε τη μορφή μιας παραγράφου σε ένα κομμάτι

κειμένου τότε το συγκεκριμένο στοιχείο εισάγεται περικλείοντας το εν λόγω κείμενο εντός

του.

<html> <head> <title> Όνοµα Σελίδας... </title> </head> <body> <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> </body> </html>

Λίστα 1.3 - Παράδειγμα του στοιχείου p

Εικόνα 1.6 Παράδειγμα του στοιχείου p

1.5.8. <br />

Στην HTML ότι κείμενο εισάγεται θα εμφανίζεται σε μια μόνο γραμμή στον browser.

Αυτό ισχύει ακόμα και αν στον πηγαίο κώδικα πατήσουμε enter για να συνεχίσουμε το

κείμενο στην επόμενη γραμμή. Ο μόνος τρόπος για να επιτευχθεί η αλλαγή της γραμμής

είναι με τη χρήση της ακολουθίας <br />. Το <br /> είναι ένα από τα λίγα tags που δεν έχει

ζευγάρι, δεν χρειάζεται δηλαδή opening tag.

<html> <head> </head> <body> 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. </body> </html>

Λίστα 1.4- Παράδειγμα του στοιχείου br

Εικόνα 1.7 Παράδειγμα του στοιχείου br

Στο παραπάνω παράδειγμα παρατηρούμε ότι παρόλο που στον πηγαίο κώδικα

έχουμε αλλαγή γραμμής μετά το “ante.”, στον browser δεν εμφανίζεται κάτι ανάλογο.

Αντίθετα το <br /> όπου εμφανίζεται αναγκάζει τον browser να εμφανίσει το κείμενο σε

διαφορετική γραμμή ακόμα και αν στον πηγαίο κώδικα ακολουθεί κείμενο στην ίδια γραμμή

(παρατηρήστε το δεύτερο <br />).

1.5.9. <hr>

Συνήθως εισάγεται μεταξύ κειμένου και εμφανίζει μια οριζόντια γραμμή στην οθόνη.

15


<html> <head> <title> Όνοµα Σελίδας... </title> </head> <body> 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. </body> </html>

Λίστα 1.5 - Παράδειγμα του στοιχείου hr

Εικόνα 1.8 Παράδειγμα του στοιχείου hr

1.5.10. <b>

Εμφανίζει το κείμενο εντός του με έντονη γραμματοσειρά.

1.5.11. <i>

Εμφανίζει το κείμενο εντός του σε πλάγια γραμματοσειρά.

1.5.12. <u>

Εμφανίζει το κείμενο που εντός του σε υπογραμμισμένη γραμματοσειρά.

Η λειτουργικότητα των b, i και u μπορεί να επιτευχθεί εναλλακτικά με CSS, ωστόσο

αυτά τα tags παρέχουν ένα άμεσο τρόπο μορφοποίησης κειμένου.

<html> <head> <title> Όνοµα Σελίδας... </title> </head> <body> <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> </body> </html>

Λίστα 1.6 – Τα στοιχεία b, i, u

Εικόνα 1.9 Τα στοιχεία b, i, u

1.5.13. <div>

Ένα div χρησιμοποιείται συνήθως για να οργανώσει τη σελίδα σε εννοιολογικά

κομμάτια. Από μόνο του δεν έχει κάποια πρακτική εφαρμογή καθώς δεν εμφανίζει κάποιο

αντικείμενο στην οθόνη ούτε μορφοποιεί άλλα, παρόλα αυτά θεωρείται ένα από τα

σημαντικότερα tags. Μια πολύ διαδεδομένη πρακτική είναι να χρησιμοποιείται σε

συνδυασμό με τα CSS για να οργανώσει τη σελίδα σε κομμάτια όπου ισχύουν διαφορετικοί

16


κανόνες μορφοποίησης. Π.χ. σε μια σελίδα υπάρχει ένα div που θα περιλαμβάνει το μενού

στην κορυφή που η γραμματοσειρά θα είναι έντονη, άλλο div ορίζει μια στήλη αριστερά που

η γραμματοσειρά είναι μεγαλύτερη ενώ ένα τελευταίο ορίζει τη στήλη στα δεξιά της σελίδας

που η γραμματοσειρά είναι πιο μικρή κ.τ.λ.

<html> <head> <title> Όνοµα Σελίδας... </title> <style type="text/css"> .box{ background-color: red; } </style> </head> <body> 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. </body> </html>

Λίστα 1.7- Παράδειγμα του στοιχείου div

Εικόνα 1.10 Παράδειγμα του στοιχείου div

Θυμηθείτε ότι στην HTML το κείμενο συνεχίζει στην ίδια γραμμή ακόμα και αν στον

κώδικα ο προγραμματιστής έχει αλλάξει γραμμή (πατώντας enter). Παρόλα αυτά στο

συγκεκριμένο παράδειγμα παρατηρήστε ότι τα περιεχόμενα εντός του div θα εμφανιστούν

σε άλλη γραμμή.

Αυτό συμβαίνει γιατί εξ ορισμού το div καταλαμβάνει μια ολόκληρη τη γραμμή. Η

κόκκινη γραμμή παρουσιάζει το χώρο που καταλαμβάνει ένα div (εξ ορισμού δεν

εμφανίζεται η κόκκινη γραμμή).

1.5.14. <span>

Το span είναι αρκετά παρόμοιο στη χρήση του με το div. Μια σημαντική διαφορά

έγκειται στο γεγονός ότι το span καταλαμβάνει όσο το δυνατόν λιγότερο χώρο. Αντίθετα το

div θα εξαντλήσει όλο το πλάτος της γραμμής. Γι’ αυτό το λόγο το span χρησιμοποιείται κατά

κόρον για τη μορφοποίηση/σήμανση κειμένου ενώ το div χρησιμοποιείται για τον ίδιο

σκοπό αλλά για ένα σύνολο από αντικείμενα (που μπορεί να είναι κείμενο αλλά και

εικόνες).

<html> <head> <title> Όνοµα Σελίδας... </title> <style type="text/css"> span{ background-color: red; } </style> </head> <body> 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.

17


</body> </html>

Λίστα 1.8- Παράδειγμα του span element

Εικόνα 1.11 Παράδειγμα του στοιχείου span

Είναι καλό λοιπόν να θεωρούμε το div σαν ένα κουτί που εκτείνεται από το ένα άκρο

της οθόνης ως το άλλο και ύψος τόσο όσο τα στοιχεία που περιλαμβάνει. Το span μπορούμε

να το θεωρούμε σαν ένα κουτί που έχει μήκος ακριβώς τόσο όσο κείμενο (ή τα άλλα

στοιχεία) που περικλείει.

1.5.15. <a>

Εμφανίζει ένα υπερσύνδεσμο (anchor). Μπορεί να περιέχει κείμενο, εικόνα ή και τα

δύο. Επίσης υπάρχει η δυνατότητα να δίνει μια αναφορά σε μια διαφορετική ιστοσελίδα ή

σε διαφορετικό τμήμα της ίδιας ιστοσελίδας (π.χ. την τρίτη παράγραφο του κειμένου). Στη

δεύτερη περίπτωση τιμή του href θα πρέπει να το id του στοιχείου στο οποίο θέλουμε να

γίνεται η μετάβαση προηγούμενο από το χαρακτήρα “#”.

Εξ ορισμού το κείμενο αυτό θα υπογραμμιστεί και θα λάβει διαφορετικό χρώμα για

να δηλωθεί έτσι ότι είναι πλέον ένας σύνδεσμος. Εξ ορισμού ένας σύνδεσμος τον οποίο δεν

έχουμε επισκεφτεί ακόμα έχει χρώμα μπλε, ένας σύνδεσμος τον οποίο έχουμε επισκεφτεί

έχει χρώμα μοβ, ενώ ένας σύνδεσμος ακριβώς τη στιγμή που τον πατάμε έχει χρώμα

κόκκινο. Φυσικά όλα αυτά μπορούν να αλλάξουν με κατάλληλες ρυθμίσεις.

Το πιο σημαντικό από τα attributes ενός υπερσυνδέσμου είναι το href το οποίο

καθορίζει που ακριβώς θα μεταβεί η σελίδα.

<html> <head> </head> <body> <a href="http://www.google.com">Google</a> <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>

18


</body> </html>

Λίστα 1.9 - Παράδειγμα του στοιχείου a

1.5.16. <img>

Στα σύγχρονα web sites οι εικόνες αποτελούν ένα αναπόσπαστο κομμάτι σχεδόν

κάθε ιστοσελίδας. Το tag img εμφανίζει στην ιστοσελίδα μια εικόνα συγκεκριμένων

διαστάσεων που βρίσκεται σε ένα συγκεκριμένο φάκελο στο server. Τα βασικότερα

attributes του συγκεκριμένου tag είναι τα εξής:

• “src” που καθορίζει το path (τοποθεσία) της εικόνας στο server. Το path

μπορεί να είναι σχετικό (relative) δηλαδή να υποδηλώνει μια τοποθεσία σε

σχέση με την τοποθεσία της σελίδας ή απόλυτο, δηλαδή την πλήρη

διεύθυνση του πόρου στο server. Ως path τέλος μπορεί να οριστεί μια URL.

• “width” που καθορίζει το μήκος της εικόνας.

• “height” που καθορίζει το ύψος της εικόνας.

• “alt” που καθορίζει το κείμενο που θα εμφανίζεται σε ένα μικρό πλαίσιο

όταν ο χρήστης τοποθετεί το κέρσορά του πάνω στην εικόνα.

<html> <head> <title> Τίτλος... </title> </head> <body> <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="http://www.nasa.gov/images/content/634159main_five_rockets_launched_full.jpg" width="400" height="300" alt=" εικόνα από NASA" /> <br /> </body> </html>

Λίστα 1.10 Παράδειγμα στοιχείου img

1.5.17. <table>

Χρησιμοποιείται για να ορίζει ένα πίνακα με ορισμένο αριθμό στηλών και γραμμών.

Με την κατάλληλη παραμετροποίηση είναι δυνατόν να εμφανίζεται ή μην εμφανίζεται

καθόλου πλαίσιο γύρω από τον πίνακα. Ένας πίνακας ενδέχεται να περικλείει και άλλους

πίνακες.

Πέρα από την κλασική του χρήση, πολύ συχνά χρησιμοποιείται για να μορφοποιήσει

μια σελίδα σε στήλες και γραμμές ή γενικότερα σε περιοχές. Η τελευταία προσέγγιση

ωστόσο είναι καλό να αποφεύγεται καθώς μεταξύ των προγραμματιστών υπάρχει η τάση το

παρουσιαστικό να είναι και σημασιολογικά σωστό. Αυτό σημαίνει ότι κάθε tag παρουσιάζει

περιεχόμενο που ανταποκρίνεται στη σημασία του tag. Άρα ένα table αφού προορίζεται να

αναπαριστά έναν πίνακα θα πρέπει να αναπαριστά όντως έναν πίνακα.

Οι γραμμές ενός πίνακα ορίζονται μέσω του tag, <tr></tr>. Οι στήλες του με το tag

<td></td>. Τα tags των στηλών θα πρέπει οπωσδήποτε να περικλείονται από tags γραμμών.

Αντίστοιχα τα tag γραμμών θα πρέπει να περικλείονται απαραίτητα από tags πίνακα.

<html> <head> </head> <body> <table> <tr> <td> <b>X</b> </td>

19


<td> <b>Y</b> </td> </tr> <td> 123 </td> <td> 234 </td> </tr> </tr> <td> 87 </td> <td> 35 </td> </tr> </table> </body> </html>

Λίστα 1.11- Παράδειγμα του στοιχείου table

Εικόνα 1.12 Παράδειγμα του στοιχείου table

1.5.18. Φόρµες

Οι φόρμες χρησιμοποιούνται για την εισαγωγή και την αποστολή δεδομένων του

χρήστη στο 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.

20


Text

Δημιουργεί ένα κουτί για την εισαγωγή κειμένου από το χρήστη. Θέτοντας κάποια

τιμή στο attribute, value ο προγραμματιστής μπορεί να θέσει εξ’ αρχής το κείμενο του.

<html> <head> </head> <body> <form action="test.php"> Όνοµα: <input type="text" name="textbox1" /> </form> </body> </html>

Λίστα 1.12 - Το στοιχείο input για την τιμή text του attribute type

Εικόνα 1.13 Το στοιχείο input για την τιμή text του attribute type

Password

Δημιουργεί ένα κουτί για την εισαγωγή κειμένου, παρόμοιο με ένα text, το οποίο

όμως αποκρύπτει τα περιεχόμενά του από το χρήστη (π.χ. εμφανίζει αστερίσκους αντί των

γραμμάτων που εισάγει ο χρήστης). Χρησιμοποιείται κατά κόρων για την εισαγωγή

κωδικών.

<html> <head> </head> <body> <form action="test.php"> K ωδικός: <input type="password" name="password1" /> </form> </body> </html>

Λίστα 1.13 -Το στοιχείο input για την τιμή password του attribute type

Εικόνα 1.14 Το στοιχείο input για την τιμή password του attribute type

Checkbox

Δημιουργεί ένα κουτί το οποίο μπορεί να λάβει δύο καταστάσεις, check και uncheck.

Πολλά checkboxes μπορούν να ομαδοποιηθούν μαζί θέτοντας απλά την ίδια τιμή στο

attribute, name. Κατ’ αυτό τον τρόπο παρέχεται στο χρήστη μια λίστα επιλογών από τις

οποίες αυτός μπορεί να επιλέξει μια ή περισσότερες.

<html> <head> </head> <body> <form action="test.php"> Επιλογή: <input type="checkbox" name="checkbox1" /> </form> </body> </html>

Λίστα 1.14 -Το στοιχείο input για την τιμή checkbox του attribute type

21


Εικόνα 1.15 Το στοιχείο input για την τιμή checkbox του attribute type

Radio

Μοιάζει σε λειτουργία με ένα Checkbox. Εμφανίζει ένα κουμπί που επίσης μπορεί να

λάβει τις καταστάσεις check και uncheck. Όπως και τα checkboxes έτσι και τα radio μπορούν

να ομαδοποιηθούν μαζί θέτοντας την ίδια τιμή στο attribute, name. Σε αυτή την περίπτωση

παρέχεται μια λίστα επιλογών από τις οποίες ο χρήστης μπορεί να επιλέξει μόνο μία.

<html> <head> </head> <body> <form action="test.php"> Επιλογή 1:<input type="radio" name="radio1" /> <br/> Επιλογή 2:<input type="radio" name="radio1" /> <br/> Επιλογή 3:<input type="radio" name="radio1" /> <br/> </form> </body> </html>

Λίστα 1.15 - Το στοιχείο input για την τιμή radio του attribute type

Εικόνα 1.16 Το στοιχείο input για την τιμή radio του attribute type

File

Χρησιμοποιείται για την επιλογή και αποστολή αρχείων από το σύστημα του χρήστη.

Τυπικά εμφανίζει ένα κουτί κειμένου και ένα κουμπί. Όταν το κουμπί πατηθεί

παρουσιάζεται ένα παράθυρο που προτρέπει το χρήστη να επιλέξει ένα ή περισσότερα

αρχεία προς αποστολή στον server. Αφού γίνει η επιλογή στο κουτί κειμένου θα εισαχθεί

αυτόματα το path του επιλεγμένου αρχείου. Τα επιλεγμένα αρχεία θα αποσταλούν όταν η

φόρμα γίνει submit.

<html> <head> </head> <body> <form action="test.php"> Επιλογή Αρχείου:<input type="file" name="file1" /> </form> </body> </html>

Λίστα 1.16 - Το στοιχείο input για την τιμή file του attribute type

22


Εικόνα 1.17 Το στοιχείο input για την τιμή file του attribute type

Submit

Εμφανίζει ένα κουμπί στη φόρμα το οποίο όταν πατηθεί αποστέλλει τα δεδομένα της

φόρμας στο server και μάλιστα στο πρόγραμμα που καθορίζεται από την τιμή του attribute,

action μέσα στο tag, form. Θέτοντας τιμή στο πεδίο value μπορούμε να αλλάξουμε το

κείμενο που θα εμφανίζεται εντός του. Εξ’ ορισμού το κείμενο αυτό είναι Submit.

<html> <head> </head> <body> <form action="test.php"> Όνοµα: <input type="text" name="textbox1" /> <br/> Κωδικός: <input type="password" name="password1" /> <br/> <input type="submit" name="submit1" value=" Αποστολή" /> </form> </body> </html>

Λίστα 1.17 - Το στοιχείο input για την τιμή submit του attribute type

Εικόνα 1.18 Το στοιχείο input για την τιμή submit του attribute type

Image

Είναι παρόμοιο με ένα submit σε λειτουργικότητα με τη διαφορά ότι εμφανίζει μια

εικόνα αντί ενός κουμπιού. Η εικόνα τίθεται μέσω του attribute src.

<html> <head> </head> <body> <form action="test.php"> Όνοµα: <input type="text" name="textbox1" /> <br/> Κωδικός: <input type="password" name="password1" /> <br/> <input type="image" name="submit1" src="./images/send.jpg" /> </form> </body> </html>

23


Λίστα 1.18 Το στοιχείο input για την τιμή image του attribute type

Εικόνα 1.19 Το στοιχείο input για την τιμή image του attribute type

Button

Εμφανίζει ένα κουμπί στη φόρμα. Σε αντίθεση με ένα submit τέτοιου είδους κουμπιά

δεν αποστέλλουν τα δεδομένα της φόρμας στο server. Συνήθως ορίζεται στο head ένα

μικροπρόγραμμα (γραμμένο σε Javascript) και όταν το κουμπί πατηθεί τρέχει το

συγκεκριμένο πρόγραμμα. Αυτό γίνεται θέτοντας μια τιμή στο attribute onClick.

<html> <head> <script type="text/javascript"> function show_alert() { alert("Hello!"); } </script> </head> <body> <form action="test.php"> <input type="button" value="Press Me" name="btTest" onClick="show_alert()" /> </form> </body> </html>

Λίστα 1.19- Το στοιχείο input για την τιμή button του attribute type

Εικόνα 1.20 Το στοιχείο input για την τιμή button του attribute type

Reset

Εμφανίζει ένα κουμπί το οποίο όταν πατηθεί καθαρίζει τις τιμές από όλα τα πεδία της

φόρμας. Θέτοντας τιμή στο πεδίο value μπορούμε να αλλάξουμε το κείμενο που θα

εμφανίζεται εντός του. Εξ’ ορισμού το κείμενο αυτό είναι Reset.

<html> <head> </head> <body> <form action="test.php"> Όνοµα: <input type="text" name="textbox1" /> <br/> Κωδικός: <input type="password" name="password1" /> <br/> <input type="reset" name="reset1" value=" Ακύρωση" /> </form> </body> </html>

24


Λίστα 1.20 - Το στοιχείο input για την τιμή reset του attribute type

Hidden

Το συγκεκριμένο στοιχείο δεν εμφανίζει κάποιο αντικείμενο στην οθόνη, ωστόσο έχει

τη δυνατότητα να αποθηκεύει μια τιμή. Χρησιμοποιείται κατά κόρων για να περνά τιμές από

φόρμα σε φόρμα χωρίς ο χρήστης να αναγκάζεται να επανεισάγει τις τιμές αυτές. Η τιμή

αυτού το πεδίου τίθεται είτε μέσω JavaScript στον browser του χρήστη είτε μέσω κάποιου

προγράμματος που τρέχει στον server.

<select>

Δημιουργεί μια αναδιπλούμενη λίστα επιλογών από τις οποίες ο χρήστης μπορεί να

επιλέξει μόνο μία. Η τιμή της επιλεγμένης εγγραφής θα αποσταλεί στο server. Κάθε επιλογή

που θα περιέχει η λίστα ορίζεται με ένα ξεχωριστό tag, το option. Απαραίτητο attribute

καθενός option είναι το value. Μεταξύ του opening και closing tag ενός option, τοποθετείται

το κείμενο που επιθυμούμε να εμφανίζεται για την αντίστοιχη εγγραφή. Δεν είναι

απαραίτητο η τιμή μιας εγγραφής στη λίστα να είναι η ίδια με το κείμενο της εγγραφής. Ένα

προαιρετικό attribute είναι το selected το οποίο ορίζει αν κάποια από τις εγγραφές τις

λίστας θα είναι προεπιλεγμένη.

<html> <head> </head> <body> <form action="test.cgi"> <select> <option value="1"> Επιλογή 1 </option> <option value="2"> Επιλογή 2 </option> <option value="3"> Επιλογή 3 </option> </select> </form> </body> </html>

Λίστα 1.21- Το στοιχείο select

Εικόνα 1.21 Το στοιχείο select

<textarea>

Ορίζει μια περιοχή για την εισαγωγή κειμένου. Μοιάζει σε λειτουργικότητα με το

<input type=”text” /> με τη διαφορά ότι παράγει κουτιά πολλών γραμμών. Δεν υπάρχει

περιορισμός στο πλήθος χαρακτήρων που μπορεί να εισαχθεί σε ένα textarea. Το attribute,

“cols” ορίζει το μήκος που θα καταλαμβάνει το textarea στην οθόνη (στην προκειμένη

περίπτωση μετριέται σε στήλες μεγέθους ενός χαρακτήρα) ενώ με το attribute, “rows”

υπάρχει η δυνατότητα να ορίσουμε τον αριθμό των γραμμών. Ένα ακόμα ενδιαφέρον

attribute είναι το “readonly” το οποίο όταν λαμβάνει την τιμή “true” καθιστά το textarea

ανίκανο να δεχθεί κείμενο από το χρήστη. Υπάρχει η δυνατότητα να εμφανίσουμε κείμενο

σε ένα textarea με την εκκίνηση της συγκεκριμένης σελίδας, αυτό γίνεται με τοποθετώντας

το αντίστοιχο κείμενο μεταξύ του opening και closing tag. Φυσικά ο χρήστης θα είναι σε

θέση να σβήσει ή να μεταβάλει το κείμενο αυτό εκτός αν το attribute readonly έχει τεθεί σε

true.

<html> <head> </head> <body> <form action="test.cgi"> <textarea rows="5" cols="20"> Περιγραφή...</textarea>

25


</form> </body> </html>

Λίστα 1.22- Το στοιχείο textarea

Εικόνα 1.22 Το στοιχείο textarea

1.6. Cascading Style Sheets Η Cascading Style Sheets (CSS) είναι μια ειδική γλώσσα που προορίζεται για τον

καθορισμό της παρουσιαστικής σημασιολογίας (semantic markup), δηλαδή της εμφάνισης

των αντικειμένων μιας ιστοσελίδας. Έτσι χαρακτηριστικά όπως το μέγεθος, το χρώμα, το

στυλ αλλά και η θέση αντικειμένων μπορούν να αλλάξουν από τα προκαθορισμένα δίνοντας

μια πιο εντυπωσιακή μορφή και ένα πιο προσωπικό χαρακτήρα στις σελίδες.

1.6.1. Inline Styles

Υπάρχουν πολλοί τρόποι καθορισμού τις εμφάνισης των στοιχείων της σελίδας. Ένας

άμεσος τρόπος είναι θέτοντας την τιμή του attribute, style του συγκεκριμένου στοιχείου. Ο

τρόπος αυτός είναι γνωστός και ως ορισμός inline style. Το attribute style ενδέχεται να έχει

πολλά πεδία ανάλογα με το είδος του στοιχείου το οποίο προσπαθούμε να

μορφοποιήσουμε. Κάθε πεδίο είναι υπεύθυνο για τον καθορισμό ενός χαρακτηριστικού του

στοιχείου. Μεταξύ του ονόματος του πεδίου και της τιμής του θα πρέπει να υπάρχει πάντα o

χαρακτήρας “:”. Τα πεδία μεταξύ τους διαχωρίζονται με ;. Η γενική μορφή ενός attribute

style είναι η ακόλουθη:

style=” όνοµα_πεδίου1: τιµή; όνοµα_πεδίου2: τιµή; όνοµα_πεδίουΝ: τιµή”

Στο παρακάτω παράδειγμα το κείμενο εντός της παραγράφου που ορίζεται με το tag

p θα εμφανιστεί κόκκινο και με πλάγια μορφοποίηση.

<p id="paragraph_one" style="color: red; font-style: italic;"> 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>

Λίστα 1.23- Παράδειγμα με inline style μέσα σε ένα element παραγράφου

1.6.2. Embedded Styles

Τα inline styles είναι ένας αποτελεσματικός και γρήγορος τρόπος καθορισμού της

μορφής στοιχείων της σελίδας. Ωστόσο όταν υπάρχουν πολλά στοιχεία στη σελίδα και

προκύψει η ανάγκη για αλλαγή της μορφής τους μαζικά τότε τα inline styles καθίστανται

αντιπαραγωγικά. Ένας εναλλακτικός τρόπος που λύνει αυτό το πρόβλημα είναι τα

embedded styles. Αυτό πραγματοποιείται ορίζοντας ένα ειδικό τομέα στη σελίδα που

περιλαμβάνει όλες τις οδηγίες μορφοποίησης. Πιο συγκεκριμένα αυτό γίνεται

περιλαμβάνοντας το tag, style εντός του tag, head της σελίδας.

<style type="text/css"> p { font-style: italic; color: red; }

26


</style>

Λίστα 1.24- Παράδειγμα embedded style

Ο παραπάνω κώδικας θέτει την μορφή όλων των στοιχείων p της σελίδας σε κόκκινο

χρώμα και πλάγια μορφοποίηση κειμένου. Έτσι ο προγραμματιστής εξοικονομεί χρόνο όταν

υπάρχουν πολλά στοιχεία p στη σελίδα.

1.6.3. External Styles

Ένας τελευταίος τρόπος για τον καθορισμό της μορφής στοιχείων της σελίδας είναι

τα external styles. Είναι ο πιο διαδεδομένος τρόπος ορισμού κανόνων μορφοποίησης. Η

συγκεκριμένη μέθοδος απαιτεί οι οδηγίες μορφοποίησης να καθορίζονται εντός αρχείων,

ανεξάρτητων από την εκάστοτε σελίδα. Αρχεία αυτού του τύπου έχουν την κατάληξη .css.

Θα πρέπει να σημειωθεί ότι η σελίδα η οποία πρόκειται να μορφοποιηθεί θα πρέπει να

περιλαμβάνει μια αναφορά στο συγκεκριμένο αρχείο μορφοποίησης. Πολλές διαφορετικές

ιστοσελίδες μπορεί να αναφέρονται σε ένα αρχείο css. Αλλαγές που γίνονται σε αυτό το

αρχείο θα έχουν πλέον ισχύ σε όλες αυτές τις σελίδες.

.css p { font-weight: bold; color: blue; }

.html . . . <head> <title>Page Title</title> <link href="style1.css" rel="stylesheet" type="text/css"/> </head> . . .

Λίστα 1.25- Παράδειγμα ενός style εξωτερικού από το κύριο html αρχείο

1.6.4. Κανόνες CSS

Στο παράδειγμα παραπάνω το αρχείο CSS περιελάμβανε μια μόνο οδηγία

μορφοποίησης. Οι οδηγίες μορφοποίησης στα αρχεία CSS ονομάζονται κανόνες και η τυπική

δομή ενός κανόνα φαίνεται στο παρακάτω σχήμα:

Εικόνα 1.23 - Η δομή ενός κανόνα CSS

Κάθε κανόνας ξεκινά με το selector. Ένα selector καθορίζει το πεδίο δράσης του

συγκεκριμένου κανόνα. Υπάρχουν πολλοί τύποι selector και θα εξετάσουμε καθένα από

αυτούς παρακάτω. Στο παραπάνω παράδειγμα ο κανόνας αφορά όλα τα στοιχεία p που

βρίσκονται στη σελίδα. Το σώμα του κανόνα ξεκινά με το χαρακτήρα “{“ και τελειώνει με το

χαρακτήρα “}”. Μέσα στο σώμα του κανόνα βρίσκονται μια ή παραπάνω οδηγίες

p{ font-weight: bold; color: blue; }

Αρχή κανόνα

Τιμή

Ιδιότητα

Selector

Τέλος κανόνα

27


μορφοποίησης. Κάθε οδηγία περιλαμβάνει μια ιδιότητα ακολουθούμενη από το χαρακτήρα

“:” και την τιμή. Κάθε οδηγία θα πρέπει οπωσδήποτε να τελειώνει με το χαρακτήρα “;”

(εκτός αν υπάρχει μόνο μία). Συνήθως τα αρχεία CSS περιλαμβάνουν πολλούς κανόνες, οι

οποίοι τοποθετούνται ο ένας κάτω από τον άλλο.

Στο παράδειγμα συναντήσαμε μια περίπτωση όπου ο selector των κανόνων είναι ένα

στοιχείο HTML. Τέτοιου είδους κανόνες επηρεάζουν τη μορφή όλων των στοιχείων μιας

HTML σελίδας, του συγκεκριμένου τύπου (για το προηγούμενο παράδειγμα όλα τα στοιχεία

τύπου p). Κάτι τέτοιο ωστόσο είναι περιοριστικό. Πολλές φορές θέλουμε ένας κανόνας να

έχει ισχύ μόνο για μια ομάδα στοιχείων σε μια σελίδα ή σε ένα μεμονωμένο στοιχείο της

σελίδας. Η γλώσσα CSS επιτρέπει τη χρήση διαφορετικών selectors για να αυξήσει ή να

μειώσει την εμβέλεια ισχύος των οδηγιών μορφοποίησης.

1.6.5. Universal Selector

Χρησιμοποιώντας τον universal selector, ο οποίος αναπαρίσταται με το χαρακτήρα

“*”, οι οδηγίες μορφοποίησης λαμβάνουν καθολική ισχύ για όλα τα στοιχεία σε μια σελίδα.

Το παρακάτω παράδειγμα θέτει το χρώμα όλων των στοιχείων της σελίδας σε κόκκινο.

<html> <head> <style type="text/css"> * { color:red; } </style> </head> <body> <h1> Επικεφαλίδα </h1> <p> Παράγραφος </p> </body> </html>

Λίστα 1.26- Παράδειγμα ενός universal selector στη css

1.6.6. Descendant Selector

Ο συγκεκριμένος τύπος selector είναι χρήσιμος σε περιπτώσεις που θέλουμε να

μορφοποιήσουμε ένα στοιχείο μόνο όταν αυτό βρίσκεται εντός ενός άλλου στοιχείου.

<html> <head> <style type="text/css"> div p { color:red; } </style> </head> <body> <h1> Επικεφαλίδα </h1> <p> Παράγραφος 1 </p> <div> <p> Παράγραφος 2 </p> </div> <div> <span>

28


<p> Παράγραφος 3 </p> </span> </div> </body> </html>

Λίστα 1.27- Παράδειγμα ενός descendant selector όπου μόνο οι παράγραφοι μέσα στα

divs θα εμφανίζονται με κόκκινο χρώμα

1.6.7. Child Selector

Ο child selector είναι παρόμοιος με ένα descendant selector στη χρήση του. Η

διαφορά έγκειται στο γεγονός ότι οι οδηγίες μορφοποίησης θα εκτελεστούν μόνο αν το

στοιχείο στο δεύτερο τμήμα του selector είναι άμεσος απόγονος του στοιχείου του πρώτου

μέρους. Ο συγκεκριμένος τύπος selector δεν υποστηρίζεται από τον IE6.

<html> <head> <style type="text/css"> div > p { color:red; } </style> </head> <body> <h1> Επικεφαλίδα </h1> <p> Παράγραφος 1 </p> <div> <p> Παράγραφος 2 </p> </div> <div> <span> <p> Παράγραφος 3 </p> </span> </div> </body> </html>

Λίστα 1.28- Παράδειγμα ενός child selector

Παρατηρείστε ότι στο συγκεκριμένο παράδειγμα η φράση “Παράγραφος 3” δεν θα

ακολουθήσει τη μορφοποίηση που ορίζει ο κανόνας αφού παρόλο που το p βρίσκεται μέσα

στο στοιχείο div, παρεμβάλλεται το στοιχείο span μεταξύ τους.

1.6.8. Class Selector

Ο class selector χρησιμοποιείται για τις περιπτώσεις που θέλουμε να εκτελέσουμε

κανόνες μορφοποίησης σε ένα υποσύνολο στοιχείων. Τα στοιχεία αυτά μπορεί να είναι του

ίδιου τύπου ή διαφορετικού τύπου. Σε αυτές τις περιπτώσεις το attribute, class θα πρέπει

αρχικά να προστεθεί σε στοιχεία HTML για να δηλώσει ότι αυτά ανήκουν στην ίδια ομάδα

μορφοποίησης. Στη συνέχεια θα πρέπει στο αρχείο CSS να ορίσουμε ένα κανόνα θέτοντας

ως selector το όνομα της κλάσης με το χαρακτήρα “.” μπροστά από αυτό. Ο κανόνας αυτός

θα επηρεάσει όλα τα στοιχεία που ανήκουν στη συγκεκριμένη κλάση.

29


<html> <head> <style type="text/css"> .red { color:red; } </style> </head> <body> <h1 class="red"> Επικεφαλίδα </h1> <p class="red"> Παράγραφος </p> </body> </html>

Λίστα 1.29- Παράδειγμα ενός class selector

Υπάρχει η δυνατότητα για περεταίρω συγκεκριμενοποίηση του τύπου των στοιχείων

στα οποία θα ισχύσουν οι κανόνες μορφοποίησης.

<html> <head> <style type="text/css"> .red { color:red; } p.red{ text-align:center; } </style> </head> <body> <h1 class="red"> Επικεφαλίδα </h1> <p class="red"> Παράγραφος </p> </body> </html>

Λίστα 1.30- Παράδειγμα περαιτέρω μορφοποίησης μέσα σε μια κλάση

Στο παραπάνω παράδειγμα όλα τα στοιχεία που ανήκουν στην κλάση red θα λάβουν

κόκκινο χρώμα, όμως μόνο τα στοιχεία του τύπου p θα λάβουν στοίχιση στο κέντρο.

1.6.9. ID Selectors

Οι ID Selectors χρησιμοποιούνται για τη δημιουργία κανόνων για μεμονωμένα

στοιχεία. Σε αυτή την περίπτωση θα πρέπει να οριστεί το attribute, id στο HTML στοιχείο

που μας ενδιαφέρει. Επιπρόσθετα στο αρχείο CSS θα πρέπει να προσθέσουμε ένα κανόνα

θέτοντας ως selector το id του στοιχείου με το χαρακτήρα “#” μπροστά του.

<html> <head> <style type="text/css"> #red { color:red; } </style> </head> <body> <h1> Επικεφαλίδα

30


</h1> <p id="red"> Παράγραφος 1 </p> <p> Παράγραφος 2 </p> </body> </html>

Λίστα 1.31- Παράδειγμα ενός id selector

Για την περίπτωση που υπάρχουν πολλοί κανόνες που περιλαμβάνουν τις ίδιες

ακριβώς οδηγίες μπορούμε να ομαδοποιήσουμε τους κανόνες αυτούς χωρίζοντας τον

καθένα απ’ αυτούς με κόμμα και προσθέτοντας ένα κοινό σώμα. Έτσι το παράδειγμα:

<html> <head> <style type="text/css"> h1{ color:red; } p { color:red; } </style> </head> <body> <h1> Επικεφαλίδα </h1> <p> Παράγραφος </p> </body> </html>

Είναι ισοδύναμο με το:

<html> <head> <style type="text/css"> h1, p { color:red; } </style> </head> <body> <h1> Επικεφαλίδα </h1> <p> Παράγραφος </p> </body> </html>

Λίστα 1.32- Παράδειγμα ομαδοποίησης ίδιων οδηγιών

1.6.10. Ιδιότητες Μορφοποίησης

Στην παράγραφο αυτή θα παραθέσουμε μερικά παραδείγματα με κάποιες από τις

βασικότερες ιδιότητες μορφοποίησης. Το CSS ορίζουν μια εκτενή λίστα από τέτοιες

ιδιότητες και σε καμία περίπτωση τα παραδείγματα αυτής της παραγράφου δεν είναι

εξαντλητικά. Μέσω των CSS μπορούν να αλλάξουν βασικά χαρακτηριστικά στοιχείων της

σελίδας.

31


Είδος γραµµατοσειράς

Η ιδιότητα font-family μας επιτρέπει να καθορίσουμε το είδος της γραμματοσειράς

που θα χρησιμοποιηθεί. Η γραμματοσειρά θα πρέπει να είναι εγκατεστημένη στον

υπολογιστή του πελάτη (του χρήστη) γι’ αυτό καλό θα είναι να ορίζονται πολλαπλές τιμές

(σαν μια λίστα) για την περίπτωση που η πρώτη προτίμηση δεν είναι εγκατεστημένη. Σαν

τιμή μπορεί να οριστεί μια γενική οικογένεια γραμματοσειρών π.χ. serif ή μια συγκεκριμένη

γραμματοσειρά π.χ. Times New Roman. Όταν η τιμή περιέχει κενά τότε θα πρέπει να

περικλείεται μεταξύ “ “.

p { font-family: "Courier New", Times, serif }

Λίστα 1.33- Παράδειγμα προσδιορισμού γραμματοσειράς

Εικόνα 1.24 - Η εμφάνιση του παραδείγματος της Λίστας 1.19

Στυλ γραµµατοσειράς

Η ιδιότητα font-style ορίζει το στυλ της γραμματοσειράς σε μία από τις πιθανές τιμές,

normal, italic (πλάγια), oblique (λοξή). Τα στυλ italic και oblique έχουν παρόμοια

αποτελέσματα μορφοποίησης.

p { font-style: italic }

Λίστα 1.34- Παράδειγμα προσδιορισμού στυλ γραμματοσειράς


Παραλλαγή γραµµατοσειράς

Η ιδιότητα font-variant μπορεί να λάβει τιμή normal και small-caps. Στην δεύτερη

περίπτωση οι όλοι οι πεζοί χαρακτήρες μετατρέπονται σε κεφαλαίοι μικρότερου όμως

μεγέθους ενώ όλοι οι κεφαλαίοι διατηρούν το μέγεθός τους.

P { font-variant: small-caps }

Λίστα 1.35- Παράδειγμα παραλλαγής γραμματοσειράς

32



Ένταση γραµµατοσειράς

Η ιδιότητα font-weight μεταβάλει το στυλ της γραμματοσειράς σε έντονο ή λιγότερο

έντονο. Οι βασικές τιμές που μπορεί να πάρει είναι normal και bold. Υποστηρίζεται επίσης ο

άμεσος ορισμός έντασης της γραμματοσειράς μέσω τιμών που μπορεί να κυμαίνονται από

το 100 ως το 900. Η normal γραμματοσειρά έχει τιμή 400 ενώ η bold έχει τιμή 700. Τέλος

υποστηρίζονται δυο “σχετικές” τιμές που είναι οι bolder και lighter. Οι τιμές αυτές θέτουν

την ένταση της γραμματοσειράς σε σχέση με την υπάρχουσα έντασή της που κληρονομείται

από το στοιχείο-γονέα.

p { font-weight: bold }

Λίστα 1.36- Παράδειγμα έντασης γραμματοσειράς


Μέγεθος γραµµατοσειράς

Το μέγεθος γραμματοσειράς ορίζεται από την ιδιότητα font-size. Η τιμή που μπορεί

να λάβει η συγκεκριμένη ιδιότητα μπορεί να είναι (α) μια απόλυτη τιμή όπως, xx-small, x-

small, small, medium, large, x-large, xx-large, (β) μια σχετική τιμή όπως, smaller, larger η

οποία θέτει το μέγεθος της γραμματοσειράς σε σχέση με το μέγεθος που έχει κληρονομηθεί

από το στοιχείο γονέα, (γ) μια απόλυτη τιμή σε μονάδες μέτρησης όπως π.χ. 10px, (δ) μια

τιμή σε ποσοστό π.χ. 200% που δηλώνει πόσο μεγαλύτερο ή μικρότερο από το μέγεθος του

στοιχείου γονέα.

p { font-size: 4pt }

Λίστα 1.37- Παράδειγμα μεγέθους γραμματοσειράς


33


∆ιακόσµηση κειµένου

Η ιδιότητα text-decoration ορίζει αν το κείμενο θα εμφανίζεται υπογραμμισμένο

(τιμή underline), με μια γραμμή πάνω από τα γράμματα (overline), διαγεγραμμένο (line-

through) ή να αναβοσβήνει (blink). Να σημειωθεί ότι προς το παρόν ελάχιστοι browsers

υποστηρίζουν την τιμή blink. Υπάρχει η δυνατότητα καθορισμού πολλαπλών τιμών

ταυτόχρονα για την συγκεκριμένη ιδιότητα.

p { text-decoration: underline blink }

Λίστα 1.38- Παράδειγμα διακόσμισης κειμένου


Απόσταση µεταξύ λέξεων

Η ιδιότητα word-spacing καθορίζει την απόσταση μεταξύ των λέξεων του κειμένου. Η

ιδιότητα αυτή επιτρέπει και αρνητικές τιμές αλλά σε αυτή την περίπτωση οι λέξεις μπορεί

να επικαλύπτονται.

p { word-spacing: 0.5em }

Λίστα 1.39- Παράδειγμα προσδιορισμού απόστασης μεταξύ λέξεων


Οι μονάδες μέτρησης στα CSS μπορεί να είναι κάποια από αυτές που φαίνονται στον

παρακάτω πίνακα:

Πίνακας 1.1 - Μονάδες μέτρησης στα Cascading Style Sheets

Μονάδα Περιγραφή

em 1em ισούται με το μέγεθος της τρέχουσας γραμματοσειράς. Έτσι π.χ. 2em

μορφοποιεί το κείμενο σε διπλάσιο μέγεθος από την τρέχουσα

γραμματοσειρά.

ex Ισούται με το μέγεθος του γράμματος x στην τρέχουσα γραμματοσειρά

px Πίξελς

in Ίντσες

cm Εκατοστά

34


mm Χιλιοστά

pt Πόντοι, όπου ο κάθε πόντος ισούται με 1/72 μιας ίντσας

pc Πίκα, όπου μία πίκα ισούται με 12 πόντους

Απόσταση µεταξύ χαρακτήρων

Η ιδιότητα letter-spacing καθορίζει την απόσταση μεταξύ των χαρακτήρων

(γραμμάτων) του κειμένου. Αρνητικές τιμές επιτρέπονται και σε αυτή την περίπτωση.

p { letter-spacing: -3px }

Λίστα 1.40- Παράδειγμα απόστασης μεταξύ χαρακτήρων σε μια παράγραφο


Παραλλαγή κειµένου

Η ιδιότητα text-transform προσφέρει τη δυνατότητα μετατροπής των χαρακτήρων

του κειμένου σε κεφαλαίους (τιμή uppercase) ή πεζούς (τιμή lowercase). Μια τρίτη τιμή

(capitalize) μετατρέπει τον πρώτο χαρακτήρα κάθε λέξης σε κεφαλαίο και αφήνει τους

υπόλοιπους χωρίς μετατροπή. Η εξ’ ορισμού τιμή αυτής της ιδιότητας είναι το none (καμία

αλλαγή).

p { text-transform: capitalize }

Λίστα 1.41- Παράδειγμα παραλλαγής κειμένου σε μια επικεφαλίδα


Στοίχιση κειµένου

Η ιδιότητα text-align είναι υπεύθυνη για την οριζόντια στοίχιση κειμένου. Οι πιθανές

τιμές είναι (α) center η οποία στοιχίζει το κείμενο στο κέντρο, (β) left που στοιχίζει το

κείμενο αριστερά , (γ) right που στοιχίζει το κείμενο δεξιά, (δ) justify η οποία στοιχίζει το

κείμενο αριστερά και δεξιά και προσθέτει κενό ανάμεσα στις λέξεις όπου αυτό απαιτείται.

p { text-align: justify }

Λίστα 1.42- Παράδειγμα στοίχισης κειμένου

35



Κάθετη στοίχιση κειµένου

Η ιδιότητα vertical-align ορίζει την στοίχιση που θα έχει το κείμενο κάθετα. Η

στοίχιση γίνεται σε σχέση με τη βασική γραμμή του κειμένου. Με τον όρο βασική γραμμή

εννοούμε μια νοητή γραμμή παρόμοια τη γραμμή ενός τετραδίου που λειτουργεί σαν τη

βάση κάθε χαρακτήρα. Μπορούμε να καταλάβουμε λοιπόν, ότι το χαμηλότερο σημείο

χαρακτήρων όπως το “α” ξεκινά από τη βασική γραμμή ενώ το χαμηλότερο σημείο

χαρακτήρων όπως το “γ” ή το “χ” είναι χαμηλότερα από τη βασική γραμμή. Οι πιθανές τιμές

είναι (α) baseline η οποία ευθυγραμμίζει τη βασική γραμμή του στοιχείου με τη βασική

γραμμή του στοιχείου γονέα, (β) middle η οποία ευθυγραμμίζει το μέσον του στοιχείου με

τη βασική γραμμή του στοιχείου-γονέα συν το μισό ύψος του γράμματος “x” στη

γραμματοσειρά του γονέα, (γ), sub η οποία θέτει το στοιχείο ως δείκτη (π.χ. xi), (δ) το οποίο

θέτει το στοιχείο ως δύναμη (π.χ. x2), (ε) text-top το οποίο ευθυγραμμίζει το υψηλότερο

σημείο ενός στοιχείου με υψηλότερο σημείο του στοιχείου-γονέα, (στ) text-bottom το οποίο

ευθυγραμμίζει το χαμηλότερο σημείο του στοιχείου με το χαμηλότερο σημείο του στοιχείου

γονέα, (ζ) ευθυγραμμίζει το υψηλότερο σημείο του στοιχείου με το υψηλότερο στοιχείο της

ίδιας γραμμής , (η) ευθυγραμμίζει το χαμηλότερο σημείο του στοιχείου με το χαμηλότερο

στοιχείο της ίδιας γραμμής.

Εσοχή κειµένου

Η ιδιότητα text-indent ορίζει το μέγεθος της εσοχής της πρώτης γραμμής του

κειμένου του συγκεκριμένου στοιχείου. Οι τιμές αυτής της ιδιότητας μπορεί να εκφράζονται

σε απόλυτες τιμές ή σε ποσοστά. Στη δεύτερη περίπτωση το ποσοστό αναφέρεται σε σχέση

με την τιμή εσοχής του στοιχείου-γονέα.

p { text-indent: 10em }

Λίστα 1.43- Παράδειγμα εσοχής κειμένου


Μέγεθος γραµµής κειµένου

Η ιδιότητα line-height ορίζει την κάθετη απόσταση μεταξύ δύο διαδοχικών γραμμών

κειμένου. Η απόσταση αυτή μπορεί να οριστεί σε ίντσες, εκατοστά, πίξελ, πόντους ή με ένα

απλό αριθμό (χωρίς αυτός να ακολουθείται από μονάδα μέτρησης). Στην τελευταία

περίπτωση το μέγεθος της γραμμής ορίζεται από το γινόμενο του μεγέθους της

36


γραμματοσειράς με τον αριθμό αυτό. Τέλος υπάρχει η δυνατότητα ορισμού τιμής σε επί τοις

εκατό ποσοστό όπου το μέγεθος της γραμμής λαμβάνει μια τιμή ανάλογα με το μέγεθος της

τρέχουσας γραμματοσειράς του κειμένου.

p { line-height: 2 }

Λίστα 1.44- Παράδειγμα μεγέθους γραμμής κειμένου


Χρώµα

Η ιδιότητα color μας επιτρέπει να ορίσουμε το χρώμα κειμένου. Οι πιθανές τιμές που

μπορεί λάβει αυτή η ιδιότητα μπορεί να είναι (α) το όνομα ενός χρώματος από μια πληθώρα

προκαθορισμένων χρωμάτων (π.χ. blue, red etc.), (β) η τιμή RGB του χρώματος γραμμένη ως

#RRGGBB, όπου RR, GG, BB ένας δεκαεξαδικός, (γ) η τιμή RGB του χρώματος γραμμένη ως

#RGB, όπου R, G, B ένας δεκαεξαδικός, (δ) η τιμή RGB του χρώματος γραμμένη ως rgb(x, x, x)

όπου x είναι ένας δεκαδικός από το 0 έως το 255, (ε) η τιμή RGB του χρώματος γραμμένη ως

rgb(x%, x%, x%) όπου x είναι ένας αριθμός από το 0 έως το 100. Στα παρακάτω

παραδείμγατα όλες οι τιμές κωδικοποιούν το κόκκινο χρώμα.

p { color: red } p { color: #foo } p { color: #ff0000 } p { color: rgb(255,0,0) } p { color: rgb(100%, 0%, 0%) }

Λίστα 1.45- Οι διάφοροι τρόποι έκφρασης του χρώματος


37


Χρώµα παρασκηνίου

Η ιδιότητα background-color χρησιμοποιείται για να ορίσει ένα χρώμα για το

παρασκήνιο (background) ενός στοιχείου. Η τιμή του χρώματος μπορεί να τεθεί με κάποιο

από τους τρόπους που περιγράφηκαν για την ιδιότητα color. Θέτοντας τιμή transparent το

στοιχείο λαμβάνει το χρώμα του στοιχείου μέσα στο οποίο περιέχεται.

p { background-color: red }

Λίστα 1.46- Παράδειγμα χρώματος παρασκηνίου


Εικόνα Παρασκηνίου

Η ιδιότητα background-image θέτει μια εικόνα στο παρασκήνιο ενός στοιχείου. Η

τιμή πρέπει να είναι μια URL που θα δείχνει σε κάποιο πόρο εντός του ίδιου συστήματος

αρχείου του server ή σε κάποια άλλη τοποθεσία στον παγκόσμιο ιστό.

p { background-image: url("./images/test1.gif") }

Λίστα 1.47- Παράδειγμα εικόνας στο παρασκήνιο


Επανάληψη παρασκηνίου

Η ιδιότητα background-repeat καθορίζει πως θα επαναλαμβάνεται μια εικόνα του

παρασκηνίου ενός στοιχείου αν αυτή δεν επαρκεί για να το γεμίσει πλήρως. Για την τιμή

repeat-x η εικόνα θα επαναληφθεί μόνο στον οριζόντιο άξονα. Για την τιμή repeat-y μόνο

στον κάθετο άξονα, ενώ για την τιμή repeat η εικόνα θα επαναληφθεί και στους δύο άξονες.

p { background-image: url(“./images/test2.jpg”); background-repeat: repeat; }

Λίστα 1.48- Παράδειγμα επανάληψης μιας μικρής εικόνας στο παρασκήνιο

38



Προσάρτηση παρασκηνίου

Η ιδιότητα background-attachment καθορίζει αν κατά τη διάρκεια του scrolling η

εικόνα στο παρασκήνιο θα κινείται μαζί με το αντικείμενο ή θα μένει σταθερή. Οι δύο τιμές

scroll και fixed καθορίζουν αυτή τη συμπεριφορά αντίστοιχα.

p { background-image: url("./images/test.jpg"); background-attachment: fixed ; }

Λίστα 1.49- Παράδειγμα προσάρτησης μιας εικόνας που ακολουθεί το αντικείμενο

1.6.11. Πλεονεκτήµατα CSS

Η χρήση CSS συνεπάγεται με πολλά πλεονεκτήματα σε σχέση με τον απλό ορισμό

attributes μορφοποίησης των HTML στοιχείων της σελίδας μας. Τα βασικότερα από τα οποία

είναι:

• Μειώνει το χρόνο προγραμματισμού. Τα CSS επιτρέπουν να γράψουμε

οδηγίες μορφοποίησης μία φορά να τις συμπεριλάβουμε σε ένα αρχείο και

στη συνέχεια αυτό το στυλ μορφοποίησης να το εφαρμόσουμε σε

πολλαπλές σελίδες.

• Μειώνει το χρόνο φόρτωσης των σελίδων. Γράφοντας CSS δεν είμαστε

αναγκασμένοι να εισάγουμε τα αντίστοιχα attributes για καθένα από τα

στοιχεία τις σελίδας. Αυτό συνεπάγεται με λιγότερο πηγαίο κώδικα στις

σελίδες γεγονός που με τη σειρά του οδηγεί σε αρχεία HTML μικρότερου

μεγέθους.

• Ευκολότερη συντήρηση. Στα CSS οι οδηγίες μορφοποίησης βρίσκονται

συγκεντρωμένες σε ένα μέρος και όχι διάσπαρτες σε πολλά διαφορετικά

σημεία πολλών διαφορετικών σελίδων. Τροποποιώντας τα αρχεία CSS οι

αλλαγές έχουν καθολική ισχύ.

• Παρέχει μεγαλύτερες δυνατότητες μορφοποίησης. Τα CSS παρέχουν πάντα

μεγαλύτερη γκάμα από attributes σε σχέση με το αριθμό των attributes που

παρέχει η HTML για κάθε αντικείμενο.

Εισαγωγή στην ASP.NET 4 - dga.gr · να λαμβάνει αρχεία γραμμένα...

Documents

Transcript of Εισαγωγή στην ASP.NET 4 - dga.gr · να λαμβάνει αρχεία γραμμένα...