Σε προηγούμενο άρθρο είχαμε μιλήσει για τις ετικέτες(HTML tags) ότι δεν απαιτείται internet για δημιουργία ιστοσελίδας στον υπολογιστή μας.
Αν θέλουμε να φτιάξουμε και να αποθηκεύσουμε έναν "ιστότοπο" με πολλές ιστοσελίδες html, με αρκετές φωτογραφίες στις σελίδες, ίσως και video, θα πρέπει η αποθήκευση όλων των προηγουμένων αρχείων στον υπολογιστή να γίνει με τρόπο ώστε όλα να είναι σε τάξη, να ξέρουμε ότι οι σελίδες html είναι στον τάδε φάκελο, οι φωτογραφίες σε άλλο φάκελο και ούτω καθ' εξής.
Αυτό, όπως θα δούμε, εκτός από τάξη θα μας βοηθήσει όταν δημιουργούμε συνδέσμους(link) μεταξύ των αρχείων μας(και όχι όπως μάθαμε με κάποια αρχεία στο internet).
Διότι αν φανταστούμε έναν τελειωμένο ιστότοπο δικό μας, κάθε σελίδα μας συνδέεται και με άλλες σελίδες δικές μας(ή με φωτογραφίες για παράδειγμα).
Αν για παράδειγμα σκεφτούμε μόνο την κύρια σελίδα μας, το Home page, αυτό πρέπει να έχει συνδέσμους με πολλές από τις άλλες σελίδες μας.
Πρώτη μας κίνηση είναι να δημιουργούμε νέο φάκελο(directory). Στα windows το λέμε φάκελο, στο DOS και Linux/Unix directory.
Εκεί μέσα θα κτίζουμε τον νέο ιστότοπο μας.
Δημιουργείστε έναν φάκελο(κατάλογος) ονομάζοντας τον
MySite
Μέσα στο φάκελο αυτό φτιάξτε 2 άλλους φακέλους(directory) ονομάζοντας τους
Pictures
HTML
Τώρα έχουμε σχηματικά
MySite
|
|
----Pictures
|
|----HTML
Το Pictures και HTML είναι υποκατάλογοι του MySite. Το Pictures και HTML είναι στο ίδιο επίπεδο. Το MySite είναι σε ένα ανώτερο επίπεδο σε σχέση με Pictures και HTML.
Γιατί τα λέω αυτά; Διότι θα τοποθετήσουμε μεν εντός φακέλων ιστοσελίδες και φωτογραφίες, αλλά θέλουμε να τις συνδέσουμε με συνδέσμους. Κι όταν φτιάχνω τοπικούς συνδέσμους στον υπολογιστή πρέπει να ξέρω ακριβώς που βρίσκεται κάθε μου αρχείο. Ή την απόλυτη διεύθυνση στο σκληρό δίσκο(εύκολο) ή την σχετική διεύθυνση.
Η σχετική διεύθυνση(πιο δύσκολο) είναι αυτή που θα μας χρειαστεί σίγουρα. Θα την αναφέρουμε στο επόμενο άρθρο του tutorial.
Αν έχω ένα αρχείο HTML με όνομα index.html στον φάκελο MySite, και τον φάκελο MySite τον έχω κατευθείαν κάτω από το C:\, τότε η απόλυτη διεύθυνση του index.html στον υπολογιστή είναι
C:\MySite\index.html
Αν έχω ένα αρχείο sample.html μέσα στον υποκατάλογο HTML, τότε η απόλυτη διεύθυνση του είναι
C:\MySite\HTML\sample.html
Το παρακάτω παράδειγμα δουλεύει μόνο στον Internet Explorer και δίνεται για να κατανοηθεί η έννοια "διεύθυνση" από τον αρχάριο χρήστη.
For Firefox You need to use proper URI syntax for local file references. It is not proper to enter an operating-system-specific path, such as
c:\subdir\file.ext without converting it to a URI, which in this case would be file:///c:/subdir/file.ext. In general, a file path is converted to a URI by adding the scheme identifier file:, then three forward slashes (representing an empty authority or host segment), then the path with all backslashes converted to forward slashes. Είπαμε ότι θέλουμε συνδέσμους. Αν θέλω να συνδέσω το index.html, που είναι το home page μας με το sample.html, σύμφωνα με τα λεγόμενα μας στο προηγούμενο άρθρο θα γράψω μέσα στον κώδικα HTML του index.html κάτι σαν
Go to <a href="C:\MySite\HTML\sample.html">sample page</a>
Οπότε στη σελίδα του index.html κάπου θα υπάρχει το "Go to sample page"
με το "sample page" να είναι σύνδεσμος(λινκ) που άν το κλικάρουμε οδηγούμαστε στην σελίδα sample.html.
Αντιγράψτε τώρα τον παρακάτω HTML κώδικα και αφού ανοίξετε το Σημειωματάριο επικολλήστε το εκεί. Σώστε μετά το αρχείο σαν index.html στο φάκελο MySite μέσα. Βάλτε με την ίδια διαδικασία ένα αντίγραφο του αρχείου index.html μέσα στο φάκελο HTML και αυτήν τη φορά σώστε το ως sample.html :
<html>
<head><title>Horizontal ruler--hr</title>
</head>
<body>
<h3>Horizontal ruler(hr), line break(br), strong ή em, italic(i)</h3>
<p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel magna sed nibh rutrum volutpat. Mauris facilisis, lorem a placerat luctus, dolor augue pretium neque, in luctus erat arcu sed arcu.<br /> Integer enim nulla, luctus venenatis dapibus sit amet, tristique nec arcu.</p>
<p>Donec sed sem tellus, varius bibendum lacus. Quisque vitae ligula auctor mauris congue tincidunt. Ut vitae libero ac <em>justo</em> ullamcorper pulvinar quis a lacus. Donec sapien <i>justo</i>, ultricies sed aliquam volutpat, hendrerit a justo.</p>
<p>Quisque elit massa, sollicitudin in scelerisque cursus, egestas ut risus. Duis mi nibh, mattis a imperdiet vel, mollis non massa. Mauris felis lacus, venenatis at porta a, imperdiet id est. Suspendisse accumsan sapien in velit elementum ac convallis risus lacinia.</p>
</body>
</html>
Ανοίξτε με το Σημειωματάριο το αρχείο index.html και γραψτε το
Go to <a href="C:\MySite\HTML\sample.html">sample page</a>
αμέσως μετά το <body>
Σώστε το. Ανοίξτε το sample,html με το Σημειωματάριο και γράψτε το
Go back to <a href="C:\MySite\index.html">Home Page</a>
αμέσως μετά το <body>
Σώστε το.
Κλείστε το Σημειωματάριο και κάντε διπλό αριστερό κλικ πάνω στο index.html. α το ανοίξει ο περιηγητής σας. Κλικ στο sample page για να δοκιμάσετε το λινκ. Κλικ μετά στο Home Page για να επιστρέψετε στο index.html
Συνεχίζεται εδώ
licensed under a Creative Commons Attribution-Noncommercial 3.0 Greece License
0 comments:
Δημοσίευση σχολίου