i
ii
iii PEMROGRAMAN WEB 1 EDISI 2 Mera Kartika Delimayanti
iv
v PEMROGRAMAN WEB 1 EDISI 2
vi Hak Cipta Sanksi Pelanggaran Pasal 113 Undang-undang Nomor 28 Tahun 2014 Tentang Hak Cipta • Setiap Orang yang dengan tanpa hak melakukan pelanggaran hak ekonomi sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf i untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 1 (satu) tahun dan/atau pidana denda paling banyak Rp. 100.000.000,00 (seratus juta rupiah). • Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf c, huruf d, huruf f, dan/atau huruf h untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 3 (tiga) tahun dan/atau pidana denda paling banyak Rp. 500.000.000,00 (lima ratus juta rupiah). • Setiap Orang yang dengan tanpa hak dan/ a tau tanpa izin Pencipta atau pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf a, huruf b, huruf e, dan/atau huruf g untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 4 (empat) tahun dan/ a tau pidana denda paling banyak Rp. 1.000.000.000,00 (satu miliar rupiah). • Setiap Orang yang memenuhi unsur sebagaimana dimaksud pada ayat (3) yang dilakukan dalam bentuk pembajakan, dipidana dengan pidana penjara paling lama 10 (sepuluh) tahun dan/atau pidana denda paling banyak Rp4.000.000.000,00 (empat miliar rupiah).
vii PEMROGRAMAN WEB 1 EDISI 2 Mera Kartika Delimayanti Penerbit PNJ Press Anggota APPTI No: 001.004.1.06.2018
viii PEMROGRAMAN WEB 1 EDISI 2 Mera Kartika Delimayanti Editor Nunung Martina, Rimsky K. Judisseno Desain Sampul Dimas Surya Perdana Tata Letak Mera Kartika Delimayanti Penerbit PNJ Press Gedung Q, Politeknik Negeri Jakarta, Jl. G.A. Siwabessy, Kampus Baru UI, Depok Cetakan Pertama, November 2021 ISBN : 978-623-7342-90-8 Hak Cipta Dilindungi Oleh Undang-Undang Dilarang mengutip atau memperbanyak sebagian atau seluruh isi buku ini tanpa izin tertulis dari penerbit.
ix PRAKATA Dengan segala kerendahan hati, penulis mengucapkan puji syukur kepada Allah SWT atas segala karunia dan berkah yang telah dilimpahkan sehingga penulis dapat menyelesaikan buku ajar ini. BukuAjar PemrogramanWeb adalahmerupakan buku pegangan bagi mahasiswa Jurusan Teknik Informatika dan Komputer, khususnya program studi D4 Teknik Informatika yang mengambil mata kuliah Pemrograman Web Dasar. Dalam proses pengerjaan buku ajar, penulis mendapatkan bantuan dari banyak pihak terutama dari JTIK, PNJ. Buku ajar ini dibuat untuk membantu mahasiswa D4 PSTI dan khalayak pembaca lainnya untuk mempelajari teknik dasar pemrograman web bagi pemula. Penulis menyadari bahwa buku ajar ”Pemrograman Web Edisi ke2” ini masih sangat jauh dari sempurna. Oleh karena itu, penulis mengharapkan saran dan kritik dari pembaca sekalian. Semoga buku ajar ini bermanfaat bagi mahasiswa dan khalayak pembaca. Depok, Oktober 2021 Penulis
x
xi DAFTAR ISI Prakata Daftar Isi Daftar Gambar Daftar Tabel BAB 1 Pengenalan Pemrograman Web BAB 2 Instalasi Tools BAB 3 HTML BAB 4 Cascading Style Sheet BAB 5 Javascript BAB 6 jQuery Daftar Pustaka Biografi Penulis ix xi xii xv 1 17 29 53 81 93 103 105
xii DAFTAR GAMBAR Gambar 1.1 Proses DNS Query Gambar 2.1 Halaman Download XAMPP Gambar 2.2 XAMPP Setup Gambar 2.3 XAMPP Components Gambar 2.4 XAMPP Installation Folder Gambar 2.5 Firewall Prompt Gambar 2.6 Finishing Setup Gambar 2.7 XAMPP Control Panel Gambar 2.8 Halaman Localhost default Gambar 2.9 Halaman Download Visual Studio Code Gambar 2.10 Instalasi VS Code Gambar 2.11 Finishing Instalasi VSCode Gambar 2.12 Jendela Editor VS Code Gambar 3.1 HTML Title Gambar 3.2 HTML Headings Gambar 3.3 Code Spacing Gambar 3.4 Line Breaks Gambar 3.5 Text Formatting Gambar 3.6 Links Gambar 3.7 Tabel Dasar Gambar 3.8 Colspan Gambar 3.9 Rowspan Gambar 3.10 HTML Pathing Gambar 3.11 Colspan Gambar 3.12 Ordered List dengan Angka Romawi Kecil Gambar 3.13 Contoh HTML Forms Gambar 3.14 IFrames 6 19 19 20 21 22 23 24 25 26 26 27 27 32 33 35 35 36 37 38 40 40 41 43 44 47 48
xiii Gambar 3.15 HTML Video Gambar 3.16 HTMLAudio Gambar 3.17 Canvas Gambar 3.18 HTML Element Relationship Gambar 4.1 Element Selector Gambar 4.2 Sintaks CSS Gambar 4.3 CSS Color Value Preset Gambar 4.4 CSS Color Values Gambar 4.5 CSS Color Alpha Values Gambar 4.6 CSS Background Color Gambar 4.7 CSS Text Color Gambar 4.8 CSS Background Image Gambar 4.9 CSS Box Model Gambar 4.10 CSS Border Gambar 4.11 CSS Border Values Gambar 4.12 CSS Padding Gambar 4.13 CSS Margin Gambar 4.14 CSS Text Color Gambar 4.15 CSS Text Alignment Gambar 4.16 CSS Text Decoration Gambar 4.17 CSS Text Decoration Values Gambar 4.18 Komparasi Jenis Font Gambar 4.19 CSS Font-Family Gambar 4.20 CSS Font-Size Gambar 4.21 CSS Table Border Gambar 4.22 CSS Border Collapse Gambar 4.23 CSS Background Color Gambar 4.24 CSS Table Gambar 4.25 Text Alignment didalam Tabel Gambar 4.26 CSS Block Element 49 50 51 52 55 56 57 57 57 58 58 59 60 61 61 62 63 64 64 65 66 67 68 69 70 70 70 71 72 73
xiv Gambar 4.27 CSS Inline Element Gambar 4.28 Display None Gambar 4.29 CSS Position Relative Gambar 4.30 CSS Position Fixed Gambar 4.31 CSS Position Absolute Gambar 4.32 CSS Float Gambar 4.33 CSS Link pseudo selector Gambar 4.34 CSS Hover pseudo selector Gambar 4.35 CSS Active pseudo selector Gambar 4.36 CSS Visited pseudo selector Gambar 5.1 Output Javascript Gambar 5.2 JS TryCatch Block Gambar 5.3 JS Validation Gambar 5.4 JS Validation Error Gambar 6.1 Tombol Download jQuery Gambar 6.2 CDN Link jQuery 74 74 75 76 77 78 79 79 79 80 85 90 92 92 93 94
xv DAFTAR TABEL Tabel 1.1 HTTP Method Tabel 1.2 HTTP Response Codes Tabel 3.1 Ordered List Type Attribute Tabel 3.2 Macam macam elemen input Tabel 4.1 Contoh Jenis-Jenis Font Tabel 5.1 Operator Javascript Tabel 6.1 jQuery Events 9 10 44 45 67 86 98
xvi
1 BAB 1 Pengenalan Pemrograman Web 1.1 Pengantar World Wide Web Kehidupan sebagian besar penduduk negara-negara industri, serta banyak di negara-negara industri, telah berubah selamanya dengan munculnya World Wide Web. Meskipun transformasi ini memiliki beberapa kelemahan—misalnya, akses yang lebih mudah ke konten pornografi dan perjudian dan kemudahan penyebaran ide-ide destruktif, perubahan yang diraih World Wide Web sangat positif. Banyak yang menggunakan Internet danWorldWideWeb setiap hari, berkomunikasi dengan teman, kerabat, dan rekan bisnis melalui surat elektronik dan situs jejaring sosial, berbelanja, dan menggali variasi dan jumlah informasi yang tidak terbatas. Dari waktu pertunjukan bioskop, hingga harga kamar hotel di kota-kota di belahan dunia lain, hingga sejarah dan karakteristik budaya beberapa masyarakat kecil di ujung dunia. Dalam beberapa tahun terakhir, jejaring sosial telah digunakan secara efektif untuk mengatur demonstrasi sosial dan politik, dan bahkan revolusi. Membangun perangkat lunak dan data yang menyediakan akses ke semua informasi ini memerlukan pengetahuan tentang beberapa teknologi yang berbeda, seperti bahasa markup (markup language) dan bahasa meta-markup (meta-markup language), serta keterampilan pemrograman dalam berbagai bahasa pemrograman yang berbeda, beberapa Bahasa pemrograman dan Bahasa markup didesain khusus untuk World Wide Web dan beberapa dirancang untuk komputasi dengan tujuan umum.
2 1.2 Internet dalam kulit kacang Seluruh bahasan yang ada di buku ini berkaitan dengan Internet. Karena itu, mari kita mulai dengan pengenalan singkat tentang internet 1.2.1 Sejarah Pada 1960-an, Departemen Pertahanan Amerika Serikat tertarik untuk mengembangkan jaringan komputer berskala besar. Tujuan dari jaringan ini adalah komunikasi, berbagi program, dan akses komputer jarak jauh untuk para peneliti yang mengerjakan kontrak terkait dengan pertahanan. Karena dibiayai oleh ARPA (Advanced Research Projects Agency) maka jaringan tersebut diberi nama ARPAnet. Terlepas dari niat awal Departemen Pertahanan AS, pada awalnya penggunaan ARPAnet adalah untuk komunikasi berbasis teks sederhana melalui surat elektronik. Karena ARPAnet hanya tersedia untuk laboratorium dan universitas yang melakukan penelitian yang didanaiARPA, sebagian besar lembaga pendidikan tidak terhubung. ARPA berganti nama menjadi Defense Advanced Research Projects Agency (DARPA) pada tahun 1972. 1.2.2 Apa Itu Internet? Internet adalah sekumpulan komputer yang terhubung dalam jaringan komunikasi. Komputer-komputer ini memiliki berbagai spesifikasi, konfigurasi, dan pabrikan. Bahkan, beberapa perangkat yang terhubung ke Internet (seperti printer) bukanlah komputer sama sekali. Inovasi yang memungkinkan semua perangkat yang beragam ini untuk berkomunikasi satu sama lain adalah satu protokol tingkat rendah bernama Transmission Control Protocol/ Internet Protocol (TCP/IP). TCP/IP menjadi standar untuk koneksi jaringan komputer
3 pada tahun 1982. TCP/IP dapat digunakan secara langsung untuk memungkinkan program di satu komputer berkomunikasi dengan program di komputer lain melalui Internet. Namun, dalam kebanyakan kasus, protokol tingkat yang lebih tinggi berjalan di atas TCP/IP. Namun demikian, TCP/IP-lah yang menyediakan antarmuka tingkat rendah yang memungkinkan sebagian besar komputer (dan perangkat lain) yang terhubung ke Internet berkomunikasi. Daripada menghubungkan setiap komputer di Internet secara langsung ke setiap komputer lain di Internet, biasanya komputer individu dalam suatu organisasi terhubung satu sama lain dalam jaringan lokal. Satu node di jaringan lokal ini secara fisik terhubung ke Internet. Jadi, Internet sebenarnya adalah jaringan didalam jaringan, bukan komputer didalam jaringan. Semua perangkat yang terhubung ke Internet harus dapat diidentifikasi secara unik. 1.2.3 Internet Protocol Address (IPAddress) Untuk orang awam, node Internet diidentifikasi dengan nama; untuk komputer, node Internet diidentifikasi dengan alamat numerik. Internet Protocol Address (IP) dari mesin yang terhubung ke Internet adalah nomor 32-bit yang unik. Alamat IP biasanya ditulis dengan empat angka 8-bit, dipisahkan oleh titik. Keempat bagian tersebut digunakan secara terpisah oleh Routing Computer untuk memutuskan ke mana paket internet harus pergi selanjutnya untuk mencapai tujuannya. Sebuah Organisasi dapat memiliki blok IP, yang pada selanjutnya dapat digunakan ke perangkat mereka yang membutuhkan akses Internet—yang sekarang mencakup hampir semua komputer. Misalnya, sebuah organisasi kecil dapat diberikan 256 alamat IP, seperti 191.57.126.0 hingga 191.57.126.255. Organisasi yang sangat besar, seperti Departemen Pertahanan, dapat diberikan 16
4 juta alamat IP, yang mencakup alamat IP dengan satu nomor 8-bit pertama tertentu, seperti 12.0.0.0 hingga 12.255.255.255. Meskipun orang awam hampir selalu mengetikkan nama domain ke browser mereka, IP juga dapat digunakan untuk mengakses sebuah node Internet. Misalnya, IP untuk Universitas Indonesia (ui.ac.id) adalah 152.118.24.181. Jadi, jika browser diarahkan ke http://152.118.24.181/, maka browser akan terhubung ke situs web Universitas Indonesia. Pada akhir tahun 1998, standar IP baru, IPv6, telah disetujui, meskipun masih belum banyak digunakan. Perubahan yang paling signifikan adalah memperluas ukuran alamat dari 32 bit menjadi 128 bit. Ini adalah perubahan yang akan segera menjadi penting karena jumlah alamat IP yang tersisa dan tidak digunakan semakin berkurang dengan cepat. 1.2.4 Nama Domain Karena manusia mengalami kesulitan dalam menangani dan mengingat angka, mesin di Internet juga memiliki nama tekstual. Nama-nama ini dimulai dengan nama mesin host, diikuti dengan koleksi mesin yang semakin besar, yang disebut domain. Mungkin ada dua, tiga, atau lebih nama domain. Nama domain pertama, yang muncul tepat di sebelah kanan nama host, adalah domain yang menjadi bagian dari host tersebut. Nama domain kedua memberikan domain di mana domain pertama menjadi bagiannya. Nama domain terakhir mengidentifikasi jenis organisasi tempat host tinggal, yang merupakan domain terbesar dalam nama situs. Untuk organisasi yang berada Amerika Serikat, .edu adalah ekstensi untuk lembaga pendidikan, .com menentukan perusahaan komersil, .gov digunakan untuk pemerintah AS, dan .org digunakan untuk banyak jenis organisasi lainnya. Di negara lain, domain terbesar
5 sering kali merupakan singkatan untuk negara—misalnya, se digunakan untuk Swedia, dan kz digunakan untuk Kazakhstan, id digunakan untuk indoensia Pertimbangkan alamat contoh ini: tik.pnj.ac.id Di sini, tik adalah nama host dan pnj adalah domain yang merupakan bagian dari domain *.ac.id. Nama host dan semua nama domain bersama-sama disebut fully qualified domain name Karena alamat IP adalah alamat yang digunakan secara internal oleh Internet, fully qualified domain name yang diberikan oleh pengguna browser, harus dikonversi ke alamat IP sebelum pesan dapat dikirim melalui internet ke tujuan. Konversi ini dilakukan oleh sistem perangkat lunak yang disebut name server, yang mengimplementasikan Domain Name System (DNS). Name server melayani kumpulan mesin di Internet dan dioperasikan oleh organisasi yang bertanggung jawab atas bagian Internet yang terhubung dengan mesin tersebut. Semua permintaan dokumen dari browser diarahkan ke name server terdekat. Jika name server dapat mengonversi nama domain ke alamat IP, maka name server akan melakukannya. Jika tidak bisa, name server mengirimkan nama domain ke name server lain untuk di konversi. (Sebesta, 2011) Seperti alamat IP, fully qualified domain name harus unik. Gambar 1.1 menunjukkan bagaimana nama domain yang sepenuhnya memenuhi syarat yang diminta oleh browser diterjemahkan ke dalam IP sebelum dirutekan ke server Web yang sesuai.
6 Gambar 1.1 Proses DNS Query (sumber: researchgate.com) 1.2.5 Web Browser Ketika dua komputer berkomunikasi melalui beberapa jaringan, satu bertindak sebagai klien dan yang lain sebagai server. Klien memulai komunikasi, yang seringkali merupakan permintaan informasi yang disimpan di server, yang kemudian mengirimkan informasi itu kembali ke klien. Web, serta banyak sistem lainnya, beroperasi dalam konfigurasi client-server ini. Dokumen yang disediakan oleh server di Web diminta oleh browser, yang merupakan program yang berjalan di mesin klien. Mereka disebut browser karena memungkinkan pengguna untuk menelusuri sumber daya yang tersedia di server. Browser pertama berbasis teks—mereka tidak mampu menampilkan informasi grafis, juga tidak memiliki antarmuka pengguna grafis. Keterbatasan ini secara efektif membatasi pertumbuhan Web. Pada awal 1993, segalanya berubah dengan dirilisnya Mosaic, browser pertama dengan antarmuka grafis (GUI). Mosaic dikembangkan di National Center for Supercomputer Applications (NCSA) di University of Illinois. Antarmuka Mosaic menyediakan
7 akses mudah ke Web bagi pengguna yang bukan ilmuwan atau pengembang perangkat lunak. Rilis pertama Mosaic berjalan pada sistemUNIXmenggunakan sistemXWindow. Pada akhir 1993, versi Mosaic untuk Apple Macintosh dan sistem Microsoft Windows telah dirilis. Akhirnya, pengguna komputer yang terhubung ke Internet di seluruh dunia memiliki cara untuk mengakses apa pun di Web di mana pun di dunia. Hasil dari kekuatan dan kenyamanan ini adalah pertumbuhan eksplosif dalam penggunaan Web. Browser adalah klien di Web karena memulai komunikasi dengan server, yang menunggu permintaan dari klien sebelum melakukan apa pun. Dalam kasus yang paling sederhana, browser meminta dokumen statis dari server. Server menempatkan dokumen yang dapat disajikan dan mengirimkannya ke browser, yang menampilkannya untuk pengguna. Namun, situasi yang lebih rumit sering terjadi. Misalnya, server dapat menyediakan dokumen yang meminta input dari pengguna melalui browser. Setelah pengguna memberikan input yang diminta, itu ditransmisikan dari browser ke server, yang dapat menggunakan input untuk melakukan beberapa perhitungan dan kemudian mengembalikan dokumen baru ke browser untuk memberi tahu pengguna tentang hasil perhitungan. Terkadang browser secara langsung meminta eksekusi program yang tersimpan di server, dan hasil eksekusi program tersebut akan ditampilkan di browser. Meskipun Web mendukung berbagai protokol, yang paling umum digunakan adalah HTTP (atau HTTPS). HTTP menyediakan bentuk standar komunikasi antara browser dan server Web. Browser yang paling umum digunakan adalah Google Chrome, Firefox, dan Internet Explorer (atau Edge). Semua kecuali Internet Explorer dapat digunakan di berbagai macam platform, termasuk Windows, Mac OS, dan Linux, Android dan iOS. Beberapa browser lain tersedia, termasuk Opera dan Safari Apple. Namun, karena sebagian
8 besar browser yang sekarang digunakan adalah Chrome, Safari, atau Firefox, dalam buku ini kami berfokus pada browser tersebut. 1.2.6 Hypertext Transfer Protocol Semua transaksi komunikasiWeb menggunakan protokol yang sama: Hypertext Transfer Protocol (HTTP). Versi HTTP Terakhir saat ini adalah 2, Namun yang banyak dipakai adalah HTTP versi 1.1 yang secara resmi didefinisikan sebagai RFC 2616, yang disetujui pada Juni 1999. RFC 2616 tersedia di situs Web untuk World Wide Web Consortium (W3C), http://www .w3.org. Bagian ini memberikan pengantar singkat tentang HTTP. HTTP terdiri dari dua fase: request dan response. Setiap komunikasi HTTP (request atau response) antara browser dan server Web terdiri dari dua bagian: header dan body. Header berisi informasi tentang komunikasi; body berisi data komunikasi, jika ada. 1. Request Phase Bentuk umum permintaan HTTP adalah sebagai berikut: • Method, domain dari URL, dan versi HTTP • Message Header • Blank Line (Escape character /r /n, dsj.) • Message Body Berikut merupakan contoh HTTP Request : GET /beli.html HTTP/1.1 Hanya ada beberapa Method permintaan yang sudah ditentukan oleh HTTP, dan bahkan lebih sedikit lagi yang biasanya digunakan. Tabel 1.1 mencantumkan metode yang paling umum digunakan.
9 Tabel 1.1 HTTP Method HTTP Method Penggunaan GET Mengembalikan isi dari dokumen tertentu HEAD Mengembalikan informasi header untuk dokumen tertentu POST Mengeksekusi dokumen tertentu, menggunakan data terlampir PUT Menggantikan dokumen tertentu dengan data terlampir DELETE Menghapus dokumen tertentu di antara HTTP Method yang diberikan pada Tabel diatas, GET dan POST adalah yang paling sering digunakan. POST awalnya dirancang untuk tugas-tugas seperti memposting artikel berita ke blog. Penggunaan POST yang paling umum sekarang adalah mengirim data formulir dari browser ke server, bersama dengan permintaan untuk menjalankan program yang ada di server yang akan memproses data. 2. Response Phase Bentuk umum response HTTP adalah sebagai berikut: • HTTP Status (404, 200, 500, dll.) • Response Header • Blank Line • Response Body Status kode HTML memiliki digit pertama 1, 2, 3, 4 dan 5. Arti dari status kode HTML adalah Sebagai Berikut :
10 Tabel 1.2 HTTP Response Codes Digit Pertama Kategori Response 1 (100, 101, 102, 103) Informasional 2 (200, 2xx) Sukses (Dipakai ketika HTTP berhasil menerima dan merespon request) 3 (3xx) Redirection (Dipakai ketika resource yang ada di server sudah dialihkan ke alamat yang lain) 4 (401,404, 4xx) Client Error (Dipakai ketika client mengirimkan request yang tidak benar seperti 404 Not Found) 5 (500, 5xx) Server Error (Dipakai ketika server telah menerima request dengan baik, tapi terjadi error saat memproses request tersebut seperti 500 Internal Server error) Untuk mempelajari response code dari HTTP, kunjungi https:// developer.mozilla.org/en-US/docs/Web/HTTP/Status Berikut merupakan contoh sebuah HTTP Response Header : HTTP/1.1 200 OK Date: Sat, 25 July 2009 22:15:11 GMT Server: Apache/2.2.3 (CentOS) Last-modified: Tues, 18 May 2004 16:38:38 GMT Accept: text/html Content-length: 364 Connection: closed Content-type: text/html, charset=UTF-8
11 1.2.7 The Programmer’s Swiss Army Knife Bagian ini memberikan gambaran umum tentang alat yang paling umum digunakan dalam pemrograman Web—ada yang merupakan bahasa pemrograman, ada pula yang tidak. Alat yang dibahas adalah HTML, bahasa markup, bersama dengan beberapa high level markup language; XML, yang merupakan markup language; JavaScript, PHP, dan Ruby, yang merupakan bahasa pemrograman; JSF, ASP. NET, dan Rails, yang merupakan kerangka kerja pengembangan untuk sistem berbasis Web; Flash, teknologi untuk membuat dan menampilkan grafik dan animasi dalam dokumen HTML (Sudah tidak didukung oleh browser modern); dan Ajax, sebuah teknologi Web yang menggunakan JavaScript dan XML. Program dan script web dibagi menjadi dua kategori — sisi klien dan sisi server kategori tersebut dibuat berdasarkan dimana script tersebut dijalankan, di browser, atau di web server. HTML dan XML adalah bahasa sisi klien; PHP dan Ruby adalah bahasa sisi server; JavaScript paling sering digunakan untuk bahasa sisi klien, meskipun dapat digunakan untuk keduanya. Kita mulai dengan alat paling dasar: HTML. HTML Pertama-tama, penting untuk disadari bahwa HTML bukanlah bahasa pemrograman—HTML tidak dapat digunakan untuk komputasi. Tujuannya adalah untuk menggambarkan desain dan tata letak dokumen yang akan ditampilkan oleh browser. Kata markup berasal dari dunia penerbitan, di mana markup digunakan untuk menggambarkan apa yang dilakukan organisasi penerbitan dengan sebuah manuskrip untuk menentukan bagaimana teks, grafik, dan elemen lain dalam buku akan muncul dalam bentuk cetak atau print. HTML bukanlah bahasa markup pertama yang digunakan dengan
12 komputer. TeX dan LaTeX adalah bahasa markup lama untuk digunakan dengan teks; Kedua Bahasa tersebut sekarang digunakan terutama untuk menentukan bagaimana ekspresi dan rumus matematika akan muncul di media cetak. Dokumen HTML adalah campuran konten dan kontrol. Kontrol ditentukan oleh tag HTML. Nama tag menentukan kategori kontennya. Sebagian besar tag HTML terdiri dari sepasang syntax yang digunakan untuk membatasi konten tertentu. Sepasang tag dan konten yang ada didalam tag tersebut bersama-sama disebut elemen. Misalnya, elemen paragraf menetapkan bahwa kontennya, yang muncul di antara tag pembuka, <p>, dan tag penutup, </p>, adalah paragraf. Browser memiliki gaya default (font, gaya font, ukuran font, dan sebagainya) untuk paragraf, yang digunakan untuk menampilkan konten elemen paragraf. Beberapa tag menyertakan spesifikasi atribut yang menyediakan beberapa informasi tambahan untuk browser. Dalam contoh berikut, atribut src menentukan lokasi konten gambar tag img: <img src = “logo.jpg”/> Dalam hal ini, dokumen gambar yang disimpan dalam file logo.jpg akan diperlihatkan pada posisi dalam dokumen di mana tag tersebut muncul. Javascript JavaScript adalah bahasa scripting sisi klien yang kegunaan utamanya dalam pemrograman Web adalah untuk memvalidasi data formulir, untuk membangun dokumen HTML yang mendukung AJAX dan untuk membuat dokumen HTML dinamis. Nama JavaScript sangat keliru, karena hubungan antara Java dan JavaScript sangatlah lemah sekali, kecuali untuk beberapa sintaks. Salah satu perbedaan terpenting antara JavaScript dan bahasa pemrograman yang paling umum adalah bahwa JavaScript diketik secara dinamis. Desain tipe
13 ini kebalikan dari high level programming language seperti C++ dan Java yang membutuhkan compiler untuk menjalankan program. “Program” JavaScript biasanya tertanam dalam dokumen HTML, yang diunduh dari server Web ketika diminta oleh browser. Kode JavaScript dalam dokumen HTML akan dijalankan di browser pada klien. Salah satu aplikasi JavaScript yang paling penting adalah membuat dan memodifikasi dokumen HTML secara dinamis. JavaScript mendefinisikan hierarki objek yang cocok dengan model hierarki dokumen HTML. Elemen elemen dokumen HTML juga dapat diakses melalui objek ini, dan memungkinkan untukmengubah data, atau tampilan untuk dokumen dinamis. Cascading Style Sheet (CSS) Cascading Style Sheets (CSS) adalah bahasa style sheet yang digunakan untuk menggambarkan presentasi dokumen yang ditulis dalambahasa markup seperti HTML. CSS adalah Bahasa yang umum digunakan dalam pengembangan World Wide Web, di samping HTML dan JavaScript. CSS dirancang untuk memungkinkan pemisahan presentasi dan konten, termasuk tata letak, warna, dan font. Pemisahan ini dapat meningkatkan aksesibilitas konten, memberikan lebih banyak fleksibilitas dan kontrol dalam spesifikasi karakteristik presentasi, memungkinkan beberapa halaman web untuk berbagi style yang sama dengan menentukan CSS yang relevan dalam file .css terpisah. Hal ini mengurangi kompleksitas dan pengulangan dalam konten struktural serta memungkinkan file .css yang akan di-cache untuk meningkatkan kecepatan loading halaman antara halaman yang berbagi file dan pemformatannya. Pemisahan pemformatan dan konten juga memungkinkan untuk menampilkan halaman HTML yang sama dengan style yang berbeda
14 untuk metode rendering yang berbeda, seperti di layer (monitor, ponsel, dll.), di cetak (printer), ataupun dengan suara (melalui browser atau screenreader), bahkan di Perangkat berbasis Tactile Braille. CSS juga memiliki aturan untuk pemformatan alternatif jika konten diakses di perangkat seluler. 1.2.8 Text Editor Dokumen HTML, CSS, dan JS dapat dibuat dengan editor teks apapun. Jika Anda menggunakan Sistem Operasi Windows, Anda dapat menggunakan Notepad untuk membuat dokumen web, namun ada beberapa tools yang dapat memudahkan Anda untuk menulis dan membuat dokumen HTML; Ada dua jenis alat yang dapat menyederhanakan tugas ini: Code editor dan editor What-You-See Is-What-You-Get (WYSIWYG). Code Editor menyediakan pintasan untuk menghasilkan tag berulang seperti yang digunakan untuk membuat baris tabel. Code editor juga menyediakan pemeriksa ejaan (spell checker) dan pemeriksa syntax (syntax checker), dan mereka dapat memberi kode warna pada berbagai macam tag ataupun syntax di tampilan layar untuk membuat kode Anda lebih mudah dibaca dan diedit. Alat yang lain untuk membuat dokumen HTML adalah editor WYSIWYG.DenganmenggunakaneditorWYSIWYG, penulis dapat melihat dokumen kusut yang dijelaskan oleh HTML saat menulis kode HTML. Editor WYSIWYG sangat berguna bagi desainer web yang ingin membuat dokumen sederhana tanpa mempelajari HTML dan bagi pengguna yang ingin membuat prototipe tampilan dokumen. Namun, editor ini terkadang menghasilkan HTML berkualitas rendah. Dalam beberapa kasus, mereka membuat tag-tag yang tidak akan dikenali oleh beberapa browser. Dalam buku ini, kami menyarankan Anda untuk memakai Code
15 editor agar Anda dapat memahami syntax dan tag yang ada dalam HTML, CSS, dan JS. Beberapa diantara kode editor yang sering dipakai adalah; Microsoft Visual Studio Code, Sublime Text, Notepad++, dan ATOM. (Sebesta, 2011)
16
17 BAB 2 Instalasi Tools Dalam BAB ini, kita akan melakukan instalasi XAMPP untuk membantu pembelajaran dan pengembangan web kedepannya. 2.1 XAMPP XAMPP adalah aplikasi yang digunakan untuk kompilasi software software untuk pengembangan web. XAMPP adalah akronim, dengan setiap huruf mewakili salah satu dari lima komponen utama dari XAMPP. Paket instalasi perangkat lunak ini berisi server web Apache, sistem manajemen basis data relasional MySQL (atau MariaDB), dan bahasa skrip Perl dan PHP. Sementara huruf X diawal adalah “Cross Platform” (X-Platform) berarti XAMPP dapat diinstall di berbagai macam system operasi. • Apache: web server open-source Apache adalah web server yang paling banyak digunakan di seluruh dunia untuk pengiriman konten web. Web server disediakan sebagai perangkat lunak open-source oleh Apache Software Foundation. • MySQL/MariaDB: XAMPP berisi salah satu sistem manajemen basis data relasional (Relational Database Management System – RDBMS) paling populer di dunia. Dalam kombinasi dengan web server Apache dan bahasa scripting PHP, MySQL menawarkan penyimpanan data untuk pembuatan web dinamis. Versi XAMPP saat ini telah menggantikan MySQL dengan MariaDB (versi MySQL yang dikembangkan komunitas, dibuat oleh pengembang asli). • PHP: bahasa pemrograman sisi server PHP untuk membuat situs web atau aplikasi dinamis. PHP dapat diinstal pada semua platform dan mendukung sejumlah sistem database yang
18 beragam. • Perl: bahasa scripting Perl digunakan dalam administrasi sistem, pengembangan web, dan pemrograman jaringan. Seperti PHP, Perl juga memungkinkan pengguna untuk memprogram aplikasi web dinamis. Di samping komponen inti ini, distribusi Apache yang gratis digunakan ini berisi beberapa alat berguna lainnya, yang bervariasi tergantung pada sistem operasi. Alat-alat ini termasuk Mail Server Mercury, Database administration system phpMyAdmin, Web Analytic Webalizer, OpenSSL, dan Apache Tomcat, dan server FTP FileZilla atau ProFTPd. Server XAMPP dapat diinstal dan digunakan dengan satu file yang dapat didownload dan dieksekusi dengan cepat dan mudah, berfungsi sebagai server testing lokal untuk Linux, Windows, dan Mac OS X. Paket perangkat lunak berisi komponen yang sama yang ditemukan pada server web umum. Developer memiliki kesempatan untuk menguji website mereka secara lokal dan mentransfernya dengan mudah ke server produksi. Namun XAMPP tidak cocok digunakan sebagai server publik, karena banyak fitur keamanan yang sengaja ditinggalkan untuk mempermudah dan mempercepat pengujian system lokal. Instalasi XAMPP 1. XAMPP dapat didownload di website apache friends : https:// www.apachefriends.org/download.html Anda dapat mengunduh versi yang paling baru pada halaman ini.
19 Gambar 2.1 Halaman Download XAMPP 2. Setelah download. jalankan file .exe, wizard instalasi XAMPP akan muncul secara otomatis. Klik ‘Next’ untuk mengonfigurasi pengaturan instalasi. Gambar 2.2 XAMPP Setup
20 3. Di bawah ‘Choose Component’, Anda memiliki opsi untuk mengecualikan komponen individual dari paket perangkat lunak XAMPP dari instalasi. Tetapi untuk server pengujian lokal lengkap, kami sarankan Anda menginstal menggunakan pengaturan standar dan semua komponen yang tersedia. Setelah menentukan pilihan Anda, klik ‘Next’. Gambar 2.3 XAMPP Components 4. Pada langkah berikutnya, Anda memiliki kesempatan untuk memilih di mana Anda ingin menginstal paket perangkat lunak XAMPP. JikaAnda memilih pengaturan standar, maka folder dengan nama XAMPP akan dibuat di bawah C:\ untuk Anda. Setelah Anda memilih lokasi, klik ‘Next’.
21 Gambar 2.4 XAMPP Installation Folder 5. Setelah semua preferensi yang disebutkan di sudah dilakukan klik ‘Next’ untuk memulai instalasi. Instalasi akan mengekstrak dan menginstal komponen yang dipilih dan menyimpannya ke direktori yang ditentukan. Proses ini dapat memakan waktu beberapa menit secara total 6. FirewallAnda dapat mengganggu proses instalasi untukmemblokir beberapa komponen XAMPP. Gunakan kotak centang yang sesuai untuk mengaktifkan komunikasi antara server Apache dan jaringan pribadi atau jaringan kelas Anda. Ingatlah bahwa membuat server XAMPPAnda tersedia untuk jaringan publik tidak disarankan.
22 Gambar 2.5 Firewall Prompt 7. Setelah selesai, Anda dapat menutup wizard pengaturan dengan mengklik ‘Finsih’. Centang kotak opsi untuk membuka XAMPP Control Panel setelah proses instalasi selesai.
23 Gambar 2.6 Finishing Setup 8. Untuk menjalankan server, Kita dapat menekan tombol ‘Start’ disamping nama komponen yang dijalankan. Untuk menjalankan server web apache, dan server RDBMS MySQL tekan tombol start disamping Apache dan MySQL. Jika sukses, maka warna latar belakang pada nama komponen yang kita jalankan akan berubah menjadi warna hijau
24 Gambar 2.7 XAMPP Control Panel 9. Buka browser dan ketik http://localhost pada address bar browser Anda, dan halaman berikut akan muncul.
25 Gambar 2.8 Halaman Localhost default Untuk menyimpan file file Latihan dan contoh kode yang ada di buku ini, Anda dapat menggunakan folder htdocs pada folder instalasi XAMPP Anda (Default: C:\xampp\htdocs) dan mengaksesnya dengan menggunakan nama file. Misalnya, jika Anda menyimpan file Latihan Anda di C:\xampp\htdocs\latihan.html, Anda dapat mengaksesnya di browser dengan mengakses http://localhost/ latihan.html di browser Anda. 2.1 Visual Studio Code Visual Studio Code adalah aplikasi editor kode yang di kembangkan oleh microsoft. Aplikasi ini dapat berjalan di platform Windows, Linux dan MacOS. Merupakan salah satu kode editor yang banyak di gunakan di karenakan tampilannya yang simple serta memiliki
26 fitur yang cukup lengkap. Download dan Install Visual Studio Code 1. Pertama kita harus download terlebih dahulu file intaler Visual Studio Code melalui situs resminya https://code.visualstudio.com/ Gambar 2.9 Halaman Download Visual Studio Code 2. Setelah selesai, lanjutkan instalasi visual studio code (klik next hingga selesai) Gambar 2.10 Instalasi VS Code
27 3. Setelah selesai menginstall, klik finish dan jendela visual studio code akan muncul Gambar 2.11 Finishing Instalasi VSCode Gambar 2.12 Jendela Editor VS Code
28
29 BAB 3 HTML HTML adalah bahasa markup, yang berarti digunakan untuk menentukan bagian dari dokumen untuk menunjukkan bagaimana dokumen harus tampil di layar. HTML didefinisikan dengan bahasa meta-markup, Standard Generalized Markup Language (SGML), SGML adalah notasi standar Organisasi Standar Internasional (ISO) untuk menjelaskan bahasa format (formatting language). HTML dirancang untuk menentukan struktur dokumen pada tingkat yang lebih tinggi dan lebih abstrak, diperlukan karena dokumen yang ditentukan HTML harus dapat ditampilkan pada berbagai sistem komputer menggunakan browser yang berbeda-beda. 3.1 Syntax Dasar Sintaks dasar HTML disebut tag. Secara umum, tag digunakan untuk menentukan kategori konten. Untuk setiap jenis tag, browser memiliki spesifikasi presentasi default untuk menampilkan konten yang ditentukan. Sintaks tag adalah nama tag yang dikelilingi oleh tanda kurung siku (< dan >). Nama tag biasanya ditulis dengan huruf kecil. Tags Sebagian besar tag harus ditulis berpasangan: tag pembuka dan tag penutup. Nama tag penutup, sama dengan tag pembuka namun menggunakan garis miring di awal. Misalnya, jika nama tag adalah p, tag penutupnya adalah </p>. Seluruh yang muncul di antara tag dan tag penutupnya adalah isi dari tag tersebut. Tampilan browser dari dokumen HTMLmenunjukkan konten dari semua tag dokumen; itu adalah informasi dokumen dimaksudkan untuk menggambarkan.
30 Tidak semua tag dapat memiliki konten. Tag pembuka dan tag penutupnya bersama-sama menentukan wadah untuk konten yang dilampirkannya. Wadah dan isinya bersama-sama disebut elemen. Sebagai contoh, perhatikan elemen berikut: <p>i ni adal ah sepucuk t eks</ p> Atribut Atribut digunakan untuk menentukan beberapa properti dari sebuah tag, ditulis di antara nama tag pembuka dan tanda kurung siku. Mereka ditentukan dalam bentuk kata kunci, yang berarti bahwa nama atribut diikuti dengan tanda sama dengan dan nilai atribut. Nama atribut, seperti nama tag, ditulis dalam huruf kecil. Nilai atribut harus dipisahkan dengan tanda kutip ganda. Akan ada banyak contoh atribut dalam penulisan kode di bab ini. Berikut merupakan contoh attribut title di HTML: <p t i t l e=" par agr af 1" >i ni adal ah sepucuk t eks</ p> Struktur Dokumen HTML Baris pertama dari setiap dokumen HTML adalah perintah DOCTYPE, yang menentukan: Definisi Jenis Dokumen ( Document Type Declaration - DTD) SGML tertentu. Untuk HTML, deklarasi ini hanyalah sebagai berikut: <! DOCTYPE ht ml > Sebuah dokumen HTML harus menyertakan empat tag <html>, <head>, <title>, dan <body>. Tag <html> mengidentifikasi elemen akar dokumen. Jadi, dokumen HTML selalu memiliki tag <html> yang mengikuti perintah DOCTYPE dan selalu diakhiri dengan tag html penutup, </html>. Elemen html menyertakan atribut, lang, yang menentukan bahasa di mana dokumen ditulis, seperti yang ditunjukkan pada elemen berikut:
31 <ht ml l ang=" en" > Dalam contoh ini, bahasa ditentukan sebagai “en”, yang berarti bahasa Inggris. Sebuah dokumen HTML terdiri dari dua bagian, head dan body. Elemen head memberikan informasi tentang dokumen tetapi tidak memberikan konten yang ada didalam dokumen. Elemen head selalu berisi dua elemen sederhana, elemen title dan elemen meta. Elemen meta digunakan untuk memberikan informasi tambahan tentang suatu dokumen. Meta tidak memiliki konten; melainkan, semua informasi yang diberikan ditentukan dengan atribut. Minimal, meta tag menentukan karakter set (charset) yang digunakan untuk menulis dokumen. Kumpulan karakter set internasional paling populer yang digunakan untuk Web adalah Format Transformasi Unicode 8-bit (UTF-8). Set karakter ini menggunakan dari 1 byte hingga 6 byte untuk mewakili karakter, tetapi kompatibel dengan set karakter ASCII. Berikut ini adalah elemen meta yang diperlukan: <met a char set =" UTF- 8" / > Meta adalah salah satu tag elemen yang tidak memerlukan tag penutup. Garis miring di akhir elemen ini menunjukkan bahwa elemen meta tidak memiliki tag penutup. Konten elemen title ditampilkan oleh browser di bagian atas tab browser. Body dokumen menyediakan konten didalam dokumen. Berikut ini adalah kerangka yang menggambarkan struktur dasar HTML:
32 <! DOCTYPE ht ml > <ht ml l ang=" en" > <head> <met a char set =" UTF- 8" > <t i t l e>Nama Dokumen</ t i t l e> </ head> <body> </ body> </ ht ml > Jika dijalankan di dalam browser, maka akan terlihat seperti berikut : Gambar 3.1 HTML Title Dapat dilihat bahwa konten yang ada diantara tag title ditampilkan di tab browser. Perhatikan bahwa kita menggunakan pola pemformatan sederhana untuk dokumen, mirip dengan apa yang sering digunakan untuk program. Setiap kali elemen bersarang di dalam elemen lain sebelumnya, elemen tersebut kita pisahkan dalam level dengan menggunakan spasi/tab. Dalam buku ini, kita akan mengindentasi elemen bersarang dengan menggunakan tab dua spasi, hal ini dilakukan agar kode kita mudah dibaca. (w3schools, n.d.) 3.2 HTML Text Element Heading Heading HTML adalah judul atau subjudul yang ingin Anda tampilkan di halaman web. Heading memilik beberapa level dan
33 memiliki tag <h1> hingga <h6> <h1> mendefinisikan heading yang paling penting. <h6> mendefinisikan heading yang tidak signifikan. Berikut merupakan contoh kode HTMLnya : <h1>Headi ng 1</ h1> <h2>Headi ng 2</ h2> <h3>Headi ng 3</ h3> <h4>Headi ng 4</ h4> <h5>Headi ng 5</ h5> <h6>Headi ng 6</ h6> Berikut tampilan yang akan muncul di browser : Gambar 3.2 HTML Headings Heading adalah elemen sensitive, Mesin pencari seperti google menggunakan headings.untuk mengindeks struktur dan konten halaman web Anda. Pengguna sering membaca sepintas halaman berdasarkan judulnya. Penting untuk menggunakan heading untuk
34 menunjukkan struktur dokumen. Gunakan heading HTML untuk heading saja. Jangan gunakan heading untuk membuat teks menjadi BESAR atau tebal. Paragraph Elemen HTML <p> mendefinisikan sebuah paragraf. Sebuah paragraf selalu dimulai pada baris baru, dan browser secara otomatis menambahkan beberapa spasi (margin) sebelum dan sesudah paragraf. <p>I ni adal ah sebuah par agr af . </ p> <p>I ni j uga sebuah par agr af . </ p> Dengan HTML, Anda tidak dapat mengubah tampilan di browser dengan menambahkan spasi atau baris tambahan dalam kode HTML Anda. Browser akan secara otomatis menghapus spasi dan garis tambahan saat halaman ditampilkan: <p> Par agr af i ni memi l i k i beber apa bar i s di dal am kode, t et api br owser akan mengabai kan bar i s bar i s yang di masukkan. </ p> <p> Par agr af i ni memi l i k i banyak spasi di dal am kode, t et api br owser akan mengabai kan bar i s bar i s yang di masukkan. </ p> Berikut merupakan tampilan browser dari kode diatas :
35 Gambar 3.3 Code Spacing HTML Line Breaks Untuk menambahkan baris, Anda dapat menyematkan elemen <br /> diantara teks yang akan dimasukkan ke barus yang baru. Seperti tag <meta />, tag <br /> tidak memerlukan tag penutup. <p>I ni adal ah<br / >sebuah par agr af <br / >dengan bar i s bar u. </ p> Berikut merupakan tampilan dari kode diatas didalam browser : Gambar 3.4 Line Breaks (w3schools, n.d.) 3.3 Text Formatting Elemen text formatting dirancang untuk menampilkan efek teks dan jenis teks khusus: Ada beberapa elemen yang termasuk dalam text formatting: <b> - Bentuk teks tebal <strong> - Teks penting (Digunakan untuk menandai teks penting untuk mesin pencari) <i> - Teks miring <em> - Teks yang ditekankan (emphasis) <mark> - Teks yang ditandai <small> - Teks lebih kecil <sub> - Teks subskrip <sup> - Teks superskrip
36 Berikut merupakah contoh kode dari elemen-elemen diatas: <b>Teks Tebal </ b> <br / > <st r ong>Teks pent i ng</ s t r ong><br / > <i >Teks Mi r i ng</ i ><br / > <em>Teks emphas i s</ em><br / > <mar k>Teks yang di t andai </ mar k><br / > <smal l >Teks l ebi h kec i l </ smal l ><br / > Teks<sub>subskr i p</ sub><br / > Teks<sup>super skr i p</ sup><br / > Berikut tampilan browser dari kode diatas: Gambar 3.5 Text Formatting Dapat dilihat bahwa <strong> dan <em> memiliki efek teks yang sama dengan <b> dan <i>, namun tag <strong> dan <em> hanya digunakan untuk teks yang memiliki signifikansi tertentu dan teks tersebut akan dianggap teks yang penting atau teks emphasis oleh mesin pencari. 3.4 Links Tag HTML <a> mendefinisikan hyperlink. Link memiliki sintaks berikut:
37 Link tersebut akan tampil seperti berikut: Gambar 3.6 Links Atribut terpenting dari elemen <a> adalah atribut href, yang menunjukkan tujuan tautan. Teks yang berada diantara elemen <a> adalah bagian yang akan terlihat oleh user. Jika teks tersebut diklik, maka browser akan mengirim user ke alamat URL yang ditentukan. Kita juga dapat mengarahkan user ke halaman yang ada didalam website yang sama dengan relative url (tanpa bagian “https://www”): <h2>Absol ut e URL</ h2> <p><a hr ef =" ht t ps : / / www. w3. or g/ " >W3C</ a></ p> <p><a hr ef =" ht t ps : / / www. googl e. com/ " >Googl e</ a></ p> <h2>Rel at i ve URLs</ h2> <p><a hr ef =" f ol der 2/ coba. ht ml " >Hal aman Coba</ a></ p> Tambahkan attribute “target” agar browser dapat mengalihkan link untuk dibuka ke tab baru, atau window baru: <a hr ef =" t est . ht ml " t ar get =" _bl ank" >Buka hal aman t est di t ab bar u</ a> (w3schools, n.d.) 3.5 Tabel Sebuah tabel dalam HTML terdiri dari sel-sel tabel di dalam baris dan kolom
38 <t abl e> <t r > <t h>Per usahaan</ t h> <t h>Kont ak</ t h> <t h>Negar a</ t h> </ t r > <t r > <t d>APC Jer man</ t d> <t d>Mar i a Ander s</ t d> <t d>Jer man</ t d> </ t r > <t r > <t d>Socof i ndo</ t d> <t d>Jul ea</ t d> <t d>I ndones i a</ t d> </ t r > </ t abl e> Berikut merupakan tampilan browser dari kode diatas Gambar 3.7 Tabel Dasar Dapat dilihat bahwa tabel tersebut tidak memiliki border diantara selsel, kita harus memberi style pada tabel tersebut yang akan dipelajari di bab CSS nanti. Baris Tabel Setiap baris tabel dimulai dengan <tr> dan diakhiri dengan tag </tr>. Sel Tabel Didalam baris tabel akan ada beberapa sel tabel, sel tersebut dapat berupa sel tabel biasa, atau sel header tabel. Setiap sel tabel didefinisikan oleh tag <td> dan </td>. Segala sesuatu di antara <td> dan </td> adalah isi dari sel tabel tersebut. td adalah singkatan dari tabel data.
39 <t d>APC Jer man</ t d> <t d>Mar i a Ander s</ t d> <t d>Jer man</ t d> TerkadangAnda ingin sel Anda menjadi header, dalam kasus tersebut gunakan tag <th> untuk menggantikan <td>: <t h>Per usahaan</ t h> <t h>Kont ak</ t h> <t h>Negar a</ t h> Merge cell Di HTML,Anda dapat menggabungkan beberapa sel secara sekaligus menggunakan rowspan (merge baris) dan colspan (merge kolom) Colspan Untuk membuat merge sel pada beberapa kolom, gunakan atribut colspan: (Untuk mempermudah melihat efek dari colspan, maka kita akan gunakan sedikit CSS untuk table yang akan dijelaskan di bab berikutnya) <t abl e st yl e=" bor der : 1px sol i d bl ack ; " > <t r > <t h col span=" 2" >Nama</ t h> <t h>Umur </ t h> </ t r > <t r > <t d>J i l l </ t d> <t d>Smi t h</ t d> <t d>43</ t d> </ t r > <t r > <t d>Eve</ t d> <t d>Jackson</ t d> <t d>57</ t d> </ t r > </ t abl e> Berikut merupakan tampilan dari kode diatas :
40 Gambar 3.8 Colspan Rowspan Untuk membuat merge sel pada beberapa baris, gunakan atribut rowspan: <t abl e st yl e=" bor der : 1px sol i d bl ack ; " > <t r > <t h>Nama</ t h> <t d>J i l l </ t d> </ t r > <t r > <t h r owspan=" 2" >No. Tel </ t h> <t d>555- 1234</ t d> </ t r > <t r > <t d>555- 8745</ t d> </ t r > </ t abl e> Berikut merupakan tampilan dari kode diatas: Gambar 3.9 Rowspan (w3schools, n.d.) 3.6 Images Tag HTML <img> digunakan untuk menyematkan gambar di halaman web. Gambar pada HTML secara teknis tidak dimasukkan ke dalam
41 halaman web; gambar hanya disematkan ke halaman web. Tag <img> membuat ruang penyimpanan untuk gambar yang direferensikan. Tag <img> adalah salah satu yang tidak perlu tag penutup Tag <img> memiliki dua atribut yang diperlukan: src - Menentukan path ke file gambar alt - Menentukan teks alternatif untuk gambar jika gambar gagal dimuat oleh browser <i mg sr c=" i mages/ l ogo. j pg" al t =" l ogo pnj " > Path dalam HTML Dapat dilihat bahwa atribut src dalam elemen HTML kita berisi “images/logo.jpg” berarti gambar kita yaitu “logo.jpg” berada didalam folder “image” yang ada di folder tempat file .html kita. Berikut merupakan ilustrasi posisi folder didalam kasus ini. Gambar 3.10 HTML Pathing Misalnya jika kita ingin menggunakan “logo2.jpg” dalam elemen <img> didalam file “basic.html”, maka attribut src harus kita ubah
42 ke: “images/folder2/logo2.jpg”. Namun jika kita ingin mengakses “logo.jpg” di file “coba.html”, maka kita harus menggunakan 2 titik untuk mengakses folder sebelumnya dari file “coba.html”, atribut src pada elemen <img> kita harus kita ubah menjadi “../logo.jpg”. Aturan pathing ini berlaku untuk mengakses semua file yang ingin kita sematkan ke file markup kita. 3.7 Komentar Komentar HTML tidak ditampilkan di browser, tetapi dapat membantu mendokumentasikan kode HTMLAnda. Anda dapat menambahkan komentar ke sumber HTMLAnda dengan menggunakan sintaks berikut: <p>I ni adal ah par agr af </ p> <! - - Tul i skan koment ar Anda di s i ni , koment ar t i dak akan di t ampi l kan di br owser - - > Tulisan diantara <!-- dan --> tidak akan ditampilkan di browser. 3.8 List Unordered HTML List List tidak berurutan (unordered) dimulai dengan tag <ul>. Setiap item list dimulai dengan tag <li>. Item daftar akan ditandai dengan bullet point (lingkaran hitam kecil) secara default: Daf t ar Bel anj a : <ul > <l i >Tel ur </ l i > <l i >Tepung</ l i > <l i >Gul a</ l i > </ ul > Berikut tampilan browser dari kode diatas:
43 Gambar 3.11 List Lingkaran hitam yang ada di unordered list diatas dapat diganti menggunakan CSS yang akan dipelajari di BAB CSS. Ordered HTML List Ordered list dimulai dengan tag <ol>. Setiap item daftar dimulai dengan tag <li>. Item daftar akan ditandai dengan angka secara default: Daf t ar Bel anj a : <ol > <l i >Tel ur </ l i > <l i >Tepung</ l i > <l i >Gul a</ l i > </ ol > Berikut tampilan browser dari kode diatas: Angka pada ordered list dapat diganti dengan menggunakan atribut type pada tag <ol>, beberapa lambang lambang yang dapat digunakan pada atribut tersebut adalah:
44 Tabel 3.1 Ordered List Type Attribute Type Deskripsi type=”1” Item daftar akan diberi nomor dengan angka (default) type=”A” Item daftar akan diberi nomor dengan huruf besar (A,B,C,D) type=”a” Item daftar akan diberi nomor dengan huruf kecil (a,b,c,d) type=”I” Item daftar akan diberi nomor dengan angka romawi huruf besar (I,II,III) type=”i” Item daftar akan diberi nomor dengan angka romawi huruf kecil (i,ii,iii) Contoh: Daf t ar Bel anj a : <ol t ype=" i " > <l i >Tel ur </ l i > <l i >Tepung</ l i > <l i >Gul a</ l i > </ ol > Berikut merupakan tampilan browser dari kode diatas Gambar 3.12 Ordered List dengan Angka Romawi Kecil 3.9 HTML Forms Formulir HTML digunakan untuk mengumpulkan input pengguna. Input pengguna paling sering dikirim ke server untuk diproses. Elemen HTML <form> digunakan untuk membuat formulir HTML untuk input pengguna:
45 <f or m> . . . el emen f or m . . . </ f or m> Elemen <form> adalah wadah untuk berbagai jenis elemen input, seperti: Textbox, Checkbox, Radio Button, Submit button, dll. Berikut adalah macam-macam elemen input didalam HTML : Elemen <input> Salah satu elemen form yang paling sering digunakan adalah elemen <input>. Elemen <input> dapat ditampilkan dalam beberapa cara, tergantung pada atribut type. Tabel 3.2 Macam macam elemen input Atribut Type Deskripsi < i n p u t type=”text”> Menampilkan sebuah textbox < i n p u t t y p e = ” r a - dio”> Menampilkan radio button < i n p u t type=”checkbox”> Menampilkan Checkbox < i n p u t t y p e = ” s u b - mit”> Menampilkan button submit < i n p u t type=”password”> Menampilkan sebuah textbox yang dihidden untuk menginput password < i n p u t type=”file”> Menampilkan sebuah file picker untuk mengupload file
46 < i n p u t type=”date”> Menampilkan sebuah datepicker untuk memilih tanggal <select> Container untuk sebuah dropdown input <option> Pilihan dari elemen <select> <label> Menampilkan label untuk menamai instruksi sebuah elemen form Contoh: <f or m> <l abel f or =" nama" >Nama Lengkap</ l abel > <i nput t ype=" t ex t " name=" nama" i d=" nama" > <br / > <l abel f or =" dob" >Tanggal Lahi r </ l abel > <i nput t ype=" dat e" name=" dob" i d=" dob" > <br / > <l abel f or =" gender " >Jeni s Kel ami n</ l abel > <br / > <l abel f or =" mal e" >Lak i Lak i </ l abel > <i nput t ype=" r adi o" name=" gender " i d=" mal e" > <l abel f or =" f emal e" >Per empuan</ l abel > <i nput t ype=" r adi o" name=" gender " i d=" f emal e" > <br / > <l abel f or =" f ot o" >Unggah Fot o</ l abel > <i nput t ype=" f i l e" name=" f ot o" i d=" f ot o" > <br / > <l abel f or =" passwor d" >Passwor d</ l abel > <i nput t ype=" passwor d" name=" passwor d" i d=" passwor d" > <i nput t ype=" submi t " val ue=" Submi t " > </ f or m> Berikut tampilan browser untuk kode diatas :
47 Gambar 3.13 Contoh HTML Forms Dapat dilihat pada kode diatas, input type radio dan checkbox mengharuskan 2 elemen input dengan id berbeda dan atribut “name” yang sama diharuskan agar radio button dan checkbox bekerja. Untuk menamai sebuah elemen input, label digunakan dengan atribut “for” yang diisi dengan id dari elemen yang akan diberi nama atau instruksi. (w3schools, n.d.) 3.10 HTML Iframes Iframe HTML digunakan untuk menampilkan halaman web di dalam halaman web. Tag HTML <iframe> digunakan untuk membuat inframe inline. Iframe digunakan untukmenyematkan dokumen lain dalamdokumen HTML saat ini: <h1>Hal o dar i l at i han HTML, di bawah adal ah webs i t e Pol i t ekni k Neger i Jakar t a</ h1> <i f r ame sr c=" ht t ps: / / pnj . ac . i d" hei ght =" 200" wi dt h=" 300" t i t l e=" Websi t e PNJ" ></ i f r ame>
48 Gambar 3.14 IFrames Gunakan atribut height dan width untuk menentukan ukuran iframe. Tinggi dan lebar ditentukan dalam piksel secara default. (w3schools, n.d.) 3.11 HTMLMedia Multimedia hadir dalam berbagai format. Media bisa berupa hampir semua hal yang dapat Anda dengar atau lihat, seperti gambar, musik, suara, video, rekaman, film, animasi, dan banyak lagi. Halaman web sering berisi elemen multimedia dari berbagai jenis dan format. HTML Video Elemen HTML <video> digunakan untuk menampilkan video di halaman web.
49 <p>Anda t el ah kena r i ckr ol l ! </ p> <vi deo wi dt h=" 320" hei ght =" 240" cont r ol s aut opl ay> <sour ce sr c=" vi deo. mp4" t ype=" v i deo/ mp4" > Br owser Anda t i dak mendukung t ag Vi deo </ v i deo> Gambar 3.15 HTML Video Sebaiknya selalu menyertakan atribut width dan height. Jika tinggi dan lebar tidak disetel, halaman mungkin berkedip saat video dimuat. Atribut autoplay memungkinkan video untuk diputar secara otomatis ketika halaman dimuat (sudah tidak berfungsi atau terkena efek setting default pada beberapa browser) Elemen <source> memungkinkan Anda menentukan file video alternatifyangdapat dipiliholehbrowser.Browser akanmenggunakan
RkJQdWJsaXNoZXIy MTM3NDc5MQ==