Πώς να αγκυροβολήσετε HTML

Πίνακας περιεχομένων:

Πώς να αγκυροβολήσετε HTML
Πώς να αγκυροβολήσετε HTML

Βίντεο: Πώς να αγκυροβολήσετε HTML

Βίντεο: Πώς να αγκυροβολήσετε HTML
Βίντεο: Γιατί το τρυπάνι HR2610 δεν λειτουργεί καλά; Πώς να διορθώσετε ένα τρυπάνι Makita; 2024, Νοέμβριος
Anonim

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

Πώς να αγκυροβολήσετε HTML
Πώς να αγκυροβολήσετε HTML

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

Θεωρία

Για να δημιουργήσετε μια άγκυρα, χρειάζεστε δύο στοιχεία:

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

Πρώτα πρέπει να δημιουργήσετε το πρώτο μέρος της άγκυρας - έναν σύνδεσμο προς αυτήν. Ένας σύνδεσμος αγκύρωσης έχει δύο μέρη: έναν σύνδεσμο σελίδας και έναν σύνδεσμο αγκύρωσης.

  1. Δημιουργήστε μια ετικέτα "a" ή οποιαδήποτε άλλη ετικέτα που υποστηρίζει το χαρακτηριστικό "href"
  2. Σε αυτήν την ετικέτα δημιουργήστε το χαρακτηριστικό "href"
  3. Καθορίστε έναν σύνδεσμο προς τη σελίδα του ιστότοπου στην τιμή του χαρακτηριστικού.
  4. Μετά τον σύνδεσμο, υποδείξτε τον σύνδεσμο προς την άγκυρα χρησιμοποιώντας το σύμβολο "#" και οποιοδήποτε όνομα για την άγκυρα (γραμμένο μαζί, για παράδειγμα: "#anchor")

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

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

  1. Δημιουργήστε ένα χαρακτηριστικό "id" στην απαιτούμενη ετικέτα.
  2. Στο χαρακτηριστικό "id", καθορίστε την τιμή του ονόματος αγκύρωσης που καθορίστηκε στο προηγούμενο βήμα. (παράδειγμα:)

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

Πρακτική

Ας σκεφτούμε πώς να δημιουργήσουμε μια άγκυρα χρησιμοποιώντας ένα συγκεκριμένο παράδειγμα.

Έχουμε μια απλή σελίδα σαν αυτή:

Εικόνα
Εικόνα

Έχουμε κείμενο στο πάνω και κάτω μέρος της σελίδας, πολλές ετικέτες "br" που δημιουργούν χώρο μεταξύ των κειμένων. Πρέπει να δημιουργήσουμε μια άγκυρα ώστε να μπορούμε να δούμε γρήγορα το κείμενο στο κάτω μέρος.

Για να το κάνετε αυτό, δημιουργήστε μια νέα ετικέτα - "a" μετά την επιγραφή "κείμενο στην κορυφή". Σε αυτό δημιουργούμε το χαρακτηριστικό "href". Για να κάνουμε την άγκυρα πιο βολική, θα γράψουμε "κάτω" στον σύνδεσμο.

Εικόνα
Εικόνα

Τώρα καθορίζουμε την τιμή "#yakor" στο χαρακτηριστικό - αυτός θα είναι ένας σύνδεσμος για το όνομα της άγκυρας.

Εικόνα
Εικόνα

Το πρώτο μέρος της άγκυρας - ο σύνδεσμος προς αυτήν - είναι έτοιμο. Τώρα το μόνο που μένει είναι να δημιουργήσουμε την ίδια την άγκυρα. Περνάμε στο επιθυμητό μέρος της σελίδας. Σε αυτήν την περίπτωση, είναι "κείμενο στο κάτω μέρος". Δεδομένου ότι αυτό είναι απλό κείμενο χωρίς ετικέτα, πρέπει να το δημιουργήσουμε. Για να το κάνετε αυτό, επισυνάψτε το κείμενο σε μια "παράγραφο" - ετικέτα "p".

Σε αυτήν την ετικέτα δημιουργούμε το χαρακτηριστικό "id" και εισάγουμε την τιμή "yakor" σε αυτό. Η τιμή "yakor" ταιριάζει με το όνομα αγκύρωσης που καθορίστηκε στον σύνδεσμο.

Εικόνα
Εικόνα

Τώρα η άγκυρα μας λειτουργεί όπως πρέπει.

Συνιστάται: