Seperti yang kita ketahui, setiap website yang ada di internet memiliki desain yang berbeda, karna dibalik berdiri nya website ada seorang desainer yang membuat tampilan dari website tersebut menjadi terlihat menarik. Dan pada pembuatan nya terbilang tidak mudah, untuk membuat nya kita harus tau tentang kode yang nanti nya akan kita gunakan untuk mendesain website, seperti HTML dan CSS. Saya akan menjelaskan sedikit tentang kedua kode tersebut.
Hypertext Markup Language (HTML)
HTML merupakan sebuah kode yang sering digunakan pada pembuatan website. Bisa dibilang HTML adalah kode inti pada desain web, tapi jika kita membuat nya tanpa CSS tampilan nya akan terasa biasa saja. Kode pembungkus HTML adalah <HTML> dengan penutupnya </HTML>. Contoh kode HTML seperti berikut.
<!DOCTYPE HTML>
<html>
<head style="background-color: black; color: white;">
<title>Selamat Datang HTML</title>
</head>
<body>
<p>Halo dunia!</p>
</body>
</html>
Untuk kode di atas, kalo kita gunakan maka tampilan akan terlihat biasa dengan tulisan "Halo dunia!"
Cascading Style Sheet (CSS)
CSS adalah bahasa pemrograman website yang digunakan untuk mengatur struktur website agar layout terlihat lebih rapih. Dengan CSS kita bisa mengatur Layout, ukuran, background dan lain lain. Pembungkus CSS berbeda dengan HTML, untuk CSS menggunakan <style> untuk memulai nya. Nah bisa dibilang CSS ini adalah tekstur dari website, misal saja ketika kita membuat sebuah menu navigasi, kalo kita cuma pake HTML tampilan nya akan kacau, tata letak yang tidak rapih dan background yang tidak ada. Jadi, untuk pembuatan website, kode CSS ini hukum nya wajib ada di dalam codingan kita. Contoh kode CSS adalah seperti berikut.
<style type='text/css'>
header, section, footer, aside, nav, article, figure, figcaption {
display: block;}
body {color: #666;background-color: #f9f8f6;background-image: url("images/ukon.png");background-position: center;font-family: arial;line-height: 1.4em;margin: 0px;}
</style>
Sudah mengerti tentang kode kode tersbut? kalau belum silahkan googling untuk mencari tahu penjelasain detail tentang HTML dan CSS. Oke langsung saja ke tutrial pembuatan website sederhana :
MEMBUAT SKETSA WEBSITE :
Nah ini adalah langkah awal untuk membuat sebuah desain website, pertama-tama kita harus membuat sketsa nya terlebih dahulu. Kita harus menentukan posisi posisi tata letak nya terlebih dahulu agar mempermudah saat pembuatan nya. Kita harus menentukan Header, Menu Navigasi, Body, Sidebar dan Footer nya terlebih dahulu. Mau kita letakan dimana mereka, itu harus kita tentukan sebelum proses pembuatan nya. Kita bisa menggunakan Software desain grafis seperti photoshop, corel dan lainnya untuk membuat sebuah sketsa website. Untuk struktur umum dari website adalah seperti gambar di bawah ini.
Tutorial kali ini kita akan membuatnya seperti pada gambar diatas, tapi kalian bisa mengubah layout nya sendiri sesuai dengan keinginan kalian.
MEMBUAT STRUKTUR DENGAN HTML :
Sebelum nya kita harus membuat dokumen baru yang isinya adalah HTML, ini berfungsi untuk membungkus banyak elemen yang nanti nya akan kita masukan ke dalam pembungkus tersebut. Sebelum nya, buat lah dokumen baru dengan format HTML, untuk membuat nya kita bisa menggunakan Notepad atau aplikasi lain seperti Sublime. Kemudian copy kode berikut kedalam dokumen baru tersebut.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Membuat Web Sederhana</title>
<style type="text/css">
<!-- ISI CSS -->
</style>
</head>
<body>
<div class="wrapper">
</div>
</body>
</html>
Itu merupakan kode HTML umum yang sering digunakan, ketika kita save lalu membukanya maka tampilannya akan kosong, yang perlu kita lakukan adalah menambah elemen lain pada kode tersebut agar berisi. Lihat kode <style type="text/css">, seperti yang tadi saya bilang itu adalah pembungkus dari kode CSS yang nantinya akan kita masukan ke codingan kita. Selanjutnya kita akan melengkapi isi website dengan elemen lain nya.
MEMBUAT HEADER DAN MENU NAVIGASI :
Header sendiri berfungsi untuk menampilkan title dari website kita, dan kita juga bisa menambahkan deskripsi website kita pada header. Sedangkan menu navigasi berfungsi untuk mempermudah pengunjung untuk langsung masuk ke laman tertentu seperti Kontak, Tentang Website, Disclaimer dan lain lain. Sekarang copy kode di bawah, lalu pastekan tepat dibawah kode <div class="wrapper"> .
<header>
</header>
<nav>
<ul>
<li><a class="current" href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
Kenapa kode nav nya berada di bawah? karena kalo kita letakkan di dalam <header> maka nantinya logo website yang akan kita gunakan tertindih oleh menu navigasi nya, oleh sebab itu saya letakan di bawah </header>. Lihat kode <li> yang di bungkus <ul>, itu berguna untuk menyusun menu navigasi nya agar terlihat rapih.
MEMBUAT ELEMEN ARTICLE :
Dengan kode dibawah nantinya artikel akan tersusun agar tidak berantakan. Elemen artikel ini dibungkus dengan kode <section class="content">, isi artikel nya ada di dalam pembungkus tersebut. Sekarang copy kode di bawah, kemudian letakan di bawah </nav>.
<section class="content">
<article>
<figure>
<img src="images/html.png" alt="HTML" />
<figcaption>Hyper Text Markup Language (HTML)</figcaption>
</figure>
<hgroup>
<h2>HTML</h2>
<h3>Hyper Text Markup Language</h3>
</hgroup>
<p>Bahasa markup/formatting dari desain web. Bukan untuk membuat penampilan yang sesuai dengan desain. Jadi sebaiknya jangan dulu memikirkan bagaimana agar markup HTML yang kita buat sesuai dengan desain, karena ini adalah tugas CSS untuk membuat markup HTML menjadi sesuai dengan desain website. <a href="/html.html">Baca Selengkapnya....</a></p>
</article>
<article>
<figure>
<img src="images/css.png" alt="CSS" />
<figcaption>Cascading Style Sheet (CSS)</figcaption>
</figure>
<hgroup>
<h2>CSS</h2>
<h3>Cascading Style Sheet</h3>
</hgroup>
<p>Aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas file. <a href="/css.html">Baca Selengkapnya....</a></article>
</section>
Lihat disana terdapat banyak kode, saya akan jelaskan sedikit mengenai beberapanya. kode <figcaption> berfungsi untuk memberi keterangan pada gambar artikel, coba lihat teks di dalam kode tersebut, itu merupakan keterangan nya. <figure> berfungsi untuk menyisipkan gambar kedalam artikel, silahkan lihat dibawah kode tersebut ada kode <img src="images/html.png" alt="HTML"/>, itu merupakan kode pemanggil gambar nya, source nya bisa diubah sesuai direktori dari gambar nya. untuk <hgroup> itu fungsinya mengelompokan kode elemen <h1> sampai <h6> dan kode <h> itu adalah heading teks, semakin kecil (h1) maka ukuran teks akan semakin besar.
MEMBUAT ELEMEN ASIDE / SIDEBAR :
Elemen <aside> ini nantinya akan di isi untuk link ke artikel lain, dan biasanya letak nya berada di kiri atau kanan, umum nya berada di kanan, atau bisa juga berada di kedua sisi yaitu kanan dan kiri. Sekarang copy kode di bawah kemudian letakkan dibawah </section>.
<div class="aside">
<aside> <section class="popular-recipes"> <h2>Artikel Lainnya:</h2> <a href="">Blogger</a> <a href="">Javascript</a> <a href="">Wordpress</a> <a href="">PHP</a> </section> <section class="contact-details"> <h2>Kontak</h2> <p><a href="http://iamukon.id/">Muhammad Syukron</a> <a href="instagram.com/iam.ukon">Instagram</a> </section> </aside> </div>
MEMBUAT FOOTER :
Langkah selanjutnya adalah membuat footer, tapi disini saya hanya membuat footer credit, footer credit berisi nama website dan pembuat desain website nya. Elemen ini di awali oleh kode <footer> kemudian didalam nya adalah isi teks. Sekarang masukan kode di bawah tepat diatas </div> nya <div class="aside"> .
<footer>
COPYRIGHT © 2017 <a href="http://iamukon.id/">I AM UKON</a> | Redesign By MUHAMMAD SYUKRON | Original : Dimas Setya Aji
</footer>
Sekarang silahkan di save, dan lihat hasilnya. Seperti yang pertama saya bilang, bahwa kode HTML tidak akan cantik jika tidak di temani oleh CSS. Langkah selanjutnya adalah memasukan kode CSS kedalam codingan.
MENAMBAH KODE CSS :
Ini adalah langkah terakhir, silahkan copy kode CSS di bawah kemudian letakkan di bawah kode <style type="text/css">.
header, section, footer, aside, nav, article, figure, figcaption {
display: block;}
body {color: #666;background-color: #f9f8f6;background-image: url("images/geometry.png");background-position: center;font-family: arial;line-height: 1.4em;margin: 0px;}
.wrapper {width: 70%;margin: 20px auto;border: 2px solid #eee;background-color: #ffffff;box-shadow: 0 0 0 1px #3333}
header {height: 100px;background: url(images/header.png) top no-repeat;background-size:40%;}
h1 {
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0px;}
nav, footer {
clear: both; color: #ffffff;
background-color: #555;
height: 30px;}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;}
nav li {
display: inline;
margin-right: 40px;}
nav li a {
color: #ffffff;}
nav li a:hover, nav li a.current {
color: #ddd;}
section.content {
float: left;
width: 680px;
border-right: 1px solid #eeeeee;padding-right:10px }
article {
clear: both;
overflow: auto;
width: 100%;}
hgroup {
margin-top: 40px;}
figure {
float: left;
width: 250px;
height: auto;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee}
figcaption {
font-size: 90%;
text-align: left;}
aside {
width: 230px;
float: left;
padding: 0px 0px 0px 20px;}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;}
aside section a:hover {
color: #985d6a;
background-color: #efefef;}
a {
color: #de6581;
text-decoration: none;}
h1, h2, h3 {
font-weight: normal;}
h2 {
margin: 10px 0px 5px 0px; padding: 0px;}
h3
{ margin: 0px 0px 10px 0px; color: #de6581;}
aside h2 {
padding: 10px 4px 10px 20px; color: #fff;background:#555;}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;}
Save codingan nya, sebenernya ini belum selesai, kalian harus menambah gambar yang nantinya akan masuk ke dalam website jika dibuka. Lihat kode ini di atas url("images/geometry.png"); . itu adalah pemanggil gambar nya. Untuk membuat nya, silahkan buat folder baru di folder yang sama dengan file codingan nya ( Misalkan file codingan berada di folder folder1/index.html , maka untuk folder gambar adalah folder1/images ). Kemudian masukkan file gambar ke dalam folder images agar gambar nya tampil saat kita buka file codingan. Sampai disini sudah selesai, dan kode full jadi nya adalah seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Membuat Web Sederhana </title>
<style type="text/css">
/*
DESIGN INFO
Date : 02 Januari 2017
Updated by : Muhammad Syukron
*/
header, section, footer, aside, nav, article, figure, figcaption {
display: block;}
body {color: #666;background-color: #f9f8f6;background-image: url("images/geometry.png");background-position: center;font-family: arial;line-height: 1.4em;margin: 0px;}
.wrapper {width: 70%;margin: 20px auto;border: 2px solid #eee;background-color: #ffffff;box-shadow: 0 0 0 1px #3333}
header {height: 100px;background: url(images/header.png) top no-repeat;background-size:40%;}
h1 {
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0px;}
nav, footer {
clear: both; color: #ffffff;
background-color: #555;
height: 30px;}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;}
nav li {
display: inline;
margin-right: 40px;}
nav li a {
color: #ffffff;}
nav li a:hover, nav li a.current {
color: #ddd;}
section.content {
float: left;
width: 680px;
border-right: 1px solid #eeeeee;padding-right:10px }
article {
clear: both;
overflow: auto;
width: 100%;}
hgroup {
margin-top: 40px;}
figure {
float: left;
width: 250px;
height: auto;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee}
figcaption {
font-size: 90%;
text-align: left;}
aside {
width: 230px;
float: left;
padding: 0px 0px 0px 20px;}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;}
aside section a:hover {
color: #985d6a;
background-color: #efefef;}
a {
color: #de6581;
text-decoration: none;}
h1, h2, h3 {
font-weight: normal;}
h2 {
margin: 10px 0px 5px 0px; padding: 0px;}
h3
{ margin: 0px 0px 10px 0px; color: #de6581;}
aside h2 {
padding: 10px 4px 10px 20px; color: #fff;background:#555;}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;}
</style>
</head>
<body>
<div class="wrapper">
<header>
</header>
<nav>
<ul>
<li><a class="current" href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
<section class="content">
<article>
<figure>
<img src="images/html.png" alt="HTML" />
<figcaption>Hyper Text Markup Language (HTML)</figcaption>
</figure>
<hgroup>
<h2>HTML</h2>
<h3>Hyper Text Markup Language</h3>
</hgroup>
<p>Contoh isi teks read more. Ini adalah deskripsi yang akan tampil di samping gambar pada website yang akan kalian buat dengan menggunakan kode ini <a href="/html.html">Baca Selengkapnya....</a></p>
</article>
<article>
<figure>
<img src="images/css.png" alt="CSS" />
<figcaption>Cascading Style Sheet (CSS)</figcaption>
</figure>
<hgroup>
<h2>CSS</h2>
<h3>Cascading Style Sheet</h3>
</hgroup>
<p>Contoh isi teks read more. Ini adalah deskripsi yang akan tampil di samping gambar pada website yang akan kalian buat dengan menggunakan kode ini . <a href="/css.html">Baca Selengkapnya....</a></article>
</section>
<div class="aside">
<aside> <section class="popular-recipes"> <h2>Artikel Lainnya:</h2> <a href="">Blogger</a> <a href="">Javascript</a> <a href="">Wordpress</a> <a href="">PHP</a> </section> <section class="contact-details"> <h2>Kontak</h2> <p><a href="http://iamukon.id/">Muhammad Syukron</a> <a href="instagram.com/iam.ukon">Instagram</a> </section> </aside>
<footer>
COPYRIGHT © 2017 <a href="http://iamukon.id/">I AM UKON</a> | Redesign By MUHAMMAD SYUKRON | Original : Dimas Setya Aji
</footer>
</div>
</div>
</body>
</html>
EmoticonEmoticon