Pengaturan Gambar dan Tabel pada HTMLEly Setyo Astuti, ST.,MT

Tujuan Memahami dan membuat pengaturan

gambar pada html. Memahami dan membuat pengaturan

tabel pada html.

Pengaturan gambar1. Mengumpulkan dan Menyimpan

gambar: Mencari gambar (jpg, jpeg, gif, atau

png). Buat folder gambar atau image di dalam

folder yang sama dengan letak file index.html berada.

Simpan gambar dalam folder tersebut.

Pengaturan gambar2. Memasukkan gambar Buat file HTML, mis: kuetradisional.html Dibawah judul, tambahkan tag:

<img src=“gambar/kue.jpeg”> folder nama file gambar

Simpan file HTML Buka web browser.

Pengaturan gambar Untuk mengatur tampilan gambar (alignment),

dapat kita gunakan atribut “align” yang bisa diisi nilai top, center dan bottom.

Agar gambar ditampilkan tanpa teks, dan kita ingin menampilkannya di tengah paragraf, seperti umumnya logo perusahaan, maka kita dapat menggunakan atribut align pada tag <P> untuk membuat agar gambarnya diletakkan di tengah.

Contoh: <P ALIGN=”center”><IMG SRC=”nama

image”></P>

Info: Memanggil file di folder lainwww

/gambar

/folder 1

/folder 2

Gambar1.jpg

index2.html

Index.html

Jika akan memanggil nama file Gambar1. jpg dari file index.html, cara memanggilnya adalah sebagai berikut:file: gambar/Gambar1.jpg

Jika akan memanggil dari file index2.html, cara memanggilnya adalah:file: ../gambar/Gambar1.jpg../ naik folder

Tag Memasukkan Gambar <img>

Untuk memasukkan gambar.Atribut: Src mencari posisi gambar Align =“top”; “middle”; “bottom”; “left”; “right” Border memberi bingkai pada gambar Alt =“(keterangan gambar)” untuk teks

alternatif; Height tinggi gambar Width lebar gambar Vspace vertikal Hspacehorisontal

Pengaturan tabel Tabel digunakan untuk menyajikan data

dalam bentuk kolom dan baris. Pada tabel berikut, kolom pertama

berisi informasi header, setiap baris menjelaskan sebuah tag tabel HTML dan setiap sel berisi sebuah pasangan tag atau penjelasan dari fungsi tag.

Elemen-elemen tabel ditunjukkan pada tabel dibawah ini.

Elemen Penjelasan<TABLE>…</TABLE> jika atribut border dituliskan, maka

browser akan menampilkan tabel dengan border.

<CAPTION>…</CAPTION> Judul tabel. Default ditengah pada bagian paling atas tabel. Atributalign=”bottom” dapat digunakan untuk menempatkan judul padabagian bawah tabel.Catatan: judul dapat diberi tag apa saja

<TR>...</TR> Membuat baris tabel dalam tabel. Dapat juga mendefinisikan atribut untuk seluruh baris: align(left, center, right)dan/atau valign (top,middle,bottom).

<TH>…</TH> Mendefiniskan sel header tabel. Secara default teks dalam sel iniditebalkan dan ditampilkan di tengah.

Elemen-elemen tabel ditunjukkan pada tabel dibawah ini.

<TD>…</TD> Mendefinisikan sebuah sel data tabel. Secara default teks dalam selini ditampilkan rata kiri,dan ditengah secara vertikal. Sel data table dapat berisi atribut untuk mendefinisikan karakteristik dari sel danisinya.

Align={left|center|right} Alignment horizontal untuk sel

Valign={top|middle|bottom}

Definisi alignment vertical dalam sel

Colspan=n Jumlah n kolom sel diperlebar

Rowspan=n Jumlah n baris sel diperbesar

Nowrap Matikan wrapping dalam sel

Praktikum1: pengaturan gambar

Hasil

Praktikum2: pengaturan gambar

Hasil

Praktikum3: pengaturan tabel

Praktikum3: pengaturan tabel(2)

Hasil

Praktikum4: pengaturan tabel

Praktikum4: pengaturan tabel(2)

Hasil

Selamat mengerjakan