Belajar HTML, sebernarnya diperlukan kalau kita ingin terjun di dunia online, misalnya bisnis online karena sedikit banyak akan menuntut kemampuan kita dalam mengedit kode - kode HTML. Walaupun kita menggunakan blog engine seperti Wordpress yang mempunyai plugin - plugin yang lengkap, namun sering ditemui kita harus mengedit sidebar, menempatkan kode HTML, mengedit kode warna HTML, menempatkan tabel dan banyak kasus lainnya kita harus menguasai dasar - dasar kode atau script HTML.

Untuk belajar HTML anda tidak perlu membeli modul khusus cara membuat kode HTML, dengan membaca artikel berikut ini saja anda sudah bisa belajar HTML sesuai keperluan anda untuk mengedit website anda. Pengertian HTML secara awam seperti saya adalah serangkaian kode - kode bahasa pemrograman yang digunakan untuk membangun website yang akan membentuk halaman - halaman situs setelah dionlinekan ke internet.

Untuk mempermudah pengertian anda dalam belajar HTML, di sini juga akan saya berikan contoh penerapan kode atau script HTML sehingga anda dapat mengikutinya dengan praktek pula. Bagi anda yang masih pemula, langsung saja kita lihat pembahasan kode HTML berikut ini :

Struktur kode HTML yang harus selalu ada di setiap halaman situs adalah:

<html>

<head>

<title>Tulis Judul Anda di Sini</title>

</head>

<body>

Di sini adalah konten / isi halaman anda

</body>

</html>

Latihan 1. Belajar membuat halaman sederhana dengan kode HTML

Sebagai bahan untuk belajar HTML, sekarang buka program Notepad anda. Caranya klik " start " pilih program, cari program Notepad, jika sudah anda buka kemudian tuliskan kode - kode HTML di bawah ini :

<html>

<head>

<title>Modul Belajar HTML</title>

</head>

<body>

_{Modul HTML ini berisi latihan - latihan sederhana untuk beljar membuat sebuah halaman website agar dapat online di internet. Bagi anda yang masih pemula sebaiknya mengikutinya dengan memparaktekkan secara langsung agar lebih mudah dalam memahami setiap variasi kode - kode HTML.}

</body>

</html>

_{Setelah selesai menuliskan kode - kode HTML di atas kemudian anda simpan. Caranya : klik " file " kemudian pilih " save as " tentukan lokasi penyimpanan, misalnya pada folder " latihan " di " my document " , pada " file name " tulis nama file misalnya " latihan1.html " pada save as type isikan " all file " kemudian klik " save ".}

_{Untuk mengetahui hasilnya pada browser, caranya sebagai berikut :}

_{Cari file " latihan1.html " yang anda simpan pada folder " latihan " di " my document " , setelah ketemu kemudian klik kanan, pilih " open with " lalu pilih browsernya misalnya " internet explorer " maka hasilnya akan tampak seperti gambar di bawah ini :}

DENGAN LANGKAH - LANGKAH SEPERTI DI ATAS COBA ANDA PRAKTEKKAN LATIHAN - LATIHAN SELANJUTNYA

Latihan 2. Belajar membuat link atau tautan dengan kode HTML :

misalnya : kata yang terlihat dalam link ( ancor text ) adalah "cara membuat website"

sedangkan alamat/URL dari halaman yang dituju tersebut adalah http://edyutomo.com/internet-dan-komputer/cara-membuat-website

maka kode HTML nya adalah :

<a href="http://edyutomo.com/internet-dan-komputer/cara-membuat-website">cara membuat website</a>

_{hasilnya adalah cara membuat website}

Latihan 3. Belajar kode warna HTML untuk mengedit warna teks :

kata yang diedit, ini akan mengubah warna teks menjadi merah.

Lihat contoh berikut ini :

Modul HTML ini berisi latihan - latihan.....

hasilnya akan tampak sebagai berikut :

belajar membuat halaman situs dengan kode html

Latihan 4. Kombinasi kode warna HTML, paragraf baru, ukuran huruf dan jenis huruf :

kata yang diedit

ini akan membuat paragraf menjadi rata kiri, dengan jenis huruf arial, ukuran 6 dan warna teks menjadi merah.

Lalu bagaimana untuk membuat warna menjadi warna campuran, ah... itu gampang. Caranya anda buka photoshop, lihat gambar di bawah :

klik kotak merah yang saya lingkari, kemudian akan muncul kotak dialog color picker, lalu cari warna yang anda inginkan, lalu copy code warna yang ada di bawah ( saya tandai ), setelah itu anda paste pada kode warna HTML untuk mengedit warna.

Contoh : color="#ed260b"

mudah - mudahan jelas ya.

Kode HTML lainnya :

isi paragraf , untuk membuat paragraf baru

isi kalimat , untuk membuat baris baru

kata/kalimat , untuk membuat teks tebal

kata/kalimat , untuk membuat kata miring

kata/kalimat , untuk membuat garis bawah

Latihan 5. Belajar cara menyisipkan gambar dengan kode HTML :

Sebelum kita menyisipkan gambar, terlebih dahulu kita harus mengupload foto atau gambar untuk mendapatkan link dari gambar tersebut untuk keperluan menyisipkan gambar yang telah kita tentukan. Lihat cara upload foto atau gambar.

sebagai contoh saya telah mengupload gambar pada situs image hosting http://photobucket.com, sehingga saya mendapatkan url link gambar seperti berikut ini :

http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif

Sebagai contoh, lihat ilustrasi contoh penerapan kode HTML di bawah ini :

di bawah ini adalah contoh gambar :

hasil dari penullisan kode HTML adalah sebagai berikut :

Latihan 6. Belajar kode HTML untuk menyisipkan link pada gambar

Sebagai contoh, berdasarkan gambar di atas, kita akan menyisipkan link menuju halaman http://edyutomo.com/anak-dan-balita/kumpulan-puisi-anak, maka kode HTML yang perlu dibuat adalah sebagai berikut :

_{<a href="http://edyutomo.com/anak-dan-balita/kumpulan-puisi-anak"><img src="http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif"></a>}

Hasilnya akan menjadi sebagai berikut :

Coba anda klik gambar di atas, pasti akan terbuka halaman yang dituju. Selamat anda sudah dapat membuat link pada gambar.

Apa itu PC Router ?

PC Router adalah sebuah PC (Komputer) yang di alih fungsikan menjadi jembatan sebuah jaringan, yang cara kerjanya tidak jauh berbeda dengan router seperti biasanya. Namun dengan menggunakan pc router kita bisa menambahkan banyak konfigurasi dan penambahan – penambahan fitur sebagai server. Salah satu nya adalah menambahkan setting Proxy server pada sebuah pc router.

Proxy server adalah salah satu jenis server dalam Linux Debian 5 yang dapat di terapkan pada pc router dan bekerja pada sebuah jaringan. Proxy server adalah sebuah server yang berfungsi untuk memberikan pembatasan/pemblokiran hak akses komputer client pada koneksi ke internet berupa keyword atau url sebuah situs di internet.

Konfigurasi PC Router

Pastikan bahwa computer yang akan menjadi PC Router mempunyai dua buah Lan Card.
Lan card 1 kita gunakan untuk koneksi ke Internet
Lan card 2 kita gunakan untuk terkoneksi ke jaringan local.

Login sebagai root

1. Masukan perintah berikut : # nano /etc/network/interfaces (Enter)
2. Kemudian masukan konfigurasi di bawah ini :
    #The primary network interface
allow-hotplug eth0
iface eth0 inet static
address 192.168.3.11
netmask 255.255.255.0
network 192.168.3.0
broadcast 192.168.3.255
gateway 192.168.3.1

allow-hotplug eth1
iface eth1 inet static
address 192.168.10.1
netmask 255.255.255.0
network 192.168.10.0
broadcast 192.168.10.255
3. Setelah itu simpan konfigurasi tersebut dengan perintah : Ctrl + O(Enter) dan Ctrl + X (Enter)
4. Selanjutnya restart jaringan debian, masukan peintah : # /etc/init.d/networking restart (Enter)
5. Cek hasil konfigurasi dengan perintah : # ifconfig (Enter)
6. Jika eth0 dan eth1 belum juga muncul pada hasil checking, kita harus melakukan perintah uppada masing – masing eth..
Ketikan perintah: # ifup eth0 (Enter) dan # ifup eth1 (Enter)
7. Lalu cek kembali hasilnya # ifconfig (Enter)
8. Jika Eth0 dan Eth1 telah muncul kita bisa lanjut ke konfigurasi berikutnya.
9. Berikutnya kita akan setting DNS, kali ini kita gunakan DNS Google ketikan :
  # nano /etc/resolv.conf (Enter)
Masukan konfigurasi berikut ini :
nameserver 8.8.8.8
nameserver 8.8.4.4

11. Simpan konfigurasi diatas Ctrl + O (Enter) dan Ctrl + X (Enter)
12. Restart kembali jaringan debian: # /etc/init.d/networking restart (Enter)
13. Kita aktifkan ipforward ke computer client, caranya : # nano /etc/sysctl.conf (Enter)
Cari baris berikut #net.ipv4.ip_forward=1
Lalu hilangkan tanda pagar, sehingga menjadi: net.ipv4.ip_forward=1
Jangan lupa simpan: Ctrl + O(Enter) dan Ctrl + X (Enter)
14. Setelah kita aktifkan, kita akan masukan konfigurasi ipforward, dengan perintah :
  # echo 1 > /proc/sys/net/ipv4/ip_forward (Enter)
15. Lalu cek hasil ip_forward yang kita masukan, Cara cek dengan perintah :
  # cat /proc/sys/net/ipv4/ip_forward (Enter)
jika hasilnya 1 berarti sukses.
16. Kemudian masukan konfigurasi IPTABLES untuk setting ketentuan ip ROUTER. Masukan perintah :
    # iptables –t nat –A POSTROUTING –o eth0 –j MASQUERADE (Enter)
Lalu simpan dengan perintah :  # iptables-save (Enter)

Dengan begitu PC ROUTER anda sudah siap untuk di gunakan sebagai router sebuah jaringan local. Namun konfigurasi IPTABLES di atas akan hilang saat komputer anda restart ulang.
Jadi.. untuk mencegah hilangnya konfigurasi tersebut, kita harus menyimpan konfigurasi tersebut, sehingga akan di load secara otomatis oleh komputer saat hidup.

Caranya adalah sebagai berikut :
# nano /etc/rc.local (Enter)

1. Masukan konfigurasi berikut di atas baris “Exit 0”
    echo 1 > /proc/sys/net/ipv4/ip_forward
iptables –t nat –A POSTROUTING –o eth0 –j MASQUERADE
lalu simpan: Ctrl + O(Enter) dan Ctrl + X (Enter)
2. Setelah itu reboot computer anda # init 6 (Enter)

Setelah kita punya PC ROUTER dengan Linux debian, selanjutnya kita akan melakukan konfigurasi ip di komputer client dengan sistemoperasi Windows
Ip address : 192.168.10.2 ( disesuaikan dengan eth1 debian)
Netmask : 255.255.255.0
Gateway : 192.168.10.1 (ip eth1 debian merupakan gerbang ke internet)
DNS : 192.168.3.1 (ip internet sekolah kita, yang akan menerjemahkan sinyal internet)

Setelah itu cek koneksi internet pada windows, jika sudah terkoneksi maka PC Router tidak punya masalah lagi. Kita bias langsung melakukan konfigurasi Proxy server.

1. Kembali ke komputer debian, login sebagai root.
2. Install paket Squid untuk instalasi Proxy server, masukan perintah : # apt-get install squid (Enter)
3. Setelah paket squid terinstall dengan sempurna, kita lakukan konfigurasi pada file Squid.conf
# nano /etc/squid/squid.conf (Enter)
Cari baris berikut ini : http_port 3128 tambahkan menjadi http_port 3128 transparent
Cari beris berikut :
  # cache_mem 8 mb hilangkan tanda (#) lalu ganti 8 mb menjadi 32 mb,
   sehingga menjadi baris cache_mem 32 mb
Cari baris berikut :
    # cache_dir ufs /var/spool/squid 100 16 256  hilangkan tanda (#) lalu ganti 100 menjadi1000
    cache_dir ufs /var/spool/squid 1000 16 256
Cari baris berikut :
  # cache_mgr webmaster  hilangkan tanda (#), ganti menjadi :
   Cache_mgr alie.abdurrohman@alieman.sch.id
Cari baris berikut :
  # TAG: visible_hostname Ketikan dibawah #Default
   Visible_hostname www.alieman.sch.id
4. Simpan konfigurasi diatas:Ctrl + O(Enter) dan Ctrl + X (Enter)

5. Berikutnya kita akan membuat file blokir untuk mentimpan daftar site yang kita blok
  # nano /etc/squid/blokir.txt (Enter)
6. Masukan url website yang akan di blokir :
  www.facebook.com
www.youtube.com
7. Simpan konfigurasi diatas:Ctrl + O(Enter) dan Ctrl + X (Enter)
8. Selanjutnya masuk kembali ke konfigurasi squid.conf
   # nano /etc/squid/squid.conf (Enter)
Cari baris berikut :
  Acl all src all
Acl manager proto cache_object
Acl localhost src 127.0.0.1/32
Acl to_localhost dst 127.0.0.0/8

Kemudian tambahkan konfigurasi berikut ini di bawah baris tersebut :
  Acl lan src 192.168.3.0/24
Acl blokir url_regex “/etc/squid/blokir.txt”

Cari baris berikut : http_access allow manager localhost
Lalu tambahkan baris berikut di atas baris tersebut :
  http_access deny blokir
http_access allow all

10. Simpan konfigurasi diatas:Ctrl + O(Enter) dan Ctrl + X (Enter)
11. Terakhir, sekarang kita akan membuat jembatan proxy ke jaringan local
# nano /etc/rc.local (Enter)
12. Tambahkan baris berikut sebelum Exit 0
  iptables –t nat –A POSTROUTING –o eth1 –p tcp –dport 80 –j REDIRECT –to-ports 3128
13. Simpan konfigurasi diatas:Ctrl + O(Enter) dan Ctrl + X (Enter)
14. Berikutnya kita akan checking hasil konfigurasi untuk squid
   # squid –k reconfigure (Enter)

Catatan :
Bila tidak ada notice berarti konfigurasi telah sukses dan bias di cek di komputer client.

Restart computer anda # init 6 (Enter)

My Notes

Rabu, 14 Januari 2015

Belajar HTML, Modul Dasar Cara Membuat Kode HTML

SINTAK DEBIAN