sovyan.comsovyan.com
html Komputer Pemrograman Web
Beranda / Pemrograman / Web / Warna HTML | Tutorial HTML 12

Warna HTML | Tutorial HTML 12

Oleh sopyan • November 14, 2023 • 5 Dilihat • 4 Menit membaca •
Assalamualaikum sob, di artikel kali ini kami akan membagikan tutorial
mengenai warna di HTML, berikut adalah tutorialnya.

Warna HTML

Di HTML untuk membuat warna kita bisa menggunakan nama warna yang telah
ditentukan atau menggunakan nilai RGB,  HSL, HEX, HSLA ataupun RGBA.

Nama Warna

Dalam HTML, nama warna telah ditentukan sebelumnya jadi untuk membuat warna,
kita tinggal mengetikkan nama warnanya.
HTML mendukung 140 nama warna standar.
Di contoh di bawah kita akan menggunakan nama warna Gray, LightGray, Tomato,
Orange, DodgerBlue, MediumSeaGreen, SlateBlue, dan Violet.

Contoh Program 1 : Nama Warna HTML

<!DOCTYPE html>
<html>
<body>
    <h1 style=“background-color:Gray;”>Gray</h1>
  
    <h1 style=“background-color:LightGray”>LightGray</h1>
  
  <h1 style=“background-color:Tomato;”>Tomato</h1>
  
  <h1 style=“background-color:Orange;”>Orange</h1>
  
  <h1 style=“background-color:DodgerBlue;”>DodgerBlue</h1>
  
  <h1 style=“background-color:MediumSeaGreen;”>MediumSeaGreen</h1>
  
  <h1 style=“background-color:SlateBlue;”>SlateBlue</h1>
  
  <h1 style=“background-color:Violet;”>Violet</h1>
  
</body>
</html>

Hasil Program 1

Penjelasan Program 1

  • Di baris 4 kita membuat heading dengan latar belakang berwarna
    abu-abu.
  • Di baris 6 kita membuat heading dengan latar belakang berwarna
    abu muda.
  • Di baris 8 kita membuat heading dengan latar belakang berwarna
    tomat.
  • Di baris 10 kita membuat heading dengan latar belakang berwarna
    oren.
  • Di baris 12 kita membuat heading dengan warna latar belakang
    dodgerblue.
  • Di baris 14 kita membuat heading dengan latar belakang berwarna
    medium sea green.
  • Di baris 16 kita membuat heading dengan latar belakang berwarna
    slate blue.
  • Di baris 18 kita membuat heading dengan latar belakang berwarna
    pink.

Warna Background HTML

Di HTML kita bisa mengatur warna latar belakang sebuah elemen HTML.

Contoh Program 2 : Warna Background HTML

<!DOCTYPE html>
<html>
<body>
  <h1 style=“background-color:Red;”>Halo Dunia</h1>
  
  <p style=”background-color:Yellow;”>Kita bisa mewarnai warna latar belakang elemen HTML, di contoh ini kita
mewarnai latar belakangnya menjadi warna kuning</p>
</body>
</html>

Hasil Program 2

Penjelasan Program 2

  • Di baris 4 kita membuat heading 1 dengan latar belakang berwarna
    merah.
  • Di baris 6 kita membuat paragraf dengan latar belakang berwarna
    kuning.

Warna Teks HTML

Di HTML, kita juga bisa mengatur warna sebuah teks.

Contoh Program 3 : Warna Teks HTML

<!DOCTYPE html>
<html>
<body>
  <h1 style=“color:Red;”>Heading ini berwarna merah</h1>
  
  <p style=“color:Green;”>Paragraf ini berwarna hijau</p>
  
  <p style=“color:blue;”>Paragraf ini berwarna biru</p>
  
</body>
</html>

Hasil Program 3

Penjelasan Program 3

  • Di baris 4 kita membuat heading dengan huruf berwarna merah.
  • Di baris 6 kita membuat paragraf dengan huruf berwarna hijau.
  • Di baris 8 kita membuat paragraf dengan huruf berwarna biru.

Warna Border HTML

