Just Another Place 2 Share


Belajar Bikin Website Yuk? [1] - Beginner

29 Oct 2011

Udah lama ngga ngeblog, skrg gw mo coba lagi start dari awal. Dan kali ini gw akan mulai sharing tutorial pembuatan website. Smoga sih ada yang berminat. Sebagai postingan pertama edisi Belajar Bikin Website Yuk, tentunya akan mulai dari dasar banget, benar-benar pelajaran yang paling mudah untuk memulai membangun sebuah website. Jadi pastinya pemula yang sama sekali belum mengerti tentang membua website akan bisa mengikuti tutorial ini. Semoga sih :)

Untuk dapat membuat website, yang pertama harus kita mengerti adalah bahasa HTML dan penggunaannya. Dari menguasai bahasa HTML kemudian akan kita kembangkan pelan-pelan ke jenis script yang lain hingga kita dapat membangun sebuah website mulai dari yang paling sederhana hingga sebuah website yang sangat kompleks sekalipun.

BTW, tutorial-tutorial gw akan bersifat praktikal. Langsung berupa praktek-praktek serta penjelasan mengenai kode dan skrip yang digunakan. Tidak akan membahas panjang-panjang mengenai apa itu website, HTML teori-teori yang bersifat terlalu teknis, kecuali gw emang merasa penting untung menjelaskan untuk menghindarkan kebingungan bagi pemula.

Oke, langsung belajar aja yah? Untuk memudahkan belajar bikin website, sebaiknya bikin folder dulu di komputer kamu. Misalnya folder *website*. Nanti simpan file yang anda kerjakan mengikuti tutorial ini dalam folder *website* ini.

Untuk menuliskan kode-kode HTML untuk sementara kita ngga akan menggunakan software-software web editor yang kompleks dulu, takutnya interface software-software web editor tadi justru akan membingungkan dan bikin kamu yg baru belajar jadi ga fokus. Cukup kita akan gunakan software NOTEPAD aja dulu dari Windows. Gimana, siap?

Nah sekarang coba buka Notepad kemudian tuliskan kode berikut :
<html>
website pertama saya nih!
</html>

Kemudian simpan (save) file kamu. Jangan lupa di Save as type: dipilih All files dulu kemudian simpan dengan nama website.html (ekstension html-nya ngga boleh lupa. Karena kalau hanya simpan menggunakan nama website, file akan tersimpan dalam format notepad, bukan format html sebagai format dasar halaman web yang dapat dikenali browser).

Nah sekarang, silahkan buka file website.html tadi di browser… taadaaa….. itulah halaman website kamu yang pertama yang isinya “website pertama saya nih!” Mudah banget kan yahh :)

Pada dasarnya sebuah halaman website memang harus diawali dengan tag <html> dan kemudian ditutup oleh tag </html> . Pelan-pelan kamu bakal makin mengerti dan mengenal sifat-sifat tag dalam bahasa HTML.

Sekarang tambahkan kode berikut di notepad kamu :
<html>
<head>
<title>Ini kepala website </title>
</head>
<body>
</body>
Ini badan website!
</html>

Selanjutnya save (simpan) dan buka lagi di browser. Hasilnya masih sama kann? Tapi coba perhatikan di tab paling atas browser, pastinya disitu tertulis Ini kepala website bukann?

Yaa.. selain harus dibuka dan ditutup oleh tag <html> dan </html>, setiap halaman website juga harus terdiri dari 2 bagian yaitu bagian yang diapit tag <head></head> serta bagian yang diapit tag <body></body>.

<head></head> adalah bagian kepala website. Di bagian ini kita akan menuliskan kode-kode yang tidak akan ditampilkan dihalaman website pada browser.

<body></body>. adalah bagian dimana kita akan menuliskan isi halaman website yang ditampilkan di browser, baik itu berupa teks, gambar, video dan lain-lain.

Oke, selanjutnya kita coba mengenal beberapa tag html yang sering digunakan, antara lain :

<p></p> adalah tag untuk sebuah paragaraf.

<img> untuk menyisipkan file gambar

<br /> untuk memotong kalimat/baris.

Nah disini kamu bisa lihat, kalau tag html tidak semuanya memiliki tag pembuka dan tag penutup, seperti <html> dan </html>, <p> dan </p>, tapi ada beberapa tag yang hanya menggunakan satu tag tunggal seperti <img />, <br /> dan lain-lain. Santai aja.. ngga usah kuatir.. pelan-pelan kamu bakal terbiasa dengan tag-tag html ini.

Oke lanjut, silahkan tulis skrip berikut :
<html>
<head>
<title>Ini kepala website </title>
</head>
<body>
<p>Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua<br />dan ini baris kedua dari paragraf kedua.</p>
<p><img src=”gambar1.jpg” /></p>

</body>
</html>

Jangan lupa di folder yang sama dengan file website.html yang kamu simpang yaitu folder *website* tadi, simpan juga file gambar dengan nama gambar.jpg. Sekarang save file kamu dan buka di browser. Well, selain kalimat kamu juga dah punya gambar di halaman website kamu.

Silahkan lanjut ke tutorial berikutnya Belajar Bikin Website Yuk? [2] - Beginner


TAGS webdesign Belajar Bikin Website Yuk


-

Search

Latest