Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

BELAJAR CARA UNTUK MEMBUAT WEBSITE DARI DASAR / NOL

Bagaimana cara membuat website dari dasar dengan HTML dan CSS, dengan panduan tutorial lengkap mulai dari nol

  Hilman Ramadhan

Daftar Isi:

Apa perbedaan website yang dit...
Bagaimana membuat website kust...
Apa yang akan kita lakukan di ...
Persiapan membuat website dari...
Mulai menulis kode HTML
Melihat hasil kode tersebut
Website kamu sudah jadi! Eh be...
Menambahkan paragraf di situs ...
Menambahkan gambar di situs ka...
Waktunya menghias
Mengubah warna tulisan website
Mengubah warna background webs...
Kode lengkap tutorial singkat ...
Apa yang perlu kamu pelajari s...
Bagaimana agar website kamu bi...
Berapa lama waktu yang dibutuh...
Bagaimana latihan membuat webs...
Referensi lain

Ada dua cara membuat website:

  1. Dengan bantuan software, sering disebut no code, seperti Wix, Weebly, Wordpress dan lainnya.
  2. Dengan menulis sendiri programnya, sering disebut code, seperti HTML, CSS, Javascript, PHP dan lainnya.
cover cara membuat website
cover cara membuat website

Apa perbedaan website yang ditulis dengan kode sendiri dan menggunakan platform seperti wordpress ?

Menggunakan platform punya keuntungan berikut:

Namun dengan batasan:

Sebaliknya, dengan membuat website dengan kode sendiri, kita bisa:

Bagaimana membuat website kustom dengan HTML dan CSS ?

Yang akan kita bahas pada artikel ini adalah membuat website dengan bantuan HTML dan CSS. Untuk penjelasan detail teknologi tersebut, baca:

Singkatnya, HTML adalah bahasa untuk membuat struktur website, sedangkan CSS adalah bahasa untuk membuat tampilan website.

Apa yang akan kita lakukan di panduan tutorial ini?

orang melihat komputer
orang melihat komputer

Kamu akan terjun langsung merasakan bagaimana membuat website dari dasar dengan HTML dan CSS. Tentu kita tidak akan menjadi ahli hanya dengan satu artikel.

Tapi tujuannya, agar kamu bisa merasakan langsung dan menghilangkan tanda tanya selama ini seputar pembuatan situs.

Ini adalah awal dari kamu nanti bisa membuat berbagai situs lain seperti, profil perusahaan, blog, toko online, aplikasi, sosial media dan masih banyak lagi!

Sudah siap? mari kita mulai!

Persiapan membuat website dari dasar

Berikut alat yang kita butuhkan untuk membuat website sendiri:

  1. Text Editor (Tempat menulis kode). Ada banyak text editor, yang sudah terinstall di komputermu biasanya adalah Notepad (Windows), Textedit (macOS) atau Gedit (Linux).

Jika kamu ingin mengikut panduan ini, mari install Visual Studio Code.

Kamu bisa menemukan tombol download di halamannya.

Baca kelebihan Visual Studio Code untuk coding

gambar situs VS Code
gambar situs VS Code
  1. Browser (Tempat melihat hasil website). Ada banyak browser, kemungkinan besar kamu sudah punya seperti Chrome, Firefox atau Safari

Mulai menulis kode HTML

Untuk membuat stuktur dasar websitenya, kita perlu menulis kode HTML. Dalam membuat kode sudah ada syntax atau aturan baku bagaimana caranya.

Kamu tidak harus menghafal atau mengingat ini, ada internet yang bisa kamu gunakan untuk mencari informasi tersebut sewaktu-waktu.
  1. Buka Visual Studio Code, kemudian buat file baru dengan nama index.html dan simpan di folder yang kamu inginkan.

Nama `index` bisa kamu ubah dengan nama apa saja
  1. Tulis kode HTML berikut di file index.html yang kamu buat tadi:
<!DOCTYPE html>
<html lang="id">
       <head>
       <title>Belajar HTML</title>
       </head>
       <body>
       <h1>Halo, Selamat Datang!</h1>
       </body>
</html>

Penjelasan Kode

Kamu tidak perlu langsung paham semuanya. Pola penulisan <tag> ... </tag> adalah cara menulis kode di HTML. Yang berada di antara tag tersebut adalah konten dari tag tersebut.

Melihat hasil kode tersebut

  1. Klik dua kali file index.html yang kamu buat tadi, maka akan otomatis membuka browser dan menampilkan hasilnya. Kamu akan melihat tulisan “Halo, Selamat Datang!” di sana.

  2. Untuk mengubah konten yang ditampilkan, kamu bisa mengubah konten di antara tag <h1> ... </h1>. Contohnya:

<h1>Halo, Selamat Datang di Website {TARO NAMA KAMU DI SINI}!</h1>

Website kamu sudah jadi! Eh belum ya?

Kabar baiknya file tersebut adalah file website kamu! Meskipun tidak sempurna, itulah yang dibutuhkan untuk membuat website sendiri dari dasar.

Sekarang tugas kamu adalah mempelajari “tag-tag” lain dari HTML untuk membuat website yang lebih kompleks, seperti menampilkan gambar, video dan lainnya.

Tag-tag tersebut bisa dilihat di Referensi HTML atau juga video tutorial di sekolahkoding.com.

Kita tidak akan melihat semua tagnya, tapi akan saya beri beberapa contoh

Menambahkan paragraf di situs kamu

Untuk menambahkan paragraf, kita bisa menggunakan tag <p> ... </p>. Contohnya:

<h1>Halo, Selamat Datang!</h1>
<p>Ini adalah paragraf pertama, silahkan isi dengan kalimat panjang apa saja</p>

letakkan tag p setelah tag h1 yang kamu buat sebelumnya

Sekarang reload browser, kamu akan melihat paragraf baru yang ditambahkan.

Menambahkan gambar di situs kamu

Untuk menambahkan gambar, kita bisa menggunakan tag <img>.

Sebelumnya, siapkan sebuah gambar dan letakkan di folder yang sama dengan file index.html yang kamu buat tadi.

Lalu, tambahkan kode ini:

<img src="sumbergambar.png" />

Ganti sumbergambar.png dengan nama file gambar yang kamu letakkan tadi.

Kamu bisa mencoba meletakkan tag img ini di setelah atau sebelum tag lain.

Jangan takut untuk coba-coba! tidak akan ada masalah kalau error, kamu bisa undo tulisan kamu jika ada masalah

Waktunya menghias

Karena nanti artikelnya bisa terlalu panjang dan sulit diikuti, kita sudahi dulu untuk membuat konten HTMLnya. Sekarang kita lihat cara menghias website kita dengan CSS.

Cara menulis CSS, letakkant tag <style> ... </style> di dalam tag <head> ... </head>. Contohnya:

<!DOCTYPE html>
<html lang="id">
       <head>
       <title>Belajar HTML</title>
       <style> ... </style>`
       </head>
       <body>
              <h1>Halo, Selamat Datang!</h1>
       </body>
</html>

Kita perlu mengisi bagian ... dengan kode CSS sebenarnya.

Mengubah warna tulisan website

Untuk mengubah warna tulisan website, kita bisa menggunakan kode berikut:

h1 {
       color: red;
}

Nah letakkan kode di atas menggantikan ... di antara tag <style> ... </style>.

Lalu save text-editor kamu dan refresh browsernya. Kamu akan melihat tulisan h1 kamu menjadi merah , sesuai dengan color red yang kamu berikan.

Mengubah warna background website

Untuk mengubah warna background website, kita bisa menggunakan kode berikut:

body {
       background-color: blue;
}

Letakkan setelah kode blok CSS sebelumnya, lalu save dan refresh browser.

Sekarang warna latar belakang website kamu berubah menjadi biru.

Kode lengkap tutorial singkat ini

Jika kamu mengalami masalah mengikuti panduan di atas, kamu bisa menggunakan kode ini sebagai referensi:

<!DOCTYPE html>
<html lang="id">
       <head>
       <title>Belajar HTML</title>
       <style> 
              body {
                     background-color: blue;
              }
              h1 {
                     color: red;
              }
       </style>
       </head>
       <body>
              <h1>Halo, Selamat Datang!</h1>
              <p> Saya Hilman, dari Skodev </p>
              <img src="sumbergambar.png" />
       </body>
</html>

Apa yang perlu kamu pelajari selanjutnya ?

Itu dia gambara membuat website sendiri dengan HTML dan CSS.

Kita barus melihat sedikit dari luasnya kemampuan HTML dan CSS. Kamu bisa menggunakan link-link di bawah sebagai referensi lanjutan untuk belajar lebih jauh.

Bagaimana agar website kamu bisa diakses oleh orang lain ?

Untuk membuat website kamu bisa diakses oleh orang lain, kamu perlu mengupload kode kamu ke sebuah server atau dikenal dengan istilah hosting.

Setelah itu menyambungkannya dengan nama domain agar mudah diingat dan dibuka oleh orang lain.

Referensi artikel terkait ini:

Berapa lama waktu yang dibutuhkan untuk membuat website ?

Sangat bervariasi. Jumlah waktu belajar orang berbeda-beda, karena itu tidak ada patokan waktu yang pasti.

Jangan terburu-buru, selama kamu tekun dan sabar, kamu akan bisa membuat website kamu sendiri. Jika mudah, maka skill ini tidak akan lagi spesial. Hanya orang-orang yang sabar belajar akan lolos dan bisa menguasai skill ini.

Bagaimana latihan membuat website selanjutnya ?

Kamu bisa mulai membuat website yang kamu inginkan sendiri. Bisa mencari contoh desain dari situs yang kamu suka, atau melihat inspirasi di Dribble, Pinterest, atau Behance.

Jika kamu ingin sekedar latihan (tidak mendesign sendiri), gunakan situs ini:

situs frontend practice
situs frontend practice

Referensi lain

Penulis: Hilman Ramadhan

/ @hilmanski

Hai saya Hilman, membuat situs Sekolah Koding (Skodev) dan menulis buku untuk programmer (Halo Koding), Halo Koding . Sudah mengetik-ngetik alias programming sejak 2015. Semoga artikel dan situs ini bisa bantu karir kamu ya!

Artikel lain di kategori "belajar"

Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding