ACARA PRAKTIKUM PEMROGRAMAN WEB I PROGRAM STUDI MANAJEMEN INFORMATIKA JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS NEGERI GORONTALO 2005
PENUNTUN PRAKTIKUM PEMROGRAMAN WEB I PENUNTUN PRAKTIKUM I STRUKTUR DASAR DOKUMEN HTML 1. Dapat mengenal struktur dasar HTML 2. Dapat menggunakan tag-tag HTML seperti : <body> </body> ; <head> </head> ; <title> </title> MEMULAI MEMBUAT DOKUMEN HTML Bukalah Notepad (secara manual) dan FrontPage (Otomatis) Ketikkan tag dasar HTML seperti berikut ini : <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> Tag ini anda harus ketikan setiap anda membuat sebuah tampilan dengan menggunakan HTML. Sekarang anda telah siap untuk memulai membuat program HTML Coba ketikkan program kecil dibawah ini <HTML> <HEAD> <TITLE> Berlatih membuat Home Page </TITLE> </HEAD> Selamat Datang di Home Page Saya, halaman ini masih dalam tahap perbaikan </HTML> Setelah anda selesai mengetikan program tersebut pada notepad simpan dengan extension file htm atau html kemudian silahkan anda buka dengan menggunakan salah satu browser yang ada. Ulangi langkah-langkah tersebut sampai anda benar-benar hapal
PENUNTUN PRAKTIKUM II ELEMEN-ELEMEN HTML ( SIZE, FACE, COLOR, DLL) 1. Dapat membuat program dengan menggunakan elemen-elemen HTML 2. Dapat membuat dan mengembangkan penggunaan tag-tag HTML yang ada. Praktikum 2 SIZE Coba anda ketikkan program dibawah ini <FONT SIZE=1> Font Size 1</FONT><BR> <FONT SIZE=2> Font Size 2</FONT><BR> <FONT SIZE=3> Font Size 3</FONT><BR> <FONT SIZE=4> Font Size 4</FONT><BR> <FONT SIZE=5> Font Size 5</FONT><BR> <FONT SIZE=6> Font Size 6</FONT><BR> <FONT SIZE=7> Font Size 7</FONT><BR> FACE Cobalah anda ketikan program dibawah ini <FONT FACE= Comic Sans MS > Comic Sans MS</FONT><BR> <FONT FACE= Arial > Arial</FONT><BR> <FONT FACE= Times New Roman > Times New Roman</FONT><BR> <FONT FACE= Verdana > Verdana</FONT><BR> COLOR Cobalah anda ketikan program dibawah ini <FONT COLOR=Red> Huruf ini warnanya Merah</FONT><BR> <FONT COLOR=#800000> Huruf ini warnanya Marun</FONT><BR> <FONT COLOR=Black> Huruf ini warnanya Hitam</FONT><BR> PENUNTUN PRAKTIKUM III MEMBUAT DAFTAR / LIST 1. Dapat membuat suatu penomoran otomatis dengan tag HTML 2. Dapat memahami dan menggunakan tag HTML yaitu daftar dengan Bullet/Unordered list.
Coba anda ketikan program di bawah ini <H3> DAFTAR MAHASISWA </H3> <UL> <LI> Antonio Sanadar <LI> Lia Sustina <LI> Kusuma Adi <LI> Rio Rikadin <LI> Alatas Alitas </UL> Contoh berikut membuat penomoran dengan menggunakan atribut TYPE <HTML> <HEAD> <TITLE> Penomoran Otomatis </TITLE> </HEAD> <H3> Daftar dengan berbagai karakter</h3> <UL TYPE= disc > <LI> Daftar dengan (TYPE=disc) <LI> Daftar dengan (TYPE=disc) </UL> <UL TYPE= square > <LI> Daftar dengan (TYPE= square) <LI> Daftar dengan (TYPE= square) </UL> <UL TYPE= circle > <LI> Daftar dengan (TYPE= circle) <LI> Daftar dengan (TYPE= circle) </UL> </HTML>
PENUNTUN PRAKTIKUM IV MEMBUAT TABLE 1. Dapat memahami dan membuat table dalam suatu perancangan sebuah halaman web Untuk membuat sebuah tabel yang sederhana anda hanya memerlukan tiga buah tag berpasangan yaitu : <TABLE> </TABLE>, untuk mendefenisikan sebuah tabel. Kemudian diantara tag tersebut digunakan tag </TR> (Table Row) untuk membuat sebuah baris didalam tag. Digunakan tag <TD> </TD> (Table Data) untuk mendefenisikan kolom dan data. Ketiga buah tag tersebut digunakan dengan pola : <TABLE> <TD> Tabel Sangat Sederhana </TD> </TR> </TABLE> Coba anda ketikkan program dibawah ini : <TABLE> <TD> Tabel Sangat Sederhana </TD> </TR> </TABLE> <BR> <TABLE BORDER> <TD> Satu baris dua kolom </TD> <TD> Satu baris dua kolom </TD> </TABLE> <BR> <TABLE BORDER> <TD> Dua baris dua kolom </TD> <TD> Satu baris dua kolom </TD> </TR> <TD> Dua baris dua kolom </TD> <TD> Dua baris dua kolom </TD> </TR> </TABLE>
Simpan dokumen diatas pada file htm atau html dan silahkan anda lihat tampilannya melalui web browser. Latihan : Buatlah sebuah web dengan menggunakan tag table. PENUNTUN PRAKTIKUM V MEMBUAT LINK DALAM SATU DOKUMEN 1. Dapat membuat suatu link ke bagian tertentu dalam dokumen yang sama Untuk membuat link kebagian tertentu dari suatu dokumen, anda perlu memberi nama pada bagian tersebut dengan perintah HTML : <A Name= Paragraf A >Teks penghubung </A> Agar lebih jelas mari kita lihat contoh berikut ini :
Misalkan anda mempunyai empat buah paragraf dalam sebuah dokumen dan anada ingin dari paragraf pertama langsung melompat ke paragraf ke empat. Maka hal pertama yang harus anda lakukan adalah memberi nama untuk paragraf ke empat tersebut, seperti : <H3> Paragraf pertama </H3> <H3> Paragraf kedua </H3> <H3> Paragraf ketiga </H3> < A Name= Paragraf 4 > Teks penghubung </A> <H3> Paragraf keempat </H3> Perhatikan nama yang kita berikan pada paragraf keempat Paragraf4, nama ini sering juga disebut Jumppoint (titik loncat), nama ini tidak akan muncul pada browser. Setelah anda mendefenisikan nama untuk paragraf keepat tersebut, langksh selanjutnya adalah membuat link ke bagian tersebut. Adapun perintah HTML yang digunakan untuk membuat link ini sama dengan perintah link biasa, <A HREF=url> </A>, hanya saja tanda # harus anda tambahkan sebelum nama titik loncat tersebut. Tuliskan link berikut ini diparagraf pertama : <H3> Paragraf pertama </H3> <A HREF= #Paragraf 4 > Teks penghubung </A> Perhatikan tanda #, tanda ini harus selalu ada, karena jika tidak dibuat, maka Browser akan menganggap link ini sebagai link biasa. Teks penghubung adalah teks yang akan ditampilkan oleh Browser, teks ini bisa anda ganti dengan teks apa saja. Pada Browser bila teks penghubung ini anda klik dengan mouse maka anda akan langsung di bawa ke paragraf keempat. Latihan : Buatlah sebuah link antar dokumen untuk membuat suatu tampilan web untuk membaca berita. Berita di bagi dalam empat bagian kemudian buatlah linknya
PENUNTUN PRAKTIKUM VI MEMBUAT LINK ANTAR DOKUMEN 1. Dapat memahami dan mengenal pembuatan suatu link atau dikenal dengan hypertextlink 2. Dapat membuat sebuah link antar dokumen yang ada Jika kita membuat link ke bagian tertentu pada dokumen yang berbeda, maka anda tinggal menyebutkan nama dokumen tersebut sebelum tanda #. Seperti : <A HREF= menu.html1#paragraf1 > teks penghubung >/A> Dalam ilustrasi sebagai berikut : <A HREF= menu html#paragraf1 >.</A> <A Name= Paragraf1 >.</A> Nama dokumen yang dituju Nama untuk titik loncat Latihan : Buatlah sebuah tampilan web yang menggunakan link atau hubungan 2 dokumen