25+ Contoh Coding HTML Untuk Pemula

25+ Contoh Coding HTML untuk Pemula
Agar tidak bingung, sebaiknya Anda mengenal dulu beberapa istilah

untuk belajar HTML:
• Tag: awalan instruksi atau perintah yang akan dibaca browser.

Misalnya: tag <bold>.
• Elemen: keseluruhan kode yang terdiri dari tag pembuka (< >)
hingga tag penutup (/< >).
• Atribut/property: informasi atau perintah tambahan yang berada
di dalam elemen (Contoh: style)
Nah sekarang, Anda sudah siap belajar contoh HTML untuk pemula. Di
bagian akhir, kami juga akan memberikan bonus contoh desain web
HTML keren yang layak Anda coba, lho. Penasaran? Yuk lanjut
membaca!
1. HTML Basic
Segala template HTML di dunia memiliki bentuk dasar, yaitu HTML

Basic. Apa saja yang pasti ada dalam coding HTML Basic? Kami akan
membedahnya satu per satu.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Title of the document</title>
5</head>
6<body>
7 <h1>Heading</h1>
8 <p>Paragraf.</p>
9</body>
10</html>
Pertama, dokumen HTML adalah harus diawali dengan <!DOCTYPE

html>. Fungsinya sebagai deklarasi sehingga browser tahu dokumen
ditulis dalam HTML.
Berikutnya, ada tag <html>. Tag ini akan menampung seluruh tag
HTML dari awal hingga penutupan, yaitu </html>.
Setelah <html>, masuk ke tag <head>. Seperti namanya, tag ini berisi
coding HTML untuk membuat kepala dokumen. Hasilnya akan terlihat
sebagai judul pada tab browser Anda.
Lalu, tibalah Anda ke tag <body>. Coding HTML ini memuat inti
dokumen HTML Anda, yaitu isian website.
Di akhir, jangan lupa tutup dokumen HTML dengan tag penutup yang
sesuai (</html>, </body>, dll).
2. Heading
Heading adalah judul hingga sub-judul yang ada di dalam website.

Fungsinya, untuk memetakan info dari umum ke khusus.
Selain memudahkan visitor menangkap inti informasi, heading juga

mendongkrak SEO website.
Alasannya, Google jadi lebih paham struktur dan konteks artikel,

deskripsi produk, ataupun media teks lainnya pada website.
Berikut contoh HTML untuk berbagai macam heading.
<h1> Heading 1 <h1>

<h2> Heading 2 <h2>
<h3> Heading 3 <h3>
<h4> Heading 4 <h4>
Makin spesifik info dan pemilihan sub-judulnya, makin kecil juga
ukuran heading. Tentunya dengan coding HTML tag heading, Anda tak
perlu repot-repot format ukuran heading secara manual. Praktis, bukan?
3. Paragraf
Nah, contoh HTML berikutnya yaitu membuat paragraf.
Paragraf itu penting. Sekarang, bayangkan Anda membaca artikel

website yang tidak punya paragraf. Setiap ide pokok terlihat samar dan
melelahkan mata gara-gara tak punya jeda.
Karena itu, setiap paragraf perlu dipisah. Nah untuk membuat paragraf
dengan coding HTML, gunakan saja tag P.
<p>text</p>
Setelah itu, paragraf baru akan muncul menjadi baris baru. Alhasil,
tulisan jadi lebih enak dibaca dan rapi, bukan?
4. Bold/Strong
Contoh coding HTML berikutnya, ada bold/strong.
Pasti, Anda sudah tahu tag HTML ini akan memberi efek tebal pada
tulisan. Tapi, apa sih beda antara bold dan strong?
Tulisan dengan efek bold (atas) dan strong (bawah)
Pertama, coding HTML bold dan strong memiliki tag yang berbeda:
<b>Afiliasi adalah kerja sama promosi dan penjualan produk</b>

<strong>Afiliasi adalah kerja sama promosi dan penjualan produk</strong>
Dan meskipun outputnya terlihat sama, Google memandangnya lain.
Coding HTML bold sekadar memberi efek tebal, sedangkan tag

strong memiliki pengaruh bagi web crawling. Sebab, tag strong mampu
memberitahu Google kata atau keyword penting yang memperkuat info
dari konten website.
Jadi, manakah yang Anda butuhkan? Tag bold atau tag strong?
5. Italic/Emphasize
Mirip seperti tag bold/strong, ada dua coding HTML yang bisa Anda
pakai untuk memiringkan kata-kata.
Berikut contoh HTML dengan tag italic/emphasize.
<i>Bug adalah istilah bahasa Inggris yang artinya serangga.<i>

<em>Bug adalah istilah bahasa Inggris yang artinya serangga.<em>
Lalu, manakah yang sebaiknya Anda pakai?
Kembali lagi ke kebutuhan Anda. Jika hanya ingin memiringkan kata-

kata saja, gunakanlah coding HTML italic. Sedangkan jika mau
menekankan kata tertentu agar Google lebih mudah mengindeks
konten, pakailah tag <em>.
6. Line Break
Sekilas, coding HTML Line Break mirip dengan coding HTML paragraf.
Seperti namanya, Line Break berfungsi membuat baris baru. Namun,

baris tersebut masih dalam paragraf yang sama. Ini dia contoh HTML
Line Break.
<p> <br>Text
<br> Text </p>
Hasilnya akan terlihat seperti ini.
Lalu, apa sih yang membedakan coding HTML Line Break dengan
Paragraf?
Untuk outputnya sendiri memang sepintas sama. Namun, tag <p> lebih
berisiko error pada beberapa browser. Sedangkan tag <br> digadang-
gadang akan lebih di-support oleh HTML5 daripada tag <p>.
Beda dari contoh HTML-lainnya, coding HTML <br> memang tidak

memiliki tag penutup </br>. Jadi, Anda cukup menggunakan <br> saja.
7. Images
Siapa yang suka website tanpa gambar? Mungkin, hampir tidak ada
orang yang menyukainya!
Selain membosankan, info dalam website jadi kurang jelas. Faktanya,

memasukkan ilustrasi meningkatkan views hingga 45%, loh.
Nah untuk memasukkan gambar, gunakan coding HTML images.

Ukurannya juga bisa Anda atur sendiri pada atribut Style.
<img src=”url atau lokasi penyimpanan gambar” alt=”text” style=”width:500px;height:333px;”>
Berikut hasil contoh HTML images.
Eits, tunggu sebentar. Jika Anda perhatikan, dalam contoh coding HTML
images tadi ada atribut ‘alt’. Apakah itu?
Alt text adalah kata yang diselipkan ke dalam gambar. Fungsinya

sebagai antisipasi jika gambar invalid. Artinya, saat gambar tidak
muncul, alt text akan menggantikannya sehingga visitor web tetap
memahami deskripsi image.
8. Horizontal line
Contoh HTML selanjutnya, horizontal line.
Sederhana saja, coding HTML ini memungkinkan Anda membuat garis

horizontal.
Contoh coding HTML-nya juga simple. Cukup masukkan tag <hr> pada
bagian yang Anda inginkan.
<p> text </p>

<hr>
<p> text </p>
Penting!
Beda dari tag lainnya, tag <br>, <img>, dan <hr> memang tidak memiliki tag
penutup (/br>, </img>, </hr>).
9. Cross-through text
Cross-through text atau teks yang dicoret mampu menekankan makna

tertentu pada tulisan/informasi.
Biasanya, para penulis menggunakan strategi ini untuk menunjukkan

versi benar atau lebih baik dari suatu hal.
Membuat cross-through text mudah, kok. Langsung saja gunakan

contoh HTML ini.
<del>text.</del>
Sekarang, Anda sudah bisa mencoret tulisan sendiri bukan?
10. Quote
Banyak orang, termasuk Anda, menyukai quote. Selain indah, quote

mampu memotivasi seseorang melakukan action tertentu pada website.
Entah itu lanjut membaca artikel, membeli produk, dan hal lainnya.
Lalu, gimana sih cara membuat quote pada website dengan coding
HTML?
Nah, Anda bisa membuat dua jenis quote: blockquote atau short
quote.
Blockquote adalah quote panjang yang terpisah dari teks utama.

Sedangkan short quote yaitu quote ringkas yang bisa menjadi satu
bagian atau terpisah dari teks utama.
Blockquote
Short Quote
Di bawah ini contoh HTML yang bisa Anda gunakan.
<blockquote>text</blockquote>
<q>text</q>
11. Font
Dari contoh-contoh HTML sebelumnya, mungkin Anda bosan karena

