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

Μορφές αρχείων γραφικών που υποστηρίζονται από τα πιο δημοφιλή προγράμματα περιήγησης ιστού είναι: Μορφή ανταλλαγής γραφικών (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) και Διανυσματικά γραφικά. Μερικές ιδιότητες των αρχείων γραφικών:

• Διαφάνεια - αυτή η ιδιότητα επιτρέπει στην εικόνα να είναι σε διαφορετικούς βαθμούς διαφάνειας από σταθερή έως εντελώς διαφανή.
• Συμπίεση - αυτή η ιδιότητα επιτρέπει την αποθήκευση της εικόνας σε μεγάλο βαθμό μικρότερο αρχείο, χρησιμοποιώντας μαθηματικούς αλγόριθμους για την αντιμετώπιση μιας ομάδας pixel ως ένα μεμονωμένο στοιχείο.
• Weave - επιτρέπει τη φόρτωση της εικόνας πρώτα σε μονές γραμμές και μετά σε ζυγές γραμμές. Αυτό επιτρέπει στον επισκέπτη να δει την εικόνα νωρίτερα.
• Κινούμενα σχέδια - δημιουργεί την εμφάνιση της κίνησης μέσω μιας σειράς διαδοχικών λήψεων. Το κινούμενο GIF δεν απαιτεί πρόσθετο προγράμματος περιήγησης και μπορεί να λειτουργήσει σχεδόν σε όλες τις συσκευές.
• Η προοδευτική φόρτωση είναι παρόμοια με την ύφανση, καθώς φορτώνει μόνο μέρος της εικόνας αρχικά, αλλά δεν βασίζεται σε εναλλασσόμενες γραμμές.

Το GIF ιδρύθηκε το 1980 και υιοθετήθηκε από σχεδιαστές ιστοσελίδων στις αρχές της δεκαετίας του 1990 ως η κύρια μορφή γραφικών για ιστοσελίδες. Τα αρχεία GIF χρησιμοποιούν έναν αλγόριθμο συμπίεσης που κάνει το μέγεθος του αρχείου μικρό γρήγορη φόρτωση. Το GIF περιορίζεται σε 256 χρώματα (8 bit), υποστηρίζει διαφάνεια και πλεγμένα γραφικά. Είναι επίσης δυνατή η δημιουργία κινούμενων γραφικών χρησιμοποιώντας αυτήν τη μορφή. Όλα τα προγράμματα περιήγησης μπορούν να εμφανίζουν αρχεία GIF χωρίς προβλήματα.

Πλεονεκτήματα των GIF:

• Η πιο ευρέως υποστηριζόμενη μορφή γραφικών
• Τα διαγράμματα φαίνονται καλύτερα σε αυτή τη μορφή
• Υποστήριξη διαφάνειας

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

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

Πλεονεκτήματα του JPEG:

• Μεγαλύτερη συμπίεση σημαίνει μεγαλύτερες ταχύτητες λήψης.
• Παράγει εξαιρετική ποιότητα για φωτογραφίες και περίπλοκα σχέδια.
• Υποστήριξη για χρώμα 24-bit.

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

Πλεονεκτήματα του PNG:

• Ξεπερνά τους περιορισμούς χρωμάτων 8-bit του GIF
• Επιτρέπει την περιγραφή κειμένου των εικόνων για τις μηχανές αναζήτησης
• Υποστηρίζει τη διαφάνεια
• Τα σχηματικά φαίνονται καλύτερα από τα JPEG

Διανυσματικά γραφικά

