BAHASA HTML

Untuk paragraf
<p>tulisannnnnnnnn</p>
untuk turun satu tingkat
<br />
untuk membuat tulisan jd ada bulletnya
<ol>
<li>hai 01</li>
<li>hai 02</li>
<li>hai 03</li>
<li>hai 04</li>
</ol>
untuk image biar tulisannya ga gabung sama image
<img align=”left” style=”margin-right: 10px;” alt=”" src=”images/about/director2.jpg” />
Membuat tulisan agar lebih tebal (Bold)
<strong>The Only Way to Survive is to Grow  </strong>
Membuat tulisan agar di tengah
<div align=”center”>The Only Way to Survive is to Grow</div>

KODEWARNA HTML

KODE WARNA HTML

WARNA	HEX	RGB
	#EC8195	254,202,192
	#FECAC0	236,129,149
	#D1D698	209,214,152
	#967878	150,120,120
	#FDEDDB	253,237,219
	#F8FBC1	248,251,193
	#F8D9B5	248,217,181
	#9D8675	157,134,117
	#943329	148,51,41
	#EF2D19	239,45,25
	#49E84C	73,232,76
	#A5E7F2	165,231,242
	#F37164	243,113,100
	#A735E0	167,53,224
	#4DDD13	77,221,19
	#14E0D6	20,224,214
	#F931DF	249,49,223
	#0492F7	4,146,247
	#F1FFEA	241,255,234
	#E2FFEB	226,255,235
	#DEFCED	222,252,237
	#DBFCEC	219,252,236
	#C9FFE7	201,255,231
	#CBDB53	203,219,83
	#91590F	145,89,15
	#F0A93E	240,169,62
	#91CBDA	145,203,218
	#D38F37	211,143,55
	#00C9FF	0,201,255
	#FF0000	255,0,0
	#00FF10	0,255,16
	#F1FF00	241,255,0
	#FF00D7	255,0,215
	#853800	133,56,0
	#FBF0C6	251,240,198
	#F5D247	245,210,71
	#E1B300	225,179,0
	#E22500	226,37,0
	#6E7E79	110,126,121
	#FECAC0	254,202,192
	#ABCFAF	171,207,175
	#C7D578	199,213,120
	#F1F5AE	241,245,174
	#008D9F	0,141,159
	#5DC1D0	93,193,208
	#F49AC2	244,154,194
	#C6E5E9	198,229,233
	#A29A9A	162,154,154
	#F2E3E5	242,227,229
	#F3DEFC	243,222,252
	#659343	101,147,67
	#637E5C	99,126,92
	#009BB9	0,155,185
	#9A854E	154,133,78
	#CFBC8A	207,188,138
	#F9D800	249,216,0
	#FA8D63	250,141,99
	#320345	50,3,69
	#807417	128,116,23

Sumber : http://aiizahh.blogspot.com/2013/05/cara-mengetahui-kode-html-warna-part-2.html#ixzz2TupbXmLF 
Follow us: @aiizahh on Twitter

belajar buat kelas berkolom

INI ADALAH CLASS BERKOLOM - Bicara tentang desain blog yang responsif, sebenarnya saya sepenuhnya menerapkan apa yang pernah dibahas oleh mas Hendro di blognya yaitu responsive web design part 1dan part 2, tapi sebelumnya blog saya memang satuan lebarnya sudah dalam persentase. Saya terinspirasi oleh situs wikipedia yang ternyata tampilannya menyesuaikan dengan layar monitor.

Pertama-tama yang saya lakukan adalah mengkonversi hampir semua satuan pixel tampilan dasar blog saya ke dalam satuan persen (%). Karena saya mendesain blog ini di laptop yang memiliki resolusi lebar 1024px, maka lebar monitor saya itu jika di-implementasikan pada template FaceLeakz setara dengan outer-wrapper yang saya beriwidth:100%; -- #outer-wrapper {width:100%;}-- karena hampir semua class dan id berada di dalam outer-wrapper, kecuali bagian paling bawah yang biasanya diisi dengan copyright yang berada di luar outer-wrapper.

Tunggu dulu, meski lebar monitor 1024px tapi jika postingan panjang ke bawah maka di samping kanan browser akan ada scroll bar vertikal, saya perkirakan lebar scroll bar tersebut 24px, jadi 1024-24=1000px =outer-wrapper=100%.

Ok boys, maksudku teman-teman sekalian, kita ambil kasus aja. Misalkan pada id main-wrapper (#main-wrapper) blog saya sebelumnya dalam satuan px seperti berikut (yang diterapkan pada postingan ini):

#main-wrapper {
width:850px;
padding-left:75px;
padding-right:75px;
margin-left:0;
margin-right:0;

Lalu saya mengkonversi id main-wrapper di atas menjadi seperti berikut:


#main-wrapper {
width:85%;
padding-left:7.5%;
padding-right:7.5%;
margin-left:0;
margin-right:0;

INI MASIH CLASS BERKOLOM - Nilai persentase yang saya berikan jika akumulasikan akan menjadi 100% karena saya tidak memberikan border pada #main-wrapper yang biasanya dalam satuan pixel (px).
Jika saya memberikan border pada sisi kiri dan kanan masing-masing sebesar 1px misalnya, maka harus diberikan ruang untuk tebal border tersebut dengan melakukan pengurangan nilai persentase pada width atau padding untuk kasus di atas. Misalnya mengurangi width sebesar 1% menjadi width:84% (kuota untuk 2px sebesar 1% di monitor 1024px ke atas mungkin berlebihan, tapi kemungkinan aman untuk resolusi 1024px ke bawah).
Lalu saya membuat 4 class baru untuk postingan ini bernama Pak-kepala-geng, Berkolom, Beast dan George. Keempat penyusup yang tidak valid ini ingin berbagi kamar di dalam #main-wrapper. Pak-kepala-geng mengambil posisi paling atas dengan lebar 100%, tuan tanah berkolom juga sama lebarnya tapi ia lebih suka membelah diri, sementara itu George menyukai warna hitam, sedangkan Beast menyakai warna abu-abu. Meski George dan Beast hidup terpisah tapi mereka adalah tetangga dekat dan lapak mereka hanya berjarak 2% saja. Ini dia kuota mereka masing-masing:
.pak-kepala-geng { 
width:100%;
margin-top:20px;
-webkit-column-count:2;
-moz-column-count:2;
-webkit-column-gap:2%;
-moz-column-gap:2%;
font-size:18px;
line-height:1.4em
}

.beast {
clear:both;
width:47%;
float:left;
background:#ddd;
color:#000;
font-size:18px;
line-height:1.4em

}
.george {
width:47%;
float:right;
background:#333;
color:#eee;
font-size:18px;
line-height:1.4em
}

.beast, .george {wrap-word:break-word;
padding:10px 1% 10px 1%;
margin: 10px 0 10px 0;
Ini adalah kelas untuk Beast - Jika menggunakan satuan width pada #main-wrapper dalam pixel (px), maka Pak-kepala-geng, Berkolom, beast dan george melihat lebar #main-wrapper sebesar 850px yang harus dibagi.
Tapi dengan persentasi bukan berarti Pak-kepala-geng, Berkolom, beast dan george melihat #main-wrapper selebar 85% yang harus dibagi (masing-masing dapat kuota 42.5% tanpa padding dan margin pada untuk beast dan george misalnya).
Semua kode di atas FaceLeakz letakkan di dalam postingan bagian paling atas seperti di sarankan oleh Beast
Ini adalah kelas untuk George - Karena mereka sekarang hidup di dunia lain (dunai persentase), maka Pak-kepala-geng, Berkolom, Beast dan George seperti katak di dalam tempurung yang melihat #main-wrapper sebagai milik mereka sepenuhnya dengan width:100%; yang harus dibagi sesuai dengan posisi mereka masing-masing, bukan 85%. Hal yang sama jika beast dan george di kemudian hari punya anak (class), maka anak-anak mereka juga akan melihat width:47% sama dengan 100%. Jika bingung, perhatikan lagi 4 class ilegal di atas.
Sebelum lanjut ke tahap berikutnya, silahkan ambil url halaman INI dan simulasikan di http://mattkersley.com/responsive/

Ini adalah kelas untuk George - Karena mereka sekarang hidup di dunia lain (dunai persentase), maka Pak-kepala-geng, Berkolom, Beast dan George seperti katak di dalam tempurung yang melihat #main-wrapper sebagai milik mereka sepenuhnya dengan width:100%; yang harus dibagi sesuai dengan posisi mereka masing-masing, bukan 85%. Hal yang sama jika beast dan george di kemudian hari punya anak (class), maka anak-anak mereka juga akan melihat width:47% sama dengan 100%. Jika bingung, perhatikan lagi 4 class ilegal di atas.



Sebelum lanjut ke tahap berikutnya, silahkan ambil url halaman INIdan simulasikan di http://mattkersley.com/responsive/





INI MASIH CLASS BERKOLOM - Sudahkah anda melihat bagaimana penampakan postingan di atas di monitor dengan resolusi 240px, 320px, 480px, 768px, dan 1024px berdasar hasil simulasi di mattkersley.com?

Jika sudah dan penglihatan kita sama, pada tool tersebut halaman ini hanya aman di resolusi 768px ke atas dan tidak enak di baca atau ada teks yang menentukan takdirnya sendiri pada resolusi 480px ke bawah, sementara resolusi antara 480px sampai 767px tidak jelas nasibnya.

Melalui hasil simulasi tersebut kita dapat menentukan penyusup mana yang ingin kita rubah takdirnya, apakah Pak-kepala-geng, Berkolom,Beast atau George. Tapi tampaknya tidak ada pilihan lain selain memukul rata mereka semua.

Saya asumsikan saja bahwa di atas resolusi 599px tampilan halaman ini aman, sehingga fokus saya hanya pada resolusi 599px ke bawah.

Karena terlalu kecil untuk menampilkan postingan berkolom-kolom pada resolusi 480px, 320px, dan 240px, maka ide saya adalah membuat tampilan halaman ini bersusun dari atas ke bawah: 

mengecilkan ukuran huruf pada class pak-kepala-geng yang terlalu besar, menjadikan satu kolom class berkolom dan juga gap diset jadi 0, dan menambah width pada class beast dan george seperti berikut:



@media screen and (max-width:599px) {

.pak-kepala-geng {font-size:30px;}

.berkolom {-moz-column-count:1;

-webkit-column-count:1;

-moz-column-gap:0;

-webkit-colum-gap:0;}

.beast,.george {clear:both; width:98%;}

.berkolom,.beast,.george {word-wrap:break-word;

font-size:medium;

font-family:"trebuchet ms"; }}




Sekarang cek halaman ini di mattkersley.com apakah ada perubahan dibandingkan dengan halaman sebelumnya. Jika ada perubahan, mungkin saya dan anda menggunakan browser yang sama.

mengenal rumus kode HTML

Mengenal Rumus Kode HTML

<!-- --> Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser <-- --!>
<a href> Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut </a>
<a name> Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
<applet> Sebagai awal dari Java applets
<area> Mendefinisikan daerah yang dapat diklik (link) pada image map
<b> Membuat teks tebal </b>
<basefont> Membuat atribut teks default seperti jenis, ukuran dan warna font
<bgsound> Memberi (suara latar) background sound pada halaman web
<big> Memperbesar ukuran teks sebesar satu point dari defaultnya

<blink> Membuat teks berkedip </blink> <---- tutup akhiran code ... begitu seterusnya :)

<body> Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
<br> Pindah baris
<caption> Membuat caption pada tabel
<center> Untuk perataan tengah terhadap teks atau gambar
<comment> Meletakkan komentar pada halaman web tapi tidak akan nampak pada browser
<dd> Indents teks
<div> Represents different sections of text.
<embed> Menambahkan sound or file avi ke halaman web
<fn> Seperti tag <a name>
<font> Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
<form> Mendefinisikan input form
<frame> Mendefinisikan frame
<frameset> Mendefinisikan attribut halaman yang akan menggunakan frame
<h1> ... <h6> Ukuran font
<head> Mendefinisikan head document.
<hr> Membuat garis horizontal
<html> Bararti dokumen html
<i> Membuat teks miring
<img> Image, imagemap atau an animation
<input> Mendefinisikan input field pada form
<li> Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> )
<map> Mendefinisikan client-side map
<marquee> Membuat scrolling teks (teks berjalan) - hanya pada MS IE
<nobr> Mencegah ganti baris pada teks atau images
<noframes> Jika browser user tidak mendukung frame
<ol> Mendefinisikan awal dan akhir list
<p> Ganti paragraf
<pre> Membuat teks dengan ukuran huruf yg sama
<script> Mendefinisikan awal script
<table> Membuat tabel
<td> Kolom pada tabel
<title> Mendefinisikan title
<tr> Baris pada tabel
<u> Membuat teks bergaris bawah