Advertisement
  1. Web Design
  2. HTML

Bagaimana Mengubahsuai suatu Templat HTML

by
Read Time:16 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Kurniawan Sugi Purwanto (you can also view the original English article)

Jadi Anda baru saja membeli suatu templat HTML dan sekarang Anda harus mengubahsuainya sebelum bisa ditampilkan online, tetapi Anda tidak berpengalaman dengan menulis kode, jadi Anda tidak yakin tentang cara melakukannya. Kalau begitu, santai saja, karena di tutorial ini kami mengajak Anda mempelajari tiap langkah di keseluruhan prosesnya. 

Kita akan melangkah dengan asumsi Anda belum pernah melihat sebaris pun HTML, apalagi yang sudah disunting, jadi tak masalah seberapa baru Anda dalam hal menulis kode, Anda akan diperlihatkan apa yang tepatnya harus dilakukan di tiap langkahnya.

Mari memulai dari yang paling awal.

Apa itu HTML?

Secara teknis jawaban terhadap pertanyaan terebut adalah "Hyper Text Markup Language". Meskipun demikian, untuk tujuan pengubahsuaian suatu templat, Anda bisa menganggap HTML sebagai serangkaian tag pembuka dan penutup seperti ini:

Tag diindikasikan dengan tanda < dan >, dan tag penutup selalu memiliki tanda /. Pasangan tag memiliki konten di dalamnya, seperti ini:

Kendatipun demikian terkadang ada juga tag yang berdiri sendiri tanpa ada penutupnya, seperti ini:

Beragam tag HTML menghasilkan jenis konten yang berbeda-beda yang tampil di suatu halaman web. Contoh di atas, tag <h1></h1>, akan menghasilkan pembacaan kepala teks (heading) yang besar bertuliskan "John Smith, Front End Developer", dan contoh tag <img> akan membuat file gambar "mypic.jpg" tampil di halaman web.

Untuk menyunting suatu templat HTML yang harus Anda ketahui adalah tag mana yang mewakili bagian halaman yang Anda ingin mengubahnya, bagaimana menemukannya di dalam kode, dan bagaimana menyuntingnya agar tampilannya sesuai yang Anda inginkan.

Dapatkan Suatu Editor Kode untuk Diri Anda Sendiri

Memang benar bahwa sangat dimungkinkan untuk menyunting HTML di Notepad atau program yang serupa, tetapi prosesnya akan jauh lebih mudah jika Anda menggunakan aplikasi penyunting kode yang tepat. Salah satu alasan utama adalah untuk mendapatkan penyorotan yang berwarna di kode-kode Anda, yang sebentar lagi Anda lihat, yang akan sangat memudahkan untuk dibaca dan diedit.

Saya merekomendasikan Sublime Text, yang bisa diunduh di sini: https://www.sublimetext.com/3

Mengunduh dan Menampilkan Templat HTML Anda

Unduh templat yang telah Anda beli - untuk tutorial ini kita akan menggunakan templat "Clean CV" ini sebagai contoh.

Kebanyakan templat HTML memiliki file ZIP - jadi lanjutkan dengan mengekstrak file Anda sekarang. Lalu lihatlah ke dalam folder templat sampai Anda menemukan file "index.html". atau "index.htm" .

Di contoh templat CV kita, namanya "index.html". file ini ditemukan dalam direktori "01.html-website".

Sekarang, buka file itu di Chrome. Jika Chrome bukan peramban default atau kesukaan Anda, saya saranakn untuk tetap menggunakannya, karena kita akan mengerjakan proyek ini dengan sejumlah alat yang tersedia di internal (built-in) Chrome untuk membantu Anda dalam proses penyuntingannya

Identifikasi Bagian-Bagian yang Anda Ingin Mengubahnya

Jika ini adalah kali pertama Anda mengedit suatu templat, cobalah untuk tidak tergoda untuk mengubah warna dan tata letaknya terlebih dahulu. Untuk melakukannya, Anda harus memahami tentang CSS, bahasa yang bertanggung jawab untuk mengatur gaya (styling) halaman. Ide yang bagus adalah dengan berfokus pada satu hal saja dalam satu waktu apabila Anda masih baru dalam pengubahsuaian templat, dan HTML adalah tempat yang baik untuk memulai.

