Assalamualakum...
Kembali lagi ni temen2, kali ini mau berbagi cara menampilkan gambar di html dan Tekstag untuk menampilkan gambar di html adalah sebagai berikut:
<img src="html.png" alt="Gambar HTML">
src berfungsi untuk mengambil gambar dari komputer temen2, file gambar terletak di folder yang sama dengan filehtml
Misal untuk menampilkan gambar di luar folder ditambahin aja cara manggil file gambar contoh
<img src="../html.png" alt="">
Untuk menggambil gambar dari internet cukup masukan url gambar yang di pilih dari internet
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr4t8kz7zbSisubahLi1fheEv5foZSYXCl5kd61dNaUAdBt8cxCDsGt1_BIzj4NbCD9Z_TQmFLPleMu3Kh4BU2ov6noYQ1RRIKfrPnloRrMFFKCyo4AvE-dqsq5XvRZH458WaC1GFOq6c/s400/html.png" alt="">
Untuk kasus di bawah kita akan menampilkan gambar dan teks dipercantik dengan css, langsung saja
Hasil Bila dibuka di webbrowser
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis
Code HTML di taruh di dalam taq <body></body> di HTML
<img src="html.png" alt="" align="left">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis
velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat,
purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan
convallis.
</div>
Code Css nya
img{
margin: 5px 15px 5px 20px;
width: 300px;
}
div, h2{
text-align: justify;
margin: 20px;
}
Mudah Bukan? Silahkan dicoba dan semoga bermanfaat
Tidak ada komentar:
Tulis komentar