Live Search Database Menggunakan Ajax

Apakah anda pernah mencoba mencari data atau mengecek status barang atau ingin menampilkan data anda hanya dengan memasukkan ID, username atau kata kunci tertentu?

Aplikasi seperti di atas kebanyaan digunakan pada website-website besar, tetapi dominan digunakan oleh jasa pengiriman dimana user atau pengguna dapat mengecek status barang yang dia kirm.

Mungkin itu menggunakan live search dimana aplikasi seperti ini terkoneksi kedatabase kemudian menampilkan data database sesuai dengan data yang di cari.



Langsung saja kita menuju kepembahasan intinya, disini kami menggunakan Bootstrap jadi kami tidak menggunakan CSS. Let's Start...

Buat database dengan nama nama search kemudian masukkan struktur database dibawah ini.
 CREATE TABLE `search` (
  `id` int(10) NOT NULL,
  `name` text NOT NULL,
  `link` varchar(300) NOT NULL,
  `description` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `search`
--

INSERT INTO `search` (`id`, `name`, `link`, `description`) VALUES
(1, 'Arman Basir', 'https://www.tutorialswb.com/', 'Arman Is Web Developer and Content Writer'),
(2, 'Mamampang', 'Link Not Found', 'Mamampang Is Districk in Tinggimoncong, Gowa, Sul-Sel');

--
-- Indeks untuk tabel `search`
--
ALTER TABLE `search`
  ADD PRIMARY KEY (`id`);
COMMIT; 

Buat file dengan nama index.php file ini berfungsi sebagai interface atau tampilan pencarian dimana semua proses nyatanya atau front end dilakukan pada file ini.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Ajax Live Search</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:regular,bold" type="text/css" />
    <!-- Load jQuery library -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <!-- Load custom js -->
    <script type="text/javascript" src="scripts/custom.js"></script>
    
</head>

<body>
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="https://www.tutorialswb.com/">PHP Ajax Live Search </a>
            </div>
        </div>
    </nav>
    <div class="form-group col-md-6">
        <label for="exampleInputEmail1">Enter Your Name</label>
        <input type="email" class="form-control" id="search" autocomplete="off" placeholder="Enter Your Name">
    </div>

    <h5 align="center" id="results-text">Showing results for: <b id="search-string">Array</b></h5>
    <div align="center">
        <ul id="results" class="text-decoration;none">
        </ul>
    </div>

</div>
</body>
</html> 

Terakhir buat file dengan nama search.php file ini berfungsi sebagai live search data dimana proses ini merupakan proses inti dibelakang layar, atau back end.
 <?php

$dbhost = "localhost";
$dbname = "search";
$dbuser = "root";
$dbpass = "";

global $tutorial_db;

$tutorial_db = new mysqli();
$tutorial_db->connect($dbhost, $dbuser, $dbpass, $dbname);
$tutorial_db->set_charset("utf8");

if ($tutorial_db->connect_errno) {
 printf("Connect failed: %s\n", $tutorial_db->connect_error);
 exit();
}


$html = '';
$html .= '<li class="result">';
$html .= '<a target="_blank" href="urlString">';
$html .= '<h5>nameString</h5>';
$html .= '<h5>descriptionString</h5>';
$html .= '</a>';
$html .= '</li>';

$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
$search_string = $tutorial_db->real_escape_string($search_string);

if (strlen($search_string) >= 1 && $search_string !== ' ') {
 $query = 'SELECT * FROM search WHERE description LIKE "%'.$search_string.'%" OR name LIKE "%'.$search_string.'%"';

 $result = $tutorial_db->query($query);
 while($results = $result->fetch_array()) {
  $result_array[] = $results;
 }

 if (isset($result_array)) {
  foreach ($result_array as $result) {

   // Format Output Strings And Hightlight Matches
   $display_description = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['description']);
   $display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['name']);
   $display_url = $result['link'];

   // Insert Name
   $output = str_replace('nameString', $display_name, $html);

   // Insert Function
   $output = str_replace('descriptionString', $display_description, $output);

   // Insert URL
   $output = str_replace('urlString', $display_url, $output);

   // Output
   echo($output);
  }
 }else{

  $output = str_replace('urlString', 'javascript:void(0);', $html);
  $output = str_replace('nameString', '<b>No Results Found.</b>', $output);
  $output = str_replace('descriptionString', 'Sorry :(', $output);

  echo($output);
 }
}



?> 

Kalian bisa mendownload file dibawah ini, kalian bisa mencoba dan memodifikasinya sebagai bahan kalian untuk belajar.


Sekian share kali ini semoga apa yang kami share diatas bermanfaat bagi anda jangan lupa share keteman dan kerabat anda. Jika kaalian ingin menanyakan sesuatu hal silahkan tinggalkan komentar dibawah dan mulai berdiskusi dengan kami.

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGew/24kUMI4BOrU/s512-c/photo.jpg

Maksimalkan Kinerja dan SEO Website Anda di Akhir Tahun

tutorialswb


Apakah anda sudah berpikir bagaimana anda meningkatkan pengunjung dan pengalaman pengguna ketika berkunjung ke website anda ?

Jika anda adalah seorang bloggers yang betul-betul ingin menekuni teknik SEO tentu pertanyaan di atas tak perlu ditanyakan lagi karena pasti anda sellau memikirkan itu disetiap waktu anda.

Ditahun 2018 sampai di awal 2019 ini ada beberapa kebijakan google yang harus di ikuti ketika anda ingin meningkatkan SEO dan pengalaman pengunjung website anda.

