Cara Membuat  Web Design Html Sederhana
Penerbit: ( Seo Techman )

Cara Membuat Web Design Html Sederhana

Pada dasarnya jika kita ingin membuat sebuah web atau halaman website, tentunya kita harus mengerti pokok atau inti dasar dari isi web tersebut.

Cara Membuat Web Design Html Sederhana
Apa yang dimaksud dengan pokok dasar dari isi web tersebut? Pokok-pokok dasarnya yaitu, disini kita dituntut harus memahami kode-kode tertentu atau sering disebut sebagai bahasa pemrograman.

Contohnya seperti:
Html, Css, Php, Javascript dan masih banyak lainnya.

Mungkin untuk seorang pemula, ini adalah hal yang rumit bagaimana caranya agar bisa paham dan mengerti dengan segitu banyaknya istilah pada kode tersebut.

Nah maka dari itu, pada kesempatan kali ini saya akan mencoba membahas bagaimana contoh dasar atau cara dasar membuat web dengan html. Tidak hanya sebatas memahami atau mengerti jika kita ingin memulai membuat web, kitapun harus memiliki rumah dan alamat rumah kita agar bisa dikunjungi oleh banyak orang nantinya.

Apa yang dimaksud dengan rumah dan alamat rumah? Yang dimaksud dengan rumah dan alamat rumah yaitu, Hosting dan Domain.

Apa itu hosting?

Hosting jika diibaratkan sama seperti sebuah rumah atau apartemen yang memiliki ukuran luas dan lebar yang berbeda. Sedangkan Domain adalah sebagai alamat kita nantinya, yang mana jika kita telah selesai membuat rumah tersebut kita sudah dapat mengunjunginya.

Dimana tempat untuk membeli hosting dan domain yang terpercaya dengan support 24jam fast respon? Kalian bisa kunjungi alamat Niagahoster atau provider lainnya.

Oke, disini saya anggap kalian sudah mempunyai hosting dan domainnya. Dan untuk memulai langkah pada tutorial ini, kita membutuhkan:

1. Html (Kerangka Web)
2. Css (Sebagai Penghias Kerangka Web)

Langkah yang pertama yaitu, masuk ke hosting cpanel kalian terlebih dahulu. Setelah itu klik filemanager yang terdapat didalam cpanel itu, kemudian buat sebuah file yang berekstensi index.html dan copy kode html berikut ini:


<div class="navbar">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
                </div>
<div class="container">
<div class="row">
<h1>Demo Web Html</h1>
<p>Selamat datang di web kami.</p>
<p>Web ini hanya sekedar contoh untuk keperluan demo.</p>
</div>
</div>
<div class="container">
<div class="row">
<h3>Tutorial</h3>
<p>- Cara cara membuat web html -</p>
<p>- Design web html dan css -</p>
<p>- Membuat web sederhana -</p>
<p>- Membuat simple web html -</p>
</div>
</div>
<div class="footer">
Copyright @ 2019 <a href="https://www.seotechman.com">SEO TECHMAN</a> | Allright Reserved.
</div>

Pastekan kedalam file index.html yang sudah kalian buat sebelumnya. Langkah berikutnya adalah, kalian buat file lagi didalam root filemanager tersebut beri nama style.css sebagai contoh dan copy kode css dibawah ini:


body {
      font-family: "Open Sans Condensed", Sans-serif;
      background: #F5F5F5;
      color: #777;
      font-weight: 400;
}
h1,h2,h3,h4,h5 {
      font-family: "Open Sans Condensed", Sans-serif;
      color: #333;
      text-align: center;
      font-weight: 700;
}
.navbar {
      background: #49ACE1;
      width: 100%;
      margin-bottom: 10px;
      padding:10px 0;
      text-align: center;
      -webkit-box-shadow:0 2px 6px 0 rgba(0,0,0,.2);box-shadow:0 2px 6px 0 rgba(0,0,0,.2);
}
.navbar a{
      color:#ffffff;
      text-decoration:none;
      margin-right:5%;
}
.navbar a:last-child {
      margin-right:0;
}
.container {
       max-width: 100%;
}
.row {
       background-color: #FFFFFF;
       border: 1px solid #ddd;
       border-radius: 5px;
       color: #777;
       text-align: center;
       padding: 10px;
       margin-bottom: 10px;
       display: block;
       -webkit-box-shadow:0 2px 6px 0 rgba(0,0,0,.2);box-shadow:0 2px 6px 0 rgba(0,0,0,.2);
}
.footer {
       width: 100%;
       background: #333;
       padding: 10px;
       color: #FFFFFF;
       text-align: center;
}
.footer a {
       color: #A7EA59;
}

Setelah itu pastekan kedalam file style.css dan klik simpan.

Untuk menggabungkan kedua file diatas antara index.html dan style.css, bisa kalian lihat seperti contoh dibawah:


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="navbar">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
                </div>
<div class="container">
<div class="row">
<h1>Demo Web Html</h1>
<p>Selamat datang di web kami.</p>
<p>Web ini hanya sekedar contoh untuk keperluan demo.</p>
</div>
</div>
<div class="container">
<div class="row">
<h3>Tutorial</h3>
<p>- Cara cara membuat web html -</p>
<p>- Design web html dan css -</p>
<p>- Membuat web sederhana -</p>
<p>- Membuat simple web html -</p>
</div>
</div>
<div class="footer">
Copyright @ 2019 <a href="https://www.seotechman.com">SEO TECHMAN</a> | Allright Reserved.
</div>
</body>
</html>

Jika semua persiapan seperti diatas sudah kalian buat semua, tinggal kalian simpan. Kemudian coba dilihat hasilnya seperti apa.

Disini saya lampirkan juga untuk demonya, jika ingin melihatnya silahkan menuju link yang sudah saya sediakan dibawah.

Live Demo

Intinya, membuat sebuah web dengan html dan css ini bisa dibilang mudah. Itupun kalau kita telah paham dan mengerti dasar-dasarnya, sama seperti apa yang sudah saya jelaskan sebelumnya.

Untuk contoh seperti kode diatas, bisa kalian kreasikan sendiri entah itu html nya ataupun css nya. Edit dengan sebaik mungkin agar tampilannya menarik dan bagus.

Itulah sedikit tutorial kali ini dari saya, cara membuat web design Html sederhana, kurang lebihnya hanya itu yang dapat saya tutorialkan untuk pembahasan kali ini.

Ambil sisi positifnya dari pembelajaran ini dan buang sisi negatifnya. Mudah-mudahan bermanfaat dan sedikit membantu, terutama untuk para pemula.

Akhir kata saya ucapkan, terimakasih dan sampai bertemu kembali dilain waktu.

Load comments