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

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

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

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

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

Η HTML μας επιτρέπει να διασυνδέουμε το περιεχόμενό μας με άλλες ιστοσελίδες, καθώς επίσης και με γραφικά, πολυμέσα, διευθύνσεις ηλεκτρονικού ταχυδρομείου (e-mail), ομάδες συζήτησης (newsgroups) και αρχεία με δυνατότητα μεταφοράς. Ο,τιδήποτε μπορείτε να προσπελάσετε με μια εφαρμογή browser, μπορείτε επίσης να το χρησιμοποιήσετε σαν προορισμό μιας σύνδεσης που ενσωματώνεται σε ένα HTML αρχείο. Ανάπτυξη Δικτυακών Τόπων 3

1. Προσθήκη Συνδέσεων Προς Άλλες Ιστοσελίδες Ανάπτυξη Δικτυακών Τόπων 4

Στο περιεχόμενο της σελίδας σας μπορείτε να προσθέσετε συνδέσεις προς άλλες ιστοσελίδες είτε αυτές ανήκουν στο δικό σας δικτυακό τόπο είτε σε άλλο. Για το σκοπό αυτό χρησιμοποιείται το tag a Παράδειγμα: <a href= http://www.google.com > Use this link to search Google.</a> Το tag a συνοδεύεται από τις ιδιότητές του. Μια από αυτές είναι και το href (hypertext reference): λέει στον browser που θα βρει τις πληροφορίες στις οποίες θέλετε να οδηγεί η σύνδεσή σας. Το κείμενο μεταξύ αρχικού και τελικού tag είναι αυτό που φαίνεται στην ιστοσελίδα και εμφανίζεται με διαφορετικό χρώμα και με υπογράμμιση. Ανάπτυξη Δικτυακών Τόπων 5

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

1.1 Απόλυτες Συνδέσεις Είναι αυτές που περιλαμβάνουν ολόκληρο το όνομα διαδρομής φακέλων (μια πλήρη διεύθυνση) για τον προορισμό τους. Κυρίως χρησιμοποιούνται για συνδέσμους σε ιστοσελίδες άλλων δικτυακών τόπων. Παράδειγμα: Αν θέλετε να ενσωματώσετε σε μια ιστοσελίδα σας μια σύνδεση προς το Yahoo τότε ο κώδικας θα είναι ο παρακάτω: <a href= http://www.yahoo.com >Visit Yahoo</a> Ανάπτυξη Δικτυακών Τόπων 7

1.1 Σχετικές Συνδέσεις Αποκαλούνται έτσι επειδή δεν περιλαμβάνουν ολόκληρο το όνομα διαδρομής ή τη διεύθυνση του προορισμού τους. Το όνομα της διαδρομής ή η διεύθυνση δίνεται σε σχέση με την τρέχουσα σελίδα. Χρησιμοποιούνται κυρίως όταν θέλετε σε μια σελίδα σας μια σύνδεση που να οδηγεί σε μια διαφορετική σελίδα του δικτυακού σας τόπου. Παράδειγμα: <a href= contactme.html >Contact Me</a> Αυτή η σύνδεση αναζητά το αρχείο με το όνομα contactme.html στον ίδιο φάκελο που περιέχει και την τρέχουσα σελίδα. Ανάπτυξη Δικτυακών Τόπων 8

συνέχεια Εάν δημιουργούσατε μια σύνδεση προς ένα αρχείο αποθηκευμένο σε ένα διαφορετικό φάκελο, κάτω από τον τρέχοντα (υποφάκελο), η τιμή της ιδιότητας href θα ήταν: <a href= wendy/contactme.html >Contact Me</a> Εάν θέλετε να δημιουργήσετε μια σύνδεση προς ένα αρχείο αποθηκευμένο σε ένα φάκελο που βρίσκεται πιο πάνω από τον φάκελο της τρέχουσας σελίδας μπορείτε να προσθέσετε το../ για κάθε επίπεδο φακέλων που θα ανεβείτε. Άρα αν το αρχείο προορισμού είναι 2 επίπεδα πάνω από την τρέχουσα θέση τότε θα γράφατε: <a href=../../contactme.html >Contact Me</a> Ανάπτυξη Δικτυακών Τόπων 9

συνέχεια Εσείς δουλεύετε στο αρχείο july4.html και θέλετε να δημιουργήσετε μια σύνδεση προς την αρχική σελίδα index.html <a href=../../index.html >Return Home</a> Ανάπτυξη Δικτυακών Τόπων 10

συνέχεια Εσείς δουλεύετε στο αρχείο birthday.html και θέλετε να δημιουργήσετε μια σύνδεση προς τη σελίδα july4.html <a href= holidays/july4.html >Check out these photos from July 4.</a> Ανάπτυξη Δικτυακών Τόπων 11

2. Προσθήκη Συνδέσεων Προς Άλλες Ενότητες της Ίδιας Ιστοσελίδας Ανάπτυξη Δικτυακών Τόπων 12

Ορισμένες φορές μπορεί να θέλετε να δημιουργήσετε συνδέσεις που θα οδηγούν σε μια ενότητα κειμένου μιας άλλης σελίδας του δικτυακού σας τόπου. Για να δημιουργήσετε μια σύνδεση προς μια συγκεκριμένη ενότητα μιας ιστοσελίδας, θα πρέπει πρώτα να δώσετε στην ενότητα ένα όνομα. Ανάπτυξη Δικτυακών Τόπων 13

συνέχεια Παράδειγμα Ανάπτυξη Δικτυακών Τόπων 14

2.1 Δημιουργία ενός δεσμού Ένας δεσμός anchor είναι ένα σημείο μέσα στη σελίδα, στο οποίο δίνετε ένα όνομα έτσι ώστε να έχετε τη δυνατότητα να το καθορίζετε σαν προορισμό συνδέσεων μελλοντικά. Άνοιγμα του tag a <a name= section1 >Section 1</a> Η τιμή της ιδιότητας name είναι το όνομα που δώσατε στην ενότητα. Χρησιμοποιήστε ευκολομνημόνευτα ονόματα για τις ενότητες, χωρίς κενά διαστήματα ή σημεία στίξης Κλείσιμο του tag a Αυτή η ιδιότητα του tag a σας επιτρέπει να δώσετε ένα όνομα σε μια ενότητα μιας ιστοσελίδας Αυτό είναι το πραγματικό όνομα της ενότητας, το οποίο θα εμφανιστεί στην οθόνη Εάν προτιμάτε να μην συμπεριλάβετε μια ετικέτα για το δεσμό σας μπορείτε να αφήσετε αυτό το χώρο κενό <a name= top ></a> Ανάπτυξη Δικτυακών Τόπων 15

2.2 Δημιουργία Συνδέσεων προς Επώνυμους Δεσμούς Για να δημιουργήσετε μια σύνδεση προς ένα δεσμό χρειάζεστε το tag a την ιδιότητα href και το σύμβολο #. Άνοιγμα του tag a Το σύμβολο # λέει στην εφαρμογή browser ότι η σύνδεσή σας οδηγεί σε μια συγκεκριμένη ενότητα μιας σελίδας <a href= #top >Return to the top of the page</a> Αυτό είναι το όνομα του δεσμού που ορίζουμε σαν προορισμό της σύνδεσης Η ιδιότητα href λέει στην εφαρμογή browser ότι δημιουργούμε μια σύνδεση προς κάποια άλλη θέση Αυτό το κείμενο θα εμφανίζεται με υπογράμμιση Ανάπτυξη Δικτυακών Τόπων 16

συνέχεια Εάν θέλετε να δημιουργήσετε μια σύνδεση προς μια συγκεκριμένη ενότητα μιας διαφορετικής σελίδας, θα πρέπει να χρησιμοποιήσετε το όνομα αρχείου αυτής της σελίδας και το όνομα του δεσμού διαχωρισμένο με ένα σύμβολο # όπως στο παράδειγμα που ακολουθεί. <a href= genealogy.html#intro >View names beginning with an A on our genealogy page</a> Σε αυτή την περίπτωση η εφαρμογή browser θα ψάξει πρώτα για το αρχείο genealogy.html και μετά θα εντοπίσει το δεσμό με όνομα intro σε αυτή τη σελίδα. Ανάπτυξη Δικτυακών Τόπων 19

3. Προσθήκη Συνδέσεων Προς Διευθύνσεις E-mail και Αρχεία Ανάπτυξη Δικτυακών Τόπων 20

