Selasa, 06 September 2011

Cara membuat WEB Statis dengan HTML

PEMROGRAMAN WEB STATIS HTML

                 

Web merupakan fasilitas hypertext untuk menampilkan data berupa teks,gambar,suara,animasi,dan data multimedia lainnyajika anda ingin meguasai web maka anda perlu  mengenal itu bahasa HTML dan PHP.HTML merupakan bahasa pemrogrman web yang merupakan  pada kategori script client side sedangkan PHP merupakan salah satu script(perintah-perintah program) server side yang sangat populer diterapkan dalam sebuah web.web dapat menjadi alat untuk mempromosikan suatu produk maupun diri kita sendiri jika ingin terkenal  lewat web.web mengalami perkembangan yang sangat pesat dewasa ini.mulai dari situs web e-commerce sampai web non-profit.Situs/web dapat dikategorikan menjadi dua yaitu web statis dan web dinamis..
1.       Web statis
Web statis adalah web yang berisi/menampilkan informasi –informasi yang sifatnya statis(tetap).disebut statis karena pengguna tidak dapat berinteraksi dengan web tersebut.singkatnya,untuk mengetahui suatu web bersifat statis atau dinamis dapat dilihat
Dari tampilannya.jika suatu web hanya berhubungan dengan halaman web lain dan berisi informasi yang tetap maka web tersebut disebut dengan web statis.pada web statis,pengguna hanya dapat melihat isi dokumen pada halaman web dan apabila diklik akan berpindah ke halaman web yang lain.interaksi pengguna hanya terbatas dapat melihat informasi yang ditampilkan .tetapi tidak dapat mengolah informasi yang dihasilkan.web statis biasanya merupakan HTML yang ditulis pada editor teks dan disimpan dalam bentuk .Html atau .htm
2.       Web Dinamis
Web dinamis adlah web yang menampilkan informasi serta dapat berinteraksi dengan pengguna.web yang dinamis memungkinkan pengguna untuk berinteraksi menggunakan form sehingga dapat mengolah informasi yang ditampilkan.web dinamis bersifat interaktif,tidak kaku,dan terlihat lebih indah.
3.       Pemrograman Web
Ada 2 kategori dalam pemrograman web,yaitu pemrograman server side dan client side.pada pemrograman server-side.perintah-perintah program (script) dijalankan di server web.kemudian hasil dikirimkan dalam bentuk HTML biasa.Adapun pada client side,program
Dijalankan pada browser web sehingga ketika klien meminta dokumen script maka script
Dapat didownload dari server kemudian dijalankan pada browser bersangkutan.
4.       Mengenal script client side
Program web yang tergolong dalam client side seperti Javascript,Vbscript,HTML,dan lain-lain.hasil parsing script pemrograman client side (misal javascript dan Vbscript) yang berupa HTML dari server web dapat dilihat dengan memilih menu view >Source Code.Anda dapat melihat bahwa script program yang ditulis ditampilkan pada halaman source code.
5.       Javascript
Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995.pada awalnya bahasa ini dinamakan “Livescript” dan berfungsi sebagai bahasa sederhana utnuk browser Netscape
Navigator 2.Pada masa awal dirilis,bahasa ini banyak dikritik karena kurang aman.tidak ada pesan kesalahan yang ditampilkan saat kita membuat kesalahan program.kemudian sejalan
Dengan kerjasama antara Netscape dengan Sun(pengembang bahasa pemrograman Java) pada masa itu,maka netscape memberi nama “Javascript” kepada bahasa tersebut pada tanggal 4 Desember 1995.Javascript adalah bahasa pemrograman sederhana karena bahasa ini tidak dapat digunakan untuk membuat aplikasi ataupun applet.dengan  Javascript kita dapat dengan mudah  sebuah halaman web yang interaktif.program Java script dituliskan pada file HTML.dengan kata lain anda tidak perlu menuliskan program Javascript pada file terpisah (walaupun anda juga bisa melakukannya).Bahasa ini adalah bahasa  pemrograman untukn memberikan kemampuan tambahan terhadap bahasa HTML.dengan mengizinkan
Pengeksekusian perintah di sisi klien,yang artinya disisi browser bukan disisi server web.Javascript bergantung kepada browser yang memanggiol halaman web berisi script.Javascript tidak memerlukan kompilator atau penerjemah khusus untuk menjalankannya.Pada Javascript kita tidak mungkin menyembunyikan kode script yang kita tulis.kode langsung ditulis dalam dokumen HTML dan sangat mudah terlihat.Javascript adalah bahasa yang “case-sensitive”.artinya,membedakan penamaan variabel dan fungsi
Yang menggunakan huruf besar dan huruf kecil.contoh Variabel atau fungsi dengan nama “KICKADY” berbeda dengan variabel nama” kickady”(tanpa tanda petik).Javascript terletak di dalam dokumen HTML. Script dari Javascript mempunyai bentuk seperti berikut :
<SCRIPT LANGUAGE=”JAVASCRIPT”>
Letakkan script anda disini
</SCRIPT>

1.Belajar HTML - Tutorial HTML 1

 HTML merupakan proses pertama yang umumnya dilakukan oleh para web programer. Nah setelah selesai dengan belajar HTML, maka kamu akan memiliki kemampuan untuk membuat halaman web statis. Berikutnya kamu pasti pengen bisa bikin halaman web yang memiliki kemampuan untuk berinteraksi dengan pengunjung secara lebih intens. Waktu itulah kamu perlu mulai belajar PHP. Setelah belajar PHP maka kamu bisa melanjutkan dengan belajar MySQL untuk menambah kemampuan PHP kamu.

 HTML diperlukan terutama untuk membuat tampilan web, PHP untuk menambah kemampuan interaksi dengan pengunjung dan kemampuan menyimpan data akan disupport oleh MySQL. Lengkap sudah semuanya. Namun tentu saja web programming tidak hanya sebatas itu. Selain belajar HTML, PHP dan MySQL, tentu saja kamu dapat mempelajari juga bahasa script lain yang akan lebih memperindah tampilan web kamu dan mempermudah proses desain web kamu seperti CSS dan Javascript. Kamu juga mungkin akan perlu menambah ketrampilan kamu dalam membuat desain web dangan berbagai aplikasi pembuat web seperti Dreamweaver dan FrontPage serta belajar aplikasi pengolah gambar seperti Fireworks dan Adobe.

Tetapi untuk saat ini kita akan konsentrasi ke materi belajar HTML yang menjadi dasar semua pemrograman web.

Perlu saya sampaikan di sini bahwa meskipun kamu sudah menguasai berbagai aplikasi yang mempermudah desain web, tetapi walau bagaimanapun pada akhirnya kamu tetap akan memerlukan kemampuan untuk melakukan pemrograman hands on alias manual untuk melakukan berbagai tuning dalam program kamu.

  belajar HTML.

Pengenalan HTML

Apa yang dimkasud dengan file HTML?

- HTML merupakan kependekan dari Hyper Text markup Language

- Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup

- Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman

- File HTML harus memiliki ekstensi htm atau html

- File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai.
Pengen Nyoba Bikin?
Mulailah dengan membuka Notepad (di Windows XP bagi yang belum pernah klik Start, Program, Accessories, Notepad).
Ketikkan teks berikut:


HTML Dasar Untuk Membuat Website Statis


Simpan dengan nama “halamanku.htm” (jangan lupa tambahkan tanda kutip ganda pada nama filenya. Kalau lupa maka nama filenya akan menggunakan ekstensi default .txt sehingga menjadi halamanku.htm.txt).

Buka Browser kamu (misalnya internet explorer). Kilk File, Open, Browse dan pilih cari file halamanku.htm yang tadi kamu bikin. Klik OK, dan browser akan menampilkan halaman yang tadi kamu buat.


Gampang kan? Atau masih bingung? Ok, kita akan melihat penjelasan dari contoh di atas.
Setiap tag diapit oleh tanda lebih kecil dan lebih besar. Kamu bisa melihat bahwa tag pertama adalah . Tag HTML pada umumnya selalu memiliki pasangan yang memiliki tag sama dengan sedikit tambahan tanda garis miring “/”, dan kamu bisa melihat pasangan tag di akhir script yaitu .

Tag memberitahu browser bahwa inilah awal dari dokumen HTML. Tag pasangannya yaitu menyatakan bahwa inilah akhir dari dokumen HTML.

Teks di antara dan adalah teks informasi header. Informasi header ini tidak ditampilkan pada jendela browser.




HTML bersifat client side atau berada disisi klien yang dimana source code dari HTML itu sendiri bisa dilihat oleh client, karena HTML itu sendiri diterjemahkan oleh browser. Untuk melihat source code dari HTML kita bisa menekan CTRL + U pada keyboard atau klik View -> Page Source.

Langsung saja kita masuk kedalam pembahasan tentang dasar dari HTML ini.

Biasanya struktur penulisan HTML ini seperti contoh berikut:

Artinya jika kita memasukan sebuah tag HTML didalam sebuah tag, maka tag pertama yang harus ditutup adalah tag yang paling dalam (pada contoh diatas adalah namatag2).

Jika sudah paham selanjutnya kita akan membuat sebuah halaman web yang sederhana.
Buka notepad atau notepad++ kalian lalu ketikkan script seperti dibawah:

DESAIN WEB STATIS DAN HTML

Jika kita sering berselancar di dunia internet kita akan sering menjumpai halaman 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 dasar pembuatan web statis tingkat dasar dan membuat file HTML sesuai spesifikasi. Penggabungan dua kompetensi ini karena kedekatan isi kompetensi dasar. Standar kompetensi membuat file HTML sesuai spesifikasi terdiri dari empat kopetensi dasar yaitu menetapkan pemakaian 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 igunakan untuk mengukur kemampuan terhadap kompetensi dasar ini. Sebelum mempelajari kompetensi ini ingatlah kembali dasar sistem komputer, sistem operasi, dan algoritma pemrograman dasar.



13.1. KONSEP DASAR DAN TEKNOLOGI WEB


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). Standar ini dibutuhkan karena semakin banyaknya variasi dalam teknologi web sehingga terkadang satu sama lain tidak kompatibel.



13.1.1 Standar Teknologi Web


Secara umum teknologi disain web terbagi menjadi beberapa layer (lapisan), yaitu structural layer, presentation layer dan behavioral layer.
- Structural layer
Layer ini berhubungan dengan struktur dokumen dokumen web.
Bagaimana sebuah dokumen tersusun, format apa yang dipakai, tanda atau mark up apa yang digunakan merupakan bagian dari layer ini.
Standar teknologi yang direkomendasikan saat ini adalah Extensible Hypertext Markup Language (XHTML) dan Extensible Markup Language (XML). XHTML adalah HTML versi terakhir (4.01) yang ditulis ulang dengan dengan aturan-aturan yang lebih ketat mengacu pada XML. Sedangkan XML adalah sekumpulan aturan untuk menyusun bahasa markup.

- Presentation layer
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 structural layer. Tapi pada standar baru, layer ini disarankan untuk dipisah. Yang termasuk teknologi ini adalah Cascading Style Sheets (CSS).
- Behavioral layer
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 memungkinkan suatu dokumen atau skrip untuk mengakses atau meng-update isi, struktur, dan style dari dokumen. JavaScript merupakan teknologi yang cukup lama dan tetap digunakan untuk menambah dokumen menjadi lebih interaktif.


13.1.2.Web Statis dan Web Dinamis.


Halaman web dapat digolongkan menjadi web statis dan web dinamis. Pengertian web statis dan web dinamis seringkali mengundang perdebatan. 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 client akan sama isinya dengan apa yang ada di web server. Sedangkan 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 paling mudah untuk membedakan web statis dan web dinamis adalah bila kalian membuka situs Google. Halaman awal adalah statis 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 sedang berinteraksi dengan web server Google. Web server akan mengirimkan halaman web sesuai yang diminta oleh client. 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.
Bab ini secara khusus akan mempelajari tentang pembuatan web statis sedangkan web dinamis akan kita bahas di bab 14.



13.2. PERSIAPAN PEMBUATAN WEB


Pembuatan halaman web membutuhkan persiapan tidak saja pengetahuan tentang bagaimana disain 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, HTML editor 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) web server, web editor, sistem manajemen basis data dan bahasa pemrograman. Artinya pilihan pada sistem operasi tertentu akan menentukan pula pilihan web server, perangkat pengembang dan bahasa pemrograman yang akan digunakan.
Hal ini dikarenakan adanya masalah kompatibilitas antar perangkat lunak. Sebagai contoh, apabila kita memilih menggunakan sistem operasi Linux maka kita tidak dapat menginstal IIS sebagai web server. Selain masalah kompatibilitas, hal lain yang juga perlu dipertimbangkan dalam penentuan sistem operasi yang akan kita gunakan pada server adalah masalah keamanan, stabilitas, kemudahan konfigurasi. 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 client. Kemudahan konfigurasi berhubungan mudah tidaknya konfigurasi dilakukan terhadap sistem operasi dalam perannya sebagai server.
- Web Server
Web server adalah perangkat lunak yang bertindak melayani permintaanpermintaan client terhadap halaman-halaman web tertentu. Ada beberapa nama yang cukup populer dalam dunia web server. Diantaranya adalah Apache dan IIS (Internet Information Service). Sampai dengan Desember 2007, wikipedia mencatat Apache berada dalam posisi pertama sebagai web server yang paling banyak digunakan, disusul IIS.
Apache dapat digunakan baik untuk web statis maupun web dinamis dan mendukung banyak platform sistem operasi dan bahasa pemrograman server, 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 web server 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 internet based-service. 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.
- Web / HTML Editor
Web / HTML Editor adalah perangkat lunak yang digunakan untuk membuat halaman-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 teks editor biasa seperti Notepad atau Vi. Hanya saja teks editor 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, dan beberapa yang lainnya, kita akan mendapati fasilitas yang sangat membantu mempercepat pembuatan halaman web, antara lain:
tampilan berbasis GUI, automatic code completion (melengkapi 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 relative mahal. Pada bagian lain dari bab ini kalian akan diajak untuk mengenali sedikit beberapa perangkat lunak ini.

- Web Browser


Web browser berfungsi menerjemahkan kode-kode HTML menjadi tampilan yang kita kehendaki. Ada banyak Web Browser tersedia di internet. Hampir semuanya dapat kita download secara bebas. Beberapa nama yang cukup terkenal antara lain Microsoft Internet Explorer, Firefox, Opera atau Safari. Microsoft Internet Explorer adalah default web browser pada sistem operasi Microsoft Windows (lihat Gambar 13.4). Firefox adalah default web browser pada sebagian besar sistem operasi Linux. Safari adalah default web browser 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 pada komputer lokal, kemudian setelah berhasil dipindahkan ke lokasi di web server. Model kedua adalah langsung membuat halaman-halaman web di lokasi web server. Lokasi webserver dapat berada di satu komputer yang sama dengan tempat pembuatan halaman web atau di komputer lain yang berperan sebagai server. Cara pertama lebih mudah dilakukan karena tidak membutuhkan kerja web server 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 kalian 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 berkait. Biasanya pengembang web membuat struktur 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 bahasa skrip server). Di dalam direktori yang sama dengan index.html ini biasanya ada direktori-direktori lain yang berisi halaman-halaman yang dikelompokkan berdasarkan kedekatan tema atau berdasarkan 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.
Buatlah struktur direktori seperti di atas dengan cara menambahkan sub direktori di bawah direktori LatihanWeb yang telah kalian buat. Beri nama sesuai keinginan kalian, tetapi usahakan nama direktori menunjukkan apa isi dari direktori tersebut. Buka teks editor, misalkan Notepad kemudian ketikkan kode berikut ini.
<HTML>
<HEAD>
<TITLE>Homepage</TITLE>
</HEAD>
<BODY>
Ini halaman index pertamaku
</BODY>
</HTML>
Simpan dengan nama index.html dan letakkan di direktori LatihanWeb (Gambar 13.8). Untuk menguji file tersebut, klik ganda pada file index.html. kalian akan mendapatkan tampilan seperti pada Gambar 13.9.
Gambar 13.8. File index.html dan lokasi penyimpanannya.

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 daripada versi sebelumnya. Perkembangan yang pesat tersebut tidak sampai merubah 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 text editor sederhana seperti Notepad (pada Microsoft Windows) atau beragam text editor yang ada di platform Linux dan Apple Mac OS, seperti vi, nano, joe, gedit, leafpad dan lainlain. Beberapa editor menyediakan fitur-fitur tambahan seperti syntax coloring (memberi warna pada kode-kode HTML) dan code completion (melengkapi 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 (<tag>). Browser akan menentukan tampilan teks atau dokumen berdasarkan tag yang digunakan.
Sintaks penulisan tag mengikuti aturan-aturan umum berikut ini:
a) Setiap tag mempunyai nama yang spesifik. Kadang-kadang diikuti opsi-opsi yang disebut atribut. Baik nama maupun opsi harus berada dalam tanda <..>.
Contoh:
<a href="/wiki/PHP" title="PHP">PHP</a>
Pada contoh ini tagnya memiliki nama <a> sedangkan atribut untuk tag <a> adalah href dan title. Sehingga baik nama tag dan atributnya harus berada di dalam tanda <…> seperti pada contoh.
b) Sebagian besar tag berpasangan. Penulisan untuk tag yang berpasangan adalah sebagai berikut : <namatag>….</namatag> Contoh:
<TITLE>Paragraf</TITLE>
<strong>Cetak Tebal</strong>
Pada tag yang berpasangan seperti pada contoh ini, <TITLE> adalah tag awal dan </TITLE> adalah tag akhir. Perhatikan tanda / pada tag akhir.
c) Nama tag dan atribut-nya tidak bersifat case sensitive. Penulisan <strong>Cetak Tebal</strong> memberikan hasil yang sama dengan <STRONG>Cetak Tebal</STRONG>.
d) Penulisan atribut suatu tag diletakkan setelah nama tag. Jika ada lebih dari satu atribut maka digunakan spasi untuk memisahkan. Urutan atribut tidak penting.
Contoh:
<FONT SIZE=3>Teks Baru</FONT>
<FONT SIZE=5 FACE=“verdana“>Teks Baru </FONT>
e) Nilai dari atribut ditulis setelah tanda sama dengan (=). Pada contoh sebelumnya (lihat bagian d) terlihat bahwa atribut SIZE dari tag FONT memiliki nilai 5 sedangkan atribut FACE memiliki nilai “verdana”.
f) Jika nilai dari atribut hanya tunggal, maka kita langsung menuliskan setelah tanda =. Jika lebih dari satu maka dapat digunakan tanda ‘… ‘ atau “…”. Pada contoh bagian d, tampak bahwa penulisan nilai untuk atribut SIZE tanpa menggunakan tanda “..”, sedangkan pada atribut FACE tanda “..” untuk menandai kata verdana.

- 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 <head> …. </head>. Tag ini tidak mempunyai atribut.

                                                                                         Gambar 13.15. Header dokumen HTML tanpa tag title.
                                                                                        Gambar 13.16. Header dokumen HTML dengan tag title.
- Body
Body adalah bagian dari dokumen HTML tempat dimana kita meletakkan isi dari dokumen. Bagian ini ditandai dengan tag <body> dan diakhiri dengan </body>. 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).

                                                                                Gambar 13.17. Dokumen HTML dengan body content sederhana.


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.
- Heading
Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam sebuah dokumen HTML. Heading berbeda dengan tag <TITLE>. HTML menyediakan enam tingkatan heading, dimana heading level 1 (<H1>) adalah yang terbesar dan heading level 6 (<H6>) adalah yang terkecil. Gambar 13.19 menunjukkan bagaimana penggunaan heading.

                                                                                                        Gambar 13.19. Penggunaan heading.
�� Paragraph
Paragraf dalam HTML dibuat dengan tag <P>. Tag ini akan membuat baris baru dengan menyisipi satu baris kosong. Penulisan isi paragraf diapit oleh <P> dan </P>. Pengaturan posisi paragraf dapat dilakukan dengan atribut ALIGN yang diikuti dengan posisi yang diinginkan, yaitu left untuk rata kiri, center untuk rata tengah horisontal dan right untuk rata kanan (Lihat Gambar 13.20).
                                                                                                      Gambar 13.20. Penggunaan paragraph.
�� Line Break
Line break digunakan untuk menuliskan teks pada baris berikutnya.
Line break dibuat dengan tag tunggal <BR>. Tag ini akan membuat baris baru tanpa memberi baris kosong sebagaimana pada tag <P> (Lihat Gambar 13.21).
                                                                                                            Gambar 13.21. Tag <BR> dan <P>.
�� List
HTML menyediakan 3 cara untuk membuat daftar atau list, yaitu
o Ordered list
Ordered list digunakan untuk membuat daftar dimana setiap bagian memiliki nomor secara berurutan. Ordered list dimulai dengan tag <OL> dan diakhiri dengan tag </OL>, sedangkan setiap bagiannya digunakan tag <LI> tanpa tag penutup. Tag ini menggunakan angka sebagai urutan secara default, tapi bisa dirubah dengan merubah nilai atribut TYPE. Nilai-nilai atribut yang diijinkan dapat dilihat pada Tabel 13.1.
Tabel 13.1. Daftar atribut TYPE untuk Ordered list dan Unordered list.
o Unordered list
Unordered list digunakan untuk membuat daftar yang disajikan tanpa nomor urut, melainkan dengan secara default dengan tanda bulatan utuh (bullet). Tanda ini bisa dirubah dengan merubah nilai atribut TYPE untuk unordered list. Nilai-nilai atribut yang diijinkan dapat dilihat pada tabel 13.1. Unordered list dimulai dengan tag <UL> dan diakhiri dengan tag </UL>, sedangkan setiap bagiannya digunakan tag <LI> tanpa tag penutup (lihat contoh pada Gambar 13.23).
Tipe lain dari list yang termasuk Unordered list adalah Directory list dan Menu list. Directory list merupakan daftar tak bernomor yang digunakan untuk menangani direktori. Tag yang digunakan adalah <DIR> ... </DIR>. Menu list umumnya digunakan untuk menu pilihan. Tag yang digunakan adalah <MENU> ... </MENU>. Baik Direktori list maupun Menu list menghasilkan tampilan yang sama dengan Unordered list (Gambar 13.24 dan Gambar 13.24).
o Definition list
Definition list membuat daftar definisi mirip seperti tampilan pada kamus, dengan definisi suatu istilah agak menjorok ke kanan. Tiga buah pasang tag yang terkait dengan definition list adalah:
- <DL> ... </DL> untuk menyatakan tempat bagi daftar definisi.
- <DT> ... </DT> untuk menyatakan tempat bagi istilah yang akan didefinisikan.
- <DD> ... </DD> untuk menyatakan tempat bagi definisi dari istilah.
Contoh penggunaan Definition list dapat dilihat pada Gambar 13.26.
                                                                                                    Gambar 13.26. Penggunaan Definition List.
�� Font
HTML menyediakan fasilitas pengaturan huruf yang akan ditampilkan dalam dokumen. Pengaturan ini dilakukan dengan tag berpasangan <FONT> dan </FONT>. Tag ini memiliki beberapa atribut untuk mengatur ukuran, jenis dan warna huruf yang digunakan. 
o Atribut SIZE untuk mengatur ukuran huruf, dimana nilai 1 untuk huruf terkecil dan nilai 7 untuk huruf terbesar.
o Atribut FACE untuk mengatur jenis huruf yang diinginkan, dimana nilainya berupa string nama font seperti Arial, Tahoma dan sebagainya.
o Atribut COLOR untuk mengatur warna teks yang dikehendaki, dimana nilainya dapat diisi dengan dua cara dengan menyebut nama warna dalam bahasa Inggris seperti red, blue dan green atau dengan menggunakan nilai RGB (Red Green Blue) seperti FF000 untuk merah.

13.4.4.Penambahan Obyek

�� Horizontal Line
Untuk mempercantik tampilan halaman HTML, kita dapat menambahkan garis horizontal dengan tag <HR>. Tag <HR> mempunyai atribut SIZE untuk menentukan ketebalan garis, atribut WIDTH untuk menentukan lebar garis, Atribut ALIGN untuk menentukan letak teks dalam garis, dan atribut NOSHADE untuk mengatur agar garis tidak disertai bayangan. Gambar 13.28 menunjukkan bagaimana tag <HR> digunakan.
�� Image
Dokumen HTML dapat diperindah dengan menyertakan gambar pada halaman web yang dibuat. Tag <IMG> dapat digunakan untuk memanggil dan menampilkan gambar pada halaman web. Sintaks penulisan tag <IMG> adalah:
<IMG SRC=”file_gambar” ALT=”nama_alternatif”>
Atribut SRC digunakan untuk menentukan sumber file gambar yang akanditampilkan. Atribut ALT berfungsi untuk memberi tulisan pengganti, apabila gambar tidak ditampilkan.
Untuk pengaturan gambar yang lebih baik, tag IMG menyediakan beberapa atribut, antara lain:
�� Atribut ALIGN untuk mengatur penempatan teks pada gambar.
�� Atribut BORDER untuk memberi bingkai pada gambar.
�� Atribut HEIGHT dan WIDTH untuk mengatur tinggi dan lebar gambar.
Gambar 13.30. Penggunaan atribut-atribut tag IMG.
Pada Gambar 13.30 terlihat perbedaan tampilan dibandingkan dengan Gambar 13.29. Tulisan Logo Linux terletak ditengah gambar karena kita menggunakan atribut align dengan nilai middle. Sedangkan tulisan logo Windows terletak di bagian atas karena kita menggunakan align dengan nilai top. Gambar logo windows diberi garis bingkai dengan menggunakan atribut border dengan nilai 2.
                                                                                                           Gambar 13.31. Tabel sederhana.
Pada Gambar 13.31, tabel yang kita buat adalah tabel sederhana dengan dua buah kolom dan 3 buah baris (perhatikan ada 3 buah pasangan tag <TR> … </TR>. Secara default tabel ditampilkan tanpa ada garis pada tabel tersebut.
Kita dapat menambahkan garis dengan menggunakan atribut border pada tabel (lihat Gambar 13.32).
                                                                                      Gambar 13.32. Tabel dengan format yang lebih kompleks.
Pada Gambar 13.32, terlihat tabel yang tampilannya lebih baik daripada Gambar sebelumnya. Ada beberapa atribut yang kita tambahkan pada tabel yaitu :
�� Atribut WIDTH untuk mengatur lebar tabel pada halaman. Kita dapat menggunakan satuan persen (%) atau pixel (px).
�� Atribut BORDER untuk memberikan garis pada tabel. Nilai untuk atribut ini dari dimulai dari 0 yang berarti tidak ada garis. Semakin besar angka semakin tebal garis.
�� Atribut BGCOLOR untuk menambahkan warna latar belakang pada tabel.
�� Atribut CELLPADDING untuk menentukan jarak antara teks dan tepi kiri sebuah sel (lihat gambar 13.33 untuk lebih jelasnya).
�� Atribut CELLSPACING untuk menentukan jarak bagian sel terhadap tepi dalam bingkai tabel (lihat gambar 13.33 untuk lebih jelasnya).
                                                                                                 Gambar 13.33. Cellpadding, cellspacing dan border.
Seperti halnya perangkat lunak word-processor, pada HTML kita dapat menggabungkan dua atau lebih sel menjadi satu buah sel. Untuk menggabung baris dapat digunakan atribut ROWSPAN dan untuk menggabung kolom dapat digunakan atribut COLSPAN. Contoh penggunaannya dapat dilihat pada Gambar 13.34 dan 13.35.
Sel pada tabel tidak selalu harus berisi teks namun dapat juga berisi gambar seperti terlihat pada Gambar 13.36.

13.4.6.Link antar Dokumen

Link merupakan pautan untuk membuka atau memanggil halaman web atau file tertentu. Link merupakan tag yang sangat penting dalam penggunaan HTML, karena disinilah letak perbedaan antara dokumen HTML dengan dokumen teks yang lain. Link dapat dibuat dengan memberi perintah tag anchor <A>. Anchor memiliki beberapa atribut, diantaranya HREF yang berfungsi untuk membuat link ke dokumen HTML tertentu dan NAME yang berfungsi untuk memberi tanda/nama titik tertentu pada dokumen HTML yang sama. Contoh penggunaan tag anchor dapat dilihat pada Gambar 13.37.
Atribut HREF dapat digunakan untuk memanggil halaman web pada sistem yang sama (pada satu komputer) seperti ditunjukkan pada Gambar 13.37. Pada kasus ini kita tinggal menuliskan lokasi dimana halaman yang akan kita panggil berada. HREF dapat juga kita gunakan untuk memanggil halaman lain diluar sistem kita atau memanggil situs-situs lain di internet. Caranya dengan mengetikkan alamat URL situs yang akan kita panggil. Cobalah ketikkan kode HTML berikut ini dengan teks editor kemudian simpan file dengan ekstensi .htm.
DAFTAR ALAMAT MESIN PENCARI
<menu>
<li><a href="http://www.google.com/">Google</a>
<li><a href="http://www.yahoo.com/">Yahoo</a>
<li><a
href="http://www.altavista.com/”>Altavista</a>
</menu>

2 komentar: