Πώς να προβάλετε τον πηγαίο κώδικα HTML μιας ιστοσελίδας

Όλα τα προγράμματα περιήγησης στο Διαδίκτυο επιτρέπουν στους χρήστες να βλέπουν τον πηγαίο κώδικα HTML οποιασδήποτε ιστοσελίδας που επισκέπτονται. Οι ακόλουθες ενότητες περιέχουν πληροφορίες σχετικά με τους πολλαπλούς τρόπους προβολής του πηγαίου κώδικα σε κάθε ένα από τα μεγάλα προγράμματα περιήγησης. Για να συνεχίσετε, επιλέξτε μια καταχώρηση από την παρακάτω λίστα και ακολουθήστε τις οδηγίες για αυτήν την ενότητα.

Κατά την προβολή του πηγαίου κώδικα μιας ιστοσελίδας, είναι σημαντικό να έχετε κατά νου ότι οι πληροφορίες και ο κώδικας που δεν έχουν υποβληθεί σε επεξεργασία από το διακομιστή δεν θα εμφανιστούν. Για παράδειγμα, σχεδόν όλες οι μηχανές αναζήτησης στο Διαδίκτυο επεξεργάζονται πληροφορίες σε ένα διακομιστή και, στη συνέχεια, εμφανίζουν τα αποτελέσματα σε μια ιστοσελίδα. Με άλλα λόγια, μπορείτε να δείτε τον κώδικα που δημιουργεί τη σελίδα αποτελεσμάτων, αλλά δεν μπορείτε να δείτε τον πηγαίο κώδικα της μηχανής αναζήτησης.

Αυτός ο κανόνας ισχύει για όλα τα σενάρια διακομιστή, SSI και κώδικα προγραμματισμού. Ως εκ τούτου, τα χαρακτηριστικά γνωρίσματα, όπως μηχανές αναζήτησης, φόρουμ, δημοσκοπήσεις, συνομιλία κ.λπ., δεν θα εμφανίζουν τον κωδικό τους. Η αντιγραφή των πληροφοριών από τον πηγαίο κώδικα μπορεί να προκαλέσει σφάλματα ή να σας επιστρέψει στη σελίδα από την οποία αντιγράψατε τις πληροφορίες.

Χρήστες του Microsoft Edge

Για να προβάλετε τον πηγαίο κώδικα μιας ιστοσελίδας στο Microsoft Edge, ακολουθήστε τα παρακάτω βήματα.

  1. Πατήστε Ctrl + U ή F12 στο πληκτρολόγιο του υπολογιστή σας.
  2. Επιλέξτε την καρτέλα Στοιχεία στο επάνω μέρος του δεξιού παραθύρου.

Ή

Ή

  1. Ανοίξτε το Microsoft Edge και μεταβείτε στην ιστοσελίδα της επιλογής σας.
  2. Κάντε κλικ στο Περισσότερα

    εικονίδιο στην επάνω δεξιά γωνία της οθόνης.
  3. Επιλέξτε Εργαλεία προγραμματιστή από το αναπτυσσόμενο μενού που εμφανίζεται.
  4. Επιλέξτε την καρτέλα Στοιχεία στο επάνω μέρος του δεξιού παραθύρου.

Συμβουλή: Στο Microsoft Edge, το εργαλείο DOM παρέχει επίσης αλληλεπίδραση με τον πηγαίο κώδικα και τις ρυθμίσεις CSS, επιτρέποντας στους χρήστες να δουν πώς οι αλλαγές στον κώδικα επηρεάζουν άμεσα την ιστοσελίδα.

Χρήστες του Microsoft Internet Explorer

Για να προβάλετε τον πηγαίο κώδικα μιας ιστοσελίδας στον Microsoft Internet Explorer, ακολουθήστε τα παρακάτω βήματα.

  1. Πατήστε Ctrl + U ή F12 στο πληκτρολόγιο του υπολογιστή σας.
  2. Κάντε κλικ στην καρτέλα Debugger στην κορυφή του νέου μενού.

Ή

Ή

  1. Ανοίξτε τον Internet Explorer και μεταβείτε στην ιστοσελίδα της επιλογής σας.
  2. Πατήστε το πλήκτρο Alt για να εμφανιστεί η γραμμή μενού του προγράμματος περιήγησης.
  3. Επιλέξτε Προβολή και στη συνέχεια Πηγή από το αναπτυσσόμενο μενού που εμφανίζεται.
  4. Κάντε κλικ στην καρτέλα Debugger στην κορυφή του νέου μενού.

Συμβουλή: Με τις πιο πρόσφατες εκδόσεις του Internet Explorer, πατώντας το πλήκτρο F12 εμφανίζεται το εργαλείο DOM. Αυτό το εργαλείο παρέχει πολύ μεγαλύτερη αλληλεπίδραση με τον πηγαίο κώδικα και τις ρυθμίσεις CSS, επιτρέποντας στους χρήστες να δουν πώς οι αλλαγές στον κώδικα επηρεάζουν άμεσα την ιστοσελίδα.

Χρήστες Mozilla Firefox και Netscape

Για να δείτε τον πηγαίο κώδικα μιας ιστοσελίδας στο Mozilla Firefox, ακολουθήστε τα παρακάτω βήματα.

  1. Πατήστε Ctrl + U στο πληκτρολόγιο του υπολογιστή σας.

Ή

Ή

  1. Ανοίξτε το Mozilla Firefox και μεταβείτε στην ιστοσελίδα της επιλογής σας.
  2. Πατήστε το πλήκτρο Alt για να εμφανιστεί η γραμμή μενού του προγράμματος περιήγησης.
  3. Επιλέξτε Εργαλεία, Web Developer και στη συνέχεια Page Source .

Συμβουλή: Με τις πιο πρόσφατες εκδόσεις του Firefox, πατώντας το πλήκτρο F12 ή το Ctrl + Shift + I εμφανίζεται το εργαλείο διαδραστικών προγραμματιστών. Αυτό το εργαλείο παρέχει πολύ μεγαλύτερη αλληλεπίδραση με τον πηγαίο κώδικα και τις ρυθμίσεις CSS, επιτρέποντας στους χρήστες να δουν πώς οι αλλαγές στον κώδικα επηρεάζουν άμεσα την ιστοσελίδα.

Προβάλετε μια ενότητα του πηγαίου κώδικα της σελίδας

  1. Επισημάνετε το τμήμα μιας ιστοσελίδας για την οποία θέλετε να δείτε τον πηγαίο κώδικα.
  2. Κάντε δεξιό κλικ σε αυτήν την επισημασμένη ενότητα και στη συνέχεια κάντε κλικ στην επιλογή Προβολή προέλευσης επιλογής .

Συμβουλή: Χρησιμοποιήστε το πρόσθετο Firebug για να δείτε όχι μόνο τον πηγαίο κώδικα μιας σελίδας αλλά να αλλάξετε και να προβάλετε τις αλλαγές αυτές μέσω του προγράμματος περιήγησης.

Χρήστες του Google Chrome

Για να προβάλετε τον πηγαίο κώδικα μιας ιστοσελίδας στο Google Chrome, ακολουθήστε τα παρακάτω βήματα.

  1. Πατήστε Ctrl + U στο πληκτρολόγιο του υπολογιστή σας.

Ή

Ή

  1. Ανοίξτε το Chrome και περιηγηθείτε στην ιστοσελίδα της επιλογής σας.
  2. Κάντε κλικ στην επιλογή Προσαρμογή και έλεγχος του Google Chrome

    εικονίδιο στην επάνω δεξιά πλευρά του παραθύρου του προγράμματος περιήγησης.
  3. Από το αναπτυσσόμενο μενού που εμφανίζεται, επιλέξτε Περισσότερα εργαλεία και στη συνέχεια εργαλεία για προγραμματιστές .
  4. Κάντε κλικ στην καρτέλα Στοιχεία στο επάνω μέρος της νέας ενότητας που εμφανίζεται.

Συμβουλή: Με τις πιο πρόσφατες εκδόσεις του Chrome, πατώντας το πλήκτρο F12 ή το Ctrl + Shift + I εμφανίζεται επίσης το εργαλείο διαδραστικών προγραμματιστών. Αυτό το εργαλείο παρέχει πολύ μεγαλύτερη αλληλεπίδραση με τον πηγαίο κώδικα και τις ρυθμίσεις CSS, επιτρέποντας στους χρήστες να δουν πώς οι αλλαγές στον κώδικα επηρεάζουν άμεσα την ιστοσελίδα.

