Πού μπορώ να βρω τον κώδικα html για τη σελίδα; Πώς να βρείτε γρήγορα την επιθυμητή ενότητα κώδικα σε αρχεία προτύπων και προσθηκών

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

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

Για χρήστες που απέχουν πολύ από την τέχνη του webmaster, προτείνω να χρησιμοποιήσετε ένα πρόγραμμα περιήγησης για αυτούς τους σκοπούς. Εφόσον χρησιμοποιώ το Chrome, θα δώσω οδηγίες με στιγμιότυπα οθόνης για το συγκεκριμένο πρόγραμμα περιήγησης. Κατ' αναλογία, μπορείτε να εργαστείτε με Opera, Yandex.Browser, Mozilla Firefox και άλλα προγράμματα περιήγησης, η αρχή των εργαλείων τους είναι παρόμοια.

Οδηγία 1: πώς να προβάλετε ολόκληρο τον κώδικα HTML ενός ιστότοπου σε ένα πρόγραμμα περιήγησης

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

Εικόνα 1. Προβολή ολόκληρου του κώδικα HTML μιας ιστοσελίδας στο πρόγραμμα περιήγησης Chrome

Σημαντικό: Οι εντολές στο αναπτυσσόμενο μενού ενδέχεται να διαφέρουν, για παράδειγμα, για ενεργά στοιχεία (σύνδεσμοι, εικόνες, βίντεο) και ανενεργά (κείμενο, φόντο, divs):

Εικόνα 2. Αναπτυσσόμενο μενού προγράμματος περιήγησης Chrome

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

Ας επιστρέψουμε στο Σχήμα 1, δείχνει την απαραίτητη εντολή για την προβολή όλου του κώδικα HTML της ιστοσελίδας προέλευσης, που ονομάζεται "Προβολή κώδικα σελίδας". Κάντε κλικ στην εντολή, θα ανοίξει μια νέα καρτέλα με τον πλήρη κώδικα της ιστοσελίδας προέλευσης, ένα μεγάλο πλεονέκτημα σε όλα - η προβολή είναι διαθέσιμη με επισήμανση σύνταξης:

Εικόνα 3. Τμήμα κώδικα αυτής της τοποθεσίας

Αυτό το εργαλείο είναι πολύ χρήσιμο για την εύρεση και την επεξεργασία των στοιχείων που αναζητάτε.

Εναλλακτικοί τρόποι προβολής όλου του κώδικα HTML μιας ιστοσελίδας

Για ταχύτερη πρόσβαση, μπορείτε να χρησιμοποιήσετε άλλους τρόπους για να καλέσετε αυτό το εργαλείο

Στο σχήμα 1 βλέπουμε επίσης ότι αυτή η εντολή είναι διαθέσιμη χρησιμοποιώντας τη συντόμευση πληκτρολογίου + ;

Επικολλήστε view-source:site στη γραμμή διευθύνσεων του προγράμματος περιήγησης αντί για τον τομέα μου, εισαγάγετε τη διεύθυνσή σας.

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

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

Χρησιμοποιώντας το συνδυασμό πλήκτρων πρόσβασης + ανοίξτε το παράθυρο αναζήτησης στο πρόγραμμα περιήγησης Chrome, εμφανίζεται επάνω δεξιά:

Εικόνα 3. Αναζήτηση κατά κωδικό τοποθεσίας

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

Εικόνα 4. Αναζήτηση βάσει κώδικα ιστότοπου HTML

Οδηγία 2: πώς να προβάλετε και να επεξεργαστείτε τον κώδικα HTML και CSS ενός ιστότοπου στο πρόγραμμα περιήγησης Google Chrome

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

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

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

Και πρόσφατα χρειάστηκε να αλλάξω το χρώμα των συνδέσμων. Έχοντας κοιτάξει μια δέσμη βιβλιογραφίας για αυτό το θέμα, συνειδητοποίησα ένα απλό πράγμα: ο καθένας δίνει παραδείγματα από τα δικά του πρότυπα, αλλά όλοι έχουμε διαφορετικά πρότυπα και είναι καλό ο κώδικας από το παράδειγμα να είναι τουλάχιστον λίγο παρόμοιος: χωρίς γκρίνια, Θα το βρω ακόμα ψάχνοντας - χρησιμοποιώντας τη μέθοδο poke.

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

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

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

Πώς να βρείτε και να αλλάξετε τον κώδικα html και css ενός ιστότοπου

Εάν δεν σας αρέσουν τα μεγάλα άρθρα, στο τέλος του άρθρου υπάρχει ένα εκπαιδευτικό βίντεο για εσάς που σας λέει πώς μπορείτε να δείτε τον κώδικα html του ιστότοπου χρησιμοποιώντας το Notepad++ και να κάνετε αλλαγές στη σχεδίαση οποιουδήποτε προτύπου χρησιμοποιώντας ένα παράδειγμα αλλάξτε το χρώμα της γραμματοσειράς. Στο βίντεο υπάρχουν και άλλες λεπτές αποχρώσεις του χειρισμού ενός ιστολογίου. Και για όσους είναι πιο κοντά και πιο κατανοητοί στο κείμενο, παρακάτω ακολουθεί μια λεπτομερής ανάλυση του θέματος με στιγμιότυπα οθόνης.
httpv://youtu.be/uIlVvwCt2ho

Όροι και έννοιες

Θα ήταν πιο ακριβές να ονομάσουμε το άρθρο "Πώς να βρείτε κώδικα css", αλλά αποφάσισα να πάω με τον "λάθος" τίτλο, γιατί βασικά η απάντηση σε αυτήν την ερώτηση βρίσκεται σε html. Το CSS και το HTML είναι πολύ διαφορετικά πράγματα, παρόλο που είναι δύο μέρη του ίδιου συστήματος. Υπάρχουν πολλά τεχνικά άρθρα στο Διαδίκτυο, εδώ θα είναι αρκετό για να καταλάβουμε ότι:

HTML - είναι υπεύθυνος για τη δομή του ιστότοπου (τι ακολουθεί τι, με ποια σειρά κ.λπ.). Αυτή είναι η βάση πάνω στην οποία δημιουργείται ο ιστότοπος. Αν το συγκρίνουμε με ένα σπίτι, τότε αυτή είναι η διαρρύθμισή του, η διάταξη των δωματίων.
Η CSS είναι υπεύθυνη για το σχεδιασμό (τι γραμματοσειρές, μεγέθη, χρώματα κ.λπ.). Αυτό είναι το γενικό στυλ του σπιτιού και το στυλ των επιμέρους δωματίων του: τι είδους ταπετσαρία θα υπάρχει, φωτιστικά, κουρτίνες, έπιπλα. Επομένως, το έγγραφο στο οποίο είναι γραμμένοι οι κωδικοί css ονομάζεται "φύλλο στυλ"

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

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

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

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

Χρειάζεται να είσαι ειδικός σε όλα;

Γίνονται συχνά συζητήσεις σε ιστολόγια SEO για το αν ένας αρχάριος πρέπει να έχει βαθιά κατανόηση της HTML ή ακόμα καλύτερα, να μάθει πώς να γράφει μόνος του ιστότοπους, ώστε όλα να είναι μοναδικά. Λοιπόν, δεν ξέρω - στον καθένα τον δικό του, και εδώ τι είναι πιο κοντά σε ποιον είναι πιο κοντά. Με ενδιαφέρει λίγο περισσότερο, οπότε τώρα μαθαίνω περισσότερα από τον Βλαντιμίρ. Τον Νοέμβριο του τρέχοντος έτους, ο Βλαντιμίρ άνοιξε το δικό του blog. Το ιστολόγιό του δημιουργήθηκε με το πιο απλό, δωρεάν πρότυπο, το τροποποίησε ελάχιστα για να ταιριάζει στον εαυτό του.

Μετά από 10 ημέρες ύπαρξης, το blog κατέλαβε την 104η θέση στην κατάταξη όλων των ιστότοπων Runet με επισκεψιμότητα περίπου 1,5 χιλιάδων ατόμων την ημέρα. Σε 10 μέρες. Ποια είναι λοιπόν η συμφωνία; Ο Vladimir είναι καλά γνώστης HTML και μπορεί να παραγγείλει και να αγοράσει ο ίδιος ένα μοναδικό πρότυπο. Θα πρέπει λοιπόν να καταλάβετε ότι το μυστικό δεν βρίσκεται στα πρότυπα, αλλά στη χρησιμότητα των πληροφοριών.

Πού είναι κρυμμένος ο κώδικας html;

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

Ανοίξτε τον ιστότοπο στο πρόγραμμα περιήγησης Google Chrome(αν δεν το χρησιμοποιείτε ακόμα, εγκαταστήστε το - είναι καλά σχεδιασμένο για εργασία με ιστότοπους, έχει πολλά ενσωματωμένα εργαλεία).

Μετακινούμε τον κέρσορα του ποντικιού πάνω από το στοιχείο που πρόκειται να αλλάξουμε. Σε αυτή την περίπτωση - το όνομα του ιστολογίου. Κάνουμε δεξί κλικ πάνω του και στο παράθυρο που εμφανίζεται επιλέγουμε ΠΡΟΒΟΛΗ ΚΩΔΙΚΟΥ ΣΤΟΙΧΕΙΟΥ.

ΣΗΜΑΝΤΙΚΟ: μην το συγχέετε με την ΠΡΟΒΟΛΗ ΤΟΥ ΚΩΔΙΚΟΥ ΣΕΛΙΔΑΣ! Δεν χρειαζόμαστε ολόκληρη τη σελίδα τώρα, μόνο ένα ξεχωριστό στοιχείο.

Κάντε κλικ σε αυτό - ένα παράθυρο προβολής κώδικα εμφανίζεται στο κάτω μέρος του προγράμματος περιήγησης:

Η γραμμή κώδικα που αλλάζουμε επισημαίνεται με κόκκινο χρώμα.

Αλλά η περιοχή που επισημαίνεται με μπλε περιέχει αυτό που ψάχνουμε. Εδώ μπορείτε να βρείτε την ακριβή (όχι κατά προσέγγιση) γραμμή κώδικα που είναι υπεύθυνη για γραμματοσειρές, χρώμα, μέγεθος, επισήμανση κ.λπ. Με αυτόν τον τρόπο μπορείτε να μάθετε ΟΠΟΙΟΔΗΠΟΤΕ κωδικό οποιουδήποτε στοιχείου οποιουδήποτε προτύπου.

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

Γενική αρχή για το πού να αναζητήσετε πράγματα:

Όνομα γραμματοσειράς - στη γραμμή FONT FAMILY

Μέγεθος γραμματοσειράς - στη γραμμή FONT SIZE

Χρώμα γραμματοσειράς - στη γραμμή COLOR

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

ΠΡΟΣΟΧΗ:

Η γραμμή που θα αντιγράψουμε επισημαίνεται με κόκκινο χρώμα στο σχήμα,

ώστε να μπορείτε αργότερα να το βρείτε στο φύλλο στυλ.

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

#header h1 a, #header h1 a:visited (

Βρείτε την απαιτούμενη γραμμή στο αρχείο «φύλλο στυλ (style.css)». Αυτό έχει γίνει ήδη στον πίνακα διαχείρισης. Ζητώ θερμά, ενώ δεν υπάρχει εμπιστοσύνη και πλήρης κατανόηση, όλα τα πειράματα θα πρέπει να διεξάγονται σε έναν δοκιμαστικό υποτομέα προκειμένου να αποκλειστεί το .

Λοιπόν, μεταβείτε στον πίνακα διαχείρισης: ΚΟΝΣΟΛΑ - ΕΜΦΑΝΙΣΗ - EDITOR. Στη δεξιά πλαϊνή μπάρα βρίσκουμε το αρχείο STYLE TABLE (STYLE.CSS), ανοίξτε το.

Τώρα ανοίξτε τη γραμμή αναζήτησης χρησιμοποιώντας τα πλήκτρα CTRL + F: μια κενή γραμμή-παράθυρο θα εμφανιστεί στο επάνω παράθυρο. Επικολλάμε σε αυτό τη γραμμή που αντιγράψαμε στο βήμα 4.

Και θα δείτε πώς θα τονιστεί αυτή η γραμμή στο φύλλο στυλ (με πορτοκαλί στην εικόνα):

Κάνουμε μια αλλαγή στο στοιχείο. Στην περίπτωσή μας, αλλάζουμε το χρώμα της γραμματοσειράς, οπότε στη γραμμή COLOR αντικαθιστούμε μια άλλη τιμή - το χρώμα που θέλουμε. Στο παράδειγμα, το χρώμα είναι μαύρο, η σημασία του είναι:

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

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

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

Πιο αναλυτικά, πώς να αλλάξετε ορισμένα στοιχεία:

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

Προτείνω να παρακολουθήσετε το βίντεο του Artem Abramovich σχετικά με τον τρόπο αναζήτησης και εύρεσης οποιασδήποτε λέξης ή στοιχείου σε οποιοδήποτε θέμα/πρότυπο, για οποιαδήποτε μηχανή (wordpress, joomla κ.λπ.) και να το αντικαταστήσετε με αυτό που χρειάζεστε:

Παρακαλώ κοινοποιήστε αν σας άρεσε:

Μπορεί επίσης να σας ενδιαφέρει να μάθετε:

Αυτό το τελευταίο άρθρο έχει γραφτεί για να καλύψει τις πιο πρόσφατες πληροφορίες σχετικά με την κατάργηση περιττών συνδέσμων από πρότυπα Blogspot, καθώς και νέα θέματα του Blogger. Όπως γνωρίζετε, υπήρξαν αλλαγές στους κωδικούς του Blogger το 2018, οπότε πολλές ενέργειες με τον κώδικα πρέπει να γίνουν με νέο τρόπο. Επιπλέον, έχουν εμφανιστεί νέα θέματα που διαμορφώνονται διαφορετικά. Σε σχέση με αυτές τις αλλαγές, θα συζητήσουμε το θέμα της κατάργησης συνδέσμων.
Μπορείτε να ελέγξετε το ιστολόγιό σας για την παρουσία εξωτερικών συνδέσμων στις υπηρεσίες https://pr-cy.ru/link_extractor/ και https://seolik.ru/links. Μην ξεχνάτε ότι πρέπει να ελέγχετε όχι μόνο την κύρια σελίδα του ιστολογίου, αλλά και τη σελίδα αναρτήσεων και τη Σελίδα. Ένας μεγάλος αριθμός εξωτερικών συνδέσμων που είναι ανοιχτοί για δημιουργία ευρετηρίου αποτρέπει το .

Πώς να αφαιρέσετε συνδέσμους από το παλιό τυπικό πρότυπο Blogger Χρησιμοποιώντας το απλό πρότυπο ως παράδειγμα.
Τέτοια πρότυπα δίνουν τους περισσότερους εξωτερικούς συνδέσμους. Στο δοκιμαστικό μου ιστολόγιο, όταν εγκατέστησα ένα απλό θέμα, έλεγξα ότι υπήρχαν 25 εξωτερικοί σύνδεσμοι στην κύρια σελίδα, εκ των οποίων οι 14 είχαν ευρετηριαστεί.
Σας υπενθυμίζω ότι πριν κάνετε αλλαγές στον κώδικα του προτύπου, κάντε ένα αντίγραφο ασφαλείας!

