BSI Purwokerto - Belajar Membuat Web (Part 2)
Ini kelanjutan rangkuman dari "Belajar Membuat Web (Part 1)"
TAG TABLE
<table>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
Tr = table row => baris
Td = table data =>
kolom
ATTRIBUTE HTML
=>pemberi informasi tambahan kepada tag html
Struktur :
<nama_tag nama_attribute=”isi_attribute”>
Contoh :
<table border=”1”align=”center”>
Tag attribute
1. Buka XAMPP
(aktifkan localhost dan mysql)
2. buat file
baru dengan nama : coba1.html
3. ketikkan
struktur dasar html ke dalam file tsb.
<html>
<head>
<title>MEMBUAT TABLE 1</title>
</head>
<body>
<table
border="10"align="center">
<tr>
<td>NAMA</td>
<td>KELAS</td>
<td>NILAI</td>
</tr>
<tr>
<td>IRMA</td>
<td>12.2C.21</td>
<td>100</td>
.....
</tr>
</table>
</body>
</html>
4. simpan file
dan lihat hasilnya di browser.
Attribute tag
table – tr – td
Align => perataan
Border => garis tepi
Cellpadding => jarak garis tepi dalam dengan
text.
Contoh :
<table cellpadding=”2”>
Cellspacing
=> jarak garis tepi dalam dengan garis tepi luar.
Contoh :
<table cellspacing=”4”>
Width => lebar tabel
Contoh :
<table width=”500”>
Rowspan => menggabungkan baris
Contoh : <td
rowspan=”3”>
Colspan => menggabungkan kolom
Contoh : <td
colspan=”5”>
<html>
<head>
<title>MEMBUAT TABLE 1</title>
</head>
<body>
<table
border="10"align="center"
cellpadding="3"
cellspacing="10" width="800">
<tr>
<td
rowspan="2">NAMA</td>
<td>KELAS</td>
<td>NILAI</td>
</tr>
<tr>
<td>12.2C.21</td>
<td>100</td>
</tr>
</table>
</body>
</html>
5. Terapkan
attribute-attribute tsb di atas ke dalam file coba1.html
6. Membuat link
dalam halaman web.
<a href=”...”>Coba</a>
Contoh :
<a
href=”http://bsi.ac.id/”>BSI</a>
<a href=”coba.html”>Coba</a>
Cara membuat link
a=anchor
attribute tag
<a>
href :
reference (bisa alamat web/nama file)
title :
keterangan saat kursor diarahkan ke link
contoh : <a
title=”Halaman Profile”>
target :
membuka tab baru di browser
contoh : <a
target=”_blank”>
7. Menampilkan
gambar ke halaman web.
- Cari salah satu gambar, nanti ubah
nama gambarnya menjadi -> image
-Copy gambar tsb ke dalam folder
latihan 1.
-src = source =
alamat gambar
<img
scr=”image.PNG”/>
-width = lebar
gambar
<img
width=”300”>
-height=tinggi
gambar
<img
height=”200”>
<html>
<head>
<title>MEMBUAT TABLE 1</title>
</head>
<body>
<table
border="10"align="center"
cellpadding="3"
cellspacing="10" width="800">
<tr>
<td
rowspan="2">NAMA</td>
<td>KELAS</td>
<td>NILAI</td>
</tr>
<tr>
<td
colspan="2">12.2C.21</td>
</tr>
</table>
<a href=”coba.html”
target="_blank"
title="membuka
file coba.html">Coba</a>
<br>
<img scr=”image.PNG” />
</body>
</html>
Komentar
Posting Komentar