Panduan Lengkap: Cara Membuat Script HTML untuk Pemula

Apakah Anda ingin belajar cara membuat script HTML? Artikel ini akan memberikan panduan lengkap untuk pemula yang ingin menguasai dasar-dasar pemrograman HTML. HTML, atau Hypertext Markup Language, adalah bahasa markup yang digunakan untuk membuat dan menyusun konten pada halaman web. Dengan memahami dasar-dasar HTML, Anda akan dapat membuat halaman web yang menarik dan fungsional.

Sebelum memulai, penting untuk dicatat bahwa HTML adalah salah satu bahasa markup yang paling penting dalam pengembangan web. Artikel ini akan memberikan langkah-langkah yang jelas dan terperinci, sehingga Anda dapat memulai perjalanan pemrograman HTML Anda dengan percaya diri.

Pengenalan HTML

Pada sesi ini, Anda akan mempelajari apa itu HTML, bagaimana browser membaca dan menampilkan kode HTML, dan perbedaan antara elemen, atribut, dan tag HTML.

HTML, singkatan dari Hypertext Markup Language, adalah bahasa markup yang digunakan untuk membangun dan menyusun struktur halaman web. HTML menggunakan tag-tag untuk mengelompokkan dan mengorganisir konten, seperti teks, gambar, tautan, dan lainnya. Browser kemudian membaca kode HTML dan menampilkan halaman web sesuai dengan instruksi yang diberikan.

Apa itu Elemen, Atribut, dan Tag HTML?

Dalam HTML, elemen, atribut, dan tag berperan penting dalam membangun struktur halaman web. Elemen adalah bagian-bagian dasar dalam sebuah dokumen HTML, seperti judul, paragraf, gambar, dan lainnya. Setiap elemen memiliki tag yang digunakan untuk mengelompokkannya. Misalnya, tag

digunakan untuk menandai awal dan akhir paragraf.

Atribut adalah informasi tambahan yang diberikan pada suatu elemen untuk memberikan instruksi lebih lanjut. Atribut didefinisikan di dalam tag elemen dan memiliki format “nama_atribut=nilai”. Misalnya, atribut “src” pada tag digunakan untuk menentukan sumber gambar yang akan ditampilkan.

Bagaimana Browser Membaca dan Menampilkan Kode HTML?

Saat Anda membuka halaman web di browser, browser akan membaca kode HTML secara berurutan dari atas ke bawah. Browser akan mengenali tag-tag HTML dan menginterpretasikan instruksi yang terkandung dalam kode tersebut. Browser akan menampilkan teks, gambar, tautan, dan elemen-elemen lain sesuai dengan instruksi yang diberikan dalam kode HTML.

Browser juga memiliki mesin render yang bertugas mengubah kode HTML menjadi tampilan visual yang dapat dilihat oleh pengguna. Mesin render ini akan mengatur tata letak, ukuran, dan warna elemen-elemen dalam halaman web sesuai dengan aturan yang ditentukan dalam kode HTML dan CSS.

Struktur Dasar HTML

Anda akan mempelajari struktur dasar sebuah dokumen HTML, termasuk penggunaan tag , , dan . Selain itu, Anda juga akan memahami pentingnya penggunaan tag , , dan <link>.</p> <p>Saat Anda membuat halaman web dengan HTML, penting untuk memahami struktur dasar yang harus ada dalam setiap dokumen HTML. Struktur dasar ini terdiri dari beberapa tag yang diperlukan untuk mengorganisir dan mengatur konten halaman web.</p> <h3>Tag <html></h3> <p>Tag <html> digunakan untuk menandai awal dan akhir dari dokumen HTML. Semua elemen dalam halaman web harus dimulai dan diakhiri dengan tag <html>. Tag <html> biasanya diletakkan pada baris pertama dan baris terakhir dalam kode HTML.</p> <h3>Tag <head></h3> <p>Tag <head> digunakan untuk menyisipkan informasi tentang halaman web yang tidak ditampilkan secara langsung pada halaman web tersebut. Informasi yang biasanya disisipkan dalam tag <head> meliputi judul halaman, pengaturan karakteristik halaman, dan tautan ke file CSS atau JavaScript eksternal.</p> <h3>Tag <body data-rsssl=1></h3> <p>Tag <body data-rsssl=1> digunakan untuk menandai konten utama yang akan ditampilkan pada halaman web. Semua elemen seperti teks, gambar, tautan, dan lainnya harus ditempatkan di dalam tag <body data-rsssl=1>. Konten yang ditempatkan di dalam tag <body data-rsssl=1> akan ditampilkan pada halaman web saat diakses oleh pengguna.</p> <h3>Tag <title></h3> <p>Tag <title> digunakan untuk menentukan judul halaman web yang akan ditampilkan di bilah judul browser. Konten yang ditempatkan di dalam tag <title> akan menjadi judul halaman saat halaman web diakses oleh pengguna atau ditandai sebagai favorit.</p> <h3>Tag </h3> <p>Tagdigunakan untuk menyisipkan informasi metadata tentang halaman web. Metadata adalah informasi tambahan tentang halaman web yang tidak ditampilkan secara langsung pada halaman web itu sendiri. Contoh informasi metadata yang dapat disisipkan melalui tagadalah deskripsi halaman, kata kunci, dan pengaturan karakteristik halaman.</p> <h3>Tag <link></h3> <p>Tag <link> digunakan untuk menghubungkan halaman web dengan file CSS atau JavaScript eksternal. Misalnya, jika Anda ingin menggunakan gaya CSS untuk mengatur tampilan halaman web Anda, Anda dapat menautkan file CSS eksternal melalui tag <link>.</p> <h2>Membuat Paragraf dan Heading</h2> <p>Sesi ini akan membahas cara membuat paragraf dan heading menggunakan tag </p> <p> dan </p> <h1>–</p> <h6>. Anda akan mempelajari perbedaan antara heading dan paragraf, serta bagaimana memilih heading yang tepat sesuai dengan hierarki konten Anda.</p> <p>Paragraf dan heading adalah elemen-elemen penting dalam struktur konten halaman web. Paragraf digunakan untuk menampilkan teks yang terdiri dari satu atau beberapa kalimat, sedangkan heading digunakan untuk menandai judul atau subjudul pada halaman web.</p> <h3>Tag </p> </h3> <p>Tag </p> <p> digunakan untuk menandai awal dan akhir dari suatu paragraf. Paragraf biasanya berisi teks yang akan ditampilkan pada halaman web. Misalnya, jika Anda ingin menampilkan deskripsi atau konten artikel, Anda dapat menulis teks tersebut di antara tag </p> <p>.</p> <h3>Tag </p> <h1>–</p> <h6></h3> <p>Tag </p> <h1>–</p> <h6> digunakan untuk menandai judul atau subjudul pada halaman web. Tag </p> <h1> digunakan untuk judul utama halaman, sedangkan tag </p> <h2>–</p> <h6> digunakan untuk subjudul dengan tingkatan yang berbeda. Semakin tinggi angka pada tag heading, semakin kecil ukuran font dan tingkatan pentingnya.</p> <h3>Memilih Heading yang Tepat</h3> <p>Saat memilih heading, penting untuk memperhatikan hierarki konten pada halaman web Anda. Heading yang tepat akan membantu pengguna dan mesin pencari memahami struktur dan urutan informasi pada halaman web. Misalnya, judul utama halaman web biasanya menggunakan tag </p> <h1>, sedangkan subjudul menggunakan tag </p> <h2>–</p> <h6> sesuai dengan tingkatan hierarkinya.</p> <h2>Menambahkan Gambar</h2> <p>Anda akan belajar cara menambahkan gambar ke halaman HTML menggunakan tag <img>. Sesi ini juga akan membahas atribut penting seperti src, alt, dan width untuk memastikan gambar tampil dengan benar dan responsif pada berbagai perangkat.</p> <p>Gambar adalah elemen visual yang dapat memperkaya konten halaman web Anda. Dengan menambahkan gambar, Anda dapat membuat halaman web lebih menarik dan informatif. HTML menyediakan tag <img> yang digunakan untuk menampilkan gambar pada halaman web.</p> <h3>Tag <img></h3> <p>Tag <img> digunakan untuk menampilkan gambar pada halaman web. Tag ini memiliki beberapa atribut yang perlu Anda perhatikan agar gambar dapat tampil dengan benar dan sesuai dengan kebutuhan Anda.</p> <h3>Atribut src</h3> <p>Atribut src pada tag <img> adalah atribut yang digunakan untuk menentukan sumber gambar yang akan ditampilkan. Anda perlu memberikan nilai atribut src dengan URL atau path ke file gambar yang ingin Anda tampilkan. Misalnya, jika gambar berada dalam folder “img” di direktori proyek Anda, Anda dapat menuliskan nilai atribut src sebagai `<img decoding="async" src="img/nama_gambar.jpg">`.</p> <h3>Atribut alt</h3> <p>Atribut alt pada tag <center><img fetchpriority="high" decoding="async" src="img/nama_gambar.jpg" alt="Deskripsi Gambar" width="800" height="500" style="display: block; width: 100%; height: auto"><small>Source: <a href="://None" rel="nofollow">None</a></small></center>`.</p> <h3>Atribut width</h3> <p>Atribut width pada tag <img> adalah atribut yang digunakan untuk menentukan lebar gambar dalam piksel. Anda dapat memberikan nilai atribut width dalam angka piksel, misalnya `<img decoding="async" src="img/nama_gambar.jpg" width="300">` akan menampilkan gambar dengan lebar 300 piksel. Perhatikan bahwa penggunaan atribut width tanpa atribut height dapat menyebabkan gambar terdistorsi. Sebaiknya, atur lebar gambar dengan proporsi yang sesuai agar gambar tetap terlihat proporsional.</p> <h3>Gambar Responsif</h3> <p>Untuk memastikan gambar tampil dengan baik pada berbagai perangkat dan ukuran layar, Anda dapat menggunakan teknik responsif. Teknik ini mengatur gambar agar dapat menyesuaikan ukuran dan proporsi dengan tampilan halaman web. Salah satu cara untuk mencapai gambar responsif adalah dengan menggunakan CSS. Anda dapat mengatur lebar maksimal gambar menggunakan properti CSS `max-width: 100%;`. Dengan demikian, gambar akan menyesuaikan ukurannya dengan lebar container tempat gambar tersebut ditampilkan.</p> <h2>Membuat Tautan (Link)</h2> <p>Sesi ini akan menjelaskan cara membuat tautan ke halaman web lain menggunakan tag <a>. Anda akan mempelajari cara menambahkan teks tautan dan URL, serta cara membuka tautan dalam tab baru atau dalam jendela yang sama.</p> <p>Tautan atau link memungkinkan pengguna untuk berpindah antara halaman web yang berbeda. Dalam HTML, tautan dibuat menggunakan tag <a>, yang merupakan singkatan dari anchor atau “pengait”. Tautan biasanya ditampilkan sebagai teks yang dapat diklik, dan ketika pengguna mengkliknya, mereka akan diarahkan ke halaman web atau sumber yang ditentukan dalam atribut href.</p> <h3>Tag <a></h3> <p>Tag <a> digunakan untuk membuat tautan dalam halaman web. Tag ini memiliki atribut href yang digunakan untuk menentukan URL tujuan tautan. Misalnya, jika Anda ingin membuat tautan ke halaman web Google, Anda dapat menggunakan kode `<a href="https://www.google.com">Tautan ke Google</a>`. Ketika pengguna mengklik teks “Tautan ke Google”, mereka akan diarahkan ke halaman web Google.</p> <h3>Teks Tautan</h3> <p>Teks tautan adalah teks yang akan ditampilkan sebagai tautan yang dapat diklik. Anda dapat menulis teks apa pun yang sesuai dengan konteks dan tujuan tautan. Penting untuk memilih teks yang jelas dan deskriptif agar pengguna dapat memahami tujuan tautan sebelum mengkliknya. Misalnya, jika tautan tersebut mengarah ke halaman profil Anda, Anda dapat menggunakan teks “Profil Saya” sebagai teks tautan.</p> <h3>Atribut href</h3> <p>Atribut href pada tag <a> adalah atribut yang digunakan untuk menentukan URL tujuan tautan. Anda perlu memberikan nilai atribut href dengan URL lengkap atau alamat relatif ke halaman web atau sumber yang ingin Anda tautkan. Misalnya, jika Anda ingin membuat tautan ke halaman web lain di situs Anda, Anda dapat menuliskan atribut href sebagai `<a href="halaman_lain.html">Tautan ke Halaman Lain</a>`. Jika Anda ingin membuat tautan eksternal ke halaman web di luar situs Anda, Anda perlu menuliskan URL lengkap, seperti `<a href="https://www.example.com">Tautan Eksternal</a>`.</p> <h3>Membuka Tautan di Tab Baru</h3> <p>Secara default, ketika pengguna mengklik tautan, halaman web tujuan akan terbuka di jendela atau tab yang sama. Namun, Anda juga dapat mengatur tautan agar terbuka di tab baru atau jendela yang berbeda. Anda dapat melakukannya dengan menambahkan atribut target dengan nilai “_blank”. Misalnya, `<a href="halaman_lain.html" target="_blank" rel="noopener">Tautan di Tab Baru</a>` akan membuat tautan tersebut terbuka di tab baru.</p> <h2>Membuat Daftar</h2> <p>Anda akan belajar cara membuat daftar dengan menggunakan tag </p> <ul> (daftar tak terurut) dan </p> <ol> (daftar terurut). Sesi ini juga akan membahas cara menambahkan elemen dalam daftar menggunakan tag </p> <li>.</p> <p>Daftar adalah cara yang efektif untuk mengorganisir dan menyajikan informasi dalam bentuk yang terstruktur. Dalam HTML, terdapat dua jenis daftar yang umum digunakan: daftar tak terurut dan daftar terurut.</p> <h3>Daftar Tak Terurut (Unordered List)</h3> <p>Daftar tak terurut digunakan untuk menyajikan informasi dalam bentuk poin-poin tanpa urutan tertentu. Dalam HTML, daftar tak terurut dibuat menggunakan tag </p> <ul>, yang merupakan singkatan dari unordered list atau “daftar tak terurut”. Setiap poin dalam daftar ditandai dengan tag </p> <li>, yang merupakan singkatan dari list item atau “elemen daftar”.</p> <h3>Tag </p> <ul></h3> <p>Tag </p> <ul> digunakan untuk membungkus daftar tak terurut. Setiap elemen dalam daftar tak terurut ditempatkan di antara tag </p> <ul> dan </ul> <p>. Misalnya, untuk membuat daftar tak terurut dengan tiga poin, Anda dapat menggunakan kode berikut:</p> <p>“`html</p> <ul> <li>Poin 1</li> <li>Poin 2</li> <li>Poin 3</li> </ul> <p>“`</p> <h3>Daftar Terurut (Ordered List)</h3> <p>Daftar terurut digunakan untuk menyajikan informasi dalam bentuk poin-poin dengan urutan tertentu. Dalam HTML, daftar terurut dibuat menggunakan tag </p> <ol>, yang merupakan singkatan dari ordered list atau “daftar terurut”. Seperti daftar tak terurut, setiap poin dalam daftar terurut ditandai dengan tag </p> <li>.</p> <h3>Tag </p> <ol></h3> <p>Tag </p> <ol> digunakan untuk membungkus daftar terurut. Setiap elemen dalam daftar terurut ditempatkan di antara tag </p> <ol> dan </ol> <p>. Misalnya, untuk membuat daftar terurut dengan tiga poin, Anda dapat menggunakan kode berikut:</p> <p>“`html</p> <ol> <li>Poin 1</li> <li>Poin 2</li> <li>Poin 3</li> </ol> <p>“`</p> <h3>Menambahkan Elemen dalam Daftar</h3> <p>Dalam daftar, Anda juga dapat menambahkan elemen lain, seperti gambar atau tautan, di dalam setiap poin. Untuk melakukannya, Anda hanya perlu menempatkan elemen-elemen tersebut di dalam tag </p> <li>. Misalnya, untuk menambahkan tautan dalam daftar terurut, Anda dapat menggunakan kode berikut:</p> <p>“`html</p> <ol> <li><a href="halaman_1.html">Tautan ke Halaman 1</a></li> <li><a href="halaman_2.html">Tautan ke Halaman 2</a></li> <li><a href="halaman_3.html">Tautan ke Halaman 3</a></li> </ol> <p>“`</p> <h2>Membuat Formulir</h2> <p>Pada sesi ini, Anda akan mempelajari cara membuat formulir interakt>if menggunakan tag </p> <form>. Anda akan mempelajari penggunaan elemen seperti input, select, textarea, dan button untuk mengumpulkan informasi dari pengguna.</p> <p>Formulir merupakan elemen penting dalam pengembangan halaman web yang interaktif. Dengan menggunakan formulir, pengguna dapat mengirimkan dan mengisi informasi seperti nama, alamat email, dan komentar ke server. HTML menyediakan berbagai elemen yang digunakan untuk membangun formulir, seperti input, select, textarea, dan button.</p> <h3>Tag </p> <form></h3> <p>Tag </p> <form> digunakan untuk membungkus elemen-elemen dalam formulir. Setiap elemen formulir ditempatkan di antara tag </p> <form> dan </form> <p>. Atribut penting yang digunakan pada tag </p> <form> adalah action dan method.</p> <h3>Atribut action</h3> <p>Atribut action pada tag </p> <form> digunakan untuk menentukan URL atau skrip yang akan diproses ketika formulir dikirimkan. Misalnya, jika Anda ingin mengirimkan formulir ke skrip pemrosesan di halaman “proses.php”, Anda dapat menulis kode berikut:</p> <p>“`html</p> <form action="proses.php" method="post"><!-- elemen-elemen formulir --></form> <p>“`</p> <h3>Atribut method</h3> <p>Atribut method pada tag </p> <form> digunakan untuk menentukan metode pengiriman data formulir ke server. Ada dua nilai yang umum digunakan untuk atribut method: “get” dan “post”.</p> <p>Metode “get” mengirimkan data formulir melalui URL. Data formulir akan terlihat pada URL dan dapat dengan mudah dilihat oleh pengguna. Metode ini umum digunakan ketika Anda ingin mengirimkan data yang tidak sensitif atau ketika Anda ingin memperbolehkan pengguna untuk bookmark atau berbagi URL dengan data formulir yang sudah diisi.</p> <p>Metode “post” mengirimkan data formulir secara tersembunyi melalui permintaan HTTP. Data formulir tidak akan terlihat pada URL dan lebih aman untuk pengiriman data yang sensitif, seperti kata sandi. Metode ini umum digunakan ketika Anda mengirimkan data yang lebih besar atau mengandung informasi sensitif.</p> <h3>Elemen Input</h3> <p>Elemen input digunakan untuk menerima input dari pengguna, seperti teks, angka, tanggal, dan lainnya. Elemen input memiliki beberapa jenis yang ditentukan oleh atribut type.</p> <h3>Input Teks</h3> <p>Input teks digunakan untuk menerima input teks singkat dari pengguna. Untuk membuat input teks, Anda dapat menggunakan kode berikut:</p> <p>“`html<input type="text" name="nama" placeholder="Masukkan nama Anda">“`</p> <p>Pada contoh di atas, atribut type diberikan nilai “text” untuk menentukan jenis input teks. Atribut name digunakan untuk memberikan nama pada input, yang akan digunakan untuk mengidentifikasi data ketika formulir dikirimkan ke server. Atribut placeholder digunakan untuk memberikan petunjuk atau teks contoh pada input yang akan ditampilkan saat input kosong.</p> <h3>Input Angka</h3> <p>Input angka digunakan untuk menerima input angka dari pengguna. Untuk membuat input angka, Anda dapat menggunakan kode berikut:</p> <p>“`html<input type="number" name="umur" min="0" max="100">“`</p> <p>Pada contoh di atas, atribut type diberikan nilai “number” untuk menentukan jenis input angka. Atribut name dan placeholder digunakan dengan cara yang sama seperti pada input teks. Atribut min dan max digunakan untuk menentukan rentang nilai yang dapat dimasukkan oleh pengguna.</p> <h3>Input Checkbox</h3> <p>Input checkbox digunakan untuk menerima input berupa pilihan yang dapat dipilih atau tidak oleh pengguna. Untuk membuat input checkbox, Anda dapat menggunakan kode berikut:</p> <p>“`html<input type="checkbox" name="hobi[]" value="berenang"> Berenang<br /><input type="checkbox" name="hobi[]" value="membaca"> Membaca<br /><input type="checkbox" name="hobi[]" value="bersepeda"> Bersepeda<br />“`</p> <p>Pada contoh di atas, atribut type diberikan nilai “checkbox” untuk menentukan jenis input checkbox. Atribut name digunakan untuk memberikan nama pada input, yang akan digunakan untuk mengidentifikasi data ketika formulir dikirimkan ke server. Atribut value digunakan untuk memberikan nilai yang akan dikirimkan ke server jika checkbox tersebut dipilih.</p> <h3>Input Radio</h3> <p>Input radio digunakan untuk menerima input berupa pilihan tunggal dari beberapa opsi. Hanya satu opsi yang dapat dipilih oleh pengguna. Untuk membuat input radio, Anda dapat menggunakan kode berikut:</p> <p>“`html<input type="radio" name="jenis_kelamin" value="laki-laki"> Laki-laki<br /><input type="radio" name="jenis_kelamin" value="perempuan"> Perempuan<br />“`</p> <p>Pada contoh di atas, atribut type diberikan nilai “radio” untuk menentukan jenis input radio. Atribut name digunakan untuk memberikan nama pada input, yang akan digunakan untuk mengidentifikasi data ketika formulir dikirimkan ke server. Atribut value digunakan untuk memberikan nilai yang akan dikirimkan ke server jika opsi tersebut dipilih.</p> <h3>Textarea</h3> <p>Textarea digunakan untuk menerima input teks panjang dari pengguna. Untuk membuat textarea, Anda dapat menggunakan kode berikut:</p> <p>“`html<textarea name="komentar" rows="4" cols="50" placeholder="Tulis komentar Anda"></textarea>“`</p> <p>Pada contoh di atas, atribut name digunakan untuk memberikan nama pada textarea, yang akan digunakan untuk mengidentifikasi data ketika formulir dikirimkan ke server. Atribut rows dan cols digunakan untuk menentukan jumlah baris dan kolom yang akan ditampilkan pada textarea. Atribut placeholder digunakan untuk memberikan petunjuk atau teks contoh pada textarea yang akan ditampilkan saat textarea kosong.</p> <h3>Select</h3> <p>Select digunakan untuk membuat dropdown atau pilihan dari sejumlah opsi. Pengguna dapat memilih salah satu opsi dari dropdown. Untuk membuat select, Anda dapat menggunakan kode berikut:</p> <p>“`html<select name="negara"><option value="id">Indonesia</option><option value="us">Amerika Serikat</option><option value="jp">Jepang</option></select>“`</p> <p>Pada contoh di atas, tag <select> digunakan untuk membungkus elemen-elemen<option>. Atribut name digunakan untuk memberikan nama pada select, yang akan digunakan untuk mengidentifikasi data ketika formulir dikirimkan ke server. Setiap elemen<option> digunakan untuk menentukan pilihan dalam dropdown. Atribut value pada elemen<option> digunakan untuk memberikan nilai yang akan dikirimkan ke server jika opsi tersebut dipilih. Teks yang ada di dalam elemen<option> adalah teks yang akan ditampilkan dalam dropdown.</p> <h3>Button</h3> <p>Button digunakan untuk membuat tombol yang dapat diklik oleh pengguna. Button dapat digunakan untuk mengirimkan formulir atau menjalankan aksi tertentu. Untuk membuat button, Anda dapat menggunakan kode berikut:</p> <p>“`html<button type="submit">Kirim</button>“`</p> <p>Pada contoh di atas, atribut type diberikan nilai “submit” untuk menentukan bahwa button tersebut digunakan untuk mengirimkan formulir. Anda juga dapat menggunakan nilai “reset” jika Anda ingin membuat tombol yang menghapus atau mereset nilai-nilai dalam formulir. Teks yang ada di dalam tag <button> adalah teks yang akan ditampilkan pada tombol.</p> <h2>Mengatur Tampilan dengan CSS</h2> <p>Sesi ini akan membahas pengenalan singkat tentang Cascading Style Sheets (CSS) dan cara menghubungkan file CSS eksternal ke halaman HTML. Anda juga akan belajar cara menggunakan beberapa properti CSS dasar untuk mengatur tampilan halaman web Anda.</p> <p>CSS atau Cascading Style Sheets adalah bahasa yang digunakan untuk mengatur tampilan dan tata letak elemen-elemen pada halaman web. CSS memungkinkan Anda untuk mengubah warna, ukuran, font, dan berbagai aspek visual lainnya untuk menciptakan halaman web yang menarik dan konsisten.</p> <h3>Menyisipkan CSS Eksternal</h3> <p>Anda dapat menggunakan CSS eksternal untuk memisahkan gaya dan tata letak dari struktur HTML. Dengan menggunakan file CSS eksternal, Anda dapat mengelola tampilan halaman web secara terpisah dan menghubungkannya>dengan halaman HTML Anda. Untuk menyisipkan CSS eksternal, Anda perlu membuat file CSS terpisah dengan ekstensi .css. Misalnya, Anda dapat membuat file dengan nama “style.css”.</p> <p>Setelah Anda membuat file CSS eksternal, Anda perlu menghubungkannya ke halaman HTML. Anda dapat melakukannya dengan menambahkan tag <link> di dalam tag <head> pada halaman HTML. Berikut adalah contoh kode untuk menghubungkan file CSS eksternal:</p> <p>“`html<head><link rel="stylesheet" href="style.css"></head>“`</p> <p>Pada contoh di atas, atribut rel diberikan nilai “stylesheet” untuk menunjukkan bahwa file yang dihubungkan adalah file CSS. Atribut href digunakan untuk menentukan URL atau path relatif ke file CSS eksternal.</p> <h3>Properti CSS Dasar</h3> <p>Setelah Anda menghubungkan file CSS eksternal, Anda dapat mulai menggunakan properti CSS untuk mengatur tampilan halaman web Anda. Berikut adalah beberapa properti CSS dasar yang dapat Anda gunakan:</p> <h4>Properti Color</h4> <p>Properti color digunakan untuk mengubah warna teks. Anda dapat menggunakan nilai warna dalam berbagai format, seperti nama warna (misalnya “red” atau “blue”), kode warna heksadesimal (misalnya “#ff0000” untuk merah), atau kode warna RGB (misalnya “rgb(255, 0, 0)” untuk merah).</p> <p>“`cssp {color: blue;}“`</p> <h4>Properti Font-size</h4> <p>Properti font-size digunakan untuk mengubah ukuran teks. Anda dapat menggunakan nilai ukuran dalam berbagai format, seperti piksel (misalnya “16px”), persen (misalnya “150%”), atau ukuran relatif (misalnya “1.2em”).</p> <p>“`cssh1 {font-size: 24px;}“`</p> <h4>Properti Font-family</h4> <p>Properti font-family digunakan untuk mengubah jenis font teks. Anda dapat menggunakan nama font yang umum, seperti “Arial” atau “Times New Roman”, atau menggunakan font yang telah diunduh dan disimpan di server Anda.</p> <p>“`cssbody {font-family: Arial, sans-serif;}“`</p> <h4>Properti Background-color</h4> <p>Properti background-color digunakan untuk mengubah warna latar belakang elemen. Anda dapat menggunakan nilai warna dalam format yang sama seperti properti color.</p> <p>“`cssbody {background-color: #f0f0f0;}“`</p> <h4>Properti Margin dan Padding</h4> <p>Properti margin dan padding digunakan untuk mengatur ruang di sekitar elemen. Properti margin mengatur ruang di luar elemen, sementara properti padding mengatur ruang di dalam elemen.</p> <p>“`cssh2 {margin-top: 20px;padding: 10px;}“`</p> <h4>Properti Border</h4> <p>Properti border digunakan untuk menambahkan garis di sekitar elemen. Anda dapat mengatur jenis garis, ketebalan garis, dan warna garis.</p> <p>“`cssimg {border: 1px solid black;}“`</p> <p>Inilah beberapa properti CSS dasar yang dapat Anda gunakan untuk mengatur tampilan halaman web Anda. Namun, terdapat banyak properti CSS lainnya yang dapat Anda eksplorasi untuk menciptakan tampilan yang unik dan menarik.</p> <h2>Membuat Tabel</h2> <p>Anda akan mempelajari cara membuat tabel dengan menggunakan tag </p> <table>, </p> <tr>, </p> <th>, dan </p> <td>. Sesi ini juga akan membahas cara mengatur kolom dan baris, serta cara menambahkan judul pada tabel.</p> <p>Tabel digunakan untuk menyajikan data secara terstruktur dalam bentuk baris dan kolom. Dalam HTML, tabel dibuat dengan menggunakan tag </p> <table>, </p> <tr>, </p> <th>, dan </p> <td>.</p> <h3>Tag </p> <table></h3> <p>Tag </p> <table> digunakan untuk membungkus seluruh tabel. Semua elemen tabel, seperti baris dan sel, ditempatkan di antara tag </p> <table> dan </table> <p>.</p> <h3>Tag </p> <tr></h3> <p>Tag </p> <tr> digunakan untuk mendefinisikan baris dalam tabel. Setiap elemen baris, seperti sel, ditempatkan di antara tag </p> <tr> dan </tr> <p>.</p> <h3>Tag </p> <th></h3> <p>Tag </p> <th> digunakan untuk mendefinisikan sel judul dalam tabel. Sel judul biasanya digunakan untuk menyajikan informasi tentang isi kolom atau sebagai judul tabel itu sendiri. Setiap sel judul ditempatkan di antara tag </p> <th> dan </th> <p>.</p> <h3>Tag </p> <td></h3> <p>Tag </p> <td> digunakan untuk mendefinisikan sel data dalam tabel. Sel data berisi informasi aktual yang disajikan dalam tabel. Setiap sel data ditempatkan di antara tag </p> <td> dan </td> <p>.</p> <h3>Mengatur Kolom dan Baris</h3> <p>Anda dapat mengatur jumlah kolom dan baris dalam tabel dengan menambahkan lebih banyak elemen baris (</p> <tr>) dan sel (</p> <th> atau </p> <td>). Pastikan setiap baris memiliki jumlah sel yang sama dengan jumlah kolom yang telah ditentukan.</p> <p>“`html</p> <table> <tr> <th>Judul Kolom 1</th> <th>Judul Kolom 2</th> <th>Judul Kolom 3</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </table> <p>“`</p> <p>Pada contoh di atas, terdapat 3 kolom dan 2 baris dalam tabel. Setiap elemen baris dan sel ditempatkan di antara tag </p> <tr> dan </tr> <p> atau </p> <th> dan </th> <p>.</p> <h3>Menambahkan Judul pada Tabel</h3> <p>Anda dapat menambahkan judul pada tabel dengan menggunakan elemen </p> <caption>. Elemen </p> <caption> ditempatkan setelah tag pembuka </p> <table> dan sebelum tag pertama </p> <tr>.</p> <p>“`html</p> <table> <caption>Judul Tabel</caption> <tr> <th>Judul Kolom 1</th> <th>Judul Kolom 2</th> <th>Judul Kolom 3</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </table> <p>“`</p> <p>Pada contoh di atas, elemen </p> <caption> digunakan untuk menambahkan judul “Judul Tabel” pada tabel.</p> <h2>Memvalidasi Kode HTML</h2> <p>Terakhir, Anda akan mempelajari pentingnya memvalidasi kode HTML dan cara menggunakan alat validasi HTML yang tersedia secara online. Sesi ini akan membantu Anda mengidentifikasi dan memperbaiki kesalahan dalam kode HTML Anda untuk memastikan halaman web Anda berfungsi dengan baik di berbagai browser.</p> <p>Validasi kode HTML adalah proses memeriksa apakah kode HTML Anda mematuhi standar dan aturan yang ditetapkan oleh bahasa HTML itu sendiri. Dengan memvalidasi kode HTML, Anda dapat mengidentifikasi kesalahan sintaks dan kesalahan struktural dalam kode Anda dan memastikan bahwa halaman web Anda dapat diakses dan ditampilkan dengan benar oleh berbagai browser.</p> <h3>Mengapa Validasi Kode HTML Penting?</h3> <p>Validasi kode HTML penting karena:</p> <ul> <li>Memastikan konsistensi dan kepatuhan terhadap standar HTML yang ditetapkan.</li> <li>Menghindari kesalahan sintaks dan kesalahan struktural yang dapat mengganggu tampilan dan interaksi halaman web.</li> <li>Memperbaiki masalah kompatibilitas dengan berbagai browser dan perangkat.</li> <li>Meningkatkan aksesibilitas halaman web bagi pengguna dengan kebutuhan khusus atau menggunakan pembaca layar.</li> </ul> <h3>Cara Menggunakan Alat Validasi HTML</h3> <p>Ada banyak alat validasi>HTML yang tersedia secara online yang dapat Anda gunakan untuk memvalidasi kode HTML Anda. Salah satu alat validasi HTML yang populer adalah W3C Markup Validation Service.</p> <h3>Langkah-langkah untuk Memvalidasi Kode HTML</h3> <p>Berikut adalah langkah-langkah umum yang dapat Anda ikuti untuk memvalidasi kode HTML Anda menggunakan W3C Markup Validation Service:</p> <h4>1. Buka W3C Markup Validation Service</h4> <p>Buka browser web Anda dan kunjungi situs W3C Markup Validation Service di https://validator.w3.org/.</p> <h4>2. Sisipkan Kode HTML</h4> <p>Salin dan tempelkan kode HTML Anda di dalam kotak teks yang tersedia pada halaman validasi.</p> <h4>3. Mulai Validasi</h4> <p>Klik tombol “Check” atau “Validate” untuk memulai proses validasi. Alat ini akan menganalisis kode HTML Anda dan memberikan hasil validasi.</p> <h4>4. Analisis Hasil Validasi</h4> <p>Periksa hasil validasi yang diberikan oleh alat. Jika tidak ada kesalahan atau peringatan, maka kode HTML Anda valid. Jika terdapat kesalahan atau peringatan, periksa pesan kesalahan yang ditampilkan untuk mengidentifikasi dan memperbaiki masalah yang ada.</p> <h4>5. Perbaiki Kode HTML</h4> <p>Perbaiki kode HTML Anda berdasarkan pesan kesalahan yang diberikan. Anda dapat kembali ke editor kode HTML Anda dan mengoreksi kesalahan yang terdeteksi.</p> <h4>6. Ulangi Proses Validasi</h4> <p>Sisipkan kembali kode HTML yang sudah diperbaiki ke dalam alat validasi dan lakukan proses validasi kembali. Ulangi langkah ini sampai tidak ada lagi kesalahan atau peringatan yang ditampilkan.</p> <p>Dengan memvalidasi kode HTML Anda secara teratur, Anda dapat memastikan bahwa halaman web Anda mematuhi standar HTML dan berfungsi dengan baik di berbagai browser. Selain itu, validasi kode HTML juga membantu dalam proses debugging dan perbaikan kesalahan yang mungkin terjadi dalam kode Anda.</p> <h2>Kesimpulan</h2> <p>Dalam artikel ini, Anda telah mempelajari dasar-dasar pemrograman HTML dari awal hingga akhir. Anda telah memahami konsep-konsep dasar seperti struktur HTML, membuat paragraf dan heading, menambahkan gambar dan tautan, membuat daftar dan formulir, mengatur tampilan dengan CSS, membuat tabel, dan memvalidasi kode HTML.</p> <p>Dengan pengetahuan ini, Anda sekarang memiliki dasar yang kokoh untuk memulai perjalanan Anda dalam mengembangkan halaman web yang menarik dan fungsional menggunakan HTML. Teruslah berlatih, eksplorasi, dan kembangkan pengetahuan Anda dalam pemrograman HTML. Dengan dedikasi dan latihan yang konsisten, Anda akan menjadi ahli dalam membangun halaman web yang mengesankan dan efektif.</p> <p>Ingatlah untuk selalu mempraktikkan praktik terbaik dalam pengembangan web, termasuk menggunakan tag dan atribut yang relevan, memastikan tampilan yang responsif, dan mengoptimalkan aksesibilitas halaman web Anda. Selamat menjelajahi dunia HTML dan semoga sukses dalam perjalanan Anda sebagai seorang pengembang web!</p> <h2>Related video ofPanduan Lengkap: Cara Membuat Script HTML untuk Pemula </h2> <p><iframe title="Script HTML Bucin - Cara Membuat Replit Gombal Buat Pacar" width="855" height="481" src="https://www.youtube.com/embed/v3GCfN26W9U?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></p> </div> <footer class="entry-meta" aria-label="Entry meta"> <span class="cat-links"><span class="gp-icon icon-categories"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0143.592 27.907l12.349 26.791A16 16 0 00228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z" /></svg></span><span class="screen-reader-text">Categories </span><a href="https://celeroo.com/category/blog/" rel="category tag">Blog</a></span> </footer> </div> </article> </main> </div> <div class="widget-area sidebar is-right-sidebar" id="right-sidebar"> <div class="inside-right-sidebar"> <aside id="block-2" class="widget inner-padding widget_block widget_search"><form role="search" method="get" action="https://celeroo.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-1" >Search</label><div class="wp-block-search__inside-wrapper " ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="Search" class="wp-block-search__button wp-element-button" type="submit" >Search</button></div></form></aside><aside id="block-3" class="widget inner-padding widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Recent Posts</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://celeroo.com/2-cara-menyadap-wa-pacar-tanpa-diketahui/">2 Cara Menyadap Wa Pacar Tanpa Diketahui</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://celeroo.com/cara-melihat-backlink-kompetitor/">Cara Praktis Melihat Backlink Kompetitor</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://celeroo.com/cara-download-video-tiktok-tanpa-watermark-no-2-paling-mudah/">Cara Download Video TikTok Tanpa Watermark, No 2 Paling Mudah!</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://celeroo.com/strategi-pemasaran-social-media-untuk-bisnis-anda/">Strategi Pemasaran Social Media untuk Bisnis Anda</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://celeroo.com/web-proxy/">Web Proxy: Mengenal dan Memahami Penggunaan serta Manfaatnya</a></li> </ul></div></div></aside> </div> </div> </div> </div> <div class="site-footer"> <footer class="site-info" aria-label="Site" itemtype="https://schema.org/WPFooter" itemscope> <div class="inside-site-info grid-container"> <div class="copyright-bar"> volume - a <a href="https://flintskin.com">Flint Skin</a> Site powered by GeneratePress </div> </div> </footer> </div> <a title="Scroll back to top" aria-label="Scroll back to top" rel="nofollow" href="#" class="generate-back-to-top" data-scroll-speed="400" data-start-scroll="300" role="button"> <span class="gp-icon icon-arrow-up"><svg viewBox="0 0 330 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M305.863 314.916c0 2.266-1.133 4.815-2.832 6.514l-14.157 14.163c-1.699 1.7-3.964 2.832-6.513 2.832-2.265 0-4.813-1.133-6.512-2.832L164.572 224.276 53.295 335.593c-1.699 1.7-4.247 2.832-6.512 2.832-2.265 0-4.814-1.133-6.513-2.832L26.113 321.43c-1.699-1.7-2.831-4.248-2.831-6.514s1.132-4.816 2.831-6.515L158.06 176.408c1.699-1.7 4.247-2.833 6.512-2.833 2.265 0 4.814 1.133 6.513 2.833L303.03 308.4c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero" /></svg></span> </a> <nav id="generate-slideout-menu" class="main-navigation slideout-navigation" itemtype="https://schema.org/SiteNavigationElement" itemscope> <div class="inside-navigation grid-container grid-parent"> </div><!-- .inside-navigation --> </nav><!-- #site-navigation --> <div class="slideout-overlay"> <button class="slideout-exit has-svg-icon"> <span class="gp-icon pro-close"> <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"> <path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z" /> </svg> </span> <span class="screen-reader-text">Close</span> </button> </div> <script id="generate-a11y">!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("mousedown",function(){e.classList.add("using-mouse")}),e.addEventListener("keydown",function(){e.classList.remove("using-mouse")})}}();</script><script id="generate-offside-js-extra"> var offSide = {"side":"left"}; </script> <script src="https://celeroo.com/wp-content/plugins/gp-premium/menu-plus/functions/js/offside.min.js?ver=2.5.0-alpha.1" id="generate-offside-js"></script> <script src="https://celeroo.com/wp-includes/js/dist/hooks.min.js?ver=2810c76e705dd1a53b18" id="wp-hooks-js"></script> <script src="https://celeroo.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script id="wp-i18n-js-after"> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); </script> <script src="https://celeroo.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=5.9.8" id="swv-js"></script> <script id="contact-form-7-js-extra"> var wpcf7 = {"api":{"root":"https:\/\/celeroo.com\/wp-json\/","namespace":"contact-form-7\/v1"},"cached":"1"}; </script> <script src="https://celeroo.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.9.8" id="contact-form-7-js"></script> <!--[if lte IE 11]> <script src="https://celeroo.com/wp-content/themes/generatepress/assets/js/classList.min.js?ver=3.5.1" id="generate-classlist-js"></script> <![endif]--> <script id="generate-menu-js-extra"> var generatepressMenu = {"toggleOpenedSubMenus":"1","openSubMenuLabel":"Open Sub-Menu","closeSubMenuLabel":"Close Sub-Menu"}; </script> <script src="https://celeroo.com/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.5.1" id="generate-menu-js"></script> <script id="generate-navigation-search-js-extra"> var generatepressNavSearch = {"open":"Open Search Bar","close":"Close Search Bar"}; </script> <script src="https://celeroo.com/wp-content/themes/generatepress/assets/js/navigation-search.min.js?ver=3.5.1" id="generate-navigation-search-js"></script> <script id="generate-back-to-top-js-extra"> var generatepressBackToTop = {"smooth":"1"}; </script> <script src="https://celeroo.com/wp-content/themes/generatepress/assets/js/back-to-top.min.js?ver=3.5.1" id="generate-back-to-top-js"></script> </body> </html> <!-- Page cached by LiteSpeed Cache 6.5.2 on 2024-11-01 05:53:36 -->