PROJECT UAS WEB PROGRAMMING I "MEMBUAT WEBSITE RESPONSIVE MENGGUNAKAN HTML DAN CSS"

UNIVERSITAS BINA SARANA INFORMATIKA

12.2A.37

Web Programming

“Membuat Website Travel Agent Malang”

Anggota NIM

1. Rizky Amalia Wijayanti 12181097

2. Piora Riski Ganna 12183232

3. Murny Larasati 12180551

4. Windawani 12182029

KATA PENGANTAR

Puji syukur kehadirat Allah SWT, yang telah melimpahkan rahmat, taufik serta hidayah-Nya, sehingga penulis dapat menyelesaikan tugas materi Web Programming dengan baik. Adapun judul tugas Web kami adalah “Travel Agent Malang”.

Kami berharap Web ini bermanfaat bagi semua pihak yang membantu, meskipun dalam laporan ini masih banyak kekurangannya. Oleh karena itu kritik dan saran membangun tetap penulis harapkan.

Jakarta, 25 Juni 2019

Penulis

DAFTAR ISI

Cover.....................................................................................................................................

Kata Pengantar......................................................................................................................i

Daftar Isi...............................................................................................................................ii

BAB I PENDAHULUAN

1.1.Latar Belakang................................................................................................................1

1.2. Rumusan Masalah.........................................................................................................1

1.3. Maksud dan Tujuan.......................................................................................................2

1.4. Ruang Lingkup..............................................................................................................2

BAB II PEMBAHASAN

2.1. Pengertian HTML..........................................................................................................3

2.2. Struktur Dasar HTML...................................................................................................3-4

2.3. Pembuatan Tabel HTML...............................................................................................4-5

2.4. Komponen Form............................................................................................................5-6

2.5. Pengertian CSS………………………………………………………………………..6

2.6. Satuan CSS…………………………………………………………………………....6

2.7. Pseduo-Class………………………………………………………………………….7

2.8. Padding, Margin, Border……………………………………………………………..7-8

2.9. Struktur Navigasi Website Travel Agent Malang.........................................................8

2.10. Membuat Design Web……………………………………………………………….9-23

BAB III PENUTUP

3.1. Kesimpulan.................................................................................................................24

3.2. Saran...........................................................................................................................24

DAFTAR PUSTAKA

BAB I

PENDAHULUAN

1.1. Latar Belakang

Sublime text 3/Notepad++ merupakan salah satu sofware untuk merancang sebuah Website. Program ini memungkinkan program untuk menciptakan sebuah website dari yang sederhana hingga paling rumit. Sublime text 3/Notepad++ mampu berkolaborasi dengan Active Server Pages, PHP, JavaScript, VBScript, dan lain sebagainya.

Sublime text 3/Notepad++ merupakan alat desain web komprehensif yang banyak disukai oleh para profesional web, tapi cukup mudah digunakan untuk para web designer pemula. Aritmatika dalam Sublime text 3/Notepad++ memudahkan pengguna untuk membuat halaman web semudah mengetik dokumen ke dalam pengolah kata. Program ini juga menawarkan kemampuan untuk bekerja secara langsung dengan kode halaman web bagi mereka yang nyaman dengan HTML. Intuitif menu, panel dan toolbar memungkinkan pemula dan para pakar untuk menambahkan fitur-fitur canggih ke situs web dengan mudah.

Pengguna Sublime text 3/Notepad++ juga tidak terlepas dari aplikasi Software XAMPP, XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi dan juga merupakan kompilasi dari beberapa program. Fungsi XAMPP adalah sebagai server yang berdiri sendiri (localhost), yang terdiri dari program Apche HTTP Server, MySQL, database, dan penerjemah bahasa yang ditulis dengan bahasa pemograman PHP dan Pet Nama XAMPP sendiri merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP, dan Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis maupun statis.

1.2. Rumusan Masalah

Dengan melihat latar belakang yang telah dikemukakan maka,

Beberapa masalah yang dapat penyususn rumusan dan akan dibahas dalam mekalah ini adalah:

1. Tema rancangan website

2. Langkah pembuatan website

3. Hasil pembuatan website Travel Agent Malang

1.3. Maksud dan Tujuan Penulisan

