Cara Membuat Website Gratis dengan HTML

Cara Buat Website Gratis dengan HTML – Sobat Tekno, tahukah kamu bahwa membuat website tidak selalu mahal? Ada banyak cara membuat website gratis, dan yang lebih menarik, tidak perlu khawatir tentang kemampuan coding yang kompleks. Dalam beberapa langkah saja, Sobat Tekno bisa membangun website secara gratis!

Website saat ini sudah menjadi kebutuhan esensial bagi siapa pun, baik sebagai portofolio online, toko virtual, atau wadah untuk mengekspresikan kreativitas. Melalui website, kita dapat terhubung dengan orang dari berbagai tempat tanpa terbatas oleh jarak dan waktu.

Cara Membuat Website Gratis dengan HTML

Membuat website tanpa biaya memang bisa dilakukan, dan HTML atau Hypertext Markup Language adalah kunci utamanya. HTML adalah bahasa pemrograman dasar yang sangat mudah dipelajari, bahkan untuk pemula sekalipun. Oleh karena itu kali ini TeknoTask akan membantumu untuk membuat website yang menarik dan gratis hanya dengan menggunakan HTML..

Alat yang Diperlukan

Sebelum Sobat Tekno memulai petualangan membuat website gratis, pastikan memiliki dua alat penting:

  1. Editor Teks: Unduh dan instal editor teks seperti Notepad++ atau Sublime Text.
  2. Browser Web: Pilih browser web favorit, seperti Chrome atau Firefox.

Langkah-Langkah Membuat Website Menggunakan HTML Gratis

1. Mulai Buat Dokumen HTML

Mulai membuat dokumen HTML Buka editor teks, buat file baru, dan simpan dengan ekstensi .html, misalnya, “index.html”. Di dalam file ini, kita akan membuat kerangka dasar HTML-nya terlebih dahulu sebagai berikut:

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

</body>
</html>

2. Tambahkan Konten pada Website

Selanjutnya adalah dengan melakukan penambahan Konten di Website dalam tag <body></body>, Sobat Tekno bisa mulai menambahkan konten untuk website sesuai dengan kebutuhan dan selera. Namun kami akan membuatkan template konten pada website yang nantinya bisa kamu ubah sesuai dengan keinginan, se bagai berikut:

<header>
        <h1>TeknoTask.Com</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section id="home">
        <h2>Welcome to Our Website!</h2>
        <p>This is the home section of the website. Add your engaging content here.</p>
    </section>

    <section id="about">
        <h2>About Us</h2>
        <p>Provide information about your company or yourself in this section.</p>
    </section>

    <section id="services">
        <h2>Our Services</h2>
        <ul>
            <li>Service 1</li>
            <li>Service 2</li>
            <li>Service 3</li>
        </ul>
    </section>

    <section id="gallery">
        <h2>Image Gallery</h2>
        <div class="image-container">
            <div class="image">
                <img src="image1.webp" alt="Image 1">
                <p>Description for Image 1</p>
            </div>
            <div class="image">
                <img src="image2.webp" alt="Image 2">
                <p>Description for Image 2</p>
            </div>
            <div class="image">
                <img src="image3.webp" alt="Image 3">
                <p>Description for Image 3</p>
            </div>
            <div class="image">
                <img src="image1.webp" alt="Image 4">
                <p>Description for Image 4</p>
            </div>
            <div class="image">
                <img src="image2.webp" alt="Image 5">
                <p>Description for Image 5</p>
            </div>
            <div class="image">
                <img src="image3.webp" alt="Image 6">
                <p>Description for Image 6</p>
            </div>
        </div>
    </section>

    <footer>
        <p>© 2024 TeknoTask.Com. All rights reserved.</p>
    </footer>

3. Mempercantik Tampilan Web dengan CSS

Langkah selanjutnya adalah mempercantik tampilan website Menggunakan CSS setelah kamu menambahkan konten, hal ini untuk membuat website terlihat lebih menarik dan enak dipandang. Dengan menggunakan CSS pada suatu kerangka dan konten website di HTML, dapat membuat website yang kamu buat menjadi menawan.

<style type="text/css">body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1em;
    text-align: center;
}

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

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

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

section {
    padding: 50px;
    text-align: center;
}

footer {
    background-color: #333;
    color: #fff;
    padding: 1em;
    text-align: center;
    width: 100%;
    position: relative;
    bottom: 0;
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Membuat gambar berada di tengah-tengah */
}

.image {
    flex: 0 0 calc(33.333% - 20px); /* 33.333% untuk 3 gambar dalam satu baris */
    margin: 10px;
    text-align: center;
}

.image img {
    max-width: 100%;
    height: auto;
    max-height: 150px; /* Set a maximum height for uniformity */
}
</style>

4. Simpan Dokumen HTML dan Jalankan

Langkah terakhir untuk membuat website gratis adalah dengan menyimpan Dokumen HTML dan Jalankan Jika sudah mengikuti langkah-langkah di atas, dalam hal ini kamu bisa menyimpan file dan membukanya dengan browser web di devicemu.

Artikel Terkait:   Cara Membuat Website Pariwisata dengan HTML dan CSS

5. Contoh Hasil Pembuatan Website

Sekarang kamu telah berhasil membuat website gratis dengan mudah dan cepat hanya dengan menggunakan HTML dan CSS saja, untuk hasil dari semua kode diatas apabila digabungkan hasilnya akan seperti dibawah ini.

Seperti itulah tampilan akhir dari pembuatan website gratis sederhana hanya menggunakan HTML dan CSS saja, untuk gambarnya bisa kamu unduh disini. Dengan menggunakan kode HTML dan CSS diatas, kamu bisa membuat kreasi konten website sesuai dengan keinginanmu.

Akhir Kata

Demikianlah ulasan mengenai cara membuat website gratis dengan menggunakan HTML tanpa ribet dan bisa dilakukan oleh pemula sekalipun. Semoga informasi ini bermanfaat bagi Sobat Tekno yang ingin memulai petualangan dalam dunia pengembangan web. Selamat mencoba!