WEB PAGES - HTML

ΚΕΦ.9

Ευάγγελος Χρ. Ζιούλας (Καθηγητής Πληροφορικής)

 LINKS

Χρησιµοποιούµε Links (υπερσυνδέσµους) για να
µεταφερθούµε:

Από ένα σηµείο σε ένα άλλο µέσα σε µία σελίδα

Από µία σελίδα σε µία άλλη του ιδίου web site

Από µία σελίδα σε µία άλλη διαφορετικού web site

Η χρήση των links γίνεται µε κάνοντας click πάνω σε :

Μία λέξη, φράση ή πρόταση

Ένα κουµπί

Μια εικόνα - γραφικό
14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)
Πληροφορικής) 2
 LINKS Μέσα στη σελίδα

Για την κατασκευή ενός link σελίδας (page jump ) χρειάζεται :

Μια εντολή που στέλνει τον browser στο νέο σηµείο

Το σηµείο στο οποίο θα καταλήξει ο browser µετά την εντολή

Τα page jumps µπορούν να λειτουργήσουν και ως Bookmarks

Τα Bookmarks τοποθετούνται σε οποιοδήποτε σηµείο της σελίδας
θέλουµε να κάνουµε jump

Σε κάθε Bookmark δίνεται κάποιο όνοµα, ωστε ο browser να
γνωρίζει που πρέπει να ψάξει
14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)
Πληροφορικής) 3
 ΕΝΤΟΛΗ BOOKMARK

Η εντολή µε την οποία τοποθετείται ένα νέο page link είναι:

<A HREF="#linkname">Click on these words to go to the bookmark</A>

Το linkname είναι το σηµείο της σελίδας που θα γίνει η µετάβαση

Αυτό σηµαίνει ότι στο σηµείο αυτό της σελίδας (Bookmark) έχει πιο
πριν δοθεί το όνοµα linkname

Η τοποθέτηση του Bookmark σε κάποιο σηµείο της σελίδας γίνεται

µε την εντολή:

<A ΝΑΜΕ="linkname"></A>

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 4
 ΠΑΡΑ∆ΕΙΓΜΑ Bookmark

Για την τοποθέτηση του παρακάτω page link µέσα στη σελίδα, θα
πρέπει να γίνουν οι εξής 2 ενέργειες:

Τοποθέτηση εντολής link

<H4 ALIGN="CENTER">
<A HREF="#top">click here to go to the top of the page</A></H4>

Τοποθέτηση Bookmark στην κορυφή της σελίδας

<A NAME="top"></A>

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 5
 BOOKMARK LINKS

Κάθε φορά που ο δείκτης του ποντικιού είναι

πάνω από link, µετατρέπεται σε χέρι

Η διεύθυνση URL του link εµφανίζεται

ταυτόχρονα στην status bar

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 6
 LINK TAGS

Το <Α> σηµαίνει Anchor (άγκυρα) και
ονοµάζεται και Hyperlink

Το <A HREF=#...> σηµαίνει Hypertext

REFerence

To # υποδηλώνει ότι το link βρίσκεται

µέσα στη σελίδα, έτσι ώστε ο browser να
µην το αναζητήσει σε άλλες
14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)
Πληροφορικής) 7

∆εν υπάρχει το σύµβολο # στο ΝΑΜΕ attribute
<A NAME=“top”></A>

To NAME attribute δηλώνει το όνοµα του Anchor στο

οποίο θα γίνει το link

Συνιστάται να δίνονται στις Anchors ονόµατα που είναι

σχετικά µε την θέση του µέσα στη σελίδα

Το όνοµα στο HREF πρέπει να είναι ακριβώς ίδιο µε

αυτό στο ΝΑΜΕ attribute

<A NAME=“top”></A>
<Α HREF = “#top”>top of the page</A>
14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)
Πληροφορικής) 8
 ΕΜΦΩΛΕΥΜΕΝΑ LINKS

Οι Anchors δεν µπορούν να είναι
εµφωλευµένες (η µία µέσα στην άλλη)

ΛΑΘΟΣ

<A NAME= “top”><A NAME = “bottom”></A></A>

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 9

Οι παρακάτω δυο εντολές είναι παρόµοιες

<A NAME="park"></A>A WALK THROUGH THE PARK browser warning

<A NAME="park">A WALK THROUGH THE PARK </A>

To tag <A> είναι ένα container tag το οποίο σηµαίνει ότι θα πρέπει
να έχει το κείµενο που µορφοποιείται στο εσωτερικό του (2ο στυλ
εντολής) και όχι εκτός

Τα header tags δεν επιτρέπονται µέσα στο <Α> και για το λόγο αυτό
όταν γράφονται, ακολουθείται το 1ο στυλ εντολής

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 10
 ΠΟΛΛΑΠΛΑ BOOKMARKS

Όταν έχουµε πολλά Bookmarks στη σειρά, τότε τα

διαχωρίζουµε µε το σύµβολο | (vertical bar)

<H4 ALIGN="CENTER"><A HREF="#links">| Links in general |</A>

<A HREF="#page">| Links within a page - page jump |</A>
<A HREF="#another">| Linking to another page in your website |</A>
<A HREF="#world">| Linking to another page anywhere in the world |</A>
<A HREF="#button">| Using a link button |</A>
<A HREF="#mail">| MAILTO: (sending an e-mail) |</A></H4>

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 11
 Οι vertical bars αποτελούν µέρος του κάθε link

Οι vertical bars δεν αποτελούν µέρος του κάθε link

<H4 ALIGN="CENTER"> | <A HREF="#links">Links in general</A>

| | <A HREF="#page">Links within a page - page jump</A>
| | <A HREF="#another">Linking to another page in your website</A>
| | <A HREF="#world">Linking to another page anywhere in the world</A>
| | <A HREF="#button">Using a link button</A>
| | <A HREF="#mail">MAILTO: (sending an e-mail)</A> | </H4>

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 12

Αν θέλουµε ένα link να χωράει ολόκληρο σε µία γραµµή
και να µην πιάνει δύο γραµµές, τότε κάνουµε χρήση του
χαρακτήρα &nbsp;

Με το τρόπο αυτό «κοροϊδεύουµε» τον browser,

κάνοντάς τον να πιστεύει ότι πρόκειται για µία λέξη
<H4 ALIGN="CENTER">
|&nbsp;<A HREF="#links">Links&nbsp;in&nbsp;general</A> &nbsp;|
&nbsp; <A HREF="#page">Links&nbsp;within&nbsp;a&nbsp;page
&nbsp;–&nbsp;page&nbsp;jump</A> &nbsp;| ‚..</H4>

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 13
 ΕΡΩΤΗΣΕΙΣ

Με ποιες εντολές παράγουµε το παρακάτω κοµµάτι Bookmarks;

<P ALIGN="CENTER">
| <A HREF="#park">Walk through the park</A> | | <A HREF="#swim">
Going for a swim</A> | | <A HREF="#bike">A bicycle ride</A> | </P>

Με ποια εντολή ορίσουµε το Bookmark του Walk through the park

<A NAME="park"></A>

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 14
 ΕΡΩΤΗΣΕΙΣ

Να τροποποιηθούν οι εντολές ώστε τα links να µην σπάνε σε δύο
διαφορετικές γραµµές. Αν κάποιο link δεν χωράει σε µία γραµµή,
τότε ο browser το στέλνει στην επόµενη

<P ALIGN="CENTER">
|&nbsp;
<A HREF="#park">Walk&nbsp;through&nbsp;the&nbsp;park</A>
&nbsp;| |&nbsp;
<A HREF="#swim">Going&nbsp;for&nbsp;a&nbsp;swim</A>
&nbsp;| |&nbsp;
<A HREF="#bike">A&nbsp;bicycle&nbsp;ride</A>
&nbsp;|</P>
14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)
Πληροφορικής) 15
 LINKS σε άλλη σελίδα

Για να βάλουµε link που να οδηγεί σε µια άλλη σελίδα
του web site µας, γράφουµε:

<A HREF="#filename.htm">Click on these words</A>

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

Το αρχείο πρέπει να βρίσκεται στον ίδιο κατάλογο

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 16
 ΠΑΡΑ∆ΕΙΓΜΑ LINK

Για παράδειγµα αν η σελίδα στην οποία θέλουµε να
συνδεθούµε ονοµάζεται index.htm τότε γράφουµε:

<A HREF="index.htm">Go back to home page</A>

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 17
 LINKS σελίδα άλλου website

Ένα link µπορεί να οδηγεί σε µια σελίδα κάποιου

άλλου web site

<A HREF=“URL Address">Click on these words</A>

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 18
 ΠΑΡΑ∆ΕΙΓΜΑ LINK

Για παράδειγµα αν θέλουµε να συνδεθούµε µε την βασική
σελίδα του Google, γράφουµε:

<A HREF="http://www.google.com">Need a search engine?</A>

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 19
 ΚΑΤΗΓΟΡΙΕΣ LINKS

Bookmark στην ίδια σελίδα

<A HREF="#top">enclosed text</A>

Link σε άλλη σελίδα

<A HREF=“index.htm">enclosed text</A>

Link σε σελίδα άλλου web

<A HREF=“www.zioulas.gr">enclosed text</A>

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 20
 ΕΡΩΤΗΣΕΙΣ

Υποθέτουµε ότι έχουµε µια ιστοσελίδα µε εικόνες συγγενών µας
αλλά και των κατοικιδίων µας. Η σελίδα αυτή έχει το όνοµα
pictures.htm

Τι εντολή θα γράψουµε για να φορτώσουµε τη σελίδα µε τις εικόνες,
αλλά συγκεκριµένα να κάνουµε page jump στο τµήµα των ζώων;

Σύνδεση µε τµήµα pet σελίδας pictures.htm

<A HREF="pictures.htm#pet">Click here to see pictures of our pets</A>

∆ηµιουργία άγκυρας µε όνοµα pet

<A ΝΑΜΕ="pet">Here are pictures of our pets</A>

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 21
 LINK BUTTONS

Τα button links δίνουν µια πιο επαγγελµατική εικόνα στη

σελίδα µας

<CENTER>
<FORM METHOD="GET" ACTION="index.htm">
<INPUT TYPE="submit" VALUE="Return to Home Page">
</FORM></CENTER>

Τα δύο νέα tags που προστίθενται εδώ είναι τα FORM

και INPUT
14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)
Πληροφορικής) 22
 FORM tag

Είναι ένα container tag που δηµιουργεί µια φόρµα στη
σελίδα και κλείνει µε </FORM>

Το FORM tag έχει δύο attributes:

METHOD λέει στον browser πώς να χειριστεί την εντολή FORM

π.χ. Η τιµή “GET” λέει στον browser να δεχτεί κάτι, το οποίο
είναι το όνοµα της σελίδας που δείχνει η ACTION

ACTION υποδηλώνει την σύνδεση που θέλουµε να γίνει

π.χ. περιέχει είτε το όνοµα µιας σελίδας (index.htm), είτε µια
URL address (http://www.in.gr) στην οποία κάνουµε link
14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)
Πληροφορικής) 23
 INPUT tag

Είναι ένα tag που δηµιουργεί το button

Το FORM tag έχει δύο attributes:

TYPE λέει στον browser τι είδους είσοδος θα γίνει

π.χ. Η τιµή “SUBMIT” λέει στον browser ότι πρόκειται να
δεχτεί κάτι

VALUE ∆ηλώνει το κείµενο που θα εµφανιστεί στο button

π.χ. Το κείµενο µπορεί να είναι: Return to my home page

Τα attributes ACTION και VALUE θέλουν υποχρεωτικά εισαγωγικά

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 24
 ΠΟΛΛΑΠΛΑ BUTTONS

Για να εµφανίσουµε τα παρακάτω button links το ένα
κάτω από το άλλο, γράφουµε:

<CENTER>
<FORM METHOD="GET" ACTION="index.htm">
<INPUT TYPE="submit" VALUE="Return to Home Page">
</FORM>
<FORM METHOD="GET" ACTION="Lesson7.htm">
<INPUT TYPE="submit" VALUE="Send me to Lesson Seven">
</FORM></CENTER>
14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)
Πληροφορικής) 25
 ΠΟΛΛΑΠΛΑ BUTTONS

Για να εµφανίσουµε τα button links το ένα δίπλα στο
άλλο, τα τοποθετούµε µέσα σε πίνακα:

<TABLE BORDER="0">
<TR>
<TD><FORM METHOD="GET" ACTION="index.htm">
<INPUT TYPE="submit" VALUE="Return to Home Page">
</FORM>
<TD><FORM METHOD="GET" ACTION="Lesson7.htm">
<INPUT TYPE="submit" VALUE="Send me to Lesson Seven">
</FORM>
</TABLE>
14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)
Πληροφορικής) 26
 E-MAIL LINKS

Είναι links που επιτρέπουν να στείλουµε ένα e-mail σε
µια e-mail address που είναι συνδεδεµένη µε το link

Η εντολή που γράφουµε είναι η MAILTO:

Η εντολή αυτή ανοίγει το mailbox του παραλήπτη ώστε

να λάβει το µήνυµα που στέλνουµε π.χ.

Please tell me what you think of these lessons by sending me, <A
HREF="mailto:vczioulas@yahoo.com">Evagelos Zioulas</A>, an e-mail.

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 27

Τοποθέτηση subject (θέµα) στο e-mail link :

<A HREF="mailto:person@site.com?subject=topic">

π.χ.

<A HREF="mailto:vczioulas@excite.com?subject=lesson
information">Please send more lesson information</A>

Τοποθέτηση cc (carbon copy) στο e-mail link :

<A HREF="mailto:person@site.com?cc=person2@site.com">

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 28

Τοποθέτηση bcc (blind carbon copy) στο e-mail link :

<A HREF="mailto:person@site.com?bcc=person2@site.com">

Τοποθέτηση body (περιεχόµενα) στο e-mail link :

<A HREF="mailto:person@site.com?body=Don't forget

also to send test answers as soon as possible.">Click here
when ready to send us your email.</A>

To body δεν µπορεί να υπερβαίνει τους 250 χαρακτήρες

14/1/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 29