Artiker Tentang Desain Web Statis Dan HTML

 

DESAIN WEB STATIS DAN HTML

Jika kita sering berselancar di dunia internet kita akan sering menjumpai halaman [1] halaman web seperti pada Gambar 13.1. di samping ini. Halaman web ini ada yang bersifat statis tetapi juga ada yang dinamis. Tetapi apapun sifatnya, halaman-halaman tersebut hampir pasti melibatkan bahasa HTML. Bab ini membahas dua standar kompetensi yaitu menerapkan dasar [1]dasar pembuatan web statis tingkat dasar dan membuat file HTML sesuai spesifikasi. Penggabungan dua kompetensi ini karena kedekatannya dengan kompetensi dasar. Standar kompetensi membuat file HTML sesuai spesifikasi terdiri dari empat kopetensi dasar yaitu menetapkan penggunaan struktur file, membuat struktur file HTML, memformat file dan menambahkan obyek. Standar kompetensi menerapkan dasar-dasar pembuatan web statis tingkat dasar juga terdiri dari empat kompetensi dasar yaitu menjelaskan konsep dasar dan teknologi web, mempersiapkan pembuatan web, melakukan pembuatan web, dan menampilkan web di browser.

Rangkuman diletakkan pada akhir bab dilanjutkan dengan soal-soal latihan yang disusun dari soal-soal yang mudah hingga soal-soal yang sulit. Latihan soal ini digunakan untuk mengukur kemampuan terhadap kompetensi dasar ini. Sebelum mempelajari kompetensi ini mengumpulkanlah kembali dasar sistem komputer, sistem operasi, dan algoritma pemrograman dasar.

13.1. WEB KONSEP DASAR DAN TEKNOLOGI

World Wide Web secara luas lebih dikenal dengan istilah Web. Web pertama kali diperkenalkan pada tahun 1992. Hal ini sebagai hasil usaha pengembangan yang dilakukan CERN di Swiss. Internet dan web adalah dua hal yang berbeda. Internet lebih merupakan perangkat keras, sedangkan web adalah perangkat lunak. Selain itu, protokol yang dipakai oleh keduanya juga berbeda. Internet menggunakan TCP/IP sebagai protokol operasionalnya, sedangkan web menggunakan HTTP (Hyper Text Transfer Protocol). Web disusun dari halaman-halaman yang menggunakan teknologi web dan saling berkaitan satu sama lain. Suatu standar teknologi web saat ini sudah tersusun, meskipun penerapannya belum didukung oleh seluruh pengembang web. Standar ini disusun oleh suatu badan yaitu World Wide Web Consortium (W3C).

13.1.1 Standar Teknologi Web

Secara umum teknologi disain web terbagi menjadi beberapa layer (lapisan), yaitu structural layer, presentation layer dan behavioral layer.

·         Lapisan struktural

Layer ini berhubungan dengan struktur dokumen dokumen web. Bagaimana sebuah dokumen yang tersusun, format apa yang dipakai, tanda atau mark up apa yang digunakan merupakan bagian dari layer ini. Standar teknologi yang pasti saat ini adalah Extensible Hypertext Markup Language (XHTML) dan Extensible Markup Language (XML). XHTML adalah HTML versi terakhir (4.01) yang ditulis ulang dengan aturan-aturan yang lebih ketat mengacu pada XML. Sedangkan XML adalah aturan untuk menyusun bahasa markup.

·         Lapisan penyajian

Layer ini berhubungan dengan bagaimana mengatur tampilan dokumen pada layar, suara yang keluar, atau bagaimana format pencetakan dokumen. Pada teknologi web lama bagian ini menyatu dengan lapisan struktur. Tapi pada standar baru, rekomendasi ini disarankan untuk dipisah. Yang termasuk teknologi ini adalah Cascading Style Sheets (CSS).

·         Lapisan perilaku

Layer ini berhubungan dengan masalah penggunaan bahasa skrip dan pemrogramannya untuk tujuan meningkatkan sisi interaktif dan dinamis halaman web. Yang termasuk dalam layer ini adalah Document Object Model (DOM) dan JavaScript. DOM mendukung suatu dokumen atau skrip untuk mengakses atau meng-update isi, struktur, dan gaya dari dokumen. JavaScript merupakan teknologi yang cukup lama dan tetap digunakan untuk menambah dokumen menjadi lebih interaktif.

13.1.2.Web Statistik dan Web Dinamis.

Halaman web dapat digolongkan menjadi web statis dan web dinamis. Pengertian web statis dan web dinamis sering diundangkan. sebagian pengguna internet menyatakan jika pada halaman-halaman web dilengkapi dengan animasi yang bergerak maka disebut web dinamis sedangkan jika halaman-halaman web tersebut hanya berisi teks dan gambar yang tidak bergerak maka disebut web statis. Namun berdasarkan kesepakatan maka pengertian statis dan dinamis tidak ditentukan oleh ada atau tidaknya animasi bergerak pada halaman-halaman web, tetapi ditentukan oleh isi atau informasi yang ada pada halaman-halaman tersebut. Data dan informasi yang ada pada web statis tidak berubah-ubah. Dokumen web yang dikirim kepada klien akan sama isinya dengan apa yang ada di server web. Sedangkan web dinamis, memiliki data dan informasi yang berbeda-beda tergantung input apa yang disampaikan klien. Dokumen yang sampai di client akan berbeda dengan dokumen yang ada di web server. Contoh paling mudah untuk membedakan web statis dan web dinamis adalah bila kalian membuka situs Google. Halaman awal adalah statistik karena kita tidak melihat perubahan isi atau informasi. Halaman ini baik di komputer client maupun di web server akan sama. Namun begitu kita memasukkan kata pada textbox yang tersedia kemudian menekan tombol search maka kita berinteraksi dengan server web Google. Server web akan mengirimkan halaman web sesuai yang diminta oleh klien. Tampilan di sisi client akan berupa daftar alamat dan keterangannya. Sedangkan di sisi server isi dokumennya adalah serangkain kode-kode untuk mencari apa yang diinputkan client.

13.2. WEB PERSIAPAN PEMBUATAN

Pembuatan halaman web membutuhkan persiapan tidak hanya pengetahuan tentang bagaimana cara menghapus halaman web, namun juga perlu dukungan persiapan perangkat keras, perangkat lunak, dan yang lainnya.

13.2.2.Perangkat Keras

Perangkat keras yang dibutuhkan untuk pembuatan halaman web tidak berbeda jauh dengan kebutuhan komputasi biasa. Seperangkat komputer lengkap dengan CPU, monitor, keyboard, mouse, printer dan beberapa perangkat tambahan lain sudah dapat digunakan untuk membuat halaman web. spesifikasi tergantung dari perangkat lunak yang akan diinstal pada perangkat komputer tersebut. Jika kita menginstal web server, pengolah gambar untuk disain halaman web, editor HTML yang komplet, tentu kita membutuhkan spesifikasi yang lebih tinggi.

13.2.3.Perangkat Lunak

·         Sistem operasi

Sistem operasi memegang peranan penting dalam pembuatan web karena pada sistem operasi itu akan ditanamkan (diinstal) server web, editor web, sistem manajemen basis data dan bahasa pemrograman. Artinya pilihan pada sistem operasi tertentu akan menentukan pula pilihan server web, perangkat pengembang dan pemrograman bahasa yang akan digunakan. Hal ini dikarenakan adanya masalah antar perangkat lunak. Sebagai contoh, jika kita memilih menggunakan sistem operasi Linux maka kita tidak dapat menginstal IIS sebagai server web. Selain masalah, hal lain yang juga perlu dipertimbangkan dalam menentukan sistem operasi yang akan kita gunakan pada server adalah masalah keamanan, kesulitan menentukan. Keamanan berhubungan dengan kemampuan sistem operasi untuk melindungi diri dari serangan virus, spam, atau kode-kode jahat yang sengaja disusupkan. Kemampuan ini sangat penting diperhatikan karena lalu lintas data dalam internet sangat rentan terhadap gangguan virus, spam, dan pengganggu lainnya. Stabilitas berhubungan dengan kemampuan sistem operasi untuk bekerja terus-menerus untuk merespon permintaan klien. Kemudahan konfigurasi mudah tidaknyadilakukan terhadap sistem operasi dalam memanfaatkan sebagai server.

 ·         Web Server

Server web adalah perangkat lunak yang bertindak melayani permintaan [1] permintaan klien pada halaman-halaman web tertentu. Ada beberapa nama yang cukup populer di web server dunia. Diantaranya adalah Apache dan IIS (Internet Information Service). Sampai dengan Desember

2007, wikipedia mencatat Apache dalam posisi pertama sebagai server web yang paling banyak digunakan, disimpan IIS. Apache dapat digunakan baik untuk web statis maupun web dinamis dan mendukung banyak sistem operasi platform dan server bahasa pemrograman, antara lain Perl, Phyton, Java (JSP dengan menggunakan Tomcat) dan tentu saja PHP. Fungsi-fungsi keamanan web juga dikendalikan dengan sangat baik. Dukungan pada koneksi dengan berbagai basis data, seperti MySQL, SQL Lite, PosgreSQL, Oracle, DB2 dan lain-lain dapat dilakukan dengan baik. Gambar 13.2 menunjukkan bagaimana web server Apache (httpd) digunakan di Linux.

IIS adalah server web keluaran Microsoft. Sebutan web server bagi IIS mungkin tidak terlalu tepat, karena selain web server, IIS juga memberikan fasilitas file server, email server dan layanan lain berbasis internet. Oleh karena itu istilah yang tepat mungkin adalah layanan berbasis internet. Perangkat lunak ini dibundel dalam sistem operasi Microsoft Windows. Namun secara default tidak langsung diinstall. Sehingga kalau kita mau menggunakannya kita harus menginstall lebih dulu. Gambar 13.3 menunjukkan bagaimana IIS diinstall.

·         Penyunting Web / HTML

WWeb / HTML Editor adalah perangkat lunak yang digunakan untuk membuat halaman web, baik yang bersifat statis maupun dinamis. Di pasar perangkat lunak, saat ini tersedia banyak sekali jenis perangkat pengembang web, mulai dari yang sederhana sampai yang canggih dan kompleks. Namun sebenarnya untuk membuat halaman web baik statis maupun dinamis kita dapat menggunakan editor teks biasa seperti Notepad atau Vi. Hanya saja editor teks tidak menyediakan fasilitas-fasilitas yang memudahkan kita dalam membuat halaman web. Pada perangkat pengembang web yang lebih kompleks seperti Adobe

Dreamweaver (dulu Macromedia Dreamweaver), Microsoft Visual Studio .Net, kita akan melihat fasilitas yang sangat membantu membantu pembuatan halaman web, antara lain: tampilan berbasis GUI, penyelesaian kode secara otomatis, WYSIWYG (What You See Is What You) Get) HTML Editor, koneksi ke basis data yang lebih mudah, dan banyak lagi fasilitas. Tentu saja perangkat pengembang ini berharga relatif mahal. Pada bagian lain dari bab ini Anda akan diajak untuk mengenali beberapa perangkat lunak ini.

 Web Peramban

Web browser berfungsi menerjemahkan kode-kode HTML menjadi tampilan yang kita kehendaki. Ada banyak Web Browser yang tersedia di internet. Hampir semuanya dapat kita unduh secara bebas. Beberapa nama yang cukup terkenal antara lain Microsoft Internet Explorer, Firefox, Opera atau Safari. Microsoft Internet Explorer adalah web browser default pada sistem operasi Microsoft Windows (lihat Gambar 13.4). Firefox adalah browser web default pada sebagian besar sistem operasi Linux. Safari adalah web browser default pada sistem operasi Mac OS X (lihat Gambar 13.5). Sedangkan Opera adalah web browser keluaran Opera Software yang dapat berjalan pada berbagai platform sistem operasi (Gambar 13.6).

13.3. MEMBUAT DAN MENGUJI HALAMAN WEB

Ada dua model dalam pembuatan halaman web statis. Yang pertama adalah membuat halaman-halaman tersebut di komputer lokal, kemudian setelah dipindahkan ke lokasi di server web. Model kedua adalah langsung membuat halaman-halaman web di lokasi web server. Server web dapat berada di satu komputer yang sama dengan tempat halaman web atau di komputer lain yang berperan sebagai server. Cara pertama lebih mudah dilakukan karena tidak membutuhkan kerja server web di tahap disain. Pada bagian ini kita akan mencoba cara ini. Buatlah direktori pada komputer kalian. Jika kalian menggunakan sistem operasi Windows, kalian tinggal buka Windows Explorer kemudian klik kanan pada area Windows eksplorer dan pilih New kemudian pilih Folder. Beri nama misalkan LatihanWeb. Jika Anda menggunakan Linux, buka file manager yang tersedia misalnya Konqueror, Nautilus, atau Thunar. lakukan cara yang sama seperti pada Windows Explorer. Umumnya suatu situs web tidak hanya berisi satu halaman web tetapi kumpulan dari beberapa halaman web yang saling berhubungan. Biasanya pengembang web membuat direktori untuk mempermudah pengaturan halaman. Perhatikan struktur direktori sebuah situs web pada Gambar 13.7.

Halaman awal suatu situs web biasanya berupa halaman web yang diberi nama homepage. Biasanya filenya diberi nama index.html (atau bisa juga index.php, index.jsp, index.asp jika menggunakan server skrip bahasa). Di dalam direktori yang sama dengan index.html ini biasanya ada direktori-direktori lain yang berisi halaman-halaman yang berdasarkan pendekatan atau pengelompokkan lain. Selain itu ada direktori lain yang digunakan untuk menyimpan elemen-elemen yang digunakan dalam halaman web. biasanya berisi file-file gambar, teks, audio, video atau elemen-elemen yang lain. Buat direktori seperti di atas dengan cara menambahkan sub direktori di bawah direktori LatihanWeb yang telah kalian buat. Beri nama sesuai keinginan Anda, usahakan nama direktori menunjukkan apa isi dari direktori tersebut.

13.4. HTML

13.4.1.Pengertian HTML

Gambar 13.8 dan 13.9 menunjukkan pada kalian bagaimana membuat halaman web sederhana. Halaman web yang kalian buat ini menggunakan bahasa yang disebut HTML (Hypertext Markup Language). HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu. HTML dibuat oleh Tim Barners-Lee ketika masih bekerja untuk CERN. HTML dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 90'an, HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Perkembangan yang pesat tersebut tidak sampai mengubah cara kerja HTML. Sebuah dokumen atau file HTML agar dapat dibaca langsung oleh browser disimpan dalam ekstensi .htm atau .html. Untuk menulis HTML tidak dibutuhkan perangkat lunak yang spesifik, cukup dengan editor teks sederhana seperti Notepad (pada Microsoft Windows) atau beragam editor teks yang ada di platform Linux dan Apple Mac OS, seperti vi, nano, joe, gedit, leafpad dan lain-lain[1] lain. Beberapa editor menyediakan fitur-fitur tambahan seperti pewarnaan sintaks (memberi warna pada kode-kode HTML) dan penyelesaian kode (dilengkapi secara otomatis kode yang akan dituliskan). Saat ini telah banyak perangkat lunak berbasis GUI yang sangat membantu dalam pembuatan halaman-halaman HTML. Macromedia Dreamweaver dan Microsoft Frontpage merupakan dua nama yang cukup populer di platform Microsoft Windows. Sedangkan di Linux tersedia Quanta+, Bluefish dan Nvu.

13.4.2.Struktur Umum File dengan Bahasa HTML

HTML adalah bahasa yang disisipkan (embedded language) pada dokumen dengan memberi tanda tertentu yang disebut tag. Tag merupakan aturan penulisan kode yang ditulis dengan diawali tanda lebih kecil dan di akhiri dengan tanda lebih besar (). Browser akan menentukan tampilan teks atau dokumen berdasarkan tag yang digunakan.

Sintaks penulisan tag mengikuti aturan-aturan umum berikut ini:

Dokumen HTML secara umum akan terdiri dari dua bagian yaitu Header dan Body (Gambar 13.14)

·        Header

Bagian ini biasanya berisi berbagai macam keterangan tentang dokumen termasuk title (judul dokumen), posisinya dalam sekumpulan halaman web dan hubungannya dengan dokumen lain. Bagian ini ditandai dengan tag …. . Tag ini tidak mempunyai atribut. Di dalam tag ini kita dapat meletakkan beberapa tag lain seperti tag title dan tag link. Lihat Gambar 13.15 dan 13.16.

·        Body

Body adalah bagian dari dokumen HTML tempat dimana kita meletakkan isi dari dokumen. Bagian ini ditandai dengan tag

dan diakhiri dengan

Apapun yang berada diantara dua tanda ini disebut sebagai body content. Dokumen HTML yang paling sederhana mungkin hanya berisi sebaris atau dua baris teks saja tanpa format apapun (Gambar 13.17). Pada dokumen yang lebih kompleks, body content bisa berisi teks yang terformat, gambar, tabel atau bahkan animasi yang rumit (Gambar 13.18).

13.4.3.Format Dokumen

Ada banyak sekali tag HTML yang tersedia, baik itu berhubungan dengan deskripsi dokumen atau yang berhubungan dengan format tampilan dokumen. Tidak semuanya akan dibahas dalam buku ini. Pada bagian berikut ini akan dibahas beberapa tag yang biasa dipakai dalam format tampilan dokumen.