Contoh Bahan Menampilkan Gambar Dan Video Memakai Html
Contoh Materi Menampilkan Gambar dan Video Menggunakan HTML–Berikut akan ditampilkan beberapa pola materi menampilkan image/gambar dan video memakai instruksi HTML. Ada beberapa varian pola yang sanggup dijadikan alternatif untuk menjelaskan cara menuliskan kode-kode HTML untuk menampilkan gambar dan video pada pelajaran pemrograman web dasar. Contoh materi ini dibentuk untuk menambah perbendaharaan pola materi yang ada dalam modul pemrograman web dasar yang aku buat.
Bagi anda yang belum mempunyai panduan mengajar pemrograman web dasar utuk Sekolah Menengah kejuruan kelas 10, anda sanggup mencoba memakai modul pemrograman web dasar yang aku buat yang sudah dilengkapi dengan pendukung mengajar lainnya menyerupai file kode, asset media, slide powerpoint dan manajemen mengajar lainnya.
Menampilkan Gambar Menggunakan HTML
Pada modul pemrograman web dasar yang aku 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 memakai instruksi 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 dipakai 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 dipakai untuk memberi alternatif deskripsi gambar
Contoh Menampilkan Gambar
Untuk pola 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 instruksi HTML nya menyerupai 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 instruksi cara menciptakan tabel sanggup dilihat pada materi contoh instruksi HTML untuk menciptakan 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 menyerupai dibawah ini
Contoh halaman galery gambar pada layout Web
Dibawah ini pola instruksi HTML untuk menciptakan 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 menyerupai layout dibawah ini
Video tutorial
Untuk mempermudah belajar, silahkan melihat video tutorial cara menyisipkan dan menciptakan layout web memakai HTML pada mata pelajaran Pemrograman Web Dasar
Menampilkan Video Menggunakan HTML
Halaman web selain berisi teks, gambar, juga berisi Video.
Untuk menampilkan Video memakai instruksi HTML, instruksi dasarnya menyerupai 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 pola 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 instruksi 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 menyerupai dibawah ini
Penampakannya masih belum ada Video nya ya? Agar Video tampil, maka kita ganti alamat Video1.mp4 hingga dengan vide6,mp4 dengan alamat penyimpanan video pada direktori komputer kita.
Contohnya menyerupai instruksi 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 instruksi HTML diatas menyerupai dibawah ini.
Format Video
Untuk format Video yang didukung tiap browser berbeda-beda, tidak semua browser mendukung format video tertentu. Untuk format MP4 sanggup dijalankan disemua browser (Chrome, Mozilla, Safari, IE, Opera), artinya semua browser mendukung format MP4 tersebut. Untuk format Ogg pada browser IE dan Safari tidak sanggup dijalankan. Untuk format WebM juga sama pada browser IE dan Safari tidak sanggup dijalankan.
Untuk itu, apabila pada dikala pembelajaran menemukan Video yang tidak sanggup dijalankan pada browser, maka lihat terlebih dahulu format videonya. Apakah sudah MP4 adau masih format yang lain yang tidak sanggup dijalankan pada browser yang digunakan.
Agar sanggup dijalankan pada semua browser maka, kita gunakan aplikasi converter.
Ada banyak aplikasi yang sanggup dipakai untuk converter video, salah satunya ialah format factory. Aplikasi ini sangat gampang dipakai untuk pekerjaan konversi fie.
Demikian artikel materi mengajar mata pelajaran pemrograman dasar materi menampilkan gambar dan video memakai HTML ini mudah-mudahan saja bermanfaat. Mohon maaf apabila ada kesalahan dalam penyajian materi atau hal-hal yang lainnya yang tidak tepat.
Sumber https://modulkomputer.com
0 Response to "Contoh Bahan Menampilkan Gambar Dan Video Memakai Html"
Posting Komentar