Contoh HTML
- Halaman Sebelumnya HTML5 SSE
- Halaman Berikutnya Ujian HTML
Contoh tag dasar HTML
- Berkas HTML sederhana
- Contoh ini adalah berkas HTML yang sangat sederhana, menggunakan sedikitnya tag HTML. Ini menunjukkan bagaimana konten di dalam elemen body ditampilkan oleh peramban.
- Paragraf sederhana
- Contoh ini menunjukkan: bagaimana teks di dalam elemen paragraf ditampilkan oleh peramban.
- Banyak paragraf
- Pembanding ini menunjukkan beberapa perilaku baku elemen paragraf.
- Masalah puisi
- Pembanding ini menunjukkan beberapa masalah format HTML.
- Garis putar
- Pembanding ini menunjukkan penggunaan garis putar dalam dokumen HTML.
- Judul
- Contoh tag judul yang digunakan untuk menampilkan judul di dokumen HTML.
- Judul yang diatur di tengah
- Contoh judul yang diatur di tengah
- Garis horizontal
- Contoh ini menunjukkan bagaimana menambahkan garis horizontal.
- Komentar tersembunyi
- Contoh ini menunjukkan bagaimana menambahkan komentar tersembunyi di kode HTML.
- Warna latar
- Contoh ini menunjukkan bagaimana menambahkan warna latar di halaman HTML.
Contoh format teks HTML
- Format teks
- Contoh ini menunjukkan bagaimana memformat teks di berkas HTML.
- Teks prafORMAT
- Contoh ini menunjukkan bagaimana mengendalikan baris kosong dan spasi dengan tag pre.
- Tag "output komputer"
- Contoh ini menunjukkan tampilan tag "output komputer" yang berbeda.
- Alamat
- Contoh ini menunjukkan bagaimana menulis alamat di berkas HTML.
- Singkatan dan singkatan awal
- Contoh ini menunjukkan bagaimana mengimplementasikan singkatan dan singkatan awal.
- Arah teks
- Contoh ini menunjukkan bagaimana mengubah arah teks.
- Kutipan blok
- Contoh ini menunjukkan bagaimana mengimplementasikan kutipan yang berukuran berbeda.
- Efek dihapus teks dan efek disisipkan
- Contoh ini menunjukkan bagaimana menandai teks dihapus dan teks disisipkan.
Contoh link HTML
- Buat link super
- Pemahaman ini menunjukkan bagaimana membuat link di dokumen HTML.
- Gunakan gambar sebagai link
- Pemahaman ini menunjukkan bagaimana menggunakan gambar sebagai link.
- Buka link di jendela browser baru
- Pemahaman ini menunjukkan bagaimana membuka halaman di jendela browser baru, sehingga pengunjung tidak perlu meninggalkan situs Anda.
- Melinks ke tempat lain di halaman yang sama
- Pemahaman ini menunjukkan bagaimana melinks ke bagian lain dokumen.
- Keluar dari frame
- Pemahaman ini menunjukkan bagaimana keluar dari frame, jika halaman Anda disesuaikan di dalam frame.
- Buat link email
- Pemahaman ini menunjukkan bagaimana menghubungkan ke email (ini akan berfungsi setelah program klien email telah terinstal).
- Buat link email 2
- Pemahaman ini menunjukkan link email yang lebih kompleks.
Contoh frame HTML
- Frame vertikal
- Pemahaman ini menunjukkan bagaimana membuat frame vertikal dengan tiga dokumen yang berbeda.
- Frame horisontal
- Pemahaman ini menunjukkan bagaimana membuat frame horisontal dengan tiga dokumen yang berbeda.
- Bagaimana menggunakan tag <noframes>
- Pemahaman ini menunjukkan bagaimana menggunakan tag <noframes>.
- Struktur frame campuran
- Pemahaman ini menunjukkan bagaimana membuat struktur frame yang mengandung tiga dokumen, dan menggabungkannya di baris dan kolom.
- Struktur frame dengan properti noresize="noresize"
- Pemahaman ini menunjukkan properti noresize. Dalam contoh ini, frame tidak dapat diukur ukurannya. Saat menyeret mouse di garis bingkai antar frame, Anda akan menemukan bahwa garis bingkai tidak dapat dipindahkan.
- Frame navigasi
- Pemahaman ini menunjukkan bagaimana membuat frame navigasi. Frame navigasi mencakup daftar tautan yang mengarah ke frame kedua. Berkas yang dinamai "contents.htm" mengandung tiga tautan.
- Frame inline
- Contoh ini menunjukkan bagaimana membuat frame yang bersifat inline (frame di dalam halaman HTML).
- Melompat ke bagian yang ditentukan di dalam frame
- Contoh ini menunjukkan dua frame. Salah satu frame diatur untuk mengarahkan tautan ke bagian yang ditentukan di dalam file lain. Bagian yang ditentukan di dalam file "link.htm" diidentifikasi dengan <a name="C10">.
- Menggunakan navigasi frame untuk melompat ke bagian yang ditentukan
- Contoh ini menunjukkan dua frame. Frame navigasi di sebelah kiri mengandung daftar tautan, tautan ini menunjuk ke frame kedua. Frame kedua menampilkan dokumen yang dihubungkan.
Contoh Tabel HTML
- Tabel
- Contoh ini menunjukkan bagaimana membuat tabel di dalam dokumen HTML.
- Garis bingkai tabel
- Contoh ini menunjukkan berbagai jenis garis bingkai tabel.
- Tabel tanpa garis bingkai
- Contoh tabel tanpa garis bingkai
- Judul tabel di dalam tabel (Heading)
- Contoh ini menunjukkan bagaimana menampilkan judul tabel.
- Sel yang kosong
- Contoh ini menunjukkan bagaimana mengatasi sel yang kosong menggunakan " ".
- Tabel dengan judul
- Contoh tabel dengan judul (caption)
- Sel tabel yang melintasi baris atau kolom
- Contoh ini menunjukkan bagaimana mendefinisikan sel tabel yang melintasi baris atau kolom.
- Tag di dalam tabel
- Contoh ini menunjukkan bagaimana menampilkan elemen di dalam elemen lain.
- Jarak antara konten sel dan garis bingkai (Cell padding)
- Contoh ini menunjukkan bagaimana menggunakan Cell padding untuk menciptakan jarak antara konten sel dan garis bingkai.
- Jarak antar sel (Cell spacing)
- Contoh ini menunjukkan bagaimana menggunakan Cell spacing untuk menambahkan jarak antar sel.
- Menambahkan warna latar belakang atau gambar latar belakang ke tabel
- Menambahkan latar belakang ke tabel
- Menambahkan warna latar belakang atau gambar latar belakang ke sel tabel
- Contoh ini menunjukkan bagaimana menambahkan latar belakang ke sel tabel.
- Menata konten di dalam sel tabel
- Contoh ini menunjukkan bagaimana cara mengatur konten sel di dalam tabel untuk menciptakan tabel yang indah.
- Atribut frame (frame)
- Contoh ini menunjukkan bagaimana cara mengendalikan garis bingkai sekeliling tabel menggunakan atribut "frame".
Contoh HTML Daftar
- Daftar yang terdapat dalam urutan tak berurutan
- Contoh ini menunjukkan daftar yang terdapat dalam urutan tak berurutan.
- Daftar yang terdapat dalam urutan
- Contoh ini menunjukkan daftar yang terdapat dalam urutan.
- Daftar berbagai jenis yang terdapat dalam urutan tak berurutan
- Contoh ini menunjukkan daftar yang terdapat dalam urutan tak berurutan.
- Daftar berbagai jenis yang terdapat dalam urutan
- Contoh ini menunjukkan daftar berbagai jenis yang terdapat dalam urutan.
- Daftar yang terdapat dalam struktur yang kompleks
- Contoh ini menunjukkan bagaimana cara menggabungkan daftar.
- Daftar yang terdapat dalam struktur yang kompleks 2
- Contoh ini menunjukkan daftar yang terdapat dalam struktur yang kompleks.
- Daftar definisi
- Contoh ini menunjukkan daftar definisi.
Form HTML dan Contoh Input
- Ruang teks (Text fields)
- Contoh ini menunjukkan bagaimana membuat ruang teks di halaman HTML. Pengguna dapat menulis teks di ruang teks.
- Ruang sandi
- Contoh ini menunjukkan bagaimana membuat ruang sandi di HTML.
- Kotak centang
- Contoh ini menunjukkan bagaimana membuat kotak centang di halaman HTML. Pengguna dapat memilih atau membatalkan pemilihan kotak centang.
- Kotak pilihan
- Contoh ini menunjukkan bagaimana membuat kotak pilihan di HTML.
- Daftar pilihan sederhana
- Contoh ini menunjukkan bagaimana membuat kotak daftar pilihan sederhana di halaman HTML. Kotak daftar pilihan adalah daftar pilihan yang dapat dipilih.
- Daftar pilihan lain
- Contoh lain tentang daftar pilihan dengan pilihan awal (catatan terjemahan: pilihan awal merujuk kepada pilihan yang disebutkan terlebih dahulu).
- Ruang teks (Textarea)
- Contoh ini menunjukkan bagaimana membuat ruang teks (kontrol input teks berbaris). Pengguna dapat menulis teks di ruang teks. Di ruang teks, jumlah karakter yang dapat ditulis tidak berbatasan.
- Membuat tombol
- Contoh ini menunjukkan bagaimana membuat tombol. Anda dapat menyesuaikan teks di atas tombol.
- Fieldset disekitar data
- Contoh ini menunjukkan bagaimana menggambar kotak dengan judul di sekitar data.
Contoh formulir
- Formulir dengan kotak input dan tombol konfirmasi
- Contoh ini menunjukkan bagaimana menambahkan formulir ke halaman. Formulir ini mengandung dua kotak input dan tombol konfirmasi.
- Formulir dengan kotak centang
- Formulir ini mengandung dua kotak centang dan tombol konfirmasi.
- Formulir dengan kotak pilihan
- Formulir ini mengandung dua kotak pilihan dan tombol konfirmasi.
- Mengirim email melalui formulir
- Contoh ini menunjukkan bagaimana mengirim email melalui formulir.
Contoh HTML gambar
- Menyisipkan gambar
- Contoh ini menunjukkan bagaimana menampilkan gambar di halaman web.
- Menyisipkan gambar dari lokasi lainnya
- Contoh ini menunjukkan bagaimana menampilkan gambar dari lokasi lainnya atau server lainnya di halaman web.
- Gambar latar
- Contoh ini menunjukkan bagaimana menambahkan gambar latar ke halaman HTML.
- Menata gambar
- Contoh ini menunjukkan bagaimana menata gambar di teks.
- Gambar yang bergerak
- Contoh ini menunjukkan bagaimana membuang gambar ke kiri atau kanan paragraf.
- Menyesuaikan ukuran gambar
- Contoh ini menunjukkan bagaimana mengatur ukuran gambar.
- Menampilkan teks pengganti untuk gambar
- Contoh ini menunjukkan bagaimana menampilkan teks pengganti untuk gambar. Ketika gambar tidak dapat dimuat di browser, atribut teks pengganti memberitahu para pembaca tentang informasi yang hilang. Biasa untuk menambahkan atribut teks pengganti ke gambar di halaman.
- Membuat tautan gambar
- Contoh ini menunjukkan bagaimana menggunakan gambar sebagai tautan.
- Membuat peta gambar
- Contoh ini menunjukkan bagaimana membuat peta gambar dengan area yang dapat diklik. Setiap area adalah tautan.
- Mengubah gambar menjadi peta gambar
- Contoh ini menunjukkan bagaimana mengubah gambar biasa menjadi peta gambar.
Contoh latar HTML
- Latar belakang dan warna yang disesuaikan
- Contoh yang bagus tentang kombinasi warna latar dan teks, yang mempermudah membaca teks di halaman.
- Latar belakang dan warna yang kurang disesuaikan
- Contoh yang menjadikan teks sulit dibaca karena kombinasi warna latar dan teks.
- Gambar Latar yang Tersedia
- Contoh yang menjadikan teks di halaman mudah dibaca karena gambar latar dan warna teks.
- Gambar Latar yang Tersedia 2
- Contoh lain tentang gambar latar dan warna teks yang membuat teks di halaman mudah dibaca.
- Gambar Latar yang Kurang Tersedia
- Contoh yang menjadikan teks di halaman sulit dibaca karena gambar latar dan warna teks.
Contoh Gaya HTML (style)
- Gaya dalam HTML
- Contoh menggunaan informasi gaya yang ditambahkan ke bagian <head> untuk memformat HTML.
- Tautan Tanpa Garis Bawah
- Contoh menggunaan atribut style untuk membuat tautan tanpa garis bawah.
- Menghubungkan ke Gaya Luar
- Contoh ini menunjukkan bagaimana menghubungkan tanda <link> ke gaya luar.
Contoh Header HTML (head)
- Judul Dokumen
- Informasi judul di dalam elemen header tidak akan muncul di jendela peramban.
- Satu target, semua tautan
- Contoh ini menunjukkan bagaimana menggunakan tanda base untuk membuka semua tanda di jendela baru.
Contoh Meta Informasi (meta) HTML
- Deskripsi Dokumen
- Informasi di dalam elemen Meta dapat mendeskripsikan dokumen HTML.
- Kata Kunci Dokumen
- Informasi di dalam elemen Meta dapat mendeskripsikan kata kunci penting dokumen.
- Peralihan
- Contoh ini menunjukkan bagaimana mengalihkan pengguna ke alamat lain saat alamat URL telah berubah.
Contoh Skrip HTML (Script)
- Masukkan Sebuah Skrip
- Contoh ini menunjukkan bagaimana memasukkan skrip ke dokumen HTML.
- Berjalan di Peramban yang Tidak Mendukung Skrip
- Contoh ini menunjukkan bagaimana menanggapi peramban yang tidak mendukung skrip.
- Halaman Sebelumnya HTML5 SSE
- Halaman Berikutnya Ujian HTML
