17 Contoh Kode HTML Sederhana yang Dapat Anda Pelajari dalam 10 Menit
Table of content:
Meskipun situs web modern umumnya dibuat dengan antarmuka yang ramah pengguna, mengetahui beberapa HTML dasar akan berguna. Jika Anda mengetahui 17 tag contoh HTML berikut (dan beberapa tambahan), Anda akan dapat membuat halaman web dasar dari awal atau men-tweak kode yang dibuat oleh aplikasi seperti WordPress.
Kami telah menyediakan contoh kode HTML sederhana dengan keluaran untuk sebagian besar tag. Jika Anda ingin mengujinya sendiri, salin contoh kode HTML ke dalam dokumen Anda sendiri. Anda dapat bermain-main dengannya di editor teks dan memuat file Anda di browser untuk melihat apa yang dilakukan perubahan Anda. Mari kita mulai!
Baca Juga:
1.
Anda memerlukan tag ini di awal setiap dokumen HTML yang Anda buat. Ini memastikan bahwa browser web mengetahui bahwa ia sedang membaca HTML dan mengharapkan HTML5, versi terbaru. Meskipun ini sebenarnya bukan tag HTML, ini tetap penting untuk diketahui.
2.
Ini adalah tag lain yang memberi tahu browser bahwa ia sedang membaca HTML. Tag langsung setelah tag DOCTYPE, dan Anda menutupnya dengan tag tepat di akhir file Anda. Segala sesuatu yang lain dalam dokumen Anda berada di antara tag-tag ini.
3.
Tag
memulai bagian header file Anda. Hal-hal yang masuk ke sini tidak muncul di laman web Anda. Sebaliknya, itu berisi metadata untuk mesin pencari dan info untuk browser Anda. Jika Anda menginginkan iklan di situs Anda, kode AdSense Google juga ada di sini.Untuk halaman dasar, tag
akan berisi judul Anda, dan itu saja. Namun ada beberapa hal lain yang dapat Anda sertakan, yang akan kita bahas sebentar lagi. 4.
Tag ini menetapkan judul halaman Anda. Yang perlu Anda lakukan adalah memasukkan judul Anda ke dalam tag dan menutupnya, seperti ini (kami juga menyertakan tag tajuk, untuk menunjukkan konteksnya):
<head>
<title>My Website</title>
</head> Itulah nama yang akan ditampilkan sebagai judul tab ketika dibuka di browser.
Seperti tag judul, metadata diletakkan di area header halaman Anda. Metadata terutama digunakan oleh mesin telusur dan merupakan informasi tentang apa yang ada di laman Anda. Ada beberapa bidang meta, tetapi ini adalah beberapa yang paling umum digunakan:
- keterangan: Deskripsi dasar halaman Anda.
- kata kunci: Pilihan kata kunci yang berlaku untuk halaman Anda (walaupun sekarang umumnya diabaikan oleh mesin pencari).
- pengarang: Penulis halaman Anda.
- area pandang: Tag untuk memastikan halaman Anda terlihat bagus di semua perangkat.
Berikut adalah contoh yang mungkin berlaku untuk halaman ini:
<meta name="description" content="A basic HTML tutorial">
<meta name="keywords" content="HTML,code,tags">
<meta name="author" content="MUO">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Tag “viewport” harus selalu memiliki “width=device-width, initial-scale=1.0” sebagai konten untuk memastikan halaman Anda ditampilkan dengan baik di perangkat seluler dan desktop.
6.
Setelah Anda menutup bagian header, Anda masuk ke body. Anda membukanya dengan tag
, dan menutupnya dengan tag . Itu terjadi tepat di akhir file Anda, tepat sebelum tag .Semua konten laman web Anda berada di antara tag badan ini. Ini sesederhana kedengarannya:
<body>
Everything you want displayed on your page.
</body> Tag
mendefinisikan header tingkat satu di halaman Anda. Ini biasanya akan menjadi judul, dan idealnya hanya ada satu judul di setiap halaman.
mendefinisikan header level-dua seperti header bagian, sub-header level-tiga, dan seterusnya, hingga. Sebagai contoh, nama tag pada artikel ini adalah header level dua.
. Sebagai contoh, nama tag pada artikel ini adalah header level dua.
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3> Hasil:
Seperti yang Anda lihat, mereka menjadi lebih kecil di setiap level. Mesin pencari memeringkat mereka dalam urutan kepentingan.
8.
Tag paragraf memulai paragraf baru. Ini biasanya menyisipkan dua jeda baris.
Lihat, misalnya, jeda antara baris sebelumnya dan baris ini. Itulah yang akan dilakukan oleh tag
.
<p>Your first paragraph.</p>
<p>Your second paragraph.</p> Hasil:
paragraf pertama Anda.
Paragraf kedua Anda.
Anda juga dapat menggunakan gaya CSS dalam tag paragraf Anda, seperti ini yang mengubah ukuran teks:
<p style="font-size: 150%;">This is 50% larger text.</p> Hasil:
9.
Tag jeda baris menyisipkan jeda baris tunggal, tanpa spasi di antara baris:
<p>The first line.The second line (close to the first one).</p>
Hasil:
Bekerja dengan cara yang sama adalah tag
. Ini menarik garis horizontal pada halaman Anda dan bagus untuk memisahkan bagian teks.
10.
Tag ini mendefinisikan teks penting. Secara umum, artinya akan dicetak tebal, meskipun dimungkinkan untuk menggunakan CSS untuk membuat tampilan teks berbeda.
Namun, secara default, Anda dapat menggunakan dengan aman untuk menebalkan teks.
<strong>Very important things you want to say.</strong> Hasil:
Hal yang sangat penting yang ingin Anda katakan.
Jika Anda terbiasa dengan tag untuk menebalkan teks, tag ini masih berfungsi, tetapi tidak lagi disarankan. Anda harus selalu menggunakan tag sebagai gantinya.
11.
Seperti dan , dan terkait. Tag mengidentifikasi teks yang ditekankan, yang umumnya berarti akan dicetak miring. Sekali lagi, ada kemungkinan bahwa CSS akan membuat tampilan teks yang ditekankan berbeda.
<em>An emphasized line.</em> Hasil:
Garis yang ditekankan.
Tag masih berfungsi, tetapi sekali lagi, ini tidak disarankan, dan mungkin tidak akan digunakan lagi di versi HTML mendatang.
12.
Tag , atau jangkar, memungkinkan Anda membuat tautan. Tautan sederhana terlihat seperti ini:
<a href="https://www.muo.com/>Go to MUO</a> Hasil:
Atribut “href” mengidentifikasi tujuan tautan. Dalam kebanyakan kasus, ini akan menjadi situs web lain. Itu juga bisa berupa file, seperti gambar atau PDF.
Atribut berguna lainnya termasuk “target” dan “title.” Atribut target hampir secara eksklusif digunakan untuk membuka tautan di tab atau jendela baru, seperti ini:
<a href="https://www.muo.com/" target="_blank">Go to MUO in a new tab</a> Hasil:
Atribut “title” membuat tooltip. Arahkan kursor ke tautan di bawah untuk melihat cara kerjanya:
<a href="https://www.muo.com/" title="This is a tooltip">Hover over this to see the tooltip</a> Hasil:
Arahkan kursor ke atas untuk melihat tooltip
13. ![]()
Jika Anda ingin menyematkan gambar di halaman Anda, Anda harus menggunakan tag gambar. Biasanya Anda akan menggunakannya bersamaan dengan atribut “src”. Ini menentukan sumber gambar, seperti ini:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg"> Hasil:
Atribut lain tersedia, seperti “tinggi”, “lebar”, dan “alt”. Begini tampilannya:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="the name of your image"> Seperti yang Anda duga, atribut “tinggi” dan “lebar” mengatur tinggi dan lebar gambar. Secara umum, sebaiknya atur salah satunya saja agar gambar diskalakan dengan benar. Jika Anda menggunakan keduanya, Anda bisa mendapatkan gambar yang diregangkan atau diperkecil.
Tag “alt” memberi tahu browser teks apa yang akan ditampilkan jika gambar tidak dapat ditampilkan dan harus disertakan dengan gambar apa pun. Ini adalah fitur aksesibilitas, dan pembaca layar akan membacakan teks alt dengan lantang.
Untuk melangkah lebih jauh, dan untuk meningkatkan kinerja di situs Anda, lihat panduan kami tentang cara membuat gambar responsif dalam HTML.
14.
Tag daftar terurut memungkinkan Anda membuat, secara default, daftar bernomor. Setiap item dalam daftar memerlukan tag item daftar (
<ol>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ol> Hasil:
- Hal pertama
- Hal kedua
- Hal ketiga
Di HTML5, Anda dapat menggunakan
- untuk membalik urutan angka. Dan Anda dapat mengatur nilai awal dengan atribut “mulai”.
Atribut “type” memungkinkan Anda memberi tahu browser jenis simbol apa yang akan digunakan untuk item daftar, termasuk angka, huruf, dan angka Romawi. Itu dapat diatur ke “1,” “A,” “a,” “I,” atau “i,” mengatur daftar untuk ditampilkan dengan simbol yang ditunjukkan seperti ini:
<ol type="A"> 15.
Daftar yang tidak diurutkan jauh lebih sederhana daripada daftar yang dipesan. Ini hanyalah daftar berpoin.
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul> Hasil:
- Barang pertama
- Barang kedua
- Barang ketiga
Daftar yang tidak diurutkan juga memiliki atribut “type”, dan Anda dapat menyetelnya ke “disc”, “circle”, atau “square”.
16.
Meskipun Anda tidak boleh menggunakan tabel untuk pemformatan, sering kali Anda ingin menggunakan baris dan kolom untuk mengelompokkan informasi di halaman Anda. Beberapa tag diperlukan agar tabel berfungsi. Berikut contoh kode HTMLnya:
<table>
<tbody>
<tr>
<th>1st column</th>
<th>2nd column</th>
</tr>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tbody>
</table> Tag
menentukan awal dan akhir tabel. Tag
berisi semua konten tabel.Setiap baris tabel diapit oleh tag
Hasil:
kolom ke-1 | kolom ke-2 |
|---|---|
Baris 1, kolom 1 | Baris 1, kolom 2 |
Baris 2, kolom 1 | Baris 2, kolom 2 |
17.
Saat Anda mengutip situs web atau orang lain dan Anda ingin memisahkan kutipan dari dokumen Anda yang lain, gunakan tag blockquote. Yang perlu Anda lakukan hanyalah menyertakan kutipan dalam tag pembuka dan penutup blockquote:
<blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.</blockquote> Hasil:
Web seperti yang saya bayangkan, kami belum melihatnya. Masa depan masih jauh lebih besar dari masa lalu.
Pemformatan persis yang digunakan mungkin bergantung pada browser yang Anda gunakan atau CSS situs Anda. Tapi tagnya tetap sama.
Kuasai Contoh dan Contoh Kode HTML Ini
Dengan 17 contoh coding HTML ini, Anda seharusnya sudah bisa membuat website sederhana. Anda dapat menguji semuanya sekarang di editor teks online untuk mengetahui cara kerjanya.
Ini hanyalah awal dari apa yang dapat Anda lakukan dengan program HTML sederhana. Setelah menguasai dasar-dasarnya, Anda dapat mulai menambahkan fitur lain dan efek keren untuk membuat halaman Anda terlihat lebih profesional.
Artikel Terkait
