Πώς να δημιουργήσετε έναν σύνδεσμο σε ένα έγγραφο HTML. Tag A - η σύνταξη και τα χαρακτηριστικά της

1. URL ή "διεύθυνση" μιας σελίδας στο Internet
2. <A> ετικέτα και τη βασική σύνταξη
3. Απόλυτη και σχετική αναφορά
4. Σχετική σύνδεση με κατάλογο υψηλότερη από την τρέχουσα
5. Χαρακτηριστικά της ετικέτας <A>. Πώς να ανοίξετε ένα έγγραφο με παραπομπή σε ένα νέο παράθυρο
6. Σύνδεσμος τίτλου. Το χαρακτηριστικό τίτλου για την ετικέτα <A>
7. Χαρακτηριστικό hyperlink nofollow. Η απαγόρευση της μεταφοράς της "εμπιστοσύνης" του τόπου με παραπομπή
8. Εσωτερική σύνδεση ή άγκυρα μέσα στο έγγραφο
9. Άγκυρα σύνδεσης - Εικόνα
10. Συνέχεια

Οι αναφορές (ή οι υπερσυνδέσεις) διαπερνούν το Διαδίκτυο όπως αιμοφόρα αγγεία. Αν δεν υπήρχαν σύνδεσμοι, δεν θα υπήρχε Internet.

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

URL ή "διεύθυνση" μιας σελίδας στο Internet

Κάθε έγγραφο HTML στον ιστό έχει τη δική του "ακριβή διεύθυνση". Ονομάζεται "URL", από τα αγγλικά. URL - Ενιαίος εντοπισμός πόρων

Η δομή της διεύθυνσης URL είναι συχνά ορατή στη γραμμή διευθύνσεων του προγράμματος περιήγησης. Περιλαμβάνει:

1. Το όνομα του πρωτοκόλλου είναι http: // ή https: //
2. Τομέας ιστότοπου
3. το φάκελο ή τη διαδρομή προς το φάκελο όπου βρίσκεται το έγγραφο,
4. Όνομα αρχείου (ίσως να μην είναι πάντα).

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

<A> ετικέτα και τη βασική σύνταξη

Ελπίζω ότι η λέξη "σύνταξη" δεν σας φοβίζει πλέον 🙂

<a href="http://domen-saita.ru/papka-na-servere/dokument.html"> σύνδεσμο κειμένου </a>

Όπως μπορείτε να δείτε, μετά την έναρξη της ετικέτας <A>, πρέπει να υπάρχει ένα υποχρεωτικό χαρακτηριστικό href που καθορίζει τη διεύθυνση του εγγράφου στο οποίο θέλετε να μεταβείτε.

Μέσα στην ίδια την <A> ετικέτα κοντέινερ είναι ένα κείμενο (αν και μπορεί να υπάρχει μια εικόνα), το οποίο είναι το κείμενο του συνδέσμου. Καλείται επίσης " Anchor " ή απλά - Anchor.

Απόλυτη και σχετική αναφορά

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

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

Σχέδιο όταν εφαρμόζεται σχετική αναφορά

Παράδειγμα: ένας σύνδεσμος από το πρώτο.html έγγραφο οδηγεί στο δεύτερο αρχείο.html, το οποίο βρίσκεται στο φάκελο ειδήσεων.

Σχετική σύνδεση με κατάλογο υψηλότερη από την τρέχουσα

Κωδικός:

<a href="../first.html"> Αυτός είναι ένας σχετικός σύνδεσμος σε ένα αρχείο σε επίπεδο καταλόγου ενός </a>

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

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

Χαρακτηριστικά της ετικέτας <A>. Πώς να ανοίξετε ένα έγγραφο με παραπομπή σε ένα νέο παράθυρο

Για να ανοίξει το έγγραφο σε μια νέα καρτέλα προγράμματος περιήγησης, πρέπει να χρησιμοποιήσετε το στόχο attribute = "_ blank"

Στόχος συνδέσμου χαρακτηριστικών = "κενό"

Μην το κακοποιείτε. Δεν χρειάζεται να δημιουργήσετε εσωτερικούς συνδέσμους στον ιστότοπο με αυτό το χαρακτηριστικό. Οι χρήστες θα ενοχλούνται από το "παράθυρο σπινθηρισμού".

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

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

