Pertemuan 3 HTML

PERTEMUAN 3
Fungsi:
Menampilkan informasi secara terstruktur,
ringkas dan mudah dibaca
Mengatur tampilan homepage agar lebih
menarik
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
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
Judul tabel: <caption>

Judul baris/kolom: <th> (table header)
<html>
<head>
</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>
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:
Atribut: width dan height

ukuran % (max 100%)
ukuran pixel
<html>
<head>
Tampilan:
</head>
<body>
<table border=1 bgcolor="green" width=300 height=100>
<tr height=30>
<td>Baris 1 Kolom 1</td>
</tr>
<tr height=70>
<td background="./images.jpg">
Baris 2 Kolom 2 <br><br> Background bagus</td>
</tr>
</table>
</body>
</html>
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:
Menggabungkan
Menggabungkan
Contoh Tampilan:
bbrp kolom menjadi 1: atribut colspan

bbrp kolom menjadi 1: atribut rowspan
Script HTML:
<table border="1" bgcolor="white" align="center">

<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>
<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>
<td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td>
</tr>
</table>
atribut cellpading: mengatur spasi antara border

dengan tulisan
atribut cellspasing: mengatur spasi antar 2 buah sel
Contoh Tampilan:
Script HTML:
<table border="1" bgcolor="white" align="center cellpadding="10"

cellspacing="12">
<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>
<td align="left" valign="middle" width="180" height="40">Amin A.
Angkasa</td>
</tr>
<td align="left" valign="middle" width="180" height="40">Beni B.
Bernardi</td>
</tr>
</table>
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
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)
GET
POST
Tag: <input>
Atribut-atribut:
Atribut
type=["text"|"password"]
name
value
Fungsi
Menentukan jenis field masukan
Text, submit, password
Menentukan nama untuk field sehingga dapat
dirujuk nantinya
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
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>
Tampilan:
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
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:
Fungsi:
Untuk memberi beberapa pilihan kepada user
Contoh:
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:
Fungsi:
Untuk memberi (hanya) satu pilihan kepada user
Contoh:
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:
Fungsi:
Memberikan menu pilihan kepada user (cara kerjanya seperti

radio button yang hanya mengijinkan user untuk memilih 1
pilihan saja)
Contoh:
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:
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
Menentukan fitur word wrapping
Wrap=["off"|"virtual"|"physical"]
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>
Tampilan:
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
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>
Contoh:
<html>
<head>
<title>
Membuat Frame Vertikal
</title>
</head>
<frame name="kiri"
src="kiri.html" scrolling=yes">
<frame name="kanan
src="kanan.html">
</frameset>
</html>
Tampilan:
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:
Contoh:
<html>
<head>
<title>
Membuat Frame Vertikal-Horisontal </title>
</head>
<frameset rows="20%,*">
<frame name="atas" src="atas.html
scrolling="no">
<frame name="kiri"
src="kiri.html">
<frame name="kanan"
src="kanan.html">
</frameset>
</frameset>
</html>
Tampilan:
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 [;]
Contoh:
<html>
<head><title>Entitas karakter</head>
<body>
Simbol "copyright" : "©" <br/>
Simbol "alpha" : "α" <br/>
</body>
</html>
Tampilan:
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:
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:
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
Fungsi:
Meletakkan kata kunci (keyword) dari website
Format:
<head>
<meta name="keywords" content=macam_macam
keyword yang digunakan" />
</head>
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.
Fungsi:
Untuk mencatat kapan update terakhir dilakukan terhadap
situs web.
Format:
<head>
<meta name="revised"
content=tanggal_update_terakhir" />
</head>
Fungsi:
Digunakan untuk keperluan redirect. Dengan meta
tag refresh, pengunjung akan di-redirect (atau direfresh) ke halaman web yang telah ditentukan.
Format:
<head>
<meta http-equiv="refresh" content=jumlah selang detik
untuk me-refresh halaman; url= />
</head>
Fungsi:
menyisipkan media (misalnya musik) ke dalam halaman web
Standar penulisan:
<embed src=file_media />
Atribut-atribut:
Atribut
Fungsi
width
Menentukan lebar dari player
height
Menentukan tinggi dari media player
hidden=["yes"|"no"
]
autostart
Jika atribut ini bernilai true, maka media player tidak ditampilkan.
loop
volume
Menentukan apakah file musik dijalankan secara otomatis saat

halaman web dimuat oleh web browser
Mengatur apakah file musik dijalankan berulang atau hanya cukup
satu kali
Mengatur volume dari file musik, range nilainya 0 sampai 100
Contoh:
<html>
<head>
<title> Penggunaan Embed (Musik) </title>
</head>
<body>
<embed src="flourish.mid" width=360 height=160 hidden="false"/>
</body>
</html>
Tampilan:
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.
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.
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.

Pertemuan 3 HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pertemuan 3 HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

PERTEMUAN 3

Menentukan ukuran border/garis tabel

Menentukan lebar tabel

Menentukan tinggi tabel

Menentukan background tabel

Menentukan gambar yang digunakan untuk

Untuk mengatur warna suatu sel dalam tabel

Mengatur bentuk perataan horisontal

Mengatur bentuk perataan vertikal

Menggabungkan beberapa baris

Menggabungkan beberapa kolom

Cellspacing dan cellpadding

Mengatur spasi antar sel dan spasi dalam sel

Tag yang diperlukan:

Judul tabel: <caption>

Atribut: width dan height

horisontal: atribut align utk <caption>, <tr>, <td> dan <th>

<table border="1" align="center">

bbrp kolom menjadi 1: atribut colspan

<table border="1" bgcolor="white" align="center">

atribut cellpading: mengatur spasi antara border

<table border="1" bgcolor="white" align="center cellpadding="10"

Metode pengiriman data ke file tujuan (POST atau GET)

Aksi yang akan dilakukan jika user menekan tombol Submit

Memerikan nama tiap masukan

Memberikan nilai suatu masukan

Tipe form yang akan digunakan

POST dan GET memiliki

mengatur lebar field secara horisontal, berapa huruf

menentukan jumlah maksimum huruf (karakter)

Tombol Submit: digunakan ketika user

Memberikan menu pilihan kepada user (cara kerjanya seperti

Menetukan lebar kotak komentar

Menentukan tinggi kotak

Membuat frame vertikal dengan lebar kolom tertentu

Membuat frame horisontal dengan tinggi baris tertentu

Memasukkan dokumen HTML ke dalam frame

Menentukan fitur scrolling

Membuat frame tidak dapat diubah ukurannya

Memberi nama untuk frame

Menentukan batas antara frame

Frame dapat diberi nama dan diatur targetnya

Potongan kode file menu.html:

Beberapa entitas (atau simbol) tidak

Spasi tambahan ( ) dapat dibuat dengan

Kombinasi entitas untuk menampilkan

Digunakan untuk men-supply informasi kepada

Meletakkan kata kunci (keyword) dari website

Tag description dan keywords sangat mirip.

Menentukan lebar dari player

Menentukan tinggi dari media player

Menentukan apakah file musik dijalankan secara otomatis saat

Tabel dalam halaman web

Untuk menampilkan beberapa dokumen HTML secara

Untuk menampilkan beberapa dokumen HTML secara

Anda mungkin juga menyukai