.

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

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

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

Χαρακτηριστικό	Περιγραφή, αποδεκτή τιμή
alt	Το χαρακτηριστικό alt προσθέτει εναλλακτικό κείμενο στην εικόνα. Εμφανίζεται στο σημείο όπου εμφανίζεται η εικόνα πριν φορτωθεί ή όταν τα γραφικά είναι απενεργοποιημένα και επίσης εμφανίζεται ως επεξήγηση εργαλείου όταν τοποθετείτε τον κέρσορα του ποντικιού πάνω από την εικόνα. Σύνταξη: alt="(!LANG:περιγραφή εικόνας" . !}
διασταυρούμενης καταγωγής	Το χαρακτηριστικό crossorigin σάς επιτρέπει να φορτώνετε εικόνες από πόρους από άλλο τομέα χρησιμοποιώντας αιτήματα CORS. Οι εικόνες που ανεβαίνουν στον καμβά χρησιμοποιώντας αιτήματα CORS μπορούν να επαναχρησιμοποιηθούν. Επιτρεπόμενες τιμές: ανώνυμη - Το αίτημα πολλαπλής προέλευσης γίνεται χρησιμοποιώντας μια κεφαλίδα HTTP και δεν μεταβιβάζονται διαπιστευτήρια. Εάν ο διακομιστής δεν παρέχει διαπιστευτήρια στον διακομιστή από τον οποίο ζητείται το περιεχόμενο, τότε η εικόνα θα καταστραφεί και η χρήση της θα περιοριστεί. χρήση-διαπιστευτήρια - Το αίτημα διασταυρούμενης προέλευσης γίνεται με τα διαπιστευτήρια που έχουν περάσει. Σύνταξη: crossorigin="anonymous" .
ύψος	Το χαρακτηριστικό height καθορίζει το ύψος της εικόνας σε px. Σύνταξη: height="300" .
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. Σύνταξη: width="500" .

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). Αντιπροσωπεύει ένα μη συμπιεσμένο (πρωτότυπο) 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. Ετικέτα

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

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

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

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

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

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

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

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

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

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

Οι δύο πιο συχνά χρησιμοποιούμενες μορφές εικόνας στο Διαδίκτυο είναι το 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 είναι τόσο σημαντικό (γιατί συνιστάται να το ορίζετε για κάθε ετικέτα , να είστε προσεκτικοί όταν το χρησιμοποιείτε. Βεβαιωθείτε ότι το περιεχόμενο του μηνύματος κειμένου ταιριάζει πάντα με την ίδια την εικόνα, διαφορετικά οι επισκέπτες της σελίδας σας ενδέχεται να παραπλανηθούν. Η ίδια παρατήρηση ισχύει και αντίστροφα: βεβαιωθείτε ότι οι εικόνες αντιστοιχούν στις πληροφορίες κειμένου που παρουσιάζονται στην ιστοσελίδα. Μια φωτογραφία ενός αεροπλάνου θα ήταν κατάλληλη σε μια τοποθεσία αεροπορικών ταξιδιών, αλλά εντελώς περιττή σε μια τοποθεσία άγριας ζωής.

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

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

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

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

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

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

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

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

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 ετικέτα img. Το πρόγραμμα περιήγησης τοποθετεί την εικόνα στη θέση της ιστοσελίδας όπου συναντά την ετικέτα img.

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

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

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

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

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

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

Η ετικέτα img είναι ένα ενσωματωμένο στοιχείο, επομένως είναι καλύτερο να την τοποθετήσετε μέσα σε ένα στοιχείο μπλοκ, για παράδειγμα, μέσα στην ετικέτα "P" - μια παράγραφο:

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

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

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

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

χαρακτηριστικό alt - ως εναλλακτική λύση

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

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

Και κάπως έτσι φαίνεται:

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

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

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

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

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

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

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

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

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

Γραφικά και κίνηση

Οι απαιτήσεις για την ομορφιά και την εκφραστικότητα του σχεδιασμού των ιστοσελίδων βρίσκονται σε διαρκή σύγκρουση με τις τεχνικές δυνατότητες του σύγχρονου web hosting. Ως εκ τούτου, ο σχεδιαστής του ιστότοπου πρέπει να γίνει ενδιάμεσος μεταξύ του σχεδιαστή και του χρήστη και να διατηρεί αυστηρά μια ισορροπία μεταξύ οπτικής απήχησης και λογικής ταχύτητας παράδοσης πληροφοριών στον Ιστό. Για να επιλύσετε με επιτυχία αυτό το πρόβλημα, πρέπει να γνωρίζετε όλες τις μορφές γραφικών που χρησιμοποιούνται στο Διαδίκτυο, να κατανοήσετε τις διαφορές μεταξύ τους, τους τομείς εφαρμογής και τα μοτίβα χρήσης τους.

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

Το GIF και το JPEG είναι δύο από τις πιο δημοφιλείς μορφές εικόνας και αποτελούν από καιρό τα de facto πρότυπα για χρήση στο WWW. Και τα δύο είναι αρκετά ευέλικτα, αναγνώσιμα από τα περισσότερα προγράμματα περιήγησης και δεν απαιτούν ειδικό λογισμικό (ή πρόσθετα). Το GIF και το JPEG είναι μορφές εικόνας ράστερ, οι οποίες, αντίστοιχα, καθορίζουν μια σταθερή μορφή (ανάλυση) κατά την εμφάνιση τέτοιων εικόνων στην οθόνη. Όταν προσπαθείτε να κάνετε κλίμακα (παρέχεται σε ορισμένα προγράμματα περιήγησης), οι εικόνες bitmap (pixel) χάνουν μεγάλη ποιότητα. Για τη μορφή GIF 8 bit (256 χρωμάτων), επιπλέον, η επιλογή της παλέτας χρωμάτων αποτελεί σοβαρό πρόβλημα.

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

Πολλά διανυσματικά πρότυπα έχουν προταθεί σχετικά πρόσφατα και οι μορφές PGML και VML εξετάζονται επί του παρόντος από την Κοινοπραξία του Παγκόσμιου Ιστού (W3C). Ωστόσο, η Macromedia, η οποία προωθεί τη VML, έχει ανοίξει εδώ και καιρό τη διανυσματική της μορφή Shockwave Flash σε άλλους προγραμματιστές και έχει εφαρμόσει πρόσθετες ενότητες για την προβολή γραφικών σε αυτήν τη μορφή για δημοφιλή προγράμματα περιήγησης.

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

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

GIF - μορφή για σχεδιασμό

Το CompuServe αρχικά προόριζε τη μορφή GIF του για διαδραστικές εφαρμογές στην περιορισμένη χωρητικότητα τυπικών γραφικών σε έναν προσωπικό υπολογιστή. Αρχικά ήταν μια μορφή bitmap 4 bit και αργότερα μια χρωματική αντιστοίχιση 8 bit που υποστήριζε το πολύ 256 χρώματα. Ένα από τα σημαντικά πλεονεκτήματα της μορφής είναι ότι οι εικόνες μπορούν να ευρετηριαστούν σε μια συγκεκριμένη παλέτα (σύνολο χρωμάτων), ενώ οι εικόνες JPEG δεν μπορούν να "συνδεθούν" σε μια παλέτα και η "σωστή" τους εμφάνιση δεν είναι πάντα δυνατή. Αυτή η ιδιότητα είναι ιδιαίτερα σημαντική για εκείνους τους προγραμματιστές που χρησιμοποιούν ευρετηρίαση παλέτας για τη βελτιστοποίηση της απόδοσης εικόνας για όλες τις πλατφόρμες χωρίς εξαίρεση (είτε είναι PC, Mac, Web-TV ή άλλες), ανεξάρτητα από το βάθος χρώματος με το οποίο λειτουργεί αυτό ή εκείνο το σύστημα. Αυτή η ευελιξία μπορεί να επιτευχθεί με μια περιορισμένη παλέτα 216 χρωμάτων, η οποία περιλαμβάνει όλα τα κοινά χρώματα που χρησιμοποιούνται τόσο στα Windows όσο και, για παράδειγμα, στο MacOS. Ο σχεδιασμός ενός ιστότοπου σε μια καθολική παλέτα εγγυάται μια συνεπή, πολλαπλή πλατφόρμα και ανεξάρτητη από το υλικό εμφάνιση. Επιπλέον, η μορφή GIF χρησιμοποιεί ένα σχήμα συμπίεσης χωρίς απώλειες (με έναν απλό αλγόριθμο κωδικοποίησης επανάληψης: μια ακολουθία byte του ίδιου χρώματος αντικαθίσταται από μια λέξη δύο byte, το ένα από τα οποία περιέχει ένα μοτίβο πλήρωσης και το δεύτερο καθορίζει τον αριθμό επαναλήψεων), επομένως τα γραφικά δεδομένα σε αυτήν τη μορφή δεν χάνουν πληροφορίες κατά τη διαδικασία συμπίεσης και ανάκτησης.

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

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

Το κύριο κριτήριο για την επιλογή της μορφής GIF: εάν σχεδιάσατε μόνοι σας μια εικόνα σε ένα πακέτο γραφικών όπως το Photoshop ή το Painter που έχει μεγάλες περιοχές του ίδιου χρώματος ή έχετε επεξεργαστεί μια υπάρχουσα εικόνα και θέλετε να διατηρήσετε υψηλή αντίθεση (απαραίτητη, για παράδειγμα, κατά την εμφάνιση κειμένου), στη συνέχεια αποθηκεύστε το σε αυτήν τη μορφή (ειδικά για ασπρόμαυρα σχέδια ή σχέδια με φτωχά χρώματα).

Για φωτογραφίες, καρέ βίντεο ή άλλες έγχρωμες εικόνες με ομαλές χρωματικές μεταβάσεις (ντεγκραντέ), χρησιμοποιήστε τη μορφή JPEG.

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

Μεταξύ άλλων, η μορφή GIF παρέχει τη λεγόμενη interlaced εμφάνιση (Interlaced), η οποία βοηθά τους χρήστες με αργά κανάλια στην αρχή της λήψης να αξιολογούν το περιεχόμενο της εικόνας (το εφέ είναι παρόμοιο με το σταδιακό σχέδιο μιας μη ευκρινής εικόνα) και τον χρόνο που απαιτείται για την πλήρη μετάδοσή του, και ως εκ τούτου αποδεχτείτε την απόφαση εάν θα συνεχίσετε να το παίρνετε ή εάν είναι καλύτερο να το αρνηθείτε. Ωστόσο, σε αντίθεση με το προοδευτικό JPEG, το αποτέλεσμα εδώ είναι περισσότερο ψυχολογικό παρά πραγματικό (βλ. εικ.).

Θα πρέπει επίσης να θυμάστε ένα σημαντικό πλεονέκτημα της μορφής GIF, το οποίο σε ορισμένες περιπτώσεις δεν μπορεί να απαλλαγεί ακόμη και με όλες τις αδυναμίες του, είναι η υποστήριξη για διαφάνεια (επέκταση GIF89a), η οποία καθιστά δυνατή την εμφάνιση μιας σιλουέτας με μη ορθογώνια περιγράμματα σε υπάρχον υπόβαθρο. Η διαφάνεια στη μορφή GIF υλοποιείται πρωτόγονα - ένα χρώμα (συνήθως το φόντο) εκχωρείται ως διαφανές. Αυτό το πλεονέκτημα χρησιμοποιείται συχνά κατά τη δημιουργία κουμπιών και εικονιδίων στο σχεδιασμό σελίδων (το JPEG δεν προσφέρει καμία υποστήριξη διαφάνειας).

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

JPEG - μορφή για φωτογραφίες και καρέ βίντεο

Η μορφή JPEG πήρε το όνομά της από τη συντομογραφία της επιτροπής Joint Photographic Experts Group (Joint Committee of Photographic Experts), η οποία δημιούργησε αυτό το πρότυπο στα τέλη της δεκαετίας του '80 και στις αρχές της δεκαετίας του '90. Η μορφή JPEG βασίζεται σε έναν αλγόριθμο συμπίεσης με απώλειες (διακριτός μετασχηματισμός συνημιτόνου), μέσω του οποίου η εικόνα σας χωρίζεται σε περιοχές (συνήθως τετράγωνα 8x8 pixel), εντός των οποίων η κατανομή των χρωμάτων αντικαθίσταται από μια μαθηματική συνάρτηση και μόνο οι συντελεστές αυτή η λειτουργία αποθηκεύεται, επιτρέποντάς σας να επαναφέρετε τη μορφή της. Φυσικά, θα αντιμετωπίσετε κάποια απώλεια ποιότητας (ανάλογα με την πολυπλοκότητα της λειτουργίας που χρησιμοποιείται για την αντικατάσταση της εικόνας) και μετά την αποκατάσταση, δεν θα έχετε πλέον μια πραγματική εικόνα, αλλά το μαθηματικό «υποκατάστατό» της. Ωστόσο, ανάλογα με την ποιότητα του πρωτοτύπου σας και τον βαθμό συμπίεσης, η απώλεια ποιότητας μπορεί να είναι εντελώς αόρατη στον θεατή. Αλλά το κύριο πλεονέκτημα του JPEG έναντι του GIF είναι ότι ενώ το GIF είναι μόνο 8-bit (256 χρώματα), το JPEG είναι 24-bit και μπορεί να εμφανίσει έως και 16,7 εκατομμύρια χρώματα.

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

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

Οι λόγοι συμπίεσης ποικίλλουν ευρέως για τα JPEG ανάλογα με το πρόγραμμα επεξεργασίας εικόνας που χρησιμοποιείται, αλλά οι ιστοσελίδες συνήθως χρησιμοποιούν αναλογίες 10:1 ή 20:1 (που εκφράζονται ως αναλογία όγκου προς την αρχική εικόνα), που συνήθως παρέχουν αποδεκτή ποιότητα. Ωστόσο, είναι δυνατή η συμπίεση της εικόνας σε ακραίες τιμές 100:1 (φυσικά, με σημαντική απώλεια ποιότητας).

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

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

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

PNG - καθολική καινοτομία ράστερ

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

Η μορφή PNG (Portable Network Graphics) είναι μια σχετικά νέα μορφή γραφικών ράστερ που έχει εγκριθεί ως πρότυπο από την κοινοπραξία του W3C και θα πρέπει σταδιακά να αντικαταστήσει και τις δύο «απαρχαιωμένες» μορφές: τόσο GIF όσο και JPEG. Το PNG προσφέρει τόσο χρωματική ευρετηρίαση (έως 256 χρώματα), υποστήριξη χρώματος 24 και 48 bit (True-Color) και εργασία με κανάλι διαφάνειας (άλφα κανάλι), επιπλέον, είναι πολύ πιο αποτελεσματικό από την παραδοσιακή αποθήκευση bitmap μορφές.

Ο αλγόριθμος συμπίεσης για μια έγχρωμη εικόνα ξεπερνά το JPEG σε ποιότητα και με την υποστήριξη μιας περιορισμένης ευρετηριασμένης παλέτας (έως 256 χρώματα), η νέα μορφή εκτελεί συμπίεση χωρίς απώλειες 10-30% καλύτερα από αυτήν που εφαρμόζεται στη μορφή GIF, η οποία το καθιστά βέλτιστο για χρήση σε κάθε περίπτωση. Δυστυχώς, η νέα μορφή δεν σας επιτρέπει να θυσιάσετε την ποιότητα της εικόνας σε αντάλλαγμα για περισσότερα υψηλό βαθμόσυμπίεση, όπως στο Μορφή JPEG.

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

Ωστόσο, παρά όλες τις βελτιώσεις που προσφέρει το PNG, η νέα μορφή θα απογειωθεί μόνο αφού χρησιμοποιηθεί από σχεδιαστές τοποθεσιών Web και κατασκευαστές λογισμικού τόσο για την απόδοση εικόνων στη νέα μορφή όσο και για την προετοιμασία τους για δημοσίευση. Στο μεταξύ, είναι πολύ δύσκολο να βρείτε εικόνες PNG οπουδήποτε στο Διαδίκτυο, παρά την πρόσφατη συμπερίληψη υποστήριξης για αυτήν τη μορφή τόσο στο Netscape Navigator όσο και στον Microsoft Internet Explorer.

Και παρόλο που αυτοί πιο πρόσφατες εκδόσειςκαι υποστηρίζουν PNG, το κάνουν με πολύ περιορισμένο τρόπο. Προς το παρόν, η μόνη λύση για τους χρήστες που θέλουν να δουν ένα πλήρες αρχείο PNG είναι να εγκαταστήσουν οι ίδιοι ένα plug-in (όπως το PNG Live).

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

Διανυσματική αναπαράσταση

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

Έτσι, το πρώτο πλεονέκτημα είναι το σημαντικά μικρότερο μέγεθος των διανυσματικών εικόνων σε σύγκριση με τα bitmaps, επειδή δεν περιγράφεται κάθε pixel της εικόνας, αλλά ολόκληρο το σχήμα (για παράδειγμα, για να ορίσετε έναν κύκλο, πρέπει να μεταφέρετε 3-4 αριθμούς: ακτίνα, κεντρικές συντεταγμένες και, ίσως, τύπος ή πάχος της γραμμής και τα χαρακτηριστικά της). Οι μαθηματικοί τύποι που περιγράφουν τη διανυσματική αναπαράσταση καταλαμβάνουν πολύ λιγότερο χώρο από τα μεμονωμένα εικονοστοιχεία και τις ιδιότητες τους.

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

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

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

Για να καταστεί δυνατή η απρόσκοπτη ενσωμάτωση διανυσματικών γραφικών σε παραδοσιακή μορφή HTML χωρίς πρόσθετο λογισμικό, δύο νέα διανυσματικά πρότυπα εξετάζονται αυτήν τη στιγμή από την Επιτροπή Προτύπων του W3C: PGML (Γλώσσα σήμανσης γραφικών ακριβείας) και VML (Γλώσσα διανυσματικής σήμανσης). Το PGML υποστηρίζεται από τις Adobe Systems, IBM, Netscape και Sun Microsystems, ενώ η VML υποστηρίζεται από τις Microsoft, Hewlett-Packard, Autodesk, Macromedia και Visio. Και τα δύο πρότυπα βασίζονται σε επεκτάσεις της γλώσσας σήμανσης XML, που προωθούνται για χρήση στον Ιστό ως διάδοχος της HTML και προτείνονται από το W3C για μελλοντική χρήση.

Ωστόσο, προς το παρόν, κανένα από τα προγράμματα περιήγησης δεν υποστηρίζει κανένα πρότυπο διανυσματικών γραφικών, αν και τα πρόσθετα είναι ήδη διαθέσιμα. Μεταξύ των πιο δημοφιλών τρόπων εμφάνισης στατικών διανυσματικών εικόνων στον Ιστό σήμερα είναι η μορφή SWF (Shockwave Flash) της Macromedia και η μορφή Xara Flare που εξακολουθεί να υποτιμάται.

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

Κινούμενα σχέδια, διαδραστικότητα και αλληλεπίδραση

Σε γενικές γραμμές, οι εικόνες GIF μπορούν να ταξινομηθούν ως ειδική στοίβα σε ένα αρχείο και η προκύπτουσα «ταινία» (flipbook) μπορεί να αναπαραχθεί δημιουργώντας μια απλή κινούμενη εικόνα bitmap. Τόσο το Netscape όσο και η Microsoft έχουν υποστηρίξει τη μορφή "κινούμενων" GIF από τις τρίτες εκδόσεις των προγραμμάτων περιήγησής τους, επομένως η παρουσία τους στον Ιστό είναι πλέον δύσκολο να αποφευχθεί. Πολυάριθμα animators GIF που σας επιτρέπουν να δημιουργήσετε τέτοιες στοίβες GIF χρησιμοποιούνται ευρέως (τόσο εμπορικά όσο και δημόσια). Ωστόσο, τα κινούμενα GIF μπορούν να οδηγήσουν σε μη διαχειρίσιμα μεγέθη αρχείων, επειδή κάθε "επίπεδο" μιας τέτοιας στοίβας είναι ένα μεμονωμένο GIF, επομένως ένα τυπικό 15 καρέ ανά δευτερόλεπτο για κινούμενα σχέδια υπολογιστήμπορεί να «γεννήσει» έναν αμέτρητο αριθμό kilobyte.

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

Και τώρα ας δούμε άλλες λύσεις για το Web animation και τη διαδραστική αλληλεπίδραση με τον χρήστη, και τον κύριο ρόλο εδώ συνεχίζει να παίζει η Macromedia, η οποία μπήκε στην αγορά εδώ και πολύ καιρό με τα προγράμματα Shockwave και Flash και βελτιώνει συνεχώς τα προϊόντα της, αυξάνοντας την αποτελεσματικότητά τους σύμφωνα με τις ανάγκες των χρηστών και των σχεδιαστών. .

Αρχικά δημιουργήθηκε ως μορφή για το Macromedia Director, το Shockwave είναι μια οικογένεια πρωτοκόλλων που στοχεύουν κυρίως στην παραγωγή διαδραστικού και γραφικού περιεχομένου που δημιουργήθηκε ειδικά για χρήση στο Διαδίκτυο. Και το Shockwave Flash είναι γενικά ένα μοναδικό εργαλείο και ένα από τα περισσότερα καλύτερους τρόπουςγια να δημιουργήσετε ένα κινούμενο σχέδιο και να το δημοσιεύσετε σε μια ιστοσελίδα. Το Shockwave Flash δημιουργεί πολύ μικρά αρχεία (επειδή χρησιμοποιεί μια κατά κύριο λόγο διανυσματική αναπαράσταση) και, σε σύγκριση με άλλες μορφές, είναι η πιο βολική όσον αφορά την προετοιμασία.

Όταν δημοσιεύετε ένα τέτοιο κινούμενο σχέδιο στις σελίδες σας, μην ξεχάσετε να ειδοποιήσετε τον χρήστη σχετικά με αυτό, ώστε να εφοδιαστεί εκ των προτέρων σε μια πρόσθετη ενότητα και να προετοιμαστεί για την κουραστική αναμονή για τη λήψη. Ωστόσο, οι πρόσφατες εκδόσεις τόσο του Netscape Navigator όσο και του Internet Explorerέχουν θεατές για κινούμενα σχέδια Flash ακόμα και στο βασικό πακέτο. Το Netscape επιβεβαίωσε ότι οι μελλοντικές εκδόσεις του Navigator θα έχουν αυτήν την υποστήριξη για Flash, ακόμη και σε επίπεδο κώδικα.

Η τελική απόφαση είναι δική σας

Έτσι, η στάση για την παρουσίαση περιεχομένου Ιστού αλλάζει, εμφανίζονται νέες μορφές δεδομένων και εργαλεία ανάπτυξης που τα υποστηρίζουν. Ωστόσο, οι παλιές μορφές (για την αναπαράσταση γραφικών είναι GIF και JPEG) εξακολουθούν να είναι αρκετά δημοφιλείς. Υποστηρίζονται σχεδόν από όλα τα προγράμματα περιήγησης και οι περισσότεροι προγραμματιστές έχουν μεγάλη εμπειρία στην εργασία τους. Είναι σημαντικό να χρησιμοποιείτε τη σωστή μορφή για τη συγκεκριμένη εφαρμογή σας για να εξασφαλίσετε μια ισορροπία μεταξύ της ποιότητας της εικόνας και του μεγέθους των αρχείων. Για παράδειγμα, μια εικόνα GIF μπορεί να καταλαμβάνει περισσότερο χώρο και να παράγει αποτέλεσμα χαμηλότερης ποιότητας από μια εικόνα JPEG, ενώ μια άλλη θα είναι το αντίθετο.

Ωστόσο, κατά την αναπαράσταση bitmaps, το PNG γίνεται πιο προτιμότερο και αν προχωρήσετε ακόμη περισσότερο και προσπαθήσετε να χρησιμοποιήσετε διανυσματική εικόνα, τότε σήμερα στη διάθεσή σας είναι η μορφή Shockwave Flash από τη Macromedia.

Η μορφή SWF (Shockwave Flash) δεν είναι μια συνήθως χρησιμοποιούμενη, αλλά μια εσωτερική διανυσματική μορφή. Flash προγράμματααπό τη Macromedia (βλ. "Macromedia Flash Tutorials" σε CD-ROM), επομένως, για να αποκτήσετε τη δική σας εικόνα ή κινούμενη εικόνα, θα πρέπει να αγοράσετε το κατάλληλο πακέτο πολυμέσων από τη Macromedia και ο χρήστης θα πρέπει να εγκαταστήσει μια πρόσθετη ενότητα για οπτικοποίηση το αποτέλεσμα. Έτσι, για να τοποθετήσετε απλά ένα διανυσματικό σχέδιο στην ιστοσελίδα σας, πρέπει να ξεπεράσετε ολόκληρη γραμμήενόχληση.

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

ComputerPress 5 "1999