Hai kawan.
Hari ini saya akan berkongsi cara memasukkan gambar menggunakan kaedah kode HTML melaui editor Sublime Text 3. Biasanya kalau guna platform blogger, kita hanya upload sahaja gambar yang kita nak paparkan pada blog.
Cuma kali ni saya nak ajar macammana proses itu berlaku.
Penggunaan imej merupakan salah satu cara untuk mencantikkan laman web anda dan ianya merupakan elemen terpenting dalam menyediakan laman web.
Imej menggunakan tag <img> .
Berikut adalah syntax mudah untuk menggunakan tag ini :
Hari ini saya akan berkongsi cara memasukkan gambar menggunakan kaedah kode HTML melaui editor Sublime Text 3. Biasanya kalau guna platform blogger, kita hanya upload sahaja gambar yang kita nak paparkan pada blog.
Cuma kali ni saya nak ajar macammana proses itu berlaku.
Penggunaan imej merupakan salah satu cara untuk mencantikkan laman web anda dan ianya merupakan elemen terpenting dalam menyediakan laman web.
Imej menggunakan tag <img> .
Berikut adalah syntax mudah untuk menggunakan tag ini :
<img src="URL IMAGE" alt"SIFAT LIST" style = "width:304px;height:228px"/>
1. Macam biasa Jika anda ingin menulis pada tool web yang bersifat interaktif, anda boleh download perisian Sublime Text 3 di halaman berikut . Sublime Text 3
2. Buat satu folder dalam Mydocument dengan Nama "LatihanHTML".
3. Dalam Folder "LatihanHTML" wujudkan satu folder khas untuk imej dengan nama "Pic". Simpan gambar yang akan dipaparkan pada laman web nanti dalam folder tersebut.
Contohnya saya download Logo JTM dan saya simpan (save) ke dalam folder PIC. Nama logo bergantung pada nama logo yang ditulis . Contoh nama logo JTM yang saya tulis itu adalah "Logojtm.png"
Nama logo : Logojtm.png
Logo ini saya simpan dalam folder PIC seperti berikut :
4. Tulis kod berikut untuk menggunakan tag <img> dalam editor sublime text3 seperti kod dibawah
<html><head><title>Logo JTM</title></head>
<body> <h2>Logo JTM</h2><img src="pic/Logojtm.png" alt"LogoJTM" style = "width:304px;height:228px"/></body></html>
Dalam paparan Sublime Text adalah seperti berikut :
5. klik "latihan-imej.html" dan hasilnya adalah seperti berikut :
Selamat mencuba.
Artikel Sumber :Blog Cikgu Afzan
No comments:
Post a Comment