Diskon! Diskon! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CARA MEMBUAT TULISAN DI SAMPING GAMBAR HTML

Artikel ini akan menjelaskan cara membuat tulisan di samping gambar menggunakan HTML. Cocok untuk mbelajar HTML fundamental, bagaimana mengatur pengaturan teks dan gambar dalam pengembangan web.

Membuat tulisan di samping gambar merupakan hal yang cukup sering dijumpai dalam sebuah website. Hal ini berguna untuk membuat layout yang lebih menarik dan informatif. Melalui artikel ini, kamu akan dipandu cara membuat tulisan di samping gambar menggunakan HTML.

Tahapan Membuat Tulisan di Samping Gambar HTML

HTML, atau Hyper Text Markup Language, adalah bahasa markup yang digunakan untuk membuat struktur sebuah website. Dengan pembelajaran HTML dasar, kamu akan dapat dengan mudah membuat tulisan di samping gambar.

Langkah 1: Siapkan Gambar

Pertama-tama, kamu perlu menyiapkan gambar yang akan digunakan. Gambar ini bisa berupa file yang sudah ada di komputer kamu atau gambar dari internet.

Untuk menggunakan gambar dari komputer, pastikan kamu mengetahui lokasi file gambar tersebut. Selanjutnya, kamu bisa menuliskan kode HTML berikut:

<img src="lokasi_file_gambar.jpg" alt="deskripsi gambar">

Untuk menggunakan gambar dari internet, kamu perlu memiliki URL gambar tersebut. Kamu bisa menuliskan kode HTML seperti ini:

<img src="url_gambar.jpg" alt="deskripsi gambar">

Langkah 2: Menambahkan Tulisan

Setelah gambar siap, selanjutnya adalah menambahkan tulisan. Tulisan ini ditulis langsung di samping kode gambar. Dengan demikian, kode HTML akan tampak seperti ini:

<img src="lokasi_file_gambar.jpg" alt="deskripsi gambar"> Ini adalah tulisan di samping gambar.

Atau

<img src="url_gambar.jpg" alt="deskripsi gambar"> Ini adalah tulisan di samping gambar.

Langkah 3: Mengatur Posisi Tulisan

Dalam keadaan default, tulisan akan tampil di samping gambar. Namun, kadangkala kamu mungkin ingin mengatur posisi teks ini lebih rinci, misalnya membuat tulisan berada tepat di tengah gambar.

Untuk itu, kamu bisa menggunakan tag <div> untuk merapihkan posisi teks. Contohnya seperti berikut:

<div style="display: flex; align-items: center;">
  <img src="lokasi_file_gambar.jpg" alt="deskripsi gambar">
  <p>Ini adalah tulisan di samping gambar.</p>
</div>

Dengan kode di atas, tulisan akan selalu berada di tengah gambar, baik secara vertikal maupun horizontal.

Sekarang kamu sudah tahu bagaimana membuat tulisan muncul di samping gambar dengan HTML. Kamu bisa bereksperimen dengan berbagai opsi yang ada untuk menciptakan tampilan website yang menarik. Selamat mencoba!


Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding