Membuat Dokumen HTML
Dokumen HTML merupakan Teks murni (ASCII) dengan kode-kode special. Maksudnya adalah dokumen HTML hanya akan berisi Tulisan berupa Huruf, Angka, tanda baca dan karakter-karakter lainnya termasuk Kode-kode Tag HTML itu sendiri.
Membuat dokumen HTML sebenarnya dapat dilakukan dengan 2 cara, yaitu dengan cara manual dan dengan cara menggunakan HTML Editor. Cara manual memerlukan banyak tenaga dan waktu karena anda akan banyak melakukan pengetikan, sedangkan kalau menggunakan HTML Editor seperti MS Front Page, Asymetrix WEB Publisher, Macro Media BackStage dll, akan mempermudah pekerjaan anda termasuk tenaga dan waktu.
Apa yang dibutuhkan?
Anda hanya memerlukan sebuah program penyunting teks untuk membuat dokumen HTML. Penyunting teks disini yang saya kira cukup untuk digunakan adalah Write/Word Pad, Note Pad, walaupun masih banyak penyunting teks lainnya seperti MS Word dsb.
Bentuk Umum HTML
Dibawah ini ada contoh/bentuk umum dari sebuah dokumen HTML yang akan terlihat pada waktu kita membukanya dengan menggunakan Text Editor atau NotePad:
<HTML>
<TITLE>Anak Irian’s Home Page</TITLE>
<BODY>Hallo apa kabar?<BR>
Mudah-mudahan kabarnya Baik.
</BODY>
</HTML>
Dari contoh diatas jika anda membuka file ini dengan menggunakan MicroSoft Internet Browser atau Netscape, anda hanya akan melihat tulisan:
Hallo apa kabar?
Mudah-mudahan kabarnya Baik.
Tanda ‘/’ atau “</>” menandakan akhir perintah tag, entah itu untuk </HEAD>, </TITLE> dsb.
Jika ada Pembuka, harus ada Penutupnya juga!
Keterangan:
• <HTML>Pembuka/Awal setiap membuat suatu dokumen HTML.
• </HTML>Penutup/Akhir dari suatu dokumen HTML.
• <TITLE>Tag Pembuka untuk Judul Halaman/dokumen HTML.
• </TITLE>Tag Penutup untuk Judul Halaman/dokumen HTML.
• <BODY>Tag Awal dari Apa yang akan diketikan/diisi pada Dokumen HTML.
• </BODY>Tag Penutup dari sisan dokumen HTML.
• <BR> Tag untuk memisahkan satu baris menjadi dua baris
Yang harus diingat adalah:
Apa yang kita ketikan di NotePad dengan yang akan ditampilkan sebagai suatu dokumen di Internet akan kelihatan beda.
Kode-kode TAG HTML dan Contohnya
Saya akan menjelaskan secara singkat mengenai kode-kode Tag pada HTML.
<!– Isian Komentar anda –>
Untuk mengisi Komentar anda (untuk mempermudah perbaikan atau koreksi)
Semua ketikan yang diapit oleh tag <!– –> tidak akan tampil saat dokumen dibuka oleh browser.
• Contoh:
<!– Aturan Warna, Huruf dan Link Mulai dari sini –>
<A HREF>
Untuk membuat Link ke halaman lain atau halaman yang sama dengan topic tertentu.
• Contoh:
Klik disini untuk <A HREF=”halaman2.htm”>Pindah ke halaman 2</A>
Hasilnya: Klik disini untuk Pindah ke halaman 2
• Contoh2:
<A HREF=”http://www.yahoo.com/”>Klik disini</A>untuk ke Yahoo!
Hasilnya: Klick disini untuk ke Yahoo!
</A>
Menutup suatu Link.
<A NAME>
Membuat nama jangkar untuk Link ke tempat tertentu pada halaman yang sama ataupun yang berbeda berdasarkan topic yang diinginkan.
• Contoh:
<A NAME=”kodetaghtml”>Kode-kode TAG HTML dan Contohnya</A>
• Contoh2:
<A HREF=”index.htm#kodetaghtml”>Kode-kode TAG HTML</A>
</A>
Menutup suatu Link.
<B>
Membuat Text yang berada diantara kedua Tag menjadi Tebal (bold)
• Contoh:
<B>Peringatan!</B>Pemerintah.
• Hasilnya: Peringatan Pemerintah.
• Contoh2:
Peringatan!<B>Pemerintah</B>.
• Hasilnya: Peringatan Pemerintah.
<BGSOUND>
Menambahkan bunyi, baik itu file MID ataupun WAVE pada dokumen HTML anda.
• Contoh:
<BGSOUND SRC=”jazz.mid”>
• Contoh2:
<BGSOUND SRC=”tada.wav”>
<BODY>
Menentukan warna atau gambar latar belakang dokumen, warna text, jenis huruf, warna Link, warna Link yang telah dikunjungi serta link yang aktif.
BGCOLOR = Warna latar belakang
BACKGROUND = Gambar latar belakang
FONT SIZE = Ukuran Huruf
FONT COLOR = Warna Huruf
LINK = Warna untuk Text Link
VLINK = Warna untuk Text Link yang telah dikunjungi
• Contoh:
<BODY BGCOLOR=”FFFFFF” FONT SIZE=3 FONT COLOR=”000000″ LINK=”0000FF” VLINK=”FF0000″>
• Contoh2:
<BODY BACKGROUND=”logo.gif” FONT SIZE=3 FONT COLOR=”000000″ LINK=”0000FF” VLINK=”FF0000″>
<BR>
Membagi Suatu baris menjadi Dua baris (tanpa jarak antara kedua baris), diletakan di depan kata/huruf yang mau dipindahkan ke baris berikutnya.
<CENTER>
Membuat Teks atau Grafis yang diapit Tag Center berada ditengah-tengah browser (Align Center)
• Contoh:
<CENTER>Selamat Datang</CENTER>
• Contoh2:
<CENTER><IMG SRC=”logo.jpg”></CENTER>
</CENTER>
Menutup Kode Tag Center.
<FONT>
Merubah Jenis Huruf, Ukuran Huruf dan Warna Huruf.
• Contoh:
<FONT FACE=”Comic Sans MS” FONT SIZE=4 FONT COLOR=”000000″>Selamat Datang di Anak Irian’s Home Page!</FONT>
Hasilnya:
Selamat Datang di Anak Irian’s Home Page
</FONT>
Penutup untuk Tag Huruf.
<H1..H6>
Menentukan Ukura Header/Topic dari pada Dokumen
• Contoh:
<H1>Ini H1</H1>
Hasilnya: Ini H1
• Contoh:
<H2>Ini H2</H2>
Hasilnya: Ini H2
• Contoh:
<H3>Ini H3</H3>
Hasilnya: Ini H3
• Contoh:
<H4>Ini H4</H4>
Hasilnya: Ini H4
<HR>
Membuat Garis Horizontal pada dokumen HTML anda.
• Contoh:
<HR>
Hasilnya:
________________________________________
<HTML>
Perintah yang selalu diletakan pada bagian awal dokumen HTML yang menyatakan bahwa dokumen ditulis dalam kode HTML.
</HTML>
Perintah yang selalu diletakan di Akhir suatu dokumen HTML.
<I>
Membuat Teks pada dokumen yang diapit oleh Tag <I> dan </I> menjadi miring (Italic)
• Contoh:
Computer merupakan <I>Ilmu Praktisi</I> dan bukan Teori belaka.
Hasilnya: Computer merupakan Ilmu Praktisi dan bukan Teori belaka.
</I>
Menutup Tag Miring (Italic)
<IMG>
Memasukan Gambar Grafis, GrafisMap, serta Animasi kedalam dokumen HTML anda.
• Contoh:
<IMG SRC=”toshi.gif”>
• Contoh:
<A HREF><IMG SRC=”mirclgo.gif”></A>
• Contoh:
<IMG SRC=”toshi.avi”>
Contoh pertama merupakan cara memasukan gambar, contoh kedua merupakan contoh cara menggunakan gambar sebagai link dan contoh yang ketiga merupakan contoh untuk memasukan gambar animasi (AVI) kedalam dokumen HTML.
<P></P>
Menentukan Awal dan Akhir sebuah Paragraf.
• Contoh:
<P>
Ini merupakan Awal serta akhir dari Paragraf pertama
</P>
<TITLE></TITLE>
Menentukan Judul untuk tiap dokumen HTML yang anda buat. Judul ini akan nampak pada Titlebar browser anda.
• Contoh:
<TITLE>Anak Irian’s Home Page</TITLE>
Apakah HTML itu?
HTML adalah singkatan dari Hypertext Markup Language. Terdiri dari sepasang kode yang disisipkan dalam suatu dokumen untuk mengontrol tampilan dokumen di layar monitor oleh Web Browser, seperti Netscape atau Mosaic. Apabila kita akan memandang suatu dokumen di Internet kita harus menggunakan Web Browser dan disana ada fasilitas “View source” untuk melihat kode-kode web page ini. Suatu dokumen berisi kode-kode ini disebut HTML.
Suatu dokumen HTML harus mempunyai formulir yang tepat, sehingga dapat dikenal dan di Interpretasikan dengan tepat oleh perangkat lunak dari Browser.
Dasar-dasar dari Form tersebut adalah sbb:
<HTML>
<HEAD>
<TITLE> Ketik_Apa_saja_Judulnya </TITLE>
</HEAD>
<BODY>
Bagian utama dari Isi suatu dokumen atau citra.
</BODY>
</HTML>
Ada dua hal yang anda perhatikan yaitu kode pembuka dan penutup didalam kurung (< >),dan (</ >). Sebagai contoh suatu HTML akan dibuka oleh <HTML> dan ditutup oleh </HTML> dan hal ini adalah keharusan akan tetapi tidak semuanya pakai kode penutup. Editor GeoCities akan membantu pembuatan dasar-dasar struktur dokumen untuk anda.
Kembali ke Indeks.
________________________________________
Warna
Warna, citra sebagai latarbelakang, dan beberapa hal akan dikontrol oleh Tag <BODY>. Jika anda menggunakan Editor GeoCities secara otomatis telah dibuatkan tag <BODY> anda tidak dapat membuat latarbelakang dari citra tapi itu dulu, sekarang GeoCities telah memiliki Editor HTML yang canggih. Anda dapat mengontrol home page yang sedang dibuat termasuk latarbelakang. Informasi dalam page ini akan membantu anda untuk mengembangkan dari pengertian dasar dari HTML.
Untuk mengontrol warna, tag <BODY>ditulis seperti ini: <BODY bgcolor=”#xxxxxx” text=”#xxxxxx” link=”#xxxxxx” vlink=”#xxxxxx” alink=”#xxxxxx”> Anda dibolehkan menggunakan seluruh item tersebut (bgcolor, text, link, vlink or alink), atau sebagian. Untuk menset latarbelakang, text, link, visited link, atau alink masukkan kode warna untuk xxxxxx seperti contoh diatas dan berikut ini ada beberapa warna yang dapat anda pergunakan :
Putih = FFFFFF
Kuning = FFFF66
Merah = FF0000
Abu-abu = CC9999
Biru = 0000FF
Hujau = 00FF00
Hitam = 000000
Terong = CC33FF
Biru muda = 00CCFF
Nilai tersebut diatas adalah nilai Hexadecimal, kombinasi warna dari Merah/Hijau/Biru yang menghasilkan warna baru. Penjelasan yang lebih lengkap dari nilai hexadecimal dapat anda lihat di home page ini atau di web lain. Coba converter warna hexadecimal ini dengan menggunakan kombinasi yang proporsional setiap warna dapat diarsipkan. Jika anda menginginkan seperti warna yang anda lihat di home page lain, anda dapat menggunakan “View Source” di browser yang sedang anda gunakan untuk melihat kode dari warna tersebut.
CATATAN: Mulailah dengan menambah tag <BODY BGCOLOR=”#ffffaa”> sebagai percobaan pertama dalam hal ini akan anda dapatkan kombinasi warna seperti home page ini. Sekali anda berhasil, tinggal membuat percobaan selanjutnya yang lebih mantap.
Contoh sederhana pemakaian warna utk background :
• <body bgcolor=”#99CC32″ link=”#0000FF” vlink=”#663399″> (Hijau muda)
• <body bgcolor=”#FFFFCC” link=”#0000FF” vlink=”#663399″> (Kuning muda)
• <body bgcolor=”#CC99CC” link=”#0000FF” vlink=”#663399″> (Coklat muda)
• <body bgcolor=”663399″ text=”FFFFFF” link=”00CC00″ vlink=”000000″> (Violet tua)
Kembali ke Indeks.
________________________________________
Garis Horizontal
Anda dapat menyisipkan sebuah garis horizontal (Horizontal Rule) dalam suatu dokumen dengan menyisipkan sebuah tag <HR>. Sebagai defaultnya adalah garis biasa dengan ukuran dan ketebalan yang standard seperti ini:
________________________________________
Mengenai tag ini dikenal dengan Browser modern, dapat dibuat beberapa macam dari tampilan garis dengan menambah LINE=NUMBER, ketebalan dari suatu garis dapat ditentukan. Letak dari suatu garis juga dapat diatur sesuai dengan kebutuhan dengan menambahkan ALIGN=LEFT/RIGHT/CENTER. Ketebalan garis juga dapat ditentukan dengan menambahkan WIDTH=PERCENT.
Kombinasi dari penjelasan diatas dapat kita buat seperti ini <HR ALIGN=CENTER WIDTH=50% SIZE=10 NOSHADE> akan dibuatkan (tampilkan) suatu garis tebal yang hitam dan ditempatkan ditengah-tengah.
________________________________________
Catatan: Dalam pembuatan garis yang cantik seperti pelangi dll. tidak dibuat pakai tag <HR> melainkan sebuah citra.
Kembali ke Indeks.
________________________________________
Bullet lists
Anda dapat membuat bullet dengan menggunakan tag <UL> (unordered list).
Formatnya sbb:
<UL>
<LI> item satu
<LI> item dua
<LI> item tiga
</UL>
Tampilannya seperti ini:
• item satu
• item dua
• item tiga
Kembali ke Indeks.
________________________________________
Numbered lists
Juga dapat dibuat list dengan nomor urut dengan menggunakan tag <OL> (ordered list). Tampilannya seperti ini:
<OL>
<LI> bagian satu
<LI> bagian dua
<LI> bagian tiga
</OL>
Tampilannya seperti ini:
1. bagian satu
2. bagian dua
3. bagian tiga
Kembali ke Indeks.
________________________________________
Membuat Definisi list
Cara termudah menerangkan definisi list adalah seperti contoh dibawah ini:
<dl> <dt>Jeruk <dd>Sebuah jeruk adalah hampir sama ukurannya dengan sebuah apel, yang masih satu keluarga dengan buah citrun. Di Indonesia buah jeruk hampir tumbuh disemua tempat.
<dt>Mangga <dd>Mangga juga dapat dijumpai diseluruh Indonesia, hanya saja daerah tertentu menghasilkan buah mangga yang spesialis seperti Arumanis, Manalagi dll.
</dl>
Sama halnya dengan tag dibawah ini:
Jeruk
Sebuah jeruk adalah hampir sama ukurannya dengan sebuah apel, yang masih satu keluarga dengan buah citrun. Di Indonesia buah jeruk hampir tumbuh disemua tempat.
Mangga
Mangga juga dapat dijumpai diseluruh Indonesia, hanya saja daerah tertentu menghasilkan buah mangga yang spesialis seperti Arumanis, Manalagi dll.
Kembali ke Indeks.
________________________________________
Judul/Headers
Browser pada web mengenal 6 level dari Header/Judul.
<H1>Judul level satu </H1>
<H2>Judul level dua </H2>
<H3>Judul level tiga </H3>
<H4>Judul level empat </H4>
<H5>Judul level lima </H5>
<H6>Judul level enam </H6>
akan terlihat seperti ini:
Judul level satu
Judul level dua
Judul level tiga
Judul level empat
Judul level lima
Judul level enam
Kembali ke Indeks.
________________________________________
Penempatan Teks ditengah
Anda dapat menempatkan teks ditengah-tengah tampilan layar agar menarik dengan membuat tag <CENTER> </CENTER>.
seperti ini:
<CENTER> Belajar membuat Home page </CENTER>
akan muncul:
Belajar membuat Home page
Jika lebih dari satu baris yang akan dibuat ketengah maka semuanya akan ikut terpusat ketengah dengan tag <CENTER>.
Kembali ke Indeks.
________________________________________
Penempatan Graphic sejajar
Untuk membuat graphic sejajar di kiri, tengah dan kanan perlu dibuatkan tag khusus.
<A HREF=xxx.html><IMG SRC=xxx.gif” ALT=”xxxxx” ALIGN=left width=?? height=??></a>
xxx=nama file
xxxx=tulisan yg ada di graphic tsb.
Selanjutnya ALIGN=center dan ALIGN=right
Huruf Tebal dan Miring
Teks dan tulisan dapat kita buat tebal atau miring agar tampilannya lebih indah dan bervariasi dengan menggunakan tag seperti berikut ini:
<B>Teks tebal </B>
akan muncul seperti ini:
Teks tebal
<I>Teks miring </I>
akan muncul seperti ini:
Teks miring
<B> <I>Teks tebal dan Miring </I> </B>
akan terlihat seperti ini:
Teks tebal dan Miring
Kembali ke Indeks.
________________________________________
Paragraf dan mengakhiri satu baris
Browser web tidak mengenal dan mengindahkan enter untuk mengakhiri suatu baris seperti software pengolah kata kecuali dengan memberi instruksi khusus, barulah teks yang dimaksudkan bisa pas panjangnya di Browser yang anda gunakan. Dengan menyisipkan suatu tag <BR> akan mengakhiri suatu baris dan baris baru akan tercipta dibawahnya.
Untuk membatasi suatu paragraf cukup dengan menyisipkan tag
dan tidak perlu tag penutup
ini adalah pengecualian.
Kembali ke Indeks.
________________________________________
Teks Preformatted
Jika anda ingin menginginkan tampilan teks seperti yang anda inginkan, hanya dengan menempatkan tag
diawal suatu paragraf dan tag
diakhir paragraf akan dihasilkan seperti yang anda maksudkan, kita lihat seperti dibawah ini:
Monas adalah singkatan Monumen Nasional
letaknya persis di jantung kota Jakarta
dibatasi oleh jalan-jalan besar seperti
Jl.Merdeka Utara, Selatan, Timur dan Barat.
Kembali ke Indeks.
________________________________________
Membuat kelap-kelip
Untuk membuat teks atau graphik kelap-kelip cukup dengan menambahkan tag <BLINK></BLINK>.
Kodenya <BLINK> Kelap-kelip Ibukota!</BLINK> akan terlihat seperti ini:
Kelap-kelip Ibukota!
Kembali ke Indeks.
________________________________________
Membuat lompatan ke dokumen lain
Untuk membuat lompatan ke dokumen lain di home page yang sama dapat dilakukan dengan mudah yaitu dengan mengklik yang bergaris bawah dan warna yang berbeda, ada dua cara melakukannya:
1. Sisipkan target pada suatu tempat yang anda inginkan untul link lompatan seperti ini:
<A NAME=”nama_target_disini”>teks_target</A>
2. Sisipkan Link untuk diklik dan langsung loncat kedokumen dimaksud.
<A HREF=”#nama_target_disini”>Hotlink</A>
Teks hotlink akan terlihat bergaris bawah dan berwarna yang lain, jika pemakai meng-klik di browser web akan langsung melompat ke dokumen Hotlink.
Kembali ke Indeks.
________________________________________
Lompatan ke file yang lain dengan system yg sama
Diatas telah dibahas lompatan ke dokumen yang lain, dalam hal ini akan dibahas lompatan ke file lain, misalnya page yang membahas topik-topik khusus yang menarik.
Jika file yang mau dibuat lompatan masih di direktory yg sama cukup dengan menyebut file-nya saja seperti format berikut ini:
<A HREF=”rambo.gif”>Buka rambo.gif</A>
Kembali ke Indeks
________________________________________
Lompat ke suatu dokumen dengan system yg berbeda
Dengan membuat lompatan hotlink ke suatu dokumen di system yang lain dimanapun berada sama halnya dengan lompatan dokumen dengan system yg sama hanya saja harus lengkap dibuat URL (Uniform Resource Locator) atau address Internet seperti contoh berikut ini:
<A HREF=”http://members.tripod.com/~Simbolon/”>Loncat ke Chat Page</A>
Anda akan dibawa ketempat yg disebut Homepage Obrolan yang beralamat di http://members.tripod.com/~Simbolon/, lakukan sekarang juga.
Loncat ke “Chat Page”
Kembali ke Indeks.
________________________________________
Cara membuat TABEL
Tabel sangat perlu dalam penyajian suatu Informasi dalam presentasi atau dalam tulisan, disini ada beberapa cara pembuatan Tabel, tinggal anda pilih sendiri.
TABEL 3X2
A B C
D E F
<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
________________________________________
D UA ROWSPAN
Cara 1:
Item 1 Item 2 Item 3
Item 4 Item 5
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Cara 2:
Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7
<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
</TR>
</TABLE>
________________________________________
C OLSPAN :
Item 1 Item 2
Item 3 Item 4 Item 5
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
________________________________________
HEADERS, <TH>
Head1 Head2 Head3
A B C
D E F
<TABLE BORDER>
<TR>
<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
________________________________________
COLSPAN DAN HEADERS,
Head1 Head2
A B C D
E F G H
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
________________________________________
MULTI HEADERS, COLSPAN
Head1 Head2
Head 3 Head 4 Head 5 Head 6
A B C D
E F G H
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
________________________________________
HEADER SAMPING :
Head1 Item 1 Item 2 Item 3
Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item 8 Item 9
<TABLE BORDER>
<TR><TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
<TR><TH>Head2</TH>
<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR>
<TR><TH>Head3</TH>
<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR>
</TABLE>
________________________________________
SIDE HEADERS, ROWSPAN :
Head1 Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 Item 8
Head2 Item 9 Item 10 Item 3 Item 11
<TABLE BORDER>
<TR><TH ROWSPAN=2>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item 8</TD>
</TR>
<TR><TH>Head2</TH>
<TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD>
</TR>
</TABLE>
________________________________________
KOMBINASI :
Average
Height Weight
Gender Males 1.9 0.003
Females 1.7 0.002
<TABLE BORDER>
<TR> <TD><TH ROWSPAN=2></TH>
<TH COLSPAN=2>Average</TH></TD>
</TR>
<TR> <TD><TH>Height</TH><TH>Weight</TH></TD>
</TR>
<TR> <TH ROWSPAN=2>Gender</TH>
<TH>Males</TH><TD>1.9</TD><TD>0.003</TD>
</TR>
<TR> <TH>Females</TH><TD>1.7</TD><TD>0.002</TD>
</TR>
</TABLE>
________________________________________
R OWSPAN/COLSPAN
A 1 2
3 4
C D
<TABLE BORDER>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
</TR>
<TR>
</TR>
</TABLE>
________________________________________
TABEL PAKAI BORDERS
TABEL tanpa BORDER
Item 1 Item 2 Item 3
Item 4 Item 5
<TABLE>
<TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD>
</TR>
<TR> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
________________________________________
DENGAN BORDER 10 :
Item 1 Item 2
Item 3 Item 4
<TABLE BORDER=10>
<TR> <TD>Item 1</TD> <TD> Item 2</TD>
</TR>
<TR> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
</TABLE>
________________________________________
CELLPADDING dan CELLSPACING :
Cara 1:
A B C
D E F
<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Cara 2:
A B C
D E F
<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Cara 3:
A B C
D E F
<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Cara 4:
A B C
D E F
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
________________________________________
ALIGNMENT, CAPTIONS, DAN SUBTABLES
TABEL DENGAN BEBERAPA GARIS
Januari Pebruari Maret
Ini cell 1 Cell 2 Cell yg lain,
cell 3
Cell 4 dan yg ini
adalah cell 5 Cell 6
<TABLE BORDER>
<TR>
<TH>Januari</TH>
<TH>Pebruari</TH>
<TH>Maret</TH>
</TR>
<TR>
<TD>Ini cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell yg lain,<br> cell 3</TD>
</TR>
<TR>
<TD>Cell 4</TD>
<TD>dan yg ini<br>adalah cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>
________________________________________
ALIGN=LEFT|RIGHT|CENTER
Januari Pebruari Maret
semua terpusat Cell 2 Cell yg lain,
cell 3
rata kanan terpusat default,
rata kiri
<TABLE BORDER>
<TR>
<TH>Januari</TH>
<TH>Pebruari</TH>
<TH>Maret</TH>
</TR>
<TR ALIGN=center>
<TD>semua terpusat</TD>
<TD>Cell 2</TD>
<TD>Cell yg lain,<br> cell 3</TD>
</TR>
<TR>
<TD ALIGN=right>rata kanan</TD>
<TD ALIGN=center>terpusat</TD>
<TD>default,<br>rata kiri</TD>
</TR>
</TABLE>
________________________________________
VALIGN=TOP|BOTTOM|MIDDLE
Januari Pebruari Maret
semua rata atas dan yg ini
adalah cell 2 Cell 3
rata atas rata bawah default alignment,
center
<TABLE BORDER>
<TR>
<TH>Januari</TH>
<TH>Pebruari</TH>
<TH>Maret</TH>
</TR>
<TR VALIGN=top>
<TD>semua rata atas</TD>
<TD>dan yg ini<br>adalah cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD VALIGN=top>rata atas</TD>
<TD VALIGN=bottom>rata bawah</TD>
<TD>default,<br>terpusat</TD>
</TR>
</TABLE>
________________________________________
CAPTION=TOP|BOTTOM
CAPTION Atas
Januari Pebruari Maret
Ini cell 1 Cell 2 Cell yg lain,
cell 3
<TABLE BORDER>
<CAPTION ALIGN=top>CAPTION Atas</CAPTION>
<TR>
<TH>Januari</TH>
<TH>Pebruari</TH>
<TH>Maret</TH>
</TR>
<TR>
<TD>Ini cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell yg lain,<br> cell 3</TD>
</TR>
</TABLE>
Januari Pebruari Maret
Ini cell 1 Cell 2 Cell yg lain,
cell 3
CAPTION Bawah
<TABLE BORDER>
<CAPTION ALIGN=bottom>CAPTION Bawah</CAPTION>
<TR>
<TH>Januari</TH>
<TH>Pebruari</TH>
<TH>Maret</TH>
</TR>
<TR>
<TD>Ini cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell yg lain,<br> cell 3</TD>
</TR>
</TABLE>
________________________________________
TABELNESTED:
Tabel ABCD Didalam Tabel 123456
1 2 3
A B
C D
4 5 6
<TABLE BORDER>
<TR> <!– ROW 1, TABLE 1 –>
<TD>1</TD>
<TD>2</TD>
<TD>3
<TABLE BORDER>
<TR> <!– ROW 1, TABLE 2 –>
<TD>A</TD>
<TD>B</TD>
</TR>
<TR> <!– ROW 2, TABLE 2 –>
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR> <!– ROW 2, TABLE 1 –>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
________________________________________
TABEL WIDTHS
BASIC 50% WIDTH
Width=50% Width=50%
3 4
<TABLE BORDER WIDTH=”50%”>
<TR><TD>Width=50%</TD><TD>Width=50%</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
Item width affects cell size 2
3 4
<TABLE BORDER WIDTH=”50%”>
<TR><TD>Item width affects cell size</TD><TD>2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
WIDTH=100% Ini item 2
3 4
<TABLE BORDER WIDTH=”100%”>
<TR><TD>WIDTH=100%</TD><TD>Ini item 2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
________________________________________
TABEL A TERPUSAT
A B C
D E F
<CENTER>
<TABLE BORDER WIDTH=”50%”>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
</CENTER>
________________________________________
TABLE WIDTH DAN TABEL NESTED
Item 1 Item 2
Item A Item B
Item 4
<TABLE BORDER WIDTH=”50%”>
<TR><TD>Item 1</TD><TD>Item 2</TD>
</TR>
<TR><TD>
<TABLE BORDER WIDTH=100%>
<TR><TD>Item A</TD><TD>Item B</TD>
</TR>
</TABLE>
</TD>
<TD>Item 4</TD>
</TR>
</TABLE>
________________________________________
HEIGHT=15%
HEIGHT=15% Item 2
3 4
<TABLE BORDER WIDTH=”50%” HEIGHT=”15%”>
<TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
Cara Memasukkan Kode Adsense Kedalam Postingan
Tuesday, June 10, 2008 ::Oleh:: pencuri kode™
::Keyword:: Belajar Adsense, Belajar Hack, Tutorial Blogger
Sebelumnya saya minta maaf dulu mungking untuk artikel yang seperti ini sudah basi buat para suhu tapi saya mencoba menulis kemabli karena saking banyaknya teman-teman yang menanyakan pada saya via YM ya terpaksa saya tulis aja…
Untuk memasang adsense agar tampil di dalam postingan membutuhkan sedikit trik, karena kalo cuma asal pasang script adsense didalam postingan maka iklan adsense tidak akan muncul. Nah kali ini akan kita bahas trik untuk menampilkan adsense didalam postingan. Gini nih caranya :
1. Login ke blogger kemudian pilih “Layout –> Edit HTML”
2. Beri tanda centang pada kotak “Expand widget template”
3. Cari Kode berikut :
<data:post.body/>
4. Hati-hati, di dalam kode HTML yang sudah dipasang “Readmore” biasanya ada 2 kode seperti itu. Jadi pilih kode yg pertama.
5. Setelah itu letakan kode Google adsense kamu dibawah kode tersebut. Tp sebelumnya perhatikan yg berikut ini.
kode adsense biasanya seperti ini :
<center><script type=”text/javascript”><!– google_ad_client = “pub-234567XXX”; /* 468×60, created 6/10/08 */ google_ad_slot = “0495685686”; google_ad_width = 468; google_ad_height = 60; //–><br /></script>
<script src=”http://pagead2.googlesyndication.com/pagead/show_ads.js” type=”text/javascript”><br /></script></center>
untuk kode yang di beri tanda ( <!– dan //–>). Hapus kedua kode tersebut. Kemudian copy kode adsense anda dan letakkan dibawah kode
<data:post.body></data:post.body><p></p>
. Lalu simpan Template kamu dan semoga bermanfaat dan sukses
Memasukkan Kode HTML ke dalam Postingan Blogger
Jika baru pertama kali kita ngeblog, mungkin kita tidak tau bagaimana untuk memasukkan kode html ke dalam postingan kita. Jika kita memasukkan kode html ke dalam postingan kita secara langsung, maka hasilnya tidak akan muncul, karena kode tersebut langsung diterjemahkan ke dalam bahasa html. Terus bagaimana untuk memasukkan kode html tersebut??berikut cara memasukkan kode html ke dalam postingan kita :
cara 1
– Gunakan software-software web design, misalnya Macromedia Dreamwaver, Microsoft Frontpage, Namao Web Editor. Atau bisa juga dengan software-software blogtools seperti post2blog dll.
-Trus tuliskan semua kode pada area design, kemudian copy kode-kode tersebut dari area HTML Code. Nha kode-kode dalam area HTML Code tersebut lah yang harus diposting.
Cara ini sudah pasti memerlukan software yang diperlukan. terus bagaimana jika kita tidak mempunyai software yang diperlukan??? ikuti cara ke-2
cara 2
– Buka situs ini http://centricle.com/tools/html-entities, trus isikan kode-kode kamu kedalam kotak yang disediakan, nha kalo sudah tekan tombol “Encode”, nha maka kamu akan mendapatkan script baru untuk diposting di blog kamu.
Sebenarnya masih ada cara ke 3, tapi saya menyarankan menggunakan cara yang ke 2. karena tidak perlu repot. tinngal copy aja kode html yang ingin kita posting, terus encode deh di tempat yang telah saya berikan tadi. ok……..
Selamat datang di Adenmas.com 