Cara Memasukkan Gambar di W3.CSS
Tuhan punya rencana dibalik jatuhnya dirimu pada kegagalan. Bangun! Ada hal indah dibalik kegagalanmu itu. Di kesempatan kali ini saya akan berbagi ilmu kembali kepada teman-teman sekalian mengenai bagaimana Cara Memasukkan Gambar di W3.CSS.
Sesuai judul kali ini kita akan membahas Cara Memasukkan Gambar di W3.CSS.
Bagi memasukkan gambar di HTML kita di umumnya telah di banyak yang tahu dengan memakai tag <img src=””>. Nah di W3.CSS pun seperti itu teman-teman. Di W3.CSS pun telah disediakan Class bagi merancang variasi gambar contohnya:
* Rouded : Merancang lengkungan/memperhalus sisi-sisi gambar.
* Circle : Merancang gambar menjadi format bulat/lingkaran.
* Bordered : Merancang garis/border di bagian luar gambar.
* Text : Merancang text pada gambar.
Penampakan nya seperti ini teman-teman:
* Rounded Image
* Circle Image
* Bordered Image
* Text Image
Oke seketika saja, berikut Cara Memasukkan Gambar di W3.CSS.
Pertama-tama-tama, silahkan terlebih dahulu file index.html nya.
Kemudian, isi di bagian <head> link bagi menghubungkan HTML kita dengan library W3.CSS.
<link rel=stylesheet href=http://www.w3schools.com/lib/w3.css>
Setelah itu, isi di bagian <body> tag-tag di bawah.
<body class=w3-container>
<p>w3-round:</p>
<img src=img_lights.jpg class=w3-round alt=Tuhan punya rencana dibalik jatuhnya dirimu pada kegagalan Cara Memasukkan Gambar di W3.CSS style=width:30%>
<p>w3-circle:</p>
<img src=img_fjords.jpg class=w3-circle alt=Tuhan punya rencana dibalik jatuhnya dirimu pada kegagalan Cara Memasukkan Gambar di W3.CSS style=width:50%>
<p>w3-border:</p>
<img src=img_fjords.jpg class=w3-border w3-padding-4 w3-padding-tiny alt=Tuhan punya rencana dibalik jatuhnya dirimu pada kegagalan Cara Memasukkan Gambar di W3.CSS style=width:50%>
<div class=w3-display-container w3-text-white>
<img src=img_lights.jpg alt=Tuhan punya rencana dibalik jatuhnya dirimu pada kegagalan Cara Memasukkan Gambar di W3.CSS style=width:100%>
<div class=w3-display-topleft w3-container><p>Top Left</p></div>
<div class=w3-display-topright w3-container><p>Top Right</p></div>
<div class=w3-display-bottomleft w3-container><p>Bottom Left</p></div>
<div class=w3-display-bottomright w3-container><p>Bottom Right</p></div>
<div class=w3-display-middle w3-large>Middle</div>
</div>
</body>
Bagaimana teman-teman? lumayan gampang bukan?
Sekianlah bagi panduan kali ini mengenai bagaimana Cara Memasukkan Gambar di W3.CSS.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
