Gaya Sebaris
Ubah tampilan elemen Anda secara langsung dalam HTML
Gaya Sebaris adalah pelajaran HTML for Kids gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. 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 4 pelajaran total.
Menambahkan Warna Latar
Anda dapat membuat elemen lebih menonjol dengan menggunakan properti background-color.
Contoh:
<p style="background-color: yellow;">This text has a yellow background.</p>
Gaya Sebaris: Menambahkan Penataan Sederhana ke HTML Anda
Selamat datang di pelajaran tentang gaya sebaris! Hari ini, Anda akan mempelajari cara menata elemen secara langsung di HTML menggunakan atribut style.
Apa Itu Gaya Sebaris?
Gaya sebaris memungkinkan Anda menambahkan CSS secara langsung ke tag HTML menggunakan atribut style. Ini adalah cara paling sederhana untuk menata halaman Anda.
Contoh:
<p style="color: red;">This is red text!</p>
color: red; mengubah warna teks menjadi merah.
Mengubah Ukuran Font
Gunakan properti font-size untuk mengubah ukuran teks Anda.
Contoh:
<p style="font-size: 24px;">This text is 24 pixels large.</p>
Menggabungkan Beberapa Gaya
Gaya sebaris memungkinkan Anda menggabungkan beberapa properti CSS. Pisahkan setiap properti dengan titik koma ;.
Contoh:
<p style="color: white; background-color: black; font-size: 18px;">
This text has multiple styles!
</p>
Menata Elemen Lain
Gaya sebaris dapat digunakan pada semua elemen HTML, seperti judul, tombol, dan gambar.
Contoh:
<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: coral; color: white; padding: 10px;">
Styled Button
</button>
Coba Sendiri
Mari kita membuat halaman web menggunakan gaya sebaris. Berikut contoh untuk memulai:
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<h1 style="color: purple;">Welcome to My Styled Page</h1>
<p style="color: gray; font-size: 16px;">
This is an example of inline styling.
</p>
<button style="background-color: lightblue; padding: 10px; border: none;">
Click Me!
</button>
</body>
</html>
Kerja Bagus!
Selamat! Anda telah mempelajari cara menggunakan gaya sebaris untuk menambahkan penataan sederhana dan efektif ke elemen HTML Anda. Gaya sebaris sangat berguna untuk perubahan cepat, tetapi seiring bertambahnya halaman web Anda, Anda akan memerlukan teknik penataan yang lebih canggih. Pada pelajaran berikutnya, kita akan mempelajari dasar-dasar CSS. Bersiaplah untuk merancang halaman web profesional!
Menggunakan Atribut style
Apa Itu Gaya Sebaris?
Gaya sebaris memungkinkan Anda menambahkan CSS secara langsung ke tag HTML menggunakan atribut style. Ini adalah cara paling sederhana untuk menata halaman Anda.
Contoh:
<p style="color: red;">This is red text!</p>
color: red; mengubah warna teks menjadi merah.
<p style="color: red;">This is red text.</p>
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Gaya Sebaris” gratis?
Ya — teks lengkap “Gaya Sebaris” 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 4 pelajaran total.
Apa yang akan aku pelajari di “Gaya Sebaris”?
Ubah tampilan elemen Anda secara langsung dalam HTML 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 4.
Berapa lama pelajaran “Gaya Sebaris” 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.