Bkpm Pemrograman Berbasis Web2

8/18/2019 Bkpm Pemrograman Berbasis Web2

1/14

BKPM Pemrograman Berbasis Web

Praktikum : 1

Judul Praktikum : Pengenalan HTML

Alokasi waktu : 1 x 110 menit

1. Tujuan Instruksional Khusus

• Mahasiswa mengetahui apa yang dimaksud dengan HTML

• Mahasiswa mampu membuat HTML dan dapat dibuka di browser masingmasing

• Mahasiswa mampu menambahkan !udul dan text halaman HTML

• Mahasiswa mampu membuat paragra" dan mem"ormat text halaman HTML

• Mahasiswa mampu menentukan ukuran# !enis dan warna "ont halaman HTML

• Mahasiswa mampu menentukan warna ba$kground halaman HTML

•

Mahasiswa mampu menentukan heading halaman HTML• Mahasiswa mampu menyisipkan komentar di halaman HTML

2. Teori

Hypertext Markup Language %HTML& merupakan standar bahasa yang digunakan

untuk menampilkan dokumen web# yang bisa Anda lakukan dengan HTML yaitu:

• Mengontrol tampilan dari web page dan $ontennya

• Mempublikasikan do$ument se$ara online sehingga bisa diakses dari seluruh

dunia

• Membuat online "orm yang bisa digunakan untuk menangani poenda"taran#

transaksi se$ara online

• Menambahkan ob!ek seperti image# audio# 'ideo dan !uga !a'a applet dalam

do$ument HTML

2.1 Browser dan Editor

Browser

(rowser merupakan so"tware yang di install di mesin $lient yang ber"ungsi untuk

mener!emahkan tagtag HTML men!adi halaman web)

(rowser yang sering digunakan biasanya *nternet +xplorer# ,ets$ape ,a'igator

dan masih banyak lainnya)

Editor

Program yang digunakan untuk membuat do$ument HTML# ada banyak HTML

editor yang bisa Anda gunakan diantaranya: Ms -rontPage# .reamwea'er# ,otepad


2/14


2.2 Tag – Tag HTML

Penanda perintah di HTML disebut Tag) Tag digunakan untuk menentukan

tampilan dari dokumen HTML

isi dokumen

tag tidak $ase sensiti"# !adi bisa menggunakan /TA atau /tag

(entuk dari tag HTML adalah /+L+M+,T ATT2*(3T+ 4 'alue

• +lement 4 nama tag

• Attibute 4 atribut dari tag

• 5alue 4 nilai dari atribut

2.3 Struktur HTML

.okumen HTML dibagi men!adi 6 bagian utama:

1& HTML

7etiap dokumen HTML harus diawali dan diakhiri dengan tag HTML

......

tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah

dokumen HTML

8& Head

(agian header dokumen HTML diapit tag /H+A. dan tag /9H+A.

......

Tag /H+A. dan tag /9H+A. terletak di antara tag /HTML dan tag

/9HTML) di dalam bagian ini biasanya dimuat tag T*TL+ yang menampilkan

!udul halaman pada title browser) Tag T*TL+ memberikan mark suatu website)

(rowser menyimpan title; sebagai bookmark dan !uga untuk pen$arian

%sear$hing&) (iasanya title digunakan sebagai keyword) Tag /T*TL+ dan tag

/9T*TL+ terletak di antara tag /H+A. dan tag /9H+A.)

......


3/14


6& (ody

Tag body digunakan untuk menampilkan isi dokumen HTML# dapat

berupa text# image link dan semua yang akan ditampilkan di web page) Tag

/(

Tulisan ini akan tampak pada browser


4/14


!.2 "aragra& dan 'or#at Te%t

Penulisan paragra" bisa menggunakan tag /p) 7edangkan untuk mem"ormat

tulisan9teks bisa menggunakan berbagai ma$am tag sesuai dengan keperluannya sesuai

dengan tabel berikut) 3ntuk ganti baris menggunakan tag /br)

Tag .eskripsi

/b Membuat tulisan ter$etak tebal

/i Membuat tulisan ter$etak miring

/u Membuat tulisan ter$etak bergaris bawah

/tt monospa$e

/em Membuat penekanan pada teks %emphasized &

/small Membuat tulisan ter$etak ke$il

/strong Menyatakan bahwa teks tersebut penting

/sub Membuat tulisan ter$etak sebagai subs$ript/sup Membuat tulisan ter$etak sebagai supers$ript

/ins Menyatakan teks yang diapit tag /ins itu disisipkan

/del Menyatakan teks yang diapit tag /ins i tu dihapus

%di$oret&

/mark Menyatakan teks yang ditandai %highlight &) +"ek stabilo

Tuliskan kode berikut pada notepadBB untuk menuliskan teks pada halaman

HTML) 7impan ke dalam tipeteks.html kemudian buka menggunakan browser)

%ntuk membuat tulisan men&adi lebi' inda' dan rapi( kita perlumem)ormat teks antara lain tulisan tebal( tulisan miring ( dan tulisan bergaris bawa'

!.3 'ont

3ntuk menentukan ukuran teks# elemen "ont menyediakan attribut siCe nilai 1

sampai D dari ukuran paling ke$il ke yang paling besar) 7elain itu disediakan atribut

$olor untuk mengatur warna dan atribut "a$e untuk mengatur !enis "ont)


HTML) 7impan ke dalam formatfont.html kemudian buka menggunakan browser)


5/14


teks ukuran . kuning

teks ukuran 1 mera'

teks ukuran 2 abu$abu

teks ukuran 4

'i&au

teks ukuran 5

'itam

teks ukuran 70

biru

antilah warna dengan warna lain sesuai tabel

bla$k E000000

white E------

red E--0000

yellow E----00lime E00--00

blue E0000--

"u$hsia E--00--

gray EF0F0F0

sil'er E000

maroon EF000000

oli'e EF0F000

green E00F000

teal E00F0F0

na'y E0000F0

purple EF000F0

!.! Ba(kground

(a$kground dapat berupa warna# gambar dan gra"ik) Pada praktikum pertemuan

ini ba$kground yang digunakan adalah ba$kground warna) (a$kground gambar akan

dibahas pada praktikum selan!utnya)


6/14



HTML) 7impan ke dalam background.html kemudian buka menggunakan browser)


!.) Heading


HTML) 7impan ke dalam heading.html kemudian buka menggunakan browser)

Heading 7

Heading =

Heading

Heading 4

Heading 2

Heading 1

!.* Ko#entar

?omentar sangat berguna untuk memberikan keterangan kode HTML sehingga

lebih mudah dimengerti dan !ika ada kesalahan akan lebih mudah diperbaiki dan

dikoreksi)Tuliskan kode berikut pada notepadBB untuk menuliskan teks pada halaman

HTML) 7impan ke dalam komentar.html kemudian buka menggunakan browser)



7/14


) Tugas dan Latihan

eritakan tentang diri Anda minimal dalam 100 kata


8/14


Praktikum : 8

Judul Praktikum : Menyisipkan gambar dan link

Alokasi waktu : 1 x 110 menit

1. Tujuan Instruksional Khusus

• Mahasiswa dapat menyisipkan list sebagai da"tar

• Mahasiswa dapat menyisipkan gambar ke dalam dokumen HTML

• Mahasiswa dapat memberikan ba$kground gambar ke dalam dokumen HTML

• Mahasiswa dapat menggunakan list dan gambar sebagai link

• Mahasiswa dapat menggunakan "rame

2. Teori

2.1 List

3ntuk menampilkan da"tar dalam halaman web# HTML memiliki tag khusus) Jika

da"tar tersebut %tampil menggunakan bullet maka tag yang digunakan adalah /3L

yang berarti unordered list. ,amun !ika da"tar tersebut adalah da"tar yang penting

urutannya# maka tag yang digunakan adalah /


9/14


2.! Link

Link men!adi penghubung antara satu halaman dengan halaman lain) Link dapat

berupa teks atau gambar yang terkait dengan suatu alamat tertentu) Jika link di klik

maka dokumen HTML akan menu!u ke alamat tertentu) .itandai dengan anchor # yaitu

tag /A)

Tag /A mempunyai dua atribut# yaitu H2+- dan ,AM+) Atribut H2+-

digunakan !ika sebuah anchor akan digunakan sebagai link, sedangkan atribut ,AM+

digunakan !ika anchor sebagai tu!uan)

2.) Frame

(aik tidaknya sebuah web tidak hanya ditentukan oleh "ungsionalitas web

tersebut# tetapi !uga dipengaruhi oleh tampilan) Tampilan penting agar sebuah website

mudah dan nyaman digunakan serta membuat pengun!ungnya berkun!ung lagi di

kemudian hari# terutama website yang digunakan untuk komersil)

-rame digunakan untuk membagi !endela browser men!adi beberapa bagian

terpisah) Masingmasing bagian terdiri atas dokumen HTML tersendiri) *ni merupakan

mekanisme sederhana untuk mendesain layout halaman web)

3ntuk membuat "rame# tag yang digunakan adalah:

• tag /-2AM+7+T#

tag ini memiliki beberapa atribut# yaitu

Atribut ?eterangan

2


10/14


Jika menggunakan nilai tetap# "rame dide"inisikan dalam ukuran pixel) ara ini

kurang disarankan karena !ika resolusi monitor user tidak sama dengan resolusi

monitor saat peran$angan "rame# maka "rame yang terbentuk men!adi tidak

beraturan) .engan menggunakan nilai persentase atau proporsional# lebar setiap

"rame dide"inisikan sebagai persentase dari lebar !endela browser) Hanya sa!a

pemba$aan pada penggunaan proporsional berbeda) ontoh nilai proporsional

adalah K# 8K# K# K) Jumlah bintang %K& adalah 1B8B1B14) Artinya# "rame pertama

memiliki lebar1

5 dari !endela browser# "rame kedua memiliki lebar2

5 dari

!endela browser# "rame ketiga memiliki lebar 15 dari !endela browser# "rame

keempat memiliki lebar1

5 dari !endela browser

• tag /-2AM+#

tag ini memiliki beberapa atribut# yaitu

Atribut ?eterangan

72 menentukan nama "ile HTML yang

digunakan sebagai isi "rame

MA2*,H+*

HT

menentukan batas kiri dan kanan antara

dikumen dengan bingkai dalam pixel

72


11/14


• (?PM

• 2e"erensi Pemrograman @eb

• ?omputer

• L.

•

AT?


12/14


!. "elaksanaan "raktiku#

!.1 List


HTML) 7impan ke dalam list.html kemudian buka menggunakan browser)

list

Tugas "k'ir Kelompok =071Pengembangan @istem An)ormasi Poli&e

Amage


13/14


Link

!.) 'ra#e


HTML) 7impan ke dalam framekanan.html kemudian buka menggunakan browser)

*rame di sebela' kanan


HTML) 7impan ke dalam framekiri.html kemudian buka menggunakan browser)


14/14


*rame di sebela' kiri


HTML) 7impan ke dalam frame.html kemudian buka menggunakan browser)

Bkpm Pemrograman Berbasis Web2

Documents

Transcript of Bkpm Pemrograman Berbasis Web2