Belajar HTML (Part 2)
Hai teman
Sebelumnya saya
memposting artikel tentang langkah – langkah membuat HTML dipostingan ini saya
melanjutkan langkah – langkah membuat HTML (Part 2) cara membuat tabel, memberi
warna pada tabel, menambahkan link, dan gambar dengan menggunakan HTML.
TAG (table)
Struktur : tabel terdiri dari baris dan kolom dalam HTML
<table> terdiri dari <tr>dan <td>/<th>
<tr> : tabel row (baris tabel)
<td>: tabel data (isi tabel/kolom)
<th>: tabel heading (judul kolom)
Struktur tag Table <table>
<table>
<tr>
<th>.......</th>
</tr>
</table>
atau
<table>
<tr>
<td>..............</td>
</tr>
<tr>
<td>...............</td>
<td>.............. </td>
</tr>
</table>
3. Buka Notepad
4. Isikan struktur dasar html pada file latihantabel.html
5. Tambahkan coding pembuatan tabel
Contoh Coding :
<html>
<head>
<tittle>Latihan Buat Tabel</tittle>
</head>
<body>
<table>
<tr>
<th>NO</th>
<th>NIM</th>
<th>NAMA</th>
<th>KELAS</th>
</tr>
<td>1.</td>
<td>12173488</td>
<td>ROBIN</td>
<td>12.1F.21</td>
</tr>
</table>
6. Simpan data di dalam folder lat 1 dan simpan dengan nama : latihantabel.html
7. Simpan dan lihat hasilnya di browser
Attribute html
<table>, <tr>, <th>, <td>
Penulisan Attribute HTML:
<nama_tag nama_attribute:"isi_attribute">
ex: <table width="400">
align = perataan (center,left,right)
ex: <table align="center">
width = lebar (diisi dengan angka satuannya piksel/px/%)
ex: <table width="500">
<table width="30%">
border = garis tepi (diisi dengan angka satuannya piksel/px)
ex: <table border="5">
cellspacing = jarak garis tepi dalam dengan garis tepi luar
ex: <table cellspacing="5">
cellpadding = jarak garis tepi dalam dengan teks
ex: <table cellpadding="2">
bgcolor = background color tabel
ex: <table bgcolor="blue">
rowspan = menggabungkan baris
ex: <td rowspan="3">
colspan = menggabungkan kolom
ex: <table colspan="2">
Contoh coding :
<html>
<head>
<tittle>Latihan Buat Tabel</tittle>
</head>
<body>
<table border="2" align="center" width="750" bgcolor="red">
<tr>
<th>NO</th>
<th>NIM</th>
<th>NAMA</th>
<th>KELAS</th>
</tr>
<td>1.</td>
<td>12143488</td>
<td>ROBIN</td>
<td>12.1F.21</td>
</tr>
</table>
Menggabungkan baris,kolom juga menambahkan 2 warna
Membuat Hyperlink/link
Tag Anchor <a>
Attribute Tag Anchor
1. href = referensi (alamat web/nama file)
ex: <a href= "index.html">Home</a>
2. target = membuka tab baru di browser
ex: <a target= "_blank">Home</a>
3. title = tooltip (muncul keterangan saat linkdi sorot)
ex: <a title= " Halaman Beranda">Home</a>
bentuk codingan :
</table>
<br>
<br>
<a href="percobaan.html"tittle="Halaman Percobaan"target="_blank">pergi ke percobaan </a>
Menampilkan gambar menggunakan HTML
Tag image <img/>
Attribute Tag Image:
1. src = source (alamat gambar)
2. title = tooltip (muncul keterangan saat gambar di sorot)
3. height = tinggi gambar
4. width = lebar gambar
5. alt = keterangan pengganti jika gambar tidak berhasil di load
ex : <imgsrc="op1.png"title ="Gambar One Piece"height="300"width="300"alt="Gambar One Piece"/>
Simpan gambar difolder lat 1
Simpan gambar difolder lat 1
Hasil coding
Oke selamat mencoba dan berhasil, semoga bermanfaat :)
SEE THE NEXT POST!!
Monkey D Luffy
Komentar
Posting Komentar