MATERI PANDUAN DASAR MEMBUAT WEBSITE

Panduan Dasar Membuat Website

Pernah bingung membedakan istilah website dan blog? Nah, pada dasarnya, semua yang
kamu lihat di internet adalah website. Namun demikian, website tersebut memiliki fungsi yang
berbeda-beda dan memiliki sebutan khusus tergantung pada fungsinya. Jenis website yang cukup
ngetop adalah blog, social media dan toko online. Jadi bisa dikatakan bahwa blog adalah salah
satu jenis website yang memiliki fungsi sebagai diary atau buku harian bagi pemiliknya,
makanya biasanya tampilan artikel blog biasanya diurutkan berdasarkan tanggal dimulai dari
yang paling baru.
Website lain memiliki fungsi mirip sebuah toko, di mana kita bisa memajang foto
produk, harga, deskripsi produk hingga cara pembelian. Website jenis ini kita sebut sebagai toko
online. Jenis website lain yang terkenal adalah social media. Untuk jenis website ini saya tidak
perlu menjelaskan panjang lebar, karena kamu pasti sudah sering menggunakannya yaitu
facebook dan twitter.
Pada prinsipnya ada beberapa cara untuk membuat website, saya membaginya ke dalam 4
kategori yaitu:
 Instan, cara ini adalah cara tercepat, termurah (alias gratis) dan termudah dalam membuat
website. Contoh paling mudah adalah menggunakan blogspot, worpress, tokobagus, dll. Cara
ini memiliki kelemahan pada tingkat fleksibilitas pembuatan. Kita hanya bisa membuat
website sesuai format yang sudah disediakan oleh penyedia layanannya. Silakan baca tutorial
cara membuat website menggunakan blogspot atau wordpress ini untuk mempelajari
langkah-langkah pemuatannya.
 CMS atau Content Management System. Cara ini relatif cepat seperti metode instan, namun
memiliki tingkat fleksibilitas yang lebih dibandingkan cara Instan. Kamu tinggal melakukan
instalasi menggunakan software CMS yang sudah disediakan. Kita bisa melakukan
perubahan lebih fleksibel dengan menginstal add on pada CMS tersebut. Namun demikian,
kamu pada umumnya harus menyediakan nama domain dan hosting sendiri. Contoh CMS
adalah Joomla untuk website yang umum, wordpress untuk blog (ya, wordpress memiliki 2
jenis yaitu instan dan CMS), Prestashop untuk toko online, dll. Kamu bisa klik tutorial
membuat website CMS WordPress ini untuk mempelajari langkah-langkah pembuatannya.
 Framework, cara ini memiliki tingkat fleksibilitas pembuatan yang lebih tinggi, namun kamu
harus memiliki kemampuan web programming.
 Web Programming. Cara membuat website ini adalah yang paling fleksibel, namun lama dan
kamu dituntut untuk memiliki kemampuan web programming. Kalau kamu udah bisa
membuat website dengan cara ini, maka pada dasarnya kamu bisa membuat segala jenis
website yang kamu inginkan, nyaris tanpa batas. Kalau kamu tertarik untuk mempelajari cara
ini, kamu minimal harus menguasai HTML, PHP dan MySQL.
Nah, untuk membuat website dengan metode CMS, Framework dan Web Programming,
kamu memerlukan domain dan hosting. Apa tuh maksudnya domain dan hosting? Mari kita
pelajari bersama.
Panduan penting langkah demi langkah membuat website sendiri
1. Dapatkan nama domain kamu sendiri
Hal pertama yang harus kamu lakukan saat membuat website sendiri adalah
memperoleh nama domain kamu sendiri. Sebuah domain adalah nama yang ingin kamu
berikan untuk website yang kamu buat. Sebagi contoh, nama domain website yang sedang
kamu baca ini adalah “prothelon.com”. Untuk memperoleh nama domain, kamu harus
membayar biaya sewa tahunan sebagai hak penggunaan nama tersebut. Yah, kamu tahu
sendirikan, kalau nama website itu harus unik, dan hanya satu-satunya di internet. Kalau
tidak orang pasti akan bingung mana web site punya kamu dan mana website yang milik
orang lain. Jadi, di seluruh internet, kamu pasti hanya akan menemukan sebuah website yang
alamatnya prothelon.com. Got that?
 Nah, sebelum kamu berpikir macam-macam, perlu saya ingetin bahwa memiliki nama
domain bukan berarti kamu sudah memiliki sebuah website. Belum. Ingat, nama domain ini
hanyalah sebuah nama. Seperti kamu mendaftarkan ijin usaha sebuah PT atau CV dalam
dunia nyata. Memiliki ijin usaha ini bukan berarti kamu memiliki toko atau gudangnya kan?
Silakan lihat tutorial membuat website ini untuk mendapatkan tips memilih nama domain
yang baik untuk website anda.
2. Pilih Sebuah Web Hosting
Langkah berikutnya dalam proses membuat website sendiri ini adalah memilih web
hosting. Sebuah web hosting pada dasarnya adalah sebuah perusahaan yang memiliki
beberapa komputer yang selalu terhubung ke internet. Jika kamu menempatkan halaman-
halaman web kamu di komputer mereka, maka seluruh dunia bisa menghubungi komputer itu
dan melihat halaman website kamu. Kamu perlu mendaftarkan diri dulu ke web hosting agar
website yang kamu buat memiliki “rumah”. Jika memiliki nama domain bisa diibaratkan
dengan memiliki ijin usaha, maka memiliki akun web hosting kira-kira mirip dengan
menyewa kantor atau toko untuk bisnis kamu.
Menyewa? Ya, untuk web hosting yang berbayar. Tentu saja kamu bisa memilih web
hosting berbayar ataupun yang Web Hosting gratisan. Kamu juga bisa baca tutorial singkat
tentang membuat website di hosting berbayar ini. Kamu bisa melihat beberapa tips menarik
saat memilih web hosting yang pernah saya tulis sebelumnya. Silahkan baca dulu agar kamu
punya panduan saat menentukan pilihan nantinya.
Gimana? Menarik bukan. Dalam posting lainnya kita akan membahas langkah
selanjutnya dalam membuat website yaitu membuat desain web.
3. Menggunakan html
tag <>
digunakan untuk menuliskan sintak web, ada dua jenis, yaitu sintax web tag container
dan sintax web tag biasa.
Tag container adalah tag yang berisi text yang akan ditampilkan setelah tag ditutup. Contoh:
<td> text yang ditampilkan </td>.
Tag biasa, yahh…tag aja, contoh <BR> (break). <br> kaga perlu ditutup oleh tag </br>, tapi
jika sintak yang digunakan tag container, contoh: <h1>, yah mesti ditutup dengan </h1>.
Tag yang digunakan untuk mengakhiri sintak punya karakter / (slash) sebelum sintaknya,
contohnya: <td> </td>
Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: <body bgcolor=”red”>
</body>. atau <input type=”text”>.
Langkah 1
· Membuka Notepad.
Langkah 2
· Mengetikkan Sintak/Syntax.
Berikut ini adalah syntax dasar yang membentuk suatu HTML.
pertama, ketikkan
<html>
tekan enter, kemudian ketik
<head>
Dalam container head, kita bisa mengetikan beberapa sintak, tapi yang paling penting jangan
lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.
Sekarang ketikkan sintak title tadi, jadi seperti ini:
<head> <title> judul halaman web </title> </head>
Kemudian ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan
web yang kita lihat itu berasal dari <body>.
Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang
1 <html>
2 <head>
3 <title> Judul Halaman Web </title>
4 </head>
5 <body>
6 </body>

Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text
ke dalam tag body, contohnya seperti ini :
<body>
Contoh text yang ditampilin di halaman web, By: C.H.I.P. Sensei
</body>
terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :

1 <html>
2 <head>
3 <title> Judul Halaman Web </title>
4 </head>
5 <body>
6 Contoh text yang ditampilkan di halaman web, By: C.H.I.P. Sensei
7 </body>
8 </html>

kalo udah, sekarang save dengan nama dasarHTML. kalo udah disave, buka data yang tadi di
save. Pada bagian ini, kalian mungkin akan bingun,g karena html yang tadi disave dan cape cape
diketikkan, ternyata gagal. Malah yang terbuka adalah file di notepad/wordpad. tau kenapa???
Karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan HTML. Nah cara men-
save dalem bentuk HTML yaitu: ketika mensave, ada satu tempat di bawah tempat kita menulis
nama file,? yakni Save As Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika
menulis nama, di akhir di berikan extensi .html, contoh: dasarHTML.html.

http://ayudewimg.blogspot.com/2015/05/materi-panduan-dasar-membuat-website.html
Latihan 1
Ketikklah perintah-perintah HTML berikut, kemudian modifikasilah agar diperoleh tampilan
yang
maksimal ! Pahami setiap perintah/tag HTML-nya !

<html>
<head>
<title> Latihan Pertemuan 2 </title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<table border="1" align="center" width="80%">
<tr>
<td colspan="2" align="center" height="100" bgcolor="#3A2BD1">
<font size="16" face="Arial">SITUSKU.COM </font><br>
<hr width="500"> <br>
<marquee direction="right">Terdepan Dalam Berita dan Gosip</marquee>
</td>
</tr>
<tr valign="top">
<td width="200" height="450" bgcolor="green">Home</td>
<td bgcolor="#F75454">Selamat Datang di <b><i>SITUSKU.COM</i></b> <br>
</td>
</tr>
</table>
</body>
</html>

Latihan 2

Ketentuan:

1. Pengaturan halaman/format terserah Anda (ukuran, jenis font, warna dll)

2. Jumlah halaman = 3, denga ketentuan:
a. halaman Home: berisi ucapan selamat datang, deskripsi situs Anda dll
b. halaman Profile: berisi profil Anda, nama, kelas, alamat, tempat/tanggal lahir dll
c. halaman Gallery berisi gambar-gambar yang berkaitan dengan situs Anda
3. Setiap halaman harus memuat hyperlink/link
4. Halaman Gallery wajib memuat gambar-gambar
5. Usahakan untuk menambahkan link-image pada halaman Gallery