Senin, 16 September 2013

Tutorial Menggunakan Tag-Tag Yang Tersedia Di HTML 2



1.       Menampilkan gambar pada dokumen HTML
Gambar merupakan suatu media untuk menambah daya tarik dokumemn anda, selain itu gambar juga digunakan untuk menjelaskan suatu informasi.tipe / format gambar banyak sekali namun tidak semua tipe dapat ditampilkan pada dokumen HTML, berikut adalah beberrapa format /tipe yang dapat dimunculkan pada dokumen HTML :

Jenis gambar
Ekstensi
Kepanjangan Ekstensi
JPEG
.jpg/.jpeg
Joint photographic expert group
TIFF/TIF
.tif
Tagged Image File Format
PNG
.png
Portable Network Graphics
GIF
.gif
Graphis  Interchage Format

Berikut adalah kode yang digunakan untuk memunculkan gambar pada dokumen HTML :

Ini adalah hasil dari kode diatas :
 

A.      Background gambar
Selain menggunaka warma background dokumen HTML jga bias menggunakan gambar.

Berikut adalah kode yang dapat mengubah gambar menjadi background :

Ini adalah hasil dari kode di atas :


B.      Atribut border
Atribut ini digunakan untuk menampilkan bingkai pada sebuah gambar.

Berikut kode yang digunakan untuk membuat sebuah bingkai pada gambar :

Ini adalah hasil dari kode diatas :


C.      Pengaturan teks terhadap gambar
Atribut yang digunakan untuk pengaturan teks terhadap gambar adalah align.Berikut adalah nilai yang terdapat pada atribuy align :
nama
fungsi
BOTTOM
Teks terletak pada bagian bawah
MIDDLE
Teks terletak pada bagian tengah
TOP
Teks terletak pada bagian atas

Untuk lebih jelas silahkan lihat contoh kode dibawah ini :

Ini adalah hasil dari kode di atas :


D.      Teks alternative
Gambar yang telah dimunculkan ada kemungkinan tedak bias ditampilkan atau terlihat pada kondisi tertuntu, misalnya browser yang digunakan  tidak mendukung adanya gambar.Untuk mengatasi hal seperti ini, dapat diberikan teks alternative sebagai pengganti gambar.Caranya adalah dengan memberikan atribut  ALT pada tag <IMG>. Sebagai contoh, perhatikan kode berikut :

Ini adalah hasil dari kode diatas :

E.       Mengatur ukuran gambar
Untuk mengatur ukuran gambar kita dapat menggunkan atribut dibawah ini :
1.HEIGHT untuk mangatur tinggi gambar
2.WIDTH untuk mengatur lebar gambar
Untuk lebih jelas silahkan lihat kode dibawah ini :

Berikut adalah hasil dari kode diatas :

F.       Mengatur ruang gambar
Atribut yang digunakan adalah VCPACE dan HSPACE. Atribut ini digunakan untuk mengatur jarak gambar terhadp teks baik secara vertical maupun horizontal.
Lihat gambar dibawah ini untuk lebih jelas :


Ini adalah hasil kodenya :


G.     Gambar animasi
Selain menampilkan gambar dokumen HTML juga dapat menampilkan animasi.
Agar lebih jelas silahkan lihat gambar dibawah ini :

Ini adalah hasil dari kode diatas :


1.       Membuat tabel di dokumen HTML
Kemarin kita talah membahas sedikit mengenau tag tabel.Nah…, pada kesempatan kali ini saya akan membahas lebih jauh lagi mengenai tag tabel.Tabel berguna untuk mempermudah seseorang dalam membaca suatu data.
Tag
catatan
<TABLE>….</TABLE>
Mengawali dan mengakhiri sebuah tabel
<CAPTION>…</CAPTION>
Menemtukan judul tabel
<TD>…</TD>
Membuat sebuah sel data
<TH>…</TH>
Membuat judul kolom
<TR>…</TR>
Membuat sebuah baris dalam tabel
 



Berikut adalah contoh kode untuk membuat tabel :
A.      Baris pada tabel
Digunakan untuk menentukan jumlah ketebalan garis yang diinginkan.Berikut adalah contoh penggunaan kode border :




B.      Judul tabel
Untuk membuat judul tabel kita dapat menggunakan tag <caption>, agar lebih jelas mari kita lihat contoh kode dibawah ini :



C.      Warna latar belakang
Agar lebih menarik tabel bisa ditambahkan warna pada latar belakangnya,agar lebih jelas silahkan lihat contoh kode dibawah ini :
 


 selain dapat mewarnai seluruh tabel kita juga dapat mewarnai sebagian dari abel seperti pada gambar berikut ini :




D.      Pengaturan taks pada tabel
Untuk mengatur pelatakan teks di dalam sebuah sel, kita dapat menggunakan atribut VALIGN yang dapat diletakan pada tag <td>, untuk lebih jelas silahkan lihat kode dibawah ini :


E.       Penggabungan sel
Sama seperti di ms.excel kolom disini dapat juga digabungkan dengan menggunakan atribut ROWSPAN dan COLSPAN, untuk lebih jelas silahkna lihat contoh kode dibawah ini :
1.colspan :


2.rowspan


F.       Alignment tabel
Digunakan untuk perataan teks dalam sebuah tabel untuk lebih jelas lihat kode pada gambar dibawah ini :



G.     Penggaturan sel pada tabel
Untuk mengatur tinggi sel pada sebuah tabel kita dapat menggunakan atribut HEIGHT sedangkan untuk lebar kita dapat menggunakan atribut WIDTH,agar lebih jelas silahkan lihat gambar dibawah ini :


selain untuk mengatur tinggi sel keseluruhan tabel,kita juga dapat mengatur tinggi sel pada kolom tertentu saja ,seperti pada gambar dibawah ini :


H.      Pengaturan jarak tabel
Untuk mengatur jarak teks kita dapat menggunakan atribut CELLPADDING dan CELLSPACING, untuk lebih jelas silahkan lihat gambar dibawah ini :
 



I.        Tabel dan gambar
Kita juga dapat memasukkan gambar ke dalam tabel,untuk lebih jelas mari kita lihat gambar dibawah ini :







3.Membuat Hyperlink
Dikatakan hypertext apabila dalam sebuah tampilan halaman web terdapat hyperlink. Situs dalam internet hamper seluruhnya menggunakan hyperlink. Hyperlink sifatnya ada dua jenis yaitu :berpindah ke halaman lain dan tidak berpindah ke halaman yang lain .Tag yang digunakan untuk pelajaran kali ini adalah tag <A> …</A> atau yang disebut tag jangkar (tag anchor).untuk lebih jelas coba lihat gambar dibawah ini :


hasil apabila lihat tag di klik :

A.      Link  ke situs web lain
Seperti yang telah dibahas diatas bahwa hyperlink tidak hanya dapat berpindah dalam sebuah halaman melainkan juga dapat ke halaman web lainnya. Untuk lebih jelas sihlakan lihat gambar di bawah ini :


B.      Warna hyperlink
Warna pada tulisan hyperlink biasanya biru, namun warna tersebut dapat diganti sesuai denggan keinginan kita,untuk lebih jelas silahkan lihat gambar dibawah :


Selain menggunakan link untuk member warna ,terdapat pula dua atribut lagi yang digunakan untuk memberikan warna pada hyperlink, yaitu ;
1.ALINK : digunakan untuk menentukan link aktif,yaitu link yang telah diklik pemakai,tetapi halamannya belum selesai di buka
2.VLINK : digunakan untuk menentukan warna link yang halaman web terkait atau yang delink dikunjungi
Untuk lebih jelas silahkan lihat gambar dibawah :



C.      Menggunakan bookmark
Jika dalam sebuah halaman yang berisi dokumen yang terlalu panjang , kita dapat menggunakan bookmark,untuk lebih jelas menggenai hal ini silahkan lihat gambar dibawah ini :





D.      Link dengan gambar
Link tidak hanya data berupa teks tetapa dapat juga berisis gambar, untuk lebih jelas silahkan lihat gambar dibawah ini :


E.       Membuka jendela baru
Variasa lain dari model hyperlink salah satunya adalah apabila kita mengklik suatu link, dokumen utama tidak akan hilang melainkan akan terbuka jendela lain yang menampilkan informasi suatu halaman, untuk lebih jelas silahkan lihat gambar dibawah ini :







 

Tidak ada komentar:

Posting Komentar