Cara Membuat Website Gratis dengan HTML

Cara Membaut Website Gratis dengan HTML – Jika Anda tertarik untuk belajar membuat website tetapi tidak memiliki anggaran untuk menginvestasikan dalam platform atau layanan khusus, menggunakan HTML adalah pilihan yang tepat! HTML adalah bahasa markup yang mendasari hampir semua halaman web di internet. Dengan memahami dasar-dasar HTML, Anda dapat membuat website yang sederhana namun efektif tanpa biaya apa pun.

Dalam panduan ini, riztekno akan melangkah melalui langkah-langkahnya satu per satu, mulai dari membuat folder proyek hingga menambahkan tampilan yang menarik menggunakan CSS. Jangan khawatir jika Anda baru mengenal dunia pengembangan web; panduan ini dirancang agar mudah dipahami oleh pemula sekalipun.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat website gratis dengan html:

  • Perangkat laptop,
  • Sublime Text (Text Editor Code),
  • Google Chrome (Web Browser),
  • Niat yang kuat.

Cara Membuat Website Gratis dengan HTML

1. Buat Folder Project “Website Gratis”

Langkah pertama adalah membuat folder untuk proyek website Anda. Ini akan membantu Anda menjaga semua file terorganisir dengan baik. Anda dapat memberi nama folder ini sesuai keinginan Anda, misalnya “Website_Gratis“.

2. Buat Folder “img”

Di dalam folder proyek Anda, buatlah folder bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website Anda. Pastikan untuk memberikan nama yang deskriptif agar mudah dikenali. Karena itu, download gambar disini untuk dapat membuat website gratis dengan html.

3. Buat Sebuah File “website_gratis.html”

Sekarang, mari kita mulai membuat file HTML untuk website Anda. Buka editor teks favorit Anda dan buatlah file baru dengan nama “website_gratis.html“. Anda dapat menggunakan tag <html>, <head>, dan <body> untuk struktur dasar.

Berikut ini file html yang dapat Anda buat untuk membuat website gratis:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Landing Page Website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Halo Selamat Datang</h1>
  </header>
  <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>
  <div class="content">
    <div class="image">
      <img src="img/gambar1.jpg" alt="Gambar">
    </div>
    <div class="text">
      <h1>Welcome to Our Website</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a href="#" class="btn">Learn More</a>
    </div>
  </div>
</body>
</html>
 

4. Buat File “style.css”

Untuk membuat tampilan website Anda lebih menarik, Anda dapat menggunakan CSS. Buatlah file baru dengan nama “style.css” di dalam folder proyek Anda. Di sini, Anda dapat menentukan gaya, warna, dan tata letak elemen-elemen HTML Anda.

Artikel Terkait:   Cara Membuat Search Box dengan HTML dan CSS

Berikut  ini file css yang dapat Anda tambahkan untuk membuat website gratis dengan html:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

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

header h1 {
  margin: 0;
}

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

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

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

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

.content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px;
}

.image img {
  max-width: 80%;
  height: auto;
}

.text {
  flex: 1;
  padding: 0 50px;
}

.text h1 {
  font-size: 2.5rem;
}

.text p {
  font-size: 1.2rem;
  color: #555;
}

.btn {
  display: inline-block;
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 20px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #555;
}
 

5. Mengubah Tampilan Website

Ini adalah langkah kreatif! Anda dapat mengubah tampilan website Anda sesuai dengan preferensi Anda. Anda dapat menambahkan gambar, mengatur tata letak, dan menyesuaikan gaya sesuai keinginan Anda. Pastikan untuk terus memeriksa hasilnya dengan membuka file “website_gratis.html” di browser Anda.

6. Save & View Tampilan

Setelah Anda puas dengan hasilnya, pastikan untuk menyimpan semua perubahan yang telah Anda buat. Kemudian, buka file “website_gratis.html” di browser web Anda untuk melihat tampilan akhir website Anda.

Preview hasil

Berikut ini hasil preview yang akan tampil jika Anda berhasil membuat website gratis dengan html:

Penutup

Dengan mengikuti panduan ini, Anda telah mempelajari cara membuat website secara gratis menggunakan HTML, langkah demi langkah. Mulai dari membuat folder proyek hingga menambahkan tampilan yang menarik dengan CSS, Anda telah memperoleh dasar-dasar yang diperlukan untuk memulai perjalanan Anda dalam pengembangan web.

Artikel Terkait:   Cara Membuat Website Kelurahan dengan HTML dan CSS

Ingatlah bahwa belajar adalah proses yang berkelanjutan. Teruslah eksplorasi, praktik, dan jangan ragu untuk mencoba hal-hal baru saat Anda memperdalam pemahaman Anda tentang HTML dan CSS. Dengan ketekunan dan kreativitas, Anda dapat mengembangkan keterampilan Anda dalam menciptakan website yang unik dan menarik.

Sekarang, saatnya untuk mewujudkan ide-ide kreatif Anda ke dalam website yang nyata. Tetapkan tujuan Anda, teruslah belajar, dan jadikan proyek ini sebagai batu loncatan menuju pencapaian Anda di dunia pengembangan web.

Selamat mencoba, dan semoga sukses dalam perjalanan Anda menjadi seorang pengembang web yang handal!