Belajar HTML yang merupakan dasar dari pembuatan website

@import “http://www.dhimasronggobramantyo.com/style/style.css”;
@import “http://www.dhimasronggobramantyo.com/style/sh_style.css”;

body {
behavior: url(http://www.dhimasronggobramantyo.com/csshover.htc);
}

Artikel HTML

  • Home
    • » HTML
      • » Belajar HTML yang merupakan dasar dari pembuatan website

Belajar HTML yang merupakan dasar dari pembuatan website

Ini merupakan artikel pertama yang saya tulis di website saya ini. Karena diwebsite ini saya akan membagi-bagikan ilmu apa aja tentang pembuatan website, maka kita pelajari biangnya dulu, dasar dari semua dasar pembuatan website yaitu HTML.

HTML (Hypertext Markup Language) merupakan bahasa yang digunakan untuk membuat website. Menggunakan tag untuk mendeklarasikan sesuatu dan tag tersebut tidak ditampilkan tetapi tag tersebut memberi tahu browser bagaimana cara menampilkan dokumen website. Serta dapat saling berhubungan dengan dokumen HTML lain yang dikenal dengan istilah link.

Suatu halaman website sebenarnya hanya sebuah halaman teks, jika anda
menggunakan browser internet explorer dan anda mengklik view – source, maka anda
dapat melihat teks dari web tersebut. Tetapi teks tersebut diterjemahkan oleh
browser menjadi halaman website yang enak dilihat. Teks merupakan bahasa
universal bagi komputer, yang berarti setiap dokumen teks (termasuk website)
yang anda buat melalui Windows dapat dibaca di sistem perasi lain seperti
Mac OS, Linux, Unix dan lainnya.

HTML dan hal-hal yang berkaitan dengan website distandarisasi oleh sebuah
badan yang disebut World Wide Web Consortium (W3C). Standard terbaru, konsep dan
proposal mengenai starndarisasi web dapat dilihat di
http://www.w3.org
. Standar untuk HTML terbaru adalah HTML 4.0 yang telah
didukung oleh bermacam-macam browser seperti Microsoft Internet Explorer,
Netscape Navigator, Opera, Mozilla, Safari dan masih banyak lagi. Browser
menterjemahkan tag yang terdapat pada dokumen HTML. Kita akan
segera membicarakan mengenai tag.

Suatu halaman web merupakan file teks yang berarti anda dapat membuatnya hanya
dengan menggunakan notepad saja. Bahkan jika anda masih pertama kali mempelajari
HTML, notepad merupakan alat yang tepat. Saya menyarankan untuk menggunakan
editplus karena menurut saya enak aja dipakainya, tetapi anda bebas menggunakan
teks editor lain.

Jika anda baru pertama kali mengenal HTML, hindari Program
WYSIWIG (What You See Is What You Get) seperti Dreamweaver atau Frontpage/Web Expression.
Program-program ini memang memudahkan anda membuat website tetapi anda akan
kurang memahami HTML, gunakan Frontpage atau Dreamweaver apabila anda sudah
paham mengenai HTML.

Sekarang buka saja notepad anda dan kita mulai.

Kode HTML pertama

Buka notepad dan tuliskan kode dibawah ini

Hello World

Simpan file tersebut dengan nama hello.html didalam suatu folder (misal c:\webku)
dan buka file HTML tersebut dengan browser kesukaan anda. Hasilnya seperti ini:

Hello <b>World!!</b>

Oke jadi apa yang dimaksud oleh "<" dan ">", ketika anda menuliskan sesuatu
diantara tanda "<" dan ">" maka anda membuat sesuatu yang disebut dengan tag,
kalau anda lihat dikamus bahasa inggris tag artinya tanda/label. Sebagai contoh
tag <b> maksudnya untuk memulai huruf tebal (bold) dan tag
</b> merupakan tag penutup untuk menghentikan huruf tebal.

Sebuah halaman HTML yang baik harus memiliki tag <head> dan <body>, tapi kita akan membicarakan masalah ini belakangan.
Yang penting sekarang pahami dulu mengenai tag HTML. Sekarang akan kita pelajari
lebih jauh mengenai tag HTML.

Tag HTML dibagi menjadi dua, yaitu tag HTML yang memiliki penutup
(containers) atau yang berdiri sendiri (standalone).

Containers

Kebanyakan tag HTML adalah containers (kita sebut containers saja sebab sulit
mencari terjemahannya dalam bahasa Indonesia) yang berarti tag tersebut memiliki
pembuka (batas awal) dan penutup (batas akhir). Teks yang berada diantara tag
pembuka dan penutup akan berubah sesuai dengan fungsi dari tag tersebut.
Perhatikan contoh berikut:

Hello <i>World!!</i><br>

Hasil:

Hello World!!

Tag <i> berguna untuk memiringkan teks (italic) tag <i> memiliki penutup yaitu
</i>. Tag penutup selalu ditandai dengan "/". Contoh diatas terdapat teks
World!! diantara tag pembuka <i> dan tag penutup </i> sehingga menghasilkan
tulisan World!! yang miring. Tag pembuka memiliki atribut tetapi tag penutup
tidak memiliki atribut.

Standalone Tag

Beberapa tag tidak memerlukan penutup sebab tag tersebut hanya berfungsi
untuk menempatkan sebuah elemen pada halaman web. Sebagai contoh tag <img> yang merupakan
tag untuk memasang sebuah gambar didalam halaman web. Tag lain yang tidak
memiliki penutup adalah <br> yang berguna untuk memberi jarak antar teks dan tag <hr> untuk memberi garis. Tag HTML cukup banyak jumlahnya, anda dapat mencarinya dibuku-buku atau
mencarinya melalui google untuk mengetahui apa saja jenis tag HTML. Tapi saya akan beritahu yangpenting-penting saja.

Atribut

Atribut dipasang didalam tag pembuka untuk menambahkan fungsi dari tag
tersebut. Setiap tag memiliki beberapa atribut dan dipasang sesudah nama tag
dibatasi oleh spasi. Urutan atribut tidak perlu diperhatikan. Kebanyakan atribut
memiliki nilai yang dipanggil dengan menggunakan tanda “=” sesudah nama atribut.
Bingung? coba kode berikut ini dijamin anda mengerti:

Hello <font face="verdana" size="2" color="red">World!!</font>

Hasilnya:

Hello World!!

Tulisan World!! terletak ditengah tag <font> nah tag <font> memiliki atribut
face, size dan color yang dapat anda ubah nilainya. Cobalah untuk mengubah
ukuran (size) menjadi 3 atau jenis fontnya ubahlah dari verdana menjadi arial.
Kira-kira seperti itu kegunaan atribut. Bagaimana? lanjut?

HTML Entity

Jika anda ingin menuliskan karakter khusus dalam web, maka anda perlu
menulisnya menggunakan kode khusus. Kode khusus ini dikenal dengan istilah HTML
entity. Sebagai contoh anda ingin menulis seperti ini:

Saya belajar     
web

Anda lihat ada jarak spasi antara belajar dan web. Anda tidak bisa membuat
spasi dengan menekan tombol space bar berkali-kali. Meskipun pada kode HTML
hasilnya terdapat jarak namun browser hanya membacanya sekali, jadi sebanyak
apapun space bar yang tekan browser hanya membacanya satu spasi. Lalu bagaimana
caranya? Spasi dalam HTML memiliki kode HTML entity yaitu &nbsp; jadi untuk membuat
seperti contoh diatas anda perlu menulisnya seperti ini:

Saya belajar&nbsp;&nbsp;&nbsp;&nbsp;web

HTML entity selalu diawali dengan "&" dan diakhiri dengan ";" ada banyak sekali HTML entity anda dapat mencarinya, dan lagi-lagi saya akan menyuruh anda mencarinya sendiri melalui google.

Struktur Dokumen HTML

Tadi sudah saya katakan bahwa HTML yang baik memiliki tag <head>
dan <body>. <head> mendefiniskan bagian
header dari dokumen HTML yang berisi informasi mengenai dokumen HTML tersebut.
Tag <head> tidak memiliki atribut tetapi memiliki container
khusus didalam header seperti <base>, <meta>,
dan <title>. Tag <body> mendefinisikan awal
dari isi website dan ditutup dengan </body>. Tag <body>
berisi isi dokumen yang akan tampil di browser anda. Oke sekarang cobalah kode
berikut ini:

<html>
<head>
<title>Your title</title>
</head>
<body bgcolor="#cccccc">
Hello <b>World!!</b>
</body>
</html>

Hasilnya didalam Microsoft Internet Explorer :
Contoh HTML dasar

Anda lihat teks yang berada diantara tag
<title> muncul dibagian atas browser. Apapun yang anda tulis
diantara tag <body> akan muncul sebagai isi dari website anda.
Jika anda lihat terdapat tag <body bgcolor="#cccccc"> bgcolor merupakan atribut
dari <body> yang berguna untuk memberi warna pada background halaman website. Pelajari dan pahami kode tersebut maka anda akan mudah untuk mempelajari kode selanjutnya.

Susun file Anda

Sangat penting untuk meletakkan file-file HTML anda. Akan
lebih baik jika anda membuat folder untuk meletakkan file-file HTML dan
didalamnya anda membuat subfolder (misalnya images) untuk menyimpan file-file
gambar. Semakin sering anda membuat website anda akan semakin berpengalaman dan
mengetahui teknik dalam menyusun file. Jadi ini tergantung pengalaman anda.

index.html

Ketika anda membuka dhimasronggobramantyo.com/belajar.html maka
otomatis browser akan membuka file belajar.html. Tetapi jika kita membuka
dhimasronggobramantyo.com saja, file apa yang dibuka? Semua server web otomatis
akan mencari file index.html.

Karena itu jika website anda memiliki banyak halaman, anda
harus memiliki sebuah file index.html yang akan menjadi halaman pertama dari
website anda.

Oke, sekarang kita pelajari tag-tag HTML yang penting. Semua
kode HTML berikut ini harus ditulis didalam tag <body>

Teks dan Paragraf

Header/judul akan membuat mata pembaca tertuju pada judul dan tertarik untuk membacanya. Dengan menggunakan tag heading maka search engine dapat membaca seberapa penting isi dari suatu website.

Heading merupakan container yang diawali dengan tag <h1> dan
ditutup dengan tag </h1>. Ada 6 level heading mulai dari h1
sampai h6.

Cobalah kode berikut ini:

<h1>My First HTML</h1>
<h2>My First HTML</h2>
<h3>My First HTML</h3>
<h4>My First HTML</h4>
<h5>My First HTML</h5>
<h6>My First HTML</h6>

Hasil:
Contoh penggunaan tag Heading

Saya rasa anda dapat dengan mudah memahami kode tersebut, sekarang kita coba tag HTML penting lainnya. <p> digunakan untuk membuat paragraf, ini merupakan salah satu tag yang banyak digunakan, tag penting lainnya adalah <b> untuk menebalkan,<i>
untuk memiringkan dan <u> untuk garis bawah

Sekarang coba kode berikut ini:

<p>Halo, nama saya <b>Budi</b> dan 
saya ingin belajar HTML.</p>
<p>Ini merupakan <i>kode HTML pertama saya</i> dan saya belajar untuk <u>memformat</u> teks dalam HTML </p>

Bagaimana hasilnya? silahkan anda coba sendiri, jika anda selalu melihat contoh dihalaman ini, anda tidak akan mencoba 🙂

Beberapa tag mempunyai atribut ALIGN, termasuk <p> dan
<h1> - <h6>. ALIGN berguna untuk membuat teks rata kiri, tengah atau kanan. Cobalah kode berikut:

<h1 align="center">Nama saya irman</h1>
<p>Halo nama saya irman dan saya lagi belajar HTML</p>
<p align="right">James, 2006</p>

Hasilnya:
Contoh penggunaan Alignment

Anda dapat mengubah jenis huruf, ukuran dan warna. Untuk
mengubah huruf digunakan tag <font>, tag <font> memiliki atribut seperti face, size dan color. Contoh:

<p><font face="Arial" size="2" color="#FF0000">Nama 
saya</font>
<b>Bambang</b><font face="Arial" size="2"> dan </font><font face="Tahoma">saya cinta rupiah</font></p>

Silahkan anda coba sendiri untuk melihat seperti apa hasilnya

Didalam HTML, untuk memberi jarak anda tidak bisa hanya
menekan "enter" saja. Untuk memberi jarak perbaris kita perlu tag HTML yaitu <br> sedangkan untuk spasi seperti yang sudah saya jelaskan tadi, kita perlu menggunakan HTML entity / character
entity, untuk spasi character entitynya adalah &nbsp;. Langsung
saja coba kode berikut ini:

<p>Baris 1<br>Baris 2<br>Baris&nbsp;&nbsp;&nbsp;&nbsp; 3<br>Baris 
<b>4</b></p>

Hasil:

Baris 1
Baris 2
Baris     3
Baris 4

Untuk memberikan garis horisontal digunakan tag <hr>. Tag <hr>
memiliki beberapa atribut. Tag <hr> tidak memerlukan tag
penutup jadi tag <hr> merupakan standalone tag. Coba contoh berikut ini:

<p>Halo nama saya Telo</p>
<hr width="25%" align="justify">
<p>Saya lagi belajar membuat garis horisontal.</p>
<hr size="4" align="justify">
<p>Matur nuwun</p>
<hr size="3" noshade color="#000000" width="25%" align="justify">

Hasil:
Contoh penggunaan Horizontal Rules

Seperti yang anda lihat, anda bisa memasang banyak atribut dalam satu tag. Pada tag <hr> terdapat atribut yang tidak memiliki nilai yaitu noshade. Memang dalam beberapa tag HTML terdapat atribut-atribut yang tidak memiliki nilai. Salah satunya adalah noshade yang berarti menghilangkan bayangan pada garis. Anda dapat melihat perbedaan tag <hr> yang menggunakan noshade dengan
yang tidak pada kode diatas.

Bagaimana? mudah kan belajar HTML, jangan senang dulu
sekarang kita akan mempelajari yang lebih sulit

Links

Oke anda telah membuat banyak halaman HTML, sekarang bagaimana caranya anda berpindah dari satu halaman ke halaman yang lain? Apakah saya perlu menuliskan alamatnya di browser? Link adalah jawabannya. <a> merupakan tag HTML untuk membuat link agar kita dapat berpindah ke halaman lain.
Tag <a> memiliki atribut yang sangat penting yaitu href.
Langsung saja coba kode berikut ini:

My <a href="http://www.dhimasronggobramantyo.com">Homepage</a>

Hasil:

My homepage

Jika anda lihat, maka teks homepage telah berubah menjadi
link, jika anda klik maka browser akan menuju alamat yang tertera pada atribut href.
Sekarang jika anda memiliki banyak file HTML dalam satu folder, apakah saya
perlu menggunakan http:// untuk melinknya? tentu tidak anda cukup menulis nama
filenya saja, asalkan file tersebut berada satu folder dengan file yang berisi
link. Contoh:

My <a href="contact.html">homepage</a>

Hasil:

My homepage

Jika anda klik, maka browser akan membuka file contact.html yang berada pada satu folder. Bagaimana jika filenya berada difolder lain? gampang, gunakan kode berikut:

My <a href="folder/contact.html">homepage</a>

Hasil:

My homepage

Jika anda ingin ketika link diklik dan halaman tersebut
muncul pada jendela browser yang baru, gunakan atribut target="_blank"
seperti ini:

My <a href="http://www.dhimasronggobramantyo.com" 
target="_blank">homepage</a>

Oke silahkan anda coba sendiri untuk melihat hasilnya, sekarang kita akan belajar tentang images

Images

Pertengahan tahun 90’an website-website yang ada tidak memiliki gambar, karena browser yang ada tidak memiliki kemampuan untuk menampilkan gambar. Tetapi sekarang website tanpa gambar akan terlihat
membosankan, tetapi website dengan banyak gambar akan terlihat menyebalkan, nah lo. Jadi gunakan gambar seperlunya, keluarkan semua imajinasi dan nilai seni anda untuk dapat membuat website yang nyaman dilihat. Saya tidak akan mengajarkan bagaimana cara membuat gambar disini, ada kategori lain diwebsite ini untuk belajar mendesain, anda dapat belajar menggunakan Photoshop. Gambar yang dipasang di website disarankan menggunakan bertipe file gif atau jpg. Untuk memasang image anda memerlukan tag <img>. Tag <img> tidak memerlukan penutup dan memiliki atribut src untuk mengambil gambar dari suatu alamat. Coba contoh berikut ini:

<img src="images/artikel/introhtml_02.gif" width="313" height="43" 
alt="Contoh Gambar">

Hasil:
Contoh Gambar

Atribut src disini sama dengan atribut href pada tag <a> yang berisi alamat posisi gambar. Pada contoh kode diatas anda memiliki gambar introhtml_02.gif yang berada pada folder images. Jika anda tidak memiliki file tersebut maka gambar tidak ditampilkan. Atribut width dan height merupakan opsional, tapi saya sarankan untuk mencantumkannya agar browser mengetahui ukuran gambar apabila gambar gagal ditampilkan. Atribut alt berguna untuk menampilkan teks pada gambar jika gambar gagal ditampilkan atau belum selesai ditampilkan. Anda dapat memberikan garis tepi pada gambar dengan menambahkan atribut border

<a href="http://www.dhimasronggobramantyo.com">
<img border="1" src="images/introhtml_02.gif" width="313" height="43"></a>

Hasil:


Contoh Gambar

Komentar

Anda dapat menuliskan komentar dikode HTML, komentar berguna apabila anda ingin kembali mengutak-atik kode maka anda ingat kode tersebut fungsinya apa. Komentar hanya untuk memudahkan anda saja. Komentar tidak ditampilkan oleh browser. Untuk menulis komentar diawali dengan <!– dan
diakhiri dengan –> lihat contoh berikut ini:

<!--Kode untuk menampilkan nama saya-->
<p>Nama saya <b>Dhimas</b></p>

List

Tag list berguna untuk menampilkan list-list. Ada 3 macam jenis list pada HTML. Yang pertama adalah Unordered List <ul>:

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>

Hasil:

  • List 1
  • List 2
  • List 3

Tag <ul> merupakan tag pembuka. Diantara
tag <ul> Anda dapat menambahkan tag <li>
untuk setiap list yang akan ditampilkan. Tag list lainnya adalah Ordered List <ol>
Anda dapat menggunakannya sama seperti tag <ul> Contoh:

<ol>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ol>

Hasil:

  1. List 1
  2. List 2
  3. List 3

Jika anda ingin memulai list tidak dari nomor satu tambahkan
atribut start. Contoh:

<ol start="3">
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ol>

Hasil:

  1. List 1
  2. List 2
  3. List 3

Tabel merupakan hal yang paling penting dalam membuat
interface website anda. Dengan tabel anda dapat memecah layout website menjadi
beberapa kolom atau baris. Dengan tabel halaman website anda akan lebih rapih.

Table merupakan tag html terumit, karena didalam tag table terdapat tag-tag lainnya. Dan table sangat penting. Karena itu sebelum meneruskan, tarik nafas dalam-dalam dan konsentrasi.

Untuk membuat tabel maka diperlukan tag-tag dasar seperti ini :

  • <TABLE></TABLE>–Tag ini merupakan containers untuk membuat tabel.
  • <TR></TR>–Didalam tabel tag ini berfungsi untuk membuat baris.
  • <TD></TD>–Tag untuk membuat kolom. didalam tag <tr> harus terdapat tag <td>, anda bisa menambahkan banyak tag <td> didalam <tr> untuk membuat kolom.
  • <TH></TH>–Sama dengan <td> hanya saja berfungsi sebagai header, biasanya digunakan pada baris pertama didalam tabel.

Setiap tag tabel tersebut memiliki banyak atribut. Oke langsung saja coba kode berikut ini:

Contoh:

<table border="1" width="60%">
<tr>
<td>Contoh Table</td>
</tr>
</table>

Hasilnya:

Contoh Tabel

Tabel diawali dengan tag <table> dan
biasanya memiliki atribut border. Jika border="0" maka garis pada tabel tidak ditampilkan.
Biasanya jika kita tidak menampilkan atribut border maka otomatis tabel tersebut
juga tidak memiliki garis. <table> memiliki atribut cellpadding
untuk memberi jarak didalam kolom dan cellspacing untuk memberi
jarak antara kolom. Coba kode berikut ini:

<table border="1" width="200" cellpadding="4" cellspacing="5">
<tr>
<td width="100">Cell 1</td>
<td width="100">Cell 2</td>
</tr>
</table>

Hasil:

Cell 1

Cell 2

Coba anda ubah nilai dari atribut cellpadding
dan cellspacing untuk melihat perbedaannya, cobalah untuk mengutak-atik kode diatas dengan mengubah nilai-nilai atributnya.

Setiap tabel memiliki baris dengan menggunakan tag <tr>.
Didalam baris perlu sebuah kolom atau lebih, kolom dibuat dengan menggunakan tag <td>. Untuk lebih jelasnya cobalah kode berikut ini:

<table border="1" width="200" cellpadding="2">
 <tr>
  <td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
  <td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
/  </tr>
 <tr>
  <td width="100">cell 1</td>
  <td width="100">cell 2</td>
 </tr>
 <tr>
  <td width="100">cell 3</td>
  <td width="100">cell 4</td>
/  </tr>
</table>

Hasil:

Header

Header

cell 1

cell 2

cell 3

cell 4

Bagaimana anda mengerti maksudnya kode diatas, coba anda
pahami dulu. Pada kode diatas terdapat atribut bgcolor yang berguna untuk memberi warna pada background. Didalam kolom <td> anda dapat menuliskan kode HTML apa saja,
bahkan anda dapat memasang tag <table> didalamnya, yang berarti anda memasang tabel didalam tabel. Contoh lainnya:

<table border="1" width="200" cellpadding="2">
<tr>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
</tr>
<tr>
<td width="100" rowspan="2" valign="top">cell 1</td>
<td width="100">cell 2</td>
</tr>
<tr>
<td width="100">cell 4</td>
</tr>
</table>

Hasilnya:

Header

Header

cell 1

cell 2

cell 4

Anda lihat ada atribut rowspan="2" ini berguna untuk menggabungkan
2 baris menjadi satu, jika anda ingin menggabungkan lebih dari 2 baris, ubah saja nilainya. Bagaiman susah? coba anda pelajari terus. Jika sudah coba anda
pahami kode berikut ini:

<table border="0" width="200" cellpadding="2" cellspacing="1" bgcolor="#000000">
<tr>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
</tr>
<tr>
<td width="100" valign="top" bgcolor="#CCCCCC" align="left">Left</td>
<td width="100" bgcolor="#CCCCCC" align="right">Right</td>
</tr>
<tr>
<td width="200" valign="top" colspan="2" bgcolor="#FFFFFF" align="center">
Table is cool</td>
</tr>
<tr>
<td width="200" valign="top" colspan="2" bgcolor="#FFFFFF" align="center">
But it's not easy</td>
</tr>
</table>

Hasil:

Header

Header

Left

Right

Table is cool

But it’s not easy

Anda sudah mengetahui dasar-dasar HTML. Masih banyak lagi tag-tag HTML lainnya seperti frames dan form. Saya akan mengajarkan frames diartikel lainnya, tetapi frames harus dihindari dalam membuat website, alasan utama apa yang ada didalam frames tidak terbaca oleh Search Engine. Tag form hanya dibutuhkan apabila anda membuat
website dinamis menggunakan bahasa pemrograman web seperti PHP, ASP, Perl atau JSP.

Sekarang kita akan membicarakan tag <META>.
Tag <META> digunakan agar search engine mengenal dan dapat
mengkategorisasikan website anda, gampangnya agar search engine mengetahui
website anda isinya tentang apa. Tetapi tidak semua search engine membaca tag
<META> tetapi sebagian besar membaca tag ini, jadi kita perlu menyertakannya
pada website kita. Tag <META> berada diantara tag  <head>
bukan <body> yang berarti isi tag tersebut tidak ditampilkan dibrowser.

Sebenarnya apa sih kegunaan Search Engine dan apa pengaruhnya
untuk website? Saya akan jelaskan secara gampang, anda memiliki website katakan
websitesaya.com, nah bagaiman milyaran pengguna internet dapat mengetahui kalau
ada sebuah situs websitesaya.com diantara ratusan juta situs lainnya. Pengguna
internet banyak yang melakukan pencarian melalui search engine seperti
google atau
yahoo. Jika mereka melakukan pencarian dan situs anda muncul
pada hasil pencarian tersebut, maka anda mendapatkan pengunjung yang mengunjungi
website anda. Bagaimana agar website saya ada di google atau search engine
lainnya? ya dengan menggunakan <META> maka search engine akan mengenali website anda. Sebenarnya prosesnya jauh lebih rumit,
search engine memiliki perhitungannya sendiri seperti ranking, backlink,
recipocal link, tetapi kita ambil gampangnya saja.

Oke anda sudah mengerti pentingnya tag <META>Tag <META>
memiliki atribut yang paling penting Keywords dan DESCRIPTION
dimana kita memasukkan deskripsi dan kata kunci yang berhubungan dengan website
kita.

Sebagai contoh misalnya kita memiliki website kecoak.com yang
berisi bagaimana cara memelihara dan beternak kecoa. Maka kira-kira kita perlu
membuat meta seperti ini:

<html>
<head>
<META content="kecoak.com" name=AUTHOR>
<META content="Cara memelihara dan beternak kecoak." name=description>
<META content="kecoak, beternak, memelihara, coro, ternak, pelihara" name=keywords>
<META content="INDEX, FOLLOW" name=ROBOTS>
<META http-equiv="Content-Language" content="en-us">
<META http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ternak Kecoak</title>
</head>

Kira-kira seperti itu, ok anda telah mempelajari HTML,
sekarang anda tinggal turun gunung dan mempraktekkan apa yang sudah dipelajari. Teruslah mencoba agar anda
semakin ahli.

Simpan artikel ini ke: Digg it Del.icio.us Furl Reddit

Komentar [56]

1

Komentar Dikirim oleh chandra pada 27 Oktober 2007 09:41:20 WIB

kode navigation

2

Komentar Dikirim oleh Sulistyo pada 29 Oktober 2007 03:12:06 WIB

Assalamu’alaikum
saya pemula dalam html, bisakah saya mendapatkan artikel-artikel anda untuk saya pelajari di rumah karena saya harus ke warnet tiap kali membuka web anda. Jika berkenan mohon kirimkan artikel anda melalui e-mail saya : zilluz9walli@yahoo.com
sebelumnya saya ucapkan banyak terima kasih
Wassalamu’alaikum

3

Komentar Dikirim oleh Andi Reza pada 29 Oktober 2007 05:29:51 WIB

Assalamualaikum
wah..artikel yang sangat berguna bagi pemula seperti saya…minta tolong donk..kira2 server website yg pling mudah dipelajari tu situsnya apa ya???
dan kira2 berapa biaya perbulannya???
Kalo anda sendiri memakai server apa untuk buat web ini??keren banget….
tolong kirimkan saya info masalah ini ya..
ke : andi_salvo@yahoo.co.id
trims

4

Komentar Dikirim oleh Dhimas pada 30 Oktober 2007 07:57:30 WIB

to Sulistyo

hmmm, saya malah belum kepikiran untuk membuat artikel2 terebut keformat lain. Mungkin nanti suatu saat saya akan konvert semuanya ke pdf, tapi kalo artikelnya udah banyak. Btw saya juga kalo internet lewat warnet kok.

to Andi Reza

Saya hosting semua website saya make masterwebnet. Dulu masterwebnet bagus tapi sekarang mulai payah, layanan support ama billingnya mulai jelek. Kebanyakan pelanggan kali, tapi mau gimana lagi layanan hosting lainnya lebih parah. Mau yg bagus ya pake layanan hosting dari luar negri

5

Komentar Dikirim oleh priyo adhi nugroho pada 04 November 2007 06:57:37 WIB

ini bagus sekali buat pemula..
tapi ajarin saya dong ?!
tolong telepon saya 02199776192

6

Komentar Dikirim oleh derek pada 06 November 2007 10:32:07 WIB

Bagaimana pun, saya harus mengakui kebaikan dan Kelebihan bung DHIMAS RONGGO BRMANTYO dalam membagi pengetahuannya, karena hal ini sangat berguna bagi saya yang buta tehnologi ini.
Kalau semua orang mau seperti bung DIMAS, saya yakin istilah katrok tdk akan berlaku lagi.

salam hangat,

derek

7

Komentar Dikirim oleh agoes pada 07 November 2007 04:10:21 WIB

makasih tutorialnya,,,,aq sdh bs buat tabel mas, tapi waktu aku pasang jaraknya dari judul posting kok jauh ke bawah,…

8

Komentar Dikirim oleh frend pada 25 November 2007 04:45:31 WIB

saya msh bljar, bisa ksh cntoh web pribadi ngga ?

9

Komentar Dikirim oleh Ketut Wirdayasa pada 01 Desember 2007 08:47:54 WIB

Sdr Dhimas adalah guru web desiner saya yang membuat saya bisa membuat website. Walaupun pengetahuan saya membuat website belum sempurna tetapi sudah ada beberapa website yg telah saya buat : http://www.hindu-sumbar.net dan http://www.boatcharters-association.com dan http://www.kumbang-island.com tetapi saya belum puas sampai disini karena penampilan website saya penampilannya belum cantik.

10

Komentar Dikirim oleh daru pada 07 Desember 2007 08:36:32 WIB

ass
makasih mas atas informasinya yang bagus banget
saya ingin nanya apa aja sih keuntungun kita punya web dari segi materil dan non materil
tolong jawabanya yaa
ok
kirim ke daroee@yahoo.com
hantur nuhun
terima kasih banyak

11

Komentar Dikirim oleh hulla pada 17 Desember 2007 01:41:47 WIB

heloomas..wah..thankya atas tutor html..tapi ada yang aneh..ada g yang udah jd kaya web yang mas buat ni..ya pengen tau sih karna tugas.

12

Komentar Dikirim oleh Ajie pada 21 Desember 2007 01:55:01 WIB

Halluu Mas..Quw mo tanya,,gimana sich cara buat tulisan biar bisa berjalan dan kerlap-kerlip??yang saya tau cuma tulisan yang berjalan tapi yang formatnya Marquee & marquee behaivor=alternate…kalo yang lainya itu ada ga???sekalian minta contoh web site yang dibuat dari front page…
Ta tunggu jawabannya ya mass..
key
kirim aza ke Cah_futsal@yahoo.co.id
Thanx Before

13

Komentar Dikirim oleh hillda z pada 30 Desember 2007 02:47:46 WIB

mas tolong kirimin saya contoh notepad pembuatan web desain ke email saya ya,tolong ecepatnya cos mo ta pake disemester 2 ini.kalo ada dari berbagai program macromedia seperti dreamweaver,dll.
kirim aza ke hillda_joy14u@yahoo.com
thank’s

14

Komentar Dikirim oleh Rukma pada 02 Januari 2008 03:29:19 WIB

Mas minta tolong donk… klo buat koneksiin form di dalem NOTEPAD codenya apaan…

contoh:
form page1 diisi, trus … isinya ini nongol di page2 …
ama code yg koneksi ke database juga ya…

sebelumnya tq

another.dayz@yahoo.co.id

15

Komentar Dikirim oleh zahra pada 09 Januari 2008 12:44:01 WIB

tengkyu

16

Komentar Dikirim oleh Panji pada 14 Januari 2008 10:07:43 WIB

mas saya masih pemula,bisa kasi contoh web pribadi??

kirim ke email saya..

Eka_panji_s@yahoo.com

17

Komentar Dikirim oleh riescha pada 16 Januari 2008 09:20:11 WIB

thanks bgt ya
tutorialnya berguna bgt

18

Komentar Dikirim oleh harryo pada 23 Januari 2008 01:07:30 WIB

mas tolong kirim contoh web pribadi ke e-mail gw y, bt tambah idea aza: sen_tan86@yahoo.com

thanks

19

Komentar Dikirim oleh udin pada 01 Februari 2008 02:50:51 WIB

Jika anda baru pertama kali mengenal HTML, hindari Program WYSIWIG (What You See Is What You Get) seperti Dreamweaver atau Frontpage/Web Expression. Program-program ini memang memudahkan anda membuat website tetapi anda akan kurang memahami HTML, gunakan Frontpage atau Dreamweaver apabila anda sudah paham mengenai HTML.

emang harus gunakan program apa?
maklum msh newbie :">

20

Komentar Dikirim oleh Dhimas pada 09 Februari 2008 11:22:41 WIB

to Ajie

di html adanya marquee aja, kalo css bisa buat kelap kelip pake text-decoration:blink tapi gak jalan di IE, kalau mau kelap kelip paling bagus pake javascript.

to Hulla

hehehe apanya yang aneh, ini web juga saya buat pake dsar2 diatas + php/mysql + css + photoshop buat desain tamiplannya

to Rukma

koneksiin database ya pake php, mau proses form juga pake php, html tidak bisa memproses form.

to udin

pake program text editor, kayak editplus atau notepad++ atau notepad. Emang lebih sulit tapi nanti pasti lebih jago.

21

Komentar Dikirim oleh Coba Dong pada 16 Februari 2008 08:16:15 WIB

Bagaimana menentukan batas maksimum characters didalam cell seperti ini :
ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc maka cell akan semakin lebar

22

Komentar Dikirim oleh ie_cha pada 17 Februari 2008 03:47:09 WIB

Sebelumnya makasih atas informasinya!!
saya sedang mempelajarinya.
saya ko ga berhasil ya…hasil yang terlihat di internet explorer…bukan hasil yang diharapkan…malah seperti kode programnya. Apa yang salah ya?
trus klo mau diberi web banner yang sudah di edit di photoshop, caranya gimana ya…makasi

23

Komentar Dikirim oleh Bimakov pada 18 Februari 2008 11:46:41 WIB

@dhimas bedanya website dan web desain apa ya mas…hahah seng sabar mas!!big grin

24

Komentar Dikirim oleh Bimakov pada 18 Februari 2008 11:52:23 WIB

@UDIN ga perlu dihindari mas udin, saran saya pake frontpage/ Ms-expression emang lebih sederhana daripada Dreamweaver, tapi itu justru memudahkan.
kita kan tetep bisa utak-atik kode html dar situ atau klo mau pake notepad ya dari frontpage/xpression trus dikopi ke notepad trus dipelajari trus…trusss big grin =)) smile

25

Komentar Dikirim oleh krakra_krukru pada 20 Februari 2008 06:01:12 WIB

ThX ya Mas dah ngasih tau belajar html, jadi aku sekarang udah isa walapun sedikit-sedikit….
Mas klo punya artikel tentang html bilang ya mas!!!!!!!!!!

26

Komentar Dikirim oleh mpi pada 28 Februari 2008 03:15:10 WIB

apa ada cd software atau panduan mudah?

27

Komentar Dikirim oleh ahmad pada 24 Maret 2008 02:18:25 WIB

wah…keren Mas…Blog sama isinya..
amat bermanfaat….
jadi tambah semangat neh tuk belajar lbh banyak lagi

wassalam
http://ocehankoe.blogspot.com

28

Komentar Dikirim oleh sam nauli pada 29 Maret 2008 07:23:47 WIB

kalau bisa sih pembelajaran pembuatan web yang buat pemula juga di buat,saya rasa pembelajaran yang team ada buat sudah cukup jelas.

29

Komentar Dikirim oleh sopian pada 31 Maret 2008 12:38:35 WIB

mas makasih sekali neh udah buat web semacam ini .. udahbelajar walau masih dikit dikit .. mas bisa kirim artike buat saya .. utk belajar di rumah .. makasih mas kalo ada .. tolong mas

