Kode HTML yang Wajib Dihapal Blogger Dalam Pembuatan Konten

Adakalanya kita perlu menghapal sesuatu agar mudah memanggilnya kembali dari ingatan kita ketika kita membutuhkannya. Salah satu yang perlu dihapalkan oleh para blogger adalah beberapa kode html. Sebenarnya kita bisa saja mencari lewat google untuk menggunakan kode html tertentu. Kita juga bisa menggunakan toolbar di editor blog untuk menggunakan kode html tertentu. Tapi lebih baik jika kita menghapalnya, agar ketika menulis post di blog kita bisa melakukannya dengan cepat tanpa nyontek terlebih dahulu.

Melalui post ini saya ingin berbagi kode html yang wajib dihapalkan agar blogger dapat lebih cepat membuat sebuah post tanpa mencontek dan tanpa menggunakan toolbar yang terdapat di editor. Kode html tersebut meliputi kode untuk format teks, kode untuk membuat daftar tidak terurut dan terurut, kode untuk membuat link atau tautan, dan kode untuk menyisipkan gambar.

• Kode untuk format teks
• Kode untuk membuat daftar
• Kode untuk membuat link/tautan
• Kode untuk menyisipkan gambar

Kode untuk Mengatur Format Teks pada HTML

Dalam pembuatan tulisan untuk halaman web, perlu diperhatikan beberapa tag HTML agar tampilan tulisan terlihat rapi dan enak dibaca.

Huruf Tebal, Huruf Miring, dan Huruf Berbaris Bawah

Pada sebuah tulisan, kadang diperlukan adanya penegasan terhadap suatu kata, frase, atau kalimat tertentu. Penegasan tersebut biasanya dilakukan dengan cara menebalkan huruf, memiringkan huruf, atau mengarisbawahi huruf. Untuk menebalkan huruf, caranya adalah dengan menambahkan tag b atau tag strong pada huruf/kata/frase/kalimat yang hendak ditebalkan. Untuk memiringkan huruf adalah dengan menggunakan tag i atau tag em. Sedangkan untuk mengarisbawahi huruf adalah dengan menggunakan tag u.

Huruf tebal ini diletakan di antara tag b.
Huruf miring ini diletakan di antara tag i.
Sedangkan Huruf yang bergaris bawah ini diletakan di antara tag u.

Contoh Penggunaan kodenya adalah sebagai berikut.

<b>Tulisan yang mau ditebalkan</b>
<i>Tulisan yang mau dimiringkan</i>
<u>Tulisan yang diberi garis bawah</u>

Perataan Teks

Perataan teks yang dimaksud di sini adalah bagaimana kita menampilkan teks agar terletak di kiri (kalau yang ini otomatis tanpa kode html pun teks pasti terletak di kiri), di tengah, dan di kanan.

Untuk perataan teks ini, kita bisa menggunakan tag paragraf (p) atau span beserta kode CSS secara inline berikut.
style="text-align:left/right/center"

Teks ini berada di tengah halaman

Teks ini berada di kanan halaman

Contoh penggunaannya adalah sebagai berikut.

<p style="text-align:center">Membuat teks di tengah</p>
<p style="text-align:right">Membuat teks di kanan</p>

Kode HTML yang Digunakan Dalam Membuat Daftar atau List

Untuk membuat baris baru pada dokumen HTML bisa dilakukan dengan menambahkan tag br pada awal tulisan yang ingin ditampilkan di baris baru. Tapi adakalanya kita perlu menuliskan beberapa garis baru tersebut sebagai sebuah daftar yang memiliki tanda di depannya. Dalam HTML, dikenal dua istilah untuk menampilkan daftar bertanda, yaitu unordered list disingkat ul (daftar yang tidak berurutan, tanda depannya bukan berupa urutan nomor) dan ordered list disingkat ol (daftar berurutan dan tanda depannya berupa nomor berurutan).

Contoh Daftar Tidak Berurutan

• Bawang Merah
• Bawang Putih
• Cabe Merah

Contoh Daftar Berurutan

Pancasila

1. Ketuhanan yang Maha Esa
2. Kemanusiaan yang Adil dan Beradab
3. Persatuan Indonesia
4. Kerakyatan yang Dipimpin oleh Hikmah Kebijaksanaan dalam Permusyawaratan/Perwakilan
5. Keadilan Sosial Bagi Seluruh Rakyat Indonesia

Berikut ini adalah contoh penggunaannya.

<ul>
<li>Daftar pertama</li>
<li>Daftar kedua</li>
</ul>

Untuk daftar berurutan yang ditandai dengan nomor berurut di depannya tinggal ganti ul dengan ol.

Kode HTML untuk Membuat Link atau Tautan

Dengan adanya link atau tautan kita bisa membuat sebuah tulisan menjadi hidup dan terhubung dengan halaman atau bagian lain sebuah website. Kode HTML yang digunakan untuk menghubungkan suatu halaman dengan halaman lainnya adalah tag a. Kita bisa menghubungkan suatu halaman dengan halaman lain melalui suatu huruf/kata/frase/kalimat atau bahkan gambar. Jika diklik akan muncul halaman lain yang dikaitkan. Istilah ini disebut sebagai link atau tautan.

Secara sederhana kode untuk menyisipkan tulisan bertaut adalah sebagai berikut.

<a href="https://yes.web.id">Teks Link</a>

Pada kode tersebut terdapat tag a kemudian di bagian pembuka terdapat attribute href yang diikuti oleh tanda sama dengan dan dilanjutkan dengan alamat di dalam tanda "". Alamat yang terdapat di antara tanda "" adalah alamat tujuan dari tautan pada tulisan yang dibuat. Di antara pembuka dan penutup kode HTML ada tulisan Teks Link. Tulisan tersebut adalah tulisan yang muncul berupa tautan menuju alamat yang dituju. Kode tersebut pada halaman web memiliki tampilan sebagai berikut.

Teks Link

Tulisan bertaut tersebut apabila diklik akan menuju halaman tujuan yang terbuka di tab yang sama. Jika kita ingin alamat tujuan terbuka di tab baru, kita tambahkan target="_blank" pada bagian pembuka. Berikut ini adalah contoh penggunaannya.

<a href="https://yes.web.id" target="_blank">Teks Link</a>

Kita juga bisa menambahkan attribute title="..." yang berfungsi untuk menampilkan informasi berupa tulisan ketika link tersebut ditunjuk (hover) oleh pointer mouse. Penempatannya diletakan pada pada bagian pembuka.

<a href="https://yes.web.id" target="_blank" title="Tulisan muncul ketika ditunjuk pointer">Teks Link</a>

Kode HTML untuk Menyisipkan Gambar Beserta Atributnya

Konten sebuah halaman web tidak hanya terdiri dari tulisan. Kita bisa menambahkan berbagai macam komponen seperti gambar, video, animasi dari flash, dan sebagainya. Kode HTML yang perlu diketahui berikutnya adalah bagaimana menambahkan gambar pada halaman website HTML. Tag HTML yang digunakan untuk menyisipkan gambar pada halaman web HTML adalah tag img. Berikut adalah penjelasan mengenai bagaimana menyisipkan gambar pada halaman website HTML.

Gambar yang akan ditampilkan saya simpan di sebuah lokasi pada hosting yang saya gunakan dengan url sebagai berikut.

https://yes.web.id/image/menyisipkan-gambar.jpg

Untuk menampilkan gambar alakadarnya, kita hanya perlu menggunakan kode berikut ini.

<img src="https://yes.web.id/image/menyisipkan-gambar.jpg"/>

Maksud dari kode tersebut adalah tag img menunjukkan bahwa kode HTML tersebut adalah untuk menampilkan image. Kode src menunjukkan url source (sumber) gambar yang akan ditampilkan. Kode tersebut akan tampil sebagai berikut.

Karena sifat internet yang labil, mungkin saja gambar yang ingin kita tampilkan tidak dapat diatasi dengan baik oleh server dan tidak dapat tampil. Untuk mengatasinya, kita bisa mengganti gambar tersebut dengan teks. Ini juga berfungsi sebagai salah satu metode SEO gambar agar dapat tampil di hasil pencarian mode gambar. Kita bisa menambahkan tag alt untuk menampilkan alternatif teks jika gambar tidak dapat tampil.

<img src="https://yes.web.id/gambartidakada.jpg" alt="Stop-Contact"/>

Jika gambar tidak dapat muncul karena server gambar sedang bermasalah, posisi yang seharusnya diisi gambar akan diganti oleh tulisan "Stop-Contact".

Kita juga bisa menambahkan keterangan gambar pada saat gambar tersebut ditunjuk (hover) oleh pointer mouse. Caranya adalah dengan menambahkan tag title seperti berikut.

<img src="https://yes.web.id/image/menyisipkan-gambar.jpg" alt="Stop-Contact" title="Stop-Contact"/>

Coba tunjuk gambar berikut, akan muncul tulisan sesuai dengan yang teks yang tertera pada tag title.

Kita juga bisa menggabungkan kode untuk link dan gambar sekaligus agar gambar yang kita tampilkan tertaut pada alamat tertentu. Caranya adalah dengan menggunakan kode HTML untuk link dan meletakan kode HTML untuk gambar di antara kode HTML link. Berikut adalah contoh kodenya.

<a href="https://yes.web.id"><img src="https://yes.web.id/image/menyisipkan-gambar.jpg" alt="Stop-Contact" title="Stop-Contact"/></a>

Gambar tersebut akan tertaut ke halaman yang sesuai dengan url di belakang href.

Memang, dengan adanya editor WYSIWYG pembuatan dokumen HTML menjadi lebih mudah. Tetapi bagi sebagian orang, membuat tulisan dengan menuliskan kode html secara langsung masih menjadi pilihan favorit. Selain karena lebih cepat dan tidak memerlukan plugin tambahan, pembuatan tulisan dengan menuliskan kode HTML langsung lebih terkontrol, sehingga tidak terjadi pemborosan tag atau kode lainnya.