Perkembangan dunia teknologi computer begitu pesatnya yang harus diiringi dengan sumber daya manusia yang memadai, khusus dalam memanfaatkan internet, internet merupakan suatu kebutuhan yang begitu maraknya mulai dari sekedar untuk berkomunikasi ataupun dalam melakukan bisnis. Banyak sekali fasilitas-fasilitas yang tersedia di dalam Internet yang kesemuanya dikemas dengan menggunakan isitilah Web, Homepage, portal, Web Page dll.
Perlu disadari bahwa web-web yang tampil diinternet pada saat sekarang ini diawali dengan pembuatan dengan menggunakan perintah HTML dengan tag-tag yang dirangkai sedemikian rupa sehingga menjadi satu kesatuan yang saling berhubungan antara yang satu dengan yang lainnya.
Banyak sekali software-software yang dapat digunakan untuk mendesain Web, apakah dengan ASP, PHP, Java Script, VB Script, dll, bahkan dengan menggunakan Frontpage pun bisa. Dan pada saat ini banyak CMS yang begitu mudah dapat membuat web. Pada Modul ini tidak akan membandingkan satu software dengan software lainnya atau memilih CMS yang bagus. Tetapi disini penulis akan menyarankan bagi para pemula yang akan memperdalam desain WEB, hendaknya menggunakan sesuatu yang mendasar. Dasar Pembuatan WEB dilakukan dengan menggunakan HTML.
Banyak orang beranggapan bahwa belajar web dengan menggunakan HTML sangat susah, tetapi apakah kita pernah mencoba, dimana tag-tag tersebut diketik huruf perhuruf dan disusun sedemikian rupa sehingga menjadi satu kesatuan yang saling berhubungan antara satu dengan yang lainnya? Tentu pertanyaannya ini akan dijawab belum…?
Dengan alasanya tersebut maka penulis tertarik memamparkan tentang pembuatan suatu Web yang sederhana dengan menggunakan tag-tag HTML dan diketik menggunakan NotePade.
Dimana pada penulisan materi ini akan dibagi menjadi beberapa item yaitu:
Modul 1. Pengantar HTML
Modul 2. Pembuatan Frame
Modul 3. Pembuatan Menu Header
Modul 4. Pembuatan Menu Left
Modul 5. Pembuatan Menu right
Modul 6. Pembuatan Profile
Dengan cara membaca modul demi modul tersebut nantinya pembaca dapat mencoba langkah-demi langkah dan mengembangkan kreatifitasnya. Modul ini dikemas sedemikian rupa agar dapat dengan mudah dipelajari dan diimplementasikan, Agar tampilan di dalam web lebih menarik, penulis menggunakan flash MX untuk menggambar atau membuat animasi, alasan penggunakan Macromedia Flash MX ini karena Flash merupakan software yang paling mudah untuk menggambar.
Pengantar HTML
HMTL (Hypertext Markup Language} merupakan suatu kode yang menjadi dasar terwujudnya web. Kode yang digunakan dalam HTML disebut Tag.
1. Struktur Penulisan
Penulisan tag dapat dilakukan pada Notepade atau software lain, dimana tata penulisan tag diawali dengan start tag dan diakhiri end tag. Adapun bentuk penulisan adalah :
{html}
{head}
{title} Design Web {/title}
{/head}
{/body}
…
…
{/body}
{/html}
2. Gambar dan Background
Agar tampilan Web yang dibuat menjadi lebih menarik, kita dapat menyertakan gambar kedalam perintah HTML, apakah akan dijadikan sebagai background. Saran menulis hendaknya pembuatan gambar dilakukan dengan menggunakan Software macromedia Flash MX, baca Menggambar dengan Flash MX. Adapun tata penulisannya adalah :
{IMG SRC=”nama file gambar”} untuk memanggil file gambar tunggal
{Body background=”nama file gambar”} untuk memanggil file gambar sebagai background
3. Font dan List
Penulisan Font diawali dengan perintah {Font …} yang dapat diikuti dengan Size (ukuran huruf}, face (jenis huruf pada system windows} dan color (warna huruf}. Sedangkan untuk menghasilkan List atau disebut dengan Daftar dapat menggunakan perintah OL (Ordered List} atau Unordered list (UL}, jika memakai ol berarti list kita urutkan (angka atau abjad}
4. Tabel
Tabel adalah suatu tampilan yang mengandung unsur baris dan kolom, untuk menampilkan tabel dalam homepage diperlukan beberapa tag yaitu :
{Table} ……. {/table} Untuk set dokumen table
{TR} ……… {/TR} Untuk set baris (Table Row}
{TD} ……… {/TD} Untuk set kolom (Table Data}
{TH} ……… {/TH} Untuk set Header (Table Header}
{Caption} …..{/Caption} Untuk set Judul Tabel
{TD Rowspan =”3”} untuk membagi menggabung baris (Merger row}
{TD Colspan =”3”} untuk membagi kolom (Merger colums}
5. Form
From digunakan untuk mempercantik tampilan dari Web, yaitu diawali dengan perintah tag {From} dan diakhiri dengan {/form}. Dengan tag ini dapat membuat buku tamu, formulir pemesanan, survey, meminta komentar atau apa pun di web site.
Pada dasarnya, form html mempunyai bentuk seperti ini….
{FORM} awal form
{INPUT} minta masukan menggunakan salah satu dari beberapa cara….
{INPUT} ….anda bisa gunakan berapa pun input yang anda inginkan
{/FORM} akhir form
Bentuk masukan (TYPE of {INPUT}} yang paling umum digunakan dalam form html adalah TEXT. {INPUT TYPE=TEXT}
Setiap masukan memerlukan nama (NAME}. {INPUT TYPE=TEXT NAME=”ALAMAT”}
Selain type diatas ada beberapa type yang dapat digunakan yaitu : {input type = radio}, {input type = checkbox},
Membuat Pull Down List.
Untuk masukan jenis ini anda gunakan {SELECT} sebagai pengganti {INPUT} dan anda harus tambahkan tag penutup.
{SELECT} …{/SELECT}
Dan bisa juga menggunakan perintah {TEXTAREA NAME=”KOMENTAR”}
{/TEXTAREA}
6. Frame
Frame adalah perintah untuk tampilan yang ada pada home, yang dapat dibagi menjadi beberapa bingkai sesuai dengan yang diinginkan, apakah vertical atau horizontal.
{Frameset} … {/Frameset} Untuk set bingkai homepage
{Frame} … {/Frame} Untuk isi dan nama bingkai
Cols dan Rows Untuk set baris atau kolom
7. Link
Link adalah menghubungkan dengan obyek lain, dapat berupa Web Page, Gambar, Suara, ataupun ke komputer server yang lain. Link adalah merupakan pembeda antara mode text HTML dengan text yang lain. Untuk perintah Link dapat menggunakan elemen Anchor : {A} …{/A} dan tambahan perintah HREF.
Contoh jika ada perintah :
{A HREF=”contoh.htm”}Menuju ke Dokumen Contoh.htm {/A}
Artinya : Bahwa kalimat “Menuju ke Dokumen Contoh.htm” akan diberi tanda (biasanya garis bawah} dan jika pointer mouse berada pada kalimat tersebut, maka akan menjadi gambar jari tangan.
Pemacu link tidak harus tulisan, dapat juga pemacu link menggunakan gambar atau image: * {a href=”contoh.htm”} {img src=”gambar.gif} {/a} (Gambar.gif akan menjadi pemacu link ke dokumen contoh.htm}
Pada contoh berikut ini akan dibuat suatu file Indeks yang dibangun dengan menggunakan Frame
