Salam Kenal

Saturday 23 January 2010

Form ( Bab V )

Form adalah tempat untuk mengisikan data diri, Komentar, Upload File dan sebagainya.

awal tagnya adalah <form> </form>, dan memiliki beberapa attribute seperti :

<form action="q" method="post" enctype="multipart/form-data" name="q">...</form>


arti dari beberapa attribute tersebut adalah, action : ketika tombol berupa button atau submit ditekan, maka link pemrosesannya akan menuju sesuai value dari action tersebut, misal : proses_query.php

name adalah identitas dari form tersebut, biasanya berguna jika kita gunakan JavaScript sebagai pemanis form tersebut.

enctype : memungkinkan kita untuk mengupload gambar jika diserta dengan proses .php yang benar, dan masih banyak lagi artinya, maklum saya kurang jelas waktu pelajaran ini, hehehe

Contoh Form :

Name :




Website :




Comment :






contoh diatas adalah form sederhana untuk penyampaian komentar pengunjung kepada admin suatu website tertentu, dan berikut codenya :

<form action="http://balidimataku.blogspot.com" method="post" enctype="multipart/form-data" name="s">

Name : <br />

<input name="nm" type="text" size="20" maxlength="20" />

<br />

Website :<br />

<input name="web" type="text" id="web" size="20" maxlength="50" />

<br />

Comment :

<br />

<textarea name="Com" cols="15" rows="5" id="Com"></textarea>

<br />

<input type="submit" name="Submit" value="Submit" />

</form>

Selamat mencoba!!!

dari HTML hanya sekian kita lanjutkan pembelajaran kita ke CSS. kalo ada yang salah-salah kata dimaafin ya... kalo masih belum ngerti comment aja ya... kutunggu!!! hehehe




Frameset ( Bab IV )

Dengan Frameset kita bisa meletakkan halaman lain pada 1 halaman web dasar, seakan-akan halaman web browser dibagi sesuai banyaknya framset yang kita buat.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Belajar Frameset </title>

</head>


<frameset rows="*" cols="80,*" frameborder="no" border="0" framespacing="0">

<frame src="nama file. [ html ; php ; dan format untuk web lainnya ] ( ini akan muncul default ketika kita membuka web kita ) " name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" />

<frameset rows="80,*" frameborder="no" border="0" framespacing="0">

<frame src="nama file. [ html ; php ; dan format untuk web lainnya ] ( ini akan muncul default ketika kita membuka web kita )" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />

<frame src="nama file. [ html ; php ; dan format untuk web lainnya ] ( ini akan muncul default ketika kita membuka web kita )" name="mainFrame" id="mainFrame" />

</frameset>

</frameset>

<noframes>

<body>

</body>

</noframes>

</html>

Peletakkan tagnya ada di sesudah <head></head> dan sebelum <body></body>

Terlihat ada 3 kali pembagian halaman web, yang pertama bisa kita bilang bagian navbar bagian samping kiri, yang kedua adalah halaman untuk head pada <frameset> ke 2, dan yang terakhir adalah bagian utama dari web kita

Pada bab sebelumnya diajarkan insert Hyperlink, kan sudah diajarkan ketika hyperlink tersebut akan dimunculkan pada frame yang mana...

nha, pada frame sendiri memiliki id dan nama yang unik, ngga boleh sama biar hyperlinknya ga bingung atau dalam kata lain gagal, contoh codenya :

<a href="nama file. [ semua ekstensi ]" target="mainframe"> link ditujukan ke bagian mainframe </a>




Insert object ( Bab III )

Mugkin pada bab ini akan saya persingkat penjelasannya, karena ada banyak tag insert objek yang bisa diinsert ke halam web berbasis HTML

Insert Image

kita bisa menambahkan objek seperti gambar, dan codenya :


<img src="nama file.[ jpg , gif , png , dan format gambar lainnya ]" height="[ ... ] px / %" width="[ ... ] px / %" alt="text yang akan muncul ketika url gambar tidak ditemukan" border=" [ ... ] " />

tag dasarnya adalah <img />, dengan tambahan beberapa attribute seperti, src; width; height; alt; border;

Insert Hyperlink

Hyperlink dalam Bahasa Indonesianya Tautan, ini bisa ditambahkan pada text, image, tag div, file embed, dll

codenya :

<a href="nama file. [ semua ekstensi ]" target="[ _blank; _parent; _self; _top; dan beberapa frameset yang memiliki id dan name]"> Text yang dimunculkan </a>

tag dasarnya <a></a> dan memiliki attribute : href; target; dll. Pada text yang dimunculkan bisa kita rubah menjadi bentuk lain seperti image, tag div, file embed, dll

jika ekstensinya .php ; .html ; .htm ; dan berbagai file yang bisa dimunculkan browser, file tersebut akan berpindah halaman sesuai alamat yang dituju.

jika ekstensinya diluar itu, browser akan menunjukkan pop-up window untuk menanyakan Anda akan mendownload file tersebut atau tidak.

Insert Table

<table>

<tr>

<td>Tabel pertama, baris dan kolom 1</td>

</tr>

</table>

pada tag <table></table> memiliki beberapa attribute yang selalu digunakan untuk mengatur tabel tersebut, seperti : cellpading, cellspacing, border, dll

 

Ada beberapa object lagi yang bisa diinsert ke sebuah halaman web berbasis html, seperti flash shockwave, file .mp3 atau sound lainnya. Tapi untuk saat ini karena kita masih menggunakan text editor yang sangat sederhana yaitu notepad, jadi tidak akan saya jelaskan sekarang.




HTML Bab II

Heading ( kepala )

tag ini sangat penting untuk membuat kepala dari isi web, ada 6 macam heading :


Codenya :


<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

Perataan :

Codenya :

<p align="left">Paragraph 1 dengan perataan kiri </p>

<p align="right">Paragraph 1 dengan perataan Kanan </p>

<p align="center">Paragraph 1 dengan perataan tengah </p>

<p align="justify">Paragraph 1 dengan perataan kanan dan kiri</p>

Break word ( turun satu baris, seperti enter )

Codenya :

Enter Baris 1<br />

Enter Baris 2<br/>

Ordered & Unordered List

Codenya :

Unordered List

<ul>

<li>Unordered List 1 </li>

<li>Unordered List 2 </li>

</ul>

Ordered List

<ol>

<li>Ordered List 1</li>

<li>Ordered List 2</li>

</ol>

Indent ( blockquote )

Codenya :

<blockquote>

<p>Indent ( blockquote ) 1 </p>

<blockquote>

<p>Indent ( blockquote ) 2 </p>

</blockquote>

</blockquote>

Dekorasi Teks

Codenya :

Text dekorasi : <strong>Tebal</strong> <em>Miring</em> <font style="text-decoration:underline">Garis Bawah</font>

Penjelasan :

Untuk penebalan : <strong>Tebal</strong> atau bisa menggunakan <b></b>

Untuk teks miring : <em>Miring</em> atau bisa menggunakan <i></i>

Untuk teks bergaris bawah : <font style="text-decoration:underline">Garis Bawah</font> atau bisa menggunakan <u></u>

 

Pemformatan Ukuran Huruf

Codenya :

<font size="7">20px</font> <font size="5">18px</font> <font size="3">16px</font> <font size="1">14px</font>

 

 




Mendesign Read More

Pertama, Buka program Adobe Photoshop...

lalu mulailah menggambar sesuai keinginan Anda...

contoh seperti gambar diatas... gunakan beberapa tools seperti [ text tool ] dan [ pen tool ]...


beri objek dengan warna sesuai keinginan Anda...

Perhatikan gambar diatas, sampai disana sudah ada 3 buah layer, [ layer tulisan ( read more!!! ) ] ; [ objek panah dengan pen tool ] dan [ background layer ( warna putih ).

Langkah selanjutnya adalah menghapus backgroundnya... click dan drag layer background ke gambar sampah di baway layer panel... ( lihat gambat di bawah )

Terakhir, simpan gambar dengan menekan ctrl + shift + alt + S ( save as for web )...

simpan dalam format .gif atau .png ( untuk format .png gunakan png 24 untuk pilihannya )... lihat gamba dibawah

Jika gambarnya berupa animasi, gunakan format gif tetapi jika blog ingin lebih ringan gunakan png dengan opsi png 24 ( agar backgroundnya bersih )

Wednesday 23 December 2009

Jepun


Jepun free template 2 bar ( sidebar sebelah kiri dan main sebelah kanan [ tempat postingan ] )


Outer-wrappernya : 800px (lebar template). warna dan ukurannya bervariable, jadi Anda bisa merubahnya sesuai dengan keinginan kalian dengan memilih tab font and color pada halaman utama blog edit Anda.

Jika kalian suka dengan designnya silahkan download filenya dan passwordnya, serta lihat demo disini

Monday 14 December 2009

Tukeran Link Yukk!!!


Dalam TIPS SEO sudah dijelaskan bahwa Link Exhcange atau Tukeran Link adalah salah satu cara meningkatkan traffic rank blog atau website kita.


Meskipun blog saya ini ( Bali di Mataku ) belum seberapa terkenalnya, tapi saya akan mencoba mengajak kalian untuk bertukeran link ke blog ini.


Jika tertarik, cukup Copy dan Paste script di bawah ini, lalu beritahu Saya melalui Shoutbox atau bisa contact via facebook no. HP dll, hehehe


ini scriptnya untuk di taruh di Blogroll :





dan ini untuk bannernya, 190 x 136px :






Hasilnya akan terlihat seperti ini


Sebelumnya terimakasih jika Kalian sudah berkenan untuk menukar link di Blog ini, konfirmasi Linknya akan segera saya kerjakan secepat mungkin



CopyRights Narayana Yein dengan coding template dari kendhin's blog, Narayana yein 2009. Hosting oleh 000webhost dan domain dari www.co.cc