Belajar Kode Html ( part I )

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   dan spasi yang banyak pada yang satunya lagi, sehingga

<i>Hello</i> &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.