Menampilkan gambar di html

 

Tutorial cara mengoding di sublime text 3

             Assalamualaikum...Halo guys, jadi hari ini aku akan memberikan tutorial untuk membuat 

codingan gambar di sublime dengan bahasa html, yang pertama" kalian buat folders baru di file kalian

lalu kalian rename folders nya html, lalu kalian masukan folder itu ke sublime, dan lamgsung aja kita

bikin file baru, caranya control/command N lalu kalian save dengan cara control/command S lalu kalian

rename file nya.

gambar.html

sekarang kita mulai aja degan membuat file baru namanya gambar.html terus kalian ketik <ht  maka dia akan muncul seperti ini.

nah setelah itu di title nya kalian tulis Contoh Gambar Di Html

Seperti itu.

Lalu kalian coding seperti ini, dan kalian bikin folder baru yang namanya images  yang berisi foto atau gambar lalu gambar itu.

kalian masukan ke folder yang bernama images atau yang baru kalian buat tadi,

setelah itu aku akan jelaskan di sini :

1.apa fungsi <h1> fungsinya adalah untuk membuat judul.

2.apa fungsi <p> fungsinya untuk membuat paraghraf di situ.

3.bagaimana caranya agar tulisan menjadi abu" itu kalian tinggal pencet control/command garis miring.

4.kenapa kita pake <img> karna untuk memanggil gambar nya.

5.kenapa kita width dan height karna untuk merubah ukuran" gambarnya.

6.dan alt juga utntuk memanggil gambarnya.

Ini hasil runnya.

gambar_link.html

seperti biasa kalian klik control/command N lalu kalian control/command s dengan nama gambar_link.html, lalu kalian klik <ht dan enter

lalu title nya kalian isi dengan seperti ini 

lalu kita koding seperti ini

jadi disini ketika kita mengklik gambarnya maka akan berpindah ke tab baru dan membuka link yang sudah kalian siapkan.

disini kau memakai gambar yang aku masukan ke folder image yang telah kita masukan ke folder html

Hasil Run :

Nah ketika aku klik hasilnya seperti ini:

gambar_area.html

seperti biasa kalian klik control/command N lalu kalian control/command s dengan nama gambar_area.html, lalu kalian klik <ht dan enter.

lalu title nya kalian isi dengan seperti ini :

lalu langsung kita coding aja :

Seperti ini

jadi disini ketika kita mengklik gambar dan menyentuh salah satu icons nya maka akan muncul nama

icons nya dan memuncul kan link icons tersebut.

kurang lebihnya seperti ini.

 

gambar_style.html

seperti biasa kalian klik control/command N lalu kalian control/command s dengan nama gambar_style.html, lalu kalian klik <ht dan enter

lalu title nya kalian isi dengan seperti ini :

lalu langsung kita coding aja :

jadi kenapa disini kita kasih border radius karna untuk mengubah radius gambar

dan width height untuk mengubah ukurannya.

Hasil Run :

Sampai disini saja tutorialnya makasihh:).

maaf simple:)