Apa Itu HTML?

Sebelum belajar tentang apa itu HTML5, ada baiknya jika Anda memahami
pengertian HTML terlebih dahulu. Sesuai dengan namanya, HTML atau
hypertext markup language adalah sebuah bahasa markup yang menjadi salah
satu dasar pembuatan website.

Tidak seperti bahasa pemrograman yang bertugas mengolah input data

dengan logika yang telah ditetapkan, bahasa markup ditulis untuk
memberikan struktur pada sebuah halaman website. Agar konsep tersebut
dapat lebih mudah dipahami, perhatikanlah penjelasan berikut ini.

Cara Kerja HTML

Pada dasarnya, HTML digunakan untuk menunjukkan elemen-elemen yang

terdapat pada suatu halaman website. Setiap elemen ditunjukkan dengan tag
<> (pembuka) dan </> (penutup).

Kedua tag tersebut berisi inisial yang mewakili sebuah elemen halaman
website. Contohnya adalah <p> yang merepresentasikan sebuah paragraf.

Akan tetapi, tag tersebut hanyalah sebuah penanda. Agar memiliki konten,
Anda perlu memasukkan teks di antara tag <p> dan </p>. Dengan demikian,
Anda baru saja membuat sebuah paragraf.

Namun, tentunya HTML tidak hanya terdiri dari elemen-elemen. Untuk

memahaminya lebih lanjut, Anda dapat membaca panduan belajar HTML
kami.

Perbedaan HTML dan HTML5

Versi keempat dari HTML telah digunakan sejak 1997. Tentunya teknologi
internet dan website telah berkembang pesat sejak itu. Nah, HTML5 adalah
perbaikan dari HTML. Versi ini diciptakan sebagai solusi untuk kebutuhan
saat ini — salah satunya adalah dukungan untuk membuat website yang
bersifat mobile-friendly.

Namun, perbedaan HTML5 dari pendahulunya tidak berhenti di situ. Berikut

ini adalah keunggulan-keunggulan lainnya yang dimiliki HTML5:

1. Penanganan Error yang Lebih Baik

2. Kemudahan untuk Membuat Aplikasi Web
3. Syntax yang Lebih Sederhana
 4. Dukungan untuk Pembuatan Website Responsive
5. Support untuk Konten Video dan Audio
6. Dukungan untuk Grafik Vektor
7. Kompatibel dengan lebih Banyak Browser
8. Penyimpanan Informasi secara Lokal
9. Fokus Otomatis pada Kolom Form
10. Menjalankan JavaScript di Web Browser

1. Penanganan Error yang Lebih Baik

Bukalah sebuah halaman website pada beberapa web browser yang berbeda.
Bisa jadi, ada beberapa bagian dari tampilannya yang tidak terlihat sama di
masing-masing browser. Penyebabnya adalah kode HTML halaman tersebut
yang kurang sempurna untuk web browser tertentu.

Akan tetapi, kesalahan dalam penulisan kode HTML tidak bisa dihindari.
Oleh karena itu, sudah menjadi tugas developer web browser untuk membuat
algoritma parsing untuk menangani contoh error di atas.

Untungnya, HTML5 menawarkan sistem penanganan error yang lebih baik

dari pendahulunya. Hal ini pun mempermudah kinerja developer web
browser dalam pembuatan algoritma parsing.

Dengan kata lain, website yang ditulis dengan HTML5 membantu web
browser untuk menangani kode HTML yang tidak sempurna.

2. Kemudahan untuk Membuat Aplikasi Web

Sebelum dirilisnya HTML5, mayoritas website bersifat statis karena HTML

versi terdahulu tidak memiliki fitur bawaan yang mendukung konten dinamis
seperti animasi dan video. Untuk memungkinkannya, web developer masih
bergantung banyak pada Flash dan JavaScript.

Namun, banyak website saat ini yang tampilan dan kinerjanya menyerupai
aplikasi yang berjalan di luar web browser. Coba Anda lihat Twitter dan
YouTube sebagai contohnya.

Bahkan, kini sudah banyak website dengan model single page. Situs-situs ini
hanya menggunakan satu halaman yang ditulis menggunakan HTML, tetapi
dapat menampilkan konten interaktif. Contohnya Adalah produk-produk
Google seperti Gmail.
Semua itu dapat terjadi berkat berbagai elemen baru dalam HTML5 yang
menggantikan kinerja Flash dan JavaScript. Di samping itu, versi kelima ini
juga membuat konten dinamis bekerja dengan lebih lancar.

3. Syntax yang Lebih Sederhana

Sebelum implementasi HTML5, web developer harus menggunakan tag

<div> untuk berbagai macam elemen. Tag tersebut diperlukan untuk
menandai sebuah section pada halaman website.

Penggunaan tag tersebut tidak menjadi masalah jika Anda membuat sebuah
halaman yang sederhana. Akan tetapi, hal ini dapat merepotkan developer
ketika menulis kode untuk halaman website dengan struktur kompleks.

Untungnya, HTML5 mengganti penandaan section dengan syntax yang lebih

sederhana, seperti tag <nav> untuk menunjukkan menu navigasi website dan
tag <footer> yang merepresentasikan bagian footer halaman. Tentunya ini
menjadi salah satu manfaat HTML5 bagi web developer yang paling penting.

4. Dukungan untuk Pembuatan Website Responsive

Telepon seluler belum dilengkapi dengan web browser ketika HTML4

diluncurkan. Inilah alasan mengapa versi tersebut belum memiliki framework
untuk pembuatan website mobile yang efisien.

Akan tetapi, kebiasaan browsing telah berubah banyak sejak saat itu. Di 2018
saja, 58% akses website dilakukan melalui perangkat mobile.

Nah, HTML5 dibuat sebagai solusi untuk perubahan tersebut. Dengan

keluaran terbaru ini, web developer dapat membuat website responsive, yaitu
website yang tampilannya dapat diadaptasikan untuk tampilan mobile dengan
lebih mudah.

Baca Juga: Cara Membuat Template WordPress Responsive dengan

HTML5

5. Support untuk Konten Video dan Audio

HTML4 memang tidak memiliki dukungan yang baik untuk konten-konten

video dan audio karena kecepatan koneksi internet di akhir dekade 90-an
yang kurang memadai.

Maka dari itu, tidak aneh apabila pembuatan website berisi konten
multimedia dengan HTML4 tidak mudah dilakukan.
Sebagai solusi dari masalah tersebut, HTML5 diciptakan dengan fitur-fitur
yang mempermudahnya. Contohnya adalah atribut controls yang digunakan
untuk membuat tombol play dan pause pada sebuah media player.

6. Dukungan untuk Grafik Vektor

Seperti yang telah disebutkan sebelumnya, website responsive kini

merupakan sebuah keharusan. Namun, pembuatannya membutuhkan desain
visual yang ukurannya bisa diperbesar tanpa terdistorsi.

Grafik vektor, yang melingkupi file-file dengan tipe SVG, AI, dan EPS,
adalah solusinya. Tidak seperti file JPG atau PNG yang pecah ketika
diperbesar, kualitas grafik vektor tetap terjaga.

Karena HTML5 mempermudah pembuatan website responsive, dukungan

untuk grafik vektor pun sudah termasuk di dalam daftar keunggulannya.

Baca Juga: Cara Aman Mengaktifkan Dukungan SVG di WordPress

7. Kompatibel dengan lebih Banyak Browser

Saat ini sudah ada begitu banyak web browser yang tersedia. Tak hanya di
laptop dan komputer, tetapi juga di perangkat mobile.

Sebenarnya browser-browser tersebut masih dapat membaca website yang

ditulis dengan HTML versi lama. Akan tetapi, tidak semuanya dapat
menerjemahkan kode HTML4 dengan baik.

Di sisi lain, website yang dibuat dengan HTML5 telah dioptimalkan untuk
berbagai web browser yang ada saat ini.

8. Penyimpanan Informasi secara Lokal

Versi-versi HTML sebelumnya memang telah memungkinkan penyimpanan

informasi  pengguna website. Hal ini diperlukan, terutama untuk website
yang memiliki konten interaktif.

Akan tetapi, penyimpanannya dilakukan dengan sistem cookies yang

notabene hanya mampu menampung sedikit data.Pada HTML5, cara
penyimpanan informasi telah ditingkatkan dengan objek localStorage yang
menggantikan cookies dengan penyimpanan lokal browser pengguna
internet.

9. Fokus Otomatis Pada Kolom Form

Untuk memahami keunggulan ini, coba Anda buka sebuah halaman website
dengan form di dalamnya. Sebut saja halaman login sebuah website, sebagai
contohnya.

Jika kursor Anda langsung muncul di salah satu kolom form tersebut, berarti
website tersebut dibuat menggunakan HTML5.

10. Menjalankan JavaScript di Web Browser

Pada website yang menggunakan HTML versi sebelumnya, kode JavaScript

hanya bisa dijalankan pada thread antarmuka browser. Hal ini menyebabkan
konten interaktif pada halaman tidak berfungsi hingga halaman tersebut
selesai dimuat.

Kabar baiknya, HTML5 hadir dengan JS Worker API yang memungkinkan

JavaScript untuk berjalan di thread terpisah. Dengan demikian, pengguna
browser tetap dapat berinteraksi dengan halaman tersebut, seperti klik tombol
dan mengetik dalam sebuah kolom.

Belajar HTML5 (Cheat Sheet)

Bagi yang belum pernah belajar HTML5, versi terbaru ini mungkin cukup
membingungkan. Apalagi, ada banyak tag baru yang barangkali belum Anda
kenali. Untuk itu, di bawah ini kami sediakan “contekan” yang berisi daftar
tag beserta artinya. Selamat menyimak!

Document Outline

<!DOCTYPE> Versi HTML

<html> Dokumen HTML

<head> Penampung metadata halaman

<body> Konten halaman

Komentar

<!– –> Menuliskan komentar di dalam kode

Informasi Halaman

<base> Base URL

<meta> Metadata

<title> judul

<link> Menghubungkan halaman dengan sumber luar

<style> Tampilan sebuah elemen

<script> Menampung sebuah script

Struktur Dokumen

<h[1-6]> Heading

<div> Section halaman

<span> Menentukan warna sebuah teks

<p> Paragraf

<br> Line Break

<hr> Garis horizontal untuk menandai batas sebuah section

Link

<a href =””> Link halaman

<a href =”mailto”> Link email

<a href =”name”> Anchor

<a href =”#name”> Link ke anchor

Markup Teks

<strong> Membuat teks cetak tebal

<em> Membuat teks cetak miring

<blockquote> Kutipan dari sumber luar

<q> Kutipan pendek

<abbr> Singkatan (Prof., Dr.)

<acronym> Singkatan (HTML, JS)

<address> Alamat
<pre> Teks preformatted

<dfn> Definisi

<code> Kode

<cite> Membuat teks miring untuk menyebut judul sebuah karya

<del> Memberi garis pada teks

<ins> Menggarisbawahi teks

<sub> Teks subscript

<sup> Teks superscript

<bdo> Arah teks (kiri-kanan atau sebaliknya)

List

<ol> Ordered list

<ul> Unordered list

<li> Item sebuah list

<dl> List istilah beserta definisinya

<dt> Istilah yang didefinisikan

<dd> Definisi istilah

Form

<form> Form

<fieldset> Menyatukan beberapa kolom form dalam satu kategori

<legend> Memberi judul pada suatu <fieldset>

<label> Membuat daftar opsi berbentuk checkbox

<input> Membuat kolom form

<select> Membuat drop-down list

<optgroup> Membuat teks cetak tebal yang digunakan untuk mengklasifikasikan item dalam drop-down bo

<option> Membuat item dalam drop-down list

<textarea> Membuat kolom form dengan kapasitas tak terbatas

<button> Tombol

Tabel

<table> Tabel

<caption> Memberi judul pada suatu tabel

<thead> Header tabel

<tbody> Body tabel

<tfoot> Footer tabel

<colgroup> Mengkategorikan satu atau lebih kolom tabel

<col> Menentukan warna sebuah kolom

<tr> Baris tabel

<th> Cell header

<td> Cell biasa

Gambar

<img> Gambar

<map> Gambar dengan bagian yang dapat diklik

<area> Bagian gambar yang dapat diklik

Objek

<object> Objek multimedia yang disematkan pada halaman

<param> Parameter untuk mengontrol objek multimedia

Baca juga: 19 Editor HTML Terbaik yang Bisa Anda Coba!

Kode HTML Dasar untuk Blog
Berikut adalah 9 kode HTML dasar untuk blog.

1. Title Tag

Tag HTML yang pertama yaitu title tag. Title tag adalah judul dari sebuah
halaman atau website. Elemen ini mewakili isi konten, sehingga calon
pengunjung dapat mengetahui inti informasi sebuah konten.

Biasanya, Anda menemukan title tag sebagai judul pada daftar hasil
pencarian.

Selain itu, title tag dari halaman website juga muncul di tab yang dibuka
pengunjung.

Untuk seorang blogger, title tag merupakan elemen yang penting. Mengapa?
Karena, title tag merupakan salah satu daya tarik yang membuat website
mendapatkan banyak klik. Bahkan, title tag dapat meningkatkan Click-
through Rate (CTR) hingga 20-100%. Siegemedia sudah membuktikan ini
pada salah satu klien-nya, David’s Bridal.

Awalnya, David’s Bridal memasang keyword “Reception Favors” pada title

tag-nya. Sayangnya, keyword tersebut hanya mampu menghasilkan 500
volume per bulan. Siegemedia yang melihat celah ini pun mengganti
keyword tersebut dengan “Wedding Favors.” Alasannya, keyword ini lebih
potensial karena memiliki volume pencarian sebanyak 50.000. Alhasil, CTR
David’s Bridal pun dapat melejit hingga sesedikitnya 20%. Cukup dahsyat,
bukan?
Nah, sekarang, Anda mulai penasaran. Bagaimana sih cara membuat title tag
pada dokumen HTML? Mudah saja. Pada text editor, Anda cukup
memberikan kode HTML berikut:
<title> Masukkan judul </title>
2. Meta Description

Berikutnya, ada meta description. Meta description adalah tag HTML yang

berisi ringkasan singkat dari suatu konten website.

Dengan meta description, calon pengunjung akan mengetahui gambaran isi

konten. Jika mereka merasa konten tersebut dapat menjawab pertanyaan
mereka, maka mereka akan mengkliknya.

Mungkin Anda tak menyangka bahwa meta description mampu

meningkatkan angka konversi hingga 215%. Perusahaan benang
SweetGeorgia telah membuktikannya. Mereka meningkatkan performa SEO
dengan mengoptimasi meta description. 

Alhasil, halaman produk mereka dapat ditemukan dengan lebih mudah.

Karena itu pula, SweetGeorgia juga mengalami peningkatan pendapatan
sampai dengan 24% per tahunnya.

Nah, supaya Anda bisa membuat meta description pada dokumen HTML,
cukup tulis tag berikut:
<meta name="description" content="Masukkan deskripsi">
3. Heading Tag

Heading tag merupakan judul dan sub-judul yang terdapat pada halaman
website. Tag ini berfungsi untuk menunjukkan struktur konten. Dengan
struktur konten yang baik, maka informasi akan semakin mudah dibaca.

Keterbacaan informasi tentu memengaruhi performa SEO. Pertama, mesin

pencarian akan lebih gampang memahami konteks artikel sehingga website
bisa mendapat ranking teratas. Kedua, heading yang tepat juga
memungkinkan konten terpilih menjadi featured snippet.
Sebenarnya, ada enam tingkatan heading. Namun, yang sering digunakan
oleh blogger yaitu H1 hingga H3. Sekarang, kita akan membahasnya satu per
satu.

 <h1></h1> berfungsi sebagai judul utama konten. Letaknya pada

bagian teratas sebuah halaman blog
 <h2></h2> merupakan sub-judul berisi penjabaran dari topik utama
 <h3></h3> sampai <h6></h6> adalah poin-poin yang memuat
informasi pendukung untuk heading sebelumnya

Berikut contoh penggunaan H1 sampai dengan H4.

Nah, sekarang Anda sudah lebih paham penerapan heading tag. Namun,
mungkin Anda masih bertanya-tanya. Lalu, apa perbedaan H1 dengan title
tag? 

Jika title tag merupakan judul halaman, maka H1 adalah judul konten. Title
tag bisa ditemukan pada judul tab dan daftar hasil halaman mesin pencari. Di
sisi lain, H1 bisa Anda temukan di  judul pada halaman website. 

Anda bisa memiliki dua versi title tag dalam sebuah konten. Kami akan bahas
caranya di bagian akhir artikel ini.

4. Anchor Text dan Link

Anchor text merupakan potongan kata yang mengandung link tertentu.

Fungsi anchor text dan link, yaitu untuk mengarahkan pengunjung ke
halaman yang dibutuhkan. Misalnya: halaman referensi, landing page,
halaman blog, dan lain-lain.

Perlu diingat, anchor text dan link harus relevan dengan konteks konten. Itu
karena mesin pencari menggunakannya untuk mengetahui seberapa penting
dan terpercayanya konten  tersebut. 

Lebih detailnya, mesin pencari akan mengukurnya dari kredibilitas sumber

referensi, keterkaitan informasi, dan lain-lain. Semakin terjamin penting isi
konten, maka makin berpeluang mendapat ranking teratas pada hasil
pencarian.

Baca Juga: Apa itu Web Crawler?

Berikut coding dasar untuk membuat anchor text dan link:

<a href="link website"> anchor text </a>

Meski hanya membutuhkan tag HTML sederhana, Anda tetap perlu

mengetahui trik membuat anchor text, lho. Tujuannya supaya performa SEO
blog makin optimal dan membuka kesempatan supaya konten Anda yang lain
juga mendapatkan traffic.

Tertarik mempelajari trik pembuatan anchor text yang tepat? Yuk mampir
dulu ke artikel berikut → Apa itu Anchor Text & Bagaimana Cara
Membuatnya?

5. Nofollow

