Scribd
Unggah
992 tayangan

Jobsheet Pemrograman Web 1

Dokumen tersebut memberikan penjelasan tentang dasar-dasar pembuatan dokumen HTML. Terdiri dari pengenalan elemen, tag, dan atribut pada HTML, serta penjelasan penggunaan berbagai tag dasar seperti paragraf, judul, gambar, dan lainnya.

Diunggah oleh

Sean Davis
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
992 tayangan

Jobsheet Pemrograman Web 1

Dokumen tersebut memberikan penjelasan tentang dasar-dasar pembuatan dokumen HTML. Terdiri dari pengenalan elemen, tag, dan atribut pada HTML, serta penjelasan penggunaan berbagai tag dasar seperti paragraf, judul, gambar, dan lainnya.

Diunggah oleh

Sean Davis
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 8

JOBSHEET PRAKTEK PEMROGRAMAN WEB 2012/2013

#JOBSHEET 1

DASAR HTML
I. TUJUAN
1. Menguasai sintaks dasar pembuatan web dengan HTML. 2. Mendefinisikan dan membedakan elemen, tag, dan atribut tag pada dokumen HTML 3. Memahami dan mengaplikasikan tag-tag dasar HTML pada script dokumen HTML

II.

DASAR TEORI
HTML 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 HTML Dokumen 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 < nama tag >, dan tag umumnya berpasangan. Contoh <head> dan </head>. 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 <! dan --!> Secara umum, dokumen HTML terbagi atas 2 bagian, yaitu bagian header dan body. Bagian header dimulai dengan tag <head> dan diakhiri tag </head>. Bagian body diawali tag <body> dan diakhiri tag </body>. Kedua pasang tag ini diapit oleh tag <html> dan </html> 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

|1

JOBSHEET PRAKTEK PEMROGRAMAN WEB 2012/2013

Beberapa hal yang perlu diketahui mengenai tag pada dokumen HTML : Tag HTML diapit oleh kurung siku < dan> 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 <br>, <hr>, <input>, <meta>, dll. Untuk membedakan penulisan tag yang tidak berpasangan sebaiknya dibubuhkan tanda / di belakang tag, contoh <br />. Bila menggunakan tag bersarang, penulisannya harus berurutan, seperti pada gambar 1, tag <head> <title> judul halaman </title> </head> 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 : <body bgColor=#aaabbb alink=#cccccc>. Pada contoh tersebut, tag <body> 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. Heading HTML menyediakan 6 heading teks. Heading tersebut dibedakan berdasarkan ukuran hurufnya. Tag yang digunakan untuk membuat heading adalah <hn> berpasangan dengan </hn>, di mana n adalah bilangan 1 sampai 6, yang merupakan pilihan heading berdasarkan ukuran huruf, dengan <h1> merupakan heading dengan ukuran huruf terbesar. 2.3. Baris Baru Baris 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 <br>. Tag ini termasuk tag yang tidak memiliki pasangan sehingga diberikan tanda garis miring di dalam tag tersebut dan penulisannya menjadi <br />

|2

JOBSHEET PRAKTEK PEMROGRAMAN WEB 2012/2013

Gambar 1.2. Source Code HTML Tanpa Tag <br /> dan Tampilannya pada Web Browser

Gambar 1.3. Source Code HTML dengan Tag <br /> dan Tampilannya pada Web Browser 2.4. Paragraf Paragraf dalam dokumen HTML dibuat menggunakan pasangan tag <p> dan </p>. 2.5. Format Text Tag <font size=5 color=#dddaaa></font> 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 <font face="Jenis Font">teks</font>

Gambar 1.4. Penggunaan Tag untuk Mengubah Jenis Font pada Web Browser Jika memerlukan pengaturan format teks seperti bold, italic, underline maka dapat menggunakan tag yang disediakan HTML: <b> dan </b> untuk bold <i> dan </i> untuk italic <u> dan </u> untuk underline |3

JOBSHEET PRAKTEK PEMROGRAMAN WEB 2012/2013

