ABANGCHRIS

Membedahkan HTML, CSS dan JAVASCRIPT

2011-08-23T02:53:00.000-07:00

Postingan ini saya tujukan terutama bagi pemula/yang belum bisa bedakan jenis dan tipe code/script yang mereka lihat. Tujuannya adalah agar nantinya tidak salah menempatkan code lagi. maksudnya apa? khususnya pada Multiply kalau tag/code HTML ditempatkan pada yang support HTML dan CSS memiliki tempat sendiri. jadi jangan masukkan CSS pada box welcome atau html pada custom CSS, tentunya tidak nyambung dong, kan masing-masing ada tempatnya (tempatkan sesuatu pada tempatnya), apalagi code tersebut didapatkan dari pen-generate code seperti glitterfy.com atau apalah yang menyediakan fasiltas gituan.

ok lah, mari saya tunjukkan perbedaan diantara makhluk-makhluk yang bernama HTML, CSS, JS, PHP dan kawan-kawannya ini.

HTML:

<title>

<munir>

<b>

<a>

<i>

<html>

<body>

dan harus ditutup dengan garis miring (/)

</title>

</munir>

</manggatiga>

</b>

</a>

</i>

</html>

</body>

</table>

penjelasan:

-> Tag HTML ditandai dengan menggunakan < dan >

-> bila anda mendapatkan potongan code yang disediakan penggenerate code dan melihat ada tanda seperti diatas < dan > maka itu adalah HTML dan akhir elemennya harus ditutup dengan / menjadi </...>.

contoh:

<b> buat huruf tebal </b> hasilnya akan seperti ini buat huruf tebal

<i> buat huruf miring </i> hasilnya buat huruf miring

dan lain-lain termasuk manggatiga bisa dikatakan tag HTML bila ditulis <manggatiga> dan </manggatiga>

untuk pembatas property dan nilai menggunakan sama dengan (=)

ngerti ga lho..?

CSS:

selector {property: value}

#manggatiga {padding: 4 px; margin: 2px;}

.munir {font-size: 1.5em; color: blue; }

p.rokok {max-width: 400 px: magin-left: -12cm;}

ketengan:

-> Code CSS ditandai dengan menggunakan tanda kurung kurawang ({..})

-> # adalah id

-> . adalah class

untuk pembatas property dan value menggunakan titik dua (:)

sudah bisa bedakan? klo memang belum bisa bedakan... berarti memang otak anda perlu di periksa ulang. hehehe canda ko' jangan tersinggung ya... !!!!

Javascript:

document.write("ini contoh pesan atau document ditulis dengan JavaScript");

function message() {alert("box alert dengan me-onload event atau peristiwa"); }

penjelasan:

->Script JS ditandai dengan buka kurung dan tutup kurung ()

->JS sangat mirip dengan CSS namun yang membuatnya beda adalah JS merupakan script sedangkan CSS merupakan style.

->JS lebih sangat mirip lagi dengan VBscript apa lagi sama-sama script.

->Baca terus lanjutannya tulisan ini...

PHP (Hypertext Preprocessor)

<?php

echo "Hello World";

$txt = "Hello World!";

$number = 16;

echo $txt1 . " " . $txt2;

penjelasan:

->PHP ditandai variabel $ karena statusnya untuk script server.

->Bila menampilkan pesan menggunakan tanda kutip " dan "

==>>Nah untuk Ajax dan lain-lain nantilah kita bahas.<<==

Kesimpulan :

Untuk masing code dan script harus ada pintu masuknya, apakah itu? code awal sebagai penanda bahwa yeng tertulis didalamnya adalah jenis dan tipe ini. perhatikan dibawah masing-masing pintunya.

<html>

<head>

disini disisipan CSS atau Script

</head>

<body>

disini di tulis isi site

tentu saja menggunakan tag html

</body>

</html>

h1 {color: #00ff00}

h2 {color: #dda0dd}

p {color: rgb(0,0,255)}

</style>

document.write("Hai semua... jangan lupa titip comentar ya...");

</script>

document.write("Hai semua... jangan lupa titip comentar ya...")

</script>

<?php

echo "Hello World";

$txt = "Hello World!";

$number = 16;

echo $txt1 . " " . $txt2;

yang warna merah tersebutlah pintunya, saya kira seperti itu perbedaan yang paling mendasar....

Tips memodifikasi template

2011-08-23T02:48:00.000-07:00

Artikel ini, pertama kali di publikasikan oleh hoctro's dan di publikasikan ulang oleh Abangchris dalam Bahasa Indonesia. Pada postingan kali ini, saya akan memberikan tips bagaimana cara memodifikasi template blogger baru anda dengan mudah... A. Memasuki Halaman Template 1. Jika anda sudah berada di blog anda (sudah login), klik pada menu customize. 2. Jika anda berada dalam suatu blog dan ingin memodifikasi blog anda yang lain, klik pada dashboard. 3. Jika sudah masuk ke dashboard klik layout. 4. Jika sudah masuk ke setting halaman, klik menu template. B. Ganti ke Edit HTML menu. Untuk melihat kode struktur template anda, klik edit HTML. Pada defaultnya, Template tersebut tidak menampilkan struktur lengkap sebuah template untuk setiap widget. Jadi apa yang anda liat adalah sebagian kecil kode dari template tersebut. Lihat gambar di bawah ini : (1) Sebelum memulai memodifikasi template anda, sangat aman apabila anda mendownload dulu template anda. (2) Jika terdapat kesalahan dalam modifikasi template, silahkan upload kembali template anda. (3) Ini adalah suatu cara untuk menampilkan kode template anda sepenuhnya (kasih tanda centang) (4) Untuk menambahkan widget baru, masukan diantar b:section tab di dalam id='sidebar'. C. Menambahkan kode CSS atau Java Script. (1) Cara termudah untuk menambahkan kode CSS yaitu diatas kode html ]]> (2) Nah...kalo untuk kode javascript, cara yang termudah yaitu di bawah kode di atas. Untuk lebih jelasnya...lihat gambar di bawah ini : (3) Selesai......
semoga puas dengan postingnya ya!!!

Daftar tag-tag pada html

2011-08-19T22:21:00.000-07:00

Berikut ini adalah tabel tag-tag HTML dan fungsinya:
Tag Utama

Tag	Atribut	Deskripsi
<html></html>		Baris paling atas dari setiap file HTML
<head></head>		Informasi umum dari sebuah halaman web
<title></title>		Judul halaman. Terdapat pada head
<body></body>	Background, bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidth	Settingan atribut untuk seluruh dokumen

Modifikasi Teks

Tag	Deskripsi	Contoh
<b></b>	Teks tebal	Teks tebal
<i> </i>	Teks miring	Teks miring
<u> </u>	Teks garis bawah	Teks garis bawah
<pre></pre>	Preformatted teks	Contoh teks
<h1></h1>	Header 1	Header 1
<h2></h2>	Header 2	Header 2
<h3> </h3>	Header 3	Header 3
<h4></h4>	Header 4	Header 4
<h5></h5>	Header 5	Header 5
<h6></h6>	Header 6	Header 6
<sub></sub>	Subscript	_Subscript
<sup></sup>	Superscript	^Superscript

Font

Tag	Atribut	Deskripsi
<font></font>	Color, size, name	Mengubah gaya suatu huruf

Links

Tag	Atribut	Deskripsi
<a> </a>	Href, target, style, class, name, id	Membuat link ke dokumen atau situs lainnya

Gambar

Tag	Atribut	Deskripsi
<img>	Src, alt, name, border, height, width	Menampilkan sebuah gambar

Formatting

Tag	Deskripsi	Contoh
<blockquote></blockquote>	Digunakan untuk mengatur text dan gambar dalam suatu tag	Contoh text in a block quote format ( “ “ )
<ol></ol>	Ordered List (digunakan dengan <li>)	1. Item 1
<ul></ul>	Unordered List (digunakan dengan <li>)	• Item 1
<li>	Elemen List
<dd></dd>	Definition List
<dt>	Definition Term
<dd>	Definition Description
<p></p>	Paragraf
<br>	Ganti baris
<hr>	Garis horizonta
<center></center>	Menengahkan elemen

Tabel

Tag	Deskripsi	Contoh
<table></table>	Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor, background, align, valign	Mengatur semua elemen table
<tr></tr>	Height, bgcolor, background, align, valign, title	Membuat baris baru
<td></td>	Height, width, bgcolor, background, align, valign, title, colspan, rowspan	Membuat kolom
<th></th>	Height, width, bgcolor, background, align, valign, title, colspan, rowspan	Header(kepala tabel). Otomatis ke tengah dan tebal
<tbody></tbody>	Height, width, align, valign, bgcolor, background	Format yang berlaku bagi cell yang diapit tag
<colgroup></colgroup>	Height, width, align, valign, bgcolor, background, colspan	Format yang berlaku bagi kolom

Form

Tag	Deskripsi	Contoh
<form></form>	Method, action, name, enctype	Mengatur elemen dari form
<input type=>	Text, password, hidden, radio, checkbox, submit, image, reset	Variasi dari tipe elemen input dalam form
<select></select>	Name, size	Membuat combo-box. Digunakan bersama dengan option
<option>	Selected, name, value
<textarea></textarea>	Name, rows, cols, wrap	Membuat Text Area untuk input text dengan length yang lebih besar dari input text.
wrap	Off virtual physical	no wrap word wrap, sent as one line word wrap, sent with breaks

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.

Membuat menu dropdown java script (II)

2011-08-18T03:05:00.000-07:00

Melanjutkan Postingan kemarin lusa yaitu tentang membuat menu dropdown dengan JavaScript. Pada postingan yang lalu telah di bahas tentang membuat menu dropdown pada template baru, maka pada postingan kali ini akan di bahas mengenai cara pembuatan pada template klasik.

Agar tidak terlalu monoton, pada pembuatan dropdown kali ini akan saya beri sentuhan baru, yaitu pemakaian background yang berbeda. Jika pada postingan yang lalu saya memberikan contoh background banner seperti di bawah ini :

Maka kali ini saya akan memberi contoh banner seperti ini :

Dan contoh menu dropdown yang akan di bahas adalah seperti demo di bawah ini :

Agar tidak terlalu menyita space halaman karena penuh dengan kata-kata yang membingungkan, kita langsung saja pada topik pembahasan. Untuk membuat menu dropdown pada template klasik, silahkan ikuti langkah-langkah berikut ini :

Langkah pertama adalah membuat tiga banner untuk background tulisan, banner ini bisa dibuat dengan program design & grafik semisal Adobe photoshop atau Corel Draw ataupun program-program lainya yang sejenis.

Langkah kedua adalah mengupload banner-banner yang telah sobat buat, salah satu contoh adalah dengan menggunakan jasa situs www.photobucket.com. Untuk cara menguploadnya saya sudah terangkan, jika belum faham silahkan klik di sini. Saya ambil contoh, banner yang telah saya upload mempunyai URL address sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif

http://i162.photobucket.com/albums/t253/rohman24/bannerjava5.gif

http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif

Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :

Sign in di blogger.com dengan id sobat
Klik menu Template
Klik menu Edit HTML
Copy seluruh kode template lalu paste pada program notepad, ini untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting kode template
Tambahkan kode berikut di bawah kode <head> dan sebelum kode </head>, atau jika ingin lebih mudah simpan di bawah kode <title><$BlogPageTitle$></title> :

  <script>   var last_expanded = '';   function showHide(id)   {   var obj = document.getElementById(id);   var status = obj.className;   if (status == 'hide') {   if (last_expanded != '') {   var last_obj = document.getElementById(last_expanded);   last_obj.className = 'hide';   }   obj.className = 'show';   last_expanded = id;  } else {  obj.className = 'hide';  }  }   </script>

Masukan kode berikut diatas kode ]]></b:skin>

       .raden{ background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif'); text-align:center; width:175px; font-family: georgia, Helvetica, sans-serif; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom: 5px; display:block; text-decoration: none; color: #F6E151; }  .ogah{ background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif'); text-align:center; width:175px; font-family: georgia, Helvetica, sans-serif; padding-left:5px; padding-right:5px; padding-top:8px; padding-bottom: 5px; display:block; text-decoration: none; color: ##FAF705; height: 18px; }  .ogahniye{ background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif'); text-align:center; width:175px; font-family: georgia, Helvetica, sans-serif; padding-left:5px; padding-right:5px; padding-top:8px; padding-bottom: 5px; display:block; text-decoration: none; color: #0572FA; height: 18px; }  .hide{ display: none; }  .show{ display: block; }   a{cursor: hand}

Masukan kode berikut di sidebar blog sobat, dimana saja sesuai dengan keinginan sobat :

  <a class="raden"><font size="5"><b>Navigasi</b></font></a>  <a class="ogah" onclick="showHide('ogahku1')">Blog Tutorial</a>  <div id="ogahku1" class="hide">  <a href="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html" class="ogahniye">Membuat blog</a>  <a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-1.html" class="ogahniye">Membuat link</a>  <a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-marquee.html" class="ogahniye">Membuar marquee</a>   <a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-icon-yahoo-messenger.html" class="ogahniye">Icon YM</a>  </div>  <a class="ogah" onclick="showHide('ogahku2')">Aksesori blog</a>  <div id="ogahku2" class="hide">  <a  href="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html"  class="ogahniye">Yahoo ! Emoticons</a>  <a href="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html" class="ogahniye">Blogger Emoticons</a>  <a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-jam-blog-di-sidebar.html" class="ogahniye">Pasang jam</a>  <a href="http://kolom-tutorial.blogspot.com/2007/05/ada-video-di-artikel.html" class="ogahniye">Pasang Video</a>  </div>  <a class="ogah" onclick="showHide('ogahku3')">My Other Blog</a>  <div id="ogahku3" class="hide">  <a href="http://rubrik-elektronik.blogspot.com/" class="ogahniye">Rubrik Elektronik</a>  <a href="http://rohman-freeblogtemplate.blogspot.com/" class="ogahniye">Free Blog Template</a>  <a href="http://contoh-blog.blogspot.com/" class="ogahniye">Blog Menu D'tree</a>  <a href="http://kolom-authorized.blogspot.com/" class="ogahniye">Authorize service</a>  </div>  <a class="ogah" onclick="showHide('ogahku4')">Links Temanku</a>  <div id="ogahku4" class="hide">  <a href="http://free-7.blogspot.com/" target="_blank" class="ogahniye">Free 7</a>  <a href="http://jaloee.blogspot.com/" target="_blank" class="ogahniye">Jaloee</a>  <a href="http://sundajava.blogspot.com/" target="_blank" class="ogahniye">Liezmaya</a>  <a href="http://anangku.blogspot.com/" target="_blank" class="ogahniye">Anang</a>  </div>

Klik tombol Preview untuk melihat perubahan yang baru di buat
Jika sudah OK, klik tombol Save Changes Template
Selesai.

 



Keterangan kode-kode diatas :

kode di bawah ini adalah kode untuk mengaktifkan tombol yg di klik, jadi jangan di rubah! kecuali jika obat sudah familier dengan Javascript dan bisa membuat variasi baru dari kode ini :

  <script>   var last_expanded = '';   function showHide(id)   {   var obj = document.getElementById(id);   var status = obj.className;   if (status == 'hide') {   if (last_expanded != '') {   var last_obj = document.getElementById(last_expanded);   last_obj.className = 'hide';   }   obj.className = 'show';   last_expanded = id;  } else {  obj.className = 'hide';  }  }   </script>

Kode-kode di bawah ini, nilainya harus di sesuaikan dengan kondisi blog sobat :
.raden
--> .raden hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk enyertakan dot ( . ) diepan kata yang di buat.

background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
--> ini adalah gambar background untuk tulisan yang saya buat yaitu sebuah ombol.

text-align:center;
--> kode untuk membuat tulisan berada di tengah, bisa diganti dengan kata Left untuk sebelah kiri, dan right untuk sebelah kanan.

width:90%;
--> lebar dari tombol adalah sebesar 90% dari besarnya space sidebar dimana tombol ini di tempatkan, silahkan ganti nilainya dan sesuaikan dengan ukuran blog sobat.

font-family: georgia, Helvetica, sans-serif;
--> Font (jenis hurup) yang dipilih adalah jenis georgia, ini bisa diganti dengan jenis huruf lainnya semisal verdana dan lain-lain.

padding-left:5px;
--> batas (jarak) tulisan sebesar 5px dari tepi kiri tombol,nilai ini bisa di rubah sesuai keinginan sobat.

padding-right:5px;
--> batas (jarak) tulisan sebesar 5px dari tepi kanan tombol,nilai ini bisa di rubah sesuai keinginan sobat.

padding-top:5px;
--> batas (jarak) tulisan sebesar 5px dari tepi atas tombol,nilai ini bisa di rubah sesuai keinginan sobat.

padding-bottom: 5px;
--> batas (jarak) tulisan sebesar 5px dari tepi bawah tombol,nilai ini bisa di rubah sesuai keinginan sobat.

display:block;
--> block berarti ditampilkan,jadi jangan dirubah.

text-decoration: none;
--> Tidak ada tek dekorasi. Sebaiknya jangan di rubah.

color: #F6E151;
--> Pemilihan warna, bisa dirubah kode warnanya sesuai dengan keinginan sobat.

.ogah
--> .ogah hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.

.ogahniye
--> .ogahniye lagi-lagi hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.

.hide
display: none;
--> Pendifinisian untuk .hide disembunyikan (tidak tampil).

.show
display: block;
--> Pendifinisian untuk .show ditampilkan.

a{cursor: hand}
Agar gambar mouse berubah jadi gambar tangan ketika berada di atas tombol.
Kode yang saya berikan diatas memuat links yang saya miliki, jadi links tersebuat harus di rubah dengan links milik sobat.

Mudah-mudahan keterangan di atas sudah jelas. Selamat mencoba !

Icon gratis untuk blog

2011-08-18T02:18:00.001-07:00

Bagi anda yang suka menghiasi blog atau website dengan berbagai macam icon agar terlihat lebih cantik, di bawah ini ada beberapa website yang menyediakan icon-icon cantik untuk bisa di download secara free atau gratis. So pasti anda tidak perlu lagi besusah payah hanya untuk sekedar urusan icon, download dan pasang dengan sesuka hati di blog anda.

1. http://icontexto.blogspot.com

Contoh icon yang bisa di download :

Dan masih banyak lagi koleksi icon yang sangat cantik, sayang jika di lewatkan, coba kunjungi saja blognya.

2. http://jwloh.deviantart.com

Contoh icon yang bisa di download :

Silahkan kunjungi situsnya, dan download berbagai icon yang cantik secara gratis.

3. http://marcelomarfil.deviantart.com

Contoh icon yang bisa di download :

Siapa yang mau lihat-lihat dan sekaligus mendoanload icon cantik-cantik ini?

4. http://www.webappers.com

Contoh icon :

Dan masih banyak lagi icon-icon cantik lainnya.

5. http://www.zeusboxstudio.com

Contoh icon yang bisa di download :

6. http://www.vistaicons.com

7. http://itweek.deviantart.com

8. http://lecoupdulapin.deviantart.com

9. http://csscreme.com

10. http://stinky9.deviantart.com

Dan banyak lagi icon-icon yang bisa anda dapatkan secara free atau gratis, caranya sangat mudah, anda tinggal tulis keyword Free Icon pada search engine google yang ada di sebelah kanan atas blog ini. Selamat berdownload ria.

Daftar tag-tag pada html

2011-08-17T21:03:00.003-07:00

Berikut ini adalah tabel tag-tag HTML dan fungsinya:
Tag Utama

Tag	Atribut	Deskripsi
<html></html>		Baris paling atas dari setiap file HTML
<head></head>		Informasi umum dari sebuah halaman web
<title></title>		Judul halaman. Terdapat pada head
<body></body>	Background, bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidth	Settingan atribut untuk seluruh dokumen

Modifikasi Teks

Tag	Deskripsi	Contoh
<b></b>	Teks tebal	Teks tebal
<i> </i>	Teks miring	Teks miring
<u> </u>	Teks garis bawah	Teks garis bawah
<pre></pre>	Preformatted teks	Contoh teks
<h1></h1>	Header 1	Header 1
<h2></h2>	Header 2	Header 2
<h3> </h3>	Header 3	Header 3
<h4></h4>	Header 4	Header 4
<h5></h5>	Header 5	Header 5
<h6></h6>	Header 6	Header 6
<sub></sub>	Subscript	_Subscript
<sup></sup>	Superscript	^Superscript

Font

Tag	Atribut	Deskripsi
<font></font>	Color, size, name	Mengubah gaya suatu huruf

Links

Tag	Atribut	Deskripsi
<a> </a>	Href, target, style, class, name, id	Membuat link ke dokumen atau situs lainnya

Gambar

Tag	Atribut	Deskripsi
<img>	Src, alt, name, border, height, width	Menampilkan sebuah gambar

Formatting

Tag	Deskripsi	Contoh
<blockquote></blockquote>	Digunakan untuk mengatur text dan gambar dalam suatu tag	Contoh text in a block quote format ( “ “ )
<ol></ol>	Ordered List (digunakan dengan <li>)	1. Item 1
<ul></ul>	Unordered List (digunakan dengan <li>)	• Item 1
<li>	Elemen List
<dd></dd>	Definition List
<dt>	Definition Term
<dd>	Definition Description
<p></p>	Paragraf
<br>	Ganti baris
<hr>	Garis horizonta
<center></center>	Menengahkan elemen

Tabel

Tag	Deskripsi	Contoh
<table></table>	Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor, background, align, valign	Mengatur semua elemen table
<tr></tr>	Height, bgcolor, background, align, valign, title	Membuat baris baru
<td></td>	Height, width, bgcolor, background, align, valign, title, colspan, rowspan	Membuat kolom
<th></th>	Height, width, bgcolor, background, align, valign, title, colspan, rowspan	Header(kepala tabel). Otomatis ke tengah dan tebal
<tbody></tbody>	Height, width, align, valign, bgcolor, background	Format yang berlaku bagi cell yang diapit tag
<colgroup></colgroup>	Height, width, align, valign, bgcolor, background, colspan	Format yang berlaku bagi kolom

Form

Tag	Deskripsi	Contoh
<form></form>	Method, action, name, enctype	Mengatur elemen dari form
<input type=>	Text, password, hidden, radio, checkbox, submit, image, reset	Variasi dari tipe elemen input dalam form
<select></select>	Name, size	Membuat combo-box. Digunakan bersama dengan option
<option>	Selected, name, value
<textarea></textarea>	Name, rows, cols, wrap	Membuat Text Area untuk input text dengan length yang lebih besar dari input text.
wrap	Off virtual physical	no wrap word wrap, sent as one line word wrap, sent with breaks

Mengenal HTML sebagai struktur dasar pembuatan website

2011-08-17T20:43:00.000-07:00

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   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 :

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&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:

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  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 1	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.

MEMBUAT SIDEBAR BARU

2011-08-17T05:58:00.001-07:00

Sebelum nya saya pernah membahas tutor menambah kolom di blog. ternyata masih ada yang kurang yaitu kolom antara post dan sidebar. ide ini keluar dari pertanyaan sobat blogger yang mencari tutor menambah satu kolom antara post dan sidebar. tadi nya saya agak bingung membari judul artikel ini. membuat halaman tiga kolom di blog, atau cara menambah kolom antara post dan sidebar. akhirnya pilihan saya jatuh pada yang kedua. mudahan saja anda memilih yang kedua juga hehehe.

Biar tidak berkepanjangan kita langsung saja pada pokok pembahasan. untuk membuat satu kolom antara kolom post dan sidebar. yang pertama perlu anda perhatikan adalah ukuran lebar dari outer-wraper blog yang anda miliki. misalnya anda memiliki lebar auter-wraper 660px. nah untuk menambah kolom baru anda harus menambah lebar blog anda.

Untuk menambah kolom baru yang perlu anda perhatikan adalah kode-kode pada outer-wrapper berikut:

#outer-wrapper {
width: 680px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 420px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 230px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Nah untuk menambah kolom baru secara logika tentunya lebar dari Outer-wraper akan mengalami perubahan. pertama sekali yang harus di perhitungkan adalah, berapa lebar kolom yang ingin kita tambahkan. misalnya nilai dari kolom baru 230px; berarti jumlah keseluruhan lebar outer wrapper menjadi kira-kira 420px + 230px + 230px + 20 px = 880 pixel kemudian bisa kita tambahkan lagi 10 px untuk sela oute wraper sehingga lebar keseluruhan 890 pixel. jadi kode untuk penambahan kolom baru dari nilai di atas adalah:

#kolombaru-wrapper {
width: 230px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Nah setelah di tambah kan maka keseluruhan kodenya akan menjadi seperti ini:

#outer-wrapper {
width: 890px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 420px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 230px;
float: right;
padding-left:10px; /* yang ini adalah tambahan untuk jarak sela */
word-wrap: break-word;
overflow: hidden;
}
#kolombaru-wrapper {
width: 230px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Kode di atas merupakan langkah pertama yang harus kita tambahkan. berikut nya adalah menambah kode id untuk kolombaru tersebut. untuk kode id sidebar sebelum penambahan kolombaru adalah sebagai berikut:

karna kita sudah menambah elemen baru pada sidebar, maka kita juga harus menambahkan id untuk elemen baru tersebut. id elemen baru tersebut adalah sebagai berikut

Nah setelah menambahkan id kolom baru tersebut dengan id sidebar blog yang sebelumnya. sehingga menjadi seperti ini:

Selesai... simpan dan sekarang silahkan di cek pada tata letak blog anda. di sana akan terlihat kolom yang baru yang kita tambah kan tadi. untuk nilai header dan footer sebaiknya anda tambahkan menjadi 890 px. sehingga menjadi sama dengan nilai outer wraper. biar kelihatan lebih klop. Selamat mencoba.....

membuat footer 3 kolom

2011-08-17T05:56:00.001-07:00

Dalam Tutorial kali ini, saya akan membahas tentang bagaimana caranya membuat footer 3 kolom di template blogger. Dan sebelumnya, untuk yang belum tahu apa itu footer, akan saya jelaskan terlebih dahulu, Footer adalah elemen page element yang berada di bagian sisi bawah blog. Footer biasanya sering digunakan sebagai tempat widget facebook page box, Shoutmix, Pengikut, dll.

Oke, langsung saja ya, Untuk membuat Footer 3 kolom caranya adalah sebagai berikut :

1. Login Blogger
2. Pilih Rancangan
3. Pilih Edit HTML
4. Cari Kode ]]></b:skin>
5. Copy kode di bawah ini di atas kode ]]></b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

6. Cari kode <b:section class='footer' id='footer'>
7. Lalu ganti dengan kode di bawah ini

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>http://www.blogger.com/img/blank.gif
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
</div>
8. Save template
9. Dan Lihat hasilnya

NB : Anda bisa mengganti elemen footer dengan kreasi anda sendiri. Tutorial ini saya kutip dari Pendiari blog

ABANGCHRIS

Membedahkan HTML, CSS dan JAVASCRIPT

Tips memodifikasi template

Daftar tag-tag pada html

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Membuat menu dropdown java script (II)

Icon gratis untuk blog

Daftar tag-tag pada html

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Mengenal HTML sebagai struktur dasar pembuatan website

Kode HTML pertama

Containers

Standalone Tag

Atribut

HTML Entity

Struktur Dokumen HTML

Susun file Anda

index.html

Teks dan Paragraf

Links

Images

Komentar

List

MEMBUAT SIDEBAR BARU

membuat footer 3 kolom