sumber : https://www.rumahweb.com/journal/dasar-dasar-html-ii/
Sekarang kita mulai bagian kedua dari dasar-dasar 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
<IMG src = “gambar.gif”>
Kita juga dapat menetapkan atribut seperti widht dan heiht 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
<IMG src = “gambar.gif” alt = “Ini gambar lhooâ€>
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
<BODY bgcolor = “red”>
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
<BODY background = “gambar.gif”>
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
<TABLE>
<TR><TH>Sl No:</TH><TH>Nama </TH>
<TR><TD>1</TD><TD> Saya </TD>
<TR><TD>2</TD><TD>Aku</TD>
<TR><TD>3</TD><TD>Me</TD>
</TABLE>
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
<FRAMESET rows = “10%,*”>
<FRAME src = “first.ht
<FRAME src = “second.html”>
<FRAMESET>
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
<FRAMESET rows = “50%,*”>
<FRAME src = “first.html”>
<FRAMESET cols = “20%,*”>
<FRAME src = “second.htmlâ€>
<FRAME src = “third.html”>
<FRAMESET>
<FRAMESET>
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
<INPUT type = “text†size = “30â€>
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
<INPUT type = “submit†value = “Klik disiniâ€>
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>
Komentar Terbaru