Media Bisnis Online | by APPKEY

PembuatanBahasa pemrogramanDesain Web HTML | Membuat Website Minimalis dan Sederhana

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.

Panduan Membuat Desain Web HTML Sederhana

Artikel terkait  20 Situs Belajar Coding Gratis Untuk Jadi Programmer

 

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.

Artikel terkait  Dasar Pemrograman Komputer Untuk Pemula

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:

 

<div class=”wrapper”>

<header>

<h1>Restoran</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 –>

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 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>

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.

Artikel terkait  Cara Belajar Coding untuk Pemula Paling Efektif

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”>.

<header>

<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>.

<section class=”courses”>

<article>

<figure>

<img src=”images/nasi goreng.jpg” alt=”soto” />

<figcaption>Nasi Goreng Spesial</figcaption>

</figure>

<hgroup>

<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>

<article>

<figure>

<img src=”images/gadogado.jpg” alt=”pecel” />

<figcaption>Gado Gado</figcaption>

</figure>

<hgroup>

<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>

<section class=”popular-beverages”>

<h2>Minuman Populer</h2>

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

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

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

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

</section>

<section class=”contact-details”>

<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>

&copy; 2019 Restoran

</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.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Paket Aplikasi Android dan iOS

Pasang iklan

- Advertisement -

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang IT, Bisnis, Ekonomi, Berita Domestik dan Global langsung melalui email Anda. Subscribe sekarang dan raih kesuksesan bersama kami!

Kategori

Blog Post Ranking 10

7 Jenis Font Paling Sering Digunakan Oleh Para Profesional Dalam Desain Grafis

Anda seorang desainer grafis? Atau, Anda baru hendak terjun kedalam dunia desain grafis? Pekerjaan membuat desain, meski terlihat mudah,...

11 Aplikasi Desain Jersey Android Terbaik yang bisa Anda coba!

Anda sedang mencari inspirasi bisnis? Mengapa tidak mencoba merintis bisnis jersey tim sepak bola kenamaan saja? Mari mencobanya dengan...

Startup Repair Adalah? Penyebab dan Cara Mengatasinya

Startup repair adalah salah satu jenis problem yang sering ditemukan pada PC, hal ini menyebabkan PC sering gagal booting. Saat...

Cara Mengedit Aplikasi Android Dengan Apk Editor

Pernahkah Anda berpikir untuk mengedit aplikasi Android? Jika pernah, ada banyak sekali pilihan aplikasi untuk mengedit aplikasi Android yang...

10 Contoh Iklan Penawaran Jasa dan Produk Paling Menarik!

Seperti apa contoh-contoh iklan penawaran yang menarik konsumen? Buat Anda yang sering bingung menyusun kata-kata iklan penawaran, jangan lewatkan...

7 Prinsip Desain Grafis yang Perlu Kamu Ketahui & Pelajari

Pernahkah Anda melihat sebuah film animasi atau sebuah gambar dengan desain grafis yang cantik, estetik dan menarik? Pernahkah Anda...

25 Tempat Jual Beli Online Terbaik dan Terpercaya di Indonesia

Dewasa ini, berkembangnya teknologi di Indonesia memunculkan beragam startup e-commerce berkonsep tempat jual beli online yang menjual produk lengkap...

HOST ID dan NETWORK ID | Pengertian dan Contohnya

Perangkat komputer yang biasa kita gunakan sehari-hari, ternyata memiliki jaringan yang rumit dan juga kompleks. Sebab, hingga saat ini...

Standar Biaya Pembuatan Aplikasi Android dan IOS

Hal yang membedakan standar biaya pembuatan aplikasi Appkey adalah perangkat yang dibutuhkan dan support aplikasi untuk keperluan development. Seperti...

Cara Cepat Belajar IT Secara Otodidak untuk Pemula

Belajar IT atau coding bisa dibilang hal yang tidak mudah apalagi bagi pemula. Karenanya memang butuh beberapa tahun untuk...

Website

WordPress

Maintenance

Server / Hosting

Domain

Front end

Backend

Laravel

Web programming

Teknologi web

Biaya pembuatan website

Aplikasi

Aplikasi Game

Aplikasi Android

Aplikasi iOS

Mobile Programming

Cross-platform

Biaya pembuatan aplikasi

Desain

Design Web

Design App

Design UI

Designer tools

Paling Sering dibaca
Mungkin Anda Menyukainya