Belajar Kode HTML Dengan Cepat Part 2

Belajar Kode HTML 2

Untuk Melengkapi posting sebelumnya dengan judul Belajar Kode HTML 1. Kali ini IpTek 7 Blog akan berbagi artikel Belajar Kode HTML 2. Yang akan dibahas disini adalah penggunaan Tag <form></form>, Anchor Text <a></a>, dan Cara Membuat Tombol (Button) Dengan Memasang Link. Oke, To the point aja ya:
Penggunaan Tag Form pada Kode HTML

1. Membuat Text Area

Untuk membuat text area. Kita akan menggunakan tag <input type="text" /> yang fungsinya untuk mendefenisikan sebuah kotak untuk memasukkan text.
Contoh:
<form>
First name: <input type="text" name="firstname" /
><br />
Last name: <input type="text" name="lastname" /></form>
hasilnya:
First name:
Last name:

2. Membuat Kotak Untuk Memasukan Password

Tag yang digunakan adalah
</form><input type="password" /> gunanya untuk menampilkan kotak password input.
contoh:

<form>

Password: <input type="password" name="pwd" /></form>

gunanya untuk menampilkan kotak password input.
hasilnya:

Password:

3. Membuat Radio Button

Pernah lihat radio button? saya yakin semuanya sudah pernah melihat radio button. Radio Button adalah bulatan yang hanya mengizinkan user untuk memilih salah satu dari option.
Tag yang digunakan adalah </form><input type="radio" />
Contoh:
<form>
<input type="radio" name="sex" value="male" />Laki-laki<br />
<input type="radio" name="sex" value="female" />Perempuan</form>

hasilnya:

Laki-laki

Perempuan

4. Membuat CheckBox

Checkbox adalah sebuah kotak untuk di ceklist dan mengizinkan user untuk memilih lebih dari 1 option yang tersedia. Tag yang digunakan adalah
<input type="checkbox" />
Contoh:

<form>
<input type="checkbox" name="vehicle"
value="Motor" /> Saya Punya Motor<br />
<input type="checkbox" name="vehicle"
value="Mobil" /> Saya Punya Mobil
</form>
hasilnya:
Saya Punya Motor
Saya Punya Mobil

5. Membuat Tombol Submit

Tombol submit adalah tombol dengan fungsi mengirim data dari form ke alamat tertentu. Tag yang dogunakan adalah <input type="submit" />
Contoh:

<form name="input" action="alamat_web.php"
method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
hasilnya:

Username:

6. Membuat Menu DropDown

Semua pasti tahu kan dengan Menu Dropdown. Berikut adalah cara membuatnya:

<form action="alamat_web_target.php">
<select name="mobil">
<option value="ferarri">Ferarri</option>
<option value="jaguar">Jaguar</option>
<option value="fiat">Fiat</option>
<option value="suzuki">Suzuki</option>
</select>
</form>
hasilnya:

Ferarri Jaguar Fiat Suzuki

Penggunaan Tag Anchor Pada Kode HTML

1. Membuat Anchor Text Sederhana

Anchor Text atau link Jangkar adalah beberapa kata yang akan membawa kita ke suatu alamat web. Forrmatnya adalah:
<a href="url_web">anchor text</a>
contoh:
<a href="http://iptek7.blogspot.com">klik untuk menuju ke Blog saya</a>
Nanti akan ditampilkan seperti ini:
klik untuk menuju ke Blog saya

2. Membuat anchor text dengan title

Fungsi title ini adalah jika sobat meletakkan kursor pada anchor text maka akan keluar pop-up dengan tulisan sesuai isi title.
Formatnya:
<a href="url_blog_kamu" title="tulis title disini">Anchor text</a>
hasilnya:
Anchor text

3. Membuat Anchor Text yang Otomatis dibuka Pada Tab Baru

Caranya hampir sama dengan no:2 tapi dengan menambah tag target="_blank"
Jadi formatnya jika ingin memakai title dan target pada sebuah anchor text adalah:
<a href="http://iptek7.blogspot.com" title="Blog IpTek +" target="_blank">IpTek (Seven) Blog</a>
hasilnya:
IpTek (Seven) Blog   Coba klik pasti otomatis terbuka di tab baru
Ganti tulisan berwarna merah dengan URL blog sobat. Tulisan berwarna biru ganti dengan title yang sobat inginkan. Tulisan yang berwarna hijau ganti dengan anchor text sobat.

Cara Membuat Tombol Dengan Memasang Link

Untuk cara ini dijelaskan secara singkat saja ya gan, karna trik terakhir ini tergolong mudah.
Oke caranya jika memakai link seperti:

Untuk Menuju ke blog saya klik tombol berikut:
<a href="http://iptek7.blogspot.com" target="_blank"><input type="button" value="Go To"></a>
hasilnya:


Sobat sudah tau yang harus diganti kan?? pertama ganti alamat blog saya dengan blog sobat, kedua ganti tulisan Go To dengan tulisan yang sobat inginkan.

Huuft,, capek juga ngetiknya ya. Jangan lupa baca juga artikel "Belajar Kode HTML part 3"
Nantikan posting selanjutnya ya gan.
Related Post:
Belajar Kode HTML 1

Related Post / Artikel Terkait:

Posting dengan judul Belajar Kode HTML Dengan Cepat Part 2 ini terdapat pada kategori Tips-Trik. Bagikan halaman ini dengan URL https://iptek7.blogspot.com/2012/07/belajar-kode-html-2.html.
Gunakan kode HTML berikut:
<a href='https://iptek7.blogspot.com/2012/07/belajar-kode-html-2.html'>Belajar Kode HTML Dengan Cepat Part 2</a>
Atau Gunakan BBCode berikut:
[URL="https://iptek7.blogspot.com/2012/07/belajar-kode-html-2.html"]Belajar Kode HTML Dengan Cepat Part 2[/URL]
Terima kasih!

Facebook Google+ Twitter Digg

Judul Artikel : Belajar Kode HTML Dengan Cepat Part 2
Ditulis oleh: Miko Satria Pratama
Rating : 5.0 based on 7 Reviews
Dipublikasikan tanggal : 7/15/2012