Pembelajaran Pemrograman Web

-

BAB 1 Pendahuluan

A. World Wide Web

World Wide Web (WWW) adalah suatu program yang ditemukan oleh Tim Berners-Lee pada tahun 1991. Awalnya Berners-Lee hanya ingin menemukan cara untuk menyusun arsip-arsip risetnya. Untuk itu, beliau mengembangkan suatu sistem untuk keperluan pribadi. Sistem itu adalah program peranti lunak yang diberi nama Enquire. Dengan program itu, Berners-Lee berhasil menciptakan jaringan yang menautkan berbagai arsip sehingga memudahkan pencarian informasi yang dibutuhkan. Inilah yang dikenal sebagai WWW.

Pada tahun 1989 Berners-Lee membuat pengajuan untuk proyek pembuatan hiperteks global, kemudian pada bulan Oktober 1990, 'Waring wera Wanua' sudah dapat dijalankan dalam lingkungan CERN (Pusat Penelitian Fisika Partikel Eropa). Pada musim panas tahun 1991, WWW secara resmi digunakan sedara luas pada jaringan Internet.

1. Bagaimana WWW Bekerja

WWW bekerja merdasarkan pada tiga mekanisme berikut:
  • Informasi disimpan di dalam dokumen yang sering kita sebut halaman web
  • Halaman web adalah file-file yang disimpan dalam komputer. Komputer tersebut dikenal dengan istilah web server.
  • Komputer yang mengakses isi dari halaman web disebut dengan web clients.
  • Web Clients menampilkan halaman web dengan program yang dikenal dengan nama Web Browser  seperti Chrome, Firefox, Internet Explorer, dan Vivaldi.

2. Bagaimana Browser Menampilkan Halaman Web

  • Semua halaman web mengandung instruksi-instruksi tentang bagaimana dia akan ditampilkan
  • Browser menampilkan halaman tersebut dengan cara membaca intruksi-intruksi ini
  • Intruksi yang paling umum tersebut disebut dengan tag-tag HTML
Web browser akan mengurai kode HTML, menerjemahkannya serta menuliskan teks yang terkandung di dalam halaman web ke layer.

Banyak halaman web juga mengandung konten lain seperti gambar, script, CSS, dll. Browser akan membuat HTTP request tambahan pada web server untuk hal tersebut. Ketika browser menerima konten tersebut, browser secara progresif akan me-render konten tersebut dan menampilkannya ke layar.

3. Bagaimana HTTP Bekerja

Hypertext Transfer Protocol (HTTP) adalah protokol agar client dan server bisa berkomunikasi dengan gaya request-response. HTTP menentukan bagimana format pesan dan bagaimana cara pengirimannya, serta bagaimana web server dan browser beraksi dan bereaksi terhadap berbagai perintah.

BAB 2 Pengenalan HTML

A. Tag dan Elemen HTML

Penanda perintah di dalam HTML biasanya disebut TAG. TAG digunakan untuk menentukan tampilan dari dokumen HTML.
Tag ada yang berpasangan dengan format berikut:
<tag pembuka> isi dokumen </tag penutup>

Tag ada juga yang tidak berpasangan dengan format berikut:

<tag> isi dokumen

1. Head

Elemen HEAD kepala dari dokumen HTML. TAG <head> dan tag </head> terletak antara tag <html> dan tag </html>
Contoh:

2. Title

Elemen TITLE merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>
Contoh:


3. Body

Elemen ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>. Elemen BODY mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan latar belakang dokumen yang akan ditampilkan pada browser.
Contoh:


4. Paragraf dan Pemformatan Teks

Penulisan paragraf bisa menggunakan tag <p>. Adapun untuk memformat tulisan/teks bisa menggunakan berbagai macam tag sesua dengan keperluannya sesuai dengan tabel berikut ini:

Tag Deskripsi
<b>
  Membuat teks tercetak tebal
<em>
  Membuat penekanan pada teks
<i>
  Membuat teks tercetak miring
<small>
  Membuat teks tercetak kecil
<strong>
  Membuat teks tersebut penting
<sub>
  Membuat teks sebagai subscript
<sup>
  Membuat teks sebagai superscript

B. Komentar

Komentar sangat berguna untuk memberikan keterangan pada kode HTML. Dengan adanya komentar maka kode akan lebih mudah dibaca dan dimengerti sehingga ketika ada kesalahan akan lebih mudah diperbaiki.
Contoh Komentar dalam HTML:


C. List

Untuk menampilkan daftar dalam halaman web, HTML memiliki tag khusus untuk itu. Jika daftar tersebut tidak terurut (tampil menggunakan bullet), maka tag yang digunakan adalah <UL> yang berarti unordered list. Namun jika daftar tersebut adalah daftar yang penting urutannya, maka tag yang digunakan adalah <OL> yang berarti ordered list.
Contoh:


D. Link

Link menjadi penghubung antara satu halaman dengan halaman lainnya. Link merupakan suatu gambara atau teks yang terkait dengan suatu alamat tertentu. Jika Link diklik maka dokumen HTML akan menuju alamat tersebut. Dtandai dengan Anchor, yaitu tag <A>.

Tag <A> mempunyai dua atribut, yaitu HREF dan NAME. Atribute HREF digunakan jika sebuah anchor akan digunakan sebagai link, sedangkat atribut NAME digunakan jika anchor akan digunakan sebagai tujuan.
Contoh:


E. Image

Tampilan halaman web akan lebih menarik jika ditambah media gambar. HTML mendukung banyak format gambar seperti: GIF, JPEG, PCX, PNG, WMF, dll. Namun jika gambar kita ingin dikenali oleh mayoritas browser, maka GIF dan JPEG adalah format paling cocok. Untuk menambah gambar digunakan tag <IMG>.

Daftar Atribut yang dimiliki tag <IMG>:

Atribut Keterangan
SRC
  Menunjukan URL atau direktori tempat file gambar berada
WIDTH
  Lebar gambar (dalam pixel)
HEIGHT
  Tinggi gambar (dalam pixel
ALT
  Menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan

Contoh:

F. Tabel

Tabel sering digunakan dalam website. Misalnya saja dalam menampilkan data siswa, rekap keuangan, dsb. Dengan tabel biasanya tampilan data akan terlihat lebih rapi. Tampilan data yang berasal dari database pun akan lebih nyaman dilihat jika ditampilkan dalam bentuk table.

HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu:
<TABLE> : Untuk mendefinisikan sebuah tabel
<TR> : Untuk mendefinisikan baris tabel (table row)
<TH> : Untuk mendefinisikan judul pada sel dalam tabel (table header)
<TD> : Untuk mendefinisikan isi tiap sel dalam tabel (table data)

Penulis: Rio Ardiansyah
Sumber: Buku Pemrograman Web Edisi Revisi

Komentar

Posting Komentar