Desain Website: October 2014

Macam-macam Style / CSS Cursor

Look	Values	Look	NS	IE	Example
	default	TEST	6+	4+	cursor:default
	crosshair	TEST	6+	4+	cursor:crosshair
	hand	TEST		4+	cursor:hand
	pointer	TEST	6+		cursor:pointer
	Cross browser	TEST		4+	cursor:pointer;cursor:hand
	move	TEST	6+	4+	cursor:move
	text	TEST	6+	4+	cursor:text
	wait	TEST	6+	4+	cursor:wait
	help	TEST	6+	4+	cursor:help
	n-resize	TEST	6+	4+	cursor:n-resize
	ne-resize	TEST	6+	4+	cursor:ne-resize
	e-resize	TEST	6+	4+	cursor:e-resize
	se-resize	TEST	6+	4+	cursor:se-resize
	s-resize	TEST	6+	4+	cursor:s-resize
	sw-resize	TEST	6+	4+	cursor:sw-resize
	w-resize	TEST	6+	4+	cursor:w-resize
	nw-resize	TEST	4+	4+	cursor:nw-resize
	progress	TEST		6+	cursor:progress
	not-allowed	TEST		6+	cursor:not-allowed
	no-drop	TEST		6+	cursor:no-drop
	vertical-text	TEST		6+	cursor:vertical-text
	all-scroll	TEST		6+	cursor:all-scroll
	col-resize	TEST		6+	cursor:col-resize
	row-resize	TEST		6+	cursor:row-resize
	cursor:url(uri)	TEST		6+	cursor:url(uri)

Cara Menggunakan Atribut Class Pada Dokumen HTML

Beriukut Contoh Cara Menggunakan Atribut Class Pada Dokumen HTML

<html>
<head>
<style>
.intro {
color: blue;
}

.important {
color: green;
}
</style>
</head>
<body>

<h1 class="intro">Header 1</h1>

<span class="important">Note that this is an important paragraph. :)</span>

</body>
</html>

Disini kita tempatkan komponen style didalam head yang akan di aplikasikan dimana pada contoh ini terhadap tag heading h1 dan span (untuk text(tulisan)) dalam body dengan memberi attribut class. ini bisa kita terapkan juga terhadap tag-tag lain yang memungkinkan butuh style.
Jangan lupa dalam membuat nama class pada komponen style harus di awali dengan tanda titik perhatikan sperti contoh di atas (intro dan importan)

Referensi URL Encoding

ASCII Character	URL-encoding
space	%20
!	%21
"	%22
#	%23
$	%24
%	%25
&	%26
'	%27
(	%28
)	%29
*	%2A
+	%2B
,	%2C
-	%2D
.	%2E
/	%2F
0	%30
1	%31
2	%32
3	%33
4	%34
5	%35
6	%36
7	%37
8	%38
9	%39
:	%3A
;	%3B
<	%3C
=	%3D
>	%3E
?	%3F
@	%40
A	%41
B	%42
C	%43
D	%44
E	%45
F	%46
G	%47
H	%48
I	%49
J	%4A
K	%4B
L	%4C
M	%4D
N	%4E
O	%4F
P	%50
Q	%51
R	%52
S	%53
T	%54
U	%55
V	%56
W	%57
X	%58
Y	%59
Z	%5A
[	%5B
\	%5C
]	%5D
^	%5E
_	%5F
`	%60
a	%61
b	%62
c	%63
d	%64
e	%65
f	%66
g	%67
h	%68
i	%69
j	%6A
k	%6B
l	%6C
m	%6D
n	%6E
o	%6F
p	%70
q	%71
r	%72
s	%73
t	%74
u	%75
v	%76
w	%77
x	%78
y	%79
z	%7A
{	%7B
\|	%7C
}	%7D
~	%7E
	%7F
`	%80
	%81
‚	%82
ƒ	%83
„	%84
…	%85
†	%86
‡	%87
ˆ	%88
‰	%89
Š	%8A
‹	%8B
Œ	%8C
	%8D
Ž	%8E
	%8F
	%90
