Contoh HTML
- Halaman Sebelumnya HTML5 SSE
- Halaman Berikutnya Pengujian HTML
Contoh tag dasar HTML
- File HTML sederhana
- Contoh ini adalah file HTML yang sangat sederhana, menggunakan tag HTML yang paling sedikit. Ini menunjukkan bagaimana konten di dalam elemen body ditampilkan oleh browser.
- Paragraf sederhana
- Contoh ini menunjukkan bagaimana teks di dalam elemen paragraf ditampilkan oleh browser.
- Lebih banyak paragraf
- Contoh ini menunjukkan beberapa perilaku baku elemen paragraf.
- Masalah 'poези'
- Contoh ini menunjukkan beberapa masalah pengformatan HTML.
- Paragraf
- Contoh ini menunjukkan penggunaan paragraf di dokumen HTML.
- Judul
- Contoh menampilkan tag judul di dokumen HTML.
- Judul yang diatur di tengah
- Contoh judul yang diatur di tengah.
- Garis horizontal
- Contoh menambahkan garis horizontal.
- Catatan tersembunyi
- Contoh menambahkan catatan tersembunyi di kode HTML asli.
- Warna latar
- Contoh ini menunjukkan bagaimana menambahkan warna latar bagi halaman HTML.
Contoh format teks HTML
- Format teks
- Contoh menformatkan teks di berkas HTML.
- Teks prapormat
- Contoh menampilkan spasi dan baris kosong dengan tag pre.
- Tag "output komputer"
- Contoh menunjukkan tampilan tag "output komputer" yang berbeda.
- Alamat
- Contoh menulis alamat di berkas HTML.
- Singkatan dan singkatan awal
- Contoh mengeksekusi singkatan dan singkatan awal.
- Arah teks
- Contoh mengubah arah teks.
- Kutipan blok
- Contoh mengeksekusi kutipan yang panjang dan pendek yang berbeda.
- Efek dihapus teks dan efek disisipkan
- Contoh ini menunjukkan bagaimana menandai teks dihapus dan teks disisipkan.
Contoh tautan HTML
- Membuat tautan super
- Contoh ini menunjukkan bagaimana membuat tautan di dokumen HTML.
- Menggunakan gambar sebagai tautan
- Contoh ini menunjukkan bagaimana menggunakan gambar sebagai tautan.
- Membuka tautan di jendela browser yang baru
- Contoh ini menunjukkan bagaimana membuka halaman di jendela browser yang baru, sehingga pengunjung tidak perlu meninggalkan situs Anda.
- Melinks ke tempat yang berbeda di halaman yang sama
- Contoh ini menunjukkan bagaimana melinks ke bagian lain dokumen.
- Keluar dari kerangka
- Contoh ini menunjukkan bagaimana keluar dari kerangka, jika halaman Anda disematkan di dalam kerangka.
- Membuat tautan email
- Contoh ini menunjukkan bagaimana menghubungkan ke email (ini akan berfungsi setelah program klien email terinstal).
- Membuat tautan email 2
- Contoh ini menunjukkan tautan email yang lebih kompleks.
Contoh kerangka HTML
- Kerangka vertikal
- Contoh ini menunjukkan bagaimana membuat kerangka vertikal dengan tiga dokumen yang berbeda.
- Kerangka horizontal
- Contoh ini menunjukkan bagaimana membuat kerangka horizontal dengan tiga dokumen yang berbeda.
- Bagaimana menggunakan tag <noframes>
- Contoh ini menunjukkan bagaimana menggunakan tag <noframes>.
- Struktur kerangka gabungan
- Contoh ini menunjukkan bagaimana membuat struktur kerangka yang mengandung tiga dokumen, dan menggabungkannya di baris dan kolom.
- Struktur kerangka dengan properti noresize="noresize"
- Contoh ini menunjukkan noresize properti. Dalam contoh ini, struktur kerangka tidak dapat diukur. Dengan gerakkan mouse di sepanjang garis bingkai antarkerangka, Anda akan melihat bahwa garis bingkai tidak dapat dipindahkan.
- Struktur navigasi
- Contoh ini menunjukkan bagaimana membuat struktur navigasi. Struktur navigasi mengandung daftar tautan yang mengarah ke struktur kedua. Berkas yang dinamai "contents.htm" mengandung tiga tautan.
- Frame Inline
- Contoh ini menunjukkan bagaimana membuat frame yang bersifat inline (frame di halaman HTML).
- Melaju ke bagian yang ditentukan di dalam frame
- Melaju ke bagian yang ditentukan di dalam frame
- Melaju ke bagian yang ditentukan dengan penggunaan frame navigasi
- Contoh ini menunjukkan dua frame. Frame navigasi kiri berisi daftar tautan, tautan ini mengarah ke frame kedua. Frame kedua menampilkan dokumen yang ditautkan.
Contoh Tabel HTML
- Tabel
- Contoh ini menunjukkan bagaimana membuat tabel dalam dokumen HTML.
- Garis Batas Tabel
- Contoh ini menunjukkan berbagai tipe garis batas tabel.
- Tabel Tanpa Garis Batas
- Contoh tabel tanpa garis batas
- Judul Tabel (Heading)
- Contoh ini menunjukkan bagaimana menampilkan judul tabel.
- Sel Kosong
- Contoh ini menunjukkan bagaimana mengelola sel yang kosong dengan " ".
- 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.
- Tiket di dalam tabel
- Menunjukkan elemen di dalam elemen lain
- Margin Sel (Cell padding)
- Contoh ini menunjukkan bagaimana menggunakan Cell padding untuk menciptakan jarak antara konten sel dan garis batas.
- Jarak Antar Sel (Cell spacing)
- Menambahkan jarak antar sel dengan Cell spacing
- Menambahkan warna latar atau gambar latar ke tabel
- Menambahkan warna latar atau gambar latar ke tabel
- Menambahkan warna latar atau gambar latar ke tabel
- Menambahkan warna latar atau gambar latar ke sel tabel
- Menata Konten dalam Sel Tabel
- Contoh ini menunjukkan bagaimana mengatur konten sel untuk menciptakan tabel yang indah.
- Atribut Frame (Frame)
- Contoh ini menunjukkan bagaimana menggunakan atribut "frame" untuk mengontrol garis batas di sekitar tabel.
Contoh Daftar HTML
- Daftar Tak Terurut
- Contoh ini menunjukkan bagaimana membuat daftar tak terurut.
- Daftar Terurut
- Contoh ini menunjukkan bagaimana mendefinisikan daftar terurut.
- Berbagai Tipe Daftar Tak Terurut
- Contoh ini menunjukkan bagaimana membuat daftar tak terurut.
- Berbagai Tipe Daftar Terurut
- Contoh ini menunjukkan berbagai tipe urutan dalam daftar.
- Daftar Nested
- Contoh ini menunjukkan bagaimana mengekatkan daftar.
- Daftar Nested 2
- Contoh ini menunjukkan daftar yang kompleks.
- Daftar Definisi
- Contoh ini menunjukkan bagaimana mendefinisikan daftar.
Form HTML dan Contoh Input
- Area teks (Text fields)
- Contoh ini menunjukkan bagaimana membuat area teks di halaman HTML. Pengguna dapat menulis teks di area teks.
- Area sandi
- Contoh ini menunjukkan bagaimana membuat area 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 boleh dipilih.
- Daftar pilihan lainnya
- Contoh lainnya dari daftar pilihan
- Area teks (Textarea)
- Contoh ini menunjukkan bagaimana membuat area teks (kontrol input teks berbaris). Pengguna dapat menulis teks di area teks. Dalam area teks, jumlah karakter yang dapat ditulis tidak terbatas.
- Membuat tombol
- Contoh ini menunjukkan bagaimana membuat tombol. Anda dapat menyesuaikan teks di atas tombol.
- Fieldset di sekitar 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.
- Membuang gambar
- 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. Saat gambar tidak dapat dimuat di browser, atribut teks pengganti memberitahu pembaca informasi yang hilang. Biasa memberikan atribut teks pengganti untuk gambar di halaman adalah hal yang baik.
- 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 dan warna yang disesuaikan baik
- Contoh warna latar dan teks yang disesuaikan baik, membuat teks di halaman mudah dibaca.
- Latar belakang dan warna yang disesuaikan buruk
- Contoh kombinasi warna latar dan teks yang kurang baik, membuat teks di halaman sulit dibaca.
- Gambar Latar Belakang yang Memudahkan Dibaca
- Contoh gambar latar belakang dan warna teks yang memudahkan membaca teks di halaman.
- Gambar Latar Belakang yang Memudahkan Dibaca 2
- Contoh lain gambar latar belakang dan warna teks yang memudahkan membaca teks di halaman.
- Gambar Latar Belakang yang Tidak Memudahkan Dibaca
- Contoh gambar latar belakang dan warna teks yang memudahkan membaca teks di halaman.
Contoh Gaya HTML (style)
- Gaya di HTML
- Contoh menggunakan informasi gaya yang ditambahkan ke bagian head untuk memformat HTML.
- Tanda Tautan Tanpa Garis Bawah
- Contoh menghapus garis bawah tanda tautan dengan menggunakan atribut gaya.
- Menghubungkan ke Gaya Luar
- Contoh ini menunjukkan bagaimana menghubungkan tanda <link> ke gaya luar.
Contoh Kepala HTML (head)
- Judul Dokumen
- Informasi judul di dalam elemen head tidak akan ditampilkan di jendela peramban.
- Satu target, semua tautan
- Contoh ini menunjukkan bagaimana menggunakan tanda base untuk membuka semua tanda di jendela baru.
Contoh Meta informasi HTML (meta)
- Deskripsi Dokumen
- Informasi di dalam elemen Meta dapat mendeskripsikan dokumen HTML.
- Kata Kunci Dokumen
- Informasi di dalam elemen Meta dapat mendeskripsikan kata kunci dokumen.
- Peralihan
- Contoh ini menunjukkan bagaimana mengalihkan pengguna ke alamat lain saat URL telah berubah.
Contoh Skrip HTML (Script)
- Inserti Satu Bab Skrip
- Contoh ini menunjukkan bagaimana menginsert skrip ke dokumen HTML.
- Berjalan di Peramban yang Tidak Mendukung Skrip
- Contoh ini menunjukkan bagaimana menghadapi peramban yang tidak mendukung skrip.
- Halaman Sebelumnya HTML5 SSE
- Halaman Berikutnya Pengujian HTML