Σύνδεσμος τίτλου. Το χαρακτηριστικό τίτλου για την ετικέτα <A>

Ένα άλλο χρήσιμο χαρακτηριστικό είναι title = "Κείμενο εξηγώντας πού οδηγεί αυτός ο σύνδεσμος"

Σύνταξη:

<a href="http://domen-saita.ru/papka-na-servere/dokument.html" title="το αναδυόμενο υπαινιγμό"> αυτό είναι ένας σύνδεσμος υπόδειξης </a>

Όπως μπορείτε να δείτε, το πρόγραμμα περιήγησης προβάλλει ως συμβουλή εργαλείου. Και όμως, λαμβάνει υπόψη τις μηχανές αναζήτησης.

Ενημέρωση χαρακτηριστικών για τον τίτλο του συνδέσμου

Χαρακτηριστικό hyperlink nofollow. Η απαγόρευση της μεταφοράς της "εμπιστοσύνης" του τόπου με παραπομπή

Υπάρχει ένα ακόμη διφορούμενο χαρακτηριστικό για τους συνδέσμους rel = "nofollow"

Αναφέρει στις Μηχανές Αναζήτησης ότι το έγγραφο σύνδεσης ενδέχεται να μην είναι αξιόπιστο. Ταυτόχρονα, οι δείκτες εμπιστοσύνης ("trust") από τον ιστότοπο Source δεν μεταδίδονται στον ιστότοπο με παραπομπή.

Το θέμα της εμπιστοσύνης και της κατάταξης συνδέσεων είναι ακόμα μπροστά, αλλά αν είναι σύντομη, η "τύχη" των τοποθεσιών στις μηχανές αναζήτησης θα εξαρτηθεί επίσης από τον αριθμό των συνδέσμων που οδηγούν σε αυτόν τον ιστότοπο. Όσο περισσότεροι από αυτούς, τόσο πιο αξιόπιστες τοποθεσίες συνδέουν - τόσο μεγαλύτερη αξιοπιστία του τόπου με παραπομπή.

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

<a href="http://bad-sait.ru/dokument.html" rel="nofollow"> κακός ιστότοπος </a>

Εσωτερική σύνδεση ή άγκυρα μέσα στο έγγραφο

Σε μεγάλα κείμενα, συχνά απαιτείται η εγκατάσταση των λεγόμενων "αγκυρών" σε λογικά μέρη του εγγράφου. Στη συνέχεια, είναι σε αυτό το μέρος, μπορείτε να παραπέμψετε.

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

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

Η σύνταξη για τη δημιουργία μιας άγκυρας είναι:

<a name="top"> </a>

Κατά τη δημιουργία ενός συνδέσμου, στο τέλος της διεύθυνσης URL προσθέστε το σύμβολο # - το όνομα της "άγκυρας":

<p> <a href="#top"> Top </a> </ p>

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

Συχνά, σε μεγάλα έγγραφα, στο κάτω μέρος έβαζαν έναν τέτοιο σύνδεσμο "Top".

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

; Στην κορυφή ;

Από άλλο έγγραφο, μπορείτε επίσης να μεταβείτε σε αυτό το μέρος, αν προσθέσετε στο τέλος της διεύθυνσης URL μέσω του σημείου # name_accord

<a href="http://domen-saita.ru/dokument.html#top"> Το κείμενο του συνδέσμου οδηγεί σε μια άγκυρα "πάνω" σε αυτό το έγγραφο </a>

Άγκυρα σύνδεσης - Εικόνα

Οποιαδήποτε εικόνα μπορεί να είναι μια σύνδεση.

Κωδικός:

<a href="http://sait.ru/dokument.html"> <img src = kartinka.jpg "width =" 100 "height =" 131 "/> </a>

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

Οι συνδέσεις-εικόνες έχουν ένα μπλε πλαίσιο

Για να απαλλαγούμε από αυτό, ένας απλός κανόνας προστίθεται στο αρχείο CSS για τον ιστότοπο:

ένα {border: 0px;}

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

Συνέχεια

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