Ditulis Oleh:AmaralSyahada
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 disebutWorld 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
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.
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!!
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
merupakan tag penutup untuk menghentikan huruf tebal.
Sebuah halaman HTML yang baik harus memiliki tag 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 disebutWorld 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 iniHello World
Hello World!!
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
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 World!!
Hello World!!
Tag berguna untuk memiringkan teks (italic) tag memiliki penutup yaitu . Tag penutup selalu ditandai dengan “/”. Contoh diatas terdapat teks World!! diantara tag pembuka dan tag penutup 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![]()
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 World!!
Hello World!!
Tulisan World!! terletak ditengah tag
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
Struktur Dokumen HTML
Tadi sudah saya katakan bahwa HTML yang baik memiliki tag</code>. Tag <code><body></code> mendefinisikan awal dari isi website dan ditutup dengan <code></body></code>. Tag <code><body></code> berisi isi dokumen yang akan tampil di browser anda. Oke sekarang cobalah kode berikut ini:</p>
<div>
<pre><html>
<head>
<title>Your title
Hello World!!
Hasilnya didalam Microsoft Internet Explorer :
Anda lihat teks yang berada diantara tag
</code> muncul dibagian atas browser. Apapun yang anda tulis diantara tag <code><body></code> akan muncul sebagai isi dari website anda. Jika anda lihat terdapat tag <code><body bgcolor="#cccccc"></code> bgcolor merupakan atribut dari <code><body></code> yang
berguna untuk memberi warna pada background halaman website. Pelajari
dan pahami kode tersebut maka anda akan mudah untuk mempelajari kode
selanjutnya.</p>
<h4>
Susun file Anda</h4>
<p>
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.</p>
<h4>
index.html</h4>
<p>
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.</p>
<p>
Karena itu jika website anda memiliki banyak halaman, anda harus
memiliki sebuah file index.html yang akan menjadi halaman pertama dari
website anda.</p>
<p>
Oke, sekarang kita pelajari tag-tag HTML yang penting. Semua kode HTML berikut ini harus ditulis didalam tag <code><body></code></p>
<h4>
Teks dan Paragraf</h4>
<p>
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.</p>
<p>
Heading merupakan container yang diawali dengan tag <code><h1>
</code> dan ditutup dengan tag <code></h1>
</code>. Ada 6 level heading mulai dari h1 sampai h6.</p>
<p>
Cobalah kode berikut ini:</p>
<div>
<pre><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>
</pre>
</div>
<p>
Hasil:<br>
<img src="http://www.dhimasronggobramantyo.com/images/artikel/contohh.gif" alt="Contoh penggunaan tag Heading" height="226" width="240"></p>
<p>
Saya rasa anda dapat dengan mudah memahami kode tersebut, sekarang kita coba tag HTML penting lainnya. <code><p>
</code> digunakan untuk membuat paragraf, ini merupakan salah satu tag yang banyak digunakan, tag penting lainnya adalah <code><b></code> untuk <strong>menebalkan</strong>,<code><i></code> untuk <em>memiringkan</em>dan <code><u></code> untuk garis bawah</p>
<p>
Sekarang coba kode berikut ini:</p>
<div>
<pre><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>
</pre>
</div>
<p>
Bagaimana hasilnya? silahkan anda coba sendiri, jika anda selalu melihat contoh dihalaman ini, anda tidak akan mencoba <img src="http://s0.wp.com/wp-includes/images/smilies/icon_smile.gif?m=1129645325g" alt=":)" class="wp-smiley"> </p>
<p>
Beberapa tag mempunyai atribut ALIGN, termasuk <code><p>
</code> dan <code><h1>
- <h6>
</code>. ALIGN berguna untuk membuat teks rata kiri, tengah atau kanan. Cobalah kode berikut:</p>
<div>
<pre><h1 align="center">
Nama saya Jono</h1>
<p>
Halo nama saya Jono dan saya lagi belajar HTML</p>
<p align="right">
James, 2006</p>
</pre>
</div>
<p>
Hasilnya:<br>
<img style="" src="http://www.dhimasronggobramantyo.com/images/artikel/contohalign.gif" alt="Contoh penggunaan Alignment" height="117" width="537"></p>
<p>
Anda dapat mengubah jenis huruf, ukuran dan warna. Untuk mengubah huruf digunakan tag<code><font></code>, tag <code><font> </code>memiliki atribut seperti face, size dan color. Contoh:</p>
<div>
<pre><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>
</pre>
</div>
<p>
Silahkan anda coba sendiri untuk melihat seperti apa hasilnya</p>
<p>
Didalam HTML, untuk memberi jarak anda tidak bisa hanya menekan
“enter” saja. Untuk memberi jarak perbaris kita perlu tag HTML yaitu <code><br></code> sedangkan
untuk spasi seperti yang sudah saya jelaskan tadi, kita perlu
menggunakan HTML entity / character entity, untuk spasi character
entitynya adalah <code> </code>. Langsung saja coba kode berikut ini:</p>
<div>
<pre><p>
Baris 1<br>Baris 2<br>Baris 3<br>Baris
<b>4</b></p>
</pre>
</div>
<p>
Hasil:</p>
<p>
Baris 1<br>
Baris 2<br>
Baris 3<br>
Baris <strong>4</strong></p>
<p>
Untuk memberikan garis horisontal digunakan tag <code><hr>
</code>. Tag <code><hr>
</code> memiliki beberapa atribut. Tag<code><hr>
</code> tidak memerlukan tag penutup jadi tag <code><hr>
</code> merupakan standalone tag. Coba contoh berikut ini:</p>
<div>
<pre><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">
</pre>
</div>
<p>
Hasil:<br>
<img src="http://www.dhimasronggobramantyo.com/images/artikel/contohhr.gif" alt="Contoh penggunaan Horizontal Rules" height="212" width="561"></p>
<p>
Seperti yang anda lihat, anda bisa memasang banyak atribut dalam satu tag. Pada tag <code><hr>
</code>terdapat atribut yang tidak memiliki nilai yaitu <code>noshade</code>. Memang dalam beberapa tag HTML terdapat atribut-atribut yang tidak memiliki nilai. Salah satunya adalah <code>noshade</code> yang berarti menghilangkan bayangan pada garis. Anda dapat melihat perbedaan tag <code><hr>
</code> yang menggunakan<code>noshade</code> dengan yang tidak pada kode diatas.</p>
<p>
Bagaimana? mudah kan belajar HTML, jangan senang dulu sekarang kita akan mempelajari yang lebih sulit</p>
<h4>
Links</h4>
<p>
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. <code><a></code> merupakan tag HTML untuk membuat link agar kita dapat berpindah ke halaman lain. Tag <code><a></code> memiliki atribut yang sangat penting yaitu <code>href</code>. Langsung saja coba kode berikut ini:</p>
<div>
<pre>My <a href="http://www.dhimasronggobramantyo.com">Homepage</a></pre>
</div>
<p>
Hasil:</p>
<p>
My <a href="http://www.dhimasronggobramantyo.com/">homepage</a></p>
<p>
Jika anda lihat, maka teks homepage telah berubah menjadi link, jika
anda klik maka browser akan menuju alamat yang tertera pada atribut <code>href</code>.
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:</p>
<div>
<pre>My <a href="contact.html">homepage</a></pre>
</div>
<p>
Hasil:</p>
<p>
My <a href="http://www.dhimasronggobramantyo.com/artikel/contact.html">homepage</a></p>
<p>
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:</p>
<div>
<pre>My <a href="folder/contact.html">homepage</a></pre>
</div>
<p>
Hasil:</p>
<p>
My <a href="http://www.dhimasronggobramantyo.com/artikel/folder/contact.html">homepage</a></p>
<p>
Jika anda ingin ketika link diklik dan halaman tersebut muncul pada jendela browser yang baru, gunakan atribut <code>target="_blank"</code> seperti ini:</p>
<div>
<pre>My <a href="http://www.dhimasronggobramantyo.com"
target="_blank">homepage</a></pre>
</div>
<p>
Oke silahkan anda coba sendiri untuk melihat hasilnya, sekarang kita akan belajar tentang images</p>
<h4>
Images</h4>
<p>
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 <code><img></code>. Tag <code><img></code> tidak memerlukan penutup dan memiliki atribut <code>src</code> untuk mengambil gambar dari suatu alamat. Coba contoh berikut ini:</p>
<div>
<pre><img src="images/artikel/introhtml_02.gif" width="313" height="43"
alt="Contoh Gambar"></pre>
</div>
<p>
Hasil:<br>
<img src="http://www.dhimasronggobramantyo.com/images/artikel/introhtml_02.gif" alt="Contoh Gambar" height="43" width="313"></p>
<p>
Atribut <code>src</code> disini sama dengan atribut <code>href</code> pada tag <code><a></code> 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 <code>width</code> dan <code>height</code>merupakan
opsional, tapi saya sarankan untuk mencantumkannya agar browser
mengetahui ukuran gambar apabila gambar gagal ditampilkan. Atribut <code>alt</code> berguna
untuk menampilkan teks pada gambar jika gambar gagal ditampilkan atau
belum selesai ditampilkan. Anda dapat memberikan garis tepi pada gambar
dengan menambahkan atribut <code>border</code></p>
<div>
<pre><a href="http://www.dhimasronggobramantyo.com">
<img border="1" src="images/introhtml_02.gif" width="313"
height="43"></a></pre>
</div>
<p>
Hasil:</p>
<p>
<a href="http://www.dhimasronggobramantyo.com/"><img src="http://www.dhimasronggobramantyo.com/images/artikel/introhtml_02.gif" alt="Contoh Gambar" height="43" width="313"></a></p>
<h4>
Komentar</h4>
<p>
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:</p>
<div>
<pre><!--Kode untuk menampilkan nama saya-->
<p>
Nama saya <b>AmaralSyahada</b></p>
</pre>
</div>
<h4>
List</h4>
<p>
Tag list berguna untuk menampilkan list-list. Ada 3 macam jenis list pada HTML. Yang pertama adalah Unordered List <code><ul>:</code></p>
<div>
<pre><ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</pre>
</div>
<p>
Hasil:</p>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
<p>
Tag <code><ul></code> merupakan tag pembuka. Diantara tag <code><ul></code> Anda dapat menambahkan tag <code>
<li></code>untuk setiap list yang akan ditampilkan. Tag list lainnya adalah Ordered List <code><ol> </code>Anda dapat menggunakannya sama seperti tag <code><ul></code> Contoh:</p>
<div>
<pre><ol>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</pre>
</div>
<p>
Hasil:</p>
<ol>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
<p>
Jika anda ingin memulai list tidak dari nomor satu tambahkan atribut <code>start</code>. Contoh:</p>
<div>
<pre><ol start="3">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</pre>
</div>
<p>
Hasil:</p>
<ol start="3">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
<p>
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.</p>
<div>
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.</div>
<p>
Untuk membuat tabel maka diperlukan tag-tag dasar seperti ini :</p>
<ul>
<li><table></TABLE>–Tag ini merupakan containers untuk membuat tabel.</li>
<li>
<tr></TR>
–Didalam tabel tag ini berfungsi untuk membuat baris.</li>
<li><td></TD>–Tag untuk membuat kolom. didalam tag
<tr> harus terdapat tag <td>, anda bisa menambahkan banyak
tag <td> didalam
<tr> untuk membuat kolom.</li>
<li><th></TH>–Sama dengan <td> hanya saja berfungsi
sebagai header, biasanya digunakan pada baris pertama didalam tabel.</li>
</ul>
<p>
Setiap tag tabel tersebut memiliki banyak atribut. Oke langsung saja coba kode berikut ini:</p>
<p>
Contoh:</p>
<div>
<pre><table border="1" width="60%">
<tr>
<td>Contoh Table</td>
</tr>
</table>
</pre>
</div>
<p>
Hasilnya:</p>
<p>
</p>
<table border="1" width="60%">
<tbody>
<tr>
<td>
<p align="justify">
Contoh Tabel</p>
</td>
</tr>
</tbody>
</table>
<p>
</p>
<p>
Tabel diawali dengan tag <code><table></code> dan biasanya memiliki atribut <code>border. </code>Jika <code>border="0"</code>maka
garis pada tabel tidak ditampilkan. Biasanya jika kita tidak
menampilkan atribut border maka otomatis tabel tersebut juga tidak
memiliki garis. <code><table></code> memiliki atribut <code>cellpadding</code> untuk memberi jarak didalam kolom dan <code>cellspacing</code> untuk memberi jarak antara kolom. Coba kode berikut ini:</p>
<div>
<pre><table border="1" width="200" cellpadding="4" cellspacing="5">
<tr>
<td width="100">Cell 1</td>
<td width="100">Cell 2</td>
</tr>
</table>
</pre>
</div>
<p>
Hasil:</p>
<p>
</p>
<table border="1" cellpadding="4" cellspacing="5" width="200">
<tbody>
<tr>
<td width="100">
<p align="justify">
Cell 1</p>
</td>
<td width="100">
<p align="justify">
Cell 2</p>
</td>
</tr>
</tbody>
</table>
<p>
</p>
<p>
Coba anda ubah nilai dari atribut <code>cellpadding</code> dan <code>cellspacing</code> untuk melihat perbedaannya, cobalah untuk mengutak-atik kode diatas dengan mengubah nilai-nilai atributnya.</p>
<p>
Setiap tabel memiliki baris dengan menggunakan tag <code>
<tr></code>. Didalam baris perlu sebuah kolom atau lebih, kolom dibuat dengan menggunakan tag <code><td></code>. Untuk lebih jelasnya cobalah kode berikut ini:</p>
<div>
<pre><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>
</pre>
</div>
<p>
Hasil:</p>
<p>
</p>
<table border="1" cellpadding="2" width="200">
<tbody>
<tr>
<td align="center" bgcolor="#c0c0c0" width="100">
<p align="justify">
<strong>Header</strong></p>
</td>
<td align="center" bgcolor="#c0c0c0" width="100">
<p align="justify">
<strong>Header</strong></p>
</td>
</tr>
<tr>
<td width="100">
<p align="justify">
cell 1</p>
</td>
<td width="100">
<p align="justify">
cell 2</p>
</td>
</tr>
<tr>
<td width="100">
<p align="justify">
cell 3</p>
</td>
<td width="100">
<p align="justify">
cell 4</p>
</td>
</tr>
</tbody>
</table>
<p>
</p>
<p>
Bagaimana anda mengerti maksudnya kode diatas, coba anda pahami dulu. Pada kode diatas terdapat atribut <code>bgcolor</code> yang berguna untuk memberi warna pada background. Didalam kolom<code><td></code> anda dapat menuliskan kode HTML apa saja, bahkan anda dapat memasang tag <code><table></code>didalamnya, yang berarti anda memasang tabel didalam tabel. Contoh lainnya:</p>
<div>
<pre><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>
</pre>
</div>
<p>
Hasilnya:</p>
<p>
</p>
<table border="1" cellpadding="2" width="200">
<tbody>
<tr>
<td align="center" bgcolor="#c0c0c0" width="100">
<p align="justify">
<strong>Header</strong></p>
</td>
<td align="center" bgcolor="#c0c0c0" width="100">
<p align="justify">
<strong>Header</strong></p>
</td>
</tr>
<tr>
<td rowspan="2" valign="top" width="100">
<p align="justify">
cell 1</p>
</td>
<td width="100">
<p align="justify">
cell 2</p>
</td>
</tr>
<tr>
<td width="100">
<p align="justify">
cell 4</p>
</td>
</tr>
</tbody>
</table>
<p>
</p>
<p>
Anda lihat ada atribut <code>rowspan="2" </code>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:</p>
<div>
<pre><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>
</pre>
</div>
<p>
Hasil:</p>
<p>
</p>
<table bgcolor="#000000" border="0" cellpadding="2" cellspacing="1" width="200">
<tbody>
<tr>
<td align="center" bgcolor="#c0c0c0" width="100">
<p align="justify">
<strong>Header</strong></p>
</td>
<td align="center" bgcolor="#c0c0c0" width="100">
<p align="justify">
<strong>Header</strong></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#cccccc" valign="top" width="100">
<p align="justify">
Left</p>
</td>
<td align="right" bgcolor="#cccccc" width="100">
<p align="justify">
Right</p>
</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#ffffff" valign="top" width="200">
<p align="justify">
Table is cool</p>
</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#ffffff" valign="top" width="200">
<p align="justify">
But it’s not easy</p>
</td>
</tr>
</tbody>
</table>
<p>
</p>
<p>
Anda sudah mengetahui dasar-dasar HTML. Masih banyak lagi tag-tag HTML lainnya seperti<code>frames </code>dan <code>form</code>. Saya akan mengajarkan <code>frames</code> diartikel lainnya, tetapi <code>frames</code> harus dihindari dalam membuat website, alasan utama apa yang ada didalam <code>frames</code> tidak terbaca oleh Search Engine. Tag <code>form</code> hanya dibutuhkan apabila anda membuat website dinamis menggunakan bahasa pemrograman web seperti PHP, ASP, Perl atau JSP.</p>
<p>
Sekarang kita akan membicarakan tag <code><meta></code>. Tag <code><meta></code> 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<code><meta></code> tetapi sebagian besar membaca tag ini, jadi kita perlu menyertakannya pada website kita. Tag <code><meta></code> berada diantara tag <code><head></code> bukan <code><body></code> yang berarti isi tag tersebut tidak ditampilkan dibrowser.</p>
<p>
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<a href="http://www.google.com/">google</a> atau <a href="http://www.yahoo.com/">yahoo</a>.
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 <code><meta></code> 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.</p>
<p>
Oke anda sudah mengerti pentingnya tag <code><meta></code>Tag <code><meta></code> memiliki atribut yang paling penting <code>Keywords</code> dan <code>DESCRIPTION</code> dimana kita memasukkan deskripsi dan kata kunci yang berhubungan dengan website kita.</p>
<p>
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:</p>
<div>
<pre><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
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.
Tidak ada komentar:
Posting Komentar