PEMOGRAMAN WEB

Tugas Kelompok

Anggota

Khomsatun Nurbaeti 11.11.5006

Miftahul Huda 12.11.6048

Zuhdhii L.U.K 13.11.7060

i

TAHUN AKADEMIK 2015/2016

KATA PENGANTAR

Puji syukur kehadirat Tuhan Yang Maha Kuasa atas segalalimpahan Rahmat, Inayah, Taufik dan Hinayahnya sehingga kamidapat menyelesaikan penyusunan Hardcopy ini dalam bentuk maupunisinya yang sangat sederhana.

Dalam penyusunan tugas atau materi ini, tidak sedikithambatan yang kami hadapi. Namun kami menyadari bahwa kelancarandalam penyusunan tugas ini tidak lain berkat bantuan, dorongan,dan bimbingan orang tua, dosen serta teman – teman sekalian,sehingga kendala-kendala yang kami hadapi teratasi.

Kami mengucapkan terima kasih kepada semua pihak yang telahmembantu sehingga makalah ini dapat diselesaikan tepat padawaktunya. Makalah ini masih jauh dari sempurna, oleh karena itu,kritik dan saran yang bersifat membangun sangat kami harapkandemi sempurnanya makalah ini.

ii

Yogyakarta, Mei 2015

Penyusun

DAFTAR ISI

Cover …………………………………………………………………………… i

Kata Pengantar ………………………………………………………………… ii

Daftar Isi ……………………………………………………………………….. iii

BAB I …………………………………………………………………………... 1

Pendahuluan ……………………………………………………………………. 1

BAB II ………………………………………………………………………..... 2

Penutup ………………………………………………………………………… 9

DAFTAR GAMBAR

Gambar 1.0 …………………………………………………………………….. 2

Gambar 1.1 …………………………………………………………………….. 3

iii

Gambat 1.2 …………………………………………………………………….. 3

Gambar 1.3 ……………………………………………………………………. 3

Gambar 1.4 ……………………………………………………………………. 4

Gambar 1.5 ……………………………………………………………………. 5

Gambar 1.6 ……………………………………………………………………. 5

Gambar 1.7 …………………………………………………………………… 6

Gambar 1.8 …………………………………………………………………… 6

Gambar 1.9 …………………………………………………………………… 7

Gambar 2.0 …………………………………………………………………… 7

Gambar 2.1 ………………………………………………………………….... 8

iv

Bab I

PENDAHULUAN

HTML bisa disebut bahasa yang digunakan untuk menampilkandan mengelola hypertext. Hypertext dalam HTML berarti bahwa kitadapat menuju suatu tempat, misalnya website atau halaman homepagelain, dengan cara memilih link yang biasanya digarisbawahi ataudiwakili oleh suatu gambar. Selain link ke website atau homepagehalaman lain, hypertext ini juga mengizinkan kita untuk menuju kesalah satu bagian dalam satu teks itu sendiri.

HTML terdiri dari sejumlah perintah dimana kita bisa men-setjudul, garis, table, gambar dan lain- lain yang disebut tag.Setiap tag masih dapat dilengkapi lagi oleh sejumlah attribute.

Sesuai dari tugas akhir pemograman web yaitu membenahitemplate web yang sudah kami download di themeforest.net agarbias jalan secara offline, dengan bantuan menggunakansoftware/tools berupa Notepad ++

1

2

Bab II

Template yang kami ambil bernamakan Alveera, sesuai denganarahan doen, kami mengamil dari themeforest.ne

Gambar 1.0 Tampilan di Themeforest

Disitu si pembuat mengatakan kurang lebih seperti “Alveeraadalah template halaman HTML dengan tampilan retro sedikit .Dengan combnination variasi warna yang bagus dan desain

2

menyenangkan dapat berguna baik untuk situs pribadi danprofesional “

Langkah selanjutnya yang kami lakukan dengan mengklik LivePreview, jika sudah masuk ke halamanya, klik kanan lalu Save PageAs dan pastikan file berformat .html atau bertuliskan WebpageComplete

Gambar 1.1 Tampilan Save As

Lalu kita klik Save, kemudian kita mendapatkan 1 buah folder yang berisikan beberapa file berekstensi js dan beberapa gambar, dan kita juga mendapatkan satu buah file berektensi HTML.

3

Gambar 1.2 Tampilan file/folder yang di dapat

Gambar 1.3 Tampilan isi dalam folder

Dan jika file berekstensi HTMLnya dibuka maka tampilanya akan seperti ini :

4

Gambar 1.4 Tampilan file html

Disini jika kita lihat tampilanya sangat jauh beda dengantampilan aslinya, pastinya filenya masih banyak yang kurang baikitu gambar dsb, untuk menjadikan tampilanya sama persis yangperlu kita lakukan setelah ini adalah :

Pada web aslinya kita klik kanan lalu pilih inspect element,disini kita bias mendapatkan apa saja yg belum ada pada saatkita Save Page As sebelumnya, tapi sebelumnya terlebihdahulu kita buat 3 folder dasar agar lebih mudah dalampengelompokanya, berupa folder css, js, serta images

5

Gambar 1.5 Tampilan Inspect Elements

Langkah berikutnya kita pilih bagian Sources, disini kitabias mendapatkan file-file js dan css, untuk mensave nya,kita hanya perlu ke file css/js yang mau kita ambil, lalupilih open link a new tab, darisitu kita select semua,masukan ke notepad/notepad++ masukan dengan nama file yangsama, hal ini juga berlau untuk file yang berekstensi .js

Gambar 1.6 Tampilan menu sources

6

Gambar 1.7 Tampilan isi file berekstensi .css

Selanjutnya kita pilih bagian Resource dimana pada bagian ini kita bias mengambil gambar dan font yang diperlukan, untuk penyimpananya pun sama, kita hanya pilih file yg dibutuhkan, Open Link a new tab, kemudian Save As dengan nama yang sama serta di taruh di folder yg sudah kita buat sebelumya agar memudahkan dalam pengelompokan, untuk folder font sebelumnya kita buat di dalam folder css

7

Gambar 1.8 Tampilan Menu Resource

Gambar 1.9 cara mengambil gambar

8

Selanjutnya kita buka Notepad ++, disini kita tinggalmenyesuaikan/mencocokan berdasarkan file-file yang sudahkita kelompokan tadi, seperti contoh, pada file index.html :

Gambar 2.0 Mencocokan file gambar

Disini dapat kita lihat bahwa letak gambar slider_img 1.jpgberada di dalam folder images, hal ini dapat dilihat di :

9

Gambar 2.1 lokasi gambar

Selain mencocokan gambar kita juga mencocokan lokasi filebaik berupa js dan css

Gambar 2.2 mencocokan file berekstensi css

Kita dapat melihat disini salah satu contoh penentuan file cssbernamakan style.css yang berlokasi di dalam folder css.

PENUTUPAN

Demikianlah yang dapat kami sampaikan mengenai TugasPemograman Web yang menjadi bahasan dalam makalah ini, tentunyabanyak kekurangan dan kelemahan kerena terbatasnya pengetahuankurangnya rujukan atau referensi yang kami peroleh hubungannyadengan ini Penulis banyak berharap kepada para pembaca yangbudiman memberikan kritik saran yang membangun kepada kami demisempurnanya laporan ini. Semoga makalah ini dapat bermanfaat bagikami. Amin 

10