Belajar Kode-Kode HTML 1

Selamat datang tamu Iptek 7 Blog. Pada posting kali ini kita akan Membahas tentang Kode HTML (Hyper Text Markup Language). Sebagai seorang bloggers (Pemilik blog) atau Webmasters (Pemilik situs web) kita harus pandai, paham dan mengerti Kode HTML, Kenapa demikian karena semua halaman, blog, ataupun situs web dijalankan dan ditampilkan berdasarkan kode HTML. Google, yahoo, bing, Facebook, twitter juga menggunakan kode HTML. Salahkah / rugikah kita belajar kode HTML? Tidak kan :D . Tahukah kalian apa kode HTML itu?. Kode HTML adalah suatu kode untuk mengatur bagaimana halaman situs ditampilkan pada browser (Ini Menurut Saya, Newbie gitu loh). Kode HTML biasanya dimulai dengan tag <html> dan diakhiri dengan tag </html>. Ada juga yang di awali dengan
<!DOCTYPE HTML PUBLIC"-//W3C/DTD HTML 4.0 Transitional//EN">
Tag di atas merupakan type dari HTML yang digunakan yakni HTML type 4.0 sekarang sudah ada HTML dengan type 5.0 dan 6.0 . Perbedaan antara HTML type 1 sampai 3 dengan HTML type 4.0 adalah pada penggunaan tag untuk mengubah jenis font, warna font dan ukuran font.
File html harus disimpan dengan format *.html atau *.htm agar bisa di buka oleh browser seperti Google Chrome, Mozilla Firefox, Safari dan Internet Explore. Cara membuka filenya adalah dengan cara klik menu file, pilih submenu Open, cari file-nya lalu pilih open maka file HTML tersebut akan ditampilkan oleh browser sebagai halaman web. Didalam file *.html atau *.htm terdapat bagian tag <head></head> dan <body></body>. Baiklah Iptek 7 Blog akan membahas satu per satu secara garis besar (Maklum aja ya, Saya masih newbie bukan pengen mengajar cuma pengen berbagi apa yang baru saya ketahui ^_^)

A. Bagian antara <head> dan </head>

Tag ini merupakan bagian kepala dari sebuah file HTML (kenapa saya sebut sebagai kepala, jawabannya simple aja karena head = kepala). File ini tidak akan ditampilkan oleh browser berfungsi untuk memasang kode javascript yang mengatur bagaimana suatu halaman situs ditampilkan oleh browser. Jika sobat ingin mengklaim ( claim ) blog sobat maka code-nya harus dipasang dalam tag ini yaitu antara kode <head> dengan </head>. Dalam tag ini terdapat kode <title></title>. Diantara kedua tag tersebut tempatkanlah judul halaman dari situs anda.
Berikut contoh penggunaan tag head:
<head> pasang script disini <title> Judul Halaman atau Blog sobat </title> pasang script disini </head>

B. Bagian antara Tag <body></body>

Tag ini merupakan tempat dari data yang akan ditampilkan pada halaman web atau situs mulai dari mengatur jenis font, ukuran font, warna font, pembuatan tabel, button atau tombol, text area, tombol submit dan lain-lain. Baiklah, sekarang kita mulai dari:

1. Pengaturan Font

untuk tag format font diawali dengan tag <font> dan diakhiri dengan </font>
contoh:

<font face="Verdana" size="3" bgcolor="#ff0000">disini tulisan dengan font verdana berukuran 3 dan berwarna latar merah</font>
hasilnya:
disini tulisan dengan font verdana berukuran 3 dan berwarna latar merah

untuk membuat teks tebal tidak perlu diawali dengan tag <font> cukup diapit dengan tag <b></b>.
untuk tulisan miring atau italic cukup diapit dengan tag <i></i>.
untuk tulisan bergaris bawah cukup diapit dengan tag <u></u>.
untuk membuat paragraf baru bisa menggunakan tag <p></p>.
untuk membuat baris baru bisa menggunakan tag <br>, tag ini tak perlu memakai tag penutup.
untuk membuat garis horizontal bisa menggunakan tag <hr>, tag ini juga tidak memakai tag penutup.
Untuk lebih jelas perhatikan contoh berikut.
contoh:
saya sedang belajar kode HTML dan ini paragraf baru saya
ini baris baru

<html>
<head><title>belajar kode html</title><head>
<body>
<p>saya sedang belajar <b>kode HTML</b> dan ini paragraf baru saya
<br>ini baris baru
<h1>ini adalah heading</h1>
<strong>ini tulisan dengan efek strong (Tebal)</strong>
<p>ini paragraf yang lainnya</p>
</body>
</html>
hasilnya:

ini adalah heading

ini tulisan dengan efek strong (Tebal)

ini paragraf yang lainnya

Berikut ini adalah penggunaan CSS (Cascading Style Sheet) untuk mengatur format font pada HTML 4.0 ke atas:

<p><font style="color: red; font-family:
monotype corsiva; font-size: 15px;">Belajar Kode HTML (tulisan dengan warna merah dengan ukuran 15 pixel)</font></p>
hasilnya:
Belajar Kode HTML (tulisan dengan warna merah dengan ukuran 15 pixel)

Membuat Tabel dengan border Solid:

kodenya adalah:

<table border="1" width="200">
<tr>
<td style="border-style: solid">Disini Tulisan anda</td><td style="border-style:solid">tulisan anda lagi</td>
</tr>
</table>
hasilnya:

Membuat Tabel dengan border Solid:

Disini Tulisan anda

tulisan anda lagi

Pembahasan selanjutnya adalah cara membuat Button (Tombol), dan penggunaan tag <form></form>. Karna terlalu panjang jika dibahas dalam posting ini, Maka terpaksa dibuat pada posting berikutnya :D.
Baca juga: Belajar Kode HTML 2

Belajar Kode HTML Dengan Cepat Part 1 | 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 1