HTML

HTML merupakan singkatan dari HyperText Markup Language yang merupakan sintaks atau kode yang digunakan untuk membuat halaman web (web page). Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang dapat ditampilkan pada aplikasi web browser.

Tag adalah teks khusus (markup) berupa dua karakter "<" dan ">", secara umum tag ditulis secara berpasangan, yang terdiri atas tag AWAL dan tag AKHIR (ditambahkan karakter "/" setelah karakter "<").

1. Sejarah HTML

HTML 2.0 - (RFC1866) disetujui sebagai standard pada 22 September 1995

HTML 3.2 - 14 Januari 1996

HTML 4.0 - 18 Desember 1997

ISO/IEC 15445:2000 “ISO HTML” berdasar pada HTML 4.01 Strict – 15 Mei 2000

XHTML 1.0 ? gabungan HTML & XML - 24 Januari 2000

XHTML 1.1 - 16 February 2007.

HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox, Microsoft Internet Explorer dan lain-lain.

2. Editor HTML

Untuk membuat dokumen HTML, anda perlu mengetahui dan mempelajari tag-tag yang digunakan untuk menandai bagian-bagian dari suatu dokumen HTML. Anda dapat menggunakan program editor teks biasa seperti Notepad untuk aplikasi Windows atau Sidekick dan WordStar dalam format Non Document untuk aplikasi DOS.

Semua dokumen HTML harus disimpan sebagai file teks murni. Ada dua macam ekstensi file yang dapat digunakan, yaitu ekstensi file “.html” ( untuk sistem operasi UNIX atau WINDOWS 95) atau “.htm” ( untuk sistem operasi DOS/WINDOWS 3.x)

3. Struktur HTML

Secara umum struktur penulisan dokumen HTML, diawali dengan <html> diakhiri dengan </html> sebagai berikut:

<html> <head>  <title> ……. </title> </head>  <body> ..................................  </body> </html>  Contoh: <html> <head>  <title> Disini Judul Homepage </title> </head>  <body>   Selamat belajar HTML  </body> </html>

4. Elemen-Elemen HTML

1. HEAD

Head berfungsi untuk mengidentifikasi header web yang berisikan informasi tentang web. Bentuk umum tag head sebagai berikut:

<html> <head> …. </head> </html>

Tag HEAD memilki beberapa atribut, antara lain: title, meta, style, link, script.

Tag TITLE, digunakan untuk memberikan judul dari suatu homepage, contoh penggunaan tag title:

<html> <head>  <title> Contoh Pembuatan Judul Homepage </title> </head> </html>

Tag META, digunakan untuk menunjukan informasi metadata mengenai halaman web yang sedang diakses, contoh penggunaan tag meta:

<html> <head>  <meta name=”generator” content=”Wordpress 3.0” /> </head> </html>

Tag STYLE, digunakan untuk menentukan berbagai bentuk, ukuran, warna, dari tag yang digunakan agar tidak terjadi pemborosan penggunaan tag. Berikut contoh tag STYLE:

<html> <head>  <style type=”text/css”>   Body {background-color:orange} </style> </head> </html>

Tag LINK, digunakan untuk menautkan suatu halaman dengan halaman atau dokumen lainnya. Contoh penggunaan tag LINK:

<html> <head>  <a href=”http://www.tastajaya.blogspot.com”> Blog Tasta </a> </head> </html>

Tag BASE, menyatakan URL asal dari suatu dokumen, Contoh:

<HTML> <HEAD> <TITLE>Homepage Pribadi Q</TITLE>  <BASE HREF=http://www.tastajaya.bogspot.com> </HEAD> </HTML>

2. BODY

Tag Body, merupakan tempat untuk menuliskan isi dari sebuah halaman web seperti teks, gambar, tabel dan lainnya yang akan ditampilkan pada halaman web. Tag Body memiliki beberapa atribut diantaranya:

Tag <background=” “ />, digunakan untuk memuat latar belakang dengan gambar/foto, Contoh:

<HTML> <HEAD> <TITLE>Contoh Penggunaan Tag Background</TITLE> </HEAD> <body background="C:\Users\Riyo\Documents\Desert.jpg" > </body> </HTML>

Tag <bgcolor=” “ />, digunakan untuk menentukan warna latar belakang homepage, Contoh:

<HTML> <HEAD> <TITLE>Contoh Penggunaan Tag BgColor</TITLE> </HEAD> <body bgcolor="#FFFFBB" > </body> </HTML>

Tag <bgproperties=” “ />, digunakan untuk menentukan nilai property background tetap, Contoh:

<body bgproperties=”fixed” />

Tag <leftmargin=” “ />, digunakan untuk menentukan batas kiri halaman dalam satuan pixel, Contoh:

<HTML> <HEAD> <TITLE>Contoh Penggunaan Tag Leftmargin</TITLE> </HEAD> <body leftmargin="50" bgcolor="#99CC33"> Menentukan Batas Kiri Suatu Halaman Web dalam satuan pixel </body> </HTML>

Tag <topmargin=” “ />, digunakan untuk menentukan batas atas halaman dalam satuan pixel, Contoh:

<HTML> <HEAD> <TITLE>Contoh Penggunaan Tag TopMargin</TITLE> </HEAD> <body leftmargin="100" topmargin="150" bgcolor="#99CCAA"> Menentukan batas atas halaman dalam satuan pixel </body> </HTML>

Tag <text=” “ />, digunakan untuk menentukan warna teks, Contoh:

<HTML> <HEAD> <TITLE>Contoh Penggunaan Tag Text</TITLE> </HEAD> <body leftmargin="100" topmargin="150" bgcolor="#99CCAA" text="#FF0000"> Menentukan Warna Teks </body> </HTML>

Pada bagian body terdapat beberapa tag untuk mengatur format Judul, teks, penomoran, paragraf, font diantaranya:

Heading dengan format tag <h3> …. </h3>, digunakan untuk menentukan ukuran judul naskah (paling kecil <h6> dan paling besar <h1>), Contoh:

<HTML> <HEAD> <TITLE>Contoh Penggunaan Tag Judul Naskah</TITLE></HEAD> <body> <h1> Ini Ukuran Heading1 </h1> <h2> Ini Ukuran Heading2 </h2> <h3> Ini Ukuran Heading3 </h3> <h4> Ini Ukuran Heading4 </h4> <h5> Ini Ukuran Heading5 </h5> <h6> Ini Ukuran Heading6 </h6> </body> </HTML>

Garis Horizontal dengan format tag: <HR />, berfungsi untuk menampilkan garis horizontal, Contoh:

<HTML> <HEAD> <TITLE>Contoh Pengauturan Tag HR</TITLE></HEAD> <body> Selamat Datang... <hr> Terimakasih Atas Kunjungan Anda </body> </HTML>

Breakline (Baris Baru) dengan format tag <BR> berfungsi untuk menentukan baris baru atau baris berikutnya, Contoh:

<HTML> <HEAD> <TITLE>Contoh Pengauturan Teks</TITLE></HEAD> <body> Ini Baris Awal <br> Ini Pindah ke Baris Baru </body> </HTML>

Format Teks: merupakan suatu jenis format yang diberikan pada teks tanpa tergantung jenis dari elemen dasar teks tersebut antara lain:

- <B>…</B> : Untuk menebalkan teks

- <I>…</I> : Untuk membuat teks tampil miring

- <U>…</U> : Untuk membuat teks tampil bergaris-bawah

- <BIG>…</BIG> : Untuk memperbesar teks

- <SMALL>…</SMALL> : Untuk memperkecil teks

- <STRONG>…</STRONG> : Untuk membuat efek Strong

- <S>…</S> : Untuk membuat efek coretan pada teks

- <TT>…</TT> : Untuk menampilkan teks dalam font typewriter

- <SUB>…</SUB> : Untuk membuat teks subscript

- <SUP>…</SUP> : Untuk membuat teks superscript

