Τι ετικέτες υπάρχουν στη σελίδα μετάβασης. Πώς να ορίσετε μια ανακατεύθυνση σε άλλη διεύθυνση URL στην PHP πριν φορτώσει η σελίδα

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

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

Πώς να δημιουργήσετε έναν σύνδεσμο σε HTML, παραδείγματα

1. HREF - είναι υπεύθυνο για το πού πρέπει να οδηγεί ο σύνδεσμος. Ένας τυπικός σύνδεσμος καθορίζεται ως εξής: Κείμενο συνδέσμου.

2. TARGET - είναι υπεύθυνο για το παράθυρο στο οποίο θα ανοίξει το έγγραφο. Από προεπιλογή, ανοίγει ένα νέο έγγραφο στο τρέχον παράθυρο του προγράμματος περιήγησης. Το χαρακτηριστικό "target" σάς επιτρέπει να ανοίξετε έναν σύνδεσμο σε ένα νέο παράθυρο προγράμματος περιήγησης. Αυτό το χαρακτηριστικό έχει τις ακόλουθες παραμέτρους:

• _blank - φορτώνει τη σελίδα σε νέο παράθυρο.
• _self - φορτώνει τη σελίδα στο τρέχον παράθυρο.
• _parent - φορτώνει τη σελίδα στο γονικό πλαίσιο.
• _top - ακυρώνει όλα τα καρέ και φορτώνει τη σελίδα σε νέο παράθυρο.

3. NAME - χρησιμοποιείται για πλοήγηση σε μια συγκεκριμένη περιοχή μέσα στη σελίδα. Μετά το σύμβολο κατακερματισμού, η λέξη-κλειδί (σελιδοδείκτης ή ετικέτα) υποδεικνύεται σε εισαγωγικά. Για να μεταβείτε σε αυτήν την ετικέτα, χρησιμοποιήστε τον σύνδεσμο στον οποίο είναι γραμμένη αυτή η ετικέτα.

Παράδειγμα εξωτερικού συνδέσμου

Μεταβείτε στον ιστότοπο

Μεταβείτε στον ιστότοπο Δωρεάν μαθήματα WordPress

Παράδειγμα 4: Εικόνες ως σύνδεσμοι.

Παράδειγμα εικόνας ως αναφορά

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

Μετάβαση στο κείμενο

Κείμενο σελίδας...

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

Λήψη αρχείου Γράψτε ένα γράμμα

Μπορείτε να ορίσετε το χρώμα των συνδέσμων χρησιμοποιώντας χαρακτηριστικά που καθορίζονται στην ετικέτα "body" ως παραμέτρους. Εξετάστε αυτά τα χαρακτηριστικά:

• σύνδεσμος - σύνδεσμος χωρίς επίσκεψη, από προεπιλογή εμφανίζεται με μπλε χρώμα.
• alink - ενεργός σύνδεσμος, κόκκινος από προεπιλογή.
• vlink - σύνδεσμος επίσκεψης, μωβ από προεπιλογή.

Ένα παράδειγμα ρύθμισης χρωμάτων για συνδέσμους...

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

Οδηγίες

Υπάρχουν διάφοροι τρόποι για να καταχωρήσετε έναν σύνδεσμο σε έναν ιστότοπο. Εάν χρησιμοποιείτε κινητήρα, συνδεθείτε ως διαχειριστής στο μενού υλικών. Στη συνέχεια, επιλέξτε τη σελίδα που χρειάζεστε ή δημιουργήστε μια νέα. Γράψτε ένα κείμενο που, όταν κάνετε κλικ, θα οδηγήσει σε μετάβαση. Επιλέξτε το και επιλέξτε το εικονίδιο Προσθήκη συνδέσμου από τη γραμμή εργαλείων. Μια φόρμα θα ανοίξει μπροστά σας για να συμπληρώσετε. Καθορίστε όλες τις απαραίτητες παραμέτρους που παρέχονται από το cms, ορίστε τη διεύθυνση και κάντε κλικ στο "OK". Αποθηκεύστε τις αλλαγές και ανανεώστε τη σελίδα στο παράθυρο του προγράμματος περιήγησης - θα πρέπει να εμφανιστεί ο σύνδεσμος. Ελέγξτε τη λειτουργικότητά του και κάντε αλλαγές εάν χρειάζεται.

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

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

Για να δημιουργήσετε μια μετάβαση σε ένα συγκεκριμένο τμήμα μιας ιστοσελίδας, τοποθετήστε πρώτα τις άγκυρες στα σωστά σημεία στον ιστότοπο και δώστε τους ονόματα. Είναι καλύτερα να ορίσετε σειριακούς αριθμούς - θα ξοδεύετε λιγότερο χρόνο γράφοντας συνδέσμους. Εάν χρησιμοποιείτε cms, επιλέξτε μέρος του κειμένου, κάντε κλικ στο «Προσθήκη συνδέσμου» και συμπληρώστε το πεδίο «Άγκυρα». Σε μορφή εγγράφου html θα μοιάζει με Κείμενο/Εικόνα

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

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

Οδηγίες

Μπορείτε να λύσετε το πρόβλημα της αυτόματης ανακατεύθυνσης των επισκεπτών σε άλλο ιστότοπο μόνο χρησιμοποιώντας HTML (γλώσσα σήμανσης υπερκειμένου). Περιέχει μια (μετα-ετικέτα) που λέει στο πρόγραμμα περιήγησης ότι μετά τη φόρτωση της τρέχουσας σελίδας, θα πρέπει να αρχίσει να φορτώνει μια άλλη. Αυτή η μετα-ετικέτα περιέχει πληροφορίες (χαρακτηριστικά ετικέτας) σχετικά με τη διεύθυνση ανακατεύθυνσης και το χρόνο μετά τον οποίο θα πρέπει να σταλεί ο ιστότοπος στη σελίδα. Για παράδειγμα, μπορεί να μοιάζει με αυτό: Εδώ το Refresh είναι η κωδική λέξη που ενεργοποιεί τον μηχανισμό ανακατεύθυνσης. Ο αριθμός 5 υποδεικνύει ότι η διαδικασία πρέπει να ξεκινήσει μετά τη φόρτωση αυτής της σελίδας. Αυτός ο χρόνος μπορεί να είναι απαραίτητος για τον επισκέπτη, για παράδειγμα, να λάβει το μήνυμα που τοποθετείτε σε αυτήν τη σελίδα. Εάν δεν χρειάζεται μια τέτοια παύση, μηδενίστε την. Και το URL=http://www.site περιέχει τη διεύθυνση στην οποία το πρόγραμμα περιήγησης πρέπει να στείλει τον επισκέπτη. Αυτή η μετα-ετικέτα πρέπει να τοποθετηθεί στο τμήμα κεφαλίδας του πηγαίου κώδικα της σελίδας - μεταξύ και .

Ένας άλλος τρόπος υλοποιείται χρησιμοποιώντας τη γλώσσα προγραμματισμού JavaScript. Χρειάζεστε μόνο μία γραμμή κώδικα για να στείλετε το web surfer στην επιθυμητή διεύθυνση. Μπορεί να μοιάζει, για παράδειγμα, ως εξής: window.location.reload("http://www..location.replace("http://www..location.href="/";Εδώ χρειάζεται μόνο να αντικαταστήσετε τη διεύθυνση των θεμάτων που πρέπει να τοποθετήσετε αυτήν την εντολή μέσα σε ετικέτες που λένε στο πρόγραμμα περιήγησης ότι είναι γραμμένο σε JavaScript:
document.location.replace("http://www.site");
Και αυτές οι τρεις γραμμές, με τη σειρά τους, θα πρέπει να τοποθετηθούν μέσα στην ίδια περιοχή κεφαλίδας (μεταξύ και ).

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

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

Οδηγίες

Ανοίξτε ένα γνωστό πρόγραμμα που λειτουργεί με . Αυτό θα μπορούσε να είναι το τυπικό Σημειωματάριο, το εξίσου διάσημο Word Pad, το αγαπημένο σε όλους Microsoft Office Word, καθώς και το πρόγραμμα δημιουργίας περιοδικών Microsoft Publisher και άλλων. Επιλέξτε την επιθυμητή περιοχή κειμένου που σκοπεύετε να μειώσετε. Όλα τα προγράμματα επεξεργασίας κειμένου που αναφέρονται παραπάνω έχουν ένα ειδικό πλαίσιο μορφοποίησης κειμένου στο επάνω μέρος του παραθύρου εργασίας. Περιέχει κουμπιά υπηρεσίας που αλλάζουν τη μορφή γραμματοσειράς, το στυλ, το μέγεθος, το χρώμα και τη θέση της στη σελίδα του εγγράφου. Ρυθμίστε το κείμενο στο απαιτούμενο μέγεθος - επιλέγοντας απλώς την κατάλληλη ψηφιακή τιμή. Για παράδειγμα, μειώστε το μέγεθος της γραμματοσειράς από τη θέση "14" στη θέση "12".

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

Αν εργάζεστε σε abword ή, καλό θα ήταν να χρησιμοποιήσετε την ειδική υπηρεσία «Παράγραφος», καθώς το κείμενο εκεί μπορεί να είναι μικρότερο μειώνοντας το διάστιχο. Ανοίξτε το μενού "Μορφή", ενότητα "Παράγραφος". Θα ανοίξει ένα νέο παράθυρο υπηρεσίας. Στη συνέχεια, μεταβείτε στην καρτέλα "Εσοχές και διάστημα". Στο κάτω πεδίο «Διάστημα», εισαγάγετε την επιθυμητή τιμή διαστήματος. Κάντε κλικ στο Ok για να αποθηκεύσετε τις ρυθμίσεις. Στους επεξεργαστές γραφικών και φωτογραφιών, το μέγεθος κειμένου αλλάζει συχνότερα με το ποντίκι. Αφού εισαγάγετε την επιγραφή στην περιοχή εργασίας ή στην ίδια την εικόνα, επιλέξτε την με το ποντίκι. Στη συνέχεια, πιάστε την άκρη της διακεκομμένης γραμμής με το ποντίκι σας που θα περικυκλώσει το κείμενο. Τραβήξτε την άκρη προς το κέντρο του κειμένου για να κάνετε το κείμενο μικρότερο.

Βίντεο σχετικά με το θέμα

Πηγές:

• Μειώστε τη γραμματοσειρά κειμένου στο πληκτρολόγιο το 2019

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

θα χρειαστείτε

• - πρόγραμμα περιήγησης
• - Σύνδεση στο Διαδίκτυο
• - πιθανώς ένα πρόγραμμα επεξεργασίας κειμένου.
• - πιθανώς διαπιστευτήρια για πρόσβαση στον πίνακα διαχείρισης CMS.

Οδηγίες

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

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

Τοποθετήστε το περιεχόμενο παρουσίασης της μελλοντικής σελίδας. Δημοσιεύστε εικόνες. Ανεβάστε τα σε έναν από τους ιστότοπους φιλοξενίας φωτογραφιών που επιτρέπουν τη σύνδεση hotlinks. Οι εικόνες μπορούν να μεταφορτωθούν χρησιμοποιώντας έναν πελάτη FTP. Εάν ο ιστότοπος εκτελεί ένα CMS και παρέχει λειτουργία μεταφόρτωσης αρχείων, ίσως είναι πιο βολικό να το χρησιμοποιήσετε. Ανεβάστε το βίντεο στο διακομιστή (αν έχετε το δικό σας flash player) ή, για παράδειγμα, στο YouTube ή στο RuTube. Λάβετε και αποθηκεύστε απευθείας συνδέσμους σε κάθε στοιχείο του περιεχομένου της παρουσίασής σας.

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

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

Βίντεο σχετικά με το θέμα

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

Οδηγίες

Υπάρχουν δύο απλούστερες επιλογές ανακατεύθυνσης που δεν απαιτούν τίποτα άλλο εκτός από τη δυνατότητα να κάνετε τις κατάλληλες αλλαγές στην επιθυμητή σελίδα. Το πρώτο επιλύεται χρησιμοποιώντας HTML (HyperText Markup Language - «γλώσσα σήμανσης υπερκειμένου»). Αυτή είναι η γλώσσα στην οποία - . Αυτό περιέχει την ετικέτα που χρειαζόμαστε - η οποία λέει στο πρόγραμμα περιήγησης σε ποια διεύθυνση και πόσα δευτερόλεπτα χρειάζεται για να στείλει τον επισκέπτη της σελίδας. Μοιάζει με αυτό:
Εδώ ο αριθμός "10" υποδεικνύει πόσα δευτερόλεπτα πρέπει να περιμένετε - για παράδειγμα, ώστε να έχετε χρόνο να διαβάσετε το μήνυμα ότι ο ιστότοπος έχει μετακινηθεί. Και η διεύθυνση δίνει στο πρόγραμμα περιήγησης τη διεύθυνση URL όπου πρέπει να στείλει τον επισκέπτη. Αυτή η ετικέτα πρέπει να εισαχθεί στην "κεφαλίδα σελίδας" - την περιοχή του κώδικα html που ξεκινά με την ετικέτα και τελειώνει με την ετικέτα.

Η δεύτερη μέθοδος ανακατεύθυνσης χρησιμοποιεί τις δυνατότητες της γλώσσας JavaScript. Για να το χρησιμοποιήσετε, πρέπει να εισαγάγετε το κατάλληλο . Πρώτα πρέπει να πείτε στο πρόγραμμα περιήγησης ότι το σενάριο JavaScript ξεκινά σε αυτό το σημείο. Στο JavaScript, αυτή η ετικέτα ανοίγματος μοιάζει με αυτό:
Και το κλείσιμο έχει ως εξής:
Μεταξύ αυτών των δύο ετικετών υπάρχουν οδηγίες - τελεστές γλώσσας. Το εφέ ανακατεύθυνσης που χρειαζόμαστε μπορεί να επιτευχθεί με πολλά από αυτά:
window.location.reload("http://www.site/");
ή
document.location.replace("http://www.site/");
ή
document.location.href="/";
Πλήρης κώδικας σεναρίου μέσα

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

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

Και σήμερα θα μάθουμε πώς να εισάγουμε έναν υπερσύνδεσμο σε html. Πρώτα όμως θα ήθελα να σας ρωτήσω: Ξέρετε τι είναι ακόμη ένας υπερσύνδεσμος και σε τι διαφέρει από έναν κανονικό σύνδεσμο; Όλα είναι στην πραγματικότητα απλά εδώ: ένας σύνδεσμος είναι μια απλή πληροφορία που αναφέρεται σε ένα έγγραφο. Ταυτόχρονα, δεν μπορείτε να κάνετε κλικ σε αυτό το κείμενο (δεν θα συμβεί τίποτα), αλλά ξέρετε πού να αναζητήσετε πληροφορίες.

Παράδειγμα: Μπορείτε να μάθετε πώς να τονίζετε τα μαλλιά στο Photoshop στο //site/adobe-photoshop/kak-vydelit-volosy/

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

Μπορείτε να διαβάσετε για το πώς να τονίσετε σωστά τα μαλλιά στο Photoshop σε ένα από τα σεμινάρια μου.

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

Η ζευγοποιημένη ετικέτα είναι υπεύθυνη για την υπερ-σύνδεση, αλλά από μόνη της δεν αντιπροσωπεύει τίποτα. Πάντα σε συνδυασμό με μια ιδιότητα. Και σε αυτήν την περίπτωση, πρέπει να γράφουμε συνεχώς το ίδιο href. Στην τιμή του χαρακτηριστικού βάζουμε τον σύνδεσμο προς τον ίδιο τον επιθυμητό πόρο. Και στο ίδιο το περιεχόμενο γράφουμε το ίδιο το κείμενο, το οποίο θα πρέπει να γίνει κλικ (λειτουργεί όταν πατηθεί). Δείτε το παράδειγμα και νομίζω ότι θα καταλάβετε τα πάντα.

Μηχανή αναζήτησης Yandex

Όπως καταλαβαίνετε, σε αυτό το παράδειγμα έγραψα ότι όταν κάνετε κλικ σε ένα κομμάτι κειμένου "μηχανή αναζήτησης Yandex", ένα άτομο θα κατευθυνθεί στη διεύθυνση που είναι γραμμένη στην τιμή του χαρακτηριστικού href.

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

Αρχείο στον ίδιο φάκελο

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

Αρχείο σε άλλο φάκελο

Ανοίξτε το αρχείο pushkin.html στο Notepad++

Τώρα βρείτε τη λέξη φωτογραφία και τυλίξτε την σε ετικέτες.

Τώρα προσοχή! Στην τιμή του χαρακτηριστικού καθορίζουμε τη διαδρομή σε σχέση με το αρχείο που επεξεργάζεται, δηλαδή το ίδιο το pushkin.html. Θα πρέπει να καταλήξετε σε κάτι σαν αυτό:

Φωτογραφία

Τι κάναμε τώρα; Και κάναμε το εξής: αφού η διαδρομή προς τη φωτογραφία βρίσκεται σε έναν ξεχωριστό φάκελο img, ο οποίος βρίσκεται στον ίδιο φάκελο με το αρχείο pushkin.html, τότε στην τιμή του χαρακτηριστικού πρέπει πρώτα να γράψουμε το όνομα του φακέλου και στη συνέχεια με κάθετο (/) το πλήρες όνομα του εγγράφου (στην περίπτωσή μας φωτογραφίες).

Τώρα αποθηκεύστε και εκτελέστε το αρχείο pushkin.html στο πρόγραμμα περιήγησής σας. Θα δείτε ότι η λέξη «Φωτογραφία» έχει επισημανθεί με μπλε χρώμα και έχει γίνει κλικ, πράγμα που σημαίνει ότι κάνοντας κλικ σε αυτόν τον σύνδεσμο θα μεταφερθούμε στο αρχείο fofo.jpg, το οποίο βρίσκεται στο φάκελο img.

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

Εξωτερικές μεταβάσεις

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

Θα σπουδάσω για να γίνω master στα κοινωνικά έργα.

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

Ανοίγει σε νέο παράθυρο

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

Το χαρακτηριστικό target με την τιμή "_blank" θα μας βοηθήσει σε αυτό. Δεν υπάρχει τίποτα περίπλοκο εδώ. Θα χρειαστεί απλώς να το εισαγάγετε μέσα στην ετικέτα ανοίγματος μετά την τιμή του χαρακτηριστικού href. Ας πάρουμε αυτό το απόσπασμα από το αρχείο lukomorye.html, όπου δημιουργήσαμε έναν σύνδεσμο προς τη σελίδα pushkin.html, μόνο που τώρα θα γράψουμε αυτό ακριβώς το χαρακτηριστικό. Θα πρέπει να μοιάζει με αυτό:

Από το ποίημα Ruslan and Lyudmila (Συγγραφέας - A.S. Pushkin)

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

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

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

Με εκτίμηση, Dmitry Kostin.

Ας υποθέσουμε ότι θέλετε να εμφανίσετε τη σελίδα https://example.com/final.php σε χρήστες που μεταβαίνουν στη σελίδα https://example.com/initial.php. Αυτό μπορεί να γίνει χρησιμοποιώντας διάφορες μεθόδους PHP, JavaScript και HTML. Σε αυτό το άρθρο, θα καλύψουμε καθεμία από τις μεθόδους που μπορείτε να χρησιμοποιήσετε για να ανακατευθύνετε την PHP σε άλλη σελίδα.

Εδώ είναι μερικές μεταβλητές που θα χρησιμοποιήσουμε:

Χρησιμοποιώντας τη συνάρτηση PHP header() για να ανακατευθύνετε μια διεύθυνση URL

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

Εδώ χρησιμοποιούμε τη συνάρτηση PHP header() για να δημιουργήσουμε την ανακατεύθυνση. Πρέπει να τοποθετήσετε αυτόν τον κώδικα πριν από οποιοδήποτε HTML ή κείμενο. Διαφορετικά, θα λάβετε ένα σφάλμα ότι η κεφαλίδα έχει ήδη σταλεί. Μπορείτε επίσης να χρησιμοποιήσετε την προσωρινή μνήμη εξόδου για να αποτρέψετε αυτό το σφάλμα αποστολής κεφαλίδων. Το ακόλουθο παράδειγμα δείχνει αυτήν την τεχνική ανακατεύθυνσης PHP σε δράση:

Για να εκτελέσετε μια ανακατεύθυνση χρησιμοποιώντας τη συνάρτηση header(), η συνάρτηση ob_start() πρέπει να είναι η πρώτη συνάρτηση στο σενάριο PHP. Αυτό θα αποτρέψει την εμφάνιση σφαλμάτων κεφαλίδας.

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

Για να είμαστε σαφείς: η die() ή η exit() δεν έχουν καμία σχέση με τις ανακατευθύνσεις. Χρησιμοποιούνται για να εμποδίζουν την εκτέλεση του υπόλοιπου κώδικα στην ιστοσελίδα.

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

Έξοδος κώδικα ανακατεύθυνσης JavaScript χρησιμοποιώντας τη συνάρτηση PHP echo().

Αυτή δεν είναι μια καθαρή λύση PHP. Ωστόσο, είναι επίσης αποτελεσματικό. Μπορείτε να χρησιμοποιήσετε τη συνάρτηση PHP echo() για να εξάγετε τον κώδικα JavaScript που θα χειριστεί την ανακατεύθυνση.

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

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

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

Χρήση μετα-ετικέτες HTML για ανακατεύθυνση

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

Μπορείτε επίσης να χρησιμοποιήσετε την τελευταία γραμμή από το προηγούμενο παράδειγμα για να ανανεώνετε αυτόματα τη σελίδα κάθε "n" δευτερόλεπτα. Για παράδειγμα, ο ακόλουθος κώδικας θα ανανεώνει αυτόματα τη σελίδα κάθε 8 δευτερόλεπτα:

Σύναψη

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

Μετάφραση του άρθρου «Πώς μπορώ να κάνω μια ανακατεύθυνση σε διαφορετικό url πριν από τη φόρτωση της σελίδας στην PHP» από τη φιλική ομάδα του έργου.

Καλό Κακό

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

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

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

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

Αυτόματη ανακατεύθυνση JavaScript σε άλλη σελίδα

Εάν θέλετε να ανακατευθύνετε αυτόματα τον χρήστη από μια σελίδα (URL1) σε μια άλλη σελίδα (URL2), μπορείτε να χρησιμοποιήσετε τον ακόλουθο κώδικα:

window.location.href = "URL2";

Πρέπει να επικολλήσετε τον παραπάνω κώδικα στην πρώτη σελίδα (URL1). Αντικαταστήστε το URL2 με την επιθυμητή διεύθυνση σελίδας. Είναι καλύτερα να τοποθετήσετε αυτόν τον κώδικα μέσα στο στοιχείο (και όχι στο κάτω μέρος της σελίδας) έτσι ώστε η σελίδα να ανακατευθύνει πριν αρχίσει να την αποδίδει το πρόγραμμα περιήγησης.

ΣΥΜΒΟΥΛΗ: Εάν χρησιμοποιείτε ενσωματωμένη JavaScript (δηλαδή χωρίς εξωτερικό αρχείο .js), φροντίστε να τοποθετήσετε τον κώδικα JavaScript στο .

Ανακατεύθυνση σε άλλη σελίδα μετά από X δευτερόλεπτα

Σε αυτό το παράδειγμα, θα εκτελέσουμε μια ανακατεύθυνση js σε άλλη σελίδα λίγο καιρό μετά τη φόρτωση της σελίδας. Για παράδειγμα, εάν θέλετε να ανακατευθύνετε έναν επισκέπτη στην αρχική σελίδα αφού εμφανιστεί η σελίδα καλωσορίσματος για 5 δευτερόλεπτα:

setTimeout(function())( window.location.href = "homepage-url"; ), 5 * 1000);

Πρέπει να επικολλήσετε τον ακόλουθο κώδικα JavaScript στη σελίδα καλωσορίσματος. Θυμηθείτε να αντικαταστήσετε τη διεύθυνση URL της αρχικής σελίδας με τη διεύθυνση URL της αρχικής σελίδας.

Χρησιμοποιήσαμε τη μέθοδο setTimeout για να πούμε στο σενάριο να ανακατευθύνει μετά από 5 δευτερόλεπτα (πολλαπλασιάστε το 5 επί 1000 για να μετατρέψετε τα δευτερόλεπτα σε χιλιοστά του δευτερολέπτου).

ΣΥΜΒΟΥΛΗ: Στο JavaScript, οι τιμές χρόνου υπολογίζονται πάντα σε χιλιοστά του δευτερολέπτου.

Ανακατεύθυνση σε άλλη σελίδα βάσει συνθήκης

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

Χρησιμοποιήστε τον ακόλουθο κώδικα για να ανακατευθύνετε επισκέπτες που πληρούν μια συγκεκριμένη προϋπόθεση:

if (CONDITION) ( window.location.href = "redirect-url"; )

Για παράδειγμα, αυτός ο κώδικας ανακατευθύνει τους επισκέπτες σε άλλη σελίδα εάν το πλάτος της οθόνης τους είναι μικρότερο από 600 pixel:

εάν (οθόνη.πλάτος< 600) { window.location.href = "redirect-url"; }

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

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

Ο παρακάτω κώδικας θα ανακατευθύνει τον επισκέπτη στη σελίδα προορισμού αφού κάνει κλικ στο #mybutton:

document.getElementById("mybutton").onclick = function() ( window.location.href = "redirect-url"; );

Μπορείτε να κάνετε το ίδιο χρησιμοποιώντας τον ακόλουθο κώδικα:

Μεταβείτε στην αρχική σελίδα

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

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

Η μετάφραση του άρθρου «Ανακατεύθυνση σε άλλη σελίδα με JavaScript» ετοιμάστηκε από τη φιλική ομάδα του έργου.

Καλό Κακό

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