HTML Dasar #7

HTML juga dapat membuat horizontal line = <hr>, gunanya untuk memisahkan tentunya.
hehe.

Berikut adalah atribut-atribut nya :

align="..."	Changes the alignment of the rule. It can be left, right, or center.
size="..."	The size or height of the rule.
width="..."	The width of the rule. This can be written as the number of pixels wide (<hr width="400">) or as a percent of the width of the screen (<hr width="75%">).
color="..."	The color of the rule

<hr align="center" size="5" width="80%" color="#6600CC">  

Saat dicoba akan seperti ini :

---

Read More..

HTML Dasar #6

Nah,setelah lama saya vakum gara-gara game,sekarang saya akan memberikan tutorial tentang List.
Tag ordered = <ol>...</ol>,adalah membuat list dengan manggunakan nomor atau huruf. Di dalam tag ini, Anda harus memasukan tag tag list = <li>...</li>. Berikut ini adalah contohnya :

<ol> <li>List item #1</li> <li>List item #2</li> <li>List item #3</li> <li>List item #4</li> </ol>

Setelah di coba di browser,akan nampak sebagai berikut :

1. List item #1
2. List item #2
3. List item #3
4. List item #4

Tag unordered = <ul>...</ul> hampir sama dengan tag ordered , tetapi akan menggunakan "bullets" atau lingkaran-lingkran kecil sebagai pengganti nomor atau angka.

<ul> <li>List item #1</li> <li>List item #2</li> <li>List item #3</li> <li>List item #4</li> </ul>

Stelah dicoba di browser :

• List item #1
• List item #2
• List item #3
• List item #4

Tag <ol> mempunyai atribut-atribut di bawah ini :

<OL COMPACT> your list </OL>	List item #1 List item #2 List item #3 List item #4	The COMPACT attribute instructs the browser to reduce the space occupied by the list.
<OL START=number> your list </OL>	List item #1 List item #2 List item #3 List item #4	Atribut start memungkinkan untuk membuat urutan tidak harus dari angka satu.
<OL TYPE=type> your list </OL>	List item #1 List item #2 List item #3 List item #4	Atribut type yang menggunakan 1.
	List item #1 List item #2 List item #3 List item #4	Atribut type yang menggunakan a.
	List item #1 List item #2 List item #3 List item #4	Atribut type yang menggunakan A.
	List item #1 List item #2 List item #3 List item #4	Atribut type yang menggunakan i.
	List item #1 List item #2 List item #3 List item #4	Atribut type yang menggunakan I.

Tag <ul> mempunyai atribut-atribut di bawah ini :

<UL COMPACT> list entries </UL>	List item #1 List item #2 List item #3 List item #4	The COMPACT attribute instructs the browser to reduce the space occupied by the list.
<UL type > list entries </UL>	List item #1 List item #2 List item #3 List item #4	Tidak menggunakan atribut type.
	List item #1 List item #2 List item #3 List item #4	Atribut type yang menggunakan Circle.
	List item #1 List item #2 List item #3 List item #4	Atribut type yang menggunakan Disc.
	List item #1 List item #2 List item #3 List item #4	Atribut type yang menggunakan Square.

Nah,sekian tutorial tentang list,kalau ada pertanyaan tinggal comment saja :) Read More..

Preview Design Kaos Dengan Photoshop

Kali ini saya membuat tutorial photoshop,sekarang kan musim liburan,barangkali ada yang mau bikin kaos atau jaket untuk kelas atau keluarga,nah,semoga tutorial kali ini bermanfaat :)

1.) Buka gambar kaos anda,usahakan kaos nya jangan ada gambarnya,hehe.

2.) Gunakan Pen Tool untuk menyeleksi kaos.

3.) Dalam keadaan seleksi kaos aktif, klik layer "Background", lalu tekan tombol Ctrl + J di keyboard. Maka akan muncul sebuah layer di atas layer "background" berupa duplikasi berdasarkan seleksi yang telah dibuat tadi.

4.) Klik pada "layer 1", lalu tekan tombol Ctrl + L di keyboard untuk membuat adjustment Level untuk layer tersebut. Atur settingan pada adjustment level seperti gambar dibawah. Langkah ini akan membuat warna kaos pada "Layer 1" menjadi terang berwarna putih.

5.) Ubah blending mode dari "layer 1" menjadi Multiply. Langkah ini membuat bagian yang tampil pada layer 1 hanyalah bayangan lipatan-lipatan baju.

6.) Masukan gambar anda.

7.) Klik layer "vector smart object" (layer desain kaos), Lalu tekan tombol Ctrl + [ di keyboard untuk memposisikan layer desain kaos dibawah layer 1. Sekarang preview desain terlihat lebih realistis karena bayangan lipatan kaos dari "layer 1" terlihat diatasnya.

8.) Sekarang kita akan membuat agar desain kaos dapat diposisikan lebih bebas pada template. Caranya, tekan tombol Ctrl lalu klik pada thumbnail layer 1 untuk mengambil seleksi berdasarkan bentuk objek pada layer 1.

9.) Sementara seleksi aktif, klik pada layer "vector smart object" lalu klik icon Add layer mask dibagian bawah layer palette. Layer mask akan terbentuk berdasarkan seleksi yang sedang aktif dan berfungsi agar bagian diluar seleksi tersebut tidak kelihatan pada area kerja. Jika sudah, klik pada tanda rantai diantara thumbnail layer "vector smart object" dan layer mask untuk menghilangkannya.

10.) Langkah tadi membuat kita lebih bebas menggeser dan memperbesar desain kaos untuk mengatur posisi yang sesuai dengan tampilan kaos. Klik pada thumbnail layer "vector smart object" lalu tekan Ctrl + T (transform) di keyboard untuk mulai mengatur posisi tampilan desain pada kaos.

Selesai :) , kritik dan saran bisa diberikan di kolom komentar :)

Read More..

HTML Dasar #5

Posting lagi ah :D

Kali ini posting tentang HTML aja deh,hehe.

Sekarang kita akan membahas tentang tampilan text,tentu tampilan text akan sangat penting dalam pembuatan sebuah halaman web.

Ini adalah contoh-contoh dari tag-tag dalam tampilan text,cekidot ;)

Tag	Contoh	Definisi
<FONT size="2" color="#FFFF00" face="arial">...</font>	Contoh	Merubah ukuran,wana, dan font. Size ( ukuran ) dapat berupa angka 1 - 7.Color ( warna ) merubah warna font dan dapat berupa hexadecimal atau istilah warna dalam bahasa inggris.Face ( bentuk font ) merubah bentuk font. Font harus dapat ditemukan di setiap komputer seperti Arial, Times New Roman, Helvetica, Tahoma, atau Courier.
<BIG>...</BIG>	Contoh	Membuat text menjadi big ( besar ).
<SMALL>...</SMALL>	Contoh	Membuat text menjadi small ( kecil ).
<B>...</B>	Contoh	Membuat text menjadi bold.
<I>...</I>	Contoh	Membuat text menjadi italic.
<S>...</S>	Contoh	Membuat text seperti dicoret
<U>...</U>	Contoh	Membuat text menjadi underline ( garis bawah ).
<TT>...</TT>	Contoh	Membuat text menjadi teletype atau monospace.
<H1>...</H1>	Contoh	Heading #1
<H2>...</H2>	Contoh	Heading #2
<H3>...</H3>	Contoh	Heading #3
<H4>...</H4>	Contoh	Heading #4
<H5>...</H5>	Contoh	Heading #5
<H6>...</H6>	Contoh	Heading #6

Nah,silahkan dicoba sendiri,kalau ada pertanyaan,komen saja dibawah :).

See You Again :)

Read More..

Jquery Tab Ala Jaluffy

Maaf,karena ada gangguan Tante Sality di PC saya,jadi tidak bisa posting deh,nah berhubung sudah saya perbaiki,saya mau posting tentang Jquery Tabs.

Saya terinspirasi membuat Tab ini dari Jquery-UI,berhubung saya masih amatir,saya membuat ini tidak terlalu bagus sih,tapi saya kira sudah cukup lah

hehe

Sama seperti sebelumnya,saya hanya menggunakan Show dan Hide [ Baru bisa sampai situ T.T ]

Mari kita mulai ! :)

Masukan Script dibawah ini kedalam widget.

 <script type="text/javascript">
      $(document).ready(function() {
            $(".t1").click(function() {
                $(".i1").show();
                $(".i2").hide();
                $(".i3").hide();
                $(".t1").css("background-color","#FFFFFF");
                $(".t2").css("background-color","#999999");
                $(".t3").css("background-color","#999999");
            });
             $(".t2").click(function() {
                 $(".i1").hide();
                $(".i2").show();
                $(".i3").hide();
                $(".t1").css("background-color","#999999");
                $(".t2").css("background-color","#FFFFFF");
                $(".t3").css("background-color","#999999");
            });
             $(".t3").click(function() {
                 $(".i1").hide();
                $(".i2").hide();
                $(".i3").show();
                $(".t1").css("background-color","#999999");
                $(".t2").css("background-color","#999999");
                $(".t3").css("background-color","#FFFFFF");
            });
        });
    </script>
<style type="text/css">
.kotak
{
background:#CCCCCC;
height:300px;
border-radius:5px;
padding-right:3px;
width:245px;
}
.t1,.t2,.t3
{
background:#FFFFFF;
height:25px;
width:auto;
float:left;
margin-top:3px;
cursor:pointer;
border-top-left-radius:5px;
border-top-right-radius:5px;
text-align:center;
margin-left:3px;
padding:1px;
}
.t3,.t2
{
    background:#999999;
}
.i1,.i2,.i3
{
background:#FFFFFF;
overflow:auto;
height:275px;
width:239px;
float:left;
margin-left:3px;
margin-right:3px;
margin-bottom:3px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-right-radius:5px;
}
.i2,.i3
{
display:none;
}
</style>
<div class="kotak">
<div class="t1">Ini Tab 1</div>
<div class="t2">Ini Tab 2</div>
<div class="t3">Ini Tab 3</div>
<div class="i1">Ini Isi 1</div>
<div class="i2">Ini Isi 2</div>
<div class="i3">Ini Isi 3</div>
</div>

Tuh kan,masih dasar banget T.T ,Silahkan diedit Width nya dan disesuaikan dengan blog kamu :)


Semoga Bermanfaat :D


Demonya bisa dilihat disini :) Read More..