Οι εικόνες είναι ένα πολύ σημαντικό μέρος μιας ιστοσελίδας καθώς βελτιώνει την εμφάνιση μιας ιστοσελίδας και αυξάνει την αλληλεπίδραση των πελατών. Το USP πολλαπλών ιστότοπων είναι ο τρόπος με τον οποίο οργανώνουν διαφορετικές εικόνες στις ιστοσελίδες τους και προσθέτουν γεύσεις σε αυτό. Σε αυτό Άρθρο εικόνων, θα καταλάβουμε πώς να ενσωματώσουμε εικόνες σε μια ιστοσελίδα χρησιμοποιώντας HTML με την ακόλουθη σειρά:
Πώς να προσθέσετε εικόνα σε HTML
Για να ενσωματώσετε μια εικόνα σε μια ιστοσελίδα, το HTML σας δίνει ετικέτα. Ένα άλλο σημαντικό σημείο που πρέπει να θυμάστε είναι,
δεν έχει ετικέτα κλεισίματος σ.σ. Το χαρακτηριστικό χρησιμοποιείται για τον καθορισμό της διαδρομής της εικόνας, η οποία μπορεί να είναι μια διεύθυνση url ή εικόνας από το σύστημα / διακομιστή. Ας ξεκινήσουμε πρώτα με τη βασική σύνταξη της ενσωμάτωσης εικόνας σε μια ιστοσελίδα χρησιμοποιώντας HTML.
Σύνταξη
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>Δείγμα κώδικα
Ενσωμάτωση εικόνων HTML Εικόνες στην ιστοσελίδα
Παρόμοια με άλλες ετικέτες, υπάρχουν διάφορα χαρακτηριστικά που σχετίζονται με ετικέτα. Ας δούμε το καθένα από αυτά ένα προς ένα, να κατανοήσουμε την ανάγκη τους και πώς να τα χρησιμοποιήσουμε.
Ετικέτες εικόνων HTML
- alt Χαρακτηριστικό
Το χαρακτηριστικό alt είναι το εναλλακτικό κείμενο για μια εικόνα. Ο λόγος για τον οποίο εισήχθη το χαρακτηριστικό alt είναι εάν για οποιονδήποτε λόγο η εικόνα δεν μπόρεσε να φορτώσει τότε θα πρέπει να εμφανιστεί ένα εναλλακτικό κείμενο δίνοντας μια ιδέα για την εικόνα. Οι λόγοι για τη φόρτωση της εικόνας μπορεί να είναι η αργή σύνδεση στο Διαδίκτυο ή η εικόνα δεν βρίσκεται στην παρεχόμενη πηγή κ.λπ.
Εάν η εικόνα βρίσκεται μέσα στον ίδιο φάκελο όπου βρίσκεται το αρχείο HTML, μπορείτε να καθορίσετε απευθείας το όνομα του αρχείου. Διαφορετικά, έχετε την παροχή της απόλυτης διαδρομής του αρχείου εικόνας.
Η τιμή του χαρακτηριστικού alt πρέπει να περιγράφει την εικόνα.
Παράδειγμα
Ενσωμάτωση εικόνων HTML Εικόνες στην ιστοσελίδα
πώς να αποκτήσετε το μήκος ενός πίνακα σε javascript
- Πλάτος και ύψος μιας εικόνας
Το χαρακτηριστικό στυλ χρησιμοποιείται για τον καθορισμό του ύψους και του πλάτους μιας εικόνας. Στο χαρακτηριστικό στυλ καθορίζετε το στυλ CSS.
Ενσωμάτωση εικόνων HTML Εικόνες στην ιστοσελίδα
Μερικά από τα σημαντικά σημεία κατά την ενσωμάτωση μιας εικόνας σε μια ιστοσελίδα χρησιμοποιώντας HTML είναι:
τι είναι ιδανικό στην Ιάβα
- Τα χαρακτηριστικά πλάτους και ύψους ορίζονται σε pixel.
- Μπορείτε επίσης να ορίσετε το πλάτος και το ύψος μιας εικόνας σε ποσοστό. Θα εξετάσει το ποσοστό σύμφωνα με ολόκληρη την ιστοσελίδα.
- Εάν καθορίσετε μόνο ένα από αυτά τότε προσαρμόζει ανάλογα το άλλο.
- Ενσωμάτωση εικόνων χρησιμοποιώντας διεύθυνση URL
Το HTML σάς παρέχει επίσης την ευελιξία όπου μπορείτε να επιλέξετε την εικόνα από έναν άλλο διακομιστή, απλώς καθορίζοντας τη διεύθυνση URL. Μπορείτε να χρησιμοποιήσετε έναν ξεχωριστό διακομιστή για να φιλοξενήσετε τις εικόνες και, στη συνέχεια, να ενσωματώσετε αυτές τις εικόνες χρησιμοποιώντας τη διεύθυνση URL.
Ενσωμάτωση εικόνων HTML Εικόνες στην ιστοσελίδα
- Εικόνα ως σύνδεσμος
Μπορείτε επίσης να χρησιμοποιήσετε την εικόνα ως σύνδεσμο όπου ο χρήστης μπορεί να κάνει κλικ στην εικόνα και να προσγειωθεί σε μια νέα ιστοσελίδα. Για να το κάνετε αυτό, απλά πρέπει να βάλετε το μέρα μέσα ετικέτα.
Ενσωμάτωση εικόνων HTML Εικόνες στην ιστοσελίδα
- Κινούμενη εικόνα
Μπορείτε επίσης να προσαρμόσετε την ευθυγράμμιση της εικόνας χρησιμοποιώντας την ιδιότητα CSS float. Όλες οι ιδιότητες CSS πρέπει να καθοριστούν στο χαρακτηριστικό στυλ.
Εικόνα HTML
- Χάρτες εικόνων
Αυτό είναι ένα από τα σημαντικά χαρακτηριστικά που παρέχονται από το HTML. Η ετικέτα βοηθά στον καθορισμό ενός χάρτη εικόνας. Πρέπει να αναρωτιέστε τι είναι ένας χάρτης εικόνας. Ένας χάρτης εικόνας είναι μια εικόνα με περιοχές με δυνατότητα κλικ
Εικόνα HTML
- Εικόνα φόντου
Μπορείτε επίσης να προσθέσετε μια εικόνα φόντου σε μια ιστοσελίδα. Απλώς πρέπει να χρησιμοποιήσετε την ιδιότητα CSS, δηλαδή την εικόνα φόντου στην ετικέτα στυλ και να την προσθέσετε στο στοιχείο HTML.
Εικόνα HTMLΕικόνα φόντου
Στοιχείο ΣΩΜΑΤΟΣ
Με αυτό φτάνουμε στο τέλος αυτού του ιστολογίου HTML Images.Τώρα μετά την εκτέλεση των παραπάνω αποσπασμάτων θα καταλάβατε πώς να εισαγάγετε εικόνα σε HTML. Ελπίζω ότι αυτό το blog είναι ενημερωτικό και προστιθέμενη αξία για εσάς.
Ρίξτε μια ματιά στο δικό μας που έρχεται με ζωντανή εκπαίδευση με καθοδήγηση εκπαιδευτή και πραγματική εμπειρία έργου. Αυτή η εκπαίδευση σας κάνει ικανό σε δεξιότητες για να εργαστείτε με τεχνολογίες ιστού back-end και front-end Περιλαμβάνει εκπαίδευση σε Web Development, jQuery, Angular, NodeJS, ExpressJS και MongoDB.
Έχετε μια ερώτηση για εμάς; Αναφέρετέ το στην ενότητα σχολίων του ιστολογίου 'HTML Images' και θα επικοινωνήσουμε μαζί σας.