Script HTML Untuk Membuat Website

by

Script HTML Untuk Membuat Website – Membuat website bisa terasa seperti tugas yang menakutkan bagi pemula. Namun, dengan sedikit panduan yang tepat, Anda bisa membuat website sederhana dalam waktu singkat. Dalam artikel ini, kami akan memberikan langkah-langkah detail untuk membuat sebuah website menggunakan HTML dan CSS.

Ketika memulai perjalanan dalam dunia pengembangan web, memahami dasar-dasar HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheets) adalah langkah awal yang sangat penting. Dengan HTML, Anda dapat membuat struktur dasar dari halaman web Anda, sedangkan CSS memungkinkan Anda untuk mengatur tampilan dan gaya dari elemen-elemen tersebut.

Tidak perlu khawatir jika Anda belum memiliki pengalaman dalam coding. Panduan ini dirancang secara khusus untuk membantu pemula memahami konsep dasar pembuatan website menggunakan HTML dan CSS. Caramembuatweb akan membimbing Anda melalui setiap langkah dengan jelas dan mudah dipahami, sehingga Anda dapat memulai perjalanan Anda dalam membangun website dengan percaya diri.

Jadi, mari kita mulai dengan langkah pertama: membuat folder untuk proyek website Anda.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk membuat website menggunakan HTML:

  • Perangkat laptop,
  • Google chrome (Web browser),
  • Sublime text (Text editor code),
  • Niat yang kuat.

Script HTML Untuk Membuat Website

1. Membuat Folder Project Website Example

Langkah pertama adalah membuat folder untuk menyimpan semua file yang terkait dengan proyek website Anda. Misalnya, beri nama folder ini “website_example” agar mudah diidentifikasi.

2. Membuat Folder Img

Di dalam folder proyek Anda, buat folder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website Anda nanti. Sebelum melanjutn lebih lanjut, download gambar disini untuk dapat diterapkan pada website Anda.

Artikel Terkait:   Cara Membuat Website Toko Online dengan HTML dan CSS

3. Membuat File website_example.html

Sekarang saatnya untuk membuat file HTML utama untuk website Anda. Buka editor teks favorit Anda dan buat file baru dengan nama “website_example.html” di dalam folder proyek Anda. Kemudian, Anda dapat memulai dengan struktur dasar HTML seperti di bawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Website Landing Page</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>
        </div>
    </header>

    <section class="main">
        <div class="container">
            <div class="content">
                <div>
                    <img src="img/gambar1.jpg" alt="Sample Image">
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <button class="btn">Learn More</button>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2024 Website Landing Page. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>
 

4. Membuat File style.css

Selanjutnya, buatlah file CSS untuk mengatur tampilan website Anda. Di dalam folder proyek Anda, buat file baru dengan nama “style.css“. File ini akan digunakan untuk menentukan gaya dan tata letak elemen-elemen di halaman Anda.

Artikel Terkait:   Cara Membuat Website Penjualan dengan HTML

Berikut ini file css yang harus Anda tambahkan untuk Website:

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

.container {
    width: 80%;
    margin: 0 auto;
}

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

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

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

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

.main {
    padding: 50px 0;
    text-align: center;
}

.main .content {
    display: flex;
    align-items: center;
}

.main .content img {
    max-width: 80%;
    border-radius: 50%;
    margin-right: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.main .content p {
    flex: 1;
    margin-right: 20px;
}


.btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #45a049;
}

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

5. Mengubah Tampilan Website

Sekarang, saatnya untuk mengubah tampilan website Anda dengan menggunakan CSS. Anda dapat menambahkan kode CSS di file “style.css” untuk mengatur warna, font, ukuran, dan tata letak elemen-elemen di halaman Anda. Berikut adalah contoh sederhana untuk memulai:

.main .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main .content img {
    max-width: 40%;
    border-radius: 50%;
    margin-right: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.main .content p {
    max-width: 50%;
}
 

6. Menyimpan & Melihat Tampilan

Setelah menambahkan konten dan gaya yang diinginkan ke dalam file HTML dan CSS Anda, simpan semua perubahan yang telah Anda buat. Kemudian, buka file “website_example.html” menggunakan browser web favorit Anda untuk melihat tampilan website Anda yang baru.

Preview hasil

Berikut ini hasil yang akan tampil nantinya jika Anda berhasil menggunakan html untuk membuat website:

Artikel Terkait:   Cara Membuat Website Restoran dengan HTML

Penutup

Membuat website bisa terasa seperti tugas yang menakutkan bagi pemula. Namun, dengan sedikit panduan yang tepat, Anda bisa membuat website sederhana dalam waktu singkat. Dalam artikel ini, kami akan memberikan langkah-langkah detail untuk membuat sebuah website menggunakan HTML dan CSS.

Ketika memulai perjalanan dalam dunia pengembangan web, memahami dasar-dasar HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheets) adalah langkah awal yang sangat penting. Dengan HTML, Anda dapat membuat struktur dasar dari halaman web Anda, sedangkan CSS memungkinkan Anda untuk mengatur tampilan dan gaya dari elemen-elemen tersebut.

Tidak perlu khawatir jika Anda belum memiliki pengalaman dalam coding. Panduan ini dirancang secara khusus untuk membantu pemula memahami konsep dasar pembuatan website menggunakan HTML dan CSS. Kami akan membimbing Anda melalui setiap langkah dengan jelas dan mudah dipahami, sehingga Anda dapat memulai perjalanan Anda dalam membangun website dengan percaya diri.

Dengan mengikuti langkah-langkah yang telah dijelaskan, Anda sekarang memiliki dasar yang kuat untuk memulai pengembangan website Anda sendiri. Ingatlah bahwa praktek akan membuat Anda semakin mahir, jadi jangan ragu untuk bereksperimen dan mencoba hal-hal baru. Semoga artikel ini bermanfaat bagi Anda dalam memulai perjalanan Anda sebagai pengembang web. Selamat mencoba dan selamat berkarya!

Related posts: