Προσθέστε μια εικόνα με HTML

Συγγραφέας: Christy White
Ημερομηνία Δημιουργίας: 4 Ενδέχεται 2021
Ημερομηνία Ενημέρωσης: 1 Ιούλιος 2024
Anonim
HTML ΣΤΑ ΕΛΛΗΝΙΚΑ - Η πρώτη μου ιστοσελίδα (FRONTEND)
Βίντεο: HTML ΣΤΑ ΕΛΛΗΝΙΚΑ - Η πρώτη μου ιστοσελίδα (FRONTEND)

Περιεχόμενο

Η προσθήκη εικόνων στον ιστότοπό σας ή στο προφίλ κοινωνικού δικτύου είναι ένας εξαιρετικός τρόπος για να ντύσετε την ιστοσελίδα σας. Το HTML (HyperText Markup Language) έχει πολλές λειτουργίες για τη δημιουργία ιστοσελίδων, αλλά ευτυχώς ο κώδικας που χρειάζεστε για να προσθέσετε εικόνες δεν είναι πολύ δύσκολος.

Για να πας

Μέθοδος 1 από 1: Εισαγωγή εικόνων με HTML

  1. Μεταφορτώστε την εικόνα σας σε έναν δωρεάν ιστότοπο φιλοξενίας, όπως το Photobucket ή το TinyPic, που επιτρέπει την εύκολη σύνδεση. Η καυτή σύνδεση επιτρέπει την άμεση σύνδεση μιας εικόνας με τον διακομιστή του ιστότοπου. Ορισμένοι πάροχοι το έχουν απαγορεύσει, επειδή το hot-linking χρησιμοποιεί το εύρος ζώνης τους και καταλαμβάνει χώρο στους διακομιστές τους.
    • Εάν διαθέτετε λογαριασμό επί πληρωμή φιλοξενίας, ανεβάστε τις εικόνες απευθείας στον διακομιστή όπου βρίσκεται ο ιστότοπός σας. Αυτό είναι πάντα πιο αξιόπιστο από έναν δωρεάν ιστότοπο και δεν χρειάζεται καθόλου ακριβό.
  2. Ανοίξτε ένα νέο έγγραφο σε ένα πρόγραμμα επεξεργασίας κειμένου (π.χ., Σημειωματάριο / Σημειωματάριο) ή ανοίξτε τη σελίδα στον ιστότοπο / προφίλ σας όπου μπορείτε να αλλάξετε τον κώδικα HTML απευθείας.
  3. Ξεκινήστε με το π.χ. ετικέτα. ο π.χ. η ετικέτα είναι άδεια, που σημαίνει ότι δεν απαιτείται ετικέτα κλεισίματος. Ωστόσο, για επικύρωση XHTML μπορείτε ακόμα να βάλετε ένα κενό διάστημα και κάθετο μπροστά του μεγαλύτερος από σημάδι.
    • img />
  4. Υπάρχουν πολλά διαθέσιμα χαρακτηριστικά, αλλά μόνο ένα είναι απαραίτητο:src. Αυτή είναι η τοποθεσία / διεύθυνση ή επίσης η διεύθυνση URL της εικόνας σας.
    • img src = "URL εικόνας" />
  5. Στη συνέχεια πρέπει να alt προσθήκη χαρακτηριστικού. Αυτό δείχνει ένα εναλλακτικό κείμενο, σε περίπτωση που η εικόνα δεν φορτωθεί. Αυτή είναι επίσης μια υπηρεσία για άτομα με προβλήματα όρασης που χρησιμοποιούν αναγνώστες οθόνης.
    • Εάν τοποθετήσετε τον κέρσορα πάνω από μια εικόνα, αυτό το κείμενο εμφανίζεται επίσης ως συμβουλή εργαλείου, αλλά αυτό συμβαίνει μόνο στον Internet Explorer. Η λύση που λειτουργεί με όλα τα προγράμματα περιήγησης (Firefox et αϊ.) είναι σε αυτό τίτλος χαρακτηριστικό για χρήση εκτός από alt. (Μπορείτε να παραλείψετε το τελευταίο εάν δεν θέλετε η εικόνα να έχει μια συμβουλή εργαλείου.)

Για παράδειγμα:img src = "URL της εικόνας" alt = "Για κάθε περίπτωση" title = "Επεξήγηση εργαλείου" />


  1. Τώρα θα μπορούσατε να υποδείξετε το μέγεθος της εικόνας με το ύψος και πλάτος χαρακτηριστικό και καθορίζοντας τα pixel ή ένα ποσοστό. Σημειώστε ότι η αλλαγή μεγέθους με αυτόν τον τρόπο αλλάζει μόνο το μέγεθος της προβολής και όχι το μέγεθος της ίδιας της εικόνας. Για να μειώσετε το χρόνο φόρτωσης μιας εικόνας, είναι προτιμότερο, ειδικά με μεγάλες εικόνες, να αλλάξετε το μέγεθός τους εκ των προτέρων με λογισμικό επεξεργασίας φωτογραφιών ή με μια διαδικτυακή υπηρεσία όπως το PicResize.com.
    • img src = "URL της εικόνας" alt = "Για κάθε περίπτωση" title = "Tooltip" height = "50%" width = "50%" />
    • img src = "URL της εικόνας" alt = "Για κάθε περίπτωση" title = "Επεξήγηση εργαλείου" ύψος = "25 εικονοστοιχεία" πλάτος = "50 εικονοστοιχεία" />

Συμβουλές

  • Η τιμή για αυτά τα χαρακτηριστικά δίνεται είτε σε pixel, είτε ως ποσοστό, από 1-100%.
  • Η εικόνα μπορεί να τοποθετηθεί οπουδήποτε στην ιστοσελίδα, χρησιμοποιώντας τα διάφορα χαρακτηριστικά μορφοποίησης όπως πάνω, κάτω, μεσαία, δεξιά, αριστερά κ.λπ.
  • Το χαρακτηριστικό hspace χρησιμοποιείται για την εισαγωγή οριζόντιου χώρου στα αριστερά και δεξιά μιας εικόνας, ενώ το χαρακτηριστικό vspace χρησιμοποιείται για να δημιουργηθεί χώρος στο πάνω και κάτω μέρος των εικόνων και άλλων αντικειμένων.
  • Μην επιδοθείτε πάρα πολύ με εικόνες. Αυτό φαίνεται ακατάστατο και αντιεπαγγελματικό.
  • Οι εικόνες GIF είναι κατάλληλες για λογότυπα ή κινούμενα σχέδια, αλλά αυτός ο τύπος αρχείου είναι λιγότερο κατάλληλος για φωτογραφίες και άλλες εικόνες με πολλά χρώματα.
    • Οι εικόνες GIF υποστηρίζουν μόνο χρώμα 8-bit με μέγιστο 256 χρώματα για μια εικόνα. Επομένως, αναμένεται ότι η αναπαραγωγή έγχρωμης εικονογράφησης ή φωτογραφίας 16 ή 24 bit δεν θα είναι τόσο καλή.
    • Οι εικόνες GIF υποστηρίζουν επίσης τη διαφάνεια. Ένα κομμάτι διαφάνειας είναι δυνατό, πράγμα που σημαίνει ότι ένα χρώμα μπορεί να γίνει διαφανές.
    • Η διασύνδεση υποστηρίζεται επίσης από εικόνες GIF που σημαίνει ότι ο επισκέπτης του ιστότοπου θα πάρει μια ιδέα για το πώς θα μοιάζει η εικόνα πριν φορτωθεί πλήρως.
    • Η μορφή GIF υποστηρίζει επίσης κινούμενα σχέδια.
  • Βεβαιωθείτε ότι η διεύθυνση URL αναφέρει τη μορφή αρχείου της εικόνας (.webp .gif κ.λπ.).

Προειδοποιήσεις

  • Μην κάνετε Hotlink!