.

Ετικέτα έχει ένα απαιτούμενο χαρακτηριστικό src, η τιμή του οποίου είναι η απόλυτη ή σχετική διαδρομή προς την εικόνα:

Για ετικέτα Τα ακόλουθα χαρακτηριστικά είναι διαθέσιμα:

Πίνακας 1. Χαρακτηριστικά ετικέτας

Χαρακτηριστικό	Περιγραφή, αποδεκτή τιμή
alt	Το χαρακτηριστικό alt προσθέτει εναλλακτικό κείμενο σε μια εικόνα. Εμφανίζεται όπου εμφανίζεται η εικόνα πριν φορτωθεί ή όταν τα γραφικά είναι απενεργοποιημένα και εμφανίζεται επίσης ως επεξήγηση εργαλείου όταν τοποθετείτε το ποντίκι πάνω από την εικόνα. Σύνταξη: alt="περιγραφή εικόνας" . !}
διασταυρούμενης καταγωγής	Το χαρακτηριστικό crossorigin σάς επιτρέπει να φορτώνετε εικόνες από πόρους σε άλλο τομέα χρησιμοποιώντας αιτήματα CORS. Οι εικόνες που έχουν φορτωθεί σε καμβά χρησιμοποιώντας αιτήματα CORS μπορούν να επαναχρησιμοποιηθούν. Επιτρεπόμενες τιμές: ανώνυμη - Το αίτημα πολλαπλής προέλευσης πραγματοποιείται χρησιμοποιώντας μια κεφαλίδα HTTP και δεν μεταδίδονται διαπιστευτήρια. Εάν ο διακομιστής δεν παρέχει διαπιστευτήρια στον διακομιστή από τον οποίο ζητείται το περιεχόμενο, η εικόνα θα καταστραφεί και η χρήση της θα περιοριστεί. χρήση-διαπιστευτήρια — Το αίτημα διασταυρούμενης προέλευσης εκτελείται με διαβίβαση διαπιστευτηρίων. Σύνταξη: crossorigin="anonymous" .
ύψος	Το χαρακτηριστικό height καθορίζει το ύψος της εικόνας. Μπορεί να καθοριστεί σε px ή %. Σύνταξη: ύψος: 300px.
ismap	Το χαρακτηριστικό ismap υποδεικνύει ότι η εικόνα είναι μέρος μιας εικόνας χάρτη που βρίσκεται στον διακομιστή (η εικόνα χάρτη είναι μια εικόνα με περιοχές με δυνατότητα κλικ). Όταν κάνετε κλικ σε μια εικόνα χάρτη, οι συντεταγμένες αποστέλλονται στον διακομιστή ως συμβολοσειρά ερωτήματος διεύθυνσης URL. Το χαρακτηριστικό ismap επιτρέπεται μόνο εάν το στοιχείο είναι απόγονος του στοιχείου με έγκυρο χαρακτηριστικό href. Σύνταξη: ismap.
longdesc	Μια διευρυμένη διεύθυνση URL περιγραφής εικόνας που συμπληρώνει το χαρακτηριστικό alt. Σύνταξη: longdesc="http://www.example.com/description.txt" .
src	Το χαρακτηριστικό src καθορίζει τη διαδρομή προς την εικόνα. Σύνταξη: src="flower.jpg" .
μεγέθη	Ρυθμίζει το μέγεθος της εικόνας ανάλογα με τις επιλογές εμφάνισης. Λειτουργεί μόνο όταν έχει καθοριστεί το χαρακτηριστικό srcset. Η τιμή του χαρακτηριστικού είναι μία ή περισσότερες συμβολοσειρές, διαχωρισμένες με κόμμα.
srcset	Δημιουργεί μια λίστα πηγών εικόνας που θα επιλεγούν με βάση την ανάλυση οθόνης. Μπορεί να χρησιμοποιηθεί μαζί με ή αντί για το χαρακτηριστικό src. Η τιμή του χαρακτηριστικού είναι μία ή περισσότερες συμβολοσειρές, διαχωρισμένες με κόμμα.
χάρτη χρήσης	Το χαρακτηριστικό usemap καθορίζει την εικόνα ως χάρτη εικόνας. Η τιμή πρέπει να ξεκινά με το σύμβολο #. Η τιμή σχετίζεται με την τιμή του χαρακτηριστικού ονόματος ή αναγνωριστικού της ετικέτας
πλάτος	Το χαρακτηριστικό width καθορίζει το πλάτος της εικόνας. Μπορεί να καθοριστεί σε px ή %. Σύνταξη: πλάτος: 100% .

1.1. Διεύθυνση εικόνας

Η διεύθυνση εικόνας μπορεί να καθοριστεί πλήρως (απόλυτη διεύθυνση URL), για παράδειγμα:
url(http://anysite.ru/images/anyphoto.png)

Ή μέσω μιας σχετικής διαδρομής από έγγραφοή ριζικός κατάλογοςδικτυακός τόπος:
url(../images/anyphoto.png) - σχετική διαδρομή από το έγγραφο,
url(/images/anyphoto.png) - σχετική διαδρομή από τον ριζικό κατάλογο.

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

1.2. Διαστάσεις εικόνας

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

1.3. Μορφές αρχείων γραφικών

Μορφή JPEG (Ενωση Επαγγελματιών Φωτογράφων). Οι εικόνες JPEG είναι ιδανικές για φωτογραφίες και μπορούν να περιέχουν εκατομμύρια διαφορετικά χρώματα. Οι εικόνες συμπιέζονται καλύτερα από τα GIF, αλλά το κείμενο και οι μεγάλες περιοχές συμπαγούς χρώματος μπορεί να γίνουν κηλίδες.

Μορφή GIF (Μορφή ανταλλαγής γραφικών). Ιδανικό για συμπίεση εικόνων που έχουν μονόχρωμες περιοχές, όπως λογότυπα. Τα GIF σάς επιτρέπουν να ορίσετε ένα από τα χρώματα να είναι διαφανές, επιτρέποντας στο φόντο μιας ιστοσελίδας να εμφανίζεται μέσω μέρους της εικόνας. Τα GIF μπορούν επίσης να περιλαμβάνουν απλή κινούμενη εικόνα. Οι εικόνες GIF περιέχουν μόνο 256 αποχρώσεις, γεγονός που κάνει τις εικόνες να φαίνονται κηλίδες και μη ρεαλιστικές σε χρώμα, όπως οι αφίσες.

Μορφή PNG (Φορητά γραφικά δικτύου). Περιλαμβάνει τις καλύτερες δυνατότητες των μορφών GIF και JPEG. Περιέχει 256 χρώματα και καθιστά δυνατό ένα από τα χρώματα να είναι διαφανές, ενώ συμπιέζονται οι εικόνες σε μικρότερο μέγεθος από ένα αρχείο GIF.

Μορφή APNG (Κινούμενα φορητά γραφικά δικτύου). Μια μορφή εικόνας βασισμένη στη μορφή PNG. Σας επιτρέπει να αποθηκεύετε κινούμενα σχέδια και υποστηρίζει επίσης τη διαφάνεια.

Μορφή SVG (Κλιμακόμενα διανυσματικά γραφικά). Ένα σχέδιο SVG αποτελείται από ένα σύνολο γεωμετρικών σχημάτων που περιγράφονται σε μορφή XML: γραμμή, έλλειψη, πολύγωνο κ.λπ. Υποστηρίζονται τόσο στατικά όσο και κινούμενα γραφικά. Το σύνολο των συναρτήσεων περιλαμβάνει διάφορους μετασχηματισμούς, μάσκες άλφα, εφέ φίλτρου και τη δυνατότητα χρήσης προτύπων. Οι εικόνες SVG μπορούν να αλλάξουν μέγεθος χωρίς απώλεια ποιότητας.

Μορφή BMP (Εικόνα Bitmap). Είναι μια ασυμπίεστη (πρωτότυπη) εικόνα ράστερ, της οποίας το πρότυπο είναι ένα ορθογώνιο πλέγμα pixel. Ένα αρχείο bitmap αποτελείται από μια κεφαλίδα, μια παλέτα και γραφικά δεδομένα. Η κεφαλίδα αποθηκεύει πληροφορίες σχετικά με την εικόνα γραφικών και το αρχείο (βάθος pixel, ύψος, πλάτος και αριθμός χρωμάτων). Η παλέτα υποδεικνύεται μόνο σε εκείνα τα αρχεία Bitmap που περιέχουν εικόνες παλέτας (8 ή λιγότερα bit) και δεν αποτελούνται από περισσότερα από 256 στοιχεία. Τα γραφικά δεδομένα αντιπροσωπεύουν την ίδια την εικόνα. Το βάθος χρώματος σε αυτήν τη μορφή μπορεί να είναι 1, 2, 4, 8, 16, 24, 32, 48 bit ανά pixel.

Μορφή ICO (εικονίδιο Windows). Μορφή αποθήκευσης εικονιδίων αρχείων στα Microsoft Windows. Επίσης, το εικονίδιο των Windows χρησιμοποιείται ως εικονίδιο σε ιστότοπους στο Διαδίκτυο. Είναι μια εικόνα αυτής της μορφής που εμφανίζεται δίπλα στη διεύθυνση του ιστότοπου ή στον σελιδοδείκτη στο πρόγραμμα περιήγησης. Ένα αρχείο ICO περιέχει ένα ή περισσότερα εικονίδια, το μέγεθος και το χρώμα καθενός από τα οποία μπορούν να ρυθμιστούν ξεχωριστά. Το μέγεθος του εικονιδίου μπορεί να είναι οποιοδήποτε μέγεθος, αλλά τα πιο συνηθισμένα είναι τετράγωνα εικονίδια με πλευρές 16, 32 και 48 pixel.

2. Ετικέτα

Ετικέτα

Η ετικέτα έχει διαθέσιμο ένα χαρακτηριστικό name, το οποίο καθορίζει το όνομα του χάρτη. Η τιμή του χαρακτηριστικού name για την ετικέτα

Στοιχείο

3. Ετικέτα

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

Πίνακας 2. Χαρακτηριστικά ετικέτας

Χαρακτηριστικό	Σύντομη περιγραφή
alt	Ορίζει εναλλακτικό κείμενο για την ενεργή περιοχή χάρτη.
συντεταγμένες	Καθορίζει τη θέση της περιοχής στην οθόνη. Οι συντεταγμένες δίνονται σε μονάδες μήκους και χωρίζονται με κόμματα: Για κύκλος— συντεταγμένες του κέντρου και της ακτίνας του κύκλου· Για ορθογώνιο παραλληλόγραμμο— συντεταγμένες της επάνω αριστερής και κάτω δεξιάς γωνίας· Για πολύγωνο— συντεταγμένες των κορυφών του πολυγώνου με την απαιτούμενη σειρά, συνιστάται επίσης να υποδεικνύονται οι τελευταίες συντεταγμένες, ίσες με την πρώτη, για τη λογική συμπλήρωση του σχήματος.
Κατεβάστε	Συμπληρώνει το χαρακτηριστικό href και λέει στο πρόγραμμα περιήγησης ότι ο πόρος πρέπει να φορτωθεί τη στιγμή που ο χρήστης κάνει κλικ στον σύνδεσμο, αντί, για παράδειγμα, να πρέπει να τον ανοίξει πρώτα (όπως ένα αρχείο PDF). Καθορίζοντας ένα όνομα για ένα χαρακτηριστικό, δίνουμε έτσι ένα όνομα στο φορτωμένο αντικείμενο. Επιτρέπεται η χρήση ενός χαρακτηριστικού χωρίς να προσδιορίζεται η τιμή του.
href	Καθορίζει τη διεύθυνση URL για τη σύνδεση. Μπορεί να καθοριστεί μια απόλυτη ή σχετική διεύθυνση συνδέσμου.
hreflang	Καθορίζει τη γλώσσα του συσχετισμένου εγγράφου web. Χρησιμοποιείται μόνο σε συνδυασμό με το χαρακτηριστικό href. Οι αποδεκτές τιμές είναι μια συντομογραφία που αποτελείται από ένα ζευγάρι γραμμάτων που υποδεικνύουν τον κωδικό γλώσσας.
μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ	Καθορίζει για ποιους τύπους συσκευών θα βελτιστοποιηθεί το αρχείο. Η τιμή μπορεί να είναι οποιοδήποτε ερώτημα μέσων.
σχετ	Επεκτείνει το χαρακτηριστικό href με πληροφορίες σχετικά με τη σχέση μεταξύ του τρέχοντος και του σχετικού εγγράφου. Αποδεκτές τιμές: εναλλακτικό - σύνδεσμος προς μια εναλλακτική έκδοση του εγγράφου (για παράδειγμα, μια έντυπη μορφή της σελίδας, μια μετάφραση ή ένας καθρέφτης). συγγραφέας — σύνδεσμος προς τον συντάκτη του εγγράφου. σελιδοδείκτης - Μόνιμη διεύθυνση URL που χρησιμοποιείται για σελιδοδείκτες. βοήθεια - σύνδεσμος για βοήθεια. άδεια - σύνδεσμος προς πληροφορίες πνευματικών δικαιωμάτων για αυτό το έγγραφο web. επόμενο/προηγούμενο - υποδεικνύει τη σχέση μεταξύ μεμονωμένων διευθύνσεων URL. Χάρη σε αυτήν τη σήμανση, η Google μπορεί να προσδιορίσει ότι το περιεχόμενο αυτών των σελίδων σχετίζεται με μια λογική σειρά. nofollow - εμποδίζει τη μηχανή αναζήτησης να ακολουθεί συνδέσμους σε μια δεδομένη σελίδα ή σε έναν συγκεκριμένο σύνδεσμο. noreferrer - υποδηλώνει ότι όταν ακολουθεί ένας σύνδεσμος, το πρόγραμμα περιήγησης δεν πρέπει να στέλνει μια κεφαλίδα αιτήματος HTTP (Referrer), η οποία καταγράφει πληροφορίες σχετικά με τη σελίδα από την οποία προήλθε ο επισκέπτης του ιστότοπου. prefetch - υποδεικνύει ότι το έγγραφο προορισμού πρέπει να αποθηκευτεί προσωρινά, π.χ. Το πρόγραμμα περιήγησης στο παρασκήνιο κατεβάζει τα περιεχόμενα της σελίδας στην κρυφή μνήμη του. αναζήτηση - Υποδεικνύει ότι το έγγραφο προορισμού περιέχει ένα εργαλείο αναζήτησης. ετικέτα - καθορίζει τη λέξη-κλειδί για το τρέχον έγγραφο.
σχήμα	Καθορίζει το σχήμα της ενεργής περιοχής στο χάρτη και τις συντεταγμένες της. Μπορεί να λάβει τις ακόλουθες τιμές: ορθή — ορθογώνια ενεργή περιοχή. κύκλος — ενεργή περιοχή σε σχήμα κύκλου. πολυ — ενεργή περιοχή σε σχήμα πολυγώνου. προεπιλογή — η ενεργή περιοχή καταλαμβάνει ολόκληρη την περιοχή της εικόνας.
στόχος	Καθορίζει πού θα γίνει λήψη του εγγράφου όταν γίνει κλικ στον σύνδεσμο. Λαμβάνει τις ακόλουθες τιμές: _self — η σελίδα φορτώνεται στο τρέχον παράθυρο. _blank — η σελίδα ανοίγει σε νέο παράθυρο του προγράμματος περιήγησης. _parent — η σελίδα φορτώνεται στο γονικό πλαίσιο. _top - η σελίδα φορτώνεται στο πλήρες παράθυρο του προγράμματος περιήγησης.
τύπος	Καθορίζει τον τύπο MIME των αρχείων συνδέσμων, π.χ. επέκταση αρχείου.

4. Παράδειγμα δημιουργίας χάρτη εικόνας

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

Ρύζι. 1. Παράδειγμα σήμανσης εικόνας για τη δημιουργία χάρτη

2) Ορίστε το όνομα της κάρτας προσθέτοντάς το στην ετικέτα

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers"> !}
Ρύζι. 2. Ένα παράδειγμα δημιουργίας χάρτη εικόνας, όταν κάνετε κλικ στον κέρσορα του ποντικιού σε ένα λουλούδι, μεταβαίνετε σε μια σελίδα με περιγραφή

Γεια σας αγαπητοί αναγνώστες του ιστολογίου! Σε αυτό το άρθρο θα μάθετε τα πάντα πώς να εισαγάγετε μια εικόνα σε μια σελίδα html. Έχετε πολλές εικόνες που θέλετε να τοποθετήσετε στη σελίδα σας ή θέλετε να βάλετε ένα λογότυπο στον ιστότοπό σας; Όλα αυτά είναι εύκολα. Αφού διαβάσετε αυτό το άρθρο, θα μπορείτε να εισάγετε εικόνες στις σελίδες σας html χωρίς δυσκολίες. Για να γίνει αυτό, θα μιλήσουμε λεπτομερώς ετικέτα και τα χαρακτηριστικά του, θα ρίξουμε μια γρήγορη ματιά σε μορφές αρχείων γραφικών όπως gif, jpeg και png, και επίσης θα εξετάσουμε νέες δυνατότητες HTML5 που διευκολύνουν την εισαγωγή βίντεο και ήχου στον ιστότοπό σας.

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

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

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

Μορφές γραφικών εικόνων.

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

1. Μορφή JPEG(Ένωση Επαγγελματιών Φωτογράφων). Αρκετά δημοφιλής μορφή που χρησιμοποιείται για την αποθήκευση εικόνων. Υποστηρίζει χρώμα 24-bit και διατηρεί αμετάβλητους όλους τους ημίτονους στις φωτογραφίες. Αλλά το jpeg δεν υποστηρίζει τη διαφάνεια και παραμορφώνει τις μικρές λεπτομέρειες και το κείμενο στις εικόνες. Το JPEG χρησιμοποιείται κυρίως για την αποθήκευση φωτογραφιών. Τα αρχεία αυτής της μορφής έχουν τις επεκτάσεις jpg, jpe, jpeg.

2. Μορφή GIF(Μορφή ανταλλαγής γραφικών). Το κύριο πλεονέκτημα αυτής της μορφής είναι η δυνατότητα αποθήκευσης πολλών εικόνων ταυτόχρονα σε ένα αρχείο. Αυτό σας επιτρέπει να δημιουργήσετε ολόκληρα κινούμενα βίντεο. Δεύτερον, υποστηρίζει τη διαφάνεια. Το κύριο μειονέκτημα είναι ότι υποστηρίζει μόνο 256 χρώματα, κάτι που δεν είναι κατάλληλο για την αποθήκευση φωτογραφιών. Το GIF χρησιμοποιείται κυρίως για την αποθήκευση λογότυπων, banner, εικόνων με διαφανείς περιοχές και που περιέχουν κείμενο. Τα αρχεία σε αυτήν τη μορφή έχουν την επέκταση gif.

3. Μορφή PNG(Φορητά γραφικά δικτύου). Αυτή η μορφή αναπτύχθηκε ως αντικατάσταση του παλαιού τύπου GIF και, σε κάποιο βαθμό, του JPEG. Υποστηρίζει τη διαφάνεια, αλλά δεν επιτρέπει την κίνηση. Αυτή η μορφή έχει την επέκταση png.

Κατά τη δημιουργία ιστοσελίδων, συνήθως χρησιμοποιούν εικόνες σε μορφή JPEG ή GIF, αλλά μερικές φορές χρησιμοποιούν PNG. Το κύριο πράγμα είναι να καταλάβουμε σε ποιες περιπτώσεις ποια μορφή είναι καλύτερη να χρησιμοποιήσετε. Εν συντομία:

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

• Το GIF χρησιμοποιείται κυρίως για κινούμενα σχέδια.
• Το PNG είναι η μορφή για οτιδήποτε άλλο (εικονίδια, κουμπιά κ.λπ.).

Εισαγωγή εικόνων σε σελίδες html

Λοιπόν, πώς εισάγετε μια εικόνα σε μια ιστοσελίδα; Μπορείτε να εισαγάγετε μια εικόνα χρησιμοποιώντας ένα single ετικέτα . Το πρόγραμμα περιήγησης τοποθετεί την εικόνα στη θέση της ιστοσελίδας όπου συναντά την ετικέτα .

Κωδικός για την εισαγωγή εικόνας σε htmlη σελίδα μοιάζει με αυτό:

Αυτός ο κώδικας html θα τοποθετήσει στην ιστοσελίδα μια εικόνα που είναι αποθηκευμένη στο αρχείο image.jpg, το οποίο βρίσκεται στον ίδιο φάκελο με την ιστοσελίδα. Όπως ίσως έχετε παρατηρήσει, η διεύθυνση της εικόνας αναγράφεται χαρακτηριστικό src. Σας είπα ήδη τι είναι. Έτσι, το χαρακτηριστικό src είναι ένα απαιτούμενο χαρακτηριστικό που χρησιμεύει για να υποδείξει τη διεύθυνση του αρχείου με την εικόνα. Χωρίς το χαρακτηριστικό src, η ετικέτα img δεν έχει νόημα.

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

- αυτός ο κώδικας html θα εισαγάγει μια εικόνα που ονομάζεται image.jpg στη σελίδα, η οποία αποθηκεύεται στο φάκελο εικόνων που βρίσκεται στη ρίζα του ιστότοπου.

Το χαρακτηριστικό src μπορεί να περιέχει περισσότερα από απλώς σχετικούς συνδέσμους προς εικόνες. Δεδομένου ότι οι εικόνες αποθηκεύονται στο διαδίκτυο μαζί με σελίδες html, έτσι κάθε αρχείο εικόνας έχει τη δική του διεύθυνση url. Επομένως, μπορείτε να εισαγάγετε τη διεύθυνση URL της εικόνας στο χαρακτηριστικό src. Για παράδειγμα:

Αυτός ο κώδικας θα εισάγει μια εικόνα από τον ιστότοπο mysite.ru στη σελίδα. Μια διεύθυνση URL χρησιμοποιείται συνήθως όταν δείχνετε μια εικόνα σε άλλο ιστότοπο. Για εικόνες που είναι αποθηκευμένες στον ιστότοπό σας, είναι προτιμότερο να χρησιμοποιείτε σχετικούς συνδέσμους.

Ετικέτα είναι ένα ενσωματωμένο στοιχείο, επομένως είναι καλύτερο να το τοποθετήσετε μέσα σε ένα στοιχείο μπλοκ, για παράδειγμα μέσα σε μια ετικέτα

- παράγραφος:

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

Τότε ο κώδικας html της σελίδας με την εισαγόμενη εικόνα θα είναι αυτός:

Ιστοσελίδα για αυτοκίνητα.

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

Επιστημονική γλώσσα αυτοκίνητοΑυτό:

Μηχανικό μηχανοκίνητο οδικό όχημα χωρίς τροχιές με τουλάχιστον 4 τροχούς.

---

Ταξινόμηση αυτοκινήτων

Τα αυτοκίνητα είναι των εξής τύπων:

• Επιβατηγό αυτοκίνητο;


• Φορτίο;


• SUV;


• Αμαξάκι;


• Μαζεύω;


• Αθλητισμός;


• Ιπποδρομίες.

Ολα τα δικαιώματα διατηρούνται. 2010
Ιστοσελίδα για αυτοκίνητα.

Και δείτε το αποτέλεσμα εμφάνισης στο πρόγραμμα περιήγησης:

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

Το χαρακτηριστικό alt είναι μια εναλλακτική επιλογή

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

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

Και αυτό είναι περίπου αυτό που μοιάζει:

Ορίστε τις διαστάσεις της εικόνας

Υπάρχουν ακόμα μερικά χαρακτηριστικά ετικέτας img που πρέπει να γνωρίζετε. Αυτά είναι μερικά χαρακτηριστικά πλάτοςΚαι ύψος. Μπορείτε να τα χρησιμοποιήσετε για να καθορίσετε τις διαστάσεις της εικόνας:

width="300" height="200">

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

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

Εισαγωγή βίντεο και ήχου με χρήση HTML 5

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

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

Ετικέτα

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

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

Δεν υπάρχουν πολλά περισσότερα να πούμε για την εισαγωγή εικόνων και πολυμέσων σε σελίδες html. Ελπίζω η ερώτηση "Πώς να εισαγάγετε μια εικόνα σε μια σελίδα html;"σου απάντησα. οπότε θα συνοψίσω απλώς:

Για εισαγωγή εικόνων σε htmlσελίδα χρησιμοποιώντας μία μόνο ετικέτα και υποδείξτε τη διεύθυνση του αρχείου με την εικόνα στο χαρακτηριστικό src: ;

• με τη χρήση alt χαρακτηριστικόετικέτα Μπορείτε να ορίσετε κείμενο αντικατάστασης σε περίπτωση που η εικόνα δεν φορτωθεί.
• χρησιμοποιώντας χαρακτηριστικά πλάτοςΚαι ύψοςΜπορείτε να ορίσετε μεγέθη εικόνας σε μια ιστοσελίδα.
• υπάρχουν ζευγαρωμένες ετικέτες για την εισαγωγή ήχου και βίντεο στο html5

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

Εργασία με εικόνες σε HTML (πώς να εισάγετε μια εικόνα, να αλλάξετε το μέγεθός της, να κάνετε την εικόνα σύνδεσμο).

Εισαγωγή εικόνας

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

Για παράδειγμα, για να τοποθετήσετε μια εικόνα σε μια σελίδα:

Η ακόλουθη γραμμή τοποθετείται στη σωστή θέση στο έγγραφο:

Αυτό επιτρέπει στο πρόγραμμα περιήγησης να γνωρίζει ότι ο ριζικός κατάλογος του ιστότοπου www.mysite.comυπάρχει ένας υποκατάλογος img 1.png

Εδώ έχουμε καθορίσει την πλήρη διαδρομή (ή απόλυτη διεύθυνση) στην εικόνα. Μπορείτε να διευκρινίσετε σχετική διεύθυνσηΕικόνες:

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

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

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

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

Διαστάσεις εικόνας

Το μέγεθος κάθε εικόνας καθορίζεται από δύο παραμέτρους: πλάτος και ύψος. Στην ετικέτα Υπάρχουν οι αντίστοιχες παράμετροι: πλάτοςΚαι ύψος. Αυτές οι παράμετροι λαμβάνουν τιμές σε pixel (px).

Μπορείτε να ορίσετε τις πραγματικές διαστάσεις της εικόνας:

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

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

Για παράδειγμα, για να μεγεθύνουμε την εικόνα μας κατά 1,5 φορές, μπορούμε να γράψουμε:

ή

Το αποτέλεσμα θα είναι το ίδιο:

Περισσότερες επιλογές πλάτοςΚαι ύψοςμπορεί να πάρει τιμές σε ποσοστά. Αλλά! Λάβετε υπόψη ότι αυτά είναι ποσοστά του μεγέθους του παραθύρου του προγράμματος περιήγησης. Σε αυτήν την περίπτωση, μπορείτε επίσης να καθορίσετε μόνο μία παράμετρο και να παραλείψετε τη δεύτερη.

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

Και θα πάρουμε:

Κάδρο γύρω από την εικόνα

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

Για παράδειγμα, μπορείτε να προσθέσετε στην εικόνα μας ένα πλαίσιο πάχους 3 εικονοστοιχείων:

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

Το χρώμα του περιγράμματος ταιριάζει με το χρώμα του κειμένου στη σελίδα που καθορίστηκε χρησιμοποιώντας την παράμετρο κείμενοετικέτα (Βλ. Μάθημα 6. Ιδιότητες σελίδας - παράμετροι ετικέτας σώματος), το προεπιλεγμένο χρώμα είναι μαύρο.

Και αν δεν θέλετε να δείτε το πλαίσιο, πιέστε την παράμετρο σύνορομηδενική τιμή:

Εναλλακτικό κείμενο

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

Πότε και εάν φορτωθεί η εικόνα, εναλλακτικό κείμενοθα εμφανιστεί όταν τοποθετήσετε το ποντίκι σας πάνω από αυτήν ακριβώς την εικόνα.

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

Μπορείτε να δημιουργήσετε εναλλακτικό κείμενο πολλών γραμμών.

Για να το κάνετε αυτό, απλώς εισαγάγετε μια αλλαγή γραμμής στο έγγραφο HTML.

κείμενο">

Ευθυγράμμιση εικόνας

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

Παρακάτω είναι ένας πίνακας με πιθανές τιμές παραμέτρων ευθυγραμμίζω:

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

Γέμισμα γύρω από την εικόνα

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

Το παρακάτω παράδειγμα δείχνει το κείμενο που αναδιπλώνεται γύρω από μια εικόνα, με την εικόνα να είναι ευθυγραμμισμένη στα αριστερά και με 5 pixel padding γύρω της:

Στην πόλη της Στοκχόλμης, στον πιο συνηθισμένο δρόμο, στο πιο συνηθισμένο σπίτι, ζει μια συνηθισμένη σουηδική οικογένεια που ονομάζεται Svanteson. Αυτή η οικογένεια αποτελείται από έναν πολύ συνηθισμένο μπαμπά, μια πολύ συνηθισμένη μητέρα και τρία πολύ συνηθισμένα παιδιά - τον Bosse, τον Bethan και τον Baby.

Εδώ είναι το αποτέλεσμα στο πρόγραμμα περιήγησης:

Στην πόλη της Στοκχόλμης, στον πιο συνηθισμένο δρόμο, στο πιο συνηθισμένο σπίτι, ζει μια συνηθισμένη σουηδική οικογένεια που ονομάζεται Svanteson. Αυτή η οικογένεια αποτελείται από έναν πολύ συνηθισμένο μπαμπά, μια πολύ συνηθισμένη μητέρα και τρία πολύ συνηθισμένα παιδιά - τον Bosse, τον Bethan και τον Baby.

Διαχωρισμός εικόνας σε μέρη

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

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

μηδενικές τιμές: σύνορα = "0", cellpacing="0", cellpadding="0".

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

Και ιδού το αποτέλεσμα:

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

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

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

1. Η ετικέτα είναι απλή, επομένως δεν χρειάζεται να την κλείσετε
2. Η ετικέτα λειτουργεί πάντα σε συνδυασμό με το χαρακτηριστικό, το οποίο καθορίζει τη διαδρομή προς την εικόνα.

Γενικά, ας δούμε ένα παράδειγμα για να εμπεδώσουμε όλη αυτή τη δράση. Είμαι σωστός; Κατεβάστε το υλικό του μαθήματος και ανοίξτε το αρχείο html στο Σημειωματάριο. Και τώρα πριν από το κύριο κείμενο γράψτε τα εξής:

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

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

Γνωρίσματα

Όπως είπα παραπάνω, η ετικέτα img συμπληρώνεται αμέσως με το χαρακτηριστικό src. Λοιπόν, νομίζω ότι το έχετε ήδη καταλάβει, οπότε ας μελετήσουμε τα υπόλοιπα. Υπάρχει χώρος για επέκταση εδώ. Υπάρχουν μόνο ένας τόνος χαρακτηριστικών εδώ. Συγγνώμη για τα Γαλλικά μου).

Alt

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

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

Κατ 'αρχήν, δεν χρειάζεται να εισαγάγετε τίποτα ως εναλλακτικό κείμενο, αλλά είναι καλύτερο να αφήσετε το ίδιο το χαρακτηριστικό, ακόμα κι αν είναι κενό.

Πλάτος και Ύψος

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

Το πλάτος είναι υπεύθυνο για το πλάτος της εικόνας και οι τιμές του περιλαμβάνουν το ίδιο το μέγεθος. Σε γενικές γραμμές, εάν έχετε μια εικόνα, για παράδειγμα, 640*480 pixel, και πρέπει να την εμφανίσετε σε έναν ιστότοπο 320*240, τότε απλά θα χρειαστεί να κάνετε τα εξής:

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

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

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

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

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

Ευθυγραμμίζω

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

Υπάρχουν συνολικά πέντε παράμετροι για ευθυγράμμιση:

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

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

Λοιπόν, τώρα αποθηκεύουμε το έγγραφό μας ως συνήθως και βλέπουμε τι έχουμε. Καλά; Βλέπετε τη διαφορά; Τώρα ξέρετε πώς διαφέρουν αυτές οι παράμετροι).

Σύνορο

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

Hspace και Vspace

Λοιπόν, ας δούμε τα πιο πρόσφατα χαρακτηριστικά της ετικέτας img για σήμερα. Το Space (Αγγλικά) μεταφράζεται ως space, space, space (key) κ.λπ. Τα προθέματα H και V σημαίνουν οριζόντια και κατακόρυφη. Δεν πρέπει να υπάρχουν ερωτήσεις εδώ.

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

Βλέπετε; Τα περιθώρια έχουν αυξηθεί τόσο κατακόρυφα όσο και οριζόντια. Αυτό θέλαμε.

Παρεμπιπτόντως, μπορείτε επίσης να εισαγάγετε αυτές τις εικόνες ως κεφαλίδα για ιστότοπους, να δημιουργήσετε εικόνες ως συνδέσμους κ.λπ. Μίλησα για όλα αυτά μέσα.

Λοιπόν, γενικά, φαίνεται να έχω τα πάντα. Σας είπα τα βασικά για την εισαγωγή εικόνων, αλλά αν θέλετε να μάθετε HTML και CSS σαν επαγγελματίας, σας συνιστώ ανεπιφύλακτα να κάνετε λήψη καταπληκτική πορείασε αυτό το θέμα, όπου χάρη σε αυτήν τη γλώσσα σήμανσης και τα επικαλυπτόμενα φύλλα στυλ μπορείτε εύκολα να δημιουργήσετε τρεις τύπους τοποθεσιών: επαγγελματικές κάρτες, ιστολόγια, ηλεκτρονικά καταστήματα. Όλα λέγονται σε απλή και κατανοητή γλώσσα. Είναι απλά μια βόμβα!

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

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

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

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

Εάν εξακολουθείτε να μην έχετε το Notepad++ ή έχετε πρόβλημα με τη λήψη του και σας βασανίζει η ερώτηση - πώς να εισαγάγετε μια εικόνα σε html στο σημειωματάριο;

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

Πώς να εισαγάγετε μια εικόνα σε μια σελίδα HTML

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

Τώρα, για να επεξεργαστείτε ένα τέτοιο αρχείο, απλώς καλέστε το μενού περιβάλλοντος κάνοντας δεξί κλικ πάνω του και μετά «Επεξεργασία με το Σημειωματάριο++».

Θα χρησιμοποιηθεί μια δοκιμαστική σελίδα για την παρακολούθηση των αποτελεσμάτων των αλλαγών στον κώδικα.

Για να εισαγάγετε μια εικόνα στον κώδικα html, χρησιμοποιήστε μια ετικέτα μονής γραμμής img. Το κύριο χαρακτηριστικό του είναι η πηγή της φωτογραφίας.

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

Για να προσθέσετε μια φωτογραφία, θα πρέπει να εισαγάγετε την ακόλουθη γραμμή:

.

Έτσι θα φαίνεται στο πρόγραμμα επεξεργασίας:

Και έτσι θα εμφανίζεται η παρουσία του στη σελίδα:

Srcυποδεικνύει την πηγή της εικόνας. Ένα όνομα αρχείου είναι αρκετό εάν το αρχείο εικόνας βρίσκεται στον ίδιο κατάλογο με το έγγραφο html.

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

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

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

Πίνακας μορφής διαδρομής αρχείου

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

Μετά το σύμβολο ίσου, πρέπει να καθορίσετε το μέγεθος σε pixel.

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

Ευθυγράμμιση και επεξεργασία εικόνας

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

Επιτρέπονται πολλές τιμές για αυτό: κέντρο(κέντρο), αριστερά(αριστερό άκρο) και σωστά(δεξιά άκρη).

Δείτε πώς φαίνεται η εικόνα στη σελίδα, στο κέντρο στη δεξιά άκρη.

Σπουδαίος!Για να αντιστοιχίσετε τη θέση της φωτογραφίας σε σχέση με το κείμενο, αντί για τη σελίδα, το χαρακτηριστικό align πρέπει να χρησιμοποιηθεί στην ετικέτα img Οι τιμές είναι οι ίδιες με το χαρακτηριστικό tag.

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

Για να τοποθετήσετε μια εικόνα στο κείμενο, απλώς εισαγάγετε την ετικέτα img(με όλα τα περιγράμματα) σε ένα μπλοκ κειμένου στο .

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

Για να ορίσετε κάθετες και οριζόντιες εσοχές, χρησιμοποιήστε vspaceΚαι hspace. Η αριθμητική τους τιμή σημαίνει την απόσταση από το κείμενο στην εικόνα, απευθείας σε pixel.

Στο παράδειγμα, το χαρακτηριστικό vspaceη τιμή ορίζεται στα 50 pixel.

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

Δύο ακόμη χρήσιμα χαρακτηριστικά - altΚαι τίτλος. Το πρώτο ορίζει εναλλακτικό κείμενο για την εικόνα.

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

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

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

Μετά την ανανέωση της σελίδας το αποτέλεσμα θα είναι αυτό:

Πίνακας χαρακτηριστικών ετικετών img

ψήφος

	Περιγραφή
src=””	Αναγνωριστικό πηγής εικόνας. Μπορεί να χρησιμοποιηθεί είτε αποθηκευμένο στο σκληρό δίσκο είτε βρίσκεται στο δίκτυο (η διεύθυνση υποδεικνύεται αντί για τη θέση στον σκληρό δίσκο).
πλάτος=""; ύψος=””	Ενδείξεις ύψους και πλάτους εικόνας. Εάν έχει καθοριστεί μόνο ένα, το δεύτερο κλιμακώνεται αυτόματα σύμφωνα με το πρώτο. Η αριθμητική τιμή υποδεικνύει τον αριθμό των pixel.
στοίχιση=””	Χαρακτηριστικό για τη θέση της εικόνας σε σχέση με το κείμενο. Έγκυρες τιμές: μπλουζα,Μέσηςκάτω μέρος,αριστεράσωστά.
σύνορο=””	Ορίζει ένα περίγραμμα γύρω από την εικόνα. Η αριθμητική τιμή αντιστοιχεί στο πάχος του πλαισίου σε pixel.
vspace=""; hspace=””	Δείκτες εσοχής από παρακείμενα στοιχεία κάθετα και οριζόντια. Η τιμή καθορίζει τον αριθμό των pixel μεταξύ των στοιχείων. Κατά την αναδίπλωση κειμένου, το χαρακτηριστικό καθορίζει την απόσταση από το κείμενο.
alt=””	Εκχωρεί μια εναλλακτική περιγραφή σε περίπτωση που η εικόνα για κάποιο λόγο δεν φορτώθηκε. Η τιμή είναι αυθαίρετη.
τίτλος=””	Ορίζει το κείμενο συμβουλής εργαλείου αιώρησης. Η τιμή είναι αυθαίρετη.