Tutorial: Membuat Desain Web Sederhana

Tutorial: Membuat Desain Web Sederhana

, , 4 December 2013 Tutorial 0 Komentar

Oke, kali ini kita akan belajar untuk membuat desain tata letak atau layouting web dengan ‘bumbu’ CSS dan HTML. Hmm, bingung ya? Aku juga bingung gimana mau jelasinnya. Gini aja deh, ini saya kasih hasil jadinya, nanti kita buat bareng-bareng dari awal.

screenshoot belajar web sederhana

Jangan dilihat jeleknya, ambil hikmahnya nanti ya 😀

Sudahlah, kita fokus ke tutorialnya saja. Namun sebelumnya demi kerapihan pengodean, kita buat sebuah folder baru khusus untuk membuat sebuah desain web. Kenapa harus begitu? Karena biar rapi 😐

1. Persiapan

Ini hanya tips aja: Di dalam folder tersebut,buat lagi 2 buah folder, masing-masing beri nama css dan img. Jadi, nanti ketika kita membuat file CSS letakkan di folder css, kemudian jika Anda membutuhkan gambar-gambar, bisa disimpan di folder img. Ingat, nama foldernya tidak wajib css ataupun img, cuma tips aja.

struktur foldernya

Selanjutnya, kita buat 1 file bernama index.html di dalam folder yang sudah di buat sebelumnya.

<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Web</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
</body>
</html>

Perhatikan teks berikut:

<link rel="stylesheet" type="text/css" href="css/style.css">

digunakan untuk memanggil file css yang berada di folder css nanti. Inget, nanti bukan sekarang yaa..

2. Membuat Batas Web

Skenario di tutorial ini begini, kita akan membuat website dengan lebar 800 pixel atau 800px. Jadi buat dulu untuk batas webnya, kita sebut halaman web.

Tambahkan teks berikut di dalam tagging body.

<div class="batas">
</div>

Atau jadinya seperti ini.

<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Web</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="batas">
</div>
</body>
</html>

3. Mulai Membuat File CSS

Buat file style.css di dalam folder css. Kemudian kita atur untuk membuat batas website kita.

.batas {
margin: 0 auto;
width: 800px;
}

Loh, kok ada margin: 0 auto ? Buat apa? Sebenarnya penjelasannya agak panjang, tapi singkatnya, itu untuk membuat web kita nanti berada di tengah-tengah, ga di pinggir[an] lagi. Kita hanya membatasi untuk lebarnya (width) saja, untuk tinggi (height) menyesuaikan dari kontennya nanti, kan setiap web pasti punya tinggi yang berbeda-beda.

4. Membuat Header

Sekarang kita buat untuk kepala websitenya, sekaligus nanti kita kasih background gambar. Masih inget ya tadi kita sudah buat folder img untuk menyimpan gambar (bagi yang membuatnya tadi). Silahkan cari gambar dulu di Google atau lainnya, atau mau pakai seperti punya kami? Unduh

Di dalam div batas kita tambahkan teks berikut.

<div class="header">            
</div>

Hasil sementaranya seperti berikut.

<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Web</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="batas">
<div class="header">            
</div>
</div>
</body>
</html>

Selanjutnya kita atur lagi di CSS untuk header-nya

.header {
width: 100%;
height: 225px;
background-image: url('../img/bg_portfolio.jpg');
background-size: 100% auto;
}

Perhatikan di CSS di atas, untuk lebarnya kita beri 100% kenapa? Karena posisi header kan sudah ada di dalam batas tadi, jadi 100% tersebut akan mengikuti lebar dari batasnya, yaitu 800px secara otomatis.

Perhatikan lagi, terdapat penambahan background-image. Kenala url-nya ../img/bg_portfolio.jpg ? Ya karena file css ada di folder css dan gambarnya tadi ada di folder img, makanya mundur dulu (..) kemudian baru masuk ke img/nama_file nya.

Jika sudah sampai step ini, silahkan coba buka melalui browser untuk mencobanya. Harusnya minimal sudah muncul background-image nya.

5. Membuat Body dari Website

Untuk yang ini, kita buat body website yang isinya masih ada beberapa bagian lagi, yaitu sidebar dan isi web untuk artikelnya. Oke langsung saya tuliskan untuk body yang isinya ada sidebar sama konten web nya. Untuk konten webnya terserah selera masing-masing ya.

<div class="isiweb">
<div class="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>

<div class="konten">
<h3>KSWeb Itu Membosankan</h3>
<p>Dibuat oleh nurmanhabib pada 5 November 2013</p>

<p>Siapa bilang KSWeb itu menyenangkan? Banyak yang mengira membuat tampilan atau mendesain sebuah web itu mudah, padahal sangat-sangat susah, bahkan membosankan. Jangan pernah mencoba-coba membuat website, jika kamu tidak mau belajar sungguh-sungguh. Karena sesungguhnya keberhasilan dari apa yang kalian kerjakan adalah dari niat. Jadi, waspadalah, waspadalah.</p>

<p>Belajar membuat tabel dengan HTML.</p>

<table border="1">
<tr>
<th>NIM</th>
<th>Nama</th>
<th>Alamat asal</th>
</tr>
<tr>
<td>1300018532</td>
<td>Habib Nurrahman</td>
<td rowspan="2">Yogyakarta</td>
</tr>
<tr>
<td>1300018533</td>
<td>Fakhrurozi</td>
</tr>
<tr>
<td colspan="3">Gabung 3 kolom</td>
</tr>
</table>
</div>
</div>

Nah ini sekalian ama bumbunya juga.

.isiweb {
display: inline-block;
background-color: #0F4FA8;
}

.sidebar {
width: 250px;
float: left;
}

.sidebar a {
color: #6996D3;
text-decoration: none;
}

.konten {
width: 550px;
background-color: #FFCA73;
float: right;
}

h3.judul {
font-family: 'Comic Sans Ms';
font-size: 32px;
color: #A66800;
margin: 0;
}

p {
color: #920031;
}

6. Terakhir, Footer

Untuk footer nya, ada sedikit bonusnya, yaitu teks berjalan menggunakan marquee. Penasaran? Coba aja.

<div class="footer">
<marquee><p>&copy 2013 KSWeb. Habib Nurrahman</p></marquee>
</div>

Jangan lupa racik bumbu terakhirnya.

.footer {
clear: both;
width: 100%;
background-color: #F06C98;
}

Udah, gitu aja ya. Kalau masih penasaran, jangan lupa kita kumpul rutin setiap Kamis jam 19.00 (ba’da Isya).

Sekian @nurmanhabib.

Tidak ada komentar.

Tinggalkan Komentar