Tag Archives: html

Jan201014

Admin

1

load flash pada halaman html

sudah pasti gak heran kalau kita melihat sebuah website yang ada animasi flash nya. Kok bisa!!.. ya bisa la wong tinggal manggil file flash trus dimasukkan sedikit script html, jadi deh.. web yang muncul gambar bergerak (flash) seperti yang ada di webnya putri titian itu loo.. . trus gimana dong cara membuat flash… *tenang-tenang sabar!..

pada postingan ini akan dibahas bagaimana menampilkan flash pada halaman html anda…

cara yang pertama,  siapkan file flash anda (file yang berekstensi swf itu loo..), selanjutnya upload flash yang akan dipakai ke root yang sama atau dibuatkan folder juga bisa.

setelah itu, buat halaman html yang akan di isi dengan gambar flash. Masukkan kode embed seperti dibawah ini


<object width="550" height="400">
<param name="movie" value="namaflashnya.swf">
<embed src="namaflashnya.swf" width="550" height="400">
</embed>
</object>

atau kode html lengkapnya seperti dibawah ini


<html>
<head>
<title>Membuat flash pada html</title>
</head>
<body>
<object width="550" height="400">
<param name="movie" value="namaflashnya.swf">
<embed src="namaflashnya.swf" width="550" height="400">
</embed>
</object>
</body>
</html>

file flash siap di buka di browser. Mudah bukan!…

Sep200915

Admin

2

membuat website toko musik dan toko film

Tidak perlu mahir PHP atau pemrograman untuk membuat webuah website itu, apa lagi sekarang ini banyak CMS (content management system) yang berkeliaran, tinggal klik sini klik sana jadi deh. pada kesempatan kali ini sedikit dibahas bagaimana membuat website toko musik dan juga toko film tanpa harus menguasai bahasa pemrograman (PHP atau ASP). cukup sedikit belajar tag-tag HTML dan sedikit belajar CSS untuk mepercantik website. tentunya nanti website toko musik dan toko film yang anda bangun bisa menghasilkan uang (lumayan buat tambahan uang saku).

Cukup dengan modal email dan domain hosting tentunya, website anda bisa di sulap sebagai website toko musik dan toko film. Dengan memanfaatkan affiliasi (program affiliasi) dari amazon, anda bisa memperoleh komisi dari hasil penjualan. Pastikan anda terdaftar dulu di amazon untuk mendapat id affiliasi trackingnya (punya saya “freetutorifre-20“).

Prinsipnya gini, pertamanya kita cari musik (mp3) dan film yang akan kita jual di widget, trus nanti dari widget itu kita embeed pada website toko musik atau toko film kita. dengan memasukkan javascript seperti dibawah ini


<script type='text/javascript'>
var amzn_wdgt={widget:'MP3Clips'};
amzn_wdgt.tag='freetutorifre-20';
amzn_wdgt.widgetType='SearchAndAdd';
amzn_wdgt.title='My Music Blog';
amzn_wdgt.keywords='Lil Jon - Get Low - Part II';
amzn_wdgt.width='250';
amzn_wdgt.height='250';
amzn_wdgt.shuffleTracks='False';
amzn_wdgt.maxResults='1';
amzn_wdgt.marketPlace='US';
</script>
<script type='text/javascript' src='http://wms.assoc-amazon.com/20070822/US/js/swfobject_1_5.js'>
</script>

kalau pingin lapak daganannya banyak, ya embeed javascriptnya di banyakin juga. untuk affiliasi masing-masing bisa dirubah pada “amzn_wdgt.tag=’freetutorifre-20‘;” dirubah sesuai affiliasinya. mudah bukan

Demo

Bagaimana kalau kita sudah terlanjur pake CMS wordpress ? ikuti postingan selanjutnya

Sudahkah anda belajar membuat website toko musik

Sep200911

Admin

1

css table wizard

sudah pada tau definisi CSS kan,.. menurut wikipedia

Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML (wikipedia)

kalau menurut saya sendiri CSS ini merupakan pelengkap pada html, kita bisa mendesign website dengan menggunakan CSS. pada kesempatan kali ini saya mencoba untuk memberikan css table wizard, jadi dimana kita bisa memodifikasi table yang akan kita buat pada website, bisa di coba wizard berikut ini dan bisa di kembangkan sesuai dengan kemampuan dan keinginan. Tertarik untuk mencobanya, silahkan meluncur ke css table wizard

