Πώς να εισαγάγετε έναν υπερσύνδεσμο σε HTML; Δημιουργία και χρήση υπερσυνδέσμων σε HTML. Πώς να κάνετε μια εικόνα σύνδεσμο σε HTML, Vkontakte, στο φόρουμ και χρησιμοποιώντας CSS Image ως υπερσύνδεσμο για

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

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

Πώς να δημιουργήσετε έναν σύνδεσμο σε HTML, παραδείγματα

1. HREF - είναι υπεύθυνο για το πού πρέπει να οδηγεί ο σύνδεσμος. Ένας τυπικός σύνδεσμος καθορίζεται ως εξής: Κείμενο συνδέσμου.

2. TARGET - είναι υπεύθυνο για το παράθυρο στο οποίο θα ανοίξει το έγγραφο. Προκαθορισμένο νέο έγγραφοανοίγει στο τρέχον παράθυρο του προγράμματος περιήγησης. Το χαρακτηριστικό "target" σάς επιτρέπει να ανοίξετε έναν σύνδεσμο σε ένα νέο παράθυρο προγράμματος περιήγησης. Αυτό το χαρακτηριστικό έχει τις ακόλουθες παραμέτρους:

• _blank - φορτώνει τη σελίδα σε νέο παράθυρο.
• _self - φορτώνει τη σελίδα στο τρέχον παράθυρο.
• _parent - φορτώνει τη σελίδα στο γονικό πλαίσιο.
• _top - ακυρώνει όλα τα καρέ και φορτώνει τη σελίδα σε νέο παράθυρο.

3. NAME - χρησιμοποιείται για πλοήγηση σε μια συγκεκριμένη περιοχή μέσα στη σελίδα. Μετά το σύμβολο κατακερματισμού, η λέξη-κλειδί (σελιδοδείκτης ή ετικέτα) υποδεικνύεται σε εισαγωγικά. Για να μεταβείτε σε αυτήν την ετικέτα, χρησιμοποιήστε τον σύνδεσμο στον οποίο είναι γραμμένη αυτή η ετικέτα.

Παράδειγμα εξωτερικού συνδέσμου

Μεταβείτε στον ιστότοπο

Μεταβείτε στον ιστότοπο Δωρεάν μαθήματα WordPress

Παράδειγμα 4: Εικόνες ως σύνδεσμοι.

Παράδειγμα εικόνας ως αναφορά

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

Μετάβαση στο κείμενο

Κείμενο σελίδας...

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

Λήψη αρχείου Γράψτε ένα γράμμα

Μπορείτε να ορίσετε το χρώμα των συνδέσμων χρησιμοποιώντας χαρακτηριστικά που καθορίζονται στην ετικέτα "body" ως παραμέτρους. Εξετάστε αυτά τα χαρακτηριστικά:

• σύνδεσμος - σύνδεσμος χωρίς επίσκεψη, από προεπιλογή εμφανίζεται με μπλε χρώμα.
• alink - ενεργός σύνδεσμος, κόκκινος από προεπιλογή.
• vlink - σύνδεσμος επίσκεψης, μωβ από προεπιλογή.

Ένα παράδειγμα ρύθμισης χρωμάτων για συνδέσμους...

Έτσι, καταλάβαμε την αρχή με την οποία δημιουργούνται σύνδεσμοι σε HTML. Στους συνδέσμους μπορούν να δοθούν συγκεκριμένα στυλ. Μπορείτε να το δείτε στο μάθημα ακολουθώντας τον σύνδεσμο.

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

Λυρική παρέκβαση:
Μια φορά στο στρατό ο αρχηγός του επιτελείου ήρθε κοντά μου και έδωσε εντολή, παραθέτω:
Φέρτε μου αυτό το έγγραφο, αν και δεν ξέρω πού είναι ή τι είναι!! Γιατί στέκεσαι; Ας τρέξουμε!! Αργησα!!!

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

Επί αυτή τη στιγμήχρησιμοποιώντας το σημειωματάριο, δημιουργήσαμε μόνο ένα έγγραφο HTML, το έχω με το όνομα index.html (γιατί επιλέξατε ένα τόσο περίεργο όνομα index.html και γιατί χρειάζεται, δείτε) δεν ξέρω ποιο, καταλήξατε με το όνομα ο ίδιος, αλλά νομίζω ότι το χρησιμοποιήσατε θυμηθείτε και ξέρετε πού είναι, εκτός φυσικά αν είστε ο προϊστάμενος του προσωπικού μου :).. Σε αυτό το έγγραφο θα προσπαθήσουμε να δημιουργήσουμε έναν σύνδεσμο προς ένα άλλο έγγραφο που δεν έχουμε ακόμα .. Επομένως, πριν συνδέσετε σε αυτό, πρέπει να το δημιουργήσετε, αφού γνωρίζετε ήδη πώς να το κάνετε αυτό.

Ανοίξτε το σημειωματάριο.

Γράφουμε κώδικα γλώσσα html. για παράδειγμα, μια σελίδα με μια σειρά από φωτογραφίες.

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

Τώρα ξέρω ότι έχεις δύο έγγραφο htmlκαι index.html και primer.html και ότι τώρα έχετε ένα ελάχιστο σύνολο για περαιτέρω εκπαίδευση.

Σύνδεσμοι κειμένου.

Ας συναντηθούμε tag (από άγκυρα), μπορείτε να περικλείσετε κείμενο ή μια εικόνα σε αυτό, το οποίο θα γίνει σύνδεσμος προς ορισμένα έγγραφα. Χαρακτηριστικό ετικέτας href καθορίζει το όνομα και τη διαδρομή προς το έγγραφο στο οποίο οδηγεί ο σύνδεσμος.

Όλα μαζί είναι γραμμένα ως εξής:

Ορίστε οι φωτογραφίες μου!!

Όπως ίσως καταλάβατε, το primer.html είναι το όνομα του δεύτερου εγγράφου html μας και η επιγραφή "Εδώ είναι οι φωτογραφίες μου!!" αυτό είναι ένα κομμάτι κειμένου από το αρχείο index.html.

Κατ' αναλογία με τις εικόνες, η ετικέτα Η διαδρομή σύνδεσης προς το έγγραφο που ανοίγει καθορίζεται χρησιμοποιώντας τις ίδιες μεθόδους:

Ορίστε οι φωτογραφίες μου!! - Αυτή η καταχώρηση υποδηλώνει ότι στον κατάλογο όπου βρίσκεται το πρώτο μας έγγραφο html υπάρχει ένας φάκελος stranica στον οποίο βρίσκεται το αρχείο primer.html
Ορίστε οι φωτογραφίες μου!! - Αυτό σημαίνει ότι το αρχείο primer.html βρίσκεται ένα επίπεδο ψηλότερα από το έγγραφο
Ορίστε οι φωτογραφίες μου!! - το έγγραφο βρίσκεται στον ιστότοπο www.site.ru..

Λοιπόν, ας το δοκιμάσουμε; Παρακάτω είναι ένα παράδειγμα δύο εγγράφων που περιέχουν συνδέσμους που δείχνουν ο ένας στον άλλο.

Αρχείο Index.html:

Δημιουργία συνδέσμου προς ένα κομμάτι κειμένου





Πες μου, αγαπητό παιδί: σε ποιο αυτί βουίζει;


Δεξιά ή αριστερά;



Αρχείο Primer.html:

Ακολούθησε τον σύνδεσμο εδώ





Αλλά δεν μάντεψα σωστά! Έχω ένα βουητό και στα δύο αυτιά.


Λοιπόν, δεν παίζω έτσι...

Από το παράδειγμα μπορείτε να δείτε ότι οι σύνδεσμοι επισημαίνονται με χρώμα, από προεπιλογή το μπλε είναι ένας σύνδεσμος και το κόκκινο είναι ένας σύνδεσμος που έχετε ήδη επισκεφτεί, αυτά τα χρώματα μπορούν να αλλάξουν χρησιμοποιώντας την ετικέτα ανοίγματος που είναι ήδη πολύ γνωστή σε εμάς< body >και τα χαρακτηριστικά του.

σύνδεσμος - χρώμα συνδέσμου.
alink - χρώμα του ενεργού συνδέσμου που κάνατε κλικ.
vlink - χρώμα του συνδέσμου που επισκεφτήκατε.

Είναι γραμμένο έτσι:

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

Αρχείο Index.html:

ΟΥΡΑΝΙΟ ΤΟΞΟ



Δείτε τη φράση που θα σας βοηθήσει να θυμηθείτε τις θέσεις των χρωμάτων στο ουράνιο τόξο


R
ΕΝΑ
ρε
U
σολ
ΕΝΑ




Αρχείο Primer.html:

ΟΥΡΑΝΙΟ ΤΟΞΟ




Κάθε
κυνηγός
ευχές
ξέρω
Οπου
κάθεται
φασιανός



Επιστρέψτε στην κεντρική σελίδα

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

Σχετικά με το μητρώο... Όταν γράφετε τη διαδρομή και τα ονόματα των εγγράφων, να θυμάστε ότι, για παράδειγμα: Page.html, page.html και PAGE.html είναι τα ονόματα διαφορετικών εγγράφων! Το ίδιο ισχύει για τα ονόματα των σελιδοδεικτών και των εικόνων. Πάντα να λαμβάνετε υπόψη την περίπτωση όταν γράφετε κώδικα· υπάρχει μεγάλη πιθανότητα τέτοια ονόματα να μην αναγνωρίζονται από το ένα πρόγραμμα περιήγησης ή το άλλο. Κάνε κανόνα να γράφεις και να τα αποκαλείς όλα μικρά με λατινικά γράμματα, τότε ο κίνδυνος ιδιοτροπιών του ανθρώπινου παράγοντα και του προγράμματος θα μειωθεί στο μηδέν.

