Membuat Layout Web Mengunakan Table

Membuat Layout Web Mengunakan Table

Page 1


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


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


BAB 2 HTML Dasar 1. Membuat Teks Heading Heading merupakan sintaks HTML yang memiliki fungsi untuk membuat tag header. Contoh tag Header adalah
,
,
,
, dan
. Sintaks HTML :

Coding

Output


Prasetyo Utomo

Page 4


2. Menampilkan Gambar Img merupakan sintaks HTML yang berfungsi untuk membuat tag 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 : Klik Disini Untuk Mengunjungi


Prasetyo Utomo

Page 5


4. Membuat Link Dengan Gambar Sebuah gambar utuh mengandung link, maka sistem penulisan kode HTML-nya akan sama dengan sistem tadi.


Prasetyo Utomo

Page 6


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


Prasetyo Utomo

Page 7


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 dan tag akhir , berfungsi untuk menyatakan suatu baris di dalam tabel. Posisi default teks di kiri.

TD

Table Data, memiliki tag awal dan tag akhir , berfungsi untuk menyatakan data/isi dari tabel. Posisi default teks di kiri.

TH

Table Header, memiliki tag awal dan tag akhir , berfungsi untuk memberi judul baris/kolom dalam suatu tabel. Table Header ditampilkan dalam bentuk cetakan tebal dan posisi default teks di tengah.

Page 8


B. Coding Tabel HTML

Judul Ke-1 Judul Ke-2

Ini Kolom 1 Ini Kolom 2


Prasetyo Utomo

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


Prasetyo Utomo

Page 10


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


Prasetyo Utomo Page 11


Belajar Tabel

HEADER

MENU

Ini Konten/Menu Di Kiri Ini Konten Ini Konten/Menu Di Kanan

FOOTER


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 …
. Ada juga tata letaknya adalah Center, Right (Kanan), Left (Kiri). Atribut Border = Tag ini berfungsi untuk mengatur ketebalan garis pada tabel yang diletakkan pada …
. “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 …
Atau Atribut Height = Tag ini berfungsi untuk mengatur tinggi sebuah tabel maupun gamba, Tag ini biasa diletakkan pada …
Atau . 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 style=“border:1px; solid #000000;” Contohnya :
…
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/

Page 15

HEADER
MENU
Ini Konten/Menu Di Kiri	Ini Konten	Ini Konten/Menu Di Kanan
FOOTER

Membuat Layout Web Mengunakan Table

Recommend Documents

,

,

,

, dan