Sunday 24 December 2017

Latihan 4. Input Gambar pada HTML

HTML 5 Logo

Techno_Main --- Assalamualaikum Wr.Wb , hai teman teman semua kembali lagi dengan admin nih , kali ini tidak terasa pembelajaran yang ke empat nih . Progress kita tentang pembelajaran HTML . Hmmm ... kalian sampai tahap ini sudah menguasai beberapa dasar dalam pemograman HTML nih . Oke kali ini kita akan belajar tentang pemultimediaan HTML yaitu proses penginputan Gambar , Video , dan Audio pada HTML.

Ternyata HTML juga dapat diinputkan gambar , diinputkan Video , maupun diinputkan Audio .
Wahhh gimana ya cara nya ? Penasaran ? Langsung saja yuk kita simak artikel nya tentang

Latihan 4. Input Gambar pada HTML

Bagi teman teman yang belum paham tentang apakah itu HTML ataupun syntax dan aturan dasar dalam penulisan HTML bisa di simak artikel di bawah ini ya .


Oke kita akan memulai dengan bagaimana caranya menginputkan Gambar , Latihan Praktek dan akan ada video tutorialnya. .

Cara menginputkan Gambar pada HTML

Caranya cukup simple namun ada beberapa hal yang perlu di perhatikan apabila kita mau menginputkan gambar pada HTML yang kita buat , antara lain :
  1. Gambar yang akan kita masukan , harus terdapat pada satu lokasi dengan file HTML kita. Apabila tidak terletak pada satu lokasi / satu folder maka akan kesusahan dalam menuliskan syntax nya.
  2. Berikanlah nama pada gambar kita sependek mungkin , semudah mungkin dan kalau bisa mudah diingat . Kenapa ?? Karena penamaan gambar ini juga sangat berpengaruh ke dalam keberhasilan kita dalam memasang gambar pada file HTML kita.
Okee itu lah beberapa syarat yang harus diperhatikan ketika kita hendak menginputkan gambar ke dalam file HTML kita . Langsung saja kita akan memulai praktik kita bersama sama . Oh ya sebelumnya kita perkenalan dulu yuk dengan syntax umum dari menginputkan gambar pada HTML kita.

Syntax nya ada di bawah ini :



Sekarang saya akan menjelaskan satu persatu nih maksud dari gambar di atas . Yang pertama adalah <img src="" alt=""> ini merupakan tag yang sudah menjadi satu kesatuan . Mengapa ? karena biasanya seorang web developer menggunakan ketiga attribute ini untuk menampilkan gambar di web yang akan mereka bangun.

  1. img = Tag yang digunakan untuk memasukan gambar
  2. src = source atau gambar apakah yang mau kita masukan , src disini berisi namafilegambar . ekstensi nya (ekstensi bisa berupa .png , .jpg , .jpeg dll)
  3. alt = adalah teks yang akan dikeluarkan ketika gagal mengeload gambar , biasanya kurangnya koneksi dengan internet atau kesalahan koding menyebabkan gagalnya gambar muncul pada web  kita . Oleh karena itu di berilah alt , supaya user mengetahui itu gambar apa walaupun tidak muncul.alt ini biasanya diisi teks yang mendiskripsikan gambar.

Okee .. langsung saja kita mempraktekan ya , bagaimana cara menginputkan gambar pada HTML

1. Langkah pertama yaitu buat lah file .html atau apabila ingin membuat pada praktek kemarin silahkan.

2. Letakan file html yang telah anda buat tadi pada folder yang sama dengan gambar yang akan kalian masukan



3. Ketikan pada file .html yang telah kalian buat tadi dengan code seperti di bawah ini :


4. Lalu lihat hasilnya di browser kita , dengan menjalankan latihan.html


Maka akan muncul gambar tersebut karena kita telah meletakan gambar tersebut pada tempat yang sama dengan file html kita.

Untuk Video Tutorial nya anda bisa lihat di bawah ini ya :



Bagaimana teman teman sudah paham tentang bagaimana cara menginputkan gambar dengan HTML ? Mudah kan ... nah makanya jangan kapok untuk belajar HTML ya , dan kunjungi terus blog Techno_Main karena disini kalian akan menemukan info info yang terbaru , terupdate dan bermanfaat tentunya .Terimakasih

Bagikan

Jangan lewatkan

Latihan 4. Input Gambar pada HTML
4/ 5
Oleh

Subscribe via email

Suka dengan artikel di atas? Tambahkan email Anda untuk berlangganan.