Bagi pemilik bisnis, kepemilikan website untuk kebutuhan marketing memang penting banget. Dengan memiliki website kamu bisa menjangkau lebih banyak audiens, target pemasaranmu pun tentunya jadi lebih luas. Bagi web developer yang ingin membuat portofolio, membuat websitemu sendiri juga bisa menjadi cara untuk menunjukkan kebolehanmu. Cara pembuatan website yang paling kami rekomendasikan adalah dengan menggunakan kode HTML. Cara membuat website dengan html ini gampang banget dan cocok bagi pemula. Yuk, simak ulasan langkah-langkahnya berikut:
Table of Contents
Kenapa Harus Tahu Cara Membuat Website dengan HTML?
Mungkin kamu bertanya-tanya, kenapa wajib tahu cara membuat website dengan html? Jika kamu seorang web developer pemula sekalipun, ilmu HTML merupakan ilmu pemrograman yang wajib kamu kuasai. Selain itu, pembuatan website dengan kode HTML dan CSS adalah yang paling banyak digunakan di berbagai situs di dunia. Jadi, dengan menguasai langkah-langkah membuat website dengan kode HTML, kamu bisa memanfaatkan berbagai macam platform pembuatan website secara maksimal.
Yang Harus Dipersiapkan untuk Cara Membuat Website dengan HTML
Sudah siap untuk mengetahui cara membuat website dengan html? Sebelum itu, kamu perlu tahu bahwa ada 2 basic tools atau tools dasar yang dipakai untuk membuat website. Kedua tool tersebut adalah Text Editor dan Web Browser. Tool “Text Editor” ini dipakai untuk menuliskan atribut kode HTML yang akan kamu aplikasikan pada web browser.
Baca juga: Afiliator Adalah Apa dan Ini 3 Keuntungannya
Sebenarnya, ada banyak banget jenis text editor tool yang bisa kamu pakai untuk mempraktekkan cara membuat website dengan html. Kebanyakan web developer menggunakan Visual Code Studio. Tapi, ada juga tools lain, seperti Notepad++, Emacs, Bluefish, Komodo Edit, dan lain sebagainya. Pilih yang manapun sesuai dengan preferensi dan kenyamananmu, ya!
Cara Membuat Website dengan HTML
Nah, selamat! Kamu sudah sampai di tahap ini. Setelah menemukan text editor tool dan web browser yang cocok denganmu, saatnya kamu menyimak langkah-langkah cara membuat website dengan html berikut ini:
1. Buat Struktur Project Websitemu
Cara membuat website dengan html yang pertama adalah, buka tool text editormu terlebih dulu. Setelah itu, buat folder di dalam tool tersebut dan berikan nama pada folder tersebut. Selanjutnya, buatlah folder lagi dan kali ini simpan folder tersebut dengan nama “Gambar”. Nantinya, folder kedua itu kamu pakai untuk menyimpan gambar-gambar yang akan kamu tampilkan ke dalam websitemu.
Setelah itu, buatlah file baru dan beri nama style.css dan index.html di dalam folder pertama. For your information, file index.html ini nantinya yang akan menjadi inti dari laman situs yang akan kamu buat. Di dalamnya, nanti kamu bisa menambahkan konten-konten yang akan tayang di dalam website. Sedangkan, file style.css ini nantinya akan bersifat sebagai file yang bertujuan untuk mengubah tampilan dari websitemu. File ini penting banget jika kamu ingin membuat tampilan websitemu jadi kelihatan lebih indah.
2. Tambahkan Kode HTML di dalam File Index.html
Seperti yang diulas sebelumnya, file index.html ini nantinya bakal digunakan untuk menjadi inti dari struktur websitemu. Nah, makanya, kamu perlu membuat susunan file ini dengan memasukkan kode HTML di dalam file tersebut. Basically, setiap HTML terdiri dari 4 bagian utama, yaitu:
- Tag HTML: Tag ini menampung semua elemen html yang kamu pakai untuk membuat websitemu
- Tag Doctype (DTD): Tag ini harus diletakkan di bagian awal dari dokumen HTMLmu. Fungsi dari tag ni adalah untuk menunjukkan jenis dokumen beserta versi HTML yang kamu pakai untuk kemudian diproses oleh browser
- Tag Head: Jenis tag ini biasanya terdiri dari informasi kode yang nggak dimunculkan pada tampilan website. Contohnya seperti source js dan source css, meta charset, dan title
- Tag Body: Tag ini menampung seluruh elemen yang akan ditampilkan di laman websitemu. Termasuk di dalamnya adalah kontenmu.
Secara singkat, berikut adalah langkah-langkah pembuatan struktur websitemu:
Langkah Pertama: Atur Tag Head
Pada bagian tag head, berikan informasi mengenai judul website, meta tag carhset, dan link atau pathyang kamu dari JavaScript, CSS, atau sumber eksternal lain yang kamu gunakan pada websitemu. Jangan lupa untuk memastikan file CSS berada di tempat yang sama dengan file HTML. Apabila keduanya diletakkan di folder yang berbeda, maka pastikan untuk memasukkan path yang sesuai dengan kode href berikut:
<link rel="stylesheet" type="text/css" href="style.css"/>Untuk tampilan keseluruhan, adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Personal Website</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>
Langkah Kedua: Atur Tag Body
Cara membuat website dengan html selanjutnya adalah, kamu perlu mengonfigurasikan tag body. Pada bagian pertama dari body, kamu perlu membuat kode untuk tampilan awal yang terdiri dari navbar (navigation bar), gambar, dan text container. Pastikan peletakan sesuai, dimana navigation bar berada di bagian header sedangkan tagtext container ditujukan untuk memuat konten berupa teks atau tulisan yang akan tampil pada website. Tampilannya adalah sebagai berikut:
<body>
<section>
<!--- navigation --->
<nav>
<!--- logo --->
<a href="#" class="logo">Portfolio Tutorial</a>
<!--- menu --->
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!--- text --->
<div class="text-container">
<p>Hello,</p>
<p>I’M NIDA</p>
<p>SEO Technical Writer & Developer</p>
<p>An aquarius girl who loves music, watching movies and
<br>of course writing.</p>
<button class="hire-btn">Hire me</button>
<button class="down-cv">Download CV</button>
</div>
<!-- model -->
<img alt="model" class="model" src="images/ilustrasi.jpg">
</section>
Langkah Ketiga: Tambahkan Informasi Lain
Tergantung dari jenis website yang kamu inginkan, maka detail dari website tersebut bisa kamu letakkan pada bagian ini. Misalnya, jika kamu membuat jenis website jasa, maka kamu bisa menambahkan jenis jasa atau layanan yang kamu sediakan. Sedangkan, untuk jenis website portofolio, maka tambahkan saja skill yang kamu miliki di bagian <div class=”box-container”>. Sebagai contoh, berikut kodenya:
<div class="box-container">.
<!-- services/layanan -->
<div class="services">
<!--text-->
<div class="services-text ">
<p>Services</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class="box-container">
<!--- 1 --->
<div class="box-1">
<span>1</span>
<p class="heading">Technical Writing</p>
<p class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button>Read More</button>
</div>
<!--- 2 --->
<div class="box-2">
<span>2</span>
<p class="heading">Web Design</p>
<p class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button>Read More</button>
</div>
<!--- 3 --->
<div class="box-3">
<span>3</span>
<p class="heading">Web Development</p>
<p class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button>Read More</button>
</div>
</div>
</div>
Langkah Keempat: Tambahkan Testimoni dan Kontak
Di bagian ini, kamu bisa menambahkan testimoni atau review dari klien yang sebelumnya pernah bekerjasama denganmu. Penggunaan rating bintang untuk menunjukkan skala kepuasan juga bisa menjadi langkah bagus yang mempermudah pengunjung situsmu. Untuk menampilkan fitur rating tersebut, pastikan kamu menambahkan tautan script fontawesome pada bagian tag head. Selain itu, kamu juga perlu menambahkan kontak yang mempermudah calon pembeli atau calon klien dalam menghubungimu. Semakin banyak kontak media sosial aktif yang kamu lampirkan, akan semakin baik. Apabila penjelasan di atas masih membingungkanmu, kamu bisa langsung menyalin dan menempelkan kode HTML berikut dan mengeditnya sesuai dengan kebutuhan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Personal Website</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>
<body>
<section>
<!--- navigation --->
<nav>
<!--- logo --->
<a href="#" class="logo">Portfolio Tutorial</a>
<!--- menu --->
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!--- text --->
<div class="text-container">
<p>Hello,</p>
<p>I AM SUWARDI</p>
<p>SEO Technical Writer & Developer</p>
<p>An INTP who loves music, watching movies and
<br>of course writing.</p>
<button class="hire-btn">Hire me</button>
<button class="down-cv">Download CV</button>
</div>
<!-- model -->
<img alt="model" class="model" src="images/ilustrasi.jpg">
</section>
<!-- services -->
<div class="services">
<!--text-->
<div class="services-text ">
<p>Services</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="box-container">
<!--- 1 --->
<div class="box-1">
<span>1</span>
<p class="heading">Technical Writing</p>
<p class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<button>Read More</button>
</div>
<!--- 2 --->
<div class="box-2">
<span>2</span>
<p class="heading">Web Design</p>
<p class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button>Read More</button>
</div>
<!--- 3 --->
<div class="box-3">
<span>3</span>
<p class="heading">Web Development</p>
<p class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button>Read More</button>
</div>
</div>
</div>
<!--testimonials-->
<div class="testimoni">
<!--text-->
<div class="testimoni-text ">
<p>What Our Client Says..</p>
</div>
<div class="testimoni-col">
<div class="testimoni-1">
<img src="images/ava1.png">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>Client Pertama</h3>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
<div class="testimoni-2">
<img src="images/ava2.png">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>Client Kedua</h3>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer>
<p>Interested In Using Our Services?</p>
<!--paragraph-->
<p>I try to work on your project as quickly as possible. Guarantee for revision until you are satisfied with my work.</p>
<!--social-->
<div class="social-icons">
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</footer>
<!--social-attach-bar-->
<div class="social">
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</body>
</html>
Itulah ulasan sederhana mengenai cara membuat website dengan html. Bagaimana jika kamu ingin memiliki website tapi nggak punya background mumpuni mengenai HTML? Nggak perlu bingung! Karena, kamu bisa langsung menghubungi Optimaise dan menggunakan jasa pembuatan website dari kami. Dengan menggunakan jasa kami, kamu akan memperoleh website dengan konten SEO dan mobile-friendly. Nggak hanya itu, kamu juga akan mendapatkan gratis domain, hosting, dan SSL, lho! Jadi, tunggu apa lagi! Yuk, gunakan jasa Optimaise sekarang juga.
