Praktikum 13 : Array Pada Javascript

Assalamu'alaikum warrahmatullahi wabarakatuh.

Bertemu lagi di postingan selanjutnya, kali ini akan membahas tentang penggunaan array pada javascript.

Variabel-variabel di JavaScript hanya bisa menyimpan satu data pada suatu saat. Adanya kecenderungan yang besar untuk memanipulasi sejumlah data dalam satu variabel membuat konsep variabel tersebut menjadi tidak cukup.

Sebagai solusinya, JavaScript menghadirkan struktur data yang memungkinkan menyimpan himpunan/kelompok data dalam satu variabel khusus yang disebut Array.

Array, adalah satu variabel yang dapat berisi banyak data yang independent. Data yang disimpan
diberikan indeks tertentu atau menggunakan nomer urut mulai dari 0.

Indeks ini nantinya dapat digunakan untuk mengakses data yang disimpan dalam array tersebut.

Jenis jenis array

• Array Monodimensi

Array yang hanya berisikan nilai-nilai tunggal disebut sebagai array monodimensi. Indeks ini akan diberikan secara otomatis oleh interpreter javascript, dimulai dari elemen/data pertama dengan indeks 0. Dalam suatu array dengan n elemen, maka elemen ke-n akan mempunyai indeks n-1.

• Array Multidimensi

Jika elemen suatu array berisikan array lainnya, maka array tersebut termasuk array multidimensi.

• Array Asosiatif

Indek dalam array selain ditentukan secara otomatis oleh sistem dan selalu dimulai dari 0, juga dapat dimodifikasi dengan menggunakan kata (string) atau nilai tertentu. Tabel dengan indeks termodifikasi ini kita kenal dengan nama array asosiatif.

Di bawah ini adalah contoh pembuatan dan pengaksesan data pada Array.

See the Pen WNejYbV by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Terdapat 6 data pada array diatas, dan pada output dituliskan untuk menghasilkan data ketiga pada array. Karena array selalu dimulai dari 0, maka data ketiga pada 6 array tersebut adalah sebagaimana diatas.

Ini contoh lainnya.

See the Pen RwbVqrY by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Yang minta dihasilkan adalah data kedua, dengan sistem array maka data kedua adalah data ketiga.

Selanjutnya ada array sebagai objek. Berikut contohnya.

See the Pen mdbmQEQ by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Terdapat data firstName, lastName dan age pada array. Yang ingin dihasilkan adalah data lastName, maka pengkodeannya sebagaimana diatas. Jika ingin menghasilkan data yang lain, tinggal ganti lastName dengan nama data yang lain.

Terakhir, ada pengaksesan data pada array. Berikut contohnya.

See the Pen NWKjEdK by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Sekian untuk postingan kali ini, terimakasih sudah berkunjung.

Wassalamu'alaikum warrahmatullahi wabarakatuh.

Praktikum 12 : Javascript

Assalamu'alaikum warrahmatullahi wabarakatuh.

Ketemu lagi sama saya di materi baru, yaitu tentang Javascript.

Javascript adalah bahasa yang berbentuk kumpulan skrip yang berjalan pada
suatu dokumen HTML. Sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web.
Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan
tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian
perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server
web.

Menggunakan tag <SCRIPT> Kode javascript dalam HTML dituliskan dengan
menggunakan tag <script> dengan format sebagai berikut :

<script language ="javascript"> </script>

Ayo langsung saja ke contoh pertama javascript. Berikut penggunaan alert.

See the Pen rNBmMwQ by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

File javascript sama seperti CSS, bisa dalam bentuk external, contohnya.

<script language="javascript"> alert("Hallo !"); </script>


Ini contoh ubah style dengan javascript.

See the Pen BaBRLJZ by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Selanjutnya ada contoh penggunaan variable pada javascript.

See the Pen pozPELK by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Ini contoh kedua.

See the Pen BaBRLVd by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Ini adalah contoh dari variable dengan tipe data.

