TUGAS-BESAR-LINGKUNGAN-KOMPUTASI.docx

7/25/2019 TUGAS-BESAR-LINGKUNGAN-KOMPUTASI.docx

1/48

BAB I

PENDAHULUAN

1.1 Latar Belakang Masalah

Daerah di sekitar suatu Universitas selalu menjadi lahan yang ideal

untuk membuat penyewaan tempat tinggal sementara seperti kos-kosan.

Mahasiswa yang berdatangan baik itu dari luar provinsi ataupun luar kota

sangat membutuhkan tempat tinggal sementara untuk memperlancar

perkuliahan mereka.

Dalam hal ini, di sekitaran Universitas Bengkulu juga sudah

terdapat banyak penyewaan tempat tinggal sementara seperti kos-kosan.

Terkhususnya pada bagian Universitas Bengkulu bagian belakang.

Terdapat banyak sekali kos-kosan dengan berbagai macam harga dan

asilitas yang tersedia.

Banyaknya kos-kosan ini terkadang membuat konsumen atau

dalam hal ini mahasiswa menjadi bingung. Dalam memilih sebuah tempat

tinggal baik itu yang permanen ataupun sementara tentunya membutuhkan

pertimbangan. Tidak sedikit mahasiswa yang berpindah-pindah kosan

dikarenakan ketika sudah memilih kosan, ternyata mahasiswa tersebut

tidak cocok dengan lingkungan kosan nya atau asilitas di dalam kosan

tersebut.

Dari permasalahan yang dihadapi di atas, dibutuhkan suatu system

inormasi dimana mahasiswa-mahasiwa yang ingin mencari inormasi

tentang kosan yang ada disekitaran Universitas Bengkulu. Maka dari itu

dalam pemecahan masalah ini dibuat sebuah system inormasi berbasis

webdengan menggunakan !TM" sederhana.

1


2/48

1.2 Tujuan Penulisan

#etiap melakukan perkerjaan tentunya ada sasaran yang hendak

dicapai. Tujuan penyusunan makalah ini adalah sebagai sarana pemenuhan

atas tugas mata kuliah "ingkungan $omputasi. #elain itu makalah ini juga

disusun untuk menjawab permasalahan yang telah dijabarkan pada latar

belakang masalah. %enulis berharap makalah ini pada akhirnya akan

berguna sebagai sumber reerensi bagi siapa saja yang ingin mempelajari

mengenai bahasa pemrograman !TM".

1.3 Manfaat Penulisan

&dapun Manaat yang penulis harapkan dengan dilakukanya penelitian

ini adalah untuk dapat memberikan inormasi terkait kos-kosan di daerah

Unib Belakang.

1. Met!"e Penulisan

Metode yang digunakan dalam %enulisan ini adalah Metode #ecara"angsung.metode ini mengkaji berbagai tempat kos-kosan yang ada

disekitaran Unib belakang

1.# $u%usan MasalahBerdasarkan latar belakang di atas permasalahan yang akan diangkat

dalam penulisan ini adalah '

Bagaimana cara yang digunakan untuk membuat system inormasi

berbasis web dengan html (

2


3/48

BAB II

PEMBAHA&AN2.1 &'U$(E ('DE

Hala%an Uta%a

!TM" dengan menggunakan )## '

)ht%l*

)hea"*

)title*Untitle" D!+u%ent),title*

)st-le t-e/0tet,+ss0*

hea"er se+ti!n f!!ter asi"e na arti+le figure fig+ati!n 4

"isla-5 6l!+k78

6!"- 4

+!l!r5 9::::::7

6a+kgr!un";+!l!r5 9f


4/48

+!l!r5 9ffffff78

na li a5h!er na li a.+urrent 4

+!l!r5 978

se+ti!n.+!urses 4

fl!at5 left7i"th5 :#


5/48

f!!ter 4

f!nt;sie5 =C7

a""ing5 1278

),st-le*

)ascading #tyle #heet atau yang disingkat )## memungkinkan anda

untuk mendesain tampilan dokumen *%hp dan !TM"+ dengan memisahkan isi

dari dokumen !TM" dengan kode untuk menampilkannya *)##+.

Didalam dunia desain web, layout atau mengatur letak web, ormat huru,

dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting

bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya.

$arena jika kita membua layout yang salah, maka web kita juga akan salah

diterjemahkan oleh browser. !al itu juga bisa disebabkan karena setiap browser

memilliki dukungan bahasa*)##+ yang berbeda dan tentunya deault dari

browsernya sendiri yang berbeda-beda.

Penjelasan &-nta (&& 5

6!"- 4

+!l!r5 9::::::7



6/48

dengan mengubah posisi, ont tulisan warnanya. rapper digunakan untuk

menempatkan blok-blok yang lebih kecil yang ada didalamnya.

hea"er 4

height5 17

6a+kgr!un";i%age5 url>0(ature.ng0?78

h1 4

tet;in"ent5 7

i"th5


7/48

fl!at5 left7

a""ing5 278

asi"e se+ti!n a 4

"isla-5 6l!+k7

a""ing5 176!r"er;6!tt!%5 1 s!li" 9eeeeee78

asi"e se+ti!n a5h!er 4

+!l!r5 9


8/48

)h1*)i*F'&AN;F'&AN &EFITA$AN UNIB),i*),h1*

)se+ti!n +lass/0+!urses0*

)arti+le*

)figure*

)i%g sr+/0raja,@@3G1213G1G1.jg0 alt/0raja0

i"th/02


9/48

)h2*P!n"!kan Haulan),h2*

)h3*Feterangan 5),h3*

),hgr!u*

)*Bia-a 5 $ ..;,tahun),*

)*Ukuran 5 % 3# %),*

)*L!kasi 5 @ang 3),*

)*)a href/0HAULAN.HTML0*&elengkan-a...),a*),*

),arti+le*

)arti+le*

)figure*

)i%g sr+/0tiara,@@3G1213G3G1.jg0 alt/0Tiara0

i"th/02


10/48

)figure*

)i%g sr+/0uterisu+hi,@@3G1213GG1.jg0 alt/0Puteri su+hi0

i"th/02


11/48

),hgr!u*

)*Bia-a 5 $ 3.#.;,tahun),*

)*Ukuran 5 % 3 %),*


)*)a href/0EF'.HTML0*&elengkan-a...),a*),*

),arti+le*

)arti+le*

)figure*

)i%g sr+/0nenek,@@3G1213G:G1.jg0 alt/0Nenek0

i"th/02


12/48

)i%g sr+/0in"ri,@@3G1213GG1.jg0 alt/0In"ri0

i"th/02


13/48

)*Ukuran 5 3# % 3# %),*


)*)a href/0AJAKAH.HTML0*&elengkan-a...),a*),*

),arti+le*

)arti+le*

)figure*

)i%g sr+/0an"i,@@3G1213G


14/48

),figure*

)hgr!u*

)h2*P!n"!kan M. $ik- A"it-a),h2*


),hgr!u*

)*Bia-a 5 $ 3.#.;,tahun),*

)*Ukuran 5 3 % # %),*


)*)a

href/0M$IKFADITA.HTML0*&elengkan-a...),a*),*

),arti+le*

)arti+le*

)figure*

)i%g sr+/0riki,FDLG1213G11G1.jg0 alt/0$iki0

i"th/02


15/48

)*)a href/0$IKFI.HTML0*&elengkan-a...),a*),*

),arti+le*

)arti+le*

)figure*

)i%g sr+/0re"!,FDLG1213G12G1.jg0 alt/0$e"!0

i"th/02


16/48

)h2*P!n"!kan Elena),h2*


),hgr!u*

)*Bia-a 5 $ ..;,tahun),*

)*Ukuran 5 2# % # %),*

)*L!kasi 5 Merati 2),*

)*)a href/0ELENA.HTML0*&elengkan-a...),a*),*

),arti+le*

)arti+le*

)figure*

)i%g sr+/0elitaharaan,PMIG1213G1G1.jg0 alt/0Pelita

Haraan0 i"th/02


17/48

)arti+le*

)figure*

)i%g sr+/0fla%6!-an,PMIG1213G1#G1.jg0

alt/0la%6!-an0 i"th/02


18/48


),hgr!u*

)*Bia-a 5 $ 3.#.;,tahun),*

)*Ukuran 5 % 3# %),*

)*L!kasi 5 Merati 2),*

)*)a href/0ENTI.HTML0*&elengkan-a...),a*),*

),arti+le*

)arti+le*

)figure*

)i%g sr+/0asri,@&TG1213G1G1.jg0 alt/0Asri0

i"th/02


19/48

)i%g sr+/0raha-u2,@G1213G1=G1.jg0 alt/0$aha-u20

i"th/02


20/48

)*Ukuran 5 # % 3 %),*

)*L!kasi 5 @ang Bersa%a),*

)*)a href/0AE.HTML0*&elengkan-a...),a*),*

),arti+le*

)arti+le*

)figure*

)i%g sr+/03utra,@MIG1213G2G1.jg0 alt/03 Putra0

i"th/02


21/48

),figure*

)hgr!u*

)h2*P!n"!kan A"fa),h2*


),hgr!u*

)*Bia-a 5 $ #..;,tahun),*

)*Ukuran 5 3 % 1 %),*

)*L!kasi 5 @ang Da%ai),*

)*)a href/0ADA.HTML0*&elengkan-a...),a*),*

),arti+le*

),se+ti!n*

)asi"e*

)se+ti!n +lass/0%enu0*

)h2*Menu),h2*

)a href/0H'ME.ht%l0*H!%e),a*

)a href/00*Pr!fil (reat!rs),a*

)a href/0.uni6.a+.i"0*M- Uniersitas),a*

),se+ti!n*

)se+ti!n*

)h2*(!nta+t),h2*

)*=21:::a"%in 1?),*

)*=#==:=1: >a"%in 2),*

),se+ti!n*

21


22/48

),asi"e*

)f!!ter*

+!-7right UNIE$&ITA& BEN@FULU

),f!!ter*

),"i*

),6!"-*

),ht%l*

Penjelasan &!ur+e +!"e 5

)hea"er*

),hea"er*)6r*

)h1*)i*F'&AN;F'&AN &EFITA$AN UNIB),i*),h1*

Penjelasan 5

bagian paling atas dari blok. Didalam !eader dapat juga memiliki sub-blok,

misalnya' !eader /udul blok, Deskripsi blog, dan lain-lain seperti banner

&dsense, menu bar, dll. Dengan menuliskan $4#&5-$4#&5 #6$7T&8&5

U57B dengan ormat penulisan h0.


)arti+le*

)figure*

)i%g sr+/0raja,@@3G1213G1G1.jg0 alt/0raja0 i"th/02


23/48


),hgr!u*

)*Bia-a 5 $ 13..;,tahun),*

)*Ukuran 5 3#% 3# %),*


)*)a href/0$AA.HTML0*&elengkan-a...),a*),*

),arti+le*

Penjelasan 5

%ada halaman utama disajikan inormasi kosan secara umum dengan tujuan agar

pembaca eb bisa melihat terlebih dahulu dan tidak perlu mencari yang pada

intinya sudah mempermudah pembaca dan untuk menarik minatnya. %enggunaan

synta section yaitu untuk membuat bagian dalam dokumen dengan menamakan

kelasnya yaitu courses dan dan membuat beberapa artikel dengan data kosan yang

berisikan inormasi kosan secara umum. Dengan mengelompokan elemen heading

yang berisikan inormasi kosan yang kami contohkan yaitu kosan raja dengan

keterangan biaya, ukuran, dan lokasi kosan.

)asi"e*


)h2*Menu),h2*




),se+ti!n*

)se+ti!n*

)h2*(!nta+t),h2*

23


24/48

)*=21:::a"%in 1?),*

)*=#==:=1: >a"%in 2),*

),se+ti!n*

),asi"e*

Penjelasan &!ur+e +!"e 5

%ada penggunaan synta aside yaitu berungsi membuat konten lain selain dari

konten halaman. 9aitu dengan menu pada !4M6 yaitu dibuat %roil )reators dan

eb unib. Dan juga dibuat )ontact yaitu agar pengunjung bisa menghubungi

nomor telon admin yang telah disediakan.

)f!!ter*


),f!!ter*

Penjelasan 5

Membuat ooter pada halaman eb yaitu dengan :copy;right U57


25/48



26/48

height5 378

na ul 4

%argin5 7

a""ing5 # # 378

na li 4

"isla-5 inline7

%argin;right5 78

na li a 4

+!l!r5 9ffffff78

na li a5h!er na li a.+urrent 4

+!l!r5 978

se+ti!n.+!urses 4

fl!at5 left7

i"th5 :#


27/48

i"th5 2


28/48

f!nt;eight5 n!r%al78

h2 4

%argin5 1 # 7

a""ing5 78

h3 4

%argin5 1 7

+!l!r5 91A(#78

asi"e h2 4

a""ing5 3 1 7

+!l!r5 91A(#78

f!!ter 4

f!nt;sie5 =C7

a""ing5 1278

),st-le*

),hea"*

)6!"-*

)"i +lass/0raer0*

)hea"er*

),hea"er*


)arti+le*)+enter*


i"th/02


29/48


i"th/02


30/48

)li*Listrik Ba-ar sen"iri>Pra6a-ar? "engan @a6ungan

)li*enis Lantai 5 &e%en

)li*Ti"ak ernah terja"i ke%alingan "i k!san ini

)li*F!n"isi &ignal 5 )6r*Telk!%sel /

#,#)6r*OL/2,#)6r*In"!sat / 1,#)6r*Tri / #,#

)li*Ma-!ritas Penghuni a"alah Mahasisa

)li*Fualitas Fe6ersihan 5 (uku Bersih

)li*Batasan Feluar Masuk Pukul 22. JIB

)li*u%lah Fa%ar /

)li*Titik F!!r"inat 5)6r*

Lintang / 3 #Q :Ru!t7)6r*

Bujur /

12 1:Q 2Ru!t7),li*

),*

),arti+le*

),se+ti!n*

)asi"e*


)h2*Menu),h2*



30


31/48


),se+ti!n*

)se+ti!n*

)h2*(!nta+t),h2*

)*=21:::a"%in 1?),*

)*=#==:=1: >a"%in 2?),*

),se+ti!n*

),asi"e*

)f!!ter*


),f!!ter*

),"i*

),6!"-*

),ht%l*

!alaman %er $osan berisikan data dari masing-masing kosan yang ditampilkan di

!alaman Utama. Di halaman ini di sajikan data secara mendetail dari kosan-kosan

tersebut. !alaman per $osan juga menggunakan )ascading #tyle #heet dalam

pembuatan !TM" nya. 5amun hanya berbeda pada ormat didalam )## nya saja.

)st-le t-e/0tet,+ss0*

hea"er se+ti!n f!!ter asi"e na arti+le figure fig+ati!n 4

"isla-5 6l!+k78

6!"- 4

+!l!r5 9::::::7



32/48

6a+kgr!un";i%age5 url>06a+kgr!un".jg0?7

6a+kgr!un";!siti!n5 +enter7

f!nt;fa%il-5 @e!rgia Ti%es serif7

line;height5 1.e%7

%argin5 78

%enjelasan #ynta )## '

)## dibuka dengan ormat >style type?@tetAcss@ dan ditutup dengan >Astyle./adi bisa disimpulkan bahwa )## adalad salah satu tipe style pada !TM". Dan

didalam ormat )## di deklarasi apa saja yang akan menggunakan style !TM".

#ebagai contoh, ormat body yang menggunakan style )##. 3ormat pada body

bisa diatur warna background, memasukkan gambar pada background, peletakan

background, style ont tulisan, dan margin body nya. #elanjutnya selain body,

dibuat juga style )## untuk wrapper, header, nav, section.courses, article, hgroup,

aside, ooter, dll.

)asi"e*


)h2*Menu),h2*




),se+ti!n*

)se+ti!n*

)h2*(!nta+t),h2*

32


33/48

)*=21:::a"%in 1?),*

)*=#==:=1: >a"%in 2?),*

),se+ti!n*

),asi"e*

%enjelasan source code '

%ada penggunaan synta aside yaitu berungsi membuat konten lain selain dari

konten halaman. 9aitu dengan menu pada !4M6 yaitu dibuat %roil )reators dan

eb unib. Dan juga dibuat )ontact yaitu agar pengunjung bisa menghubungi

nomor telon admin yang telah disediakan.

)f!!ter*


),f!!ter*

%enjelasan source code '

>ooter digunakan untuk membuat ooter pada !TM", disini isi dari ooter

tersebut adalah :copy;right U57


34/48

)arti+le*)+enter*


i"th/02


35/48

BAB III

FE&IMPULAN

3.1 Fesi%ulan

%ada akhir makalah ini, penulis akan memberikan sedikit kesimpulan tentang isi

makalah. $eberadaan 7nternet atau lebih dikenal dengan istilah dunia maya pada saat

sekarang ini merupakan bukan hal yang asing lagi bagi setiap orang melainkan telah

dikenal oleh seluruh orang hmpir diseluruh penjuru dunia . Maka dari itu dalam

pembuatan ebsite dituntut untuk lebih maju lagi dan berkembang tentunya mengikuti

perkembangan Caman.

%ara programmer saling berusaha membuat sesuatu yang lebih baru lagi yang

tentunya lebih uptudate dengan merancangkan program program yang lebih canggih,

salah satunya dengan menggunakan sspemrograman !TM". Tentunya sebelum kita

melangkah lebih maju lagi dalam pembuatan website dalam menggunakan pemrograman

tersebut kita harus mengerti terlebih dahulu apa itu !TM", bagian bagian utama dari

!TM" dan seluruh layout web dalam pemrograman !TM".

Berbagai macam bentuk layout pada pemrograman !TM" dalam mendesain

website merupakan bagian bagian yang harus diketahui, karena itu menentukan dari

hasil rancangan dalam pembuatan suatu pogramA website. &palagi dengan perkembangan

7ptek sekarang ini lebih menuntut untuk menghasilkan sesuatu program ataupun website

yang lebih menarik lagi. #ehingga para pengguna dunia maya lebih merasa tertarik dan

tentunya tidak membuat bosan dengan hasilA bentuk website atupun program tersebut.

3.2 &aran

#ebaiknya dalam penulisan makalah diberitahu secara detail ormat

penulisan nya agar mahasiswa lebih mudah dalam penulisan makalah.

35


36/48

D&3T&8 %U#T&$&

http'AAwww.w2schools.comAcssAdeault.asp

diakses pada tanggal 0E Desember 1F0G, pukul FH.FF wib

http'AAtutorial.belajarweb.netAcssAtutorial-css-dasar.html

diakses pada tanggal 0E Desember 1F0G, pukul FE.FF wib

LAMPI$AN

%enandaan pada 4pen#treetMap

36
http://www.w3schools.com/css/default.asphttp://tutorial.belajarweb.net/css/tutorial-css-dasar.htmlhttp://tutorial.belajarweb.net/css/tutorial-css-dasar.htmlhttp://www.w3schools.com/css/default.asp


37/48

#creenshot Tampilan eb

37


38/48

38


39/48

39


40/48

#creenshot #ource )ode

40


41/48

#ource )ode !ome

41


42/48

42


43/48

43


44/48

44


45/48

45


46/48

46


47/48

#ource )ode per $osan *mewakili saja+

47


48/48

TUGAS-BESAR-LINGKUNGAN-KOMPUTASI.docx

Documents

Transcript of TUGAS-BESAR-LINGKUNGAN-KOMPUTASI.docx