Wincamp.org – Belajar Membangun Website Dengan HTML dan CSS #Bagian1

Di jaman yang modern nan canggih ini, Pemrograman bukanlah hal yang baru untuk kita dengar. Apalagi, banyak hal-hal yang berkaitan dengan pemograman dalam kehidupan sehari-hari kita. Seperti halnya Wincamp yang mencoba memberikan sedikit ilmunya untuk teman-teman semua. Saya sendiri bukanlah progremmer handal, saya juga masih banyak belajar dan untuk itu tidak ada salahnya untuk kita berbagi sekaligus belajar bersama.

Sebelum kita masuk dalam titik pembahasan bagaimana cara membuat website dengan HTML, saya akan sedikit membahas step by step yang harus kita lakukan sebelum membangun sebuah website.

1. Membuat Desain Halaman Website

Langkah awal sebelum kita membangun Website adalah membuat desain dari website itu sendiri. Sama halnya ketika kita ingin membuat sebuah rumah, kita tentu akan membuat sketsa/desain rumah itu sendiri. Kalian bisa membuat desain/sketsa menggunakan kertas atau bisa juga menggunakan photoshop. Desain dibawah ini adalah website yang akan kita bangun, sederhana ? ya, karena kita masih awal kita akan membangun website sesederhana mungkin atau bisa disebut sebagai website statis.

Desain / sketsa Website

2. Membuat Elemen-elemen Website

Pada langkah ini, kita diwajibkan membuat bagian-bagian atau elemen yang nantinya akan mempermudah kita pada saat penulisan koding berlangsung. Elemen-elemen itu sendiri terdiri dari desain/sketsa yang kita buat di awal tadi. Sebagai contoh, di desain yang kita buat tadi terdapat elemen Header yang berfungsi sebagai penulisan judul website, logo website dan form pencarian.

<html> 
<head> <title> Belajar Website</title> 
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
<div id="wrapper">
<header> Header </header> 
<artikel> Artikel </artikel> 
<sidebar> Sidebar </sidebar> 
<footer> Footer </footer>

</div>
</body> 
</html>

<body> : Didalam elemen ini akan ada beberapa elemen untuk membangun sebuah website.
<header> : Bagian paling atas website, tempat untuk meletakan judul, logo dan form pencarian
<menu> : Tempat navigasi website`
<sidebar> : Disini dapat berisi beberapa navigasi atau fitur tambahan dari website.
<artikel> : Bagian tengah ini akan diisi artikel atau gambar.
<footer> : Bagian paling bawah dari website, yang dapat diisi dengan hak cipta atau identitas singkat.

Sekarang, kamu tulis kode-kode diatas lalu pastekan pada Notepad. Setelah itu berinama dengan coba.html. Sekarang jalankan dan lihat hasilnya. Pasti masih terlihat acak-acakan, nah sekarang kita akan membuatnya rapih seperti yang ada di desain yang sudah kita buat diatas. Tuliskan script Css dibawah ini :

#wrapper{
	width:960px;
	margin:auto;
	background-color: red;
	
}

header{
	height:120px;
	width:960px;
	float:left;
	background:url(images/header.jpg);
	background-size:960px 120px;
	border-radius: 10px 10px 0px 0px;


#wrapper #artikel{
	width:635px;
	float:left;



footer{
	float:left;
	background:#CCC;
	width:960px;
}

footer #column{
	width:300px;
	padding:10px;
	float:left;
	border-radius:0px 0px 10px 10px;
}

Setalah itu, simpan dengan nama style.css. Sekarang silahkan kamu refresh browser dan lihat hasilnya. Script <link rel=”stylesheet” href=”style.css” type=”text/css”> berfungsi untuk memanggil file style.css yang sudah kita buat.

Note : Ada baiknya kamu membuat satu folder dengan nama belajar website atau apa saja, lalu kedua file coba.html dan style.css tadi kamu simpan dalam folder yang sudah dibuat tadi.

3. Membuat Elemen Header dan Menu

Pada elemen header, kita dapat memasukan tulisan berupa judul Website. Lalu di elemen ini juga kita akan memberikan menu untuk mempermudah navigasi pada website. Buka file coba.html yang pertama sudah kita buat, lalu tambahkan script dibawah ini :

<header>
 <h1>Belajar Website</h1>
  <nav>
    <ul>
	<li><a href="" class="current">beranda</a></li>
	<li><a href="">Windows</a></li>
	<li><a href="">Aplikasi & Game</a></li>
	<li><a href="">Tips & Trik</a></li>
	<li><a href="">Editorial</a></li>
   </ul>
  </nav>
</header>

Dalam pembuatan Menu kita menggunakan  elemen <nav>, elemen ini biasa digunakan untuk pembuatan navigasi. Selain itu, <h1> yang terdapat pada judul berfungsi untuk menentukan judul sekaligus membuat tulisan huruf sedikit lebih besar. Simpan dan jalankan…

Belajar Membangun Website Dengan HTML dan CSS #Bagian2 Soon …

 

  • ucup

    Makasih gan infonnya. Saya pengen belajar dari dulu.karna ane pemula kalo bisa di jelasin lagi funngsi kode nya itu…

    • Andri Desmana

      Nanti di update gan ?

  • Good Job…

  • Dwi Mogerz

    Wahh. Artikel yg di tunggu2.. Hee

  • Sujud Aji Wantoro

    Di update artikelnya gan, agar amatir kayak ane bisa jadi Pro ? .

    • Andri Desmana

      Sedang proses gan

      • Sujud Aji Wantoro

        Oke gan, di tunggu updatenya .

  • ad galiih

    Wah manfaat bang.

  • Kholil Nurochman

    Baru sampai tahap 2, masih bingung
    Gambar yg dibuat pake ps taruh mana?

    https://uploads.disquscdn.com/images/f222068330ac60fd941bcdc632ff32934c7984b2a5d6ec38c2897293c4f4815b.png

    • Andri Desmana

      Yg gambar gak usah gan, itu hanya sketsa saja. Yang paling penting itu file coba.html dan style.css nya

  • Jaya Handika

    Edukasi SEO dong min ?