Anda di halaman 1dari 8

Anda Boleh menyebarkan e-book ini kepada teman-teman anda, tetapi anda tidak diperbolehkan

merubah sedikitpun dari isi e-book ini. Terima kasih, semoga e-book ini bermanfaat bagi anda, dan jangan
lupa untuk mengunjungi website saya http://www.lifemybusiness.co.cc

Mengenal Bahasa HTML Bagian 1

Dalam membuat website, hal yang perlu anda kuasai adalah mengerti akan
bahasa pemrograman html agar bisa terbentuk website yang bisa
dihubungkan dengan internet. Internet itu sendiri merupakan jaringan
global yang menghubungkan network satu dengan network lainnya di
seluruh dunia.

Sebelum kita berlanjut pada pengenalan bahasa HTML, maka sebelumnya


akan saya jelaskan mengenai Pengertian HTML. HTML kepanjangan dari
Hyper text Markup Language adalah satu-satunya bahasa pemrograman
yang digunakan untuk merancang halaman web. Semasa SMA dulu
saya juga sudah diajari bahasa pemrograman yang menggunakan
perintah-perintah HTML.
Sebelum memulai mengenal mengenal bahasa HTML, kita harus mengerti terlebih dahulu
komponen dari Browser:

1. Jendela web: Pada bagian ini akan muncul judul/tittle dari sebuah situs web.

2. Url : pada bagian ini akan muncul alamat situs dari sebuah web contoh:
http://www.lifemybusiness.co.cc

3. Bar: pada bagian ini juga akan menampilkan judul/tittle dari sebuah web.

4. Halaman web atau biasa dikenal dengan Workspace: pada bagian ini akan muncul isi dari
sebuah situs. Agar dapat mengeluarkan halaman dari sebuah website, maka kita harus
membuat perintah-perintah HTML.

5. Status Browser: pada bagian ini akan menunjukkan setatus dari website yang anda kunjungi.
Kalau website berjalan lancar, maka akan tertera tulisan DONE.

Setalah kita mengetahui komponen dari sebuah browser, selanjutnya kita akan memulai mengenal
bahasa pemrograman HTML terlebih dahulu sebelum berlanjut untuk membuat sebuah website.
Dalam pembuatan bahasa pemrograman HTML bisa menggunakan microsoft frontpage,
Dreamweaver, Php designer.

Berikut struktur dari sebuah HTML:

<HTML>

<HEAD>

<TITLE>Judul web</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;">

<meta name="description" content="Indonesia adalah negaraku, tanah airku, tempatku dilahirkan">

</head>

<BODY >

......Isi.....

</BODY>

</HTML>

1. HTML

Pada Pembuatan website, kita harus mengawalinya dengan perintah HTML dan ditutup
dengan perintah HTML juga. Seperti contoh diatas, dalam HTML nanti akan berisi
HEAD,TITLE, META,BODY.

2. HEAD
Pada bagian ini, bisa diisi dengan TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE &
META.Seperti contoh:

<Head>

<Meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Mengenal Bahasa HTML</title>

<meta name="description" content="HTML Kepanjangan dari Hypertext Markup


Language">

<meta name="keywords" content="html,head,title,meta,">

<meta name="copyright" content="2009 twenty4alls.co.cc">

<meta name="distribution" content="Global">

<meta name="robots" content="index,follow">

<meta name="publisher" content="Twenty4alls.co.cc">

<link rel="Bookmark" href="images/a1.jpg">

<link rel="shortcut icon" href="images/a2.jpg">

</title></head>

3. BODY

Perintah BODY digunakan untuk menampilkan semua teks, images(.png, .jpg, .gif). Dalam
Penulisan Body bisa ditambahi dengan warna background dengan format bgcolor. Untuk
mengisi BODY atau isi dari pada web, maka ada perintah-perintah atau Komponen-
komponen yang diletakkan pada BODY in, seperti:

 <p>...</p> :Perintah untuk membuat teks paragraf. Pada bagian ini bisa disisipi letak
paragraf, seperti ini : <p align=”left”>....</p>. Untuk letak bisa di isi dengan: left,
center, Right, dan justify.

 <font> : perintah ini digunakan untuk memformat seluruh text yang akan di
tampilkan di web. Pada perintah ini bisa ditambahi dengan perintah perintah:
color=”#FFFFFF” , size=”2”  <font color=”#33FF66” size=”2”>....</font>

 <h>: perintah untuk membesarkan teks. Bisa dimulai dari H1 sampai H6. Seperti
contoh: <H1>Saya sedang mengenal Bahasa Pemrograman HTML</H1>

 <table>: perintah untuk menampilkan tabel. Penulisan tabel bisa disisipi seperti ini:
<table border="0" width="25" cellspacing="0" cellpadding="0">

 <td>: perintah untuk kolom table. Perintah ini juga bisa disisipi dengan: colspan="0"
valign="top" width="0". Dan penulisan ini setelah penulisan table seperti ini:
<table border="0" width="800" cellspacing="0" cellpadding="0">

<td colspan="2" valign="top" width="100%">........</td></table>

 <li>: perintah untuk mengelompokkan teks. Untuk menampilkan list bullet, maka
penulisannya <ul><li>......</li></ul>. Sedangkan untuk menampilkan list angka,
maka penulisannya <ol><li>.....</li></ul>.

 <i>....</i>: perintah untuk mengubah teks menjadi miring.

 <b>....</b>: perintah untuk menebalkan teks.

 <u>....</u>: perintah untuk memberikan garis bawah pada teks.

 <br>: perintah untuk membuat teks baru.

 <s>...</s>:perintah untuk memberi garis ditengah-tengah teks

 <blink>....</blink>:perintah agar teks berkedip

 <a>: Untuk membuat link baik web, e-mail, maupun gambar. Pada perintah ini
penulisannya: <a href=”images/ade.jpg>....</a> maka menuju ke link gambar, <a
href=http://www.lifemybusiness.co.cc>...</a> maka akan terbuat link web, dan <a
href=”awan.adie@yahoo.com>....</a> akan terbuat link e-mail.

 &nbsp; : untuk spasi. Penulisannya seperti ini &nbsp;

 <img src>: perintah untuk menampilkan gambar. Susunan bisa seperti ini: <img
src="images/ade.jpg" width="176" border="0" height="128" alt=”>,

width=”...” : perintah memberikan lebar dari gambar.

height=”…” : perintah untuk tinggi dari gambar.

border=”…” : perintah memberikan ketebalan dari bingkai gambar.

alt=”…” : perintah memberi nama dari gambar.

align=”…” : perintah memberikan posisi dari gambar.

Setelah kita mengetahui perintah-perintah dasarnya HTML, maka kita akan mencoba
untuk mempraktekkannya. Gunakan aplikasi frontpage atau dreamweaver. Tulislah
perintah seperti di bawah ini:

a. Pertama

Buatlah folder bernama Belajar. Kemudian dalam folder tersebut buat lagi 1 folder
dengan nama images. Dan dalam folder images masukkan foto anda dan beri nama
anda. Dan buat gambar seperti ini simpan dengan nama header.gif ukuran width=850
dan height=60. Untuk background gambar hitam ganti
dengan warna putih. Kalau di e-book ini saya buat hitam biar tahu
gambarnya seperti ini.

Setelah itu, Buat lagi seperti ini dengan nama bg.gif ukuran width=850 dan
height=10.

Dan dengan nama footer.gif ukuran width=850 dan height=60

b. Kedua

Tulislah seperti contoh, jangan sampai anda mengkopinya kalau anda ingin bisa
membuatnya:

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<meta name="author" content="Ade Tiawan">

<meta name="description" content="Indonesia adalah negara yang aku


cintai" >

<title>Saya sedang Belajar membuat web</title>

</head>

<body bgcolor="#33FF66" link="#0066CC" vlink="#11111">

<center>

<table border="0" cellspacing="0" cellpadding="0">

<tr>
<td width="100"><img border="0" src="images/header.gif" width="850"
height="60"></td>

</tr>

</table>

</center>

<div align="center">

<center>

<table border="0" cellspacing="0" cellpadding="0" width="850"


background="images/bg.gif"></center>

<tr>

<td width="100%">

<div align="center">

<center>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:


collapse" bordercolor="#111111" width="750" id="AutoNumber1"></td></tr>

<tr>

<td><table border="0" width="100%" cellspacing="0"


cellpadding="10">

<td width="100%"><strong class="highlight"></center></center></a>

<h1 align="center"><img border="0" src="images/ade.jpg" align="left"


width="128" height="176"alt="Menggunakan src img"title="belajar menampilkan
gambar"><font color="#DD0000" size="5">

Saya sedang belajar bikin halaman depan web</font></h1>

<p align="left"> Pertama saya akan menulis paragraf dengan posisi paragraf
di sebelah kiri</p>

<p align="center"> Selanjutnya saya akan menulis paragraf dengan posisi


paragraf di sebelah tengah</p>

<p align="Right"> Selanjutnya saya akan menulis paragraf


dengan posisi paragraf di sebelah kanan</p>

<p align="justify"> Selanjutnya saya akan menulis paragraf


dengan posisi paragraf di sebelah rata kanan kiri</p>

<H1>Selanjutnya saya akan menulis teks menggunakan


heading 1</H1>

<H2>Selanjutnya saya akan menulis teks menggunakan


heading 2</H2>
<H3>Selanjutnya saya akan menulis teks menggunakan
heading 3</H3>

<H4>Selanjutnya saya akan menulis teks menggunakan


heading 4</H4>

<H5>Selanjutnya saya akan menulis teks menggunakan


heading 5</H5>

<H6>Selanjutnya saya akan menulis teks menggunakan


heading 6</H6>

<ul><li>Menggunakan list bullet</li></ul>

<ol><li>Menggunakan list number 1</li>

<li>Menggunakan list number 2</li>

<li>Menggunakan list number 3</li></ol>

<a href="images/ade.jpg"> Klik sini untuk menuju link


gambar</a>&nbsp;&nbsp;&nbsp;

<a href="http://lifemybusiness.co.cc"> Klik sini untuk


menuju link web</a>&nbsp;&nbsp;&nbsp;

<a href="awan.adie@yahoo.com"> Klik sini untuk menuju


link e-mail</a>&nbsp;&nbsp;&nbsp;

</table></td></tr></div>

<tr><td><p align="center"><blink><font color="#FF0000"


face="Arial" size="5">Jangan Lupa kunjungi <a
href="http://lifemybusiness.co.cc">lifemybusiness.co.cc</a></font></blink></p>

<p align="center"><font color="#FF0000" face="Times is roman" size="2"> Created


by Ade Tiawan</font></p></td></tr>

<div align="center">

<center>

<table border="0" width="800" cellspacing="0" cellpadding="0">

<tr>

<td width="100%"><img border="0" src="images/footer.gif" width="850"


height="60"></td>

</tr>

</table>

</center>

</div>
</body>

</html>

Setelah ini simpan di folder belajar dengan nama index.html. Dan kalau anda betul
menulisnya, maka akan menjadi seperti ini:

Written : Ade Tiawan

Contact person : 08990466502

e-mail : awan.adie@yahoo.com

website / blog :

 http://www.kemujuran.co.cc

 http://www.lifemybusiness.co.cc

 http://www.adetiawan.blogspot.com