Πώς να διαβάσετε τον κωδικό της σελίδας στην επαφή. FAQ Αποσυσκευασία και αποκρυπτογράφηση αρχείων js. Αυτό είναι το Google Chrome

Ψάχνοντας σε αμέτρητους ιστότοπους στο Διαδίκτυο, μπορείτε να συναντήσετε αυτούς που μας αρέσουν πολύ. Προκύπτουν αμέσως μια σειρά από ερωτήματα. Ο ιστότοπος δημιουργήθηκε με χρήση οικιακού κώδικα ή κάποιου είδους CMS; Τι στυλ CSS έχει; Ποιες είναι οι μετα-ετικέτες του; Και ούτω καθεξής.

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

Πώς να δείτε τον κώδικα της σελίδας;

Για να προβάλετε τον πηγαίο κώδικα μιας σελίδας ιστότοπου, πρέπει να τοποθετήσετε το ποντίκι σας σε οποιαδήποτε περιοχή της ιστοσελίδας (εκτός από εικόνες και συνδέσμους). Μετά από αυτό, κάντε κλικ στο δεξί κουμπί του ποντικιού. Ένα παράθυρο με πολλές επιλογές θα ανοίξει μπροστά μας (μπορεί να διαφέρουν ελαφρώς σε διαφορετικά προγράμματα περιήγησης). Στο πρόγραμμα περιήγησης Google Chrome, για παράδειγμα, αυτές είναι οι εντολές:

• πίσω;
• προς τα εμπρός;
• επανεκκίνηση?
• αποθήκευση ως;
• σφραγίδα;
• Μετάφραση στα ρωσικά?
• προβολή κώδικα σελίδας;
• προβολή κώδικα.

Πρέπει να κάνουμε κλικ προβολή κώδικα σελίδας, και ο κώδικας html της σελίδας του ιστότοπου θα ανοίξει μπροστά μας.

Προβολή του κώδικα της σελίδας: τι να προσέξετε;

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

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

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

Για παράδειγμα:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

Θα δούμε τα στυλ γραμματοσειράς CSS της σελίδας. Σε αυτήν την περίπτωση, χρησιμοποιείται η γραμματοσειρά. Αυτό μπορείτε να το δείτε εδώ - font-family: 'Source Sans Pro'.

Αυτός ο ιστότοπος έχει βελτιστοποιηθεί χρησιμοποιώντας την προσθήκη Yoast SEO. Αυτό μπορεί να φανεί από αυτήν την ενότητα κώδικα που σχολιάστηκε:

Αυτός ο ιστότοπος έχει βελτιστοποιηθεί με την προσθήκη Yoast SEO v3.4.2 - https://yoast.com/wordpress/plugins/seo/

Όλες οι πληροφορίες που περιέχονται στην ετικέτα σώματος εμφανίζονται από το πρόγραμμα περιήγησης στην οθόνη της οθόνης. Εδώ βλέπουμε τον κώδικα html της σελίδας και στο κάτω μέρος υπάρχει ο κώδικας σεναρίου Yandex Metrics. Περιβάλλεται από μια σχολιασμένη ετικέτα με το κείμενο:

/Μετρητής Yandex.Metrika

Ας το συνοψίσουμε

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

• CMS WordPress;
• Γραμματοσειρά Google Source Sans Pro.
• Θέμα WordPress – Σίδνεϊ.
• Προσθήκες Yoast.
• Μετρητής μετρήσεων Yandex.

Τώρα η αρχή της ανάλυσης του κώδικα html μιας σελίδας ιστότοπου είναι αρκετά σαφής. Δεν είναι καθόλου απαραίτητο να κρατήσετε ανοιχτή τη σελίδα που ερευνάτε στο πρόγραμμα περιήγησης. Μπορείτε να αποθηκεύσετε τον κώδικα της σελίδας στον υπολογιστή σας χρησιμοποιώντας τους συνδυασμούς πλήκτρων ctrl+a, ctrl+c, ctrl+v. Επικολλήστε το σε οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου (κατά προτίμηση Notepad++) και αποθηκεύστε το με την επέκταση html. Έτσι, ανά πάσα στιγμή μπορείτε να το μελετήσετε πιο βαθιά και να βρείτε πιο χρήσιμες πληροφορίες για τον εαυτό σας.

