CARA MEMBUAT WEBSITE SENDIRI DENGAN MUDAH

Cara Membuat Website Dengan Mudah
Cara Membuat Website Dengan Mudah

 Apa yang dimaksud dengan website?

Website adalah sebuah laman, situs ataupun portal yang berisi beragam informasi dengan memanfaatkan internet sebagai media untuk mengaksesnya, sehingga selama terkoneksi dengan jaringan internet maka setiap orang diseluruh dunia dapat membuka website tersebut tanpa terbatas ruang dan waktu.
Tampilan website terdiri dari komponen-komponen antara lain teks, gambar, suara, video ataupun animasi flash sehingga menjadikan website sebagai media informasi yang menarik bahkan inovatif untuk dikunjungi.
Adapun jenis-jenis website antara lain sebagai berikut :
  1. Website Profile
  2. Website Toko Online
  3. Website Catalog
  4. Website Komunitas    
  5. Website Pendidikan
  6. Website Berita
  7. Website Personal (branding)
  8. Website Bisnis, dll

Orang-orang mungkin tertarik untuk belajar cara membuat website, namun bagaimana caranya jika orang tersebut masih berstatus newbie atau pemula?
Untuk belajar Website memang diperlukan skill mengcoding. Namun tentunya bagi yang berstatus newbie memang terlalu dini jika langsung disuguhkan koding-koding yang sangat memusingkan itu. Bahkan ada yang berkata "Coding itu seperti bahasa alien".

Untuk membuat website, tentunya diperlukan sebuah aplikasi untuk membangunnya. Dibawah ini merupakan aplikasi yang admin Teknoborneo pernah gunakan dalam membangun website :
  • Notepad
  • Notepad++/NPP
  • Adobe DreamWeaver
  • Sublime Text
Perlu diketahui, aplikasi diatas tentunya harus memerlukan keahlian mengkoding dalam menggunakannya. Jika tidak ahli, setidaknya memiliki skill dasar. Untuk itu pembaca harus belajar sedikit tentang belajar coding web pemula sehingga mampu membuat tampilan website dasar.
berikut ini ada link rujukan untuk belajar website dasar lengkap

Admin asumsikan bahwa pembaca telah memahami dasar-dasar website (HTML). Seiring telah memahami dasar website, secara otomatis pembaca yang budiman juga mengenal yang namanya CSS, Javascript, Jquery dan lain sebagainya. Namun jangan bingung melihat koding yang sangat banyak itu, karena admin juga tidak tahu banyak tentang hal tersebut. Maka dari itu, terbitlah artikel ini guna untuk memandu pembaca dalam membangun sebuah website walaupun tanpa skill yang mumpuni.

Beberapa cara untuk membangun website sudah pernah admin gunakan. Misalnya dengan menggunakan Coding manual, wizard, CMS bahkan framework. Pada artikel kali ini admin tidak akan menjelaskan secara rinci satu-persatu mengenai hal diatas. 
  • Jika pembaca telah mencoba mempelajari belajar coding web pemula seperti pada link rujukan diatas, maka metode pembuatan website tersebut dapat dikategorikan menggunakan coding manual.
  • Jika menggunakan aplikasi seperti Adobe DreamWeaver dengan metode drag and drop dalam menyusun tampilan antar muka website, maka metode pembuatan website tersebut dikategorikan sebagai wizard.
  • Jika menggunakan platform Blogger yang pada notabenenya "klik-klik langsung jadi" maka dipastikan metode pembuatan website tersebut menggunakan CMS (Content Management System).
  • Namun, jika ingin merasakan sensasi membuat website dengan tampilan seperti website profesional, sudah ada templatenya dan ingin merasakan sedikit coding maka admin sangat merekomendasikan penggunaan framework.

Dari berbagai metode diatas, admin lebih menekankan kepada penggunaan framework dalam membangun website mengingat penggunaan framework memungkinkan pengguna leluasa dalam mengatur tampilan website sesuai keinginan, menghapus beberapa bagian koding yang dianggap tidak penting atau bahkan mengedit koding yang sudah disediakan (template) menjadi versi sendiri.
Terlepas dari itu semua, perlu diketahui bahwa penggunaan framework ini hanya digunakan untuk membuat tampilan halaman website bukan untuk input, proses dan output data.

Framework apa yang digunakan untuk membuat website?

Framework yang digunakan salah satunya adalah front-end framework Bootstrap.

Apa Itu Bootstrap?

Bootstrap adalah front-end framework (framework khusus untuk tampilan) yang sangat bagus dan luar biasa dengan mengedepankan tampilan yang responsive (dapat digunakan pada banyak platform seperti PC Desktop, laptop, notebook, handphone dan lain sebagainya). Penggunaan Bootstrap akan mempercepat dan mempermudah dalam mengembangkan website. Bootstrap juga menyediakan HTML, CSS, Javascript dan file lainnya yang siap pakai untuk dikembangkan.

Bagaimana Tutorial Desain Web Dengan Menggunakan Bootstrap?

Ikuti langkah-langkah dibawah ini untuk membangun website dengan menggunakan bootstrap :
  • Buka website resmi bootstrap di http://getbootstrap.com/
  • Klik tombol Download Bootstrap. Saat artikel ini dibuat, versi bootstrap yang stabil adalah versi 3.3.7
  • Klik lagi tombol Download Bootstrap, lalu simpan file tersebut di folder yang pembaca inginkan.
  • Jika sudah didownload, maka ekstrak terlebih dahulu karena file tersebut berekstensikan *.Zip.
  • Buka folder bootstrap-3.3.7-dist
  • Maka terlihat folder css, fonts dan js. Didalam folder inilah terdapat file-file yang fungsinya untuk membuat tampilan website menjadi lebih menarik. Sehingga pembaca tidak perlu repot-repot untuk mengkoding css dan javascript tersebut.
  • Admin anggap pembaca telah memiliki skill dasar membuat website, seperti bisa mengkoding HTML. Maka cobalah membuat halaman website dengan tampilan sederhana, misalnya dengan judul dan tombol button.
  • Jika masih belum paham, buka notepad (atau aplikasi text editor lainnya) kemudian copy dan pastekan koding dibawah ini. Koding dibawah ini merupakan koding dasar HTML, dan admin percaya pembaca telah memahami maksud dari koding tersebut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Website anda</title>
</head>
<body>
<div>
<h1>Jangan klik button ini!</h1>
<button>Jangan Klik</button>
</div>
</body>
</html>

  • Simpan file tersebut dengan nama index.html, lalu Save di dalam folder bootstrap-3.3.7-dist tadi.
  • Buka file index.html tersebut menggunakan browser (Mozilla Firefox, Chrome, Safari dan lain sebagainya), maka website pembaca akan tampak seperti gambar dibawah ini.
Cara Membuat Website Dengan Mudah
Cara Membuat Website Dengan Mudah
Tampilan website tersebut sangat klasik, kurang menarik dan kurang profesional. Maka dari itu, inilah fungsi dari Bootstrap, tampilan website yang kurang menarik dapat disulap menjadi lebih keren dengan bantuan CSS dan Javascript yang telah disediakan oleh framework ini. Cobalah untuk menambahkan sedikit koding seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
<title>Judul Website anda</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Jangan klik button ini!</h1>
<button class="btn btn-danger">Jangan Klik</button>
</div>
</body>
</html>

Sehingga tampilan website pembaca akan menjadi lebih menarik seperti gambar dibawah ini.
Cara Membuat Website Dengan Mudah
Cara Membuat Website Dengan Mudah

Tutorial diatas merupakan contoh simpel dalam membuat website yang mudah.
Untuk penggunaan komponen-komponen yang lebih kompleks, pembaca dapat membuka di http://getbootstrap.com/components/
Lebih dari selusin komponen dapat digunakan kembali untuk memberikan ikonografi, dropdown, kelompok masukan, navigasi, lansiran, dan banyak lagi.

Jika pembaca malas untuk menulis koding dari awal untuk membangun website, maka Bootstrap memberikan kemudahan berupa template untuk dijadikan sebagai desain tampilan website milik pribadi.
Berikut contoh website siap pakai sebagai framework dalam membangun website pribadi. Ikuti langkah-langkah dibawah ini.
Cara Membuat Website Dengan Mudah
Cara Membuat Website Dengan Mudah

Sumber referensi :

Related Posts

CARA MEMBUAT WEBSITE SENDIRI DENGAN MUDAH
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

2 komentar

Tulis komentar
avatar
April 4, 2018 at 3:15 PM

dari kalimantan mana ???
salam samarinda

Reply
avatar
April 9, 2018 at 1:05 PM

Dari Kalimantan Barat gan... salam juga dari Pontianak :)

Reply

Silahkan Tinggalkan Kritik dan Saran yang membangun dari Anda
1. Berkomentarlah yang baik dan sopan
2. Untuk menyisipkan kode pendek, gunakan <i rel="code"> ... KODE ... </i>
3. Untuk menyisipkan kode panjang, gunakan <i rel="pre"> ... KODE ... </i>
4. Untuk menyisipkan gambar, gunakan <i rel="image"> ... URL GAMBAR ... </i>