Sep200903

Admin

1

Membuat focus cursor pada textbox

pernahkah kita menjumpai di internet, ketika kita akan melakukan login atau sedang mendaftar untuk login, ketika kita buka halaman website itu, cursor kita langsung ditempatkan pada field/textbox yang akan kita isi

cursor

seperti pada gambar diatas, gambar yang pertama merupakan bentuk dari penempatan cursor pada textbox ketika halaman itu dipanggil, sedangkan pada gambar kedua nampak cursor tidak ada pada textbox. Hal kecil semacam ini membantu para pengguna/user untuk dapat secara fokus mengisi textbox yang disediakan di halaman itu. tertarik untuk mencobanya, silahkan contoh kode dibawah ini (anggep aja sudah menulis sintak html defaultnya)


<form method="post" name="namaform">
<input type="text" name="namatextbox" />
</form>

untuk memberikan setingan focus cursor, bisa ditambahai script (javascript) pada body (tag : body)


<body onload="document.namaform.namatextbox.focus()">

mudah bukan!

selamat belajar membuat website

Jun200910

Admin

0

css box

css box ini merupakan dasar dari css untuk pembuatan website, untuk penataan tulisan dan penataan menu-menu yang lain yang ada diwebsite. Berikut ini sedikit penjelasan tentang penggunaan css box. coba amati gambar dibawah ini

Jadi untuk menghitung lebar atau tinggi dari suatu box css harus juga diperhatikan padding dan border

Width  = width + padding-left + padding-right + border-left + border-right
Height = height + padding-top + padding-bottom + border-top + border-bottom

May200921

Admin

6

menambah html/javascript pada joomla module

Menambah html pada module joomla yang dimaksud adalah bagaimana jika kita ingin menambahkan tag html pada joomla tanpa membuat module terlebih dulu. Misalkan anda ingin menambahkan shoutbox atau shoutmix pada joomla, atau juga ingin menambahkan youtube pada joomla, tanpa melaui ribet ribet mencari module-module yang freeware itu. Karena shoutmix atau embeed youtube bisa dikatakan kategori html/javascript maka keduanya bisa dimasukkan di module joomla sesuai yang di inginkan.

Untuk prosesnya cukup menambah module specialhtml, adapun cara untuk menambahkan shoutbox atau shoutmix di joomla dan menambahkan youtube di joomla adalah sebagi berikut :

  1. Download terlebih dulu module specialhtml
  2. Upload module special html di menu administrator joomla
  3. Aktifkan module specialhtml yang sudah di upload pada module yang di inginkan
  4. Isi parameter html/javascript sesuai yang akan dimasukkan
  5. Simpan module tersebut
  6. preview website joomla anda

** Selamat belajar Joomla **

Mar200926

Admin

1

Membuat Tulisan Berjalan

membuat tulisan berjalan dengan menggunakan tag HTML.


<marquee>Membuat tulisan berjalan dengan marquee</marquee>

Tulisan berjalan keatas


<marquee direction="up">Tulisan berjalan keatas</marquee>

mengatur kecepatan tulisan


<marquee scrolldelay="10">mengatur tulisan berjalan</marquee>

tulisan berhenti ketika mouse berada di atas tulisan dan berjalan lagi ketika mouse meninggalkan tulisan


<marquee onMouseOver="this.stop()"; onMouseOut="this.start()";>tulisan berhenti karena mouse</marquee>

** Selamat Belajar Membuat Website **

Mar200912

Admin

0

css background untuk textarea

textarea adalah merupakan suatu tag pada HTML yang berfungsi sebagai tempat tulisan atau kode-kode HTML. Unruk membuat textarea ini menggunakan modus html seperti contoh dibawah ini


<textarea name="textarea" cols="50" rows="4"> tulisannya berada disini semua</textarea>

didalam textarea tersebut bisa di beri gambar atau background, dengan menambahkan css sebagai berikut


<style type="text/css">
textarea {
background-image: url(gambare.jpg);
height: 100px;
width: 150px;
}
</style>

selamat belajar css

