Lab TKJ

Minggu, 03 Februari 2013

Cara Install Jaringan Warnet dan Billing secara Wirless

Tunggu Besok ^_^

Rabu, 30 Januari 2013

Tips Trick HTML

Menghilangkan garis bawah pada link

Cukup anda tambahkan script berikut pada bagian awal text/HTML anda :

<html>
<head>
<style type=”text/css”>
<!–
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
–>
</style>
<title> Judul </title>
</head>
<body>

</body>
</html>

Membuat link dalam satu halaman

Misalnya : ‘sumber’ akan dilink ke ‘tujuan’ dimana masih dalam satu halaman
Konfigurasi text/HTML pada bagian sumber :
<a href=”#tujuan”>sumber</a>

Konfigurasi text/HTML pada bagian tujuan :
<a name=”tujuan”>tujuan</a>

Membuat halaman web menjadi lebih baik

Aspek yang diukur dari suatu halaman web adalah proses loading yang cepat, tampilan yang menarik, dan kemudahan dalam navigasi. Saya akan membahas satu persatu.

Kecepatan Proses Loading
Sebuah halaman standar tanpa grafik, seharusnya saat loading tidak lebih dari 3 sampai 7 detik. Untuk meload sebuah grafik seharusnya tidak boleh lebih dari 9 detik. Jadi total halaman dengan grafik adalah sekitar 15 detik. Sebagai contoh yang baik yahoo.com, halaman utama mereka diload sekitar 8 detik dengan modem 28.8k.
Untuk mengurangi waktu tersebut, anda perlu berpikir ekstra. Sebagai contoh, jangan meletakkan animasi flash berlebihan, background terang, lebih dari tiga banner dalam satu halaman, dsb. Banyak pengguna internet yang mempunyai desain tampilan yang menarik dan isi yang bagus.
Juga kurangi ukuran dari image anda, banyak image tampak sama walaupun anda telah mengurangi separuh dari warnanya. Anda bisa menggunakan software seperti Paint Shop Pro atau Photoshop.

Tampilan yang Menarik
Jangan sampai menaruh banner lebih dari tiga dalam satu halaman, siapa orang yang mau melihat banyak banner dalam satu halaman.
Kedua, bila halaman anda penuh berisi text jangan sampai membuat background dengan grafik atau image karena hal ini menyebabkan text sulit dibaca.
Ketiga, hindari background berwarna hitam, kecuali halaman anda berhubungan dengan horror atau misteri. Background hitam juga mempunyai kesan ‘negatif’ bagi halaman anda.

Kemudahan dalam Navigasi
Halaman anda harus jelas, jangan menggunakan tabel atau frame yang berbatas. Gunakan warna yang sejuk bagi mata. Juga jangan meloncat tiba-tiba dari halaman yang gelap ke halaman yang super terang. Berilah keterangan pada bagian yang sekiranya sulit atau susah dimengerti. Berilah beberapa option ketika pertama kali pengunjung masuk tetapi jangan berlebihan. Buatlah menu dan submenu serta jangan meletakkan apapun pada suatu menu yang besar. Cobalah untuk tidak mengharuskan pengunjung untuk mengklik pada banner,iklan dan sebangsanya, lebih baik anda gunakan kata2 ‘Click on our sponsor’
Letakkan posisi diri anda sebagai seorang pengunjung, pelajari apa yang mungkin mereka sukai dan yang tidak. Bertindaklah sebagai seorang human ketika anda menerangkan dalam text, bukan sebagai buku. Selanjutnya tunjukkan pada pengunjung bahwa anda selalu memeriksa halaman anda dan yakinkan bahwa mereka harus kembali lagi pada lain waktu.

Sebagai kesimpulan, untuk membuat halaman menjadi lebih baik :
1. Jangan meletakkan animasi atau image berlebihan
2. Jangan menggunakan background image
3. Isi yang bermutu
4. Jangan menggunakan lebih dari tiga banner dalam satu halaman
5. Hindari menggunakan background hitam
6. Kurangi ukuran image dengan mengurangi warna
7. Gunakan desain yang sama dalam setiap halaman anda
8. Jangan menggunakan tabel atau frame berlebihan
9. Gunakan menu dan submenu yang sistematis
10. Gunakan pendekatan personal, seolah anda tahu pengunjung
11. Letakkan posisi anda sebagai seorang pengunjung

Bila anda mempunyai kritik dan pertanyaan, silakan kirim mail

Membuat link e-mail dengan subject sudah terisi

Normalnya link e-mail akan berbentuk seperti :
mailto:A%20HREF=”mailto:email@domain.com”kirim e-mail !</A>

Supaya bila diklik langsung berisi subject maka perlu diubah seperti :
mailto:A%20HREF=”mailto:email@domain.com?Subject=subject e-mail”kirim e-mail !</A>

Membuat daftar list

Misalnya, anda ingin membuat list sbb :

1. text 1
2. text 2
3. text 3
4. text 4

maka dalam text/HTML anda ditulis sbb :

Anda bisa menulis <LI> sebanyak anda inginkan asal diawali <OL> dan diakhiri </OL>.
Atau anda bisa juga menggunakan <UL> dan </UL> yaitu ‘Unordered List’ seperti :

text 1
text 2
text 3
text 4

Dengan menulis dalam text/HTML sbb :

Membuat text background dengan warna lain

Feature ini hanya bekerja pada Netscape 4 ke atas dan IE 4 ke atas.
Untuk membuat text background dengan warna lain, cukup anda ketik :

<SPAN STYLE=”background:COLOR”>Tulisan</SPAN>

Dimana COLOR adalah warna (red, yellow, green, black, dsb) dan Tulisan adalah text yang diinginkan.
Contoh : Irwanto Mursetiono

Membuat warna menyala pada link saat mouseover

Hanya bekerja pada IE 4 ke atas.
Dengan script tambahan seperti di bawah maka saat mouseover/pointer mouse ada di atas atau melewati tulisan yg ada, tulisan tersebut akan menyala dengan warna
lain :

Dimana LINKCOLOR, VISITEDCOLOR, dan HOVERCOLOR adalah warna (red, yellow, green, black, dsb)

Membuat tombol ‘Go Back’ dengan javascript

Cukup dengan script sederhana berikut :

Anda akan memperoleh seperti ini :

Dimana tombol ini berfungsi untuk kembali ke halaman sebelumnya.

Konfigurasi warna

Warna dalam text/HTML diqtur dengan menggunakan kode heksadesimal, seperti : #RRGGBB
Disini, RR, GG, dan BB adalah digit heksadesimal mewakili warna Red, Green, dan Blue.
Sebagai contoh :

black = #000000
blue = #0000FF
red = #FF0000
yellow red = #FF4500
white = #FFFFFF

Warna-warna standar yang ada adalah :
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, dan yellow.

Read more »»

Selasa, 29 Januari 2013

Instal Windows

Saya membuka Layanan Installasi windows XP, 7, & 8, minat hubunngi atau sms di 087754356087 untuk wilayah pasuruan cukup dengan biaya 50 ribu

Read more »»

Perbedaan Aktivasi Windows 8 permanent secara Legal dan Pakai Crack Alias Ilegal

Menurut pengalaman saya selama ini, Ada pebedaan yang cukup mendalam antara akitivasi windows 8 secara permanent atau dengan crack,. Mungkin anda bertanya-tanya kenapa Suatu perusahaan besar seperti microsoft mempunyai celah untuk di bobol, jawabannya cukup lah mudah, mereka mempunyai misi agar semua orang mengenal lebih dalam tentang Windows 8 nya, kemudian lama-lama akan jadi terbiasa, tidak menuntut kemungkinan suatu saat nanti Windows 8 yang di aktivasi melalui crack akan kembali seperti semula, yaitu not genuine, sehingga orang sudah terbiasa windows 8 akan merelakan uang untuk membeli Produck Windows yang Original, itu bagi orang yaang mampu, tapi bagi orang yang tidak mampu seperti kita pasti kebingunangan. Tapi pihak windows memberikan kesempatan untuk aktivasi secara legal, tapi sayangnya Batas waktu serial number gratis hanya sampai akhrjanuari, . Tinggal bagaimana kita mengikuti langkah-langkahnya dengan benar sehingga windows dapat teraktivasi, kalau gak mau ribet, saya menyediakan jasa Untuk installasi windows 8 permanen secara legal, cukup hanya dengan tarif 50 ribu, minat hubung 087754356087 terutama untuk daerah pasuruan

Perbedaan
Windows 8 Permanen Legal
- Tidak akan merusak file karna tidak terdeteksi virus
- Akan aktif selamanya walaupun melakukan Update Windows

Windows 8 Peramanen dengan Crack
-File banyak yang corup karena Terdeteksi Virus
-Pihak microsoft akan mengetahui bahwa aktivasi yang anda gunakan tidak legal apabila melakukan update, sedangkan Windows 8 sendiri sangat susah untuk tidak melalukukan update walaupun sudah di nonaktifkan

bagi anda yang kurang setuju mohon maaf, karena semua ini berdasarkan pengalaman saya

Angga Prayogo

Read more »»

Jumat, 25 Januari 2013

LostSaga Season 3

Kabar baik bagi para pejuang LostSaga, kini Lostsaga Update terbaru yaitu Lostsaga season 3, Mode yang semakin seru. Yang menariknya lagi, kini Lostsaga bisa di jalankan pada OS Windows 8, jadi bagi para pengguna OS Windows 8 tak perlu kebingungan lagi

Saya saranin bagi pengguna OS Windows 8 mending download yang full client. ^_^

Download LostSaga Season 3 Full Client

Download LostSaga Full Path

Read more »»

Rabu, 23 Januari 2013

Perfomatan Text HTML

Teks dalam dokumen web dapat diformat secara khusus untuk menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Perbedaan ditampilkan dalam bentuk huruf tebal, miring, digarisbawahi,dll.

3.1 Pemformatan Teks • Menebalkan huruf (bold) • Memiringkan huruf (italic) • Digarisbawahi • Mengecilkan huruf • Superscript • Subscript

Contoh – Listing 3.1: formatteks.html <html> <head> <title>Format Teks</title> </head> <body> <p><b>Tulisan ini ditebalkan (bold)</b></p> <p><strong>Tulisan ini ditebalkan (strong)</strong> </p> <p><em>Tulisan ini miring (emphasize) </em></p> <p><big>Tulisan ini besar (big)</big></p> <p><i>Tulisan ini miring (italic) </i></p> <p>Tulisan ini <sub>subscript</sub> </p> <p>Tulisan ini <sup>superscript</sup></p> </body> </html>

Gambar 3.1. Contoh formatteks.html

Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

3.2 Teks Preformat Tag <pre> dan </pre>dapat kita gunakan untuk menampilkan sesuai dengan dokumen web tersebut dalam editor teks. Contoh – Listing 3.2 : pre.html <html> <head> <title>Tag Preformatted</title> </head> <body> <pre> This section provides a brief overview of the menus in Dreamweaver. The File menu and Edit menu contain the standard menu items for File and Edit. menus, such as New, Open, Save, Save All, Cut, Copy, Paste, Undo, and Redo </pre> <pre> Ini adalah preformatted text. Menampilkan spasi Dan line break apa adanya. </pre> <p>Tag PRE cocok digunakan untuk menampilkan kode bahasa pemrograman komputer :</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html>

Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

Gambar 3.2. Contoh pre

3.3 Quotation Tag <blockquote> digunakan untuk membuat sebagian teks yang dikutip sebagai suatu blok sendiri. Kebanyakan browser umumnya menggunakan margin untuk kutipan teks tadi untuk memisahkan dari teks yang mengelilinginya. Contoh – Listing 3.3 : quotation.html <html> <head> <title>quotation</title> </head> <body> tulisan ini BUKAN quotation <blockquote> tulisan ini adalah quotation <br> tulisan ini adalah quotation <br> tulisan ini adalah quotation <br> </blockquote> </body> </html>

Gambar 3.3. Contoh qoutation

3.4 Tag-tag Pemformatan Tag Awal Keterangan <b> Mendefinisikan teks yang ditebalkan <big> Mendefinisikan teks yang besar ukurannya <em> Mendefinisikan teks yang ditekankan <i> Mendefinisikan teks yang dimiringkan – italic <small> Mendefinisikan teks yang dikecilkan ukurannya

Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

<strong> Mendefinisikan teks yang ditebalkan <sub> Mendefinisikan teks yang dijaikan subscript <sup> Mendefinisikan teks yang superscript <pre> Mendefinisikan teks preformatted <blockquote> Mendefinisikan quotation yang panjang.

3.5 Toolbar Dreamweaver untuk pemformatan teks

Gambar 3.4. Toolbar format teks

Keterangan : • B : Bold • I : Italic • S : Strong • Em : Emphasize • [“”] : Blockquote • PRE : Pre

Read more »»

Pengenalan HTML

2.1 Dokumen HTML HTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan teks editor. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam web browser. Ada dua cara untuk membuat web page, denghan HTML editor atau editor text biasa (misal : notepad). Untuk latihan buku ini kita menggunakan Macromedia Dreamweaver.

2.2 Penamaan Dokumen Dokumen HTML diberi nama sembarang kemudian diberi tambahan ekstensi ”.htm” atau ”.html”

2.3 Definisi Elemen Dokumen HTML disusun elemen-elemen atau komponen dasar pembentu HTML. Contoh dari elemen dokumen HTML adalah : head , body, table, paragraf, list.

2.4 Definisi Tag Tag digunakan untuk menandai elemen dalam suatu dokumen HTML. Tag HTML terdiri atas sebuah sudut kiri (<, tanda lebih kecil), nama sebuah tag, dan sebuah tanda kurung sudut kanan (>, tanda lebih besar. Tag umumnya berpasangan, sebagai contoh <H1> Dengan </H1>. Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan : <namatag> - </namatag>

2.5 Elemen HTML yang diperlukan Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag <html>,<head>, dan <body>.Setiap dokumen terdiri atas tag head dan body. Elemn Head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang akan ditampilkan di browser. Secara umum dokumen web dibagi menjadi dua section, yaitu section head dan section body. Sehingga setiap dokumen HTML harus mempunyai pola sebagai berikut : <html> <head> -- Informasi tentang dokumen HTML </head> <body> -- Informasi yang akan ditampilkan dalam web browser </body> </html>

Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

Setiap dokumen html harus diwali dengan menuliskan tag <html> dan tag </html> di akhir dokumen. Tag ini menandai dokumen HTML yang berarti adalah dokumen HTML dalam satu dokumen hanya ada satu elemen html. Section atau elemen head ditandai dengan tag <head> diawal dan tag </head> diakhir. Section ini beiris informasi tentang dokumen HTML, mislnya informasi judul html yang ditandai dengan tag <title> dan diakhiri dengan tag </title>. Section body ditandai dengan tag <body> dan diakhiri dengan tag </body> diakhir. Section body merupakan isi dokumen yang akan ditampilakn pada browser.

Contoh – Listing 2.1 : contoh1.html <html> <head> <title>Belajar Web Design</title> </head> ini adalah halaman HTML <body> </body> </html>

Gambar 2.1. Contoh hasil di browser

Penjelasan Contoh Tag pertama pada dokumen html anda adalah <html>,. Tag ini memberi tahu bahwa ini adalah awal dari dokumen HTML. Tag terakhir pada dokumen anda adalah </html>. Tag ini memberi tahu browser bahwa ini adalah akhir dari dokuemn HTML. Teks antara <head> dan </head> adalah informasi header. Informasi header tidak ditampilkan pada window browser. Hanya teks yang berada diantara <body> dan </body> yang akan ditampilakan pada browser. Teks diantara <title> dan </title> adalah judul dokumen yang akan ditampilakn pada window caption.

2.6 Penggunaan Tag • Tag HTML diapit dengan dua karakter kurung bersudut, < dan >. • Tag HTML secara normal selalu berpasangan seperti <H!> dengan </H1> • Tag HTML tidak ‘case sensitive’, berarti <H1> dama dengan <h1>

Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

2.7 Atribut Tag Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan. Tag berikut tidak mempunyai atribut : <body>. Tag <body> ini tidak menggunakan atribut, sehingga dokumen HTML ditampilkan dengan warna background sesuai dengan definisi warna background pada browser webnya. Umumnya berwarna putih. Tag berikut mempunyai atribut : <body bgcolor=”red”>. Tag <body> ini mempunyai atribut bgcolor dengan nilai “red’. Sehingga background akan menampilkan warna merah.

2.7.1 Tag HTML Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan keharusan untuk membuat dokumen HTML.Tag <html> sebagai pembuka dokumen HTML dan tag </html> sebagai penutup dokumen HTML. Contoh – Listing 2.2: <html> ........................ </html>

2.7.1 Tag Head Merupakan tag setelah <html> untuk menuliskan keterangan tentang dokumen HTML. Isi teks diantara <head> dengan </head> tidak akan ditampilkan di dalam browser. Contoh – Listing 2.3: <head> <title>Belajar Web Design</title> </head>

2.7.2 Title Merupakan tag yang digunakan untuk menuliskan judul dokumen HTML. Hasil tag ini akan ditampilkan dalam window caption browser. Contoh – Listing 2.4: <title>Belajar Web Design HTML</title>

2.7.3 Body Merupakan section dalam dokumen HTML yang akan ditampilkan dalam browser. Contoh – Listing 2.5: <html> <head> <title>Belajar Web Design</title> </head>

Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

<body> ini adalah section HTML yang ditampilkan di browser </body> </html>

2.7.4 Paragraf

agraf harus dimulai dengan memberi tag <p>. Diakhir paragraf tidak

diharusk

Setiap par an menuliskan </p> sebagai akhir paragraf, karena tag <p> tidak didefinisikan mempunyai tag akhir. Setiap paragraf harus dimulai dengan <p> kembali. Setiap pergantian paragraf ditandai dengan tag <p> Contoh – Listing 2.6: <html> <head> <title>Tag Paragraf</title> </head> <body> <p>berikut ini adalah paragraf 1</p> <p>berikut ini adalah paragraf 2</p> <p>berikut ini adalah paragraf 3</p> </body> </html>

Contoh - Listing 3.7 : paragraf2.html <html> <head> <title>Paragraf</title> </head> <body> <p>Pada tahun 1950-an Kolonel Sanders (pendiri KFC) mulai mengendarai mobilnya dari kota ke kota untuk memulai bisnis KFC- nya, dengan cara menawarkan resep rahasianya dari satu restoran ke restoran yang lainnya. Kadang beliau tidur di dalam mobilnya dan memakan ayam buatannya sendiri untuk bisa bertahan. Dia baru dapat mencapai tujuannya setelah bertemu dengan orang yang ke- 1010. Orang tersebut berpikir ayam Kolonel tersebut cukup bagus untuk di jual ke publik </p> <p>Contoh lainnya Thomas Alfa Edison yang mengalami kegagalan sebanyak 9000 kali sebelum akhirnya ia menemukan bola lampu. Dia tidak menyesal dengan kegagalan-kegagalannya, bahkan ia berkata beruntung menemukan 8999 cara yang salah dalam membuat bola lampu. Kemudian ia dapat membuat 1093 paten, orang yang paling banyak memegang paten dalam sejarah Amerika</p> </body> </html>

Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

Gambar 2.2. Contoh hasil paragraf2.html

2.7.5 Line Break Kita dapat memaksa ganti baris pada dokumen web dengan tag <br>. Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf. Contoh – Listing 2.7: <html> <head> <title>Ganti Baris</title> <head> <body> ini adalah baris ke 1<br> ini adalah baris ke 2<br> ini adalah baris ke 3<br> ini adalah baris ke 4<br> ini adalah baris ke 5<br> </body> </html>

2.7.6 Heading Tag heading aklan membuat tulisan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading dimanfaatkan untuk menandai judul topic atau untuk menunjukkan tingkat keberartian dati teks yang akan dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan 6. Nomor 1 merupakan heading yang terbesar. Contoh – Listing 2.8: <html> <head><title>Heading</title></head> <body>

Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>

Gambar 2.3. Contoh heading

2.7.7 Garis Pembatas Sebuah garis pembatas dapat disisipkan dalam dokumen web dengan menggunakan tag <hr> Atribut Keterangan Align Menentukan letak garis : center,left,right Color Menentukan warna garis Size Menentukan ukuran garis Width Menentukan tebal garis

Contoh – Listing 2.9: <html> <head> <title>Horizontal Rule</title> </head> <body> <p align=”center”>Paragraf pertama</p>

Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

<hr align=”center” color=”#0000FF” size=”3” width=”90%”> <p align=”center”>Paragraf keduapertama</p> </body> </html>

Gambar 2.4. Garis Pembatas

2.7.8 Komentar Dalam sebuah dokumen HTML ada informasi yang berfungsi sebagai catatan atau komentar terhadap dokumen isi komentar ini tidak akan ditampilkan dalam browser. Untuk membuat komentar dengan menggunakan tag:  sebagai akhir komentar. Contoh – Listing 2.9: <html> <head> <title>Horizontal Rule</title> </head> <body>  <p>Tulisan ini akan ditampilkan di browser</p> </body> </html>

2.8 Toolbar Dreamweaver untuk dasar HTML Macromedia Dreamweaver sebagai salah satu aplikasi untuk membuat dan mengembangkan web menyediakan toolbar untuk semua tag dasar HTML. Perhatikan gambar 2.5 dan gambar 2.6 yang menunjukkan toolbar untuk dasar HTML.

Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

Gambar 2.5. Toolbar tab Text

Keterangan - tab Text : • h1 : heading 1 • h2 : heading 2 • h3 : heading 3 • br : Line Break • p (dibalik) : Paragraf

Gambar 2.5. Toolbar tab Comment

Keterangan – tab common : terdapat toolbar untuk tag komentar

Read more »»