Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteFront endTableizer sampai Color Picker : Ini Dia Trik HTML...

Tableizer sampai Color Picker : Ini Dia Trik HTML Terbaik yang Bisa Anda Coba

-

Last Updated on May 5, 2022 by

HTML memiliki banyak trik-trik rahasia yang bisa kamu gunakan untuk memudahkan pekerjaanmu saat membuat project dengan HTML.

Dengan trik-trik HTML yang kami tampilkan pada artikel ini, Anda bisa memudahkan semua pengkodingan Anda di HTML. Kali ini, kami akan membongkar trik-trik rahasia HTML. Simak terus sampai akhir!

Trik HTML yang Bisa Anda Coba untuk Memudahkan Pengkodingan

color-picker-html-1

Anda tidak perlu menjadi desainer UX untuk dapat mendesain situs web yang terlihat bagus saat dikunjungi. Tanpa menjadi desainer UX pun Anda bisa membuat website yang cantik. Dengan HTML, CSS3, dan JavaScript, Anda memiliki banyak alat sederhana yang dapat Anda gunakan untuk membuat situs web atau blog Anda terlihat menarik, ramah pengguna, dan modern.

Trik-trik HTML seperti tableizer, map images, dan Color Picker akan sangat membantu Anda dalam membuat website yang menarik. HTML5 telah memberikan kontribusi besar pada situs web cantik yang bisa Anda rancang setiap hari. Ini dia trik HTML yang bisa Anda coba.

1.Tableizer

Sebenarnya tableizer bukanlah trik HTML sesungguhnya ketika Tableizer sudah menjadi aplikasi eksternal. Namun, tableizer bisa menjadi trik terbaik untuk Anda yang ingin membuat sebuah tabel yang kehabisan data dengan menggunakan calc atau Excel spreadsheet templates.

Anda hanya perlu untuk menempelkan cell ke Tableizer dan ia akan menghasilkan sebuah snippet code HTML untuk ditempelkan ke dalam kode website Anda. Hasil dari trik Tableizer ini adalah table yang rapi di mana Anda bisa mengedit detilnya seperti warna background untuk dikustomisasi.

2. mengizinkan pengunjung untuk mengubah background atau warna teks

Jika Anda ingin membuat website Anda menjadi berbeda dari website yang lain, maka buatlah pengunjung Anda agar bisa mengubah background maupun warna teks. Mengapa pilihan untuk mengubah background dan warna teks menjadi penting?

Karena sangat tidak mungkin untuk menyenangkan semua orang dengan pilihan background atau teks Anda. Jadi menggunakan trik ini akan menjadi kasus yang sangat baik untuk menyenangkan pengunjung website Anda. Anda hanya memerlukan sedikit kode tambahan agar pengunjung website Anda bisa mengubah background maupun warna teks sesuka mereka.

Berikut kode yang Anda perlukan:

<select name=”clr” onchange=”document.bgColor=this.options[this.selectedIndex].value” size=”1″>
    <br>
    <option value=”blue”>blue
        <option value=”cyan”>cyan
            <option value=”flamingred”>fuschia
                <option value=”lightyellow”>light yellow
                    <option value=”black”>black
                        <option value=”red”>red
                            <option value=”yellow”>yellow
                                <option value=”pink”>pink
                                    <option value=”white”>white</option>
</select>&nbsp;&nbsp;Background Color

<br>
<select name=”clr” onchange=”document.fgColor=this.options[this.selectedIndex].value” size=”1″>
    <br>
    <option value=”blue”>blue
        <option value=”cyan”>cyan
            <option value=”flamingred”>fuschia
                <option value=”lightyellow”>light yellow
                    <option value=”black”>black
                        <option value=”red”>red
                            <option value=”yellow”>yellow
                                <option value=”white”>white</option>
</select>&nbsp;&nbsp;Text Color

3. Gambar Map (Map Images)

Map Images adalah gambar yang bagus dengan area yang dapat diklik dimana Anda bisa tautkan gambar yang ada ke bagian lain dari dokumen, atau halaman web lainnya. Tidak semua orang mungkin menyadari bahwa elemen <map> akan memungkinkan Anda menentukan area pada gambar yang dapat diklik pengunjung.

Cukup sebutkan koordinat X Y yang sesuai di elemen <area> di dalam <map>. Contoh fitur ini adalah peta dunia yang akan membawa pengunjung ke berbagai wilayah tempat bisnis Anda hadir. Anda hanya dapat memberi gaya pada penanda langsung pada gambar dalam perangkat lunak pengedit gambar. Ini adalah contoh kodenya:

