There was an error in this gadget

BitDefender Total Security 2012 Full Version

BitDefender telah merilis 3 produknya yang terbaru yaitu BD Antivirus, BD Internet Security, dan BD Total Security 2012. Sekarang aja masih 2011, hebatnya, lagi - lagi ini software meraih peringkat pertama kategori antivirus terbaik dunia. Apa saja yang baru?

Microsoft Office Professional Plus 2010

Kali ini, Microsoft telah merilis versi office terbarunya yaitu Microsoft Office Professional Plus 2010. Pastinya banyak fitur dan fasilitas lain yang dipersembahkan.Bagi kamu - kamu yang ingin mencobanya, silahkan download.

Download Format Factory - Complete Converting Tools

Format factory merupakan media konversi multifungsi yang berfungsi untuk mengkonversi file audio dan video ke beberapa format file lainnya.

7-zip 9.20 best free compressing tools

7-Zip is open source software. Most of the source code is under the GNU LGPL license. The unRAR code is under a mixed license: GNU LGPL + unRAR restrictions.

Install Windows lewat USB / Flashdisk dengan WinToFlash

WinToFlash starts a wizard that will help pull over the contents of a windows installation CD or DVD and prep the USB drive to become a bootable replacement for the optical drive. It can alsow do this with your LiveCD.

Wednesday, December 10, 2008

Pembuatan Tabel (HTML 5)

Tabel

Dalam pembuatan homepage, table memiliki fungsi yang tidak kalah penting dengan tag - tag HTML lainnya. Pertama, table berfungsi untuk menampilkan informasi - informasi secara terstruktur, ringkas dan mudah dibaca. Kedua, table juga berfungsi untuk mengatur tampilan homepage agar lebih menarik.

Tabel 1.4 Tag - tag utama untuk pembuatah table

TagKeterangan
TRTable Row, memiliki tag awal <TR> dan tag akhir </TR> berfungsi untuk menyatakan suatu baris di dalam table. Posisi default teks di kiri.
TDTable Data, memiliki tag awal <TD> dan tag akhir </TD> berfungsi untuk menyatakan data/isi dari table. Posisi default teks di kiri.
THTable Header, memiliki tag awal <TH> dan tag akhir </TH> berfungsi untuk memberi judul baris/kolom dalam suatu table. Ditampilkan dalam bentuk cetakan tebal dan posisi default teks ditengah.

Atribut sederhana yang sering digunakan adalah BORDER yang berfungsi memberikan tampilan border (garis pembatas di sekeliling table) pada table dengan nilai berupa angka yang menunjukkan ketebalan border.




Mengatur posisi teks dalam Tabel dan menentukan Posisi table
Untuk melakukan penataan teks secara horizontal yang berada dalam table digunakan atibut ALIGN, dimana atribut ini digunakan pada tag TR, TD, dan TH. Align ada 3 yaitu left, center, dan Right.


Menentukan Lebar dan tinggi Tabel/set

Untuk menentukan lebar table maupun lebar sel/kolom table, digunakan atribut WIDTH yang memiliki nilai berupa angka tanpa satuan (nilai itu adalah pixel) atau dengan persentase (persen dari layar browser atau lebar table induknya). Sedangkan untuk menentukan table/sel digunakan atribut HEIGHT.

Praktikum
Buka notepad dan ketikkan program berikut

Program mengatur Posisi Teks dan table serta mengatur lebar Sel/tabel

<html>
<head>
<title>Mengatur posisi teks dalam tabel</title>
</head>
<body>
<table border ="10" align="right">

<tr>
<th>Nomor</th>
<th width ="150">Nama</th>
<th>Alamat</th>
</tr>

<tr>
<tr align="right">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>

<tr>
<tr align="center">
<td>d</td>
<td>e</td>
<td>f</td>
</tr>

<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
</body>
</html>

Save dengan nama Source6.htm dan buka dengan browser untuk melihat hasilnya.


Menggabungkan Sel

Untuk menggabungkan sel digunakan atribut ROWSPAN dan COLSPAN dengan nilai berupa angka tanpa satuan yang menyatakan berapa jumlah sel yang digabungkan. Kedua atribut itu digunakan pada tag sel yaitu <TH> dan <TD>. Contoh : Rowspan="2" berarti menggabungkan sel tersebut kea rah horizontal (baris) dengan tinggi 2 baris sel. Colspan="3" berarti menggabungkan sel tersebut ke arah vertical (kolom) dengan lebar kolom sel.


Buat program berikut di Notepad.

<HTML>
<head>
<title>Menggabungkan sel</title>
</head>
<body>
<table border="1" width="100%">
<caption>
<font size="5">
Setelah memakai ROWSPAN dan COLSPAN, beberapa sel digabung
</font>
</caption>
<tr>
<th width="20%" ROWSPAN="2">
Baris 1 dan 2 digabung
</th>
<th width="10%">2</th>
<th width="10%">3</th>
<th width="10%">4</th>
</tr>
<tr>
<th colspan="3">
Kolom 2,3,4 digabung
</th>
</tr>
</table>
</body>
</HTML>

Simpan dengan nama Source7.htm dengan memilih type All Files dan bukalah dengan browser.



Tampilan Source6.htm


Tampilan Source7.htm


Dekorasi Teks (HTML 4)

Penggunaan Paragraf

Paragraf sering kita gunakan dalam menyusun kelompok kalimat yang panjang. Untuk membuat paragraf dalam HTML, digunakan tag <P> atau <DIV>. Didalam tag tersebut, kita dapat menyisipkan atribut pengatur perataan kalimat, antara lain left, right, center, dan justify.

<P> digunakan jika ingin jarak antar blok kalimat lebar (setelah paragraph ada jaraknya)
<DIV>
digunakan jika ingin jarak yang tidak terlalu lebar.

Buka Notepad dan ketikkan kode program berikut:

Agar proses pembelajaran efektif dan lebih masuk ke otak, sebaiknya jangan melakukan copy paste. Nantinya jadi tidak terbiasa.

<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<h1 align="left">Penggunaan Paragraf</h1>
<font size=4><P>Nama saya Rizky Ramadhan. Saya lahir di kota garut, sebuah kota
yang sejuk dan indah serta dikelilingi gunung - gunung.
<P align="center">Garut terkenal dengan dodol dan jeruknya.
<P align="right">yang jelas, Garut merupakan kota yang selalu memberikan kenangan yang tak
akan terlupakan sepanjang masa.
</BODY>
</HTML>

Save dengan nama Source4.htm dengan memilih type all files. Lalu buka dengan browser web.

Output program



Tampilan program Source4.htm

Dekorasi Teks
Pada bagian ini, kita akan mempelajari bagaimana membuat paragraf dan mendekorasi teks seperti heading, ukuran huruf, alignment/penyusunan, ketebalan, kemiringan, dsb.

Buka Notepad dan ketikkan kode program berikut:

Agar proses pembelajaran efektif dan lebih masuk ke otak, sebaiknya jangan melakukan copy paste. Nantinya jadi tidak terbiasa.

<HTML>
<HEAD>
<TITLE>Penggunaan Dekorasi Teks, Jenis huruf dan warna huruf</TITLE>
</HEAD>
<BODY>
<H1 Align="center"> <Font face="Albertus Medium"><u>Kejujuran</u></Font></h1>
<FONT FACE = "times new roman"><b>Kejujuran</b> adalah suatu sikap yang terpuji dan merupakan salah satu pokok ajaran <br>
<i><b> Agama Islam</b></i> yang harus dilakukan oleh semua orang.<br></font>
<Font face ="times new roman"><b><u>Kejujuran</b></u> sangat sulit dilakukan karena dengan kejujuran kadangkala seseorang<br>
hidup dengan penuh<b> kesulitan</b>,tapi yakinlah <i> hasil dari kejujuran sangat manis rasanya</i>.</font>
<hr>
<h1 align="center"><font face="arial">Hikmah Dibalik Kesulitan</font></h1>
<font face="tahoma"><font color="red"><br>Kesulitan </font></font><br>
<FONT COLOR="Green">Jadikanlah<b> kesulitan</b> itu sebagai <u> ladang amal dan ujian</u>,agar kita selalu mendekatka diri,<br>
meminta pertolongan dan lindungan kepada <b> Allah SWT </b>.</font>
<hr>
<font color="blue"><b>Allah</b> tidak membebani seseorang melainkan sesuai dengan kesanggupannya.<br>
(Q.S.Al-Baqarah:286)</font>
</BODY>
</HTML>