3.1 Διευθύνσεις E-mail Αν θέλετε να δώσετε στους επισκέπτες σας γρήγορη πρόσβαση στη διεύθυνση e-mail σας, μπορείτε να τη συμπεριλάβετε στην ιστοσελίδα σας σαν μια σύνδεση Ανοίγει το tag a mailto. Το προσδιοριστικό πρωτοκόλλου mailto υποδηλώνει μια διεύθυνση ηλεκτρονικού ταχυδρομείου. Προσθέστε το κείμενο στο οποίο θέλετε να κάνουν κλικ οι επισκέπτες της σελίδας σας για να σας στείλουν ένα μήνυμα e-mail <a href= mailto:name@emailaddress.com >Email Me!</a> Χρησιμοποιήστε την ιδιότητα href. Εισάγετε την e-mail διεύθυνσή σας μετά από την άνω κάτω τελεία. Κλείνει το tag a Κάνοντας κλικ πάνω σε αυτή τη σύνδεση γίνεται εκκίνηση του προγράμματος ηλεκτρονικού ταχυδρομείου στον υπολογιστή του επισκέπτη. Ανάπτυξη Δικτυακών Τόπων 21

3.2 Προσαρμογή του Μηνύματος E-mail Ορισμένοι browsers επιτρέπουν να προσθέσετε περιεχόμενο για τα πεδία Θέματος(subject:) και Κοινοποίησης (cc:) του μηνύματος e-mail εισάγοντας επιπλέον κείμενο στην τιμή της ιδιότητας href. Λέει στον browser να ανοίξει ένα νέο μήνυμα e-mail και να τοποθετήσει αυτή τη διεύθυνση στο πεδίο Το:. <a href= mailto:name@emailaddress.com?subject=htmlbook &cc=htmlbook@emailaddress.com >Email Me!</a> Χρησιμοποιείται για τον διαχωρισμό των πεδίων όταν καθορίζετε περισσότερα από ένα Αυτός ο χαρακτήρας διαχωρίζει τη διεύθυνση από τα υπόλοιπα πεδία που καθορίζετε. Λέει στον browser να χρησιμοποιήσει το HTML Book σαν θέμα του e-mail Λέει στον browser να προσθέσει τη διεύθυνση htmlbook@emailaddress.com στο πεδίο κοινοποίησης cc: του μηνύματος Να θυμάστε ότι η τιμή της ιδιότητας href δεν μπορεί να περιέχει κενά διαστήματα. Ανάπτυξη Δικτυακών Τόπων 22

3.3 Προστασία των Συνδέσεων E-mail από το Spam Χρήση του λεκτικού προσδιορισμού[at] αντί του συμβόλου @. Χρήση μια εικόνας ως υποκατάστατο του Συμβόλου @ Χρήση κώδικά για την αντικατάσταση του συμβόλου @(δεκαδικό ισοδύναμο για το @),.(δεκαδικό ισοδύναμο για την τελεία) Χρήση κώδικα JavaScript για την απόκρυψη της διεύθυνσης e-mail. (ο πλέον αποτελεσματικός) Ανάπτυξη Δικτυακών Τόπων 23

3.4 FTP και Αρχεία Διαθέσιμα για Μεταφορά Όταν μεταφέρετε (download) αρχεία από το Internet τα οποία δεν μπορούν να εμφανιστούν στον browser που χρησιμοποιείτε συνήθως το κάνετε προσπελάζοντας τον τομέα μεταφοράς αρχείων (FTP). Το FTP (File Transfer Protocol) είναι ένας τρόπος με τον οποίο μπορείτε να στέλνετε και να λαμβάνετε αρχεία μέσω του Internet. Για να δημιουργήσετε μια σύνδεση προς ένα αρχείο μέσω του πρωτοκόλλου FTP: <a href= ftp://sunsite.unc.edu/pub/ >Visit the SunSite FTP</a> Δεν μπορείτε να προσπελάσετε έναν ιδιωτικό δικτυακό χώρο μέσω FTP χωρίς όνομα χρήστη και κωδικό πρόσβασης. Ανάπτυξη Δικτυακών Τόπων 24

4. Μορφοποίηση Συνδέσεων Ανάπτυξη Δικτυακών Τόπων 25

Για να αλλάξετε τα χρώματα των συνδέσεων με φύλλα στυλ χρησιμοποιείτε το tag a όπως παρακατω: Θα μπορούσατε επίσης να χρησιμοποιήσετε κλάσεις (classes) για να αλλάξετε μόνο τα χρώματα συγκεκριμένων συνδέσμων. Ανάπτυξη Δικτυακών Τόπων 26

