Laporan tugas project pemograman web

Laporan Tugas Project Pemograman Web

Web Wisata Di jawa

(Dosen Pengampu : April Firman Daru,S.Kom,MM)

Disusun Oleh :

Khomsanah

G.231.13.0244

Program Study Teknik Informatika

Fakultas Teknik Informasi dan Komunikasi

UNIVERSITAS SEMARANG

2014

I Pendahuluan

1.1 Latar Belakang

Indonesia adalah salah satu Negara yang akan oleh berbagai tempat wisata mulai

dari yang bersifat religi maupun umum,semakin berkembangnya teknologi di zaman

sekarang para astronom filoshofi dapat menemukan tempat-tempat wisata yang

terpencil menggunakan pancaran satelit yang telah di sediakan oleh pemerintah.

1.2 Pengenalan pada HTML(Hypertext Markup Language).

Merupakan bahasa markup(pelekat) untuk menampilkan text,gambar dan

multimedia. dalam HTML terdapat teg-tag yang mampu di baca oleh web browser

Yaitu sebuah halaman untuk membagung sebuah halaman web,

1.3 Memahami Tagi – Tag HTML & Kegunaannya

a. Tag pembangun halaman :

<html> </html>

tag yang wajib dimiliki sebuah halaman web. hanya informasi yang tersimpan diantara

tag tersebut yang dibaca oleh browser.

<head> </head>

informasi & tag yang ditulis diantara tag ini tidak akan ditampilkan di halaman browser.

Yang ditaruh diantara tag ini adalah deklarasi file html, tag metadata halaman web, link ke file

css dan javascript, dan script2 javascript atau css yang ditulis secara internal

<body></body>

Informasi yang ditulis diantara tag ini akan ditampilkan pada browser. tiga tag ini

merupakan tiga tag dasar dari sebuah halaman web. Dengan menggunakan tiga tag dasar ini

saja anda sudah bisa membuat sebuah halaman web sebenarnya.

b. Tag – tag pada bagian head :

<title></title>

tag title page. informasi yang ditulis diantara tag ini akan menjadi identitas halaman

web, dan muncul pada top bar aplikasi browser

<link rel=”" type=”" href=”">

tag rel. untuk menghubungkan halaman web dengan file yang memberikan fungsi /

definisi pada halaman tersebut.

c. Tag dasar konten web :

1. <h1> This is heading </h1>



ini disebut tag heading. fungsinya untuk mengatur besar kecil ukuran teks yang ditulis

diantara tag tersebut. tag <h1> merupakan ukuran terbesar. semakin besar nomernya, semakin

kecil ukurannya.

<p> </p>

tag paragraf. informasi yang di tulis diantaranya dianggap satu paragraf

<br />

tag break, atau fungsi enter pada editor : untuk membuat tulisan turun ke bari

selanjutnya. Jika pada tag – tag lain mengal adanya starting tag dan closing tag,jadi

informasi diapit diantara tag, maka tag break merupakan pengecualian.

cukup letakkan tag break diantara tag paragraf, dan informasi yang ditulis

setelah tag break akan turun ke baris selanjutnya.

<a href=”"></a>

tag link. informasi yang diletakkan diantara tag ini akan menjadi link yang

mengarah atau terhubung pada halaman web lain.

<img src=”">

tag untuk memanggil image.

<marquee>…….</marquee>

Sebuah tak untuk membuat tulisan berjalan

d. Tag list / daftar : list ini akan sering anda jumpai dalam sidebar dan

membuat menu bar

<li></li>

tag list item. untuk isi dari list yang ada, sebagai item dari tag ordered list dan

unordered list. pemahaman lengkapnya ada dibawah

<ul></ul>

tag unordered list ( daftar tidak berurut ). Sederhananya : Untuk membuat daftar dengan

bullet style.

<ol></ol>

tag ordered list ( daftar berurut ). Sederhananya L Untuk membuat daftar berurut

menggunakan angka.

1.4 Desain dari web

1.4.1 Freme

Dengan menggunakan frame dapat menampilkan beberapa halaman HTML

sekaligus dalam sebuah jendela browser.Artinya dengan membuka sebuah halaman

HTML (yang mengandung frame), browser akan menampilkan beberapa halaman

sekaligus yang masing-masing termuat dalam sebuah frame dan untuk mempercantik

tampilan web terseut, fungsi utama frame adalah untuk memudahkan navigasi atau

penelusuran isi dari sebuah website.

Untuk membuat halaman utama atau halaman yang ber-frame, kita hanya

