Modul Pemrograman Web

[X23 LTD]

PEMROGRAMAN

WEB

DISUSUN OLEH : ANGGALIA WIBASURI, S.KOM

INFORMATICS AND BUSINESS INSTITUTE

DARMAJAYA

M

O

D

U

L

PEMROGRAMAN WEB | INFORMATICS & BUSINESS DARMAJAYA | 2

Chapter 1

Konsep Dasar dan HTML

(Hypertext Markup Language)

==================================

1.1 Pendahuluan

Untuk memulai belajar pemrograman maupun membuat sebuah halaman web

khususnya HTML, selain diperlukan penguasaan tentang perintah-perintah

pemrograman HTML tersebut, seorang pemrogram web juga harus mengetahui

arah dan tujuan serta distribusi terhadap hasil yang akan diperoleh. Untuk

mencapai tujuan tersebut seorang pemrogram harus mengetahui juga teknologi

yang tepat untuk digunakan dalam membantu pekerjaannya. Untuk membantu

penguasaan akan hal itu khususnya para pemula dibidang web, pada bab ini akan

dibahas mengenai cikal bakal adanya sebuah web, teori-teori yang berkaitan

dengan web, bahkan sampai dengan aplikasi-aplikasi maupun teknologi yang

terlibat didalamnya.

1.2 Sejarah Internet

Pada awalnya teknologi internet dikembangkan dikembangkan dan digunakan

oleh pihak militer, dalam hal ini Departemen Pertahanan Amerika Serikat, yang

secara khusus membidangi penganan dan pengelolaan informasi secara rahasia

bernama DARPA dengan hasil riset yang diperoleh berupa jaringan ARPANET.

ARPANET digunakan oleh kalangan militer Amerika Serikat untuk saling

bertukar informasi antara pusat komando dengan pasukan di lapangan tanpa


diketahui dan disadap oleh musuh. Informasi yang dapat disadap oleh jaringan ini

berupa teks, gambar, gambar bergerak, suara dan informasi lainnya yang berguna

untuk militer. Konsep inilah yang diambil dan kemudian melahirkan teknologi

jaringan internet yang digunakan oleh kalangan sipil.

Di kalangan sipil, pemanfaatan teknologi internet dimulai sekitar tahun 1993.

Pada saat itu, Tim Berners-Lee dan peneliti lainnya tergabung dalam sebuah

wadah yaitu European Particle Physics Lab, dalam sebuah institusi bernama

CERN (Consei European pour la Recherche Nucleaire) di Geneva Swiss. Teknik

yang dikembangkan yaitu membagi dan menshare data antar komputer dengan

menggunakan sebuah hypertext yang dapat diakses oleh sebuah program baru

yang dapat membaca dokumen-dokumen yang menggunakan format hypertext.

Beberapa kode-kode khusus disisipkan pada program baru ini, agar program baru

ini dapat bekerja sesuai dengan yang diinginkan. Kode-kode yang disisipkan pada

sebuah program baru ini kemudian dikenal dengan nama tag-tag dan program baru

ini kemudian dikenal dengan nama browser. Browser inilah yang kelak

merupakan software standart yang digunakan untuk mengakses sebuah informasi

dalam jaringan internet. Program baru yang berhasil dikembangkan oleh Berners-

Lee, telah disisipkan kode-kode khusus yang berfungsi untuk membaca dokumen

dengan format hypertext. Kemudian kemampuan browser terus ditingkatkan

seiring dengan kebutuhan, diantaranya kemampuan untuk melompat dari

dokumen satu ke dokumen yang lainnya (link).

Selain digunakan untuk mencari dokumen antara dokumen satu dengan dokumen

yang lainnya, internet juga dapat digunakan untuk menyimpan program, database,


dan lain-lain yang sifatnya Freeware atau gratisan. Istilah yang sangat populer

digunakan adalah downloads, seperti program-program opensource linux,

FreeBSD, Solaris, dan sebagainya. Sedangkan untuk media penyimpanan record

atau database dapat menggunakan MySQL.

Media internet juga dapat digunakan sebagai salah satu media promosi dan

hiburan, olahraga, sport, film dan lain-lain. Tetapi yang tidak kalah menariknya,

internet digunakan sebagai alat transaksi perbankan, pelayanan publik, pendidikan

sampai dengan info kesehatan, bahkan bisnis. Lahirlah teknologi-teknologi baru

dibidang pemanfaatan dan pemberdayaan jaringan internet seperti e-government

untuk pemerintahan, e-business untuk dunia usaha, e-leaning untuk dunia

pendidikan dan e-commerce untuk bisnis. Cara kerja dari teknologi internet

tersebut hamper sama, perbedaannya terletak pada fungsi yang dihasilkan tiap-tiap

teknologi internet tersebut. Misalnya untuk e-government informasi yang

ditampilkan berupa layanan pemerintah kepada masyarakat. Sebut saja layanan

pembuatan KTP secara online, dan lain sebagainya.

1.3 Peralatan yang Dibutuhkan

Peralatan-peralatan yang dibutuhkan dalam mengeksekusi latihan-latihan yang

ada pada buku ini, terdiri dari :

A. Perangkat Keras (Hardware)

Sebuah PC dengan processor minimal Pentium 1-166 Mhz. Semakin tinggi

prosessor semakin baik dan cepat dalam mengeksekusi tiap-tiap latihan

pada buku ini.


Memory minimal 32 Mb, paling tidak dari jenis EDO-RAM. Disarankan

dari jenis SDRAM atau yang lebih tinggi, misalnya DDR-SDRAM atau

RDRAM.

Harddisk minimal 2 GB dengan ruang free space (ruang kosong) sebesar

500 MB. Semakin besar kapasitas harddisk semakin leluasa anda untuk

membuat berbagai macam kreasi.

VGA card minimal 4 MB.

Sound card/ Perangkat multimedia (Optional).

CD-Rom Drive/ CDR-Drive (Optional)

Disket Drive

Modem 56 KB, untuk koneksi ke internet (Optional)

Scanner, untuk menscan gambar (Optional)

Printer, dan

UPS, apabila diperlukan.

B. Perangkat Lunak (Software)

Sistem Operasi yang disarankan Windows 95 ke atas, meskipun Anda

dapat menggunakan sistem operasi yang lain seperti linux, karena

pembahasan pada buku ini menggunakan sistem operasi Windows.

Browser dapat menggunakan Internet Explorer, tetapi jika anda

mempunyai Browser yang lain juga dapat digunakan, seperti : Opera,

Netscape, Mozila, dan lain sebagainya.

Web Editor yang dapat digunakan seperti notepad, front page, web edit,

dan lain-lain.


1.4 World Wide Web (WWW)

Internet merupkan jaringan global yang menghubungkan suatu network dengan

network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara

jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi.

Gambar 1. Pengaksesan informasi melalui hypertext. seseorang tidak harus

membaca isi dokumen secara berurutan

Dalam dunia internet kita sering mendengar kata WWW (World Wide Web)

yang mempunyai definisi adalah salah satu fasilitas dimana kita dapat saling

bertukar informasi di internet. Banyak orang berpendapat bahwa WWW adalah

dunianya sedang internet adalah jaringannya. Protocol standard aturan yang di

gunakan untuk berkomunikasi pada komputer networking, Hypertext Transfer

Protocol (HTTP) adalah protokol untuk WWW.


WWW bekerja merdasarkan pada tiga mekanisme berikut:

Protocol standard aturan yang di gunakan untuk berkomunikasi pada

computer networking, Hypertext Transfer Protocol (HTTP) adalah

protocol untuk WWW.

Address WWW memiliki aturan penamaan alamat web yaitu URL

(Uniform Resource Locator) yang di gunakan sebagai standard alamat

internet.

HTML digunakan untuk membuat document yang bisa di akses

melalui web.

1.5 Pengenalan HTML

Hypertext Markup Language (HTML) merupakan dasar untuk membuat sebuah

halaman website. Dokumen dan aplikasi yang dapat berjalan di atas web browser

umumnya memiliki format hypertext markup language (HTML). Meskipun

sekarang terdapat banyak tool atau software yang dapat digunakan untuk

merancang sebuah halaman secara WYSIWYG (what you see is what you get),

jadi apa yang anda lihat itulah yang akan anda dapatkan seperti frontpage,

dreamweaver, adobe golive, dll. Namun anda harus tetap menguasai HTML

karena HTML merupakan dasar apabila Anda ingin mempelajari dan lebih

mendalami tentang web programming. Hal ini menunjukan bahwa sangat

pentingnya mempelajari dasar-dasar HTML. Karena itu untuk dapat melakukan

pemrograman aplikasi di atas web anda harus terlebih dahulu menguasai HTML.

Pada bab ini akan dipelajari dasar-dasar penggunaan kode-kode HTML

daiantaranya : Struktur dasar HTML, dasar penggunaan TAG, penggunaan

komentar, penggunaan tag break row, penggunaan tag paragraf, penggunaan tag


center, penggunaan tag heading, menampilkan garis horizonatal dan penggunaan

tag divisi.

Hypertext Markup Language merupakan standard bahasa yang di gunakan untuk

menampilkan document web, yang bisa 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 object-object seperti image, audio, video dan juga

java applet dalam document HTML.

Gambar 2. Mekanisme kerja permintaan dokumen html

Keterangan :

Browser meminta sebuah halaman(informasi) ke suatu situs web

melalui protokol http.

Permintaan sampai dan diterima oleh sebuah web server.


Web server segera mengirimkan dokumen html yang diminta ke

klien bila ada, jika tidak akan memberikan pesan error bila

dokumen yang diminta tidak ada.

Browser pada sisi klien segera menampilkan dokumen(informasi)

yang diterima berdasarkan kode-kode pemformat yang terdapat

pada dokumen html.

1.6 Browser dan Editor

Browser merupakan software yang di install di mesin client yang berfungsi untuk

menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di

gunakan biasanya Internet Explorer, Netscape Navigator, Opera, Firefox dan

masih banyak yang lainya.

Gambar 3. Tampilan Web Browser Internet Explorer

Software yang digunakan untuk membuat web banyak sekali jumlahnya, seperti :

frontpage, dreamweaver, adobe golive, dll. Namun bagi para pemula dianjurkan

untuk tidak menggunakan software-software tersebut terlebih dahulu. Karena

kalau digunakan diawal anda belajar akan berdampak ketergantungan software


bagi anda sendiri sebab semuanya serba instant untuk membuat sebuah halaman

web. Oleh sebab itu disarankan menggunakan text editor notepad yang terdapat

pada paket windows. Tampilan notepad dapat dimunculkan dengan cara : klik

START – PROGRAM – ACCESSORIES – NOTEPAD atau bisa juga dibuka

dengan cara lain sesuai dengan setingan komputer Anda misalnya tinggal klik

double pada icon notepad di desktop apabila Anda sudah meletakkan icon di

desktop, dan mungkin ada cara lainya. Tampilan notepad dapat dilihat pada

gambar berikut :

Gambar 4. Membuka Notepad


Gambar 5. Tampilan Notepad

1.7 Tag-tag HTML

Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan

dengan tag <html>, <head>, dan <body> berikut tag-tag pasangannya. Setiap

dokumen terdiri atas tag head dan body. Elemen head berisi informasi tentang

dokumen tersebut, dan elemen body berisi teks yang sebenarnya yang tersusun

dari link, grafis, paragraf dan elemen lainnya.

Berikut ini adalah pola dasar sebuah dokumen HTML :

<html>

<head>

…. Informasi tentang dokumen HTML.

</head>

<body>

…. Informasi tentang yang akan ditampilkan dalam

browser web.

</body>

</html>


Command HTML atau yang biasanya disebut TAG, TAG digunakan untuk

menentukan tampilan dari dokumen HTML.

Contoh:

<BEGIN TAG> </END TAG>

Setiap dokumen HTML di awali dan di akhiri dengan tag HTML.

<HTML>

. . .

</HTML>

Tag tidak case sensitive, jadi bisa digunakan <HTML> atau <html> keduanya

menghasilkan output yang sama. Bentuk dari tag HTML sebagai berikut:

<ELEMENT ATTRIBUTE = value>

Keterangan :

Element = nama tag

Attribute = atribut dari tag

Value = nilai dari atribut.

Contoh:

<body bgcolor="lavender">

BODY merupakan element, BGCOLOR (background) merupakan atribut yang

memiliki nilai lavender. Untuk memulai bekerja dengan HTML kita bisa gunakan

editor Notepad atau editor lainya.


# Latihan Pertemuan 1.

1. Ketikkan tag-tag berikut di notepad.

<head>

<title>Belajar Web</title>

</head>

<body bgcolor="lavender">

<center>LATIHAN WEBSITE</center>

</body>

</html>

2. Simpan dengan nama file perdana.htm atau perdana.html

3. Buka dengan browser internet explorer file perdana.htm atau perdana.html

maka outputnya akan di tampilkan seperti gambar di bawah ini.

Gambar 6. Tampilan Internet Explorer

1.7.1 Struktur HTML Document

Dokumen HTML bisa di bagi mejadi tiga bagian utama:

HTML

Setiap dokumen HTML harus di awali dan di tutup dengan tag HTML

<HTML> </HTML> tag HTML memberi tahu browser bahawa yang di

dalam kedua tag tersebut adalah dokument HTML.


HEAD

Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di

dalam bagian ini biasanya dimuat tag <TITLE> yang menampilkan judul

dari halaman pada titlenya browser.

Header juga memuat tag META yang biasanya di gunakan untuk

menentukan informasi tertentu mengenai document HTML, anda bisa

menentukan author name, keywords, dan lainyan pada tag <META>.

Contoh :

<meta name="author" description="arek lamongan" />

Author dari document tersebut adalah “arek lamongan”

Atribut http-equiv dapat di gunkan untuk meletakkan nama HTTP Server

atribut untuk menciptakan HTTP header.

Contoh :

<meta name="expires" content="Wed, 7 May 2003 20:30:40

GMT" />

yang akan menciptakan HTTP header :

Expires: Wed, 7 May 2003 20:30:40 GMT

Sehingga jika documents di cached, HTTP akan megetahui kapan untuk

mengapdate document tersebut pada cache.

BODY

Dokument body di gunakan untuk menampilkan text, image link dan semua

yang akan di tampilkan pada web page.


1.7.2 Basic HTML Element

1.7.2.1 List Item(LI)

List item di gunakan untuk mengelompokkan data baik berurutan (ordered list)

maupun yang tidak berurutan (unordered list). Ada tiga macam list yang bisa anda

tambahkan ke dokument HTML:

# Latihan Pertemuan 2. (Kerjakan No. 1-3)

1. Unordered List (Bullet) :

Ketikkan tag Unordered List (Bullet) di dalam tag <body></body> seperti

pada contoh dibawah ini.

<ul>

<li>html</li>

<li>php</li>

</ul>

Gambar 7. Tampilan Bullet

Tag Attribute Value Description

<UL> TYPE SQUARE

DISC

CIRCLE

Bullet Kotak

Bullet Titik

Bullet Lingkaran


2. Ordered List (Numbering)

Ketikkan tag Ordered List (Numbering) di dalam tag <body></body>

seperti pada contoh dibawah ini.

<ol start="1" type="I">

<li>Hari Pertama</li>

<ol type="a">

<li>Introduction to HTML</li>

</ol>

<li>Hari ke Dua</li>

<ol type="A">

<li>Creating table</li>

</ol>

Gambar 8. Tampilan Numbering

Tag Attribute Value Description

<OL> TYPE I

i

A

a

Upper Roman

Lower Roman

Upercase

Lowercase

<OL> START N Begin Number

3. Definition List

Definition List dinyatakan oleh tag <DL> … </DL> dan <DT> tag

menentukan definition term serta <DD> tag menentukan definition itu

sendiri.


<dl>

<dt>HTML

<dd>HyperText Markup Langguage</dd> </dt>

<dt>HTTP

<dd>HyperText Transfer Protocol</dd> </dt>

</dl>

Gambar 8. Definition List


1.7.2.2. Horizontal Rules (HR)

Horizontal Rule tag <HR />digunakan untuk menggambar garis horizontal dalam

dokumen HTML. Ketikkan tag <HR /> di dalam tag <body></body> seperti pada

contoh dibawah ini.

No.1 :

<hr />

Horizontal Rule tag digunakan untuk menggambar garis

horizontal dalam document HTML

Horizontal Rule tag <HR />digunakan untuk menggambar garis horizontal

dalam dokumen HTML.

Attribute Description

Position menetukan posisi dari HR, dengan value : center | right | left.

Width Untuk menentukan panjang HR default 100%

Size Untuk menentukan tebal dari HR dalam pixel

Noshade Efek bayangan


1.7.2.3. Pemformatan Page

1. Paragraf (P)

Tag perintah untuk ganti paragraph pada bahasa HTML dinyatakan oleh

tag <P>.

No. 2 :

<p>


horizontal

</p>

2. Break

Tag <br /> di gunakan untuk memulai baris baru pada dokumen HTML,

tag ini fungsinya mirip dengan carriage return.

No. 3 :


horizontal dalam dokument HTML<br />

Dokument body di gunakan untuk menampilkan text, image

link dan semua yang akan di tampilkan pada web page</

BR>

3. Font

Dengan tag <FONT> anda bisa menentukan format tampilan font dalam

dokumen HTML seperti color, size, style dan lainya.

No. 4 :

<font color="#9966FF" size="5"> Menentukan Format

Tampilan Font </font>


color Untuk menentukan warna font, kita bisa menggunakan

nama font atau hexadecimal (#000000 - #ffffff).

size Untuk menentukan ukuran dari font 1 – 7.

face Untuk menentukan jenis font biasanya dalam satu list

ada beberapa font dan akan di baca mulai dari yang paling

kiri.

4. Color

Color merupakan attribute yang kita anda tambahkan pada beberapa

element seperti body, font, link dan lainya. Color di bagi dalam tiga


ketegori warna primer yaitu red, green dan blue. Masing-masing color

didefinisikan dalam dua digit hexadecimal number.

#RRGGBB

Hexadecimal Color

#FF0000 Red

#00FF00 Green

#0000FF Blue

#000000 Black

#FFFFFF White

5. Alignment

Align attribute digunakan untuk menentukan perataan object dalam

dokumen HTML baik berupa text, object, image, paragraph, division dan

lain-lain.

Value Description

Left Rata kiri

Right Rata kanan

Center Rata tengah

Justify Rata kanan kiri

6. Format text

6.1 Physical Formatting

Tag Description

<B> ... </B> Bold text

<I> ... </I> Italic text

<U> ... </U> Underline Text

<BIG> ... </BIG> Untuk ukuran yang lebih besar dari

normal

<SMALL> ... </SMALL> Untuk ukuran yang lebih kecil dari normal

<STRIKE> ... </STRIKE> Untuk memberi garis di tengah text


Tag Description

<SUP> ... </SUP> Superscript text

<SUB> ... </SUB> Subscript text

<CENTER> ... </CENTER> Center document / text

7. Logical Formatting

Tag Description

<EM> ... </EM> Text miring / <I>

<STRONG> ... </STRONG> Text tebal / <B>

<INS> ... </INS> Underline text / <U>

<DEL> ... </DEL> Mencoret text / <STRIKE>

8. Quotes / Indenatasi

Untuk membuat indentasi paragraph kita bisa menggunakan

BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q.

Contoh:

BLOCKQUOTE untuk indentasi pendek anda bisa gunakan element Q

No. 5 :

<blockquote> Color merupakan attribute yang kita anda

tambahkan pada beberapa element seperti body, font,

link dan lainya </blockquote>

9. Preformatted text

Tag PRE di gunakan untuk menampilkan text sesuai dengan format

aslinya.

No. 6 :

<pre>

Internet merupkan jaringan global yang

menghubungkan suatu network dengan network lainya

di seluruh dunia melalui TCP/IP menjadi protocol

penghubung antara jaringan-jaringan yang beragam di

seluruh dunia untuk dapat berkomunikasi tanpa batas

Negara dan Benua.

</pre>


10. Grouping element

Tag DIV dan SPAN di gunakan untuk mengelompokkan element-element

HTML. Span digunakan untuk mendefinisikan inline content sementara

<div> digunakan untuk block-level content.

No. 7 :

<div>

Divisi 1

<p>

Div tag digunakan untuk mengelompokkan group

element biasanya untuk block-level element

</p>

</div>

<div align="right">

Divisi 2

<p>

Ini didalam devisi kedua. di tulis dengan

alignment kanan

</p>

</div>

11. Hyperlink

11.1 Link ke Dokumen Lain

Misalkan ada dua dokumen html link1.htm dan link2.htm untuk membuat l

ink dari link1.htm ke link2.htm :

No. 8 :

Save file Name :Link1.htm

<html>

<head>

<title>Using Link</title>

</head>

<body>

<center>

<font size="5" color=green>Creating Link

</font>

</center>

<br />

<a href="link2.htm"> Click here to view

document 2</a>

<br />

</body>

</html>


Save File Name :Link2.htm

<html>

<head>

<title>Document 2</title>

</head>

<body>

<center>

<font size="5" color=blue>Creating link </font>

</center><br />

<a href="link1.htm"> back to document 1</a></br

/>

</body>

</html>

11.2 Link ke Section tertentu dalam Dokumen

Untuk membuat link ke section tertentu dalam satu dokumen gunakan

property name untuk membuat nama tujuan dari link.

Syntax name anchor:

<A NAME =”nama”>Topic name</A>

untuk membuat link ke name :

<A HREF=”#nama”>menuju ke Topic name</A>

No. 9 :

Save File Name :link3.htm

<html>

<head>

<title>Anchor Name</title>

</head>

<body>

<strong>setting up web server</strong>

<p> <pre>

Internet merupkan jaringan global yang menghubungkan

suatu network dengan network lainya di seluruh dunia

melalui TCP/IP menjadi protocol penghubung antara

jaringan-jaringan yang beragam di seluruh dunia untuk

dapat berkomunikasi ,tukar menukar berbagai macam

jenis informasi, dan data tanpa batas Negara dan

Benua. .<a href="#WWW"> WWW (World Wide Web) </a>

Dalam dunia internet kita sering mendengar kata WWW

(World Wide Web) yang mempunyai definisi adalah salah

satu fasilitas dimana kita dapat saling bertukar

informasi di internet.<b><a name="WWW"> WWW (World

Wide Web)</a></b> Banyak orang berpendapat bahwa WWW

adalah dunianya sedang internet adalah jaringannya .

Protocol standard aturan yang di gunakan untuk


berkomunikasi pada computer networking, Hypertext

Transfer Protocol (HTTP) adalah protocol untuk WWW.

</p>

</pre>

</body>

</html>

11.3 Link Ke bagian tertentu Dokumen Lain

Untuk membuat link ke bagian tertentu dokumen lain kita bisa gunakan

anchor name didokumen yang menjadi tujuan hyperlink.

No. 10 :

<A HREF=”link3.htm#WWW”>WWW (World Wide Web)</A>

12. Table

12.1 Membuat Table

Tag <TABLE> digunaka untuk membuat table dalam dokumen HTML,

bagian pokok dari table adalah cell yang didefinisikan dengan

menggunakan tag <TD>.

No. 11 :

<table border="1">

<tr>

<td>cell 1a</td>

<td>cell 1b</td>

</tr>

<tr>

<td>cell 2a</td>

<td>cell 2b</td>

</tr>

</table>

12.2 Pemformatan Table

Untuk memformat perataan text di dalam table anda bisa gunakan

attribute align dan valign (vertical alignment).

Attribute Value

Align Center | justify | left | right

Valign BASELINE | TOP | BOTTOM | MIDDLE


No. 12 :

<tr align="center" valign="baseline">

<td>cell 1a</td>

<td>cell 1b</td>

</tr>

<tr align="center" valign="baseline">

<td>cell 2a</td>

<td>cell 2b</td>

</tr>

12.3 Merge Cell

Tag <TD> memiliki atribut colspan untuk merge column dan rowspan

untuk merge baris.

No. 13:

<table bgcolor=”CCCCFF” width="62%" border="1"

cellpadding="0">

<tr>

<td colspan="3" align="center">Quarter 1</td>

<td colspan="3" align="center">Quarter 2</td>

</tr>

<tr align="center">

<td>Senin</td>

<td>Selasa</td>

<td>Rabu</td>

</tr>

<tr>

<td>100</td>

<td>5000</td>

<td>200</td>

</tr>

<tr>

<td>290</td>

<td>5050</td>

<td>2300</td>

</tr>

</table>

Gambar 9. Tampilan Tabel


13. Image

13.1 Format Image

Ada banyak format image, tapi ada tiga jenis format yang paling sering di

gunakan :

GIF (Graphical Interchange Format) (.GIF)

JPEG (Joint Photographic Expert Image) (.JPG)

PNG (Portable Network Graphics)

13.2 Insert Image ke Dokumen

Tag IMG di gunakan untuk menginsertkan image ke dokumen HTML.

Syntax nya:

<IMG SRC = "URL">

Penjelasan tentang URL yang dimaksud diatas dapat kita lihat pada

gambar di bawah ini tepatnya pada lingkaran merah :

Gambar 10. Tampilan Menginsert Gambar

Contoh :

<img src=" F:\SELAIN Rully\sao document

phponline\sao_cl\IMG2\wallpaper_geist_01_1024.jpg">


Attribute Value Description

Align center | justify | left | right |

baseline | top | bottom |

middle

Top, bottom, middle

digunakan untuk menentukan

posisi image terhadap text

Left, right, center untuk

menentukan posisi image di

document


No. 1 :

Contoh untuk menentukan posisi image dan text di dokumen :

<p>


phponline\sao_cl\IMG2\wallpaper_geist_01_1024.jpg"

height="100" width="100" />Default alignment at

the

bottom

</p>

<p>



height="100" width="100" align="top">Aligned at

Top</p>

<p><img src=" F:\SELAIN Rully\sao document


height="100" width="100" align="middle" />Aligned

at

Middle

</p>

13.3 Image Map

Metode ImageMap mengharuskan pemrogram web untuk mendefinisikan

daerah-daerah dalam suatu gambar (image) yang mempunyai link. Derah yang

didefinisikan berupa bentuk daerah dan koordinat pembatasnya. Bentuk

daerah peta dibedakan menjadi :

Point : daerah berupa titik

Rect : daerah berupa kotak/persegi panjang


Poly : daerah berbentuk polygon

Circle : daerah berbentuk lingkaran

Koordinat daerah menggunakan posisi titik (point). Adapun ketentuan

pendefinisian koordinat (0,0) dimulai dari pojok kiri atas gambar, dan

maksimum koordinat adalah pojok kanan bawah gambar (lebar_maks,

tinggi_maks).

Sintaks :

<img src=”nama gambar sebagai map” width=”lebar

tampilan gambar” height=”tinggi tampilan gambar”

usemap=”#nama_map” border=0>

<map name=”nama_map”>

<area shape=”jenis map” coords=”koordinat map”

href=”file yang dipanggil”>

</map>

Coordinat dari object relatif terhadap pojok kirai atas image.

Coordinate Value

Rect Left-x, top-y, right-x, bottom-y

Circle CENTER-X, CENTER-Y, RADIUS

Poly X1, Y1, X2, Y2, … XN, YN

No. 2 :

<html>

<head>

<title>Creating Hotspot</title>

</head>

<body>

<img src="Starry.gif" width="400" height="200"

border="0" usemap="#Map">

<map name="Map">

<area shape="rect"

coords="0,0,200,100"

href="file1.htm"

alt="kotak link">

<area shape="circle"

coords="354,41,36"

href="file2.htm"

alt="lingkaran link">


<area shape="poly"

coords="58,102,97,101,110,134,

119,119,177,195,69,196,

47,162,62,143" href="#">

</map>

</body>

</html>

14. Text Berjalan

Pada halaman Web apabila terdapat sedikit animasi pasti akan

memperindah tampilan dari Website itu sendiri. Animasi disini merupakan

animasi sederhana yang mana membuat sebuah text dapat berjalan. Untuk

membuat efek ini kita dapat menggunakan tag <MARQUEE>, untuk lebih

jelasnya Ketikkan tag <MARQUEE> di dalam tag <body></body>

seperti pada contoh dibawah ini.

Contoh :

<MARQUEE BEHAVIOR = SCROLL>TEXT</MARQUEE>


MARQUEE

BEHAVIOR

SLIDE

SCROLL

ALTERNATE

Berhenti di

Jalan terus

Bolak-balik

Untuk mengatur arah berjalan tambahkan DIRECTION.

No.3 :

<marquee behavior=scroll direction = left> text

</marquee>


Direction Left

Right

Jalan dari kiri

Jalan dari kanan


15. Form HTML

Web page memungkinkan kita interaktif dengan pengunjung web, salah

satunya dalah dengan penggunaan FORM. Metoda pengiriman data pada

form terdapat dua yaitu GET dan POST. Pada HTML metoda ini

dinyatakan dengan atribut METHOD di dalam elemen FORM. Metoda

GET merupakan default pengiriman suatu data form. Metode GET

mengirimkan data pada server dengan cara meletakkannya pada bagian

akhir URL yang menunjuk pada script pemroses Jadi jika URL anda

menunjuk ke CGI Script pada URL “cgibin/scriptform” dan kata formnya

adalah “jakarta” dan “2503645”, maka URL akhir yang dikirim ke server

adalah :

/cgi-bin/scriptform?kota=Jakarta&telepon=2503645

Metode POST tidak seperti metode GET yang mengirimkan datanya

secara terpisah pada suatu standar input.Script mengambil data form dari

standar input ini, dengan adanya penyimpanan data secara tersendiri

membuat metoda POST bisa menyimpan data input dalam jumlah banyak.

No. 4 :

<html>

<head>

<title>latihan 9</title>

</head>

<body>

<form method=”post” action=”kirim.php3”>

<pre>

nama : <input type=text name=”nama” />

alamat: <input type=text name=”alamat” size=40

maxlength=”60” />

e-mail :<input type=text name=”email” size=”20”

/>


telepon :<input type=text name=”telepon” size=”7”

/>

<input type=submit value=”ok” />

<input type=reset value=”batal” />

</pre>

</form>

</body>

</html>

Terdapat dua atribut yang umum digunakan pada tag <FORM> berupa

ACTION dan METHOD :

ACTION menentukan URL yang akan dijalankan dan menerima

semua masukan pada formulir. Jika ACTION tidak disebutkan,

informasi akan dikirim ke URL yang sama dengan halaman Web itu

sendiri.

METHOD digunakan untuk menentukan bagaimana informasi di

kirim ke URL yang disebutkan dalam ACTION. Nilai yang umum

untuk atribut ini berupa GET dan POST. POST membuat informasi

di kirimkan secara terpisah dengan URL, sedangkan GET akan

membuat informasi dikirim menjadi satu dengan URL.

15.1 Jenis-jenis Bentuk Dalam Form

a. Buttons

Terdapat 3 jenis button antara lain :

Push Button : merupakan default behavior atau nerupakan sintak dasar.

Namun button jenis ini hanya dapat digunakan dengan menggunakan

bersama script yang lain (client side script).

Submit Button : apabila diaktifkan akan memerintahkan browser untuk

mengirimkan data yang dimasukkan ke dalam form ke alamat yang dituju


Reset Button : apabila diaktifkan akan mereset semua control yang ada

dalam form kembali ke nilai semula (default).

b. Check Box

Merupakan control yang memungkinkan pemilihan sutu nilai tertentu

(informasi).

No. 5 :

<form>

<input type="checkbox" name="vehicle" value="Bike" />

I have a bike

<br />

<input type="checkbox" name="vehicle" value="Car" />

I have a car

<br />

<input type="checkbox" name="vehicle" value="Airplane"

/>

I have an airplane

</form>

c. Radio Button

Memiliki fungsi yang sama dengan check box namun memiliki perbedaan

dimana apabila salah satu radio button dengan diaktifkan maka radio button

lain yang bernilai sama akan nonaktif secara otomatis.

No.6 :

<form>

<input type="radio" name="sex" value="male"> Male

<br>

<input type="radio" name="sex" value="female"> Female

</form>

d. Menu

Memungkinkan pengguna memilih pilihan dalam menu drop down

No.7 :

<select name="xxx">

<option value="1">1. Menu Pilihan 1</option>



</select>


e. Text Input

Terdapat dua jenis inputan text yaitu, TEXT AREA dan input text. Keduanya

memiliki kesamaan fungsi yaitu menginputkan text. Namun textarea

memungkinkan inputan berupa multi-line text.

No.8 :

<form method="post">

<input type="text" name="xxx" /><br />

<textarea name="xx"></textarea>

</form>

f. File

Memungkin user memasukkan inputan berupa file.

No.9 :


<input type="file" />

</form>

g. Hidden control

Memungkinkan penulis untuk memasukkan suatu informasi tertentu ke dalam

halaman web yang nantinya akan dikirim kembali ke server.

No.10 :


<input type="hidden" name="xx" value="itn_malang"

/>

</form>

h. Label

Memiliki fungsi untuk menuliskan informasi ke halaman web.

No. 11 :

<form action="..." method="post">

<table>

<tr>

<td><label for="fname">first name</label>

<td><input type="text" name="firstname"

id="fname">

<tr>

<td><label for="lname">last name</label>


<td><input type="text" name="lastname"

id="lname">

</table>

</form>

16. FRAME

Frame HTML dapat digunakan untuk membuat tampilan halaman HTML

yang terbagi-bagi menjadi beberapa bagian dimana setiap bagiannya

merupakan satu halaman HTML yang terpisah. Ini dilakukan untuk membuat

tampilan halaman HTML yang salah satu atau beberapa bagian berganti-ganti

isinya sedang bagian lain tetap sehingga dapat menghemat bandwith internet.

No.12 :

<html>

<head>

<title>latihan 8 </title>

</head>

<frameset rows=20%,*>

<frame name=header src="header.html">

<frameset cols=30%,*>

<frame name=kiri src="kiri.html">

<frame name=kanan src="kanan.html">

</frameset>

</frameset>

<body>

</body>

</html>

# Program Contoh.

No. 1.

Bukalah notepad atau program text editor yang lain.

Ketikkan script berikut :

<HTML>

<HEAD>

<TITLE> World Wide Web</TITLE>

<BODY>

<CENTER><H1>Definisi World Wide Web</H1></CENTER>

<P ALIGN=”LEFT”>

WWW adalah layanan yang paling sering digunakan dan memiliki

perkembangan yang sangat cepat karena dengan layanan ini

kita bisa menerima informasi dalam berbagai format


(multimedia). Untuk mengakses layanan WWW dari sebuah

komputer (yang disebut WWW server atau web server) digunakan

program web client yang disebut web browser atau browser

saja. Jenis-jenis browser yang sering digunakan adalah:

Netscape Navigator/Comunicator, Internet Explorer, NCSA

Mosaic, Arena, Lynx, dan lain-lain.

<P ALIGN=”RIGHT”>

Surfing merupakan istilah umum yang digunakan bila

menjelajahi dunia maya atau web. Tampilan web yang sangat

artistik yang tidak hanya menampilkan teks tapi juga gambar-

gambar yang di tata sedemikian rupa sehingga selalu membuat

betah netter untuk surfing berjam-jam. Karena itu para

netter harus sangat memperhitungkan rencana web mana saja

yang akan dikunjungi atau batasi informasi yang ingin

diakses, karena bila tidak netter akan tersesat kedalam

rimba informasi yang maha luas.

</BODY>

</HTML>

Simpan (File|Save As), dengan nama web.html, pada kolom Save As Type,

pilihlan All Files(*.*).

Buka web browser anda (internet explorer)

Bukalah dokumen yang anda buat tadi. (File|Open)

Klik browse: arahkan ke file Contoh1.html, klik OK

Lihatlah hasilnya :

Gambar 11. Hasil Latihan Praktikum 1


No. 2 :

Pada praktikum 2 kali ini kita akan belajar menambahkan warna background, dan

pemformatan tampilan teks.

Buka kembali file web.html pada program teks editor anda (notepad).

Ubah perintah berikut <BODY BGCOLOR=”PINK”>

Ubah paragraf pertama menjadi seperti dibawah ini :

<P ALIGN=”LEFT”>

<B>WWW</B> adalah layanan yang paling sering digunakan

dan memiliki perkembangan yang sangat cepat karena dengan

layanan ini kita bisa menerima informasi dalam berbagai

format (multimedia). Untuk mengakses layanan WWW dari

sebuah komputer (yang disebut <U>WWW server atau web

server </U>) digunakan program web client yang disebut

web browser atau browser saja. Jenis-jenis browser yang

sering digunakan adalah: <I>Netscape

Navigator/Comunicator, Internet Explorer, NCSA Mosaic,

Arena, Lynx, dan lain-lain.</I>

Simpan hasil editing anda (File|Save)

Lihat hasil perubahan pada web browser anda.

Tugas Praktikum 1.

Buatlah sebuah dokumen HTML untuk tulisan berikut ini :

Simpan dengan nama Lulusan_kompetitif.html.

Lulusan S-1 yang Kompetitif

Sebuah perenungan untuk anda para mahasiswa

SEKITAR 15-20 tahun yang lalu, lulusan Strata 1 (S-1) dapat dipastikan bisa

memperoleh pekerjaan yang enak dengan cepat. Enak di sini maksudnya mendapatkan

jabatan dan gaji yang baik. Namun, sekarang keadaan berubah. Tidak sedikit lulusan

sarjana yang menganggur karena tidak mendapat pekerjaan dan tidak bisa membuka

usaha sendiri. Untuk menutupi kenyataan menganggur, beberapa penganggur mencoba

melucu dengan mengatakan bekerja di perumtel, kependekan dari penunggu rumah dan

telenovela. Menganggurnya lulusan S-1 tidak saja akibat kondisi di luar, tetapi juga

akibat kondisi dari dalam diri lulusan S-1 itu. Banyak mahasiswa yang tidak menyiapkan


diri dan mentalnya selama kuliah sehingga ketika lulus tidak tahu ke arah mana harus

melangkah.

Sesungguhnya apa yang dipikirkan para lulusan SMU ketika memasuki bangku kuliah

dan bidang studi yang dipilihnya? Menjadi tukang insinyur seperti si Doel anak

sekolahan? Lalu, ke mana setelah itu? Apakah di benak mereka terpikirkan 3 K: Kuliah,

Kerja, Kawin? Lulus kuliah, mencari pekerjaan, kemudian menikah, dan seterusnya?

Apakah para mahasiswa itu terkungkung dalam situasi dunianya sendiri tanpa melihat

dunia di luarnya seperti adanya pasar global yang dinamis dan menuntut daya saing

sangat kompetitif? Siapkan mereka menyambut pasar bebas ASEAN (AFTA) tahun

2003? Pedulikah mereka pada pengakuan kualitas kelulusan mereka oleh negara lain yang

sangat penting untuk persaingan global dan pasar bebas? Pedulikah mereka pada posisi

sumber daya manusia (SDM) Indonesia di antara SDM bangsa lain?


# Pertemuan 5. (Kerjakan No. 1-4)

No. 1 :

Ketikkan script berikut menggunakan teks editor.

Simpan dengan nama Internet.html

<html>

<head><title> Interconnected Network</title>

</head>

<body bgcolor=”pink”>

<center>

<font face=”arial” size=6 color=red> Interconnected

Network alias Internet</font>

</center>

<hr>

<font face=”helvetica” size=4 color=red>

<p align=”left”>

<I>Interconnected Network</I> - atau yang lebih

populer dengan sebutan Internet - adalah sebuah sistem

komunikasi global yang menghubungkan komputer-komputer

dan jaringan-jaringan komputer di seluruh dunia.

Setiap komputer dan jaringan terhubung - secara

langsung maupun tidak langsung - ke beberapa jalur

utama yang disebut <I> internet backbone </I> dan

dibedakan satu dengan yang lainnya menggunakan

<I>unique name</I> yang biasa disebut dengan alamat IP

32 bit. Contoh: 202.155.4.230 . Komputer dan jaringan

dengan berbagai platform yang mempunyai perbedaan dan

ciri khas masing-masing (Unix, Linux, Windows, Mac,

dll) bertukar informasi dengan sebuah protokol standar

yang dikenal dengan nama TCP/IP (<I>Transmission

Control Protocol/Internet Protocol</I>). TCP/IP

tersusun atas 4 layer (network access, internet, host-

to-host transport, dan application) yang masing-masing

memiliki protokolnya sendiri-sendiri.

</font></p>

<font face=”garamond” size=4 color=blue>

<p align=”right”>

Bila anda mempunyai Komputer minimal prosessor 486,

Windows 95, Modem, dan line telepon, maka anda telah

bisa bergabung dengan ribuan juta komputer lain dari

seluruh dunia dan mengakses harta karun informasi di

internet.

</font>

</p>

<hr>

<center>

<font face=”century” size=3 color=brown>&copy IBI

DARMAJAYA <br><b>Bandar Lampung</b></font>

</center>

</body>

</html>


No. 2 :


<HTML>

<HEAD>

<TITLE> karakter khusus </TITLE>

</HEAD>

<BODY>

Copyright © <br>

Trademark ™ <br>

Registered ® <br>

Poundsterling £ <br>

Yen ¥ <br>

Euro €<br>

</BODY>

</HTML>

Simpan dengan nama karakter_khusus.html

Lihat hasilnya dengan browser.


No. 3 :


<HTML>

<HEAD>

<TITLE> Formatting Font </TITLE>

</HEAD>

<BODY>

<b>Bold</b> <BR>

<u>Underline</u> <BR>


<I>Italic</I> <BR>

<strong>Strong</strong> <BR>

<em>Emphasis</em> <BR>

<cite>Citation</cite> <BR>

<S>strikethrough</s> <BR>

CO<sup>2</sup> <BR>

H<sub>2</sub>O

</BODY>

</HTML>

Simpan dengan nama font.html




No. 4 :


<html>

<head>

<title>Wisata Dunia</title>

</head>

<body background="Bgd.gif">

<p align="center"><b><u>Tempat-tempat yang indah didunia

</u></b></p> <hr>

<p align="left">Inilah tempat-tempat wisata dunia yang

banyak dikunjungi oleh wisatawan tiap tahunnya:</p>

<p align="left"><img border="0" src=" lawu.jpg"

width="148" height="103">

<b>Gunung Lawu</b> : terletak di Propinsi Jawa Timur

Indonesia</p>

<p align="left"><b>Hawaii</b> : Terletak di Benua Amerika

<img border="0" src=" Hawaii.jpg" width="203"

height="134"></p>

</body>

</html>

Simpan dengan nama image_align.html

Lihat hasil melalui browser.



Tugas Praktikum 2.

Buatlah dokumen HTML dengan tampilan sebagai berikut :

Gambar 15. Hasil Tugas Praktikum 8


Pertemuan 6. (Kerjakan No. 1-6)

No. 1 :


<html>

<head>

<title>Wisata Dunia</title>

</head>

<body background=" Bgd.gif">

<p align="center">

<a name="atas"><b><u>Tempat-tempat yang indah didunia

</u></b></a> </p> <hr>

<p align="left">

Inilah tempat-tempat wisata dunia yang banyak dikunjungi

oleh

wisatawan tiap tahunnya. </p>

<p align="left">Ikuti link pada gambar untuk melihat

secara detail.</p>

<p align="left">

<a href=" detail_tempat_wisata.html"><img src="lawu.jpg"

width="136" height="95"> </a>

<b>Gunung Lawu</b> : di Propinsi Jawa Timur <p>

<p align="left">

<b>Hawaii</b> : Terletak di Benua Amerika

<a href=" detail_tempat_wisata.html"><img src="

Hawaii.jpg" width="161" height="99"></a> </p>

<p align="left">

<a href="detail_tempat_wisata.html">

<img src="Colouseum.jpg" width="134" height="89"></a>

<b>Colloseum</b> : ada di Romawi

</p>

<p align="left">

<b>Candi Borobudur</b> : Di Jawa Tengah

<a href=" detail_tempat_wisata.html"><img

src="Borobudur.jpg" width="132" height="92"></a>

</p>

<p align="center"></p>

<p align="center">Tersedia paket perjalanan wisata dengan

harga mulai 100$ US</p>

<p align="center"><a href="mailto:[email protected]">Pesan

sekarang juga</a></p>

<hr>

<a href="#atas">TOP</a>

</body>

</html>

Simpan dengan nama Tempat_wisata.html

Jalankan dari web browser.


No. 2 :

Buat script berikut dan simpan dengan nama detail_tempat_wisata.html

<html>

<head>

<title>Detail Tempat Wisata</title>

</head>

<body>

<p align="center">

<b><font size="4">Detail Tempat Wisata</font></b>

</p> <p>

<u><b>Gunung Lawu</b></u> </p> <p>

<img src="lawu.jpg" width="156" height="113"

align="left">

Gunung yang indah dan penuh dengan legenda ini terletak

di Propinsi Jawa Timur, dengan

ketinggian sekitar 3265 diatas permukaan laut. </p>

<p>Harga paket perjalanan wisata : Rp. 500.000 (3H2M)</p>

<p> </p>

<p> <b><u>Hawaii</u></b> </p>

<p>

<img src="Hawaii.jpg" width="154" height="98"

align="left"> </p>

<p align="left">

Kepulauan hawaai merupakan pulau yang indah dengan

pantai-pantai

yang eksotis. Dengan tarian yang khas, dan keramah-

tamahan penduduknya.

</p>

<p align="left">

Harga paket perjalanan wisata : $500.000 (3H2M)</p>

<p> </p>

<p><b><u><a

href="wisata_dunia.html">Kembali</a></u></b></p>

</body>

</html>

Simpan dengan nama detail_tempat_wisata.html

Jalankan dari web browser.


No. 3 :

Cobalah script berikut ini :

<HTML>

<HEAD>

<TITLE> Ordered List & Unordered List</TITLE>

</HEAD>

<BODY>

<h4>An ordered List : </h4>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

<h4>An unordered List : </h4>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</BODY>

</HTML>

Simpan dengan nama list.html

Jalankan dengan web browser

No. 4 :

Cobalah script berikut ini :

<HTML>

<HEAD>

<TITLE> definition list </TITLE>

</HEAD>

<BODY>

<DL>

<DT>Coffee</DT>

<DD>Black hot drink</DD>

<DT>Ice Cream</DT>

<DD>sweet Cold drink</DD>

</DL>

</BODY>

</HTML>

Simpan dengan nama definition.html



No. 5 :

Ketikkan script berikut

<HTML>

<HEAD>

<TITLE> Belajar Tabel </TITLE>

</HEAD>

<BODY>

<h4>Daftar Dosen IBI DARMAJAYA</h4 >

<TABLE BORDER="1">

<TR ALIGN="CENTER" BGCOLOR="PINK">

<TD>No</TD>

<TD>Nama</TD>

<TD>Alamat</TD>

<TD>Telepon</TD>

</TR>

<TR>

<TD>1</TD>

<TD>Anggalia Wibasuri</TD>

<TD>Perumnas Way Kandis</TD>

<TD>081333333333</TD>

</TR>

<TR>

<TD>2</TD>

<TD>Dona Yuliawati</TD>

<TD>Pahoman</TD>

<TD>0721-777777</TD>

</TR>

<TR>

<TD>3</TD>

<TD>Deppi Linda</TD>

<TD>Kedaton</TD>

<TD>0721-787878</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Simpan dengan nama tabel1.html



No. 6 :

Ketikkan script berikut ini

<html>

<head>

</head>

<body>

<table border="1" cellpadding="0" cellspacing="0"

width="100%">

<caption><b>Daftar Nilai Pemrograman Web 1</b></caption>

<tr>

<th width="33%" rowspan="2" valign="middle">Nama</th>

<th width="67%" colspan="2" >Nilai</th>

</tr>

<tr>

<th width="33%">Tugas</th>

<th width="34%">Praktikum</th>

</tr>

<tr>

<td width="33%">Lutfia</td>

<td width="33%" align="center">80</td>


</tr>

<tr>

<td width="33%">yulia </td>



</tr>

<tr>

<td width="33%">Ardian</td>



</tr>

</table>

</body>

</html>

Simpan dengan nama tabel2.html



Tugas Praktikum 3.

Buatlah dokumen HTML dengan tampilan sebagai berikut :

Biaya Pendaftaran IBI DARMAJAYA Bandar Lampung

Tahun Ajaran 2009/2010

Lulusan Periode Daftar Biaya

S1 Manajemen

I Rp. 650.000

II Rp. 700.000

III Rp. 750.000

S1 Akuntansi

I Rp. 675.000

II Rp. 725.000

III Rp. 775.000

S1 Sistem Informasi

I Rp. 700.000

II Rp. 750.000

III Rp. 800.000

Gambar 15. Hasil Tugas Praktikum 15

# Pertemuan 7.

Buat file dengan nama Frame.html

<frameset framespacing="0" border="0" rows="64,*,79"

frameborder="0">

<frame name="top" scrolling="no" noresize

target="contents" src="atas.htm">

<frameset cols="150,*">

<frame name="contents" target="main" src="kiri.htm">

<frame name="main" src="utama.htm" scrolling="no">

</frameset>

<frame name="bottom" scrolling="no" noresize

target="contents" src="bawah.htm">

</frameset>

Buat file dengan nama atas.html

<html>

<head>

</head>

<body>

<p align="center"><b><font size="5">

<marquee width="661" height="19">IBI DARMAJAYA :

Menggapai Ilmu Menuju Rahmat</marquee>

</font></b></p>

</body>

</html>


Buat file dengan nama utama.html

<html>

<head>

<title>SELAMAT DATANG DI SITUS IBI DARMAJAYA</title>

</head>

<body>

<p align="center"><b><img border="0" src="LOGOIBI.jpg"

width="61" height="61" align="middle">

SELAMAT DATANG DI SITUS IBI DARMAJAYA</b></p>

<hr>

<p align="left">

<head>

<title>SELAMAT DATANG DI SITUS IBI DARMAJAYA</title>

</head>

<body>

<p align="center"><b>

<img src="file:D:\Logo\images.jpg" width="61" height="61"

align="middle">

SELAMAT DATANG DI SITUS IBI DARMAJAYA</b></p>

<hr>

<p align="justify">BANDAR LAMPUNG--- Dalam Peraturan

Pemerintah Republik Indonesia Nomor 19 Tahun 2005,

setiap satuan pendidikan pada jalur formal dan non-formal

wajib melakukan penjaminan mutu pendidikan. Penjaminan

mutu pendidikan tersebut bertujuan untuk memenuhi atau

melampaui Standar Nasional Pendidikan. Dalam Higher

Education Long Term Strategy 2003-2010 (disingkat

menjadi HELTS 2003-2010) yang digagas oleh Dikti. Dalam

program itu dijelaskan visi dan program untuk mewujudkan

sistem pendidikan tinggi nasional sehingga pada tahun

2010 diharapkan terwujud sistem pendidikan tinggi yang

sehat dengan ciri-ciri kualitas akses dan keadilan serta

otonomi. Berbagai peraturan, standar, pelatihan,

workshop, dan aktifitas sosialisasi dilakukan untuk

mewujudkan visi pendidikan tinggi berkualitas tersebut.

Salah satu kegiatan yang dilaksanakan oleh Koordinator

Perguruan Tinggi Swasta (Kopertis) Wilayah II Palembang

adalah Pelatihan Manajemen Kepemimpinan dan Penataan

Perguruan Tinggi bagi pimpinan perguruan tinggi swasta di

lingkungan Kopertis Wilayah II. Kegiatan yang dihelat

beberapa waktu lalu (30/4-1/5) ini, dimaksudkan untuk

memberikan bekal kepada para pimpinan perguruan tinggi

swasta di Provinsi Lampung, betapa pentingnya manajemen

kepemimpinan dan penataan perguruan tinggi untuk

mewujudkan perguruan tinggi yang berkualitas. Kegiatan

dipusatkan di Hotel Kurnia 2 Bandar Lampung.

“Penataan manajemen perguruan tinggi yang berkualitas

diawali dengan adanya perencanaan perkuliahan, persiapan

perkuliahan, proses perkuliahan, pemantauan pelaksanaan

dan evaluasi hasil belajar. Semua proses ini membutuhkan

dukungan penuh dari biro dan unit lain yang ada di

perguruan tinggi untuk mendukung proses besar ini. Unit


lain itu diantaranya perpustakaan, sumber daya manusia,

administrasi, keuangan, juga sarana dan prasarana yang

digunakan dalam proses perkuliahan. Konsep ini dilengkapi

dengan tata pamong dan manajerial perguruan tinggi yang

baik pula,” papar Dr. Andi Desfiandi, SE, MA dalam

makalah yang disampaikan oleh Wakil Rektor I Bidang

Akademik Informatics and Business Institute (IBI)

Darmajaya, RZ. Abdul Aziz, ST. MT.

Dalam kesempatan itu pula, Ketua Kopertis Wilayah II,

Prof. Dr. Diah Natalisa, mengatakan bahwa IBI Darmajaya

masuk menjadi salah satu dari 58 perguruan tinggi yang

telah menerapkan Sistem Penjaminan Mutu Internal

Perguruan Tinggi (selanjutnya disebut SPMI-PT), yaitu

suatu standar ukur untuk mengetahui sejauh mana usaha

Perguruan Tinggi memenuhi standar Pemerintah tentang

penyelenggaraan pendidikan tinggi.

“Untuk diketahui, di tahun 2009 lalu, dari lebih 2900

PTN/PTS di Indonesia, sekitar 319 perguruan tinggi masuk

ke daftar verifikasi Dikti. Dari hasil verifikasi yang

diumumkan pada awal tahun 2010 ini diperoleh 58 perguruan

tinggi yang ikut bergabung dalam kelompok Perguruan

Tinggi Terbaik di Indonesia dalam SPMI-PT 2009. Yang

membanggakan saya, IBI Darmajaya tercantum pada nomor 8

dalam daftar tersebut, “) ,”papar Diah.

Sebuah prestasi yang membanggakan karena IBI Darmajaya

menjadi PTS pertama dan satu-satunya dari Propinsi

Lampung dan Kopertis Wilayah II, bahkan 1 dari 6

perguruan tinggi dari seluruh sumatera yang masuk dalam

katagori tersebut ( 2 PTS dan 4 PTN .

“Dalam kesempatan ini saya menghimbau kepada seluruh

pimpinan perguruan tinggi yang hadir untuk dapat

menjadikan IBI Darmajaya sebagai mitra dalam belajar dan

berdiskusi dalam pengimplementasian penjaminan mutu

internal di perguruan tinggi masing-masing. Implementasi

sistem penjaminan mutu IBI Darmajaya yang menyeluruh dan

konsisten yang telah dinilai oleh Reviewer Evaluasi SPMI-

PT sebagai bentuk implementasi sistem penjaminan mutu

perguruan tinggi dengan kategori good practice , telah

menjadi pengakuan nasional bahwa IBI Darmajaya termasuk

sebagai salah satu Perguruan Tinggi Terbaik evaluasi SPMI

Dikti 2009,” tandas Diah.</p>

</body>

</html></p>

</body>

</html>

Buat file dengan nama kiri.html

<html>

<head>


<title>Program Studi</title>

</head>

<body>

<p>Sejarah Singkat</p>

<p>Program Studi</p>

<p>Fasilitas</p>

<p>Alumni</p>

<p>Info Kerja</p>

</body>

</html>

Buat file dengan nama bawah.html

<html>

<head>

<title>untitled</title>

</head>

<body>

<p align="center">© IBI DARMAJAYA<br>2010</p>

</body>

</html>

# Pertemuan 8.


<html>

<head>

<title>formulir</title>

</head>

<body>

<p><b>Formulir Pendaftaran Kursus</b></p>

<form method="POST" action=" " name=”form_kursus”>

<table width="100%">

<tr>

<td>Nama</td>

<td>:</td>

<td><input type="text" name="nama" size="39"></td>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td>:</td>

<td><input type="radio" value="L" checked

name="jkl">Laki-laki

<input type="radio" name="jkl"

value="p">Perempuan</td>

</tr>

<tr>

<td>Alamat</td>

<td>:</td>

<td><input type="text" name="alamat"

size="39"></td>


</tr>

<tr>

<td>Propinsi</td>

<td>:</td>

<td><select size="1" name="propinsi">

<option>Jawa Barat</option>

<option>Jawa Tengah</option>

<option>Jawa Timur</option>

</select></td>

</tr>

<tr>

<td>Pilihan Kursus</td>

<td>:</td>

<td><input type="checkbox" name="kursus"

value="inggris">Bahasa Inggris<br>

<input type="checkbox" name="kursus"

value="komputer">Komputer</td>

</tr>

</table>

<p><input type="submit" value="Submit"

name="Bsubmit"><input type="reset" value="Reset"

name="Breset"></p>

</form>

</body>

</html>

Simpan dengan nama form.html




Chapter 2

XHTML

==================================

2.1 Pendahuluan

XHTML adalah singkatan dari Extensible HyperText Markup Language.

XHTML versi 1.0 diumumkan pada awal Agustus 2002

Formulasi bahasa HTML sebagai aplikasi XML.

Konsisten dengan aturan penulisan XML.

XHTML mirip dengan HTML tidak ada perbedaan yang signifikan.

Dokumen XHTML sepenuhnya didukung semua program yang bisa

membaca, menulis, atau mengedit dokumen XML yang sah.

XML mendukung penambahan tag baru dengan relatif mudah.

Contoh File XHTML :

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Internet and WWW How to Program – welcome

</title>

</head>

<body>

<p>Welcome to XHTML!</p>

</body>

</html>

2.2 Perbedaan HTML & XHTML

Dokumen XHTML harus terbentuk dengan baik (wellformed) yaitu bahwa semua

tag pembuka harus mempunyai tag penutup, misalnya : (<p></p>).

Semua elemen dan atribut harus ditulis dengan huruf kecil.


Untuk tag seperti <br> dan <hr> yang tidak memiliki tag penutup, harus

diberi notasi <br/>,<hr/>.

Nilai untuk atribut harus berada dalam tanda kutip.

Atribut tanpa nilai tidak diijinkan lagi di XHTML, artinya setiap atribut

harus mempunyai nilai.

Beberapa tanda spasi atau karakter white space lain dalam string yang

menyimpan nilai sebuah atribut digabungkan menjadi satu spasi saja.

Atribut “name” untuk beberapa tag diubah menjadi atribut “id” sehingga

penamaan menjadi konsisten untuk semua tag

XHTML (seperti XML) adalah case sensitive,

Format karakter dalam bentuk heksadesimal harus dimulai dengan &#x

(dengan x kecil), misalnya

2.3 W3C XHTML Validation Service

Validation service ( validator.w3.org ), adalah sebuah service validasi

yang dapat memeriksa syntax dokumen :

o URL that specifies the location of the file.

o Uploading a file to the site validator.w3.org/file-upload.html

Gambar 18. Validation Service


2.4 Header

Menerapkan Six headers ( header elements) dari h1 through h6 :

Gambar 20. Syntax Header

2.5 Linking

Hyperlink adalah menghubungkan ke halaman XHTML yang lain atau image,

dapat berupa teks maupun image dan dibuat menggunakan a (anchor) element :

Attribute href yaitu mendefinisikan alamat dari halaman yang di link.

Link ke e-mail addresses menggunakan mailto: URL.

Keterangan : tag yang <strong> adalah tag yang digunakan untuk link,

sedangkan tag bold (adalah tag yang lama/yang memang sudah di desain

sebelumnya).


Gambar 21. Syntax Linking Ke Halaman Lain

Gambar 22. Syntax Linking Ke Email


2.6 Images

Ada Tiga Format yang paling popular untuk image yaitu sebagai berikut :

Graphics Interchange Format (GIF).

Joint Photographic Experts Group (JPEG).

Portable Network Graphics (PNG).

Dan untuk menambahan properties img element yaitu teridiri dari : src attribute,

lokasi dari file imagenya, width dan height, pixels (“picture elements”), empty

elements, terminated by character / inside the closing right angle bracket (>), or

by explicitly including the end tag br element line break.

Gambar 23. Syntax Image


Gambar 24. Syntax Image


2.7 Special Characters dan Line Breaks

Character entity references (in the form &code;), Numeric character references

(e.g. &), del, Strike-out text, sup, superscript text, sub, subscript text, <hr />,

Horizontal rule (horizontal line).

Gambar 25. Syntax Special Characters dan Line Breaks


2.8 Unordered Lists

Unordered list sering dikenal dengan nama element ul, untuk membuat daftar non

angka, yang didalamnya ada element li (list item), untuk urutan dalam unordered

list.

Gambar 26. Syntax Unordered Lists

2.9 Nested dan Ordered Lists

Nested dan Ordered Lists ini berguna untuk merepresentasikan hierarchical

relationships, dikenal dengan element ordered lists (ol) yaitu untuk membuat

daftar berupa urutan angka.



Gambar 27. Nested dan Ordered Lists

# Pertemuan 9.

2.10 Pengenalan Macromedia Dreamweaver

Dreamweaver merupakan tool/alat untuk memanagement website dan juga

sebagai alat yang mudah sekali untuk membuat halaman web. Banyak sekali

profesional web developer yang menggunakan dreamweaver ini untuk

membangun dan mengelola suatu website dengan hasil yang sangat memuaskan.

Dreamweaver digunakan sebagai tool untuk membuat design web dengan

XHTML dan melakukan coding scripting untuk membuat web yang dinamis.

Gambar 28. Workspace Dreamweaver


Pada gambar diatas adalah tampilan workspace (area kerja) jika kita memulai

develop web dengan menggunakan Dreamweaver. Bagian-bagian workspace

tersebut sebagai berikut :

Insert bar berisi tombol-tombol untuk memasukkan berbagai type

“object”, seperti image, table, dan layer, ke dalam document

Dreamweaver. Setiap object merupakan bagian dari code HTML yang

memungkinkan Anda untuk melakukan berbagai macam setting atribut

object yang Anda masukkan tersebut. Sebagai contoh, Anda bisa

memasukkan table HTML dengan cara click tombol Table yang ada di

Inser bar. Jika Anda suka cara lain, Anda pun bisa memasukkan object

HTML dengan melalui menu Insert yang ada diatas Insert bar.

Document toolbar berisi tombol-tombol dan menu pop-up yang

menyediakan view Document window (ada 2 view document window,

yaitu: Design View dan Code View), berbagai view untuk option, dan

beberapa perintah operasional seperti preview kedalam browser (misal

browser IE – Internet Explorer).

Document window untuk menampilkan document sekarang ini yang

sedang Anda buat atau sedang Anda kembangkan (editing).

Panel groups merupakan sekumpulan panel group yang secara bersama-

sama dalam satu heading. Untuk melihat lebih detail lagi panel ini

(expand), lakukan click tanda panah expander yang ada di kiri group nama

panel tersebut. Untuk mejadikan undock panel group ini, lakukan drag

tanda gripper yang ada di tepi kiri dari judul group bar ini.

Tag selector memperlihatkan ke Anda relevansi tag HTML sesuai yang

Anda pilih (selected) di Document window. Anda dapat memilih bagian-

bagian document lain dengan cara cukup melakukan click di nama tag

dalam Tag selector.

Property inspector memperlihatkan ke Anda view dan fasilitas untuk

mengubah berbagai macam property object / text yang sesuai Anda pilih.

Setiap type object memiliki property yang berbeda-beda. Property

inspector biasanya ditampilkan dibawah design area. Property inspector ini


juga dapat dilihat dengan cara melakukan click langsung (short-cut)

tombol-tombol yang ada di panel Dreamweaver. Property inspector ini

bisa juga muncul saat ada perubahan object yang terpilih di design area.

Jika Anda merasa tidak memerlukan property inspector ini, dalam arti

Anda tidak ingin terlihat di window Dreamweaver, maka Anda cukup

memilih dari menu „Window‟ di screen Dreamweaver bagian atas dan

kemudian pilih uncheck submenu Property yang ada di menu tersebut

(atau dengan sort-cut Ctrl+F3).

Saat ada bagian text yang terpilih (selected) di Document window, maka secara

otomatis panel akan menampilkan fasilitas untuk setting yang dapat digunakan

oleh text terpilih tesebut (seperti yang ditunjukkan gambar dibawah ini), dimana

berisi fasilitas : font, text size, color, atribut text seperti bold dan italic, text

alignment, dan lain-lain. Selain itu panel juga bisa menampilkan informasi

asosiasi hyperlink dalam bagian text yang terpilih tersebut.

(Property inspector untuk text)

Property inspector untuk image ditunjukkan seperti gambar dibawah ini. Dengan

toolbar ini, Anda bisa melakukan setting lebar dan tinggi (width – height) dari

suatu image, merubah asosiasi lokasi hyperlink saat image tersebut di-click, dan

alignment image terhadap keseluruhan window page saat ditampilkan di browser.


(Property inspector untuk image)

Files panel yang terlihat di sebelah

kanan ini, memberikan fasilitas bagi

Anda agar mampu memanage file-file

hasil develop web Anda beserta

informasi folder-foldernya, dimana bisa

merupakan bagian dalam satu PC di Dreamweaver (localdisk) ataupun merupakan

remote server. Files panel juga menyediakan kemampuan untuk mengakses semua

file di localdisk, seperti layaknya Window Explorer.

View selector seperti yang terlihat diatas ini memberikan fasilitas bagi Anda agar

Anda bisa mengubah setting view. Ada 3 pilihan dalam view selector ini, yaitu :

Code view menampilkan code HTML sebenarnya yang sesuai dengan document

page tersebut. Pilihan ini sangat bagus bagi web developer yang lebih familiar

dengan coding dengan HTML. Design view memungkinkan Anda untuk create

document web page tanpa harus tahu bagaimana code HTML-nya. Sedangkan

Code and Design view memungkinkan Anda untuk view code HTML dan view

design secara bersama-sama dan secara simultan sesuai yang Anda ketik dan yang


Anda pilih. Pilihan ini sangat cocok untuk belajar bahasa HTML dengan melihat

apa yang Anda lakukan di Design view dan melihat langsung bagaimana code

HTML-nya untuk object yang Anda buat atau Anda ubah tersebut.

2.10.1 HTML, XHTML dan Dreamweaver

Semua document HTML minimal memiliki struktur 4 tag. Tag pertama : <html> ,

yang gunanya untuk memberitahukan ke browser bahwa yang dibaca oleh

browser tersebut merupakan document HTML. Tag kedua, <head> , dimana

gunanya untuk memberitahu kepada browser letak header document page

tersebut. Header page sebagai tempat untuk informasi document page tersebut,

seperti title dari document, jika dilihat memakai browser IE, maka akan muncul di

title bar dari window browser IE. Sedangkan tag <title> terletak didalam title

document page. Selanjutnya tag yang keempat, <body> , terletak didalam tag

HTML sebagai badan (body) dan document. Sebagian besar tag HTML

memerlukan open tag dan close tag dalam format <tagname> </tagname>.

<html>

<head>

<title>Belajar HTML</title>

</head>

<body>

Body document: Anda bisa memasukkan text, hyperlink dan

image.

</body>

</html>


Dengan memakai Dreamweaver, maka bisa Anda lakukan dari menu File

New.. (Ctrl + N) untuk membuat document page HTML pertama kali, kemudian

pilih basic page, seperti terlihat gambar dibawah ini :

Hasil HTML-nya sebagai berikut :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1">

</head>

<body>

</body>

</html>


2.10.2 Body HTML

Untuk menambahkan properti tag

<body>, Anda bisa arahkan

cursor mouse yang berupa text

selection ke tag <body> pada

area Code view, kemudian click

kanan mouse Anda, maka Akan

terlihat menu pop-up seperti

gambar di samping ini.

Kemudian, pilihlah menu pop-up

ini pada pilihan menu Edit Tag

<body>... atau Anda cukup dengan sort-cut Ctrl+F5. Selanjutnya akan muncul

fasilitas window Tag Editor – Body, dan sekaligus Anda bisa melakukan editing

properti dari tag <body> ini, dimana jika Anda tidak akan mengubah propertinya,

Anda cukup mengosongkan saja.


Tag <body> akan berubah propertinya menjadi (misalkan) :

<body bgcolor="#00FF66" background="/painting.jpg" text="#FF0000"

link="#3300FF" vlink="#996699">

Penjelasan setiap property tag <body> tersebut sebagai berikut :

Attribute Function

ALINK definisi warna active link.

BACKGROUND URL image yg digunakan untuk document background.

BGCOLOR Definisi warna document background.

BGPROPERTIES Jika diset “FIXED”, maka background image tidak bisa scroll.

LEFTMARGIN Setting lebar margin kiri dlm pixels.

LINK Definisi warna unvisited link.

TEXT Definisi warna text.

TOPMARGIN Setting lebar margin atas dlm pixels.

VLINK Definisi warna yg baru saja link dikunjungi.

2.10.3 Format Text HTML

2.10.3.1 Heading

Heading digunakan untuk menampilkan nama bab atau bagian tertentu yang

dianggap sebagai topik utama. Pada HTML terdapat enam level heading mulai

dari tag <H1> sampai dengan <H6>. Anda juga dapat menggunakan tag untuk

mengatur ukuran font, misalkan yang terbesar dengan <H1> atau membuatnya

paling kecil dengan <H6> namun tag ini bukan digunakan untuk keperluan

tersebut.

Posisi heading pada dokumen HTML dapat Anda tentukan sendiri. Artinya teks

yang berfungsi sebagai heading dapat Anda tempatkan di kiri, kanan, atau di

tengah dalam dokumen.Untuk mengatur posisi heading, Anda dapat menggunakan

atribut ALIGN pada tag heading. Nilai dari atribut ALIGN dapat diisi dengan


salah satu nilai, left untuk perataan sebelah kiri, right untuk perataan sebelah

kanan, atau center untuk menuliskannya tepat di tengah.

Untuk melihat properti tag heading ini di Dreamweaver bisa dengan cara seperti

pada tag <body> diatas, yaitu Ctrl+F5 dengan cursor text diletakkan tepat di tag

<body>.

2.10.3.2 Membuat Baris Baru

Line break <BR> adalah tag yang berfungsi untuk membuat baris baru pada

dokumen HTML tag <BR> ini membuat baris baru tanpa memberi baris kosong.

2.10.3.3 Membuat Paragraf

Anda dapat mulai meletakkan kalimat text di halaman web dalam bentuk paragraf,

maka untuk keperluan ini HTML menyediakan tags <P>. Perintah ini mempunyai

beberapa atribut. Tag <P> umumnya untuk menandai suatu paragraf baru. Anda

juga dapat menggunakan tag <BR> untuk memulai baris baru, namun pemakaian

tag <P>

terutama digunakan untuk membuat group paragraf dengan

formatting style tertentu.

<HTML>

<HEAD>

<TITLE>Pemrograman Web</TITLE>

</HEAD>

<BODY>

<H1 Align="Left"> Heading 1 </H1><BR>

<H2 Align="Right"> Heading 2 </H2><BR>

<H4 Align="Center"> Heading 4 </H4>

</BODY>

</HTML>

SAMPLE

SAMPLE


Sama halnya dengan tag heading, tag paragraf <P> memiliki atribut untuk

mengatur alignment atau pengatur posisi, yaitu left untuk meratakan paragrap di

kiri, right untuk perataan sebelah kanan, dan center untuk meletakkan pada posisi

tengah horizontal.

Untuk melihat properti tag paragraf ini di Dreamweaver bisa dengan cara seperti


<P>.

2.10.3.4 Membuat Daftar/List

Dalam praktikum Pemrograman Web ini diperkenalkan cara membuat daftar atau

list, yaitu bisa dengan 3 macam cara, yaitu :

- unordered list

- ordered list

- definisi

2.10.3.5 Unordered List

Unordered list biasanya ditandai dengan pemakaian bullet untuk menandai sebuah

item dari list. Bullet adalah karakter tertentu yang berupa karakter symbol,

misalkan bullet dengan bentuk tanda panah, rumah, segitiga, dan sebagainya.

Untuk membuat list dengan menggunakan sebuah bullet di gunakan tag <UL>

(unordered list) sebagai tanda tag awal dan </UL> sebagai tanda tag penutup.

<HTML>

<HEAD>


</HEAD>

<BODY>

<P ALIGN="center">Paragraf 1 </P>

<P ALIGN="right">Paragraf 2 </P>

<P ALIGN="left">Paragraf 3 </P>

</BODY>

</HTML>


Untuk item-item di dalam list harus diawali dengan tag <LI> dan boleh tidak

memakai tanda akhir tag.

Bentuk default tanda item dalam tag <UL> adalah bullet. Untuk mengubah Anda

dapat menggunakan atribut TYPE dengan diikuti nilai kontanta. Konstanta ini

mewakili karakter symbol yang akan digunakan. Sedangkan item-item dari daftar

tadi ditandai dengan memberikan tag <LI>.

2.10.3.6 Ordered List

Ordered list adalah daftar yang tiap bagiannya disertai dengan penomoran.

Ordered list dimulai dengan tag <OL> dan diakhiri dengan tag </OL>. Ordered

list mempunyai beberapa tipe penomoran yang dapat digunakan, yaitu :


COMPACT Render list dalam compact form

TYPE=A Setting marker menjadi huruf besar

TYPE=a Setting marker menjadi huruf kecil

TYPE=I Setting marker menjadi uppercase Roman numerals

TYPE=i Setting marker menjadi lowercase Roman numerals

TYPE=1 Setting marker menjadi nomor

START=n Setting marker mulai dari n

Apabila Anda menuliskan atribut TYPE pada tag <OL> maka tipe tersebut akan

dipakai sebagai default dari seluruh item. Namun Anda juga dapat memberikan

tipe untuk masing-masing item, yaitu dengan memberikan atribut TYPE pada tag

<HTML>

<HEAD>


</HEAD>

<BODY>

<UL>

<LI> item pertama </LI>

<LI> item kedua </LI>

<LI> item ketiga </LI>

</UL>

</BODY>

</HTML>

SAMPLE


<LI>. Atribut START dipakai pada tag <OL> dan digunakan untuk menentukan

nomor dari item pertama.

2.10.3.7 Definition List

Definition list adalah daftar yang mempunyai keterangan pada itemnya. Untuk

memakai defenition list Anda dapat menggunakan pasangan tag <DL> dan

</DL>. Tag ini bekerja dibantu oleh tag lainnya, yaitu tag <DT> yang

menandakan item yang dijelaskan dan tag <DD> menyatakan defenisi dari item.

<HTML>

<HEAD>


</HEAD>

<BODY>

<DL>

<DT> item pertama </DT>

<DD> sub item pertama </DD>

<DT> item kedua </DT>

<DD> sub item kedua </DD>

<DT> item ketiga </DT>

<DD> sub item ketiga </DD>

</DL>

</BODY>

</HTML>

<HTML>

<HEAD>


</HEAD>

<BODY>

<OL TYPE=A START=3>

<LI> item pertama </LI>

<LI> item kedua </LI>

<LI> item ketiga </LI>

</OL>

</BODY>

</HTML>

SAMPLE

SAMPLE


2.10.3.8 Format Tulisan

Format tulisan ini meliputi : font, bold, italic, dan strong.

2.11 Graphics di HTML

Gambar adalah elemen yang sangat penting dalam menampilkan informasi.

HTML menyediakan tag <IMG> untuk menampilkan gambar pada halaman web

Anda.

<IMG SRC=”fotoku.gif” ALT=”Ini Foto Asliku” WIDTH=100

HEIGHT=75 BORDER=0 ALIGN=MIDDLE HSPACE=10

VSPACE=15>

Perintah HTML diatas akan menampilkan gambar fotoku.gif dan menampilkan

teks “Ini Foto Asliku” apabila browser mematikan fasilitas penampil grafik.

Ekstensi grafik yang biasa di tampilkan oleh HTML adalah GIF, JPG, dan BMP.

Atribut ALT dipakai untuk menampilkan teks pengganti gambar untuk browser

yang tidak mendukung penggunaan gambar atau apabila client sengaja mematikan

fasilitas tersebut. Anda juga dapat menggunakan atribut align untuk mengatur

posisi gambar terhadap teks yang bersebelahan. Anda juga bisa mengatur lebar

dan tinggi gambar tersebut dengan atribut WIDTH dan HEIGHT. Sedangkan

dengan menambahkan atribut HSPACE dan VSPACE, Anda juga dapat mengatur

frame yang mengelilingi gambar. Selanjutnya untuk properti BORDER sebagai

informasi ukuran garis border yang mengelilingi gambar tersebut.

Untuk melihat properti tag Image ini di Dreamweaver bisa dengan cara seperti


<img>.


2.12 Hyperlink di HTML

Link sebenarnya memiliki dua bagian yang berbeda. Pertama, bagian yang dapat

Anda lihat di Web page, disebut dengan anchor. Link anchor bisa berupa kata,

kalimat, atau pun gambar. Jadi Ancor ini yang terpenting apa saja yang bisa

terlihat di layar browser. Sedangkan bagian satunya lagi disebut URL reference,

yaitu bagian yang memberitahukan kepada browser apa yang akan dilakukan

browser jika Anda melakukan click ke link tersebut.

Tag HTML untuk hyperlink ini dengan menggunakan tag <A> anchor </A>.

Contohnya sebagai berikut :

Text Anchor :

<A HREF="mahasiswa.html">Lihat daftar mahasiswa</A>

Graphic Anchor :

<A HREF="mahasiswa.html"> <IMG SRC=”mhs.gif”> </A>

Untuk membuat URL Link reference dengan menambahkan atribut HREF pada

tag <A>. Terdapat 2 macam URL Link, yaitu Internal Link dan External Link

(resource file lain).


Link Internal berarti tujuan link masih dalam Web page tersebut, bukan file web

page lain. Untuk menandakan tempat tujuan link dengan tag <A> juga, hanya saja

ditambah properti NAME.

<A NAME="bagianbawah"> Akhir Cerita </A>

Sedangkan hyperlinknya dengan isi properti HREF ditambah karakter #.

<A HREF="#bagianbawah"> Menuju Akhir Cerita Bahagia </A>

Jika Anda melakukan click pada hyperlink ini, maka cursor layar browser akan

menuju ke tag link bagianbawah. Hal ini akan terlihat bedanya jika isi web page

sangat panjang sehingga perlu scrolling window browser.

External link bisa memiliki aksi bermacam-macam, dimana dapat dipetakan

sebagai berikut :

Link To What to Use Sample Link

Web page http://sitename/ http://www.ui.ac.id/

E-mail mailto:address mailto:[email protected]

Newsgroup news:newsgroupname news:news.newusers.questions

FTP ftp://sitename/ ftp://ftp.tokobuku.com/

Gopher gopher://sitename/ gopher://gopher.berita.com/

WAIS wais://sitename/ wais://wais.mysite.com/

Telnet telnet://sitename/ telnet://bbs.server1.com/

External Link ini memiliki 4 macam target, yaitu :

_self artinya hasil link masih dalam satu window browser tersebut. _blank artinya

hasil link dalam window browser baru yang terpisah dari achor. _parent artinya

hasil link muncul dalam window browser yang sebelumnya memunculkannya,

seperti pop-up dialog dalam web page. _top artinya hasil link muncul dalam top

frame. Bisa juga target link ini menuju suatu ID Frame.


2.13 Membuat Layout Frame di HTML

Untuk membuat layout suatu web page bisa dengan tag FRAME. Frame ini

berusaha membagi layar webpage sesuai dengan layout yang diinginkan. Setiap

frame bisa berkorespondesi dengan suatu link page tertentu.

Untuk mengumpulkan beberapa frame dengan menggunakan tag FRAMESET.

Sehingga struktur HTML-nya akan menjadi :

<FRAMESET ROWS=.. COLS=..>

<FRAME>..</FRAME>

<FRAME>..</FRAME>

…

<NOFRAME>..</NOFRAME>

</FARMESET>

Diperbolehkan juga dalam suatu FRAMESET selain terdapat FRAME bisa juga

terdapat lagi FRAMESET yang terletak didalamnya.

Lihat Contoh berikut :

<HTML>

<HEAD>

</HEAD>

<FRAMESET ROWS="25%,50%,25%">

<FRAME SRC="header.htm">

<FRAMESET COLS="25%,75%">

<FRAME SRC="label.htm">

<FRAME SRC="info.htm">

</FRAMESET>

<FRAME SRC="footer.htm">

</FRAMESET>

<NOFRAMES>


Your browser cannot display frames.

</NOFRAMES>

</HTML>

Hasil Layout sebagai berikut :

# Pertemuan 10.

Berikut ini latihan dasar HTML, dimana design interface meliputi font, warna,

paragraph, background, dan isi halaman web ini, dipersilahkan mahasiswa untuk

mengembangkan dengan asumsi-asumsi yang dimiliki.

1. Buatlah halaman web untuk menampilkan informasi identitas mahasiswa

dan deskripsi (hoby, kemampuan, foto, dll) dengan layout sebagai berikut :

Foto

Identitas

Deskripsi lain


Berikut ini sample tampilannya :

2. Buatlah halaman web untuk kumpulan informasi data mahasiswa yang

terdiri dari 3 frame, dimana frame paling atas untuk header dan logo

universitas, frame paling kiri untuk list nama-nama mahsiswa yang

memiliki link untuk detail identitas mahasiswa tersebut yang terletak di

frame bagian kanan.

Layout sebagai berikut :

Nama Universitas dan Logo

List nama

mahasiswa, jika

di-klik akan

memiliki link ke

frame sebelah

kanan

Detail identitas dan deskripsi mahasiswa

Beserta fotonya


Berikut ini sample tampilannya :


Chapter 3

CSS (CASCADING STYLE SHEET)

==================================

3.1 Pendahuluan

CSS (Cascading Style Sheet) merupakan sebuah dokumen yang dapat digunakan

untuk melakukan pengaturan pada seluruh komponen web. CSS dapat digunakan

dengan berbagai metode, salah satu diantaranya adalah diletakkan pada bagian

Head. CSS (Cascading Style Sheet) juga dapat digunakan untuk melengkapi file

HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style yang akan

digunakan pada sebuah website. Seperti dapat digunakan untuk merubah ukuran

font, merubah warna background, mengatur perataan paragraf, dll.

3.2 Menambahkan CSS ke dalam HTML

3.2.1 External Style Sheets

External style sheets merupakan dokumen css yang disimpan dalam file

berbeda dengan file HTML. File ini berekstension .css

Untuk menyertakan file css, letakkan tag berikut ke dalam

<head>…</head>

<link rel="stylesheet" type="text/css" href=“namafile.css" />

Biasa dipakai jika beberapa halaman akan menggunakan style yang sama.

3.2.2 Internal Style Sheets

diletakkan di antara <head>…</head>

<style type=“text/css”>


letakkan css di sini

</style>

3.2.3 Inline Style

diletakkan di dalam elemen HTML

<h1 style=“color: #0099ff;font-family: Verdana; size: 18pt;”>

3.3 Istilah-istilah Dalam CSS

Style rule

Cascading style sheet merupakan kumpulan aturan yang mendefinisikan

o style dari document. Sebagai contoh kita bisa membuat aturan

style yang

o menentukan bahwa semua <H1> di tampilkan dengan warna biru.

selector { property1: value; property2:value, . . .}

H1{ color:green; background-color:orange}

Style sheets terdiri dari dua bagian:

1. Selector

Bagian pertama sebelum tanda “{}” disebut selector

2. Declaration

Terdiri dari property dan value

Antara property yang satu dan yang lainnya dipisahkan dengan tanda ; (titik

koma).

3.4 Komentar Pada CSS

Komentar biasa digunakan untuk memberi keterangan pada css yang

dibuat.

Komentar tidak akan ditampilkan pada browser

Komentar dalam CSS dibuat dengan /* tulis komentar di sini */


3.5 Class Selector

Class selector

o Diawali dengan tanda titik (.) dan diikuti nama class

o .namakelas {….}

o Digunakan agar sebuah objek bisa menggunakan deklarasi CSS

tersebut

o Misalnya <p class=„judul‟>…</p>

Artinya paragraf tersebut menggunakan aturan yang ditetapkan dalam class

selector judul.

ID selector

o Diawali dengan tanda titik (#) dan diikuti nama id

o #namaid {….}

o Digunakan agar sebuah objek bisa menggunakan deklarasi CSS

tersebut dan biasanya bersifat unik dalam sebuah halaman

o Misalnya <p id=„header‟>…</p>

o Artinya paragraf tersebut menggunakan aturan yang ditetapkan

dalam id selector header.

3.6 CSS Background Properties

CSS background properties digunakan untuk mengatur tampilan background pada

sebuah elemen. Misalnya menentukan warna background, membuat background

berupa gambar, dan menentukan posisi background.

Property Description Values

background Property yang digunakan

untuk menyeting semua

backgroung property dalam

sebuah deklarasi saja.

background-color

background-image

background-repeat

background-

attachment

background-position


background-

attachment

Menentukan apakah

background gambar fixed

atau scroll

scroll

fixed

background-

color

Menentukan warna

background

color-rgb

color-hex

color-name

transparent

background-

image

menentukan gambar sebagai

background

url

none

background-

position

Menentukan posisi awal

background yang berupa

gambar

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

x-% y-%

x-pos y-pos

background-

repeat

Menentukan bagaimana

background yang berupa

gambar akan ditampilkan

secara berulang

repeat

repeat-x

repeat-y

no-repeat

3.7 CSS Text Properties

CSS Text properties digunakan untuk mengatur tampilan text. Misalnya

menentukan warna text, perataan text dan dekorasi text.


color Menentukan warna text color

letter-spacing Menentukan jarak spasi antar

huruf

normal

length unit

text-align Perataan text dalam sebuah

element

left

right

center

justify


text-

decoration

Menambahkan dekorasi ke dalam

text

none

underline

overline

line-through

blink

text-indent Memberikan indent pada baris

pertama

length

%

text-transform Menentukan bentuk huruf none

capitalize

uppercase

lowercase

white-space Menentukan bagaimana white

space akan ditangani

normal

pre

nowrap

word-spacing Menentukan jarak spasi antar

kata

normal

length

3.8 CSS Border Properties

CSS border properties digunakan untuk mengatur border di setiap elemen.

Misalnya saja warna border, ketebalan border dan style border.


border Digunakan untuk

menentukan property

border(atas, kiri, kanan,

bawah) dalam satu

deklarasi saja

border-width

border-style

border-color

border-bottom Digunakan untuk

menentukan property

border bagian bawah

dalam satu deklarasi saja

border-bottom-width

border-style

border-color

border-bottom-color Menentukan warna

border bawah

border-color

border-bottom-style Menentukan style border

bawah

border-style

border-bottom-width Menentukan lebar border

bawah

thin

medium

../Project%20Bahan%20Ajar/Tugas%20Bu%20Anggalia/backup%20away/backup%20fd%20120407/materi%20ajar/html/html/html/References/References/w3schools/www.w3schools.com/css/pr_border-bottom_width.asp.htm


thick

length

border-color Menentukan warna

keempat border

color

border-left Digunakan untuk

menentukan property

border bagian kiri dalam

satu deklarasi saja

border-left-width

border-style

border-color

border-left-color Menentukan warna

border kiri

border-color

border-left-style Menentukan style border

kiri

border-style

border-left-width Menentukan lebar border

kiri

thin

medium

thick

length

border-right Digunakan untuk

menentukan property

border bagian kanan

dalam satu deklarasi saja

border-right-width

border-style

border-color

border-right-color Menentukan warna

border kanan

border-color

border-right-style Menentukan style border

kanan

border-style

border-right-width Menentukan lebar border

kanan

thin

medium

thick

length

border-style Menentukan style dari

keempat border sekaligus

None / hidden /

dotted / dashed / solid

/ double / groove /

ridge /inset / outset

border-top Digunakan untuk

menentukan property

border bagian atas dalam

satu deklarasi saja

border-top-width

border-style

border-color

border-top-color Menentukan warna

border atas

border-color

border-top-style Menentukan style border

atas

border-style


border-top-width Menentukan ukuran

border atas

thin / medium / thick

length

border-width Menentukan ukuran dari

keempat border sekaligus

thin / medium / thick

length

3.9 CSS Margin Properties

CSS margin properties digunakan untuk mengatur jarak (spasi) di sekitar elemen.

Property Description

margin Mensatur margin properti untuk kempat sisi

(atas, kanan, bawah, kiri) sekaligus

margin-bottom Mengatur margin bawah

margin-left Mengatur margin kiri

margin-right Mengatur margin kanan

margin-top Mengatur margin atas

3.10 CSS Padding Properties

CSS padding properties digunakan untuk menentukan spasi antara border elemen

dengan isi element.


padding Menentukan empat padding sebuah

elemen (atas, kanan, bawah, kiri)

sekaligus

padding-top

padding-right

padding-bottom

padding-left

padding-bottom Menentukan padding bawah sebuah

elemen

length

%

padding-left Menentukan padding kiri sebuah

elemen

length

%

padding-right Menentukan padding kanan sebuah

elemen

length

%

padding-top Menentukan padding atas sebuah

elemen

length

%


3.11 CSS List Properties

CSS list properties digunakan merubah jenis list, memberi gambar sebagai

pengganti bullet, dll.


list-style Digunakan untuk menentukan

semua list properties sekaligus.

list-style-type

list-style-position

list-style-image

list-style-image Menetapkan image sebagai

penanda list

none

url

list-style-position Menentukan tempat penanda

list item

inside

outside

list-style-type Menentukan tipe penanda list

item

none

disc

circle

square

decimal

decimal-leading-

zero

lower-roman

upper-roman

lower-alpha

upper-alpha

lower-greek

lower-latin

upper-latin

# Pertemuan 11.

Latihan Menggunakan CSS :

<html>

<head><title>Membuat form bentuk cantik</title>

<style type="text/css">



</style></head>

<body>

<form name="form1" method="post" action="">

<table class="TABLE" width="350" border="0"

cellspacing="0" cellpadding="3">

<tr align="left" bgcolor="#00FF00">

<th colspan="2" scope="col">Form Cantik </th>

</tr>

<tr>

<td width="81">Nama </td>

<td width="107">

<input name="nama" type="text" id="nama" size="25"

maxlength="35"></td>

</tr>

<tr>

<td>Alamat</td>

<td><input name="alamat" type="text" id="alamat"

size="25" maxlength="35"></td>

</tr>

<tr>

<td>Email</td>

<td><input name="email" type="text" id="email"

size="25" maxlength="35"></td>

</tr>

<tr>

<td>Pesan</td>

<td> <textarea name="pesan" cols="25" rows="4"

id="pesan"></textarea></td>

</tr>

<tr>

<td> </td>

<td><input type="submit" name="Submit"

value="Kirim"></td>

</tr>

</table>

</form>

</body>

</html>


Chapter 4

Java Script

======================================

4.1 Pendahuluan

Java script adalah sebuah semi-bahasa pemrograman yang bersifat Client Side

yang berfungsi sebagai alat untuk menciptakan sebuah suatu halaman Web yang

interaktif dan dinamis. Berbeda dengan java, javascript tidak memiliki kompiler

seperti halnya java. Sifat yang sama dengan bahasa java adalah javascript bersifat

interpreter, yaitu script yang telah dibuat di text editor seperti notepad atau

wordpad akan dibaca perbaris dari baris awal sampai akhir.

4.2 Kelebihan dan Kekurangan Javascript

4.2.1 Kelebihan Javascript

1. Ukuran file kecil

Script dari javascript memiliki ukuran yang kecil sehingga ketika web yang

memiliki javascript ditampilkan di browser maka akses tampilannya akan

lebih cepat dibandingkan ketika browser membuka suatu web yang memiliki

script java. Hal ini juga sangat berkepentingan dengan daya kerja server.

Semakin kecil space suatu web yang disimpan dalam suatu server maka daya

kerja server ketika di browsing oleh user di internet akan tidak terlalu berat,

selain itu sifat javascript client side yang tidak perlu lagi di olah oleh server

ketika browser memanggil web dari sebuah server.


2. Mudah untuk dipelajari

Javascript merupakan bahasa semi pemograman yang merupakan gabungan

antara bahasa pemograman java dengan bahasa kode HTML sehingga disebut

bahasa hybrid. Walaupun javascript merupakan turunan dari java namun

javascript tidak memiliki aturan yang serumit java.

3. Terbuka

Javascript tidak terikat oleh hardware maupun software tertentu bahkan

system operasi seperti windows maupun unix. Karena ia bersifat terbuka,

maka ia dapat dibuat maupun di baca di semua jenis komputer.

4. Cepat

Dapat diletakkan langsung dalam file HTML jadi bisa sekaligus dan cepat

dalam memanipulasi suatu halaman Web.

4.2.2 Kekurangan Javascript

1. Script tidak terenkripsi

Karena javascript bersifat client side, maka script yang kita buat di text editor

dan telah dijadikan web di server, ketika user me-request web dari server

tersebut maka sintax javascript akan langsung ditampilkan di browser. User

bisa melihat dan menirunya dari sourcenya.

2. Kemampuan terbatas

Walaupun javascript mampu membuat bentuk web menjadi interaktif dan

dinamis, namun javascript tidak mampu membuat program aplikasi sendiri

seperti java.


3. Keterbatasan Objek

Javascript tidak mampu membuat kelas-kelas yang bisa menampung objek-

objek tambahan seperti java karena javascript teleh memiliki objek yang

built-in pada sturktur bahasanya.

4.3 Struktur dan Syntax Dasar Javascript

Ditinjau dari segi pembuatan dan penulisannya, javascript tidak jauh beda dengan

HTML, sehingga file yang menggunakan sintax javascript di dalam script HTML

dapat menggunakan ekstension HTML juga.

Script dasar dalam javascript diawali dengan sintax <script> dan diakhiri dengan

sintax </script>. Agar text editor dapat mengidentifikasikan bahwa sintax

tersebut merupakan sintax javascript yang digunakan untuk aplikasi di web, maka

perlu penambahan sintax di dalam sintax script yaitu :

<script language=”javascript”>

Sedangkan ruang yang ada di antara sintax javascript tersebut kita dapat

mencantukkan ekspresi, fungsi, pernyataan dan lain sebagainya sesuai keinginan

kita.

Di dalam penulisan javascript untuk menampilkan suatu pernyataan atau kalimat

kita dapat menggunakan syntax :

Document.write(“kalimat yang akan di tampilkan”);

Dan pada setiap akhir pernyataan umumnya disertai dengan tanda titik koma (;)

kecuali pada kondisi tertentu. Terkadang ada beberapa browser yang lama tidak

dapat mengidentifikasikan script javascript secara baik sehingga tampilan di


browser tersebut akan menjadi kurang indah untuk dilihat. Oleh karena itu kita

harus mengantisipasinya dengan menggunakan tanda “<!-“ setelah penulisan

<script language=”javascript”> dan tanda “//->” sebelum penulisan </script>.

Di dalam script javascript juga dikenal tanda komentar yang apabila kita

bubuhkan tanda tersebut maka kalimat yang ada di samping ataupun di antara

tanda tersebut berfungsi sebagai komentar saja dan tidak tertampilkan di browser.

Tanda ini sangat membantu bagi yang baru mempelajari javascript agar lebih

memahami fungsi maupun peran sintax yang di terangkan oleh tanda keterangan

tersebut. Tanda tersebut ada beberapa jenis antara lain:

“//”, Tanda tersebut apabila kita letakkan di text editor yang menjadi

wahana pembuatan script javascript maka kalimat apapun yang ada di

sampingnya akan menjadi keterangan dan tidak dapat tertampilkan di

browser. Tanda tersebut bisaanya digunakan untuk keterangan yang hanya

satu baris saja.

“/* */ “, tanda tersebut merupakan tanda komentar yang apabila ada

kalimat di antaranya maka kaliamat tersebut akan menjadi keterangan

bisaa dan tidak tertampilkan oleh browser. Tanda ini bisaanya digunakan

pada keterangan yang sbanyaknya beberapa baris.

Dari segi peletakan posisi sintax javascript, kita dapat membaginya menjadi 3

kondisi, sebagai berikut :

1 Sintax javascript ditulis dengan file yang berbeda terpisah dengan file HTML.

Tata cara penulisan seperti ini yaitu memisahkan sintax javascript dengan

sintax HTML dapat memudahkan bagi pembuat web apabila kita ingin


membuat web yang berisi berbagai aplikasi javascript di setiap halaman yang

kita buat. Penulisan secara manual sintax javascript di setiap lembar web akan

cukup merepotkan bagi kita terlebih lagi hal tersebut dapat memperberat kerja

server karena besarnya file yang harus di kerjakan di server akibat banyaknya

script javascript yang berulang-ulang di setiap file web tersebut. Hal ini dapat

di atasi dengan membuat suatu file khusus bagi script javascript yang sama

dari beberapa file yang menggunakan script tersebut sehingga file utama akan

mencari file tersebut dengan sintax tertentu.

Script javascript yang kita buat tersebut kemudin kita simpan dalam suatu file

dengan ekstension “.js”. Dalam file tersebut kita tidak perlu mencatumkan

sintax pembuka <script> dan sintax penutup </script>.File utama terserbut

akan mencari file yang berekstention “.js” tersebut dengan sintax :

<script src=”nama_file.js”> </script>

Dengan menggunakan sintax tersebut, kita dapat memanggil kapanpun dan

diposisi manapun kita ingin menampilkan aplikasi javascript.

Contoh :

Buat file dengan nama script.js

document.write(“hallo ini cara penggunaan java script

lain file””<br>”);

buat file HTML dengan ketentuan penggunaan Java Script sebagai berikut:

<html>

<head>

<title>penggunaan Java Script</title>

<script src=”script.js”></script >

</head>


<body>

Belajar Java Script

</body>

</html>

2 Sintax javascript terintegrasi dengan sintax HTML. Dalam hal ini syntax java

script diletakkan pada posisi antara <HEAD>…</HEAD>. Posisi ini sering

sekali kita jumpai hampir disetiap web. Posisi ini cukup membantu kecepatan

tampilan web yang menggunakan aplikasi javascript. Karena sifatnya

interpreter, maka ketika browser pertama sekali membaca sebuah web yang

dipanggil olehnya, apabila script javascript tersebut diletakkan di antara sintax

<HEAD>….</HEAD> maka browser akan pertama sekali membaca dan

mengidentifikasi sintax tersebut sebelum browser membaca isi dari <BODY>.

Hal ini sangat membantu dari segi kecepatan tampilan sebuah web di browser.

# Pertemuan 12. (Kerjakan No. 1-2)

No. 1 :

<html>

<head>


<SCRIPT LANGUAGE = "JAVASCRIPT">

var nama = prompt("siapa nama kamu?: ","isi dengan nama

kamu");

var nim = prompt("nim: ","isi dengan nim kamu");

document.write("<h1><center>"+"CREW Lab. Programing

mengucapkan ..."+"</h1>");

document.write("<h3>hai " +nama+ " selamat belajar Web

programing");

document.write("<h3>jadi nim kamu " +nim );

</SCRIPT>

</head>

<body>

</body>

</html>

3 Sintax javascript terintegrasi dengan sintax HTML. Dalam hal ini syntax java

script diletakkan pada posisi antara <BODY>…</BODY>. Penempatan script


javascript di antara sintax BODY merupakan salah satu metode posisi

pengetikan script javascript selain seperti yang di atas. Jika kita meletakkan

script javascript di dalam sintax BODY maka ketika browser menerima

sebuah web dari salah satu web server maka sintax javascript dan sintax

HTML lainnya akan bersamaan diproses sehingga kecepatannya akan sedikit

berkurang bila dibandingkan sintax javascript diletakkan di antara HEAD. Hal

ini disebabkan javascript bersifat interpreter. Penempatan posisi ini juga dapat

mengatur posisi aplikasi javascript pada tubuh website yang kita buat dengan

mengaturnya melalui table agar preposisi javascript dapat dengan mudah

diletakkan.

No. 2 :

<html>

<head>


</head>

<body>

<SCRIPT LANGUAGE = "JAVASCRIPT">

var nama = prompt("siapa nama kamu?: ","isi dengan nama

kamu");

var nim = prompt("nim: ","isi dengan nim kamu");

document.write("<h1><center>"+"CREW Lab. Programming

mengucapkan ..."+"</h1>");

document.write("<h3>hai " +nama+ " selamat belajar Web

programing");

document.write("<h3>jadi nim kamu " +nim );

</SCRIPT>

</body>

</html>

4.4 Nilai, Variable dan Konstanta/Literal

4.4.1 Nilai Dalam Javascript

Nilai merupakan besaran yang digunakan untuk melakukan perhitungan, menulis

dan sebagainya. Di dalam javascript terdapat beberapa macam nilai, yaitu:


1. String

String adalah karakter yang bisa berupa huruf , kata symbol atau angka. String

ditulis diantara tanda kutip ganda (“) atau tanda kutip tunggal ( „ ). Jika terdapat

string lain gunakan tanda kutip tunggal. misal :

<INPUT NAME = age on focus =”windows.status= „ ketikkan

umur anda „ “>

name = “firdaus „alikomeini‟ adnan “

sedang untuk menulis tanda kutip ganda dalam string digunakan tanda (\ “).

Misalnya :

name = “Institut \”Teknologi \” Bandung ”

2. Numerik

Berupa bilangan atau angka yang mempunyai sifat matematis (bisa dijumlah,

tambah dsb), misalnya : 17, 8, 1945

3. Boolean

Nilai yang hanya memiliki dua nilai yaitu true (benar) dan false (salah)

4. Null

Adalah nilai yang tidak memiliki nilai sama sekali . Null tidak sama denagn

karakter kosong atau nilai nol ( 0 ).


4.4.2 Variabel (Aturan Penamaan Variable)

Java Script memiliki aturan untuk memberi nama variabel :

1. Harus diawali dengan karakter (huruf atau garis bawah ) tidak boleh diawali

dengan angka atau symbol.

Contoh :

Variable Keterangan

UJI_2.1 Benar

_UJI.2 Benar

2004_angkatan Salah

$sql Salah

2. Tidak boleh menggunakan spasi , untuk memisahkan antar karakter digunakan

garis bawah.

Contoh :

Variable Keterangan

Riska binayulia Salah

Riska_binayulia benar

3. Kapitalisasi (huruf besar dan huruf kecil) dibedakan pada nama variabel.

Contoh :

Firdausi tidak sama dengan firdausi

4. Tidak boleh mengunakan reserverd word, atau keyword yang ada pada Java

Script. Reserved word dalam javascript adalah :

Abstract, Boolean, break, byte, case, catch, char, class, const, continue,

default, do, double, else, extends, false, final, finally, float, for, function, goto,

if, implements, import, in, instace of, int, interface, long, native, new, null,

package, private, protected, public, return, short, static, super, switch,

synchronized, this, throw, throws, transient, true, try, var, void, while, with.


Memberikan nilai pada variabel

Untuk memberikan nilai pada variabel digunakan sintaks :

var namavariabel = nilai (value)

contoh :

Memberikan nilai string untuk variable :

var nama = “firdaus adnan”

Memberi nilai numerik untuk variable :

var angka = 1000.12

Memberi nilai Boolean untuk variable :

var x = true

var y = false

Memberi nilai null untuk variable :

var nama = null

4.4.3 Konstanta / Literal

Konstanta/literal adalah suatu nilai pasti yang tidak bisa diubah-ubah. Pengertian

ini relevan dengan kata dasarnya yaitu konstan yang artinya tetap. Jika isi variable

masih bisa diubah, maka konstanta tidak. Antara variable dan konstanta dapat

disatukan. Perhatikan contoh di bawah ini :

total = subtotal + 100

Nilai 100 di atas adalah konstanta/literal sedangkan total dan subtotal merupakan

varibale. Beberapa jenis literal pada Java Script :

1. Literal Integer

yaitu suatu bilangan bulat tanpa pecahan


Literal Bilangan

2001 Desimal

702 Octal

A33ff Heksadesimal

2. Literal Floating Point

yaitu suatu bilangan pecahan atau berpangkat.

Literal Arti

3.14 3,14

2E3 2 x 10 3

-2E3 -2 x 103

2E-3 2 x 103

3. Literal String

adalah suatu karakter yang berisi huruf , angka atau symbol-simbol lainnya.

Literal string harus diawali dan diakhiri dengan tanda kutip ganda ( “ ) atau

tunggal ( „ ).

Literal Keterangan

“riska binayulia ” Benar

“riska binayulia‟ Salah

4. Literal Boolean,

adalah suatu litral yang memiliki dua buah nilai yaitu true (benar) dan false

(salah)

4.5 Fungsi

Fungsi adalah sekumpulan kode-kode javascript yang jika dijalankan akan

menghasilkan atau mengerjakan suatu tugas tertentu. Fungsi dapat di sebut

sebagai modul atau subprogram dari seluruh skrip atau program javascript.

1. Pembuatan Fungsi

Dilihat dari segi pembuatan fungsi, maka sintak dasarnya adalah :


function nama_fungsi (parameter)

{ ……..

ekspresi

ekspresi

………

}

Untuk memposisikan sintak tersbut, maka sintak tersebut harus diletakkan di :


function nama_fungsi()

{

### isi fungsi ###

}

</script>

2. Aturan Pembuatan Fungsi

Ditinjau dari segi pembuatannya, maka fungsi memiliki beberapa aturan

pembuatan yang akan di jabarkan di bawah ini :

Diawali dengan kata function

Nama fungsi bebas, asalkan dapat menjelaskan fungsi dari fungsi tersebut.

Yang terenting di sini adalah fungsi harus diikuti oleh tanda kurung “()”

yang digunakan sebagai tempat parameter.

Di dalam tanda kurung setelah kata function, dapat diletakkan parameter

fungsi. Untuk lebih jelas lagi perhatikan sintak berikut :

function jumlah (a,b)

{

var c = a+b;

document.write (z)

}

Parameter di dalam fungsi bisa digunakan bisa juga tidak digunakan.

Parameter merupakan variable atau nilai yang akan diolah ekspresi-ekspresi

yang terdapat di dalam fungsi tersebut.


Contoh :

function pengurangan (x,y)

{

var z = x+y;

document.write (z)

}

Isi fungsi harus di letakkan di dalam tanda kurung kurawal.

Di setiap akhir frase fungsi, selalu di beri akhiran titik koma (;) sebagai

pemisah antar frase dan untuk frase terakhir tidak perlu di tambah tanda

titik koma.

3. Parameter Fungsi

Fungsi dapat di buat menggunakan parameter atau tanpa parameter.

1. Fungsi tanpa parameter.

Sintax yang mengatur tentang fungsi parameter :

<script language= “javascript”>

function fungsi ()

{

Document.write(“<hr>”)

}

fungsi ()

</script>

2. fungsi dengan parameter.

Sintax yang mengatur tentang fungsi dengan parameter :


function pengurangan(a,b)

{

Var r = a-b;

Document.write(z)

}


//Pemanggilan fungsi

Pengurangan(45,3)

</script>

4. Memanggil fungsi

Cara pemanggilan fungsi dalam sebuah script java script ada beberapa cara antara

lain :

1. Fungsi dipanggil dari dalam script java script.

Fungsi disini dapat di panggil dari dalam script java script sendiri seperti pada

contoh fungsi dengan parameter seperti diatas. Selain itu dapat juga

pemanggilan fungsi di lakukan di dalam body script HTML.

Contoh :

<html>

<head>


function pengurangan(a,b)

{

Var r = a-b;

document.write(z)

}

</script>

</head>

<body>


Pengurangan(78,122)

</script>

</body>

2. Fungsi dipanggil dari dalam fungsi itu sendiri (fungsi rekursif)

Fungsi ini sering disebut dengan fungsi rekursif atau berulang dimana suatu

fungsi yang dapat memanggil dirinya sendiri sintax yang mewakilinya adalah :

Contoh pencarian nilai factorial :



function factorial(a)

{

If ((a==0)||(a==1))

{Return 1}

else

{

hasil_adalah = ( a*factorial (x-1));

return hasil_adalah

}

}

for (counter = 0; counter < 16; counter++)

{

document.write(“nilai factorial ” ,counter,

“adalah= ”, factorial (counter)+”<br>”)

}

</script>

3. Fungsi dipanggil dari dalam fungsi yang lain.


function garis ()

{

document.write(“<hr>”)

}

function factorial(a)

{

If ((a==0)||(a==1))

{Return 1}

else

{

hasil_adalah = ( a*factorial (a-1));

return hasil_adalah

}

}


for (counter = 0; counter < 16; counter++)

{

document.write(“nilai factorial ” ,counter, “adalah= ”,

factorial (counter)+”<br>”)

garis()

}

</script>

# Pertemuan 13. (Kerjakan No.1-2)

No. 1 :

<HTML>

<HEAD>

<TITLE>Jam</TITLE>

<SCRIPT Language="JavaScript">



</SCRIPT>

</HEAD>

<BODY TEXT="red" BGCOLOR="#000561" LINK="#0000EE"

VLINK="#551A8B" ALINK="#FF0000" onLoad="showtime()">

<P><BR><CENTER>

<FORM name="CLOCK"><INPUT name="ALARM" TYPE="TEXT"

SIZE=30 VALUE=""></FORM>

</CENTER>

</BODY>

</HTML>

No.2 : <html>

<head>

<title>ular java</title>

<style>

.spanstyle

{

position : absolute;

visibility : visible;

top : -50px;

font-size : 10pt;


font-family : Verdana;

font-weight : bold;

color : blue;

}

</STYLE>

<script>

var message="aidemitluM & retupmoK namargormeP

.baL".split("");

var x; /* last recorded mouse X location */

var y; /* last recorded mouse Y location */

var step=-15; /* how much to move the characters from each

other */

var xpos=new Array(); /* X placement for each character */

var ypos=new Array(); /* Y placement for each character */

/* tunjuk di browser */

var isIE=document.all?true:false;

var isNS=document.layers?true:false;

var isDOM=document.getElementById?true:false;

function mouseMoved(e){

if(isDOM)

{

if(isIE)

{

x = event.clientX;

y = event.clientY;

}

else

{

x = e.clientX;

y = e.clientY;

}

}

else if(isIE)

{

x = document.body.scrollLeft+event.clientX;

y = document.body.scrollTop+event.clientY;

}

else if(isNS)

{

x = e.pageX;

y = e.pageY;

}

}

function makesnake()

{

var thisspan;

for (var i=message.length-1; i>=0; i--)

{

xpos[i]=xpos[i-1]+step;

ypos[i]=ypos[i-1];

}

xpos[0]=x+step;

ypos[0]=y;

for (var i in message)

{


if (isDOM)

{

thisspan = document.getElementById("span"+i).style;

thisspan.left=xpos[i];

thisspan.top=ypos[i];

}

else if (isIE)

{

thisspan = eval("span"+(i)+".style");

thisspan.posLeft=xpos[i];

thisspan.posTop=ypos[i];

}

else if (isDOM)

{

thisspan = eval("document.span"+i);

thisspan.left=xpos[i];

thisspan.top=ypos[i];

}

}

}

var timer = null;

function pakaiUlar()

{


{

xpos[i]=-50;

ypos[i]=-50;

}

setTimeout('timer=setInterval("makesnake()",30);',1000);

}


{

document.write("<span id='span"+i+"' class='spanstyle'>")

document.write(message[i]);

document.write("</span>");

}

if (isNS)

{

document.captureEvents(Event.MOUSEMOVE);

}

document.onmousemove = mouseMoved;

</script>

</head>

<body onload="pakaiUlar();">

<BR><center>Mulai</center>

</body>

</html>


Chapter 5

Web Server dan TCP/IP

=======================================

# Pertemuan 14.

5.1 Pendahuluan

Berikut ini adalah alasan pentingnya internet yaitu :

Kebutuhan manusia akan informasi / saling tukar informasi yang cepat,

akurat dan Up to date.

Komunikasi melalui internet tidak tergantung jarak, waktu dan tempat

asalkan ada fasilitas sambungan ke internet.

Manfaat adanya internet yaitu :

Pengembangan dunia RISET, kita dapat mendownload berbagai artikel,

journal, atau hasil penelitian.

Mencari gambar atau galeri apapun.

Mencari informasi, pertukaran data, tutorial, termasuk bahan kuliah di

internet.

Prakiraan cuaca, biro jodoh, surat kabar, ilmu-ilmu agama.

Chating (Ngobrol di Internet), Email, Video Conference, Main Game dll.

Sebagai Media Promosi (Jualan Barang)


Bagaimana Koneksinya:

Internet Service Provider (ISP), misalnya TelKomnet,

GlobalNet,Mitranet,RadNet dll.

Diperlukan Server untuk melayani beberapa Client

Agar dapat masuk ke dunia maya/internet, maka harus mengetikkan

alamat internet yang kemudian kita kenal dengan domain name.

Misalnya URL http : www.kompas.com

http : Browser dan Web Server yang akan berkomunikasi

menggunakan protokol HTTP

www : Rosource yang ada pada WWW

kompas.com : Domain Name

http://www.kompas.com/


Setiap komputer dan jaringan terhubung secara langsung maupun tidak

langsung - ke beberapa jalur utama yang disebut internet backbone

Antara satu komputer dengan yang lain dibedakan menggunakan unique

name yang biasa disebut dengan alamat IP 32 bit. Contoh: 202.155.4.230

Komputer dan jaringan dengan berbagai platform yang mempunyai

perbedaan dan ciri khas masing-masing (Unix, Linux, Windows, Mac, dll)

bertukar informasi dengan sebuah protokol standar yang dikenal dengan

nama TCP/IP (Transmission Control Protocol/Internet Protocol).

Server Vs Client

Server :

1. Menyediakan dokumen web

2. Mengeksekusi dokumen web yang bersifat “server side” (php, asp,

jsp ), menerjemahkan ke dalam bentuk yang bisa dipahami oleh

“web browser” di client

3. Memiliki service (program) web server (IIS, Apache dsb)


4. Memberikan response ke client.

Client :

1. Mengambil dokumen web.

2. Mengeksekusi dokumen web yang bersifat “client side” (javascript,

html, css).

3. Memiliki web browser untuk menerjemahkan dokumen web ke

bentuk yang “manusiawi”.

4. Mengirimkan request ke server.

Gambar 29. Aristektur Client-server

Teknologi Web Client

Web browser, HTML / XML / XHTML, Javascript / VBScript, CSS, Flash

player, Java Applet, ActiveX / Plugin: program yang terintegrasi dengan

browser, Helper: program yg terinstall di client.

Server Side Technologies

Hardware : Komputer Server

Software:

1. Web server

2. Server side Programming Tools: PHP, ASP, .NET

3. Utility Programming Tools : Database Server (MySQL,

SQLServer)


Web server adalah software yang menjadi tulang belakang dari world wide web

(www). Web server menunggu permintaan dari client yang menggunakan browser

seperti Netscape Navigator, Internet Explorer, Modzilla, dan program browser

lainnya. Jika ada permintaan dari browser, maka web server akan memproses

permintaan itu kemudian memberikan hasil prosesnya berupa data yang

diinginkan kembali ke browser. Data ini mempunyai format yang standar, disebut

dengan format SGML (standar general markup language). Data yang berupa

format ini kemudian akan ditampilkan oleh browser sesuai dengan kemampuan

browser tersebut. Contohnya, bila data yang dikirim berupa gambar, browser yang

hanya mampu menampilkan teks (misalnya lynx) tidak akan mampu menampilkan

gambar tersebut, dan jika ada akan menampilkan alternatifnya saja. Web server,

untuk berkomunikasi dengan client-nya (web browser) mempunyai protokol

sendiri, yaitu HTTP (hypertext transfer protocol).

Dengan protokol ini, komunikasi antar web server dengan client-nya dapat saling

dimengerti dan lebih mudah. Seperti telah dijelaskan diatas, format data pada

world wide web adalah SGML. Tapi para pengguna internet saat ini lebih banyak

menggunakan format HTML (hypertext markup language) karena penggunaannya

lebih sederhana dan mudah dipelajari. Kata HyperText mempunyai arti bahwa

seorang pengguna internet dengan web browsernya dapat membuka dan membaca

dokumen-dokumen yang ada dalam komputernya atau bahkan jauh tempatnya

sekalipun.

Hal ini memberikan cita rasa dari suatu proses yang tridimensional, artinya

pengguna internet dapat membaca dari satu dokumen ke dokumen yang lain hanya


dengan mengklik beberapa bagian dari halaman-halaman dokumen (web) itu.

Proses yang dimulai dari permintaan webclient (browser), diterima web server,

diproses, dan dikembalikan hasil prosesnya oleh web server ke web client lagi

dilakukan secara transparan. Setiap orang dapat dengan mudah mengetahui apa

yang terjadi pada tiap-tiap proses. Secara garis besarnya web server hanya

memproses semua masukan yang diperolehnya dari web clientnya.

# Pertemuan 15.

5.2 Web Server Apache

Apache merupakan web server yang paling banyak dipergunakan di Internet.

Program ini pertama kali didesain untuk sistem operasi lingkungan UNIX. Namun

demikian, pada beberapa versi berikutnya Apache mengeluarkan programnya

yang dapat dijalankan di Windows NT. Apache mempunyai program pendukung

yang cukup banyak. Hal ini memberikan layanan yang cukup lengkap bagi

penggunanya. Beberapa dukungan Apache :

A. Kontrol Akses

Kontrol ini dapat dijalankan berdasarkan nama host atau nomor IP.

B. CGI (Common Gateway Interface)

Yang paling terkenal untuk digunakan adalah perl (Practical Extraction

and Report Language), didukung oleh Apache dengan menempatkannya

sebagai modul (mod_perl).

C. PHP (Personal Home Page/PHP Hypertext Processor);

Program dengan metode semacam CGI, yang memproses teks dan bekerja

di server. Apache mendukung PHP dengan menempatkannya sebagai salah

satu modulnya (mod_php). Hal ini membuat kinerja PHP menjadi lebih

baik.


D. SSI (Server Side Includes)

Web server Apache mempunyai kelebihan dari beberapa pertimbangan di

atas :

1. Apache termasuk dalam kategori freeware.

2. Apache mudah sekali proses instalasinya jika dibanding web server

lainnya seperti NCSA, IIS, dan lain-lain.

3. Mampu beroperasi pada berbagai platform sistem operasi.

4. Mudah mengatur konfigurasinya. Apache mempunyai hanya empat file

konfigurasi.

5. Mudah dalam menambahkan peripheral lainnya ke dalam platform

web servernya.

5.3 Fasilitas atau Ciri Khas dari Web Server Apache

1. Dapat dijadikan pengganti bagi NCSA web server.

2. Perbaikan terhadap kerusakan dan error pada NCSA 1.3 dan 1.4.

3. Apache merespon web client sangat cepat jauh melebihi NCSA.

4. Mampu di kompilasi sesuai dengan spesifikasi HTTP yang sekarang.

5. Apache menyediakan feature untuk multihomed dan virtual server.

6. Kita dapat menetapkan respon error yang akan dikirim web server

dengan menggunakan file atau skrip.

7. Server apache dapat otomatis berkomunikasi dengan client browsernya

untuk menampilkan tampilan terbaik pada client browsernya. Web

server Apache secara otomatis menjalankan file index.html, halaman

utamanya, untuk ditampilkan secara otomatis pada clientnya.

8. Web server Apache mempunyai level-level pengamanan.


9. Apache mempunyai komponen dasar terbanyak di antara web server

lain.

10. Ditinjau dari segi sejarah perkembangan dan prospeknya, Apache web

server mempunyai prospek yang cerah. Apache berasal dari web server

NCSA yang kemudian dikembangkan karena NCSA masih

mempunyai kekurangan di bidang kompatibilitasnya dengan sistim

operasi lain. Sampai saat ini, web server Apache terus dikembangkan

oleh tim dari apache.org.

11. Performasi dan konsumsi sumber daya dari web server Apache tidak

terlalu banyak, hanya sekitar 20 MB untuk file-file dasarnya dan setiap

daemonnya hanya memerlukan sekitar 950 KB memory per child.

12. Mendukung transaksi yang aman (secure transaction) menggunakan

SSL (secure socket layer).

13. Mempunyai dukungan teknis melalui web.

14. Mempunyai kompatibilitas platform yang tinggi.

15. Mendukung third party berupa modul-modul tambahan.

Agar jaringan intrenet ini berlaku semestinya harus ada aturan standard yang

mengaturnya karena itu diperlukan suatu protokol internet.

5.4 Sejarah TCP/IP

Internet Protocol dikembangkan pertama kali oleh Defense Advanced Research

Projects Agency (DARPA) pada tahun 1970 sebagai awal dari usaha untuk

mengembangkan protokol yang dapat melakukan interkoneksi berbagai jaringan

komputer yang terpisah, yang masing-masing jaringan tersebut menggunakan


teknologi yang berbeda. Protokol utama yang dihasilkan proyek ini adalah

Internet Protocol (IP). Riset yang sama dikembangkan pula yaitu beberapa

protokol level tinggi yang didesain dapat bekerja dengan IP. Yang paling penting

dari proyek tersebut adalah Transmission Control Protocol (TCP), dan semua

grup protocol diganti dengan TCP/IP suite. Pertamakali TCP/IP diterapkan di

ARPANET, dan mulai berkembang setelah Universitas California di Berkeley

mulai menggunakan TCP/IP dengan sistem operasi UNIX. Selain Defense

Advanced Research Projects Agency (DARPA) ini yang mengembangkan Internet

Protocol, yang juga mengembangkan TCP/IP adalah Department of Defense

(DOD).

5.5 Istilah-istilah didalam Internet Protocol

Ada beberapa istilah yang sering ditemukan didalam pembicaraan mengenai

TCP/IP, yaitu diantaranya :

Host atau end-system, Seorang pelanggan pada layanan jaringan

komunikasi. Host biasanya berupa individual workstation atau personal

computers (PC) dimana tugas dari Host ini biasanya adalah menjalankan

applikasi dan program software server yang berfungsi sebagai user dan

pelaksana pelayanan jaringan komunikasi.

Internet, yaitu merupakan suatu kumpulan dari jaringan (network of

networks) yang menyeluruh dan menggunakan protokol TCP/IP untuk

berhubungan seperti virtual networks.

Node, adalah istilah yang diterapkan untuk router dan host.protocol, yaitu

merupakan sebuah prosedur standar atau aturan untuk pendefinisian dan

pengaturan transmisi data antara komputer-komputer.


Router, adalah suatu devais yang digunakan sebagai penghubung antara

dua network atau lebih. Router berbeda dengan host karena router bisanya

bukan berupa tujuan atau data traffic. Routing dari datagram IP biasanya

telah dilakukan dengan software. Jadi fungsi routing dapat dilakukan oleh

host yang mempunyai dua networks connection atau lebih.

5.6 Overview TCP/IP

Sebagaimana yang telah dikemukakan di atas, TCP/IP juga dikembangkan oleh

Department of Defense (DOD). DOD telah melakukan proyek penelitian untuk

menghubungkan beberapa jaringan yang didesain oleh berbagai vendor untuk

menjadi sebuah networks of networks (Internet). Pada awalnya hal ini berhasil

karena hanya menyediakan pelayanan dasar seperti file transfer, electronic mail,

remote logon. Beberapa komputer dalam sebuah departemen dapat menggunakan

TCP/IP (bersamaan dengan protokol lain) dalam suatu LAN tunggal. Komponen

IP menyediakan routing dari departmen ke network enterprise, kemudian ke

jaringan regional dan akhirnya ke global internet. Hal ini dapat menjadikan

jaringan komunikasi dapat rusak, sehingga untuk mengatasinya maka kemudian

DOD mendesain TCP/IP yang dapat memperbaiki dengan otomatis apabila ada

node atau saluran telepon yang gagal. Hasil rancangan ini memungkinkan untuk

membangun jaringan yang sangat besar dengan pengaturan pusat yang sedikit.

Karena adanya perbaikan otomatis maka masalah dalam jaringan tidak diperiksa

dan tak diperbaiki untuk waktu yang lama.

Seperti halnya protokol komunikasi yang lain, maka TCP/IP pun mempunyai

beberapa layer, layer-layer itu adalah :


IP (internet protocol) yang berperan dalam pentransmisian paket data dari

node ke node. IP mendahului setiap paket data berdasarkan 4 byte (untuk

versi IPv4) alamat tujuan (nomor IP). Internet authorities menciptakan

range angka untuk organisasi yang berbeda. Organisasi menciptakan grup

dengan nomornya untuk departemen. IP bekerja pada mesin gateaway

yang memindahkan data dari departemen ke organisasi kemudian ke

region dan kemudian ke seluruh dunia.

TCP (transmission transfer protocol) berperan didalam memperbaiki

pengiriman data yang benar dari suatu klien ke server. Data dapat hilang di

tengah-tengah jaringan. TCP dapat mendeteksi error atau data yang hilang

dan kemudian melakukan transmisi ulang sampai data diterima dengan

benar dan lengkap.

Sockets yaitu merupakan nama yang diberikan kepada subrutin paket yang

menyediakan akses ke TCP/IP pada kebanyakan sistem.

# Pertemuan 16.

5.7 Beberapa Hal Penting Didalam TCP/IP

Jaringan Peminta Terendah (Network of Lowest Bidders)

IP dikembangkan untuk membuat sebuah network of networks (Internet).

Individual machine dihubungkan ke LAN (ethernet atau Token ring).

TCP/IP membagi LAN dengan user yang lain (Novell file server, windows

dll). Satu devais menyediakan TCP/IP menghubungkan antara LAN

dengan dunia luar.

Untuk meyakinkan bahwa semua tipe sistem dari berbagai vendor dapat

berkomunikasi, maka penggunaan TCP/IP distandarkan pada LAN.


Dengan bertambahnya kecepatan mikroprossesor, fiber optics, dan saluran

telepon digital maka telah menciptakan beberapa pilihan teknologi baru

diantaranya yaitu ISDN, frame relay, FDDI, Asynchronous Transfer Mode

(ATM).

Rancangan asli dari TCP/IP adalah sebagai sebuah network of networks

yang cocok dengan penggunaan teknologi sekarang ini. Data TCP/IP

dapat dikirimkan melalui sebuah LAN, atau dapat dibawa dengan sebuah

jaringan internal corporate SNA, atau data dapat terhubung pada TV

kabel . Lebih jauh lagi, mesin-mesin yang berhubungan pada salah satu

jaringan tersebut dapat berkomunikasi dengan jaringan yang lain melalui

gateways yang disediakan vendor jaringan .

Masalah Pengalamatan

Dalam sebuah jaringan SNA, setiap mesin mempunyai Logical Units

dengan alamat jaringan masing-masing. DECNET, Appletalk, dan Novell

IPX mempunyai rancangan untuk membuat nomor untuk setiap jaringan

lokal dan untuk setiap workstation yang terhubung ke jaringan.

Pada bagian utama pengalamatan lokal network, TCP/IP membuat nomor

unik untuk setiap workstation di seluruh dunia. Nomor IP adalah nilai 4

byte (IPv4) dengan konvensi merubah setiap byte ke dalam nomor

desimal (0 sampai 255 untuk IP yang digunakan sekarang) dan

memisahkan setiap bytes dengan periode. Sebagai contoh misalnya

130.132.59.234.

Sebuah organisasi dimulai dengan mengirimkan electronic mail ke

[email protected] meminta untuk pembuatan nomor jaringan.


Hal ini dimungkinkan bagi hampir setiap orang untuk memperoleh nomor

untuk jaringan "small class C" dengan 3 bytes pertama meyatakan jaringan

dan byte terakhir menyatakan individual komputer. Organisasi yang lebih

besar dapat memperoleh jaringan "Class B" dengan 2 bytes pertama

menyatakan jaringan dan 2 bytes terakhir menyatakan menyatakan

masing-masing workstation sampai mencapai 64.000 individual

workstation. Contoh Jaringan Class B Yale adalah 130.132, jadi semua

komputer dengan IP address 130.132.*.* adalah dihubungkan melalui

Yale.

Kemudian organisasi berhubungan dengan intenet melalui satu dari

beberapa jaringan regional atau jaringan khusus. vendor jaringan diberi

nomor pelanggan networks dan ditambahkan ke dalam konfigurasi

routing dalam masing-masing mesin.

Tidak ada rumus matematika yang mengubah nomor 192.35.91 atau

130.132 menjadi "Yale University" atau "New Haven". Mesin-mesin yang

mengatur jaringan regional yang besar atau routers Internet pusat dapat

menentukan lokasi jaringan-jaringan tersebut dengan mencari setiap

nomor jaringan tersebut dalam tabel. Diperkirakan ada ribuan jaringan

class B dan jutaan jaringan class C. Pelanggan yang terhubung dengan

Internet, bahkan perusahaan besar seperti IBM tidak perlu untuk

memelihara informasi pada jaringan-jatingan yang lain. Mereka mengirim

semua eksternal data ke regional carrier yang mereka langgan, dan

regional carrier mengamati dan memelihara tabel dan melakukan routing

yang tepat.


Subnets

Meskipun pelanggan individual tidak membutuhkan nomor tabel

jaringan/menyediakan eksplisit routing, tapi untuk kebanyakan jaringan

class B dapat diatur secara internal sehingga lebih kecil dan versi

organisasi jaringan yang lebih sederhana. Biasanya membagi dua byte

internal assignment menjadi satu byte nomor departmen dan satu byte

Workstation ID.

Enterprise network dibangun dengan menggunakan TCP/IP router box

secara komersial. setiap router mempunyai tabel dengan 255 masukan

untuk mengubah satu byte nomor departmen menjadi pilihan tujuan

ethernet yang terhubung ke salah satu router. Misalnya, pesan ke

130.132.59.234 melalui jaringan regional National dan New England

berdasarkan bagian nomor 130.132. Tiba di Yale, 59 department ID

memilih ethernet connector . 234 memilih workstation tertentu pada

LAN. Jaringan Yale harus diupdate sebagai ethernet baru dan departemen

ditambahkan, tapi tidak dipengaruhi oleh perubahan dari luar atau

perpindahan mesin dalam departemen.

Jalur-jalur tak tentu

Setiap kali sebuah pesan tiba pada sebuah IP router, maka router akan

membuat keputusan ke mana berikutnya pesan tersebut akan dikirimkan.

Ada konsep satu waktu tertentu dengan preselected path untuk semua

traffic. Misalkan sebuah perusahaan dengan fasilitas di New York, Los

Angles, Chicago dan Atlanta. Dapat dibuat jaringan dari empat jalur

telepon membentuk sebuah loop (NY ke Chicago ke LA ke Atlanta ke


NY). Sebuah pesan tiba di router NY dapat pergi ke LA melalui Chicago

atau melalui Atlanta. jawaban dapat kembali ke jalan lain.

Bagaimana sebuah router dapat membuat keputusan antara router dengan

router? tidak ada jawaban yang benar. Traffic dapat dipetakan dengan

algoritma "clockwise" (pergi ke NY ke Atlanta, LA ke chicago). Router

dapat menentukan, mengirimkan pesan ke Atlanta kemudian selanjutnya

ke ke Chicago. Routing yang lebih baik adalah dengan mengukur pola

traffic dan mengirimkan data melalui link yang paling tidak sibuk.

Jika satu saluran telepon dalam satu jaringan rusak, pesan dapat tetap

mencapai tujuannya melalui jalur yang lain. Setelah kehilangan jalur dari

NY ke Chicago, data dapat dikirim dari NY ke Atlanta ke LA ke

Chicago. Dengan begitu maka jalur akan berlanjut meskipun dengan

kerugian performance menurun.

Perbaikan seperti ini merupakan bagian tambahan pada desain IP.

Masalah yang Tidak Diperiksa (Undiagnosed Problem)

Jika ada error terjadi, maka dilaporkan ke network authorities. Error

tersebut harus dibenarkan atau diperbaiki. IP, didesain untuk dapat tahan

dan kuat. Kehilangan node atau jalur adalah hal biasa, tetapi jaringan

harus tetap jalan. Jadi IP secara otomatis menkonfigurasi ulang dirinya

sendiri bila terjadi sesuatu yang salah. Jika banyak redundancy yang

dibangun ke dalam sistem maka komuniksi tetap berlangsung dan terjaga.

TCP dirancang untuk memulihkan node atau saluran yang gagal dimana

propagasi routing table berubah untuk semua node router. Karena proses


updating memerlukan waktu yang lama , TCP agak lambat untuk

menginisiasi pemulihan.

Mengenai Nomor IP

Setiap perusahaan besar atau perguruan tinggi yang terhubung ke internet

harus mempunyai level intermediet network. beberapa router mungkin

dikonfigurasi untuk berhubungan dengan bebarapa department LAN.

Semua traffic di luar organisasi dihubungkan dengan koneksi tunggal ke

jaringan provider regional.

Jadi, pemakai akhir dapat menginstall TCP/IP pada PC tanpa harus tahu

jaringan regional . Tiga bagian informasi dibutuhkan :

a) IP address dibuat pada PC.

b) Bagian dari IP address (subnet mask) yang membedakan mesin

lain dalam LAN yang sama (pesan dapat dikirim secara langsung)

dengan mesin-mesin di departemen lain atao dimanapun di seluruh

dunia (yang dikirimkan ke router mesin).

c) IP address dari router mesin yang menghubungkan LAN tersebut

dengan dunia luar.

Susunan TCP/IP

Internet pada mulanya didesain dengan dua kriteria utama. Dua kriteria ini

mempengaruhi dan membentuk hardware dan software yang digunakan

sekarang. Kriteria tersebut : Jaringan harus melakukan komunikasi antara

para peneliti di belahan dunia yang berbeda, memungkinkan meraka dapat

berbagi dan berkomunikasi mengenai penelitian mereka satu sama lain.

Sayangnya, riset memerlukan berbagai komputer dari beragam platform


dan arsitektur jaringan yang berbeda untuk keperluan keilmuan. Maka

untuk itu diperlukan protocol suite untuk dapat berhubungan dengan

berbagai platforms hardware yang berbeda dan bahkan sistem jaringan

yang berbeda. Lebih jauh lagi, network harus merupakan jaringan

komunikasi yang kuat yang mempunyai kemampuan dapat bertahan dari

serangan nuklir. Rancangan ini memebawa ke arah desentralisasi jaringan

yang terdiri dari jaringan yang terpisah, lebih kecil, jaringan yang diisolasi

yang mempunyai kemampuan otomatis bila diperlukan.

Layer menyediakan level abstrsaksi untuk software dan menaikkan

kemampuan menggunakan kembali dan kebebasan platform. Layer-layer

tersebut dimaksudkan untuk benar-benar terpisah dari satu sama lain dan

juga independen. Layer tersebut tidak mengandalkan informasi detail dari

layer yang lain. Arsitektur rancangan ini membuat lebih mudah untuk

melakukan pemeliharaan karena layer dapat didesain ulang atau

dikembangkan tanpa merusak integritas protokol stack.

TCP/IP protocol suite terdiri dari 4 layers: Applikasi, Transport,

Internetwork, dan network interface. Layer tersebut dapat dilihat sebagai

hirarki seperti di bawah ini :

Layer Applikasi adalah sebuah aplikasi yang mengirimkan data ke

transport layer. Misalnya FTP, email programs dan web browsers.

Layer Transport bertanggung jawab untuk komunikasi antara aplikasi.

Layer ini mengatur aluran informasi dan mungkin menyediakan

pemeriksaan error. Data dibagi kedalam beberapa paket yang dikirim ke

internet layer dengan sebuah header. Header mengandung alamat tujuan,


alamat sumber dan checksum. Checksum diperiksa oleh mesin penerima

untuk melihat apakah paket tersebut ada yang hilang pada rute.

Layer Internetwork bertanggung jawab untuk komunikasi antara mesin.

Layer ini meg-engcapsul paket dari transport layer ke dalam IP datagrams

dan menggunakan algoritma routing untuk menentukan kemana datagaram

harus dikirim. Masuknya datagram diproses dan diperiksa kesahannya

sebelum melewatinya pada Transport layer.

Layer networks interface adalah level yang paling bawah dari susunan

TCP/IP. Layer ini adalah device driver yang memungkinkan datagaram IP

dikirim ke atau dari pisikal network. Jaringan dapaat berupa sebuah kabel,

Ethernet, frame relay, Token ring, ISDN, ATM jaringan, radio, satelit atau

alat lain yang dapat mentransfer data dari sistem ke sistem. Layer network

interface adalah abstraksi yang memudahkan komunikasi antara multitude

arsitektur network.

Internet merupakan kumpulan dari berbagai jaringan komputer LAN

dan WAN di seluruh dunia yang saling berkomunikasi.

Untuk dapat berkomunikasi maka harus ada aturan mainnya yang

disebut TCP/IP (Transmission Control Protocol/Internet Protocol)

Internet menekan waktu, beaya dan meniadakan jarak untuk

berkomunikasi dan tukar menukar informasi di seluruh dunia.


KATA PENGANTAR

Puji syukur kehadirat Allah S.W.T atas segala nikmat yang tiada terbilang

sehingga terselesainya modul ini. Modul ini dibuat untuk membantu mahasiswa/i

IBI Darmajaya dalam melaksanakan matakuliah sehingga mempermudah dalam

pemahaman materi bahasa Pemrograman Web khususnya dalam modul selain

berisi materi, juga mencantumkan contoh latihan serta tugas mandiri. Untuk itu

diharapkan mahasiswa/i sebelumnya membaca isi dari modul ini sehingga

mempermudah pemahaman materi saat dosen memberikan penjelasan materi yang

disampaikan.

Demikian prakata ini penulis buat, semoga modul ini dapat bermanfaat bagi

mahasiswa/i. Sekiranya penulis menyadari adanya kekurangan dari modul ini,

maka mohon kritik dan saran membangun dari para pembaca. Akhir kata tak luput

penulis mengucapkan terima kasih untuk semua yang telah membantu sehingga

terselesainya modul ini.

Bandar Lampung, Mei 2010

Penulis


DAFTAR ISI

Halaman

HALAMAN JUDUL ...................................................................................... i

KATA PENGANTAR .................................................................................... ii

DAFTAR ISI ................................................................................................... iii

I. KONSEP DASAR DAN CONTOH HTML ........................................ 2

1.1. Pendahuluan ................................................................................... 2

1.2. Sejarah internet............................................................................... 2

1.3. Peralatan yang dibutuhkan ............................................................. 4

1.4. World Wide Web ............................................................................ 6

1.5. Pengenalan HTML ......................................................................... 7

1.6. Browser dan editor ......................................................................... 9

1.7. Tag-tag HTML ............................................................................... 11

1.7.1 Struktur HTML dokumen ...................................................... 13

1.7.2 Basic element HTML ............................................................ 15

1.7.2.1 List item ..................................................................... 15

1.7.2.2 Horizontal rules (HR) ................................................ 17

1.7.2.3 Pemformatan page ..................................................... 18

II. XHTML .................................................................................................. 52

2.1 Pendahuluan ........................................................................................... 52

2.2 Perbedan HTML dan XHTML ............................................................. 52

2.3 W3C XHTML validation service ......................................................... 53

2.4 Header..................................................................................................... 54

2.5 Linking ................................................................................................... 54

2.6 Image ...................................................................................................... 56

2.7 Special characters dan line breaks ........................................................ 58

2.8 Unordered list ......................................................................................... 59

2.9 Nested & ordered list ............................................................................. 59

2.10 Pengenalan macromedia dreamweaver ................................................ 61

2.10.1 HTML, XHTML, dan dreamweaver ........................................ 65

2.10.2 Body HTML ........................................................................ 67

2.10.3 Format teks HTML ............................................................. 68

2.10.3.1 Heading ................................................................. 68

2.10.3.2 Membuat baris baru............................................... 69

2.10.3.3 Membuat paragraf ................................................. 69

2.10.3.4 Membuat daftar/list ............................................... 70

2.10.3.5 Unordered list ........................................................ 70

2.10.3.6 Ordered list ............................................................ 71

2.10.3.7 Definition list ........................................................ 72

2.10.3.8 Format tulisan........................................................ 73

2.11 Graphics di HTML ............................................................................... 73 2.12 Hyperlink di HTML ............................................................................. 74

2.13 Membuat layout frame di HTML ........................................................ 76


III. CSS ......................................................................................................... 80

3.1 Pendahuluan .................................................................................. 80

3.2 Menambahkan CSS ke dalam HTML ............................................ 80

3.2.1 External style sheet ................................................................. 80

3.2.2 Internal style sheet................................................................... 80

3.2.3 Inline style ............................................................................... 81

3.3 Istilah-istilah dalam CSS ................................................................ 81

3.4 Komentar pada CSS ....................................................................... 81

3.5 Class selector .................................................................................. 82

3.6 CSS background properties ............................................................ 82

3.7 CSS text properties ......................................................................... 83

3.8 CSS border properties .................................................................... 84

3.9 CSS margin properties ................................................................... 86

3.10 CSS padding properties .................................................................. 86

3.11 CSS list properties .......................................................................... 87

IV. JAVA SCRIPT ...................................................................................... 89

4.1 Pendahuluan ...................................................................................... 89

4.2 Kelebihan dan kekurangan javascript ............................................... 89

4.2.1 Kelebihan javascript ............................................................... 89

4.2.2 Kekurangan javascript ............................................................ 90

4.3 Struktur dan syntax dasar javascript ................................................. 91

4.4 Nilai, variable, dan konstanta/literal ................................................. 95

4.4.1 Nilai dalam javascript ............................................................. 95

4.4.2 Variable .................................................................................. 97

4.4.3 Konstanta/literal...................................................................... 98

4.5 Fungsi ............................................................................................... 99

V. WEB SERVER DAN TCP/IP................................................................ 107

5.1 Pendahuluan ..................................................................................... 107

5.2 Web server apache ........................................................................... 112

5.3 Fasilitas atau ciri khas dari web server apache ................................ 113

5.4 Sejarah TCP/IP ................................................................................. 114

5.5 Istilah-istilah didalam internet protokol ........................................... 115

5.6 Overview TCP/IP ............................................................................. 116

5.7 Beberapa hal penting dalam TCP/IP ................................................ 117

DAFTAR PUSTAKA


DAFTAR PUSTAKA

Anonim. 2006. Mempercantik Web dengan CSS. Yogyakarta: CV. Andi

Offset.

Hunt, Craig. 2002. TCP/IP Network Administration. 3rd Edition.O‟reilly.

Jennifer Niederst, Jennifer Niederst Robbins, 2003, “Learning Web design: a

beginner's guide to HTML, graphics, and beyond”, O‟reilly digital stidio

Jennifer Niederst Robbins, 2007, “Learning web design: a beginner's guide to

(X)HTML, style sheets, and web graphics”, 3rd edition.

Setiawan, Andi. 2004. “Pemrograman HTML Standarisasi, Konfigurasi

dan Implementasi”. Bandung : Yrama Widya.

Supadi. 2007.”Buku Ajar Pengembangan Web”. Lampung : IBI

Darmajaya.

Wahidin, 2005, “Dreamweaver MX 2004”, Palembang : Maxikom.

Documents

Modul Pemrograman Web