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 operasi lain seperti Mac
OS, Linux, Unix dan lainnya.
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. Berikut ini adalah format standar struktur HTML dari
sebuah website.
<html>
<head>
<title>Your title</title>
</head>
<body>
</body>
</html>
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
World
Hello
<b>World!!</b>
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 yang penting-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.
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 jadi untuk
membuat seperti contoh diatas anda perlu menulisnya seperti ini:
Saya
belajar 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 :
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:
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
Jono</h1>
<p>Halo nama saya Jono dan saya lagi belajar
HTML</p>
<p align="right">James, 2006</p>
Hasilnya:
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 .
Langsung saja coba kode berikut ini:
<p>Baris 1<br>Baris
2<br>Baris 3<br>Baris
<b>4</b></p>
Hasil:
Baris 1
Baris 2
Baris 3
Baris 4
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:
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:
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:
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:
- List 1
- List 2
- 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:
- List 1
- List 2
- 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.
Suka dengan
artikel ini? Sebarkan keseluruh dunia melalui Jejaring Sosial berikut ini:
|
Oleh Hendrik Perdana
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Minggu,
30 Agustus 2009 00:26
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Berikut ini adalah tabel tag-tag HTML dan fungsinya:
Tag Utama
Modifikasi Teks
Font
Links
Gambar
Formatting
Tabel
Form
Anda tidak perlu menghafal semua tag tersebut, nanti
malah kepala anda malah pecah!. Cukup hafalkan yang penting-penting saja
seperti <table><form><input><ul>. Tidak hafal pun
tidak apa-apa kan kita bisa melihat daftar kalau lupa, yang penting kita
paham.
|
Sebuah link absolut mendefinisikan lokasi tertentu dari file Web atau
dokumen termasuk: protokol yang digunakan untuk mendapatkan dokumen, server
mendapatkannya dari, direktori terletak di, dan nama dokumen itu sendiri. Di
bawah ini adalah contoh dari link absolut:
<a href="http://www.domain.com/pagename.html"> </ a>
<a href="http://www.domain.com/pagename.html"> </ a>
link relatif, spider mesin
pencari dan browser sudah tahu di
mana dokumen saat ini berada.
Jadi, jika Anda link ke dokumen lain di direktori yang sama,
Anda tidak perlu menulis URL lengkap. Hanya nama
file yang diperlukan. Di bawah
ini adalah contoh dari link
relatif:
<a href="pagename.html"> </ a>
<a href="pagename.html"> </ a>
Tidak ada komentar:
Posting Komentar