Asiamaya.com / Bali Update

asiamaya.com - optimized for cell phone and PC browsing

MAIN NAVIGATION PAGE

PENGENALAN HTML

Apa itu HTML

Sebelum kita mengenal apa itu HTML ada baiknya kita mengetahui dulu apa itu HTTP (hypertext transer protokol). HTTP merupakan protokol yang digunakan untuk mentransfer data atau dokumen antara web server ke web browser (Netscape, Internet Explorer dll).
Dan protokol ini sewaktu melakukan transfer, dokumen atau data webnya ditulis atau dengan menggunakan format HTML. HTML sendiri adalah singkatan dari "hypertext markup language". Disebut dengan markup language karena HTML berfungsi untuk memperindah file tulisan (text) biasa untuk dapat dilihat pada web browser-web browser yang ada.

Membuat Halaman Web

Mari kita mulai untuk membuat sebuah halaman web untuk yang pertama kalinya. Untuk membuatnya benar-benar sangat gampang, untuk itu kita akan menghilangkan beberapa hal teknis yang tidak perlu diketahui pada saat ini.
Panduan ini akan membimbing kita untuk membuat sebuah halaman web yang sederhana yang mengandung tulisan/text, gambar, email, dan link ke beberapa halaman web lain. Yang kita butuhkan adalah sebuah program text editor yang sederhana seperti NotePad, WordPad, MicrosoftWord, WordPerfect, atau program lainnya di dalam PC Anda untuk membuat tulisan/text.
Pertama, buka dokumen HTML Anda dengan membuat tag seperti ini.

<HTML>
dan kita tutup lagi dengan tag ini
</HTML>

Anda dapat menulisnya dengan hurup besar (kapital) atau dengan hurup yang kecil, tapi Saya akan menulisnya dengan hurup besar supaya gampang dibacanya.
Belum terlihat hasilnya; kita baru memberitahu pada browser (Netscape, Internet Explorer, dll.) untuk membaca dokumen ini sebagai dokumen HTML. Di antara kedua tag tadi adalah tempat dimana kita akan memasukkan apa saja ke dalam halaman web Anda.
Selanjutnya, kita membuat bagian HEAD. Dokumen Anda akan terlihat seperti ini.

<HTML>
<HEAD>
<TITLE>Halaman Web Saya </TITLE>
</HEAD>
</HTML>

Pada bagian HEAD, kita memberikan data mengenai dokumen kita. Anda akan melihat . Ini adalah caranya bagaimana kita membuka dan menutup sebuah HTML tag. Tag penutup selalu ada pada halaman tersebut, Harus diingat.

Font Face

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, Helvetica" 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
<TT>Typewriter
<S> Strikeout Strikeout - menggambar sebuah garis sepanjang tulisan
<PRE> Preformatted Text
<DFN> Definisi
<BLINK> Blinking Text (sangat mengganggu)
<ADDRESS> Biasanya Italic
<CITE> Digunakan untuk quoting text
<CODE> Monospaced font (berguna jika dokumen Anda mengandung kode HTML yang aktual)
<SAMP>Monospaced font (berguna jika dokumen Anda mengandung kode HTML yang aktual)
<KBD> Monospaced font (berguna jika dokumen Anda mengandung kode HTML yang aktual)
<BIG> Membuat tulisan satu tingkat lebih besar
<SMALL> Membuat tulisan satu tingkat lebih kecil
<SUP> Renders text sebagai superscript
<SUB> Renders test sebagai sub script
<ABBREV> Abbreviations
<ACRONYM> Denotes acronyms
<PERSON> Denotes a name for indexing purposes
<Q> Denotes a short inline quotation
<VAR> Denotes a variable name, usually rendered in italics

Column-Style Look

Begini cara membuatnya:

Letakkan tulisan Anda di dalam tag

<MULTICOL> dan </MULTICOL>.
Itu akan terlihat seperti ini <MULTICOL COLS=2 GUTTER=25 WIDTH=600> tulisan tulisan tulisan </MULTICOL>

COLS = menunjukkan jumlah kolom.

GUTTER = menunjukan angka dalam pixel mengenai luas antar kolom. Jika tidak menyebutkan, maka angka default yaitu 10 akan menjadi aktif.

WIDTH = menunjukan angka dalam pixel. Jika tidak menyebutkan, kolom akan menyesuaikan jaraknya dengan layar monitor pengunjung.

Angka 600 akan aman kepada para pengunjung yang menggunakan resolusi layar monitornya 640x480

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:

<TR> Pelengkapnya:

<TD> Pelengkapnya:

Membuat garis Horizontal dan garis Grafik

Beberapa orang membuat kesalahan seperti ini.

Garis tersebut bekerja pada layar 800x600 dan mereka meletakkan garis tersebut sehingga akan terlihat baik dan sempurna pada layar monitor mereka. Apa yang Anda lihat, garis diatas tersebut diatur lebarnya (WIDTH) pada angka 770. Tapi, jika kita melihat halaman ini pada layar 640x480, para pengunjung harus meng-scroll kekanan lagi, dimana hal ini sangatlah tidak nyaman dan merupakan desain yang jelek. Anda harus berhati-hati dalam menggunakan sebuah grafik garis. Lebarnya jangan lebih dari 600 pixel.
Menggunakan tag <HR> adalah sangat aman karena dapat di set ukurannya sesuai dengan resolusi dari layar. Garis di bawah ini tidak akan menyebabkan persoalan pada semua resolusi layar monitor. Di bawah ini adalah contoh yang sedrhana.


Ini ada beberapa cara untuk bermain dengannya. Disini ada beberapa contoh:

Membuat sebuah kotak

Meletakkan sebuah table

   

Bereksperimenlah sampai Anda mendapatkan yang Anda inginkan :)

SELAMAT MENCOBA



***

First of all, what tongkat ali is not.

This page: http://www.asiamaya.com/modul_pengajaran/modul_pengenalan_html.htm
Copyright © Dan Kardarron
333 Srinakarin Road
Nongbon
Bangkok, 10250
Thailand