Belajar HTML Dasar Part 3 – Jenis jenis Tag HTML Lanjutan

Belajar HTML Dasar – Melanjutkan pada artikel sebelumnya yaitu tentang belajar html dasar part 2 tentang jenis-jenis tag pada html, dimana kita telah membahas jenis yang ada atau yang sering ditulis pada element <head>, pada artikel kali ini yiptechid akan membahas jenis-jenis tag yang biasa ditempatkan pada element <body>.

Jenis-jenis tag html

Tag Judul

  • <h1> s/d <h6> : berfungsi untuk membuat judul atau heading
  • <hr> : Memisahkan konten (biasanya ditampilkan garis pembatas)

Tag Paragraf

  • <p> : Membuat paragraf
  • <br> : Membuat garis/ baris baru
  • <pre> : Memfortmat teks atau kalimat

Tag Formating

  • <b> : tag ini berfungsi untuk menebalkan tulisan
  • <strong> : berfungsi sebagai format huruf tebal untuk pengoptimalan SEO
  • <i> : tag ini berfungsi untuk memiringkan tulisan
  • <em> : befungsi sebagai format huruf miring untuk pengoptimalan SEO
  • <u> : tag ini berfungsi untuk memberikan garis bawah tulisan
  • <ins> : befungsi sebagai format huruf bergaris bawah untuk pengoptimalan SEO
  • <del> : tag ini befungsi sebagai format huruf bergaris tengah (teks di coret) untuk pengoptimalan SEO
  • <s> : berfungsi untuk memberikan garis tengah tulisan (teks di coret)
  • <small> : tag ini berfungsi untuk mengecilkan tulisan
  • <sup> : berfungsi sebagai teks superscript
  • <sub> : tag ini befungsi sebagai teks subscript
  • <mark> : berfungsi untuk menandai kata

Tag Gambar

  • img : Elemen untuk mendefinisikan gambar
  • src : Atribut untuk menentukan URL gambar
  • alt : Mendefinisikan teks pada gambar, jika gambar tidak dapat di tampilkan
  • width – height : Menentukan ukuran panajng dan lebar gambar
  • float : Properti untuk float image pada CSS
  • map : Mendefinisikan gambar peta
  • area : Mendefinisikan area atau daerah-daerah gambar pada peta
  • picture : Menampilkan gambar yang berbeda untuk perangkat yang berbeda

Tag Form

  • <form> : Membuat formulir untuk mengumpulkan input pengguna
  • <input> : Membuat tipe inputan pada form yang akan dibuat
  • <textarea> : Elemen untuk mendefinisikan field input
  • <label> : Memberikan label pada elemen input
  • <filedset> : Mengelompokan elemen yang terdapat pada sebuah form
  • <select> : Membuat input dengan pilihan yang berbentuk list drop down
  • <optgroup> : Mengelompokan beberapa pilihan pada daftar pilihan input
  • <option> : Mendefinisikan opsi yang bisa dipilih
  • <button> : Membuat Button
  • <datalist> : Membuat daftar pilihan untuk input data
  • <output> : Menampilkan hasil dari hitungan

Tag Tabel

  • <table> : Membuat tabel pada web
  • <tr> : Berfungsi membuat baris pada tabel
  • <td> : Membuat kolom pada tabel
  • <th> : Berfungsi membuat judul pada kolom. Contohnya nama, kelas, dan alamat.
  • <caption> : Membuat judul tabel
  • border : Mengatur garis tabel
  • border-collapse : Mengatur batas garis tabel
  • padding : Mengatur padding pada cell
  • text-align : Mengatur perataan pada konten tabel
  • border-spacing : Mengatur jarak spasi garis tabel
  • colspan : Menggabungkan beberapa kolom. Kalau di office disebutnya Merge Cell
  • rowspan : Menggabungkan beberapa baris
  • id : Memberikan id pada tabel atau kolom
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 5px;
}
table {
  border-spacing: 15px;
}
</style>
</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>

<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>

<p>Try to change the border-spacing to 5px.</p>

</body>
</html>

Tag daftar/List

  • <ul> : Untuk membuat tampilan daftar menggunakan simbol seperti bullet, cyrcle, dan lainnya.
  • <ol> : Membuat daftar menggunakan nomor, huruf, romawi, dan lainnya
  • <li> : Menentukan berbagai item yang ingin ditampilkan
  • <dl> : Mendefinisikan daftar deskripsi
  • <dt> : Mendefinisikan istilah deskripsi
  • <dd> : Menggambarkan istilah dalam daftar deskripsi
  • <type> : Menentukan jenis penomoran

Demikianlah pembahasan mengenai jenis-jenis tag yang sebagian besar dipakai di element tag <body>, jangan lupa dicoba dirumah dan semoga artikel ini bermanfaat.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *