Di pertemuan ke 5 DPK ini, seluruh murid diminta untuk memahami dan membuat script html. Karena murid semua sudah memahami dasar-dasar bahasa pemrograman HTML, sudah saatnya mempelajari hal hal di html lebih lanjut seperti membuat table beserta komponen-komponen nya.

Nah ayuk simak apa itu table dan komponen-komponen lainnya.

Tabel digunakan untuk mengelompokkan suatu data secara terstruktur dan terdiri dari baris, kolom, dan sel.

Baris, kolom, dan sel pada suatu tabel dengan HTML ada beberapa teks atau elemen yang harus kita ketahui, akan tetapi pada dasarnya kita sudah bisa membuat tabel dengan menggunakan tiga elemen HTML berikut:

Elemen <table> digunakan untuk mendefinisikan pembuatan tabel.

Elemen <tr> digunakan untuk mendefinisikan pembuatan baris pada tabel.

Elemen <td> digunakan untuk membuat kolom atau sel di setiap baris pada tabel.

Seiring dengan perkembangan dan kebutuhan akan tabel, HTML juga menyediakan elemen-elemen opsional lain dalam pembuatan tabel seperti berikut.

Elemen <th> digunakan untuk mendefinisikan header di dalam tabel.

Elemen <thead> digunakan untuk membungkus konten bagian judul atau kepala tabel.

Elemen <tbody> digunakan untuk membungkus konten bagian isi atau tubuh dari tabel.

Elemen <tfoot> digunakan untuk membungkus konten bagian kaki atau bawah dari tabel

Nah ini contoh script buat tabel sederhana nya ya:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Nama</th>
    <th>Kelamin</th>
    <th>Nama Orangtua</th>
  </tr>
  <tr>
    <td>Syaddad Raihan Putra</td>
    <td>Pria</td>
    <td>Sri Mahmuryati</td>
  </tr>
  <tr>
    <td>Fauzan Badar Brahim</td>
    <td>Pria</td>
    <td>Zahroni</td>
  </tr>
  <tr>
    <td>Felicia Rivera</td>
    <td>Perempuan</td>
    <td>Sugianto</td>
  </tr>
  <tr>
    <td>Wignya Kaestoneka Pekih</td>
    <td>Pria</td>
    <td>Dwi Setiantini</td>
  </tr>
  <tr>
    <td>Haris Nur Cahyanto</td>
    <td>Pria</td>
    <td>Nuryanto</td>
  </tr>
  <tr>
    <td>Yudha Pratama</td>
    <td>Pria</td>
    <td>Andi</td>
  </tr>
</table>

</body>
</html>

Nah kita lanjut membuat formulir di HTML

HTML form digunakan untuk memberikan data ke sebuah server. Sebuah HTML form dapat memiliki input-input elemen antara lain text field, checkbox, radio button, submit button, dan lain-lain. Sebuah form juga dapat mengandung select list, text area, field set, legend, dan element tabel.

Nah tanpa basa basi mari kita langsung melihat contoh script html nya berserta hasil nya ya:

<!DOCTYPE html>
<html>
<body>

<h2>The name Attribute</h2>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="Justin"><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

Nah habis itu kita langsung mempelajari cara memasukan link di html dan bisa ditampilkan di blogspot kita ini.

Contoh script untuk memasukkan link sangatlah simpel hanya dengan <a href="url">text link nya</a>

Yuk kita langsung coba masukin link buat beberapa website andalan kita untuk belajar

<html>
<body>

<h1>HTML Links</h1>

<p><a href="https://www.w3schools.com/">Kunjungi Web W3Schools.com ya!</a></p>
<p><a href="https://id.wikipedia.org/wiki/Halaman_Utama/">Kunjungi Wikipedia ya!</a></p>
<p><a href="https://www.google.com/?hl=id">Searching selalu disini aja ya!</a></p>


</body>
</html>

Lanjut kita sisipkan gambar di blogspot ini dengan script seperti berikut

<DOCTYPE html!>
        <html>
        <body>
        
        <h2>Foto suasana kelas PPLG X 2 </h2>
        
        <img src="https://i.postimg.cc/vZDt5Xsf/IMG-20220801-104629.jpg">
        
        </body>
        </html>

Dan yang terakhir kita akan memasukan video beserta link youtube

dan inilah hasil akhir dari blog ini

<!DOCTYPE html>
        <html>
        <body>
        
        <video autoplay>
          <source src="https://www.veed.io/view/a5891c97-5205-4c28-a254-f443b4fd50dd?sharingWidget=true" type="video/mp4">
          <source src="https://www.veed.io/view/a5891c97-5205-4c28-a254-f443b4fd50dd?sharingWidget=true" type="video/ogg">
        </video>
        
        </body>
        </html>

HTML Table

Nama	Kelamin	Nama Orangtua
Syaddad Raihan Putra	Pria	Sri Mahmuryati
Fauzan Badar Brahim	Pria	Zahroni
Felicia Rivera	Perempuan	Sugianto
Wignya Kaestoneka Pekih	Pria	Dwi Setiantini
Haris Nur Cahyanto	Pria	Nuryanto
Yudha Pratama	Pria	Andi