Τα περισσότερα γραφικά Ιστού είναι bitmapή ένα μοτίβο που αποτελείται από ένα πλέγμα από έγχρωμα pixel. Οι εικονογραφήσεις πρέπει να δημιουργούνται σε διανυσματικά γραφικά, τα οποία αποτελούνται από μια μαθηματική περιγραφή κάθε στοιχείου που συνθέτει τα σχήματα γραμμής και τα χρώματα της εικόνας. Τα διανυσματικά γραφικά δημιουργούνται χρησιμοποιώντας προγράμματα όπως π.χ Adobe Illustratorή CorelDRAW. Τα διανυσματικά γραφικά πρέπει να μετατραπούν σε οποιαδήποτε μορφή GIF, JPEG ή PNG για χρήση σε ιστοσελίδες.

Τι μορφή πρέπει να χρησιμοποιηθεί;

Ένας σχεδιαστής ιστοσελίδων μπορεί να επιλέξει μορφή GIF ή JPEG για τις περισσότερες χρήσεις. Όμως, δεδομένου ότι τα αρχεία GIF τείνουν να είναι μικρά σε σύγκριση με τα μεγέθη αρχείων JPEG, οι περισσότεροι σχεδιαστές ιστού θα χρησιμοποιήσουν τη μορφή GIF για φόντο, πλαίσια, πλαίσια και οποιοδήποτε άλλο γραφικό που φαίνεται υπέροχο με χρώμα 8-bit.

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

Μια μεμονωμένη ετικέτα χρησιμοποιείται για την εισαγωγή μιας εικόνας στο κείμενο μιας ιστοσελίδας. (Πίνακας Ρ 1). Τα χαρακτηριστικά αυτής της ετικέτας ορίζουν όλες τις παραμέτρους της εικόνας που τοποθετούνται στη σελίδα. Υποχρεωτικό είναι το χαρακτηριστικό SRC, το οποίο καθορίζει τη διεύθυνση και το όνομα του αρχείου γραφικών. Εάν το χαρακτηριστικό SRC δεν έχει οριστεί, τότε θα εμφανιστεί μόνο ένα κενό εικονίδιο εικόνας.

Δομή ετικέτας με το χαρακτηριστικό SRC μοιάζει με:

.

Εάν το αρχείο γραφικών με το όνομα Institute βρίσκεται στον ίδιο φάκελο με την ιστοσελίδα, τότε για να το τοποθετήσετε, θα πρέπει να γράψετε:

.

Όνομα αρχείου Μορφή

Για να τοποθετήσετε ένα αρχείο γραφικών με το όνομα MINSK, που βρίσκεται στο D:\Collection\Cities\MINSK.GIF, γράψτε .

Με ετικέτα η ιστοσελίδα φιλοξενεί ένα αρχείο γραφικών που βρίσκεται σε άλλον υπολογιστή στο Διαδίκτυο.

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

Το Ινστιτούτο μας

Ρύζι. 4.1. Ιστοσελίδα με φωτογραφία του ινστιτούτου

Στο παραπάνω παράδειγμα, το ύψος της φωτογραφίας (HEIGHT) είναι 200 ​​pixel και το πλάτος (WIDTH) είναι 300 pixel. Για να τοποθετήσετε τη φωτογραφία, δημιουργείται μια παράγραφος με στοίχιση στο κέντρο.

οριζόντιες γραμμές

Η τοποθέτηση οριζόντιων γραμμών σε μια ιστοσελίδα πραγματοποιείται με χρήση μίας ετικέτας

---

. Τα χαρακτηριστικά SIZE, WIDTH, COLOR και ALIGN αλλάζουν το πάχος, το πλάτος, το χρώμα και τη στοίχιση των γραμμών, αντίστοιχα.

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

1.

---

- οριζόντια γραμμήπλήρης σελίδα πάχους 2 pixel.

2.

---

WIDTH = "200" ALIGN="RIGHT"> – οριζόντια πράσινη γραμμή πάχους 15 εικονοστοιχείων, πλάτους 200 εικονοστοιχείων, δεξιά στοίχιση.

3.

---

- οριζόντια γραμμή μπλε χρώματος σε ολόκληρη τη σελίδα με πάχος 25 pixel.

4.

---

WIDTH = "300" ALIGN = "LEFT"> – μια κόκκινη οριζόντια γραμμή πάχους 20 εικονοστοιχείων, πλάτους 300 εικονοστοιχείων, αριστερή στοίχιση.

Η γραμμική αντιστοίχιση για τα τέσσερα καταγεγραμμένα παραδείγματα φαίνεται στο σχ. 4.2.

Ρύζι. 4.2. Γραμμές σε μια ιστοσελίδα

ΤΡΑΠΕΖΙΑ

Δημιουργία πινάκων

Ο πίνακας δημιουργείται χρησιμοποιώντας ζευγαρωμένη ετικέτα

… . Αυτή η ετικέτα δημιουργεί έναν πίνακα στο μέρος όπου προστίθεται
σε κώδικα HTML.

Κάθε πίνακας αποτελείται από σειρές και οι σειρές αποτελούνται από κελιά. Οι ακόλουθες ετικέτες χρησιμοποιούνται για το σχηματισμό σειρών και κελιών πίνακα:

... – νέα γραμμή;

... – κελί κεφαλίδας.

... είναι ένα κανονικό κελί πίνακα.

Αυτές οι ετικέτες είναι γραμμένες μέσα στην ετικέτα ζεύγους

… .

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

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

Ρύζι. 5.1. Σελίδα πίνακα

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

Να σημειωθεί ότι στον κώδικα HTML της παραπάνω σελίδας, η ετικέτα

Αυτοκίνητα	Τιμή	Πέρασμα	5000	Γκολφ	6000

περιέχει το χαρακτηριστικό BORDER με την τιμή "1". Αυτό σημαίνει ότι στον πίνακα που φαίνεται στο Σχ. 5.1, το πάχος του εξωτερικού περιγράμματος είναι
1 pixel. Αν γράφεις

… ,

τότε το πάχος του εξωτερικού περιγράμματος θα είναι 6 pixel. Για να μην εμφανίζονται τα περιγράμματα του πίνακα, είναι απαραίτητο να αντιστοιχίσετε μια τιμή ίση με 0 στο χαρακτηριστικό BORDER ή απλά να παραλείψετε αυτό το χαρακτηριστικό.

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

Σπίτι

Παραγγείλετε έναν ιστότοπο και δραστηριοποιηθείτε!

Αυτή η φράση μπορεί να ακουστεί και να δει σε πολλά site, και δεν είναι μάταιο!

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

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

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

Τα κύρια πλεονεκτήματα της HTML είναι:

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

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

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

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

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

Οι δύο πιο συχνά χρησιμοποιούμενες μορφές εικόνας στο Διαδίκτυο είναι το GIF και το JPEG. Αναπτύχθηκε και ονομάστηκε από την ομάδα JPEG (Joint Photographic Experts Group), και χρησιμοποιείται γενικά για την αποθήκευση εικόνων με ομαλές χρωματικές μεταβάσεις, όπως φωτογραφίες.

Σχεδόν όλα τα άλλα στοιχεία γραφικών αποθηκεύονται σε μορφή GIF (Graphics Interchange Format), μια μορφή ανταλλαγής δεδομένων γραφικών. Αυτή τη στιγμή υπάρχει μια άλλη νέα μορφή γραφικών που κερδίζει δημοτικότητα: PNG (Portable Network Graphics). γραφικά δικτύου). Αναμένεται ότι με την πάροδο του χρόνου θα αντικαταστήσει τη μορφή GIF. Ωστόσο, μην βιαστείτε να αποθηκεύσετε ξανά όλα τα αρχεία γραφικών σας σε αυτήν τη μορφή, ενώ εξακολουθεί να μην υποστηρίζεται από όλα τα προγράμματα περιήγησης.

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

#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1/transitional.dtd"> Πρώτες εικόνες e> Αυτό το γραφικό προστέθηκε στην πρώτη μου ιστοσελίδα. p >

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

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

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

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

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

