Kamis, 21 April 2011

Simple PHP dan MSQL poll

Making the Database

This tutorial will demonstrate how to make a basic poll using PHP, and store the results in MySQL. We will then display the results by making a pie chart with the GD Library.

The first thing we must do is create a database. Our example our poll will have three options, however you can modify this to fit your needs.


CREATE TABLE votes (first INTEGER, sec INTEGER, third INTEGER);
INSERT INTO votes (first, second, third) VALUES (0,0,0)


Voting Script - Part 1


// Connects to your Database
mysql_connect("your_server", "your_login", "your_pass") or die(mysql_error());
mysql_select_db("your_database") or die(mysql_error());

//Name of our cookie
$cookie = "Voted";

//A function to display our results - this refrences vote_pie.php which we will also make
function pie ()
{
$data = mysql_query("SELECT * FROM votes")
or die(mysql_error());
$result = mysql_fetch_array( $data );
$total = $result[first] + $result[sec] + $result[third];
$one = round (360 * $result[first] / $total);
$two = round (360 * $result[sec] / $total);
$per1 = round ($result[first] / $total * 100);
$per2 = round ($result[sec] / $total * 100);
$per3 = round ($result[third] / $total * 100);
echo "
";
Echo "FIRST = $result[first] votes, $per1 %

SECOND = $result[sec] votes, $per2 %

THIRD = $result[third] votes, $per3 %
";
}


We start out or script with the information we need to connect to our database.

We then name our cookie, and define a function called pie. In our pie function we retrieve the data from our database. We also preform a few calculations that help us display the results in a user friendly way, such as the percentage each vote has, and how many degrees out of 360 that percentage makes up. We reference vote_pie.php which we will create later in the tutorial.

Voting Script - Part 2


//This runs if it is in voted mode
if ( $mode=="voted")
{

//makes sure they haven't already voted
if(isset($_COOKIE[$cookie]))
{
Echo "Sorry You have already voted this month
";
}

//sets a cookie
else
{
$month = 2592000 + time();
setcookie(Voted, Voted, $month);

// adds their vote to the database
switch ($vote)
{
case 1:
mysql_query ("UPDATE votes SET first = first+1");
break;
case 2:
mysql_query ("UPDATE votes SET sec = sec+1");
break;
case 3:
mysql_query ("UPDATE votes SET third = third+1");
}

//displays the poll results
pie ();
}
}


The next section of code runs if our voting form has been submitted.

It first checks the user to see if they already have a voted cookie. If they do, it does not let them vote again and gives them an error message. However, if they do not, it sets the cookie in their browser and then adds their vote to our database. Finally, it displays the results of the poll by running our pie function.

Voting Script - Part 3


//if they are not voting, this displays the results if they have already voted
if(isset($_COOKIE[$cookie]))
{
pie ();
}

// or if they have not voted yet, they get the voting box
else
{
if(!$mode=='voted')
{
?>






}
}
?>


The final part of the script runs if they are not in voting mode.

It checks to see if they have a cookie in their browser. If they do, then it knows they have already voted and displays the poll results for them. If there is no cookie, it then checks to make sure they aren't in voted mode. If they are, then nothing happen, but if they are not it displays the form that lets them vote.
It is a good idea to include this poll on your page using the include function. Then you can place the poll anywhere you want within the page, simply using one line.


INCLUDE 'http://www.yoursite.com/path/to/poll.php' ;


Using GD Library


$slide = $one + $two;
header('Content-type: image/png');
$handle = imagecreate(100, 100);
$background = imagecolorallocate($handle, 255, 255, 255);
$red = imagecolorallocate($handle, 255, 0, 0);
$green = imagecolorallocate($handle, 0, 255, 0);
$blue = imagecolorallocate($handle, 0, 0, 255);
$darkred = imagecolorallocate($handle, 150, 0, 0);
$darkblue = imagecolorallocate($handle, 0, 0, 150);
$darkgreen = imagecolorallocate($handle, 0, 150, 0);

// 3D look
for ($i = 60; $i > 50; $i--)
{
imagefilledarc($handle, 50, $i, 100, 50, 0, $one, $darkred, IMG_ARC_PIE);
imagefilledarc($handle, 50, $i, 100, 50, $one, $slide , $darkblue, IMG_ARC_PIE);
imagefilledarc($handle, 50, $i, 100, 50, $slide, 360 , $darkgreen, IMG_ARC_PIE);
}
imagefilledarc($handle, 50, 50, 100, 50, 0, $one , $red, IMG_ARC_PIE);
imagefilledarc($handle, 50, 50, 100, 50, $one, $slide , $blue, IMG_ARC_PIE);
imagefilledarc($handle, 50, 50, 100, 50, $slide, 360 , $green, IMG_ARC_PIE);
imagepng($handle);
?>


In our script we called vote_pie.php to display the pie chart of our results.

The above code should be placed in the vote_pie.php file. Basically what this does is draw arcs to create a pie. We passed the variables it needed in the link from our main script. To better understand this code, you should read our GD tutorial that covers arcs and pies.
READ MORE - Simple PHP dan MSQL poll

Switch dan Bridge

Bridge adalah perangkat yang berfungsi menghubungkan beberapa jaringan yang terpisah. Bridge bisa menghubungkan tipe jaringan berbeda (seperti Ethernet dan Fast Ethernet) atau tipe jaringan yang sama. Bridge memetakan alamat Ethernet dari setiap node yang ada pada masing-masing segmen jaringan dan memperbolehkan hanya lalu lintas data yang diperlukan melintasi bridge. Ketika menerima sebuah paket, bridge menentukan segmen tujuan dan sumber. Jika segmennya sama, paket akan ditolak; jika segmennya berbeda, paket diteruskan ke segmen tujuannya. Bridge juga bisa mencegah pesan rusak untuk tak menyebar keluar dari satu segmen.
Switch yang dimaksud di sini adalah LAN switch. Switch adalah perluasan dari konsep bridge. Ada dua arsitektur dasar yang digunakan pada switch, yaitu :
  • cut-through
  • store-and-forward.
Switch cut-through memiliki kelebihan di sisi kecepatan karena ketika sebuah paket datang, switch hanya memperhatikan alamat tujuannya sebelum meneruskan ke segmen tujuan. Switch store-and-forward, kebalikannya, menerima dan menganalisa seluruh isi paket sebelum meneruskannya ke tujuan. Waktu yang diperlukan untuk memeriksa satu paket memakan waktu, tetapi ini memungkinkan switch untuk mengetahui adanya kerusakan pada paket dan mencegahnya agar tak mengganggu jaringan. Dengan teknologi terbaru, kecepatan switch store-and-forward ditingkatkan sehingga mendekati kecepatan switch cut-through. Di pasaran Anda juga bisa memilih switch hibrid yang menggabungkan arsitektur cut-through dan store-and-forward.
Dengan switch, Anda mendapatkan keuntungan karena setiap segmen jaringan memiliki bandwidth 10Mbps penuh, tidak terbagi seperti pada “shared network.” Dengan demikian kecepatan transfer data lebih tinggi. Jaringan yang dibentuk dari sejumlah switch yang saling terhubung disebut “collapsed backbone.” Saat ini banyak orang memilih menggunakan jaringan Ethernet 10Mbps pada segmen-segmennya dan Fast Ethernet 100Mbps pada koneksi ke server. Untuk keperluan ini digunakan switch 10/100 yang biasanya memiliki beberapa (4-24) port 10Mbps untuk koneksi ke komputer klien dan 1 port 100Mbps ke komputer server.
Product sejenis ini adalah:
  • 3com superstack, corebuilder
  • cisco catalyst
  • dlink
sumber : teknik-informatika.com
READ MORE - Switch dan Bridge

Router

Router Bekerja dengan cara yang mirip dengan Switch dan bridge. Perbedaannya, router menyaring (filter) lalu lintas data. Penyaringan dilakukan bukan dengan melihat alamat paket data, tetapi dengan menggunakan protokol tertentu. Router muncul untuk menangani perlunya membagi jaringan secara logikal bukan fisikal. Sebuah IP router bisa membagi jaringan menjadi beberapa subnet sehingga hanya lalu lintas yang ditujukan untuk IP address tertentu yang bisa mengalir dari satu segmen ke segmen lain. Anda mungkin bingung dengan definisi di atas, tetapi untuk mudah diingat, Anda menggunakan router ketika akan menghubungkan jaringan komputer ke jaringan lain. Jaringan ini bisa berupa jaringan pribadi (LAN/WAN) atau jaringan publik (Internet).
Product sejenis ini adalah:
  • Cisco
  • 3com






Sebuah Router mengartikan informasi dari satu jaringan ke jaringan yang lain, hampir sama dengan Bridge namun agak pintar sedikit, router akan mencari jalur yang terbaik untuk mengirimkan sebuah pesan yang berdasakan atas alamat tujuan dan alamat asal.
Sementara Bridge dapat mengetahui alamat masing-masing komputer di masing-masing sisi jaringan, router mengetahui alamat komputerr, bridges dan router lainnya. router dapat mengetahui keseluruhan jaringan melihat sisi mana yang paling sibuk dan dia bisa menarik data dari sisi yang sibuk tersebut sampai sisi tersebut bersih.
Jika sebuah perusahaan mempunyai LAN dan menginginkan terkoneksi ke Internet, mereka harus membeli router. Ini berarti sebuah router dapat menterjemahkan informasi diantara LAN anda dan Internet. ini juga berarti mencarikan alternatif jalur yang terbaik untuk mengirimkan data melewati internet.

sumber : teknik-informatika.com
READ MORE - Router

Concetrator / HUB

 secara sederhana, hub adalah perangakat penghubung . pada jaringan  bertopologi star, hub adalah perangakat dengan banyak port yang memungkinkan beberapa titik (dalam hal ini komputer yang sudah memasang NIC) bergabung menjadi satu jaringan. Pada jaringan sederhana, salah satu port pada hub terhubung ke komputer server. Bisa juga hub tak langsung terhubung ke server tetapi juga ke hub lain, ini terutama terjadi pada jaringan yang cukup besar. Hub memiliki 4 – 24 port plus 1 port untuk ke server atau hub lain (uplink). Sebagian hub — terutama dari generasi yang lebih baru — bisa ditumpuk (stackable) untuk mendukung jumlah port yang lebih banyak. Jumlah tumpukan maksimal bergantung dari merek hub, rata-rata mencapai 5 – 8. Hub yang bisa ditumpuk biasanya pada bagian belakangnya terdapat 2 port untuk menghubungkan antar hub.


Dari sisi pengelolaan ada dua jenis hub, yaitu
  • Manageable Hub;
  • Unmanageable Hub.
Manageable hub adalah hub yang bisa dikelola melalui software biasanya menggunakan browser IE — sedangkan unmanageable hub tak bisa. Satu hal yang perlu diingat, hub hanya memungkinkan pengguna untuk berbagi (share) jalur yang sama. Kumpulan hub yang membentuk jaringan hub disebut sebagai “shared Ethernet.” Pada jaringan terbagi seperti itu, setiap anggota hanya akan mendapatkan persentase tertentu dari bandwidth jaringan yang ada. Misalkan hub yang digunakan adalah Ethernet 10Mbps dan pada jaringan tersebut tersambung 10 komputer, maka secara kasar jika semua komputer secara bersama mengirimkan data, bandwidth rata-rata yang bisa digunakan oleh masing-masing anggota jaringan tersebut hanyalah 1Mbps. Nah bagaimana pula jika penggunanya hanya sendirian ?


Pada jaringan bertopologi bus, ada juga perangkat sejenis hub — namanya repeater. Sesuai namanya, repeater bekerja memperkuat sinyal agar data bisa mencapai jarak yang lebih jauh.
contoh hub

sumber : http://teknik-informatika.com
READ MORE - Concetrator / HUB

Network Interface Card (NIC)

Network Interface Card atau NIC adalah kartu (papan elektronik. yang di tanam di setiap komputer yang terhubung ke jaringan. Beberapa komputer desktop yang dijual di pasaran saat ini sudah dilengkapi dengan kartu ini. Saat Anda membeli komputer, Anda bisa menanyakan penjualnya apakah pada komputer sudah dipasangkan NIC. Jika belum Anda bisa meminta penjualnya untuk memasangkan, atau Anda bisa membelinya dan memasangnya sendiri.

Ada banyak macam kartu jaringan. Ada tiga hal yang harus Anda perhatikan dari suatu NIC:
  • tipe kartu;
  • jenis protokol;
  • tipe kabel yang didukung.
Ada dua macam tipe kartu, yaitu PCI (Peripheral Component Interconnect) dan ISA (Industry Standard Architecture). Sebagai sedikit penjelasan, pada komputer ada beberapa slot (tempat menancapkan kartu) yang disebut expansion slot. Slot-slot ini saat Anda membeli komputer sengaja dibiarkan kosong oleh pembuat komputer agar Anda bisa meningkatkan kemampuan komputer Anda dengan menambahkan beberapa kartu — misalnya, kartu suara (untuk membuat komputer “bersuara bagus”), kartu video (untuk membuat tampilan layar komputer lebih bagus), kartu SCSI (Small Computer System Interface) – untuk membuat komputer bisa berkomunikasi dengan perangkat berbasis SCSI -,  atau network interface card (untuk membuat komputer bisa berkomunikasi dengan komputer lain dalam jaringan). Ada dua tipe slot yang banyak dijumpai pada komputer-komputer yang beredar di pasaran, yaitu slot PCI dan slot ISA. Jika Anda membuka kotak (casing) komputer Anda, di bagian belakang Anda bisa melihat ada dua deret slot. Slot PCI biasanya adalah yang berwarna putih, slot ini lebih pendek dibandingkan slot ISA yang berwarna hitam. Slot PCI mendukung kecepatan I/O (input/output) yang lebih tinggi. Di pasaran, biasanya harga kartu berbasis PCI lebih mahal.
Dari sisi protokol, jenis protokol yang saat ini paling banyak digunakan adalah Ethernet dan Fast Ethernet. Ada beberapa protokol lain, tetapi kurang populer, yaitu Token Ring, FDDI, dan ATM. Dua protokol terakhir cenderung digunakan pada jaringan besar sebagai backbone (jaringan tulang punggung yang menghubungkan banyak segmen jaringan yang lebih kecil). Ethernet mendukung kecepatan transfer data sampai 10Mbps, sedangkan Fast Ethernet mendukung kecepatan transfer data sampai 100Mbps. Jika memilih untuk menggunakan protokol Ethernet, Anda harus membeli kartu Ethernet. Demikian juga jika Anda telah memilih Fast Ethernet. Namun saat ini juga ada kartu combo yang mendukung Ethernet maupun Fast Ethernet. Kartu combo bisa mendeteksi sendiri berapa kecepatan yang sedang digunakan pada jaringan. Jika saat ini Anda memilih menggunakan Ethernet, tetapi Anda telah merencanakan untuk suatu saat nanti memerlukan kecepatan transfer yang lebih tinggi — sehingga memerlukan Fast Ethernet tak salah jika Anda memilih kartu combo. Dari sisi harga, kartu Ethernet saat ini boleh dibilang sudah sangat murah.

A. Ethernet Card / Kartu Jaringan Ethernet

Kartu jaringan Ethernet biasanya dibeli terpisah dengan komputer, kecuali seperti komputer Macintosh yang sudah mengikutkan kartu jaringan ethernet didalamnya. kartu Jaringan ethernet umumnya telah menyediakan port koneksi untuk kabel Koaksial ataupun kabel twisted pair, jika didesain untuk kabel koaksial konenektorya adalah BNC, dan apabila didesain untuk kabel twisted pair pasti dech akan punya konektor RJ-45. Beberapa kartu jaringan ethernet kadang juga punya konektor AUI (Attachment Unit Interface). Semua itu di koneksikan dengan koaksial, twisted pair, ataupun kabel fiber optic.

B. LocalTalk Connectors/Konektor LocalTalk

LocalTalk adalah kartu jaringan buat komputer macintosh, ini menggunakan sebuah kotak adapter khusus dan kabel yang terpasang ke Port untuk printer. Kekurangan dari LocalTalk dibandingkan Ethernet adalah kecepatan laju transfer datanya, Ethernet biasanya dapat sampai 10 Mbps, sedangkan LocalTalk hanya dapat beroperasi pada kecepatan 230 Kbps atau setara dengan 0.23 Mps

C. Token Ring Cards

Kartu jaringan Token Ring terlihat hampir sama dengan kartu jaringan ethernet. Satu perbedaannya adalah tipe konektor di belakang kartu jaringannya, token ring umumnya mempunyai tipe konektor 9 Pin DIN (Deutsche Industrinorm – organisasi standar setting Jerman) yang menyambung Kartu jaringan ke Kabel Network.
Dalam memilih NIC, Anda harus menyesuaikan dengan tipe kabel yang telah/akan Anda pasang. Port/colokan untuk kabel UTP berbentuk mirip dengan kabel telepon tetapi sedikit lebih besar, port ini dikenal sebagai RJ-45. Ada beberapa kartu yang mendukung dua atau lebih tipe kabel. Namun jika Anda hanya akan menggunakan satu tipe kabel, pilihlah kartu yang mendukung satu tipe kabel saja karena harganya akan jauh lebih murah.
Satu hal lagi, jika Anda menggunakan komputer portabel (notebook), untuk berkoneksi ke jaringan, dibutuhkan kartu PCMCIA (Personal Computer Memory Card International Association). Bentuk kartu ini mirip kartu kredit, tetapi sedikit tebal. Kartu ini dimasukkan ke port PCMCIA yang ada pada setiap notebook. Jika untuk komputer desktop sudah tersedia banyak pilihan kartu untuk protokol Fast Ethernet, untuk PCMCIA pilihan mereknya masih sedikit sehingga harganya sangat mahal. Jika pada komputer desktop tidak ada kartu kombinasi antara kartu jaringan dengan kartu modem, pada PCMCIA kombinasi ini justru menjadi salah satu favorit. Dengan kombinasi ini, Anda menghemat penggunaan slot PCMCIA dengan hanya menggunakan satu slot untuk dua kegunaan: modem dan jaringan. Saat ini hampir semua NIC yang beredar di pasaran sudah mendukung Plug-n-Play (PnP) – NIC secara otomatis dikonfigurasi tanpa intervensi pengguna-, tetapi ada baiknya Anda pastikan bahwa NIC yang Anda beli memang mendukung PnP.

sumber : http://teknik-informatika.com
READ MORE - Network Interface Card (NIC)

Rabu, 20 April 2011

TCP / IP


TCP / IP adalah protokol komunikasi untuk Internet.

Protokol Komunikasi Komputer

Sebuah protokol komunikasi komputer adalah deskripsi dari komputer harus mengikuti aturan-aturan untuk berkomunikasi dengan satu sama lain.

Apa itu TCP / IP?

TCP / IP adalah protokol komunikasi untuk komunikasi antar komputer di Internet.
TCP / IP adalah singkatan untuk T ransmission C ontrol rotocol P / I nternet P rotocol.
TCP / IP mendefinisikan bagaimana perangkat elektronik (seperti komputer) harus terhubung ke Internet, dan bagaimana data harus ditransmisikan antara mereka.

Di dalam TCP / IP

Di dalam TCP / IP standar ada beberapa protokol untuk menangani komunikasi data:
  • TCP (Transmission Control Protocol) komunikasi antara aplikasi
  • UDP (User Datagram Protocol) komunikasi sederhana antara aplikasi
  • IP (Internet Protocol) komunikasi antar komputer
  • ICMP (Internet Control Message Protocol) untuk kesalahan dan statistik
  • DHCP (Dynamic Host Configuration Protocol) untuk mengatasi dinamis

TCP Menggunakan Koneksi Tetap

TCP untuk komunikasi antara aplikasi.
Jika satu aplikasi ingin berkomunikasi dengan yang lain melalui TCP, ia akan mengirimkan permintaan komunikasi. Permintaan ini harus dikirim ke alamat yang tepat. Setelah "jabat tangan" antara dua aplikasi, TCP akan mendirikan "full-duplex" komunikasi antara dua aplikasi.
The "full-duplex" komunikasi akan menempati garis komunikasi antara dua komputer sampai ditutup oleh salah satu dari dua aplikasi.
UDP sangat mirip dengan TCP, namun sederhana dan kurang dapat diandalkan.

IP Sambungan-Kurang

IP adalah untuk komunikasi antar komputer.
IP adalah "koneksi-kurang" protokol komunikasi.
IP tidak menempati garis komunikasi antara dua komputer. IP mengurangi kebutuhan untuk saluran jaringan. Setiap baris dapat digunakan untuk komunikasi antar komputer yang berbeda pada saat yang sama.
Dengan IP, pesan (atau data lain) dipecah menjadi kecil independen "paket" dan dikirim antara komputer melalui internet.
IP bertanggung jawab untuk "routing" paket masing-masing untuk tujuan yang benar.

IP Router

Ketika sebuah paket IP yang dikirimkan dari komputer, tiba pada router IP.
Router IP bertanggung jawab untuk "routing" paket ke tujuan yang benar, secara langsung atau melalui router lain.
Path paket akan mengikuti mungkin berbeda dari paket lain dari komunikasi yang sama. Router bertanggung jawab untuk hak pengalamatan, tergantung pada volume lalu lintas, kesalahan dalam jaringan, atau parameter lainnya.

Sambungan-Analogi Kurang

Berkomunikasi melalui IP adalah seperti mengirimkan surat panjang sebagai sejumlah besar kartu pos kecil, masing-masing mencari jalan sendiri (sering berbeda) ke penerima.

TCP / IP

TCP / IP adalah TCP dan IP bekerja sama.
TCP menangani komunikasi antara perangkat lunak aplikasi Anda (misalnya browser Anda) dan perangkat lunak jaringan Anda.
IP menangani komunikasi dengan komputer lain.
TCP bertanggung jawab untuk memecah data ke dalam paket IP sebelum dikirim, dan untuk perakitan paket ketika mereka tiba.
IP bertanggung jawab untuk pengiriman paket ke tujuan yang benar.
READ MORE - TCP / IP

TCP / IP Email


Email merupakan salah satu penggunaan yang paling penting dari TCP / IP.

Anda Tidak

Ketika Anda menulis email, Anda tidak menggunakan TCP / IP.
Ketika Anda menulis email, Anda menggunakan program email seperti Lotus Notes, Microsoft Outlook atau Netscape Communicator.

Apakah program Email Anda

program email Anda menggunakan berbagai protokol TCP / IP:
  • Mengirimkan email Anda menggunakan SMTP
  • Hal ini dapat men-download email Anda dari server email menggunakan POP
  • Hal ini dapat terhubung ke server email menggunakan IMAP

SMTP - Simple Mail Transfer Protocol

Protokol SMTP digunakan untuk transmisi e-mail. SMTP mengurus mengirimkan email Anda ke komputer lain.
Biasanya email Anda dikirim ke server email (SMTP server), dan kemudian ke server lain atau server, dan akhirnya ke tujuannya.
SMTP hanya bisa mengirimkan teks murni. Tidak dapat mengirimkan data biner seperti gambar, suara atau film.
SMTP menggunakan protokol MIME untuk mengirim data biner di jaringan TCP / IP. Protokol MIME mengkonversi data biner ke teks murni.

POP - Post Office Protocol

Protokol POP digunakan oleh program email (seperti Microsoft Outlook) untuk mengambil email dari server email.
Jika program email Anda menggunakan POP, semua email Anda di-download ke program email Anda (juga disebut klien email), setiap kali terhubung ke server email Anda.

IMAP - Internet Message Access Protocol

Protokol IMAP digunakan oleh program email (seperti Microsoft Outlook) seperti protokol POP.
Perbedaan utama antara protokol IMAP dan POP protokol adalah bahwa protokol IMAP tidak akan secara otomatis men-download semua email Anda setiap kali program email Anda tersambung ke server email Anda.
Protokol IMAP memungkinkan Anda untuk melihat melalui pesan email Anda di server email sebelum anda mendownloadnya. Dengan IMAP Anda dapat memilih untuk men-download pesan Anda atau hanya menghapusnya. Dengan cara ini IMAP sangat cocok jika Anda perlu untuk terhubung ke server email Anda dari lokasi yang berbeda, tetapi hanya ingin men-download pesan Anda saat Anda kembali di kantor Anda.
READ MORE - TCP / IP Email

TCP / IP PROTOKOL

TCP / IP adalah sebuah koleksi besar protokol komunikasi yang berbeda.

Sebuah Keluarga Protokol

TCP / IP adalah sekumpulan besar protokol komunikasi yang berbeda berdasarkan dua protokol TCP asli dan IP.

TCP - Transmission Control Protocol

TCP digunakan untuk transmisi data dari aplikasi ke jaringan.
TCP bertanggung jawab untuk memecah data ke dalam paket IP sebelum dikirim, dan untuk perakitan paket ketika mereka tiba.

IP - Internet Protocol

IP menangani komunikasi dengan komputer lain.
IP bertanggung jawab untuk mengirim dan menerima paket data melalui Internet.

HTTP - Hyper Text Transfer Protocol

HTTP menangani komunikasi antara web server dan web browser.
HTTP digunakan untuk mengirimkan permintaan dari klien web (browser) ke web server, kembali konten web (halaman web) dari server ke klien.

HTTPS - HTTP Secure

HTTPS menangani komunikasi yang aman antara web server dan web browser.
HTTPS biasanya menangani transaksi kartu kredit dan data sensitif lainnya.

SSL - Secure Socket Layer

Protokol SSL digunakan untuk enkripsi data untuk transmisi data yang aman.

SMTP - Simple Mail Transfer Protocol

SMTP digunakan untuk transmisi e-mail.

MIME - Multi-purpose Internet Mail Extensions

Protokol MIME memungkinkan SMTP mengirimkan file multimedia termasuk suara, audio, dan data biner di jaringan TCP / IP.

IMAP - Internet Message Access Protocol

IMAP digunakan untuk menyimpan dan mengambil e-mail.

POP - Post Office Protocol

POP digunakan untuk men-download e-mail dari server e-mail ke komputer pribadi.

FTP - File Transfer Protocol

FTP menangani pengiriman file antar komputer.

NTP - Network Time Protocol

NTP digunakan untuk sinkronisasi waktu (jam) antara komputer.

DHCP - Dynamic Host Configuration Protocol

DHCP digunakan untuk alokasi alamat IP dinamis ke komputer dalam jaringan.

SNMP - Network Management Protocol Wikipedia

SNMP digunakan untuk administrasi jaringan komputer.

LDAP - Directory Access Protocol Ringan

LDAP digunakan untuk mengumpulkan informasi tentang pengguna dan alamat e-mail dari internet.

ICMP - Internet Control Protocol pesan

ICMP menangani kesalahan-penanganan dalam jaringan.

ARP - Address Resolution Protocol

ARP digunakan oleh IP untuk mencari alamat hardware dari kartu jaringan komputer berdasarkan alamat IP.

RARP - Address Resolution Protocol Reverse

RARP digunakan oleh IP untuk mencari alamat IP berdasarkan alamat hardware dari kartu jaringan komputer.

BOOTP - Protokol Boot

BOOTP digunakan untuk boot (mulai) komputer dari jaringan.

PPTP - Point to Point Tunneling Protokol

PPTP digunakan untuk pengaturan koneksi (terowongan) antara jaringan pribadi.
READ MORE - TCP / IP PROTOKOL

TCP / IP ADDRESSING

TCP / IP menggunakan 32 bit, atau empat nomor-nomor antara 0 dan 255, untuk alamat komputer.

Alamat IP

Setiap komputer harus memiliki alamat IP sebelum dapat terhubung ke Internet.
Setiap paket IP harus memiliki sebuah alamat sebelum dapat dikirim ke komputer lain.
Ini adalah alamat IP: 192.68.20.50
Ini mungkin alamat IP yang sama: www.w3schools.com

Alamat IP Berisi 4 Angka.

Setiap komputer harus memiliki alamat IP yang unik.
Ini adalah alamat IP Anda: 74.125.152.81
TCP / IP menggunakan empat nomor-nomor untuk alamat komputer. Angka-angka selalu antara 0 dan 255.
alamat IP biasanya ditulis sebagai empat angka yang dipisahkan oleh titik, seperti ini: 192.168.1.50.

32 Bits = 4 Bytes

Dalam istilah komputer, TCP / IP menggunakan pengalamatan 32 bit. Satu byte adalah 8 bit. TCP / IP menggunakan 4 bytes.
Satu byte dapat berisi 256 nilai yang berbeda:
00000000, 00000001, 00000010, 00000011, 00000100, 00000101, 00000110, 00000111, 00001000 dan semua jalan sampai ke 11111111 ........
Sekarang Anda tahu mengapa TCP / alamat IP adalah empat nomor-nomor antara 0 dan 255.

Nama Domain

Sebuah nama jauh lebih mudah untuk diingat daripada nomor 12 digit.
Nama yang digunakan untuk TCP / alamat IP yang disebut nama domain.
w3schools.com adalah nama domain.
Bila Anda alamat sebuah situs web, seperti http://www.w3schools.com, nama ini diterjemahkan ke nomor dengan Domain Name Server (DNS).
Di seluruh dunia, server DNS yang terhubung ke Internet. DNS server bertanggung jawab untuk menerjemahkan nama domain ke TCP / alamat IP.
Ketika nama domain baru yang terdaftar bersama dengan alamat TCP / IP, server DNS di seluruh dunia diperbarui dengan informasi ini
READ MORE - TCP / IP ADDRESSING

HTML FRAME

MATERI:
Element FRAMESET, Element FRAME, Element NOFRAMES


ELEMENT FRAMESET
Element FRAMESET berfungsi untuk membagi isi jendela web browser menjadi beberapa bagian. Element ini mempunyai attribute yaitu cols (membagi jendela berdasarkan kolom), rows (membagi jendela berdasarkan baris), border , bordercolor, frameborder (untuk menampilkan border frame), dan framespacing (spasi antara frame). Element FRAMESET terletak di antara element HEAD dan BODY.

Sintaks:
<frameset
     cols="list"
     rows="list"
     border="pixel"
     bordercolor="color"
     frameborder="yes"|"no"
     framespacing="pixel">
   ...........................
</frameset>



ELEMENT FRAME
Element FRAME mendefinisikan frame yang terdapat dalam frameset. Element ini mempunyai attribute yaitu name (nama frame), marginheight, marginwidth, bordercolor, frameborder, noresize, scrolling, src (dokumen yang ditampilkan pada frame). Element ini tidak mempunyai tag penutup.

Sintaks:
<frame
     name="name"
     marginheight="pixel"
     maginwidth="pixel"
     bordercolor="color"
     frameborder="yes"|"no"
     noresize
     scrolling="yes"|"no"
     src="uri">



ELEMENT NOFRAMES
Element NOFRAME mendefinisikan isi yang akan ditampilkan jika suatu frame tidak dapat diakses .

Sintaks:
<noframes>
.....................

</noframes>






LATIHAN
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.


Latihan 1:
Bagilah jendela menjadi dua frame secara vertikal dengan komposisi 40% untuk dokumen left.html dan 60% untuk dokumen right.html.


Nama file: latihan8_1.html
<html>
<head>
<title>Latihan8-1</title>
</head>
<frameset cols="40%,60%">
<frame src="left.html">
<frame src="right.html">
</frameset>
<body>

</body>
</html>
Catatan: penulisan nilai attribute cols dapat juga ditulis cols="40%,*".


Latihan 2:

Dari latihan 1 ubahlah dengan memberikan warna merah pada border dengan ukuran 10pixel.

   
Nama file: latihan8_2.html
<html>
<head>
<title>Latihan8-2</title>
</head>
<frameset cols="40%,*" border="10" bordercolor="red">
<frame src="left.html">
<frame src="right.html">
</frameset>
<body>

</body>
</html>


Latihan 3:
Dari latihan 2, tambahkan pada frame dokumen right.html dengan margin 50pixel.

   
Nama file: latihan8_3.html
<html>
<head>
<title>Latihan8-3</title>
</head>
<frameset cols="40%,*" border="10" bordercolor="red">
<frame src="left.html">
<frame src="right.html" marginheight="50" marginwidth="50">
</frameset>

<body>
</body>
</html>



READ MORE - HTML FRAME

HTML FORM

MATERI:
Element FORM, Element INPUT, Element SELECT, Element OPTION, Element TEXTAREA


ELEMENT FORM
Element FORM berfungsi untuk mendefinisikan form interaktif. Element ini mempunyai attribute yaitu action, dan method. Attribute action berisikan aksi terhadap form yang dikirim (URI) dan attribute method berisikan metode form melakukan proses pengiriman(GET/POST).

Sintaks:
<form action="action" method="GET"|"POST">
   ...........................
</form>




ELEMENT INPUT
Element INPUT berfungsi untuk mendefinisikan input yang akan dimasukkan pengguna. Element ini mempunyai attribute yaitu name, size, type, value, checked.
Attribute name mendefinisikan nama dari input kontrol form, attribute size mendefinisikan ukuran teks pada input kontrol, type mendefinisikan bentuk-bentuk input kontrol, value mendefinisikan nilai awal/reset/submit, checked mendefinisikan pilihan terpilih pada type radio/checkbox. Element ini tidak mempunyai tag penutup dan harus berada di dalam element FORM.

Sintaks:
<input
          name="name"
          size="number"
          type="text"|"checkbox"|"radio"|"submit"|"reset"
          value="value"
          checked >


ELEMENT SELECT
Element SELECT berfungsi untuk mendefinisikan opsi pilihan pada form kontrol. Element ini mempunyai attribute yaitu name, size, multiple(diizinkan banyak pilihan). Element ini harus berada di dalam element FORM.

Sintaks:
<select
          name="name"
          size="number"
          multiple >
.....................

</select>


ELEMENT OPTION
Element OPTION mendefinisikan opsi pilihan pada menu SELECT. Element ini mempunyai attribute selected, dan value. Attribute selected opsi terpilih dan attribute value berisikan nilai element OPTION. 

Sintaks:
<option
          selected
          value="number" >
.....................

</option>



ELEMENT TEXTAREA
Element TEXTAREA berfungsi sebagai input kontrol form untuk memasukkan teks lebih dari satu baris. Element ini mempunyai attribute yaitu name, cols, rows. Attribute name mendefinisikan nama input kontrol form element textarea, attribute cols mendefinisikan jumlah kolom textarea yang terlihat, dan attribute rows mendefinisikan jumlah baris textarea yang terlihat. Element ini harus berada di dalam element FORM

Sintaks:
<textarea
          name="name"
          cols="number"
          rows="number" >
.....................

</textarea>




LATIHAN
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.


Latihan 1:
Buat form dengan input kontrol form seperti text, checkbox, radio, reset, submit, seperti tampilan di bawah ini:

form1
                         


Nama file: latihan7_1.html
<html>
<head>
<title>Latihan7-1</title>
</head>
<body>
<FORM METHOD="POST" ACTION="mailto:teknisi@jardiknas.org">
   <H4>FORM</H4>
   <INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Enter your name here.">
   <BR><BR>
   <B>Are you a student?</B>
   <INPUT TYPE="checkbox" NAME="var2">
   <BR><BR>
   <B>How old are you?</B>
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25
   <BR><BR>
   <INPUT TYPE="submit" NAME="var4" VALUE="Send">
   <INPUT TYPE="reset" NAME="var5" VALUE="Clear">
</FORM>
</body>
</html>
Jika diisi namanya adalah Rahmat ; student di check ; umur 21-25 ; maka jika form ini di submit data form yang terkirim adalah var1="Rahmat"&var2="1"&var3="r3"


Latihan 2:

Dari latihan 1 tambahkan menu select seperti gambar di bawah ini:

form2


   
Nama file: latihan7_2.html
<html>
<head>
<title>Latihan7-2</title>
</head>
<body>
<FORM METHOD="POST" ACTION="mailto:teknisi@jardiknas.org">
   <H4>FORM</H4>
   <INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Enter your name here.">
   <BR><BR>
   <B>Are you a student?</B>
   <INPUT TYPE="checkbox" NAME="var2">
   <BR><BR>
   <B>How old are you?</B>
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25
   <BR><BR>
   <B>Where are you from?</B>
   <BR>
   <SELECT NAME="var6" SIZE="1">
      <OPTION VALUE="BG">Bulgaria
      <OPTION VALUE="UK">United Kingdom
      <OPTION VALUE="USA" SELECTED>USA
   </SELECT>
   <BR><BR>
   <INPUT TYPE="submit" NAME="var4" VALUE="Send">
   <INPUT TYPE="reset" NAME="var5" VALUE="Clear">
</FORM>
</body>
</html>



Latihan 3:
Dari latihan 2 tambahkan textarea seperti gambar di bawah ini:

form3


   
Nama file: latihan7_2.html
<html>
<head>
<title>Latihan7-2</title>
</head>
<body>
<FORM METHOD="POST" ACTION="mailto:teknisi@jardiknas.org">
   <H4>FORM</H4>
   <INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Enter your name here.">
   <BR><BR>
   <B>Are you a student?</B>
   <INPUT TYPE="checkbox" NAME="var2">
   <BR><BR>
   <B>How old are you?</B>
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25
   <BR><BR>
   <B>Where are you from?</B>
   <BR>
   <SELECT NAME="var6" SIZE="1">
      <OPTION VALUE="BG">Bulgaria
      <OPTION VALUE="UK">United Kingdom
      <OPTION VALUE="USA" SELECTED>USA
   </SELECT>
   <BR><BR>
   <B>Your comment:</B>
   <BR>
   <TEXTAREA NAME="var7" COLS="30" ROWS="6">
   </TEXTAREA>
   <BR><BR>
   <INPUT TYPE="submit" NAME="var4" VALUE="Send">
   <INPUT TYPE="reset" NAME="var5" VALUE="Clear">
</FORM>
</body>
</html>

Catatan:
Pemberian nilai attribute action pada element FORM dengan menuju ke alamat email adalah untuk memperlihatkan nilai-nilai data form yang dikirimkan.

READ MORE - HTML FORM

HTML Hyperlink

MATERI:
Element A


ELEMENT A
Element A befungsi untuk menghubungkan ke internal ataupun eksternal halaman web. Element ini mempunyai attribute href, name, dan target.  Attribute href berfungsi sebagai hypertext reference yang mempunyai nilai URI (uniform resource identifier) yang akan menghubungkan ke eksternal halaman web. Attribute name berfungsi untuk menghubungkan ke tempat tujuan dalam halaman web (anchor). Attribute target berfungsi untuk menampilkan halaman web pada suatu jendela frame atau jendela baru.

Sintaks:
<a href="uri" name="name" target="_blank"|"parent"|"_top"|"_self">
   ...........................
</a>





LATIHAN
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.


Latihan 1:
Membuat link eksternal:

Link:

   1. yahoo
   2. google
   3. d3tkj
                         

Nama file: latihan6_1.html
<html>
<head>
<title>Latihan6-1</title>
</head>
<body>
Link:
<ol>
<li><a href="http://www.yahoo.com">yahoo</a></li>
<li><a href="http://www.google.com">google</a></li>
<li><a href="http://teknisi.jardiknas.org">d3tkj</a></li>

</ol>
</body>

</html>

Tugas tambahan:
Tambahkan setiap link dengan target "_blank", "_parent", "_self", "_top". Amatilah hasilnya.


Latihan 2:

Membuat link internal dan anchor:

Link internal dan anchor adalah link yang menunjuk ketempat yang ada dalam dokument ini.
kebagian akhir
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.

Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.

Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.

Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.

Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.

Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
kebagian pertama                        

Nama file: latihan6_2.html
<html>
<head>
<title>Latihan6-2</title>
</head>
<body>
Link internal dan anchor adalah link yang menunjuk ketempat yang ada dalam dokument ini.<br>
<a href="#akhir">kebagian akhir</a>
<a name="pertama"></a>
<p>Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini. </p>

<p>Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.</p>

<p>Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.</p>

<p>Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.</p>

<p>Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.</p>

<a name="akhir"></a>
<p>
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.</p>

<a href="#pertama">kebagian pertama</a>
</body>
</html>

Tugas tambahan:
Buatlah link ke bagian ketiga dari posisi bagian keenam.

sumber :http://hans.polinpdg.ac.id/html/
READ MORE - HTML Hyperlink

HTML IMAGE (GAMBAR)

MATERI:
Element IMG (Image)

ELEMENT IMG
Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag penutup dan mempunyai attribute yaitu align, alt (teks alternatif jika gambar tidak tampil), border, height, width, hspace (jarak kosong posisi horizontal, vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama file-nya).

Sintaks:
<img
   align="left"|"right"|"top"|"middle"|"bottom"
   alt="text"
   border="pixel"
   width="pixel"|"%"
   height="pixel"|"%"
   hspace="pixel"
   vspace="pixel"
   src="uri">





LATIHAN
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.


Latihan 1:
Tampilkan gambar image027.jpg dengan ukuran width dan height 160pixel dan border 8pixel :
                         

Nama file: latihan5_1.html
<html>
<head>
<title>Latihan5-1</title>
</head>
<body>
<img width="160" height="160" src="image027.jpg">
</body>
</html>

Tugas tambahan:
Letakkan gambar tersebut ke kanan, setelah itu ke kiri.


Latihan 2:

Dari Latihan 1 ubah gambar menjadi yang terdapat dalam direktori /images dengan nama image050.jpg
                        

Nama file: latihan5_2.html
<html>
<head>
<title>Latihan5-1</title>
</head>
<body>
<img width="160" height="160" src="./images/image050.jpg">
</body>
</html>



Latihan 3:
Tampilkan gambar image027.jpg dengan ukuran width dan height 80pixel dan border 8pixel serta teks seperti di bawah ini:
image027.jpgKehadiran Web Teknisi Jardiknas dapat memudahkan penyebaran informasi antara Biro Perencanaan dan Kerja Sama Luar Negeri - dan anggota Teknisi Jardiknas. Keuntungan bila sistem jaringan informasi ini terbentuk, komunikasi antar Biro Perencanaan dan Kerja Sama Luar Negeri dan Provider dan anggota Teknisi Jardiknas akan lebih cepat terjalin, informasi dapat dengan cepat sampai dan tepat sasaran pula. Salam Pendidikan...! Dr. Ir. Gatot Hari Priowirjanto


Nama file: latihan5_3.html
<html>
<head>
<title>Latihan5-3</title>
</head>
<body>
<img width="80" height="80" src="image027.jpg" align="left" border="8">
Kehadiran Web Teknisi Jardiknas dapat memudahkan penyebaran informasi antara Biro Perencanaan dan Kerja Sama Luar Negeri - dan anggota Teknisi Jardiknas.
Keuntungan bila sistem jaringan informasi ini terbentuk, komunikasi antar Biro Perencanaan dan Kerja Sama Luar Negeri dan Provider dan anggota Teknisi Jardiknas akan lebih cepat terjalin, informasi dapat dengan cepat sampai dan tepat sasaran pula. Salam Pendidikan...! Dr. Ir. Gatot Hari Priowirjanto
</body>
</html>
READ MORE - HTML IMAGE (GAMBAR)

HTML TABLE


MATERI:
Element TABLE, Element CAPTION, Element TH(table header), Element TR(table row), Element TD(table data)


ELEMENT TABLE
Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas kolom dan baris. Element ini mempunyai attribute seperti align, bgcolor, border, cellpadding(jarak antara tepi sel dengan isi sel), cellspacing(jarak antara sel), width(lebar tabel), height(tinggi tabel). Element TABLE berisikan element CAPTION, TH, TR dan TD.

Sintaks:
<table
   align="left"|"center"|"right"
   bgcolor="color"
   border="pixel"
   cellpadding="pixel"
   cellspacing="pixel"
   width="pixel"|"%"
   height="pixel"|"%" >
........................
</table>



ELEMENT CAPTION 
Element CAPTION berfungsi untuk membuat judul dari tabel. Element ini harus berada di dalam element TABLE dan mempunyai attribute align dengan nilai top(judul terletak di atas tabel), dan bottom(judul terletak di bawah tabel).

Sintaks:
<caption  align="top"|"bottom">
      ..........................
</caption>


ELEMENT TR (Table Row)
Element TR mendefinisikan baris pada tabel dan element ini harus berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat pada element ini adalah align, valign(posisi vertikal), dan bgcolor.

Sintaks:
<tr
   align="left"|"center"|"right"
   valign="top"|"middle"|"bottom"
   bgcolor="color">

      ..........................
</tr>



ELEMENT TH (Table Header) dan TD (Table Data)
Element TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel. Element TH dan TD ini harus terletak di dalam element TR. Attribute kedua element ini adalah align, valign, bgcolor, colspan, rowspan

Sintaks:
<th
   align="left"|"center"|"right"
   valign="top"|"middle"|"bottom"
   bgcolor="color"
   colspan="number"
   rowspan="number">

      ..........................
</th>


<td
   align="left"|"center"|"right"
   valign="top"|"middle"|"bottom"
   bgcolor="color"
   colspan="number"
   rowspan="number">

      ..........................
</td>




LATIHAN
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.


Latihan 1:
Buat tabel untuk teks di bawah ini:

     Tabel 1.1

No.   Nama
1.      Rina Hastuti
2.      Ali Amran
3.      Rahmat
                         

Nama file: latihan4_1.html
<html>
<head>
<title>Latihan4-1</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>

<tr>
    <th>No.</th>
    <th>Nama</th>
</tr>
<tr>
    <td>1.</td>
    <td>Rina Hastuti</td>
</tr>
<tr>
   
<td>2.</td>
    <td>Ali Amran</td>
   
</tr>
<tr>
   
<td>3.</td>
    <td>Rahmat</td>
   
</tr>
</table>
</body>
</html>

Tugas tambahan:
1. Ganti ukuran cellpadding, cellspacing, border dengan lainnya.
2. Berikan nilai width dan height pada tabel hingga 100%.

Latihan 2:

Dari Latihan 1 gantilah warna background baris tabel menjadi baris-1=green baris-2=yellow baris-3=red baris-4=blue
                        

Nama file: latihan4_2.html
<html>
<head>
<title>Latihan4-2</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>

<tr bgcolor="green">
    <th>No.</th>
    <th>Nama</th>
</tr>
<tr bgcolor="yellow">
    <td>1.</td>
    <td>Rina Hastuti</td>
</tr>
<tr bgcolor="red">
   
<td>2.</td>
    <td>Ali Amran</td>
   
</tr>
<tr bgcolor="blue">
   
<td>3.</td>
    <td>Rahmat</td>
   
</tr>
</table>
</body>
</html>

Tugas tambahan:
Ubahlah align pada baris-2 kolom-1 dan baris-4 kolom-2 ke kanan


Latihan 3:
Buat tabel untuk teks di bawah ini:

     Tabel 1.1

    Data Siswa
No.    Nama
1.      Rina Hastuti
2.      Ali Amran
3.      Rahmat
                         

Nama file: latihan4_3.html
<html>
<head>
<title>Latihan4-3</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>

<tr bgcolor="fuchsia">
    <th colspan="2">Data Siswa</th>
</tr>
<tr bgcolor="green">
    <th>No.</th>
    <th>Nama</th>
</tr>
<tr bgcolor="yellow">
    <td>1.</td>
    <td>Rina Hastuti</td>
</tr>
<tr bgcolor="red">
   
<td>2.</td>
    <td>Ali Amran</td>
   
</tr>
<tr bgcolor="blue">
   
<td>3.</td>
    <td>Rahmat</td>
   
</tr>
</table>
</body>
</html>
READ MORE - HTML TABLE
Diberdayakan oleh Blogger.
 
 
Copyright © Bengkel Web
2011 All Reserved
Devilzc0de Simple Template by Awang Shellovers