Tutorial HTML Bag 12: Membuat Layout
Tutorial HTML Bag 12: Membuat Layout| Melengkapi tutorial 11 terdahulu tentang table, colspan dan rowspan. Kali ini siswa/i SMK kelas X bisa mempelajari bagaimana membuat layout website sederhana menggunkan hyper text markup language (HTML).
Pada pembuatan layout ini kita akan belajar mengatur lebar kolom untuk sidebar, lebar kolom untuk body post, tinggi header-footer, bakcground color, serta menyisipkan image header.
Membuat layout 2 kolom
Layout yang akan kita buat terdiri dari 2 kolom, satu kolom untuk sidebar kiti dan satu lagi sebagai body post. Ketentuan layout yang akan kita buat terdiri dari:
<html>
<head>
<title> Layout</title>
<body>
<table width="1020px" style="background-color:#FF00FF;" border="1" align="center">>
<!--header layout-->
<tr height="100px">
<td colspan="2" >
<h1> Judul Web</h1>
</td>
</tr>
<!--body-->
<tr valign="top">
<td style="background-color:#FF00FF;
width:30px;text-align:top;">
<b>Main Menu</b><br />
<a href="">Dasar HTML</a><br />
<a href="">Tabel HTML</a><br />
<a href="">Contoh Layout</a><br />
<a href="">Form HTML</a>
</td>
<td style="background-color:#eeeeee;height:300px;
width:400px;text-align:top;">
Belajar membuat layout Web dengan HTML...<br/>
</td>
</tr>
<!--footer-->
<tr>
<td colspan="2" style="background-color:#FF00FF;" height="70px">
<center>
Copyright (c) 2013 mulyaditenjo.com
</center>
</td>
</tr>
</table>
</body>
</head>
</html>
Mengganti background header dengan image
Unyuk mempercantik tampilan, coba kita ganti title header dengan tampilan gambar yang sebelumnya kita buat menggunakan paint (contoh sederhana saja), lebar image disesuaikan dengan lebar layout yaitu 1020px dan tinggi disesuaikan dengan tinggi header yaitu 100px.
Agar layout terlihat menyatu, pada border sizenya diubah menjadi 0. Atau bisa membuat background image menggunakan photosop. Nanti kita berikan tutorialnya pada kesempatan yang lain.
Pada pembuatan layout ini kita akan belajar mengatur lebar kolom untuk sidebar, lebar kolom untuk body post, tinggi header-footer, bakcground color, serta menyisipkan image header.
Membuat layout 2 kolom
Layout yang akan kita buat terdiri dari 2 kolom, satu kolom untuk sidebar kiti dan satu lagi sebagai body post. Ketentuan layout yang akan kita buat terdiri dari:
- 3 baris (header - body - footer)
- 2 kolom (sidebar kiri - body post)
- width sidebar kiri 30px, width body post 400 px
- tinggi header 100px
<html>
<head>
<title> Layout</title>
<body>
<table width="1020px" style="background-color:#FF00FF;" border="1" align="center">>
<!--header layout-->
<tr height="100px">
<td colspan="2" >
<h1> Judul Web</h1>
</td>
</tr>
<!--body-->
<tr valign="top">
<td style="background-color:#FF00FF;
width:30px;text-align:top;">
<b>Main Menu</b><br />
<a href="">Dasar HTML</a><br />
<a href="">Tabel HTML</a><br />
<a href="">Contoh Layout</a><br />
<a href="">Form HTML</a>
</td>
<td style="background-color:#eeeeee;height:300px;
width:400px;text-align:top;">
Belajar membuat layout Web dengan HTML...<br/>
</td>
</tr>
<!--footer-->
<tr>
<td colspan="2" style="background-color:#FF00FF;" height="70px">
<center>
Copyright (c) 2013 mulyaditenjo.com
</center>
</td>
</tr>
</table>
</body>
</head>
</html>
Mengganti background header dengan image
Unyuk mempercantik tampilan, coba kita ganti title header dengan tampilan gambar yang sebelumnya kita buat menggunakan paint (contoh sederhana saja), lebar image disesuaikan dengan lebar layout yaitu 1020px dan tinggi disesuaikan dengan tinggi header yaitu 100px.
<html>
<head>
<title> Layout</title>
<body>
<table width="1020px" style="background-color:#FF00FF;" border="1" align="center">
<tr height="100px">
<td colspan="2" >
<!--gambar heder-->
<img src="file:///C:/Users/KAYLA/Pictures/head.png">
</td>
</tr>
<tr valign="top">
<td style="background-color:#FF00FF;
width:30px;text-align:top;">
<b>Main Menu</b><br />
<a href="">Dasar HTML</a><br />
<a href="">Tabel HTML</a><br />
<a href="">Contoh Layout</a><br />
<a href="">Form HTML</a>
</td>
<td style="background-color:#eeeeee;height:300px;
width:400px;text-align:top;">
Belajar membuat layout Web dengan HTML...<br/>
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FF00FF;" height="70px">
<center>
Copyright (c) 2013 mulyaditenjo.com
</center>
</td>
</tr>
</table>
</body>
</head>
</html>
Tips:<head>
<title> Layout</title>
<body>
<table width="1020px" style="background-color:#FF00FF;" border="1" align="center">
<tr height="100px">
<td colspan="2" >
<!--gambar heder-->
<img src="file:///C:/Users/KAYLA/Pictures/head.png">
</td>
</tr>
<tr valign="top">
<td style="background-color:#FF00FF;
width:30px;text-align:top;">
<b>Main Menu</b><br />
<a href="">Dasar HTML</a><br />
<a href="">Tabel HTML</a><br />
<a href="">Contoh Layout</a><br />
<a href="">Form HTML</a>
</td>
<td style="background-color:#eeeeee;height:300px;
width:400px;text-align:top;">
Belajar membuat layout Web dengan HTML...<br/>
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FF00FF;" height="70px">
<center>
Copyright (c) 2013 mulyaditenjo.com
</center>
</td>
</tr>
</table>
</body>
</head>
</html>
Agar layout terlihat menyatu, pada border sizenya diubah menjadi 0. Atau bisa membuat background image menggunakan photosop. Nanti kita berikan tutorialnya pada kesempatan yang lain.
No comments