Pamrograman Berbasis Web |1

Internet Dan
Pemrograman
DASARn HTML

1.1 Dasar – Dasar Internet

Internet adalah rangkaian atau jaringan sejumlah computer yang saling
berhubungan. Internet berasal dari kata interconnected-networking. Internet
merupakan jaringan global yang menghubungkan suatu jaringan (network)
dengan jaringan lainnya di seluruh dunia.
Jaringan internet bekerja berdasarkan satu protocol (aturan). TCP/IP
yaitu Transmission Control Protocol/Internet Protocol adalah protocol standar
yang digunakan untuk menghubungkn jaringan-jaringan di dalam internet
sehingga data dapat dikirim dari satu computer ke computer lainnya. Setiap
computer diberikan suatu nomor unik yang disebut dengan alamat IP

1.2 Sejarah Internet

Cikal bakal jaringan internet yang kita kenal saat ini pertama kali
dikembangkan pada tahin 1969 oleh Departemen Pertahanan Amerika Serikat
dengan nama ARPAnet (US Defense Advance Research Project Agency).
ARPAnet dibangun dengan sasaran untuk membuat suatu jaringn computer
yang tersebar untuk menghindari pemusatan informasi di satu titik yang
dipandang rawan untuk dihancurkan apabila terjadi peperangan. Dengan cara ini
diharapkan apabila satu bagian dari jaringan terputus, maka jalur yang melalui
jaringan tersebut dapat secara otomatis dipindahkan k saluran lainnya.
Diawal 1980an, ARPAnet terpecah menjdi dua jaringan yaitu ARPANET
dan Milnet (sebuah jaringan militer), akan tetapi keduanya mempunyai
hubungan sehingga komunikasi antar jaringan tetap dapat dilakukan. Pada
mulanya jaringan interkoneksi ini disebut DARPA Internet, tapi lama-kelamaan
 Pamrograman Berbasis Web |2

disebut sebagai Internet saja. Sesudahnya, internet mulai digunakan untuk

kepentingan akademis dengan menghubungkan beberapa perguruan tinggi,
masing-masing UCLA, University of Calipornia at Santa Barbara, University of
Utah, dan Stanford Research Intitute. Ini disusul dengan dibukanya layanan
Usenet dan Bitnet yang memmungkinkan internet diakses melalui sarana
computer pribadi (PC). Berikutnya protocol standar TCP/IP mulai
diperkenalkan pada tahun 1982, disusul dengan penggunaan system DNS
(Domain Name Service) pada tahun 1984.
Di tahun 1986 lahir National Science Fondations Network (NSFNET)yang
menghubungkan para periset di seluruh negeri dengan 5 buah pusat super
computer. Jaringan ini kemudian berkemang untuk menghubungkan berbagai
jaringan akademis lainnya yang terdiri atas universitas dan konsorsium-
konsorsium riset. NSFNET kmudian mulai menggantikan ARPANET sebagai
jaringan riset utama di Amerika hingga pada bulan Maret 1990 ARPANET
secara resmi dibubarkan. Pada saat NSFNET dibangun, berbagai jaringan
internasional didirikan dan dihubungkan ke NSFNET. Australia, Negara-negara
Skandivania, Inggris, Perancis, Jerman dan Jepang segera bergabung kedalam
jaringan ini.

1.3 Pengenalan WWW

WWW atau yang sering disebut Word, Wide, Web adalah sebuah bagian
internet yang dikenal dalam dunia internet, dengan adanya WWW seorang
pengguna dapat menampilakan sebuah halaman virtual yang disebut dengan
website. World Wide Web merupakan sekumpulan informasi dari beberapa
server computer yang terhubung satu sama lain dalam internet. Setiap
informasi dihubungkan dengan link (hyperlink). Jika dilihat dari proses kerja
WWW (World Wide Web) dapat dibagi menjadi beberapa komponen seperti
sebagai berikut.
 Protocol : Protocol adalah sebuah media yang disatandarkan untuk
dapat mengakses computer di dalam sebuah jaringan, halama yang dapat
 Pamrograman Berbasis Web |3

diakses adalah halaman website. WWW memiliki standar protocol yang

bernama HTTP atau (Hypertext Transfer Protokol). Dengan menggunakan
protocol ini sebuah halaman yang ada di dalam computer jaringan dapat
dibuka dan diakses.
 Address : Merupakan alamat yang berkaian denga penamaan sebuah
computer dan jaringan. Alamat ini sebenarnya merupakan sebuah nomor
yang dimiliki sebuah computer yang sering disebut dengan nomor IP, akan
tetapi dengan adanya perkembangan jaman, maka dibutuhkan metode baru
yang bernama Domine Name, sehingga no IP tersebut difanti dengan
sebuah alamat yang dinamakan URL (Uniform Resource Lactor) yang
berkaitan dengan nama suatu instansi pemilik computer tersebut, missal
http://fik.ubl.ac.id
 HTML : Selain dari kedua media tersebut masih membutuhkan sebuah
media lagi yaitu HTML (Hypertext Markup Language), yaitu sebuah
Bahasa scriptingyang dapat menghasilkan sebuah halaman website sehingga
halaman tersebut dapat diakses pada setia computer pengakses (client).

1.4 Mengenal Script Dasar HTML

Hypertext Markup Language atau sering dikenal denga HTML adalah
sebuah bahasa scripting yang digunakan untuk memebuat halaman web. Pada
halaman web HTML merupakan bahasa scripting dasar yang berjalan berrsamaan
bahasa scripting lainnya.
Semua Tag-tag HTML bersifat dinamis, artinya kode HTML tidak dapat
dijadikan sebagai file executable program. Hal ini disebabkan HTML hanyalah
sebuah Bahasa Scripting yang dapat berjalan apabila dijalankan di dalam sebuah
browser. Ada beberapa Browser yang mendukung HTML antara lain Mozilla
Firefox, Google Crome, Internet Explore, Opera dan lain-lain. Jadi pada saat
ingin membuka halaman yang berasal dari HTML anda dapat melihat bentuk
pengkodeannya dengan cara mengklik menu view >> source maka disana akan
ditampilakan semua tag beserta ini dari halaman web tersebut.
 Pamrograman Berbasis Web |4

Semua bahasa scripting yang berjalan d halaman web dapat didukung oleh
HTML, biasanya bahasa-bahasa tersebut melakukan embeded Script pada tag-
tag HTML. Karena HTML merupakan sebuah kode scripting dan bukan dan
bukan merupakan program kompiler maka anda dapat menuliskan semua kode-
kode program dengan menggunakan editor yang anda sukai, adapun editor yang
dapat digunakan adalah Adobe Dreamweaver, Font Page, Home Site, Note
Pad, atau anda juga dapat menggunakan NetBeans sebagai editor dalam bahasa
pemrograman Java.

1.5 Sintaks Dasar HTML

Sebagai sebuah elemen dasar didalam pemrograman web, HTML memiliki
beberapa aturan-atuaran dalam penulisan yang semuanya harus dipenuhi,
sehingga dengan adanya aturan tersebut seorang programer web harus
konsisten dalam penulisan semua tag-tag HTML.
HTML memiliki beberapa sintaks dasar yang hampir mirip dengan semua
pemrograman baik yang berbasis web maupun visual, kemiripan itu terletak
pada struktur pemrograman yang dimulai dan diakhiri dengan sebuah sintaks.
Sebagai contoh pada pemrograman java kita mengenal tanda <% sebagai awal
program dan tanda %> sebagai akhir program.
1. Tag HTML
Dokumen HTML selalu didahului dengan sebuah Tag yang menandakan
bahwa Dokumen tersebut adalah dokumen HTML. Tag tersebut adalah
<html> dengan seintaks penulisan
<html>
Isi web................
</html>
Dengan demikian semua isi yang ada didalam Tag HTMLakan dianggap
sebagai dokumen HTML.
 Pamrograman Berbasis Web |5

2. Tag HEAD
Dalam sebuah halaman HTML, terdapat tag yang digunakan untuk
mendefinisikan halaman web, dalam bagian initerdapat beberapa tag yang
berfungsi untuk mendefinisikan judul yang berkaitan dengan beberapa
halaman web yang dibuat.
Tag yang berguna untuk mendefinisikan judul web adalah tag TITLE yang
dalam penulisannya dapat dilihat dibawah ini :
<head>
<title> ..... halaman home ..... </title>
</head>
Selain TITLE, tag HEAD juga memiliki elemen yang berguna untuk
memberikan informasi yang berhubungan dengan halaman web HTML
tersebut, tag yang digunakan untuk mendefinisikan informasi halaman web
tersebut adalah META dengan penggunaan seperti berikut :
<META atribut=”value”>

Tabel 1.1 Atribut yang digunakan dalam tag META

Atribut Value Keterangan
Digunakan untuk mendeklarasikan kedudukan pengisi,
Name Text
misalnya “Programer”
Menjelaskan dari judul yang dideklarasikan pada
Content Text
atribut name
http-equiv Text Untuk mendeklarasikan Atribut Server HTTP
Contoh, penggunaan META didalam aplikasi web yang berkaitan dengan
programernya (pembuat program) :
<Meta name=”programmer” content=”reni nursyanti”>
<Meta http-equiv=”expier” content=”mon,14 April 2014 16:00:00 gmt”>
Dari tag diatas kita memperoleh keterangan bahwa program tersebut
dibuat oleh programmer bernama reni nursyanti, dan d buat pada bulan
april 2014, jam 16:00.
 Pamrograman Berbasis Web |6

3. Script yang Pertama

Didalam HTML tag yang menyatakan awal program diatandai dengantag
<HTML> dan kemudian dapat diakhiri dengan tanda tutup </HTML>.
Dengan menggunakan tanda mulai dan tanda akhir dapat diartikan bahwa
semua isi data yang ada didalam tag <HTML> </HTML>merupakan halaman
isi dari sebuah web. Berikut adalah Struktur bahasa dari sebuah halaman
HTML yang digunakan dalam membuat sebuah halaman web.
<HTML>
<HEAD>
<TITLE> Judul Web </TITLE>
</HEAD>
<BODY>
... isi body / semua isi web berada disini ...
</BODY>
</HTML>
Untuk lebih jelasnya mari kita lihat halaman web pertama dengan
menggunakan sintaks dasar HTML seperti berikut :
Scritp pertama HelloWord.html

Akhir script
 Pamrograman Berbasis Web |7

Jika script diatas dijalankan maka browser akan menampilkan hasil seperti
gambar berikut ini :

Gambar 1.1 Hasil program HelloWord.html

setelah di jalankan pada browser

4. Penjelasan Sintaks
Pada script diatas dapat diperhatikan bahwa semua tag yang digunakan
memiliki pasangan pembuka <> dan penutup </>, sebagai contoh pada tag
HTML dimulai dengan tanda <HTML> dan diakhiri dengan tanda </HTML>.
Ada beberapa kode yang wajib ada dalam HTML, tag-tag itu antara lain :
 <html> </html> : Didalam tag HTML, hal yang harus ada adalah kode
HTML karena kode ini akan menyatakan jenis dokumen yang kita ketik.
Tah HTML wajib ada dan kemudiann harus di tutup dengan kode
</HTML>
 <head> </head> : Kode <HEAD>jika diartikan berarti kepala, didalam
web pun kode <HEAD> juga diartikan sebagai kepala dalam program.
Tag ini diawali dengan kode <HEAD> kemudian diakhiri dengan kode
</HEAD>, kode ini diletakan setelah pembuka <HTML>.
 <title> </title> : Kode ini akan selalu diletakkan didalam kode
<HEAD>, kode ini dimaksudkan uantuk mendeklarasikanjudul yang akan
di tampilkan dalam browser web yang dimuat.
 Pamrograman Berbasis Web |8

 <body> </body> : Merupakan kode yang digunakan untuk meletakkan

senua isi web yang akan dibuat, kode ini diawali dengan tanda <BODY>
dan diakhiri dengan tanda </BODY>

Didalam penulisannya HTML tidak membedakan antar penggunaan huruf

besar dan kecil, misalnya pada saat andamenggetikan <HTML> maka akan
sama bila anda menggetikan kode <Html> ataupun <html> jadi pada
HTML tidak mengenal istilah Case Sensitive.
 Pamrograman Berbasis Web |9