See the Pen jONmMeK by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Dan ini adalah quiz dari praktikum kali ini.

See the Pen WNejGmJ by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Sekian untuk postingan kali ini, terimakasih sudah berkunjung.

Wassalamu'alaikum warrahmatullahi wabarakatuh.

Praktikum 11 : Menggunakan CSS di Form

Assalamu'alaikum warrahmatullahi wabarakatuh.

Bertemu lagi di postingan baru, kali ini saya akan membahas tentang penggunaan CSS pada form. Masihkah kalian ingat apa itu CSS? Kalau lupa boleh cek postingan sebelumnya di blog saya ini ya~

Yuk, kita mulai ke yang pertama, menggunakan pengkodean secara external.

See the Pen LYPyZeJ by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Ini adalah contoh kedua.

See the Pen VwZbjQq by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Dan ini adalah contoh ketiga.

See the Pen mdbmExZ by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Ini adalah contoh pengkodean CSS secara external untuk button.

See the Pen RwbVRym by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Dan ini adalah CSS untuk button hover.

See the Pen MWgmeqv by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Ini adalah CSS untuk radio button.

See the Pen yLBbJQX by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Terakhir ada quiz dari praktikum kali ini, berikut yang saya buat.

See the Pen WNejxLo by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Sekian untuk postingan kali ini, terimakasih sudah berkunjung.

Wassalamu'alaikum warrhamatullahi wabarakatuh.

Praktikum 10 : Menggunakan CSS Part 2

Assalamu'alaikum warrahmatullahi wabarakatuh.

Ketemu lagi nih hehe, masih membahas tentang CSS nih. Masih ingat CSS itu apa? Kalau tidak, yuk cek postingan saya sebelumnya <3

Kali ini adalah penggunaan CSS pada image.

<html> <head> <title>CSS Pada Image</title> <style type="text/css"> img.mouse { margin-top: 10px; float: left; clear: both; width: 200px; height: 200px; } img.cat { margin-top: 5px; float: right; clear: both; width: 200px; height: 200px; border: solid; border-color: pink; } img.koa { margin-top: 10px; float: right; clear: both; width: 200px; height: 200px } </style> </head> <body> <img src="D:\PWPB\Praktikum 10\gambar\tikus.jpg" class="mouse"> <img src="D:\PWPB\Praktikum 10\gambar\kucing.jpg" class="cat"> <img src="D:\PWPB\Praktikum 10\gambar\koala.jpg" class="koa"> </body> </html>

Berikut adalah contoh CSS external nya.

See the Pen eYOdPeG by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Selanjutnya ada CSS inline untuk background image.

<html> <head> <title>Inline CSS untuk Bg Image</title> </head> <body style="background-image: url(gambar/pikachu.gif)"> <h1> Hello World</h1> <p align="center" style="color: Green; font-family: Impact; font-size: 24px; background-color: Yellow;"> Hello World, ini adalah contoh penggunaan inline! </p> </body> </html>

Dan ada contoh CSS embedded untuk background image.

<html> <head> <title>Background Image Goes Wrong</title> <style type="text/css"> #utama { font-family: Impact; font-size: 30pt; color: bisque; text-shadow: 2 2 2 red; background-image: url(gambar/pikachu.gif); height: 600px; width: 800px; } </style> </head> <body> <div id="utama"> sebenarnya, background gambar ini width dan height nya 300px X 200px tapi karena pada css tertulis 800px dan 600px, maka terjadilah tampilan seperti ini. </div> </body> </html>

Berikut contoh lain dari CSS embedded untuk background image.

<html> <head> <title>CSS Image Placement</title> <style type="text/css"> #headline1 { background-image: url(gambar/pikachu.gif); background-repeat: repeat-x; background-position: left top; padding-top: 68px; margin-bottom: 50px; } #headline2 { background-image: url(gambar/kuchenk.gif); background-repeat: no-repeat; background-position: right top; padding-top: 68px; } </style> </head> <body> <div id="headline1"> CSS (versi sekarang adalah CSS3) banyak dilibatkan dalam dokumen Web. Kegunaannya adalah untuk memformat dokumen. Sebagai contoh, warna teks atau bahkan warna latar belakang bisa diatur melalui CSS. </div> <div id="headline2"> Namun, tentu saja kegunaan CSS jauh lebih banyak daripada hanya dilibatkan dalam dokumen Web. Kegunaannya adalah untuk memformat dokumen. Sebagai contoh, warna teks atau bahkan warna latar belakang bisa diatur melalui CSS. </div> </body> </html>

Contoh dari CSS embedded video dan video dari YouTube.

<html> <head> <title>Testing Video</title> </head> <body> <h1 style="color: OrangeRed; text-align: center; font-family: Consolas;"> Ini videoku</h1> <video controls="controls" style="display: block; margin: 0 auto; width: 400px; height: 400;"> <source src="gambar/wonjin.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </body> </html>

<html> <head> <title>Testing Youtube</title> <style type="text/css"> .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */; padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <div class="videoWrapper"> <!-- Copy & Pasted from YouTube--> <iframe src="https://www.youtube.com/watch?v=gXtHSkW6gpw" width="560" height="349" frameborder="0" allowfullscreen></iframe> </div> </body> </html><

Setelah ini ada penggunaan CSS pada tabel.

Berikut contohnya.

See the Pen zYOKmMa by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Contoh CSS external pada tabel kesatu:

See the Pen oNvzamO by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

CSS external kedua:

See the Pen qBWaJvg by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

CSS external ketiga:

See the Pen MWgjPRr by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Terakhir ada quiz yang diberikan, sebagai berikut.

See the Pen abomQbP by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Sekian.

Wassalamiu'alaikum warrahmatullahi wabarakatuh.

Praktikum 9 : Menambahkan CSS

Assalamu'alaikum warrahmatullahi wabarakatuh

Kembali lagi bertemu dengan saya di postingan terbaru. Kali ini saya akan menjelaskan tentang CSS. Apa sih CSS itu?

CSS adalah singkatan dari Cascading Style Sheet. CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.

Sebetulnya pada praktikum sebelumnya, kita sudah menggunakan CSS, yaitu pengkodean secara inline. Yaitu CSS dalam file html yang sama dan dalam tag masing-masing.

Ada 3 cara pengkodean pada CSS yakni inline, embedded dan external. Embedded berada dalam satu file html yang sama. Dan external berada di file lain dengan format ".css"

Anatomi dari CSS sendiri ada 3, yaitu Selctor, Property dan Value.

Misal,

h2 {

         color: #333;
      }

h2 adalah Selector. color adalah Property dan #333 adalah value.

Berikut contoh dari pengkodean CSS secara inline.

See the Pen MWgjrrw by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Ini adalah contoh dari pengkodean CSS secara embedded yang kesatu:

See the Pen YzKGOmO by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Ini adalah contoh kedua dari pengkodean CSS secara embedded:

See the Pen JjPRmPM by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Ini adalah contoh dari pengkodean CSS secara external, yaitu file CSS terpisah dengan HTML nya.

See the Pen NWKROPW by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Contoh dari CSS embedded untuk heading.

See the Pen pozExJb by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Contoh dari CSS external untuk format spasi pada huruf.

See the Pen qBWaJbY by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Contoh dari CSS external untuk dekorasi teks dan spasi.

See the Pen KKPgGMM by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Contoh dari CSS embedded indent align upper.

See the Pen xxKEyEW by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Selanjutnya ada tugas untuk membuat auto biografi / cerpen atau apapun itu menggunakan CSS sendiri, ini yang saya buat.

See the Pen QWLKZdN by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Sekian postingan dari saya kali ini, sampai bertemu di postingan berikutnya. Terimakasih sudah berkunjung.

Wassalamu'alaikum warrahmatullahi wabarakatuh.

