Εισαγωγή φωτογραφιών με HTML - πώς λειτουργεί
Αν θέλετε να εισαγάγετε μια εικόνα στον ιστότοπό σας με HTML, χρησιμοποιήστε την ετικέτα img. Διαβάστε εδώ πώς ακριβώς λειτουργεί αυτό και τι πρέπει να προσέξετε.
Πώς να εισαγάγετε εικόνες με HTML - τα βασικά
- Με την ημέρα
μπορεί να εισάγει εικόνες. - Η πηγή εικόνας δίνεται στην ετικέτα:
εισάγει το αρχείο "testbild.webp" από τον υποφάκελο "εικόνες" στον ιστότοπο. - Οι εξωτερικές πηγές μέσω διεύθυνσης URL είναι επίσης δυνατές:
ενσωματώνει το λογότυπο CHIP από τους διακομιστές μας.
Χαρακτηριστικά HTML για ενσωματωμένες εικόνες
Πολλά χαρακτηριστικά μπορούν να προστεθούν μέσα στην ετικέτα img:
- Χρησιμοποιήστε "πλάτος" και "ύψος" για να καθορίσετε το μέγεθος της εικόνας στον ιστότοπο: Η εικόνα
εμφανίζεται τετράγωνο με μήκος πλευράς 100 pixel. - Με το "alt" ορίζετε ένα εναλλακτικό κείμενο που εμφανίζεται αν δεν είναι δυνατή η φόρτωση της αντίστοιχης εικόνας. Θα πρέπει πάντα να ορίσετε αυτό το χαρακτηριστικό κατά την εισαγωγή εικόνων με HTML.
- Το χαρακτηριστικό "σύνορο" καθορίζει το πάχος του πλαισίου σε εικονοστοιχεία. Μια φωτογραφία με
έχει ένα πλαίσιο που είναι σχετικά παχύ με πέντε εικονοστοιχεία. - Χρησιμοποιήστε την "ευθυγράμμιση" για να ευθυγραμμίσετε το γραφικό. Οι τιμές για αυτό το χαρακτηριστικό είναι "κάτω", "πάνω", "μέση", "αριστερά", "δεξιά" και "κέντρο".
- Με τα "hspace" και "vspace" μπορείτε (οριζόντια και κάθετα) να ορίσετε μια απόσταση από την εικόνα.
Ποια μορφή πρέπει να χρησιμοποιήσω;
Υπάρχουν διάφορες μορφές εικόνας που μπορείτε να συμπεριλάβετε στον κώδικα HTML.
- JPG: Οι εικόνες μορφής JPG χρησιμοποιούνται συνήθως για ιστοσελίδες. Αυτή η μορφή αντιπροσωπεύει 16, 7 εκατομμύρια χρώματα. Επιπλέον, ένα JPG μπορεί να συμπιεστεί πολύ καλά. Το αρχείο εικόνας μπορεί επομένως να γίνει πολύ μικρό, πράγμα που επιτρέπει γρήγορο χρόνο φόρτωσης.
- PNG: Η μορφή PNG μπορεί επίσης να εμφανίσει 16, 7 εκατομμύρια χρώματα και μπορεί να συμπιεστεί. Το πλεονέκτημα έναντι της μορφής JPG είναι ότι η συμπίεση είναι δυνατή χωρίς απώλειες.
- Οι περιοχές που ορίζονται σε μορφή PNG μπορούν επίσης να εμφανίζονται με διαφάνεια. Ωστόσο, τα πολύ παλιά προγράμματα περιήγησης παρουσιάζουν προβλήματα εμφάνισης διαφανειών.
- GIF: Αν θέλετε να εισάγετε κινούμενες εικόνες με HTML, η μορφή GIF είναι κατάλληλη. Μόνο 256 χρώματα εμφανίζονται σε αυτή τη μορφή και η συμπίεση γίνεται αυτόματα χωρίς οποιεσδήποτε επιλογές ρύθμισης.
- Η μορφή GIF είναι πιο κατάλληλη για μικρά, κινούμενα γραφικά ή λογότυπα. Για να διασφαλιστεί ότι τα λογότυπα ταιριάζουν αρμονικά σε μια σελίδα, οι διαφάνειες μπορούν να χρησιμοποιηθούν σε μορφή GIF, όπως PNG.
παράδειγμα HTML
- Αυτό ενσωματώνει το λογότυπο CHIP από την ιστοσελίδα μας.
- Εμφανίζεται με ύψος 100 pixel και πλάτος 200 pixel.
- Αν δεν είναι δυνατή η φόρτωση, το "CHIP-Logo" εμφανίζεται ως κενό κείμενο.
- Η εικόνα πλαισιώνεται από ένα πλαίσιο δύο εικονοστοιχείων.
- Είναι ευθυγραμμισμένη δεξιά και έχει απόσταση 50 εικονοστοιχείων από τα άλλα πλευρικά στοιχεία.