Di zaman modern ini, kita sudah mempunyai berbagai cara untuk membuat website. Kita bisa meminta bantuan jasa pembuat website, atau menggunakan CMS dan website builder. Kali ini, kita akan mencoba untuk membuat website dengan cara tradisional, alias buat web dengan Notepad.
Dengan Notepad, kita bisa membuat website sederhana menggunakan bahasa pemrograman HTML. Ya, Notepad bisa digunakan untuk membuat codingan, bahkan Notepad menyediakan berbagai jenis ekstensi file sebelum menyimpan, mulai dari .txt sampai .java. Bisa dibilang, Notepad cocok digunakan untuk kalian yang ingin belajar HTML, CSS, dan bahkan belajar membuat website sederhana.
Cara Membuat Website dengan Notepad
Berikut adalah cara membuat website dengan Notepad.
- Buka Aplikasi Notepad
Untuk membuat website dengan Notepad, kita bisa menggunakan Notepad atau aplikasi Notepad++ yang lebih canggih dari Notepad biasa. Selain itu, pastikan komputer telah terhubung ke jaringan internet.
- Buat File “index.html” dan “style.css”
Sebelum membuat file index.html dan style.css, terlebih dahulu kita membuat folder untuk menyimpan kedua file tersebut. Kita bisa menyimpan folder itu dengan nama sesuai keinginan. Setelah membuat folder, barulah kita membuat file index.html dan style.css di dalam folder tersebut menggunakan aplikasi Notepad.
Untuk file index.html, saat kita mencoba untuk membukanya menggunakan browser maka tidak menampilkan apa-apa karena memang belum dimasukkan kode sintaks apapun.
- Masukkan Kode Sintaks HTML dan CSS
Sekarang, kita akan mencoba menggunakan HTML dan CSS untuk membuat website di Notepad. Umumnya, dokumen HTML diawali dengan <!DOCTYPE html> untuk menunjukkan bahwa dokumen ini menggunakan bahasa pemrograman HTML agar browser bisa membaca file tersebut.
Jangan lupa, dokumen HTML wajib menggunakan tag <> dan </>, misalnya <body> dan </body>.
Pertama, buka file index.html untuk memasukkan kode sintaks HTML. Untuk percobaan pertama, kita bisa memasukkan kode sintaks HTML berikut ini.
Baca Juga : Alternatif Link In Bio – Konekios Solusinya
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Save file tersebut. Kalau kalian belum menutup browser yang digunakan untuk membuka file index.html, refresh dan tampilan akan berubah menjadi seperti gambar di bawah ini.
Kode tersebut merupakan struktur dasar dari kode sintaks HTML. Jika memperhatikan bagian heading dan paragraf pada gambar di atas, bagian-bagian tersebut merupakan hasil dari kode <h1>This is a Heading</h1> dan <p>This is a paragraph.</p>.
Heading pada HTML memiliki enam jenis yang berbeda ukurannya, dimulai dari heading 1 yang paling besar dan heading 6 yang paling kecil ukurannya.
Kemudian, buka file style.css. Nantinya, file itu akan berisi kode-kode sintaks CSS yang berfungsi untuk menerapkan tampilan pada file HTML. Bentuk kode sintaks CSS yang biasa digunakan adalah seperti di bawah ini.
.wrapper {
background-color: #333;
color: #fffffffa;
padding:10px;
width: 700px;
height: auto;
margin: 0 auto;
font-family: arial;
}Setelah memasukkan kode tersebut ke dalam file style.css dan menyimpannya, jangan kaget saat tampilan di browser tidak berubah meski sudah memasukkan kode sintaks CSS, karena nanti kita akan menggunakan cara external CSS untuk menerapkan kode CSS ini ke dalam file HTML.
Untuk menerapkan kode CSS dengan cara external CSS ke dalam file HTML, berikut adalah contoh kode sintaks yang dapat digunakan.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website Pertamaku</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="header-atas">
<header>
<nav>
<ul>
<li>Beranda</li>
<li>Kontak</li>
</ul>
</nav>
</header>
</div>
<section>
<article>
<header>
<h2>Judul Postingan</h2>
</header>
<p>Contoh isi artikel...</p>
</article>
</section>
<aside>
<h2>Tentang</h2>
<p>Halo, selamat datang di Konekios!</p>
</aside>
<footer>
<p>Konekios 2023</p>
</footer>
</div>
</body>
</html>Save file HTML, kemudian refresh. Maka tampilan di browser akan berubah lagi menjadi gambar di bawah ini.
Baca Juga : Dikagetin Guerilla Marketing? Why Not?
Nah, kita berhasil membuat website sederhana dengan Notepad!
Meskipun begitu, website yang dibuat dengan Notepad menggunakan kode HTML sederhana sehingga tampilan websitenya memang terlihat sederhana, maksudnya tidak dilengkapi dengan gambar atau animasi.
Jika ingin membuat website yang dilengkapi dengan gambar atau animasi, maka diperlukan kode sintaks HTML yang jauh lebih kompleks lagi.
Nah, untuk kalian yang malas berurusan atau tidak mau berpusing-pusing dengan kode-kode HTML, saatnya kalian menggunakan Konekios!
Dengan Konekios, cukup dengan memilih template yang sesuai dengan jenis website yang ingin kalian buat, website akan langsung jadi lengkap dengan templatenya yang super cantik!
Selain itu, kalian bisa mendapatkan berbagai benefit dengan membuat website di Konekios. Pertama, kalian sudah bisa membuat website lengkap dengan free domain dari kalian plus hostingnya cukup dengan memilih paket Free Trial.
Kedua, website kalian akan dilengkapi dengan storage sebesar 1 GB. Ketiga, website kalian bisa diedit sepuasnya sampai sesuai dengan keinginan kalian.
Untuk kalian yang ingin menggunakan Konekios untuk membuat website toko online, kini Konekios sudah menyediakan fitur payment gateway dengan GoPay, transfer bank, QRIS, dan lain-lain sehingga memudahkan kalian dalam mengelola transaksi di toko online kalian.