WAHANA BELAJAR 59: HTML Dasar

HTML Dasar

HTML (Hypertext Markup Language) merupakan bahasa pemrograman web yang digunakan untuk membuat halaman situs. Untuk belajar HTML dasar sebaiknya Anda ketikkan di Notepad.

· Struktur Dasar Html

Dalam penggunaannya, sebagian besar kode HTML harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/"). Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai berikut:

<html>

<head>

<title>Judul Form/Caption</title>

</head>

<body>

ISI WEB

</body>

</html>

Keterangan:

<html> .. </html> Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML.

<head> .. </head> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.

<title> .. </title> Sebagai titel atau judul halaman/form. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).

<body> .. </body> Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.

· Memberi Latar Belakang berupa warna pada Homepage

<html>

<head><title> Letakkan judul situs di sini </title></head>

<body bgcolor=”#000000”>

</body>

</html>

Nama warna yang telah disediakan antara lain : “black”, “olive”, “teal”, “red”, “blue”, “maroon”, “navy”, “gray”, “lime”, “fuchsia”, “white”, “green”, “purple”, “silver”, “yellow”, “brown” dan “aqua”

· Memberi Latar Belakang berupa gambar pada Homepage

<html>

<head><title> Letakkan judul situs di sini </title></head>

<body backgroud=”ikabashu.gif”>

</body>

</html>

· Meletakan gambar pada Homepage

<html>

<head><title> Letakkan judul situs di sini </title></head>

<body backgroud=”ikabashu.gif”>

<img src = “naruto.jpg” >

</body>

</html>

· Pengembangan Lanjutan mengenai gambar pada homepage

ALT : Untuk memberikan alternatif teks (keterangan) pada gambar

HEIGHT dan WEIGHT : mengatur tinggi dan lebar tampilan gambar pada browser

Pengaturan Halaman Web dan Teks

Untuk mendapatkan halaman web yang baik anda harus melakukan pengaturan terhadap halaman web dan teks-teks didalamnya seperti mengatur warna latar belakang halaman, memilih jenis dan ukuran huruf, perataan, warna teks, menambahkan gambar dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan halaman web dan teks :

a. <body>, digunakan mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.

1 Background = digunakan untuk mengatur latar belakang dengan gambar/image.

1 Bgcolor = digunakan untuk mengatur warna latar belakang dokumen, dengan warna putih sebagai default-nya.

1 Teks = digunakan untuk mengatur warna teks dokumen, dengan warna hitam sebagai warna default.

1 Link = Untuk mengatur warna link dokumen dengan warna biru sebagai warna default

1 Vlink = Untuk mengatur warna visited link dokumen dengan default ungu

1 Alink = digunakan untuk mengatur warna active link dokumen dengan default merah.

b. Heading: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil. File : heading.html

c. Paragraph Baru: <P> Digunakan untuk pindah alinea atau membuat paragraf baru. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi. Dalam tag ini juga bisa digunakan untuk mengatur perataan kiri, tengah, kanan dan kiri-kanan, yaitu dengan attribut ALIGN. Attribut align mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY.

d. Font <FONT> Digunakan untuk mengatur huruf dokumen HTML. Tag FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR.

e SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.

e FACE: Digunakan untuk mengatur jenis atau nama font.

e COLOR: Digunakan untuk mengatur warna font.

Perintah	Fungsi
<b> … </b>	Mencetak Tebal Garis
<i> … </i>	Mencetak miring teks
<u> … </u>	Menggarisbawahi teks
<strike> … </strike>	Memberi coretan pada teks
<tt> … </tt>	Menampilkan teks dalam font seperti mesin ketik
<big> … </big>	Memperbesarkan teks
<small> … </small>	Mengecilkan teks
<sub> … </sub>	Membuat teks subscript
<sup> … </sup>	Membuat teks supersript

a. <HR>, digunakan untuk membuat garis horisontal. Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE. Atribut SIZE digunakan untuk menentukan panjang garis dalam satuan pixel. Atribut WIDTH digunakan untuk menentukan ketebalan garis. Atribut NOSHADE akan menyatakan bahwa garis tersebut ditampilkan tanpa bayang-bayang 3-D.

b. LISTS

Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga berupa tanda-tanda khusus/symbol.

1. Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet (tidak bernomor). List entries didefinisikan dengan tag <LI>. Bentuk item tanda pada Unordered List dapat diubah dengan menggunakan atribut TYPE kedalam tag <UL>

Atribut	Fungsi
Type=”circle”	Item berbentuk lingkaran tengahnya putih
Type=”square”	Item berbentuk kotak padat berwarna putih
Type=”disk”	Item berbentuk linkaran padat berwarna hitam

2. Ordered Lists: <OL> Juga digunakan untuk membuat daftar item bernomor, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag. Atribut yang ada pada Ordered List adalah TYPE dan START.

Atribut	Fungsi
Start = “n”	Menentukan nilai awal dari item, di mana n adalah nilai awalnya
Type=”A”	Item berupa huruf besar (A, B, C, D, E,….)
Type=”a”	Item berupa huruf kecil (a, b, c, d, e,….)
Type=”I”	Item berupa bilangan romawi huruf besar (I, II, III, IV, V,….)
Type=”i”	Item berupa bilangan romawi huruf kecil (I, ii, iii, iv, v, …)
Type=”1”	Item berupa angka biasa (1, 2, 3, 4, 5,..)

1. Definition Lists: <DL>, digunakan untuk menjelaskan istilah-istilah. Definition List dinyatakan dengan tag <DL> dan diantara tag tersebut ditambahkan tag <DT> Definition Term yaitu bagian istilah yang dijabarkan dan tag <DD> Definition Data yang merupakan penjabaran dari istilah.

File : Definition_List.html

2. Preformatted Text: <PRE>. Digunakan untuk mengatur format tampilan agar sesuai dengan aslinya. File : Pre.html

MEMBUAT TABEL

Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table, yaitu: <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tag <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> .

þ <TABLE>

Digunakan untuk mendefinisikan pembuatan tabel. Memiliki attribut :

· align - perataan : rata kiri (left), tengah (center) atau kanan (right).

· valign – mengatur bentuk perataan secara vertikal

· bgcolor – mengatur warna latar belakang (background) dari tabel.

· background – menentukan gambar yang digunakan sebagai background tabel

· color – Untuk mengatur warna suatu sel dalam tabel

· border – menentukan ukuran border tabel (dalam pixel).

· rowspan – menggabungkan beberapa baris

· colspan – menggabungkan beberapa kolom

· cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).

· cellspacing – mengatur spasi/jarak antar cell (dalam pixel).

· width – menentukan lebar tabel dalam pixel atau percent.

· height – Menentukan tinggi tabel

þ <TR>

Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:

· align - perataan : rata kiri (left), tengah (center) atau kanan (right).

· bgcolor - warna latar belakang dari baris.

· valign - perataan vertikal : top, middle atau bottom.

þ <TD>

Tag ini digunakan untuk membuat kolom baru pada tabel. Attributnya adalah:

· align – untuk menentukan perataan kolom

· background – untuk menentukan image yang digunakan sebagai latar belakang dari kolom.

· bgcolor – untuk menentukan warna latar belakang

· colspan - lihat gambar contoh

· height – untuk mengatur ukuran tinggi cell dalam pixels.

Contoh tabel1.html

<html>

<head>

<title>::: Pembuatan Table :::</title>

</head>

<body>

<table>

<tr>

<td>Ini contoh tabel sederhana tanpa border</td>

</tr>

</table>

<p>

<tr>

<td>Ini contoh tabel sederhana dengan border</td>

</tr>

</table>

<p>

<tr>

<td>Alamat</td>

</tr>

<tr>

<td>Jam 'Iyatul Khoir</td>

<td>Bulubrangsi Lamongan</td>

</tr>

<tr>

<td>Ari Mulyaningsih</td>

<td>Wringin Anom

Gresik</td>

</tr>

</table>

</body>

</html>

Menambahkan Judul Tabel

Judul dalam tabel dibedakan menjadi tiga macam, yaitu judul tabel, judul kolom table dan judul baris tabel. Judul tabel atau biasa disebut CAPTION terletak dibagian luar tabel yang bisa berada dibawah atau diatas tabel. Secara default caption diletakkan dibagian atas suatu tabel, tetapi juga dapat diletakkan dibawah suatu tabel dengan menambahkan atribut ALIGN=BOTTOM pada elemen caption tersebut.

Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen TABLE HEADER <TH>. Judul kolom terletak pada sel disebelah kiri atau kolom pertama suatu tabel, sedangkan judul baris terletak pada baris pertama suatu tabel. Judul baris atau judul kolom akan tercetak tebal.

Contoh tabel2.html

<html>

<head>

<title>::: Pembuatan Judul Table :::</title>

</head>

<body>

<caption align=top><b><u>Daftar Alamat</u></b></caption>

<tr>

<th width=200>Alamat</td>

</tr>

<tr>

<td>Jam ‘Iyatul Khoir</td>

<td>Bulubrangsi Lamongan</td>

</tr>

<tr>

<td>Ari Mulyaningsih</td>

<td>Wringin Anom Gresik</td>

</tr>

</table>

</body>

</html>

Mengatur Lebar dan Tinggi Suatu Tabel

Lebar tabel diatur dengan menggunakan atribut WIDTH dan untuk mengatur tinggi table dengan atribut HEIGHT. Jika atribut WIDTH dan HEIGHT digunakan dalam elemen TABLE nilainya menunjukkan lebar dan tinggi tabel terhadap BROWSER sedangkan jika digunakan pada elemen TH dan TD, nilainya merupakan lebar dan tinggi dari suatu tabel. Nilai atribut mengunakan ukuran % (max 100%) dan ukuran pixel.

<html>

<head>

<title>::: Mengatur Lebar dan Tinggi Table :::</title>

</head>

<body>

<caption align=top><b><u>Daftar Alamat</u></b></caption>

<tr>

<th width=200>Alamat</td>

</tr>

<tr>

<td height=50>Jam ‘Iyatul Khoir</td>

<td height=50>Bulubrangsi Lamongan</td>

</tr>

<tr>

<td height=30>Ari Mulyaningsih</td>

<td height=30>Wringin Anom Gresik</td>

</tr>

</table>

</body>

</html>

Perataan dalam Tabel

Perataan dalam tabel dikenal dua macam, yaitu perataan secara horizontal dengan atribut ALIGN dan perataan vertikal dengan atribut VALIGN, serta untuk membuat suatu tabel posisinya menjadi ditengah-tengah layar browser.

Membuat Warna Pada Tabel

Didalam pewarnaan tabel kita dapat mengatur warna latar belakang dan teks serta warna bordernya. Untuk menentukan warna latar belakang pada suatu tabel, gunakan atribut BGCOLOR sedangkan untuk warna border dapat menggunakan beberapa atribut sbb:

Atribut	Fungsi
BORDERCOLOR	Mengubah warna keseluruhan border
BORDERCOLORLIGHT	Mengubah warna border bagian atas dan kiri
BORDERCOLORDARK	Mengubah warna border bagian bawah dan kanan

Penggabungan Baris/Kolom

Untuk menggabungkan baris/kolom (merge) digunakan atribut COLSPAN dan ROWSPAN. COLSPAN digunakan untuk menggabung-kan beberapa kolom menjadi 1 sedangan ROWSPAN menggabungkan beberapa baris menjadi 1

Cellpadding Dan Cellspacing

CELLPADDING digunakan untuk mengatur spasi antara border dengan tulisan, sedangkan CELLSPACING digunakan untuk mengatur spasi antar dua buah sel.

<html>

<head>

<title>::: Contoh Merge, Cell dan Pedd :::</title>

</head>

<body>

<tr>

<td bgcolor=#DFF9F9 colspan=2 align=center>Kelas</td>

<td bgcolor=#DFF9F9 align=center rowspan=2>Keterangan</td>

</tr>

<tr>

</tr>

<tr>

<td>Ratna Budi Setyorini</td>

<td>Wilujeng Handayani</td>

<td align=center>Lunas</td>

</tr>

</table>

</body>

</head>

</html>

Karakter Spesial dalam HTML

Karakter	Entity Reference	Karakter	Entity Reference
Spasi		“	"
<	&nlt;	©	©
>	>	®	®
&	&	±	±
µ	µ	˚	°

HYPERTEXT LINK

Digunakan untuk membuat link/penghubung antara suatu halaman dengan halaman lain, ke URL lain, juga digunakan dalam satu halaman untuk berpindah ke sub judul yang lain atau ke lokasi tertentu dalam satu halaman yang sama.

Sintak tag link adalah sebagai berikut:

<a href=url_tujuan>nama_link</a>

url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan nama_link adalah nilai yang akan ditampilkan di browser sebagai teks link atau tombol penghubung. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah dan atribut warnanya dapat diatur dalam tag <body>.

HTML Dasar

4/ 5

Oleh hardi_izet

Komentar