Cara menggunakan warna teks html

Question

Teks yang diformat akan lebih mudah dibaca, karena terdapat penekanan seperti teks tebal, miring, dan garis bawah

Table of Contents Show

Membuat Teks Tebal
Buat Teks Miring
Menggarisbawahi Teks
Membuat Teks Tergores
Membuat Peringkat dalam HTML
Membuat Penanda untuk Teks
Pemformatan Teks untuk Komputer
Menggabungkan Format
Apa berikutnya?
Bagaimana cara mengatur warna teks?
Gaya apa yang digunakan untuk mengubah warna teks?
Apa itu HTML warna?
Properti CSS apa yang dapat mengubah warna teks elemen HTML?

Saat kita mencari kata atau kalimat penting. mata kita akan lebih mudah menemukannya dalam teks berformat daripada teks biasa

Oleh karena itu, dalam membuat web. ada baiknya menggunakan format teks

Nah, di dalam HTML terdapat tag-tag yang khusus digunakan untuk pemformatan teks

Apa itu?

Mari berdiskusi

Membuat Teks Tebal

Teks tebal biasanya digunakan untuk memberi penekanan pada teks tertentu, misalnya seperti judul, subjudul, huruf penting, dll

Tag yang digunakan untuk membuat teks tebal dalam HTML adalah tag <b> (tebal) dan tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

0. Anda bebas menggunakan apa saja, hasilnya akan sama-sama kental

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Tebal di HTML</title>
</head>
<body>
  <h1>Text Tebal di HTML</h1>
  <p>
    <strong>Teks formatting itu penting!</strong> Karena dapat membuat tulisan 
    terlihat lebih menarik sehingga akan membuat <b>pengunjung senang</b> 
    membacanya.
  </p>
</body>
</html>

_

Hasil

Buat Teks Miring

Huruf miring biasanya digunakan untuk menekankan kata atau istilah baru. Teks miring pada HTML dapat dibuat dengan tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

1 (miring) dan juga tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

2 (penekanan)

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

Hasil

Menggarisbawahi Teks

Garis bawah biasanya digunakan untuk menandai teks yang disisipkan atau teks yang memiliki arti penting dibandingkan dengan teks normal lainnya

Garis bawah dalam HTML dapat dibuat dengan tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

3 (underlaine) atau juga tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

4 (insert)

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Garis Bawah di HTML</title>
</head>
<body>
  <h1>Garis Bawah di HTML</h1>
  <p>
    <u>Text formatting itu penting</u>, karena dapat membuat teks terlihat
    lebih menarik dibandingkan <del>text biasa</del> <ins>plain text</ins>.
  </p>
</body>
</html>

Hasil

Pada contoh di atas, kita menggunakan tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

5 untuk mencoret teks. Kemudian diikuti dengan teks yang ditambahkan (insert)

Membuat Teks Tergores

Teks yang dicoret berarti teks yang dihapus. Biasanya untuk menginformasikan kepada pembaca bahwa teks tersebut tidak digunakan atau dihapus

Tag untuk membuat teks yang dicoret pada HTML adalah tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

6 (coret) atau bisa juga tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

5 (delete)

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Tercoret di HTML</title>
</head>
<body>
  <h1>Text Tercoret di HTML</h1>
  <p>
    Coretlah teks yang tidak <s>dibutuhkan</s> terpakai, ini bisa memberitahu 
    pembaca tentang perbaikan dari teks tersebut. Kadang juga teks <del>tercoret</del> 
    <ins>yang dicoret</ins>, diperbaiki dengan menambahkan teks dengan garis bawah.
  </p>
</body>
</html>

Hasil

Membuat Peringkat dalam HTML

Peringkat biasanya digunakan dalam formula. Ada dua jenis peringkat yang dapat dibuat dalam HTML, yaitu peringkat di atas (superskrip) dan peringkat di bawah (subskrip)

Tag untuk membuat rank dalam HTML adalah tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

8 dan

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

9

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

8 untuk membuat peringkat di atas

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

_9 untuk membuat peringkat di bawah ini

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Membuat Pangkat di HTML</title>
</head>
<body>
  <h1>Membuat Pangkat di HTML</h1>
  <p>
    Rumus luas persegi adalah S<sup>2</sup>, dimana <i>S</i> adalah sisi dari 
    persegi. Lalu O<sub>2</sub> adalah rumus kimia dari oksigen.
  </p>
</body>
</html>

Hasil

Membuat Penanda untuk Teks

Marker biasanya digunakan untuk menandai teks penting atau kata kunci penting. Penanda dalam HTML dapat dibuat dengan tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Garis Bawah di HTML</title>
</head>
<body>
  <h1>Garis Bawah di HTML</h1>
  <p>
    <u>Text formatting itu penting</u>, karena dapat membuat teks terlihat
    lebih menarik dibandingkan <del>text biasa</del> <ins>plain text</ins>.
  </p>
</body>
</html>

2

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Membuat marker teks di HTML</title>
</head>
<body>
  <h1>Membuat marker teks di HTML</h1>
  <p>
    Marker biasanya digunakan untuk menandai bagian teks yang penting.
    Kalau di dunia nyata, kita <mark>menggunakan stabilo</mark> untuk 
    membuat marker.
  </p>
</body>
</html>

Hasil

Warna standar penanda adalah kuning. Kita bisa mengubah warna ini dengan gaya CSS

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Membuat marker teks di HTML</title>
</head>
<body>
  <h1>Membuat marker teks di HTML</h1>
  <p>
    Marker biasanya digunakan untuk menandai bagian teks yang penting.
    Kalau di dunia nyata, kita <mark style="background-color: pink">menggunakan stabilo</mark> untuk 
    membuat marker.
  </p>
</body>
</html>

Maka hasilnya, marker akan berwarna pink

Pemformatan Teks untuk Komputer

Selain pemformatan teks di atas, ada juga pemformatan teks yang dikhususkan untuk menandai teks yang berasal dari komputer. Berikut adalah beberapa tag yang digunakan untuk memformat teks dari komputer

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Garis Bawah di HTML</title>
</head>
<body>
  <h1>Garis Bawah di HTML</h1>
  <p>
    <u>Text formatting itu penting</u>, karena dapat membuat teks terlihat
    lebih menarik dibandingkan <del>text biasa</del> <ins>plain text</ins>.
  </p>
</body>
</html>

3 untuk menandai bagian dari kode program;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Garis Bawah di HTML</title>
</head>
<body>
  <h1>Garis Bawah di HTML</h1>
  <p>
    <u>Text formatting itu penting</u>, karena dapat membuat teks terlihat
    lebih menarik dibandingkan <del>text biasa</del> <ins>plain text</ins>.
  </p>
</body>
</html>

4 untuk menandai output dari program komputer;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Garis Bawah di HTML</title>
</head>
<body>
  <h1>Garis Bawah di HTML</h1>
  <p>
    <u>Text formatting itu penting</u>, karena dapat membuat teks terlihat
    lebih menarik dibandingkan <del>text biasa</del> <ins>plain text</ins>.
  </p>
</body>
</html>

5 untuk menandai tombol keyboard;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Garis Bawah di HTML</title>
</head>
<body>
  <h1>Garis Bawah di HTML</h1>
  <p>
    <u>Text formatting itu penting</u>, karena dapat membuat teks terlihat
    lebih menarik dibandingkan <del>text biasa</del> <ins>plain text</ins>.
  </p>
</body>
</html>

6 untuk menandai variabel;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Garis Bawah di HTML</title>
</head>
<body>
  <h1>Garis Bawah di HTML</h1>
  <p>
    <u>Text formatting itu penting</u>, karena dapat membuat teks terlihat
    lebih menarik dibandingkan <del>text biasa</del> <ins>plain text</ins>.
  </p>
</body>
</html>

7 untuk praformat teks

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Formatting untuk Teks dari komputer</title>
</head>
<body>
  <h1>Text Formatting untuk Teks dari komputer</h1>
  <p>
    Perintah javascript untuk menampilkan teks ke console adalah
    <code>console.log()</code>. Kita juga bisa menampilkan isi variabel
    dengan fungsi ini. Misalkan kita punya variabel <var>name</var>,
    maka kode programnya bisa ditulis seperti ini:

    <pre>
      var name = "Petani Kode";
      console.log(name);
    </pre>

    Maka hasil outputnya: <samp>Petani Kode</samp>
  </p>
  <p>
    Untuk menjalankan ulang program, lakukan refresh dengan menekan tombol
    <kbd>F5</kbd>
  </p>
</body>
</html>

Hasil

Menggabungkan Format

Format teks apa yang dapat digabungkan?

Misalnya, jika Anda ingin membuat teks tebal dan bergaris bawah, apakah bisa?

Tentu saja Anda bisa

Jalan

Ya, gunakan saja tag-tag tersebut, misalnya jika ingin menggabungkan bold dengan underline. maka kita cukup menggunakan tag <b> dan

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

3

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Penggabungan Format Teks di HTML</title>
</head>
<body>
  <h1>Penggabungan Format Teks di HTML</h1>
  <p>
    Penggabungan format teks bisa dilakukan dengan menuliskan tag-tag yang
    akan dipakai. Misalkan <b><u>tebal dan garis bawah</u></b>, maka kita
    tinggal pakai tag <b>b</b> dan tag <b>u</b>.
  </p>
</body>
</html>

Hasil

Dalam menggabungkan format, Anda perlu memperhatikan tag mana yang ditulis pertama dan terakhir

Jangan tutup karena kesalahan

Yang dibuka duluan, harus ditutup belakangan

Ingat konsep "ibu memasak kentang"

Apa berikutnya?

Pemformatan teks akan sering digunakan dalam membuat konten di web, pastikan Anda mengingat tag yang digunakan untuk pemformatan teks

Bagaimana cara mengatur warna teks?

Ubah warna font .

Pilih teks yang ingin Anda ubah

Pada tab Beranda, di grup Font, pilih panah di samping Warna font, lalu pilih warna. Anda juga dapat menggunakan opsi pemformatan pada toolbar Mini untuk memformat teks dengan cepat. Mini Toolbar muncul secara otomatis saat Anda memilih teks

Gaya apa yang digunakan untuk mengubah warna teks?

Cara terbaik untuk mengubah warna teks adalah dengan menggunakan CSS . Atribut HTML lama

Apa itu HTML warna?

Apa yang dimaksud dengan kode warna HTML ? . warna HTML (Hypertext Markup Language) ditandai dengan enam karakter setelah tagar (#), misalnya #000000. Warna HTML disusun menggunakan kode HEX yang merupakan ide heksadesimal dari RGB.

Properti CSS apa yang dapat mengubah warna teks elemen HTML?

Warna (warna) teks pada CSS dapat diubah menggunakan properti warna. properti ini menerima nilai dalam berbagai bentuk seperti nama warna default HTML dan CSS (nama warna) berjumlah 140 buah, nilai warna berupa kode heksadesimal, kode warna RGB(A) dan kode warna HSL(A).

kode html