pengaturan
halaman
dan paragraf
2.1 Pengaturan Warna dan Backround
Pada halaman web yang akan dibuat kita dapat menentukan warna latar
belakang atau backround pada web tersebut, pengaturan warna dapat dilakukan
dengan atribut yang disisipkan pada tag <BODY> sehingga atribut dapat
mempengaruhi semua halaman web yang dibuat.
Selain warna kita juga dapat mengatur backround dengan gambar. Fungsi
backround pada halaman web berguna untuk memperindah tampilan halaman
web tersebut, namun apabila penggunaan gambar terlalu banyak maka akan
berpengaruh pada kecepatan akses web tersebut.

Tabel 2.1 Atribut yang digunakan dalam Tag Body

Atribut Value Keterangan
Bgcolor #000000 - #ffffff Untuk menentukan warna background
Background File gambar Untuk membuat backround gambar
Text #000000 - #ffffff Warna text pada seluruh halaman
Link #000000 - #ffffff Warna Hyperlink
Vlink #000000 - #ffffff Warna Link yang telah dikunjungi
Alink #000000 - #ffffff Warna Link yang aktif
Leftmargin 0 – n Mengatur jarak margin kiri halaman
Topmargin 0 – n Mengatur jarak margin atas halaman
Margin weight 0 – n Mengatur jarak lebar margin halaman
Marginheight 0 – n Mengatur jarak tinggi margin halaman
 P a m r o g r a m a n B e r b a s i s W e b | 10

a. Backround Warnana
Warna backround merupakan salah satu elemen yang sangat diperlukan
dalam membedakan setiap halaman web, selain itu warna backround memiliki
faktor phisikologis warna dalam interaksi user dengan web, sehingga dapat
mempengaruhi ketertarikan seorang user untuk selalu berkunjung ke web
tersebut.
Dalam pengaturannya untuk mengubah warna sebuah halaman web, kita
dapat menyisipkan atribut pada tag <BODY> dengan menggunakan atribut
bgcolor=”value”. Berikut contoh penulisan script pengaturan warna pada
halaman web :
<BOBY bgcolor=”value”> ... isi web ... </BODY>

Kemudian pada value kita dapat mengisikan berbagai macam warna yang
kita inginkan dengan menuliskan warna-warna tersebut menggunakan bahasa
inggris seperti (red, yellow, pink, green, blue, black dll) atau dengan
menggunakan kode ASCII yang berasal dari campuran warna-warna dasar (Red
Green Blue), dalam penulisan menggunakan kode ASCII kita harus mengawali
dengan tanda pagar seperti ini (#). Adapun komposisi pengaturan warna
dengan menggunakan kode ASCII dapat dilihat melalui tabel di bawah ini :

Tabel 2.2 Warna dengan Kode ASCII

Warna Kode Hexadesimal
Red #FF0000
Green #00FF00
Blue #0000FF
Kuning #FFFF66
Putih #FFFFFF
Abu-abu #CC9999
Biru muda #00CCFF
 P a m r o g r a m a n B e r b a s i s W e b | 11

Berikut contoh penulisan script program HTML untuk pengaturan warna

backround:

Contoh Script BackgroundWarna.html

<HTML>
<HEAD>
<TITLE> Backround Warna </TITLE>
</HEAD>
<BODY bgcolor=”green”>
Warna halaman denga backround hijau
</BODY>
</HTML>

Gambar 2.1 Tampilan Program BackgroundWarna.html pada browser

b. Background Gambar
Selain warna, background juga dapat berupa gambar, dengan gambar maka
tampilan halaman web akan lebih indah sehingga akan nampak lebih profesional.
Atribut yang digunakan dalam memasukkan gambar sebagai media latar belakang
adalah background yang diikuti dengan alamat file gambar yang dimaksud. Kode
tersebut dapat disipkan pada tag <BODY>, berikut adalah penulisan atribut
backround gambar :
<BODY backround=”alamat file”> .. isi web .. </BODY>
 P a m r o g r a m a n B e r b a s i s W e b | 12

Berikut ini contoh penulisan script pemrograman yang menyisipkan

background berupa gambar :

Contoh Script BackgroundGambar.html

<HTML>
<HEAD>
<TITLE> Background Gambar </TITLE>
</HEAD>
<BODY background=”gambar/logoUBL.jpg”>
Background bergambar logo UBL
</BODY>
</HTML>

Gambar 2.2 Tampilan Program BackgroundGambar.html pada browser

c. Warna pada Teks

Pada halam web secara standar background berwarna putih maka secara
default pula warna pada text yaitu hitam, untuk dapat mengubah warna text
kita dapat menyisipkan atribut text pada tag <BODY> seperti berikut :
<BODY text=”warna”> ... isi web ... </BODY>

Untuk lebih jelasnya buatlah halaman script dengan background standar

dan dengan text berwarna biru:
 P a m r o g r a m a n B e r b a s i s W e b | 13

Contoh Script TextWarna.html

<HTML>
<HEAD>
<TITLE> Text Warna </TITLE>
</HEAD>
<BODY btext=”blue”>
Halaman web dengan text berwarna Biru
</BODY>
</HTML>

Gambar 2.3 Tampilan Program TextWarna.html pada browser

d. Warna pada Link

Link atau Hyperlink adalah sebuah metode yang berupa text maupun
gambar yang dapat di klik dan digunakan untuk menghubungkan antara halaman
yang satu dengan halaman lainnya. Dengan menggunakan link kita dapat
berpindah-pindah halaman web dengan cepat.
Disini kita dapat mengatur warna dari sebuat text link agar berbeda dari
text standar yang ditulis dalam halaman web tersebut. Dalam pemberian
warna pada link, HTML mengenal tiga macam atribut yaitu LINK, VLINK dan
ALINK. Berikut ini adalah contoh penulisan atribut link, vlink, dan alink yang
disispkan pada tag <BODY> :
 P a m r o g r a m a n B e r b a s i s W e b | 14

<BODY link=”warna” vlink=”warna” alink=”warna”>

... isi web ...
</BODY>

Berikut Penjelasan dari Sintaks diatas :

 <Body link=”warna”> : menentukan warna link yang belum dikunjungi
 <Body vlink=”warna> : menentukan warna link yang halamannya
telah dikunjungi
 <Body alink=”warna> : merupakan warna untuk link yang telah aktif
Setelah dikunjungi halamannya

e. Pengaturan Area Kerja

Area kerja adalah tempat dimana posisi kursor berada ketika pertama kali
kita memasuki halaman web, kita dapat menentukan area kerja apakah di
tengah-tengah ataukah di pinggir. Untuk meletakkan area kerja terdapat
empat atribut yang disisipkan pada tag <BODY> yaitu sebagai berikut :
1. Leftmargin=”value” : menentukan batas paling kiri
2. Topmargin =”value” : menentukan batas paling atas
3. Marginwidth=”value” : menentukan batas lebarnya
4. Marginheight=”value” : menentukan batas ketinggian

<Body leftmargin=”value” topmargin=”value” marginwidht=”value”

marginheight=”value>

Contoh Script AreaKerja.html

HTML>
<HEAD>
<TITLE> Area Kerja</TITLE>
</HEAD>
<BODY leftmargin=”50” topmargin=”50” marginwidht=”25”
 P a m r o g r a m a n B e r b a s i s W e b | 15

marginheight=”25”>
Area kerja halaman web
</BODY>
</HTML>

Gambar 2.4 Tampilan Program AreaKerja.html pada browser

2.2 Memformat Text

Dengan menggunakan tag HTML kita dapat memformat text sesuai denga
kebutuhan contohnya cetak tebal pada tulisan, cetak miring atau cetak
bergaris bawah. Beberapahal yang perlu dilakukan dalam mengatur atau
memformat text adalah pewarnaan serta bentuk karakter dalam halaman web.

a. Mencetak Huruf Tebal, Cetak Miring dan Cetak Garis Bawah

Berikut beberapa Tag yang digunakan untuk memformat atau mencetak
huruf tebal, cetak miring dan cetak garis bawah :
 <B> : membuat huruf cetak tebal (BOLD)
 <I> : membuat huruf cetak miring (ITALIC)
 <U> : membuat huruf cetak garis bawah (UNDERLINE)
 <S> : membuat huruf coret (STRIKEOUTE)
Untuk lebih jelasnya, berikut ini adalah contoh Script HTML dengan
menggunakan format text :
 P a m r o g r a m a n B e r b a s i s W e b | 16

Contoh Script Format_Text.html

HTML>
<HEAD>
<TITLE> Format text halaman </TITLE>
</HEAD>
<BODY>
<B> ini huruf dengan cetak tebal </B> <BR>
<I> ini huruf dengan cetak miring </I> <BR>
<U> ini huruf dengan cetak garis bawah </U> <BR>
<S> ini huruf dengan di coret </S> <BR>
</BODY>
</HTML>

Gambar 2.5 Tampilan Program Format_Text.html pada browser

b. Membuat Text Format Kimia/Matematika

Dalam memformat text HTML kita juga dapat membut format seperti
pada unsur-usur kimia, misalkan H2O, CO2 dan lain-lain. Format tersebut
sering disebut dengan istilah supercribe atau subscribe. Berikut Tag yang
digunakan dalam memformat text Kimia/Matematika tersebut :
 <SUB> : membuat huruf menjorok kebawah / Subscibe
 <SUP> : membuat huruf menjorok keatas / Superscribe
Sebagai Contoh perhatikan Script HTML, berikut ini :
 P a m r o g r a m a n B e r b a s i s W e b | 17

Contoh Script Format_TextKimia.html

HTML>
<HEAD>
<TITLE> Format text kimia </TITLE>
</HEAD>
<BODY>
Manusia hidup membutuhkan air atau H₂O <BR>
4 (empat) adalah hasil dari perpangkatan 2²
</BODY>
</HTML>

Gambar 2.5 Tampilan Program Format_TextKimia.html pada browser

c. Memformat Jenis Huruf, Ukuran dan Warna

Ukuran huruf sangant penting fungsinya di dalam halama web, karena kita
tidak akan membuat ukuran huruf yang sama antara content dengan judul
halaman, selain itu kita juga dapat melakukan penentuan warna huruf yang
hanya pada text yang akan diberikan efek warna.
HTML menyediakan tag <FONT> yang digunakan untuk memformat huruf
jenis, ukuran dan warna huruf tersebut. Tag FONT memiliki beberapa atribut,
seperti yang terdapat pada tabel dibawah ini :
 P a m r o g r a m a n B e r b a s i s W e b | 18

Tabel 2.3 Atribut yang digunakan pada tag FONT

Atribut Value Keterangan
SIZE 1-7 Menentukan besar ukuran karakter huruf
COLOR #000000 Menentukan warna huruf
FACE font Menentukan jenis huruf yang digunakan

Berikut Script HTML untuk memeperjelas pembahasan format text dengan

menggunakan font dengan ukuran huruf dan jenis huruf.
Contoh Script Format_Font.html
HTML>
<HEAD>
<TITLE> Format bentuk huruf </TITLE>
</HEAD>
<BODY>
<FONT size=”+5” face=”arial” color=”red”>
Jenis Font Arial berwarna Merah
</FONT>
</BODY>
</HTML>

Gambar 2.6 Tampilan Program Format_Font.html pada browser

 P a m r o g r a m a n B e r b a s i s W e b | 19

d. Memformat Text di tengah Halaman

Untuk dapat menengahkan sebuah kalimat di dalam HTML sangatlah
mudah, kita hanya memerlukan sebuat tag <center> yang kemudian langsung
diikuti oleh kalimat yang akan ditengahkan dan kemudian ditutup dengan tag
</center>.
Berikut adalah contoh script HTML, untuk memperjelas format text di
tengah halaman.
Contoh Script Format_Center.html
HTML>
<HEAD>
<TITLE> Format Center </TITLE>
</HEAD>
<BODY>
<center> text ini ditengah halaman </center>
</BODY>
</HTML>

Gambar 2.6 Tampilan Program Format_Center.html pada browser

e. Ganti Baris dan Paragraf

2.3