Praktikum 8 : Membuat Form di HTML

Assalamu'alaikum warrahmatullahi wabarakatuh.

Bertemu lagi dengan saya di postingan baru, hihihi.

Kali ini saya membawa materi baru, yaitu tentang form.

Saya akan menjelaskan tentang salah satu entri teks pada HTML, yaitu textArea. TextArea merupakan komponen entri teks yang digunakan untuk memasukan teks yang tersusun lebih dari 1 baris. Untuk menggunakannya textArea disisipkan pada tag form layaknya komponen form lain yang biasa digunakan.

Contoh dasar coding textArea adalah sebagai berikut.

<html> <head> <title>Cek Form</title> </head> <body> <p> Silakan diisi pada teks area yang tersedia</p> <p> <textarea name="papantulis" cols="40" rows="6">

Dan hasilnya adalah sebagai berikut.

Selanjutnya ada pengkodean textArea dengan atribut Cols (kolom) untuk memperbesar ukuran textArea. Berikut codingnya.

<html> <head> <title>textArea dengan Cols</title> </head> <body> <p> Silakan diisi pada teks area yang tersedia</p> <textarea name="rendah" cols="30" rows="5">

Dan berikut ini adalah hasilnya.

Selanjutnya ada pengkodean textArea dengan atribut ReadOnly. Yaitu, text hanya bisa dibaca dan tidak bisa diubah namun bisa disalin. Berikut codingnya.

<html> <head> <title>cek form</title> </head> <body> <textarea name="untukdibaca" cols="40" rows="6" readonly="">Tulisan ini tidak dapat diubah tapi bisa disalin.

Berikut adalah hasilnya.

Berikutnya ada textArea dengan atribut ReadDisabled, text hanya bisa baca, tidak bisa diubah dan tidak bisa disalin. Berikut codingnya.

<html> <head> <title>Text Are Disabled</title> </head> <body> <textarea name="terlarang" cols="40" rows="6" disabled>Tulisan ini tidak dapat disalin maupun diubah.

Lalu, beginilah hasilnya.

Selanjutnya ada coding textField dengan atribut Password. Kalian tau bukan bentuk password yang titik-titik hitam tebal itu? Nah, kita akan membuat itu, begini codingnya.

<html> <head> <title>Penulisan Password</title> </head> <body> <form> Password: <input type="Password" name="pwd" maxlength="6"> </form> </body> </html>

Coba buka di Browser dan hasilnya seperti ini, lalu cobalah ketikkan sesuatu.\

Selanjutnya ada textArea hidden, berikut codingnya.

textAreaHidden 1

<html> <head> <title>Hidden Input File</title> </head> <body> <form> Nama : <input type="textarea" name="fnama"><br> <input type="Hidden" name="negara" value="Indonesia"> <input type="submit" name="Submit"> </form> </body> </html>

textAreaHidden 2

<html> <head> <title>Hidden Input File</title> </head> <body> <form> Nama : <input type="textarea" name="fnama"><br> <input type="textarea" name="negara" value="Indonesia"> <input type="submit" value="Submit"> </form> </body> </html>

Berikut hasilnya.

hidden 1

hidden 2

Lalu ini ada coding untuk menampilkan bagaimana untuk menginput/memasukkan foto/file.

<html> <head> <title>Input File atau Foto</title> </head> <body> <font face="Courier New, Courier, mono">Upload Foto</font> <form> <input type="File" name="pic" accept="image/*"> </form> </body> </html>

Dan begini hasilnya.

Selanjutnya ada untuk menampilkan radio button, berikut codingnya.

<html> <head> <title>Radio Button</title> </head> <body> <p> Tingkat Pendidikan : <form> <input type="radio" name="pendidikan1">SD<br> <input type="radio" name="pendidikan2">SMP<br> <input type="radio" name="pendidikan3">SMA sederajat<br> <input type="radio" name="pendidikan4">D3<br> <input type="radio" name="pendidikan5">S1<br> </form> </p> </body> </html>

Begini hasilnya.

Selanjutnya ada untuk menampilkan check button dan image button. Berikut codingnya.

<html> <head> <title>Cek Kesehatan</title> </head> <body> <p> Penyakit yang diderita :</p> <form> <p> Nama depan : <input type="text" name="fname"></p> <p> Nama belakang : <input type="text" name="lname"></p> <input type="checkbox" name="checkbox1">Darah tinggi<br> <input type="checkbox" name="checkbox2">Asam Urat<br> <input type="checkbox" name="checkbox3">Maag<br> <p> <input type="image" src="D:\PWPB\Praktikum 7-8\gambar\animasi-bergerak-tombol-0538.gif" alt="Submit"></p> </form> </body> </html>

Berikut hasilnya.

Berikutnya ada untuk menampilkan option(pilihan) menggunakan tag select. Berikut codingnya.

<html> <head> <title>Browser Favorit Jurusan</title> </head> <body> <p> Pilih Jurusanmu :</p> <form> <select name="Jurusan"> <option value="informatika">informatika</option> <option value="matematika">matematika</option> </select><br> <input list="Browsers" name="Browser"> <datalist id="Browsers"> <option value="Internet Explorer"></option> <option value="Firefox"></option> </datalist> <input type="submit"> </form> </body> </html>

Berikut hasilnya.

Selanjutnya ada tugas yang diberikan yaitu untuk membuat form pendaftaran sendiri. Berikut coding yang saya buat.

<html> <head> <title>Pendaftaran</title> </head> <body> <table background="D:\PWPB\Praktikum 4\gbrku\1564220654496.jpg" width="500" height="100" border="0" cellspacing="1" cellpadding="5"> <form> <tr align="center"> <td colspan="3"> <center> <font face="Times New Roman" size="5"><b>PENDAFTARAN</b></font></center> </td> </tr> <tr> <td>Nama Pengguna</td> <td>:</td> <td><input type="text" name="fname"></td> </tr> <tr> <td>Sandi</td> <td>:</td> <td><input type="password" name="pwd" maxlength="8"></td> </tr> <tr> <td>Jenis Kelamin</td> <td>:</td> <td> <input type="radio" name="jk">Pria <input type="radio" name="jk">Wanita </td> </tr> <tr> <td>Tanggal lahir</td> <td>:</td> <td> <select name="Tanggal"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> <option>13</option> <option>14</option> <option>15</option> <option>16</option> <option>17</option> <option>18</option> <option>19</option> <option>20</option> <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option> <option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option> <option>31</option> </select> <select name="Bulan"> <option>Januari</option> <option>Februari</option> <option>Maret</option> <option>April</option> <option>Mei</option> <option>Juni</option> <option>Juli</option> <option>Agustus</option> <option>September</option> <option>Oktober</option> <option>November</option> <option>Desember</option> </select> <select name="Tahun"> <option>1997</option> <option>1998</option> <option>1999</option> <option>2000</option> <option>2001</option> <option>2002</option> <option>2003</option> <option>2004</option> <option>2005</option> <option>2006</option> <option>2007</option> <option>2008</option> <option>2009</option> <option>2010</option> </select> </td> </tr> <tr> <td></td> <td></td> <td> <input type="submit" value="Simpan"> <input type="reset" value="Batal"> </td> </tr> </form> </table> </body> </html>

Berikut hasilnya.

Sekian untuk materi form kali ini. Semoga dapat sedikit membantu, terimakasih sudah berkunjung.

Wassalamu'alaikum warrahmatullahi wabarakatuh.

Praktikum 7 : Multimedia Pada HTML

Assalamu'alaikum warrahmatullahi wabarakatuh.

Kali ini kembali lagi bersama saya di postingan tugas yang berikutnya. Kali ini saya akan mencoba menjelaskan dari masing-masing tugas berikut agar siapapun Anda yang berkunjung dapat mencoba codingan ini <3

Materi pertama adalah menyajikan format tampilan audio. Berikut source code  nya.

<html> <head> <title></title> </head> <body> <audio controls=""> <source src="D:\PWPB\Praktikum 7-8\audio video\꿈을 꾼다 (Dream For You).mp3" type="audio/mpeg"> </audio> </body> </html>

Untuk menampilkan audio, menggunakan tag <audio> lalu cari file audio dalam bentuk MP3 yang kalian punya. Lalu copy path dari audio tersebut dan paste di tag <source>. Jangan lupa untuk save terlebih dahulu lalu buka di Browser untuk melihat hasilnya.

Berikut hasil dari source code milik saya.

Coba klik tombol play dan pastikan volume kalian on untuk mengecek apakah audio terputar atau tidak.

Selanjutnya yang kedua adalah menampilkan embed video dan autoplay. Yaitu audio langsung terputar ketika kita membuka di Browser.

Berikut source code nya.

<html> <head> <title>Embed Audio dan Auto Play</title> </head> <body background="D:\PWPB\Praktikum 7-8\gambar\IMG_20190716_163727.jpg"> <center> <embed height="50" width="100" src="D:\PWPB\Praktikum 7-8\audio video\크레파스 - 이뻐이뻐 (Pretty_girl).mp3"></embed> <font color="salmon" face="impact"> <p> Bila anda tidak dapat mendengar suara, maka kemungkinan browser yang anda gunakan tidak support dengan format file audionya.</p> <p> atau bisa juga speaker anda sedang off^^</p> </font> </center> </body> </html>

Gunakan tag <embed> dan atribut <src> untuk menginput file MP3 yang kalian inginkan. Kalian juga bisa menambahkan latar gambar sesuai yang kalian mau^^

Jangan lupa save terlebih dahulu dan coba lihat di Browser untuk melihat hasilnya. Audio harus automatis terputar ketika membuka di Browser, jangan lupa juga untuk memastikan kalian menghidupkan volume nya. Berikut tampilan dari source code milik saya.

Yang ketiga ada menampilkan video. Kalau tadi untuk menampilkan audio maka memakai tag <audio> maka untuk menampilkan video menggunakan tag <video>

Berikut source code nya.

<html> <head> <title>Tampilan Video</title> </head> <body> <video width="320" height="240" controls=""> <source src="D:\Produce X 101\PERFORMANCE\PRODUCE X 101 Crayon - 'Pretty Girl'.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </body> </html>

Untuk mengatur ukuran tampilan video bisa menggunakan atribut width dan height. Untuk video, jenis file nya adalah MP4. Setelah sudah memasukan video yang diinginkan jangan lupa save dan buka di Browser untuk melihat hasilnya.

Berikut hasil dari milik saya.

Coba klik play pada video untuk memastikan video dapat diputar atau tidak.

Selanjutnya masih tentang video, yaitu untuk mengatur thumbnail pada video. Berikut source codenya.

<html> <head> <title>Play Video</title> </head> <body> <video width="320" height="240" controls poster="D:\PWPB\Praktikum 6\gambarku\wonjin.jpg"> <source src="D:\Produce X 101\PERFORMANCE\y2mate.com - eng_sub_produce_x_101_dream_for_you_190719_ep12_8xIdzq0XBqk_720p.mp4" type="video/mp4"> browser anda tidak mendukung format video ini. </video> </body> </html>

Masih sama dengan menggunakan tag <video> untuk mengubah thumbnail, gunakan atribut controls poster pada tag video dan cari gambar yang akan dipakai untuk thumbnail.

Berikut hasil dari milik saya.

Ini adalah tampilan apabila tidak menggunakan thumbnail.

Dan ini adalah tampilan dengan menggunakan thumbnail.

Selanjutnya ada untuk menampilkan flash dalam bentuk file .swf berikut adalah source code nya.