Χρήστες Apple Safari

Για να προβάλετε τον πηγαίο κώδικα μιας ιστοσελίδας στο Apple Safari, ακολουθήστε τα παρακάτω βήματα.

  1. Πατήστε Command + Option + U στο πληκτρολόγιό σας.

Ή

Ή

  1. Ανοίξτε το πρόγραμμα περιήγησης Safari και μεταβείτε στην ιστοσελίδα της επιλογής σας.
  2. Επιλέξτε το αναπτυσσόμενο μενού.
  3. Επιλέξτε την επιλογή Προβολή προέλευσης σελίδας .

Χρήστες του Opera

Για να δείτε τον πηγαίο κώδικα μιας ιστοσελίδας στην Opera, ακολουθήστε τα παρακάτω βήματα.

  1. Πατήστε Ctrl + U στο πληκτρολόγιό σας.

Ή

Ή

  1. Ανοίξτε την Όπερα και μεταβείτε στην ιστοσελίδα της επιλογής σας.
  2. Κάντε κλικ στο κουμπί Μενού

    στην επάνω αριστερή γωνία του παραθύρου του προγράμματος περιήγησης.
  3. Στο υπομενού Προγραμματιστής, επιλέξτε Πηγή σελίδας .

Συμβουλή: Εάν δεν βλέπετε το υπομενού προγραμματιστή, επιλέξτε Περισσότερα εργαλείαΕμφάνιση του μενού προγραμματιστή . Στη συνέχεια, κάντε κλικ στο κουμπί μενού

πάλι. Θα πρέπει να δείτε το υπομενού Developer που εμφανίζεται.

Συμβουλή: Με τις τελευταίες εκδόσεις της Opera, πατώντας το συνδυασμό συντομεύσεων Ctrl + Shift + I εμφανίζεται το εργαλείο διαδραστικών προγραμματιστών. Αυτό το εργαλείο παρέχει πολύ μεγαλύτερη αλληλεπίδραση με τον πηγαίο κώδικα και τις ρυθμίσεις CSS, επιτρέποντας στους χρήστες να δουν πώς οι αλλαγές στον κώδικα επηρεάζουν άμεσα την ιστοσελίδα.

Android τηλέφωνο με Chrome

  1. Ανοίξτε το πρόγραμμα περιήγησης στο Internet του Google Chrome στο τηλέφωνό σας.
  2. Ανοίξτε την ιστοσελίδα με τον πηγαίο κώδικα που θέλετε να προβάλετε.
  3. Πατήστε μία φορά στη γραμμή διευθύνσεων και στη συνέχεια μετακινήστε τον κέρσορα στο μπροστινό μέρος της διεύθυνσης URL.
  4. Πληκτρολογήστε πηγή προέλευσης: και πατήστε Enter ή Go .

Συμβουλή: Για παράδειγμα, για να δείτε τον κώδικα για την αρχική σελίδα μας, πληκτρολογήστε προβολή-πηγή: //www.computerhope.com

Πώς να κλείσετε τη σελίδα πηγαίου κώδικα ή το εργαλείο

Μόλις ολοκληρώσετε την προβολή του πηγαίου κώδικα σε μια ιστοσελίδα, ίσως θελήσετε να την κλείσετε ή να την κλείσετε. Το κλείσιμο του πηγαίου κώδικα εξαρτάται από τη μέθοδο που χρησιμοποιήσατε για να το ανοίξετε.

  • Αν έχετε χρησιμοποιήσει τη μέθοδο Ctrl + U (εκτός από την άκρη) ή τη μέθοδο με το δεξιό κλικ, κλείστε τη νέα καρτέλα που ανοίγει στην κορυφή του παραθύρου του προγράμματος περιήγησης.
  • Εάν έχετε χρησιμοποιήσει τη μέθοδο προγραμματιστή (πατώντας F12 ή Ctrl + Shift + I), κάντε κλικ στο

    στην επάνω δεξιά γωνία του παραθύρου εργαλείων .