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
- yang berpasangan dengan
, sedangkan untuk list tidak terurut, dalam hal ini biasanya
menggunakan bullets, dapat menggunakan tag unordered list
. 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
- 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
- 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
- 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