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

Ετικέτα HTML υπεύθυνη για την εμφάνιση της εικόνας

• εικόνα HTMLΜπορεί να είναι οποιαδήποτε εικόνα σε μορφή PNG, JPEG και GIF.
• Κώδικας HTML για την εικόναορίζεται από ετικέτα .
• εικόνα HTMLμπορεί να είναι το φόντο μιας ιστοσελίδας.
• εικόνα HTMLμπορεί να οριστεί ως υπερσύνδεσμος.

Στο φάκελο D\My_first_site\ ή σε οποιονδήποτε άλλο φάκελο όπου έχετε το αρχείο index.html, τοποθετήστε μια εικόνα με επέκταση, ας πούμε, .jpg, ονομάστε την όπως θέλετε, για παράδειγμα, xxx.

Εισαγωγή εικόνας στον κώδικα HTML μιας σελίδας:

Ετικέτα - μη ζευγαρωμένο. Προσοχή στον τρόπο που είναι κλειστό.

Ιδιότητες και αξίες

• - απαιτείται, υποδεικνύει την πηγή της εικόνας.
• alt="" - ορίζει εναλλακτικό κείμενο, ένα σχόλιο που διαβάζεται από ένα ρομπότ αναζήτησης κατά την ανάλυση του περιεχομένου μιας ιστοσελίδας. Πρέπει επίσης να οριστεί.
• width="" - καθορίζει το πλάτος της εικόνας σε pixel.
• height="" - καθορίζει το ύψος της εικόνας σε pixel.

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

Για την ανάπτυξη ιστού, ισχύουν εικόνες τριών μορφών: PNG (.png), JPEG (.jpg) και GIF (.gif). Το Adobe Photoshop είναι ένα εξειδικευμένο εργαλείο για τη δημιουργία γραφικών για ιστότοπους. Μπορεί να χρησιμοποιηθεί για τη μετατροπή μιας μορφής εικόνας σε άλλη.

εικόνα HTML | Οριζόντια και κάθετα περιθώρια

ή την οριζόντια και κάθετη απόσταση μεταξύ εικόνα και κείμενο

Αποτέλεσμα:

Ιδιότητες και αξίες

• hspace="" - ορίζει οριζόντια απόσταση μεταξύ εικόνας και κειμένου.
• vspace="" - ορίζει κάθετη απόσταση μεταξύ εικόνας και κειμένου.

Εικόνα φόντου HTML

ή φόντο σελίδας που ορίζεται από μια εικόνα

Έχουμε την παρακάτω εικόνα:

Ας γράψουμε τον κώδικα για μια ξεχωριστή σελίδα:

Τα χαρακτηριστικά φόντου και εικόνας φόντου συζητούνται στο .

Εισαγωγή εικόναςκαι η σειρά του → ../images/primer-img.jpg → βλ.

Εικόνα HTML - σύνδεσμος

Παράδειγμα κώδικα:

border="0" - ακυρώνει το περίγραμμα του συνδέσμου γραφικών.

ή όλους τους πιθανούς τρόπους κεντραρίσματος εικόνων

Παράδειγμα κώδικα:

Τι πρέπει να προσέξεις εδώ; → Πρώτον, το γεγονός ότι υποδεικνύονται οι διαστάσεις - αυτό επιταχύνει τη φόρτωση της εικόνας. Δεύτερον, καθορίζονται χαρακτηριστικά alt="", κάτι που είναι επίσης πολύ επιθυμητό να γίνει ακόμα κι αν δεν υπάρχει εναλλακτικό κείμενο. Στην πρώτη περίπτωση προσδιορίστηκε το κεντράρισμα HTMLπαράμετρος, και στη δεύτερη - χρησιμοποιώντας τη γραμμική συμπερίληψη των κλιμακωτών φύλλων στυλ.

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

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

Υπάρχουν μερικά πράγματα που πρέπει να λάβετε υπόψη κατά την προετοιμασία των εικόνων σας.

1. Δεδομένου ότι η ιστοσελίδα φορτώνεται μέσω του δικτύου, ένας σημαντικός παράγοντας είναι μέγεθος ("βάρος") του αρχείου γραφικών, ενσωματωμένο σε ένα έγγραφο web. Όσο μικρότερο είναι, τόσο πιο γρήγορα θα εμφανίζεται η εικόνα.

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

Μορφές γραφικών για ιστοσελίδες

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

Υπάρχει επίσης μια μορφή: PNG, το οποίο υποστηρίζεται επίσης από προγράμματα περιήγησης κατά την προσθήκη εικόνων και διατίθεται σε δύο γεύσεις: PNG-8Και PNG-24. Ωστόσο, η δημοτικότητα της μορφής PNG είναι πολύ κατώτερη σε σχέση με τις μορφές GIF και JPEG.

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

Γράφουμε κώδικα για να εισάγουμε μια εικόνα σε μια ιστοσελίδα

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

Στη σελίδα μας αφιερωμένη στα αυτοκίνητα, ετοίμασα και έβαλα δύο εικόνες. Μπορείτε να δείτε τον κώδικα ενσωμάτωσης για την πρώτη εικόνα στη Λίστα 8.1.

Καταχώριση 8.1.

Έτσι θα μοιάζει η πρώτη εικόνα που έχει εισαχθεί στην ιστοσελίδα του ιστότοπου:

Και τώρα θα σχολιάσω πιο αναλυτικά όσα γράφονται Καταχώριση 8.1.

Η ίδια η εικόνα "εισάγεται" χρησιμοποιώντας την ετικέτα: img src. Η πλήρης καταχώρηση μοιάζει με αυτό: img src="img/mers1.jpg", Οπου "img/mers1.jpg"– υποδηλώνει ότι η εικόνα μας βρίσκεται στον φάκελο: imgκαι το όνομα του αρχείου γραφικών (εικόνα): mers1.jpg.

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

Ας δούμε τις πρόσθετες επιλογές:

σύνορα = "0"– υποδεικνύει ότι δεν υπάρχει πλαίσιο γύρω από την εικόνα, δοκιμάστε να αλλάξετε το 0 σε έναν άλλο αριθμό, για παράδειγμα σε 1 , - αντιστοιχεί στο πάχος του πλαισίου γύρω από την εικόνα μέσα 1 εικονοκύτταρο, 2 – αντιστοιχεί στο πάχος του πλαισίου γύρω από την εικόνα δύο pixel κ.λπ.

Σπουδαίος! Εάν σκοπεύετε να κάνετε μια εικόνα σύνδεσμο, φροντίστε να υποδείξετε την τιμή: σύνορα = "0".

πλάτος = "400"– υποδηλώνει ότι το πλάτος της εικόνας είναι: 400 pixel(βάλτε έναν πραγματικό αριθμό για το πλάτος των εικόνων σας).

ύψος = "209"- υποδηλώνει ότι το ύψος της εικόνας είναι: 209 εικονοστοιχεία(βάλτε έναν πραγματικό αριθμό για το ύψος των εικόνων σας).

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

hspace="20"– υποδεικνύει μια εσοχή κειμένου 20 pixel γύρω από την εικόνα.

align = "αριστερά"– αυτή είναι μια ετικέτα ήδη γνωστή σε εσάς….. Σωστά, σημαίνει αριστερή στοίχιση, μπορεί επίσης να έχει το νόημα: σωστά- δεξιά ευθυγράμμιση.

alt=" Μπροστινή όψη του αυτοκινήτου" !}– εδώ γράφεται εναλλακτικό κείμενο, το οποίο εμφανίζεται όταν τοποθετείτε το ποντίκι πάνω από την εικόνα.

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

Σχόλια σε αυτό το άρθρο (μάθημα):

Πείτε μου πού ακριβώς πρέπει να δημιουργήσω τον φάκελο img;

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

Το θέμα είναι ότι δεν εμφανίζεται η εικόνα, μόνο η επιγραφή. Τι μπορεί να φταίει; Ευχαριστώ.

Ρίξτε μια προσεκτική ματιά στην Λίστα 8.1 παραπάνω. Πάρτε τα όλα μόνοι σας. Στον ριζικό κατάλογο (όπου βρίσκονται όλα τα αρχεία HTML του ιστότοπού σας), δημιουργήστε έναν φάκελο img. Τοποθετήστε όλες τις εικόνες σας σε αυτόν τον φάκελο. Στην καταχώριση, αλλάξτε το mers1.jpg στο όνομα του αρχείου σας. Αλλάξτε επίσης τις τιμές πλάτους και ύψους στις πραγματικές διαστάσεις του αρχείου σας. Καλή τύχη.

Ευχαριστώ πολύ, όλα πήγαν καλά.

Γεια σας. Έχω την ίδια κατάσταση με τον προηγούμενο ομιλητή: Γράφω τον κώδικα όπως ο δικός σας, αλλάζω μόνο το όνομα του αρχείου: αντί για mers.1/jpeg εισάγω τον σύνδεσμο Mercedes/jpeg. Εμφανίζεται μόνο ένα παράθυρο στη σελίδα με το επιγραφή στο επάνω μέρος "Μπροστινή όψη του αυτοκινήτου", και δεν υπάρχει εικόνα. Κατά τη γνώμη μου, το πρόγραμμα περιήγησης δεν μπορεί να βρει τη διαδρομή προς τη φωτογραφία ή δεν είναι γραμμένο σωστά. ΕΔΩ ΕΙΝΑΙ Ο ΚΩΔΙΚΟΣ ΜΟΥ: σι

Κοιτάξτε προσεκτικά τον κώδικα img/mercedes/jpeg. Καλά καταλάβατε, το πρόγραμμα περιήγησης δεν βρίσκει τη διαδρομή προς το αρχείο γραφικών. 2. Το όνομα του αρχείου είναι λάθος, δείτε πώς έχω το mers1.jpg

Λοιπόν, αντέγραψα τον κωδικό και τον έβαλα, έχω ένα οβάλ χωρίς εικόνα, στο οβάλ υπάρχει σύνδεσμος στο πάνω μέρος!

Γεια σας!Το πρόβλημα είναι το ίδιο, δημιούργησα ένα φάκελο με το όνομα img στην ίδια θέση με τα έγγραφα του ιστότοπου, σε αυτόν τον φάκελο αποθηκεύονται εικόνες με το όνομα 1.jpg, τα γράφω όλα όπως στο παράδειγμά σας.

Αν προσέξατε η φωτογραφία μου βρίσκεται στο φάκελο img

Ένα πολύ χρήσιμο άρθρο για αρχάριους webmasters. Η μόνη προειδοποίηση για το χαρακτηριστικό "alt". Σε σχέση με το σχήμα, το άρθρο δίνει την εξής ερμηνεία: "alt="Μπροστινή όψη του αυτοκινήτου" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

εδώ είναι ο κωδικός μου ΛΟΙΠΟΝ ΓΙΑΤΙ Η ΕΙΚΟΝΑ ΤΟΠΟΘΕΤΕΙΤΑΙ ΣΤΟ ΠΛΑΙ ΟΤΑΝ Η ΕΡΓΑΣΙΑ ΓΙΑ ΤΗΝ ΕΙΝΑΙ ΚΕΝΤΡΟ;

Και αν βγάλω μια εικόνα από τον ιστότοπο κάποιου άλλου, δεν θα είναι παραβίαση πνευματικών δικαιωμάτων;

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

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

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

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

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

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

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