1 ψήφος

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

Αποδεικνύεται ότι η απάντηση είναι αρκετά απλή. Και αν έχετε κάποιες δεξιότητες, μπορείτε να συλλέξετε πολλά από αυτά τα χαρακτηριστικά και να δημιουργήσετε τον δικό σας μοναδικό ιστότοπο σε σύντομο χρονικό διάστημα.

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

Βασικές γνώσεις κώδικα

Ο ιστότοπός μου προορίζεται για αρχάριους και πρώτα θα ήθελα να μιλήσω εν συντομία για τους ιστότοπους και τον κώδικα γενικότερα.

Για να σχεδιάσετε μια εικόνα και, στη συνέχεια, κόψτε την σε μικρά μέρη, γράψτε κώδικα έτσι ώστε το πρόγραμμα περιήγησης να συναρμολογήσει ξανά όλα τα στοιχεία σε ένα ενιαίο σύνολο. Όλα φαίνονται πολύ περίπλοκα; Καθόλου, και δεν έχει νόημα να θρηνείς γι' αυτό.

Έτσι δημιουργούνται ιστοσελίδες υψηλής ποιότητας. Αν θέλετε, εμπλακείτε σε αυτό το θέμα και μελετήστε το· αν δεν θέλετε, κανείς δεν μπορεί να σας αναγκάσει.

Θα πω μόνο ένα πράγμα... δεν υπάρχει τίποτα πιο ευχάριστο από το να βλέπεις πώς οι ακατανόητες λέξεις που έγραψες μεταμορφώνονται σε ένα ενιαίο σύνολο και ζωντανεύουν: οι σύνδεσμοι λειτουργούν, τα κουμπιά κινούνται, οι εικόνες κινούνται, το κείμενο ανιχνεύεται. Νομίζω ότι ξέρω πώς ένιωσε ο Βίκτορ Φρανκενστάιν.

Όταν αρχίσετε να κατανοείτε τη μυστική γλώσσα και βλέπετε ότι όλα είναι στην πραγματικότητα πολύ πιο απλά από ό,τι φαινόταν αρχικά, δεν μπορείτε παρά να πιστέψετε στις δικές σας δυνάμεις και ικανότητες του εγκεφάλου. Αυτό είναι πολύ δροσερό.

Πώς κατασκευάζονται οι ιστοσελίδες; Ιδανικά, πρώτα. Απλώς ζωγραφίζει μια εικόνα. Για παράδειγμα, όπως φαίνεται στην παρακάτω εικόνα. Προς το παρόν είναι απλώς μια εικόνα, μια φωτογραφία. Δεν λειτουργούν σύνδεσμοι, όταν κάνετε κλικ δεν πηγαίνετε πουθενά, δεν πραγματοποιείται αναζήτηση.

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

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

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

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

Λίγο αργότερα, θα σας δείξω ένα συγκεκριμένο παράδειγμα.

Προβολή κώδικα

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

Ο καλύτερος τρόπος

Η μέθοδος που θα περιγράψω πρώτα είναι λίγο περίπλοκη για αρχάριους, αλλά ως εισαγωγή, διαβάστε την. Ανοίξτε τη σελίδα και κάντε κλικ στο δεξί κουμπί του ποντικιού. Επιλέξτε "Αποθήκευση ως..."

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

Όλα όσα χρειάζεστε είναι εδώ. Κάθε στοιχείο. Εάν το καταλαβαίνετε αυτό, μπορείτε να αποκτήσετε γρήγορα όλα όσα χρειάζεστε. Αλλά ένα τέτοιο έργο γίνεται όλο και πιο αδύνατο. Δεν υπάρχει λήψη. Τι να κάνετε εάν απαγορεύεται η αντιγραφή μιας σελίδας;

Αυτό είναι το Google Chrome

Όπως ίσως έχετε ήδη παρατηρήσει, χρησιμοποιώ τις περισσότερες φορές το Google Chrome και η εκμάθηση του κώδικα κάποιου άλλου σε αυτό το πρόγραμμα περιήγησης είναι τόσο εύκολη όσο το ξεφλούδισμα των αχλαδιών. Όπως καταρχήν με κάθε άλλο. Το σχήμα δεν θα είναι μόνο παρόμοιο, αλλά πανομοιότυπο. Ανοίξτε τη σελίδα της οποίας τον κωδικό θέλουμε να μάθουμε και κάντε δεξί κλικ οπουδήποτε. Στο παράθυρο που εμφανίζεται, κάντε κλικ στο «Προβολή κώδικα σελίδας».

Ένα φύλλο κώδικα θα ανοίξει σε ένα νέο παράθυρο, το οποίο είναι αρκετά δύσκολο για έναν αρχάριο να καταλάβει. Αλλά μην ανησυχείτε εκ των προτέρων.

Εάν πρέπει να γνωρίζετε τον κωδικό ενός μόνο στοιχείου, απλώς τοποθετήστε τον δείκτη του ποντικιού πάνω του με το ποντίκι και κάντε δεξί κλικ. Επιλέξτε μια άλλη λειτουργία του Chrome: "Προβολή κωδικού στοιχείου".

Για παράδειγμα, μπορεί να με ενδιαφέρει πώς κατασκευάστηκε το λογότυπο, χρησιμοποιώντας μια εικόνα ή μια γλώσσα προγραμματισμού; Μετά από όλα, μπορείτε να σχεδιάσετε ένα τετράγωνο χρησιμοποιώντας CSS. Πολλοί ειδικοί συμβουλεύουν να γράψετε όσο το δυνατόν περισσότερες πληροφορίες σε κώδικα. Πώς λειτουργούν σε δημοφιλείς ιστότοπους;

Τώρα εμφανίστηκαν οι απαραίτητες πληροφορίες. html πάνω, css κάτω. Αυτές είναι δύο γλώσσες. Το πρώτο είναι υπεύθυνο για το στοιχείο κειμένου και το δεύτερο για το σχέδιο. Εάν δεν υπήρχε CSS, τότε θα έπρεπε να καθορίζετε το χρώμα και το μέγεθος γραμματοσειράς κάθε φορά. Για κάθε σελίδα, αυτό είναι πολύ μεγάλο. Αλλά αν δεν υπήρχε η html, τότε δεν θα είχαμε κείμενα. Το εξήγησα χονδρικά, αλλά γενικά έτσι είναι.

Παρεμπιπτόντως, αν ενδιαφέρεστε για το πώς λειτουργεί εδώ, μπορείτε να δείτε τον σύνδεσμο στην παρακάτω εικόνα. Εδώ είναι η απάντησή σας.

Mozilla Firefox

Αν σας αρέσει να δουλεύετε στη μαστίχα, τότε όλα θα είναι ακριβώς τα ίδια. Ανοίξτε τη σελίδα και κάντε κλικ στο δεξί κουμπί του ποντικιού. "Πηγαίος κώδικας σελίδας" εάν θέλετε να δείτε ολόκληρο τον κώδικα.

Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο, μπορείτε να ανοίξετε τον κώδικά του.

Εδώ τα δεδομένα εμφανίζονται στο κάτω μέρος της οθόνης, αλλά κατά τα άλλα όλα είναι ακριβώς τα ίδια.

Το πρόγραμμα περιήγησης Yandex

Στο πρόγραμμα περιήγησης Yandex, όλα είναι ακριβώς τα ίδια όπως στις δύο προηγούμενες επιλογές, ανοίξτε τη σελίδα, κάντε δεξί κλικ, δείτε τον κώδικα της σελίδας.

Περνάμε τον κέρσορα πάνω από ένα στοιχείο αν θέλουμε να μάθουμε ακριβώς τον κωδικό του.

Όλα εμφανίζονται εδώ ακριβώς όπως στο Chrome.

ΛΥΡΙΚΗ ΣΚΗΝΗ

Και τέλος, Όπερα.

Παρεμπιπτόντως, ίσως έχετε παρατηρήσει ότι δεν χρειάζεται να χρησιμοποιήσετε ποντίκι. Υπάρχει μια γρήγορη συντόμευση πληκτρολογίου για το άνοιγμα του κώδικα και είναι η ίδια για όλα τα προγράμματα περιήγησης: CTRL+U.

Για στοιχεία: Ctrl+Shift+C.

Έτσι φαίνεται το αποτέλεσμα.

Αυτό θα είναι ενδιαφέρον για αρχάριους

Δείτε τώρα πώς λειτουργούν όλα. Βρίσκεις έναν ιστότοπο και σου αρέσει πολύ κάποιο στοιχείο. Για παράδειγμα, αυτό. Ξέρετε ήδη πώς να ανοίξετε τον κωδικό στοιχείου.

Τώρα αντιγράψτε το.

Χρησιμοποιώ , επικολλώ αυτόν τον κώδικα σε ένα νέο αρχείο html, στην ετικέτα body (body στα Αγγλικά).

Τώρα ας δούμε πώς θα φαίνονται όλα στο πρόγραμμα περιήγησης.

Ετοιμος. Για να ευθυγραμμιστεί το κείμενο στις άκρες και να αποκτήσει ένα πρασινωπό χρώμα, πρέπει να συνδέσετε το css σε αυτό το έγγραφο και να αντιγράψετε έναν άλλο κώδικα από τον ιστότοπο από τον οποίο αντιγράψαμε αυτόν.

Δεν θα το κάνω αυτό τώρα. Αυτό απαιτεί περισσότερο χρόνο: και δικό μου και δικό σας. Νομίζω ότι θα περιγράψω όλες τις λεπτομέρειες σε μελλοντικές δημοσιεύσεις μου. Εγγραφείτε στο ενημερωτικό δελτίο και μάθετε πρώτοι πότε εμφανίζεται ένα άρθρο.

Εάν δεν το αντέχετε, αλλά θέλετε να μάθετε περισσότερα για την html και το css τώρα, τότε μπορώ παραδοσιακά να σας προτείνω δωρεάν μαθήματα κατάρτισης.

Εδώ είναι 33 μαθήματα που θα σας επιτρέψουν να κυριαρχήσετε την html - "Δωρεάν μάθημα HTML" .

Και εδώ είναι πλήρεις πληροφορίες για το css - "Δωρεάν μάθημα για CSS (45 μαθήματα βίντεο!)" .

Τώρα ξέρεις λίγα περισσότερα. Σας εύχομαι καλή επιτυχία στις προσπάθειές σας. Τα λέμε!

Κυκλοφόρησε ένα νέο βιβλίο, το Social Media Content Marketing: How to Get Inside Your Followers' Heads and Make Them Fall Fall with Your Brand.

Ο πηγαίος κώδικας ενός ιστότοπου είναι μια συλλογή από σήμανση HTML, στυλ CSS και σενάρια JavaScript που λαμβάνει το πρόγραμμα περιήγησης από τον διακομιστή ιστού.

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

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

Ο ιστότοπος αποθηκεύεται σε έναν διακομιστή ιστού, ο οποίος στέλνει τη σελίδα κατόπιν αιτήματος του χρήστη. Ένα αίτημα είναι να πληκτρολογήσετε μια διεύθυνση URL στη γραμμή διευθύνσεων, να κάνετε κλικ σε έναν σύνδεσμο ή να κάνετε κλικ σε ένα κουμπί υποβολής σε μια φόρμα. Δεν έχει σημασία σε ποια γλώσσα είναι γραμμένες οι ιστοσελίδες ή αν περιλαμβάνουν ένα στοιχείο λογισμικού. Το τελικό αποτέλεσμα οποιουδήποτε αλγόριθμου από την πλευρά του διακομιστή είναι ένα σύνολο ετικετών html και κειμένου.
Ο πηγαίος κώδικας της σελίδας είναι ένα σύνολο δεδομένων που περιλαμβάνει:

• html σήμανσης?
• φύλλο στυλ ή σύνδεσμος αρχείου.
• προγράμματα γραμμένα σε JavaScript ή συνδέσμους σε αρχεία με κώδικα.

Αυτές οι τρεις ενότητες επεξεργάζονται από το πρόγραμμα περιήγησης. Για τον διακομιστή, αυτό είναι απλώς το κείμενο που πρέπει να σταλεί ως απάντηση στο αίτημα.

Γιατί μπορεί να χρειαστεί να μελετήσουμε τον πηγαίο κώδικα

Ό,τι βλέπουμε, μπορούμε να αναλύσουμε και να εφαρμόσουμε για να λύσουμε ορισμένα προβλήματα που προκύπτουν κατά την εργασία με τον ιστότοπο, ειδικά κατά τη βελτιστοποίησή του. Βλέποντας τον πηγαίο κώδικα, μπορούμε:

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

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

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

Δεν θα είναι δυνατό να γίνει αυτό πλήρως με τη μορφή με την οποία έχει αναρτηθεί στον διακομιστή από το πρόγραμμα περιήγησης. Αλλά μπορείτε να δείτε όλη τη σήμανση κάνοντας δεξί κλικ στη σελίδα. Εδώ και παρακάτω χρησιμοποιώντας το Google Chrome ως παράδειγμα.

Επιλέξτε την επιλογή "Προβολή κώδικα σελίδας" και λάβετε την πλήρη καταχώριση σε ξεχωριστή καρτέλα.

Είναι απλώς ένα κείμενο που πρέπει να αναλύσεις για να καταλάβεις. Αλλά μπορείτε να λάβετε διαδραστικό κώδικα χρησιμοποιώντας τα εργαλεία προγραμματιστή.

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

Κάντε κλικ στο εικονίδιο μενού στο πρόγραμμα περιήγησης. Τις περισσότερες φορές είναι στα δεξιά και μοιάζει με τρεις τελείες ή ρίγες.

Στην ενότητα πρόσθετων εργαλείων, επιλέξτε «Εργαλεία προγραμματιστή».

Θα ανοίξει ένα παράθυρο που δείχνει την ενεργή κατάσταση του κωδικού. Αυτό σημαίνει ότι όταν κάνετε κλικ στη σήμανση, το στυλ του στοιχείου θα εμφανιστεί δίπλα του και τα επιλεγμένα μπλοκ θα επισημανθούν στη σελίδα.

Στην καρτέλα "Πηγή" μπορείτε να δείτε τα περιεχόμενα ορισμένων αρχείων: σενάρια, γραμματοσειρές, εικόνες.

Στην καρτέλα "Ασφάλεια", μπορείτε να ελέγξετε το πιστοποιητικό του ιστότοπου.

Η καρτέλα "Έλεγχοι" θα σας βοηθήσει να ελέγξετε τον πόρο που δημοσιεύτηκε στη φιλοξενία.

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

Πώς να δείτε μετα-ετικέτες

Κάθε έγγραφο HTML περιλαμβάνει ετικέτες δομής. Εδώ είναι μερικά από αυτά:

1. Html – ολόκληρο το έγγραφο.
2. Επικεφαλής – κεφαλίδες τμήματος υπηρεσιών.
3. Τίτλος – τίτλος σελίδας (εμφανίζεται στην καρτέλα).
4. Body – το σώμα του εγγράφου.
5. H1-H6 – επικεφαλίδες κειμένου σελίδας.
6. Άρθρο – άρθρο.
7. Τμήμα - τμήμα.
8. Μενού – μενού.
9. Div – μπλοκ.
10. Span – κορδόνι.
11. P – παράγραφος.
12. Τραπέζι – τραπέζι.

Τα στοιχεία έχουν σχεδιαστεί για να οριοθετούν λογικά τμήματα σε μια σελίδα· εάν είναι απαραίτητο, σχεδιάζονται χρησιμοποιώντας στυλ. Περιέχουν κείμενο που με κάποιο τρόπο είναι ορατό στη σελίδα. Αλλά η ετικέτα Head περιέχει πληροφορίες υπηρεσίας. Μετα-ετικέτες χρησιμοποιούνται για να το υποδείξουν. Όλα όσα γράφονται σε αυτά προορίζονται για τον διακομιστή και τις μηχανές αναζήτησης.

