Hey buddies, welcome here... Get knowledges and share it to your friends around the world, just click share button dude...

Friday, August 19, 2011

Belajar Membuat Website dengan HyperText Markup Language (HTML)





Kamu bisa mendownload file lengkap tutorial ini disini 

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).
sumber: http://id.wikipedia.org/wiki/HTML

ya, itulah definisi HTML yang bisa saya dapatkan dan jelaskan..hehe :D
lalu, apa selanjutnya? ya sesuai judul saya akan emmeberikan pembelajaran mengenai Bhasa HTML yang basic alias yang dasar" dulu aja, karena saya belum master kk. Pellajaran HTML saya dapatkan di kelas 3 SMA walaupuun saya sudah mengenal bahasa ini jauh sebelumnya.. ok, to the point aja lets learn!

HTML selalu diawali dengan tag <html> dan diakhiri dengan tag </html> . Peletakan content atau isi diberikan diantara tag <body> dan </body> . Sedangkan tag <head> dan akhirannya </head>  merupakan bagian dari header atau kepala halaman. Untuk lebih mngerti tentang maksud dari bagian head dan body, ketikkan kode berikut pada notepad kamu dan simpan dengan ekstensi .html:
<html><head><title>Halaman Utama</title></head>
<body>Disini seluruh isi atau content dari website akan dituliskan</body>
</html>

Ok, sekarang mari kita buat halaman hingga menampilkan hasil seperti berikut:



dan untuk mempermudah jika mau yang langsung jadi, bisa di download disini:


Tapi bagi yang mau belajar sendiri, bisa mengikuti artikel ini sampai selesai... dan tentunya kan lebih tau tentang fungsi-fungsi dari tag HTML yang diigunakan.. Oke, sekarang kita buat homepage atau tampilan awalnya dahulu... berikut kodenya:

<html>
<head>
<title>My Homepage</title>
</head>
<frameset framespacing="0" border="0" frameborder="0" rows="153,*">
<frameset framespacing="0" border="0" frameborder="0" cols="*,500">
<frame name="logo" src="library/logo.html" scrolling="no" noresize target="contents" src="new_page_3.htm" scrolling="no" frameborder="no">
<frame name="menu" src="library/menu.html" scrolling="no" base target="contents" noresize frameborder="no">
</frameset>
<frameset framespacing="0" border="0" frameborder="0" cols="1098,*">
<frame name="contents" src="library/utama.html" scrolling="yes" noresize frameborder="no">
<frameset rows="150,*">
<frame name="main" src="library/date&clock.html" scrolling="no" noresize frameborder="no">
<frame name="main1" src="library/daftar.html" base target="contents" scrolling="yes" noresize frameborder="no">
</frameset>
</frameset>
</html>
Dari script diatas jika dituliskan dengan Notepad dan disimpan dengan nama homepage.html maka akan dibuatlah sebuah halaman yang berisi frame. Bentuk frame tersebut tidak akan kelihatan karena telah dituliskan perintah  framespacing="0" border="0" frameborder="0" yang artinya tidak ada spasi antar frame dan tidak ada tepi frame (border). Dan ini baru langkah awal. Langkah selanjutnya adalah membuat halaman yang akan ditampilkan pada halaman berisi frame tersebut. Dimulai dengan mengisikan logo gambar. Logo gambar ada di file rar yang bisa di download, atau jika anda tetap ingin belajar membuatnya sendiri (thumb up buat anda!) berikut filenya:
LOGO : 

Sekarang buatlah folder library ditempat dimana anda taruh file homepage.html tadi, kemudian di dalam folder library tersebut buat lagi foleder dengan nama img . Sekarang taruh logo tadi dengan nama logo.png di direktori library/img .


Tulis script HTML berikut dengan notepad lagi atau HTML editor lain juga boleh dan simpan dengan nama logo.html didalam folder library tadi.

<html>
<body bgcolor="#d2d2d2">
<table border="no"
<tr>
<td><img src="img/logo.png"</td>
<td><font size="24">WEBSITE SAYA</font>
<br>Tagline kamu atau deskripsi singkat dapat diletakkan disini...</br>
</td>
</tr>
</frameset>
</body>
</html>

Sampai disini, kamu sudah punya logo dan nama website. Bila mau, ganti tulisan "WEBSITE SAYA" dengan nama kamu dan "Tagline kamu atau deskripsi singkat dapat diletakkan disini..." dengan deskripsi tentang web yang ingin kamu buat.

Cukup disini dulu penjelasan pertama saya. Nanti akan dilanjutkan ke artikel selanjutnya. hhee...



Sehabis baca, mohon biasakan komentar agar memotivasi saya untuk menulis dengan yang lebih baik lagi.


Kamu juga bisa follow twitterQ di @yusuf_udin


THANKS

2 comments so far:

Sob, barusan saya baru posting tentang cara pasang emoticon di postingan dan kotak komentar. Bila masih mau menggunakan emoticon Kaskusnya monggo di cek di blog saya.

TQ gan..tapi ane udah pake tips kaskuser sebelah.

Post a Comment

don't miss it! See also this related post:


Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Get widget