Cara Membuat Website dengan HTML serta CSS Secara Sederhana

· 5 menit untuk membaca
Cara Membuat Website dengan HTML serta CSS Secara Sederhana

Website menjadi topik menarik untuk dibicarakan pada saat ini. Hal ini menjadikan menjamurnya pembicaraan mengenai bagaimana cara membuat website sederhana dengan html dan css secara gratis. Nah, pembahasan mengenai cara tersebut akan dikupas dalam pembahasan berikut, lengkap dengan contoh coding HTML website!

Cara Membuat Website dengan HTML dan CSS

HTML adalah aturan pemrograman yang menjadi bagian penting dalam pembuatan website. Sedangkan CSS menjadi bagian pendukung untuk membuat website menjadi tampak lebih menarik di mata pengunjung.Untuk menggunakan kedua komponen tersebut sehingga bisa menjadi sebuah website, kamu perlu memperhatikan beberapa cara berikut ini:

1. Menyiapkan Beberapa Software untuk Coding Website dengan HTML

Software coding menjadi alat paling penting untuk menghasilkan sebuah website. Ibaratnya seorang koki, maka pasti membutuhkan dapur untuk bisa memasak sebuah makanan. Begitu juga seorang website developer yang memerlukan software coding untuk membuat sebuah website.

Contohnya seperti Visual Studio Code, Notepad++, Sublime Text, dan lain sebagainya yang bisa kamu gunakan sebagai text editor. Kemudian kamu juga memerlukan browser seperti Google Chrome, Mozilla Firefox, Internet Explorer, dan lain sebagainya untuk menampilkan halaman dari website yang kamu buat.Dengan menyiapkan kedua alat tersebut terlebih dahulu, sekarang kamu bisa lanjut ke cara membuat website sederhana dengan html dan css yang berikutnya!

2. Menentukan Tema dan Desain Website

Cara membuat website gratis dengan html dan css yang berikutnya adalah menentukan tema dan juga desain website. Tema dan desain menjadi hal yang harus kamu tentukan sebelum akhirnya mulai melakukan coding di software text editor.

Dengan menentukan tema dan desain website terlebih dahulu, kamu bisa mengetikkan kode program dengan lebih terarah dan lebih cepat. Karena kamu telah mengetahui tampilan seperti apa yang ingin kamu buat. Jadi, kamu hanya perlu menyesuaikannya dengan kode html dan css yang kamu ketikkan.

Berbeda halnya jika kamu belum menentukan tema sama sekali. Kamu akan seringkali mengalami stuck pada saat melakukan coding. Pikiranmu akan terbagi karena harus membayangkan seperti apa tampilan yang akan kamu buat.

Desain yang muncul di kepalamu juga akan terus berubah-ubah, sehingga tidak ada patokan desain fix seperti apa yang kamu inginkan. Sehingga, kegiatan coding akan menjadi lebih lama jadinya karena desain yang tidak ditentukan sejak awal ini.

3. Membuat Folder dan File Baru

Jika kamu sudah memilih tema dan desain, maka cara membuat website sederhana dengan html dan css yang berikutnya adalah membuat folder dan file baru. Usahakan untuk memisahkan file dokumen html dengan file kamu yang lainnya.

Buatlah sebuah folder terpisah dengan nama bebas sesuai yang kamu inginkan. Kemudian di dalamnya buatlah file bernama index.html dan style.css. Untuk pemula, pastikan kedua file tersebut berada di dalam satu folder yang sama.

File html akan berguna sebagai kerangka utama dari halaman website. Sedangkan file css bisa kamu import ke dalam file html untuk kemudian akan berguna sebagai penghias dari tampilan halaman website milik kamu.

4. Masukkan Kode HTML ke dalam File

Kemudian cara membuat website gratis dengan html dan css yang selanjutnya adalah mulai mengetikkan kode di dalam file html. Kamu bisa melakukan hal ini dengan memanfaatkan software text editor yang sudah kamu install pada perangkat yang kamu gunakan sebelumnya.

Untuk bisa mengetikkan kode HTML, kamu perlu memahami struktur HTML terlebih dahulu. Setelah kamu cukup memahaminya, kamu baru bisa mulai mengimplementasikan seluruh tag HTML yang ada. Mulai dari tabel html, heading, list, dan lain sebagainya.Jika kamu sama sekali belum pernah membuat sebuah website, maka kamu bisa mencoba untuk menampilkan teks biasa saja terlebih dahulu. Untuk itu, kamu bisa menyalin contoh coding html website berikut ini.

<!DOCTYPE html>

<html>

<head>

  <title>Belajar Membangun Website Pakai HTML dan CSS</title>

</head>

<body>

  <div id="header">

    <h1>Judul Website</h1>

  </div> 

  <div id="content">

    <h2>Ini contoh judul konten website</h2>

    <p>Ini contoh isi konten website</p>

  </div>

  <div id="footer">

    <p>Footer - Copyright HaloTeknologi 2022</p>

  </div>

</body>

</html>

Pusing dengan contohnya? Tenang, berikut penjelasannya!

Fokuslah pada bagian body. Bagian itu bisa kamu isi apapun untuk konten yang ingin kamu tampilkan. Pada contoh di atas, body dibagi menjadi 3 bagian menggunakan div sehingga menjadi header, content, dan footer.

Header akan menampilkan konten untuk navbar, kemudian content untuk konten dari website, dan footer untuk meletakkan copyright dari si pembuat website tersebut.

5. Hias dengan CSS

Jika sebelumnya kamu sudah mengisi file index.html dengan sebuah kode HTML, maka cara membuat website dengan HTML dan CSS selanjutnya adalah sudah pasti, yaitu menambahkan css.

File CSS bisa kamu gunakan untuk memberikan kode warna html, mengubah font, margin, dan lain sebagainya. Intinya, file yang satu ini akan berisi konfigurasi mengenai tampilan visual dari halaman website yang kamu buat.

Nah, untuk bisa mengimpor file CSS ke dalam HTML, kamu perlu menambahkan kode di bawah ini tepat berada di dalam tag head.

<link rel="stylesheet" src="style.css">

Apabila kamu menggunakan contoh coding html website sebelumnya, maka file index.html mu akan menjadi seperti berikut.

<!DOCTYPE html>

<html>

<head>

  <title>Belajar Membangun Website Pakai HTML dan CSS</title>

  <link rel="stylesheet" src="style.css">

</head>

<body>

  <div id="header">

    <h1>Judul Website</h1>

  </div>    

  <div id="content">

    <h2>Ini contoh judul konten website</h2>

    <p>Ini contoh isi konten website</p>

  </div>

  <div id="footer">

    <p>Footer - Copyright HaloTeknologi 2022</p>

  </div>

</body>

</html>

Setelah kamu menambahkan kode tersebut, maka sekarang file CSS sudah terhubung dengan file HTML. Sehingga, apapun perubahan styling yang kamu tambahkan di dalam file CSS, akan memberikan efek ke tampilan halaman website yang kamu buat.

Jika kamu mengalami error di mana CSS tidak memberikan efek apa-apa ke kode HTML milik kamu, maka kamu perlu mengecek satu hal. Pastikan saja file style.css terletak di satu folder yang sama dengan index.html agar proses import bisa mereferensikan direktori file CSS yang tepat.

6. Tampilan File HTML di Browser

Apabila kamu sudah selesai mengetikkan kode di dalam file HTML dan CSS, maka sekarang kamu bisa melihat hasilnya di dalam browser. Caranya cukup mudah, kamu bisa menekan dua kali pada file HTML. Apabila browser sudah terinstall pada perangkat mu, maka file HTML akan langsung terbuka secara otomatis di browser.

Cara membuat website dengan HTML ini bisa kamu lakukan berkali-kali. Jadi, apabila kamu merasa bahwa tampilan di browser masih kurang maksimal, kamu bisa kembali lagi ke software text editor. Kemudian, lakukan perubahan di dalam file index.html atau style.css yang kamu rasa masih belum sesuai.

Jika sudah, kamu hanya perlu melakukan refresh pada browser. Setelah itu, browser akan menampilkan perubahan berdasarkan kode terbaru dari index.html dan style.css yang sudah kamu ubah sebelumnya.

Lakukanlah hal itu berulang kali hingga kamu merasa bahwa tampilan dari halaman website sudah benar-benar maksimal dan sesuai dengan keinginanmu.

Sudah Bisa Membuat Website dengan HTML Sendiri?

Dengan mengikuti seluruh cara di atas, kamu pasti bisa membuat website gratis dan sederhana menggunakan HTML dan CSS dengan sangat mudah. Cukup ikuti saja langkah di atas dan selanjutnya kamu hanya perlu berkreasi lebih lanjut lagi!