Information Technology

Memenuhi Kebutuhan Informasi Anda

Selasa, 18 November 2014

Membuat Halaman Website Itu Mudah

On 00.33 by Unknown   No comments
Halo sobat, apa kabar? Semoga pembaca tetap semangat untuk mencari ilmu. Nah, pada kesempatan ini saya akan membahas tentang membuat layout website sederhana dengan HTML dan CSS.
Untuk membuat website kita harus memiliki pemikiran tentang bagaimana layout dari sebuah website tersebut. Maka dari itu tutorial ini sangatlah penting bagi kawan pembaca yang baru mengenal HTML dan CSS. Mau tahu bagaimana cara membuat layout sederhana website? Simak langkah-langkah selanjutnya.

Membuat Kerangka Dasar
Dalam tahapan pembuatan kerangka dasar digunakan bahasa pemrograman HTML. Di dalam kerangka ini kita akan buat kerangka dari header, content, sidebar dan footer yang merupakan layout dasar pembuatan website. Silahkan ikuti code dibawah ini dan simpan file dengan nama index.html.

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Layout Website Sederhana</title>
</head>
<body>
<div class=”wrap”>
</div>
</body>
</html>

Code diatas merupakan code dasar dari halaman web yang menggunakan HTML. Apabila kamu buka di web browser, maka akan muncul halaman kosong. Mungkin kawan-kawan akan bertanya apa fungsi dari code
1
2
<div class=”wrap”>
</div>
Deretan code tersebut berfungsi untuk membuat halaman website terletak ditengah-ditengah dengan rapi.
Oke, kita lanjut dengan membuat bagian header. Bagian ini terletak di bagian atas halaman website yang berisi judul atau konten lainnya. Silahkan ikuti code berikut ini dan letakkan setelah bagian wrap.
1
2
3
<div class=”header”>
                        <h1>HEADER</h1>
</div>
Setelah header, kini kita membuat bagian konten dan sidebar. Kedua bagian ini letaknya sejajar namun berbeda ukuran. Konten terletak di kiri dengan ukuran kurang lebih 66% dari ukuran penuhnya. Sedangkan sidebar akan kita buat di sebelah kanan dengan ukuran 26%. Ikuti code berikut ini dan letakkan dibawah code bagian header yang telah kita buat.
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class=”main”>
<div class=”content”>
            <h2>Content</h2>
            <p>Halo kawan, ini konten website</p>
</div>
<div class=”sidebar”>
            <h2>Sidebar</h2>
</div>
<div class=”clear”></div>
</div>
Mungkin kamu akan bertanya, apa fungsi dari code dibawah ini?
1
<div class=”clear”></div>
Oke, saya akan jawab. Bagian konten dan sidebar terletak sejajar. Oleh sebab itu, kita harus membuat komponen berikutnya kembali pada posisinya dan tidak mengikuti posisi sidebar atau konten. Bisa dikatakan code tersebut adalah penetral atau clearfix.
Bagian kerangka terakhir adalah footer. Footer sesuai namanya terletak di bagian paling bawah website. Biasanya berisi informasi berupa credit, menu atau komponen lainnya. Ikuti code berikut dan letakkan dibawah clearfix.
1
2
3
<div class=”footer”>
            <center><p>Copyright &copy; 2014 by Wayan Dharmana – All Right Reserved</p></center>
</div>
Oke kawan, tahapan membuat kerangka sudah usai. Berikut hasil coding dari tahapan kerangka, silahkan dicek.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Layout Website Sederhana</title>
</head>
<body>
<div class="wrap">
    <div class="header">
            <h1>HEADER</h1>
    </div>
    <div class="main">
        <div class="content">
            <h2>Content</h2>
            <p>Halo kawan, ini konten website</p>
        </div>
        <div class="sidebar">
            <h2>Sidebar</h2>
        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">
        <center><p>Copyright &copy; 2014 by Wayan Dharmana – All Right Reserved</p></center>
    </div>
</div>
</body>
</html>

Sekarang coba buka hasil pembuatan kerangka website pada web browser. Maka akan terlihat tampilan dari header sampai footer yang masih belum teratur seperti pada gambar.

Mempercantik Tampilan
Untuk mempercantik tampilan kita menggunakan bahasa pemrograman CSS. Pada tahapan ini kita mengatur berbagai properti komponen web seperti warna, lebar, tinggi , posisi dan lainnya.
Berikut merupakan syntax CSS untuk mempercantik tampilan. Ikuti dan simpan file dengan nama style.css.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
* {margin:0}
body {
            font-family:arial,segoe ui;  
}
.wrap {
            width:1000px;
            margin:0 auto;         
}
            
.header {
            width:auto;
            background:#09C;
            padding:20px;
            color:#fff;
}         
  
.main {
            width:100%;
            background:#6F9;
}
  
.content {
            float:left;
            width:66%;
            background:#FF9;
            padding:2%;
            min-height:400px;
}
.sidebar {
            float:right;
            width:26%;
            background:#6F9;
            padding:2%;
}         
.clear {clear:both}
.footer {
            width:auto;
            padding:5px 10px;
            background:#333;
            color:#fff;
}

Menghubungkan HTML dan CSS
Setelah kawan mempercantik tampilan dengan CSS, belum ada efek yang muncul ketika web kamu buka di  web browser. Mengapa? Karena HTML (index.html) dan CSS (style.css) belum dihubungkan.
Untuk menghubungkan keduanya, ikuti code dibawah ini dan letakkan dibawah tag </title>.
<link rel=”stylesheet” href=”style.css”/>
Setelah itu coba cek kembali hasilnya di web browser. Bagaimana? Apakah sudah mirip dengan gambar dibawah ini?


Sekian tutorial membuat layout website sederhana dengan HTML dan CSS. Walaupun sederhana namun penuh makna. Semoga bermanfaat.

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)