Yayan Adrianova Eka Tuah-Jobsheet-Pemrograman-Web-1

JOBSHEET PRAKTEK PEMROGRAMAN WEB SMK NEGERI 1 SINTANG
JOBSHEET PRAKTEK
PEMROGRAMAN WEB
Dosen Mata kuliah :

Prof. Dr. Herminarto Sofyan, M.Pd
Oleh :
Yayan Adrianova Eka Tuah
(20702251009)
PROGRAM STUDI PENDIDIKAN TEKNOLOGI DAN KEJURUAN

SEKOLAH PASCASARJANA
UNIVERSITAS NEGERI YOGYAKARTA
2021
|1
#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.
II.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
|2
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.
II.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.
II.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 />
|3
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
II.4. Paragraf
Paragraf dalam dokumen HTML dibuat menggunakan pasangan tag <p> dan </p>.
II.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
II.6. List
|4
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 masing-
masing 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 Arti
I Ditampilkan dengan angka Romawi huruf besar
i Ditampilkan dengan angka Romawi huruf kecil
A Ditampilkan dengan abjad huruf besar
a Ditampilkan dengan abjad huruf kecil
disc Ditampilkan dengan gambar bulat diarsir penuh
circle Ditampilkan dengan gambar bulat tanpa diarsir
square 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>.
II.7. Membuat Link
|5
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>
II.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 :
<img src=”namafilegambar” />
|6
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 = 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
|7
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 https://uny.ac.id .
II.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 Keterangan
<table>...</table> 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
<caption>...</caption> Untuk membuat judul tabel, posisi judul dapat diubah dengan
atribut align dengan nilai top atau bottom
<tr>...</tr> Untuk membuat baris baru dalam tabel. Atribut bgcolor bisa
disisipkan di sini maupun di <tr> atau <td> apabila menginginkan
warna yang berbeda untuk tabel
<th>...</th> 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>
<td>...</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>
|8
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
|9

Yayan Adrianova Eka Tuah-Jobsheet-Pemrograman-Web-1

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Yayan Adrianova Eka Tuah-Jobsheet-Pemrograman-Web-1

Diunggah oleh

Hak Cipta:

Format Tersedia

JOBSHEET PRAKTEK PEMROGRAMAN WEB SMK NEGERI 1 SINTANG

Dosen Mata kuliah :

PROGRAM STUDI PENDIDIKAN TEKNOLOGI DAN KEJURUAN

Gambar 1.1. Kerangka Dokumen HTML

II.7. Membuat Link

Gambar 1.6. (a) Script Penggunaan Image untuk Link

Gambar 1.6. (b) Penggunaan Image untuk Link

II.9. Membuat Tabel

Gambar 1.7. Modifikasi Artikel dengan Penggunaan Link

3. File disimpan dengan nama Jobsheet1 pada folder JOBSHEET 1

Anda mungkin juga menyukai