Πώς να εισαγάγετε έναν υπερσύνδεσμο σε HTML; Δημιουργία και χρήση υπερσυνδέσμων σε HTML. Πώς να κάνετε μια εικόνα σύνδεσμο σε HTML, VKontakte, στο φόρουμ και χρησιμοποιώντας CSS Image ως υπερσύνδεσμο για
Σε αυτό το μάθημα, θα μιλήσουμε για πώς να συνδέσετε σε html. Οι σύνδεσμοι χρησιμοποιούνται πολύ συχνά σε ιστότοπους, σας επιτρέπουν να πλοηγηθείτε από τη μια σελίδα του ιστότοπου στην άλλη. Ένα χαρακτηριστικό των συνδέσμων είναι ότι μπορούν να οδηγήσουν όχι μόνο σε μια ιστοσελίδα, αλλά και σε αρχεία, εικόνες κ.λπ.
Οι σύνδεσμοι μπορεί να είναι εσωτερικοί ή εξωτερικοί. Οι εσωτερικοί σύνδεσμοι πλοηγούνται σε σελίδες και αρχεία στον ίδιο ιστότοπο. Οι εξωτερικοί σύνδεσμοι οδηγούν σε ιστότοπους, έγγραφα και αρχεία τρίτων. Ταυτόχρονα, αυτοί οι τύποι συνδέσμων ρυθμίζονται πρακτικά με τον ίδιο τρόπο.
Πώς να δημιουργήσετε έναν σύνδεσμο σε HTML, παραδείγματα
1. HREF— είναι υπεύθυνος για το πού πρέπει να οδηγεί ο σύνδεσμος. Ένας τυπικός σύνδεσμος ορίζεται ως εξής: Κείμενο συνδέσμου.
2. ΣΤΟΧΟΣ— είναι υπεύθυνος για το παράθυρο στο οποίο θα ανοίξει το έγγραφο. Προκαθορισμένο νέο έγγραφοανοίγει στο τρέχον παράθυρο του προγράμματος περιήγησης. Το χαρακτηριστικό "target" σάς επιτρέπει να ανοίξετε τη σύνδεση σε ένα νέο παράθυρο του προγράμματος περιήγησης. Αυτό το χαρακτηριστικό έχει τις ακόλουθες παραμέτρους:
- _blank - φορτώνει τη σελίδα σε νέο παράθυρο.
- _self - φορτώνει τη σελίδα στο τρέχον παράθυρο.
- _parent - φορτώνει τη σελίδα στο γονικό πλαίσιο.
- _top - Ακυρώνει όλα τα καρέ και φορτώνει τη σελίδα σε νέο παράθυρο.
3. ΟΝΟΜΑ- χρησιμοποιείται για την πλοήγηση σε μια συγκεκριμένη περιοχή μέσα σε μια σελίδα. Το σύμβολο της λίρας ακολουθείται από μια λέξη-κλειδί (σελιδοδείκτη ή ετικέτα) σε εισαγωγικά. Για να μεταβείτε σε αυτήν την ετικέτα, χρησιμοποιήστε τον σύνδεσμο στον οποίο είναι γραμμένη αυτή η ετικέτα.
Παράδειγμα εξωτερικού συνδέσμου Μεταβείτε στον ιστότοπο
Μεταβείτε στον ιστότοπο
Δωρεάν μαθήματα WordPress
Παράδειγμα 4: Εικόνες ως σύνδεσμοι.
Παράδειγμα εικόνας ως σύνδεσμος
Ένα παράδειγμα συνδέσμου προς ένα συγκεκριμένο μέρος σε μια σελίδα Μετάβαση στο κείμενο
Κείμενο σελίδας...
Σε αυτό το παράδειγμα, η σελίδα φέρει την ετικέτα "list" χρησιμοποιώντας το χαρακτηριστικό "name". Η σύνδεση με αυτήν την ετικέτα θα μεταβεί σε μια συγκεκριμένη περιοχή της σελίδας.
Λήψη αρχείου
Γράψε ένα γράμμα
Μπορείτε να ορίσετε το χρώμα των συνδέσμων χρησιμοποιώντας χαρακτηριστικά που καθορίζονται στην ετικέτα "body" ως παραμέτρους. Εξετάστε αυτά τα χαρακτηριστικά:
- σύνδεσμος - σύνδεσμος χωρίς επίσκεψη, από προεπιλογή εμφανίζεται με μπλε χρώμα.
- alink - ενεργός σύνδεσμος, κόκκινος από προεπιλογή.
- Το vlink είναι ένας σύνδεσμος επίσκεψης, μωβ από προεπιλογή.
Παράδειγμα χρώματος συνδέσμου ...
Έτσι, καταλάβαμε πώς δημιουργούνται οι σύνδεσμοι σε HTML. Οι σύνδεσμοι μπορούν να διαμορφωθούν. Μπορείτε να το δείτε στο μάθημα κάνοντας κλικ στον σύνδεσμο.
Νομίζω ότι έχετε ήδη καταλάβει τι θα συζητηθούνσε αυτό το κεφάλαιο.. και ξέρετε τι είναι σύνδεσμος, αν όχι, κάντε κλικ εδώ.. Υπάρχουν διάφοροι τύποι συνδέσμων, καθώς και "μηχανισμοί" για να τους ακολουθήσετε. Σε αυτό το κεφάλαιο θα προσπαθήσω να σας πω λεπτομερώς για το πώς να καταχωρίσετε συνδέσμους, καθώς και να αφιερώσω τις περιπλοκές της εργασίας μαζί τους.
Λυρική παρέκβαση:
Μόλις στο στρατό, ο αρχηγός του επιτελείου ήρθε κοντά μου και έδωσε εντολή, παραθέτω:
Φέρτε μου αυτό το έγγραφο, αν και δεν ξέρω πού και τι είναι!! Τι στέκεσαι; Ας τρέξουμε!! Αργησα!!!
Λοιπόν, γιατί είμαι έτσι ώστε το πρόγραμμα περιήγησης, όπως εγώ τότε, να μην πέσει σε σάλο, πρέπει να γνωρίζει: το ακριβές όνομα του εγγράφου, τη διαδρομή προς το έγγραφο και το μέρος όπου θα το φέρει, ή μάλλον πού να το ανοίξω.
Επί αυτή τη στιγμήχρησιμοποιώντας το σημειωματάριο, δημιουργήσαμε μόνο ένα έγγραφο HTML, το έχω με το όνομα index.html (γιατί επέλεξα ένα τόσο περίεργο όνομα index.html και γιατί πρέπει να κοιτάξω) δεν ξέρω με τι, εσύ ο ίδιος βρήκε το όνομα, αλλά νομίζω ότι θυμάστε και ξέρετε πού βρίσκεται, εκτός φυσικά και αν είστε ο προϊστάμενος του προσωπικού μου :). Σε αυτό το έγγραφο θα προσπαθήσουμε να δημιουργήσουμε έναν σύνδεσμο προς ένα άλλο έγγραφο που δεν έχουμε ακόμη.. Πριν λοιπόν αναφερθείτε σε αυτό, πρέπει να το δημιουργήσετε, σας ευχαριστώ που το γνωρίζετε ήδη.
- Ανοίξτε το σημειωματάριο.
- Γράφουμε κώδικα για γλώσσα html. Για παράδειγμα, μια σελίδα με πολλές φωτογραφίες.
- Το αποθηκεύουμε ως σελίδα html στον ίδιο φάκελο εργασίας όπου υπάρχει ήδη το πρώτο έγγραφο που δημιουργήσαμε. Ας το ονομάσουμε, για να μην μπερδευτούμε, primer.html και ίσως και να μετονομάσουμε το πρώτο σε index.html
Τώρα ξέρω ότι έχετε δύο έγγραφα html index.html και primer.html και ότι τώρα έχετε ένα ελάχιστο σύνολο για περαιτέρω εκμάθηση.
Σύνδεσμοι κειμένου.
Ετικέτα γνωριμίας (από άγκυρα - άγκυρα), μπορείτε να περικλείσετε κείμενο ή μια εικόνα σε αυτό, η οποία θα γίνει σύνδεσμος προς ορισμένα έγγραφα. Χαρακτηριστικό ετικέτας hrefκαθορίζει το όνομα και τη διαδρομή προς το έγγραφο στο οποίο οδηγεί ο σύνδεσμος.
Όλα μαζί είναι γραμμένα ως εξής:
Ορίστε οι φωτογραφίες μου!!Όπως ίσως καταλάβατε το primer.html είναι το όνομα του δεύτερου εγγράφου html μας και η επιγραφή "Εδώ είναι οι φωτογραφίες μου!!" αυτό είναι ένα κομμάτι κειμένου από το αρχείο index.html.
Κατ' αναλογία με την ετικέτα εικόνων
η διαδρομή σύνδεσης προς το έγγραφο που ανοίγει γράφεται με τους ίδιους τρόπους:
Ορίστε οι φωτογραφίες μου!!- Και αυτό σημαίνει ότι το αρχείο primer.html τοποθετείται ένα επίπεδο ψηλότερα από το έγγραφο
Ορίστε οι φωτογραφίες μου!!- το έγγραφο βρίσκεται στον ιστότοπο www.site.ru..
Λοιπόν, ας προσπαθήσουμε; Παρακάτω είναι ένα παράδειγμα δύο εγγράφων ταυτόχρονα στα οποία καταχωρούνται σύνδεσμοι που δείχνουν ο ένας στον άλλο.
αρχείο index.html:
Πες μου, αγαπητό παιδί: σε ποιο αυτί μου βουίζει;
ΣΕ νόμοςή αριστερά?
αρχείο primer.html:
Το παράδειγμα δείχνει ότι οι σύνδεσμοι επισημαίνονται με χρώμα, από προεπιλογή το μπλε είναι ένας σύνδεσμος και το κόκκινο είναι ένας σύνδεσμος που έχετε ήδη επισκεφτεί. Αυτά τα χρώματα μπορούν να αλλάξουν χρησιμοποιώντας την ετικέτα έναρξης που είναι ήδη πολύ γνωστή σε εμάς < body > και τα χαρακτηριστικά του.
Σύνδεσμος- χρώμα συνδέσμου.ένας σύνδεσμος- το χρώμα του ενεργού συνδέσμου που κάνατε κλικ.
vlink- το χρώμα του συνδέσμου που επισκεφτήκατε.
Είναι γραμμένο έτσι:
>Συνεχίζοντας να μιλάμε για το χρώμα ενός συνδέσμου κειμένου, αξίζει να αναφέρουμε ότι, εάν είναι απαραίτητο, μπορείτε να επιβάλετε την επισήμανση χρώματος τόσο ολόκληρου του συνδέσμου όσο και των επιμέρους τμημάτων του (φράσεις, λέξεις, γράμματα) με μια γνωστή ετικέτα και την ιδιότητά του χρώμα.Ωστόσο, αυτό δεν ισχύει μόνο για το χρώμα, αλλά και ξεχωριστά μπορείτε να ορίσετε το μέγεθος, το στυλ και τη γραμματοσειρά του κειμένου. Αλλά να θυμάστε ότι ο χειρισμός του χρώματος πρέπει να γίνεται μέσα στην ετικέτα εδώ και όχι στη θάλασσα, διαφορετικά το χρώμα του συνδέσμου θα είναι είτε από προεπιλογή είτε όπως αναγράφεται στην ετικέτα
αρχείο index.html:
link="#008000" alink="#ff0000" vlink="#ffff00">
Αναζητήστε μια φράση που θα σας βοηθήσει να θυμάστε τις θέσεις των χρωμάτων στο ουράνιο τόξο.
R
ΕΝΑ
ρε
Στο
σολ
ΕΝΑ
αρχείο primer.html:
link="#008000" alink="#ff0000" vlink="#ffff00">
Κάθε
κυνηγός
ευχές
ξέρω
Οπου
κάθεται
φασιανός
Επιστρέψτε στην κεντρική σελίδα
Μία από τις σελίδες σας στον ιστότοπο Αναγκαίωςπρέπει να κληθεί index.htmlΕίναι το αρχείο με αυτό το όνομα στον ιστότοπό σας που θα αναζητήσει το πρόγραμμα ρομπότ όταν ένα άτομο εισάγει το όνομα του ιστότοπού σας. Από τη σελίδα index.htmlθα ανοίξει πρώτα, θα γίνει το κύριο. Μπορείτε να ονομάσετε τις υπόλοιπες σελίδες όπως θέλετε ... δεν υπάρχουν άλλες αποχρώσεις με ονόματα.
Σχετικά με την υπόθεση. Όταν γράφετε τα ονόματα της διαδρομής και των εγγράφων, να θυμάστε ότι, για παράδειγμα: Page.html, page.html και PAGE.html είναι τα ονόματα διαφορετικών εγγράφων! Το ίδιο ισχύει για τα ονόματα σελιδοδεικτών και τα σχέδια. Να έχετε πάντα διάκριση πεζών-κεφαλαίων όταν γράφετε κώδικα, υπάρχει μεγάλη πιθανότητα τέτοια ονόματα να μην αναγνωρίζονται από ένα συγκεκριμένο πρόγραμμα περιήγησης. Κάνε κανόνα να γράφεις τα πάντα και να τα λες μικρά με λατινικά γράμματα, τότε ο κίνδυνος του ανθρώπινου παράγοντα και οι ιδιοτροπίες των προγραμμάτων θα μηδενιστούν.
Κανόνας τριών κλικ.
Προσπαθήστε να σχηματίσετε ένα "δέντρο συνδέσμων" με τέτοιο τρόπο ώστε ένας επισκέπτης του ιστότοπου να μπορεί να μεταβεί από οποιαδήποτε σελίδα του σε οποιοδήποτε σημείο του ιστότοπου για τον ελάχιστο αριθμό κλικ στους συνδέσμους. Περισσότερες από τρεις μεταβάσεις στη σωστή θέση στον ιστότοπο δεν είναι πλέον καλές.. Η ατελείωτη φόρτωση σελίδων που δεν χρειάζεται ένα άτομο μπορεί να οδηγήσει σε νευρικό κλονισμό και πρόωρο κλείσιμο του ιστότοπου. Εξοικονομήστε χρόνο, χρήμα και νεύρα των ανθρώπων.
Το κύριο χαρακτηριστικό ενός εγγράφου HTML είναι ότι περιέχει υπερσυνδέσμους(ή απλώς συνδέσμους) σε άλλα έγγραφα, τοποθεσίες, αρχεία, εικόνες, κ.λπ. Ήταν η δυνατότητα εισαγωγής συνδέσμων σε σελίδες προς αντικείμενα εκτός αυτού που έκανε το Διαδίκτυο τόσο δημοφιλές και βολικό στη χρήση. Επομένως, κατά τη δημιουργία του ιστότοπού σας, να θυμάστε πάντα τη «μαγεία» των συνδέσμων.
Σε αυτό το μάθημα, θα μιλήσουμε για πώς να δημιουργήσετε έναν σύνδεσμοστον ιστότοπο, στη ξεχωριστή σελίδα ή αρχείο του. Θα μάθετε πώς να αλλάξετε το κείμενο ενός συνδέσμου, πώς να το ανοίξετε σε νέο παράθυρο, πώς να κάνετε έναν σύνδεσμο εικόνα, τι είναι οι εξωτερικοί και οι εσωτερικοί σύνδεσμοι και πολλά άλλα. Επιπλέον, έχετε ήδη πληροφορίες σχετικά με την εργασία με συνδέσμους, τις οποίες θίξαμε σε προηγούμενα μαθήματα (για παράδειγμα, μιλήσαμε για το πώς μπορείτε να αλλάξετε το χρώμα ενός συνδέσμου στο ).
Γενικά, αυτό το μάθημα θα κάνει την ιδέα σας για το link building ολοκληρωμένη και επαρκή. Θα καταλάβετε πώς να δημιουργήσετε έναν υπερσύνδεσμο σε HTML και γιατί. Και μάθετε να διαχειρίζεστε τις ιδιότητές του.
Οροι
§ 1. Σύνδεσμος σε αρχείο, σύνδεσμος σε τοποθεσία, σύνδεσμος σε σελίδα
Πολλές ερωτήσεις σχετικά με τη διαφορά μεταξύ ενός συνδέσμου σε ένα αρχείο και ενός συνδέσμου σε έναν ιστότοπο ή μεμονωμένη σελίδα με ανάγκασαν να δώσω την απάντηση στην αρχή αυτού του μαθήματος. Η απάντηση είναι: τίποτα. Όλοι οι σύνδεσμοι που αναφέρονται είναι εξωτερικοί αρχικόςσελίδα και δημιουργούνται με τον ίδιο τρόπο.
Για να μην εξαπλωθεί η σκέψη κατά μήκος του δέντρου, θα τα δείξω όλα με ένα παράδειγμα.
Στο πρόγραμμα περιήγησης θα δούμε αυτό:
Στο πρόγραμμα περιήγησης θα δούμε αυτό:
Όπως μπορείτε να δείτε, όλοι οι τύποι συνδέσμων δημιουργούνται με τον ίδιο ακριβώς τρόπο. Η μόνη διαφορά είναι διεύθυνσητο αντικείμενο στο οποίο αναφέρεται. Τώρα ας περάσουμε στο κύριο μέρος του μαθήματος.
§ 2. Δημιουργία εξωτερικών συνδέσμων
Οι σύνδεσμοι διαφέρουν μεταξύ τους κατά εξωτερικόςΚαι οικιακός, καθώς και στις κείμενοΚαι γραφικός. Οι εξωτερικοί σύνδεσμοι οδηγούν έξω από τα "όρια" της σελίδας html, εσωτερικοί σύνδεσμοι σε διαφορετικά μέρη το ίδιοσελίδες. Οι σύνδεσμοι κειμένου είναι κείμενο (από προεπιλογή, επισημαίνεται με μπλε και υπογραμμισμένο) και οι γραφικοί σύνδεσμοι, ως αντικείμενο στο οποίο πρέπει να κάνετε κλικ για να μεταβείτε, περιέχουν κάποιο είδος εικόνας. Όλοι αυτοί οι τύποι συνδέσμων δημιουργούνται σε HTML χρησιμοποιώντας μια ετικέτα (μια συντομογραφία για το αγγλικό anchor - anchor). Ας το εξετάσουμε πιο αναλυτικά.
Για τη δημιουργία ενός εξωτερικού συνδέσμου σε έναν ιστότοπο, σελίδα ή αρχείο, χρησιμοποιείται το χαρακτηριστικό tag - href. Αυτό το χαρακτηριστικό λαμβάνει ως τιμή του URLιστότοπος, σελίδα ή αρχείο (μιλήσαμε για αυτό παραπάνω). Μεταξύ των ετικετών και βρίσκεται το ορατό τμήμα του συνδέσμου (άγκυρα συνδέσμου), δηλαδή αυτό που βλέπουμε στην οθόνη του προγράμματος περιήγησης. Η αγκύρωση συνδέσμου μπορεί να είναι είτε απλό κείμενο (σύνδεσμος κειμένου) είτε γραφική εικόνα(σύνδεσμος-εικόνα). Ένας σύνδεσμος εικόνας δημιουργείται με την εισαγωγή μιας γνωστής ετικέτας μεταξύ των ετικετών και. Γενικά, η σύνταξη για τη δημιουργία ενός συνδέσμου μοιάζει με αυτό:
Για παράδειγμα, για να δημιουργήσετε έναν σύνδεσμο κειμένου στην αρχική σελίδα αυτού του ιστότοπου, θα πρέπει να γράψετε τον ακόλουθο κώδικα HTML:
http://www.seoded.ru/"> Αρχική σελίδα ιστότοπου
Στο πρόγραμμα περιήγησης θα μοιάζει με αυτό:
Όπως έγραψα στην αρχή αυτού του σεμιναρίου, το χρώμα του κειμένου του συνδέσμου (άγκυρα) μπορεί να αλλάξει χρησιμοποιώντας το . Σε γενικές γραμμές, μπορείτε να εφαρμόσετε το ίδιο στο κείμενο των συνδέσμων με το κύριο κείμενο της σελίδας, δηλαδή έντονη γραφή, πλάγια γραφή, επικεφαλίδες χρήσης κ.λπ.
§ 2.1 Γραφικοί σύνδεσμοι (σύνδεσμοι εικόνων)
Όπως είπα παραπάνω, για να δημιουργήσετε έναν σύνδεσμο εικόνας, πρέπει να χρησιμοποιήσετε το . Ένα παράδειγμα τέτοιου συνδέσμου μοιάζει με αυτό:
Και το πρόγραμμα περιήγησης θα δείξει:
Από προεπιλογή, το πρόγραμμα περιήγησης περιβάλλει την εικόνα στον σύνδεσμο εικόνας με ένα πλαίσιο. Εάν αυτό δεν είναι επιθυμητό, τότε το χαρακτηριστικό σύνοροετικέτα imgπρέπει να οριστεί στο 0:
border="0">
Κύρια σελίδα
§ 3. Εσωτερικοί σύνδεσμοι
Για άνετη πλοήγηση σε σελίδες με πολύ περιεχόμενο, χρησιμοποιούνται εσωτερικοί σύνδεσμοι. Με τη βοήθειά τους έφτιαξα το περιεχόμενο του μαθήματος (δείτε στην αρχή αυτής της σελίδας). Οι εσωτερικοί σύνδεσμοι δημιουργούνται με τον ίδιο τρόπο όπως οι εξωτερικοί σύνδεσμοι. Μόνο σε τιμή χαρακτηριστικού hrefυποδεικνύεται η "άγκυρα" του συνδέσμου. Το Anchor δημιουργείται από το χαρακτηριστικό όνομα:
name="anchor name">κείμενο
Και το όνομα της «άγκυρας» τίθεται αυθαίρετα. Εδώ αξίζει να πούμε ότι δεν κατανοούν όλα τα προγράμματα περιήγησης τα ρωσικά ονόματα των "αγκυρών", γι 'αυτό συνιστώ να χρησιμοποιήσετε το λατινικό αλφάβητο. Το κείμενο μεταξύ των ετικετών για τη δημιουργία μιας "άγκυρας" είναι προαιρετικό και, τις περισσότερες φορές, δεν προσδιορίζεται.
Το "I'm a meales" βρίσκεται σε εκείνα τα σημεία της σελίδας στα οποία πρέπει να μεταβεί ο χρήστης αφού κάνει κλικ στον σύνδεσμο.
Όπως είπα παραπάνω, στο χαρακτηριστικό hrefεσωτερικός σύνδεσμος αντί για τη διεύθυνση, το όνομα της επιθυμητής "άγκυρας" υποδεικνύεται με το υποχρεωτικό σύμβολο κατακερματισμού ( # ) μπροστά του. Ας πάρουμε ένα παράδειγμα.
Δημιούργησα μια "άγκυρα" με το όνομα επί κεφαλήςκαι το τοποθέτησε στον κώδικα της σελίδας δίπλα στον τίτλο αυτού του μαθήματος ("Υπερσύνδεσμοι σε HTML"). Ο κώδικας "άγκυρα" είναι ο εξής:
name="title">
href="#zagolovok">Μετάβαση στον τίτλο
Και στο πρόγραμμα περιήγησης ως εξής:
Εάν παρατηρήσετε, αφού κάνετε κλικ στον εσωτερικό σύνδεσμο προς τον τίτλο, η διεύθυνση URL στη γραμμή διευθύνσεων του προγράμματος περιήγησης έχει αλλάξει:
Στην αρχική διεύθυνση:
http://www.html
http://www..html#header
Και χρησιμοποιώντας αυτήν τη δυνατότητα, μπορείτε να συνδεθείτε σε ένα συγκεκριμένο μέρος στη σελίδα από οποιονδήποτε πόρο στο Διαδίκτυο! Δηλαδή, ας υποθέσουμε ότι δημιουργήσατε μια σελίδα με ένα μεγάλο άρθρο σχετικά με κάτι (ή αναρτήσατε μεγάλο αριθμό φωτογραφιών στη σελίδα) και τη σημειώσατε με εσωτερικούς συνδέσμους. Όντας στο , έπρεπε να αναφερθείτε όχι μόνο σε μια σελίδα με ένα άρθρο (ή φωτογραφίες), αλλά σε ένα συγκεκριμένο μέρος σε αυτήν (ή σε μια συγκεκριμένη φωτογραφία). Χρησιμοποιώντας την επιλογή με έναν εσωτερικό σύνδεσμο στη διεύθυνση, μπορείτε εύκολα να επιτύχετε αυτό που χρειάζεστε.
§ 4. Απόλυτες και σχετικές αναφορές
Κύρια σελίδα
Αλλά με σχετικούς συνδέσμους, είναι λίγο πιο περίπλοκο. Σε τέτοιους συνδέσμους, αναφέρεται είτε η διεύθυνση σχετικάτον ριζικό φάκελο του ιστότοπου (αυτός στον οποίο βρίσκεται η κύρια σελίδα) ή σε σχέση με την αρχική σελίδα. Τέτοιοι σύνδεσμοι χρειάζονται, για παράδειγμα, εάν ο ιστότοπος βρίσκεται στο οικιακός υπολογιστής. Ή δεν είναι ένας ιστότοπος, αλλά ένας δείκτης σελίδας σε άλλα έγγραφα.
Ας υποθέσουμε ότι πρέπει να συνδεθούμε σε μια σελίδα client.html, που ψέματα σε έναν φάκελοΜε κύρια σελίδαιστοσελίδα. Τότε ο σχετικός κωδικός συνδέσμου θα μοιάζει με αυτό:
/clienty.html">Πελάτες
Τώρα ας υποθέσουμε ότι στον ίδιο φάκελο με την κύρια σελίδα βρίσκεται σειρά φακέλουκαι ήδη μέσα σε αυτόβρίσκεται η σελίδα klienty.html. Τότε ο σχετικός κώδικας συνδέσμου θα γίνει ως εξής:
/zakazy/clienty.html">Πελάτες
Ας δούμε τώρα τη δημιουργία υπερσυνδέσμων σε σχέση με την αρχική σελίδα. Ας πούμε ότι έχουμε μια σελίδα τιμή.html(σελίδα πηγής) και από αυτήν πρέπει να συνδέσετε τη σελίδα client.htmlΑκολουθούν οι ακόλουθες τυπικές επιλογές:
1. Οι σελίδες price.html και clienty.html είναι σε έναν φάκελο.
clientty.html">Πελάτες
2. στον ριζικό φάκελο του ιστότοπου, page price.html βρίσκεται στο φάκελο παραγγελίας ένα επίπεδο πάνω).
Ο κώδικας θα γίνει ως εξής:
../clienty.html">Πελάτες
Δύο τελείες υποδεικνύουν ότι πρέπει να πραγματοποιήσετε έξοδο από τον τρέχοντα φάκελο σε υψηλότερο επίπεδο.
3. Η σελίδα klienty.html και ο φάκελος zakazy είναι στον ριζικό φάκελο του ιστότοπου, φάκελος επίπλων βρίσκεται στο φάκελο παραγγελίας, page price.html βρίσκεται στο φάκελο mebel(δηλαδή η σελίδα klienty.html σε σχέση με την αρχική σελίδα price.html βρίσκεται δύο επίπεδα πάνω).
../../clienty.html">Πελάτες
Δηλαδή, κάθε επίπεδο υποδεικνύεται με δύο τελείες και μια κάθετη " / ».
4. στον ριζικό φάκελο του ιστότοπου, page clienty.html βρίσκεται στο φάκελο παραγγελίας(δηλαδή τώρα η σελίδα klienty.html είναι σε σχέση με την αρχική σελίδα price.html ένα επίπεδο πιο κάτω).
zakazy/clienty.html">Πελάτες
Σε αυτήν την περίπτωση, δεν τοποθετούνται τελείες και κάθετες.
5. Η σελίδα price.html (αρχική σελίδα) και ο φάκελος zakazy είναι στον ριζικό φάκελο του ιστότοπου, φάκελος επίπλων βρίσκεται στο φάκελο παραγγελίας, page clienty.html βρίσκεται στο φάκελο mebel(δηλαδή τώρα η σελίδα klienty.html είναι σε σχέση με την αρχική σελίδα price.html βρίσκεται δύο επίπεδα παρακάτω).
zakazy/furniture/clienty.html">Πελάτες
6. Στον ριζικό φάκελο του ιστότοπου υπάρχουν δύο φάκελοι: zakazy και oplata. clienty.html σελίδα βρίσκεται στο φάκελο παραγγελίας, η αρχική σελίδα price.html βρίσκεται στο φάκελο oplata(δηλαδή και οι δύο σελίδες είναι ψέματα σε διαφορετικούς φακέλους ένα επίπεδο κάτωαπό τον ριζικό φάκελο του ιστότοπου).
../zakazy/clienty.html">Πελάτες
§ 5. Σύνδεσμος με e-mail
Ωστε να δημιουργία συνδέσμου email, χρειάζεστε αντί για τη διεύθυνση URL στην τιμή του χαρακτηριστικού hrefγράψτε μια διεύθυνση email με το πρωτόκολλο ( mailto:). Και στη συνέχεια, όταν κάνετε κλικ σε έναν τέτοιο σύνδεσμο, θα ανοίξει ένα παράθυρο πρόγραμμα αλληλογραφίαςμε μια διεύθυνση email που έχει εισαχθεί στο πεδίο "Προς". Στον κώδικα HTML μοιάζει με αυτό:
mailto: [email προστατευμένο]">Η αλληλογραφία μου
Και έτσι είναι στο πρόγραμμα περιήγησης.
Γεια σας, αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου! Όπως γνωρίζετε, για να προωθήσετε με επιτυχία έναν ιστότοπο και να αυξήσετε τη θέση του στα αποτελέσματα αναζήτησης, είναι απαραίτητο να πραγματοποιήσετε βελτιστοποίηση SEO υψηλής ποιότητας του ιστότοπου. Η έννοια του "", η οποία, με τη σειρά της, χωρίζεται σε εσωτερική και εξωτερική, είναι άρρηκτα συνδεδεμένη με έννοιες όπως "εσωτερικοί και εξωτερικοί σύνδεσμοι ιστότοπου". Επομένως, είναι πολύ σημαντικό για εμάς να γνωρίζουμε πόσοι σύνδεσμοι πρέπει να υπάρχουν στον ιστότοπο, πώς να ελέγξουμε τον αριθμό τους, πώς να αφαιρέσουμε περιττούς συνδέσμους από τον ιστότοπο και να τους κλείσουμε από την ευρετηρίαση, πώς να αυξήσουμε τη μάζα συνδέσμων κ.λπ. Για να απαντήσουμε σε όλες αυτές τις ερωτήσεις και πολλά άλλα σχετικά με τους εσωτερικούς και εξωτερικούς συνδέσμους, ας καταλάβουμε πρώτα τι είναι ένας σύνδεσμος (ή υπερσύνδεσμος) σε HTML.
Σε αυτό το άρθρο θα εξηγήσω τι είναι ένας σύνδεσμος, πώς να δημιουργήσετε έναν υπερσύνδεσμο σε HTML σε έναν ιστότοπο, πώς να ανοίξετε έναν σύνδεσμο σε ένα νέο παράθυρο, πώς να δημιουργήσετε έναν σύνδεσμο προς μια διεύθυνση ηλεκτρονικού ταχυδρομείου (e-mail) και πώς για να γίνει ένας σύνδεσμος εικόνα. Θα θίξουμε επίσης έννοιες όπως ετικέτες html και χαρακτηριστικά υπερσυνδέσμων, άγκυρα συνδέσμων, άγκυρα html (άγκυρα) και σύνδεσμοι κατακερματισμού. Λοιπόν, ας ξεκινήσουμε.
Τι είναι σύνδεσμος (υπερσύνδεσμος).
Εάν ένας υπερσύνδεσμος οδηγεί σε μια ιστοσελίδα ή αρχείο που δεν υπάρχει (διαγράφηκε, μετακινήθηκε) ή η διεύθυνσή του είναι λανθασμένη, τότε ένας τέτοιος σύνδεσμος ονομάζεται κατεστραμμένος. Δεν πρέπει να υπάρχουν κατεστραμμένοι σύνδεσμοι στον ιστότοπο, καθώς παραπλανούν τους επισκέπτες και, κάνοντας κλικ σε έναν τέτοιο σύνδεσμο, ένα άτομο είναι απίθανο να επιστρέψει στον ιστότοπό σας. Θα μιλήσουμε λεπτομερέστερα για το γιατί εμφανίζονται κατεστραμμένοι σύνδεσμοι, πώς να τους βρείτε και να τους διορθώσετε, σε ξεχωριστό άρθρο. Και τώρα ας συνεχίσουμε.
Πώς να δημιουργήσετε έναν σύνδεσμο (υπερσύνδεσμος) σε HTML σε έναν ιστότοπο.
Η σύνδεση με μια άλλη σελίδα στον ιστότοπό σας ή σε άλλη τοποθεσία είναι πολύ εύκολη. Για να δημιουργήσετε έναν υπερσύνδεσμο, πρέπει να πείτε στο πρόγραμμα περιήγησης ποιος είναι ο σύνδεσμος και να υποδείξετε τη διεύθυνση του εγγράφου στο οποίο θα οδηγήσει. Αυτό γίνεται χρησιμοποιώντας την ετικέτα HTML. και το απαιτούμενο χαρακτηριστικό href:
Εδώ η διεύθυνση URL είναι η διεύθυνση του εγγράφου στο οποίο θα μεταβείτε. Και το κείμενο του υπερσυνδέσμου που βρίσκεται ανάμεσα στις ετικέτες Και, ονομάζεται άγκυρα συνδέσμου και είναι ορατή στον επισκέπτη της ιστοσελίδας. Εκτός από το γεγονός ότι το κείμενο του συνδέσμου (άγκυρα) ενημερώνει τον αναγνώστη πού θα γίνει η μετάβαση, είναι επίσης πολύ σημαντικό στη βελτιστοποίηση μηχανών αναζήτησης (SEO), καθώς είναι ένας από τους καθοριστικούς παράγοντες που επηρεάζουν την κατάταξη του ιστότοπού σας για τις λέξεις-κλειδιά που περιέχονται σε αυτήν την άγκυρα. Συνήθως, αυτός ο τύπος κατάταξης ονομάζεται αναφορική.
Απόλυτος σύνδεσμος
Χρησιμοποιούνται για να υποδείξουν ένα έγγραφο σε άλλη τοποθεσία (εξωτερικός σύνδεσμος).
Επιτρέπεται η δημιουργία απόλυτων συνδέσμων εντός του ίδιου ιστότοπου, ωστόσο, είναι πιο σωστό να χρησιμοποιείτε σχετικές διευθύνσεις για τη δημιουργία ενός εσωτερικού συνδέσμου, οι οποίοι φαίνονται πιο σύντομοι. Όμως, κατά την ανάλυση διαφόρων τοποθεσιών, παρατήρησα ότι η συντριπτική πλειοψηφία των webmasters κάνει εσωτερικούς συνδέσμους με απόλυτες διευθύνσεις. Υπάρχει ένα πλεονέκτημα εδώ, γιατί εάν η σελίδα σας αντιγραφεί, τότε με αυτόν τον τρόπο θα λάβετε την επιστροφή εξωτερικών συνδέσμων.
Όπως μπορείτε να δείτε, με απόλυτες αναφορές, όλα είναι απλά. Είναι πιο δύσκολο με τα σχετικά, γιατί κατά τη δημιουργία τους, πρέπει να καταλάβετε ποια τιμή του χαρακτηριστικού href πρέπει να καθορίσετε, καθώς εξαρτάται από την αρχική θέση των εγγράφων. Όπως είπα, κανείς δεν ασχολείται πραγματικά με αυτό και κάνει όλους τους συνδέσμους στον ιστότοπο απόλυτους. Ωστόσο, εάν ενδιαφέρεστε να μάθετε περισσότερα σχετικά με το πώς να δημιουργείτε σωστά σχετικούς συνδέσμους για έναν ιστότοπο, μπορώ να προτείνω ένα άρθρο από τον Ντμίτρι, τον συγγραφέα του ιστολογίου ktonanovenkogo.ru. Δεν έχω δει ακόμη πιο λεπτομερή και κατανοητή εξήγηση.
Για παράδειγμα, θα δείξω πώς θα μοιάζει ο σύνδεσμος που οδηγεί στο αρχείο σε σχέση με τη ρίζα του ιστότοπου (απλώς κόψτε τα πάντα στα αριστερά της τρίτης κάθετο σε έναν παρόμοιο απόλυτο σύνδεσμο):
Σχετικός σύνδεσμος
Προς κύρια
Κείμενο συνδέσμου (άγκυρα)
Τα χρώματα και η εμφάνιση του αναδυόμενου κειμένου εξαρτώνται μόνο από τις ρυθμίσεις λειτουργικό σύστημακαι πρόγραμμα περιήγησης.
Πώς να ανοίξετε έναν σύνδεσμο σε νέο παράθυρο.
Από προεπιλογή, όταν κάνετε κλικ σε έναν σύνδεσμο, θα ανοίξει ένα νέο έγγραφο στο τρέχον παράθυρο. Ωστόσο, όταν βλέπω ιστοσελίδες προσωπικά, αυτό δεν με βολεύει. Όταν διαβάζω ένα άρθρο και ακολουθώ έναν σύνδεσμο, με βολεύει η σελίδα να ανοίγει σε νέο παράθυρο και μπορώ να συνεχίσω να διαβάζω το προηγούμενο άρθρο ανά πάσα στιγμή. Ένας άλλος λόγος για να ανοίξετε έναν σύνδεσμο σε νέο παράθυρο είναι ότι όταν πηγαίνετε στον ιστότοπο κάποιου άλλου, υπάρχει μεγάλη πιθανότητα ο αναγνώστης να μην επιστρέψει. Ειδικά αν κάνει αρκετές μεταβάσεις και απλά δεν θυμάται πού ήταν πριν από λίγα λεπτά.
Το χαρακτηριστικό tag target θα μας βοηθήσει να ανοίξουμε τον σύνδεσμο σε νέο παράθυρο. . Έχει προεπιλογή _self , το οποίο συνήθως δεν γράφεται. Για να ανοίξετε το έγγραφο σε νέο παράθυρο, αλλάξτε την τιμή του χαρακτηριστικού στόχου σε _blank :
| 1 | <a href = "http://site" target = "_blank" >Νέο παράθυρο</a> |
Νέο παράθυρο
Τι γίνεται αν όταν επισκέπτεστε τον ιστότοπο κάποιου άλλου, όπου ανοίγουν σύνδεσμοι στο τρέχον παράθυρο, θέλετε να τον ανοίξετε σε νέο; Απλά πρέπει να κάνετε κλικ σε αυτά όχι με ένα κουμπί, αλλά με τον τροχό του ποντικιού. Σε αυτήν την περίπτωση ΝΕΑ ΣΕΛΙΔΑθα ανοίξει σε νέο παράθυρο.
Πώς να δημιουργήσετε έναν σύνδεσμο σε ένα e-mail (διεύθυνση e-mail).
Κάνοντας κλικ σε αυτόν τον σύνδεσμο θα ανοίξει ένα πρόγραμμα για εργασία ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ, εγκατεστημένο από εσάς από προεπιλογή, όπου θα είναι ήδη συμπληρωμένο το πεδίο "Προς". Για να συμπληρώσετε αυτόματα το θέμα της επιστολής, πρέπει να δημιουργήσετε έναν σύνδεσμο στο e-mail της παρακάτω φόρμας:
Αντί για τις λέξεις "subject_of the letter", πρέπει να γράψετε το επιθυμητό θέμα και, φυσικά, με λατινικά γράμματα. Το κάνουμε αυτό επειδή πολλά προγράμματα περιήγησης και προγράμματα ηλεκτρονικού ταχυδρομείου δεν λειτουργούν καλά με το Κυριλλικό και υπάρχει πιθανότητα να δούμε κάθε είδους ασυναρτησίες στη γραμμή θέματος. Χρησιμοποιώντας αυτή τη μη δύσκολη συμβουλή, θα μπορείτε να δημιουργήσετε έναν σύνδεσμο προς ένα e-mail χωρίς να φοβάστε περιττές εκπλήξεις.
Πώς να κάνετε μια εικόνα σύνδεσμο.
Εδώ, το χαρακτηριστικό τίτλος είναι μια συμβουλή εργαλείου και το κείμενο που είναι γραμμένο στο χαρακτηριστικό alt (εναλλακτική πηγή πληροφοριών) θα εμφανίζεται στη σελίδα εάν οι εικόνες είναι απενεργοποιημένες στο πρόγραμμα περιήγησης. Εάν το χαρακτηριστικό τίτλος εξυπηρετεί, πρώτα απ 'όλα, για τη διευκόλυνση των αναγνωστών, τότε οι μηχανές αναζήτησης προσπαθούν να καταλάβουν τι φαίνεται στην εικόνα από το χαρακτηριστικό alt. Συνιστάται να γράφετε λέξεις-κλειδιά σε αυτές τις ετικέτες, οι οποίες θα έχουν μεγάλη σημασία στη βελτιστοποίηση μηχανών αναζήτησης. Άλλωστε, κανείς δεν ακύρωσε την αναζήτηση με εικόνες.
Πώς να δημιουργήσετε μια υπερσύνδεση (html anchor) σε μια σελίδα html.
Παραπάνω, έχουμε ήδη σκεφτεί πώς να δημιουργήσουμε έναν σύνδεσμο προς μια σελίδα ιστότοπου, ανεξάρτητα από το εσωτερικό ή το εξωτερικό. Αλλά μερικές φορές, πρέπει να δημιουργήσετε υπερσυνδέσμους στην ίδια ιστοσελίδα. Για τι? Λοιπόν, για παράδειγμα, έτσι ώστε όταν διαβάζουμε ένα πολύ μεγάλο κείμενο, να έχουμε τη δυνατότητα να μεταβούμε γρήγορα σε οποιοδήποτε μέρος του. Ή θα σας φανεί χρήσιμο όταν στην αρχή του άρθρου δημοσιεύετε το περιεχόμενό του σημείο προς σημείο. Στη συνέχεια, κάνοντας κλικ στο αντικείμενο που επιθυμείτε, θα μεταβείτε αμέσως στο υλικό που σας ενδιαφέρει. Τέτοιες μεταβάσεις γίνονται χρησιμοποιώντας σελιδοδείκτες που είναι προεγκατεστημένοι στο σώμα του άρθρου, που ονομάζονται άγκυρες html (άγκυρα, που δεν πρέπει να συγχέεται με άγκυρα κειμένου) και ειδικούς συνδέσμους κατακερματισμού.
Για να δημιουργήσετε μια άγκυρα, δημιουργήστε πρώτα έναν σελιδοδείκτη με οποιοδήποτε όνομα (χρησιμοποιούνται μόνο λατινικά γράμματα, αριθμοί, παύλες και κάτω παύλες) που καθορίζεται χρησιμοποιώντας το χαρακτηριστικό name της ετικέτας :
Πάνω
| 1 | <a href = "javascript:scroll(0,0);" > |
Ο Dmitry KtoNaNovenkogo συμβουλεύει έναν άλλο τρόπο για να ορίσετε σελιδοδείκτες στο κείμενο μιας ιστοσελίδας, χωρίς τη χρήση αγκυρώσεων html. Για να γίνει αυτό, δημιουργούμε έναν σελιδοδείκτη από οποιαδήποτε ετικέτα HTML που είναι διαθέσιμη στη σελίδα, ορίζοντας ένα χαρακτηριστικό καθολικού αναγνωριστικού σε αυτήν. Για παράδειγμα, κάνουμε έναν σελιδοδείκτη από την ετικέτα κεφαλίδας h3:
Κείμενο τίτλου
Είναι σημαντικό να γράψετε ένα λατινικό γράμμα στο χαρακτηριστικό id ως τον πρώτο χαρακτήρα του ονόματος αγκύρωσης και, στη συνέχεια, μπορείτε να χρησιμοποιήσετε οποιουσδήποτε άλλους επιτρεπόμενους χαρακτήρες.
Ας επιστρέψουμε, για παράδειγμα, στην επικεφαλίδα " " και μετά συνεχίζουμε.
Μπορείτε να χρησιμοποιήσετε συνδέσμους κατακερματισμού για να μεταβείτε στο σωστό μέρος όχι μόνο σε μία σελίδα, αλλά και για να μεταβείτε σε άλλη σελίδα του ιστότοπου. Για να το κάνουμε αυτό, τοποθετούμε την άγκυρα html στη σωστή θέση στη σωστή σελίδα και στον ίδιο τον σύνδεσμο κατακερματισμού, πριν από το σύμβολο κατακερματισμού, γράφουμε τη διεύθυνση αυτής της σελίδας. Για παράδειγμα:
Σύνδεση κειμένου με άγκυρα σελιδοδεικτών html
Τύποι και χρώματα υπερσυνδέσμων σε HTML.
- Ένας σύνδεσμος χωρίς επίσκεψη είναι μπλε και υπογραμμισμένος.
- Ενεργός σύνδεσμος - Γίνεται κόκκινο στο διάστημα μεταξύ του κλικ στον σύνδεσμο και της έναρξης της φόρτωσης της νέας σελίδας. Φυσικά, δεν είναι σε αυτή την κατάσταση εδώ και πολύ καιρό.
- Σύνδεσμος επίσκεψης - αλλάζει το χρώμα του σε μωβ αφού κάνετε κλικ σε αυτόν.
Μπορείτε να αλλάξετε το χρώμα των υπερσυνδέσμων σε ένα έγγραφο html χρησιμοποιώντας την ετικέτα
και τα ακόλουθα χαρακτηριστικά:- Σύνδεσμος - το χρώμα των συνδέσμων που δεν έχουν επισκεφτεί.
- Alink - ενεργό χρώμα συνδέσμου.
- Το Vlink είναι το χρώμα των συνδέσμων που επισκέπτεστε.
Όλα τα παραπάνω χαρακτηριστικά μπορούν να συνδυαστούν:
| 1 | <σύνδεσμος σώματος = "#1122cc" vlink = "#6611cc" alink = "#d14836" > |
Ελπίζω να είναι πλέον σαφές πώς να δημιουργήσετε μια υπερ-σύνδεση σε μια σελίδα HTML και σε ένα e-mail, πώς να κάνετε μια εικόνα σύνδεσμο, τι είναι οι αγκυρώσεις κειμένου, οι σύνδεσμοι κατακερματισμού και οι αγκυρώσεις html, οι ετικέτες html και οι ιδιότητες συνδέσμων. Έκανα το καλύτερο δυνατό για να περιγράψω λεπτομερώς τι είναι οι σύνδεσμοι σε HTML και τι είναι. Να σας υπενθυμίσω ότι η εισαγωγή υπερσυνδέσμων σε κείμενο γίνεται μόνο σε λειτουργία HTML.
Δεν χρειάστηκε ποτέ να γράψω τόσο μεγάλα άρθρα, με περισσότερους από 10.000 χαρακτήρες. Αλλά αυτό το θέμα των συνδέσμων δεν έχει εξαντληθεί, για να συνεχιστεί.
Εάν αυτό το άρθρο ήταν χρήσιμο για εσάς, κάντε κλικ στα κουμπιά των κοινωνικών δικτύων παρακάτω. Τα λέμε στις σελίδες!
Καλημέρα σε όλους, αγαπητοί μου φίλοι και αναγνώστες. Ελπίζω να αποφασίσατε να πάρετε μέρος στον διαγωνισμό μου και να γράψετε για την πορεία σας στο blog. Λοιπόν, θα ήθελα να συνεχίσουμε τη μελέτη μας για τη γλώσσα html και σήμερα θα ήθελα να σας πω για ένα από τα πιο σημαντικά στοιχεία, δηλαδή τους υπερσυνδέσμους.
Ναι, χωρίς τέτοιους υπερσυνδέσμους, το Διαδίκτυο δεν θα ήταν τόσο βολικό. Όχι, λέω ψέματα. Δεν θα ήταν καθόλου βολικό από άποψη πλοήγησης. Μπορείτε να φανταστείτε το διαδίκτυο χωρίς αυτά; Εγώ προσωπικά όχι.
Και σήμερα θα μάθουμε πώς να εισάγουμε έναν υπερσύνδεσμο σε html. Πρώτα όμως θα ήθελα να σας ρωτήσω: Ξέρετε τι είναι υπερσύνδεσμος και σε τι διαφέρει από έναν κανονικό σύνδεσμο; Όλα είναι πολύ απλά εδώ: ένας σύνδεσμος είναι μια απλή γραφή πληροφοριών που αναφέρεται σε κάποιο έγγραφο. Ταυτόχρονα, δεν μπορείτε να κάνετε κλικ σε αυτό το κείμενο (δεν θα συμβεί τίποτα), αλλά ξέρετε πού να αναζητήσετε πληροφορίες.
Παράδειγμα: Μπορείτε να μάθετε πώς να επιλέγετε μαλλιά στο Photoshop στο //website/adobe-photoshop/kak-vydelit-volosy/
Ένας υπερσύνδεσμος είναι το ίδιο κείμενο, μόνο που η ουσία του έγκειται στο γεγονός ότι μπορείτε να κάνετε κλικ σε αυτό το κείμενο και να φτάσετε στην επιθυμητή σελίδα, ιστότοπο ή οποιοδήποτε άλλο αντικείμενο. Επιπλέον, το ίδιο το κείμενο μπορεί να είναι οποιοδήποτε, ενώ η διεύθυνση είναι ήδη γραμμένη ξεχωριστά μέσα και μπορεί να είναι εντελώς διαφορετική. Αλλά όπως και να έχει, παρόλα αυτά, στην καθομιλουμένη ονομάζονται απλώς σύνδεσμοι. Ακολουθεί ένα παράδειγμα υπερσύνδεσης:
Μπορείτε να διαβάσετε για το πώς να επιλέξετε σωστά τα μαλλιά στο Photoshop σε ένα από τα δικά μου.
ΤΕΛΟΣ παντων. Καλή θεωρία. Τώρα ας προχωρήσουμε στην εξάσκηση και ας δούμε ποιοι είναι υπεύθυνοι για όλα αυτά τα πράγματα.
Η ετικέτα ζεύγους είναι υπεύθυνη για την υπερ-σύνδεση, αλλά από μόνη της δεν αντιπροσωπεύει τίποτα. Πάντα σε συνδυασμό με μια ιδιότητα. Και σε αυτήν την περίπτωση, πρέπει να συνταγογραφούμε συνεχώς αυτό ακριβώς το href. Στην τιμή του χαρακτηριστικού, βάζουμε τον ίδιο τον σύνδεσμο προς τον επιθυμητό πόρο. Και στο ίδιο το περιεχόμενο, γράφουμε το ίδιο το κείμενο, το οποίο θα πρέπει να γίνει κλικ (εργασία στο κλικ). Δείτε το παράδειγμα και νομίζω ότι θα καταλάβετε τα πάντα.
Μηχανή αναζήτησης Yandex
Όπως καταλαβαίνετε, σε αυτό το παράδειγμα, έγραψα ότι όταν κάνετε κλικ σε ένα κομμάτι κειμένου "μηχανή αναζήτησης Yandex", ένα άτομο θα κατευθυνθεί στη διεύθυνση που αναγράφεται στην τιμή του χαρακτηριστικού href.
Νομίζω ότι πολλοί από εσάς γνωρίζετε ότι υπάρχουν εσωτερικοί και εξωτερικοί σύνδεσμοι. Οι εσωτερικοί σύνδεσμοι πραγματοποιούνται σε έναν κατάλογο, δηλαδή στον ιστότοπο, και οι εξωτερικοί σύνδεσμοι οδηγούν σε κάποιον πόρο τρίτου μέρους. Και τώρα θα σας δείξω πώς να κάνετε και τα δύο.
Εσωτερικές μεταβάσεις
Αρχείο στον ίδιο φάκελο
Αλλά μια τέτοια μετάβαση θα λειτουργήσει με την προϋπόθεση ότι το αρχείο στο οποίο συνδέεστε βρίσκεται στον ίδιο φάκελο με το αρχείο στο οποίο τοποθετήσατε τη σύνδεση. Για άλλες επιλογές, όλα είναι λίγο διαφορετικά.
Αρχείο σε άλλο φάκελο
- Ανοίξτε το αρχείο pushkin.html στο Notepad++
- Τώρα βρείτε τη λέξη φωτογραφία και τυλίξτε την σε ετικέτες<href> .
- Και τώρα προσοχή! Στην τιμή του χαρακτηριστικού, γράφουμε τη διαδρομή σε σχέση με το αρχείο που επεξεργαζόμαστε, δηλαδή το ίδιο το pushkin.html. Θα πρέπει να έχετε κάτι σαν αυτό:
Τι κάναμε τώρα; Και κάναμε το εξής: αφού η διαδρομή προς τη φωτογραφία βρίσκεται σε έναν ξεχωριστό φάκελο img, ο οποίος βρίσκεται στον ίδιο φάκελο με το αρχείο pushkin.html, τότε στην τιμή του χαρακτηριστικού πρέπει πρώτα να γράψουμε το όνομα του φακέλου και στη συνέχεια μέσα από την κάθετο (/) το πλήρες όνομα του εγγράφου (στις φωτογραφίες της περίπτωσής μας).
Τώρα αποθηκεύστε και εκτελέστε το αρχείο pushkin.html στο πρόγραμμα περιήγησής σας. Θα δείτε ότι η λέξη «Φωτογραφία» έχει επισημανθεί με μπλε χρώμα και έχει γίνει κλικ, πράγμα που σημαίνει ότι κάνοντας κλικ σε αυτόν τον σύνδεσμο θα μεταφερθούμε στο αρχείο fofo.jpg, το οποίο βρίσκεται στον φάκελο img.
Λοιπόν, πώς; Ολα ΕΝΤΑΞΕΙ? Μη διστάσετε να ρωτήσετε αν χρειάζεστε κάτι.
Εξωτερικές μεταβάσεις
Και φυσικά, δεν μπορούμε παρά να αναφέρουμε εξωτερικούς συνδέσμους, αφού κάνουμε κλικ στους οποίους θα μεταβούμε σε έναν εντελώς διαφορετικό ιστότοπο. Αλλά δεν υπάρχει τίποτα περίπλοκο εδώ. Το όλο θέμα είναι ότι ρίχνετε στην τιμή href την πλήρη διεύθυνση του ιστότοπου ή της ιστοσελίδας. Έδειξα ένα παράδειγμα με το Yandex παραπάνω. Αλλά εδώ είναι ένα άλλο παράδειγμα για εσάς:
Θα σπουδάσω για το master of social projects.Εδώ φτάνουμε σε μια συγκεκριμένη σελίδα ενός συγκεκριμένου ιστότοπου.
Άνοιγμα σε νέο παράθυρο
Από προεπιλογή, όταν κάνετε κλικ σε έναν σύνδεσμο, το έγγραφο ανοίγει στο ίδιο παράθυρο με τη σελίδα σας, δηλ. η σελίδα σας θα καταρρεύσει. Και αυτό δεν είναι καλό. Ειδικότερα, για έργα προωθούμενου περιεχομένου ή ιστολόγια, συνιστάται όταν κάνετε κλικ σε έναν σύνδεσμο, το έγγραφο να ανοίγει σε νέο παράθυρο ή καρτέλα χωρίς να κλείνει τη σελίδα σας.
Το χαρακτηριστικό target με την τιμή "_blank" θα μας βοηθήσει σε αυτό. Δεν υπάρχει τίποτα περίπλοκο εδώ. Απλώς πρέπει να το επικολλήσετε μέσα στην ετικέτα ανοίγματος μετά την τιμή του χαρακτηριστικού href. Ας πάρουμε αυτό το απόσπασμα από το αρχείο lukomorye.html, όπου δημιουργήσαμε έναν σύνδεσμο προς τη σελίδα pushkin.html, μόνο που τώρα θα γράψουμε αυτό ακριβώς το χαρακτηριστικό. Θα πρέπει να μοιάζει με αυτό:
Από το ποίημα Ruslan and Lyudmila (Συγγραφέας - A.S. Pushkin)
Λοιπόν, όλα είναι ξεκάθαρα εδώ. Τώρα, όταν κάνετε κλικ στο περιεχόμενο, η επιθυμητή σελίδα θα ανοίξει σε νέο παράθυρο. Αυτό το πράγμα είναι πολύ απαραίτητο, γιατί αν δεν το κάνετε εγγραφή, τότε ο χρήστης θα φύγει απλά από τη σελίδα σας. Και έτσι, σε κάθε περίπτωση, θα παραμείνει σε αυτό, μόνο αν δεν το κλείσει συγκεκριμένα. Προσπαθήστε να κάνετε τα πάντα μόνοι σας, απλά κάντε τα πάντα όμορφα με τα χέρια σας. Δεν χρειάζεται αντιγραφή και επικόλληση.
Κάπως έτσι. Φαίνεται ότι είπε όλα τα πιο σημαντικά πράγματα, αλλά αν θέλετε να κινηθείτε προς αυτή την κατεύθυνση και να μάθετε HTML και CSS για να δημιουργήσετε επαγγελματικούς ιστότοπους, ιστολόγια, ακόμη και ηλεκτρονικά καταστήματα, τότε φροντίστε να ελέγξετε υπέροχο μάθημα βίντεοσχετικά με αυτό το θέμα. Τα μαθήματα είναι πραγματικά εξαιρετικά και απευθύνονται πραγματικά σε άτομα που είναι ακόμα ελάχιστα εξοικειωμένα με τη δημιουργία ιστοσελίδων ή δεν είναι καθόλου εξοικειωμένα.
Λοιπόν, αυτό ολοκληρώνει το μάθημά μας για σήμερα. Ελπίζω να σας άρεσε το άρθρο μου και θα χαρώ αν γίνετε τακτικός αναγνώστης μου. Μην ξεχάσετε λοιπόν να εγγραφείτε στις ενημερώσεις του ιστολογίου μου, για να μην χάσετε κάτι ενδιαφέρον. Λοιπόν, σας εύχομαι καλή επιτυχία σε όλες τις προσπάθειές σας. Αντίο!
Με εκτίμηση, Ντμίτρι Κόστιν.
