Kini cukup banyak
toko online bermunculan, tak kecuali toko online yang khusus menjual berbagai jenis sepatu. Penjualan sepatu memang cukup laris di pasaran karena sepatu merupakan peralatan yang sangat penting untuk menunjang aktivitas, seperti: bekerja, olahraga, jalan-jalan dan lain sebagainya. Namun tidak semua pebisnis dapat membuat website toko online untuk menjual sepatu karena mereka kesulitan membuatnya. Terkadang pebisnis meminta bantuan orang lain untuk membuat website penjualan sepatu. Terinspirasi
dari hal tersebut, Kami mencoba membuat desain website toko sepatu menggunakan bahasa HTML dan CSS. Semoga dapat membantu Anda yang ingin membuat desain website toko sepatu.
1. Langkah pertama adalah pembuatan script HTML Jalankan Notepad++ untuk membuat script HTML. Mulailah membuat script HTML, seperti: body, wrapper, header, nav, main, form, footer dan lain sebagainya. Berikut ini contoh script HTML
yang telah selesai dibuat:
2. Desain website dengan membuat script CSS Anda dapat membuat form baru menggunakan Notepad++ dan simpan dengan type file CSS. Script CSS digunakan sebagai style website yang dibuat, seperti: desain huruf, warna background, jenis tulisan, tampilan website dan lain sebagainya. Berikut ini contoh script CSS yang telah selesai dibuat:
3.
Hubungkan HTML ke CSS Bila Anda telah membuat script HTML dan script CSS, selanjutnya Anda dapat menghubungkan antara keduanya. Anda disarankan menyimpan kedua file dalam satu folder sehingga kedua file dapat dihubungkan. Untuk menghubungkan kedua file tersebut, Anda dapat membuat link pada file HTML seperti berikut ini:
Download file desain secara lengkap di sini:
Download. Lihat juga video di bawah ini untuk memberikan tambahan informasi cara penggunaan website.
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!
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 .
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.
Title of the document
Heading
Paragraf.
Pertama, dokumen HTML harus diawali dengan . Fungsinya sebagai deklarasi sehingga browser tahu dokumen ditulis dalam HTML.
Berikutnya, ada tag . Tag ini akan menampung seluruh tag HTML dari awal hingga penutupan, yaitu .
Setelah , masuk ke tag .
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 . Coding HTML ini memuat inti dokumen HTML Anda, yaitu isian website.
Di akhir, jangan lupa tutup dokumen HTML dengan tag penutup yang sesuai (, , 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.
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.
text
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 produkb> <strong>Afiliasi adalah kerja sama promosi dan penjualan produkstrong>
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.
Bug adalah istilah bahasa Inggris yang artinya serangga. Bug adalah istilah bahasa Inggris yang artinya serangga.
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 .
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
lebih berisiko error pada beberapa browser. Sedangkan tag digadang-gadang akan lebih di-support oleh
HTML5 daripada tag
.
Beda dari contoh HTML-lainnya, coding HTML memang tidak memiliki tag penutup . Jadi, Anda cukup menggunakan 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.
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
pada
bagian yang Anda inginkan.
<p> text p> <hr> <p> text p>
Penting!
Beda dari tag lainnya, tag ,
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.
The flower is red
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.
Ingin mengubah posisi teks? Caranya gampang kok! Masukkan saja property style seperti ini:
Geser teks ke kanan
Geser teks ke kiri
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.
p {text-align: center;}
Text
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.
<ahref=”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.
berfungsi membungkus elemen ke dalam satu grup/class.
Tag
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 pada coding HTML supaya file CSS terhubung dan desain bisa ditampilkan.
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
. Berikut contoh HTML Ordered List.
Point 1
Point 2
Sekarang, mungkin Anda penasaran: kok di sana ada tag
?
Nah, tag
memang biasanya diikuti tag
. Tag berfungsi menentukan kelompok info yang mau diurutkan, sedangkan tag untuk membuat list-nya. Tanpa tag , 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
. Sudah nggak bingung lagi, kan?
Point 1
Point 2
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.
Point 1
Point 2
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:
Point 1
Point 2
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 . Tanpa waktu lama, Anda sudah berhasil membuat superscript.
text<sup>TMsup>
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.
Baris 1 Kolom 1
Baris 1 Kolom 2
Baris 2 Kolom 1
Baris 2 Kolom 2
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!