Telah banyak sekali website di dunia ini, kemudian bagaimana mereka membuatnya? Bisa saja mereka membuatnya sendiri atau menggunakan Jasa Pembuatan Website atau mungkin mereka menggunakan platform gratis seperti Wordpress.
Pada pembahasan kali ini, kita akan membahas cara pembuatan website mulai dari awal dan sangat dasar serta pembahasan yang mudah untuk dipahami. Atau sobat sudah mahir? tentu saja pembahasan ini tidak menjadi masalah bahkan bisa menambah informasi dan wawasan kepada sobat.
Sebelum sobat membaca materi ini, silahkan sobat sediakan bahan yang diperlukan di bawah ini.
1. Laptop / PC
2. Akun E-Mail
3. Teks Editor
3. Koneksi Internet
4. Kebutuhan perut
Baca juga : Rahasia Orang Sukses
Perkenalan
Pada umumnya website di dunia banyak digunakan dalam membagikan informasi, menjadikan usaha dan sebagai media promosi seperti yang kita kenal seperti Facebook, Google AdWord itu digunakan sebagai media promosi.Website ini banyak sekali jenisnya seperti Website Corporate, E-Commerce, E-Learning, E-Pay, Personal seperti Blog dan masih banyak lagi jenisnya dan manfaat yang dihasilkan jelas berbeda-beda.
Materi ini akan saya pecah menjadi 2 bagian pembaahsan yang dimana kedua tersebut ada sedikit bedanya yaitu membuat website menggunakan wordpress dan membuat website menggunakan bootstrap.
Nah, ngomongin wordpress dan bootstrap apa sobat sudah tau kedua nama tersebut? sekilas pasti pernah mendengar apa lagi wordpress.
Untuk mendukung pembahasan ini, alangkah baiknya sobat juga membaca beberapa pembahasan di bawah ini.
Jika sobat belum sempat membacanya, silahkan di bookmark dulu agar tidak kehilangan jejak. Tapi saya sangat menyarankan untuk membacanya terlebih dahulu.
Apa itu Bootstrap?
Bootstrap adalah sebuah framework yang dikhususkan untuk membangun sebuah design website, sehingga wesbite menjadi lebih menarik. Bukan hanya itu saja, menggunakan bootstrap kita akan lebih menghemat waktu dalam pembuatannya. Bootstrap telah meluncurkan tools yang bernama Bootstrap Studio.Bootstrap Studio adalah sebuah perangkat lunak yang dibuat untuk mempermudah para developer dalam pengerjaan website. Dengan hanya modal klik saja menggunakan mouse, sobat sudah bisa membuat website yang sangat menarik dan tentunya responsive.
Apa itu Wordpress?
Wordpress bisa kita katakan CMS (Content Management System). Bisa kita simpulkan bahwa Wordpress ini Sistem untuk mengatur konten kita. Jadi seluruh bagian yang berkaitan dengan sistem atau mesin akan dihandle oleh Wordpress.
Untuk mendapatkan Wordpress ini cukup mudah, sobat bisa mengunduhnya pada website resminya yaitu wordpress.org atau wordpress.com.
Banyak sekali yang bisa kita hasilkan dengan menggunakan CMS Wordpress seperti, kita bisa membuat toko online hanya dengan klik saja dan itu sangat mudah untuk dilakukan.
Pembahasan
Setelah kita berbincang-bincang sedikit mengenai apa yang akan kita gunakan pada materi ini saya akan langsung saja menju pembahasan, semoga informasi di atas dapat memberikan manfaat bagi sobat semua dan juga saya selaku penulis.
Seperti yang saya tulis di atas, materi akan dibagi menjadi 2 pembahasan agar sobat lebih enak dan nyaman untuk membacanya, jadi silahkan di simak pembahasan di bawah ini.
Membuat Website Menggunakan Wordpress
Pada pembahasan ini saya tawarkan kepada sobat dua pilihan yaitu, membuat wordpress langsung di wordpress.com atau sobat ingin membuat wordpress di hosting sobat. Jika sobat memilih untuk membuatnya di hosting, sobat harus mengunduh terlebih dahulu CMS Wordpress di website resminya wordpress.org.
Pada kasus ini saya akan menggunakan langsung dari wordpress.com karena tidak dipungut biaya dan sangat mudah sehingga cocok untuk belajar.
Langkah pertama, silahkan sobat kunjungi wordpress.com. Di sana akan terlihat beberapa menu diantarnya masuk dan daftar.
Selanjutnya kita akan mendaftar di situs tersebut, caranya dengan menekan tombol Get Started. Sudah di klik? Berikutnya akan di arahkan kehalaman pemilihan.
Di halaman tersebut terdapat 4 pilihan diantaranya, Start with Blog, Start with Website, Start with Portofolio dan Start with Store. Karena dijudulnya membuat website langsung saja kita pilih yang Start with Website. Selamat sobat telah memilih website, halaman berikutnya yaitu pemilihan tema.
Sebelum membuatnya, sobat dipertintahkan untuk memilih tema untuk website yang baru saja akan dibuat. Sebagai contoh saya memilih tema yang kedua, atau jika sobat masih bingung bisa melwatkan langkah ini dan di halaman admin sobat bisa mengaturnya kembali.
Oke, kerja yang bagus sobat. Mari kita masuk tahap pemilihan nama domain yang akan dijadikan website.
Masukan domain yang relevan dengan tujuan website yang akan sobat buat. Dan alamat domain inilah yang nantinya akan kita gunakan untuk mengakses website yang dibuat.
Setelah menentukan alamat domain website, sobat akan diarahkan untuk memilih paket untuk website sobat.
Pada langkah ini, sobat pilih saja yang gratisan. Oke tekan tombol Start with Free. Kemudian pihak Wordpress akan meminta sobat untuk mendaftar terlebih dahulu.
Seperti yang saya tulis di atas, sediakan e-mail. E-mail tersebut akan kita gunakan pada langkah ini untuk mendaftar ke wordpress. Langsung saja sobat masukan e-mail, username dan kata sandi yang sobat inginkan.
Jika semua telah terisi dengan benar, silahkan sobat klik tombol Create My Account. Setelah sobat klik, maka pihak wordpress akan mengirimkan sebuah tautan kepada e-mail yang tadi sobat daftarkan.
Seperti itulah pesan yang didapatkan setelah kita mendaftar. Langkah selanjutnya silahkan sobat cek pesan e-mail sobat, apakah ada kiriman dari wordpress atau tidak.
Seperti gambar di ataslah pesan yang dikirim oleh pihak wordpress. Langkah yang harus sobat lakukan adalah menekan tombol Confirm Now.
Setelah sobat mengeklik tautan tersebut, maka website yang baru saja sobat daftarkan telah aktif dan bisa di akses.
Selamat! Website baru saja sobat buat hanya dalam hitungan beberapa menit saja, cukup mudah dan cepat.
Selanjutnya yang perlu sobat lakukan adalah mengatur judul website yang baru saja dibuat agar terlihat lebih menarik.
Untuk mengaturnya silahkan sobat pergi ke halaman dashboard, caranya masuk dengan alamatwebsitesobat.wordpress.com/wp-admin/. Jika belum masuk silahkan masuk terlebih dahulu dengan akun sayang tadi sobat buat.
Di atas adalah tampilan dasboard admin. Di sini kita akan lebih mudah dalam melakukan perubahan pada website kita baik itu pengisian konten atau mengganti template website.
Kita akan mengagnti judul website kita yang berada di menu Settings - General.
Di halamn tersebut terdapat title, tagline, timezon dan lain-lainnya. Sekarang kita ubah judul website kita misal menjadi Belajar Wesbite dan tagline kita isikan Sangat Mudah. Kita sesuaikan dulu untuk menganti bahasanya menjadi Indonesia, cari pilihan id - Indonesia pada opsi Language.. Selanjutnya klik Save Change atau Simpan Perubahan yang berada di bawah.
Atau tidak, bisa disesuaikan dengan pengaturan milik sobat pribadi. Jadi tidak terpaku pada pembahasan ini. Oke pengaturan umu telah kita selesaikan, sekarang mari kita coba untuk mengubah tema website.
Untuk mengubah tema website, sobat silah klik menu Appearance - Themes.
Sobat, silahkan diperhatikan bagian yang saya beri warna merah. Pada bagian itu sobat bisa mengatur tema agar lebih cepat dalam melakukan pencarian tema. Ada tema yang tren, populer dan baru.
Selain itu, sobat bisa mengatur versi tema tersebut. Bisa yang premium bisa juga yang gratis, namun pada pembahasan ini saya memilih yang gratis.
Sobat sudah meneukan tema pilihan sobat? Silahkan arahkan kursor sobat tepat di atas tema pilihan sobat. Kemudian klik tombol Active atau sobat ingin melihatnya terlebih dahulu, maka klik tombol Preview.
Bagaimana? Mudah bukan. Setelah sobat melakukannya, silahkan cek website sobat sudah benar atau belum tema yang baru saja sobat aktifkan. Dan inilah hasil akhirnya.
Nah, sampai sini ada pertanyaan? Jika ada silahkan sobat kirim pertanyaan melalui halaman contact. Sampai di disini, sobat telah berhasil membuat website, mengganti judul, dan mengganti tema website. Bagaimana tentang pembahsan ini? Cukup mudah bukan, hanya klik ini kli itu, sobat sudah bisa membuat website kelas profesional.
Selanjutnya kita lanjutkan ke pembahasan yang kedua yaitu, membuat website dengan bootstrap.
Sobat sudah meneukan tema pilihan sobat? Silahkan arahkan kursor sobat tepat di atas tema pilihan sobat. Kemudian klik tombol Active atau sobat ingin melihatnya terlebih dahulu, maka klik tombol Preview.
Bagaimana? Mudah bukan. Setelah sobat melakukannya, silahkan cek website sobat sudah benar atau belum tema yang baru saja sobat aktifkan. Dan inilah hasil akhirnya.
Nah, sampai sini ada pertanyaan? Jika ada silahkan sobat kirim pertanyaan melalui halaman contact. Sampai di disini, sobat telah berhasil membuat website, mengganti judul, dan mengganti tema website. Bagaimana tentang pembahsan ini? Cukup mudah bukan, hanya klik ini kli itu, sobat sudah bisa membuat website kelas profesional.
Selanjutnya kita lanjutkan ke pembahasan yang kedua yaitu, membuat website dengan bootstrap.
Membuat Website dengan Bootstrap
Membuat website menggunakan Boottstrap, digunakan beberapa skill dalam melakukan pemrograman, ya dasarnya belajar HTML dan CSS. Silahkan sobat cari pembelajarannya di blog ini.
Oke langsung saja, kita akan membuat sebuah website menggunakan bootstrap. Karena kita ini manual, maka kita butuh yang namanya Teks Editor. Dalam kasus ini saya menggunakan Sublime Text, sobat bisa mengunduhnya di halaman resmi Sublime Text.
Tahap pertama, silahkan sobat buka Sublime Text, kemudian klik New File beri nama index.html dan simpan di mana saja, entah document, disk c atau laiinya.
Selanjutnya, silahkan sobat masukan code header sebagai berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Belajar Website Dengan Bootstrap - Edukasi Media</title>
<!-- Bootstrap Core CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-landing-page/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-landing-page/css/landing-page.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Kode di atas berfungsi untuk mendefinisikan sebuah header, dimana dalam bagian tersebut terdapat judul, deskripsi, keyword dan stylesheet.
Sudah sobat terapkan kode tersebut pada text editor sobat? Jika sudah mari kina menerapkan bagian body atau isi dari website.
Untuk mengisi konten website, silahkan sobat masukan kode di bawah ini.
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header -->
<a name="about"></a>
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Landing Page</h1>
<h3>A Template by Start Bootstrap</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li>
<a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li>
<a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<!-- Page Content -->
<a name="services"></a>
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Death to the Stock Photo:<br>Special Thanks</h2>
<p class="lead">A special thanks to <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a> for providing the photographs that you see in this template. Visit their website to become a member.</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="https://blackrockdigital.github.io/startbootstrap-landing-page/img/ipad.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">3D Device Mockups<br>by PSDCovers</h2>
<p class="lead">Turn your 2D designs into high quality, 3D product shots in seconds using free Photoshop actions by <a target="_blank" href="http://www.psdcovers.com/">PSDCovers</a>! Visit their website to download some of their awesome, free photoshop actions!</p>
</div>
<div class="col-lg-5 col-sm-pull-6 col-sm-6">
<img class="img-responsive" src="https://blackrockdigital.github.io/startbootstrap-landing-page/img/dog.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-b -->
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Google Web Fonts and<br>Font Awesome Icons</h2>
<p class="lead">This template features the 'Lato' font, part of the <a target="_blank" href="http://www.google.com/fonts">Google Web Font library</a>, as well as <a target="_blank" href="http://fontawesome.io">icons from Font Awesome</a>.</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="https://blackrockdigital.github.io/startbootstrap-landing-page/img/phones.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<a name="contact"></a>
<div class="banner">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>Connect to Start Bootstrap:</h2>
</div>
<div class="col-lg-6">
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li>
<a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li>
<a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.banner -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li>
<a href="#">Home</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#about">About</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#services">Services</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<p class="copyright text-muted small">Copyright © Your Company 2014. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
Masukan kode di atas setelah bagian penutup header atau "</head>". Setelah sobat berhasil menambahkan kode tersebut, langkah berikutnya adalah menambahkan javascript dan penutup html di bagian akhir.
Perhatikan potongan kode di bawah ini.
<!-- jQuery -->
<script src="https://blackrockdigital.github.io/startbootstrap-landing-page/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-landing-page/js/bootstrap.min.js"></script>
</body>
</html>
Sampai disini, kita telah menyelesaikan website statis sederhana ini, dan lihatlah di bawah ini hasilnya.
Baca juga : Gambar untuk Konten Website
Saya rasa cukup sampai di sini, semoga materi ini dapat bermanfaat bagi kalian semua dan tentunya bagi saya juga. Bila sobat suka silahkan di bagikan, sekian dan terima kasih.
0 Response to Belajar Membuat Website dari Awal Sampai Mahir
Posting Komentar