1 LAPORAN PRAKTIKUM MONITORING BERBASIS WEB Modul I & II Instruksi Dasar dan Tag HTML Tingkat Lanjut Disusun Oleh : Fahmi Ahmad Husaeni Dosen pengampu...
LAPORAN PRAKTIKUM MONITORING BERBASIS WEB Modul I & II “Instruksi Dasar dan Tag HTML Tingkat Lanjut”
Disusun Oleh : Fahmi Ahmad Husaeni 201302025
Dosen pengampu : Deni Kurnia S.Pd, M.T
Program Studi : Teknik Mekatronika
POLITEKNIK ENJINERING INDORAMA PURWAKARTA 2015
KATA PENGANTAR Puji syukur penulis panjatkan kehadirat Allah SWT karena atas rahmat dan kuasa-Nya penulis dapat menyelesaikan laporan praktikum mata kuliah Monitoring Berbasis Web tepat pada waktunya. Laporan ini disusun berdasarkan praktikum modul 1 dan 2 yang telah dilaksanakan sebelumnya. Dalam penulisan dan pelaksanaan kegiatan praktikum penulis banyak mendapat masukan dari berbagai pihak, untuk itu penulis ingin mengucapkan terima kasih kepada segenap pihak yang telah berkontribusi kepada penulis, yaitu : 1. Bpk. Deni Kurnia S.Pd M.T selaku dosen pengampu mata kuliah Monitoring Berbasis Web. 2. Rekan-rekan program studi Teknik Mekatronika yang telah berkontribusi yang tidak bisa penulis sebutkan satu persatu. Penulis menyadari bahwasanya konten dalam laporan ini masih jauh dari kata sempurna. Hal ini dikarenakan dari ilmu dan pengalaman penulis yang masih terbatas dan berkembang. Untuk itu, penulis sangat mengharapkan kritik dan saran yang membangun demi terciptanya suatu kesempurnaan dimasa yang akan datang. Akhir kata, penulis berharap semoga apa yang penulis sampaikan dalam laporan ini dapat menjadi tambahan ilmu bagi yang membaca dan mempelajarinya.
Purwakarta, September 2015
Penulis
ii
DAFTAR ISI
HALAMAN JUDUL ................................................................................................ i KATA PENGANTAR .............................................................................................ii DAFTAR ISI.......................................................................................................... iii BAB I PENDAHULUAN ........................................................................................ 1 1.1 Latar Belakang ............................................................................................. 1 1.2 Tujuan .......................................................................................................... 1 BAB II PEMBAHASAN ......................................................................................... 2 2.1 Landasan Teori............................................................................................. 2 2.1.1 Pengertian HTML ............................................................................ 2 2.1.2 Struktur HTML ................................................................................ 2 2.2 Alat dan Bahan ............................................................................................. 2 2.3 Langkah Kerja .............................................................................................. 3 2.4 Analisa Hasil Praktikum ............................................................................ 11 BAB III PENUTUP ............................................................................................... 14 3.1 Kesimpulan ................................................................................................. 14 3.2 Tabel Penilaian ............................................................................................ 14 DAFTAR PUSTAKA ............................................................................................ 15
iii
BAB I PENDAHULUAN 1.1 Latar Belakang Pada era internet, web programming menjadi suatu bidang yang banyak digeluti oleh orang-orang baik dari kalangan profesional maupun amatir. Jaringan internet yang kian tersebar luas menjadikan banyak orang berlomba-lomba dalam mengembangkan teknologi web. Salah satu dasar dari web programming adalah HTML (Hypertext Markup Language). HTML sendiri hanya satu dari sekian bahasa untuk pembuatan web. Namun, tetap saja HTML menjadi salah satu pilihan khususnya bagi pemula. Seiring dengan perkembangan teknologi pula, HTML mengalami banyak peningkatan, baik dari segi penulisan sintaks dan fitur-fitur baru yang ditambahkan. Bahkan dengan HTML 5, browser tidak perlu lagi memasang plugin untuk memutar video seperti Flash karena fitur HTML sudah mencakup fungsi untuk memutar video. Tidak hanya untuk mengelola web secara internal, web programming juga dapat mengelola suatu perangkat diluar web, yaitu hardware. Hardware yang dimaksud adalah piranti-piranti elektronika yang support untuk web programming. Contohnya adalah kamera CCTV. Pada akhirnya, web programming juga bisa diterapkan untuk fungsi monitoring. 1.2 Tujuan Praktikum Setelah melaksanakan kegiatan praktikum ini, mahasiswa diharapkan mampu : 1. Mengetahui berbagai macam tag HTML beserta fungsinya. 2. Mengetahui berbagai macam tag HTML tingkat lanjut. 3. Membuat web berbasis HTML. 4. Menggunakan HTML Editor.
1
BAB II PEMBAHASAN 2.1 Landasan Teori 2.1.1 Pengertian HTML HTML (Hyper Text Markup Languange) adalah
bahasa pengkodeaan untuk
menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web. HTML terlihat seperti bahasa pengkodean lama, yang di awali dan diakhiri dengan kode-kode html dimana menunjukkan bagaimana keluarannya pada saat di jalankan pada sebuah web browser. 2.1.2 Struktur Dasar HTML Seperti umumnya dokumen lain, dokumen html juga terdiri dari teks-teks dan bahkan lebih dari itu. Dokumen html juga dapat mengandung gambar, suara dan video. Satu hal yang membedakan dokumen html dengan dokumen lainnya adalah adanya elemen html dan tagtagnya. Elemen dan tag html berfungsi untuk memformat atau menandai suatu bagian tertentu dari dokumen html dan juga untuk menentukan struktur bagian tersebut dalam html. Elemen dan tag inilah yang merupakan ciri utama dari sutau dokumen html. Secara garis besar, untuk menuliskan sebuah dokumen html dibutuhkan kerangka penulisan dengan tag-tag dasar seperti HEAD, BODY, TITLE dsb. Sebagai contoh, berikut ini adalah penulisan html minimal yang menggunakan tag-tag dasar tersebut. Judul Dokumen ......konten yang akan dimuat..... 2.2 Alat dan Bahan 1) Laptop / Personal Computer. 2) HTML Editor (pilih salah satu) ; Notepad (default windows), Notepad ++, Coffee Cup. 2
3) Browser (pilih salah satu) ; Mozilla Firefox, Opera, Google Chrome dll. 4) Adobe Dreamweaver CS6 (opsional; untuk pembuatan java script dan CSS) 5) Adobe Photoshop CS6 (opsional; untuk pembuatan gambar utama) 2.3 Langkah Kerja A. Uji Coba Tag Dasar 1) Buka html editor (coffee cup free html editor). 2) Setelah itu akan muncul opsi penulisan html, pilih New Blank Page. 3) Pada menu Quick Start, isikan nama dokumen. 4) Setelah nama dokumen dibuat, skip opsi lain dibawahnya. 5) Setelah itu akan muncul dokumen untitled.html dengan tag-tag default dari coffee cup. Hapus terlebih dahulu semua tag tersebut. 6) Coba ketikan tag berikut pada editor :
7) Save terlebih dahulu dan kemudian jalankan dokumen di browser default dengan menekan CTRL+F9. Lihat hasilnya.
Gambar 2.0 Tampilan Dokumen index.html Pada Browser Serta Penjelasannya B. Uji Coba Tag Lanjut 1) Buka dokumen pada kegiatan A 2) Tambahkan tag berikut pada dokumen tepat diantara :
3
3) Lihat hasilnya pada browser 4) Tambah tag pada dokumen seperti berikut :
5) Lihat hasilnya pada browser.
4
C. Perancangan WEB Dalam merancang sebuah web, pastikan skema dan tata letak web telah dibuat terlebih dahulu. Jangan buat web langsung menggunakan html karena akan membuat kreativitas dan imajinasi tentang tata letak web menjadi terbatas. Gunakanlah tag-tag yang perlu dan dianggap penting. Jika memungkinkan, tambahkan fitur jscript agar tampilan lebih atraktif. Berikut adalah langkah-langkah perancangan web berbasis html : 1) Buatlah skema tata letak / layout web terlebih dahulu. Usahakan sederhana tapi elegan.
Gambar 2.1 Tata Letak / Layout Web 2) Buatlah gambar utama menggunakan software Adobe Photoshop agar gambar bisa disesuaikan dengan tema web yang akan dibuat. Berikut adalah gambar yang dibuat menggunakan photoshop :
Gambar 2.2 Gambar Utama Pada Web 5
3) Setelah layout dan gambar utama web selesai. Bukalah editor untuk memulai merancang web. 4) Buat tag default html pada editor dan simpan dengan nama index.html. 5) Setelah itu, buat tag gambar untuk memuat gambar utama pada bagian header.
6) Untuk membuat kolom konten yang berada dibawah gambar utama, buat tag tabel dengan tipe 1 baris 3 kolom. Isi konten sesuai keinginan.
7) Setelah selesai membuat layout tabel konten, buat tag untuk menampilkan gambar utama pada bagian bawah.
8) Layout kasar web telah jadi, saatnya mengisi layout dengan konten yang akan dimuat. 9) Fokus pada tag
left side bar. Isi konten pada bagian tag
. Lihat tag dibawah :
6
Ket : Pada tag diatas, tag tabel dengan komentar dibawah form search. Lihat tag dibawah :
Ket : penambahan target=”_blank” pada tag link akan membuat dokumen terbuka di tab baru pada browser. Dokumen bisa ditambahkan sesuai keinginan. 11) Lanjutkan tag dengan membuat tag baru untuk bagian identitas client. Lihat tag dibawah :
12) Tambahkan juga form untuk komentar client tepat dibawah tag sebelumnya :
7
Ket : tag
pada bagian akhir merupakan penutup kolom left side bar. 13) Fokus pada tag
center part. Buat tag subtabel utama untuk tempat konten utama dimuat dengan tipe 1 kolom 2 baris. Baris pertama untuk judul utama konten dan baris kedua untuk daftar konten. Lihat tag dibawah ;
Ket : tag
pada baris kedua merupakan kolom kedua pada tag tabel utama pada langkah no.6. Penambahan tag valign=”top” untuk membuat konten berada pada posisi teratas sehingga walaupun konten tidak seimbang antara kolom left side bar dan center part, konten keduanya akan tetap sejajar/sebaris. Penambahan subtabel untuk daftar konten dimaksudkan agar backgound dapat diubah tanpa mempengaruhi bagian lainnya. Daftar konten dibuat satu baris saja dan dipisahkan dengan menggunakan garis horisontal . Lihat bagian bawah tag diatas berikut ini :
8
Ket : Pada tag tersebut terdapat tag link menuju dokumen “1index.html”. Maksudnya adalah isi pada daftar konten hanya bersifat rangkuman, isi selengkapnya berada pada dokumen 1index.html. Hal ini bertujuan untuk menghemat tampilan homepage. Isi dan daftar konten dapat ditambah dan dipisah dengan menggunakan tag garis horisontal. 14) Bagian terakhir dari center part adalah dengan menambahkan daftar halaman pada homepage. Hal ini bertujuan jika daftar konten yang ingin dimuat berjumlah banyak dan tidak ingin semua ditampilkan dalam satu halaman homepage. Lihat tag dibawah :
Ket : Pada tag diatas terdapat 4 link, 1 link untuk halaman berikutnya (diakses untuk step by step) dan 3 link menuju halaman yang diinginkan secara langsung. Tentunya link untuk tiap dokumen dibuat berbeda, misal link berikutnya akan mempunyai alamat yang berbeda antara halaman 1 dan 2. Hal itu karena setelah halaman 1 adalah halaman 2 dan setelah halaman 2 adalah halaman 3 dst. Link berikutnya juga harus dihilangkan pada halaman terakhir dan dari halaman kedua sampai terakhir ditambahkan link untuk halaman sebelumnya. Warna angka juga dibedakan perhalaman untuk membuat client/pengunjung mengetahui dihalaman berapa ia berada. 15) Langkah berikutnya adalah menata bagian right side bar. Pada bagian ini hanya akan diisi gambar (sementara). Jika terdapat penambahan konten, gambar bisa diganti dengan konten untuk kedepannya. Lihat tag berikut :
9
16) Langkah terakhir pada perancangan web adalah membuat daftar menu / navigasi. Agar daftar menu terlihat lebih bagus, buat menggunakan dreamweaver. 17) Bukalah Dreamweaver CS6. 18) Buat dokumen html baru. Selanjutnya klik create.
19) Pada bagian kode, buat tag tabel ukuran 100% dengan tipe 1 baris 3 kolom. Jika ingin lebih mudah, klik menu Insert > Table. 20) Atur properti seperti dibawah :
21) Kembali ke tab design, klik kolom bagian tengah table, kemudian klik Insert > Spry > Spry Menu Bar. 22) Pilih tipe horisontal.
23) Pada tab design, klik menu bar yang telah dibuat. 24) Edit konten menu bar melalui properties pada bagian bawah :
10
25) Ubah nama menu dengan mengganti tulisan pada kolom Text. 26) Konten dapat ditambah dengan mengklik ikon + dan dikurangi dengan ikon -. 27) Berikut adalah contoh menu bar yang telah diedit :
28) Untuk melihat hasil menu bar pada browser, klik tab Live.
29) Setelah selesai, copy-paste seluruh tag (kecuali tag default) ke dokumen html tepat dibawah tag yang memuat gambar utama. 30) Copy-paste juga folder SpryAssets ke folder tempat dokumen html berada agar linking css dan javascipt tidak error. 2.4 Analisa Hasil Praktikum
Pembuatan layout homepage sepenuhnya menggunakan tag tabel. Hal ini dimaksudkan untuk meminimalisir jumlah dokumen html.
Penggunaan frame dihindari karena membuat jumlah dokumen terlalu banyak. Untuk dokumen index.html saja membutuhkan setidaknya 5 file.html, yaitu untuk bagian header, footer, sidebar, center part dan tentunya index. Jumlah tersebut masih untuk halaman homepage, jika halaman web dibuat banyak maka jumlah halaman total bisa 2 kali lipat lebih banyak daripada menggunakan tabel. Tentunya hal tersebut tergantung dari desain web masing-masing.
Untuk form komentar dan identitas komentator masih belum bisa berjalan karena belum adanya database untuk menampung data dari hasil komentar.
Penggunaan CSS dan Javascript pada menu bar dibuat terpisah dengan file html. Hal ini karena code CSS dan Jscript terlalu panjang sehingga dapat menyebabkan kesulitan 11
dalam proses editing. Untuk itu, file CSS dan Jscript ditempatkan dalam suatu folder khusus bernama SpryAssets. Pemanggilan fungsi CSS dan Jscript adalah dengan menyertakan link didalam dokumen html.
Fungsi CSS pada web adalah untuk mempercantik tampilan dari menu bar. Jika dilihat tagnya, maka menu bar menggunakan tag bullet and numbering biasa. Tentunya jika link CSSnya dihilangkan, maka bentuk menu bar akan terlihat seperti tag bullet and numbering biasa.
Fungsi javascript pada web adalah untuk memberikan efek animasi drop down pada menu bar ketika pointer mouse berada diatas menu bar. Javascript dan css sendiri sudah menjadi satu paket fungsi yang dapat membuat efek drop down.
Hasil perancangan web sementara berisi 9 dokumen html.
12
Berikut adalah screenshoot dari web yang telah dibuat :
Rancangan Kasar
13
BAB III PENUTUP 3.1 Kesimpulan Tag buka dan tutup pada html tidak terlalu memperhatikan urutan (tergantung jenis html), misal tag dengan urutan dan masih tetap memberikan hasil yang sesuai. Tag tutup juga bisa tidak digunakan untuk beberapa kasus, misal untuk memberi warna kata/kalimat merah dengan tag bisa tidak ditutup dengan tag dan masih memberi hasil warna yang sesuai. Tapi hal tersebut hanya untuk testing saja. Untuk perancangan web sesungguhnya, tag tersebut perlu ditutup karena akan berdampak pada kata/kalimat setelahnya. Tag pada html tidak bersifat case sensitive, artinya tag ditulis dengan huruf kapital dan kecil sama saja dapat terbaca pada browser. Namun, menurut referensi ada juga jenis html yang bersifat case sensitive, yaitu file html dengan jenis XML. Perancangan web menggunakan html saja tidaklah cukup. Agar terlihat modis, script-script tambahan juga bisa disertakan pada tag html, misal CSS dan Javascript. Pembuatan database juga diperlukan agar web dapat menyimpan data input dari client, misal akun atau komentar. 3.2 Tabel Penilaian Praktikan
Instruktur
Capaian Keterampilan
Tanggal :
Nama : Nim
:
14
Capaian Hasil
DAFTAR PUSTAKA Astamal, Rio. 2006. Mastering Kode HTML “ebook” : Edisi Kedua. Surabaya Surya, Komarudin. 2008. Dasar-Dasar Design Web “ebook” . Suryatekno
