Recommended
More Related Content
Similar to Chapter-02 Pemrograman Dasar HTML & CSS.pptx
Similar to Chapter-02 Pemrograman Dasar HTML & CSS.pptx (20)
Recently uploaded
Recently uploaded (20)
Chapter-02 Pemrograman Dasar HTML & CSS.pptx
- 1. ANG KIAN CHYE, S.Kom. EKSTRAKURIKULER CODING
- 2. OUR PROGRESS Pengenalan HTML, CSS, JS, PHP, SQL, dan Logika Pemrograman. Pemrograman Dasar HTML & Visual Studio Code CHAPTER 01 CHAPTER 02
- 3. 1. Click Extensions (Ctrl + Shift + X) 2. Search Open in Browser 3. Install
- 5. TAG HTML Struktur Tag <namatag atribut = “nilai”> <body bgcolor = “lightblue”> <body bgcolor = “red” id = “mybody”> Atribut lengkap : www.w3schools.com/tags
- 6. TAG HTML <p></p> : paragraf <br> : baris baru <hr> : garis horizontal <b></b> , <i></i> , <u></u> Penekanan : <strong></strong> , <em></em>
- 7. TAG HTML Heading <h1></h1> <h3></h3> <h5></h5> <h2></h2> <h4></h4> <h6></h6>
- 8. LIST HTML Order List (List Terurut) <ol> <li> item 1 </li> <li> item 2 </li> … </ol> Attribute : <ol type = “???”> </ol> 1 A a I i
- 9. LIST HTML Unorder List (List Tidak Terurut) <ul> <li> item 1 </li> <li> item 2 </li> … </ul> Attribute : <ul type = “???”> </ul> disc square circle
- 10. LIST HTML Definition List (Terminologi dan Defisini) <dl> <dt> term 1 </dt> <dd> description 1 </dd> <dt> term 2 </dt> <dd> description 2 </dd> … </dl>
- 11. PROJECT 1
- 12. ANSWER
- 13. Loading (30%) . . . Chapter 02
- 14. HYPERLINK <a></a> anchor / jangkar Analogi : jangkar – kapal hyperlink – sumber
- 16. HYPERLINK <a href=“???”></a> Internal link / relative url home.html ../login/index.html #about index.html#about
- 17. HYPERLINK <a target=“???”></a> Pages _self (halaman yg sama) _blank (tab baru) _parent (frame) _top (frame)
- 18. HYPERLINK
- 21. IMAGE <img src=“???”> Attribute : src alt title width height (px atau %)
- 22. HYPERLINK + IMAGE <a href=“???”> <img src=“???”> </a>
- 23. COMMENT / KOMENTAR <!-- Komentar isi disini -->
- 24. PROJECT 2 Buatlah form About Me dengan ketentuan : • Isi pada biodata bersifat bebas • Harus menggunakan image dan hyperlink sesuai dengan pembelajaran hari ini • Terdapat image hyperlink ke sosial media (link default diperbolehkan) Point penilaian : 50% Kreatifitas 30% Memenuhi ketentuan 20% Penggunaan Komentar
- 25. PROJECT 2
- 26. ANSWER
- 27. Loading (70%) . . . Chapter 02
- 28. TABLE BARIS ? KOLOM ? A B
- 29. TABLE BARIS
- 30. TABLE KOLOM
- 31. TABLE Baris 1 Kolom 1 Baris 1 Kolom 2 Baris 1 Kolom 3 Baris 2 Kolom 1 Baris 2 Kolom 2 Baris 2 Kolom 3 Baris 3 Kolom 1 Baris 3 Kolom 2 Baris 3 Kolom 3 CELL / DATA
- 33. SIMPLE TABLE <table> <tr> table row … </tr> </table> Membuat baris/row baru
- 34. SIMPLE TABLE <table> <tr> <td> … </td> table data </tr> </table> Membuat kolom atau data didalam row
- 35. SIMPLE TABLE <table> <tr> <td> baris 1, kolom 1 </td> <td> baris 1, kolom 2 </td> </tr> <tr> <td> baris 2, kolom 1 </td> <td> baris 2, kolom 2 </td> </tr> </table>
- 36. COMPLEX TABLE <table> <thead> <tr> <th> </th> <th> Kolom 1 </th> Header <th> Kolom 2 </th> </tr> </thead> <tbody> <tr> <th> Baris 1 </th> ------------- Header <td> Baris 1, Kolom 1 </td> <td> Baris 1, Kolom 2 </td> </tr> <tr> <th> Baris 2 </th> ------------- Header <td> Baris 2, Kolom 1 </td> <td> Baris 2, Kolom 2 </td> </tr> </tbody> </table>
- 37. TABLE - ATTRIBUTE Attribute : border cellspacing cellpadding colspan rowspan CSS
- 38. TABLE - ATTRIBUTE Border (bingkai/pembatas antara cell satu dengan cell lainnya)
- 39. TABLE - ATTRIBUTE Cellspacing (jarak antara boder cell dengan border table)
- 40. TABLE - ATTRIBUTE Cellpadding (jarak antara boder cell dengan isi/value)
- 41. TABLE - ATTRIBUTE Cellspacing VS Cellpadding
- 42. TABLE - COLSPAN Colspan (menggabungkan kolom satu dengan kolom lainnya)
- 43. TABLE - ROWSPAN Rowspan (menggabungkan baris satu dengan baris lainnya)
- 44. LATIHAN Buatlah Kerangka Monopoli (tidak dikumpul) Tips : 1) Buat terlebih dahulu table 5x5 nya 2) Hapus baris/data yang akan dikosongkan untuk membuat colspan dan rowspan 3) Masukkan td beserta attribute rowspan/colspannya
- 45. LATIHAN
- 46. FORM FORM adalah sebuah element/tag pada sebuah HTML yang digunakan untuk mengelola dari input yang dilakukan oleh user
- 47. FORM
- 48. FORM Form 1 : Log In Form 2 : Sign Up
- 49. FORM
- 50. FORM Form 1 : Log In
- 52. FORM - INPUT <input type=“???”> value : text password radio checkbox
- 53. FORM – LABEL (Suatu tag utk pelabelan tag lain) <label for=“???”> … </label> Isi for menggunakan id Contoh : <label for=“username”>Username : </label>
- 54. FORM - INPUT & LABEL
- 55. FORM - INPUT & LABEL INPUT LABEL
- 56. FORM - INPUT & LABEL
- 57. FORM - BUTTON <button type=“???”> … </button> Attribute : submit reset button menu
- 58. FORM - BUTTON
- 60. FORM - TEXTAREA
- 61. FORM - SELECT <select> <option> opsi 1 </option> <option> opsi 2 </option> … </select>
- 62. FORM - SELECT
- 63. PROJECT 3 Buatlah form Pendaftaran dgn ketentuan : • Tema bersifat bebas (cth: Form Pendaftaran Siswa Baru) • Bebas menggunakan tag & attribute apa saja • Input yang diminta sesuai dengan form pendaftaran pada umumnya Point penilaian : 50% Kreatifitas 30% Memenuhi ketentuan 20% Penggunaan Komentar
- 64. PROJECT 3 Tips : Rancang dulu kerangka form yang diinginkan
- 65. PROJECT 3 Tips : Bungkus form anda menggunakan table dan css
- 66. PROJECT 3 Tips : Kemudian ubah table border menjadi “0”
- 68. OUR PROCESS Pengenalan HTML, CSS, JS, PHP, SQL, dan Logika Pemrograman. Pemrograman Dasar HTML & Visual Studio Code CHAPTER 01 CHAPTER 02