hasil testing syntax selalu tampil dalam Times New Roman.
Tenang, Anda bisa kok mengubah jenis font. Baik itu pada header,
paragraf, ataupun jenis teks lainnya. Caranya, masukkan property style
ke dalam tag.
<h2 style=“font-family:Georgia;”>text</h2>
<p style=“font-family:Comic Sans MS;”>text</p>
Contoh coding HTML di atas kira-kira menghasilkan output seperti ini.
Oh ya, penting Anda tahu, setiap browser menyediakan jenis font

berbeda. Jadi jangan bingung jika ada browser yang tidak mau
menampilkan jenis font permintaan Anda.
12. Highlighted
Pernahkah Anda menstabilo catatan penting di buku yang sedang Anda

baca?
Nah, Anda juga bisa lho highlight kata penting pada website Anda.
Berikut contoh coding HTML untuk melakukannya.
<p> text <mark> catatan penting </mark> text </p>
Secara otomatis, highlight text Anda akan berwarna kuning.
Nah bagi Anda yang ingin memakai warna lain, bisa kok modif sendiri.
Caranya yaitu dengan menambahkan CSS berikut.
mark {
background-color: yellow;
color: black;
}
13. Text Colour
Butuh warna teks selain hitam? Bisa lho mengatur warna teks sendiri.
Caranya, gunakan property style seperti contoh HTML berikut.
<p style=”color:#ff471a;”>The flower is red </p>
Nah, Anda harus memasukkan warna sesuai dengan kode warna HTML.
Nantinya, browser akan memproses dan menampilkan hasil sesuai
permintaan warna.
14. Text Size
Selain mengubah warna teks, bisa juga lho mengatur ukuran tulisan.
Caranya juga mudah, ikuti saja contoh HTML di bawah.
<p style=”font-size:48px;”>text</p>
<p style=”font-size:20px;”>text</p>
Hasilnya akan terlihat seperti ini.
15. Text Alignment
Ingin mengubah posisi teks? Caranya gampang kok! Masukkan saja

property style seperti ini:
<p style=”text-align:right;”>Geser teks ke kanan</p>

<p style=”text=align:left;”>Geser teks ke kiri</p>
Lihat hasilnya. Teks langsung bergeser sesuai perintah. Tapi, kalau yang
Anda masukkan adalah “text-align: center”, jangan kaget kalau teks
tidak berpindah. Lho, kenapa begitu?
Saat ini, HTML5 tidak support “text-align: center”. Sehingga, Anda

harus menggunakan CSS property style jika ingin memindah posisi teks
ke tengah.
<html>
<head>
<style>
p {text-align: center;}
</style>
</head>
<body>
<p>Text</p>
</body>
</html>
16. Anchor Text
Anchor text adalah kata yang bisa diklik sehingga visitor bisa membuka
halaman web tertentu.
Kenapa kata-kata tersebut bisa di-klik? Tentunya, karena ada link

tersemat di dalamnya. Dengan anchor text, visitor web bisa menemukan
info lain yang masih relevan. Selain itu, Google jadi lebih terbantu
dalam memahami konteks web.
Berikut contoh html anchor text.
<a href=”link”>text</a>
Nantinya, teks pilihan Anda akan memiliki warna berbeda sekaligus bisa
di-klik.
17. CTA Button
Tak cuma menyematkan link ke dalam teks, coding HTML

memungkinkan Anda membuat CTA (Call-to Action) Button. CTA
Button adalah tombol dengan link yang mengarahkan visitor website
menuju konversi.
Gimana sih cara membuat CTA Button dengan coding HTML? Berikut
contoh HTML-nya.
<div class="button-wrapper">
<a class="button cta-button" href="link">text</a>
</div>
Beda dari tag lainnya, Anda melihat tag <div> pada syntax di atas. Yap,
tag <div> berfungsi membungkus elemen ke dalam satu grup/class.
Tag <div> memudahkan Anda saat mendesain dengan CSS. Sebab, CSS
akan diterapkan pada kelompok yang diinginkan saja. Dalam hal ini,
class button-wrapper.
Lho, maksudnya gimana?
Begini, syntax CTA Button tadi hanya menghasilkan output yang lebih
mirip seperti anchor text daripada sebuah tombol.
Alasannya, contoh coding HTML itu hanya untuk membangun kerangka

CTA Button saja. Agar ada desainnya, perlu mendesain tombol CTA
menggunakan CSS untuk class button-wrapper.
Penting!
Sisipkan syntax <link href=”style.css” rel=”stylesheet”> pada coding HTML

supaya file CSS terhubung dan desain bisa ditampilkan.
.button-wrapper {
display: block;
text-align: center;
}
.button {
border: none;
border-radius: 3em;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
display: inline-block;
font-size: 1em;
padding: 1em 2em;
width: auto;
}
.cta-button {
background-color: #000;
color: #fff !important;
}
.cta-button:hover {
background-color: #777;
Source Code: drivencreativelymad.com
Oh ya, jangan lupa juga terapkan tips membuat CTA agar tombol
konversi Anda makin oke dan efektif ya!
18. Ordered List
Seperti namanya, Ordered List berfungsi membuat poin secara urut. Bisa
berupa numbering, alfabet, ataupun romawi.
Cara membuatnya, pakailah coding HTML tag <ol>. Berikut contoh

HTML Ordered List.
<ol>
<li> Point 1 </li>
<li> Point 2 </li>
</ol>
Sekarang, mungkin Anda penasaran: kok di sana ada tag <li>?
Nah, tag <ol> memang biasanya diikuti tag <li>. Tag <ol> berfungsi
menentukan kelompok info yang mau diurutkan, sedangkan tag
<li> untuk membuat list-nya. Tanpa tag <ol>, daftar list secara otomatis
menjadi bullet points (Unordered List).
Lalu, bagaimana jika Anda ingin Ordered List Anda menggunakan

alfabet ataupun angka romawi?
Simple saja. Anda cukup memasukkan atribut type:
Type Fungsi
type=”1″ Item angka
type=”A” Item huruf besar
type=”a” Item huruf kecil
type=”I” Item romawi besar
type=”i” Item romawi kecil
Lho, memasukkan atributnya di mana? Mudah saja, silakan bubuhkan di

sebelah tag <ol>. Sudah nggak bingung lagi, kan?
<ol type="A">
<li> Point 1 </li>
<li> Point 2 </li>
</ol>
19. Unordered List
Kebalikan dari Ordered List, Unordered List memungkinkan Anda

membuat daftar item tanpa peduli urutannya. Biasanya menggunakan
icon seperti bullet, persegi, dll.
Untuk membuatnya, Anda bisa menggunakan contoh HTML berikut.

<ul>
<li> Point 1 </li>
<li> Point 2 </li>
</ul>
Dengan contoh coding HTML di atas, output-nya adalah list item

dengan bullet points. Lalu, bagaimana jika Anda ingin ganti icon?
Mirip seperti cara pada Ordered List, Anda bisa menggunakan property
list-style-type berikut.
Value Fungsi
disc List item berupa bullet hitam
circle List item berupa bullet putih
square List item berupa kotak
none List item tidak terlihat
Cara menyelipkan property list-style-type juga mudah, kok. Hanya

begini saja:
<ul style="list-style-type:square;">
<li> Point 1 </li>
<li> Point 2 </li>
</ul>
Sekarang, icon list item Anda pasti sudah berubah sesuai keinginan
Anda.
20. Superscript
Pernahkah Anda menemukan huruf kecil melayang di atas tulisan

normal seperti DC ComicsTM? Atau angka pangkat seperti 42?
Tipografi ini disebut juga sebagai superscript. Kami yakin, superscipt

sudah cukup familiar bagi Anda. Biasanya, ini digunakan sebagai angka
pangkat hingga logo trademark.
Pertanyaannya, gimana sih cara membuat superscript?
Nah, caranya gampang, kok. Bikin saja dengan coding HTML <sup>.
Tanpa waktu lama, Anda sudah berhasil membuat superscript.
text<sup>TM</sup>
21. Subscript
Lawan dari superscript adalah subscript. Biasanya, Anda menjumpai

subscript sebagai huruf/angka kecil di bagian bawah tulisan normal.
Senyawa kimia, misalnya.
Penasaran contoh coding HTML Subscript? Lihat saja syntax ini.
Text <sub> tags </sub>
Sekarang, Anda pun bisa menulis senyawa kimia dengan coding HTML.
22. Tabel
Contoh HTML berikutnya, tabel. Seumumnya membuat tabel, Anda

harus membuat baris dan kolom.
Sebagai langkah awal, silakan buat tabel dengan contoh coding HTML
berikut.
<table border="1">
<tr>
<td>Baris 1 Kolom 1</td>
</tr>
<tr>
</tr>
</table>
Namun, contoh HTML di atas hanya memberikan Anda sebuah tabel

sederhana saja. Kurang menarik, bukan?
Nah, kalau Anda ingin tabel yang lebih keren dan fungsional, silakan
ikuti Cara Membuat Tabel HTML ini. Dijamin, tabel Anda jadi jauh lebih
kece!
23. Form
Apakah membuat form dengan coding HTML susah?
Jawabannya, tidak juga. Dengan tag <form>, bisa kok langsung membuat
form dengan HTML. Seperti contoh coding HTML di bawah.
<form>
<label>Username</label><br>
<input type="text"><br>
<label>Password</label><br>
<input type="password"><br>
</form>
Lalu, jadilah tampilan form yang seperti ini. Sekarang Anda memiliki
kolom username dan password standar untuk form.
Meski begitu, form tersebut masih bisa dipercantik sehingga visitor

website Anda akan menyukainya. Gimana sih caranya? Nah, langsung
saja meluncur ke Panduan Membuat Form Login yang ramah pemula ini.
Nah, sampai sini Anda sudah memahami coding HTML dasar untuk
pemula. Artinya, Anda sudah siap mempelajari contoh desain web
HTML yang menggabungkan berbagai tag HTML.
Berikut beberapa contoh desain web HTML sederhana dari Doctor

Code untuk Anda coba.
24. Contoh Desain Web HTML Landing Page Responsive
Coding HTML:
1<!DOCTYPE HTML>
2<html>
3 <head>
4 <link rel="stylesheet" href="style.css">
5 <meta name="viewport" content="width=device-width , initial-scale=1.0">
6 </head>
7
8
9 <body>
10
11 <div class="filter">
12 </div>
13 <div class="nav">
14 <div class="container">
15 <h1>Logo</h1>
16
17 </div>
18
19 </div>
20 <div class="description">
21 <h1>Welcome to our website</h1>
22 <p>discover our amazing website with our amazing services and contac
23 </div>
24 </body>
25</html>
CSS Markup:
1@import url('shorturl.at/btNO5');
2*{
3 margin: 0;
4 padding: 0;
5 outline: 0;
6}
7body{
8 width: 100vw;
9 height: 100vh;
10 background-image: url(shorturl.at/dkFT0);
11 background-size: cover;
12 background-position: center;
13 background-repeat: no-repeat;
14}
15.nav{
16 width: 100%;
17 height: 80px;
18 position: relative;
19 z-index: 9;
20}
21.container{
22 width: 80%;
23 position: absolute;
24 left: 50%;
25 transform: translateX(-50%);
26 height: 100%;
27}
28
29.nav h1{
30 color: #fafafa;
32 top: 50%;
33 transform: translateY(-50%);
34 font-family: "Marck Script",cursive;
35 font-size: 38px;
36}
37
38
39.filter{
41 left: 0;
42 right: 0;
43 top:0;
44 bottom: 0;
45 background-color: rgba(0,0,0,.5);
46}
47
48.description{
49
51 left: 50%;
52 top: 50%;
53 z-index: 2;
54 transform: translate(-50%,-50%);
55 text-align: center;
56 color: #fafafa;
57}
58.description h1{
59 font-size: 60px;
60 text-transform: uppercase;
61 font-family: 'Oleo Script', cursive;
62}
63.description p{
64 font-size: 40px;
65 font-family: 'Oleo Script', cursive;
66}
67@media screen and (max-width:700px){
68 .container{
69 width: 100%;
70 }
71
72 .nav h1{
73
74 left: 50%;
75 transform: translateX(-50%);
76 }
77
78 .description{
79 z-index: 0;
80
81 }
82 .description h1{
83 font-size: 1.8rem;
84 }
85 .description p{
86 font-size: .9rem;
87 }
88}
Output:

25+ Contoh Coding HTML Untuk Pemula

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

25+ Contoh Coding HTML Untuk Pemula

Diunggah oleh

Hak Cipta:

Format Tersedia

25+ Contoh Coding HTML untuk Pemula

Agar tidak bingung, sebaiknya Anda mengenal dulu beberapa istilah

• Tag: awalan instruksi atau perintah yang akan dibaca browser.

Segala template HTML di dunia memiliki bentuk dasar, yaitu HTML

Pertama, dokumen HTML adalah harus diawali dengan <!DOCTYPE

Heading adalah judul hingga sub-judul yang ada di dalam website.

Selain memudahkan visitor menangkap inti informasi, heading juga

Alasannya, Google jadi lebih paham struktur dan konteks artikel,

Berikut contoh HTML untuk berbagai macam heading.

<h1> Heading 1 <h1>

Nah, contoh HTML berikutnya yaitu membuat paragraf.

Paragraf itu penting. Sekarang, bayangkan Anda membaca artikel

Contoh coding HTML berikutnya, ada bold/strong.

Tulisan dengan efek bold (atas) dan strong (bawah)

<b>Afiliasi adalah kerja sama promosi dan penjualan produk</b>

Dan meskipun outputnya terlihat sama, Google memandangnya lain.

Coding HTML bold sekadar memberi efek tebal, sedangkan tag

Berikut contoh HTML dengan tag italic/emphasize.

<i>Bug adalah istilah bahasa Inggris yang artinya serangga.<i>

Lalu, manakah yang sebaiknya Anda pakai?

Kembali lagi ke kebutuhan Anda. Jika hanya ingin memiringkan kata-

Seperti namanya, Line Break berfungsi membuat baris baru. Namun,

Hasilnya akan terlihat seperti ini.

Beda dari contoh HTML-lainnya, coding HTML <br> memang tidak

Selain membosankan, info dalam website jadi kurang jelas. Faktanya,

Nah untuk memasukkan gambar, gunakan coding HTML images.

<img src=”url atau lokasi penyimpanan gambar” alt=”text” style=”width:500px;height:333px;”>

Berikut hasil contoh HTML images.

Alt text adalah kata yang diselipkan ke dalam gambar. Fungsinya

Contoh HTML selanjutnya, horizontal line.

Sederhana saja, coding HTML ini memungkinkan Anda membuat garis

<p> text </p>

Cross-through text atau teks yang dicoret mampu menekankan makna

Biasanya, para penulis menggunakan strategi ini untuk menunjukkan

Membuat cross-through text mudah, kok. Langsung saja gunakan

Sekarang, Anda sudah bisa mencoret tulisan sendiri bukan?

Banyak orang, termasuk Anda, menyukai quote. Selain indah, quote

Blockquote adalah quote panjang yang terpisah dari teks utama.

Di bawah ini contoh HTML yang bisa Anda gunakan.

Dari contoh-contoh HTML sebelumnya, mungkin Anda bosan karena

Contoh coding HTML di atas kira-kira menghasilkan output seperti ini.

Oh ya, penting Anda tahu, setiap browser menyediakan jenis font

Pernahkah Anda menstabilo catatan penting di buku yang sedang Anda

<p> text <mark> catatan penting </mark> text </p>

Secara otomatis, highlight text Anda akan berwarna kuning.

Caranya, gunakan property style seperti contoh HTML berikut.

<p style=”color:#ff471a;”>The flower is red </p>

14. Text Size

Hasilnya akan terlihat seperti ini.

15. Text Alignment

Ingin mengubah posisi teks? Caranya gampang kok! Masukkan saja

<p style=”text-align:right;”>Geser teks ke kanan</p>

Saat ini, HTML5 tidak support “text-align: center”. Sehingga, Anda

Kenapa kata-kata tersebut bisa di-klik? Tentunya, karena ada link

Berikut contoh html anchor text.

17. CTA Button

Tak cuma menyematkan link ke dalam teks, coding HTML

Lho, maksudnya gimana?

Alasannya, contoh coding HTML itu hanya untuk membangun kerangka

Sisipkan syntax <link href=”style.css” rel=”stylesheet”> pada coding HTML

18. Ordered List

Cara membuatnya, pakailah coding HTML tag <ol>. Berikut contoh

Sekarang, mungkin Anda penasaran: kok di sana ada tag <li>?

Lalu, bagaimana jika Anda ingin Ordered List Anda menggunakan