Lab TKJ: Internet

Tampilkan postingan dengan label Internet. Tampilkan semua postingan

Minggu, 03 Februari 2013

Cara Install Jaringan Warnet dan Billing secara Wirless

Tunggu Besok ^_^

Read more »»

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

Rabu, 23 Januari 2013

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

Konvigurasi DNS Melalui Debian

Konfigurasi DNS Menggunakan Linux debian etch. 1. Langkah Pertama adalah Install paket DNS terlebih dahulu 2. # apt-get install bind9 Enter

Praktikum Instalasi DNS Debian Etch.

3. Bila Proses Intalasi Paket sudah selesai selanjutnya adalah melakukan pengeditan pada beberapa file yang ada hasil dari proses instalasi 4. Silahkan Masuk Ke direktori Instalasi Bind9 di “/etc/bind9” dengan cara 5. # cd /etc/bind9 Enter

6. Kemudian Buka File named.conf.local dengan cara 7. # pico named.conf.local Enter

Praktikum Instalasi DNS Debian Etch.

8. Edit File tersebut Seperti tampak pada gambar di bawah ini :

9. langkah selanjutnya adalah Copy Isi file db.local menjadi 2 file yaitu file Zona dan File PTR dengan cara 10. #cp db.local smknxx.zone Enter dan # cp db.local smknxx.ptr Enter

Praktikum Instalasi DNS Debian Etch.

11.Buka file smknxx.zone dengan cara #pico smknxx.zone Enter 12.kemudian Edit isinya seperti tampak pada gambar di bawah ini

13.Buka File smknxx.ptr dengan cara # pico smknxx.ptr Enter 14.Kemudian edit isinya seperti tampak pada gambar

Praktikum Instalasi DNS Debian Etch.

15. Edit file resolv.conf di direktori /etc dengan cara 16.# pico /etc/resolv.conf Enter 17.Edit File tersebut sesuai Keperluan (IP address disesuaikan) Tampak pada gambar di bawah ini

18.Silahkan Restart Service Bind Untuk Mengaktifkan Hasil Konfigurasi

Praktikum Instalasi DNS Debian Etch.

19.Untuk Melihat hasil Konfigurasi Yang telah kita lakukan berhasil atau tidak seilahkan lakukan pengujian dengan cara mengetikan 20. # dig smknxx.school Enter Maka akan tampak seperti dibawah ini

20.#nslookup smknxx.school Enter 21.hasil tampilan seperti tampak pada gambar

Praktikum Instalasi DNS Debian Etch.

22.Lakukan Ping pada nama domain yang dibuat

23.Bila tampilan sudah sesuai dengan gambar maka settingan DNS anda telah berhasil 24.Selamat Mencoba

Read more »»

Installasi DNS

Instalasi DNS

1. Setting IP Address (Interfaces) a. Cek status Network Interfaces ifconfig

b. Setting file “Interfaces” pico /etc/network/interfaces

[KETIKAN] auto lo iface lo inet loopback

auto eth0 allow-hotplug eth0 iface eth0 inet static address 192.168.10.1 netmask 255.255.255.252

[SAVE]

c. Restart Networking /etc/init.d/networking restart

d. Sumber Belajar http://www.debian.org/doc/manuals/debian-reference/ch05.en.html 2. Setting CD di apt-get a. Aktifkan CD di VMware Pastikan CD telah aktif dan berisi DVD debian 5.

b. Setting apt-get repository apt-cdrom add

3. Instalasi bind9 a. Install bind9 apt-get install bind9

b. Berpindah ke direktori bind9 cd /etc/bind

c. Backup file “named.conf” cp named.conf named.conf.backup

4. File: named.conf pico named.conf

[KETIKAN sebelum include “/etc/bind/named.conf.local”]

zone "nol.com" { type master; file "/etc/bind/db.nol"; }; zone "10.168.192.in-addr.arpa" { type master; file "/etc/bind/db.nol.rev"; };

[SAVE]

5. File: db.nol a. Gandakan file db.0 menjadi db.nol cp db.0 db.nol

b. Setting file db.nol pico db.nol

[EDIT seperti Gambar di Bawah ini]

[SAVE]

6. File: db.nol.rev a. Gandakan file db.0 menjadi file db.nol.rev cp db.0 db.nol.rev

b. Setting file db.nol.rev pico db.nol.rev

[EDIT seperti Gambar di Bawah ini]

[SAVE]

7. File: resolv.conf pico /etc/resolv.conf

[GANTI menjadi]

[SAVE]

8. Restart bind9 /etc/init.d/bind9 restart

9. Test DNS

nslookup nol.com

nslookup 192.168.10.1

Read more »»

Selasa, 27 November 2012

Membuat Jaringan dengan Teknologi Wireless

Mau buat jaringan sendiri untuk melakukan sharing? tapi gak ada kabel UTP nya. tenang saja, gak jadi masalah, sekarang teknologi wireless bisa di gunakan untuk membuat jaringannya

Ini Langkang-langkahnya :