19 Editor HTML Terbaik

Editor HTML adalah sebuah program komputer (tool) yang digunakan untuk membuat sekaligus mengedit kode HTML. HTML sendiri adalah singkatan dari Hypertext Markup Language. 

HTML digunakan untuk membuat halaman website berikut segala informasi di dalamnya. Pengetahuan tentang HTML diperlukan untuk dapat menyusun halaman website dengan baik meliputi heading, paragraf, tautan, dan lainnya.

Peran dari sebuah HTML editor adalah membuat pekerjaan seorang programmer lebih mudah dan cepat. 

Alasannya, HTML editor memiliki berbagai fitur otomatis seperti memasukkan tag pembuka dan penutup. Selain itu, terdapat fitur highlight syntax yang menunjukkan kode apa yang sedang dituliskan. Pada perkembangannya, fitur yang dihadirkan sebuah HTML editor bisa sangat melimpah. 

Inilah yang membedakan HTML editor dengan teks editor biasa seperti Notepad. Seperti Anda ketahui, Anda bisa mengetikan kode HTML pada Notepad. Namun fungsi yang ditawarkan oleh HTML editor jauh lebih lengkap. 

Jenis HTML Editor

Secara umum, terdapat dua jenis HTML editor, yaitu tekstual, dan WYSIWYG (What You See is What You Get).

Sesuai namanya, HTML editor tekstual berbasis teks. Jenis editor ini cocok untuk para programmer yang sudah mahir. Kelebihan editor tekstual adalah kemudahan programmer untuk memegang kendali penuh atas kode HTML yang sedang dikerjakannya. 

Namun, editor ini tentu saja tidak memiliki fitur untuk menampilkan preview (tampilan nyata) dari website yang tengah dikerjakan. 

Sebaliknya, editor WYSIWYG memungkinkan programmer “mengintip” hasil coding lewat live preview. 

Jenis editor ini sudah memiliki tampilan antarmuka yang tentu memudahkan bagi web developer pemula. Tak kalah penting, hadirnya fitur drag-and-drop di beberapa editor, memungkinkan pekerjaan bisa dilakukan lebih cepat. 

Di sisi lain, HTML editor juga terbagi menjadi online dan offline. Tidak ada perbedaan fungsi. 

Hanya saja, editor online memungkinkan Anda melakukan coding melalui browser langsung seperti saat menggunakan Froala Online HTML editor dan sejenisnya. Sedangkan editor offline mengharuskan Anda melakukan instalasi terlebih dahulu.

19 HTML Editor Terbaik yang Layak Anda Coba

Berikut ini beberapa editor HTML yang telah kami rangkum. Sebagian besar bersifat multiplatform atau bisa digunakan di berbagai sistem operasi. 

Kami merangkumnya berdasarkan pengguna, fitur unggulan dan tampilannya (user interface). 

1. Notepad++

Notepad++ dibuat untuk sistem operasi Windows. Boleh dikatakan kehadiran Notepad++ ini untuk melengkapi kekurangan dari teks editor bawaan Windows, Notepad. 

Anda bisa mengunduh dan menggunakan editor ini dengan gratis. 

Notepad++ memiliki tampilan yang sederhana dan cukup ringan. Namun, Notepad++ tetap memiliki fitur utama yang dibutuhkan untuk mengedit HTML seperti highlight syntax dan juga autocomplete. 

Jika ingin mengedit beberapa dokumen dalam beberapa tab berbeda, Anda bisa memanfaatkan fitur multi-document Notepad++.

OS: Windows.

Harga: Gratis.

2. Atom

Tak lengkap jika tidak menyertakan Atom sebagai HTML editor terbaik. Kenyataanya, Atom tidak hanya bersifat open source dan gratis, namun juga mendukung semua sistem operasi (multiplatform). Kian hari pengguna Atom kian banyak.

Apa yang membuat Atom istimewa? Teletype salah satunya. Fitur ini memungkinkan beberapa web developer berkontribusi pada kode tertentu secara bersamaan. Selain itu, Atom dikembangkan oleh orang-orang di balik GitHub. Jadi, kompatibilitasnya dengan GitHub jangan diragukan. 

Atom dibuat untuk melengkapi fungsi-fungsi yang belum dimiliki HTML editor sebelumnya. Artinya, semua fiturnya lengkap dan tinggal Anda tentukan mana package yang ingin Anda pasang.

OS: Windows, Linux, dan macOS.

Harga: Gratis.

3. Brackets

Brackets adalah sebuah HTML editor yang tangguh, namun tetap ringan. Apa pun sistem operasi yang Anda pakai, Brackets bisa menjadi HTML editor andalan Anda. Plus, Brackets tidak mengharuskan Anda membayar sepeser pun. 

Brackets mungkin terlihat sangat simpel. Namun, beragam fitur yang dimilikinya menjadikannya favorit para web developer. Tidak semua fitur terpasang secara default. Anda bisa menambah fitur tambahan (extension) jika membutuhkannya. 

Salah satu fitur unggulan editor ini adalah inline editor. Dengan fitur ini Anda bisa langsung mengedit CSS dari HTML tag yang Anda klik dengan pintasan Control+E. Selain itu, Brackets memiliki live preview yang bisa Anda gunakan untuk melihat setiap perubahan coding yang Anda lakukan.

OS: Windows, Linux, dan macOS.

Harga: Gratis.

4. Sublime Text

Anda mungkin tidak percaya bahwa Sublime Text adalah HTML editor yang ringan. Padahal fitur yang dimilikinya sangat lengkap.

Tersedia untuk semua sistem operasi, editor ini bisa Anda unduh dengan gratis. Tapi, Anda harus membeli lisensi untuk dapat terus menggunakanya. Untuk personal, harga yang ditawarkan sebesar $80.

Terlalu mahal? Tidak juga jika Anda mengetahui fitur yang ditawarkan. Apa saja? Yang paling terkenal adalah multiple selection. Fitur ini memungkinkan Anda membuat banyak perubahan dalam sekali edit. 

Selain itu, Sublime Text juga memiliki beragam fitur otomatis seperti autosave dan autocompletion. Lalu, Anda juga bisa menggunakan fitur command palette, split editing, dan pilihan kustomisasi yang lengkap. 

OS: Windows, Linux, dan macOS.

Harga: $80 untuk pengguna personal. 

5. Light Table

Light Table merupakan HTML editor yang dibuat untuk semua sistem operasi. Sesuai namanya, Light Table merupakan editor yang ringan dengan tampilan yang apik.

Anda bisa mengunduh dan menggunakan Light Table secara gratis dan mendapatkan beragam fitur yang luar biasa. Salah satunya adalah watches. Fitur ini memungkinkan Anda mengamati tiap perubahan dari value kode HTML yang Anda inginkan. 

Selain itu, Anda akan menemukan fitur command pallete yang memudahkan Anda mengeksekusi perintah dan fuzzy finder yang memungkinkan Anda melakukan pencarian dengan cepat. 

Tak hanya itu, Light Table juga tidak akan merepotkan Anda dengan update program secara manual. Sebab, program ini dilengkapi dengan fitur autoupdate. 

OS: Windows, Linux, dan macOS.

Harga: Gratis.

6. Bluefish

Satu lagi HTML editor yang multiplatform dengan fitur yang lengkap, yaitu Bluefish. 

Sebenarnya, Bluefish ditujukan untuk programmer atau web developer yang sudah mahir. Namun, pemula juga bisa menjajal kemampuan dari editor yang simpel ini.

Selain fitur umum seperti autocompletion dan autotag, Bluefish juga membanggakan fitur search-and-replace dan full-screen editing mereka. Jika Anda khawatir akan kehilangan pekerjaan Anda, editor ini telah melengkapi diri dengan autosave dan autorecovery option.

OS: Windows, Linux, dan macOS.

Harga: Gratis.

7. Aptana Studio

Jangan salah, Aptana Studio bukan HTML editor biasa. Aptana Studio bisa digunakan untuk coding bahasa pemrograman lain seperti JavaScript, Ruby, hingga Python. 

