MENGGABUNGKAN GAMBAR DAN TEKS SECARA HORIZONTAL

Oleh
TKJ - Pemrograman Web
Menggabungkan Gambar dan Teks Secara Horizontal

Assalamualaikum Wr. Wb.
Selaat pagi/siang/sore/malam... kali ini saya akan menjelaskan cara menggabungkan gambar dan teks secara horizontal. Kita harus memahami penjelasan tentang materi ini sebelum belajar codingnya.
Berikut penjeasannya:
- Secara horizontal.
  1. Gambar bisa berada dibagian kiri teks/paraghraph
  2. Gambar bisa berada dibagian kanan teks/paraghraph.

Untuk posisi gambar yang dilihat dari arah horizontal ditentukan dengan mengisi nilai LEFT dan RIGHT kedalam ALIGN pada tag <img>.
Dengan mengisi atribut tersebut dengan nilai LEFT maka gambar akan berada  disebelah kiri teks. Sebaliknya, jika di isi RIGHT akan menyebabkan posisi gambar akan berada disebelah kanan teks.

Berikut contoh dari saya coding menggabungkan gambar dan teks secara horizontal.

 <!DOCTYPE HTML>
<html>
<body>
<h1>Menggabungkan gambar dan teks, posisi terhadap teks secara horizontal</h1>
<p><img scr="logosmkn2.jpg" width=150 align=TOP>logo 1 (menggunakan align=LEFT)<br><br>
<p><img scr="logosmkn2.jpg" width=150 align=RIGHT>logo 2 (menggunakan align=RIGHT)<br><br>
</body>
</html>

 Beikut hasil dari coding di atas

Menggabungkan gambar dan teks, posisi terhadap teks secara horizontal

logo 1 (menggunakan align=LEFT)


logo 2 (menggunakan align=RIGHT)









Berikut hasil screenshotnya




Sekian post saya kali ini, terima kasih sudah berkunjung dan semoga bermanfaat.
See you next time...

Komentar

Posting Komentar

Postingan populer dari blog ini

SAMBA SERVER - Installasi, Konfigurasi, dan Pengujian

Oleh
Gambar
Assalamualaikum Wr. Wb... Selamat pagi/siang/sore/malam... Pada post kali ini saya akan membahas bagaimana cara installasi SAMBA SERVER dan bagaimana cara konfigurasi beserta pengujiannya apabila berhasil. Check it out... . . . . A. INSTALLASI SAMBA SERVER Pertama yang harus kalian lakukan tentu saja login ke Debiannya, tapi disini kalian harus login sebagai root . Jika sudah login, selanjutnya untuk install Samba Server ketik apt-get install samba  dan tekan Enter. Ketk Y dan tekan Enter untuk melanjutkan. Masukkan CD atau ISO debian dan tekan Enter untuk melanjutkan installasi samba server. Tunggu hingga proses selesai. B. KONFIGURASI SAMBA SERVER Jika sudah selesai, ketik nano /etc/samba/smb.conf  untuk edit konfigurasi file samba server yang smb.conf Jika sudah masuk ke dalam smb.conf   pergi ke bagian paling bawah dan tambah kan script seperti berikut. Jika sudah selesai, save dengan cara tekan CTRL + X. Lalu tekan Y ....
Baca selengkapnya

STANDAR PENGKABELAN EIA 586

Oleh
Gambar
Assalamualaikum Wr. Wb.... Selamat pagi/siang/sore/malam... Jumpa lagi di Blog saya ONE-X INFORMATION. Pada post kali ini saya akan membahas tentang Standar Pengkabelan EIA 586. Mari langsung saja kita masuk ke pembahasan berikut. Check this out... Standar Pengkabelan EIA 586 UTP       Bagi yang belum tahu kabel UTP ini adalah media transmisi yang terdiri dari 4 pasang kawat. Kabel UTP digunakan dalam berbagai jaringan. Masing-masing dari delapan kabel tembaga individu dalam kabel UTP ditutupi oleh bahan isolasi. Selain itu, kabel di setiap pasangan yang melilit satu sama lain.         Kabel UTP memiliki empat pasang dengan ukuran kawat tembaga 22 atau 24 gauge (gauge merupakan standart pengurkuran kabel). Salah satu faktor yang membedakan kabel UTP dengan kabel lain salah satunya kabel UTP memiliki impedansi 100 ohm. meskipun dahulu kabel UTP dikatakan memiliki kecepatan transfer yang lambat, namun dalam perk...
Baca selengkapnya

LAYOUT HALAMAN WEB LEFT INDEX, LAYOUT INDEX, & ALTERNATING INDEX

Oleh
Assalamualaikum Wr. Wb. Selamat pagi, siang, sore, malam. Pada kali ini saya akan menunjukkan contoh Coding Layout Halaman Web Left Index , Layout Split , dan Alternating Index beserta hasilnya . Berikut codingnya... Left Index. <html> <body> <head> <title>Left Index</title> <form id="form1" name="form1" method="post" action=""> <table width="825" height="447" border="1" cellspacing="1"> <tr> <td width="160" rowspan="4" align="center" valign="top" bgcolor="#993366"><b> <p>Home</p> <p>Profile</p> <p>About Us</p> <p>Blog</p> <p>Contact Us</p></b> </tr> <th width="627" height="100" align="center" bgcolor="#FFFF99"><strong><font color="#CCCCCC" size="+4...
Baca selengkapnya