Χαρακτηριστικά εικόνας
Για ετικέτα Παρέχονται χαρακτηριστικά που σας επιτρέπουν να αλλάξετε το μέγεθος της εικόνας. Μερικές από αυτές τις ιδιότητες παρατίθενται παρακάτω.
ύψος- Καθορίζεται σε pixel ή ποσοστά - Καθορίζει το ύψος της εικόνας
πλάτος— Καθορίζεται σε pixel ή ποσοστά — Καθορίζει το πλάτος της εικόνας.

Ρύθμιση ύψους και πλάτους εικόνας
Οι διαστάσεις μιας εικόνας που τοποθετείται σε μια ιστοσελίδα μπορούν να καθοριστούν χρησιμοποιώντας τα χαρακτηριστικά ύψους και πλάτους. 3οι τιμές αυτών των χαρακτηριστικών ορίζονται είτε ως σταθερές ποσότητες pixel ή ως ποσοστό σε σχέση με τις διαστάσεις της σελίδας. Ρίξτε μια ματιά στον παρακάτω κώδικα HTML. Στα πρώτα μεγέθη ετικέτας πρωτότυπη εικόνα, που έχετε ήδη δει στις προηγούμενες εικόνες αυτού του σεμιναρίου, έχουν οριστεί σε 60 pixel κάθετα και 60 pixel οριζόντια. Στη δεύτερη ετικέτα, το πλάτος της ίδιας εικόνας ορίζεται στο 6% του πλάτους της σελίδας και το ύψος στο 10% του ύψους της σελίδας. Το σχήμα δείχνει πώς φαίνονται και οι δύο αυτές εικόνες στο παράθυρο του προγράμματος περιήγησης.

Κατά την εμφάνιση μιας εικόνας στο παράθυρό της, το πρόγραμμα περιήγησης χειρίζεται εξίσου καλά και τις τιμές των pixel και των ποσοστών. Λάβετε υπόψη, ωστόσο, ότι οι υπολογιστές των επισκεπτών της ιστοσελίδας σας ενδέχεται να έχουν ρυθμιστεί σε διαφορετική ανάλυση οθόνης από αυτήν που έχει οριστεί για την οθόνη σας. Τι προκύπτει από αυτό; Για παράδειγμα, η ανάλυση της οθόνης έχει οριστεί σε 800x600. Στο προηγούμενο παράδειγμα, το γραφικό που προστέθηκε στην ιστοσελίδα ορίστηκε σε πλάτος 6% του πλάτους της σελίδας, το οποίο θα ήταν 48 pixel σε αυτήν την ανάλυση. Εάν προβάλετε την ίδια εικόνα σε οθόνη με ανάλυση 1024x800, το καθορισμένο 6% του πλάτους της σελίδας θα αντιστοιχεί ήδη σε πλάτος 61 pixel.

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

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

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

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

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

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

α>

Σε αυτήν την περίπτωση, αφού ο επισκέπτης της ιστοσελίδας περάσει τον δείκτη του ποντικιού πάνω από την εικόνα, το μήνυμα κειμένου "Αυτή είναι η αυτοπροσωπογραφία μου!" θα εμφανιστεί δίπλα στον κέρσορα. Κάνοντας κλικ στην εικόνα θα ανοίξει το έγγραφο DOC2.htm στο οποίο υποδεικνύεται ο υπερσύνδεσμος.

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

α>

Όπως μπορείτε να δείτε, κάνοντας κλικ στην εικόνα thumbnail.jpg θα ανοίξει ένα άλλο αρχείο εικόνας (image.jpg). Συμβολοσειρά κειμένου, που δίνεται ως η τιμή του χαρακτηριστικού alt, λέει στον επισκέπτη πώς να ανοίξει την κύρια εικόνα.

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

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

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

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

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

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

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

Μορφές αρχείων

Δύο μορφές χρησιμοποιούνται ευρέως για γραφικά Ιστού - PNG και JPEG. Η ευελιξία τους, η πολυχρηστικότητα, ο μικρός όγκος τους αρχεία πηγήςμε επαρκή ποιότητα για τον ιστότοπο, τους έχουν εξυπηρετήσει καλά, στην πραγματικότητα, ορίζοντας τους ως το πρότυπο για τις εικόνες Ιστού. Εκτός από αυτά, χρησιμοποιούνται μορφές GIF και SVG σε ιστότοπους.

Μορφή PNG-8

Το PNG-8 (Portable Network Graphics, φορητά γραφικά δικτύου) είναι μια δωρεάν μορφή που δημιουργήθηκε για να αντικαταστήσει το GIF, στο οποίο για πολύ καιρόχρησιμοποιήθηκαν ιδιόκτητοι αλγόριθμοι.

Ιδιαιτερότητες

• Χρησιμοποιεί μια παλέτα 8 bit (256 χρώματα) στην εικόνα, για την οποία έλαβε τον αριθμό οκτώ στο όνομά του. Σε αυτήν την περίπτωση, μπορείτε να επιλέξετε πόσα χρώματα θα αποθηκευτούν στο αρχείο - από 2 έως 256.
• Σε αντίθεση με το GIF, δεν εμφανίζει κινούμενα σχέδια.

Περιοχή εφαρμογής

Μορφή PNG-24

Το PNG-24 είναι μια μορφή παρόμοια με το PNG-8, αλλά χρησιμοποιεί μια χρωματική γκάμα 24-bit. Παρόμοια με το JPEG, διατηρεί τη φωτεινότητα και την απόχρωση των χρωμάτων στις φωτογραφίες. Όπως το GIF και το PNG-8, διατηρεί τις λεπτομέρειες της εικόνας, όπως γραμμικό σχέδιο, λογότυπα ή εικόνες.

Ιδιαιτερότητες

• Χρησιμοποιεί περίπου 16,7 εκατομμύρια χρώματα ανά αρχείο, γι' αυτό και αυτή η μορφή χρησιμοποιείται για έγχρωμες εικόνες.
• Υποστηρίζει διαφάνεια πολλαπλών επιπέδων, αυτό σας επιτρέπει να δημιουργείτε ομαλή μετάβασηαπό τη διαφανή περιοχή της εικόνας στην περιοχή χρώματος.
• Λόγω του γεγονότος ότι ο χρησιμοποιούμενος αλγόριθμος συμπίεσης διατηρεί όλα τα χρώματα και τα pixel στην εικόνα αμετάβλητα, σε σύγκριση με άλλες μορφές, το PNG-24 έχει το μεγαλύτερο τελικό μέγεθος του αρχείου γραφικών.

Περιοχή εφαρμογής

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

Μορφή JPEG

Το JPEG (Joint Photographic Experts Group) είναι μια δημοφιλής μορφή αρχείου εικόνας που χρησιμοποιείται ευρέως για τη δημιουργία ιστοσελίδων και την αποθήκευση φωτογραφιών. Το JPEG υποστηρίζει χρώμα 24-bit και διατηρεί ανέπαφη τη φωτεινότητα και την απόχρωση των χρωμάτων στις φωτογραφίες. Αυτή η μορφήονομάζεται συμπίεση με απώλειες επειδή ο αλγόριθμος JPEG απορρίπτει επιλεκτικά τα δεδομένα. Η μέθοδος συμπίεσης μπορεί να δημιουργήσει παραμόρφωση στην εικόνα, ειδικά εάν περιέχει κείμενο, λεπτές λεπτομέρειες ή αιχμηρές άκρες. Μορφή JPEGδεν υποστηρίζει τη διαφάνεια. Όταν αποθηκεύετε μια φωτογραφία σε αυτήν τη μορφή, τα διαφανή pixel γεμίζουν με το καθορισμένο χρώμα.

Ιδιαιτερότητες

• Ο αριθμός των χρωμάτων στην εικόνα είναι περίπου 16,7 εκατομμύρια, που είναι αρκετά για εξοικονόμηση φωτογραφική ποιότηταεικόνες.
• Το κύριο χαρακτηριστικό της μορφής είναι η "ποιότητα", η οποία σας επιτρέπει να ελέγχετε το τελικό μέγεθος αρχείου. Η ποιότητα μετριέται από το 0 έως το 100, όσο υψηλότερη είναι η τιμή, τόσο καλύτερη είναι η εικόνα, αλλά και το μέγεθος του αρχείου αυξάνεται.
• Υποστηρίζει μια τεχνολογία που ονομάζεται προοδευτική JPEG, στην οποία μια έκδοση χαμηλής ανάλυσης μιας εικόνας εμφανίζεται στη θύρα προβολής πριν φορτωθεί πλήρως η ίδια η εικόνα.

Περιοχή εφαρμογής

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

Μορφή GIF

Το GIF (Graphics Interchange Format) είναι μια μορφή αρχείου γραφικών που χρησιμοποιείται ευρέως για τη δημιουργία κινούμενων εικόνων. Το GIF χρησιμοποιεί χρώμα 8-bit και συμπιέζει αποτελεσματικά τις συμπαγείς έγχρωμες περιοχές ενώ διατηρεί τη λεπτομέρεια της εικόνας.

Ιδιαιτερότητες

• Ο αριθμός των χρωμάτων σε μια εικόνα μπορεί να είναι από 2 έως 256, αλλά μπορεί να είναι οποιοδήποτε χρώμα από την παλέτα 24 bit. Το αρχείο GIF μπορεί να περιέχει διαφανείς περιοχές. Εάν χρησιμοποιείται φόντο εκτός από το λευκό, θα εμφανίζεται μέσα από "τρύπες" στην εικόνα.
• Υποστηρίζει την αλλαγή καρέ-καρέ των εικόνων, γεγονός που καθιστά τη μορφή δημοφιλής για τη δημιουργία απλών κινούμενων εικόνων.
• Χρησιμοποιεί μέθοδο συμπίεσης χωρίς απώλειες

Περιοχή εφαρμογής

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

Μορφή SVG

SVG (Scalable Vector Graphics) - διανυσματική μορφή, στο οποίο η εικόνα δεν αποτελείται από pixel, αλλά από αντικείμενα και καμπύλες. Για το λόγο αυτό, δεν είναι κατάλληλο για ράστερ φωτογραφίες που αποτελούνται από τελείες, αλλά είναι εξαιρετικό για εικονογραφήσεις που περιέχουν διακριτά περιγράμματα.

Ιδιαιτερότητες

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

Περιοχή εφαρμογής

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

Προσθήκη εικόνας

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

"alt="(!LANG:<альтернативный текст>!}">

Απαιτούνται τόσο τα χαρακτηριστικά src όσο και alt.

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

http://example.ru/images/target.png
Εάν η διεύθυνση ξεκινά με ένα πρωτόκολλο (http:// ή https://), τότε είναι απόλυτη διεύθυνση. Η εικόνα θα φορτώνεται πάντα από καθορισμένη διεύθυνσηστο Διαδίκτυο, ακόμα κι αν αποθηκεύσετε την ιστοσελίδα στον τοπικό σας υπολογιστή.

//example.ru/images/target.png
Αυτή είναι η απόλυτη διεύθυνση της εικόνας χωρίς να προσδιορίζεται το πρωτόκολλο. Το πρόγραμμα περιήγησης θα αντικαταστήσει ανεξάρτητα το απαιτούμενο πρωτόκολλο στο οποίο εκτελείται ο ιστότοπος (http:// ή https://). Λάβετε υπόψη ότι αυτοί οι τύποι διευθύνσεων δεν λειτουργούν σε τοπικές ιστοσελίδες, αλλά μόνο στο Διαδίκτυο υπό τον έλεγχο ενός διακομιστή ιστού.

/images/target.png
Εάν υπάρχει κάθετο (/) στην αρχή της διεύθυνσης, σημαίνει ότι ο φάκελος εικόνων βρίσκεται στη ρίζα του ιστότοπου. Ένας φάκελος μπορεί να είναι ένθετος μέσα σε έναν άλλο, επομένως η διαδρομή μπορεί να αυξηθεί. Για παράδειγμα, το /assets/images/target.png σημαίνει ότι ο φάκελος στοιχείων βρίσκεται στη ρίζα του ιστότοπου, περιέχει το φάκελο εικόνων, μέσα στον οποίο βρίσκεται το αρχείο target.png.

../images/target.png
Οι δύο κάθετες προς τα εμπρός (../) υποδεικνύουν ότι ο φάκελος εικόνας είναι ένα επίπεδο υψηλότερα στη δομή του φακέλου από το έγγραφο HTML. Στο σχ. Το σχήμα 1 δείχνει το αρχείο source.html στο οποίο πρέπει να εισαχθεί η εικόνα target.png.

Ρύζι. 1. Τοποθέτηση αρχείου

images/target.png
Το όνομα φακέλου χωρίς τελείες στην αρχή της διεύθυνσης υποδηλώνει ότι το έγγραφο HTML και ο φάκελος με την εικόνα βρίσκονται στο ίδιο επίπεδο (Εικ. 2).

Ρύζι. 2. Τοποθέτηση αρχείου

target.png
Το όνομα ενός αρχείου υποδηλώνει ότι η εικόνα και η ιστοσελίδα βρίσκονται στην ίδια θέση (Εικόνα 3).

Ρύζι. 3. Τοποθέτηση αρχείου

Το Παράδειγμα 1 δείχνει διάφορους τρόπους για να προσθέσετε μια εικόνα σε μια ιστοσελίδα.

Παράδειγμα 1: Προσθήκη εικόνων

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

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

Το χαρακτηριστικό alt πρέπει να περιγράφει το περιεχόμενο της εικόνας και εάν η εικόνα εκτελεί διακοσμητική λειτουργία και δεν έχει νόημα, τότε αφήστε το alt κενό (παράδειγμα 2).

Παράδειγμα 2: Χρήση alt

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

Παράδειγμα 3: Χρήση τίτλου

Η εμφάνιση της συμβουλής εργαλείου εξαρτάται από το συγκεκριμένο πρόγραμμα περιήγησης και δεν μπορεί να αλλάξει. Στο σχ. 2 δείχνει μια συμβουλή εργαλείου στο πρόγραμμα περιήγησης Firefox.

Ρύζι. 2. Τύπος συμβουλής εργαλείου

Αλλαγή μεγέθους εικόνας

Για να αλλάξετε το μέγεθος της εικόνας ενός στοιχείου παρέχονται χαρακτηριστικά πλάτος (πλάτος) και ύψος (ύψος). Ως τιμή χρησιμοποιούνται pixel ή ποσοστά. Το Παράδειγμα 4 δείχνει πώς να προσθέσετε αυτά τα χαρακτηριστικά .

Παράδειγμα 4. Σχεδίαση διαστάσεων

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

• κρατήστε μια θέση για μια φωτογραφία?
• μειώστε το μέγεθος των μεγάλων φωτογραφιών.
• βελτίωση της ποιότητας εικόνας για οθόνες Retina.

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

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

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

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

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

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

Υπάρχουν δυσκολίες με το ύψος σε τέτοιες περιπτώσεις, επειδή το ύψος της εικόνας ως ποσοστό λαμβάνεται υπόψη μόνο όταν το ύψος του γονέα της ορίζεται ρητά. Εάν το ύψος του γονικού στοιχείου δεν έχει καθοριστεί με κανέναν τρόπο, τότε η καταχώρηση όπως height="100%" αγνοείται.