Μάθημα : Α' Λυκείου | Εφαρμογές Πληροφορικής -

Από το επόμενο μάθημα οι ιστοσελίδες μας θα αρχίσουν να σχετίζονται με άλλα αρχεία, είτε για να συνδεθούν με άλλες ιστοσελίδες με links, είτε για να τα χρησιμοποιήσουν σαν περιεχόμενο (πχ. μια εικόνα ή ένα video). Για το λόγο αυτό πρέπει να γνωρίζουμε κάποιες λεπτομέρειες για την οργάνωσή αρχείων και φακέλων.

Filename extension (κατάληξη ονόματος αρχείου)

Κάθε αποθηκευμένο αρχείο και φάκελος έχει ένα όνομα. Ειδικά τα αρχεία έχουν στο τέλος του ονόματός τους μια ειδική κατάληξη που γνωστοποιεί στον υπολογιστή αλλά και σε εμάς τον τύπο του αρχείου. Η κατάληξη - επέκταση αποτελεί μέρος του ονόματος κάθε αρχείου και πρέπει να μην την αγνοούμε όταν αναφερόμαστε σε αυτό. Κάποιες από αυτές τις καταλήξεις μπορεί να σας είναι γνωστές. (.mp3, .mp4, .pdf, .docx, .jpeg).

Οι ιστοσελίδες που έχουμε δημιουργήσει ως τώρα, έχουν όλες την κατάληξη .html. Έτσι αν κάνουμε διπλό κλικ σε μια από αυτές, ο υπολογιστής γνωρίζει ότι πρέπει να ανοίξει το αρχείο αυτό με κάποιον browser και όχι με κάποια άλλη εφαρμογή. 

Γνωστές επεκτάσεις που θα συναντήσουμε:

Ιστοσελίδες: .htm .html .asp .php .jsp

Εικόνες: .jpg .jpeg .gif .webp .jfif, png

Πλήρης και σχετική διαδρομή (Absolute vs Relative Path)

Κάθε αρχείο και κάθε φάκελος που είναι αποθηκευμένος σε έναν υπολογιστή, έχει μια μοναδική διαδρομή που πρέπει να ακολουθήσουμε για να το εντοπίσουμε. Σε περιβάλλον Windows, η διαδρομή ξεκινά με το αποθηκευτικό μέσο (πχ. C: για το σκληρό δίσκο ή E: για κάποιο USB stick) και συνεχίζει με τα ονόματα των φακέλων που πρέπει να ανοιξουμε μέχρι να καταλήξουμε στον φάκελο ή το αρχείο που θέλουμε.

Παραδείγματα Πλήρους Διαδρομής (Full ή Relative Path) :

C:\2025-26\A Λυκείου\Α3\Mitsos\html το path για τον φάκελο html

C:\2025-26\A Λυκείου\Α3\Mitsos\html\myPage.html το path για την ιστοσελίδα myPage

Εσείς μέσα στο φάκελο html δημιουργείστε έναν υποφάκελο που θα τον ονομάσετε myWebsite ή όπως αλλιώς θέλετε. Μέσα σε αυτόν θα αποθηκεύσουμε όλα τα αρχεία που θα χρειαστούμε για να φτιάξουμε το πρώτο μας website, ιστοσελίδες, εικόνες και οτιδήποτε άλλο. 

Μέσα στο φάκελο myWebsite:

Δημιουργήστε μία νέα ιστοσελίδα και ονομάστε την index.html. Αυτό το όνομα έχει συνήθως η αρχική ή κεντρική σελίδα κάθε δικτυακού τόπου.

Δημιουργήστε έναν νέο (υπό)φάκελο και ονομάστε τον images. Εδώ θα αποθηκεύσουμε όλες τις εικόνες που θα χρειαστούμε.

Μέσα στο φάκελο images αποθηκεύστε μία είκόνα, ας πούμε την myPic.jpg

Έτσι έχουμε τα εξής full paths:

C:\2025-26\A Λυκείου\Α3\Mitsos\html\myWebsite ο φάκελος που περιέχει το website

C:\2025-26\A Λυκείου\Α3\Mitsos\html\myWebsite\index.html η αρχική σελίδα

C:\2025-26\A Λυκείου\Α3\Mitsos\html\myWebsite\images ο φάκελος που θα περιέχει τις εικόνες

C:\2025-26\A Λυκείου\Α3\Mitsos\html\myWebsite\images\myPic.jpg το αρχείο εικόνας

Αν παρατηρήσουμε τις 4 διαδρομές διαπιστώνουμε ότι όλες έχουν κοινό το μεγαλύτερο κομμάτι (μέχρι και το φάκελο myWebsite) πράγμα λογικό αφού όλο το site βρίσκεται στον ίδιο φάκελο. Για να συνδεθεί μία ιστοσελίδα με οποιοδήποτε άλλο αρχείο που έχουμε αποθηκευμένο στο φάκελο του website, θεωρούμε ως αφετηρία την ίδια την ιστοσελίδα, αγνοώντας όλους τους προηγούμενους φακέλους της διαδρομής. Έτσι δημιουργούμε τις σχετικές διαδρομές (relative paths)

Σχετική διαδρομή (Relative path)

Αν θεωρήσουμε σαν αφερτηρία την ιστοσελίδα index.html η σχετική διαδρομή για το αρχείο της εικόνας είναι: images\myPic.jpg 

Στον κώδικα των ιστοσελίδων μας θα πρέπει να χρησιμοποιούμε πάντα τις σχετικές διαδρομές και ποτέ τις πλήρεις. Με τα full paths, ενώ στον υπολογιστή που δουλεύουμε θα εμφανίζονται όλα όπως θέλουμε, οι ιστοσελίδες μας δεν θα λειτουργούν σε καμία άλλη συσκευή!