Cara Membuat Kode HTML Untuk Website

by

Cara Membuat Kode HTML Untuk Website – Apakah Anda ingin mempelajari cara membuat website dengan mudah? Dalam dunia yang semakin terhubung secara digital, memiliki pemahaman dasar tentang pengembangan web bisa menjadi keterampilan yang sangat berharga. Dalam panduan ini, kita akan membahas langkah-langkah detail untuk membuat kode HTML untuk website dari awal. Baik bagi pemula yang ingin memulai perjalanan mereka dalam dunia pengembangan web atau bagi siapa pun yang tertarik untuk membuat website sendiri, artikel ini akan memberikan panduan langkah demi langkah yang mudah dipahami. Mari kita mulai dari dasar-dasar, dari membuat folder proyek hingga melihat tampilan website Anda di browser!

Alat yang Disiapkan

Berikut ini beberapa alat yang disiapkan membuat kode html untuk website:

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

Cara Membuat Kode HTML Untuk Website

1. Buat Folder Project HTML Website

Langkah pertama yang harus Anda lakukan adalah membuat folder untuk proyek website Anda. Ini akan membantu Anda menjaga semua file terorganisir dengan baik. Berikan nama folder yang sesuai dengan proyek Anda, seperti “Website_Saya“.

2. Buat Folder Img

Dalam folder proyek Anda, buatlah folder bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website Anda. Download gambar disini untuk diterapkan dalam project sebagai contoh penerapan.

3. Buat Sebuah File html_website.html

Sekarang, mari buat file HTML pertama kita. Buka teks editor favorit Anda (seperti Notepad, Sublime Text, atau Visual Studio Code) dan buatlah file baru dengan nama “html_website.html“. Pastikan untuk menyimpan file ini di dalam folder proyek Anda.

Berikut ini kode html untuk membuat website:

<!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>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <h1>Welcome to Our Website</h1>
        <p>Your ultimate destination for all things amazing!</p>
    </header>
    <main>
        <section class="hero">
            <div class="hero-content">
                <h2>Discover the World of Awesome</h2>
                <p>Explore our collection of breathtaking experiences.</p>
                <a href="https://riztekno.com/" class="btn">Get Started</a>
            </div>
        </section>
        <section class="features">
            <h2>Our Features</h2>
            <div class="feature">
                <img src="img/feature1.jpg" alt="Feature 1">
                <h3>Feature 1</h3>
                <p>Description of feature 1</p>
            </div>
            <div class="feature">
                <img src="img/feature2.jpg" alt="Feature 2">
                <h3>Feature 2</h3>
                <p>Description of feature 2</p>
            </div>
            <div class="feature">
                <img src="img/feature3.jpg" alt="Feature 3">
                <h3>Feature 3</h3>
                <p>Description of feature 3</p>
            </div>
        </section>
        
    </main>
    <footer>
        <ul class="social-icons">
            <li><a href="#"><img src="img/facebook.png" alt="Facebook"></a></li>
            <li><a href="#"><img src="img/logos.png" alt="Twitter"></a></li>
            <li><a href="#"><img src="img/instagram.png" alt="Instagram"></a></li>
        </ul>
        <p>&copy; 2024 Your Company</p>
    </footer>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, kita akan membuat file CSS untuk mengubah tampilan website kita. Buatlah file baru bernama “style.css” di dalam folder proyek Anda.

Artikel Terkait:   Cara Membuat Web Company Profil dengan HTML dan CSS

Berikut ini kode css yang digunakan untuk membuat website:

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #ffffff;
}

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

main {
    padding: 20px;
}

.hero {
    background-image: url('img/background.jpg');
    background-size: cover;
    background-position: center;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    text-align: center;
}

.hero-content h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 20px;
    margin-bottom: 30px;
}

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

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

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

/* Navigation */
nav {
    text-align: center;
}
nav ul {
    list-style-type: none;
    margin-top: 10px;
}
nav ul li {
    display: inline;
    margin: 0 10px;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
}

/* Features Section */
.features {
    background-color: #f9f9f9;
    padding: 50px 0;
    text-align: center;
}
.feature {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.feature img {
    width: 200px; /* Sesuaikan lebar gambar sesuai kebutuhan Anda */
    height: auto; /* Otomatis menyesuaikan tinggi sesuai dengan lebar */
    margin-bottom: 15px;
}
.feature h3 {
    color: #333;
}
.feature p {
    color: #666;
}

/* Social Icons */
.social-icons {
    text-align: center;
    margin-top: 20px;
}
.social-icons li {
    display: inline-block;
    margin: 0 10px;
}
.social-icons li img {
    width: 30px;
    height: 30px;
}
 

5. Mengubah Tampilan Website

Dalam file “style.css“, Anda dapat mengubah gaya dan tata letak elemen-elemen HTML. Misalnya, Anda dapat mengubah warna teks, ukuran font, warna latar belakang, dan masih banyak lagi.

Artikel Terkait:   Cara Membuat Web dengan Sublime Text

6. Save & View Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, simpan perubahan Anda dan buka file “html_website.html” menggunakan browser web. Anda sekarang akan melihat tampilan halaman web Anda yang baru dan dapat melihat hasil dari kode HTML dan CSS yang telah Anda tulis!

Preview hasil

Berikut ini preview hasil kode html untuk membuat website jika Anda berhasil membuatnya:

Penutup

Dengan mengikuti langkah-langkah ini, Anda telah mengambil langkah pertama yang sangat penting dalam memahami dasar-dasar pengembangan web. Teruslah berlatih mengembangkan web dan jangan ragu untuk mengeksplorasi lebih lanjut. Dunia pengembangan web selalu berubah dan memiliki begitu banyak hal baru untuk dipelajari.

Jangan lupa untuk selalu mencoba dan bereksperimen dengan kode. Kesalahan adalah bagian alami dari proses belajar, dan melalui kesalahan itulah Anda akan belajar dan tumbuh. Semoga artikel ini telah memberikan wawasan yang berharga dan menjadi langkah awal yang menginspirasi dalam perjalanan Anda menuju menjadi seorang pengembang web yang handal. Terima kasih telah membaca!

Related posts: