Tes Sebelum Married

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.... .

Read More......

How many faces can you find in this picture below?

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

Read More......

Senyum dong

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.'

Read More......

HTML minggu ke-8

 

 

 

 

 

8

LINK HTML

 

 

 

Tujuan Instruksional :

 

 

1. Mahasiswa memahami tag-tag untuk pembuatan link pada dokumen HTML
   
2. Mahasiswa dapat membuat link dengan menggunakan teks
   
3. Mahasiswa dapat membuat link dengan menggunakan image
   
4. 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 :

 

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

 

<a href="nama_file">teks</a>

 

1. 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.
   

 

<a href="nama_file" target="_blank">teks</a>

 

1. 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.
   

 

<a name="label">teks</a>

 

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

 

1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
   
2. 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>

 

 

 

 

 

1. 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.
   
2. 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

 

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

 

<html> <body>   <p> Image juga dapat digunakan sebagai link : <a href="6-1.html"><img src="buttonnext.gif"></a> </p>   </body> </html>

 

1. Simpan file sebagai "coba8-2.html"
   
2. 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)

 

1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
   
2. 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>

 

1. Simpan file sebagai "coba8-3.html"
   
2. 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)

 

1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
   
2. 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>

 

 

 

1. Simpan file sebagai "coba8-4.html"
   
2. 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.
  

 

 

Read More......

HTML minggu ke-7

 

 

 

 

 

7

IMAGE DALAM HTML

 

 

 

Tujuan Instruksional :

 

 

1. Mahasiswa memahami penggunaan image dalam HTML
   
2. Mahasiswa dapat mengatur tampilan image pada dokumen HTML
   
3. Mahasiswa dapat menggunakan image sebagai latar belakang dokumen HTML
   

 

 

 

 

Tag Image

 

1. Dalam HTML, gambar atau image didefinisikan dengan menggunakan tag <img>.
   
2. Tag <img> tidak memiliki tag akhir, maksudnya tidak perlu ditutup dengan tag </img>, sama seperti halnya dengan tag <br> dan <hr>.
   
3. 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.
   
4. Format dasar penulisan tag <img> adalah sebagai berikut :
   

 

<img src="nama_file_image">

 

Atau :

 

<img src="lokasi_penyimpanan/nama_file_image">

 

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

 

<img src="foto.jpg">

 

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

 

<img src="image/foto.jpg">

 

 

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 :

 

<img src="foto.jpg" alt="Ini gambar foto">

 

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 :

 

<img src="foto.jpg" align="left">

 

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 :

 

<img src="foto.jpg" border="0">

 

 

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.

 

<body background="foto.jpg">

 

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>).

 

<table background="foto.jpg">

 

<td background="foto.jpg">

 

 

 

 

 

 

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

 

8
Latihan 1 : File Image

 

1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
   
2. 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>

 

1. 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.
   
2. 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

 

1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
   
2. 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>

 

1. Simpan file sebagai "coba7-2.html"
   
2. 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

 

1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
   
2. 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>

 

 

1. Simpan file sebagai "coba7-3.html"
   
2. 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

 

1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
   
2. 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>

 

1. Simpan file sebagai "coba7-4.html"
   
2. 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

 

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

 

<html> <body>   <p> <img src="hackanm.gif" width="20" height="20"> </p>   <p> <img src="hackanm.gif" width="45" height="45"> </p>   <p> <img src="hackanm.gif" width="70" height="70"> </p>   <p> Sebuah image dapat dibuat lebih kecil atau lebih besar denga mengatur value pada atribut WIDTH dan HEIGHT. </p>   </body> </html>

 

1. Simpan file sebagai "coba7-5.html"
   
2. 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

 

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

 

<html> <body>   <img src="goleft.gif" alt="Panah Kiri" width="32" height="32">   <p> Bila image tidak tampil, maka teks yang merupakan value dari atribut ALT akan ditampilkan pada web browser.</p>   </body> </html>

 

1. Simpan file sebagai "coba7-6.html"
   
2. 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

 

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

 

<html> <body>   <p> Image dapat digunakan sebagai link : <a href="lastpage.htm"><img border="0" src="buttonnext.gif" width="65" height="38"></a> </p>   </body> </html>

 

1. Simpan file sebagai "coba7-7.html"
   
2. 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:

<table width="100%" border="1">

<tr>

<td width="10%"><img src="peace.gif"></td>

<td>toko online</td>

</tr>

<tr>

<td colspan=2>

<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>

<table width="100%" border="1">

<tr>

<td>no</td>

<td>kode</td>

<td>nama</td>

<td>harga</td>

</tr>

<tr>

<td>1</td>

<td>abc</td>

<td>doraemon</td>

<td>RP10.000</td>

</tr>

<tr>

<td>2</td>

<td>wew</td>

<td>naruto</td>

<td>RP10.000</td>

</tr>

<tr>

<td>3</td>

<td>dws</td>

<td>MAR</td>

<td>RP10.000</td>

</tr>

</table>

<br>

<hr>

<center>

<input type="submit"value="pesan">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<input type="reset"value="keluar">

</center>

 

Pesan:

<center>pesan barang</center>

<hr>

<align="left">

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

<br>

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

<br>

pesan barang:

<select name="barang">

<option value="doraemon">doraemon

<option value="naruto">naruto

<option value="MAR">MAR

</select>

<br>

<br>

<hr>

<table width="100%" border="0">

<tr>

<td>no</td>

<td>kode</td>

<td>nama</td>

<td>harga</td>

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

</tr>

<tr>

<td>1</td>

<td>abc</td>

<td>doraemon</td>

<td>RP10.000</td>

<td width"50%"><input name="text1"type="text"maxlength="25" size="25"></td>

</tr>

<tr>

<td>2</td>

<td>wew</td>

<td>naruto</td>

<td>RP10.000</td>

<td width"50%"><input name="text1"type="text"maxlength="25" size="25"></td>

</tr>

</tr>

<tr>

<td>3</td>

<td>dws</td>

<td>MAR</td>

<td>RP10.000</td>

<td width="50%"><input name="text1"type="text"maxlength="25" size="25"></td>

</tr>

</tr>

</table>

<br>

<hr>

<center>

<input type="submit"value="bayar">

<input type="reset"value="keluar">

 

</center>

 

Bayar:

<center>daftar barang</center>

<hr>

<marquee>barang yg tersedia</marquee>

<table width="100%" border="1">

<tr>

<td>no</td>

<td>kode</td>

<td>nama</td>

<td>harga</td>

</tr>

<tr>

<td>1</td>

<td>abc</td>

<td>doraemon</td>

<td>RP10.000</td>

</tr>

<tr>

<td>2</td>

<td>wew</td>

<td>naruto</td>

<td>RP10.000</td>

</tr>

<tr>

<td>3</td>

<td>dws</td>

<td>MAR</td>

<td>RP10.000</td>

</tr>

</table>

<br>

<hr>

<center>

<input type="submit"value="pesan">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<input type="reset"value="keluar">

</center>

 

 

Read More......

HTML minggu ke-6

 

 

 

 

 

6

FONT DAN STYLE HTML

 

 

 

Tujuan Instruksional :

 

 

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

 

 

 

 

Tag Font

 

1. Untuk mengatur format penulisan font (huruf) digunakan tag <font>.
   
2. 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.
   
3. Format dasar penulisan tag <font> adalah sebagai berikut :
   

 

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

 

1. Atribut FACE digunakan untuk menentukan jenis font yang diinginkan, misalnya Arial, Verdana, Times New Roman, dan lain-lain.
   
2. 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.
   
3. 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 :

 

1. 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> <link rel="stylesheet" type="text/css" href="mystyle.css"> </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.

 

1. 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> <style type="text/css"> 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>.

 

1. 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 :
   

 

<p style="color: red; margin-left: 20px"> Ini adalah sebuah paragraf. </p>

 

 

 

8
Latihan 1 : Internal Style Sheet

 

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

 

<html>   <head> <style type="text/css"> h1 {color: red} h3 {color: blue} </style> </head>   <body> <h1>Ini adalah header 1</h1> <h3>Ini adalah header 3</h3> </body>   </html>

 

1. 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.
   
2. 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

 

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

 

<html> <body>   <a href="lastpage.htm" style="text-decoration:none"> Ini adalah link!</a>   </body> </html>

 

1. Simpan file sebagai "coba6-2.html"
   
2. 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

 

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

 

<html> <head> <link rel="stylesheet" type="text/css" href="styles.css" > </head>   <body> <h1>Ini diformat dengan CSS</h1> </body>   </html>

 

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

 

h1 { color: red; }

 

1. Simpan file sebagai "styles.css"
   
2. 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>

<form method=post action"">

<table width="50%">

<tr>

<td>

tanggal:

</td>

<td>

<select name="tanggal">

<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>

&#47;

<select name="bulan">

<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>

&#47;

<select name="tahun">

<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>

<select name="jam">

<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

<select name="menit">

<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

<select name="menit">

<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>

<select name="nim">

<option value="1102060014">1102060014

<option value="1102060024">1102060024

<option value="1102060034">1102060034

</select>

</td>

</tr>

</tr>

<tr>

<td>

nama:

</td>

<td><input name="text1"type="text"maxlength="25" size="25"></td>

</tr>

<tr>

<td>

pilihan

</td>

<td>

<td><input type="radio" name=radio1><font color="red">sdrA<br>

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

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

</td>

</tr>

</table>

<hr>

<tr>

<td colspan=2><input type="submit" value="Submit">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Cancel"></td>

</tr>

Read More......

HTML minggu ke-5

 

 

 

 

 

5

LIST HTML

 

 

 

Tujuan Instruksional :

 

 

1. Mahasiswa memahami pembuatan unordered list (bulleted) dalam HTML
   
2. Mahasiswa memahami pembuatan ordered list (numbered) dalam HTML
   
3. 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 :

 

1. Unordered list
   
2. Ordered list
   
3. Definition list
   

 

Masing-masing akan dijelaskan berikut ini.

 

 

Unordered List

 

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

 

<ul> <li>Kopi</li> <li>Teh</li> </ul>

 

Akan ditampilkan di web browser seperti berikut ini :

 

• Kopi
  
• Teh
  

 

 

Ordered List

 

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

 

<ol> <li>Kopi</li> <li>Teh</li> </ol>

 

Akan ditampilkan di web browser seperti berikut ini :

 

1. Kopi
   
2. Teh
   

 

 

Definition List

 

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

 

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

 

<dl> <dt>Kopi</dt> <dd>Minuman panas pahit</dd> <dt>Teh</dt> <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

 

1. Jalankan aplikasi Notepad
   
2. 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> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>   <h4>List dengan huruf kecil :</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>   <h4>List dengan angka romawi besar :</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>   <h4>List dengan angka romawi kecil :</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>   </body> </html>

 

1. 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.
   
2. 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 :

1. Apples
   
2. Bananas
   
3. Lemons
   
4. Oranges
   

   List dengan huruf besar :
   

5. Apples
   
6. Bananas
   
7. Lemons
   
8. Oranges
   

   List dengan huruf kecil :
   

9. Apples
   
10. Bananas
    
11. Lemons
    
12. Oranges
    

    List dengan angka romawi besar :
    

13. Apples
    
14. Bananas
    
15. Lemons
    
16. Oranges
    

    List dengan angka romawi kecil :
    

17. Apples
    
18. Bananas
    
19. Lemons
    
20. Oranges
    

 

8
Latihan 2 : Unordered List

 

1. Jalankan aplikasi Notepad
   

 

1. Ketik baris perintah berikut ini :
   

 

<html> <body>   <h4>List dengan lingkaran hitam :</h4> <ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>   <h4>List dengan lingkaran kosong :</h4> <ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>   <h4>List dengan kotak hitam :</h4> <ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>   </body> </html>

 

1. Simpan file sebagai "coba5-2.html"
   
2. 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

 

1. Jalankan aplikasi Notepad
   
2. Ketik baris perintah berikut ini :
   

 

<html> <body>   <h4>Contoh list bersarang :</h4> <ul> <li>Kopi</li> <li>Teh <ul> <li>The hitam</li> <li>The hijau</li> </ul> </li> <li>Susu</li> </ul>   <h4>List bersarang 3 level :</h4> <ul> <li>Kopi</li> <li>Teh <ul> <li>Teh hitam</li> <li>Teh hijau <ul> <li>Cina</li> <li>Afrika</li> </ul> </li> </ul> </li> <li>Susu</li> </ul>   </body> </html>

 

1. Simpan file sebagai "coba5-3.html"
   
2. 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

 

1. Jalankan aplikasi Notepad
   
2. Ketik baris perintah berikut ini :
   

 

<html> <body>   <h4>Definition List :</h4> <dl> <dt>Kopi</dt> <dd>Minuman panas pahit</dd> <dt>Teh</dt> <dd>Minuman dingin manis</dd> </dl>   </body> </html>

 

1. Simpan file sebagai "coba5-4.html"
   
2. 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:

<script type="text/javascript">

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>

 

 

 

 

 

 

<script language='JavaScript'> var txt=" .:: my heart, Your home ::. "; var kecepatan=200; var segarkan=null; function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+ txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>

 

 

 

<body background="source\1_664514659l.jpg">

<table border=1 table width="100%">

<tr>

<td width="10%" rowspan=1><marquee direction=right><img src="source\soniclari.gif"></marquee></td>

<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>&nbsp;&nbsp;&nbsp;<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 src='source\snow.js'type='text/javascript'>

</script>

Form:

<script language='JavaScript'> var txt=" .:: my heart, Your home ::. "; var kecepatan=200; var segarkan=null; function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+ txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>

 

<body bgcolor="black">

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

<center><form method=post action="">

<table border=1 width="30%">

<tr>

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

<td><input name="text1"type="text"maxlength="25" size="25"></td>

</tr>

<tr>

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

<td><input name="text2"type="text"maxlength="25" size="25"></td>

</tr>

<tr>

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

<td><input name="text3"type="text"maxlength="25" size="25"></td>

</tr>

<tr>

<td><font color="red">No Telp</td>

<td><input name="text4"type="text"maxlength="25" size="25"></td>

</tr>

<tr>

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

<td><input name="text1"type="text"maxlength="25" size="25"></td>

</tr>

<tr>

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

<td><input type="radio" name=radio1><font color="red">pria<br>

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

</tr>

<tr>

<td colspan=2><input type="submit" value="Submit">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Cancel"></td>

</tr>

</center>

<script src='source\snow.js'type='text/javascript'>

</script>

Info:

<script language='JavaScript'> var txt=" .:: my heart, Your home ::. "; var kecepatan=200; var segarkan=null; function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+ txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>

 

<body background="source\18821167553584l.jpg">

<center><font color=blue>INFO PESERTA

<br>

<table border=1 width="50%">

<tr>

<td width="30%" align="center"><font color=blue>Nim</td>

<td width="30%" align="center"><font color=blue>Nama</td>

<td width="30%" align="center"><font color=blue>Foto</td>

</tr>

<tr>

<td align="center"><font color=blue>111</td>

<td align="center"><font color=blue>hehe</td>

<td align="center"><img src="source\TFR146C.gif"></td>

</tr>

<tr>

<td align="center"><font color=blue>112</td>

<td align="center"><font color=blue>hoho</td>

<td align="center"><img src="source\rambo.gif"></td>

</tr>

</center>

<script src='source\snow.js'type='text/javascript'>

</script>

Voting:

<script language='JavaScript'> var txt=" .:: my heart, Your home ::. "; var kecepatan=200; var segarkan=null; function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+ txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>

 

<body background="source\30948779641343l.jpg",position="stretch">

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

<form method=post action="">

<table width= 100% border=1>

<tr>

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

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

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

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

</tr>

<td align="center"><input name="opt1" type="radio" value="a"></td>

<td align="center"><font color=YELLOW>111</td>

<td align="center"><font color=YELLOW>hehe</td>

<td align="center"><img src="source\TFR146C.gif"></td>

</tr>

<TR>

<tr>

<td align="center"><input name="opt1" type="radio" value="b"></td>

<td align="center"><font color=YELLOW>112</td>

<td align="center"><font color=YELLOW>hoho</td>

<td align="center"><img src="source\rambo.gif"></td>

</tr>

</table>

</form>

<center><input name="sub" type="submit" value="vote"></center>

<script src='source\snow.js'type='text/javascript'>

</script>

Pemenang:

<script language='JavaScript'> var txt=" .:: my heart, Your home ::. "; var kecepatan=200; var segarkan=null; function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+ txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>

<body background="fun\image005.jpg">

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

<form method=post action="">

<table width= 100% border=1>

<tr>

<th><font color=blue>nim</th>

<th><font color=orange>nama</th>

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

</tr>

<td align="center"><font color=green>111</td>

<td align="center"><font color=brown>hehe</td>

<td align="center" bgcolor="blue"width="10%"></td>

</tr>

<tr>

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

<td align="center"><font color=red>hoho</td>

<td align="center" bgcolor="red"width="10%"></td>

</tr>

<tr>

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

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

<td align="center" bgcolor="white"width="10%"></td>

</tr>

</table>

<br>

<center><img src="source\poll.JPG"></center>

Read More......

参上する

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

Read More......

HTML minggu ke-4

HTML minggu ke-4

 

 

4

FORMAT TEKS HTML

 

 

 

Tujuan Instruksional :

 

 

1. Mahasiswa mengetahui tag-tag untuk format teks pada HTML
   
2. Mahasiswa dapat membuat teks kutipan pada dokumen HTML
   
3. 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

 

1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
   
2. 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>

 

1. 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.
   
2. 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

 membuat format teks subscript (huruf kecil di bawah)

 membuat format teks superscript (huruf kecil di atas)

 

 

8
Latihan 2 : Teks Preformat

 

1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
   
2. 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>

 

1. Simpan file sebagai "coba4-2.html"
   
2. 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

 

1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
   
2. 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>

 

1. Simpan file sebagai "coba4-3.html"
   
2. 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

 

1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
   
2. 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>

 

 

1. Simpan file sebagai "coba4-4.html"
   
2. 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>

<body background="n81505215_30755901_3731.jpg">

<table border="1">

<tr>

<td width="25%">

</td>

<td width="75%">

menu mahasiswa</td>

</tr>

<tr>

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

<td rowspan=3><img src="n81505215_30755719_344.jpg"></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 src='snow.js'type='text/javascript'>

</script>

Link ke-1

<center>identitas mahasiswa<br>

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

<table widht=100% border=1>

<tD>

nama:<input type=text><br>

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

class:<input type=text><br>

</tD>

</table>

<input type=submit value=submit />

</center>

<body background="1_529347078l.jpg">

Link ke-2

<center>identitas keluarga<br>

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

<table cellpadding=1 boarder=1>

<tr>

ayah:qqqqq

ibu:eeeeeee

kakak:lllll

adik:David

</tr>

</table>

</center>

<body background="1_229702123l.jpg">

Link ke-3

<center>identitas keluarga<br>

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

<table width=100%>

<tr>

<td>ayah:

</td>

<td>ibu:</td>

<td>kakak:</td>

</tr>

<tr>

<td>

david<br>

albert</td>

<td>

jane<br>

estelle

</td>

</table>

</center>

Link ke-4

<body background="1_116569741l.jpg">

<center> kawan

<form type="post"

<label>nim</label>

<input type="text" name="text1"<br>

<label>nama</label>

<input type="text" name="text2"<br>

<label>alamat</label>

<input type="text" name="text3"<br>

<label>gender</label>

<input type="radio" name=radio1>pria</input>

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

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

</center>

Read More......