Το περιεχόμενό τους δεν μπορεί να βρεθεί με άλλο τρόπο.

Ας δώσουμε προσοχή στην ετικέτα Link. Με τη βοήθειά του, καθορίζονται σύνδεσμοι προς εξωτερικά αρχεία που περιλαμβάνονται. Εάν θέλετε, μπορείτε να δείτε τα περιεχόμενα και να τα αποθηκεύσετε στο δίσκο. Για να το κάνετε αυτό, μετακινήστε το δείκτη στη διεύθυνση και πατήστε RMB. Επιλέξτε "Άνοιγμα σε νέα καρτέλα".

Το καθορισμένο αρχείο θα ανοίξει σε μια νέα καρτέλα, την οποία μπορείτε να προβάλετε ή να αποθηκεύσετε.

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

Σε αυτήν την περίπτωση, είναι πιο βολικό να ανοίξετε τη σελίδα στο τοπικό μηχάνημα. Εάν χρειάζεται μόνο να διορθώσετε τη σήμανση, τα στυλ και τα σενάρια, τότε αυτό μπορεί να γίνει απευθείας από το φάκελο. Ο κώδικας HTML εμφανίζεται με τον ίδιο τρόπο. Ωστόσο, τα σφάλματα κώδικα JavaScript μπορούν να εμφανιστούν στην καρτέλα "Κονσόλα". Αυτό δείχνει την περιγραφή του σφάλματος και τον αριθμό γραμμής όπου παρουσιάστηκε.

Η σύνταξη φαίνεται απευθείας στον κώδικα. Για αυτό προορίζεται η καρτέλα "Πηγή".

Πώς να δείτε τον κωδικό ενός συγκεκριμένου στοιχείου

Για μεγάλες σελίδες με πολλά στοιχεία, είναι δύσκολο να βρεθεί ο απαραίτητος κώδικας σε όλη τη σήμανση. Σε αυτήν την περίπτωση, θα πρέπει να χρησιμοποιήσετε μια ειδική εντολή μενού περιβάλλοντος. Μετακινήστε το ποντίκι πάνω από το κομμάτι και πατήστε RMB. Επιλέξτε την εντολή «Προβολή κώδικα».

Θα ανοίξει το ίδιο παράθυρο, αλλά με εστίαση στο επιλεγμένο αντικείμενο.

Περίληψη

Σας είπαμε ποιος είναι ο πηγαίος κώδικας της σελίδας. Αρκεί να κατακτήσετε βασικές γνώσεις HTML και CSS και χρησιμοποιώντας βολικά εργαλεία προγραμματιστή, θα μπορείτε να διορθώσετε τα δικά σας έγγραφα HTML.

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

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

Πότε και ποιος μπορεί να το χρειαστεί;

Απολύτως οποιοσδήποτε webmaster ή ιδιοκτήτης ιστότοπου μπορεί να κάνει αυτήν την κρυπτογράφηση. Το ερώτημα είναι κατά πόσο αυτό είναι δικαιολογημένο και απαραίτητο. Για παράδειγμα, εάν έχετε μια κανονική σελίδα προορισμού φτιαγμένη με χρήση προτύπου και η οποία δεν διαφέρει από άλλες, δεν έχει νόημα η κωδικοποίηση, καθώς ένα τέτοιο πρότυπο είναι ήδη διαθέσιμο στο κοινό. Σε αυτήν την περίπτωση, είναι απίθανο κάποιος να αντιγράψει και να μελετήσει τον κώδικά σας. Αλλά αν έχετε έναν ιστότοπο που έχει μοναδικό σχεδιασμό, τον έχετε εργαστεί πολύ και με κόπο ή έχετε πληρώσει πολλά χρήματα για αυτόν, τότε αξίζει να σκεφτείτε τον κώδικα. Είναι πολύ συχνές οι περιπτώσεις που ο ιδιοκτήτης έχει μια ιστοσελίδα στην οποία έχει επενδύσει πολύ κόπο, χρόνο και χρήμα και μετά από κάποιο χρονικό διάστημα, με τον ένα ή τον άλλο τρόπο, ανακαλύπτει ακριβώς την ίδια ιστοσελίδα, με την ίδια σχεδίαση και δομή, αλλά σε διαφορετικό τομέα και φιλοξενία. Πολύ συχνά, οι ιδιοκτήτες ιστότοπων ενημερώνονται από τους ίδιους τους χρήστες στα σχόλια. Σε αυτή την περίπτωση, μπορούμε με ασφάλεια να συμπεράνουμε ότι κάποιος απλά αντέγραψε τον κώδικα HTMLτον ιστότοπό σας και τον κυκλοφόρησε στον δικό μου.

Τι πρέπει να κάνετε για να προστατεύσετε τον εαυτό σας;

Δεν είναι τόσο εύκολο να προστατευτείτε από καταστάσεις αντιγραφής και χρήσης του κώδικα HTML κάποιου άλλου χωρίς άδεια. Και γενικά, αν κάποιος έχει ήδη δει τον ιστότοπό σας, θα μπορεί να τον αντιγράψει ακόμα και χωρίς κώδικα, με την προϋπόθεση ότι έχει ορισμένες γνώσεις στον τομέα της ανάπτυξης ιστοσελίδων. Όμως, όσον αφορά τον ίδιο τον κώδικα HTML, μπορεί να είναι κρυπτογραφημένος. Αυτό λειτουργεί με βάση ένα ειδικό σενάριο Javascript. Με το εργαλείο μας... Σε αυτή την περίπτωση, δημιουργείται ένα ειδικό σενάριο, το οποίο προορίζεται για αποκρυπτογράφηση. Λειτουργεί πολύ απλά: όταν ένας επισκέπτης πηγαίνει στον ιστότοπό σας, φορτώνεται ένας κρυπτογραφημένος κώδικας που δεν μπορεί να καταλάβει. Την ίδια στιγμή, εκκινείται το δημιουργημένο javascript, το οποίο αποκρυπτογραφεί τον κώδικα και εμφανίζει τον ιστότοπο στην οθόνη του χρήστη. Ταυτόχρονα, ο ίδιος ο επισκέπτης δεν μπορεί να δει τον πραγματικό κωδικό. Ωστόσο, αυτή η μέθοδος έχει επίσης ένα μικρό μειονέκτημα. Υπάρχουν χρήστες των οποίων τα προγράμματα περιήγησης δεν επιτρέπουν την εκτέλεση javascript στον ιστότοπο· σε αυτήν την περίπτωση, το σενάριο δεν θα εκτελεστεί και επομένως ο κώδικας HTML δεν θα αποκρυπτογραφηθεί και ο ιστότοπος δεν θα εμφανίζεται. Αλλά μην ανησυχείτε, τέτοιες ρυθμίσεις του προγράμματος περιήγησης είναι πολύ σπάνιες, μπορούμε να πούμε ότι το 99% των προγραμμάτων περιήγησης επιτρέπουν την εκτέλεση javascript.

Πως να το κάνεις?

Αυτό μπορεί να γίνει πολύ απλά χρησιμοποιώντας το εργαλείο μας. Το μόνο που έχετε να κάνετε είναι να επικολλήσετε τον κώδικα HTML στο πεδίο αυτής της σελίδας και να κάνετε κλικ στο κουμπί για να ξεκινήσει η κρυπτογράφηση. Ως αποτέλεσμα, σε άλλο πεδίο θα λάβετε έναν ήδη κρυπτογραφημένο κωδικό που μπορεί ήδη να χρησιμοποιηθεί απευθείας στον ιστότοπό σας. Εισαγάγετε κείμενο για κρυπτογράφηση:

Σε τι χρησιμοποιείται το εργαλείο "html cryptographer";

εργαλείο" κρυπτογράφος html" θα είναι χρήσιμο για webmasters που θέλουν να προστατεύσουν τα προϊόντα λογισμικού τους από ρομπότ αναζήτησης, χάκερ και όσους θέλουν να εκμεταλλεύονται τα αποτελέσματα της δουλειάς άλλων ανθρώπων. Μιλάμε για την προστασία του κώδικα HTML, ο οποίος είναι δωρεάν διαθέσιμος στους περισσότερους πόρους και μπορεί Χρησιμοποιώντας το εργαλείο "Encoder for HTML", μπορείτε να θολώσετε (κρυπτογραφήσετε, να μπερδέψετε) τον πηγαίο κώδικα HTML χωρίς καμία επιπλέον προσπάθεια.

Στην πραγματικότητα, ένας κωδικοποιητής μπορεί να προστατεύσει οτιδήποτε εμφανίζεται σε σελίδες ιστοτόπων: κείμενα, εικόνες και άλλα στοιχεία ιστοσελίδας που δημιουργήθηκαν χρησιμοποιώντας τη γλώσσα προγραμματισμού HTML (HyperText Markup Language). Ή κωδικοί CSS (Cascading Style Sheets) - ειδικοί πίνακες στους οποίους ο κώδικας γράφεται μία φορά και αποθηκεύεται σε ξεχωριστό αρχείο.

Πως δουλεύει?

Το εργαλείο "html Encryptor" σάς επιτρέπει να μεταμορφώνετε τον πηγαίο κώδικα ενός προϊόντος λογισμικού έτσι ώστε να διατηρείται η λειτουργικότητά του και η ανάλυση και η αποκρυπτογράφηση του κώδικα από τρίτους ή ρομπότ καθίσταται σχεδόν αδύνατη.

Πρώτα απ 'όλα, ο κώδικας HTML και ο κώδικας CSS της σελίδας χρειάζονται προστασία, δηλαδή εκείνα τα προϊόντα λογισμικού που μπορεί να δει ο τελικός χρήστης στον υπολογιστή του. Φυσικά, δεν πρέπει να περιμένετε 100% προστασία κωδικού από υπηρεσίες κρυπτογράφησης, αλλά δεν θα πρέπει να κάνετε τη ζωή πιο εύκολη ούτε για τους λάτρεις του εύκολου χρήματος. Εισαγάγετε λοιπόν το κείμενο που θα κρυπτογραφηθεί στο πεδίο που βλέπετε παρακάτω και κάντε κλικ στο κουμπί «Κωδικοποίηση». Ως αποτέλεσμα, θα λάβετε νέο κείμενο, κρυπτογραφημένο μέσω JavaScript, το οποίο οι επισκέπτες του πόρου σας και τα ρομπότ αναζήτησης δεν θα μπορούν να διαβάσουν.

Αξίζει να το παίξετε με ασφάλεια και να κρυπτογραφήσετε τα πάντα;

Κατά τη γνώμη μας, είναι απαραίτητο να προστατεύσουμε όχι μόνο πολύτιμα προϊόντα λογισμικού, τα οποία είναι ακριβή πνευματική ιδιοκτησία, αλλά και απλά επιτυχημένα έργα στα οποία έχει επενδυθεί πολύς κόπος και χρόνος. Είναι απίθανο κάποιος να αντιγράψει ένα πρόγραμμα γραμμένο σύμφωνα με ένα πρότυπο. Αλλά πολλοί άνθρωποι θα θέλουν να χρησιμοποιήσουν τον «όμορφο» κώδικα ή να αντιγράψουν έναν επιτυχημένο σχεδιασμό ιστότοπου. Σε τέτοιες περιπτώσεις θα σας βοηθήσει το "εργαλείο κρυπτογράφησης html". Όταν ένας χρήστης επισκέπτεται τον ιστότοπό σας, θα βλέπει μόνο τον κρυπτογραφημένο κώδικα και "στα παρασκήνια" του προγράμματος περιήγησης, την ίδια στιγμή, η javascript θα αποκρυπτογραφήσει τον κώδικα και θα εμφανίσει τις σελίδες των πόρων στην κατάλληλη μορφή.

Αξίζει να σημειωθεί ότι αυτή η μέθοδος κρυπτογράφησης έχει τα μειονεκτήματά της. Για παράδειγμα, εάν η Javascript είναι απενεργοποιημένη στο πρόγραμμα περιήγησης του χρήστη, ο ιστότοπος δεν θα εμφανίζεται. Ευτυχώς, αυτό είναι αρκετά σπάνιο.