DASAR PEMROGRAMAN DESAIN WEB

 

HTTP (Hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protocol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (Hypertext Markup Language). Dikatakan markup language karena HTML berfungsi untuk ‘memperindah’ file teks biasa untuk ditampilkan pada program web browser hal ini dilakukan dengan menambahkan elemen atu sering disebut sebagai tag-tag pada file teks biasa tersebut 

Pengertian HTML
HTML (Hyper Text Markup Language) adalah sebuah bahasa formatting yang digunakan untuk membuat sebuah halaman website. Di dalam dunia pemrograman berbasis website(Web Programming), HTML menjadi pondasi dasar pada halaman website. sebuah file HTML di di simpan dengan ekstensi .html (dot html). dan dapat di eksekusi atau diakses menggunakan web browser(Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain). seperti yang sudah di jelaskan, HTML adalah dasar dari sebuah website. untuk membuat sebuah website tidak cukup hanya menggunakan HTML, kita memerlukan bantuan CSS, JavaScript dan PHP untuk membuat sebuah website yang dinamis. jika halaman website dibuat hanya menggunakan HTML.
 
Tag HTML
Tag merupakan kode yang digunakan untuk memperkenalkan pada web browser untuk apa text HTML yang ditulis. HTML membutuhkan cara memperkenalkan text yang ditulis didalamnya kepada web browser. baik text itu berupa list, paragraf, link dan sebagainya.
disinilah di gunakan tag. dalam penulisan tag, hampir semua menggunakan pembuka dan penutup tag, dimana objek yang di maksudkan berada diantara pembuka dan penutup tag. berikut penulisan tag yang digunakan dalam HTML.
Berikut adalah tag HTML dasar : 
 
Element HTML
Element pada HTML merupakan isi atau objek yang berada pada tag. maksudnya, isi yang ada diantara tag pembuka dan tag penutup di sebut dengan elemen misalkan : 

<!DOCTYPE html>
<html>
<head>
<title>Disini Judul Dokumen HTML</title>// Bagian Head
</head>
<body>
Disini Penulisan Informasi Web // Bagian Body
</body>
</html>
 
Heading merupakan element atau tag HTML yang berfungsi untuk menunjukkan bagian penting pada halaman web. element tag heading ini memiliki 6 tingkatan yang berurutan yaitu <h1>,<h2>,<h3>,<h4>,<h5>,<h6> yang bisa digunakan untuk menambah ke struktur halaman web. perbedaan masing-masing heading yaitu besar hingga kecil teks. contohnya tag/element <h1> lebih besar dari element/tag <h2> dan seterusnya.Penggunaan masing-masing heading juga berbeda, berikut penggunaan masing-masing tag/element heading yang sering digunakan pada pengolahan halaman web : <h1> adalah heading yang digunakan untuk penulisan judul utama dari dokumen
<h2> adalah heading yang digunaakan sebagai sub dari <h1>
<h3> adalah heading yang digunakan sebagai sub dari <h2>
untuk penggunaan <h4><h4><h5><h6> tergantung programmer sendiri untuk memperindah
halaman web sesuai keperluan.
berikut contoh penerapan masing-masing element/tag heading 
:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>ini adalah heading 1</h1>
</body>
</html>
 
Link
Link atau biasa disebut dengan anchor (pengait) dapat dibuat dengan menambahkan tag <a>....</a> serta atribut href agar link tersebut dapat menyimpan alamat web yang akan dituju ketika link diklik. Sehingga sintaks link adalah : <a href=’alamat web yang dituju’</a> 
Contoh penulisan Link sbb :
<!DOCTYPE html>
<html>
<head>
<title>Belajar membuat Link HTML</title>
</head>
<body>
<a href="http://smkalfalahkraton.sch.id"><h1>ini adalah Link menuju website SMK AL FALAH KRATON </a>
</body>
</html>

Canvas. Memungkinkan pembuatan gambar dalam kanvas.Jadi, gambar tidak lagi diambil dari gambar utuh, melainkan bisa disusun sendiri, bak menggunakan program Paint.
Header. Berguna untuk menyatakan suatu judul, yang bisa diisi dengan elemen logo dan nama perusahaan
Footer. Merupakan kebalikan dari header. Sebagai catatan kaki, elemen ini berguna untuk menaruh informasi di bagian bawah halaman web.
Time. Elemen ini berguna untuk menyajikan informasi tentang waktu.
Audio. Memungkinkan penyajian player untuk memutar suara.
Video. Memungkinkan player untuk memainkan film

Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar atau susunan file
sebagai berikut :
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Berisi tentang text, gambar,
atau apapun yang
tampil pada dokumen web.
</body>
</html>

Seperti terlihat, struktur file HTML diawali dengan sebuah tag<html> dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag<head>…</head> dan tag <body>…</body>.
Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <tittle>… </tittle> yang berpungsi untuk mengeluarkan judul pada tittle bar window web browser. Bagian kedua, yang diapit ole tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini anada akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin sampaikan pada pengguna nantinya.

Pengaturan Properti Dokumen
Properti document diatur melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakng halaman, wana teks, warna link dan lain-lain.
Kode Warna
Dalam pengaturan warna menggunakan kode RGB yang mana ditampilkan dalam nilai heksadesimal. Setiap bagian dua gigit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak ada warna merah dalam kobinasi warna berikut ini adalah contoh kode warna :


Atribut Elemen <body>
BACKGROUND = Lokasi dan nama file (latar belakng dokumen image dokumrn)
BGCOLOR = Warna (warna latar belakng dokumen, default putih)
TEXT = Warna (warna teks dokumen, default hitam)
LINK = Warna (warna link dokumen, default biru)
VLINK = Warna (warna visited link dokumen, default ungu)
ALINK = Warna (warna aktif link dokumen, default merah)

Dokumen HTML
Sebuah dokumen HTML seperti berikut ini, cukup ditulis dengan Text Editor
ataupun HTML Editor :
<! DOCTYPE HTML>
<html>
<head>
<tittle>Tes HTML</tittle>
</head>
<body>
Selamat belajar HTML di SMK AL FALAH KRATON
</body>
</html>

Sebuah dokumen HTML5 diawali dengan <!DOCTYPE HTML>.
Tanda seperti <html> disebut tag. Sebuah tag seperti itu menyatakan sebuah elemen dalam dokumen html.
Beberapa tag berpasangan. Sebagai contoh, <head> berpasangan dengan </head>.
Namun, tidak semua tag berpasangan. Sebagai contoh, <br> tidak punya pasangan. Khusus untuk tag seperti ini, tidak ada keharusan untuk menyertakan tanda / sebelum >. Pada XHTML, tanda seperti / memang diharuskan untuk ditulis.
Pasangan <html>..</html> menyatakan awal dokumen HTML.
Di dalam <html>..</html> terdapat pasangan <head>..</head> dan <body>..</body>.
Pasangan <head>..</head> menyatakan bagian judul dokumen HTML. Isinya paling tidak berupa pasangan <tittle>..</tittle>.
Pasangan <body>..</body> 
menyatakan bagian tubuh dokumen. Pada contoh, Selamat belajar HTML di SMK AL FALAH KRATON muncul pada tubuh dokumen.

PELAKSANAAN PRAKTIKUM
HTML Link
<!DOCTYPE html>
<html>
<head>
<tittle>Link</tittle>
</head>
<body>
<a href="http://www.smkalfalahkraton.sch.id">Ini adalah link web SMK AL FALAH KRATON </a>
</body>
</html>


Link HTML Image
<!DOCTYPE html>
<html>
<head>
<tittle>Gambar/Image</tittle>
</head>
<body>
<a href="http://smkalfalahkraton.sch.id"><img
src="logo_smk_alfalah.PNG"alt="http://smkalfalahkraton.sch.id"width="104" height="112"></a>
// Gambar di atas menunjukkan alamat Link ke Website SMK AL FALAH KRATON
</body>
</html>
 

Pengertian List
List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang bertema kuliner, list dapat berupa daftar dari makanan dan minuman, beserta harganya. List dapat juga berupa prosedur (urutan langkah-langkah) dari suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan dari langkah pertama sampai langkah terakhir

Contoh List :
Daftar Makanan :
Bakso
Soto
Sate
Gule

Daftar Minuman :
Juice Jambu
Juice Alpukat
Juice Tomat

3) Daftar Berurutan (Ordered List)
Daftar yang berurutan biasanya ditandai dengan penggunaan penomoran tertentu. Penomoran ini bias menggunakan angka (1, 2, 3,…) maupun karakter alphabet terntentu (a, b, c,… atau i, ii, iii,…). Daftar yang berurutan umumnya dipakai untuk item-item yang saling berhubungan satu sama lain, atau untuk menuliskan langkah-langkah atau prosedur dari kegiatan terntentu yang tidak dapat dilakukan secara acak.
Contoh daftar yang berurutan adalah pada cara membuat dokumen HTML,
misalnya :
Langkah-langkah membuat dokumen HTML :
1. Jalankan aplikasi Text Editor
2. Isikan kode HTML ke dalam Text Editor
3. Simpan file dengan ekstension .htm atau .html
4. Jalankan file HTML menggunakan aplikasi Web browser untuk menampilkan hasilnya
Untuk membuat suatu daftar yang berurutan dalam dokumen HTML, digunakan tag <ol> (ordered list), yang berpasangan dengan tag </ol>. Tag <ol> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ol> berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir. Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item,
yang kemudian perlu ditutup dengan tag </li>. 
Contoh penulisan adalah sebagai berikut :
<ol>
<li>Urutan Pertama</li>
<li>Urutan Kedua</li>
</ol>

Adapun atribut untuk tag <ol> adalah “type” yang menunjukan jenis penomorannnya. Secara standart, tipenya adalah menggunakan penomoran 1, 2, 3, 4 dst.
Selain tipe default, tipe lain yang dapat digunakan untuk keperluan penomoran dalam suatu list adalah :Tipe Keterangan
A Membuat list dengan penomoran berupa karakter A, B, C, dst
a Membuat list dengan penomoran berupa karakter A, B, C, dst
I Membuat list dengan penomoran berupa karakter A, B, C, dst
i Membuat list dengan penomoran berupa karakter A, B, C, ds

1. Pembuatan Tabel
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table pada HTML, digunakan Tag<Table>. Elemen table berisi property <tr> untuk menentukan baris(table row) yang didalamnya terdapat properti <td> untuk menampkan data pada setiap sel table(table data). Struktur elemen table adalah sebagai berikut:
 
Struktur elemen table adalah sebagai berikut:
<table>
<tr>
<td>data baris 1 kolom 1</td>
<td>data baris 1 kolom 2</td>
</tr>
</table> 

Atribut Elemen Tabel
Width =panjang(lebar table, pixel atau persen)
Height =panjang(tinggi table, pixel atau persen)
Border =pixel(tebal garis tepi)
Cellspacing =pixel(spasi antar sel)
Cellpadding =pixel(spasi di dalam sel)
Align =[left|center|right](perataan table)
Bgcolor =warna(warna latar belakang table)
 
Atribut Table Row
Align =[left|center|right](perataan sebaris sel secara horizontal)
Valign =[top|middle|bottom](perataaan sebaris sel secara vertical)
Bgcolor =warna(warna latar belakang baris)
 
Atribut Tabel Data
Align =[left|center|right](perataan horizontal)
Width =[top|middle|bottom](perataan vertical)
Height =pixel(tinggi sel, pixel atau persen)
Bgcolor =warna(warna latar belakang sel)
 
Tag table berikut property
kolom dan barisnya, jangan lupa disimpan dengan ekstensi
.html.kemudian coba di web browser.
<html>
<head>
<title>tabel</title>
</head>
<body>
berikut contoh tabel dengan rowspan dan
colspan
<table width=80% border=2 cellspacing=0
cellpadding=0>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td colspan=2>baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan=2baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
</table>
</body>
</html> 

PELAKSANAAN PRAKTIKUM 
Contoh Script membuat Tabel
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<fieldset>
<legend>Tabel Siswa SMK AL FALAH</legend>
<table border="1">
<tr>
<th width="30px">No</th>
<th width="200px">Nama</th>
<th width="50px">Kelas</th>
<th width="100px">Jurusan</th>
</tr>
<tr>
<td align="center">1</td>
<td>M.SOBIRIN</td>
<td align="center">X</td>
<td>TKJ</td>
</tr>
<tr>
<td align="center">2</td>
<td>RIFA'I</td>
<td align="center">X</td>
<td>TKJ</td>
</tr>
<tr>
<td align="center">3</td>
<td>DEVIT JANUARI</td>
<td align="center">X</td>
<td>TBSM</td>
</tr>
<tr>
<td align="center">4</td>
<td>PUTRI AMELIA</td>
<td align="center">X</td>
<td>TKJ</td>
</tr>
<tr>
<td align="center">5</td>
<td>AFIYAH</td>
<td align="center">X</td>
<td>TKJ</td>
</tr>

<tr>
<td align="center">6</td>
<td>HOIRUL</td>
<td align="center">X</td>
<td>TKJ</td>
</tr>

<tr>
<td align="center">7</td>
<td>AHMAD DHANI</td>
<td align="center">X</td>
<td>TBSM</td>
</tr>

<tr>
<td align="center">8</td>
<td>SEKAR MELATI</td>
<td align="center">X</td>
<td>TKJ</td>
</tr>

<tr>
<td align="center">9</td>
<td>AKHMAD FAIZ</td>
<td align="center">X</td>
<td>TKJ</td>
</tr>

<tr>
<td align="center">10</td>
<td>AFIYAH</td>
<td align="center">X</td>
<td>TKJ</td>
</tr>

</table>
</fieldset>
</center>
</filde>
</body>
</html>
DEMO PROGRAM  : Tabel Siswa SMK AL FALAH
 
PELAKSANAAN PRAKTIKUM 
Contoh Script membuat Tabel menggunaka Css
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<style type="text/css">
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
}
 /* Table */
table {
margin: auto;
font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
font-size: 12px;
}
.demo-table {
border-collapse: collapse;
font-size: 13px;
}
.demo-table th,
.demo-table td {
border-bottom: 1px solid #e1edff;
border-left: 1px solid #e1edff;
padding: 7px 17px;
}
.demo-table th,
.demo-table td:last-child {
border-right: 1px solid #e1edff;
}
.demo-table td:first-child {
border-top: 1px solid #e1edff;
}
.demo-table td:last-child{
border-bottom: 0;
}
caption {
caption-side: top;
margin-bottom: 10px;
}
/* Table Header */
.demo-table thead th {
background-color: #508abb;
color: #FFFFFF;
border-color: #6ea1cc !important;
text-transform: uppercase;
}
/* Table Body */
.demo-table tbody td {
color: #353535;
}
demo-table tbody tr:nth-child(odd) td {
background-color: #f4fbff;
}
.demo-table tbody tr:hover th,
.demo-table tbody tr:hover td {
background-color: #ffffa2;
border-color: #ffff0f;
transition: all .2s;
}
</style>
</head>

<body>
<table class="demo-table responsive" >
<caption class="title"><b>DATA SISWA SMK AL FALAH KRATON</b></caption>
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Nama</th>
<th scope="col">Alamat</th>
<th scope="col">Telp</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td data-header="No" class="title"align="center">1</td>
<td data-header="Nama" class="title">Abdul Khamid Faqehudin</td>
<td data-header="Alamat" >Pasuruan</td>
<td data-header="Telp" >08562136987</td>
<td data-header="Email" >khamid@gmail.com</td>
</tr>
<tr>
<td data-header="No" class="title"align="center">2</td>
<td data-header="Nama" class="title">Abdul Karim</td>
<td data-header="Alamat" >Pasuruan</td>
<td data-header="Telp" >08562136143</td>
<td data-header="Email" >karim@gmail.com</td>
</tr>
<tr>
<td data-header="No" class="title"align="center">3</td>
<td data-header="Nama" class="title">Ahmad Ibrohim</td>
<td data-header="Alamat" >Pasuruan</td>
<td data-header="Telp" >08121234875</td>
<td data-header="Email" >ahmad@gmail.com</td>
</tr>
<tr>
<td data-header="No" class="title"align="center">4</td>
<td data-header="Nama" class="title">Ahmad Sahrul </td>
<td data-header="Alamat" >Pasuruan</td>
<td data-header="Telp" >08111234675</td>
<td data-header="Email" >sahrul@gmail.com</td>
</tr>
<tr>
<td data-header="Nama" class="title"align="center">5</td>
<td data-header="Nama" class="title">Nadif</td>
<td data-header="Alamat" >Pasuruan</td>
<td data-header="Telp" >08131234908</td>
<td data-header="Email" >nadif@gmail.com</td>
</tr>

<tr>
<td data-header="Nama" class="title"align="center">6</td>
<td data-header="Nama" class="title">Sobirin</td>
<td data-header="Alamat" >Pasuruan</td>
<td data-header="Telp" >08131234908</td>
<td data-header="Email" >sobirin@gmail.com</td>
</tr>
<tr>
<td data-header="Nama" class="title"align="center">7</td>
<td data-header="Nama" class="title">Hasani</td>
<td data-header="Alamat" >Pasuruan</td>
<td data-header="Telp" >08131234908</td>
<td data-header="Email" >hasani@gmail.com</td>
</tr>
<tr>
<td data-header="Nama" class="title"align="center">8</td>
<td data-header="Nama" class="title">Rifa'i</td>
<td data-header="Alamat" >Pasuruan</td>
<td data-header="Telp" >08131234908</td>
<td data-header="Email" >rifai@gmail.com</td>
</tr>
<tr>
<td data-header="Nama" class="title"align="center">9</td>
<td data-header="Nama" class="title">Faizin</td>
<td data-header="Alamat" >Pasuruan</td>
<td data-header="Telp" >08131234908</td>
<td data-header="Email" >faiz@gmail.com</td>
</tr>
<tr>
<td data-header="Nama" class="title"align="center">10</td>
<td data-header="Nama" class="title">Yudi</td>
<td data-header="Alamat" >Pasuruan</td>
<td data-header="Telp" >08131234908</td>
<td data-header="Email" >yudi@gmail.com</td>
</tr>

<tr>
<td data-header="Nama" class="title"align="center">11</td>
<td data-header="Nama" class="title">Afiyah</td>
<td data-header="Alamat" >Pasuruan</td>
<td data-header="Telp" >08131243434</td>
<td data-header="Email" >afiyah@gmail.com</td>
</tr>

<tr>
<td data-header="Nama" class="title"align="center">12</td>
<td data-header="Nama" class="title">Siti Mabruroh</td>
<td data-header="Alamat" >Pasuruan</td>
<td data-header="Telp" >08135556679</td>
<td data-header="Email" >mabruroh@gmail.com</td>
</tr>

</tbody>
</table>
</body>
</html>
DEMO PROGRAM  : Tabel Siswa SMK AL FALAH
 
 
Memasukkan Gambar ke dalam Halaman Web
Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan bila tidak disertai dengan gambar. Anda bisa lihat saat ini, halaman web yang ada di internet, hampir semuanya memasukkan unsur gambar, animasi, bahkan audio dan video untuk menarik dan membuat tercengang para pengunjungnya. Cara menambahkan audio dan video akan kita bahas pada bagian lain dalam buku ini. Untuk saaat ini, kita hanya akan membahas tentang gambar. Sebagai contoh lain, misalnya anda ingin membuat halaman web yang berisi koleksi foto anda, maupun barang-barang yang sesuai dengan hobi anda. Dalam kasus ini, tentu anda harus memahami teknik untuk menampilkan foto tersebut ke dalam halaman web sehingga akan tampil rapi dan menarik. Cara yang diperlukan untuk memasukkan atau menambahakan gambar ke dalam suatu halaman web sangatlah mudah. HTML telah menyediakan tag khusus untuk keperluan ini, yaitu <img>. Tag ini merupakan tag tunggal atau tidak memiliki pasangan. Atribut terpenting dari tag <img> adalah SRC (source atau sumber), yang berisi file gambar yang akan ditampilkan ke dalam halaman web.
Bentuk umum penggunaan tag <img> adalah : <img src=”namafile” />
Jika file yang akan ditampilkan berada di direktori lain, atau bahkan berada di situs web lain, makan anda perlu menyebutkan juga lokasi dari file tersebut.
Contoh:
<img src= “nama_foto_logo_smk_alfalah.jpg”> 

Memperkecil dan Memperbesar Ukuran Gambar
gambar yang ditampilkan pada dokumen HTML terkadang tidak memiliki ukuran gambar yang sama dengan ukuran sebenarnya. Untuk menghasilkan gambar dengan kualitas yang mirip aslinya, penentuan ukuran juga menjadi hal yang penting untuk diperhatikan. Maka dari itu perbandinganya harus sesuai dengan ukuran asli dari gambar tersebut. Untuk menentukan ukuran gambar, kita perlu mengisi atribut HEIGHT berfungsi untuk menetukan tinggi gambar dan width untuk menetukan lebar gambar. Perhatikan contoh berikut ini.
<img src=”images/logo_smk_alfalah.jpg” />
 
Kode diatas akan menampilkan gambar dari file jeep.jpg yang berada dalam direktori images sesuai dengan ukuran asli (misal 500X375 pixel). Untuk memperkecil gambar tersebut, kita tinggal memperkecil nilai-nilai tersebut,
misalnya
<img src=”images/logo_smk_alfalah.jpg” width=320” height=”230” />

Memberi keterangan pada gambar
Agar lebih terkesan informatif, anda dapat memberikan keterangan yang relevan dan seperlunya (tidak berlebihan) terhadap gambar yang anda tampilkan pada halaman web. Keterangan ini akan muncul dalam bentuk tooltip ( sesaat, hanya beberapa detik) pada saat penunjung mengarahkan kursor (penjujuk mouse) ke atas gambar. Untuk membuat keterangan semacam ini, kita dapat menggunakan atribut TITLE maupun ALT pada tag <img>.
<img src=”namafile” title=”keterangan”/>
 
PELAKSANAAN PRAKTIKUM 
1. Membuat pemutar media player
<!DOCTYPE html>
<html>
<head>
<title>Membuat Pemutar video</title>
<style type="text/css">
h1{
font-family: sans-serif;
}
</style>
</head>
<body>
<center>
<h1>LOMBA MEMBUAT  VIDEO PROKES
</h1>
<video width="400px" height="350px" controls>
<source src="judul_video.MP4" type="video/mp4">
<source src="judul_video.ogg" type="video/ogg">
</video>
 </center>
</body>
</html>
Keterangan :
Bagian berwarna di atas mewakili area yang perlu Anda edit secara manual. Area biru menunjukkan tinggi dan lebar video.
Parameter src yang berwarna merah harus diubah agar sesuai dengan URL sumber lokasi video.
Tipe merah muda akan sesuai dengan ekstensi video. Cari saja tipe pantomim berdasarkan ekstensi.
 
  
 
PELAKSANAAN PRAKTIKUM 
2. Script untuk Menampilkan Audio
<!doctype html>
<html>
<head>
<title>Menampilkan Audio Di Web</title>
</head>
<body>
<audio controls>
<source src="musik.mp3" type="audio/mp3">
</audio>
</body>
</html>

3. Script cara menyematkan Video Youtube
<iframe src="https://www.youtube.com/embed/ID_VIDEO"></iframe>
 
PELAKSANAAN PRAKTIKUM 
1. MEMBUAT FRAME 
Langka 1 : membuat file index.html
<html>
<title>Frame</title>
<frameset rows="15%,75%,10%">
<frame src="logo.html"scrolling=no frameborder=0 norisize">
<frameset cols="10%,90%">
<frame name="kiri"src="kiri.html">
<frame name="utama"src="utama.html">
</frameset >
<frame name="bawah"src="bawah.html">
</frameset >
</html>
Di save dengan nama  : index.html

Langka 2 : membuat file atas.html
<html>
<head>
<title>LOGO</title>
</head>
<body bgcolor="yellow">
<font size="6">
<center>
FRAME LOGO WEBSITE
</center>
</font>
</body>
</html>
Di save dengan nama  : atas.html

Langka 3 : membuat file kiri.html 
<html>
<head>
<title>KIRI</title>
</head>
<body bgcolor="pink">
<font size="6">
<center>
FRAME KIRI
</center>
</font>
</body>
</html>
Di save dengan nama  : kiri.html

Langka 4 : membuat file utama.html 
<html>
<head>
<title>UTAMA</title>
</head>
<body bgcolor="pink">
<font size="6">
<center>
FRAME TAMPILAN UTAMA
</center>
</font>
</body>
</html>
Di save dengan nama  : utama.html

Langka 5 : membuat file bawah.html 
<html>
<head>
<title>BAWAH</title>
</head>
<body bgcolor="pink">
<font size="6">
<center>
FRAME BAWAH
</center>
</font>
</body>
</html>
Di save dengan nama : bawah.html
Selanjutnya kita jalankan file index.html  maka tampilanya seperti gambar di bawah ini
 
Gambar Frame
DEMO PROGRAM  : Frame
 
PELAKSANAAN PRAKTIKUM 
Script Form Input Biodata Siswa
<!doctype html>
<html lang="en"> 
<head>
<center> 
<img src="foto2.PNG" width="50"height="50" class="img-fluid animated" alt=""> 
</center>
<script >
function inputdata(){
var
ni=document.forms['datapribadi']
['nis'].value;
var
na=document.forms['datapribadi']
['nama'].value;
var
jk=document.forms['datapribadi']
['jk'].value;
var
ke=document.forms['datapribadi']
['kelas'].value;
var
al=document.forms['datapribadi']
['alamat'].value;
var tabel = document.getElementById("databel");
var baris = tabel.insertRow(1);
var kol1 = baris.insertCell(0);
var kol2 = baris.insertCell(1);
var kol3 = baris.insertCell(2);
var kol4 = baris.insertCell(3);
var kol5 = baris.insertCell(4);
kol1.innerHTML = ni;
kol2.innerHTML = na;
kol3.innerHTML = jk;
kol4.innerHTML = ke;
kol5.innerHTML = al;
}
</script>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title> Java Script Tanpa Database</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8"><h1><font size="5"font color="black"><b><center><br>FORM INPUT SISWA<br>SMK AL FALAH KRATON </center></b></font></h1>
<form name="datapribadi" method="" action="">
<div class="form-group">
<label for="exampleFormControlInput1">Nis</label>
<input type="text" class="form-control" name="nis" id="exampleFormControlInput1" placeholder="">
<label for="exampleFormControlInput1">Nama</label>
<input type="text" class="form-control" name="nama" id="exampleFormControlInput1" placeholder="">
<div class="form-group">
<label for="exampleFormControlSelect1">Jenis Kelamin</label>
<select class="form-control" name="jk" id="exampleFormControlSelect1">
<option>Status</option>
<option>Laki-laki</option>
<option>Perempuan</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Kelas</label>
<select class="form-control" name="kelas" id="exampleFormControlSelect1">
<option>Kelas </option>
<option> X.A/TKJ</option>
<option>X.B/TKJ</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Alamat</label>
<textarea class="form-control mb-3" name="alamat" id="exampleFormControlTextarea1" rows="3"></textarea>
<button type="button" onClick='inputdata()' class="btn btn-success">Simpan</button>
<button type="reset" class="btn btn-warning">Reset</button>
</div>
<div class="row">
<table class="table" id="databel">
<thead>
<tr>
<th scope="col">NIS</th>
<th scope="col">NAMA</th>
<th scope="col">STATUS</th>
<th scope="col">KELAS</th>
<th scope="col">ALAMAT</th>
</tr>
</thead>
</table>
</div>
</form>
</div>
<div class="col-md-2"></div>
</div>
</div>
</body>
</html> 
DEMO PROGRAM  : APLIKASI INPUT DATA SISWA

