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.

See the Pen Untitled by Keysha Rachelia (@sourjeally) on CodePen.


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


See the Pen Untitled by Keysha Rachelia (@sourjeally) on CodePen.

:

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

See the Pen Untitled by Keysha Rachelia (@sourjeally) on CodePen.


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.

See the Pen Untitled by Keysha Rachelia (@sourjeally) on CodePen.



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

See the Pen Untitled by Keysha Rachelia (@sourjeally) on CodePen.



10. Menampilkan gambar dan Video.

See the Pen Untitled by Keysha Rachelia (@sourjeally) on CodePen.

See the Pen Untitled by Keysha Rachelia (@sourjeally) on CodePen.

 
























Komentar

Posting Komentar

Postingan populer dari blog ini

MENGENAL HTML DAN CSS

Halo-halo semuanya! Apakah kalian ingin belajar cara membuat website? Disini saya mau kasih tahu mulai dari mana untuk membuat website. Pertama-tama kita mulai dari HTML lalu masuk ke CSS, karena untuk menjadi seorang web developer HTML dan CSS diperlukan sebagai pondasi. Namun sebelum kita masuk ke topik pembahasannya, anda harus menyiapkan text editor dan web browser. Text editor di gunakan sebagai tools   untuk menulis kode, sedangkan web browser digunakan untuk mengakses website. Pada tutorial ini, kami akan menggunakan Visual Studio Code sebagai teks editornya dan Google Chrome sebagai browsernya. Anda bebas menggunakan tool favorit anda. Nah, sekarang mari masuk topik pembahasannya. 1. HTML  HTML adalah kerangka dari semua halaman web. Ini sering kali merupakan bahasa pertama yang dipelajari oleh developer, marketer, dan designer dan merupakan inti dari pekerjaan pengembangan front-end. Jadi apa sebenarnya HTML itu? HTML menyediakan struktur untuk konten yang muncul di s...
Posting Komentar
Baca selengkapnya