1. Pengenalan objek Hyper Text Markup Language (HTML)

Transkripsi

1 Pratikum Pemrograman Web 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 Pratikum Pemrograman Web 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 Pratikum Pemrograman Web 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 Pratikum Pemrograman Web 4 Teori: Paragraph HTML otomatis akan menambahkan extra blank line sebelum dan setelah pendeklarasian sebuah paragraph. Dokumen HTML mendefinisikan paragraph menggunakan tag <p>. Pelaksanaan Pratikum 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: Jelaskan penterjemahan tag-tag html (dari kode-kode yang dibuat pada langkah a) oleh browser 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>. Pelaksanaan Pratikum a. Tulis kode HTML pada gambar 1.4 pada sebuah teks Editor.

5 Pratikum Pemrograman Web 5 <html > <head> <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: Jelaskan penterjemahan tag-tag html (dari kode-kode yang dibuat pada langkah a) oleh browser 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. Pelaksanaan Pratikum a. Amati hasil tag-tag dokumen HTML di browser pada gambar 1.5 dan 1.6

6 Pratikum Pemrograman Web 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 Pratikum Pemrograman Web 7 mendisplaykan < di browser, kode yang digunakan oleh dokumen HTML adalah < atau <. Tabel 1.3 merangkumkan daftar entitas karakter. Pelaksanaan Pratikum 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: Jelaskan penterjemahan tag-tag html (dari kode-kode yang dibuat pada langkah b) oleh browser 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: <a href="url">text to be displayed</a>

8 Pratikum Pemrograman Web 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. Pelaksanaan Pratikum 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!!). <html> <head> <title>html-link</title>  </head> <body> <p> <a href="lastpage.htm"> 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> <a href=" >

9 Pratikum Pemrograman Web 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=" target="_blank"> <img src="w3c.gif" alt="visit W3C" width="88" height="31" border="0"></a> </p> <! -block 3 htmllink.html --> <p> This is a mail link: <a href="mailto:someone@microsoft.com?subject=hello%20again &cc=someoneelse@microsoft.com&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> <! -block 4 htmllink.html --> <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 Pratikum Pemrograman Web 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. Pelaksanaan Pratikum a. Amati hasil tag-tag dokumen HTML di browser pada gambar 1.10 sampai 1.12 Gambar 1.10

11 Pratikum Pemrograman Web 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 Pratikum Pemrograman Web 12 T.1.8 Tugas: Jelaskan penterjemahan tag-tag html (dari kode-kode yang dibuat pada langkah b) oleh browser Teori: Tabel - dibuat dengan tag <table>. Sebuah tabel terdiri dari baris-baris yang di definisikan oleh tag. 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. Pelaksanaan Pratikum a. Tulis kode HTML pada gambar 1.13 teks Editor, dan simpan sebagai tabel.html file di folder sesuai NIM. <html> <body> <! -block 1 tabel.html --> <h4>table Border</h4> <h4>a. With a normal border:</h4> <table border="1"> <td>first</td> <td>second</td> <h4>b. With a thick border:</h4> <table border="8"> <td>first</td>

13 Pratikum Pemrograman Web 13 <td>second</td> <h4>c. With a very thick border:</h4> <table border="15"> <th>heading1</th> <th>heading2</th> <td>first</td> <td>second</td> <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"> <th>first Name</th> <th>telephone</th> <th>telephone</th> <td>bill Gates</td>

14 Pratikum Pemrograman Web 14 <td> </td> <td> </td> <h4>b. Vertical headers:</h4> <table border="1"> <th>first Name:</th> <td>bill Gates</td> <th>telephone:</th> <td> </td> <th>telephone:</th> <td> </td> <br> <br> <br> <br> <! -block 3 tabel.html --> <h4> Caption Table </h4> <table border="1"> <caption>my Caption</caption> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td> <br> <br> <br> <br> <! -block 4 tabel.html --> <h4>cell that spans two columns:</h4> <table border="1"> <th>name</th> <th colspan="2">telephone</th>

15 Pratikum Pemrograman Web 15 <td>bill Gates</td> <td> </td> <td> </td> <h4>cell that spans two rows:</h4> <table border="1"> <th>first Name:</th> <td>bill Gates</td> <th rowspan="2">telephone:</th> <td> </td> <td> </td> <br> <br> <br> <br> <! -block 5 tabel.html --> <h4>cellpadding</h4> <h4>table Without cellpadding:</h4> <table border="1"> <td>first</td> <td>second</td> <h4>table with CellPadding = 10</h4> <table border="1" cellpadding="10"> <td>first</td> <td>second</td>

16 Pratikum Pemrograman Web 16 <br> <br> <br> <br> <! -block 6 tabel.html --> <h4>cellspacing</h4> <h4>without cellspacing:</h4> <table border="1"> <td>first</td> <td>second</td> <h4>with cellspacing=10</h4> <table border="1" cellspacing="10"> <td>first</td> <td>second</td> <br> <br> <br> <br> <! -block 6 tabel.html --> <h4>a background color of Table</h4> <table border="1" bgcolor="red"> <td>first</td> <td>second</td>

17 Pratikum Pemrograman Web 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"> Pelaksanaan Pratikum a. Amati 1.15 sampai 1.17 dan tulis kode htmlnya pada teks Editor

18 Pratikum Pemrograman Web 18 Gambar 1.15 Gambar 1.16

19 Pratikum Pemrograman Web 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: Jelaskan penterjemahan tag-tag html (dari kode-kode yang dibuat pada langkah b) oleh browser

20 Pratikum Pemrograman Web 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 Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> Tabel 1.2 Text Formatting Tags Description Membuat teks tebal Membuat teks berukuran besar Membuat emphasized text Membuat teks miring Membuat teks berukuran kecil Membuat strong text Membuat subscripted text Membuat superscripted text Menandai sebuah inserted text Menandai sebuah deleted text Tabel 1.3 Entitas Karakter Tampilan Entity Name Entity Deskripsi Browser Number non-breaking space < < < less than > > > greater than & & & ampersand " " " quotation mark

21 Pratikum Pemrograman Web 21 ' ' (Tidak berfungsi di IE) ' apostrophe cent pound yen section copyright registered trademark multiplication division Tag <frameset> <frame> <noframes> Tag <table> <th> <td> <caption> Attribute cellpading cellspacing colspan rowpan Tag Tabel 1.4 Frame Tag Penjelasan Membuat sebuah frame-set (kumpulan frame-frame) Membuat sebuah sub window (sebuah frame) Mengeset bagian di browser yang tidak menghandel frame Tabel 1.5 Table Tag Deskripsi Membuat suatu tabel Membuat header tabel Membuat baris Mendefinisikan sel data Mendefinisikan Caption Tabel Tabel 1.6 Table Attribute Deskripsi Mendefinisikan spasi dalam sel Mendefinisikan spasi diantara sel Jumlah sel data (kolom) yang dispan (digabung) Jumlah baris yang dispan (digabung) Tabel 1.7 List Tag Description

22 Pratikum Pemrograman Web 22 <ol> <ul> <li> <dl> <dt> <dd> Membuat ordered list Membuat unordered list Definisi dari list item Membuat definition list Mendefinisikan definition term Mendefinisikan definition description

23 Pratikum Pemrograman Web 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 HTML Tutorial, 2006