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.

&copy POLITEKNIK

NEGERI MANADO Manado

Praktikum 2


karakter khusus

Copyright

Trademark

Registered

Poundsterling

Yen

Euro

Halaman 9

Simpan dengan nama karakter_khusus.html

Lihat hasilnya dengan browser.

Praktikum 3


Formatting Font

Bold

Underline

Italic

Strong

Emphasis

Citation

Halaman 10

strikethrough

CO2

H2O

Simpan dengan nama font.html


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


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


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


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


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


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


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


Halaman 33

Praktikum 2 (validasi data)

Bukalah kembali file form.html.

Tambahkan script berikut pada bagian head :

Jalankan dengan browser.

Validasi Data dengan JavaScript:


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:


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

Documents

Lab Aktivity Pemograman Web HTML Herry LANGI