Cara membuat desain layout website menggunakan HTML + CSS

Jumat, 19 September 2014

Cara membuat desain layout website menggunakan HTML + CSS

Dalam pembuatan website diperlukan sebuah desain awal dari web yang akan kita buat sebagai sebuah dasar dari pembuatan web untuk mempermudah kita membuat website secara kompleks .Desain awal yang saya maksud adalah sebuah kerangka atau pun layout dari website yang akan kita buat tujuan dari pembuatan layout terlebih dahulu adalah untuk membantu kita mendesain tata letak dari website mulai dari nama webite ,logo/gambar,konten,menu,link,footer dll.

Untuk cara pembuatan layout website yang saya buat saya menggunakan aplikasi notepad++ untuk membuat script html ( hipertext markup language ) dan css ( cascading style sheet ) ,selain menggunakan notepad++ anda juga bisa menggunakan aplikasi lain seperti menggunakan dreamweaver versi apa saja,dan tentu saja untuk menampilkan website yang kita buat bisa menggunakan browser jenis apa saja. Pada pembuatan web menggunakan html dan juga css ini saya buat script html dan css nya terpisah yang mana script htmlnya diberi nama dengan ekstensi dot (.)html contoh: webgw.html ,dan cssnya dengan ekstensi dot (.) css contoh: style.css.sebnarnya Untuk menggunakan CSS, ada dua cara yang bisa dipakai, yaitu dengan cara memasukan langsung script CSS pada tag <style> di dalam tag <head>…</head>, atau bisa juga dengan mnggunakan link yang menghubungkan antara file HTML dengan file CSS.Berikut ini adalah contoh script yang memakai cara pertama:

<head>

<style>

//script CSS

</style>

</head>

Lalu cara kedua :

<head>

</head>

Sekarang kita mulai tutorial pembuatan layoutnya,cekidot:

1.Pembuatan script HTML

Untuk memulainya silahkan masuk pada aplikasi notepad++ atau aplikasi pembuat script html lainnya.pada script ini saya akan membuat sebuah script html yang didalamnya terdapat sebuah perintah didalam tag < > yang akan terhubung dengan script css.Scriptnya sebagai berikut:

<HTML>

<TITLE> Desain layout </TITLE>

<BODY>

<div id="wrapper" >WRAPPER

<div id="konten" > KONTEN </div>

<div id="kanan" > KANAN </div>

<div id="kanan"> KANAN </div>

<div id="bawah"> BAWAH </div>

</div>

</BODY>

</HTML>

jika anda sudah selesai memasukkan script diatas maka langkah selanjutnya adalah menyimpan scriptnya dengan contoh webgw.html.

untuk penjelasan script sebagai berikut:

< HTML> </HTML>

Digunakan untuk mendefinisikan bahwa script didalam tag <HTML> hingga ditutup dengan </HTML> adalah sebuah root dari suatu dokumen HTML.

<TITLE> Desain layout </TITLE>

Sebuah tag yang akan ditampilkan pada bagian atas web sebenarnya tag TITLE biasa ditempatkan didalam tag <HEAD> namun karna didalam tag head ini hanya terdapat tag TITLE yang dapat ditampilkan tanpa harus berada di dalam tag HEAD maka saya menghilangkan tag HEAD nya agar lebih simple.

tag ini yang digunakan untuk menghubung dengan script html dengan css ,didalam tag <link> ini memiliki attribut type text/css untuk mendefinisikan link css namun tanpa perlu didefinisikan pun script akan tetap jalan lalu ada attribut rel,nah attribut ini yang penting untuk memberi tahu program html bahwa link ini bertpe stylesheet atau css,kemudian yang paling penting adalah attribut href yang akan menunjukan akan terhubung dengan apa script html ini.

Ini adalah tag yang paling penting atau inti dari web karena tag ini lah isi dari sebuah web yang akan ditampilkan dilayar website.didalam tag body terdapat tag:

<div id="wrapper" >WRAPPER

<div id="konten" > KONTEN </div>

<div id="kanan" > KANAN </div>

<div id="kanan"> KANAN </div>

<div id="bawah"> BAWAH </div>

</div>

Tag div ini digunakan sebagai section didalam dokumen html kemudian didalam tag div semuanya saya buat attribut id untuk memisahkan perintah masing masing kode id yang perintahnya terdapat pada script css.karena tag div dengan id wrapper merupakan tag div paling awal dan tag penutupnya </div> berada paling belakang dari tag div lain maka seluruh tag div didalamnya akan dipengaruhi oleh perintah pada tag div dengan id wrapper.tujuan dari pembuatan tag div id wrapper adalah untuk menunjukan batas dari posisi keseluruhan perintah didalamnya,untuk lebih jelasnya anda bisa lihat outputnya yang mana tag div id wrapper ini didefinisikan dengan warna hitam,silahkan anda pahami sendiri.

2.Pembuatan script CSS

Untuk memulainya maka silahkan anda buka tab baru untuk memasukkan script cssnya. Pada css pendeklarasian untuk tag kita bisa langsung menuliskan nama tagnya dan untuk pendeklarasian id ditandai dengan simbol # lalu nama idnya lalu dilanjutkan dengan tanda kurung { } yang didalamnya merupakan perintah untuk tag tersebut ,untuk perintah pada css selalu diakhiri dengan tanda ; bentuk umumnya seperti namaperintah:perintah; dicontohkan seperti background-color:gray; .berikut keseluruhan script css nya:

body {

background-color:gray;

font-size:20px;

text-align:center;

}

#wrapper {

background-color:black;

width:990px;

}

#nama {

margin-bottom:5px;

padding:15px;

background-color:green;}

#logo {

font-size:35px;

margin-bottom:5px;

padding:40px;

height:80px;

background:red }

#menu {

margin-bottom:5px;

padding:15px;

background-color:green;

}

#kiri {

margin-right:5px;

margin-bottom:5px;

height:600px;

float:left;

width:180px;

background-color:blue;

}

#konten {

font-size:28px;

margin-bottom:5px;

height:600px;

float:left;

width:620px;

background-color:orange;

}

#kanan {

margin-left:5px;

margin-bottom:5px;

height:146px;

float:right;

width:180px;

background-color:blue;

}

#bawah{

margin-top:5px;

clear:both;

padding:15px;

height:50px;

background-color:chocolate;

}

Untuk penjeleasan scriptnya sebagai berikut:

background-color:gray;

digunakan untuk memberi warna background yang mana pada perintah diatas backgroundnya berwarna gray atau abu-abu.

font-size:20px;

digunakan untuk memberi unruan font atau huruf dengan nilai 2o pixel.

text-align:center;

digunakan untuk menentukan posisi text center atau rata tengah.

width:990px;

digunakan untuk mendefinisikan ukuran lebar dengan lebar 990 pixel.

margin-bottom:5px;

digunakan untuk memberi jarak dengan section bawahnya denagn jarak 5 pixel.selain margin-bottom ada margin-top,margin-right dan margin-left.

float:right;

digunakan untuk mendefinisikan posisi dari section yaitu pada posisi kanan

height:600px;

digunakan untuk mengatur panjangnya dengan panjang 600 pixel.

clear:both;

digunakan untuk menonaktifkan float left dan right.

Lalu jika sudah scriptnya harus disimpan dengan nama style.css jika anda ingin membuat nama css yang berbeda silahkan anda ganti link css pada script htmlnya dengan nama script css yang anda inginkan.jika sudah coba masuk ke folder dimana anda meletakkan file html lalu anda klik 2 kali script htmlnya dan lihat hasilnya akan sebagai berikut: