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>

Tugas Desain Web Posting III

Perintah Dasar HTML

Ada sebegitu banyak perintah-perintah dalam HTML, namun yang akan dibahas kali ini adalah perintah umum yang
biasa digunakan antara lain :
Hx : Heading dimana x adalah level heading 1 sampai 6. Heading merupakan perkumpulan kata yang menjadi judul atau sub-judul dalam dokumen HTML dengan berbagai ukuran yang berbeda.
Contoh : H1 Belajar HTML /H1
P : Paragraph, membuat teks ditempatkan pada garis baru.
BR : Break, membuat baris baru.
HR : Horizontal Rule, untuk membuat garis horizontal sepanjang jendela browser.
B : Bold, untuk menebalkan teks.
I : Italic, untuk menampilkan teks miring.
U :Underline, untuk membuat teks digarisbawahi.
STRONG : Strong, untuk memberikan penekanan yang kuat terhadap sebuah teks.
PRE : Preformated, untuk menampilkan dokumen HTML tepat seperti yang
dituliskan.
SIZE : Size, menyatakan suatu ukuran. Contoh : HR SIZE=5.
ALIGN: Align, untuk membuat perataan, terdiri dari Center untuk rata tengah,
Left untuk rata kiri dan RIGHT untuk rata kanan.
Contoh : P ALIGN=CENTER.
BLOCKQUOTE : Blockquote, untuk membuat teks tampil menjorok ke dalam.
A href=... : A Hypertext Reference, digunakan untuk membuat sebuah link. Contoh : A

Selain perintah di atas, terdapat juga perintah lain untuk memperindah tampilan, seperti perintah background, bgcolor, color, image maupun image map. Perintah background digunakan untuk membuat sebuah gambar menjadi latar belakang. Sedangkan perintah bgcolor dapat digunakan pada body maupun font yang berfungsi untuk merubah warna background. Contohnya :
BODY background="gambar_background.jpg"
BODY bgcolor="#000000" , dimana tanda #000000 merupakan kode RGB untuk warna hitam
FONT face="comic sans ms" color="#FFFFFF" , dimana face digunakan untuk menampilkan jenis font, dan color untuk menampilkan warna pada teks.
IMG src="gambar.jpg" dimana IMG SRC (Image Source) merupakan perintah untuk menampilkan gambar.

Untuk mengatur posisi gambar, dapat digunakan perintah ALIGN, yang terdiri dari Top, Middle, Bottom, Left, Center dan Right. Contoh :
IMG src="gambar.jpg" ALIGN=left WIDTH=200 HEIGHT=150 ALT="Gambar"

Perintah ALT (Alternative) digunakan untuk menampilkan teks pengganti untuk gambar. Karena bisa saja gambar tersebut tidak dapat ditampilkan pada browser yang non-grafis.

Tugas Desain Web Posting I

Pembuatan dokument WEB dengan HTML. Dokumen WEB dapat tersaji dengan cepat ke banyak pembaca di seluruh dunia sekaligus. HTML mudah melakukan kontrol terhadap tampilan halaman WEB baik berupa teks.
HTML merupakan singkatan dari Hypertex Markup Language. HTML digunakan untuk membangun halaman WEB. Sekalipun banyak orang menyebutnya sebagai bahasa pemrograman, hal ini terlihat dari namanya, HTML adalah suatu bahasa Markup. HTML digunakan untuk melakukan mark-up (penandaan) terhadap sebuah dokumen teks. Tanda tersebut digunakan untukmenentukan format atau style dari teks yang ditandai
halaman web dibangun oleh kode-kode HTML yang disebut juga dengan tag-tag HTML
Tag yang harus di miliki oleh halaman WEB adalah:

HTML>
HEAD>
TITLE>Halaman WEB pertama saya/TITLE>
/HEAD>
BODY>
Halo Dunia!
/BODY>
/HTML>

Di antara kedua tag tadi adalah tempat memasukkan apa saja ke dalam halaman web.
Pada bagian HEAD, kita memberikan data mengenai dokumen kita. Tag penutup selalu ada pada halaman tersebut.
Paragraph/Baris Baru:
P>BR>

Contoh:

HTML>
HEAD>
TITLE>Halaman WEB pertama saya/TITLE>
/HEAD>
BODY>
Halo Dunia!p>
Halo semuanyabr>
Ini adalah halaman WEB saya. br>
Saya sedang belajar membuat halaman WEB dengan kode HTMLp>
Salam!
/BODY>
/HTML>