Pada dasarnya, asal agan, udah bisa
browsing dan mengetik, maka agan udah punya modal untuk membuat website
sendiri. Masih bingung membedakan istilah website dan blog? Nah, pada dasarnya,
semua yang kamu lihat di internet adalah website.
Namun demikian, website
tersebut memiliki fungsi yang berbeda-beda dan memiliki sebutan khusus
tergantung pada fungsinya. Jenis website yang cukup ngetop adalah blog, social
media dan toko online. Jadi bisa dikatakan bahwa blog adalah salah satu
jenis website yang memiliki fungsi sebagai diary atau buku harian bagi
pemiliknya, makanya biasanya tampilan artikel blog biasanya diurutkan
berdasarkan tanggal dimulai dari yang paling baru. sebenarnya pembuatan website
bisa agak sedikit merepotkan, tergantung cara saudara melakukannya. Untuk
membuat sebuah website sebenarnya bisa menggunakan domain TLD apa saja, tapi
kali ini saya akan membahasnya khusus dengan domain .com, karena domain ini
memberikan beberapa keuntungan dalam penggunaannya. Kalau saudara ingin membuat
sebuah website, maka saudara tentunya harus paham sedikit cara melakukan
pemrograman. Bahasa yang minimal saudara ketahui adalah HTML
5 Langkah Membuat Website
Sederhana
Langkah 1: Membuat Sketsa
Desain halaman web
Kita akan memulai membuat
web dengan mempersiapakan sketsa halaman web dulu, untuk membuat sketsa halaman
web kita bisa menggunakan kertas dulu baru setelah itu kita bisa memperhalusnya
dengan photoshop. Berikut adalah sketsa halaman web yang kita akan gunakan
sebagai latihan.
Langkah 2: Menentukan Konsep
membuat website
Kita akan menggunakan
HTML5, teknologi ini memperkenalkan beberapa elemen baru yang memungkinkan kita
untuk membagi bagian dari halaman. Nama-nama elemen ini sesuai dengan jenis
konten yang berada didalamnya.
<div class="wrapper">
<header>
<h1>Warung
Tegal</h1>
<nav>
<!--
nav content here -->
</nav>
</header>
<section class="courses">
<!--
section content here -->
</section>
<aside>
<!--
aside content here -->
</aside>
<footer>
<!--
footer content here -->
</footer>
</div><!--
.wrapper -->
Contoh pada kali ini yaitu
membuat web masakan yang dibangun menggunakan elemen HTML5 untuk membuat
struktur halaman (bukan sekedar pengelompokan menggunakan elemen
<div>). Sesuai dengan sketsa
halaman web diatas, Header dan footer bertempat di dalam elemen <header> dan <footer>. Materi masakan dikelompokkan bersama
di dalam elemen <section> yang memiliki atribut class yang
nilainya courses (untuk membedakannya dari elemen <section> yang lain pada halaman). Sidebar
berada di dalam sebuah elemen <aside>.
Setiap materi masakan
berada di dalam sebuah elemen
<article>, dan menggunakan elemen <figure> dan <figcaption> untuk menyisipkan gambar. Judul pada
masing-masing materi masakan memiliki sub-judul, jadi judul-judul ini
dikelompokkan dalam sebuah elemen <hgroup>.
Di sidebar, terdapat resep dan rincian kontak yang ditempatkan terpisah
di dalam elemen <section>.
Langkah 3: Membuat Skrip
Struktur Umum HTML
Pembuatan skrip struktur
umum HTML memudahkan kita untuk memulai dalam membuat website,
Berikut Skrip Struktur
Umum HTML.
<!DOCTYPE html>
<html>
<head>
<title>Web Warung
Tegal</title>
<style type="text/css">
</style
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
</div><!--
.wrapper -->
</body>
</html>
Skrip HTML diatas terdapat
baris skrip
<style
type="text/css">, didalam skrip ini kita
nantinya akan menaruh skrip CSS untuk mengatur layout halaman web. Sedangkan
pada skrip <title>Web
Warung Tegal</title> berfungsi
untuk memberikan title halaman web. Dibawah tag <style> kita memberikan skrip HTML5SHIV yang berguna agar website kita
berjalan dengan baik dalam browser IE versi 9 kebawah.
Skrip
<div
class="wrapper"> berfungsi untuk membungkus elemen
halaman web, ” bungkusan ” ini kita beri class wrapper,
dengan class ini kita bisa mengatur semua elemen yang berada didalamnya dengan
skrip CSS.
Kesimpulan dari skrip
diatas adalah kita telah memberikan judul halaman web dan menyediakan tempat
untuk skrip CSS.
Langkah 4: Membuat Elemen
header dan nav HTML5
Dalam contoh ini, Elemen
<header> digunakan untuk tempat dari nama
website dan navigasi utama. Berikut skrip header, letakkan persis dibawah <div
class="wrapper">.
<header>
<h1>Warung
Tegal</h1>
<nav>
<ul>
<li><a href="" class="current">beranda</a></li>
<li><a href="">daftar
masakan</a></li>
<li><a href="">katering</a></li>
<li><a href="">tentang</a></li>
<li><a href="">kontak</a></li>
</ul>
</nav>
</header>
Kita menggunakan elemen
<nav> untuk membuat navigasi . Elemen
ini bisa digunakan di berbagai keperluan dalam pembuatan navigasi, baik
navigasi yang berada tepat dibawah header, atau navigasi yang terletak pada
footer.
Dalam skrip diatas kita
menentukan judul halaman yang telah kita letakkan pada elemen
<h1> dan memberikan daftar link navigasi
sebagai alat navigasi untuk mempermudah dalam mengakses halaman web.
Langkah 5: Membuat Elemen
article HTML5
Elemen
<article> bertindak sebagai wadah untuk setiap
bagian dari halaman yang dapat berdiri sendiri dan berpotensi Sindikasi.
Bisa berupa artikel atau
tulisan blog, komentar atau posting forum, atau lainnya. Jika halaman terdiri
dari beberapa artikel, maka kita akan meletakkan masing-masing artikel dalam
elemen
<article>.
Berikut skripnya, dan kita bungkus skrip ini dengan elemen <section>.
<section class="courses">
<article>
<figure>
<img src="images/soto.jpg" alt="soto" />
<figcaption>Soto
Indonesia</figcaption>
</figure>
<hgroup>
<h2>Soto
Ayam</h2>
<h3>Makanan
Berkuah</h3>
</hgroup>
<p>Soto ayam adalah makanan khas
Indonesia yang berupa
sejenis sup
ayam dengan kuah yang berwarna kekuningan.</p>
</article>
<article>
<figure>
<img src="images/pecel.jpg" alt="pecel" />
<figcaption>Pecel
Indonesia</figcaption>
</figure>
<hgroup>
<h2>Masakan
Pecel</h2>
<h3>Makanan dengan
Bumbu Kacang</h3>
</hgroup>
<p>Pecel adalah makanan yang
menggunakan bumbu sambal
kacang
sebagai bahan utamanya yang dicampur dengan aneka jenis sayuran.</p>
</article>
</section>
Letakkan skrip diatas
tepat dibawah skrip header yang sudah kita buat sebelumnya. Elemen
<section> digunakan untuk mengelompokkan elemen
konten yang terkait , dan biasanya setiap bagian akan memiliki judul
tersendiri.
Elemen
<figure> digunakan untuk menyisipkan gambar
sedangkan elemen <figcaption> digunakan untuk memberi keterangan
dalam gambar tersebut. Sedangkan tujuan dari elemen <hgroup> adalah mengelompokkan satu atau lebih
elemen <h1> sampai <h6> sehingga mereka diperlakukan sebagai
satu judul tunggal.
Kesimpulannya dalam skrip
diatas kita membuat artikel masakan dengan memberinya judul, gambar beserta
penjelasan.
Demikianlah penjelasan
dari saya, semoga dapat bermanfaat buat kalian, selamat mencoba.