1. Pengenalan objek Hyper Text Markup Language (HTML)

(1)

1. Pengenalan objek Hyper Text Markup

Language (HTML)

Pendahuluan

Untuk mempublish informasi agar terdistribusi global, perlu bahasa yang dapat dipahami secara universal, yaitu jenis bahasa yang menjadi induk yang dimengerti oleh semua komputer. Bahasa publishing yang digunakan oleh WWW adalah HTML.

HTML mempunyai kemampuan sebagai berikut:

• Mempublish dokumen dengan heading (judul), teks, table, list (format listing), foto, dan sebagainya.

• Menavigasikan informasi melalui hypertext link, dengan sebuah tombol klik

• Membuat form isian untuk proses transaksi dengan sebuah remote service (server), pencarian informasi (searching process), membuat pemesanan produk, dan sebagainya

• Aplikasi lain dapat dimasukkan secara langsung ke dalam dokumen HTML, seperti video klip, spread-sheet (excel), suara, dan sebagainya. Tujuan Pratikum:

• Memahami HTML dan mengerti sintaks-sintaks HTML

• Memahami semantik HTML, dan elemen-elemen HTML sebagai dasar untuk pemrograman World Wide Web (WWW)

Tools/peralatan yang digunakan:

• Teks Editor (Edit plus, Notepad, UEStudio, dan lain-lain) • Browser (Internet Explorer, Mozilla, Netscape, Firefox) Percobaan 1- Struktur dokumen HTML

• Teori: Struktur dokumen HTML – strukturnya tersusun atas tiga bagian:

Baris berisi informasi versi HTML

Deklarasi header ( dimulai dengan tag <HEAD>)

Body yang mana merupakan isi sesungguhnya dari dokumen HTML, body dapat mengimplementasikan tag <BODY> atau tag <FRAMESET>

(2)

Sebagai tambahan, sebuah file HTML dapat disimpan dalam format .htm atau .html.

Pelaksanaan pratikum:

a. Tulis kode HTML pada gambar 1.1 pada sebuah teks Editor. <html>

<head>

<title>Title of page</title> </head>

<body>

This is my first homepage. <b>This text is bold</b> </body>

</html>

Gambar 1.1a

b. Simpan sebagai myfirstpage.htm di folder sesuai NIM.

c. Buka sebuah browser, dan pilih "Open" (atau "Open Page") dari File menu. Sebuah box dialog akan muncul. Pilih "Browse" (atau "Choose File") dan arahkan ke file HTML yang baru dibuat - "myfirstpage.htm" – pilih dan klik "Open".

d. Browser seharusnya menampilkan myfirstpage.htm seperti gambar 1.1b

Gambar 1.1b T.1.1 Tugas:

Jelaskan penterjemahan tag-tag html (dari kode-kode yang dibuat pada langkah a) oleh browser.

Jawab: Ketika browser menemukan tag <html>, browser tahu bahwa dokumen yang sedang dibaca adalah dokumen HTML. Tag selanjutnya adalah tag <head>, tag ini memberi info pada browser bahwa teks antara <head> dan </head> adalah header. Header pada dokumen diatas memuat tag <title>. Teks antara tag <title> dan </title> adalah judul

(3)

dari dokumen HTML (“Title of page”), ditampilkan di browser's caption. Pada body dokumen tersebut (body didefinisikan oleh tag <body> </body>), terdapat teks “This is my first homepage” dan “This text is bold”. Teks yang terakhir berada diantara tag <b> dan </b>, sehingga ditampilkan dengan font bold di window browser. Tag </html> merupakan petunjuk bagi browser akan akhir dokumen HTML.

Percobaan 2- Tag Dasar HTML

Teori: Heading - Tag yang paling penting didalam sebuah dokumen HTML adalah tag-tag yang mendeklarasikan heading, paragraph dan line break. Heading didefinisikan dengan tag <h1> sampai <h6>. Tag <h1> adalah heading paling besar. <h6> mendefinisikan heading paling kecil.

Pelaksanaan Pratikum

a. Tulis kode HTML pada gambar 1.2 pada sebuah teks Editor <html > <head> <title>Heading</title> </head> <body> <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> </body> </html> Gambar 1.2

b. Simpan sebagai myheading.htm di folder sesuai NIM. c. Ulangi langkah c sampai d pada percobaan 1

T.1.2 Tugas:

Jelaskan penterjemahan tag-tag html (dari kode-kode yang dibuat pada langkah a) oleh browser

(4)

_________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ Teori: Paragraph – HTML otomatis akan menambahkan extra blank line

sebelum dan setelah pendeklarasian sebuah paragraph. Dokumen HTML mendefinisikan paragraph menggunakan tag <p>.

a. Tulis kode HTML pada gambar 1.3 pada sebuah teks Editor. <html>

<body>

<p>This is a paragraph.</p>

<p>Paragraph elements are defined by the p tag.</p> </body>

</html>

Gambar 1.3

b. Simpan sebagai myparagraph.htm di folder sesuai NIM. c. Ulangi langkah c sampai d pada percobaan 1

T.1.3 Tugas:

_________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ Teori: Line break – line break diperlukan jika ingin mengakhiri sebuah

baris dengan tidak memulai suatu paragraph baru. Dokumen HTML mendefinisikan line break menggunakan tag <br>. Yang perlu diingat tag <br> adalah empty tag. Artinya tidak memerlukan tag penutup </br>.

(5)

<title>Line Break</title> </head>

<body>

<p>This <br> is a para<br>graph with line breaks</p> </body>

</html>

Gambar 1.4

b. Simpan sebagai mylinebreak.htm di folder sesuai NIM. c. Ulangi langkah c sampai d pada percobaan 1

T.1.4 Tugas:

_________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ Tag-tag lain yang merupakan Basic Tag di HTML adalah <hr> dan  adalah sebuah comment yang merupakan keterangan tambahan yang tidak diproses oleh browser.

Percobaan 3- Memformat Text

Teori: Format Text - HTML mempunyai banyak elemen tag untuk memformat keluaran teks, seperti teks tebal dan teks miring. Tabel 1.2 merangkumkan tag untuk memformat teks.

a. Amati hasil tag-tag dokumen HTML di browser pada gambar 1.5 dan 1.6

(6)

Gambar 1.5

Gambar 1.6

b. Tulis kode dari gambar 1.5 dan 1.6 pada sebuah teks editor. c. Simpan file tersebut dengan nama formattingtex.html dan

formattingtex1.html di folder sesuai NIM T.1.5 Tugas:

Jelaskan penterjemahan tag-tag html (dari kode-kode yang dibuat pada langkah b) oleh browser

_________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ Percobaan 4 - Entitas Karakter

Teori: Entitas -Beberapa karakter seperti “<” mempunyai kode khusus di HTML, untuk mendisplaykan karakter ini dibrowser, dilakukan dengan cara menulis entitas karakternya. Sebuah entitas karakter mempunyai tiga elemen, yaitu: ampersand (&); entity name atau gabungan # dan entity number; terakhir adalah semicolon (;). Untuk

(7)

mendisplaykan “<” di browser, kode yang digunakan oleh dokumen HTML adalah “ < ” atau “ < “. Tabel 1.3 merangkumkan daftar entitas karakter.

a. Amati hasil tag-tag dokumen HTML di browser pada gambar 1.7

Gambar 1.7

b. Tulis kode dari gambar 1.7 pada sebuah teks editor.

c. Simpan file tersebut dengan nama Karakter Entitas.html di folder sesuai NIM

T.1.6 Tugas:

_________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ Percobaan 5 - Link

Teori: Link -HTML menggunakan hyperlink untuk link ke resources di Web. Resources yang dimaksud disini dapat berupa dokumen HTML, image, file multimedia, dll. Implementasi hyperlink pada HTML adalah penggunaan tag <a> (anchor). Sedangkan objek hyperlink dapat berupa teks ataupun image. Format untuk membentuk hyperlink adalah:

(8)

Tag <a> untuk membuat anchor ke suatu target resources, href adalah attribute dari alamat resources tersebut berada, dan selanjutnya “Text to be dislayed” akan ditampilkan sebagai hyperlink.

a. Tulis kode HTML pada gambar 1.8 dan 1.9 pada teks Editor, dan simpan sebagai htmllink.html dan lastpage.html file di folder sesuai NIM. Copykan juga w3c.gif di folder tersebut (minta image tersebut pada asisten!!).

This text</a> is a link to a page on this Web site.

</p> </body> </html> Gambar 1.8 <html> <head> <title>LastPage</title>  </head> <body>

This is Last Page!! </body>

</html>

Gambar 1.9

b. Tambahkan pada body “htmllink.html” blok kode berikut ini, setelah itu simpan dengan nama yang sama, dan amati hasilnya di browser

<!—-block 1 htmllink.html--> <p>

(9)

This text</a> is a link to a page on

the Microsoft.com, linked document will be opened in this current browser window

</p>

c. Ulangi langkah b dengan blok-blok kode berikut ini (perhatian!!, setiap kali menambah satu blok kode, simpan dan lihat hasilnya di browser)

<!—-block 2 htmllink.html --> <p>

You can also use an image as a link, the linked document will be opened in new browser window:

<a href="http://www.w3schools.com/" target="_blank"> <img src="w3c.gif" alt="Visit W3C" width="88"

height="31" border="0"></a> </p>

This is a mail link: <a href="mailto:[email protected]?subject=Hello%20again &[email protected]&bcc=andsomeoneelse2@micros oft.com&subject=Summer%20Party&body=You%20are%20invited% 20to%20a%20big%20summer%20party!"> Send Mail</a> <br>

<b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly.

</p>

<a name="start">Add 40 break lines </a>, This link will jump to <a href="#tips">Useful Tips Section</a> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

(10)

<a name="tips">Useful Tips Section. If you need back in previous <a href="#start" target="_top">click Me</a></a> </p>

T.1.7 Tugas:

Buatlah kesimpulan dari percobaan diatas dengan cara membuat penjelasan penterjemahan tag-tag html step by step mulai dari langkah a sampai c _________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ Percobaan 6 - Frame dan Tabel

Teori: Frame - digunakan untuk mendisplaykan lebih dari satu halaman web dalam sebuah window browser. Disini, setiap dokumen HTML merupakan sebuah frame, dan tiap-tiap frame adalah independent dari yang lain. Tabel 1.4 merangkumkan tag-tag untuk membuat frameset.

a. Amati hasil tag-tag dokumen HTML di browser pada gambar 1.10 sampai 1.12

(11)

Gambar 1.11

Gambar 1.12

b. Tulis kode dari gambar 1.10 sampai 1.12 pada sebuah teks editor. c. Simpan file-file tersebut dengan nama FrameSet.htm, left.htm dan

right.htm berturut-turut di folder sesuai NIM. Perhatikan “left frame”mempunyai target di “right frame”. Left frame mempunyai width 20%, sedangkan right frame 80%. Pada left.htm terdapat hyperlink sebagai berikut:

• “Link to htmllink.htm” mempunyai hyperlink ke htmllink.html

• “Link to lastpage.htm” mempunyai hyperlink ke lastpage.htm.

Notes: htmllink.html dan lastpage.htm adalah file-file yang anda buat pada percobaan 5.

(12)

T.1.8 Tugas:

_________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ Teori: Tabel - dibuat dengan tag <table>. Sebuah tabel terdiri dari baris-baris yang di definisikan oleh tag <tr>. Tiap baris dibagai dalam sel data dengan menggunakan tag <td>. Sel data dapat berisi teks, image, list, paragraph, form, garis horizontal, tabel, dan lain sebagainya. Tabel 1.5 dan 1.6 merangkumkan tag-tag HTML dan Table Attribute untuk sebuah tabel.

a. Tulis kode HTML pada gambar 1.13 teks Editor, dan simpan sebagai tabel.html file di folder sesuai NIM.

<!—-block 1 tabel.html --> <h4>Table Border</h4>

<h4>a. With a normal border:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>

<h4>b. With a thick border:</h4> <table border="8">

<tr>

<td>First</td> <td>Row</td>

(13)

</tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>

<h4>c. With a very thick border:</h4> <table border="15"> <tr> <th>Heading1</th> <th>Heading2</th> </tr> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <br> <br> <br> <br> </body> </html> Gambar 1.13

b. Tambahkan pada body “tabel.html” (setelah tag <br><br><br><br>) blok-blok kode berikut ini (perhatian!!, setiap kali menambah satu blok kode, simpan dan lihat hasilnya di browser)

<!—-block 2 tabel.html --> <h4>Table headers:</h4> <h4>a. Horizontal Headers</h4> <table border="1"> <tr> <th>First Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td>

(14)

<td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>b. Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table> <br> <br> <br> <br> <!—-block 3 tabel.html --> <h4> Caption Table </h4> <table border="1"> <caption>My Caption</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <br> <br> <br> <br> <!—-block 4 tabel.html -->

<h4>Cell that spans two columns:</h4> <table border="1">

<tr>

(15)

</tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>

<h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> <br> <br> <br> <br> <!—-block 5 tabel.html --> <h4>CellPadding</h4>

<h4>Table Without cellpadding:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>

<h4>Table with CellPadding = 10</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td>

