JOBSHEET PRAKTEK PEMROGRAMAN WEB 2012/2013#JOBSHEET 1DASAR HTMLI. TUJUAN 1. Menguasai sintaks dasar pembuatan web dengan HTML.2. Mendefinisikan dan membedakan elemen, tag, dan atribut tag pada dokumen HTML3. Memahami dan mengaplikasikan tag-tag dasar HTML pada script dokumen HTML II. DASAR TEORIHTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file text murni yang dapat dibuat dengan editor text sembarang, yang diberikan nama dengan tambahan ekstensi .htm atau .html. Dokumen ini selanjutnya dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam web browser. Dokumen ini umumnya berisi informasi atau interface aplikasi dalam internet. 2.1. Elemen, Tag, dan Atribut Tag pada Dokumen HTMLDokumen HTML tersusun atas elemen-elemen. Elemen merupakan istilah bagi komponen dasar pembentuk dokumen HTML, seperti head, body, table, paragraf, dan list. Untuk menandai elemen dalam suatu dokumen HTML diperlukan tag. Tag HTML terdiri atas , dan tag umumnya berpasangan. Contoh dan . Tag yang pertama menunjukkan awal elemen dan tag yang kedua dengan / sebelum nama tag yang berarti akhir elemen. Jika hendak menyisipkan komentar, bisa menggunakan teks yang diapit oleh tanda Secara umum, dokumen HTML terbagi atas 2 bagian, yaitu bagian header dan body. Bagian header dimulai dengan tag dan diakhiri tag . Bagian body diawali tag dan diakhiri tag . Kedua pasang tag ini diapit oleh tag dan yang menandai bahwa dokumen yang kita buat adalah dokumen HTML. Berikut pada gambar 1.1. adalah kerangka dokumen HTML.

Gambar 1.1. Kerangka Dokumen HTML

Beberapa hal yang perlu diketahui mengenai tag pada dokumen HTML : Tag HTML diapit oleh kurung siku Meskipun kode HTML tidak case sensitive, namun tag HTML sebaiknya ditulis menggunakan huruf kecil. Ini merupakan rekomendasi dari W3C, meskipun bila ditulis menggunakan huruf besar juga bisa Tag HTML pada umumnya berpasangan. Namun ada beberapa tag khusus yang tidak berpasangan seperti
, , , , dll. Untuk membedakan penulisan tag yang tidak berpasangan sebaiknya dibubuhkan tanda / di belakang tag, contoh
. Bila menggunakan tag bersarang, penulisannya harus berurutan, seperti pada gambar 1, tag judul halaman Pada umumnya, tag pada dokumen HTML memiliki beberapa atribut yang nilainya bisa ditentukan sesuai dengan keperluan. Atribut tag dituliskan di dalam tag bersangkutan (sebelum tanda >), contoh penulisan atribut di dalam tag : . Pada contoh tersebut, tag memiliki atribut bgColor untuk menentukan warna layar/ background dan atribut alink untuk menentukan warna link yang aktif pada suatu halaman web. Sedangkan #aaabbb dan #cccccc merupakan nilai dari atribut tersebut.2.2. HeadingHTML menyediakan 6 heading teks. Heading tersebut dibedakan berdasarkan ukuran hurufnya. Tag yang digunakan untuk membuat heading adalah berpasangan dengan , di mana n adalah bilangan 1 sampai 6, yang merupakan pilihan heading berdasarkan ukuran huruf, dengan merupakan heading dengan ukuran huruf terbesar.2.3. Baris BaruBaris baru yang ditulis dalam kode HTML, seperti pada gambar 1.2., tidak akan berpengaruh terhadap hasil yang akan ditampilkan di layar web browser. Oleh karena itu HTML menyediakan tag khusus, seperti pada contoh dalam gambar 1.3., untuk melakukan pembuatan baris baru di dalam dokumen, yaitu
. Tag ini termasuk tag yang tidak memiliki pasangan sehingga diberikan tanda garis miring di dalam tag tersebut dan penulisannya menjadi

Gambar 1.2. Source Code HTML Tanpa Tag
dan Tampilannya pada Web Browser

Gambar 1.3. Source Code HTML dengan Tag
dan Tampilannya pada Web Browser2.4. ParagrafParagraf dalam dokumen HTML dibuat menggunakan pasangan tag dan .2.5. Format TextTag digunakan untuk mengubah ukuran dan warna font pada halaman web. Sedangkan pengubahan jenis font, seperti contoh yang dapat dilihat pada gambar 1.4, menunjukkan pemakaian jenis font tertentu dengan tag teks

