Membuat Layout Web Mengunakan Table

Membuat Layout Web Mengunakan Table
Page 1
Membuat Layout Web Mengunakan Table
ILMUKOMPUTER.ID.AI
By
PRASETYO UTOMO
INFO :
Web : http://www.prasetyo771.wordpress.com
Facebook : facebook.com/tyo777
No Hp : 08982069172
Email : [email protected]
Page 2
Membuat Layout Web Mengunakan Table
BAB 1 Pendahuluan
1. Pengenalan HTML
HTML kependekan dari hypertext markup language. HTML adalah sebuah bahasa komputer.
Bahasa komputer yang bisa dipahami oleh semua komputer, yang dipakai di dunia www
(world wide web) atau dunia Internet.
Karena HTML merupakan sebuah bahasa, maka HTML itu pasti bisa berbicara. Dan kalau
bisa berbicara berarti bisa memberi perintah. Pada HTML, memberi perintah itu sudah
aturannya.
Perintah HTML digunakan untuk menampilkan tampilan teks, gambar, dan sebagainya
sesuai dengan keinginan kita, dan juga untuk menampilkan fungsi-fungsi tertentu, misalnya
fungsi Link. Link yang dimaksud adalah jika kita mengklik kata/kalimat/gambar pada
tampilan halaman website tertentu, tiba-tiba muncul tampilan halaman website lainnya.
Itulah gambaran sederhana Link.
2. Fungsi HTML
 HTML adalah dasar pembuatan website. Orang yang bisa membuat website dengan
DREAMWEAVER, belum tentu bisa membuat website dengan mengetikkan perintahperintah HTML-nya. Tetapi, orang yang sudah mahir menggunakan perintah-perintah
HTML, dijamin akan bisa dengan mudah mempelajari penggunaan DREAMWEAVER atau
software pembuat website lainnya dengan cepat.
 Belajar HTML itu mudah sekali. Dan, tidak ada salahnya jika kita berbuat sesuatu secara
profesionaldan terlihat canggih, meskipun kita adalah orang amatir.
 Membuat website dengan mengetikkan perintah-perintah HTML dapat dilakukan
dimana saja dan kapan saja tanpa tergantung pada jenis software tertentu. Cukup
dengan mengunakan fasilitas pengelolah kata yang paling sederhana sekalipun, seperti
notepad (pada windows), dan vi (pada linux), kita bisa mendesain sebuah website.
Prasetyo771.wordpress.com
Prasetyo Utomo
Page 3
Membuat Layout Web Mengunakan Table
BAB 2 HTML Dasar
1. Membuat Teks Heading
Heading merupakan sintaks HTML yang memiliki fungsi untuk membuat tag
header. Contoh tag Header adalah <h1>,<h2>,<h3>,<h4>, dan <h5>. Sintaks
HTML :
Coding
Output
Prasetyo771.wordpress.com
Prasetyo Utomo
Page 4
Membuat Layout Web Mengunakan Table
2. Menampilkan Gambar
Img merupakan sintaks HTML yang berfungsi untuk membuat tag <img> yang digunakan
untuk menampilkan gambar jpg, gif, png, dan lain-lain.
Sintaks HTML :
<img src=“gambarku.jpg”>
3. Membuat Link
Link adalah sintaks HTML yang berfungsi Untuk Berpindah halaman pada website.
Contoh Sintaks HTML :
<a href=http://ilmukomputer.id.ai/>Klik Disini Untuk Mengunjungi</a>
Prasetyo771.wordpress.com
Prasetyo Utomo
Page 5
Membuat Layout Web Mengunakan Table
4. Membuat Link Dengan Gambar
Sebuah gambar utuh mengandung link, maka sistem penulisan kode HTML-nya akan sama
dengan sistem tadi.
<a href=“ilmukomputerku.id.ai/”><img src=“gambarku.jpg”></a>
Prasetyo771.wordpress.com
Prasetyo Utomo
Page 6
Membuat Layout Web Mengunakan Table
Latihan
Anda adalah seorang programer yang menyediakan jasa pembuatan web, ada
satu pelanggan anda untuk memakai jasa anda. Dia ingin membuat daftar harga
dengan Gambar yang diberi Link, Buatlah seunik mungkin.
Contoh :
Daftar Menu Makanan Dan Minuman
Sop Daging Sapi
Sate Kambing Spesial
Nasi Goreng Spesial
Prasetyo771.wordpress.com
Prasetyo Utomo
Page 7
Membuat Layout Web Mengunakan Table
BAB 3 Membuat Layout Web Dengan Table
1. Membuat table dengan HTML
Dalam pembuatan Website, tabel memiliki fungsi yang tidak kalah penting
dengan tag-tag HTML lainnya. Pertama, tabel berfungsi untuk menampilkan informasi
secara terstruktur, ringkas, dan mudah dibaca. Karena itu, penyampaian informasi
melalui tabel sangat disukai banyak orang. Kedua, tabel juga berfungsi untuk mengatur
tampilan Website agar lebih menarik.
Karena begitu besar manfaat tabel, fungsi pembuatan tabel beserta tip dan
triknya sangat perlu diketahui oleh pembuat Website, khususnya untuk mengatur
tampilan Website yang akan dipelajari pada bab-bab selanjutnya.
A. Tag Utama Yang Digunakan Untuk Membuat Tabel
Tag
Keterangan
TR
Table Row, memiliki tag awal <TR> dan tag akhir </TR>, berfungsi untuk
menyatakan suatu baris di dalam tabel. Posisi default teks di kiri.
TD
Table Data, memiliki tag awal <TD> dan tag akhir </TD>, berfungsi
untuk menyatakan data/isi dari tabel. Posisi default teks di kiri.
TH
Table Header, memiliki tag awal <TH> dan tag akhir </TH>, berfungsi
untuk memberi judul baris/kolom dalam suatu tabel. Table Header
ditampilkan dalam bentuk cetakan tebal dan posisi default teks di
tengah.
Page 8
Membuat Layout Web Mengunakan Table
B. Coding Tabel HTML
<table border=“1”>
<tr>
<td align="center" >Judul
Ke-1</td>
<td align="center" >Judul
Ke-2</td>
</tr>
<tr>
<td>Ini Kolom 1</td>
<td>Ini Kolom 2</td>
</tr>
</table>
Prasetyo771.wordpress.com
Prasetyo Utomo
Page 9
Membuat Layout Web Mengunakan Table
2. Membuat Layout Web Dengan Table
Apa anda pernah melihat website terbuat dari Tabel??, atau anda tertipu oleh
tampilannya yang seolah-olah menggunakan CSS. Disini Kita akan membuat layout
Website menggunakan Tabel.
Caranya sangat mudah dibandingkan dengan membuat layout web dengan CSS, tetapi
disini kita tetap menggunakan CSS untuk mempercantik tampilan/Layout
Step 1
1.
2.
3.
4.
Klik Start pada windows, yang berada di pojok kiri bawah.
Pilih menu Programs.
Pilih Accessories.
Tampak ada kata Notepad. Klik. Lalu muncul seperti gambar 3.1
Prasetyo771.wordpress.com
Prasetyo Utomo
Page
10
Membuat Layout Web Mengunakan Table
Step 2
Buat Table dengan struktur 1 kolom diatas,1 kolom dibawah, 3 kolom di tengah bawah, 1
kolom di bawah.
Lihat Gambar 3.0
Prasetyo771.wordpress.com
Prasetyo Utomo
Page
11
Membuat Layout Web Mengunakan Table
<html>
<head>
<title>Belajar Tabel</title>
</head>
<body>
<table align="center" border="1" width="1000"
<tr>
<td align="center" height="125" colspan="3">HEADER</td>
</tr>
<tr>
<td align="center" colspan="3">MENU</td>
</tr>
<tr>
<td align="center" height="125" >Ini Konten/Menu Di Kiri</td>
<td align="center" height="125" >Ini Konten</td>
<td align="center" height="125" >Ini Konten/Menu Di Kanan</td>
</tr>
<tr>
<td height="50" align="center" colspan="3">FOOTER</td>
</tr>
</table>
</body>
</html>
Prasetyo771.wordpress.com
Atribut Yang
Ada
Prasetyo Utomo
Page
12
 Atribut
