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 tagSaat 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.
Tag
Tag digunakan untuk menandai awal dan akhir dari dokumen HTML. Semua elemen dalam halaman web harus dimulai dan diakhiri dengan tag . Tag biasanya diletakkan pada baris pertama dan baris terakhir dalam kode HTML.
Tag
Tag
digunakan untuk menyisipkan informasi tentang halaman web yang tidak ditampilkan secara langsung pada halaman web tersebut. Informasi yang biasanya disisipkan dalam tag meliputi judul halaman, pengaturan karakteristik halaman, dan tautan ke file CSS atau JavaScript eksternal.Tag
Tag
Tag
Tag
Tag
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.
Tag
Tag 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 .
Membuat Paragraf dan Heading
Sesi ini akan membahas cara membuat paragraf dan heading menggunakan tag
dan
–
. Anda akan mempelajari perbedaan antara heading dan paragraf, serta bagaimana memilih heading yang tepat sesuai dengan hierarki konten Anda.
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.
Tag
Tag
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
.
Tag
–
Tag
–
digunakan untuk menandai judul atau subjudul pada halaman web. Tag
digunakan untuk judul utama halaman, sedangkan tag
–
digunakan untuk subjudul dengan tingkatan yang berbeda. Semakin tinggi angka pada tag heading, semakin kecil ukuran font dan tingkatan pentingnya.
Memilih Heading yang Tepat
digunakan untuk judul utama halaman, sedangkan tag
–
digunakan untuk subjudul dengan tingkatan yang berbeda. Semakin tinggi angka pada tag heading, semakin kecil ukuran font dan tingkatan pentingnya.
Memilih Heading yang Tepat
digunakan untuk subjudul dengan tingkatan yang berbeda. Semakin tinggi angka pada tag heading, semakin kecil ukuran font dan tingkatan pentingnya.
Memilih Heading yang Tepat
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
, sedangkan subjudul menggunakan tag
–
sesuai dengan tingkatan hierarkinya.
Menambahkan Gambar
sesuai dengan tingkatan hierarkinya.
Menambahkan Gambar
Anda akan belajar cara menambahkan gambar ke halaman HTML menggunakan tag . Sesi ini juga akan membahas atribut penting seperti src, alt, dan width untuk memastikan gambar tampil dengan benar dan responsif pada berbagai perangkat.
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 yang digunakan untuk menampilkan gambar pada halaman web.
Tag
Tag 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.
Atribut src
Atribut src pada tag 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 ``.
Atribut alt
Atribut alt pada tag
Atribut width
Atribut width pada tag adalah atribut yang digunakan untuk menentukan lebar gambar dalam piksel. Anda dapat memberikan nilai atribut width dalam angka piksel, misalnya `` 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.
Gambar Responsif
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.
Membuat Tautan (Link)
Sesi ini akan menjelaskan cara membuat tautan ke halaman web lain menggunakan tag . Anda akan mempelajari cara menambahkan teks tautan dan URL, serta cara membuka tautan dalam tab baru atau dalam jendela yang sama.
Tautan atau link memungkinkan pengguna untuk berpindah antara halaman web yang berbeda. Dalam HTML, tautan dibuat menggunakan tag , 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.
Tag
Tag 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 `Tautan ke Google`. Ketika pengguna mengklik teks “Tautan ke Google”, mereka akan diarahkan ke halaman web Google.
Teks Tautan
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.
Atribut href
Atribut href pada tag 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 `Tautan ke Halaman Lain`. Jika Anda ingin membuat tautan eksternal ke halaman web di luar situs Anda, Anda perlu menuliskan URL lengkap, seperti `Tautan Eksternal`.
Membuka Tautan di Tab Baru
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, `Tautan di Tab Baru` akan membuat tautan tersebut terbuka di tab baru.
Membuat Daftar
Anda akan belajar cara membuat daftar dengan menggunakan tag
- (daftar tak terurut) dan
- .
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.
Daftar Tak Terurut (Unordered List)
Daftar tak terurut digunakan untuk menyajikan informasi dalam bentuk poin-poin tanpa urutan tertentu. Dalam HTML, daftar tak terurut dibuat menggunakan tag
- , yang merupakan singkatan dari unordered list atau “daftar tak terurut”. Setiap poin dalam daftar ditandai dengan tag
- , yang merupakan singkatan dari list item atau “elemen daftar”.
Tag
Tag
- digunakan untuk membungkus daftar tak terurut. Setiap elemen dalam daftar tak terurut ditempatkan di antara tag
- Poin 1
- Poin 2
- Poin 3
- .
Tag
Tag
- digunakan untuk membungkus daftar terurut. Setiap elemen dalam daftar terurut ditempatkan di antara tag
- Poin 1
- Poin 2
- Poin 3
- . Misalnya, untuk menambahkan tautan dalam daftar terurut, Anda dapat menggunakan kode berikut:
“`html
“`
Membuat Formulir
Pada sesi ini, Anda akan mempelajari cara membuat formulir interakt>if menggunakan tag
. Atribut penting yang digunakan pada tag
“`
Atribut method
Atribut method pada tag
- dan
. Misalnya, untuk membuat daftar terurut dengan tiga poin, Anda dapat menggunakan kode berikut:
“`html
“`
Menambahkan Elemen dalam Daftar
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
- dan
. Misalnya, untuk membuat daftar tak terurut dengan tiga poin, Anda dapat menggunakan kode berikut:
“`html
“`
Daftar Terurut (Ordered List)
Daftar terurut digunakan untuk menyajikan informasi dalam bentuk poin-poin dengan urutan tertentu. Dalam HTML, daftar terurut dibuat menggunakan tag
- , yang merupakan singkatan dari ordered list atau “daftar terurut”. Seperti daftar tak terurut, setiap poin dalam daftar terurut ditandai dengan tag
- , yang merupakan singkatan dari list item atau “elemen daftar”.
- (daftar terurut). Sesi ini juga akan membahas cara menambahkan elemen dalam daftar menggunakan tag