IpTek (Seven) Blog

Belajar Kode HTML Dengan Cepat Part 2 IpTek (Seven) Blog

Blog edisi Ilmu Pengetahuan dan Teknologi (IpTek), Astronomi, tutorial, Kumpulan kata-kata, Download Aplikasi, Kode HTML, trik SEO, berita dan trik/cara.


Belajar Kode HTML Dengan Cepat Part 2

Ditulis Oleh : Miko Satria D'Kamikaze | Pada Tanggal : 7/15/2012

Belajar Kode HTML 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:

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 http://iptek7.blogspot.com/2012/07/belajar-kode-html-2.html.
Gunakan kode HTML berikut:

Atau Gunakan BBCode berikut:

Terima kasih!
Belajar Kode HTML Dengan Cepat Part 2 Judul Artikel : Belajar Kode HTML Dengan Cepat Part 2
Ditulis oleh: Miko Satria D'Kamikaze
Rating : 5.0 based on 7 Reviews
Dipublikasikan tanggal : 7/15/2012
Komentar
5 Komentar

5 komentar untuk "Belajar Kode HTML Dengan Cepat Part 2"

  1. Wahh infor masi yang bener bener mantapss... Sobb..

    Apalagi dengan tampilan yang ringan,, hebat hebat

    ReplyDelete
  2. YAng ingin saya tanyakan berhubungan dengan point 1, kalau di tambah email gimana ya?

    ReplyDelete
  3. mantep boss..bisa saya gunakan sewaktu-waktu

    ReplyDelete
  4. Thanks tipsnya...sangat bermanfaat sekali buat saya yang baru belajar html.

    Salam Kenal dari Direktori Penerjemah Indonesia.

    ReplyDelete

Silahkan berkomentar dengan baik. Komentar anda sangat diperlukan untuk perkembangan Blog ini. Komentar disini tanpa kode verifikasi.
Baca juga Posting lain | Daftar Isi