Save dengan nama Source5.htm dengan type all files dan buka dengan browser internet seperti internet explorer.

Berikut adalah materi tentang tampilan teks

Heading
<Hn>....</Hn>
adalah heading, merupakan teks yang biasa digunakan sebagai judul utama dari sebuah dokumen dimana n adalah nomor level heading. HTML memiliki 6 level Heading dimana semakin besar nilai angkanya, semakin kecil ukuran hurufnya.

Dekorasi Teks
Macam - macam tag untuk dekorasi teks



















































Perintah



Fungsi


<b> .... </b>Mencetak tebal (Bold) teks
<i> .... </i>Mencetak miring (Italic) teks
<u>....</u>Menggaris bawahi (Underline) teks
<s>....</s>Mencoret teks (Strikethrough) teks
<strike>....</strike>Memberi coretan pada teks
<blink>....</blink>Membuat teks berkedip (hanya pada Netscape)
<tt>....</tt>Menampilkan teks dalam font mesin ketik
<big>....</big>Membesarkan teks
<small>....</small>Mengecilkan teks
<sub>....</sub>Membuat subscript (sedikit ke bawah): H2O
<sup>....</sup>Membuat teks superscript (sedikit ke atas): X2

Bentuk Huruf

Untuk menentukan bentuk huruf yang ingin kita gunakan seperti Times New Roman, Arial, dsb.Yaitu dengan perintah <FONT FACE> yang artinya (wajah huruf).

Contoh:
<FONT FACE="verdana">Jenis huruf teks ini adalah Verdana</font>

Warna Huruf
Kita pun dapat menentukan warna pada sebuah huruf atau teks tertentu dengan atribut COLOR di dalam tag <FONT> dengan nilai berupa kode atau nama warna.

Contoh
<FONT COLOR="#d3d3d3">Huruf ini berwarna abu - abu</font>

Jika ingin menggunakan nama warna, maka jangan menggunakan tanda "#" di depan nama warnanya.

Contoh
<FONT COLOR="blue">Huruf ini berwarna biru</font>

Hasil tampilan program Source5.htm

Hiperlink (HTML 3)

Hiperlink
Link merupakan hubungan antar dokumen atau halaman tertentu dalam suatu dokumen. Kita sering berpindah - pindah halaman web dengan hanya mengklik suatu huruf , kata, kalimat, bahkan gambar tertentu di dalam halaman web. Agar dokumen kita memiliki kemampuan seperti itu, kita harus memberikan perintah link.


Link Dengan Teks
Contoh program Link dengan Teks

Buka Notepad dan ketikkan source program berikut:



<HTML>
<head>
<title>Hiperlink Teks dan Gambar</title>
</head>
<body bgcolor="#d3d3d3">
<h2><b>HIPERLINK<b></h2>
<font size = 4><p> Hiperlink merupakan ciri khas dari world wide web, dimana informasi<br> yang satu dengan yang lainnnya dihubungkan dalam jaringan internet.</p> <hr>
Klik pada tulisan<a HREF="D:\Rizky\source1.htm">Link Teks</a> untuk melihat file Teks. <br>
Klik pada tulisan<a HREF="D:\Rizky\source2.htm">Link gambar</a> untuk melihat file gambar.<br>
</HTML>

Simpan dengan nama Source3.htm


Jalankan dengan browser dan hasilnya akan seperti gambar di bawah ini




Keterangan
- Ketika kita meng-klik kata Link Teks, maka kita akan menuju file source1.htm yang berisi teks.
- Ketika kita meng-klik kata Link Gambar, maka kita akan menuju file source2.htm yang berisi teks dan gambar
- File source1.htm dan source2.htm merupakan file yang telah kita buat di latihan sebelumnya dan tergantung dimana letak anda menyimpannya.

Link dengan Gambar
Selain Link dengan Teks, kita pun dapat membuat link dengan gambar sehingga kita tinggal meng-klik gambar tersebut untuk berpindah halaman
Contoh program Link Gambar1
- Buka notepad dan ketikkan perintah berikut:

<HTML>
<head>
<title>Hiperlink Teks dan Gambar</title>
</head>

<body bgcolor="#d3d3d3">
<h2><b>HIPERLINK<b></h2>
<font size = 4><p>Gambar ini adalah foto penulis, untuk ke menu berikutnya<br>
silahkan klik foto penulis</p> <hr>
<a HREF="D:\Education\Web Course\Course 1\Hiperlink\source3c.htm">
<IMG SRC="D:\Education\Web Course\Course 1\Hiperlink\Rizky.jpg" align="left" height="150" weight="100"></a>
</HTML>

Simpan program pertama dengan nama Source3b.htm , lalu buat file baru


Contoh program Link Gambar2



<HTML>
<head>
<title>Hiperlink Teks dan Gambar</title>
</head>
<body bgcolor="#d3d3d3">
<h2><b>HIPERLINK<b></h2>
<font size = 4><p>Gambar ini adalah gambar kedua, untuk kembali ke menu sebelumnya<br>
silahkan klik foto penulis</p> <hr>
<a HREF="D:\Rizky\source3b.htm"><IMG SRC="D:\Education\Web Course\Course 1\Hiperlink\Rizky2.jpg" align="left" height="150" weight="100"></a>
</HTML>

Simpan dengan nama Source3c.htm dan buka file pertama dengan browser


Hasil program akan tampak seperti gambar dibawah:



Ketika meng-klik fotonya, maka akan berpindah halaman, lihat hasilnya.



Link Dengan E-Mail
Selain dapat dengan cara teks dan gambar, kita juga dapat melakukan link terhadap e-mail tertentu. Yaitu dengan cara menambahkan atribut "mailto:alamat-E-mail" ke dalam tag <a HREF="...">

Contoh:
<A HREF=mailto:rizky.ramadhan7@gmail.com>Kirim E-Mail ke Rizky..</A>


Sunday, December 7, 2008

Memberi Latar Belakang dan Warna (HTML 2)

Memberi Latar Belakang Dan Gambar Pada HomePage


Kita dapat memberikan warna latar belakang atau gambar pada website kita dengan perintah BGCOLOR(Background Color) untuk warna dan BACKGROUND untuk gambar.INGAT! harus didalam tag <BODY> karena yang mau diberi warnanya juga body/halaman website bukan header.



Format Penulisannya


<BODY BGCOLOR="#rrggbb" atau BGCOLOR="nama_warna">

<BODY BACKGROUND="letak file gambar">


Letak file gambar itu seperti "D:\Rizky\gambar.jpg" apapun tipe file gambarnya *.bmp,*.gif, yang terbaca Windows.


Rrggbb itu red, green, blue


Nama_warna harus bahasa inggris dan jangan memakai tanda"#".


Nama warna yang ada, kamu tinggal pilih dan ketik:


Black, olive, teal, red, blue, maroon, navy, gray, lime, fuchsia, white, green, purple, silver, yellow, brown, dan aqua (bukan air minum lho!).


Kode Warna RGB beserta Nama Warnanya











































Kode Warna



Nama Warna


#000000Hitam
#FFFFFFPutih
#A9A9A9Abu Tua
#006400Hijau Tua
#FF8C100Oranye Tua
#8B0000Merah Tua
#9400D3Ungu Tua
#D3D3D3Abu Muda
#90EE90Hijau Muda

Program 2a nama program source2bg.htm


Buka notepad dan ketikkan


<html>


<head>


<title> URL </title>


</head>


<body BGCOLOR="#d3d3d3">


<font size=4> URL (Uniform Resource Locator), Yaitu sarana yang digunakan<br>


untuk menentukan alamat yang dipakai ketika kita mengakses<br>


internet(Website/Home Page).


<HR>


</BODY>


</HTML>


Program 2b


Buat file baru di notepad


<html>


<head>


<title> URL </title>


</head>


<body BACKGROUND="Pooh.jpg">


<font size=4> URL (Uniform Resource Locator), Yaitu sarana yang digunakan<br>untuk menentukan


alamat yang dipakai ketika kita mengakses<br>internet(Website/Home Page).


<HR>


</BODY>


</HTML>


Save dengan nama source2bg.htm dan source2gmbr.htm dengan tipenya All Files. Lalu buka oleh browser dan lihat hasilnya.




Hasil Program Source2bg.htm
























Hasil ProgramSource2gmbr.htm


Keterangan:


Ukuran huruf = 4 karena perintah font size


Terdapat garis pembatas yang optional karena perintah <HR>, garis tersebut tidak bisa di ubah,baik warna maupun ukuran karena sifatnya optional