PERSIAPAN SERVER AAA(AUTHENCATION,AUTHORIZATION,ACCOUNTING)

  Pengertian dari AAA server atau Authentication, Authorization dan Accounting .

AAA (Authentication, Authorization dan Accounting) merupakan nama yang diambil berdasarkan pada fungsi yang dapat dilakukannya yakni sistem melakukan kegiatan otentikasi, otorisasi dan akunting terhadap setiap orang yang mengakses jaringan secara remote. AAA terdiri dari:

• Authentication, sebuah metode untuk memverifikasi user, berbasiskan pada username dan password, Token card atau respon Challenge.
• Authorization, berarti untuk menyediakan access control terhadap resource atau operasi yang dapat dilakukan oleh user.
• Accounting, yang berarti untuk menelusuri tindakan user, resource yang diakses dan lamanya mengakses suatu resource.

Sistem AAA digunakan untuk :

• Melindungi jaringan dari intruder yang berusaha untuk mengakses dengan cara tidak sah.
• menyediakan sekuriti jaringan untuk lingkungan kampus, dial-up dan internet.

Sistem AAA merupakan bagian kunci dari pengamanan jaringan jika remote access diijinkan: 

• AAA melindungi akses ke NAS (Network Access Server), yang disimpan pada jaringan perimeter (perbatasan)
• AAA melindungi akses ke jaringan itu sendiri.

1. Otentikasi

    Otentikasi berasal dari bahasa Yunani, Authentes yang berarti penulis. Otentikasi merupakan proses mengidentifikasi seseorang, biasanya berdasarkan pada username dan password. dengan kata lain otentikasi dilakukan untuk memastikan siapa pengguna jaringan sebenarnya. hal ini penting karena kita tidak menginginkan seseorang mengkases jaringan jika orang tersebut tidak diharapkan. otentikasi mengijinkan administrator jaringan untuk mengidentifikasi siapa yang dapat terkoneksi ke perangkat jaringan atau resource tertentu dengan cara memasukkan username dan password.

    Dalam sistem keamanan, otentikasi berbeda dari otorisasi, yang merupakan proses pemberian hak akses terhadap objek-objek sebuah sistem berdasarkan identitas mereka. otentikasi biasanya lebih mengarahkan kepada siapa dirinya dibanding dengan hak akses dari seseorang. otorisasi didefinisikan sebagai proses mengijinkan atau penolakan mengakses sumber daya jaringan. mekanisme penggunaan resource jaringan dilakukan dalam dua langkah. langkah pertama adalah otentikasi, memeriksa apakah seorang user diberi hak akses, berdasarkan pada username dan password. tahap dua adalah otorisasi, untuk mengakses bermacam-macam resource jika dia seorang user yang sah.

   Teknik otentikasi (dalam komunikasi data) adalah prosedur yang digunakan untuk membuktikan:

1. Keaslian pesan (Message Integrity)
2. Keaslian identitas pengirim (User Authentication)
3. Pengirim tidak dapat menyangkal isi pesan (Non-Repudation).

  Identifikasi didefinisikan sebagai prosedur atau teknologi yang menghubungkan antara user, group atau entitas lain dengan satu atau beberapa identifier.

2. Jenis - Jenis Otentikasi

Terdapat dua jenis metode otentikasi:

1. Otentikasi user, tujuan dari otentikasi user adalah untuk mengotentikasi pengguna terhadap sebuah sistem. hal ini dilakukan berbasis pada username, password, smart cards, token atau PINs. jenis dari otentikasi dibatasi oleh sesuatu yang dapat diingat oleh pengguna, dapat atau mudah dibawa. Otentikasi user tidak mengharapkan pengguna untuk mengingat kunci kriptografi yang panjang, yang susah diingat.
2. Otentikasi entitas, jenis otentikasi ini menggunakan mekanisme pertukaran otentikasi. proses otentikasi dilakukan dengan mempertukarkan serangkaian pesan antara sepasang entitas, biasanya disebuth protokol otentikasi. pendekatan jenis ini digunakan melalui jaringan yang kurang aman dalam mengontrol akses terhadap sumber daya informasi. Mekanisme ini menyediakan layanan dasar seperti mengijinkan satu host atau user dalam jaringan untuk memeriksa dengan berkomunikasi dengan user lain.

1. Authentication adalah suatu proses dimana user diidentifikasi oleh server AAA sebelum user menggunakan jaringan. Pada proses ini, user meminta hak akses kepada NAS untuk menggunakan suatu jaringan. NAS kemudian menanyakan kepada server AAA apakah user yang bersangkutan berhak untuk menggunakan jaringan atau tidak.
2. Authorization adalah pengalokasian layanan apa saja yang berhak diakses oleh user pada jaringan. Authorization dilakukan ketika user telah dinyatakan berhak untuk menggunakan jaringan. 
3. Accounting merupakan proses yang dilakukan oleh NAS dan AAA server yang mencatat semua aktivitas user dalam jaringan, seperti kapan user mulai menggunakan jaringan, kapan user mengakhiri koneksinya dengan jaringan, berapa lama user menggunakan jaringan, berapa banyak data yang diakses user dari jaringan, dan lain sebagainya. Informasi yang diperoleh dari proses accounting disimpan pada AAA server, dan dapat digunakan untuk berbagai keperluan seperti billing, auditing, atau manajemen jaringan.

SUSUNAN DAN CARA PEMASANGAN KABEL UTP STRAIGHT DAN CROSS

Sebelum Anda praktek, ada beberapa hardware yang perlu Anda siapkan, diantanranya:

1.Kabel UTP (Unshielded Twisted Pair). Kabel UTP yang biasa dipakai adalah kabel UTP categori 5 (UTP Cat 5). Kenapa? Karena kabel UTP Cat-5 support transfer data hingga 100 Mbps. Kabel ini terdiri atas 8 kecil yang mempunyai warna berbeda-beda. Warna kabel tersebut adalah Orange, Orange Putih, Biru, Biru Putih, Hijau, Hijau Putih, Coklat, dan Coklat Putih.