kirim ke kenetcarisetoran@gmail.com

30

Komentar Dikirim oleh Rahmad santoso pada 08 April 2008 02:04:49 WIB

terima kasih yach!!!!!!! kepada bapak yg telah membuat web ini yg menjelasan kan tentang html soalnya saya seorang pemula yg ingin belajar HTML tapi pada dasarnya saya nga’ tau tapi setelah bapak jelasankan say suda mengerti . tapi say minta tolong!!!!!!!!!!!!!!!!! sekali kepada bapak agar berkenan menjelaskan lagi tentang cara membuat web dan cara dasar -dasar membuat web dan di kirim kealamat email saya . Tolong yach!!!!!!!!!!!!!! pak saya mohon pada bapak kirim ke emali saya ok!!!!!!!!!!

rahmad.gelo@gmail.com atau ke
rahmad.gelo@sctvnews.com
Tolong yach pak saya sangat berharap sekali

31

Komentar Dikirim oleh doez pada 09 April 2008 08:13:31 WIB

thank’s

32

Komentar Dikirim oleh andra266 pada 09 April 2008 08:35:15 WIB

maacih y tp q minta yang dah jadi langsung dunk coz kan bisa di bandingin m pnya q jd pnya q bs lbh baik lagi..gitu
tankz y

33

Komentar Dikirim oleh agus pur pada 13 April 2008 12:09:26 WIB

mas mohon kiranya mas kirim artikel ini ke goesspoerr@gmail.com

34

Komentar Dikirim oleh parus pada 15 April 2008 03:57:47 WIB

apapun komentar kritik + ato -,,, ambil positif jgn pikir negatif… maz dhimas da ngasih