materi i

Pemrograman Web

Siti Ulfatur Rohmah | http://siti8842.blogspot.com/

1

MATERI I

DASAR PEMROGRAMAN WEB

Apa sih itu pemrograman web???? Tahukah kalian ketika browsing di internet ternyata didalamnya

terdapat program program coding yang rumit. Yuks kit belajar bareng bagaimana cara membuat

pemrograman di web.

A. PENGERTIAN WEB SERVER DAN WEB BROWSER

Web Server merupakan penyedia informasi dan memproses perintah dari client. Server juga

mengirimkan perintah ke client bagaimana cara menampilkan informasi dlm bentuk HTML

(Hypertext Markup Laguage)

Web Browser merupakan software yang dirancang untuk mengambil informasi dari suatu server

komputer ke jaringan internet.

Contoh web browser:

1. Internet Exprorer dari Microsoft

2. OPERA dari Opera Software ASA

3. Nescape Navigator dari Nescape Communication.

B. WEBSITE

Website adalah alamat URL (Uniform Resource Locator) yang berfungsi sebagai tempat

penyimpanan data dan informasi dengan topik tertentu. Website terdiri dari :

a. Webpage adalah halaman khusus dari web tertentu yang tersimpan dalam bentuk file

b. Homepage adalah halaman pertama dari suatu website yang biasanya digunakan untuk

memberikan informasi isi website dan siapa pemiliknya.

Kategori website :

1. Website statis adalah web yang berisi informasi yang sifatnya tetap.

2. Web dinamis dan interaktif adalah web yang menampilkan informasi secara dinamis dan

up to date serta dapat melakukan interaksi dengan user.

C. PEMROGRAMAN WEB

Pemrograman Web


2

Teknologi pemrograman web dibagi menjadi yaitu :

1. Client side progaming yaitu teknik pemrograman web dimana perintah program dijalankan

di web browser sehingga ketika client meminta dokumen yang mengandung script, maka

scrip tersebut akan didownload dari servernya kemudian akan dieksekusi pd web broser

yang bersangkutan. Contoh : Javascript, Vbscript, dan HTML.

2. Server side programming yaitu perintah perintah program (script) dieksekusi dahulu di web

server kemudian hasilnya dikirim ke browser dalam bentuk HTML biasa. Contoh : PHP, JSP

dan ASP

D. BELAJAR HTML

HTML (Hypertext Markup Language) merupakan suatu format yang digunakan dalam

pembuatan dokumen dan aplikasi yang berjalan di halaman web, disebut markup language karena

menggunakan tanda tanda tertentu yang disebut tag untuk mengatur bagaimana dokumen

ditampilkan dalam web browser.

Beberapa aplikasi dalam pembuatan halaman web yaitu :

1. Macromedia Dreamwever

2. Netscape Composer

3. Microsoft Fontpage

4. Sublime

E. STRUKTUR HTML

Elemen HTML ditandai dengan tag berpasangan berupa simbol . Penulisan HTML bersifat

tidak case sensitive, script html dapat ditulis dalam teks editor notepat kemudian disimpan

dalam ekstensi htm atau html.

Contoh struktur dasar html

Pemrograman Web

Pemrograman Web


3

Semoga bermanfaat ya. Yuks belajar dulu

Lalu simpanlah dengan format ekstensi .html contoh : belajar.html

BAGIAN HEAD

Bagian head tidak harus ada pada sebuah dokumen HTML, tetapi pemakaian

head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Bagian ini

menyimpan informasi yang berguna mengenai dokumen. Isi bagian head tidak

ditampilkan ketika dokumen HTML diakses melalui browser, kecuali bagian title

yang merupakan judul dokumen. Elemen- elemen yang terdapat pada bagian head

antara lain:

a. Tag

Tag ini digunakan untuk memberi judul dokumen. Judul dokumen

sebaiknya tidak terlalu panjang, tetapi mampu mencerminkan isi dari dokumen.

judul dokumen

b. Tag

Tag ini berfungsi untuk menentukan basis URL sebuah dokumen. Basis URL ini

berguna bila dalam dokumen tersebut terdapat link-link yang bersifat relatif,

agar link tersebut tetap bekerja meskipun dokumen dipindahkan ke direktori

lain atu ke komputer lain. Elemen mempunyai sebuah atribut, yaitu href

yang menunjukkan sebuah alamat URL.

c. Tag

Tag ini berfungsi untuk menunjukkan relasi antar dokumen HTML. Penggunaanya

d. Tag

Tag ini sangat berguna untuk memberikan deskripsi mengenai suatu dokumen

HTML, seperti refresh, description, author (pengarang), keyword (kata kunci),

dan lain-lain. Properti description dan keyword merupakan properti yang

penting dan dijadikan referensi bagi kebanyakan program search engine yang ada

di internet untuk menemukan suatu situs.

Pemrograman Web


4

BAGIAN BODY

Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen

. Sebagai contoh adalah pengaturan warna latar belakang halaman,

warna teks, warna link, dan lain-lain.

Atribut elemen body

background = lokasi dan nama file latar belakang image dokumen

bgcolor = warna latar belakang dokumen, default putih

text = warna teks dokumen, default hitam

link = warna link dokumen, default biru

vlink = warna visited link dokumen, default ungu

alink = warna active link dokumen, default merah

bgproperties = [fixed|none] (mengatur properti gambar latar belakang)

topmargin = batas atas dokumen (pixel)

leftmargin = batas kiri dokumen (pixel)

Pemrograman Web


5

PENGATURAN FORMAT DOKUMEN HTML

2.1.4. Heading

Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari

suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading.

Ada enam buah heading yang dikenal di HTML, yaitu dari sampai .

Latihan01.html

Latihan-1: Heading

TOKO BUKU SERBA MURAH

Toko kami menyediakan

Alat Tulis

Pensil, Ballpoint, Penggaris, Dll.

Buku-buku Pelajaran

Ilmu pasti, Ilmu bumi, Sejarah, Dll .

Peralatan Kantor

Meja, Kursi, File manager, Dll.

2.1.5. Paragraph

Tag paragraph berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web

Anda. Untuk mengatur perataan paragraf, digunakan atribut: align=[ left | center | right],

sebagai defaultnya adalah left.

2.1.6. Break

Tag break berfungsi untuk memberikan baris baru dalam halaman web Anda.

Pemrograman Web


6

Walaupun dalam pengetikan pada text editor terdapat perpindahan baris, namun

browser akan membacanya sebagai satu baris apabila tidak terdapat tag .Tag

break tidak memerlukan tag penutup .

2.1.7. Horizontal Rule

Tag horizontal rule berfungsi untuk menampilkan garis horisontal di halaman web

Anda. Tag ini sekaligus akan membuat baris baru. Tag tidak memerlukan elemen

penutup . Atribut elemen horizontal rule

align = [ left | center | right ] (perataan horisontal, default center)

size = tebal garis, pixel, default 2

width = lebar garis, pixel atau persen, default 100%)

color = warna garis batas

noshade (garis solid)

Latihan02.html

Selamat Belajar. Semoga Bermanfaat

materi i

Documents