6. Σύνδεσμοι (links).md

Σύνδεσμοι

Πληκτρολογώντας ένα URL (ή αλλιώς Διεύθυνση) στον browser μπορούμε να έχουμε πρόσβαση στο αρχείο που αυτό "δείχνει" στο Internet. Στο παράδειγμα της παραπάνω εικόνας, πατώντας το enter, θα έχουμε πρόσβαση στο αρχείο index.html το οποίο βρίσκεται στην διαδρομή mathimata/html/ του server ο οποίος φιλοξενεί τα αρχεία του Domain Name openlab.gr

Στον κώδικα HTML, χρησιμοποιούμε URLs για να "δείξουμε", μέσα από ένα html έγγραφο, ένα άλλο html έγγραφο ή άλλη μορφή αρχείου, όπως εικόνες, ήχους, αρχεία pdf κτλ. που βρίσκονται μέσα στο Internet. Σε έναν σύνδεσμο , για παράδειγμα, τοποθετούμε στην ιδιότητα href το URL που θέλουμε να δείχνει ο σύνδεσμος:

<a href="https://www.openlab.gr">Openlab.gr home page</a>

Σε μια εικόνα <img>, τοποθετούμε στην ιδιότητα src το URL το οποίο δείχνει την τοποθεσία που βρίσκεται η εικόνα:

<img src="https://www.openlab.gr/images/logo.jpg" />

Τα μέρη ενός URL

Μια πλήρη Διεύθυνση έχει την παρακάτω σύνταξη:

πρωτόκολλο://host.domain:port/διαδρομή/όνομα αρχείου

Πρωτόκολλο: Ορίζει το πρωτόκολλο μεταφοράς του αρχείου. Το πιο συνηθισμένο είναι το http (Hyper Text Transfer Protocol ).

Host: Το καθορισμένο host για το πρωτόκολλο http είναι το www.

Domain: Ορίζει το όνομα του Domain Name, πχ. openlab.gr, in.gr, disabled.gr

Port: Ορίζει τον αριθμό της πόρτας του server από τον οποίον διαβάζουμε το αρχείο. Συνήθως παραλείπεται από το URL. Η προκαθορισμένη πόρτα για το πρωτόκολλο http είναι η 80.

Διαδρομή: Ορίζει την διαδρομή που βρίσκεται το αρχείο στον server. Όταν παραλείπουμε την διαδρομή, τότε το αρχείο πρέπει να είναι στο root directory του website (πχ. http://www.openlab.gr/index.html, το αρχείο index.html βρίσκεται στο root directory του server).

Όνομα αρχείου: Ορίζει το όνομα αρχείου. Σε περίπτωση που αυτό λείπει (πχ. http://www.openlab.gr), τότε ο browser ψάχνει για τα αρχεία index.asp ή index.php ή index.html (ανάλογα με τις ρυθμίσεις του server).

Στην διευθύνση http://www.openlab.gr:80/mathimata/html/urls.html, το http είναι το πρωτόκολλο μεταφοράς του αρχείου urls.html στον client, το www είναι το host, το openlab.gr είναι το Domain Name, το :80 είναι η πόρτα του server από όπου θα συνδεθεί ο client ώστε να διαβάσει το αρχείο urls.html, το mathimata/html/ είναι η διαδρομή του αρχείου στον server και το urls.html είναι το αρχείο που θα διαβάσει ο browser του client.

Πρωτόκολλα μεταφοράς αρχείων

Πρωτόκολλα	Περιγραφή
http	Όταν πρόκειται για αρχείο από έναν web server
https	Όταν πρόκειται για αρχείο από έναν web server με κρυπτογραφημένη διασύνδεση (secure)
ftp	Όταν πρόκειται για αρχείο από έναν ftp server
file	Όταν πρόκειται για αρχείο στον τοπικό δίσκο του υπολογιστή μας

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

Πρωτόκολλο http

<a href="http://www.openlab.gr">link</a>

Πρωτόκολλο ftp

<a href="ftp://ftp.openlab.gr/downloads/install.exe">link</a>

Πρωτόκολλο telnet

<a href="telnet://username:password @openlab.gr:767">link</a>

Σύνδεσμοι: Η ετικέτα <A> και η ιδιότητα HREF

Δημιουργούμε συνδέσμους με την ετικέτα <a> (a από την λέξη Anchor). Η βασικότερη ιδιότητα της ετικέτας είναι η href, η οποία περιέχει το url ενός αρχείου. Το κείμενο που γράφεται ανάμεσα στην ετικέτα αρχής και τέλους είναι το κείμενο που φαίνεται στην οθόνη όταν κάνει κλικ ο χρήστης επάνω σε αυτό για να μεταφερθεί στην σελίδα που δείχνει η ιδιότητα href. Η εμφάνιση ενός συνδέσμου στην οθόνη ποικίλει ανάλογα με τον web browser που χρησιμοποιούμε. Οι περισσότεροι web browsers, όπως οι Internet Explorer και Mozilla Firefox, εξ' ορισμού τους εμφανίζουν με Μπλε και υπογραμμισμένα γράμματα, ενώ τους συνδέσμους που έχουμε επισκεφτεί στο παρελθόν τους εμφανίζουν με μωβ γράμματα. Βέβαια τα χρώματα αυτά μπορούμε να τα αλλάξουμε όπως θα δούμε στα επόμενα κεφάλαια με την χρήση CSS.

<a href="https://openlab.gr">openlab page</a>

Ιδιότητα target

Τιμή	Περιγραφή
_self	Ανοίγει την σελίδα στο ίδιο πλαίσιο
_blank	Ανοίγει την σελίδα σε νέο παράθυρο. Αφού πατήσετε τον σύνδεσμο, ανοίγει ένα νέο παράθυρο του browser στο οποίο θα εμφανιστεί η σελίδα.
_top	Ανοίγει την σελίδα στο ίδιο παράθυρο αγνοώντας τα πλαίσια που τυχόν υπάρχουν
_parent	Ανοίγει την σελίδα στο "πατρικό" πλαίσιο

Παράδειγμα:

<a href="https://openlab.gr" target="_blank">openlab.gr link</a>

Δημιουργία συνδέσμου προς άλλα δικά μας HTML έγγραφα του Site μας

Όταν αναπτύσσουμε τον ιστοχώρο μας, ενδεχομένως να αποτελείται με περισσότερες από μια html ιστοσελίδες. Κάθε html σελίδα είναι και ένα διαφορετικό αρχείο με διαφορετικό περιεχόμενο. Έστω οτι στον ιστοχώρο μας θέλουμε να δημιουργήσουμε την προσωπική ιστοσελίδα μας με τα περιεχόμενα: Αρχική, Προφίλ, Επικοινωνία. Θα δημιουργήσουμε τρία διαφορετικά αρχεία html με όνομα index.html, profile.html, contact.html αντίστοιχα. Αυτά τα αρχεία είναι μεμονωμένες ιστοσελίδες και χρειαζόμαστε έναν τρόπο να τα συνδέσουμε μεταξύ τους ώστε να μεταφερόμαστε από την μια ιστοσελίδα στην άλλη χρησιμοποιώντας υπερσυνδέσμους (links).

<a href="index.html">Αρχική</a>
<a href="profile.html">Προφίλ</a>
<a href="contact.html">Επικοινωνία</a>