Membuat Layout Web Mengunakan Table memberi judul baris/kolom dalam suatu tabel. Table Header...

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]


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 perintah-

perintah 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


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



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 :

3. Membuat Link

Link adalah sintaks HTML yang berfungsi Untuk Berpindah halaman pada website.

Contoh Sintaks HTML :

<img src=“gambarku.jpg”>

<a href=http://ilmukomputer.id.ai/>Klik Disini Untuk Mengunjungi</a>



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>



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



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.


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>



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. Klik Start pada windows, yang berada di pojok kiri bawah.

2. Pilih menu Programs.

3. Pilih Accessories.

4. Tampak ada kata Notepad. Klik. Lalu muncul seperti gambar 3.1



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



<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>

Atribut Yang Ada

Atribut

align

Atribut

border

Atribut

width

Atribut

Height

Atribut

Colspan



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.



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



Semoga Bermanfaat untuk Anda

Kunjungi Web Kami Di : HTTP://WWW.PRASETYO771.WORDPRESS.COM/

Membuat Layout Web Mengunakan Table memberi judul baris/kolom dalam suatu tabel. Table Header...

Documents

Transcript of Membuat Layout Web Mengunakan Table memberi judul baris/kolom dalam suatu tabel. Table Header...