Google Chrome - εργαλεία για webmasters. Πώς να ανοίξετε γρήγορα έναν κώδικα σελίδας σε ένα πρόγραμμα περιήγησης, ακόμα κι αν απαγορεύεται η αντιγραφή

27.09.2019

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

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

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

Γιατί να αλλάξετε μια ιστοσελίδα;

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

Μετά:

Για παράδειγμα, θα πάρω τον ίδιο ιστότοπο και θα αλλάξω την προηγούμενη ανακοίνωση του άρθρου «Άνοιγμα της κύριας σελίδας στο Google Chrome. Κάνω δεξί κλικ στο στοιχείο που θέλω να αλλάξω, για παράδειγμα, τον τίτλο της ανακοίνωσης και επιλέγω «Προβολή κωδικού».

Στο παράθυρο που ανοίγει, μεταβείτε στην καρτέλα Στοιχεία και δείτε τον κώδικα HTML της σελίδας. Σε αυτό πρέπει να βρούμε το κείμενο που μας ενδιαφέρει. (υπογραμμίζεται με κόκκινο)

Τώρα θα διαγράψω το παλιό κείμενο και θα γράψω σε νέο.

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

Μπορείτε να εισαγάγετε μια άλλη εικόνα αλλάζοντας το χαρακτηριστικό src στην ετικέτα img.

Για πολύ καιρό, η επιλογή "εμφάνιση πηγής σελίδας" ήταν άχρηστη και χωρίς ενδιαφέρον για μένα. Μέχρι στιγμής, η εκμάθηση HTML στο Codecademy και ο σχεδιασμός των δικών μου ιστοσελίδων δεν έχει εξελιχθεί στο νέο μου χόμπι. Εδώ προέκυψε το ερώτημα: πού να βρείτε πραγματικές υποθέσεις και να δανειστείτε ενδιαφέρουσες λύσεις για τον «κουμπαρά» σας; Η απάντηση ήταν απροσδόκητα απλή, όπως όλα τα έξυπνα πράγματα: κοιτάξτε τον πηγαίο κώδικα της σελίδας στο Google Chrome! Μοιράζομαι μαζί σας τα σεμνά ευρήματά μου.

Τι είναι ο πηγαίος κώδικας της σελίδας

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

Ο πηγαίος κώδικας, γνωστός και ως κώδικας σελίδας HTML, είναι κείμενο σε γλώσσα σήμανσης υπερκειμένου (HTML). Περιλαμβάνει το πραγματικό περιεχόμενο της σελίδας (κείμενο, πίνακες) και ετικέτες. Οι τελευταίες λειτουργούν ως οδηγίες για το πρόγραμμα περιήγησης: πώς να εμφανίσετε περιεχόμενο, τι τύπο μορφοποίησης να χρησιμοποιήσετε, πού να εισαγάγετε μια υπερ-σύνδεση ή ένα αρχείο πολυμέσων. Λοιπόν, για εμάς, τους αρχάριους προγραμματιστές, ο πηγαίος κώδικας είναι το καλύτερο έδαφος εκπαίδευσης: βρίσκουμε έναν ενδιαφέρον ιστότοπο και τον κατασκοπεύουμε, τον αποθηκεύουμε και χρησιμοποιούμε επιτυχημένα κομμάτια. Πως;

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

Βρείτε τη σελίδα που σας αρέσει. Για παράδειγμα, με ενδιέφερε ο σχεδιασμός του μενού του ιστότοπου. Υπάρχουν τρεις τρόποι για να ανοίξετε τον πηγαίο κώδικα στο πρόγραμμα περιήγησης Google Chrome:

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

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

Πώς να επεξεργαστείτε και να αποθηκεύσετε τον πηγαίο κώδικα

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

Επιλογή 1. "Χειροκίνητα"

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

Επιλογή 2. Για τους επαγγελματίες

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

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

Παράδειγμα 4.1. Πηγαίος κώδικας ιστοσελίδας

Παράδειγμα ιστοσελίδας

Επικεφαλίδα

Πρώτη παράγραφος.

Δεύτερη παράγραφος.

Αντιγράψτε τα περιεχόμενα αυτού του παραδείγματος και αποθηκεύστε το στο φάκελο c:\www\ ως example41.html. Μετά από αυτό, εκκινήστε το πρόγραμμα περιήγησης και ανοίξτε το αρχείο μέσω του στοιχείου μενού Αρχείο > Άνοιγμα αρχείου (Ctrl+O). Στο παράθυρο διαλόγου επιλογής εγγράφου, επιλέξτε το αρχείο example41.html. Η ιστοσελίδα που φαίνεται στην Εικ. 1 θα ανοίξει στο πρόγραμμα περιήγησης. 4.1.

Ρύζι. 4.1. Αποτέλεσμα εκτέλεσης του παραδείγματος

Στοιχείοπροορίζεται να υποδείξει τον τύπο του τρέχοντος εγγράφου - DTD (ορισμός τύπου εγγράφου, περιγραφή του τύπου εγγράφου). Αυτό είναι απαραίτητο για να κατανοήσει το πρόγραμμα περιήγησης πώς να ερμηνεύει την τρέχουσα ιστοσελίδα, επειδή η HTML υπάρχει σε πολλές εκδόσεις, επιπλέον, υπάρχει η XHTML (EXtensible HyperText Markup Language), η οποία είναι παρόμοια με την HTML, αλλά διαφέρει από αυτήν στη σύνταξη. Για να "μην μπερδευτεί" το πρόγραμμα περιήγησης και να καταλάβει σύμφωνα με ποιο πρότυπο να εμφανιστεί η ιστοσελίδα, είναι απαραίτητο να οριστεί στην πρώτη γραμμή κώδικα .

Υπάρχουν διάφοροι τύποι, διαφέρουν ανάλογα με την έκδοση του HTML που στοχεύουν. Στον πίνακα 4.1. Δίνονται οι κύριοι τύποι εγγράφων με τις περιγραφές τους.

Τραπέζι 4.1. Έγκυρα DTD

DOCTYPE	Περιγραφή
HTML 4.01
	Αυστηρή σύνταξη HTML.
	Μεταβατική σύνταξη HTML.
	Ένα έγγραφο HTML χρησιμοποιεί πλαίσια.
HTML 5
	Αυτή η έκδοση του HTML έχει μόνο ένα doctype.
XHTML 1.0
	Αυστηρή σύνταξη XHTML.
	Μεταβατική σύνταξη XHTML.
	Το έγγραφο είναι γραμμένο σε XHTML και περιέχει πλαίσια.
XHTML 1.1
	Οι προγραμματιστές της XHTML 1.1 αναμένουν ότι θα αντικαταστήσει σταδιακά την HTML. Όπως μπορείτε να δείτε, αυτός ο ορισμός δεν χωρίζεται σε τύπους, αφού η σύνταξη είναι ίδια και υπακούει σε σαφείς κανόνες.

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

Για παράδειγμα, σε αυστηρά HTML και XHTML απαιτείται η παρουσία της ετικέτας , και σε μεταβατικό HTML μπορεί να παραλειφθεί και να μην καθοριστεί. Ταυτόχρονα, θυμόμαστε ότι το πρόγραμμα περιήγησης θα εμφανίζει το έγγραφο σε κάθε περίπτωση, ανεξάρτητα από το αν ταιριάζει με τη σύνταξη ή όχι. Αυτός ο έλεγχος πραγματοποιείται με χρήση εργαλείου επικύρωσης και προορίζεται κυρίως για τους προγραμματιστές να παρακολουθούν σφάλματα στο έγγραφο.</p> <p>Στο μέλλον θα χρησιμοποιούμε κυρίως αυστηρές<!DOCTYPE>, εκτός αν ορίζεται διαφορετικά. Αυτό θα μας επιτρέψει να αποφύγουμε κοινά λάθη και θα μας μάθει να γράφουμε συντακτικά σωστό κώδικα.</p> <p>Μπορείτε συχνά να βρείτε κώδικα HTML χωρίς να χρησιμοποιήσετε κανέναν<!DOCTYPE>, η ιστοσελίδα θα εξακολουθεί να εμφανίζεται σε αυτήν την περίπτωση. Ωστόσο, μπορεί να συμβεί το ίδιο έγγραφο να εμφανίζεται διαφορετικά στο πρόγραμμα περιήγησης όταν χρησιμοποιείτε<!DOCTYPE>και χωρίς αυτό. Επιπλέον, τα προγράμματα περιήγησης μπορούν να εμφανίζουν τέτοια έγγραφα με τον δικό τους τρόπο, με αποτέλεσμα η σελίδα να "θρυμματίζεται", δηλ. θα εμφανίζεται εντελώς διαφορετικά από αυτό που απαιτεί ο προγραμματιστής. Για να αποφύγετε τέτοιες καταστάσεις, πάντα προσθέτετε<!DOCTYPE>στην αρχή του εγγράφου.</p><p>Ετικέτα <html>ορίζει την αρχή του αρχείου HTML, η κεφαλίδα αποθηκεύεται μέσα σε αυτό ( <head>) και σώμα εγγράφου ( <body> ).</p><p>Τίτλος εγγράφου, που ονομάζεται επίσης μπλοκ <head>, μπορεί να περιέχει κείμενο και ετικέτες, αλλά το περιεχόμενο αυτής της ενότητας δεν εμφανίζεται απευθείας στη σελίδα, εκτός από το κοντέινερ <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Ετικέτα <meta>είναι καθολική και προσθέτει μια ολόκληρη κατηγορία δυνατοτήτων, συγκεκριμένα, με τη βοήθεια μετα-ετικέτες, όπως ονομάζεται γενικά αυτή η ετικέτα, μπορείτε να αλλάξετε την κωδικοποίηση της σελίδας, να προσθέσετε λέξεις-κλειδιά, περιγραφή εγγράφου και πολλά άλλα. Για να καταλάβει το πρόγραμμα περιήγησης ότι έχει να κάνει με κωδικοποίηση UTF-8 (μορφή μετασχηματισμού Unicode, μορφή μετασχηματισμού Unicode) και αυτή η γραμμή προστίθεται.</p><p> <title>Παράδειγμα ιστοσελίδας

Ετικέτα καθορίζει τον τίτλο μιας ιστοσελίδας αυτό είναι ένα από τα σημαντικά στοιχεία που έχουν σχεδιαστεί για την επίλυση πολλών προβλημάτων. Στο λειτουργικό σύστημα Windows, το κείμενο τίτλου εμφανίζεται στην επάνω αριστερή γωνία του παραθύρου του προγράμματος περιήγησης (Εικόνα 4.2).</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>Ρύζι. 4.2. Προβολή κεφαλίδας στο πρόγραμμα περιήγησης</p> <p>Ετικέτα <title>είναι υποχρεωτική και πρέπει οπωσδήποτε να υπάρχει στον κωδικό του εγγράφου.</p><p>Πρέπει να προσθέσετε μια ετικέτα κλεισίματος</head>για να υποδείξετε ότι το μπλοκ τίτλου εγγράφου έχει ολοκληρωθεί.</p><p>Σώμα εγγράφου <body>προορίζεται για την τοποθέτηση ετικετών και περιεχομένου μιας ιστοσελίδας.</p><p> <h1>Επικεφαλίδα</h1> </p><p>Η HTML προσφέρει έξι επικεφαλίδες κειμένου διαφορετικών επιπέδων που υποδεικνύουν τη σχετική σημασία της ενότητας που ακολουθεί την επικεφαλίδα. Ναι, tag <h1>αντιπροσωπεύει την πιο σημαντική επικεφαλίδα πρώτου επιπέδου και την ετικέτα <h6>χρησιμεύει για να υποδείξει την επικεφαλίδα έκτου επιπέδου και είναι η λιγότερο σημαντική. Από προεπιλογή, η επικεφαλίδα πρώτου επιπέδου εμφανίζεται με τη μεγαλύτερη έντονη γραμματοσειρά και οι επόμενες επικεφαλίδες επιπέδου έχουν μικρότερο μέγεθος. Ετικέτες <h1>...<h6>Ανατρέξτε στα στοιχεία μπλοκ, ξεκινούν πάντα από μια νέα γραμμή και μετά από αυτά, άλλα στοιχεία εμφανίζονται στην επόμενη γραμμή. Επιπλέον, προστίθεται λευκό διάστημα πριν και μετά τον τίτλο.</p><p>  </p><p>Κάποιο κείμενο μπορεί να μην εμφανίζεται στο πρόγραμμα περιήγησης κάνοντας το σχόλιο. Παρόλο που αυτό το κείμενο δεν θα είναι ορατό από τον χρήστη, θα εξακολουθήσει να μεταδίδεται στο έγγραφο, επομένως αν κοιτάξετε τον πηγαίο κώδικα, μπορείτε να ανακαλύψετε κρυφές σημειώσεις.</p> <p>Πρέπει να δείτε γρήγορα όλες τις αλλαγές στον ίδιο τον ιστότοπο, χωρίς να επηρεάζετε τα αρχεία και τον κώδικα του ιστότοπου που δημοσιεύονται στο Διαδίκτυο. Για παράδειγμα, αλλάξτε το συνδυασμό χρωμάτων ενός μπλοκ, μετακινήστε ένα στοιχείο που έχει μετακινηθεί κ.λπ.</p> <p>Για να γίνει αυτό, πολλοί webmasters χρησιμοποιούν τοπικούς διακομιστές Denwer ή OpenServer, εκτελώντας ένα πλήρες αντίγραφο του ιστότοπου στον υπολογιστή τους. Αυτή η μέθοδος είναι καθολική και κατάλληλη για επαγγελματίες, μπορεί να χρησιμοποιηθεί για να δοκιμάσει τη λειτουργία διαφόρων σεναρίων και προσθηκών, να πειραματιστεί με την αλλαγή του σχεδιασμού και να επεξεργαστεί όλα τα αρχεία του ιστότοπου και μετά τη δοκιμή, να μεταφέρει τις κατάλληλες αλλαγές απευθείας στον ιστότοπο.</p> <p>Για χρήστες που απέχουν πολύ από την τέχνη του webmaster, προτείνω να χρησιμοποιήσετε ένα πρόγραμμα περιήγησης για αυτούς τους σκοπούς. Εφόσον χρησιμοποιώ το Chrome, θα δώσω οδηγίες με στιγμιότυπα οθόνης για το συγκεκριμένο πρόγραμμα περιήγησης. Κατ' αναλογία, μπορείτε να εργαστείτε με Opera, Yandex Browser, Mozilla Firefox και άλλα προγράμματα περιήγησης, η αρχή των εργαλείων τους είναι παρόμοια.</p> <h2>Οδηγία 1: πώς να προβάλετε ολόκληρο τον κώδικα HTML ενός ιστότοπου σε ένα πρόγραμμα περιήγησης</h2> <p>Ανοίξτε την απαιτούμενη ιστοσελίδα του ιστότοπού σας. Κάντε δεξί κλικ στο απαιτούμενο στοιχείο, θα εμφανιστεί ένα αναπτυσσόμενο μενού με βάση τα συμφραζόμενα του προγράμματος περιήγησης με διαθέσιμες εντολές:</p> <p>Εικόνα 1. Προβολή ολόκληρου του κώδικα HTML μιας ιστοσελίδας στο πρόγραμμα περιήγησης Chrome</p> <p><b>Σπουδαίος:</b>Οι εντολές στο αναπτυσσόμενο μενού ενδέχεται να διαφέρουν, για παράδειγμα, για ενεργά στοιχεία (σύνδεσμοι, εικόνες, βίντεο) και ανενεργά (κείμενο, φόντο, divs):</p> <p><img src='https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%92%D1%8B%D0%BF%D0%B0%D0%B4%D0%B0%D1%8E%D1%89%D0%B5%D0%B5-%D0%BC%D0%B5%D0%BD%D1%8E-%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0-Chrome.jpg' width="100%" loading=lazy loading=lazy></p><p>Εικόνα 2. Αναπτυσσόμενο μενού προγράμματος περιήγησης Chrome</p> <p>Επομένως, εάν δεν βρείτε την εντολή που χρειάζεστε, απλώς κάντε δεξί κλικ κάπου αλλού ή χρησιμοποιήστε τα πλήκτρα πρόσβασης του προγράμματος περιήγησής σας.</p> <p>Ας επιστρέψουμε στο σχήμα 1, δείχνει την απαραίτητη εντολή για την προβολή όλου του κώδικα HTML της ιστοσελίδας προέλευσης, ονομάζεται " <b>Προβολή κώδικα σελίδας</b>". Κάντε κλικ στην εντολή, θα ανοίξει μια νέα καρτέλα με τον πλήρη κώδικα της ιστοσελίδας προέλευσης, ένα μεγάλο πλεονέκτημα σε όλα - η προβολή είναι διαθέσιμη με επισήμανση σύνταξης:</p> <p><img src='https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%A4%D1%80%D0%B0%D0%B3%D0%BC%D0%B5%D0%BD%D1%82-%D0%BA%D0%BE%D0%B4%D0%B0-%D1%81%D0%B0%D0%B9%D1%82%D0%B0.jpg' width="100%" loading=lazy loading=lazy></p><p>Εικόνα 3. Τμήμα κώδικα αυτής της τοποθεσίας</p> <p>Αυτό το εργαλείο είναι πολύ χρήσιμο για την εύρεση και την επεξεργασία των στοιχείων που αναζητάτε.</p> <h3>Εναλλακτικοί τρόποι προβολής όλου του κώδικα HTML μιας ιστοσελίδας</h3> <p>Για ταχύτερη πρόσβαση, μπορείτε να χρησιμοποιήσετε άλλους τρόπους για να καλέσετε αυτό το εργαλείο</p> <ol><li>Στο σχήμα 1 βλέπουμε επίσης ότι αυτή η εντολή είναι διαθέσιμη μέσω συντόμευσης πληκτρολογίου <Ctrl>+<U> ;</li> <li>Επικολλήστε view-source:site στη γραμμή διευθύνσεων του προγράμματος περιήγησης αντί για τον τομέα μου, εισαγάγετε τη διεύθυνσή σας.</li> </ol><p>Και οι δύο μέθοδοι είναι καθολικές και θα πρέπει να λειτουργούν σε όλα τα προγράμματα περιήγησης.</p> <p>Στην αρχή, ορισμένοι μπορεί να πιστεύουν ότι αυτό δεν είναι καθόλου απαραίτητο εργαλείο, αλλά η προβολή ολόκληρου του κώδικα HTML ενός ιστότοπου είναι εξαιρετική για την εύρεση των απαραίτητων στοιχείων στον κώδικα, αυτά μπορεί να είναι σύνδεσμοι, ετικέτες, μετα-ετικέτες, χαρακτηριστικά και άλλα στοιχεία .</p> <p>Συνδυασμός πλήκτρων πρόσβασης <Ctrl>+<F>ανοίξτε το παράθυρο αναζήτησης, στο πρόγραμμα περιήγησης Chrome εμφανίζεται πάνω δεξιά:</p> <p><img src='https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%BF%D0%BE%D0%B8%D1%81%D0%BA-%D0%BF%D0%BE-%D0%BA%D0%BE%D0%B4%D1%83-%D1%81%D0%B0%D0%B9%D1%82%D1%83.jpg' width="100%" loading=lazy loading=lazy></p><p>Εικόνα 3. Αναζήτηση κατά κωδικό τοποθεσίας</p> <p>Αφού εισαγάγετε ένα αίτημα στη φόρμα αναζήτησης, η οθόνη θα μετακινηθεί στο πρώτο στοιχείο που βρέθηκε, χρησιμοποιώντας τα βέλη μπορείτε να μετακινηθείτε μεταξύ τους και να επιλέξετε αυτό που χρειάζεστε:</p> <p><img src='https://i0.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%9F%D0%BE%D0%B8%D1%81%D0%BA-%D0%BF%D0%BE-HTML-%D0%BA%D0%BE%D0%B4%D1%83-%D1%81%D0%B0%D0%B9%D1%82%D0%B0.jpg' width="100%" loading=lazy loading=lazy></p><p>Εικόνα 4. Αναζήτηση βάσει κώδικα ιστότοπου HTML</p> <h2>Οδηγία 2: πώς να προβάλετε και να επεξεργαστείτε τον κώδικα HTML και CSS ενός ιστότοπου στο πρόγραμμα περιήγησης Google Chrome</h2> <p>Τώρα το πιο σημαντικό μέρος, στο οποίο θα δείξω πώς μπορείτε να επεξεργαστείτε τον κώδικα HTML και CSS ενός ιστότοπου σε ένα πρόγραμμα περιήγησης. στη συνέχεια μεταφέρετε τις αλλαγές στο πρόγραμμα περιήγησης.</p> <br><img src='https://i1.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%9A%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%B0-%D0%9F%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80%D0%B5%D1%82%D1%8C-%D0%BA%D0%BE%D0%B4.jpg' width="100%" loading=lazy loading=lazy><p>Αυτό το χρήσιμο εργαλείο είναι πάντα διαθέσιμο στο πρόγραμμα περιήγησής σας, πειραματιστείτε με άλλες εντολές που θα σας διευκολύνουν να επεξεργαστείτε τον ιστότοπό σας.</p> 1 ψήφος <p>Καλημέρα, αγαπητοί αναγνώστες του ιστολογίου μου. Μερικές φορές βρίσκετε κάποια όμορφη λειτουργία σε έναν ιστότοπο και αρχίζετε να αναρωτιέστε πώς ο δημιουργός πέτυχε ένα τόσο ενδιαφέρον αποτέλεσμα.</p> <p>Αποδεικνύεται ότι η απάντηση είναι αρκετά απλή. Και αν έχετε κάποιες δεξιότητες, μπορείτε να συλλέξετε πολλά από αυτά τα χαρακτηριστικά και να δημιουργήσετε τον δικό σας μοναδικό ιστότοπο σε σύντομο χρονικό διάστημα.</p> <p>Σήμερα θα μιλήσουμε για το πώς να ανοίξετε τον κώδικα μιας σελίδας, ένα συγκεκριμένο στοιχείο και να μάθετε πώς να χρησιμοποιείτε αυτή τη δεξιότητα προς όφελός σας.</p> <h2><span>Βασικές γνώσεις κώδικα</span></h2> <p>Ο ιστότοπός μου προορίζεται για αρχάριους και πρώτα θα ήθελα να μιλήσω εν συντομία για τους ιστότοπους και τον κώδικα γενικότερα.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/cit1-75-537x292.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Για να σχεδιάσετε μια εικόνα και, στη συνέχεια, κόψτε την σε μικρά μέρη, γράψτε κώδικα έτσι ώστε το πρόγραμμα περιήγησης να συναρμολογήσει ξανά όλα τα στοιχεία σε ένα ενιαίο σύνολο. Όλα φαίνονται πολύ περίπλοκα; Καθόλου, και δεν έχει νόημα να θρηνείς γι' αυτό.</p> <p>Έτσι δημιουργούνται ιστοσελίδες υψηλής ποιότητας. Αν θέλετε, εμπλακείτε σε αυτό το θέμα και μελετήστε το, αν δεν θέλετε, κανείς δεν μπορεί να σας αναγκάσει.</p> <p>Θα πω μόνο ένα πράγμα... δεν υπάρχει τίποτα πιο ευχάριστο από το να βλέπεις πώς οι ακατανόητες λέξεις που έγραψες μεταμορφώνονται σε ένα ενιαίο σύνολο και ζωντανεύουν: οι σύνδεσμοι λειτουργούν, τα κουμπιά κινούνται, οι εικόνες κινούνται, το κείμενο ανιχνεύεται. Νομίζω ότι ξέρω πώς ένιωσε ο Βίκτορ Φρανκενστάιν.</p> <p>Όταν αρχίσετε να κατανοείτε τη μυστική γλώσσα και βλέπετε ότι όλα είναι στην πραγματικότητα πολύ πιο απλά από ό,τι φαινόταν αρχικά, δεν μπορείτε παρά να πιστέψετε στις δικές σας δυνάμεις και ικανότητες του εγκεφάλου. Αυτό είναι πολύ δροσερό.</p> <p>Πώς κατασκευάζονται οι ιστοσελίδες; Ιδανικά, πρώτα. Απλώς ζωγραφίζει μια εικόνα. Για παράδειγμα, όπως φαίνεται στην παρακάτω εικόνα. Προς το παρόν είναι απλώς μια εικόνα, μια φωτογραφία. Δεν λειτουργούν σύνδεσμοι, όταν κάνετε κλικ δεν πηγαίνετε πουθενά, δεν πραγματοποιείται αναζήτηση.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_1-46.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Σύμφωνα με αυτό το σχέδιο. Κοιτάξτε το στιγμιότυπο οθόνης παρακάτω. Μπορεί να νομίζετε ότι πρόκειται για ένα γελοίο και πολύ περίπλοκο σύνολο συμβόλων. Στην πραγματικότητα, όλα δεν είναι τόσο περίπλοκα, υπάρχει ένας συγκεκριμένος αλγόριθμος.</p> <p>Υπάρχουν μόνο περίπου 150 ετικέτες και καθεμία από αυτές είναι υπεύθυνη για μια συγκεκριμένη ενέργεια: σύνδεσμος, παύλα, έντονη γραφή, χρώμα, τίτλος και ούτω καθεξής. Η κατανόηση τους δεν είναι τόσο δύσκολη αν έχετε την επιθυμία και δεν σας πειράζει ο χρόνος.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_2-43.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Χάρη στη γνώση αυτών των ιδιοτήτων, μπορείτε να λύσετε σχεδόν οποιοδήποτε πρόβλημα. Όμως κάθε προγραμματιστής βρίσκει τους δικούς του τρόπους για να πετύχει τον στόχο.</p> <p>Οι έμπειροι δημιουργοί βλέπουν αμέσως πώς να επιτύχουν αποτελέσματα, ενώ άλλοι πρέπει να σκεφτούν, να αναζητήσουν την απάντηση σε άρθρα ή στον πηγαίο κώδικα των ανταγωνιστών. Παίρνουν απλώς το απαραίτητο μέρος από έναν ιστότοπο τρίτων και το επεξεργάζονται μόνοι τους. Αυτό συντομεύει σημαντικά τη διαδικασία εργασίας.</p> <p>Λίγο αργότερα, θα σας δείξω ένα συγκεκριμένο παράδειγμα.</p> <h2>Προβολή κώδικα</h2> <p>Λοιπόν, επιτρέψτε μου πρώτα να σας δείξω πώς να ενεργήσετε εάν θέλετε να μάθετε το html κάποιου άλλου. Στη συνέχεια θα εξετάσουμε όλες τις άλλες ερωτήσεις με περισσότερες λεπτομέρειες.</p> <h3><span>Ο καλύτερος τρόπος</span></h3> <p>Η μέθοδος που θα περιγράψω πρώτα είναι λίγο περίπλοκη για αρχάριους, αλλά ως εισαγωγή, διαβάστε την. Ανοίξτε τη σελίδα και κάντε κλικ στο δεξί κουμπί του ποντικιού. Επιλέξτε "Αποθήκευση ως..."</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_2-1-1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Αποθηκεύστε ολόκληρη την ιστοσελίδα. Όπως μπορείτε να δείτε στο στιγμιότυπο οθόνης, έχω ήδη κατεβάσει τα πάντα εκ των προτέρων. Εδώ έχουμε δύο φακέλους.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_2-2-1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Όλα όσα χρειάζεστε είναι εδώ. Κάθε στοιχείο. Εάν το καταλαβαίνετε αυτό, μπορείτε να αποκτήσετε γρήγορα όλα όσα χρειάζεστε. Αλλά ένα τέτοιο έργο γίνεται όλο και πιο αδύνατο. Δεν υπάρχει λήψη. Τι να κάνετε εάν απαγορεύεται η αντιγραφή μιας σελίδας;</p> <h3><span>Αυτό είναι το Google Chrome</span></h3> <p>Όπως ίσως έχετε ήδη παρατηρήσει, χρησιμοποιώ τις περισσότερες φορές το Google Chrome και η εκμάθηση του κώδικα κάποιου άλλου σε αυτό το πρόγραμμα περιήγησης είναι τόσο εύκολη όσο το ξεφλούδισμα των αχλαδιών. Όπως καταρχήν με κάθε άλλο. Το σχήμα δεν θα είναι μόνο παρόμοιο, αλλά πανομοιότυπο. Ανοίξτε τη σελίδα της οποίας τον κωδικό θέλουμε να μάθουμε και κάντε δεξί κλικ οπουδήποτε. Στο παράθυρο που εμφανίζεται, κάντε κλικ στο «Προβολή κώδικα σελίδας».</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_3-40.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Ένα φύλλο κώδικα θα ανοίξει σε ένα νέο παράθυρο, το οποίο είναι αρκετά δύσκολο για έναν αρχάριο να καταλάβει. Αλλά μην ανησυχείτε εκ των προτέρων.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_4-36.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Εάν πρέπει να γνωρίζετε τον κωδικό ενός μόνο στοιχείου, απλώς τοποθετήστε τον δείκτη του ποντικιού πάνω του με το ποντίκι και κάντε δεξί κλικ. Επιλέξτε μια άλλη λειτουργία του Chrome: "Προβολή κωδικού στοιχείου".</p> <p>Για παράδειγμα, μπορεί να με ενδιαφέρει πώς κατασκευάστηκε το λογότυπο, χρησιμοποιώντας μια εικόνα ή μια γλώσσα προγραμματισμού; Μετά από όλα, μπορείτε να σχεδιάσετε ένα τετράγωνο χρησιμοποιώντας CSS. Πολλοί ειδικοί συμβουλεύουν να γράψετε όσο το δυνατόν περισσότερες πληροφορίες σε κώδικα. Πώς λειτουργούν σε δημοφιλείς τοποθεσίες;</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_5-33.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Τώρα έχουν εμφανιστεί οι απαραίτητες πληροφορίες. html πάνω, css κάτω. Αυτές είναι δύο γλώσσες. Το πρώτο είναι υπεύθυνο για το στοιχείο κειμένου και το δεύτερο για το σχέδιο. Εάν δεν υπήρχε CSS, τότε θα έπρεπε να καθορίζετε το χρώμα και το μέγεθος γραμματοσειράς κάθε φορά. Για κάθε σελίδα, αυτό είναι πολύ μεγάλο. Αλλά αν δεν υπήρχε η html, τότε δεν θα είχαμε κείμενα. Το εξήγησα χονδρικά, αλλά γενικά έτσι είναι.</p> <p>Παρεμπιπτόντως, εάν ενδιαφέρεστε για το πώς λειτουργεί εδώ, μπορείτε να δείτε τον σύνδεσμο στην παρακάτω εικόνα. Εδώ είναι η απάντησή σας.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_6-33.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h3>Mozilla Firefox</h3> <p>Αν σας αρέσει να δουλεύετε στη μαστίχα, τότε όλα θα είναι ακριβώς τα ίδια. Ανοίξτε τη σελίδα και κάντε κλικ στο δεξί κουμπί του ποντικιού. "Πηγαίος κώδικας σελίδας" εάν θέλετε να δείτε ολόκληρο τον κώδικα.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_7-32.jpg' align="center" width="100%" loading=lazy loading=lazy></p><p>Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο, μπορείτε να ανοίξετε τον κώδικά του.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_8-29.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Εδώ τα δεδομένα εμφανίζονται στο κάτω μέρος της οθόνης, αλλά κατά τα άλλα όλα είναι ακριβώς τα ίδια.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_9-29.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h3>Το πρόγραμμα περιήγησης Yandex</h3> <p>Στο πρόγραμμα περιήγησης Yandex, όλα είναι ακριβώς τα ίδια όπως στις δύο προηγούμενες επιλογές, ανοίξτε τη σελίδα, κάντε δεξί κλικ, δείτε τον κώδικα της σελίδας.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_10-27.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Περνάμε τον κέρσορα πάνω από ένα στοιχείο αν θέλουμε να μάθουμε ακριβώς τον κωδικό του.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_11-27.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Όλα εμφανίζονται εδώ ακριβώς όπως στο Chrome.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_12-25.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h3>ΛΥΡΙΚΗ ΣΚΗΝΗ</h3> <p>Και τέλος, Όπερα.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_13-24.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Παρεμπιπτόντως, ίσως έχετε παρατηρήσει ότι δεν χρειάζεται να χρησιμοποιήσετε ποντίκι. Υπάρχει μια γρήγορη συντόμευση πληκτρολογίου για το άνοιγμα του κώδικα και είναι η ίδια για όλα τα προγράμματα περιήγησης: <b>CTRL+U</b>.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_14-24.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Για στοιχεία: Ctrl+Shift+C.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_15-22.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Έτσι φαίνεται το αποτέλεσμα.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_16-23.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h2><span>Αυτό θα είναι ενδιαφέρον για αρχάριους</span></h2> <p>Δείτε τώρα πώς λειτουργούν όλα. Βρίσκεις έναν ιστότοπο και σου αρέσει πολύ κάποιο στοιχείο. Για παράδειγμα, αυτό. Ξέρετε ήδη πώς να ανοίξετε τον κωδικό στοιχείου.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_17-20.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Τώρα αντιγράψτε το.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_18-19.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Χρησιμοποιώ , επικολλώ αυτόν τον κώδικα σε ένα νέο αρχείο html, στην ετικέτα body (body στα Αγγλικά).</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_19-18.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Τώρα ας δούμε πώς θα φαίνονται όλα στο πρόγραμμα περιήγησης.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_20-16.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Ετοιμος. Για να ευθυγραμμιστεί το κείμενο στις άκρες και να αποκτήσει ένα πρασινωπό χρώμα, πρέπει να συνδέσετε το css σε αυτό το έγγραφο και να αντιγράψετε έναν άλλο κώδικα από τον ιστότοπο από τον οποίο αντιγράψαμε αυτόν.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_21-16.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Δεν θα το κάνω αυτό τώρα. Αυτό απαιτεί περισσότερο χρόνο: και δικό μου και δικό σας. Νομίζω ότι θα περιγράψω όλες τις λεπτομέρειες σε μελλοντικές δημοσιεύσεις μου. Εγγραφείτε στο ενημερωτικό δελτίο και μάθετε πρώτοι πότε εμφανίζεται ένα άρθρο.</p> <p>Εάν δεν το αντέχετε, αλλά θέλετε να μάθετε περισσότερα για την html και το css τώρα, τότε μπορώ παραδοσιακά να σας προτείνω δωρεάν μαθήματα κατάρτισης.</p> <p>Εδώ είναι 33 μαθήματα που θα σας επιτρέψουν να κυριαρχήσετε την html - <i><b><span>"Δωρεάν μάθημα HTML"</span> </b> </i>.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_22-16-537x476.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Και εδώ είναι πλήρεις πληροφορίες για το css - <i><b><span>"Δωρεάν μάθημα για CSS (45 μαθήματα βίντεο!)"</span> </b> </i>.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_23-15.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Τώρα ξέρεις λίγα περισσότερα. Σας εύχομαι καλή επιτυχία στις προσπάθειές σας. Τα λέμε!</p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </article> </div> </div> <div id="secondary"> <aside id="search-2" class="widget widget_search clearfix"> <form action="/" class="search-form searchform clearfix" method="get"> <div class="search-wrap"> <input type="text" placeholder="Αναζήτηση" class="s field" name="s"> <button class="search-icon" type="submit"></button> </div> </form> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widget-title"><span>Πρόσφατες καταχωρήσεις</span></h3> <ul> <li> <a href="https://olegshein.ru/el/system-and-update/kak-otklyuchit-nochnoi-draiv-na-tele-2-nochnoi-bezlimit-tele2--/">Night unlimited Tele2 - τι σημαίνει και πώς να το συνδέσετε;</a> </li> <li> <a href="https://olegshein.ru/el/applied/optimizaciya-operativnoi-pamyati-dlya-windows-xp-programmy-dlya-ochistki/">Προγράμματα για τον καθαρισμό της μνήμης RAM</a> </li> <li> <a href="https://olegshein.ru/el/contacts-and-messages/prilozhenie-chtob-govorit-po-internetu-luchshie-prilozheniya/">Οι καλύτερες εφαρμογές για ραντεβού και επικοινωνία</a> </li> <li> <a href="https://olegshein.ru/el/applied/krymskii-rouming-ot-megafona-stoimost-zvonkov-sms-i/">Περιαγωγή Κριμαίας από το Megafon: κόστος κλήσεων, SMS και Internet</a> </li> <li> <a href="https://olegshein.ru/el/instructions/pri-skanirovanii-prosmotr-mac-os-kontrast-izobrazheniya-kak/">Πώς να σαρώσετε έγγραφα και φωτογραφίες στο OS X</a> </li> <li> <a href="https://olegshein.ru/el/security/blade-soul-zapuskaetsya-oshibka-1073-oshibki-blade-and-soul-i-sposoby-ih/">Σφάλματα Blade and Soul και πώς να τα διορθώσετε</a> </li> <li> <a href="https://olegshein.ru/el/security/kak-nastroit-monitor-dlya-pravilnoi-cvetoperedachi-s-pomoshchyu-po/">Οδηγίες: Βαθμονόμηση οθόνης φορητού υπολογιστή - προσαρμογή χρωματικής απόδοσης Κακή απόδοση χρώματος της οθόνης</a> </li> <li> <a href="https://olegshein.ru/el/security/pochemu-gnezdo-usb-ne-rabotaet-kak-otklyuchit-ili-vklyuchit-usb-porty-v/">Πώς να απενεργοποιήσετε ή να ενεργοποιήσετε τις θύρες USB στα Windows</a> </li> </ul> </aside> <aside id="text-5" class="widget widget_text clearfix"> <div class="textwidget"> <script type="text/javascript" src="//vk.com/js/api/openapi.js?144"></script> <div id="vk_groups"></div> </div> </aside> <aside id="text-4" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> <aside id="text-3" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> </div> </div> </div> <footer id="colophon" class="clearfix"> <div class="footer-socket-wrapper clearfix"> <div class="inner-wrap"> <div class="footer-socket-area"> <div class="footer-socket-right-section"> </div> <div class="footer-socket-left-sectoin"> <div class="copyright">2024 <a href="https://olegshein.ru/el/" title="olegshein.ru"><span>olegshein.ru</span></a>. Λέσχη υπολογιστών του Oleg Shein. <br></div> </div> </div> </div> </div> </footer> <a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a> </div> <script type="text/javascript"> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "colormag_right_sidebar", "margin_top": 10, "margin_bottom": 0, "stop_id": "", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['text-3'] }; </script> <script type="text/javascript"> (function(w, doc) { if (!w.__utlWdgt) { w.__utlWdgt = true; var d = doc, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset = 'UTF-8'; s.async = true; s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js'; var h = d[g]('body')[0]; h.appendChild(s); } })(window, document); </script> <div style="text-align:left;" data-lang="ru" data-url="/global-blue-vozvrat-tax-free-v-minske/" data-background-alpha="0.0" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-size="12" data-top-button="false" data-share-counter-type="common" data-share-style="1" data-mode="share" data-like-text-enable="false" data-mobile-view="true" data-icon-color="#ffffff" data-orientation="fixed-left" data-text-color="#000000" data-share-shape="round-rectangle" data-sn-ids="fb.vk.tw.ok.gp.ps.mr.ln." data-share-size="30" data-background-color="#ffffff" data-preview-mobile="false" data-mobile-sn-ids="fb.vk.ok.wh.vb." data-pid="cmsvpolshuby" data-counter-background-alpha="1.0" data-following-enable="false" data-exclude-show-more="true" data-selection-enable="true" class="uptolike-buttons"></div> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/bootstrap-2.3.2/js/bootstrap.min.js?ver=2.3.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.validate.min.js?ver=1.15.0'></script> <script type='text/javascript'> /* <![CDATA[ */ var pwebcontact_l10n = pwebcontact_l10n || {}; pwebcontact_l10n.form = { "INIT": "Initializing form...", "SENDING": "Sending...", "SEND_ERR": "Wait a few seconds before sending next message", "REQUEST_ERR": "Request error: ", "COOKIES_ERR": "Enable cookies and refresh page to use this form" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.pwebcontact.min.js?ver=2.3.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/simple-tooltips/zebra_tooltips.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/wp-cloudy/js/wp-cloudy-ajax.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/modernizr.custom.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/navigation.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <div id="pwebcontact1" class="pwebcontact pweb-bottom pweb-offset-right pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal" dir="ltr"> <div id="pwebcontact1_toggler" class="pwebcontact1_toggler pwebcontact_toggler pweb-closed pweb-theme-free"> <span class="pweb-text">Έχετε ερωτήσεις;</span> <span class="pweb-icon"></span> </div> <div id="pwebcontact1_box" class="pwebcontact-box pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal pweb-init" dir="ltr"> <div class="pwebcontact-container-outset"> <div id="pwebcontact1_container" class="pwebcontact-container"> <div class="pwebcontact-container-inset"> <form name="pwebcontact1_form" id="pwebcontact1_form" class="pwebcontact-form" action="/" method="post" accept-charset="utf-8"> <div class="pweb-fields"> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-name pweb-field-name"> <div class="pweb-label"> <label id="pwebcontact1_field-name-lbl" for="pwebcontact1_field-name">Ονομα</label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="text" name="fields[name]" id="pwebcontact1_field-name" autocomplete="on" class="pweb-input" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-email pweb-field-email"> <div class="pweb-label"> <label id="pwebcontact1_field-email-lbl" for="pwebcontact1_field-email">ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="email" name="fields[email]" id="pwebcontact1_field-email" autocomplete="on" class="pweb-input required" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-textarea pweb-field-message"> <div class="pweb-label"> <label id="pwebcontact1_field-message-lbl" for="pwebcontact1_field-message">Μήνυμα <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <textarea name="fields[message]" id="pwebcontact1_field-message" cols="50" rows="5" class="required" data-role="none"></textarea> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-buttons"> <div class="pweb-field"> <button id="pwebcontact1_send" type="submit" class="btn pweb-button-send" data-role="none">Στείλετε</button> </div> </div> </div> </div> </div> <div class="pweb-msg pweb-msg-after"> <div id="pwebcontact1_msg" class="pweb-progress"> <script type="text/javascript"> document.getElementById("pwebcontact1_msg").innerHTML = "Initializing form..." </script> </div> </div> <input type="hidden" name="5eb40beb9e" value="1" id="pwebcontact1_token"> </form> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(function() { jQuery(".tooltips img").closest(".tooltips").css("display", "inline-block"); new jQuery.Zebra_Tooltips(jQuery('.tooltips').not('.custom_m_bubble'), { 'background_color': '#000000', 'color': '#ffffff', 'max_width': 250, 'opacity': 0.95, 'position': 'center' }); }); </script> <script type="text/javascript"> jQuery(document).on('ready post-load', function() { jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create"]').addClass('nolightbox'); }); jQuery(document).on('ready post-load', easy_fancybox_handler); jQuery(document).on('ready', easy_fancybox_auto); </script> <div id="mistape_dialog" data-mode="comment" data-dry-run="0"> <div class="dialog__overlay"></div> <div class="dialog__content"> <div id="mistape_confirm_dialog" class="mistape_dialog_screen"> <div class="dialog-wrap"> <div class="dialog-wrap-top"> <h2>Αναφέρετε ένα τυπογραφικό λάθος</h2> <div class="mistape_dialog_block"> <h3>Κείμενο που θα σταλεί στους συντάκτες μας:</h3> <div id="mistape_reported_text"></div> </div> </div> <div class="dialog-wrap-bottom"> <div class="mistape_dialog_block comment"> <h3><label for="mistape_comment">Το σχόλιό σας (προαιρετικό):</label></h3> <textarea id="mistape_comment" cols="60" rows="3" maxlength="1000"></textarea> </div> <div class="pos-relative"> </div> </div> </div> <div class="mistape_dialog_block"> <a class="mistape_action" data-action="send" data-id="389" role="button">Στείλετε</a> <a class="mistape_action" data-dialog-close role="button" style="display:none">Ματαίωση</a> </div> <div class="mistape-letter-front letter-part"> <div class="front-left"></div> <div class="front-right"></div> <div class="front-bottom"></div> </div> <div class="mistape-letter-back letter-part"> <div class="mistape-letter-back-top"></div> </div> <div class="mistape-letter-top letter-part"></div> </div> </div> </div> <script type="text/javascript">  </script><br> <br> </body> </html>