modul pemograman web 1

Modul Pemrograman Web I

1

1. Pengenalan HTML

a. World Wide Web

Internet merupakan jaringan global yang menghubungkan suatu network dengan

network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara

jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi.

World Wide Web (WWW) merupakan bagian dari internet yang paling cepat

berkembang dan paling populer.

WWW bekerja merdasarkan pada tiga mekanisme berikut:

Protocol standard aturan yang di gunakan untuk berkomunikasi pada

komputer networking, Hypertext Transfer Protocol (HTTP) adalah protocol

untuk WWW.

Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform

Resource Locator) yang di gunakan sebagai standard alamat internet.

HTML digunakan untuk membuat document yang bisa di akses melalui web.

b. Pengenalan HTML

Hypertext Markup Language merupkan standard bahasa yang digunakan untuk

menampilkan document web, yang bisa anda lakukan dengan HTML yaitu :

Mengontrol tampilan dari web page dan contentnya.

Mempublikasikan document secara online sehingga bisa di akses dari seluruh

dunia.

Membuat online form yang bisa di gunakan untuk menangani pendaftaran,

transaksi secara online.

Menambahkan object-object seperti image, audi, video dan juga java applet

dalam document HTML.


2

c. Browser dan Editor

1) Browser

Browser merupakan software yang di install di mesin client yang berfungsi untuk

menterjemahkan tag-tag HTML menjadi halaman web.

Browser yang sering di gunakan biasanya Internet Explorer, Mozilla Firefox,

Google Chrome, Opera, Safari, Netscape Navigator dan masih banyak yang

lainya.

2) Editor

Program yang di gunakan untuk membuat document HTML, ada banyak HTML

editor yang bisa anda gunakan diantaranya: Notepad, Notepad++, Netbeans,

Ms.FrontPage, dan Adobe Dreamweaver.

Untuk yang sering kita gunakan Notepad atau Notepad++.

d. Tag HTML dan Penulisan HTML

HTML (HyperText Mark up Language) merupakan suatu metoda untuk

mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML

sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang

hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai

program, penulisan tag HTML tidak case sensitive.

Penulisan Tag HTML terlihat gambar dibawah ini :


3

Ok, langsung saja kita buka editor notepad atau notepad++ dan ketikkan code HTML

dibawah ini.

Setelah kalian ketik simpan dengan nama contoh_001.html atau contoh_001.htm lalu

kalian file tersebut kalian klik dua kali untuk melihat hasil dari code tersebut.

Output dari code diatas adalah seperti berikut :

Contoh Kedua

Pengaturan paragraph

Kami Sedang Belajar HTML


4

Contoh Ketiga

Penggunaan break <br>

Contoh Keempat

Penggunaan Horizontal Rule <HR>


5

Latihan Pertama :

Gabungkan code contoh 2 s/d 4 sehingga dapat menampilkan seperti gambar

dibawah ini :


6

e. Mewarnai latar / Memberi warna background, memberi warna font dan mengatur

besar-kecilnya font.

Contoh Kelima

Penggunaan bgcolor

Untuk value bgcolor bisa menggunakan dengan warna langsung seperti

Red, Green, Blue, Yellow, Brown, Grey dan lain sebagainya.

Dan bisa juga dengan Hexa decimal.

Warna Dengan Text Hexadecimal color

Putih / White #FFFFFF

Hitam / Black #000000

Merah / Red #FF0000

Hijau / Green #00FF00

Biru / Blue #0000FF

Kuning / Yellow #FFFF00

Jingga / Pink #FF00FF

Abu-abu / Grey #C0C0C0


7

Contoh Keenam

Pewarnaan font / text

Contoh Ketujuh

Penggunaan Heading


8

Contoh Kedelapan

Pengaturan ukuran Font


9

Latihan & Tugas

Buatlah Laman Web tentang data pribadi anda, dengan menggabungkan Tag-tag

HTML dari Contoh Kelima sampai dengan contoh kedelapan. Jangan lupa diberikan

warna untuk latarnya.

f. Pembuatan Bullet Numbering.

Contoh Kesembilan


10

Penggunaan list

g. Pemakaian gambar.


11

Untuk menggunakan file gambar yang akan kita sisipkan didalam Tag HTML, langkah

awal adalah copy kan file gambar tersebut dalam satu direktori atau folder project

web anda. Dan mesti anda ketahui, penggunaan gambar disini sangat case sensitive

dalam pemanggilan file gambar yang akan kita buat.

Tag HTML-nya seperti berikut <IMG SRC=”NAMA FILE GAMBAR”>

Nah perlu dipahami juga ektension file gambar tersebut apakah .jpg .png .bmp .gif

misalkan kita mempunyai gambar bernama “TeknikInformatika” dengan ektension

gambarnya .jpg maka, tag HTML adalah seperti berikut

<IMG SRC=”TeknikInformatika.jpg”>

Langsung saja kita coba

Contoh Kesepuluh

Penggunaan file gambar

Perlu kalian perhatikan disini kita menggunakan file gambar dengan nama “apple.jpg”

Bagaimana jika file gambar berada didalam suatu folder atau direktori lain.??

Silahkan kalian perhatikan dan fahami pada code contoh kesebelas.

Contoh Kesebelas


12

Penggunaan file gambar dengan beda direktori.

Kalian lihat disini ada 2 folder yaitu folder HTML dan folder IMAGES, nah file gambar

“apple.jpg” berada dalam folder IMAGES maka untuk code / Tag HTMLnya seperti

berikut :

Catatan : Untuk file HTML ada pada folder HTML dan file gambar ada pada folder

IMAGES.

Latihan & Tugas


HTML dari Contoh Pertama sampai dengan Contoh Kesebelas.

h. Pembuatan Hyperlink


13

Contoh Keduabelas

Hyperlink

Hyperlink sebuah code Tag HTML untuk menghubungkan file yang satu dengan yang

lain. Untuk kasus disini kita belum mengisikan file yang ingin kita hubungkan.

Karena <a href = ”#” > masih tertuju ke # jadi belum bias menghubungkan dan

menampilkan ya ada.

Untuk itu lebih kalian coba isikan Tag <a href= “ ”> dengan file yang sudah kalian

buat dari contoh pertama hingga contoh kesebelas.

i. Pembuatan Table


14

Contoh Ketigabelas

Table

j. Pembuatan Form


15

Bentuk HTML digunakan untuk melewatkan data ke server.

Suatu bentuk dapat berisi elemen input seperti bidang teks, checkbox, radio button,

tombol submit dan banyak lagi. Formulir juga dapat berisi daftar pilih, textarea,

fieldset, legenda, dan elemen label.

Tag <form> digunakan untuk membuat bentuk HTML seperti berikut :

Langsung saja kalian coba code Tag HTML dibawah ini :

Contoh Keempat Belas

Contoh Kelima Belas


16

Contoh Keenam Belas


17

Latihan & Tugas


HTML dari Contoh-contoh yang pernah kalian praktikkan, jangan lupa untuk

membuat menu register dan semua file harus bias terhubung satu dengan yang lain.


18

2. CSS (CASCADING STYLE SHEET)

Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk

mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan

seragam.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat

mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style

lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya

CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML

dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna

tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar

paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS

adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan

adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format

yang berbeda.

( sumber : http://id.wikipedia.org/wiki/Cascading_Style_Sheets ).

Contoh aturan penulisan syntax CSS

Syntaxis CSS dibagi dalam 3 bagian, yaitu : selector {property : value}

Dimana : selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).

property : atribut yang akan diubah.

h1 { color: green; }

selector

property

value

http://id.wikipedia.org/wiki/Cascading_Style_Sheets


19

Penulisan CSS dibagi 3 penempatan :

o Inline Style Sheet

o Embbeded Style Sheet

o External Style Sheet

Inline Style Sheet

CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup

dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku

pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain.

Contoh penulisan CSS dengan metode Inline Style Sheet :

Output pada browser :


20

Embbeded Style Sheet

CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada

pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML,

yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

Contoh penggunaan CSS dengan metode Embedded Style Sheet :


Nah, sudah faham kan untuk penulisan CSS dengan Inline dan Embedded Style Sheet, jika

sudah mari sekarang kita lanjut ke penulisan CSS dengan External Style Sheet.


21

External Style Sheet.

Untuk penggunaan External Style Sheet kita mesti membuat 2 buah file, yang pertama kita

membuat file berekstensi .html atau .htm, lalu yang kedua file berekstentsi .css nah, silahkan

langsung mencobanya.

Kami menggunakan disini file HTML bernama 003_css.html dengan code program seperti

dibawah ini :

Dan untuk file kedua kami beri nama 003_css.css dengan code program seperti dibawah ini :


22

Penjelasan :

Jika kita lihat pada code HTML <link rel="stylesheet" type="text/css" href="003_css.css" />,

nah maksudnya adalah file CSS yang kita punya di-link dengan menggunakan tag tersebut

sehingga code HTML bisa menampilkan syntax CSS yang kita punya yang akan ditampilkan

pada browser.


Tugas :

Buatlah biodata anda dengan menggunakan tiga (3) kriteria penulisan CSS diatas.


23

Hyperlink dengan CSS.

Contoh code program HTML hyperlink dengan CSS, untuk code HTMLnya seperti berikut :

Dan untuk CSS nya seperti berikut :



24

Penjelasan :

Kita lihat code program,

a : link = link awal dengan warna orange dan untuk garis bawah teks masih ada.

a : visited = jika cursor dan di klik akan berwarna biru

a : hover = jika cursor disorot ke link yang kita sorot maka akan berwarna merah dan garis

bawah pada teks akan hilang, sebab terdapat selector text-decoration dan value none.

a : active = jika link tersebut diklik dan halaman web berada pada link tersebut.

Tugas.

Gabungkan file yang pernah kalian buat pada pembahasan HTML tentang Hyperlink, dan

untuk href=”” isikan sesuai dengan nama atau file yang pernah kalian buat.


25

Memperindah dan Mempercantik Table.

Langsung saja lihat dan praktikkan code HTML dibawah ini :

Dan Syntax CSS dibawah ini :

Seperti biasa kita gunakan External Style Sheet, sebab dalam proses editing jika ada error

code akan lebih mudah untuk mencari error code-nya dan kalian tidak perlu membaca satu

persatu code di HTML-nya.



26

Penggunaan ID dan Class pada CSS.

Selain menetapkan satu gaya untuk elemen HTML, CSS memungkinkan anda untuk

menentukan penyeleksi anda sendiri yang disebut "ID" dan "CLASS".

1. Id Selector

Pemilih id digunakan untuk menentukan gaya untuk elemen tunggal yang unik.

Selector ID menggunakan atribut ID elemen HTML, dan didefinisikan dengan "#".

Aturan style dibawah ini akan diterapkan ke elemen dengan ID = "contoh1" :

2. Class Selector

Pemilih kelas digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda

dengan pemilih id, pemilih kelas yang paling sering digunakan pada beberapa

elemen. Hal ini memungkinkan Anda untuk menetapkan gaya tertentu untuk banyak

elemen HTML dengan kelas yang sama. Pemilih kelas menggunakan atribut class

HTML, dan didefinisikan dengan "." Pada contoh di bawah ini, semua elemen HTML

dengan class = "pusat" akan menjadi pusat-blok :


27

Anda juga dapat menentukan bahwa hanya elemen HTML khusus, harus dipengaruhi

oleh class. Pada contoh di bawah ini, semua elemen p dengan class = "pusat" akan

menjadi pusat-blok :

3. Pengenalan Javascript

A. Sejarah JavaScript

JavaScript pertama kali diperkenalkan oleh Netscape pada tahun 1995. Pada awalnya

bahasa yang sekarang disebut JavaScript ini dulunya dinamai “LiveScript”” yang berfungsi

sebagai bahasa sederhana untuk browser Netscape Navigator 2 yang sangat populer pada

saat itu. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun

(pengembang bahasa pemrograman “Java”) pada masa itu, maka Netscape memberikan

nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995.

Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan

teknologi ini yang mereka sebut sebagai “Jscript” di browser milik mereka yaitu Internet

Explorer 3. JavaScript sendiri merupakan modifikasi dari bahasa pemrograman C++ dengan

pola penulisan yang lebih sederhana dari bahasa pemrograman C++.

B. Pengertian JavaScript

JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien.

Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript

sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web

agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku


28

kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek,

sedangkan Script adalah serangkaian instruksi program.

Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek

yang dibenamkan (embedded). Contoh sederhana dari penggunaan JavaScript adalah

membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server,

merubah image kursor ketika melewati objek tertentu, dan lain lain.

C. Yang Harus Diperhatikan Dalam Penulisan JavaScript

Yang harus diperhatikan dalam pengelolaan pemrograman JavaScript, diantaranya

JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf besar dan

huruf kecil. Jika Anda pernah belajar bahasa pemrograman seperti Turbo C atau C++, maka

sama seperti bahasa pemrograman tersebut, dimana huruf T tidak sama dengan huruf t.

Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak

boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah

var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf

kecil semua), dsb.

D. Kelebihan JavaScript

JavaScript bekerja pada sisi browser. maksudnya begini : untuk menampilkan halaman

web, user menuliskan alamat web di address bar url. setelah itu, browser “mengambil” file

html ( dengan file JavaScript yang melekat padanya jika memang ada ) ke server yang

beralamat di URL yang diketikan oleh user. Selesai file diambil, file ditampilkan pada

browser. Nah, setelah file JavaScript berada pada browser, barulah script JavaScript

tersebut bekerja.


29

Efek dari Javascript yang bekerja pada sisi browser ini, Javascript dapat merespon

perintah user dengan cepat, dan membuat halaman web menjadi lebih responsif. JavaScript

melakukan apa yang tidak bisa dilakukan oleh HTML, PHP, dan CSS : menangani hal – hal

yang membutuhkan respons cepat terhadap aksi dari user.

Contoh : fungsi validasi pada form. ketika anda mengisi sebuah form yang divalidasi

menggunakan JavaScript, anda mengetikkan data lalu mengetik submit, sebelum data

dikirimkan ke server, data akan “dicek” terlebih dahulu pada browser menggunakan fungsi

JavaScript yang ada pada halaman web. sehingga, jika memang data yang anda isikan tidak

valid, daripada membuang-buang waktu dengan mengirimkan data ke server baru di validasi

di server dan lalu server mengirimkan respons balik mengenai ketidak validan input data

anda, lebih baik cek validasi data form dilakukan secara lokal di browser menggunakan

fungsi JavaScript.

E. Lebih Cepat dan Lebih Hemat

Implementasi terpopuler saat ini dari pemrograman JavaScript adalah teknik AJAX.

(Asynchronous JavaScript and XMLHTTP ). teknik ini sering digunakan oleh aplikasi

berbasis web seperti Facebook, Yahoo Gmail, Google Reader, dan lain lain. Teknik yang

membuat pertukaran data antara server dan browser terjadi di belakang layar sehingga

interaksi antara user dan aplikasi web semakin responsif. Post tersendiri untuk membahas

hal ini akan kita siapkan.


30

Contoh Tag HTML dengan Javascript

Contoh Pertama

javascript_001.html

Penjelasan :

Jika kita klik tombol Klik Disini maka akan muncul popup dengan nama “Kok di Klik seeh”.

Mengapa sebab kita mempunyai perintah javascript onclick dengan value alert dan menu isi

Kok di Klik seeh.

Contoh Kedua

javascript_002.html


31

Penjelasan :

Jika cursor mouse kita arahkan ke tombol Hijau maka secara otomatis background berubah

warna menjadi warna hijau, dan saat cursor mouse tidak kearah tombol hijau maka secara

default background bewarna putih. Mengapa karena kita memiliki perintah javascript

onmouseover dan onmouseout dengan value sesuai bgColor.

modul pemograman web 1

Documents