bab 3 perintah/tag html dasar - Sistem Informasi Teknik Elektro
advertisement
BAB 3 PERINTAH/TAG HTML DASAR Tujuan Pembelajaran: Memahami kaidah penulisan dan mempraktikkan tag dasar 3.1 Pendahuluan HTML 3.2 Struktur 3.3 Text 3.4 List 3.5 Tautan/link 3.6 Gambar 3.7 Tabel 3.8 Form 3.9 Flash, Audio dan Video Bab 3 Perintah/Tag HTML Dasar HTML III- 1 3.1 Pendahuluan HTML Di kehidupan sehari-hari, kita sudah sangat sering mengakses dokumen tercetak seperti surat kabar, laporan dan dokumen jenis lain. Halaman web yang sering kita akses juga sebenarnya ada kumpulan dokumen juga dan memiliki kemiripan dengan dokumen yang biasa kita akses. Kalau kita ambil surat kabar sebagai salah satu dokumen catak, bila diperhatikan memiliki struktur seperti : ada beberapa artikel dalam satu halaman dimana setiap artikel ada judul artikel atau heading kemudian ada sub judul dan beberapa paragraf serta satu atau beberapa gambar. Saat ini beberapa surat kabar sudah mulai terbit secara online. Dari strukurnya, dokumen surat kabar cetak dan online memiliki kemiripan, yakni adanya heading/judul, sub judul, paragraf dan gambar. Namun tetap ada perbedaan. Pada surat kabar tercetak, satu halaman memuat beberapa artikel sekaligus. Kalau kita bandingkan dengan versi online, biasanya versi yang ini hanya memuat beberapa headline saja dari berita dan untuk lebih detailnya terdapat dalam satu halaman tersendiri. 3.2 Struktur Dokumen web memiliki kemiripan dengan dokumen yang biasa kita baca. Namun tetap ada perbedaan. Di semua jenis dokumen yang kita kenal, struktur dokumen adalah unsur yang penting bagi pembaca dalam memahami pesan yang disampaikan dan panduan dalam navigasi dokumen. Untuk membuat halaman web, sangat penting untuk dapat memahami struktur dokumen. Sebuah dokumen web ditulis menggunakan HTML (Hyper Text Markup Language). Sebuah dokumen web yang menggunakan HTML yang memiliki struktur <html> <body> <h1>Bagian ini adalah Kepala Dokumen Utama</h1> <p>Bagian ini adalah paragraf yang menjelaskan secara detail judul yang ada pada Kepala Dokumen. Apabila paragraf ini panjang, maka biasanya akan dibagi ke dalam sub-sub paragraf atau judul.<p> <h2>Bagian ini adalah sub judul</h2> III- 2 Bab 3 Perintah/Tag HTML Dasar <p>Banyak artikel memiliki sub judul untuk membantu pembaca struktur tulisan yang sedang dibaca. Ada beberapa macam sub-sub judul lain yang levelnya lebih rendah.</p> <h2>Bagian ini adalah sub judul yang lain</h2> <p>Paragraf ini menjelaskan sub judul lain di atas.</p> </body> </html> Kode HTML (yang dicetak tebal) terdiri atas karakter yang diapit oleh tanda kurung, yang disebut sebagai elemen HTML. Elemen biasanya terdiri atas dua buah tag, yaknik tag pembuka dan penutup. Tag penutup memiliki tambahan simbol slash (/). Setiap elemen HTML akan memberitahu kepada browser tentang informasi yang berada diantara tag pembuka dan penutup. Dokumen HTML menggunakan elemen untuk menjelaskan struktur dari dokumen. Tag bertindak sebagai wadah yang memberi informasi tindakan apa yang harus dilakukan terhadap dokumen yang berada diantara tag pembuka dan penutup. Kalau diperhatikan, sebuah tag terdiri atas : Karakter <p> Kurung sebelah kiri (seperti tanda kurang dari) Kurung sebelah kanan (seperti tanda lebih dari) Tag pembuka Bab 3 Perintah/Tag HTML Dasar III- 3 Karakter yang berada di dalam kurung menandakan tujuan dari tag. Misalnya pada contoh di atas huruf p menandakan bahwa karakter tersebut adalah sebuah paragraf. Untuk tag penutup ada tambahan simbol garis miring slash. Karakter </p> Simbol garis miring/slash Kurung sebelah kiri (seperti tanda kurang dari) Kurung sebelah kanan (seperti tanda lebih dari) Tag penutup Sering kali sebuah dokumen HTML yang diapit tag ditambahkan atribut sebagai pelengkap perlakuan dari sebuah dokumen. Atribut memberikan tambahan informasi tentang konten dari sebuah elemen. Atribut muncul pada tag pembuka dari elemen dan terdiri atas dua bagian yakni nama dan nilai atribut yang dipisahkan oleh tanda sama dengan. Struktur atribut adalah sebagai berikut : Nama atribut <p lang="en-us">Paragraph in English</p> Nilai atribut III- 4 Bab 3 Perintah/Tag HTML Dasar Nama dari atribut menunjukan informasi tambahan apa yang ada pada konten elemen dan ditulis menggunakan huruf kecil. Sedangkan value adalah nilai atau seting dari atribut dan harus ditulis dengan diapit oleh tanda kutip ganda. Atribut yang berbeda akan memiliki value yang berbeda. Pada contoh di atas, atribut lang adalah untuk bahasa yang digunakan pada elemen yang dalam hal ini bernilai “enus” yang berarti bahasa Inggris-Amerika. Body, Head dan Title <body> Segala sesuatu yang diapit oleh tag ini akan muncul di dalam halaman utama sebuah browser. Contoh : <html> <head> <title>Bagian ini adalah Judul Halaman</title> </head> <body> <h1>Bagian ini adalah Tubuh/body dari Halaman web</h1> <p>Segala sesuatu yang berada di sini akan ditampilkan pada main browser window.</p> </body> </html> <head> dan <title> Pada tag ini akan menampilkan judul tab dari sebuah halaman web yang di dalam tag <head> ini terdapat tag <title>. Apabila kode HTML di atas ditampilkan pada browser maka tampilannya adalah sebagai berikut Segala yang tertulis pada tag title akan muncul di sini Segala yang tertulis pada tag body akan muncul di sini Bab 3 Perintah/Tag HTML Dasar III- 5 Gambar 3.1 Contoh Tampilan di web Browser untuk tag body Praktik Untuk lebih memahami tentang struktur HTML, lakukan praktik berikut: 1 Buka aplikasi pengolah kata, misalkan notepad 2 Tuliskan kode HTML berikut pada notepad 3 <html> <head> <title>Bagian ini adalah Judul Halaman</title> </head> <body> <h1>Bagian ini adalah Tubuh/body dari Halaman web</h1> <p>Segala sesuatu yang berada di sini akan ditampilkan pada main browser window.</p> </body> </html> Setelah selesai, simpan file di atas dengan format nama_file.html atau nama_file.htm dan jangan lupa untuk pilihan Save as type pilihlah All files. 4 Buka file yang telah disimpan di atas menggunakan web browser, anda dapat memilihnya apakah menggunakan Internet Explorer(IE), Mozilla Fire Fox, Google Chrome atau yang lain. 5 Perhatikan hasil yang muncul dan catat bagian-bagian yang ada untuk setiap tag body, head dan title. 3.3. Text Ketika membuat sebuah halaman web, Anda menambahkan tag (dikenal sebagai markup) untuk isi halaman. Tag ini memberikan makna tambahan dan memungkinkan browser untuk menunjukkan penggunaan struktur yang tepat untuk halaman. Heading HTML memiliki 6 tingkat untuk heading yakni yang terbesar adalah <h1> untuk heading utama dan <h2> adalah untuk sub heading. Apabila ada sub heading yang lebih kecil lagi dapat menggunakan <h3> dan seterusnya sampai yang paling kecil <h6>. Praktikan contoh berikut: 1. Buka notepad 2. Tuliskan kode HTML berikut III- 6 Bab 3 Perintah/Tag HTML Dasar <html> <head> <title>Bagian ini adalah Judul Halaman</title> </head> <body> <h1>Heading Utama</h1> <h2>Sub Heading</h2> <h3>Sub Heading</h3> <h4>Sub Heading</h4> <h5>Sub Heading</h5> <h6>Sub Heading</h6> </body> </html> 3. Simpan dengan nama file misalnya heading.html 4. Buka file heading.html dengan web browser yang anda miliki 5. Perhatikan perbedaan antara <h1> sampai dengan <6> Paragraf Untuk membuat sebuah paragraf, batasi kalimat yang akan dijadikan paragraf dengan tag <p> dan ditutup dengan </p>. Secara default, browser akan menampilkan setiap paragraf pada baris baru dengan beberapa ruang antara itu dan setiap paragraf berikutnya. Untuk lebih jelasnya, lakukan praktik berikut: 1. Buka Notepad 2. Tulis kode HTML berikut <p>A paragraph consists of one or more sentences that form a self-contained unit of discourse. The start of a paragraph is indicated by a new line.</p> <p>Text is easier to understand when it is split up into units of text. For example, a book may have chapters. Chapters can have subheadings. Under each heading there will be one or more Bab 3 Perintah/Tag HTML Dasar III- 7 paragraphs.</p> 3. Simpan kode HTML di atas dengan nama file paragraf.html 4. Buka dengan web browser 5. Perhatikan hasilnya Bold dan Italic Sering kali dalam menulis paragraf, kita memerlukan penekanan pada kata-kata tertentu sebagai kata kunci. Biasanya yang digunakan adalah kata tersebut dicetak tebal(bold) atau miring(italic). Tag HTML yang dapat digunakan untuk mencetak kata atau kalimat dengan cetak tebal adalah <b> ....</b> dan untuk cetak miring menggunakan <i>...</i>. Untuk lebih jelasnya lakukan praktik berikut: 1. Buka notepad 2. Tuliskan kode HTML berikut ini <p>This is how we make a word appear <b>bold.</b> </p> <p>Inside a product description you might see some <b>key features</b> in bold.</p> <p>This is how we make a word appear <i>italic</i>. </p> <p>It's a potato <i>Solanum teberosum</i>.</p> <p>Captain Cook sailed to Australia on the <i>Endeavour</i>.</p> 3. Simpan kode HTML di atas dengan nama file bold-italic.html 4. Buka dengan web browser dan perhatikan bagian mana yang dicetak tebal dan miring. 3.4. List Ketika kita akan menuliskan pada halaman web beberapa item dalam daftar, maka dapat digunakan list. Ada dua macam list yakni : • Ordered List, yaitu list dimana setiap item di dalam list diberi nomor urut. • Unordered List, yaitu list yang diawali simbol bullet bukan angka atau karakter terurut, III- 8 Bab 3 Perintah/Tag HTML Dasar • Definition List, yaitu suatu list yang biasanya digunakan untuk mendefinisikan sebuah istilah. Ordered List Ordered list dibuat dengan menggunakan tag pembuka <ol> dan penutup </ol>. Sedangkan untuk item di dalam list menggunakan tag pembuka <li> dan penutup </li>. Agar lebih memahaminya, lakukan langkah berikut, 1. Buka Notepad 2. Ketikan kode HTML berikut ini <ol> <li>Masukan kopi ke dalam gelas</li> <li>Tambahkan gula secukupnya atau sesuai selera</li> <li>Tambahkan creamer yang diinginkan</li> <li>Masukan air panas ke dalam campuran kopi, gula dan creamer</li> <li>Aduk-aduk sampai semua larut</li> <li>Kopi hangat siap dihidangkan</li> </ol> 3. Simpan file di atas dengan nama file order-list.htm 4. Buka file order-list.htm di web browser 5. Browser akan mengurutkan order list secara default menggunakan angka Unordered List Untuk membuat unordered list, digunakan tag <ul> dan </ul>. Setiap item di dalam list diapit oleh <li> dan </li>. Untuk lebih jelas, lakukan langkah berikut, 1. Buka Notepad 2. Tuliskan kode HTML berikut <ul> <li>1 kg kentang</li> <li>100 ml susu segar</li> <li>50g roti tawar</li> <li>Mentega secukupnya</li> <li>Garam dan lada secukupnya</li> </ul> Bab 3 Perintah/Tag HTML Dasar III- 9 3. Simpan dengan nama file unordered-list.html 4. Buka di web browser. Definition List Untuk membuat definition list digunakan tag <dl> yang diikuti oleh serangkaian istilah dan definisinya. Di dalam elemen <dl> terbagi lagi atas elemen <dt> dan <dd>. Elemen <dt> untuk istilah yang akan dijabarkan definisinya dalam elemen <dd>. Untuk lebih memahaminya, lakukan praktik berikut 1. Buka Notepad 2. Tulis kode HTML berikut <dl> <dt>Sashimi</dt> <dd>Sliced raw fish that is served with condiments such as shredded daikon radish or ginger root, wasabi and soy sauce</dd> <dt>Scale</dt> <dd>A device used to accurately measure the weight of ingredients</dd> <dd>A technique by which the scales are removed from the skin of a fish</dd> <dt>Scamorze</dt> <dt>Scamorzo</dt> <dd>An Italian cheese usually made from whole cow's milk (although it was traditionally made from buffalo milk)</dd> </dl> 3. Simpan file dengan nama definition-list.html 4. Buka file tersebut di atas pada web browser dan perhatikan hasilnya 3.5. Tautan/Link Link adalah fitur web yang memungkinkan Anda untuk berpindah dari satu halaman web ke halaman yang lain sehingga muncul istilah browsing atau surfing. Link dibuat menggunakan elemen <a>. Pengguna dapat mengklik tautan yang III- 10 Bab 3 Perintah/Tag HTML Dasar terletak antara <a> dan </a>. Untuk menunjukkan ke halaman web mana tautan tersebut menuju, digunakan atribut href. Berikut formatnya Ini adalah halaman web yang dituju oleh link Ini adalah teks yang akan diklik oleh pengguna <a href=http://www.pnj.ac.id>PNJ</a> Tag tautan/link pembuka Tag tautan/link penutup Tautan ke Situs Lain Link yang dibuat menggunakan elemen <a> dengan memiliki atribut disebut href. Nilai dari atribut href adalah halaman yang ingin dituju ketika diklik pada link. Pengguna dapat mengklik apa pun yang muncul antara pembuka tag <a> dan penutup tag </a> dan akan dibawa ke halaman yang ditentukan dalam atribut href. Ketika link ke sebuah website berbeda, nilai href atribut akan menjadi web penuh untuk situs, yang dikenal sebagai URL absolut. Browser menunjukkan link menggunakan warna biru dengan digarisbawahi secara default. Untuk lebih jelas, lakukan praktik berikut 1. Buka Notepad 2. Tuliskan kode HTML berikut ini <p>Jurusan Teknik di PNJ: <ul> <li><a href="http://www.elektro.pnj.ac.id">Teknik Elektro</a></li> <li><a href="http://www.mesin.pnj.ac.id">Teknik Mesin</a></li> <li><a href="http://www.sipil.pnj.ac.id">Teknik Sipil</a></li> </ul> </p>Simpan dengan nama file tautan.html 3. Buka file tautan.html menggunakan web browser 4. Perhatikan hasil yang diperoleh URL singkatan dari Uniform Resource Locator. Setiap halaman web memiliki URL sendiri. Ini adalah alamat web yang akan ketik ke browser jika ingin Bab 3 Perintah/Tag HTML Dasar III- 11 mengunjungi halaman tertentu. URL absolut dimulai dengan nama domain untuk situs tersebut, dan dapat diikuti oleh tautan ke halaman tertentu. Jika tidak ada halaman yang ditentukan, situs akan menampilkan homepage. Tautan ke Halaman Lain pada Situs yang Sama Ketika Anda terhubung ke lain halaman dalam situs yang sama, Anda tidak perlu menentukan nama domain dalam URL. Kamu dapat menggunakan singkatan dikenal sebagai URL relatif. Jika semua halaman situs yang di folder yang sama, maka nilai dari atribut href hanyalah nama file. Jika Anda memiliki halaman yang berbeda dari situs di folder yang berbeda, maka Anda dapat menggunakan sedikit lebih kompleks sintaks untuk menunjukkan di mana Halaman ini dalam kaitannya dengan halaman saat ini. Untuk lebih jelas, lakukan praktik berikut 1. Buka notepad 2. Tulis kode HTML berikut <p> <ul> <li><a href="index.html">Home</a></li> <li><a href="about-us.html">About</a></li> <li><a href="movies.html">Movies</a></li> <li><a href="contact.html">Contact</a></li> </ul> </p> 3. Simpan dengan nama file link-halaman.html 4. Buka file link-halaman.html pada web browser Struktur Direktori Pada situs yang lebih besar, adalah merupakan ide yang baik untuk mengatur kode Anda dengan menempatkan halaman untuk setiap bagian yang berbeda dari situs ke folder baru. Folder pada situs kadang-kadang disebut sebagai direktori. Direktori adalah hanya nama lain untuk folder di situs web; dengan cara yang sama bahwa hard drive Anda berisi folder yang berbeda, sebuah situs web dapat dikatakan mengandung direktori. Biasanya Anda akan menemukan bahwa situs web berisi beberapa direktori, dan bahwa setiap direktori berisi bagian-bagian III- 12 Bab 3 Perintah/Tag HTML Dasar yang berbeda dari situs web. Misalnya, situs besar dengan beberapa subbagian akan memiliki direktori terpisah untuk setiap bagian dari situs tersebut, dan juga direktori yang berbeda untuk berbagai jenis file (misalnya, gambar dapat berada dalam satu direktori dan style sheet di lain). Dengan cara yang sama bahwa mungkin Anda mengatur file pada hard drive Anda ke dalam folder terpisah, itu adalah penting untuk mengatur file di website Anda ke direktori sehingga Anda dapat menemukan apa yang Anda cari untuk lebih mudah dan tetap mengontrol semua file. Seperti yang dapat Anda bayangkan, jika semua file yang digunakan dalam website berada di direktori yang sama, direktori yang cepat akan menjadi sangat besar dan rumit. Gambar 3.2 menunjukkan struktur direktori contoh untuk situs berita, dengan folder terpisah untuk setiap bagian. Perhatikan juga bagaimana bagian Musik memiliki folder tersendiri bagi subbagian tentang Fitur, MP3, dan Ulasan. Selain itu, folder utama memiliki folder terpisah untuk berbagai jenis file yang digunakan di situs: gambar, script, dan style sheet. Gambar 3.2 Struktur Direktori Link ke Email Anda mungkin pernah melihat link yang menunjukkan alamat e-mail, yang ketika diklik membuka e-mail baru dalam mail program, siap untuk mengirim e-mail ke alamat tersebut. Untuk membuat link ke alamat e-mail, Anda perlu menggunakan sintaks berikut dengan <a> elemen: Bab 3 Perintah/Tag HTML Dasar III- 13 <a href=”mailto:[email protected]”>[email protected]</a> Di sini, nilai atribut href dimulai dengan kata kunci mailto, diikuti oleh titik dua, dan kemudian e-mail yang ingin Anda kirim. Seperti link lain, isi dari elemen <a> dapat pula berupa link yang akan ditampilkan dalam browser seperti berikut, <a href=”mailto:[email protected]”>E-mail kami</a> Ada satu resiko ketika menempatkan alamat e-mail pada halaman web. Orangorang yang tidak bertanggungjawab menggunakan program kecil untuk secara otomatis mampu mencari situs web yang terdapat alamat e-mail. Setelah mereka menemukan alamat e-mail di situs web, mereka akan mulai mengirim spam ke alamat tersebut. Agar lebih dapat memahami, lakukan praktik berikut 1. Buka Notepad 2. Tulis kode HTML berikut <html> <head> <title> Cafe Mbal-Mbul - community cafe in Depok, West Java, Indonesia </title> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-88591”/> </head> <body> <h1> MBAL-MBUL CAFE </h1> <div> <a href=”index.html”>HOME</a> <a href=”menu.html”>MENU</a> <a href=”recipes.html”>RECIPES</a> </div> <h2> Contact </h2> <p><address> G Building Politeknik Negeri Jakarta</address></p> <p><a href="http://maps.google.com/maps?q=politeknik negeri jakarta">Find us on Google Maps</a> III- 14 Bab 3 Perintah/Tag HTML Dasar </p> <p><a href="mailto:[email protected]"> Mail Mbal-Mbul Cafe </a></p> </body> </html> 3. Simpan dengan nama file link-email.html 4. Buka di web browser Membuka Link pada Window Baru Jika Anda ingin link untuk membuka pada window baru, Anda dapat menggunakan atribut Target pada pembukaan tag <a>. Nilai ini atribut harus diisi blank. Salah satu alasan yang paling umum kenapa link harus dibuka di jendela baru adalah jika menunjuk ke website lain. Dalam beberapa kasus, mereka berharap pengguna akan kembali ke jendela yang berisi Situs mereka setelah menyelesaikan melihat yang lain. Lakukan praktik berikut 1. Buka notepad 2. Tulis kode HTML berikut <a href="http://www.imdb.com" target="_blank"> Internet Movie Database</a> (Buka pada Window yang baru) 3. Simpan dengan nama file link-window-baru.html 4. Buka di web browser. Link ke Lokasi Tertentu pada Halaman Web yang Sama Di bagian atas dari halaman web yang panjang, kita mungkin ingin menambahkan daftar isi yang menghubungkan ke bagian lain yang berada jauh di bawah halaman. Atau Anda mungkin ingin menambahkan link dari bagian paling bawah halaman untuk kembali ke atas. Sebelum Anda dapat link ke bagian tertentu dari halaman, Anda perlu mengidentifikasi titik-titik di halaman untuk dijadikan link. Anda ini menggunakan atribut id (yang dapat digunakan pada setiap HTML elemen). Dapat dilihat bahwa elemen <h1> dan <h2> dalam contoh ini telah diberikan atribut id yang mengidentifikasi bagian dari halaman. Nilai atribut id harus dimulai dengan huruf atau digarisbawahi (bukan angka atau karakter lain) Bab 3 Perintah/Tag HTML Dasar III- 15 dan pada halaman, ada dua atribut id yang harus memiliki nilai yang sama. Untuk link ke sebuah elemen yang menggunakan atribut id Anda menggunakan <a> tapi nilai atribut href dimulai dengan simbol #, diikuti oleh nilai atribut id dari elemen yang ingin di-lin. Di contoh ini, <a href="#top"> link ke elemen <h1> di bagian atas halaman yang id atribut memiliki nilai top. Berikut praktik yang harus dilakukan 1. Buka notepad 2. Tulis kode berikut <h1 id="top">Film-Making Terms</h1> <a href="#arc_shot">Arc Shot</a><br /> <a href="#interlude">Interlude</a><br /> <a href="#prologue">Prologue</a><br /><br /> <h2 id="arc_shot">Arc Shot</h2> <p>A shot in which the subject is photographed by an encircling or moving camera</p> <h2 id="interlude">Interlude</h2> <p>A brief, intervening film scene or sequence, not specifically tied to the plot, that appears within a film</p> <h2 id="prologue">Prologue</h2> <p>A speech, preface, introduction, or brief scene preceding the the main action or plot of a film; contrast to epilogue</p> <p><a href="#top">Top</a></p> 3. Simpan dengan nama file link-halaman.html 4. Buka dengan web browser 3.6. Gambar Banyak alasan mengapa kita ingin menambahkan gambar pada halaman web yang kita buat. Agar lebih informatif, biasanya sebuah halaman web berisi gambar berupa logo, diagram blok, foto, ilustrasi atau grafik. Kalau kita membuat web III- 16 Bab 3 Perintah/Tag HTML Dasar dari awal, sebaiknya semua gambar yang akan ditampilkan di web diletakkan di dalam satu folder. Untuk menambahkan gambar pada halaman web, tag yang digunakan adalah <img>. Contoh penulisan kode programnya: <img src="D:/Logo_Politeknik_Negeri_Jakarta.jpg" alt="Logo PNJ"/> src berisi sumber dimana letak file gambar berada. Alt menjelaskan tentang deskripsi gambar seandainya gambar tidak muncul. Dapat pula ditambahkan atribut title untuk memberi penjelasan gambar ketika kursor diletakan pada gambar. Untuk mengatur tinggi dan lebar gambar pada halaman web, dapat menggunakan atribut <height> dan <width> dalam satuan piksel. Tata Letak Gambar Di mana gambar ditempatkan dalam kode akan mempengaruhi bagaimana ia ditampilkan. Berikut adalah tiga contoh penempatan gambar yang menghasilkan hasil yang berbeda: 1. Sebelum Paragraf. Paragraf akan terletak di bawah setelah gambar 2. Di dalam dari awal sebuah paragraf. Gambar akan berada pada baris pertama dari paragraf 3. Di tengah paragraf. Gambar akan ada di tengah paragraf. Beriku contoh penempatan ketiga posisi gambar di atas. Terlebih dahulu siapkan sebuah file gambar dan letakan di sebuah folder tertentu. Sebelumnya telah disimpan sebuah gambar dengan nama file dengan nama Rhoma_Irama.png di folder D:/Bahan Ajar Multimedia/Gambar/ Rhoma_Irama.png sebagai letak dimana gambar berada. 1. Buka notepad 2. Tulis kode HTML berikut <img src="D:/Bahan Ajar Multimedia/Gambar/Rhoma_Irama.png" alt="Bang Haji" width="100" height="100" /> <p>Pada tahun tujuh puluhan, Rhoma sudah menjadi penyanyi dan musisi ternama setelah jatuh bangun dalam mendirikan band musik, mulai dari band Gayhand tahun 1963. Tak lama kemudian, ia pindah masuk Orkes Chandra Leka, sampai akhirnya membentuk band sendiri bernama Soneta Bab 3 Perintah/Tag HTML Dasar III- 17 yang sejak 13 Oktober 1973 mulai berkibar. Bersama grup Soneta yang dipimpinnya, Rhoma tercatat pernah memperoleh 11 Golden Record dari kaset-kasetnya.</p> <hr /> <p><img src="D:/Bahan Ajar Multimedia/Gambar/Rhoma_Irama.png" alt="Bang Haji" width="100" height="100" />Berdasarkan data penjualan kaset, dan jumlah penonton film-film yang dibintanginya, penggemar Rhoma tidak kurang dari 15 juta atau 10% penduduk Indonesia. Ini catatan sampai pertengahan 1984. "Tak ada jenis kesenian mutakhir yang memiliki lingkup sedemikian luas", tulis majalah TEMPO, 30 Juni 1984. Sementara itu, Rhoma sendiri bilang, "Saya takut publikasi. Ternyata, saya sudah terseret jauh."</p> <hr /> <p>Rhoma Irama terhitung sebagai salah satu penghibur yang paling sukses dalam mengumpulkan massa. Rhoma Irama bukan hanya tampil di dalam negeri tapi ia juga pernah tampil di Kuala Lumpur, Singapura, dan Brunei dengan jumlah penonton yang hampir sama ketika ia tampil di Indonesia. <img src="D:/Bahan Ajar Multimedia/Gambar/Rhoma_Irama.png" alt="Bang Haji" width="100" height="100" />Sering dalam konser Rhoma Irama, penonton jatuh pingsan akibat berdesakan.Orang menyebut musik Rhoma adalah musik dangdut, sementara ia sendiri lebih suka bila musiknya disebut sebagai irama Melayu.</p> 3. Simpan file dengan nama file letak-gambar.html 4. Buka file letak-gambar.html pada web browser 5. Perhatikan masing letak gambar yang tampil HTML 5 : Figure dan Figure Caption Gambar sering datang dengan keterangan. HTML5 telah memperkenalkan elemen baru yaitu <figure> untuk memberi keterangan gambar sehingga keduanya terkait. Anda dapat memiliki lebih dari satu gambar di dalam elemen <figure> selama mereka semua berbagi judul yang sama. Berikut contohnya: III- 18 Bab 3 Perintah/Tag HTML Dasar 1. Buka Notepad 2. Tulis kode HTML berikut <figure> <img src="D:/Bahan Ajar Multimedia/Gambar/sea-otters.jpg" alt="Foto dua ekor berang-berang mengambang di air"> <br /> <figcaption>Berang-berang berpegangan tangan pada saat mereka tidur sehingga mereke tidak terpisah satu sama lain.</figcaption> </figure> 3. Simpan dengan nama file keterangan-gambar.html 4. Buka di web browser 3.7. Tabel Ada beberapa jenis informasi yang perlu ditampilkan dalam bentuk grid atau tabel. Sebagai contoh: hasil olahraga, saham laporan, jadwal kereta. Grid memungkinkan kita untuk memahami data yang kompleks dengan referensi informasi pada dua sumbu. Setiap blok di grid disebut sebagai sel tabel. Dalam HTML tabel ditulis baris demi baris. Struktur Dasar Tabel Elemen <table> digunakan untuk membuat tabel. Isi dari tabel ditulis baris demi baris. Untuk mengawali baris dari setiap tabel, digunakan elemen <tr> untuk membuat baris diikuti oleh <td> untuk kolom-kolom yang ada pada baris tersebut. Untuk lebih jelasnya silakan praktikan kode berikut 1. Buka notepad 2. Tuliskan kode HTML berikut <table> <tr> <td>15</td> <td>15</td> <td>30</td> Bab 3 Perintah/Tag HTML Dasar III- 19 </tr> <tr> <td>45</td> <td>60</td> <td>45</td> </tr> <tr> <td>60</td> <td>90</td> <td>90</td> </tr> </table> 3. Simpan dengan nama file stuktur-tabel.html 4. Buka di web browser dan perhatikan setiap baris dan kolom tabel Heading Tabel Pada kolom dari setiap tabel sering kali harus diberi nama. Untuk memberi nama kolom digunakan tag <th> yang merupakan kepanjangan dari table heading. Bahkan jika sel tidak memiliki konten, Anda masih harus menggunakan <td> atau <th> elemen untuk mewakili kehadiran sel kosong karena jika tidak, tabel akan dirender tidak benar. (Sel pertama pada baris pertama dari contoh di bawah menunjukkan sel kosong.) Menggunakan elemen <th> akan meningkatkan kemampuan mesin pencari mengindeks halaman Anda, dan juga memungkinkan Anda untuk mengontrol penampilan tabel yang lebih baik ketika Anda mulai menggunakan CSS. Anda dapat menggunakan atribut lingkup pada elemen <th> untuk menunjukkan apakah itu sebuah pos untuk kolom atau baris. Hal ini dapat dilakukan dengan mengambil nilai-nilai: row untuk menunjukkan judul untuk baris atau col untuk menunjukkan menuju kolom. Berikut contoh kode program untuk dipraktikan 1. Buka notepad 2. Tulis kode HTML berikut <table> III- 20 Bab 3 Perintah/Tag HTML Dasar <tr> <th></th> <th scope="col">Sabtu</th> <th scope="col">Minggu</th> </tr> <tr> <th scope="row">Tiket terjual:</th> <td>120</td> <td>135</td> </tr> <tr> <th scope="row">Total penjualan:</th> <td>Rp. 600.000</td> <td>Rp. 675.000</td> </tr> </table> 3. Simpan dengan nama file table-heading.html 4. Buka di web browser dan perhatikan penamaan baris dan kolom serta data di dalamnya Menggabungkan Kolom Kadang-kadang kita mungkin perlu entri dalam tabel untuk menggabungkan lebih dari satu kolom. The atribut colspan dapat digunakan pada elemen <th> atau <td> dan menunjukkan berapa banyak sel kolom yang digabungkan. Pada contoh di sebelah kanan dapat dilihat jadwal dengan lima kolom; kolom pertama berisi judul untuk baris (hari), sisa empat merupakan salah satu slot waktu jam. Jika Anda melihat sel tabel yang berisi kata 'Geografi' Anda akan melihat bahwa nilai atribut colspan adalah 2, yang menunjukkan bahwa sel tersebut adalah gabungan di dua kolom. Dalam baris ketiga, 'Gym' adalah gabungan dari tiga kolom. Anda dapat melihat bahwa baris kedua dan ketiga memiliki lebih sedikit elemen <td> dari kolom yang ada. Hal ini karena, ketika sel meluas di lebih dari satu kolom, Bab 3 Perintah/Tag HTML Dasar III- 21 <td> atau <th> sel yang akan ditempat sel yang lebih luas tidak termasuk dalam kode. Untuk lebih jelasnya silakan praktikan kode HTML berikut, 1. Buka notepad 2. Tulis kode HTML berikut <table> <tr> <th></th> <th>9am</th> <th>10am</th> <th>11am</th> <th>12am</th> </tr> <tr> <th>Monday</th> <td colspan="2">Geography</td> <td>Math</td> <td>Art</td> </tr> <tr> <th>Tuesday</th> <td colspan="3">Gym</td> <td>Home Ec</td> </tr> </table> 3. Simpan dengan nama file spanning-kolom.html 4. Buka di web browser dan perhatikan pada bagian penggabungan kolom Menggabungkan Baris Anda juga mungkin perlu entri di tabel untuk menggabungkannya lebih dari satu baris. Atribut rowspan dapat digunakan pada elemen <th> atau <td> untuk menunjukkan berapa banyak sel baris yang harus digabunggkan. Dalam contoh di sebelah kiri Anda dapat melihat bahwa ABC menunjukkan sebuah film dengan III- 22 Bab 3 Perintah/Tag HTML Dasar durasi 06:00-08:00 atau dua jam, sedangkan saluran BBC dan CNN masingmasing dengan durasi satu jam. Jika Anda melihat elemen terakhir <tr>, hanya berisi tiga elemen meskipun ada empat kolom dalam tabel. Hal ini karena film di elemen <tr> di atasnya menggunakan atribut rowspan untuk menggabungkan baris tersebut dengan baris di bawahnya. Untuk lebih jelasnya, lakukan praktik berikut 1. Buka notepad 2. Tulis kode HTML berikut <table> <tr> <th></th> <th>ABC</th> <th>BBC</th> <th>CNN</th> </tr> <tr> <th>6pm - 7pm</th> <td rowspan="2">Movie</td> <td>Comedy</td> <td>News</td> </tr> <tr> <th>7pm - 8pm</th> <td>Sport</td> <td>Current Affairs</td> </tr> </table> 3. Simpan dengan nama file spanning-row.html 4. Buka di web browser dan perhatikan penggabungan tabelnya Tabel Panjang Bab 3 Perintah/Tag HTML Dasar III- 23 Ada tiga unsur yang membantu membedakan antara konten tabel utama dan baris pertama dan terakhir (yang bisa berisi konten yang berbeda). Unsur-unsur ini membantu orang dalam membaca tabel dan juga memungkinkan Anda untuk membuat tampilan tabel agak sedikit berbeda. Judul tabel harus berada dalam tag <thead> , isi tabel harus berada dalam tag <tbody> dan footer tabel berada dalam tag <tfooter>. Untuk lebih memahaminya, lakukan contoh berikut 1. Buka notepad 2. Tulis kode HTML berikut <table> <thead> <tr> <th>Tanggal</th> <th>Pemasukan</th> <th>Pengeluaran</th> </tr> </thead> <tbody> <tr> <th>1 Januari 2015</th> <td>250</td> <td>36</td> </tr> <tr> <th>2 January 2015</th> <td>285</td> <td>48</td> </tr> <!—tambahkan baris seperti di atas --> <tr> <th>31 Januari 2015</th> <td>129</td> <td>64</td> III- 24 Bab 3 Perintah/Tag HTML Dasar </tr> </tbody> <tfoot> <tr> <td></td> <td>7824</td> <td>1241</td> </tr> </tfoot> </table> 3. Simpan dengan nama file long-table.html 4. Buka di web browser dan perhatikan letak nama tabel, isi tabel dan footer. 3.8. Form Secara tradisional, istilah form merujuk pada dokumen cetak yang di dalamnya terdapat kolom isian. Form dalam HTML memiliki konsep yang sama dengan dokumen lain. Fungsi dari form adalah mengumpulkan informasi dari pengguna atau pengunjung web kita. Ada beberapa set elemen yang dapat digunakan pada HTML untuk membuat form. Form yang paling kita kenal adalah form pencarian yang terdapat di bagian tengah dari halaman web google. Gambar 3.2 berikut adalah contoh halaman web google yang berisi form untuk melakukan pencarian sesuai kata kunci yang dimasukan pada form. Bab 3 Perintah/Tag HTML Dasar III- 25 Gambar 3.2 Form Pencarian pada Halaman Google Kendali Form Ada beberapa macam kendali form yang dapat kita gunakan dalam halaman web yang kita buat yakni: 1. Menambahkan text • Input text satu baris, yakni form input untuk teks satu baris seperti input nama, alamat email dan sebagainya. • Input password, sama seperti input satu baris teks, hanya saja karakter teks yang diinput disamarkan. • Text Area, berfungsi untuk input teks yang terdiri atas beberapa baris. 2. Membuat pilihan III- 26 • Radio button, membuat pilihan untuk satu pilihan saja • Check Box, membuat pilihan lebih dari satu Bab 3 Perintah/Tag HTML Dasar • Drop down box, jika pilihan dibuat dalam bentuk daftar memanjang ke bawah. 3. Form Pendaftaran (submitting) • Submit button, untuk mendaftarkan data dari form ke halaman web • Image button, sama seperti submit button namun menggunakan image/gambar. 4. Mengunggah File • Unggah File, mengizinkan kepada pengunjung untuk mengunggah file ke web. Sebuah form dapat memiliki beberapa kontrol form, dengan setiap kontrol akan mengumpulkan informasi yang berbeda. Karena data yang diinput akan dikirim ke server, maka server perlu mengetahui yang mana diantara data yang diinput yang berkaitan dengan elemen form. Untuk membedakan diantara data yang diinput pada form, maka setiap input data diberi nama/value. Jika kontrol form adalah input berupa teks, maka nama/valuenya adalah teks yang diinput user. Jika kontrol form memberi pilihan untuk user maka nama/valuenya adalah daftar pilihan. Struktur Form Kontrol form berada di dalam elemen/tag <form>. Tag ini harus selalu diikuti oleh atribut action dan diikuti oleh method dan id atribut. Value dari atribut action adalah URL dari halaman web di server yang akan menerima data dari form pada saat di-submit. Form dapat dikirim melalui dua macam method yakni get dan post. Jika kita menggunakan method get, value dari form akan ditambahkan pada akhir Bab 3 Perintah/Tag HTML Dasar III- 27 URL yang telah dinyatakan dalam atribut action. Method get cocok digunakan untuk : 1. Form pendek, misalnya form pencarian 2. Saat mengambil data dari web server, bukan mengirimkan informasi yang akan ditambahkan atau diedit di database. Untuk method post, biasanya digunakan untuk mengirim/menginput informasi yang memiliki tingkat keamanan dimana dikirim menggunakan header HTTP. Method post digunakan untuk form : 1. Yang mengizinkan user untuk mengunggah file 2. Karakternya panjang 3. Mengandung data sensitif misalnya password 4. Menambah atau menghapus data ke database Jika tidak secara spesifik dinyatakan, maka secara default method yang digunakan adalah get. Input Teks Elemen <input> digunakan untuk membuat beberapa form kontrol yang berbeda kontrol. Nilai/value dari jenis atribut menentukan apa jenis input. Jika value dari atribut type adalah text, maka inputnya adalah teks pendek. Pada saat user mengisi informasi pada form, maka server harus mengetahui kontrol form apa yang diisi. Oleh karena itu setiap setiap kontrol form harus memiliki nama atribut (name attribute). Isi dari atribut ini akan dikirim ke server bersama informasinya sehingga server akan mampu mengidentifikasi setiap informasi/data yang diterima. Atribut size dapat digunakan pada form lama untuk membatasi ukuran/panjang karakter yang dapat ditampilkan pada form. Atribut maxlength digunakan untuk menentukan panjang karakter maksimum yang dapat ditampung oleh form. Berikut langkah untuk dipraktikan agar lebih memahami tentang input teks pada form. 1. Buka notepad 2. Tulis kode HTML berikut <form action="http://www.example.com/login.php"> <p>Username: III- 28 Bab 3 Perintah/Tag HTML Dasar <input type="text" name="username" size="15" maxlength="30" /> </p> </form> 3. Simpan dengan nama file teks-input.html 4. Buka dengan web browser 5. Inputkan teks pada form sebanyak 15 karakter dan lebih dari 15 karakter, apa perbedaannya Input Password Input password hampir sama dengan input teks hanya saja teks yang diinput harus di-masking/disamarkan sehingga menjadi lebih aman. Method yang digunakan adalah post. Untuk lebih memahaminya, lakukan praktik berikut 1. Buka notepad 2. Tulis kode HTML berikut <form action="http://www.example.com/login.php"> <p>Username: <input type="text" name="username" size="15" maxlength="30" /> </p> <p>Password: <input type="password" name="password" size="15" maxlength="30" /> </p> </form> 3. Simpan dengan nama file input-password.html 4. Buka di web browser dan inputkan pada form username dan password 5. Perhatikan perbedaannya. Text Area Untuk input teks dengan lebih dari satu baris, maka dapat digunakan form dengan tag <textarea>. Berikut kode HTML yang harus dipraktikan: Bab 3 Perintah/Tag HTML Dasar III- 29 1. Buka notepad 2. Tulis kode HTML berikut <form action="http://www.example.com/comments.php"> <p>Apa Komentar Anda?</p> <textarea name="comments" cols="20" rows="4">Tulis komentar anda di sini...</textarea> </form> 3. Simpan dengan nama file teksarea.html 4. Buka di web browser 5. Berapa karakter dalam satu baris text area ini dapat menampung? 6. Berapa baris text area ini dapat menampung kalimat? Radio Button Untuk form dengan pilihan radio button, dapat dilakukan dengan mengisi type pada tag <input> dengan radio. Pada atribut name, value yang dikirim ke server adalah hasil pilihan pada radio button dan isi dari atribute name untuk semua pilihan adalah sama. Perhatikan contoh berikut dan amati hasilnya, 1. Buka Notepad 2. Tulis kode HTML berikut <form action="http://www.example.com/profile.php"> <p>Silakan tentukan pilihan: <br /> <input type="radio" name="genre" value="rock" checked="checked" /> Rock <input type="radio" name="genre" value="pop" />Pop <input type="radio" name="genre" value="jazz" />Jazz </p> </form> 3. Simpan file dengan nama radio.html. 4. Ada berapa jumlah pilihan radio button? 5. Secara default, pilihan mana yang di-check saat halaman dibuka? 6. Apa isi dari atribut name pada pilihan radio button? III- 30 Bab 3 Perintah/Tag HTML Dasar Checkbox Untuk melakukan pilihan menggunakan checkbox, atribut type diisi checkbox. Berikut contoh yang dapat dipraktikan, 1. Buka Notepad 2. Tulis kode HTML berikut <form action="http://www.example.com/profile.php"> <p>Silakan pilih musik favorit anda (boleh lebih dari satu): <br /> <input type="checkbox" name="service" value="pop" checked="checked" /> Pop <input type="checkbox" name="service" value="dangdut" /> Dangdut <input type="checkbox" name="service" value="keroncong" /> Keroncong </p> </form> 3. Simpan dengan nama file checkbox.html 4. Buka dengan web browser Dropdown List Box Bentuk pilihan ini dibuat dalam daftar yang akan muncul ketika diklik. Untuk membuat bentuk pilihan ini banyaknya pilihan atribut yang digunakan adalah <select> dengan ditentukan di atribut <option>. Atribute name mengindikasikan jenis dari kontrol form yang dikirim ke server bersamaan dengan value yang telah user pilih. Elemen <option> digunakan untuk menyatakan pilihan yang dapat user tentukan. Kata atau kalimat yang diapit oleh <option> dan </option> adalah pilihan yang akan ditampilkan kepada user dalam bentuk dropdown box. Untuk lebih jelasnya, silakan praktikan berikut, 1. Buka notepad Bab 3 Perintah/Tag HTML Dasar III- 31 2. Tulis kode HTML berikut <form action="http://www.example.com/profile.php"> <p>Apa buah-buahan favorit Anda?</p> <select name="buah"> <option value="mangga">Mangga</option> <option value="apel">Apel</option> <option value="jeruk">Jeruk</option> <option value="melon">Melon</option> <option value="semangka">Semangka</option> </select> </form> 3. Simpan dengan nama file dropdown.html dan buka di web browser Dropdown list sama seperti radio button, jadi hanya satu saja yang dapat dipilih. Perbedaannya adalah apabila jumlah pilihan ingin ditampilkan semua dan tidak terlalu banyak maka biasanya menggunakan radio button. Untuk pilihan yang sangat banyak yang tidak mungkin ditampilkan semua, maka digunakan dropdown box. Multiple Select Box Jika pilihan yang akan ditampilkan lebih dari satu tidak seperti di dropdown box, maka kita bisa menggunakan Multiple Select Box, dimana pada jenis pilihan ini, akan ditampilkan daftar pilihan beberapa dari total pilihan. Misalnya ada 10 pilihan, dapat kita atur yang ditampilkan misalnya 3 pilihan pertama. Untuk membuat pilihan jenis ini digunakan atribut multiple. Untuk lebih jelasnya silakan praktikan kode berikut 1. Buka notepad 2. Tulis kode HTML berikut <form action="http://www.example.com/profile.php"> <p>Do you play any of the following instruments? (You can select more than one option by holding down control on a PC or command key on a Mac while selecting different options.)</p> III- 32 Bab 3 Perintah/Tag HTML Dasar <select name="instruments" size="3" multiple="multiple"> <option value="guitar" selected="selected">Guitar</option> <option value="drums">Drums</option> <option value="keyboard" selected="selected">Keyboard</option> <option value="bass">Bass</option> </select> </form> 3. Simpan dengan nama file multiplelist.html 4. Buka di web browser File Input Box Input jenis ini memungkinkan user untuk mengupload file seperti gambar, video dan sebagainya. Untuk melakukan hal ini, value dari atribut type harus diisi dengan file. Silakan lakukan praktik berikut 1. Buka notepad 2. Tulis kode HTML berikut <form action="http://www.example.com/upload.php" method="post"> <p>Unggah lagu anda dalam format MP3:</p> <input type="file" name="user-song" /><br /> <input type="submit" value="Unggah" /> </form> 3. Simpan dengan nama file inputbox.html 4. Buka dengan web browser Submit Button Dengan atribut type berisi submit, maka ketika ditekan, submit button akan mengirim isi form ke server. Berikut contoh untuk dipraktikan 1. Buka notepad 2. Tulis kode HTML berikut <form action="http://www.example.com/subscribe.php"> <p>Subscribe to our email list:</p> Bab 3 Perintah/Tag HTML Dasar III- 33 <input type="text" name="email" /> <input type="submit" name="subscribe" value="Subscribe" /> </form> 3. Simpan dengan nama file submit.html dan buka di web browser Untuk jenis buttonnya, kita juga dapat menggunakan image/gambar yang dijadikan sebagai button. Sebelumnya kita harus menyiapkan gambar yang akan digunakan sebagai button dan disimpan di folder D:/Bahan Ajar Multimedia/Gambar/subscribe.jpg. Berikut contohnya, 1. Buka notepad dan tuliskan kode HTML berikut, <form action="http://www.example.org/subscribe.php"> <p>Subscribe to our email list:</p> <input type="text" name="email" /> <input type="image" src=" D:/Bahan Ajar Multimedia/Gambar/subscribe.jpg " width="100" height="20" /> </form> 2. Simpan dengan nama file sumbit-image.html dan buka di web browser Button dan Hidden Control Elemen <button> memungkinkan user untuk mengontrol bagiamana button akan dimunculkan dan memungkinkan untuk elemen lain ada di dalam button. Hal ini artinya adalah kita dapat menggabungkan text dan gambar pada button antara tag <button> dengan </button>. Untuk tag input dengan atribut type diisi hidden artinya adalah bahwa sebenarnya ada form di halaman tersebut namun disembunyikan. Kalau di web browser kita gunakan option view source, maka akan tampak bahwa di kode HTML nya terdapat tag <form>. Berikut contohnya, sebelumnya sudah disediakan gambar di folder d:/Bahan Ajar Multimedia/Gambar/add.png, 1. Tulis kode HTML berikut di notepad <form action="http://www.example.com/add.php"> III- 34 Bab 3 Perintah/Tag HTML Dasar <button><img src="D:/Bahan Ajar Multimedia/Gambar/add.gif" alt="add" width="10" height="10" /> Tambah</button> <input type="hidden" name="bookmark" value="lyrics"/> </form> 2. Simpan dengan nama file hiddenform.html dan buka di web browser. Elemen Form Pengelompokan Kita dapat mengelompokan kontrol yang berkaitan bersama dalam elemen <fieldset>. Kebanyakan browser akan menampilkan fieldset dengan garis di sekitar tepi untuk menunjukkan bagaimana mereka terkait. Munculnya ini baris dapat disesuaikan dengan menggunakan CSS. Elemen <legend> dapat disertakan setelah pembukaan tag <fieldset> dan berisi caption yang membantu mengidentifikasi maksud dari pengelompokkan form tersebut. Lakukan praktik berikut 1. Buka notepad dan tulis kode HTML berikut <fieldset> <legend>Contact details</legend> <label>Email:<br/> <input type="text" name="email" /></label><br/> <label>Mobile:<br/> <input type="text" name="mobile" /></label><br/> <label>Telephone:<br/> <input type="text" name="telephone" /></label> </fieldset> 2. Simpan dengan nama file grouping-form.html 3. Buka di web browser dan perhatikan HTML 5 : Validasi Form Sering kali dalam menginput data, user melakukan kesalahan yang bisa jadi diakibatkan oleh bentuk form yang tidak jelas. Misalnya bahwa form tersebut harus terisi atau tidak boleh dikosongkan. Mekanisme ini disebut validasi form. Validasi ini bermanfaat karena, Bab 3 Perintah/Tag HTML Dasar III- 35 1. Mengurangi beban kerja server akibat isian yang salah 2. Memberikan pemberitahuan yang cepat kepada user ketika salah menginput data. Untuk dapat lebih memahaminya, lakukan praktik berikut 1. Buka Notepad dan tuliskan kode HTML berikut <form action=http://www.example.com/login/ method="post"> <label for="username">Username:</label> <input type="text" name="username" required="required" /></title><br/> <label for="password">Password:</label> <input type="password" name="password" required="required" /> <input type="submit" value="Submit" /> </form> 2. Simpan dengan nama file validasi-form.html 3. Buka di web browser, dan perhatikan jika form password tidak diisi. HTML 5 : Input Tanggal Dalam sebuah form, sering kali kita diminta untuk menginput tanggal. Pada HTML versi 5 ke atas, telah dilengkapi form untuk menginput tanggal sehinggal formatnya tidak akan salah. Untuk menginput tanggal, pada tag <input> kita isi kolom type dengan date. Berikut contoh kode HTML nya: 1. Buka notepad dan tuliskan kode HTML berikut <form action=http://www.example.com/bookings/ method="post"> <label for="username">Tanggal Keberangkatan:</label> <input type="date" name="depart" /> <input type="submit" value="Submit" /> </form> 2. Simpan dengan nama file form-tanggal.html 3. Buka di web browser HTML 5 : Input email dan URL III- 36 Bab 3 Perintah/Tag HTML Dasar Di dalam form sering juga dijumpai form untuk menginput alamat email atau URL. Karena kedua jenis input ini memiliki format yang baku, maka pada HTML 5 telah dilengkapi validasi untuk mencegah input email atau URL dengan format yang salah atau bukan merupakan alamat email atau URL. Berikut contoh kode program untuk input email dimana pada tag <input> kolom type diisi email, 1. Buka notepad dan tuliskan kode HTML berikut <form action="http://www.example.org/subscribe.php"> <p>Please enter your email address:</p> <input type="email" name="email" /> <input type="submit" value="Submit" /> </form> 2. Simpan dengan nama file input-email.html 3. Buka di web browser dan perhatikan apabila diinput alamat email dengan format bukan format alamat email. Untuk input jenis URL, hampir sama dengan email, pada tag <input> kolom type diisi dengan url. Berikut contoh kode program untuk dipraktikkan, 1. Buka notepad dan tuliskan kode HTML berikut <form action="http://www.example.org/profile.php"> <p>Please enter your website address:</p> <input type="url" name="website" /> <input type="submit" value="Submit" /> </form> 2. Simpan dengan nama file input-url.html 3. Buka di web browser dan perhatikan apabila form diisi dengan format yang bukan alamat url. HTML 5 : Input Pencarian Terkadang dalam form yang kita buat diperlukan kolom pencarian. Pada tag <input> untuk melakukan pencarian maka kolom type diisi dengan search. Berikut contohnya 1. Buka notepad dan tulis kode HTML berikut Bab 3 Perintah/Tag HTML Dasar III- 37 <form action="http://www.example.org/search.php"> <p>Cari:</p> <input type="search" name="search" /> <input type="submit" value="Search" /> </form> 2. Simpan dengan nama file pencarian.html 3. Buka pada web browser 4. Tambahkan kode berikut <form action="http://www.example.org/search.php"> <p>Cari:</p> <input type="search" name="search" placeholder="Masukan Kata Kunci" /> <input type="submit" value="Search" /> </form> 5. Buka pada web browser kembali, perhatikan bedanya dengan penambahan atribut placeholder. Latihan Praktikan semua langkah di setiap subbab dan perhatikan serta tuliskan beberapa jawaban dari pertanyaan yang ada. III- 38 Bab 3 Perintah/Tag HTML Dasar
