tag yang terdapat pada dokumen HTML. Kita akan segera membicarakan mengenai tag.Kode HTML pertama
Hello World
<b> maksudnya untuk memulai huruf tebal (bold) dan tag </b> merupakan tag penutup untuk menghentikan huruf tebal.<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.Containers
Hello <i>World!!</i><br>
Standalone 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
Hello <font face="verdana" size="2" color="red">World!!</font>
<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
jadi untuk membuat seperti contoh diatas anda perlu menulisnya seperti ini:Saya belajar webStruktur Dokumen HTML
<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>

<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
index.html
<body> Teks dan Paragraf
<h1> dan ditutup dengan tag </h1>. Ada 6 level heading mulai dari h1 sampai h6.<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>
<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 <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>
<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>
<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>
<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>
Baris 2
Baris 3
Baris 4
<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">
<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.Links
<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>
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>
My <a href="folder/contact.html">homepage</a>
target="_blank" seperti ini:My <a href="http://www.dhimasronggobramantyo.com" target="_blank">homepage</a>
Images
<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">
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>
Komentar
<!--Kode untuk menampilkan nama saya--> <p>Nama saya <b>Dhimas</b></p>
List
<ul>:<ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ul>
- List 1
- List 2
- List 3
<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>
- List 1
- List 2
- List 3
start. Contoh:<ol start="3"> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ol>
- List 1
- List 2
- List 3
- <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.
<table border="1" width="60%"> <tr> <td>Contoh Table</td> </tr> </table>
Contoh Tabel |
<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>
Cell 1 | Cell 2 |
cellpadding dan cellspacing untuk melihat perbedaannya, cobalah untuk mengutak-atik kode diatas dengan mengubah nilai-nilai atributnya.<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>
Header | Header |
cell 1 | cell 2 |
cell 3 | cell 4 |
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>
Header | Header |
cell 1 | cell 2 |
cell 4 |
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>
Header | Header |
Left | Right |
Table is cool | |
But it's not easy | |
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.<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.<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.<META>Tag <META> memiliki atribut yang paling penting Keywords dan DESCRIPTION dimana kita memasukkan deskripsi dan kata kunci yang berhubungan dengan website kita.<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>
Dual Core berarti sebuah prosesor yang memiliki dua buah inti atau inti ganda. Contohnya adalah seperti Pentium D dan Core Duo atau Core 2 Duo dari Intel dan Athlon 64 X 2 dari AMD. Sedangkan Core itu penamaan terbaru prosesor Intel menggantikan brand "Pentium" yang sudah nggak dipake lagi. Jadi, setelah mereka meluncurkan prosesor Core, terus generasi keduanya setelah Core itu ya Core 2, seperti layaknya dulu ada Pentium dan Pentium II, dan seterusnya.



