17 Contoh Kode HTML Sederhana yang Dapat Anda Pelajari dalam 10 Menit

17 Contoh Kode HTML Sederhana yang Dapat Anda Pelajari dalam 10 Menit

Meskipun situs web modern umumnya dibuat dengan antarmuka yang ramah pengguna, ada gunanya mengetahui beberapa HTML dasar. Jika Anda mengetahui 17 contoh tag HTML berikut (dan beberapa tambahan), Anda akan dapat membuat halaman web dasar dari awal atau mengubah kode yang dibuat oleh aplikasi seperti WordPress.





Kami telah menyediakan contoh kode HTML dengan output untuk sebagian besar tag. Jika Anda ingin melihatnya beraksi, unduh contoh file HTML di akhir artikel. Anda dapat memainkannya di editor teks dan memuatnya di browser untuk melihat apa yang dilakukan perubahan Anda.



1.

Anda akan memerlukan tag ini di awal setiap dokumen HTML yang Anda buat. Ini memastikan bahwa browser tahu bahwa itu membaca HTML, dan mengharapkan HTML5, versi terbaru.





Meskipun ini sebenarnya bukan tag HTML, ini tetap bagus 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 halaman web Anda. Sebaliknya, ini berisi metadata untuk mesin pencari, dan info untuk browser Anda.

Untuk halaman dasar, tag akan berisi judul Anda, dan itu saja. Tetapi ada beberapa hal lain yang dapat Anda sertakan, yang akan kita bahas sebentar lagi.



Empat.

Tag ini menetapkan judul halaman Anda. Yang perlu Anda lakukan adalah memasukkan judul Anda ke dalam tag dan menutupnya, seperti ini (saya juga menyertakan tag header, untuk menunjukkan konteksnya):


My Website

Itulah nama yang akan ditampilkan sebagai judul tab saat dibuka di browser.



5.

Seperti tag judul, metadata diletakkan di area header halaman Anda. Metadata terutama digunakan oleh mesin pencari, dan merupakan informasi tentang apa yang ada di halaman Anda. Ada sejumlah bidang meta yang berbeda, tetapi ini adalah beberapa yang paling umum digunakan:

  • keterangan : Deskripsi dasar halaman Anda.
  • kata kunci : Pilihan kata kunci yang berlaku untuk halaman Anda.
  • Pengarang : Penulis halaman Anda.
  • area pandang : Tag untuk memastikan bahwa halaman Anda terlihat bagus di semua perangkat.

Berikut ini contoh yang mungkin berlaku untuk halaman ini:




Tag 'viewport' harus selalu memiliki 'width=device-width, initial-scale=1.0' sebagai konten untuk memastikan laman Anda ditampilkan dengan baik di perangkat seluler dan desktop.

6.

Setelah Anda menutup bagian tajuk, Anda masuk ke badan. Anda membuka ini dengan tag, dan menutupnya dengan tag. Itu terjadi tepat di akhir file Anda, tepat sebelum tag.

Semua konten halaman web Anda berada di antara tag ini. Ini sesederhana kedengarannya:


Everything you want displayed on your page.

7.

Header Sedikit Kurang Besar


Sub-Judul

Hasil:

Seperti yang Anda lihat, mereka semakin kecil di setiap level.

8.

Tag paragraf memulai paragraf baru. Ini biasanya menyisipkan dua jeda baris.

Lihat, misalnya, pada jeda antara baris sebelumnya dan baris ini. Itulah yang

tag akan dilakukan.

Your first paragraph.


Your second paragraph.

Hasil:

Paragraf pertama Anda.

Paragraf kedua Anda.

Anda juga bisa gunakan gaya CSS di tag paragraf Anda, seperti ini yang mengubah ukuran teks:

This is 50% larger text.

Hasil:

9.

Tag jeda baris menyisipkan satu jeda baris:

The first line.

The second line (close to the first one).

Hasil:

Bekerja dengan cara yang sama adalah

menandai. Ini menarik garis horizontal pada halaman Anda dan bagus untuk memisahkan bagian teks.

10.

Tag ini mendefinisikan teks penting. Secara umum, itu berarti akan berani. Namun, dimungkinkan untuk menggunakan CSS untuk membuat tampilan teks berbeda.

unduh video apa pun dari situs mana pun

Namun, Anda dapat dengan aman menggunakan untuk teks tebal.

Very important things you want to say.

Hasil:

Hal-hal yang sangat penting yang ingin Anda katakan.

Jika Anda akrab dengan tag untuk teks tebal, Anda masih dapat menggunakannya. Tidak ada jaminan itu akan terus berfungsi di versi HTML yang akan datang, tetapi untuk saat ini, itu berfungsi.

sebelas.

Suka dan , dan yang terkait. NS tag mengidentifikasi teks yang ditekankan, yang umumnya berarti akan dicetak miring. Sekali lagi, ada kemungkinan bahwa CSS akan membuat tampilan teks yang ditekankan berbeda.

An emphasized line.

Hasil:

Garis yang ditekankan.

NS tag masih berfungsi, tetapi sekali lagi, tag tersebut mungkin tidak digunakan lagi di versi HTML yang akan datang.

12.

NS , atau jangkar, tag memungkinkan Anda membuat tautan. Tautan sederhana terlihat seperti ini:

Pergi ke MUO

Atribut 'href' mengidentifikasi tujuan tautan. Dalam banyak kasus, ini akan menjadi situs web lain. Bisa juga 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:

Go to MUO in a new tab

Hasil:

Buka MUO di tab baru

Atribut 'title' membuat tooltip. Arahkan kursor ke tautan di bawah untuk melihat cara kerjanya:

Hover over this to see the tool tip

Hasil:

Arahkan kursor ke ini untuk melihat tip alat

13.

Jika Anda ingin menyematkan gambar di halaman Anda, Anda harus menggunakan tag gambar. Anda biasanya akan menggunakannya bersama dengan atribut 'src'. Ini menentukan sumber gambar, seperti ini:

Hasil:

windows 10 memindahkan program ke drive lain

Atribut lain tersedia, seperti 'height', 'width', dan 'alt'. Begini tampilannya:

the name of your image

Seperti yang Anda duga, atribut 'height' dan 'width' mengatur tinggi dan lebar gambar. Secara umum, sebaiknya atur salah satunya saja agar skala gambar 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 merupakan ide bagus untuk disertakan dengan gambar apa pun. Jika seseorang memiliki koneksi yang sangat lambat atau browser lama, mereka masih bisa mendapatkan ide tentang apa yang seharusnya ada di halaman Anda.

14.

    Tag daftar terurut memungkinkan Anda membuat daftar terurut. Secara umum, itu berarti Anda akan mendapatkan daftar bernomor. Setiap item dalam daftar membutuhkan tag item daftar (

  1. ), sehingga daftar Anda akan terlihat seperti ini:


    1. First thing

    2. Second thing

    3. Third thing

    Hasil:

    1. Hal pertama
    2. Hal kedua
    3. Hal ketiga

    Di HTML5, Anda dapat menggunakan

      untuk membalik urutan angka. Dan Anda dapat mengatur nilai awal dengan atribut start.

      Atribut 'type' memungkinkan Anda memberi tahu browser jenis simbol mana yang akan digunakan untuk item daftar. Itu dapat diatur ke '1,' 'A,' 'a,' 'I,' atau 'i,' mengatur daftar untuk ditampilkan dengan simbol yang ditunjukkan seperti ini:

        limabelas.

          Daftar tidak berurutan jauh lebih sederhana daripada daftar yang dipesan. Ini hanya daftar berpoin.


          • First item

          • Second item

          • Third item

          Hasil:

          • Barang pertama
          • Barang kedua
          • Barang ketiga

          Daftar tak berurutan juga memiliki atribut 'type', dan Anda dapat menyetelnya ke 'disc,' 'circle,' atau 'square.'

          16.

          Meskipun menggunakan tabel untuk pemformatan tidak disukai, ada banyak waktu ketika Anda ingin menggunakan baris dan kolom untuk mengelompokkan informasi di halaman Anda. Beberapa tag diperlukan agar tabel berfungsi. Berikut contoh kode HTML:














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          NS

          dan
          tag menentukan awal dan akhir tabel. NStag berisi semua konten tabel.

          Setiap baris tabel diapit olehmenandai. Setiap sel dalam setiap baris dibungkus dengan baiktag untuk tajuk kolom, atautag untuk data kolom. Anda memerlukan salah satu dari ini untuk setiap kolom di setiap baris.

          Hasil:

          kolom 1kolom ke-2
          Baris 1, kolom 1Baris 1, kolom 2
          Baris 2, kolom 1Baris 2, kolom 2

          17.

          Saat Anda mengutip situs web atau orang lain dan Anda ingin membedakan kutipan dari dokumen Anda yang lain, gunakan tag blockquote. Yang perlu Anda lakukan adalah melampirkan kutipan dalam membuka dan menutup tag blockquote:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          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.

          Contoh Kode HTML

          Dengan 17 contoh HTML ini, Anda seharusnya sudah bisa membuat website sederhana. Anda dapat menguji semuanya sekarang di editor teks online untuk merasakan cara kerjanya.

          Untuk pelajaran kecil lainnya dalam HTML, cobalah beberapa aplikasi pembelajaran mikro untuk pengkodean. Mereka akan membantu Anda mempercepat dalam waktu singkat.

          Membagikan Membagikan Menciak Surel Ingin Belajar Coding Dasar? Coba 5 Aplikasi Coding Berukuran Bit di Waktu Luang Anda

          Ingin belajar coding dasar tapi punya sedikit waktu? Aplikasi pengkodean berukuran kecil ini hanya akan memakan waktu beberapa menit dari hari sibuk Anda.

          Baca Selanjutnya           Topik-topik yang berkaitan
          • Pemrograman
          • Wordpress
          • HTML
          • Pengembangan web
          • Tutorial Pengkodean
          Tentang Penulis Andy Betts(221 Artikel Diterbitkan)

          Andy adalah mantan jurnalis cetak dan editor majalah yang telah menulis tentang teknologi selama 15 tahun. Pada saat itu ia telah berkontribusi pada publikasi yang tak terhitung jumlahnya dan menghasilkan karya copywriting untuk perusahaan teknologi besar. Dia juga telah memberikan komentar ahli untuk media dan menjadi tuan rumah panel di acara-acara industri.

          More From Andy Betts

          Berlangganan newsletter kami

          Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

          Klik di sini untuk berlangganan