html (table, form, frame, hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfatribut fungsi...
TRANSCRIPT
![Page 1: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/1.jpg)
PERTEMUAN 3
![Page 2: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/2.jpg)
Fungsi: Menampilkan informasi secara terstruktur, ringkas
dan mudah dibaca Mengatur tampilan homepage agar lebih menarik
![Page 3: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/3.jpg)
Atribut Fungsi
Border Menentukan ukuran border/garis tabel
Width Menentukan lebar tabel
Height Menentukan tinggi tabel
Bgcolor Menentukan background tabel
Background Menentukan gambar yang digunakan untuk background tabel
Color Untuk mengatur warna suatu sel dalam tabel
Align Mengatur bentuk perataan horisontal
Valign Mengatur bentuk perataan vertikal
Rowspan Menggabungkan beberapa baris
Colspan Menggabungkan beberapa kolom
Cellspacing dan cellpadding Mengatur spasi antar sel dan spasi dalam sel
![Page 4: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/4.jpg)
Tag yang diperlukan:
Membuat baris: <tr> (table row)
Membuat kolom: <td> (table data)
<html>
<head>
<title> Belajar Membuat Tabel </title>
</head>
<body>
<table border="1">
<tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr>
<tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr>
</table>
</body>
</html>
Tampilan
![Page 5: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/5.jpg)
Judul tabel: <caption> Judul baris/kolom: <th> (table header)
<html>
<head>
<title> Belajar Membuat Tabel </title>
</head>
<body>
<table border="1">
<caption align="top"> <b> DAFTAR MAHASISWA
</b> </caption>
<tr><th>No</th><th>NPM</th><th>Nama</th></tr>
<tr><td>1</td><td>06.100.001</td><td>Amin A.
Angkasa</td></tr>
<tr><td>2</td><td>06.100.002</td><td>Beni B.
Bernardi</td></tr>
</table>
</body>
</html>
![Page 6: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/6.jpg)
Atribut: bgcolor
Contoh:<body bgcolor="purple">
<font size="3" face="arial" color="yellow">
<table border="2" bgcolor="white" align="center">
<caption align="bottom">
<b> Tabel Daftar Mahasiswa </b> </caption>
<tr bgcolor="yellow">
<th>No</th><th>NPM</th><th>Nama</th></tr>
<tr bgcolor="cyan"><td align="center" width="20">1.</td>
<td align="left" valign="middle“
width="80" height="40">06.100.001</td>
<td align="left" valign="middle“
width="180" height="40">Amin A. Angkasa</td></tr>
<tr><td bgcolor="blue" width="20">2.</td>
<td bgcolor="red" align="left" valign="middle"
width="80" height="40">06.100.002</td>
<td bgcolor="green" align="left" valign="middle"
width="180" height="40">Beni B. Bernardi</td></tr>
</table>
</body>
Tampilan:
![Page 7: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/7.jpg)
Atribut: width dan height ukuran % (max 100%)
ukuran pixel
<html>
<head>
<title> Belajar Membuat Tabel </title>
</head>
<body>
<table border=1 bgcolor="green" width=300 height=100>
<tr height=30>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr height=70>
<td>Baris 2 Kolom 1</td>
<td background="./images.jpg">
Baris 2 Kolom 2 <br><br> Background bagus</td>
</tr>
</table>
</body>
</html>
Tampilan:
![Page 8: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/8.jpg)
horisontal: atribut align utk <caption>, <tr>, <td> dan <th>
vertikal: atribut valign utk <tr>, <td> dan <th>
<table border="1" align="center">
<caption align="top">
<b> DAFTAR MAHASISWA </b> </caption>
<tr><th>No</th><th>NPM</th><th>Nama</th></tr>
<tr><td align="center" width="20">1.</td>
<td align="center" valign="middle"
width="80" height="50">06.100.001</td>
<td align="right" valign="top"
width="180" height="50">Amin A. Angkasa</td></tr>
<tr><td width="20">2.</td>
<td align="left" valign="top"
width="80" height="70">06.100.002</td>
<td align="left" valign="bottom"
width="180" height="70">Beni B. Bernardi</td></tr>
</table>
Tampilan:
![Page 9: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/9.jpg)
Menggabungkan bbrp kolom menjadi 1: atribut colspan Menggabungkan bbrp kolom menjadi 1: atribut rowspan
Contoh Tampilan:
![Page 10: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/10.jpg)
<table border="1" bgcolor="white" align="center"><caption align="top"> <b> Tabel Daftar Nilai Mahasiswa </b> </caption><tr bgcolor="gray"><th rowspan="2">No</th><th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th></tr><tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr><tr><td align="center" width="20">1.</td><td align="left" valign="middle" width="80" height="40">06.100.001</td><td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td><td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td></tr><tr><td width="20">2.</td><td align="left" valign="middle" width="80" height="40">06.100.002</td><td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td><td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td></tr>
</table>
Script HTML:
![Page 11: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/11.jpg)
atribut cellpading: mengatur spasi antara border dengan tulisan atribut cellspasing: mengatur spasi antar 2 buah sel
Contoh Tampilan:
![Page 12: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/12.jpg)
Script HTML:
<table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12"><caption align="top"> <b> Tabel Daftar Nilai Mahasiswa </b> </caption><tr bgcolor="gray"><th rowspan="2">No</th><th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th></tr><tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr><tr><td align="center" width="20">1.</td><td align="left" valign="middle" width="80" height="40">06.100.001</td><td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td><td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td></tr><tr><td width="20">2.</td><td align="left" valign="middle" width="80" height="40">06.100.002</td><td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td><td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td></tr>
</table>
![Page 13: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/13.jpg)
Fungsi: Menerima informasi atau meminta umpan balik dari user
dan memproses informasi tersebut di server
Standar penulisan:<form method=“post/get” action=“. . .”> . . . </form>
Atribut:
Atribut Fungsi
Method Metode pengiriman data ke file tujuan (POST atau GET)
Action Aksi yang akan dilakukan jika user menekan tombol Submit
Name Memerikan nama tiap masukan
Value Memberikan nilai suatu masukan
Type Tipe form yang akan digunakan
![Page 14: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/14.jpg)
metode POST dan GET memiliki kegunaan yang sama yaitu untuk mengirimkan value variabel ke halaman lain atau mengirimkan ke database.
Perbedaan Method GET ketika mengirimkan data akan menambahkan pada URL, sedangkan kalo method POST dikirim ke server dengan diincludekan pada sebuah permintaan (body of request)
![Page 15: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/15.jpg)
GET
POST
![Page 16: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/16.jpg)
Tag: <input> Atribut-atribut:
Atribut Fungsi
type=["text"|"password"] Menentukan jenis field masukan
Text, submit, password
name Menentukan nama untuk field sehingga dapat dirujuk nantinya
value Memberi nilai suatu input
size mengatur lebar field secara horisontal, berapa huruf maksimal yang dapat ditampilkan
maxlength menentukan jumlah maksimum huruf (karakter) yang dapat dimasukkan
![Page 17: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/17.jpg)
Tampilan:
Contoh:<body>
<b>Login: <b> <br>
<form method="post">
<table>
<tr> <td>User:</td> <td><input type="text" name="user" size="20"></td></tr>
<tr> <td>Password:</td> <td><input type="password" name="password"
size="20"></td></tr>
</table>
</form>
</body>
![Page 18: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/18.jpg)
Tombol Submit: digunakan ketika user mengisi form dan ingin mengirimkan ke server
Tombol Reset: digunakan ketika user ingin menghapus/mengosongkan semua masukan yang ditulis dalam form
![Page 19: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/19.jpg)
Contoh:<body>
<b>Data Pengunjung: <b> <br>
<form method="post" action="data.html">
<table>
<tr> <td>Nama:</td> <td><input type="text" name="nama" size="20"></td></tr>
<tr> <td>Alamat:</td> <td><input type="text" name="alamat" size="20"></td></tr>
</table>
<input type="submit" value="Simpan" name="t1">
<input type="reset" value="Reset" name="t2">
</form>
</body>
Tampilan:
![Page 20: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/20.jpg)
Fungsi: Untuk memberi beberapa pilihan kepada user
Contoh:<form method="post">
Bacaan yang Anda sukai: <br>
<input type="checkbox" name="bacaan" value="novel"> Novel <br>
<input type="checkbox" name="bacaan" value="koran"> Koran <br>
<input type="checkbox" name="bacaan" value="majalah"> Majalah <br>
<input type="checkbox" name="bacaan" value="tabloid"> Tabloid <br>
</form>
Tampilan:
![Page 21: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/21.jpg)
Fungsi: Untuk memberi (hanya) satu pilihan kepada user
Contoh:<form method="post">
Apakah Anda setuju dengan kenaikan SPP: <br>
<input type="radio" name="opsi" value="ya"> Ya <br>
<input type="radio" name="opsi" value="tidak"> Tidak <br>
<input type="radio" name="opsi" value="ragu"> Ragu-ragu <br>
</form>
Tampilan:
![Page 22: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/22.jpg)
Fungsi: Memberikan menu pilihan kepada user (cara kerjanya seperti radio button
yang hanya mengijinkan user untuk memilih 1 pilihan saja)
Contoh:<form method="post">
Jurusan: <br>
<select name="jurusan">
<option value="TInf"> Teknik Informatika <br>
<option value="MI"> D3 Manajemen Informatika <br>
<option value="TI"> Teknik Industri <br>
</select>
</form>
Tampilan:
![Page 23: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/23.jpg)
Fungsi: Sebagai field masukan untuk pengunjung (dapat
menerima lebih dari satu baris teks). Biasa disebut sebagai kotak komentar
• Tag: <textarea>
• Atribut-atribut:
Atribut Fungsi
Rows Menetukan lebar kotak komentar
Columns Menentukan tinggi kotak komentar
Wrap=["off"|"virtual"|"physical"] Menentukan fitur word wrapping
![Page 24: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/24.jpg)
Tampilan:
Contoh:<html>
<head>
<title> Penggunaan Text Area </title>
</head>
<body>
<b>Komentar: <b> <br>
<form method="post"> <textarea rows="10" cols=“40" wrap="physical" name="komentar">
</textarea><br>
</html>
![Page 25: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/25.jpg)
Fungsi:
Menampilkan beberapa dokumen HTML secara sekaligus dalam satu jendela web browser.
• Standar penulisan: <frameset [cols=“%,%”] [rows=“%,%”]> . . . </frameset>
• Atribut-atribut:
Atribut Fungsi
frameset cols Membuat frame vertikal dengan lebar kolom tertentu
frameset rows Membuat frame horisontal dengan tinggi baris tertentu
frame src Memasukkan dokumen HTML ke dalam frame
scrolling=["yes"|"no"] Menentukan fitur scrolling
noresize Membuat frame tidak dapat diubah ukurannya
name Memberi nama untuk frame
frameborder=["0"|"1“] Menentukan batas antara frame
![Page 26: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/26.jpg)
Frame dapat diberi nama dan diatur targetnya dengan menggunakan tag base target.
Contoh:Frame menu dapat digunakan sebagai link untuk mengakses halaman di frame content.
Script HTML:<html>
<head></head>
<frameset rows=“15%,*">
<frame name=“judul" src=“judul.html">
<frameset cols="30%,*">
<frame name="menu"
src="menu.html">
<name="content" src="content.html">
</frameset>
</html>
Potongan kode file menu.html:<html>
<head>
<base target="content">
</head>
...
</html>
![Page 27: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/27.jpg)
Contoh:<html>
<head>
<title>
Membuat Frame Vertikal
</title>
</head>
<frameset cols="25%,*">
<frame name="kiri"
src="kiri.html" scrolling=“yes">
<frame name="kanan“
src="kanan.html">
</frameset>
</html>
Tampilan:
![Page 28: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/28.jpg)
Contoh:<html>
<head>
<title>
Membuat Frame Horisontal </title>
</head>
<frameset rows="40%,*">
<frame name="atas" src="atas.html“
scrolling="no">
<frame name="bawah“
src="bawah.html">
</frameset>
</html>
Tampilan:
![Page 29: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/29.jpg)
Contoh:<html>
<head>
<title>
Membuat Frame Vertikal-Horisontal </title>
</head>
<frameset rows="20%,*">
<frame name="atas" src="atas.html“
scrolling="no">
<frameset cols="40%,*">
<frame name="kiri"
src="kiri.html">
<frame name="kanan"
src="kanan.html">
</frameset>
</frameset>
</html>
Tampilan:
![Page 30: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/30.jpg)
Beberapa entitas (atau simbol) tidak dapat ditulis langsung di halaman web karena tidak ada di keyboard. Oleh karena itu diperlukan kombinasi entitas.
Terdapat tiga bagian untuk setiap entitas, yaitu:i. Dimulai dengan sebuah ampersand [“&”]
ii. Diberi nama entitas, misalnya [“copy”]
iii. Diakhiri dengan semicolon [“;”]
![Page 31: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/31.jpg)
Contoh:<html>
<head><title>Entitas karakter</head>
<body>
Simbol "copyright" : "©" <br/>
Simbol "alpha" : "α" <br/>
</body>
</html>
Tampilan:
![Page 32: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/32.jpg)
Spasi tambahan (“ “) dapat dibuat dengan kombinasi entitas
Contoh:<html>
<head><title>Spasi Tambahan</title></head>
<body>
<p>Setelah ini ada lima spasi tambahan:" ".
Sekarang lanjut kalimat lagi.</p>
</body>
</html>
Tampilan:
![Page 33: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/33.jpg)
Kombinasi entitas untuk menampilkan simbol“<“ dan “>” di dalam halaman web:
▪ “<“ < [less than]
▪ “>” > [greater than]
Contoh:<html>
<head><title>Simbol "<" dan ">"</title></head>
<body><p>Karakter "Kurang dari" : "<" <br/> Karakter "Lebih dari" : ">"</p>
</body>
</html>
Tampilan:
![Page 34: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/34.jpg)
Digunakan untuk men-supply informasi kepada search engines yang tidak akan terlihat oleh pengunjung web kecuali jika mereka menampilkan kode dari halaman HTML yang diaksesnya.
Penggunaan meta tag akan membuat search bot yang ada mengenali website tersebut sehingga dapat tampil di daftar search engine dan tentu saja mudah dicari oleh pengguna Internet
![Page 35: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/35.jpg)
Fungsi:Meletakkan kata kunci (keyword) dari website
Format:<head><meta name="keywords" content=“macam_macam keyword yang
digunakan" /></head>
![Page 36: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/36.jpg)
Fungsi:menunjukkan deskripsi singkat dari halaman web kepada search engine.
Format:<head><meta name="description" content=“deskripsi_yang_diinginkan" /></head>
Tag description dan keywords sangat mirip. Jika tidak ada kecocokan/relasi antara nilai dua tag ini mungkin saja situs anda tidak diproses oleh search engine, jadi anda harus cerdas menentukan keyword dan deskripsinya.
![Page 37: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/37.jpg)
Fungsi:Untuk mencatat kapan update terakhir dilakukan terhadap situs web.
Format:<head>
<meta name="revised" content=“tanggal_update_terakhir" />
</head>
![Page 38: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/38.jpg)
Fungsi:
Digunakan untuk keperluan redirect. Dengan meta tag refresh, pengunjung akan di-redirect (atau di-refresh) ke halaman web yang telah ditentukan.
Format:<head>
<meta http-equiv="refresh" content=“jumlah selang detik untuk me-refreshhalaman; url=…“ />
</head>
![Page 39: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/39.jpg)
• Standar penulisan: <embed src=“file_media” />
• Atribut-atribut:
• Fungsi:
menyisipkan media (misalnya musik) ke dalam halaman web
Atribut Fungsi
width Menentukan lebar dari player
height Menentukan tinggi dari media player
hidden=["yes"|"no"] Jika atribut ini bernilai true, maka media player tidak ditampilkan.
autostart Menentukan apakah file musik dijalankan secara otomatis saathalaman web dimuat oleh web browser
loop Mengatur apakah file musik dijalankan berulang atau hanya cukup satu kali
volume Mengatur volume dari file musik, range nilainya 0 sampai 100
![Page 40: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/40.jpg)
Tampilan:
Contoh:<html>
<head>
<title> Penggunaan Embed (Musik) </title>
</head>
<body>
<embed src="flourish.mid" width=”360” height=”160” hidden="false"/>
</body>
</html>
![Page 41: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/41.jpg)
Pemakaian Tabel dalam halaman web dapat membuat informasi tampil secara terstruktur, ringkas dan mudah dibaca serta membuat tampilan web menjadi lebih menarik.
Form digunakan untuk menerima informasi atau meminta umpan balik dari user dan memproses informasi tersebut di server.
![Page 42: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/42.jpg)
Untuk menampilkan beberapa dokumen HTML secara sekaligus dalam satu jendela web browser adalah dengan menggunakan Frame.
Meta Tag digunakan untuk men-supply informasi kepada search engines.
Untuk menuliskan beberapa entitas karakter HMTL yang tidak terdapat di keyboard, diperlukan kombinasi entitas dengan format tertentu.
Oleh karena web browser hanya akan mengenal dan memformat satu spasi antar kata meskipun di dalam kode HTML telah dibuat lebih dari satu spasi, maka kombinasi entitas “ ” digunakan untuk menampilkan spasi tambahan
Simbol “<“ dan “>” adalah simbol pembuka dan penutup tag. Untuk menampilkannya di dalam web browser dapat dengan menggunakan kombinasi entitas “<” dan “>”.
Embed Tag digunakan untuk menyisipkan media (misalnya musik) ke dalam halaman web.
![Page 43: HTML (Table, Form, Frame, Hyperlink)repository.unimal.ac.id/292/1/pertemuan-3-html.pdfAtribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height](https://reader034.vdocuments.net/reader034/viewer/2022052210/6077d670863c4e50da002f36/html5/thumbnails/43.jpg)
Untuk menampilkan beberapa dokumen HTML secara sekaligus dalam satu jendela web browser adalah dengan menggunakan Frame.
Meta Tag digunakan untuk men-supply informasi kepada search engines. Untuk menuliskan beberapa entitas karakter HMTL yang tidak terdapat di
keyboard, diperlukan kombinasi entitas dengan format tertentu. Oleh karena web browser hanya akan mengenal dan memformat satu spasi
antar kata meskipun di dalam kode HTML telah dibuat lebih dari satu spasi, maka kombinasi entitas “ ” digunakan untuk menampilkan spasi tambahan
Simbol “<“ dan “>” adalah simbol pembuka dan penutup tag. Untuk menampilkannya di dalam web browser dapat dengan menggunakan kombinasi entitas “<” dan “>”.
Embed Tag digunakan untuk menyisipkan media (misalnya musik) ke dalam halaman web.