{"id":35172,"date":"2025-06-25T13:30:42","date_gmt":"2025-06-25T06:30:42","guid":{"rendered":"https:\/\/jakarta.telkomuniversity.ac.id\/?p=35172"},"modified":"2025-06-26T13:41:17","modified_gmt":"2025-06-26T06:41:17","slug":"cara-membuat-website-pertamamu-secara-sederhana","status":"publish","type":"post","link":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/cara-membuat-website-pertamamu-secara-sederhana\/","title":{"rendered":"Cara Membuat Website Pertamamu Secara Sederhana"},"content":{"rendered":"
\n\t
\n\t\t
\n\t\t\t

Membuat website pertama bisa menjadi langkah awal yang menyenangkan untuk memasuki dunia pemrograman web. Artikel ini ditujukan untuk pemula, khususnya mahasiswa Telkom University Jakarta yang ingin mempelajari dasar-dasar pembuatan website menggunakan teknologi dasar: HTML<\/strong>, CSS<\/strong>, dan JavaScript<\/strong>.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

Apa Itu Website?<\/h2>\n\t
\n\t\t
\n\t\t\t

Website adalah sekumpulan halaman web yang saling terhubung dan diakses melalui internet. Contohnya seperti blog, toko online, hingga portal akademik. Website umumnya terdiri dari tiga komponen utama:<\/p>\n

    \n
  1. \n

    HTML (HyperText Markup Language)<\/strong> \u2013 struktur konten<\/p>\n<\/li>\n

  2. \n

    CSS (Cascading Style Sheets)<\/strong> \u2013 tampilan dan desain<\/p>\n<\/li>\n

  3. \n

    JavaScript<\/strong> \u2013 interaktivitas dan logika dinamis<\/p>\n<\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

    Alat yang Dibutuhkan<\/h2>\n\t
    \n\t\t
    \n\t\t\t

    Sebelum memulai, pastikan kamu sudah menyiapkan:<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

    \n\t\t\n\t\t
    \n\t\t\t
    \"Alat<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

    Langkah-Langkah Membuat Website Pertama<\/h2>\n\t
    \n\t\t
    \n\t\t\t

    Langkah 1: Buat Folder Proyek<\/strong><\/h3>\n
      \n
    1. \n

      Buat folder baru, misalnya bernama website-pertama<\/code><\/p>\n<\/li>\n

    2. \n

      Di dalam folder ini buat 3 file:<\/p>\n

        \n
      • \n

        index.html<\/code><\/p>\n<\/li>\n

      • \n

        style.css<\/code><\/p>\n<\/li>\n

      • \n

        script.js<\/code><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

        \n\t\t
        \n\t\t\t

        Langkah 2: Tulis Struktur Dasar HTML<\/strong><\/h3>\n

        Buka index.html<\/code> dan ketik kode berikut:<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

        \n\t\t\n\t\t
        \n\t\t\t
        \"Tulis<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
        \n\t\t
        \n\t\t\t

        Langkah 3: Tambahkan Gaya dengan CSS<\/strong><\/h3>\n

        Buka style.css<\/code> dan tambahkan kode berikut agar website terlihat menarik:<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

        \n\t\t\n\t\t
        \n\t\t\t
        \"Tambahkan<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
        \n\t\t\n\t\t
        \n\t\t\t
        \"Tambahkan<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
        \n\t\t
        \n\t\t\t

        Langkah 4: Tambahkan Interaktivitas dengan JavaScript<\/strong><\/h3>\n

        Buka script.js<\/code> dan tambahkan kode berikut:<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

        \n\t\t\n\t\t
        \n\t\t\t
        \"Tambahkan<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
        \n\t\t
        \n\t\t\t

        Langkah 5: Jalankan Website di Browser<\/strong><\/h3>\n
          \n
        1. \n

          Buka folder website-pertama<\/code><\/p>\n<\/li>\n

        2. \n

          Klik dua kali file index.html<\/code><\/p>\n<\/li>\n

        3. \n

          Website akan terbuka di browser<\/p>\n<\/li>\n

        4. \n

          Coba klik tombol \u201cKlik Aku!\u201d dan lihat hasilnya<\/p>\n<\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

          Tips Tambahan untuk Pengembangan<\/h2>\n\t
          \n\t\t
          \n\t\t\t
            \n
          • \n

            Gunakan ekstensi Live Server<\/strong> di Visual Studio Code agar website otomatis ter-refresh saat kamu menyimpan perubahan.<\/p>\n<\/li>\n

          • \n

            Upload proyek ke GitHub<\/strong> dan gunakan GitHub Pages<\/strong> untuk membuatnya bisa diakses online.<\/p>\n<\/li>\n

          • \n

            Eksplorasi lebih lanjut HTML seperti form, tabel, dan gambar.<\/p>\n<\/li>\n

          • \n

            Pelajari CSS grid dan flexbox untuk layout yang lebih kompleks.<\/p>\n<\/li>\n<\/ul>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

            Rangkuman<\/h2>\n\t
            \n\t\t\n\t\t
            \n\t\t\t
            \"Rangkuman<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
            \n\t\t
            \n\t\t\t

            Dengan memahami dan mempraktikkan dasar-dasar di atas, kamu sudah siap melangkah ke pengembangan website yang lebih kompleks, seperti membuat portofolio, blog, atau bahkan toko online sederhana.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

            \n\t
            \n\t\t
            \n\t\t\t

            Belajar membuat website adalah langkah awal yang sangat berharga untuk dunia karier digital. Bagi mahasiswa Telkom University Jakarta, keahlian ini akan sangat berguna baik untuk tugas kuliah, proyek startup, maupun portofolio kerja.<\/p>\n

            Tetap semangat, terus eksplorasi, dan jadikan website pertamamu sebagai pijakan awal menuju dunia digital yang lebih luas!<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Membuat website pertama bisa menjadi langkah awal yang menyenangkan untuk memasuki dunia pemrograman web. Artikel ini ditujukan untuk pemula, khususnya mahasiswa Telkom University Jakarta yang ingin mempelajari dasar-dasar pembuatan website menggunakan teknologi dasar: HTML, CSS, dan JavaScript. Apa Itu Website? Website adalah sekumpulan halaman web yang saling terhubung dan diakses melalui internet. Contohnya seperti blog, [...]","protected":false},"author":37,"featured_media":35173,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_wds_title":"Cara Membuat Website Pertamamu Secara Sederhana | TUJ","_wds_metadesc":"Membuat website pertama bisa menjadi langkah awal yang menyenangkan untuk memasuki dunia pemrograman web menggunakan teknologi dasar: HTML, CSS, dan JavaScript.","_wds_focus-keywords":"Cara Membuat Website,Website Sederhana","_wds_meta-robots-adv":"","_wds_meta-robots-noindex":false,"_wds_meta-robots-nofollow":false,"_wds_meta-robots-index":false,"_wds_meta-robots-follow":false,"_wds_autolinks-exclude":false,"_wds_canonical":"","_wds_opengraph":[],"_wds_twitter":[],"wds_primary_category":0,"footnotes":""},"categories":[300],"tags":[1547,1546,1548],"class_list":["post-35172","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pendidikan","tag-cara-membuat-website","tag-cara-membuat-website-pertamamu-secara-sederhana","tag-website-sederhana"],"_links":{"self":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/35172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/comments?post=35172"}],"version-history":[{"count":1,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/35172\/revisions"}],"predecessor-version":[{"id":35187,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/35172\/revisions\/35187"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media\/35173"}],"wp:attachment":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media?parent=35172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/categories?post=35172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/tags?post=35172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}