Apakah HTML itu

8/7/2019 Apakah HTML itu

http://slidepdf.com/reader/full/apakah-html-itu 1/18

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 dikenaldan 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 dibolehkanmenggunakan 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

http://www.netscape.com/

http://www.geocities.com/cgi-bin/main/homestead/homechg.html

http://www.geocities.com/Tokyo/1912/indohp.html?200927#indeks%23indeks

http://www.netscape.com/

http://www.geocities.com/cgi-bin/main/homestead/homechg.html




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 hexadecimaldapat 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 dapatmenggunakan "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 pageini. 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 denganukuran 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 dapatditentukan. 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).


<OL>

<LI> bagian satu<LI> bagian dua

<LI> bagian tiga

</OL>


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

<dt>Mangga <dd>Mangga juga dapat dijumpai diseluruh Indonesia, hanya saja daerahtertentu 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 satukeluarga dengan buah citrun. Di Indonesia buah jeruk hampir tumbuh disemua

tempat.

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

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


http://www.geocities.com/Tokyo/1912/indohp.html?200927#ndeks%23ndeks

http://members.tripod.com/~Simbolon/



http://www.geocities.com/Tokyo/1912/indohp.html?200927#ndeks%23ndeks

http://members.tripod.com/~Simbolon/




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 1Item 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 1Item 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>


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


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


</TR>

<TR>


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



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



<TABLE BORDER>

<TR><TH>Head1</TH>

<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>

<TR><TH>Head2</TH>


<TR><TH>Head3</TH>


</TABLE>

SIDE HEADERS, ROWSPAN :

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

K OMBINASI :

Average

Height Weight

GenderMales 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

A1 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 1Item 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>


</TR><TR>


</TR>

</TABLE>

Cara 2:



A B C

D E F<TABLE BORDER CELLPADDING=0 CELLSPACING=10>

<TR>


</TR>

<TR>


</TR>

</TABLE>

Cara 3:

A B C

D E F

<TABLE BORDER CELLPADDING=10 CELLSPACING=10><TR>


</TR>

<TR>


</TR>

</TABLE>

Cara 4:

A B C

D E F

<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>

<TR>


</TR>

<TR>


</TR>

</TABLE>

ALIGNMENT, CAPTIONS, DAN SUBTABLES

TABEL DENGAN BEBERAPA GARIS

Januari Pebruari Maret

Ini cell 1 Cell 2Cell yg lain,

cell 3



Cell 4dan yg ini

adalah cell 5Cell 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


semua terpusat Cell 2Cell yg lain,

cell 3

rata kanan terpusatdefault,

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>


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




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


Ini cell 1 Cell 2Cell 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>


</TR>

</TABLE>


Ini cell 1 Cell 2Cell 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>


</TR>

</TABLE>

TABELNESTED:

Tabel ABCD Didalam Tabel 123456

1 2

3

A B

C D

4 5 6

<TABLE BORDER>

<TR> 

<TD>1</TD>

<TD>2</TD>

<TD>3

<TABLE BORDER>

<TR> 

<TD>A</TD>

<TD>B</TD>

</TR>

<TR> 

<TD>C</TD>

<TD>D</TD>

</TR></TABLE>

</TD>

</TR>

<TR> 

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

</TABLE>

WIDTH=100% Ini item 2

3 4


<TR><TD>WIDTH=100%</TD><TD>Ini item 2</TD>

</TR>


</TR></TABLE>

TABEL A TERPUSAT

A B C

D E F

<CENTER>


<TR>


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


<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 23 4

<TABLE BORDER WIDTH="50%" HEIGHT="15%">

<TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD>

</TR>


</TR>

</TABLE>

Documents

Apakah HTML itu