Fungsi HTML
Hypertext Markup Language merupakan
standar bahasa yang di gunakan untuk menampilkan dokumen web, yang bisa
dilakukan dengan HTML yaitu:
- Menentukan format suatu teks
- Membuat list tentang sekelompok hal
- Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama.
- Menyisipkan citra atau gambar.
- Menampilkan informasi dalam bentuk tabel
- Menentukan format suatu teks
- Membuat list tentang sekelompok hal
- Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama.
- Menyisipkan citra atau gambar.
- Menampilkan informasi dalam bentuk tabel
- Mengontrol
tampilan dari web page dan contentnya.
- Mempublikasikan dokumen 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 dokumen HTML.
2.1.3. Struktur HTML
1.Elemen
Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Contonya untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML
Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Contonya untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML
2.
Tag
Adalah teks khusus (markup)
berupa dua karakter "<" dan ">",
sebagai contoh <body>
adalah tag dengan nama body. Tag ditulis secara berpasangan, yang
terdiri atas tag pembuka dan tag penutup (ditambahkan karakter
"/" setelah karakter "<"), sebagai contoh <body> ini adalah tag
pembuka isi dokumen HTML, dan </body>
ini adalah tag penutup isi dokumen HTML. Yang merupakan tag-tag dasar dalam
HTML adalah:
a. <HTML> </HTML>
Tag <HTML> dan </HTML> digunakan
untuk menandai awal dan akhir dari suatu file HTML.
a.
<TITLE> </TITLE>
Tulisan yang berada diantara tag <TITLE>
dan </TITLE> akan ditampilkan oleh browser pada bagian title yang
mana merupakan title dari jendela browser.
b.
<HEAD> </HEAD>
Berisi keterangan informasi, seperti title
dan jenis dokumen, ditulis diantara HEAD tags.
c.
<BODY> </BODY>
Bagian tag BODY menandai awal dan akhir dari
badan dokumen HTML. Tag ini memiliki sejumlah attribut dapat ditentukan.
Contoh:
<HTML>
<HEAD>
<TITLE>Nama saya Taufik Ari Arnandan</TITLE>
</HEAD>
<BODY TEXT="#000"
BGCOLOR="#FFFF">
Hello World
</BODY>
</HTML>
2.1.4. Pengaturan Halaman HTML
Menformat
Tulisan Pada halaman HTML
Untuk membuat halaman web yang rapi dan
menarik, tentu saja perlu melakukan pemformatan tulisan-tulisan, baik tata cara
pencetakannya, serta jenis tulisan yang dipergunakan.
Tag – tag untuk memformat tulisan:
|
Tag
|
Keterangan
|
|
<B>
</B>
|
Membuat cetak
tebal pada tulisan yang berada diantaranya.
|
|
<BLINK> </BLINK>
|
Menyebabkan
tulisan berada diantaranya berkedip-kedip.
|
|
<FONT SIZE
= #> </FONT>
|
Menentukan
ukuran font (#) yang digunakan untuk menampilkan HTML dalam tags. Default is
3; ukurannya dari 1 sampai 7.
|
|
<H#>
</H#>
|
Tag yang menentukan tingkat
heading dengan nilai antara
1 dan 6, dengan sebagai ukuran paling besar dan 6 paling kecil
|
|
<I>
</I>
|
Text
diantaranya ditampilkan dengan cetak miring.
|
|
<PRE>
</PRE>
|
Preformatted
text adalah menampilkan tulisan tanpa format yang khusus. Tag ini bagus
digunakan bila ana ingin menangani spasi antar baris; dan juga memudahkan
anda untuk meletakan tab dalam dokumen.
|
|
<MARQUEE>
</MARQUEE>
|
(hanya pada
Microsoft Internet Explorer 2.0/3.0). Tag ini menyebabkan tulisan yang berada
diantaranya
Atribut untuk
tulisan MARQUEE :
|
|
ALIGN
|
Menentukan
bahwa tulisan dalam marquee harus dirapikan di TOP, MIDDLE atau BOTTOM
darimarquee tersebut
|
|
SCROLL
|
Defaultnya,
dari sisi yang satu ke yang lain pada
layar secara
berulang.
|
|
SLIDE
|
Gulung text
melintasi layar, dan
|
|
BGCOLOR
|
Yang ini
menentukan dari marquee
|
|
DIRECTION
|
Menentukan
arah ke
|
|
HEIGHT
|
Menentukan
tinggi marquee dalam pixel (HEIGHT = n) atau presentasi dari layar (HEIGHT=
n%).
|
|
WIDTH
|
Sama dengan
atribut HEIGHT, tetapi
diaplikasikan
untuk lebar marquee.
|
|
<STRONG>
</STRONG>
|
Cara lain
menggambarkan attention pada suatu bagian dari text; <STRONG>
biasanya ditampilkan dengan cetak tebal oleh browser.
|
|
<U>
</U>
|
Tulisan
diantaranya ditampilkan dengan garis bawah.
|
2.1.5. Mengatur Pemerataan Tulisan
Pemerataan tulisan sangat mempengaruhi tampilan
dari halaman web anda, ada kalanya tulisan tertentu perlu ditampilkan pada
tengah halaman, atau pun justified. Tag-tag HTML yang mengatur pemerataan
tulisan pada satu halaman:
a.
<CENTER> </CENTER>
Tag ini akan menampilkan tulisan/gambar
ditengah baris.
b.
<P ALIGN=LEFT|CENTER|RIGHT> </P>
Tag paragraf digunakan untuk memulai suatu
paragraf baru disertai dengan pemerataan teks ke kiri, tengah, atau kanan dari
tampilan browser untuk paragraf bersangkutan. Suatu paragraf dapat terdiri dari
teks, gambar, hyperlink, dan element HTML lainnya.
c. <H#
ALIGN=LEFT|CENTER|RIGHT> </H#>
Ini akan merapikan tulisan ke kiri, tengah atau
kanan dari tulisan yang diberi tingkat heading
2.1.5. Membuat Unordered
List
Agar dokumen kita mudah dibaca dan jelas, ada
bagian tertentu yang perlu ditampilkan dalam list. List yang paling sederhana
di HTML adalah unordered, atau bulleted list. Hal ini sesuai untuk daftar item
yang tidak memiliki hirarki atau urutan yang penting.
a.
<UL> </UL>
Digunakan untuk mengawali dan mengakhiri suatu
Unordered List.
b.
<LH> </LH>
Digunakan untuk membuat suatu heading untuk
list tersebut.
c.
<LI> </LI>
Digunakan untuk membuat masing-masing item list
tersebut.
2.1.6. Table dan Pengaturannya
Tabel adalah cara yang baik untuk menampilkan
informasi secara logik yang biasanya ditampilkan dalam bentuk spreadsheet.
Tabel juga digunakan untuk menampilkan record-record pada database.
1. <TABLE> </TABLE>
Berikut ini adalah atribut dari TABLE tag dan
efeknya pada tabel.
a. BORDER
Atribut BORDER
menentukan tebal dari border sewaktu ditampilkan oleh browser. Cobalah dengan
browser anda untuk mendapatkan setting yang optimal.
b. CELLSPACING
Atribut
CELLSPACING mementukan jumlah spasi yang browser tempatkan diantara tiap-tiap
sel individual atau spasi antar sel dan border (jika sel berada di sisi dari
tabel). Sekali lagi, hanya dengan percobaan yang akan menghasilkan nilai yang
sesuai.
c. CELLPADDING
Atribut
CELLPADDING menentukan jumlah spasi yang browser tempatkan antara data dalam
cell dan border sel.. Dalam tag tabel, ada tiga tag yang mendefinisikan header,
row, dan cels. Tag-tag tersebut adalah table header <TH>, table row
<TR>, dan table data <TD>.
d.
WIDTH
Atribut WIDTH
dapat diset dengan angka (ukuran dalam pixel), atau sebagai suatu persentase
lebar tampilan browser. Browser dapat menarik tabel, tetapi tidak dapat
mengkompres jika ukuran jendela browser lebih kecil dari tabel.
e.
ALIGN
Dengan ALIGN,
anda dapat menentukan pemerataan tabel di left, center, atau right dari
halaman.
f.
BGCOLOR
Sebagaimana
pada tag <BODY> , anda dapat menentukan warna latar belakang dari tabel
dengan menggunakan attribut BGCOLOR, anda dapat menggunakan definisi warna #rrggbb
atau nama warna pada Internet
Explorer, (sebagai contoh, <TABLE BGCOLOR = RED).
g.
<TR>
</TR>
Elemen table
row menandai awal dari tiap baris pada tabel. Atribut yang sah dari tabel row
adalah ALIGN, VALIGN, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT.
h.
TH> </TH>
Elemen table
header berfungsi sama seperti elemen table data <TD>, tetapi elemen table
header ditampilkan dalam suatu font cetak tebal. Artibut yang sah untuk elemen
table header adalah ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, BGCOLOR,
BGCOLORDARK, dan BGCOLORLIGHT.
BGCOLORLIGHT
i.
<TD> </TD>
Elemen table
data menandai awal dan akhir dari tiap sel didalam tabel.
Atribut yang
sah untuk elemen table data :
a.
COLSPAN
Atribut ini
menentukan jumlah kolom yang akan ditarik oleh sel; sebagai contoh, jika
COLSPAN di set ke 2, yang mana sel dengan span dua kolom normal dalam tabel
b.
ROWSPAN
Atribut ini
menentukan jumlah baris yang akan ditarik oleh sel; sebagai contoh, jika
ROWSPAN di set ke 2, yang mana sel dengan span dua baris normal dalam tabel.
EmoticonEmoticon