Cara membuat website dengan CSS dan HTML yang mudah adalah dengan menggunakan template CSS. Dengan cara ini kita tidak perlu membuat desain website dari awal dan hanya perlu mengubah isi dan beberapa tampilan pada template CSS. Semuanya bisa dilakukan dengan mudah oleh pemula sekalipun.

Untuk memperoleh template CSS yang gratis kita bisa cari di Google dengan kata kunci template css gratis atau free css template. Dengan Template HTML dan CSS tersebut, kita cukup mengedit beberapa elemen pada halaman website yang kita tuju melali aplikasi teks editor. Untuk selengkapnya akan dijelaskan pada bagian inti dari artikel ini.

Membuat website dengan CSS dan HTML cocok untuk website dengan konten minimal. Untuk website dengan konten yang banyak dan kompleks tidak disarankan menggunakan template HTML dan CSS. Sebagai solusinya, silahkan gunakan CMS seperti wordpress untuk membuat website yang besar.

Apa itu Template CSS ?

Template CSS adalah sebuah template website jadi berupa kode CSS dan HTML dengan file index.html lengkap dengan tampilan dan file CSS-nya.

CSS adalah singkatan dari Cascading Style Sheet. CSS berfungsi sebagai pengendali komponen pada elemen sebuah website. CSS menentukan tampilan sebuah website melalui nilai-nilai properti style yang disetting pada tiap-tiap elemen dalam website tersebut.

Salah satu situs yang menyediakan banyak template CSS gratis adalah www.freecsstemplates.org atau yang kini telah diforward ke situ www.templated.co. Ada banyak sekali pilihan template yang bisa didownload dan digunakan secara gratis.

Untuk melihat demo dan detail template, kita bisa klik pada template dan akan tampak halaman live preview. Kemudian pada halaman preview tersebut kita bisa langsung klik icon download yang berisi link untuk mendownload template.

Berikut ini screenshot dari situs www.templated.co :

Dan untuk contoh belajar membuat website kita pilih salah satu template, yaitu compromise. Template ini tampak sederhana namun sudah memenuhi unsur-unsur standar tampilan website seperti header, menu, isi, sidabar dan footer.

Baca Juga:  Jenis-jenis Website Part 1

Berikut ini screenshot dari template compromise dari www.templated.co :

Cara Membuat Website Dengan CSS dan HTML

Untuk membuat website dengan template CSS kita memerlukan sebuah teks editor untuk mengedit script dan browser untuk melihat preview hasil template CSS yang sudah diedit.

Yang perlu diperhatikan disini adalah kita harus menyimpan setiap perubahan script pada template sebelum melihat preview hasilnya pada browser.

1. Download Template CSS

Sebelum melakukan langkah-langkah membuat website dengan template CSS kita harus mempersiapkan hal-hal berikut ini :

1. Pastikan kita telah mendownload file template dalam format ZIP disini.
2. Ekstrak file ZIP pada sebuah folder.
3. Silahkan buka file index.html hasil ekstrak file ZIP tadi menggunakan teks editor, caranya misal klik kanan open with Geany.
4. Kemudian buka file index.html yang sama pada browser, caranya misal klik kanan open with Google Chrome.
5. Untuk contoh kasus berikut ini kita akan membuat website distributor pulsa elektrik.

2. Membuat Title Website

Title adalah keterangan teks yang muncul pada header window browser. Title ini biasanya merupakan judul artikel dan atau nama website.

Untuk mengganti title kita cari kata title menggunakan tool Find. Kemudian ganti teks yang ada diantara tag seperti contoh berikut ini :

Sebelumnya :

Menjadi :

3. Membuat Header Website

Header adalah informasi yang tampil pada bagian atas halaman website. Header ini berupa nama website dan atau logo website. Selain itu header juga bisa diisi dengan tag line website.

Untuk mengganti header kita cari kata header didalam tag body. Jika kesulitan bisa menggunakan tool Find. Kemudian ganti teks yang ada diantara tag

seperti contoh berikut ini :

Sebelumnya :

  
    
  
        
Compromise 
  
        
 design by Free CSS Templates
  
    
  

Menjadi :

  
    
  
        
Nama Website
 
        
 Nomor 1 Distributor Pulsa Elektrik Jawa Tengah
  
    
  

4. Membuat Menu Website

Menu adalah alat navigasi yang berupa link ke halaman-halaman yang ada pada website. Menu mirip dengan shortcut pada desktop komputer yang berfungsi sebagai jalan pintas membuka sebuah halaman website. Yang perlu diperhatikan adalah, pastikan kita membuat semua halaman yang dituju oleh link pada menu agar menu tidak error ketika di klik.

Baca Juga:  Cara Membuat Toko Online Dengan CMS Prestashop

Untuk mengganti menu kita cari kata menu dibawah header. Jika kesulitan juga bisa menggunakan tool Find. Kemudian ganti teks yang ada diantara tag

seperti contoh berikut ini :

Sebelumnya :

  
    
  
        
Home
  
        
Blog
  
        
Photos
  
        
About
  
        
Links
  
        
Contact
  
    
  

Menjadi :

  
    
  
        
Home
  
        
Produk
  
        
Transaksi
  
        
Deposit
  
        
Pendaftaran
  
        
Tentang Kami
  
    
  

5. Membuat Isi atau Konten Website

Isi merupakan meteri utama sebuah website. Isi ini biasanya berupa uraian teks yang agak panjang dan merupakan penjelasan dari website atau produk kita. Isi website biasanya disebut juga dengan content. Didalam isi website dapat dibagi menjadi beberapa bagian misalnya judul artikel/title (tapi berbeda dengan title pada head tadi) dan uraian artikel/post.

Untuk mengganti isi kita cari kata footer yang ada dibagian paling bawah. Jika kesulitan silahkan gunakan tool Find saja lagi. Kemudian ganti teks yang ada diantara tag

dan

seperti contoh berikut ini :