2.Yang kedua adalah Jack RJ-45. Jack ini mirip dengan jack telepon rumah. Cuma ukurannya yang lebih besar. Jack RJ-45 terdiri dari 8 pin, sesuai dengan jumlah kabel UTP.

3.Crimping Tools atau Tang Crimping. Hardware yang satu ini mirip dengan tang. Namun, fungsinya tidak seperti tang pada umumnya. Crimping tool ini berguna untuk menjepitkan kabel pada Jack.

RJ-45.

Kabel UTP Tipe Straight

OK. Sekarang saya kan bahas cara pemasangannya. Yang pertama adalah cara memasang kabel UTP tipe straight. Untuk itu, lakukan langkah-langkah berikut:

1. Kupas ujung kabel sekitar 1 cm, sehingga kabel kecil-kecil yang ada didalamnya kelihatan.
2. Pisangkan kabel-kabel tersebut dan luruskan. Kemudian susun dan rapikan berdasarkan warnanya yaitu Orange Putih, Orange, Hijau Putih, Biru, Biru Putih, Hijau, Coklat Putih, dan Coklat. Setelah itu potong bagian ujungnya sehingga rata satu sama lain.
3. Setelah kabel tersusun, ambil Jack RJ-45. Seperti yang saya katakan tadi Jack ini terdiri dari 8 pin. Pin 1 dari jack ini adalah pin yang berada paling kiri jika posisi pin menghadap Anda. Berurut.

ke kanan adalah jack 2, 3, dan seterusnya.

4. Kemudian masukkan kabel-kabel tersebut ke dalam Jack RJ-45 sesuai dengan urutan tadi yaitu sebagai berikut:

• Orange Putih pada Pin 1
• Orange pada Pin 2
• Hijau Putih pada Pin 3
• Biru pada Pin 4
• Biru Putih pada Pin 5
• Hijau pada Pin 6
• Coklat Putih pada Pin 7
• Coklat pada Pin 8.

Masukkan kabel tersebut hingga bagian ujungnya mentok di dalam jack.

5.  Masukan Jack RJ-45 yang sudah terpasang dengan kabel tadi ke dalam mulut tang crimping yang sesuai sampai bagian pin Jack RJ-45 berada didalam mulut tang. Sekarang jepit jack tadi dengan tang crimping hingga seluruh pin menancap pada kabel. Biasanya jika pin jack sudah menancap akan mengeluarkan suara “klik”.

Kabel UTP Tipe Cross

Cara memasang kabel UTP tipe straight sudah saya jelaskan tadi. Sekarang saya bahas mengenai cara memasang kabel UTP tipe cross. Cara pemasangan kabel UTP tipe cross hampir sama dengan memasang kabel UTP tipe straight. Mengenai teknis pemasanganya sama seperti tadi. Perbedaanya adalah urutan warna kabel pada ujung kabel yang kedua. Untuk ujung kabel pertama, susunan kabel sama dengan susunan kabel UTP tipe straight yaitu:

• Orange pada Pin 1
• Orange Putih pada Pin 2
• Hijau pada Pin 3
• Biru pada Pin 4
• Biru Putih pada Pin 5
• Hijau Putih pada Pin 6
• Coklat Putih pada Pin 7
• Coklat pada Pin 8.

Untuk ujung kabel yang kedua, susunan warnanya berbeda dengan ujung pertama. Adapaun susunan warnanya adalah sebagi berikut:

• Hijau Putih pada Pin 1
• Hijau pada Pin 2
• Orange Putih pada Pin 3
• Biru pada Pin 4
• Biru Putih pada Pin 5
• Orange pada Pin 6
• Coklat Putih pada Pin 7
• Coklat pada Pin 8.

Susunan kabel tadi bisa Anda lihat pada gambar di bawah,hasil akhir kabel UTP tipe cross akan seperti ini:

Kesimpulannya adalah jika Anda memasang kabel UTP tipe straight maka susunan warna pada kedua ujung kabel adalah sama. Sedangkan cara pemasangan UTP tipe cross, susunan warna ujung kabel pertama berbeda dengan unjung kabel kedua.

Demikian tutorial cara memasang kabel UTP tipe straight dan tipe cross. Semoga bermanfaat bagi Anda. Apabila Anda menemukan kesalahan pada artikel ini mohon dikoreksi melalui kotak komentar. Terima kasih.

 

 

 

CISCO PACKET TRACKER

Penjelasan dan Pengertian Cisco Packet Tracker Beserta Simulasi Jaringannya

Paket Tracer merupakan program simulasi jaringan yang sangat berguna, terutama jika kita ingin mempelajari kinerja jaringan pada peralatan CISCO. Dengan adanya Paket Tracer ini maka dapat mempermudah kita dalam melakukan desain dan pembelajaran mengenai jaringan komputer. Didalam software ini, kita dapat melakukan praktek jaringan dengan lebih mudah. Berikut ini adalah tampilan awal dari Packet Tracer.

Berikut ini merupakan hal-hal yang biasa dilakukan pada saat menggunakan Packet Tracer :

Desain Topologi Peralatan Jaringan

Menghubungkan Peralatan Jaringan dengan Kabel yang Sesuai

Melakukan Konfigurasi Peralatan Jaringan

1. Desain Topologi

Mengambil peralatan-peralatan jaringan yang ada, yang terletak seperti gambar berikut ini.

                                          Peralatan yang biasa penulis gunakan adalah

Peralatan Umum

2. Menghubungkan Peralatan Jaringan dengan Kabel yang Sesuai

Agar dapat terkoneksi dengan baik, maka dibutuhkan media yang dapat menghubungkan tiap-tiap peralatan jaringan. Terdapat 3 buah kabel yang umumnya digunakan yaitu

ü  Kabel Straight

ü  Kabel Cross

ü  Console

ü  Kabel Straight

Kabel Straight merupakan kabel yang digunakan pada peralatan jaringan pada Level Layer yang Berbeda. Contoh : Switch dengan Router, Switch dengan PC, Switch dengan Server.

Pemasangan Kabel Straight

Kabel Cross

Kabel Cross merupakan kabel yang digunakan untuk menghubungkan peralatan jaringan dengan Level Layer Sama. Contoh : Switch dengan Switch, PC dengan PC, PC dengan Server.

Pada gambar diatas terlihat bahwa terdapat warna hijau, orange, dan merah.

ü  Warna Hijau mengartikan bahwa telah terkoneksi dengan baik.

ü  Warna Orange mengartikan bahwa koneksi masih belum siap digunakan, biasanya ditunggu sementara.

ü  Warna Merah mengartikan bahwa koneksi tidak terkoneksi. (Karena Interface pada router belum diberikan IP Address).

3. Melakukan Konfigurasi Peralatan Jaringan

Konfigurasi jaringan dapat dilakukan dengan cara mengklik peralatan jaringan yang ada. Untuk memahami mengenai konfigurasi lebih lanjut, akan dijelaskan pada topik pembahasan yang lainnya. Seperti konfigurasi IP Address, Default Gateway, DNS, Web Server, DNS Server, DHCP Server, VLAN, VTP, Access List, dan lainnya.

Contoh konfigurasi pada PC :

1. Klik PC yang akan dikonfigurasi.

2. Pilih Tab Desktop.

3. Pilih IP Configuration.

4. Masukan IP address dan Mask.

5. Konfigurasi telah selesai.

Demikianlah cara penggunaan packet tracer 5.1 Selamat Mencoba.

Simulasi Jaringan Router Menggunakan Cisco Packet Tracer

Pada Praktek Kali Ini Saya akan mencoba Membuat Simulasi Jaringan Router Menggunakan Cisco Packet Tracer,Untuk menyeting Router ini sedikit agak Susah dibandingkan dengan pada praktek saya sebelumnya,dimana untuk menyeting sebuah router kita harus mengetik secara manual dalam consule agar setingan yang kita buat sesuai dengan topologi yang kita rancang.

Contoh kasus,Ada 2 ruangan kerja yang berbeda tempat dan ingin dibuat menjadi satu jaringan tujuanya untuk share data,Akan tetapi IP Adress Dari Masing Masing Ruangan Tersebut Berbeda,Bagaimanakah Caranya Agar Dapat Saling Terhubung??

Nah disinilah kita dapat memanfaatkan router.

Dalam Gambar Ini Terlihat Ruangan A Menggunakan IP Address Local 192.168.0.1/24 sedangkan Ruangan B Menggunakan IP Address Local 192.168.1.1/24

Karna Ada Perbedaan IP otomatis Jaringan Seperti ini tidak akan saling terhubung antara Ruangan A Dan Ruangan B.

Dengan Menggunakan Router Maka Masalah Perbedaan tersebut dapat di Atasi,sehingga Kedua Jaringan Tersebut dapat Saling Berkomunikasi

Fungsi Router 

Router berfungsi sebagai penghubung antar dua atau lebih jaringan untuk meneruskan data dari satu jaringan ke jaringan lainnya. Router berbeda dengan switch. Switchmerupakan penghubung beberapa alat untuk membentuk suatu Local Area Network (LAN). Sebagai ilustrasi perbedaan fungsi darirouter dan switch merupakan suatu jalanan, dan router merupakan penghubung antar jalan. Masing-masing rumah berada pada jalan yang memiliki alamat dalam suatu urutan tertentu. Dengan cara yang sama, switch menghubungkan berbagai macam alat, dimana masing-masing alat memiliki alamat IP sendiri pada sebuah LAN.

Router sangat banyak digunakan dalam jaringan berbasis teknologi protokol TCP/IP, dan router jenis itu disebut juga dengan IP Router. Selain IP Router, ada lagi AppleTalk Router, dan masih ada beberapa jenis router lainnya. Internet merupakan contoh utama dari sebuah jaringan yang memiliki banyak router IP.Router dapat digunakan untuk menghubungkan banyak jaringan kecil ke sebuah jaringan yang lebih besar, yang disebut dengan internetwork, atau untuk membagi sebuah jaringan besar ke dalam beberapa subnetwork untuk meningkatkan kinerja dan juga mempermudah manajemennya. Router juga kadang digunakan untuk mengoneksikan dua buah jaringan yang menggunakan media yang berbeda (seperti halnya router wireless yang pada umumnya selain ia dapat menghubungkan komputer dengan menggunakan radio, ia juga mendukung penghubungan komputer dengan kabel UTP), atau berbeda arsitektur jaringan, seperti halnya dari Ethernet ke Token Ring.

Router juga dapat digunakan untuk menghubungkan LAN ke sebuah layanan telekomunikasi seperti halnya telekomunikasileased line atau Digital Subscriber Line (DSL). Router yang digunakan untuk menghubungkan LAN ke sebuah koneksi leased line seperti T1, atau T3, sering disebut sebagai access server. Sementara itu, router yang digunakan untuk menghubungkan jaringan lokal ke sebuah koneksi DSL disebut juga dengan DSL router. Router-router jenis tersebut umumnya memiliki fungsifirewall untuk melakukan penapisan paket berdasarkan alamat sumber dan alamat tujuan paket tersebut, meski beberapa router tidak memilikinya. Router yang memiliki fitur penapisan paket disebut juga dengan packet-filtering router. Router umumnya memblokir lalu lintas data yang dipancarkan secara broadcast sehingga dapat mencegah adanya broadcast storm yang mampu memperlambat kinerja jaringan.

Ok Mungkin temen temen sudah mengerti fungsi router ini dan sekarang mari kita lanjutkan praktek ini

Langkah Pertama Buka Tools Cisco Packet Tracer ,dan buat simulasi Jaringan Seperti ini.

Setelah Selesai Membuat Simulasi Seperti gambar diatas,kemudian temen temen setting terlebih dulu IP dari Tiap2 PC Cara Settingnya Mungkin temen temen sudah pada paham,apabila belum paham baca postingan saya sebelumnya,Ingat dalam praktek ini Ruangan A dan Ruangan B Harus Beda Yah IP Nya

Misal dalam praktek Saya :

Ø  Ruangan A 192.168.0.1/24 255.255.255.0

Ø  Ruangan B 192.168.1.1/24 255.255.255.0

Setelah Itu Mari Kita Menyeting Router Klik 2 kali PadaRouter kemudian Masuk pada Menu CLI Nanti Akan Muncul Jendela Seperti gambar di Bawah Ini : 

Nah disini yang agak repot menurut saya hehe ok kita lanjutkan saja

Perintah-perintahnya

a.       Awalnya ada pertanyaan kita ketikkan aja no

b.      Enable

c.       Configure terminal

d.      Interface fa 0/0 –> Karena yang akan kita setting fashethernet ke 0/0

e.      IP address 192.168.0.10 255.255.255.0 –> setting ip address dan subnet mask..

f.        No shutdown

g.       Exit –> keluar dari interface 0/0

h.      Exit –> keluar dari configure terminal

i.         Write  –> menyimpan

j.        Exit –> keluar dari router

Setelah Selesai Masih pada CLI dan Masukan lagi Perintah Sama Persis Kaya di Atas Cuma Nantinya IP Addressnya Dirubah dan juga Interface fa menjadi 0/1 

a.      Enable

b.      Configure terminal

c.      Interface fa 0/1 –> Karena yang akan kita setting fashethernet ke 0/1

d.      IP address 192.168.1.10 255.255.255.0 –> setting ip address dan subnet mask..

e.       No shutdown

f.       Exit –> keluar dari interface 0/1

g.      Exit –> keluar dari configure terminal

h.      Write  –> menyimpan

i.        Exit –> keluar dari router

Ok sejauh ini temen temen telah selsai menyeting Router tersebut Sekarang Tinggal Menyeting Default Gateway dari tiap tiap PC Saya contohkan Satu Saja Yah 

Klik Dua kali pada Komputer Ruangan A dan Masuk KeDesktop,Kemudian IP Configuration dan Isi  Default Gatewaynya dengan 192.168.0.10.

Isi Default Gateway dengan 192.168.0.10

Ø  Jangan Lupa Juga kan ada 4 Komputer tuh di Ruangan A ,semuanya Isikan Default Gateway 192.168.0.10

Ø  Dan Setelah Itu,Temen temen Masuk Pada Jaringan Komputer B Dan Isikan Juga Default Gatewaynya dengan 192.168.1.10

Ø  Pengaturan Selesai,setelah Itu coba temen temen Test Ping darikomputer Ruangan A ke IP ruangan B

Ø  ping 192.168.1.1

Ø  Apabila ada reply maka pengaturan router berhasil.

PEMROGRAMAN HTML

Pengertian HTML

HTML merupakan singkatan dari Hypertext Markup Language. HTML digunakan untuk membangun halaman web. HTML digunakan untuk melakukan mark-up (penandaan) terhadap sebuah dokumen teks. Tanda tersebut digunakan untukmenentukan format atau style dari teks yang ditandai halaman web dibangun oleh  kode-kode HTML.

HTML adalah bahasa markup yang umum digunakan. Kepopuleran HTML disebakan karena HTML ini mudah digunakan. Pembuatan dokumen web dengan  HTML dapat dilakukan dengan mudah dan cepat. Dokumen web dapat tersaji dengan cepat ke banyak pembaca di seluruh dunia sekaligus. HTML mudah melakukan kontrol terhadap tampilan halaman web baik berupa teks, gambar, suara, animasi maupun video.

            HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan web browser seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.

a.         Hypertext
            Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

b.         Markup
            Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada Word Wide Web.

c.         Language
            Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen. Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih   pada format dokumen yang berorientasi pada aplikasi.

2.3.      Fungsi HTML

Hypertext Markup Language merupakan standar bahasa yang di gunakan untuk menampilkan dokumen web, yang bisa dilakukan dengan HTML yaitu:
-     Menentukan format suatu teks
-     Membuat list tentang sekelompok hal
-     Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama.
-     Menyisipkan citra atau gambar.
-     Menampilkan informasi dalam bentuk tabel

-     Memodifikasi.Mengontrol tampilan dari web page dan contentnya.

-     Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh dunia.

-     Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.

-     Menambahkan object-object seperti image, audi, video dan juga java applet dalam dokumen HTML.

2.4       Struktur HTML

1.                  Elemen
            Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.Contonya untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML

2.                  Tag

Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body. Tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML. Yang merupakan tag-tag dasar dalam HTML adalah:

a.   <HTML> </HTML>

Tag <HTML> dan </HTML> digunakan untuk menandai awal dan akhir dari suatu file HTML.

b.   <TITLE> </TITLE>

Tulisan yang berada diantara tag <TITLE> dan </TITLE> akan ditampilkan oleh browser pada bagian title yang mana merupakan title dari jendela browser.

c.   <HEAD> </HEAD>

Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara HEAD tags.

d.   <BODY> </BODY>

Bagian tag BODY menandai awal dan akhir dari badan dokumen HTML. Tag ini memiliki sejumlah attribut dapat ditentukan.

Contoh:

<HTML>

<HEAD>

<TITLE>Halaman HTMLku yang pertama</TITLE>

</HEAD>

<BODY TEXT="#000000" BGCOLOR="#FFFFFF">

Hello World

</BODY>

</HTML>

Hasil:

3.               

   Atribut
Atribut mendefinisikan properti dari suatu elemen/tag dari HTML, yang

terdiri atas nama dan nilai