<h1 style="text-align:center;">The 7 Continents</h1>

<h4 style="text-align:center;">&#10148; Click on the dots in the image to go to a continent section</h4>

<map name="continents_map">

 <area shape="circle" coords="70,70,10" href="#north_america">

 <area shape="circle" coords="133,185,10" href="#south_america">

 <area shape="circle" coords="270,137,10" href="#africa">

 <area shape="circle" coords="292,44,10" href="#europe">

 <area shape="circle" coords="469,201,10" href="#australia">

 <area shape="circle" coords="374,65,10" href="#asia">

 <area shape="circle" coords="340,267,10" href="#antartica">

</map>

<figure style="text-align:center;">

    <img usemap="#continents_map" src=https://bit.ly/2bgFrvL width="600px" />

    <figcaption>World Map</figcaption>

</figure>

<div>

    <h3 id="africa">Africa</h3>

    <p>Our locations in Africa</p>

</div>

<div>

    <h3 id="asia">Asia</h3>

    <p>Our locations in Asia</p>

</div>

<div>

    <h3 id="europe">Europe</h3>

    <p>Our locations in Europe.</p>

</div>

<div>

    <h3 id="south_america">South America</h3>

    <p>Our locations in South America.</p>

</div>

<div>

    <h3 id="north_america">North America</h3>

    <p>Our locations in North America:</p>

</div>

<div>

    <h3 id="antartica">Antarctica</h3>

    <p>Our locations in Antarctica.</p>

</div>

<div>

    <h3 id="australia">Australia</h3>

    <p>Our locations in Australia.</p>

</div>

Kumpulan kode CSS ini akan menjadi:

body {
    font-family: "bookman old style";
}
:target {
    color: lightyellow;
    background: indianred;
}
h3,
h1 {
    color: indianred;
}
img {
    border: 3px dashed indianred;
}
body {
    counter-reset: srl;
}
h3::before {
    counter-increment: srl;
    content: counter(srl)". ";
}
Artikel Terkait  Cara Membuat Header CSS yang Responsive : Tips untuk Para Pemula

4. Hide Field

Tahukah Anda tentang aplikasi Reddit? Reddit warrior atau sebutan untuk orang-orang yang suka berbagi atau berdebat berbagai hal di Reddit. Ada banyak Reddit warrior yang telah menunjukkan contoh “pemrograman horor” ini di mana bidang untuk penggunaan internal dapat dilihat oleh publik.

Formulir ini adalah contoh pemrograman  yang masih amatir. Anda mungkin tidak ingin pengawasan seperti itu di situs web Anda. HTML memberi Anda opsi untuk menyembunyikan satu atau dua bidang.

Pengunjung tidak dapat mengetik apa pun ke dalam bidang tersembunyi, dan ketika pengunjung mengirimkan formulir, formulir membawa bidang tersembunyi.

Berikut cara kerja Hide Field:

<html>

<head>

    <title>My Page</title>

</head>

<body>

    <form name="contact" action="http://www.mydomain.com/myformhandler.cgi" method="POST">

        <div align="center">

            <input type="text" size="25" value="Enter your name here!">

            <input type="hidden" name="Language" value="English">

            <br><br>

        </div>

    </form>

</body>

</html>

Dari kode di atas, hasil yang akan Anda dapat ketika bidang yang disembunyikan tidak bisa dilihat oleh visitor. Bidang yang disembunyikan atau hide field ini akan memberitahukan form handler kepada pengguna yang menggunakan bahasa Inggris.

5. Menambahkan MetaData

html-5

Akan terlihat pada pencarian Google dan pencarian search engine lainnya dengan memastikan bahwa Anda telah memberikan meta data tentang situs web Anda. Sebenarnya, penggunaan metadata ini bukan lagi pilihan, tetapi menjadi hal penting jika Anda ingin tetap bersaing dengan para kompetitor.

Jangan lupa untuk mengoptimalkan sisa konten situs web Anda agar pengguna di mesin telusur dapat menemukan Anda dengan mudah. Pro SEO di Freelancer dapat membantu Anda dengan SEO back-end dan kebutuhan search engine machine (SEM).

Sementara itu, kode untuk menambahkan meta sederhana:

<meta name=”description” content=”Used auto parts for sale”>

<meta name=”keywords” content=”fuel filters, brake discs, belts” />

6. Menambahkan fine print

Anda bisa menambahkan pengaturan hukum, kutipan, batasan , persyaratan, dan fine print lainnya ke bagian bawah dokumen Anda dengan tag <small>

