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 :
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:
Ordered List adalah list yang terurut;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
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type alfabet kapital (huruf besar)
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi kapital
Tutorial List di HTML
Tutorial Link di HTML
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:
Hewan reptil:
Hewan Amfibi:
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 >
Joshua Hong
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.
Postingan populer dari blog ini
Saya disini mencontoh dari web Munpia, berikut scriptnya. See the Pen Untitled by Keysha Rachelia ( @sourjeally ) on CodePen .
Komentar
Posting Komentar