Buat Website Buatan Anda Sendiri Dengan 10 Langkah Ini

Jika sebelumnya anda belum pernah mencoba bagaimana caranya membuat website buatan anda sendiri, anda beruntung! Disini kami akan menjelaskan step by step bagaimana cara membuat website buatan anda sendiri. Akan ada rasa yang berbeda jika anda membuatnya sendiri, tanpa menggunakan pihak ketiga seperti Blog, WordPress, dsb. Lalu, bagaimana caranya? Simak penjelasan berikut, dan pastikan tidak ada yang terlewat yaa ­čÖé

1. Pertama, siapkan terlebih dahulu alat tempurnya

browser

browser

Install Browser dan Text Editor. Sudah pasti bukan? Browser adalah alat tempur yang utama dalam membuat website. Install salah satu browser atau jika ingin diinstall semuanya tidak masalah : Chrome, Mozilla, Opera.
Setelah selesai install browser, lanjut install Text Editor. Text Editor berfungsi sebagai alat codingnya, dan browser untuk menampilkan hasilnya. Install salah satu Text Editor : Notepad++ (free), Sublime Text (license required)
Selesai install alat tempurnya, kita lanjut ke step berikutnya

2. Tentukan terlebih dahulu tata letak website

website-layout

website layout

Tata letak harus ditentukan sesuai dengan kaidah design website. Mulai dari letak navigasi, header, konten, sampai dengan footer. Jangan khawatir, jika anda bingung dalam menentukan layout website yang ingin anda buat silahkan lihat disini untuk referensi layoutnya https://www.w3schools.com/html/html_layout.asp . Layout akan mempermudah anda dalam tahap coding. Mengapa? Karena anda sudah mempunyai gambaran bagaimana codingan yang akan anda buat nantinya

3. Tentukan konsep dalam membuat website

concept-idea

concept idea

Pada website, HTML adalah bahasa utamanya. HTML akan diikuti dengan bahasa lainnya, yaitu CSS, JavaScript, dan lain sebagainya. Untuk saat ini, kita akan menggunakan dua bahasa terlebih dahulu yaitu HTML dan CSS. HTML merupakan dasarnya website, sedangkan CSS untuk membuat tampilan website anda agar terlihat lebih baik.

4. Buat script HTML dengan struktur yang umum

Kita akan masuk ke tahap coding. Pertama, buat terlebih dahulu script HTML nya. Contohnya, bisa lihat pada gambar berikut ini.

tag-html-umum

tag html umum

Setelah selesai membuat script HTML nya, silahkan di save lalu tentukan dimana tempat yang tepat untuk menaruh file HTML tersebut. Agar tidak terjadi kelupaan, maupun agar file-file selanjutnya yang nantinya akan dibuat tidak berantakan. Setelah itu, buka file HTML tersebut di browser yang telah anda install sebelumnya.

5. Buat tag header dan navigasi

Tag ini merupakan HTML5 (html versi 5) yang sudah support pada semua browser. Tag ini berfungsi untuk menambahkan header yang posisinya ada di paling atas bagian website. Tambahkan kedua tag ini ke dalam tag body. Contohnya ada pada gambar berikut ini.

tag-header-navigasi

tag header navigasi

Jika sudah selesai, kita akan lanjut ke tahap berikutnya. Jangan lupa di save agar aman.

6. Buat tag article

Tag ini juga merupakan HTML5 yang berfungsi untuk menempatkan postingan pada website anda. Jika ada beberapa postingan, pastikan tiap tag artikel hanya berisi satu postingan saja, agar terlihat rapi. Contohnya lihat pada gambar dibawah ini.

tag-article

tag article

Jangan lupa untuk save.

7. Buat tag aside

Fungsinya adalah untuk menempatkan kategori konten, berita-berita, maupun informasi si pembuat website. Tag ini juga termasuk HTML5. Jika ingin menempatkan dua jenis, contohnya kategori konten dan berita-berita, anda dapat memisahkan dengan tag section di dalam tag aside. Contoh scriptnya bisa dilihat pada gambar dibawah ini.

tag-aside

tag aside

Jangan lupa untuk save.

8. Buat tag footer

Footer juga merupakan tag HTML5. Footer berfungsi untuk menyampaikan tentang hak cipta pada website tersebut, mulai dari tahun dibuatnya sampai nama si pembuat website tersebut. Contohnya bisa lihat gambar dibawah ini.

tag-footer

tag footer

Jangan lupa untuk di save.

9. Buat script CSS

Tahap ini merupakan tahap untuk menghias website anda. Sudah dijelaskan dari awal juga, karena CSS untuk mempercantik website anda agar terlihat lebih baik. Contohnya bisa dilihat pada gambar di bawah ini. Until codingan css

script-css

script css

Save script CSS sebagai file css. Lalu load file css tersebut dengan cara menyisipkan file css ke dalam file html. Contohnya seperti gambar dibawah ini.

load-css

load css

Setelah itu, save kedua file yaitu file html dan css nya. Lalu coba refresh website yang telah anda buat.

10. Lengkapi halaman website

Lengkapilah halaman di setiap menu navigasi pada website yang telah anda buat. Dengan melakukan sembilan langkah diatas, anda dapat melakukannya dengan cepat. Yaitu dengan cara copy paste file HTML yang pertama kali anda buat, lalu ganti namanya sesuai dengan masing-masing dari setiap menu navigasi. Setelah itu, anda bisa mengedit kontennya kembali tanpa harus dari awal membuat scriptnya.


Pusing belajar website? Jangan khawatir! Disini kami menyediakan jasa pembuatan website. Segera hubungi Smartsoft Studio sekarang juga!

Kami hadir di 3 Kota, yaitu Jakarta, Bandung, dan Surabaya

0812 3303 5559

www.smartsoftstudio.com