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