Desain Web HTML | Membuat Website Minimalis dan Sederhana

Last Updated on August 5, 2019 by

Cara membuat halaman pada desain web HTML sederhana sebenarnya cukup mudah. Hal tersebut disebabkan karena perangkat pembuat website mudah ditemukan di internet dan rata-rata program yang dibutuhkan itu juga tersedia gratis. Berikut ini, ada beberapa perangkat yang Anda butuhkan jika ingin membuat halaman website sederhana.

Notepad, atau Anda juga bisa menggunakan program notepad lain yaitu notepad ++ selain notepad bawaan Windows. Pada notepad ++ tersebut menyediakan fitur yang lebih baik daripada notepad bawaan Windows.
Browser, dalam hal ini berguna sebagai program penampil halaman website. Anda bisa menggunakan Internet Explorer ataupun browser dari Google Chrome.

Daftar Isi

Panduan Membuat Desain Web HTML Sederhana

Setelah mempersiapkan dua jenis perangkat yang dibutuhkan untuk membuat sebuah halaman desain web HTML sederhana, berikut ini ada contoh panduan dalam membuat halaman website sederhana tersebut.

Langkah pertama yang perlu dilakukan adalah membuka program notepad, caranya dengan mengklik tombol Windows.
Kemudian, klik tulisan All Program
Selanjutnya, Anda akan melihat berbagai folder yang muncul, kemudian pilih folder dengan nama Accessories
Lalu, klik folder Accessories itu dan selanjutnya akan muncul berbagai program, dan Anda tinggal klik notepad untuk membukanya.
Setelah program notepad terbuka, lanjutkan dengan mengetik skrip di bawah ini, atau agar lebih cepat, langsung saja salin dan tempel (copy paste) pada notepad Anda.

<html>

<head>

<title>

Restoran Enak dan Murah

</title>

</head>

<body>

<h1>Restoran Nikmat Harga Hemat Di Kantong</h1>

<p>Restoran ini menyajikan bermacam-macam menu, mulai dari menu tradisional yang berasal dari berbagai daerah di Indonesia hingga menu internasional. Tentunya semua menu yang tersaji di restoran ini sudah diakui kualitasnya, sehingga membuat restoran ini setiap hari selalu ramai pengunjung.<p>

<h2>Menu Tradisional</h2>

<p>Menu tradisional yang tersaji dalam restoran ini, kebanyakan berasal dari Jawa, Padang, Manado, dan Bali. Semua jenis menu tradisional tersebut sangat nikmat dan kaya rempah khas makanan Indonesia.</p>

<h2> Menu Internasional</h2>

<p>Menu internasional di restoran ini juga bermacam-macam jenisnya, mulai dari menu Italia, China, Prancis, Vietnam dan lain sebagainya. Semua menu tersebut juga terjamin kelezatannya, sebab selain terbuat dari bahan-bahan pilihan juga diolah oleh koki internasional.</p>

</body>

</html>

Setelah Anda mengetik skrip di atas, maka lanjutkan dengan menyimpannya, caranya dengan mengklik file dan save.
Selanjutnya, pada saat muncul halaman save, ketikkan nama file, misal seperti “restoran.html” atau terserah Anda, namun pastikan bahwa file tersebut harus diakhiri dengan .html.
Kemudian, kolom pada bagian bawah filename akan terdapat kolom Save as Type dan Anda harus memilih All Files.
Selanjutnya, klik “Save”.

Setelah file html yang Anda buat tersebut sudah disimpan, maka lanjutkan dengan membuka file tersebut, caranya dengan mengklik dua kali. Kemudian, akan ada browser yang menampilkan halaman website yang menggunakan desain web HTML yang telah Anda buat tadi.

Cara Membuat Website Sederhana Menggunakan Desain Web HTML

Pada panduan membuat website sederhana menggunakan desain web HTML ini, jenis HTML yang digunakan adalah versi 5 dengan sedikit penggunaan CSS versi 3. Selain itu seperti biasa, Anda juga perlu menggunakan browser misalnya seperti Google Chrome dan notepad ++ untuk tempat menulis skrip.

Buat Sketsa Desain Halaman Web

Langkah pertama ini membuat Anda harus mempersiapkan sketsa halaman web terlebih dahulu. Anda bisa membuat sketsa halaman web diatas kertas, kemudian Anda bisa memperhalusnya menggunakan photoshop.

Sketsa dari desain halaman web akan bisa memberikan Anda gambaran tentang layout dari website Anda nanti. Selain itu, Anda juga akan lebih mudah bila ingin melakukan pengaturan letak dari konten website Anda. Adanya sketsa juga akan bisa membuat Anda lebih mudah untuk mempersiapkan skrip HTML yang dibutuhkan.

Tentukan Konsep Membuat Website

Seperti yang sudah disebutkan sebelumnya, kali ini versi HTML yang digunakan dalam panduan membuat website ini adalah versi HTML 5 yang telah dilengkapi dengan sejumlah elemen baru sehingga memungkinkan Anda untuk membagi halaman website, contohnya seperti berikut ini:

<h1>Restoran</h1>

<nav>

<!– nav content here –>

</nav>

</header>

<!– section content here 🡪

</section>

<aside>

<!– aside content here –>

</aside>

<!– footer content here –>

</footer>

</div><!– .wrapper –>

Kali ini contoh yang dipakai adalah web tentang tempat makan yang dibentuk menggunakan elemen HTML5 untuk membuat struktur halaman (bukan hanya sekedar pengelompokan yang menggunakan elemen <div>).

Buat Skrip Struktur Umum HTML

Agar Anda lebih mudah untuk mulai membuat website sebaiknya Anda terlebih dahulu mempelajari cara membuat skrip struktur umum HTML. Contohnya seperti berikut ini

<!DOCTYPE html>

<html>

<head>

<title>Web Restoran</title>

</style>

<!–[if lt IE 9]>

<![endif]–>

</head>

<body>

</div><!– .wrapper –>

</body>

</html>

Pada contoh skrip HTML di atas Anda bisa melihat bahwa terdapat baris skrip dalam format penulisan <style type=”text/css”>, dalam skrip tersebut Anda nantinya akan bisa menuliskan skrip CSS yang fungsinya untuk mengatur tampilan layout pada halaman website. Sementara itu, pada skrip <title>Web Restoran</title> berguna untuk bisa memberikan judul pada halaman sebuah website. Sedangkan, pada bagian bawah tag <style> Anda memberikan skrip HTML5SHIV yang fungsinya untuk membuat website Anda tersebut bisa lebih lancar berjalan ketika diakses menggunakan browser IE versi 9 ke bawah.

Selain itu, skrip <div class=”wrapper”> memiliki fungsi agar bisa membungkus elemen dari halaman website tersebut, elemen “pembungkus” tersebut diberi class wrapper dengan tujuan agar Anda dapat mengatur semua elemen yang ada dalam skrip CSS.

Buat Elemen Header dan Nav HTML5

Contoh dibawah ini menggunakan elemen <header> sebagai tempat dari nama website serta juga untuk navigasi utama. Di bawah ini skrip header, letakkan persis di bawah <div class=”wrapper”>.

<h1>Restoran</h1>

<nav>

<ul>

<li><a href=”” class=”current”>beranda</a></li>

<li><a href=””>daftar menu</a></li>

<li><a href=””>pesanan</a></li>

<li><a href=””>tentang restoran</a></li>

<li><a href=””>customer service</a></li>

</ul>

</nav>

</header>

Berdasarkan contoh skrip elemen header diatas, maka bisa dilihat bahwa penggunaan elemen <nav> berfungsi sebagai navigasi. Elemen ini dapat digunakan untuk bermacam-macam kebutuhan pembuatan navigasi dalam sebuah website, baik itu navigasi yang diletakkan tepat di bawah header ataupun navigasi yang diletakkan pada bagian footer website.

Pada skrip header di atas juga dapat dilihat bahwa Anda dapat menentukan judul halaman yang telah Anda letakkan pada elemen <h1> serta memberikan daftar link navigasi sehingga pengunjung website Anda tersebut bisa lebih mudah ketika akan mengakses berbagai halaman yang tersedia pada website tersebut.

Buat Elemen Article HTML5

Fungsi dari elemen (article) merupakan wadah setiap bagian dari halaman yang bisa berdiri sendiri serta yang memiliki potensi sindikasi. Contoh konkretnya dapat berupa artikel ataupun tulisan blog, komentar dan juga dalam bentuk forum dan lain sebagainya.

Jika halaman pada website tersebut terdiri dari beberapa artikel, maka Anda bisa meletakkan masing-masing artikel tersebut dalam bentuk elemen <article>.

<figcaption>Nasi Goreng Spesial</figcaption>

</figure>

<h2>Nasi Goreng Spesial Seafood</h2>

<h3>Makanan Khas Indonesia</h3>

</hgroup>

<p>Nasi goreng merupakan salah satu makanan khas Indonesia yang digemari banyak orang, terbuat dari nasi putih, berbagai bahan pelengkap seperti daging ayam, telur, bakso, udang, dan bumbu rempah yang membuat makanan ini menjadi lezat</p>

</article>

</figure>

<h2>Masakan Gado Gado</h2>

<h3>Makanan dengan Bumbu Kacang</h3>

</hgroup>

<p>Gado Gado adalah makanan yang menggunakan bumbu kacang sebagai saus utamanya yang dicampur dengan aneka jenis sayuran, tahu, tempe dan kerupuk.</p>

</article>

</section>

Pada dasarnya, contoh skrip di atas merupakan skrip yang dapat diletakkan di bawah skrip header yang telah Anda buat sebelumnya. Elemen <section> berfungsi sebagai pengelompok dari elemen setiap konten yang memiliki keterkaitan serta biasanya setiap bagian tersebut memiliki judul masing-masing.

Elemen <figure> berfungsi untuk menyisipkan foto sementara itu elemen <figcaption> berfungsi sebagai pemberi keterangan dari foto yang disisipkan tersebut. Sementara itu, fungsi dari elemen <hgroup> untuk mengelompokkan satu elemen <h1> hingga <h6> Jadi intinya, skrip elemen pada contoh di atas merupakan cara Anda membuat artikel menu makanan secara lengkap mulai dari judul, gambar hingga penjelasan.

Buat Elemen Aside HTML5

Fungsi dari elemen <aside> merupakan wadah untuk konten yang memiliki keterkaitan dengan seluruh halaman. Misalnya saja, elemen ini dapat berisi link ke halaman situs web lain, daftar konten terbaru, kolom pencarian, ataupun beragam widget lainnya. Biasanya skrip ini akan diletakkan di bagian bawah dari skrip <section>

<aside>

<h2>Minuman Populer</h2>

<a href=””>Es Campur</a>

<a href=””>Es Teler</a>

<a href=””>Es Kelapa Muda</a>

</section>

<h2>Kontak</h2>

<p>Restoran<br />

di seluruh indonesia

</section>

</aside>

Pada contoh skrip Aside di atas, Anda meletakkan informasi daftar link yang isinya terdiri dari menu makanan dan minuman populer serta daftar kontak.

Buat Elemen Footer HTML5

Sebuah website juga harus memiliki bagian footer sebagai pemberi informasi tambahan tentang website tersebut, misalnya seperti informasi mengenai hak cipta , link ke halaman kebijakan privasi atau link lainnya. Oleh sebab itu, pada saat Anda membuat website sederhana, jangan lupa membuat elemen <footer>, seperti contoh berikut ini

</footer>

Buat Skrip CSS dan Gambar

Berikut ini ada contoh skrip CSS yang kemudian dapat Anda masukkan ke dalam elemen <style> type=”text/css”>.

header, section, footer, aside, nav, article, figure, figcaption {

display: block;}

body {

color: #666666;

background-color: #f9f8f6;

background-image: url(“images/bright-blue.jpg”);

background-position: center;

font-family: Georgia, Calibri, serif;

line-height: 1.4em;

margin: 0px;}

.wrapper {

width: 950px;

margin: 25px auto 25px auto;

border: 2px solid #000000;

background-color: #ffffff;}

header {

height: 180px;

background-image: url(images/header.png);}

h1 {

text-indent: -9999px;

width: 950px;

height: 120px;

margin: 0px;}

nav, footer {

clear: both;

color: #ffffff;

background-color: #aeaca8;

height: 25px;}

nav ul {

margin: 0px;

padding: 7px 0px 7px 35px;}

nav li {

display: inline;

margin-right: 30px;}

nav li a {

color: #ffffff;}

nav li a:hover, nav li a.current {

color: #000000;}

section.courses {

float: left;

width: 629px;

border-right: 1px solid #eeeeee;}

article {

clear: both;

overflow: auto;

width: 100%;}

hgroup {

margin-top: 40px;}

figure {

float: left;

width: 270px;

height: 200px;

padding: 10px;

margin: 25px;

border: 1px solid #eeeeee;}

figcaption {

font-size: 90%;

text-align: left;}

aside {

width: 220px;

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: 15px 0px 10px 0px;

padding: 0px;}

h3 {

margin: 0px 0px 10px 0px;

color: #de6581;}

aside h2 {

padding: 30px 0px 10px 0px;

color: #de6581;}

footer {

font-size: 80%;

padding: 7px 0px 0px 20px;}

Itulah cara membuat website sederhana menggunakan desain web HTML, dalam hal ini versi HTML yang digunakan adalah versi HTML 5. Namun, perlu diketahui pula bahwa, panduan cara membuat website sederhana di atas tersebut masih bersifat website yang statis bukan dinamis.

[website-about]

Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

- Advertisement -

Media Bisnis Online | by APPKEY

Desain Web HTML | Membuat Website Minimalis dan Sederhana

Panduan Membuat Desain Web HTML Sederhana