Modul 1. Membuat Design Template Website (Bag.1/HTML)

Web Design

Sebelum mengenal apa itu web design, atau desain laman website, tentunya kita harus mengenal komponen penyusun website....

Web sendiri dapat dibedakan sesuai dengan modelnya, yaitu web statis dan web dinamis.

Web statis dibentuk dengan menggunakan HTML saja tanpa menggunakan database sehingga tampilan dan content nya tetap, bila ingin merubahnya kita harus merubah coding secara keseluruhan, Interaksi yang terjadi antara pengguna dan server hanyalah seputar pemrosesan link saja. Halaman-halaman web tersebut tidak memliki database, data dan informasi yang ada pada web statis tidak berubah-ubah kecuali diubah sintaksnya. Dokumen web yang dikirim kepada client akan sama isinya dengan apa yang ada di web server. Contoh dari web statis adalah web yang berisi profil perusahaan. Di sana hanya ada beberapa halaman saja dan kontennya hampir tidak pernah berubah karena konten langsung diletakan dalam file HTML saja. 

Dalam web dinamis, interaksi yang terjadi antara pengguna dan server sangat kompleks. Seseorang bisa mengubah konten dari halaman tertentu dengan menggunakan browser. Request (permintaan) dari pengguna dapat diproses oleh server yang kemudian ditampilkan dalam isi yang berbeda-beda menurut alur programnya. Halaman-halaman web tersebut memiliki database. Web dinamis, memiliki data dan informasi yang berbeda-beda tergantung input apa yang disampaikan client. Dokumen yang sampai di client akan berbeda dengan dokumen yang ada di web server.

Contoh dari web dinamis adalah portal berita dan jejaring sosial. Lihat saja web tersebut, isinya sering diperbaharui (di-update) oleh pemilik atau penggunanya. Bahkan untuk jejaring sosial sangat sering di-update setiap harinya.

Berikut perbedaan web statis dan web dinamis

Web Statis	Web Dinamis
Yang bisa dilakukan pengguna hanya sekedar melihat – lihat saja, tidak bisa mengisi data.	Pengguna bisa mengupdate informasi website langsung dari websitenya.
Apabila ingin mengubah tampilannya harus mengubah syntaxnya atau scriptnya langusng.	Bisa mengubah tampilan website melalui CMS yang ada.
Biasanya digunakan untuk website company profile, yang hanya menampilkan informasi penting saja.	Web Dinamis digunakan secara fungsionalnya, misalnya jejaring sosial, toko online, web blog, dan lain sebagainya.
Tidak menggunakan bahasa pemrograman web, hanya sebatas menggunakan HTML & CSS, javascript juga diperlukan agar website terlihat hidup.	Menggunakan bahasa pemrograman web, seperti php, mysql, ruby, dan lain – lain.
Waktu pengerjaannya memakan waktu yang singkat, kecuali ingin membuat banyak halaman.	Waktu pengerjaan memakan waktu yang lama.
Kalau ingin menambah halaman, harus menambah file baru, misalnya ingin menambah halaman profile, berarti harus membuat file yang menampilkan halaman profile.	Tidak perlu membuat file baru, cukup dibuatkan saja programnya lalu buat halaman dari program tersebut, seperti yang digunakan CMS.
Informasi jarang diupdate dan kalau pun ingin diupdate tidak bisa langsung diupdate, melainkan harus merubah scriptnya.	Informasi dapat diubah melalui CMS yang sudah ada, biasanya untuk mengubah informasi bisa dilakukan di halaman admin.
Web Statis tidak menggunakan database, semua informasi sudah ada dalam sebuah file dan file itulah yang ditampilkan di halaman web.	Web dinamis menggunakan database, database inilah yang digunakan untuk menampung banyaknya data, sehingga website tinggal mengambil data dari database.

Komponen pendukung sebuah website adalah sebagai berikut.

1. HTML (Hyper Text Markup Language), yaitu bahasa yang digunakan untuk menampilkan dan mengelola hypertext, menurut sumber yang dikutip dari laman wikipedia, html digunakan untuk menampilkan berbagai informasi di dalam sebuah mesin penjelajah web (web search engine) dan formatting hypertext sederhana yang ditulis ke dalam format ASCII agar dapat menghasilkan tampilan yang terintegrasi. HTML mempunyai dua macam ekstensi untuk dapat membangun dokumen html, yaitu  .htm dan .html. 

HTML saat ini telah mencapai versi 5.0, dimana fitur unggulan telah dimasukkan ke dalam program tersebut, misalnya audio, video, animasi dll.

Dokumen HTML mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: <b> TAMPIL TEBAL</b>. Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan format di dalam halaman web daripada menentukan penampilannya. Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web.
Salah satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua franca (bahasa Komunikasi) antar komputer dengan kemampuan berbeda. Pengguna Macintosh tidak dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat dalam pc berbasis Windows. Pengguna Microsoft Windows pun tidak akan dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat pada pengguna yang menggunakan Produk-produk Sun Microsystems. namun demikian pengguna-pengguna tersebut dapat melihat semua halaman web yang telah diformat dan berisi Grafika dan Pranala.

Contoh coding HTML 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head bgcolor=black text=white>
  <title>Selamat Datang HTML</title>
 </head>
 <body>
  <p>Halo dunia!</p>
 </body>
</html> 

Contoh coding HTML 5

<!DOCTYPE HTML>
<html>
 <head style="background-color: black; color: white;">
  <title>Selamat Datang HTML</title>
 </head>
 <body>
  <p>Halo dunia!</p>
 </body>
</html>

       <head style="background-color: black; color: white;">
                <title>Selamat Datang HTML</title>\>
       </head>
       <body>

Halo dunia!

        </body>

Anda dapat mendownload file Modul 1. Membuat Design Website  (HTML dan contoh latihannya) di link ini.....
Bersambung ke Bagian: 2/PHP