Τρόπος δημιουργίας υπερ-συνδέσεων HTML χρησιμοποιώντας το χαρακτηριστικό HREF στις ετικέτες

Ένας ιστότοπος είναι μια συλλογή ιστοσελίδων. Και αυτές οι σελίδες πρέπει να συνδέονται ή να συνδέονται με κάτι. Και για να το κάνουμε αυτό, πρέπει να χρησιμοποιήσουμε μια ετικέτα που παρέχεται από HTML: την aετικέτα.

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

Σε αυτόν τον οδηγό, θα σας δείξω πώς να δημιουργήσετε υπερσυνδέσμους HTML χρησιμοποιώντας το hrefχαρακτηριστικό στην aετικέτα.

  • Τι είναι ο σύνδεσμος;
  • Πώς να δημιουργήσετε εσωτερικούς συνδέσμους
  • Περιηγηθείτε σε σελίδες στο ίδιο επίπεδο
  • Περιηγηθείτε σε σελίδες που βρίσκονται σε άλλο φάκελο
  • Περιηγηθείτε από μια σελίδα που βρίσκεται σε ένα φάκελο στη ρίζα
  • Πώς να δημιουργήσετε εξωτερικούς συνδέσμους
  • Πώς να δημιουργήσετε συνδέσμους αγκύρωσης
  • Πλοηγηθείτε στην ίδια σελίδα
  • Πλοηγηθείτε σε άλλη σελίδα
  • συμπέρασμα

Τι είναι ο σύνδεσμος;

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

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

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

Πώς να δημιουργήσετε εσωτερικούς συνδέσμους

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

Τώρα, λαμβάνοντας υπόψη ότι ο φάκελός μας είναι δομημένος ως εξής:

├── folder1 | └── page2.html ├── page1.html ├── index.html 

Εδώ έχουμε τρεις περιπτώσεις χρήσης, και για κάθε μία, θα δημιουργήσουμε ένα παράδειγμα.

Περιηγηθείτε σε σελίδες στο ίδιο επίπεδο

  • index.html
Browse to Page 1 

Όπως μπορείτε να δείτε, η σελίδα page1.htmlβρίσκεται στο ίδιο επίπεδο, επομένως η διαδρομή του hrefχαρακτηριστικού είναι απλώς το όνομα της σελίδας.

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

  • page1.html
Browse to Page 2 

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

Μεγάλος! Ας δούμε τώρα την τελευταία περίπτωση χρήσης.

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

  • page2.html
Browse to the Home Page 

Τώρα, εδώ για να μεταβείτε στη index.htmlσελίδα, πρέπει πρώτα να ανεβούμε ένα επίπεδο πριν μπορέσουμε να περιηγηθούμε σε αυτήν τη σελίδα.

Έχουμε πλέον καλύψει εσωτερικούς συνδέσμους, οπότε ας προχωρήσουμε και εισαγάγετε τον τρόπο πλοήγησης σε εξωτερικούς συνδέσμους.

Πώς να δημιουργήσετε εξωτερικούς συνδέσμους

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

Browse to Google 

Όπως μπορείτε να δείτε εδώ, για να πλοηγηθείτε στο Google, πρέπει να καθορίσετε τη διεύθυνση URL του στο hrefχαρακτηριστικό.

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

Πώς να δημιουργήσετε συνδέσμους αγκύρωσης

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

Πλοηγηθείτε στην ίδια σελίδα

Go to the anchor 

Σε σύγκριση με τους άλλους, αυτό είναι λίγο διαφορετικό. Πράγματι είναι, αλλά εξακολουθεί να λειτουργεί με τον ίδιο τρόπο.

Εδώ, αντί για έναν σύνδεσμο σελίδας, έχουμε μια αναφορά σε ένα στοιχείο. Όταν κάνουμε κλικ στον σύνδεσμο, θα αναζητήσει ένα στοιχείο με το ίδιο όνομα χωρίς το hashtag ( about). Εάν εντοπίσει αυτό το αναγνωριστικό, περιηγείται σε αυτό το τμήμα.

Πλοηγηθείτε σε άλλη σελίδα

Go to the anchor 

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

συμπέρασμα

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

Ευχαριστώ για την ανάγνωση.

Μη διστάσετε να επικοινωνήσετε μαζί μου!

TWITTER BLOG NEWSLETTER GITHUB LINKEDIN CODEPEN DEV

Φωτογραφία από τον JJ Ying στο Unsplash