Pemrograman

Dasar Pemrograman HTML

Hypertext Markup Language
Semua dokumen dan aplikasi yang dapat berjalan di atas web browser umumnya memiliki format hypertext markup language (HTML). Karena itu, untuk bisa melalukan pemrograman aplikasi di atas web anda harus terlebih dahulu menguasai HTML. Walaupun sekarang telah banyak terdapat tool yang dapat anda gunakan untuk membuat halaman secara WYSIWYG seperti Frontpage dan Netscape Editor, namun tetap saja anda harus menguasai HTML terutama untuk membuat aplikasi dengan teknologi CGI.
Setelah mempelajari bagian ini anda diharapkan akan mampu:
Menguasai dasar-dasar HTML.
Mengenal dan mampu menggunakan tag-tag HTML dasar: H1, H2, dst, list, ordered list, dan unordered list.
Menguasai dan mengugnakan tabel HTML untuk menampilkan informasi statis dalam bentuk tabel.
Melakukan pem-format-an paragraph pada dokumen HTML.
Menentukan warna dokumen HTML.
Menggunakan frame HTML.
Melakukan pem-format-an font pada dokumen HTML
Mengerti dan menggunakan form HTML untuk menerima input dari user.

1    Dasar-dasar HTML
HTTP (hypertext transfer procotol) merupakan protokol yang digunakan untuk mentransfer data antar web server ke web browser. Protokol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (hypertext markup language). Dikatakan markup language karena HTML berfungsi untuk ‘memperindah’ file text biasa untuk ditampilkan pada program web browser. Hal ini dilakukan dengan menambahkan tag-tag (perintah khusus) pada file text biasa tadi.
Tag HTML biasanya berupa tag-tag yang berpasang-pasangan dan ditandai dengan simbol
< dan >. Pasangan atau ‘penutup perintah’ dari sebuah tag ditandai dengan tanda ‘/’. Misalnya pasangan dari tag <contoh> adalah </contoh >.
2  Struktur Dokumen HTML
Setiap dokumen atau halaman HTML memiliki struktur atau susunan file sebagai berikut:

<html>
 <head>
  <title>Judul yang akan muncul pada title bar web browser</title>
 </head>
<body>
Text, gambar, atau apapun yang ingin anda tampilkan pada dokumen anda ada pada bagian ini.
</body>
</html>

3    Latihan:  Mengenal Struktur HTML
Ketikkan baris-baris di atas dengan NOTEPAD pada sebuah file baru dengan nama LATIHAN1-1.HTML. Lalu simpan pada direktori C:\TEMP.  Lalu jalankan browser anda dan buka file di atas melalui menu FILE-OPEN.
Hasilnya akan terlihat seperti pada gambar di bawah:
Seperti terlihat, struktur file HTML diawali dengan sebuah tag <HTML> dan ditutup dengan tag </HTML>.  Di dalam tag ini terdapat dua buah bagian besar yaitu yang diapit oleh tag <HEAD> … </HEAD> dan tag <BODY> … </BODY>.
Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <TITLE> … </TITLE> yang berfungsi untuk mengeluarkan judul pada title bar window web browser. Tag lain misalnya <META> dan tag-tag lainnya yang akan kita pelajari kemudian.
Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini anda akan menuliskan semua jenis informasi , berupa text dengan bermacam format maupun gambar, yang ingin anda sampaikan pada pengguna nantinya.
4    Tag Heading
Tag pertama yang akan kita pelajari adalah tag heading yang berfungsi untuk memformat heading (judul dan sub judul) dari sebuah halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada tujuh buah heading yang dikenal di HTML yaitu:
Tabel 1. 1 Tag Heading

Tag pembuka    Tag penutup    Nama          Fungsi
<H1>                        </H1>         Heading 1    Judul Besar
<H2>                       </H2>         Heading 2    Sub judul 1
<H3>                       </H3>         Heading 3    Sub judul 2
<H4>                       </H4>         Heading 4    Sub judul 3
<H5>                       </H5>         Heading 5    Sub judul 4
<H6>                       </H6>         Heading 6    Sub judul 5
<H7>                       </H7>         Heading 7    Sub judul 6

5  Latihan: Mengenal Heading
Ketikkan baris-baris berikut ini pada sebuah file baru, dan simpan dengan nama
LATIHAN1-2.HTML.


 Latihan menggunakan tag heading</pre>
<h1>Produk PT Maju Terus</h1>
<pre>
Berikut ini adalah produk yang terdapat oleh PT Maju Terus.</pre>
<h2>Komputer</h2>
<pre>
Pentium II, Pentium 200, Pentium 100, Pentium 75</pre>
<h2>Asesori</h2>
<pre>
Disket 1.44M, Cartridge 100 M Rp 100.000,</pre>
<h2>Printer</h2>
<pre>
HP Laserjet III Rp 2.000.000, HP Deskjet 500 Rp 1.500.000, HP Deskjet 600C Rp 1.900.000

Jalankan browser anda dan buka file di atas. Perhatikan tampilan yang terlihat. Text yang diapit oleh tag <H1> dan </H1> akan muncul dengan ukuran huruf yang lebih besar dan tebal dibandingkan dengan text normal. Text yang diapit oleh tag <H1> dan </H1> akan muncul dengan ukuran huruf yang lebih besar dan tebal dibandingkan dengan text normal namun lebih kecil daripada text yang diapit oleh tag H1. Demikian seterusnya untuk tag-tag heading selanjutnya.

6    Tag List
Tag <LI> digunakan untuk menampilkan informasi dalam bentuk daftar (list). Ada dua jenis daftar yang dikenal di HTML, yaitu daftar dalam format bullet (bulleted list) dan dalam bentuk nomor (ordered list). Untuk masing-masing jenis list ini diperlukan tambahan tag yang berbeda yaitu tag <UL> dan <OL>.

7    Latihan: Mengenal List
Sebagai contoh, buka lagi file LATIHAN1-2.HTML dan simpan sebagai LATIHAN1-3.HTML. Lalu ketikkan baris-baris tambahan sehingga terlihat seperti berikut ini:


Latihan menggunakan tag heading</pre>
<h1>Produk PT Maju Terus</h1>
<pre>
Berikut ini adalah produk yang terdapat oleh PT Maju Terus.</pre>
<h2>Komputer</h2>
<ol>
	<li>Pentium II</li>
	<li>Pentium 200</li>
	<li>Pentium 100, Pentium 75</li>
</ol>
<h2>Asesori</h2>
<ol>
	<li>Disket 1.44M</li>
	<li>Cartridge 100 M Rp 100.000</li>
</ol>
<h2>Printer</h2>
<ul>
	<li>HP Laserjet III Rp 2.000.000</li>
	<li>HP Deskjet 500 Rp 1.500.000</li>
	<li>HP Deskjet 600C Rp 1.900.000</li>
</ul>
<pre>

Lalu tampilkan pada browser, dan perhatikan tampilannya. Text yang diapit oleh tag <OL> … </OL> akan ditampilkan dalam bentuk daftar yang teratur (nomor 1,2,3,…). Tag <LI> akan menyebabkan browser menampilkan tanda bullet. Namun jika berada diantara tag <UL>… </UL> tag <LI> akan menyebabkan browser menampilkan nomor yang berurutan.

Selamat mencoba dan selamat Belajar


2 thoughts on “Pemrograman

    Mr BoyGilbert said:
    6 February 2009 at 3:25 am

    horas paber…kapan kita bisa bareng ke salib kasih neh?

    Isi blog « Horas Tano Batak said:
    8 May 2009 at 1:06 pm

    […] jaringan click disini, mengenai hecker click disini jika mau langsung kehalamannya dan mengenai pemrogramanpada halaman pemrograman membahas tentang […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s