Cara membuat layout website | belajar web design
18 April 2013
3 Comments
Cara membuat layout website | belajar web design
kali ini saya akan membahas tentang cara membuat layout website. Sebelumnya sudah tahukah apa layout itu ?
layout diibaratkan rancangan kasar sebuah website. Bila kita berkunjung kesebuah web atau blog, maka halaman yang tampil terdiri berbagai macam ukuran. Mulai dari header, sidebar, content, dan footer, nah inilah yang akan dibuat dalam pembahasan ini.
satu yang perlu di ingatkan kembali, semenjak adanya CSS, pembuatan layout sudah tidak terlalu sulit lagi. kita tidak perlu membuat perintah menggunakan table lagi. cukup satu editan untuk semua perubahan.
bagaimana sudah siap?
pertama buka dulu notepad nya,
lalu seperti biasa, kita buat dulu format html nya seperti dibawah ini
<html>
<head>
<title>isi dengan judul yang akan dibuat</title>
</head>
<body>
</body>
</html>
lalu save as,
perhatikan cara penyimpanannya dibawah ini:
<link rel="stylesheet" type=text/css" href="layout.css"/>
(kode diatas maksudnya cara mengambil atau merelasikan kode css yg kita ambil dari satu folder,ganti kata layout menjadi nama css waktu kita simpan tadi,contohnya css1.css)
lalu tambahkan kode id css nya dibawah ini, tepat diatas </body>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
sehingga kode html nya menjadi seperti ini:
<html>
<head>
<title>isi dengan judul yang akan dibuat</title>
<link rel="stylesheet" type=text/css" href="css1.css"/>
</head>
<body>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>
jika sudah, maka save lagi file html nya(bukan save as),,klik aja ctrl+s
setelah itu buka kembali file nya, lalu akan muncul dibrowser gambar layout website.
seperti dibawah ini:
layout diatas sudah saya ubah ubah sendiri bedasarkan keinginan saya, yang jelas inti dari pembahasan membuat layout adalah yang diatas, jika kita ingin menambah kotak lagi maka tinggal kita tambah css nya dan kita tambah id css nya di html, setelah itu kreasikan lah :-)
selamat mencoba yah sob :-)
kali ini saya akan membahas tentang cara membuat layout website. Sebelumnya sudah tahukah apa layout itu ?
layout diibaratkan rancangan kasar sebuah website. Bila kita berkunjung kesebuah web atau blog, maka halaman yang tampil terdiri berbagai macam ukuran. Mulai dari header, sidebar, content, dan footer, nah inilah yang akan dibuat dalam pembahasan ini.
satu yang perlu di ingatkan kembali, semenjak adanya CSS, pembuatan layout sudah tidak terlalu sulit lagi. kita tidak perlu membuat perintah menggunakan table lagi. cukup satu editan untuk semua perubahan.
bagaimana sudah siap?
pertama buka dulu notepad nya,
lalu seperti biasa, kita buat dulu format html nya seperti dibawah ini
<html>
<head>
<title>isi dengan judul yang akan dibuat</title>
</head>
<body>
</body>
</html>
lalu save as,
perhatikan cara penyimpanannya dibawah ini:
- klik file lalu pilih save as
- simpan di new folder tersendiri misalnya nama folder "belajar web"
- lalu pada bagian judul ganti dengan nama sesuka kamu tetapi dengan format .html
misalnya "membuat layout.html" - lalu pada bagian save type ganti dengan "all files"
- lalu klik save
kenapa dibuat seperti itu,karena untuk membuat files langsung ke format html, sehingga saat kita buka file tersebut langsung mengarah ke browser.
sekarang coba buka file yang kita simpan tadi, apakah isinya kosong?
jelas donk,karena belum diisi apa-apa.
balik lagi ke topik pembahasan,
untuk membuat layout kita membutuhkan css.
caranya buka notepad lagi
lalu buat seperti ini:
#header {
width: 980px;
height: 150px;
border: 1px solid #000000;
margin: 0 auto;
}
#content {
width: 980px
height: 500px;
border: 1px solid #000000;
margin: 0 auto;
}
#footer {
width: 980px;
height: 150px;
border: 1px solid #000000;
margin: 0 auto;
}
cara penyimpanannya:
- klik file lalu save as
- lalu pilih folder tempat penyimpanan file .html tadi
- lalu pada bagian judul ganti dengan nama sesuka anda tetapi dengan format .css
contoh: css1.css - juga pada bagian save type ganti dengan all files
- lalu tekan ok
keterangan:
#header dan seterusnya itu merupakan id atau nama yang akan kita relasikan dengan kode html yang telah kita buat diawal tadi
lalu kita buka lagi folder yang berisi format html tadi degan cara klik kanan lalu open with notepad(jika memakai notepad++ ada pilihan edit with notepad++).
lalu beri kode relasi css diatas kode </head>
<link rel="stylesheet" type=text/css" href="layout.css"/>
(kode diatas maksudnya cara mengambil atau merelasikan kode css yg kita ambil dari satu folder,ganti kata layout menjadi nama css waktu kita simpan tadi,contohnya css1.css)
lalu tambahkan kode id css nya dibawah ini, tepat diatas </body>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
sehingga kode html nya menjadi seperti ini:
<html>
<head>
<title>isi dengan judul yang akan dibuat</title>
<link rel="stylesheet" type=text/css" href="css1.css"/>
</head>
<body>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>
jika sudah, maka save lagi file html nya(bukan save as),,klik aja ctrl+s
setelah itu buka kembali file nya, lalu akan muncul dibrowser gambar layout website.
seperti dibawah ini:
layout diatas sudah saya ubah ubah sendiri bedasarkan keinginan saya, yang jelas inti dari pembahasan membuat layout adalah yang diatas, jika kita ingin menambah kotak lagi maka tinggal kita tambah css nya dan kita tambah id css nya di html, setelah itu kreasikan lah :-)
selamat mencoba yah sob :-)
BACA JUGA ARTIKEL BELAJAR WEB DESAIN LAINNYA
Membaca tulisan di atas, membuat layout jadi terasa mudah
ReplyDeleteterima kasih sob, hanya sekedar berbagi apa yang saya pelajari dari instruktur saya tadi sob :)
ReplyDeleteHai sob kalian bisa kunjungi https://dewanstudiomediadigital.wordpress.com/2015/05/26/trend-web-design-2015/
ReplyDelete