MODUL 2 HTML (HyperText Mark-Up Language) Laboratorium
advertisement
Praktikum Pemrograman Berbasis Web MODUL 2 HTML (HyperText Mark-Up Language) STIMIK STMIK Pradnya Paramita 2017 Laboratorium Komputer PPKIA Pradnya Paramita Malang [email protected] Praktikum Pemrograman Berbasis Web Pertemuan 2 2.1 Tujuan : 1. Mahasiswa dapat memahami dan mengenai perintah – perintah HTML 2. Mahasiswa dapat membuat beberapa halaman website sederhana 2.2 Materi : 1. Tabel 2. List 3. Form 4. Semantic HTML 2.3 Teori 2.3.1 Semantic HTML Semantik adalah studi tentang makna kata-kata dan frase dalam bahasa. Unsur semantik = elemen dengan makna. Unsur semantik jelas menggambarkan artinya untuk kedua belah pihak yaitu browser dan pengembang. Contoh elemen non-semantik: <div> dan <span> - tidak menceritakan apa-apa tentang isinya. Contoh elemen semantik: <form>, <table>, dan <article> - Jelas mendefinisikan isinya. Banyak situs web berisi kode HTML seperti: <div id = "nav"> <div class = "header"> <div id = "footer"> untuk menunjukkan navigasi, header, dan footer. HTML5 menawarkan unsur-unsur semantik baru untuk menentukan bagian-bagian yang berbeda dari suatu halaman web: <article> = mendefinisikan sebuah artikel <aside> =Mendefinisikan konten selain dari konten halaman <details> = Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan <figcaption> = Mendefinisikan sebuah caption untuk elemen <figure> <figure> = Menentukan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll <footer> = Mendefinisikan untuk dokumen atau bagian footer <header> = Menentukan untuk dokumen atau bagian header <main> = Menentukan isi utama dokumen <mark> = Mendefinisikan teks yang ditandai / disorot <nav> = Mendefinisikan link navigasi <section> = Mendefinisikan sebuah bagian dalam sebuah dokumen <summary> = Mendefinisikan sebuah judul terlihat untuk <details> elemen <time> = Mendefinisikan tanggal / waktu STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web Elemen <section> elemen mendefinisikan bagian dalam sebuah dokumen. Sebuah halaman rumah bisa normal dibagi menjadi beberapa bagian untuk pengenalan, konten, dan informasi kontak. Skrip Hasil <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section> elemen <Article> menentukan independen, konten mandiri. Contoh di mana elemen <article> dapat digunakan: posting forum, blog post. Artikel koran Skrip Hasil <article> <h1>What Does WWF Do?</h1> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article> elemen <header> menentukan header untuk dokumen atau bagian. Elemen <header> harus digunakan sebagai wadah untuk konten pengantar. Contoh berikut mendefinisikan header untuk sebuah artikel: Skrip Hasil <article> <header> <h1>What Does WWF Do?</h1> <p>WWF's mission:</p> </header> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article> elemen <footer> menentukan footer untuk dokumen atau bagian. Sebuah footer biasanya berisi penulis informasi dokumen, hak cipta, link ke persyaratan penggunaan, informasi kontak, dll Skrip Hasil <footer> <p>Posted by: Hege Refsnes</p> <p>Contact information: <a href="mailto:[email protected]"> [email protected]</a>.</p> </footer> STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web elemen <nav> mendefinisikan satu set link navigasi. Perhatikan bahwa tidak semua link dari dokumen harus di dalam elemen <nav>. elemen <nav> dimaksudkan hanya untuk blok utama link navigasi. Skrip Hasil <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> elemen <aside> mendefinisikan beberapa konten selain dari konten itu ditempatkan di (seperti sidebar).Samping konten harus terkait dengan konten sekitarnya. Skrip Hasil <p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside> Tujuan dari sosok caption adalah menambahkan penjelasan visual untuk gambar. <Img> elemen mendefinisikan gambar, <figcaption> mendefinisikan judul.Dalam HTML5, gambar dan keterangan dapat dikelompokkan bersama dalam sebuah elemen <figure>: Skrip Hasil <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption> </figure> 2.3.2 Tabel Untuk menambahkan sebuah table yang baris dan kolomnya dapat anda sesuaikan kebutuhan table yang anda buat. Elemen table terdiri dari <tr>, <td> dan <th>. Dimana fungsi masing – masing berbeda, <tr> digunakan untuk membuat baris, <th> untuk membuat header, <td> digunakan untuk membuat kolom. <Td> elemen adalah wadah data tabel. Mereka dapat berisi segala macam elemen HTML; teks, gambar, daftar, tabel lain, dll. Atribut elemen Tabel pada HTML 5 sebagai berikut : Tag <table> <tr> <td> <th> <caption> CSS border property CSS border-collapse CSS padding property CSS text-align CSS border-spacing STMIK Pradnya Paramita 2017 Definisi elemen untuk mendefinisikan tabel elemen untuk menentukan baris tabel elemen untuk menentukan data tabel elemen untuk menentukan tabel pos elemen untuk mendefinisikan judul tabel Untuk menentukan jarak garis Untuk menjadikan satu garis Untuk menambah padding untuk sel Untuk menyelaraskan teks sel Untuk mengatur jarak antara sel- sel [email protected] Praktikum Pemrograman Berbasis Web Tag colspan rowspan id Definisi untuk membuat rentang sel banyak kolom untuk membuat rentang sel banyak baris untuk mendefinisikan identitas satu tabel Contoh : <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> Pada elemen Table HTML menggunakan property CSS : Skrip 5, <style> table, th, td { border: 1px solid black; (1) border-collapse: collapse; (2) } th, td { padding: 15px; (3) } th { text-align: left; (4) } table { border-spacing: 15px;(5) } </style> STMIK Pradnya Paramita 2017 Untuk menambahkan sebuah border hasil [email protected] Praktikum Pemrograman Berbasis Web Jika Anda ingin garis batas jadi dalam satu garis, tambahkan properti CSS border-collapse. Sel Padding menentukan ruang antara isi sel dan perbatasannya. Jika Anda tidak menentukan bantalan, selsel tabel akan ditampilkan tanpa padding. Untuk mengatur padding, menggunakan properti CSS padding. HTML Table –align kiri. Secara default, judul tabel yang ada adalah tebal dan berada di tengah. Untuk menyelaraskan tajuk tabel maka align berada di kiri, menggunakan properti text-align CSS. jarak Padding Border Spacing Border menentukan ruang antara sel-sel. Untuk mengatur jarak antar garis, menggunakan properti CSS border-spacing, jika garisnya Cuma satu maka jaraknya tidak terlihat. Untuk membuat merger atau merekatkan beberapa kolom kita membutuhkan atribut colspan dan rowspan untuk merekatkan beberapa baris. Skrip <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table> <h2>Cell that spans two rows:</h2> <table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table> Hasil Untuk menambahkan keterangan pada tabel kita menggunakan <caption>, tag <caption> harus ditulis setelah tag <table> Skrip Hasil tag <table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> Untuk menentukan gaya khusus untuk tabel menambahkan atribut id ke tabel, contoh: Skrip Hasil khusus, maka perlu <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } table#t01 { width: 100%; background-color: #f1f1c1; } </style> </head> <body> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> <br> <table id="t01"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html> table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color:#fff; } table#t01 th { background-color: black; color: white; } 2.3 LITS List Item (LI) : digunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Daftar dapat bersarang di dalam daftar. Daftar item dapat berisi elemen HTML lainnya Atribut/elemen Definisi untuk mendefinisikan daftar unordered (tidak <ul> CSS list-style-type <ol> type <li> <dl> <dt> <dd> Skrip berurutan) untuk menentukan item daftar penanda untuk mendefinisikan daftar berurutan menentukan jenis penomoran untuk menentukan item daftar untuk mendefinisikan daftar deskripsi untuk mendefinisikan istilah deskriptif untuk menggambarkan istilah dalam daftar deskripsi <!DOCTYPE html> <html> <body> <h2>An Unordered HTML List</h2> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <h2>An Ordered HTML List</h2> <ol> STMIK Pradnya Paramita 2017 Hasil [email protected] Praktikum Pemrograman Berbasis Web <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> Unordered (Tidak berurutan) List HTML Dan List unordered dimulai dengan tag <ul>. Setiap item daftar dimulai dengan tag <li>. Daftar item akan ditandai dengan peluru (lingkaran hitam kecil) secara default. Unordered List mempunyai Pilihan penanda dengan menggunakan Properti CSS list-style-type. Skrip <h2>Unordered List with Disc Bullets</h2> <ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> 1. Disc = Menetapkan item daftar penanda dengan peluru (default) 2. Circle = Menetapkan item daftar penanda dengan lingkaran 3. Square = menetapkan item daftar penanda dengan persegi 4. None = tidak menggunakan penanda Ordered List atau Daftar HTML yang berurutan.Daftar ini memerintahkan dengan tag <ol>. Setiap item daftar dimulai dengan tag <li>. Daftar item akan ditandai dengan angka secara default: Skrip <h2>Ordered List with Numbers</h2> 1. Type =”1” : Daftar item diberi nomor dengan angka (default) <ol type="1"> 2. Type = “A” : Daftar item diberi <li>Coffee</li> nomor dengan huruf capital <li>Tea</li> 3. Type = “a” : Daftar item diberi <li>Milk</li> nomor dengan huruf kecil </ol> 4. Type = “I” : Daftar item diberi nomor dengan huruf romawi besar 5. Type = “i” : Daftar item diberi nomor dengan huruf romawi kecil HTML juga mendukung daftar deskripsi.Sebuah daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah. Tag <dl> mendefinisikan daftar deskripsi, tag <dt> mendefinisikan istilah (nama), dan Tag <dd> menjelaskan setiap istilah: Skrip <h2>A Description List</h2> Hasil <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> List atau daftar juga bisa bersarang, Daftar item dapat berisi daftar baru, dan elemen HTML lainnya, seperti gambar dan link, dll Skrip Hasil STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web <h2>A Nested List</h2> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> Daftar HTML bisa ditata dalam berbagai cara dengan CSS.Salah satu cara yang populer adalah gaya daftar horizontal, untuk membuat menu: Skrip <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } li { } Hasil float: left; li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a:hover { background-color: #111111; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html> STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web 2.4. HTML Forms Pada saat membuat form anda bisa meletakkan kontrol - kontrol pada form untuk memperbolehkan inputan dari user. Semua kontrol biasanya di letakkan di antara tag <FORM></FORM> tapi anda juga bisa meletakkan kontrol diluar tag tersebut. Untuk menambahkan kontrol gunakan tag <input>. Kegunaan Form Berikut ini beberapa contoh kegunaan Form dalam web: 1. memperoleh data-data user baik nama, alamat dan data lainnya 2. memperoleh informasi pembelian secara online 3. memperoleh feedback dari user mengenai website anda Pada dasarnya tag <Form> dan <Input> digunakan bersama – sama untuk meminta masukan dari user kemudian dikirimkan ke server. Tag <Form> menyediakan kerangkanya. Tag <Input> menyediakan elemennya. Standar penulisan form adalah sebagai berikut: <Form Method = ”POST / GET” Action = ”URL”> ... </Form> Attribute Method memiliki dua nilai, yaitu POST dan GET. Method GET berfungsi untuk mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL(Uniform Resource Locator) yang ditunjuk. Method POST berfungsi untuk mengirimkan datanya secara terpisah. Jika data masukkan terlalu banyak, disarankan menggunakan method POST. Attribut ACTION berisi URL dari program / dokumen yang berisi scripting yang dipanggil oleh form tersebut. Atribut Keterangan Name nama untuk form yang berlaku Method GET = data yang dikirim melalui URL address POST = data yang dikirimkan bersama HTTP header Action URL / File yang digunaka untuk menangkap dan mengolah nilai 2.4.1 Elemen Input Bentuk elemen yang paling penting adalah elemen <input>. elemen <Input> dapat ditampilkan dalam beberapa cara, tergantung pada jenis atribut. Macam – macam elemen input: <Input type = "text"> mendefinisikan satu baris kolom input teks. <Input type = "password"> mendefinisikan sebuah kolom password dengan karakter yang ditampilkan lingkaran atau bintang. <Input type = "submit"> mendefinisikan tombol untuk mengirimkan data formulir ke bentuk-handler. Bentuk-handler biasanya halaman server dengan script untuk memproses input data. <Input type = "reset"> mendefinisikan sebuah tombol reset yang akan mengatur ulang semua nilai bentuk ke nilai standar. STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web <Input type = "radio"> mendefinisikan tombol radio. Tombol radio hanya bisa di[ilih HANYA SATU dari sejumlah pilihan <Input type = "checkbox"> mendefinisikan sebuah kotak yang bisa dicentang. Pengguna bisa tidak memilih atau memilih lebih dari satu. Skrip <form action="/action_page.php"> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> <br><br> <input type="submit"> </form> User password:<br> <input type="password" name="psw"> Hasil <input type="submit" value="Submit"> <form action="/action_page.php"> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other<br><br> <input type="submit"> </form> <form action="/action_page.php"> <input type="checkbox" name="vehicle1" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle2" value="Car">I have a car <br><br> <input type="submit"> </form> Elemen <Select> mendefinisikan daftar drop-down. <Option> elemen mendefinisikan opsi yang bisa dipilih. Secara default, item pertama dalam daftar drop-down yang dipilih. Untuk menentukan pilihan pradipilih, menambahkan atribut selected untuk pilihan: Skrip <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit"> Hasil elemen <textarea> mendefinisikan field input multi-line (text area). Atribut rows menentukan jumlah terlihat baris dalam area teks. Atribut cols menentukan lebar terlihat dari area teks. Skrip Hasil STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web <form > <textarea name="message" rows="10" cols="30"> The cat was playing in the garden.</textarea> <br> <input type="submit"> </form> elemen <button> mendefinisikan sebuah tombol diklik Skrip Hasil <button type="button" onclick="alert('Hello World!')">Click Me!</button> Pada HTML 5 tabel terdapat beberapa element baru yaitu : elemen <datalist> menentukan daftar pilihan yang telah ditentukan untuk elemen <input>. Pengguna akan melihat daftar drop-down pilihan pradidefinisikan sebagai mereka input data. Daftar atribut dari elemen <input>, harus mengacu pada atribut id dari elemen <datalist>. Skrip Hasil <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> Tujuan dari elemen <keygen> adalah untuk menyediakan cara yang aman untuk mengotentikasi pengguna. elemen <keygen> menentukan bidang key generator-pair dalam formulir.Ketika formulir dikirimkan, dua tombol dihasilkan, satu pribadi dan satu publik. Kunci pribadi disimpan secara lokal, dan kunci publik dikirim ke server.Kunci publik dapat digunakan untuk menghasilkan sertifikat klien untuk mengotentikasi pengguna di masa depan. Skrip Username: <input type="text" name="user"> <br><br> Encryption: <keygen name="security"> <br><br> <input type="submit"> Hasil elemen <output> merupakan hasil perhitungan (seperti yang dilakukan oleh script). melakukan perhitungan dan menampilkan hasil dalam elemen <output>. <form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.valu e)"> 0 <input type="range" id="a" name="a" value="50"> STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form> Elemen Inputan baru di HTML 5, jenis inputan baru yang tidak didukung oleh browser web yang lebih lama, akan tetapi cara kerjanya seperti <input type = "text">. Berikut elemen inputan yang baru di HTML 5 : <Input type = "color"> digunakan untuk field input yang harus berisi warna. <Input type = "date"> digunakan untuk field input yang harus berisi tanggal. Tergantung pada dukungan browser, tanggal pemetik dapat muncul di bidang masukan <Input type = "datetime-local"> menentukan field input tanggal dan waktu, dengan tidak ada zona waktu. <Input type = "email"> digunakan untuk field input yang harus berisi alamat email. Tergantung pada dukungan browser, alamat e-mail dapat secara otomatis divalidasi ketika disampaikan. Beberapa smartphone mengenali jenis email, dan menambahkan ".com" ke keyboard untuk mencocokkan masukan email. <Input type = "month"> memungkinkan pengguna untuk memilih bulan dan tahun. <Input type = "angka"> mendefinisikan sebuah field input numerik. Anda juga dapat mengatur pembatasan apa nomor yang diterima. Contoh berikut menampilkan field input numerik, di mana Anda dapat memasukkan nilai dari 1 sampai 5: <input type = "range"> mendefinisikan kontrol untuk memasukkan nomor yang nilainya sebenarnya tidak penting (seperti kontrol slider). Kisaran default adalah 0 sampai 100. Namun, Anda dapat mengatur pembatasan nomor apa yang diterima dengan min, max, dan value. <Input type = "search"> digunakan untuk bidang pencarian (kolom pencarian berperilaku seperti kolom teks biasa). <Input type = "tel"> digunakan untuk field input yang harus berisi nomor telepon. <input type = "waktu"> memungkinkan pengguna untuk memilih waktu (tidak ada zona waktu) <Input type = "url"> digunakan untuk field input yang harus berisi alamat URL.Tergantung pada dukungan browser, bidang url dapat secara otomatis divalidasi ketika disampaikan.Beberapa smartphone mengenali jenis url, dan menambahkan ".com" ke keyboard untuk mencocokkan masukan url. <input type = "week"> memungkinkan pengguna untuk memilih satu minggu dan tahun. Skrip <form action="/action_page.php"> Select your favorite color: <input type="color" name="favcolor" value="#ff0000"> <input type="submit"> </form> STMIK Pradnya Paramita 2017 Hasil [email protected] Praktikum Pemrograman Berbasis Web Skrip <form action="/action_page.php"> Birthday: <input type="date" name="bday"> <input type="submit"> </form> Hasil <form action="/action_page.php"> Enter a date before 1980-01-01:<br> <input type="date" name="bday" max="1979-12-31"><br><br> Enter a date after 2000-01-01:<br> <input type="date" name="bday" min="2000-01-02"><br><br> <input type="submit"> </form> <form action="/action_page.php"> Birthday (date and time): <input type="datetime-local" name="bdaytime"> <input type="submit" value="Send"> </form> <form action="/action_page.php"> E-mail: <input type="email" name="email"> <input type="submit"> </form> <form action="/action_page.php"> Birthday (month and year): <input type="month" name="bdaymonth"> <input type="submit"> </form> <form action="/action_page.php"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> Aturan masukan/ Inputan pada HTML5. Berikut adalah daftar dari beberapa aturan masukan umum: Atribut Deskripsi Menentukan bahwa sebuah field input harus dinonaktifkan disabled Menentukan nilai maksimum untuk sebuah field input max maxlength Min pattern readonly Required Size Step Value Menentukan jumlah maksimum karakter untuk sebuah field input Menentukan nilai minimum untuk sebuah field input untuk Menentukan ekspresi reguler dan memeriksa nilai terhadap masukan Menentukan bahwa sebuah field input hanya bisa dibaca saja (tidak dapat diubah) Menentukan bahwa sebuah field input diperlukan (harus diisi) Menentukan lebar (dalam karakter) dari sebuah field input Menentukan interval nomor hukum untuk sebuah field input Menentukan nilai default untuk field input STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web 3.4 LATIHAN PRAKTIKUM 3.4.1 PENGGUNAAN TABEL 1. Membuat garis tabel menjadi satu garis. <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } </style> </head> <body> <table style="width:100%"> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> </body> </html> 2. Membuat meja lebar 300 piksel <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } </style> </head> <body> <table style="width:300px"> <tr> <th>First Name</th> <th>Last Name</th> STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> </body> </html> 3. Menambahkan keterangan dengan huruf "Nama" ke Tabel <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } </style> </head> <body> <table style="width:100%"> <caption>Names</caption> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> </body> </html> 4. Ubah garis tabel menjadi 5 piksel, dan berwarna merah. <!DOCTYPE html> <html> <head> <style> STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web table, th, td { border: 5px solid red; } th, td { padding: 5px; text-align: left; } </style> </head> <body> <table style="width:100%"> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> </body> </html> 5. menyelaraskan teks dalam tabel disebelah kiri <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; text-align: left; } </style> </head> <body> <table style="width:100%"> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web <td>94</td> </tr> </table> </body> </html> 6. Menambahkan warna latar belakang hitam dengan teks putih untuk semua baris tabel. <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; text-align: left; } tr { background-color : black; color : white; } </style> </head> <body> <table style="width:100%"> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> </body> </html> 2. Penggabungan sel dengan tag <ROWSPAN> dan <COLSPAN> a. Atribut ROWSPAN ditempatkan pada tag <TD> STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web b. Atribut COLSPAN bisa ditempatkan pada tag <TD> atau <TH> 3. Pengaturan jarak dalam tabel : CELLSPACING mengatur jarak bagian sel terhadap tepi dalam bingkai tabel. CELLPADDING mengatur jarak teks terhadap tepi kiri. 3.4.2 PENGGUNAAN FORM 1. Input data dengan input File info.htm yang dituju oleh web diatas. STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web 2. Penggunaan tipe checkbox 3. Penggunaan tombol radio dan komentar 4. Pemilihan dengan select STMIK Pradnya Paramita 2017 [email protected] Praktikum Pemrograman Berbasis Web 3.5 TUGAS 1.Buatlah seperti tampilan dibawah ini Nb : untuk kolom Negara isi dengan 1. USA, 2.Australia, 3. Germany 2.Buatlah Tabel STMIK Pradnya Paramita 2017 [email protected]