4.1 Προεπιλεγμένα Χρώματα Συνδέσεων Στις περισσότερες περιπτώσεις το προεπιλεγμένο χρώμα που προβλέπουν οι browsers για τις συνδέσεις είναι το μπλε. Για τις συνδέσεις που έχει επισκεφτεί ο χρήστης το μοβ και το χρώμα για την ενεργή σύνδεση είναι το κόκκινο. Καλό είναι να χρησιμοποιείτε τα ίδια χρώματα για τις συνδέσεις σε όλες τις σελίδες του δικτυακού σας τόπου. Για τις συνδέσεις όπου έχει επισκεφτεί ο χρήστης το χρώμα να είναι λιγότερο έντονο από αυτό που θα έχουν οι συνδέσεις που δεν έχουν επιλεχθεί. Οι χρωματικοί σας συνδυασμοί θα πρέπει να δοκιμάζονται σε περισσότερα από ένα συστήματα υπολογιστών. Ανάπτυξη Δικτυακών Τόπων 27

4.2 Πέρα από τα Χρώματα Με τα φύλλα css μπορείτε να μορφοποιείτε τις συνδέσεις σας με τρόπους ώστε να ξεχωρίζουν πραγματικά από το υπόλοιπο κείμενο. Να αποφεύγετε τη χρήση διαφορετικών μεγεθών γραμματοσειράς σε κάθε κατάσταση των συνδέσεων. Να αποφεύγετε να κάνετε αλλαγές οι οποίες προκαλούν μετακινήσεις ή ανακατατάξεις του κειμένου της σελίδας όταν ενεργοποιείται μια σύνδεση. Να επιλέγετε για τις συνδέσεις χρώματα συμπληρωματικά ως προς το υπόλοιπο της σελίδας. Ανάπτυξη Δικτυακών Τόπων 28

συνέχεια Δείγματα κώδικα για τη μορφοποίηση συνδέσεων Ανάπτυξη Δικτυακών Τόπων 29

5. Προσαρμογή Συνδέσεων: Καθορισμός Σειράς Πλήκτρου Tab, Πλήκτρων Συντόμευσης και Παραθύρων Προορισμού Ανάπτυξη Δικτυακών Τόπων 30

5.1 Τίτλος (Title) Όταν προσθέτετε σε μια σύνδεση την ιδιότητα title τότε το κείμενο αυτής της ιδιότητας εμφανίζεται σαν ένα πλαίσιο υπόδειξης ή συμβουλής (tool tip) όταν ο δείκτης τοποθετείται πάνω στη σύνδεση. Παράδειγμα: Ανάπτυξη Δικτυακών Τόπων 31

5.2 Σειρά Πλήκτρου Tab (Tab Order) Μπορείτε να προσαρμόσετε τη σειρά του πλήκτρου tab για τις συνδέσεις και τα πεδία φορμών των δικών σας σελίδων, χρησιμοποιώντας την ιδιότητα tabindex. Όταν ο χρήστης χρησιμοποιεί το πλήκτρο tab για τις μετακινήσεις του στην ιστοσελίδα σας κάθε σύνδεση ή άλλο στοιχείο της σελίδας στο οποίο μπορεί να κάνει κλικ επιλέγεται με τη σειρά. Ανάπτυξη Δικτυακών Τόπων 32

5.3 Πλήκτρα Συντόμευσης Μπορείτε να αναθέτετε πλήκτρα συντόμευσης στις συνδέσεις μιας ιστοσελίδας. Για το σκοπό αυτό θα πρέπει να προσθέτετε την ιδιότητα accesskey στο tag a. Παράδειγμα: Ανάπτυξη Δικτυακών Τόπων 33

5.4 Παράθυρα Προορισμού Οι δημιουργοί ιστοσελίδων χρησιμοποιούν την ιδιότητα target για να καθορίζουν τον προορισμό των συνδέσεων. Παράδειγμα: Αν θέλετε να προσφέρετε στη σελίδα σας μια σύνδεση για τη διεξαγωγή αναζητήσεων στο Yahoo, αλλά δεν θέλετε να φύγουν από εσάς τότε: Ανάπτυξη Δικτυακών Τόπων 34

συνέχεια Πιθανές τιμές για την ιδιότητα target Ανάπτυξη Δικτυακών Τόπων 35