Tag Gambar

Untuk menyisipkan gambar ke dalam halaman web, kita menggunakan tag . Tag ini memiliki atribut src yang menunjukkan URL gambar yang ingin ditampilkan. Anda juga dapat menentukan atribut lebar dan tinggi untuk mengatur ukuran gambar.

Tag List

Tag

digunakan untuk membuat daftar tak berurutan atau unordered list, sedangkan tag
digunakan untuk membuat daftar berurutan atau ordered list. Setiap elemen dalam daftar diberi tag
1. .

   Tag Tabel

   Tag

   digunakan untuk membuat tabel dalam HTML. Dalam tabel, kita menggunakan tag
   (table row) untuk membuat baris, tag

   (table header) untuk membuat sel header, dan tag

   (table data) untuk membuat sel data. Tag Formulir Formulir HTML digunakan untuk mengumpulkan data dari pengguna. Dalam HTML, tag digunakan untuk mengelompokkan elemen-elemen formulir seperti input, select, dan textarea. Setiap elemen formulir memiliki atribut name dan bisa memiliki atribut lain seperti type, value, dan placeholder. Formatting Text Formatting teks adalah cara untuk memberikan tampilan yang menarik dan mudah dibaca pada halaman web. Dalam sesi ini, kita akan mempelajari cara mengubah tampilan teks menggunakan tag-tag HTML. Tag Paragraf Dalam HTML, tag digunakan untuk menandai paragraf. Ini memungkinkan kita untuk memformat teks menjadi paragraf yang terpisah. Anda dapat memisahkan setiap paragraf dengan menggunakan tag pada awal dan akhir paragraf. Judul dan Subjudul Judul dan subjudul adalah elemen penting dalam sebuah halaman web. Dalam HTML, kita menggunakan tag-heading hingga untuk memberikan hierarki pada judul dan subjudul. Tag digunakan untuk judul utama halaman, sedangkan tag digunakan untuk subjudul utama, dan seterusnya. Teks Tebal dan Miring Untuk memberikan penekanan pada teks tertentu, kita dapat menggunakan tag dan . Tag digunakan untuk membuat teks tebal, sedangkan tag digunakan untuk membuat teks miring. Teks Dipotong dan Garis Bawah Jika Anda ingin membuat teks yang dipotong atau memiliki garis bawah, Anda dapat menggunakan tag dan . Tag digunakan untuk membuat teks yang dipotong, sementara tag digunakan untuk memberikan garis bawah pada teks. Teks Berwarna dan Ukuran Anda dapat mengatur warna dan ukuran teks menggunakan CSS. Namun, dalam HTML, Anda dapat menggunakan tag dengan atribut style untuk mengatur warna dan ukuran teks. Misalnya, untuk teks berwarna merah. Membuat Tautan (Link) Tautan atau link adalah komponen penting dalam halaman web. Dalam sesi ini, kita akan mempelajari cara membuat tautan menggunakan tag dalam HTML. Tautan Eksternal Untuk membuat tautan ke halaman web eksternal, kita menggunakan atribut href dalam tag . Anda dapat menentukan URL lengkap tautan di dalam atribut href. Misalnya, Tautan Eksternal akan membuat tautan ke halaman web eksternal. Tautan Internal Jika Anda ingin membuat tautan ke halaman web di dalam situs Anda sendiri, Anda dapat menggunakan tautan internal. Untuk melakukannya, Anda perlu menambahkan atribut href dengan nilai berupa URL relatif ke halaman web tersebut. Tautan ke Bagian Tertentu dalam Halaman Anda juga dapat membuat tautan yang mengarah ke bagian tertentu dalam halaman. Untuk melak Tautan ke Bagian Tertentu dalam Halaman Anda juga dapat membuat tautan yang mengarah ke bagian tertentu dalam halaman. Untuk melakukannya, Anda perlu menambahkan atribut href dengan nilai berupa ID elemen target. Misalnya, jika Anda memiliki elemen dengan ID “section1” dalam halaman, Anda dapat membuat tautan ke bagian tersebut dengan menggunakan Tautan ke Bagian 1. Tautan dengan Teks yang Berbeda Saat membuat tautan, Anda dapat menggunakan teks yang berbeda dengan teks yang ditampilkan di tautan itu sendiri. Untuk melakukannya, Anda cukup menuliskan teks yang ingin ditampilkan di antara tag . Misalnya, Kunjungi Situs Kami akan menampilkan tautan dengan teks “Kunjungi Situs Kami”. Tautan dengan Gambar Anda juga dapat membuat tautan dengan menggunakan gambar sebagai pengganti teks. Untuk melakukannya, Anda perlu menempatkan tag Source: None akan membuat tautan dengan gambar sebagai pengganti teks. Tautan dengan Atribut Tambahan Tag dalam HTML juga mendukung atribut tambahan untuk meningkatkan fungsionalitas tautan. Beberapa atribut yang umum digunakan adalah target, rel, dan title. Atribut target dapat digunakan untuk menentukan di mana tautan akan dibuka, seperti dalam jendela baru atau dalam jendela yang sama. Atribut rel digunakan untuk menentukan hubungan tautan dengan halaman terhubung. Atribut title digunakan untuk memberikan informasi tambahan tentang tautan saat pengguna mengarahkan kursor ke tautan tersebut. Menyisipkan Gambar Menyisipkan gambar dalam halaman web adalah cara yang efektif untuk memvisualisasikan konten. Dalam sesi ini, kita akan mempelajari cara menyisipkan gambar menggunakan tag dalam HTML. Menyisipkan Gambar Lokal Untuk menyisipkan gambar lokal, Anda perlu menentukan atribut src dengan nilai berupa URL relatif atau path file gambar di komputer Anda. Misalnya, Source: None akan menyisipkan gambar dengan file gambar.jpg yang terletak di direktori yang sama dengan halaman HTML. Menyisipkan Gambar Eksternal Jika Anda ingin menyisipkan gambar dari sumber eksternal seperti situs web lain, Anda perlu menentukan atribut src dengan URL lengkap gambar. Misalnya, Source: www.example.com akan menyisipkan gambar dari URL eksternal tersebut. Atribut Alt untuk Gambar Atribut alt dalam tag digunakan untuk memberikan deskripsi alternatif tentang gambar. Deskripsi ini akan ditampilkan jika gambar gagal dimuat atau saat pengguna menggunakan pembaca layar. Pastikan untuk memberikan deskripsi yang informatif dan deskriptif agar pengguna dengan keterbatasan visual dapat memahami konten gambar. Ukuran dan Penyesuaian Gambar Anda dapat mengatur ukuran gambar menggunakan atribut width dan height dalam tag Source: None akan menampilkan gambar dengan lebar 300 piksel dan tinggi 200 piksel. Selain itu, Anda juga dapat menggunakan atribut style untuk mengatur ukuran dan penyesuaian gambar dengan lebih detail. Penggunaan Gambar Background Gambar juga dapat digunakan sebagai latar belakang elemen HTML. Untuk melakukannya, Anda perlu menggunakan CSS dengan properti background-image. Misalnya, background-image: url(“gambar.jpg”); akan mengatur gambar sebagai latar belakang elemen tertentu. Membuat Tabel Tabel adalah cara yang efektif untuk menyajikan data secara terstruktur dalam halaman web. Dalam sesi ini, kita akan mempelajari cara membuat dan mengatur tabel menggunakan tag dalam HTML. Struktur Dasar Tabel Struktur dasar tabel terdiri dari tag sebagai wadah utama, tag (table row) untuk membuat baris, tag (table header) untuk membuat sel header, dan tag (table data) untuk membuat sel data. Anda dapat menggunakan tag untuk menambahkan judul tabel. Menyatukan Sel Anda dapat menyatukan sel-sel dalam tabel menggunakan atribut colspan dan rowspan dalam tag atau . Atribut colspan digunakan untuk menyatukan sel secara horizontal, sedangkan rowspan digunakan untuk menyatukan sel secara vertikal. Misalnya, akan menyatukan dua sel secara horizontal. Mengatur Tampilan Tabel dengan CSS Untuk mengatur tampilan tabel yang lebih kompleks, Anda dapat menggunakan CSS. Dengan menggunakan properti CSS seperti border, background-color, dan font-family, Anda dapat mengubah warna, gaya garis, dan tampilan teks dalam tabel. Menambahkan Batas Tabel Anda dapat menambahkan batas pada tabel menggunakan properti border dalam CSS. Misalnya, border: 1px solid black; akan menambahkan batas berketebalan 1 piksel dengan warna hitam pada tabel. Mengatur Lebar dan Tinggi Sel Anda dapat mengatur lebar dan tinggi sel dalam tabel menggunakan atribut width dan height dalam tag atau . Misalnya, akan mengatur lebar sel menjadi 100 piksel. Penyusunan Tabel yang Responsif Untuk memastikan tabel tetap terlihat baik pada perangkat dengan berbagai ukuran layar, Anda dapat menggunakan teknik responsive design. Dengan menggunakan CSS media queries dan properti seperti overflow atau display, Anda dapat mengatur tabel agar dapat menyesuaikan diri dengan ukuran layar pengguna. Membuat Formulir Formulir HTML digunakan untuk mengumpulkan data dari pengguna. Dalam sesi ini, kita akan mempelajari cara membuat formulir menggunakan tag dan elemen-elemen formulir seperti input, select, dan textarea. Struktur Dasar Formulir Struktur dasar formulir terdiri dari tag sebagai wadah utama, dan elemen-elemen formulir di dalamnya. Anda dapat menggunakan atribut action dan method dalam tag untuk menentukan URL tujuan dan metode pengiriman data formulir. Elemen Input Elemen input digunakan untuk meminta pengguna memasukkan data teks, angka, tanggal, atau lainnya. Anda dapat menggunakan atribut type untuk menentukan jenis input yang diinginkan. Misalnya, akan membuat input teks. Elemen Select Elemen select digunakan untuk membuat daftar pilihan. Anda dapat menggunakan tag di dalam tag untuk membuat opsi pilihan. Misalnya, Pilihan 1 akan membuat daftar pilihan dengan satu opsi “Pilihan 1”. Elemen Textarea Elemen textarea digunakan untuk meminta pengguna memasukkan teks panjang. Anda dapat menentukan atribut rows dan cols untuk mengatur ukuran textarea. Misalnya, akan membuat textarea dengan 4 baris dan 50 kolom. Elemen Checkbox dan Radio Elemen checkbox dan radio digunakan untuk meminta pengguna memilih satu atau beberapa pilihan. Anda perlu menggunakan atribut type dengan nilai “checkbox” atau “radio” untuk membuat elemen ini. Misal Elemen Checkbox dan Radio Elemen checkbox dan radio digunakan untuk meminta pengguna memilih satu atau beberapa pilihan. Anda perlu menggunakan atribut type dengan nilai “checkbox” atau “radio” untuk membuat elemen ini. Misalnya, akan membuat kotak centang, sedangkan akan membuat tombol radio. Elemen Submit dan Reset Elemen submit dan reset digunakan untuk mengirim dan mengatur ulang data formulir. Anda perlu menggunakan atribut type dengan nilai “submit” atau “reset” untuk membuat elemen ini. Misalnya, akan membuat tombol submit, sedangkan akan membuat tombol reset. Elemen File Elemen file digunakan untuk memungkinkan pengguna memilih dan mengunggah file. Anda perlu menggunakan atribut type dengan nilai “file” untuk membuat elemen ini. Misalnya, akan membuat tombol untuk memilih file dari perangkat pengguna. Validasi Formulir Anda dapat menggunakan JavaScript atau atribut HTML seperti required, pattern, dan min/max untuk melakukan validasi pada data yang dimasukkan pengguna dalam formulir. Misalnya, required akan memastikan bahwa pengguna harus mengisi bidang tersebut sebelum mengirimkan formulir. Penyampaian Data Formulir Setelah pengguna mengisi formulir, data formulir dapat dikirim ke server menggunakan metode pengiriman yang ditentukan dalam atribut method pada tag . Metode yang umum digunakan adalah “GET” dan “POST”. Metode “GET” mengirimkan data melalui URL, sedangkan metode “POST” mengirimkan data secara tersembunyi. Pemrosesan Data Formulir di Sisi Server Saat data formulir dikirim ke server, Anda perlu memiliki skrip atau program di sisi server yang akan memproses data tersebut. Pada umumnya, bahasa pemrograman seperti PHP, Python, atau JavaScript dapat digunakan untuk memproses data formulir dan melakukan tindakan yang sesuai berdasarkan data tersebut. Mengatur Layout dengan CSS CSS atau Cascading Style Sheets digunakan untuk mengatur tampilan halaman web. Dalam sesi ini, kita akan mempelajari cara menghubungkan CSS dengan HTML dan menggunakan CSS untuk mengatur layout. Menghubungkan CSS dengan HTML Ada beberapa cara untuk menghubungkan CSS dengan HTML. Salah satunya adalah menggunakan tag