DASAR
– DASAR HTML
A.
World
Wide Web
Internet
merupkan jaringan global yang menghubu ngkan suatu network dengan network
lainya di seluruh dunia, TCP/IP menjadi
protocol penghubung antara ja ringan-jaringan yang beragam di seluruh dunia
untuk dapat berkomunikasi.
World
Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan
paling populer. WWW bekerja merdasarkan pada tiga mekanisme berikut:
·
Protocol
standard aturan yang di gunakan untuk
berkomunikasi pada computer networking, Hypertext Transfer Protocol (HTTP) adalah
protocol untuk WWW.
·
Address WWW memiliki aturan
penamaan alamat web yaitu URL(Uniform Resource Locator) yang di gunakan sebagai
standard alamat internet.
·
HTML
digunakan untuk membuat document yang bisa di akses melalui web.
B.
Pengenalan
HTML
Hypertext
Markup Language merupkan standard bahasa
yang di gunakan untuk menampilkan document web, yang bisa anda lakukan dengan
HTML yaitu:
·
Mengontrol tampilan dari web page dan
contentnya.
·
Mempublikasikan document secara online
sehingga bisa di akses dari seluruh dunia.
·
Membuat online form yang bisa di gunakan
untuk menangani pendaftaran, transaksi secara online.
·
Menambahkan object-object seperti image,
audi, video dan juga java applet dalam
document HTML.
C.
Browser
dan Editor
Browser
Browser merupakan software yang di
install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML
menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer,
Netscape Navigator dan masih banyak yang lainya.
Editor
Program yang di gunakan untuk membuat
document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage,
Dreamweaver, Notepad.
D.
BASIC
TAG HTML
1.
Struktur
HTML Document
Document HTML bisa di bagi mejadi tiga
bagian utama:
HTML
Setiap document HTML harus di awali dan
di tutup dengan tag HTML
<HTML>
</HTML>
HEAD
Bagian header dari document HTML di apit
oleh tag <HEAD></HEAD> di dalam bagian ini biasanya dimuat tag
TITLE yang menampilkan judul dari halaman pada titlenya browser. Header juga
memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu
mengenai document HTML, anda bisa menentukan author name, keywords, dan lainyan pada tag META.
BODY
Document body di gunakan untuk
menampilkan text, image link dan semua yang akan di tampilkan pada web
page.
2.
Basic
HTML Element
Block Level
Element
Block level element yang sering di gunakan : Heading (H1 sampai H6) Paragraf (P) List Item(LI)
List item di gunakan untuk
mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan
(unordered list).
Ada
dua macam list yang bisa anda tambahkan ke document HTML:
a)
Unordered
List (Bullet)
b)
Ordered
List (Numbering)
CONTOH :
Tag
|
Attribute
|
Value
|
Description
|
<UL>
|
TYPE
|
SQUARE
DISC
CIRCLE
|
Bullet Kotak
Bullet Titik
Bullet
Lingkaran
|
Tag
|
Attribute
|
Value
|
Description
|
<OL>
|
TYPE
|
l i
A a
|
Upper Roman Lower Roman
Uppercase Lowercase
|
<OL>
|
START
|
n
|
Begin Number
|
Definition List
Definition List terdiri diapit oleh tag
<DL> … </DL> dan <DT> tag menentukan definition term serta
<DD> tag menentukan definition itu sendiri.
Horizontal
Rules(HR)
Horizontal Rule tag digunakan untuk
menggambar garis horizontal dalam document HTML
Attribute
|
Description
|
Position
|
Menentukan posisi dari HR, dengan
calue : center | right | left.
|
Width
|
Untuk menentukan panjang HR default
100%
|
Size
|
Untuk menentukan tebal dari HR dalam pixel
|
Noshad
|
Efek bayangan
|
3.
Pemformatan
Page Break
Tag <BR> di gunakan untuk memulai
baris ba ru pada document HTML, tag ini fungsinya mirip dengan carriage return.
Font
Dengan tag <FONT> anda bisa
menentukan form at tampilan font dalam document HTML seperti color, size, style
dan lainya.
Contoh
:
Attribute
|
Description
|
Color
|
Untuk menentukan
warna font, anda bisa menggunakan nama font atau jexadecimal (#000000 -
#ffffff)
|
Size
|
Untuk menentukan
ukuran dari font 1 - 7
|
face
|
Untuk menentukan
jenis font biasanya dalama satu list ada beberapa font dan akan di baca mulai
dari yang paling kiri.
|
Color
Color merupakan attribute yang bisa anda
tambahkan pada beberapa element seperti body, font, link dan lainya. Color di
bagi dalam tiga ke tegori warna primer yaitu
red, green dan blue. Masing-masing color didefinisikan da lam dua digit
hexadecimal number.
#RRGGBB
Hexadecimal
#FF0000
#00FF00
#0000FF
#000000
#FFFFFF
|
Color
Red
Green
Blue
Black
White
|
Alignment
Align attribute digunakan untuk
menentukan perataan object dalam document HTML baik berupa text, object, image,
para graph, division dan lain-lain.
Value
Left
Right
Center
Justify
|
Description
Rata kiri
Rata kanan
Rata tengah
Rata kanan kiri
|
Format text
Physical Formatting
Tag
<B> ...
</B>
<I> ...
</I>
<U> ...
</U>
<BIG> ...
</BIG>
<SMALL> ...
</SMALL> <STRIKE> ...
</STRIKE>
<SUP> ... </SUP>
<SUB> ...
</SUB>
<CENTER> ...
</CENTER>
|
Description
Bold text
Italic text
Underline Text
Untuk
ukuran yang lebih besar dari normal
Untuk
ukuran yang lebih kecil dari normal
Untuk
memberi garis di tengah text
Superscript
text
Subscript
text
Center
document
|
Logical Formatting
Tag
<EM>
... </EM>
<STRONG>
... </STRONG>
<DEL>
... </DEL>
<INS> ...
</INS>
|
Description
Text
miring / <I>
Text
tebal / <B>
Mencoret
text / <STRIKE>
Underline
text / <U>
|
Preformatted text
Tag PRE di gunakan untuk menampilkan
text sesuai dengan format aslinya.
Hyperlink
Link Address
Absolute
Address - merupakan
full internet address (URL) yang meliputi protocol, network location dan path
dan nama file.
Contoh:
http ://www.yahoo.com/index.html
Relatif Address - URL yang tidak
menyebutkan protocol dan network locationya (hanya path dan nama filenya).
Anchor
Anchor tag <A> untuk menentukan
hyper link dalam document HTML. HREF property digunakan untuk menentukan
tujuan dari hyperlink tersebut.
<A HREF=”URL”> Hypertext
</A>
|
<A
HREF=”protocol://hoat.domain:port/path/filename”>
Hypertext </A>
|
E.
TABLE
Membuat table
Tag <TABLE> digunakan \untuk membuat
table dalam document HTML , bagian pokok
dari table adalah cell yang didefinisi kan dengan menggunakan tag
<TD>.
Berikutnya
kalo anda ingin membuat beberapa baris
cell dalam table gunakan tag <TR>.
Menambahkan Heading
cell
Untuk menambahkan heading pada table
tambahkan tag <TH> pada table yang sudah di buat.
Pemformatan
table
Untuk memformat perataan text di dalam
table anda bisa guna kan attribute Align dan Valign (vertical Alignment)
Attribute
|
Value
|
Align
|
Center |
justify | left | right
|
Valign
|
BASELINE | TOP
| BOTTOM | MIDDLE
|
<tr align=”center” valign=”baseline”>
<td>cell
1a</td>
<td>cell
1b</td>
<td>cell
1c</td>
</tr>
<tr align=”center” valign=”baseline”>
<td>cell
2a</td>
<td>cell
2b</td>
<td>cell
2c</td>
</tr>
|
Merge
cell
Tag
<TD> memiliki atribut colspan untuk merge column dan rowspan
untuk merge baris.
F.
IMAGE
Format Image
Ada banyak format
image, tapi ada tiga jenis format yang paling sering digunakan :
1. GIF (Graphical
Interchange Format) (.GIF)
2. JPEG (Joint
Photographic Expert Image) (.JPG)
3. PNG (Portable
Network Graphics)
<IMG SRC=”URL”>
Attribute
|
Value
|
Description
|
Align
|
Center | justify | left | right |
baseline | top | bottom | middle
|
Ø Top, bottom,
middle digunakan untuk menentukan posisi image terhadap text
Ø Left, right,
center untuk menentukan posisi image di document
|
G.
FORM
Kegunaan Form
Berikut
ini beberapa contoh kegunaan Form dalam web:
1. memperoleh data-data user baik nama, alamat
dan data lainnya
2. memperoleh informasi pembelian secara
online
3. memperoleh feedback dari user mengenai
website anda.
Form Element
Tag
<FORM> digunakan untuk membuat form dalam document HTML.
Attribute
|
Description
|
ACCEPT
|
Mendefinisikan MIME yang diizinkan
oleh server yang memuat script untuk memproses form. Syntax :
ACCEPT=”Internet Media Type”
|
METHOD
|
Menentukan bagaimana data akan di
kirim ke server. GET – data akan dikirim dengan menggunakan query string pada
URL
POST – data akan dikirim ke server
sebagai block data ke script. Syntax :
METHOD=”POST|GET”
|
ACTION
|
Menentukan lokasi dari script yang
akan memproses data dari form. Syntax :
ACTION=”URL”
|
H.
PENGGUNAAN
TAG META
Ditempatkan
dalam bagian header, dan biasanya diletakkan setelah </TITLE>.
Digunakan
untuk menyimpan sejumlah informasi.
Contoh
:
1. Jika
anda membuat dokumen HTML melalui FrontPage 2000 akan muncul tag meta sebagai
berikut
:
<META NAME=”Generator” CONTEN T=”Microsoft
FrontPage 4.0”>
2. Agar
halaman web yang dibuat disertakan
ketika mesin pencari web (mbah Google) melakukan pencarian, gunakan atribut keywords,
semakin banyak keywords yang dimasukkan,
akan semakin besar halaman web
disebutkan dalam hasil pencarian.
<META NAME=”keywords” CONTENTS=”t eknologi,
komputer, telekomunikasi”>
3. Mengarahkan
ke halaman lain
<HTML>
<HEAD>
<TITLE>Pengalihan
Halaman</TITLE>
<META HTTP-EQUIV =
"REFRESH"
CONTENT = "5; URL =
baru.htm">
</HEAD>
<BODY>
Halaman web kami sudah dipindah.
Anda akan dipindahkan ke halaman
tersebut dalam waktu 5 detik.
</BODY>
</HTML>
|
Buatlah
file baru.html
<HTML>
<HEAD>
<TITLE>Halaman
Baru</TITLE>
</HEAD>
<BODY>
Anda berada pada halaman
baru kami.
</BODY>
</HTML>
|
Tidak ada komentar:
Posting Komentar