Ή ορίζοντας ένα href http. Βασικά στοιχεία HTML: Εργασία με συνδέσμους. Η ετικέτα A και τα χαρακτηριστικά της rel, target, name
Οι ετικέτες HTML είναι η βάση Γλώσσα HTML. Οι ετικέτες χρησιμοποιούνται για την οριοθέτηση της αρχής και του τέλους των στοιχείων στη σήμανση.
Κάθε έγγραφο HTML αποτελείται από ένα δέντρο στοιχείων HTML και κειμένου. Κάθε στοιχείο HTML προσδιορίζεται από μια ετικέτα έναρξης (άνοιγμα) και μια ετικέτα τέλους (κλείσιμο). Οι ετικέτες ανοίγματος και κλεισίματος περιέχουν το όνομα της ετικέτας.
Όλα τα στοιχεία HTML χωρίζονται σε πέντε τύπους:
- άδεια στοιχεία - , ,
, , , ,, ,
Χρησιμοποιείται για αποθήκευση Επιπλέον πληροφορίεςσχετικά με τη σελίδα. Τα προγράμματα περιήγησης χρησιμοποιούν αυτές τις πληροφορίες για την επεξεργασία της σελίδας και μηχανές αναζήτησης- για την ευρετηρίασή του. Μπορεί να υπάρχουν πολλές ετικέτες σε ένα μπλοκ, αφού ανάλογα με τα χαρακτηριστικά που χρησιμοποιούνται φέρουν διαφορετικές πληροφορίες. Δείκτης μέτρησης σε δεδομένο εύρος. Ένα τμήμα ενός εγγράφου που περιέχει συνδέσμους πλοήγησης για τον ιστότοπο. Καθορίζει μια ενότητα που δεν υποστηρίζει δέσμες ενεργειών. Δοχείο για ενσωμάτωση πολυμέσων (π.χ. ήχου, βίντεο, μικροεφαρμογές Java, ActiveX, PDF και Flash). Μπορείτε επίσης να εισαγάγετε μια άλλη ιστοσελίδα στο τρέχον έγγραφο HTML. Η ετικέτα χρησιμοποιείται για τη μετάδοση των παραμέτρων του πρόσθετου. Ταξινομημένη αριθμημένη λίστα. Η αρίθμηση μπορεί να είναι αριθμητική ή αλφαβητική. Ένα δοχείο με τίτλο για μια ομάδα στοιχείων. Καθορίζει μια επιλογή/επιλογή για επιλογή από την αναπτυσσόμενη λίστα , ή ,. Πεδίο για την εμφάνιση του αποτελέσματος ενός υπολογισμού που υπολογίζεται με τη χρήση του σεναρίου. Παράγραφοι στο κείμενο. Ορίζει παραμέτρους για πρόσθετα που έχουν δημιουργηθεί χρησιμοποιώντας το στοιχείο. Ένα στοιχείο δοχείου που περιέχει ένα στοιχείο και μηδέν ή περισσότερα στοιχεία. Από μόνο του δεν εμφανίζει τίποτα. Επιτρέπει στο πρόγραμμα περιήγησης να επιλέξει την πιο κατάλληλη εικόνα.
Εξάγει κείμενο χωρίς μορφοποίηση, διατηρώντας κενά και διαλείμματα κειμένου. Μπορεί να χρησιμοποιηθεί για εμφάνιση κωδικός υπολογιστή, μηνύματα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗκαι τα λοιπά. Δείκτης ολοκλήρωσης κάθε είδους εργασίας. Ορίζει ένα σύντομο απόσπασμα. Δοχείο για σύμβολα της Ανατολικής Ασίας και την αποκωδικοποίησή τους. Ορίζει το ένθετο κείμενό του ως το βασικό στοιχείο του σχολιασμού. Προσθέτει σύντομη περιγραφήπάνω ή κάτω από τους χαρακτήρες που περιέχονται στο στοιχείο, που εμφανίζονται με μικρότερη γραμματοσειρά. Επισημαίνει το ενσωματωμένο κείμενο ως πρόσθετο σχολιασμό. Έξοδοι εναλλακτικό κείμενοσε περίπτωση που το πρόγραμμα περιήγησης δεν υποστηρίζει το στοιχείο. Εμφανίζει κείμενο που δεν είναι τρέχον με διαγραφή. Χρησιμοποιείται για την εμφάνιση κειμένου που αντιπροσωπεύει το αποτέλεσμα της εκτέλεσης κώδικα προγράμματοςή σενάριο, καθώς και μηνύματα συστήματος. Εμφανίζεται με γραμματοσειρά monospace. Χρησιμοποιείται για τον ορισμό ενός σεναρίου από την πλευρά του πελάτη (συνήθως JavaScript). Περιέχει είτε κείμενο σεναρίου είτε σημεία σε εξωτερικό αρχείοσενάριο χρησιμοποιώντας το χαρακτηριστικό src. Καθορίζει μια λογική περιοχή (τμήμα) μιας σελίδας, συνήθως με κεφαλίδα. Ένα στοιχείο ελέγχου που σας επιτρέπει να επιλέξετε τιμές από ένα προτεινόμενο σύνολο. Οι τιμές παραλλαγής τοποθετούνται στο . Εμφανίζει κείμενο σε μικρότερο μέγεθος γραμματοσειράς. Καθορίζει τη θέση και τον τύπο των εναλλακτικών πόρων μέσων για το , , . Δοχείο για ενσωματωμένα στοιχεία. Μπορεί να χρησιμοποιηθεί για τη μορφοποίηση αποσπασμάτων κειμένου, όπως η επισήμανση μεμονωμένων λέξεων με χρώμα. Δίνει έμφαση στο κείμενο, επισημαίνοντάς το με έντονη γραφή. Περιλαμβάνει ενσωματωμένα φύλλα στυλ. Καθορίζει τη γραφή των συμβόλων, για παράδειγμα, δείκτη στοιχείων σε χημικούς τύπους. Δημιουργεί έναν ορατό τίτλο για την ετικέτα. Εμφανίζεται με ένα γεμάτο τρίγωνο, κάνοντας κλικ σε αυτό σας επιτρέπει να δείτε τις λεπτομέρειες του τίτλου. Καθορίζει την εκθέτη ορθογραφία των χαρακτήρων. Ετικέτα για τη δημιουργία πίνακα. Καθορίζει το σώμα του πίνακα. Δημιουργεί ένα κελί πίνακα. Χρησιμοποιείται για τη δήλωση θραυσμάτων κώδικα HTML που μπορούν να κλωνοποιηθούν και να εισαχθούν σε ένα έγγραφο μέσω ενός σεναρίου. Το περιεχόμενο μιας ετικέτας δεν είναι θυγατρικό στοιχείο. Δημιουργεί μεγάλα πεδία εισαγωγής κειμένου. Ορίζει το υποσέλιδο του πίνακα. Δημιουργεί έναν τίτλο κελιού πίνακα. Καθορίζει τον τίτλο του πίνακα. Καθορίζει την ημερομηνία/ώρα. Ο τίτλος ενός εγγράφου HTML που εμφανίζεται στην κορυφή της γραμμής τίτλου του προγράμματος περιήγησης. Μπορεί επίσης να εμφανίζεται στα αποτελέσματα αναζήτησης, επομένως αυτό θα πρέπει να λαμβάνεται υπόψη κατά την παροχή του τίτλου. Δημιουργεί μια σειρά πίνακα. Προσθέτει υπότιτλους για στοιχεία και . Επισημαίνει ένα απόσπασμα κειμένου με υπογράμμιση, χωρίς πρόσθετη έμφαση. Δημιουργεί μια λίστα με κουκκίδες. Επισημαίνει μεταβλητές από προγράμματα εμφανίζοντάς τες με πλάγιους χαρακτήρες. Προσθέτει αρχεία βίντεο στη σελίδα. Υποστηρίζει 3 μορφές βίντεο: MP4, WebM, Ogg. Υποδεικνύει στο πρόγραμμα περιήγησης όπου μπορεί να σπάσει μια μεγάλη ουρά. Οι σύνδεσμοι μπορούν να χωριστούν σε δύο κατηγορίες:
Πώς να δημιουργήσετε υπερσυνδέσμους σε έναν ιστότοπο 1. Δομή συνδέσμων
σύνδεσμοι προς εξωτερικούς πόρους - δημιουργούνται με χρήση ετικέτας και χρησιμοποιούνται για την επέκταση των δυνατοτήτων του τρέχοντος εγγράφου κατά την επεξεργασία από το πρόγραμμα περιήγησης.
υπερσύνδεσμοι - σύνδεσμοι προς άλλους πόρους που μπορεί να επισκεφθεί ή να κατεβάσει ο χρήστης.Οι υπερσύνδεσμοι δημιουργούνται χρησιμοποιώντας ζεύγος ετικετών. Το κείμενο που θα εμφανίζεται στην ιστοσελίδα τοποθετείται μέσα στην ετικέτα. Το κείμενο του συνδέσμου εμφανίζεται στο πρόγραμμα περιήγησης με υπογράμμιση, το χρώμα της γραμματοσειράς είναι μπλε και όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τον σύνδεσμο, ο δρομέας του ποντικιού αλλάζει εμφάνιση.
Απαιτούμενη παράμετρος ετικέτας είναι το χαρακτηριστικό href, το οποίο καθορίζει τη διεύθυνση URL της ιστοσελίδας.
ευρετήριο συνδέσμουΈνας σύνδεσμος αποτελείται από δύο μέρη - έναν δείκτη και ένα τμήμα διεύθυνσης. Ένας δείκτης σύνδεσης είναι ένα κομμάτι κειμένου ή εικόνας ορατό στον χρήστη. Το τμήμα διεύθυνσης του συνδέσμου δεν είναι ορατό στον χρήστη, αντιπροσωπεύει τη διεύθυνση του πόρου στον οποίο πρέπει να μεταβείτε.
Το τμήμα διεύθυνσης του συνδέσμου αποτελείται από URl. URl (Uniform Resource Locator) - ενιαία διεύθυνση πόρου. Κατά τη δημιουργία διευθύνσεων, συνιστάται να χρησιμοποιείτε παύλα αντί για υπογράμμιση για να διαχωρίσετε λέξεις. ΣΕ γενική εικόνα URL με την ακόλουθη μορφή:
Μέθοδος πρόσβασης://όνομα διακομιστή:θύρα/διαδρομή
Μια μέθοδος πρόσβασης, ή πρωτόκολλο, ανταλλάσσει δεδομένα μεταξύ σταθμών εργασίας διαφορετικά δίκτυα. Τα πιο κοινά πρωτόκολλα μεταφοράς δεδομένων:
Το αρχείο παρέχει ανάγνωση ενός αρχείου από τον τοπικό δίσκο:
Αρχείο:/gallery/pictures/summer.html
Το http παρέχει πρόσβαση σε μια ιστοσελίδα χρησιμοποιώντας το πρωτόκολλο HTTP:
http://site.ru/
Το https είναι μια ειδική υλοποίηση του πρωτοκόλλου HTTP που χρησιμοποιεί κρυπτογράφηση (συνήθως SSL ή TLS)
https://site.ru/
Το ftp κάνει ένα αίτημα στον διακομιστή FTP να λάβει ένα αρχείο:
Ftp://pgu/directory/library
Το mailto ξεκινά μια συνεδρία υπηρεσία ταχυδρομείουμε τον καθορισμένο προορισμό και τον κεντρικό υπολογιστή:
Mailto: [email προστατευμένο]
Το όνομα διακομιστή περιγράφει πλήρες όνομαμηχανήματα στο δίκτυο, για παράδειγμα, site.ru. Εάν το όνομα διακομιστή δεν έχει καθοριστεί, τότε ο σύνδεσμος θεωρείται τοπικός, δηλ. βρίσκεται στον ίδιο υπολογιστή με το έγγραφο HTML που περιέχει τη σύνδεση.
Αριθμός θύρας TCP στην οποία λειτουργεί ο διακομιστής web. Αντιπροσωπεύει έναν αριθμό που πρέπει να καθοριστεί εάν μια μέθοδος απαιτεί αριθμό θύρας ( ξεχωριστούς διακομιστέςμπορεί να έχουν τον δικό τους διακριτικό αριθμό θύρας). Εάν δεν έχει καθοριστεί θύρα, η θύρα 80 χρησιμοποιείται από προεπιλογή. Τυπικές θύρεςείναι:
21 - FTP
23 - Telnet
70 - Γκόφερ
80 - HTTPΗ διαδρομή περιέχει το όνομα του φακέλου όπου βρίσκεται το αρχείο.
2. Απόλυτο και σχετική διαδρομήΌταν ένας σύνδεσμος καθορίζει μόνο ένα όνομα αρχείου, το πρόγραμμα περιήγησης υποθέτει ότι το αρχείο βρίσκεται στον ίδιο φάκελο με το έγγραφο που περιέχει την υπερ-σύνδεση. Στην πράξη, οι ιστότοποι περιέχουν εκατοντάδες έγγραφα που δημοσιεύονται ξεχωριστούς φακέλουςώστε να είναι πιο εύκολη η διαχείρισή τους. Για να δημιουργήσετε έναν σύνδεσμο προς ένα αρχείο εκτός του φακέλου που περιέχει το τρέχον έγγραφο, πρέπει να καθορίσετε τη θέση ή τη διαδρομή του αρχείου. Η HTML υποστηρίζει δύο τύπους διαδρομής: απόλυτη και σχετική.
Ρύζι. 1. Παράδειγμα δομής φακέλου 2.1. Απόλυτη διαδρομή Μια απόλυτη διαδρομή καθορίζει την ακριβή θέση του αρχείου μέσα σε ολόκληρη τη δομή φακέλου στον υπολογιστή (διακομιστή). Η απόλυτη διαδρομή προς το αρχείο παρέχει πρόσβαση στο αρχείο από πόρους τρίτων και περιέχει τα ακόλουθα στοιχεία:
1) πρωτόκολλο, για παράδειγμα, http (προαιρετικό).
2) τομέας ( Ονομα τομέαή διεύθυνση IP υπολογιστή).
3) φάκελος (όνομα φακέλου που υποδεικνύει τη διαδρομή προς το αρχείο).
4) αρχείο (όνομα αρχείου).Υπάρχουν δύο τύποι ηχογράφησης απόλυτη διαδρομή- με ή χωρίς το πρωτόκολλο:
Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html
Εάν το αρχείο βρίσκεται στον ριζικό φάκελο, τότε η διαδρομή προς το αρχείο θα είναι η εξής:
http://site.ru/index.html
Εάν δεν υπάρχει όνομα αρχείου, θα φορτωθεί η ιστοσελίδα που έχει οριστεί από προεπιλογή στις ρυθμίσεις του διακομιστή web (το λεγόμενο αρχείο ευρετηρίου).
http://site.ru/
Συνήθως ως αρχείο ευρετηρίουλειτουργεί ως έγγραφο με το όνομα index.html . Η παρουσία μιας τελικής κάθετου / σημαίνει ότι η πρόσβαση πηγαίνει στον φάκελο, εάν δεν υπάρχει, πηγαίνει απευθείας στο αρχείο.
2.2. Σχετική διαδρομήΜια σχετική διαδρομή περιγράφει τη διαδρομή προς το καθορισμένο έγγραφο σε σχέση με την τρέχουσα. Η διαδρομή καθορίζεται με βάση τη θέση της ιστοσελίδας στην οποία βρίσκεται ο σύνδεσμος. Οι σχετικοί σύνδεσμοι χρησιμοποιούνται κατά τη δημιουργία συνδέσμων προς άλλα έγγραφα στον ίδιο ιστότοπο. Όταν το πρόγραμμα περιήγησης δεν βρίσκει τον σύνδεσμο πρωτόκολλο http:// , ψάχνει το καθορισμένο έγγραφοστον ίδιο διακομιστή.
Μια σχετική διαδρομή περιέχει τα ακόλουθα στοιχεία:
1) φάκελος (όνομα φακέλου που υποδεικνύει τη διαδρομή προς το αρχείο).
2) αρχείο (όνομα αρχείου).Διαδρομή για σχετικοί σύνδεσμοιέχει τρεις ειδικούς χαρακτηρισμούς:
/ δείχνει προς ριζικός κατάλογοςκαι λέει ότι πρέπει να ξεκινήσετε τη διαδρομή από τον ριζικό κατάλογο του εγγράφου και να μεταβείτε στον επόμενο φάκελο
./ δείχνει προς τρέχων φάκελος
../ ανεβείτε έναν φάκελο (κατάλογος)Η κύρια διαφορά μεταξύ μιας σχετικής διαδρομής και μιας απόλυτης διαδρομής είναι ότι η σχετική διαδρομή δεν περιέχει το όνομα του ριζικού φακέλου και των γονικών φακέλων, γεγονός που καθιστά τη διεύθυνση πιο σύντομη και εάν μετακινηθείτε από τον έναν τομέα στον άλλο, δεν χρειάζεται να εισάγετε μια νέα απόλυτη διεύθυνση. Αλλά εάν ένας πόρος τρίτου κατασκευαστή συνδέεται, για παράδειγμα, με τις εικόνες σας με σχετικές διευθύνσεις, τότε αυτές δεν θα εμφανίζονται σε άλλο ιστότοπο.
3. ΆγκυρεςΟι άγκυρες ή οι εσωτερικοί σύνδεσμοι δημιουργούν μεταβάσεις σε διαφορετικές ενότητες της τρέχουσας ιστοσελίδας, επιτρέποντάς σας να μετακινηθείτε γρήγορα μεταξύ των ενοτήτων. Αυτό αποδεικνύεται πολύ βολικό όταν υπάρχει πάρα πολύ κείμενο στη σελίδα. Εσωτερικοί σύνδεσμοιδημιουργούνται επίσης χρησιμοποιώντας την ετικέτα με τη διαφορά ότι το χαρακτηριστικό href περιέχει το όνομα του δείκτη - το λεγόμενο anchor, και όχι τη διεύθυνση URL. Το όνομα του δείκτη προηγείται πάντα από ένα σύμβολο #.
Πιστεύω ότι καμία σελίδα HTML δεν μπορεί να υπάρξει χωρίς τουλάχιστον έναν υπερσύνδεσμο (ή απλώς έναν σύνδεσμο). Οι σύνδεσμοι μπορεί να είναι προς άλλες σελίδες ή ιστότοπους, καθώς και προς αρχεία, εικόνες κ.λπ.
Οι σύνδεσμοι μπορεί να είναι εξωτερικοί και εσωτερικοί, κείμενο και γραφικοί. Οι εξωτερικοί σύνδεσμοι αναφέρονται σε άλλους ιστότοπους ή αντικείμενα σε αυτούς, ενώ οι εσωτερικοί σύνδεσμοι, αντίθετα, αναφέρονται σε διαφορετικά μέρη του ιστότοπού σας. Ένας σύνδεσμος κειμένου είναι κείμενο που, όταν κάνετε κλικ, σας μεταφέρει σε άλλο αντικείμενο ή το ανοίγει, ενώ ένας γραφικός σύνδεσμος είναι ένα αντικείμενο (συνήθως μια εικόνα) που χρησιμεύει επίσης για μετάβαση σε άλλη σελίδα, ιστότοπο ή, για παράδειγμα, εικόνα. Οι σύνδεσμοι σε HTML δημιουργούνται χρησιμοποιώντας μια ετικέτα (από το αγγλικό anchor - anchor). Στη συνέχεια θα σας πω περισσότερα για τους συνδέσμους.
Η ετικέτα έχει ένα σημαντικό και κύριο χαρακτηριστικό href. Η τιμή του είναι η διαδρομή προς το αντικείμενο ή τον ιστότοπο στον οποίο αναφέρεται ο σύνδεσμός μας με τη μορφή URL. Ως άγκυρα (σώμα συνδέσμου) μπορεί να λειτουργήσει ως κείμενο ( σύνδεσμος κειμένου), και την εικόνα (γραφικός σύνδεσμος). Εάν πρέπει να δημιουργήσετε μια γραφική σύνδεση, πρέπει να χρησιμοποιήσετε την ετικέτα IMG μεταξύ των ετικετών ως άγκυρα. Ακολουθεί ένα απλό παράδειγμα κώδικα HTML για έναν σύνδεσμο:
κείμενο συνδέσμου (άγκυρα)
Θα σας δώσω ένα άλλο παράδειγμα για να το καταλάβετε καλύτερα. Θα χρησιμοποιήσω τον ιστότοπό μου ως βάση:
Στη σελίδα html στο πρόγραμμα περιήγησης θα μοιάζει με αυτό:
Το χρώμα του κειμένου του συνδέσμου ορίζεται από τα χαρακτηριστικά στο ετικέτα ΣΩΜΑ. Για να το θέσω απλά, οι σύνδεσμοι υπόκεινται στα ίδια χαρακτηριστικά τροποποίησης με το κείμενο στη σελίδα. Αυτό περιλαμβάνει έντονους και πλάγιους χαρακτήρες, χρήση επικεφαλίδων κ.λπ.
Στη σελίδα html θα εμφανιστούν τα ακόλουθα:
Παίρνουμε το αποτέλεσμα χωρίς πλαίσιο:
Αρχική σελίδα 1seoΌπως παρατηρήσατε, η μετάβαση σε άλλη σελίδα πραγματοποιείται στο ίδιο παράθυρο. Εάν θέλετε ο σύνδεσμος να ανοίξει σε άλλο παράθυρο ή γονέα (από προεπιλογή βρίσκεται στο ίδιο παράθυρο), μπορείτε να χρησιμοποιήσετε τα παρακάτω χαρακτηριστικό στόχοετικέτα Α:
- _blank - ανοίγει τη σελίδα σε νέο παράθυρο.
- _parent - φορτώνει έναν σύνδεσμο στο γονικό παράθυρο.
- _self - default. Ανοίγει το σύνδεσμο στο ίδιο παράθυρο.
Αρχική σελίδα του ιστότοπου 1seo
Υπάρχει επίσης χαρακτηριστικό τίτλου, για να δημιουργήσετε μια επεξήγηση εργαλείου για έναν σύνδεσμο:
Αρχική σελίδα του ιστότοπου 1seo
Παρεμπιπτόντως, εάν καθορίσετε το γραμματοκιβώτιό σας στη διεύθυνση URL και καθορίσετε το πρωτόκολλο mailto:, τότε όταν κάνετε κλικ στον σύνδεσμό σας, θα ανοίξει πρόγραμμα αλληλογραφίας, όπου στο πεδίο Προς θα εισαχθεί ήδη η διεύθυνσή σας γραμματοκιβώτιο. Χρησιμοποιώντας το παράδειγμα, ο κώδικας HTML θα ήταν ως εξής:
Γράψε μου ένα μήνυμα
Προσπάθησα να γράψω τα κύρια πράγματα που χρειάζεστε για να δημιουργήσετε έναν σύνδεσμο σε HTML. Με την ευκαιρία, αν διαβάσετε τα προηγούμενα άρθρα Εκμάθηση HTML, τότε μπορώ με βεβαιότητα να πω ότι γνωρίζετε ήδη τα ελάχιστα για να δημιουργήσετε την πρώτη σας πλήρη σελίδα HTML. Αφού δημιουργήσετε μια σελίδα, μπορείτε να τη δημοσιεύσετε δωρεάν φιλοξενίακαι δείτε τους καρπούς του κόπου σας. Πιστέψτε με, αφού το κάνετε αυτό, θα έχετε μια ακόμη μεγαλύτερη άνοδο δημιουργικής ενέργειας. Στη συνέχεια, θα σας πω πώς να δημιουργήσετε έναν πίνακα σε HTML. Αυτό είναι επίσης πολύ σημαντικές πληροφορίες, προσπαθήστε να το απορροφήσετε και να το χωνέψετε πλήρως.
Ημερομηνία δημοσίευσης: 15 Μαΐου 2012Με τη χρήση ετικέτα html Οι σύνδεσμοι δημιουργούνται σε οποιονδήποτε ιστότοπο, τόσο εξωτερικό όσο και εσωτερικό. Ετικέτα βρίσκεται σε κάθε σελίδα του ιστότοπου. Εάν δεν υπήρχε, θα ήταν πολύ δύσκολο να πλοηγηθείτε στο Διαδίκτυο, καθώς κάθε διεύθυνση σελίδας (URL) θα έπρεπε να γραφτεί χειροκίνητα στη γραμμή του προγράμματος περιήγησης.
άγκυραΗ μόνη απαιτούμενη παράμετρος για έναν σύνδεσμο είναι href="URL" , δηλ. διεύθυνση συνδέσμου. Μεταξύ της ετικέτας ανοίγματος και ετικέτα κλεισίματοςΓράφεται ένας σύνδεσμος άγκυρας, ο οποίος μπορεί να αποτελείται από λέξεις, σύμβολα, αντικείμενα (εικόνες κ.λπ.).
... ... Σημείωση 1Αν ανοίξατε μια ετικέτα , τότε ό,τι ακολουθεί θα είναι ένας σύνδεσμος μέχρι να εμφανιστεί η ετικέτα κλεισίματος. Οποιαδήποτε αντικείμενα μπορεί να είναι αναφορά. Πολύ συχνά, μια εικόνα χρησιμοποιείται ως σύνδεσμος. Για παράδειγμα
Σημείωση 2
Για άνοιγμα ετικέτας Μπορείτε να καθορίσετε διάφορα χαρακτηριστικά. Είναι υπεύθυνοι για τη σωστή λειτουργία των συνδέσμων. Ας τους δούμε.
Προσθήκη ετικετών στις ιδιότητες και τις ιδιότητες1. Το χαρακτηριστικό target="parameter", το οποίο μπορεί να λάβει τις ακόλουθες τιμές:
- _blank - ανοίγει τη σελίδα σε νέο παράθυρο
- _self - φορτώνει τη σελίδα στο τρέχον παράθυρο
- _parent - φορτώνει τη σελίδα στο γονικό πλαίσιο
- _top - ακυρώνει όλα τα καρέ και φορτώνει τη σελίδα στο πλήρες παράθυρο του προγράμματος περιήγησης
Παράδειγμα με στόχο
πώς να κερδίσετε χρήματα στον ιστότοπό σαςΗ πιο συχνά χρησιμοποιούμενη τιμή είναι _blank επειδή σας επιτρέπει να ανοίξετε τη σελίδα σε μια νέα καρτέλα. Αυτό είναι βολικό για τον χρήστη, αφού παραμένει ανοιχτή η τρέχουσα σελίδα στην επόμενη καρτέλα.
2. Χαρακτηριστικό title="hint" позволяет прописать подсказку, которая высветится при наведении курсора на ссылку. Это нужно для более точного описания ссылки. Атрибут тайтл поможет пользователю убедиться в том, что по ссылке он найдет нужную информацию, а для поисковой системы это дополнительный ключевые слова для страницы, на которую ведет ссылка.!}
Παράδειγμα με επεξήγηση εργαλείου τίτλου
... πώς να κερδίσετε χρήματα στον ιστότοπό σας ...Μετατρέπεται στα ακόλουθα στη σελίδα:
Σε αυτήν την περίπτωση, η υπόδειξη εμφανίζεται με τον τυπικό τρόπο. Ωστόσο, μπορείτε επίσης να δημιουργήσετε μια πιο όμορφη επεξήγηση εργαλείου: Πώς να κάνετε μια πιο όμορφη επεξήγηση εργαλείου συνδέσμου »
3. Το χαρακτηριστικό class="class name" καθορίζει την κλάση στυλ για τη σύνδεση. Γνωρίζετε ήδη για τις τάξεις από το προηγούμενο μάθημα (στυλ σε html). Για την ετικέτα α, τα στυλ είναι μικρές διαφορές. Θα εξηγήσω όλες τις αποχρώσεις χρησιμοποιώντας το ακόλουθο παράδειγμα.
Παράδειγμα
a.list:link ( color : black ; text-decoration : none ; font-family : Comic Sans Ms ; font-weight : bold ; font-size :14px ; ) a.list:visited ( χρώμα : μαύρο , text-decoration : κανένας ) a.list:hover (χρώμα : πορτοκαλί ; κείμενο-διακόσμηση : υπογράμμιση ; πώς να κερδίσετε χρήματα στον ιστότοποΜετατρέπεται στα ακόλουθα στη σελίδα:
Επιτρέψτε μου να εξηγήσω το παράδειγμα που περιγράφεται παραπάνω. Η τάξη στην οποία περιγράψαμε την ετικέτα που ονομάζεται λίστα. Ας καταλάβουμε τι σημαίνουν τα υστερόγραφα που επισκεφτήκατε , σύνδεσμος και τοποθέτηση του δείκτη.
- στυλ a.class:visited για έναν σύνδεσμο που έχει ήδη επισκεφτεί ο χρήστης. Αυτό επιτρέπει στον χρήστη να αποφύγει να επισκεφθεί την ίδια σελίδα δύο φορές, ακόμα κι αν ο σύνδεσμος προς αυτήν τη σελίδα έχει διαφορετικές αγκυρώσεις.
- στυλ a.class:link για τους συνδέσμους που ο χρήστης δεν έχει επισκεφτεί ακόμη (μπορείτε να παραλείψετε το πρόθεμα ":link", αφού το a.class κάνει το ίδιο πράγμα).
- a.class:Hover στυλ συνδέσμου όταν τοποθετείται το δείκτη του ποντικιού. Συνήθως σε αυτό το στυλ δίνεται διαφορετικό χρώμα και επίσης μια υπογράμμιση για να ενημερώνεται ο χρήστης ότι ο σύνδεσμος έχει γίνει ενεργός.
4. Το χαρακτηριστικό rel="parameter" - ορίζει τη σχέση μεταξύ του τρέχοντος εγγράφου και του εγγράφου στο οποίο οδηγεί ο σύνδεσμος. Αυτό το χαρακτηριστικό είναι σημαντικό για τις μηχανές αναζήτησης, αλλά δεν ερμηνεύεται με κανέναν τρόπο από τα προγράμματα περιήγησης. Μπορεί να λάβει τις ακόλουθες τιμές:
4.1. nofollow - σημαίνει ότι το βάρος στον σύνδεσμο δεν θα μεταφερθεί (το ρομπότ δεν θα ακολουθήσει τον σύνδεσμο). Για παράδειγμα:
πώς να κερδίσετε χρήματα στον ιστότοποΟπτικά, δεν θα παρατηρήσετε διαφορές, αλλά για τις μηχανές αναζήτησης αυτός ο σύνδεσμος δεν θα μεταφέρει βάρος. Επομένως, η συμβουλή μου για όλους: κλείστε όλους τους εξωτερικούς συνδέσμους με το χαρακτηριστικό για να εξοικονομήσετε βάρος στον ιστότοπό σας.
4.2. Κανονική - σε περίπτωση πολλών διπλότυπων στον ιστότοπο, υποδεικνύει την κύρια σελίδα μεταξύ όλων των διπλότυπων
Υπάρχουν επίσης πολλές άλλες τιμές για το χαρακτηριστικό rel, αλλά δεν επηρεάζουν καθόλου την εμφάνιση ή τις μηχανές αναζήτησης, επομένως δεν βλέπω νόημα να τις λάβω υπόψη.
Πώς να συνδέσετε μια διεύθυνση emailΟι σύνδεσμοι έχουν ένα άλλο ενδιαφέρον χαρακτηριστικό: μπορείτε να καθορίσετε αμέσως τη διεύθυνση email σε τέτοια μορφή που κάνοντας κλικ σε αυτήν, ο χρήστης θα ανοίξει το πρόγραμμα που είναι το προεπιλεγμένο για την επεξεργασία της αλληλογραφίας του. Ίσως θα είναι το OutLook ή το προεπιλεγμένο πρόγραμμα περιήγησης με αλληλογραφία.
admin@siteΑγαπητέ αναγνώστη, τώρα έμαθες πολλά περισσότερα για την ετικέτα html a. Τώρα σας συμβουλεύω να προχωρήσετε στο επόμενο μάθημα.
Χαίρομαι που σας καλωσορίζω στον ιστότοπο του ιστολογίου! Στο σημερινό άρθρο θα αρχίσουμε να μιλάμε για τη γλώσσα σήμανσης υπερκειμένου html. Αυτή η έκδοση θα είναι η πρώτη στο είδος της (και πολύ από την τελευταία), αφού δεν έχω ξαναγράψει κάτι τέτοιο.
Σχέδιο ανάρτησης:Τώρα όμως που απέκτησα τις απαραίτητες γνώσεις και τις δοκίμασα στην πράξη, θα χαρώ να τις μοιραστώ με τους αναγνώστες μου. Δεν είναι χωρίς λόγο πόση προσπάθεια και χρόνος ξοδεύτηκε στο αρχικό στάδιο, για παράδειγμα, για να μάθετε πώς να εισάγετε έναν σύνδεσμο στο html. Φυσικά, αφού διαβάσετε την ανάρτησή μου, θα γνωρίζετε και θα μπορείτε να το κάνετε αυτό.
Γενικά, αξίζει να σημειωθεί ότι οι ετικέτες συνδέσμων είναι απλώς απαραίτητες στη δουλειά των βελτιστοποιητών, επειδή το ψωμί τους είναι βελτιστοποίηση μηχανών αναζήτησης και, φυσικά, οι γκουρού του SEO πιθανότατα δεν μπορούν να κάνουν χωρίς συνδέσμους, πόσο μάλλον τους απλούς μπλόγκερ :).
Ίσως η ετικέτα σύνδεσης html Α να είναι από τις πιο χρησιμοποιούμενες, μαζί με την ετικέτα img, η οποία είναι απαραίτητη για την εμφάνιση εικόνων στο κείμενο. Κατά μέσο όρο, κάθε άρθρο που δημοσιεύω περιέχει περίπου πέντε συνδέσμους, τόσο προς εσωτερικές όσο και εξωτερικές σελίδες.
Μην ξεχνάτε ότι οι ετικέτες για έναν ιστότοπο html χρησιμοποιούνται όχι μόνο κατά τη σύνταξη αναρτήσεων. Επίσης, θα χρειαστούν κατά την αλλαγή του κώδικα του προτύπου που εγκαταστήσατε στο CMS WordPress ή σε οποιοδήποτε άλλο σύστημα διαχείρισης περιεχομένου.
Επομένως, πρέπει να μελετήσετε τουλάχιστον τις πιο βασικές ετικέτες html για να μην έχετε προβλήματα στο μέλλον κατά την εργασία με συνδέσμους. Για παράδειγμα, εάν χρησιμοποιείτε το "Visual Editor" όταν γράφετε τα άρθρα σας, τότε αυτό δεν είναι πολύ καλό, γιατί εάν αυτό το πρόγραμμα επεξεργασίας δεν λειτουργεί, δεν θα γνωρίζετε καν τον βασικό κώδικα για να προσθέσετε έναν σύνδεσμο.
Γενικά, η γνώση των βασικών εννοιών στη γλώσσα σήμανσης HTML, πιστεύω ότι θα σας βοηθήσει πολύ και θα κάνει τη ζωή σας πιο εύκολη. Ωστόσο, ο χρόνος που ξοδεύετε τώρα μελετώντας υλικό που μπορεί να είναι νέο για εσάς δεν θα πάει χαμένος.
Υπάρχουν επίσης πολλές περισσότερες αποχρώσεις που θα διευκολύνουν την εργασία σας και για τις οποίες θα διαβάσετε παρακάτω στο άρθρο μου - αυτές είναι το rel=”nofollow”, και το target=”_blank” και πολλά άλλα ενδιαφέροντα πράγματα που σχετίζονται με συνδέσμους.
Ετικέτα συνδέσμου A – δημιουργία υπερ-σύνδεσης σε ένα έγγραφο html με και χωρίς άγκυρα
Όπως ήδη σημείωσα παραπάνω, ο σύνδεσμος είναι μια από τις πιο χρησιμοποιούμενες ετικέτες html από εμένα. Χρειάζονται έτσι ώστε οι χρήστες να μπορούν να μετακινούνται εύκολα από το ένα έγγραφο στο άλλο με ένα κλικ.Ωστόσο, για να καθορίσετε τη διαδρομή μιας υπερ-σύνδεσης, πρέπει να χρησιμοποιήσετε το χαρακτηριστικό href. Χάρη σε αυτό, μπορείτε και πρέπει να καθορίσετε τη διεύθυνση URL της σελίδας στην οποία θέλετε να συνδεθείτε. Αυτές μπορεί να είναι είτε εσωτερικές σελίδες του ιστότοπού σας είτε σελίδες οποιουδήποτε άλλου πόρου στον Παγκόσμιο Ιστό.
Anchor html ετικέτα συνδέσμου Ένας σημαντικός παράγοντας που λαμβάνουν υπόψη τα ρομπότ αναζήτησης, επομένως πρέπει να του δώσετε ιδιαίτερη προσοχή. Συνιστώ να χρησιμοποιείτε λέξεις-κλειδιά αγκύρωσης για τις οποίες θέλετε το άρθρο σας να κατατάσσεται πρώτο στα αποτελέσματα αναζήτησης.
Έχοντας κατανοήσει λίγο τη θεωρία των υπερσυνδέσμων σε ένα έγγραφο html, μπορούμε να προχωρήσουμε σε επεξηγηματικά παραδείγματα. Αυτός είναι ο κωδικός που θα έχει ο σύνδεσμος:
Εδώ θα πρέπει να είναι το κείμενο της υπερσύνδεσής σας, δηλαδή, η άγκυρα
Όπως μπορείτε να δείτε, ο σύνδεσμος ξεκινά με μια αγκύλα "