Adapun maksud dari penulisan makalah ini adalah untuk merancang sebuah website travel agent malang, sehingga memudahkan pengguna untuk mengola data perpustakaan agar diperoleh hasil yang cepat, efektif, dan mengurangi terjadinya kesalahan yang mungkin dapat terjadi.

Sedangkan tujuan penulisan makalah ini adalah pada memenuhi nilai UAS Mata kuliah Web Programming I jurusan Sistem Informasi di Universitas Manajemen Infromatika Bina Sarana Informatika.

1.4. Ruang Lingkup

Ruang lingkup dalam penulisan makalah ini, penyusun hanya membatasi masalah pada pembahasan rancangan pembuatan website dengan menggunakan Sublime text 3/Notepad++ , script website Travel Agent Malang, dan tampilan website Travel Agent Malang.

BAB II

PEMBAHASAN

2.1. Pengertian HTML (Hypertext Markup Language)

Hypertext Markup Language (HTML) adalah sebuah bahasa untuk menampilkan konten di web. HTML sendiri adalah bahasa pemrograman yang bebas, artinya tidak dimiliki oleh siapapun, pengembangannya dilakukan oleh banyak orang di banyak Negara dan bias dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara global.

Sebuah dokumen HTML sendiri adalah dokumen teks yang dapat diedit oleh editor teks apapun. Dokumen HTML punya beberapa elemen yang dikelilingi oleh tag-teks yang dimulai dengan symbol < dan berakhir dengan sebuah symbol >. Editor teks yang digunakan oleh penyusun adalah menggunakan Notepad dan XAMPP Versi 1.8.1 untuk web servernya dengan bahasa pemrograman PHP Versi 5.

2.2. Struktur Dasar HTML

Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi elemen dan tag akhir. Tag berakhir termasuksimbol / diikuti oleh tipe elemen, misalnya </HEAD>. Sebuah elemen HTML dapat bersarang di dalam elemen lainnya. Sebuah dokumen HTML standar.

Keterangan :

1. Tag HTML secara default dimulai dari <HTML> dan diakhiri dengan </HTML>.

2. Tag <HEAD> … </HEAD> merupakan tag kepala sebelum badan. Tag kepala ini akan terlebih dulu dieksekusi sebelum tag badan. Di dalam tag ini berisi tag <META> dan <TITLE>. Tag <META> merupakan informasi atau header suatu dokumen HTML.

Atribut yang dimiliki oleh tag ini antara lain:

a. HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen HTML secara otomatis dalam jangka waktu tertentu.

b. CONTENT, atribut ini berisi informasi tentang isi document HTML yang akan dipanggil.

c. NAME, atribut ini merupakan identifikasi dari meta itu sendiri. Tag <META> dalam suatu document HTML boleh ada maupun tidak.

3. Tag <TITLE> … </TITLE> adalah tag judul. Sebaiknya setiap halaman web memiliki judul, dan judul tersebut dituliskan di dalam <TITLE> … </TITLE>. Judul ini akan muncul dalam titlebar dari browser.

4. Tag <BODY> … </BODY> adalah tag berisi content dari suatu halaman web.

Kode-kode dalam HTML biasanya disebut TAG.

Tag adalah sesuatu yang digunakan untuk menandai elemen-elemen dalam suatu dokumen HTML. Tag dalam HTML terdiri dari tanda lebih kecil ( < ), tanda lebih besar ( > ), dan garismiring ( / ). Biasanya Tag dituliskan secara berpasangan, misanya <h1> dan </h1>. Tag yang tidak menggunakan garis miring ( / ) adalah Tag pembuka atau awal elemen. Sedangkan yang Tag yang mengandung garis miring ( / ) adalah penutup elemen atau akhir elemen. Namun, ada juga Tag yang dalam pemakaiannya tidak berpasangan, diantaranya adalah :

a. Tag untuk ganti paragraph yaitu <p>

b. Tag untuk ganti baris atau line break yaitu <br>

c. Tag untuk garis datar yaitu <hr>

d. Tag list item yaitu <li>

Untuk tag yang tidak berpasangan diatas, sebaiknya tetap ditulis menggunakan pasangannya. Hal ini dilakukan untuk mengantisipasi standar rekomendasi HTML kedepannya. Penulisan untuk semua Tag bebas, maksudnya kita bisa menggunakan huruf besar, huruf kecil, bahkan dicampur ( tidak case sensitive ).

2.3. Pembuatan Tabel Menggunakan HTML

Tabel penting peranannya dalam halaman Web, selain untuk menampilkan teks atau gambar dalam format lajur dan kolom bias juga menggunakan tabel untuk membantu me-layout tampilan halaman. Tabel merupakan sebuah kotak yang terdiri atas baris/row dan kolom.column. Untuk membuat tabel, anda menggunakan tag <table> dan menutupnya dengan tag </table>. Anda bisa juga menambahkan atribut lain di tag <table> pembuka. Misalnya menentukan warna, border, dan sebagainya.

Di dalam tag <table> ada beberapa tag lain yang perlu dipahami, yaitu :

a. Tag <tr>

Artinya tag untuk menuliskan baris biasa di tabel. TR singkatan dari Table Row.

b. Tag <td>

Artinya tag untuk menuliskan kotak di dalam baris, makanya tag <td> ada di dalam tag <tr>. TD singkatan dari Table Data.

c. Tag <th>

Artinya tag untuk menuliskan kotak biasa seperti <td>, namun untuk header tabel. TH singkatan dari Table Header.

Menggabungkan sel

Sel-sel tabel secara normal memiliki lebar dan tinggi yang sama. Jika kita ingin membuat sebuah sel memiliki lebar atau tinggi yang berbeda dari sel-sel lainnya, maka satu-satunya cara yang bisa kita lakukan adalah dengan menggabungkan beberapa sel menjadi satu. Cara ini disebut merge atau penggabungan sel. Untuk menggabungkan sel-sel tabel ini diperlukan atribut rowspan atau colspan. Atribut rowspan digunakan untuk menggabungkan sel-sel tabel pada kolom yang sama. Atribut colspan untuk menggabungkan sel-sel tabel pada baris yang sama.

2.4. Komponen Form

Sebuah website dinamis seringkali memerlukan interaksi antara browser client dan server bisa berupa pemasukan data teks, angka, atau upload file untuk diproses oleh server. Untuk mewadahi suatu data yang dikirimkan oleh browser client, dibutuhkan adanya FORM HTML. Penggunaan form misalnya untuk pendaftaran keanggotaan, pemasukan kode kartu kredit, login user, transaksi perbelanjaan, dan upload file. Dalam FORM HTML terdapat beberapa komponen yang bisa digunakan, antara lain :

1. Form

<FORM ACTION=action METHOD=method ENCTYPE=media type> </FORM

2. Text Box

Text box : untuk menginput data string ataupun angka.

< INPUT TYPE=TEXT NAME=”nama_variabel” VALUE=”value”>

3. Text Area

Text area : untuk menginput string ataupun angka yang terdiri atas banyak baris.

4. Radio buton

Radio buton : untuk memilih satu pernyataan dari beberapa pernyataan yang disediakan.

<input type=”radio” name=”nama_variabel” value=” ”>Isi_Radio

5. Combo Box

Combo box untuk menampilkan daftar data.

<select name=”nama_variabel” value=” “><option>Combo1</option> <option>Combo2</option></select

6. Check Box

Check box untuk memilih satu atau lebih pernyataan dari beberapa pernyataan yang disediakan.

<input type=”checkbox” name=”nama_variabel” value=”ON” checked

7. Submit

Submit untuk mengirimkan semua variable data pada komponen-komponen form yang ada.

8. Reset

Reset untuk membatalkan semua penginputan yang telah dituliskan.

2.5. CSS = Cascading Style Sheets ( Bahasa lembar Gaya )

CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.

Beberapa hal yang dapat dilakukan dengan CSS.

· Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.

· Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda.

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:

· External Style Sheet Aturan CSS disimpan pada suatu file sehingga terpisah dari dokumen HTML. Kemudian tambahkan kode pemanggilan file CSS dalam dokumen HTML.

· Internal Style Sheet Aturan CSS ditulis pada bagian HEAD dokumen HTML menggunakan tag <style>

· Inline Style Sheet Aturan CSS ditulis langsung pada tag HTML yang akan diatur tampilannya menggunakan atribut style

2.6. Satuan Dalam Css

1. Statik

* in -- satuan inchi

* cm -- satuan centimeter

* mm -- satuan milimeter

* pt -- satuan point (1point = 1/72 inchi)

* pc -- satuan pica (1pica = 12 point)

* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)

2. Relatif

* % -- satuan persen

* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)

* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)

2.7. Pseduo-Class

Adalah sebuah kelas semu yang dimiliki oleh elemen HTML, yang membuat kita dapat mendefinisikan style pada keadaan tertentu dari elemen tersebut. Pseduo-class terbagi menjadi beberapa type, sebagai berikut :

1. Yang berhubungan dengan link :

· Link

Style default pada sebuah link (a yang memiliki href)

· Hover

Style ketika kursor mouse berada diatas sebuah link / elemen

· Active

Style ketika sebuah link di klik (keadaan aktif)

· Visisted

Style ketika sebuah link sudah pernah di kunjungi sebelumnya (menggunakan browser yang sama)

2. Yang berhubungan dengan posisi elemen (ada pada css 3)

· First-child

Memilih elemen pertama dari sebuah parent (elemen pembungkusnya )

· Last-child

Memilih elemen terakhir dari sebuah parent (elemen pembungkusnya )

· Nth-child(n)

Memilih elemen ke (n) dari sebuah parent (elemen pembungkusnya ) n bisa berarti urutan 1,2,3,….. atau pola (2n),(3n+2), atau ganjil dan genap, even & odd

· First-of-type

Memilih elemen pertama dari sebuah jenis / tipe tag • : last-of-type Memilih elemen terakhir dari sebuah jenis / tipe tag

2.8. Padding, Margin Dan Border

Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam

Border : Adalah garis tepi dari komponen

Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border

CSS menggunakan konsep ini dalam mengatur tag-tag HTML. Pada gambar, bayangkan area ‘Content’ misalnya adalah sebuah paragraph. Obyek paragraph ini akan dianggap CSS memiliki area padding, border, dan margin disekitarnya. Keberadaan area-area ini berguna untuk pengaturan tata letak. Misalnya ingin diatur agar 2 buah gambar yang terletak berdampingan tidak terlalu rapat, maka kita dapat memperbesar lebar dari area margin agar jarak antara gambar lebih lebar.

Padding

Ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan

padding-left:5px; ➔ini adalah untuk pengaturan padding bagian kiri

padding-right:5px; ➔ ini adalah untuk pengaturan padding kanan

padding-top:5px; ➔ untuk bagian atas dan

padding-bottom:5px; ➔ untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai

Border

Ditulis dengan CSS border:1px dotted #000000; ➔ urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan

border-width:1px; ➔ ini adalah ketebalan border

border-style:dotted; ➔ ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya

border-color:#FFFFFF; ➔ ini adalah warna dari border.. kamu bisa mengganti code warnanya (www.colorschemer.com/online)

Margin

Ditulis dengan CSS margin:5px 5px 5px 5px; ➔ urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas

margin-left:5px;

margin-right:5px;

margin-top:5px;

margin-bottom:5px;

2.9. Struktur Navigasi Website Travel Agent Malang

Struktur navigasi yang digunakan adalah struktur navigasi linier. Struktur ini hanya mempunyai satu rangkaian cerita yang berurut, yang menampilkan satu demi satu tampilan layar secara berurut menurut urutannya.

Tampilan yang dapat ditampilkan pada sruktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya.

2.10. Membuat Design Web Responsive Menggunakan CSS

Pada pembahasan materi kali ini kita akan membuat Design Web Responsive.

Design Web Responsive adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik mobile maupun komputer.

Dengan metode ini. Berikut kita akan membuat form responsive.

Langkah-langkah yang perlu di gunakan dalam pembuatan web ini adalah :

1. Tentukan tema website - Tema web travel agent

2. Web responsive berarti web yang tampilannya mengikuti ukuran layar gadget yang di gunakan untuk akses web tersebut.

3. Membuat struktur navigasi

4. Membuat file .html dan .css

HTML

index1.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Agent Travel Malang</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style1.css">
</head>
<body>

<div class="container">
<div class="header">
<h1 class="judul"><marquee width="60%">TRAVEL AGENT MALANG</marquee></h1>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="c:/xampp/htdocs/destinasi.html">Destinasi Wisata</a></li>
<li><a href="c:/xampp/htdocs/paket.html">Paket Wisata</a></li>
<li><a href="c:/xampp/htdocs/kendaraan.html">Paket Sewa Mobil</a></li>
<li><a href="c:/xampp/htdocs/daftar.html">Daftar</a></li>
<li><a href="c:/xampp/htdocs/kontak.html">Kontak Kami</a></li>
</ul>
</div>
<div class="malang"></div>
<div class="content class cf">
<div class="main">
<h2>Hai Traveller!</h2>

<p>Pas.. banget nih kalau kalian mampir ke Website Travel Agent Malang.</p>
<p>Jadi gimana? Apa wisata yang sudah menjadi destinasi list trip kalian?</p>
<p>Kami menyediakan banyak trip loh.. mulai dari trip bromo only, bromo+dokumentasi foto dan video drone, kami juga menyediakan jasa layanan Privat trip cocok buat kalian yang ingin bulan madu dengan pasangan kalian loh..</p>
<p>Jangan sedih! selain trip bromo, kami juga membuka trip untuk ke pantai, buat kalian yang ingin melihat keindahan Sunset bisa menggunakan jasa layanan trip pantai.</p>
<p>Kalian jangan bingung kalo dari Stasiun Malang tidak mempunyai kendaraan pribadi, kami menyediakan layanan sewa kendaraan mulai dari Mobil hingga Mobil Elf. </p>
</div>
<div class="sidebar">
<h3>Tentang Kami</h3>
<img src="img/kita.jpg" alt="Tentang Kami">
<p>Agent travel malang terbentuk sejak tahun 2012, yang di bentuk oleh 4 mahasiswa UBSI, karena kita mempunyai satu hobi yang sama yaitu traveling. Kenapa kita memilih menjadi agent travel hanya di area malang? karna menjadi tempat wisata yang banyak dikunjungi oleh peminatnya, mulai dari umur belia hingga orang tua. Dan kami salah satu travel agent penyedia jasa layanan seperti trip bromo dan destinasi wisata area Malang. Kami juga menyediakan layanan seperti sewa kendaraan. Bagi kalian yang mempunyai rencana berwisata ke area Malang bisa menggunakan jasa layanan kami dengan menghubungi kontak yang tertera diatas.</p>
</div>
</div>
<div class="footer">
<p class="copy">Copyright 2012.</p>
</div>
</div>

</body>
</html>

destinasi.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Agent Travel Malang</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div class="container">
<div class="header">
<h1 class="judul"><marquee width="60%">TRAVEL AGENT MALANG</marquee></h1>
<ul>
<li><a href="c:/xampp/htdocs/index1.html">Beranda</a></li>
<li><a href="c:/xampp/htdocs/destinasi.html">Destinasi Wisata</a></li>
<li><a href="c:/xampp/htdocs/paket.html">Paket Wisata</a></li>
<li><a href="c:/xampp/htdocs/kendaraan.html">Paket Sewa Mobil</a></li>
<li><a href="c:/xampp/htdocs/daftar.html">Daftar</a></li>
<li><a href="c:/xampp/htdocs/kontak.html">Kontak Kami</a></li>
</ul>
</div>
<div class="gallery">
<h2>DESTINASI WISATA</h2>
<ul class="gallery1">
<li>
<a href="">
<img src="img/11.jpg" alt="Alun - Alun Malang">
<span>Alun - Alun Malang</span>
</a>
</li>

<li>
<a href="">
<img src="img/22.jpg" alt="Gunung Bromo">
<span>Gunung Bromo</span>
</a>
</li>

<li>
<a href="">
<img src="img/33.jpg" alt="Batu Night Specta">
<span>Batu Night Specta</span>
</a>
</li>

<li>
<a href="">
<img src="img/44.jpg" alt="Kampung Warna">
<span>Kp. Warna - Warni</span>
</a>
</li>

<li>
<a href="">
<img src="img/55.jpg" alt="Pantai Kembang">
<span>P. BaleKambang</span>
</a>
</li>

<li>
<a href="">
<img src="img/66.jpg" alt="Museum Angkut">
<span>Museum Angkut</span>
</a>
</li>

<div class="clear"></div>
</ul>
</div>
<div class="footer">
<p class="copy">Copyright 2012.</p>
</div>
</div>
</body>

</html>

paket.html

kendaraan.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Agent Travel Malang</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style3.css">
</head>
<body>
<div class="container">
<div class="header">
<h1 class="judul"><marquee width="60%">TRAVEL AGENT MALANG</marquee></h1>
<ul>
<li><a href="c:/xampp/htdocs/index1.html">Beranda</a></li>
<li><a href="c:/xampp/htdocs/destinasi.html">Destinasi Wisata</a></li>
<li><a href="c:/xampp/htdocs/paket.html">
Paket Wisata</a></li>
<li><a href="c:/xampp/htdocs/kendaraan.html">Paket Sewa Mobil</a></li>
<li><a href="c:/xampp/htdocs/daftar.html">Daftar</a></li>
<li><a href="c:/xampp/htdocs/kontak.html">Kontak Kami</a></li>
</ul>
</div>
<div class="gallery">
<h2>PAKET SEWA MOBIL</h2>
<div class="mobil"></div>
<div class="footer">
<p class="copy">Copyright 2012.</p>
</div>
</div>
</body>

</html>

daftar.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Agent Travel Malang</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style1.css">
</head>
<body>

<div class="container">
<div class="header">
<h1 class="judul"><marquee width="60%">TRAVEL AGENT MALANG</marquee></h1>
<ul>
<li><a href="c:/xampp/htdocs/index1.html">Beranda</a></li>
<li><a href="c:/xampp/htdocs/destinasi.html">Destinasi Wisata</a></li>
<li><a href="c:/xampp/htdocs/paket.html">Paket Wisata</a></li>
<li><a href="c:/xampp/htdocs/kendaraan.html">Paket Sewa Mobil</a></li>
<li><a href="c:/xampp/htdocs/daftar.html">Daftar</a></li>
<li><a href="c:/xampp/htdocs/kontak.html">Kontak Kami</a></li>
</ul>
</div>
<div class="daftar">
<h2>FORMULIR PENDAFTARAN</h2>
<form>
<table border="1" width="400" align="center" bgcolor="lightskyblue">
<tr>
<td>Nama </td>
<td><input type="text" name="nama" size="40" maxlength="50"></td>
</tr>
<tr>
<td>Alamat </td>
<td><input type="text" name="alamat" size="40" maxlength="50"></td>
</tr>
<tr>
<td>No. Telp </td>
<td><input type="text" name="no" size="40" maxlength="50"></td>
</tr>
<tr>
<td>Email </td>
<td><input type="text" name="email" size="40" maxlength="50"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td><input type="radio" name="jeniskel" value="Laki-laki">Laki-laki
<input type="radio" name="jeniskel" value="Perempuan">Perempuan</td>
</tr>
<tr>
<td>Paket Wisata</td>
<td><select name="destinasi">
<option value="-Pilih-">-Pilih-
<option value="Paket Trip Bromo">Paket Trip Bromo
<option value="Paket Trip Pantai">Paket Trip Pantai
</select></td>
</tr>
<tr>
<td>Paket Sewa Mobil</td>
<td><select name="mobil">
<option value="-Pilih-">-Pilih-
<option value="Sewa Mobil + Driver All In">Sewa Mobil + Driver All In
<option value="Sewa Mobil + Driver Saja">Sewa Mobil + Driver Saja
</select></td>
</tr>
<tr>
<td>Jumlah </td>
<td><input type="text" name="jml" size="20" maxlength="50"></td>
</tr>
<tr>
<td colspan="2"><button type="submit"><a href="c:/xampp/htdocs/daftar1.html">Daftar</a></button></td>
</tr>
</table>
</form>

<div class="footer">
<p class="copy">Copyright 2012.</p>
</div>
</div>

</body>
</html>

daftar1.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Agent Travel Malang</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style1.css">
</head>
<body>

<div class="container">
<div class="header">
<h1 class="judul"><marquee width="60%">TRAVEL AGENT MALANG</marquee></h1>
<ul>
<li><a href="c:/xampp/htdocs/index1.html">Beranda</a></li>
<li><a href="c:/xampp/htdocs/destinasi.html">Destinasi Wisata</a></li>
<li><a href="c:/xampp/htdocs/paket.html">Paket Wisata</a></li>
<li><a href="c:/xampp/htdocs/kendaraan.html">Paket Sewa Mobil</a></li>
<li><a href="c:/xampp/htdocs/daftar.html">Daftar</a></li>
<li><a href="c:/xampp/htdocs/kontak.html">Kontak Kami</a></li>
</ul>
</div>
<div class="container-fluid">
<div class="coll-sm-12 judul text-center">
<h1>Kontak Kami</h1>
</div>
<div class="row">
<div class="col-md=3">
<div class="panel panel-default">
<div class="panel-body text-center">
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>
<h2>+021-8387-2670</h2>
<p></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md=3">
<div class="panel panel-default">
<div class="panel-body text-center">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<h2>travelagentmalang@gmail.com</h2>
<p></p>
</div>
</div>
</div>

<div class="footer">
<p class="copy">Copyright 2012.</p>
</div>
</div>

</body>

</html>

kontak.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Agent Travel Malang</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style1.css">
</head>
<body>

<div class="container">
<div class="header">
<h1 class="judul"><marquee width="60%">TRAVEL AGENT MALANG</marquee></h1>
<ul>
<li><a href="c:/xampp/htdocs/index1.html">Beranda</a></li>
<li><a href="c:/xampp/htdocs/destinasi.html">Destinasi Wisata</a></li>
<li><a href="c:/xampp/htdocs/paket.html">Paket Wisata</a></li>
<li><a href="c:/xampp/htdocs/kendaraan.html">Paket Sewa Mobil</a></li>
<li><a href="c:/xampp/htdocs/daftar.html">Daftar</a></li>
<li><a href="c:/xampp/htdocs/kontak.html">Kontak Kami</a></li>
</ul>
</div>
<div class="container-fluid">
<div class="coll-sm-12 judul text-center">
<h1>Kontak Kami</h1>
</div>
<div class="row">
<div class="col-md=3">
<div class="panel panel-default">
<div class="panel-body text-center">
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>
<h2>+021-8387-2670</h2>
<p></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md=3">
<div class="panel panel-default">
<div class="panel-body text-center">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<h2>travelagentmalang@gmail.com</h2>
<p></p>
</div>
</div>
</div>

<div class="footer">
<p class="copy">Copyright 2012.</p>
</div>
</div>

</body>

</html>

CSS

style1.css

body{
font: 16px/28px arial, sans-serif;
background-color: lightblue;
color: #333;
}

.container{
width: 960px;
margin: auto;
background-color: #fff;
text-align: center;
}

.header {
padding: 20px;
padding-bottom: 10px;
}

.header .judul {
font-size: 35px;
text-align: center;
color: lightskyblue;
}

.header ul li {
display: inline-block;
margin-top: 15px;
margin-right: 10px;
}

.header a{
text-decoration: none;
color: salmon;
padding: 3px;
}

.header a:hover {
background-color: lightskyblue;
color: white;
}

.malang {
height: 350px;
background-image: url(img/poto3.jpg);
background-size: cover;
background-position: 0 -110px;
border-top: 5px solid lightskyblue;
border-bottom: 5px solid salmon;
}

.main {
padding: 20px;
padding-top: 5px;
box-sizing: border-box;
width: 600px;
float: left;
text-align: left;
}

.main p{
margin-bottom: 20px;
font-size: 14px;
text-align: justify;
}

.sidebar {
width: 300px;
float: left;
padding: 10px;
}

.sidebar img {
float: left;
padding-right: 10px;
}

.sidebar h3 {
text-align: left;
}

.sidebar p{
font-size: 12px;
text-align: justify;
line-height: 18px;
}

.footer {
background-color: salmon;
padding: 5px;
}

.footer .copy {
color: #eaeaea;
}

/*clearfix */
.cf:before,
.cf:after {
content: " "; /*1*/
display: table; /*2*/
}

.cf:after {
clear: both;
}

.cf {
*zoom: 1;

}

style2.css

body{
font: 16px/28px arial, sans-serif;
background-color: lightblue;
color: #333;
}

.container{
width: 960px;
margin: auto;
background-color: #fff;
text-align: center;
}

.header {
padding: 20px;
padding-bottom: 10px;
}

.header .judul {
font-size: 35px;
text-align: center;
color: lightskyblue;
}

.header ul li {
display: inline-block;
margin-top: 15px;
margin-right: 10px;
}

.header a{
text-decoration: none;
color: salmon;
padding: 3px;
}

.header a:hover {
background-color: lightskyblue;
color: white;
}

h2 {
font-size: 20px;
margin: 30px 0;
text-align: center;
font-style: bold;
color: lightskyblue;
}

.gallery .gallery1 {
width: 600px;
background-color: salmon;
margin: auto;
padding: 20px;
box-shadow: 0 0 3px 3px rgba(0,0,0,.5);
border-radius: 5px;
}

.gallery1 li {
width: 160px;
height: 120px;
border-radius: 50%;
/*overflow: hidden;*/
border:5px solid #666;
float: left;
margin-right: 30px;
margin-bottom: 20px;
position: relative;
}

.gallery1 li img {
border-radius: 50%;
}

.gallery1 li span {
display: block;
width: 160px
height: 120px;
background-color: rgba(200,200,200,.5);
border-radius: 50%;
position: absolute;
top: 0;
text-align: center;
line-height: 120px;
text-shadow: 1px 1px 1px #ddd;
opacity: 0;
transform: scale(0) rotate(0);
transition: .3s;
}

.gallery1 li a:hover span {
opacity: 1;
transform: scale(1) rotate(360deg);
}

.footer {
background-color: salmon;
padding: 5px;
}

.footer .copy {
color: #eaeaea;
}

.clear {
clear:both;

}

style3.css

body{
font: 16px/28px arial, sans-serif;
background-color: lightblue;
color: #333;
}

.container{
width: 960px;
margin: auto;
background-color: #fff;
text-align: center;
}

.header {
padding: 20px;
padding-bottom: 10px;
}

.header .judul {
font-size: 35px;
text-align: center;
color: lightskyblue;
}

.header ul li {
display: inline-block;
margin-top: 15px;
margin-right: 10px;
}

.header a{
text-decoration: none;
color: salmon;
padding: 3px;
}

.header a:hover {
background-color: lightskyblue;
color: white;
}

h2 {
font-size: 20px;
margin: 30px 0;
text-align: center;
font-style: bold;
color: lightskyblue;
}

.bromo {
width: 600px;
height: 691px;
background-image: url(img/Bromo.jpg);
border-top: 5px solid lightskyblue;
border-bottom: 5px solid salmon;
margin: auto;
}

.pantai {
width: 600px;
height: 639px;
background-image: url(img/pantai.jpg);
border-top: 5px solid lightskyblue;
border-bottom: 5px solid salmon;
margin: auto;
}

.mobil {
width: 600px;
height: 1151px;
background-image: url(img/mobil.jpg);
border-top: 5px solid lightskyblue;
border-bottom: 5px solid salmon;
margin: auto;
}

.footer {
background-color: salmon;
padding: 5px;
}

.footer .copy {
color: #eaeaea;

}

BAB III

PENUTUP

3.1. Kesimpulan

Berdasarkan pembahasan pada bab-bab sebelumnya, makaa

Penyusun menarik kesimpulan pada sistem baru yang telah dibuat antara lain sebagai berikut:

1. Pengola dara berbasis web dapat mengurangi penggunakan kertas sebagai penyimpanan data dan lebih sistematis.

2. Pencarian data sudah dapat dilakukan dengan cepat.

3. Perubahan data sudah dapat dilakukan dengan mudah dan cepat.

4. Adanya sistem informasi yang terkomputerisasi, penyimpanan data lebih efisien dan informasi yang disajikan juga lebih akurat, tepat waktu, dan relavan.

3.2. Saran

Penyimpanan berbasis web memudahkan pengguna maupun mengolah data secara cepat dan akurat. Sehingga kesalahan yang mungkin terjadi akan relatif berkurang.

DAFTAR PUSTAKA

1. Tim Penyusun Modul Sistem Informasi UBSI, 2019. Modul Praktikum Web Programming 1

2. www.academia.edu/35133931/MAKALAH.com

Cari Blog Ini

RIZKY AMALIA W | WELCOME TO MY BLOG

PROJECT UAS WEB PROGRAMMING I "MEMBUAT WEBSITE RESPONSIVE MENGGUNAKAN HTML DAN CSS"

Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS WEB PROGRAMMING I "MENAMPILKAN FORM INPUT DAN OUTPUT PEGAWAI KONOHA"

PROJECT UAS MULTIMEDIA

TUGAS WEB PROGRAMMING I "MENAMPILKAN FORM INPUT DAN OUTPUT KOMENTAR"