(16)

</tr> </table> <br> <br> <br> <br> <!—-block 6 tabel.html --> <h4>Cellspacing</h4> <h4>Without cellspacing:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellspacing=10</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <br> <br> <br> <br> <!—-block 6 tabel.html -->

<h4>A background color of Table</h4> <table border="1" bgcolor="red"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>

(17)

T.1.9 Tugas:

Buatlah kesimpulan dari percobaan diatas dengan cara membuat penjelasan penterjemahan tag-tag html step by step mulai dari langkah a sampai b _________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ Percobaan 7 - List dan Image

Teori: List - di HTML dapat berupa angka berurut (ordered list), bullets (unordered list), dan definition list. Tabel 1.7 merangkumkan tag List HTML. Format masing-masing list adalah sebagai berikut:

Unordered list : <ul> </ul>, tiap item list di mulai dengan tag <li>

Ordered list: <ol> </ol>, tiap item list di mulai dengan tag <li> Definition list: <dl> </dl>, tiap “definition-list term” di mulai dengan tag <dt> dan tiap “definition-list definition” dimulai dengan tag <dd>. Gambar 1.14 menjelaskan hal ini.

Gambar 1.14

Image didefinisikan dengan tag <img>. Untuk menampilkan image pada sebuah halaman web diperlukan attribute src. Nilai dari attribute src adalah URL dari image yang ingin ditampilkan di halaman web. Sintaks dari pendefinisian sebuah image: <img src="url">

(18)

Gambar 1.15

(19)

Gambar 1.17

b. Simpan kode-kode terebut sebagai orderedlist.htm,

unorderedlist.htm dan definitionlist.htm file di folder sesuai NIM. T.1.10 Tugas:

_________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________

(20)

Kesimpulan:

Berikut ini adalah tabel-tabel yang merangkumkan tag-tag dokumen HTML.

Tabel 1.1 Basic HTML Tags

Tag Description

<html> Spesifikasi sebuah dokumen HTML

<body> Mendefinisikan body

<h1> to <h6> Mendefinisikan header 1 sampai header 6

<p> Mendefinisikan sebuah paragraph

<br> Menyisipkan sebuah line break

<hr> Membuat sebuah horizontal rule

<!--> Definisi sebuah komentar

Tabel 1.2 Text Formatting Tags

Tag Description

<b> Membuat teks tebal

<big> Membuat teks berukuran besar

<em> Membuat emphasized text

<i> Membuat teks miring

<small> Membuat teks berukuran kecil

<strong> Membuat strong text

<sub> Membuat subscripted text

<sup> Membuat superscripted text

<ins> Menandai sebuah inserted text

<del> Menandai sebuah deleted text Tabel 1.3 Entitas Karakter Tampilan

Browser

Entity Name Entity Number

Deskripsi     non-breaking

space

< < < less than

> > > greater than & & & ampersand " " " quotation mark

(21)

' ' (Tidak berfungsi di IE)

' apostrophe

¢ ¢ ¢ cent

£ £ £ pound

¥ ¥ ¥ yen

§ § § section

® ® ® registered

trademark × × × multiplication ÷ ÷ ÷ division

Tabel 1.4 Frame Tag Tag Penjelasan

<frameset> Membuat sebuah frame-set (kumpulan frame-frame)

<frame> Membuat sebuah sub window (sebuah frame)

<noframes> Mengeset bagian di browser yang tidak menghandel frame

Tabel 1.5 Table Tag

Tag Deskripsi

<table> Membuat suatu tabel

<th> Membuat header tabel

<tr> Membuat baris

<td> Mendefinisikan sel data

<caption> Mendefinisikan Caption Tabel Tabel 1.6 Table Attribute Attribute Deskripsi

cellpading Mendefinisikan spasi dalam sel cellspacing Mendefinisikan spasi diantara sel colspan Jumlah sel data (kolom) yang dispan

(digabung)

rowpan Jumlah baris yang dispan (digabung) Tabel 1.7 List Tag

(22)

<ol> Membuat ordered list

<ul> Membuat unordered list

<li> Definisi dari list item

<dl> Membuat definition list

<dt> Mendefinisikan “definition term”

(23)

Referensi

• W3C, "HTML 4.01 Specification", December 1999

• Chuck Musciano and Bill Kennedy, "HTML: The Definitive Guide", May 1997

• Wahana Komputer Semarang, "Desain Web dengan Microsoft FrontPage 97", Cetakan Pertama 1998