HTML tutorial: Σχετικές Διευθύνσεις

Κατηγορία: How To | Tricks & Tips, Web Developing Views:

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

Στο προηγούμενο άρθρο, τρίτο της σειράς HTML Tutorial, μάθαμε να φτιάχνουμε τοπικούς συνδέσμους(local links) μέσα στην ιστοσελίδα μας χρησιμοποιώντας όμως απόλυτες διευθύνσεις(χρήσιμοι μόνο για τους στόχους του tutorial) στον υπολογιστή μας του τύπου

C:\MySite\HTML\sample.html

(ενώ για τον Firefox πχ θα έπρεπε να γράφουμε

file:///c:/MySite/HTML/sample.html)

Αυτό σήμαινε ότι, μόνο αν ήμαστε στον δικό μας υπολογιστή και κάνουμε κλικ στο link

Go back to <a href="C:\MySite\index.html">Home Page</a>

(for Firefox
Go back to <a href="file:///C:/MySite/index.html">Home Page</a> )

που ήταν, όπως είπαμε, στην σελίδα

C:\MySite\HTML\sample.html

θα οδηγηθούμε στην home page μας(C:\MySite\index.html) με σιγουριά.

Γιατί συμβαίνει αυτό; Γιατί πχ δεν μπορώ να αντιγράψω τον φάκελο που αναφέραμε, τον MySite με τα περιεχόμενα που φτιάξαμε, να πάω μετά σε ένα φίλο που έχει windows ή linux , να αντιγράψω τον φάκελο πχ στο Desktop του και κάνοντας κλικ στο link

Go back to <a href="C:\MySite\index.html">Home Page</a>

αυτό να λειτουργήσει. Γιατί δεν λειτουργεί;

Διότι η διεύθυνση στο link προυποθέτει να βάλουμε το φάκελο MySite στο

C:\MySite

και άντε ο φίλος με τα Windows, επειδή είναι φίλος, να το επιτρέψει, ο άλλος φίλος με Linux δεν μπορεί να μας βοηθήσει. Δεν υπάρχει C:\ στο linux.

Ξεχάστε τους φίλους. Η ουσία είναι, όταν με το καλό ολοκληρώσετε ένα μικρό site στον υπολογιστή σας, αν το φτιάχνετε μόνοι, για να εμφανιστεί στο internet πρέπει να μπει σε κάποιον online server. Πχ ο ISP σας πιθανόν να σας παρέχει κάποιο μικρό χώρο για αυτή τη δουλειά.

Θα υποχρεώσετε τον ISP σας να χρησιμοποιεί windows servers, ή αν χρησιμοποιεί να βάλει το MySite στο C:\MySite; Αποκλείεται.

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

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

C:
|
|
MySite
|
|
----Pictures
|
|----HTML
|
|----index.html

Το Pictures και HTML είναι υποκατάλογοι του MySite(δυο φάκελοι εντός του φακέλου MySite) . Το Pictures και HTML είναι στο ίδιο επίπεδο. Το MySite είναι σε ένα ανώτερο επίπεδο σε σχέση με Pictures και HTML. Άρα και το index.html βρίσκεται στο ίδιο επίπεδο με τους φακέλους Pictures και HTML αφού τη σελίδα αυτή τη δημιουργήσαμε μέσα στο φάκελο MySite χωρίς να την εντάξουμε σε κάποιο άλλο φάκελο.

Αν τώρα θέλαμε να γράψουμε τον "απόλυτο σύνδεσμο"

Go to <a href="C:\MySite\HTML\sample.html">sample page</a>

for firefox etc
Go to <a href="file:///C:/MySite/HTML/sample.html">sample page</a>

που εμφανιζόταν μέσα στο index.html, σε μορφή "σχετικού συνδέσμου", γράφουμε:

Go to <a href="HTML/sample.html">sample page</a>

Ανοίξτε το index.html που είχατε δημιουργήσει στο προηγούμενο άρθρο και αντικαταστήστε την απόλυτη με τη σχετική διεύθυνση, πατήστε save και δείτε αν λειτουργεί.

Τι κάναμε. Εφόσον το index.html(αρχείο) βρίσκεται στο ίδιο επίπεδο με το HTML(φάκελος), μπορώ να αναφέρω το όνομα του φακέλου κατευθείαν

"HTML/sample.html"

Ναι το sample.html είναι ένα επίπεδο παρακάτω σε σχέση με το που βρίσκεται το index.html, αλλά ξεμπερδεύω με αυτό γράφοντας ένα / μετά το HTML. Επίσης τώρα πλέον χρησιμοποιώ / κι όχι \. Όπως στο ίντερνετ.

Αν τώρα ήμαστε στο sample.html που φτιάξαμε εντός του φακέλου HTML και θέλουμε να πάμε στη σελίδα index.html, που βρίσκεται ένα επίπεδο παραπάνω, θα γράψουμε

Go back to <a href="../index.html">Home Page </a>

Με το ../ λέμε στον browser να πάει ένα επίπεδο παραπάνω από το sample.html, να βγει δηλαδή από τον φάκελο HTML. Οπότε εκεί συναντάμε και "καλούμε" το index.html.

Αν πάλι ήμασταν στο sample.html αλλά θέλαμε ένα σύνδεσμο με μια φωτογραφία που βρίσκεται στο Pictures

Η φωτογραφία <a href="../Pictures/sample.gif">αυτή</a> είναι τέλεια.

Αν πάλι ήμασταν στο sample.html αλλά θέλαμε ένα σύνδεσμο με κάποιο θεωρητικό out.gif που βρίσκεται αμέσως έξω από το MySite πχ C:\out.gif

Η φωτογραφία <a href="../../out.gif">αυτή</a> είναι τέλεια.

Συνεχίζεται...

πηγή: sotostips.blogspot.com

` Ετικέτες: , ,

Comments are closed.