Praktikum4. Pengaturan Gambar & Tabel
-
Upload
ali-muqorrobien -
Category
Documents
-
view
36 -
download
7
description
Transcript of Praktikum4. Pengaturan Gambar & Tabel
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