Dalam membuat sebuah tampilan berbasis
web dikhususkan menggunakan suatu file tertentu untuk dapat mendukung
yaitu, CSS dan HTML. File dalam HTML menggunakan penulisan menggunakan
tag awal dan tag akhir. File HTML akan membantu kita untuk membuat
sebuah tampilan yang dapat terproses oleh suatu komputer. Penulisan
kerangka dalam HTML dapat dibuat dengan menggunakan notepad atau
notepad++ seperti,
<html>
<head>
<title>Judul Titel</title>
</head>
<body>
Isi………
</body>
</html>
Kode program diatas merupakan
kerangka dari file HTML. Pada tag <html> menandakan bahwa ini
merupakan file berupa HTML. Berikut nya tag <head> sebagai kepala
dari tampilan dimana terdapat tag <title> yang dapat digunakan
sebagai letak dari judul tampilan. Selanjutnya terdapat tag <body>
yang merupakan letak untuk menulis isi konten dari tampilan. Pada
praktikum kali ini pembuatan HTML disertai dengan file CSS. File CSS ini
akan mendukung tampilan dari file HTML menjadi lebih mudah diatur tata
letak, warna, bahkan background. Seperti pada kode program sebelumnya
bahwa keterkaitan file CSS dan file HTML harus diletakkan beberapa kode
program dalam tag <head> yaitu,
<head>
<title>Website Bahari</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
#halaman {
width: 1000px;
margin: 0 auto;
padding: 0 auto;
}
Penggunaan tanda # adalah tanda
kepemilikan seluruh properties dan value untuk div id yang telah dibuat
dalam file HTML. Seperti kode program diatas bahwa #halaman adalah div
id yang telah dideklarasikan di file HTML dengan nama yang sama sehingga
properties dan valuenya dalam #halaman hanya akan berlaku untuk file
HTML yang memiliki div id=”halaman”. Width, adalah mengatur ukuran
tampilan isi konten dari div id halaman sebesar 100pixel dari layar.
Sedangkan margin adalah ukuran yang diberi secara automatic begitupula
padding atau jarak antar baris yang diatur secara automatic.
Dalam penggunaan div id, dalam HTML
juga dapat menggunakan div class. Div class merupakan anak dari induk
div id. Seperti dalam kode program diatas,
<div id=”konten”>
<div>
Div class=”tengah” merupakan anak
dari div id=”konten”, hal tersebut untuk memberikan kemudahan dalam
mengatur tampilan isi konten secara detail. Penggunaan div class juga
dapat diberikan pengaturan tampilan dalam CSS seperti,
#konten {
width: 1000px;
margin: 0;
padding: 0;
}
.tengah {
width: 1000px;
height: 200px;
float: left;
background: grey;
}
#konten akan menandakan bahwa file
HTML yang telah dibuat memiliki div id=”konten” kemudian memiliki
pengaturan properties dan value yang telah ditentukan. Kemudian terdapat
.tengah yang merupakan div class=”tengah” dari div id=”konten”. Dan
.tengah berisi tentang properties dan value yang diatur untuk div
class=”tengah” saja. Perbedaan antar div class dan div id adalah div
class dapat digunakan berkali-kali sedangkan div id hanya dapat sekali.
<table border=”1″ align=”center”>
<tr>
<td>No</td>
<td>Menu Makanan</td>
<td>Harga</td>
</tr>
<tr>
<td>1</td>
<td>Nasi Goreng Biasa</td>
<td>Rp 7000</td>
</tr>
Untuk membuat table maka digunakan
tag <table>, tag ini akan memiliki tag didalamnya yang mewakili
baris yaitu, <tr> dan kolom yaitu, <td>. Properties yang
dapat digunakan dalam tag <table> diantaranya salah satunya adalah
border dan align. Border merupakan tingkat ketebalan garis yang dibuat
sebagai garis dalam membentuk table. Sedangkan aling merupakan letak
paragraph untuk table yang akan ditampilkan.
Contoh kode program keseluruhannya menjadi seperti ini,
index.html
<html>
<head>
<title>Website Bahari</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=”halaman”>
<div id=”judul”>
<hr>
<h1 class=”judul” align=”center”>…::::Warteg Slawi::::….</h1>
<hr>
</div>
<div id=”konten”>
<div class=”tengah”>
<center><p><b>Menu Makanan Yang Tersedia
:</b></p></center>
<table border=”1″ align=”center”>
<tr>
<td>No</td>
<td>Menu Makanan</td>
<td>Harga</td>
</tr>
<tr>
<td>1</td>
<td>Nasi Goreng Biasa</td>
<td>Rp 7000</td>
</tr>
<tr>
<td>2</td>
<td>Nasi Goreng Spesial</td>
<td>Rp 9500</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng Kambing</td>
<td>Rp 9500</td>
</tr>
<tr>
<td colspan=”3″ align=”center”>::::::::Terima Kasih::::::::</td>
</tr>
</table>
</div>
<div>
<hr>
<p>Makanan Disini</p>
<ol>
<li>Enak</li>
<li>Murah</li>
<li>Meriah</li>
</ol>
</div>
</div>
</body>
</html>
File style.css
#halaman {
width: 1000px;
margin: 0 auto;
padding: 0 auto;
}
#judul {
width: 1000px;
height: 100px;
background: grey;
margin: 0;
padding: 0;
}
#konten {
width: 1000px;
margin: 0;
padding: 0;
}
.tengah {
width: 1000px;
height: 200px;
float: left;
background: grey;
}
.footer {
height: 150px;
background: grey;
clear: both;
}
.judul {
color:red;
padding: 10px 0 0 10px;
}
Admin Ghodank Nasution
Click here for comments 0 comments: