belajar membuat web sendiri

Membuat Situs Web Sendiri

Saat ini membuat situs Web sendiri bukanlah hal yang asing lagi. Membuat web menjadi sangat mudah karena semakin banyaknya perangkat pembuat situs Web yang mudah untuk dioperasikan sehingga orang awam sekalipun dapat menciptakan halaman situs yang menarik dalam waktu yang relatif singkat. Contoh dari perangkat tersebut adalah program Microsoft Frontpage Express yang terdapat dalam paket Microsoft Office, program Netscape Composer, program Claris Home Page , dan masih banyak yang lainnya.

Namun karena ditujukan untuk kaum awam, maka kinerja aplikasi-aplikasi tersebut belum bisa dikatakan maksimal. Ada beberapa pekerjaan yang tidak dapat dikerjakan secara otomatis, yang artinya Anda sendirilah yang harus mengerjakannya. Oleh sebab itu, jalan terbaik untuk dapat menciptakan sendiri halaman situs Web adalah dengan mempelajari penggunaan bahasa Hyper Text Mark-up Language, atau yang populer dengan sebutan HTML. Tujuannya tidak lain supaya Anda dapat membetulkan kesalahan yang dilakukan oleh program-program tersebut, selain tentunya membuat kode perintah yang tidak dapat dilakukan oleh mereka.

Kenapa bahasa HTML harus dipelajari? Karena memang bahasa HTML adalah bahasa yang dipergunakan untuk menjalankan media Web. Secara sederhana, HTML dapat diartikan suatu bahasa yang berisi berbagai macam kumpulan perintah atau kode bagi komputer untuk menampilkan teks dan gambar pada Web. Satu hal yang patut diingat adalah HTML diciptakan untuk menyampaikan pesan kepada para pengguna Web, bukan untuk mendisain halaman situs Web Anda supaya tampil keren atau profesional. Apabila Anda menginginkan tampilan situs yang menarik dan canggih, dibutuhkan perangkat lain yang memang berfungsi untuk mendisain situs Web.

Anda dapat menulis HTML pada semua program penyunting teks. Sebagai permulaan, Anda bisa menggunakan program Notepad pada Windows atau Simpletext pada Mac. Nanti setelah disimpan dalam format .html, Anda dapat melihat tampilannya pada browser Microsoft Internet Explorer atau Netscape Navigator. Artikel ini akan membimbing Anda untuk membuat halaman situs yang dapat menampilkan teks, alamat atau links, gambar, dan tabel. Dari dasar-dasar ini, nantinya Anda dapat mengembangkan sendiri tampilan halaman situs web yang lebih menarik sesuai dengan keinginan Anda. Selamat berlatih !


Label dan Struktur Kalimat pada HTML

Seperti yang telah disebutkan di atas, HTML adalah sekumpulan instruksi yang dapat dikenali komputer untuk menampilkan halaman Web. Instruksi tersebut dinamakan tag atau label, yang harus ditulis memakai tanda kurung buka dan tutup. Hal yang patut diingat adalah penggunaan huruf besar pada setiap penulisannya untuk mempermudah pembacaan. Sebagian besar instruksi selalu diawali dengan label pembuka untuk memulai perintah dan diakhiri dengan label penutup untuk mengakhirinya.

<HTML></HTML>, <BODY></BODY>

Diantara tanda kurung kita dapat menyisipi pelengkap atau attribute untuk melengkapi detail perintah.

<IMG SRC=“image.jpg”>

SRC adalah atribut label atau tag attribute, sementara image.jpg adalah nilai atau value dari atribut tersebut. Perhatikan penulisan untuk nilai atribut yang menggunakan huruf kecil untuk mempermudah pembacaan.

Label-label tersebut tentunya tidak berdiri sendiri. Nantinya pada setiap label akan diberikan berbagai macam perintah sesuai dengan nama labelnya dan disusun berdasarkan struktur kalimat yang berlaku dalam bahasa HTML. Perintah-perintah inilah yang nantinya akan dibaca oleh para browser, supaya dapat menampilkan halaman situs seperti yang Anda inginkan.

Secara garis besar, struktur dasar kalimat HTML adalah sebagai berikut.

<HTML>

<HEAD>

Berisi pengantar tentang halaman situs seperti judul.

</HEAD>

<BODY>

Berisi data yang ingin ditampilkan pada halaman situs Anda, bisa berupa teks maupun gambar.

</BODY>

</HTML>.

Jadi kalimat HTML selalu diawali dengan label <HTML> dan untuk mengakhiri seluruh instruksi digunakan label di akhir kalimat. Isi dari kalimat HTML itu sendiri pada dasarnya ada dua macam, yakni HEAD (kepala halaman) dan BODY (badan halaman).

Sebelum kita melangkah ke <HEAD> dan <BODY>, Anda dapat mulai membuat halaman situs yang paling sederhana dengan menggunakan kalimat di atas. Bukalah program Notepad (Windows) atau Simpletext (Mac) dan ketik kalimat perintah seperti yang tampak di atas. Kemudian simpan dalam format ‘html’. Anda dapat melihat tampilannya dengan membuka file tersebut pada browser Microsoft Internet Explorer atau Netscape Navigator.

Kembali ke Atas

Apa yang dapat termuat dalam <HEAD>?

Singkatnya, bagian HEAD memuat informasi penting mengenai dokumen yang terdapat pada BODY, terutama judul dari halaman situs tersebut. Informasi lainnya dapat berupa pemberian kata kunci mengenai dokumen yang ingin kita tampilkan pada halaman tersebut supaya mudah dicari oleh para search engine, seperti Yahoo atau Altavista. Berikut adalah gambaran selengkapnya.

1. Pemberian judul pada label <TITLE>.

<HEAD>

<TITLE>

Halaman latihan

</TITLE>

</HEAD>

Apa yang ditulis diantara label <TITLE> dan </TITLE> akan tampak pada baris atas jendela browser, bukan di halaman situs.

2. Pemberian ‘keyword’ dengan menggunakan label <META>.

Supaya halaman situs dapat dengan mudah dicari oleh para mesin pencari, Anda harus memberikan kata kunci yang menggambarkan isi dari halaman tersebut. Sebagai contoh, kata kunci untuk dokumen yang telah Anda buat tadi adalah ‘latihan’. Penulisan kalimatnya adalah sebagai berikut ini.

<META NAME=“keyword” CONTENT=“latihan”>

Jadi keyword merupakan nilai dari atribut CONTENT yang dapat disesuaikan dengan isi dari halaman yang bersangkutan. Sedangkan nilai dari atribut NAME tidak dapat dirubah, selalu bertuliskan keyword. Label <META> diletakan setelah penulisan label <HEAD> dan sebelum label <TITLE>.

<HEAD>

<META NAME=“keyword” CONTENT=“latihan”>

<TITLE>

Halaman latihan

</TITLE>

</HEAD>

Apa yang Anda tulis pada label META tidak akan terlihat di halaman situs, karena ditujukan untuk mesin pencari.

Sekarang coba Anda hapus kalimat sebelumnya yang terdapat dalam label <HEAD> dan masukkan label <TITLE> dan <META> seperti yang tampak di atas pada dokumen yang telah Anda buat tadi. Kemudian simpan dan bukalah pada browser untuk melihat tampilannya. Judul yang Anda berikan akan terlihat pada jendela atas browser. Sedangkan atribut pada label tidak terlihat di halaman situs.

Kembali ke Atas

Apa yang dapat Anda letakkan pada label <BODY>?

BODY adalah bagian yang memuat semua perintah untuk menampilkan data halaman situs seperti yang tampak pada jendela browser. Apabila Anda ingin memoles situs supaya terlihat menarik, maka bagian inilah yang harus Anda olah. Macam label perintah yang terdapat pada bagian BODY cukup beragam, mulai dari memformat teks hingga menampilkan gambar, tabel, dan frames. Sekarang mari kita telusuri semua itu selangkah demi selangkah.

1. Memformat teks

Terdapat dua macam jenis teks dalam HTML. Pertama adalah heading, yang ditujukan kepada teks yang mempunyai nilai lebih dibanding teks lainnya, seperti teks untuk judul sebuah karangan. Karena bersifat membedakan, maka teks yang diberi label heading atau <H1> akan tampil lebih tebal. Jenis kedua adalah teks untuk paragraf atau teks biasa, yang diawali dengan label <P>.

<H1>

Folk Song

</H1>

<P>

Summer sky and throat bone dry. The fields are all gold. Dusty lane with a song in my brain. It stoned me to my soul.

</P>

Paragraf tersebut akan tampil di browser seperti di bawah ini.

Folk Song

Summer sky and throat bone dry. The fields are all gold. Dusty lane with a song in my brain. It stoned me to my soul.

Penulisan heading selalu diikuti oleh nomer dari 1 sampai 6. Hal ini untuk menandakan tingkat ketebalan dan ukuran huruf. Semakin kecil nomor urut maka ukuran hurufnya semakin besar, sebaliknya semakin besar nomor urutnya maka semakin kecil pula ukuran hurufnya.

Paragraf dalam Web tidak memiliki spasi lebih dari satu dan juga tidak mengenal indent yang selalu terdapat pada setiap awal paragraf. Tapi Anda dapat menambahkan pelengkap lainnya seperti penulisan huruf tebal, garis bawah, dan juga pemberian aneka warna untuk teks seperti halnya pada dokumen biasa. Berikut adalah beberapa label perintah untuk paragraf yang bisa Anda pakai untuk memformat teks.

– Menentukan letak posisi paragraf pada tengah, kanan dan kiri (setting standar) halaman

<P ALIGN=“center”>….</P>

<P ALIGN=“right”>….</P>

<P ALIGN=“left”>….</P>

– Memberi warna teks dan jenis huruf.

<FONT COLOR=“#FFFFFF” FACE= “Tahoma”>…</FONT>

– Menebalkan huruf.

<B>…</B>

– Memberi garis bawah.

<U>…</U>

– Memakai huruf italic.

<I>…</I>

– Membuat kalimat berikutnya berada pada satu baris dibawah.

Summer sky and throat bone dry.<BR> The fields are all gold.

Penggunaan label-label di atas dalam struktur kalimat HTML adalah sebagai berikut.

<P ALIGN=“center”><FONT COLOR=“FFFFFF”>

<B> Folk Song</B>

<BR><I>by The Sunday</I>

</FONT></P>

<P ALIGN=“center”><FONT COLOR=“FFFFFF” FACE=“Tahoma”>

Summer sky and throat bone dry<BR> The fields are all gold<BR> Dusty lane with a song in my brain<BR><U> It stoned me to my soul</U>

</FONT></P>

Dan tampilannya pada jendela browser :

Folk Song

by The Sunday

Summer sky and throat bone dry.

The fields are all gold.

Dusty lane with a song in my brain.

It stoned me to my soul.

Perhatikan perbedaan jenis huruf yang terdapat pada paragraf di atas. Apabila Anda tidak memberikan jenis huruf tertentu maka browser akan menampilkan huruf standar Web yakni Times New Roman. Hal yang perlu diingat adalah penulisan teks setelah label <BODY> dan sebelum </BODY>.

Langkah awal, tambahkan struktur di atas ke dalam halaman situs yang telah Anda buat pada latihan sebelumnya. Simpan kemudian tampilkan pada browser. Teks akan terlihat putih dengan latar belakang halaman situs yang berwarna abu-abu muda. Bandingkan dengan teks sebelumnya yang tidak diberi atribut. Teks akan tampil sesuai dengan standar setting Web, yaitu huruf berwarna hitam dan jenisnya Times New Roman. Sekarang coba Anda buat sendiri sebuah karangan dengan menggunakan struktur yang telah diterangkan di atas. Usahakan untuk membuat berbagai macam variasi tampilan teks dengan merubah warna dan jenis huruf maupun membuat berbagai macam heading.

Kembali ke Atas

2. Menuliskan daftar atau list

Apabila Anda pernah menggunakan program Microsof Words, tentu Anda tidak asing lagi dengan fasilitas ‘Bullet & Numbering’ untuk penulisan daftar dalam teks. Web juga mengenal bentuk tampilan daftar seperti itu, tapi tentu saja dengan variasi yang tidak banyak. Ada tiga jenis penulisan daftar yang dapat ditampilkan oleh HTML, yakni :

– Ordered list, atau daftar yang memakai urutan angka.

<OL>

<LI>Elemen pertama

<LI>Elemen kedua

<LI>Elemen ketiga

</OL>

Dan tampilannya pada jendela browser :

1.      Elemen pertama

2.      Elemen kedua

3.       Elemen ketiga

– Unordered list, atau daftar yang memakai urutan bulatan.

<UL>

<LI>Elemen pertama

<LI>Elemen kedua

<LI>Elemen ketiga

</UL>

Dan tampilannya pada jendela browser :

o       Elemen pertama

o       Elemen kedua

o       Elemen ketiga

– Definition list, atau daftar yang memakai definisi.

<DL>

<DT>Elemen pertama

<DD>Penjelasannya

<DT>Elemen kedua

<DT>Elemen ketiga

</DL>

Dan tampilannya pada jendela browser :

Elemen pertama

Penjelesannya

Elemen kedua

Elemen ketiga

Sekarang tambahkan masing-masing jenis daftar ke dalam halaman Web latihan Anda. Apabila Anda bingung untuk meletakannya, buatlah terlebih dahulu kalimat pembuka dengan menggunakan struktur yang terdapat pada latihan sebelumnya. Kemudian tambahkan daftar di dalamnya sebelum label . Simpan dan tampilkan pada browser. Apakah daftar Anda tampil pada halaman Web? Kalau belum, periksa sekali lagi penulisannya dengan melihat contoh di atas.

Kembali ke Atas

3. Memformat latar belakang halaman situs

Setting warna standar untuk halaman Web adalah putih. Jadi apabila Anda tidak mencantumkan nama warna pada label perintah, maka tampilan halaman Web akan berwarna putih pada browser. Penggunaan warna untuk tampilan latar belakang atau background halaman adalah dengan menambahkan atribut pada label <BODY>.

<BODY BGCLOR=“#C0C0C0”>

Penulisan nilai untuk warna didasarkan atas warna RGB, yaitu paduan warna dengan menggunakan komposisi warna merah (red), hijau (green) dan biru (blue). Satu hal yang perlu diingat adalah penulisan nilai warna dalam Web tidak dengan menggunakan nama, melainkan dengan kode yang terdiri atas enam digit angka dan huruf, yaitu 0 sampai 9 dan A hingga F. 0 adalah untuk nilai warna terendah (hitam) sedangkan F adalah nilai warna tertinggi (putih). Penulisan kode warna yang tepat dapat Anda temukan pada program Microsoft Frontpage Express. Ketiklah beberapa kata dan berikan warna yang sesuai dengan keinginan Anda. Kemudian lihat penulisan kodenya pada jendela untuk tampilan bahasa HTML.

Sekarang Anda dapat memberikan warna untuk tampilan latar belakang halaman Web yang telah Anda buat. Berikan atribut pada label <BODY> seperti yang tampak di atas. Kemudian simpan dan tampilkan pada browser. Halaman situs Anda akan berwarna abu-abu muda.

Alternatif lain yang tidak kalah menariknya untuk menampilkan latar belakang halaman Web supaya dapat tampil lebih adalah dengan memberinya gambar. Cukup dengan menggantikan atribut warna dengan atribut gambar yang hendak ditampilkan.

<BODY BACKGROUND=“image.gif”>

Gambar yang dapat dipergunakan dalam Web adalah gambar dalam format .gif untuk gambar grafis dan format .jpg untuk gambar foto. Jangan lupa untuk menempatkan file gambar tersebut dalam satu directory yang sama dengan dokumen .html Anda. Untuk mendapatkan gambar dalam format ini Anda bisa mengambilnya langsung dari situs-situs di Web.

Apabila tertarik, Anda dapat mencoba latihan ini. Arahkan kursor ke banner situs Sekolah Indonesia yang terdapat di baris atas halaman ini. Tekan mouse kanan dan simpan gambar tersebut dengan nama ‘image.gif’ dalam folder yang sama dengan dokumen latihan Anda. Kemudian ganti label <BODY> yang dilengkapi atribut BGCOLOR dengan label <BODY> baru seperti yang tampak di atas. Simpan lagi dan tampilkan pada browser . Apa yang terjadi pada halaman Web Anda ?

Kembali ke Atas

4. Membuat link ke halaman lainnya

Salah satu faktor yang membuat halaman situs terasa lebih interaktif adalah adanya link. Link merupakan sarana dari Web yang dapat menghubungkan pengguna Web untuk berpindah ke halaman atau bagian lain. Halaman yang dituju bisa dalam satu situs yang sama maupun berada pada situs lainnya. Bentuk file yang dituju dapat berupa halaman situs (berformat .html) atau berbentuk gambar (berformat .gif atau .jpg). Satu hal yang perlu diingat adalah penulisan alamat situs yang harus benar ejaannya. Berikut adalah beberapa penulisan links dalam HTML.

– Membuat link ke bagian lain dalam satu halaman.

Sebelumnya Anda harus menandakan bagian teks yang akan dituju dengan memberinya nama, misalnya ‘menu’. Kemudian tuliskan label <A NAME=“menu”> tepat di depan teks yang dituju. Setelah itu buat link yang menuju ke bagian tersebut ditempat yang Anda kehendaki.

<A HREF=“#menu”>Silahkan simak menu minggu ini.</A>

– Membuat link ke halaman lain dalam satu situs yang sama.

<A HREF=“latihan.html”>Anda ingin melihat halaman situs saya yang pertama?</A>

– Membuat link ke halaman lain yang terletak di situs yang berbeda.

<A HREF=“www.geocities.com/trirahayu”>Great sites for great ideas. Be inspired.</A>

Dan tampilannya pada jendela browser :

Great sites for great ideas. Be inspired.

Karena halaman yang dituju berada di situs yang berbeda, maka Anda harus menulis alamat file dengan lengkap. Struktur alamat file biasanya terdiri dari alamat situs/nama folder yang menyimpan file/nama subfolder (apabila ada)/nama file yang dituju. Tapi apabila bagian yang dituju tidak spesifik,maka Anda cukup menuliskan nama alamat situsnya saja. Browser akan otomatis menampilkan halaman depan (webpage) dari situs tersebut.

– Membuat link ke e-mail.

<A HREF=“mailto:trirahayu@yahoo.com”>Kirimkan saran Anda</A>

Dan tampilannya pada jendela browser :

Kirimkan saran Anda

Apabila Anda klik kalimat di atas, maka browser akan menampilkan tampilan jendela pop-up untuk menulis surat.

Tambahkan links dalam kalimat yang Anda buat pada latihan sebelumnya. Simpan dan tampilkan pada browser. Sebelumnya, pastikan komputer sudah terhubung dengan saluran internet. Namun apabila bagian atau halaman yang dituju berada dalam komputer Anda, maka browser akan segera menampilkannya tanpa harus terkoneksi ke internet.

Kembali ke Atas

5. Menampilkan gambar

Untuk menambahkan gambar ke dalam halaman situs Anda, ada beberapa langkah yang harus dilakukan.

– Pastikan bahwa gambar tersimpan dalam format .gif untuk gambar grafis atau .jpg untuk gambar foto. Simpan file gambar Anda dalam direktori yang sama dengan file .html yang akan menampilkan gambar tersebut. Apabila file .html berada pada disket maka file gambar pun harus Anda simpan dalam disket tersebut.

– Tambahkan label perintah di bawah ini dalam file .html.

<IMG SRC=“image.gif”>

Kode IMG memanggil browser untuk menampilkan gambar, sedangkan kode SRC menuntunnya ke tempat gambar yang dituju. Jadi kalau file gambar yang ingin Anda tampilkan berada dalam direktori yang sama, cukup dengan menuliskan nama filenya saja. Tidak demikian halnya apabila file gambar terletak di direktori milik situs orang lain. Anda harus mencantumkan pula alamat situs dan folder tempat file gambar tersebut di simpan.

<IMG SRC=“www.geocities.com/trirahayu/banner.gif”>

– Usahakan untuk memberikan penjelasan pada setiap gambar yang ingin Anda tampilkan. Perlu diketahui bahwa tidak semua komputer dapat menampilkan file gambar karena koneksinya yang terlalu lama atau browser yang digunakan tidak dapat menampilkan gambar. Disinilah keterangan tersebut berfungsi, karena menggantikan tampilan gambar sehingga halaman situs Anda tidak terlihat kosong tanpa arah.

<IMG SRC= “image.gif” ALT=“Logo situs SekolahIndonesia”>

– Apabila Anda mengetahui ukuran gambar yang ditampilkan sebaiknya cantumkan pula. Browser akan menampilkan gambar Anda dengan ukuran yang tercantum dalam label. Dengan fungsi ini Anda dapat merubah ukuran gambar yang tampil di halaman situs sesuai dengan jumlah yang diinginkan. Namun sebaiknya jumlah yang tertera dalam label adalah ukuran sebenarnya gambar tersebut. Apabila Anda ingin merubahnya, lakukan pada program pengolah gambar saja, seperti Adobe Photoshop atau Imaging (Windows).

<IMG SRC= “image.gif”  HEIGHT= “100” WIDTH=“150” >

Atribut HEIGHT untuk menyatakan tinggi dan WIDTH untuk menyatakan lebar gambar. Sedangkan ukuran yang dipergunakan adalah pixel.

– Untuk menentukan letak posisi gambar dalam halaman situs, gunakan atribut ALIGN. Nilai yang dapat diberikan dalam atribut ALIGN terbatas pada kanan dan kiri.

<IMG SRC=“image.gif” ALIGN=“right” HEIGHT=“100” WIDTH=“150” >

Sedangkan untuk posisi tengah Anda harus menggunakan label <P>.

<P ALIGN=“center”><IMG SRC=“image.gif” HEIGHT=“100” WIDTH=“150” ></P>

Ikuti langkah-langkah tersebut di atas ke dalam halaman situs latihan Anda. Apabila ingin menambah koleksi gambar, Anda bisa kunjungi beberapa situs agen foto di bawah ini. Beberapa situs ada yang memajang nama mereka pada foto sebagai kompensasi, karena mereka pada umumnya menjual apa yang dipajang.

www.corbis.com | www.eyewire.com | www.gettyone.com | www.adobe.com

Kembali ke Atas

6. Membuat tabel

Tag utama dari sebuah table adalah sebagai berikut:

<TABLE>
<TR> <TD>Isi Sel Baris 1,1</TD> <TD>Isi Sel Baris 1,2</TD></TR>
<TR> <TD>Isi Sel Baris 2,1</TD> <TD>Isi Sel Baris 2,2</TD></TR>
</TABLE>

Tag <TABLE> menyatakan awal dari tabel dan harus ditutup oleh sebuah tag </TABLE>. Tag <TR> menyatakan sebuah baris dari tabel dan tag <TD> menyatakan sebuah elemen dalam baris.

Tag <THEAD>, <TBODY>, dan <TFOOT> dapat pula dipergunaka

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: