Ikut Bersama: Bina Halaman Web Mudah
Ikuti arahan langkah demi langkah untuk mencipta halaman yang menarik
Ikut Bersama: Bina Halaman Web Mudah ialah pelajaran HTML for Kids percuma di CoddyKit. Ini ialah pelajaran 1 daripada 2. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML for Kids, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML for Kids merangkumi sejumlah 2 pelajaran.
Membina Halaman Web Pertama Anda
Mari Menulis Kod: Bina Halaman Web Ringkas
Selamat datang ke projek pengekodan pertama anda! Dalam pelajaran ini, kita akan membina halaman web ringkas langkah demi langkah. Ikuti panduan ini untuk melihat cara bahagian HTML, CSS dan reka bentuk asas digabungkan.
Matlamat: Cipta halaman profil peribadi.
Menyediakan Fail Anda
Langkah 1: Menyediakan Fail Anda
Mula-mula, mari kita cipta folder untuk projek anda dan tambahkan fail HTML:
- Cipta folder baharu pada komputer anda yang dinamakan MyWebPage.
- Dalam folder tersebut, cipta fail bernama
index.html. - Buka fail itu dalam penyunting kod anda (contohnya, Visual Studio Code).
Petua: Nama fail index.html lazimnya digunakan untuk halaman utama sesebuah laman web.
Menambahkan Struktur Asas
Langkah 2: Menambahkan Struktur Asas
Kini, tambahkan struktur HTML asas pada fail anda. Struktur ini merangkumi teg <!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 Bahagian Profil
Langkah 3: Menambahkan Bahagian Profil
Mari kita tambahkan bahagian untuk memaparkan nama dan penerangan ringkas 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 Imej
Langkah 4: Menambahkan Imej
Seterusnya, mari kita tambahkan gambar profil menggunakan teg <img>. Simpan imej dalam folder projek dan pautkannya ke fail HTML anda.
Contoh:
<!-- Profile Picture -->
<img src="profile.jpg" alt="My Profile Picture" width="200" />
Menambahkan Senarai Hobi
Langkah 5: Menambahkan Senarai Hobi
Cipta senarai tidak tersusun bagi hobi anda menggunakan teg <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 Pautan
Langkah 6: Menambahkan Pautan
Tambahkan pautan ke laman web kegemaran anda menggunakan teg <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 kita tambahkan beberapa gaya asas secara terus pada HTML anda 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>
Imbas Kembali Projek Halaman Web
Syabas!
Tahniah! Anda telah membina halaman web pertama anda langkah demi langkah. Dalam projek ini, anda telah mempelajari cara menstrukturkan HTML, menambahkan kandungan dan menggayakannya dengan gaya sebaris. Teruskan bereksperimen dan tambahkan bahagian baharu pada halaman anda!
Petua: Cuba hoskan halaman anda di GitHub Pages untuk berkongsinya dengan rakan-rakan!
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 16
- Pelajaran
- 35
Soalan Lazim
Adakah pelajaran “Ikut Bersama: Bina Halaman Web Mudah” percuma?
Ya — teks penuh “Ikut Bersama: Bina Halaman Web Mudah” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus HTML for Kids, tingkat taraf kepada CoddyKit PRO. Kursus HTML for Kids merangkumi sejumlah 2 pelajaran.
Apakah yang akan saya pelajari dalam “Ikut Bersama: Bina Halaman Web Mudah”?
Ikuti arahan langkah demi langkah untuk mencipta halaman yang menarik Anda berlatih HTML for Kids menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan HTML for Kids?
Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML for Kids di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 2.
Berapa lamakah pelajaran “Ikut Bersama: Bina Halaman Web Mudah” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML for Kids ini?
Ya. Setiap pelajaran HTML for Kids menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Ikut Bersama: Bina Halaman Web Mudah
- Pemburuan Harta Karun HTML