Hai sahabat bloggers sekalian, kembali lagi di
kesempatan kali ini kita akan belajar bagaimana membuat template sederhana di
website.
Jadi, untuk membuat template di website, kita perlu menggunakan format
CSS. CSS (Cascade Style Sheet) merupakan fitur baru dari HTML yang
mendeskripsikan bagaimana tampilan dokumen HTML di layar (template) agar
menjadi mudah dan lebih efisien. Merupakan suatu cara untuk memformat atau
membuat layout halaman web menjadi lebih menarik dan mudah dikelola.
Untuk sintaksnya sendiri, ada beberapa hal yang perlu diperhatikan dalam
penggunaan CSS, yakni sebagai berikut
Selector {property:Value}
dimana,
selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah
value : Nilai
Editor teks yang dipakai untuk membuat template di website dengan
menggunakan format CSS dapat dibuat dengan menggunakan notepad ++. Untuk lebih
jelasnya, berikut ini merupakan salah satu contoh pembuatan template di website
Hal pertama yang perlu diperhatikan dalam membuat template adalah desain
template itu sendiri. Desain template dapat disesuaikan dengan kebutuhan atau
disesuaikan dengan kreativitas di
pembuatnya.
Setelah desain template telah selesai, kita mulai mengetik script untuk
pembuatan templatenya dengan menggunakan notepad ++. Berikut ini merupakan
salah satu contoh untuk membuat script
#box{
width: 960px; //untuk mengatur lebar template, bisa dengan menggunakan
piksel bisa juga dengan menggunakan persen
margin: 0px auto;
padding: 0px;
}
#header{ //untuk desain template bagian header
margin: 0px auto;
width: 960px; //untuk mengatur lebar template di
bagian header
height: 150px; //untuk mengatur tinggi template di bagian header
background-image: url('mosaic-2-poster-background-template.jpg');
//untuk memberikan background di bagian header. Pemberian background juga bisa
dengan menggunakan warna, dengan menggunakan property background color
background-position: center center; //untuk mengatur letak posisi gambar
background, value ‘center center’ berfungsi untuk mengatur posisi gambar di
tengah.
}
#judul{ //untuk tata letak judul di bagian header
top: 25px;
right: 15px;
left: 20px;
position : relative;
color: #f4fd05;
}
#container{ //untuk tata letak di bagian isi dari website
margin: 0px auto;
width: 960px;
background-image: url('1.jpg');
}
#kanan{ //untuk tata letak di bagian kanan dari isi di website
float: right;
width: 670px;
margin :10px;
padding:0 10px;
}
#kiri{ //untuk tata letak di bagian kiri dari isi di website
float: left;
width: 250px;
height: 500px;
background-image: url('PaintSwatches_1400x900.jpg');
}
#footer{ //untuk tata letak bagian bawah (footer) dari website
margin: 0px auto;
width: 960px;
line-height: 50px;
background-color: #000000;
}
#copyright{ //untuk pengaturan tulisan di bagian footernya.
text-align: center;
color:#ffffff;
}
.clear
{
clear: both;
}
Setelah script selesai diketik, langkah selanjutnya adalah menyimpan file
dengan nama style.css
Dengan demikian, desain template telah selesai dibuat. Apabila dijalankan
di web browser maka hasil yang akan seperti ini.
- Bagian paling atas merupakan bagian header, yang akan berisi judul dari
website
- Bagian tengah dibagi menjadi dua bagian, yakni: bagian kiri untuk
kumpulan link dan bagian kanan untuk tempat untuk memposting.
- Terakhir, bagian paling bawah merupakan bagian footer yang berisi
copyright dari website itu sendiri.
Dengan demikian, proses pembuatan template telah selesai dilakukan. Proses
selanjutnya adalah membuat satu file baru lagi dengan format .html yang masih
menggunakan notepad++
<!DOCTYPE html>
<html>
<head>
<title> Template Website </title>
<link rel="stylesheet"
href="style.css" type="text/css"> //perhatikan pada tag
href, pada tag href dituliskan nama file dari template desain yang dibuat. Sedangkan
tag type menunjukkan format dari desain template yang dibuat
</head>
<body>
<div id="box">
<div
id="header">
<div
id="judul">
<p
align="center"> <font face="Showcard Gothic"
color="red" size="30"> <marquee
behavior="scroll"> <b> IRREPLACEABLE CLASS </marquee> </b>
</font> </p>
<p
align="center"> <font face="Comic Sans MS"
color="red" size "20"> <i> Togetherness Never
Die!!! <i> </font> </p>
</div>
</div>
//merupakan isi dari bagian header, sehingga tulisan yang akan tampil di
bagian header adalah IRREPLACEABLE CLASS dengan tulisan yang berjalan dari
kanan ke kiri dengan menggunakan tag <marquee
behavior="scroll">. Untuk penjelasan tag lainnya, silahkan cek di
postingan sebelumnya
<div id="container">
<div
id="kiri">
<ul
type="disc">
<li> <a href="#">
HOME </a> </li>
<li> <a href="#">
Videos </a> </li>
<li> <a href="#">
E-Book </a> </li>
<li> <a href="#">
Photos </a> </li>
<li> <a href="#">
CONTACT </a> </li>
<ul type="disc">
<li> <a
href="http://www.facebook.com"> Facebook </a> </li>
<li>
<a href="http://www.twitter.com"> Twitter </a>
</li>
<li>
<a href="https://plus.google.com/"> Google+ </a> </li>
<li>
<a href="mailto: andinurhayati991@gmail.com"> Gmail </a>
</li>
</ul>
<li>
<a href="#"> ABOUT US </a> </li>
</ul>
</div>
//merupakan isi dari bagian kiri dari website, yakni berisi kumpulan
link dengan menggunakan tag <a href>. Untuk lebih jelasnya, silahkan cek
di postingan sebelumnya tentang Link pada HTML
<div id="kanan">
<font
face="Maiandra GD" size="5" color="red"> <p
align="center"> <b> IDENTITAS DIRI </b> </font>
</p>
<table
border="2" align="center">
<tr>
<td>
NIM </td>
<td>
1504411203 </td>
</tr>
<tr>
<td>
Nama </td>
<td>
Andi Nurhayati </td>
</tr>
<tr>
<td>
Semester/Kelas </td>
<td>
III/ F </td>
</tr>
<tr>
<td>
Dosen </td>
<td>
Syafriadi, S.Kom.,M.Kom </td>
</tr>
</table>
</div>
//merupakan isi dari bagian kanan di website, yakni berisi tabel
identitas diri. Pembuatan tabel dilakukan dengan menggunakan tag <table>
dengan atribut border dan align yang berfungsi sebagai tebal garis dan tata
letak tabelnya. Singkatnya, untuk tabel diperlukan tag <tr> dan tag
<td>. Tag <tr> digunakan membuat baris dari tabel sedangkan tag
<td> digunakan untuk membuat isi dari baris dari tabel.
<div class="clear"> </div>
</div>
<div id="footer">
<div
id="copyright"> Copyright@2016 by Andi Nurhayati A Arifin
</div> </div>
//isi dari footer yang berisi copyright, dalam artian nama dari pembuat
website itu sendiri.
</div>
</body>
</html>
Setelah script selesai diketik, simpan file dengan nama index.html.
Sehingga apabila dijalankan dengan menggunakan web browser, hasil yang
akan tampil seperti ini.
Gimana, mudah kan?
Demikian tutorial membuat template sederhana dengan menggunakan format
CSS. Semoga bermanfaat J
