PENGERTIAN, CIRI-CIRI, FUNGSI HTML & CONTOH FORM DAN TABEL PADA HTML

by 20.59 0 komentar
Pengertian HTML
Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. (Source : Wikipedia.com).

Ciri-Ciri HTML
Ciri Ciri HTML adalah sebagai berikut.
-> Dokumen HTML diawali dengan tag <html> dan diakhiri dengan </html>
Contoh Dokumen HTML
<html>
   <head>
        <title>Belajar HTML with KhoerPedia</title>
   </head>
<body>
   <h1>Bab Pertama</h1>
</body>
Belajar HTML with KhoerPedia

Bab Pertama


</html>
-> Setiap tag html pasti di awali dengan <..> dan diakhiri dengan </...> contohnya seperti dokumen html diatas.
-> Tidak case sensitive (huruf kapital dan kecil dianggap sama), akan tetapi untuk hasil yang lebih baik menggunakan lowercase (huruf kecil) karena berorientasi ke XHTML.
-> Ekstensi file berupa *.html atau *.htm

Kegunaan dan Fungsi HTML
HTML mempunyai kegunaan dan fungsi diantaranya adalah :
1. Untuk penulisan dengan gaya text
Dengan HTML kalian bisa menulis text dengan beberapa gaya contohnya text tebal, miring, garis bawah, coret dan masih banyak lagi.
2. Menentukan Urutan atau Bagian Susunan Text
Dengan HTML kalian bisa menentukan Heading, Sub Heading, Judul, Sub Judul.
Jadi intinya kegunaan HTML adalah sebagai Menyunting Format tulisan.

Kodingan Pembuatan Form Sederhana Pada HTML
<html>
<head>
<title>FORMULIR</title>
</head>
<body>
<h2>FORMULIR KEGANTENGAN</h1>
<form action="berhasil.html">
<table border="0">
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama" placeholder="Nama Anda" /></td>
</tr>
<tr/>
<tr>
<td>Alamat</td>
<td>:</td>
<td><input type="text" name="alamat" placeholder="Alamat Anda" /></td>
</tr>
<tr/>
<tr>
<td>Tempat Lahir</td>
<td>:</td>
<td><input type="text" name="tempat_lahir" placeholder="Tempat Lahir" /></td>
</tr>
<tr/>
<tr>
<td>Tanggal Lahir</td>
<td>:</td>
<td><input type="date" name="tanggal lahir"/></td>
</tr>
<tr/>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>
<input type="radio" name="jk" value="Laki-Laki"/>Laki-Laki
<br>
<input type="radio" name="jk" value="Perempuan"/>Perempuan
</td>
</tr>
<tr/>
<tr>
<td>No HP</td>
<td>:</td>
<td><input type="text" name="no_hp" placeholder="No. HP Anda" /></td>
</tr>
<tr/>
<tr>
<td>Email</td>
<td>:</td>
<td><input type="mail" name="email" placeholder="Email Anda" /></td>
</tr>
<tr/>
<tr>
    <td>Kabupaten</td>
    <td>:</td>
    <td>
      <select name="kabupaten">
      <option>Select Kabupaten...</option>
      <option>Badung</option>
      <option>Bangli</option>
      <option>Buleleng</option>
      <option>Denpasar</option>
      <option>Gianyar</option>
      <option>Jembrana</option>
      <option>Karangasem</option>
      <option>Klungkung</option>
      <option>Tabanan</option>
    <option>---SELECT---</option>
    </select>
    </td>
    </tr>
    <tr/>
<tr>
  <td><input type="submit" name="submit" value="simpan"/></td>
  <td><input type="Reset" name="Reset" value="Batal"/></td>
  </tr>
  </table>
  </form>
</body>
</html>
Hasil Kodingan Diatas


 
  FORMULIR
 
 
  

FORMULIR KEGANTENGAN



Nama :
Alamat :
Tempat Lahir :
Tanggal Lahir :
Jenis Kelamin : Laki-Laki
Perempuan
No HP :
Email :
Kabupaten :

Kodingan Pembuatan Tabel pada HTML


<!DOCTYPE html>
<html>
<head>
<title> Contoh Tabel Colspan dan Rowspan </title>
</head>
<body>
<h2> Contoh atribut colspan dan rowspan </h2>
<table border="2">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td rowspan="2">Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
<tr>
<td colspan="2">Baris 3, Kolom 1 & 2</td>
</tr>
</table>
</body>
</html>


  Contoh Tabel Colspan dan Rowspan 


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 & 2
Hasil Kodingan Diatas

Sekian dan Terimakasih

Adi Triginarsa

Developer

Mahasiswa Teknologi Informasi, Fakultas Teknik, Universitas Udayana yang simpel dan seorang gamers