[Tutorial] Cara Membuat Web Sederhana dengan HTML dan CSS

Pada dasarnya jika kita ingin membuat web atau halaman website, tentunya kita harus mengerti pokok atau inti dasarnya terlebih dulu. 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 sederhana. 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 Anda sudah mempunyai hosting dan domainnya. Dan untuk memulai langkah pada tutorial ini, kita membutuhkan:

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

Cara Membuat Web Sederhana

Langkah yang pertama yaitu: Masuk ke hosting cpanel Anda terlebih dahulu, setelah itu klik filemanager, kemudian buat sebuah file yang berekstensi index.html dan copy kode html berikut ini:

HTML

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

CSS

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 Anda buat semua, langsung saja klik simpan. Dan jangan lupa untuk melihat hasilnya seperti apa.

Intinya, membuat sebuah web atau website 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 Anda kreasikan sendiri entah itu HTML ataupun CSS nya.

Itulah sedikit tutorial kali ini, cara membuat web sederhana dengan HTML dan CSS, semoga bermanfaat.

Virm Aditya

Berita teknologi informasi terkini

Bagikan Artikel ini