Web Programming

PERTEMUAN II
PENGENALAN HTML
I. PENGANTAR HTML
HyperText Markup Language merupakan standard bahasa yang digunakan untuk
menampilkan document web, yang biasa anda lakukan dengan HTML yaitu :
Mengontrol tampilan dari web page dan contentnya.
Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.
Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara
online.
Menambahkan objectobject seperti image, audi, !ideo dan juga ja!a applet dalam
document HTML.
"okumen HTML disebut sebagai markup language karena mengandung tandatanda tertentu
yang digunakan untuk menentukan tampilan suatu teks tersebut dalam suatu dokumen.
"okumen HTML disebut sebagai hypertext, ini berarti suatu dokumen tidak harus dibaca
secara berurutan dari atas ke bawah. "okumen dapat dibaca langsung menuju ke topik tertentu
secara langsung dalam dokumen dengan menggunakan teks penghubung.
II. SEJARAH HTML
Tahun #$%&, '(M memikirkan pembuatan suatu dokumen yang akan mengenali setiap
elemen dari dokumen dengan suatu tanda tertentu. '(M kemudian mengembangkan suatu
jenis bahasa yang menggabungkan teks dengan perintahperintah pemformatan dokumen.
(ahasa ini dinamakan Markup Langiage, sebuah bahasa yang menggunakan tandatanda
sebagai basisnya. '(M menamakan sistemnya ini sebagai )enerali*ed Markup Language atau
)ML.
Tahun #$%+, ',- menyatakan bahwa '(M memiliki suatu konsep tentang dokumen yang
sangat baik, dan kemudian mengeluarkan suatu publikasi . ',- %%/$ 0 yang menyatakan
markup language sebagai standar untuk pembuatan dokumendokumen. ',- membuat
bahasa ini dari )ML milik '(M, tetapi memberinya nama lain, yaitu ,)ML . ,tandard
)enerali*ed Markup Language 0.
',- dalam publikasinya meyakini bahwa ,)ML akan sangat berguna untuk pemrosesan
informasi teks dan sistemsistem perkantoran. Tetapi diluar perkiraan ',-, ,)ML dan
terutama subset dari ,)ML, yaitu HTML juga berguna untuk menjelajahi internet. 1hususnya
bagi mereka yang menggunakan 2orld 2ide 2eb.

1

III. PROGRAM EDITOR HTML
3ntuk membuat dokumen HTML, anda perlu mengetahui dan mempelajari tagtag yang
digunakan untuk menandai bagianbagian dari suatu dokumen HTML. 4nda dapat menggunakan
program editor teks biasa seperti 5otepad untuk aplikasi 2indows atau ,idekick dan 2ord,tar
dalam format 5on "ocument untuk aplikasi "-,.
,emua dokumen HTML harus disimpan sebagai file teks murni. 4da dua macam ekstensi
file yang dapat digunakan, yaitu ekstensi file 6.html7 . untuk sistem operasi 35'8 atau 2'5"-2,
$90 atau 6.htm7 . untuk sistem operasi "-,:2'5"-2, ;.x0
IV. STRUKTUR DOKUMEN HTML
"alam dokumen HTML, elemen dibagi menjadi tiga kategori utama, yaitu :
#. <lemen =HTML> yang menyatakan suatu dokumen HTML
?. <lemenelemen =H<4"> yang memberikan informasi tentang dokumen tersebut, seperti
judul dokumen atau hubungannya dengan dokumen lain
;. <lemenelemen =(-"@> yang menentukan bagaimana isi suatu dokumen ditampilkan
oleh browser, seperti paragraf, list .daftar0, tabel dan lainlain.
,truktur dokumen HTML terlihat seperti berikut ini :
<HTML>
<HEAD>
*** Bagian HEAD ***
</HEAD>
<BODY>
*** Bagian BODY ***
</BODY>
2
</HTML>
4. <L<M<5 H<4"
Tidak semua tag dapat diletakan dibagian H<4". Tagtag yang hanya boleh diletakan di
bagian H<4" adalah :
#. T'TL<
Audul dari dokumen. Tag ini mutlak diperlukan dalam semua dokumen HTML.
,ewaktu membuat judul, sebaiknya tidak menuliskan judul lebih dari +B karakter
Contoh :
<HTML>
<HEAD>
<TITLE>Home Pribadi Saya</TITLE>
</HEAD>
</HTML>
?. (4,< Menyatakan 3DL asal dari suatu dokumen
(ase menyediakan suatu jalur pencarian bagi dokumendokumen atau gambar yang
mempunyai hubungan dengan dokumen dari pengguna tag (4,< tersebut.
Contoh :
<HTML>
<HEAD>
<BASE HREF=Http://www.ina.com/homepage.html>
</HEAD>
</HTML>
;. ','5"<8
"igunakan untuk menyatakan bahwa ser!er dapat melakukan pencarian dalam dokumen
=','5"<8> memberitahukan browser untuk membuat suatu bentuk pencarian sederhana
dimana pemakai dapat memasukan satu atau lebih !ariabel pencarian.
Contoh :
<HTML>
<HEAD>
<BASE HREFH!!"#//$$$%ina%&om/'ome"age%'!m(>
<ISINDEX>
</HEAD>
<BODY>
*** i)i do*+men '!m( anda
</BODY>
</HTML>
3
B. L'51
Menyatakan hubungan antara dokumen dengan dokumen lainnya
=L'51> juga digunakan untuk menyatakan pengarang, indeks dan istilah, dokumen
sebelum atau sesudahnya, dan lainlain.
=L'51> merupakan suatu tag tunggal karena tidak mempunyai tag akhir =:L'51>, itu
sebabnya =L'51> berada pada bagian = H<4">
(erikut ini adalah atribut yang bisa digunakan pada tag =L'51>, yaitu :
HD<E Menunjuk pada dokumen atau bagian dokumen yang dituju oleh
L'51 tersebut
D<L Menyatakan hubungan antara dokumen saat ini dengan nilai pada
HD<E
D<F ,eperti D<L, menyatakan hubungan antara dokumen saat ini dengan
nilai pada HD<E, hanya saja dalam hubungan yang berlawanan
dengan D<L
54M< Menyatakan suatu link dari suatu anchor atau 3DL ke dokumen ini
3D5 Menyatakan suatu 3niform Desource 5umber untuk dokumen saat
ini
T'TL< ,eperti tag =T'TL<> befungsi sebagai judul
M<TH-", Menampilkan fungsifungsi yang didukung oleh dokumen saat ini,
bagaimana ia bisa dilihat oleh suatu browser
Contoh :
<HTML>
<HEAD>
<TITLE>,on!o' LI-.</TITLE>
<BASE HREF/'!!"#//$$$%(in*%&om/&on!o'0(in*%'!m(/>
<LI-. HREF/$e(&ome%'!m(/ REL/"re&ede)/>
<LI-. HREF/$e(&ome%'!m(/ TITLE/Se(ama! Da!ang/>
<LI-. RE1/made/ HREF/mai(!o#)am"+rna2'o!mai(%&om/>
<LI-. RE1/"re3io+)/ HREF/in4orma)i%'!m(/>
<LI-. RE1/ne5!/ HREF/"e)an%'!m(/>
</HEAD>
</HTML>
4
9. M<T4
Menyatakan metainformation . informasi tentang suatu informasi 0 dalam suatu dokumen
M<T4 mempunyai tiga buah atribut, yaitu :
54M< Merupakan informasi untuk suatu dokumen, bukan sebagai judul dokumen
HTTG<H3'F 4tribut ini menghubungkan elemen M<T4 ke respon protokol tertentu
C-5T<5T 'si dari nama suatu meta atau respon yang dibuat oleh HTTG
<H3'F
Contoh potongan program :
<META HTTP6E78I1/E5"ire)/ ,O-TE-T/9: ;+( 9<<=/>
<META HTTP6E78I1/Re4re)'/ ,O-TE-T/>/>
<META -AME/?E-ERATOR/ ,O-TE-T/In!erne! A))i)!an! 4or Mi&ro)o4! @ord
A%:B/>
+. 5<8T'"
"igunakan oleh editor HTML untuk membuat pengenal unik untuk dokumen tersebut
/. ,T@L<Mendefinisikan style untuk elemenelemen HTML
(. <L<M<5 (-"@
(agian (-"@, yang dinyatakan dengan tag =(-"@>I=:(-"@>, merupakan tubuh atau
isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.
4tribut (-"@ beserta fungsinya, yaitu :
#. 4L'51 : Menyatakan warna dari link yang sedang aktif
?. (4C1)D-35" : Menyatakan file gambar yang digunakan sebagai latar belakang
;. ()C-L-D : Menyatakan warna yang digunakan sebagai latar belakang
B. ()GD-G<DT'<, : Aika di set fixed, membuat suatu watermark yaitu background tetap
9. L<ETM4D)'5 : Mengatur margin kiri dari isi dokumen dengan ukuran pixel
+. L'51 : warna dari link yang belum pernah dikunjungi
/. T<8T : Mengatur warna teks dokumen web
%. T-GM4D)'5 : Mengatur margin atas dari isi dokumen dengan ukuran pixel
$. FL'51 : 2arna link yang pernah dikunjungi
Tabel warna yang digunakan pada dokumen HTML yang menggunakan kode heksadesimal atau
nama dari D)( :
24D54 5-M-D H<84"<,'M4L
(lack J&&&&&&
Maroon J%&&&&&
)reen J&&%&&&
-li!e J%&%&&&
5
5a!y J&&&&%&
Gurple J%&&&%&
Teal J&&%&%&
)ray J%&%&%&
,il!er JC&C&C&
Ded JEE&&&&
Lime J&&EE&&
@ellow JEEEE&&
(lue J&&&&EE
Euchsia JEE&&EE
4Kua J&&EEEE
2hite JEEEEEE
(erikut potongan program untuk menentukan warna background suatu dokumen :
<BODY B?,OLOR/CFFFFFF/>
<BODY B?,OLOR/@HITE/>
Contoh program dengan menggunakan stylesheet dan warna teks :
<HTML>
<HEAD>
<TITLE>8Di &oba $arna (in*</TITLE>
<STYLE !y"e/!e5!/&))/>
BODY Eba&*gro+nd#$'i!eF&o(or#b(a&*G
A#(in* E&o(or#redG
A#3i)i!ed E&o(or#maroonG
A#a&!i3e E&o(or#4+&')iaG
</STYLE>
</HEAD>
<BODY>
<A HREFP=09%'!m(>Te*) $arna mera'6do&%be(+m "erna' di*+nD+ngi<BR>
<A HREFP=0A%'!m(>Te*) $arna maroon6do&%"erna' di*+nD+ngi
</BODY>
</HTML>
C. T4)
HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen.
,uatu elemen HTML terdiri dari tagtag beserta teks yang ada dalam tagtag tersebut. Tag ini
dinyatakan dengan tanda lebih kecil .=0 dan tanda lebih besar .>0. Tag biasanya merupakan suatu
pasangan yang disebut dengan :
#. Tag awal, dinyatakan dalam bentuk =nama tag>
?. Tag akhir, dinyatakan dalam bentuk =:nama tag>
Eormat : <nama tag> teks yang ditampilkan </nama tag>
Contoh : untuk menampilkan teks dalam format teks miring
<I>Te*) ini !er(i'a! miring di bro$)er anda</I>
6
Tidak semua tag mengikuti aturan diatas. 4da beberapa macam bentuk tag yang dikenal
oleh HTML, dimana umumnya tagtag dalam dokumen HTML muncul dalam bentuk seperti barikut
ini :
#. =namaLelemen>teks=:namaLelemen>
Contoh : <TITLE>Home Page Saya</TITLE>
Tag yang umum dipaki dalam suatu dokumen HTML, yaitu tag yang mempunyai awal dan
akhir
?. =namaLelemen>
Contoh : =HD>
Tag tersebut disebut dengan tag tunggal, yaitu tag yang hanya terdiri dari tag awal saja
tanpa disertai dengan tag akhir.
;. =namaLelemen namaLatributMargumen>teks=:namaLelemen>
Contoh : <A HREFH'!!"#//$$$%mi&ro)o4!%&om//>Mi&ro)o4! Page</A>
Tag yang disertai dengan suatu atribut didalamnya. (anyak elemen dari suatu tag
mempunyai argumenargumen yang mengirimkan parameter pada browser yang
menangani elemen ini. 4rgumenargumen dari elemen ini disebut atribut elemen.
Contohnya adalah elemen 4nchor .=4>0 yang mempunyai beberapa atribut, salah satunya
adalah HD<E yang menyatakan dokumen atau link yang dihubungkan dengan teks yang
mengandung anchor tersebut.
D. ATRIBUT
Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag
tersebut. Misalnya : =G 4L')5M7left7> digunakan untuk membuat rata kiri suatu paragraf.
Tag yang digunakan adalah =G> dan atribut yang menyertainya adalah 4L')5 dengan nilai left.
5ilai atribut 4L')5 hanya bisa berupa center, left, right atau justify.
"alam HTML, nilai atribut dalam pasangan tanda petik ganda, kecuali jika :
5ilai merupakan suatu kumpulan dari nilai tertentu . misalnya dalam =G
4L')5M7left7> tanda petik ganda boleh dihilangkan, maka penulisan boleh =G
4L')5Mleft> 0.
5ilai hanya berisi angka, huruf dan titik . dalam ='M) ,DCM7picture:hiasan.gif7
4LTM7Menampilkan hiasan7>, kedua nilai tersebut memerlukan tanda petik ganda karena ,DC
mengandung tanda 6:7 dan 4LT mengandung spasi 0.
V. MEMPUBLIKASIKAN WEB SITE
7
,etelah 2eb Gage anda selesai, maka 2eb Gage tersebut perlu dipublikasikan agar 2eb
,ite anda bisa diketahui oleh orang lain. 3ntuk mempublikasikan 2eb ,ite tersebut, anda tinggal
mendaftarkan 2eb ,ite tersebut pada 2eb ,ite2eb ,ite yang mengkhususkan dirinya sebagai
yang memberitahukan kehadiran suatu 2eb ,ite baru.
4da B tempat yang bisa dipergunakan untuk mempublikasikan 2eb ,ite anda, yaitu :
#. ,itus yang gratis
Contoh : www.geocities.com
(iasanya fasilitas yang diberikan hanya sekedar untuk mempublikasikan 2eb,
tanpa dukungan fasilitasfasilitas lainnya.
?. Gada pro!ider tempat anda berlangganan internet
Contoh : www.indo.net.id , www.telkom.net
Easilitas yang diberikan hampir sama dengan situs gratisan, tetapi yang bisa
menggunakan situs ini untuk publish hanya yang berlangganan dengan pro!ider
tersebut.
;. Gada perusahaan yang melayani jasa 2eb Hosting . penyewaan penitipan 2eb 0
Contoh : www.cakraweb.co.id
Easilitas yang diberikan ber!ariasi, tergantung jenis layanan yang hendak dipilih.
B. Mempunyai ser!er sendiri
Contoh : www.gunadarma.ac.id
Easilitas yang ada ber!ariasi, tergantung dari keinginan 2eb "e!eloper situs
tersebut.
Cara untuk mempublikasikan 2eb ,ite anda :
#. Melalui situs gratis . www.geocities.com 0
4nda harus memilki email di www.yahoo.com
Melakukan registrasi pendaftaran di situs www.geocities.com , setelah melakukan
registrasi akan mendapatkan informasi sebagai berikut :
,elanjutnya anda dapat melakukan uploading atau transfer halaman 2eb anda ke
situs www.geocities.com dengan alamat www.geocities.com:account . email 0 ,
dengan menggunakan fasilitas file transfer yang sudah disediakan oleh mereka.
?. Melalui pro!ider internet
8
Tentunya kita harus berlangganan salah satu pro!ider yang ada
Eormat 4lamat 2eb yang akan digunakan : www.namapro!ider.net.id:Naccount
3ntuk melakukan uploading menggunakan fasilitas file transfer protokol.
;. Melalui perusahaan jasa 2eb Hosting
4nda harus mendaftarkan nama domain yang anda inginkan
1emudian melakukan registrasi ke salah satu perusahaan layanan 2eb Hosting
,etelah melakukan registrasi anda dapat mentransfer halamanhalaman 2eb ke
alamat situs yang sudah anda daftarkan.
B. Melalui ser!er sendiri
4nda harus membangun ser!er 2eb dengan koneksi internet yang permanen
"engan demikian maka anda dapat memulai membangun situs 2eb anda.
9

Web Programming

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Programming

Uploaded by

Copyright:

Available Formats

PERTEMUAN II

You might also like