Cara Membuat Web Dengan Notepad Plus Plus

Cara Membuat Web Dengan Notepad Plus Plus – Sobat Tekno, zaman kini telah mengubah cara kita berinteraksi dengan segala informasi. Website atau situs menjadi tempat yang membuka akses tak terbatas ke dunia digital. Apa yang dulu hanya bisa dilakukan secara konvensional, kini dapat diwujudkan secara digital.

Jika kamu ingin mulai membuat website untuk membagikan informasi secara digital dengan mudah. Dalam artikel ini, TeknoTask akan memberikan kamu panduan agar kamu memiliki website serta langkah-langkah mudah membuatnya menggunakan HTML dan CSS.

Manfaat Memiliki Website

Sobat, ada beberapa alasan mendasar mengapa perusahaan atau individu memilih untuk memiliki website:

  1. Memperluas Jangkauan Promosi: Dengan memiliki website, produk atau jasa kita dapat lebih dikenal, bahkan hingga ke mancanegara. Website menjadi media promosi yang efektif, meningkatkan visibilitas dan potensi penjualan.
  2. Media Tanpa Batas: Internet berfungsi sebagai media informasi tanpa batas waktu. Website kita menjadi karyawan setia yang memberikan informasi kepada calon pembeli selama 24 jam sehari, 7 hari seminggu.
  3. Akses Global: Internet dapat diakses oleh seluruh lapisan masyarakat di seluruh dunia, memberikan akses tanpa batas kepada pengguna di berbagai belahan jagat.
  4. Promosi Terluas: Internet adalah media promosi terluas dengan jangkauan atau cakupan area yang tidak terbatas.
  5. Pengenalan Perusahaan: Website menjadi media pengenalan perusahaan yang efisien, memberikan informasi lebih dalam kepada pelanggan potensial tentang sejarah, produk, jasa, dan lowongan pekerjaan.
  6. Promosi Efisien: Internet sebagai media promosi relatif efisien, mengoptimalkan manfaat dengan biaya yang terjangkau.

Cara Mudah Membuat Web Dengan Notepad++

1. Persiapkan Struktur Folder dan File

Langkah pertama sebelum memulai membuat website, pastikan struktur folder dan file proyek sudah tersusun rapi yang dibuat melalui Notepad++:

  1. Buat File HTML: Di dalam folder proyek, buat file HTML baru, misalnya “index.html”.
  2. Buat File CSS: Buat file CSS baru, misalnya “style.css”, di dalam folder yang sama.
  3. Tambahkan Gambar: Letakkan gambar logo dan gambar konten di dalam folder proyek, untuk gambarnya bisa kamu unduh disini.
Artikel Terkait:   Cara Membuat Web Dengan Sublime Text 3

2. Buat Kode Struktur HTML Web

Setelah struktur folder dan file siap, buka file “index.html” dengan Notepad++ dan tambahkan struktur HTML untuk mulai membuat website, kodenya bisa kamu salin 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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Website Saya</title>
</head>
<body>

    <header>
        <div class="logo">
            <img src="logo/logo teknotask.png" alt="Logo My Website">
        </div>
        <nav>
            <ul>
                <li><a href="#">Beranda</a></li>
                <li><a href="#">Berita</a></li>
                <li><a href="#">Teknologi</a></li>
                <li><a href="#">Gaya Hidup</a></li>
                <li><a href="#">Layanan</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </nav>
        <div class="header-icons">
            <i class="fab fa-instagram"></i>
            <i class="fab fa-facebook"></i>
            <i class="fab fa-linkedin"></i>
            <i class="fas fa-search"></i>
        </div>
    </header>

    <section id="content">
        <h2>Selamat datang di Website Saya</h2>
        <p>Website ini berisi konten yang menarik dan informatif. Selamat berselancar!</p>

        <!-- Artikel 1 -->
        <article>
            <img src="gambar/ekonomi.jpeg" alt="Berita 1">
            <h3>Judul Artikel Pertama</h3>
            <p>Isi artikel pertama...</p>
        </article>

    </section>

    <footer>
        <p>© 2024 My Website. All rights reserved.</p>
    </footer>

</body>
</html>

3. Buat Style CSS Web

Selanjutnya, buka file “style.css” dengan Notepad++ dan tambahkan style CSS untuk membuat tampilan web menarik, kode lengkapnya bisa salin dibawah ini.

    body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f8f8;
}

header {
    background-color: darkgreen;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo img {
    width: 180px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    padding-right: 340px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

nav a:hover {
    color: yellow;
}

.header-icons {
    display: flex;
    gap: 20px;
}

.header-icons i {
    color: #fff;
    font-size: 1.5rem;
}

#content {
    padding: 40px 20px;
    text-align: center;
}

article {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 300px;
    margin: 20px auto;
}

article img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 2px solid #ddd;
}

article h3 {
    padding: 10px;
    color: #333;
}

article p {
    padding: 0 10px 10px 10px;
    color: #555;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

4. Buka File Index.html di Browser

Jika sudah memasukkan kode HTML dan CSS ke dalam Notepad++, buka file tersebut melalui folder proyek yang sudah kamu buat tadi dan pilih index.html lalu buka lewat Browser.

Artikel Terkait:   Cara Membuat Web Berita Dengan HTML dan CSS

5. Tampilkan Website

Buka file “index.html” dengan menggunakan browser atau live server Notepad++ untuk melihat hasilnya. Pastikan file “style.css” berada di folder yang sama, dan untuk selebihnya bisa kamu sesuaikan konten dan desain sesuai preferensi Anda.

Akhir Kata

Demikianlah ulasan mengenai cara membuat web dengan Notepad++, sebuah langkah awal menuju era digital dengan membuat web. Semoga panduan ini memberikan inspirasi dan memudahkan Sobat Tekno dalam membuat informasi digital menggunakan website. Selamat mencoba!