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 ) ƒ Body yang mana merupakan isi sesungguhnya dari dokumen HTML, body dapat mengimplementasikan tag atau tag

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. This is my first homepage. This text is bold

b. c.

d.

Gambar 1.1a Simpan sebagai myfirstpage.htm di folder sesuai NIM. 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". 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 , browser tahu bahwa dokumen yang sedang dibaca adalah dokumen HTML. Tag selanjutnya adalah tag , tag ini memberi info pada browser bahwa teks antara dan adalah header. Header pada dokumen diatas memuat tag adalah judul

Pratikum Pemrograman Web

3

dari dokumen HTML (“Title of page”), ditampilkan di browser's caption. Pada body dokumen tersebut (body didefinisikan oleh tag ), terdapat teks “This is my first homepage” dan “This text is bold”. Teks yang terakhir berada diantara tag dan , sehingga ditampilkan dengan font bold di window browser. Tag 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

sampai

. Tag

adalah heading paling besar.

mendefinisikan heading paling kecil. Pelaksanaan Pratikum a. Tulis kode HTML pada gambar 1.2 pada sebuah teks Editor

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

Gambar 1.2 b. c.

Simpan sebagai myheading.htm di folder sesuai NIM. 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

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

. Pelaksanaan Pratikum a. Tulis kode HTML pada gambar 1.3 pada sebuah teks Editor.

This is a paragraph.

Paragraph elements are defined by the p tag.

Gambar 1.3 b. c.

Simpan sebagai myparagraph.htm di folder sesuai NIM. 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
. Yang perlu diingat tag
adalah empty tag. Artinya tidak memerlukan tag penutup
. Pelaksanaan Pratikum a. Tulis kode HTML pada gambar 1.4 pada sebuah teks Editor.

Pratikum Pemrograman Web

5

This
is a para
graph with line breaks

b. c.

Gambar 1.4 Simpan sebagai mylinebreak.htm di folder sesuai NIM. 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

---

dan . Tag

---

digunakan untuk membuat horizontal line, sedangkan tag 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

Pratikum Pemrograman Web

6

Gambar 1.5

Gambar 1.6 b. c.

Tulis kode dari gambar 1.5 dan 1.6 pada sebuah teks editor. 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

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

b. c.

Gambar 1.7 Tulis kode dari gambar 1.7 pada sebuah teks editor. 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 (anchor). Sedangkan objek hyperlink dapat berupa teks ataupun image. Format untuk membentuk hyperlink adalah: Text to be displayed

Pratikum Pemrograman Web

8

Tag 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!!).

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

Gambar 1.8 This is Last Page!!

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

Pratikum Pemrograman Web

9

This text is a link to a page on the Microsoft.com, linked document will be opened in this current browser window

c.

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

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

This is a mail link: Send Mail
Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly.

Add 40 break lines , This link will jump to Useful Tips Section









































Pratikum Pemrograman Web

10

Useful Tips Section. If you need back in previous click Me

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

Pratikum Pemrograman Web

11

Gambar 1.11

Gambar 1.12 b. c.

Tulis kode dari gambar 1.10 sampai 1.12 pada sebuah teks editor. 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.

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 . Sebuah tabel terdiri dari baris-baris yang di definisikan oleh tag . Tiap baris dibagai dalam sel data dengan menggunakan tag

. 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. Table Border a. With a normal border: First Row Second Row b. With a thick border: Pratikum Pemrograman Web 13 First Row Second Row c. With a very thick border: Heading1 Heading2 First Row Second Row Gambar 1.13 b. Tambahkan pada body “tabel.html” (setelah tag ) blok-blok kode berikut ini (perhatian!!, setiap kali menambah satu blok kode, simpan dan lihat hasilnya di browser) Table headers: a. Horizontal Headers Pratikum Pemrograman Web First Name Telephone Telephone Bill Gates 555 77 854 555 77 855 b. Vertical headers: First Name: Bill Gates Telephone: 555 77 854 Telephone: 555 77 855 Caption Table My Caption 100 200 300 400 500 600 Cell that spans two columns: 14 Pratikum Pemrograman Web Name Telephone Bill Gates 555 77 854 555 77 855 Cell that spans two rows: First Name: Bill Gates Telephone: 555 77 854 555 77 855 CellPadding Table Without cellpadding: First Row Second Row Table with CellPadding = 10 15 Pratikum Pemrograman Web First Row Second Row Cellspacing Without cellspacing: First Row Second Row With cellspacing=10 First Row Second Row A background color of Table First Row Second Row 16 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 : , tiap item list di mulai dengan tag ƒ Ordered list: , tiap item list di mulai dengan tag ƒ Definition list: , tiap “definition-list term” di mulai dengan tag dan tiap “definition-list definition” dimulai dengan tag . Gambar 1.14 menjelaskan hal ini. Gambar 1.14 Image didefinisikan dengan tag . 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: Pelaksanaan Pratikum a. Amati 1.15 sampai 1.17 dan tulis kode htmlnya pada teks Editor Pratikum Pemrograman Web 18 Gambar 1.15 Gambar 1.16 Pratikum Pemrograman Web b. 19 Gambar 1.17 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 _________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ _________________________________________________________ Pratikum Pemrograman Web 20 Kesimpulan: Berikut ini adalah tabel-tabel yang merangkumkan tag-tag dokumen HTML. Tag to Tag <em> <small> <strong> <sub> <sup> <del> Tampilan Browser < > & " Tabel 1.1 Basic HTML Tags Description Spesifikasi sebuah dokumen HTML Mendefinisikan body Mendefinisikan header 1 sampai header 6 Mendefinisikan sebuah paragraph Menyisipkan sebuah line break Membuat sebuah horizontal rule Definisi sebuah komentar 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 Entity Name Entity Number     < > & " < > & " Deskripsi non-breaking space less than greater than ampersand quotation mark Pratikum Pemrograman Web ' 21 ' apostrophe ¢ £ ¥ § © ' (Tidak berfungsi di IE) ¢ £ ¥ § © ¢ £ ¥ § © ® ® ® × ÷ × ÷ × ÷ cent pound yen section copyright registered trademark multiplication division Tag <noframes> 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 rowpan 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) Tag Tabel 1.7 List Tag Description Attribute cellpading cellspacing colspan Pratikum Pemrograman Web Membuat ordered list Membuat unordered list Definisi dari list item Membuat definition list Mendefinisikan “definition term” Mendefinisikan “definition description” 22 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 1998 http://www.w3schools.com, “HTML Tutorial”, 2006 × Report "1. Pengenalan objek Hyper Text Markup Language (HTML)" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close