2.6. List Dalam 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 <ol> yang berpasangan dengan </ol>, sedangkan untuk list tidak terurut, dalam hal ini biasanya menggunakan bullets, dapat menggunakan tag unordered list <ul> yang berpasangan dengan </ul>. Setelah menyatakan bahwa list tersebut terurut atau tidak, maka selanjutnya masingmasing item anggota list harus dinyatakan dengan tag list item <li> dan ditutup dengan </li>. Secara default, penomoran pada tag <ol> menggunakan angka 1,2,3,... dan pada <ul> defaultnya berupa disk. Namun dimungkinkan untuk menggantinya dengan karakter lain dengan menyertakan atribut type. Berikut tabel atribut type dan artinya, bagian awal <ol> dan bagian bawah <ul>.
Type I i A a disc circle square Arti Ditampilkan dengan angka Romawi huruf besar Ditampilkan dengan angka Romawi huruf kecil Ditampilkan dengan abjad huruf besar Ditampilkan dengan abjad huruf kecil Ditampilkan dengan gambar bulat diarsir penuh Ditampilkan dengan gambar bulat tanpa diarsir Ditampilkan 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<ol> atau <ul> 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 <dl> dan </dl>. Untuk item-itemnya digunakan tag <dd> dan </dd>. Selanjutnya bila item tersebut memiliki subitem maka dapat menggunakan tag <dt> dan </dt>.

|4

JOBSHEET PRAKTEK PEMROGRAMAN WEB 2012/2013

2.7. Membuat Link Hampir 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 <a href=DokumenLain> Teks Link </a>

i) Link Absolut
Tujuannya adalah untuk mengarahkan user ke alamat website lain

ii)

Link Relatif Tujuannya mengarahkan ke dokumen .html lain pada komputer yang sama

iii) Link dalam dokumen yang sama


Tujuannya 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 : <a name=TujuanLink> teks atau gambar </a> Selanjutnya dibuat link yang akan mengarahkan ke teks <a href=#TujuanLink>teks atau gambar</a> Tanda # 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 lain


Untuk membuat link semacam ini selain menyatakan nama bagian juga menyertakan nama dokumen yang dituju, seperti : <a href=NamaDokumen#NamaBagian>Teks atau Gambar</a> 2.8. Menampilkan Gambar Gambar 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 <img>. Tag ini termasuk tag yang tidak memiliki pasangan sehingga sebaiknya penulisannya dilakukan sebagai berikut : |5

JOBSHEET PRAKTEK PEMROGRAMAN WEB 2012/2013

<img src=namafilegambar /> 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 Sama Gambar 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 ALT WIDTH HEIGHT ALIGN BORDER TITLE = URL(lokasi image) = Text (text alternatif ) = Length (lebar image) = Length (tinggi image) = [ atas | tengah | bawah | kiri | kanan ] (perataan image) = Length (lebar batas link) = Teks (judul image)

Gambar 1.6. (a) Script Penggunaan Image untuk Link

|6

JOBSHEET PRAKTEK PEMROGRAMAN WEB 2012/2013

Selain itu, gambar dapat pula berfungsi sebagai link, hal ini dimungkinkan dengan posisi peletakan tag <img> di dalam tag <a>, sebagai contoh adalah seperti pada gambar 1.6(a) dan (b)

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

2.9. Membuat Tabel Pada 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 :
Tag <table>...</table> Keterangan 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 <tr> atau <td> 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 <td> Untuk membuat sel dalam tabel, semua data harus menyertakan tag ini. Bila hendak menyisipkan gambar dalam tabel, dapat menyertakan tag <img> di antara tag <td> dan </td>

<caption>...</caption> <tr>...</tr>

<th>...</th>

<td>...</td>

|7

JOBSHEET PRAKTEK PEMROGRAMAN WEB 2012/2013

III.

ALAT 1. Perangkat komputer 2. Sistem operasi 3. Editor teks sederhana (Notepad) 4. Web browser

IV.

LANGKAH KERJA 1. Menyiapkan alat praktek. 2. Selalu memperhatikan keselamatan kerja. 3. Jalankan program yang dibutuhkan untuk menyelesaikan tugas praktek 4. 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.

TUGAS 1. 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 Link 3. File disimpan dengan nama Jobsheet1 pada folder JOBSHEET 1 |8

Anda mungkin juga menyukai