MY INSPIRATION

Sekolah Pascasarjana UIN Syarif Hidayatullah Jakarta

2013-02-13T10:27:00.001+07:00

Sekolah Pascasarjana UIN Syarif Hidayatullah Jakarta

My Baby and Friends

2012-04-09T09:57:00.000+07:00

My Baby and Friend

Arabic Titanic

2012-04-05T14:01:00.001+07:00

Buat yang suka lagu Titanic

PADDLEPOP BEGINS (2012)

2012-03-21T09:11:00.002+07:00

Smadav versi 2011 full Crack

2011-11-02T10:50:00.003+07:00

Silakan download Smadav Versi 2011 Full Crack

Download via MediaFire

Save as PDF

2011-11-02T10:43:00.001+07:00

Add on untuk MS. Office 2007 save as to PDF

Silakan Download

Foxit Reader 23

2011-11-02T09:40:00.002+07:00

Foxit Reader 23 file kompres buat PDF bisa diedit

Download

Virtual Clone Drive 5

2011-11-02T09:38:00.000+07:00

Silakan Download Virtual Clone Drive versi 5

Download

Pedoman Akademik

2011-11-02T09:11:00.001+07:00

Silakan download Pedoman Akademik SPS UIN Jakarta

Adobe Indesign CS5 Portable

2011-11-02T09:04:00.001+07:00

Adobe InDesign CS5 Versi final tapi yang portabel masih bisa diandalkan buat kawan-kawan yang suka dengan Desain or Lay-Out sebuah Majalah, Bulletin dll.
Ga perlu Instalasi end ga ngeberatin kompi anda size 170Mb via MediaFire

Adobe InDesign CS5 Portable

BEASISWA MENPORA

2010-06-30T10:54:00.000+07:00

BEASISWA MAGISTER AGAMA DAN STUDI PERDAMAIAN
KERJASAMA KEMENPORA DENGAN SEKOLAH PASCASARJANA UIN JAKARTA
SILAKAN AKSES www.graduate-uinjkt.net ATAU www.kemenpora.go.id

SISTEM OPERASI

2010-05-01T21:15:00.000+07:00

SISTEM OPERASI

Konsep Dasar

Dalam pemroses tunggal, hanya satu proses yang dapat dijalankan pada saat tertentu, sedangkanyang lain harus menunggu CPU bebas dan dijadwal ulang. Multiprogramming merupakan cara untukmenjalankan proses setiap waktu sehingga memaksimalkan penggunaan CPU.
Penjadwalan merupakan salah satu fungsi dasar dari sistem operasi. Hampir semua sumber daya
komputer dijadwalkan sebelum digunakan.CPU-I/O Burst Cycle
Kesuksesan penjadwaln CPU tergantung dari observasi proses-proses. Pengeksekusian proses terdiriputaran ekseskusi CPU dan penungguan I/O. Eksekusi proses dimulai dari CPU burst, yaitu diikuti oleh I/O burst kemudian diikuti CPU burst lainnya lalu I/O burst lainnya dan begitu seterusnya.

BACA SELANJUTNYA

Membuat Aplikasi Menjadi Lebih Mudah dengan LINQ

2010-05-01T20:58:00.000+07:00

Pengantar
LINQ merupakan fitur baru pada Vb 9.0, dan fitur ini sangat membantu para
programmer dalam membangun suatu aplikasi. Lalu apakah LINQ itu dan mahluk
seperti apakah LINQ?? Mungkin masih banyak sekali di antara pembaca yang
belum tau apa itu LINQ dan fungsi-fungsi nya. . Ada beberapa macam LINQ
Provider seperti LINQ to Object, LINQ to XML, LINQ to SQL, LINQ to Datasets,
tapi pada artikel ini kita akan membuat aplikasi dengan menggunakan LINQ to SQL.
Sesuai dengan judul diatas, dengan LINQ akan memudahkan kita dalam membuat
aplikasi. Artikel ini akan menjelaskan step by step cara pembuatan aplikasi, dari
pembuatan database dengan SQL Server 2005 Express, bekerja dengan Object Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

Baca selanjutnya

Nama Penemu Benda

2009-07-03T21:43:00.000+07:00

Nama Penemu Benda-Benda Penting di Seluruh Dunia
Diterbitkan April 7, 2008 Pengetahuan
Penemu Mesin uap Adalah James Watt Berasal dari Negara Inggris
Penemu Mesin 4 tak Adalah Nicolaus Otto Berasal dari Negara Jerman
Penemu Mesin diesel Adalah Rudolf Diesel Berasal dari Negara Jerman
Penemu Mesin cetak Adalah Johannes Guttenberg Berasal dari Negara Jerman
Penemu Mesin ketik Adalah Christopher Sholes Berasal dari Negara Amerika
Penemu Radio Adalah C. Marconi Berasal dari Negara Italia
Penemu Televisi Adalah J.L. Baird & C.F. Jenkins Berasal dari Negara Amerika
Penemu Telegrap Adalah Samuel F.B. Morse Berasal dari Negara Amerika Serikat
Penemu Telepon Adalah Alexander Graham Bell Berasal dari Negara Amerika Serikat (Versi Lama)
Penemu Telepon Adalah Antonio Meucci Berasal dari Negara Italia (Versi Baru)
Penemu Dinamo Adalah Michael Faraday Berasal dari Negara Inggris
Penemu Elektromagnet Adalah Williarn Sturgeon Berasal dari Negara Inggris
Penemu Bola lampu Adalah Thomas Alva Edison Berasal dari Negara Amerika Serikat
Penemu Proyektor film Adalah Thomas Alva Edison Berasal dari Negara Amerika Serikat
Penemu Piringan hitam Adalah Alexander Graham Bell Berasal dari Negara Amerika Serikat
Penemu Batu baterai Adalah Volta Berasal dari Negara Italia
Penemu Termometer Adalah Galileo Galilei Berasal dari Negara Italia
Penemu Korek api Adalah Robert Boyle, John Walker Berasal dari Negara
Penemu Kapal api Adalah Robert Fulton Berasal dari Negara Amerika Serikat
Penemu Kapal selam Adalah Cornelius van Drebbel Berasal dari Negara Belanda
Penemu Sinar Rontgen Adalah Wilhelm Conrad Rontgen Berasal dari Negara Jerman
Penemu Stetoskop Adalah Rene Laennec Berasal dari Negara
Penemu Lensa Adalah Anthony Van Leuwenhook Berasal dari Negara Belanda
Penemu Mikroskop Adalah Zacharias Janssen Berasal dari Negara
Penemu Teleskop Adalah H. Lippershey Berasal dari Negara
Penemu Kamera Adalah Louis Jacques Monde da Guerre & Edwin Land Berasal dari Negara Amerika
Penemu Pesawat terbang Adalah Wilbur dan 0. Wright Berasal dari Negara Amerika
Penemu Kereta api Adalah Murdocks Berasal dari Negara Inggris
Penemu Sepeda Adalah Civrac Berasal dari Negara Prancis
Penemu Balon terbang Adalah Sir F. Whittle Berasal dari Negara
Penemu Balon karet Adalah Josep dan J. Montgolfier Berasal dari Negara
Penemu Ban karet Adalah Charles Goodyear Berasal dari Negara Amerika
Penemu Barometer Adalah Evangelista, Torricelli Berasal dari Negara Italia
Penemu Dinamit Adalah Alfred Nobel Berasal dari Negara Swedia
Penemu Lensa kaca mata Adalah Benyamin Franklin Berasal dari Negara
Penemu Mesin hitung Adalah Blaise Pascal Berasal dari Negara Prancis
Penemu Mobil Adalah Gottlich Daimler Berasal dari Negara
Penemu Motor Adalah Nikola Tesla Berasal dari Negara
Penemu Tank Adalah Sir Ernest Swinton Berasal dari Negara Inggris
Penemu Traktor Adalah Benyamin Holt Berasal dari Negara
Penemu Tangga jalan Adalah Elis G. Otis Berasal dari Negara
Penemu Kawat pijar Adalah Irving Langmuir Berasal dari Negara

Membuat Dinamic Title

2009-04-20T09:38:00.015+07:00

Membuat Dynamic Title - Free Legal Forms

Maling dan Janda

2009-04-07T13:59:00.001+07:00

Pada suatu malam, rumah seorang janda disatroni maling.

Maling : “Pilih mati apa menikmati?”

Janda pun akhirnya pasrah dan digauli oleh maling, hingga akhirnya maling pun tertidur sampai pagi.

Dengan cekatan senjata si maling di ambil oleh si janda dan si janda pun balas mengancam.

Janda : “Pilih pulang atau ulang?”

Belajar PHP, Menginstal dan Mengenal Fungsi-fungsi PHP

2009-04-06T13:29:00.000+07:00

Anda ingin membuat website dinamis? maka anda perlu mempelajari bahasa pemrograman web server seperti ASP.net, PHP, JSP, Perl, Python, RoR (Ruby on Rails) dan masih banyak lagi. Anda tidak perlu mempelajari semuanya cukup pilih saja salah satu. Dan jika anda memilih PHP, maka anda berada diwebsite yang tepat. Jika anda memilih lainnya silahkan browsing lagi di Google, karena saya belum menguasainya (saya bilang belum karena saya berencana mempelajarinya, hanya saja tidak ada waktu untuk mempelajarinya).

Apa itu PHP?

Salah satu alasan PHP menjadi sukses seperti sekarang ini adalah karena kemampuannya yang menakjubkan. PHP dapat berkomunikasi dengan berbagai macam database dan mengenal semua protokol internet. PHP mudah digunakan dan cepat. Class-class / fungsi-fungsi PHP dapat anda temukan dengan mudah di internet. Apabila anda ingin membuat web dinamis dan belum tau caranya, PHP adalah bahasa pemrograman yang tepat.

PHP merupakan kependekan dari HyperText Preprocessor, awalnya merupakan kependekan dari Personal HomePage. PHP Merupakan bahasa pemrograman yang biasanya ditulis bersama kode HTML. Tidak seperti HTML yang langsung dikirim ke browser, script PHP di parsing dulu oleh PHP binary dalam komputer server. Elemen HTML dibiarkan tetapi kode PHP di eksekusi terlebih dahulu dan hasilnya dalam bentuk HTML dikirim ke browser pengguna. Kode PHP mampu menjalankan perintah database, membuat gambar, membaca dan menulis file, serta kemampuan lainnya yang tidak memiliki batas.

PHP 4 akan dihentikan pengembangannya pada Desember 2007, tapi tenang saja pengguna PHP 4 diseluruh dunia masih diatas 80% dibanding PHP versi lainnya.

Pada saat artikel ini ditulis, PHP telah memasuki versi 5, tetapi versi 4 nya masih banyak digunakan. Bahkan versi 6 Alpha telah keluar sejak akhir 2006. Pada versi 5 keatas PHP telah memiliki konsep OOP (Pemrograman Berorientasi Objek) yang cukup bagus dan sebanding dnegan Java. Jadi jika anda menggunakan PHP 5 anda harus terbiasa dengan konsep OOP. Saya akan membahas konsep OOP lain kali, disini kita menggunakan PHP 4 dan tidak menggunakan konsep OOP. Jadi sangat cocok bagi anda yang merupakan pemula dan ingin belajar PHP.

Cara menginstall PHP

Sudah cukup kita ngomongin PHP, sekarang sebelum kita dapat menggunakan PHP pertama-tama kita perlu menginstall PHP pada komputer kita. PHP dapat dijalankan di berbagai macam sistem operasi dan servers. PHP dapat berjalan di Windows, Unix, Linux dan Macintosh. PHP juga dapat bekerja pada berbagai macam web server termasuk Apache (Apache merupakan opensource dan pasangan sehidup semati dengan PHP), Microsoft IIS (Internet Information Server), Website Pro, iPlanet dan Microsoft PWS (Personal Web Server). Disini kita akan menginstall PHP didalam Windows XP menggunakan server Apache.

Cara termudah menginstall PHP adalah dengan menggunakan appserv. Appserv merupakan sebuah paket untuk Windows dimana didalamnya terdapat :

* Apache Web Server
* PHP Script Language
* MySQL Database
* Zend Optimizer
* phpMyAdmin Database Manager

Daripada kita mendownload satu-satu, lebih mudah kita menggunakan apsserv, karena didalamnya sudah terdapat semua. Anda tinggal download dan install.

Baca Selanjutnya

Cinta oh Cinta

2009-03-30T14:55:00.000+07:00

Oh.. bintang terang kabulkanlah permohonan
Dariku untuknya agar selalu bahagia
Ku ingin dirinya setia padaku selalu dari hati
Walau jauh di mataku takkan pernah jauh dari hatiku

Karena engkau bintang di langit
Dapat menyatukan cinta
Dari hati memohon
Karena cahayamu terang
Dapat menyinari hati
Insan yang bercinta

Takkan pernah ada lagi keraguan di hati
Karena kutahu engkau menjaganya
Dan akupun berharap dia merasakannya
Kalau aku menyayanginya...

Situ Gintung

2009-03-30T14:07:00.000+07:00

MENYATAKAN BERDUKA PADA PENDUDUK SITU GINTUNG

Jauh di negeri orang kita mendengar berita malapetaka itu,
tanggul Situ Gintung jebol melanda hatimu dan hatiku.
Rumah rumah penduduk hanyut remuk berserakan,
puluhan yang mati dan yang masih belum ditemukan.
Kepada yang ditimpa musibah kami menyatakan berduka,
dan memanjatkan harapan terbaik di dalam doa.
Datang pemimpin datangnya menabur omong kosong,
datang penguasa datangnya sudah tak tertolong.
Situ Gintung Situ Gintung lukamu luka kami,
kampungmu tenggelam oleh janji janji.

PEMROGRAMAN HTML

2008-11-15T13:32:00.001+07:00

Pemrograman HTML

1. Mengenal Script HTML Dasar

Html adalah kependekan dari (HyperText Markup Language), merupakan bahasa scripting yang berguna untuk menuliskan halaman Web dan juga sebagai bahasa script dasar yang berjalan bersama berbagai bahasa scripting program lainnya. Semua tag-tag HTML bersifat dinamis, artinya kode program tidak dapat dijadikan sebagai file executable program. Hal ini disebabkan HTML hanyalah sebuah bahasa scripting yang dapat berjalan didalam browser(pengakses web), antara lain Internet Explorer, Netscape Navigator, Opera, Mozilla dan lain-lain. Untuk melihat kode program pada halaman browser melalui menu View -> Source, akan ditampilkan semua tag berserta isi dari halaman web tersebut.

Semua bahasa scripting yang berjalan dibawah Web dapat didukung oleh HTML, biasanya bahasa-bahasa tersebut melakukan Embeded Script pada tag-tag HTMl. Didalam pembelajaran ini kita akan mengulas mengenai pemrograman PHP yang Embeded dengan tag-tag HTML.

Karena HTMl hanyalah merupakan sebuah kode Scripting dan bukan merupakan Program kompiler maka Anda dapat menuliskan semua kode program dengan menggunakan Editor program yang Anda sukai seperti Macromedia Dreamweaver, Notepad, Frontpage.

2. Sintaks Dasar HTML

Sebagai sebuah elemen dasar didalam pemrograman Web, HTML memiliki aturan-aturan dalam penulisannya. Ciri utama dalam HTML adalah adanya tag dan elemen. Elemen dalam dokumen HTML dikategorikan menjadi dua yaitu elemen yang berfungsi sebagai kepala dalam program dan diletakkan setelah pembukaan kode . Elemen yang kedua adalah elemen yang berguna utuk meletakkan semua isi web yang kita buat. Setiap dokumen HTMl selalu didahului dengan sebuah Tag yang menandakan bahwa dokumen tersebut adalah dokumen HTMl. Tag tersebut adalah dan kemudian harus ditutup dengan tag .

Dalam halaman HTML, terdapat tag yang digunakan untuk mendefinisikan judul yang berkaitan dengan halaman web yang dibuat. Tag ini adalah tag Sintaks penulisannya adalah sebagai berikut :<o:p></o:p> <head><o:p></o:p> <title> … Judul …

Selain TITLE, tag juga memiliki elemen yang berguna untuk memberikan informasi yang berhubungan dengan halaman Web HTMl tersebut yaitu tag META. Sintaksnya adalah :

Atribut	Value	Keterangan
Name	Text	Digunakan untuk mendeklarasikan kedudukan pengisi, misal “programmer”
Content	Text	Menjelakan dari judul yang dideklarasikan pada atribut name
http-equiv	Text	Untuk mendeklarasikan atribut server HTTP

Contoh penggunaan Meta didalam aplikasi web yang berkaitan dengan programmernya : atau

Yang perlu diperhatikan adalah semua tag harus menggunakan kode pembuka <> dan kode penutup. Sebagai contoh HTML yang dimulai dengan kode harus diakhiri dengan kode .

Beberapa bentuk kode yang wajib ada dalam menuliskan dokumen HTML antara lain :

: Didalam tag HTML hal yang harus ada adalah kode yang menyatakan jenis dokumen yang dibuat, dan harus ditutup dengan kode
: Kode jika diartikan berarti kepala dalam program, dan diakhiri dengan kode . Diletakkan setelah kode
: Kode ini selalu diletakkan didalam kode . Kode ini digunakan untuk mendeklarasikan judul yang akan ditampilkan dalam browser Web yang dibuat.
: Merupakan kode yang berguna untuk meletakkan semua isi web yang dibuat. Kode ini diawali dengan tanda dan diakhiri dengan

Didalam penulisannya HTML tidak membedakan antara penggunaan huruf besar dan kecil ( case insensitive ). Anda dapat menulis kode atau hasilnya akan sama saja. Berikut contoh program HTML yang pertama.

Contoh1.html

Judul Halaman Web Saya

Bagian utama dari Isi suatu dokumen

3. Format Halaman dan Paragraf

Warna dan Background Pada Halaman

Pada semua halaman web, Anda dapat mendeklarasikan warna latar belakang atau background halaman. Pendeklarasian tersebut dapat dilakukan dengan atribut yang disisipkan didalam tag , sehingga atribut tersebut akan mempengaruhi terhadap semua halaman web yang telah dibuat.

Selain warna latar belakang, dapat juga kita menggunakan gambar sebagai background ke halaman web. Background tersebut apabila dilihat dari fungsinya hanya untuk memperindah dan menyerasikan halaman web dengan isi yang ada didalamnya. Namun perlu diperhatikan apabila gambar yang digunakan terlalu banyak akan mempengaruhi kecepatan akses web tersebut.

Beberapa atribut yang digunakan didalam tag BODY adalah :

Atribut	Value	Keterangan
Bgcolor	#000000-ffffff	Untuk menentukan warna background
Background	File gambar	Membuat background gambar
Text	#000000-ffffff	Warna pada text diseluruh halaman
Link		Warna link yang belum dikunjungi
Vlink		Warna link yang telah dikunjungi
Alink		Warna link yang aktif
Left margin	0 – n	Mengatur jarak margin kiri halaman
Topmargin	0 – n	Mengatur jarak margin atas halaman
Marginwidth	0 – n	Mengatur jarak lebar margin halaman
Marginheight	0 – n	Mengatur jarak tinggi margin halaman

Secara default halaman web akan menciptakan halaman hasil berwarna putih. Untuk mengubahnya anda dapat menggunakan atribut bgcolor=”value”, yang disisipkan pada tag seperti berikut.

… isi web …

Warna adalah sebuah kumpulan code ASCII yang berasal dari pencampuran warna-warna dasar RGB (Red Green Blue). Anda dapat menggunakan warna yang berupa kode ASCII didahului dengan tanda (#) atau dapat langsung mengetikkan nama warnanya (red, green, white, atau blue).

Berikut adalah contoh halaman dengan deklarasi warna hijau sebagai warna backgroundnya.

Contoh2.html

Contoh background hijau

Pewarnaan halaman degan warna hijau

Selain memberikan warna pada background, Anda juga dapat menggunakan gambar sebagai komponen warna latar belakang. Atribut yang digunakan untuk memasukkan gambar sebagai background adalah background yang kemudian diikuti dengan alamat file gambar yang dimaksud. Kode ini kemudian diletakkan didalam seperti berikut :

… isi web …

Berikut contoh program dengan gambar sebagai background dari halaman web.

Contoh3.html

Contoh background bergambar

background="gambar/logo.gif">

Backgroun bergambar Logo UKM

Menentukan Warna Text

Jika dalam halaman secara standar akan menampilkan background berwarna putih, maka halaman akan memberikan text default warna hitam. Untuk dapat mengubahnya Anda cukup mendeklarasikannya dengan menggunakan atribut text pada seperti berikut

Cobalah membuat halaman dengan warna text yang anda sukai dengan program berikut ini.

Contoh4.html

Contoh text warna

text="green">

Halaman web dengan text berwarna Hijao

Menentukan Warna pada Link

Link merupakan sebuah symbol yang dijadikan sebagai acuan menuju ke halaman tertentu pada suatu web. Dalam pemberian warna pada Link, HTML mengenal tiga macam atribut dalam mendeklarasikannya, yaitu link, vlink, dan alink. Sintaks penulisannya adalah :

vlink=”warna” alink=”warna”>

Penempatan Area Kerja

Area kerja adalah tempat dimana posisi kursor pertama ketika menuliskan semua isi web, Anda dapat menentukan area kerja berada ditengah-tengah halaman maupun dipinggir halaman pada radius 0,0 pixel. Anda dapat menggunakan empat atribut perintah diantaranya adalah :

leftmargin=”value” : Menentukkan batas paling kiri
rightmargin=”value” : Menentukkan batas paling kanan
marginwidth=”value” : Menentukkan batas lebarnya
marginheight=”value” : Menentukan batas ketinggian

Sintaks penulisannya :

topmargin=”value” marginwidth=”value” marginweight=”value”>

Contoh programnya dapat Anda lihat pada baris berikut :

Contoh5.html

Penentuan area kerja

Area kerja halaman Web

Menformat Text

Membuat Huruf tebal, Miring, Underline

Huruf dengan properties tebal atau Bold, dapat dibuat dengan menggunakan tag dan diakhiri dengan tag . Sedangkan untuk membuat huruf miring, HTMl menggunakan tag dan diakhiri dengan tag . Huruf I berari italic, sedangkan untuk membuat huruf bergaris bawah HTML menggunakan tag dan diakhiri dengan tag . Untuk lebih jelasnya Anda dapat mencoba listing program berikut.

Contoh6.html

Format halaman text

Ini Huruf Tebal

Ini Huruf Miring

Ini Huruf Bergaris Bawah

~~Ini Huruf Di Coret~~

Membuat Text Model Kimia dan Perpangkatan

Text model kimia menggunakan unsure-unsur model kima seperti H₂O, O₂dan sebagainya. Dan juga karakter angka sebagai perpangkatan seperti 5² (lima kuadrat) Dengan HTML Anda cukup menggunakan tag _{sebagai model kimia dan ^{untuk model perpangkatan. Sebagai contoh, ketikkan listing program berikut ini.}}

Contoh7.html

Format Text Kimia & matematika

Manusia hidup membutuhkan Air / H₂O

4 (empat) adalah hasi dari perpangkatan 2²

Menentukan Ukuran Huruf dan Warna

HTML menyediakan sebuah tag yang didalamnya kita dapat mendeklarasikan warna , ukuran dan bentuk huruf. Dengan menggunakan metode ini maka efek yang dipakai hanyalah pada elemen yang berada didalam kalang Tag tersebut. Jadi secara otomatis pengaturan yang telah dilakukan pada bagian akan diabaikan untuk text yang dikenai tag FONT tersebut. Atribut yang digunakan didalam tag FONT :

Atribut	Value	Keterangan
Size	1 – 7	Menentukan besar huruf atau karakter
Color	#000000-ffffff	Menentukan warna teks dan karakter
Face	Font	Menentukan jenis font

Rumus tag HTML nya adalah :

color=”warna” face=”jenis font”>

Jenis font yang digunakan antara lain (arial, verdana, times new roman, sans serif dan lain sebagainya). Untuk nilai value pada Size dimasukkan angka 1-7 dan kemudian jika ingin melanjutkan ke ukuran yang lebh besar dapat ditambah dengan tanda (+), contohnya (+4). Berikut contoh program untuk menentukan ukuran huruf dan warna.

Contoh8.html

Format Bentuk Text dan warna

Bentuk Text arial berwarna merah

Memberikan Jarak pada Baris Text

Untuk menentukan jarak spasi pada text yang kita ketikkan dapat kita lakukan dengan perintah
untuk spasi 1 kali, bila 2 spasi kita beri tag
sebanyak dua kali. Didalam HTML telah disediakan sebuah tag yang berguna untuk itu. Untuk lebih jelasnya lihat contoh script berikut.

 … text …

Atau

 … text …

Untuk lebih jelasnya Anda dapat mengetikkan listing program berikut :

Contoh9.html

Format Spasi Text

IT Mandiri

Sentra Edukasi Telematikan Indonesia

IT Reka

Ganti Baris dan Paragraf

Dengan menggunakan HTML kita mengenal tag
untuk ganti baris dan tag

untuk ganti paragraph. Pada tag
akan memberikan efek ganti baris sebanyak satu baris sedangkan

akan memberikan efek pindah dua baris selanjutnya.

Untuk lebih jelasnya Anda dapat mengetikkan listing program berikut :

Contoh10.html

Format ganti baris

Pengakuan

Saya adalah seorang mahasiswa Teknik Informatika (TI) angkatan XX di SETI Jakarta

Sebebarnya saya merupakan pindahan dari jurusan Teknik Komputer (TK) angkatan XX SETI Jakarta

Membuat Identasi Halaman

Identasi halaman adalah teknik pemfromatan halaman dengan text menjorok kedalam. Untuk dapat membuat Identasi halaman HTML memiliki tag

. Sintaks penulisannya adalah sebagai berikut :

… text …

Coba ketik dan jalankan script berikut.

Contoh11.html

Format identasi

BLOCKQUOTE

Tag ini digunakan untuk meciptakan Text Indentasi ,

Yang di maksut Text Identasi adalah Text yang

perataanya menjorok kedalam .

Menggunakan Tag


  Tag Pre digunakan untuk membuat teks keluaran text yang sama persis dengan format yang diketikkan dalam tag HTML, sehingga bentuk text apapun yang diletakkan pada halaman web HTML akan dibaca pada browser sama dengan aslinya. Sintaksnya adalah :
   
  
   
  Coba ketik contoh berikut dengan menggunakan tag 
   
  Contoh12.html
  
              
                           Format<span style="">  </span>pre 
              
  
  
PRE
   
  
    Tag ini digunakan untuk meciptakan Text dengan format
    Yang seuai dengan yang di ketikan dalam Tag HTML
    .
   
  
  
   
  Jalankan program diatas, akan menghasilkan keluaran berupa text yang sama persis dengan text yang diketikkan didalam tag HTML. Text tersebut tidak akan berubah bentuk apabila halaman diperkecil atau diperbesar.
   
                   Format Text Alamat
  Didalam halaman web suatu ketika akan memerlukan pengaturan alamat dalam membuat suatu halaman yang menyertakan alamat. Dalam HTML 4 untuk dapat membuat alamat dapat digunakan tag 
. Berikut sintaks penulisannya.
   
  
 … text … 
   
  Berikut merupakan contoh listing programnya.
   
  Contoh13.html
  
              
                           Membuat Alamat<span style="">  </span>
              
  
  
  
IT mandiri,
  SETI Jakarta,
  Jl Warung Jati Barat Raya No 43,
  Buncit Jakarta Selatan,
  12760,
  Indonesia. 
  
  
  
  
   
                   Membuat Heading / Judul
  Heading adalah metode untuk membuat judul dalam paragraph. Dalam penggunaanya heading dapat dibagi menjadi 6 yaitu Heading 1, Heading 2, sampai dengan Heading 6. Sintaks penulisannya adalah :
   
   … text … 
   
  Cobalah membuat halaman heading seperti script dibawah ini.
   
  Contoh14.html
  
              
                           Membuat Heading<span style="">  </span>
              
  
  
 Heading 1
  
 Heading 2
  
 Heading 3
  
 Heading 4
  
 Heading 5
  
 Heading 6
  
  
   
                   Membuat Animasi Marquee
  Marquee adalah sebuah bentuk animasi text yang diciptakan oleh HTML. Kita dapat mengciptakan gerakan-gerakan text maupun paragraph dalam web. Sintaks yang digunakan adalah :
   
   … text … 
   
  Atribut dalam animasi marque.
          Atribut
         Value
         Keterangan
     
        Behavior
         Alternate
         Text   bergerak ke kanan/kiri
     
        Scroll
         Text bergerak terus menerus
     
        Slide
         Text bergerak sekali
     
        Direction
         Left
         Kiri
     
        Right
         Kanan
     
        Top
         Atas
     
        Down
         Bawah
     
        Loop
         N
         Perulangan bernilai n
     
        Bgcolor
         Color
         Untuk warna background
     
 
   
  Contoh berikut adalah bentuk 3 buah animasi marquee dengan menggunakan arah/behavior yang berbeda.
   
  Contoh15.html
  
  
  Membuat Animasi Marquee
  
  
  ANIMASI MARQUEE(ALTERNATE)

    direction="left">ANIMASI MARQUEE(SCROLL)

  ANIMASI MARQUEE(SLIDE)

  
  
   
                   Menciptakan Garis Horizontal
  Sebagai pembatas antara judul dengan isi, kita dapat menggunakan garis. Dalam HTML desidakan Tag yang berfungsi membuat garis Horizontal yaitu tag 
, kependekan dari Horizontal Row. Sintaks penulisannya :
   
  
   
  Atribut yang digunakan tag HR :
          Atribut
         Value
         Keterangan
     
        Size
         N
         Ukuran garis
     
        Color
         Color
         Warna garis
     
        Align
         Left,right
         Letak posisi garis
     
        Width 
         Length
         Lebar garis
     
 
   
  Berikut adalah contoh penggunaan garis berwarna merah diletakkan di sebelah kanan halaman.
   
  Contoh16.html
  
  
  Membuat Animasi Garis
  
  
  
Kuis Siapa Dia
  
  
 Adalah kuis yang saya sukai
  
  
   
  4.    Membuat Daftar
  Daftar atau list adalah merupakan kumpulan text yang disusun sedemikian rupa sehingga item-item yang ada memiliki nomor urut atau bias berupa tanda/symbol khusus.
  Berikut adalah beberapa daftar Tag yang digunakan dalam pembuatan List/Daftar :
          Tag
         Atribut
         Value
         Keterangan
     
        
         Type
         Square
   Disc
         Bulat kotak
   Bulat   titik
     
        
         Type
         I
   i
   A
   A
         Huruf besar romawi
   Huruf   kecil romawi
   Huruf   besar
   Huruf   kecil
     
        
         Start
         n
         Nilai awal penomoran
     
 
   
          Unordered List 
  Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag 
. Dan pada jenis ini tidak memerlukan pengurutan data. Perhatikan sintaks program berikut :
   
  
    
 daftar n 
    
 daftar n+1 
  
   
  Sebagai contoh, coba ketik daftar jurusan yang ada di SETI Jakarta berikut ini.
   
  Contoh17.html
  
  
  Membuat List
  
  
  Berikut ini adalah daftar jurusan yang ada di SETI Jakarta ?
  
  
Teknik Informatika (TI/S1)
  
Sistem Informasi (SI/S1)
   
Teknik Komputer (TK/D3)
  
Manajemen Informatika (MI/D3)
  
Komputerisasi Akutansi(KA/D3)
  
  
  
   
  Selain menggunakan sintaks diatas Anda juga dapat menggunakan beberapa sintaks yang menghasilkan output yang sama. Sintaks itu adalah :
   
  
    
 Daftar n 
    
 Daftar n+1 
  
  atau dapat menggunakan :
  
    
 Daftar n 
    
 Daftar n+1 
  
   
          Menghilangkan Tanda pada Daftar
  Apabila Anda ingin menghilangkan semua kode daftar/list yang ada, maka tag yang digunakan adalah 
 sebagai pengganti tag , dan  sebagai pengganti tag . Cobalah membuat contoh program seperti berikut :
   
  Contoh18.html
  
  
  Membuat Nnone List
  
  
  Berikut ini adalah daftar jurusan yang ada di SETI Jakarta ?
  
  
Teknik Informatika (TI/S1)
  
Sistem Informasi (SI/S1)
  
Teknik Komputer (TK/D3)
  
Manajemen Informatika (MI/D3)
  
Komputerisasi Akutansi(KA/D3)
  
  
  
   
  Teknik pembuatan daftar dengan DL dan DD dapat digantikan dengan menggunakan tag MENU seperti berikut.
   
  
    daftar 1 
    daftar 2 
    daftar ke-n 
  
   
  Contoh programnya adalah sebagai berikut.
   
  Contoh19.html
   
                           
  Membuat List 
   
  
  Berikut ini adalah daftar jurusan yang ada di SETI Jakarta ?
  
              Teknik Informatika (TI/S1)
              Sistem Informasi (SI/S1)
              Teknik Komputer (TK/D3)
              Manajemen Informatika (MI/D3)
              Komputerisasi Akutansi(KA/D3)
  
  
  
   
          Daftar Menggunakan Nomor
  Kita dapat membuat daftar dengan menggunakan metode penomoran (1, 2, …n, atau a, b, … n) atau dengan menggunakan huruf Romawi. Fungsi sintaks yang digunakan adalah :
   
  
    
 Daftar 1 
    
 Daftar 2 
    
 Daftar ke-n 
  
         
   
  Berikut contoh script dengan metode penomoran.
   
  Contoh20.html
  
  
  Membuat List
  
  
  Daftar Kelompok Study yang ada di SETI Jakarta :
  
  
Kelompok Study Linux (KSL)
  
Unix Network Club (UNC)
   
Linux Study Club (LSC)
  
  
  
   
  Pada contoh diatas, jika dijalankan akan menghasilkan sebuah daftar dengan menggunakan urutan abjad capital sebagai daftar listnya. Atau apabila Anda menginginkan angka urutan tidak dimulai dengan alphabet A, tetapi dari D, maka Anda harus menambahkan Atribut Start bernilai 4 pada tag 
, karena dalam urutannya D termasuk abjad ke 4, sehingga scriptnya berubah menjadi :
   
  
  
  Membuat List
  
  
  Daftar Kelompok Study yang ada di  SETI Jakarta :
  
  
Kelompok Study Linux (KSL)
  
Unix Network Club (UNC)
   
Linux Study Club (LSC)
  
  
  
   
          Mebuat Sub Daftar
  Dengan menggunakan Tag 
 dan , HTML juga mengijinkan Anda untuk membuat sebuah seub daftar. Maksud dari sub daftar adalah daftar di dalam daftar. Untuk lebih jelasnya lihat sintaks yang digunakan dan contoh scriptnya.
   
  Contoh21.html
  
  
   Sub Daftar<span style="">  </span>
  
  
  Jenis Prosesor yang Sering du gunakan :
   
  
INTEL
  
  
Pentium
  
Celeron
  
  
AMD
  
  
Atlon XP
  
Duron
  
Baltron
  
   
  
  
   
          Membuat List Header
  List Header atau  merupakan suatu cara dimana kita dapat menampilkan bentuk Header didalam List, adapun cara penulisannya adalah :
   
  
    Header
    
 Daftar 1 
    
 Daftar 2 
  
  Berikut adalah Contoh Scriptnya penggunaanya :
   
  Contoh22.html
  
  
  Membuat List
  
  
  Daftar Kelompok Study SETI Jakarta: 
  
              Linux Riseach 
              
Kelompok Study Linux (KSL)
              
Unix Network Club (UNC)
              
Linux Study Club (LSC)
  
  
  
   
  Pada script diatas Kita menggunakan Header yang bernama “Linux Research”, yaitu :
  Linux Research
   
          Daftar dengan Gambar
  Untuk membuat sebuah daftar dengan bentuk symbol yang dibat sendiri atau berupa gambar. Kita dapat menggunakan metode yang dilakukan saat membuat daftar tanpa symbol, yaitu menggunakan TD dan DD. Dan setelah meletakkan komponen daftar kita dapat melakukan pemanggilan gambar yang berupa symbol. Sebagai contoh lihatlah script berikut :
   
  Contoh23.html
  
  
  Membuat List
  
  
  Daftar makanan jenis gorengan: 
  
              
    
 Bakwan 
    
 Tahu Susor /Tahu Isi
    
 Pisang Goreng
    
 Tempe Goreng
    
 Combro
  
  
  
   
  5.    Menggunakan Tabel dan Pengaturannya
          Pembuatan Tabel
  Untuk dapat membuat tabel Anda dapat menggunakan Tag HTML yang dimulai dengan tag 
, yang kemudian diikuti dengan  dan  … 
Beberapa atribut yang digunakan pada pembuatan garis dengan menggunakan 
 
Atribut yang digunakan dalam 
  ·         
 : adalah tag yang menerapkan kepada browser bahwa itu adalah sebuah tabel. Tag TABLE dapat diikuti dengan beberapa atribut seperti lebar maupun warna background. 
·         
 : adalah TABLE ROW merupakan Tag yang digunakan untuk membuat baris dalam tabel.
·         
, jadi jumlah  setelah  yang pertama, yang berarti Anda menambahkan satu baris didalam tabel Anda. Setelah itu Anda juga harus mendefiniskan jumlah kolom yang disesuaikan pada baris diatasnya. Sebagai contoh buatlah dokumen HTML dibawah ini.
 
Contoh26.html       
 
               
                          Belajar Tabel 
              
 
  
      : Tabel Data adalah tag yang berguna untuk meletakkan data yang kita isikan dalam tabel. TD dapat juga diartikan sebagai kolom, jadi kita dapat membuat beberapa kolom didalam sebuah baris tabel.
   
  Sintaks dalam mebuat tabel :
  
….

   …. Isi …     
 
Didalam tag 
    
 Anda dapat meletakkan beberapa atribut yang berguna dalam pengaturan tabel, atribut itu antara lain adalah :
·         BORDER : Atribut ini digunakan untuk menentukan tebal garis pada tabel dengan ukuran angka dimulai dari 1-n
 
Cobalah ketikkan script tabel pertama Anda :
 
Contoh24.html
 
   
     Belajar Tabel 
   
 
  
                      
   
     
 
   
  
      Ini Table pertama      
   
 
   
   
   
  Script diatas jika Anda jalankan akan menghasilkan tabel dengan baris berjumlah satu (1) dan kolom = 1. Secara standar bila kita tidak menentukkan letak tabel, maka tabel akan berada disebelah kiri.
   
  5.1.1 Tabel dengan Beberapa Kolom
  Untuk dapat membuat tabel dengan dua kolom, berarti Anda harus menambahkan  diantara 
 akan mempengaruhi jumlah kolom dan tabel. Sekarang cobalah membuat tabel dengan jumlah baris 1, dan kolom = 3.
   
  Contoh25.html
   
     
       Belajar Tabel 
     
   
    
   
     
     
     
   
 
      Colom 1    Colom 2    Colom 3    
   
 
   
   
   
  5.1.2 Tabel dengan Banyak Baris
  Berikut adalah contoh pembuatan tabel dengan menggunakan kolom = 3 dan baris = 2. Untuk dapat membuat tabel tersebut Anda harus menambahkan  
 
                
            
                        
                        
                        
             
                        
                        
                        
             
  
      Colom 1    Colom 2    Colom 3    
      cel    cel    cel    
  
 
   
  
   
  Pengaturan Tabel
  Dengan menggunakan beberapa atribut, Anda dapat melakukan pengaturan bentuk tabel maupun posisi dari tabel dan data. Beberapa atribut yang dapat digunakan dalam pengaturan tabel adalah :
   
  Atribut pada tag 
 … 
  Pada tag 
 memiliki beberapa atribut yaitu align (Perataan/Posisi), border (Lebar garis), Width (lebar tabel), cellpadding, cellspasing serta bgcolor (warna latar belakang). Atribut yang digunakan dalam 
 
    
        Atribut
         Keterangan
     
        Align
         Digunakan   untuk meratakan tabel ke kiri, ke tengah, ke kanan, atau kanan-kiri. Align dapat   bernilai left, center, right, atau justify.
     
        Border
         Border   digunakan untuk mengatur ketebalan garis pembatas antar sel-sel dalam tabel
     
        Width
         Digunakan   untuk menentukan lebar tabel, Anda dapat menentukan lebar tabel dengan nilai   persen (%)
     
        Cellspacing
         Cellspacing   digunakan untuk menyatakan jarak spasi antar sel satu dengan lainnya serta   antar sel dengan batas tabel
     
        Cellpadding
         Atribut   ini menyatakan jarak spasi antara isi sel dengan batas sel (border)
     
        Bgcolor
         Menunjukkan warna background untuk   semua cell pada tabel
     
        Bordercolor
         Digunakan untuk membuat warna pada   garis / border
     
 
   
   
  Atribut pada Tag 
      
  
        Atribut
         Keterangan
     
        Align
         Dapat bernilai left, center, right,   atau justify. Digunakan untuk melakukan perataan tabel ke kiri   (left), ke tengah (center), ke kanan (right)
     
        Valign
         Digunakan untuk melakukan perataan   yang bersifat horizontal (alignment). Valign menggunakan nilai top (atas),   center (tengah), bottom (bawah) atau baseline (standar)
     
        Bgcolor
         Menunjukkan warna background pada   baris
     
 
   
   
  Lebar dan Tinggi Tabel
  Tabel yang dibuat dapat kita buat dengan lebar dan tinggi sesuai dengan kebutuhan. Untuk dapat melakukan pengaturan lebar dan tinggi, kita dapat menggunakan atribut Width dan Height yang disisipkan di dalam tag . Berikut adalah keterangan penggunaan Width dan Height.
   
  
 … isi … 
 
Keterangan atribut dari sintaks di atas :
·         Width : atribut ini digunakan untuk menentukan lebar tabel. Ukuran yang digunakan adalah dengan menggunakan persen (%) yaitu dimulai dengan dari 1% sampai dengan 100%. Selain persen, Anda juga dapat memakai ukuran Pixel atau (px) yang nilainya disesuaikan dengan resolusi monitor yang Anda gunakan.
·         Height : atribut ini digunakan untuk menentukan tinggi cell tabel. Ukuran yang digunakan sama seperti pada Width.
 
Cobalah untuk membuat Script dengan menggunakan lebar tabel = 40% dan tinggi = 100%.
 
Contoh27.html
 
 
Belajar Tabel 
 
 
                            
      lebar=20% dan tinggi="30"    
   
 
   
  
   
  Posisi Tabel
  Dalam pembuatan tabel, secara standar tabel akan terletak di sebelah kiri halaman. Untuk mengatur letak posisi tabel, Anda dapat menggunakan atribut Align yang diletakkan di dalam tag 
. Untuk nilai yang dipakaidalam peletakkan posisi tabel adalah Center (tengah), Left (kiri), dan Right (kanan).
 
    
 … isi … 
   
  Cobalah untuk membuat dokumen HTML untuk membuat sebuah tabel yang posisinya berada ditengah halaman atau center.
   
  Contoh28.html
   
   
  Belajar Tabel 
   
   
  
      Tabel berada di tengah halaman   
  
 
   
  
   
  Border / Tebal Garis
  Border diartika sebagai garis, dengan menggunakan border Anda dapat membuat tabel menjadi lebih menarik. Seperti contoh-contoh sebelumnya Anda telah menggunakan border yang disisipkan di dalam Tag.
   
  
  
 
Cobalah contoh script berikut :
Contoh29.html
 
 
Belajar Tabel 
 
                  
     CENTRANET   
   
 
   
  
   
  Pengaturan Jarak Spasi pada Cell
  Di dalam sebuah kalimat, spasi kosong atau yang dapat disebut dengan white space diartikan sebagai jarak antara karakter dengan karakter. Akan tetapi di dalam tabel Anda juga mengenal dengan jarak karakter. Akan tetapi tabel hanya dapat melakukan pengaturan jarak spasi antara karakter dan garis pinggir tabel dan pengaturan antar jarak garis tabel. 
  Untuk dapat memberikan jarak antara karakter dengan garis/border, tabel dikenal dengan atribut cellspacing dan cellpadding. Jadi, didalam tabel memiliki pengertian yang agak berbeda. Untuk latihan, cobalah membuat halaman baru berdasarkan script berikut :
   
  Contoh30.html
   
   
  Belajar Tabel 
   
   
  
      CENTRANET Bekerja sama sengan ANDI OFFSET    CENTRANET Merupakan Web Developer   
      ANDI OFFSET Merupakan Penerbit buku di Jogjakarta    CENTRANET   
   
 
   
  
   
  Letak Karakter
  Pada saat membuat sebuah tabel dengan ukuran yang besar, maka Anda tidak harus mendapatkan posisi karakter yang berada dibagian pojok kiri cell. Anda dapat melakukan pengaturan sesuai dengan yang dikehendaki. Berikut adalah aturan dalam peletakkan posisi yang atributnya disisipkan pada Tag.
   
   Caracter 
   
  Contoh buatlah halaman baru untuk membuat sebuah tabel dengan jumlah baris = 1, kolom = 1 dan aturlah panjang dan lebarnya sebagai berikut :
  Contoh31.html
          
   
  Belajar Tabel 
   
   
  
WIDTH="80%" HEIGHT="80%"> 
       CENTRANET    
   
 
   
  
   
  Memberi Warna pada Tabel
  Di dalam tabel dapat dibedakan komponen-komponen pewarnaan, yaitu pewarnaan pada border dan warna pada cell. Anda juga dapat memberi warna yang sama pada setiap cell pada tabel atau memberi warna yang berbeda pada setiap cell. Berikut cara dalam pemberian warna.
   
  
    cell pertama   cell kedua   
  
   
  Untuk mencoba efek bgcolor dan bordercolor cobalah untuk membuat script berikut :
   
  Contoh32.html
   
   
  Belajar Tabel 
   
   
  
      CENTRANET Bekerja sama sengan ANDI OFFSET    CENTRANET Merupakan Web Developer   
      ANDI OFFSET Merupakan Penerbit buku di Jogjakarta    CENTRANET   
   
 
   
  
   
  Merger Cell
  Merger artinya menggabungkan, pada tabel merger cell berarti menggabungkan antar cell atau dapat diartikan dengan menggabungkan antara baris dengan baris ataupun baris dengan kolom.
  Dengan menggunakan isitilah merger Anda dapat membuat sebuah tabel yang dinamik sesuai dengan kebutuhan Anda.  Untuk dapat melakukan penggabungan antara baris, ataupun kolom Anda menggunakan atribut rowspan dan colspan. Adapun guna dari atribut tersebut adalah :
  ·         Rowspan : digunakan untuk menggabungkan antara baris. Jika Anda hendak menggabungkan 3 baris maka Rowspan Anda beri nilai 3, dan begitu juga kelipatannya.
  ·         Colspan : digunakan untuk menggabungkan kolom dengan kolom. Atribut ini memiliki nilai seperti rowspan yang bernilai 4 jika hendak menggabungkan 4 kolom.
   
  5.3.1 Menggabungkan Beberapa Kolom
  Anda dapat menggabungkan beberapa kolom pada tabel Anda menjadi satu kolom. Untuk dapat menggabungkan kolom tersebut Anda harus menggunakan Colspan yang kemudian diberikan nilai berapa kolom yang hendak Anda gabungkan, berikut adalah teknik penggabungannya.
   
  
 
Sebagai latihan cobalah buat tabel dengan baris = 2, kolom = 3, kemudian gabungkan ketiga kolom diatas menjadi kolom, lihatlah teknik pembuatannya.
 

 Contoh33.html
 
 
Belajar Tabel 
 
 
     Merger   
    Cell 1   cell 2   
                      
 
      Colom yang di gabungkan    
      Colom 1, Baris 2    Colom 2, Baris 2   
   
 
   
  
   
  Pada script diatas atribut yang digunakan adalah Colspan = 2 yang berarti menggabungkan dua kolom menjadi satu kolom.
   
  5.3.2     Menggabungkan Beberapa Baris dan Kolom
  Untuk menggabungkan baris memerlukan atribut Rowspan yang disisipkan pada tag . Atribut ini sebenarnya memiliki kegunaan yang hampir sama dengan colspan.
   
  Contoh34.html
   
   
  Belajar Tabel 
   
   
  
      Baris yang di gabungkan    Colom 2 , Baris 1    
      Colom 2, Baris 2    
   
 
   
  
   
  5.3.3     Menggabungkan Baris dan Kolom
  Anda dapat menggabungkan beberapa kolom dan baris setalah memahami konsep Colspan dan Rowspan. Cobalah Script dibawah ini untuk menggabungkan dua kolom dan dua baris.
   
  Contoh35.html
   
   
  Belajar Tabel 
   
   
  
      Daftar    Nama Teman    
      Arief  NS    Didik K    
   
 
   
  
   
  Tabel di Dalam Tabel
  Di dalam perancangan web, tabel sangat penting perannya, tabel kemudian akan dijadikan kerangka untuk meletakkan beberapa komponen web. Dalam sebuah halaman web, Anda diijinkan untuk meletakkan beberapa tabel atau banyakorang sering menyebutnya dengan istilah tabel di dalam tabel. Cobalah buat sebuah tabel yang didalamnya kita sisipkan sebuah tabel dengan baris berjumlah dua.
   
  Contoh36.html
   
   
  Belajar Tabel 
   
   
  
      
  
    Ini tabel di dalam tabel   
  
     
   
 
   
  
   
  Dengan beberapa contoh diatas, berarti Anda telah selesai dalam mempelajari pembuatan tabel dan teknik dalam mendesain sebuah halaman website.
   
  6.    Menggunakan Formulir
          Mengenal Formulir
  Form adalah sebuah metode yang digunakan dalam Website yang mengijinkan seseorang untuk dapat berinteraksi dengan Server ataupun dengan pengelola website tersebut. Di dalam dunia website, web yang mengijinkan interaksi dengan pengunjung sering disebut dengan Web Dinamis atau portal. Sedangkan untuk web yang hanya menampilkan informasi kepada pengunjung dan tidak mengijinkan pengunjung untuk melakukan sesuatu apapun di dalam website tersebut disebut website statis.
  Untuk dapat menciptakan halaman web yang dapat berinteraksi dengan pengunjung salah satunya Anda dapat menggunakan Formulir, yang kemudian formulir tersebut akan dikirim dengan menggunakan program aplikasi Web berbasis Server Side menuju database server. Adapun Server Side yang dimaksud adalah PHP, Cold Fusion, ASP, JSP, Perl, dan lain-lain.
  Dalam website, Form biasanya digunakan sebagai media yang digunakan untuk pengunjung dalam mengirimkan permintaan ataupun mengirimkan pesan seperti Buku Tamu, Shout Box, Email, Pencarian (search), Pendaftaran Online dan lain-lain.
  Secara standar, untuk dapat membuat form, Anda hanya menggunakan Start tag 
 dan diakhiri dengan End tag 
. Perhatikan sintaksnya sebagai berikut :
  
  
  
  …….
  
   
  Keterangan tag :
  ·         
  : Digunakan mendeklarasikan awalan tag sebuah form
  ·           : Digunakan untuk memasukkan komponen-komponen formulir
  ·         : Tag penutup / end tag dari sebuah form
  ·         Action   : Digunakan untuk menentukkan alamat dimana data dari komponen form akan dikirimkan. Pengiriman ini pada umumnya dialamatkan pada sebuah halaman yang berisi kode program aplikasi seperti PHP, ASP, dan lain sebagainya.
  Contohnya sebagai berikut :
   
  
  
  ….
  
   
  method       : Digunakan untuk membedakan metode pengiriman data. Atribut yang digunakan dalam pengiriman data antara lain :
          Atribut
         Keterangan
     
        Get
         Pengiriman   data ke dalam halaman lain yang tidak berhubungan dengan halaman selanjutnya
     
        Post
         Melakukan   pengiriman datapada halaman lain yang selanjutnya dapat diproses menuju   halaman berikutnya ataupun melakukan pengiriman ke dalam database
     
 
   
  Name          : Digunakan untuk memberi nama variabel pada Formulir yang kita buat
   
  Berikut adalah gambaran umum dalam membuat sebuah halaman form pada web kita.
  
  
  …
  
  
   
          Komponen Masukan pada Form
  Dalam HTML kita mengenal beberapa bentuk masukan Form yaitu Input, Textarea, Select. Sedangkan dalam Komponen Input Anda dapat membedakan beberapa bentuk masukan seperti Password, Button, Select, dan lain-lain.
  Dalam penulisannya, HTML menyesuaikan beberapa atribut yang ada di dalam tag Input. Hal ini berguna untuk mendeklarasikan jenis masukan yang dijadikan sebagai aturan dasar sebuah Form.
  Berikut adalah beberapa aturan yang digunakan dalam pembuatan Form dari komponen-komponennya.
  ·         Untuk setiap komponen diharuskan memiliki Nama atau sering juga disebut sebagai Variabel. Semua data yang disimpan dalam variabel akan dibaca oleh bahasa pemrograman pada saat melakukan posting Form (tombol submit diklik). Penamaan variabel/nama ini harus berbeda dengan komponen form yang lain.
   
  
   
  ·         Setiap komponen memiliki nilai/isi, dalam hal ini digunakan Value sebagai atributnya. Value digunakan untuk melakukan pembacaan data yang dimasukkan oleh pengunjung yang selanjutnya akan dibaca sebagai Variabel pada atirbut Name. 
   
  
   
  ·         Untuk Input, Anda mengenal beberapa jenis bentuk masukan seperti Tombol, Text, maupun masukan yang berbentuk Password. Dalam penggunaannya Anda dapat menggunakan Atribut Type untuk dapat membedakan bentuk masukannya. 
   
  
   
  ·         Selain komponen Input HTML juga memiliki beberapa tipe Komponen yang berdiri sendiri, akan tetapi memiliki fungsi yang sama dengan komponen  Input. Komponen itu adalah Textarea, Select, dengan tag seperti berikut.
   
  <o:p></o:p></span></p>  <p class="MsoNormal" style="margin-left: 0.25in; text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><select name=”variabel”><o:p></o:p></span></p>  <p class="MsoNormal" style="margin-left: 0.25in; text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><b style=""><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";">6.2.1 Masukan Berupa Text (Text Field)<o:p></o:p></span></b></p>  <p class="MsoBodyText"><span style="" lang="SV">Text adalah masukan yang berbentuk karakter. Untuk dapat memasukkan data dalam bentuk karakter, HTML memiliki komponen masukan yang bertipe Text. Text dikhususkan untuk menerima masukan yang sifatnya sedikit, dalam hal ini Anda hanya diijinkan untuk memasukkan data hanya satu kalimat saja, seperti Pernyataan Nama, Alamat, maupun Email. Bentuk penulisannya adalah seperti berikut.<o:p></o:p></span></p>  <p class="MsoBodyText"><span style="" lang="SV"><o:p> </o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"><input type=”text” name=”variabel”><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="" lang="SV"><o:p> </o:p></span></p>  <p class="MsoBodyText">Dengan menggunakan metode tersebut, Anda telah memiliki suatu bentuk masukan yang berbentuk Text, yang kemudian dibaca dengan nama Variabel Alamat. Selanjutnya data yang dimasukkan akan dibaca dengan nama alamat. Dalam masukan bertipe Text, Anda dapat memberi batasan dalam masukan data dengan menggunakan ukuran maksimal text yang dimasukkan.</p>  <p class="MsoBodyText"><o:p> </o:p></p>  <p class="MsoBodyText"><span style="color: blue;"><input type=”text” name=”alamat” size=”panjang_text” maxlength=”panjang_max_text”><o:p></o:p></span></p>  <p class="MsoBodyText"><o:p> </o:p></p>  <p class="MsoBodyText">Summary :</p>  <p class="MsoBodyText" style="margin-left: 0.25in; text-indent: -0.25in;"><!--[if !supportLists]--><span style="font-family: Symbol;" lang="SV"><span style="">·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;">         </span></span></span><!--[endif]--><span dir="ltr"></span><span style="" lang="SV">Size<span style="">             </span>: Digunakan untuk menentukan panjang komponen text didalam browser<o:p></o:p></span></p>  <p class="MsoBodyText" style="margin-left: 0.25in; text-indent: -0.25in;"><!--[if !supportLists]--><span style="font-family: Symbol;" lang="SV"><span style="">·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;">         </span></span></span><!--[endif]--><span dir="ltr"></span><span style="" lang="SV">Maxlength<span style="">   </span>: Digunakan untuk melakukan pembatasan data yang dimasukkan kedalam media masukan. Untuk nilainya Anda dapat menggunakan angka yang terhitung sebagai karakter.<o:p></o:p></span></p>  <p class="MsoBodyText"><span style="" lang="SV"><o:p> </o:p></span></p>  <p class="MsoBodyText"><b><i><span style="color: blue;">Contoh37.html<o:p></o:p></span></i></b></p>  <p class="MsoBodyText"><span style="color: blue;"><HTML> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style=""> </span><span style="">           </span><HEAD> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span><span style="">                    </span><TITLE>Belajar Form</TITLE> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">            </span><span style="">  </span></HEAD> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><BODY> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">  </span><FORM ACTION="" NEME="" ><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">  </span><TABLE width="280" border="0"><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span><TR> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span><TD width="86">Nama</TD><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span><TD width="184"><input name="nama" type="text" id="nama" size="25" maxlength="20"> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span></span><span style="color: blue;" lang="SV"></TD><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"><span style="">    </span></TR><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"><span style="">    </span><TR> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"><span style="">      </span><TD>Alamat</TD><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"><span style="">      </span></span><span style="color: blue;"><TD><input name="alamat" type="text" id="alamat" size="30" maxlength="50"><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">            </span><span style="">  </span></TD><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span></TR><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span><TR> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span><TD>E_mail</TD><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span><TD><input name="email" type="text" id="email" size="25" maxlength="20"><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">            </span><span style="">  </span></TD><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span></TR><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">  </span></TABLE> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"></FORM><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"></BODY><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"></HTML><o:p></o:p></span></p>  <p class="MsoBodyText"><b><span style="color: blue;"><o:p> </o:p></span></b></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><b style=""><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";">6.2.2 Masukan Berupa Password<o:p></o:p></span></b></p>  <p class="MsoBodyText"><span style="" lang="SV">Password adalah bentuk kata yang dirahasiakan. Anda tidak akan dapat dan boleh mengetahuinya jika tidak memiliki hak dalam penggunaannya. Dalam internet, Anda biasa menjumpai penggunaan password untuk layanan situsnya. Penggunaan password sering siebut dengan istilah account user. Untuk dapat menggunakan komponen password, Anda dapat menuliskan tag-nya seperti berikut :<o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";" lang="SV"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><input type=”password” name=”variabel”><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";" lang="SV">Untuk latihan, buat Form berisi dua buah masukan berupa text dan password. Form ini digunakan untuk validasi user Email pengguna.<o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";" lang="SV"><o:p> </o:p></span></p>  <h1><span style="" lang="SV">Contoh38.html<o:p></o:p></span></h1>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><HTML> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><span style=""> </span><span style="">           </span></span><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><HEAD> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><span style="">                    </span><TITLE>Belajar Form</TITLE> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">            </span><span style="">  </span></HEAD> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><BODY> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span><FORM ACTION="" NEME="" ><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span><TABLE width="280" border="0"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><TR> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">      </span><TD width="86">Login</TD><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">      </span><TD width="184"><input name="login" type="text" id="login" size="30" maxlength="30"> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">      </span></TD><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span></TR><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><TR> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">      </span><TD>Password</TD><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">      </span><TD><input name="kunci" type="password" id="kunci" size="30" maxlength="30"> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">      </span></TD><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span></TR><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span></TABLE> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"></FORM><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"></BODY><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"></HTML><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";">Dalam penggunaan password, setiap karakter yang dimasukkan didalamnya akan dienskripsi sehingga pada halaman Address Web hanya akan terlihat kode-kode seperti bintang. Hal tersebut berguna untuk pengamanan password.<o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><b style=""><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";">6.2.3 Masukan Berupa Pilihan Tunggal (Radio Button)<o:p></o:p></span></b></p>  <p class="MsoBodyText">Pada saat melakukan browsing, mungkin Anda sering menjumpai pertanyaan-pertanyaan yang meminta Anda untuk memilih salah satu jawaban yang disediakan. Sebagai contoh dalam aplikasi polling atau jajak pendapat. Anda dapat menggunakan komponen radio button untuk membuat aplikasi tersebut.</p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><input type=”radio” name=”variabel” value=”value”><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";">Apabila Anda membuat beberapa pilihan yang mengijinkan pengguna hanya dapat memilih satu pemilihan saja, maka Anda harus memberi variabel sama pada semua pilihan yang telah dibuat seperti contoh berikut.<o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;">Contoh39.html<o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><HTML> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style=""> </span><span style="">           </span><HEAD> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><span style="">                    </span><TITLE>Belajar Form</TITLE> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">            </span><span style="">  </span></HEAD> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><BODY> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span><FORM ACTION="" NEME="" ><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span></span><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><p>Sistem Operasi manakah yang anda gunakan di rumah ?</p><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><span style="">  </span><p> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><span style="">    </span></span><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><input type="radio" name="so" value="Wondows 9X"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>Windows 9X<br><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><input type="radio" name="so" value="Windows NT Server"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>Windows NT Server<br><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><input type="radio" name="so" value="Mac OS"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>Mac OS<br><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><input type="radio" name="so" value="UNIX / LINUX"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>UNIX / LINUX<br><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span></p><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"></FORM><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"></BODY><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"></HTML><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";" lang="SV"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><b style=""><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";" lang="SV">6.2.4 Masukan Berupa Pilihan Ganda (Checkbox)<o:p></o:p></span></b></p>  <p class="MsoBodyText">Pilihan ganda berarti dalam pilihannya mengijinkan Anda untuk menentukan pilihan lebih dari satu. Hal ini berarti Anda dapat memilih satu atau bahkan memilih semua dari beberapa pilihan. Untuk dapat melakukannya, Anda dapat menggunakan komponen input bertype Checkbox. Sintaks penulisannya :</p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><input type=”checkbox” name=”variabel”><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";">Untuk latihan cobalah membuat sebuah pilihan yang menyatakan beberapa mata kuliah yang telah Anda ambil dalam semester ini.<o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <h1><span style="">Contoh40.html<o:p></o:p></span></h1>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><HTML> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style=""> </span><span style="">           </span><HEAD> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><span style="">                    </span><TITLE>Belajar Form</TITLE> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">            </span><span style="">  </span></HEAD> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><BODY> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span><FORM ACTION="" NEME="" ><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span></span><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><p>Mata kuliah mana yang telah anda ambil ?<br><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><span style="">    </span></span><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><input name="cek1" type="checkbox" id="cek1" value="Kalkulus I"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>Kalkulis I<br><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><input name="cek2" type="checkbox" id="cek2" value="Kalkulus II"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>Kalkulis II<br><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><input name="cek3" type="checkbox" id="cek3" value="Matematika Diskrit"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>Matematika Diskrit<br><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><input name="cek4" type="checkbox" id="cek4" value="Fisika Dasar"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>Fisika Dasar<br><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><input name="cek5" type="checkbox" id="cek5" value="Metode Penelitian"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span></span><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV">Metode Penelitian<br><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><span style="">  </span></p><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><span style="">  </span></FORM><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"></BODY><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"></HTML><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><b style=""><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";">6.2.5 Masukan Berupa Pulldown (List Menu)<o:p></o:p></span></b></p>  <p class="MsoBodyText">Pulldown list adalah metode masukan data yang datanya telah dimasukkan sebelumnya oleh pembuatnya. <span style="" lang="FI">Dengan menggunakan Pull Down list, Anda hanya diijinkan melakukan pilihan berjumlah satu pilihan saja. Dalam membuat Pulldown, Anda menggunakan tag Select sebagai atribut pengganti Input dan Option sebagai daftar data yang dimasukkan. Sintaks penulisannya adalah sebagai berikut :<o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="FI"><select name=” “><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="FI"><span style=""> </span><option value=”value”> … karakter isi 1<o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="FI"><span style=""> </span></span><span style="color: blue;" lang="SV">……<o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"><span style=""> </span><option value=”value”> … karakter isi ke-n<o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"></select><o:p></o:p></span></p>  <p class="MsoBodyText"><o:p> </o:p></p>  <p class="MsoBodyText">Cobalah untuk membuat sebuah menu Pulldown yang menampilkan 4 jenis golongan darah yang ada.</p>  <p class="MsoBodyText"><b style=""><i><span style="color: blue;">Contoh41.html<o:p></o:p></span></i></b></p>  <p class="MsoBodyText"><span style="color: blue;"><HTML> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style=""> </span><span style="">           </span><HEAD> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span><span style="">                    </span><TITLE>Belajar Form</TITLE> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">            </span><span style="">  </span></HEAD> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><BODY> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">  </span><FORM ACTION="" NEME=""><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">  </span></span><span style="color: blue;" lang="PT-BR"><p>Anda memiliki golongan darah jenis apa <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="PT-BR"><span style="">    </span></span><span style="color: blue;"><select name="goldar" id="goldar"><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span><option value="A">A</option><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span><option value="B">B</option><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span><option value="AB">AB</option><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">   </span><span style="">   </span><option value="O">O</option><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span></select><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span><br><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">  </span></p><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">  </span></FORM><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"></BODY><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"></HTML><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"><o:p> </o:p></span></p>  <p class="MsoBodyText"><b><span style="" lang="SV">6.2.6 Masukan Berupa Komentar (Textarea)<o:p></o:p></span></b></p>  <p class="MsoBodyText"><span style="">Didalam sebuah web, Anda membutuhkan metode pemasukan data yang memungkinkan Anda memasukkan data yang banyak. Disini kita mengenal media yang disebut Textarea yang dalam penulisannya memiliki aturan seperti berikut.<o:p></o:p></span></p>  <p class="MsoBodyText"><span style=""><o:p> </o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><textarea name=”varabel” rows=”value” cols=”value”> 
   
  Cobalah untuk membuat sebuah form bukutamu. 
  Contoh42.html
   
               
                          Belajar Form 
                 
   
    
   >
    
    
      
      
    
    
      
      
    
    
      
      
    
  
     Nama    
          
     Alamat    
          
     Pesan    
          
  
    
  
  
   
  6.2.7 Masukan Berupa Pengambilan Data Komputer Lokal
  Untuk pengambilan data yang berkenaan dengan data yang ada pada komputer yang sedang kita pakai, atau lokal biasanya digunakan aplikasi Upload File. Hal ini akan Anda jumpai pada saat berada pada aplikasi Site Manager yang mengijinkan Anda untuk melakukan Upload Data.
  Untuk dapat membuat komponen Upload, kita menggunakan Sintaks Input bertipe File yang artinya pada saat kita mengklik komponen tersebut, maka akan dibawa pada halaman penjelajahan pada komputer kita.
   
  
   
  Cobalah untuk membuat sebuah halaman yang terdapat tiga buah media input bertipe File, seperti berikut.
   
  Contoh43.html
   
               
                          Belajar Form 
                 
   
    
  
   >
    
    
      
      
    
    
      
      
    
    
      
      
    
  
     Data 1      size="25">   
     Data 2      size="25">   
     Data 3     size="25">   
  
    
  
  
   
  6.2.8 Membuat Tombol (Button)
  Langkah terakhir yang harus Anda ketahui adalah Tombol atau biasanya Anda menyebutnya dengan nama Button. Tombol yang digunakan untuk melakukan perintah ekesekusi dari semua komponen yang telah Anda buat sebelumnya. Jadi dalam teknik pembuatan formulir tombol merupakan langkah terakhir yang harus dibuat. Dalam pemakaiannya Anda dapat membedakan 3 buah tombol yaitu Submit, Reset, dan None. 
          Tipe   Button
         Fungsi
     
        Submit
         Tombol ini digunakan untuk mengeksekusi seluruh komponen form menuju   halaman yang telah dialamatkan pada atribut Action yang ada didalam badan   Form.
     
        Reset
         Berguna untuk mengosongkan semua data yang telah diisikan ke dalam   komponen sebelumnya.
     
        Button
         Tombol ini dapat Anda gunakan sebagai tombol yang memiliki alamat   sesuai dengan yang diinginkan. Untuk dapat membuat alamat ini Anda memerlukan   bantuan Javascript dalam pengalamatannya.   (onclick=”parent.location=’alamat.htm’”;)
     
 
   
  Dalam penulisannya komponen button memiliki sintaks penulisan seperti berikut :
   
  
   
  Dari penggunaan sintaks diatas Anda dapat mengetahui bahwa atribut yang ada adalah :
          Atribut
         Keterangan
     
        Type
         Untuk menentukan   type tombol, yaitu Submit, Reset, dan Button
     
        Name
         Digunakan untuk   mendeklarasikan tombol sebagai variabel
     
        Value
         Digunakan untuk memberi label pada tombol, sehingga akan tampak pada   halaman browser
     
 
   
  Cobalah untuk membuat sebuah halaman pendaftaran yang menanyakan mengenai nama, alamat, jenis kelamin, dan kemudian gunakan dari ketiga buah tipe tombol diatas.
   
  Contoh44.html
   
               
                          Belajar Form 
                 
   
    
  
  NEME="form_coba"   >
    
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
  
     Nama    
          
     Alamat    
          
     Kelamin      
       
          
            
  
  
  
           
   
  Pada halaman diatas jika Anda mengklik tombol kirim, maka akan menuju ke halaman eksekusi.php. Hal ini dapat terjadi apabila Anda telah mendeklarasikannya terlebih dahulu pada saat menuliskan Form pertama kali. Sedangkan tombol Bersih akan mengakibatkan data yang dimasukkan akan terhapus atau mengosongkan halaman form. Dan tombol Kembali akan membawa Anda pada halaman utama.htm.
   
   
  7.    Menggunakan Gambar dan Hyperlink
   
  7.1 Memasukkan Gambar 
  Gambar adalah komponen web yang sangat penting. Dengan adanya gambar, halaman web yang kita buat akan terlihat familiar dan lebih menarik. Gambar juga adalah salah satu komponen web yang dapat mempengaruhi keindahan desain serta dapat mempercantik halaman Web. Ada beberapa program pengolah gambar yang dapat Anda gunakan seperti Photoshop, Firework dan lain sebagainya.
   
  7.1.1 Format Gambar
  Formta gambar adalah sebuah bentuk metode dalam menyimpan gambar. Maksudnya bentuk dari gambar tersebut merupakan format gambar terakhir yang didapatkan dari pengolahan data gambar dengan program aplikasi pengolah gambar. Dalam pembuatan web, format gambar yang sering digunakan adalah Gif, JPEG, JPG, atau BMP. Berikut adalah penjelasan lengkap dari beberapa format tersebut.
  ·         JEPG : Adalah kependekan dari Joint Photographic Expert Group, merupakan format gambar yang mampu menyimpan data gambar dengan ukuran 24 bit per pixel. Sehingga memiliki kemampuan untuk menampilkan 16 warna
  ·         GIF     : merupakan kependekan dari Graphics Interchange Format, format gambar ini mampu menyimpan gambar dengan kekuatan 8 bit per pixel.
  ·         Selain gambar tersebut juga terdapat format JPG dan BMP
   
  7.1.2 Pemanggilan Gambar
  Untuk dapat menggunakan gambar dalam halaman web, sintaks yang digunakan untuk memanggil gambar ke dalam halaman web dapat dilakukan dengan perintah berikut.
   
  
   
  Pada sintaks diatas terdapat beberapa atribut penting sebagai berikut :
          Atribut
         Keterangan
     
        Src
         Digunakan untuk melakukan pemanggilan gambar.   Dalam sintaks tersebut Anda harus mengetikkan nama file gambar yang digunakan   untuk ditampilkan di halaman web.
     
        Width
         Digunakan untuk melakukan pengaturan lebar gambar.   Nilai yang digunakan dihitung dengan hitungan persen (%), atau dengan   menggunakan hitungan px (pixel)
     
        Height
         Digunakan untuk melakukan pengaturan tinggi   gambar. Atribut ini mirip dengan atribut width yaitu menggunakan nilai persen   (%) untuk perhitungan tingginya
     
        Alt
         Sedangkan alt berguna untuk memberikan pesan pada   saat mouse melewati area gambar
     
 
   
  Sebagai latihan, cobalah membuat  sebuah program yang digunakan untuk menampilkan beberapa gambar didalamnya seperti contoh berikut.
   
  Contoh45.html
   
               
                          Belajar ambil gambar 
                 
  
    >
  
  
   
  File contoh diatas akan melakukan pemanggilan gambar dengan nama linux.jpg dengan panjang 80% dan lebar 20%. Cobalah untuk menggerakkan mouse Anda diatas gambar linux diatas sehingga pada saat mouse melewati area gambar akan tampak pesan yang bertuliskan “ini gambar Linux” yang telah dideklarasikan dengan menggunakan atribut alt.
   
  7.1.3 Pengaturan dan Letak Gambar
  Dengan menggunakan sintaks IMG standar diatas, Anda dapat menyisipkan beberapa atribut yang berguna untuk melakukan pengaturan gambar seperti memberi border pada gambar dan peletakan posisi gambar pada halaman. Berikut merupakan atribut tambahan yang digunakan dalam pengaturan gambar.
   
          Atribut
         Value
         Keterangan
     
        Border
         g-n
         Untuk membuat border   yang mengelilingi gambar
     
        Align
         Right
   Left
   Center
         Melakukan pengaturan   tata letak gambar dengan nilai left, center, dan right
     
 
   
  Dengan menggunakan penambahan atribut seperti yang ada pada tabel di atas, sintaks pemanggilan gambar akan berubah menjadi seperti berikut.
   
  
   
  Cobalah untuk memodifikasi contoh script ambil_gambar.htm dengan menambahkan border sebesar 5 dan letakkan gambar pada posisi rata kanan seperti script berikut.
   
  Contoh46.html
   
               
                          Belajar format gambar 
                 
  
    align="right"> 
  
  
   
  Lihat dan simpulkan apa yang terjadi dengan tampilan gambar pada browser.
   
  7.1.4 Meletakkan Gambar Di Dalam Tabel
  Dengan menggunakan tabel Anda dapat melakukan pengaturan gambar sehingga web akan ditampilkan dengan format yang lebih baik. Biasanya tabel digunakan sebagai kerangka web, yang pada setiap cell (pertemuan kolom dan baris) akan diletakkan beberapa komponen web yang berkaitan dengan objek yang ditampilkan. Beberapa komponen web yang sangat mendukung keindahan sebuah website adalah sebuah gambar. Sebagai contoh, cobalah script berikut dengan mengetikkannya pada editor Anda.
   
  Contoh47.html
  
    
    Ambil gambar
   
   
  
  
    
      
  
  
       
          
  
  
  
   
  7.1.5 Membuat Bingkai dengan Border Tabel
  Dengan menggunakan tabel dan border yang diperbesar, Anda dapat menciptakan gambar yang tampak seperti dikelilingi bingkai. Untuk lebih jelasnya, cobalah contoh script berikut ini.
   
  Contoh48.html        
  
    
    gambar bingkai
   
   
  
  
    
      
    
    
      
    
     Bunga Wawar   
      
                
        
          
            
    
     
             src="../gambar/rose.gif" 
            width="126">   
    
  
  
  
   
  Pada contoh script diatas Anda menggunakan dua buah tabel . Tabel pertama digunakan untuk membuat judul yang bagian-bagiannya terdapat dua buah baris dan satu kolom, kemudian didalam tabel pertama, baris satu dibuat sebuah tabel dengan tebal border = 20, serta latar belakangnya dipasang dengan warna hijau. Pada tabel kedua digunakan untuk meletakkan gambar sehingga gambar seakan-akan ditampilkan seperti dikelilingi bingkai. 
   
   
   
  7.2 Membuat Hyperlink
  Hyperlink atau link adalah sebuah metode menghubungkan antara halaman yang satu dengan halaman lain. Dengan menggunakan link, Anda dapat membuat sebuah halaman web utama yang didalamnya berisi hubungan dengan halaman-halaman web page atau berisi web-web lain yang ada di internet.
   
  7.2.1 Membuat Link ke Halaman Lain
  Secara harafiah, link dapat berarti semua bentuk tulisan ataupun gambar yang pada saat diklik akan membawa kita menuju ke halaman web tertentu. Untuk dapat membuat link, Anda menggunakan sintaks dasar seperti berikut.
   
  Pemicu Link/ Tombol
   
  Dari sintaks diatas, Anda menggunakan href sebagai tag untuk menentukan file yang akan dibuka, dan pemicu / tombol yang digunakan untuk objek yang dijadikan sebagai pemicu link. Beberapa atribut target untuk menentukkan metode pemanggilan halaman link, adapun bentuk target yang digunakan adalah :
          Atribut
         Keterangan
     
        _self
         Dengan menggunakan   jenis target ini akan membuka halaman link pada halaman sendiri. Jadi halaman pertama akan berganti dengan   halaman yang dituju oleh link tersebut
     
        _blank
         Atribut ini akan menyebabkan membuka halaman yang dimaksud di dalam   link halaman baru. Jadi nantinya Anda akan memliki dua buah halaman browser   yaitu halaman yang pertama (halaman yang memiliki tombol hyperlink) dan   halaman yang dituju oleh link tersebut.
     
        _parent
         Digunakan seperti _self
     
        _top
         Link akan mengacu pada halaman atas pada halaman web yang dituju
     
 
   
  Kita juga dapat membuat link yang pengalamatannya menuju ke halaman web lain, maka kita menggunakan sintaks seperti berikut.
   
  Pemicu / Tombol 
  Cobalah membuat halaman berisi pemicu yang menghubungkan halaman web yahoo.com dengan alamat url www.yahoo.com.
   
  Contoh49.html
   
               
                          Belajar link 
                 
  
  Menuju Web YAHOO  
  
  
   
  7.2.2 Membuat Link dengan Pemicu Tombol Gambar
  Tombol merupakan sebuah objek yang dapat dijadikan sebagai Pemicu Link. Pada umumnya tombol dibuat dengan menggunakan gambar maupun dengan format animasi gambar. Berikut contoh script program dengan menggunakan gambar sebagai media hyperlink.
   
  Contoh50.html
  
    
    Tombol Hyperlink
   
   
  
              
              
               
              
              
              
   
  
  
   
  7.2.3 Membuat Link untuk Email
  Anda juga dapat membuat hyperlink yang berkaitan dengan alamat email. Hyperlink ini nantinya akan membawa Anda menuju ke sebuah halaman penyedia layanan email berbasis POP3 yang ada pada komputer lokal kita, program tersebut adalah MS Outlook Express.
  Untuk membuat email link Anda menggunakan sintaks seperti berikut.
   
  mailto:email@alamat.com”>Hubungi Kami
   
  Berikut adalah contoh pembuatan hyperlink Email menuju ke alamat email SETI yaitu seti@itmandiri.com.
   
  Contoh51.html
   
               
                          Belajar link 
                 
  
  Hubungi Kami  
  
  
   
  7.2.4 Membuat Link Satu Halaman dengan Bookmark
  Bookmark adalah salah satu metode lompatan halaman dari halaman yang satu menuju halaman yang lain, atau dari halaman A menuju halaman A itu sendiri dengan memfokuskan pada bagian halaman tertentu. Dengan menggunakan bookmark, Anda dapat membuat sebuah daftar List Halaman yang ada di dalam halaman. Untuk dapat membuat hyperlink model ini, Anda memerlukan dua buah pemicu diantaranya adalah sebagai berikut.
  1)    Anda harus menentukan alamat link bookmark yang ditandai dengan simbol (#) seperti berikut.
  .. Pemicu/Tombol ..
  2)    Selanjutnya Anda harus membuat alamat dimana link tersebut akan difokuskan. Anda juga dapat meletakkan pada halaman paling bawah ataupun disesuaikan dengan kegunaannya.
   … 
   
  Cobalah untuk membuat sebuah halaman web dengan sebuah tombol pemicu yang membawa Anda pada halaman bagian bawah halaman tersebut. 
   
  Contoh52.html
   
               
                          Belajar link 
                 
  
  Menuju Halaman Bawah 
  







  







  Halaman Bawah 
  
  
   
  7.6.5 Membuat Hyperlink Menuju Bookmark Lain Halaman
  Untuk keperluan-keperluan tertentu biasanya Anda akan membutuhkan suatu teknik untuk dapat menghubungkan sebuah judul dari halaman web yang berasal dari web lain di internet. Masalah seperti ini dapat diciptakan dengan menggunakan eksternal bookmark. Untuk membuat eksternal bookmark Anda perlu meletakkan alamat lengkap halaman yang dituju termasuk URL yang digunakan. Sebagai latihan, buatlah contoh program yang akan membuka halaman contoh52.html
   
  Contoh53.html
   
               
                          Belajar link 
                 
  
  Menuju Halaman membuat bookmark bawah 
  
  
   
   
   
   
   
   
   
  Selamat Belajar Pemrograman Web HTML
  Fernando Sitindaon,S.T

PEMROGRAMAN HTML

2008-11-15T13:32:00.000+07:00

Pemrograman HTML

1. Mengenal Script HTML Dasar

2. Sintaks Dasar HTML

Selain TITLE, tag juga memiliki elemen yang berguna untuk memberikan informasi yang berhubungan dengan halaman Web HTMl tersebut yaitu tag META. Sintaksnya adalah :

Atribut	Value	Keterangan
Name	Text	Digunakan untuk mendeklarasikan kedudukan pengisi, misal “programmer”
Content	Text	Menjelakan dari judul yang dideklarasikan pada atribut name
http-equiv	Text	Untuk mendeklarasikan atribut server HTTP

Contoh penggunaan Meta didalam aplikasi web yang berkaitan dengan programmernya :

atau

Yang perlu diperhatikan adalah semua tag harus menggunakan kode pembuka <> dan kode penutup. Sebagai contoh HTML yang dimulai dengan kode harus diakhiri dengan kode .

Beberapa bentuk kode yang wajib ada dalam menuliskan dokumen HTML antara lain :

: Didalam tag HTML hal yang harus ada adalah kode yang menyatakan jenis dokumen yang dibuat, dan harus ditutup dengan kode
: Kode jika diartikan berarti kepala dalam program, dan diakhiri dengan kode . Diletakkan setelah kode
: Kode ini selalu diletakkan didalam kode . Kode ini digunakan untuk mendeklarasikan judul yang akan ditampilkan dalam browser Web yang dibuat.
: Merupakan kode yang berguna untuk meletakkan semua isi web yang dibuat. Kode ini diawali dengan tanda dan diakhiri dengan

Contoh1.html

Judul Halaman Web Saya

Bagian utama dari Isi suatu dokumen

3. Format Halaman dan Paragraf

Warna dan Background Pada Halaman

Beberapa atribut yang digunakan didalam tag BODY adalah :

Atribut	Value	Keterangan
Bgcolor	#000000-ffffff	Untuk menentukan warna background
Background	File gambar	Membuat background gambar
Text	#000000-ffffff	Warna pada text diseluruh halaman
Link		Warna link yang belum dikunjungi
Vlink		Warna link yang telah dikunjungi
Alink		Warna link yang aktif
Left margin	0 – n	Mengatur jarak margin kiri halaman
Topmargin	0 – n	Mengatur jarak margin atas halaman
Marginwidth	0 – n	Mengatur jarak lebar margin halaman
Marginheight	0 – n	Mengatur jarak tinggi margin halaman

Secara default halaman web akan menciptakan halaman hasil berwarna putih. Untuk mengubahnya anda dapat menggunakan atribut bgcolor=”value”, yang disisipkan pada tag seperti berikut.

… isi web …

Berikut adalah contoh halaman dengan deklarasi warna hijau sebagai warna backgroundnya.

Contoh2.html

Contoh background hijau

Pewarnaan halaman degan warna hijau

… isi web …

Berikut contoh program dengan gambar sebagai background dari halaman web.

Contoh3.html

Contoh background bergambar

background="gambar/logo.gif">

Backgroun bergambar Logo UKM

Menentukan Warna Text

Cobalah membuat halaman dengan warna text yang anda sukai dengan program berikut ini.

Contoh4.html

Contoh text warna

text="green">

Halaman web dengan text berwarna Hijao

warna pada Link

vlink=”warna” alink=”warna”>

Penempatan Area Kerja

leftmargin=”value” : Menentukkan batas paling kiri
rightmargin=”value” : Menentukkan batas paling kanan
marginwidth=”value” : Menentukkan batas lebarnya
marginheight=”value” : Menentukan batas ketinggian

Sintaks penulisannya :

topmargin=”value” marginwidth=”value” marginweight=”value”>

Contoh programnya dapat Anda lihat pada baris berikut :

Contoh5.html

Penentuan area kerja

Area kerja halaman Web

Menformat Text

Membuat Huruf tebal, Miring, Underline

Contoh6.html

Format halaman text

Ini Huruf Tebal

Ini Huruf Miring

Ini Huruf Bergaris Bawah

~~Ini Huruf Di Coret~~

Membuat Text Model Kimia dan Perpangkatan

Contoh7.html

Format Text Kimia & matematika

Manusia hidup membutuhkan Air / H₂O

4 (empat) adalah hasi dari perpangkatan 2²

Menentukan Ukuran Huruf dan Warna

Atribut	Value	Keterangan
Size	1 – 7	Menentukan besar huruf atau karakter
Color	#000000-ffffff	Menentukan warna teks dan karakter
Face	Font	Menentukan jenis font

Rumus tag HTML nya adalah :

color=”warna” face=”jenis font”>

Contoh8.html

Format Bentuk Text dan warna

Bentuk Text arial berwarna merah

Memberikan Jarak pada Baris Text

 … text …

Atau

 … text …

Untuk lebih jelasnya Anda dapat mengetikkan listing program berikut :

Contoh9.html

Format Spasi Text

IT Mandiri

Sentra Edukasi Telematikan Indonesia

IT Reka

Ganti Baris dan Paragraf

Dengan menggunakan HTML kita mengenal tag
untuk ganti baris dan tag

untuk ganti paragraph. Pada tag
akan memberikan efek ganti baris sebanyak satu baris sedangkan

akan memberikan efek pindah dua baris selanjutnya.

Untuk lebih jelasnya Anda dapat mengetikkan listing program berikut :

Contoh10.html

Format ganti baris

Pengakuan

Saya adalah seorang mahasiswa Teknik Informatika (TI) angkatan XX di SETI Jakarta

Sebebarnya saya merupakan pindahan dari jurusan Teknik Komputer (TK) angkatan XX SETI Jakarta

Membuat Identasi Halaman

Identasi halaman adalah teknik pemfromatan halaman dengan text menjorok kedalam. Untuk dapat membuat Identasi halaman HTML memiliki tag

. Sintaks penulisannya adalah sebagai berikut :

… text …

Coba ketik dan jalankan script berikut.

Contoh11.html

Format identasi

BLOCKQUOTE

Tag ini digunakan untuk meciptakan Text Indentasi ,

Yang di maksut Text Identasi adalah Text yang

perataanya menjorok kedalam .

Menggunakan Tag


  Tag Pre digunakan untuk membuat teks keluaran text yang sama persis dengan format yang diketikkan dalam tag HTML, sehingga bentuk text apapun yang diletakkan pada halaman web HTML akan dibaca pada browser sama dengan aslinya. Sintaksnya adalah :
   
  
   
  Coba ketik contoh berikut dengan menggunakan tag 
   
  Contoh12.html
  
              
                           Format<span style="">  </span>pre 
              
  
  
PRE
   
  
    Tag ini digunakan untuk meciptakan Text dengan format
    Yang seuai dengan yang di ketikan dalam Tag HTML
    .
   
  
  
   
  Jalankan program diatas, akan menghasilkan keluaran berupa text yang sama persis dengan text yang diketikkan didalam tag HTML. Text tersebut tidak akan berubah bentuk apabila halaman diperkecil atau diperbesar.
   
                   Format Text Alamat
  Didalam halaman web suatu ketika akan memerlukan pengaturan alamat dalam membuat suatu halaman yang menyertakan alamat. Dalam HTML 4 untuk dapat membuat alamat dapat digunakan tag 
. Berikut sintaks penulisannya.
   
  
 … text … 
   
  Berikut merupakan contoh listing programnya.
   
  Contoh13.html
  
              
                           Membuat Alamat<span style="">  </span>
              
  
  
  
IT mandiri,
  SETI Jakarta,
  Jl Warung Jati Barat Raya No 43,
  Buncit Jakarta Selatan,
  12760,
  Indonesia. 
  
  
  
  
   
                   Membuat Heading / Judul
  Heading adalah metode untuk membuat judul dalam paragraph. Dalam penggunaanya heading dapat dibagi menjadi 6 yaitu Heading 1, Heading 2, sampai dengan Heading 6. Sintaks penulisannya adalah :
   
   … text … 
   
  Cobalah membuat halaman heading seperti script dibawah ini.
   
  Contoh14.html
  
              
                           Membuat Heading<span style="">  </span>
              
  
  
 Heading 1
  
 Heading 2
  
 Heading 3
  
 Heading 4
  
 Heading 5
  
 Heading 6
  
  
   
                   Membuat Animasi Marquee
  Marquee adalah sebuah bentuk animasi text yang diciptakan oleh HTML. Kita dapat mengciptakan gerakan-gerakan text maupun paragraph dalam web. Sintaks yang digunakan adalah :
   
   … text … 
   
  Atribut dalam animasi marque.
          Atribut
         Value
         Keterangan
     
        Behavior
         Alternate
         Text   bergerak ke kanan/kiri
     
        Scroll
         Text bergerak terus menerus
     
        Slide
         Text bergerak sekali
     
        Direction
         Left
         Kiri
     
        Right
         Kanan
     
        Top
         Atas
     
        Down
         Bawah
     
        Loop
         N
         Perulangan bernilai n
     
        Bgcolor
         Color
         Untuk warna background
     
 
   
  Contoh berikut adalah bentuk 3 buah animasi marquee dengan menggunakan arah/behavior yang berbeda.
   
  Contoh15.html
  
  
  Membuat Animasi Marquee
  
  
  ANIMASI MARQUEE(ALTERNATE)

    direction="left">ANIMASI MARQUEE(SCROLL)

  ANIMASI MARQUEE(SLIDE)

  
  
   
                   Menciptakan Garis Horizontal
  Sebagai pembatas antara judul dengan isi, kita dapat menggunakan garis. Dalam HTML desidakan Tag yang berfungsi membuat garis Horizontal yaitu tag 
, kependekan dari Horizontal Row. Sintaks penulisannya :
   
  
   
  Atribut yang digunakan tag HR :
          Atribut
         Value
         Keterangan
     
        Size
         N
         Ukuran garis
     
        Color
         Color
         Warna garis
     
        Align
         Left,right
         Letak posisi garis
     
        Width 
         Length
         Lebar garis
     
 
   
  Berikut adalah contoh penggunaan garis berwarna merah diletakkan di sebelah kanan halaman.
   
  Contoh16.html
  
  
  Membuat Animasi Garis
  
  
  
Kuis Siapa Dia
  
  
 Adalah kuis yang saya sukai
  
  
   
  4.    Membuat Daftar
  Daftar atau list adalah merupakan kumpulan text yang disusun sedemikian rupa sehingga item-item yang ada memiliki nomor urut atau bias berupa tanda/symbol khusus.
  Berikut adalah beberapa daftar Tag yang digunakan dalam pembuatan List/Daftar :
          Tag
         Atribut
         Value
         Keterangan
     
        
         Type
         Square
   Disc
         Bulat kotak
   Bulat   titik
     
        
         Type
         I
   i
   A
   A
         Huruf besar romawi
   Huruf   kecil romawi
   Huruf   besar
   Huruf   kecil
     
        
         Start
         n
         Nilai awal penomoran
     
 
   
          Unordered List 
  Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag 
. Dan pada jenis ini tidak memerlukan pengurutan data. Perhatikan sintaks program berikut :
   
  
    
 daftar n 
    
 daftar n+1 
  
   
  Sebagai contoh, coba ketik daftar jurusan yang ada di SETI Jakarta berikut ini.
   
  Contoh17.html
  
  
  Membuat List
  
  
  Berikut ini adalah daftar jurusan yang ada di SETI Jakarta ?
  
  
Teknik Informatika (TI/S1)
  
Sistem Informasi (SI/S1)
   
Teknik Komputer (TK/D3)
  
Manajemen Informatika (MI/D3)
  
Komputerisasi Akutansi(KA/D3)
  
  
  
   
  Selain menggunakan sintaks diatas Anda juga dapat menggunakan beberapa sintaks yang menghasilkan output yang sama. Sintaks itu adalah :
   
  
    
 Daftar n 
    
 Daftar n+1 
  
  atau dapat menggunakan :
  
    
 Daftar n 
    
 Daftar n+1 
  
   
          Menghilangkan Tanda pada Daftar
  Apabila Anda ingin menghilangkan semua kode daftar/list yang ada, maka tag yang digunakan adalah 
 sebagai pengganti tag , dan  sebagai pengganti tag . Cobalah membuat contoh program seperti berikut :
   
  Contoh18.html
  
  
  Membuat Nnone List
  
  
  Berikut ini adalah daftar jurusan yang ada di SETI Jakarta ?
  
  
Teknik Informatika (TI/S1)
  
Sistem Informasi (SI/S1)
  
Teknik Komputer (TK/D3)
  
Manajemen Informatika (MI/D3)
  
Komputerisasi Akutansi(KA/D3)
  
  
  
   
  Teknik pembuatan daftar dengan DL dan DD dapat digantikan dengan menggunakan tag MENU seperti berikut.
   
  
    daftar 1 
    daftar 2 
    daftar ke-n 
  
   
  Contoh programnya adalah sebagai berikut.
   
  Contoh19.html
   
                           
  Membuat List 
   
  
  Berikut ini adalah daftar jurusan yang ada di SETI Jakarta ?
  
              Teknik Informatika (TI/S1)
              Sistem Informasi (SI/S1)
              Teknik Komputer (TK/D3)
              Manajemen Informatika (MI/D3)
              Komputerisasi Akutansi(KA/D3)
  
  
  
   
          Daftar Menggunakan Nomor
  Kita dapat membuat daftar dengan menggunakan metode penomoran (1, 2, …n, atau a, b, … n) atau dengan menggunakan huruf Romawi. Fungsi sintaks yang digunakan adalah :
   
  
    
 Daftar 1 
    
 Daftar 2 
    
 Daftar ke-n 
  
         
   
  Berikut contoh script dengan metode penomoran.
   
  Contoh20.html
  
  
  Membuat List
  
  
  Daftar Kelompok Study yang ada di SETI Jakarta :
  
  
Kelompok Study Linux (KSL)
  
Unix Network Club (UNC)
   
Linux Study Club (LSC)
  
  
  
   
  Pada contoh diatas, jika dijalankan akan menghasilkan sebuah daftar dengan menggunakan urutan abjad capital sebagai daftar listnya. Atau apabila Anda menginginkan angka urutan tidak dimulai dengan alphabet A, tetapi dari D, maka Anda harus menambahkan Atribut Start bernilai 4 pada tag 
, karena dalam urutannya D termasuk abjad ke 4, sehingga scriptnya berubah menjadi :
   
  
  
  Membuat List
  
  
  Daftar Kelompok Study yang ada di  SETI Jakarta :
  
  
Kelompok Study Linux (KSL)
  
Unix Network Club (UNC)
   
Linux Study Club (LSC)
  
  
  
   
          Mebuat Sub Daftar
  Dengan menggunakan Tag 
 dan , HTML juga mengijinkan Anda untuk membuat sebuah seub daftar. Maksud dari sub daftar adalah daftar di dalam daftar. Untuk lebih jelasnya lihat sintaks yang digunakan dan contoh scriptnya.
   
  Contoh21.html
  
  
   Sub Daftar<span style="">  </span>
  
  
  Jenis Prosesor yang Sering du gunakan :
   
  
INTEL
  
  
Pentium
  
Celeron
  
  
AMD
  
  
Atlon XP
  
Duron
  
Baltron
  
   
  
  
   
          Membuat List Header
  List Header atau  merupakan suatu cara dimana kita dapat menampilkan bentuk Header didalam List, adapun cara penulisannya adalah :
   
  
    Header
    
 Daftar 1 
    
 Daftar 2 
  
  Berikut adalah Contoh Scriptnya penggunaanya :
   
  Contoh22.html
  
  
  Membuat List
  
  
  Daftar Kelompok Study SETI Jakarta: 
  
              Linux Riseach 
              
Kelompok Study Linux (KSL)
              
Unix Network Club (UNC)
              
Linux Study Club (LSC)
  
  
  
   
  Pada script diatas Kita menggunakan Header yang bernama “Linux Research”, yaitu :
  Linux Research
   
          Daftar dengan Gambar
  Untuk membuat sebuah daftar dengan bentuk symbol yang dibat sendiri atau berupa gambar. Kita dapat menggunakan metode yang dilakukan saat membuat daftar tanpa symbol, yaitu menggunakan TD dan DD. Dan setelah meletakkan komponen daftar kita dapat melakukan pemanggilan gambar yang berupa symbol. Sebagai contoh lihatlah script berikut :
   
  Contoh23.html
  
  
  Membuat List
  
  
  Daftar makanan jenis gorengan: 
  
              
    
 Bakwan 
    
 Tahu Susor /Tahu Isi
    
 Pisang Goreng
    
 Tempe Goreng
    
 Combro
  
  
  
   
  5.    Menggunakan Tabel dan Pengaturannya
          Pembuatan Tabel
  Untuk dapat membuat tabel Anda dapat menggunakan Tag HTML yang dimulai dengan tag 
, yang kemudian diikuti dengan  dan  … 
Beberapa atribut yang digunakan pada pembuatan garis dengan menggunakan 
 
Atribut yang digunakan dalam 
  ·         
 : adalah tag yang menerapkan kepada browser bahwa itu adalah sebuah tabel. Tag TABLE dapat diikuti dengan beberapa atribut seperti lebar maupun warna background. 
·         
 : adalah TABLE ROW merupakan Tag yang digunakan untuk membuat baris dalam tabel.
·         
, jadi jumlah  setelah  yang pertama, yang berarti Anda menambahkan satu baris didalam tabel Anda. Setelah itu Anda juga harus mendefiniskan jumlah kolom yang disesuaikan pada baris diatasnya. Sebagai contoh buatlah dokumen HTML dibawah ini.
 
Contoh26.html       
 
               
                          Belajar Tabel 
              
 
  
      : Tabel Data adalah tag yang berguna untuk meletakkan data yang kita isikan dalam tabel. TD dapat juga diartikan sebagai kolom, jadi kita dapat membuat beberapa kolom didalam sebuah baris tabel.
   
  Sintaks dalam mebuat tabel :
  
….


   …. Isi …     
 
Didalam tag 
    
 Anda dapat meletakkan beberapa atribut yang berguna dalam pengaturan tabel, atribut itu antara lain adalah :
·         BORDER : Atribut ini digunakan untuk menentukan tebal garis pada tabel dengan ukuran angka dimulai dari 1-n
 
Cobalah ketikkan script tabel pertama Anda :
 
Contoh24.html
 
   
     Belajar Tabel 
   
 
  
                      
   
     
 
   
  
      Ini Table pertama      
   
 
   
   
   
  Script diatas jika Anda jalankan akan menghasilkan tabel dengan baris berjumlah satu (1) dan kolom = 1. Secara standar bila kita tidak menentukkan letak tabel, maka tabel akan berada disebelah kiri.
   
  5.1.1 Tabel dengan Beberapa Kolom
  Untuk dapat membuat tabel dengan dua kolom, berarti Anda harus menambahkan  diantara 
 akan mempengaruhi jumlah kolom dan tabel. Sekarang cobalah membuat tabel dengan jumlah baris 1, dan kolom = 3.
   
  Contoh25.html
   
     
       Belajar Tabel 
     
   
    
   
     
     
     
   
 
      Colom 1    Colom 2    Colom 3    
   
 
   
   
   
  5.1.2 Tabel dengan Banyak Baris
  Berikut adalah contoh pembuatan tabel dengan menggunakan kolom = 3 dan baris = 2. Untuk dapat membuat tabel tersebut Anda harus menambahkan  
 
                
            
                        
                        
                        
             
                        
                        
                        
             
  
      Colom 1    Colom 2    Colom 3    
      cel    cel    cel    
  
 
   
  
   
  Pengaturan Tabel
  Dengan menggunakan beberapa atribut, Anda dapat melakukan pengaturan bentuk tabel maupun posisi dari tabel dan data. Beberapa atribut yang dapat digunakan dalam pengaturan tabel adalah :
   
  Atribut pada tag 
 … 
  Pada tag 
 memiliki beberapa atribut yaitu align (Perataan/Posisi), border (Lebar garis), Width (lebar tabel), cellpadding, cellspasing serta bgcolor (warna latar belakang). Atribut yang digunakan dalam 
 
    
        Atribut
         Keterangan
     
        Align
         Digunakan   untuk meratakan tabel ke kiri, ke tengah, ke kanan, atau kanan-kiri. Align dapat   bernilai left, center, right, atau justify.
     
        Border
         Border   digunakan untuk mengatur ketebalan garis pembatas antar sel-sel dalam tabel
     
        Width
         Digunakan   untuk menentukan lebar tabel, Anda dapat menentukan lebar tabel dengan nilai   persen (%)
     
        Cellspacing
         Cellspacing   digunakan untuk menyatakan jarak spasi antar sel satu dengan lainnya serta   antar sel dengan batas tabel
     
        Cellpadding
         Atribut   ini menyatakan jarak spasi antara isi sel dengan batas sel (border)
     
        Bgcolor
         Menunjukkan warna background untuk   semua cell pada tabel
     
        Bordercolor
         Digunakan untuk membuat warna pada   garis / border
     
 
   
   
  Atribut pada Tag 
      
  
        Atribut
         Keterangan
     
        Align
         Dapat bernilai left, center, right,   atau justify. Digunakan untuk melakukan perataan tabel ke kiri   (left), ke tengah (center), ke kanan (right)
     
        Valign
         Digunakan untuk melakukan perataan   yang bersifat horizontal (alignment). Valign menggunakan nilai top (atas),   center (tengah), bottom (bawah) atau baseline (standar)
     
        Bgcolor
         Menunjukkan warna background pada   baris
     
 
   
   
  Lebar dan Tinggi Tabel
  Tabel yang dibuat dapat kita buat dengan lebar dan tinggi sesuai dengan kebutuhan. Untuk dapat melakukan pengaturan lebar dan tinggi, kita dapat menggunakan atribut Width dan Height yang disisipkan di dalam tag . Berikut adalah keterangan penggunaan Width dan Height.
   
  
 … isi … 
 
Keterangan atribut dari sintaks di atas :
·         Width : atribut ini digunakan untuk menentukan lebar tabel. Ukuran yang digunakan adalah dengan menggunakan persen (%) yaitu dimulai dengan dari 1% sampai dengan 100%. Selain persen, Anda juga dapat memakai ukuran Pixel atau (px) yang nilainya disesuaikan dengan resolusi monitor yang Anda gunakan.
·         Height : atribut ini digunakan untuk menentukan tinggi cell tabel. Ukuran yang digunakan sama seperti pada Width.
 
Cobalah untuk membuat Script dengan menggunakan lebar tabel = 40% dan tinggi = 100%.
 
Contoh27.html
 
 
Belajar Tabel 
 
 
                            
      lebar=20% dan tinggi="30"    
   
 
   
  
   
  Posisi Tabel
  Dalam pembuatan tabel, secara standar tabel akan terletak di sebelah kiri halaman. Untuk mengatur letak posisi tabel, Anda dapat menggunakan atribut Align yang diletakkan di dalam tag 
. Untuk nilai yang dipakaidalam peletakkan posisi tabel adalah Center (tengah), Left (kiri), dan Right (kanan).
 
    
 … isi … 
   
  Cobalah untuk membuat dokumen HTML untuk membuat sebuah tabel yang posisinya berada ditengah halaman atau center.
   
  Contoh28.html
   
   
  Belajar Tabel 
   
   
  
      Tabel berada di tengah halaman   
  
 
   
  
   
  Border / Tebal Garis
  Border diartika sebagai garis, dengan menggunakan border Anda dapat membuat tabel menjadi lebih menarik. Seperti contoh-contoh sebelumnya Anda telah menggunakan border yang disisipkan di dalam Tag.
   
  
  
 
Cobalah contoh script berikut :
Contoh29.html
 
 
Belajar Tabel 
 
                  
     CENTRANET   
   
 
   
  
   
  Pengaturan Jarak Spasi pada Cell
  Di dalam sebuah kalimat, spasi kosong atau yang dapat disebut dengan white space diartikan sebagai jarak antara karakter dengan karakter. Akan tetapi di dalam tabel Anda juga mengenal dengan jarak karakter. Akan tetapi tabel hanya dapat melakukan pengaturan jarak spasi antara karakter dan garis pinggir tabel dan pengaturan antar jarak garis tabel. 
  Untuk dapat memberikan jarak antara karakter dengan garis/border, tabel dikenal dengan atribut cellspacing dan cellpadding. Jadi, didalam tabel memiliki pengertian yang agak berbeda. Untuk latihan, cobalah membuat halaman baru berdasarkan script berikut :
   
  Contoh30.html
   
   
  Belajar Tabel 
   
   
  
      CENTRANET Bekerja sama sengan ANDI OFFSET    CENTRANET Merupakan Web Developer   
      ANDI OFFSET Merupakan Penerbit buku di Jogjakarta    CENTRANET   
   
 
   
  
   
  Letak Karakter
  Pada saat membuat sebuah tabel dengan ukuran yang besar, maka Anda tidak harus mendapatkan posisi karakter yang berada dibagian pojok kiri cell. Anda dapat melakukan pengaturan sesuai dengan yang dikehendaki. Berikut adalah aturan dalam peletakkan posisi yang atributnya disisipkan pada Tag.
   
   Caracter 
   
  Contoh buatlah halaman baru untuk membuat sebuah tabel dengan jumlah baris = 1, kolom = 1 dan aturlah panjang dan lebarnya sebagai berikut :
  Contoh31.html
          
   
  Belajar Tabel 
   
   
  
WIDTH="80%" HEIGHT="80%"> 
       CENTRANET    
   
 
   
  
   
  Memberi Warna pada Tabel
  Di dalam tabel dapat dibedakan komponen-komponen pewarnaan, yaitu pewarnaan pada border dan warna pada cell. Anda juga dapat memberi warna yang sama pada setiap cell pada tabel atau memberi warna yang berbeda pada setiap cell. Berikut cara dalam pemberian warna.
   
  
    cell pertama   cell kedua   
  
   
  Untuk mencoba efek bgcolor dan bordercolor cobalah untuk membuat script berikut :
   
  Contoh32.html
   
   
  Belajar Tabel 
   
   
  
      CENTRANET Bekerja sama sengan ANDI OFFSET    CENTRANET Merupakan Web Developer   
      ANDI OFFSET Merupakan Penerbit buku di Jogjakarta    CENTRANET   
   
 
   
  
   
  Merger Cell
  Merger artinya menggabungkan, pada tabel merger cell berarti menggabungkan antar cell atau dapat diartikan dengan menggabungkan antara baris dengan baris ataupun baris dengan kolom.
  Dengan menggunakan isitilah merger Anda dapat membuat sebuah tabel yang dinamik sesuai dengan kebutuhan Anda.  Untuk dapat melakukan penggabungan antara baris, ataupun kolom Anda menggunakan atribut rowspan dan colspan. Adapun guna dari atribut tersebut adalah :
  ·         Rowspan : digunakan untuk menggabungkan antara baris. Jika Anda hendak menggabungkan 3 baris maka Rowspan Anda beri nilai 3, dan begitu juga kelipatannya.
  ·         Colspan : digunakan untuk menggabungkan kolom dengan kolom. Atribut ini memiliki nilai seperti rowspan yang bernilai 4 jika hendak menggabungkan 4 kolom.
   
  5.3.1 Menggabungkan Beberapa Kolom
  Anda dapat menggabungkan beberapa kolom pada tabel Anda menjadi satu kolom. Untuk dapat menggabungkan kolom tersebut Anda harus menggunakan Colspan yang kemudian diberikan nilai berapa kolom yang hendak Anda gabungkan, berikut adalah teknik penggabungannya.
   
  
 
Sebagai latihan cobalah buat tabel dengan baris = 2, kolom = 3, kemudian gabungkan ketiga kolom diatas menjadi kolom, lihatlah teknik pembuatannya.
 


 Contoh33.html
 
 
Belajar Tabel 
 
 
     Merger   
    Cell 1   cell 2   
                      
 
      Colom yang di gabungkan    
      Colom 1, Baris 2    Colom 2, Baris 2   
   
 
   
  
   
  Pada script diatas atribut yang digunakan adalah Colspan = 2 yang berarti menggabungkan dua kolom menjadi satu kolom.
   
  5.3.2     Menggabungkan Beberapa Baris dan Kolom
  Untuk menggabungkan baris memerlukan atribut Rowspan yang disisipkan pada tag . Atribut ini sebenarnya memiliki kegunaan yang hampir sama dengan colspan.
   
  Contoh34.html
   
   
  Belajar Tabel 
   
   
  
      Baris yang di gabungkan    Colom 2 , Baris 1    
      Colom 2, Baris 2    
   
 
   
  
   
  5.3.3     Menggabungkan Baris dan Kolom
  Anda dapat menggabungkan beberapa kolom dan baris setalah memahami konsep Colspan dan Rowspan. Cobalah Script dibawah ini untuk menggabungkan dua kolom dan dua baris.
   
  Contoh35.html
   
   
  Belajar Tabel 
   
   
  
      Daftar    Nama Teman    
      Arief  NS    Didik K    
   
 
   
  
   
  Tabel di Dalam Tabel
  Di dalam perancangan web, tabel sangat penting perannya, tabel kemudian akan dijadikan kerangka untuk meletakkan beberapa komponen web. Dalam sebuah halaman web, Anda diijinkan untuk meletakkan beberapa tabel atau banyakorang sering menyebutnya dengan istilah tabel di dalam tabel. Cobalah buat sebuah tabel yang didalamnya kita sisipkan sebuah tabel dengan baris berjumlah dua.
   
  Contoh36.html
   
   
  Belajar Tabel 
   
   
  
      
  
    Ini tabel di dalam tabel   
  
     
   
 
   
  
   
  Dengan beberapa contoh diatas, berarti Anda telah selesai dalam mempelajari pembuatan tabel dan teknik dalam mendesain sebuah halaman website.
   
  6.    Menggunakan Formulir
          Mengenal Formulir
  Form adalah sebuah metode yang digunakan dalam Website yang mengijinkan seseorang untuk dapat berinteraksi dengan Server ataupun dengan pengelola website tersebut. Di dalam dunia website, web yang mengijinkan interaksi dengan pengunjung sering disebut dengan Web Dinamis atau portal. Sedangkan untuk web yang hanya menampilkan informasi kepada pengunjung dan tidak mengijinkan pengunjung untuk melakukan sesuatu apapun di dalam website tersebut disebut website statis.
  Untuk dapat menciptakan halaman web yang dapat berinteraksi dengan pengunjung salah satunya Anda dapat menggunakan Formulir, yang kemudian formulir tersebut akan dikirim dengan menggunakan program aplikasi Web berbasis Server Side menuju database server. Adapun Server Side yang dimaksud adalah PHP, Cold Fusion, ASP, JSP, Perl, dan lain-lain.
  Dalam website, Form biasanya digunakan sebagai media yang digunakan untuk pengunjung dalam mengirimkan permintaan ataupun mengirimkan pesan seperti Buku Tamu, Shout Box, Email, Pencarian (search), Pendaftaran Online dan lain-lain.
  Secara standar, untuk dapat membuat form, Anda hanya menggunakan Start tag 
 dan diakhiri dengan End tag 
. Perhatikan sintaksnya sebagai berikut :
  
  
  
  …….
  
   
  Keterangan tag :
  ·         
  : Digunakan mendeklarasikan awalan tag sebuah form
  ·           : Digunakan untuk memasukkan komponen-komponen formulir
  ·         : Tag penutup / end tag dari sebuah form
  ·         Action   : Digunakan untuk menentukkan alamat dimana data dari komponen form akan dikirimkan. Pengiriman ini pada umumnya dialamatkan pada sebuah halaman yang berisi kode program aplikasi seperti PHP, ASP, dan lain sebagainya.
  Contohnya sebagai berikut :
   
  
  
  ….
  
   
  method       : Digunakan untuk membedakan metode pengiriman data. Atribut yang digunakan dalam pengiriman data antara lain :
          Atribut
         Keterangan
     
        Get
         Pengiriman   data ke dalam halaman lain yang tidak berhubungan dengan halaman selanjutnya
     
        Post
         Melakukan   pengiriman datapada halaman lain yang selanjutnya dapat diproses menuju   halaman berikutnya ataupun melakukan pengiriman ke dalam database
     
 
   
  Name          : Digunakan untuk memberi nama variabel pada Formulir yang kita buat
   
  Berikut adalah gambaran umum dalam membuat sebuah halaman form pada web kita.
  
  
  …
  
  
   
          Komponen Masukan pada Form
  Dalam HTML kita mengenal beberapa bentuk masukan Form yaitu Input, Textarea, Select. Sedangkan dalam Komponen Input Anda dapat membedakan beberapa bentuk masukan seperti Password, Button, Select, dan lain-lain.
  Dalam penulisannya, HTML menyesuaikan beberapa atribut yang ada di dalam tag Input. Hal ini berguna untuk mendeklarasikan jenis masukan yang dijadikan sebagai aturan dasar sebuah Form.
  Berikut adalah beberapa aturan yang digunakan dalam pembuatan Form dari komponen-komponennya.
  ·         Untuk setiap komponen diharuskan memiliki Nama atau sering juga disebut sebagai Variabel. Semua data yang disimpan dalam variabel akan dibaca oleh bahasa pemrograman pada saat melakukan posting Form (tombol submit diklik). Penamaan variabel/nama ini harus berbeda dengan komponen form yang lain.
   
  
   
  ·         Setiap komponen memiliki nilai/isi, dalam hal ini digunakan Value sebagai atributnya. Value digunakan untuk melakukan pembacaan data yang dimasukkan oleh pengunjung yang selanjutnya akan dibaca sebagai Variabel pada atirbut Name. 
   
  
   
  ·         Untuk Input, Anda mengenal beberapa jenis bentuk masukan seperti Tombol, Text, maupun masukan yang berbentuk Password. Dalam penggunaannya Anda dapat menggunakan Atribut Type untuk dapat membedakan bentuk masukannya. 
   
  
   
  ·         Selain komponen Input HTML juga memiliki beberapa tipe Komponen yang berdiri sendiri, akan tetapi memiliki fungsi yang sama dengan komponen  Input. Komponen itu adalah Textarea, Select, dengan tag seperti berikut.
   
  <o:p></o:p></span></p>  <p class="MsoNormal" style="margin-left: 0.25in; text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><select name="”variabel”"><o:p></o:p></span></p>  <p class="MsoNormal" style="margin-left: 0.25in; text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><b style=""><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";">6.2.1 Masukan Berupa Text (Text Field)<o:p></o:p></span></b></p>  <p class="MsoBodyText"><span style="" lang="SV">Text adalah masukan yang berbentuk karakter. Untuk dapat memasukkan data dalam bentuk karakter, HTML memiliki komponen masukan yang bertipe Text. Text dikhususkan untuk menerima masukan yang sifatnya sedikit, dalam hal ini Anda hanya diijinkan untuk memasukkan data hanya satu kalimat saja, seperti Pernyataan Nama, Alamat, maupun Email. Bentuk penulisannya adalah seperti berikut.<o:p></o:p></span></p>  <p class="MsoBodyText"><span style="" lang="SV"><o:p> </o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"><input type="”text”" name="”variabel”"><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="" lang="SV"><o:p> </o:p></span></p>  <p class="MsoBodyText">Dengan menggunakan metode tersebut, Anda telah memiliki suatu bentuk masukan yang berbentuk Text, yang kemudian dibaca dengan nama Variabel Alamat. Selanjutnya data yang dimasukkan akan dibaca dengan nama alamat. Dalam masukan bertipe Text, Anda dapat memberi batasan dalam masukan data dengan menggunakan ukuran maksimal text yang dimasukkan.</p>  <p class="MsoBodyText"><o:p> </o:p></p>  <p class="MsoBodyText"><span style="color: blue;"><input type="”text”" name="”alamat”" size="”panjang_text”" maxlength="”panjang_max_text”"><o:p></o:p></span></p>  <p class="MsoBodyText"><o:p> </o:p></p>  <p class="MsoBodyText">Summary :</p>  <p class="MsoBodyText" style="margin-left: 0.25in; text-indent: -0.25in;"><!--[if !supportLists]--><span style="font-family: Symbol;" lang="SV"><span style="">·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;">         </span></span></span><!--[endif]--><span dir="ltr"></span><span style="" lang="SV">Size<span style="">             </span>: Digunakan untuk menentukan panjang komponen text didalam browser<o:p></o:p></span></p>  <p class="MsoBodyText" style="margin-left: 0.25in; text-indent: -0.25in;"><!--[if !supportLists]--><span style="font-family: Symbol;" lang="SV"><span style="">·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;">         </span></span></span><!--[endif]--><span dir="ltr"></span><span style="" lang="SV">Maxlength<span style="">   </span>: Digunakan untuk melakukan pembatasan data yang dimasukkan kedalam media masukan. Untuk nilainya Anda dapat menggunakan angka yang terhitung sebagai karakter.<o:p></o:p></span></p>  <p class="MsoBodyText"><span style="" lang="SV"><o:p> </o:p></span></p>  <p class="MsoBodyText"><b><i><span style="color: blue;">Contoh37.html<o:p></o:p></span></i></b></p>  <p class="MsoBodyText"><span style="color: blue;"><html> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style=""> </span><span style="">           </span><head> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span><span style="">                    </span><title>Belajar Form</title> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">            </span><span style="">  </span></head> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><body> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">  </span><form action="" neme=""><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">  </span><table width="280" border="0"><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span><tr> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span><td width="86">Nama</td><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span><td width="184"><input name="nama" type="text" id="nama" size="25" maxlength="20"> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span></span><span style="color: blue;" lang="SV"></td><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"><span style="">    </span></tr><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"><span style="">    </span><tr> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"><span style="">      </span><td>Alamat</td><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"><span style="">      </span></span><span style="color: blue;"><td><input name="alamat" type="text" id="alamat" size="30" maxlength="50"><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">            </span><span style="">  </span></td><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span></tr><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span><tr> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span><td>E_mail</td><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span><td><input name="email" type="text" id="email" size="25" maxlength="20"><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">            </span><span style="">  </span></td><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span></tr><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">  </span></table> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"></form><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"></body><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"></html><o:p></o:p></span></p>  <p class="MsoBodyText"><b><span style="color: blue;"><o:p> </o:p></span></b></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><b style=""><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";">6.2.2 Masukan Berupa Password<o:p></o:p></span></b></p>  <p class="MsoBodyText"><span style="" lang="SV">Password adalah bentuk kata yang dirahasiakan. Anda tidak akan dapat dan boleh mengetahuinya jika tidak memiliki hak dalam penggunaannya. Dalam internet, Anda biasa menjumpai penggunaan password untuk layanan situsnya. Penggunaan password sering siebut dengan istilah account user. Untuk dapat menggunakan komponen password, Anda dapat menuliskan tag-nya seperti berikut :<o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";" lang="SV"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><input type="”password”" name="”variabel”"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";" lang="SV">Untuk latihan, buat Form berisi dua buah masukan berupa text dan password. Form ini digunakan untuk validasi user Email pengguna.<o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";" lang="SV"><o:p> </o:p></span></p>  <h1><span style="" lang="SV">Contoh38.html<o:p></o:p></span></h1>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><html> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><span style=""> </span><span style="">           </span></span><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><head> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><span style="">                    </span><title>Belajar Form</title> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">            </span><span style="">  </span></head> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><body> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span><form action="" neme=""><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span><table width="280" border="0"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><tr> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">      </span><td width="86">Login</td><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">      </span><td width="184"><input name="login" type="text" id="login" size="30" maxlength="30"> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">      </span></td><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span></tr><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><tr> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">      </span><td>Password</td><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">      </span><td><input name="kunci" type="password" id="kunci" size="30" maxlength="30"> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">      </span></td><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span></tr><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span></table> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"></form><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"></body><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"></html><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";">Dalam penggunaan password, setiap karakter yang dimasukkan didalamnya akan dienskripsi sehingga pada halaman Address Web hanya akan terlihat kode-kode seperti bintang. Hal tersebut berguna untuk pengamanan password.<o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><b style=""><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";">6.2.3 Masukan Berupa Pilihan Tunggal (Radio Button)<o:p></o:p></span></b></p>  <p class="MsoBodyText">Pada saat melakukan browsing, mungkin Anda sering menjumpai pertanyaan-pertanyaan yang meminta Anda untuk memilih salah satu jawaban yang disediakan. Sebagai contoh dalam aplikasi polling atau jajak pendapat. Anda dapat menggunakan komponen radio button untuk membuat aplikasi tersebut.</p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><input type="”radio”" name="”variabel”" value="”value”"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";">Apabila Anda membuat beberapa pilihan yang mengijinkan pengguna hanya dapat memilih satu pemilihan saja, maka Anda harus memberi variabel sama pada semua pilihan yang telah dibuat seperti contoh berikut.<o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;">Contoh39.html<o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><html> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style=""> </span><span style="">           </span><head> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><span style="">                    </span><title>Belajar Form</title> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">            </span><span style="">  </span></head> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><body> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span><form action="" neme=""><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span></span><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><p>Sistem Operasi manakah yang anda gunakan di rumah ?</p><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><span style="">  </span><p> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><span style="">    </span></span><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><input type="radio" name="so" value="Wondows 9X"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>Windows 9X<br /><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><input type="radio" name="so" value="Windows NT Server"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>Windows NT Server<br /><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><input type="radio" name="so" value="Mac OS"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>Mac OS<br /><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><input type="radio" name="so" value="UNIX / LINUX"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>UNIX / LINUX<br /><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span></p><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"></form><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"></body><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"></html><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";" lang="SV"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><b style=""><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";" lang="SV">6.2.4 Masukan Berupa Pilihan Ganda (Checkbox)<o:p></o:p></span></b></p>  <p class="MsoBodyText">Pilihan ganda berarti dalam pilihannya mengijinkan Anda untuk menentukan pilihan lebih dari satu. Hal ini berarti Anda dapat memilih satu atau bahkan memilih semua dari beberapa pilihan. Untuk dapat melakukannya, Anda dapat menggunakan komponen input bertype Checkbox. Sintaks penulisannya :</p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><input type="”checkbox”" name="”variabel”"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";">Untuk latihan cobalah membuat sebuah pilihan yang menyatakan beberapa mata kuliah yang telah Anda ambil dalam semester ini.<o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <h1><span style="">Contoh40.html<o:p></o:p></span></h1>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><html> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style=""> </span><span style="">           </span><head> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><span style="">                    </span><title>Belajar Form</title> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">            </span><span style="">  </span></head> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><body> <o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span><form action="" neme=""><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">  </span></span><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><p>Mata kuliah mana yang telah anda ambil ?<br /><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><span style="">    </span></span><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><input name="cek1" type="checkbox" id="cek1" value="Kalkulus I"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>Kalkulis I<br /><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><input name="cek2" type="checkbox" id="cek2" value="Kalkulus II"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>Kalkulis II<br /><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><input name="cek3" type="checkbox" id="cek3" value="Matematika Diskrit"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>Matematika Diskrit<br /><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><input name="cek4" type="checkbox" id="cek4" value="Fisika Dasar"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span>Fisika Dasar<br /><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span><input name="cek5" type="checkbox" id="cek5" value="Metode Penelitian"><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"><span style="">    </span></span><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV">Metode Penelitian<br /><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><span style="">  </span></p><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;" lang="SV"><span style="">  </span></form><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"></body><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif"; color: blue;"></html><o:p></o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";"><o:p> </o:p></span></p>  <p class="MsoNormal" style="text-align: justify; line-height: 150%;"><b style=""><span style="font-size: 10pt; line-height: 150%; font-family: "Trebuchet MS","sans-serif";">6.2.5 Masukan Berupa Pulldown (List Menu)<o:p></o:p></span></b></p>  <p class="MsoBodyText">Pulldown list adalah metode masukan data yang datanya telah dimasukkan sebelumnya oleh pembuatnya. <span style="" lang="FI">Dengan menggunakan Pull Down list, Anda hanya diijinkan melakukan pilihan berjumlah satu pilihan saja. Dalam membuat Pulldown, Anda menggunakan tag Select sebagai atribut pengganti Input dan Option sebagai daftar data yang dimasukkan. Sintaks penulisannya adalah sebagai berikut :<o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="FI"><select name="”"><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="FI"><span style=""> </span><option value="”value”"> … karakter isi 1<o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="FI"><span style=""> </span></span><span style="color: blue;" lang="SV">……<o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"><span style=""> </span><option value="”value”"> … karakter isi ke-n<o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"></select><o:p></o:p></span></p>  <p class="MsoBodyText"><o:p> </o:p></p>  <p class="MsoBodyText">Cobalah untuk membuat sebuah menu Pulldown yang menampilkan 4 jenis golongan darah yang ada.</p>  <p class="MsoBodyText"><b style=""><i><span style="color: blue;">Contoh41.html<o:p></o:p></span></i></b></p>  <p class="MsoBodyText"><span style="color: blue;"><html> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style=""> </span><span style="">           </span><head> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span><span style="">                    </span><title>Belajar Form</title> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">            </span><span style="">  </span></head> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><body> <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">  </span><form action="" neme=""><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">  </span></span><span style="color: blue;" lang="PT-BR"><p>Anda memiliki golongan darah jenis apa <o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="PT-BR"><span style="">    </span></span><span style="color: blue;"><select name="goldar" id="goldar"><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span><option value="A">A</option><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span><option value="B">B</option><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">      </span><option value="AB">AB</option><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">   </span><span style="">   </span><option value="O">O</option><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span></select><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">    </span><br /><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">  </span></p><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><span style="">  </span></form><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"></body><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"></html><o:p></o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;" lang="SV"><o:p> </o:p></span></p>  <p class="MsoBodyText"><b><span style="" lang="SV">6.2.6 Masukan Berupa Komentar (Textarea)<o:p></o:p></span></b></p>  <p class="MsoBodyText"><span style="">Didalam sebuah web, Anda membutuhkan metode pemasukan data yang memungkinkan Anda memasukkan data yang banyak. Disini kita mengenal media yang disebut Textarea yang dalam penulisannya memiliki aturan seperti berikut.<o:p></o:p></span></p>  <p class="MsoBodyText"><span style=""><o:p> </o:p></span></p>  <p class="MsoBodyText"><span style="color: blue;"><textarea name="”varabel”" rows="”value”" cols="”value”"> 
   
  Cobalah untuk membuat sebuah form bukutamu. 
  Contoh42.html
   
               
                          Belajar Form 
                 
   
    
   >
    
    
      
      
    
    
      
      
    
    
      
      
    
  
     Nama    
          
     Alamat    
          
     Pesan    
          
  
    
  
  
   
  6.2.7 Masukan Berupa Pengambilan Data Komputer Lokal
  Untuk pengambilan data yang berkenaan dengan data yang ada pada komputer yang sedang kita pakai, atau lokal biasanya digunakan aplikasi Upload File. Hal ini akan Anda jumpai pada saat berada pada aplikasi Site Manager yang mengijinkan Anda untuk melakukan Upload Data.
  Untuk dapat membuat komponen Upload, kita menggunakan Sintaks Input bertipe File yang artinya pada saat kita mengklik komponen tersebut, maka akan dibawa pada halaman penjelajahan pada komputer kita.
   
  
   
  Cobalah untuk membuat sebuah halaman yang terdapat tiga buah media input bertipe File, seperti berikut.
   
  Contoh43.html
   
               
                          Belajar Form 
                 
   
    
  
   >
    
    
      
      
    
    
      
      
    
    
      
      
    
  
     Data 1      size="25">   
     Data 2      size="25">   
     Data 3     size="25">   
  
    
  
  
   
  6.2.8 Membuat Tombol (Button)
  Langkah terakhir yang harus Anda ketahui adalah Tombol atau biasanya Anda menyebutnya dengan nama Button. Tombol yang digunakan untuk melakukan perintah ekesekusi dari semua komponen yang telah Anda buat sebelumnya. Jadi dalam teknik pembuatan formulir tombol merupakan langkah terakhir yang harus dibuat. Dalam pemakaiannya Anda dapat membedakan 3 buah tombol yaitu Submit, Reset, dan None. 
          Tipe   Button
         Fungsi
     
        Submit
         Tombol ini digunakan untuk mengeksekusi seluruh komponen form menuju   halaman yang telah dialamatkan pada atribut Action yang ada didalam badan   Form.
     
        Reset
         Berguna untuk mengosongkan semua data yang telah diisikan ke dalam   komponen sebelumnya.
     
        Button
         Tombol ini dapat Anda gunakan sebagai tombol yang memiliki alamat   sesuai dengan yang diinginkan. Untuk dapat membuat alamat ini Anda memerlukan   bantuan Javascript dalam pengalamatannya.   (onclick=”parent.location=’alamat.htm’”;)
     
 
   
  Dalam penulisannya komponen button memiliki sintaks penulisan seperti berikut :
   
  
   
  Dari penggunaan sintaks diatas Anda dapat mengetahui bahwa atribut yang ada adalah :
          Atribut
         Keterangan
     
        Type
         Untuk menentukan   type tombol, yaitu Submit, Reset, dan Button
     
        Name
         Digunakan untuk   mendeklarasikan tombol sebagai variabel
     
        Value
         Digunakan untuk memberi label pada tombol, sehingga akan tampak pada   halaman browser
     
 
   
  Cobalah untuk membuat sebuah halaman pendaftaran yang menanyakan mengenai nama, alamat, jenis kelamin, dan kemudian gunakan dari ketiga buah tipe tombol diatas.
   
  Contoh44.html
   
               
                          Belajar Form 
                 
   
    
  
  NEME="form_coba"   >
    
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
  
     Nama    
          
     Alamat    
          
     Kelamin      
       
          
            
  
  
  
           
   
  Pada halaman diatas jika Anda mengklik tombol kirim, maka akan menuju ke halaman eksekusi.php. Hal ini dapat terjadi apabila Anda telah mendeklarasikannya terlebih dahulu pada saat menuliskan Form pertama kali. Sedangkan tombol Bersih akan mengakibatkan data yang dimasukkan akan terhapus atau mengosongkan halaman form. Dan tombol Kembali akan membawa Anda pada halaman utama.htm.
   
   
  7.    Menggunakan Gambar dan Hyperlink
   
  7.1 Memasukkan Gambar 
  Gambar adalah komponen web yang sangat penting. Dengan adanya gambar, halaman web yang kita buat akan terlihat familiar dan lebih menarik. Gambar juga adalah salah satu komponen web yang dapat mempengaruhi keindahan desain serta dapat mempercantik halaman Web. Ada beberapa program pengolah gambar yang dapat Anda gunakan seperti Photoshop, Firework dan lain sebagainya.
   
  7.1.1 Format Gambar
  Formta gambar adalah sebuah bentuk metode dalam menyimpan gambar. Maksudnya bentuk dari gambar tersebut merupakan format gambar terakhir yang didapatkan dari pengolahan data gambar dengan program aplikasi pengolah gambar. Dalam pembuatan web, format gambar yang sering digunakan adalah Gif, JPEG, JPG, atau BMP. Berikut adalah penjelasan lengkap dari beberapa format tersebut.
  ·         JEPG : Adalah kependekan dari Joint Photographic Expert Group, merupakan format gambar yang mampu menyimpan data gambar dengan ukuran 24 bit per pixel. Sehingga memiliki kemampuan untuk menampilkan 16 warna
  ·         GIF     : merupakan kependekan dari Graphics Interchange Format, format gambar ini mampu menyimpan gambar dengan kekuatan 8 bit per pixel.
  ·         Selain gambar tersebut juga terdapat format JPG dan BMP
   
  7.1.2 Pemanggilan Gambar
  Untuk dapat menggunakan gambar dalam halaman web, sintaks yang digunakan untuk memanggil gambar ke dalam halaman web dapat dilakukan dengan perintah berikut.
   
  
   
  Pada sintaks diatas terdapat beberapa atribut penting sebagai berikut :
          Atribut
         Keterangan
     
        Src
         Digunakan untuk melakukan pemanggilan gambar.   Dalam sintaks tersebut Anda harus mengetikkan nama file gambar yang digunakan   untuk ditampilkan di halaman web.
     
        Width
         Digunakan untuk melakukan pengaturan lebar gambar.   Nilai yang digunakan dihitung dengan hitungan persen (%), atau dengan   menggunakan hitungan px (pixel)
     
        Height
         Digunakan untuk melakukan pengaturan tinggi   gambar. Atribut ini mirip dengan atribut width yaitu menggunakan nilai persen   (%) untuk perhitungan tingginya
     
        Alt
         Sedangkan alt berguna untuk memberikan pesan pada   saat mouse melewati area gambar
     
 
   
  Sebagai latihan, cobalah membuat  sebuah program yang digunakan untuk menampilkan beberapa gambar didalamnya seperti contoh berikut.
   
  Contoh45.html
   
               
                          Belajar ambil gambar 
                 
  
    >
  
  
   
  File contoh diatas akan melakukan pemanggilan gambar dengan nama linux.jpg dengan panjang 80% dan lebar 20%. Cobalah untuk menggerakkan mouse Anda diatas gambar linux diatas sehingga pada saat mouse melewati area gambar akan tampak pesan yang bertuliskan “ini gambar Linux” yang telah dideklarasikan dengan menggunakan atribut alt.
   
  7.1.3 Pengaturan dan Letak Gambar
  Dengan menggunakan sintaks IMG standar diatas, Anda dapat menyisipkan beberapa atribut yang berguna untuk melakukan pengaturan gambar seperti memberi border pada gambar dan peletakan posisi gambar pada halaman. Berikut merupakan atribut tambahan yang digunakan dalam pengaturan gambar.
   
          Atribut
         Value
         Keterangan
     
        Border
         g-n
         Untuk membuat border   yang mengelilingi gambar
     
        Align
         Right
   Left
   Center
         Melakukan pengaturan   tata letak gambar dengan nilai left, center, dan right
     
 
   
  Dengan menggunakan penambahan atribut seperti yang ada pada tabel di atas, sintaks pemanggilan gambar akan berubah menjadi seperti berikut.
   
  
   
  Cobalah untuk memodifikasi contoh script ambil_gambar.htm dengan menambahkan border sebesar 5 dan letakkan gambar pada posisi rata kanan seperti script berikut.
   
  Contoh46.html
   
               
                          Belajar format gambar 
                 
  
    align="right"> 
  
  
   
  Lihat dan simpulkan apa yang terjadi dengan tampilan gambar pada browser.
   
  7.1.4 Meletakkan Gambar Di Dalam Tabel
  Dengan menggunakan tabel Anda dapat melakukan pengaturan gambar sehingga web akan ditampilkan dengan format yang lebih baik. Biasanya tabel digunakan sebagai kerangka web, yang pada setiap cell (pertemuan kolom dan baris) akan diletakkan beberapa komponen web yang berkaitan dengan objek yang ditampilkan. Beberapa komponen web yang sangat mendukung keindahan sebuah website adalah sebuah gambar. Sebagai contoh, cobalah script berikut dengan mengetikkannya pada editor Anda.
   
  Contoh47.html
  
    
    Ambil gambar
   
   
  
  
    
      
  
  
       
          
  
  
  
   
  7.1.5 Membuat Bingkai dengan Border Tabel
  Dengan menggunakan tabel dan border yang diperbesar, Anda dapat menciptakan gambar yang tampak seperti dikelilingi bingkai. Untuk lebih jelasnya, cobalah contoh script berikut ini.
   
  Contoh48.html        
  
    
    gambar bingkai
   
   
  
  
    
      
    
    
      
    
     Bunga Wawar   
      
                
        
          
            
    
     
             src="../gambar/rose.gif" 
            width="126">   
    
  
  
  
   
  Pada contoh script diatas Anda menggunakan dua buah tabel . Tabel pertama digunakan untuk membuat judul yang bagian-bagiannya terdapat dua buah baris dan satu kolom, kemudian didalam tabel pertama, baris satu dibuat sebuah tabel dengan tebal border = 20, serta latar belakangnya dipasang dengan warna hijau. Pada tabel kedua digunakan untuk meletakkan gambar sehingga gambar seakan-akan ditampilkan seperti dikelilingi bingkai. 
   
   
   
  7.2 Membuat Hyperlink
  Hyperlink atau link adalah sebuah metode menghubungkan antara halaman yang satu dengan halaman lain. Dengan menggunakan link, Anda dapat membuat sebuah halaman web utama yang didalamnya berisi hubungan dengan halaman-halaman web page atau berisi web-web lain yang ada di internet.
   
  7.2.1 Membuat Link ke Halaman Lain
  Secara harafiah, link dapat berarti semua bentuk tulisan ataupun gambar yang pada saat diklik akan membawa kita menuju ke halaman web tertentu. Untuk dapat membuat link, Anda menggunakan sintaks dasar seperti berikut.
   
  Pemicu Link/ Tombol
   
  Dari sintaks diatas, Anda menggunakan href sebagai tag untuk menentukan file yang akan dibuka, dan pemicu / tombol yang digunakan untuk objek yang dijadikan sebagai pemicu link. Beberapa atribut target untuk menentukkan metode pemanggilan halaman link, adapun bentuk target yang digunakan adalah :
          Atribut
         Keterangan
     
        _self
         Dengan menggunakan   jenis target ini akan membuka halaman link pada halaman sendiri. Jadi halaman pertama akan berganti dengan   halaman yang dituju oleh link tersebut
     
        _blank
         Atribut ini akan menyebabkan membuka halaman yang dimaksud di dalam   link halaman baru. Jadi nantinya Anda akan memliki dua buah halaman browser   yaitu halaman yang pertama (halaman yang memiliki tombol hyperlink) dan   halaman yang dituju oleh link tersebut.
     
        _parent
         Digunakan seperti _self
     
        _top
         Link akan mengacu pada halaman atas pada halaman web yang dituju
     
 
   
  Kita juga dapat membuat link yang pengalamatannya menuju ke halaman web lain, maka kita menggunakan sintaks seperti berikut.
   
  Pemicu / Tombol 
  Cobalah membuat halaman berisi pemicu yang menghubungkan halaman web yahoo.com dengan alamat url www.yahoo.com.
   
  Contoh49.html
   
               
                          Belajar link 
                 
  
  Menuju Web YAHOO  
  
  
   
  7.2.2 Membuat Link dengan Pemicu Tombol Gambar
  Tombol merupakan sebuah objek yang dapat dijadikan sebagai Pemicu Link. Pada umumnya tombol dibuat dengan menggunakan gambar maupun dengan format animasi gambar. Berikut contoh script program dengan menggunakan gambar sebagai media hyperlink.
   
  Contoh50.html
  
    
    Tombol Hyperlink
   
   
  
              
              
               
              
              
              
   
  
  
   
  7.2.3 Membuat Link untuk Email
  Anda juga dapat membuat hyperlink yang berkaitan dengan alamat email. Hyperlink ini nantinya akan membawa Anda menuju ke sebuah halaman penyedia layanan email berbasis POP3 yang ada pada komputer lokal kita, program tersebut adalah MS Outlook Express.
  Untuk membuat email link Anda menggunakan sintaks seperti berikut.
   
  mailto:email@alamat.com”>Hubungi Kami
   
  Berikut adalah contoh pembuatan hyperlink Email menuju ke alamat email SETI yaitu seti@itmandiri.com.
   
  Contoh51.html
   
               
                          Belajar link 
                 
  
  Hubungi Kami  
  
  
   
  7.2.4 Membuat Link Satu Halaman dengan Bookmark
  Bookmark adalah salah satu metode lompatan halaman dari halaman yang satu menuju halaman yang lain, atau dari halaman A menuju halaman A itu sendiri dengan memfokuskan pada bagian halaman tertentu. Dengan menggunakan bookmark, Anda dapat membuat sebuah daftar List Halaman yang ada di dalam halaman. Untuk dapat membuat hyperlink model ini, Anda memerlukan dua buah pemicu diantaranya adalah sebagai berikut.
  1)    Anda harus menentukan alamat link bookmark yang ditandai dengan simbol (#) seperti berikut.
  .. Pemicu/Tombol ..
  2)    Selanjutnya Anda harus membuat alamat dimana link tersebut akan difokuskan. Anda juga dapat meletakkan pada halaman paling bawah ataupun disesuaikan dengan kegunaannya.
   … 
   
  Cobalah untuk membuat sebuah halaman web dengan sebuah tombol pemicu yang membawa Anda pada halaman bagian bawah halaman tersebut. 
   
  Contoh52.html
   
               
                          Belajar link 
                 
  
  Menuju Halaman Bawah 
  







  







  Halaman Bawah 
  
  
   
  7.6.5 Membuat Hyperlink Menuju Bookmark Lain Halaman
  Untuk keperluan-keperluan tertentu biasanya Anda akan membutuhkan suatu teknik untuk dapat menghubungkan sebuah judul dari halaman web yang berasal dari web lain di internet. Masalah seperti ini dapat diciptakan dengan menggunakan eksternal bookmark. Untuk membuat eksternal bookmark Anda perlu meletakkan alamat lengkap halaman yang dituju termasuk URL yang digunakan. Sebagai latihan, buatlah contoh program yang akan membuka halaman contoh52.html
   
  Contoh53.html
   
               
                          Belajar link 
                 
  
  Menuju Halaman membuat bookmark bawah 
  
  
   
   
   
   
   
   
   
  Selamat Belajar Pemrograman Web HTML
  Fernando Sitindaon,S.T

Kalender GUI Tanpa Visual Basic

2008-11-13T12:42:00.000+07:00

Article

Kalender GUI Tanpa Visual Basic

Author: Farhan Perdana | Published: 25th April 2007
Category: Pemrograman VB

Catatan: Jika anda membutuhkan versi yang dilengkapi screenshots alias gambar, silahkan download versi PDFnya di bawah.

Untuk program sederhana semisal gambar anda dengan kalender didalamnya sangat mudah dibuat, tanpa membutuhkan pengetahuan ataupun software visual basic. Gunakan saja Cara Bego™. Yang perlu disediakan hanyalah computer dengan OS Windows XP, dan sebuah program kecil bernama Resource Hacker yang muat masuk disket, oh ya, tambahan satu lagi, yaitu gambar yang akan anda jadikan pendamping program kalender tersebut. Untuk mendapatkan Resource Hacker (disingkat ResHacker), silahkan anda googling, dengan kemungkinan berhasil 99% (1% gagal jika mati listrik tiba-tiba).

Apa? Anda malas googling? Waddoh… apa susahnya membuka google? Baiklah. Silahkan kunjungi url berikut :

http://www.angusj.com/resourcehacker/

atau

http://www.pt.lu/comnet/desc/reshacker.html

Sebagai info tambahan, url yang pertama adalah url situs asli dari pembuat program tersebut, dengan direct download, dan sangat ringan. Begitu saya mengetikkan kata kunci di google, dialah urutan pertamanya. Jadi pakek google mudah kok! Jangan malas mencari.:D
(“ni anak edan kali… Mo bahas google pa apa???”)

Nah. Jika semua alatnya sudah siap. Sebaiknya briefing dulu mengenai apa yang akan kita lakukan. Resource hacker adalah program yang mampu mengedit file tipe exe, dll, scr, dan lain-lain yang berjalan pada keluarga windows. Jadi yang kita perlu lakukan adalah mendapatkan sebuah papan dasar untuk ditaruhi Foto dan Kalender anda. Untuk itu kita perlu sebuah file exe dasar, standar, flat, atau bisa dikatakn papan tripleknya program anda.

Untuk mendapatkan “papan triplek” exe Ini, yang anda perlukan adalah system operasi windows XP. Windows XP, memiliki sebuah tool yang mampu mebuat auto-extrack dalam format exe yang tampilannya standar. Nah! Ini yang kita butuhkan. “Papan triplek” exe inilah yang menjadi papan tempat kalender anda berada. Untuk itu :

Langkah Pertama : Membuat Papan Triplek

1. Klik start, run, dan tuliskan iexpress.exe kemudian hantam enter. Sebuah wizard (wisaya) akan keluar. Kemudian, pilihlah Create new Self Extraction Directive file dan hantam next.

2. Setelah anda sampai di bagian Package Purpose, pilihlah extract file only kemudian hantam next lagi.

3. Setelah itu, akan muncul Title Program. Beri nama terserah anda. Misalnya Kalender Saya, dan kembali hantam next.

4. Berikunya, pilih no Prompt dan hantam next lagi.

5. Nah. Sekarang kita sampai di bagian yang paling penting, yaitu bagian License Agreement. Untuk anda ketahui sebelumnya, di bagian ini, wizard (wisaya) memberikan pilihan untuk menampilkan tulisan yang berisi license agreement atau tidak. Di bagian license agreement inilah tempat kita akan menaruh gambar dan kalender sehingga bagian ini harus ada. Untuk itu, pilihlah Display a licence kemudian klik browse dan pilihlah sebuah file txt untuk dijadikan license agreements. Ukuran filenya sebaiknya kecil saja. Anda bisa saja membuat txt baru yang khusu digunakan untuk ini. Setelah itu, silahkan hantam next.

6. Nah, berikutnya anda akan sampai di bagian Packaged Files. Wizard akan meminta anda untuk memasukkan file yang akan dikemas dalam auto extract. Untuk itu, pilih saja file terkecil yang anda miliki. Misalnya file txt yang anda gunakan untuk licence agreements sebelumnya, kemudian hantam lagi next.

7. Di bagian berikutnya, pilih default kemudian hantam lagi next.

8. Di bagian berikutnya, pilih No Message kemudian hantam lagi next.

9. Di bagian berikutnya, pilihlah lokasi file auto extract tersebut disimpan beserta namanya, kemudian hantam lagi next.

10. Saat disuruh Save atau Don’t Save, pilihan saya serahkan pada anda.

11. Klik next. Setelah anda mengklik next program akan membuat file exe tersebut dan anda akan mendapatkan “papan triplek” exe anda. Setelah itu akan muncul finish yang wajib anda klik. Bagian pertama selesai.

Sekarang yang perlu kita lakukan adalah menggunakan “papan triplek“ yang kita miliki untuk ditempeli gambar dan kalender sehingga program kita selesai. Untuk itu, yang kita perlukan adalah si Reshack ini. Langkah berikutnya adalah :

Langkah Kedua : Nempel-nempel.

1. Jalankan Resource Hacker kemudian buka file “papan triplek” anda. Tidak tau caranya? Di jendela Resource Hacker, klik file, kemudian open.

2. Pindahlah ke jendela bagian kiri, kemudian expand folder Dialogue, kemudian expand lagi folder 2001, sehingga akan terlihat resource no 1033.
Seperti yang anda lihat di gambar tersebut, saat anda membuka resource nomor 1033, maka jendela Dialog – 2001 akan terbuka yang menampilkan jendela license. Inilah mengapa di langkah sebelumnya saya katakan license agreement harus ada. Disinilah tempat kalender itu nanti. Sekarang, anda klik kanan semua yang bisa di klik pada jendela tersebut kecuali tab yang bertuliskan No, dan pilihlah delete control. Sebagai info tambahan, semua yang bisa di klik oleh anda di jendela tersebut bernama control.
Sudah? Oke. Yang perlu anda lakukan adalah mencari tombol Compile Script kemudian menekannya.

3. Sekarang, anda perlu menambahkan gambar yang akan dijadikan penghias kalender anda kedalam “triplek” exe tersebut. Jadi, klik action, kemudian add new resource.

4. Jendela baru akan terbuka dan anda bisa menambahkan resource baru. Klik Open file with new resource. Dalam hal ini, gunakanlah gambar yang berformat BMP. Untuk Resorce Name dan Resource Language, gunakanlah saja angka 1. Sebenarnya bisa terserah anda tapi agar pembelajaran kita (cieee.. Belajar???) lebih tinggi sinkronnya, kita gunakan angka yang sama.
Setelah itu, silahkan klik Add Resource. Maka Resource yang baru bernama Bitmap akan muncul (entah dari mana…).

5. Balik lagi ke resource 1033 di dialogue->2001 yang sudah anda delete semuanya tadi. Klik kanan di window yang kosong tersebut, kemudian pilih add Insert control.

6. Setelah anda menekan Insert control, jendela lain akan terbuka, menanyakan control macam apa yang ingin anda masukkan. Kita akan masukkan bitmap. Klik icon yang lambangnya gambar di baris kedua sebelah kiri, kemudian masukkan di caption dan Help ID angka 1 (satu). Masih ingat angka pada Resource name dan Resource language yang kita masukkan sebelumnya. Inilah gunanya. Silahkan lihat gambar untuk lebih jelasnya.
Setelah siap, hantam tab OK.

7. Sekarang tentunya gambar tersebut sudah masuk di jendela License.
Aturlah gambar tersebut dan besar jendela sesuai keinginan anda.

8. Sekarang kita tambahkan satu lagi resource yang kurang, yaitu tanggal. Untuk itu, klik kanan gambar tersebut, dan sekali lagi pilih Insert control. Jendela yang meminta anda untuk memilih control baru akan keluar seperti sebelumnya. Sekarang, pilih Sysmonth call32 dengan mengklik Icon Tabel bertitik merah nomor dua dari kanan pada baris atas dan hantam OK.
Kemudian aturlah letaknya di atas gambar tersebut yang kira-kira sesuai dan bagus menurut anda.

9. Nah, anda mungkin penasaran apa gunanya tab No yang disisakan tadi? Oke, kita akan menggunakannya sebagai tombol Tutup. Untuk itu klik kanan tab tersebut dan pilih Edit control.

10. Sekarang ganti saja tulisan &No di Caption itu menjadi &Tutup Kalender, atau apa saja yang anda hendaki. Kemudian hantam OK.
(jika tulisan anda kepanjangan sehingga tab yang sebelumnya No tersebut kurang besar, anda bisa meresizenya supaya pas panjangnya dengan tulisan anda)

11. Sekarang save as lewat file dengan nama terserah saja dan jangan lupa tambahkan ekstensi .exe maka program kalender ala anda ini sudah selesai! Selamat!

TEKNEEQ :

a. Masalah icon
Anda mungkin kurang menyukai Icon yang digunakan. Jika ya, saat anda mengedit pilih saja Replace icon di menu Action. Pilihlah icon yang anda hendaki lewat open new icon, kemudian hantam replace.

b. Memilih gambar yang dijadikan latar
Dikarenakan keterbatasan yaitu latar control kalender adalah putih, agar gambar bisa sesuai, ada baiknya daerah yang akan dipasangi kalender berwarna putih. Atau bisa saja anda menggunakan foto anda yang sedang memegang papan. Nah, dipapan tersebut itulah kita taroh control kalender.

Pengantar Manajemen

2008-11-10T16:51:00.000+07:00

PENGANTAR MANAJEMEN

Kata Manajemen berasal dari bahasa Prancis kuna ménagement, yang memiliki arti seni melaksanakan dan mengatur. Manajemen belum memiliki definisi yang mapan dan diterima secara universal. Mary Parker Follet, misalnya, mendefinisikan manajemen sebagai seni menyelesaikan pekerjaan melalui orang lain. Definisi ini berarti bahwa seorang manajer bertugas mengatur dan mengarahkan orang lain untuk mencapai tujuan organisasi. Sementara itu, Ricky W. Griffin mendefinisikan manajemen sebagai sebuah proses perencanaan, pengorganisasian, pengkoordinasian, dan pengontrolan sumber daya untuk mencapai sasaran (goals) secara efektif dan efesien. Efektif berarti bahwa tujuan dapat dicapai sesuai dengan perencanaan, sementara efisien berarti bahwa tugas yang ada dilaksanakan secara benar, terorganisir, dan sesuai dengan jadwal; dalam berbagai bidang seperti industri, pendidikan, kesehatan, bisnis, finansial dan sebagainya. Dengan kata lain efektif menyangkut tujuan dan efisien menyangkut cara dan lamanya suatu proses mencapai tujuan tersebut.

Ilmu manajemen merupakan suatu kumpulan pengetahuan yang disistemisasi, dikumpulkan dan diterima kebenarannya. Hal ini dibuktikan dengan adanya metode ilmiah yang dapat digunakan dalam setiap penyelesaian masalah dalam manajemen. Namun selain itu, beberapa ahli seperti Follet menganggap manajemen adalah sebuah seni. Hal ini disebabkan oleh kepemimpinan memerlukan kharisma, stabilitas emosi, kewibawaan, kejujuran, kemampuan menjalin hubungan antaramanusia yang semuanya itu banyak ditentukan oleh bakat seseorang dan sulit dipelajari.

Tingkatan manajer

Top management atau manajemen tingkat atas yang sering disebut dengan executive officer atau top manager. Bertugas merencanakan kegiatan dan strategi perusahaan secara umum dan mengarahkan jalannya perusahaan. Contoh top manajemen adalah CEO (chief executive officer) dan CFO (chief financial officer)

Middle management atau manajemen menengah bertugas sebagai penghubung antara manajemen puncak dan manajemen lini pertama, misalnya kepala bagian atau kepala departemen.

Lower management atau manejemen lini pertama (first-line management) adalah manajemen yang memimpin dan mengawasi tenaga-tenaga operasional perusahaan. Manajemen ini dikenal pula dengan istilah manajemen operasional (supervisor, kepala seksi, dan mandor).

Keterampilan manajer

Menurut Griffin dalam bukunya Business, 8th edition, manajer harus memiliki lima macam keterampilan, yaitu keterampilan konsepsional, keterampilan kemanusiaan, keterampilan teknis, keterampilan manajemen waktu, dan keterampilan membuat keputusan.

Keterampilan konseptual

Manajer tingkat atas (top manager) harus memiliki keterampilan untuk membuat konsep, ide, dan gagasan demi kemajuan organisasi. Keterampilan ini sering disebut sebagai keterampilan kosepsional (conceptional skill). Gagasan atau ide serta konsep tersebut kemudian haruslah dijabarkan menjadi suatu rencana kegiatan untuk menciptakan gagasan atau konsepnya itu. Proses penjabaran ide menjadi suatu rencana kerja yang kongkret itu biasanya disebut sebagai proses perencanaan. Oleh karena itu, keterampilan konsepsional juga meruipakan keterampilan untuk membuat rencana kerja.

Keterampilan komunikasi atau kemanusiaan

Selain kemampuan konsepsional, manajer juga perlu dilengkapi dengan keterampilan berkomunikasi atau keterampilan berhubungan dengan orang lain yang disebut juga keterampilan kemanusiaan (human skill). Komunikasi yang persuasif harus selalu diciptakan oleh manajer terhadap bawahan yang dipimpinnya. Dengan komunikasi yang [persuasif, bersahabat, dan kebapakan akan membuat karyawan merasa dihargai dan kemudian mereka akan bersikap terbuka kepada atasan. Keterampilan berkomunikasi diperlukan, baik pada tingkatan manajemen atas, mengengah, maupun bawah.

Keterampilan teknis

Keterampilan terakhir yang merupakan bekal bagi seorang manajer adalah keterampilan teknis (technical skill). Keterampilan ini pada umumnya merupakan bekal bagi manajer pada tingkat yang lebih rendah. Keterampilan teknis ini merupakan kemampuan untuk menjalankan suatu pekerjaan tertentu, misalnya menggunakan program komputer, memperbaiki mesin, membuat kursi, merangkai bunga dan keterampilan teknis yang lain.

Keterampilan manajemen waktu

Kemampuan manajemen waktu merujuk pada kemampuan seorang manajer untuk menggunakan waktu yang dimilikinya secara bijaksana. Pada tahun 2004, sebagai contoh, Lew Frankfort dari Coach digaji $2.000.000 per tahun. Jika diasumsikan bahwa ia bekerja selama 50 jam per minggu dengan waktu cuti 2 minggu, maka gaji Frankfort setiap jamnya adalah $800 per jam—sekitar $13 per menit. Dari sana dapat kita lihat bahwa setiap menit yang terbuang akan sangat merugikan perusahaan. Kebanyakan manajer, tentu saja, memiliki gaji yang jauh lebih kecil dari Frankfort. Namun demikian, waktu yang mereka miliki tetap merupakan aset berharga, dan menyianyiakannya berarti membuang-buang uang dan mengurangi produktivitas perusahaan.

Keterampilan membuat keputusan

Yang termasuk ke dalam kelompok ini adalah kemampuan untuk mendefinisikan masalah dan menentukan cara terbaik dalam memecahkannya. Kemampuan membuat keputusan adalah yang paling utama bagi seorang manajer, terutama bagi kelompok manajer atas (top manager). Griffin mengajukan tiga langkah dalam pembuatan keputusan. Pertama, seorang manajer harus mendefinisikan masalah dan mencari berbagai alternatif yang dapat diambil untuk menyelesaikannya. Kedua, manajer harus mengevaluasi setiap alternatif yang ada dan memilih sebuah alternatif yang dianggap paling baik. Dan terakhir, manajer harus mengimplementasikan alternatif yang telah ia pilih serta mengawasi dan mengevaluasinya agar tetap berada di jalur yang benar. (Griffin:2006)

Pandangan Teoritis
Mary Parker Follett (1868-1933), yang menulis dalam topik pada masa awal abad ke duapuluh, mengartikan manajemen sebagai "seni membuat hal-hal terselesaikan melalui orang-orang".[1]

Orang juga bisa berpikir tentang manajemen secara fungsional, karena tindakan menghitung kualitas dalam basis reguler dan dari mengatur beberapa rencana awal; atau sebagai tindakan yang diambil untuk mencapai goal yang diinginkan orang tersebut. Ini dipakai bahkan dalam situasi dimana perencanaan tidak ada sama sekali. Dalam prespektif ini, orang Perancis Henri Fayol[2]mengelompokkan manajemen mengandung lima fungsi:

perencanaan
pengorganisasian
kepemimpinan
kordinasi pengaturan

Beberapa orang, bagaimanapun, menemukan kalau definisi ini, walaupun berguna, terlalu sempit. Frase "manajemen adalah apa yang manajer lakukan" terjadi dalam banyak tempat, mensugestikan tingkat kesulitan mendefinisikan manajemen, sifat yang berubah-ubah dari definisi tersebut, dan hubungan dari praktek manajerial dengan eksistensi kader manajerial atau kelas

Salah satu kebiasaan yang mempertimbangkannya sebagai persamaan dari "administrasi bisnis", walaupun ini tidak mengikutkan manajemen dalam tempat diluar komersial, sebagai contohnya dalam amal dan dalam sektor publik. Walaupun, banyak orang merefrensikan kepada departemen yang mengajar manajemen didalam universitas sebagai "[[sekolah bisnis]". Beberapa institusi (seperti Harvard Business School) mengunakkan nama tersebut sementara yang lain (seperti Yale School of Managment) mengunakan istilah yang lebih inklusif yaitu "manajemen."

Pengguna bahasa Inggris biasa menggunakan istilah "management" atau "the managment" sebagai kata kolektif mendeskripsikan organisasi, sebagai contoh ialah korporasi.

Sejarah

Banyak kesulitan yang terjadi dalam melacak sejarah manajemen. Beberapa orang melihatnya (dengan definisi) sebagai konseptualisasi modern akhir (late modern conceptualization). Dalam istilah tersebut manajemen tidak memiliki sejarah pra-modern, hanya merupakan pertanda. Beberapa orang lainnya, mendeteksi aktivitas mirip-manajemen di masa pra-modern. Beberapa penulis melacak perkembangan pemikiran manajemen pada pedagang-pedangan Sumeria dan pembangun piramid Mesir. Para pemilik budak selama berabad-abad menghadapi permasalahan eksploitasi/memotivasi budak yang bergantung namun terkadang suka melawan (memaksa otoritas), namun banyak perusahaan pra-industri, dengan skala mereka yang kecil, tidak merasa terdorong ungtuk menghadapi permasalahan manajemen secara sistematis. namun, inovasi seperti penyebaran sistem angka Hindu-Arab (abad ke-5 hingga ke15) dan kodifikasi kesekretariatan entri-ganda (1494) menyediakan perangkat untuk penilaian, perencanaan dan kendali manajemen.

Abad 19
Bidang pelajaran manajemen berkembang dari kondisi ekonomi di abad ke-19. Pelaku Ekonomi klasik seperti Adam Smith dan John Stuart Mill memberikan teori alokasi sumber daya, produksi dan penetapan harga. Pada saat yang hampir bersamaan, penemu seperti Eli Whitney, James Watt, dan Matthew Boulton mengembangkan teknik produksi seperti standardisasi, prosedur kontrol kualitas, akuntansi biaya, penukaran bahan, dan perencanaan kerja.

Pada pertengahan abad 19, Robert Owen, Henry Poor, dan M. Laughlin dan lain-lain memperkenalkan elemen manusia dengan teori pelatihan, motivasi, struktur organisasi dan kontrol pengembangan pekerja.

Pada akhir abad 19, Pelaku ekonomi marginal Alfred Marshall dan Leon Walras dan lainnya memperkenalkan lapisan baru yang kompleks ke teori manajemen. Pada 1900an manajer mencoba mengganti teori mereka secara keseleruhan berdasarkan sains.

Abad 20
Teori pertama tentang manajemen yang lengkap muncul sekitar tahun 1920. Orang seperti Henry Fayol dan Alexander Church menjelaskan beberapa cabang dalam manajemen dan hubungan satu sama lain.

Peter Drucker menulis salah satu buku paling awal tentang manajemen terapan: "Konsep Korporasi" (Concept of the Corporation), diterbitkan tahun 1946. Buku ini muncul atas ide Alfred Sloan (chairman dari General Motors) yang menugaskan penelitian tentang organisasi.

H. Dodge, Ronald Fisher, dan Thorton C Fry memperkenalkan teknik statistika ke dalam manajemen. Pada tahun 1940an, Patrick Blackett mengkombinasikan teori statistika dengan teori mikroekonomi dan lahirlah ilmu riset operasi. Riset operasi, sering dikenal dengan "Sains Manajemen", mencoba pendekatan sains untuk menyelesaikan masalah dalam manajemen, khususnya di bidang logistik dan operasi.

Mendekati akhir abad 20, manajemen terdiri dari beberapa bidang terpisah, termasuk:

Manajemen Sumber daya manusia
Manajemen operasi atau produksi
Manajemen strategi
Manajemen pemasaran
Manajemen keuangan
Manajemen informasi teknologi

Proses manajemen

Proses manajemen

Artikel utama: Proses manajemen
Fungsi manajemen adalah elemen-elemen dasar yang akan selalu ada dan melekat di dalam proses manajemen yang akan dijadikan acuan oleh manajer dalam melaksanakan kegiatan untuk mencapai tujuan.

Planning

Kegiatan seorang manajer adalah menyusun rencana. Menyusun rencana berarti memikirkan apa yang akan dikerjakan dengan sumber yang dimiliki. Agar dapat membuat rencana secara teratur dan logis, sebelumnya harus ada keputusan terlebih dahulu sebagai petunjuk langkah-langkah selanjutnya.

Organizing

organizing berarti menciptakan suatu struktur organisasi dengan bagian-bagian yang terintegrasi sedemikian rupa sehingga hubungan antarbagian-bagian satu sama lain dipengaruhi oleh hubungan mereka dengan keseluruhan struktur tersebut.

Pengorganisasian bertujuan membagi suatu kegiatan besar menjadi kegiatan-kegiatan yang lebih kecil. Selain itu, mempermudah manajer dalam melakukan pengawasan dan menentukan orang yang dibutuhkan untuk melaksanakan tugas-tugas yang telah dibagi-bagi tersebut.

Actuating

Actuating adalah suatu tindakan untuk mengusahakan agar semua anggota kelompok berusaha untuk mencapai sasaran sesuai dengan perencanaan manajerial dan usaha-usaha organisasi. Jadi actuating artinya adalah menggerakkan orang-orang agar mau bekerja dengan sendirinya atau penuh kesadaran secara bersama-sama untuk mencapai tujuan yang dikehendaki secara efektif. Dalam hal ini yang dibutuhkan adalah kepemimpinan (leadership).

Controlling

Controlling adalah proses pengawasan performa perusahaan untuk memastikan bahwa jalannya perusahaan sesuai dengan rencana yang telah ditetapkan. Seorang manajer dituntut untuk menemukan masalah yang ada dalam operasional perusahaan, kemudian memecahkannya sebelum masalah itu menjadi semakin besar. an mengevaluasinya

Sarana manajemen

Untuk mencapai tujuan yang telah ditentukan diperlukan alat-alat sarana (tools). Tools merupakan syarat suatu usaha untuk mencapai hasil yang ditetapkan. Tools tersebut dikenal dengan 6M, yaitu men, money, materials, machines, method, dan markets.

Man (SDM)

Dalam manajemen, faktor manusia adalah yang paling menentukan. Manusia yang membuat tujuan dan manusia pula yang melakukan proses untuk mencapai tujuan. Tanpa ada manusia tidak ada proses kerja, sebab pada dasarnya manusia adalah makhluk kerja. Oleh karena itu, manajemen timbul karena adanya orang-orang yang berkerja sama untuk mencapai tujuan.

Money (uang)

Uang merupakan salah satu unsur yang tidak dapat diabaikan. Uang merupakan alat tukar dan alat pengukur nilai. Besar-kecilnya hasil kegiatan dapat diukur dari jumlah uang yang beredar dalam perusahaan. Oleh karena itu uang merupakan alat (tools) yang penting untuk mencapai tujuan karena segala sesuatu harus diperhitungkan secara rasional. Hal ini akan berhubungan dengan berapa uang yang harus disediakan untuk membiayai gaji tenaga kerja, alat-alat yang dibutuhkan dan harus dibeli serta berapa hasil yang akan dicapai dari suatu organisasi.

Materials (bahan)

Materi terdiri dari bahan setengah jadi (raw material) dan bahan jadi. Dalam dunia usaha untuk mencapai hasil yang lebih baik, selain manusia yang ahli dalam bidangnya juga harus dapat menggunakan bahan/materi-materi sebagai salah satu sarana. Sebab materi dan manusia tidaki dapat dipisahkan, tanpa materi tidak akan tercapai hasil yang dikehendaki.

Machines (mesin)

Dalam kegiatan perusahaan, mesin sangat diperlukan. Penggunaan mesin akan membawa kemudahan atau menghasilkan keuntungan yang lebih besar serta menciptakan efesiensi kerja.

Methods (metode)

Dalam pelaksanaan kerja diperlukan metode-metode kerja. Suatu tata cara kerja yang baik akan memperlancar jalannya pekerjaan. Sebuah metode daat dinyatakan sebagai penetapan cara pelaksanaan kerja suatu tugas dengan memberikan berbagai pertimbangan-pertimbangan kepada sasaran, fasilitas-fasilitas yang tersedia dan penggunaan waktu, serta uang dan kegiatan usaha. Perlu diingat meskipun metode baik, sedangkan orang yang melaksanakannya tidak mengerti atau tidak mempunyai pengalaman maka hasilnya tidak akan memuaskan. Dengan demikian, peranan utama dalam manajemen tetap manusianya sendiri.

Market (pasar)

Memasarkan produk sudah barang tentu sangat penting sebab bila barang yang diproduksi tidak laku, maka proses produksi barang akan berhenti. Artinya, proses kerja tidak akan berlangsung. Oleh sebab itu, penguasaan pasar dalam arti menyebarkan hasil produksi merupakan faktor menentukan dalam perusahaan. Agar pasar dapat dikuasai maka kualitas dan harga barang harus sesuai dengan selera konsumen dan daya beli (kemampuan) konsumen.

Etika manajerial

Etika manajerial adalah standar prilaku yang memandu manajer dalam pekerjaan mereka. Ricky W. Griffin dalam bukunya yang berjudul Business mengklasifikasikan etika manajerial ke dalam tiga kategori:

Perilaku terhadap karyawan

Kategori ini meliputi aspek perekrutan, pemecatan, kondisi upah dan kerja, serta privasi dan respek. Pedoman etis dan hukum mengemukakan bahwa keputusan perekrutan dan pemecatan harus didasarkan hanya pada kemampuan untuk melakukan pekerjaan. Perilaku yang secara umum dianggap tidak etis dalam kategori ini misalnya mengurangi upah pekerja karena tahu pekerja itu tidak bisa mengeluh lantaran takut kehilangan pekerjaannya.

Perilaku terhadap organisasi

Permasalahan etika juga terjadi dalam hubungan pekerja dengan organisasinya. masalah yang terjadi terutama menyangkut tentang kejujuran, konflik kepentingan, dan kerahasiaan. Masalah kejujuran yang sering terjadi di antaranya menggelembungkan anggaran atau mencuri barang milik perusahaan. Konflik kepentingan terjadi ketika seorang individu melakukan tindakan untuk menguntungkan diri sendiri, namun merugikan atasannya. Misalnya, menerima suap Sementara itu, masalah pelanggaran etika yang berhubungan dengan kerahasiaan di antaranya menjual atau membocorkan rahasia perusahaan kepada pihak lain.

Perilaku terhadap agen ekonomi lainnya

Seorang manajer juga harus menjalankan etika ketika berhubungan dengan agen-agen ekonomi lain—seperti pelanggan, pesaing, pemegang saham, pemasok, distributor, dan serikat buruh.

MEMBANGUN ATTITUDE

2008-11-10T16:43:00.000+07:00

Membangun Attitude

April 18, 2007

Posted by segerhasani in Makna Dasar, Opini. trackback
Attitude, dalam bahasa Inggris — setau saya — berarti tingkah laku. Attitude lebih banyak dimaknai sebagai sifat atau karakter profesionalisme dalam mengemban tugas atau kewajiban. Lain dengan implementasi yang diajarkan oleh lembaga pendidikan kepribadian yang sering menonjolkan sikap berperilaku atau norma yang normatif dalam bergaul, attitude lebih menekankan ke dalam jiwa atau hati nurani dalam menjalankan segala perilaku yang berhubungan dengan tugas tersebut.

Attitude erat sekali hubungannya dengan status atau profesi. Seseorang yang bersikap sopan santun, belum tentu memiliki attitude bagus jika prestasi kerjanya buruk. Sebaliknya, seseorang yang memiliki atttitude tinggi, belum tentu juga memiliki sikap yang santun. Sikap attitude lebih tampak dalam sikap mempertanggungjawabkan atau menjunjung tinggi nilai-nilai profesionalisme. Orang yang memiliki attitude tinggi sangat memperhatikan tindakan-tindakan untuk menjaga tanggung jawab profesinya, tidak saja dengan cara yang benar, tapi juga niat yang benar. Selain itu senantiasa bekerja dan berkarya dengan hati nurani, dengan kecintaan yang tinggi pada profesinya, serta tanggung jawab yang besar akan hasil dan pengaruhnya kepada masyarakat.

Rendahnya kualitas attitude akan menyebabkan rendah pula kualitas kinerja dan prestasi. Sehingga menjadikan hasil pekerjaan menjadi tidak optimal.

Pentingnya Attitude

Untuk membangun sebuah bangsa yang beradab dibutuhkan sumber daya manusia yang berkualitas. Saya kira banyak sekali contoh hancurnya perusahaan, lembaga pemerintah, pendidikan dan lain-lain karean sebab rendahnya kualitas SDM. Artinya, memiliki attitude yang masih rendah.

Kasus-kasus KKN atau berbagai penyimpangan yang terjadi di masyarakat, adalah sebuah contoh jelas akan rendahnya kualitas attitude sumber daya manusia. Dan, jika ditengok secara lebih teliti, rendahnya attitude ini tidak saja terjadi dalam bidang pemerintahan dan bisnis, bidang pendidikan, yang memegang peranan penting dalam mengembangkan dan menjaga attitude generasi bangsa, juga tidak terhindar dari “penyakit” ini.

Umumnya, dan yang paling banyak terjadi, penyimpangan-penyimpangan yang disebabkan oleh rendahnya attitude ini bersumber dari masalah materi. Sehingga hampir semua bidang profesi di masyarakat memiliki ukuran kesuksesan yang identik, yaitu seberapa besar materi yang berhasil dikumpulkan, atau seberapa tinggi kedudukan yang berhasil diraih.

Sehingga terjadilah ketidakseimbangan ekosistem sosial ekonomi dalam kehidupan. Karena beragam profesi memiliki tujuan yang sama. Akhirnya, peran-peran yang mestinya berada pada batasan tertentu, kini tak beraturan lagi. Yang akhirnya, tugas yang sebenarnya menjadi tidak optimal dan menjadi instan, jauh dari yang diharapkan.

Ada beberapa contoh kasus, dan hal ini saya yakin banyak ditemukan di masyarakat, dimana logika-logika yang telah berkembang sungguh diluar kamus. Gara-gara rendah attitude. Wajarnya, ketika ditawari produk seseorang akan menawar dengan harga terendah. Ini sebaliknya, mereka ingin membeli dengan harga yang lebih tinggi. Sehingga, pernah suatu ketika ketika seseorang memberi saya anggaran 10 juta untuk beli komputer, ya, saya belikan tiga biji. Ternyata, mereka menginginkan dua.

Ada banyak lagi yang seperti ini, kalau proyeknya tidak mahal malah tidak disetujui. Mencari pekerjaan bukan karena keahlian, yang terpenting adalah koneksi. Menjadi pengacara, bukan karena berkesempatan membela kebenaran, tapi lebih cepat meraih sukses (kaya). Dan ini saya yakin sudah terbiasa di telinga kita, juga orang tua kita barangkali.

Tulisan ini tidak bertujuan untuk mengulas seberapa jauh penyimpangan-penyimpanan tersebut telah terjadi di masyarakat. Beberapa kasus di atas adalah sekedar contoh kasus bahwa rendahnya attitude, dapat merusak sistem kewajaran hidup bermasyarakat, sirkulasi kehidupan menjadi tidak seimbang. Yang semula masuk akal menjadi aneh, dan yang semula nista menjadi wajar-wajar saja.

Walaupun logika-logika di atas sepertinya sudah membiasa, tapi menurut saya merupakan kondisi yang sangat tidak wajar (baca: masyarakat sedang sakit) .

Seperti contoh, orang yang kaya memang sewajarnya adalah pengusaha, sehingga kekayaannya bisa digunakan untuk menciptakan lapangan pekerjaan atau investasi mengembangkan potensi sumber daya alam Indonesia. Tapi yang terjadi, kekayaan ternyata banyak terkumpul juga di pejabat atau pengacara. Akhirnya larinya paling banyak ya beli mobil mewah atau rumah megah. Karena memang tidak ada kemampuan di bidang bisnis. Akhirnya tercipta orang-orang kaya yang tidak bisa mengkayakan orang lain.

Bahkan paradigma kesuksesan yang telah berkembang di masyarakat (juga pendidikan) adalah bagaimana bisa mencapai kedudukan dan materi di puncak. Contoh kecilnya adalah mendapatkan juara (rangking) pertama. Tapi sangat tidak mungkin karena yang bisa mencapai hanya bagi mereka yang cerdas, dan tidak mungkin semua siswa bisa berkesempatan memperolehnya.

Itu semua sebenarnya tidak pada tempatnya. Segala hal yang tidak memiliki keadilan bagi semua pihak untuk berprestasi adalah ketidakwajaran. Seorang gubernur boleh diberikan piala karena kepemimpinannya, tapi tukang koran juga boleh jika dia berhasil melayani pembaca di pagi hari. Yang cerdas boleh mendapat penghargaan karena prestasinya, tapi yang kurang mampu juga butuh perhatian jika memiliki semangat tinggi. Seorang pengusaha boleh terhormat karena bisa mengentas kemiskinan, tapi si pemulung sekali waktu juga perlu dihormati karena mengurangi limbah sampah.

Jika segala posisi di masyarakat kita hargai sebagai suatu peran yang memang mutlak dibutuhkan, tentu kita tidak berbondong-bondong ingin menjadi orang kaya semua. Dan itu semua harus dibangun dengan attitude. Karena attitude bisa dimiliki dan diraih oleh semua orang, tidak pandang status sosial dan ekonomi. Jika prestasi seseorang dinilai dengan seberapa besar attitudenya, maka saya yakin tidak saja bangsa Indonesia akan cepat keluar dari krisis, tapi juga dapat melesat jauh melebihi negara-negara berkembang lainnya.

Attitude pemimpin adalah menjaga dan mencintai rakyat. Attitude pengusaha dan ekonom adalah menciptakan lapangan kerja dan meningkatkan kesejahteraan masyarakat. Attitude pendidik adalah menciptakan generasi berkualitas. Attitude teknolog(krat) adalah menciptakan teknologi yang bermanfaat. Attitude pelajar adalah menemukan potensi diri dan menyaring ilmu pengetahuan seoptimal mungkin (bukan harus menjadi ranking). Attitude pejabat adalah mengemban amanah rakyat sebaik-baiknya. Dan attitude karyawan adalah bekerja sebaik mungkin untuk pengembangan perusahaannya.

Jika kombinasi attittude ini digabung, Insya Allah akan menciptakan prestasi komulatif yang luar biasa. 1000%.

Etika Profesi di Bidang Teknologi Informasi

2008-11-10T16:36:00.000+07:00

Etika Profesi di Bidang Teknologi Informasi

Dalam era kini, informasi dipandang sebagai aset atau sumber yang setara dengan sumber-sumber lain dan juga mempunyai kekhususan persoalan dan pengelolaannya, sehingga diperlukan suatu manajemen khusus yaitu sistem manajemen informasi dengan pengelolanya yang khusus yaitu manajer informasi atau Chief Information Officer (CIO). Sebagai manajer jelas harus mengetahui etika manajemen. Aspek keuangan merupakan suatu aspek yang yang sangat sensitif, demikian juga dengan aspek informasi. Dengan demikian hak dan tanggung jawab manajer mengisyaratkan bahwa syarat manajer harus “beretika (bermoral) tinggi dan kuat”.
Sebagai seorang yang profesional, kita mempunyai tanggung jawab untuk mempromosikan etika penggunaan teknologi informasi di tempat kerja. Kita mempunyai tanggung jawab manajerial. Kita harus menerima tanggung jawab secara etis seiring dengan aktivitas pekerjaan. Hal itu termasuk melaksanakan peran kita dengan baik sebagai suatu sumber daya manusia yang penting di dalam sistem bisnis dalam organisasi. Sebagai seorang manajer atau pebisnis profesional, akan jadi tanggung jawab kita untuk membuat keputusan-keputusan tentang aktivitas bisnis dan penggunaan teknologi informasi, yang mungkin mempunyai suatu dimensi etis yang harus dipertimbangkan.
Teknologi Informasi mempunyai pengaruh yang besar dalam kehidupan manusia. Karena TI ibarat pisau bermata dua, legal dan ilegal, baik dan buruk, maka mau tak mau berhubungan dengan etika.
Merupakan hal yang penting untuk mengetahui bahwa hal yang tidak etis belum tentu ilegal. Jadi, dalam kebanyakan situasi, seseorang atau organisasi yang dihadapkan pada keputusan etika tidak mempertimbangkan apakah melanggar hukum atau tidak.
Banyaknya aplikasi dan peningkatan penggunaan TI telah menimbulkan berbagai isu etika, yang dapat dikategorikan dalam empat jenis:

Isu privasi: rahasia pribadi yang sering disalahgunakan orang lain dengan memonitor e-mail, memeriksa komputer orang lain, memonitor perilaku kerja (kamera tersembunyi). Pengumpulan, penyimpanan, dan penyebaran informasi mengenai berbagai individu/pelanggan dan menjualnya kepada pihak lain untuk tujuan komersial. Privasi informasi adalah hak untuk menentukan kapan, dan sejauh mana informasi mengenai diri sendiri dapat dikomunikasikan kepada pihak lain. Hak ini berlaku untuk individu, kelompok, dan institusi.
Isu akurasi: autentikasi, kebenaran, dan akurasi informasi yang dikumpulkan serta diproses. Siapa yang bertanggung jawab atas berbagai kesalahan dalam informasi dan kompensasi apa yang seharusnya diberikan kepada pihak yang dirugikan?
Isu properti: kepemilikan dan nilai informasi (hak cipta intelektual). Hak cipta intelektual yang paling umum berkaitan dengan TI adalah perangkat lunak. Penggandaan/pembajakan perangkat lunak adalah pelanggaran hak cipta dan merupakan masalah besar bagi para vendor, termasuk juga karya intelektual lainnya seperti musik dan film.
Isu aksesibilitas: hak untuk mengakses infomasi dan pembayaran biaya untuk mengaksesnya. Hal ini juga menyangkut masalah keamanan sistem dan informasi.

Salah satu alasan sulitnya menegakkan etika di dunia TI adalah karena relatif barunya bidang ini. Tak seperti dunia kedokteran yang usianya sudah ratusan abad, bidang TI adalah profesi baru. Walaupun ada juga yang melanggar, dalam dunia kedokteran, etika profesi sangat dijunjung tinggi. Ini jauh berbeda dengan dunia TI, di mana orang sangat mudah melanggar etika. Orang masih meraba-raba batasan antara inovasi, kreatifitas, dan pelanggaran etika. Apalagi dunia ini hampir sepenuhnya digeluti oleh anak-anak muda yang kerap mengabaikan persoalan moralitas yang abu-abu.

Tag	Atribut	Value	Keterangan
	Type	Square Disc	Bulat kotak Bulat titik
	Type	I i A A	Huruf besar romawi Huruf kecil romawi Huruf besar Huruf kecil
	Start	n	Nilai awal penomoran

Atribut	Keterangan
Align	Dapat bernilai left, center, right, atau justify. Digunakan untuk melakukan perataan tabel ke kiri (left), ke tengah (center), ke kanan (right)
Valign	Digunakan untuk melakukan perataan yang bersifat horizontal (alignment). Valign menggunakan nilai top (atas), center (tengah), bottom (bawah) atau baseline (standar)
Bgcolor	Menunjukkan warna background pada baris

CENTRANET Bekerja sama sengan ANDI OFFSET	CENTRANET Merupakan Web Developer
ANDI OFFSET Merupakan Penerbit buku di Jogjakarta	CENTRANET

Atribut	Keterangan
Get	Pengiriman data ke dalam halaman lain yang tidak berhubungan dengan halaman selanjutnya
Post	Melakukan pengiriman datapada halaman lain yang selanjutnya dapat diproses menuju halaman berikutnya ataupun melakukan pengiriman ke dalam database

Tipe Button	Fungsi
Submit	Tombol ini digunakan untuk mengeksekusi seluruh komponen form menuju halaman yang telah dialamatkan pada atribut Action yang ada didalam badan Form.
Reset	Berguna untuk mengosongkan semua data yang telah diisikan ke dalam komponen sebelumnya.
Button	Tombol ini dapat Anda gunakan sebagai tombol yang memiliki alamat sesuai dengan yang diinginkan. Untuk dapat membuat alamat ini Anda memerlukan bantuan Javascript dalam pengalamatannya. (onclick=”parent.location=’alamat.htm’”;)

Atribut	Keterangan
Src	Digunakan untuk melakukan pemanggilan gambar. Dalam sintaks tersebut Anda harus mengetikkan nama file gambar yang digunakan untuk ditampilkan di halaman web.
Width	Digunakan untuk melakukan pengaturan lebar gambar. Nilai yang digunakan dihitung dengan hitungan persen (%), atau dengan menggunakan hitungan px (pixel)
Height	Digunakan untuk melakukan pengaturan tinggi gambar. Atribut ini mirip dengan atribut width yaitu menggunakan nilai persen (%) untuk perhitungan tingginya
Alt	Sedangkan alt berguna untuk memberikan pesan pada saat mouse melewati area gambar

Atribut	Keterangan
_self	Dengan menggunakan jenis target ini akan membuka halaman link pada halaman sendiri. Jadi halaman pertama akan berganti dengan halaman yang dituju oleh link tersebut
_blank	Atribut ini akan menyebabkan membuka halaman yang dimaksud di dalam link halaman baru. Jadi nantinya Anda akan memliki dua buah halaman browser yaitu halaman yang pertama (halaman yang memiliki tombol hyperlink) dan halaman yang dituju oleh link tersebut.
_parent	Digunakan seperti _self
_top	Link akan mengacu pada halaman atas pada halaman web yang dituju