1 ACARA PRAKTIKUM PEMROGRAMAN WEB I PROGRAM STUDI MANAJEMEN INFORMATIKA JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS NEGERI GORONTALO 20052 ...
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
SASARAN 1. Dapat mengenal struktur dasar HTML 2. Dapat menggunakan tag-tag HTML seperti : … ; … ; … MATERI PRAKTIKUM
MEMULAI MEMBUAT DOKUMEN HTML Bukalah Notepad (secara manual) dan FrontPage (Otomatis) Ketikkan tag dasar HTML seperti berikut ini : … … <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 <TITLE> Berlatih membuat Home Page Selamat Datang di Home Page Saya, halaman ini masih dalam tahap perbaikan
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) SASARAN 1. Dapat membuat program dengan menggunakan elemen-elemen HTML 2. Dapat membuat dan mengembangkan penggunaan tag-tag HTML yang ada. MATERI PRAKTIKUM Praktikum 2 SIZE Coba anda ketikkan program dibawah ini Font Size 1 Font Size 2 Font Size 3 Font Size 4 Font Size 5 Font Size 6 Font Size 7 FACE Cobalah anda ketikan program dibawah ini Comic Sans MS Arial Times New Roman Verdana COLOR Cobalah anda ketikan program dibawah ini Huruf ini warnanya Merah Huruf ini warnanya Marun Huruf ini warnanya Hitam
PENUNTUN PRAKTIKUM III MEMBUAT DAFTAR / LIST SASARAN 1. Dapat membuat suatu penomoran otomatis dengan tag HTML 2. Dapat memahami dan menggunakan tag HTML yaitu daftar dengan Bullet/Unordered list.
MATERI PRAKTIKUM Coba anda ketikan program di bawah ini
DAFTAR MAHASISWA
Antonio Sanadar
Lia Sustina
Kusuma Adi
Rio Rikadin
Alatas Alitas
Contoh berikut membuat penomoran dengan menggunakan atribut TYPE
<TITLE> Penomoran Otomatis
Daftar dengan berbagai karakter
Daftar dengan (TYPE=disc)
Daftar dengan (TYPE=disc)
Daftar dengan (TYPE= square)
Daftar dengan (TYPE= square)
Daftar dengan (TYPE= circle)
Daftar dengan (TYPE= circle)
PENUNTUN PRAKTIKUM IV MEMBUAT TABLE
SASARAN 1. Dapat memahami dan membuat table dalam suatu perancangan sebuah halaman web MATERI PRAKTIKUM Untuk membuat sebuah tabel yang sederhana anda hanya memerlukan tiga buah tag berpasangan yaitu :
…
, untuk mendefenisikan sebuah tabel. Kemudian diantara tag tersebut digunakan tag
…
(Table Row) untuk membuat sebuah baris didalam tag
. Digunakan tag
…
(Table Data) untuk mendefenisikan kolom dan data. Ketiga buah tag tersebut digunakan dengan pola :
Tabel Sangat Sederhana
Coba anda ketikkan program dibawah ini :
Tabel Sangat Sederhana
Satu baris dua kolom
Satu baris dua kolom
Dua baris dua kolom
Satu baris dua kolom
Dua baris dua kolom
Dua baris dua kolom
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
SASARAN 1. Dapat membuat suatu link ke bagian tertentu dalam dokumen yang sama MATERI PRAKTIKUM Untuk membuat link kebagian tertentu dari suatu dokumen , anda perlu memberi nama pada bagian tersebut dengan perintah HTML : Teks penghubung 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 :
Paragraf pertama
Paragraf kedua
Paragraf ketiga
< A Name=”Paragraf 4”> Teks penghubung
Paragraf keempat
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, …, hanya saja tanda # harus anda tambahkan sebelum nama titik loncat tersebut. Tuliskan link berikut ini diparagraf pertama :
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 SASARAN 1. Dapat memahami dan mengenal pembuatan suatu link atau dikenal dengan hypertextlink 2. Dapat membuat sebuah link antar dokumen yang ada MATERI PRAKTIKUM Jika kita membuat link ke bagian tertentu pada dokumen yang berbeda, maka anda tinggal menyebutkan nama dokumen tersebut sebelum tanda #. Seperti : teks penghubung >/A> Dalam ilustrasi sebagai berikut : ….
