Cara Mudah Membuat Judul / Heading di HTML ( Tag h1, h2, h3, h4, h5 dan h6 )

     
AtehaSchool - Cara Mudah Membuat Judul / Heading HTML ( Tag h1, h2, h3, h4, h5 dan h6 ). Membuat judul / heading pada HTML merupakan hal yang harus diperhatikan oleh setiap desainer web (web designer). Tag heading memiliki enam tingkatan yang meliputi tag h1, h2, h3, h4, h5 dan h6. Masing-masing tag heading ini memiliki suatu perbedaan fungsi tersendiri.

Penggunaan tag heading html pada setiap halaman untuk tag h1 tidak boleh melebihi dari satu. Selain itu , untuk tag h2 sampai h6 boleh digunakan lebih dari satu pada setiap halaman web. Tag h1 adalah elemen yang digunakan untuk mendefinisikan judul yang peling penting pada halaman web.

Sehingga penggunaan tag h1 pada setiap halaman yang lebih dari satu dapat menyebabkan mesin pencari akan kesulitan menentukan judul mana yang lebih penting dan diutamakan. Berbeda halnya dengan tag h2 sampai h6 yang diangggap tidak lebih penting dari tag h1.

Membuat Judul / Heading HTML
Menulis stuktur tag html harus diperhatikan keteraturan susunan kodenya, pada setiap tag pembuka harus dilengkapi dengan tag penutup. Berikut ini cara membuat struktur judul / heading tag h1 - h6 di html.

<!DOCTYPE html>
<html>
<head>

<title>Contoh Membuat Judul / Heading Tag h1 - h6 </title>
</head>
<body>


<h1>Ini merupakan judul / heading dengan tag h1</h1>
<h2>
Ini merupakan judul / heading dengan tag h2</h2>
<h3>
Ini merupakan judul / heading dengan tag h3</h3>
<h4>
Ini merupakan judul / heading dengan tag h4</h4>
<h5>
Ini merupakan judul / heading dengan tag h5</h5>
<h6>
Ini merupakan judul / heading dengan tag h6</h6>

</body>
</html> 

 Berikut ini merupakan tampilan halaman konten heading html yang telah diterjemahkan oleh browser.


Setelah membuat judul / heading tag h1 sampai  tag h6, kita perlu mencoba cara menambahkan paragarap dengan mengunakan tag <p> di html.

Mengenal Pengertian, Kegunaan dan Cara Menulis Struktur HTML

     
AtehaSchool - Pengertian dan Kegunaan HTML. Sebagai pemula web programer atau desain web / blog tentu  sangat membutuhkan penjelasan dari pengertian HTML dan kegunaannya. Cara menjadi web programer yang handal dan mahir tentunya harus mempelajari bahasa HTML secara bertahap dan teratur.

Untuk itu, Anda sebagai pemula tidak perlu merasa khawatir dalam mempelajari fungsi dan pengertian  HTML. Dalam artikel ini AtehaSchool akan membantu mengulas Pengertian dan Kegunaan HTML serta mengenalkan tag-tag HTML secara lengkap.

Apa itu yang dimaksud dengan HTML ? HTML atau singkatan dari Hyper Text Markup Language merupakan bahasa markah yang digunakan sebagai pemrograman web, yakni untuk menampilkan isi informasi  halaman web browser. Pada dasarnya stuktur tag HTML tidak bisa ditampilkan oleh browser melainkan hanya digunakan oleh browser untuk menampilkan sebuah halaman web.

 Srtuktur Tag HTML
Tag HTML merupakan sebuah nama elemen yang diapit oleh sudut kurung. Cara penulisan stuktur tag  HTML harus berpasangan dengan tag yang sama, namun  pada tag akhir ditambah dengan tanda penutup garis miring atau Forward Slash ( / ), seperti contoh  :

  1. Tag awal  <html> berpasangan dengan tag akhir </html> 
  2. Tag awal <head> berpasangan dengan tag akhir </head> 
  3. Tag awal  <title>berpasangan dengan tag akhir </title> 
  4. Tag awal  <body> berpasangan dengan tag akhir </body> 
  5. Tag awal <h1>  berpasangan dengan tag akhir </h1> 
  6. Tag awal <h2> berpasangan dengan tag akhir </h2> 
  7. Tag awal  <p> berpasangan dengan tag akhir </p> dan seterusnya.

Menulis Bentuk Struktur Tag HTML
Tag HTML dapat kita tulis menggunakan aplikasi Notepad (Windows) atau TextEdit (Mac). Sebagai tahap pembelajaran dua aplikasi ringan bawaan Windows ( Notepad ) atau TextEdit (Sistem operasi bawaan Mac) memang cocok untuk digunakan.

Langkah membuka Aplikasi TextEdit pada Mac :
  1. Buka Finder  Applications → TextEdit  
  2. Kemudian ubah preferensi agar aplikasi dapat melakukan penyimpanan file dengan benar pada menu Preferences → Format → pilih "Plain Text" 
  3. Setelah itu  beri tanda centang kotak  "Ignore rich text commands in HTML files" yang berada dibawah menu OPEN dan SAVE 
  4.  Selanjutnya buka New Document untuk menempatkan kode HTML yang akan dibuat.
Langkah membuka Aplikasi NOTEPAD pada operasi Windows 7, 8, maupun versi windows terbaru :

Untuk pengguna Windows 8 atau versi yang lebih baru:

Buka Start Screen (simbol jendela di bagian kiri bawah pada layar Anda) kemudian Ketik Notepad.

Untuk pengguna Windows 7 atau versi dibawahnya :

Buka Start → Programs → Accessories  →  Notepad.

Dalam artikel ini kita akan ambil contoh cara menulis struktur tag HTML menggunakan Notepad sebagai berikut.

 <!DOCTYPE html>
<html>
    <head>
        <title>Judul Halaman Web</title>
    </head>
    <body>


       <h1>Mencoba Cara Menulis Kalimat Dalam HTML Tag h1</h1>
      <p>
Latihan HTML paragrap.</p>

    </body>
</html>  
 Kemudian simpan file html tersebut pada folder komputer yang telah ditentukan.

Cara Menyimpan File HTML
Pada menu Notepad yang terletak di pojok kiri atas pilih FILE → SAVE AS  kemudian berikan nama file dengan Ektensi HTML atau HTM , selanjutnya dalam kotak  SAVE AS TYPE ubah menjadi ALL FILES.
Perhatikan pada gambar di bawah ini.


Membuka File HTML pada Browser
Untuk membuka file HTML tersebut sangat mudah hanya menge KLIK 2 KALI pada nama file, atau dengan cara Pilih FIle KLIK KANAN → Open with → Google Chrome (Pilih nama browser sesuai selera anda ).

Halaman web yang ditampilkan oleh browser seperti pada gambar dibawah ini





Penjelasan elemen kode  HTML diatas adalah sebagai berikut  
  1. Deklarasi <!DOCTYPE html> berfungsi untuk mendefinisikan dokumen menjadi HTML5, jenis deklarasi <!DOCTYPE html> ini tidak sensitif huruf (tidak membedakan huruf besar dan kecil) sehingga halaman web dapat ditampilkan pada browser dengan sempurna.
  2. Tag <html> merupakan sebuah elemen untuk root  dari halaman HTML
  3. Tag <head> berfungsi untuk menyimpan informasi meta tag tentang dokumen.
  4. Tag <title> berfungsi untuk menentukan nama judul setiap halaman web.
  5. Elemen Tag <body> berisi kode untuk menampilkan konten pada browser agar terbentuk sebuah halaman web.
  6. Elemen Tag <h1>  untuk mendefinisikan judul besar atau judul posting yang paling penting.
  7. Elemen Tag <p> untuk mendefinisikan sebuah paragrap pada halaman web.
Catatan : Untuk lebih mudah mengedit HTML dasar selain menggunakan aplikasi Notepad bawaan windows, kita dapat menggunakan aplikasi yang lebih optimal yaitu NOTEPAD++.

Tips Mudah Cara Mengubah Kolom Dan Lebar Gadget Blog Tanpa HTML

     
AtehaSchool - Tips jitu cara mudah mengatur tampilan blog tanpa error html dengan cepat. Mengubah tampilan template blog dapat kita lakukan dengan mudah tanpa harus mengutak-atik HTML. Mengedit kode HTML memang memerlukan ketelitian jika salah sedikit dapat terjadi error sehingga memakan waktu banyak.

Para blogger pemula mungkin pernah mengalami kesulitan memperbaiki HTML error. Tidak perlu khawatir fitur blogger saat ini mulai terbilang lengkap sehingga dapat mempermudah penggunanya menyesuaikan tampilan blog dengan sesuka hatinya. Ini merupakan solusi yang tepat untuk menghindari HTML error.

Cara mengatur kolom dan lebar widget, gadget ataupun sidebar blog tanpa harus mengedit HTML. Cara seperti ini tentunya sangat membantu mempermudah para blogger pemula. Ngeblog tidak harus mahir kode html karena blogger sudah menyediakan fitur-fitur yang sangat membantu sobat blogger pemula.

Mengatur kolom dan lebar gadget blog bagaimana maksudnya? Mungkin masih ada sobat AtehaSchool yang bingung dari pertanyaan tersebut. Maksudnya begini misalnya tampilan blog kita terdiri dari 3 kolom yakni kolom posting, kolom sidebar kanan dan sidebar kiri. Tiba-tiba kita menginginkan tampilan blog terdiri dari 2 kolom saja serta mengatur lebar kolom-kolom tersebut sesuai selera kita.

Nah begitu maksudnya, jadi kita tidak harus mengedit HTML template blog , tampilan dapat disesuaikan dengan mudah.

Yang memiliki hobby menulis blog tapi belum mahir kode HTML bukan alasan menjadi kendala sebagai penghalang. Dalam artikel ini akan mberikan solusi tepat mengedit tampilan blog tanpa melalui HTML. Dengan praktis cepat dan mudah tanpa mengalami error html.

Sobat  blogger pemula mungkin membutuhkan cara yang simpel dan praktis. Cara yang simpel dan praktis tentunya tidak akan menyita banyak waktu.

Cara Mengubah Kolom Dan Lebar Gadget Blog Tanpa HTML

Berikut ini langkah-langkah yang harus sobat perhatikan cara mengatur tampilan blog tanpa edit html. Pahami dan perhatikan baik-baik langkah demi langkah.

Mengatur Tampilan Kolom Blog
1. Langkah pertama, masuk laman dasbor blogger menggunakan akun sobat yang sudah terdaftar.

2. Langkah kedua, pilih TEMPLATE kemudian pilih/klik SESUAIKAN.


3. Langkah ketiga pilih navigasi TATA LETAK, dalam navigasi tata letak ini ada menu untuk mengatur tata letak kolom blog kita yaitu Tata letak isi dan tata letak kaki. Pilih tampilan kolom yang sesuai selera sobat.



4. Langkah keempat, pilih menu TERAPKAN KE BLOG dibagian pojok kanan atas. Langkah ini merupakan langkah terakhir dalam mengatur tampilan kolom blog kita.

Mengatur Lebar Gadget Blog

1. Langkah pertama dan kedua sama langkah  diatas.

2. Sampai langkah ketiga, pilih menu SESUAIKAN LEBAR , kemuadian geser kekanan atau kekiri dan perhatikan perbedaannya.



3. Langkah terakhir, pilih TERAPKAN KE BLOG. untuk lebih jelas perhatikan gambar dibawah ini.

Kumpulan Macam-macam Kode Warna HTML Lengkap

     
 Kumpulan Macam-macam Kode Warna HTML Lengkap

AtehaSchool - Macam-macam warna memiliki  peran yang sangat penting dalam kehidupan sehari-hari.  Dari sekian banyak macam-macam warna masing-masing memiliki kode warna CSS terendiri. Dalam dunia pemrograman web developer juga tidak pernah lepas dengan kumpulan kode warna CSS. Tanpa menggunakan warna css, web/blog tidak akan terlihat efektif, indah dan berkualitas. Dapat diibaratkan memasak tanpa menggunakan bumbu sehingga tidak memiliki rasa akan terkesan hambar.



Kumpulan kode warna dapat ditulis berbagai macam jenisnya yakni RGB, HEX (Hexadecimal) maupun CMYK. Namun dalam atrikel " Kumpulan Macam-macam Kode Warna CSS Lengkap " akan menggunakan cara CSS Kode Warna HEX (Hexadecimal). CSS kode warna HEX, masing-masing warna  terdiri dari enam digit angka maupun huruf. Cara penggunaannya dengan cara menambahkan tanda # yang terletak sebelum enam digit kode.

 Warna dasar RGB atau Hexadecimal (HEX) adalah red (merah), green (hijau) dan blue (biru). Dari warna dasar tersebut jika dipadukan antara warna yang satu dengan warna lainnya akan membentuk warna baru. Sehingga menghasilkan bermacam-macam warna yang memiliki kode warna berbeda-beda.

Kumpulan Bermacam-macam Daftar CSS Kode Warna HEX (Hexadecimal).

TABEL CSS KODE WARNA HEX (HEXADECIMAL)
#000000 #000022 #000044 #000066 #000088 #0000AA #0000CC #0000EE #0000FF
#002200 #002222 #002244 #002266 #002288 #0022AA #0022CC #0022EE #0022FF
#004400 #004422 #004444 #004466 #004488 #0044AA #0044CC #0044EE #0044FF
#006600 #006622 #006644 #006666 #006688 #0066AA #0066CC #0066EE #0066FF
#008800 #008822 #008844 #008866 #008888 #0088AA #0088CC #0088EE #0088FF
#00AA00 #00AA22 #00AA44 #00AA66 #00AA88 #00AAAA #00AACC #00AAEE #00AAFF
#00CC00 #00CC22 #00CC44 #00CC66 #00CC88 #00CCAA #00CCCC #00CCEE #00CCFF
#00EE00 #00EE22 #00EE44 #00EE66 #00EE88 #00EEAA #00EECC #00EEEE #00EEFF
#00FF00 #00FF22 #00FF44 #00FF66 #00FF88 #00FFAA #00FFCC #00FFEE #00FFFF
#220000 #220022 #220044 #220066 #220088 #2200AA #2200CC #2200EE #2200FF
#222200 #222222 #222244 #222266 #222288 #2222AA #2222CC #2222EE #2222FF
#224400 #224422 #224444 #224466 #224488 #2244AA #2244CC #2244EE #2244FF
#226600 #226622 #226644 #226666 #226688 #2266AA #2266CC #2266EE #2266FF
#228800 #228822 #228844 #228866 #228888 #2288AA #2288CC #2288EE #2288FF
#22AA00 #22AA22 #22AA44 #22AA66 #22AA88 #22AAAA #22AACC #22AAEE #22AAFF
#22CC00 #22CC22 #22CC44 #22CC66 #22CC88 #22CCAA #22CCCC #22CCEE #22CCFF
#22EE00 #22EE22 #22EE44 #22EE66 #22EE88 #22EEAA #22EECC #22EEEE #00EEFF
#22FF00 #22FF22 #22FF44 #22FF66 #22FF88 #22FFAA #22FFCC #22FFEE #22FFFF
#440000 #440022 #440044 #440066 #440088 #4400AA #4400CC #4400EE #4400FF
#442200 #442222 #442244 #442266 #442288 #4422AA #4422CC #4422EE #4422FF
#444400 #444422 #444444 #444466 #444488 #4444AA #4444CC #4444EE #4444FF
#446600 #446622 #446644 #446666 #446688 #4466AA #4466CC #4466EE #4466FF
#448800 #448822 #448844 #448866 #448888 #4488AA #4488CC #4488EE #4488FF
#44AA00 #44AA22 #44AA44 #44AA66 #44AA88 #44AAAA #44AACC #44AAEE #44AAFF
#44CC00 #44CC22 #44CC44 #44CC66 #44CC88 #44CCAA #44CCCC #44CCEE #44CCFF
#44EE00 #44EE22 #44EE44 #44EE66 #44EE88 #44EEAA #44EECC #44EEEE #44EEFF
#44FF00 #44FF22 #44FF44 #44FF66 #44FF88 #44FFAA #44FFCC #44FFEE #44FFFF
#660000 #660022 #660044 #660066 #660088 #6600AA #6600CC #6600EE #6600FF
#662200 #662222 #662244 #662266 #662288 #6622AA #6622CC #6622EE #6622FF
#664400 #664422 #664444 #664466 #664488 #6644AA #6644CC #6644EE #6644FF
#666600 #666622 #666644 #666666 #666688 #6666AA #6666CC #6666EE #6666FF
#668800 #668822 #668844 #668866 #668888 #6688AA #6688CC #6688EE #6688FF
#66AA00 #66AA22 #66AA44 #66AA66 #66AA88 #66AAAA #66AACC #66AAEE #66AAFF
#66CC00 #66CC22 #66CC44 #66CC66 #66CC88 #66CCAA #66CCCC #66CCEE #66CCFF
#66EE00 #66EE22 #66EE44 #66EE66 #66EE88 #66EEAA #66EECC #66EEEE #66EEFF
#66FF00 #66FF22 #66FF44 #66FF66 #66FF88 #66FFAA #66FFCC #66FFEE #66FFFF
#880000 #880022 #880044 #880066 #880088 #8800AA #8800CC #8800EE #8800FF
#882200 #882222 #882244 #882266 #882288 #8822AA #8822CC #8822EE #8822FF
#884400 #884422 #884444 #884466 #884488 #8844AA #8844CC #8844EE #8844FF
#886600 #886622 #886644 #886666 #886688 #8866AA #8866CC #8866EE #8866FF
#888800 #888822 #888844 #888866 #888888 #8888AA #8888CC #8888EE #8888FF
#88AA00 #88AA22 #88AA44 #88AA66 #88AA88 #88AAAA #88AACC #88AAEE #88AAFF
#88CC00 #88CC22 #88CC44 #88CC66 #88CC88 #88CCAA #88CCCC #88CCEE #88CCFF
#88EE00 #88EE22 #88EE44 #88EE66 #88EE88 #88EEAA #88EECC #88EEEE #88EEFF
#88FF00 #88FF22 #88FF44 #88FF66 #88FF88 #88FFAA #88FFCC #88FFEE #88FFFF
#AA0000 #AA0022 #AA0044 #AA0066 #AA0088 #AA00AA #AA00CC #AA00EE #AA00FF
#AA2200 #AA2222 #AA2244 #AA2266 #AA2288 #AA22AA #AA22CC #AA22EE #AA22FF
#AA4400 #AA4422 #AA4444 #AA4466 #AA4488 #AA44AA #AA44CC #AA44EE #AA44FF
#AA6600 #AA6622 #AA6644 #AA6666 #AA6688 #AA66AA #AA66CC #AA66EE #AA66FF
#AA8800 #AA8822 #AA8844 #AA8866 #AA8888 #AA88AA #AA88CC #AA88EE #AA88FF
#AAAA00 #AAAA22 #AAAA44 #AAAA66 #AAAA88 #AAAAAA #AAAACC #AAAAEE #AAAAFF
#AACC00 #AACC22 #AACC44 #AACC66 #AACC88 #AACCAA #AACCCC #AACCEE #AACCFF
#AAEE00 #AAEE22 #AAEE44 #AAEE66 #AAEE88 #AAEEAA #AAEECC #AAEEEE #AAEEFF
#AAFF00 #AAFF22 #AAFF44 #AAFF66 #AAFF88 #AAFFAA #AAFFCC #AAFFEE #AAFFFF
#BB0000 #BB0022 #BB0044 #BB0066 #BB0088 #BB00AA #BB00CC #BB00EE #BB00FF
#BB2200 #BB2222 #BB2244 #BB2266 #BB2288 #BB22AA #BB22CC #BB22EE #BB22FF
#BB4400 #BB4422 #BB4444 #BB4466 #BB4488 #BB44AA #BB44CC #BB44EE #BB44FF
#BB6600 #BB6622 #BB6644 #BB6666 #BB6688 #BB66AA #BB66CC #BB66EE #BB66FF
#BB8800 #BB8822 #BB8844 #BB8866 #BB8888 #BB88AA #BB88CC #BB88EE #BB88FF
#BBAA00 #BBAA22 #BBAA44 #BBAA66 #BBAA88 #BBAAAA #BBAACC #BBAAEE #BBAAFF
#BBCC00 #BBCC22 #BBCC44 #BBCC66 #BBCC88 #BBCCAA #BBCCCC #BBCCEE #BBCCFF
#BBEE00 #BBEE22 #BBEE44 #BBEE66 #BBEE88 #BBEEAA #BBEECC #BBEEEE #BBEEFF
#BBFF00 #BBFF22 #BBFF44 #BBFF66 #BBFF88 #BBFFAA #BBFFCC #BBFFEE #BBFFFF
#CC0000 #CC0022 #CC0044 #CC0066 #CC0088 #CC00AA #CC00CC #CC00EE #CC00FF
#CC2200 #CC2222 #CC2244 #CC2266 #CC2288 #CC22AA #CC22CC #CC22EE #CC22FF
#CC4400 #CC4422 #CC4444 #CC4466 #CC4488 #CC44AA #CC44CC #CC44EE #CC44FF
#CC6600 #CC6622 #CC6644 #CC6666 #CC6688 #CC66AA #CC66CC #CC66EE #CC66FF
#CC8800 #CC8822 #CC8844 #CC8866 #CC8888 #CC88AA #CC88CC #CC88EE #CC88FF
#CCAA00 #CCAA22 #CCAA44 #CCAA66 #CCAA88 #CCAAAA #CCAACC #CCAAEE #CCAAFF
#CCCC00 #CCCC22 #CCCC44 #CCCC66 #CCCC88 #CCCCAA #CCCCCC #CCCCEE #CCCCFF
#CCEE00 #CCEE22 #CCEE44 #CCEE66 #CCEE88 #CCEEAA #CCEECC #CCEEEE #CCEEFF
#CCFF00 #CCFF22 #CCFF44 #CCFF66 #CCFF88 #CCFFAA #CCFFCC #CCFFEE #CCFFFF
#DD0000 #DD0022 #DD0044 #DD0066 #DD0088 #DD00AA #DD00CC #DD00EE #DD00FF
#DD2200 #DD2222 #DD2244 #DD2266 #DD2288 #DD22AA #DD22CC #DD22EE #DD22FF
#DD4400 #DD4422 #DD4444 #DD4466 #DD4488 #DD44AA #DD44CC #DD44EE #DD44FF
#DD6600 #DD6622 #DD6644 #DD6666 #DD6688 #DD66AA #DD66CC #DD66EE #DD66FF
#DD8800 #DD8822 #DD8844 #DD8866 #DD8888 #DD88AA #DD88CC #DD88EE #DD88FF
#DDAA00 #DDAA22 #DDAA44 #DDAA66 #DDAA88 #DDAAAA #DDAACC #DDAAEE #DDAAFF
#DDBB00 #DDBB22 #DDBB44 #DDBB66 #DDBB88 #DDBBAA #DDBBCC #DDBBEE #DDBBFF
#DDCC00 #DDCC22 #DDCC44 #DDCC66 #DDCC88 #DDCCAA #DDCCCC #DDCCEE #DDCCFF
#DDDD00 #DDDD22 #DDDD44 #DDDD66 #DDDD88 #DDDDAA #DDDDCC #DDDDEE #DDDDFF
#DDEE00 #DDEE22 #DDEE44 #DDEE66 #DDEE88 #DDEEAA #DDEECC #DDEEEE #DDEEFF
#DDFF00 #DDFF22 #DDFF44 #DDFF66 #DDFF88 #DDFFAA #DDFFCC #DDFFEE #DDFFFF
#EE0000 #EE0022 #EE0044 #EE0066 #EE0088 #EE00AA #EE00CC #EE00EE #EE00FF
#EE2200 #EE2222 #EE2244 #EE2266 #EE2288 #EE22AA #EE22CC #EE22EE #EE22FF
#EE4400 #EE4422 #EE4444 #EE4466 #EE4488 #EE44AA #EE44CC #EE44EE #EE44FF
#EE6600 #EE6622 #EE6644 #EE6666 #EE6688 #EE66AA #EE66CC #EE66EE #EE66FF
#EE8800 #EE8822 #EE8844 #EE8866 #EE8888 #EE88AA #EE88CC #EE88EE #EE88FF
#EEAA00 #EEAA22 #EEAA44 #EEAA66 #EEAA88 #EEAAAA #EEAACC #EEAAEE #EEAAFF
#EEBB00 #EEBB22 #EEBB44 #EEBB66 #EEBB88 #EEBBAA #EEBBCC #EEBBEE #EEBBFF
#EECC00 #EECC22 #EECC44 #EECC66 #EECC88 #EECCAA #EECCCC #EECCEE #EECCFF
#EEDD00 #EEDD22 #EEDD44 #EEDD66 #EEDD88 #EEDDAA #EEDDCC #EEDDEE #EEDDFF
#EEEE00 #EEEE22 #EEEE44 #EEEE66 #EEEE88 #EEEEAA #EEEECC #EEEEEE #EEEEFF
#EEFF00 #EEFF22 #EEFF44 #EEFF66 #EEFF88 #EEFFAA #EEFFCC #EEFFEE #EEFFFF
#FF0000 #FF0022 #FF0044 #FF0066 #FF0088 #FF00AA #FF00CC #FF00EE #FF00FF
#FF2200 #FF2222 #FF2244 #FF2266 #FF2288 #FF22AA #FF22CC #FF22EE #FF22FF
#FF4400 #FF4422 #FF4444 #FF4466 #FF4488 #FF44AA #FF44CC #FF44EE #FF44FF
#FF6600 #FF6622 #FF6644 #FF6666 #FF6688 #FF66AA #FF66CC #FF66EE #FF66FF
#FF8800 #FF8822 #FF8844 #FF8866 #FF8888 #FF88AA #FF88CC #FF88EE #FF88FF
#FFAA00 #FFAA22 #FFAA44 #FFAA66 #FFAA88 #FFAAAA #FFAACC #FFAAEE #FFAAFF
#FFBB00 #FFBB22 #FFBB44 #FFBB66 #FFBB88 #FFBBAA #FFBBCC #FFBBEE #FFBBFF
#FFCC00 #FFCC22 #FFCC44 #FFCC66 #FFCC88 #FFCCAA #FFCCCC #FFCCEE #FFCCFF
#FFDD00 #FFDD22 #FFDD44 #FFDD66 #FFDD88 #FFDDAA #FFDDCC #FFDDEE #FFDDFF
#FFEE00 #FFEE22 #FFEE44 #FFEE66 #FFEE88 #FFEEAA #FFEECC #FFEEEE #FFEEFF
#FFFF00 #FFFF22 #FFFF44 #FFFF66 #FFFF88 #FFFFAA #FFFFCC #FFFFEE #FFFFFF

