Νομίζω ότι έχετε ήδη καταλάβει τι θα συζητηθεί σε αυτό το κεφάλαιο .. και ξέρετε τι είναι σύνδεσμος, αν όχι, κάντε κλικ εδώ .. Υπάρχουν διάφοροι τύποι συνδέσμων, καθώς και "μηχανισμοί" για να τους ακολουθήσετε. Σε αυτό το κεφάλαιο θα προσπαθήσω να σας πω λεπτομερώς για το πώς να καταχωρίσετε συνδέσμους, καθώς και να αφιερώσω τις περιπλοκές της εργασίας μαζί τους.
Λυρική παρέκβαση:
Μόλις στο στρατό, ο αρχηγός του επιτελείου ήρθε κοντά μου και έδωσε εντολή, παραθέτω:
Φέρτε μου αυτό το έγγραφο, αν και δεν ξέρω πού και τι είναι!! Τι στέκεσαι; Ας τρέξουμε!! Αργησα!!!
Λοιπόν, γιατί είμαι έτσι ώστε το πρόγραμμα περιήγησης, όπως εγώ τότε, να μην πέσει σε σάλο, πρέπει να γνωρίζει: το ακριβές όνομα του εγγράφου, τη διαδρομή προς το έγγραφο και το μέρος όπου θα το φέρει, ή μάλλον πού να το ανοίξω.
Στο αυτή τη στιγμήμε τη βοήθεια του σημειωματάριου δημιουργήσαμε μόνο ένα έγγραφο 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 προστατευμένο]">Η αλληλογραφία μου
Και έτσι είναι στο πρόγραμμα περιήγησης.
Γεια σας αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου. Σήμερα θα μιλήσουμε για πώς να δημιουργήσετε υπερσυνδέσμους σε html, μάθετε πώς να χρησιμοποιείτε την ετικέτα "A" και τα χαρακτηριστικά href και target, μάθετε πώς να κάνετε μια εικόνα σύνδεσμο.
Οι υπερσύνδεσμοι είναι τα βασικά στοιχεία μιας ιστοσελίδας. Συνδέουν ανόμοιες σελίδες html σε έναν πλήρη ιστότοπο. Συνήθως οι σύνδεσμοι εμφανίζονται ως ένα υπογραμμισμένο κομμάτι κειμένου, όταν τοποθετείτε το δείκτη του ποντικιού πάνω του, ο δρομέας του ποντικιού γίνεται δείκτης.
Επιπλέον, ένας υπερσύνδεσμος μπορεί να μοιάζει γραφική εικόναή ένα κομμάτι του. Όταν γίνεται κλικ σε έναν σύνδεσμο, το πρόγραμμα περιήγησης φορτώνει την ιστοσελίδα που καθορίζεται στα χαρακτηριστικά του συνδέσμου. Οι υπερσύνδεσμοι σάς επιτρέπουν να συνδέεστε σε εσωτερικές σελίδες του ιστότοπού σας, καθώς και σε οποιουσδήποτε άλλους πόρους στο Διαδίκτυο.
Δημιουργήστε υπερσυνδέσμους κειμένου
Ας ξεκινήσουμε απλά και ας εξετάσουμε τη δημιουργία κανονικών κείμενοσυνδέσεις. Για να δημιουργήσετε έναν υπερσύνδεσμο κειμένου, αρκεί να περικλείσετε οποιοδήποτε κομμάτι κειμένου που θα πρέπει να γίνει σύνδεσμος ετικέτα ζεύγους Α. Και στο χαρακτηριστικό hrefΓια αυτήν την ετικέτα, πρέπει να καθορίσετε τη διεύθυνση της ιστοσελίδας προορισμού στο Διαδίκτυο:
Αυτό το κομμάτι κώδικα html δημιουργεί μια παράγραφο που περιέχει έναν σύνδεσμο. Ο σύνδεσμος οδηγεί στην ιστοσελίδα page15.html, η οποία βρίσκεται στον φάκελο καταλόγου που είναι αποθηκευμένος στον ριζικό φάκελο του ιστότοπου www.site.ru.
Εάν η σελίδα δεν χρησιμοποιεί στυλ cssκαι δεν εφαρμόζονται πρόσθετα χαρακτηριστικά, τότε οι υπερσύνδεσμοι στη σελίδα εμφανίζονται από προεπιλογή ως εξής:
- Οι κανονικοί σύνδεσμοι εμφανίζονται με μπλε χρώμα.
- Οι σύνδεσμοι που επισκεφτήκατε επισημαίνονται με μωβ.
- η ενεργή υπερ-σύνδεση (στην οποία γίνεται κλικ αυτήν τη στιγμή) εμφανίζεται με κόκκινο χρώμα, αλλά δεδομένου ότι ο χρόνος μεταξύ του κλικ στον σύνδεσμο και της έναρξης της φόρτωσης ενός νέου εγγράφου είναι αρκετά σύντομος, αυτή η κατάσταση του συνδέσμου είναι πολύ μικρή.
- Το κείμενο του συνδέσμου είναι υπογραμμισμένο.
Διευθύνσεις Διαδικτύου
Η πλήρης διεύθυνση περιέχει τη διεύθυνση Διαδικτύου του διακομιστή Ιστού και τη διαδρομή προς το αρχείο που πρόκειται να ανακτηθεί. Για παράδειγμα:
Εδώ www.site.ru είναι η διεύθυνση του διακομιστή web και /catalog/page15.html είναι η διαδρομή προς το αρχείο σε αυτόν τον διακομιστή. Γενικά, οι πλήρεις διευθύνσεις Διαδικτύου χρησιμοποιούνται συνήθως μόνο εάν είναι απαραίτητο να δημιουργηθεί ένας υπερσύνδεσμος που να οδηγεί σε ορισμένους πόρους που βρίσκονται σε άλλο ιστότοπο.
Όταν δημιουργείτε υπερσυνδέσμους που οδηγούν σε αρχεία που αποτελούν μέρος της ίδιας τοποθεσίας με την τρέχουσα ιστοσελίδα, είναι καλύτερο να χρησιμοποιείτε συντομευμένες διευθύνσεις Διαδικτύου. Η συντομευμένη διεύθυνση περιέχει μόνο τη διαδρομή προς το αρχείο στο διακομιστή, επειδή Η διεύθυνση του διακομιστή web είναι ήδη γνωστή στο πρόγραμμα περιήγησης.
Οι συντομευμένες διευθύνσεις Διαδικτύου είναι απόλυτοςκαι συγγενής. Η απόλυτη διεύθυνση καθορίζει τη διαδρομή προς το αρχείο προορισμού σε σχέση με τον ριζικό φάκελο του ιστότοπου. Μια τέτοια διεύθυνση ξεκινά με τον χαρακτήρα / (κάθετο), που υποδηλώνει τον ριζικό φάκελο. Για παράδειγμα, η διεύθυνση "/page15.html" δείχνει το αρχείο page15.html, το οποίο είναι αποθηκευμένο στον ριζικό φάκελο του ιστότοπου. Ή η διεύθυνση "/catalog/page.html" δείχνει το αρχείο page.html, το οποίο τοποθετείται στον φάκελο καταλόγου, ένθετο στον ριζικό φάκελο του ιστότοπου.
Η σχετική διεύθυνση είναι μια διαδρομή αρχείου σε σχέση με το αρχείο της τρέχουσας ιστοσελίδας. Οι σχετικές διευθύνσεις δεν περιέχουν μια πρώτη κάθετο. Ας δούμε μερικά παραδείγματα.
Για παράδειγμα, η διεύθυνση "page.html" οδηγεί σε ένα αρχείο που βρίσκεται στον ίδιο φάκελο με το αρχείο της τρέχουσας ιστοσελίδας. Και η διεύθυνση "catalog/page.html" θα ανοίξει το αρχείο page.html που είναι αποθηκευμένο στον φάκελο καταλόγου, που είναι ένθετο στο φάκελο όπου είναι αποθηκευμένη η τρέχουσα σελίδα.
Χρησιμοποιώντας δύο τελείες στην αρχή της διεύθυνσης, μπορείτε να καθορίσετε φακέλους του προηγούμενου επιπέδου ένθεσης. Έτσι, για παράδειγμα, η διεύθυνση ".../page.html" δείχνει το page.html που είναι αποθηκευμένο στο φάκελο στον οποίο είναι ένθετος ο φάκελος με την τρέχουσα ιστοσελίδα.
Σύνδεσμος προς την αλληλογραφία
Με τη χρήση γλώσσα htmlμπορείτε να δημιουργήσετε υπερσυνδέσμους αλληλογραφίας, κάνοντας κλικ στην οποία ξεκινά το πρόγραμμα πελάτη αλληλογραφίας. Κατά τον καθορισμό μιας διεύθυνσης σε ένα χαρακτηριστικό hrefβάλτε πριν από το email "mailto:", δηλ. κάτι σαν αυτό: href="mailto: [email προστατευμένο]Επιπλέον, μετά την άνω τελεία, δεν πρέπει να υπάρχουν κενά πριν από την ταχυδρομική διεύθυνση.
Πώς να κάνετε μια εικόνα σύνδεσμο
Δεδομένου ότι είναι ένα ενσωματωμένο στοιχείο μιας σελίδας html, απλώς εισάγουμε αυτήν την ετικέτα μέσα στην ετικέτα "A" αντί για κείμενο:
εκτός απλή επιλογήδημιουργώντας μια εικόνα υπερ-σύνδεσης, η html σάς επιτρέπει να μετατρέψετε ένα μέρος μιας γραφικής εικόνας σε υπερσύνδεσμο. Επιπλέον, είναι δυνατός ο διαχωρισμός της εικόνας σε μέρη, καθένα από τα οποία θα είναι ένας υπερσύνδεσμος που θα δείχνει τη διεύθυνσή του στο Διαδίκτυο. Αυτή η επιλογή ονομάζεται χάρτης εικόνας.
Επί του παρόντος, ο χάρτης εικόνας χρησιμοποιείται σπάνια, καθώς απαιτεί πολύ μεγάλο αριθμό ετικετών και ο κώδικας html γίνεται δυσκίνητος και μπερδεμένος.
Η εικόνα-χάρτης δημιουργείται σε τρία στάδια:
Ο πλήρης κώδικας html που δημιουργεί τον χάρτη εικόνας μοιάζει με αυτό:
Εδώ έχουμε δημιουργήσει μια ορθογώνια περιοχή που δείχνει προς την κύρια σελίδα του ιστότοπου webcodius, μια κυκλική περιοχή που δείχνει τη σελίδα με όλα τα άρθρα στον ίδιο ιστότοπο και μια πολυγωνική περιοχή χωρίς σύνδεσμο.
Άγκυρες
Άγκυρα ή επιγραφή- πρόκειται για ένα είδος υπερσυνδέσμου που επισημαίνει ένα ξεχωριστό τμήμα μιας σελίδας html και σας επιτρέπει να πλοηγηθείτε στα περιεχόμενα του εγγράφου.
Μπορεί να έχετε ήδη δει σελίδες όπου, αμέσως μετά την επικεφαλίδα, υπήρχε μια λίστα με τίτλους ενοτήτων άρθρων, κάνοντας κλικ στην οποία θα μεταφερθείτε στην ενότητα της καταχώρισης ενδιαφέροντος.
Οι άγκυρες δημιουργούνται, όπως οι κανονικοί υπερσύνδεσμοι, χρησιμοποιώντας ζευγαρωμένη ετικέτα A, μόνο αντί για το χαρακτηριστικό href, τοποθετείται σε αυτό το χαρακτηριστικό name ή id, η τιμή του οποίου ορίζει το μοναδικό αναγνωριστικό της ετικέτας. Σε αυτήν την περίπτωση, η ίδια η ετικέτα "A" συνήθως δεν έχει περιεχόμενο:
Υπάρχει ένας δεύτερος τρόπος για να δημιουργήσετε μια άγκυρα που δεν χρειάζεται να δημιουργήσετε κενά στοιχεία "Α". Ή μπορείτε να χρησιμοποιήσετε στοιχεία που βρίσκονται ήδη στην ιστοσελίδα, όπως . Για να το κάνετε αυτό, προσθέστε το χαρακτηριστικό universal id στο απαιτούμενο στοιχείο:
Γεια σας, αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου! Όπως γνωρίζετε, για την επιτυχημένη προβολή του ιστότοπου και την αύξηση της θέσης του στα αποτελέσματα Αποτελέσματα αναζήτησης, είναι απαραίτητο να πραγματοποιηθεί βελτιστοποίηση 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 και σε ένα ηλεκτρονικό ταχυδρομείο, πώς να κάνετε μια εικόνα σύνδεσμο, τι είναι οι αγκυρώσεις κειμένου, οι σύνδεσμοι κατακερματισμού και οι αγκυρώσεις html, οι ετικέτες html και οι ιδιότητες συνδέσμων. Έκανα το καλύτερο δυνατό για να περιγράψω λεπτομερώς τι είναι οι σύνδεσμοι σε HTML και τι είναι. Να σας υπενθυμίσω ότι η εισαγωγή υπερσυνδέσμων σε κείμενο γίνεται μόνο σε λειτουργία HTML.
Δεν χρειάστηκε ποτέ να γράψω τόσο μεγάλα άρθρα, με περισσότερους από 10.000 χαρακτήρες. Αλλά αυτό το θέμα των συνδέσμων δεν έχει εξαντληθεί, για να συνεχιστεί.
Εάν αυτό το άρθρο ήταν χρήσιμο για εσάς, κάντε κλικ στα κουμπιά των κοινωνικών δικτύων παρακάτω. Τα λέμε στις σελίδες!
Το κύριο χαρακτηριστικό γνώρισμα των εγγράφων HTML είναι η δημιουργία ειδικών ενεργών συνδέσμων προς άλλα έγγραφα, που ονομάζονται υπερσύνδεσμοι.
Όταν τοποθετείτε το ποντίκι πάνω τους, ο κέρσορας παίρνει τη μορφή ενός χεριού και όταν κάνετε κλικ στο παράθυρο του προγράμματος περιήγησης, ανοίγει μια άλλη ιστοσελίδα ή ένα συγκεκριμένο έγγραφο. Οι υπερσύνδεσμοι μπορεί να είναι είτε κείμενο είτε εικόνα.
Θα λειτουργήσει εάν το έγγραφο προορισμού βρίσκεται στον ίδιο κατάλογο με τον τρέχοντα. Επίσης, μπορείτε να καθορίσετε τη διαδρομή προς το αρχείο σε σχέση με τον ριζικό κατάλογο του ιστότοπου χρησιμοποιώντας τον χαρακτήρα "/".
Για παράδειγμα:
Για παράδειγμα:
Η δημιουργία υπερσυνδέσμων σε HTML είναι μια απλή διαδικασία. Από προεπιλογή, είναι υπογραμμισμένα και τονισμένα με μπλε χρώμα, ενώ τα επισκέψιμα είναι μωβ.
- σύνδεσμος - χρώμα συνδέσμων ιστοσελίδων.
- vlink - χρώμα των υπερσυνδέσμων ιστοσελίδων που έχετε επισκεφθεί.
- Το alink είναι το χρώμα των ενεργών συνδέσμων στην ιστοσελίδα.
Για παράδειγμα:
Τα καθορισμένα χαρακτηριστικά καθορίζουν τα χρώματα συνδέσμου ολόκληρου του εγγράφου HTML. Εάν επικολλήσετε αυτόν τον κωδικό σε μια ετικέτα
, δεν χρειάζεται να ορίζετε το χρώμα της γραμματοσειράς κάθε φορά.Βασικά χαρακτηριστικά των υπερσυνδέσμων
1. τίτλος - σας επιτρέπει να δημιουργήσετε ένα κείμενο συμβουλής εργαλείου που εμφανίζεται όταν τοποθετείτε το δείκτη του ποντικιού πάνω από έναν υπερσύνδεσμο.
Για παράδειγμα:
2. target - λέει στο πρόγραμμα περιήγησης σε ποιο παράθυρο να ανοίξει τη σύνδεση.
Μπορεί να λάβει τις ακόλουθες τιμές:
- _blank - ο σύνδεσμος πρέπει να ανοίξει σε νέα καρτέλα.
- _self - Ο υπερσύνδεσμος HTML πρέπει να ανοίξει στην τρέχουσα καρτέλα. Προεπιλεγμένη τιμή;
- _parent - το πρόγραμμα περιήγησης θα πρέπει να φορτώσει τον σύνδεσμο στο γονικό παράθυρο.
- _top - η υπερ-σύνδεση φορτώνεται σε ολόκληρο τον χώρο του παραθύρου του προγράμματος περιήγησης (το πλαίσιο εξαφανίζεται σε αυτήν την περίπτωση).
Για παράδειγμα:
Όνομα συνδέσμου
Έτσι, η απάντηση στην ερώτηση που κάνουν συχνά οι αρχάριοι webmasters " πώς να εισάγετε υπερσύνδεσμο σε html» έλαβε.
Σας ευχόμαστε καλή επιτυχία στην εκμάθηση προγραμματισμού Ιστού!