Είτε είστε νέος στον κλάδο του διαδικτύου ή ένας έμπειρος βετεράνος, βλέποντας την πηγή HTML διαφορετικών ιστοσελίδων είναι κάτι που πιθανόν να κάνετε πολλές φορές κατά τη διάρκεια της καριέρας σας.
Για όσους είναι νέοι στο σχεδιασμό ιστοσελίδων, η προβολή του πηγαίου κώδικα ενός ιστότοπου είναι ένας από τους ευκολότερους τρόπους για να δείτε πώς γίνονται συγκεκριμένα πράγματα, ώστε να μπορείτε να μάθετε από αυτή την εργασία και να αρχίσετε να χρησιμοποιείτε συγκεκριμένο κώδικα ή τεχνικές στη δουλειά σας. Όπως κάθε σχεδιαστής ιστοσελίδων που εργάζεται σήμερα, ειδικά όσοι το βρισκόταν από τις πρώτες μέρες του κλάδου, και είναι ένα ασφαλές στοίχημα ότι με σας λένε ότι έμαθαν HTML απλά βλέποντας την πηγή των ιστοσελίδων που είδαν και ενδιαφέρθηκαν με. Εκτός από την ανάγνωση βιβλίων σχεδιασμού ιστοσελίδων ή τη συμμετοχή σε επαγγελματικά συνέδρια, η προβολή του πηγαίου κώδικα ενός ιστότοπου είναι ένας πολύ καλός τρόπος για τους αρχαρίους να μάθουν HTML.
Περισσότερα από HTML
Ένα πράγμα που πρέπει να θυμάστε είναι ότι τα αρχεία προέλευσης μπορούν να είναι πολύ περίπλοκα (και όσο πιο περίπλοκη είναι η ιστοσελίδα που βλέπετε, τόσο πιο πολύπλοκη θα είναι ο κώδικας του ιστότοπου). Εκτός από τη δομή HTML που αποτελεί τη σελίδα που βλέπετε, θα υπάρχουν και CSS (cascading style sheets) που υπαγορεύουν την οπτική εμφάνιση αυτού του ιστότοπου. Επιπλέον, πολλοί ιστότοποι σήμερα θα περιλαμβάνουν αρχεία δέσμης ενεργειών που περιλαμβάνονται μαζί με το HTML.
Είναι πιθανό να περιλαμβάνονται πολλά αρχεία δέσμης ενεργειών, στην πραγματικότητα, καθένα από τα οποία τροφοδοτεί διαφορετικές πτυχές του ιστότοπου. Ειλικρινά, ο πηγαίος κώδικας ενός ιστότοπου μπορεί να φανεί συντριπτικός, ειδικά αν είστε νέοι για να το κάνετε αυτό. Μην απογοητεύεστε αν δεν μπορείτε να καταλάβετε τι συμβαίνει με αυτόν τον ιστότοπο αμέσως. Η προβολή της πηγής HTML είναι μόνο το πρώτο βήμα αυτής της διαδικασίας. Με λίγη εμπειρία, θα αρχίσετε να καταλαβαίνετε καλύτερα πώς όλα αυτά τα κομμάτια ταιριάζουν μαζί για να δημιουργήσετε την ιστοσελίδα που βλέπετε στο πρόγραμμα περιήγησής σας. Καθώς εξοικειώνεστε περισσότερο με τον κώδικα, θα μπορείτε να μάθετε περισσότερα από αυτό και δεν θα σας φανεί τόσο τρομακτικό.
Πώς βλέπετε τον πηγαίο κώδικα ενός ιστότοπου; Ακολουθούν οι οδηγίες βήμα προς βήμα για να γίνει αυτό χρησιμοποιώντας το πρόγραμμα περιήγησης Google Chrome.
Οδηγίες βήμα προς βήμα
-
Ανοιξε το Πρόγραμμα περιήγησης στο Google Chrome (αν δεν έχετε εγκαταστήσει το Google Chrome, αυτή είναι μια δωρεάν λήψη).
-
Πλοηγηθείτε στο ιστοσελίδα που θα θέλατε να εξετάσετε.
-
Κάντε δεξί κλικ η σελίδα και δείτε το μενού που εμφανίζεται. Από αυτό το μενού, κάντε κλικ στην επιλογή Δες την πηγή της σελίδας.
-
Ο πηγαίος κώδικας για αυτήν τη σελίδα θα εμφανιστεί τώρα ως νέα καρτέλα στο πρόγραμμα περιήγησης.
-
Εναλλακτικά, μπορείτε επίσης να χρησιμοποιήσετε τις συντομεύσεις πληκτρολογίου του CTRL + U σε έναν υπολογιστή για να ανοίξει ένα παράθυρο με τον πηγαίο κώδικα ενός ιστότοπου που εμφανίζεται. Σε ένα Mac, αυτή η συντόμευση είναι Εντολή + επιλογή + U.
Εργαλεία προγραμματιστή
Εκτός από το απλό Δες την πηγή της σελίδας την δυνατότητα που προσφέρει το Google Chrome, μπορείτε επίσης να επωφεληθείτε από τα εξαιρετικά εργαλεία προγραμματιστή για να σκάψετε ακόμα πιο βαθιά σε έναν ιστότοπο. Αυτά τα εργαλεία θα σας επιτρέψουν όχι μόνο να δείτε το HTML, αλλά και το CSS που ισχύει για τα στοιχεία προβολής σε αυτό το έγγραφο HTML.
Για να χρησιμοποιήσετε τα εργαλεία προγραμματιστών του Chrome:
-
Ανοιξε Google Chrome.
-
Πλοηγηθείτε στο την ιστοσελίδα που θέλετε να εξετάσετε.
-
Κάντε κλικ στο εικονίδιο με τρεις γραμμές στην επάνω δεξιά γωνία του παραθύρου του προγράμματος περιήγησης.
-
Από το μενού, τοποθετήστε το δείκτη του ποντικιού πάνω Περισσότερα εργαλεία και στη συνέχεια κάντε κλικ στο κουμπί Εργαλεία προγραμματιστή στο μενού που εμφανίζεται.
-
Αυτό θα ανοίξει ένα παράθυρο που θα εμφανίζει τον πηγαίο κώδικα HTML στα αριστερά του παραθύρου και το σχετικό CSS στα δεξιά.
-
Εναλλακτικά, αν κάνετε δεξί κλικ ένα στοιχείο σε μια ιστοσελίδα και επιλέξτε Επιθεωρώ από το μενού που εμφανίζεται, θα εμφανιστούν τα εργαλεία προγραμματιστή του Chrome και το ακριβές στοιχείο που έχετε επιλέξει θα επισημανθεί στην HTML με το αντίστοιχο CSS που εμφανίζεται στα δεξιά. Αυτό είναι πολύ χρήσιμο εάν θέλετε να μάθετε περισσότερα σχετικά με το πώς δημιουργήθηκε ένα συγκεκριμένο κομμάτι ενός ιστότοπου.
Είναι νόμιμη η προβολή του πηγαίου κώδικα;
Με τα χρόνια, είχαμε πολλούς νέους σχεδιαστές ιστοσελίδων να αναρωτηθούμε αν είναι αποδεκτό να βλέπουμε τον πηγαίο κώδικα ενός ιστοτόπου και να το χρησιμοποιούμε για την εκπαίδευσή του και τελικά για την εργασία που κάνουν. Ενώ αντιγράφετε τον κώδικα χονδρικής ενός δικτυακού τόπου και απορρίπτετε τον δικό σας σε έναν ιστότοπο, σίγουρα δεν είναι αποδεκτό, χρησιμοποιώντας αυτόν τον κώδικα ως εφαλτήριο για να μάθετε από πόσες εξελίξεις γίνονται σε αυτόν τον κλάδο.
Όπως αναφέρθηκε στην αρχή αυτού του άρθρου, θα δυσκολευόσαστε να βρείτε ένα επαγγελματικό web επαγγελματικό σήμερα που δεν έχει μάθει κάτι προβάλλοντας την πηγή ενός ιστοτόπου! Ναι, η προβολή του πηγαίου κώδικα ενός ιστότοπου είναι νόμιμη. Χρησιμοποιώντας αυτόν τον κώδικα ως πόρο για την οικοδόμηση κάτι παρόμοιο είναι επίσης μια χαρά. Λαμβάνοντας τον κώδικα ως-είναι και το περνώντας μακριά καθώς η εργασία σας είναι όπου αρχίζετε να αντιμετωπίζετε προβλήματα.
Στο τέλος, οι επαγγελματίες του διαδικτύου μαθαίνουν ο ένας από τον άλλον και συχνά βελτιώνουν τη δουλειά που βλέπουν και εμπνέουν, οπότε μην διστάσετε να δείτε τον πηγαίο κώδικα του ιστότοπου και να τον χρησιμοποιήσετε ως εκπαιδευτικό εργαλείο.
