A.
Kegiatan Belajar
1. Kegiatan
Belajar 1:
Memahami dasar-dasar pemrograman berbasis
web
a.
Tujuan Kegiatan Pemelajaran
1)
Mengerti
fitur-fitur software bahasa pemrograman dan fungsinya untuk mengelola halaman web.
2)
Mampu
membuat struktur dokumen dengan tag HTML.
3)
Peserta
diklat 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
diklat dapat mengenali dan memahami fitur-fitur pengelolaan file halaman web.
5)
Peserta
diklat dapat melakukan kombinasi tag-tag HTML dengan obyek-obyek lain untuk membangun
halaman web yang disimpan dalam format HTML.
b.
Uraian Materi
1.
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.
Dalam tutorial ini Anda akan kami
ajak untuk mengetahui dasar-dasar dari desain web. Yang dibutuhkan hanya sebuah
word processor. Anda bisa menggunakan Notepad, WordPad, MS Word atau yang
lainnya. Tapi yang paling mudah adalah menggunakan Notepad. Setelah anda
memahami betul semua tag-tag dasar html, diakhir nanti kita akan belajar membuat
halaman web dengan menggunakan web tool.
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>
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.
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 Netscape Navigator.
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>
</head>
<body>
Proyek
latihan pertama saya.
</body>
</html>
</html>
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 index.html
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 Internet
Explorer, Netscape Navigator dan lain-lain.
1.
Klik
menu File à Open
Tip: Jika anda menggunakan Netscape Navigator, klik Open Page kemudian Choose File
2.
Setelah
jendela Open terbuka, klik tombol Browse
3.
Ketika
jendela baru terbuka, pilih direktori Latihan
dan pilih file index.html.
4.
Klik
tombol Open lalu tekan tombol
Ok, halaman web yang
ditampilkan dalam browser adalah seperti berikut:
Catatan:
1
Semua dokumen HTML
mempunyai ekstensi .html (atau .htm)
1
Semua halaman Web (homepage) mempunyai file index.html. File index.html secara
otomatis akan dipanggil ketika alamat sebuah domain atau direktori tempat
menyimpan file tersebut di buka di browser. Terdapat
pengecualian pada microsoft yang menggunakan Web server IIS, file yang
dipanggil adalah default.html
Kode Warna
Pengaturan warna dalam dokumen HTML
menggunakan mode kombinasi RGB (red,
green, blue). Setiap warna ditampilkan dalam dua digit nilai heksadesimal
(0, 1, 2, ..., F). Setiap bagian dua digit kode menunjukkan banyaknya
intensitas dari kombinasi warna merah, hijau dan biru. Misalnya untuk warna
kuning, dibuat dengan pencampuran warna sebagai berikut:
|
Red
|
Green
|
Blue
|
|
FF
|
FF
|
00
|
Berarti untuk warna kuning dapat dibuat
dengan kode #ffff00. Disamping itu, pembuatan warna dapat juga dibuat dengan
langsung menggunakan nama warna dalam bahasa inggris, misalnya kuning=”yellow”.
Berikut
ini warna-warna yang dapat digunakan dalam halaman HTML.
|
Warna
|
Heksadesimal
|
|
White
|
#FFFFFF
|
|
Black
|
#000000
|
|
Red
|
#FF0000
|
|
Green
|
#00FF00
|
|
Blue
|
#0000FF
|
|
Magenta
|
#FF00FF
|
|
Cyan
|
#00FFFF
|
|
Yellow
|
#FFFF00
|
Anda
dapat juga membuat campuran sendiri warna-warna berdasarkan emajinasi anda.
Yang penting anda mengikuti aturan diatas.
2. Pengaturan Halaman Web dan Teks
Untuk mendapatkan halaman web yang baik anda harus
melakukan pengaturan terhadap halaman web dan teks-teks didalamnya seperti mengatur
warna latar belakang halaman, memilih jenis dan ukuran huruf, perataan, warna
teks, menambahkan gambar dll. Tag-tag di bawah ini
yang biasa digunakan dalam pengaturan halaman web dan teks:
a.
<body>, digunakan 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.
1) Background = digunakan
untuk mengatur latar belakang dengan gambar/image.
2)
Bgcolor = digunakan untuk mengatur warna
latar belakang dokumen, dengan warna putih sebagai default-nya.
3)
Teks = digunakan untuk mengatur warna teks
dokumen, dengan warna hitam sebagai warna default.
4)
Link = Untuk mengatur warna link dokumen
dengan warna biru sebagai warna default
5)
Vlink = Untuk mengatur warna visited link
dokumen dengan default ungu
6)
Alink = digunakan untuk mengatur warna
active link dokumen dengan default merah.
b.
Heading:
<Hn>..</Hn> Digunakan untuk
mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6
atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran
terbesar dan <H6> merupakan ukuran terkecil.
contoh1_1.html
<html>
<head>
<title>:::
Heading Dokumen HTML:::</title>
</head>
<body bgcolor=#ffffcc
text=#003399>
<h1>Headng Tingkat 1
</h1>
<h2>Headng Tingkat 2
</h2>
<h3>Headng Tingkat 3
</h3>
<h4>Headng Tingkat 4
</h4>
<h5>Headng Tingkat 5
</h5>
<h6>Headng Tingkat 6
</h6>
</body>
</html>
Hasilnya
akan terlihat seperti:
c.
Paragraph Baru: <P> Digunakan untuk pindah alinea atau membuat paragraf baru. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi. Dalam
tag ini juga bisa digunakan untuk mengatur perataan kiri, tengah, kanan dan
kiri-kanan, yaitu dengan attribut ALIGN. Attribut align
mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY.
d.
Line Break: <BR>
Digunakan untuk pindah ke baris baru.
e.
No Line Break: <NOBR> Bila
digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya
bila baris pertama sudah terlalu panjang.
f.
Font <FONT> Digunakan untuk mengatur huruf dokumen
HTML. Tag FONT mempunyai attribut, yaitu: SIZE,
FACE, COLOR.
e SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang
digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7
merupakan ukuran terbesar.
e FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa
memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila
terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis
bawah (_). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang
kita gunakan pada halaman web kita nantinya akan terdapat pada komputer
pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan
font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda
ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan
graphic.
e COLOR: Digunakan untuk mengatur warna font. Didefinisikan
dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna
(red misalnya).
contoh1_2.html
<html>
<head>
<title>:::
Ukuran, Jenis dan Warna Font:::</title>
</head>
<body>
<font
size=1 Face=arial color=red>Ukuran font 1</font><br>
<font
size=2 Face=arial color=green>Ukuran font 2 </font><br>
<font
size=3 Face=arial color=blue>Ukuran font 3 </font><br>
<font size=4 Face=verdana color=red>Ukuran font 4
</font><br>
<font size=5 Face=verdana
color=blue>Ukuran font 5 </font><br>
<font size=6 Face=tahoma
color=green>Ukuran font 6 </font><br>
<font
size=7 Face=tahoma color=red>Ukuran font 7 </font><br>
</body>
</html>
Hasilnya
akan terlihat