2.5       Pengaturan Halaman HTML

2.5.1.   Menformat Tulisan Pada halaman HTML

Untuk membuat halaman web yang rapi dan menarik, tentu saja perlu melakukan pemformatan tulisan-tulisan, baik tata cara pencetakannya, serta jenis tulisan yang dipergunakan.

Tag – tag untuk memformat tulisan:

Tag	Keterangan
<B> </B>	Membuat cetak tebal pada tulisan yang berada diantaranya.
<BLINK> </BLINK>	Menyebabkan tulisan berada diantaranya berkedip-kedip.
<CITE> </CITE>	Digunakan untuk menandai kutipan dari suatu buku atau artikel majalah. Browser khususnya menampilkan kutipan dengan cetak miring.
<CODE> </CODE>	Menandai suatu daftar source code program. Biasanya ditampilkan oleh browser dalam suatu monospaced font yang lebih kecil
<DFN> </DFN>	Style untuk definisi dari suatu istilah. Browser menampilkan definisi dengan cetak miring.
<EM> </EM>	Text yang berada diantara tags ini dicetak lebih lebar. Browser umumnya menampilkan cetak
<FONT SIZE = #> </FONT>	Menentukan ukuran font (#) yang digunakan untuk menampilkan HTML dalam tags. Default is 3; ukurannya dari 1 sampai 7.
<H#> </H#>	Tag yang menentukan tingkat heading dengan nilai antara 1 dan 6, dengan sebagai ukuran paling besar dan 6 paling kecil
<I> </I>	Text diantaranya ditampilkan dengan cetak miring.
<KBD> </KBD>	Keyboard tag digunakan untuk mewakili tombol keyboard seperti Del atau Enter. Umumnya ditampilkan oleh browser dengan suatu monospaced font yang lebih kecil.
<PRE> </PRE>	Preformatted text adalah menampilkan tulisan tanpa format yang khusus. Tag ini bagus digunakan bila ana ingin menangani spasi antar baris; dan juga memudahkan anda untuk meletakan tab dalam dokumen.
<MARQUEE> </MARQUEE>	(hanya pada Microsoft Internet Explorer 2.0/3.0). Tag ini menyebabkan tulisan yang berada diantaranya Atribut untuk tulisan MARQUEE :
ALIGN	Menentukan bahwa tulisan dalam marquee harus dirapikan di TOP, MIDDLE atau BOTTOM darimarquee tersebut
BEHAVIOR	Setting yang berlaku untuk atribut ini adalah SCROLL, SLIDE, dan ALTERNATE
SCROLL	Defaultnya, dari sisi yang satu ke yang lain pada layar secara berulang.
SLIDE	Gulung text melintasi layar, dan
ALTERNATE
BGCOLOR	Yang ini menentukan dari marquee
DIRECTION	Menentukan arah ke
HEIGHT	Menentukan tinggi marquee dalam pixel (HEIGHT = n) atau presentasi dari layar (HEIGHT= n%).
WIDTH	Sama dengan atribut HEIGHT, tetapi diaplikasikan untuk lebar marquee.
HSPACE	Menentukan margin kiri dan kanan untuk bagianluar marquee dalam pixel.
LOOP	Menentukan jumlah kali marquee harus berputar. Jika diabaikan, set ke -1 atau INFINITE, dan marquee bergulung sampai user meninggalkan halaman tersebut.
SCROLLAMOUNT	Menentukan antara geseran dari tulisan marquee.
SCROLLDELAY	Menentukan dari tulisan marquee
VSPACE	Menentukan margin top dan bottom untuk bagian luar dari marquee dalam pixel.
<SAMP> </SAMP>	Menampilkan sejumlah karakter literal. Banyak browser menampilkan dengan monospaced font.
<STRIKE> </STRIKE>	Tulisan diantaranya di coret (Example).
<STRONG> </STRONG>	Cara lain menggambarkan attention pada suatu bagian dari text; <STRONG> biasanya ditampilkan dengan cetak tebal oleh browser.
<TT> </TT>	Menampilkan bentuk typewriter style (monospaced) font.
<U> </U>	Tulisan diantaranya ditampilkan dengan garis bawah.

Contoh :

<HTML>

<HEAD>

<TITLE>Heading</TITLE>

</HEAD>

<BODY >

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

Hasil :

Contoh :

<HTML>
<HEAD>

<TITLE>Font <TITTLE>

</HEAD>

<BODY>

<font size=1>ukuran 1</font><br>

<font size=2> ukuran 2</font><br>

<font size=3> ukuran 3</font><br>

<font size=4> ukuran 4</font><br>

<font size=5> ukuran 5</font><br>

<font size=6> ukuran 6</font><br>

<font size=7> ukuran 7</font>

</BODY>

</HMTL>

Hasil:

Contoh:

<HTML>
<HEAD>

<TITLE>Font Face<TITTLE>

</HEAD>

<BODY>

<font face=”Arial”>Arial</font><br>

<font face=”Tahoma”>Tahoma</font><br>

<font face=”Courier New”>Courier New</font><br>

</BODY>

</HTML>

 HASIL:

2.5.2    Menggunakan Karakter Khusus

Berikut ini tata cara pengetikkan untuk menampilkan karakter khusus pada

halaman html:

Entitas	Keterangan	Contoh
©	Copyright symbol	©
®	registered trademark symbol	®
™	trademark symbol	™
 	nonbreaking space
&lt;	less-than symbol	<
&gt;	greater-than symbol	>
&amp;	ampersand	&
&quot;	quotation mark	“

Contoh :

2 &lt; 3, adalah benar<br>

3 &gt; 4, adalah salah

Hasil:

2 < 3, adalah benar

3 > 4, adalah salah

2.5.3.   Mengatur Pemerataan Tulisan

Pemerataan tulisan sangat mempengaruhi tampilan dari halaman web anda, ada kalanya tulisan tertentu perlu ditampilkan pada tengah halaman, atau pun justified. Tag-tag HTML yang mengatur pemerataan tulisan pada satu halaman:

a.      <CENTER> </CENTER>

Tag ini akan menampilkan tulisan/gambar ditengah baris.

b.   <P ALIGN=LEFT|CENTER|RIGHT> </P>

Tag paragraf digunakan untuk memulai suatu paragraf baru disertai dengan pemerataan teks ke kiri, tengah, atau kanan dari tampilan browser untuk paragraf bersangkutan. Suatu paragraf dapat terdiri dari teks, gambar, hyperlink, dan element HTML lainnya.

c.   <H# ALIGN=LEFT|CENTER|RIGHT> </H#>

Ini akan merapikan tulisan ke kiri, tengah atau kanan dari tulisan yang diberi tingkat heading

Contoh :

<center>Tulisan ini berada ditengah baris</center>

<p align=left>Tulisan ini rapat kiri</p>

<p align=center>Yang ini juga ditengah baris</p>

<p align=right>Yang ini rapat kanan</p>

Hasil:

Tulisan ini berada ditengah baris

Tulisan ini rapat kiri

Yang ini juga ditengah baris

Yang ini rapat kanan

2.5.4.   Membuat Garis Pemisah

Untuk menyisip suatu garis pemisah pada dokumen dapat digunakan <HR>. <HR> memiliki atribut:

-          NOSHADE

-          SIZE

-          WIDTH.

Contoh :

<HTML>
<HEAD>

<TITLE>Horizontal Line<TITTLE>

</HEAD>

<BODY>

atas

<hr>

bawah

</BODY>

</HTML>

 








Hasil:

2.5.5.   Membuat Unordered List

Agar dokumen kita mudah dibaca dan jelas, ada bagian tertentu yang perlu ditampilkan dalam list. List yang paling sederhana di HTML adalah unordered, atau bulleted list. Hal ini sesuai untuk daftar item yang tidak memiliki hirarki atau urutan yang penting.

a.      <UL> </UL>

Digunakan untuk mengawali dan mengakhiri suatu Unordered List.

b.      <LH> </LH>

Digunakan untuk membuat suatu heading untuk list tersebut.

c.       <LI> </LI>

Digunakan untuk membuat masing-masing item list tersebut.

Contoh :

<HTML>
<HEAD>

<TITLE>UL<TITTLE>

</HEAD>

<BODY>

<ul type=”disc” >

<li>urutan 1</li>

<li>urutan 2</li>

<li>urutan 3</li>

</ul>

</BODY>

</HTML>

HASIL:

2.5.6.   Membuat Ordered List

Untuk membuat suatu ordered list, tag <UL> dan </UL> diganti dengan <OL> dan </OL>.

Contoh :

<HTML>
<HEAD>

<TITLE>OL<TITTLE>

</HEAD>

<BODY>

<ol type=”I” >

<li>urutan 1</li>

<li>urutan 2</li>

<li>urutan 3</li>

</ol>

</BODY>

</HTML>

HASIL:

2.5.7.   Table dan Pengaturannya

Tabel adalah cara yang baik untuk menampilkan informasi secara logik yang biasanya ditampilkan dalam bentuk spreadsheet. Tabel juga digunakan untuk menampilkan record-record pada database.

1.         <TABLE> </TABLE>

Berikut ini adalah atribut dari TABLE tag dan efeknya pada tabel.

a.   BORDER

Atribut BORDER menentukan tebal dari border sewaktu ditampilkan oleh browser. Cobalah dengan browser anda untuk mendapatkan setting yang optimal.

b.   CELLSPACING

Atribut CELLSPACING mementukan jumlah spasi yang browser tempatkan diantara tiap-tiap sel individual atau spasi antar sel dan border (jika sel berada di sisi dari tabel). Sekali lagi, hanya dengan percobaan yang akan menghasilkan nilai yang sesuai.

c.   CELLPADDING

Atribut CELLPADDING menentukan jumlah spasi yang browser tempatkan antara data dalam cell dan border sel.. Dalam tag tabel, ada tiga tag yang mendefinisikan header, row, dan cels. Tag-tag tersebut adalah table header <TH>, table row <TR>, dan table data <TD>.

d.   WIDTH

Atribut WIDTH dapat diset dengan angka (ukuran dalam pixel), atau sebagai suatu persentase lebar tampilan browser. Browser dapat menarik tabel, tetapi tidak dapat mengkompres jika ukuran jendela browser lebih kecil dari tabel.

e.   ALIGN

Dengan ALIGN, anda dapat menentukan pemerataan tabel di left, center, atau right dari halaman.

      f.    BGCOLOR

Sebagaimana pada tag <BODY> , anda dapat menentukan warna latar belakang dari tabel dengan menggunakan attribut BGCOLOR, anda dapat menggunakan definisi warna #rrggbb atau nama warna pada Internet Explorer, (sebagai contoh, <TABLE BGCOLOR = RED).

      g.   BORDERCOLOR (Hanya pada Microsoft Internet Explorer 2.0/3.0)

Hal ini menyerupai attribut BGCOLOR tetapi diaplikasikan pada eksternal dan internal border.

      h.   BORDERCOLORLIGHT (hanya pada Microsoft Internet Explorer 2.0/3.0)

Setting ini adalah optional dan menentukan warna sisi terang dari garis kiri atas tabel.

      i.    BORDERCOLORDARK (hanya pada Microsoft Internet Explorer 2.0/3.0)

Setting ini adalah berlawanan dengan BorderColorLight

2.         <TR> </TR>

Elemen table row menandai awal dari tiap baris pada tabel. Atribut yang sah dari tabel row adalah ALIGN, VALIGN, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT.

3.         <TH> </TH>

Elemen table header berfungsi sama seperti elemen table data <TD>, tetapi elemen table header ditampilkan dalam suatu font cetak tebal. Artibut yang sah untuk elemen table header adalah ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT.

BGCOLORLIGHT

4.         <TD> </TD>

Elemen table data menandai awal dan akhir dari tiap sel didalam tabel. Atribut yang sah untuk elemen table data :

      a.   COLSPAN

Atribut ini menentukan jumlah kolom yang akan ditarik oleh sel; sebagai contoh, jika COLSPAN di set ke 2, yang mana sel dengan span dua kolom normal dalam tabel.

      b.   ROWSPAN

Atribut ini menentukan jumlah baris yang akan ditarik oleh sel; sebagai contoh, jika ROWSPAN di set ke 2, yang mana sel dengan span dua baris normal dalam tabel.

      c.   NOWRAP

Menyisipkan atribut NOWRAP untuk menjaga tulisan dalam sel semuanya dalam satu baris.

5.         <CAPTION> </CAPTION>

Tag CAPTION ditempatkan diantara tag tabel, tetapi tidak diantara row, heading, atau cell tags. Tulisan dalam CAPTION tags mendefinisikan caption untuk tabel tersebut.

Berikut ini adalah atribut sah yang CAPTION tag.

      a.   ALIGN

Setting atribut ALIGN attribute untuk Netscape adalah TOP dan BOTTOM; sedangan Microsoft Internet Explorer memasukkan TOP, BOTTOM, LEFT, RIGHT, dan CENTER.

      b.   VALIGN

Dengan VALIGN, anda dapat menentukan vertical alignment dari data diantara table cells. Atribut ini di set diantara <TD> tag yang akan dirapikan. Setting yang sah adalah TOP, MIDDLE, dan BOTTOM. Tanpa ditentukan hasil tag tersebut adalah center. Sebagai contoh , <TD VALIGN=TOP>Top Aligned</TD> menentukan suatu sel akan dirapikan dibagian atas row.

Contoh:

<HTML>
<HEAD>

<TITLE>Tabel<TITTLE>

</HEAD>

<BODY>

<table border=1>

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

</tr>

</table>

</BODY>

</HTML>

Hasil:

2.5.8.   Menyisipkan Gambar Dalam Halaman Web

Untuk menyisip suatu gambar dalam halaman Web adalah dengan menggunakan tag <IMG>. Tag tersebut memiliki element sebagai berikut:

a.   SRC=URL, suatu URL yang menunjuk pada sumber file gambar.

b.   ALIGN, merapikan elemen yang menentukan bagaimana gambar akan dirapikan secara relatif terhadap tulisan yang berdekatan dengan gambar. Banyak nilai yang mungkin dan tidak akan dibahas disini.

c.   ALT=text, menentukan tulisan yang akan ditampilkan (biasanya ditempatkan diantara tanda petik) jika browser tidak dapat menampilkan gambar untuk alasan tertentu.

d.   HEIGHT=h WIDTH=w, menentukan height dan width dari image yang memungkinkan Web browsermenentukan ukuran tempat yang tepat sebelum gambar benar-benar selesai diterima. Hal ini tentu saja akan membantu Web browser dalam melakukan render terhadap seluruh isi halaman sebelum gambar selesai diterima.

Contoh :

<HTML>
<HEAD>

<TITLE>Gambar<TITTLE>

</HEAD>

<BODY>

<img src=”pppgkes.gif” align=”left” alt=”Logo PPPG”>

</BODY>

</HTML>

Hasil:

2.5.9.   Link ke Dokumen atau Situs yang Lain

Dokumen HTML adalah dokumen-dokumen hypertext. Hal ini berarti bahwa  mereka dapat mengandung link ke dokumen lain.

Tag (<A> </A>) digunakan untuk membentuk suatu link ke dokumen atau sumber yang akan dimuat ketika user melakukan klik pada link tersebut. Tulisan dan HTML lainnya yang ada diantara link ditampilkan kepada user sebagai suatu hotlink, biasanya dengan warna yang berbeda warna tulisan browser normal atau diberi garis bawah.

a.   HREF

HREF = "URL" menentukan URL dari resource yang akan ditampilkan setelah user melakukan klik padanya.

Contoh :

<HTML>
<HEAD>

<TITLE>Mailto<TITTLE>

</HEAD>

<BODY>

<a href=”mailto:fansyah@pppgkes.or.id”>Kirim email ke Fansyah</a>

</BODY>

</HTML>

Hasil :

b.   TITLE

Atribut ini, walaupun tidak diperlukan, memungkinkan perancang halaman memasukkan title dari halaman tersebut.

c.   URN

Menentukan suatu URN (Universal Resource Name) untuk dokumen target.

d.   NAME

Atribut NAME menentukan lokasi dalam HTML tersebut yang dapat di link dari halaman lain. Hal ini memungkinkan dokumen lain mengacu ke lokasi tertentu dalam suatu halaman. Nama acuan dari halaman tersebut. Untuk mengacu pada suatu nama acuan, URL halaman ditentukan, diikuti dengan suatu #. Sebagai contoh, <a name="Copyright"> mendefinisikan nama link Copyright dalam dokumen tersebut.

2.5.10. Form dan Pengaturannya

Diawali dan diakhir dengan tag <FORM> dan </FORM>, field-field yang berada diantaranya digunakan untuk menentukan ukuran dan jenis dari masing-masing input field. Walaupun dapat memiliki banyak form dalam satu halaman, tetapi tidak dapat melakukan form dalam form.

Atribut dari elemen form adalah sebagai berikut:

a.      ACTION

URL yang menentukan resource yang akan dilakukan oleh action pada form data, dan memberi respon pada user.

b.      METHOD

Ini dapat berupa default GET atau POST. Menggunakan GET, query ditambahkan ke URL; menggunakan POST, data dikirim melalui suatu transaksi post pada melalui HTTP. Untuk data yang membutuhkan keamanan anda diajurkan untuk menggunakan metode POST.

2.5.11. Frame pada Netscape 2.x/Microsoft Internet Explorer 3.x

Dengan Netscape 2.0 keatas, browser mampu menampilkan frame yang menggandung kode HTML yang berbeda. Berikut ini akan dijelaskan fungsi masing-masing tag:

1.                  <FRAMESET> </FRAMESET>

Elemen FRAMESET adalah kontainer group elemen dari frame. Ada dua atribut yaitu ROWS dan COLS.

1. ROWS

Tag ROWS menentukan jumlah spasi yang diberikan pada tiap baris. Jumlah tersebut dapat ditentukan dalam pixel, persen dengan menempatkan suatu % setelah nilai, atau nilai relatif dengan menempatkan (*) pada tempat dari nilai.

2. COLS

Syntax dari atribut COLS adalah sama dengan atribut ROWS.

2.                  <FRAME>

Elemen FRAME menentukan properti dari setiap frame masing-masing dalam frameset. Karena tidak mengandung text, tidak ada pasangan end-tag. Atribut dari FRAME adalah sebagai berikut:

1. NAME

Atribut NAME digunakan untuk menentukan mana pada frame, sehingga dapat berlaku sebagai target dari URLs lain.

2. MARGINWIDTH

Ini memungkinkan perancang halaman untuk menentukan lebar dari border frame dalam jumlah pixel.

3. MARGINHEIGHT

Ini bekerja seperti MARGINWIDTH tetapi berefek pada tinggi dari margin.

4. SCROLLING

Setting yang sah untuk atribut SCROLLING attribute adalah YES, NO, dan AUTO. Jika di set ke YES, suatu scrollbar ditampilkan pada frame; NO tidak ada scrollbar, dan AUTO menampilkan scrollbar jika besar

dokumen melebihi ukuran frame.

5. NORESIZE

Atribut ini mencegah user untuk melakukan drag untuk mengubah ukuran dari frame. Defaultnya adalah memungkin user untuk mengubah ukuran dari frame.

3.                  <NOFRAMES> </NOFRAMES>

Data diantara NOFRAMES tags akan diabaikan oleh browser yang mampu menampilkan frame, dan di tampilkan oleh browser yang tidak mampu menampilkan frame.

2.5.12. Elemen-Elemen dalam Suatu Form

1.         INPUT

Elemen INPUT menentukan informasi dari user interface. Berikut ini adalah atribut untuk INPUT tag :

     a.   CHECKED

Untuk checkboxes dan radio button, atribut ini dapat di set ke TRUE (checked) atau FALSE (unchecked).

      b.   MAXLENGTH

MAXLENGTH menentukan jumlah maximum karakter yang mana dapat dimasukkan dalam suatu textbox.

      c.   NAME

Menentukan nama dari form control. Hal ini digunakan untuk menentukan elemen data pada form ke resource yang memproses elemen ini.

      d.   SIZE

Menentukan ukuran dari form control. Ini dapat berupa nilai tunggal yang menentukan lebar control dalam karakter, atau dalam width/height pair.

      e.   SRC

Ini menentukan image yang akan ditampilkan dengan kontrol.

      f.    TYPE

Ini akan menentukan jenis control yang akan digunakan.

Berikut ini daftar dari kontrol yang ada:

• CHECKBOX

Kontrol sederhana TRUE/FALSE, yang mana kalau di check adalah TRUE, dan kosong menyatakan FALSE.

• HIDDEN

Kontrol ini tidak ditampilkan oleh viewer dari halaman. Kontrol ini dapat digunakan untuk mengirim status informasi kembali ke program form-processing.

• IMAGE

Klik pada akan menyebabkan form data dikirim seketika, dan nilainya lewatkan oleh image dalam x,y kordinat pixel.

• PASSWORD

Fungsi ini seperti textbox, tetapi tulisan yang anda ketik ditampilkan dengan asteriks sebagai penggantinya.

• RADIO

Fungsi ini menyerupai CHECKBOX control, tetapi hanya satu option button dari group yang dapat dipilih setiap saat. Pilih Ya atau Tidak

Contoh:

<HTML>
<HEAD>

<TITLE>Input radio<TITTLE>

</HEAD>

<BODY>

<form>

Jenis Kelamin<br>

Pria:<input type=”radio” jenis_kelamin” value=”Pria”>

Wanita:<input type=”radio” jenis_kelamin” value=”Wanita”>

</form>

</BODY>

</HTML>

Hasil:

•  RESET

Ketika tombol di klik, form data dikembalikan ke keadaan awal sesuai dengan nilai initial masing-masing.

Contoh:

<HTML>
<HEAD>

<TITLE>Reset<TITTLE>

</HEAD>

<BODY>

<form>

<input type=”reset”>

</form>

</BODY>

</HTML> 

• SUBMIT

Klik pada tombol akan mengirim form data ke FORM ACTION URL.

• TEXT

Kontrol ini digunakan untuk menggumpulkan satu baris tunggal dari tulisan. Atribut SIZE dan MAXLENGTH dapat ditentukan untuk membatasi pengetikkan.

• TEXTAREA

Kontrol ini digunakan untuk mengetikkan banyak baris.

2.                  SELECT

Tag SELECT menandai awal dan akhir dari data dalam suatu listbox atau suatu drop-down selection list. Berikut ini adalah atribut untuk elemen SELECT:

a.      MULTIPLE

Atribut multiple memungkinkan user memilih lebih dari satu item dari listbox. User menekan tombol CTRL dan clicks pada item-item berbeda untuk memilih lebih dari satu.

b.      NAME

 Ini menentukan nama dari SELECT elemen.

c.       SIZE

Ini menentukan tinggi dari list control.

3.                  OPTION

Elemen OPTION membentuk masing-masing pilihan dalam textbox atau listbox. Berikut ini atribut dari elemen OPTION :

a.      SELECTED

Atribut ini menentukan nilai default dari text pada listbox.

b.      VALUE

            Ini mengembalikan nilai dari elemen yang terpilih.