TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο

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

Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons 2

Βασική Δομή των Σελίδων Ανάπτυξη Δικτυακών Τόπων 2

1. Δημιουργία ενός HTML αρχείου Ανάπτυξη Δικτυακών Τόπων 3

Τα HTML αρχεία είναι απλώς αρχεία κειμένου με δυο επιπλέον χαρακτηριστικά: 1. Τα HTML αρχεία φέρουν την επέκταση.html ή.htm 2. Τα HTML αρχεία περιέχουν tags. Τα tags είναι εντολές κώδικας- που λένε στον υπολογιστή πως πρέπει να εμφανιστεί το περιεχόμενο των σελίδων. Επιλέγοντας την εντολή view source μπορείτε να δείτε ορισμένα από τα tags. Ανάπτυξη Δικτυακών Τόπων 4

συνέχεια Ανάπτυξη Δικτυακών Τόπων 5

1.1 Συμβάσεις Ονομασίας Στις περισσότερες περιπτώσεις δεν έχει σημασία ποια επέκταση θα χρησιμοποιήσετε αλλά να τηρείτε μια σταθερή σύμβαση. Ορισμένοι browsers κάνουν διάκριση μεταξύ πεζών και κεφαλαίων χαρακτήρων, πράγμα που σημαίνει ότι πρέπει να κρατάτε ένα συνεπές και ομοιόμορφο σχήμα ονομασίας στα αρχεία που φτιάχνετε. Μια καλή τεχνική είναι να χρησιμοποιείτε αποκλειστικά πεζούς ή κεφαλαίους χαρακτήρες. Ανάπτυξη Δικτυακών Τόπων 6

συνέχεια Να χρησιμοποιείτε απλά ονόματα αρχείων, μόνο με γράμματα και αριθμούς. Μην χρησιμοποιείτε κενά διαστήματα, σύμβολα στίξης ή ειδικούς χαρακτήρες. Ωστόσο οι παύλες (-) και οι κάτω παύλες (_) επιτρέπονται. Οι ίδιες συστάσεις ισχύουν και για τα ονόματα των φακέλων Ανάπτυξη Δικτυακών Τόπων 7

2. Εξέταση ενός HTML αρχείου σε μια εφαρμογή Browser Ανάπτυξη Δικτυακών Τόπων 9

Μπορείτε να εμφανίζεται τα html αρχεία που αποθηκεύετε στον υπολογιστή σας με έναν browser χωρίς αυτά να βρίσκονται σε κάποιον server. Όταν θέλετε να εξετάσετε μια σελίδα ανοίξτε τον browser που χρησιμοποιείτε και επιλέξτε την εντολή File / Open και κινηθείτε στη δομή των φακέλων μέχρι να βρείτε το επιθυμητό αρχείο html. Ανάπτυξη Δικτυακών Τόπων 10

Χρησιμοποιώντας έναν απλό συντάκτη κειμένου τα βήματα για την τροποποίηση ενός html αρχείου είναι: 1. Ανοίξτε το html αρχείο στο συντάκτη κειμένου 2. Τροποποιήστε το περιεχόμενο του html αρχείου 3. Αποθηκεύστε το html αρχείο στο συντάκτη κειμένου 4. Ανοίξτε το html αρχείο με έναν browser 5. Κάντε «κλικ» στο κουμπί ανανέωσης ή επαναφόρτωσης (refresh) για να ενημερώσετε την HTML σελίδα με τις αλλαγές που μόλις κάνατε. Ανάπτυξη Δικτυακών Τόπων 11

Χρησιμοποιώντας έναν συντάκτη με γραφικό περιβάλλον ή WYSISWYG τα βήματα για την τροποποίηση ενός html αρχείου είναι διαφορετικά επειδή αυτά τα είδη των προγραμμάτων περιλαμβάνουν μια επιλογή «προεπισκόπησης σε εφαρμογή browser». Παράδειγμα: Το Macromedia Dreamweaver παρέχει 3 τρόπους για να δουλεύετε με ένα html αρχείο. 1. Να βλέπεις μόνο κώδικα 2. Να δουλεύεις σε κατάσταση προεπισκόπησης 3. Να χρησιμοποιείς ένα συνδυασμό των παραπάνω, με τον κώδικα να είναι ορατός σε ένα τμήμα της οθόνης και την προεπισκόπηση να εμφανίζεται στο υπόλοιπο Ανάπτυξη Δικτυακών Τόπων 13

3. Περιγραφή και Εφαρμογή Βασικών Προδιαγραφών Μορφοποίησης σε HTML Έγγραφα Ανάπτυξη Δικτυακών Τόπων 15

Το tag της HTML είναι μια εντολή η οποία χρησιμοποιείται για να πει στον υπολογιστή πως θα εμφανίσει το περιεχόμενο μιας σελίδας. Πληκτρολογείς ένα tag πριν και μετά από το κείμενο που θέλεις να επηρεάσεις. Τα tags είναι άμεσα αναγνωρίσιμα επειδή περικλείονται σε σύμβολα γωνίας (< >). Ανάπτυξη Δικτυακών Τόπων 16

