Contoh Materi Menampilkan Gambar dan Video Menggunakan HTML

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.

KODE HTML UNTUK GAMBAR DAN VIDEO

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 layout HTML membuat galerry

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
Menampilkan Gambar dengan HTML materi pemrograman web dasar HTML

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
MENAMPILKAN VIDEO MENGGUNAKAN KODE HTML

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.
CONTOH LAYOUT WEB VIDEO GALERY DENGAN HTML

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.

Leave a Reply

Your email address will not be published. Required fields are marked *