Untuk memulai prosesnya, lihat templat Anda di Chrome dan temukan elemen tertulis dan gambar di halaman tersebut yang Anda ingin ubah. Jika diinginkan, Anda bisa menyiapkan suatu daftar supaya Anda bisa menjelajahi dan mengecek tiap itemnya seiring Anda melakukan penyuntingan.

Dalam hal templat CV ini kita ingin mengubah:

  • Nama
  • Profesi
  • Gambar pribadi
  • Tautan media sosial
  • Informasi kontak
  • Bagian CV: "Professional Profile"; "Work Experience", "Technical Skills" dan "Education"
  • Pesan hak cipta

Sekarang kita punya daftar semua item yang akan diubah, kita bisa mulai mengeset lokasinya di tag HTML yang sesuai di dalam kodenya. Mari memulai dengan nama.

Temukan Tagnya di Inspector.

Klik kanan namanya, yang secara default adalah "John Smith", lalu pilih Inspect:

Akan terbuka panel seperti ini di peramban Anda:

Panel Inspeksi

Panel ini memberi Anda cara yang interaktif untuk melihat kodenya. Layangkan mouse Anda pada baris yang menunjukkan <h1>...</h1> (tag kepala teks level 1) dan seharusnya Anda melihat nama bagian templat disoroti seperti di screenshot di atas.

Dengan melayangkan mouse Anda pada beberapa baris kode dan melihat area di halaman yang disorot panel ini membantu Anda menemukan kode ini berhubungan dengan elemen mana. Jadi terus layangkan mousenya ke baris-baris kode yang berbeda sampai bagian yang Anda cari disorot.

Sekarang bentangkan tag h1 dengan mengklik segitiga kecil di sebelah kiri dan Anda akan melihat konten yang ada di dalamnya. Dalam hal ini kontennya adalah John Smith <small>Front End Developer</small>.

Kata-kata tersebut sesuai dengan yang Anda lihat di layar, jadi Anda tahu bahwa bagian yang benar dalam kode itu sudah ditemukan.

Mengedit Tag di HTML

Saatnya membuka file HTML Anda untuk melakukan penyuntingan. Buka file "index.html" di Sublime Text dan semestinya Anda melihat sesuatu seperti ini:

Anda ingin menemukan kodenya di sini yang sesuai dengan yang Anda lihat di inspektor Chrome. Gulung layarnya sampai Anda menemukannya di baris 61-64.

Sekarang Anda bisa mengedit konten yang ada di antara tag untuk mengubah nama dan profesi sesuai keinginan Anda. Pertama, sunting "John Smith" ke nama Anda sendiri:

Lalu, di antara tag <small></small>, ubah "Front End Developer" ke profesi Anda sendiri.

Simpan file Anda lalu muat ulang templatnya di Chrome. Perubahan yang Anda buat akan tampil seperti ini:

Mengulangi untuk Mengedit Konten Lainnya

Sekarang Anda menguasai proses-proses dasar berikut:

  1. Menginspeksi konten yang Anda ingin ubah
  2. Mengidentifikasi tag yang sesuai
  3. Menemukan lokasi tag tersebut di file HTML Anda
  4. Mengedit kodenya agar sesuai

Mari mengulangi prosesnya untuk mengedit semua bagian konten lainnya yang kita ingin ubahsuai.

Masukkan Gambar Anda Sendiri

Berikutnya kita akan menambahkan gambar kita sendiri di sebelah kiri isian nama dan profesi. Klik kanan gambar dan inspeksi, catat tag yang berkesesuaian:

Anda bisa melihat jendela inspektor baris ini tepat di atas baris yang baru saja diubah:

Buka file HTML Anda dan temukan tag tadi di baris 59:

Untuk tag ini, Anda harus mengubah nilai atribut src yang Anda lihat di dalam tag img. Itu dilakukan dengan mengedit yang ada di antara tanda petik. Anda akan mengubah namanya ke nama file dan lokasi gambar Anda sendiri.

Ambil gambar Anda sendiri yang berukuran 150 x 150 piksel, (abaikan bahw nama filenya 140x140.png, ukuran sebenarnya adalah 150x150).

Masukkan gambar Anda ke dalam subfolder "_content"; yakno folder yang sama dengan file "index.html" Anda  .

Sekarang, di file HTML Anda, ganti nilai atribut src, menggantikan "140x140.png" dengan file yang baru saja Anda masukkan ke subfolder "_content". Pastikan untuk memeriksa bahwa ekstensi file yang Anda ketikkan sama dengan file Anda, misalnya "png" / "jpg":

Simpan file Anda, muat ulang Chrome, dan Anda akan melihat gambar Anda tampil:

Mengedit Tautan Media Sosial

Sekarang mari mengedit tautan di ikon media sosial di pojok kanan atas templat. Seperti sebelumnya, klik kanan salah satu ikon dan inspeksilah. Di jendela tersebut, lihat baris di atas yang disoroti dan Anda akan melihat yang mengandung teks "facebook-icon". Kita akan menggunakan ini untuk menemukan kodenya di file HTML kita.

Kembali ke Sublime Text, tekan CTRL + F dan masukkan kata "facebook-icon". Anda akan menemukannya di baris 75.

Tag a di baris 75 adalah yang menciptakan tautan di ikon, dan atribut href yang Anda lihat di dalamnya adalah penentu ke mana tujuan tautan itu, Anda harus mengubah nilai atribut href ke URL Facebook Anda (misalnya: https://www.facebook.com/mylink).

Gantikan # yang ada di situ secara default dengan URL Anda. Lalu lakukan hal yang sama untuk Twitter di baris 79, Google+ di baris 83, dan LinkedIn di baris 87.

Jika ada ikon yang Anda ingin menghapusnya secara keseluruhan, sorot tautan yang dimulai dengan tag pembuka a dan ditutup dengan tag </a>, lalu hapus kodenya.

Sekarang simpan dan muat ulang situsnya, selanjutnya kalau Anda mengklik tautan-tautan tersebut maka Anda akan menuju ke alamat yang telah Anda masukkan

Mengedit Informasi Kontak

Berikutnya mari kita ubah informasi kontak yang terletak tepat di bawah ikon-ikon sosial.

Mulailah dengan menginspeksi kata "Email" supaya bisa menemukan di mana bagian informasi kontak yang ini dimulai di dalam kodenya. Catat baris kode yang Anda sorot, dan baris di bawah di bawah ini supaya Anda bisa mencocokkannya di file HTML Anda.

Di Sublime Text, tekan CTRL + F sekali lagi, dan untuk kali ini cari "Email". Anda harus menemukan lokasi kata "Email" yang dikelilingi oleh kode yang cocok dengan yang Anda lihat di jendela inspektor.

Anda akan menemukannya di baris 94. Sorot alamat email default "john@sitename.com" di dua lokasi di baris tersebut:

Lalu ganti dengan alamat email Anda sendiri. Di baris berikutnya Anda juga bisa mengganti nomor telepon dengan nomor Anda sendiri, dan untuk baris di bawahnya yang Anda bisa mengganti alamat webnya dengan alamat Anda sendiri:

Menyunting Bagian CV

Sekarang mari lanjut dan mulai mengedit bagian utama CV di templat tersebut. Ada sejumlah bagian di sini, jadi kita akan mulai dengan menginspeksi masing-masingnya supaya Anda bisa tahu apa yang harus dicari di kode Anda. Di sini Anda juga akan berkesempatan untuk belajar sedikit tentang berpindah di jendela inspektir untuk menemukan bagian-bagian yang berbeda di situs Anda.

Gulung ke bawah ke bagian "Professional Profile", klik kanan di paragraf teksnya dan inspeksi.

Di inspektor tersebut Anda akan melihat adanya tag p yang disorot - tag ini bertanggung jawab untuk menciptakan paragraf dalam teks Anda.

Berikutnya, kita ingin mengetahui bagaimana seluruh bagian teks di bagian CV terlihat di kode, bukan hanya paragraf tertentu. Di jendela inspektor, klik baris kode di atas paragraf yang baru saja Anda inspeksi dan Anda akan melihat semua teksnya disorot:

Langkah ini memberitahu Anda tiap bagian kode yang dilingkupi dengan tag <div class="cv-item">...</div>. Tag div adalah singkatan dari division dan tag-tag ini digunakan untuk mengontrol layout dan gaya.

Sekarang inspeksi judul "Professional Profile" di bagian yang lain CVnya. 

Mula-mula, yang akan dilihat adalah seperangkat tag div lainnya. Ini karena kepala teks yang sebenarnya terletak antara tag-tag tersebut.

Tekan segitiga kecil di bagian akhir baris untuk membukanya dan lihat kontennya, lalu lakukan hal yang sama untuk baris berikutnya sampai Anda melihat teks "Professional Profile" yang Anda cari. Anda akan menemukanya dilingkupi dengan tag <h2>...</h2>, yang membuat suatu kepala teks level 2.

Sekarang kita tahu seperti apa tampaknya kode untuk tiap bagian CV ini, kita bisa kembali ke Sublime Text dan mulai mengeditnya.

Posisikan kursor Anda tepat di bagian paling atas dokumen HTML Anda sehingga Anda bisa mulai mencari dari atas. Tekan CTRL + F dan cari "cv-item". Teruslah mencari sampai Anda mendapatkan kode <div class="cv-item"> yakni tepat setelah kode <h2>Professional Profile</h2> yang baru saja Anda identifikasi.

Sekarang Anda bisa mengganti teks di bagian Professional Profile dengan milik Anda sendiri. Lingkupi tiap paragraf di teks Anda dengan tag <p>...</p>.

Apabila sudah selesai, pastikan tag pembuka paragraf di paragraf akhir bagian itu mencakup atribut class dengan nilai last, seperti ini: <p class="last">.....</p>. Ini berlaku bagi kelas untuk menata tata letak dari templat CSS yang akan memastikan bahwa spasi di bawah bagian teks ditangani dengan benar.

Jika Anda menyimpan dokumen HTML Anda dan memuat ulang situsnya, Anda akan melihat semua hal di dua bagian paling atas telah diubahsuai.

Sekarang kita bisa melanjutkan dengan menyunting bagian item CV yang tersisa dengan cara yang sama seperti yang kita lakukan untuk "Professional Profile".

Inspeksi tiap bagiannya untuk mengakrabkan diri Anda dengan kode yang harus Anda cari untuk mengeditnya.

Inspeksi nama pekerjaan:

Inspeksi periode kerja:

Inspeksi daftar butir:

Gunakan pendekatan yang sama seperti yang dilakukan pada bagian "Professional Profile" untuk mengedit konten bagian CV yang lainnya. Untuk mengedit nama pekerjaan, periode kerja atau daftar butir temukan kode yang cocok dengan yang Anda lihat di jendela inspektor, seperti yang Anda lakukan di tiap pengeditan sampai sejauh ini.

Gunakan tag p untuk membuat paragraf, dan untuk bagian "Professional Profile" jika Anda menutup suatu bagian dengan sebuah paragraf, pastikan tagnya <p>nya berisi class=last, yakni <p class="last">...</p>.

Catatan: jika Anda ingin menambahkan bagian baru di CV, atau menghapus yang sudah ada, Anda akan membutuhkan inspektor untuk menemukan kode tag yang melingkupi keseluruhan bagian.

Di contoh ini Anda akan melihat seluruh bagian dilingkupi dengan tag <div class="cv-item">...</div>.

Dalam kode Anda sekarang bisa ditemukan satu blok kode dan lakukan salin tempel untuk membuat item baru, atau hapus secara keseluruhan jika Anda ingin menghapusnya.

Sunting Pesan Hak Cipta

Dengan bagian CV Anda uang sudah diedit, kita menuju ke item terakhir di daftar perubahan; pesan hak cipta di catatan kaki. Sekali lagi kita akan menggunakan proses yang sama. Klik kanan pesan hak cipta dan inspeksi:

Lalu temukan kode yang cocok di HTML Anda dan sunting dengan memasukkan angka tahun saat ini dan nama Anda:

Dan Selesai!

Kerja yang bagus! Anda baru saja mengubahsuai sepenuhnya templat HTML ini untuk menunjukkan konten Anda sendiri. Saya harap sekarang Anda merasa percaya diri untuk melakukan pengubahsuaian lebih banyak kode di masa depan.

Templat yang kita kerjakan mungkin relatif sederhana, tetapi ingatlah bahwa proses menyuntingnya selalu sama, sekompleks apapun kelihatannya templat tersebut. Inspeksi saja templatnya, lalu identifikasi kode untuk bagian yang Anda ingin ubah, lalu temukan kode itu di file HTML Anda dan lakukan penyuntingan.

Apabila Anda sudah selesai menyunting, kapan saja Anda melihat suatu tag HTML yang tidak dikenal, jangan biarkan itu menghambat Anda. Ada sangat banyak informasi online yang bisa membantu Anda mempelajari fungsi masing-masing tag.

Untuk lebih banyak bantuan di sepanjang proses belajar, periksa panduan-panduang pembelajaran berikut:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.