Chapter 5 HTML Part 2 MUHAMMAD NUR FAIZ

Chapter 5 HTML Part 2 MUHAMMAD NUR FAIZ

Kuis (Output seperti Gambar)

Kuis

HTML Lanjutan • Membuat Header, Content dan Footer • Membuat Tabel • Membuat Form

SEMANTIC WEB Semantik adalah cabang linguistik yang mempelajari makna / arti yang terkandung dalam bahasa, kode, atau jenis lain dari representasi. Dengan kata lain, semantik adalah studi tentang makna. Semantik biasanya berhubungan dengan dua aspek lain: sintaks, pembentukan simbol kompleks dari simbol yang lebih sederhana, dan pragmatis, penggunaan praktis simbol oleh rakyat dalam konteks tertentu.

HTML Lanjutan

HTML Lanjutan Tag <section> digunakan untuk memisahkan bagian-bagian dari struktur web Tag <main> cocok digunakan untuk menandakan bagian utama dari sebuah halaman. Tag <article> bertujuan untuk menampung konten web yang merupakan. . Tag <aside> bertujuan untuk menandai bagian web yang bukan berisi konten utama, tetapi memiliki kaitan dengan artikel yang saat ini ditampilkan. Bagian paling pas untuk tag <aside>adalah sidebar. Tag <footer> biasannya digunakan pada bagian bawah halaman, dimana kita menampilkan beberapa informasi mengenai website.

HTML Lanjutan Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan dalam bentuk tabel pada HTML, digunakan tag <table> …</table>. Elemen tabel berisi properti <tr>…</tr> untuk menentukan baris (table row) yang didalamnya terdapat properti <td>…</td> untuk menampilkan data pada setiap sel tabel (table data).

HTML Tabel Lanjutan Struktur lengkap dari elemen tabel adalah sebagai berikut: 1. Atribut Elemen Table width = panjang ( lebar tabel, pixel atau persen ) height = panjang ( tinggi tabel, pixel atau persen) border = pixel ( tebal garis tepi ) cellspacing = pixel ( spasi antar sel ) cellpadding = pixel ( spasi di dalam ) align = [ left | center | right ] ( perataan tabel) bgcolor = warna ( warna latar belakang tabel)

HTML Tabel Lanjutan 2. Atribut Table Row align = [left| center|right] (perataan sebaris sel secara horizontal) valign = [top|middle|bottom] (perataan sebaris sel secara vertical) bgcolor = warna ( warna latar belakang baris)

HTML Tabel Lanjutan 3. Atribut Table Data rowspan = angka (baris yang di span oleh sel) colspan = angka (kolom yang di span oleh sel) align = [ left | center | right ] ( perataan horizontal) valign = [top | middle | bottom ] (perataan vertical) width = pixel ( lebar sel, pixel atau persen ) height = panjang ( tinggi sel, pixel atau persen) bgcolor = warna ( warna latar belakang sel)

HTML Form pada halaman web didefinisikan dengan pasangan tag <FORM> dan </FORM>. Tag <FORM> memiliki dua atribut yang penting, yaitu atribut METHOD untuk menentukan bagaimana form diberlakukan, dan atribut ACTION yang sering diisikan URL tepat pemrosesan form selanjutnya. Struktur dasar form adalah : <FORM [METHOD=”[POST|GET]”ACTION=”URL”]> … … </FORM>

HTML Form Input adalah sesuatu yang dimasukkan oleh pembaca halaman web, salah satu contohnya adalah input berupa teks. Input berfungsi untuk mendefinisikan input yang akan dimasukkan pengguna. Elemen input tidak mempunyai tag penutup dan harus berada di dalam elemen FORM. Elemen ini mempunyai beberapa atribut yaitu :

HTML Form

Header <div id=‘’header’’> <h 1 id=‘’logo’’>Miniml</h 1> <ul id=‘’menu’’> <li><a href=‘’#’’>Home</a></li> <li><a href=‘’#’’>Portfolio</a></li> <li><a href=‘’#’’>Blog</a></li> <li><a href=‘’#’’>Contact</a></li> </ul> </div>

HTML Form Lanjutan Contoh penulisan input : <input name="name" size="number" type="text"|"checkbox"|"radio"|"submit"|"reset" value="value" checked >

HTML Form Lanjutan Elemen input mempunyai beberapa jenis, diantaranya : 1. Text Input tipe Text digunakan untuk memasukkan karakter-karakter yang jumlahnya tidak terlalu banyak. Contoh : Nama : <input type="text" size="25" /> 2. Password Input tipe Password hampir sama dengan Text hanya saja karakter yang diketik dalam kolom password otomatis akan terlihat ***** untuk menjaga kerahasiaan dari password tersebut. Contoh : Password : <input type="password" size="25" />

HTML Form Lanjutan 3. Checkbox digunakan jika pilihan yang disediakan dapat dipilih lebih dari satu. Contoh : Asisten pemrograman web favorit anda: <input type="checkbox"> Rahmi <input type="checkbox"> Budi <input type="checkbox"> Lia <input type="checkbox"> Ahmad

HTML Form Lanjutan 4. Radio digunakan apabila pilihan yang disediakan hanya dapat dipilih satu saja. Contoh : Asisten pemrograman web favorit anda : <input name="favorit" value="rahmi" type="radio"> Rahmi <input name="favorit" value="budi" type="radio"> Budi <input name="favorit" value="lia" type="radio"> Lia <input name="favorit" value="ahmad" type="radio"> Ahmad

HTML Form Lanjutan 5. Select digunakan apabila tampilan pilihan yang kita sediakan berbentuk dropdown. Sebenarnya aplikasinya mirip dengan Radio yaitu pilihan yang boleh dipilih hanya satu. Select digunakan selalu bersamaan dengan Option. Contoh : Asisten pemrograman web favorit anda: <select name="favorit"> <option>Rahmi</option> <option>Budi</option> <option>Lia</option> <option>Ahmad</option>

HTML Form Lanjutan 6. Textarea dapat menampung karakter dalam jumlah besar. Contoh : Pesan Anda : <textarea cols=” 50” rows=” 10”></textarea> 7. Submit Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen FORM.

HTML Form Lanjutan 8. Reset Digunakan untuk mereset semua masukan form. Untuk menambahkan tombol Submit dan Reset pada form maka kita dapat menambahkan kode HTML berikut : <tr> <td colspan="2" align="center"> <input type="submit" name="submit" value="submit"> <input type="reset" name="reset" value="reset"> </td> </tr>

HTML Form Lanjutan

Latihan Tabel

Source Code Tabel

Latihan Tabel

Source Code Tabel <table border="1" width="800"> <tr> <td align="center" colspan="3">1</td> </tr> <td align="center" colspan="1">2</td> <td align="center" rowspan="2" width="300">4</td> </tr> <td align="center" colspan="1">3</td> </tr> <td align="center" colspan="3">7</td> </tr> </table>

Latihan Form

Source Code Form <form> Nama: <input type="text" name="nama" value="" /><br /> Kelas: <input type="password" name="" /><br /> Jenis Kelamin : <input type="radio" name="jenis_kelamin" value="laki-laki" checked />Laki - Laki <input type="radio" name="jenis_kelamin" value="perempuan" />Perempuan

Source Code Form <br /> Hobi: <input type="checkbox" name="hobi_baca" /> Membaca Buku <input type="checkbox" name="hobi_nulis" checked /> Menulis <input type="checkbox" name="hobi_mancing" /> Memancing <br />

Source Code Form Asal Kota: <select name="asal_kota" > <option value="jkt"> Jakarta</option> <option>Bandung</option> <option value="jogja" selected>Jogja</option> <option value="pwt" selected>Purwokerto</option> <option value="" selected>Lainnya</option> </select> <br />

Source Code Form <aside>Komentar Anda: </aside> <textarea rows="5" cols="20"> </textarea> <br /> <input type="submit" value="Betul!" > </form>

Validasi Form

Source Code <table width="800" align="left" cellpadding="2" cellspacing="2"> <tr> <td width="350">Email : </td> <td><input type="email" size="25" title="abcd@email. com">  abcde@email. com</td> </tr> <td width="350"> Password : </td> <td><input type="password" pattern="(? =. *d)(? =. *[a-z])(? =. *[A-Z]). {8, }" title="minimal 8 karakter harus ada huruf besar dan kecil"></td> </tr> </table>