Selain table diatas, dibawah ini merupakan kumpulan macam-macam kode warna CSS dari urutan warna gelap ke warna cerah. Hal ini untuk mempermudah sobat AtehaSchool yang membutuhkan kecerahan warna tertentu. Hanya dengan melihat daftar kode warna yang telah disediakan dalam tabel dibawah ini.

KODE WARNA CSS DARI WARNA GELAP KE CERAH

TABEL URUTAN KODE WARNA CSS DARI GELAP KE CERAH
#000000
#050000 #000500 #000005 #050500 #000505 #050005#050505
#110000 #001100 #000011 #111100 #001111 #110011#111111
#160000 #001600 #000016 #161600 #001616 #160016#161616
#210000 #002100 #000021 #212100 #002121 #210021#212121
#260000 #002600 #000026 #262600 #002626 #260026#262626
#310000 #003100 #000031 #313100 #003131 #310031#313131
#360000 #003600 #000036 #363600 #003636 #360036#363636
#410000 #004100 #000041 #414100 #004141 #410041#414141
#460000 #004600 #000046 #464600 #004646 #460046#464646
#510000 #005100 #000051 #515100 #005151 #510051#515151
#560000 #005600 #000056 #565600 #005656 #560056#565656
#610000 #006100 #000061 #616100 #006161 #610061#616161
#660000 #006600 #000066 #666600 #006666 #660066#666666
#710000 #007100 #000071 #717100 #007171 #710071#717171
#760000 #007600 #000076 #767600 #007676 #760076#767676
#810000 #008100 #000081 #818100 #008181 #810081#818181
#860000 #008600 #000086 #868600 #008686 #860086#868686
#910000 #009100 #000091 #919100 #009191 #910091#919191
#960000 #009600 #000096 #969600 #009696 #960096#969696
#A10000 #00A100 #0000A1 #A1A100 #00A1A1 #A100A1#A1A1A1
#A60000 #00A600 #0000A6 #A6A600 #00A6A6 #A600A6#A6A6A6
#B10000 #00B100 #0000B1 #B1B100 #00B1B1 #B100B1#B1B1B1
#B60000 #00B600 #0000B6 #B6B600 #00B6B6 #B600B6#B6B6B6
#C10000 #00C100 #0000C1 #C1C100 #00C1C1 #C100C1#C1C1C1
#C60000 #00C600 #0000C6 #C6C600 #00C6C6 #C600C6#C6C6C6
#D10000 #00D100 #0000D1 #D1D100 #00D1D1 #D100D1#D1D1D1
#D60000 #00D600 #0000D6 #D6D600 #00D6D6 #D600D6#D6D6D6
#E10000 #00E100 #0000E1 #E1E100 #00E1E1 #E100E1#E1E1E1
#E60000 #00E600 #0000E6 #E6E600 #00E6E6 #E600E6#E6E6E6
#F10000 #00F100 #0000F1 #F1F100 #00F1F1 #F100F1#F1F1F1
#F60000 #00F600 #0000F6 #F6F600 #00F6F6 #F600F6#F6F6F6
#FA0000 #00FA00 #0000FA #FAFA00 #00FAFA #FA00FA#FAFAFA
#FB0000 #00FB00 #0000FB #FBFB00 #00FBFB #FB00FB#FBFBFB
#FC0000 #00FC00 #0000FC #FCFC00 #00FCFC #FC00FC#FCFCFC
#FD0000 #00FD00 #0000FD #FDFD00 #00FDFD #FD00FD#FDFDFD
#FE0000 #00FE00 #0000FE #FEFE00 #00FEFE #FE00FE#FEFEFE
#FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF#FFFFFF

Mungkin sobat AtehaSchool masih ada sebagian yang belum hafal dari bermacam-macam kode warna tersebut. sobat bisa menyimpan artikel kumpulan macam-macam  kode warna ini kedalam BOOKMARK (tekan tombol pada keyboard CTRL+D kemudian klik DONE) agar lebih mudah saat membutuhkan kode warna.