7 Tag Dasar HTML Untuk Mempercantik Tulisan Pada Blog

Kumpulan tag html untuk mempercantik tulisan blog
Mempunyai tampilan blog atau website yang friendly dan enak dipandang adalah impian semua blogger, karna blog yang cantik senantiasa akan membuat para visitor merasa nyaman dan ingin berlama-lama di blog anda. Jadi jangan heran jika blog anda kekurangan visitor hal itu bisa jadi karna konten yang anda sajikan tidak berkualitas dan disisi lain tampilan blog anda yang kurang menarik sehingga membuat para pengunjung merasa tidak nyaman dan langsung keluar dari website anda.

Untuk memperindah tampilan blog banyak hal yang perlu kamu lakukan antara lain seperti mengedit template, mengubah warna tulisan, membuat teks berjalan, teks miring, teks tebal, menyisipkan gambar, dan lain-lain. maka modal utama yang diperlukan adalah pengetahuan seputar HTML, apa itu HTML? Silahkan baca selengkapnya tentang Pengertian, Fungsi dan Cara Membuat File HTML.

Berikut ini BlogReOt sudah menyiapkan 7 tag HTML dasar yang paling sering digunakan oleh para blogger untuk mempercantik tampilan tulisan pada postingan blog.

1. Membuat text tebal (bold)
Teks tebal atau bold (dalam bahasa inggris) biasanya digunakan untuk membuat title atau judul artikel, sehingga para pembaca bisa membedakan antara judul dan isi artikel. bayangkan jika judul dan isi artikel sama-sama menggunakan huruf kecil, hal ini tentu kurang menarik.
Untuk membuat teks tebal kita akan menggunakan tag <b> diawal dan tag </b> diakhir atau bisa juga menggunakan tag <strong> yang diakhiri dengan tag </strong>. Contoh:
<b>Text tebal anda disini</b>
Hasilnya:
Text tebal anda disini
<strong>Text tebal anda disini</strong>
Hasilnya:
Text tebal anda disini

2. Membuat text miring (italic)
Teks dengan gaya miring atau italic biasanya digunakan untuk menandai kata-kata yang pengucapannya berbeda pada artikel, seperti kata dalam bahasa inggris atau kata yang tidak umum digunakan atau yang disebut juga Alternative Voice.
Untuk membuat teks bergaya miring kita akan menggunakan tag <i> singkatan dari italic atau tag <em> singkatan dari stresses emphasis.
Contoh menggunakan tag <i>:
<i>Text miring anda disini</i>
Hasilnya:
Text miring anda disini

Contoh menggunakan tag <em>:
<em>Text miring anda disini</em>
Hasilnya:
Text miring anda disini

Meskipun kedua tag tersebut sama-sama menghasilkan teks miring, namun tag <i> dan tag <em> mempunyai tujuan yang berbeda. Tag <em> digunakan untuk penekanan kata, sedangkan tag <i> digunakan untuk kata asing yang pengucapannya berbeda.

Dalam penggunaan sehari-hari, kedua tag ini sering dipertukarkan. Bahkan tag <i> lebih sering digunakan dibandingkan dengan tag <em>. Akan tetapi beberapa programmer berpendapat bahwa kita tidak harus mengikuti aturan perbedaan ini, dan menggunakan apa yang lebih familiar selama hal itu tidak menjadi masalah.

baca juga: Cara membuat daftar atau list menu pada HTML

3. Membuat text bergaris bawah (underline)
Penulisan text dengan garis bawah atau underline biasa digunakan untuk menandai kata atau penekanan kata yang dianggap penting. Untuk membuat karakter dengan garis bawah di dalam HTML, kita bisa menggunakan tag <u> dan tag <ins>

  • Tag <u> untuk Penulisan Text dengan Garis Bawah
  • Tag <u> adalah singkatan dari underline, atau garis bawah. Tag ini digunakan untuk membuat karakter text dengan garis bawah. Sama seperti tag <i> dan <b>, tag <u> tidak memiliki tujuan apa-apa dan lebih kepada tampilan dari text.
    Tag <u> masuk kedalam tipe tag inline, yang akan mengikuti alur text yang ada.

    Contoh menggunakan tag <u>:
    <u>Text bergaris bawah anda disini</u>
    Hasilnya:
    Text bergaris bawah anda disini

  • Tag <ins> untuk Penulisan Text dengan Garis Bawah
  • Tag <ins> adalah kependekan dari Insert. Meskipun kedua tag ini sama-sama digunakan untuk membuat tulisan bergaris bawah, namun keduanya memiliki fungsi yang berbeda-beda. Tag <ins> ditujukan untuk bagian text baru yang ditambahkan ke dalam konten web. Tag <ins> dirancang untuk menegaskan bagian text yang sebelumnya tidak ada. Tag ini adalah kebalikan dari tag <del>.

    Contoh menggunakan tag <ins>:
    <ins>Text bergaris bawah anda disini</ins>
    Hasilnya:
    Text bergaris bawah anda disini



4. Membuat teks tercoret (bergaris tengah)
Text tercoret dikenal juga dengan istilah strikethrough. Strikethrough biasanya digunakan untuk mengoreksi text atau bagian dari kalimat. Untuk membuat text tercoret ini, kita menggunakan tag <s> atau tag <del>.

  • Membuat teks tercoret menggunakan tag <s> (Strikethrough)
  • Tag <s> adalah singkatan dari Strikethrough. Strikethrough adalah istilah yang dipakai untuk membuat text dengan garis tercoret. Tag <s> tidak memiliki arti apa-apa dan murni merupakan format text untuk menampilkan text bergaris tengah atau strikethrough.

    Tag <s> masuk kedalam kategori tag inline, yang akan mengikuti alur text yang ada.
    Berikut adalah contoh cara penulisan dan penggunaan tag <s> di dalam HTML:
    <s>Text tercoret anda disini</s>
    Hasilnya:
    Text tercoret anda disini

  • Membuat teks tercoret menggunakan tag <del>
  • Tag <del> adalah singkatan dari delete. Sesuai dengan namanya, tag <del> ditujukan untuk penulisan text yang dianggap salah dan ingin dikoreksi. Tag <del> merupakan lawan dari tag <ins> yang bertujuan untuk penambahan text baru.

    Berikut adalah contoh cara penulisan dan penggunaan tag <del> didalam HTML:
    <del>Text bergaris bawah anda disini</del>
    Hasilnya:
    Text bergaris bawah anda disini

baca juga: Cara membuat dan mempercantik table pada HTML

5. Memperbesar atau memperkecil huruf teks (size)
Untuk mengubah teks menjadi lebih besar atau lebih kecil kita menggunakan tag <font size="ukuran huruf">. Ukurannya bisa anda sesuaikan sesuai dengan keperluan anda.

Contoh cara memperbesar dan memperkecil teks di HTML:
<font size="5">Text besar anda disini</font>
<font size="0.5">Teks kecil anda disini</font>
Hasilnya:
Text besar anda disini
Teks kecil anda disini

5. Membuat teks persamaan matematis (sub/sup)
Dalam membuat konten web, terkadang kita perlu membuat dan memasukkan persamaan matematika ke dalam HTML, seperti pangkat, rumus kimia, dll. misalnya 32 atau H2O. Perhatikan teks yang saya beri tebal diatas, ada angka yang lebih menonjol keatas dan ada juga angka yang lebih menonjol kebawah. Itulah yang dimaksud dengan tag superscript dan tag subscript.
  • Tag <sup> Untuk Membuat Text Superscript
  • Tag <sup> adalah singkatan dari superscript, yaitu sebutan untuk karakter kecil diatas text. Umumnya superscript digunakan didalam persamaan matematika seperti dalam pembuatan pangkat. Misalnya dalam angka 52, angka 2 adalah superscript.
    Contoh penggunaan tag <sup> pada HTML:
    3<sup>2</sup>=9
    Hasilnya:
    32=9
  • Tag <sub> Untuk Membuat Text Subscript
  • Tag <sub> adalah singkatan untuk Subscript. Subscript adalah penyebutan untuk karakter kecil yang diletakkan sedikit di bawah baris karakter normal. Biasanya subscript digunakan untuk formula kimia seperti H2O.
    Contoh penggunaan tag <sub> pada HTML:
    H<sub>2</sub>+O<sub>2</sub> --- H<sub>2</sub>O
    Hasilnya:
    H2+O2 --- H2O

    Baik tag <sup> maupun tag <sub> kemungkinan akan jarang kita gunakan, kecuali jika anda membuat artikel tentang matematika atau kimia. Untuk persamaan matematika yang cukup rumit tentunya anda harus menggunakan bahasa pemograman web lain seperti JavaScript dan menggunakan notasi LaTeX.

6. Mengubah warna tulisan teks (font color)
Secara default memang warna tulisan pada blog atau pada HTML kita sudah ditetapkan pada css atau template yang kita gunakan, namun kita juga bisa mengubahnya pada teks tertentu tanpa harus mengedit css atau templatenya. Yaitu dengan menggunakan tag <font color="#kode warna">.

Warnanya bisa anda ubah sesuai dengan selera anda, untuk mengetahui kode warna dalam HTML lengkap, silahkan baca : Kumpulan kode warna HTML lengkap (Hex color)

Contoh mengubah warna teks pada HTML:
<font color="#993399">Text berwarna anda disini</font>
Hasilnya:
Text berwarna anda disini

7. Menggabungkan beberapa tag dalam satu kalimat
Maksudnya, jika kamu ingin menggunakan lebih dari satu tag pada sebuah kalimat, seperti membuatnya tebal, miring dan berwarna. Maka kamu harus menggunakan tiga tag, yaitu <b> <i> dan <font color>.

Contohnya:
<b><i><font color="#ADFE88">Text tebal, miring dan berwarna anda disini</font></i></b>
Hasilnya:
Text tebal, miring dan berwarna anda disini

Itulah 7 tag dasar HTML untuk mengubah dan mempercantik tulisan pada blog atau HTML. Silahkan dishare untuk teman-teman. Sementara jika ada yang ingin menambahkannya silahkan tuangkan di kolom komentar. Terimakasih

Sign up here with your email address to receive updates from this blog in your inbox.

0 Response to "7 Tag Dasar HTML Untuk Mempercantik Tulisan Pada Blog"

Post a Comment

Kata-kata dan bahasa anda adalah gambaran kualitas diri anda...