Cara menggunakan contoh coding html bucin.

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

<p style=”font-size:48px;”>textp>
<p style=”font-size:20px;”>textp>

Hasilnya akan terlihat seperti ini.

15. Text Alignment

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.

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.

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

  text

Beda dari tag lainnya, Anda melihat tag

pada syntax di atas. Yap, tag

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.

.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

. Berikut contoh HTML Ordered List.

  
 Point 1 
  
 Point 2 

Sekarang, mungkin Anda penasaran: kok di sana ada tag

1. ?

   Nah, tag

   memang biasanya diikuti tag
   1. . Tag
      berfungsi menentukan kelompok info yang mau diurutkan, sedangkan tag
      1. 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 _tags

         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!

         23. Form

         Apakah membuat form dengan coding HTML susah?

         Jawabannya, tidak juga. Dengan tag

         , bisa kok langsung membuat form dengan HTML. Seperti contoh coding HTML di bawah.

         
             Username
         
             
         
             Password
         
             
         
         

         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:

         
         
             
                 
                 
             
            
            
             
                
                 
         
                 
                 
         
                       
         
                           
         Logo
                      
                       
                        
                 
               
                 
         
                     
         Welcome to our website
                     
         discover our amazing website with our amazing services and contact us 
                 
             
         
         

         CSS Markup:

         @import url('shorturl.at/btNO5');
         *{
             margin: 0;
             padding: 0;
             outline: 0;
         }
         body{
             width: 100vw;
             height: 100vh;
             background-image: url(shorturl.at/dkFT0);
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
         }
         .nav{
             width: 100%;
             height: 80px;
             position: relative;
             z-index: 9;
         }
         .container{
             width: 80%;
             position: absolute;
             left: 50%;
             transform: translateX(-50%);
             height: 100%;
         }
         
         .nav h2{
             color: #fafafa;
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
             font-family: "Marck Script",cursive;
             font-size: 38px;
         }
         
         
         .filter{
             position: absolute;
             left: 0;
             right: 0;
             top:0;
             bottom: 0;
             background-color: rgba(0,0,0,.5);
         }
         
         .description{
            
             position: absolute;
             left: 50%;
             top: 50%;
             z-index: 2;
             transform: translate(-50%,-50%);
             text-align: center;
             color: #fafafa;
         }
         .description h2{
             font-size: 60px;
             text-transform: uppercase;
             font-family: 'Oleo Script', cursive;
         }
         .description p{
             font-size: 40px;
             font-family: 'Oleo Script', cursive;
         }
         @media screen and (max-width:700px){
             .container{
                 width: 100%;
             }
            
             .nav h2{
                
                 left: 50%;
                 transform: translateX(-50%);
             }
            
             .description{
                 z-index: 0;
                
             }
             .description h2{
                 font-size: 1.8rem;
             }
             .description p{
                 font-size: .9rem;
             }
         }
         

         Output:

         Landing Page versi desktop
         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:

         
         
                 
                     
                 
         
                 
                       
         
                         
         
                             
                             
         
                                 
         Home
                                 
         services
                                 
         about us 
                                 
         Blog
                             
                         
                     
            
                     
         
                         
         
                             
                             Search
         
                     
           
                    
                     
         
                         
         copyright © All rights reserved to DoctorCode
                     
                 
             
         
         

         CSS Markup:

         *{
             margin: 0;
             padding: 0;
             outline: 0;
         }
         .container{
             width: 80%;
             position: relative;
             left: 50%;
             transform: translateX(-50%);
             overflow: auto;
         }
         .contact-nav{
             background-color: #424242;
             padding: 5px 10px;
             color: #fafafa;
         }
         
         .nav img{
             height: 100px;
         }
         .nav ul{
             float: right;
             padding-top: 45px;
         }
         .nav ul li{
             display: inline-block;
             margin-right: 15px;
         }
         .nav ul li a{
             font-size: 1.2rem;
             text-transform: uppercase;
             text-decoration: none;
             color: #212121;
             transition: .4;
         }
         .nav ul li a:hover{
             color: #3e7a7e;
         }
         
         .header{
             position: relative;
             width: 100%;
             height: 600px;
             background-image: url("shorturl.at/inqZ6");
             background-size: cover;
             background-position: center;
         }
         .header .search{
             position: absolute;
             left: 50%;
             top: 50%;
             transform: translate(-50%,-50%);
             background-color: #fff;
            
             border-radius: 4px;
         }
         .header .search input{
             padding: 15px 10px;
             border: none;
             width: 500px;
             font-size: 1.1rem;
         }
         .header .search button{
             padding: 17px 6px;
             border: none;
           width: 100px;
             border-radius: 0 4px 4px 0;
             background-color: #8ed1d5;
             color: #fafafa;
             font-size: 1.2rem;
             transition: .4s;
         }
         .header .search button:hover{
             background-color: #3e7a7e;
         }
         
         .footer{
             padding: 15px;
             background-color: #3e7a7e;
         }
         .footer p{
             text-align: center;
            
         }
         

         Output:

         Baca Juga: Membuat Website Travel dalam 8 Cara Mudah

         26. Contoh Desain Web HTML Kartu Ucapan

         Coding HTML

         
         
             
                 
             
         
            
             
                 
         
                 
                 
         Send a message for the bride and the groom
                 
         
                     
         
                         TO :
         
         
                         Message :
         
                         
         
                         SEND
                        
                     
                 
            
             
         
         

         CSS Markup:

         @import url('shorturl.at/qrKYZ');
         body{
             padding: 0;
             margin: 0;
             outline: 0;
             height: 100vh;
             background: url(shorturl.at/nqGV0);
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
         }
         .filter{
             position: absolute;
             top: 0;
             left: 0;
             bottom: 0;
             right: 0;
             background-color:
             opacity: .6;
             z-index: 1;
         }
         h2{
             position: absolute;
             width: 100%;
             z-index: 2;
             font-size: 4em;
             text-align: center;
             color: #fff;
             font-family: 'Courgette', cursive;
         }
         .valentine_card{
             position: absolute;
             z-index: 2;
             left: 50%;
             top: 50%;
             transform: translate(-50%,-50%);
             background: #fff;
             width: 40%;
             padding: 25px;
             font-family: 'Courgette', cursive;
         }
         .valentine_card label{
             font-size: 1.3rem;
         }
         .valentine_card input{
             width: 100%;
             font-size:1.3rem;
             font-family: 'Courgette', cursive;
             border: none;
             border-bottom: 1px solid black;
             margin: 10px 0;
         }
         *:focus{
             outline: none;
         }
         .valentine_card textarea{
             width: 100%;
             height: 150px;
             resize: none;
             font-size:1.3rem;
             font-family: 'Courgette', cursive;
             border: none;
             border-bottom: 1px solid black;
             margin: 10px 0;
         }
         .valentine_card button{
             border: none;
             background: transparent ;
             font-size: 1.5rem;
             float: right;
             font-family: 'Courgette', cursive;
             transition: .4s;
            
         }
         .valentine_card button:hover{
             color: #f44336;
         }
         

         Output:

         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

         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.

         Bahkan, Anda juga akan mendapatkan domain dan SSL gratis lho! 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 HTML	Fungsinya untuk Membuat…
         Heading 1	Heading
         paragraf	Paragraf
         bold strong	Bold/strong
         italic emphasize	Italic/emphasize
         	Line break
         Đọc tiếp

         kode html Script html prank Script html keren
         Reply 6 0 Chia sẻ

Bài Viết Liên Quan

Cara menggunakan save image temporary python

kode python

Ekstensi kode studio visual html css

kode html

Https notfound PHP

Cara menggunakan integer to date python

kode python

Python mengganti karakter dalam file teks

kode python

Cara mengecek nomor npwp yang hilang

Bagaimana Anda membuat diagram di mysql?

kode mysql

Cara menggunakan contoh perulangan while php

kode php

Marksheet code in JavaScript

Cara menggunakan perintah dasar python

kode python

Cara menggunakan baris ungroup di excel

kode excel

Apakah bisa transfer dari OVO ke GoPay?

Cara menghapus squarespace javascript yang tidak terpakai

kode javascript

Bagaimana Anda mengarahkan ke halaman lain di html setelah mengirimkan?

kode html

Scrape website to Excel

Cara menggunakan php max_input_vars not updating

kode php

Cara menggunakan website forum php

kode php

Cara aktivasi kartu BRIZZI di ATM BRI

Cara menggunakan const javascript adalah

kode javascript

Cara menggunakan mysql aplikasi apa?

kode mysql