CARA MEMBUAT TULISAN DI SAMPING GAMBAR HTML

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!