Pada artikel tentang Related Post sebelumnya, saya telah memberikan tutorial untuk

memanipulasi realated post yang terkesan biasa saja. Pada artikel itu juga telah saya
singgung bahwa anda minimal harus belajar HTML atau CSS, karena kode tersebut
adalah dasar dari pembuatan template blog dan website. Baiklah sebelum melanjutkan
ke tahap - tahap Belajar Html untuk pemula, alangkah baiknya anda mengerti apa itu
kode Html.

Hypertext Markup Language (HTML) adalah standarisai kode dalam pembangunan

website dan menampilkan berbagai informasi di dalam sebuah web browser. Pada
dulunya HTML bermula dari SGML (Standart Generalized Markup Language) yang
sebelumnya banyak digunakan penerbit dan percetakan.

Versi HTML terakhir pada saat ini adalah HTML 4.01, meskipun lebih cendrung
berkembang ke arah XHTML (Extensible Hypertext Markup Language) yang nantinya
akan saya bahas di artikel yang lainnya.

Attention!!!

Bagi anda yang masih Newbie atau Pemula usahakan hindari kebiasaan What I See,
That's What I Copy (WISTWIC). Maksudnya jangan copy semua code yang saya
contohkan kepada anda, tapi cobalah mengetik sendiri dan mulailah untuk
menghafalkannya.

Langkah Awal(Pengenalan Kode HTML)

Silahkan buka Notepad, dan cobalah untuk mengetikkan kata - kata di bawah ini :

<i> adalah kode untuk memiringkan sebuah text.

<b> adalah kode untuk menebalkan sebuah text
<u> adalah kode untuk menggaris bawahi sebuah text.
Semua tag - tag atau kode html tersebut haruslah diberi penutup / seperti kode di
bawah ini
<i>Hello</i> <b>My name is Kenny</b>, <u>What is your name?</u> 

(Ingat diketik jangan Copy Paste). Lalu simpan dengan nama TEST.HTML bukan
test.html.text atau test.text.

Cobalah klik 2 kali pada TEST.HTML, maka akan keluar browser dengan tampilan
sebagai berikut :

Hampir semua tag html memiliki tag penutup yang harus ditambahkan /, jadi untuk tag
penutup maka anda tinggal menambahkan / seperti contoh : <i>, maka tag penutupnya
</i>, dan <u>, maka tag penutupnya adalah </u>, ingat hanya menambahkan /.

Standalone Tag
Walau hampir semua tag memiliki tag penutup, akan tetapi ada beberapa tag / kode
html yang tidak memiliki tag penutup.Contoh : <hr> yang memberikan baris dan <br>
yang memberikan jarak pada baris. Jika anda ingin mengetahuinya silahkan buka
kembali file TEST.HTML 
Caranya :

 Klik kanan pada file

 Open with
 Pilih Notepad
 Taruh kode <br> di bawah kode semula
 Kemudian taruh kode <hr> di bawah kode <br&gt.
 Save.

Coba anda buka kembali kode dengan cara yang sama dengan yang di atas, maka
akan terlihat perbedaan , seperti jarak antara text dengan baris yang agak jauh, dan
adanya garis di bawahnya.

HTML Entity 
Jika anda ingin memberi spasi antar text lebih dari satu , tentunya tidak akan bisa
didalam sebuah template blog atau web , walaupun anda menekan spasi berkali - kali
tetap akan dihitung satu spasi. Untuk itulah diperlukan kode khusus. Contoh coba
tambahkan kode &nbsp; dan spasi yang banyak pada yang satunya lagi, sehingga
<i>Hello</i> &nbsp&nbsp&nbsp;,<b>My name is Kenny</b>,              <u>What is your
name?</u>
anda perhatikan pasti ada bedanya antara yang memakai  &nbsp dengan yang spasi.
yang perlu diingat bahwa kode entity selalu di awali dengan (&) dan diakhiri
dengan (;) (tidak termasuk kurung).

Atribut HTML
Atribut adalah tambahan dalam tag - tag HTML, baik yang jenis standalone
maupun yang biasa. 
Contoh 1 kode 
<div align="center"> Contoh text </div> 
sebenarnya hanya <div> dan </div>, maka align="center" adalah atribut
tambahan. Tampilan 
Contoh text

Contoh 2 kode 
<font face="georgia" size="3" color="red">Contoh....!!!!</font>
Tampilan
Contoh....!!!!
 
Teks & Paragraph
Di dalam html ada yang namanya tag , tag tersebut berguna untuk menentukan
ukuran text secara praktis, dan juga dapat membantu search engine untuk
menentukan seberapa penting text dari suatu blog / web. Contoh :
<h1>Sebesar Apakah Text Ini?</h1>
<h2>Sebesar Apakah Text Ini?</h2>
<h3>Sebesar Apakah Text Ini?</h3>
<h4>Sebesar Apakah Text Ini?</h4>
<h5>Sebesar Apakah Text Ini?</h5>
<h6>Sebesar Apakah Text Ini?</h6>
Tampilan
Untuk lebih jelasnya, coba kita buat kode seperti ini dan save dengan nama Budi.html :
<p>Halo, nama saya <b>Budi</b> dan
saya senang bermain bola</p>
<p>Tutorial ini merupakan <i>Pelajaran pertama saya dalam HTML</i> dan saya ingin
<u>Memodiifikasi </u> teks dalam HTML agar lebih menarik </p>

<h3>Terima kasih </h3>

Tampilan

Langkah Kedua (Struktur HTML)

Apakah anda pusing membaca pengenalan diatas?, yah sejujurnya pasti bagi
seorang pemula hal tersebut sangat memusingkan, tetapi hal dasar janganlah
dilewatkan. Untuk itu sebaiknya anda mengerti baik - baik apa yang saya
sampaikan diatas barulah ke tahap selanjutnya.

Struktur HTML

<html>
<head>
<title>Judul</title>
</head>
<body bgcolor="blue"> <i>TEST TEST 1 2 3</i>,<b> ada orang di sini?</b>
</body>
</html>

Text yang berwarna biru adalah text struktur, sedangkan yang berwarna hitam
adalah tambahan. Maka tampilannya seperti di bawah ini
Coba lihat pada kata judul yang saya lingkari dan saya beri tanda panah, hal tersebut
terjadi karena saya menambahkan <title>Judul</title> di antara kode <head> dan
</head>. Jika anda ingin menggantinya tinggal hapus text judul menjadi judul yang
anda inginkan.

Jika anda masih tidak percaya coba anda buat notepad baru dengan nama
struktur.html, lalu tes lagi seperti cara - cara sebelumnya.

Perlu diketahui di dalam struktur HTML, semua kode HTML ditulis di dalam tag <body>.
Tidak boleh di tulis di dalam tag <head>.

Anda bisa mempraktekkan dengan menulis semua kode HTML yang telah saya ajarkan
ke dalam tag <body> tag html anda </body>.

Mengapa hal ini menjadi penting?, karena di dalam mengedit template blog maupun di
web, anda akan menggunakan kode - kode html tersebut. Setidaknya anda pelajari
konsep - konsep di atas dengan cermat dan teliti, maka saya yakin anda pasti bisa.
Nantikan Juga artikel berikutnya yang merupakan lanjutan dari artikel ini