Di HTML kita juga bisa mewarnai border (batas).

Contoh Program 4 : Mewarnai Border HTML

<!DOCTYPE html>
<html>
<body>
  <h1 style=“border: 2px solid Red;”>Merah</h1>
  
  <h1 style=“border: 2px solid Green;”>Hijau</h1>
  
  <h1 style=“border: 2px solid Blue”>Biru</h1>
</body>
</html>
Baca juga: Panduan Lengkap HTML Form Attributes yang Wajib Lo Tahu! (Tutorial HTML Part 54)

Hasil Program 4

Penjelasan Program 4

  • Di baris 4 kita membuat heading dengan batas berukuran 2 piksel
    berwarna merah.
  • Di baris 6 kita membuat heading dengan batas berukuran 2 piksel
    berwarna hijau.
  • Di baris 8 kita membuat heading dengan batas berwarna 2 piksel
    berwarna biru.

Nilai Warna HTML

Selain menggunakan nama warna, kita juga bisa menentukan warna menggunakan
nilai warna seperti nilai RGB, nilai HEX, nilai HSL, nilai RGBA, nilai HSLA.
Di bawah ini terdapat 3 elemen <div> yang memiliki warna tomat  yang diatur menggunakan nilai RGB, HEX dan HSL :
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
Di bawah ini terdapat 3 elemen <div> yang memiliki warna tomat dengan transparansi 50%, disini kita menggunakan nilai RGBA dan HSLA :
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Contoh Program 5 : Nilai Warna HTML

<!DOCTYPE html>
<html>
<body>
  <p>Warna tomat yang sama :</p>
  
  <h1 style=“background-color:rgb(255, 99, 71);”>rgb(255, 99, 71)</h1>
  
  <h1 style=“background-color:#ff6347;”>#ff6347</h1>
  
  <h1 style=“background-color:hsl(9, 100%, 64%);”>hsl(9, 100%, 64%)</h1>
  
  <p>Warna tomat yang sama tapi dengan transparent 50%</p>
  
  <h1 style=“background-color:rgba(255, 99, 71, 0.5);”>rgba(255, 99, 71, 0.5)</h1>
  
  <h1 style=“background-color:hsla(9, 100%, 64%, 0.5);”>hsla(9, 100%, 64%, 0.5)</h1>
  
</body>
</html>

Hasil Program 5

Penjelasan Program 5

  • Di baris 4 kita membuat sebuah paragraf.
  • Di baris 6 kita membuat heading dengan latar belakang berwarna
    tomat.
  • Di baris 8 kita membuat heading dengan latar belakang berwarna
    tomat.
  • Di baris 10 kita membuat heading dengan latar belakang berwarna
    tomat.
  • Di baris 12 kita membuat sebuah paragraf.
  • Di baris 14 kita membuat heading dengan latar belakang berwarna
    tomat yang memiliki transparent 50%.
  • Di baris 16 kita membuat heading dengan latar belakang berwarna
    tomat dengan transparent 50%.
Itulah tutorial mengenai warna HTML, semoga artikel kami dapat membantu kalian
memahami tentang warna di HTML, sampai jumpa di artikel selanjutnya. Happy a
nice day…

sopyan

Seorang blogger yang senang berbagi berbagai informasi dan tutorial.

Artikel Terkait

Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Populer

01

Tips Meningkatkan Kecepatan Website E-commerce untuk Hasil Penjualan yang Lebih Optimal

Oktober 8, 2024 • 58 Dilihat
02

Tutorial HTML part 1: Apa Itu HTML dan Kenapa Penting?

Januari 7, 2025 • 42 Dilihat
03

Strategi Ampuh untuk Launching Produk Baru: Gabungan Online dan Offline

Desember 28, 2024 • 41 Dilihat
04

HTML: Awal Perjalanan Lo di Dunia Coding yang Kece Abis! (Tutorial HTML part 1)

Januari 22, 2025 • 40 Dilihat
05

Cara Monetisasi Blog dengan Google AdSense: Panduan Lengkap untuk Pemula

Januari 10, 2025 • 38 Dilihat