Basic Info

Pengenalan dasar HTML

Basic of HTML

• Mengatur jarak / enter menggunakan : < b r > atau < b r / >
seperti
ini
contohnya

seperti <br/> ini <br/> contohnya <br/>

• mengarahkan menggunakan : center,left,right
Tengah Kiri
Kanan
<center>Tengah</center> <left>Kiri</left> <right>Kanan</right>

• < d i v > = Untuk mengatur seluruh style misalnya "font style, font size, font colour, dll
texttexttexttexttetxt


<div style="text-shadow: 0px 0px 2px black; font-family: garamond; letter-spacing: 2px; color: black; padding-left: 20px; padding-right: 10px; text- align: center; font-size: 1.2em;"> texttexttexttexttetxt </div>

• Mengatur Besar image menggunakan width/height
- hanye perlu mengatur width dan height saja

<img src="paste image url disini"alt="beri nama tentang image disini" title="beri nama tentang image disini" width="50" height="100"/>

• Mengatur/menambahkan scroll bar
- edit width dan height untuk memperbesar/memperkecil box scroll
<div style="position:absolute; overflow:auto; width: 100px; height: 100px"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

Alignment

Mengatur Alignment pada gambar /tulisan

Alignment

• Mengatur Alignment menggunakan table :
- cellpading untuk mengatur sisi"
- cellspacing untuk mengatur jarak spasi

text disebelah kiri.

text sebelah kanan

<center><table width="85" cellpadding="5" cellspacing="5"> <tr> <td valign=top> <font color="BLACK" size="3" face="Bell MT"> text disebelah kiri.<br><br></font></td> <td align=center><img src="paste image url disini" width=100 ></td> <td valign=bottom><font color="BLACK" size="3" face="Bell MT">text sebelah kanan</font></td></tr> </table></center>


Text sebelah kiri

text text text text text text text text text text text text text text text text< /td>

<center><table width="400" cellpadding="10"> <tr><td valign=middle><font color="BLACK" size="2" face="Bell MT"> text text text text text text text text text text text text text text text text< /td> <td align=center> <img src="paste image url disini" width=100> </td></tr></table></center>

Variasi

<center><table width=65%> <tr><td align=center valign=top><img src="paste image url disinig" width="90" height="120"> <br><br><br> <img src="paste image url disini" width="90" height="120"></td> <td align=center valign=middle> <img src="paste image url disini" width="90" height="120"></td> </tr></table></center>

• Mengatur Alignment tanpa table
- top = mengatur jarak atas
- left = mengatur jarak kanan
- untuk mengganti posisi hanya tinggal mengganti ukuran "505px/320px" menjadi lebih besar/kecil

<div style="width: 500px; position: absolute; top: 505px; left: 320px;"> textetxttetxtexttext </div>

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>