Contoh HTML
- Halaman Sebelumnya HTML5 SSE
- Halaman Berikutnya Pemantauan HTML
Contoh tag dasar HTML
- File HTML sederhana
- Contoh ini adalah file HTML yang sangat sederhana, menggunakan sedikit tag HTML. Ini menunjukkan bagaimana konten elemen body ditampilkan oleh penyemprot.
- Paragraf sederhana
- Contoh ini memperlihatkan bagaimana teks dalam elemen paragraf ditampilkan oleh penyemprot.
- Lebih banyak paragraf
- Contoh ini memperlihatkan beberapa perilaku baku elemen paragraf.
- Masalah puisi
- Contoh ini memperlihatkan beberapa masalah pengformatan HTML.
- Garis putar
- Contoh ini memperlihatkan penggunaan garis putar dalam dokumen HTML.
- Tajuk
- Contoh tajuk yang digunakan untuk menunjukkan tajuk di dokumen HTML.
- Tajuk diatur tengah
- Contoh tajuk yang diatur tengah.
- Baris horizontal
- Contoh ini memaparkan bagaimana untuk menyisipkan baris horizontal.
- Komen tersembunyi
- Contoh ini memaparkan bagaimana untuk menyisipkan komen tersembunyi di dalam kod sumber HTML.
- Warna latar
- Contoh ini memaparkan bagaimana untuk menambah warna latar halaman HTML.
Contoh format teks HTML
- Format teks
- Contoh ini memaparkan bagaimana untuk mengformatkan teks di dokumen HTML.
- Teks preformat
- Contoh ini memaparkan bagaimana untuk mengawal baris kosong dan spasi dengan tanda <pre>.
- Tanda tukar output komputer
- Contoh tanda tukar output komputer yang berbeza.
- Alamat
- Contoh ini memaparkan bagaimana untuk menulis alamat di dokumen HTML.
- Singkatan dan singkatan huruf pertama
- Contoh ini memaparkan bagaimana untuk menghasilkan singkatan dan singkatan huruf pertama.
- Arah teks
- Contoh ini memaparkan bagaimana untuk mengubah arah teks.
- Petikan blok
- Contoh ini memaparkan bagaimana untuk menghasilkan petikan yang berbeza panjang.
- Kesan teks dihapus dan teks disisipkan
- Contoh ini memaparkan bagaimana untuk menandai teks yang dihapus dan teks yang disisipkan.
Contoh pautan HTML
- Cipta pautan super
- Contoh ini memaparkan bagaimana untuk mencipta pautan di dokumen HTML.
- Ganti imej sebagai pautan
- Contoh ini memaparkan bagaimana untuk menggunakan imej sebagai pautan.
- Buka pautan di tetingkap penuh browser
- Contoh ini memaparkan bagaimana untuk membuka halaman di tetingkap penuh browser, supaya pengguna tidak perlu meninggalkan tapak anda.
- Melompat ke tempat lain di halaman yang sama
- Contoh ini memaparkan bagaimana untuk melompat melalui pautan ke bahagian lain dokumen.
- Keluar dari kerangka
- Contoh ini memaparkan bagaimana untuk keluar dari kerangka, jika halaman anda disekat di dalam kerangka.
- Cipta pautan e-mel
- Contoh ini memaparkan bagaimana untuk menghubungi e-mel. (Ini akan berfungsi selepas program klien e-mel diinstal.)
- Cipta pautan e-mel 2
- Contoh ini memaparkan pautan e-mel yang lebih kompleks.
Contoh kerangka HTML
- Kerangka vertikal
- Contoh ini memaparkan bagaimana untuk membuat kerangka vertikal dengan tiga dokumen yang berbeza.
- Kerangka horizontal
- Contoh ini memaparkan bagaimana untuk membuat kerangka horizontal dengan tiga dokumen yang berbeza.
- Bagaimana untuk menggunakan label <noframes>
- Contoh ini memaparkan bagaimana untuk menggunakan label <noframes>.
- Struktur kerangka gabungan
- Contoh ini memaparkan bagaimana membuat struktur kerangka yang mengandungi tiga dokumen, serta menggabungkannya di baris dan larik.
- Struktur kerangka dengan ciri noresize="noresize"
- Contoh ini memaparkan ciri noresize. Dalam contoh ini, kerangka adalah tidak boleh diubah saiz. Apabila memindahkan kursor ke atas sebelah pinggir kerangka, anda akan mendapati bahawa pinggir kerangka adalah tidak boleh dipindahkan.
- Kerangka navigasi
- Contoh ini memaparkan bagaimana membuat kerangka navigasi. Kerangka navigasi mengandungi senarai pautan yang bertujuan ke kerangka kedua. Fail yang dinamakan 'contents.htm' mengandungi tiga pautan.
- 内联框架
- 本例演示如何创建内联框架（HTML 页中的框架）。
- 跳转至框架内的一个指定的节
- 本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用 <a name="C10"> 进行标识。
- 使用框架导航跳转至指定的节
- 本例演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。
HTML 表格实例
- 表格
- 这个例子演示如何在 HTML 文档中创建表格。
- 表格边框
- 本例演示各种类型的表格边框。
- 没有边框的表格
- 本例演示一个没有边框的表格。
- 表格中的表头(Heading)
- 本例演示如何显示表格表头。
- 空单元格
- 本例展示如何使用 " " 处理没有内容的单元格。
- 带有标题的表格
- 本例演示一个带标题 (caption) 的表格
- 跨行或跨列的表格单元格
- 本例演示如何定义跨行或跨列的表格单元格。
- 表格内的标签
- 本例演示如何显示在不同的元素内显示元素。
- 单元格边距(Cell padding)
- 本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
- 单元格间距(Cell spacing)
- 本例演示如何使用 Cell spacing 增加单元格之间的距离。
- 向表格添加背景颜色或背景图像
- 本例演示如何向表格添加背景。
- 向表格单元添加背景颜色或者背景图像
- 本例演示如何向一个或者更多表格单元添加背景。
- 在表格单元中排列内容
- 本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
- 框架(frame)属性
- 本例演示如何使用 "frame" 属性来控制围绕表格的边框。
HTML 列表实例
HTML 表单与输入实例
- 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 disesuaikan.
- Daftar pilihan lainnya
- Contoh lainnya untuk daftar pilihan dengan pilihan yang disesuaikan terlebih dahulu. (Catatan penerjemah: pilihan yang disesuaikan terlebih dahulu adalah pilihan yang disesuaikan sebelumnya.)
- Area teks (Textarea)
- Contoh ini menunjukkan bagaimana membuat area teks (kontrol input teks berbaris). Pengguna dapat menulis teks di area teks. Di 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 dari 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 menggerakkan gambar ke kiri atau kanan paragraf.
- Mengatur ukuran gambar
- Contoh ini menunjukkan bagaimana mengatur ukuran gambar ke berbagai ukuran.
- 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. Ada baiknya menambahkan atribut teks pengganti untuk setiap 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
- Bekas dan warna yang disesuaikan baik
- Contoh warna latar dan teks yang disesuaikan baik, memudahkan teks di halaman web untuk dibaca.
- Bekas latar dan warna yang kurang seimbang
- Contoh yang menjadikan teks sulit dibaca karena kombinasi warna latar dan teks.
- Gambar latar yang dapat diakses
- Contoh yang menjadikan teks di halaman mudah dibaca karena gambar latar dan warna teks.
- Gambar latar yang dapat diakses 2
- Contoh lain tentang gambar latar dan warna teks yang membuat teks di halaman mudah dibaca.
- Gambar latar yang kurang dapat diakses
- Contoh yang menjadikan teks di halaman sulit dibaca karena gambar latar dan warna teks.
Contoh Gaya HTML (style)
- Gaya di HTML
- Contoh menggunakan informasi gaya yang ditambahkan ke bagian head untuk memformat HTML.
- Tanda tanpa garis bawah
- Contoh menghapus garis bawah tanda
- 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 muncul di jendela pemusnah.
- Satu target, semua tanda
- Contoh ini menunjukkan bagaimana menggunakan tanda base untuk membuka semua tanda di jendela baru.
Contoh Meta Data HTML (meta)
- Deskripsi Dokumen
- Informasi dalam elemen Meta dapat mendeskripsikan dokumen HTML.
- Kata Kunci Dokumen
- Informasi 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 (Script) HTML
- Masukkan sepotong skrip
- Contoh ini menunjukkan bagaimana memasukkan skrip ke dokumen HTML.
- Berjalan di pemusnah yang tidak mendukung skrip
- Contoh ini menunjukkan bagaimana menangani pemusnah yang tidak mendukung skrip.
- Halaman Sebelumnya HTML5 SSE
- Halaman Berikutnya Pemantauan HTML