‘	%91
’	%92
“	%93
”	%94
•	%95
–	%96
—	%97
˜	%98
™	%99
š	%9A
›	%9B
œ	%9C
	%9D
ž	%9E
Ÿ	%9F
	%A0
¡	%A1
¢	%A2
£	%A3
¤	%A4
¥	%A5
¦	%A6
§	%A7
¨	%A8
©	%A9
ª	%AA
«	%AB
¬	%AC
	%AD
®	%AE
¯	%AF
°	%B0
±	%B1
²	%B2
³	%B3
´	%B4
µ	%B5
¶	%B6
·	%B7
¸	%B8
¹	%B9
º	%BA
»	%BB
¼	%BC
½	%BD
¾	%BE
¿	%BF
À	%C0
Á	%C1
Â	%C2
Ã	%C3
Ä	%C4
Å	%C5
Æ	%C6
Ç	%C7
È	%C8
É	%C9
Ê	%CA
Ë	%CB
Ì	%CC
Í	%CD
Î	%CE
Ï	%CF
Ð	%D0
Ñ	%D1
Ò	%D2
Ó	%D3
Ô	%D4
Õ	%D5
Ö	%D6
×	%D7
Ø	%D8
Ù	%D9
Ú	%DA
Û	%DB
Ü	%DC
Ý	%DD
Þ	%DE
ß	%DF
à	%E0
á	%E1
â	%E2
ã	%E3
ä	%E4
å	%E5
æ	%E6
ç	%E7
è	%E8
é	%E9
ê	%EA
ë	%EB
ì	%EC
í	%ED
î	%EE
ï	%EF
ð	%F0
ñ	%F1
ò	%F2
ó	%F3
ô	%F4
õ	%F5
ö	%F6
÷	%F7
ø	%F8
ù	%F9
ú	%FA
û	%FB
ü	%FC
ý	%FD
þ	%FE
ÿ	%FF

Contoh-contoh Kode Dasar Tag HTML

Berikut Contoh-contoh Kode Dasar Tag HTML

1. Huruf tebal (bold), kodenya <b>Tulisan</b> dan hasil: Tulisan
2. Huruf Miring (italics), kodenya <i>Tulisan</i> dan hasil Tulisan
3. Tulisan garis bawah, kodenya <u>Tulisan</u> dan hasil Tulisan
4. Garis baru (enter), kodenya <br /> Contoh Tulisan pertama<br />Tulisan kedua ,maka hasilinya:
Tulisan pertama
Tulisan kedua
5. Rataan Tulisan kiri, kodenya <p align="left">Tulisan</p>
8. Rataan Tulisan kanan, kodenya <p align="right">Tulisan</p>
9. Rataan Tulisan Tengah, kodenya <center>Tulisan</center>
10. Memberi warna tulisan, kodenya <font color="#ED1C24">Tulisan</font> dan hasilnya Tulisan
(ini contoh dengan kode warna merah, ganti kode colornya jika dengan warna lain)
11. Karakter Tulisan (heading) h6, kodenya <h6>Tulisan</h6>
12. Karakter Tulisan (heading) h5, kodenya <h5>Tulisan</h5>
13. Karakter Tulisan (heading) h4, kodenya <h4>Tulisan</h4>
14. Karakter Tulisan (heading) h3, kodenya <h3>Tulisan</h3>
15. Karakter Tulisan (heading) h2, kodenya <h2>Tulisan</h2>
16. Karakter Tulisan (heading) h1, kodenya <h1>Tulisan</h1>
17. Memasang Gambar, Kodenya <img src="URL-Gambar" />
18. Membuat garis kotak, atau pengelompokan, kodenya
<div style="width:400px; height:100px; border:solid 1px #000000; padding: 10px;">Element</div>
dan hasilnya:

Element

Catatan: Tinggi panjang bisa disesuaikan dengan mengatur nilai width dan height pada atribut style,
Ukuran garis kotaknya bisa disesuaikan dengan mengubah nilai 1px pada border
dan garis warnanya bisa dirubah dengan mengganti kode warna #000000 pada border, dan bisa ditambah warna background dengan menambahkan kode ini background-color:#fff; kedalam atribut style. sesuaikan kode warnanya dengan mengganti #fff
"Element" bisa di isi dengan tag-tag HTML atau tulisan

19. Membuat kotak input, kodenya <input type="text" /> dan hasilnya
20. Membuat kotak text area, kodenya <textarea cols="40" rows="5"></textarea>
dan hasilnya:

Catatan: Nilai cols dan rows bisa disesuaikan dengan keinginan
21. Membuat Ordered List, kodenya
<ol>
<li>list satu</li>
<li>list dua</li>
</ol>
hsilnya:

list satu
list dua

22. Membuat Unordered List, kodenya
<ul>
<li>list satu</li>
<li>list dua</li>
</ul>
hsilnya:

list satu
list dua

23. Membuat Table, kodenya
<table style="border-collapse:collapse;background:none" width="400px" border="1">
<tr>
<th style="background:none;width:50%;">Header Kolom 1</th>
<th style="background:none;">Header Kolom 2</th> </tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
hasilnya:

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

23. Membuat tombol, kodenya <button>Tombol</button> dan hasilnya
24. Membuat tulisan Link, kodenya <a href="http://desain-wbsite.blogspot.com/">klik disini</a> dan hasilnya sprti ini klik disini

Contoh Membuat Box / Kotak Dengan Scroll Pada Blog

Bagi pemula, contoh sederhana membuat box dengan efek gulir scroll sperti ini

isi konten
isi konten
isi konten
isi konten
isi konten
isi konten

Kodenya:

<div style="background-color:#fff; border: solid 1px #000; height: 100px; overflow: auto; width: 300px; padding:5px;">
isi konten
isi konten
isi konten
isi konten
isi konten
isi konten
</div>

Ukurannya bisa diseuaikan dengan mengganti yang berwarna merah, Warna background dan warna bordernya (warna sisi) juga bisa disusaikan dengan mengganti kode warna yang saya tandai dengan warna biru

Cara Tambah Gadget di Blog

Bagi yang belum tau cara tambah gadget di Blog (blogspot), berikut caranya:

Login ke akun blogger anda
Pilih Tata Letak
Klik Tambahkan Gadget
Silahkan pilih gadgetnya dengan mengklik nama gadget atau tanda + yang disebelah kanannya, misalnya memilih gadget HTML/JavaScript

Cara Pasang Google Translate di Blog

Tambah Gadget HTML baru, bagi yg belum tau cara tambah Gadget, baca disini
Masukan Kode berikut:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
    pageLanguage: 'id',
    multilanguagePage: true,
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Yang saya kasih warna biru bisa diganti dengan VERTKAL atau SIMPLE

Tampilan tiap pilihannya sebagai berikut:
HORIZONTAL:

VERTIKAL:

SIMPLE:

Latihan-latihan Javascript - Bagian III

PEMBUATAN FORM
1. Form input :

<html>
<head> </head>
<SCRIPT language="Javascript">
function test () {
var val1=document.kirim.T1.value
if (val1%2==0)
document.kirim.T2.value="bilangan genap"
else
document.kirim.T2.value="bilangan ganjil"
}
</SCRIPT>
<body>
<form method="POST" name="kirim">
<p>BIL <input type="text" name="T1" size="20">
MERUPAKAN BIL <input type="text" name="T2" size="20">
</p>
<p><input type="button" value="TEBAK" name="B1" onclick=test()>
</p>
</form>
</body>
</html>

2. Form button :

<html>
<head>
<title>objek document</title>
</head>
<body>
<script language = "javascript">

</script>
<h1>tes</h1>
<form>
<input type = "button"
value = "latar belakang hijau"
onclick = "ubahwarnalb('green')">
<input type = "button"
value = "latar belakang putih"
onclick = "ubahwarnalb('white')">
<input type = "button"
value = "teks kuning"
onclick = "ubahwarnald('yellow')">
<input type = "button"
value = "teks biru"
onclick = "ubahwarnald('blue')">
</form>
<script language = "javascript">

</script>
</body>
</html>

Latihan-latihan Javascript - Bagian II

