SMAN 1 SUMATERA BARAT JOBSHEET 1
Memahami dasar-dasar
Bidang Studi : TIK Waktu : 45 menit
pemrograman berbasis web
Kelas / Sem : XII / 1 Pertemuan : 1
A. Tujuan
1) Mengerti fitur-fitur software bahasa pemrograman dan fungsinya untuk mengelola halaman
web.
2) Mampu membuat struktur dokumen dengan tag HTML.
3) Peserta didik dapat mengenali dan memahami fungsi obyek-obyek web dan tag-tag HTML
dalam pembuatan halaman-halaman web yang meliputi:
- Memformat dokumen dan menambahkan objek
- Membuat tabel dan frame
- Membuat dan membangkitkan Link
4) Peserta didik dapat mengenali dan memahami fitur-fitur pengelolaan file halaman web.
5) Peserta didik dapat melakukan kombinasi tag-tag HTML dengan obyek-obyek lain untuk
membangun halaman web yang disimpan dalam format HTML.
B. Teori singkat
HTML (Hypertext Markup Language)
HTML atau Hypertext Marksup Language merupakan salah satu format yang digunakan
dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web. Sebenarnya, dokumen
HTML hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasa
yang mengandung tanda (tag) tertentu yang digunakan untuk mengatur format tampilan suatu
dokumen.
HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk
mentransfer data atau document yang berformat HTML dari web server ke browser (Internet
Explorer, Netscape Navigator, NeoPlanet, dll). Dengan HTTP inilah yang memungkinkan Anda
menjelajah internet dan melihat halaman web.
Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor biasa.
Namun sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yang digunakan
untuk membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS
FrontPage sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak akan
memperoleh hasil yang maksimal. Mengapa? Karena walaupun software-software tersebut
semakin menawarkan kemudahan dalam membuat halaman web, tetapi biasanya seseorang
masih perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web
yang sangat komplek.
a. Struktur Dasar Html
Dalam penggunaannya, sebagian besar kode HTML harus terletak di antara tag kontainer.
Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/"). Struktur
dasar dokumen HTML berisi elemen-elemen atau tag sebagai berikut:
<html>
<head>
<title>Judul Form/Caption</title>
</head>
<body>
ISI WEB
</body>
</html>
Ratih, S,Pd 1
Keterangan:
<html> .. </html>
Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML.
<head> .. </head>
Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX,
LINK, SCRIPT, STYLE & META.
<title> .. </title>
Sebagai titel atau judul halaman/form. Kalimat yang terletak di dalam tag ini akan muncul pada
bagian paling atas browser Anda (pada title bar).
<body> .. </body>
Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di
dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink,
alink, leftmargin dan topmargin.
C. Peralatan
1. Komputer
2. Jobsheet
D. Keselamatan Kerja
1. Perhatikan keselamatan penggunaan alat dan gunakan prosedur kerja yang benar.
2. Bertanya pada guru jika ada hal-hal yang belum dipahami.
3. Lakukan pembersihan dan perawatan peralatan komputer dan tempat kerja sebelum dan
sesudah digunakan.
E. Latihan
Sekarang untuk latihan pertama kita, mari kita buat dokumen HTML sederhana. Ikuti langkah-
langkah berikut ini:
1. Buat direktori dengan nama latihan di drive C:. Dan selanjutnya dalam direktori ini kita
akan menyimpan semua file-file latihan kita.
2. Buka Browser, misalnya Internet Explorer atau NetscapeNavigator.
3. Buka program aplikasi teks editor misalnya dalam latihan ini adalah Notepad.
4. Mulai baris paling atas, tuliskan:
<html>
<head>
<title>halaman pembuka</title>
</head>
<body>
Proyek latihan pertama saya.
</body>
</html>
Ratih, S,Pd 2
5. Simpan file anda dengan cara klik menu File - Save:
6. Selanjutnya pilih direktori latihan yang tadi kita buat.
7. Pada box File name, isikan nama filenya dengan [Link]
8. Pada drop down list di Save as type, pilih All Files. Sehingga tampilannya seperti berikut:
9. Simpan proyek anda dengan meng-klik pada tombol Save
Untuk menjalankan kode-kode tersebut, silahkan buka browser seperti Chrome, Firefox dan
lain-lain.
1. Klik menu File Open
Ratih, S,Pd 3
2. Setelah jendela Open terbuka, klik tombol Browser
3. Ketika jendela baru terbuka, pilih direktori Latihan dan pilih file [Link].
4. Klik tombol Open lalu tekan tombol Ok, halaman web yang ditampilkan dalam browser
adalah seperti berikut:
Catatan:
Semua dokumen HTML mempunyai ekstensi .html (atau .htm)
Semua halaman Web (homepage) mempunyai file [Link]. File [Link] secara
otomatis akan dipanggil ketika alamat sebuah domain atau direktori tempat menyimpan
file tersebut di buka di browser.
Ratih, S,Pd 4