0 TV OnLine
Bagi Sahabat yang doyan nonton TV, Berita, Olah Raga ataupun Acara kesayangan, Silahkan Download Koleksi Software Pemutar TV Internet ini, Gratis tentunya…..
Isi :
Super Internet TV Premium Edition 2009 8.0
Satellite TV PC Master v6.0
FreeZ Online TV v1.30
Readon TV Movie Radio Player v5.8
TVUPlayer 2.5.0.1
SopCast v3.2.4
Online TV Player v4.9.5.0
MediaPortal Media Center and TV Server
TV v2.2
OnLine TV Live v8.1.2
1 400.000 Universal Windows Drivers
Kali ini saya cuma mau berbagi koleksi driver Komputer desktop atau Laptop, khusus untuk Windows XP dan Vista. Jika teman-teman berminat, silahkan donwload aja ya...
Link Satu
Link Dua
Pass : http://www.avaxdownload.com
Link Tiga
http://hotfile.com/dl/37435172/a2bd6cd/400000_Universal_Windows_Drivers.part01.rar.html
http://hotfile.com/dl/37435170/f2651b7/400000_Universal_Windows_Drivers.part02.rar.html
http://hotfile.com/dl/37435175/05d666b/400000_Universal_Windows_Drivers.part03.rar.html
http://hotfile.com/dl/37435174/3429449/400000_Universal_Windows_Drivers.part04.rar.html
http://hotfile.com/dl/37435179/a155ac8/400000_Universal_Windows_Drivers.part05.rar.html
http://hotfile.com/dl/37435176/9dec5c0/400000_Universal_Windows_Drivers.part06.rar.html
http://hotfile.com/dl/37435177/2a860ec/400000_Universal_Windows_Drivers.part07.rar.html
http://hotfile.com/dl/37435178/9f9412e/400000_Universal_Windows_Drivers.part08.rar.html
http://hotfile.com/dl/37435171/5f36edb/400000_Universal_Windows_Drivers.part09.rar.html
http://hotfile.com/dl/37435173/71ed2c4/400000_Universal_Windows_Drivers.part10.rar.html
http://hotfile.com/dl/37435829/366f283/400000_Universal_Windows_Drivers.part11.rar.html
http://hotfile.com/dl/37435821/4e24d2a/400000_Universal_Windows_Drivers.part12.rar.html
http://hotfile.com/dl/37435827/8266d12/400000_Universal_Windows_Drivers.part13.rar.html
http://hotfile.com/dl/37435823/dd37885/400000_Universal_Windows_Drivers.part14.rar.html
http://hotfile.com/dl/37435820/df7261e/400000_Universal_Windows_Drivers.part15.rar.html
http://hotfile.com/dl/37435826/9a0d8b1/400000_Universal_Windows_Drivers.part16.rar.html
http://hotfile.com/dl/37435819/8d5db6c/400000_Universal_Windows_Drivers.part17.rar.html
http://hotfile.com/dl/37435825/2d2958e/400000_Universal_Windows_Drivers.part18.rar.html
http://hotfile.com/dl/37435822/1e0a19a/400000_Universal_Windows_Drivers.part19.rar.html
http://hotfile.com/dl/37435828/7fc000b/400000_Universal_Windows_Drivers.part20.rar.html
http://hotfile.com/dl/37435855/1a0bbee/400000_Universal_Windows_Drivers.part21.rar.html
http://hotfile.com/dl/37435852/b5785d8/400000_Universal_Windows_Drivers.part22.rar.html
http://hotfile.com/dl/37435860/a51138b/400000_Universal_Windows_Drivers.part23.rar.html
http://hotfile.com/dl/37435854/1a5be44/400000_Universal_Windows_Drivers.part24.rar.html
http://hotfile.com/dl/37435856/51e5d69/400000_Universal_Windows_Drivers.part25.rar.html
http://hotfile.com/dl/37435858/eaf4f46/400000_Universal_Windows_Drivers.part26.rar.html
http://hotfile.com/dl/37435859/ac906f4/400000_Universal_Windows_Drivers.part27.rar.html
http://hotfile.com/dl/37435857/6a39f9f/400000_Universal_Windows_Drivers.part28.rar.html
http://hotfile.com/dl/37435861/c5c2f17/400000_Universal_Windows_Drivers.part29.rar.html
http://hotfile.com/dl/37435862/6137e8b/400000_Universal_Windows_Drivers.part30.rar.html
http://hotfile.com/dl/37436562/06b0a2c/400000_Universal_Windows_Drivers.part31.rar.html
http://hotfile.com/dl/37436580/95f1ade/400000_Universal_Windows_Drivers.part32.rar.html
1 Emotions
Emotions, atau disebut juga Smile, biasa kita pakai pada Chat Box atau Aplikasi Chat lainnya, yang dipakai untuk mewakili kata-kata atau perasaan tertentu.
Saya mau bagikan koleksi Smile ini buat teman-teman, ada lebih dari 250 macam, silahkan langsung aja di download bagi yang berminat.
4 My Award
Thanks, buat sahabat blogger Apa KaBar Dunia, yang telah memberikan Award ini, Award Pertama saya nih……. semoga Award ini bisa mempererat jalinan persahabatan kita.
Oke,mengikuti aturan mainnya ( semoga ga salah ), Award ini akan saya berikan kepada :
- Tembang Lawas
- ashtho software easy
- Cah Ndeso
- Moedzt
- Mas Boy
- Komunitas Multimedia SMK Negeri 4 Semarang
- Ladida's Blog
- Topi Jerami (Strawhat)
- Rumah Bloger
- Dunia Software Full Version
- Rumah Imajinasi
- Fakta Lompat
- Kang Budi
- Gieterror
- Dunia Klue
- Todi-[licious]
- The Other Side of me
- Bhonchuwh
- Apa KaBar Dunia
- Coba Lihat Saja
Award ke Dua
Dapet Award ke dua dari Mas Budi Rahardjo ( http://www.penyembuhanholistik.co.cc ), Terima Kasih ya Mas Budi, Semoga Sukses selalu...
1 Belajar HTML Bag. 10 ( Style )
Pada bagian ini kita akan membahas mengenai tag-tag yang digunakan sebagai styler html itu sendiri, tag-tag tersebut antara lain adalah tag <style>dan tag <div>. Ok kita langsung saja bahas satu per satu.
Tag <style>
Tag ini digunakan untuk menambahkan style pada webpage kita. Pada contoh dalam menggunakan tag ini kita akan menggunaka CSS ( Cascading Style Sheet) yaitu sebuah scripting yang digunakan untuk mengcostumize sebuah halaman HTML. Untuk lebih jelasnya perhatikan contoh berikut :
Code :
<html>
<head>
<style type="text/css">
h4 {color:red}
h1 {color:blue}
p {color:green}
</style>
<title>
CobaLihatSaja Tutorial
</title>
</head>
<body>
<h4>Contoh penggunaan CSS</h4>
<h1>Contoh penggunaan CSS</h1>
<p>
Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS.
Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS.
Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS.
Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS.
</p>
</body>
</html>
Hasil :
Penjelasan :
Perhatikan kode diatas, pada bagian header kita menambahkan tag <style> berjenis text/css yang berisi script css yang mengcostumize tag <h4> menjadi berwarna merah, <h1> menjadi berwarna biru dan <p> menjadi berwarna hijau, sehingga saat anda menggunakan tag-tak tersebut pada dokumen html anda, anda akan mendapatkan hasil sesuai yang sudah kita konfigurasikan pada script css kita.
Tag <div>
Tag ini digunakan untuk membuat sebuah bagian atau divisi. Sehingga tag ini banyak digunakan untuk kepentingan styling. Selain digunakan untuk styling, tag ini juga sering dimanfaatkan sebagai pengganti table, karena pada praktiknya loading speed table yang dibuat dengan <div> lebih cepat dimuat daripada table yang dibuat menggunakan <table>. Dikarenakan pada bagian ini kita membahas tentang style, maka saya akan menjelaskan kegunaan tag <div> sebagai styler saja, untuk penggunaan <div> sebagai table akan kita bahas dilain kesempatan. Ok, kita mulai saja dengan contoh agar mudah dimengerti :
Code :
<html>
<head>
<title>
CobaLihatSaja Tutorial
</title>
</head>
<body>
<div style="color:red">
<h3>Contoh penggunaan div untuk keperluan style</h3>
<p>Contoh penggunaan div untuk keperluan styleContoh penggunaan div untuk keperluan style</p>
</div
<div style="color:blue">
<h3>Contoh penggunaan div untuk keperluan style</h3>
<p>Contoh penggunaan div untuk keperluan styleContoh penggunaan div untuk keperluan style</p>
</div
<div style="color:green">
<h3>Contoh penggunaan div untuk keperluan style</h3>
<p>Contoh penggunaan div untuk keperluan styleContoh penggunaan div untuk keperluan style</p>
</div
</body>
</html>
Hasil :
Penjelasan :
Mudah bukan untuk memahami kode diatas? Kita membagi content dari webpage menjadi tiga bagian menggunakan tag <div> dan memberikan style yang berbeda-beda.
Ok selesai sudah perjumpaan kita malam ini. Bye-bye.
Selamat Belajar...dan tetap Semangat...
1 Belajar HTML Bag. 9 ( Input )
Ok, selanjutnya kita mulai saja :
Tag | Fungsi | Atribut |
<form> | Mendeklerasikan sebuah form sebagai tempat dimana komponen-komponen input lainnya diletakan | -action : digunakan untuk memberikan url dimana isi dari input-input dalam form ini dikirim. -target : digunakan untuk menentukan bagaimana url dibuka (_blank, _self, _parent, _top) |
<input> | Medeklerasikan sebuah komponen input | -checked : memberikan nilai kepada sebuah komponen apakah dalam kondisi terpilih atau tidak -type : menentukan tipe dari input yang kita buat. -value : memberikan nilai kepada input yang kita buat |
<textarea> | Mendeklerasikan sebuah text area | -cols : menentukan jumlah kolom -rows : menentukan jumlah baris |
<button> | Mendeklerasikan sebuah tombol / button | -disabled : menentukan tombol tersebut active atau tidak -name : menentukan nama dari tombol -type : menentukan jenis tombol (button,reset,submit) -value : memberikan nilai kepada tombol tersebut |
<select> | Mendeklerasikan sebuah selection | -disable : menentukan selection tersebut active atau tidak -multiple : menentukan seleksi dapat dipilih lebih dari satu atau tidak -name : memberikan nama pada selection |
<option> | Merupakan komponen pelengkap tag <select>, bertindak sebagai item-item dalam sebuah selection. | -disable : menentukan selection tersebut active atau tidak -value : memberikan nilai kepada tombol tersebut -selected : memberikan nilai kepada sebuah komponen apakah dalam kondisi terpilih atau tidak -label : memberikan sebuah label /caption kepada option |
<label> | Mendeklerasikan sebuah label | -for : menunjukan label tersebut digunakan untuk id input yang ditunjuk |
0 Belajar HTML Bag. 8 ( Table )
Langsung aja ya...Untuk membuat table di HTML anda memerlukan beberapa kombinasi tag, berikut adalah daftar tag-tag tersebut.
Nama Tag | Fungsi |
<table> | Digunakan untuk mendeklerasikan sebuah table |
<th> | Digunakan untuk mendeklerasikan sebuah table header |
<tr> | Digunakan untuk mendeklerasikan sebuah table row / baris |
<td> | Digunakan untuk mendeklerasikan sebuah table detail / field |
<tbody> | Digunakan untuk mendeklerasikan sebuah table body / tubuh dari table |
<tfooter> | Digunakan untuk mendeklerasikan sebuah table footer |
<caption> | Digunakan untuk mendeklerasikan sebuah table caption / judul tabel |
Cukup jelas kan ? kegunaan tag-tag tersebut dengan membaca tabel diatas. Ok selanjutnya kita akan mencobanya kedalam kode html berikut supaya lebih jelas kegunaan dan fungsinya :
Code :
<html>
<head>
<title>
CobaLihatSaja Tutorial
</title>
</head>
<body>
<table border="1">
<caption>Situs Favorite</caption>
<tr>
<th>Nama Situs</th>
<th>Keterangan</th>
</tr>
<tr>
<td>http://www.4-mall.com</td>
<td>Toko Online</td>
</tr>
<tr>
<td>http://awansusanto.4-mall.com</td>
<td>Blog Gadget</td>
</tr>
<tr>
<td>http://www.cobalihatsaja.com</td>
<td>Blog Komputer & Gadget</td>
</tr>
</table></body>
</html>
Hasil :
Penjelasan :
Untuk contoh diatas kita membuat sebuah table yang simple, hanya menggunakan tag <table>, <caption>, <th>, <tr> dan <td>. Untuk mencoba seluruh tag yang ada berikut kita buat code sbb :
Code :
<html>
<head>
<title>
CobaLihatSaja Tutorial
</title>
</head>
<body>
<table border="1">
<caption>Situs Favorite</caption>
<thead>
<th>Nama Situs</th>
<th>Keterangan</th>
</thead>
<tbody>
<tr>
<td>http://www.4-mall.com</td>
<td>Toko Online</td>
</tr>
<tr>
<td>http://awansusanto.4-mall.com</td>
<td>Blog Gadget</td>
</tr>
<tr>
<td>http://www.cobalihatsaja.com</td>
<td>Blog Komputer & Gadget</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Jumlah Situs</td>
<td>3</td>
</tr>
</tfoot>
</table>
</body>
</html>
Hasil :
Penjelasan :
Tampilan yang dihasilkan dengan kode sebelumnya tidak jauh berbeda bukan? Hanya saya untuk kali ini pada bagian judul border lebih tebal dari paba row table, dan juga ada tambahan pada bagian footer. Sekalipun perbedaan yang dibuat tidak terlalu signifikan, sangat disarankan kita menggunakan susunan pada contoh yang kedua, sehingga kode yang kita buat lebih terstruktur dan rapih, yang sangat akan berguna jika kita bekerja dalam project HTML yang kompleks.
Ok, saya rasa cukup sampai disini pembahasan mengenai table di HTML.
Selamat Belajar dan tetap Semangat...
2 Belajar HTML Bag. 7 ( Frames )
Frames, mungkin mendengar kata-kata ini anda akan berfikir frame adalah sebuah bingkai seperti yang anda lihat didinding rumah anda (kalo ada fotonya juga sih), oke, kita dapat mengibaratkan frame sebagai sebuah bingkai foto anda yang dipajang didinding, disini frame diperumpamakan sebagai bingkai, situs sebagai foto dan page browser anda sebagai dinding. Mudeng gak?? gini loh, dengan frame kita dapat memajang beberapa website sekaligus kedalam 1 halaman web saja. Caranya? Baca dulu ya ampe selesai...
A. Tag <frame> dan Tag <frameset>
Kedua tag ini digunakan secara bersamaan untuk menyusun sebuah frame, Tag <frameset> digunakan untuk mendeklerasikan sebuah frameset, sedangkan Tag <frame> digunakan untuk membuat frame-frame yang kita butuhkan. Untuk lebih jelasnya perhatikan contoh berikut :
Code :
<html>
<head>
<title>
CobaLihatSaja Tutorial
</title>
</head>
<body>
<frameset cols="25%,50%,25%">
<frame src="http://www.cobalihatsaja.com" />
<frame src="http://www.4-mall.com" />
<frame src="http://awansusanto.4-mall.com" />
</frameset>
</body>
</html>
Hasil :
Penjelasan :
Pada contoh diatas kita bertujuan untuk menampilkan 3 buah website sekaligus kedalam sebuah halaman, situs tersebut adalah : http://www.cobalihatsaja.com , http://www.4-mall.com dan http://awaansusanto.4-mall.com . Untuk melakukannya, kita memulainya dengan membuat sebuah frameset dengan menggunakan tag <frameset> dan membaginya kedalam tiga bagian dengan menggunakan atribut “cols” , disini kita membaginya menjadi 25%, 50% dan 25%. setelah itu untuk mengisi kolom-kolom frameset yang sudah kita buat sebelumnya kita gunakan tag <frame> dan tambahkan alamat situs-situs tersebut kedalam tag frame dengan menggunakan atribut “src”.
B. Tag <noframe>
Tag ini digunakan untuk fungsi portability, yang artinya jika website kita dijalankan pada semua browser, makan website kita akan tetap menampilkan informasi yang benar. Nah, pada beberapa browser fungsi tag <frame> tidak didukung, sehingga halaman kita tidak akan menampilkan apapun jika dibuka, tentu pengunjung akan bingung dengan keadaan seperti ini. Untuk menyiasati kejadian seperti ini, kita dapat memanfaatkan tag <noframe> ini, sehingga apabila dideteksi browser pengunjung tidak mendukung fungsi frame, maka akan ditampilkan pesan error atau kesalaha. Cara penggunaanya pun simple, lihat kode dibawah ini :
Code :
<html>
<head>
<title>
CobaLihatSaja Tutorial
</title>
</head>
<body>
<frameset cols="25%,50%,25%">
<frame src="http://www.cobalihatsaja.com" />
<frame src="http://www.4-mall.com" />
<frame src="http://awansusanto.4-mall.com" />
<noframes>
Maaf, browser yang anda gunakan tidak dapat menampilkan frame, coba buka dengan browser lain!
</noframes>
</frameset>
</body>
</html>
C. Tag <iframe>
Jika tag <frame> digunakan untuk membagi webpage menjadi beberapa bagian, tag <iframe> memiliki fungsi yang sedikit berbeda, yaitu frame yang kita buat terletak didalam webpage atau dokumen yang kita buat tanpa membagi halaman browser seperti yang dilakukan oleh tag <frame>, bingung? Liat ini aja deh...
Code :
<html>
<head>
<title>
CobaLihatSaja Tutorial
</title>
</head>
<body>
<iframe src="http://www.4-mall.com" width="50%" height="50%"/>
</body>
</html>
Hasil :
Penjelasan :
Lihat pada frame yang kita buat kali ini, frame tersebut kita buat dengan tinggi dan lebar 50% dari webpage. Seperti anda lihat, penggunaan tag <iframe> sangat simple, anda cukup memberikan nilai pada atribut “src” dan beberapa atribut lainnya yang bersifat optional , berikut daftar atribut-atribut yang dapat anda coba untuk membuat perbedaan pada iframe anda :
Atribut <iframe>
-
align → atribut ini digunakan untuk menentukan bagaimana align dengan text pada webpage, adapun nilai-nilainya adalah : left, right, top, middle dan bottom.
-
frameborde → digunakan untuk memberikan border pada iframe, jika anda ingin menggunakan border, beri nilai 1 kedalam atribut ini, jika tidak beri nilai 0.
-
height → digunakan untuk menentukan tinggi dari iframe.
-
width – digunakan untuk menentukan lebar dari iframe.
-
src → digunakan untuk menentukan kontent sumber website yang ingin kita tampilkan.
1 Belajar HTML Bag. 6 ( Image )
Pada artikel ini kita akan membahas tentang image dalam HTML. Disini kita akan membahas 3 buah tag yang digunakan untuk keperluan mengatur image pada webpage kita. Yaitu <img>, <map> dan <area>.
Ok langsung aja dimulai,
Tag <img>
Tag <img> adalah tag dasar yang digunakan untuk menampilkan / menambahkan image pada webpage kita. Pada contoh berikut kita akan mencoba menambahkan file gambar dengan nama byson.jpg kedalam webpage kita.
Code:
<html>
<head>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
<h3>Menambahkan Gambar pada webpage</h3>
<img src=”byson.jpg” alt=”gambar byson”/>
</body>
</html>
Hasil :
Penjelasan :
Pada kode diatas kita gunakan tag <img> untuk menambahkan image, dengan atribut “sr” → untuk menentukan alamat / posisi file gambar tersebut, “alt” → untuk memberikan text alternatif jika gambar tidak berhasil dimuat, “width” → untuk menentukan lebar gambar tersebut, dan “height” → untuk menentukan tinggi gambar tersebut.
Tag <map>
Tag <map> digunakan untuk membagi sebuah image menjadi beberapa area, pada umumnya bagian-bagian yang dihasilkan digunakan untuk membuat sebuah link. Untuk lebih jelasnya perhatikan dan coba contoh dibawah ini :
Code:
<html>
<head>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
<h3>Menambahkan Gambar Area pada Image</h3>
<img src="byson.jpg" alt="gambar byson" width="800" height="500" usemap="#motor"/>
<map name="motor">
<area shape="rect" coords="0,0,200,500" alt="belakang" href="http://www.4-mall.com"/>
<area shape="circle" coords="0,300,200" alt="tengah" href="http://www.awansusanto.4-mall.com"/>
<area shape="rect" coords="500,0,800,500" alt="depan" href="http://www.cobalihatsaja.com"/>
</map>
</body>
</html>
Hasil :
Penjelasan :
Perhatikan kode yang kita buat diatas, kita mencoba membagi gambar menjadi tiga area dengan nama : belakang, tengah dan depan, masing masing berbentu segi empat, lingkaran dan segi empat, dimasing-masing area juga kita meletakan hyperlink ke alamat situs : http://www.4-mall.com , http://www.awansusanto.4-mall.com dan http://www.cobalihatsaja.com , pertama kali yang kita lakukan adalah menyisipkan gambar telebih dahulu kedalam webpage dengan menggunakan tag <img> dan tambahkan atribut “usemap” untuk menunjuk map mana yang akan kita gunakan dalam image ini, disini kita menggunakan nama “motor” sebagai map kita. Selanjutnya perhatikan pada tag <map> yang kita buat dengan atribut “name” motor. Dalam deklerasi map motor tersebut kita pilah-pilah area menjadi 3 bagian yang berbentuk segi empat dan lingkaran. Untuk lebih jelasnya perhatikan penjelasan penggunaan shape pada tag <area> sbb :
a. rect / rectangle / segi empat
pada jenis shape ini kita menentukan 4 buah kordinat sbb (xa,ya,xb,yb):
xa = kordinat x mulai
ya= kordinat y mulai
xb = kordinat x akhir
yb = kordinat y akhir
b. circle / lingkaran
pada jenis shape ini kita harus menentukan 3 kordinat (x,y,r) :
x = kordinat x
y = kordinat y
r = panjang jari-jari lingkaran
Setelah mengeset kordinat-kordinat area, selanjutnya kita menambahkan atribut “alt” dan “href” agar link yang kita buat bekerja.
Oke…cukup jelas kan?? Silahkan dijajal-jajal dewe…. dan tetap Semangat…
0 Belajar HTML Bag. 5 ( Links )
Di HTML kita akan mengenal dua buah tag yang menangani linking, yaitu tag <a> dan <link>.
Tag <a>
Tag ini digunakan untuk berpindah dari satu page ke page lainnya, dari satu website ke website lainnya atau berpindah dari satu bagian dalam page kebagian lainnya yang masih dalam page tesebut. Untuk memperjelas maksud saya, berikut kita bahas dan praktikan kedalam kode.
Linking antar situs
Code:
<a href=”http://4-mall.com”>Go To 4-mall.com</a>
Penjelasan:
Kode diatas memberikan fungsi kepada text bertuliskan “Go To 4-mall.com” untuk link ke alamat http://www.4-mall.com pada halaman yang sama.
Linking antar page
Code:
<a href=”page7.htm”>Ke Page 7</a>
Penjelasan:
Kode diatas memberikan fungsi kepada text bertuliskan “Ke Page 7” untuk link ke webpage page7.htm yang masih dalam satu root situs.
Linking dengan membuka tab baru
Code:
<a href=”http://www.4-mall.com” target=”_blank”>Go to 4-mall.com</a>
Penjelasan:
Kode diatas memberikan fungsi kepada text bertuliskan “Go to 4-mall.com” untuk link ke alamat http://www.4-mall.com dengan membuka window baru.
Linking antar bagian
Sebelum dapat menggunakan fungsi linking antar bagian dalam satu webpage, terlebih dahulu anda harus membuat tanda atau sebuah alamat pada bagian tesebut. Anda dapat menggunakan atribut “name” untuk membuat tanda tersebut. Untuk lebih jelasnya perhatikan dan jalankan kode berikut :
Code:
<html>
<head>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
<a href="#bawah">Ke Bawah</a><br><br><br><br>
<h4 ><a name="atas">Bagian 1</a></h4><br><br>
<h4>Bagian 2</h4><br><br><br><br>
<h4>Bagian 3</h4><br><br><br><br>
<h4>Bagian 4</h4><br><br><br><br>
<h4>Bagian 5</h4><br><br><br><br>
<h4><a name="bawah">Bagian 6</a></h4><br><br><br><br>
<a href="#atas">Ke Atas</a><br><br>
</body>
</html>
Hasil :
Penjelasan:
Lihat pada kode diatas, saya membuat 6 baris judul diikuti dengan tag <br> supaya jarak antar judul berbeda jauh, sehingga akan terlihat fungsi link yang kita buat. Selanjutnya perhatikan pada “Bagian 1” dan “Bagian 6”, disana tentu anda lihat sebuah tag <a> diikuti dengan atribut “name” yang berfungsi memberikan alamat untuk linking, disana saya memberikan nama alamat “atas” untuk “Bagian 1” dan “bawah” untuk “Bagian 6”. Setelah itu lihat pada bagian link yang kita buat, perbedaannya adalah adanya tanda “#” pada atribut href yang kita buat.
Linking untuk mengirim email
Selain digunakan untuk mehubungkan antar webpage, tag <a> juga dapat digunakan untuk keperluan mengirim email. Perhatikan contoh berikut :
Code :
<html>
<head>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
<a href="mailto:sales@4-mall.com?cc=sales2@4-mall.com&bcc=direktur@4- mall.com&subject=Permintaan penawaran harga laptop&body=Dengan email ini saya mohon untuk dikirimkan pricelist laptop terbaru. Terima kasih.">Kirim Email!</a></body>
</html>
Hasil :
Penjelasan :
Seperti anda lihat, disana kita menggunakan atribut mailto dengan sub-atribut cc,bcc, subject dan body. Jika link tersebut kita klick, maka akan muncul mail client default system operasi anda dan akan secara langsung terisi dengan parameter yang sudah kita berikan pada atribut mailto tersebut.
Tag <link>
Tag ini digunakan bukan untuk melakukan linking secara langsung, akan tetapi digunakan untuk melakukan linking sebagai relasi webpage dengan file lain. Misalkan webpage anda menggunakan style css yang ada difile lain, maka anda dapat menghubungkan webpage anda dengan file css tersebut dengan tag ini. Penggunaanya pun simple, berikut contoh penggunaan tag <link>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”thema.css”/>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
Web Page yang sudah terformat menggunakan file style thema.css
</body>
</html>
Uwes ndisik rek…….nguantoke polll…zzzzzzzzzzzzz…….
1 Belajar HTML Bag. 4 ( Lists )
Dalam menyusun webpage, sering sekali kita membutuh list, baik itu dengan nomer maupun dengan symbol tertentu. Hal itu dapat saja anda lakukan manual dengan mengetikannya sebagai text, akan tetapi untuk praktik yang baik sebaiknya anda gunakan tag-tag list yang sudah disediakan oleh HTML guna portabilitas antar browser tetap dapat terjaga. Ok, disini kita akan membahas ordered list, unordered list, directory list, menu list. Ok kita mulai,
Jenis-jenis List
-
Ordered List <ol>
-
Unordered List <ul>
-
Directory List <dir>
-
Menu List <menu>
Code :
<html>
<head>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
<ol>Ordered List
<li>satu</li>
<li>dua</li>
<li>tiga</li>
</ol>
<ul>Unordered List
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<dir>Directory List
<li>siji</li>
<li>loro</li>
<li>telu</li>
</dir>
<menu>Menu List
<li>pecel lele</li>
<li>sambel trasi</li>
<li>tiwul goreng</li>
</menu>
</body>
</html>
Hasil :
Komponen List
-
List item<li>
-
Definition List <dl>
-
Definition Term <dt>
-
Definition Description <dd>
Untuk lebih memahami penggunaanya, mari kita lihat kode dibawah ini :
Code :
<html>
<head>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
<dl>Makanan Favorit
<dt>Suweg</dt>
<dd>- Merupakan makanan yang paling saya sukai</dd>
<dt>Kluwih</dt>
<dd>- Sayuran paling favorit</dd>
</dl>
</body>
</html>
Hasil :
Oke..... Sudah dulu ya...
2 Belajar HTML Bag. 3 ( Text & Font Formatting )
Keindahan dan daya tarik sebuah judul, tulisan ataupun kombinasi dari keduanya tidak hanya berasal dari isi dari konten tersebut, keindahan kombinasi warna, ukuran, jenis font dan paragraf formatting juga sangat berpengaruh. Pada bagian ini kita akan belajar melakukan formatting pada font dan text / paragraf. Disini kita akan mengunakan sample kode dan hasilnya beserta penjelasan kode-kode tesebut, agar lebih mudah dan cepat anda pahami.
Font Formatting
Untuk melakukan font formatting kita menggunakan tag font, dengan atribut sbb:
-
color
Contoh : <font color=”blue”> Font Warna Biru </font>
-
size
Contoh : <font size=”10”> Font Ukuran 10 </font>
-
face
Contoh : <font face=”verdana”> Font Verdana </font>
Penggunaan ketiga atrribut diatas dapat digabung menjadi 1 tag sbb :
<font color=”blue” size=”10” face=”verdana”> Font Formatting </font>
Selain formatting dengan tag standard font, ada beberapa tag formating lain sbb :
-
bold → Memberikan effect tebal.
-
italic → Memberikan effect miring.
-
underline → Memberikan effect garis bawah.
-
strike → Memberikan effect strike / coretan
-
big → Memberikan effect huruf besar
-
small → Memberikan effect huruf kecil.
-
code → Memberikan effect kode
-
script → Memberikan effect script
-
strong → Memberikan effect strong
-
sup → Memberikan effect superscript
-
sub → Memberikan effect subscript
Code :
<html>
<head>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
<font color=”blue”> Font warna biru </font> <br>
<font size=”10”> Font ukuran 10 </font> <br>
<font face=”verdana”> Font huruf verdana </font> <br>
<font color=”blue” size=”10” face=”verdana”> Font Formatting gabungan </font> <br>
<b> Font tebal </b> <br>
<i> Font miring </i> <br>
<u> Font garis bawah </u> <br>
<s> Font strike </s> <br>
<big> Font big </big> <br>
<small> Font small </small> <br>
<code> Font code </code> <br>
<script> Font script </script> <br>
<strong> Font strong </script> <br>
<sup> Font superscript </sup> <br>
<sub> Font subscript </sub> <br>
</body>
</html>
Hasil :
Pada contoh kode diatas saya beri tambahan tag break → <br> yang berfungsi untuk berganti baris.
Paragraph Formatting
Untuk paragraf formatting tag-tag yang disediakan sebanyak tag-tag yang digunakan untuk font formatting.
Untuk menandai sebuah text sebagai paragraph, kita harus memberikan tag <p> untuk text tersebut. Contohnya sbb:
<p> Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. </p>
Tag <p> sendiri memiliki atribut align yang nilainya dapat diberikan sbb:
-
left → Untuk membuat paragraf rata kiri.
-
right → Untuk membuat paragraf rata kanan.
-
justify → Untuk membuat paragraf rata kanan-kiri.
-
center → Untuk membuat paragraf rata tengah.
<html>
<head>
<title> Cobalihatsaja.com Tutorial </title>
</head>
<body>
<p> Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. </p>
<p align="left"> Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. </p>
<p align="right"> Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. </p>
<p align="justify"> Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. </p>
<p align="center"> Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. </p>
</body>
</html>
Hasil :
1 Belajar HTML Bag. 2 ( Basic HTML )
Setelah pada artikel sebelumnya kita berkenalan dengan HTML, pada bagian ini kita akan membahas lebih jauh. Kita akan mencoba menjalankan webpage kita dan menggunakan berbagai tag-tag basic. Ok, kita mulai dengan webpage yang paling sederhana sbb :
- Buka text editor anda (notepad / kate / lainnya)
- Lalu ketikan kode sbb :
<head>
<title> Cobalihatsaja Webpage </title>
</head>
<body>
Welcome to Cobalihatsaja.com
</body>
</html>
- Save file tersebut dengan nama index.htm
- Setelah itu browse dimana file index.htm tadi anda save, maka secara default maka file tersebut akan terbuka melalu Web Browser default yang system anda miliki, maka tampilannya akan sbb :
- Seperti anda lihat di webpage yang baru saja kita buat, dsisana terdapat Title 'Cobalihatsaja Webpage' dan pada bagian body (tampilan) terdapat text “Welcome to Cobalihatsaja.com”.
- Mengapa file tersebut diatas disimpan dengan nama index? Hal itu dikarenakan pada webserver jika mengakses root folder, maka file pertama yang dicari untuk ditampilkan adalah file dengan nama index. Sebenarnya kita dapat saja memberinya nama lain, akan tetapi jika kita meletakannya pada webserver, maka secara default tidak akan ada yang ditampilkan jika root folder kita tidak ditemukan file index tersebut.
Code :
<html>
<head>
<title> Cobalihatsaja Webpage </title>
</head>
<body bgcolor="black">
<MARQUEE>
<font color="red" size="14"> Welcome to Cobalihatsaja.com </font>
</MARQUEE>
</body>
</html>
Hasil :
Penjelasan :
- Pada bagian tag body kita menambahkan atribut bgcolor untuk merubah warna background halaman web kita, kita juga dapat menggunakan gambar sebagai background dengan menggunakan atribut background.
- Selanjutnya ada tag baru yang kita tambahkan, yaitu tag MARQUEE, tag ini digunakan untuk memberikan efek scrolling pada text. Akan tetapi penggunaan tag ini sudah mulai ditinggalkan bahkan akan dihilangkan.
- Pada bagian text kita menambahkan tag font dengan atribut color dan size untuk merubahnya menjadi berwarna merah dan berukuran 14.
Ok, saya rasa sampai disini anda sudah cukup mengerti bagaimana dasar membuat kode HTML itu sendiri dan menjalankannya.
Mudah bukan? Selamat mencoba…….
2 Belajar HTML Bag.1 ( Mengenal HTML )
HTML (Hyper Text Markup Language) merupakan kode yang digunakan untuk menyusun sebuah webpage. HTML bukan merupakan bahasa pemrograman, HTML hanya memiliki kode-kode yang digunakan menyusun sebuah webpage dalam bentuk tag (diapit oleh '<' dan '>'). HTML merupakan basic atau dasar yang harus dikuasai terlebih dahulu bagi para web programmer ataupun web designer. HTML juga dapat diibaratkan sebuah kerangka penyusun website, Didalam masing-masing kerangka tersebut kita dapat meletakan script ataupun objek-objek. Saat ini HTML yang digunakan sudah sampai versi 4.01, akan tetapi tidak lama lagi akan muncul HTML 5 yang kabarnya bakal lebih dari sekedar penyusun kerangka webpage saja, yaitu memiliki fungsi built-in scripting. Ok, disini kita hanya akan membahas HTML versi 4.01 (ngapain bahas yg HTML 5? lha wong rilis aja belum :D ).
Sebelum mempelajari HTML itu sendiri ada beberapa hal yang perlu anda ketahui :
- HTML tidak bersifat case-sensitive, akan tetapi untuk membiasakan diri dengan standar yang akan dibuat kedepannya, biasakanlah menggunakan huruf kecil untuk menuliskan kode HTML tersebut.
- File HTML dapat disimpan dengan extensi .htm maupun .html, tapi sekali lagi untuk mempersiapkan standar kedepannya, biasakanlah gunakan extensi .htm, karena .htm memiliki sifat universal application extension (extensi yang terdiri dari 3 huruf).
- Sebuah tag mulai dalam setiap kode HTML dimulai denga 2 tanda siku → <> dan diakhiri dengan tanda → </>, pengunaan format ini lebih disarankan sekalipun anda dapat menyingkatnya dengan cukup menuliskan tag dalam tanda seperti ini </>.
Apa itu TAG??
Tag merupan kode penyusun HTML yang dituliskan dalam sebuah kurung siku seperti dijelaskan diatas. Setiap tag HTML dimulai dengan tanda → <> dan diakhiri dengan tanda → </>. Contoh :
<bold> Bold Text </bold>
Pada contoh diatas kita menggunakan tag bold untuk menebalkan huruf/text yang bertuliskan 'Bold Text'. Seperti anda lihat diatas, penggunaan tag bold juga diakhiri dengan tag bold yang meiliki tambahan back-slash yang menandakan tak penutup. Dalam setiap tag HTML anda dapat menambahkan atribut agar tag yang anda gunakan dapat memenuhi kebutuhan anda. Misalanya anda ingin membuat sebuah text beruliskan 'coba lihat saja' dengan jenis huruf verdana, ukuran font 4 dan berwarna merah, maka anda dapat memanfaatkan tag <font> dan mengkostumasinya dengan merubah nilai atribut yang dimiliki tag tersebut. Untuk lebih jelasnya lihat contoh berikut :
<font face=”verdana” size=”4” color=”red”> coba lihat saja </font>
Seperti anda lihat, disana kita menggunakan tag font dan mengcostumize atribut face, size dan color.
Struktur Dasar HTML
Sebuah file HTML minimal memiliki tag html dan body sebagai penyusunnya. Akan tetapi untuk praktik yang baik, minimal kita gunakan tag html, head, title dan body sebagai penyusun sebuah file html.Lalu apa kegunaan dari tag-tag tersebut??
- <html>
adalah tag dasar/root dari sebuah file html untuk menyatakan dimulainya kode html itu sendiri.
- <head>
adalah tag yang berisi info tentang file html itu sendiri diletakan.
- <title>
adalah tag yag digunakan untuk mendefinisikan title atau judul sebuah file html.
- <body>
adalah tag dimana anda meletakan berbagai macam tag-tag html lainya ataupun sekedar text biasa yang akan kita sajikan atau kita tampilkan.
Berikut contoh sebuah file HTML yang sederhana :
<html>
<head>
<title> Cobalihatsaja Webpage </title>
</head>
<body>
Welcome to Cobalihatsaja.com
</body>
</html>
Editor
Untuk membuat sebuah file HTML anda tidak memerlukan editor khusus, akan tetapi cukup menggunakan text editor biasa (contoh : Notepad (Windows) dan Kate (Linux Kubuntu) ). Sesungguhnya banyak sekali editor HTML dari yang gratis maupun berbayar dengan menawarkan kemudahan menyusun sebuah file HTML tanpa perlu melakukan coding, akan tetapi alakngkah lebih baiknya kita mempelajarinya benar-benar dari dasar HTML itu sendiri, yang pastinya akan banyak hal positif dan keuntungan yang kita dapatkan.
Sekian dulu ya….
0 PhotoShop : Membuat Efek Foto Dengan Teks
Langsung mulai…..
Siapkan Foto ya, kira-kira seperti ini:
Jika kita lihat dalam panel Layers (palet), kita melihat bahwa kita saat ini memiliki hanya satu lapisan dalam dokumen Photoshop kita. Lapisan ini, bernama Latar Belakang, adalah lapisan yang berisi gambar kami. Kita perlu menambahkan lapisan kosong baru diatas layer latar belakang, dan kita dapat melakukannya dengan mengklik ikon New Layer di bagian bawah panel Layers:
Klik pada icon New Layer pada panel Layers (palet).
Tidak akan terjadi apa-apa di jendela dokumen, tapi panel Lapisan sekarang menunjukkan lapisan baru nongkrong diatas layer Background. Photoshop secara otomatis member nama "Layer 1". Jika kita lihat dalam thumbnail preview lapisan untuk di sebelah kiri nama layer, kita melihat pola kotak-kotak abu-abu dan putih, mirip Sarung.
Selanjutnya, kita perlu mengisi lapisan baru kami dengan hitam. Pergilah ke menu Edit di bagian atas layar dan pilih perintah Fill:
Pilih perintah Fill dari menu Edit.
Tombol ini akan menampilkan Photoshop dialog, memberi kita cara mudah untuk mengisi lapisan atau seleksi dengan warna solid atau pola, kita pilih Black, Pilih dari daftar di sebelah kanan Gunakan kata di bagian Fill di bagian atas kotak dialog:
Klik OK untuk keluar dari kotak dialog dan Photoshop akan mengisi "Layer 1" dengan hitam.
Foto sementara menghilang di balik warna hitam solid.
Selanjutnya, kita akan menambahkan teks !
Tekan huruf T pada keyboard untuk memilih dengan cepat dengan atau klik di panel sebelah kiri:
Pilih type huruf, ukuran dan pilih warna putih
Tambahkan teks yang cukup untuk mengisi seluruh dokumen dari atas ke bawah.
Untuk keluar dari modus edit teks, klik pada tanda centang kecil di Bar Pilihan:
Untuk mengaktifkan Photoshop dokumen kita yang penuh teks ke foto kita, kita harus menambahkan lapisan masking ke lapisan teks. Jika kita melihat pada panel Layers, kita melihat bahwa kita sekarang memiliki tiga lapisan, dengan lapisan teks kita berada di atas dua lapisan lainnya. Untuk menambahkan layer mask untuk layer, klik ikon Layer Mask di bagian bawah panel Layers:
Pastikan lapisan teks yang dipilih (disorot dengan warna biru) pada panel Layers, kemudian klik pada icon Mask Layer.
Tidak akan terjadi namun dalam jendela dokumen, namun layer mask thumbnail akan muncul di sebelah kanan dari thumbnail preview .
Kami sekarang akan membuat efek kita, dengan menyalin dan menyisipkan foto kita langsung ke lapisan masking. Klik pada lapisan background pada panel Layers untuk memilihnya. Anda akan melihatnya menjadi disorot dengan warna biru.
Tekan Ctrl + A, pada baground, kita akan melihat garis seleksi muncul di sekitar tepi dokumen, menunjukkan bahwa seluruh lapisan sekarang dipilih, Lalu tekan Ctrl + C, tahan Alt dan klik pada thumbnail layer mask di layer teks pada panel Layers:
Klik pada thumbnail layer mask sambil menekan Alt ,Tekan Ctrl + V untuk menyisipkan foto langsung ke lapisan.
Lihat perubahannya.
Teks sekarang menutupi foto.
Jika Anda puas dengan hasil pada saat ini, Anda dapat melewati ini beberapa langkah terakhir, tetapi jika Anda menemukan bahwa efek yang terlihat sedikit, terlalu gelap pastikan layer teks yang dipilih pada panel Layers, kemudian tekan Ctrl + untuk menduplikat layer. Salinan layer teks akan muncul di atas yang asli:
Dan gambar sekarang akan terlihat sedikit lebih terang:
Efeknya muncul lebih cerah setelah kita menduplikasi layer teks.
Jika anda merasa masih terlalu gelap, cukup duplikat layer teks kedua kalinya. Atau, bila Anda menemukan bahwa sekarang agak terlalu terang, Anda dapat mengaturnya dengan menurunkan opacity layernya. Anda akan melihat pilihan Opacity di bagian atas panel Layers. Semakin rendah nilai opacity dari lapisan teratas, akan membuat layer yang di bawah akan memiliki efek gelap. Saya akan menurunkan opacity lapisan teks saya sekitar 65% hanya untuk membuatnya sedikit gelap.
Dan hasil akhirnya…..
Harap maklum.... baru belajar nih
Selamat Mencoba….