Aptana Studio bersifat multiplatform. Editor ini memiliki segudang fitur yang bisa Anda andalkan untuk membangun website dengan mudah. Anda juga tidak perlu mengeluarkan biaya untuk menggunakan Aptana Studio, alias gratis. 

Beberapa fitur unggulan Aptana Studio antara lain CodeAssist yang menunjukkan tingkat dukungan dari browser populer. Selain itu, Anda juga akan dimanjakan dengan Integrasi Git dan kustomisasi lain yang memudahkan pekerjaan Anda. 

OS: Windows, Linux, dan macOS.

Harga: Gratis.

8. CoffeeCup

Jika Anda ingin membangun sebuah website yang cantik, CoffeeCup bisa menjadi teman Anda dalam bercoding ria. 

HTML editor ini bisa digunakan untuk Windows maupun macOS. Anda bisa menggunakan versi gratis dari CoffeeCup dengan fitur terbatas. Untuk mendapatkan fitur premium Anda harus membeli versi lengkap seharga $29.

CoffeeCup memiliki beberapa fitur yang penting seperti tag library, validasi HTML yang penting untuk membuat website ramah SEO, hingga Split-screen preview untuk kemudahan melihat hasil coding yang dilakukan.

OS: Windows dan macOS.

Harga: $29 untuk versi fitur lengkap.

9. BBEdit

Barebones Edit (BBEdit) adalah HTML editor yang cukup populer di kalangan pengguna sistem operasi macOS. 

Anda bisa mengunduh BBEdit dengan gratis dan menikmati semua fiturnya selama 30 hari. Sesudahnya, Anda harus membeli lisensi pribadi sebesar $49,99.

Dengan harga tersebut, Anda akan mendapatkan sebuah HTML editor dengan fitur pencarian, edit, dan manipulasi teks yang luar biasa. Selain itu, Anda bisa menikmati fitur syntax coloring dan code folding yang memungkinkan Anda menyembunyikan bagian dari file yang baru diedit.

Tak hanya itu, fitur umum seperti autotext dan autocode completion juga disertakan. 

OS: macOS.

Harga: Free Trial 30 hari. $49,99 untuk personal.

10. TextMate

Satu lagi HTML editor terbaik yang dibuat untuk pengguna macOS, TextMate. Editor ini juga sering digunakan untuk bahasa pemrograman lain seperti Java dan Ruby.

TextMate bisa Anda unduh secara gratis. Namun, untuk menggunakannya Anda harus membeli lisensi personal sebesar $48,75.

Editor ini kaya akan fitur yang fungsional. Sebut saja Multiple Caret yang memungkinkan Anda melakukan beberapa perubahan sekaligus. Lalu, ada fitur Snippet yang akan memudahkan Anda untuk memunculkan teks atau kode yang sering digunakan dengan cepat. 

Tidak hanya itu, fitur Macros yang dimiliki TextMate dapat membantu Anda bekerja lebih efisien. Jika ada beberapa langkah yang sering Anda lakukan, Anda bisa menyimpannya (record), lalu gunakan kembali saat diperlukan dengan cepat. 

OS: macOS.

Harga: Free Trial 30 hari. $48,75 untuk lisensi single user.

11. BlueGriffon

BlueGriffon merupakan sebuah HTML editor yang ditenagai oleh Gecko, mesin di balik Mozilla Firefox. Tentu Anda sudah dapat membayangkan bagaimana performa kinerjanya, bukan?

HTML editor ini multiplatform dan menyediakan versi gratis dengan fitur terbatas. Harga lisensi personalnya sendiri adalah €75.

Alasan banyak web developer menggunakan BlueGriffon adalah tampilannya yang intuitif, selain fiturnya yang lengkap. Jangan lupa, editor ini adalah jenis WYSIWYG. Namun, dengan adanya fitur Dual View, Anda bisa berpindah dari tampilan visual ke kode HTML dengan mudah, cukup klik tombol dual view di bawah halaman.

Beberapa fitur lain yang dimiliki oleh BlueGriffon adalah: Google Font, Font Squirrel font manager, full screen mode, mobile viewer, dan eyedropper yang memudahkan dalam memilih warna yang Anda inginkan.

OS: Windows, Linux, dan macOS.

Harga: Gratis atau €75 untuk lisensi basic dengan tambahan fitur.

12. jEdit

Jika Anda membutuhkan HTML editor terbaik yang tidak hanya gratis namun mendukung semua sistem operasi, jEdit layak Anda coba. 

HTML editor ini memiliki fitur syntax highlighting yang mendukung 130 tipe file seperti dsssl yang terkait dengan stylesheet dan erlang untuk kecocokan pola (pattern matching). Selain itu, ada banyak fitur lain seperti bracket matching, auto indentation, hingga code folding.

Singkatnya, semua yang Anda butuhkan untuk mengembangkan website bisa dipenuhi oleh editor ini. Namun, jika masih kurang, Anda bisa menambahkan plugin untuk fungsi tambahan. Mereka memiliki lebih dari 200 plugin seperti ConfigurableFoldHandler, DragAndDrop, ClassBrowser, dan lainnya. 

OS: Windows, Linux, dan macOS.

Harga: Gratis.

13. Icecoder

Satu kata yang tepat menggambarkan HTML editor ini adalah beda! 

Ya, Icecoder merupakan sebuah HTML editor berbasis browser yang bisa dijalankan secara online maupun offline. Artinya, Icecoder memberikan Anda kemudahan untuk melakukan coding di mana saja selama ada koneksi internet!

Apakah hanya itu kelebihannya? Tentu tidak. Fitur unggulan banyak disematkan dalam editor ini seperti Multiple Cursor. Dengan fitur ini, Anda bisa melakukan banyak perubahan dalam satu kali edit. Selain itu, pekerjaan Anda akan terproteksi dengan baik berkat hadirnya fitur Multi-user Login sehingga hanya yang berhak yang bisa mengakses file Anda. 

Tidak hanya itu, Anda juga bisa mengganti tampilan dengan 25 tema yang disediakan. Semua fitur di atas semakin melengkapi beragam fitur umum seperti autocompletion, tag wrapper, find-and-replace, dan banyak lagi.

OS: Windows, Linux, dan macOS.

Harga: Gratis.

14. KomodoEdit

KomodoEdit merupakan salah satu HTML editor terbaik yang layak masuk dalam daftar kami. Sebab, selain bisa diunduh secara gratis dan mendukung multi platform, HTML editor ini memiliki banyak fitur yang sangat berguna. 

Beragam fitur yang bisa Anda nikmati dari HTML editor gratis ini antara lain Autocompletion dan Calltips yang memudahkan Anda ketika coding. Lalu, Anda juga bisa memanfaatkan Multiple Selection untuk mengedit HTML dengan lebih cepat. Jika Anda ingin mengetahui perubahan apa yang telah dilakukan, fitur Track Changes akan sangat berguna. 

KomodoEdit merupakan bagian dari KomodoIDE yang menawarkan fitur lebih banyak bagi profesional seperti live preview, clipboard manager, dan Slack sharing. 

Namun, KomodoEdit sendiri sudah merupakan HTML editor yang powerfull.

OS: Windows, Linux, dan macOS.

Harga: Gratis.

15. Geany

Sebenarnya Geany bukanlah HTML editor biasa. Tepatnya, ia adalah IDE (Integrated Development Environment) yang mendukung lebih dari 50 bahasa pemrograman.

Geany banyak digunakan untuk mengembangkan website karena editor ini simple, ringan, dan intuitif/mudah dipahami. Geany merupakan multiplatform editor yang bisa digunakan secara gratis. 

Bagi Anda yang menguasai HTML pasti mengetahui bahwa lupa closing tag bukanlah hal yang baik. Untungnya, Geany memiliki fitur autoclosing tags. Ditambah dengan fitur umum lain seperti syntax highlighting dan auto completion, HTML editor ini layak Anda coba. 

Jika menginginkan fitur lain, ada banyak fitur unggulan yang dimiliki. Sebut saja, code folding, snippets, calltips, dan code navigation. Semuanya tersedia. 

