Rabu, 18 Juni 2008

Tugas Desain Web Posting. II

*Membuat Font, Table,dan Warna Font

Speksifikasi dari Huruf (Font) : FONT> tag ini menerangkan bahwa sebuah tulisan mempunyai beberapa pelengkap.
Pelengkapnya adalah: Ukuran (SIZE), FACE, dan Warna (COLOR)

Ukuran (SIZE): Menerangkan ukuran dari tulisan antara angka 1-7, tergantung kepada . angka 1 adalah yang terkecil dan angka 7 adalah yang terbesar.

FACE: Menerangkan huruf aktual yang Anda mau tampilkan jika huruf ini terinstal pada komputer pengguna. Anda diperbolehkan mempunyai 3 pilihan huruf, dengan dibatasi oleh koma. Semua batasan (spaces) pada nama huruf harus diganti dengan "garis bawah" ( _ ). Huruf yang Anda pilih harus ada pada komputer si pengunjung. Jika tidak, maka komputer akan lanjut ke pilihan huruf yang kedua (jika ada). Jika tidak ada huruf yang ditemukan, maka huruf yang menjadi default yang akan ditampilkan oleh komputer. Untuk menjamin gabungan tulisan itu agar terlihat adalah merubahnya menjadi grafik. Ini adalah huruf-huruf yang populer FONT FACE="Helvetia, Times New Roman, Arial>

Warna (COLOR): Menerangkan warna dari huruf dengan namanya atau dengan angka RGB/HEX.


Contoh: FONT SIZE="4" FACE="Arial" COLOR="Red"> Tulisan ini akan berbeda dengan yang lain. /FONT> Kode tersebut akan terlihat seperti ini: Tulisan ini akan berbeda dengan yang lainnya.

Huruf Dasar (Base Font): Tag ini ditempatkan disebelah kanan bawah dari BODY tag Anda dan tag ini menerangkan "default text" yang akan digunakan pada seluruh bagian dari halaman tersebut. Perlengkapan yang jadi satu bagian dari FONT tag dapat diterima. FONT tag tersebut akan me-overwrite setting dari BASEFONT.
Contoh: BASEFONT SIZE=2 FACE="Arial" COLOR="red">

Font Tag lainnya:

Catatan: Semua tag di bawah ini juga memerlukan sebuah tag penutup.

B> Tulisan Tebal
I> Tulisan Italic
U> Underscore
S> Strong
S> Strikeout Strikeout - menggambar sebuah garis sepanjang tulisan
PRE> Preformatted Text
SUP> Renders text sebagai superscript
SUB> Renders test sebagai sub script


Membuat Tabel

Tabel adalah tag yang sangat penting dalam bahasa HTML. Untuk menjadi seorang web designer yang efektif Anda harus mengetahui dan mengerti bagaimana cara kerja dari sebuah tabel.

Ada tiga elemen pada tabel. tag dari TABLE> tag dari row table TR> dan tag dari sel tabel TD>. Setiap Anda menambahkan sebuah tag TR>, ini berarti Anda menambah 1 baris (row) ke bawah terhadap baris (row) berikutnya. Setiap Anda menambahkan sebuah tag TD>, berarti Anda menambah sel baru disamping baris (row) yang sebelumnya. Elemen utama ada di bawah ini, bersama dengan pelengkapnya yang umum lainnya.

TABLE> Pelengkapnya:

* align - meratakan tabel ke kiri, ke tengah atau ke kanan.
* bgcolor - menunjukkan warna background untuk semua tabel.
* border - menunjukkan lebarnya batas (border) dalam satuan pixel.
* cellpadding - luas yang tak terlihat diantara isi sel dan aktual dinding sel.
* cellspacing - luas yang aktual (dalam pixel) diantara dua sel.
* width - menunjukkan luas dari tabel dalam satuan pixel atau persentase

Contoh: TABLE align="center" bgcolor="blue" border="2" cellpadding="5" cellspacing="2" width="90%">

TR> Pelengkapnya:

* align - meratakan isi dari baris (row) yaitu ke kiri, tengah atau ke kanan.
* bgcolor - menunjukkan warna background dari baris (row).
* valign - meratakan secara vertikal isi dari baris (row) ke atas, ke tengah atau ke bawah.

Contoh: TR align="right" bgcolor="red" valign=top>

TD> Pelengkapnya:

* align - meratakan isi dari row yaitu ke kiri, tengah atau ke kanan.
* background - tempat dari gambar background di dalam sel.
* bgcolor - menunjukkan warna background untuk semua tabel.
* height - menunjukkan tinggi dari sel dalam satuan pixel.
* nowrap - perlengkapan untuk mengunci isi yang kita buat agar tetap pada garis yang sama.
* valign - meratakan secara vertikal isi dari baris (row) ke atas, ke tengah atau ke bawah.


Latihan: Membuat Tabel 3 baris 4 kolom
TABLE width="75%" border=1>
TR>
TD>/TD>
TD>/TD>
TD>/TD>
TD>/TD>
/TR>
TR>
TD>/TD>
TD>/TD>
TD>/TD>
TD>/TD>
/TR>
TR>
TD>/TD>
TD>/TD>
TD>/TD>
TD>/TD>
/TR>
/TABLE>

Tidak ada komentar: