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

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

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

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

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

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

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

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

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

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

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

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

Αρχείο στον ίδιο φάκελο

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

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

1. Ανοίξτε το αρχείο pushkin.html στο Notepad++
2. Τώρα βρείτε τη λέξη φωτογραφία και τυλίξτε την σε ετικέτες<a href> .
3. Τώρα προσοχή! Στην τιμή του χαρακτηριστικού καθορίζουμε τη διαδρομή σε σχέση με το αρχείο που επεξεργάζεται, δηλαδή το ίδιο το 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.

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

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

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

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

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

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

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

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

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

Δωρεάν μαθήματα WordPress

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

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

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

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

Λήψη αρχείου

Γράψε ένα γράμμα

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

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

...

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

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

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

Πώς να εισαγάγετε μια εικόνα - html ετικέτες Img

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

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

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

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

Για να εισάγετε εικόνεςΗ ετικέτα HTML Img χρησιμοποιείται στη σελίδα. Η παρακάτω εικόνα εισήχθη χρησιμοποιώντας αυτήν:

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

Η απόλυτη διαδρομή προς το Src θα ξεκινήσει από το http://vash_sait.ru (για το blog μου -). Στη συνέχεια, χρησιμοποιώντας το "/" για να διαχωρίσετε τα ονόματα των υποφακέλων, γράφεται η πλήρης διαδρομή προς το αρχείο εικόνας, που τελειώνει στο τέλος με το όνομα και την επέκταση του ίδιου του αρχείου. Για παράδειγμα,

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

Εάν αυτό το αρχείο βρίσκεται στον ίδιο διακομιστή, αλλά σε διαφορετικό κατάλογο, πρέπει να καθορίσετε τη διαδρομή προς αυτό από τον κατάλογο όπου βρίσκεται το έγγραφο από το οποίο γίνεται πρόσβαση (στο παράδειγμα που φαίνεται παραπάνω, χρησιμοποιείται μια σχετική διαδρομή - image/finik.jpg) .

Ορίστε το πλάτος και το ύψος της εικόνας χρησιμοποιώντας τις ιδιότητες Πλάτος και Ύψος

Τα χαρακτηριστικά Html Width και Height σάς επιτρέπουν να ορίσετε το μέγεθος της περιοχής (πλάτος και ύψος, αντίστοιχα) που θα εκχωρηθεί στη σελίδα για αυτήν την εικόνα. Εισάγονται μέσα στην ετικέτα Img, για παράδειγμα ως εξής:

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

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

Κατά την αποθήκευση σχεδίων, χρησιμοποιήστε συμπαγείς τύπους GIF (για την εισαγωγή σχηματικών εικόνων) ή JPG (για την εισαγωγή φωτογραφιών). Το Width και το Height, σε αντίθεση με το χαρακτηριστικό Src (το μόνο υποχρεωτικό στην ετικέτα Img), είναι προαιρετικά. Πολλοί απλά δεν τα υποδεικνύουν, αλλά, ωστόσο, το επιτρέπουν ελαφρώς επιταχύνετε τη φόρτωση εγγράφων.

Το γεγονός είναι ότι εάν το πρόγραμμα περιήγησης δεν βρει το Width and Height μέσα στην ετικέτα html Img, τότε θα χρειαστεί χρόνος για να μάθετε το μέγεθος της εικόνας, να τη φορτώσετε και μόνο στη συνέχεια να συνεχίσετε τη λήψη του υπόλοιπου περιεχομένου του εγγράφου . Στην περίπτωση που έχετε καθορίσει Ύψος και Πλάτος, το πρόγραμμα περιήγησης κρατά αυτόματα χώρο για την εικόνα των μεγεθών που καθορίζονται σε αυτά τα χαρακτηριστικά και συνεχίζει να φορτώνει περαιτέρω την ιστοσελίδα.

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

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

Εάν χρησιμοποιούνται το Width και το Height, ο χώρος για την εμφάνιση εναλλακτικού κειμένου θα περιοριστεί στα μεγέθη που καθορίζονται σε αυτά. Ως επί το πλείστον, αυτός είναι ο λόγος που προσπαθώ να γράψω αυτά τα χαρακτηριστικά στην ετικέτα Img.

Alt και τίτλος στην ετικέτα html Img

Πολύ χρήσιμο από εσωτερική άποψη βελτιστοποίηση μηχανών αναζήτησης site είναι τα χαρακτηριστικά Alt και Title. Διαβάστε και προωθήστε τον ιστότοπο μόνοι σας ή στη δημοσίευση "".

Το πρώτο από αυτά ορίζει το λεγόμενο εναλλακτικό κείμενο για την εικόνα. Μπορείτε να δείτε αυτό το κείμενο εάν απενεργοποιήσετε τα γραφικά στο πρόγραμμα περιήγησής σας. Το Alt έχει σχεδιαστεί για αυτό - πείτε μηχανές αναζήτησηςγια το τι είδους σχέδιο πρέπει να υπάρχει. Ο τίτλος έχει σκοπό να ενημερώσει τον χρήστη για το περιεχόμενο της εικόνας.

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

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

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

Το επόμενο χαρακτηριστικό μέσα σε μια ετικέτα html χωρίζεται από το προηγούμενο με ένα κενό. Στο τέλος υπάρχει ένα τριγωνικό στήριγμα κλεισίματος. Λάβετε υπόψη ότι το Img δεν είναι ζευγαρωμένο, π.χ. δεν έχει ετικέτα κλεισίματος.

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

Δημιουργήστε υπερσυνδέσμους χρησιμοποιώντας την ετικέτα συνδέσμου html "A"

Ένας σύνδεσμος είναι ένα από τα κύρια στοιχεία της οργάνωσης εγγράφων σε HTML. Χωρίς αυτούς, μια ιστοσελίδα θα ήταν απλώς μια σελίδα. Δημιουργούνται χρησιμοποιώντας την ετικέτα "A". Το μόνο απαιτούμενο χαρακτηριστικό είναι Href. Καθορίζει τη διεύθυνση URL (διαδρομή) όπου πρέπει να μεταβεί ο χρήστης κάνοντας κλικ σε αυτόν τον υπερσύνδεσμο.

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

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

Ανοίγει σε νέο παράθυρο και σύνδεσμος από την εικόνα (εικόνα)

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

Το Target έχει μια επιλογή για αυτό το σκοπό που σας επιτρέπει να ανοίξετε τη σελίδα σε ένα νέο παράθυρο που ονομάζεται _ΚΕΝΟ. Εάν ο στόχος δεν έχει καθοριστεί στην ετικέτα Α, τότε ο σύνδεσμος θα ανοίξει στο ίδιο παράθυρο. Παράδειγμα χρήσης Χαρακτηριστικό στόχου:

Άγκυρα (εάν ο σύνδεσμος χρησιμοποιείται για εσωτερική σύνδεση, τότε αυτό το κείμενο θα πρέπει να περιέχει τις λέξεις-κλειδιά με τις οποίες θέλετε να προωθήσετε το άρθρο στο οποίο οδηγεί αυτός ο υπερσύνδεσμος)

Λάβετε υπόψη ότι η σειρά των χαρακτηριστικών εντός των ετικετών δεν ρυθμίζεται με κανέναν τρόπο. Με την ίδια επιτυχία μπορείτε να γράψετε:

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

Ru/image/finik.jpg" Width="200" Height="150">

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

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

Δημιουργία αγκύρων και συνδέσμων κατακερματισμού

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

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

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

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

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

Ας πούμε ότι για έναν τίτλο σε ένα άρθρο μπορεί να μοιάζει με αυτό:

Τίτλος

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

Ο υπερσύνδεσμος δημιουργείται με τυπικό τρόπο, εκτός από το ότι στο τέλος του Url, που είναι γραμμένο στο Href, τοποθετείται ένα σημάδι κατακερματισμού (αιχμηρό σύμβολο ή σύμβολο κατακερματισμού) και μετά έρχεται το όνομα της ετικέτας της άγκυρας που βρίσκεται στην απαιτούμενη θέση στο κείμενο του άρθρου.

Αγκυρα

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

Αγκυρα

Καλή σου τύχη! Τα λέμε σύντομα στις σελίδες του ιστότοπου του ιστολογίου

Μπορεί να σας ενδιαφέρει

Λίστες σε κώδικα Html - ετικέτες UL, OL, LI και DL
Πώς ορίζονται τα χρώματα σε κώδικα Html και CSS, επιλογή αποχρώσεων RGB σε πίνακες, έξοδος Yandex και άλλα προγράμματα
Φόρμες HTMLγια τον ιστότοπο - ετικέτες Form, Input and Select, Option, Textarea, Label και άλλα για τη δημιουργία στοιχείων φόρμας ιστού
Img - Ετικέτα Html για την εισαγωγή μιας εικόνας (Src), τη στοίχιση και την αναδίπλωση κειμένου γύρω της (στοίχιση), καθώς και τη ρύθμιση του φόντου (φόντο)
Πώς να δημιουργήσετε μια υπερ-σύνδεση (A, Href, Target Blank), πώς να την ανοίξετε σε νέο παράθυρο στον ιστότοπο και επίσης να κάνετε μια εικόνα σύνδεσμο σε κώδικα Html
Iframe και Frame - ποια είναι αυτά και πώς να χρησιμοποιήσετε καλύτερα πλαίσια σε Html
MailTo - τι είναι και πώς να δημιουργήσετε έναν σύνδεσμο σε Html για να στείλετε ένα email Επιλογή, Option, Textarea, Label, Fieldset, Legend - Ετικέτες Html για τη μορφή αναπτυσσόμενων λιστών και πεδίων κειμένου
Ενσωμάτωση και αντικείμενο - Ετικέτες HTMLγια την εμφάνιση περιεχομένου πολυμέσων (βίντεο, φλας, ήχος) σε ιστοσελίδες
Οδηγίες σχολίων και Doctype σε κώδικα Html, καθώς και η έννοια του μπλοκ και των ενσωματωμένων στοιχείων (ετικέτες)

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

Δημιουργία απλής υπερσύνδεσης

Μεταβείτε σε άλλη σελίδα

Όλα είναι απλά εδώ, για να δημιουργήσουμε έναν υπερσύνδεσμο χρησιμοποιούμε την ετικέτα όπου href=”” είναι η διεύθυνση της σελίδας στην οποία θα γίνει η μετάβαση, στην περίπτωσή μας αυτή η σελίδα βρίσκεται στον ίδιο κατάλογο. Μπορείτε επίσης να εισαγάγετε εδώ μια διεύθυνση όπως href=”http://site.ru/page.html“ ή θα μπορούσε να είναι ένας σύνδεσμος προς ένα αρχείο που βρίσκεται σε άλλο φάκελο στον ιστότοπό σας href=”arj/arhiv.zip” ή σε οποιοδήποτε άλλο έγγραφο, που στην πραγματικότητα δεν έχει καμία διαφορά. Επίσης, ένα υποχρεωτικό χαρακτηριστικό οποιουδήποτε υπερσυνδέσμου είναι ο τίτλος, αυτή είναι μια περιγραφή του συνδέσμου, αυτό είναι ένα πολύ σημαντικό στοιχείο στη βελτιστοποίηση μηχανών αναζήτησης και εδώ γράφετε τις λέξεις-κλειδιά της σελίδας ή του εγγράφου στο οποίο συνδέεστε. Το κείμενο που βρίσκεται ανάμεσα στην ετικέτα ονομάζεται άγκυρα και είναι επίσης πολύ σημαντικό.

Άνοιγμα συνδέσμου σε νέα σελίδα

Υπάρχει ένα άλλο ενδιαφέρον χαρακτηριστικό που μπορεί να σας φανεί χρήσιμο:

Μεταβείτε σε άλλη σελίδα

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

Σύνδεσμοι εικόνων

Αποτέλεσμα στο πρόγραμμα περιήγησης:

Ουσιαστικά όλα είναι απλά εδώ, τοποθέτησα την ετικέτα εικόνας μεταξύ της ετικέτας υπερσύνδεσης ανοίγματος και κλεισίματος , αλλά και πάλι δεν έβαλα απλά δύο εικόνες, στη μία εκχώρησα την κλάση img στην οποία επαναφέρω το πλαίσιο γύρω από την εικόνα, αφού όταν γίνει υπερσύνδεσμος εμφανίζεται, αλλά όχι σε όλους τους browsers, για παράδειγμα θα το δείτε. στον IE, αλλά όχι στο Google Chrome.

Υπογράμμιση σε συνδέσμους

Μεταβείτε σε άλλη σελίδα
Μεταβείτε σε άλλη σελίδα

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

Σύνδεσμοι μέσα σε ένα έγγραφο

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

< /a>

Κεφάλαιο….< /a>

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

Η αλληλογραφία μου< /a>

Εδώ τελειώνω το μάθημα «Δημιουργία υπερσυνδέσμων σε html», όπως ίσως έχετε παρατηρήσει, δεν θα μπορούσαμε να κάνουμε χωρίς CSS εδώ, γενικά το υλικό είναι αρκετά απλό, νομίζω ότι όλα θα είναι απλά και ξεκάθαρα για εσάς, αν έχετε ερωτήσεις, γράψτε.

Ημερομηνία δημοσίευσης: 2014-04-23

Μοιραστείτε αυτό το άρθρο: