Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
HTML.
Presentasi serupa
Presentasi berjudul: "HTML."— Transcript presentasi:
1
HTML
2
Materi 7 Membuat Tabel Hai. Kali ini saya akan coba membahas cara membuat tabel untuk web page anda. Bayangan anda tentang tabel barangkali tidak akan jauh dari ini. Tetapi kalau anda pernah melihat beberapa web page yang menarik mungkin anda akan tertarik untuk mempelajari bagaimana tag <TABLE> digunakan secara baik di sana! Sebagai ilustrasi, inilah web page yang sama dengan latar belakang abu-abu dan BORDER-nya diperlihatkan. Pada dasarnya semua itu hanya memerlukan 3 tag... <TABLE> Tag utama. Digunakan untuk memberitahu browser "ini adalah tabel", bersama dengan beberapa atribut seperti ukuran, lebar border dan beberapa hal lagi.. <TR> TableRow menyatakan tiap baris dalam tabel yang merupakan jajaran <TD> (TableData) sel. <TD> Menyatakan masing-masing blok atau sel pada setiap baris. Jadi bisa kita katakan: Tabel terdiri dari baris yang merupakan susunan sel...
3
<--Ini--- --adalah-- --baris-- --sebuah-- ---tabel--> sel Itulah tabel secara garis besar. Anda sekarang persiapkan diri untuk membuat beberapa tabel! Perlu saya tekankan bahwa kalau anda berkeinginan untuk membuat dokumen html yang baik, maka anda harus menyediakan waktu untuk mempelajari tag-tag yang bersangkutan. Kalau anda menggantungkan diri pada fasilitas "table wizard" yang ada di dalam "editor html canggih yang amat sangat mudah dipakai" yang banyak tersedia di pasaran, fleksibilitas anda akan sangat terbatas. Dan hasil akhirnya mungkin tidak akan seperti yang anda harapkan. Menurut pendapat saya, editor html terbaik untuk dipakai adalah editor berbasis teks. Program-program ini akan mempermudah penulisan dokumen html anda, tetapi tidak mengerjakannya untuk anda.
4
Pelajaran 1 Seperti biasa, langkah pertama adalah membuka Notepad (ya, NOTEPAD!), dan ikuti saya. Tuliskan baris-baris di bawah ini; atau lebih mudah gunakan "cut and paste" - potong dan tempelkan - baris-baris tersebut. <HTML> <HEAD> <TITLE>Membuat tabel</TITLE> </HEAD> <BODY> </BODY> </HTML> Simpan dengan nama tabel1.html di suatu folder, misalnya tutorial. Folder ini juga akan dipakai untuk menyimpan beberapa file yang lain, jadi sebaiknya dikhususkan untuk itu. Buka browser anda (Netscape atau Internet Explorer) dan gunakan untuk membuka file tabel1.html yang baru anda buat tadi. Jangan menutup Notepad! Biarkan kedua program tersebut tetap di layar komputer. Dengan cara ini anda bisa membuat tulisan anda di Notepad dan langsung melihat hasilnya dengan browser. Lihat, anda tidak butuh "editor canggih yang amat sangat nudah dipakai" untuk melakukannya. Cukup Notepad.
5
Mulailah membuat tabel anda dengan mengetikkan tag yang diperlukan
Mulailah membuat tabel anda dengan mengetikkan tag yang diperlukan. Tag ini berarti "awal tabel" dan "akhir tabel". <HTML> <HEAD> <TITLE>Membuat tabel</TITLE> </HEAD> <BODY> <TABLE> </TABLE> </BODY> </HTML> Setiap tabel membutuhkan paling tidak satu baris. <TABLE> <TR> </TR> </TABLE> Dan tentu saja setiap tabel harus memiliki paling sedikit satu sel data. <TABLE> <TR> <TD></TD> </TR> </TABLE>
6
Agar lebih mudah dan jelas, saya hanya akan menuliskan apa yang ada di antara tag awal dan akhir tabel. Tag head, body, title, dll tidak saya tuliskan. Tentu saja anda tetap membutuhkannya di dokumen anda. <TABLE> <TR> <TD></TD> </TR> </TABLE> Sekarang anda perlu sesuatu untuk diisikan ke dalam sel. Bagaimana jika Bram? Oke, masukkan Bram ke dalam <TD> sel. <TABLE> <TR> <TD>Bram</TD> </TR> </TABLE> Wow anda telah menghasilkan tabel anda yang pertama! Bukalah dengan browser dan lihatlah. Jika anda melakukan semuanya dengan benar, tabel anda akan tampak seperti tabel berikut:
7
Bram Becanda nih! Haha! Jangan marah ya, nggak usah dimasukkan hati. Inilah yang sebetulnya anda buat.... BramApapun juga, itu adalah tabel html! Berbanggalah! Pelajaran 2 Oke, kita sudah membuat ini.... <TABLE> <TR> <TD>Bram</TD> </TR> </TABLE> ...yang menghasilkan ini: BramPertama-tama mari kita buat agar lebih tampak seperti tabel dengan membuat garis batas. Setiap kali anda membuat perubahan dan ingin melihat hasilnya, simpan dengan Notepad dan klik tombol Reload/Refresh pada browser anda. <TABLE BORDER=1> <TR> <TD>Bram</TD> </TR> </TABLE> BramMungkin anda ingin batas yang lebih besar? <TABLE BORDER=5> <TR> <TD>Bram</TD> </TR> </TABLE>
8
Saya akan tunjukkan sesuatu yang lain kepada anda
Saya akan tunjukkan sesuatu yang lain kepada anda. Gambar juga dapat dipakai (dan dimanipulasi) di dalam sel. Di dalam folder yang berisi file ini anda akan menemukan gambar kecil dengan nama orang.gif. Copykan ke folder anda sendiri yang berisi file tabel1.htm (tutorial, jika anda mengikuti saya sejak awal). Gantilah Bram dengan tag IMG seperti di bawah ini. <TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="orang.gif" WIDTH=32 HEIGHT=32></TD> </TR> </TABLE> Saya pikir ini adalah saat yang tepat untuk menekankan pentingnya penggunaan ukuran dalam setiap gambar anda. Saya tidak akan berpanjang lebar, tapi hal itu akan memudahkan browser dan menghindarkan anda dari kejutan-kejutan kecil yang tidak menyenangkan.
Presentasi serupa