ATRIBUT FONT SIZE Untuk menentukan ukuran font, elemen FONT menyediakan atribut dengan nilai 1 sampai 7. Nilai 1 digunakan untuk membuat teks ukuran terkecil, standar teks pada halaman web adalah nilai 3. Ukuran font teks dapat ditentukan secara relatif berdasarkan ukuran default, yaitu dengan mendahului ukuran font dengan tanda + atau -. Contoh : font ukuran 4 bisa ditulis Size=+1., Contoh:

<html> <head> <title>Menentukan Ukuran Font</title> </head> <body bgcolor=lightgrey> <h1>Ukuran Font</h1> <h2> <font size=1> Size 1</font><br> <font size=-1> Size 2</font><br> <font size=3> Size 3</font><br> <font size=4> Size 4</font><br> <font size=+2> Size 5</font><br> <font size=6> Size 6</font><br> <font size=+4> Size 7</font><br> </h2>  </body>   </html>

ATRIBUT FONT COLOR digunakan untuk memberi warna pada font. Atribut Color menerima nilai RGB suatu warna atau nama warna, Contoh:

<html> <head> <title>Font Size</title> </head> <body bgcolor=lightgrey> <h1>Warna Font</h1> <h2> <font size=4 COLOR="#FF0000"> Teks berwarna merah</font><br> <font size=5 COLOR="GREEN"> Teks Berwarna Hijau</font><br> </h2> </body>  </html>

ATRIBUT FONT FACE: menentukan jenis huruf (font) dengan format Tag: <FONT FACE=”ARIAL”>…</FONT>, Contoh:

<html> <head> <title>Penggunaan Tag Font Face</title> </head> <body bgcolor=pink> <font face="VERDANA" size="6"> Tulisan ini Menggunakan Jenis Font VERDANA </font> </body>  </html>

Penomoran dengan format tag <ol><li> … </li></ol>, digunakan untuk penulisan penomoran, Contoh:

<html> <head> <title>Penggunaan Tag OL-LI untuk Penomoran</title> </head> <body> <ol> Teman-tamanku yang paling setia: <li> Ucok </li> <li> Butet </li> <li> Acong </li> <li> Buyunng </li> </ol> </body>  </html>

Daftar dengan tag <ul><li> … </li></ul> digunakan untuk penulisan daftar tanpa nomor, Contoh:

<html> <head> <title>Penggunaan Tag UL-LI untuk Penomoran</title> </head> <body> <ul> Daftar Calon Mahasiswa TP. 2012/2013: <li> Sukri </li> <li> Agam </li> <li> Bonar </li> <li> Surti </li> </ul> </body>  </html>

PARAGRAF dengan format tag <P>…</P> berfungsi untuk pengaturan perataan teks paragraf dalam dokumen HTML. Atribut yang digunakan dalam paragraf ALIGN mempunyai tiga nilai, yaitu :

• LEFT, untuk meratakan teks ke margin kiri, Contoh:

<P ALIGN=”LEFT”>Paragraf Rata Kiri</P>

• RIGHT, untuk meratakan teks ke margin kanan

<P ALIGN=”CENTER”>Paragraf Rata Kanan</P>

• CENTER, untuk meratakan teks ke tengah margin

<P ALIGN=”RIGHT”>Paragraf Rata Tengah</P>

Tag <DIV>…..</DIV> digunakan untuk membuat tabel sederhana, Contoh:

<html> <head> <title>Pembagian Halaman Dokumen HTML</title> </head> <body> <div style="border:double" align=center> <h1>Ini Tabel Atas </h1> <br> <br> <div style="border:double" align="left"> <h1>Ini Tabel Tengah </h1> <br> <br> </div> <div style="border:double" align="right"> <h1>Ini Tabel Bawah</h1> </div> </body> </html>

3. Menu

Menu adalah suatu daftar item yang pendek yang tidak disertai dengan nomor ataupun penanda item. Menu List menggunakan tag awal <MENU> … </MENU>, didalamnya menggunakan tag <LI>. Browser secara otomatis akan mengidentifikasi setiap item yang ada dalam menu list. Menu List biasanya digunakan untuk menampilkan item-item yang mempunyai link ke page lain. Untuk membuat link ini digunakan tag <A> yang akan membuat link ke halaman lain. Penggunaan tag <A> adalah <A HREF “page.html”> link ke halaman page.html </A>.

<html> <head> <title>Menu List</title> </head> <body bgcolor="#66FFFF"> <MENU>         <LH><EM><h1><b><u> Menu  </h1></b></u></EM>         <LI><A HREF="Beranda.html">Beranda</A>         <LI><A HREF="Profil.html">Profil</A>         <LI><A HREF="Album.html">Album</A>         <LI><A HREF="Artikel.html">Artikel</A> </MENU> </body> </html>

4. Image

Untuk menyisipkan gambar dalam dokumen HTML dengan tag IMG dan diikuti atribut SRC.

<img src=”foto.jpg”> <img src="C:\images\foto.jpg"> <img src="test.jpg" width=100 height=100>

5. Tabel

Untuk membuat table digunakan beberapa tag:

Tag <TABLE>, berfungsi untuk mendefenisikan tabel

Tag <TR>, berfungsi untuk mendefenisikan baris table

Tag <TD>, berfungi untuk mendefenisikan kolom table

Tag <TH>, berfungsi untuk mendefenisikan judul pada kolom atau baris table

<html>  <head><title> Membuat Tabel </title></head>  <body>   <table border="1">   <tr>    <th> Ini Judul Kolom 1 </th>    <th> Ini Judul Kolom 2 </th>   </tr>   <tr>    <th> Ini Baris 1, Kolom 1 </th>    <th> Ini Baris 1, Kolom 2 </th>   </tr>   <tr>    <th> Ini Baris 2, Kolom 1 </th>    <th> Ini Baris 2, Kolom 2 </th>   </tr>   </table>  </body>  </html>

6. Form

Form biasanya digunakan untuk membuat buku tamu, daftar isian dan sebagainya, terdapat beberapa tag yang digunakan antara lain:

Tag <FORM>, berfungsi untuk mendefenisikan pembuatan form yang diikuti oleh atribut yaitu:

o METHOD untuk pengolahan form

o ACTION untuk menentukan direktori file.

Tag <TEXTAREA>, digunakan untuk membuat kotak isian teks yang diikuti oleh atribut:

o NAME untuk nama objek teks area,

o ROWS untuk menentukan jumlah baris teks area,

o COLS untuk pilihan lebih dari satu.

Tag <INPUT>, digunakan untuk meminta masukan dari pengunjung web dengan diikuti oleh atribut:

o NAME untuk objek masukan (input)

o SIZE untuk menentukan ukuran kotak Input

o MAXLENGTH untuk menentukan jumlah teks maksimal

o VALUE untuk menentukan nilai tetap dari objek Input

o CHECKED untuk menentukan pilihan atau RADIO BUTTON

o TYPE untuk menentukan tipe dari input.

<html>  <head>  <title> Membuat Form Sederhana </title>  </head>  <body>   <form>   <center><h5> BUKU TAMU </h5> </center>   <hr>   <pre>   Silahkan Isi Data Berikut: <br>   Nama : <input type=text size="100" name=nama>   Alamat : <input type=text size="100" name=alamat>   E-mail : <input type=text size="100" name=email> <br>   Jenis Kelamin:   <input type=radio name=kelamin value=pria> Pria   <input type=radio name=kelamin value=wanita> Wanita   Komentar: <br>   <textarea name=komentar rows=10 cols=90>   Isi Komentar Anda   </textarea>   </pre>   <center>   <input type="button" name=Submit value="Kirim" Kirim>   <input type="button" name=Reset value="Batal" Batal>   </center>   </form>  </body>  </html>

Wednesday, September 26, 2012

PEMROGRAMAN WEB - PENDAHULUAN