3.1 Τα είδη των Tags Στην HTML υπάρχουν tags αρχής και τέλους, αναφέρονται και ως «ανοίγματος» και «κλεισίματος». Παράδειγμα: Αν χρησιμοποιήσετε το σαν tag αρχής για να ορίσετε την έναρξη μιας νέας παραγράφου θα πρέπει να χρησιμοποιήσετε και ένα tag τέλους για να ορίσετε που τελειώνει αυτή η παράγραφος. Για το σκοπό αυτό χρησιμοποιείτε το ίδιο tag αλλά με πρόθεμα ένα χαρακτήρα /, δηλαδή . Ανάπτυξη Δικτυακών Τόπων 17

συνέχεια Βασικά Tags της HTML Ανάπτυξη Δικτυακών Τόπων 18

3.2 Ιδιότητες Πολλά tags έχουν περισσότερες από μια απόψεις, όπου μπορούν να προσαρμοστούν. Οι επιλογές αυτές αποκαλούνται ιδιότητες (attributes) και τοποθετούνται μετά από το tag, αλλά πριν από το >. Παράδειγμα: <img src= mypicture.jpg width= 100 height= 100 alt= A photo of me /> Σε αυτό το παράδειγμα η βάση είναι το tag img, το οποίο λέει στον browser ότι θέλω να εισάγω μια εικόνα σε αυτό το σημείο. Οι width, height και alt είναι ιδιότητες. Κάθε ιδιότητα έχει μια τιμή η οποία αναφέρεται μετά το = και περικλείεται σε εισαγωγικά. Ανάπτυξη Δικτυακών Τόπων 19

3.3 Απαιτούμενα Tags Όλες οι HTML σελίδες πρέπει να έχουν τα tags html, head και body μαζί με το αναγνωριστικό DOCTYPE. Αυτό σημαίνει ότι, κατ ελάχιστο, οι σελίδες σας θα πρέπει να περιλαμβάνουν τα ακόλουθα: Ανάπτυξη Δικτυακών Τόπων 20

συνέχεια Το αποτέλεσμα του παραπάνω κώδικα είναι το εξής: Ανάπτυξη Δικτυακών Τόπων 21

3.4 Οι Τρεις Εκδοχές Η επιτροπή W3C έχει καθορίσει ότι η τρέχουσα έκδοση της HTML θα είναι διαθέσιμη σε τρεις «εκδοχές - είδη» προσφέροντας ένα χρονικό περιθώριο για τη μετάβαση από την HTML 4.0 στην XHTML. Οι εκδοχές αυτές είναι: 1. XHTML Traditional: Εμπίπτει η πλειονότητα των υπαρχουσών σελίδων επειδή επιτρέπει τη χρήση Tags της HTML 4.01 εφόσον το υπόλοιπο της σελίδας συμμορφώνεται με τους κανόνες της XHTML. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/trasitional.dtd >. Ανάπτυξη Δικτυακών Τόπων 22

συνέχεια 2. XHTML Strict: Οι σελίδες δεν περιέχουν «υποτιμημένα» Tags. Αντιθέτως σε δομικό επίπεδο είναι πολύ «καθαρές» <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict //EN http://www.w3.org/tr/xhtml1/dtd//xhtml1-strict.dtd >. 3. XHTML Frameset: Οι δικτυακοί τόποι που χρησιμοποιούν πλαίσια (frames) της HTML για το διαχωρισμό των σελ δων πρέπει να ταυτοποιούνται με την εκδοχή της XHTML που υποστηρίζει framesets. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 frameset //EN http://www.w3.org/tr/xhtml1/dtd/frameset.dtd >. Ανάπτυξη Δικτυακών Τόπων 23

3.5 Επικύρωση των σελίδων έναντι αυτών των τύπων εγγραφών Ο σκοπός της επικύρωσης είναι να βοηθά στον εντοπισμό πιθανών προβλημάτων που μπορεί να συναντήσει μια εφαρμογή browser όταν εμφανίζει μια σελίδα. Η επίσημη υπηρεσία επικύρωσης του W3C βρίσκεται στη διεύθυνση: http://validator.w3.org. Η επικύρωση μιας σελίδας μπορεί να γίνει: 1. Επικύρωση με URL (Validate by URL) 2. Επικύρωση με αποστολή αρχείου (Validate by file upload) 3. Επικύρωση με άμεση είσοδο (Validate by direct input) Ανάπτυξη Δικτυακών Τόπων 24

3.6 Αναγραφή Κεφαλαίων-Πεζών Χαρακτήρων Οι αρχικές εκδόσεις της HTML δεν έκαναν διάκριση μεταξύ των πεζών και των κεφαλαίων χαρακτήρων. Αντίθετα οι τρέχουσες εκδόσεις της HTML (XHTML) κάνουν διάκριση μεταξύ των πεζών και των κεφαλαίων χαρακτήρων και απαιτούν την αναγραφή όλων των tags με πεζά. Ανάπτυξη Δικτυακών Τόπων 25

