10 Menit Membuat Template Web Menggunakan Html Dan Css
karena ada beberapa kesibukan lain yang
harus di selesaikan akhirnya hari ini saya bisa update postingan lagi,
nah berhubung beberapa hari kemaren ada yang Tanya bagaimana sh cara
membuat template web dan saya melihat hasil karya teman saya yang membuat layout web menggunakan frame.
Berhubung saya paling tidak suka menggunakan frame untuk membuat template web maka
dari itu pada akhirnya saya memberikan sedikit ilmu yang pernah saya
pelajari, yaitu membuat template web menggunakan html dan css. Cara ini
sebenarnya tidak terlalu sulit, cukup dengan memahami struktur dari web
tersebut maka kita bisa menentukan layout tersebut dan siap untuk build
layout. Perhatikan gambar berikut.
Nah dari gambar di atas maka kita bisa simpulkan bahwa pada umumnya web itu pasti memiliki elemen dibawah ini
- Header
- Kontent
- Sidebar
- Footer
Untuk membuat halaman seperti gambar di
atas maka kita harus membuat file index.html ataupun index.php dan 1
file tambahan yaitu css nah untuk mencoba silahkan copy scrip dibawah
ini dan paste di notepad++ kemudian simpan dengan nama index.html.
01
02
03
04
05
06
07
08
09
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
| <div id="wrapper"><div id="header"></div><div id="page"><div id="konten"><form action="proses.php" method="POST"><table width="300" align="center" bgcolor="#f1f1f1"><tbody><tr><td>Tanggal</td><td>:</td><td><input type="text" name="tanggal" placeholder="Input Date Here" /></td></tr><tr><td>Judul</td><td>:</td><td><input type="text" name="judul" placeholder="Input Title Here" /></td></tr><tr><td>Konten</td><td>:</td><td><input type="text" name="konten" placeholder="masukan konten anda di sini" /></td></tr><tr><td></td><td></td><td><input type="submit" value="simpan" /><input type="submit" value="edit" /></td></tr></tbody></table></form></div><div id="sidebar"></div></div><div id="footer"></div></div> |
01
02
03
04
05
06
07
08
09
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
| body{background: #f1f1f1;}#wrapper{background: #f1f1f1;border: 1px solid black;width: 960px;margin: 0px auto;height: auto;}#header{background: white;width: 940px;margin: 0px auto;height: 100px;margin-top: 10px;}#page{background: blue;border: 1px solid black;width: 940px;height: 400px;margin:0px auto;margin-top:10px;margin-bottom: 10px;}#konten{background: black;width: 630px;margin: 0px auto;float: left;height: auto;}#sidebar{background: red;float: right;width: 300px;margin: 0px auto;}#footer{background: black;margin: 0px auto;width: 940px;height: 30px;} |
nah selesai mudah bukan untuk membuat template web,
mudah mudahan bermanfaat bagi sobat cahkos, apabila sobat masih kurang
jelas silahkan bisa PM saya akan coba jelaskan kembali…terimakasih..
Untuk Vidionnya menyusul aja……
Tidak ada komentar:
Posting Komentar