This is featured post 1 title
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.
This is featured post 2 title
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.
This is featured post 3 title
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.
Kamis, 28 Maret 2013
11.09
Unknown
Masih bingung mencari jodoh idaman kamu? Sudah coba berbagai cara? Kali ini, kamu bisa mencoba mencari jodoh idaman kamu melalui zodiak. Boleh percaya boleh tidak, kadar kecocokan pasangan bisa dilihat dari zodiak loh! Nah, mari kita mulai.
AQUARIUS (22 Januari – 18 Februari)
Cowok aquarius adalah cowok yang murah
hati, terbuka, dan sangat peduli terhadap orang yang disayanginya. Mudah
jatuh cinta, tetapi sering kali ragu untuk berkomitmen. Meskipun
terlihat cool di luar, sesungguhnya ia adalah orang yang penyayang dan
emosional. Cowok aquarius tidak dapat bertahan lama dalam suatu hubungan
yang terlalu membatasi segala sesuatu. Jodoh tebaik bagi cowok aquarius
adalah cewek aquarius juga.
Cewek aquarius memiliki standar tinggi
dan selalu ingin dihormati. Pribadi yang mandiri dan mampu mengerjakan
pekerjaan berat, bahkan pekerjaan yang biasanya dilakukan kaum pria.
Membutuhkan cinta yang besar, tetapi tidak begitu berhasrat untuk
memiliki sebuah komitmen dalam hubungan (pernikahan). Cewek aquarius
sering kali sulit berkompromi, sensitif, pandai, dan menyukai pesta.
Jodoh terbaik bagi cewek aquarius adalah cowok gemini, aries, atau
aquarius.
PISCES (19 Februari – 20 Maret)
Cowok pisces sering kali dikerubuti
wanita, tipe orang yang menarik perhatian kaum wanita. Mudah berubah
pendirian, kurang stabil, berhasrat, dan sensitif. Jika sudah melihat
suatu keburukan dalam diri pasangan, kerap kali melupakan kelebihannya.
Sangat suka memberi hadiah barang-barang mahal kepada orang yang
dicintai. Jodoh terbaik bagi cowok pisces adalah cewek virgo atau
scorpio.
Cewek pisces sering kali terlibat
hubungan dengan orang ketiga karena cenderung keliru dalam memilih
pasangan. Sangat mudah menangis, intuitif, responsif, dan sensual.
Kadangkala dimanfaatkan oleh orang-orang
yang memiliki masalah karena ke-empati-annya yang berlebihan. Tertarik
pada hal yang kreatif, sangat baik dalam berfantasi dan mengeluarkan
hasrat. Jodoh terbaik bagi cewek pisces adalah cowok dengan semua zodiak
(semua zodiak cocok).
ARIES (21 Maret – 19 April)
Cowok aries adalah orang yang agresif,
energik, tidak mengenal lelah, dan cenderung menguasai. Cowok aries
menuntut kesetiaan dari pasangan, mudah marah jika sedikit saja pasangan
terlihat mencurigakan. Sering kali cemburu dan perlu terus-menerus
apresiasi untuk menyelamatkan hubungan. Pribadi yang impulsif, senang
berkhayal, dinamis, tetapi kurang yakin mengenai apa yang akan
dikerjakan selanjutnya. Membutuhkan pasangan yang spontan dan imajinatif
sehingga mampu menarik perhatianmu. Jodoh terbaik bagi cowok aries
adalah cewek gemini atau pisces.
Cewek aries adalah pecinta kebebasan
yang ekstrem, energetik, mudah terangsang, dan agresif secara seksual.
Pribadi yang romantis, mengagungkan cinta, mengakui bahwa cinta adalah
salah satu kesenangan dalam hidup. Idealis, selalu melakukan apa yang
diinginkan. Mudah menarik perhatian kaum pria karena tahu pasti apa yang
harus dilakukan. Kelemahan cewek aries adalah permasalahan uang. Jodoh
terbaik bagi cewek aries adalah cowok aquarius, libra, dan pisces.
TAURUS (20 April – 20 Mei)
Cowok taurus sangan suka dikelilingi
oleh objek cantik dan selalu mengharapkan kualitas terbaik dalam aspek
kehidupan, termasuk pasangan. Tidak menyukai pasangan yang menghabiskan
waktu untuk hal yang tak penting. Pribadi yang sabar, tetapi pembosan.
Tidak suka dibantah dan memang tak mungkin kalah dalam perdebatan dengan
pasangan. Tipe yang menghindari wanita yang sulit didapatkan, lebih
memilih yang sudah ada di hadapan mata. Seorang yang membumi, menyukai
makanan, minuman, dan wanita. Mau menghabiskan berapapun uang yang
dimiliki demi orang yang dicintai dan berharap memperoleh perlakuan yang
baik dari pasangan atas apa yang telah diberikan. Berkemauan keras,
emosional, pecinta seks. Sangat protektif terhadap wanita yang mampu
memuaskan dirinya. Jodoh terbaik bagi cowok taurus adalah cewek
sagitarius, cancer, atau gemini.
Cewek taurus adalah wanita yang
kompleks. Menyukai objek cantik dan menerima semua hadiah yang diberikan
oleh pasangannya. Berada dibawah kekuasaan planet venus membuatnya ahli
dalam seni menggoda. Seorang yang selalu bersikeras memperoleh apa yang
diinginkan. Selama diperlakukan dengan baik dan lembut, cewek taurus
akan tergila-gila dan memberikan apa pun yang diinginkan oleh
pasangannya. Suka mempelajari kehidupan dan pria yang mampu
mengajarkannya akan merebut hatinya. Mencari kekasih yang baik,
menghargai, dan pandai. Sangat setia terhadap pasangan yang dianggap
memenuhi standar yang dibuatnya. Jodoh terbaik bagi cewek taurus adalah
cowok virgo atau taurus.
GEMINI (21 Mei – 21 Juni)
Cowok gemini sering kali menghindari pembicaraan mengenai cinta. Mereka tidak tahan dengan rutinitas dan jadwal yang menyesakkan. Menolak untuk membuat komitmen dan selalu mencoba menjalani hidup ini dengan sebaik mungkin. Orang yang pandai dan lemah lembut, banyak disukai oleh kaum wanita. Menyukai tantangan dan mengejar wanita. Jodoh terbaik bagi cowok gemini adalah cewek virgo.
Cowok gemini sering kali menghindari pembicaraan mengenai cinta. Mereka tidak tahan dengan rutinitas dan jadwal yang menyesakkan. Menolak untuk membuat komitmen dan selalu mencoba menjalani hidup ini dengan sebaik mungkin. Orang yang pandai dan lemah lembut, banyak disukai oleh kaum wanita. Menyukai tantangan dan mengejar wanita. Jodoh terbaik bagi cowok gemini adalah cewek virgo.
Cewek gemini adalah orang yang menggoda,
menarik, dan menyenangkan. Sangat friendly dan mudah didekati, terapi
tidak tertarik dengan hubungan jangka panjang. Mengharapkan kecocokan
mental dengan pasangan dan selalu berusaha memperbaiki segala sesuatu,
bahkan pasangan kamu.
Jodoh terbaik bagi cewek gemini adalah cowok scorpio.
Jodoh terbaik bagi cewek gemini adalah cowok scorpio.
Cancer (21 Juni – 22 Juli)
Cowok cancer mudah terjebak dalam mimpi
dan terlalu idealis. Mencintai wanita cantik yang pandai. Sangat posesif
dan begitu jatuh cinta, mengharapkan hasil yang besar. Terlalu
terhanyut dalam kenangan dan menolak perubahan. Sering kali beruntung
dalam cinta. Jodoh terbaik bagi cowok cancer adalah cewek aquarius.
Cewek cancer mendambakan seseorang yang
mampu mencintai dan memanjakan dirinya, cenderung menjauh dari orang
yang terlalu agresif. Tipe wanita yang mau mengorbankan segalanya demi
keluarga. Menyukai suasana romantis dan selalu ingin dipuji.
Jodoh terbaik bagi cewek cancer adalah cowok capricorn dan aries.
Jodoh terbaik bagi cewek cancer adalah cowok capricorn dan aries.
LEO (23 Juli – 22 Agustus)
Cowok leo adalah seorang flamboyan yang
menarik para wanita. Mencintai dan mengagumi wanita cantik. Memilih
wanita yang tidak mencuri perhatian lebih di keramaian. Seorang
ekstrovert yang suka tertawa, murah hari, dan menyukai yang terbaik
dalam segala hal. Memiliki opini tinggi terhadap diri sendiri. Jodoh
terbaik bagi cowok leo adalah cewek taurus atau aquarius.
Cewek leo selalu ingin dipuja.
Sayangnya, ia cenderung membuat kesalahan dalam memilih pasangan, sering
kali menuntut terlalu banyak dalam hal cinta.Cenderung malas jika
terlalu nyaman dengan kekasih. Setia dengan pasangan yang menunjukkan
perhatiannya dengan sungguh-sungguh.
Jodoh terbaik bagi cewek leo adalah cowok leo atau libra.
Jodoh terbaik bagi cewek leo adalah cowok leo atau libra.
VIRGO (23 Agustus – 22 September)
Cowok virgo memiliki rasa ingin tahu
yang besar terhadap wanita. Sangat tertarik dengan karier dan uang.
Merupakan figur ayah yang mampu melindungi pasangan sepenuh hati. Mau
berkomitmen jika telah 100% yakin terhadap pasangan. Memerlukan pasangan
yang mau mendukung karier dan mampu mengurus rumah dengan baik. Jodoh
terbaik bagi cowok virgo adalah cewek leo atau libra.
Cewek virgo memiliki standard tinggi
dalam menentukan pasangan. Cenderungmenikah di usia cukup dewasa dan
hanya jika telah mendapatka pasangan yang mampu memenuhi standard.
Seorang ibu rumah tangga yang sempurna, orangtua yang tegas, dan
pasangan yang baik. Sering kali menarik perhatian banyak pria di usia
pertengahan. Jodoh terbaik bagi cewek virgo adalah cowok taurus atau
capricorn.
LIBRA (23 September – 22 Oktober)
Cowok libra selalu merasa perlu
memuaskan pasangannya. Mencintai kecantikan di segala aspek kehidupan.
Sangat berwibawa dan ahli dalam menjalankan peran. Sering kali tidak
mampu memutuskan saat tiba waktunya mengambil tindakan. Menyukai wanita
yang berusia jauh lebih muda. Jodoh terbaik bagi cowok libra adalah
cewek aquarius atau scorpio.
Cewek libra sangat memperhatikan
penampilan, sering kali dipuji karena kecantikannya. Tujuan hidupnya
adalah memperoleh pujian dari banyak pria. Cenderung memilih pria yang
artistik dan pandai memuji. Jodoh terbaik untuk cewek libra adalah cowok
gemini atau taurus.
SCORPIO (23 Oktober – 21 November)
Cowok scorpio adalah seorang yang
persuasif dan sulit mengakui kekalahan. Cenderung selalu mengontrol
pasangan dan memberikan perhatian penuh pada pasangan, juga mengharapkan
hal yang sama dari pasangan. Seks adalah permainan kompetitif, sering
kali merasa cemburu dan dikuasai keinginan balas dendam. Jodoh terbaik
bagi cowok scorpio adalah cewek gemini atau capricorn.
Cewek scorpio memiliki daya tarik tinggi bagi pria, tipe wanita yang menggoda. Sangat menuntut dalam hal percintaan dan kurang sabar jika pasangan tidak mampu memuaskan. Cenderung setia pada pria yang dianggap sempurna. Jodoh terbaik bagi cewek scorpio adalah cowok virgo atau leo.
Cewek scorpio memiliki daya tarik tinggi bagi pria, tipe wanita yang menggoda. Sangat menuntut dalam hal percintaan dan kurang sabar jika pasangan tidak mampu memuaskan. Cenderung setia pada pria yang dianggap sempurna. Jodoh terbaik bagi cewek scorpio adalah cowok virgo atau leo.
SAGITARIUS (22 November – 21 Desember)
Cowok sagitarius sulit bahagia dengan
hanya satu wanita. Sulit berkomitmen dan tidak suka berhubungan terlalu
dekat dengan seseorang. Memerlukan kebebasan dan menyingkirkan cemburu
pada pasangan. Memilih wanita berpengalaman, yang mampu membuat cinta
menjadi lebih ringan. Menyukai pasangan dengan selera humor tinggi.
Memiliki rasa ingin tahu yang besar terhadap segala hal. Jodoh terbaik
bagi cowok sagitarius adalah cewek libra atau taurus.
Cewek sagitarius sangat santai, mampu
menjaga hubungan teman dengan mantan. Seorang filsuf yang jarang merasa
sedih. Cukup rasional, murah hati, jujur, dan baik hati. Mencintai
kebebasan dan memiliki kebutuhan untuk selalu bepergian. Tipe yang tidak
akan bahagia jika hanya diam di satu tempat. Wanita yang mahir menggoda
pria. Jodoh terbaik bagi cewek sagitarius adalah cowok aries atau
pisces.
CAPRICORN (22 Desember – 19 Januari)
Cowok capricorn sangat sensual, jarang
menolak permintaan. Teguh dalam menghadapi tantangan dan jarang pulang
dengan tangan hampa. Cinta adalah kebutuhan baginya. Mengharapkan
pasangan yang mampu mengimbangi dan mampu menjadi teman yang setia.
Mengharapkan pelayanan dari pasangan dalam setiap aspek kehidupan
Jodoh terbaik bagi cowok capricorn adalah cewek cancer atau scorpio.
Cewek capricorn cenderung menarik perhatian pria yang lemah. Seorang yang tidak mudah ditebak dan sangat bersemangat. Tipe wanita yang takut jatuh cinta. Saat menemukanorang yang tepat, bersedia untuk melakukan apa pun untuknya. Suka merawat diri, berpenampilan rapi, dan senang dipuji oleh pasangan. Jodoh terbaik bagi cewek capricorn adalah cowok cancer atau scorpio.
Jodoh terbaik bagi cowok capricorn adalah cewek cancer atau scorpio.
Cewek capricorn cenderung menarik perhatian pria yang lemah. Seorang yang tidak mudah ditebak dan sangat bersemangat. Tipe wanita yang takut jatuh cinta. Saat menemukanorang yang tepat, bersedia untuk melakukan apa pun untuknya. Suka merawat diri, berpenampilan rapi, dan senang dipuji oleh pasangan. Jodoh terbaik bagi cewek capricorn adalah cowok cancer atau scorpio.
10.59
Unknown
HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/").
Sebuah halaman web minimal mempunyai empat buat tag, yaitu :
<HTML> Sebagai tanda awal dokumen HTML.
<HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
<TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).
Contoh :
<TITLE>Tips HTML -- www.klik-kanan.com</TITLE>
<BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.
Atribut :
BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.
Contoh :
<BODY bgcolor="#000000" background="images/pcb.gif" text="#FFFFFF" link="#FF0000" vlink="FFFF00" alink="#0000FF">
Sebuah contoh sederhana dokumen HTML :
<HTML>
<HEAD>
<TITLE>Halaman pembuka
</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" background="images/gambar1.gif" text="#FF0000">
<HEAD>
<TITLE>Halaman pembuka
</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" background="images/gambar1.gif" text="#FF0000">
Letakkan text, images, dan link Anda di sini
</BODY>
</HTML>
</BODY>
</HTML>
Pengaturan Teks
Untuk
mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks
seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini
yang biasa digunakan dalam pengaturan teks :Headers: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.
Contoh :
<H2>Tutorial Html</H2>
Hasilnya akan terlihat seperti :
Tutorial Html
Paragraph Baru: <P> Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi.Line Break: <BR> Digunakan untuk pindah ke baris baru.
No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.
Font <FONT> Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR.
SIZE: Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.
FACE: Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.
COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).
Contoh :
<FONT SIZE=4 FACE="Verdana, Arial, Helvetica" COLOR="#FF0000">Contoh teks yang berwarna merah</FONT>
Hasilnya akan terlihat seperti :
Contoh teks yang berwarna merah
Contoh lainnya :
<FONT SIZE=2 FACE="Times_New_Roman" COLOR="#0066CC">
Base Font: <BASEFONT> Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.
Contoh :
<BASEFONT SIZE=2 FACE="Arial,Helvetica" COLOR="#FF0000">
Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :
Perhatian : Semua tag di bawah ini membutuhkan tap penutup.
<B> Bold text
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout -
<PRE> Preformatted Text <DFN> Definition
<BLINK> Text berkedip (lebih baik jangan digunakan)
<STRONG> Strong
<ADDRESS>
Italic
<CITE> Digunakan untuk quoting text
<CODE>
Monospaced font
(digunakan
bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)<SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<BIG> Ukuran teks akan lebih besar satu ukuran
<SMALL> Ukuran teks akan lebih kecil satu ukuran
<SUP> Membuat tekssuperscript
<SUB> membuat tekssub script
<ABBREV> Abbreviations
<ACRONYM> Untuk akronim
<PERSON> Digunakan untuk indexing
<Q> Membuat short inline quotation
<VAR> Membuat variable name, selalu dalam italics.
Terdapat tiga tipe list yang dapat digunakan, yaitu :
Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <LI>.
Contoh :
<UL>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</UL>
Hasil dari kode di atas adalah:
- Item nomer 1
- Item nomer 2
- Item nomer 3
Contoh :
<UL COMPACT TYPE=square> …
Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.
Contoh :
<OL TYPE=I>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</OL>
Hasil dari kode di atas adalah :
- Item nomer 1
- Item nomerr 2
- Item nomerr 3
1- Default numbers, 1, 2, 3, etc.
A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I- Romawi huruf besar. I, II, III, etc.
i- Romawi huruf kecil , i, ii, iii, etc.
Definition Lists: <DL>
Contoh :
<DL>
<DT> Item pertama.
<DD> Penjelasan tentang item pertama.
<DT> Item kedua.
<DD> Penjelasan tentang item kedua
</DL>
Hasil
dari kode di atas adalah :
Item
pertama.
Penjelasan tentang item pertama.
Item
kedua.
Penjelasan tentang item kedua
ImagesImages :
Digunakan
untuk menampilkan image atau animasi gif pada halaman web Anda.
Atribut :
alt, align=(center, left, right), hspave, vspace, border, width & height Contoh :
<IMG SRC="logo.gif" alt="Ini adalah logo halaman pembuka" width=200 height=100>
<IMG SRC="logo.gif" hspace=10 vspace=5 align=right border=2>
Links :
Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah.
Contoh :
<A HREF="halaman2.html">Klik di sini</A> Untuk membuat link ke halaman lain.
<A HREF="mailto:webmaster@klik-kanan.com">Klik di sini</A> Untuk membuat link pada alamat e-mail.
<A HREF="#aplikasi">Klik di sini</A> Untuk membuat link ke bagian lain pada halaman yang sama.
<A HREF="halamanlain.html#aplikasi">Klik di sini</A> Untuk membuat link kebagian lain pada halaman yang berbeda.
<A HREF="halaman2.html"><IMG SRC="gambar.gif"></A> Untuk membuat link dengan menggunakan gambar.
Tabel
Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda baca ini.
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE>
<TABLE>
Terdiri dari atribut :
- align - perataan : rata kiri (left), tengah (center) atau kanan (right).
- bgcolor - warna latar belakang (background) dari tabel.
- border - ukuran lebar border tabel (dalam pixel).
- cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).
- cellspacing - jarak antar cell (dalam pixel).
- width - ukuran tabel dalam pixel atau percent.
Contoh
:
<TABLE align="center" bgcolor="#0000FF" border="2" cellpadding="5" cellspacing="2" width="90%">
<TR>
<TABLE align="center" bgcolor="#0000FF" border="2" cellpadding="5" cellspacing="2" width="90%">
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
- align - perataan : rata kiri (left), tengah (center) atau kanan (right).
- bgcolor - warna latar belakang dari baris.
- valign - perataan vertikal : top, middle atau bottom.
Contoh
:
<TR align="right" bgcolor="#0000FF" valign=top>
<TD>
<TR align="right" bgcolor="#0000FF" valign=top>
Tag ini digunakan untuk membuat kolom baru pada tabel.
- align - perataan
- background - image yang digunakan sebagai latar belakang dari kolom.
- bgcolor - warna latar belakang
- colspan - lihat gambar contoh
- height - ukuran tinggi cell dalam pixels.
- nowrap - membuat supaya isi dari kolom tetap berada pada satu baris.
- rowspan - lihat gambar contoh
- valign - perataan vertikal :top, middle atau bottom.
- width - ukuran kolom dalam pixel atau percen.
Contoh
:
<TD align="right" background="back.gif" bgcolor="#0000FF" colspan="3" height="200" nowrap rowspan="2" valign="bottom" width="300">
<TD align="right" background="back.gif" bgcolor="#0000FF" colspan="3" height="200" nowrap rowspan="2" valign="bottom" width="300">
|
<table width="100" border="1"
cellspacing="2" cellpadding="2">
<tr> <td bgcolor="#0000FF"> </td> <td bgcolor="#FFFF66"> </td> <td rowspan="2" bgcolor="#FF3366"> </td> </tr> <tr> <td colspan="2" bgcolor="#33CC66"> </td> </tr> <tr> <td colspan="3" bgcolor="#FFCC99"> </td> </tr> </table> |
||||||||
|
<table width="100" border="0" cellspacing="0"
cellpadding="0">
<tr> <td bgcolor="#0000FF"> </td> <td bgcolor="#FFFF66"> </td> <td rowspan="2" bgcolor="#FF3366"> </td> </tr> <tr> <td colspan="2" bgcolor="#33CC66"> </td> </tr> <tr> <td colspan="3" bgcolor="#FFCC99"> </td> </tr> </table> |
Tables Tutorial
Let's begin with a simple and common use for tables: an office phone list. Suppose we have four people whose names we want on the list. The data could be arranged in a table like this:<TABLE>
<TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR>
<TR> <TD>Hallie Curry</TD> <TD>8372</TD> </TR>
<TR> <TD>Shari Silberglitt</TD> <TD>4827</TD> </TR>
</TABLE>
Which gives us this table:
Raha Mutisya
|
1493
|
Shalom Buraka
|
3829
|
Hallie Curry
|
8372
|
Shari Silberglitt
|
4827
|
<TABLE ...>
<TABLE ...>
creates the table.
Most of the overall properties of the table are defined here, such as if it has
borders and what is the table's background
color.<TR ...>
<TR ...>
(Table Row) defines
each row of the table.<TD ...>
<TD ...>
(Table Data) defines
each cell of the table. <TABLE BORDER=2>
<TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR>
<TR> <TD>Hallie Curry</TD> <TD>8372</TD> </TR>
<TR> <TD>Shari Silberglitt</TD> <TD>4827</TD> </TR>
</TABLE>which gives us
Raha Mutisya
|
1493
|
Shalom Buraka
|
3829
|
Hallie Curry
|
8372
|
Shari Silberglitt
|
4827
|
CELLPADDING
and CELLSPACING
By default, table cells tend to be squeezed close to each other. To give
your table cells a little more breathing room, use CELLPADDING
and CELLSPACING
.CELLSPACING
controls the
space between table cells. Although there is no official default, browsers
usually use a default of 2. <TABLE BORDER> |
<TABLE BORDER CELLSPACING=2>
|
<TABLE BORDER CELLSPACING=10>
|
||||||||||||
|
|
|
CELLPADDING
sets the
amount of space between the contents of the cell and the cell wall. The default
is 1. CELLPADDING
is usually
more effective than CELLSPACING
for spreading out the contents of the table. <TABLE BORDER> |
<TABLE BORDER CELLPADDING=1>
|
<TABLE BORDER CELLPADDING=10>
|
||||||||||||
|
|
|
COLSPAN
and ROWSPAN
Table cells can span across more than one column or row. The attributes COLSPAN
("how many across")
and ROWSPAN
("how many
down") indicate how many columns or rows a cell should take up.For example, we might want to create header cells for each department in our table of names and phone numbers. In this table, the header cells in the first and fifth rows span across two columns to indicate the department for each group of names.
<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH COLSPAN=2>Production</TH> </TR>
<TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR>
<TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR>
<TR> <TH COLSPAN=2>Sales</TH> </TR>
<TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR>
<TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR>
<TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR>
</TABLE>which gives us:
Production
|
|
Raha Mutisya
|
1493
|
Shalom Buraka
|
3829
|
Brandy Davis
|
0283
|
Sales
|
|
Claire Horne
|
4827
|
Bruce Eckel
|
7246
|
Danny Zeman
|
5689
|
BGCOLOR
. <TABLE BORDER=2 CELLPADDING=4>
<TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Production</TH> </TR>
<TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR>
<TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR>
<TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Sales</TH> </TR>
<TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR>
<TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR>
<TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR>
</TABLE>which gives this table:
Production
|
|
Raha Mutisya
|
1493
|
Shalom Buraka
|
3829
|
Brandy Davis
|
0283
|
Sales
|
|
Claire Horne
|
4827
|
Bruce Eckel
|
7246
|
Danny Zeman
|
5689
|
ROWSPAN
sets how many
rows a cell spans. ROWSPAN
can get a little confusing because it requires you to think through how the
cell affects the rows after the row it starts in. It's particularly useful in
this situation to add borders to the table during the design process, even if
the table won't ultimately use borders. This table code creates two header cells which span three rows each:
<TABLE BORDER=2 CELLPADDING=4>
<TR>
<TH ROWSPAN=3 BGCOLOR="#99CCFF">Production</TH>
<TD>Raha Mutisya</TD> <TD>1493</TD>
</TR>
<TR>
<TD>Shalom Buraka</TD> <TD>3829</TD>
</TR>
<TR>
<TD>Brandy Davis</TD> <TD>0283</TD>
</TR>
<TR>
<TH ROWSPAN=3 BGCOLOR="#99CCFF">Sales</TH>
<TD>Claire Horne</TD> <TD>4827</TD>
</TR>
<TR>
<TD>Bruce Eckel</TD> <TD>7246</TD>
</TR>
<TR>
<TD>Danny Zeman</TD> <TD>5689</TD>
</TR>
</TABLE>which creates
Production
|
Raha Mutisya
|
1493
|
Shalom Buraka
|
3829
|
|
Brandy Davis
|
0283
|
|
Sales
|
Claire Horne
|
4827
|
Bruce Eckel
|
7246
|
|
Danny Zeman
|
5689
|
frames
|
1
<FRAMESET cols="*,140"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> 2 <FRAMESET cols="100,*"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> 3 <FRAMESET rows="100,*"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> 4 <FRAMESET rows="*,60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> 5 <FRAMESET rows="*,60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="50%,50%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> </FRAMESET></FRAMESET> 6 <FRAMESET cols="*,50%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET rows="15%,15%,70%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> <FRAME SRC="menu3.htm" NAME="Frame4"> </FRAMESET></FRAMESET> 7 <FRAMESET cols="50%,50%"> <FRAMESET rows="50%,50%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="homepage2.htm" NAME="Frame2"> </FRAMESET> <FRAMESET rows="50%,50%"> <FRAME SRC="menu.htm" NAME="Frame3"> <FRAME SRC="menu2.htm" NAME="Frame4"> </FRAMESET></FRAMESET> 8 <FRAMESET rows="15%,70%,15%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="15%,70%,15%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> <FRAME SRC="menu3.htm" NAME="Frame4"> </FRAMESET> <FRAME SRC="homepage.htm" NAME="BIG"> </FRAMESET></FRAMESET> |
<!--
-->
|
Memberi
komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak
akan terlihat pada browser
|
<a
href>
|
Membuat
link ke halaman lain atau ke bagian lain dari halaman tersebut
|
<a
name>
|
Membuat
nama bagian yang didefinisikan pada link pada halaman yang sama
|
<applet>
|
Sebagai
awal dari Java applets
|
<area>
|
Mendefinisikan
daerah yang dapat diklik (link) pada image map
|
<b>
|
Membuat
teks tebal
|
<basefont>
|
Membuat
atribut teks default seperti jenis, ukuran dan warna font
|
<bgsound>
|
Memberi
(suara latar) background sound pada halaman web
|
<big>
|
Memperbesar
ukuran teks sebesar satu point dari defaultnya
|
<blink>
|
Membuat
teks berkedip
|
<body>
|
Tag
awal untuk melakukan berbagai pengaturan terhadap text, warna link &
visited link
|
<br>
|
Pindah
baris
|
<caption>
|
Membuat
caption pada tabel
|
<center>
|
Untuk
perataan tengah terhadap teks atau gambar
|
<comment>
|
Meletakkan
komentar pada halaman web tidak tidak akan nampak pada browser
|
<dd>
|
Indents
teks
|
<div>
|
Represents
different sections of text.
|
<embed>
|
Menambahkan
sound or file avi ke halaman web
|
<fn>
|
Seperti
tag <a name>
|
<font>
|
Mengganti
jenis, ukuran, warna huruf yang akan digunakan utk teks
|
<form>
|
Mendefinisikan
input form
|
<frame>
|
Mendefinisikan
frame
|
<frameset>
|
Mendefinisikan
attribut halaman yang akan menggunakan frame
|
<h1>
... <h6>
|
Ukuran
font
|
<head>
|
Mendefinisikan
head document.
|
<hr>
|
Membuat
garis horizontal
|
<html>
|
Bararti
dokumen html
|
<i>
|
Membuat
teks miring
|
<img>
|
Image,
imagemap atau an animation
|
<input>
|
Mendefinisikan
input field pada form
|
<li>
|
Membuat
bullet point atau baris baru pada list (berpasangan dengan tag <dir>,
<menu>, <ol> and <ul> )
|
<map>
|
Mendefinisikan
client-side map
|
<marquee>
|
Membuat
scrolling teks (teks berjalan) - hanya pada MS IE
|
<nobr>
|
Mencegah
ganti baris pada teks atau images
|
<noframes>
|
Jika
browser user tidak mendukung frame
|
<ol>
|
Mendefinisikan
awal dan akhir list
|
<p>
|
Ganti
paragraf
|
<pre>
|
Membuat
teks dengan ukuran huruf yg sama
|
<script>
|
Mendefinisikan
awal script
|
<table>
|
Membuat
tabel
|
<td>
|
Kolom
pada tabel
|
<title>
|
Mendefinisikan
title
|
<tr>
|
Baris
pada tabel
|
<u>
|
Membuat
teks bergaris bawah
|
Simbol
|
Karakter
yg ditampilkan
|
"
|
"
|
&
|
&
|
<
|
<
|
>
|
>
|
Œ
|
Å’
|
œ
|
Å“
|
Š
|
Å
|
š
|
Å¡
|
Ÿ
|
Ÿ
|
ˆ
|
ˆ
|
˜
|
˜
|
 
|
|
 
|
|
 
|
|
‌
|
|
‍
|
|
‎
|
|
‏
|
|
–
|
–
|
—
|
—
|
‘
|
‘
|
’
|
’
|
‚
|
‚
|
“
|
“
|
”
|
”
|
„
|
„
|
†
|
†
|
‡
|
‡
|
‰
|
‰
|
‹
|
‹
|
›
|
›
|
€
|
€
|
WITH
ENGGLIS
Frames Tutorial
Let's look at a basic example of how frames work:
|
The frameset file is the file you point your browser to.
The frameset file uses <FRAMESET ...> and <FRAME ...> to tell the
browser to go get more files to put on the page. |
|
The browser goes out again and retrieves the files which
will appear on the page.
|
|
The browser puts all the files on one page in separate
rectangles ("frames"). The user never sees anything from the
original frameset file.
|
<FRAMESET ...>
defines the
beginning and end of the table, and how many rows and columns that table will
have. <FRAME ...>
defines what will
go into each cell ("frame") of the table. Let's look in more detail at the example above. The entire contents of basicframeset.html (the frameset file) look like this:
This code
|
... creates this page (here's
the real thing)
|
<HTML> <HEAD> <TITLE>A Basic Example of Frames</TITLE> </HEAD> <FRAMESET ROWS="75%, *" COLS="*, 40%">
<FRAME SRC="framea.html">
<FRAME SRC="frameb.html">
<FRAME SRC="framec.html">
<FRAME SRC="framed.html">
<NOFRAMES>
<H1>No Frames? No Problem!</H1>
Take a look at our
<A HREF="basic.noframes.html">no-frames</A>
version.
</NOFRAMES>
</FRAMESET>
</HTML> |
<FRAMESET
Start the "table of
documents".
ROWS="75%, *"
The table should have two rows.
The first row should take up 75% of the height of the page, the second should
take up the rest.
COLS="*,
40%">
The table should also have two
columns. The second column should take up 40% of the width of the
page, the first column should take up the rest.
<FRAME
SRC="framea.html">
<FRAME SRC="frameb.html">
<FRAME SRC="framec.html">
<FRAME SRC="framed.html">
Put the four files into the
frames.
<NOFRAMES> ...
</NOFRAMES>
Every framed page should have a
no-frames alternative. The
<NOFRAMES>
content should go
inside the outermost <FRAMESET ...>
tag, usually just before the last </FRAMESET>
.
The most efficicent method for no-frames content is to link to a page which is
specifically designed for no-frames. </FRAMESET>
End the frameset.
There are several other aspects of frames to note from this example: <FRAMESET ...>
is used instead of the<BODY ...>
tag. The frameset file has no content which appears on the page, so it has no need for<BODY ...>
, which designates the content of the page. In fact, if you use<BODY ...>
(except inside<NOFRAMES>
), the frames will not appear. Tags in<HEAD>
, including<TITLE>
, still have their intended effects.- Rows and columns are
described by a list of widths or heights. For example
COLS="25%, *, 40%"
says that there will be three columns. The first column takes up 25% of the width of the page, the third column takes up 40% of the width of the page, and the asterisk ("*") means "whatever is left over". SeeCOLS
andROWS
for more details. - You do not explicitly
designate the start and ending of each row. The browser keeps adding
frames until it reaches the number designated by
COLS
, then starts another row.
Nested Framesets
Let's move now to a more real world example, and a few more techniques for using frames. One of the most popular uses for frames is the "title bar and side menu" method. We'll use as an example a page of recipes, pictured at right. The title of the page, "Great Recipes" stays stationary in a frame at top, a contents list is on the left, and the recipes themselves are in the large box on the right. As you click on the name of a recipe in the contents list, that recipe appears on the right. Go ahead and try out the real page. (We're sorry if these recipes make you hungry. They did us. These recipes come from the wonderful vegetarian recipe site Veggies Unite!.)Remember that a frameset is like a "table of documents" with rows and columns. The recipes page, however, has one column on top, but two on bottom. This is done by nesting framesets, putting one frameset inside another.
Here's the code for the frameset file for the recipes page:
<HTML>
<HEAD>
<TITLE>Great Recipes</TITLE>
</HEAD>
<FRAMESET ROWS="15%,*">
<FRAME SRC="recipetitlebar.html" NAME=TITLE SCROLLING=NO>
<FRAMESET COLS="20%,*">
<FRAME SRC="recipesidebar.html" NAME=SIDEBAR>
<FRAME SRC="recipes.html" NAME=RECIPES>
</FRAMESET>
<NOFRAMES>
<H1>Great Recipes</H1>
No frames? No Problem! Take a look at our
<A HREF="recipes.html">no-frames</A> version.
</NOFRAMES>
</FRAMESET>
</HTML>
frameset within frameset |
<FRAMESET ...>
tag says "this frameset will have two rows" (and, implicitly, only
one column, since COLS
was
left out). The first <FRAME ...>
tag puts a document in the first frame. The second frame is filled in not by a
document but by another frameset. The second <FRAMESET
...>
is creating a "table within a table", or, to be
more correct, a frameset within a frameset.Targeting Frames
Each frame is given a name using<FRAME NAME="...">
.
These names uniquely identify each frame. Using these names, links in other
frames can tell the browser which frame the link targets. For example, this code creates a framed page, naming the frames
TITLE
, SIDEBAR
, and MAIN
:
<FRAMESET ROWS="15%,*">
<FRAME SRC="tfetitle.html" NAME=TITLE SCROLLING=NO MARGINHEIGHT=1>
<FRAMESET COLS="20%,*">
<FRAME SRC="tfesidebar.html" NAME=SIDEBAR>
<FRAME SRC="tfemain.html" NAME=MAIN>
</FRAMESET>
<NOFRAMES>NOFRAMES stuff
</NOFRAMES>
</FRAMESET>
To target one of these frames, the link should have a
TARGET
attribute set to the name of
the frame where the linked page should appear. So, for example, this code
creates a link to tfetacos.html
and targets that link to the MAIN
frame:
this code
|
produces this
|
<A HREF="tfetacos.html" TARGET=MAIN>my link</A>
|
the link in this
pag
|
Targeting the Whole Window
Eventually in a framed site you want to "break out"... link to a page and have that page take over the entire window. To create this sort of link, we addTARGET="_top"
to the <A ...>
tag:
this code
|
produces this
|
<A HREF="wwtarget.html" TARGET="_top">
|
the link in this
page
|
In the previous example we used TARGET
to refer to a frame we had named MAIN .
In this example, however, we refer to a frame we never named: "_top" . We can do this because
the outermost frame (that is, the entire window) is already named
"_top". "_top" is a reserved name which is
automatically given to the entire window. So when we say TARGET="_top" , we are saying
"put the new web page in the entire window". Note that
"_top" needs to be in all lower-case, it should have quotes around
it, and don't forget the underscore ("_"). |
|
Forms Tutorial
Let's look at a very simple form:
this code
|
produces this
|
<FORM ACTION="/cgi-bin/mycgi.pl"> favorite color: <INPUT NAME="color"> </FORM> |
<FORM
ACTION="/cgi-bin/mycgi.pl">
Start the form here. The
ACTION
attribute, which is required
with every <FORM ...>
tag, is used with CGI, discussed below.
<INPUT
NAME="color">
Data entry field.
<INPUT ...>
creates most types of
form fields, but <TEXTAREA ...>
and <SELECT ...>
also create
certain types. </FORM>
End the form here.
Of course, this form doesn't do much. You can type something into the one
field, but that's it, nothing happens from there. In the next section, we
expand the form a little. Forms and CGI
The original and still most popular use for forms is in conjunction with CGI (Common Gateway Interface). In the CGI way of doing things, the data the user enters is sent to the web server, where a program processes the data and returns the results. In other words, all the data is processed on the server, not in the web browser.Let's expand our earlier example to show how to incorporate CGI:
<FORM ACTION="/cgi-bin/mycgi.pl">
favorite color: <INPUT name="favecolor">
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>which gives us
Here's what the new pieces mean:
<FORM
ACTION="/cgi-bin/mycgi.pl">
ACTION
tells the browser where to
send the data for processing (more on that shortly). ACTION
is required with every form, even
forms that don't use CGI. <INPUT
name="favecolor">
We've added the
NAME
attribute. NAME
identifies each field,
"names" it so it can be referred to later. <INPUT TYPE=SUBMIT
VALUE="Submit">
This
That's the basic set up for a CGI form, but what happens after the user
presses Submit? Consider, for example, this simple form:<INPUT ...>
tag creates the
"submit" button, which the user presses to send the form to the web
server. Here's the chain of events when the user hits "Submit":
- When the user presses Submit, the browser sends the form data to the web server.
- The web server launches the CGI program which was written to process this form.
- The CGI program does whatever it does with the data. The program might consult a database, perform calculations on the data, use the data to add the user to a mailing list, whatever the programmer wants it to do. Whatever else the program does, it generates a web page using HTML so the user can see the results of submitting the form.
- The CGI program passes the HTML back to the web server.
- The web server passes the HTML back to the browser.
NOTE: If you want to get started writing HTML forms but don't have a CGI set up yet, you can use our publicly available CGI at ../cgi-bin/mycgi.pl. This CGI will produce a web page of all the fields sent to it, so you can see if the forms work the way you intended. Most of the forms on the rest of this page will use this CGI.
Technically speaking there is no such thing as "a CGI". "CGI" is a standard protocol, not an actual implementation. However, it has become common to refer to a program which uses the CGI standard as "a CGI", and we will follow that custom here.
One of the reasons CGI is so popular is that the CGI program can be written in just about any programming language: C, C++, Perl (the most popular language for CGI), Visual Basic, etc. CGI was designed to allow great flexibility in processing the form data, while still allowing the results to be returned as HTML (or other formats, but HTML is the most popular).
Langganan:
Postingan (Atom)