3.7 Εισαγωγικά Οι τρέχουσες εκδόσεις της HTML (XHTML) απαιτούν όλες οι τιμές να περικλείονται σε εισαγωγικά, όπως στο παράδειγμα που ακολουθεί. Ανάπτυξη Δικτυακών Τόπων 26

3.8 Ένθεση Ένθεση: αναφέρεται στη δυνατότητα τοποθέτησης ενός HTML tag μέσα σε ένα άλλο. this text is bold and italic Κατά την ένθεση όλα τα tags πρέπει να ανοίγουν και να κλείνουν από μέσα προς τα έξω ή αλλιώς θα πρέπει να μπορείτε να σχηματίζετε ημικύκλια τα οποία θα ενώνουν το αρχικό με το τελικό tag χωρίς να τέμνονται. these tags are nested properly. these tags are not nested properly. Ανάπτυξη Δικτυακών Τόπων 27

3.9 Κενά διαστήματα και Αλλαγές Γραμμών Ας εξετάσουμε ένα μικρό δείγμα HTML κώδικα για να εντοπίσουμε τα σημεία στα οποία πρέπει να εμφανίζονται διαστήματα. (Το tag a και η ιδιότητα href χρησιμοποιούνται για τη δημιουργία μιας σύνδεσης.) Ανάπτυξη Δικτυακών Τόπων 28

3.10 Κενά διαστήματα και Αλλαγές Γραμμών μεταξύ των tags Η πρώτη θέση που μπορεί να θέλετε να προσθέσετε αλλαγές γραμμών είναι ανάμεσα στα tags <html> <head> <title>my First Web Page</title> </head> Αν και δεν απαιτείται οι περισσότεροι χρησιμοποιούν το πλήκτρο enter για το διαχωρισμό των tags με αλλαγές γραμμών. Ανάπτυξη Δικτυακών Τόπων 29

3.11 Κενά διαστήματα Ανάμεσα σε Γραμμές Κειμένου Η δεύτερη θέση που μπορεί να θέλετε να προσθέσετε αλλαγές γραμμών είναι ανάμεσα στις γραμμές κειμένου που περιέχονται στον κορμό της σελίδας. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/trasitional.dtd >. <html> <head> <title>my First Web Page</title> </head> <body> Welcome. Thank you for visiting my first Web page. I have several other pages that you might be interested in. </body></html> Ανάπτυξη Δικτυακών Τόπων 30

συνέχεια Σε αυτό το παράδειγμα ότι ο browser αγνόησε τα 2 enter μεταξύ του welcome και του Thank Ανάπτυξη Δικτυακών Τόπων 31

συνέχεια Για να γίνουν εμφανείς αυτές οι αλλαγές γραμμών θα έπρεπε να χρησιμοποιηθούν τα ειδικά tags για να μπορέσει ο browser να εισάγει αλλαγή γραμμής στο συγκεκριμένο σημείο. : Εισάγει μια απλή αλλαγή γραμμής. Λέει στον browser να σταματήσει την τρέχουσα γραμμή και να μεταβεί στην επόμενη. : Σηματοδοτεί μια αλλαγή παραγράφου. Οι διαφορές τους είναι ότι το παρακάμπτει μια γραμμή (την αφήνει κενή) ενώ το όχι και ότι το είναι tag περιέκτης (container tag) Ανάπτυξη Δικτυακών Τόπων 32

συνέχεια Στο προηγούμενο παράδειγμα <body> welcome. thank you for visiting my first Web page. I have several other pages that you might be interested in. </body> Το αποτέλεσμα που θα πάρουμε είναι το παρακάτω Ανάπτυξη Δικτυακών Τόπων 33

3.7 Χρήση Οντοτήτων Χαρακτήρων για την Εμφάνιση Ειδικών Χαρακτήρων Χρησιμοποιούμε οντότητες χαρακτήρων ώστε να διασφαλίζεται σταθερή και ομοιόμορφη εμφάνιση των σελίδων σε διαφορετικά συστήματα υπολογιστών. Οι οντότητες χαρακτήρων μπορούν να εισάγονται είτε σε αριθμητική μορφή είτε σε επώνυμη μορφή. Όλες οι οντότητες χαρακτήρων ξεκινούν με ένα συμπλεκτικό σύμβολο (&) και τελειώνουν με ένα ελληνικό ερωτηματικό (;) Ανάπτυξη Δικτυακών Τόπων 35

4. Προσθήκη Σχολίων σ ένα HTML Αρχείο Ανάπτυξη Δικτυακών Τόπων 37

Δεν υπάρχει κανένας περιορισμός μεγέθους για τα σχόλια Ο κωδικός τέλους σχολίου (-->) δε χρειάζεται να είναι στην ίδια γραμμή με κωδικό αρχής σχολίου. Εάν ξεχάστε να κλείσετε το tag του σχολίου το υπόλοιπο περιεχόμενο της σελίδας δεν θα εμφανίζεται στον browser. Ανάπτυξη Δικτυακών Τόπων 38