DASAR-DASAR PEMROGRAMAN DI JAVASCRIPT
1. Operasi dasar aritmatika

<html>
<head>
<title>contoh program javascript</title>
</head>
<script language="javascript">
function test (val1,val2)
{
document.write("<br>"+"perkalian : val1*val2 "+"<br>")
document.write(val1*val2)
document.write("<br>"+"pembagian : val1/val2 "+"<br>")
document.write(val1/val2)
document.write("<br>"+"penjumlahan : val1+val2 "+"<br>")
document.write(val1+val2)
document.write("<br>"+"pengurangan : val1-val2 "+"<br>")
document.write(val1-val2)
document.write("<br>"+"modulus : val1%val2 "+"<br>")
document.write(val1%val2)
}
</script>
<body>
<input type="button" name="button1" value="arithmetic"
onclick=test(9,4)>
</body>
</html>

2. Operasi relational

<html>
<head>
<title>contoh program javascript</title>
</head>
<script language="javascript">
function test () {
val1=window.prompt("nilai i :")
val2=window.prompt("nilai ii :")
document.write("<br>"+"val1==val2"+"<br>")
document.write(val1==val2)
document.write("<br>"+"val1!=val2"+"<br>")
document.write(val1!=val2)
document.write("<br>"+"val1&gtval2"+"<br>")
document.write(val1>val2)
document.write("<br>"+"val1&ltval2"+"<br>")
document.write(val1<val2) }
</script>
<body>
<input type="button" name="button1" value="relational"
onclick=test()>
</body>
</html>

3. Seleksi kondisi (if..else)]

<html>
<head>
<title>contoh if-else</title>
</head>
<body>
<script language = "javascript">

</script>
</body>
</html>

4. Penggunaan operator switch untuk seleksi kondisi

<html>
<head>
<title>contoh program javascript</title>
</head>
<script language="javascript">
function test ()
{
val1=window.prompt("input nilai (1-5):")
switch (val1)
{
case "1" :
document.write("bilangan satu")
break
case "2" :
document.write("bilangan dua")
break
case "3" :
document.write("bilangan tiga")
break
case "4" :
document.write("bilangan empat")
break
case "5" :
document.write("bilangan lima")
break
default :
document.write("bilangan lainnya")
}
}
</script>
<body>
<input type="button" name="button1" value="switch"
onclick=test()>
</body>
</html>

5. Pemakaian looping < for >

<html>
<head>
<title>contoh program javascript</title>
</head>
<body>
<script language="javascript">

</script>
</body>
</html>

6. Pemakaian looping < do..while >

<html>
<head>
<title>contoh program javascript</title>
</head>
<body>
<script language="javascript">

</script>
</body>
</html>

7. Pemakaian looping < while >

<html>
<head>
<title>contoh program javascript</title>
</head>
<body>
<script language="javascript">

</script>
</body>
</html>

Lanjut ke PEMBUATAN FORM>>..

Latihan-latihan Javascript - Bagian I

DASAR-DASAR JAVASCRIPT
1. Pemakaian alert sebagai property window

<html>
<head>
<title>alert box</title>
</head>
<body>
<script language = "javascript">

</script>
</body>
</html>

2. Pemakaian metode dalam objek.

<html>
<head>
<title>skrip javascript</title>
</head>
<body>
percobaan memakai javascript:<br>
<script language = "javascript">

</script>
</body>
</html>

3. Pemakaian prompt

<html>
<head>
<title>pemasukan data</title>
</head>
<body>
<script language = "javascript">

</script>
</body>
</html>

4. Pembuatan fungsi dan cara pemanggilannya

<html>
<head>
<title>contoh program javascript</title>
</head>
<script language="javascript">
function pesan(){
alert ("memanggil javascript lewat body onload")
}
</script>
<body onload=pesan()>
</body>
</html>

Lanjut ke DASAR-DASAR PEMROGRAMAN DI JAVASCRIPT>>..

Tentang Java Script

Tujuan :
1. Memahami tentang struktur javascript
2. Memahami tentang pemrograman di javascript
3. Memahami tentang pemakaian obyek dan form

A. Sekilas tentang JavaScript
Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien.
Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai
contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukanmasukan
pada formulir sebelum formulir dikirimkan ke server.
Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript
diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java
dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

B. Struktur JavaScript
Struktur dari JavaScript adalah sbb :
<SCRIPT LANGUAGE = ”JavaScript”>
<!- -
Penulisan kode javascript
// - - >
</SCRIPT>
Keterangan :
Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya browser tidak
mengenali JavaScript maka browser akan memperlakukannya sebagai komentar sehingga
tidak ditampilkan pada jendela browser.

C. JavaScript sebagai bahasa berorientasi pada obyek
Properti
Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil.
Penulisan :
Nama_objek.nama_properti = nilai
window.defaultStatus = ”Selamat Belajar JavaScript”;
Metode
Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan
terhadap objek.
Penulisan :
Nama_objek.nama_metode(parameter)
document.write (”Hallo”)

D. Letak JavaScript dalam HTML
Skrip Javascript dalam dokumen HTML dapat diletakkan pada :
1. Bagian Head
2. Bagian Body (jarang digunakan).

Lanjut ke DASAR-DASAR JAVASCRIPT >>..

Cara Membuat Background Efek Kertas Melipat Dengan CSS

Bagi agan yang sedang atau mau mencoba Membuat Background Efek Kertas Melipat Dengan CSS, berikut caranya.

Taruh CSS berikut diatas kode</b:skin>

.kasep { position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; overflow:hidden; } .kasep:before { content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15; background:#658E15; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Firefox 3.0 damage limitation */ } .kasep.rounded { -webkit-border-radius:5px 0 5px 5px; -moz-border-radius:5px 0 5px 5px; border-radius:5px 0 5px 5px; } .kasep.rounded:before { border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px; border-radius:0 0 0 5px; }

Untuk warna dasarnya ganti kode warna yang saya tandai drngan warna merah tebal, untuk warna kertas yang melipatnya ganti kode warna yang saya tandai drngan warna biru tebal (sesuaikan dengan keinginan anda). Tapi untuk tips Jika warna dasarnya misalnya putih, maka warna kertas yang melipatnya berwarna putih yang sedikit ke hitaman, ini dimaksudkan agar efek melipatnya nampak.
Contoh:
Misalnya klo dasarnya putih, kode warnanya #fff, maka kode warna kertas melipatnya seperti ini #a0a7b3.
Jangan lupa sesuaikan juga warna textnya, untuk mengatur warna text ganti kode warna yang saya tandai drngan warna hijau tebal

Kode HTMLnya sebagai berikut:

Kode HTML tersebut bisa anda tempatkan sesuai keinginan/kebutuhan

Cara Membuat Gambar-gambar Bergerak di Blog

Masuk ke Edit HTML di blog anda dan cari kode </body> kemudian Copy Paste kode dibawah ini di tepat diatasnya:

Ganti lebar dan tinggi sesuai keinginan anda dengan mengganti angka yang berwarna merah.
Ganti yang berwarna biru dengan URL gambar anda.

Daftar Tag HTML Dan Fungsinya

Nama Tag	Keterangan / Kegunaan
Basic
<!DOCTYPE>	Tag untuk menentukan tipe dokumen
<html>	Tag untuk membuat sebuah dokumen HTML
<title>	Tag untuk membuat judul dari sebuah halaman
<body>	Tag untuk membuat tubuh dari sebuah halaman
<h1> to <h6>	Tag untuk membuat heading
<p>	Tag untuk membuat paragraf
<br>	Memasukan satu baris putus
<hr>	Tag untuk membuat perubahan dasar kata didalam isi
<!--...-->	Tag untuk membuat komentar atau menandai kode
Formatting
<acronym>	Tag untuk membuat sebuah akronim (tidak disupport lagi di HTML5)
<abbr>	Tag untuk membuat sebuah singkatan
<address>	Tag untuk membuat kontak alamat
<b>	Tag untuk membuat huruf bercetak tebal
<bdi>	Mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luarnya (tag baru HTML5)
<bdo>	Mengganti arah teks
<big>	Tag untuk membuat text berhuruf besar (tidak disupport lagi di HTML5)
<blockquote>	Tag untuk membuat sebuah bagian text yang dikutip dari sumber lain
<center>	Tag untuk membuat jajaran teks menjadi ditengah (tidak disupport lagi di HTML5)
<cite>	Tag untuk membuat judul karya
<code>	Tag untuk membuat potongan kode komputer di antara text
<del>	Tag untuk membuat teks yang telah dihapus dari dokumen
<dfn>	Tag untuk membuat sebuah istilah definisi
<em>	Tag untuk membuat penekanan teks (tidak disupport lagi di HTML5)
<font>	Tag untuk membuat font, warna, dan ukuran untuk teks (tidak disupport lagi di HTML5)
<i>	Tag untuk membuat sebuah bagian dari teks yang disesuaikan dengan mood
<ins>	Tag untuk membuat teks yang telah dimasukkan ke dalam dokumen
<kbd>	Tag untuk membuat input keyboard
<mark>	Tag untuk membuat teks yang disorot / ditandai (tag baru HTML5)
<meter>	Tag untuk membuat pengukuran skalar
<pre>	Tag untuk membuat teks terformat
<progress>	Memperlihatkan kemajuan tugas (tag baru HTML5)
<q>	Tag untuk membuat kutipan pendek
<rp>	Tag untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby (tag baru HTML5)
<rt>	Tag untuk membuat sebuah anotasi / pengucapan karakter (untuk tipografi Asia Timur)
<ruby>	Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (tag baru HTML5)
<s>	Tag untuk membuat teks yang tidak lagi benar
<samp>	Tag untuk membuat contoh keluaran dari program komputer
<small>	Tag untuk membuat teks kecil
<strike>	Tag untuk membuat teks yang di coret tengah (tidak disupport lagi di HTML5)
<strong>	Tag untuk membuat teks penting
<sub>	Tag untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia)
<sup>	Tag untuk membuat teks superscripted (seperti dalam penulisan akar kuadrat)
<time>	Tag untuk membuat tanggal / waktu (tag baru HTML5)
<tt>	Tag untuk membuat teks teletype (tidak disupport lagi di HTML5)
<u>	Tag untuk membuat teks yang memiliki Gaya yang berbeda dari teks biasa lainnya
<var>	Tag untuk membuat sebuah variabel
<wbr>	Tag untuk membuat kemungkinan garis-putus



Forms
<form>	Tag untuk membuat sebuah form HTML untuk input pengguna
<input>	Tag untuk membuat sebuah kontrol input
<textarea>	Tag untuk membuat sebuah kontrol input multibaris (text area)
<button>	Tag untuk membuat sebuah tombol yang dapat diklik
<select>	Tag untuk membuat sebuah daftar drop-down
<optgroup>	Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down
<option>	Tag untuk membuat pilihan dalam daftar drop-down
<label>	Tag untuk membuat sebuah label untuk sebuah elemen <input>
<fieldset>	Grup unsur terkait dalam bentuk
<legend>	Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details>
<datalist>	Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5)
<keygen>	Tag untuk membuat key-pair generator kolom input (tag baru HTML5)
<output>	Tag untuk membuat hasil penghitungan (tag baru HTML5)
Frames
<frame>	Tag untuk membuat sebuah window (bingkai) dalam sebuah frameset (tidak disupport lagi di HTML5)
<frameset>	Tag untuk membuat satu set bingkai (tidak disupport lagi di HTML5)
<noframes>	Tag untuk membuat sebuah konten alternatif untuk pengguna yang tidak mendukung frame (tidak disupport lagi di HTML5)
<iframe>	Tag untuk membuat sebuah bingkai
Images
<img>	Tag untuk membuat gambar
<map>	Tag untuk membuat gambar-peta
<area>	Tag untuk membuat area dalam gambar-peta
<canvas>	Digunakan untuk menggambar grafik, melalui scripting (JavaScript ) (tag baru HTML5)
<figcaption>	Tag untuk membuat sebuah caption untuk elemen <figure> (tag baru HTML5)
<figure>	Menentukan konten mandiri (tag baru HTML5)
Audio/Video
<audio>	Tag untuk membuat isi suara (tag baru HTML5)
<source>	Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>) (tag baru HTML5)
<track>	Tag untuk membuat trek teks untuk elemen media (<video> dan <audio>) (tag baru HTML5)
<video>	Tag untuk membuat sebuah video atau film (tag baru HTML5)
Links
<a>	Tag untuk membuat hyperlink
<link>	Tag untuk membuat hubungan antara dokumen dan sumber daya eksternal (paling sering digunakan untuk link ke style sheet)
<nav>	Tag untuk membuat navigasi link (tag baru HTML5)
Lists
<ul>	Tag untuk membuat daftar dengan selain nomor
<ol>	Tag untuk membuat daftar dengan nomor
<li>	Tag untuk membuat sebuah item daftar
<dir>	Tag untuk membuat sebuah daftar direktori (tidak disupport lagi di HTML5)
<dl>	Tag untuk membuat sebuah daftar definisi
<dt>	Tag untuk membuat istilah (item) dalam daftar definisi
<dd>	Defines a description of an item in a definition list
<menu>	Tag untuk membuat deskripsi dari item dalam daftar definisi
<command>	Tag untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat meminta (tag baru HTML5)
Tables
<table>	Tag untuk membuat tabel
<caption>	Tag untuk membuat sebuah caption tabel
<th>	Tag untuk membuat sebuah sel header tabel
<tr>	Tag untuk membuat baris dalam sebuah tabel
<td>	Tag untuk membuat sel dalam sebuah tabel
<thead>	Mengelompokan isi header dalam sebuah tabel
<tbody>	Mengelompokanisi tubuh dalam sebuah tabel
<tfoot>	Mengelompokan isi footer dalam sebuah tabel
<col>	Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>
<colgroup>	Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat
Style/Sections
<style>	Tag untuk membuat informasi style untuk dokumen
<div>	Tag untuk membuat sebuah bagian dalam dokumen
<span>	Tag untuk membuat sebuah bagian dalam dokumen
<header>	Tag untuk membuat sebuah header untuk dokumen atau bagian (tag baru HTML5)
<footer>	Tag untuk membuat footer untuk dokumen atau bagian (tag baru HTML5)
<hgroup>	Pengelompokan elemen heading (<h1> sampai <h6>) (tag baru HTML5)
<section>	Tag untuk membuat bagian dalam dokumen (tag baru HTML5)
<article>	Tag untuk membuat sebuah artikel (tag baru HTML5)
<aside>	Tag untuk membuat konten lain selain dari konten halaman (tag baru HTML5)
<details>	Tag untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan (tag baru HTML5)
<dialog>	Tag untuk membuat sebuah kotak dialog atau jendela (tag baru HTML5)
<summary>	Tag untuk membuat sebuah judul terlihat untuk elemen <detil> (tag baru HTML5)
Meta Info
<head>	Tag untuk membuat informasi tentang dokumen
<meta>	Tag untuk membuat metadata tentang dokumen HTML
<base>	Menentukan URL dasar / target untuk semua URL relatif dalam dokumen
<basefont>	Menentukan standar warna, ukuran, dan font untuk semua teks dalam dokumen (tidak disupport lagi di HTML5)
Programming
<script>	Tag untuk membuat script di sisi klien
<noscript>	Tag untuk membuat sebuah konten alternatif bagi pengguna yang tidak mendukung script di sisi klien
<applet>	Tag untuk membuat sebuah java applet yang ditanam (tidak disupport lagi di HTML5)
<embed>	Tag untuk membuat sebuah wadah untuk aplikasi eksternal (non-HTML) (tag baru HTML5)
<object>	Tag untuk membuat sebuah objek yang ditanam
<param>	Tag untuk membuat sebuah parameter untuk objek

Kode CSS Efek Transisi Gambar

Efek Bumping :

.post img{-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}.post img:hover{-webkit-transform:translate(0px,10px);-moz-transform:translate(0px,-10px);-ms-transform:translate(0px,-10px);-o-transform:translate(0px,10px);transform:translate(0px,-10px)}

Efek Fade Out :

.post img{-webkit-transition:opacity .5s ease-out;-moz-transition:opacity .5s ease-out;-ms-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out}.post img:hover{opacity:.2}

Efek Fade In :

Efek Rotasi :

.post img{-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}.post img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}

Efek Membesar :

.post img{-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}.post img:hover{-webkit-transform:scale(2,2);-moz-transform:scale(2,2);-ms-transform:scale(2,2);-o-transform:scale(2,2);transform:scale(2,2)}

Efek Skew :

.post img{-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}.post img:hover{-webkit-transform:skew(30deg,20deg);-moz-transform:skew(30deg,20deg);-ms-transform:skew(30deg,20deg);-o-transform:skew(30deg,20deg);transform:skew(30deg,20deg)}

CSS Efek Kotak Benjolan

1. EFEK CSS BUBBLE ATAS

2. EFEK CSS BUBBLE KANAN

3. EFEK BUBBLE BAWAH

4.EFEK BUBBLE KIRI

