Cara menggunakan html code block

Sebelumnya, Codekey telah membahas tentang cara menambahkan gaya pada HTML. Kali ini Codekey akan mengajak Anda untuk menambahka elemen matematika pada HTML Anda. Apa itu elemen matematika?

Jadi, HTML berisikan beberapa elemen yang digunakan untuk mendefinisikan input user dan html code computer. Code computer inilah yang bersifat matematika sehingga disebut elemen matematika. Jika Anda tertarik untuk tahu tentang HTML Code ini, simak terus artikel berikut ini.

Apa itu Computer Code?

Cara menggunakan html code block

Biasanya, HTML menggunakan berbagai ukuran huruf, font, dan spasi. Anda dapat menyesuaikannya dengan properti CSS seperti font-size, font-family, dan sebagainya. HTML code computer ditampilkan dengan ukuran huruf tetap, font, dan spasi.

Anda mungkin ingin meniru tampilan ini saat menambahkan cuplikan kode HTML di halaman web Anda. Ada beberapa elemen HTML untuk membantu Anda mencapai tujuan ini:

  1. <code> mendefinisikan computer code atau kode komputer.
  2. <samp> mendefinisikan computer output.
  3. <kbd> mendefinisikan keyboard input.
  4. <var> mendefinisikan variable.
  5. <pre> mendefiniskan preformatted text misalnya, HTML code block.

Tag Code untuk Pemformatan Cuplikan HTML Code

Tag <code> HTML menentukan cuplikan kode HTML di situs web Anda. Teks di dalam tag <code> akan ditampilkan dalam font monospace default:

<code>
  a = 6;
  b = 9;
  c = "Ini Contoh Penggunaan tag code";
</code>

Elemen <samp> menggambarkan keluaran dari sistem atau komputer dalam dokumen HTML Anda. Font, ukuran, dan spasi tetap sama seperti elemen kode HTML lainnya:

contoh dari penggalan Output Program ->
<samp>
 a + b + c = banyakSekali
</samp>

Meskipun secara teknis elemen <kbd> juga mendefinisikan fragmen kode HTML, menurut sintaks HTML, elemen ini hanya boleh digunakan untuk menampilkan input keyboard:

tekan <kbd>Ctrl + O</kbd> pada keyboard untuk membuka dokumen

Elemen <var> mendefinisikan variabel. Ini dapat digunakan untuk mendefinisikan variabel dalam matematika atau pemrograman:

Artikel Terkait  Tutorial HTML/CSS 22 : Cara Menggunakan Elemen Inline pada HTML (Div dan Span)

<p>Rumus dari Einstein yang terkenal adalah seperti berikut:
<var>E</var> = <var>mc</var><sup>2</sup></p>

Pre-format Kode Blok HTML

Sama seperti elemen <p>, tag kode HTML mengabaikan semua spasi dan jeda baris. Jika Anda perlu menyampaikan struktur blok kode HTML dengan lekukan, Anda harus meletakkan elemen <code> di dalam elemen <pre>:

<pre>
  <code>
    variabel :
     a
     b
     c
 
    aku bisa menulis kode apapun yang saya suka
    dan tag "pre" akan tetap seperti itu
  </code>
</pre>

Demikianlah penjelasan tentang elemen matematika yang ada di HTML. Jika yang perlu Anda pertahankan hanyalah jeda baris, Anda juga dapat menggunakan tag
untuk menyisipkan alih-alih memformat seluruh blok kode HTML. Anda dapat menyorot sintaks di cuplikan kode HTML Anda dengan menggunakan pustaka JavaScript, seperti Highlight.js atau Prism.js.

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.

Cara menggunakan html code block

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

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.

<!DOCTYPE html>
<html>
<head>
  <title>Title of the document</title>
</head>
<body>
  <h1>Heading</h1>
  <p>Paragraf.</p>
</body>
</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.

Cara menggunakan html code block

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?

Cara menggunakan html code block

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.

Cara menggunakan html code block

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?

Cara menggunakan html code block

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?

Cara menggunakan html code block
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.

Cara menggunakan html code block

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.

Cara menggunakan html code block

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 , 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.

Cara menggunakan html code block

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.

Cara menggunakan html code block

8. Horizontal line

Contoh HTML selanjutnya, horizontal line.

Sederhana saja, coding HTML ini memungkinkan Anda membuat garis horizontal.

Cara menggunakan html code block

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.

Cara menggunakan html code block

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.

Cara menggunakan html code block
Blockquote

Cara menggunakan html code block
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.

Cara menggunakan html code block

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.

Cara menggunakan html code block

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.

Cara menggunakan html code block

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.

Cara menggunakan html code block

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?

Cara menggunakan html code block

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.

Cara menggunakan html code block

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.

Cara menggunakan html code block

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 menggunakan html code block

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:

TypeFungsitype=”1″Item angkatype=”A”Item huruf besartype=”a”Item huruf keciltype=”I”Item romawi besartype=”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.

Cara menggunakan html code block

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.

ValueFungsidiscList item berupa bullet hitamcircleList item berupa bullet putihsquareList item berupa kotaknoneList 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.

Cara menggunakan html code block

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.

Cara menggunakan html code block

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.

Cara menggunakan html code block

Sebagai langkah awal, silakan buat tabel dengan contoh coding HTML berikut.

<table border="1">
        <tr>
            <td>Baris 1 Kolom 1</td>
            <td>Baris 1 Kolom 2</td>
        </tr>
        <tr>
            <td>Baris 2 Kolom 1</td>
            <td>Baris 2 Kolom 2</td>
        </tr>
    </table>

Namun, contoh HTML di atas hanya memberikan Anda sebuah tabel sederhana saja. Kurang menarik, bukan?

Cara menggunakan html code block

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.

mark {
  background-color: yellow;
  color: black;
}
0

Lalu, jadilah tampilan form yang seperti ini. Sekarang Anda memiliki kolom username dan password standar untuk form.

Cara menggunakan html code block

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:

mark {
  background-color: yellow;
  color: black;
}
1

CSS Markup:

mark {
  background-color: yellow;
  color: black;
}
2

Output:

Cara menggunakan html code block
Landing Page versi desktop

Cara menggunakan html code block
Landing Page versi mobile

Baca Juga: Cara Membuat Landing Page di WordPress (Mudah, Cepat, dan Efektif)

25. Contoh Desain Web HTML Website Travel

Coding HTML:

mark {
  background-color: yellow;
  color: black;
}
3

CSS Markup:

mark {
  background-color: yellow;
  color: black;
}
4

Output:

Cara menggunakan html code block

Baca Juga: Membuat Website Travel dalam 8 Cara Mudah

26. Contoh Desain Web HTML Kartu Ucapan

Coding HTML

mark {
  background-color: yellow;
  color: black;
}
5

CSS Markup:

mark {
  background-color: yellow;
  color: black;
}
6

Output:

Cara menggunakan html code block

Baca Juga: 10 Coding HTML Dasar yang Blogger Wajib Tahu

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.

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?

Cara menggunakan html code block

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.

Cara menggunakan html code block

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.

Cara menggunakan html code block

Bahkan, Anda juga akan mendapatkan domain dan SSL gratis lho kalau beli domain dan hosting di Niagahoster ! Cocok banget bagi Anda yang ingin membuat website terbaik dengan budget terjangkau, kan?

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.

Tag HTMLFungsinya untuk 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 Listtext<sup>TM</sup>SuperscriptText <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!

Selesai membuat website, terus kelola dan optimasi web sehingga performanya terus meroket, ya. Tenang, kami akan memandu Anda, kok. Simak saja tutorialnya melalui e-book berikut.

Cara menggunakan html code block

Share

Benefita Follow Benefita is a Pisces girl. She dreams of living in the world of Harvest Moon.

Subscribe Sekarang

Dapatkan beragam artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Subscribe sekarang dan raih kesuksesan bersama kami!

Bagaimana cara menggunakan HTML?

Cara Membuat Halaman Web Sederhana dengan HTML.
Buka editor teks. ... .
Atur jenis dokumen untuk HTML. ... .
Tambahkan tab judul untuk halaman web kamu. ... .
Ketik di bawah tag "Head" yang tertutup. ... .
Selanjutnya membuat judul halaman. ... .
Tambahkan judul tambahan jika kamu mau. ... .
Membuat paragraf. ... .
Mengubah warna teks..

Kode HTML apa saja?

Berikut adalah 9 kode HTML untuk blog dan arti coding tersebut:.
Title Tag. Tag HTML yang pertama yaitu title tag. ... .
Meta Description. Berikutnya, ada meta description. ... .
3. Heading Tag. ... .
4. Anchor Text dan Link. ... .
Nofollow. ... .
6. Image Alt Text. ... .
7. Tag Kanonikal. ... .
9. Tag Huruf Tebal (Bold).

HTML dimulai dengan kode apa?

Penjelasan: Kode diatas dimulai dengan tag html, didalamnya terdapat tag body. Di dalam tag body terdapat tag p untuk membuat paragraf. Agar lebih jelas berikut ini contoh penulisan elemen bersarang yang salah.

Jenis editor apa yang digunakan untuk mengedit kode HTML?

19 HTML Editor Terbaik yang Layak Anda Coba.
Notepad++ Notepad++ dibuat untuk sistem operasi Windows. Boleh dikatakan kehadiran Notepad++ ini untuk melengkapi kekurangan dari teks editor bawaan Windows, Notepad. ... .
2. Atom. ... .
3. Brackets. ... .
4. Sublime Text. ... .
Light Table. ... .
6. Bluefish. ... .
7. Aptana Studio. ... .
8. CoffeeCup..