Contoh HTML
- Halaman Sebelumnya HTML5 SSE
- Halaman Berikutnya Pengujian HTML
Contoh tag dasar HTML
- Berkas HTML sederhana
- Contoh ini adalah sebuah berkas HTML yang sangat sederhana, menggunakan sedikit tag HTML yang mungkin. Ini memperlihatkan bagaimana konten di dalam elemen body ditampilkan oleh pereka laman.
- Paragraf sederhana
- Contoh ini menunjukkan bagaimana teks di dalam elemen paragraf ditampilkan oleh pereka laman.
- Lebih banyak paragraf
- Pembandingan contoh beberapa perilaku baku elemen paragraf.
- Masalah 'Poetry'
- Pembandingan contoh beberapa masalah pengformatan HTML.
- Pengecampuran baris
- Pembandingan contoh penggunaan pengecampuran baris dalam dokumen HTML.
- Judul
- Contoh tag judul yang digunakan untuk memaparkan judul di dalam dokumen HTML.
- Judul diatur di tengah
- Contoh judul yang diatur di tengah
- Baris horizontal
- Contoh ini memaparkan bagaimana memasukkan baris horizontal.
- Komen tersembunyi
- Contoh ini memaparkan bagaimana mengekskluhkan komen di dalam kod sumber HTML.
- Warna latar
- Contoh ini memaparkan bagaimana menambah warna latar bagi laman HTML.
Contoh format teks HTML
- Format teks
- Contoh ini memaparkan bagaimana memformatkan teks di dalam fail HTML.
- Teks preformat
- Contoh ini memaparkan bagaimana mengawal baris kosong dan spasi dengan tag pre.
- Tag "keluaran komputer"
- Contoh ini memaparkan kesan tag "keluaran komputer" yang berbeza.
- Alamat
- Contoh ini memaparkan bagaimana menulis alamat di dalam fail HTML.
- Singkatan dan singkatan huruf pertama
- Contoh ini memaparkan bagaimana melaksanakan singkatan dan singkatan huruf pertama.
- Arah teks
- Contoh ini memaparkan bagaimana mengubah arah teks.
- Kutipan blok
- Contoh ini memaparkan bagaimana melaksanakan kutipan yang berbeza panjang.
- Dipadamkan teks dan teks disisipkan
- Contoh ini memaparkan bagaimana menandakan teks dipadam dan teks disisipkan.
Contoh pautan HTML
- Buat pautan super
- Incontoh ini memaparkan bagaimana membuat pautan di dokumen HTML.
- Gunakan imej sebagai pautan
- Incontoh ini memaparkan bagaimana menggunakan imej sebagai pautan.
- Buka pautan di tingkap penyemak pengguna baru
- Incontoh ini memaparkan bagaimana membuka halaman di tingkap baru, begitu pengguna tidak perlu meninggalkan laman anda.
- Melompat ke lokasi lain di halaman yang sama
- Incontoh ini memaparkan bagaimana melompat melalui pautan untuk ke bahagian lain dokumen.
- Keluar dari kerangka
- Incontoh ini memaparkan bagaimana keluar dari kerangka, jika halaman anda disabitkan di dalam kerangka.
- Buat pautan emel
- Incontoh ini memaparkan bagaimana menghubungkan kepada emel. (Incontoh ini akan berfungsi selepas program klien emel dis instal.)
- Buat pautan emel 2
- Incontoh ini memaparkan pautan emel yang lebih kompleks.
Contoh kerangka HTML
- Kerangka vertikal
- Incontoh ini memaparkan bagaimana membuat kerangka vertikal menggunakan tiga dokumen yang berbeza.
- Kerangka horizontal
- Incontoh ini memaparkan bagaimana membuat kerangka horizontal menggunakan tiga dokumen yang berbeza.
- Bagaimana menggunakan tag <noframes>
- Incontoh ini memaparkan bagaimana menggunakan tag <noframes>.
- Struktur kerangka gabungan
- Incontoh ini memaparkan bagaimana membuat struktur kerangka yang mengandungi tiga dokumen, serta menggabungkannya di baris dan lajur.
- Struktur kerangka yang mempunyai sifat noresize="noresize"
- Incontoh ini memaparkan sifat noresize. Dalam keadaan ini, kerangka adalah tidak boleh diubah saiz. Apabila anda menyeret tetikus di sebelah pinggir kerangka, anda akan mendapati bahawa pinggir kerangka adalah tidak boleh dipindahkan.
- Kerangka navigasi
- Incontoh ini memaparkan bagaimana membuat kerangka navigasi. Kerangka navigasi mengandungi senarai pautan yang bertujuan kepada 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 表单与输入实例
- Kotak teks (Text fields)
- Contoh ini menunjukkan bagaimana membuat kotak teks di halaman HTML. Pengguna dapat menulis teks di kotak 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 yang dapat dipilih.
- Daftar pilihan lain
- Contoh lain untuk daftar pilihan dengan pilihan yang disesuaikan terlebih dahulu. (Catatan terjemahan: pilihan yang disesuaikan terlebih dahulu adalah pilihan yang disesuaikan sebelumnya.)
- Kotak teks (Textarea)
- Contoh ini menunjukkan bagaimana membuat kotak teks (kontrol input teks berbaris). Pengguna dapat menulis teks di kotak teks. Dalam kotak 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 sekeliling data
- Contoh ini menunjukkan bagaimana menggambar sebuah kotak dengan judul di sekeliling data.
Contoh formulir
- Formulir dengan kotak input dan tombol konfirmasi
- Contoh ini menunjukkan bagaimana menambahkan formulir ke halaman. Formulir ini berisi dua kotak input dan tombol konfirmasi.
- Formulir dengan kotak centang
- Formulir ini berisi dua kotak centang dan tombol konfirmasi.
- Formulir dengan kotak pilihan
- Formulir ini berisi dua kotak pilihan dan tombol konfirmasi.
- Mengirim email melalui formulir
- Contoh ini menunjukkan bagaimana mengirim email melalui formulir.
Contoh gambar HTML
- Memasukkan gambar
- Contoh ini menunjukkan bagaimana menampilkan gambar di halaman web.
- Memasukkan gambar dari lokasi lain
- Contoh ini menunjukkan bagaimana menampilkan gambar dari lokasi lainnya di halaman web.
- Gambar latar belakang
- Contoh ini menunjukkan bagaimana menambahkan gambar latar belakang ke halaman HTML.
- Penataan gambar
- Contoh ini menunjukkan bagaimana mengatur penataan gambar di teks.
- Buang gambar
- Contoh ini menunjukkan bagaimana membuang gambar ke kiri atau kanan paragraf.
- Menyesuaikan ukuran gambar
- Contoh ini menunjukkan bagaimana mengatur ukuran gambar ke berbagai ukuran.
- Menampilkan teks penggantian untuk gambar
- Contoh ini menunjukkan bagaimana menampilkan teks penggantian untuk gambar. Saat gambar gagal dimuat di browser, atribut teks penggantian memberitahu pembaca informasi yang hilang. Biasa memberikan atribut teks penggantian untuk gambar di halaman adalah kebiasaan 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 belakang HTML
- Kombinasi latar dan warna yang baik
- Contoh yang baik bagi kombinasi warna latar dan teks, membuat teks di halaman mudah untuk dibaca.
- Kombinasi latar belakang dan warna yang buruk
- Contoh yang memperlihatkan pengaturan warna latar dan warna teks yang kurang baik, membuat teks di halaman sulit dibaca.
- Gambar latar yang dapat digunakan
- Contoh yang memperlihatkan bagaimana gambar latar dan warna teks membuat teks di halaman mudah dibaca.
- Gambar latar yang dapat digunakan 2
- Contoh lain tentang gambar latar dan warna teks yang membuat teks di halaman mudah dibaca.
- Gambar latar yang kurang dapat digunakan
- Contoh yang memperlihatkan bagaimana gambar latar dan warna teks membuat teks di halaman sulit dibaca.
Contoh Gaya HTML (style)
- Gaya dalam HTML
- Contoh menggunaan informasi gaya yang ditambahkan ke bagian <head> untuk memformat HTML.
- Tanda tanpa garis bawah
- Contoh menggunaan gaya untuk membuat tanda yang tidak memiliki garis bawah.
- 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 tajuk tidak akan muncul di jendela browser.
- 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.
- Pengalihan
- Contoh ini menunjukkan: pengalihan pengguna ke alamat lain saat alamat URL telah berubah.
Contoh Skrip (Script) HTML
- Masukkan sebuah skrip
- Contoh ini menunjukkan bagaimana memasukkan skrip ke dalam dokumen HTML.
- Berjalan di browser yang tidak mendukung skrip
- Contoh ini menunjukkan bagaimana menghadapi browser yang tidak mendukung skrip.
- Halaman Sebelumnya HTML5 SSE
- Halaman Berikutnya Pengujian HTML