CSS Efek Bayangan Box / Border

Dibawah ini beberapa contoh CSS Efek Bayangan Box / Border:

   moz-box-shadow: 10px 5px 7px #222;
   -webkit-box-shadow: 10px 5px 7px #222;
   box-shadow: 10px 5px 7px #222;

   -moz-box-shadow: 0 10px 7px #222;
   -webkit-box-shadow: 0 10px 7px #222;
   box-shadow: 0 10px 7px #222;

   -moz-box-shadow: 10px 0 7px #222;
   -webkit-box-shadow: 10px 0 7px #222;
   box-shadow: 10px 0 7px #222;

   -moz-box-shadow: 0 0 7px #222;
   -webkit-box-shadow: 0 0 7px #222;
   box-shadow: 0 0 7px #222;

   -moz-box-shadow: 0 0 20px #222;
   -webkit-box-shadow: 0 0 20px #222;
   box-shadow: 0 0 20px #222;

   -moz-box-shadow: 0 0 20px #f10c0c;
   -webkit-box-shadow: 0 0 20px #f10c0c;
   box-shadow: 0 0 20px #f10c0c;

   -moz-box-shadow: 10px 5px 0 #222;
   -webkit-box-shadow: 10px 5px 0 #222;
   box-shadow: 10px 5px 0 #222;

-moz-box-shadow: -10px -5px 0 #222;
-webkit-box-shadow: -10px -5px 0 #222;
box-shadow: -10px -5px 0 #222;

   -moz-box-shadow: inset 10px 5px 7px #222;
   -webkit-box-shadow: inset 10px 5px 7px #222;
   box-shadow: inset 10px 5px 7px #222;

   -moz-box-shadow: inset 0 10px 7px #222;
   -webkit-box-shadow: inset 0 10px 7px #222;
   box-shadow: inset 0 10px 7px #222;

   -moz-box-shadow: inset 10px 0 7px #222;
   -webkit-box-shadow: inset 10px 0 7px #222;
   box-shadow: inset 10px 0 7px #222;

   -moz-box-shadow: inset 0 0 7px #222;
   -webkit-box-shadow: inset 0 0 7px #222;
   box-shadow: inset 0 0 7px #222;

   -moz-box-shadow: inset 0 0 20px #222;
   -webkit-box-shadow: inset 0 0 20px #222;
   box-shadow: inset 0 0 20px #222;

   -moz-box-shadow: inset 0 0 20px #f10c0c;
   -webkit-box-shadow: inset 0 0 20px #f10c0c;
   box-shadow: inset 0 0 20px #f10c0c;

   -moz-box-shadow: inset 10px 5px 0 #222;
   -webkit-box-shadow: inset 10px 5px 0 #222;
   box-shadow: inset 10px 5px 0 #222;

   -moz-box-shadow: inset -10px -5px 0 #222;
   -webkit-box-shadow: inset -10px -5px 0 #222;
   box-shadow: inset -10px -5px 0 #222;