AndreyK, πείτε μου πού είναι το σφάλμα; Όσες φορές και να προσπαθήσω δεν λειτουργεί ((

Αντρέι, πες μου γιατί δεν μπορώ να δω την εικόνα. Ο κωδικός μου: Υπάρχει μια επιγραφή, αλλά δεν υπάρχει εικόνα. Η διεύθυνσή μου: [email προστατευμένο]Ευχαριστώ.

Κι εγώ ταλαιπωρήθηκα πολύ καιρό, αλλά πέτυχε! Πράγματι, ο φάκελος imj πρέπει να ανοίξει σε ένα έγγραφο HTML.

Θα το δοκιμάσω σίγουρα, ευχαριστώ

εεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεε εεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεεε

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

Andrey I εισάγω:

Andrey I εισάγω: και δεν έχω εικόνα στο έγγραφο, μόνο επιγραφή!!! Η διεύθυνσή μου: [email προστατευμένο]

ο κωδικός μου... ούτε φωτογραφία. Ο φάκελος img βρίσκεται στον ίδιο φάκελο με το index... παρακαλώ βοηθήστε. [email προστατευμένο]Ευχαριστώ!

Λοιπόν, δεν ξέρω. Διάβασα όλα τα σχόλια. Δοκίμασα τα πάντα. Αντέγραψα και επικολλούσα τα στοιχεία μου. Τίποτα δεν λειτουργεί. Ο φάκελος με τις εικόνες (img) βρίσκεται στην ίδια θέση με το index.html. Αλλά δεν υπάρχει εικόνα. Αντί αυτού υπάρχει ένας κόκκινος σταυρός και μια επιγραφή.Δουλεύω στο πρόγραμμα περιήγησης IE. Να τι μπήκα:

Κοίταξα τον κώδικα HTML της σελίδας στη θέση της φωτογραφίας στο μάθημα: Ο κώδικας στη σελίδα είναι διαφορετικός από αυτόν που υπάρχει στην καταχώριση. Γιατί; και παρεμπιπτόντως στη σελίδα είναι υπογραμμισμένος ο κωδικός “mers1.jpg”. Η αντιγραφή με υπογράμμιση απέτυχε. Προσπάθησα να το βάλω έτσι. Ακόμα δεν υπάρχει εικόνα. Τι συμβαίνει?

Αναρωτιόμαστε, απαντάμε μόνοι μας. Υπέφερα για πολύ καιρό και η εικόνα δεν μπήκε. Αποδείχθηκε: 1, αντί για την ετικέτα src είχα srk 2. Μπερδεύτηκα όταν συνέθεζα τη διαδρομή προς την εικόνα. Μετονόμασα το φάκελο σε IMG και όλα λειτούργησαν. Πέρασα σχεδόν δύο μέρες σε αυτό, αλλά άξιζε τον κόπο.

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

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

..........ποιο είναι το σφάλμα μου που λείπει η εικόνα;

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

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

Μαρίνα, δεν υπάρχει κόλπο και πρόκληση :). Στον κωδικό της Καταχώρησης 8.1. υποδεικνύεται ότι αυτή η εικόνα βρίσκεται στο φάκελο: img. Εάν αλλάξετε το όνομα του φακέλου για τις εικόνες στον κεντρικό υπολογιστή σας και, στη συνέχεια, το αλλάξετε στην καταχώριση, αυτό είναι το όλο κόλπο.

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

Και ανοίγω τα πάντα στο Mozilla Fire Fox πιο πρόσφατα))

Η διαδρομή της εικόνας μου είναι C:Documents and SettingsdenisDesktopkoffevinogradwwwImg και η ίδια η εικόνα ονομάζεται gif, επίσης το όνομα περιλαμβάνει 1.gif...Το κάνω στο σημειωματάριο

Το έκανα και η πλήρης διαδρομή δεν βγαίνει, η mozilla δεν βλέπει τη φωτογραφία του εξερευνητή και την επισημαίνει με έναν κόκκινο σταυρό

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

Εξακολουθώ να έχω την ίδια απορία: γιατί όχι εικόνες, αλλά μόνο η επιγραφή. Δημιούργησα έναν ξεχωριστό φάκελο για τον ιστότοπο: περιέχει μια ιστοσελίδα και ένα σχέδιο. Έγινε εισαγωγή: ΒΟΗΘΗΣΤΕ ΤΙ ΕΙΝΑΙ ΤΟ ΣΦΑΛΜΑ ΤΑΧΥΔΡΟΜΕΙΟΥ ΜΟΥ: [email προστατευμένο]

Πώς να φτιάξετε μια εικόνα ώστε να μπορεί να μεγεθύνεται ή να μικρύνει;

Για κάποιο λόγο η εικόνα δεν κεντρίζει ούτε εμένα. Ποια είναι η σύλληψη;.. Ο κωδικός είναι αυτός:

Γεια σας, αγαπητοί αναγνώστες του ιστότοπου. Σήμερα ας περάσουμε σε ένα πιο ενδιαφέρον θέμα, δηλαδή την εισαγωγή εικόνες. Προκειμένου το πρόγραμμα περιήγησής μας να φορτώσει και να ανοίξει γρήγορα μια σελίδα με μια εικόνα, χρειαζόμαστε μια ΒΕΛΤΙΣΤΟΠΟΙΗΜΕΝΗ εικόνα (σχετικά με το γιατί και πώς να βελτιστοποιήσουμε τις εικόνες). Για να κάνετε λήψη μιας τέτοιας προ-βελτιστοποιημένης εικόνας, μεταβείτε και αποθηκεύστε αυτήν την εικόνα κάνοντας δεξί κλικ και επιλέγοντας "Αποθήκευση εικόνας ως".

Ετικέτα και τη θέση του φακέλου με εικόνες

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

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

Η ίδια η ετικέτα πραγματικά δεν λέει τίποτα στο πρόγραμμα περιήγησης. Επομένως, πρέπει οπωσδήποτε να καθορίσουμε τα χαρακτηριστικά για την ετικέτα. Το πιο σημαντικό από τα χαρακτηριστικά είναι το χαρακτηριστικό src – πηγή. Πρέπει να αναφέρουμε την πηγή της εικόνας μας. Στην περίπτωσή μας, η εικόνα βρίσκεται μέσα στο φάκελο εικόνων σε σχέση με το φάκελο HTML. Εκείνοι. πρέπει να υποδείξουμε ότι η εικόνα μας alarm.jpg βρίσκεται στο φάκελο εικόνων. Και αυτό είναι που μοιάζει.

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

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

Τα χαρακτηριστικά πλάτους και ύψους

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

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

Όπως μπορείτε να δείτε, το πλάτος της εικόνας είναι 307 pixel και το ύψος είναι 450 pixel. Ας γράψουμε τις διαστάσεις σε κώδικα:

Χαρακτηριστικό Alt για εναλλακτική λεζάντα

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

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

Ας ελέγξουμε την οθόνη:

Το σχέδιό μας εμφανίστηκε ακριβώς εκεί που έπρεπε. Αλλά αν προσέξατε, αν και η εικόνα μας έχει πλάτος μόνο 307 pixel, το πρόγραμμα περιήγησης εκχωρεί ολόκληρη τη γραμμή σε αυτήν. Πολύ συχνά προκύπτει το καθήκον να κάνει το κείμενο μετά την εικόνα να ρέει γύρω του, δηλ. στάθηκε στην ίδια γραμμή μαζί της. Αυτή η δυνατότητα υπάρχει. Υλοποιείται με τη βοήθεια ενός οικείου align χαρακτηριστικό– ευθυγράμμιση.

Το χαρακτηριστικό align για τη στοίχιση μιας εικόνας

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

Τώρα ας ελέγξουμε τι συνέβη στο πρόγραμμα περιήγησης.

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

Για να προσθέσετε μια εικόνα σε μια σελίδα HTML, χρησιμοποιήστε την ετικέτα IMG. Υποστηριζόμενες μορφές εικόνας: PNG, GIF και JPEG. Τα υποχρεωτικά χαρακτηριστικά ετικέτας περιλαμβάνουν το χαρακτηριστικό src, το οποίο καθορίζει τη διεύθυνση του αρχείου εικόνας.

Ένας απλός τρόπος για να εισαγάγετε μια εικόνα σε έναν ιστότοπο html:

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

Χαρακτηριστικά ετικέτας IMG

Για να εμφανίσετε μια εικόνα χρησιμοποιώντας μια ετικέτα IMGΧρησιμοποιούνται οι ακόλουθες παράμετροι:

• πλάτος ύψος- υποδεικνύει το πλάτος/ύψος της εικόνας (σε ποσοστό ή pixel).
• ευθυγραμμίζω- στοίχιση εικόνας (δεξιά, αριστερά, κέντρο).
• σύνορο- καθορίζει το πάχος του πλαισίου γύρω από την εικόνα (σε pixel). Εάν το χαρακτηριστικό δεν οριστεί ρητά, χρησιμοποιείται η προεπιλεγμένη τιμή (border=0).
• hspace/vspace- υποδεικνύει το μέγεθος της οριζόντιας/κάθετης εσοχής από την εικόνα στο περιβάλλον περιεχόμενο.

Ας εξετάσουμε τώρα πώς να δημιουργήσετε μια εικόνα σε κώδικα html:

Εδώ οι διαστάσεις δίνονται σε pixel.

Προσαρμόσιμο μεγέθη εικόνας με χρήση HTML

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

Παράγραφος 1

Παράγραφος 2

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

Στη συνέχεια, θα εξετάσουμε πώς να εισαγάγετε μια εικόνα σε ένα έγγραφο 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

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

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

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

Πώς να εισαγάγετε μια εικόνα σε HTML - επεξεργασία, στοίχιση, χαρακτηριστικά