Dasar-dasar HTML - Menampilkan Gambar

• Mungkin 4, 2024

Setelah Anda memiliki teks situs web diposting dan diformat sesuai dengan keinginan Anda, saatnya untuk membumbui halaman dengan beberapa gambar. Gambar tidak hanya dapat menambah warna dan kehidupan ke halaman Anda, Anda juga dapat menggunakannya untuk menghasilkan efek teks yang akan sulit atau tidak mungkin dilakukan dengan teks dan format biasa. Misalnya, pilihan font Anda biasanya akan terbatas pada sejumlah kecil font yang Anda dapat pastikan diinstal pada komputer pengunjung, karena jika mereka tidak memiliki font yang diinstal mereka tidak dapat melihatnya di situs Anda! Setiap kali Anda memposting teks dalam font yang tidak tersedia, komputer pengunjung akan merendernya dalam font apa pun yang terdekat dengan gaya, yang sering kali dapat merusak kekacauan pada desain situs web Anda.

Di sisi lain, jika Anda menggunakan program pengeditan gambar untuk mengambil teks dalam font mewah dan mempostingnya sebagai GIF atau JPEG di situs Anda, pengunjung mana pun akan melihatnya tepat seperti yang Anda maksudkan - karena sekarang ini adalah gambar teks daripada gambar teks itu sendiri. Ini dapat membebaskan Anda untuk menggunakan font yang fantastis di header Anda dan mengelompokkannya dengan cara yang tidak biasa.

Tag dasar yang digunakan untuk menampilkan gambar adalah sebagai berikut:



Kode di atas akan bekerja dengan sempurna dalam HTML. Jika Anda menggunakan XHTML atau ingin memastikan bahwa situs Anda siap-XHTML, Anda harus menambahkan garis miring untuk menutup tag, karena di XHTML Anda tidak dapat menggunakan tag terbuka:



'Src' adalah kependekan dari source, dan Anda akan menggunakannya untuk menentukan path file ke gambar Anda - dengan kata lain, untuk memberi tahu browser Anda di mana gambar dapat ditemukan di situs Anda. Jika Anda menyimpan gambar dalam folder yang sama dengan halaman web Anda, Anda tidak perlu mencantumkan folder dalam teks 'src' - Anda cukup mengetikkan nama file gambar.

Setelah Anda menentukan sumber gambar Anda, Anda dapat meningkatkan kerangka dasar ini dengan berbagai atribut opsional untuk mendapatkan hasil maksimal dari gambar Anda. Satu atribut yang hampir selalu Anda gunakan adalah atribut 'alt'. Ini memungkinkan Anda menentukan teks apa yang harus ditampilkan oleh browser jika tidak dapat menampilkan gambar Anda karena alasan tertentu. Teks 'alt' disiapkan sebagai berikut:



Set atribut yang berguna lainnya adalah tag 'lebar' dan 'tinggi'. Ini memungkinkan Anda untuk menampilkan gambar pada ukuran yang berbeda dari ukuran gambar yang sebenarnya. Anda dapat menggunakannya untuk mengubah gambar Anda sehingga cocok dengan keseluruhan desain halaman Anda. Namun, umumnya lebih disukai untuk mengubah ukuran gambar aktual menggunakan program pengeditan gambar dan kemudian memposting gambar secara online, karena dua alasan. Pertama, perangkat lunak pengeditan gambar hampir selalu memberi Anda hasil yang lebih baik daripada mengubah ukurannya dengan tangan. Kedua, mengubah tag 'lebar' dan 'tinggi' tidak mengubah ukuran file gambar yang sebenarnya, jadi jika Anda memiliki gambar yang sangat besar yang Anda tampilkan sebagai thumbnail, gambar akan memakan waktu yang sama lama untuk memuat dan akan dikunyah seperti halnya banyak bandwidth seolah-olah Anda telah menampilkannya dalam ukuran penuh

Saat menentukan ukuran gambar, Anda dapat membuat daftar tinggi, lebar atau keduanya. Ukuran ditentukan oleh piksel seperti yang Anda lihat di bawah:



Anda juga dapat 'menyelaraskan' gambar Anda agar dapat bekerja dengan lancar dengan aliran teks Anda. Jika Anda memilih perataan kiri, teks akan mulai di sebelah kanan gambar. Jika Anda memilih perataan kanan, gambar akan ditampilkan di sisi kanan halaman, dan teks Anda akan muncul di sisi kiri gambar dan kemudian pindah ke baris baru.

Perataan gambar diatur sebagai berikut:



Anda juga dapat mengatur perataan ke "atas," "bawah," atau "tengah" untuk membuat gambar sejajar dengan bagian atas atau bawah dari baris teks. Jika Anda tidak menentukan perataan gambar akan default ke "bawah."

Sebagai catatan tambahan, Anda dapat memasukkan atribut gambar Anda (src, sejajarkan, alt, dll.) Dalam urutan apa pun dalam tag gambar. Preferensi pribadi saya adalah untuk mencantumkan atribut 'src' terlebih dahulu, karena itu adalah atribut paling dasar dan harus dimasukkan dalam setiap tag gambar, tetapi Anda dapat menggunakan urutan apa pun yang terasa paling alami bagi Anda.

Petunjuk Video: Tutorial Dasar Html #6 - Cara Memasukkan Gambar Pada HTML (Mungkin 2024).