Κατάργηση συνδέσμου στο Blogger - https://www.blogger.com/.Αυτός ο σύνδεσμος περιέχεται στο γραφικό στοιχείο Attribution. Στην καρτέλα "Σχεδίαση ιστολογίου", εμφανίζεται ως το gadget Attribution και . Για να το αφαιρέσετε, μεταβείτε στην καρτέλα "Θέμα" -> επεξεργασία HTML. Αναζητώντας γραφικά στοιχεία (λίστα γραφικών στοιχείων), βρίσκουμε το Attribution1 και διαγράφουμε όλο τον κώδικα μαζί με την ενότητα υποσέλιδου στην οποία περικλείεται. Ο κώδικας που αφαιρέθηκε μοιάζει με σύμπτυξη:

Και εδώ είναι ο πλήρης κωδικός:

Αποθηκεύστε τις αλλαγές και ελέγξτε το ιστολόγιο για Attribution.

Φυσικά, έχετε δει τα εικονίδια "Wrench and Screwdriver" στο ιστολόγιό σας για γρήγορη επεξεργασία widget. Κάθε τέτοιο εικονίδιο φέρει μαζί του έναν εξωτερικό σύνδεσμο προς το Blogger. Τώρα έχουν κλείσει με την ετικέτα nofollow, αλλά πρέπει ακόμα να τα ξεφορτωθείτε. Θα επεξεργαστείτε γραφικά στοιχεία στην καρτέλα Σχεδίαση.
Ακολουθεί μια ελλιπής λίστα με συνδέσμους που είναι κρυπτογραφημένοι στα εικονίδια με το κλειδί (το αναγνωριστικό ιστολογίου θα είναι δικό σας)
- Γραφικό στοιχείο HTML1: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML1&action=editWidget§ionId=header
- Γραφικό στοιχείο HTML2 http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML2&action=editWidget§ionId=header
- Blog Archive: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget§ionId=main
- Συντομεύσεις ιστολογίου: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=Label&widgetId=Label1&action=editWidget§ionId=main
- Δημοφιλή μηνύματα: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=PopularPosts&widgetId=PopularPosts2&action=editWidget§ionId=main
Είναι εύκολο να απαλλαγείτε από όλους αυτούς τους συνδέσμους. Βρείτε την ετικέτα στο πρότυπο του ιστολογίου σας. Εμφανίζεται όσες φορές υπάρχουν γραφικά στοιχεία στο ιστολόγιό σας. Καταργήστε όλες τις εμφανίσεις της ετικέτας.

Καταργούμε συνδέσμους για να επεξεργαστούμε γρήγορα μια καταχώριση ιστολογίου (το εικονίδιο "Μολύβι"). Διευκολύνει την επεξεργασία αναρτήσεων, αλλά αποτελεί απειλή ως εξωτερικός σύνδεσμος όπως: https://www.blogger.com/post-edit.g?blogID=1490203873741752013&postID=4979812525036427892&from=pencil
Πώς να διαγράψετε:
Μέθοδος 1. Στην καρτέλα Σχεδίαση, επεξεργαστείτε το στοιχείο "Αναρτήσεις ιστολογίου" και αποεπιλέξτε το πλαίσιο ελέγχου "Εμφάνιση "Γρήγορη επεξεργασία"".
Μέθοδος 2. Βρείτε την ετικέτα στο πρότυπο ιστολογίου σας και αφαιρέστε την. Αποθηκεύστε τις αλλαγές σας και ελέγξτε το ιστολόγιό σας για το εικονίδιο και τον σύνδεσμο.

Καταργήστε το Navbar. Αναζητήστε γραφικά στοιχεία στο πρότυπο html ιστολογίου Navbar1 και αφαιρέστε όλο τον κώδικα μαζί με την ενότητα.

Και συγκεκριμένα:

συνάρτηση setAttributeOnload(αντικείμενο, χαρακτηριστικό, val) (
if(window.addEventListener) (
window.addEventListener("load",
function())( object = val; ), false);
) άλλο (
window.attachEvent("onload", function())( object = val; ));
}
}

gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() (
if (gapi.iframes && gapi.iframes.getContext) (
gapi.iframes.getContext().openChild((
url: "https://www.blogger.com/navbar.g?targetBlogID\x3d1490203873741752013\x26blogName\x3dnew\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26\x3873741752013 x26searchRoot \x3dhttps://m-ynewblog.blogspot.com /search\x26blogLocale\x3dru\x26v\x3d2\x26homepageUrl\x3dhttps://m-ynewblog.blogspot.com/\x26vt\x3d-3989465016614688571",
όπου: document.getElementById("navbar-iframe-container"),
id: "navbar-iframe"
});
}
});

(λειτουργία() (
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "//pagead2.googlesyndication.com/pagead/js/google_top_exp.js";
var head = document.getElementsByTagName("head");
αν (κεφάλι) (
head.appendChild(script);
}})();

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

Καταργήστε εξωτερικούς συνδέσμους σε εικόνες. Όταν ανεβάζετε εικόνες σε μια ανάρτηση ιστολογίου, ένας σύνδεσμος ενσωματώνεται αυτόματα στην εικόνα. Για να αφαιρέσετε τέτοιους συνδέσμους, πρέπει να επεξεργαστείτε όλες τις καταχωρήσεις ιστολογίου. Στη λειτουργία «Προβολή» και μετά στο εικονίδιο «Σύνδεσμος». Εάν η εικόνα δεν περιέχει εξωτερικό σύνδεσμο, τότε όταν κάνετε κλικ στη φωτογραφία στο πρόγραμμα επεξεργασίας ανάρτησης, το εικονίδιο "Σύνδεσμος" δεν είναι ενεργό (το εικονίδιο δεν επισημαίνεται).

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

Κλείστε τον σύνδεσμο από το γραφικό στοιχείο " " από την ευρετηρίαση με την ετικέτα nofollow. Εάν χρησιμοποιείτε το γραφικό στοιχείο "προφίλ" στο ιστολόγιό σας, χρησιμοποιήστε μια γρήγορη αναζήτηση για γραφικά στοιχεία στο πρότυπο ιστολογίου για να βρείτε τον κώδικα για το gadget Profile1. Πρέπει να επεξεργαστείτε τον κώδικα του γραφικού στοιχείου, αντικαθιστώντας το rel='author' με το σε δύο σημεία και προσθέτοντας το σε δύο συνδέσμους. Θα πρέπει να λάβετε κάτι σαν το στιγμιότυπο οθόνης:

Δημιουργήθηκε χρησιμοποιώντας το παράδειγμα επεξεργασίας προφίλ Google Plus. Υπενθυμίζουμε ότι το Google Plus θα διακοπεί στις 2 Απριλίου 2019. Αντίστοιχα, μετά από αυτήν την ημερομηνία, θα πρέπει να κάνετε άλλες αλλαγές στον κώδικα του γραφικού στοιχείου "Σχετικά με εμένα".

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

Στις Ρυθμίσεις ιστολογίου, ακολουθήστε τη διαδρομή Ρυθμίσεις ιστολογίου -> Άλλο -> Τροφοδοσία ιστότοπου -> Να επιτρέπεται η τροφοδοσία ιστολογίου, εφαρμόστε τις ακόλουθες ρυθμίσεις:

Καταργήστε εξωτερικούς συνδέσμους από το νέο τυπικό πρότυπο Blogger Χρησιμοποιώντας το θέμα Σημαντικό ως παράδειγμα

Κατάργηση απόδοσης (σύνδεσμος παρακάτω – Blogger Technologies)
Βρίσκουμε το Attribution1 στο πρότυπο ιστολογίου για αναζήτηση κατά γραφικά στοιχεία (λίστα γραφικών στοιχείων) και διαγράφουμε τον κώδικα μαζί με την ενότητα, παρόμοια με το παλιό πρότυπο του Blogger (βλ. παραπάνω 1).

Καταργούμε τον σύνδεσμο από το γραφικό στοιχείο "Αναφορά κατάχρησης". Αυτό είναι το γραφικό στοιχείο ReportAbuse1. Βρίσκουμε στην αναζήτηση για widget:
Ολόκληρος ο κώδικας μοιάζει με αυτό:

Ελέγχουμε τη σελίδα ανάρτησης ιστολογίου με σχόλια και αφαιρούμε συνδέσμους κατ' αναλογία με τα παλιά πρότυπα ιστολογίου (βλ. παραπάνω - σημείο 8).

Αφαιρούμε συνδέσμους από αναρτήσεις ιστολογίου που είναι ενσωματωμένοι στις εικόνες των αναρτήσεων (βλ. σημείο 5).

Κυκλοφόρησε ένα νέο βιβλίο, το 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 περιλαμβάνει ετικέτες δομής. Εδώ είναι μερικά από αυτά:

Html – ολόκληρο το έγγραφο.

Επικεφαλής – κεφαλίδες τμήματος υπηρεσιών.

Τίτλος – τίτλος σελίδας (εμφανίζεται στην καρτέλα).

Body – το σώμα του εγγράφου.

H1-H6 – επικεφαλίδες κειμένου σελίδας.

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

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

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

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

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

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

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

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

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

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

Περίληψη

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

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

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

Φυσικά, μπορείτε να συμμετάσχετε σε μια βαθιά μελέτη όλων αυτών των περιπλοκών της κατασκευής ιστοτόπων, αλλά ενώ δεν υπάρχουν προοπτικές στον ορίζοντα καθαυτές, τίθεται ένα άλλο λογικό ερώτημα: το χρειάζεστε;

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

HTML και CSS - σχέση

Στην πραγματικότητα, το θέμα θα πρέπει να ονομάζεται κάπως έτσι: "Πώς να επεξεργαστείτε τον κώδικα CSS." Λοιπόν, εντάξει, θα ξεκινήσουμε με HTML και θα τελειώσουμε με CSS. Το θέμα είναι ότι εάν είναι απαραίτητο να αλλάξετε το χρώμα ή τη γραμματοσειρά του ιστότοπου, τα ψίχουλα οδηγούν σε αρχεία CSS.

Ας ορίσουμε πρώτα αυτές τις δύο έννοιες:

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

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

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

Πού βρίσκεται ο κώδικας html της σελίδας;

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

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

Πώς να αλλάξετε το στυλ κεφαλίδας

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

Στην κορυφή του, έχω επισημάνει τον κώδικα HTML που είναι υπεύθυνος για την εμφάνιση της κεφαλίδας h1. Από προεπιλογή, κατά τον έλεγχο, επισημαίνεται με γκρι φόντο. Λοιπόν, εντάξει, αυτό είναι για γενικές πληροφορίες. Πρέπει να δώσουμε προσοχή στο κάτω μέρος του στιγμιότυπου οθόνης, όπου βρίσκονται τα σενάρια που είναι υπεύθυνα για την έξοδο στυλ CSS. Θέλω να σας προειδοποιήσω αμέσως ότι ανάλογα με το πρότυπο, το όνομα του αρχείου CSS μπορεί να διαφέρει, αλλά, κατά κανόνα, είναι style.css ή template.css.

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

Σημαντικό σημείο!

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

Μερικές ιδιότητες CSS

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

Μέγεθος γραμματοσειράς – αλλάξτε το μέγεθος του κειμένου.

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

Font-family – οικογένεια γραμματοσειρών.

Βάρος γραμματοσειράς – επιλογή.

Χρώμα – χρώμα κειμένου. Εάν δεν έχει αλλάξει τίποτα μετά την προσαρμογή, διαγράψτε την προσωρινή μνήμη του προγράμματος περιήγησής σας. Όπως μπορείτε να δείτε, για να αλλάξετεεμφάνιση

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

Βρήκατε κάποιο γραμματικό λάθος στο κείμενο; Αναφέρετε αυτό στον διαχειριστή: επιλέξτε το κείμενο και πατήστε το συνδυασμό πλήκτρων πρόσβασης Ctrl+Enter