<h1>Diskon Kamis Manis!!! Upto 70% off on all products under <i>Toys &amp; Recreation</i><sup>*</sup></h1>

<p><small>* Terms and Conditions apply</small></p>\

7. Menambahkan background image

Anda dapat menambahkan background image ke teks Anda jika fontnya cukup besar. Anda disarankan untuk tidak menggunakan tip ini untuk font yang lebih kecil dari 20 poin. Jika kurang dari 20 poin, Anda tidak akan ada banyak perbedaan antara gambar dan warna latar belakang. Kodenya adalah:

<SPAN STYLE=”background-image: url(//www.myimage.png ); font-size: 20pt”>NoBoringHighlight…</SPAN>


8. Highlight Teks

Tag <span> akan memungkinkan Anda untuk melakukan highlight ke teks yang ada di Firefox maupun Internet Explorer. Anda bisa memilih warna untuk meng-highlight, tentu saja kodenya sangat sederhana:

<span style=“ background-color: #FFFF00”>Your text here.</span>

9. Menambahkan suggestions

Anda bisa membuat website Anda menjadi lebih ramah untuk visitor agar mereka bisa menemukan apa yang mereka cari dengan memunculkan daftar saran saat mereka mengetik nilai input. Gunakan kode berikut pada teks editor kesukaan Anda:

<input type="text" list="text_editors">
<datalist id="text_editors">
    <option value="Atom"></option>
    <option value="Notepad ++"></option>
    <option value="Sublime Text"></option>
    <option value="Wordpad"></option>
</datalist>
<p><em>For example;
   </em> Sublime Text</p>

Artikel Terkait  Website Kamu Lemot? Ini Dia Trik Membuat Website dengan Page Speed Tinggi

10. Menambahkan garis horizontal

Garis horizontal berguna untuk memecah bagian panjang situs web Anda sehingga halaman lebih mudah dilihat. Untuk menambahkan baris, gunakan tag <hr/>, seperti pada:

<h1>HTML</h1>

<p>HTML is a language for describing web pages.....</p>

<hr>

<h1>CSS</h1>

<p>CSS defines how to display HTML elements.....</p>

11. Menambahkan voice recognition

Menambahkan pengenal suata atau voice recognition sangat membantu pekerjaan Anda. Pada HTML 5 atau versi terbaru lainnya, Anda bisa menambahkan kecepatan recognition ke teks input atau membuatnya seperti cara mudah berikut ini:

<input type="text" x-webkit-speech />

12. Menambahkan math equations

Menambahkan math equations dengan menggunakan bahasa MathML sangat mudah jika Anda menggunakan HTML 5 maupun HTML versi terbaru lainnya. Tambahkan semua equation anda di antara tag <math> dan </math>. Berikut ini adalah contoh kode yang menambahkan fraksi a/b ke halaman Anda.

<math>

<mfrac>

<mi>a</mi>

<mi>b</mi>

</mfrac>

</math>

Ada sebanyak 142 elemen HTML yang telah distandarisasi oleh W3C untuk Anda gunakan. HTML5 telah memberi kami fitur menarik untuk membuat situs web kami seramah pengguna dan kaya media mungkin, dengan dukungan untuk format video dan kanvas serta yang lainnya.

13. Color Picker

Dengan menggunakan HTML5, ada beberapa penyesuaian yang sangat interaktif yang akan disukai pengunjung situs web Anda salah satunya adakah Color Picker. Color Picker ini akan membutuhkan sedikit pengkodean JavaScript dan CSS untuk memungkinkan Anda memilih warna apa yang Anda inginkan dari palet daripada harus memasukkan kode warna abstrak. Fitur Color Picker akan sangat ramah pengguna bagi mereka yang baru mengenal pengkodean atau tanpa banyak pengetahuan pengkodean.

Seperti inilah contoh kodenya:

<!--HTML--> Choose a color to color the below text <input id="color_picker" type="color" onchange="showHex();"> <span id="color_hex_value"></span> <h1>COLOR ME !</h1> <!--CSS--> body {
    font-family: "bookman old style";
}
<!--JS--> function showHex() {
    var hex document.querySelector("#color_hex_value"), h1 document.querySelector("h1");
    h1.style.color document.querySelector("#color_picker").value;
}

Demikianlah penjelasan tentang trik-trik HTML yang bisa Anda gunakan untuk mempercantik website Anda. Manakah trik yang sudah Anda coba? Jika sudah mencoba semuanya, trik manakah yang paling Anda sukai? Jika Anda belum mencoba trik-trik ini Anda bisa coba sekarang! Nantikan  https://appkey.id/


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya