13.1. 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
13.2 Text Formatting
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.
|
Tidak ada komentar:
Posting Komentar