membutuhkan dua buah tag yaitu <FRAMESET> untuk mengatur pembuatan frame,

dan <FRAME> untuk menentukan file target bagi setiap frame

Dalam tag <FRAME> juga mempunyai beberapa atribut-atribut sebagai

berikut:

1. BORDERCOLOR, fungsinya sama dengan BORDERCOLOR pada tag FRAMESET.

Dalam hal ini, warna yang didefinisikan oleh tag yang lebih dalam menang atas warna yang

didefinisikan oleh tag yang luar.

2. MARGINHEIGHT untuk menentukan jarak antara batas atas atau batas bawah frame

dengan isi frame.

3. MARGINWIDTH untuk menentukan jarak antara batas kiri atau batas kanan frame dengan

isi frame.

4. NORESIZE, dengan adanya atribut ini maka border dari frame yang bersangkutan tidak

bisa digeser. Dengan kata lain, ukuran frame tersebut tidak bisa diubah (diperkecil atau

diperbesar).

5. SCROLLING, mengatur fasilitas scroll (penggulung layar) dari frame. Nilainya bisa YES,

NO atau AUTO. Nilai YES berarti penggulung selalu ada, NO berarti penggulung selalu

tidak ada, sedang AUTO berarti penggulung ada bila diperlukan (isi frame melebihi ukuran

layar) dan tidak ada bila tidak diperlukan (isi frame dimuat oleh layar). Nilai AUTO

merupakan nilai default. Artinya, bila atribut SCROLLING tidak dituliskan, maka

penggulung layar otomatis akan muncul bila diperlukan.

6. NAME, untuk memberi nama terhadap frame yang bersangkutan dan juga diperlukan

dalam kaitannya dengan fungsi navigasi dari halaman ber-frame.

1.4.2 Table

- Setiap tabel minimal tersusun dari tiga tag dasar yaitu tag <TABLE> yang

menandai sebuah tabel, tag <TR> yang membentuk baris dan tag <TD> yang

membentuk kolom atau tag <TH> membentuk kolom dan bertulisan tebal .

Masing-masing tag tersebut harus memiliki tag penutup.

- tag table terdapat atribut BORDER yang mengatur tebal garis yang ada, dan

atribut CELLSPACING yang mengatur jarak antar sel dan CELLPADDING

yang mengatur jarak antara sel dan tulisan di dalamnya.

- secara default, lebar kolom dan tinggi baris mengikuti lebar dan tinggi tulisan di

dalamnya. Sehingga anda bisa mengatur sendiri lebar dan tinggi tabel, kolom

dan barisnya dengan menggunakan atribut WIDTH (lebar) dan HEIGHT

(tinggi).

- perataan (alignment) tulisan. Lihat contoh tabel di atas! Tampak bahwa secara

default, tabel menempatkan tulisan rata kiri (secara horisontal) dan di tengah

(secara vertikal). Namun demikian, kita bisa mengatur sendiri perataan ini

dengan menggunakan atribut ALIGN untuk perataan horisontal dan VALIGN

untuk perataan vertikal.

1.4.3 Form

Form merupakan elemen HTML yang digunakan untuk mendapatkan masukkan

dari pengguna web

Sintaks:

<form action=”URL” method=”get/post” enctype=” “>……</form>

Jenis masukan dalam suatu form dibedakan menjadi:

1 Text : digunakan untuk memasukkan data suatu nilai untuk di kirimkan ke

server,nilai dapat berupa angka ataupun berupa text.

2 Text Area : digunakan untuk memasukkan data suatu nilai text atau angka

yang memiliki jumlah karakter yang banyak.<TEXTAREA NAME="KOMENTAR" ROWS=3 COLS=30 WRAP=VIRTUAL>

</TEXTAREA>

WRAP=VIRTUAL berarti kalimat yang lebih panjang dari lebar kotak masukan akan diteruskan

ke baris di bawahnya, tetapi yang disimpan oleh browser tetap satu kalimat panjang yang tidak

terputus.

3 Radio : menyediakan beberapa pilihan dan hanya satu yang bisa dipilih.

4 Chek box : menyediakan beberapa pilihan dan dapat memilih lebih dari satu

pilihan

5 List : pilihan dalam bentuk list ,pilihan dapat lebih dari satu.

6 Button : mendefinisikan tombol untuk melakukan pemprosesan form.

a. Submit : untuk memanggil url,setelah selesai penginputan form

b. Reset: untuk meninisialisasi setiap elemen form.

c. Button : untuk membuatr form interaktif,untuk memanggil

script(fungsi) yang ada didalam document HTML.

d. Image : digunakan sebagai ganti button dan button yang berupa gambar.

II Pembahasan

11.1 Web Wisata Jawa

Yaitu web yabg berisi beberapa wisata yang ada disekitar di pulau jawa.

11.2 layout dan penjelasannya.

11.2.1 layout frame

<frameset framespasing="0" border="3" COLOR="#FF1493" rows="64,*,60" frameborder="1" >

<frame name ="top" scrolling="no" noresize target="contents" src="atas.html">

Frame disini memiliki /ketebalan garis pad

frame setebal “3” dan terdiri dari 3 baris : dari

atas tengah dan bawah, yang dimaksud

rows=”65*,60” adalah tinggi frame .

<frameset cols="25%,70%,25%">

<frame name="contents" target ="main">

<frame name="main” scorrling="auto" noresize>

<frame name="isi"scorrling="no"> </frameset>

<frame name="bottom" scrolling="no" noresize target="contetens"> </frameset>

Sedangkan pembagian pada kolom terdiri dari

3 kolom juga yaitu kiri tengah dan kanan

Cosls-“25%,70%,25%

Dengan tinggi kanan dan kiri masing-masing

25% ,sedangkan bagian tengah 70%

Setelah seperti itu anda tinggal mengisi frame-frame yang masih kosong itu dengan file-file yang

akan kita tampilkan di dalamnya. Untuk mendefinisikan nama file target pada setiap frame, kita

tinggal menambahkan atribut SRC dalam setiap tag <FRAME>.

Sedangkan untuk mengembalikan kemenu frame anda menggunakan atribut TARGET.

<html>

11.2.2 Layout Utama.html

<html>

<head>

<title>utama karya</title>

</head>

<body background="gunung_ann.gif" height="200" width="150"> <marquee align="center" behavior="alternate" direction="left" scrollamount="2"><font color="silver" size="4"><b> SELAMAT DATANG DI WEB WISATA THOM-THOM........</font></b> </marquee>

Didalam halaman ini terdapat tulisan yang bisa bergerak bolak-balik dari kanan kekiri lalu kembali lagi.yang bertulisan blok biru

14

3

2

1

2

3

4<table>

<tr>

<td bgcolor="black">

<font color="green">

<blockquote>

<p><h3>Wisata Religi 7 Menara Di Jawa</h3></p>

</blockquote>

<p><img src="7.jpg" width="20%" height="20%">

Berziarah memiliki banyak manfaatnya. Selain bisa

Di sini terdapat table yang memiliki background warna hitam font color hijau

Blockquote disini bertujuan agar tulisan “Wisata Religi 7 Menara di Jawa”

Bisa menjorong ke dalam seperti paragraf pada umumnya.

Pada tag <img src=”” width=”” height=””> tersebut untuk memasukkan sebuag gambar dan memiliki lebar

mendapatkan pengalaman baru, juga bisa menambah ilmu. Salah satu di antaranya ialah ziarah ke masjid-masjid bersejarah dan makam-makam tokoh pendahulu kita yang menyebarkan Islam ke nusantara. Setiap masjid memiliki kekayaan sejarah dan nilai-nilai yang bisa digali untuk lebih mengenal perkembangan Islam saat itu. Misalnya, dari gaya arsitektur bisa mengandung makna tertentu, baik secara filosofi maupun budaya masyarakatnya. </p><hr></td></tr>

</table>

</body>

</html>

(width) 20% dan tinggi (height)20%

11.2.3 Layout Kiri.html

<html>

<head>

<title>menu</title>

</head>

<body background ="tanaman.jpg"heigth ="100" with ="100">

<marquee scrollamount="12" behavior="alternate" bgcolor="yellow">

<b><font color="blue"> ***Selamat Membaca***</b></font></marquee>

<ul>

<li><a href="utama.html"target="main">Home</a></li>

<li>Pilih Lokasi :</li>

<ul>

<li><a href="jatim.html"target="main">Jawa Timur</a></li>

<li><a href="jateng.html" target="main">Jawa Tengah</a></li>

<li><a href="jabar.html"target="main">Jawa Barat</a></li>

</ul>

<li><a href ="profil.html" target="main">Profil<a></li>

<li><a href ="galeri.html" target="main">Galeri<a></li> <li><a

href="form.html"target="main">Pesan<a></li>

</li>

</ul><table>

<tr><td>

<a align="left"><b>Cari</b><br><img src="g.jpg" width="130" height="50">

<img src="ngabur.gif">