Gambar 1.4. Penggunaan Tag untuk Mengubah Jenis Font pada Web BrowserJika memerlukan pengaturan format teks seperti bold, italic, underline maka dapat menggunakan tag yang disediakan HTML: dan untuk bold dan untuk italic dan untuk underline2.6. ListDalam pembuatan dokumen HTML, ada kalanya kita perlu membuat suatu daftar (list). Beberapa jenis list dalam HTML, yaitu list terurut, list tidak terurut, list dengan nomor, list tanpa nomor, list definisi, dan list bersarang. List bernomor merupakan model list terurut yang setiap itemnya diberi nomor. List terurut biasanya digunakan untuk menuliskan item-item yang berhubungan satu dengan lainnya, atau bisa juga digunakan untuk menuliskan aturan tertentu yang harus dikerjakan berurutan. Untuk list terurut digunakan tag ordered list

1. yang berpasangan dengan

, sedangkan untuk list tidak terurut, dalam hal ini biasanya menggunakan bullets, dapat menggunakan tag unordered list

yang berpasangan dengan

. Setelah menyatakan bahwa list tersebut terurut atau tidak, maka selanjutnya masing-masing item anggota list harus dinyatakan dengan tag list item dan ditutup dengan . Secara default, penomoran pada tag

1. menggunakan angka 1,2,3,... dan pada

defaultnya berupa disk. Namun dimungkinkan untuk menggantinya dengan karakter lain dengan menyertakan atribut type. Berikut tabel atribut type dan artinya, bagian awal

1. dan bagian bawah

. TypeArti

IiAaDitampilkan dengan angka Romawi huruf besarDitampilkan dengan angka Romawi huruf kecilDitampilkan dengan abjad huruf besarDitampilkan dengan abjad huruf kecil

disccirclesquareDitampilkan dengan gambar bulat diarsir penuhDitampilkan dengan gambar bulat tanpa diarsirDitampilkan dengan gambar persegi diarsir penuh

Selain atribut type dimungkinkan juga menambahkan atribut lain seperti start yang mendefinisikan nomor/ abjad awal yang akan digunakan pada list terurut.Terkadang dalam pembuatan web perlu memasukkan list bersarang, yaitu list yang memuat item-item dan subitemnya. Yang perlu dilakukan hanyalah menyertakan tag

1. atau

di dalam item yang perlu memuat subitem.Selain list di atas, HTML juga mengenal definition list. Yaitu cara penulisan definisi yang terstandarisasi. Tag yang digunakan adalah dan . Untuk item-itemnya digunakan tag dan . Selanjutnya bila item tersebut memiliki subitem maka dapat menggunakan tag dan .

2.7. Membuat LinkHampir setiap halaman web yang kita jumpai di internet menyediakan link ke dokumen atau halaman lain. Link merupakan sebutan singkat untuk hyperlink text. Link berguna untuk memudahkan user dalam menelusuri informasi di internet. Secara default, link dalam dokumen HTML ditandai dengan teks berwarna biru dan apabila kita menggerakkan mouse menuju teks tersebut, kursor mouse akan berubah menjadi gambar tangan. HTML membedakan jenis link berdasarkan lokasi dokumen yang akan diakses, menjadi Link absolut, Link relatif, Link dalam dokumen yang sama, dan lain-lain. Secara umum link dapat dituliskan dengan tag Teks Link i) Link AbsolutTujuannya adalah untuk mengarahkan user ke alamat website lainii) Link RelatifTujuannya mengarahkan ke dokumen .html lain pada komputer yang samaiii) Link dalam dokumen yang samaTujuannya adalah mengarahkan ke bagian lain (tulisan atau gambar) pada halaman web yang sama, biasa dipakai jika web tersebut memiliki halaman yang panjang atau memiliki daftar isi di bagian awal. Sebelumnya perlu pendeklarasian nama pada bagian teks/ gambar tertentu sebagai bagian yang akan dituju ketika link tersebut diklik. Pemberian nama tersebut dilakukan dengan cara menuliskan : teks atau gambar Selanjutnya dibuat link yang akan mengarahkan ke teksteks atau gambarTanda # di atas menunjukkan bahwa tujuan link adalah nama bagian dalam dokumen yang sama dan bukan berupa file lain.iv) Link ke bagian tertentu dalam dokumen lainUntuk membuat link semacam ini selain menyatakan nama bagian juga menyertakan nama dokumen yang dituju, seperti :Teks atau Gambar2.8. Menampilkan GambarGambar dapat dijadikan untuk memperjelas paparan dalam web tersebut ataupun dapat membuat web menjadi lebih menarik. Saat ini jarang sekali kita mendapati web yang tidak menampilkan gambar di dalamnya. Tag yang digunakan adalah . Tag ini termasuk tag yang tidak memiliki pasangan sehingga sebaiknya penulisannya dilakukan sebagai berikut :

namafilegambar adalah URL dari gambar yang akan ditampilkan. Sebagai contoh, apabila hendak menampilkan gambar lawangsewu.jpg yang terdapat pada direktori yang sama dengan source code nya, maka kode yang dituliskan adalah seperti pada gambar 1.5. di bawah ini.

Gambar 1.5. Script dan Penggunaan Link dalam Dokumen HTML yang SamaGambar yang akan ditampilkan pada dokumen HTML terkadang ukurannya tidak sesuai dengan yang diinginkan, jika hal yang demikian terjadi, maka gambar dapat di-rezise dengan menggunakan atribut seperti di bawah ini. Begitu pula apabila hendak menambahkan teks pada gambar dapat menggunakan atribut yang sesuai.Beberapa atribut pada gambar/ image :SRC = URL(lokasi image)ALT = Text (text alternatif )WIDTH = Length (lebar image)HEIGHT = Length (tinggi image)ALIGN = [ atas | tengah | bawah | kiri | kanan ] (perataan image)BORDER = Length (lebar batas link)TITLE= Teks (judul image)

Gambar 1.6. (a) Script Penggunaan Image untuk Link Selain itu, gambar dapat pula berfungsi sebagai link, hal ini dimungkinkan dengan posisi peletakan tag di dalam tag , sebagai contoh adalah seperti pada gambar 1.6(a) dan (b)

Gambar 1.6. (b) Penggunaan Image untuk LinkJika mouse discroll menuju gambar maka akan bisa diklik untuk mengantarkan ke halaman http://unnes.ac.id .

2.9. Membuat TabelPada awalnya tabel digunakan untuk membuat data dalam bentuk tabular dan mengatur layout halaman HTML, namun setelah munculya CSS, maka penggunaan tabel untuk mengatur layout mulai ditinggalkan.Daftar Tag HTML untuk membuat tabel :TagKeterangan

...Untuk mendefinisikan tabel di dalam dokumen HTML, atribut border dapat disertakan di sini apabila hendak membuat tabel dengan bingkainya, nilainya bisa 1 atau 2 dst

...Untuk membuat judul tabel, posisi judul dapat diubah dengan atribut align dengan nilai top atau bottom

...Untuk membuat baris baru dalam tabel. Atribut bgcolor bisa disisipkan di sini maupun di atau apabila menginginkan warna yang berbeda untuk tabel

...Untuk membuat sel header atau judul kolom dari tabel, dapat diberi atribut weight dan height untuk menyatakan lebar dan tinggi tabel, atribut ini bisa juga disisipkan pada tag

...Untuk membuat sel dalam tabel, semua data harus menyertakan tag ini. Bila hendak menyisipkan gambar dalam tabel, dapat menyertakan tag di antara tag dan

III. ALAT 1. Perangkat komputer 2. Sistem operasi 3. Editor teks sederhana (Notepad)4. Web browserIV. LANGKAH KERJA1. Menyiapkan alat praktek.2. Selalu memperhatikan keselamatan kerja.3. Jalankan program yang dibutuhkan untuk menyelesaikan tugas praktek4. Mengorganisasikan dengan baik folder pribadi untuk masing-masing praktikum dengan menyimpan seluruh hasil praktek dalam folder JOBSHEET 1, dikumpulkan dalam folder utama Praktek Pemrograman Web.V. TUGAS1. Menyiapkan softcopy artikel standard jurnal. Artikel memuat judul, subjudul, gambar, tabel dan mendapat persetujuan dari asisten.2. Artikel tersebur dibuat dalam dokumen html dengan memanfaatkan tag-tag dasar HTML. Sesuaikan format penulisan dan tampilan artikel dengan tag dasar untuk format teks pada html sehingga sesuai dengan aslinya. Kemudian subjudul yang ada pada artikel dibuat dalam bentuk list, ditambah dengan modifikasi (lihat gambar 1.7. di bawah) dengan subjudul dibuat link pada halaman yang sama di bagian bawah abstraks. Apabila artikel asli menggunakan penomoran, maka dapat ditambahkan sesuai aslinya.

Gambar 1.7. Modifikasi Artikel dengan Penggunaan Link3. File disimpan dengan nama Jobsheet1 pada folder JOBSHEET 1| 8