reza surya sesanti: Januari 2013

Dasar HTML utk pemula

Kali ini kita akan ngerefresh sejenak ingatan kita mengenai HTML. Yah, artikel ini mungkin cocok buat yang baru mendalami pemrograman web.
HTML atau Hyper Text Markup Language. Adalah bahasa yang digunakan untuk mendesain dan memformat halaman web. Kita mungkin sudah mendengar tentang bahasa program seperti C, C++, Java, dan Visual basic. Masing-Masing bahasa ini terdiri dari perintah sintak dan programming . Sintak ini adalah yang programmer gunakan untuk memanggil kode.
Sangatlah penting mengetahui bagaimana cara menulis kode menggunakan bahassa yang
relevan.

Lebih dari itu, kita harus konvensional dengan aturan menyangkut bahasa tertentu.

Didalam HTML, sintak ini disebut tag.Tag ditulis dengan tanda-kurung bersudut< dan
>.Ada kelompok tag yang sudah dikenal didalam HTML, yang mana digunakan untuk berbagai tujuan.
Sebagai contoh, dalam rangka memodifikasi satu baris teks ke dalam Bold, kita menerapkan
tag bold dengan suatu tag <b>, kemudian tulis beberapa teks atau suatu paragrap yang
berisi beberapa teks,dan tutup tag menggunakan tag </b> seperti dalam contoh listing 1.

Semua tag didalam HTML harus ditutup menggunakan sintak </>.Tetapi ada beberapa perkecualian pada aturan ini, yang mana kita akan mendiskusikanya nanti.Kita memakai tag ini
sebab HTML bukanlah bahasa yang sensitip seperti C++ dan Java.

Struktur

Setiap kode HTML perlu ditulis dalam suatu struktur yang mana dapat dihubungkan dengan
Word Wide Web.Tidaklah wajib untuk mengikuti struktur ini. Bagaimanapun juga,lebih
baik
mempraktekan langsung struktur ini sbg perancangan halaman web kita.
Listing 1 menunjukkan struktur suatu halaman HTML sederhana:

Listing 1

<!– Ini komentar didalam HTML.Ini tidak akan diperliatkan pada browser–>

<HTML>
<HEAD>
<TITLE>
Welcome to HTML
</TITLE>
</HEAD>
<BODY>
<!–halaman CONTENT dimulai –>
<B>Yang ditampilkan di browser, cuma tulisan ini.
</BODY>
</HTML>

Kode diatas menggunakan Notepad dan menyimpan file sebagai satu.html. Kemudian, klik kanan file yang disimpan tadi. bagaimanakah keluarannya?

Listing 2

<B>Untuk menampilkan tulisan cetak tebal</B><BR>

<I>Untuk menampilkan tulisan cetak miring (italic) </I><BR>

<U>Untuk menampilkan tulisan bergaris bawah (underline) </U><BR>

<BR> digunakan untuk menampilkan baris baru.

Listing 3

<Pon> Bla bla bla bla, dan tulisan ini pun akan dianggap satu paragraf. kalau ga percaya, coba aja sendiri. dengan menggunakannya dua kali atau lebih bakal lebih keliatan hasilnya.
</P>

Tidak wajib untuk menutup tag <P>. Tetapi seperti dikatakan sebelumnya, menutup
tiap-tiap tag adalah suatu yang baik yang pemprogram praktekkan.

Listing 4

Bekerja dengan Heading
Kita dapat menggunakan heading untuk mengorganisir teks kita dalam berbagai
tingkatan. Ada lima tingkatan heading didalam HTML seprti di bawah:
<H1>Level - 1 </H1>
<H2>Level - 2 </H2>
<H3>Level - 3 </H3>
<H4>Level - 4 </H4>
<H5>Level - 5 </H5>

Listing 5

Penempatan List contoh teks atau items.Ada dua jenis list didalam HTML.
sebagai berikut

o Ordered List
o Unordered List

Ordered List diwakili oleh tag <ol> tag secara otomatis menomori, dan
Unordered List diwakili oleh tag <ul> dan terlihat seperti bullet.
Cobalah kode di bawah ini:

kode diatas menghasilkan suatu daftar perintah bahasa. Jika kita
menginginkannya seperti bullet kemudian kita ubah tag <OL> menjadi tag <UL>
sebagai di bawah ini:

Listing 6

Listing 7
Penerapan Definisi List

Definisi List adalah serupa dengan daftar kata. Diterapkan menggunakan tag <DL>
dan <DT> seperti ditunjukkan listing 7 dibawah ini.

<DL>
<DT>Java
<DD>Developed by Sun Microsystems Inc
<DT>Yang kedua
<DD>Developed by saya sendiri
</DL>

Listing 8
Indenting Text
Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara
otomatis dari kiri ke kanan. Cobalah contoh berikut :

<BLOCKQUOTE>
You can use Sound Recorder to record, play, and edit sound files.
To use Sound Recorder, you must have a sound card and speakers
installed on your computer. If you want to record live sound,
you also need a microphone.
</BLOCKQUOTE>

Membuat Links

Suatu website bukanlah halaman tunggal.Terdiri dari beberapa halaman yang saling
berhubungan. Sebagai contoh,ketika kita klik suatu link nama ” About Us”,
pada browser secara otomatis Kita ke halaman web itu .
Bagaimana sihir ini terjadi? Itu merupakan suatu konsep Hyperlinks

Kita dapat menciptakan Hyperlinks menggunakan tag <a>.Dan harus ditutup menggunakan
tag </a> dan itu mewakili anchor.

Listing 9

<A href ="http://www.Friendster.com">Friendster</A>

href adalah suatu atribut yang digunakan untuk menetapkan link dan mewakili
Teks Reference. Atribut lain meliputi suatu target opsional, yang mana menandakan
bagaimana cara membuka link. Nilai atribut ini jadi kosong. Sebagai contoh,
kode berikut memanggil lokasi friendster.com didalam suatu jendela browser baru
ketika seseorang mengklik teks.

Listing 10

<A href = "http://www.friendster.com" target = "_blank">Friendster </A>

Selalu ingat untuk menyimpan file yang telah dibuat dalam ekstensi .html

Bekerja dengan Gambar
Adalah sangat mudah untuk menempatkan gambar pada suatu halaman web. Gambar dengan
extention .bmp, .gif, dan .jpeg. Meskipun, gif dan jpeg file biasa digunakan.
Tetap digunakan tag <IMG>. Kemudian diikuti dengan atribut SRC untuk menetapkan alur dari gambar. Kode berikut memperlihatkan suatu gambar nama ballon.gif pada suatu halaman
web.

Agar lebih mudah, taruh sebuah file gambar pada folder yang sama dengan html yang akan dibuat. (dalam contoh ini, digunakan gambar berekstensi .gif, dengan nama ‘gambar’)

Listing 11

Kita juga dapat menetapkan atribut seperti widht dan height jika diperlukan. ALT atribut
akan memungkinkan kita untuk menambahkan suatu popup teks ketika kita gerakkan mouse
diatas Gambar sebagai ditunjukkan di dalam listing di bawah :

Listing 12

Pengisian Backgroud dengan warna dan gambar

Kita dapat membuat background dari halaman web kita dengan suatu warna yang ditetapkan
dgn menggunakan bgcolor didalam tag <body>. Berikut kode background untuk warna merah:

Listing 13

Dengan cara yang sama, jika memerlukan suatu gambar untuk mengubah background
dari halaman web, atribut background menggunakan tag <body> ditunjukkan seperti di
bawah:

Listing 14

untuk warna, juga bisa digunakan kode hex 6 digit, diawali dengan tanda pagar misal :
#FF0000 = akan menampilkan warna merah (2 digit awal bernilai maksimal),
#00FF00 = akan menampilkan warna hijau (2 digit tengah bernilai maksimal),
#0000FF = akan menampilkan warna biru (2 digit terakhir bernilai maksimal),
nilai minimal adalah 0 (nol) dan maksimal adalah F. coba saja padukan warna2 tersebut. misal:
#ff66cc = akan menampilkan warna pink.

Bekerja dengan Tabel

Salah satu corak HTML yang unik yaitu kemampuannya menciptakan tabel. Developer dengan
mudah mengkonversi data yang diperlukan ke dalam suatu format menggunakan tag <TABEL>,
<TR>, <TH> dan <TD>.Pertama, kita perlu menciptakan suatu judul penggunaan tag <TH> dan kemudian baris untuk menciptakan satu persatu dengan menerapkan tag <TR>
misalnya:

Listing 15

Di sini, tiga baris dan dua kolom dibuat.
Kita dapat menerapkan beberapa modifikasi kode diatas dengan menerapkan atribut
berikut.

1. Border: mengUbah garis tepi dari tabel. Default border 1.
2. bgcolor: mengubah warna latar belakang dari tabel.
3. align: Baris tabel untuk left, center, right. Default align left.
4. Cellpadding: menandai ruang;spasi antar isi dan perbatasan dari sel.
5. Cellspacing: menandai ruang;spasi antar dua sel.

Atribut Bgcolor dan baris dapat digunakan untuk tag <TR> juga. Sebagai contoh,
jika kita menerapkan bgcolor seperti <TR bgcolor= “yellow”>, hanya warna
latar belakang dari baris yang akan diubah sedangkan jika kita menerapkannya dalam
tag TABEL,tabel akan jadi warna kuning.

Bekerja dengan Frames

Kita dapat membagi jendela browser baru ke dalam dua atau lebih dengan membingkai.
Kita dapat menciptakan jumlah frame yang kita perlukan. itu diciptakan menggunaan
tag <FRAMESET>. tag ini membantu kita untuk menetapkan divisi, baris (ROWS Atribut)
atau kolom (COLS Atribut) dari WINDOWS. Dalam rangka membuat frame,
kita perlu mempunyai sedikitnya dua file html. Alur file ini ditetapkan penggunaan
<FRAME> src ditunjukkan oleh listing di bawah:

Listing 16

Diatas diciptakan suatu frame baris. First.Html file menduduki yang pertama 10%
dan ruang sisanya akan diduduki oleh second.html file. Ingat-Ingatlah jika
kita mencoba untuk memasukkan tag <BODY>, frame tidak akan nampak pada layar.

menggunakan Atribut dengan tag Frameset

1. Cols: Untuk membagi jendela ke dalam kolom.
2. Bordercolor: mengUbah batas mewarnai dari batas bingkai.
3. Frameborder: Nilai-Nilai 0 atau 1. batasan bingkai akan jadi tak kelihatan
jika kita memilih 0. Atribut ini diterapkan pada mayoritas lokasi untuk
menunjukkan diri agar sempurna

menggunakan Atribut dengan tag frame

1. noresize: penetapan atribut, perbatasan bingkai tidak akan resizable.
Para pemakai tidak bisa melihat ukuran windows dgn menggunakan mouse.

2. Scrolling: Nilai Ya/Tidak. Jika Tidak,scrollbars tidak akan nampak.
Dengan tidak adanya,scrollbars akan terlihat. Jika isi lebih sedikit, kita
dapat menerapkan atribut ini

Mengedepan Pemakaian Frame

Salah satu dari mengedepan pemakaian frame Yang bersarang. Disini, dua baris
diciptakan dan frame dibagi menjadi dua kolom. Seperti ini kita terapkan dimanapun
jumlah bingkai, akan menyajikan masing-masing bingkai seperti itu dapat
mengakomodasi file relevan menggunakan HTML. Bagaimanapun, merekomendasikan
membatasi divisi frame sedemikian sehingga halaman web terlihat rapi dan
lebih mudah untuk navigasi. Cobalah kode di bawah:

Listing 17

Didalam kode di atas, suatu baris frame diciptakan dengan porsi sama dan baris
yang kedua adalah dibagi menjadi two-column frame. Jadi pastikan untuk membuat
tiga file html sebelumnya untuk mengamati keluaran. Cara lainnya, kita akan
beritahu kesalahan.

Menggunakan Forms, Text, Buttons, and Combo Box

Hampir pada semua Halaman web form digunakan secara luas. web site mengumpulkan
umpan balik informasi, detil pendaftaran melalui form ini. Jika kita sudah pernah
mendatangi halaman web gratisan,free email dari yahoo, hotmail dll kita mungkin
sadar dan terbiasa dengan form. Mereka menerapkan penggunaan tag <FORM> </ FORM>.
Tag ini menerima satu atribut penting yakni tindakan, yang mana digunakan untuk
menetapkan alur untuk tindakan yang ditetapkan itu. HTML sebagian besar
terdiri dari berbagai unsur form, yang ditetapkan tag <INPUT>.

Teks Field

Unsur ini digunakan untuk teks seperti usernames dan lain lain. atribut utama adalah
type (value= teks), size (value= “berupa angka”), Maxlength (value= “berupa angka”).
Didalam kode dibawah, seorang dapat memasukkan 30 karakter pada field yang ada.

Listing 18

Tombol

Salah satu dari unsur form yang paling utama adalah tombol. Tombol melayani bagian
integral didalam suatu form HTML.Sebagian besar digunakan untuk mengambil tindakan.
Ada dua jenis tombol, Submit dan Reset. Tombol submit membawa keseluruhan data form pada server sedang tombol reset membersihkan semua masukan
sebelumnya. atribut Yang penting adalah type (value= Submit or Reset), Nilai (value=
“OK atau cancel..yang penting teks”). Untuk menciptakan suatu botton “klik disini”,
kode ditunjukkan seperti di bawah:

Listing 19

Combo box

Kotak ini memungkinkan kita untuk mengambil suatu item dari satu set nilai.
Diterapkan penggunaannya dengan TAG <SELECT> seperti di bawah:

Listing 20

<SELECT name = “s1″>
<OPTION>India
<OPTION>Indonesia
<OPTION>Malaysia
</SELECT>

Kode diatas menciptakan daftar 3 negara. Bagaimanapun, seperti dikatakan sebelumnya
para pemakai dapat memilih salah satu item. Kita dapat mengubah dengan menerapkan suatu
atribut nama seperti ditunjukkan di bawah:
Listing 21

<SELECT name = “s1″ multiple>
<OPTION>India
<OPTION>USA
<OPTION>UK
</SELECT>

checkbox

checkbox memungkinkan kita untuk memilih daftar materi. Sebagai contoh, kita boleh
memilih kegemaran kita menggunakan box ini. Suatu tanda nampak di dalam box. Jika kita
memeriksa box, tanda chek akan diperlihatkan. Lihatlah kode di bawah:

Listing 22

Pilih bahasa pemrograman:
<input type = “checkbox” name = “t1″ checked>Java
<input type = “checkbox” name = “t2″>C++
<input type = “checkbox” name = “t3″>Oracle
<input type = “checkbox” name = “t4″>C-Sharp

Dengan default, Java akan dicek. Pesan atribut yang dicek pada garis menyangkut kode
yang kedua .

RadioButton

Dengan radio button, kita dapat memilih hanya satu item. Tetapi dengan cek box, kita
dapat memilih manapun jumlah materi. Sebagai contoh, kita memilih jenis kelamin
(pria maupun wanita) penggunaan box ini ditunjukkan di bawah.

Listing 23

Jenis Kelamin:
<input type = “radio” name = “r1″>Pria
<input type = “radio” name = “r1″>Wanita

Kita perlu memberi nama yang sama untuk nama atribut. Cara lainnya, kita tidak akan
mendapatkan kemampuan radio button.

Diatas potongan kode dapat dikombinasikan ke dalam satu halaman tunggal ditunjukkan
didalam Listing 24

<HTML>
<HEAD><TITLE>Form HTML </TITLE></HEAD>
<BODY>
<FORM action = “mailto: yourname@server.com” method = “post”>
Masukkan nama anda: <input type = “text” name = “t1″
maxlength = 20 size = 25>
Password: <input type = “password” name = “p1″>
Pilih Bahasa Pemrograman:
<input type = “checkbox” name = “t1″ checked>Java
<input type = “checkbox” name = “t2″ checked>C++
<input type = “checkbox” name = “t3″ checked>Oracle
<input type = “checkbox” name = “t4″ checked>C-Sharp
Jenis Kelamin:
<input type = “radio” name = “r1″>Pria
<input type = “radio” name = “r1″>Wanita
<CENTER><input type = “submit” name = “s1″>
<input type = “reset” name = res1″></CENTER>
<SELECT name = “s1″>
<OPTION>India
<OPTION>Indonesia
<OPTION>Malaysia
</SELECT>

Kode diatas menyampaikan informasi yang dimasukkan oleh pemakai kepada alamat email
yang ditetapkan didalam atribut tag Form. sintak Pesan mailto didalam tag form

Tag2 Tambahan
Pengaturan Teks

Kita dapat menggunakan tag <PRE></PRE> ke text form mewakili Teks Preformatted. Apapun juga yang kita masukkan pada tag ini akan diperlihatkan seperti halnya pada browser. Tag ini digunakan untuk penulisan programming kode.

Listing 25

This text will display as such
and is used for displaying codes

Teks Berjalan

Teks dan Gambar dapat dipindahkan dengan bantuan tag <MARQUEE> </MARQUEE>.Tag ini menerima banyak atribut ditunjukkan di bawah ini:

Bgcolor

Atribut ini mengubah warna latar belakang dari teks yang bergerakkan maupun obyek.
Nilai-Nilai dapat berwarna merah, biru atau dalam form Hexadecimal.

Behavior (Perilaku)

Atribut ini berubah arah dari objek bergerak. Nilai-Nilainya dapat bernilai left,
right, top dan bottom.

Scrolldelay
menandai adanya kecepatan dari gerakkan obyek. Yang secara khas, nilainya
ditetapkan didalam Seperseribu detik. Ingatlah bahwa 1 detik/second sama dengan 1000
seperseribu detik.

Loop (Pengulangan)
Kita dapat menetapkan banyaknya, obyek atau teks tertentu perlu pindah/bergerak dengan
bantuan dari atribut ini. Suatu nilai -1 menandai adanya gerakkan teks.

Listing 27

Using Address tag
jika kita ingin memberi informasi kontak pada suatu halaman web, kita dapat
menggunakan
tag <ADDRESS></ADDRESS>. Menampilkan teks didalamnya. Karenanya, tidak ada yang
dibutuhkan untuk form teks secara terpisah

Listing 28

<ADDRESS>Microsoft Inc, Washington, USA </ADDRESS>

Tag <SUB>

Tag ini mewakili tulisan di bawah garis. Kemampuan dasar tag ini bahwa yang lebih
rendah tag antar teks.

Listing 29

H <SUB>2 </SUB>O

Tag <SUP>

Tag ini mewakili huruf yang ditulis di atas dan menaikkan teks antar tag sebagai
ditunjukkan dalam Listing 30.

Listing 30

2 <SUP>3 </SUP> = 8

Font
Kita dapat merubah penampilan dari teks menggunakan tag . Atributnya adalah
face, size dan color. Atribut fece menerima font seperti Arial, Courier, Verdana dan lain
lain. Size menerima nilai-nilai dari 1 sampai 7 sedang color menetapkan warna font.

Listing 31

<FONT face = "Verdana" size = "3" color = "blue">
Wow, warna teksnya jadi biru
</FONT>

..Yah sampai disini dulu tentang tag-tag dasar pada HTML, nanti kita lanjutkan dengan artikel yang lebih menarik dan gampang, bahkan untuk para pemula..

Sampai jumpa

Jumat, 25 Januari 2013