<html> <head> <title>animasi</title> </head> <body> <embed src="D:\PWPB\Praktikum 7-8\Animasi awan.swf" width="800" height="700"></embed> </body> </html>

Untuk tampilan flash menggunakan tag <embed> dan atribut src dan input file swf yang akan kalian tampilkan. Apabila kalian tidak mempunyai file swf, kalian bisa mencari dan mendownload sendiri.

Berikut hasil dari tampilan flash.

Terakhir, ada tugas praktikum untuk membuat satu desain yang dimana terdapat audio dan video nya. Berikut yang saya buat untuk tugas ini.

<html> <head> <title>MyMulmed</title> </head> <body> <form id="form1" name="form1" method="post" action=""> <table width="800" height="600" border="1" align="center"> <tr> <td height="23" align="center" border color="#FFFFFF" bgcolor="CornflowerBlue"> <strong><font size="+5" color="Cornsilk">Crayon Pastel</font></strong> </td> </tr> <tr> <td height="457" align="center" bgcolor="#CCCCCC"> <img src="D:\PWPB\Praktikum 7-8\gambar\IMG_20190716_163727.jpg" width="300"> <p> <font face="Comic Sans MS" color="DarkSlateBlue">Mereka adalah tim bernama Crayon Pastel yang membawakan lagu berjudul 'Pretty Girl' pada Evaluasi Konsep di Produce X 101.Tim ini terdiri dari 6 anggota yaitu Koo Jungmo, Ham Wonjin, Son Dongpyo, Kang Minhee, Song Hyeongjun, dan Lee Jinwoo.Tim ini memiliki Son Dongpyo sebagai <i>center</i>, Ham Wonjin sebagai <i>leader</i>, dan Kang Minhee sebagai <i>main vocal.</i></font></p> <p> <font face="Comic Sans MS" color="DarkSlateBlue">Dibawah ini mari dengarkan lagu yang dibawakan mereka yang berjudul 'Pretty Girl'</font></p> <audio controls=""> <source src="D:\PWPB\Praktikum 7-8\audio video\크레파스 - 이뻐이뻐 (Pretty_girl).mp3" type="audio/mpeg"> </audio> <p> <font face="Comic Sans MS" color="DarkSlateBlue">Ada juga video penampilan mereka di panggung M!Countdown.</font></p> <video width="320" height="240" controls poster="D:\PWPB\Praktikum 7-8\gambar\wonthumb.jpg"> <source src="D:\Produce X 101\PERFORMANCE\[MCOUNTDOWN SPECIAL STAGE] Crayon - 'Pretty Girl'.mp4" type="video/mp4"></video> </td> </tr> <tr> <td height="23" align="center" bgcolor="#CCFF99"> <font face="Comic Sans MS" color="DeepViolet">@hamsterrrwonjin on Twitter</font> </td> </tr> </table> </form> </body> </html>

Di bawah ini merupakan hasilnya.

Sekian untuk postingan kali ini, semoga postingan saya dapat membantu Anda yang membaca ini. Terimakasih sudah berkunjung^^

Wassalamu'alaikum warrahmatullahi wabarakatuh.

Praktikum 6 PWPB

Assalamu'alaikum, bertemu lagi di postingan berikutnya, yaitu tugas praktikum 6.

Top Index

Bottom Index

Left Index

Layout Split

My table index

Sekian postingan kali ini, sampai bertemu di postingan selanjutnya!

Wassalamu'alaikum warrahmatullahi wabarakatuh.

Praktikum 5 PWPB

Assalamu'alaikum, kembali lagi dengan saya disini untuk memposting tugas praktikum ke-5 mata pelajaran PWPB. Kuy ah!

Latihan 12 Tabel 1

Latihan 13 Tabel 2

Latihan 14

Latihan 15

Latihan 16

Latihan 17

Latihan 18

Latihan 19

Latihan 20

Latihan 21

Sekian untuk postingan kali ini!

Wassalamu'alaikum warrahmatullahi wabarakatuh.