Cara Membuat Teks Tebal dengan HTML

PDF download Unduh PDF
PDF download Unduh PDF

HTML memudahkan proses penebalan teks. Ada beberapa tag yang bisa dipelajari jika Anda menginginkan lebih banyak pilihan. Untuk saat ini, Anda bisa meluangkan beberapa menit untuk mempelajari beberapa CSS dasar dan menambahkannya langsung ke dokumen HTML Anda. Cara ini lebih cepat daripada memasukkan seluruh lembar gaya ( stylesheet ) CSS dan akan membuat Anda bisa mengatur ketebalan tampilan teks dengan lebih sempurna.

Metode 1
Metode 1 dari 2:

Membuat Teks Tebal dengan HTML

PDF download Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3d\/Create-Bold-Text-With-HTML-Step-1-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3d\/Create-Bold-Text-With-HTML-Step-1-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Di HTML5 (standar HTML yang dianjurkan), penggunaan strong tag disarankan untuk teks penting. Strong tag hampir selalu terlihat sebagai teks tebal di peramban web.
    • Tempatkan teks yang ingin ditebalkan di antara tag ini: <strong> teks tebal di sini </strong>.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4f\/Create-Bold-Text-With-HTML-Step-2-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4f\/Create-Bold-Text-With-HTML-Step-2-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Heading (kepala tulisan) biasanya ditempatkan di atas halaman web atau di awal bagian baru. Umumnya, kepala tulisan ditampilkan lebih tebal dan lebih besar daripada huruf biasa, tetapi hal ini bisa bervariasi. Ada enam jenis heading tag , dari mulai <h1> sampai <h6>. Ikuti petunjuk berikut saat menggunakannya:
    • Tag h1, ditulis <h1> Teks Heading Anda </h1> adalah heading terpenting, biasanya merupakan teks paling besar di bagian atas halaman.
    • <h2> Tag h2 </h2> adalah heading terpenting kedua, begitu seterusnya sampai <h6> h6, yang terkecil </h6>.
    • Gunakan tag-tag ini secara proporsional, hanya untuk mengatur halaman web Anda. [1] Pengguna harus bisa membaca heading dengan cepat dan menemukan topik yang mereka cari.
    • Saat membuat subheading (anak judul), turunkan tag satu tingkat di bawahnya. Dengan kata lain, jangan meloncat dari <h1> ke <h3>. Hal ini membantu mempertahankan format halaman HTML saat ditransfer ke format lain. [2]
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/14\/Create-Bold-Text-With-HTML-Step-3-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/14\/Create-Bold-Text-With-HTML-Step-3-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tag <b> masih bisa digunakan di HTML5, tetapi <strong> lebih disukai dalam banyak situasi. Gunakan tag <b> hanya saat teks harus ditebalkan untuk alasan gaya, bukan untuk memberi tekanan pada teks tersebut. Contohnya antara lain: kata kunci atau perbendaharaan kata untuk sebuah perjalanan, atau nama produk dalam artikel halaman web berisi ulasan mengenai produk tersebut. [3]
    • Seperti kebanyakan tag lainnya, <b>tempatkan teks yang akan ditebalkan di antara tag pembuka dan tag penutup</b>.
    Iklan
Metode 2
Metode 2 dari 2:

Membuat Teks Tebal dengan “ Inline -CSS”

PDF download Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/bf\/Create-Bold-Text-With-HTML-Step-4-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bf\/Create-Bold-Text-With-HTML-Step-4-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    CSS adalah cara yang lebih solid dan konsisten untuk mengatur gaya halaman web Anda. Hal ini menjadikannya sebagai cara ideal untuk menentukan “tampilan” halaman web, sementara HTML didesain untuk menentukan “apa yang dimaksudkan” halaman web Anda. Penggunaan tag HTML untuk memberi tekanan pada teks yang penting memang tidak salah, tetapi CSS akan membuat Anda bisa mengatur tampilan visual teks tebal secara lebih terperinci.
    • Cobalah membuka halaman dasar HTML dengan beberapa peramban web berbeda, Anda mungkin akan melihat perbedaan pada tampilannya. CSS memberitahu peramban web cara menampilkan teks yang sudah dimodifikasi dengan tag yang diberikan, untuk meminimalkan banyaknya perbedaan.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/Create-Bold-Text-With-HTML-Step-5-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/Create-Bold-Text-With-HTML-Step-5-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Jika Anda belum memahami CSS, penggunaan “ inline -CSS” adalah cara bagus untuk memulainya. Walaupun Anda bisa menggunakan “ inline -CSS” untuk memodifikasi tag-tag seperti <p> atau <h1>, terkadang Anda mungkin ingin mengganti teks yang tidak berada di antara tag . [4] Jika begitu, tempatkan teks di antara tag <span></span>. Tag ini tidak memunculkan efek dengan sendirinya, tetapi harus diikuti dengan tambahan lain. Berikut adalah contoh yang akan kita gunakan:
    • <span>Saya mempelajari cara menebalkan teks ini dengan inline -CSS.</span>
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b3\/Create-Bold-Text-With-HTML-Step-6.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b3\/Create-Bold-Text-With-HTML-Step-6.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Atribut HTML ditulis langsung ke dalam tag , dalam tanda kurung < >. Atribut gaya tersebut diperlukan untuk memasukkan CSS ke dalam tag HTML, jadi kita akan memasukkan style= ke dalam span tag :
    • <span style=>Saya mempelajari cara menebalkan teks ini dengan inline -CSS</span>.
    • Penambahan atribut gaya tanpa menentukan atau memasukkan gaya yang digunakan tidak akan berpengaruh apa pun. Kita mempelajarinya setahap demi setahap agar lebih mudah dipahami.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/99\/Create-Bold-Text-With-HTML-Step-7.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Create-Bold-Text-With-HTML-Step-7.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Properti CSS ditambahkan sebagai bagian dari atribut gaya. Dalam contoh ini, kita akan menggunakan properti font-weight , yaitu properti untuk menentukan ketebalan huruf. Properti tunggal ini bisa digunakan untuk menampilkan teks tebal (ekstra tebal), teks tipis, atau bahkan menentukan kalau teks tersebut harus ditampilkan dengan ketebalan normal. Tambahkan "font-weight: " setelah tanda =, seperti berikut ini:
    • <span style="font-weight: ">Saya mempelajari cara menebalkan teks dengan inline -CSS.</span>
    • Sekali lagi, tag ini belum selesai dan tidak akan mempengaruhi apa pun.
    • Jangan lupa menuliskan tanda petik sebelum dan setelah font-weight: .
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2e\/Create-Bold-Text-With-HTML-Step-8.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Create-Bold-Text-With-HTML-Step-8.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Satu-satunya hal yang perlu kita lakukan sekarang adalah menambahkan nilai untuk bobot huruf, di antara font-weight: dan tanda petik terakhir. Ada beberapa opsi variasi tingkat ketebalan, tetapi nilai "bold" adalah cara yang paling mudah digunakan: [5]
    • <span style="font-weight:bold"> Saya mempelajari cara menebalkan teks ini dengan inline -CSS </span>.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/04\/Create-Bold-Text-With-HTML-Step-9.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/04\/Create-Bold-Text-With-HTML-Step-9.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    CSS memberikan lebih banyak opsi pada Anda dibandingkan HTML, Anda tidak perlu merasa terbatasi. Berikut adalah beberapa alternatif selain nilai "bold": [6]
    • <span style="font-weight:bolder"> Teks "bolder" akan selalu lebih tebal daripada elemen induk </span>. Sebagai contoh, jika Anda menebalkan seluruh paragraf dengan "bold" , gunakanlah "bolder" di satu kalimat dalam paragraf tersebut, kalimat ini akan menjadi lebih tebal.
    • <span style="font-weight:normal"> Teks "normal" akan terlihat sebagai teks biasa walaupun berada dalam tag bold </span>.
    • <span style="font-weight:900"> Anda bisa menggunakan angka dari 100 sampai 900 untuk menentukan ketebalan. 400 adalah nilai teks normal, sedangkan teks tebal menggunakan nilai 700 sebagai standarnya. </span>. [7]
    Iklan

Tips

  • Saat menggunakan properti font-weight di CSS, gunakan hanya nilai numerik kelipatan 100. Nilai yang berada di antaranya akan otomatis dibulatkan. [8]
  • Lembar CSS eksternal ( embedded sheet ) merupakan cara yang jauh lebih baik untuk menebalkan teks, Anda bisa memodifikasi dan dengan mudah mengubah seluruh dokumen sekaligus.
  • Masing-masing jenis huruf hanya memiliki pilihan font weights (bobot huruf) yang sudah ditentukan. Saat menggunakan CSS, font weights yang tersedia dan terdekat dengan jumlah yang sudah ditentukanlah yang dipakai. Artinya, Anda tidak selalu akan melihat perbedaan di antara dua font weights yang lebih tebal dan font weights normal.
Iklan

wikiHow Terkait

Cara Setting Equalizer Terbaik untuk Bass
Cara
Memperbaiki Print Spooler
Cara
Membaca Multimeter
Cara
Membuat Berkas Zip
Cara
Mengurutkan Data secara Alfabetis di Google Docs
Cara
Melakukan Reset pada PS3
Cara
Berpura pura Meretas
Cara
Mengukur Televisi
Cara
Memasukkan Data di SPSS
Cara
Mencari Foto Seseorang
Eror No Location Found di Aplikasi Find My: Penjelasan Arti & Solusinya
Cara
Keluar dari Netflix di TV
Cara
Mendeteksi Kamera dan Mikrofon Tersembunyi
Cara Mengatasi Masalah Gagal Login ke ChatGPT
Iklan

Referensi

  1. ↑ http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf
  2. ↑ http://www.hobo-web.co.uk/headers/
  3. ↑ http://www.quackit.com/html/codes/bold/
  4. ↑ http://reference.sitepoint.com/html/core-attributes/style
  5. ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
  6. ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
  7. ↑ http://www.w3schools.com/cssref/pr_font_weight.asp
  8. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Tentang wikiHow ini

Bahasa lain
Halaman ini telah diakses sebanyak 18.918 kali.

Apakah artikel ini membantu Anda?

Iklan