Mengenal Dasar-dasar HTML

A. DEFINISI HTML

HTML (Hypertext Markup Language) merupakan suatu bahasa pemrograman untuk membangun sebuah dokumen dalam bentuk halaman di web (walaupun banyak orang yang keberatan) menyebut HTML sebagai bahasa pemrograman Karena dirasa terlalu sederhana, hanya terdiri dari tag <html> sampai </html>, selain itu juga, HTML tidak memiliki ‘looping’ seperti bahasa pemrograman lain. Namun dalam hal ini, tidak bisa dipungkiri bahwa HTML selalu ada pada sebuah halaman web page, karena HTML dapat dipergunakan sebagai hypertext link yang mampu membentuk hubungan antara teks dan dokumen lain. Dengan demikian pembaca dokumen bisa melompat dari satu dokumen ke dokumen yang lain dengan mudah.

B. STRUKTUR DASAR HTML

Adapun susunan penulisan HTML, secara mudah mempunyai struktur sebagai berikut berikut:
<html>

<head>

<title>

Nama judul yang akan muncul pada browser

</title>

</head>

<body>

semua data, baik itu tulisan,gambar,maupun suara akan ditampilkan disini.

</body>

</html>

Dalam HTML juga terdapat suatu komponen (tag) yang kegunaannya dapat dilihat dibawah ini:

Tag Dasar

<html>…</html>	Mendefinisikan sebuah dokumen HTML
<head>…</head>	Mendefinisikan isi atau badan sebuah dokumen HTML
<body>…</body>	Mendefinisikan judul, deskripsi dan meta tag sebuah dokumen HTML

C. MENGENAL TAG PADA HTML

1. Tag Headline

Dalam model tag headline ada beberapa macam yang sering digunakan untuk memformat tampilan huruf dari kecil dan besar yang dimulai dari <H1></H1> sampai <H6></H6>.
Contoh penggunaan :
<html>

<head>

</head>

<body>

<h1> Heading h1</h1>

<h2> Heading h2</h2>

<h3> Heading h3</h3>

<h4> Heading h4</h4>

<h5> Heading h5</h5>

<h6> Heading h6</h6>

<h7> Heading h7</h7>

</body>

</html>

2. Tag List

Tag ini biasanya digunakan untuk menampilkan informasi dalam bentuk daftar (list). Adapun jenis tag list ini ada dua yaitu format bullet (bulleted list) dan dalam bentuk nomor (ordered list). Biasanya ditambahkan dengan tag yang berbeda yaitu dengan tag <UL> dan <OL>.
Contoh penggunaan :
<html>

<head>

</head>

<body>

<h2> Daftar Nama Dalam Bentuk Nomor </h2>

<ol>

<li> Aryasatya

<li> Bumi

<li> Sasongko

</ol>

<h3> Daftar Nama Dalam Bentuk Bullet </h3>

<ul>

<li> Aryasatya

<li> Bumi

<li> Sasongko

</ul>

</body>

</html>

3. Tag hr

Tag <hr> digunakan untuk membuat garis batas horizontal dan sekaligus akan membentuk baris baru.

4. Tag Br

Tag <br> biasanya digunakan untuk penggantian baris baru. Sehingga kita dapat membuat baris baru bagi dokumen yang memerlukan pergantian baris.

D. MEMFORMAT FONT DAN MENEMPATKAN GAMBAR

Dalam halaman web kita juga dapat melakukan pengaturan font dan gambar sehingga halaman web kita dapat terlihat lebih indah dan menarik. Penulisan perintah untuk memformat Font adalah sebagai berikut :

<font atribut></font>, untuk atribut dapat berupa size, face maupun lainnya.

Sedangkan penulisan perintah untuk menempatkan gambar adalah sebagai berikut <img scr="/url/nama_file"> dengan format yang sering digunakan adalah JPG, GIF dan PNG.

Tag <img> selalu diikuti dengan atribut src yang menunjukkan lokasi dan nama file grafik yang ingin kita tampilkan. URL (Universal Resources Locator) adalah alamat absolut dari file grafik tersebut.

Atribut tambahan untuk instruksi <img> adalah Align. Atribut ini mengendalikan letak (alignment) teks yang berada di baris yang sama dengan grafik terhadap sisi vertikal gambar. Atribut Align ditulis dengan cara sebagai berikut :

<img src="gambar.gif" align=top>

Anda dapat melihat atribut pada image seperti pada table dibawahi ini:

Tabel 2. Atribut pada image

ATRIBUT	KEGUNAAN
Width	Memberikan informasi mengenai ukuran lebar gambar kepada browser sebelum file grafiknya sendiri dikirimkan.
Height	Memberikan informasi mengenai ukuran vertikal gambar kepada browser sebelum file grafiknya sendiri dikirimkan.
Vspace	Menentukan jarak diatas dan dibawah
Hspace	menentukan jarak diatas dan dibawah
Border	Menentukan garis pinggir disekitar gambar.

E. MEMBUAT TABLE DENGAN HTML

Keberadaan tabel sangatlah penting dalam menampilkan dokumen atau informasi yang memerlukan banyak kolom dan baris. Namun lebih dari itu, table dapat menjadi alat utama dalam HTML untuk mengendalikan tata letak dokumen pada web kita..

Table 3. Struktur table

Tag	Kegunaan
<Table>….</tabel>	Digunakan untuk menampilkan data dalam bentuk table
<th>..…….</th>	Digunakan untuk menampilkan judul pada kolom
<tr>………</tr>	Digunakan untuk menentukan baris (table row)
<td>………</td>	Digunakan untuk menampilkan data pada setiap table (table data)

Anda dapat lebih memahami tag tag diatas dengan mencoba membuat table dengan kode HTML dibawah ini.

Contoh penggunaan :
<html>

<head>

<title> Pengunaan table</title>

</head>

<body >

<table border="1">

<tr>

<th>kolom1</th>

<th>kolom2</th>

<th>kolom3</th>

<tr>

<td>isi baris 1 kolom 1</td>

<td>isi baris 1 kolom 2</td>

<td>isi baris 1 kolom 3</td>

</tr>

<tr>

<td>isi baris 2 kolom 1</td>

<td>isi baris 2 kolom 2</td>

<td>isi baris 2 kolom 3</td>

</tr>

</table>

<br>

<table border ="1">

<tr>

<td>isi baris 3 kolom 1</td>

<td>isi baris 3 kolom 2</td>

<td>isi baris 3 kolom 3</td>

</tr>

</table>

</body>

</html>

F. MEMBUAT LINK

Kelebihan HTML adalah dapat berpindah dari satu halaman ke halaman yang lain. Suatu link hypertext, dalam suatu dokumen Web, dapat berupa gambar atau teks. Bila Anda mengklikkan mouse pada link-link tersebut, browser akan membawa Anda menuju ke dokumen lain yang ditunjukkan oleh link tersebut. Beberapa model link yang dapat anda gunakan adalah seperti dibawah ini:

1. Model link Absolute

Model ini dapat ditulis sebagai berikut dengan intruksi:

<a href=” http:// www.yahoo.com”>

2. Model berpindah Halaman

<a href=” dokumen.htm”>

3. Model link satu halaman

<a href=”# nama_link”>

Dengan catatan nama_link telah didefinisikan terlebih dahulu dengan cara:

<a name=” nama_link”>

G. ELEMEN FORM

Keberadaan form dalam HTML sangatlah penting, Form dalam HTML ditandai dengan tag <FORM> dan </FORM>. Sewaktu kita membuat elemen form, kita perlu menentukan bagaimana dan kemana data yang diisikan ke dalam form tersebut akan dikirimkan dari browser ke Web server. Hal ini dilakukan dengan pernyataan Action dan Method. Action menunjukkan lokasi tempat program CGI yang hendak dijalankan, sedangkan Method menunjukkan bagaimana informasi yang diisikan dalam form harus dikirimkan ke web server. method yang umum adalah get dan post.

1. Elemen Textarea

Textarea biasanya dipakai, bila kita menginginkan tempat bagi user web untuk memasukkan informasi yang panjangnya beberapa baris. perintah yang dipergunakan adalah : <textarea name=”nama” rows=n col=n>

Name menyatakan nama data yang akan dimasukkan ke dalam textarea ini. cols dan rows berturut-turut menentukan banyak lebar textarea dan jumlah baris di dalam textarea. bila cols dan rows tidak ditentukan dalam kode textarea, maka nilai yang akan dipergunakan adalah 40 karakter lebar dan 4 baris tinggi.

2. Elemen select

Terkadang Anda ingin menyediakan beberapa pilihan kepada user dokumen Web Anda sebagai masukan. <SELECT> akan menampilkan suatu daftar yang dapat dipilih oleh user , baik dalam bentuk menu pop-up maupun menu gulung.

3. Elemen input

Adapun elemen input ini biasanya terdiri dari:

a. Textbox

Elemen ini digunakan untuk membuat kotak text yang mampu menerima masukkan berupa string atau bisa juga text yang teleh dienkripsi.

Untuk model text biasa

Nama: <input type ="text" name=tnama size=xx>

Dimana type yang digunakan yaitu berupa text

Untuk model text yang telah dienkripsi.

Password:

b. Radio button

Elemen ini digunakan untuk menampilkan suatu daftar masukan berupa pilihan, dimana pengguna hanya diperbolehkan memilih satu dari pilihan yang ada.

Contoh:

jenis kelamin :

laki-laki

perempuan

c. Tombol

Elemen ini digunakan untuk menampilkan tombol, baik itu tombol Submit , maupun Reset.

Contoh.

1) Submit digunakan untuk membuat tombol yang fungsinya untuk mengirimkan dara form agar diolah

2) Reset digunakan untuk membuat tombol yang fungsinya untuk menghapus seluruh isian form yang telah diberikan

d. Checkbox

Serupa dengan tombol, Checkbox memungkinkan user dokumen untuk memilih suatu pilihan dari beberapa pilihan yang tersedia, bedanya Checkbox mengijinkan user memilih lebih dari satu pilihan. Perintah yang digunakan :

Table 4. Daftar atribut yang digunakan pada elemen form

Atribut	Keterangan
Name	Mendefinisikan nama dari suatu objek
Size	Menentukan ukuran kotak teks
Maxlenght	Menentukan jumlah maksimum karakter yang dapat dimasukkan pada kotak teks
Value	Pada elemen kotak teks digunakan untuk menentukan teks yang tertulis. pada elemen check box atau radio digunakan untuk menentukan nilai item yang dipilih sedangkan Pada elemen submit dan reset yaitu digunakan untuk menentukan teks yang tertulis pada tombol
Checked	Digunakan hanya pada checkbox atau radio untuk menentukan pilihan secara default
Type	Menentukan tipe input yang akan dibuat

sumber : http://www.bum1.info

Thursday, July 19, 2012

Mengenal Dasar-dasar HTML

About arde

1 comment:

Recent Posts

Labels

Translate

Kategori

Populer

Cara Install dan Konfigurasi DHCP Server di Debian 6 (squeeze)

Formulir Kontak

Tentang Saya