Coding Sederhana HTML

25+ Contoh Coding HTML untuk Pemula
Tahukah Anda halaman website yang Anda kunjungi saat ini adalah salah satu contoh HTML?
Faktanya, 92.3% website di dunia ini dibuat menggunakan HTML, lho.
HTML (Hyper Text Markup Language) adalah bahasa markup untuk membuat halaman web.
Bahasa markup yaitu bahasa komputer untuk memformat teks dan berbagai media di dalamnya.
Biasanya, HTML didukung dengan bahasa lainnya. Seperti CSS, JS, ataupun bahasa
pemrograman lain yang lebih rumit.
Kenapa sih Anda harus belajar coding HTML? Berikut beberapa manfaatnya.
HTML memungkinkan Anda mampu membuat website, membangun template, dan berbagai
karya lain yang banyak orang bersedia beli.
Bagaimana? Menarik kan mempelajari apa itu coding HTML? Kabar gembiranya, di artikel ini
Anda akan mendapatkan segudang info tentang contoh HTML yang ramah pemula, lho. Sudah
tidak sabar kan? Yuk langsung saja simak daftarnya!
Daftar isi tutup
1 25+ Contoh Coding HTML untuk Pemula
1.1 1. HTML Basic
1.2 2. Heading
1.3 3. Paragraf
1.4 4. Bold/Strong
1.5 5. Italic/Emphasize
1.6 6. Line Break
1.7 7. Images
1.8 8. Horizontal line
1.9 9. Cross-through text
1.10 10. Quote
1.11 11. Font
1.12 12. Highlighted
1.13 13. Text Colour
1.14 14. Text Size
1.15 15. Text Alignment
1.16 16. Anchor Text
1.17 17. CTA Button
1.18 18. Ordered List
1.19 19. Unordered List
1.20 20. Superscript
1.21 21. Subscript
1.22 22. Tabel
1.23 23. Form
1.24 24. Contoh Desain Web HTML Landing Page Responsive
1.25 25. Contoh Desain Web HTML Website Travel
1.26 26. Contoh Desain Web HTML Kartu Ucapan
2 Coding HTML Nggak Mau Jalan? Kenapa ya?
2.1 1. File HTML dan CSS Belum Terhubung
2.2 2. Link Source Tidak Valid
2.3 3. Ada Kesalahan pada Coding HTML
2.4 4. Halaman Web Belum Di-Online’kan
3 Sudah Paham Coding HTML Pemula? Cus Buat Website Sendiri!
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 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-
6scale=1.0">
7 </head>

8 <body>
9
10 <div class="filter">
11 </div>
12 <div class="nav">
13 <div class="container">
14 <h1>Logo</h1>
15
16 </div>
17
18 </div>
19 <div class="description">
20 <h1>Welcome to our website</h1>
21 <p>discover our amazing website with our amazing services and
22contact us </p>
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%;
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:
Landing Page versi desktop

Landing Page versi mobile
25. Contoh Desain Web HTML Website Travel
Coding HTML:
1<!DOCTYPE HTML>
2<html>
3 <head>
5 </head>
6
7 <body>
8 <div class="nav">
9 <div class="container">
10 <img src="shorturl.at/clsI1" class="logo">
11 <ul>
12 <li><a href="#">Home</a></li>
13 <li><a href="#">services</a></li>
14 <li><a href="#">about us </a></li>
15 <li><a href="#">Blog</a></li>
16 </ul>
17 </div>
18 </div>
19
20 <div class="header">
21 <div class="search">
22 <input type="text" placeholder="search your destination">
23 <button>Search</button>
24</div>
25 </div>
26
27 <div class="footer">
28 <p>copyright © All rights reserved to DoctorCode</p>
29 </div>
30 </body>
31 <script src="tab.js"></script>
32</html>
CSS Markup:
1*{
2 margin: 0;
3 padding: 0;
4 outline: 0;
5}
6.container{
7 width: 80%;
9 left: 50%;
11 overflow: auto;
12}
13.contact-nav{
14 background-color: #424242;
15 padding: 5px 10px;
16 color: #fafafa;
17}
18
19.nav img{
20 height: 100px;
21}
22.nav ul{
23 float: right;
24 padding-top: 45px;
25}
26.nav ul li{
27 display: inline-block;
28 margin-right: 15px;
29}
30.nav ul li a{
32 text-transform: uppercase;
33 text-decoration: none;
34 color: #212121;
35 transition: .4;
36}
37.nav ul li a:hover{
38 color: #3e7a7e;
39}
40
41.header{
43 width: 100%;
44 height: 600px;
45 background-image: url("shorturl.at/inqZ6");
48}
49.header .search{
51 left: 50%;
52 top: 50%;
54 background-color: #fff;
55
56 border-radius: 4px;
57}
58.header .search input{
60 border: none;
61 width: 500px;
63}
64.header .search button{
66 border: none;
67 width: 100px;
68 border-radius: 0 4px 4px 0;
69 background-color: #8ed1d5;
70 color: #fafafa;
72 transition: .4s;
73}
74.header .search button:hover{
75 background-color: #3e7a7e;
76}
77
78.footer{
79 padding: 15px;
80 background-color: #3e7a7e;
81}
82.footer p{
84
85}
Output:
26. Contoh Desain Web HTML Kartu Ucapan
Coding HTML
1<!DOCTYPE HTML>
2<html>
3 <head>
5 </head>
6
7
8 <body>
9 <div class="filter">
10 </div>
11 <h1>Send a message for the bride and the groom</h1>
12 <div class="valentine_card">
13 <form>
14 <label>TO :</label><br><input type="text"><br>
15 <label>Message :</label><br>
16 <textarea></textarea><br>
17 <button>SEND</button>
18
19 </form>
20 </div>
21
22 </body>
23</html>
CSS Markup:
1@import url('shorturl.at/qrKYZ');
2body{
3 padding: 0;
4 margin: 0;
5 outline: 0;
6 height: 100vh;
7 background: url(shorturl.at/nqGV0);
10 background-repeat: no-repeat;
11}
12.filter{
14 top: 0;
15 left: 0;
16 bottom: 0;
17 right: 0;
18 background-color:
19 opacity: .6;
20 z-index: 1;
21}
22h1{
24 width: 100%;
25 z-index: 2;
26 font-size: 4em;
28 color: #fff;
29 font-family: 'Courgette', cursive;
30}
31.valentine_card{
33 z-index: 2;
34 left: 50%;
35 top: 50%;
37 background: #fff;
38 width: 40%;
39 padding: 25px;
41}
42.valentine_card label{
44}
45.valentine_card input{
46 width: 100%;
47 font-size:1.3rem;
49 border: none;
50 border-bottom: 1px solid black;
51 margin: 10px 0;
52}
53*:focus{
54 outline: none;
55}
56.valentine_card textarea{
57 width: 100%;
58 height: 150px;
59 resize: none;
60 font-size:1.3rem;
62 border: none;
63 border-bottom: 1px solid black;
64 margin: 10px 0;
65}
66.valentine_card button{
67 border: none;
68 background: transparent ;
70 float: right;
72 transition: .4s;
73
74}
75.valentine_card button:hover{
76 color: #f44336;
77}
Output:
Coding HTML Nggak Mau Jalan? Kenapa ya?

Ada berbagai penyebab browser tidak bisa merespon coding HTML, yaitu:
1. File HTML dan CSS Belum Terhubung
Anda membangun halaman web dengan HTML dan menata style-nya menggunakan CSS, tapi
desain tidak mau tampil?
Bisa jadi, Anda belum menyambungkan file HTML dengan file CSS. Nah, cara
menghubungkannya adalah dengan menyematkan tag berikut dalam file HTML
<link href=”style.css” rel=”stylesheet” />
Style.css di sana adalah nama file CSS Anda. Oh ya, jangan lupa juga pastikan file HTML dan
CSS berada dalam satu folder yang sama.
2. Link Source Tidak Valid
Ada kalanya Anda bingung karena browser tidak menampilkan gambar atau media apapun.
Padahal, Anda sudah menggunakan tag HTML yang tepat.
Eits, jangan panik dulu. Coba cek URL yang Anda gunakan. Apakah link-nya sudah valid? Bisa
diakses?
Kalau tidak, itu artinya Anda harus menggantinya dengan alternatif link yang lain.
3. Ada Kesalahan pada Coding HTML
Penyebab HTML tidak mau jalan berikutnya, yaitu ada kesalahan pada codingnya. Cek kembali
apakah Anda sudah menulis semua tag dengan benar.
Proses checking ini mungkin memang menyita waktu. Namun, Anda bisa meminimalisirnya
dengan menggunakan Editor HTML terbaik.
Adanya fitur seperti highlight syntax, auto-complete, hingga find-and-replace tentunya akan
meringankan pekerjaan Anda. Sebab, editor HTML terbaik mampu menunjukkan syntax yang
error.
Oh ya, setelah memodifikasi code, jangan lupa refresh browser terlebih dahulu untuk melihat
hasil perubahannya ya. Hehe..
4. Halaman Web Belum Di-Online’kan
Sudah bikin coding HTML susah-susah, tapi kok halaman web nggak bisa ditemukan orang lain
di internet?
Jelas saja, kemungkinan besar itu gara-gara Anda belum mengonlinekan project tersebut.
Sehingga, halaman web hanya mau tampil di komputer pribadi Anda saja.
Cara mengatasinya, upload website ke hosting. Namun, pastikan pilih hosting terbaik dan
menjamin hal-hal berikut:
 Loading website cepat;

 Uptime website lebih dari 99%;
 Fitur pengelolaan website sesuai kebutuhan;
 Keamanan ketat;
 Dukungan customer support 24 jam.
Lho, kok banyak ya kriterianya? Nah jangan khawatir, sekarang Anda bisa sewa hosting terbaik
dan termurah di Niagahoster.
Sudah Paham Coding HTML Pemula? Cus Buat Website

Sendiri!
Sekarang, Anda sudah jauh memahami contoh HTML dan melihat berbagai contoh desain web
HTML keren. Ternyata, belajar HTML tidak sesulit itu, bukan?
Untuk menyegarkan ingatan Anda, kami sudah merangkum beberapa contoh coding HTML di
atas.
Fungsinya untuk
Tag HTML
Membuat…
<h1> Heading 1 <h1> Heading
<p> paragraf </p> Paragraf
<b> bold </b><strong> strong </strong> Bold/strong
<i> italic </i><em> emphasize <em> Italic/emphasize
<br> Line break
<img src=”url gambar” alt=”text” style=”width:…px;height:…px;”> Images
<hr> Horizontal Line

<del>text</del> Cross-through text
<blockquote>text</blockquote><q>text</q> Quote
<p style=”font-family:…;”>text</p> Font
<mark> highlighted text </mark> Highlighted
<p style=”color:…;”>text</p> Text Colour
<p style=”font-size:..px;”>text</p> Text Size
<p style=”text-align:right/left;”>text</p> Text Alignment
<a href=”link”>text</a> Anchor Text
<button type=”button”>Click Me!</button> CTA Button
<ol type=”…”><li> Point 1 </li><li> Point 2 </li></ol> Ordered List
<ul style=”list-style-type:…;”><li> Point 1 </li><li> Point 2 </li></ul> Unordered List
text<sup>TM</sup> Superscript
Text <sub> tags </sub> Subscript
<table> </table><tr></tr><td></td> Tabel
<form></form> Form
Meski sudah paham coding HTML, kurang oke rasanya kalau belum praktik. Karena itu,
cus buat website versi Anda sendiri!

Coding Sederhana HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Coding Sederhana HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

25+ Contoh Coding HTML untuk Pemula

Faktanya, 92.3% website di dunia ini dibuat menggunakan HTML, lho.

Berikut contoh HTML untuk berbagai macam heading.

<h1> Heading 1 <h1>

Nah, contoh HTML berikutnya yaitu membuat paragraf.

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 strong memiliki pengaruh

Berikut contoh HTML dengan tag italic/emphasize.

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

Lalu, manakah yang sebaiknya Anda pakai?

Hasilnya akan terlihat seperti ini.

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

Berikut hasil contoh HTML images.

Contoh HTML selanjutnya, horizontal line.

<p> text </p>

Sekarang, Anda sudah bisa mencoret tulisan sendiri bukan?

Nah, Anda bisa membuat dua jenis quote: blockquote atau short quote.

Di bawah ini contoh HTML yang bisa Anda gunakan.

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

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

Secara otomatis, highlight text Anda akan berwarna kuning.

Caranya, gunakan property style seperti contoh HTML berikut.

14. Text Size

Hasilnya akan terlihat seperti ini.

15. Text Alignment

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

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

Berikut contoh html anchor text.

17. CTA Button

Lho, maksudnya gimana?

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

Source Code: drivencreativelymad.com

18. Ordered List

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

Simple saja. Anda cukup memasukkan atribut type:

type=”1″ Item angka

type=”A” Item huruf besar

type=”a” Item huruf kecil

type=”I” Item romawi besar

type=”i” Item romawi kecil

Untuk membuatnya, Anda bisa menggunakan contoh HTML berikut.

disc List item berupa bullet hitam

circle List item berupa bullet putih

square List item berupa kotak

none List item tidak terlihat

Pertanyaannya, gimana sih cara membuat superscript?

Penasaran contoh coding HTML Subscript? Lihat saja syntax ini.

Text <sub> tags </sub>

Apakah membuat form dengan coding HTML susah?

24. Contoh Desain Web HTML Landing Page Responsive

Landing Page versi desktop

26. Contoh Desain Web HTML Kartu Ucapan

Coding HTML Nggak Mau Jalan? Kenapa ya?

1. File HTML dan CSS Belum Terhubung

<link href=”style.css” rel=”stylesheet” />

2. Link Source Tidak Valid

3. Ada Kesalahan pada Coding HTML

 Loading website cepat;

Sudah Paham Coding HTML Pemula? Cus Buat Website

<h1> Heading 1 <h1> Heading