Disamping kebijakan diatas disaat yang bersamaan ada beberapa algotithm yang diupdate okeh mereka, diantaranya adalah pembaharuan google ramah seluler dan diwajibkannya penggunaan HTTPS dalam website anda.

Pada kesempatan kali ini kami akan membahas satu per satu secara detail perubahan apa saja yang harus anda lakukan dan kiat-kiat apa saja yang harus anda lakukan untuk menghindari menghilangnya pengunjung website anda secara bertahap.

Menurut situ resmi google perubahan sekecil apapun yang anda lakukan akan berdampak besar terhadap website anda ketika sudah dikombinasikan dengan pengoptimalan dan perubahan lain yang saling berhubungan dan saling mendukung satu dengan yang lain dan meningkatkan kinerja website pada penelusuran google.

Index Mesin Telusur

Satu hal yang perlu diketahui oleh pengembang website baru bahwa index oleh google merupakan satu hal paling penting, kenapa ? karena tanpa di index oleh google percuma anda menulis dan menerbitkan sebuah artikel karena artikel anda tidak akan muncul di mesin telusur. 

Dalam mengolah website kami ada tiga mesin telusur yang kami percaya dapat meningkatkan kinerja website kami di antaranya adalah,


Search Console merupakan mesin index yang dimiliki oleh Google, untk yang satu ini kalian wajib untuk submit URL website anda kedalamnya.


Bing Webmaster Tools adalah layanan gratis sebagai bagian dari mesin pencari Bing Microsoft yang memungkinkan webmaster untuk menambahkan situs web mereka ke Bing index crawler.Yang satu ini juga diwajibkan.


Yandex.Webmaster adalah seperangkat alat, serupa dengan Alat Webmaster Google, dengan banyak fitur yang memungkinkan webmaster dan pemilik situs untuk memeriksa status pengindeksan dan mengoptimalkan visibilitas situs web mereka di Yandex. Yandex Webmaster merupakan mesin index yang berlokasi dirusia tidak salah jika bahasa utama dari mesin telusur ini adalah bahasa rusia. Tapi kalian tak perlu ragu mesin index dan telusur ini mempunyai beberapa versi bahasa.

Pada awal kami mengembangkan website ini kami telah mempercayai yandex webmaster untuk mengindex website kami, dan sampai sekarang kami masih menggunakannya, banyak pengunjung website kami yang berasal dari rusia dan cara kerja yang kami rasakan saat ini sama dengan kedua mesin index di atas, denga tidak ragu kami merekomendasikan ini untuk digunakan.

Pembaharuan Ramah Google Seluler (Mobile Friendly)

Template ramah seluler merupakan template yang ringan dalam pemuatan halaman (tampilan), responsive dan mempunyai tampilan yang menarik.

Kebijakan ini dirilis pada pertengahan tahun 2015 dimana google akan mengutaman peringkat atas website yang mengikuti kebiajkan ini, sebenarnya tujuan google ini tidak ada masalah tetapi pada saat itu masih kurangnya tenmplate yang memenuhi kriteria ini.

Kebijakan baru ini waib anda ikuti jika kalian ingin memperoleh posisi penting di mesin telusur untuk smartphone. Oleh karena segera lakukan uji coba terhadap website anda pada alat uji yang bisa mendeteksi website anda mobile friendly atau bukan.

Pada awal oktober 2015 google mulai memulai sebuah proyek besar yang sangat penting dan perpengaruh tehadap posisi anda pada pencarian menggunakan smartphone.

Halaman AMP pertama kali muncul untuk pengguna web pada bulan Februari 2016, ketika Google mulai menampilkan versi AMP dari halaman web dalam hasil pencarian mobile. Awalnya tautan ke laman AMP dibatasi pada bagian "Berita Utama" hasil penelusuran seluler Google; pada September 2016 Google mulai menautkan ke konten AMP di area hasil pencarian ponsel utama. Tautan AMP di pencarian Google diidentifikasi dengan ikon.

Kami masih sangat ingat AMP ini mulai buming di Indonesia pada awal akhir tahun 2017 dimana para pengembang dan pengguna website sudah mulai menggunakannya dalam proyek mereka dan mungkin sudah ada dari mereka yang sudah merasakan dampak positif dari pengimplementasian AMP ini.

Tentu ini masalah baru bagi kami pribadi dan mungkin masalah dengan kalian, kami harus mengatakan bahwa yang paling disusahkan dengan kebijakan ini adalah pengguna platform blogger, dimana pengguna blogger belum ada Plugin yang bisa membantu, dan yang mudahkan adalah pengguna platform WordPress karena mereka sudah ada plugin yang membuat mereka hanya tinggal meningnstal saja.

Mengapa kami mengatakan itu susah bagi pengguna blogger?

Tentu ini susah dimana bagi pengguna blogger yang sudah mempunyai artikel yang banyak harus melalukan konfigurasi satu persatu untuk artikel mereka, dan harus mengubah kode template mereka supaya valid AMP.

Kami sendiri sampai saat ini belum menggunakan AMP dalam website kami, kendala utama yang kami hadapi adalah perubahan di atas, dan kami tentu mendapat dampak negatifnya, dimana pengunjung website kmai di seluler hanya 0,5% dari 100% itu berarti pengunung website kami diseluler sangatlah kecil, oleh karena itu bagi pengembang atau pendiri website baru direkomnedasikan untuk menggunakan AMP ini.

Nah untuk mengikuti kebijakan google di atas anda harus melakukan kiat-kiat dibawah.

1# Gunakan Template Premium dan Valid AMP 

Penggunaan template dalam membangun sebuah website merupakan salah satu dari banyak element penting dalam mengembangkan sebuah website, penggunaan template yang terlihat nyaman dan tidak mengganggu pemandangan user akan berdampak terhadap lamanya waktu user berkunjung dan tentunya yang terpenting SEO.

Hal-hal seperti itu kemungkinan besar kalian bisa dapatkan pada template premium, tentunya pada penyedia template berbayar sudah mempersiapkan fitur dan penggunaan Kode yang ramah terhadap pengunung dan mesin telusur.

Kami tidak mewajibkan anda menggunakan template premium karena tentunya kalian harus mengeluarkan budget dimana template premium sekarang berkisar +70K ke atas, tetapi tentunya jika anda serius membangun sebuah website hal ini harus anda lakukan. tetapi janga ragu berikut template gratisan yang kami rekomendasikan.

20 Template terbaik untuk blogger
10 Template AMP Free dan Premium

Disamping kelebihan di atas tantunya kadang ada (tidak semua) template gratisan yang memasang credict link dimana jika anda menghapus credict link tersebut membuat pembuat atau developer template tersebut akan marah atau anda sama sekali tidak menghargai pembuat template, Nah untuk menghindari credit link ini gunakan template premium.

Disamping penggunaan template yang berbayar yang kalian harus gunakan bagian kalian pengembang website baru kami sarankan untuk menggunakan template Valid AMP jika kalian ingin memperoleh posisi di mesin telusur smartphone, aturan google, dan kami perhatikan website yang valid AMP sudah mempunyai tempat utama di hati Google dimana pada google Adsense mereka di siapkan auto ads valid AMP. Gunakan ya hehehe.

2# Gunakan template fast Loading

Sebenarnya nomor 1 diatas sudah mewakili pembahasan ini, dimana sebenarnya jika anda menggunakan template AMP website anda akan mempunyai loading yang cepat, dan sesuai denga yang kami katakan di atas bahwa website yang fast loading akan mempunayi template tersendiri kata orang yang lagi pacaran tempat special hahaha....

3# Gunakan Kode Yang Seperlunya

Cara lain yang membuat website anda cepat loading dan dapat membuat website anda mempunyai nilai SEO yang bagus adalah penggunaan Code yang seperlunya saja, janga terlalu banyak menggunakan plugin, yang ustru membuat website anda menjadi berat.

Penggunaan Meta Tag SEO pada Blogger atau Bahasa Gaulnya Kata Kunci

Salah satu aspek yang sangat penting dari teknim SEO adalah penggunaan kata kunci dalam judul dan tag header, deskripsi meta tag dan body copy. Kata kunci ini adalah hal utama dimana dia memberi tahu mesin telusur apa yang ada dalam situs anda, halaman anda, dan yang terpenting adalah menunjukkan bahwa halaman anda relevan ketika pengguna mencari kata kunci tersebut. Lalu kata kunci seperti apa yang mesti anda gunakan?

1# Kata kunci Ekor Panjang

Anda harus selalu memikirkan kata-kata yang dapat anda gunakan untuk meringkas situs anda, misalnya jika anda mempunyai sebuah website tantang kuliner khas jakarta, mungkin kalian berpikir bahwa kata-kata yang layak anda gunakan "kuliner".

Kami rasa penggunaan kata kuliner sangat bagus ketik aorang menelusuri mesin pencari dengan menulis kuliner tetapi anda perlu tahu bahwa sangat banyak situs yang sama, yang membahas mengenai kuliner ini dan peluang website anda untuk dikunjugi sangat sedikit.

Tetapi jika anda menggunakan kata kunci kuliner khas jakarta tentu pengunjung website anda aka berkurang, karena orang akan lebih banyak menelusuri kuliner, tetapi anda harus memikirkan bahwa pengunjung website anda yang menelusuri kuliner khas jakarta cenderung tertarik mencari kuliner khas jakarta. Dengan berfokus pada kata kunci yang panjang anda memiliki peluang yang baik dan juga menarik lalu lintas website anda.

2# Kata Kunci Lokasi

Selain menyertakan kata kunci, kalian harus memberi tahu pengunjung atau bahkan mesin telusur bahwa lokasi bisnis atau website anda berdaa di lokasi tersebut. Jadi sangat penting untuk memasukkan nama kota dan wilayah detail dimana bisnis ata website anda berada.

Misalnya jika lokasi kuliner anda berada DKI Jakarta tepatnya di jakarta selatan, berarti kemungkinan besar anda harus memasukkan kata kunci "kuliner khas jakarta selatan". Kata kunci seperti ini lebih ditargetkan dan akan membantu peluang bisnis anda ditemukan oleh para pencari.

Kami sendiri telah melakukan hal di atas dengan mengubungkan website kami dengan gogole business dimana tidak lama lagi kami akan mendapatkan kode verifikasi lokasi dan website kami akan menampilkan lokasi yang detail ketika mencari atau menelusi website kami.

Konten

Nah mungkin ini lebih menarik untuk dibahas, situs anda harus memiliki konten yang berkualitas dan masih kurang orang yang membahasnya karena semakin banyak orang yang membahasny apeluang untuk mendapatkan posisi dimesin telusur lebih kecil. Meskipun mesin telusur tidak dapat membaca artikel anda seperti manusia mesin telusur bisa melihat sinyal untuk menentukan website anda atau konten anda layak untuk di rekomendasikan kepada pengunjung atau penelusur.

1# Informasi Tersampaikan

Anda harus mengincar kualitas daripada kuantitas, itu tidak berarti bahwa anda harus menulis halaman yang panjang, ettapi kalian harus sellau memberikan informasi yang detail dan bisa dipahami oleh pengunjung anda.

2# Segar

Mesin pencari lebih suka situs yang segar seperti manusia pada umumnya. Ini berarti anda tidak harus selalu menulis artikel baru, tetapi jika anda senang dengan konten anda anda hanya perlu menambahkan atau mengubahnya tetapi dengan catatan harus sesuai tujuan utama yaitu SEO.

Usahan kalian harus mempostinga satu artikel dalam seminggu atau paling lama sekali tujuannya adalah untuk memberitahukan kepada mesin telusur dan pengunjung anda bahwa website selalu dalam pengelolaan atau selalu dipelihara.

3# Penautan Internal

Penautan internal sangat penting dalam sebuah website, hal ini dilakukan untuk menunjukkan bahwa anda telah membahas mengenaik suatu hal dalam website anda, Misalnya anda pernah membuat artikle "template blogger gratis" anda bisa menautkan link artikel tersebut ketika dikemudian hari anda membahas mengenai template dan kami yakin pengunjung website anda akan senang dengan tautan tersebut.

Off-Halaman

Bukan hanya orang yang dinilai dalam sebuah perusahaan, ettapi situs web anda juga akan diperingkat berdasarkan jumlah nama domain unik yang menautkan kesitus anda, ini berarti bahwa banyak situs yang mereferensikan konten anda, pada mesin telusur ini disebut dengan "link your site".

Memperluas Target Penayangan (TagHreflang)

Jika kalian ingin memperluas lokasi pengunjung website anda salah satu hal penting yang harus anda melakukan penargetan Internasional atau dalam dunia blogging disebuat taghreflang.

Jika kalian belum paham secara detai bagaimana menggunakan taghreflang ini silahkan dibaca artikel berikut, atau jika kalian sudah paham bagaimana menggunakannya tetap belum mengetahui kode negara yang sesuai dengan ketentuan dan aturan yang ada kalia bisa menggunakan hreflang generator Aleyda Solis's, genartor ini sangat disarankan oleh google itu berarti genarator itu sudah sesuai dengan ketentuan yang ada.

Promosi

Jika kalian menginginan hasil yang maksimal tentu hal yang harus anda lakukan adalah merogoh rupiah dari dompet anda. Mungkin promosi seperti ini disebut strategi manajemen (kalo tidak salah ya).

Anda bisa melakukan ini dengan memasang iklan pada Google Ads dan Facebook Ads, kami sendiri dalam menjalankan strategi marketing ini menggunakan jasa periklanan Facebook Ads dan tentu hasilnya sesuai dengan yang diinginkan.

Satu hal yang perlu anda ketahu jika kalian memaksimalkan kinerja website anda dengan melakuam teknik SEO yang benar di akhir tahun, kemungkinan besar anda akan menikmati hasilnya setelah musim liburan berlalu.

Sekian share yang sangat singkat dalam dunia SEO untuk meningkatkan kinerja website anda, apa yang kami share di atas telah kami lakukan semua dan tentu kami tidak akan berbagi jika hasilnya menjadi negatif pada website kami.

Jika ada hal atau istilah-istilah yang kurang yang belum saya tulis di atas dan menurut anda itu sangat perlu dalam meningkatkan kinerja website silahkan tinggalkan komentar dibawah dan mulai berdiskusi dengan kami.

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAAC2c/2tPHlZb1Wzo/s512-c/photo.jpg

5 Elementor Template WordPress Terbaik

Mencari tema yang sempurna untuk Elementor?

Dalam video ini Anda dapat menemukan tema Elementor WordPress terbaik berdasarkan preferensi pembelian pelanggan di Marketplace Elementor TemplateMonster.

1. Ascendio

Template Pengusaha WP cocok untuk semua jenis bisnis, perusahaan, dan situs perusahaan. Tema ringan, responsif, dan dapat disesuaikan ini merupakan solusi serbaguna untuk berbagai jenis bisnis. Berkat sifat responsif dan valid, pengkodean semantik, pengguna akan dapat melihat situs Anda di perangkat genggam dalam hitungan detik. Panel admin lanjutan dan perangkat UI yang kaya membuka berbagai peluang dan Anda dapat menyesuaikan tema ini untuk memiliki tampilan dan nuansa yang unik. Pembuat halaman drag-and-drop elementor memungkinkan Anda untuk memodifikasi tata letak template tanpa menyentuh baris kode.

2. JohnnyGo


Temui JohnnyGo, tema WordPress yang well-documented dan SEO-friendly dengan banyak skin untuk semua jenis situs web layanan rumah! JohnnyGo dirancang untuk tukang, tukang ledeng dan layanan perbaikan. Plugin yang kuat memberikan fungsionalitas yang sangat baik. Tema ini memiliki plugin WooCommerce di papan, dan sepenuhnya diisi dengan proyek Cherry, Layanan, anggota Tim dan plugin Testimonial. Jadi diberikan bahwa Anda akan dapat menjangkau audiens target Anda! Anda akan dapat membangun konten saat dijalankan dengan pembangun halaman langsung Elementor, dan paket JetElements lengkap akan memberikan fungsionalitas tambahan. JohnnyGo memiliki antarmuka pengguna yang efisien, mudah dipasang dan dikustomisasi. Tampil luar biasa di web dengan JohnnyGo WP Theme!

3. FrameMe

FrameMe adalah solusi paling praktis untuk membangun situs web yang sukses untuk studio foto. Kami menawarkan Anda desain yang luar biasa dan sangat responsif. Dengan berbagai penyesuaian, Anda akan dapat mengubah tampilan situs web kapan pun dibutuhkan! Perlu berbagi satu set pernyataan dari pelanggan yang puas? Menyiapkan testimonial tidak pernah semudah ini! Perlu mendiskusikan masalah tertentu dengan pelanggan? Gunakan fitur Blog Pribadi terpercaya kami. Dengan halaman Kontak, pelanggan Anda akan selalu tahu cara berkomunikasi dengan Anda dan menavigasi ke perusahaan Anda.

4. Dezingo

Anda dapat dengan mudah menambahkan berbagai blok, objek, dan elemen menggunakan Penyesuai Langsung, dan membuat tata letak situs unik Anda dengan menyeret dan melepaskan pembuat halaman Elemen. Perlu berbagi pemikiran Anda dengan pelanggan? Anda selalu dapat menulis melalui fitur Blog Pribadi kami yang praktis. Situs web Anda akan tersedia di seluruh dunia dan di semua perangkat yang dikenal. Berbagai macam plugin yang hadir dengan Dezingo adalah perangkat yang sempurna untuk membuat situs web Anda dan memberdayakan dengan fungsi yang kuat. Jangan lewatkan kesempatan untuk melibatkan klien baru ke bisnis Startup Anda!

5. Imperion

Jika Anda membutuhkan tema bebas repot untuk situs web pemasaran bisnis yang menguntungkan, bangun situs Anda dengan tema WordPress Imperion yang hebat ini! Muncul dengan desain yang elegan dan ultra responsif dan kompatibilitas crossbrowser. Dengan demikian, pengunjung Anda akan menikmati kinerja situs yang luar biasa di perangkat modern apa pun dan di browser web apa pun.

Imperion memiliki halaman Tentang yang menarik dan terstruktur dengan baik, jadi, jangan ragu untuk menyajikan bisnis Anda dalam cahaya terbaik seperti yang Anda suka!
Ini dibuat oleh pengembang web, tema Elementor WordPress memberi Anda kesempatan untuk membangun situs web yang kuat dan indah dengan cara tercepat dan termudah. Anda tidak perlu menjadi profesional untuk membuat dan menyajikan situs web Anda sekarang!

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAAC2c/2tPHlZb1Wzo/s512-c/photo.jpg

EasyJet vs Argenta Multipurpose Template WordPress

Sebagian besar pengguna merasa kewalahan ketika mereka harus memilih desain siap pakai terbaik untuk situs web mereka. Jumlah platform web yang menjual tema yang dibuat oleh vendor di seluruh dunia tumbuh dengan cepat setiap saat.TemplateMonster dan ThemeForest telah terbukti menjadi dua pasar digital terkemuka yang menjual tema WordPress dengan kualitas terbaik. [B] Mari bandingkan fungsi yang disertakan dalam dua top- menjual tema WordPress bisnis dari kedua pasar.

EasyJet vs Argenta Multipurpose WordPress Themes

EasyJet adalah template multiguna fungsional yang dijual oleh ZEMEZ di pasar digital TemplateMonster. Ini adalah solusi siap pakai yang mudah digunakan yang mudah ditangani oleh pemula dan pakar webmaster. Ini adalah templat WordPress kaya fitur yang dilengkapi dengan semua yang Anda perlukan untuk peluncuran situs pribadi, bisnis, atau eCommerce. Tidak perlu menjadi perancang web yang ahli atau spesialis pemrograman untuk menangani tema Anda sendiri. Paket unduhan tema mencakup berbagai fitur yang akan menarik pengguna dari semua tingkat keahlian.

Argenta adalah template WordPress multiguna yang kreatif yang dijual oleh Colabrio di pasar ThemeForest. Ini adalah salah satu template WordPress kaya fitur yang cocok untuk digunakan untuk proyek-proyek web yang sangat berat. Koleksi tata letak yang dapat diedit sepenuhnya yang disertakan dalam paket unduhan tema siap disesuaikan dengan fitur modifikasi yang dapat digunakan yang dapat diakses melalui dasbor.

Kedua template WordPress yang sudah ditinjau adalah solusi multiguna yang mencakup beberapa alat dan fitur yang menyediakan kebutuhan khusus. Kedua templat ini menyertakan opsi yang serupa dan set alat yang berbeda, yang membuat salah satunya lebih kuat dari yang lain. Yah, cukup kata. Mari langsung ke perbandingan.

Instalasi

Untuk mulai bekerja dengan semua template WordPress, Anda perlu menginstal WordPress. Jika Anda belum melakukannya, pastikan Anda menginstal versi WordPress terbaru di host web Anda.

Untuk mulai bekerja dengan template WordPress EasyJet, Anda perlu membuat semua persiapan yang diperlukan dan menjalankan instalasi plugin. Ini menjamin bahwa template yang dipilih akan berfungsi dengan benar setelah instalasi semua komponennya.

EasyJet memiliki fitur instalasi otomatis dan manual untuk semua komponen. Satu-klik instalasi diwujudkan dengan bantuan plugin Cherry Wizard. Segera setelah tema diinstal, Anda akan menerima jendela pemberitahuan yang meminta Anda memilih kulit untuk situs masa depan Anda. Secara umum dianggap bahwa pemasangan otomatis akan menjadi pilihan terbaik untuk pengguna yang tidak mengerti teknologi, serta webmaster yang berharap untuk menggunakan semua alat yang disertakan dalam paket tema.

EasyJet juga dapat diinstal secara manual. Untuk menggunakan metode ini, Anda harus memiliki akses ke server WordPress Anda melalui FTP atau File Manager dari panel kontrol hosting Anda. Saat memasang EasyJet secara manual, Anda dapat memilih plugin, alat, dan ekstensi yang penting untuk situs Anda di masa mendatang, dan melewati solusi yang tidak akan memengaruhi kegunaan proyek online Anda.

Untuk Argenta, tema ini memiliki instalasi reguler, yang akan mengunggah semua komponen arsip tema ke server web.

Demo Tambahan

Ketersediaan kulit tambahan adalah salah satu keuntungan terbesar dari kedua tema WordPress yang disebutkan. Kedua template ini menampilkan koleksi kulit anak yang terus bertambah, yang diperluas dengan

EasyJet menyertakan kumpulan 12+ demo beranda luar biasa yang dimaksudkan untuk digunakan untuk berbagai proyek web khusus-niche. Anda dapat melihat semua demo di situs demo langsung tema. Jika Anda telah membeli EasyJet, maka Anda mungkin mengharapkan kulit baru dikirimkan kepada Anda secara otomatis setiap kali pembaruan baru dirilis. Beralih di antara demo Anda dapat yakin bahwa semua data Anda akan tetap tak tersentuh. Kulit demo termasuk studio CrossFit, kecantikan, bisnis, konstruksi, arsitektur, fotografi, restoran, perbaikan mobil, dan kulit khusus lainnya.

Argenta memberi pengguna akses ke 14+ kulit demo, yang semuanya dapat dipasang hanya dengan satu klik. Mirip dengan EasyJet, skin baru akan dikirimkan dengan rilis pembaruan baru. Demo kulit tersedia untuk pratinjau daring gratis, sehingga Anda dapat melihat bagaimana kulit yang berbeda bekerja dan merasakan sebelum membuat keputusan akhir Anda. Kulit demo termasuk blog pribadi, kafe, dan bar, toko fashion, portal perusahaan, aplikasi seluler, olahraga, dan kebugaran, dll.

Tata Letak Pre-made

EasyJet termasuk mengumpulkan ion tata letak pra-dibuat di setiap kulit demo dari galeri. Ini menjamin bahwa tata letak pra-desain akan sesuai dengan proyek web khusus-niche Anda, sehingga lebih mudah untuk membawa perubahan yang diperlukan ke halaman di masa depan. Misalnya, memilih kulit untuk blog bisnis, Anda akan diberikan kemungkinan memilih dari beberapa tata letak blog. Kerangka portofolio mencakup kumpulan tata letak portofolio, dan seterusnya.

Template Argenta dimuat dengan berbagai tata letak pra-desain, halaman siap-pakai, dan enam header yang siap disesuaikan dengan cara apa pun yang sesuai dengan kebutuhan pribadi atau bisnis Anda.

Visual Builder

EasyJet dimuat dengan WordPress Live Customizer dan pembangun halaman Elementor, yang menyediakan modifikasi bebas kode tata letak pra-desain. WordPress Live Customizer adalah salah satu solusi WYSIWYG paling populer yang memungkinkan Anda mengubah pengaturan situs umum, warna, tipografi, ikon sosial, tata letak halaman, menu, sidebar, widget, dll.

Selain itu, EasyJet dimuat dengan salah satu frontend drag-and-drop builder yang paling fungsional - Elementor. Ini membantu Anda untuk membuat konten unik tanpa keterampilan pengkodean tertentu. Pembangun dimuat dengan sejumlah besar elemen yang menyediakan penyesuaian desain tema yang cepat dan tanpa batas. Selain itu, Anda akan diberikan berbagai modul konten, yang membuatnya lebih cepat dan mudah untuk meningkatkan halaman situs Anda dengan video, tombol, pembagi, komidi putar, galeri gambar, slider, dll.

Argenta termasuk WordPress Visual Composer. Ini adalah salah satu ekstensi WordPress paling populer yang termasuk dalam paket tema secara gratis. Dengan bantuannya, Anda dapat melakukan perubahan apa pun pada tata letak tema tanpa kode. Struktur tata letak, header, dan footer dapat dipersonalisasi karena Anda cukup drag dan drop elemen halaman yang berbeda.

Plugin

EasyJet termasuk:
  1. Addon JetElements. Ini adalah modul luar biasa, yang dikembangkan untuk meningkatkan pengalaman Anda bekerja dengan pembuat halaman Elemen. Modul ini mencakup kumpulan fitur yang kaya yang dimaksudkan untuk membuat situs web Anda unik dan menarik. Ini termasuk korsel canggih, peta, teks dan kotak animasi, spanduk, merek, dan sejumlah elemen tambahan yang dimaksudkan untuk membantu Anda mengirimkan semua bagian data dengan cepat dan mudah.
  2. EasyJet berisi Importir Cherry Data. Ini adalah plugin yang akan membantu Anda mengekspor posting, komentar, widget, pengaturan, dll., Dari satu situs ke situs lainnya. Dengan satu klik tombol, plugin menghasilkan file XML yang dapat diimpor ke situs web lain.
  3. Seperti yang disebutkan di awal, plugin Cherry Wizard disertakan juga. Dengan bantuannya, Anda hanya perlu beberapa menit untuk mendapatkan semua komponen tema yang dipasang di situs Anda.
  4. Berkat plugin Contact Form 7, Anda dapat mengelola beberapa formulir kontak. Ini juga memungkinkan Anda menyesuaikan formulir dan isi surat secara fleksibel dengan markup sederhana.


Argenta menyertakan tiga plugin WordPress premium di bawah kap mesin.

  1. Komposer Visual disediakan untuk modifikasi kode gratis dari tata letak siap-pakai template tanpa perlu mengubah baris kode.
  2. Berkat Slider Revolusi bawaan, Anda akan dapat membuat slide yang sepenuhnya responsif yang menampilkan efek transisi yang dapat digunakan.
  3. ACF Pro adalah plugin bidang kustom lanjutan untuk pengembang web. Dengan bantuannya, Anda dapat membawa perubahan ke semua bagian situs Anda, sehingga mengambil kontrol penuh dari layar edit WordPress Anda dan data bidang kustom.

Ekstra

Hal-hal yang kedua tema yang diulas memiliki kesamaan antara lain:
  1. 100% tata letak ramah seluler
  2. Kompatibilitas lintas browser
  3. kompatibilitas dengan semua plugin dan ekstensi WordPress utama
  4. Dukungan WooCommerce
  5. SEO-keramahan
  6. Desain siap retina
  7. Kode yang valid

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAAC2c/2tPHlZb1Wzo/s512-c/photo.jpg

Monstroid2 vs Divi 3.0

Memilih tema WordPress yang sempurna untuk proyek web Anda? Ada sejumlah tempat di mana Anda dapat menemukan berbagai pilihan tema, tetapi apakah ada yang terbaik?

Mari kita bandingkan dua tema utama yang bisa Anda dapatkan di Templatemonster dan Tema Elegan - Pasar terkemuka di luar sana. [b] Tema yang kami bandingkan adalah Monstroid 2 yang baru diperbarui - tema penjualan terbaik oleh templatemonster, dan divi 3, tema oleh ElegantThemes.

Mari terjun langsung ke dalamnya!
Instalasi

Instalasi adalah awal Anda, dan saya yakin Anda ingin cepat, sederhana, dan bebas-huru-hara. Tim Monstroid2 memikirkan masalah ini dan mengembangkan Instalasi Wizard yang memandu Anda melalui proses ini dan melakukan semua pekerjaan untuk Anda. Jadi, Anda hanya perlu menjalankan Wizard dari dashboard WordPress Anda dan ikuti langkah-langkah sederhana yang ditawarkannya.

Tim Divi3 tidak begitu inventif dalam hal ini. Instal tema Divi seperti tema WordPress biasa: pertama, Anda menginstal dan mengaktifkan tema, kemudian Anda pergi untuk plugin dan contoh konten. Jika Anda memiliki pengalaman menginstal tema khusus di WordPress, Anda akan cepat mengatasinya, tetapi jika tidak, Anda dapat melewatkan sesuatu dan terjebak untuk beberapa waktu.

Elemen Desain dan Pra-Bangun


Setelah Anda mengunduh Monstroid 2 yang diperbarui, Anda akan memiliki perpustakaan ed unlimit yang dirancang secara profesional dan dipikirkan melalui kulit demo, halaman, dan blok konten. [I] [j] Lebih spesifik, Monstroid 2 mencakup lebih dari 20 skin yang cantik, dan akan dapatkan pembaruan mingguan dari pengembang, yang akan menambah satu kulit lagi. Itu juga lebih dari 20 laman beranda, dan lebih dari 500 bagian yang dibuat sebelumnya yang masuk dalam penemuan revolusioner oleh pengembang TemplateMonster - seorang Pembuat Struktur Modular. Ini adalah sistem new-age yang mengumpulkan semua elemen desain Monstroid 2 di satu tempat dan memungkinkan membangun situs web bata demi bata, cepat dan mudah.

Divi3 juga setelah membuat Anda bahagia dengan 20+ kulit prebuilt. Terlebih lagi, Anda akan mendapatkan akses ke.

Visual Builder

Monstroid 2 dibangun sepenuhnya dengan Elementor Page Builder, pembangun visual # 1 untuk WordPress yang memungkinkan Anda untuk mengedit hampir setiap elemen pada halaman di front-end. Ini juga berlaku dengan paket besar add-on Elementor, yang akan menambah lebih dari seratus widget ke yang default. Juga, konstruktor modular yang disebutkan sebelumnya dibangun di dalam Elementor, dan dapat diakses dengan mengklik satu tombol.

Divi3 menawarkan Divi Builder, editor visual lainnya. Anda mulai dengan lebih dari 46 modul konten prebuilt untuk melakukan diversifikasi konten situs Anda. Serta Elementor, itu adalah pembangun visual yang memungkinkan Anda untuk menambah dan mengedit elemen dan konten di halaman Anda secara real time.

Dukungan dan Dokumentasi

Tidak diragukan lagi, kedua tema terdokumentasi dengan baik. Namun, Anda mungkin masih mengalami masalah yang akan memperlambat implementasi proyek Anda. Tema monstroid2 dilengkapi dengan dukungan obrolan / telepon gratis seumur hidup, yang tersedia 24/7 dan memiliki beberapa ulasan positif. Perwakilan dukungan akan siap memberi Anda panduan tambahan langkah demi langkah tambahan dan bahkan memeriksa masalah di situs web Anda.

Tim divi3 tidak memprioritaskan dukungan berkualitas tinggi. Jika Anda terjebak dalam menyesuaikan Divi3, Anda harus mengajukan pertanyaan di forum Tema Elegant.

Penetapan harga

Monstrind2 dan Divi3 memiliki kebijakan harga yang sangat berbeda. Untuk Monstroid2, Anda membayar $ 75 sekali dan temanya adalah milik Anda untuk seumur hidup. Saya menemukan kebijakan sederhana ini hanya luar biasa.

Jika Anda hanya ingin membayar Divi3 sekali saja, Anda harus membelanjakan sebanyak $ 249. Atau, Anda dapat membayar Divi3 setiap tahun, menghabiskan $ 89 setiap tahun.

Kesimpulan

Anda telah mencapai akhir perbandingan Monstroid2 vs Divi3 ini. Apa yang bisa saya katakan? Ada beberapa aspek, di mana baik Monstroid2 dan Divi3 bagus (kulit, pengeditan visual, dll.) Namun, ada beberapa aspek yang diperhitungkan hanya dalam salah satu tema. Terlintas dalam benak saya, bahwa pendekatan tim Monstroid2 lebih banyak mencakup sampai taraf tertentu, tetapi terserah Anda untuk memutuskan, yang mana dari templat WordPress terbaik ini berfungsi paling baik untuk Anda.

Bagaimanapun, saya berharap semoga Anda berhasil membuat situs web Anda. Jika Anda ingin mengajukan pertanyaan atau memberikan umpan balik, Anda akan disambut!

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAAC2c/2tPHlZb1Wzo/s512-c/photo.jpg

Kode Warna HTML Lengkap dan Cara Menggunakannya

Selamat pagi, bagaimana kabar kalian, baik bukan, kali ini kami akan share Kode warna HTML dan Css Lengkap, Pengtahuan mengenai kode warna dan cara menggunakannya sungguh sangat penting dalam dunia web design atau dunia blogger, karena salah satu inti utama yang membuat website anda menarik adalah penggunaan dan perpaduan warna yang tepat dan sesuai, sehingga pemandangan tidak terganggu dengan adanya warna-warna kontras.

Pada artikel terakhir kami akan share bagaimana menggunakan atau mengimpelemtasikan kode warna tersebut, Let's Start..

000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
Nama Warna HTML HEX Color
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGrey #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
DarkOrange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DimGrey #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Grey #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGrey #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370DB
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #DB7093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
RebeccaPurple #663399
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGrey #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32

Bagaimana cara menggunakannya dalam project anda?

1. Background Color
<!DOCTYPE html>
<html>
<body>
 
 <h2 style="background-color:DodgerBlue;">Hello World</h2>
 <p style="background-color:Tomato;">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
 </p>

</body>
</html> 

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


2. Warna Teks
 <!DOCTYPE html>
<html>
<body>

 <h3 style="color:Tomato;">Hello World</h3>
 <p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
 <p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html> 

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


3. Border Color
 <!DOCTYPE html>
<html>
<body>

 <h2 style="border: 2px solid Tomato;">Hello World</h2>

 <h2 style="border: 2px solid DodgerBlue;">Hello World</h2>

 <h2 style="border: 2px solid Violet;">Hello World</h2>

</body>
</html> 

Hello World

Hello World

Hello World


4. Color Values
Dalam HTML, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA:
 <!DOCTYPE html>
<html>
<body>

 <h2 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h2>
 <h2 style="background-color:#ff6347;">#ff6347</h2>
 <h2 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h2>

 <h2 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h2>
 <h2 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h2>

</body>
</html> 

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)


5. RGB (Reg, Green, Blue) Value
 <!DOCTYPE html>
<html>
<body>

 <h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
 <h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
 <h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
 <h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
 <h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
 <h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>

</body>
</html> 

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)


6. Hex Value
 <!DOCTYPE html>
<html>
<body>

 <h2 style="background-color:#ff0000;">#ff0000</h2>
 <h2 style="background-color:#0000ff;">#0000ff</h2>
 <h2 style="background-color:#3cb371;">#3cb371</h2>
 <h2 style="background-color:#ee82ee;">#ee82ee</h2>
 <h2 style="background-color:#ffa500;">#ffa500</h2>
 <h2 style="background-color:#6a5acd;">#6a5acd</h2>

</body>
</html> 

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd


7. HSL (hue, saturation, lightness) Value
 <!DOCTYPE html>
<html>
<body>

 <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
 <h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
 <h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
 <h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
 <h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
 <h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>

</body>
</html> 

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)


8. Saturation
 <!DOCTYPE html>
<html>
<body>

 <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
 <h2 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h2>
 <h2 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h2>
 <h2 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h2>
 <h2 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h2>
 <h2 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h2>

</body>
</html> 

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)


9. Lightness
 <!DOCTYPE html>
<html>
<body>

 <h2 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h2>
 <h2 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h2>
 <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
 <h2 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h2>
 <h2 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h2>
 <h2 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h2>

</body>
</html> 

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)


10. RGBA (Red, Green, Blue, alpha) Value
 <!DOCTYPE html>
<html>
<body>

 <h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
 <h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
 <h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
 <h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
 <h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
 <h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>

</body>
</html> 

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)


11. HSLA (hue, saturation, lightness, alpha) Value
 <!DOCTYPE html>
<html>
<body>

 <h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2>
 <h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2>
 <h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2>
 <h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2>
 <h2 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h2>
 <h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2>

</body>
</html> 

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

Sekian share di atas semoga apa yang kami share bermanfaat bagi anda, jangan lupa share keteman dan kerabat kalian, jika ada yang belum paham betul denga penggunaan di atas silahkan tinggalkan komentar dibawah dan mulai berdiskusi dengan kami.

References :
1. https://www.w3schools.com/html/html_colors.asp
2. https://www.rapidtables.com/web/color/RGB_Color.html

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAAC2c/2tPHlZb1Wzo/s512-c/photo.jpg
close