IpTek (Seven) Blog

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

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


Belajar Kode-Kode HTML 1

Belajar 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 andatulisan 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

Related Post / Artikel Terkait:

Posting dengan judul Belajar Kode HTML Dengan Cepat Part 1 ini terdapat pada kategori Tips-Trik. Bagikan halaman ini dengan URL http://iptek7.blogspot.com/2012/07/belajar-kode-html-1.html.
Gunakan kode HTML berikut:

Atau Gunakan BBCode berikut:

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

Tidak ada komentar untuk "Belajar Kode HTML Dengan Cepat Part 1"

Post a Comment

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