Cara Membuat Web Dengan Sublime Text 3

by

Cara Membuat Web Dengan Sublime Text 3 – Saat ini, membuat website menjadi sangat mudah, bahkan beberapa Content Management System (CMS) telah menyediakan fitur website builder, memungkinkan kita untuk membuat website tanpa perlu bersusah payah dalam coding. Namun, sangat baik jika kita memahami cara membuat website dari nol tanpa bergantung pada tools atau CMS yang ada saat ini.

Sobat, website yang sering kita temui di internet umumnya menggunakan HTML dan CSS, serta beberapa bahasa pemrograman seperti JavaScript dan PHP. Namun, untuk website sederhana yang bersifat statis, cukup menggunakan HTML dan CSS saja.

Pengertian HTML

Sebelum kita masuk ke cara membuat web menggunakan HTML dan CSS, mari kita kenali lebih dalam tentang HTML. HTML adalah singkatan dari Hypertext Markup Language. HTML memungkinkan pengguna untuk membuat dan menyusun berbagai elemen seperti heading, paragraf, link, atau tautan, dan blockquote untuk halaman sebuah website.

Penting untuk dicatat bahwa HTML bukanlah bahasa pemrograman, yang berarti HTML tidak memiliki kemampuan untuk menciptakan fungsionalitas yang dinamis.

Langkah-langkah Membuat Web HTML dan CSS dengan Sublime Text 3

Seperti sesuai tema artikel hari ini, TeknoTask akan membagikan panduan lengkap untuk membuat web hanya bermodalkan Sublime Text 4 menggunakan HTML dan CSS. Untuk lebih lengkapnya, berikut dibawah ini adalah langkah-langkah membuat web menggunakan Sublime text 3.

1. Persiapkan Struktur Folder dan File

  1. Buat Folder Proyek: Langkah awal yaitu membuka manajer file Anda dan buat folder baru untuk proyek, misalnya “MyWebsite”.
  2. Buat File HTML: Di dalam folder proyek, buat file HTML baru, misalnya “index.html” untuk memasukkan kode HTML web nantinya.
  3. Buat File CSS: Buat file CSS baru, misalnya “style.css” untuk memasukkan kode CSS, di dalam folder yang sama.
  4. Tambahkan Gambar: Buat folder bernama gambar lalu letakkan gambar dan logo di dalam folder proyek tersebut, untuk gambar dan logonya bisa Anda unduh disini.
Artikel Terkait:   Cara Membuat Layout Section Web dengan HTML dan CSS

2. Struktur HTML Dasar

Buka file “index.html” menggunakan Sublime Text 3 dan tambahkan struktur HTML untuk membuat web pribadimu, kodenya bisa salin dibawah ini.

<!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="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <title>My Website</title>
</head>
<body>
    <header>
        <img src="logo/logo teknotask.png" alt="Logo" class="logo">
        <h1>Welcome to My Website</h1>
        <div class="search-container">
            <input type="text" placeholder="Search...">
            <button type="submit"><i class="fas fa-search"></i></button>
        </div>
    </header>
    
    <section class="articles">

        <article>
            <img src="gambar/teknologi1.jpg" alt="Article 1">
            <h2>Article 1 Title</h2>
            <p>Content of Article 1...</p>
        </article>
                <article>
            <img src="gambar/politik1.jpeg" alt="Article 1">
            <h2>Article 2 Title</h2>
            <p>Content of Article 2...</p>
        </article>
                <article>
            <img src="gambar/olahraga1.jpeg" alt="Article 1">
            <h2>Article 3 Title</h2>
            <p>Content of Article 3...</p>
        </article>
                <article>
            <img src="gambar/ekonomi.webp" alt="Article 1">
            <h2>Article 4 Title</h2>
            <p>Content of Article 4...</p>
        </article>
                <article>
            <img src="gambar/teknologi2.jpg" alt="Article 1">
            <h2>Article 5 Title</h2>
            <p>Content of Article 5...</p>
        </article>      
        <article>
            <img src="gambar/olahraga2.jpeg" alt="Article 6">
            <h2>Article 6 Title</h2>
            <p>Content of Article 6...</p>
        </article>
    </section>
</body>
</html>

3. Gaya CSS untuk Web

Buka file “style.css” dan tambahkan gaya CSS untuk membuat tampilan web pribadimu menjadi lebih menarik, untuk kodenya bisa Anda salin dibawah ini.

<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: 20px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    width: 200px;
    height: 60px;
    margin-right: 10px;
}

.search-container {
    display: flex;
    align-items: center;
}

.search-container input {
    padding: 10px;
    margin-right: 5px;
}

.search-container button {
    background-color: #555;
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.articles {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
}

article {
    width: 30%;
    margin-bottom: 20px;
}

article img {
    width: 100%;
    height: 70%;
    border-radius: 8px;
}

</style>

4. Jalankan Kode

Buka browser dan buka file index.html menggunakan File -> Open File di browser atau dengan menyalin path file ke browser, detailnya seperti gambar dibawah.

Artikel Terkait:   Cara Membuat Website Keren dengan HTML dan CSS

5. Tampilkan Website

Selamat! Anda sudah membuat web pribadi hanya menggunakan Sublime Text 3, dan pastikan file “style.css” berada di folder yang sama dengan “index.html”. Anda juga bisa menyesuaikan konten dan desain sesuai preferensi website yang sudah Anda buat.

Akhir Kata

Demikianlah cara mudah membuat website dengan Sublime Text 3 hanya dengan HTML dan CSS. Semoga panduan ini memberikan inspirasi dan kemudahan bagi Sobat Tekno semua dalam membuat website sederhana namun menarik. Selamat mencoba!