Κανόνας τριών κλικ...

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

Το κύριο χαρακτηριστικό ενός εγγράφου HTML είναι η παρουσία σε αυτό υπερσυνδέσμων (ή απλά συνδέσμων) προς άλλα έγγραφα, τοποθεσίες, αρχεία, εικόνες κ.λπ. Είναι η δυνατότητα εισαγωγής συνδέσμων σε αντικείμενα εκτός της σελίδας που έχει κάνει το Διαδίκτυο τόσο δημοφιλές και βολικό στη χρήση. Επομένως, όταν δημιουργείτε τον ιστότοπό σας, να θυμάστε πάντα τη «μαγεία» των συνδέσμων.

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

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

Όροι § 1. Σύνδεσμος προς αρχείο, σύνδεσμος προς ιστότοπο, σύνδεσμος προς σελίδα

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

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

Στο πρόγραμμα περιήγησης θα δούμε αυτό:

Στο πρόγραμμα περιήγησης θα δούμε αυτό:

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

§ 2. Δημιουργία εξωτερικών συνδέσμων

Οι σύνδεσμοι διαφέρουν μεταξύ τους σε εξωτερικούς και εσωτερικούς, καθώς και σε κείμενο και γραφικά. Οι εξωτερικοί σύνδεσμοι οδηγούν εκτός της σελίδας html, οι εσωτερικοί σύνδεσμοι οδηγούν σε διαφορετικά μέρη της ίδιας σελίδας. Οι σύνδεσμοι κειμένου είναι κείμενο (από προεπιλογή, επισημαίνεται με μπλε και υπογραμμισμένο) και οι γραφικοί σύνδεσμοι περιέχουν μια εικόνα ως αντικείμενο στο οποίο πρέπει να κάνετε κλικ για να μεταβείτε. Όλοι αυτοί οι τύποι συνδέσμων δημιουργούνται σε HTML χρησιμοποιώντας μια ετικέτα (συντομογραφία για την άγκυρα). Ας το ρίξουμε μια πιο προσεκτική ματιά.

Για να δημιουργήσετε έναν εξωτερικό σύνδεσμο προς έναν ιστότοπο, σελίδα ή αρχείο, χρησιμοποιήστε το χαρακτηριστικό ετικέτας href. Αυτό το χαρακτηριστικό παίρνει ως τιμή τη διεύθυνση URL ενός ιστότοπου, σελίδας ή αρχείου (το συζητήσαμε παραπάνω). Μεταξύ των ετικετών βρίσκεται το ορατό τμήμα του συνδέσμου (άγκυρα συνδέσμου), δηλαδή αυτό που βλέπουμε στην οθόνη του προγράμματος περιήγησης. Η άγκυρα συνδέσμου μπορεί να είναι είτε απλό κείμενο (σύνδεσμος κειμένου) είτε γραφική εικόνα(σύνδεσμος-εικόνα). Ένας σύνδεσμος εικόνας δημιουργείται με την εισαγωγή μιας γνωστής ετικέτας μεταξύ των ετικετών και. Γενικά, η σύνταξη για τη δημιουργία ενός συνδέσμου μοιάζει με αυτό:

Για παράδειγμα, για να δημιουργήσετε έναν σύνδεσμο κειμένου στην αρχική σελίδα αυτού του ιστότοπου, πρέπει να γράψετε τον ακόλουθο κώδικα HTML:

http://www.seoded.ru/">Κύρια σελίδα του ιστότοπου

Στο πρόγραμμα περιήγησης θα μοιάζει με αυτό:

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

§ 2.1 Γραφικοί σύνδεσμοι (σύνδεσμοι εικόνων)

Όπως είπα παραπάνω, για να δημιουργήσετε έναν σύνδεσμο εικόνας, πρέπει να χρησιμοποιήσετε το . Ένα παράδειγμα τέτοιου συνδέσμου μοιάζει με αυτό:

Και το πρόγραμμα περιήγησης θα δείξει:

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

border="0">

Αρχική σελίδα

§ 3. Εσωτερικοί σύνδεσμοι

Οι εσωτερικοί σύνδεσμοι χρησιμοποιούνται για την άνετη πλοήγηση σε σελίδες με πολύ περιεχόμενο. Με τη βοήθειά τους έφτιαξα τα «Περιεχόμενα μαθήματος» (δείτε στην αρχή αυτής της σελίδας). Οι εσωτερικοί σύνδεσμοι δημιουργούνται χρησιμοποιώντας την ίδια αρχή με τους εξωτερικούς συνδέσμους. Μόνο η τιμή του χαρακτηριστικού href καθορίζει την «άγκυρα» του συνδέσμου. Το "anchor" δημιουργείται από το χαρακτηριστικό name:

name="anchor name">κείμενο

Και το όνομα της "άγκυρας" ορίζεται αυθαίρετα. Αξίζει να πούμε εδώ ότι δεν καταλαβαίνουν όλα τα προγράμματα περιήγησης τα ρωσικά ονόματα των "αγκύρων", γι 'αυτό συνιστώ να χρησιμοποιήσετε το λατινικό αλφάβητο. Το κείμενο μεταξύ των ετικετών για τη δημιουργία μιας «άγκυρας» δεν απαιτείται και, τις περισσότερες φορές, δεν προσδιορίζεται.

Το "I am meales" βρίσκεται σε εκείνα τα σημεία της σελίδας όπου πρέπει να μεταβεί ο χρήστης αφού κάνει κλικ στον σύνδεσμο.

Όπως είπα παραπάνω, στο χαρακτηριστικό href ενός εσωτερικού συνδέσμου, αντί για τη διεύθυνση, υποδεικνύεται το όνομα της επιθυμητής «άγκυρας» με το υποχρεωτικό σύμβολο κατακερματισμού (#) μπροστά της. Ας το δούμε με ένα παράδειγμα.

Δημιούργησα μια «άγκυρα» που ονομάζεται zagolovok και την τοποθέτησα στον κώδικα της σελίδας δίπλα στον τίτλο αυτού του μαθήματος (Υπερσύνδεσμοι σε HTML). Ο κώδικας αγκύρωσης είναι ο εξής:

name="zagolovok">

href="#zagolovok">Στον τίτλο

Και στο πρόγραμμα περιήγησης ως εξής:

Εάν παρατηρήσατε, αφού κάνετε κλικ στον εσωτερικό σύνδεσμο προς τον τίτλο, η διεύθυνση URL στη γραμμή διευθύνσεων του προγράμματος περιήγησης άλλαξε:

Στην αρχική διεύθυνση:

http://www..html

http://www..html#zagolovok

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

§ 4. Απόλυτες και σχετικές αναφορές

Αρχική σελίδα

Αλλά με σχετικούς συνδέσμους είναι λίγο πιο περίπλοκο. Σε τέτοιους συνδέσμους, η διεύθυνση υποδεικνύεται είτε σε σχέση με τον ριζικό φάκελο του ιστότοπου (αυτός στον οποίο βρίσκεται η κύρια σελίδα) είτε σε σχέση με την αρχική σελίδα. Τέτοιοι σύνδεσμοι χρειάζονται, για παράδειγμα, εάν ο ιστότοπος βρίσκεται στο οικιακός υπολογιστής. Ή αυτό δεν είναι ένας ιστότοπος, αλλά μια σελίδα που αποτελεί δείκτη σε άλλα έγγραφα.

Ας υποθέσουμε ότι πρέπει να αναφερθούμε στη σελίδα klienty.html, η οποία βρίσκεται στον ίδιο φάκελο με αρχική σελίδαιστοσελίδα. Τότε ο σχετικός κωδικός συνδέσμου θα μοιάζει με:

/klienty.html">Πελάτες

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

/zakazy/klienty.html">Πελάτες

Τώρα ας δούμε τη δημιουργία υπερσυνδέσμων σε σχέση με την αρχική σελίδα. Ας υποθέσουμε ότι έχουμε μια σελίδα price.html (πηγή σελίδα) και από αυτήν πρέπει να συνδεθούμε με τη σελίδα klienty.html. Υπάρχουν οι ακόλουθες τυπικές επιλογές:

1. Οι σελίδες price.html και klienty.html βρίσκονται στον ίδιο φάκελο.

klienty.html">Πελάτες




2. στον ριζικό φάκελο του ιστότοπου, η σελίδα price.html βρίσκεται στο φάκελο zakazy ένα επίπεδο ψηλότερα).

Ο κώδικας θα μοιάζει με αυτό:

../klienty.html">Πελάτες

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




3. Η σελίδα klienty.html και ο φάκελος zakazy βρίσκονται στον ριζικό φάκελο του ιστότοπου, ο φάκελος mebel στον φάκελο zakazy, η σελίδα price.html στον φάκελο mebel (δηλαδή, η σελίδα klienty.html σε σχέση με η αρχική σελίδα price.html είναι δύο επίπεδα υψηλότερη ).

../../klienty.html">Πελάτες

Δηλαδή, κάθε επίπεδο υποδεικνύεται με δύο τελείες και μια κάθετο «/».




4. στον ριζικό φάκελο του ιστότοπου, η σελίδα klienty.html βρίσκεται στο φάκελο zakazy (δηλαδή τώρα η σελίδα klienty.html σε σχέση με την αρχική σελίδα price.html βρίσκεται ένα επίπεδο χαμηλότερα).

zakazy/klienty.html">Πελάτες

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




5. Η σελίδα price.html (αρχική σελίδα) και ο φάκελος zakazy βρίσκονται στον ριζικό φάκελο του ιστότοπου, ο φάκελος mebel στον φάκελο zakazy, η σελίδα klienty.html στον φάκελο mebel (δηλαδή τώρα το klienty Η σελίδα .html είναι σε σχέση με την αρχική τιμή.html σελίδα βρίσκεται δύο επίπεδα παρακάτω).

zakazy/mebel/klienty.html">Πελάτες




6. Στον ριζικό φάκελο του ιστότοπου υπάρχουν δύο φάκελοι: zakazy και oplata. Η σελίδα klienty.html βρίσκεται στο φάκελο zakazy, η αρχική σελίδα price.html βρίσκεται στο φάκελο oplata (δηλαδή, και οι δύο σελίδες βρίσκονται σε διαφορετικούς φακέλους ένα επίπεδο κάτω από τον ριζικό φάκελο του ιστότοπου).

../zakazy/klienty.html">Πελάτες

§ 5. Σύνδεσμος σε email

Για να δημιουργήσετε έναν σύνδεσμο προς το email, πρέπει να αντικαταστήσετε τη διεύθυνση URL στην τιμή του χαρακτηριστικού href με μια διεύθυνση email που υποδεικνύει το πρωτόκολλο (mailto:). Και όταν κάνετε κλικ σε αυτόν τον σύνδεσμο, θα ανοίξει ένα παράθυρο πρόγραμμα αλληλογραφίαςμε τη διεύθυνση email που έχει εισαχθεί στο πεδίο «Προς». Στον κώδικα HTML μοιάζει με αυτό:

mailto: [email προστατευμένο]">Η αλληλογραφία μου

Και στο πρόγραμμα περιήγησης είναι έτσι.

Γεια σας, αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου! Όπως γνωρίζετε, για να προωθήσετε με επιτυχία έναν ιστότοπο και να αυξήσετε τη θέση του στα αποτελέσματα αναζήτησης, είναι απαραίτητο να πραγματοποιήσετε βελτιστοποίηση SEO υψηλής ποιότητας του ιστότοπου. Η έννοια του "", η οποία, με τη σειρά της, χωρίζεται σε εσωτερική και εξωτερική, είναι άρρηκτα συνδεδεμένη με έννοιες όπως "εσωτερικοί και εξωτερικοί σύνδεσμοι ιστότοπου". Επομένως, είναι πολύ σημαντικό για εμάς να γνωρίζουμε πόσοι σύνδεσμοι πρέπει να υπάρχουν στον ιστότοπο, πώς να ελέγξουμε τον αριθμό τους, πώς να αφαιρέσουμε περιττούς συνδέσμους από τον ιστότοπο και να τους αποκλείσουμε από την ευρετηρίαση, πώς να αυξήσουμε τη μάζα συνδέσμων κ.λπ. Για να απαντήσουμε σε όλες αυτές και άλλες ερωτήσεις σχετικά με εσωτερικούς και εξωτερικούς συνδέσμους, ας καταλάβουμε πρώτα τι είναι ένας σύνδεσμος (ή υπερσύνδεσμος) σε HTML.

Σε αυτό το άρθρο θα σας πω τι είναι ένας σύνδεσμος, πώς να δημιουργήσετε έναν υπερσύνδεσμο σε HTML σε έναν ιστότοπο, πώς να ανοίξετε έναν σύνδεσμο σε ένα νέο παράθυρο, πώς να δημιουργήσετε έναν σύνδεσμο προς μια διεύθυνση ηλεκτρονικού ταχυδρομείου (e-mail) και πώς να δημιουργήστε έναν σύνδεσμο προς μια εικόνα. Θα θίξουμε επίσης έννοιες όπως ετικέτες html και χαρακτηριστικά υπερσυνδέσμων, άγκυρα συνδέσμων, αγκύρωσης html και συνδέσμους κατακερματισμού. Λοιπόν, ας ξεκινήσουμε.

Τι είναι σύνδεσμος (υπερσύνδεσμος).

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

Πώς να δημιουργήσετε έναν σύνδεσμο (υπερσύνδεσμος) σε HTML σε έναν ιστότοπο.

Είναι πολύ εύκολο να συνδέσετε μια άλλη σελίδα στον δικό σας ή σε άλλο ιστότοπο. Για να δημιουργήσετε έναν υπερσύνδεσμο, πρέπει να πείτε στο πρόγραμμα περιήγησης ποιος είναι ο σύνδεσμος και να υποδείξετε τη διεύθυνση του εγγράφου στο οποίο θα οδηγήσει. Αυτό γίνεται χρησιμοποιώντας μια ετικέτα HTML και το απαιτούμενο χαρακτηριστικό href:

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

Απόλυτος σύνδεσμος

Χρησιμοποιούνται για να υποδείξουν ένα έγγραφο σε άλλο ιστότοπο (ο σύνδεσμος είναι εξωτερικός).

Είναι επίσης δυνατό να δημιουργήσετε απόλυτους συνδέσμους σε έναν ιστότοπο, αλλά είναι πιο σωστό να χρησιμοποιείτε σχετικές διευθύνσεις, οι οποίες φαίνονται πιο σύντομες, για τη δημιουργία εσωτερικών συνδέσμων. Όμως, κατά την ανάλυση διαφόρων τοποθεσιών, παρατήρησα ότι η συντριπτική πλειοψηφία των webmasters κάνει εσωτερικούς συνδέσμους με απόλυτες διευθύνσεις. Αυτό έχει το πλεονέκτημά του, γιατί αν η σελίδα σας αντιγραφεί, τότε με αυτόν τον τρόπο θα λάβετε λειτουργικά backlinks.

Όπως μπορείτε να δείτε, με απόλυτους συνδέσμους όλα είναι απλά. Είναι πιο δύσκολο με τα σχετικά, γιατί κατά τη δημιουργία τους, πρέπει να καταλάβετε ποια τιμή του χαρακτηριστικού href πρέπει να προσδιορίζεται, καθώς εξαρτάται από την αρχική θέση των εγγράφων. Όπως είπα ήδη, κανείς δεν ασχολείται πραγματικά με αυτό και κάνει όλους τους συνδέσμους στον ιστότοπο απόλυτους. Ωστόσο, εάν ενδιαφέρεστε να μάθετε περισσότερα σχετικά με το πώς να δημιουργείτε σωστά σχετικούς συνδέσμους για έναν ιστότοπο, μπορώ να προτείνω ένα άρθρο του Ντμίτρι, συγγραφέα του ιστολογίου ktonanovenkogo.ru. Δεν έχω δει πιο λεπτομερή και κατανοητή εξήγηση.

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

Σχετικός σύνδεσμος

Προς κύρια

Κείμενο συνδέσμου (άγκυρα)

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

Πώς να ανοίξετε έναν σύνδεσμο σε νέο παράθυρο.

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

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

1	Νέο παράθυρο

Νέο παράθυρο

Τι πρέπει να κάνετε εάν, όταν επισκέπτεστε τον ιστότοπο κάποιου άλλου, όπου ανοίγουν σύνδεσμοι στο τρέχον παράθυρο, θέλετε να τους ανοίξετε σε νέο; Απλά πρέπει να κάνετε κλικ σε αυτά όχι με ένα κουμπί, αλλά με τον τροχό του ποντικιού. Σε αυτήν την περίπτωση ΝΕΑ ΣΕΛΙΔΑανοίγει σε νέο παράθυρο.

Πώς να δημιουργήσετε έναν σύνδεσμο σε ένα e-mail (διεύθυνση email).

Κάνοντας κλικ σε αυτόν τον σύνδεσμο θα ανοίξει το πρόγραμμα για εργασία μέσω e-mail, εγκατεστημένο από προεπιλογή, όπου θα έχει ήδη συμπληρωθεί το πεδίο «Προς». Για να συμπληρωθεί αυτόματα το θέμα της επιστολής, πρέπει να δημιουργήσετε έναν σύνδεσμο σε ένα e-mail αυτού του τύπου:

Ο Dmitry KtoNaNovenkogo συμβουλεύει έναν άλλο τρόπο για να ορίσετε σελιδοδείκτες στο κείμενο μιας ιστοσελίδας, χωρίς τη χρήση αγκυρώσεων html. Για να γίνει αυτό, κάνουμε έναν σελιδοδείκτη από οποιαδήποτε ετικέτα HTML που είναι διαθέσιμη στη σελίδα, εκχωρώντας της το χαρακτηριστικό καθολικού αναγνωριστικού. Για παράδειγμα, ας προσθέσουμε σελιδοδείκτη σε μια ετικέτα τίτλου h3:

Κείμενο τίτλου

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

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

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

Σύνδεση κειμένου με σελιδοδείκτη αγκύρωσης html

Τύποι και χρώματα υπερσυνδέσμων σε HTML.

• Ένας σύνδεσμος χωρίς επίσκεψη είναι μπλε και υπογραμμισμένος.
• Ενεργός σύνδεσμος - γίνεται κόκκινο κατά το διάστημα μεταξύ του κλικ του ποντικιού στον σύνδεσμο και της έναρξης της φόρτωσης μιας νέας σελίδας. Είναι σαφές ότι βρίσκεται σε αυτή την κατάσταση μόνο για λίγο.
• Σύνδεσμος επίσκεψης – αλλάζει το χρώμα του σε μωβ αφού κάνετε κλικ σε αυτόν.

Μπορείτε να αλλάξετε το χρώμα των υπερσυνδέσμων σε ένα έγγραφο HTML χρησιμοποιώντας μια ετικέτα και τα ακόλουθα χαρακτηριστικά της:

• Σύνδεσμος – χρώμα συνδέσμων που δεν έχουν επισκεφτεί.
• Alink – χρώμα του ενεργού συνδέσμου.
• Vlink – χρώμα των συνδέσμων που έχετε επισκεφτεί.

Όλα τα παραπάνω χαρακτηριστικά μπορούν να συνδυαστούν:

1

Ελπίζω να είναι πλέον σαφές πώς να δημιουργήσετε μια υπερ-σύνδεση σε μια σελίδα HTML και σε ένα e-mail, πώς να κάνετε μια εικόνα σύνδεσμο, τι είναι οι αγκυρώσεις κειμένου, οι σύνδεσμοι κατακερματισμού και οι αγκυρώσεις html, οι ετικέτες html και οι ιδιότητες συνδέσμων. Προσπάθησα, όσο καλύτερα μπορούσα, να πω λεπτομερώς τι είναι και τι είναι οι σύνδεσμοι σε HTML. Να σας υπενθυμίσω ότι η εισαγωγή υπερσυνδέσμων σε κείμενο γίνεται μόνο σε λειτουργία HTML.

Δεν έχω ξαναγράψει τόσο μεγάλα άρθρα, πάνω από 10.000 χαρακτήρες. Αλλά αυτό δεν είναι το τέλος του θέματος των συνδέσμων, για να συνεχιστεί.

Εάν αυτό το άρθρο σας ήταν χρήσιμο, κάντε κλικ στα κουμπιά κοινωνικών μέσων παρακάτω. Τα λέμε ξανά στις σελίδες!

Καλημέρα σε όλους, αγαπητοί μου φίλοι και αναγνώστες. Ελπίζω να αποφασίσατε να πάρετε μέρος στον διαγωνισμό μου και να γράφετε ήδη για το ταξίδι σας στο blog. Λοιπόν, θα ήθελα να συνεχίσουμε τη μελέτη μας για τη γλώσσα html και σήμερα θα ήθελα να σας πω για ένα από τα πιο σημαντικά στοιχεία, δηλαδή τους υπερσυνδέσμους.

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

Και σήμερα θα μάθουμε πώς να εισάγουμε έναν υπερσύνδεσμο σε html. Πρώτα όμως θα ήθελα να σας ρωτήσω: Ξέρετε τι είναι ακόμη ένας υπερσύνδεσμος και σε τι διαφέρει από έναν κανονικό σύνδεσμο; Όλα είναι στην πραγματικότητα απλά εδώ: ένας σύνδεσμος είναι μια απλή πληροφορία που αναφέρεται σε ένα έγγραφο. Ταυτόχρονα, δεν μπορείτε να κάνετε κλικ σε αυτό το κείμενο (δεν θα συμβεί τίποτα), αλλά ξέρετε πού να αναζητήσετε πληροφορίες.

Παράδειγμα: Μπορείτε να μάθετε πώς να τονίζετε τα μαλλιά στο Photoshop στο //site/adobe-photoshop/kak-vydelit-volosy/

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

Μπορείτε να διαβάσετε για το πώς να τονίσετε σωστά τα μαλλιά στο Photoshop σε ένα από τα σεμινάρια μου.

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

Η ζευγοποιημένη ετικέτα είναι υπεύθυνη για την υπερ-σύνδεση, αλλά από μόνη της δεν αντιπροσωπεύει τίποτα. Πάντα σε συνδυασμό με μια ιδιότητα. Και σε αυτήν την περίπτωση, πρέπει να γράφουμε συνεχώς το ίδιο href. Στην τιμή του χαρακτηριστικού βάζουμε τον σύνδεσμο προς τον ίδιο τον επιθυμητό πόρο. Και στο ίδιο το περιεχόμενο γράφουμε το ίδιο το κείμενο, το οποίο θα πρέπει να γίνει κλικ (λειτουργεί όταν πατηθεί). Δείτε το παράδειγμα και νομίζω ότι θα καταλάβετε τα πάντα.

Μηχανή αναζήτησης Yandex

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

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

Εσωτερικές μεταβάσεις Αρχείο στον ίδιο φάκελο

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

Αρχείο σε άλλο φάκελο

Ανοίξτε το αρχείο pushkin.html στο Notepad++

Τώρα βρείτε τη λέξη φωτογραφία και τυλίξτε την σε ετικέτες.

Τώρα προσοχή! Στην τιμή του χαρακτηριστικού καθορίζουμε τη διαδρομή σε σχέση με το αρχείο που επεξεργάζεται, δηλαδή το ίδιο το pushkin.html. Θα πρέπει να καταλήξετε σε κάτι σαν αυτό:

φωτογραφία

Τι κάναμε τώρα; Και κάναμε το εξής: αφού η διαδρομή προς τη φωτογραφία βρίσκεται σε έναν ξεχωριστό φάκελο img, ο οποίος βρίσκεται στον ίδιο φάκελο με το αρχείο pushkin.html, τότε στην τιμή του χαρακτηριστικού πρέπει πρώτα να γράψουμε το όνομα του φακέλου και στη συνέχεια με κάθετο (/) το πλήρες όνομα του εγγράφου (στην περίπτωσή μας φωτογραφίες).

Τώρα αποθηκεύστε και εκτελέστε το αρχείο pushkin.html στο πρόγραμμα περιήγησής σας. Θα δείτε ότι η λέξη «Φωτογραφία» έχει τονιστεί με μπλε χρώμα και έχει γίνει κλικ, πράγμα που σημαίνει ότι κάνοντας κλικ σε αυτόν τον σύνδεσμο θα μεταφερθούμε στο αρχείο fofo.jpg, το οποίο βρίσκεται στο φάκελο img.

Πώς, λοιπόν? Ολα ΕΝΤΑΞΕΙ? Αν συμβεί κάτι, μη διστάσετε να ρωτήσετε.

Εξωτερικές μεταβάσεις

Και φυσικά, δεν μπορούμε να μην αναφέρουμε εξωτερικούς συνδέσμους, αφού κάνουμε κλικ στους οποίους θα μεταφερθούμε σε εντελώς διαφορετικό ιστότοπο. Αλλά δεν υπάρχει τίποτα περίπλοκο εδώ. Το όλο θέμα είναι ότι βάζετε την πλήρη διεύθυνση του ιστότοπου ή της ιστοσελίδας στην τιμή href. Έδειξα ένα παράδειγμα με το Yandex παραπάνω. Αλλά εδώ είναι ένα άλλο παράδειγμα:

Θα σπουδάσω για να γίνω master στα κοινωνικά έργα.

Εδώ φτάνουμε σε μια συγκεκριμένη σελίδα ενός συγκεκριμένου ιστότοπου.

Ανοίγει σε νέο παράθυρο

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

Το χαρακτηριστικό target με την τιμή "_blank" θα μας βοηθήσει σε αυτό. Δεν υπάρχει τίποτα περίπλοκο εδώ. Θα χρειαστεί απλώς να το εισαγάγετε μέσα στην ετικέτα ανοίγματος μετά την τιμή του χαρακτηριστικού href. Ας πάρουμε αυτό το απόσπασμα από το αρχείο lukomorye.html, όπου δημιουργήσαμε έναν σύνδεσμο προς τη σελίδα pushkin.html, μόνο που τώρα θα γράψουμε αυτό ακριβώς το χαρακτηριστικό. Θα πρέπει να μοιάζει με αυτό:

Από το ποίημα Ruslan and Lyudmila (Συγγραφέας - A.S. Pushkin)

Λοιπόν, όλα είναι ξεκάθαρα εδώ. Τώρα, όταν κάνετε κλικ στο περιεχόμενο, η επιθυμητή σελίδα θα ανοίξει σε νέο παράθυρο. Αυτό το πράγμα είναι πολύ απαραίτητο, γιατί αν δεν το εγγράψετε, ο χρήστης απλά θα φύγει από τη σελίδα σας. Και έτσι, σε κάθε περίπτωση, θα παραμείνει σε αυτό, μόνο αν δεν το κλείσει συγκεκριμένα. Προσπαθήστε να κάνετε τα πάντα μόνοι σας, απλά κάντε τα πάντα όμορφα με τα χέρια σας. Δεν χρειάζεται αντιγραφή και επικόλληση.

Κάπως έτσι. Φαίνεται ότι σας είπα όλα τα πιο σημαντικά πράγματα, αλλά αν θέλετε να κινηθείτε προς αυτή την κατεύθυνση και να μάθετε HTML και CSS για να δημιουργήσετε επαγγελματικούς ιστότοπους, ιστολόγια, ακόμη και ηλεκτρονικά καταστήματα, τότε φροντίστε να παρακολουθήσετε ένα εξαιρετικό μάθημα βίντεο για αυτό το θέμα. Τα μαθήματα είναι πραγματικά εξαιρετικά και απευθύνονται πραγματικά σε άτομα που είναι ακόμα ελάχιστα εξοικειωμένα με τη δημιουργία ιστοσελίδων ή δεν είναι καθόλου εξοικειωμένα.

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

Με εκτίμηση, Dmitry Kostin.