<td></tr>

<tr>

<td>

<INPUT NAME="keyword" SIZE="25" TYPE="text"></td></tr>

<tr>

<td>

<INPUT TYPE="submit" VALUE="Cari .. !!">

<input type="reset" Value="Ulang"></p></td></tr>

</table>

<marquee scrollamount="12" behavior="alternate" bgcolor="yellow">

<b><font color="blue"> ***TerimaKasih***</b></font></marquee>

<img src="horse1.gif">

</body>

</html>

11.2.4 Layout Kanan.html

<html>

<head>

<title>kanan</title>

</head>

<body background ="tanaman.jpg"heigth ="100" with ="100">

<table>

<tr>

<td bgcolor="green" width="200" height="5" align="center"> <marquee height="25" width="140" bgcolor="black"> <font color="lightyellow"><b>Motto Hidup...!!!!</b></font></marquee></td></tr>

</table>

<body background="demak.jpg">

<center><b> © Ds.Kalisari,Sayung-Demak<br>2014

<marquee direction="up" scrolldelay="90" onmouseover="this.stop()" onmouseout="thist()">

<font color="lightblue"> <b>lika-liku kehidupan sudah sangat tidak asing saya jumpai dan

semua itu q jalani bagaikan air mengalir di sungai yang menuju ke samudra yang luas

tapi,jangan sampai ikut mengalir dalam arus air yang keruh<br>

<p>Bersyukur itu tidak berhenti pada apa adanya saja<br>

dan Bekerja keras untuk mengadakan yang terbaik</b><br></p></font>

</marquee><img src="air terjun.gif" height="150" width ="200">

</body>

</html>

11.2.5 Layout Bawah

<html>

<head>

<title>bawah</title>

</head>

</b></center>

</body>

<html>

11.2.6 Layout Form Pesan

<html>

<head>

<title>form</title>

</head>

<body background="gunung_ann.gif">

<marquee align="center" behavior="alternate" direction="left" scrollamount="2"> <font color="silver" size="4"><b> SELAMAT DATANG DI WEB WISATA THOM-THOM........</font></b> </marquee>

1

3

2

1

<hr width="500" color="green" noshade size="10">

<font face="arial">

<h3>Silahkan Isi Form yang ada:</h3>

<b></font><table>

<tr>

<th widht="31%"ALIGN="left" VALIGN="middle">Nama</th>

<th widht="31%">:</th>

<th widht="31%"><input type="text" name="inama" size="10">

</th></tr>

<th widht="31%"ALIGN="left" VALIGN="middle" >Alamat</th>

<th widht="31%">:</th>

<th widht="31%"><input type="text" name="ialamat" size="10">

</th></tr>

<tr>

<th widht="31%"ALIGN="left" VALIGN="middle">TTL</td>

<th widht="31%">:</td>

<th widht="31%"><input type="text" name="ittl" size="10">

</th></tr>

<tr>

<th widht="31%"ALIGN="left" VALIGN="middle">Jenis Kelamin</td>


<th widht="31%"><input type="radio" value="l" checked name="jkl">Laki-laki

2

3

<input type="radio" value="p" checked name="jkl">Perempuan <br>

</th></tr>

<tr>

<th widht="31%"ALIGN="left" VALIGN="middle">pesan</td>


<th widht="31%"><textarea name="pesan" cols="20" rows="5" WRAP=VIRTUAL id="pesan"></textarea></td>

</th></tr>

<tr>

<td><input type="submit" value="Kirim" name="bsubmit" Onclick="terimakasih()">

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

</td>

</tr>

</form> </table><a href ="mailto:[email protected]"><IMG SRC="gmail.jpg" height="40" width="70"></a>

</body>

</html>

Nb : dalam tag wrap=virtual id=”pesan “ ,,,tersebut menerangkan bahwa komentar jika lebih panjang dari pada kotak yangtersedia tulisan akan terus dibawahnya.

11.2.7 Layout Isi

<html>

<head>

<title>Jawa Tengah</title>

</head>

<body bgcolor="black">

<font color="white">

<h2>Tempat Wisata di Semarang,Demak,Jepara</h2>

<p>1. Masjid Agung Jawa Tengah

<P align="center"><img src="ma.jpg"><br>Masjid Agung Jawa Tengah</p>

<blockquote>

Masjid Agung Jawa Tengah dirancang dalam gaya arsitektural campuran Jawa, Islam, dan Romawi. Gaya Romawi terlihat dari bangunan 25 pilar di pelataran masjid. Pilar yang bergaya koloseum Athena di Romawi ini dihiasi dengan kaligrafi yang indah, menyimbolkan 25 Nabi dan Rasul.

Pada bagian gerbangnya, tertulis dua kalimat syahadat. Dan pada bidang datar, tertulis huruf Arab Melayu “Sucining Guno Gapuraning Gusti”.

Masjid Agung di Semarang ini dilengkapi dengan wisma penginapan, memiliki 23 kamar dengan berbagai kelas. Anda dapat menggunakan fasilitas ini jika suka. Pesona Masjid Agung Jawa Tengah yang paling mengagumkan adalah pada Menara Al Husna (Al Husna Tower).

Tower ini berketinggian 99 m. Jika Anda naik ke lantai 18, di dalamnya terdapat kafe Muslim yang dapat berputar 360 derajat. Sementara di lantai 19, terdapat 5 buah teropong yang dapat digunakan untuk melihat kota Semarang dari ketinggian.

</blockquote>

</p><hr>

<p>2. Masjid Agung Demak

<p align="center"><img src="demak.jpg"><br> masjid agung demak

<blockquote>

Masjid Agung Demak adalah salah satu masjid tertua di Indonesia. Tahukah Anda, dari sejumlah tempat wisata di Jawa Tengah, Masjid Agung Demak adalah tempat wisata religi paling banyak dikunjungi orang setelah Candi Borobudur.

Sesuai keyakinan masyarakat lokal, masjid ini pernah menjadi tempat berkumpulnya para wali yang menyebarkan agama Islam. Di areal kompleks Masjid Agung Demak, terdapat beberapa makam raja-raja Kesultanan Demak dan para abdinya.

Di kompleks ini juga terdapat Museum Masjid Agung Demak, Anda dapat menemukan banyak hal mengenai riwayat masjid ini. Kesemua ini adalah latar belakang mengapa tempat wisata di Semarang yang satu ini ramai dikunjungi orang.

</blockquote>

</p>

</font>

</body>

</html>

11.2.8 Layout Galery

<html>

<head>

<title>galery</title>

</head>

<body>

<table border ="4">

<tr>

<th colspan="4"><font color="red" size="8"><blink>ALBUM / GALERI

Sususan dari table yang memiliki tebal garis setebal 4 px…

Gabungan dari beberapa kolom yaitu 4 kolom ,font color merah size 8 px dan mempunyai efek

</th></tr>

<tr>

<th colspan="4" bgcolor ="YELLOW"><marquee direction="left">"tak semua yang di hitung dapat di perhitungkan & tak semua yg di perhitungkan dapat di hitung"

</th></tr>

<tr>

<th colspan="4" bgcolor ="PURPLE"></th></tr>

<tr>

<td>

<acronym title="Telaga Warna Dieng">

<img src ="Telaga Warna Dieng.jpg" height ="150" width ="150"></acronym></td>

<td>

<acronym title="Situ Gunung Sukabubmi">

<img src ="Situ Gunung Sukabumi.jpg" height ="150" width ="150"></acronym></td>

<td>

<acronym title="Situ Sukarame Sukabubmi">

<img src ="Situ Sukarame Sukabumi.jpg" height ="150" width ="150"></acronym></td>

<td>

<acronym title="Telaga Cebong Sukabubmi">

<img src ="telaga cebong.jpg" height ="150" width ="150">

tulisan berkedip-kedip dari efek tag <blink> </blink>

Dalam kolom ini hamper sama seperti yang di atas bedanya disini memiliki background warna kuning dan tulisan bisa berjalan dari kiri ke kanan

Tag <acronym title=” “></acronym> disini berfungsi memberi keterangan apabila cursor mouse di arahkan pada gambar,gambar akan muncul keterangan di bagian cursor tersebut.

1

1

</acronym></td></tr>

<tr>

<td>

<acronym title="Air Terjun Songgolangit Jepara">

<img src ="Air Terjun Songgolangit.jpg" height ="150" width ="150"></acronym></td>

<td>

<acronym title="tempat beribadah,bali">

<img src ="bali.jpg" height ="150" width ="150"></acronym></td>

<td>

<acronym title="bandengan,Jepara">

<img src ="bandengan.jpg" height ="150" width ="150">

</acronym></td>

<td>

<acronym title="Benteng Portugis di Jepara">

<img src ="Benteng Portugis di Jepara.jpg" height ="150" width ="150">

</acronym></td></tr>

</table>

</body>

</html>

Laporan tugas project pemograman web

Education

Transcript of Laporan tugas project pemograman web