Lab Aktivity Pemograman Web HTML Herry LANGI
-
Upload
harke-theodorus-nelwan -
Category
Documents
-
view
27 -
download
0
description
Transcript of Lab Aktivity Pemograman Web HTML Herry LANGI
-
PEMROGRAMAN WEB HERRY S LANGI,SST.,MT
POLITEKNIK NEGERI MANADO
TEKNIK INFORMATIKA
-
Halaman 2
Lat I
(STRUKTUR HTML)
Praktikum 1
Bukalah notepad atau program text editor yang lain.
Ketikkan script berikut :
World Wide Web
Definisi World Wide Web
WWW adalah layanan yang paling sering digunakan dan memiliki
perkembangan yang sangat cepat karena dengan layanan ini kita
bisa menerima informasi dalam berbagai format (multimedia).
Untuk mengakses layanan WWW dari sebuah komputer (yang
disebut WWW server atau web server) digunakan program web
client yang disebut web browser atau browser saja. Jenis-
jenis browser yang sering digunakan adalah: Netscape
Navigator/Comunicator, Internet Explorer, NCSA Mosaic, Arena,
Lynx, dan lain-lain.
Surfing merupakan istilah umum yang digunakan bila
menjelajahi dunia maya atau web. Tampilan web yang sangat
artistik yang tidak hanya menampilkan teks tapi juga gambar-
gambar yang di tata sedemikian rupa sehingga selalu membuat
betah netter untuk surfing berjam-jam. Karena itu para netter
-
Halaman 3
harus sangat memperhitungkan rencana web mana saja yang akan
dikunjungi atau batasi informasi yang ingin diakses, karena
bila tidak netter akan tersesat kedalam rimba informasi yang
maha luas.
Simpan (File|Save As), dengan nama web.html, pada kolom Save As Type, pilihlan All
Files(*.*).
Buka web browser anda (internet explorer)
Bukalah dokumen yang anda buat tadi. (File|Open)
Klik browse: arahkan ke file Contoh1.html, klik OK
Lihatlah hasilnya :
-
Halaman 4
Praktikum 2
Pada praktikum 2 kali ini kita akan belajar menambahkan warna background, dan pemformatan
tampilan teks.
Buka kembali file web.html pada program teks editor anda (notepad).
Ubah perintah berikut
Ubah paragraf pertama menjadi seperti dibawah ini :
WWW adalah layanan yang paling sering digunakan dan
memiliki perkembangan yang sangat cepat karena dengan layanan
ini kita bisa menerima informasi dalam berbagai format
(multimedia). Untuk mengakses layanan WWW dari sebuah komputer
(yang disebut WWW server atau web server ) digunakan
program web client yang disebut web browser atau browser saja.
Jenis-jenis browser yang sering digunakan adalah: Netscape
Navigator/Comunicator, Internet Explorer, NCSA Mosaic, Arena,
Lynx, dan lain-lain.
Simpan hasil editing anda (File|Save)
Lihat hasil perubahan pada web browser anda.
Praktikum 3
Buatlah sebuah dokumen HTML untuk tulisan berikut ini :
Simpan dengan nama Lulusan_kompetitif.html.
Lulusan D-4 yang Kompetitif
Sebuah perenungan untuk anda para mahasiswa
SEKITAR 15-20 tahun yang lalu, lulusan Diploma 4 (D-4) dapat dipastikan bisa memperoleh
pekerjaan yang enak dengan cepat. Enak di sini maksudnya mendapatkan jabatan dan gaji yang
baik. Namun, sekarang keadaan berubah. Tidak sedikit lulusan sarjana yang menganggur karena
-
Halaman 5
tidak mendapat pekerjaan dan tidak bisa membuka usaha sendiri. Untuk menutupi kenyataan
menganggur, beberapa penganggur mencoba melucu dengan mengatakan bekerja di perumtel,
kependekan dari penunggu rumah dan telenovela. Menganggurnya lulusan D-4 tidak saja akibat
kondisi di luar, tetapi juga akibat kondisi dari dalam diri lulusan D-4 itu. Banyak mahasiswa
yang tidak menyiapkan diri dan mentalnya selama kuliah sehingga ketika lulus tidak tahu ke arah
mana harus melangkah.
Sesungguhnya apa yang dipikirkan para lulusan SMU ketika memasuki bangku kuliah dan
bidang studi yang dipilihnya? Menjadi tukang insinyur seperti si Doel anak sekolahan? Lalu, ke
mana setelah itu? Apakah di benak mereka terpikirkan 3 K: Kuliah, kerja, kawin? Lulus kuliah,
mencari pekerjaan, kemudian menikah, dan seterusnya?
Apakah para mahasiswa itu terkungkung dalam situasi dunianya sendiri tanpa melihat dunia di
luarnya seperti adanya pasar global yang dinamis dan menuntut daya saing sangat kompetitif?
Siapkan mereka menyambut pasar bebas ASEAN? Pedulikah mereka pada pengakuan kualitas
kelulusan mereka oleh negara lain yang sangat penting untuk persaingan global dan pasar bebas?
Pedulikah mereka pada posisi sumber daya manusia (SDM) Indonesia di antara SDM bangsa
lain?
-
Halaman 6
Lat II
(PEMFORMATAN TEKS DAN KARAKTER KHUSUS)
Pemformatan Teks:
Perintah-perintah yang digunakan:
..teks..
tag-tag pemformatan :
Tag awal Kegunaan
Mendefinisikan teks yang ditebalkan.
Mendefinisikan teks yang besar ukurannya.
Mendefinisikan teks yang ditekankan
Mendefinisikan teks yang dimiringkan Italic
Mendefinisikan teks yang kecil ukurannya
Mendefinisikan teks yang ditebalkan.
Mendefinisikan teks yang dijadikan subscript.
Mendefinisikan teks yang dijadikan superscript.
Mendefinisikan teks yang digaris bawahi Underline
Mendefinisikan teks yang di coret strikethrough
Karakter-karakter khusus
Entitas Keterangan
Copyright
Registered
Trade mark
Non breaking space
& Ampersand
Anggle quotation mark (left)
Anggle quotation mark (right)
Poundsterling
Euro
-
Halaman 7
Yen
Praktikum 1
Ketikkan script berikut menggunakan teks editor.
Simpan dengan nama Internet.html
Interconnected Network
Interconnected Network
alias Internet
Interconnected Network - atau yang lebih populer
dengan sebutan Internet - adalah sebuah sistem komunikasi
global yang menghubungkan komputer-komputer dan jaringan-
jaringan komputer di seluruh dunia. Setiap komputer dan
jaringan terhubung - secara langsung maupun tidak langsung -
ke beberapa jalur utama yang disebut internet backbone
dan dibedakan satu dengan yang lainnya menggunakan
unique name yang biasa disebut dengan alamat IP 32
bit. Contoh: 202.155.4.230 . Komputer dan jaringan dengan
berbagai platform yang mempunyai perbedaan dan ciri khas
masing-masing (Unix, Linux, Windows, Mac, dll) bertukar
informasi dengan sebuah protokol standar yang dikenal dengan
nama TCP/IP (Transmission Control Protocol/Internet
Protocol). TCP/IP tersusun atas 4 layer (network access,
internet, host-to-host transport, dan application) yang
masing-masing memiliki protokolnya sendiri-sendiri.
-
Halaman 8
Bila anda mempunyai Komputer minimal prosessor 486, Windows
95, Modem, dan line telepon, maka anda telah bisa bergabung
dengan ribuan juta komputer lain dari seluruh dunia dan
mengakses harta karun informasi di internet.
© POLITEKNIK
NEGERI MANADO Manado
Praktikum 2
Ketikkan script berikut menggunakan teks editor.
karakter khusus
Copyright
Trademark
Registered
Poundsterling
Yen
Euro
-
Halaman 9
Simpan dengan nama karakter_khusus.html
Lihat hasilnya dengan browser.
Praktikum 3
Ketikkan script berikut menggunakan teks editor.
Formatting Font
Bold
Underline
Italic
Strong
Emphasis
Citation
-
Halaman 10
strikethrough
CO2
H2O
Simpan dengan nama font.html
Lihat hasilnya dengan browser.
-
Halaman 11
Lat III
(Penyisipan Gambar)
Perintah-perintah yang digunakan dalam penyisipan gambar :
Perintah dibawah ini digunakan untuk menyisipkan gambar kedalam dokumen HTML.
Bila ingin menggunakan gambar sebagai background/latar belakangdokumen HTML
praktikum 1
Ketikkan script berikut :
Wisata Dunia
Tempat-tempat yang indah didunia
Inilah tempat-tempat wisata dunia yang banyak
dikunjungi oleh
wisatawan tiap tahunnya:
-
Halaman 12
Gunung Lawu : terletak di Propinsi Jawa Timur
Indonesia
Hawaii : Terletak di Benua Amerika
Simpan dengan nama image_align.html
Lihat hasil melalui browser.
-
Halaman 13
Praktikum 2 (Tugas)
Buatlah dokumen HTMl dengan tampilan sebagai berikut :
-
Halaman 14
Lat 4
HYPERLINK
Perintah-perintah yang digunakan :
Membuat link dengan karakter : link
Membuat link dengan gambar :
Membuat nama link pada satu dokumen (anchor) :
Membuat link pada bagian lain dalam satu dokumen HTML. :
nama_link
Praktikum 1
Ketikkan script berikut :
Wisata Dunia
Tempat-tempat yang indah didunia
Inilah tempat-tempat wisata dunia yang banyak dikunjungi oleh
wisatawan tiap tahunnya.
Ikuti link pada gambar untuk melihat secara
detail.
-
Halaman 15
Gunung Lawu : di Propinsi Jawa Timur
Hawaii : Terletak di Benua Amerika
Colloseum : ada di Romawi
Candi Borobudur : Di Jawa Tengah
Tersedia paket perjalanan wisata dengan
harga mulai 100$ US
Pesan
sekarang juga
TOP
Simpan dengan nama Tempat_wisata.html
Jalankan dari web browser.
-
Halaman 16
Praktikum 2
Buat script berikut dan simpan dengan nama detail_tempat_wisata.html
Detail Tempat Wisata
Detail Tempat Wisata
Gunung Lawu
Gunung yang indah dan penuh dengan legenda ini terletak di
Propinsi Jawa Timur, dengan
ketinggian sekitar 3265 diatas permukaan laut.
Harga paket perjalanan wisata : Rp. 500.000 (3H2M)
Hawaii
Kepulauan hawaai merupakan pulau yang indah dengan pantai-
pantai
yang eksotis. Dengan tarian yang khas, dan keramah-tamahan
penduduknya.
-
Halaman 17
Harga paket perjalanan wisata : $500.000 (3H2M)
Kembali
Cek semua link yang terdapat pada kedua file HTML diatas
-
Halaman 18
lat 5
LIST
List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu.
Jenis-jenis list dalam HMTL :
List dengan nomor (OL : Ordered List)
Nomor item pada ordered list secara default adalah menggunakan angka 1,2,3.., dst sampai
sejumlah item dalam list tersebut. Bila nomor ingin diganti dengan type yang lain (romawi,
abjad huruf besar/kecil), maka kita tinggal mengisi atribut type pada tag
Contoh untuk list dengan angka romawi :
List tanpa nomor (UL: Unordered List)
Jenis bullet pada unordered list bisa diganti dengan mengisikan atribut type pada tag
Contoh : bila ingin bullet berbentuk kotak.
List definisi
Praktikum 1:
Cobalah script berikut ini :
Ordered List & Unordered List
An ordered List :
Coffee
Tea
Milk
An unordered List :
Coffee
Tea
Milk
-
Halaman 19
Simpan dengan nama list.html
Jalankan dengan web browser
Praktikum 2:
Cobalah script berikut ini :
definition list
Coffee
Black hot drink
Ice Cream
sweet Cold drink
Simpan dengan nama definition.html
Jalankan dengan web browser
-
Halaman 20
Lat 6
TABEL
Elemen-elemen tabel :
Elemen Keterangan
... Mendefinisikan sebuah tebel dalam HTML. Jika atribut border dituliskan,
maka browser akan menampilkan tabel dengan border.
Mendefinisikan sel header tabel, secara default teks dalam sel ini ditebalkan
dan rata tengah.
Mendefinisikan sebuah baris tabel dalam tabel. Anda dapat mendefinisikan
atribut untuk seluruh baris : align(left,center,right) dan/atau valign
(top,middle,bottom)
Mendefinisikan sebuah sel data tabel, secara default teks dalam sel ini akan
ditampilkan rata kiri dan ditengah secara vertikal. Sel data tabel dapat berisi
atribut untuk mendefinisikan karakteristik dari sel dan isinya.
Praktikum 1
Ketikkan script berikut
Belajar Tabel
Daftar Pegawai STMIK
No
Nama
Alamat
Telepon
-
Halaman 21
1
Jifly Miracle Kolondam
Manado
0431-88888
2
Farid Tondo
Manado
0274-377982
3
Evan Lomboh
Manado Sulawesi Utara
0431-815543
Simpan dengan nama tabel1.html
Jalankan dengan web browser
-
Halaman 22
Praktikum 2
Ketikkan script berikut ini
Daftar Nilai Pemrograman Web 1
Nama
Nilai
Tugas
Praktikum
Daud Umbas
80
85
Zivic C.H Tandayu
90
93
Harke T Nelwan
100
98
-
Halaman 23
Simpan dengan nama tabel2.html
Jalankan dengan web browser
Praktikum 3 (tugas)
Buatlah dokumen HTML dengan tampilan sebagai berikut :
Biaya SPP Per semester Politeknik Negeri Manado
Tahun ajaran 2014/2015
Lulusan Periode Daftar Biaya
LPK Polimdo
I Rp. 650.000
II Rp. 700.000
III Rp. 750.000
LPK Non Polimdo
I Rp. 675.000
II Rp. 725.000
III Rp. 775.000
SMU/Sederajat
I Rp. 700.000
II Rp. 750.000
III Rp. 800.000
-
Halaman 24
Lat 7
FRAME
Sintaks :
Praktikum 1
Buat file dengan nama Frame.html
Buat file dengan nama atas.html
Politeknik Negeri Manado :
Meraih Sukses Bersama Politeknik
-
Halaman 25
Buat file dengan nama utama.html
SELAMAT DATANG DI SITUS POLITEKNIK NEGERI
MANADO
SELAMAT DATANG DI SITUS POLITEKNIK NEGERI MANADO
Politeknik Negeri Manado berdiri pada tanggal
19 Juli 1998.
.
Buat file dengan nama kiri.html
Program Studi
Sejarah Singkat
Program Studi
Fasilitas
Alumni
Info Kerja
-
Halaman 26
Buat file dengan nama bawah.html
untitled
Politeknik Negeri Manado2014
Jalankan file frame.html,
-
Halaman 27
Lat 8
IMAGE MAP
Metode ImageMap mengharuskan pemrogram web untuk mendefinisikan daerah-daerah dalam
suatu gambar (image) yang mempunyai link. Derah yang didefinisikan berupa bentuk daerah dan
koordinat pembatasnya. Bentuk daerah peta dibedakan menjadi :
Point : daerah berupa titik
Rect : daerah berupa kotak/persegi panjang
Poly : daerah berbentuk polygon
Circle : daerah berbentuk lingkaran
Koordinat daerah menggunakan posisi titik (point). Adapun ketentuan pendefinisian koordinat
(0,0) dimulai dari pojok kiri atas gambar, dan maksimum koordinat adalah pojok kanan bawah
gambar (lebar_maks, tinggi_maks).
Sintaks :
Coordinat dari object relatif terhadap pojok kirai atas image.
Coordinate Value
Rect Left-x, top-y, right-x, bottom-y
Circle CENTER-X, CENTER-Y, RADIUS
Poly X1, Y1, X2, Y2, XN, YN
-
Halaman 28
Contoh:
Creating Hotspot
-
Halaman 29
Contoh penggunaan image map:
Script dari image map diatas adalah :
Image Map
Selamat Datang
-
Halaman 30
Lat 9
FORM DAN INPUT
Form merupakan elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna
web. Pengguna web dapat memasukkan input melalui halaman web.
Sintaks :
Jenis masukan dalam suatu form dibedakan menjadi :
Text : digunakan untuk memasukkan suatu nilai untuk dikirimkan ke server. Nilai bisa
berupa angka atau teks.
Text Area : digunakan untuk memasukkan data dalam bentuk teks yang jumlah karakternya
banyak.
Radio : menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih.
Check Box : menyediakan beberapa pilihan, bisa lebih dari satu pilihan.
List : pilihan dalam bentuk list., pilihan dapat lebih dari satu.
Button : mendefinisikan tombol untuk melakukan pemrosesan form.
o Submit : untuk memenggil url, setelah selesai penginputan form.
o Reset : untuk menginisialisasi setiap elemen form.
o Button : untuk memebuat form lebih interaktif, untuk memanggil script (fungsi) yang ada
dalam dokumen HTML.
o Image : digunakan sebagai pengganti button, button yang berbentuk gambar.
Praktikum 1
Ketikkan script berikut :
formulir
-
Halaman 31
Formulir Pendaftaran Kursus
Nama
:
Jenis Kelamin
:
Laki-laki
Perempuan
Alamat
:
Propinsi
:
Jawa Barat
Jawa Tengah
Jawa Timur
Pilihan Kursus
-
Halaman 32
:
Bahasa Inggris
Komputer
Simpan dengan nama form.html
Lihat hasilnya dengan browser.
-
Halaman 33
Praktikum 2 (validasi data)
Bukalah kembali file form.html.
Tambahkan script berikut pada bagian head :
Jalankan dengan browser.
Validasi Data dengan JavaScript:
Ketikkan script berikut :
Membuat Validasi
function ValidasiForm()
{
if (document.FormTamu.nama.value=="") {
alert("Kolom nama tidak boleh kosong");
return false;
}
if (document.FormTamu.alamat.value=="") {
alert("Kolom Alamat tidak boleh kosong");
return false;
-
Halaman 34
}
if (document.FormTamu.email.value=="") {
alert("Kolom Email tidak boleh kosong");
return false;
}
}
Form Validasi
Nama
Alamat
Email
-
Halaman 35
Jalankan hasilnya.
-
Halaman 36
Lat 10
CSS (Cascading Style Sheet)
CSS merupakan sebuah dokumen yang dapat digunakan untuk melakukan pengaturan pada
seluruh komponen web. CSS bisa digunakan dengan berbagai metode, salah satu diantaranya
adalah diletakkan pada bagian Head.
Contoh penggunaan CSS :
Membuat form bentuk cantik
-
Halaman 37
Form Cantik
Nama
Alamat
Email
Pesan
-
Halaman 38
Lat 11
MEMPERCANTIK HALAMAN WEB
Cursor diikuti teks:
Ketikkan script berikut :
Animasi Kursor
-
Halaman 39
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i
.spanstyle {
position:absolute;
-
Halaman 40
visibility:visible;
top:-50px;
font-size:8pt;
font-family:verdana;
color:black;
font-weight: bold;
}
a { color:FFFFCC; text-decoration:none }
a:hover { color:FFFF99; text-decoration:underline }
a:visited { color:FFFF99 }
Gerakan Mouse .....
Teks Berjalan Pada Status Bar
-
Halaman 41
teks jalan