Langsung ke konten utama

MENGENAL 10 ELEMENT HTML


Hello-bello, sebelumnya saya udah mengenalkan kalian dasar awal HTML. Pada kali ini saya akan menjelaskan sepuluh elemen HTML dan kegunannya serta script untuk membuatnya agar kalian menjadi lebih paham. Mari kita sama-sama belajar, ayo simak!



1. Heading

Elemen heading ini menyiratkan semua perubahan font, jeda paragraf sebelum dan sesudah. Elemen headingnya adalah <h1> - <h6>. Untuk contoh dan hasilnya bisa lihat dibawah ini.


2. Tabel

   Tabel adalah struktur yang menampilkan kolom dan baris, secara umum tabel terdiri atas beberapa element yakni, baris dan kolom. tag <table> untuk membungkus tabelnya, <tr> untuk membuat baris dan <td> untuk sel. 

Contoh : 

        <table border=5 cellpadding=10 align="center">
          <tr>
              <td>baris 1 / kolom 1</td>
              <td>baris 1 / kolom 2</td>
              <td>baris 1 / kolom 3</td>
            </tr>
            <tr>
              <td>baris 2 / kolom 1</td>
              <td>baris 2 / kolom 2</td>
              <td>baris 2 / kolom 3</td>
            </tr>
            <tr>
              <td>baris 3/ kolom 1</td>
              <td>baris 3/ kolom 2</td>
              <td>baris 3/ kolom 3</td>
            </tr>
            <tr>
              <td>baris 4/ kolom 1</td>
              <td>baris 4/ kolom 2</td>
              <td>baris 4/ kolom 3</td>
            </tr>
          </table>


Dan hasilnya menjadi seperti ini


:

3. Hyperlink.

Hyperlink atau link merupakan salah satu cara untuk menghubungkan satu bagian di dalam program dengan program lainnya atau halaman web dengan sebuah program.

Format hyperlink menurut gue cukup simple yaitu:

<a href="linknya">klik disini</a>


<!DOCTYPE html>
<html>
<head>
  <title>belajar membuat hyperlink</title>
</head>
<body>
contoh alamat absolute <a href="link biasa">klik disini</a>
</body>
</html>

Contoh hasilnya 

contoh alamat absolute klik disini


4. Form

Form merupakan bagian pada HTML yang dapat digunakan untuk membuat elemen Form pada halaman Web.

Contoh: 

<!DOCTYPE html>
<html>
<head>
   <title>Belajar Membuat Form pada HTML</title>
</head>
 
<body>
<form>
    nama : <input type="text" name="nama"><br/>
    alamat : <input type="text" name="alamat"></br/>
    password : <input type="password" name="pass"><br/>
    Jenis Kelamin :
        <input type="radio" name="jk" value="laki-laki" checked />
            Laki - Laki
        <input type="radio" name="jk" value="perempuan" />
            Perempuan
        <br/>
    bahas pemograman yang dikuasai :
        <input type="checkbox" name="web"> Web
        <input type="checkbox" name="mobile"> MOBILE
        <input type="checkbox" name="desk"> DESKTOP
        <br/>
    kota asal :
    <select>
        <option>Semarang</option>
        <option>Bandung</option>
    </select>
    <br/>
    pesan anda :
    <textarea>
       
    </textarea>
    <br/>
    <input type="submit" value="proses">
</form>
</body>
</html>


Hasilnya :
nama :
alamat : password :
Jenis Kelamin : Laki - Laki Perempuan
bahas pemograman yang dikuasai : Web MOBILE DESKTOP
kota asal :
pesan anda :

5. List.

List adalah elemen yang digunakan untuk menampilkan informasi dalam bentuk list.


HTML sudah menyediakan elemen untuk membuat list. Ada dua macam jenis list yang bisa dibuat di HTML:

  1. Ordered List adalah list yang terurut;
  2. Unordered List adalah list yang tak terurut;

1. Ordered List.

Tag yang diperlukan pada Ordered List adalah <ol> dan <li> 

<!DOCTYPE html>
<html>
<head>
    <title>Ordered List dengan Atribut Type</title>
</head>
<body>
    <h3>List dengan type alfabet</h3>
    <ol type='a'>
        <li>Tutorial List di HTML</li>
        <li>Tutorial Link di HTML</li>
        <li>Tutorial Tabel di HTML</li>
    </ol>
    <h3>List dengan type alfabet kapital (huruf besar)</h3>
    <ol type='A'>
        <li>Tutorial List di HTML</li>
        <li>Tutorial Link di HTML</li>
        <li>Tutorial Tabel di HTML</li>
    </ol>
    <h3>List dengan type romawi</h3>
    <ol type='i'>
        <li>Tutorial List di HTML</li>
        <li>Tutorial Link di HTML</li>
        <li>Tutorial Tabel di HTML</li>
    </ol>
    <h3>List dengan type romawi kapital</h3>
    <ol type='I'>
        <li>Tutorial List di HTML</li>
        <li>Tutorial Link di HTML</li>
        <li>Tutorial Tabel di HTML</li>
    </ol>
</body>
</html>


Hasilnya:

List dengan type alfabet

  1. Tutorial List di HTML
  2. Tutorial Link di HTML
  3. Tutorial Tabel di HTML

List dengan type alfabet kapital (huruf besar)

  1. Tutorial List di HTML
  2. Tutorial Link di HTML
  3. Tutorial Tabel di HTML

List dengan type romawi

  1. Tutorial List di HTML
  2. Tutorial Link di HTML
  3. Tutorial Tabel di HTML

List dengan type romawi kapital

  1. Tutorial List di HTML
  2. Tutorial Link di HTML
  3. Tutorial Tabel di HTML
2. Unordered List

Tag yang diperlukan pada unordered list adalah <ul> dan <li>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Membuat Unordered List</title>
</head>

<body>
    <h1>Jenis hewan mamalia:</h1>
    <ul type="square">
        <li>Kucing</li>
        <li>Sapi</li>
        <li>Lumba-lumba</li>
        <li>Kambing</li>
    </ul>
    <h1>Hewan unggas:</h1>
    <ul type="circle">
        <li>burung</li>
        <li>ayam</li>
        <li>bebek</li>
    </ul>
    <h1>Hewan reptil:</h1>
    <ul type="none">
        <li>Penyu</li>
        <li>Kadal</li>
        <li>buaya</li>
    </ul>
    <h1>Hewan Amfibi:</h1>
    <ul type="disc">
        <li>kodok</li>
        <li>salamander</li>
        <li>katak</li>
    </ul>
</body>
</html>


Hasilnya:

Jenis hewan mamalia:

  • Kucing
  • Sapi
  • Lumba-lumba
  • Kambing

Hewan unggas:

  • burung
  • ayam
  • bebek

Hewan reptil:

  • Penyu
  • Kadal
  • buaya

Hewan Amfibi:

  • kodok
  • salamander
  • katak

6. Paragraf. 
    paragraf adalah kumpulan dari kata dan kalimat. Paragraf biasanya digunakan untuk memuat teks. Tag untuk paragraf adalah <p>.


7. Button.
untuk membuat button atau tombol adalah menggunakan tag ini.

<button>Joshua Hong</button>


8. Bold
untuk membuat kata menjadi tebal atau bold adalah dengan menggunakan ini.


9. Italic 
lalu jika ingin kalimat atau kata menjadi miring bisa menggunakan tag seperti yang ada dibawah ini.


10. Menampilkan gambar dan Video.
 
























Komentar

Posting Komentar