Dari luar, rupa nofollow mungkin mirip dengan anchor text dan link pada
umumnya. Anda akan melihatnya sebagai teks berwarna biru yang
digarisbawahi. Namun, sebenarnya keduanya cukup berbeda.
Bisa dibilang, tag nofollow memiliki fungsi berlawanan dengan anchor text
dan link yang biasa. Kode HTML nofollow justru membuat link pada
suatu website diabaikan oleh mesin pencarian. Alhasil, link tersebut tidak
berpengaruh terhadap ranking SEO.

Lho, terus gunanya apa?

Justru, tag HTML nofollow berfungsi untuk menjaga performa SEO.

Dengan memakai tag ini, blog Anda akan terhindar dari efek negatif jika
suatu halaman yang Anda beri link ternyata dianggap spam, penyebar virus,
atau performa SEO-nya buruk. Cukup bermanfaat, bukan?

Untuk membuat tag HTML nofollow, cukup gunakan kode berikut:

<a href="link website" rel="nofollow">anchor text</a>
6. Image Alt Text

Tag HTML berikutnya yaitu Image Alt Text. Coding dasar ini merupakan
elemen untuk memberikan informasi alternatif pada gambar. 

Image Alt Text akan membantu mesin pencari untuk memahami maksud

suatu gambar. Ini karena bot sebenarnya tidak bisa melihat gambar seperti
halnya manusia. 

Selain membantu proses crawling, teks ini juga yang dilihat pengunjung jika
gambar gagal ditampilkan.

Untuk membuat Image Alt Text, Anda membutuhkan tag HTML berikut.
<img alt="text">
7. Tag Kanonikal

Coding HTML dasar berikutnya yaitu tag kanonikal. Tag kanonikal berfungsi
untuk mengutamakan suatu halaman website daripada halaman lain yang
memiliki konten serupa ataupun yang menggunakan URL identik. Alhasil,
halaman dengan tag kanonikal akan lebih berpeluang muncul dalam hasil
pencarian Google.

Mungkin Anda ragu, memangnya sebesar apa sih efek konten duplikat dan
konten dengan URL yang sama? Tentu akibat buruknya cukup besar. Sebab,
Google akan kesulitan memilih versi mana yang harus dimunculkan. Bisa
jadi, justru konten Anda yang akan ditenggelamkan. Sayang sekali, bukan?
Oleh karena itu, sebaiknya setiap blogger menggunakan tag kanonikal untuk
konten-konten yang serupa. Jadi, meski ada duplikasi konten atau halaman
dengan URL identik, blog yang menggunakan tag kanonikal akan lebih
diutamakan muncul atau bisa diakses.

Berikut kode HTML untuk tag kanonikal:

<link href=”link website” rel=”canonical”>

8. Tag Paragraf

Tag paragraf merupakan elemen yang berisikan paragraf dalam blog. Setiap
paragraf selalu diawali dengan tag <p> dan ditutup dengan tag </p>.

Berikut coding dasar untuk membuat tag paragraf.

<p>Paragraf pertama</p>
<p>Paragraf kedua</p>
9. Tag Huruf Tebal (Bold)

Selanjutnya, ada tag HTML huruf tebal (bold). Fungsinya untuk menandai
teks dengan huruf tebal.

Kode HTML untuk memberikan efek huruf tebal cukup sederhana, yaitu:
<b>bold text</b>
10. Tag Huruf Miring (Italic)

Tag huruf miring berfungsi untuk membuat teks miring. Untuk

menghasilkannya, Anda hanya memerlukan kode HTML berikut ini.
<i>italic text</i>
Saatnya Mengeksplor Penggunaan HTML pada Blog!
Sekarang, Anda sudah memahami penjelasan untuk setiap kode HTML. Nah,
untuk memudahkan Anda, berikut kami berikan rangkuman kode HTML
dasar untuk blog.

Tag Kode HTML

Title tag <title></title>

Meta description <meta name=”description” content=””>

Heading tag <h1></h1><h2></h2><h3></h3>

Anchor text dan link <a href=”link website”> anchor text </a>

Nofollow <a href=”link website” rel=”nofollow”> anchor text</a>

Image Alt Text <img alt=””>

Tag kanonical <link href=”link website” rel=”canonical”>

Tag paragraf <p></p>

Tag huruf tebal (bold) <b></b>

Tag huruf miring (italic) <i></i>

Jadi, ternyata menggunakan coding dasar pada blog itu gampang, bukan?

Namun, jangan berpuas hati dulu. Anda masih bisa mempermudah
penggunaan coding dasar ini, lho!

Caranya yaitu dengan menggunakan Yoast. Yoast merupakan plugin untuk

memaksimalkan performa SEO. Dengan memakai plugin ini, Anda bisa
mengatur kode HTML dengan lebih mudah. 

Termasuk seperti yang kami bilang di awal: membuat dua versi title tag
dalam satu konten. Menarik, bukan?

Upload File HTML ke WordPress

1.Layanan Hosting

Tentu saja perlu layanan hosting jika Anda belum mempunyainya. Anda bisa
menggunakan layanan hosting lokal yang sudah terpercaya. Namun akan
lebih baik jika menggunakan layanan WordPress Hosting yang mendukung
penggunaan WordPress secara menyeluruh.
Pilihan lain, Anda bisa host website secara lokal (menginstall WordPress di
komputer lokal) dan kemudian memindahkannya lain waktu. Namun jika
menggunakan cara ini, Anda harus menginstal web server dan aplikasi
pendukung lainnya di dalam komputer lokal.

2. Code Editor

Anda membutuhkan code editor seperti Atom, Notepad++, Sublime, atau

aplikasi sejenis. Code editor akan membantu Anda membuka, mengedit, dan
menyesuaikan kode HTML sebelum diunggah ke web hosting.

Sedangkan jika menggunakan cara yang ketiga, setidaknya Anda

mempersiapkan biaya untuk mengeksekusinya. Sungkan juga kan jika
meminta bantuan ahli atau pengembang website dengan bayaran 2M
(Makasih, Mas!).

Supaya lebih jelas, berikut ini penjelasan lengkap setiap caranya. 

3 Cara Upload File HTML ke WordPress

Nah, berikut ini beberapa cara convert HTML ke WordPress secara detail.

1. Membuat Tema WordPress Secara Manual Dari Website HTML Statis

Cara ini membutuhkan akses ke dalam direktori penyimpanan website dan

juga sedikit kemampuan untuk membaca baris kode pemrograman.

Anda memerlukan akses untuk membaca berbagai macam file yang ada di
dalam direktori website. Nah, beberapa file (berisi baris kode) yang sudah
ada dapat Anda gunakan untuk membuat tema WordPress. Cukup sederhana
bagi Anda yang sudah mempunyai beberapa pengetahuan mengenai HTML,
CSS, dan PHP.

Jika tujuan Anda tidak hanya menyalin konten yang ada di HTML statis ke
dalam WordPress, tetapi juga menduplikasi desain saat ini, ini berarti Anda
harus membuat tema kustom Anda sendiri.

Tenang saja, caranya tidak sesulit yang dikira. Anda hanya perlu membuat
beberapa folder dan file, sedikit copy dan paste, dan mengunggahnya ke
dalam direktori tema WordPress.
Seperti yang sudah dijelaskan tadi, Anda akan membutuhkan code editor
seperti Atom, Sublime, atau Notepad++ untuk mengakses isi dari setiap file
HTML maupun file baru yang dibuat.
Langkah 1. Membuat Folder Tema Baru dan Beberapa File yang Diperlukan

Di dalam perangkat desktop, buat folder baru untuk menampung beberapa

file tema. Anda bisa memberikan nama apa saja ke folder tersebut.

Kemudian buat beberapa file yang diletakkan di dalam folder

tema; style.css, index.php, header.php, sidebar.php, dan footer.php.
Langkah 2. Menyalin CSS Saat Ini ke Dalam Stylesheet

Jika Anda menginginkan desain yang baru, tentunya Anda membutuhkan

paling tidak beberapa fungsi CSS yang harus Anda simpan. Jadi, hal pertama
kali yang perlu Anda lakukan adalah mengedit file style.css.

/*
Theme Name: Ganti dengan nama folder (ini untuk nama tema).
Theme URI: Ganti dengan lokasi folder tema.
Description: Deskripsi singkat mengenai tema Anda.
Version: 1.0
Author: Nama Anda
Author URI: Alamat website Anda.
*/

Caranya sangat mudah, Anda cukup menambahkan baris kode berikut di

bagian atas file.
Langkah 3. Memisahkan Konten HTML Saat Ini

Sebelum masuk ke langkah ini, ada beberapa catatan mengenai WordPress

yang perlu Anda tahu. WordPress menggunakan PHP untuk memanggil dan
menerima berbagai macam dari database. Setiap file yang digunakan di
dalam panduan singkat ini didesain untuk mengarahkan WordPress supaya
menampilkan bagian dan lokasi website yang perlu diberikan konten.
Misalnya saja di dalam file HTML statis Anda seluruh komponen (header,
footer, sidebar, dan isi konten) dalam satu file. Nah, setiap file yang dibuat
tadi bertujuan untuk memisahkannya. 

Jadi di bagian akhir nanti, Anda perlu mengatur beberapa bagian dari kode –
yang sudah terpisah menjadi beberapa file– supaya konten dapat tertata
dengan benar sesuai tampilan yang diinginkan. Sudah menangkap bagaimana
logikanya? Mungkin akan lebih jelas jika mempraktikkannya langsung.

Pertama, buka file index.html yang sudah ada. Highlight apa pun dari atas
file sampai  tag baris kode pembuka class=”main”. Copy dan paste bagian
tersebut ke dalam file header.php baru kemudian simpan dan tutup file
header.

Buka kembali file index.html yang sudah ada. Highlight bagian

elemen class=”sidebar” dan apa pun yang ada di dalamnya. Copy dan paste
bagian tersebut ke dalam file sidebar.php, save kemudian file sidebar.

Ketiga, salin semua bagian setelah sidebar kemudian copy dan paste ke
dalam file footer.php, jangan lupa save dan tutup file footer.

Terakhir, di dalam file index.html, highlight semua yang tersisa. Kemudian

copy dan paste ke dalam file index.php baru yang sudah dibuat. Simpan, tapi
jangan tutup terlebih dahulu file index.php.

Anda bisa menutup file index.html (bukan index.php) dan ikuti langkah
selanjutnya.
Langkah 4. Menyempurnakan File Index.php

Langkah selanjutnya, yaitu menyempurnakan file index.php di tema baru.

Anda hanya perlu memastikan bahwa seluruh fungsi yang tadinya dipisah-
pisah ke dalam beberapa file dapat disatukan kembali di dalam
file index.php.

Di bagian paling atas file index.php, tambahkan baris kode PHP di bawah

ini.

<?php get_header(); ?>

Kemudian di bagian paling bawah, tambahkan dua baris kode PHP di bawah
ini.
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Anda pasti sudah tahu kegunaan dari dua baris fungsi tersebut, kan? Benar!
Fungsi get_sidebar(); untuk memanggil file sidebar dan get_footer(); untuk
memanggil file footer dan mengambil konten yang ada di dalamnya.

Sampai di sini Anda sudah berhasil memanggil beberapa baris kode kumpul
menjadi satu di index.php. Index.php selalu dipanggil pertama kali ketika
website diakses. Itulah mengapa file ini bertugas untuk memanggil beberapa
fungsi dan menampilkan konten yang digunakan oleh WordPress. 

Terakhir, Anda perlu membuat apa yang disebut dengan Loop. Ini

merupakan bagian utama dari index.php di WordPress yang berguna untuk
menampilkan konten post ke pengunjung. Anda cukup menyalin baris kode
di bawah ini ke dalam file index.php di bagian tengah konten.

?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>
  <div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
    <div class=”post-header”>
      <div class=”date”><?php the_time( ‘M j y’ ); ?></div>
      <h2><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php
the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
      <div class=”author”><?php the_author(); ?></div>
    </div><!–end post header–>
    <div class=”entry clear”>
      <?php if ( function_exists( ‘add_theme_support’ ) ) the_post_thumbnail(); ?>
      <?php the_content(); ?>
      <?php edit_post_link(); ?>
      <?php wp_link_pages(); ?> </div>
    <!–end entry–>
    <div class=”post-footer”>
      <div class=”comments”><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ );
></div>
    </div><!–end post footer–>
    </div><!–end post–>
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
    <div class=”navigation index”>
      <div class=”alignleft”><?php next_posts_link( ‘Older Entries’ ); ?></div>
      <div class=”alignright”><?php previous_posts_link( ‘Newer Entries’ ); ?></div>
    </div><!–end navigation–>
<?php else : ?>
<?php endif; ?>

Langkah 5. Mengunggah Tema ke Dalam WordPress

Sekarang Anda hanya perlu membuat tema yang sudah dibuat di lokal tadi
dapat dimuat di WordPress. Caranya dengan mengunggahnya ke dalam
folder tema. Untuk melakukannya, Anda butuh akses ke dalam direktori
instalasi WordPress. Anda bisa menggunakan akses FTP atau
mengunggahnya langsung melalui cPanel. Anda bisa mengikuti artikel cara
menggunakan FTP jika sebelumnya belum pernah melakukannya.

Cukup unggah folder tema (dino-themes) yang sudah dimodifikasi tadi ke

dalam direktori WordPress ‘../wp-content/themes/’.

Setelah selesai, akses  halaman “WP Admin » Appearance » Themes” dan

Anda seharusnya menemukan tema baru di sana. Selanjutnya Anda hanya
tinggal mengaktifkan tema tersebut dengan klik tombol “Active”.

Jika sudah aktif dan bisa diakses dengan baik, Anda hanya perlu
menyesuaikan website WordPress baru dengan konten lama di website
HTML statis. 

2. Menginstall Tema Setengah Jadi Kemudian Migrasi Konten HTML

Cara ini mungkin menjadi pilihan yang paling sederhana dibandingkan

dengan cara lainnya. Jika sudah mempunyai layanan web hosting, Anda
hanya perlu menyisihkan sedikit pengeluaran untuk membeli tema premium
(berbayar).

Di samping tetap mempertahankan desain HTML statis yang ada saat ini,
Anda juga bisa menggunakan ribuan tema WordPress yang tersedia secara
gratis maupun yang premium. Namun saya menyarankan untuk
menggunakan tema premium karena mempunyai kualitas yang lebih baik
daripada tema gratis. 

Ada banyak sekali tema premium yang tersedia di WordPress. Sebelum

memutuskan menggunakan tema yang sesuai dengan kebutuhan, Anda bisa
mencari tema berdasarkan kategori terlebih dahulu. Anda bisa menyesuaikan
dengan konsep tema yang sama dengan website HTML statis atau
menggunakan konsep berbeda.
Setelah Anda memilih tema yang sesuai dengan kebutuhan, unduh tema
tersebut (biasanya akan berbentuk file zip) dengan cara klik install. Secara
otomatis tema akan terpasang di dalam koleksi tema WordPress. Untuk
mengaktifkan, Anda cukup masuk lagi ke halaman WP “Admin »
Appearance » Themes”. Cari nama tema yang sudah diinstal tadi kemudian
klik “Active”.

Setelah menyelesaikan ini, Anda sudah mempunyai tema WordPress yang

baru,tapi masih perlu beberapa penyesuaian. Ketika mengakses website
menggunakan tema yang sudah terpasang, Anda hanya akan melihat tampilan
konten yang kosong dan terkesan membosankan. Itu tidak masalah karena hal
tersebut dikarenakan belum ada konten sama sekali di website. Maka dari itu,
langkah selanjutnya Anda akan mengimpor konten  lama.

Anda bisa mengimpor konten HTML statis dengan mudah menggunakan

bantuan plugin gratis yang sudah tersedia di WordPress. Untuk
menginstallnya cukup akses “Dashboard » Plugins » Add New“ kemudian
cari plugin dengan nama ‘HTML Import 2’ dari Stephanie Leary. Setelah
plugin ini terinstall dan aktif, Anda bisa mengikuti panduannya untuk
mengimpor seluruh direktori halaman HTML statis, termasuk gambar.

Setelah selesai, Anda seharusnya sudah bisa mengakses website

menggunakan WordPress dengan format tema yang baru. jika membuat tema
Anda sendiri, seharusnya tampilan website Anda terlihat seperti yang
sebelumnya, hanya saja berjalan menggunakan CMS WordPress.

3. Membayar Pengembang Untuk Convert File HTML ke WordPress

Cara terakhir ini merupakan cara termudah karena Anda tidak perlu
melakukan apa pun, kecuali mengeluarkan biaya yang (terkadang) cukup
besar. Anda bisa membayar pengembang untuk convert HTML ke
WordPress. Biayanya tergantung siapa yang Anda rekrut dan seberapa
kompleks website HTML statis yang Anda punya. Mudah dan simpel.

Cara ini tentu saja sangat cocok bagi Anda yang tidak mempunyai cukup
waktu untuk convert file HTML ke WordPress. Atau, bagi Anda yang
sebelumnya membeli website HTML dan ingin beralih menggunakan
WordPress.

Penutup
Cara upload file HTML ke WordPress memang cukup mudah bagi yang
sudah familiar dengan bahasa pemrograman maupun web server. Hanya saja
bagi Anda yang belum pernah bersentuhan langsung, cara upload file HTML
ke WordPress terkesan sulit.

Untuk upload file HTML ke WordPress sendiri ada beberapa hal yang perlu
dipersiapkan seperti akses ke web server, aplikasi pendukung, dan mungkin
saja biaya untuk membeli tema premium maupun membayar pengembang
untuk memindahkan HTML Anda ke WordPress.

Sampai di sini dulu panduan kali ini. Jika masih ada yang perlu ditanyakan,
jangan sungkan untuk meninggalkan komentar melalui kolom di bawah ini.
Jangan lupa mengikuti sosial media kami untuk mendapatkan informasi
seputar dunia teknologi, bisnis, digital marketing, dan tentu saja layanan web
hosting. Semoga artikel ini bermanfaat!