Contoh Materi Menampilkan Gambar dan Video Menggunakan HTML–Berikut akan ditampilkan beberapa contoh materi menampilkan image/gambar dan video menggunakan kode HTML. Ada beberapa varian contoh yang bisa dijadikan alternatif untuk menjelaskan cara menuliskan kode-kode HTML untuk menampilkan gambar dan video pada pelajaran pemrograman web dasar. Contoh materi ini dibuat untuk menambah perbendaharaan contoh materi yang ada dalam modul pemrograman web dasar yang saya buat.
Bagi anda yang belum memiliki panduan mengajar pemrograman web dasar utuk SMK kelas 10, anda bisa mencoba menggunakan modul pemrograman web dasar yang saya buat yang sudah dilengkapi dengan pendukung mengajar lainnya seperti file kode, asset media, slide powerpoint dan administrasi mengajar lainnya.
Menampilkan Gambar Menggunakan HTML
Pada modul pemrograman web dasar yang saya buat, materi ini terdapat pada halaman 21 pada pokok bahasan Image dengan sub pokok bahasan format image, tag image, ukuran image, dan attribute image. Dan dalam artikel ini tidak akan dijelaskan secara spesifik tiap sub pokok bahasan tersebut, melainkan hanya akan menampilkan contoh-contoh menampilkan gambar menggunakan kode html. Untuk bahasan spesifik silahkan melihatnya pada modul.
Kode dasar / tag HTML untuk menampilkan Image / Gambar
<html>
<head>
<title>Judul</title>
<body>
<img src="filegambar.png">
</body>
</head>
</html>
Penambahan Atribut Height dan Width
<html>
<head>
<title>Judul</title>
<body>
<img src="filegambar.png" height="400px" width="600px">
</body>
</head>
</html>
Atribut height dan width digunakan untuk mengatur default tinggi dan lebar gambar
Penambahan Atribut Alt
<html> <head> <title>Judul</title> <body> <img alt="deskripsi gambar" src="filegambar.png" height="400px" width="600px"> </body> </head> </html>
Atribut alt digunakan untuk memberi alternatif deskripsi gambar
Contoh Menampilkan Gambar
Untuk contoh kita akan menampilkan gambar yang sudah tersedia pada folder gambar yang telah tersedia pada paket pembeliam modul pemrograman web dasar, dengan nama file gambar koala.png dengan alamat direktori file:///C:/Users/User/Pictures/Gambar/koala.png
Maka kode HTML nya seperti dibawah ini;
<html> <head> <title>Judul</title> <body> <img alt="foto koala" src="file:///C:/Users/User/Pictures/Gambar/koala.png" height="400px" width="600px"> </body> </head> </html>
Contoh Menampilkan Gambar dalam Tabel HTML
Untuk kode cara membuat tabel bisa dilihat pada materi contoh kode HTML untuk membuat tabel
Kode dasar tabel
<html> <head> <title>Galery</title> <body> <table border="1"> <tr> <td width="250px" height="250px">file gambar 1</td> <td width="250px" height="250px">file gambar 2</td> <td width="250px" height="250px">file gambar 3</td> </tr> <tr> <td width="250px" height="250px">file gambar 4</td> <td width="250px" height="250px">file gambar 5</td> <td width="250px" height="250px">file gambar 6</td> </tr> </table> </body> </head> </html>
Misalkan kita masukan gambar pada tiap kolom tabel. FIle gambar terdiri dari Pic1, Pic2, Pic3, Pic4, Pic5, dan Pic6 sesuai jumlah kolom tabel diatas. File gambar disimpan pada direktori C/user/Picture/Contoh Gambar / nama file gambar.
<html> <head> <title>Galery</title> <body> <table border="1"> <!--baris pertama pic1,pic2,pic3--> <tr> <td width="250px" height="250px"><img src="file:///C:/Users/User/Pictures/CONTOH%20GAMBAR/PIC1.png" width="250px" height="250px"></td> <td width="250px" height="250px"><img src="file:///C:/Users/User/Pictures/CONTOH%20GAMBAR/PIC2.jpg" width="250px" height="250px"></td> <td width="250px" height="250px"><img src="file:///C:/Users/User/Pictures/CONTOH%20GAMBAR/PIC3.jpeg" width="250px" height="250px"></td> </tr> <!--baris kedua pic3,pic4,pic5--> <tr> <td width="250px" height="250px"><img src="file:///C:/Users/User/Pictures/CONTOH%20GAMBAR/PIC4.jpg" width="250px" height="250px"></td> <td width="250px" height="250px"><img src="file:///C:/Users/User/Pictures/CONTOH%20GAMBAR/PIC5.jpg" width="250px" height="250px"></td> <td width="250px" height="250px"><img src="file:///C:/Users/User/Pictures/CONTOH%20GAMBAR/PIC6.png" width="250px" height="250px"></td> </tr> </table> </body> </head> </html>
Jika ditampilkan dalam browser, tampilannya seperti dibawah ini
Contoh halaman galery gambar pada layout Web
Dibawah ini contoh kode HTML untuk membuat galery dalam bentuk layout web distro
<html> <head> <title>Layout Web </title> <body> <table border="1" align="center"> <!--slide--> <tr> <td colspan="3" width="750px"><img src="file:///C:/Users/User/Pictures/CONTOH%20GAMBAR/SLIDER.png" width="100%"></td> <!--widget--> <td bgcolor=" #E6E6FA" valign="top" rowspan="4" width="400px"><img src="file:///C:/Users/User/Pictures/CONTOH%20GAMBAR/widget1.png"></td> </tr> <!--menu--> <tr> <td bgcolor=" #E6E6FA" colspan="3" height="40px" width="750px">HOME</td> </tr> <!--body--> <tr> <td width="250px" height="250px"><img src="file:///C:/Users/User/Pictures/CONTOH%20GAMBAR/PIC1.png" width="250px" height="250px"></td> <td width="250px" height="250px"><img src="file:///C:/Users/User/Pictures/CONTOH%20GAMBAR/PIC2.jpg" width="250px" height="250px"></td> <td width="250px" height="250px"><img src="file:///C:/Users/User/Pictures/CONTOH%20GAMBAR/PIC3.jpeg" width="250px" height="250px"></td> </tr> <tr> <td width="250px" height="250px"><img src="file:///C:/Users/User/Pictures/CONTOH%20GAMBAR/PIC4.jpg" width="250px" height="250px"></td> <td width="250px" height="250px"><img src="file:///C:/Users/User/Pictures/CONTOH%20GAMBAR/PIC5.jpg" width="250px" height="250px"></td> <td width="250px" height="250px"><img src="file:///C:/Users/User/Pictures/CONTOH%20GAMBAR/PIC6.png" width="250px" height="250px"></td> </tr> <--!footer--> <tr> <td bgcolor=" #E6E6FA" colspan="4" width="750px" height="90px"></td> </tr> </table> </body> </head> </html>
Tampilannya seperti layout dibawah ini
Video tutorial
Untuk mempermudah belajar, silahkan melihat video tutorial cara menyisipkan dan membuat layout web menggunakan HTML pada mata pelajaran Pemrograman Web Dasar
Menampilkan Video Menggunakan HTML
Halaman web selain berisi teks, gambar, juga berisi Video.
Untuk menampilkan Video menggunakan kode HTML, kode dasarnya seperti dibawah ini:
<html>
<head>
<title>Video</title>
<body>
</body>
<video src="file_video.mp4" controls> </video>
</head>
</html>
Keterangan;
Video: Merupakan elemen video ditampilkan
src: merupakan alamat file video diletakan
Contoh Menampilkan Video Menggunakan HTML
<html> <head> <title>Contoh Tag Video</title> <body> <h1>Contoh Tag Video</h1> <video src="C:\Users\u\Documents\BelajarHTML\VIDEO.mp4" controls> </video> </head> </body> </html>
Pada contoh diatas, file Video diletakan pada direktori Document dengan nama folder Belajar HTML, dengan nama file VIDEO.mp4
Latihan Membuat Galery Video Menggunakan HTML
Dibawah ini kode HTML layout web untuk menampilkan halaman Video Galery
<html> <head> <title>Video Galery</title> <body> <table border="1" align="center"> <!--baris pertama galery video--> <tr> <td width="300px" height="250px"><video width="300px" height="250px" src="video1.mp4" controls></td> <td width="300px" height="250px"><video width="300px" height="250px" src="video2.mp4" controls></td> <td width="300px" height="250px"><video width="300px" height="250px" src="video3.mp4" controls></td> </tr> <!--baris kedua galery video--> <tr> <td width="300px" height="250px"><video width="300px" height="250px" src="video4.mp4" controls></td> <td width="300px" height="250px"><video width="300px" height="250px" src="video5.mp4" controls></td> <td width="300px" height="250px"><video width="300px" height="250px" src="video6.mp4" controls></td> </tr> </table> </body> </head> </html>
Penampilan dalam browsernya seperti dibawah ini
Penampakannya masih belum ada Video nya ya? Agar Video tampil, maka kita ganti alamat Video1.mp4 sampai dengan vide6,mp4 dengan alamat penyimpanan video pada direktori komputer kita.
Contohnya seperti kode HTML dibawah ini:
<html> <head> <title>Video Galery</title> <body> <center><h3>Selamat Datang di Website Kumpulan Video Kreatif</h3></center> <table border="1" align="center"> <tr> <!--video1--> <td width="300px" height="250px"> <video loop="loop" height="250px width="300px" src="file:///D:/MUL/3-BAHAN%20MENGAJAR%202017/KELAS%20X/Belajar%20HTML/VIDEO/mov_bbb.mp4" controls> </td> <!--video2--> <td width="300px" height="250px"> <video loop="loop" height="250px width="300px" src="file:///D:/MUL/3-BAHAN%20MENGAJAR%202017/KELAS%20X/Belajar%20HTML/VIDEO/movie.mp4" controls> </td> <!--video3--> <td width="300px" height="250px"> <video loop="loop" height="250px width="300px" src="file:///D:/MUL/3-BAHAN%20MENGAJAR%202017/KELAS%20X/Belajar%20HTML/VIDEO/mov_bbb.mp4" controls> </td> </tr> <!--video4--> <tr> <td width="300px" height="250px"> <video loop="loop" height="250px width="300px" src="file:///D:/MUL/3-BAHAN%20MENGAJAR%202017/KELAS%20X/Belajar%20HTML/VIDEO/mov_bbb.mp4" controls> </td> <!--video5--> <td width="300px" height="250px"> <video loop="loop" height="250px width="300px" src="file:///D:/MUL/3-BAHAN%20MENGAJAR%202017/KELAS%20X/Belajar%20HTML/VIDEO/movie.mp4" controls> </td> <!--video6--> <td width="300px" height="250px"> <video loop="loop" height="250px width="300px" src="file:///D:/MUL/3-BAHAN%20MENGAJAR%202017/KELAS%20X/Belajar%20HTML/VIDEO/mov_bbb.mp4" controls> </td> </tr> </table> </body> </head> </html>
Penampakan kode HTML diatas seperti dibawah ini.
Format Video
Untuk format Video yang didukung tiap browser berbeda-beda, tidak semua browser mendukung format video tertentu. Untuk format MP4 bisa dijalankan disemua browser (Chrome, Mozilla, Safari, IE, Opera), artinya semua browser mendukung format MP4 tersebut. Untuk format Ogg pada browser IE dan Safari tidak bisa dijalankan. Untuk format WebM juga sama pada browser IE dan Safari tidak bisa dijalankan.
Untuk itu, apabila pada saat pembelajaran menemukan Video yang tidak bisa dijalankan pada browser, maka lihat terlebih dahulu format videonya. Apakah sudah MP4 adau masih format yang lain yang tidak bisa dijalankan pada browser yang digunakan.
Agar bisa dijalankan pada semua browser maka, kita gunakan aplikasi converter.
Ada banyak aplikasi yang bisa digunakan untuk converter video, salah satunya adalah format factory. Aplikasi ini sangat mudah digunakan untuk pekerjaan konversi fie.
Demikian artikel materi mengajar mata pelajaran pemrograman dasar materi menampilkan gambar dan video menggunakan HTML ini mudah-mudahan saja bermanfaat. Mohon maaf apabila ada kesalahan dalam penyajian materi atau hal-hal yang lainnya yang tidak tepat.
Dapatkan Modul Komputer Pilihan Dibawah ini:
- Modul Kursus Komputer Paket Office (Word & Excel) Rp. 270.000;
- Modul TIK/Mulok Komputer Kelas 1,2,3,4,5,6 SD Rp.225.000;
- Modul Paket Office Lengkap Word, Excel, PPoint, (Bonus Buku Digital MS Access) Rp. 375.000;
BONUS:
Tiap paket modul yang anda beli sudah dilengkapi dengan BONUS-BONUS modul komputer menarik lainnya. Dan BONUS administrasi mengajar, administrasi kursus, template sertifikat, dan contoh proposal pendirian lembaga kursus komputer.
CARA PESAN MODUL:
Pesan / Order modul yang anda pesan melalui SMS/WA ke nomor: 0813 1951 3609
Contoh: "Order Modul TIK SD, Bapak Abdul, Jakarta"
ORDER NOW VIA CHAT WHATSAPP (CS 1)
ORDER NOW VIA CHAT WHATSAPP (CS 2)