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.
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 :
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:
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.
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:
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:
<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:
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:
seperti ini:
<CENTER> Belajar membuat Home page </CENTER>
akan muncul:
Jika lebih dari satu baris yang akan dibuat ketengah maka semuanya akan ikut terpusat ketengah dengan tag <CENTER>.
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
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.
Jika anda ingin menginginkan tampilan teks seperti yang anda inginkan, hanya dengan menempatkan tag
diawal suatu paragraf dan tagdiakhir 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.
Kodenya <BLINK> Kelap-kelip Ibukota!</BLINK> akan terlihat seperti ini:
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:
<A NAME="nama_target_disini">teks_target</A>
<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.
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>
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"
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 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>
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
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 |
<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
|
||||
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>
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 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>
<form method=post
action="/cgi-bin/homestead/mail.pl?member_name">
Yang mana "member_name" adalah nama pemakai sendiri.
Selanjutnya dapat dikembangkan dengan formulir isian yang anda sukai, atau
tergantung keperluannya.
Buku tamu atau Guestbook diperlukan untuk menampung pesan, kesan ataupun komentar para pengunjung terhadap home page kita, dengan adanya komentar tersebut kita dapat memperbaiki atau menambah informasi di home page kita. Pengunjung yang lain juga dapat saling melihat komentar para pengunjung dengan mengklik "View my Page".
Anda dapat mendaftarkan home page anda ke LPAGE.COM untuk mendapatkan buku tamu.
Anda pengunjung ke Terima kasih!.
atau
http://www.oocities.org/Tokyo/1912/
Kembali ke GeoCities'