Ketika kita mengenal sedikit HTML, CSS ataupun JavaSccript, Nah pada tulisan kali ini kita merangkai nya menjadi sebuah template website dan bisa juga di terapkan di blog, yang natinya siap kita kita gunakan sebagai prototipe seluruh halaman web kita.
Tentunya dengan sebuah template website kita bisa memisahkan desain dan konten halaman web kita. Apapun isi halaman web kita akan tampak rapi dan seragam, mengikuti template yang ada. dan ketika apapun isi halaman web kita secara konsisten halaman web kita menjadi rapi dan seragam mengikuti jenis template yang kita buat,
kita juga bisa meningkatkan teknologi bagi website kita, misalnya mengerate kontent web melalui pemograman server side dan mengapplikasikan database.
Teknik pembuatan template ini kita bahas secara anual yang kita tujukan agar dapat memahami proses penyusunanya diantara lain :
#Struktur dan layout template website
Pada dasarnya kita menyusun template website kita dan menyiapkan metadata di elemen head, menggunakan teknik sectioning di elemen body, menata layoutnya melalui CSS dan gambar, serta kita melengkapi fitur fitur utamanya menggunakan Javascript.
Sebagai pola dasar atau kerangka nya berikut struktur dokumen HTML untuk template website kita :
<!DOCTYPE html>Struktur HTML diatas akan kita lengkapi dan di layout secara bertahap di kode selanjutnya.
<html lang="id">
<head>
<!-- tag meta bernilai tetap disini -->
<!-- tag meta bernilai variable disini -->
<!-- tag link bernilai tetap disini -->
</head>
<body>
<header>
<!-- Logo, Nama website, tagline disini -->
<nav>
<!-- Menu utama disini -->
</nav>
</header>
<main role="main">
<h1>Judul Utama</h1>
<p>Paragraf Utama</p>
<article>
<h2>Judul Artikel</h2>
<p>isi artikel</p>
</article>
</main>
<aside>
<!-- konten terkait disini -->
</aside>
<footer>
<!-- isi footer disini -->
</footer>
<!-- tag script disini -->
</body>
</html>
# Menyiapkan Elemen Head di Template
Elemen head halaman halaman website kita secara keterangan struktur nya relatif sama. Nah perbedaanya hanya terletak pada beberapa nilai tag <meta> dan <link> yang akan bersifat fariable, Tergantung pada informasi yang terkandung di masing masing halaman website kita, potongan pola dasar elemen head template kita adalah sebagai berikut :
<!DOCTYPE html>Nah pada bagian yang ditandai "<!-- tag meta bernilai tetap disini-->" dan <!-- tag link bernilai tetap disini --> yaitu merupakan bagian yang selalu ada dan selalu sama isinya di setiap halaman website kita.
<html lang="id">
<head>
<!-- tag meta bernilai tetap disini -->
<!-- tag meta bernilai variable disini -->
<!-- tag link bernilai tetap disini -->
</head>
Adapun bagian yang ditanda <!-- tag meta bernilai variable disini --> ada;ah bagian yang akan selalu berubah isinya menyesuaikan dengan halaman website yang akan dikandung nya.
Nah pengelompokan ini natinya akan mempermudahkan pengerjaan halaman website kita berguna dengan script website dinamis kan,
Nah untuk itu kita coba memasukan kode isi halaman utama elemen head untuk template kita, sehingga menjadi seperti ini :
<!DOCTYPE html>Penjelasanya :
<html lang="id">
<head>
<!-- tag meta bernilai tetap disini -->
<meta charset="utf-8">
<!-- tag meta bernilai variable disini -->
<title>Judul Halaman</title>
<meta name="description" content="deskripsi halaman kita.">
<meta name="keywords" content="keyword1, keyword2, dst">
<!-- tag link bernilai tetap disini -->
<link rel="shorcut" icon" href=favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon-png">
</head>
- Meta charset selalu ada dan ditempatkan di bagian atas dikarenakan sangant penting gunanya.
- Tag <title>, meta description dan meta keywords selalu beubah isinya mengikuti konten website kita.
- Beberapa tag <link> selalu ada dan di tempatkan dibagian akhir untuk merujuk file Favicon dan Apple Touch Icon.
# Sekarang kita menyiapkan elemen Body di template
Struktur elemen Body untuk template kita dapat dibuat menggunakan teknik sectioning, Maka kita sisipkan isi utama elemen body untuk template kita sesuai dengan pola yang telah kita buat diawal tadi kodenya :
<body>
<header>
<!-- Logo, Nama Website, dan tagline disini -->
<a href="#" title="Beranda Situsku">
<img src="logo.png" alt="websiteku">
</a>
<nav>
<!-- menu utama disini -->
<ul>
<li><a href="#">Menu pertama</a></li>
<li><a href="#">Menu Kedua</a></li>
<li><a href="#">Menu Ketiga</a></li>
</ul>
</nav>
</header>
<main role="main">
<h1>Judul Artikel</h1>
<p>Paragraf utama</p>
<article>
<h2>Judul Artikel</h2>
<p>Isi artikel<p>
</article>
</main>
<aside>
<!-- konten terkait disini -->
<ul>
<li><a href="#">Terkait satu</a></li>
<li><a href="#">Terkait dua</a></li>
<li><a href="#">Terkait tiga</a></li>
</ul>
</aside>
<footer>
<!-- isi footer disini -->
<p>© 2017 wavker.xyz</p>
</footer>
<!-- tag script disini -->
</body>
<html>
# Menata template dengan menggunakan CSS
Langkah dari hasil kode elemen body yang kita buat tadi menghasilkan bentuk sebagai berikut :
Terlihat kan tampilan konten belum tertata rapi, nah sekarang kita akan mendesain nya dengan menggunakan CSS, Tujuannya agar kontrol layout seluruh halaman website kita nantinya terpusat pada satu file CSS nya saja.
Buatlah sebuah file teks kosong dan simpan di folder proyek website kita dengan tema.css.
Untuk kita menerapkan aturan tema.css ke template kita edit file template dan kita sisipkan baris tag <link> baru di elemen head, tepatnya di bagian paling bawah sebelum penutup </head>.
<link href="tema.css" rel=stylesheet">Sekarang kita buat aturan CSS di file tema.css sebagai berikut :
body {Nah setelah itu langsung saja priview template dari kode diatas, dan pastinya website kita lebih rapi karena tampilanya diatur via file tema.css.
margin: 0;
color: #333;
background-color: #f2f2f2;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.44em;
}
a, a:visited {
color: #c00;
text-decoration: none;
}
a:hover, a:focus {
color: #f90;
}
header {
background-color: #ddd;
height: 50px;
}
nav {
float: right;
nav li {
display: inline;
}
nav li a {
border: 1px solid #fff;
background-color: #eee;
padding: 5px 10px;
}
nav li a:hover{
background-color: #fff;
}
main {
float: left;
background-color: #fff;
padding: 10px;
width: 60%;
}
article {
border: 1px solid #ddd;
padding: 10px;
}
aside {
background-color: #eee;
border: 1px solid #ddd;
float: right;
width: 30%;
padding: 10px;
}
footer {
clear: both;
border-top: 1px solid #ccc;
background: #eee;
}
Selanjutnya untuk memberikan jarak, maka kita gunakan teknik yang kita sebut container. Dengan teknik ini nantinya bermanfaat saat membuat halaman website yang mobile friendly, sekrang maka kita terapkan, buat kode baru di file tema.css :
.batas {Selanjut nya mari kita gunakan class batas untuk menata elemen yang bersinggungan langsung dengan tepi jendela browser, kita tempatkan tiga tag pembuka <div class="batas"> dan tag penutup </div> di bagian bagian berikut :
padding: 0 10px;
margin: auto;
}
<header>
<div class="batas">
...
</div>
</header>
<div class="batas">
<main role="main">
...
</main>
<aside>
...
</aside>
</div>
<footer>
<div class="batas">
...
</div>
</footer>
Kini elemen header, main, aside dan footer sudah memiliki jarak 10 piksel dari tepi kiri dan tepi kanan jendela browser, efek efek box di tiap elemen juga menjadi jelas nantinya,
ketika logo kita masih kurang bentuknya dan agar logo kita rata dengan menu menu yang ada disisi kanan maka buatlah class baru, ubah nilai property padding-top sesuai kebutuhan agan untuk mendapatkan posisi yang pas :
.logo {
padding-top: 10px;
float: left;
}
Selanjutnya tempatkan gambar logo di template ke dalam class logo, sehingga menjdi berikut :
<!-- Logo, Nama Website, dan tagline disini -->Contoh lain kita juga bisa mengajukan elemen footer agar selalu menempel di tepi bawah jendela browser dan tidak menempel pada elemen lain di atas nya, Teknik ini kita sebut dengan sticky footer, mari kita coba tambahkan selector html dan aturan di css, selain itu tambahan pada selector body dan footer yang sudah ada :
<div class="logo">
<a href="#" title="beranda situsku">
<img src="logo.png" alt="situsku">
</a>
<//div>
html {Agan bisa mengganti "50px" ataupun widht sesuai kebutuhan agan.
position: relative;
min-height: 100%;
}
body {
...
...
margin-bottom: 50px;
}
footer {
...
...
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
}
Keterangan :
- sebagai catatan, kita juga bisa kok menambahkan aturan aturan lain kapanpun di file tema.css sesuai kebutuhan agan.
- Dengan kita mempelajari teknik manual membuat template agar agan bisa memahami proses dan bahkan agan bisa membuat tampilan website baru dengan gaya agan sendiri.
0 komentar