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

Word για Office 365 Outlook για Office 365 PowerPoint για Office 365 Word για Office 365 για Mac PowerPoint για Office 365 για Mac Word 2019 Outlook 2019 PowerPoint 2019 PowerPoint 2019 για Mac Word 2019 για Mac Word 2019 για Mac Word 2016 PowerPoint 2016 PowerPoint 2016 Outlook201 Σημείο 2013 Word 2010 Outlook 2010 PowerPoint 2010 Word 2007 Outlook 2007 PowerPoint 2007 PowerPoint 2016 για Mac Word 2016 για Mac Λιγότερο

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

Αποθήκευση εικόνας ως ξεχωριστό αρχείο

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

Στο Word και το Outlook, τα παρακάτω βήματα ισχύουν μόνο για φωτογραφίες.

Αυτή η δυνατότητα δεν είναι διαθέσιμη στο Excel.

Κάντε δεξί κλικ στην εικόνα που θέλετε να αποθηκεύσετε ως ξεχωριστό αρχείο εικόνας και επιλέξτε Αποθήκευση ως εικόνα.

Αναφερόμενος τύπος

Στο πεδίο Όνομα αρχείου, πληκτρολογήστε ένα νέο όνομα για το σχέδιο ή απλώς επιβεβαιώστε το προτεινόμενο όνομα αρχείου.

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

Μορφή αρχείου

Περιγραφή

Μορφή JPEG (Μορφή ανταλλαγής αρχείων)
Μορφή PNG (μορφή εικόνας φορητού δικτύου PNG)
	Μορφοποιήστε χωρίς απώλεια ποιότητας κάθε φορά που επεξεργάζεστε και αποθηκεύετε το αρχείο.
Bitmap ανεξάρτητο από τη συσκευή
Windows Metafile	Γραφική μορφή "διάνυσμα" με 16 bit
Ενισχυμένο μετααρχείο των Windows	Γραφική μορφή "διάνυσμα" 32-bit
Μορφή SVG (Scalable Vector Graphic) (Μόνο Office Insiders, έκδοση 1908 ή μεταγενέστερη)	Οι εικόνες μπορούν να τροποποιηθούν χωρίς απώλεια ποιότητας εικόνας. Τα αρχεία υποστηρίζουν συμπίεση δεδομένων χωρίς απώλειες.

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

Αποθηκεύστε ένα σχέδιο ή άλλη εικόνα ως ξεχωριστό αρχείο

Στη λίστα Τύπος αρχείου, επιλέξτε τη μορφή που θέλετε.

Στο πλαίσιο Where, μεταβείτε στο φάκελο όπου θέλετε να αποθηκεύσετε την εικόνα.

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

Μορφή αρχείου

Περιγραφή

Μορφή PNG (Portable Network Graphics Format	Σας επιτρέπει να βελτιώσετε την ποιότητα των γραφικών εικόνων σε ιστότοπους χάρη στη δυνατότητα να κάνετε μέρη της εικόνας διαφανή και να προσαρμόζετε τη φωτεινότητα.
Μορφή JPEG (Joint Graphics Expert Group)	Ταιριάζει καλύτερα για σχέδια με πλούσια χρώματα, όπως σαρωμένες φωτογραφίες.
PDF -αρχείο (Μορφή φορητού εγγράφου)	Μια φορητή μορφή που μπορεί να περιλαμβάνει κείμενο και εικόνες.
GIF -αρχείο (μορφή γραφικών GIF)	Παρέχει υποστήριξη για 256 χρώματα και διατήρηση δεδομένων εικόνας κατά τη συμπίεση του αρχείου.
BMP (Bitmap ανεξάρτητα από τη συσκευή)	Τα σχέδια που δημιουργούνται σε οποιοδήποτε από τα προγράμματα εμφανίζονται στο άλλο πρόγραμμα ακριβώς όπως ήταν στο αρχικό.

Σημείωση: Αυτή η σελίδα έχει μεταφραστεί αυτόματα και ενδέχεται να περιέχει ανακρίβειες και γραμματικά λάθη. Είναι σημαντικό για εμάς ότι αυτό το άρθρο είναι χρήσιμο για εσάς. Ήταν χρήσιμες οι πληροφορίες; Για ευκολία επίσης (στα αγγλικά).

Γεια σας αγαπητοί αναγνώστες του ιστολογίου! Σε αυτό το άρθρο θα μάθετε τα πάντα για το πώς να εισάγετε μια εικόνα σε μια σελίδα 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

Λοιπόν, πώς εισάγετε μια εικόνα σε μια ιστοσελίδα; Μια ενιαία ετικέτα img σάς επιτρέπει να εισάγετε μια εικόνα. Το πρόγραμμα περιήγησης τοποθετεί την εικόνα στη θέση της ιστοσελίδας όπου συναντά την ετικέτα img.

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

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

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

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

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

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

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

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

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

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

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

Το χαρακτηριστικό alt είναι μια εναλλακτική επιλογή

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

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

Και αυτό είναι περίπου αυτό που μοιάζει:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ευτυχώς, είτε χρησιμοποιείτε το Microsoft Office είτε τα Έγγραφα Google, υπάρχει μια εξαιρετική λύση που μπορείτε να χρησιμοποιήσετε για να αποθηκεύσετε οποιαδήποτε εικόνα σε οποιοδήποτε έγγραφο.

Πώς να αποθηκεύσετε εικόνες από τα Έγγραφα Google

Εάν στα Έγγραφα Google, κατά την αποθήκευση μιας εικόνας από ένα έγγραφο, δοκιμάσατε την απλούστερη επιλογή: κάνετε κλικ σε αυτήν και δεν βρήκατε την επιλογή "αποθήκευση εικόνας ως", τότε πρέπει να κάνετε τα εξής:

• Μεταβείτε στο Αρχείο > Λήψη ως > Ιστοσελίδα (HTML)
• Ανοίξτε το αρχείο ZIP που ήταν αποθηκευμένο στον υπολογιστή σας.
• Μέσα σε αυτό το αρχείο ZIP θα βρείτε έναν φάκελο που ονομάζεται "Εικόνες". Περιέχει όλες τις εικόνες που υπήρχαν στο έγγραφό σας.

Πώς να αποθηκεύσετε εικόνες από ένα έγγραφο του Microsoft Word

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

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

Βίντεο: Πώς να αποθηκεύσετε μια εικόνα από ένα έγγραφο του Word

Ας υποθέσουμε ότι αποφασίσατε να εισαγάγετε την παρακάτω εικόνα στον ιστότοπό σας:

Πρώτα πρέπει να αποθηκεύσετε αυτήν την εικόνα στον υπολογιστή σας. Για να το κάνετε αυτό, μετακινήστε τον κέρσορα του ποντικιού πάνω στην εικόνα και κάντε κλικ στο δεξί κουμπί του ποντικιού. Επιλέξτε "Αποθήκευση εικόνας ως..." Καθορίστε μια τοποθεσία για την αποθήκευση της εικόνας (Όπως συνέστησα νωρίτερα - δημιουργήστε έναν ξεχωριστό φάκελο τοποθεσίας στη μονάδα δίσκου C, για παράδειγμα, και αποθηκεύστε όλα τα αρχεία μαθήματος εκεί.)
Αποθηκεύστε την εικόνα στο ίδιο μέρος όπου βρίσκεται η σελίδα που φτιάχνουμε - page.html Αφήστε το όνομα αρχείου εικόνας το ίδιο money-master.jpg
Και πάλι, πρόσεχε! Το όνομα του αρχείου δεν είναι money-master.i pg, όχι money-master.jpq, αλλά money-master.jpg

Για να εισαγάγετε μια εικόνα σε μια σελίδα, χρησιμοποιήστε την ετικέτα . img είναι η αγγλική λέξη im ag e...image, picture. Το όνομα της εικόνας χρησιμοποιείται ως παράμετρος για αυτήν την ετικέτα. Ο υπολογιστής πρέπει να γνωρίζει ποια εικόνα θέλουμε να εισάγουμε

Στην περίπτωσή μας, για να εισαγάγουμε την εικόνα money-master.jpg, εισάγουμε τον παρακάτω κώδικα στον κώδικα της σελίδας, στο σημείο όπου θέλουμε να εισαγάγουμε την εικόνα:

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

Η παράμετρος src καθορίζει το όνομα του αρχείου εικόνας.
src από την αγγλική λέξη s ourc e - πόρος, πηγή

Το Img src= μπορεί να επεκταθεί ως πηγή εικόνας/όνομα αρχείου =

Έτσι, ο κώδικας για τη σελίδα μας θα μοιάζει με αυτό

Σήμερα είναι μια υπέροχη μέρα.

ετικέτες
εισάγεται για να τοποθετηθεί η εικόνα αρκετές γραμμές κάτω από το κείμενο.

Τώρα η σελίδα μας θα μοιάζει με αυτό.

Συνιστάται να υποδεικνύονται οι διαστάσεις του στις παραμέτρους της εικόνας. Για να το κάνετε αυτό, χρησιμοποιήστε τις παραμέτρους πλάτος (πλάτος εικόνας) και ύψος (ύψος εικόνας).

(προσοχή και στο γραπτό. Όχι με, όχι witdh, όχι heihgt)

Εκείνοι. για παράδειγμα όπως αυτό:

Οι διαστάσεις της εικόνας υποδεικνύονται σε pixel.

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

για παράδειγμα όπως αυτό:

alt="Ιστότοπος για να κερδίσετε χρήματα στο Διαδίκτυο" > !}

Αυτό το κείμενο θα είναι επίσης ορατό εάν έχετε απενεργοποιήσει τα γραφικά στο πρόγραμμα περιήγησής σας (για εξοικονόμηση επισκεψιμότητας, για παράδειγμα). Αλλά αυτή η επιλογή δεν λειτουργεί σε όλα τα προγράμματα περιήγησης. Λειτουργεί στον Internet Explorer.

ανάλογο αυτής της εντολής είναι η παράμετρος title=

κάντε αλλαγές στον κώδικα και δείτε τι συμβαίνει.

Έτσι ο κώδικας της σελίδας μας θα είναι ως εξής:

Η πρώτη μου σελίδα στο διαδίκτυο σε μόλις 5 λεπτά

Σήμερα είναι μια υπέροχη μέρα.
Έκανα την πρώτη μου σελίδα στο διαδίκτυο.

Θα είμαι πλούσιος και ελεύθερος άνθρωπος!

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

Εισαγωγή εικόνας (εικόνας) σε σελίδα σε HTML

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

σε HTML και ως εξής:

σε XHTML. Από το παράδειγμα μπορείτε να δείτε ότι για το τελευταίο προστίθεται μια κάθετη (κάθετος) στο τέλος.

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

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

που εμφανίζεται έως ότου η εικόνα δεν έχει φορτωθεί πλήρως ή έχει σπασμένο (ανύπαρκτο) σύνδεσμο.

Τώρα είναι λογικό να μιλήσουμε για όλα τα χαρακτηριστικά που υποστηρίζει η ετικέτα .

Λίστα υφιστάμενων χαρακτηριστικών ετικέτας σε HTML

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

src – περιέχει έναν σύνδεσμο προς την εικόνα, μπορεί να είναι είτε απόλυτος (σύνδεσμος σε αρχείο που βρίσκεται σε άλλο ιστότοπο) είτε σχετικός (σύνδεσμος σε αρχείο που βρίσκεται στον ιστότοπό σας). Αποδεκτές μορφές: JPEG (JPG), PNG, GIF, BMP, ICO, APNG, SVGΚαι . Παράδειγμα χρήσης με απόλυτη διεύθυνση εικόνας:

Παράδειγμα χρήσης με σχετική διεύθυνση εικόνας:

alt – περιέχει κείμενο – μια υπόδειξη για μια εικόνα που δεν εμφανίζεται/απούσα. Παράδειγμα χρήσης:

align – ορίζει τη στοίχιση της εικόνας σε σχέση με το διπλανό κείμενο (δημιουργώντας αναδίπλωση κειμένου γύρω από την εικόνα). Έγκυρες τιμές: μπλουζα, κάτω μέρος, Μέσης, αριστεράΚαι σωστά. Παράδειγμα χρήσης:

περίγραμμα – ορίζει το πλάτος του περιγράμματος (πλαίσιο) γύρω από την εικόνα. Έγκυρες τιμές: px, %

Το χαρακτηριστικό δεν υποστηρίζεται σε HTML5.

ύψος – ορίζει το ύψος της εικόνας. Έγκυρες τιμές: px, % και άλλες ποσότητες. Παράδειγμα χρήσης:

πλάτος – ορίζει το πλάτος της εικόνας. Έγκυρες τιμές: px, % και άλλες ποσότητες. Παράδειγμα χρήσης:

hspace – ορίζει την οριζόντια (αριστερά και δεξιά) εσοχή της εικόνας. Έγκυρες τιμές: px, % και άλλες ποσότητες. Παράδειγμα χρήσης:

Το χαρακτηριστικό δεν υποστηρίζεται σε HTML5.

vspace – ορίζει τον κατακόρυφο (πάνω και κάτω) χώρο της εικόνας. Έγκυρες τιμές: px, % και άλλες ποσότητες. Παράδειγμα χρήσης:

Το χαρακτηριστικό δεν υποστηρίζεται σε HTML5.

longdesc – περιέχει τη διεύθυνση στην εκτεταμένη περιγραφή της εικόνας. Έγκυρες τιμές: αρχείο TXT. Η διεύθυνση, όπως και το χαρακτηριστικό src, μπορεί να είναι απόλυτη ή σχετική. Παράδειγμα χρήσης:

crossorigin – ένα χαρακτηριστικό που σας επιτρέπει να εισαγάγετε μια εικόνα από άλλο ιστότοπο μέσω αιτήματος μεταξύ τομέων (CORS). Έγκυρες τιμές: Ανώνυμος(ανώνυμο αίτημα χωρίς διέλευση διαπιστευτηρίων) και χρήση-διαπιστευτήρια(αίτημα με μεταφορά διαπιστευτηρίων). Παράδειγμα χρήσης:

Το χαρακτηριστικό υποστηρίζεται μόνο σε HTML5.

srcset – καθορίζει μια λίστα αρχείων που θα εμφανίζονται ανάλογα με το πλάτος ή την πυκνότητα της οθόνης. Έγκυρες τιμές: Nw(όπου N είναι οποιοσδήποτε θετικός ακέραιος αριθμός) και Κχ(όπου Κ είναι θετικός δεκαδικός αριθμός). Παράδειγμα χρήσης:

Το χαρακτηριστικό δεν υποστηρίζεται σε προγράμματα περιήγησης Android και Internet Explorer.

μεγέθη – ορίζει το μέγεθος για τις εικόνες που καθορίζονται στο χαρακτηριστικό srcset. Έγκυρες τιμές: Nex, Nrem, Nem, Nvmin, Nch, Nvh, Nvw, Nvmax, Nin, Αρ, Nmm, Npc, Ncm, NptΚαι Npx, όπου Ν είναι θετικός αριθμός. Παράδειγμα χρήσης:

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

Το χαρακτηριστικό, όπως το srcset, δεν υποστηρίζεται σε προγράμματα περιήγησης Android και Internet Explorer.

usemap – συσχετίζει μια εικόνα με έναν χάρτη, ο οποίος καθορίζεται χρησιμοποιώντας την ετικέτα. Έγκυρες τιμές: #όνομα(όπου όνομα είναι η τιμή του χαρακτηριστικού ονόματος της κάρτας) και #ταυτότητα(όπου id είναι η τιμή του χαρακτηριστικού ταυτότητας κάρτας). Παράδειγμα χρήσης:

Δεν είναι δυνατή η δημιουργία συνδέσμου εάν η map() είναι τυλιγμένη σε έναν σύνδεσμο( ) ή το κουμπί ().

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

σε HTML και ως εξής:

Επιπλέον, υποστηρίζει καθολικά χαρακτηριστικά τάξηΚαι ταυτότητα, καθώς και απευθείας ενσωμάτωση στυλ:

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

Πώς να εισαγάγετε μια εικόνα (εικόνα) σε έναν πίνακα;

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

Το λογότυπό μας:

Είναι απλό.

Πώς να κάνετε μια εικόνα (εικόνα) σύνδεσμο σε HTML;

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

Έχετε ακόμα ερωτήσεις; Μη διστάσετε να τους ρωτήσετε στα σχόλια κάτω από αυτό το άρθρο.