Panduan HTML untuk pemula

Desember 26, 2008 — komputeridiot

<!– @page { size: 21cm 29.7cm; margin: 2cm } P { margin-bottom: 0.21cm } –>

Panduan HTML untuk pemula

Pelajaran 1

1.1 Pembuka

Akhirnya…….., kamu memutuskan untuk mendesain halaman web kamu sendiri! Good decision. Mari kita mulai!.

Halaman web umumnya adalah file dengan ekstensi .htm atau .html. File itu mengandung sebuah kode yang disebut “hyper text mark-up language” atau html. Kode ini ketika dibuka dengan browser seperti Internet Explorer atau Netscape akan tampak sebagai halaman web yang bagus, akan tetapi kode dalam halaman web itu mungkin saja rumit dan njelimet.

Untuk mendesain sebuah halaman html kamu punya dua pilihan :

  1. Kamu dapat memakai editor halaman web seperti Microsoft FrontPage, yang cara kerjanya mirip sama Microsoft Word Kamu tinggal masukkan tulisan (teks), gambar-gambar dan akhirnya simpan dokumen kamu dalam bentuk html (save as web page). Jadi, bisa dikatakan mendesain halaman web itu sangat mudah. Tetapi, ini bukan pilihan yang tepat untuk membuat halaman web yang profesional.

  2. Pilihan kedua adalah belajar kode html dan tulis halaman html dengan teks editor.

1.2 Mengapa harus belajar html ?

      • Jika kamu ingin mendesain halaman web yang profesional, kamu harus familiar dengan kode html.

      • Editor web page menghasilkan kode html yang sangat panjang dan “mengerikan”. Untuk mengerti kode-kode ini sangat sulit.

      • Jika kamu ingin mendesain dynamic web page, kamu harus mengerti kode html.

      • Jika kamu ingin menampilkan form untuk mengirim informasi ke server dan menampilkan hasilnya di browser, maka kamu wajib mengerti html.

      • Dll.

1.3 Tools yang harus kamu punyai

Kamu harus punya text editor sederhana untuk menulis kode html. Sebagai contoh, kamu dapat memakai notepad di windows atau text editor lain. Kamu juga harus punya browser seperti Internet Explorer atau Netscape Navigator. Pada pelajaran ini diasumsikan kamu memakai Windows 9X/NT/2000.

1.4 Pelajaran dimulai !

Pertama, buka notepad dan ketik kode berikut :

<HTML>

Hello world!

</HTML>

Sekarang simpan dengan nama “halaman1.html”. Untuk browse file html, buka windows explorer dan double click filenya. Kamu akan melihat halaman web pertama kamu di web browser.

<HTML> dan </HTML> disebut tag. Tag pertama adalah tag awal dan yang kedua adalah tag akhir. Tag mirip seperti commands pada bahasa pemrograman. Tag <HTML> memberitahu browser kalau ini adalah permulaan HTML dan </HTML> adalah tanda akhir HTML.

1.5 Kode header html

Setiap halaman html harus mempunyai sebuah header. Header mengandung informasi penting tentang halaman. Untuk setiap bagian header diperlukan tag yang berbeda. Header sebuah halaman ditulis dengan bentuk tag : <HEAD> dan </HEAD>.

<HTML>

<HEAD>

…

</HEAD>

</HTML>

Informasi header harus dimasukkan diantara tag <HEAD> </HEAD>.

1.6 Title html

Salah satu bagian yang terpenting dari header adalah title. Title adalah teks yang muncul di title bar pada browser. Jadi dokumen html akan tampak seperti berikut :

<HTML>

<HEAD>

<TITLE>Title halaman</TITLE>

</HEAD>

</HTML>

1.7 Body html

Sekarang halaman web kita membutuhkan body yang akan berisi content halaman web. Kamu pasti sudah bisa menduga tag yang akan dipakai. Yap ! kita akan memakai tag : <BODY> </BODY>

Body harus berada setelah akhir tag header. Jadi halaman web kita akan tampak seperti ini :

<HTML>

<HEAD>

<TITLE>Website PT. Antah Berantah</TITLE>

</HEAD>

<BODY>

Selamat datang di website kami…….. dst.

</BODY>

</HTML>

Sekarang tulis kode html di atas dengan notepad dan simpan dengan nama “halaman2.html”. Lalu lihat dengan browser dengan cara men-double click filenya di windows explorer.

1.8 Warna background halaman web

Untuk merubah warga background halaman web kamu bisa digunakan tag <BODY> berikut :

<HTML>

<HEAD>

<TITLE>Halaman dengan background berwarna</TITLE>

</HEAD>

<BODY BGCOLOR=”#00FF00″>

Halaman dengan background berwarna hijau

</BODY>

</HTML>

Kode di atas akan merubah warna background menjadi hijau. Format penomoran warna adalah RRGGBB. Setiap warna adalah kombinasi dari tiga warna utama : Red, Green dan Blue. Pada format warna, RR adalah nilai hexadesimal warna merah, GG adalah nilai hexadesimal warna hijau, dan BB adalah nilai hexadesimal warna biru.

Dua digit nilai hexadesimal dapat bervariasi antara 00 sampai FF, atau 0 sampai 255 pada format desimal. Jadi, jika kita menuliskan 00FF00 artinya adalah (red=0, green=255, blue=0), sehingga hasilnya adalah warna hijau terang. Dengan metode penulisan ini dapat dihasilkan 16 juta warna.

1.9 Gambar Background

Kita dapat memakai sebuah gambar background pada halaman web untuk menggantikan background warna. Kamu harus punya image file dalam format .gif atau .jpg. Sebagai contoh, bila kita ingin memakai file “image1.tif” sebagai background halaman, maka tag <BODY> harus ditulis sebagai berikut :

<HTML>

<HEAD>

<TITLE>Halaman dengan gambar background</TITLE>

</HEAD>

<BODY BACKGROUND=”image1.gif”>

<B>Halaman dengan gambar background</B>

</BODY>

</HTML>

File gambar harus berada pada folder yang sama dengan file html. Kalau tidak, browser tidak akan bisa menampilkannya.

Pelajaran 2

2.1 Format Text

Pada pelajaran 1 kamu telah belajar menulis teks sederhana pada halaman web. Selanjutnya kamu akan mempelajari bagaimana teknik memformat teks. Bagian ini adalah yang terpenting dari teknik mendesain halaman web. Jadi, kamu harus mempelajarinya dengan hati-hati.

2.2 Merubah style text

Kita dapat membuat teks bold, italic, atau underline. Jika kamu ingin membuat text bold, kamu harus menulisnya didalam tag <B>…</B>.

<BODY>

Ini sangat <B> penting </B>

</BODY>

Pada teks di atas, kata “penting” diformat bold. Kamu dapat membuat teks italic dengan menulisnya di dalam tag : <I>…</I>. Dan kamu dapat membuat text underlined dengan menulisnya di dalam tag <U>…</U>.

Contoh :

<HTML>

<HEAD>

<TITLE>Contoh 1, Pelajaran 2</TITLE>

</HEAD>

<BODY>

<B>Ini teks bold</B><br>

<I>Yang ini italic</I><br>

<U>Dan yang ini underlined</U><br>

<B><I>Lihat yang ini, bold dan italic</I></B>

</BODY>

</HTML>

Pada contoh di atas, kamu dapat melihat bahwa format teks bisa dikombinasikan antara yang bold dan italic atau kombinasi lain. Kamu mungkin melihat tag <BR> pada setiap akhir baris. Fungsinya adalah untuk menggantikan enter. Jika kamu menekan enter pada setiap akhir baris dengan harapan barisnya akan berganti, kamu akan kecewa karena semua baris akan ditampilkan pada satu baris, tidak peduli apakah pada kode html dia ditulis pada baris yang berbeda.

Untuk berganti baris, harus dimasukkan tag <BR> pada akhir baris seperti contoh di atas. Yang harus kamu perhatikan adalah untuk tag <BR> tidak ada endingnya.

2.3 Nested Tags (tag bersarang)

Pada bagian sebelumnya, kita melihat adanya baris dengan kode nested tags.

<B><I>Lihat yang ini, bold dan italic</I></B>

Ketika kamu memakai nested tags kamu harus memastikan mereka tidak “overlap”. Mereka harus ditulis secara tepat. Kalau tidak, yang akan kamu dapatkan adalah format teks yang tidak kamu inginkan.

2.4 Text dengan lebar font yang “fixed”

Sebagaimana yang kamu tahu, font biasa memakai horizontal space yang berbeda. Sebagai contoh huruf ‘w’ butuh space lebih lebar daripada “i”. Kadang-kadang kita membutuhkan font dengan space yang sama untuk semua huruf.

Sebagai contoh, jika kamu ingin menampilkan table di halaman kamu, kamu mungkin membutuhkan font jenis ini. Untuk memakai font dengan lebar yang “fixed” kamu harus memakai tag : <TT>…</TT> tags. TT artinya Typewriter Text.

2.5 Merubah ukuran dan jenis font

Kamu dapat merubah ukuran dan jenis font dengan tag <FONT>…</FONT>. Kalau kamu hanya menggunakan tag ini, kamu tidak akan merubah apa-apa karena tag ini butuh parameter. Parameter ini menentukan jenis perubahan apa yang kamu inginkan, merubah jenis font atau merubah ukurannya.

2.6 Ukuran font

Untuk merubah ukuran font, masukkan kode di antara tag <FONT> sebagai berikut :

<FONT SIZE=n>…,</font>

n adalah ukuran font antara angka 1 dan 7. Jika ukuran font tidak ditulis, maka dianggap ukurannya 3 (default).

Contoh :

<HTML>

<HEAD>

<TITLE>Contoh 2, Pelajaran 2</TITLE>

</HEAD>

<BODY>

<FONT SIZE=1>1 ukuran 1</FONT><br>

<FONT SIZE=2>2 ukuran 2</FONT><br>

<FONT SIZE=3>3 ukuran 3</FONT><br>

<FONT SIZE=4>4 ukuran 4</FONT><br>

<FONT SIZE=5>5 ukuran 5</FONT><br>

<FONT SIZE=6>6 ukuran 6</FONT><br>

<FONT SIZE=7>7 ukuran 7</FONT><br>

</BODY>

</HTML>

2.7 Jenis font

Kita dapat merubah jenis font dengan menuliskan namanya :

<FONT FACE=”Nama Font”>…</FONT>

Kamu harus menuliskan nama font diantara tanda petik.

Contoh :

<HTML>

<HEAD>

<TITLE>Contoh 3, Pelajaran 2</TITLE>

</HEAD>

<BODY>

<FONT FACE=”ARIAL”>Ini adalah font ARIAL</FONT><br>

<FONT FACE=”TIMES NEW ROMAN”>Ini adalah font TIMES NEW ROMAN</FONT><br>

</BODY>

</HTML>

Pada contoh di atas, kita menggunakan font Arial dan Times New Roman.

Peringatan : Font yang bisa ditampilkan adalah font yang ter-install di komputer kamu. Karena itu hati-hati jika menggunakan font yang berbeda, pastikan font yang kamu gunakan adalah font yang umum digunakan oleh pengguna Windows.

Sebagai alternatif, kamu bisa memakai beberapa jenis font. Dengan cara ini, browser kamu akan menemukan font alternatif bila font utama tidak ada.

<FONT Face=”ARIAL,HELVETICA”>…</FONT>

2.8 Merubah warna font

Pada pelajaran sebelumnya kamu telah belajar bagaimana merubah warna background halaman web. Sekarang kita aka belajar merubah warna font. Lihat contoh di bawah ini :

Contoh :

<HTML>

<HEAD>

<TITLE>Contoh 4, Pelajaran 2</TITLE>

</HEAD>

<BODY>

<FONT COLOR=”#FF0000″>Warna huruf merah.</FONT><br>

<FONT COLOR=”#00FF00″>Warna huruf hijau.</FONT><br>

<FONT COLOR=”#0000FF”>Warna huruf biru.</FONT><br>

</BODY>

</HTML>

Pada contoh di atas, digunakan beberapa macam warna. Kamu dapat merubah warna huruf dengan merubah nomor warnanya. Jika kamu sulit mengingat nomor warnanya, lihat pelajaran “warna background halaman web” diatas.

2.9 Menggabungkan atribut font

Kita dapat mengkombinasikan parameter tag <FONT> sesuka kita. Dengan cara ini kita akan bisa menampilkan font dalam berbagai ukuran, warna dan jenis. Kamu bahkan bisa merubah style teks dengan cara menuliskan kodenya dalam bentuk bersarang (nested), seperti :

<B><I><FONT SIZE=”5″ FACE=”GARAMOND” COLOR=”#21F0AC”>

Bagaimana dengan ini ?

</FONT></I></B>

2.10 Merubah default warna font di halaman web

Setiap browser masing-masing mempunyai setting default yang berbeda untuk warna teks, warna active link, warna visited link, dll. Default warna teks adalah hitam. Sedangkan link biasanya biru. Untuk merubahnya kamu harus menggunakan tag <BODY> dengan parameter sebagai berikut :

<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF”

VLINK=”#00FF00″ ALINK=”#FF0000″>Some Text </BODY>

BGCOLOR : background halaman web

TEXT : warna teks

LINK : warna link

VLINK : visited link

ALINK : active link

2.11 Penutup

Pada pelajaran 1 dan 2 tercakup tentang teknik-teknik dasar dalam menulis kode html. Sekarang kamu sudah bisa memakai bermacam-macam format teks pada halaman web kamu.

Karena mengingat tag dan parameter sangat sulit, kamu harus sering-sering latihan. Dengan sering berlatih, kamu lama-lama pasti terbiasa. Ingat kata-kata bijak untuk para programmer, “Tidak mungkin seseorang menjadi programmer tanpa sering menulis program”. Sampai jumpa di pelajaran berikutnya :)

2 Komentar »

2 Tanggapan ke “Panduan HTML untuk pemula”

  1. arif ust Says:
    Januari 19, 2009 pukul 2:47 am

    Kunjungan Pertama Blog Regedit, Artikelnya bagus apalagi kata-katanya menarik menambah wawasan dan pengalaman saya trims ya…lanjutkan artikelnya saya tunggu. O iya… Boleh saya minta komentar dari teman untuk artikel di blog saya? Kalau Boleh Kunjungi blog saya ya hari ini saya baru posting artikel tolong komentarnya kalau bisa komentarnya berkaitan dengan artikelnya ya. Ini alamatnya : http://regedit.blog.telkomspeedy.com/2009/01/18/mencari-domain-menggunakan-keyword-site/ terima kasih banyak

  2. Daom Says:
    Juli 12, 2009 pukul 11:48 am

    heheh..bagus artikelnya…sangat membantu para pemula…
    saya pun termasuk pemula lho…baru belajar ngblog…


Tinggalkan Balasan