Cara Membuat Website Sederhana Dengan HTML dan CSS

cara membuat website sederhana html dan css

Apakah Anda pernah mengenal yang namanya website statis? Atau website dinamis? Lalu apa perbedaan antara keduanya? Website statis memiliki konten yang fixed. Artinya konten tersebut tidak bisa lagi diubah-ubah. Update konten pada website statis berbeda dengan website dinamis yang memiliki halaman admin yang bisa mengelola konten-konten yang ada di dalam website. Halaman-halaman ini biasa disebut CMS (Content Management Website). Ada beberapa macam aplikasi CMS yang bisa Anda gunakan, salah satunya wordpress. Untuk cara membuat website sederhana, Anda butuh HTML dan CSS.

HTML dan CSS

HTML atau Hypertext Markup Language merupakan bahasa pemrograman yang menjadi standar untuk pembuatan website statis maupun dinamis. Sedangkan CSS atau Cascading Style Sheet sendiri secara tidak langsung merupakan bagian dari HTML, dengan fungsi utamanya yaitu untuk mengkustomisasi elemen-elemen pada HTML.

Dua hal ini akan Anda butuhkan untuk membuat website statis, HTML sebagai tool untuk membuat struktur website dan CSS digunakan untuk mendesain layout dari website statis.

Anda bisa mengikuti langkah-langkah berikut ini untuk membuat website statis Anda sendiri.

1. Desain Layout Website Anda

Buatlah layout dari website Anda secara kasar, Anda bisa menggunakan tool seperti Paint atau Photoshop, ataupun menggambarnya dengan tangan. Tentukan Header, Main Body, dan Footer.

2. Hard Coding Layout Website Anda

Yang harus Anda lakukan selanjutnya setelah menentukan layout adalah memulai penulisan dari kode website.

Mulai dari membuat file HTML dengan nama index.html, dan masukan kode-kode berikut ini:

  • <html>
  •  <head>
  •    <!–Element-elemen tag <head> tulis disini–>
  •    <title>WEBSITE TEST</title>
  •  </head>
  •  <body>
  •    <!–Element-elemen tag <body> tulis disini–>
  •  </body>
  • </html>

Merujuk kembali pada Layout website yang sudah kita buat, Layout tersebut memiliki 3 section, yaitu section HEADER, MAIN BODY dan FOOTER, silahkan kalian masukan ketiga section tersebut ke dalam tag <body>.

  • <body>
  •  <!–Element-elemen tag <body> tulis disini–>
  •  <header> <!–Section HEADER–>
  •  </header>
  •  <main> <!–Section MAIN BODY–>
  •  </main>
  •  <footer> <!–Section FOOTER–>
  •  </footer>
  • </body>

Setelah itu Anda bisa mengkostumisasi sesuai dengan keinginan, seperti menambahkan logo serta navigasi.

  • <body>
  •  <!–Element-elemen tag <body> tulis disini–>
  •  <header> <!–Section HEADER–>
  •    <div>LOGO</div>
  •    <div>NAVIGASI</div>
  •  </header>
  •  <main> <!–Section MAIN BODY–>
  •    <div>KONTEN</div>
  •    <div>SIDEBAR</div>
  •  </main>
  •  <footer> <!–Section FOOTER–>
  •    <div>FOOTER</div>
  •  </footer>
  • </body>

Baca Juga: Mengenal Lebih Dalam Tentang Wix.com

3. Styling Layout dengan CSS

Yang bisa Anda lakukan selanjutnya adalah Styling Layout CSS, agar tampilannya sama dengan Layout yang sudah kita buat sebelumnya. Silahkan ikuti langkah-langkah berikut :

Buatlah file CSS dengan nama ‘layout.css‘ lalu simpan file tersebut ke dalam folder yang sama dengan file index.html yang kalian buat tadi.

Setelah selesai silahkan Anda buka kembali file index.html tadi lalu tambahkan kode berikut ke dalam tag <head>.

<link rel=“stylesheet” href=“layout.css” />

Kode di atas akan me-load file layout.css seketika file index.html di buka atau di akses.

Tambahkan class ke dalam tag dari elemen-elemen yang kalian buat sebelumnya karena pemrograman CSS hanya bisa memanggil ID atau Class yang sudah didefinisikan ke dalam elemen.

Setelah itu silahkan kalian buka file *.CSS yang sudah kalian buat tadi lalu definisikan kembali nama-nama class pada elemen-elemen HTML sebelumnya di file *.CSS. Berikut format penulisannya :

 

  • .logo {}

 

  • .navigasi {}
  • .konten {}
  • .sidebar {}
  • .footer {}

 

 

Setiap nama class yang Anda definisikan ke dalam file *.CSS harus dimulai dengan simbol ‘titik‘ ( . ) di depan nama class-nya, kalau kalian menggunakan ID pada elemen HTML (id = “nama_id”), maka penulisan di file *.CSS harus dimulai dengan simbol ‘pagar‘ ( # ).

Sedangkan tanda ‘kurawal‘ setelah penulisan nama class pada file *.CSS adalah tempat dimana kita akan menaruh kode CSS di dalamnya.

Terakhir tinggal kalian masukan kode-kode CSS berikut untuk tiap-tiap class tersebut agar membentuk tampilan atau Layout seperti pada gambar Layout yang sudah dibuat sebelumnya.

Nah, berikut adalah cara membuat website sederhana HTML dan CSS. Apabila Anda memiliki pertanyaan mengenai hal ini silahkan taruh di kolom komentar, dan jangan lupa untuk membagikan artikel ini

Share this post :

Scroll to Top
WhatsApp chat