Σύνδεσμοι ή άγκυρες σε ιστοσελίδες
Ένας από τους πρωταρχικούς διαφοροποιητές ανάμεσα σε ιστοσελίδες και άλλες μορφές μέσων επικοινωνίας είναι η ιδέα των «συνδέσμων» ή των υπερσυνδέσεων, όπως είναι τεχνικά γνωστοί στους όρους σχεδιασμού ιστοσελίδων.
Εκτός από το να βοηθήσουμε να κάνουμε το web αυτό που είναι σήμερα, οι συνδέσεις, καθώς και οι εικόνες, είναι εύκολα οι πιο συχνά προσθέτοντας πράγματα σε ιστοσελίδες. Αυτά τα στοιχεία είναι εύκολο να προστεθούν (μόνο δύο βασικές ετικέτες HTML ) και μπορούν να φέρουν ενθουσιασμό και διαδραστικότητα σε διαφορετικές σελίδες απλού κειμένου. Σε αυτό το άρθρο, θα μάθετε για την ετικέτα (anchor), η οποία είναι το πραγματικό στοιχείο HTML που χρησιμοποιείται για την προσθήκη συνδέσμων στις σελίδες του ιστότοπου.
Προσθήκη συνδέσμων
Ένας σύνδεσμος ονομάζεται άγκυρα σε HTML, και έτσι η ετικέτα που την αντιπροσωπεύει είναι η ετικέτα Α. Συνήθως, οι άνθρωποι αναφέρονται απλώς σε αυτές τις προσθήκες ως "συνδέσμους", αλλά η άγκυρα είναι αυτό που προστίθεται σε οποιαδήποτε σελίδα.
Όταν προσθέτετε έναν σύνδεσμο, πρέπει να υποδεικνύετε τη διεύθυνση της ιστοσελίδας στην οποία θέλετε να μεταβαίνουν οι χρήστες σας όταν κάνουν κλικ ή πατούν (αν βρίσκονται σε οθόνη αφής) που συνδέουν. Ορίζετε αυτό με το χαρακτηριστικό.
Το χαρακτηριστικό href σημαίνει "αναφορά υπερκειμένου" και ο σκοπός του είναι να υπαγορεύει τη διεύθυνση URL όπου θέλετε να πάει αυτός ο συγκεκριμένος σύνδεσμος. Χωρίς αυτές τις πληροφορίες, ένας σύνδεσμος είναι άχρηστος - θα έλεγε στο πρόγραμμα περιήγησης ότι ο χρήστης θα έπρεπε να μεταφερθεί κάπου, αλλά δεν θα ήταν διαθέσιμος οι πληροφορίες προορισμού για το σημείο εκείνο που θα έπρεπε να είναι "κάπου". Αυτή η ετικέτα και αυτό το χαρακτηριστικό συμβαδίζουν.
Για παράδειγμα, για να δημιουργήσετε έναν σύνδεσμο κειμένου, γράφετε:
URL της ιστοσελίδας για να μεταβείτε στο "> Κείμενο που θα είναι ο σύνδεσμος
Έτσι, για να συνδεθείτε με την αρχιτεκτονική Σχεδιασμός ιστοσελίδων / αρχική σελίδα HTML, γράφετε:
Σχετικά με το Web Design και το HTML
Μπορείτε να συνδέσετε σχεδόν οτιδήποτε στη σελίδα HTML, συμπεριλαμβανομένων των εικόνων . Απλά περιβάλλετε τα στοιχεία ή τα στοιχεία HTML που θέλετε να συνδέσετε με τις ετικέτες και . Μπορείτε επίσης να δημιουργήσετε συνδέσμους με σύμβολα κράτησης θέσεων, εξαιρώντας το χαρακτηριστικό href - αλλά φροντίστε να επιστρέψετε και να ενημερώσετε αργότερα τις πληροφορίες href ή εάν ο σύνδεσμος δεν θα κάνει τίποτα όταν έχετε πρόσβαση.
Το HTML5 καθιστά έγκυρη τη σύνδεση στοιχείων σε επίπεδο μπλοκ όπως οι παραγράφους και τα στοιχεία DIV . Μπορείτε να προσθέσετε μια ετικέτα αγκύρωσης γύρω από μια πολύ μεγαλύτερη περιοχή, όπως μια λίστα διαίρεσης ή ορισμού, και ολόκληρη αυτή η περιοχή θα είναι "clickable". Αυτό μπορεί να είναι ιδιαίτερα χρήσιμο όταν προσπαθείτε να δημιουργήσετε μεγαλύτερες, φιλικές προς τα δάχτυλα περιοχές σε έναν ιστότοπο.
Μερικά πράγματα που πρέπει να θυμάστε κατά την προσθήκη συνδέσμων
- Η τελική ετικέτα είναι απαραίτητη . Αν ξεχάσετε να το συμπεριλάβετε, τα πάντα μετά από αυτόν τον σύνδεσμο θα συνδέονται επίσης, μέχρις ότου ένας άλλος σύνδεσμος κλείσει την ετικέτα.
- Τις περισσότερες φορές, είναι καλύτερο να συνδέσετε τις μεμονωμένες εικόνες και τα μικρά διαστήματα του κειμένου, αντί για μεγάλα τεμάχια κειμένου. Οι σύνδεσμοι μπορούν να προσθέσουν χρώματα και υπογραμμίζουν στυλ στη σελίδα σας, τα οποία μπορεί να είναι δύσκολο να διαβαστούν. Φυσικά, μπορείτε να χρησιμοποιήσετε το CSS για να αλλάξετε αυτά τα στυλ συνδέσεων και να επεξεργαστείτε χρώματα ή να αφαιρέσετε υπογράμμισε, αλλά εξακολουθεί να είναι καλό να έχετε επίγνωση αυτής της πραγματικότητας.
- Βεβαιωθείτε ότι έχετε ελέγξει τους συνδέσμους σας έτσι ώστε να μην πάνε άσχημα. Το Link Rot μπορεί να κάνει τους χρήστες και τις μηχανές αναζήτησης να θεωρούν τον ιστότοπό σας μη έγκυρο. Χρησιμοποιήστε τακτικά έναν έλεγχο συνδέσμων για να επαληθεύσετε τους συνδέσμους στις σελίδες σας. Αυτό ισχύει ιδιαίτερα όταν συνδέεστε με ιστότοπους τρίτου μέρους (εκείνους που δεν διαχειρίζεστε) και οι οποίοι ενδέχεται να αλλάζουν τις σελίδες τους κατά περιόδους, αφήνοντάς σας με νεκρούς δεσμούς. Ένας σύνδεσμος ελέγχου θα βρείτε αυτούς τους νεκρούς συνδέσμους ώστε να μπορείτε να κάνετε τις απαραίτητες ενημερώσεις.
- Αποφύγετε κείμενο όπως "κάντε κλικ εδώ" στο σύνδεσμό σας. Θυμηθείτε ότι τα άτομα με οθόνες αφής δεν μπορούν να "κάνουν κλικ", έτσι ώστε το κείμενο να αισθάνεται σαν προϊόν μιας εποχής του παρελθόντος και πραγματικά δεν είναι σχετικό με τον κεντρικό ιστό πολλών συσκευών.
Άλλα ενδιαφέροντα είδη συνδέσμων
Το στοιχείο Α δημιουργεί έναν τυπικό σύνδεσμο σε άλλο έγγραφο, αλλά υπάρχουν και άλλοι τύποι συνδέσμων που μπορεί να σας ενδιαφέρουν:
- Εσωτερικοί σύνδεσμοι ή άγκυρες - Αυτές είναι οι συνδέσεις κάπου μέσα σε μια ιστοσελίδα, όχι απαραίτητα την κορυφή.
- Χάρτες εικόνας - Χάρτες εικόνων επιτρέπουν τη δημιουργία συνδέσεων σε εικόνες που αντιστοιχίζονται σε συγκεκριμένες περιοχές της εικόνας. Αυτά μπορούν να χρησιμοποιηθούν για παιχνίδια ή δημιουργική πλοήγηση. Τους βλέπετε συχνά με χάρτες όπου οι περιοχές στο χάρτη είναι clickable. Σημειώστε ότι οι χάρτες εικόνων δεν χρησιμοποιούνται στις περισσότερες σύγχρονες ιστοσελίδες, εν μέρει επειδή μπορούν να προκαλέσουν προβλήματα σε κινητή συσκευή.
- Το Στοιχείο-Το στοιχείο αυτό χρησιμοποιείται για τη σύνδεση άλλων εγγράφων και σελίδων με το τρέχον. Δεν θα δημιουργήσει μια περιοχή με δυνατότητα κλικ στην ιστοσελίδα σας, αλλά είναι χρήσιμη η κατανόηση.