OS: Windows, Linux, dan macOS.

Harga: Gratis.

16. NoteTab

Anda tentu tidak beranggapan kami akan melewatkan NoteTab, bukan? Anda benar, Notetab merupakan salah satu HTML editor terbaik dengan beragam keunggulan yang dimiliki. 

NoteTab memiliki versi gratis (Light) dan berbayar (Std dan Pro). HTML editor ini dikhususkan bagi pengguna Windows. Jika menggunakan Linux, Anda bisa menginstalnya melalui WINE.

Apa yang membuat NoteTab layak jadi pilihan Anda? NoteTab bisa membantu Anda bekerja lebih cepat dengan berbagai fitur seperti Clips (snippet), HTML to Text Conversion atau Text to HTML Conversion, dan autocomplete.

Selain itu, NoteTab juga memungkinkan Anda melakukan drag-and-drop sehingga membuat pekerjaan Anda lebih cepat. 

Satu lagi, jika Anda menginginkan HTML editor dengan syntax highlight yang simple, bukan warna-warni seperti HTML editor lain, NoteTab bisa jadi pilihan Anda. 

OS: Windows.

Harga: Gratis (Light), dan $39,95 (Std dan Pro).

17. UltraEdit

UltraEdit adalah salah satu HTML editor terbaik yang cukup tangguh dengan beragam fitur yang dimilikinya. 

Sayangnya, Anda tidak bisa menggunakan UltraEdit secara gratis. Setelah masa uji coba (trial) 30 hari, Anda harus membeli lisensi untuk terus menggunakan multiplatform HTML editor ini.

Satu hal yang membuat UltraEdit layak dijadikan pilihan adalah kemampuannya untuk melakukan load file tanpa khawatir terjadi crash. Selain itu, HTML editor ini juga hadir dengan beragam tema yang bisa mengurangi kebosanan dalam melakukan coding. Tidak hanya itu, UltraEdit juga support FTP/SFTP. 

Dari sisi fitur, UltraEdit memiliki fitur smart templates yang mendukung code completion, dan auto-expanding text yang mudah dikustomisasi. HTML editor ini juga telah memiliki fitur automatic HTML detection, code folding, dan indentation. Lengkap, bukan?

Tidak hanya itu, UltraEdit sudah mendukung live HTML preview, drag-and-drop, HTML Tidy, dan CSS color tips.

OS: Windows, Linux, dan macOS.

Harga: Free Trial 30 hari. $79.95 biaya langganan per tahun. 

18. Visual Studio Code

Visual Studio Code dikembangkan oleh Microsoft. Namun, code editor ini bisa digunakan oleh semua platform, tidak hanya Windows. Plus, Anda bisa menggunakannya secara gratis. 

Visual Studio Code memiliki semua fitur yang diperlukan untuk mengedit kode HTML dengan baik. Sebut saja Intellisense. Fitur ini berfungsi sebagai code suggestion berdasarkan konteks saat melakukan coding. Selain itu, Anda juga disuguhi fitur auto-closing tags agar menghasilkan kode HTML yang baik. 

HTML editor ini juga memiliki Color Picker yang berguna untuk mengatur style HTML dan mouse hover yang memberikan Anda informasi ketika mengarahkan kursor ke kode tertentu. 

Jika semua fitur di atas masing kurang, Anda masih bisa menambahkan fungsi lain dengan memasang extension yang bisa Anda pilih di Marketplace mereka.

OS: Windows, Linux, dan macOS.

Harga: Gratis.

19. Adobe Dreamweaver

Dikembangkan pertama kali oleh Macromedia, Adobe Dreamweaver telah menjadi sebuah program yang tangguh untuk membangun sebuah website. Ya, seperti halnya Aptana Studio, Adobe Dreamweaver bukan HTML editor biasa!

Biasanya seorang web designer akan membuat desain halaman website, lalu langkah codingnya dilakukan dengan Adobe Dreamweaver. Oleh karena itu, HTML editor ini memiliki semua fitur lengkap untuk mengedit HTML. 

Fitur pertama adalah Dual View. Anda bisa dengan mudah beralih dari code view (tekstual) ke design view (WYSIWYG). Lalu, ada code suggestion dan code highlighting yang mustahil tidak disertakan dalam editor ini. Ingin mengerjakan banyak file sekaligus? Fitur Multiple Tabs yang terkoneksi antar file akan memudahkan dan mempercepat Anda dalam bekerja. 

Jika Anda ingin memiliki sebuah HTML editor dengan fungsi yang lengkap untuk mengembangkan website, HTML editor ini layak jadi pilihan. Namun, jika tampilan yang simple lebih Anda butuhkan, editor lain lebih pas tentunya. 

OS: Windows, Linux, dan macOS.

Harga: Gratis.

Kenapa Perlu HTML Editor?

Setelah Anda mengetahui contoh HTML editor di atas, Anda tentu sudah mampu menebak kenapa menggunakan HTML editor sangat berguna, bukan?

1. Lebih Mudah untuk Belajar-Praktik

Bagi Anda yang baru saja belajar HTML tentu belum semua kode HTML Anda kuasai dengan baik. Nah, jika Anda hanya menggunakan teks editor biasa, Anda akan terkendala jika lupa kode yang Anda butuhkan. 

Dengan menggunakan HTML editor Anda akan terbantu dengan fitur autocompletion atau autosuggestion yang sudah banyak dimiliki hampir semua HTML editor. Maka, proses belajar HTML Anda bisa lebih efektif karena dibarengi dengan praktik langsung.

2. Lebih Cepat dalam Menyelesaikan Pekerjaan

Ketika melakukan coding Anda tentu akan membuat beberapa kesalahan. Namun, jika Anda bisa mengetahui kesalahan itu dengan cepat, Anda bisa langsung memperbaikinya. Dengan kondisi ini, pekerjaan Anda bisa diselesaikan dengan cepat. 

HTML editor membantu Anda dengan syntax highlighting untuk menunjukkan kode yang sedang Anda kerjakan. Hal ini bisa menghindarkan Anda dari kesalahan ketik. Lalu, Anda juga bisa melihat hasil coding sementara yang Anda lakukan melalui fitur live preview. 

3. Banyak Versi Gratis yang Bisa Digunakan

Sebuah HTML editor memiliki beragam fitur dibanding teks editor biasa. Namun, bukan berarti Anda harus mengeluarkan biaya untuk menggunakannya. 

Dari daftar yang kami berikan di atas, banyak HTML editor yang bisa Anda unduh dan gunakan dengan gratis. 

Kami sudah memberikan daftar HTML editor terbaik yang bisa Anda gunakan. Tentu Anda tak lagi bingung dalam menentukan pilihan. 

Kami menyarankan Anda memilih HTML editor sesuai kebutuhan dan tingkat keahlian coding Anda. 

Jika Anda seorang pemula, Anda bisa memilih HTML editor WYSIWYG atau yang memiliki fitur dual view. Alasannya, agar Anda bisa belajar sekaligus praktik. Selain itu, Anda bisa menggunakan HTML editor yang gratis karena tentunya sudah mencukupi untuk kebutuhan coding Anda.

Sebaliknya, jika Anda sudah mahir, menggunakan HTML editor yang tekstual tentu lebih sesuai. Sebab, Anda bisa me-manage coding Anda dengan lebih leluasa.

Sumber:

niagahoster.co.id

Read More

Cara Membuat WordPress (Tutorial Lengkap)

WordPress: CMS Paling Populer

WordPress adalah CMS atau platform pembuatan website paling populer di dunia. Lebih dari 30 persen website di dunia dibuat menggunakan WordPress. WordPress bisa menjadi begitu populer karena kemudahan penggunaan dan fitur-fiturnya yang lengkap.

Pengguna WordPress tidak terbatas pada blogger pribadi saja. Banyak perusahaan besar yang mempercayakan WordPress sebagai platform pembuatan websitenya. SONY Music, Bata, Mercedes Benz, The New York Times Company, dan The Walt Disney adalah beberapa contoh perusahaan ternama yang menggunakan WordPress.

Semakin banyak pengguna WordPress, semakin banyak pula tutorial dan tips optimasi WordPress tersebar di internet. Forum-forum pengguna WordPress bertebaran di internet. Tutorial WordPress juga mudah ditemukan. Hal ini memudahkan bagi siapapun untuk belajar cara membuat website dengan WordPress.

WordPress.com VS WordPress.org

Anda juga perlu tahu tentang perbedaan WordPress.com dan WordPress.org sebelum mempelajari cara membuat website dengan WordPress. Perbedaan dasar di antara keduanya terletak pada host aktualnya.

Jika menggunakan WordPress.com, Anda tidak perlu pusing-pusing mengeluarkan uang untuk hosting dan domain untuk website karena sudah disediakan langsung dari WordPress secara gratis. Namun, fasilitas di WordPress.com terbatas. Domain Anda harus kustom dari WordPress, yaitu di belakangnya terdapat wordpress.com (www.namaanda.wordpress.com).

Berbeda dari versi gratisnya, WordPress.org memberikan keleluasaan dan berbagai fasilitas lain. Anda bisa memiliki website dengan domain sendiri seperti www.namaanda.com, bisa menentukan kapasitas penyimpanan sesuai kebutuhan, dapat memasang plugin, memasang iklan AdSense, dan menginstall tema apa saja.

Cara Membuat WordPress

8 langkah untuk membuat blog WordPress, yaitu:

• Install WordPress
• Mengelola Dashboard WordPress
• Install Tema WordPress
• Install Plugin 
• Posting Artikel
• Membuat Halaman WordPress
• Optimasi WordPress
• Setting keamanan WordPress

Agar lebih jelas, berikut ini penjelasan beberapa poin untuk membuat blog menggunakan platform WordPress.

Langkah 1: Cara Install WordPress

Menginstall WordPress dapat dilakukan dengan berbagai cara, baik otomatis maupun manual. Berikut adalah cara memasang WordPress menggunakan auto installer dari Niagahoster.

Cara ini adalah yang paling mudah, yaitu menggunakan fitur auto install website WordPress dari Niagahoster. Sebenarnya Anda bisa langsung mendapatkan fitur tersebut dengan mencentang kolom Gratis Auto Install Website WordPress sebelum checkout ketika membeli wordpress hosting di Niagahoster.

Akan tetapi, jika Anda lupa mencentang kolom ‘Gratis Auto Install Website WordPress’, tidak perlu khawatir karena Anda tetap bisa mendapatkan fitur tersebut melalui Member Area

Berikut adalah langkah-langkah install WordPress di Niagahoster:

1. Login ke Member Area

Jika sudah membuat akun di Niagahoster, Anda bisa login di sebelah pojok kanan atas situs Niagahoster.

2. Pilih Menu Hosting dan Domain

3. Pilih Hosting

Klik hosting yang ingin Anda install dengan website WordPress.

4. Install WordPress

Pilih Install Website untuk memasang WordPress secara otomatis ke akun hosting Anda.

5. Klik Install

6. Isi Data

Isi data-data yang diminta, dari nama domain, judul website, deskripsi website, admin user, hingga admin password. Klik Install dan website WordPress Anda sudah siap untuk dipakai

WordPress Lebih Optimal dengan LiteSpeed & WP Accelerator

Langkah 2: Mengelola Dashboard WordPress

Setelah sukses memasang WordPress, langkah selanjutnya yang perlu Anda lakukan adalah membuka dashboard atau dasbor WordPress. Melalui dasbor WordPress Anda bisa mengelola website Anda dengan mudah, dari mengganti tema, menambah plugin, menambah halaman, hingga menerbitkan blogpost.

Cara membuka dasbor WordPress tidak sulit. Anda hanya perlu menambahkan wp-admin di belakang domain Anda. Misalnya, www.namaanda.com/wp-admin. Setelah itu, di layar Anda akan muncul seperti ini.

Masukkan username dan password yang sudah Anda buat ketika menginstall WordPress di langkah sebelumnya. Jika login Anda sukses akan muncul dasbor seperti di bawah ini.

Dasbor WordPress terbagi menjadi tiga bagian utama, yaitu toolbar (1), menu navigasi (2), dan area kerja (3).

Di toolbar Anda bisa mengelola profil Anda di pojok kanan. Selain itu Anda juga akan mendapatkan notifikasi berapa banyak komentar yang Anda dapatkan melalui toolbar.

Bagian dasbor kedua adalah menu navigasi. Sebagian besar aktivitas mengelola WordPress berada di menu navigasi. Dari menerbitkan blogpost, mengunggah media, menambah halaman, mengelola komentar, mengganti tema, memasang plugin, hingga mengganti pengaturan WordPress.

Di bagian ketiga adalah area kerja utama terdapat empat hal utama berikut:

At a Glance menampilkan jumlah post, halaman, komentar, dan versi WordPress yang digunakan.

Activity menunjukkan informasi singkat tentang post dan komentar terbaru.

Jika Anda punya ide artikel dan ingin segera menulisnya Anda bisa melakukannya di Quick Draft. Namun, Anda tetap harus menerbitkannya melalui menu utama.

WordPress News menampilkan berita terbaru dari WordPress.

Langkah 3: Memasang Tema WordPress

Sudah paham tentang bagian-bagian dasbor WordPress. Selanjutnya Anda bisa memasang tema WordPress melalui dasbor tersebut di bagian menu navigasi Appearance.

Anda bisa mencari tema melalui kolom search di menu tersebut atau mengunggah sendiri tema yang Anda unduh dari website lain melalui Upload Theme.

Langkah 4: Install Plugin

Setelah memasang tema yang Anda inginkan, Anda juga perlu memasang plugin untuk meningkatkan kinerja WordPress. Plugin yang tersedia di WordPress sangat banyak. Memilah satu per satu plugin mana yang harus Anda install di WordPress akan memakan waktu lama.

Namun, tidak perlu khawatir karena kami sudah merangkum plugin wajib apa saja yang perlu Anda install ketika pertama kali membuat WordPress. Berikut adalah plugin yang harus ada di WordPress Anda:

Google XML Sitemaps

Berguna untuk membuat sitemap website sehingga mesin pencari bisa lebih mudah melakukan crawl konten-konten di website Anda.

Yoast SEO

Yoast SEO memiliki pengguna yang lebih banyak jika dibandingkan plugin SEO lainnya. Saat artikel ini ditulis sudah mencapai lebih dari 5 juta instalasi aktif.

Plugin ini menawarkan fitur dan pilihan yang dapat Anda gunakan untuk melakukan optimasi website WordPress dengan mudah. Tapi setelah melakukan instalasi, Anda harus melakukan pengaturan Yoast SEO terlebih dahulu.

Contact Form 7

Contact Form 7 dapat Anda gunakan untuk mengelola lebih dari satu form kontak. Anda dapat melakukan pengaturan tampilan dan menambah fasilitas seperti menambahkan fitur untuk mengirimkan file.

Cara memasang plugin pun cukup mudah. Di menu navigasi, klik Plugin > Add New. Kemudian ketik nama plugin yang ingin Anda pasang di kolom pencarian. Setelah menemukan plugin yang Anda inginkan, pilih Install lalu Activate.

Langkah 5: Cara Posting Artikel

Untuk membuat post baru di WordPress, buka Add New di bawah Posts atau pilih New -> Post di toolbar bagian atas.

Setelah itu akan muncul editor blog post yang disertai berbagai fitur.

Ketik judul post terlebih dulu. Kemudian, ketik konten post pada area yang telah disediakan. Jika ingin memformat teks, gunakan opsi toolbar. Toolbar tersebut hampir sama dengan toolbar yang Anda gunakan di MS Word atau text editor populer lainnya.

Di sisi kanan halaman, Anda akan melihat semacam meta box. Tiap box memiliki fungsi khusus.

Publish. Di sini Anda dapat mengubah status dan visibilitas post. Buatlah jadwalnya. Dengan mengklik tombol Publish, post Anda dapat dibaca oleh pengunjung. Jika ingin menghapus post, klik tombol Move to Trash.

Categories. Pada box ini, Anda dapat menentukan kategori post yang lebih spesifik. Bahkan Anda bisa membuat kategori baru dengan mengklik tombol +Add New Category.

Tags mempermudah Anda untuk menambahkan tag baru dengan cepat.

Featured Image, Anda dapat menentukan featured image untuk post di sini. Featured image adalah gambar yang muncul di atas artikel.

Langkah 6: Cara Membuat Halaman

Halaman WordPress adalah konten statis yang tidak terjadwal seperti About Us dan Contact Us. Halaman tidak memiliki category dan tag. Bagaimana cara membuatnya? Berikut adalah langkah-langkahnya:

Di menu navigasi WordPress, klik Pages > Add New. Pages memang tidak memiliki categories dan tags. Sebagai penggantinya, Pages memiliki Page Attributes yang berguna untuk mengubah urutan halaman serta membuat parent page. Parent page berguna untuk menyatukan beberapa halaman yang berada di bawah parent page yang sama.

Optimasi WordPress

Cara membuat WordPress tidak berhenti pada instalasi dan menerbitkan konten saja, tetapi juga bagaimana cara mengoptimalkan kinerjanya. Dengan begitu artikel-artikel Anda akan sering berada di posisi teratas hasil pencarian Google, website tidak loading lama, dan memperoleh pengunjung lebih banyak tentunya.

Berikut adalah langkah-langkah optimasi WordPress yang perlu Anda lakukan:

1. Install Caching

Lagi-lagi, Anda perlu memasang plugin. Di poin sebelumnya Anda sudah memasang plugin untuk SEO, yaitu Yoast SEO. Kali ini plugin yang perlu Anda install untuk optimasi WordPress adalah plugin caching. Plugin caching berguna untuk membuat versi statis dari website Anda dan mengirimkannya sehingga website bisa loading lebih cepat.

2. Optimasi Permalink

Secara default, WordPress menghasilkan struktur permalink yang cukup panjang. Struktur default tersebut berupa tanggal serta nama URL. Contohnya seperti di bawah ini.https://niagahoster.org/2017/08/10/judul-postingan

Permalink yang disukai oleh Google mengandung judul atau keyword. Kemudian, permalink yang lebih pendek akan memberikan performa yang lebih baik lagi. Ketika menentukan permalink, kami menyarankan agar Anda menggunakan Post Name. Cara ini akan membuat keyword lebih mudah terlihat ketika website Anda tampil di Google.https://niagahoster.org/judul-postingan

Anda dapat mengubah permalink melalui dashboard WordPress. Silakan pilih menu Settings > Permalinks. Kemudian pilih radio button Post name dan klik tombol Save Changes untuk menyimpan perubahan.

3. Optimasi Gambar

Optimasi gambar juga diperlukan agar website Anda lebih cepat loading. Mengoptimasi gambar akan membantu website Anda untuk loading lebih cepat karena membuat ukuran gambar yang Anda unggah lebih kecil, tapi dengan kualitas yang sama.

Gambar yang sudah teroptimasi juga membantu website Anda untuk mendapatkan ranking lebih tinggi di hasil pencarian Google.

4. Aktifkan CDN

CDN adalah sebuah teknologi terbaru sebagai bentuk mirroring konten situs web. Dengan menggunakan CDN maka content web kita seperti CSS, Image, Video, Custom Scripts akan di mirror di server cadangan yang terletak di berbagai negara.

Mengamankan WordPress

Bagian terakhir dari tutorial WordPress ini adalah cara mengamankan WordPress. Hal ini penting agar website Anda terhindar dari serangan malware, virus, dan hacker.

1. Selalu Update WordPress

Update versi WordPress terbaru diperlukan untuk mengatasi celah (bug system) versi sebelumnya. Anda bisa melakukannya secara langsung melalui halaman dashboard WordPress ketika terdapat versi terbaru. Pastikan Anda selalu update versi untuk mengurangi resiko keamanan WordPress yang ada.

2. Update Plugin

Para pengembang plugin selalu berusaha untuk menutup bug dan hacker selalu mencari celah. Selalu update plugin Anda ke versi terbaru agar terhindar dari serangan hacker. 

3. Tema Juga Harus Selalu Update

Tidak hanya plugin, celah yang sama tentu akan dimanfaatkan oleh para hacker. Silakan cek ketersediaan versi tema terbaru Anda melalui menu Appearance > Theme pada dashboard WordPress Anda. Jangan lupa untuk menghapus theme WordPress yang sudah tidak Anda gunakan.

4. Hapus Plugin yang Tidak Digunakan

Jangan hanya menonaktifkan plugin yang tidak perlu. Hapus plugin tersebut untuk menutup celah bagi para hacker untuk meretas website Anda. Selain itu, menghapus plugin yang tidak digunakan dapat meringankan kerja WordPress Anda.

5. Buat Custom Login

/wp-login.php ialah link login yang otomatis digunakan setelah kita melakukan instalasi dan akan login WordPress. Tentunya para hecker mengetahuinya dan mempermudah mereka untuk menerobos ke akun Anda. Terlebih jika Anda menggunakan password yang sama di berbagai akun layanan lainnya. Untuk mencegahnya, kita bisa mengubah link login ke WordPress menggunakan plugin Custom Login URL Nantinya Anda juga dapat mengubah link logout, lost password dan lainnya.

6. Lakukan Backup

Melakukan backup secara berkala sudah menjadi kewajiban yang harus dilakukan. Ketika terdapat fungsi yang tidak berjalan atau terkena virus dan dibutuhkan waktu yang lama untuk memperbaikinya, Anda dapat melakukan pemulihan dengan cepat dengan cara me-restore backup yang telah dibuat.

Proses backup dapat dilakukan dengan dua cara, backup otomatis dan backup manual. Backup secara manual meliputi penyimpanan database MySQL dan file yang terdapat pada website WordPress Anda. Anda juga dapat memanfaatkan fitur backup dari layanan hosting yang dapat dilakukan secara otomatis.

Untuk berjaga-jaga, ada baiknya Anda memasang plugin WordPress untuk melakukan backup secara otomatis. Anda dapat menentukan sendiri jangka waktu backup yang dilakukan secara otomatis, setiap bulan, minggu atau hari.

Beberapa plugin backup WordPress yang kami rekomendasikan diantaranya:

Updraftplus: Plugin ini sangat populer dengan berbagai fitur backup dan restorenya. Selain fiturnya yang lengkap Anda juga dapat memilih file apa saja yang akan terupdate secara berkala.

BackUpWordPress: Selain menawarkan penggunaan backup dan restore yang mudah, plugin ini hanya membutuhkan memori yang kecil sehingga tidak memberatkan server hosting Anda.

Kesimpulan

Cara membuat blog dengan WordPress Tidak hanya mudah, WordPress juga mampu memberikan kualitas mumpuni dalam membuat website profesional. Tidak ada lagi alasan untuk tidak membuat website. Anda dapat menemukan banyak panduan cara membuat website dengan WordPress dan cara optimasinya di Niagahoster, baik melalui tutorial WordPress di blog maupun e-book.

Kini saatnya Anda membuat website pribadi, blog, toko online, atau website perusahaan menggunakan WordPress.

Sumber:

niagahoster.co.id

Read More

Cara Membuat Template WordPress Responsive dengan HTML5

Template WordPress merupakan gabungan dari beberapa file yang menentukan tampilan dari website Anda. File ini biasanya terdiri dari HTML, PHP, CSS, dan JavaScript/jQuery.

Selain itu, Anda juga akan belajar bagaimana memisahkan beberapa bagian dari template. Template sendiri sama dengan plugin, karena terpisah dari code utama WordPress.

Sebenanya menggunakan WordPress Hosting sudah tersedia berbagai tema gratis, namun jika Anda ingin membuat tema sendiri artikel ini tepat untuk Anda. Dengan adanya template, memungkinkan website Anda memiliki tata letak yang konsisten di setiap halaman dan tampilan website dapat dengan mudah dimodifikasi.

Apa yang Anda Perlukan?

Untuk memulai langkah dalam tutorial ini, Anda memerlukan:

Text editor (contohnya: Notepad++)

Localhost, Anda dapat menggunakan XAMPP (silakan ikuti tutorial cara instal XAMPP)

Instalasi WordPress aktif di localhost(silakan ikuti tutorial cara instal WordPress di localhost)

Apa itu HTML5 dan Kenapa Harus Menggunakannya

HTML5 merupakan versi terbaru dari HTML, dilengkapi fitur terbaru dengan tampilan yang lebih baik ketika website diakses pada berbagai perangkat seperti komputer, laptop, tablet bahkan mobile.

Adanya elemen HTML baru merupakan bagian perubahan yang ada pada HTML5. Sebagai contoh, untuk footer dari halaman HTML saat ini didefinisikan dengan elemen <footer></footer>, dan ini memberitahu web browser jika konten tersebut adalah bagian dari footer.

Sedangkan untuk versi HTML sebelumnya, konten dari footer dibuat dengan elemen generik seperti <div></div>.

Berikut merupakan dokumen HTML5 secara basic:<!DOCTYPE html> <html lang="en"> <head> <title>Halaman HTML5</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <h1>Website Saya</h1> </header> <main> <section> <header> <h2>Artikel Saya</h2> </header> <article> <header> <h2>Artikel</h2> </header> <p class="inline-text-box">Left</p><p class="inline-text-box">Right</p> </article> </section> </main> <footer> <p>Copyright © 2017</p> </footer> </body> </html>

Penjelasan Desain Responsive

Desain responsive memiliki pengertian bahwa website Anda akan memiliki tampilan otomatis dengan format terbaik untuk pengunjung sesuai dengan layar perangkat yang mereka gunakan.

Sehingga tata letak dari website akan merespon terhadap ruang yang tersedia di layar perangkat yang digunakan oleh pengunjung. Konten akan berada pada tempat yang pas, sehingga tidak ada konten yang terpotong atau melebihi layar dan website akan tampil dengan baik.

Berikut Ini Adalah Cara Membuat Template WordPress

Terdapat 4 langkah yang harus diselesaikan untuk membuat template WordPress responsif:

• Pahami tempat penyimpanan template dan file template WordPress.
• Buat template dan CSS stylesheet.
• Menambahkan beberapa struktur kode template WordPress.
• Membuat tata letak untuk template.

Dibawah ini penjelasan lengkap beberapa poin diatas.

Langkah 1: Pahami Tempat Penyimpanan Template dan File

Template WordPress akan disimpan dalam folder wp-content/themes/, sehingga Anda perlu membuat nama folder dari template. Pada tutorial ini, kami memberi nama folder template-saya. Nama folder tersebut harus dibuat unik, artinya tidak boleh sama dengan nama folder template lain.

Template WordPress dapat dibuat hanya dengan dua file, yaitu index.php dan style.css dan akan digunakan oleh WordPress untuk menampilkan halaman dan postingan pada website Anda.

Selanjutnya, Anda memerlukan postingan, halaman, dan bagian lain dari website supaya menampilkan tata letak sesuai dengan yang diinginkan.

Setiap bagian dari website akan memiliki file tersendiri untuk menyimpan code HTML dan PHP, setiap file itu disebut template.

Jika Anda menggunakan jenis postingan khusus, Anda dapat membuat template yang hanya digunakan untuk jenis postingan tersebut. Jika Anda menginginkan postingan dari kategori tertentu dengan tampilan berbeda, Anda dapat menggunakan statemen if…then.. di dalam loop.

Setiap file template harus menggunakan nama yang benar sesuai dengan yang didefinisikan oleh dokumentasi WordPress.

Berikut adalah beberapa file template selain index.php:

header.php – berisi code HTML untuk bagian atas halaman, dimulai dengan code <!DOCTYPE html>

single.php – digunakan untuk menampilkan satu halaman dari blog Anda

comments.php – untuk menentukan bagaimana komentar dan kolom komentar ditampilkan

footer.php – berisi code HTML untuk menampilkan bagian bawah dari halaman website, termasuk </html>

Langkah 2: Buat File Template dan CSS Stylesheet

1. Buat folder template-saya pada direktori …/themes/wp-content/

2. Pada folder template-saya silakan buat file-file berikut ini:

• header.php
• index.php
• footer.php
• functions.php
• sidebar.php
• single.php
• page.php
• style.css

Selanjutnya adalah menambahkan beberapa informasi pada baris paling atas dari file style.css, ini akan dibaca oleh WordPress dan ditampilkan di dashboard admin.

Informasi tersebut harus ditulis sebagai komentar CSS multi-line, setiap header ada pada barisnya sendiri, dimulai dengan kata kunci header.

Ada beberapa kata kunci header yang dapat Anda gunakan untuk mendefinisikan informasi seperti author (nama Anda), author website, deskripsi dari template, nama dari template, versi template dll. Untuk kata kunci header yang lebih lengkap, silakan cek WordPress Codex – File Header.

Silakan tambahkan code di bawah ini ke dalam file style.css:* { box-sizing: border-box; } body { background-color: #f9f9f9; font-family: Helvetica; }

Catatan: Untuk baris ke 7 dan 8 hanya dibutuhkan jika Anda ingin mengupload template di WordPress.org. Jika hanya akan digunakan untuk website sendiri, boleh untuk tidak diisi.

Pada langkah ini, template Anda sudah muncul di halaman template dashboard WordPress. Akan terlihat template seperti gambar di bawah ini.

Langkah selanjutnya adalah menambahkan code pada file CSS untuk membuat warna background dari halaman website Anda.

Silakan tambahkan baris kosong setelah penutup komentar pada baris ke 10. Kemudian tambahkan code di bawah ini pada baris ke 11.<?php // Fungsi ini akan memanggil Normalize.css. Parameter pertama adalah nama untuk stylesheet, yang kedua adalah URL. // File css yang digunakan adalah versi online. function add_normalize_CSS() { wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css"); }

Entry pertama adalah bagian terpenting dari responsive styling. * merupakan wildcard dan akan mencocokan dengan setiap class tunggal yang ada di dalam dokumen HTML.

Entry kedua akan mengubah warna background, selain itu terdapat font default yang digunakan pada template.

Langkah 3: Tambahkan Code

Sebelum Anda membuat tata letak template WordPress, Anda perlu menambahkan beberapa bagian code pada file-file template.

Pertama, silakan include file CSS dengan nama normalize.css. Beberapa browser memiliki pengaturan default berbeda untuk halaman margin dan padding.

File normalize.css akan menetapkan sejumlah atribute untuk memastikan website Anda tampil dengan baik pada semua browser, ini adalah cara membuat template WordPress supaya responsive.

1. functions.php

Silakan buka file functions.php dan tambahkan code berikut ini:// Daftarkan sebuah sidebar baru yang diberi nama 'sidebar' function add_widget_Support() { register_sidebar( array( 'name' => 'Sidebar', 'id' => 'sidebar', 'before_widget' => '<div>', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>', ) ); } // Kaitkan inisiasi widget dan jalankan fungsi add_action( 'widgets_init', 'add_Widget_Support' );

Selanjutnya, silakan untuk mengaktifkan widget sidebar. Jika Anda tidak memasukkan code tersebut, maka link menu widget tidak akan muncul di halaman dashboard WordPress dan tidak dapat menambahkan widget.

Masih pada file functions.php, silakan tambahkan code di bawah ini pada baris di bawah code sebelumnya.// Daftarkan menu navigasi baru function add_Main_Nav() { register_nav_menu('header-menu',__( 'Header Menu' )); } // Hook to the init action hook, run our navigation menu function // Kaitkan ke init action hook, jalankan function menu navigasi. add_action( 'init', 'add_Main_Nav' );

Selanjtunya Anda perlu untuk mendaftarkan menu navigasi kustom untuk mengaktifkan fitur Appearance > Menu pada dashboard admin. Silakan tambahkan code di bawah ini pada baris selanjutnya dari code sebelumnya.<?php if ( is_active_sidebar( 'sidebar' ) ) : ?> <aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar' ); ?> </aside> <?php endif; ?>

Setelah itu silakan simpan file functions.php.

2. sidebar.php

Selanjutnya, silakan buka file sidebar.php dan tambahkan code berikut ini. Ini akan membuat sidebar dan widget muncul pada template ketika get_sidebar() dipanggil.<!DOCTYPE html> <html <?php language_attributes(); ?> <head> <title><?php bloginfo('name'); ?> » <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header class="my-logo"> <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1> </header> <?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>

Baris pertama akan memberitahu WordPress jika tidak ada widget yang diaktifkan maka HTML sidebar tidak boleh ditampilkan. Baris kedua menetapkan atribut dari elemen yang berisi widget.

HTML5 menyediakan elemen <aside> untuk sidebar. Baris ketiga, merupakan function WordPress untuk menampilkan widget dan baris terakhir penutup statemen ‘if’.

Silakan simpan file sidebar.php.

Langkah 4: Buat Tata Letak untuk Template

1. header.php

File header.php akan mendefinisikan bagian paling atas dari dokumen, dimulai dengan deklarasi DOCTYPE.

Semua dokumen HTML harus diawali dengan deklarasi DOCTYPE, dimana akan memberitahu web browser untuk mengenali dokumen tersebut.

Doctype HTML5 hanya berupa html. Untuk tag <html> pembuka memerlukan atribut language, dan WordPress menyediakan function untuk memasukkan code bahasa yang benar selama instalasi.

Pada bagian title, digunakan baris code untuk menampilkan nama dari website Anda, diikut dengan statemen if…then… untuk menampilkan tagline dari website Anda atau judul dari halaman atau postingan yang diakses.

Untuk karakter ? merupakan operator kondisional PHP bernama ternary operator. Pada baris code is_front_page() adalah function WordPress yang mengembalikan TRUE jika mengakses halaman depan, atau FALSE jika mengakses postingan atau halaman lain.

Function sebelum colon digunakan jika TRUE dikembalikan, dan function setelah colon digunakan jika FALSE dikembalikan.

Untuk function bloginfo() digunakan untuk perulangan dengan parameter berbeda untuk mendapatkan bagian lain dari infromasi database WordPress.

Sebelum tag <head> ditutup dengan tag </head>, Anda harus memasukkan action hook wp_head() untuk memastikan function lain yang terlampir dijalankan.

Function body_class() akan memberi body sebuah class CSS default yang ditetapkan oleh WordPress. Baris terakhir memungkinkan menu navigasi ditampilkan jika telah dibuat di dashboard admin.

Silakan masukkan code berikut pada file header.php:<?php get_header(); ?> <main class="wrap"> <section class="content-area content-thin"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article class="article-loop"> <header> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> Oleh: <?php the_author(); ?> </header> <?php the_excerpt(); ?> </article> <?php endwhile; else : ?> <article> <p>Maaf, tidak ada posting yang ditemukan!</p> </article> <?php endif; ?> </section><?php get_sidebar(); ?> </main> <?php get_footer(); ?>

Simpan perubahan pada file header.php.

2. index.php

Untuk file index.php akan mendefinisikan homepage dan juga akan digunakan sebagai tampilan default jika tidak ditemukan template yang spesifik, seperti single.php, page.php.

Kemudian akan digunakan template tags untuk memastikan code header (get_header), sidebar (get_sidebar) dan footer (get_footer) berada di dalam homepage.

Loop dari WordPress akan menampilkan daftar dari postingan. Selain itu juga akan menggunakan elemen HTML5 semantik <section>, <main>, <header> dan <article>.

Beberapa elemen akan memilik class, dimana akan dibuat pada file style.css.<footer> <p>Copyright © 2017</p> </footer> <?php wp_footer(); ?> </body> </html>

Loop dimulai pada <?php if (have_posts()) : while (have_posts()) : the_post(); ?> dan berakhir di <?php endif; ?>. Di dalam loop, digunakan tag template berikut:

<?php the_permalink(); ?> – output URL yang benar dari postingan yang diakses

<?php the_title_attribute(); ?> – output judul dari postingan

<?php the_author(); ?> – output dari nama author

<?php the_excerpt(); ?> – output kutipan dari postingan, dimana akan auto-generated jika Anda tidak menulisnya.

Terakhir, silakan simpan perubahan pada file index.php.

3. footer.php

Untuk file footer.php akan mendefinisikan setiap halaman dan merupakan penutup dari tag HTML file template lain. Pada contoh ini <body> dan <html> masih terbuka dari header.php.

Sehingga harus melakukan include action hook wp_footer() untuk memastikan code akhir WordPress dan JavaScript ditambahkan pada halaman. Jika Anda login sebagai admin ketika mengakses homepage, postingan atau halaman, maka akan tampil bar admin.

Silakan tambahkan code berikut ke dalam file footer.php:<?php get_header(); ?> <main class="wrap"> <section class="content-area content-full-width"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article class="article-full"> <header> <h2><?php the_title(); ?></h2> Oleh: <?php the_author(); ?> </header> <?php the_content(); ?> </article> <?php endwhile; else : ?> <article> <p>Maaf, postingan tidak ditemukan!</p> </article> <?php endif; ?> </section> </main> <?php get_footer(); ?>

4. single.php

File single.php akan mendefinisikan tata letak ketika mengakses halaman tertentu pada website. Ini berbeda dengan index.php.

Silakan tambahkan code berikut ke dalam file single.php<?php get_header(); ?> <main class="wrap"> <section class="content-area content-thin"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article class="article-full"> <header> <h2><?php the_title(); ?></h2> Oleh: <?php the_author(); ?> </header> <?php the_content(); ?> </article> <?php endwhile; else : ?> <article> <p>Maaf, halaman tidak ditemukan!</p> </article> <?php endif; ?> </section><?php get_sidebar(); ?> </main> <?php get_footer(); ?>

Setelah code ditambahkan, silakan simpan dengan menekan tombol ctrl + S.

5. page.php

File page.php mendefinisikan halaman yang ditampilkan ketika diakses, halaman ini berbeda dengan index maupun postingan.

Silakan tambahkan code berikut ini:@media screen and (max-width: 800px) { .article-loop { width: 99%; } }

6. style.css

Selanjutnya adalah menambahkan code css ke dalam file style.css yang sebelumnya sudah dibuat. Silakan tambahkan code berikut di bagian bawah bari code css yang sudah ada.

7. Menggunakan Media Querie

Saat ini tampilan depan belum responsive, ini akan terlihat ketika website diakses melalui perangkat seluler.

Untuk mengatasinya, silakan tambahkan code berikut pada file style.php di bagian bawah class .article-loop. Ini akan membuat bagian konten responsive.@media screen and (max-width: 400px) { .content-area, .primary-sidebar { width: 100%; } }

Jika website Anda diakses melalui tampilan mobile, untuk sidebar masih belum responsive, supaya sidebar berpindah ke bagian bawah konten, silakan tambahkan code berikut ini.

Kesimpulan

Setelah menyelesaikan tutorial ini, kami berharap Anda dapat memahami bagaimana cara membuat template WordPress responsive. Template yang dibuat pada tutorial ini masih sederhana, Anda dapat bereksperimen dengan mengubah tampilan atau warna melalui file css.

Sumber:

niagahoster.co.id

Read More

Perbedaan HTML dan HTML5

HTML adalah bahasa markup yang paling sering digunakan dalam pembuatan website. Sejak mulai mengudara di 2014, versi kelima HTML telah digunakan secara luas.

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:

• Penanganan Error yang Lebih Baik
• Kemudahan untuk Membuat Aplikasi Web
• Syntax yang Lebih Sederhana
• Dukungan untuk Pembuatan Website Responsive
• Support untuk Konten Video dan Audio
• Dukungan untuk Grafik Vektor
• Kompatibel dengan lebih Banyak Browser
• Penyimpanan Informasi secara Lokal
• Fokus Otomatis pada Kolom Form
• 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.

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.

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 box

<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

Penutup

HTML5 adalah perbaikan dari versi sebelumnya. HTML5 menghadirkan berbagai fitur baru yang memenuhi berbagai kebutuhan website masa kini. Di antaranya adalah dukungan untuk konten video dan audio, kemampuan untuk menjalankan JavaScript di browser, dan kemudahan untuk membuat aplikasi web.

Sumber:

niagahoster.co.id

Read More

Panduan Lengkap XML: Pengertian, Contoh, dan Cara Membuka Filenya

Apa itu XML dan Manfaatnya?

Extensible Markup Language (XML) adalah bahasa markup yang diciptakan oleh konsorsium World Wide Web (W3C). Bahasa ini berfungsi untuk menyederhanakan proses penyimpanan dan pengiriman data antarserver.

Nah, kenapa proses penyimpanan dan pengiriman data antar server perlu disederhanakan?

Ini karena setiap server bisa memiliki sistem yang berbeda-beda. Sehingga, pertukaran data antarserver yang sistemnya tidak cocok akan memakan banyak waktu. 

Anda perlu mengubah format data agar cocok dengan server tujuan. Data yang diubah pun berisiko hilang.

Sebagai solusinya, XML menyimpan data dalam format teks yang sederhana. Sehingga Anda tidak perlu mengubah format data sama sekali. Bahkan format datanya pun akan tetap sama walaupun ditransfer ke server lain.

Oleh karena itu, XML juga mudah untuk diperbarui ke operating system baru atau browser baru. Bahasanya pun mudah untuk dibaca manusia, komputer, hingga teknologi pengenal suara. 

Apa Perbedaan XML dengan HTML?

Seperti yang sudah dijelaskan di atas, fungsi utama XML adalah untuk menyimpan dan mengirimkan data. Sedangkan fungsi utama HTML adalah untuk menampilkan data.

Selain itu, Anda bisa menggunakan tag apapun di XML. Lain halnya dengan HTML yang membutuhkan tag-tag khusus (predefined tags) untuk menjalankan fungsinya.

Untuk melihat perbedaan XML dan HTML secara lebih jelas, mari kita lihat cara keduanya mendeskripsikan konten yang sama. 

Pertama-tama, berikut adalah cara HTML menampilkan data:<body> <h1>Daftar Produk PT.A</h1> <h2>Produk Pertama</h2> <p>Produk pertama dapat membantu meningkatkan daya tahan tubuh</p> <p><b>Harga: Rp. 20.000</b></p> <p><b>Ongkir: Rp. 5000</b></p> </body>

Seperti yang Anda lihat, HTML menggunakan tag-tag khusus seperti <h1>, <h2>, atau <p> untuk mendefinisikan struktur kontennya. 

Selain itu, Anda juga bisa melihat bagaimana datanya akan ditampilkan. Contohnya pada bagian harga dan ongkir, ada tag <b> yang membuat datanya tampil dalam bentuk cetak tebal (bold).

Sekarang, mari kita lihat gambaran isi file XML:<productlisting title:”Daftar Produk PT.A”> <product> <nama>Produk Pertama</nama> <deskripsi>Produk pertama meningkatkan daya tahan tubuh</deskripsi> <harga>Rp. 20.000</harga> <ongkir>Rp. 5000</ongkir> </product> </productlisting>

Jadi, Anda bisa melihat isi konten dari tagnya. Contohnya seperti <nama>, <deskripsi>, dan <harga>. Ini juga menunjukkan bahwa Anda bebas menentukan tag apapun.

Akan tetapi, tak ada satupun tag yang terkait dengan tampilan konten. 

Untuk mempermudah pemahaman, berikut adalah tabel perbandingan XML dengan HTML:

XML HTML

Berfungsi untuk menyimpan dan mengirimkan data. Berfungsi untuk menampilkan data.

Bebas menggunakan tag yang Anda buat sendiri. Harus menggunakan tag-tag tertentu untuk menjalankan fungsinya.

Dapat membedakan huruf kapital dengan huruf kecil (case sensitive). Tidak dapat membedakan huruf kapital dengan huruf kecil (case insensitive).

Terdiri dari data struktural. Tidak terdiri dari data struktural.

Harus ada tag penutup di dalamnya. Tidak perlu menggunakan tag penutup.

Contoh Struktur XML

Strukturnya cukup sederhana, karena hanya terdiri dari tiga segmen, yaitu:

Deklarasi – Bagian ini menunjukkan versi XML yang digunakan.

Atribut – Bagian ini berisi keterangan objek. Contohnya seperti nama, judul, jabatan, atau sejenisnya.

Elemen – Bagian ini berisi tag yang mendeskripsikan objek. Strukturnya terdiri dari tiga bagian, yaitu tag pembuka, isi, dan tag penutup.

Berikut adalah ilustrasi penggunaan ketiganya:<?xml version="1.0"?> --> Deklarasi <productlisting title:”Daftar Produk PT.A”> --> Atribut <product> <nama>Produk Pertama</nama> --> Elemen <deskripsi>Produk pertama meningkatkan daya tahan tubuh</deskripsi> <harga>Rp. 20.000</harga> <ongkir>Rp. 5000</ongkir> </product> </productlisting>

Seperti yang Anda lihat, deklarasinya menunjukkan bahwa versi yang digunakan adalah 1.0. Lalu, atribut yang digunakan dalam data product listing adalah Daftar Produk PT. A. 

Data di atas terdiri dari beberapa elemen, yaitu nama, deskripsi, harga, dan ongkir. Dan setiap elemen terdiri dari tiga bagian. Contohnya <nama> (tag pembuka), Produk Pertama (isi), dan </nama> (tag penutup).

Bagaimana Cara Membuka File XML?

Oke, sekarang Anda sudah tahu apa itu xml dan isi filenya seperti apa. Tapi bagaimana cara membuka filenya?

Mungkin Anda pernah coba membukanya, lalu melihat pesan ini:

Tenang, cara membukanya gampang kok. Ada beberapa cara yang bisa Anda gunakan:

1. Menggunakan Notepad

Cara ini sangat simple. Anda hanya harus melakukan tiga langkah:

Klik kanan di file XML.

Klik Open with.

Pilih Notepad.

Jika Anda merasa tampilan Notepad terlalu sederhana, Anda bisa menggunakan Notepad++. Aplikasi ini dapat menyajikan isi filenya dengan tampilan yang lebih rapi. 

Penggunaannya pun kurang lebih sama seperti Notepad biasa. Anda tinggal klik kanan filenya, lalu pilih edit with Notepad++.

2. Memanfaatkan Browser

Selain Notepad, Anda juga bisa membuka file XML melalui browser apapun yang ada di perangkat Anda. Seperti Chrome, Firefox, hingga Internet Explorer. Berikut adalah caranya:

Klik kanan di filenya.

Klik Open with.

Pilih browsernya. Jika tidak ada di list, Anda bisa klik Choose Another App.

Jika masih tidak ada, klik Look for another app on this PC.

Cari file .exe browser Anda, lalu klik Open.

Filenya akan terbuka secara otomatis di browser Anda. Berikut adalah contoh tampilannya di Google Chrome:

3. Membuka Online XML Editor

Alat lain yang bisa Anda gunakan untuk melihat isi file XML adalah online XML editor seperti CodeBeautify. Sebagai contoh, berikut adalah cara membuka file XML dengan CodeBeautify:

Di halaman utama XML Viewer CodeBeautify, klik tombol Browse.

Pilih file yang ingin Anda buka, lalu klik Open.

Tunggu proses loadingnya sebentar, lalu Anda akan melihat isi filenya.

Sudah Siap Menggunakan XML?

XML adalah bahasa markup yang berfungsi untuk menyederhanakan proses penyimpanan dan pengiriman data antar server. Berbeda dengan HTML yang fungsi utamanya adalah untuk menampilkan data.

Sumber:

niagahoster.co.id

Read More