Tambahkan gambar dengan HTML

Pengarang: Christy White
Tanggal Pembuatan: 4 Boleh 2021
Tanggal Pembaruan: 25 Juni 2024
Anonim
HTML Dasar : Image (9/13)
Video: HTML Dasar : Image (9/13)

Isi

Menambahkan gambar ke situs web atau profil jejaring sosial Anda adalah cara terbaik untuk mendandani laman web Anda. HTML (HyperText Markup Language) memiliki banyak fungsi untuk membuat halaman web, namun untungnya kode yang Anda butuhkan untuk menambahkan gambar tidak terlalu sulit.

Melangkah

Metode 1 dari 1: Memasukkan Gambar dengan HTML

  1. Unggah gambar Anda ke situs web hosting gratis, seperti Photobucket atau TinyPic, yang memungkinkan tautan panas. Hot-linking memungkinkan link langsung dari suatu gambar ke server situs web; beberapa penyedia telah melarang ini karena hot-linking menggunakan bandwidth mereka dan menghabiskan ruang di server mereka.
    • Jika Anda memiliki akun hosting berbayar, unggah gambar langsung ke server tempat situs web Anda ditempatkan. Ini selalu lebih dapat diandalkan daripada situs gratis dan tidak harus mahal sama sekali.
  2. Buka dokumen baru di editor teks (mis., Notepad / Notepad) atau buka halaman di situs web / profil Anda di mana Anda dapat mengubah kode HTML secara langsung.
  3. Mulailah dengan img menandai. Itu img tag kosong, artinya tidak diperlukan tag penutup. Namun, untuk validasi XHTML Anda masih dapat meletakkan spasi dan garis miring di depannya lebih besar dari tanda.
    • img />
  4. Ada banyak atribut yang tersedia, tetapi hanya satu yang diperlukan:src. Itu adalah lokasi / alamat, atau juga URL gambar Anda.
    • img src = "URL gambar" />
  5. Selanjutnya Anda harus alt tambahkan atribut. Ini menunjukkan teks alternatif, jika gambar gagal dimuat. Ini juga merupakan layanan untuk tunanetra yang menggunakan pembaca layar.
    • Jika Anda mengarahkan kursor ke gambar, teks ini juga ditampilkan sebagai keterangan alat, tetapi ini hanya terjadi di Internet Explorer. Solusi yang bekerja dengan semua browser (Firefox dkk.) untuk itu judul atribut untuk digunakan selain alt. (Anda dapat menghilangkan yang terakhir jika Anda tidak ingin gambar memiliki tooltip.)

Sebagai contoh:img src = "URL gambar" alt = "Untuk berjaga-jaga" title = "Tooltip" />


  1. Sekarang Anda bisa menunjukkan ukuran gambar dengan tinggi dan lebar atribut, dan dengan menentukan piksel atau persentase. Perhatikan bahwa mengubah ukuran dengan cara ini hanya mengubah ukuran tampilan, bukan ukuran gambar itu sendiri. Untuk mempersingkat waktu pemuatan gambar, lebih baik, terutama dengan gambar yang besar, terlebih dahulu mengubah ukurannya dengan perangkat lunak pengedit foto atau dengan layanan online seperti PicResize.com.
    • img src = "URL gambar" alt = "Untuk berjaga-jaga" title = "Keterangan alat" height = "50%" width = "50%" />
    • img src = "URL gambar" alt = "Untuk berjaga-jaga" title = "Keterangan alat" height = "25px" width = "50px" />

Tips

  • Nilai untuk atribut ini diberikan dalam piksel, atau sebagai persentase, dari 1-100%.
  • Gambar dapat ditempatkan di mana saja di halaman web, menggunakan berbagai atribut pemformatan seperti atas, bawah, tengah, kanan, kiri, dll.
  • Atribut hspace digunakan untuk menyisipkan spasi horizontal di kiri dan kanan gambar, sedangkan atribut vspace digunakan untuk memberi ruang pada bagian atas dan bawah gambar dan objek lainnya.
  • Jangan terlalu memanjakan diri dengan gambar. Itu terlihat berantakan dan tidak profesional.
  • Gambar GIF boleh digunakan untuk logo atau kartun, tetapi jenis file ini kurang cocok untuk foto dan gambar lain dengan banyak warna.
    • Gambar GIF hanya mendukung warna 8-bit dengan maksimal 256 warna untuk sebuah gambar. Oleh karena itu, diharapkan reproduksi ilustrasi atau foto berwarna 16 atau 24 bit tidak akan sebaik.
    • Gambar GIF juga mendukung transparansi. Sedikit transparansi dimungkinkan, yang berarti satu warna dapat dibuat transparan.
    • Interlacing juga didukung oleh gambar GIF yang berarti pengunjung situs akan mendapatkan gambaran seperti apa gambar itu sebelum dimuat sepenuhnya.
    • Format GIF juga mendukung animasi.
  • Pastikan URL menyatakan format file gambar (.webp .gif dll).

Peringatan

  • Jangan Hotlink!