Cara Membuat Menu Drop Down Horizontal Dengan JavaScript

2 hari yang lalu kita telah belajar membuat menu horizontal pada blogspot. Pada postingan ini, saya akan memaparkan bagaimana membuat menu drop down horizontal pada blogspot. Menu drop down merupakan menu yang mempunyai sub-sub menu didalamnya. Prisipnya adalah ketika pointer menyorot sebuah main menu, maka akan muncul sub menu dari main menu tersebut. Kode-kode ini saya dapat dari www.dynamicdrive.com. Klik disini untuk melihat contohnya.
Bagaimana cara menambahkan menu drop down pada blog kita? Berikut langkah-langkahnya:

1. Silahkan login terlebih dahulu pada akun Blogspot pembaca
2. Klik link menu Tata Letak dan pilih sub menu Edit HTML dan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
   
3. Jangan lupa untuk membackup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa dikembalikan lagi pada kondisi semula. Klik link Download Template Lengkap
4. Copy paste kode berikut di atas tag </head>
   <script type="text/javascript"
src="http://nestoriko.googlepages.com/chrome.js">
</script>
   
5. Cari kode ]]></b:skin> kemudian tambahkan struktur CSS dibawah ini dengan mengcopy paste diatas kode ]]></b:skin>
   
.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://nestoriko.googlepages.com/chromebg2.gif) center center repeat-x;
padding: 4px 0;
margin: 0;
text-align: center;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #B5E2FE;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(http://nestoriko.googlepages.com/chromebg2-over.gif) center center repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #B5E2FE;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #B5E2FE;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #EBF7FF;
}
   
6. Cari struktur seperti dibawah ini pada template pembaca
   <b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
   
7. Jika sudah ketemu, copy paste struktur berikut ini tepat dibawah struktur yang Anda temukan pada langkah 6
   <div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://tutorial-website.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
8. Coba perhatikan tulisan yang berwarna merah struktur tersebut. Tulisan "dropmenu1" dan "dropmenu2" tersebut merupakan atribut rel dari parent menu drop down yang kita buat. Pada bagian tersebut terlihat bahwa terdapat 2 menu drop down, yaitu "Menu1" dan "Menu2" (warna biru). Jika pembaca ingin menambah menu drop down lagi misalnya "Menu3", maka buatlah juga atribut rel untuk "Menu3" tersebut misalnya "dropmenu3", setelah itu tambahkan struktur menu drop down untuk "Menu3" setelah menu drop down kedua". Sehingga strukturnya akan menjadi:
   <div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://tutorial-website.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
<li><a href="#" rel="dropmenu3">Menu3</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<!--menu drop down ketiga-->
<div id="dropmenu3" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
9. Perhatikan bahwa nama atribut ID untuk menu drop down ketiga harus sama dengan nama atribut rel untuk "Menu3" yaitu "dropmenu3". Begitu pula jika pembaca ingin menambah menu drop down keempat, kelima, dan seterusnya.
10. "URL sub menu1" merupakan URL halaman yang akan dituju jika "Sub Menu1" diklik, dan seterusnya. Silahkan pembaca ganti nama menu, sub menu, dan juga URL dari menu drop down tersebut.
11. Bagi pembaca yang membuat web dengan menggunakan menggunakan software web design seperti dreamweaver, langkahnya hampir sama dengan yang diatas. Hanya saja struktur yang ada pada langkah 7 diletakkan pada bagian halaman web dimana pembaca ingin menambahkan menu drop down tersebut.
    

Selamat mencoba dan jangan lupa meninggalkan komentar ya

»»  read more

Cara Membuat Menu Horizontal Pada Blogspot

Menu yang terdapat pada sebuah web selain berguna untuk memudahkan pengunjung membuka halaman-halaman tertentu, juga bisa menambah estetika. Begitu pula dengan menu horizontal yang bisa membuat web kita menjadi lebih ergonimis dan keren. Nah, bagaimana dengan blogspot? Harus diakui bahwa pada template blogspot standart, fasilitas menu horizontal tidak ada didalamnya. Namun, kita tidak perlu berkecil hati sebab seperti yang telah saya katakan pada postingan sebelumnya bahwa kita bisa membuat menu termasuk menu horizontal pada blogspot. Berikut saya ulas langkah-langkah membuat menu horizontal pada Blogspot. Sebagai contoh kita akan membuat menu horizontal dibawah header

1. Login ke akun Blogspot pembaca
2. Klik link menu Tata Letak, kemudian pilih Edit HTML.
3. Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
   
4. Silahkan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
5. Cari kode seperti dibawah ini pada template pembaca:
   <b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
6. Jika sudah ketemu, silahkan copy struktur berikut tepat dibawah kode-kode pada langkah 5
   <ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul>
7. Setelah itu klik tombol SIMPAN TEMPLATE, lalu lihat hasilnya
8. Pembaca akan melihat bahwa menu-menu tersebut muncul sebagai list vertikal, bukan horizontal. Oleh karena itu, kita perlu mengatur tampilannya agar muncul berjejer secara horizontal dengan menggunakan CSS. Selain itu, kita juga bisa mengatur tampilan dari menu tersebut agar terlihat lebih menarik dengan CSS.
9. Buka kembali bagian Edit HTML pada blogspot pembaca, kemudian cari kode ]]></b:skin>.
10. Silahkan copy struktur berikut diatas kode ]]></b:skin>
    /*CSS untuk menu horizontal*/

.menuhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.menuhor ul li{
list-style: none;
display: inline;
}

.menuhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #33FFCC;
border: 2px solid #33FFCC;
}

.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}
    .menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
    .menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
    .menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
    .menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.
    
11. Kemudian ubah struktur yang Anda copy pada langkah 6 diatas sehingga menjadi seperti berikut:
    <div class="menuhor">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>Tutorial Website</a></li>
<li><a href='URL 3'>About Me</a></li>
</ul>
</div>
12. Silahkan ganti URL 1 dengan URL halaman yang akan dituju jika menu "Home" diklik. URL 2 diganti dengan URL halaman yang akan dituju jika menu "Tutorial Website" diklik, dan seterusnya.
    
13. Klik tombol SIMPAN TEMPLATE.

Untuk melihat hasilnya silahkan buka disini. Seperti yang telah saya katakan, bahwa CSS tersebut berfungsi untuk mengatur tampilan menu yang kita buat tadi. Silahkan pembaca menambah atau merubah atribut CSS tersebut untuk memodifikasi tampilannya, misalnya warna tulisan, background, lebar menu, dan lain-lain. Jika pembaca ingin mengerti cara memodifikasi atau membuat CSS tersebut, silahkan klik disini. Saya yakin pembaca akan lebih mengerti bagaimana CSS tersebut bekerja. Dengan adanya menu horizontal tersebut blog pembaca pasti menjadi lebih keren dan ergonomis.

Selamat mencoba dan jangan lupa meninggalkan komentar ya

»»  read more

Mengenal Dasar Pembuatan Halaman Website (2)

Masih ingatkan dengan postingan yang membahas tentang dasar pembuatan website bagian pertama? Kalau sudah lupa boleh dibuka lagi kok disini. Blog ini akan memberikan lanjutan tutorial mengenai hal yang serupa, yaitu mengenal dasar-dasar pembuatan web. Saya akan menjelaskan secara umum bagaimana cara menambahkan elemen-elemen yang akan dimasukkan ke dalam halaman web yang kita desain. Tentu penambahan ini akan diterangkan dengan bekerja secara langsung pada bagian kode-kode yang melibatkan bagian head dan body yang telah kita kenal pada postingan yang lalu. Sebagai cacatan, saya akan memberikan contoh dengan menggunakan Dreamweaver. Namun, bagi pembaca yang tidak menginstal sorftware web design misalnya Macromedia Dreamweaver atau yang lainnya, bisa menggunakan notepad atau wordpad sebagai alat praktek. Hanya saja software web design seperti Dreamweaver tersebut bisa menampilkan tag-tag HTML yang bisa kita pakai sehingga kita menjadi lebih terbantu. Pembaca bisa membaca tutorial Dreamweaver tersebut pada blog ini. Mari kita bahas satu persatu:

1. Bagi pembaca yang sudah menginstal Dreamweaver, silahkan buka program tersebut, dan buat dokumen baru dengan memilih File --> New. Pilih dokumen HTML, kemudian pilih layar Code atau Split. Sekali lagi, bagi pembaca yang belum menginstal Dreamweaver tersebut, silahkan buka Notepad atau Wordpad, kemudian tulis kode berikut:(jika menggunakan Dreamweaver, kode-kode ini akan langsung muncul)
   
   
2. Pertama-tama kita akan menambahkan elemen pada halaman web tersebut misalnya sebuah tulisan dan mengatur tampilannya secara langsung alias tanpa memakai CSS. Elemen-elemen yang akan kita tambahkan tersebut diletakkan pada bagian body (diantara tag <body> dan </body>) agar elemen-elemen tersebut muncul dan terlihat pada browser internet. Misalkan kita ingin menampilkan tulisan "SELAMAT DATANG" pada web kita ketika orang lain membukanya, maka ketikkan tulisan "SELAMAT DATANG" tersebut pada body seperti dibawah ini:
   <body>
SELAMAT DATANG
</body>
3. Simpan dokumen HTML tersebut dengan nama index.html. Setelah tersimpan, silahkan buka file tersebut pada browser (cukup double click), maka akan tampak seperti gambar berikut:
   
4. Sekarang kita akan memberi atribut pada tulisan tersebut untuk mengatur tampilannya. Misalkan kita ingin membuat tulisan tersebut berwarna merah, maka tulisan kode seperti berikut ini:
   <body>
<font color="#FF0000">SELAMAT DATANG</font>
</body>
   Tag <font color="#FF0000"></font> tersebut berfungsi untuk membuat tulisan SEMALAT DATANG sebagai huruf (font) yang berwarna merah (FF0000). Kita tentu ingat bahwa setiap jenis warna mempunyai kode-kode tertentu. Hal ini sudah kita bahas pada tutorial membuat CSS. Kita bisa mendapatkan kode-kode tersebut dari software-software grafis atau web design, atau jika ingin mendapatkan secara onlibe, pembaca juga bisa membuka situs yang menyediakan kode warna CSS untuk web tersebut. Klik disini untuk melihat kembali posting yang membahasnya dan mengetahui situs penyedia kode warna CSS untuk web. Misalkan kita ingin pula membuat tulisan tersebut bergaris bawah, maka strukturnya menjadi:
   <body>
<u><font color="#FF0000">SELAMAT DATANG</font></u>
</body>
5. Simpan hasil editing Anda, kemudian buka file index.html tersebut, maka hasilnya akan seperti gambar berikut:
   
6. Pengaturan tampilan elemen misalnya tulisan pada langkah 4 & 5 merupakan fungsi HTML untuk Presentational. Fungsi HTML ini sudah tergantingan oleh peranan Cascading Stylesheet (CSS). Nah, langkah selanjutnya dalam mempelajari dasar pembuatan halaman website adalah bagaimana penggunaan CSS itu sendiri didalam mendesain website. Bagaimana bentuk dan cara penulisan CSS mungkin sudah kita pelajari pada postingan yang ini. Sekarang saatnya melihat bagaimana peletakannya.
7. Ada 2 cara dalam penggunaan CSS. Yang pertama menuliskan secara langsung pada halaman-halaman website, dan yang kedua membuat file yang khusus berisi struktur CSS yang kemudian diinjectkan/ disisipkan/ ditanamkan/ dilinkkan pada halaman-halaman website.
   
8. Untuk cara yang pertama (menulis secara langsung pada halaman website):
   Strutur CSS dituliskan pada bagian <head> karena pada bagian tersebutlah deklarasi/informasi yang digunakan untuk mengatur website kita termasuk salah satunya CSS. Nah, karena kita menuliskan secara langsung pada halaman web yang ingin diatur, maka kita perlu mendefenisikan tersebih dahulu struktur-struktur tersebut sebagai sebuah bahasa/struktur CSS. Bagaimana cara mendeklarasikannya? Misalkan kita buat sebuah struktur CSS seperti dibawah ini:
   #tulisanku {
color:#FF0000;
text-decoration:underline;
}
   Pembaca pasti mengertikan maksud struktur tersebut? Artinya kita mendefenisikan sebuah atribut yang kita beri nama "tulisanku" kemudian memberi pengaturan terhadap atribut itu antara lain warna dengan nilai FF0000 (color:#FF0000), kemudian memberi garis bawah pada teks (text-decoration:underline). Sekarang pindahkan struktur tersebut diantara <head> dan </head> sehingga menjadi:
   
   <head>
#tulisanku {
color:#FF0000;
text-decoration:underline;
}

</head>
<body>
   Seperti yang telah saya paparkan tadi bahwa kita perlu mendeklarasikan struktur tersebut sebagai struktur/bahasa CSS. Maka bentuk penulisannya menjadi:
<head>
<style>
#tulisanku {
color:#FF0000;
text-decoration:underline;
}
</style>

</head>
<body>
   Tag <style></style> yang membungkus struktur tersebutlah yang akan mendeklarasikan bahwa struktur tersebut adalah bahasa/struktur CSS.
9. Sekarang pada bagian <body>, ganti strukturnya menjadi:
   <body>
<span id="tulisanku">SELAMAT DATANG</span>
</body>
   Artinya bahwa kita memberikan ID "tulisanku" pada kalimat SELAMAT DATANG sehingga tampilan kalimat tersebut akan seperti "tulisanku", yaitu warnanya menjadi FF0000 dan bergaris bawah.
   Struktur lengkap halamannya akan seperti gambar dibawah ini:
   
10. Simpan hasil editing file index.html tersebut, kemudian buka pada browser Anda.
11. Untuk cara yang kedua (membuat file khusus CSS kemudian melinkkan ke halaman web):
    Buka program Dreamweaver pembaca. Pilih menu File --> New, kemudian pilih category basic page, dan pilih jenis CSS. Pembaca juga bisa menggunakan notapad atau wordpad. Karena kita akan membuat file khusus CSS, maka kita tidak perlu mendeklarasikan strukturnya terlebih dahulu, tetapi langsung menulis struktur CSS yang kita inginkan. Silahkan tulis struktur berikut pada file tersebut:
    
#tulisanku {
color:#FF0000;
text-decoration:underline;
}
    Setelah itu simpan file tersebut dengan nama misalnya "tampilan.css". Usahakan menyimpannya pada folder yang sama dengan file index.html yang ingin kita desain, misalkan pembaca menyimpan di "D:\webku\".
    
12. Hapus struktur dibawah ini dari bagian <head> yang telah kita tambahkan pada langkah 8 (atau pembaca boleh membuat file HTML baru sebagai bahan latihan untuk cara kedua ini).
    <style>
#tulisanku {
color:#FF0000;
text-decoration:underline;
}
</style>
    
13. Tambahkan pula struktur berikut pada diantara <head></head>:
    
    <link rel="stylesheet" type="text/css" href="D:\webku\tampilan.css" />
    Struktur tersebutlah yang berfungsi untuk melinkkan file CSS (sebagai CSS Linker) yang kita simpan pada D:\webku dengan nama "tampilan.css" sehingga bisa digunakan untuk mengatur tampilan elemen pada halaman website kita. "D:\webku\tampilan.css" merupakan URL dari file CSS kita. Karena kita menyimpan pada komputer, maka bentuknya seperti itu. Jika kita menyimpan secara online, maka bentuknya menjadi misalnya "http://www.webku.com/tampilan.css".
14. Bagian <body> biarkan seperti pada langkah 9, karena kita sama-sama mendeklarasikan atribut dengan nama "tulisanku".
15. Tampilan struktur lengkapnya seperti gambar berikut:
    
16. Simpan hasil editing file index.html tersebut,kemudian buka pada browser.

Seperti itulah dasar pembuatan web dengan menggunakan HTML dan CSS. Sekarang tinggal membuatnya lebih kompleks sesuai dengan kebutuhan kita.
Selamat mencoba, dan jangan lupa komentar yach :D

»»  read more

Membuat Web Menggunakan Macromedia Dreamweaver (3)

Akhirnya sampai juga kita dibagian ketiga posting berkelanjutan mengenari cara membuat web menggunakan Macromedia Dreamweaver. Setelah di bagian pertama kita membahas sepatah dua kata mengenai apa itu Dreamweaver, kemudian di bagian kedua saya memaparkan beberapa bagian penting dari software web design tersebut, maka di bagian ini saya akan langsung memberi contoh penggunaan Dreamweaver dalam membuat sebuah halaman website. Berhubung karena salah satu keunggulan utama Dreamweaver ini sebagai sebuah software web design adalah memberikan kemudahan bagi kita dalam membuat website, maka kita akan mencoba bekerja membuat halaman-halaman website melalui layar design dimana kita bisa menggunakan menu-menu pilihan dalam memasukkan isi web dan mengatur tampilannya tanpa harus pusing mengotak-atik kode-kode struktur HTML-nya. Berikut langkah-langkahnya:

1. Buatlah folder terlebih dahulu sebagai tempat penyimpanan file-file website Anda. Buatlah 2 buah folder, yang pertama sebagai tempat penyimpanan utama dimana file-file dari folder inilah yang akan Anda edit seterusnya. Sebagai contoh buatlah folder di drive D:\, F:\, atau yang lainnya dengan nama terserah pembaca, misalkan "gud_webku". Folder kedua berfungsi sebagai tempat menjalankan halaman-halaman website yang akan Anda buat. Sebenarnya file-file yang akan ada di folder kedua ini adalah file-file yang sama yang ada di folder pertama (folder "gud_webku"). Namun, ketika kita ingin menjalankan halaman web yang telah kita buat, kita akan "meng-copy paste" halaman-halaman tersebut beserta seluruh file-file yang kita gunakan dalam mendesain halaman-halaman tersebut, misalnya gambar-gambar, kemudian menjalankannya dari folder kedua tersebut. Hmm, pasti pembaca berpikir bahwa tidak ada gunanya ya alias percuma? Kenapa tidak dijalankan saja dari folder pertama? Prinsipnya seperti ini, ketika kita membuat sebuah website tentu tujuan kita selanjutnya adalah menyimpan halaman-halaman web tersebut ke internet, atau yang biasa disebut hosting. Nah, karena kita ingin bekerja secara offline alias tidak langsung terhubung ke internet supaya hebat biaya dan waktu, maka kita anggap seolah-olah kita "menghostingkan" halaman website tersebut ke folder yang kedua. Tentu halaman-halaman yang dihostingkan tersebut yang akan dibuka di browser. Jadi, folder pertama berfungsi sebagai tempat kita menyimpan dokumen-dokumen web yang kita buat (halaman web beserta file-file lain yang digunakan untuk mendesain halaman web) dimana file-file itulah yang akan kita tambah, edit, dan lain-lain. Sedangkan folder kedua berfungsi sebagai "hosting" atau lebih tepatnya disebut sebagai localhosting dimana website kita akan dijalankan/atau ditesting. Sebenarnya prinsip ini akan lebih jelas ketika kita belajar mengenai server local di komputer sehingga fungsinya akan lebih kelihatan. Mengenai hal itu, kita akan mempelajarinya saat memulai membuat web CMS.
   Setelah itu, buatlah folder kedua misalnya di drive C:\ dengan nama terserah Anda, misalkan "root_webku". Jika pembaca sudah paham mengenai server local di komputer,, misalnya IIS, PWS, dan lain-lain, buatlah folder tersebut di dalam folder htdocs, public_html, wwwroot, atau www. Namun, jika belum paham, buat saja disembarang tempat di drive Anda.
   Nah, bagaimana pula dengan aktivitas "copy paste" yang saya sebut tadi? Apakah kita melakukannya secara manual. Disinilah salah satu fungsi Dreamweaver. Kita akan melakukannya melalui Dreamweaver sehingga setiap kita melakukan penambahan, pengeditan, dan lain-lain terhadap halaman web yang sedang kita desain (yang ada pada folder "gud_webku"), maka Dreamweaver mampu melakukan update pada file-file yang sama yang ada di folder "rem_webku". Sistem seperti ini juga berguna sebagai back up website kita karena kita sudah punya 2 folder yang berisi website kita. Untuk itu, kita perlu melakukan pengaturan sebelum membuat website. Bagaimana pengaturannya? Ada dilangkah selanjutnya :D
   
2. Buka program Dreamweaver
   
3. Pada menu utama, pilih Site -> New Site, akan muncul sebuah kotak dialog wizard yang berisi 2 buah tab. Pilih tab Advance dimana akan ada beberapa kategori yang akan kita atur.
   Pada kategori Local Info:
   Site name : tulis nama projek website Anda. Misalkan "webku"
   Local root folder : pilih folder gud_webku yang telah kita buat pada langkah 1. Kemudian beri tanda centang pada kotak Refresh local file list automatically. Pilihan ini berguna untuk melakukan update secara otomatis jika kita melakukan perubahan pada file web yang kita buat.
   Pilihan lainnya untuk sementara dibiarkan saja.
   Pada kategori Remote Info:
   Access : pada bagian ini kita diminta untuk memilih dimana akan melakukan pengetesan (tempat menjalankan) web kita, apakah secara online atau offline. Karena kita untuk sementara melakukannya secara offline yaitu pada komputer kita, maka pilih Local/Network.
   Remote folder : pilih folder rem_webku yang kita buat pada langkah 1. Jangan lupa juga memberi tanda centang pada kotak Refresh local file list automatically.
   Pada kategori Testing Server:
   Pada bagian ini kita diminta untuk memilih model server yang akan kita gunakan untuk melakukan pengetesan atau menjalankan website kita. Untuk sementara lakukan pengaturan sebagai berikut:
   Server mode : none
   Access : Local/Network
   Testing Server Folder: secara otomatis, folder yang terpilih adalah folder "rem_webku" yang merupakan tempat file web kita yang akan dijalankan.
   Kategori lainnya untuk sementara dibiarkan saja. Setelah itu klik tombol OK. Jika ingin melakukan perubahan pengaturan pada SITE yang telah kita buat tersebut, pembaca bisa melakukannya dengan memilih menu Site --> Manage Sites, maka akan muncul kotak dialog Manage Site.
4. Jika pengaturan sudah berhasil, pembaca akan melihat di bagian panel Dreamweaver telah muncul bagian yang berisi site Anda seperti gambar ini:
   
5. Coba kita perhatikan panel tersebut. Terlihat bahwa kita sedang berada pada bagian Local view sehingga yang muncul adalah folder gud_webku. Jika pembaca menggantinya dengan Remote view, maka folder yang terlihat adalah rem_webku
   

NB: Jangan kemana-mana dulu ya..tunggu postingan lanjutan berikutnya, karena kita akan semakin mengerti kegunaan dan kelebihan Dreamweaver :D

»»  read more

Membuat Web Menggunakan Macromedia Dreamweaver (2)

Kini saatnya kita melanjutkan tutorial web kita yang membahas cara membuat web dengan menggunakan Macromedia Dreamweaver. Dibagian pertama tutorial berkelanjutan ini kita telah mengenal sekilas mengenai profil Dreamweaver sebagai salah satu software web design. Bahkan pembaca mungkin sudah mencoba mendownload dreamweaver cs4 yang merupakan versi terbaru saat posting ini saya rilis. Oke deh, saya asumsikan pembaca sudah mendownload dan sudah menginstal dreamweaver baik itu yang asli dan sudah di-purchase, trial, maupun yang versi tak asli yang serial number-nya didapat dari crack-crack-an, kayak saya ini :D. Atau kalau belum menginstal juga tidak masalah kok. Dreamweaver tidak membuat kita pintar, tapi kita yang membuat dreamweaver menjadi pintar. Gimana caranya? Dibagian ini kita akan mempelajari dasar-dasar dreamweaver untuk membuat website.

1. Silahkan jalankan program Dreamweaver jika pembaca telah menginstalnya.
2. Pada menu utama, pilih File --> New, maka akan muncul tampilan pilihan jenis dokumen baru yang ingin kita buat. Maksudnya adalah kita memilih apakah ingin membuat halaman web basic (statis), web dinamis (biasanya untuk web berbasis database), halaman template, dan lain-lain. Setiap kategori terdiri dari beberapa jenis dokumen. Menurut saya jenis ini dibedakan berdasarkan bahasa dan fungsi yang akan digunakan untuk halaman website yang akan kita buat. Karena saat ini kita mencoba belajar yang dasar terlebih dahulu, maka silahkan pilih kategori Basic Page dan jenisnya HTML.
   
3. Tampilan layar desain Dreamweaver terdiri dari 3 jenis, yaitu code, split, dan design.
   Layar Code berfungsi sebagai tempat kita membuat halaman web dengan mengetik bahasa pemograman secara langsung. Artinya, layar inilah yang menampilkan struktur bahasa pemograman web yang dipakai pada halaman web yang sedang kita buat. Pada bagian design, kita membuat website dengan menggunakan menu-menu yang tersedia, misalnya menu menambahkan gambar, membuat tabel, mengatur tampilan tulisan, dan lain-lain. Kita tidak perlu mengetik bahasa pemograman halaman web yang kita buat karena secara otomatis, setiap kita menambahkan sebuah elemen, maka dreamweaver akan menerjemaahkannya kedalam kalimat-kalimat bahasa pemograman yang kita gunakan. Inilah keunggulan dreamweaver dibanding notepad, frontpage, dan mungkin yang lainnya. Karena pada dreamweaver sudah tersedia menu-menu yang siap pakai untuk mendesain halaman web. Selain itu, interface-nya juga sangat bagus dan mudah digunakan. Bagian split berguna untuk membagi halaman kerja dreamweaver menjadi 2, separuh untuk menampilkan layar code, dan separuh lagi menampilkan layar design. Hal ini berguna jika kita ingin mendesain halaman melalui layar design namun ingin melihat perubahan kode bahasa webnya, dan juga sebaliknya. Jika pembaca masuk ke layar Code, Anda akan melihat struktur HTML seperti yang pernah saya tunjukkan pada postingan yang ini. Sebagai contoh struktur:
   
   
   <title>Untitled Document</title>
   
   
   dimana struktur tersebut berfungsi untuk mendefenisikan judul halaman web kita yang akan muncul di title bar browser.
   
4. Dibagian kiri atas dibawah menu File, terdapat menu dropdown yang terdiri dari beberapa pilihan. Pilihan ini berguna untuk memilih menu-menu desain yang akan kita gunakan. Misalnya kita ingin menambah gambar, maka pilih Common, maka disebelah kanannya akan muncul menu-menu bergambar yang bisa kita gunakan, salah satunya untuk memasukkan gambar ke halaman website.
   
5. Coba pembaca masuk ke layar Design seperti yang saya jelaskan pada poin 3. Setelah memilih bagian tersebut, dibagian bawah pembaca akan melihat bagian Properties. Bagian ini berfungsi untuk mengatur tampilan dari elemen-elemen yang kita tambahkan kedalam halaman web yang kita buat. Menu-menu Properties ini hanya terlihat jika kita bekerja pada layar Design.
6. Dibagian samping, terdapat pula bagian yang bernama Panel. Salah satu fungsi panel ini adalah untuk mengatur file-file web yang telah kita buat.
   
7. Dibagian atas tepatnya disamping menu pilihan layar, ada kotak isian bernama Title. Bagian berfungsi untuk memberikan judul halaman web yang sedang kita buat yang akan muncul pada title bar browser.
   Fungsi ini sama seperti yang dijelaskan pada poin 3 diatas mengenai tag title. Coba pembaca ganti tulisan yang ada di kotak tersebut menjadi misalnya "Tutorial Website Dengan Dreamweaver". Setelah itu, kembali ke layar code dan lihat perubahan yang terjadi pada bagian tag <title>.

NB: Jangan kemana-mana dulu ya..tunggu postingan lanjutan berikutnya yang juga membahas cara membuat web dengan dreamweaver:D

»»  read more

Membuat Web Menggunakan Macromedia Dreamweaver (1)

Seperti janji saya di postingan "Mengenal Dasar Pembuatan Halaman Website" dimana saya akan mengulas sedikit tentang software web design yang menurut saya sangat bagus, maka di postingan yang berkelanjutan ini akan saya jelaskan mengenai hal tersebut. Software yang saya maksud adalah Macromedia Dreamweaver. Dreamweaver mempunyai banyak keunggulan-keunggulan dari segi fitur maupun interface sehingga sangat membantu kita dalam membuat halaman web. Untuk mendapatkan software Dreamweaver, bisa kita download dari situs resminya atau dibeli di toko-toko yang menyediakan software tersebut. Disana juga tersedia versi TRIAL yang bisa pembaca download. Tapi mohon maaf, saya tidak menyediakan di blog ini Download Macromedia Dreamweaver Versi Bajakan alias yang ada crack nya. Namun, harganya memang masih sangat mahal menurut saya, dan karena mahal banget, "terpaksa" deh saya memakai yang ada crack untuk bajakannya :D. Maaf ya...:). Jika berminat, pembaca bisa download dreamweaver yang tidak asli dari situs-situs yang ada di internet, banyak kok, saya yakin itu.He3x. Juga tersedia Crack Dreamweaver untuk mendapatkan serial number nya. Bahkan, kemungkinan mendapatkannya juga free (ya iyalah, kalau gak gratis mending beli yang asli). Tapi mohon jangan bilang saya yang merekomendasikan ya ketika download crack dreamweaver :D.
Saat posting ini ditulis, versi terbaru yang telah keluar adalah Macromedia Dreamweaver CS4. Tapi saya sendiri masih memakai dreamweaver 8. Gimana? Apakah pembaca sudah memutuskan untuk menggunakan macromedia dreamweaver free alias hasil bajakan, yang asli atau yang trial? Jika sudah mendapatkannya, silahkan diinstal di komputer atau laptop pembaca. Berikut screenshot Dreamweaver 8 yang saya pakai:

KLIK UNTUK DOWNLOAD DREAMWEAVER CS4 for TRIAL

»»  read more

Mengenal Dasar Pembuatan Halaman Website (1)

Tutorial ini sebenarnya sudah disinggung pada postingan-postingan yang terdahulu. Namun, rasanya kurang lengkap jika tidak memaparkan lebih detail lagi. Jika di postingan yang lalu kita sudah membahas filosifi sebuah halaman website, kemudian belajar tentang hosting dan domain, mengenali bahasa pemrograman yang digunakan untuk membuat website serta perbedaan-perbedaannya, sampai pada "praktek" untuk membuat sebuah blog di blogspot. Dan sekarang saya akan mencoba mengulas lebih dasar dan detail mengenai dasar pembuatan sebuah halaman website. Karena merupakan dasar, maka kita akan memulai dengan mempelajari cara mendesain halaman website dengan HTML.
Secara umum, sebuah halaman website terdiri dari 2 bagian besar, yaitu head dan body. Kedua bagian ini bisa diibaratkan seperti tubuh manusia yang dibagi atas 2 bagian besar yaitu kepala dan tubuh.
Bagian head pada halaman website berfungsi sebagai tempat meletakkan informasi-informasi yang digunakan untuk mendesain atau mengatur halaman website yang kita buat. Sama halnya seperti kepala manusia dimana kepala dijadikan tempat menyimpan informasi yang membuat kita tahu dan membuat kita mengatur tubuh kita. Misalnya informasi bahwa bugil di depan umum adalah hal yang memalukan. Informasi tersebut tentu ada di kepala kita. Dengan kita mempunyai informasi itu, kita harus membalut tubuh kita dengan pakaian agar tidak terlihat bugil di depan umum. Yach, kecuali kepalanya sudah rusak atau informasi yang diberikan salah, tentu penampilan tubuh kita menjadi sebaliknya.
Sedangkan bagian body pada halaman website merupakan bagian yang tampak secara langsung di internet. Di bagian inilah kita menyusun elemen-elemen yang akan kita tampilkan di internet, misalnya tulisan, gambar, tabel, video, dan lain-lain. Body pada website bisa diibaratkan seperti tubuh manusia dimana bagian tersebut menunjukkan penampilan kita, misalnya warna baju, pakai gelang atau tidak, lengan panjang atau tidak, dan lain-lain. Supaya lebih jelas bagaimana bentuk head dan body itu, mari kita perhatikan screenshot coding (bagian yang berisi kode-kode untuk mendesain halaman website, bukan yang tampak ketika dibuka pada browser) sebuah halaman website yang paling dasar :

Berikut penjelasannya:

• Baris 1, 2, dan 3 merupakan pendefenisian standardisasi HTML yang digunakan untuk mendasain halaman website tersebut
  
• Baris 5 s.d 9 merupakan bagian head. Dibagian inilah informasi untuk mengatur website diletakkan. Misalnya yang terlihat pada baris ke 7 dimana tertulis:
  <title>Judul Halaman Website</title>
  tag tersebut mendefenisikan bahwa title halaman website tersebut adalah "Judul Halaman Website". Title tersebut akan muncul pada title bar browser internet.
• Baris 11 s.d 13 merupakan bagian body. Dibagian inilah kita memasukkan data atau elemen-elemen yang akan kita tampilkan pada browser internet.
  
• Baris ke 3 dan ke 14 merupakan tag penutup yang mendefenisikan bahwa kode-kode yang ditulis merupakan kode HTML.

Perhatikan bahwa kode-kode tersebut terdiri atas tag pembuka dan tag penutup. Jika pembaca kurang mengerti atau lupa mengenai penulisan tag tersebut, silahkan klik disini untuk mempelajarinya.
Lantas, apakah cukup sampai disitu? Bagaimana tampilannya dan cara menampilkannya? Elemen-elemen apa yang harus saya letakkan di head dan di body? Bagaimana pula cara meletakkannya? Apa yang harus kita perbuat terhadap head dan body ketika mendesain halaman website?
Yach, sebenarnya baris-baris kode pada gambar diatas sudah bisa menjadi sebuah halaman website. Namun, halaman website tersebut masih kosong alias belum terisi elemen apapun karena kita belum menampilkan data atau elemen pada bagian body. Halaman website tersebut hanya bisa tampil dan menunjukkan di title bar judul halamannya yaitu "Judul Halaman Website" sesuai baris ke 7. Nah, pertanyaan-pertanyaan selanjutnya yang saya sebutkan tadi akan kita jawab secara tuntas memalui blog ini pada postingan selanjutnya. Namun, supaya kita lebih mudah belajarnya, ada baiknya kita sedikit belajar menggunakan software web design yang sangat terkenal? Apa itu? Tunggu postingan selanjutnya dan jangan kemana-mana ya :D

»»  read more

Mengatasi "Invalid Widget ID" pada Blogger

Beberapa hari yang lalu, salah seorang pembaca di blog ini bertanya tentang kasus yang beliau alami ketika mengganti layout blog dengan template yang telah di downloadnya dari sini. Muncul pesan seperti dibawah ini ketika mencoba untuk menginstal template blogspot tersebut:

Please correct the error below, and submit your template again.
The new widget id "Recent-Comments-Widget" is invalid for type: Feed

Setelah saya mencoba lagi menginstal template tersebut, ternyata saya mengalami kejadian yang sama. Tadinya saya sedikit heran karena dulu ketika mencoba template tersebut, saya tidak mengalami kejadian seperti itu. Setelah saya perhatikan struktur widget tersebut dan saya coba bandingkann dengan struktur yang lain baik pada template yang sama maupun yang lain, ada kemungkinan sekarang ini blogspot sangat sensitif dengan penamaan ID yang kita defenisikan sendiri (tentang ID css bisa dibaca disini dan disini).

Atribut ID yang kita berikan pada widget harus sesuai dengan tipe widget itu sendiri. Artinya kita tidak lagi bisa secara bebas memberikan nama sebagai atribut ID widget pada template kita. Secara default, ketika kita menambah sebuah widget melalui perintah tambah gadget pada halaman Tata Letak, maka secara otomatis nama atribut ID widget tersebut akan sama dengan tipe widget itu sendiri dan ditambah dengan angka didepannya agar tetap spesifik dengan widget lain yang sejenis atau setipe. Misalnya kita menambah sebuah widget Feed, maka ID widget adalah "Feed1" (angka 1 dibelakang Feed menunjukkan Feed yang keberapa). Jika kita menambah Feed baru, maka ID Feed baru tersebut akan menjadi "Feed2", dan seterusnya. Supaya lebih jelas, struktur widget Feed yang kita tambahkan akan seperti ini:

<b:widget id='Feed1' locked='true' title='Recent Comment' type='Feed'>

Padahal, sebelum kasus diatas muncul, kita bebas memberikan nama atribut sebagai ID widget yang kita tambahkan, misalnya mengganti strukturnya menjadi

<b:widget id='komentarku' locked='true' title='Recent Comment' type='Feed'>

Namun, karena sepertinya blogspot sensitif dengan atribut ID yang seperti itu, maka kita harus merubah ID widget kita yang nama atribut ID-nya kita buat sendiri menjadi sesuai dengan tipe widget tersebut sesuai contoh yang diatas, agar tidak terjadi invalidasi ID seperti kasus yang saya alami.

»»  read more

Membuat Slide Show Album Foto di Blog

Mungkin pembaca pernah melihat sebuah slide show yang berisi foto-foto yang ditampilkan pada sebuah website maupun blog. Apalagi jika pembaca mempunyai friendster, tentu slide album foto seperti itu sudah tidak asing lagi. Kita juga bisa membuat slide show tersebut pada halaman website atau blog kita, dan langkah-langkah membuat slideshow album foto pada blog juga tidak jauh berbeda dengan ketika kita membuatnya pada friendster. Dan yang lebih menarik lagi, kita tidak perlu download slideshow kemudian memasangnya di web kita sehingga membutuhkan waktu yang banyak. Namun, agar terlihat lebih bagus dan menarik, kita perlu melakukan penyesuaian kode-kode slide tersebut dengan template blog kita. Untuk menambahkan slide foto pada blog, kita akan memanfaatkan sebuah situs gallery picture yang akan menyediakan kode-kode slide foto yang kita simpan pada situs tersebut. Situs tersebut adalah Slide.com. Berikut langkah-langkahnya:

Bagian 1:

1. Silahkan buka www.slide.com pada browser Anda, kemudian login pada situs tersebut. Jika Anda belum memiliki akun, ada baiknya register/mendaftar terlebih dahulu dengan mengklik tombol menu Sign Up. Sebenarnya tanpa mendaftarpun kita tetap bisa membuat slide show album pada situs ini. Namun, dengan mendaftar memungkinkan kita menyimpan slide kita dan dapat mengeditnya jika diperlukan tanpa harus memulai dari awal lagi.
   
2. Saya asumsikan pembaca telah berhasil membuat akun pada situs slide.com dan telah login pada situs tersebut. Jika pembaca berada pada halaman utama, klik tombol yang bertuliskan Make a Slideshow
   
   
   
   Namun, jika berada pada halaman profile, klik gambar yang ada tulisan Make Slideshow. Keduanya sama saja.
3. Selanjutnya akan muncul sebuah halaman pembuatan slideshow dengan 3 langkah, yaitu Create Slideshow, Save Slideshow, dan Share Slideshow.
   
4. Pada bagian Create Slideshow, pembaca diminta untuk mengupload foto atau gambar yang ingin dimasukkan kedalam slide album yang akan pembaca buat. Ada beberapa pilihan untuk memasukkan foto-foto tersebut, yaitu menguploadnya langsung dari komputer pembaca, atau bisa menggunakan foto atau gambar yang telah Anda simpan pada akun friendster Anda, facebook, myspace, photobucket, dan lain-lain. Dengan demikian, pembaca tidak perlu lagi mengupload satu persatu dari komputer pembaca. Namun sangat saya harapkan agar pembaca tidak memasukkan gambar porno apalagi foto bugil artis Indonesia yang sekarang lagi beredar di internet. Kalau sekedar memasukkan foto artis cantik Sandra Dewi atau foto Aura Kasih (tapi jangan gambar telanjang mereka ya) mungkin tidak jadi masalah. Yang cukup ditakutkan adalah ketika anak-anak kita yang justru dengan tidak sengaja melihat foto-foto bugil artis tersebut. Loh..loh...kok malah penjelasannya melebar ke masalah curhat..Lanjuuttt... :D
   
5. Kita akan mencoba membuat slideshow dengan memakai foto yang ada di friendster. Untuk itu, pada bagian Add Images From, pilih menu Friendster. Masukkan URL dari profile friendster Anda pada kotak Enter Your Friendster URL (Profile or Group). Kemudian klik tombol Get my images. Jika proses tersebut berhasil, maka pembaca akan melihat dibagian bawah telah terdapat foto-foto yang berasal dari friendster Anda. Untuk mengetahui friendster URL Anda, silahkan buka terlebih dahulu profile friendster pembaca. URL pembaca ada pada bagian yang ditunjukkan oleh gambar dibawah ini:
   
   
   Namun, jika pembaca tidak mempunyai akun friendster, pembaca boleh mencoba menu lain. Pada prinsipnya, bagian ini berfungsi memasukkan gambar yang akan kita buatkan slide show albumnya.
   
6. Pada bagian Customize your Design klik menu Styles dan pilih Sliding. Dibagian atas akan terlihat album Anda akan ditampilkan dalam bentuk sliding.
   
   
   Masih pada bagian Customize, klik menu Size yang ada disamping. Nah, disinilah kita perlu menyesuaikan ukuran slide album kita dengan template yang kita gunakan. Sesuailan slide dengan bagian dimana slide album Anda akan dimunculkan. Sebagai contoh kita akan menampilkan slide tersebut pada bagian sidebar blogspot. Jika lebar sidebar blog kita sekitar 300 an pixel, maka ukuran yang proporsional dari slide kita adalah misalkan 300 x 100 px. Maka pada kotak width masukkan nilai 300 dan pada kotak height masukkan nilai 100, kemudian klik tombol Update. Anda juga bisa mengatur tampilan dari slide yang akan kita buat, baik memberikan effect, background, dan lain-lain. Silahkan coba menu-menu customize yang lain.
   
   
7. Jika pengaturan dirasa sudah cukup, silahkan klik tombol berwarna hijau SAVE (get code).
8. Selanjutnya kita akan masuk pada bagian kedua, yaitu Save Slideshow. Pada bagian Slideshow Details, isi dengan isian yang sesuai dengan keinginan pembaca. Setelah itu klik tombol hijau SAVE Slideshow.
   
9. Setelah itu kita akan masuk kebagian Share Slideshow. Pembaca akan melihat sebuah kotak yang berisi kode slide album foto yang baru saja kita ciptakan. Kode tersebutlah yang akan kita sisipkan pada blog atau website kita.

Untuk menambahkan slide album foto pada blog, kita ikuti langkah-langkah berikut:

Bagian 2

1. Masuk ke akun blogger Anda.
2. Pada halaman dasbor, klik link menu Tata Letak.
3. Tambahkan sebuah Gadget dengan mengklik link Tambah Gadget. Pilih jenis HTML/Javascript.
   
   
4. Masukkan kode slide album foto yang telah pembaca dapatkan dari situs www.slide.com tadi (step 9 pada Bagian 1). Kemudian klik tombol Simpan.
   

Sebagai contoh silahkan pembaca lihat disini.
Selamat mencoba, dan jangan lupa ngasi komentar ya, terutama jika pembaca masih bingung dengan langkah-langkah diatas, saya dengan senang hati akan berusaha membantu pembaca sekalian.

»»  read more

HTML At a Glance

HTML yang merupakan singkatan dari HyperText Markup Language, seperti yang sudah penulis sebutkan di postingan yang lalu, merupakan salah bahasa pemrograman yang digunakan untuk membuat halaman website untuk ditampilkan pada browsers internet. HTML sendiri merupakan pengembangan dari bahasa pemrograman SGML (Standard Generalized Markup Language) yang digunakan dalam dunia penerbitan dan percetakan. HTML bisa dikatakan sebagai bahasa yang distandarkan atau dibakukan untuk membuat halaman web dan merupakan kode-kode yang digunakan untuk memberikan instruksi pada sebuah data didalam dokumen atau halaman website. Kode-kode ini biasanya disebut sebagai tag. Itulah sebabnya disebut sebagai Markup Language, karena merupakan kombinasi antara data dan informasi mengenai data tersebut. Nah, instruksi seperti apa yang ada dalam HTML? Menurut tante Wiki (baca wikipedia), ada 4 jenis instruksinya, yaitu:

1. Structural, merupakan tanda yang menentukan level atau tingkatan dari sebuah teks. Contoh:
   <h1>Hallo</h1>
   Tag <h1> tersebut akan menginstruksikan text "Hallo" tampil menjadi sebuah Heading 1.
   <h2>Hallo Semua</h2>
   Tag <h2> tersebut akan menginstruksikan teks "Hallo Semua" tempil menjadi sebuah Heading 2.
   Mungkin bisa dianalogikan seperti pada sebuah makalah, "Hallo" akan menjadi sebuah judul, sedangkan "Hallo Semua" akan menjadi subjudul.
   
2. Presentational, tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari teks tersebut.
   Contoh:
   <marquee>Selamat</marquee>,
   akan menginstruksikan teks "Selamat" tampil sebagai teks yang bergerak/berjalan. Penggunaan tag HTML untuk presentational saat ini sudah dapat digantikan oleh CSS (Cascading Style Sheets). Kita akan belajar lebih lanjut tentang CSS pada postingan selanjutnya.
3. Hipertext, tanda yang digunakan untuk menampilkan sebuah text sebagai hiperlink yang akan mengarah pada suatu URL dokumen atau halaman tertentu.
   Contoh:
   <a href="http://anakranto.co.cc">Anakranto</a>,
   akan menampilkan teks "Anakranto" sebagai sebiah hiperlink yang mengarah ke URL "http://anakranto.co.cc".
4. Elemen widget, dimana tag HTML digunakan untuk membuat objek-objek lain seperti tombol (<button>), list (<li>), dan garis horizontal (<hr>).

Nah, bahasa pemrograman seperti HTML inilah yang bisa kita gunakan sebagai salah satu bahasa untuk membuat atau mendesain halaman web. Bahasa ini yang akan menginstruksikan untuk menampilkan data (seperti teks, gambar, dll), serta mengatur bagaimana tampilan dari data tersebut pada browser. Lantas, bagaimana pula dengan tag-tag HTML itu sendiri? Dari mana asalnya dan bagaimana kita mengetahuinya? Seperti yang saya sebutkan di atas, HTML ini merupakan kode-kode (tag-tag markup) yang sudah dibakukan, dan kita tinggal menggunakannya. Adapun pembakuan (standardisasi) dari tag-tag ini dilakukan oleh sebuah lembaga yang fokus pada pengembangan standar-standar pada Word Wide Web (WWW), yaitu World Wide Web Consortium (W3C).

Cara Menulis Tag HTML
Tag HTML biasanya ditulis pada awal dan akhir dari text atau data yang ingin diinstruksikan oleh tag tersebut. Dengan kata lain, tag HTML akan membungkus data yang akan dipengaruhinya. Namun, tag awal dan akhir ini tidaklah sama, ada perbedaan penulisannya. Perbedaan penulisan tag HTML tersebut dapat dilihat dibawah ini:

<jenistag> CONTOH TEKS</jenistag>

<jenistag> merupakan tag pembuka, sedangkan </jenistag> merupakan tag penutup. Adapun bedanya adalah pada tag penutup ditambahkan tanda "/".
Misalnya untuk membuat sebuah tabel pada halaman web, maka tag yang akan digunakan adalah <table>Isi Tabel</table>. Browser bisa mengenal tag tersebut sebagai instruksi untuk menampilkan sebuah table (Elemen widget) pada halaman website kita karena sudah distandarkan. Masih banyak lagi contoh-contoh tag HTML yang bisa kita gunakan. Namun belum akan saya tulis pada postingan ini. Kita akan mengenal tag-tag lain pada postingan selanjutnya. Yang penting pembaca yang budiman sudah sedikit paham mengenai arti HTML itu sendiri. Jika masih ada yang bingung, jangan sungkan-sungkan untuk bertanya yach.. ^^

»»  read more