Color Charts

Some color Charts

Box / Border

Cara membuat box/border

• Keterangan : "px" adalah ketebalan dari border tersebut, jika ingin mengganti lebih tebal/tipis ganti menjadi *misal "2px" etc... | "#4F94CD menunjukkan color chart bisa diganti sesuai color chart kesukaan kalian
Solid Border
<div style="border: 5px solid #4F94CD;">Solid Border </div>



Double Border
<div style="border: 5px double #4F94CD;">double Border</div>

Dashed Border
<div style="border: 5px dashed #4F94CD;">Dashed Border </div>

Dotted Border
<div style="border: 5px dotted #4F94CD;">Dotted Border</div>

Groove Border
<div style="border: 5px groove #4F94CD;">Groove Border </div>

Ridge Border


<div style="border: 5px ridge #4F94CD;">Ridge Border </div>

Inset Border


<div style="border: 5px inset #4F94CD;">Inset Border</div>

Outset Border
<div style="border: 5px outset #4F94CD;">Outset Border </div>

Make a link

Cara Membuat LINK

Cara membuat link

• Link sederhana
Facebook
<a href="paste link disini" target="_blank">text yang diinginkan disini</a>



• Link menggunakan gambar

<a href="paste link disini" target="_blank"><img src="paste img url disini"></a>

Scroll Text / Image

Cara membuat image/text bergerak

• Direction UP
KE ATAS
<marquee direction=up height=50>KE ATAS</marquee>



• Direction DOWN
KE BAWAH
<marquee direction=down height=50>KE BAWAH</marquee>

• Ke KIRI
KE KIRI
<marquee>KE KIRI</marquee>

• Ke KANAN
Ke KANAN
<marquee direction="right">Ke KANAN</marquee>

• Jika ingin menggunakan border : untuk mengganti warna cukup ganti "BLUE" ke warna yang lain sepert "GREEN" "YELLOW" etc.... | untuk mengganti ketebalan gant 1px menjadi "2px" "3px" etc... | untuk mengganti "solid" bisa menjadi "dotted" etc...
BORDER
<marquee style="border:BLUE 1px SOLID">BORDER</marquee>

BORDER
<marquee style="border:BLUE 1px DOTTED">BORDER</marquee>

• Menggunakan background : untuk mengganti warna background, cukup ganti YELLOW menjadi "RED" atau warana apapun yang anda inginkan...
BACKGROUND

<marquee direction="left" style="background:YELLOW" style="border:#000066 2px solid">BACKGROUND</marquee>

• SPLIT marquee menggunakan background, jika tidak ingin menggunakan bacground cukup hapus "bgcolor=pink" dan "bgcolor=red"
PISAHSPLIT
<marquee width=100 direction=left bgcolor=pink>PISAH</marquee><marquee width=100 direction=right bgcolor=red>SPLIT</marquee>

• Beda arah
Different Beda arah
<marquee width=100 direction=right bgcolor=pink>Different </marquee><marquee width=100 direction=left bgcolor=red>Beda arah</marquee>

• ANIMATED
♥♥| | | | | | |ANIMATED| | | | | | |♥♥
<MARQUEE behavior=alternate direction=left scrollAmount=2 width="4%">♥</MARQUEE><MARQUEE scrollAmount=4 direction=left width="8%">♥| | | | | | |</MARQUEE>ANIMATED<MARQUEE scrollAmount=4 direction=right width="8%">| | | | | | |♥</MARQUEE><MARQUEE behavior=alternate direction=right scrollAmount=2 width="4%">♥</MARQUEE>

• jika ingin gambar menjadi scroll cukup mengganti text dengan image source | contoh

<marquee><img src="paste image source disini"></marquee>

List

List

Berikut adalah pengenalan dan ilustrasi juga kode untuk List :

• Bulleted List :
• first text
• second text
• third text
<ul> <li>first text</li> <li>second text</li> <li>third text</li> </ul>



• Numbered List
1. first text
2. second text
3. third text
<ol> <li>first text</li> <li>second text</li> <li>third text</li> </ol>

1. first text
2. second text
3. third text
<ol type="A"> <li>first text</li> <li>second text</li> <li>third text</li> </ol>

1. first text
2. second text
3. third text
<ol type="I"> <li>first text</li> <li>second text</li> <li>third text</li> </ol>

Menggunakan type yang diinginkan tetapi ingin dimulai dari angka tertentu
7. first text
8. second text
9. third text
<ol type="I" start="7"> <li>first text</li> <li>second text</li> <li>third text</li></ol>

• Style image
• first text
• second text
• third text


<ul style="list-style-image: url(paste image src disini);"> <li>first text</li> <li>second text</li> <li>third text</li> </ul>

Text Formatting

Basic Text Formatting

Berikut adalah pengenalan dan ilustrasi juga kode untuk basic text formatting :

• Untuk mengatur besar/kecilnya ukuran font : yang perlu anda lakukan hanya mengganti angka 6 bisa lebih kecil/besar | diganti dengan angka antara 1-7
CONTOH
<font size =6>CONTOH</font>



• Bold,Italic,Underlined : Bisa juga menggabungkan antara bold italic dan underline
tebal , Miring , garisbawah , combine
<b>tebal</b> <i>Miring</i> <u>garisbawah</u> <b><i><u>combine</b></i></u>

• Untuk membuat font menjadi lebih menarik dengan menggabungkan size font
COMBINE CAPS

<font size=5>C</font><font size=3>OMBINE <font size=5>C</font><font size=3>APS</font>

• Memberi warna untuk font : ganti tanda "#7CFC00" menjadi code chart warna yang anda inginkan
GREEN
<font color=#7CFC00>GREEN</font>