Membuat Layout Web Mengunakan Table

Ukuran: px

Mulai penontonan dengan halaman:

Download "Membuat Layout Web Mengunakan Table"

Yulia Pranata
6 tahun lalu
Tontonan:

1 Page 1

2 INFO : ILMUKOMPUTER.ID.AI By PRASETYO UTOMO Web : Facebook : facebook.com/tyo777 No Hp : prasetyoutomo771@gmail.com Page 2

3 1. Pengenalan HTML BAB 1 Pendahuluan 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. Page 3

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

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.

5 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= Disini Untuk Mengunjungi</a> Page 5

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

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

8 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 TH Table Data, memiliki tag awal <TD> dan tag akhir </TD>, berfungsi untuk menyatakan data/isi dari tabel. Posisi default teks di kiri. 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

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

2. Membuat Layout Web Dengan Table Apa anda pernah melihat website terbuat dari Tabel??, atau anda tertipu oleh tampilannya yang seolah-olah menggunakan CSS.

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

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

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

13 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. Page 13

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

15 Semoga Bermanfaat untuk Anda Kunjungi Web Kami Di : Page 15

dokumen-dokumen yang mirip

HTML (HyperText Markup Language)

HTML (HyperText Markup Language) IMS HTML HyperText Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah