BSI Purwokerto - Belajar HTML (Part 2)

PERTEMUAN 3 – 12.2F.21 26 MARET 2018
MEMBUAT TABEL MENGGUNAKAN HTML

TAG <table>
Struktur :
Tabel terdiri dari baris dan kolom
Dalam HTML :
<table> terdiri dari <tr> dan <td>/<td>
<tr> adalah table row (baris table)
<td> adalah table data (isi table)
<th> adalah table heading (judul kolom)
Contoh penerapannya sbb :

Ini artinya tabel terdiri dari 2 baris dan 2 kolom.
ATTRIBUTE HTML <table>,<tr>,<td>,<th>
Penulisan Attribute HTML :
<nama_tag nama_attribute=”isi_attribute”>
Contoh: <table width=”400”

Align = Perataan(center,left,right)
Contoh: <table align=”center”> rata tengah

Width = Lebar (satuan px/piksel/%)
Contoh: <table width=”500px”>
<table width=”30%”>

Border = Garis Tepi (satuan piksel/px)
Contoh: <table border=”5px”>

MENGUBAH WARNA TABEL
<tr (spasi) bgcolor=”grey”> = dalam satu baris (untuk warna bisa langsung menggunakan nama warna dalam b.inggris)
<table bgcolor=”grey”> (semua baris)

Cellspacing = jarak garis tepi dengan garis luar
Contoh: <table cellspacing=”2”>

Cellpadding= jarak garis tepi dalam dengan teks
Contoh : <table cellpadding=”2”>

Rowspan = menggabungkan baris
Contoh : <td rowspan=”3”>

Colspan = menggabungkan kolom
Contoh : <td colspan=”2”>

Target =”_blank” = agar tampilan menjadi di new tab
Title =”Halaman Percobaan”= untuk memunculkan tulisan ketika disorot.
Jika ingin menambahkan gambar, pastikan gambar tersebut berada pada folder yang sama dengan file.html Anda.


MEMBUAT HYPERLINK/LINK

Tag Anchor <a>……</a>
Attribute tag anchor
Href = referensi (alamat web/nama file)
Contoh : <a href=”index.html”>Home</a>
            <a href=http://bsi.ac.id/>Home</a>

Title = tooltip (muncul keterangan saat link di sorot)
Contoh : <a title=”Halaman Beranda”>Home</a>

MENAMPILKAN GAMBAR MENGGUNAKAN HTML
Tag Image <img>
Attribute tag image
Src= source (alamat gambar)
Title = tooltip muncul keterangan saat gambar disorot
Height = Tinggi
Width = Lebar
Alt = keterangan pengganti gambar tidak berhasil diload
Contoh : <img src=”mie ayam.jpg” title=”gambar mie ayam” height=”300” width=”500” alt=”gambar mie ayam”/>

Berikut ini cara penulisan dan hasilnya :

Untuk keterangan kegunaan scriptnya sudah saya jabarkan diatas

Sekian materi pertemuan 3 Web Programing.