Cara Membuat Web HTML dan CSS Keren dengan Notepad

Cara Membuat Web HTML dan CSS Keren dengan Notepad – Apakah Anda ingin mengungkapkan kreativitas Anda melalui sebuah website yang keren dan menarik? Tidak perlu menjadi seorang ahli dalam penggunaan software mahal. Dengan sedikit pengetahuan tentang HTML dan CSS serta menggunakan Notepad, Anda bisa mulai membuat website impian Anda sendiri. Di dalam panduan ini, kami akan memandu Anda langkah demi langkah dalam proses pembuatan website yang memukau, yang cocok bahkan bagi pemula sekalipun.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat web html dan css keren dengan notepad:

  • Perangkat laptop
  • Notepad (Editor code),
  • Chrome (Web Browser),
  • Niat yang kuat.

Cara Membuat Web HTML dan CSS Keren dengan Notepad

1. Buat Folder Project Web Keren

Langkah pertama yang perlu dilakukan adalah membuat folder untuk proyek website Anda. Ini akan membantu Anda untuk mengatur semua file dengan rapi. Misalnya, Anda dapat membuat folder bernama “Web_Keren” di desktop atau di mana pun Anda suka.

2. Buat Folder Img

Dalam folder proyek Anda, buatlah subfolder dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website Anda. Pastikan untuk memberi nama yang deskriptif agar mudah dikenali nantinya. Download gambar disini untuk dapat diterapkan kedalam project sebagai contoh awal.

3. Buat Sebuah File web_keren.html

Buka Notepad atau teks editor lainnya, lalu mulailah menulis kode HTML untuk halaman website Anda. Berikut adalah contoh kode untuk membuat halaman sederhana:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website Keren</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
    <nav>
      <ul>
        <li><a href="https://riztekno.com/">Home</a></li>
        <li><a href="https://riztekno.com/">About</a></li>
        <li><a href="https://riztekno.com/">Services</a></li>
        <li><a href="https://riztekno.com/">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section class="hero">
    <div class="hero-content">
      <h2>Explore the World with Us</h2>
      <p>Discover amazing destinations and create unforgettable memories.</p>
      <a href="https://riztekno.com/" class="btn">Learn More</a>
    </div>
  </section>

  <section class="gallery">
    <h2>Photo Gallery</h2>
    <div class="image-container">
      <img src="img/gambar1.jpg" alt="Image 1">
      <img src="img/gambar2.jpg" alt="Image 2">
      <img src="img/gambar3.jpg" alt="Image 3">
    </div>
  </section>

  <footer>
    <p>&copy; 2024 My Cool Website. All rights reserved.</p>
  </footer>
</body>
</html>
 

4. Buat File style.css

Sekarang, buatlah file baru di dalam folder proyek Anda dan beri nama “style.css“. File ini akan digunakan untuk mendesain tampilan website Anda. Berikut adalah contoh kode CSS untuk memulai:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  
  header {
    background-color: #333;
    color: #fff;
    padding: 20px;
  }
  
  nav ul {
    list-style-type: none;
  }
  
  nav ul li {
    display: inline;
    margin-right: 20px;
  }
  
  nav ul li a {
    color: #fff;
    text-decoration: none;
  }
  
  .hero {
    background-image: url('img/background.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 100px 20px;
    text-align: center;
  }
  
  .hero-content {
    max-width: 600px;
    margin: 0 auto;
  }
  
  .gallery {
    text-align: center;
    padding: 50px 20px;
  }
  
  .gallery img {
    width: 300px;
    margin: 10px;
  }
  
  footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
  }
 

5. Mengubah Tampilan Web Keren

Kembali ke file “web_keren.html” dan edit konten sesuai keinginan Anda. Anda bisa menambahkan gambar, teks, atau elemen-elemen lainnya untuk membuat website Anda lebih menarik.

Artikel Terkait:   Cara Membuat Website Properti dengan HTML dan CSS

6. Simpan & Lihat Tampilan

Setelah selesai mengedit, simpan kedua file (“web_keren.html” dan “style.css“) di dalam folder proyek Anda. Lalu, buka file “web_keren.html” dengan browser untuk melihat tampilan website Anda.

Preview hasil

Berikut ini preview hasil web html dan css keren dengan menggunakan notepad:

Penutup

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat website keren menggunakan HTML dan CSS dengan Notepad. Selamat mencoba dan jadikan kreativitas Anda mengalir!

Mulailah petualangan Anda dalam dunia web design sekarang juga. Dengan pengetahuan yang Anda dapatkan dari panduan ini, langkah berikutnya adalah melanjutkan eksplorasi Anda dan menciptakan website keren yang unik sesuai dengan visi dan impian Anda. Jangan ragu untuk mengeksplorasi lebih lanjut dan jadikan website Anda sebagai wujud dari inspirasi dan kreativitas Anda!