BAB 13
STRUKTUR DASAR HALAMAN WEB
A. TAG
DASAR HTML
Halaman web atau dokumen web adalah dokumen yang ditulis dalam
HTML (Hypertext Markup Language) dan diterjemahkan oleh browser web.
HTML adalah kependekan dari Hyper
Text Markup Language, yang artinya tata cara penulisan yang digunakann
dalam dokumen web. Dokumen HTML adalah sebuah dokumen text murni yang dapat
dibuat dengan editor web sembarangan
seperti notepad.
Dokumen ini akan dijalankan oleh sebuah web browser misalnya
internet explorer, mozilla ataupun opera. Sehingga mampu menampilkan tampilan
sesuai keinginan designer atau programer web. Tag HTML tidak case sensitive. Jadi bisa menggunakan
<HTML> atau <html>. keduanya menghasilkan output yang sama.
Struktur Dasar HTML
|
<html>
<head>
<title> Judul Dokumen </title>
</head>
<body>
</body>
Isi / informasi yang akan disampaikan
</html>
|
Keterangan :
-
HTML, setiap
dokumen HTML dimulai <HTML> dan diakhiri dengan tag </HTML> yang
menyatakan bahwa suatu dokumen adalah dokumen HTML.
-
Head. Bagian
header dokumen HTML, secara umum berisi informasi mengenai dokumen.
-
Body. Merupakan
isi dokumen sebenarnya
B. TEXT
FORMATING
1.
Tag Heading
Tag Headline/heading adalah tag yang digunakan untuk membuat judul
dari isi dokumen HTML. tag heading memiliki 6buah bilangan terdiri atas 1, 2,
3, 4, 5 dan 6. Masing-masing bilangan
yang terdapat pada heading berfungsi untuk mewakili ukuran ukuran dari
besarnya tag heading. Bilangan pertama merupakan ukuran terbesar sedangkan yang
terkecil adalah bilangan terakhir.
|
<hn [properti]>
..............................</hn>
|
Keterangan :
n adalah bilangan yang
terdiri dari 1 sampai 6
Properti kemampuan
tambahan yang dimiliki tag heading
Contoh Penulisan Tag Heading :
Hasil :
Berikut Properti Tag Heading :
|
Properti
|
Keterangan
|
|
Align
Left, Right, Center, Justify
|
Pengaturan letak headline/heading.
<h1 align=”left”> isi text
</h1>
|
2.
Tag Paragraf
Digunakan untuk memberi pengaturan paragraf pada text yang akan
ditampilkan.
Tag Paragraf :
|
<p
[properti]>........................................</p>
|
Properti Tag Paragraf :
|
Properti
|
Keterangan
|
|
Align
Left, Right, Center, Justify
|
Pengaturan letak patagraf.
<p align=”left”> isi text </p>
|
Contoh penggunaan paragraf :
Hasilnya :
3.
Tag Font
Tag font digunakan untuk mengatur huruf.
|
<font
[properti]>........................................</font>
|
Properti Tag Font :
|
Properti
|
Keterangan
|
Value
|
|
Face
Color
Size
|
Jenis Huruf
Warna huruf
Ukuran Huruf
|
Arial, Helvetica, Verdana, dll
Red, #CCCCCC, dll
1 - 7
|
Contoh Penggunaan tag Font:
Hasil :
4.
Image
Image atau gambar didalam dokumen HTML berfungsi untuk menambah
daya tarik dari sebuah website. Namun penggunaannya akan mengakibatkan semakin
besarnya penggunaan byte dari dokumen HTML yang secara otomatis akan berakibat
pula pada kinerja atau memperlambat waktu tampil dari halaman web tersebut.
Pada umumnya, gambar yang ditampilkan pada halaman web akan
disajikan bersama teks dari halaman web tersebut. Format gambar yang banyak
digunakan dalam halaman web , antara lain GIF (Graphics Interchange Format), JPEG (
Joint Photographics Experts Group).
Tag image :
|
<img
src=”lokasi gambar”[properti]>
|
Properti Tag Image :
|
Properti
|
Fungsi
|
|
SRC
|
Menentukan alamat dan nama file
image. Properti ini adalah properti utama tag image yang harus disertakan
setiap kali akan menyisipkan gambar.
|
|
LOWSRC
|
Menentukan alamat dan nama file image
resolusi rendah, yang akan ditampilkan saat menunggu loading image.
|
|
ALT
|
Text alternative yang akan
ditampilkan jika browser dalam text mode.
|
|
ALIGN
|
Menentukan posisi gambar (Left,
right, top, bottom)
|
|
BORDER
|
Menentukan tebal border/bingkai
disekitar image (diisi dengan nilai integer)
|
|
HEIGHT
|
Menentukan tinggi dari gambar, diisi dalam
pixel atau persen(%)
|
|
WIDTH
|
Menentukan lebar gambar, diisi dalam
pixel atau persen(%)
|
Contoh Penggunaan tag image
Hasil :
5.
Properti Background
Untuk mempercantik halaman web, kita
dapat menambahkan properti background pada halaman web. Properti ini diletakkan
pada tag <body>.
|
Properti
|
Keterangan
|
Value
|
|
Bgcolor
|
Warna latar / background
|
#ff6633, violet, dll
|
|
Background
|
Latar berupa gambar
|
Nama file gambar :
Gambar.jpg, images/gbr.jpg, dll
|
Contoh penggunaan properti background :
-
Warna latar :
Hasilnya :
-
Background
Hasilnya :
6.
Hyperlink
Dokumen HTML dilengkapi dengan kemampuan yang berpindah-pindah
dari halaman satu ke halaman lainnya (link). Link dalam halaman HTML ditandai
dengan menggaris bawahi teks yang akan di link, atau pointer mouse akan berubah
menjadi bentuk jari apabila berada pada objek link atau (gambar/text).
|
<a
href=”nama dokumen yang dilink” [atribut] >..text/gambar...</a>
|
Hyperlink dibedakan menjadi :
a.
Link Absolut
Adalah sebuah link yang digunkan untuk mengaitkan halaman webyang
satu dengan halaman web yang lainnya didalam situs internet.
|
<a
href=”alamat internet” [atribut] >..text/gambar...</a>
|
Contoh :
|
<a
href=”http://www.palcomtech.ac.id”>PalComTech</a>
|
b.
Link Relatif
Adalah link yang digunakan untuk mengaitkan halaman web yang satu
dengan halaman web lainnya di dalam satu komputer tanpa harus menuliskan secara
lengkap alamat situs internet seperti pada alamat link absolut.
Contoh :
|
<a
href=”home.html”>Home</a>
|
7.
Tabel
Tabel adalah sebuah sarana untuk menginformasikan data-data berupa
baris dan kolom. Pada umumnya setiap kolom menunjukan data-data yang sama dalam
suatu kelompok data. Sedangkan baris menunjukan data-data dari kolom-kolom yang
menunjukan sekelompok data dalam suatu kumpulan.
|
<table[properti]>
<tr>
<th>......</th>
<th>......</th>
</tr>
<tr>
<td>......</td>
<td>......</td>
</tr>
</table>
|
Keterangan :
·
<table> adalah tag yang berfungsi untuk
mendefinisikan sebuah table
·
<tr> adalah tag yang berfungsi untuk
membuat baris
·
<th> adalah tag yang berfungsi untuk
membuat tag heading/judul
·
<td> adalah tag yang berfungsi untuk
membuat sel/kolom.
Property Table
|
Properti
|
Fungsi
|
|
Align
|
Untuk menentukan posisi tabel pada
dokumen ((Left, right,center)
|
|
Bgcolor
|
Untuk memberikan warna pada table.
TH, TR ataupun TD
|
|
Border
|
Untuk menentukan ketebalan garis pada
table
|
|
Cellpadding
|
Untuk menentukan lebar spasi antar
border dan isi sel
|
|
Cellspacing
|
Untuk menentukan lebar spasi antar
sel
|
|
HEIGHT
|
Menentukan tinggi tabel
|
|
WIDTH
|
Menentukan lebar table
|
|
Valign
|
Untuk menentukan posisi vertikal
peletakan baris dalam table (TR)
|
|
Colspan
|
Untuk menentukan jumlah kolom yang
digabungkan
|
|
Rowspan
|
Untuk menentukan jumlah baris yang
digabungkan.
|
0 komentar:
Posting Komentar