Ikuti Pengodean: Buat Halaman Web Sederhana
Ikuti petunjuk langkah demi langkah untuk membuat halaman yang menyenangkan
Ikuti Pengodean: Buat Halaman Web Sederhana adalah pelajaran HTML for Kids gratis di CoddyKit. Ini adalah pelajaran 1 dari 2. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML for Kids, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML for Kids mencakup 2 pelajaran total.
Membangun Halaman Web Pertama Anda
Mari Memrogram: Membangun Halaman Web Sederhana
Selamat datang di proyek pemrograman pertama Anda! Dalam pelajaran ini, kita akan membangun halaman web sederhana langkah demi langkah. Ikuti panduannya untuk melihat bagaimana bagian-bagian HTML, CSS, dan desain dasar berpadu.
Tujuan: Membuat halaman profil pribadi.
Menyiapkan File Anda
Langkah 1: Menyiapkan File Anda
Pertama, mari buat folder untuk proyek Anda dan tambahkan sebuah file HTML:
- Buat folder baru di komputer Anda bernama MyWebPage.
- Di dalam folder tersebut, buat file bernama
index.html. - Buka file tersebut di editor kode Anda (misalnya, Visual Studio Code).
Tips: Nama file index.html biasanya digunakan untuk halaman utama sebuah situs web.
Menambahkan Struktur Dasar
Langkah 2: Menambahkan Struktur Dasar
Sekarang, tambahkan struktur HTML dasar ke file Anda. Struktur ini mencakup tag <!DOCTYPE html>, <html>, <head>, dan <body>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>My Profile Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
</body>
</html>
Menambahkan Bagian Profil
Langkah 3: Menambahkan Bagian Profil
Mari tambahkan bagian untuk menampilkan nama dan deskripsi singkat Anda.
Contoh:
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
<!-- Profile Section -->
<h2>About Me</h2>
<p>Hi, I’m [Your Name]. I’m learning web development, and this is my first project!</p>
</body>
Menambahkan Gambar
Langkah 4: Menambahkan Gambar
Berikutnya, mari tambahkan foto profil menggunakan tag <img>. Simpan gambar di folder proyek dan tautkan gambar tersebut ke file HTML Anda.
Contoh:
<!-- Profile Picture -->
<img src="profile.jpg" alt="My Profile Picture" width="200" />
Menambahkan Daftar Hobi
Langkah 5: Menambahkan Daftar Hobi
Buat daftar tak berurutan berisi hobi Anda menggunakan tag <ul> dan <li>.
Contoh:
<!-- Hobbies Section -->
<h2>My Hobbies</h2>
<ul>
<li>Reading books</li>
<li>Playing video games</li>
<li>Coding projects</li>
</ul>
Menambahkan Tautan
Langkah 6: Menambahkan Tautan
Tambahkan tautan ke situs web favorit Anda menggunakan tag <a>.
Contoh:
<!-- Favorite Website -->
<h2>My Favorite Website</h2>
<p>Check out my favorite website: <a href="https://example.com" target="_blank">Example</a>.</p>
Menambahkan Gaya Sebaris
Langkah 7: Menambahkan Gaya Sebaris
Mari tambahkan beberapa gaya dasar langsung ke HTML menggunakan atribut style.
Contoh:
<h1 style="color: blue; text-align: center;">Welcome to My Page</h1>
<p style="font-size: 16px; color: gray;">This is my personal profile page.</p>
Ringkasan Proyek Halaman Web
Kerja Bagus!
Selamat! Anda telah membangun halaman web pertama Anda langkah demi langkah. Dalam proyek ini, Anda mempelajari cara menyusun HTML, menambahkan konten, dan menatanya dengan gaya sebaris. Teruslah bereksperimen dan menambahkan bagian baru ke halaman Anda!
Tips: Cobalah meng-hosting halaman Anda di GitHub Pages untuk membagikannya kepada teman-teman!
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 16
- Pelajaran
- 35
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Ikuti Pengodean: Buat Halaman Web Sederhana” gratis?
Ya — teks lengkap “Ikuti Pengodean: Buat Halaman Web Sederhana” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML for Kids, upgrade ke CoddyKit PRO. Kursus HTML for Kids mencakup 2 pelajaran total.
Apa yang akan aku pelajari di “Ikuti Pengodean: Buat Halaman Web Sederhana”?
Ikuti petunjuk langkah demi langkah untuk membuat halaman yang menyenangkan Kamu berlatih HTML for Kids dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML for Kids?
Tidak diperlukan pengalaman sebelumnya. HTML for Kids di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 2.
Berapa lama pelajaran “Ikuti Pengodean: Buat Halaman Web Sederhana” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML for Kids ini?
Ya. Setiap pelajaran HTML for Kids menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Ikuti Pengodean: Buat Halaman Web Sederhana
- Perburuan Harta Karun HTML