Mar200903

Admin

3

Membuat gambar link

Gambar link kali ini adalah gimana membuat website yang berupa gambar dan text. Ketika gambar dilewati mouse (hover) maka ditempat yang berbeda, text akan menunjukkan keterangan dari gambar tersebut. Atau bisa sebaliknya.

View Demo

Cara Membuatnya

siapkan dulu folder images untuk menaruh gambar-gambarnya

buat file html dan simpan dengan nama index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Inkubis | Gambar Link</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="page-wrap">
<h1>Gambar Link</h1>
<div class="people">
<a href="#tian" id="tian">
<span class="name">Putri Titian Asih</span><br />
Putri Titian Asih, biasa dipanggil Tian atau Putri Titian lahir di Palembang, 7 April 1991.
<span class="photo">
<img src="images/putri-titian.jpg" alt="Putri Titian Asih" />
</span> </a>

<a href="#gutawa" id="gutawa">
<span class="name">Gita Gutawa</span><br />
Aluna Sagita Gutawa atau lebih dikenal dengan Gita Gutawa lahir di Jakarta, 11 Agustus 1993.
<span class="photo">
<img src="images/gita-gutawa.jpg" alt="Gita Gutawa" />
</span>
</a>
</div>
</div>

</body>
</html>

buat lagi untuk css nya dan simpan dengan nama style.css


*                    { margin: 0; padding: 0; }
body                { font: 12px Helvetica, Sans-Serif; }
#page-wrap            { width: 600px; margin: 50px auto; }
h1                    { font-size: 30px; letter-spacing: -1px; margin: 0 0 20px 0; }
.people                { position: relative; }
a                    { text-decoration: none; color: #222; display: block;
margin: 0 0 0 270px; outline: none; padding: 5px; }
a img                { border: 1px solid #FA00EB; }
a:hover                { background: #ffefcd; }
a .name                { font: 18px Georgia, Serif; }
a:hover .name        { color: #9601FF; font-weight: bold; }
a:hover img            { border: 3px solid #BD00FB; margin: -4px; }
a .photo            { display: block; position: absolute; width: 125px; height: 125px; }
#tian .photo        { top: 0; left: 0; }
#gutawa .photo        { top: 0; left: 134px; }
#gail .photo        { top: 134px; left: 0; }
#padma .photo        { top: 134px; left: 134px; }

lihat didalam browser, Mudah Bukan

- Selamat Mencoba -

Feb200927

Admin

0

Mengenal Cookie PHP

Mungkin anda pernah mengalami hal seperti ini, ketika anda masuk kesebuah website tertentu, Muncul sebuah sapaan atau anda di sapa akrab, “Hello Kunam……“. Yang menjadi pertanyaan anda barangkali adalah “bagaimana situs tersebut memanggil dan mengingat nama anda”  . Jawabannya adalaha, situs tersebut menggunakan cookie. Cookie disini tidak adah hubungannya sama sekali dengan roti atau sepotong kue. Cookie adalah sepotong data yang disimpan pada hardisk lokal milik pengunjung atau client, dan digunakan untuk oleh halaman web untuk menyimpan informasi. Dengan melihat data pada hardisk lokal inilah, suatu server mendapatkan kembali informasi yang pernah dikirim ke klien.

Cookie sendiri dapat digunakan untuk

  • menyimpan nama pengunjung
  • merekam daftar barang yang ingin dibeli pengunjung
  • menyimpan pilihan-pilihan yang diatur oleh pengunjung,
  • menciptakan suatu sesi yang memungkinkan seseorang dapat masuk ke halaman-halaman lain tanpa perlu melakukan login kembali

Bagaimana sebenarnya proses cookie berlangsung! Web server mengirim cookie ke klien melalui judul HTTP, yang dikirim sebelum teks HTML. Melalui inilah klien bisa mengetahui apakah ia perlu mengirimkan cookie yang ada pada hardisk lokal ke web server atau tidak. Seperti halnya web server, klien mengirim balik cookie ke web server melalui judul HTTP.

Didalam judul HTTP, cookie diatur melalui set-cookie. Didalamnya, terdapat informasi nama cookie dan nilainya, batas kadaluarsa, path, domain dan parameter keamanan.

« Older Entries