PELAKSANAAN PRAKTIKUM 
Script Web dengan Template
Buat file html dengan Nama : index.html
Ketik script di bawah ini

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SMK AL FALAH KRATON</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<h1>PONDOK PESANTREN MIFTAHUL FALAH AL HASANI</h1>
<p>Jl. Pesantren Desa Selotambak Kraton Kabupaten Pasuruan</p>
<p>Telp. 081233157316 - 085101798053</p>
</header>
<nav class="navbar">
<ul>
<li class="utama"><a href="/web">Beranda</a></li>
<li class="utama"><a href="#">PROGRAM KEAHLIAN</a>
<ul>
<li><a href="">T K J</a></li>
<li><a href="">T B S M</a></li>
</ul>
</li>
<li class="utama"><a href="index.php?web=form">INFORMSI SEKOLAH</a></li>
<li class="utama"><a href="index.php?web=view">INFORMASI YAYASAN</a></li>
<li class="utama"><a href="#">GALERY</a>
<ul>
<li><a href="">Kegiatan MPLS </a></li>
<li><a href="">Foto Deminisi</a></li>
</ul>
</li>
<li class="utama logout"><a href="#">Logout</a></li>
</ul>
</nav>
<main class="main">
<div class="content"align="justify">
<h2>SEJARAH</h2><p>
&nbsp&nbsp&nbspSejarah singkat tentang lembaga, pada tahun 1930 an M.berdiri sebuah lembaga pendidikan yang yang mana sentral di pusat mushollah Roudlotul Jannah yang letak di desa selotambak Kecamatan Kraton Pasuruan yang di asuh oleh Kiyai Syu'bah Hari Berganti bulan, bulan berganti tahun tepatnya pada tahun 1940 kegiatan tersebut menjadi pesantren dan madrasah .Pesantren yang di beri nama Nahdlotul Aman Kiyai Syu'bah mengasuh pesantren dan madrasah di bantu oleh putra keduanya (KH.Ja'far Syu'bah) yaitu Pengasuh kedua.Namun yang menonjol tetap madrasah pada Tahun 1990 an.Pesantren mulai di di bangun lagi pada Tahun 1994.Madrasah berubah menjadi menjadi nama madrasah Miftahul Ulum,dan pada Tahun 1999 Pondok Pesantrennya Miftahul Falah Al-Hasani. setelah Kiyai Ja'far syu'bah(Pegasuh kedua) wafat.maka madrasah tersebut di asuh oleh putranya KH.Yazid Bustomi.
Pada Tahun 2004 Yayasan Pondok Pesantren MIFTAHUL FALAH AL-HASANI mendirikan lembaga MI.Nahdlotul Aman dan SMP AL-FALAH dan di tahun 2011 didirikan pula lembaga SMK AL-FALAH dengan berdirinya lembaga formal bukan berarti yayasan pondok pesantren Miftahul falah al-hasani mengesampingkan pendidikan salaf akan tetapi tetap eksis dalam mengelolah pendidikan salaf.
</p>
<br>
<h2><b>VISI DAN MISI</b></h2>
<p>
<b>VISI</b><br>
MEWUJUDKAN IMPIAN SISWA SMK AL FALAH KRATON
BERPRESTASI,
MULIA DI HADAPAN MASYARAKAT
MEMILIKI INTAQ, IPTEK DAN BERBUDI LUHUR.
<br><br>
<b>MISI</b> <br>
1.MENCETAK SISWA -SISWI YANG BERPRESTASI <br>
2.MENCETAK SISWA -SISWI YANG BERIMAN , BERTAQWA KEPADA TUHAN YANG MAHA ESA<br>
3.MENCETAK SISWA -SISWI YANG BERBUDI PEKERTI DAN BERFIKIR KRITIS
</p>
</div>
<aside class="sidebar">
<h2>Tentang</h2>
<p>
Nama Instansi : SMK Al-Falah Kraton  <br>
Alamat  : Jl. Pesantren Selotambak  <br>
Kecamatan/ Kab. : Kraton / Pasuruan  <br>
Propinsi : Jawa Timur  <br>
Pendiri  : YPP Miftahul Falah Al-Hasani  <br>
Pemilik : YPP Miftahul Falah Al-Hasani  <br>
Tahun Berdiri  : 2011  <br>
Telpon : (0343) 7680769  <br>
Company Profile  : <a href="https://smkalfalahkraton.sch.id/index.html">www.smkalfalahkraton.sch.id</a>
</p>
<br>
<h2>Berita Terkini</h2>
<p>Persiapan ujian PTS </p>
</aside>
</main>
<footer class="footer">
<p>Copyright &copy Pondok Pesantren Miftahul Falah Al Hasani | 2024 All rights reserved.</p>
</footer>
</body>
</html>

Selanjut membuat stylesheet dengan nama : style.css
/*
Document : style
Created on : 03 Okt 21, 13:42:58
Author : USER
Description:
Purpose of the stylesheet follows.
*/

/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
root {
display: block;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
margin-right: auto;
margin-left: auto;
max-width: 1024px;
padding-right: 10px;
padding-left: 10px;
}
.header {
padding: 60px;
text-align: center;
background: black;
color: white;
}
.navbar {
display: flex;
background-color: #333;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
}
.navbar ul li.utama {
display: inline-table;
}
.navbar ul li :hover {
background-color: #2980b9;
}
.navbar ul li a {
display: block;
text-decoration: none;
line-height: 40px;
padding: 0 10px;
color: #fff;
}
.utama ul {
display: none;
position: absolute;
z-index: 2;
}
.utama:hover ul {
display: block;
}
.utama ul li {
display: block;
background-color: #2980b9;
width: 140px;
}
.main {
display: flex;
flex-wrap: wrap;
border-left: 1px solid #3498db;
border-right: 1px solid #3498db;
border-bottom: 1px solid #3498db;
}
.content {
flex: 70%;
background-color: white;
padding: 20px;
}

.sidebar {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}

.footer {
padding: 1px;
text-align: center;
background: #ddd;
border-left: 1px solid #3498db;
border-right: 1px solid #3498db;
border-bottom: 1px solid #3498db;
font-size: 12px;
}

@media screen and (max-width: 768px) {
.main,
.navbar {
flex-direction: column;
}
}
Tampilan Website saat di jalankan

Gambar Halaman Website
 
DEMO PROGRAM  : TEMPLATE WEBSITE
 
 
PELAKSANAAN PRAKTIKUM 
Membuat Form Login
Script Form Login
<html lang="en">
<head>
<title>Form Login</title>
</head>
<body bgcolor="">
<br>
<script>
var password = prompt("Masukkan Password Anda:");
if(password == "smk_alfalah")
{
document.write("<h2><center>SELAMAT ANDA BERHASIL LOGIN DI APLIKASI SMK AL FALAH KRATON</center></h2>");
}
else
{
document.write("<p><center>Password anda salah, coba lagi..!</center></p>");
}
document.write("<p><center>Terima kasih sudah mengunjungi Website Kami
<br>www.smkalfalahkraton.sch.id</center></p>");
</script>
</body>
</html>  
Tampilan form aplikasi ketika di jalankan   

  
Selanjutnya masukkan password : smk_alfalah
 


Selanjutnya jika berhasil masuk ke halaman Aplikasi


Jika password salah maka tampilannya seperti gambar di bawah ini.
 
DEMO PROGRAM  : LOGIN

PELAKSANAAN PRAKTIKUM 
Membuat Video WEBCAM
<html>
<head>
<title>
WEBCAM
</title>
<body bgcolor="black">
<br>
<center><font size="5"font face="arial"font color="white">LIVE STREAMING SMK AL FALAH KRATON
</font><br><br>
<video autoplay="true" id="video-webcam"width="600"height="400">
Browser anda tidak mendukung minta, upgrade
</video></center>
<P>
<script type="text/javascript"align="center">
// seleksi elemen video
var video = document.querySelector("#video-webcam");
// minta izin user
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
// jika user memberikan izin
if (navigator.getUserMedia) {
// jalankan fungsi handleVideo, dan videoError jika izin ditolak
navigator.getUserMedia({ video: true }, handleVideo, videoError);
}
// fungsi ini akan dieksekusi jika izin telah diberikan
function handleVideo(stream) {
video.srcObject = stream;
}
// fungsi ini akan dieksekusi kalau user menolak izin
function videoError(e) {
// do something
alert("LIVE STREAMING")
}
</script>
</P>
</body>
</html>

Selanjutnya tekan tombol  OK

Gambar Video WEBCAM
  
PELAKSANAAN PRAKTIKUM
Membuat Text Animasi
Langkah 1: Membuat File animasi.html
Ketik script di bawah ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Animasi</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<body>
<div class='rotate-box'>
<div class="rotate-box-body">
<div class="rotate">PONDOK PESANTREN MIFTAHUL FALAH AL HASANI <br>SMK AL FALAH KRATON</div>
</div>
</div>
</body>
</html>
simpan file dengan nama animasi.html
Langkah 2: Membuat File style.css
Ketik script di bawah ini :
.rotate-box {
background: black;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
padding: 15px;
perspective: 1200px;
height: 900px;
}
.rotate-box .rotate-box-body {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.rotate-box .rotate-box-body .rotate {
position: relative;
top: 25%;
font-family: TAHOMA;
font-size: 70px;
color: #f1f1f1;
text-shadow: 3px 4px #c1c1c1;
text-transform: uppercase;
font-weight: bold;
animation-name: rotate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 10s;
margin: 35px 0px;
}
@keyframes rotate {
from { transform: rotateY(0deg); }
to { transform: rotateY(-360deg); }
}
@-webkit-keyframes rotate {
from { transform: rotateY(0deg); }
to { transform: rotateY(-360deg); }
}
@-moz-keyframes rotate {
from { transform: rotateY(0deg); }
to { transform: rotateY(-360deg); }
}
simpan file dengan nama style.css
Jalankan program file Animasi hasilnya seperti gambar di bawah ini
DEMO PROGRAM  : ANIMASI TULISAN