Cara Membuat Website Menggunakan Notepad++

Cara Membuat Website Menggunakan Notepad++ – Pada dunia digital seperti sekarang ini, adanya website sebagai sumber informasi kini telah menjadi bagian tak terpisahkan dari kehidupan kita. Sebuah website dapat diartikan sebagai kumpulan halaman yang menampilkan informasi berupa teks, gambar diam atau bergerak, animasi, suara, video, dan gabungan dari semuanya.

Perbedaan Web Statis dan Dinamis

Website pada garis besarnya memiliki dua jenis, yakni website bersifat statis, yang berarti informasi di dalamnya tetap dan jarang berubah, atau dinamis, di mana informasi selalu berubah-ubah dan bersifat interaktif dua arah antara pemilik dan pengguna website.

Perlu dicatat bahwa dalam pengembangannya, website statis hanya bisa diupdate oleh pemiliknya saja, sementara website dinamis memungkinkan pengguna dan pemiliknya untuk turut serta dalam proses pembaruan informasi. Di artikel ini, TeknoTask akan memberikan panduan cara membuat halaman web HTML sederhana menggunakan Notepad++.

Cara Membuat Website Sederhana Menggunakan Notepad++

1. Persiapkan Struktur Folder:

Langkah pertama yang perlu kita lakukan adalah membuka Notepad++ dan membuat folder baru untuk proyek website pribadi. Misalnya, beri nama folder “ProyekWeb”. Di dalamnya, buat file “index.html” dan “style.css”. Selain itu, siapkan subfolder “portofolio” untuk menyimpan gambar yang mungkin dibutuhkan, contoh foldernya seperti berikut:

ProyekWeb

portofolio
– portofolio1.webp
– portofolio2.webp
index.html
style.css

Untuk contoh gambar portofolionya bisa kamu unduh disini.

2. Buat File HTML Utama (index.html)

Buka Notepad++ dan buat file baru dengan nama “index.html” dalam folder proyek apabila belum membuat, lalu isi file tersebut dengan kode HTML dibawah ini.

<!DOCTYPE html>
<html lang="id">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css/style.css">
   <title>Website Pribadi Saya</title>
</head>
<body>

   <header>
       <div id="logo">
           <img src="logo/logo teknotask.png" alt="Logo">
       </div>
       <div id="header-content">
           <nav>
               <ul>
                   <li><a href="#home">Beranda</a></li>
                   <li><a href="#about">Tentang Saya</a></li>
                   <li><a href="#portfolio">Portofolio</a></li>
                   <li><a href="#contact">Kontak</a></li>
                   <button class="register-button">Daftar</button>
               </ul>
           </nav>
       </div>
   </header>

   <section id="home">
       <h1>Selamat Datang di Website Pribadi Saya</h1>
   </section>

   <section id="about">
       <h2>Tentang Saya</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget justo nec justo hendrerit feugiat at et turpis.</p>
   </section>

   <section id="portfolio">
       <h2>Portofolio</h2>
       <div class="portfolio-item">
           <img src="portofolio/proyek1.webp" alt="Portofolio Item 1">
           <p>Deskripsi Proyek 1</p>
       </div>
       <div class="portfolio-item">
           <img src="portofolio/proyek2.webp" alt="Portofolio Item 2">
           <p>Deskripsi Proyek 2</p>
       </div>
       <!-- Tambahkan item portofolio lainnya sesuai kebutuhan -->
   </section>

   <section id="contact">
       <h2>Hubungi Saya</h2>
       <form>
           <label for="name">Nama:</label>
           <input type="text" id="name" name="name">

           <label for="email">Email:</label>
           <input type="email" id="email" name="email">

           <label for="message">Pesan:</label>
           <textarea id="message" name="message"></textarea>

           <button type="submit">Kirim Pesan</button>
       </form>
   </section>

</body>
</html>

3. Buat File CSS (style.css)

Buat file baru dengan nama “style.css” dalam folder proyek apabila belum membuat, lalu isi file tersebut dengan kode CSS dibawah ini untuk mendesain tampilan website Anda agar lebih menarik.

body {
   font-family: 'Arial', sans-serif;
   background-color: #f2f2f2;
   color: #333;
   margin: 20px;
   text-align: center;
}

header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   text-align: center;
   padding: 20px;
   background-color: #007bff;
   color: #fff;
}

#logo img {
   width: 150px; /* Sesuaikan ukuran logo sesuai kebutuhan */
}

#header-content h1 {
   margin: 0;
}

nav ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

nav ul li {
   display: inline;
   margin-right: 20px;
}

nav ul li a {
   text-decoration: none;
   color: #fff;
   font-weight: bold;
}

.register-button {
   background-color: #28a745;
   color: #fff;
   border: none;
   padding: 10px 20px;
   font-size: 16px;
   cursor: pointer;
}

section {
   margin: 40px 0;
   text-align: center;
}

section h2 {
   color: #007bff;
}

.portfolio-item {
   margin-bottom: 20px;
   text-align: center;
}

.portfolio-item img {
   max-width: 30%;
}

form {
   display: grid;
   grid-gap: 10px;
   text-align: left;
   max-width: 400px;
   margin: 0 auto;
}

form label {
   display: block;
   font-weight: bold;
}

form input,
form textarea {
   width: 100%;
   padding: 8px;
   box-sizing: border-box;
}

form button {
   background-color: #007bff;
   color: #fff;
   border: none;
   padding: 10px 20px;
   font-size: 16px;
   cursor: pointer;
}

4. Jalankan Kode

Simpan semua perubahan. Buka file “index.html” menggunakan Notepad++. Klik kanan di dalam file dan pilih “Open in Browser” untuk melihat hasilnya menggunakan browser default.

5. Tampilkan Website

Selamat! Anda telah berhasil membuat website pribadi sederhana dengan HTML dan CSS menggunakan Notepad++. Selanjutnya, sesuaikan konten dan desain sesuai dengan kebutuhan dan preferensi Anda.

Penutup

Dengan mengikuti panduan membuat web HTML menggunakan Notepad++ diatas, kini kamu bisa mengeksplorasi kreativitasmu melalui website pribadi yang unik dan fungsional. Meskipun menggunakan dasar HTML, tidak perlu khawatir jika kamu belum mahir dalam pemrograman. Selamat mencoba, Sobat Tekno!