ore sanjou[参上する]™

Last Christmas

2008-12-24T18:44:00.000-08:00

Last Christmas"

[Chorus:]
Last Christmas
I gave you my heart
But the very next day, you gave it away
This year
To save me from tears
I'll give it to someone special

Once bitten and twice shy
I keep my distance
But you still catch my eye
Tell me baby
Do you recognize me?
Well
It's been a year
It doesn't surprise me
(whispered) Merry Christmas,
I wrapped it up and sent it
With a note saying "I love you"
and meant it
Now I know what a fool I've been
But if you kissed me now
I know you'd fool me again

[Chorus x2]

A crowded room
Friends with tired eyes
I'm hiding from you
And your soul of ice
Oh my I thought you were
Someone to rely on
Me?
I guess I was a shoulder to cry on
A friend to discover with a fire in her heart
A girl under cover but you tore me apart
You tore me apart, ooo-ooo
Now I've found a real love you'll never fool me again

[Chorus x2]

A friend to discover with a fire in her heart
A girl under cover but you tore me apart
[Spoken] Maybe next year,
I'll give it to someone
I'll give it to someone special.

click here to get this song

Katakan Tidak!!! untuk Antivirus

2008-12-06T05:44:00.000-08:00

Langkah pencegahan terpenting adalah meng-enable fungsi ‘turn off autoplay’ di komputer. Caranya:

*
klik start di pojok kiri bawah.
*
klik Run…
*
ketik gpedit.msc tekan OK
*
cari icon administrative templates di bagian kolom sebelah kiri, klik tanda (+), klik system
*
cari di bagian kolom sebelah kanan turn of Autoplay. Klik dua kali (double klik), pilih pengaturan enable dan All drives.

Lihat gambar di bawah

Langkah pencegahan efektif jika komputer belum terinfeksi virus, pastikan ini di komputer anda karena tindakan pencegahan bersifat umum untuk semua jenis virus/worm sedangkan pengobatan diterapkan secara berbeda-beda tergantung jenis virus. Langkah pencegahan bisa juga dilakukan pada media removable atau file-file itu sendiri.

dan langkah terakhir adalah memunculkan superhidden file bila superhidden file yg kita munculkan tiba2 hilang ato ga kelihatan lagi berarti komputer anda sudah terkena virus karena virus pasti menyembunyikan dirinya berikut cara memunculkan superhidden:
[HKEY_CURRENT_USER \ Software \ Microsoft \ Windows \
CurrentVersion \ Explorer \ Advanced]
"SuperHidden" = 1

Anda mungkin perlu reboot setelah mengubah pengaturan ini untuk untuk bekerja.

bila anda masi tidak merasa aman gunakan lagi antivirus sebagai backup system jd bila memang kena virus tidak sampai kena system karena sudah d protect oleh antivirus
gunakanlah antivirus NOD32 karena selain NOD32 menggunakan system stealth protection NOD32 jg menscanning virus yg bekerja di memori dan lagi bila ada virus menyerang NOD32 akan langsung menquarantine virus tsb

langkah2 Pengobatan bila sudah terkena virus

Ada beberapa langkah yang harus dilakukan.

1.
Menghentikan pergerakan virus/mematikan proses virus yang berjalan

Jika langkah ini tidak dipenuhi yang terjadi virus akan balik lagi, dihapus tapi muncul lagi. Tool yang kita perlukan adalah pemantau/monitor, biasanya windows menyertakan task manager (ctrl + alt + del klik task manager) tapi fungsi ini terlalu sederhana dan kita memerlukan yang lengkap. Beberapa software gratis untuk monitor proses adalah procexp dan what’s running program.

Download procexp terbaru disini (link dari microsoft - versi 11.04 - filetype zip) .

Download what’s running program disini (versi 2.2)

Termasuk didalamnya adalah menghapus registry startup virus. Bagian ini akan dilanjutkan pada tulisan kedua.
2.
Menghapus seluruh file-file virus.

Setelah yakin proses virus sudah berhenti langkah selanjutnya adalah menghapus semua file-file virus. Hal ini bisa dilakukan dengan antivirus (jika terdeteksi) atau cara manual. Cara manual dilakukan dengan fungsi search di windows. Virus pada umunya mempunyai ukuran yang sama dan propertis tanggal yang sama pula, ekstensi yang digunakan bisa berupa *.exe, *.scr, *.com, dll. Lakukan serach dengan bantuan ‘when was it modified’, ‘what size is it’, dan jangan lupa di bagian ‘more advanced options’ untuk menceklist bagian ’search hidden files and folders’. Kata kunci yang digunakan cukup *.* (bintang titik bintang).
3.
Memperbaiki registry

Langkah selanjutnya adalah mengembalikan registry seperti semula, karena beberapa virus mengacak-acak registry kita. Hal ini bisa kita lakukan dengan bantuan plugin ansav yaitu registry fix. Pemakaiannya akan dibahas pada tulisan selanjutnya.
4.
Mengembalikan file-file asli

Beberapa virus akan menduplikasi diri (memalsu) dengan nama-nama file kita, sedangkan file-file yang aslinya dibuat super hidden. File-file tersebut dapat dikembalikan lagi dengan merubah propertis file menjadi normal. Hal ini bisa dilakukan dengan command/perintah di DOS. Kalau bingung coba aja ansav, kemudian klik plugin hidden revealer.

Lihat Gambar di bawah

Cari Saja di Tong Sampah!

2008-12-06T05:37:00.000-08:00

Rudy seorang pemuda desa baru saja membeli seperangkat komputer. Tanpa basa-basi, Ia pun langsung menyuruh penjual merangkaikan komputer tersebut di rumahnya.

Sambil melihat penjual komputer merangkai Rudy pun dengan seksama mendengarkan kata-kata penjual tentang cara mengoperasikan komputer.

Usai merangkai komputer, si penjual pun pamit meminta izin dan meninggalkan komputer tetap menyala. Kebetulan program yang sedang dinyalakan adalah program pemutar musik Winamp.

Rudy yang dikenal sok tahu itu pun langsung mengklak-klik mouse tersebut. Tanpa sadar ia pun menekan Rem all (Remove all) pada tampilan winamp. Seketika itupula ia langsung kaget melihat daftar lagu yang ada di layar winamp hilang.

Merasa lagu-lagunya hilang, ia pun segera mengambil motornya dan bergegas ke tempat ia membeli komputer.

"Mas, gimana masa lagunya hilang semua," ujar Rudy kepada penjual komputer.

Penjual komputer yang sedang sibuk melayani pelanggan, pun menjawab seperlunya.

"Nggak mungkin hilang, coba aja cari di tong sampah dulu," kata penjual itu.

Rudy yang merasa tak diperhatikan pun langsung pulang ke rumahnya dan mengikuti anjuran penjual tersebut dan mencari� ke tong sampah di sekitar rumahnya. Satu jam tak menemukan lagu-lagu itu, ia pun kembali ke toko komputer dengan emosi yang membara.

"Mas, kalau ngasih tahu yang benar dong masa lagu saya hilang suruh nyari di tong sampah, sebodoh-bodohnya saya, tapi saya tahu nggak ada hubungan komputer sama tong sampah," kata Rudy

Mendengar kata-kata Rudy, bukannya kaget si penjual komputer pun malah tertawa keras.

"Mas Rudy, maksud saya cari di tong sampah itu, tong sampah di komputer, recycle bin, lagipula lagu itu tidak hilang cuma terhapus dari playlist di winamp," kata si penjual.

Rudy pun langsung tertegun malu, sekaligus bingung.

"Lha kalau playlist itu carinya di mana? di tong sampah juga ya? kata Rudy.

Tes Sebelum Married

2008-11-29T08:02:00.000-08:00

Ada seorang cowok baru mau kawin, he got nothing to complain about ceweknya....
cantik, pintar, kaya, pokoknya kalau ia kawin, jadi perkawinan ideal deh....
cuman, ada satu problem....
calon ibu mertuanya lebih cantik dari anaknya dan geniitt banget......
tiap dia main ke rumah ceweknya, si calon mertuanya itu pasti lenggak
lenggok lewat sambil memamerkan gerakan tubuh yang aduhai......
Suatu hari dia diundang makan malam ke rumah ceweknya....
begitu dateng, yang menyambut si ibu ca-mer ini, si ca-mer bilang
kalau suami sama anaknya lagi keluar rumah dan baru balik satu jam lagi.....

pokoknya si ibu ca-mer ini secara explisit mengajak cowok ini untuk bercintaan ria....
katanya mumpung kamu belom kawin......
Akhirnya si ibu ngasih ultimatum... ..
silahkan pikirkan dan decide sendiri....
kalau kamu mau, I'll be waiting in the bedroom upstairs...
tapi kalau kamu nggak mau, you know where the door is......,
abis bilang gitu, si ibu berlenggak lenggok ke atas sambil melemparkan senyum genit....
Lama si cowok termenung...
akhirnya dengan langkah gontai dia buka pintu dan keluar rumah.....
ternyata. .
begitu melewati pintu, si calon bapak mertuanya udah menunggu di luar dengan air mata haru....
dia dipeluk sama si bapak sambil bilang, welcome to the family...
it' s a little test that we do....
we want to know what kind of person our daughter will be marrying to.... katanya gitu......
What's the moral of the story?????

..
masih ada lanjutannya di bawah

*always keep condom in your car*
Si cowok sebenarnya cuma mau ngambil kondom ke mobilnya.... .

How many faces can you find in this picture below?

2008-11-26T05:45:00.000-08:00

How many faces can you find in this picture below?

If can find 0 – 5 faces – idiot
If can find 6 – 7 faces – stupid
If can find 8 – 9 faces – normal
If can find 10 – 11 – very normal
If can find 12 – 13 faces –genius

Senyum dong

2008-11-26T05:39:00.000-08:00

Smary Saklitinov
>> >
>> >
>> >
>> > Seorang guru baru tengah mengabsen murid-muridnya.
>> >
>> > Sang guru tertarik dengan sebuah nama, dan dengan penasaran
>> > si guru lalu
>> > memanggil muridnya.
>> >
>> > Guru: 'Smary Saklitinov, coba kemari!'
>> >
>> > Murid: 'Ya bu, saya.'
>> >
>> > Guru: 'Sini kamu nak, kamu keturunan Yugoslavia
>> > yach?'
>> >
>> > Murid: 'Nggak bu!'
>> >
>> > Guru: 'Lalu kenapa nama kamu Smary Saklitinov?'
>> >
>> > Murid: 'Oo...itu, Smary itu singkatan dari nama bapak
>> > saya (S)urtono dan ibu
>> > saya (Mary)anti.
>> >
>> > Guru: 'Mmmm...lalu Saklitinov?'
>> >
>> > Murid: 'Sabtu Kliwon Tiga November.'
>> >
>> >
>> >
>> >
>> >
>> > 225 M
>> >
>> >
>> >
>> > Dua orang murid sedang berjalan-jalan di sebuah museum.
>> > Lalu mereka melihat
>> > sebuah mumi. Dibawahnya bertuliskan 225 M..
>> >
>> > Murid 1 : '225 M itu maksudnya apa ya?
>> >
>> > Murid 2 : 'Mungkin itu nomor mobil yang menabraknya
>> > dulu.'
>> >
>> >
>> >
>> >
>> >
>> > Absen Kelas
>> >
>> >
>> >
>> > Di kelas 1 sebuah Sekolah Dasar sedang ada absen kelas...
>> >
>> > Guru: 'Nana Yuliani!'
>> >
>> > Nana: 'Saya, Bu!'
>> >
>> > Guru: 'David Hutagalung!'
>> >
>> > David: 'Saya, Bu!'

>> > Guru: 'Tono Surtono M!'
>> >
>> > Tono: 'Saya, Bu!'
>> >
>> > Guru: 'Tono, tolong sini sebentar...'
>> >
>> > Tono: 'Kenapa, Bu Guru?'
>> >
>> > Guru: 'Ibu agak nggak suka sama nama kamu. Kalo udah
>> > Tono, jangan pake
>> > Surtono lagi. Jadinya aneh. Bilangin itu ke bapak kamu,
>> > ya!?'
>> >
>> > Tono: 'Iya, Bu!'
>> >
>> >
>> >
>> > Guru: 'Ngomong-ngomong, M-nya itu singkatan dari
>> > apa?'
>> >
>> > Tono: 'Martono, Bu!'
>> >
>> >
>> >
>> >
>> >
>> > Tukang Daging
>> >
>> >
>> >
>> > Suatu pagi lewatlah seorang penjual daging..
>> >
>> > 'Dageeeng! Dageeeeennngg! !!' teriaknya.
>> >
>> > Seorang ibu rumah tangga yang sedang sakit gigi sewot
>> > banget mendengar
>> > teriakan si tukang daging.
>> >
>> >
>> >
>> > Ibu: 'Hei tukang daging! Lu kagak punya otak
>> > ya....!!!??? '
>> >
>> > Tukang daging : 'Wah kebetulan gak punya, Bu. Hari ini
>> > daging semua...'
>> >
>> >
>> >
>> >
>> >
>> > Pelayan toko
>> >
>> >
>> >
>> > Di sebuah toko bahan bangunan :
>> >
>> > Pembeli : Tolong dong pakunya 1 Kg.
>> >
>> > Pelayan : Dibungkus ya...?
>> >
>> > Pembeli : enggak, makan di sini aja (dengan muka kesal)
>> > Pelayan : $*%$
>> >
>> >
>> >
>> >
>> >
>> > Bernyanyi
>> >
>> >
>> >
>> > Seorang dokter kaget ketika masuk halaman belakang sebuah
>> > rumah sakit jiwa,
>> > karena dia mendengar ada orang bernyanyi.
>> >
>> > Setelah dia cari ternyata suara seorang pasien rumah sakit
>> > jiwa tersebut.
>> >
>> > Cuma anehnya, si pasien menyanyikannya dengan tidur
>> > telentang.
>> >
>> >
>> >
>> > Dengan heran sang dokter terus mengamati pasien tersebut.
>> > Dia berpikir,
>> > sepertinya si pasien sudah sembuh.
>> >
>> >
>> >
>> > Lebih kaget lagi, kemudian pasien tersebut tengkurap dan
>> > menyanyikan lagu
>> > yang lain.
>> >
>> >
>> >
>> > Karena penasaran, dokter menghampiri sang pasien dan
>> > bertanya, 'Hai, mengapa
>> > kamu tadi menyanyi dengan tidur telentang dan sekarang
>> > tengkurap?'
>> >
>> >
>> >
>> > Dengan kalem si pasien menjawab, 'Ya Dok, karena tadi
>> > side A, sekarang side
>> > B.'
>> >
>> >
>> >
>> >
>> >
>> > Anjing Pintar
>> >
>> >
>> >
>> > Dua orang perempuan sedang meributkan anjing-anjing mereka.
>> > Keduanya saling
>> > menyombongkan kepintaran piaraan mereka itu.
>> >
>> >
>> >
>> > Perempuan 1: 'Anjing gua hebat banget, deh.. Tiap pagi
>> > ia nungguin tukang
>> > koran, dan begitu loper itu datang, anjing gua langsung
>> > ngambil korannya dan
>> > membawanya ke tempat gua sarapan.'
>> >
>> > Perempuan 2: 'Ya, gua tahu itu.'
>> >
>> > Perempuan 1: (kaget) 'Darimana lu tahu?'
>> >
>> > Perempuan 2: 'Anjing gua yang cerita.'

HTML minggu ke-8

2008-11-13T19:16:00.001-08:00

LINK HTML

Tujuan Instruksional :

Mahasiswa memahami tag-tag untuk pembuatan link pada dokumen HTML
Mahasiswa dapat membuat link dengan menggunakan teks
Mahasiswa dapat membuat link dengan menggunakan image
Mahasiswa dapat membuat link untuk mengirimkan pesan melalui email

Link HTML

HTML menggunakan hyperlink untuk membuat link ke dokumen lain atau bagian lain dari dokumen di Internet, yaitu dengan tag anchor <a></a>. Tag anchor ini dapat merujuk ke berbagai jenis dokumen multimedia, seperti dokumen teks, gambar/image, suara, video, dan lain-lain.

Berikut ini adalah beberapa contoh penggunaan tag <a> dalam HTML :

Atribut HREF digunakan untuk memberikan alamat link yang dikehendaki, sedangkan teks yang berada di antara tag <a> dan </a> akan ditampilkan sebagai hyperlink.

Atribut TARGET digunakan untuk mendefinisikan di mana dokumen pada link tersebut akan dibuka. Pada contoh di atas TARGET="_BLANK" akan membuka dokumen pada window web browser baru. Secara default, tanpa atribut TARGET dokumen akan dibuka pada window yang sama.

Atribut NAME digunakan untuk memberikan nama anchor. Dengan nama anchor ini dapat dibuat link untuk menuju ke lokasi spesifik pada halaman HTML yang ditunjukkan oleh nama anchor tersebut. Hal ini memudahkan pencarian bagian halaman HTML tanpa menggulung layar web browser.

Sedangkan link yang digunakan untuk menuju nama anchor seperti yang ditunjukkan di atas adalah sebagai berikut :

<a href="#label">link menuju bagian label</a>

8
Latihan 1 : Hyperlink Teks

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

<p><a href="5-1.html">Teks ini</a> adalah link ke dokumen lain.</p>

<p><a href="http://www.yai.ac.id/">Teks ini</a> adalah link ke dokumen lain di Internet.</p>

</body>

</html>

Simpan file di My Document sebagai "coba8-1.html" dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik "coba8-1.html" pada bagian File name, klik tombol Save.
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba8-1.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba8-1.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana cara membuat dua hyperlink yang berbeda.

Hyperlink pertama digunakan untuk mengakses dokumen lain yang berada pada komputer (server) yang sama. Hal ini terlihat dari nama file yang tertulis pada tag <a> HTML.

Sedangkan hyperlink kedua digunakan untuk mengakses dokumen (halaman) lain yang berada di Internet. Oleh karena digunakan sebuah alamat Internet pada tag <a> HTML.

8
Latihan 2 : Hyperlink Image

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

<p>

Image juga dapat digunakan sebagai link :

</p>

</body>

</html>

Simpan file sebagai "coba8-2.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba8-2.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba8-2.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana cara membuat hyperlink dengan menggunakan image.

Sebagai pengganti teks maka digunakan link berupa image. Image disisipkan dengan menggunakan tag <img src="nama_file_image">.

8
Latihan 3 : Link Ke Alamat Email (1)

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

<p>

Ini adalah contoh link ke alamat email:

<a href="mailto:nama@alamat.com">Kirim Email</a>

</p>

</body>

</html>

Simpan file sebagai "coba8-3.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba8-3.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba8-3.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana tag <a> dapat digunakan untuk membuat link ke alamat email. Hal ini berfungsi hanya bila di perangkat komputer yang digunakan telah terinstall program email client, seperti Outlook Express, Eudora, IncrediMail, dan lain-lain.

Pada contoh latihan di atas, bila link Kirim Email diklik, program email akan secara otomatis terbuka dengan alamat email yang dituju sesuai dengan yang telah ditentukan pada atribut HREF, yaitu email dengan alamat : nama@alamat.com.

8
Latihan 4 : Link Ke Alamat Email (2)

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

<p>

Ini adalah contoh link ke alamat email:

<a href="mailto:nama1@alamat.com?cc=nama2@alamat.com&bcc=nam3@alamat.com&subject=Undangan%20Pesta&body=Kamu%20diundang%20ke%20pesta%20ulang%20tahun%20besok%20malam!">Kirim Undangan</a>

</p>

</body>

</html>

Simpan file sebagai "coba8-4.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba8-4.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba8-4.html), lalu klik OK.

&
Penjelasan

Beberapa informasi tambahan pada email dapat disertakan, seperti subyek email, carbon copy (cc), blind carbon copy (bcc), dan bahkan isi dari email tersebut.

Pada contoh, bila link Kirim Undangan diklik, maka akan terbentuk sebuah email dengan informasi sebagai berikut :

To : nama1@alamat.com
Cc : nama1@alamat.com
Bcc : nama1@alamat.com
Subject : Undangan Pesta
Body : Kamu diundang ke pesta ulang tahun besok malam

Perhatikan bahwa untuk setiap spasi digunakan tanda "%20" di mana hal tersebut dimaksudkan agar teks dapat ditampilkan sebagaimana mestinya pada web browser.

HTML minggu ke-7

2008-11-13T19:11:00.001-08:00

IMAGE DALAM HTML

Tujuan Instruksional :

Mahasiswa memahami penggunaan image dalam HTML
Mahasiswa dapat mengatur tampilan image pada dokumen HTML
Mahasiswa dapat menggunakan image sebagai latar belakang dokumen HTML

Tag Image

Dalam HTML, gambar atau image didefinisikan dengan menggunakan tag <img>.
Tag <img> tidak memiliki tag akhir, maksudnya tidak perlu ditutup dengan tag </img>, sama seperti halnya dengan tag <br> dan <hr>.
Untuk dapat menampilkan image, diperlukan atribut SRC (kependekan dari kata "source"). Nilai dari SRC ini berisikan nama file image (beserta lokasi tempat penyimpanan file tersebut) yang ingin ditampilkan.
Format dasar penulisan tag <img> adalah sebagai berikut :

Atau :

Bila file image yang digunakan berada pada satu folder (lokasi) penyimpanan yang sama dengan dokume HTML, maka digunakan format yang pertama, misalnya :

Namun bila file image yang digunakan disimpan pada folder (lokasi) yang berbeda maka digunakan format yang kedua, misalnya disimpan pada folder bernama image :

Atribut Alt

Atribut ALT digunakan untuk mendefinisikan teks alternatif yang akan ditampilkan bila image yang diinginkan, karena suatu dan lain hal, tidak tampil di web browser. Format penulisannya adalah sebagai berikut :

Atribut ALT perlu digunakan untuk memberi gambaran/penjelasan kepada pengakses apa yang seharusnya ditampilkan pada dokumen HTML tersebut. Image tidak tampil disebabkan oleh beberapa sebab, seperti image tersebut sudah tidak ada lagi, atau adanya kesalahan dalam penulisan nama file dan lokasi penyimpanan file tersebut.

Atribut Align

Atribut ALIGN digunakan untuk mendefinisikan posisi image terhadap teks yang diinginkan. Format penulisannya adalah sebagai berikut :

Ada beberapa value yang bisa diberikan pada atribut ALIGN ini, yaitu :

LEFT, image akan ditampilkan di sebelah kiri teks (paragraf)
RIGHT, image akan ditampilkan di sebelah kanan teks (paragraf)
TOP, image akan ditampilkan secara vertikal di sisi atas teks.
MIDDLE, image akan ditampilkan secara vertikal di sisi tengah teks.
BOTTOM, image akan ditampilkan secara vertikal di sisi bawah teks.

Tanpa atribut ALIGN, secara default teks akan ditampilkan di bawah, yaitu seperti pada ALIGN=BOTTOM.

Atribut Border

Atribut BORDER digunakan untuk mendefinisikan besarnya garis batas di sekeliling image yang ditampilkan. Bila diset BORDER=0, maka garis batas tidak akan ditampilkan. Format penulisannya adalah sebagai berikut :

Atribut Background

Untuk menjadikan sebuah image sebagai latar belakang sebuah dokumen HTML tag <img> tidak digunakan. Yang dibutuhkan adalah atribut BACKGROUND. Atribut BACKGROUND disisipkan pada tag <body> untuk menjadikan sebuah image sebagai latar belakang seluruh dokumen HTML.

Secara default image tersebut akan disusun secara tile sebagai latar belakang dokumen HTML.

Atribut BACKGROUND juga dapat digunakan untuk memberikan latar belakang pada tabel (disisipkan pada tag <table>) dan juga sel data (disisipkan pada tag <td>).

Contoh-contoh latihan berikut akan lebih memberi gambaran variasi penggunaan tag <img>.

8
Latihan 1 : File Image

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

<p>

Sebuah file image : <img src="constr4.gif" width="144" height="50">

</p>

<p>

Sebuah image di folder lain : <img src="/images/netscape.gif" width="33" height="32">

</p>

<p>

Sebuah image dari Internet : <img src="http://www.w3schools.com/images/ie.gif" width="73" height="68">

</p>

</body>

</html>

Simpan file di My Document sebagai "coba7-1.html" dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik "coba7-1.html" pada bagian File name, klik tombol Save.
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba7-1.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba7-1.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan tiga cara menampilkan file image pada dokumen HTML. Cara yang pertama digunakan apabila file image yang ingin ditampilkan berada pada folder yang sama dengan dokumen HTML.

Cara kedua digunakan untuk file image yang berada pada folder yang berbeda dari lokasi penyimpanan dokumen HTML, misalnya di dalam folder images.

Cara ketiga digunakan bila file image berada di Internet yang alamatnya telah diketahui, misalnya pada contoh diambil dari www.w3schools.com dan berada di dalam folder images.

8
Latihan 2 : Posisi Vertikal Teks Terhadap Image

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

<p>

Sebuah image <img src="hackanm.gif" align="bottom" width="48" height="48"> di bawah teks

</p>

<p>

Sebuah image <img src ="hackanm.gif" align="middle" width="48" height="48"> di tengah teks

</p>

<p>

Sebuah image <img src ="hackanm.gif" align="top" width="48" height="48"> di atas teks

</p>

</body>

</html>

Simpan file sebagai "coba7-2.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba7-2.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba7-2.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana posisi sebuah image ditampilkan secara vertikal terhadap teks. Contoh pertama dengan atribut ALIGN=BOTTOM akan menampilkan image dengan posisi teks di posisi bawah dari image tersebut.

Contoh kedua dengan atribut ALIGN=MIDDLE akan menampilkan image dengan posisi teks di sebelah tengah. Dan contoh ketiga dengan atribut ALIGN=TOP akan menampilkan image dengan posisi teks di sebelah atas.

8
Latihan 3 : Posisi Horizontal Teks Terhadap Image

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

<p>

Sebuah image <img src ="hackanm.gif" width="48" height="48"> di tengah teks

</p>

<p>

<img src ="hackanm.gif" width="48" height="48"> Sebuah image di awal teks

</p>

<p>

Sebuah image di akhir teks <img src ="hackanm.gif"

width="48" height="48">

</p>

</body>

</html>

Simpan file sebagai "coba7-3.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba7-3.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba7-3.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan penempatan posisi horizontal sebuah image terhadap penulisan teks. Hal ini lebih dipengaruhi oleh penempatan tag <img> itu sendiri, karena tidak ada atribut yang ditambahkan pada tag <img>.

Misalnya tag <img> diletakkan di bagian akhir dari kalimat, maka image akan ditampilkan setelah kalimat tersebut. Demikian juga bila tag <img> diletakkan di awal kalimat, maka image akan ditampilkan sebelum kalimat dimulai.

8
Latihan 4 : Penempatan Image dalam Paragraf

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

<p>

<img src ="hackanm.gif" align ="left" width="48" height="48"> Sebuah paragraf dengan sebuah image. Atribut ALIGN diberi nilai LEFT supaya image akan ditampilkan di sebelah kiri dari paragraf ini.

</p>

<p>

<img src ="hackanm.gif" align ="right" width="48" height="48"> Sebuah paragraf dengan sebuah image. Atribut ALIGN diberi nilai RIGHT supaya image akan ditampilkan di sebelah kiri dari paragraf ini.

</p>

</body>

</html>

Simpan file sebagai "coba7-4.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba7-4.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba7-4.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan penempatan posisi sebuah image di dalam sebuah paragraf. Hal ini diatur dengan menggunakan atribut ALIGN seperti terlihat pada dokumen HTML.

Atribut ALIGN=LEFT akan menyebabkan image ditampilkan di sisi kiri atas paragraf, sedangkan atribut ALIGN=RIGHT akan menampilkan image di sisi kanan atas dari paragraf.

8
Latihan 5 : Mengatur Ukuran Image

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

Sebuah image dapat dibuat lebih kecil atau lebih besar denga mengatur value pada atribut WIDTH dan HEIGHT.

</p>

</body>

</html>

Simpan file sebagai "coba7-5.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba7-5.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba7-5.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana ukuran sebuah image dapat diatur dengan menggunakan atribut WIDTH dan HEIGHT. Atribut WIDTH dan HEGHT dapat membuat sebuah image lebih besar ataupun lebih kecil dari ukuran sebenarnya.

Misalnya sebuah image memiliki ukuran lebar 100 pixel dan tinggi 100 pixel, karena pada tag <img> diatur WIDTH=45 dan HEIGHT=45 maka image tersebut akan ditampilkan sebesar 45 pixel X 45 pixel.

8
Latihan 6 : Teks Alternatif

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

<p>

Bila image tidak tampil, maka teks yang merupakan value dari atribut ALT akan ditampilkan pada web browser.</p>

</body>

</html>

Simpan file sebagai "coba7-6.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba7-6.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba7-6.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana teks yang diberikan pada atribut ALT akan ditampilkan apabila image yang dimaksud pada atribut SRC ternyata tidak dapat ditemukan.

Pada contoh teks Panah Kiri akan tampil apabila image goleft.gif tidak ditemukan pada lokasi penyimpanan yang dimaksud.

8
Latihan 7 : Image Sebagai Link

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

<p>

Image dapat digunakan sebagai link :

</p>

</body>

</html>

Simpan file sebagai "coba7-7.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba7-7.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba7-7.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana sebuah image dapat dijadikan link. Sama halnya dengan pembuatan link dengan menggunakan teks seperti telah dijelaskan pada pertemuan sebelumnya, hanya saja untuk teks diganti dengan image, yaitu dengan menyisipkan tag <img> di antara tag <a href> dan </a>.

Contoh sederhana"toko online":

Menu:

<tr>

<td>toko online</td>

</tr>

<tr>

<a href="daftar.html">daftar</a>

<br>

<a href="pesan.html">pesan</a>

<br>

<a href="bayar.html">pembayaran</a>

</td>

</tr>

</table>

<hr>

<marquee direction=right>di buat oleh 1102060014 david wong</marquee>

Daftar:

<center>daftar barang</center>

<hr>

<marquee>barang yg tersedia</marquee>

<tr>

<td>harga</td>

</tr>

<tr>

<td>doraemon</td>

</tr>

<tr>

<td>naruto</td>

</tr>

<tr>

</tr>

</table>

<br>

<hr>

</center>

Pesan:

<center>pesan barang</center>

<hr>

<align="left">

no.daftar:<input name="text1"type="text"maxlength="25" size="25">

<br>

nama:      <input name="text1"type="text"maxlength="25" size="25">

<br>

pesan barang:

<option value="doraemon">doraemon

<option value="naruto">naruto

<option value="MAR">MAR

</select>

<br>

<hr>

<tr>

<td>harga</td>

<td width"50%">jumlah</td>

</tr>

<tr>

<td>doraemon</td>

</tr>

<tr>

<td>naruto</td>

</tr>

<tr>

</tr>

</table>

<br>

<hr>

</center>

Bayar:

<center>daftar barang</center>

<hr>

<marquee>barang yg tersedia</marquee>

<tr>

<td>harga</td>

</tr>

<tr>

<td>doraemon</td>

</tr>

<tr>

<td>naruto</td>

</tr>

<tr>

</tr>

</table>

<br>

<hr>

</center>

HTML minggu ke-6

2008-11-13T19:02:00.001-08:00

FONT DAN STYLE HTML

Tujuan Instruksional :

Mahasiswa memahami apa yang dimaksud dengan style HTML
Mahasiswa dapat mengatur format penulisan font
Mahasiswa mengetahui cara-cara pembuatan style pada dokumen HTML

Tag Font

Untuk mengatur format penulisan font (huruf) digunakan tag <font>.
Penggunaan tag <font> sebaiknya mulai dikurangi, karena pada versi-versi HTML yang akan datang tag <font> ini tidak akan digunakan lagi. Untuk mengatur penulisan font disarankan untuk menggunakan styles.
Format dasar penulisan tag <font> adalah sebagai berikut :

<p>

<font face="Verdana" size="2" color="red">Ini adalah sebuah paragraf.</font>

</p>

Atribut FACE digunakan untuk menentukan jenis font yang diinginkan, misalnya Arial, Verdana, Times New Roman, dan lain-lain.
Atribut SIZE digunakan untuk menentukan besarnya ukuran font yang diinginkan antara 1 s/d 7. SIZE=1 digunakan untuk font kecil, dan SIZE=7 untuk font yang besar.
Atribut COLOR digunakan untuk menentukan warna font yang diinginkan, misalnya red, green, blue, dan lain-lain.

Style HTML

Style digunakan untuk mengatur tampilan dokumen HTML di web browser secara keseluruhan. Tidak hanya font yang dapat diatur melalui style, tetapi juga warna background, dan lain-lain.

Ada tiga cara untuk membuat style pada dokumen HTML :

External Style Sheet

External style sheet digunakan bila style ingin diterapkan ke banyak dokumen HTML. Dengan menggunakan cara ini, tampilan seluruh dokumen HTML dapat diganti dengan mengubah satu file saja.

Format penulisan tag external style sheet adalah sebagai berikut :

<head>

</head>

Perlu diingat bahwa external style sheet ini diletakkan di antara tag <head> dan </head>, bukan di antara tag <body> dan </body> seperti tag-tag lainnya.

External style sheet berupa dokumen terpisah dengan ekstensi .css (cascading style sheet). Pada file CSS inilah semua format style dituliskan.

Internal Style Sheet

Internal style sheet digunakan bila hanya ada satu dokumen HTML yang menggunakan style tersebut.

Format penulisan tag external style sheet adalah sebagai berikut :

<head>

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

Perlu diingat bahwa internal style sheet ini juga diletakkan di antara tag <head> dan </head>, bukan di antara tag <body> dan </body>.

Inline Styles

Inline styles digunakan bila ingin mengatur format pada satu bagian dokumen HTML saja. Sehingga inline styles tetap diletakkan di bagian <body> dan bukan di bagian <head>.

Format penulisan tag inline style adalah sebagai berikut :

Ini adalah sebuah paragraf.

</p>

8
Latihan 1 : Internal Style Sheet

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<head>

h1 {color: red}

h3 {color: blue}

</style>

</head>

<body>

<h1>Ini adalah header 1</h1>

<h3>Ini adalah header 3</h3>

</body>

</html>

Simpan file di My Document sebagai "coba6-1.html" dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik "coba6-1.html" pada bagian File name, klik tombol Save.
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba6-1.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba6-1.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan cara penggunaan internal style sheet. Pada bagian <head> dideklarasikan style untuk heading 1 dan heading 3. Dalam contoh diatur style untuk h1 yaitu berwarna merah, sedangkan h3 diberi warna biru.

Pada bagian <body> heading 1 dan heading 3 akan ditampilkan masing-masing berwarna merah dan biru pada web browser.

8
Latihan 2 : Inline Styles

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

Ini adalah link!</a>

</body>

</html>

Simpan file sebagai "coba6-2.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba6-2.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba6-2.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana cara mengatur style dengan inline styles. Pada contoh garis bawah yang biasanya muncul pada link akan tidak ditampilkan pada web browser, yang dimungkinkan karena adanya style TEXT-DECORATION: NONE.

8
Latihan 3 : External Style Sheet

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<head>

</head>

<body>

<h1>Ini diformat dengan CSS</h1>

</body>

</html>

Simpan file sebagai "coba6-3.html"
Ketik baris perintah berikut ini :

h1 {

color: red;

}

Simpan file sebagai "styles.css"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba6-3.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba6-3.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan penggunaan external style sheet. Pada bagian <head> dideklarasikan terlebih dahulu file CSS yang akan digunakan, hal ini terlihat dari atribut HREF="STYLES.CSS" yang menyatakan bahwa file CSS yang digunakan adalah file styles.css.

File styles.css berisi perintah untuk memberi format pada heading 1, yaitu h1, dengan warna merah.

Hasil dari external style sheet ini akan ditampilkan di web browser, yaitu teks "Ini diformat dengan CSS" yang berwarna merah.

Contoh:

<center>Menu Voting</center>

<hr>

<tr>

<td>

tanggal:

</td>

<td>

<option value="1">1

<option value="2">2

<option value="3">3

<option value="4">4

<option value="5">5

<option value="6">6

<option value="7">7

<option value="8">8

<option value="9">9

<option value="10">10

<option value="11">11

<option value="12">12

<option value="13">13

<option value="14">14

<option value="15">15

<option value="16">16

<option value="17">17

<option value="18">18

<option value="19">19

<option value="20">20

<option value="21">21

<option value="22">22

<option value="23">23

<option value="24">24

<option value="25">25

<option value="26">26

<option value="27">27

<option value="28">28

<option value="29">29

<option value="30">30

<option value="31">31

</select>

</td>

<td>

<option value="januari">januari

<option value="february">february

<option value="maret">maret

<option value="april">april

<option value="mei">mei

<option value="juni">juni

<option value="juli">juli

<option value="agustus">agustus

<option value="september">september

<option value="oktober">oktober

<option value="november">november

<option value="december">december

</select>

</td>

<td>

<option value="2006">2006

<option value="2007">2007

<option value="2008">2008

<option value="2009">2009

<option value="2010">2010

</select>

</td>

</tr>

<tr>

<td>

jam:

</td>

<td>

<option value="1am">1

<option value="2am">2

<option value="3am">3

<option value="4am">4

<option value="5am">5

<option value="6am">6

<option value="7am">7

<option value="8am">8

<option value="9am">9

<option value="10am">10

<option value="11am">11

<option value="12am">12

<option value="1pm">13

<option value="2pm">14

<option value="3pm">15

<option value="4pm">16

<option value="5pm">17

<option value="6pm">18

<option value="7pm">19

<option value="8pm">20

<option value="9pm">21

<option value="10pm">22

<option value="11pm">23

<option value="12pm">24

</select>

</td>

<td>

&#47

<option value="1">00

<option value="2">01

<option value="3">02

<option value="4">03

<option value="5">04

<option value="6">05

<option value="7">06

<option value="8">07

<option value="9">08

<option value="10">09

<option value="11">10

<option value="12">11

<option value="13">12

<option value="14">13

<option value="15">14

<option value="16">15

<option value="17">16

<option value="18">17

<option value="19">18

<option value="20">19

<option value="21">20

<option value="22">21

<option value="23">22

<option value="21">20

<option value="22">21

<option value="23">22

<option value="24">23

<option value="25">24

<option value="26">25

<option value="27">26

<option value="28">27

<option value="29">28

<option value="30">29

<option value="31">30

<option value="32">31

<option value="33">32

<option value="34">33

<option value="35">34

<option value="36">35

<option value="37">36

<option value="38">37

<option value="39">38

<option value="40">39

<option value="41">40

<option value="42">41

<option value="43">42

<option value="44">43

<option value="45">44

<option value="46">45

<option value="47">46

<option value="48">47

<option value="49">48

<option value="50">49

<option value="51">50

<option value="52">51

<option value="53">52

<option value="54">53

<option value="55">54

<option value="56">55

<option value="57">56

<option value="58">57

<option value="59">58

<option value="60">59

</select>

</td>

<td>

&#47

<option value="1">00

<option value="2">01

<option value="3">02

<option value="4">03

<option value="5">04

<option value="6">05

<option value="7">06

<option value="8">07

<option value="9">08

<option value="10">09

<option value="11">10

<option value="12">11

<option value="13">12

<option value="14">13

<option value="15">14

<option value="16">15

<option value="17">16

<option value="18">17

<option value="19">18

<option value="20">19

<option value="21">20

<option value="22">21

<option value="23">22

<option value="21">20

<option value="22">21

<option value="23">22

<option value="24">23

<option value="25">24

<option value="26">25

<option value="27">26

<option value="28">27

<option value="29">28

<option value="30">29

<option value="31">30

<option value="32">31

<option value="33">32

<option value="34">33

<option value="35">34

<option value="36">35

<option value="37">36

<option value="38">37

<option value="39">38

<option value="40">39

<option value="41">40

<option value="42">41

<option value="43">42

<option value="44">43

<option value="45">44

<option value="46">45

<option value="47">46

<option value="48">47

<option value="49">48

<option value="50">49

<option value="51">50

<option value="52">51

<option value="53">52

<option value="54">53

<option value="55">54

<option value="56">55

<option value="57">56

<option value="58">57

<option value="59">58

<option value="60">59

</td>

</tr>

<tr>

<td>

nim:

</td>

<td>

<option value="1102060014">1102060014

<option value="1102060024">1102060024

<option value="1102060034">1102060034

</select>

</td>

</tr>

<tr>

<td>

nama:

</td>

</tr>

<tr>

<td>

pilihan

</td>

<td>

<input type="radio" name=radio1><font color="red">sdrC

</td>

</tr>

</table>

<hr>

<tr>

</tr>

HTML minggu ke-5

2008-11-13T18:51:00.001-08:00

LIST HTML

Tujuan Instruksional :

Mahasiswa memahami pembuatan unordered list (bulleted) dalam HTML
Mahasiswa memahami pembuatan ordered list (numbered) dalam HTML
Mahasiswa memahami pembuatan definition list dalam HTML

List HTML

Pada bagian sebelumnya telah dijelaskan sedikit mengenai list, namun pada bagian ini akan dijelaskan secara lebih detil mengenai list dalam HTML.

Ada tiga jenis list yang dapat ditampilkan melalui dokumen HTML, yaitu :

Unordered list
Ordered list
Definition list

Masing-masing akan dijelaskan berikut ini.

Unordered List

Sebuah unordered list adalah list (daftar) dari beberapa item.
Setiap item ditandai dengan tanda bullet (biasanya berupa lngkaran hitam kecil).
Unordered list diawali dengan tag <ul> dan diakhiri dengan tag </ul>.
Setiap item dalam list diawali dengan tag <li>

<ul>

</ul>

Akan ditampilkan di web browser seperti berikut ini :

Kopi
Teh

Ordered List

Sebuah unordered list adalah juga list (daftar) dari beberapa item.
Setiap item ditandai dengan angka atau nomer.
Unordered list diawali dengan tag <ol> dan diakhiri dengan tag </ol>.
Setiap item dalam list diawali dengan tag <li>

<ol>

</ol>

Akan ditampilkan di web browser seperti berikut ini :

Kopi
Teh

Definition List

Sebuah definition list bukan merupakan list (daftar) dari beberapa item, tapi lebih merupakan list (daftar) istilah dan penjelasan dari istilah tersebut.
Definition list diawali dengan tag <dl> dan diakhiri dengan tag </dl>.

Setiap istilah dalam list diawali dengan tag <dt> dan diakhiri dengan tag </dt>.
Setiap penjelasan dalam list diawali dengan tag <dd> dan diakhiri dengan tag </dd>.

<dl>

<dd>Minuman panas pahit</dd>

<dd>Minuman dingin manis</dd>

</dl>

Akan ditampilkan di web browser seperti berikut ini :

Kopi

Minuman panas pahit

Teh

Minuman dingin manis

8
Latihan 1 : Ordered List

Jalankan aplikasi Notepad
Ketik baris perintah berikut ini :

<html>

<body>

<h4>List dengan angka :</h4>

<ol>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>List dengan huruf besar :</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>List dengan huruf kecil :</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>List dengan angka romawi besar :</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>List dengan angka romawi kecil :</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

</body>

</html>

Simpan file di My Document sebagai "coba5-1.html" dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik "coba5-1.html" pada bagian File name, klik tombol Save.
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba5-1.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba5-1.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana tag <ol> dapat digunakan untuk menampilkan berbagai variasi list dengan menggunakan angka dan huruf. Hal ini dimungkinkan dengan adanya atribut TYPE. Tanpa atribut TYPE secara default HTML akan menampilkan list dengan menggunakan angka. Tetapi bila diatur TYPE sesuai dengan huruf awal yang diinginkan maka list yang ditampilkan akan bervariasi. Misalnya TYPE=A akan menampilkan list dengan huruf besar, TYPE=i akan menampilkan list dengan angka romawi kecil, dan seterusnya.

List dengan angka :

Apples
Bananas
Lemons
Oranges
List dengan huruf besar :
Apples
Bananas
Lemons
Oranges
List dengan huruf kecil :
Apples
Bananas
Lemons
Oranges
List dengan angka romawi besar :
Apples
Bananas
Lemons
Oranges
List dengan angka romawi kecil :
Apples
Bananas
Lemons
Oranges

8
Latihan 2 : Unordered List

Jalankan aplikasi Notepad

Ketik baris perintah berikut ini :

<html>

<body>

<h4>List dengan lingkaran hitam :</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

<h4>List dengan lingkaran kosong :</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

<h4>List dengan kotak hitam :</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

</body>

</html>

Simpan file sebagai "coba5-2.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba5-2.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba5-2.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana tag <ul> dapat digunakan untuk menampilkan berbagai variasi list dengan menggunakan bullet. Hal ini juga dimungkinkan dengan adanya atribut TYPE. Tanpa atribut TYPE secara default HTML akan menampilkan list dengan menggunakan bullet lingkaran hitam. Tetapi bila diatur TYPE sesuai dengan jenis bullet yang diinginkan maka list yang ditampilkan juga akan bervariasi. Misalnya TYPE=CIRCLE akan menampilkan list dengan lingkaran kosong, TYPE=SQUARE akan menampilkan list dengan bentuk kotak.

List dengan lingkaran hitam :

Apples
Bananas
Lemons
Oranges
List dengan lingkaran kosong :
Apples
Bananas
Lemons
Oranges
List dengan kotak hitam :
Apples
Bananas
Lemons
Oranges

8
Latihan 3 : List Bersarang

Jalankan aplikasi Notepad
Ketik baris perintah berikut ini :

<html>

<body>

<h4>Contoh list bersarang :</h4>

<ul>

<li>Teh

<ul>

<li>The hitam</li>

<li>The hijau</li>

</ul>

</li>

</ul>

<h4>List bersarang 3 level :</h4>

<ul>

<li>Teh

<ul>

<li>Teh hitam</li>

<li>Teh hijau

<ul>

<li>Afrika</li>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>

Simpan file sebagai "coba5-3.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba5-3.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba5-3.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana list dalam HTML dapat dibuat secara bersarang.

Contoh list bersarang :

Kopi
Teh
- The hitam
- The hijau
Susu
List bersarang 3 level :
Kopi
Teh
- Teh hitam
- Teh hijau
  - Cina
  - Afrika
Susu
Pada contoh pertama list bersarang sebanyak 2 level, sedangkan contoh kedua bersarang sebanyak 3 level.

8
Latihan 4 : Definition List

Jalankan aplikasi Notepad
Ketik baris perintah berikut ini :

<html>

<body>

<h4>Definition List :</h4>

<dl>

<dd>Minuman panas pahit</dd>

<dd>Minuman dingin manis</dd>

</dl>

</body>

</html>

Simpan file sebagai "coba5-4.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba5-4.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba5-4.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan pembuatan definition list yang akan ditampilkan web browser seperti berikut ini :

Definition List :

Kopi

Minuman panas pahit

Teh

Minuman dingin manis

Contoh sederhana

Menu:

var yourName = prompt("Boleh Tahu Namanya?", "Nama Anda");

</script>

<font color=pink><marquee><h1>Selamat Datang di pemilihan ketua kelas online <script type="text/javascript">document.write(yourName)</script>! Suatu kehormatan bagi saya atas kunjungan <script type="text/javascript">document.write(yourName)</script> ini. saya sangat berharap kunjungan <script type="text/javascript">document.write(yourName)</script> berikutnya</h1></marquee>

<tr>

<td width="60%"><center><h3><font color=blue>pemilihan ketua kelas online</font color></h3></center></td>

<td width="10%"><marquee height=30 direction=up><font color=orange>5PTI1 <br>created by David wong</font color></marquee>   <img src="source\LOGO.JPG"></td>

</tr>

<tr>

<td><a href="form peserta.html">form peserta</a></td>

<td width="100%"rowspan=5 colspan=2><marquee direction=right><font color="red">pilihlah salah satu di antara calon-calon ketua kelas berikut ini</font color></marquee></td>

</tr>

<tr>

<td><a href="info peserta.html">informasi peserta</a></td>

</tr>

<tr>

<td><a href="voting.html">proses voting</a></td>

</tr>

<tr>

<td><a href="info pemenang.html">informasi pemenang</a></td>

</tr>

</table>

</script>

Form:

<center><font color="red"><h3>FORM PESERTA</h3></center>

<tr>

</tr>

<tr>

</tr>

<tr>

<td><font color="red">Jurusan</td>

</tr>

<tr>

</tr>

<tr>

<td><font color="red">Alamat</td>

</tr>

<tr>

<td><font color="red">Gender</td>

<input type="radio" name=radio1><font color="red">wanita</input></td>

</tr>

<tr>

</tr>

</center>

</script>

Info:

<center><font color=blue>INFO PESERTA

<br>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</center>

</script>

Voting:

<center><font color=YELLOW><h3>voting</h3></center>

<tr>

<th><font color=YELLOW>Choice</th>

</tr>

</tr>

<TR>

<tr>

</tr>

</table>

</form>

</script>

Pemenang:

<center><font color=blue><h3>informasi pemenang</h3></center>

<tr>

<th><font color=yellow>persentase</th>

</tr>

</tr>

<tr>

</tr>

<tr>

<td align="center"><font color=orange>abstain</td>

</tr>

</table>

<br>

参上する

2008-11-13T18:42:00.000-08:00

yoooo,I`m coming back again hohohoho setelah vacum hampir 1bln ga posting saatnya kembali memposting,kemaren gara2 saking sibuknya dan lg uts makanya ga sempet ngurusin blog

nah baru skrg sempet lagi ngurusin blog hahahaha melampiaskan kestressan atas UTS hahahaha
now let`s blogging again be a blogger hohohooho

HTML minggu ke-4

2008-11-13T18:35:00.001-08:00

HTML minggu ke-4

FORMAT TEKS HTML

Tujuan Instruksional :

Mahasiswa mengetahui tag-tag untuk format teks pada HTML
Mahasiswa dapat membuat teks kutipan pada dokumen HTML
Mahasiswa dapat membuat daftar/list pada dokumen HTML

Format Teks HTML

Ada beberapa tag HTML yang digunakan untuk mengatur format teks, seperti misalnya teks miring dan teks tebal. Latihan-latihan berikut akan menjelaskan format teks yang tersedia pada kode HTML.

8
Latihan 1 : Format Teks

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

<b>Teks ini tebal</b>

<br>

<strong>Teks ini juga tebal</strong>

<br>

<big>Teks ini besar</big>

<br>

<small>Teks ini kecil</small>

<br>

<u>Teks ini bergaris bawah</u>

<br>

<em>Teks ini mendapat penekanan</em>

<br>

<i>Teks ini miring</i>

<br>

Teks ini berisi <sub>subscript</sub>

<br>

Teks ini berisi <sup>superscript</sup>

</body>

</html>

Simpan file di My Document sebagai "coba4-1.html" dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik "coba4-1.html" pada bagian File name, klik tombol Save.
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba4-1.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba4-1.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana teks yang terdapat di dalam elemen body ditampilkan pada web browser sesuai format tag HTML yang diberikan :

<b></b> dan <strong></strong> membuat format teks tebal

<big></big> membuat format teks besar

<small></small> membuat format teks kecil

<u></u> membuat teks bergaris bawah

<em></em> membuat format teks penekanan

<i></i> membuat format teks miring

<sub></sub> membuat format teks subscript (huruf kecil di bawah)

<sup></sup> membuat format teks superscript (huruf kecil di atas)

8
Latihan 2 : Teks Preformat

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

<pre>

Ini adalah

Teks yang tidak diformat.

Hal ini membuat baik spasi

dan pergantian baris

tidak berubah.

</pre>

<p>Preformat digunakan untuk penulisan kode program:</p>

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

Simpan file sebagai "coba4-2.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba4-2.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba4-2.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana teks yang berada di dalam tag <pre></pre> tidak akan diformat oleh web browser, dan akan ditampilkan apa adanya sesuai dengan apa yang dituliskan.

Spasi dan pergantian baris akan diabaikan oleh web browser. Seperti pada contoh, spasi dan pergantian baris akan ditampilkan persis seperti yang dituliskan pada kode HTML.

8
Latihan 3 : Teks Kutipan

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

Ini adalah teks kutipan panjang:

<blockquote>Ini adalah teks kutipan panjang Ini adalah teks kutipan panjang Ini adalah teks kutipan panjang Ini adalah teks kutipan panjang.</blockquote>

Ini adalah teks kutipan pendek:

<q>Ini adalah teks kutipan pendek</q>

</body>

</html>

Simpan file sebagai "coba4-3.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba4-3.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba4-3.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana teks kutipan ditampilkan pada web browser. Ada dua format teks kutipan dalam HTML :

Teks kutipan panjang dengan tag <blockquote></blockquote>
Teks kutipan pendek dengan tag <q></q>

Dengan tag <blockquote> pergantian baris dan batas margin (indent) untuk teks akan secara otomatis diformat oleh web browser. Sedangkan untuk teks kutipan pendek dengan tag <q> teks tidak mengalami format apapun.

8
Latihan 4 : Teks List

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>

<ul>Ini adalah contoh unordered list

<li> apple

<li> banana

<li> citrus

</ul>

<ol>Ini adalah contoh ordered list

<li> satu

<li> dua

<li> tiga

</ol>

</body>

</html>

Simpan file sebagai "coba4-4.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba4-4.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba4-4.html), lalu klik OK.

&
Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana membuat list (daftar) teks pada HTML. Ada dua jenis list yang dapat dibuat :

Unordered list (list menggunakan bullet) dengan tag <ul>
Ordered list (list menggunakan angka) dengan tag <ol>

Kemudian untuk masing-masing teks list digunakan tag <li>

4
Ringkasan Format Teks HTML

Tag	Keterangan
<b>	Menjelaskan teks tebal
<strong>	Menjelaskan teks tebal
<big>	Menjelaskan teks besar
<small>	Menjelaskan teks kecil
<u>	Menjelaskan teks bergaris bawah
<em>	Menjelaskan teks penekanan
<i>	Menjelaskan teks miring
<strong>	Menjelaskan teks tebal
<sub>	Menjelaskan teks kecil di bawah
<sup>	Menjelaskan teks kecil di atas
<blockquote>	Menjelaskan teks kutipan panjang
<q>	Menjelaskan teks kutipan pendek
<ul>	Menjelaskan list teks unordered
<ol>	Menjelaskan list teks ordered
<li>	Menjelaskan list teks

Contoh web sederhana

<center><h3>menu mahasiswa</h3></center>

<tr>

</td>

menu mahasiswa</td>

</tr>

<tr>

<td><a href="lab4 no-1.html">id.mahasiswa</a></td>

</tr>

<tr>

<td><a href="lab4 no-2.html">keluarga</a></td>

</tr>

<tr>

<td><a href="kawan.html>kawan</a></td>

</tr>

</script>

Link ke-1

<center>identitas mahasiswa<br>

----------------------------

<tD>

nama:<input type=text><br>

nim:&nbsp&nbsp<input type=text><br>

class:<input type=text><br>

</tD>

</table>

</center>

Link ke-2

<center>identitas keluarga<br>

----------------------------<br>

<tr>

ayah:qqqqq

ibu:eeeeeee

kakak:lllll

adik:David

</tr>

</table>

</center>

Link ke-3

<center>identitas keluarga<br>

----------------------------

<tr>

<td>ayah:

</td>

<td>kakak:</td>

</tr>

<tr>

<td>

david<br>

albert</td>

<td>

jane<br>

estelle

</td>

</table>

</center>

Link ke-4

<center> kawan

<form type="post"

<label>alamat</label>

<label>gender</label>

<input type="radio" name=radio1>wanita</input><br>

<input type="submit" value="submit"

</center>

Ada yg bisa jawab gak???

2008-10-08T05:36:00.000-07:00

Jojon mau membeli buku dengan harga
Rp.7.500, tetapi Jojon tidak
mempunyai uang sama sekali alias
bokek, jadi terpaksa Jojon
pinjam tetangga kiri dan kanan (kasian
sekali).

Akhirnya Jojon mendapat pinjaman dari
tiga orang temannya katakanlah
demikian:
- si Eko Rp. 2.500
- si Parto Rp. 2.500
- si Doyok Rp. 2.500
jadi total keseluruhan pinjaman adalah
Rp.7.500.- (betul ?)

Dengan bangga hati Jojon menuju ke
toko buku, sesampe
disana Jojon tidak langsung membeli,
tetapi bukunya Jojon tawar harganya
dan harga tersebut berubah menjadi
Rp.7.000,- saja. jadi harganya
berkurang Rp.500,- (betul ?)

Dari pembelian buku tersebut Jojon
mempunyai kelebihan uang sebesar
Rp.500,-(betul ?)
dari uang tersebut Jojon ingin
mengurangi hutangnya dengan rincian
sbb :
- si Eko Rp. 100,-
- si Parto Rp. 100,-
- si Doyok Rp. 100,-
Jadi total utang yang Jojon bayar
adalah sebesar Rp.300 ,- (betul ?) dan
sisa uang yang ada ditangan Jojon
adalah Rp.200,- (betul ?)

Jadi hutang Jojon kepada ke tiga
temannya berkurang sebesar Rp.100,-
(betul ?) menjadi :
- si Eko Rp. 2.400,-
- si Parto Rp. 2.400,-
- si Doyok Rp. 2.400,-
Total keseluruhan hutang Jojon adalah
Rp. 7.200,- (betul ?) maka :
Total hutang Jojon + uang yang Jojon
pegang sekarang = Rp.7.200 + Rp.200 =
Rp.7.400
Pertanyaanya kemanakah uang Jojon yang
Rp.100,- itu ???????????? ??
semestinya kan tetap Rp.7.500,-

source:gemintang.com

Just for Laugh - Indonesia

2008-10-07T06:26:00.000-07:00

Nadine bermaksud untuk memutuskan hubungan
dengan kekasihnya Donald Trump bule Amerika
gosip terbaru kan booo....
Tapi dia tak sanggup utk bertemu muka, lalu dia
pun menulis surat...

:: Hi, my motive write this letter is to give know
you something .
(hai, bersama surat ini saya ingin memberi tahu
sesuatu)

:: I WANT TO CUT CONNECTION US
(saya ingin memutuskan hubungan kita)

:: I have think about this very cook cook
(saya telah memikirkan ini masak masak)

:: I know I clap one hand only
(saya tahu bahwa saya hanya bertepuk sebelah
tangan)

:: Correctly, I have seen you and she together at
town with my eyes and head myself
(sebenarnya, saya pernah melihat kamu bersama
perempuan lain di kota dengan mata kepala saya
sendiri)

:: You always ask for apology back back
(kamu selalu minta maaf berulang ulang)

:: I don't trust you again!!
(saya tidak percaya kamu lagi)

:: You are really crocodile land!!
(kamu benar benar buaya darat)

:: My Friend speak you play fire
(teman saya bilang kamu bermain api)

:: Now I know you correct correct play fire
(sekarang saya tahu kamu benar benar bermain
api)

:: So, I break connection to pull my body from
this love triangle
(jadi saya putuskan saja hubungan untuk menarik
diri dari cinta segitigaini)

:: I know this result I pick is very correct,
because you love she is very high from me
(saya tahu keputusan yg saya ambil ini benar,
karena kamu mencintai dia lebih tinggi dari saya)

:: So, I break off to go far from here
(jadi saya putuskan untuk pergi dari sini)

:: I don't want you to play play with my liver
(saya tidak ingin kamu main main dengan hati
saya)

:: I have been crying until no more eye water
thinking about you
(saya menangis sampai tidak ada lagi air mata
memikirkan kamu)

:: I don't want banana to fruit two times
(saya tidak mau terpeleset untuk kedua kalinya)

:: Safe walk...(selamat jalan..)

source:gemintang.com

HTML minggu ke3

2008-10-07T05:33:00.001-07:00

Tag Tabel ( Table) - layout

Untuk menata letak (layout)isi dokumen

<tr>

<td>Header kiri</td>

<td align="center" width="50%">Header tengah</td>

<td align="right">Header kanan</td>

</tr>

<tr>

<td align="center" colspan="2" height="200">Bagian Isi</td>

</tr>

<tr>

<td align="center">Footer tengah</td>

<td align="right">Footer kanan</td>

</tr>

</table>

Header kiri	Header tengah	Header kanan
Menu kiri	Bagian Isi
Menu kiri	Footer tengah	Footer kanan

Saya ingin melihat <a href="hal2.html">halaman selanjutnya</a>. Saya ingin

langsung menuju ke <a href="#akhir">bagian akhir</a>. Saya ingin menuju ke

<a href="hal2.html#bawah">bagian bawah pada halaman selanjutnya</a>.<br>

<a href="http://www.detik.com"><img src="gambar.gif"></a> Homepage

detik.com.<br>

Tag Link (Anchor)

<a href="Link">Kata yang di-click</a>

<a name="#Acuan">Kata yang dituju</a>

Link = Alamat URL atau nama file dan/atau acuan yang dituju

Acuan = Kata sembarang sebagai penanda (bookmark) membentuk link ke URL/file/bagian dokumen lain.

FORM

• Sebuah dokumen interaktif dapat menangani inputdari user

• Analoginya : bahwa dokumen adalah sebuah formulir isian

• Sebuah dokumen dapat mengandung satu atau beberapa form

• Setiap form mewakili sebuah taskspesifik (login, mengisi biodata, memilih bahasa, dll)

• Setiap formdapat menghimpun satu atau beberapa elemen input

• Ada beberapa jenis elemen input untuk menangani berbagai karakteristik data input

• Di setiap form harus ditentukan nama program (di sisi server) yang akan menangani

data isian yang dikirim (di- submit)

• Skema dasar dokumen form :

bagian ini berisi bagian dokumen HTML yang akan menggambarkan formulir isian

dengan susunan sejumlah elemen input berbagai jenis

</form>

• Contoh sebuah form sederhana untuk meminta nama user :

<label for="nama">Ketikkan nama Anda:</label><br>

</form>

Karakteristik data input

• Teks satu baris (single-line text)

• Teks banyak baris (multi-line text)

• Teks rahasia (password)

• Pilihan tunggal (single selection)

• Pilihan majemuk (multiple selections)

• Centang (on/off)

• Data bawaan/tersembunyi (hidden)

• File

• Koordinat 2D dalam sebuah bidang gambar

• Aksi user melalui penekanan tombol

Tag input

• <input type="jenis" name="nama" id="id" value="nilai" disabled>

type : text, password, radio, checkbox, image, submit, reset, button, hidden

name : identifier untuk sisi server

id : identifier untuk sisi browser

value : nilai default

disabled : jika disebutkan maka elemen tidak aktif (tidak digunakan)

• <input type="[text|password]" name="nama" readonly size="m"maxlength="n">

readonly : jika disebutkan maka elemen tidak bisa diubah nilainya

size : ukuran lebar dalam banyaknya karakter (bisa di-override oleh CSS)

maxlength : banyaknya karakter maksimal yang dapat dimasukkan user

• <input type="[radio|checkbox]" name="nama" checked>

checked : jika disebutkan maka defaultnya adalah dalam keadaan dipilih

• <input type="image" src="gambar" name="nama" alt="alternatif">

src : nama file gambar

alt : teks yang ditampilkan bila browser tidak dapat menampilkan gambar

Tag textarea, select, button

• <textarea name="nama" rows="b" cols="k">nilai</textarea>

nilai : nilai default

rows : banyaknya baris yang ditampilkan (tinggi)

cols : banyaknya kolom/karakter yang ditampilkan (lebar)

• <select name="nama" multiple size="r">

<option value="nilai1" selected>teks1</option>

<option value="nilai2">teks2</option>

…

</select>

multiple : jika disebutkan maka pilihan boleh lebih dari satu (sambil menekan tombol Ctrl)

size : banyaknya baris pilihan yang ditampilkan (default=1)

selected : jika disebutkan maka defaultnya dalam keadaan terpilih

• <button type="jenis" name="name" value="nilai">

tampilan

</button>

type : submit, reset, button

tampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol

Latihan 1 : Frameset Vertikal

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

</frameset>

</html>

e-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik "coba1.html" pada bagiaSimpan file di My Document sebagai "coba1.html" dengan cara klik menu Filn File name, klik tombol Save.
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba1.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba1.html), lalu klik OK.

Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana cara membuat frame dengan tiga kolom vertikal masing-masing selebar 30%, 40%, dan 30% dari lebar area layar. Frame pertama berisi "frame_1.html", frame kedua berisi "frame_2.html", dan frame ketiga berisi "frame_3.html".

<------ 30% ------>

<---------- 40% ---------->

<------- 30% ------->

Latihan 2 : Frameset Horizontal

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

</frameset>

</html>

Simpan file sebagai "coba2.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba2.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba2.html), lalu klik OK.

100 pixel

200 pixel

* pixel

Latihan 3 : Tag Noframes

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

<body>Web browser tidak mendukung frame!</body>

</noframes>

</frameset>

</html>

Simpan file sebagai "coba3.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba3.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba3.html), lalu klik OK.

Latihan 4 : Frameset Kombinasi

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :

<html>

</frameset>

</html>

Simpan file sebagai "coba4.html"
Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba4.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba4.html), lalu klik OK.

Penjelasan

Contoh latihan di atas mendemonstrasikan pembuatan frameset kombinasi. Tag <frameset> yang pertama akan membagi layar menjadi dua frame horizontal, masing-masing sebesar 150 pixel dan sisa pixel dari tinggi area layar. Kemudian tag <frameset> kedua akan membagi frame kedua (frame yang berada di bawah) menjadi dua frame vertikal, masing-masing sebesar 25% dan 75% dari lebar area layar.

150pixel

<----- 25% ----->

< ----------------------- 75% ------------------------>

contoh1:

No1

<center>identitas mahasiswa<br>

----------------------------

<tD>

nama:<input type=text><br>

nim:&nbsp&nbsp<input type=text><br>

class:<input type=text><br>

</tD>

</table>

</center>

No2

<center>identitas keluarga<br>

----------------------------<br>

<tr>

ayah:qqqqq

ibu:eeeeeee

kakak:lllll

adik:David

</tr>

</table>

</center>

No3

<center>identitas keluarga<br>

----------------------------

<tr>

<td>ayah:

</td>

<td>kakak:</td>

</tr>

<tr>

<td>

david<br>

albert</td>

<td>

jane<br>

estelle

</td>

</table>

</center>

No4

<head>

<center>LAtihan3

<tr>

<td><a href="no.2.html">KELUARGA</a></td>

<td><a href="no.3.html">TEMAN</a></td>

</tr>

<tr>

<td colspan=3><center>selamat datang</center></td>

<td colspan=1><center>pembuat</center><marquee height=30 direction=up><center>setsuna</center></marquee></td>

</tr>

</table>

</center>

<font color="blue">sistem keluarga

</head>

How To Add the Blog “Read More”

2008-09-24T05:16:00.001-07:00

This is a pretty popular Blogger hack that lots of people have asked me about. Instead of answering to each email individually, I thought it would make more sense to write an article about it.

With this hack, you can choose to display a select amount of text from the beginning of each post as a teaser instead of showing the entire post on the front page of your blog. Then when people want to read the rest of the post, they can click a "read more" link to see the full post. This is very handy if you have lots of long articles all on one page. (Note that you'll need to have post pages enabled in order to make this feature work.)

Step #1 - Update Your Template Code

First you need to edit your existing code so I recommend copying and pasting it into notepad or any text editor. Also, it's smart at this point to create a backup of your template just in case something goes wrong. Now do a search (CTRL + F) within the text editor for the following code post-header-line-1. This is the default code that Blogger includes but some custom templates remove or change this code so you might have trouble finding it. If you can't locate this text then try searching for <data:post.body/> instead. Your template will for sure have this since it's the tag that actually prints the body of your post.

Now depending on which code you were able to find will determine how easy the next steps will be. You might need to do some detective work first in order to get this working properly in your custom template. The idea is to get this new code into your template before the <data:post.body/> tag. Keep reading and hopefully the explanation will illustrate the concept clear enough so you are able to adapt this hack to your custom template.

Add the following code below the <div class='post-header-line-1′/> and <div class='post-header-line'> tags if you've got both.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

The result should look something like this:

If you don't have the default <div class='post-header-line-1'/> tag then your result should look something like this instead. This is how it would be done in the MushBlue Blogger custom template:

Notice in both examples that the code in yellow and the <data:post.body/> tags are the same — it's just tag above it that will differ based on the template you're using.

Now let's add one more bit of code which will actually create the "read more" link in your post. This code will go below the <data:post.body/> tag so copy the following and paste it in. Feel free to change the "Read more…" text to whatever you want the link to look like. Be careful not to delete any other code during this process.

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>

Yes, there are supposed to be two </b:if> tags in the above code so don't think it' s a mistake. The result should look like this:

This code will be the same no matter what template you are using. Just make sure it goes below the <data:post.body/> as shown in the image above.

Now let's look at what the final result should be. Here's the updated code block you just worked on all put together:

Ok, you're all done editing the template code. Paste it back into your Blogger html window and save it. If you get an error, you made a mistake. The most common mistake is to accidentally delete a > or < while pasting in the new code. If it saved successfully, it's time to move onto the next step and modify a quick Blogger format setting.

Step #2 - Add a Class Tag in Your Default Post Template

For this step, you need to navigate in your Blogger account to "Settings" => "Formatting" and scroll all the way down to the bottom. It's the last option called "Post Template". You're going to paste in the following code:

</span>

You'll want to keep the spaces in there which will make sense later. After you save this, it will look like this:

Step #3 - Create a New Post

Ok, we've got everything all setup so it's time to go and test it out. Hopefully you've got a new post in mind for your blog. If not, then we'll just create a test post which you can later delete. When you click on the "Posting" tab, you'll notice that the post text area is now pre-populated with the <span class="fullpost"> and </span> tags. If not, then you didn't save it properly so go back and re-read step #2.

So when writing your new post, anything you put above the <span class="fullpost"> tag will be the teaser text. The main body of your post needs to go in between the <span class="fullpost"> and </span> tags in order for the "read more…" link to work properly. See the screenshot below. Sometimes pictures illustrate better than words.

Now publish or preview your post to see the "read more" hack working on your blog. If it doesn't show up for some reason, go back and run through the steps again. Most likely you pasted the code blocks in the wrong places. It's difficult to troubleshoot these issues since each template can be unique so please make sure to double-check your template before asking for help in the comments section below.

Here's the live post with the "read more…" link properly working based on the text I used above in the post text area.

Additional Info

If you want to go back and update your old posts with this new "read more…" feature you can. Just go back and edit each post manually. Essentially you'll need to paste in the <span class="fullpost"> and </span> tags breaking apart the post into two parts.

For some posts, you might not want to use this feature at all. If that's the case, just delete the <span class="fullpost"> and </span> tags from within your new post text area. Then your new post will show up entirely just like it used to before you implemented this hack. Enjoy!

Source:http://www.eblogtemplates.com/how-to-add-the-blogger-read-more-expandable-posts-link/

18 Cara Memperpanjang Umur Baterai Laptop

2008-09-23T19:58:00.000-07:00

Jika anda banyak menghabiskan banyak waktu di depan laptop anda, mungkin anda dihadapkan pada masalah yang menghantui sebagian besar pengguna laptop, yaitu umur baterai yang pendek. Bahkan laptop kesayangan anda seringkali harus mati pada saat yang paling buruk.

Berikut adalah 18 cara untuk memperpanjang umur baterai:

1. Optimisasi Power Settings - Tampilan pada layar dan hard disk adalah dua sumber konsumsi baterai terbesar. Kebanyakan laptop datang dengan skema penggunaan energi yang dapat memperpanjang baterai laptop anda. Pastikan anda memilih "Max Power" untuk menghemat sebanyak mungkin tenaga.
2. Redupkan Layar Anda - Semakin terang layar anda, semakin banyak tenaga yang dibutuhkan. Jika anda tidak dapat bekerja dengan yang redup, setidaknya buatlah ia secara otomatis menjadi lebih redup saat tidak digunakan.
3. Singkirkan Peralatan Eksternal - Singkirkan atau matikan USB saat tidak digunakan.
4. Jangan gunakan WiFi atau Bluetooth - Seperti peralatan eksternal, WiFi dan Bluetooth mengkonsumsi banyak tenaga. Matikan saat tidak digunakan, maka kerja laptop anda akan menjadi lebih ringan.
5. Jangan menggunakan CD/DVD drive - Hard drive mengkonsumsi banyak energi, tapi CD/DVD drive mengkonsumsi lebih banyak lagi. Cobalah untuk menyimpan informasi pada hard drive dan gunakan dari sana.
6. Hibernate, jangan Standby - Standby mengurangi penggunaan energi, namun tidak sebanyak hibernation yang membuat pemakaian energi menjadi nol saat tidak aktif.
7. Jangan melakukan Multitasking - Cobalah untuk mengerjakan satu hal setiap waktu saat anda mengandalkan baterai. Semakin banyak aplikasi yang jalankan, semakin besar beban yang ditanggung laptop anda.
8. Tutup program yang tidak diperlukan - Semakin banyak program yang sedang berjalan, semakin berat laptop anda bekerja. Tutuplah program - program yang tidak dibutuhkan (printer manager, Itunes, desktop search, dll).
9. Matikan Scheduled Task - Jika anda menggunakan scheduled task untuk menjalankan program, aturlah sedemikian sehingga tugas tersebut tidak berjalan saat baterai laptop anda sedang rendah.
10. Jangan bermain game - Jika anda tidak memiliki pekerjaan untuk dilakukan, hindarilah bermain game atau menonton DVD. Aktivitas ini menggunakan lebih banyak tenaga dibandingkan membuka email atau menggunakan word processor.
11. Kondisikan Baterai Anda - Baterai baru tidak diisi saat pertama kali anda terima dan membutuhkan proses conditioning untuk dapat mencapai kapasitas puncak. Conditioning biasanya mencakup pengisian penuh dan pengosongan baterai sampai tiga atau lima kali.
12. Latihlah Baterai anda - Anda tidak boleh meninggalkan baterai yang sedang diisi; menganggur untuk waktu yang lama. Cobalah menggunakan baterai anda sekali dalam sebulan agar baterai anda tidak kehilangan kapasitasnya.
13. Bersihkan kontak metal baterai - Pemindahan tenaga yang efisien juga dapat memperpanjang umur baterai anda. Cobalah membersihkan kontak metal setiap beberapa bulan dengan kain halus dan sedikit alkohol.
14. Tetap Sejuk - Sama seperti peralatan elektronik lainnya, laptop anda beroperasi dengan lebih efisien jika ia dijaga agar tetap sejuk.
15. Hindarilah suhu ekstrim - Jangan biarkan baterai laptop terbuka pada temperatur ekstrim atau cahaya matahari langsung.
16. Defrag secara regular - Defragmenting hard drive dapat mengatur ulang file yang ada, sehingga mereka dapat digunakan secara lebih efisien. Semakin efisien kerja hard drive anda, semakin kecil beban yang diterima oleh baterai.
17. Tambahkan memori - Anda dapat memperkecil ketergantungan memori virtual dan mengurangi konsumsi energi dengan menambahkan memori pada laptop anda.
18. Tambahkan Baterai kedua - Jika anda ingin memaksimalkan produktivitas dari mobilitas laptop anda, sebaiknya anda memiliki baterai cadangan ditangan anda.

Disadur dari dailytechbits
sumber:disitu.com

How to maximize laptop battery life

2008-09-23T19:19:00.001-07:00

I just want to share my knowledge about how to make your laptop/notebook battery life more extend and hopefully it will help you guys!

1. Minimize the screen brightness. Usually I don’t like my notebook screen too brightness because it make my eyes get tired very soon. In my experience, by turn down the screen brightness, it can make your laptop battery life more longer for 45 minutes to an hour.

2. Turn off bluetooth and wireless device. Many notebook add some device like bluetooh and wireless. Did you recognize if they make your battery laptop drain faster? It will search the nearby device (bluetooth) or hotspot (wireless). If they are not find it, they still keep try to search it. Just turn both of them off right now! Use it if you want to use and turn it off again after already done.

3. Change your mouse USB wireless. Many people use USB or bluetooth mouse using wireless or infrared connection. But they are not realize if it can drain the power of your laptop battery. I recommend you to use the wire cable for mouse to make your battery notebook more life.

4. Install more memory/RAM. I recommend you to install RAM 1Gb minimum to make your hard drive not too often spinning. This will speed up your system and will make it so your hard drive doesn’t have to do as much work.

5. Install Windows XP rather than Vista. If you install Windows Vista, I recommend you to install Windows XP. The Vista OS in my experience really drain your notebook battery faster. The Windows XP use less services to load on the background.

6. Turn off hard drive indexing. Usually by using NTFS partition, there are an option which is enable hard drive indexing. By turn it on the Windows will more or less constantly index your drive which results in the HD spinning even when it doesn’t really need to be. But becareful, by turning off indexing means that if you run a drive search it will take a bit longer.

7. Battery condition. Battery on your laptop have a memory. It will recognize when you plug and unplug the AC power. If the battery is not conditioned every so often, you may see a significant decrease in your battery life. All you need to do is run your battery completely down, letting it shutoff by itself, let it recharge fully without unplugging it, and then it has been conditioned.

That’s all my experience. If you have any other experience about how to maximize your battery life, please share your knowledge here.

Intel classmate pc morphs into tablet mode

2008-09-21T20:18:00.000-07:00

Let's face it. Even the filthy rich needs a bargain every now and then. The original Intel Classmate PC might have started as a competitor to the OLPC to equip every student, even the poor ones, with a laptop. But what if instead of attending a public school, your child is enrolled in the best private educational institution? Would you really want him to carry a toy-like device around like everyone else?

Perhaps it's with this mindset that the third-generation of Intel's Classmate PC project has morphed into a convertible tablet. Along with the same rugged features, integrated soft handle and enhanced education and collaboration software, this latest iteration features a rotating display and touchscreen capabilities. According to the Lila Ibrahim, general manager of Intel's Emerging Markets Platform Group, "Our ethnographic research has shown us that students responded well to tablet and touchscreen technology."

Though no pricing details or product info were released, this new Classmate PC edition will certainly cost more than the previous iterations. We'll know more once the new laptop hits the streets at the end of the year.

Si Sopir & Si Bule

2008-09-21T20:15:00.000-07:00

Seorang sopir sedang mengemudikan mobil Boss-nya yang orang Amerika, kebetulan hari itu mereka kurang beruntung. Mobil yang mereka kendarai menyeruduk kendaraan di depannya yang mendadak berhenti.

Dengan terbata-bata Si Sopir minta maaf kepada Si Boss: "Sorry Sir, I brake brake, not eat eat. After I check,the wheel no flower again" (maksudnya dia mau ngomong: "Maaf pak saya rem-rem nggak makan makan, setelah saya cek rodanya nggak ada kembangannya lagi")

Si Boss cuma bengong...

Sambil ngeloyor, Si Boss mau ikutan ribut sama yang ditabrak, tapi Si Sopir mencegah. Dia bilang : "Don't follow mix Sir! the bring that car if not wrong is the children fruit from Manager moneys, he stupid doesn't play! let know taste" (maksudnya dia mau ngomong :
"Nggak usah ikut campur pak, yang bawa mobil itu kalo nggak salah anak buah dari manajer keuangan, dia memang bodoh bukan main, biar tahu rasa").

Lagi-lagi Si Boss cuma bisa bengong...

Besoknya Si Sopir gak masuk kerja, lalu saat esok lusanya dia masuk kerja, Si Boss bertanya : "Why you're not coming?"

Jawab Si Sopir :" I am sorry Boss, my body is not delicious, my body taste like enter the wind" (maksudnya mau ngomong : "Maaf boss badan saya tidak enak, badan saya rasanya seperti masuk angin").

"I really don't know whats your point!" jawab Si Boss.

Tapi Sopir berkata serius, "Yes, how yes?.... I am alone migrain Sir will how the speak, but yes already, how many-how many, people Java can speak England ..." (maksudnya mau ngomong : "Ya .. gimana ya?... saya sendiri puyeng Pak mau bagaimana ngomongnya, tapi yo uwis lah.. wis piro-piro wong jowo iso ngomong Inggris")

sumber:beritaNET.com

Kemajuan Indonesia di Bidang Komunikasi

2008-09-21T20:09:00.000-07:00

Mexico:
Arkeolog Mexico melaporkan,bahwa mereka melakukan penggalian diantara reruntuhan peradaban Aztec. Setelah melakukan penggalian sedalam 300m mereka menemukan kotak surat. Dapat diambil kesimpulan bahwa 500 tahun yang lalu, suku Aztec sudah mengenal surat menyurat dalam berkomunikasi.

Mesir:
Ahli purbakala Mesir yang telah melakukan penggalian di sebelah patung spinx menemukan kabel telepon pada kedalaman 200m. Bangsa Mesir mengklaim mereka sudah mengenal telepon sejak jaman King Tut.

Di Amerika, stl penggalian sudah mencapai 1000 meter maka ditemukan kabel tembaga, maka Team Amerika dengan banggannya menyimpulkan bahwa 1500 tahun yang lalu telah dibangun jalur telepon dengan memakai tembaga di Amerika.

China:
Setelah melakukan penelitian diantara patung Teracota, ditemukan serat kaca. Bangsa China mengklaim peradaban mereka lebih maju dari bangsa Mesir, karena sudah mengenal fiber optic sejak dinasti Ming.

Di Inggris, setelah penggalian sudah mencapai kedalaman 1000 m tidak ditemukan kabel tembaga, tetapi setelah mencapai kedalaman 1500 m ditemukan serpihan kaca maka Team Inggris tersebut dengan bangganya menyimpulkan bahwa 2500 tahun yang lalu telah dibangun jalur komunikasi dengan memakai Fiber Optik di Inggris

Indonesia:
Dinas purbakala Pemda Magelang yang melakukan penggalian disamping candi Borobudur sampai kedalaman 100 meter tidak menemukan apa-apa. Dilanjutkan sampai kedalaman 500meter lalu 1000meter. Mereka tetap tidak menemukan sesuatu selain tanah dan batu. Kemudian mereka mengambil kesimpulan, bahwa bangsa Indonesia ternyata paling maju dari bangsa-bangsa di dunia. Sejak jaman dinasti Saylendra bangsa kita sudah menggunakan.... teknologi wireless.

Sumber : ketawa.com

8 Cara Jitu Menangkal Penipuan Situs Aspal

2008-09-21T05:21:00.001-07:00

Jakarta - Peredaran situs aspal (asli tapi palsu) untuk mencari mangsa di internet sudah jamak terjadi. Pelaku seakan tak mau berhenti dengan kerap melakukan penjiplakan terhadap situs-situs yang penggunanya memiliki data sensitif.

Pihak institusi semisal bank tempat pengguna itu bernaung tentunya kerap memberikan peringatan akan hal ini. Pun demikian, dibutuhkan juga kewaspadaan dari pengguna agar aksi penipuan ini bisa ditangkal.

Berikut adalah 8 cara jitu untuk mencegah aksi tipu-tipu yang biasa dilakukan lewat situs palsu yang dihimpun detikINET dari berbagai sumber:

1. Selalu ketikkan URL yang lengkap untuk alamat situs yang Anda tuju di browser. Telitilah, meskipun hanya berbeda satu huruf, namun bisa jadi Anda malah akan dikirim ke situs jiplakannya.

2. Jangan pernah memberi tahu User ID atau PIN Anda pada orang lain. Bahkan pada staf bank tempat Anda bernaung sekalipun. Sebab, seharusnya pihak bank tidak pernah menanyakan nomor PIN untuk alasan apapun.

3. Jangan mudah percaya jika mendapatkan e-mail yang berisi pemberitahuan bahwa pihak bank akan menutup rekening atau ID Anda jika tidak melakukan konfirmasi ulang dengan data-data pribadi Anda. Pastikan lebih dulu dengan menghubungi bank yang bersangkutan dan jangan me-reply atau mengklik link yang ada pada e-mail tersebut.

4. Jangan terpancing untuk mengikuti anjuran melakukan transfer ke rekening tertentu, dengan tujuan mendapatkan hadiah undian. Sebaiknya cari keterangan lengkap dengan cara langsung menghubungi pihak bank langsung.

5. Sekilas, halaman situs aspal nyaris sama dengan situs resmi milik institusi/lembaga yang resmi. Bahkan tampilannya pun terkadang terlihat kembar. Namun, jika Anda lebih teliti lagi ada perbedaan mendasar, yaitu dari alamat URL ataupun domainnya. Bedakan dengan URL dari alamat situs resmi institusi tersebut, mempunyai subdomain yang sama atau tidak.

6. Pembeda lainnya adalah pada kata depan 'http' dan 'https' di URL. Akhiran 's' pada 'http' tersebut menandakan bahwa situs ini adalah benar-benar telah 'secure', karena dilindungi oleh teknologi enkripsi data berupa Verisign SSL.

7. Meskipun pada halaman situs aspal tercantum pula logo 'Verisign Secured'. Bagi orang awam, tentu sulit membedakannya. Yang dapat menjadi patokan kesahihan sebuah situs e-banking selain tertulis 'https', di bagian kanan bawah browser juga ada gambar gembok yang terkunci.

8. Lebih baik memastikan segala sesuatunya ke institusi terkait secara langsung. Tinggal menghubungi customer service-nya, daripada malu bertanya malah menjadi korban penjahat cyber.

HTML minggu Ke-2

2008-09-20T21:04:00.001-07:00

Tag Atribut 2 ( Superscript, Subscript)

<sup>bagian yang dicetak tinggi</sup>

<sub>bagian yang dicetak rendah</sub>

<p>(x<sub>1</sub> + x<sub>2</sub>)<sup>2</sup> =

x<sub>1</sub><sup>2</sup> + x<sub>2</sub><sup>2</sup> +

2x<sub>1</sub>x<sub>2</sub></p>

<p>2H<sub>2</sub> + O<sub>2</sub> = 2 H<sub>2</sub>O

<p>(x<sub>1</sub> + x<sub>2</sub>)<sup>2</sup> =

x<sub>1</sub><sup>2</sup> + x<sub>2</sub><sup>2</sup> +

2x<sub>1</sub>x<sub>2</sub></p>

<p>2H<sub>2</sub> + O<sub>2</sub> = 2 H<sub>2</sub>O

(x₁ + x₂)² = x₁² + x₂² + 2x₁x₂

2H₂ + O₂ = 2 H₂O

Tag Ganti Baris (Break line)

<br>

Untuk pindah ke baris berikutnya.

Tag Font (size)

Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.

Tag : font Parameter : size, face, color

<font size="n"> kalimat </font>

<font size="m"> kalimat </font>

n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf)

m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf)

Tag Font (face)

Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.

Tag : font Parameter : size, face, color

<font face="nama font"> kalimat </font>

Jenis huruf :

nama font = Times New Roman, Arial,Courier New, Verdana, dll.

Tag Font (color)

Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.

Tag : font Parameter : size, face, color

<font color="#RRGGBB"> kalimat </font>

Warna :

RR = 00 .. FF (intensitas warna merah dalam heksadesimal)

GG = 00 .. FF (intensitas warna hijau dalam heksadesimal)

BB = 00 .. FF (intensitas warna biru dalam heksadesimal)

Tag Enumerasi

(List, Unordered List, Ordered List)

<li>item</li>

Untuk menandai suatu item dari daftar (enumerasi), diawali

dengan simbol • (bullet)

Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat.

Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan

tag <ol> </ol>

Tag Garis Mendatar ( Horizontal Line)

<hr>

membentuk garis pemisah mendatar.

Tag Gambar ( Image)

<img src="NamaFileGambar"> NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG.

Untuk menampilkan sebuah file gambar.

Tag Tabel ( Table) - data

<table> definisi tabel </table>

Menampilkan data dalam bentuk tabel, Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom.

Tag untuk penanda baris adalah <tr> definisi baris </tr>

Tag untuk penanda kolom adalah <td>data</td>

Tag Tabel ( Table) - layout

Untuk menata letak (layout)isi dokumen

Tag Link (Anchor)

<a href="Link">Kata yang di-click</a>

<a name="#Acuan">Kata yang dituju</a>

Link = Alamat URL atau nama file dan/atau acuan yang dituju

Acuan = Kata sembarang sebagai penanda (bookmark) membentuk link ke URL/file/bagian dokumen lain.

FORM

• Sebuah dokumen interaktif dapat menangani inputdari user

• Analoginya : bahwa dokumen adalah sebuah formulir isian

• Sebuah dokumen dapat mengandung satu atau beberapa form

• Setiap form mewakili sebuah taskspesifik (login, mengisi biodata, memilih bahasa, dll)

• Setiap formdapat menghimpun satu atau beberapa elemen input

• Ada beberapa jenis elemen input untuk menangani berbagai karakteristik data input

• Di setiap form harus ditentukan nama program (di sisi server) yang akan menangani

data isian yang dikirim (di- submit)

• Skema dasar dokumen form :

bagian ini berisi bagian dokumen HTML yang akan menggambarkan formulir isian

dengan susunan sejumlah elemen input berbagai jenis

</form>

Contoh:

Latihan 1:

<sup>D</sup>avid

<br>

ax<sup>2</sup>+ bx<sup>2</sup>=c

<br>

H<sup>2</sup>SO<sub>4</sub>

<br>

M<sub>a</sub>J<sub>2</sub>4<sub>3</sub>

<br>

<br>

A<u>ku</u>&nbsp<sup>n</sup>N<u>ya</u>

<br>

<tr>

<td>kode barang</td>

<td>nama barang</td>

</tr>

<TR>

<TD ALIGN=LEFT>CELANA</TD>

</TR>

<TR>

</TR>

<TR>

<TD ALIGN=CENTER>KERTAS</TD>

</TR>

</table>

<br>

<h1><center>IDENTITASKU</center></h1>

<tr>

<td><center>NAMA : David<br>

NIM : 1002060014</center><hr>

</br>

</table>

Latihan2:

<tr>

<td>Nama:

<br>

Alamat:

</tr>

<tr>

<td>

</td>

</tr>

</table>

Latihan3:

<tr>

<td>

tugas no.3

</td>

</tr>

<tr>

<marquee direction=right><font color=red>selamat datang <font color=green>diwebsiteku</marquee></td>

</tr>

<tr>

<td>

<td>latihan</td>

</tr>

<tr>

<td>

<td>latihan2</td>

</tr>

<tr>

<td>

<td>keluar</td>

</tr>

</table>

<!—atau cara lbh singkat-->

<tr>

<td><center>TUGAS NO 3</center></td>

</tr>

<tr>

<td><marquee><font color="green"><-</font><font color="yellow">SELAMAT DATANG DI WEBSITEKU</font><font color="green">-><font></marquee></td>

</tr>

<tr>

<td><center><a href="html2_1.html">LATIHAN<sup>1</sup></a><br>

<a href="html2_2.html">LATIHAN<sub>2</sub></a><br>

<a href="C:\Program Files\Internet Explorer\IEXPLORE.html">KELUAR</a>

</br></center></td></tr>

</table>

HTML Minggu ke-1

2008-09-20T19:55:00.001-07:00

HTML Minggu ke-1

HTML (HyperText Markup Language)

• HTML : format standar untuk membuat dokumen web

• Spesifikasi HTML standar (HTML 4.01 ) : http://www.w3.org/TR/html4

• HTML merupakan bahasa bertanda, menggunakan rangkaian teks tertentu (tag) untuk menandai teks yang mempunyai interpretasi khusus.

• File HTML berupa file teks ( plain text file), bukan binary file, sehingga dapat dibuat menggunakan editor teks biasa

Skema Dasar Dokumen HTML

• HTML: menandai awal dan akhir dokumen HTML

• HEAD: menandai bagian header dokumen HTML

• TITLE: memberi judul pada dokumen HTML

• BODY: menandai awal dan akhir isi dokumen (yang ditampilkan)

<html>

<head>

<title>Homepage saya</title>

</head>

<body>

<h2>Perkenalan</h2>

<p>Perkenalkan, nama saya ..... Ini adalah <i>homepage</i>

<b>pertama</b> saya, karena saya baru belajar tentang

cara membuat <b><i>homepage</i></b>.

</p>

Daftar Tag

• <html> Dokumen

• <head> Header

• <title> Judul dokumen

• <body> Isi dokumen

• <h1>…<h6> Judul paragraf

• <p> Paragraf

• <b>,<i>,<u>,<sup>,<sub> Atribut

• <br> Ganti baris

• <font> Font

• <li>,<ol>,<ul> Enumerasi

• <hr> Garis mendatar

• <img> Gambar

• <a> Link (kaitan/rujukan)

• <table> Tabel

•  Komentar

• <meta> Informasi mengenai dokumen

• <frame>,<framset>,<iframe> Frame (bingkai)

• <form> Formulir isian

• <input>,<textarea>,<select> Komponen isian pada formulir

• <map> Link berdasar area pada gambar

• <span>,<div> Pengelompokan elemen dokumen

Tag Judul ( Heading)

<hn>Judul paragraf</hn>

n = 1,2,3,4,5,6 (tingkat judul)

Untuk menuliskan judul suatu paragraf

<h1>Judul Tingkat 1</h1>

<h2>Judul Tingkat 2</h2>

<h3>Judul Tingkat 3</h3>

<h4>Judul Tingkat 4</h4>

<h5>Judul Tingkat 5</h5>

<h6>Judul Tingkat 6</h6>

Judul Tingkat 1

Judul Tingkat 2

Judul Tingkat 3

Judul Tingkat 4

Judul Tingkat 5

Judul Tingkat 6

Tag Paragraf ( Paragraph)

<p>paragraf</p>

Untuk menandai suatu paragraf.

Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.

<p>

Ini adalah homepage pertama

saya, karena saya baru belajar

tentang cara membuat homepage.

</p>

<p>Homepage ini masih dalam tahap

pengembangan, oleh karena itu

tampilannya masih terlalu

Ini adalah homepage pertama saya, karena

saya baru belajar tentang cara membuat

homepage.

Homepage ini masih dalam tahap

pengembangan, oleh karena itu tampilannya

masih terlalu sederhana.

Saya akan berusaha untuk terus memperbaiki

homepage saya ini, sehingga semakin lama

semakin menarik untuk dilihat.

Tag Atribut 1 ( Bold, Italic, Underline)

<b>Kalimat yang dicetak tebal</b>

<i>Kalimat yang dicetak miring</i>

<u>Kalimat yang digarisbawahi</u>

Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau digarisbawahi.

<p>Kata dapat dicetak <b>tebal</b>, <i>miring</i>,

<u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan

<b><i><u>kombinasi</

<p>Kata dapat dicetak <b>tebal</b>, <i>miring</i>,

<u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan

<b><i><u>kombinasi</>

Kata dapat dicetak tebal, miring, garis bawah, tebal miring,

dan kombinasi di tengah huruf normal

<HTML>

</HEADER>

<CENTER><H1>WEBSITE KU</H1></CENTER>

<P><B>NAMA :</B> DAvid Wong</P>

<P><B>ALAMAT :</B> JL. LODAN</P>

<P><B>HOBI :</B> listening a music</P>

</TD>

</TD>

</TABLE>

</BODY>

</HTML>

<HTML>

</HEADER>

<CENTER><H1>DATA BARANG</H1>

<TR>

<TD><B>KODE</B></TD><TD><B>NAMA</B></TD><TD><B>HARGA</B></TD>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

<HTML>

</HEADER>

<CENTER><H1>WEBSITE KU</H1></CENTER>

<P><FONT COLOR=BLUE><B>NAMA :</B></FONT> David</P>

<P><FONT COLOR=YELLOW><B>ALAMAT :</B></FONT> JL. LODAN</P>

<P><FONT COLOR=BLACK><B>HOBI :</B></FONT> Listen a music</P>

</TD>

</TD>

</TABLE>

</BODY>

</HTML>

Orange Anthem

2008-09-20T18:53:00.000-07:00

I Can`t Smile Without You

You know I can't smile without you
I can't smile without you
I can't laugh and I can't sing
I'm finding it hard to do anything
You see I feel sad when you're sad
I feel glad when you're glad
If you only knew what I'm going through
I just can't smile without you

You came along just like a song
And brightened my day
Who would have believed that you were part of a dream
Now it all seems light years away

And now you know I can't smile without you
I can't smile without you
I can't laugh and I can't sing
I'm finding it hard to do anything
You see I feel sad when you're sad
I feel glad when you're glad
If you only knew what I'm going through
I just can't smile

Now some people say happiness takes so very long to find
Well, I'm finding it hard leaving your love behind me

And you see I can't smile without you
I can't smile without you
I can't laugh and I can't sing
I'm finding it hard to do anything
You see I feel glad when you're glad
I feel sad when you're sad
If you only knew what I'm going through
I just can't smile without you

Link for Download this song

Rovio now navigating to a store near you

2008-09-17T06:42:00.000-07:00

On Monday WowWee, makers of CNET Editor Bonnie Cha's favorite work companion, RoboSapien, announced that Rovio the roving robotic web camera is now beginning to show up at select e-tailers as well.

While Wrex is cute and all, he doesn't really serve any functional purpose. Rovio however is cute and extremely functional. His three roving wheels allow him to move in pretty much any direction. Using an indoor GPS system Rovio is able to, quite impressively, find his way around the house.

His WiFi-enabled webcam allows you to see whatever Rovio sees from anywhere in the world. You can access Rovio via a compatible cell phone or your PC from the Web. Let's say you're on vacation and you want to make sure your cats have enough food in their bowl. You can remotely send Rovio over to their kettle--no doubt, horrifying them--and get a streamed MPEG4 video and audio feed. You can even take pictures and email them to whomever you'd like.

Although the official releases date is September 26, so far only two e-tailers that we know of currently have Rovio listed on their Web sites.

* Hammacher Schlemmer for US$299.95 Pre-order

Via Crave Net

Akibat Kemajuan Teknologi

2008-09-15T19:12:00.000-07:00

Kira-kira apa yang terjadi jika sistem teknologi di dunia sudah sangat canggih. Apalagi kalau sistem database sudah mampu mengatur kehidupan manusia. Berikut ini rekaman percakapan telepon pemesanan Pizza pada tahun 2020 antara seorang operator Pizza dengan konsumennya.

Operator: Terima kasih anda telah menghubungi Pizza Hot, Apakah yang bisa saya....

Konsumen : Heloo, saya mau pesan pizza.

Operator : Boleh minta nomor kartu KTP anda pak?

Konsumen : Tunggu, ini nih: 6102049998-45- 54610.

Operator : Ok pak Bejo, anda tinggal di jalan hangtuah no. 16, nomor telepon rumah anda 02177726378, kantor anda
021665872673 Hp anda 081127894022, anda menelpon dari mana?

Konsumen : Dari rumah, eh dari mana kamu tahu semua no telp saya?

Operator : Oh, kami terhubung ke database pusat pak.

Konsumen : Apakah saya bisa memesan Seafood Pizza?

Operator : Itu bukan ide yang bagus pak.

Konsumen : Kenapa?

Operator : Dari medical record bapak, bapak memiliki tekanan darah tinggi dan kolestrol yang sudah berlebihan.

Konsumen : Jadi kamu merekomendasikan apa?

Operator : Mungkin bapak bisa memesan Low Fat Hokkien Mee Pizza.

Konsumen : Dari mana kamu tahu kalo saya bakal suka itu?

Operator : Hmmm minggu lalu bapak baru meminjam buku yang berjudul "Popular Hokkien Dishes" dari perpustakaan nasional.

Konsumen : Ok terserah lah, sekalian saya pesan paket keluarga, berapa semuanya ?

Operator : Tapi paket keluarga kami tidak akan cukup untuk anak anda yang berjumlah 7 orang pak, total keseluruhan adalah Rp. 190.000.

Konsumen : Bisa saya bayar dengan Kartu Kredit?

Operator : Sepertinya bapak harus membayar Cash, kartu kredit anda telah over limit, dan anda punya utang di bank sebesar Rp. 5.350.000 sejak bulan Agustus lalu, itu belum termasuk denda untuk tunggakan kontrak rumah anda dan
kendaraan bermotor.

Konsumen : Ooh ya sudah, nanti saya ke ATM aja untuk narik duit sebelum orang mu datang nganter Pizza.

Operator : Mungkin nggak bisa juga pak, record anda menunjukkan bahwa batas anda menarik uang di ATM telah tercapai.

Konsumen : Busyet.... udah lah anterin aja pizzanya kesini, saya akan bayar cash disini, berapa lama Pizza diantar?

Operator : Sekitar 45 menit pak, tapi kalo bapak tdk bisa menunggu, bapak bisa mengambilnya sendiri dengan motor bebek bapak yang sudah butut.

Konsumen : APA ????

Operator : Menurut catatan kami, anda memiliki motor bebek tahun 2000 dengan no pol B3344CD betul kan pak?

Konsumen : Sialan luh, bangsat, kagak sopan banget seh buka-buka record gue, blom pernah ngerasain di tonjok ya!!

Operator : Hati-hati dengan ucapan bapak, apakah bapak ingat 15 Mei 2010 anda pernah di penjara 3 bulan karena mengucapkan kata kotor kepada seorang polisi??

Konsumen : (Diamm, bingung, pusing 700 keliling)

Operator : Ada yang lain pak?

Konsumen : Tidak ada, eh tapi kalo pesan paket keluarga kan ada gratis coca cola 3 cup kan?

Operator : Betul pak, tapi menurut catatan kami anda juga mengidap DIABETES, jadi kami tidak mau mengambil resiko pak.

Konsumen : Siallaaannnnn. BATALIN AJA SEMUA !!

Operator : Terima kasih atas teleponnya pak, untuk kompalain, saran dan kritik anda bisa mengisi form online pada situs kami, username dan passwordnya tercetak pada bagian bawah kotak pizza yang anda pesan, terima kasih anda
telah mengubungi Pizza Hot.