JARINGAN DASAR

Jaringan Dasar

1.    Apa yang dimaksud dengan jaringan?

2.    Jelaskan macam-macam jaringan!

3.    Apa yang dimaksud dengan topologi jaringan?

4.    Jelaskan macam-macam topologi jaringan!

5.    Sebutkan perangkat yang dibutuhkan dalam pembuatan jaringan!

6.    Jelaskan manfaat sharing data dalam jaringan!

Jawab

1. Jaringan

Jaringan (network) adalah sebuah sistem operasi yang terdiri atas sejumlah komputer dan perangkat jaringan lainnya yang bekerja bersama-sama untuk mencapai suatu tujuan yang sama atau suatu jaringan kerja yang terdiri dari titik-titik (nodes)/perangkat yang terhubung satu sama lain, dengan atau tanpa kabel.

2. Macam-macam Jaringan

A. Berdasarkan Jangkauan Geografis

1. LAN

Local Area Network atau yang sering disingkat dengan LAN merupakan jaringan yang hanya mencakup wilayah kecil saja, semisal warnet, kantor, atau sekolah. Umumnya jaringan LAN luas areanya tidak jauh dari 1 km persegi.

Biasanya jaringan LAN menggunakan teknologi IEEE 802.3 Ethernet yang mempunyai kecepatan transfer data sekitar 10, 100, bahkan 1000 MB/s. Selain menggunakan teknologi Ethernet, tak sedikit juga yang menggunakan teknologi nirkabel seperti Wi-fi untuk jaringan LAN.

2. MAN

Metropolitan Area Network atau MAN merupakan jaringan yang mencakup suatu kota dengan dibekali kecepatan transfer data yang tinggi. Bisa dibilang, jaringan MAN merupakan gabungan dari beberapa jaringan LAN.

Jangakauan dari jaringan MAN berkisar 10-50 km. MAN hanya memiliki satu atau dua kabel dan tidak dilengkapi dengan elemen switching yang berfungsi membuat rancangan menjadi lebih simple.

3. WAN

Wide Area Network atau WAN merupakan jaringan yang jangkauannya mencakup daerah geografis yang luas, semisal sebuah negara bahkan benua. WAN umumnya digunakan untuk menghubungkan dua atau lebih jaringan lokal sehingga pengguna dapat berkomunikasi dengan pengguna lain meskipun berada di lokasi yang berbebeda.

B. Berdasarkan Distribusi Sumber Informasi/ Data

1. Jaringan Terpusat

Yang dimaksud jaringan terpusat adalah jaringan yang terdiri dari komputer client dan komputer server dimana komputer client bertugas sebagai perantara dalam mengakses sumber informasi/ data yang berasal dari komputer server.

2. Jaringan Terdistribusi

Jaringan ini merupakan hasil perpaduan dari beberapa jaringan terpusat sehingga memungkinkan beberapa komputer server dan client yang saling terhubung membentuk suatu sistem jaringan tertentu.

C. Berdasarkan Media Transmisi Data yang Digunakan

1. Jaringan Berkabel (Wired Network)

Media transmisi data yang digunakan dalam jaringan ini berupa kabel. Kabel tersebut digunakan untuk menghubungkan satu komputer dengan komputer lainnya agar bisa saling bertukar informasi/ data atau terhubung dengan internet.

2. Jaringan Nirkabel (Wireless Network)

Dalam jaringan ini diperlukan gelombang elektromagnetik sebagai media transmisi datanya. Berbeda dengan jaringan berkabel (wired network), jaringan ini tidak menggunakan kabel untuk  bertukar informasi/ data dengan komputer lain melainkan menggunakan gelombang elektromagnetik untuk mengirimkan sinyal informasi/ data antar komputer satu dengan komputer lainnya.

D. Berdasarkan Peranan dan Hubungan Tiap Komputer dalam Memproses Data

1. Jaringan Client-Server

Jaringan ini terdiri dari satu atau lebih komputer server dan komputer client. Biasanya terdiri dari satu komputer server dan beberapa komputer client. Komputer server bertugas menyediakan sumber daya data, sedangkan komputer client hanya dapat menggunakan sumber daya data tersebut. Baca juga mengenai Tugas dan Tanggung Jawab Admin Server

2. Jaringan Peer to Peer

Dalam jaringan ini, masing-masing komputer, baik itu komputer server maupun komputer client mempunyai kedudukan yang sama. Jadi, komputer server dapat menjadi komputer client, dan sebaliknya komputer client juga dapat menjadi komputer server.

3. Topologi Jaringan

Topologi jaringan adalah, hal yang menjelaskan hubungan geometris antara unsur-unsur dasar penyusun jaringan, yaitu node, link, dan station. Topologi jaringan dapat dibagi menjadi 6 kategori utama seperti di bawah ini. Setiap jenis topologi di atas masing-masing memiliki kelebihan dan kekurangan

4. Macam-macam Topologi Jaringan

Topologi jaringan komputer merupakan bentuk/ struktur jaringan yang menghubungkan komputer satu dengan yang lain. Untuk pembahasan lebih jelas mengenai topologi jaringan.

1. Topologi Bus

Topologi bus bisa dibilang topologi yang cukup sederhana dibanding topologi yang lainnya. Topologi ini biasanya digunakan pada instalasi jaringan berbasis fiber optic, kemudian digabungkan dengan topologi star untuk menghubungkan client atau node.

Topologi bus hanya menggunakan sebuah kabel jenis coaxial disepanjang node client dan pada umumnya, ujung kabel coaxial tersebut biasanya diberikan T konektor sebagai kabel end to end .

Kelebihan Topologi Bus :

1. Biaya instalasi yang bisa dibilang sangat murah karena hanya menggunakan sedikit kabel.
2. Penambahan client/ workstation baru dapat dilakukan dengan mudah.
3. Topologi yang sangat sederhana dan mudah di aplikasikan. 

Kekurangan Topologi Bus :

1. Jika salah satu kabel pada topologi jaringan bus putus atau bermasalah, hal tersebut dapat mengganggu komputer workstation/ client yang lain.
2. Proses sending (mengirim) dan receiving (menerima) data kurang efisien, biasanya sering terjadi tabrakan data pada topologi ini.
3. Topologi yang sangat jadul dan sulit dikembangkan.

2. Topologi Star

Topologi star atau bintang merupakan salah satu bentuk topologi jaringan yang biasanya menggunakan switch/ hub untuk menghubungkan client satu dengan client yang lain. 

Kelebihan Topologi Star

1. Apabila salah satu komputer mengalami masalah, jaringan pada topologi ini tetap berjalan dan tidak mempengaruhi komputer yang lain.
2. Bersifat fleksibel
3. Tingkat keamanan bisa dibilang cukup baik daripada topologi bus.
4. Kemudahan deteksi masalah cukup mudah jika terjadi kerusakan pada jaringan.

Kekurangan Topologi Star

1. Jika switch/ hub yang notabenya sebagai titik pusat mengalami masalah, maka seluruh komputer yang terhubung pada topologi ini juga mengalami masalah.
2. Cukup membutuhkan banyak kabel, jadi biaya yang dikeluarkan bisa dibilang cukup mahal.
3. Jaringan sangat tergantung pada terminal pusat.

3. Topologi Ring

Topologi ring atau cincin merupakan salah satu topologi jaringan yang menghubungkan satu komputer dengan komputer lainnya dalam suatu rangkaian melingkar, mirip dengan cincin. Biasanya topologi ini hanya menggunakan LAN card untuk menghubungkan komputer satu dengan komputer lainnya.

Kelebihan Topologi Ring :

1. Memiliki performa yang lebih baik daripada topologi bus.
2. Mudah diaplikasikan.
3. Konfigurasi ulang dan instalasi perangkat baru bisa dibilang cukup mudah.
4. Biaya instalasi cukup murah

Kekurangan Topologi Ring :

1. Kinerja komunikasi dalam topologi ini dinilai dari jumlah/ banyaknya titik atau node.
2. Troubleshooting bisa dibilang cukup rumit.
3. Jika salah satu koneksi putus, maka koneksi yang lain juga ikut putus.
4. Pada topologi ini biasnaya terjadi collision (tabrakan data).

4. Topologi Mesh

Topologi mesh merupakan bentuk topologi yang sangat cocok dalam hal pemilihan rute yang banyak. Hal tersebut berfungsi sebagai jalur backup pada saat jalur lain mengalami masalah.

Kelebihan Topologi Mesh :

1. Jalur pengiriman data yang digunakan sangat banyak, jadi tidak perlu khawatir akan adanya tabrakan data (collision).
2. Besar bandwidth yang cukup lebar.
3. Keamanan pada topologi ini bisa dibilang sangat baik.

Kekurangan Topologi Mesh :

1. Proses instalasi jaringan pada topologi ini sangatlah rumit.
2. Membutuhkan banyak kabel.
3. Memakan biaya instalasi yang sangat mahal, dikarenakan membutuhkan banyak kabel.

5. Topologi Peer to Peer

Topologi peer to peer merupakan topologi yang sangat sederhana dikarenakan hanya menggunakan 2 buah komputer untuk saling terhubung. Pada topologi ini biasanya menggunakan satu kabel yang menghubungkan antar komputer untuk proses pertukaran data.

Kelebihan Topologi Peer to Peer

1. Biaya yang dibutuhkan sangat murah.
2. Masing-masing komputer dapat berperan sebagai client maupun server.
3. Instalasi jaringan yang cukup mudah.

Kekurangan Topologi Peer to Peer

1. Keamanan pada topologi jenis ini bisa dibilang sangat rentan.
2. Sulit dikembangkan.
3. Sistem keamanan di konfigurasi oleh masing-masing pengguna.
4. Troubleshooting jaringan bisa dibilang rumit.

6. Topologi Linier

Topologi linier atau biasaya disebut topologi bus beruntut. Pada topologi ini biasanya menggunakan satu kabel utama guna menghubungkan tiap titik sambungan pada setiap komputer.

Kelebihan Topologi Linier

1. Mudah dikembangkan.
2. Membutuhkan sedikit kabel.
3. Tidak memperlukan kendali pusat.
4. Tata letak pada rangkaian topologi ini bisa dibilang  cukup sederhana.

Kekurangan Topologi Linier

1. Memiliki kepadatan lalu lintas yang bisa dibilang cukup tinggi.
2. Keamanan data kurang baik.

7. Topologi Tree

Topologi tree atau pohon merupakan topologi gabungan antara topologi star dan juga topologi bus. Topologi jaringan ini biasanya digunakan untuk interkoneksi antar sentral dengan hirarki yang berbeda-beda.

Kelebihan Topologi Tree

1. Susunan data terpusat secara hirarki, hal tersebut membuat manajemen data lebih baik dan mudah.
2. Mudah dikembangkan menjadi jaringan yang lebih luas lagi.

Kekurangan Topologi Tree

1. Apabila komputer yang menduduki tingkatan tertinggi mengalami masalah, maka komputer yang terdapat dibawahnya juga ikut bermasalah
2. Kinerja jaringan pada topologi ini terbilang lambat.
3. Menggunakan banyak kabel dan kabel terbawah (backbone) merupakan pusat dari teknologi ini

8. Topologi Hybrid

Topologi hybrid merupakan topologi gabungan antara beberapa topologi yang berbeda. Pada saat dua atau lebih topologi yang berbeda terhubung satu sama lain, disaat itulah gabungan topologi tersebut membentuk topologi hybrid.

Kelebihan Topologi Hybrid

1. Freksibel
2. Penambahan koneksi lainnya sangatlah mudah.

Kekurangan Topologi Hybrid

1. Pengelolaan pada jaringan ini sangatlah sulit.
2. Biaya pembangunan pada topologi ini juga terbilang mahal.
3.  Instalasi dan konfigurasi jaringan pada topologi ini bisa dibilang cukup rumit, karena terdapat topologi yang berbeda-beda.

5. Perangkat yang dibutuhkan dalam pembuatan jaringan

1. Modem

Modem (Modulator Demodulator) merupakan perangkat yang menghubungkan kita ke internet. Perangkat ini berfungsi mengubah sinyal Analog menjadi sinyal Digital. Modem mengganti sinyal digital dari komputer menjadi sinyal analog ketika melewati medium seperti saluran telepon, kemudian modem merubah kembali sinya tersebut menjadi sinya digital saat menuju komputer tujuan. Hal ini dilakukan agar bisa dipahami oleh komputer.

2. Kabel Jaringan

Kabel jaringan merupakan peralatan yang berfungsi sebagai media penghubung antara komputer dengan komputer atau komputer dengan perangkat jaringan lainnya. Berikut adalah jenis-jenis kabel yang digunakan dalam jaringan komputer.

• Twisted Pair (UTP dan STP)
• Coaxial
• Fiber Optic

3. Network Interface Card (NIC)

Perangkat keras jaringan komputer yang satu ini dikenal dengan istilah Ethernet Card atau lebih populer dengan istilah LAN Card. Adalah kartu jaringan yang berfungsi sebagai penghubung antar komputer dengan sebuah jaringan. Umumnya NIC ini sudah terintegrasi dengan motherboard komoputer dan laptop, namun ada juga berupa kartu yang ditancapkan ke motherboard. Bahkan seiring dengan maju perkembangan, ada juga yang berupa USB.

4. Konektor

Konektor adalah alat yang menghubungkan kabel dengan network adapter. Coba bayangkan apabila tidak ada konektor, dengan cara bagaimana kabel-kabel jaringan dapat terhubung dengan network adapter atau NIC. Jeni konektor tentunya disesuaikan dengan jenis kabel yang digunakan.

• Konektor RJ-45 digunakan untuk Kabel UTP
• Konektor BNC/T digunakan untuk Kabel Coaxial
• Konektor ST digunakan untuk Kabel Fiber Optic

6. Manfaat Sharing Data Dalam Jaringan

Sharing device dan data memiliki beberapa manfaat atau keuntungan antara lain :

1. Menghemat waktu, tenaga dan biaya
2. Dapat mengirim file dari satu computer secara langsung ke komputer lain dalam satu jaringan
3. Satu device (contoh: printer) dapat digunakan oleh beberapa pengguna dalam satu jaringan.

Hyper Text Markup Language

1. Pengenalan Html

Sebelum kita bahas lebih detail tentang CSS dan berbagai hal yang berkaitan dengan style tersebut, seperti kata pepatah “tak kenal maka tak saying”, maka ada baiknya jika kita sedikit belajar lagi tentang bahasa dasar dalam pembuatan dokumen web yang dapat dibuat menggunakan CSS yaitu HTML. HTML atau Hypertext Markup Language adalah sebuah protokol yang digunakan untuk membuat format suatu dokumen web yang mampu dibaca dalam browser dari berbagai platform komputer manapun. Sifat dari bahasa HTML ini adalah client script dimana dokumen tersebut dapat dibuka di dalam komputer stand alone yang tidak membutuhkan server untuk dapat menampilkannya di dalam browser. Dokumen HTML merupakan file yang pada umumnya ber-esktensi .htm atau .html dimana bahasa HTML tersebut tersusun atas tag atau syntax yang berformat . 

Adapun aturan penulisan HTML tersebut adalah :

a. Dalam penulisannya, tag HTML diapit dengan dua karakter kurung siku (angle bracket) “<” dan “>”

b. Tag HTML secara normal selalu berpasangan, contoh : <div> dan </div>

c. Tag HTML pertama dalam suatu pasangan adalah tag awal, dan tag kedua merupakan tag akhir, contoh : <index> akan diakhiri dengan </index>.

d. Tag HTML tidak case sensitive dimana tag dengan huruf kecil sama dengan tag dengan huruf besar, contoh : <b> sama dengan <B>

e. Jika dalam suatu tag terdapat tag lagi, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan. Contoh : <b><i> huruf tebal dan miring </i></b>

f. Penulisan script HTML selalu diawali dengan <html> dan diakhiri dengan </html> 

Secara teknis web browser akan melakukan penerjemahan dokumen untuk ditampilkan dalam bentuk html jika dokumen tersebut terdapat diantara tag <html> dan </html>. Ada baiknya dalam penulisan HTML menggunakan huruf kecil untuk menghadapi HTML generasi berikutnya (rekomendasi dari W3C untuk HTML 4.0 dan XHTML)

Dalam HTML struktur dibagi menjadi dua bagian yaitu :

a. Bagian Kepala (head)

Bagian ini memuat informasi mengenai kepala dokumen

b. Bagian Badan (body)

Bagian ini memuat informasi mengenai badan dokumen

Adapun struktur utama penulisan dalam HTML adalah :

<html>

<head>

<!—- Bagian Head --!>

</head>

<body>

<!—- Bagian Body --!>

</body>

</html>

Sedangkan pembuatan dokumen web menggunakan HTML pun sangat mudah karena anda dapat membuatnya menggunakan program editor standar Windows seperti Notepad dan menuliskan bahasa dan aturan HTML dan kemudian menyimpannya dalam ekstensi .htm atau .html. 

Untuk menggunakan program notepad dapat dipilih lewat menu Start – Program Files – Accessories – Notepad. Kemudian ketikkan kode html anda seperti contoh berikut :

Gambar Script html dalam program notepad

Kemudian simpan dengan memilih menu File – Save As, dan simpan dengan ekstensi .html atau .html

Gambar  Menyimpan dokumen dengan ekstensi .html

Setelah itu tampilan hasil dokumen html dari script yang telah dibuat tersebut dapat anda lihat menggunakan web browser seperti Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera dan sejenisnya.

Gambar Dokumen html dilihat dalam web browser Internet Explorer

2. Dokumen Head

Dalam bagian head ini kita dapat meletakkan beberapa tag diantara <head> dan </head> yaitu :

a. Judul 

Merupakan tag yang mendeklarasikan judul dari suatu dokumen HTML. Struktur tag untuk judul ini adalah :

<title>...judul...</title> 

b. URL 

Merupakan tag yang menyatakan URL asal suatu dokumen HTML. Struktur tag untuk url asal adalah :

<base href=”...”> 

c. Link 

Merupakan tag untuk menghubungankan antara suatu dokumen dengan dokumen lainnya dalam website yang dibuat. Struktur tag untuk menghubungkan dokumen adalah :

<link href=”...”> 

d. Meta

Merupakan tag yang menyatakan suatu meta informasi dalam suatu dokumen HTML. Struktur tag untuk meta informasi adalah :

<meta name=”...” content=”...”> 

e. Index

Merupakan tag yang menyatakan bahwa dokumen tersebut diperkenankan di indeks oleh server web. Struktur tag untuk isi index adalah :

<isindex>

f. Style

Merupakan tag yang mendefinisikan style dari dokumen HTML. Struktur tag untuk mendefinisikan style adalah :

<style ahref=”...”> 

Contoh penggunaan dalam HTML :

<html>

<head>

<title>Belajar HTML</title>

<link href="global.css" rel="stylesheet" type="text/css"> 

</head>

<body>

... dokumen html ...

</body>

</html>

3. Atribut Body

Bagian body dalam HTML adalah bagian dimana dokumen web akan terlihat dalam browser. Dalam bagian ini dapat berisi atribut-atribut, aturan dan isi dari dokumen web yang akan ditampilkan. Penulisan atribut body ini biasanya dituliskan sesudah tag “<body” dan sebelum “>” maupun sesudah tag <body> dan sebelum tag </body>. Dalam bagian body tersebut terdapat beberapa atribut yang bisa digunakan. Beberapa atribut tersebut adalah : 

a. Warna Latar

Atribut tag untuk mendefinisikan warna latar untuk isi di dalam dokumen web dengan menuliskan “bgcolor=nilai warna”. Contoh :

<body bgcolor=”lime”>

b. Warna Teks

Atribut tag untuk mendefinisikan warna teks untuk isi di dalam dokumen web dengan menuliskan “text=nilai warna”. Contoh :

<body text=”green”>

c. Warna Link

Jika anda memiliki sebuah tombol untuk menghubungkan (link / hyperlink) dalam dokumen web yang anda buat dengan dokumen web lainnya, anda dapat mendefinisikan warna dari tombol link tersebut ketika kita klik dengan menggunakan tag <link=”nilai warna1” alink=”nilai warna2”> contoh :

<body link=”green” alink=”grey”>

Contoh penerapan dalam dokumen html :

<html>

<head>

<title>Dokumen Body</title>

</head>

<body bgcolor="lime" text="green" link="white" alink="grey"> 

Teks berwarna lime<br>

<a href=#>tombol1</a>

<a href=#>tombol2</a>

</body>

</html>

Dalam browser script diatas akan terlihat dua tombol yaitu tombol1 dan tombol2 dan ketika kita klik tombol tersebut maka akan berubah menjadi warna hijau seperti terlihat pada gambar berikut : 

Gambar Tampilan script dalam browser

4. Format Teks

Dalam dokumen HTML, teks mempunyai bentuk dalam pemformatan dalam dokumen tersebut. Berikut ini adalah beberapa tag beserta fungsinya untuk melakukan pengaturan dan format tampilan teks dalam dokumen HTML.

a. Font

Dalam setting format teks, tag font disini memiliki beberapa macam nilai, diantaranya adalah :

• “face” atau jenis font 
• “size” atau ukuran font
• “color” atau warna font
• “style” atau style font

Contoh penulisan syntaknya adalah :

<font face=”verdana” size=”4 px” color=”green” style="background-color:”#0066CC"> teks dokumen </font>

b. Paragraf

Digunakan untuk membuat teks dokumen yang berbentuk paragraf. Syntaknya adalah :

<p>teks dalam paragraf</p> 

c. Perataan 

Digunakan untuk mengatur perataan teks dalam sebuah paragraph dalam dokumen web yang dibuat, syntaknya adalah : 

<align=...>teks 

Nilai dari perataan adalah : 

• Rata kanan = right 
• Rata kiri = left 
• Rata tengah = center 
• Rata kanan-kiri = justify

d. Preformatted Text 

Digunakan untuk mengembalikan format teks ke posisi awal atau posisi default pertama kali sebelum diformat. Syntaks penulisan preformatted teks adalah : 

<pre>...</pre> 

e. Line break 

Line break adalah pemenggalan atau pemutusan kalimat dengan menggunakan garis dengan perintah <hr>. Adapun property <hr> adalah “align” untuk perataan garis, “size” untuk ukuran dari garis, dan “color” untuk warna garis seperti pada contoh berikut : 

<hr align=”..." size="..." color="...”>

Dalam pemenggalan kalimat dalam dokumen web selain menggunakan garis horizontal, anda dapat juga menggunakan tag <br /> untuk pemenggalan baris dalam sebuah kalimat. Biasanya tag ini digunakan pada kalimat dalam paragraf.

<p> kalimat satu<br />kalimat dua<br /></p>

f. Komentar

Anda dapat memberikan komentar dalam dokumen web yang tidak akan ditampilkan dalam browser menggunakan perintah :

<!-- Komentar -->

g. Format Heading

Heading dalam HTML sama seperti dalam Ms. Word yaitu format ukuran huruf dalam dokumen HTML. Syntak penulisannya adalah 

<H1> Teks Heading </H1>

Teks yang dihasilkan ketika menggunakan script ini adalah ukuran teks menurutlevel heading yaitu dari level heading 1

sampai dengan level heading 6 atau

.

Contoh penerapan dalam HTML :

<html>

<head>

</head>

<body>

<H1> format teks </H1>

<font face=”verdana” size=”4 px” color=”green” style="background-color:”#0066CC"> format teks</font>

<p align="right">format teks</p>

<hr align="center" size="2" color="red">

<p align="left"> format teks1<br>format teks2<br></p>

<!-- format teks --!>

</body>

</html>

Tampilan dalam browser akan terlihat :

Gambar Tampilan format font dalam browser

style="text-align: justify;">

6. Daftar

Penggunaan daftar dalam HTML biasanya digunakan untuk menampilkan informasi-informasi dalam bentuk option.

a. Membuat daftar berurut 

Syntak :

<OL>...</OL> : Untuk membuat daftar tak berurutan

<LI>...</LI> : Isi daftar pilihan

b. Membuat daftar tak berurut

Syntak :

<UL>...</UL> : Untuk membuat daftar berurut

<LI>...</LI> : Isi daftar pilihan

Dapat juga anda merubah type daftar menggunakan <ol type=”awalan”> seperti contoh berikut :

<html>

<head><title>penggunaan daftar</title>

<body>

Daftar belanjaan :

<ul>

<li>bawang putih

<li>bawang merah

<li>cabe

</ul>

Yang tidak dibeli :

<ol type=a>

<li>kecambah

<li>daging kuda

<li>daging semut

</body>

</html>

Gambar Tampilan penggunaan daftar dalam browser

7. Gambar

Gambar atau image dalam halaman Web memegang fungsi yang sangat penting. Selain fungsinya untuk informasi gambar, image juga akan menambahkan unsur artistik yang akan membuat halaman web nampak lebih hidup sehingga akan lebih menarik dari sisi tampilan web yang dibuat. Sintaks penulisannya adalah :

<img src="lokasi-gambar/nama-gambar.tipe">

Sedangkan atribut untuk gambar tersebut berupa :

src : letak atau alamat gambar

alt : alternatif atau alternate gambar

width : lebar gambar

height : tinggi gambar

Contoh:

<img src=”C:/Documents and Settings/AllUsers/

Documents/My Pictures/Sample Pictures/sunset.jpg”>

8. Hyperlink

Hyperlink atau link dalam HTML berfungsi untuk menghubungkan antara halaman web atau dokumen satu dengan lainnya agar saling terhubung. Syntak dasar penulisannya adalah : 

<a href=” lokasi/nama.tipe”> Teks yang dijadikan link </A>

Link dalam HTML dibagi menjadi dua yaitu :

a. Link ke halaman lain

Syntak :

<a href=”alamatfile/nama.ekstensi”> Hyperlink ke halaman </a>

Contoh :

<a href=”c:/web/profil.html”>Profil Perusahaan</a>

b. Link ke servis internet lain

HTTP :

<a href=”http://alamathttp/nama.ekstensi”> Hyperlink ke http </a>

FTP :

<a href=”ftp://alamatftp/nama.ekstensi”> Hyperlink ke ftp </a>

Mailto :

<a href=”mailto:alamat_e-mail”> Hyperlink ke e- mail </a>

9. Warna

Warna dalam html dapat ditentukan dengan tiga cara, yaitu dengan memasukkan nilai warna dalam nama (common name), hexadecimal, dan nilai RGB.

Nilai warna Common name 

Anda dapat menentukan warna dengan menggunakan nilai warna common name, yaitu dengan memasukkan warna yang diinginkan dan biasanya menggunakan nilai warna dalam bahasa inggris seperti contoh : 

color:blue bgcolor:lime 

Nilai warna Hexadecimal 

Dengan nilai warna hexadecimal anda dapat menentukan warna dengan menggunakan nilai warna dalam bentuk hexadecimal yang sama dengan yang digunakan jika kita menggunakan html sebagai contoh :

color:#00ffff bgcolor:#00ccff

Nilai warna RGB 

Dengan menggunakan nilai warna RGB anda dapat menentukan warna dengan menggunakan nilai RGB dengan memasukkan nilai dari warna werah hijau dan biru (Red, Green, Blue) seperti contoh sebagai berikut :

color:rgb(255,255,204)

10. Table

Tabel merupakan elemen yang terdiri dari sel dan tersusun atas baris dan kolom. Digunakan untuk membuat bentuk tabel yang berisi kolom dan baris,

Syntaknya :

<table>atribut table</table>

Atribut table adalah :

<tr>...</tr> : membentuk baris tabel

<td>...</td> : membentuk kolom table

Table juga memiliki atribut untuk pengaturannya yaitu :

width : lebar table

height : tinggi table

border : tebal garis table

cellspacing : spasi antar sel 

cellpadding : spasi dalam sel

align : perataan teks dalam sel

bgcolor : warna background table

Di antaranya tag tersebut dimasukkan perintah pembuatan baris dan kolom. Pembuatan baris, selalu mendahului pembuatan kolom seperti terlihat dalam contoh berikut :

<html>

<head><title>membuat table</title></head>

<body>

<table width=300 height=100 border=1 bgcolor=grey>

<tr>

<td width=100>kolom1 baris 1</td>

<td>kolom2 baris 1</td>

</tr>

<tr height=80>

<td>kolom1 baris 2</td>

<td>kolom2 baris 2</td>

</tr>

</table>

</body>

</html>

Gambar Tampilan script table dalam browser

11. Form

Form dalam HTML dapat digunakan untuk mengirim data melewati web dan kadang juga digunakan sebagai contact form untuk konversi informasi yang di input-kan oleh user ke dalam e-mail. Dalam penggunaan dalam dokumen web, form harus di kaitkan dengan script program yang akan memproses data yang di inputkan oleh user ke dalam form tersebut. 

Tag-tag yang digunakan dalam membuat form dengan HTML berupa :

form, input, textarea, select dan option.

Dalam HTML form dalam penulisannya dengan HTML membutuhkan atribut action yang akan menentukan kemana isi dari form yang akan di kirim nantinya. Atribut method akan menentukan tentang bagaimana data dalam form tersebut di kirim yang memiliki nilai get (nilai default) atau post dimana nilai-nilai tersebut adalah nilai yang paling banyak dipakai.

Jadi sebuah elemen form akan terlihat seperti contoh berikut :

<form action="processingscript.ekstensi" method="post"> </form>

Tag input adalah inti dari sebuah form, dimana tag input dapat memiliki sepuluh form dan harus ditutup dengan tanda miring “/” seperti contoh :

• <input type="text" /> adalah textbox standar. Dapat memiliki sebuah atribut value, yang mengatur teks dalam textbox. 
• <input type="password" /> sama dengan textbox, namun menampilan tanda bintang yang menggantikan karakter yang diketikkan. 
• · <input type="checkbox" /> adalah bentuk checkbox, yang dapat di tampilkan dan tidak oleh user. Tag ini memiliki sebuah atribut checked, yang digunakan dalam format <input type="checkbox" checked="checked" />. 
• <input type="radio" /> hampir sama dengan checkbox, namun user hanya dapat memilih sebuah radio button dalam kelompok tersebut. Tag ini juga memiliki atribut checked, yang digunakan sama dengan checkbox. 
• <input type="file" /> adalah suatu daerah yang menampilkan file-file dalam komputer seperti ketika anda membuka atau menyimpan dokumen dalam program. 
• <input type="submit" /> biasanya berada pada sebuah tombol dimana ketika dipilih maka akan mengirim (submit) form tersebut. Anda dapat mengontrol penampakan text dalam tombol submit (sama seperti dalam tipe button dan reset) dengan atribut value, seperti contoh :
• 
  
• 
  
• <input type="submit" value="ini adalah nilai tombol"/>. 
• <input type="image" /> adalah sebuah gambar (image) dimana ketika dipilih maka akan mengirimkan form. Tag ini juga membutuhkan atribut src, seperti tag img. 
• <input type="button" /> adalah sebuah tombol (button) yang tidak akan melakukan apapun tanpa penambahan kode ekstra lagi. 
• <input type="reset" /> adalah sebuah tombol dimana ketika dipilih maka akan mengulang kembali (reset) field dalam form.
• <input type="hidden" /> adalah sebuah field yang tidak akan terlihat dan digunakan untuk melewatkan informasi seperti nama alamat email pada form yang akan dikirimkan. 

Sebuah textarea biasanya berupa textbox yang luas yang membutuhkan atribut baris (rows) dan kolom (cols) seperti pada contoh berikut :

<textarea rows="5" cols="20">teks</textarea>

Tag select bekerja dengan tag option dalam pembuatan sebuah drop-down select boxes. Seperti pada contoh berikut :

<select>

<option value="opsi pertama">Option 1</option>

<option value="opsi kedua">Option 2</option>

<option value="opsi ketiga">Option 3</option>

</select>

Ketika form dikirimkan, nilai dari opsi yang terpilih juga akan dikirimkan. Hampir sama dengan atribut checked dari checkbox dan radio button, sebuah tag option juga dapat memiliki atribut selected yang akan digunakan dalam format : 

<option value="hewan" selected="selected">kucing</option>

Keseluruhan tag yang disebutkan diatas akan terlihat bagus dalam halaman web, namun jika anda mengaitkan form anda dalam sebuah program form maka perintah yang ada di dalamnya akan diabaikan. Hal ini disebabkan karena filed form tersebut memerlukan sebuah nama (name). Jadi atribut name harus ditambahkan dalam field seperti pada contoh berikut :

<input type="text" name="teks komentar" />

Dalam contoh berikut, form akan bekerja jika terdapat file 'koneksi.php' yang ditetapkan dalam atribut action dalam tag form untuk menangani file dalam form yang dikirimkan)

<html><head>

<title>belajar form</title>

</head>

<body>

<form action="koneksi.php" method="post">

<p>Nama:</p>

<p><input type="text" name="nama" value="nama anda" /></p>

<p>Komentar: </p>

<p><textarea name="komentar" rows="5" cols="20">Komentar Anda</textarea></p>

<p>data:</p>

<p><input type="radio" name="data" value="Laki-laki" /> laki</p>

<p><input type="radio" name="data" value="Perempuan" /> perempuan</p>

<p><input type="submit" value="kirim" /></p>

<p><input type="reset" value="ulangi"/></p>

</form>

</body>

</html>

Tampilan dalam browser akan terlihat seperti gambar berikut :