Layout
pada halaman web sangat penting untuk membuat website sobat terlihat lebih
bagus. Dalam merancang Layout untuk halaman web, sobat harus ekstra hati-hati.
Pada umumnya website berisikan berbagai kolom (seperti format pada
majalah atau koran), untuk membuat berbagai kolom dibutuhkan tag <table>
atau tag <div>. Pada umumnya CSS juga ditambahkan untuk merubah posisi
elemen atau membuat background, bisa juga untuk mempercantik tampilan halaman
web. Dibawah ini adalah contoh dari pembuatan Layout menggunakan tag
<table> dan tag <div>.
Contoh pembuatan Layout dengan
menggunakan tag <table>
Cara
sederhana untuk membuat Layout dengan menggunakan tag <table> pada HTML
adalah sebagai berikut :
<html>
<head>
<title>Membuat Layout
Html</title>
</head>
<body
background="2.jpg">
<table border="8"
cellspacing="8" align="center">
<tr>
<td align="center"
colspan="3" height="100"
background="3.jpg"><font
face="Andalus"><h1>UPT SMK Negeri 1 Kota
Mojokerto</td>
</tr>
<tr>
<td align="center"
colspan="3" background="8.jpg"><font color="white"><marquee><h2>Tutorial
Membuat Layout HTML</marquee></td>
</tr>
<tr>
<td height="400"
width="200" background="1.jpg"> <h3
align="center"> <font color="white">Biodata<img
src="Foto0043.jpg"></h3><h4> Nama : Khayan Abdulloh K.
<br> Kelas : X TKJ 2<br> NO Absen : 14</td>
<td height="400"
width="400" background="7.jpg"><h3><p
align="justify">Membuat layout sebenarnya susah susah gampang
kalau ada kemauan
pasti
berhasil pertama kita harus mengerti dasar dari html harus mengerti bukan
menghafal, kita harus bisa mengkolaborasikan tag tag html agar
mendapatkan
hasil yang bagus kita harus kreatif dan inovatif</p></td>
<td height="400" width="200"
background="1.jpg"><marquee direction="up"
align="center"><font
color="white"><h4>Tutorial Membuat Layout <br>Khayan
Abdulloh K. X TKJ 2</maquee></td>
</tr>
<tr>
<td align="center"
background="8.jpg" colspan="3" height="10"
width="90"> <font
color="white"><marquee><h2>copyright@Khayan</marquee></td>
</tr>
</table>
</body>
</html>
Maka tampilan untuk contoh diatas
adalah seperti tampilan dibawah ini :
Dan
untuk anda yang belum mengerti tentang penjelasan yang diatas. Anda bisa
melihat video Tutorial Membuat Layout HTML dibawah ini :
0 komentar:
Posting Komentar