align
 Atribut
border
 Atribut
width
 Atribut
Height
 Atribut
Colspan
Membuat Layout Web Mengunakan Table
Pengertian Atribut
 Atribut Align = Untuk mengatur posisi atau letak sebuah teks atau




sebuah tampilan, biasanya tag ini diletakkan pada <table
align=“center”>…</table>. Ada juga tata letaknya adalah Center,
Right (Kanan), Left (Kiri).
Atribut Border = Tag ini berfungsi untuk mengatur ketebalan garis
pada tabel yang diletakkan pada <table border=“1”>…</table>. “1”
ukurannya bisa di ubah tidak hanya 1.
Atribut Width = Tag ini berfungsi untuk mengatur Lebar sebuah Tabel
atau tampilan seperti gambar, Dll. Tag Ini biasa di letakkan pada <table
width=“1000”>…</table> Atau <img src=“gambarnya.jpg”
width=“500”>
Atribut Height = Tag ini berfungsi untuk mengatur tinggi sebuah tabel
maupun gamba, Tag ini biasa diletakkan pada <table height=“500”
>…</table> Atau <img src=“gambarnya.jpg” height=“500”>.
Atribut Colspan = Tag Colspan berfungsi untuk mengatur sel pada
tabel jika tabel mempunyai 3 kolom di atasnya ada kolom yang
meruupakan header sebuah layout web, Pasti tampilannya akan
sejajar dengan kolom baris kedua. Dengan menggunakan Colspan
anda bisa merubah ukurannya menjadi lebar.
Prasetyo771.wordpress.com
Prasetyo Utomo
Page
13
Membuat Layout Web Mengunakan Table
Mempercantik Tabel Dengan CSS
Apakah anda kurang puas dengan tabel yang di buat oleh anda??, sekarang saya
akan berbagi caranya.
1. Buka file yang tadi ada coding layoutnya.
2. Tambahkan source di dalam Tag <table .. > style=“border:1px; solid
#000000;” Contohnya : <table style=“border:1px; solid
#000000;”>…</table>
3. Bila anda ingin merubah garis tabel menjadi Seperti Ini
4. Gunakan perintah border-radius:2px; pada style
Prasetyo771.wordpress.com
Prasetyo Utomo
Page
14
Membuat Layout Web Mengunakan Table
Semoga Bermanfaat untuk Anda
Kunjungi Web Kami Di : HTTP://WWW.PRASETYO771.WORDPRESS.COM/
Page
15