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>
Penyimpanan file HTML dan CSS harus berada pada folder yang setingkat atau sama. Link href dimaksudkan adalah untuk nama dari file CSS yang ingin disertai ke HTML. Dalam membuat file CSS terdapat penulisan menggunakan tanda # dan . seperti,
#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.
Selanjutnya pembuatan table dalam HTML, pembuatan table diwakilkan oleh kode program sebagai berikut,
<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;
}
Tidak ada komentar:
Posting Komentar