Membuat Website Itu Mudah (Bagian VIII – Link)

Link adalah bagian paling penting dari halaman HTML. Link menghubungkan satu halaman HTML dengan halaman lainnya. Dengan adanya link, maka dalam satu alamat website dapat dituliskan sekian banyak halaman yang masing-masing dihubungkan dengan link. Dengan link ini pulalah sebuah website dapat diatur menjadi lebih ringkas dan tertata dengan baik.

Alamat Absolut

Tag untuk menghubungkan satu halaman ke halaman lain adalah <a> atau anchor, dan ditutup dengan </a>. Dengan tag anchor inilah seorang programmer web dapat menjadikan halaman-halaman HTML yang bersifat interaktif, di mana pengunjungnya dapat membuka halaman-halaman lain pada websitenya, atau membuka alamat lain yang disediakan oleh si programmer.

Pada tag anchor tersebut, alamat yang dituju ditulis dalam properti href=””, dan bagian yang di-markup atau ditandai ditempatkan di antara tag <a> dan </a>.  Jadi, jika ingin menghubungkan ke alamat: http://www.kursusprivat.com, lengkapnya ditulis seperti ini:

<a href=”http://www.kursusprivat.com”>Kursus Privat Komputer</a>

pada Internet Browser akan ditampilkan seperti ini:

Kursus Privat Komputer

Tulisan tersebut aktif sebagai hyperlink yang akan mengantarkan orang yang mengklik ke alamat yang disebutkan pada Tag <a> tersebut.

Mudah, bukan. Dengan demikian, anchor dipergunakan untuk menandai sebuah alamat. Namun, alamat tersebut bisa berbeda-beda, tergantung pada situasinya. Pada contoh di atas, digunakan alamat absolut dengan menyebutkan keseluruhan alamat secara lengkap.

Alamat Relatif

Pada pembuatan website, alamat-alamat yang disediakan biasanya berada pada satu folder yang sama dengan halaman HTML yang kita buat. Contohnya, file HTML yang kita buat adalah : index.html. Sedangkan file-file HTML lainnya adalah : profil.html, galeri.html, kontak.html. Maka, pada file : index.html dituliskan sebagai berikut :

<a href=”profil.html”>PROFILE</a>

<a href=”galeri.html”>GALLERY</a>

<a href=”kontak.html”>CONTACT US</a>

Sekarang kita coba untuk menyusunnya pada sebuah halaman HTML :

<html>
  <head>
    <title>HEMAT BBM SELAMATKAN LINGKUNGAN</title>
	<style>
	body { color:white; font-family:Arial }
	a { color:white; font-family:Verdana; text-decoration:none }
	</style>
  </head>
  <body background="bgr.gif">
    <center><img src="header.jpg" border="2" ></center>
    <center>
    <a href="index.html">HOME</a> |
    <a href="profil.html">PROFILE</a> |
    <a href="galeri.html">GALLERY</a> |
    <a href="kontak.html">CONTACT US</a>
    </center>
  </body>
</html>

Hasilnya akan terlihat sebagai berikut:

Link Pada Halaman Yang Sama

Selain dipergunakan untuk menghubungkan satu halaman ke halaman lain, link juga dapat berfungsi untuk menuju pada bagian lain dalam satu halaman yang telah diberi nama. Untuk itu, digunakan atribut name=”nama_bagian” untuk menandai satu bagian di dalam satu halaman HTML.

Link yang sudah diberi nama tersebut, dapat diakses dari text atau gambar yang diberi tag anchor. Alamat yang disebutkan pada atribut href adalah alamat nama_bagian tersebut yang diberi tanda pagar, contoh :

<a href=”index.html#bagian_satu”>Bagian satu</a>

Link tersebut akan membuat text yang diapit oleh tag anchor menjadi sebuah hyperlink. Jika hyperlink tersebut diklik, maka halaman yang dibuka adalah halaman “index.html”, dan kemudian browser akan menempatkan nama anchor “bagian_satu” ke bagian paling atas pada tampilan browser.

Dengan demikian, sebuah halaman HTML bisa saja mengandung beberapa anchor sekaligus. Hal ini dipergunakan untuk memudahkan user untuk berpindah-pindah dari satu bagian ke bagian lain, terutama apabila halaman tersebut dirasakan terlalu panjang.

Dengan menambahkan beberapa anchor dalam satu halaman, maka struktur halaman juga dapat dibuat lebih rapi. Masing-masing bagian dapat diberi nama dan pada bagian lain programmer dapat menyediakan hyperlink ke bagian-bagian tersebut.

Kita lanjutkan di topik bahasan selanjutnya. ■

Advertisements

Membuat Website Itu Mudah (Bagian VII – Gambar & Teks Berjalan)

Gambar biasanya menjadi bagian yang paling menarik pada sebuah website. Gambar menjadi daya tarik utama seorang pengunjung untuk tetap betah berlama-lama terpaku pada sebuah website. Selain itu, gambar juga menjadi identitas tersendiri bagi seorang perancang website, yang membedakan website yang dibuatnya dari website-website lainnya. Betapapun sederhananya sebuah website yang dirancang tetap akan memiliki ciri khas yang tidak dimiliki oleh website lain.

Gambar pada sebuah halaman website secara sederhana dapat dihasilkan oleh berbagai perangkat elektronik yang dapat mengubah foto atau gambar menjadi data digital dalam bentuk image. Scanner dan Digital Camera adalah perangkat yang biasa digunakan untuk memproduksi gambar dalam bentuk digital. Sedangkan jenis file yang umum dipergunakan pada halaman html adalah: jpg, gif, png. File-file jenis ini sangat mudah ditemukan dan bertebaran di internet. Namun, untuk memuatnya pada halaman html yang kita buat harus memperhatikan aspek legal agar tidak terjadi hal-hal yang bertentangan dengan hukum nantinya.

Tag yang dipergunakan untuk menampilkan gambar adalah <img src=”namafile.jenisfile”>. Misalnya untuk menampilkan gambar dengan namafile: “header.jpg”, yang berupa gambar berikut:

maka pada file html akan ditulis seperti ini:

<html>
  <head>
    <title>HEMAT BBM SELAMATKAN LINGKUNGAN</title>
  </head>
  <body>
    <img src="header.jpg">
  </body>
</html>

Tempatkan file gambar: “header.jpg” satu folder dengan file html yang kita buat.

Hasilnya akan terlihat sebagai berikut:

File: “header.jpg” di atas memiliki ukuran: 780 x 120 piksel. Dibuat dengan acuan lebar monitor komputer yang berukuran VGA: 800 x 600 piksel. Hasilnya ditampilkan pada monitor dengan ukuran yang lebih lebar dari ukuran VGA. Tampak bahwa gambar tidak berada di posisi tengah. Untuk memperbaikinya kita dapat membuat Tag <center> dengan penutup </center> untuk membuat Tag <img> menjadi rata tengah.

Tambahkan warna background pada Tag <body> dengan warna yang sesuai dengan karakter yang ingin ditampilkan, misalnya warna abu-abu tua untuk memberi kesan gagah. Anda dapat menambahkan atribut border pada Tag <img> untuk memberi garis pembatas pada gambar.

<html>
  <head>
    <title>HEMAT BBM SELAMATKAN LINGKUNGAN</title>
  </head>
  <body bgcolor="#333333">
    <center><img src="header.jpg" border="2"></center>
  </body>
</html>

Hasilnya akan terlihat sebagai berikut:

Menampilkan Gambar Sebagai Background

Gambar selain ditampilkan secara tersendiri, juga dapat dijadikan sebagai background. Halaman website dapat diisi dengan gambar dengan ukuran relatif kecil yang ditampilkan secara berulang-ulang sehingga memenuhi seluruh halaman.

Contohnya adalah gambar “bgr.gif” dengan ukuran 1 x 8 piksel, seperti ini:

dapat dijadikan sebagai background dengan cara menuliskan pada properti <body> sebagai berikut:

<html>
  <head>
    <title>HEMAT BBM SELAMATKAN LINGKUNGAN</title>
  </head>
  <body background="bgr.gif">
    <center><img src="header.jpg" border="2"></center>
  </body>
</html>

Tempatkan file gambar: “bgr.gif” satu folder dengan file html yang kita buat.

Hasilnya akan terlihat sebagai berikut:

Nah, mudah bukan? Tentu saja untuk bisa menyiapkan gambar-gambar yang baik, kita harus mempelajari software yang sesuai. Adobe Photoshop adalah salah satu software pengolah gambar / foto yang sangat berguna untuk pekerjaan ini.

Perlu diketahui, file gambar pada sebuah halaman html bisa ditempatkan pada folder yang sama dengan file html – seperti pada 2 contoh di atas. Atau, ditempatkan pada folder khusus yang diberi nama “images”. Gunanya adalah untuk memisahkan file-file gambar dari file-file html agar terorganisasi dengan baik dan tidak bertebaran bercampur dengan file-file html. Pada sebuah website yang sudah lengkap, file-file gambar jumlahnya bisa puluhan, ratusan, bahkan ribuan, sehingga akan lebih rapi jika ditempatkan pada folder khusus dengan nama : images.

Menambahkan Teks Berjalan

 
Selanjutnya kita bisa menambahkan tulisan berjalan di bawah gambar header tersebut dengan menggunakan Tag <marquee> dan ditutup dengan </marquee>. Tentu saja kita dapat menambahkan style pada tulisan agar ditampilkan dengan warna dan font yang sesuai dengan selera.

<html>
  <head>
    <title>HEMAT BBM SELAMATKAN LINGKUNGAN</title>
  </head>
  <body background="bgr.gif">
    <center><img src="header.jpg" border="2"></center>
    <marquee style="color:white; font-family:Arial">Hematlah BBM agar lingkungan kita tetap lestari</marquee>
  </body>
</html>

Hasilnya akan terlihat sebagai berikut:

Kita lanjutkan di topik bahasan selanjutnya. ■

Membuat Website Itu Mudah (Bagian VI – Stylesheet)

Satu hal lagi yang biasa dipergunakan dalam pengaturan website adalah Font Style. Tag yang dipergunakan bisa bermacam-macam, namun yang paling efisien adalah dengan menuliskannya dalam CSS. CSS atau Cascade Style Sheet adalah pengaturan website yang dikumpulkan dalam satu file tersendiri, yang kemudian sering dibaca oleh file HTML sebagai Class. Oleh karena itu, pembelajaran HTML selalu disandingkan dengan pembahasan mengenai CSS.

Style dapat dimulai dengan memanfaatkan Tag Font, karena Tag Font dapat dipergunakan untuk mengatur jenis huruf, ukuran huruf, warna huruf, dll. Namun, apabila jenis, ukuran, dan warna huruf ini dibuat seragam, lebih baik gunakan Font Style. Style digunakan untuk mengatur tampilan dokumen HTML di web browser secara keseluruhan. Tidak hanya font yang dapat diatur melalui style, tetapi juga warna background, border, dan lain-lain.

Ada beberapa cara untuk menuliskan style pada sebuah halaman HTML:

1. Inline style

Inline styles digunakan bila ingin mengatur format pada satu bagian dokumen HTML saja. Sehingga inline styles tetap diletakkan di bagian <body>. Dalam hal ini style dituliskan sebagai atribut dari sebuah Tag.

Contoh penerapan inline style pada sebuah paragraf adalah sebagai berikut:

<html>
<body>
Berikut ini adalah contoh penggunaan style pada paragraf:
<p style=”color: blue; margin-left: 20px; background-color: lightblue”>
INI ISI PARAGRAF YANG DIBERI STYLE.
Perhatikan bahwa teks paragraf ini berwarna biru,
diberi jarak margin sebelah kiri sebesar 20 piksel,
dan diberi latar belakang warna biru muda.</p>
</body>
</html>

Hasilnya akan terlihat seperti di bawah ini:

Pada contoh di atas terlihat bahwa atribut Style memiliki jangkauan yang lebih luas dibandingkan dengan Tag Font. Oleh karena itu, pemakaian atribut Style lebih dianjurkan dibandingkan dengan Tag Font. Lebih dari itu, Style bisa lebih efisien dibandingkan dengan Tag Font, karena bisa disimpan dalam bentuk class, yang kemudian bisa dipanggil berdasarkan nama class.

2. Internal Style Sheet

Internal style sheet digunakan di dalam satu dokumen HTML dan hanya satu dokumen HTML itu saja yang menggunakan style tersebut.

Perbedaan Internal Style Sheet dengan Inline Style adalah pada penempatannya. Internal Style Sheet ditempatkan pada bagian Head, di antara Tag <head> dan </head>. Semua bagian body dapat diatur tampilannya melalui Style Sheet ini. Di sini kita mendeklarasikan Style yang dipergunakan di dalam <body> sehingga pada saat bagian body ditampilkan, Style-nya akan mengacu pada Style yang sudah dideklarasikan tersebut.

Contoh penggunaan Style Sheet:

<html>
<head>
<style type=”text/css”>
body { color:blue; background-color:lightblue}
p { color:red; margin-left: 20px; margin-right: 20px; background-color: pink}
</style>
</head>
<body>
<b>
INI ADALAH TULISAN DENGAN STYLE “body”.</b>
Tulisan ini berwarna biru dengan latar belakang warna biru muda.<br>
Berikut ini adalah contoh penggunaan style sheet pada paragraf:
<p><b>INI ADALAH PARAGRAF YANG DIBERI STYLE.</b>
Perhatikan bahwa teks paragraf ini berwarna merah,
diberi jarak margin sebelah kiri sebesar 20 piksel,
margin sebelah kanan sebesar 20 piksel,
dan diberi latar belakang warna pink.</p>
</body>
</html>

Hasilnya akan terlihat seperti di bawah ini:

Style sheet dalam contoh ini dipergunakan untuk mengatur teks, warna latar belakang, dan margin pada Tag <body> dan Tag <p>. Detil pengaturan style dilakukan pada Tag <style> di bawah Tag <head>. Dengan penulisan style tersebut, maka seluruh tulisan di dalam Tag <body> diatur oleh style “body”, demikian halnya seluruh tulisan di dalam Tag <p> diatur oleh style “p”.

Bagaimana jika kita ingin menambahkan style lain yang dipergunakan pada tag yang sama? Contohnya jika kita ingin membuat 2 paragraf berbeda warnanya, satu berwarna merah dan satu lagi berwarna hijau. Style dapat dituliskan sebagai Class tersendiri, yang dapat dipanggil melalui atribut class. Contohnya adalah sebagai berikut:

<html>
<head>
<style type=”text/css”>
body { color:blue; background-color:lightblue}
.merah { color:red; margin-left: 20px; margin-right: 20px; background-color: pink}
.hijau { color:green; margin-left: 20px; margin-right: 20px; background-color: lightgreen}
</style>
</head>
<body>
<b>
INI ADALAH TULISAN DENGAN STYLE “body”.</b>
Tulisan ini berwarna biru dengan latar belakang warna biru muda.<br>
Berikut ini adalah contoh penggunaan style sheet pada paragraf:
<p class=”merah”><b>INI ADALAH PARAGRAF YANG DIBERI STYLE CLASS “merah”.</b>
Perhatikan bahwa teks paragraf ini berwarna merah,
diberi jarak margin sebelah kiri sebesar 20 piksel,
margin sebelah kanan sebesar 20 piksel,
dan diberi latar belakang warna pink.</p>
<p class=”hijau”><b>INI ADALAH PARAGRAF YANG DIBERI STYLE CLASS “hijau”.</b>
Perhatikan bahwa teks paragraf ini berwarna hijau,
diberi jarak margin sebelah kiri sebesar 20 piksel,
margin sebelah kanan sebesar 20 piksel,
dan diberi latar belakang warna hijau muda.</p>
</body>
</html>

Hasilnya akan terlihat seperti di bawah ini:

Dengan menuliskan style sebagai sebuah Class, maka setiap style dapat dipanggil melalui atribut class pada Tag manapun yang dapat memuat class tersebut. Class tersebut dipanggil pada banyak Tag tanpa ada batasan dengan menuliskan class=”…namastyle…”. Pnulisan format style cukup satu kali saja, yaitu pada Tag <style> di bawah Tag <head>.

3. External Style Sheet

External style sheet digunakan untuk membuat format style pada beberapa dokumen HTML  sekaligus, dan hanya satu dokumen stylesheet yang disimpan dalam format file .css

Keuntungannya tentu saja lebih praktis jika kita menuliskan satu style yang akan dipergunakan secara seragam pada halaman-halaman HTML yang lain. Kenyataannya, pada sebuah website selalu menggunakan style yang seragam. Dengan menuliskan stylesheet pada satu file tersendiri, maka apabila di kemudian hari kita ingin mengubah style, cukup file stylesheet-nya saja yang kita ubah.

Contoh penggunaan Style Sheet pada halaman HTML:

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<body>
<b>
INI ADALAH TULISAN DENGAN STYLE “body”.</b>
Tulisan ini berwarna biru dengan latar belakang warna biru muda.<br>
Berikut ini adalah contoh penggunaan style sheet pada paragraf:
<p class=”merah”><b>INI ADALAH PARAGRAF YANG DIBERI STYLE CLASS “merah”.</b>
Perhatikan bahwa teks paragraf ini berwarna merah,
diberi jarak margin sebelah kiri sebesar 20 piksel,
margin sebelah kanan sebesar 20 piksel,
dan diberi latar belakang warna pink.</p>
<p class=”hijau”><b>INI ADALAH PARAGRAF YANG DIBERI STYLE CLASS “hijau”.</b>
Perhatikan bahwa teks paragraf ini berwarna hijau,
diberi jarak margin sebelah kiri sebesar 20 piksel,
margin sebelah kanan sebesar 20 piksel,
dan diberi latar belakang warna hijau muda.</p>
</body>
</html>

Di bagian lain, kita menuliskan isi file terpisah dengan nama persis sama dengan yang ditautkan oleh file HTML sebelumnya, yaitu: mystyle.css. Pada file CSS inilah semua format style dituliskan. Perlu diketahui pula bahwa file ini dapat ditulis dengan notepad dan di-Save As sebagai file dengan extensi .css (Cascade Style Sheet). Isinya adalah sebagai berikut:

body { color:blue; background-color:lightblue}
.merah { color:red; margin-left: 20px; margin-right: 20px; background-color: pink}
.hijau { color:green; margin-left: 20px; margin-right: 20px; background-color: lightgreen}

Hasilnya akan persis sama dengan sebelumnya. Namun, dengan cara menuliskannya dalam satu file tersendiri, memungkinkan class style yang disebutkan untuk bisa dipanggil oleh banyak file HTML. Asalkan pada setiap file HTML tersebut di bagian Tag <head> disebutkan <link rel=”stylesheet” type=”text/css” href=”namafile.css”>.

Kita lanjutkan di topik bahasan selanjutnya. ■

Membuat Website Itu Mudah (Bagian V – Warna & Font)

Warna adalah salah satu elemen yang bisa membuat halaman website menjadi lebih menarik. Namun, penerapannya memerlukan pemahaman tersendiri. Sebaiknya kita memiliki pengetahuan mengenai warna dan efek psikologis yang ditimbulkan oleh adanya warna. Hal ini dapat mempermudah kita dalam memilih warna.

Warna dalam konteks HTML, bisa diterapkan dalam berbagai elemen, seperti warna latar belakang halaman, warna teks, tabel, dsb. Warna dalam hal ini merupakan atribut dari elemen-elemen tersebut. Warna juga memiliki beberapa sistem penulisan, dalam HTML ada dua jenis sistem penulisan yang dapat digunakan, yakni dengan menyebutkan nama warnanya (dalam bahasa Inggris), atau dengan menggunakan kode warna.

Contoh penerapan warna pada halaman HTML adalah sebagai berikut:

<html>
<body bgcolor=”red” >
ISI HALAMAN HTML
</body>
</html>

bgcolor dalam kode di atas merupakan property atau atribut yang dimiliki oleh Tag <body>. Sebagai akibatnya, kita dapat melihat halaman dengan latar belakang berwarna merah.

Dengan demikian, kita bisa menampilkan halaman website dengan warna yang kita inginkan. Caranya adalah, cukup tuliskan atribut warna pada Tag <body> dan sebutkan warnanya di bawah atribut bgcolor. Contohnya: <body bgcolor=”yellow”> akan menghasilkan warna kuning, <body bgcolor=”green”> akan menghasilkan warna hijau, <body bgcolor=”blue”> akan menghasilkan warna biru, dst.

Berikut ini adalah daftar warna yang dapat dituliskan sebagai atribut:

Snow Lightgoldenrodyellow Honeydew Lightslategray
Ivory Palegoldenrod Powderblue Slategray
Beige Khaki Lightblue Darkslategray
Papayawhip Goldenrod Skyblue Black
Blanchedalmond Darkgoldenrod Lightskyblue Dimgray
Bisque Darkkhaki Deepskyblue Gray
Antiquewhite Greenyellow Dodgerblue Darkgray
Oldlace Lawngreen Blue Silver
Floralwhite Chartreuse Medium Lightgrey
Linen Lime Darkblue Gainsboro
Moccasin Limegreen Navy Ghostwhite
Navajowhite Yellowgreen Midnightblue Whitesmoke
Wheat Olivedrab Royalblue White
Peachpuff Olive Cornflowerblue
Burlywood Darkolivegreen Lightsteelblue
Tan Darkgreen Steelblue
Sandybrown Green Darkslateblue
Peru Forestgreen Slateblue
Chocolate Seagreen Mediumslateblue
Sienna Mediumseagreen Mediumpurple
Saddlebrown Mediumspringgreen Blueviolet
Darkred Springgreen Indigo
Maroon Palegreen Darkmagenta
Brown Lightgreen Purple
Firebrick Darkseagreen Darkviolet
Indianred Mediumaquamarine Darkorchid
Rosybrown Aquamarine Mediumorchid
Darksalmon Paleturquoise Thistle
Lightsalmon Aqua Lavenderblush
Salmon Turquoise Lavender
Lightcoral Mediumturquoise Plum
Crimson Darkturquoise Violet
Red Lightseagreen Magenta
Orangered Darkcyan Fuchsia
Tomato Teal Mediumvioletred
Coral Cadetblue Palevioletred
Darkorange Cyan Deeppink
Gold Lightcyan Hotpink
Yellow Aliceblue Pink
Lemonchiffon Ghostwhite Lightpink
Cornsilk Azure Mistyrose
Lightyellow Mintcream Seashell

Warna-warna dengan nama standar tersebut di atas tentu saja sangat terbatas jumlahnya, namun dapat dengan cepat kita ingat karena memiliki arti sesuai dengan namanya. Lebih mudah mengenali dan menghafal warna Turquoise daripada mengingat kode warna #40E0D0 bukan? Dengan demikian kita dapat mengingat warna-warna favorit kita dengan mengenali nama standarnya dalam bahasa Inggris.

Sebenarnya jumlah warna yang dapat dipergunakan pada website sangatlah banyak. Ribuan warna dapat dipergunakan dengan kode warna yang sesuai. Semua warna dapat ditampilkan dengan menggunakan kode warna 6 angka. Sebagai contoh untuk warna Hitam kita dapat menuliskan kode warna #000000, Putih=#FFFFFF, Merah=#FF0000, Hijau=#00FF00, Biru=#0000FF.

Cobalah menuliskan html dengan kode warna yang berbeda-beda menggunakan 6 angka hexadesimal:

<html>
<body bgcolor=”#123456″ >
ISI HALAMAN HTML
</body>
</html>

Hasilnya akan terlihat pada browser body website ditampilkan dengan warna yang berbeda-beda pula.

Kode Warna RGB

Warna yang ditampilkan dengan menggunakan kode warna jumlahnya adalah 256 pangkat 3, atau sama dengan 16.777.216 warna. Jumlah warna sebanyak ini tentu tidak dapat diwakili dengan nama, melainkan menggunakan kode yang terdiri atas 3 komponen warna utama, yakni Merah, Hijau, Biru (RGB = Red, Green, Blue). Masing-masing komponen warna terdiri atas 256 nuansa warna yang perbedaannya sangat kecil. Ketiga komponen ini bersama-sama membentuk warna sebagai percampuran antara ketiganya. Kode untuk warna merah adalah pada dua angka di depan, kode warna hijau pada dua angka berikutnya, dan kode warna biru pada dua angka terakhir. Masing-masing kode warna ditulis dalam kode hexadesimal, dari 00, 01, 02, 03, sampai dengan FA, FB, FC, FD, FE, FF. Oleh karena itu, warna Merah dapat ditulis dengan kode #FF0000, warna Hijau dapat ditulis dengan kode #00FF00, warna Biru dapat ditulis dengan kode #0000FF. Warna-warna lain yang dibentuk sebagai gabungan dari dua atau tiga komponen tadi harus ditulis dengan melibatkan dua atau tiga komponen warna sekaligus, contohnya warna kuning adalah gabungan warna merah dan hijau, dapat ditulis dengan kode #FFFF00, Cyan adalah gabungan biru dan hijau, dapat ditulis dengan kode #00FFFF, Magenta adalah gabungan merah dan biru, dapat ditulis dengan kode #FF00FF. Warna grayscale dari hitam sampai putih dapat ditulis dengan melibatkan tiga komponen warna dengan kode yang sama, misalnya hitam #000000, abu-abu tua #333333, abu-abu #666666, abu-abu muda #999999, abu-abu terang #CCCCCC, putih #FFFFFF.

Semua Tag HTML yang memiliki atribut warna dapat ditulis dengan menggunakan kode warna di atas. Atribut bgcolor pada Tag <body>, atribut color pada Tag <font>, dan pada Tag <table>.

Font untuk Pengaturan Huruf

Untuk pengaturan atribut pada huruf, dapat menggunakan Tag <font> dan ditutup dengan </font>. Contohnya, untuk font jenis Arial, ukuran 3, warna merah, dapat ditulis seperti di bawah ini:

<html>
<body bgcolor=”#CCCCCC” >
Contoh penggunaan tag font:<br>
<font face=”Arial” color=”#FF0000″ size=”3″>
<b>Tulisan ini menggunakan font Arial,
warna merah, ukuran 3.</b></font>
</body>
</html>

Hasilnya ditampilkan sebagai berikut:

Perlu diketahui bahwa font standar yang dipergunakan di internet pada komputer PC adalah: Arial, Times New Roman, Courier New, Georgia, Verdana, dan Geneva. Sedangkan ukuran huruf menggunakan ukuran standar (kode 1, 2, 3, dst), perbesaran (kode +1, +2, +3, dst, larger atau large, x-large, xx-large), dan perkecilan (kode -1, -2, -3, dst, smaller atau small, x-small, xx-small).

Nah, dengan menggunakan Tag HTML yang diketahui, cobalah untuk membuat halaman sebagai berikut:

Font dan Warna pada kenyataannya memegang peran yang cukup penting agar website bisa tampil menarik. Penggunaan font yang berbeda memberikan penekanan bahwa sebuah bagian berbeda dari bagian yang lainnya tanpa harus ditempatkan secara terpisah. Demikian halnya dengan warna, dipergunakan untuk memberikan penekanan yang berbeda pula, semakin tajam dan berani maka akan semakin menjadi pusat perhatian. Namun, harus diperhatikan bahwa semua warna yang dipergunakan haruslah diatur agar tidak kacau balau. Pengaturan warna pada sebuah layout halaman tentu harus memperhatikan seluruh aspek secara baik. Sebagai contoh tata warna pada sebuah website sport tentu akan sangat berbeda dengan website remaja perempuan misalnya. Keserasian warna dapat dipelajari dari kesan yang ingin ditimbulkan pada sebuah tampilan. Gunakan Color Harmony untuk menghasilkan perpaduan yang harmonis.

Kita lanjutkan di topik bahasan selanjutnya. ■

Membuat Website Itu Mudah (Bagian IV – List)

Paragraf selain memiliki bentuk seperti biasanya yang berisikan teks panjang, juga dapat berbentuk daftar. Paragraf dalam bentuk susunan yang diawali dengan nomor, angka, ataupun tanda (bullet) dinamakan dengan List. List pada HTML dimaksudkan untuk membuat daftar yang tersusun untuk berbagai keperluan. List dibedakan atas 3 jenis, yakni Unordered List, Ordered List, dan Definition List.

Unordered List

Unordered List adalah paragraf dalam bentuk daftar yang tersusun dalam bentuk bullet, biasanya berbentuk lingkaran kecil.. Ditandai dengan Tag <UL> dan ditutup dengan </UL>. Unordered List dipergunakan untuk memperlihatkan daftar satu persatu. Setiap Item dalam Unordered List diberi Tag <LI> dan ditutup dengan </LI>. Contohnya adalah sebagai berikut:

<html>
<body>
Topik-topik yang dibahas dalam HTML di antaranya adalah:
<UL>
<LI>Text Formating</LI>
<LI>Paragraf</LI>
<LI>List</LI>
<LI>Warna & Teks Berjalan </LI>
<LI>Link</LI>
<LI>Font Style </LI>
<LI>Image</LI>
<LI>Frame</LI>
<LI>Table</LI>
<LI>Form</LI>
<LI>Special Character </LI>
</UL>
</body>
</html>

Hasilnya akan terlihat seperti ini:

Membuat website itu mudah

Bentuk lain dari bullet dapat dipilih jenis circle / lingkaran, disc / lingkaran hitam, dan square / kotak hitam, dengan menambahkan properti “type” pada Tag <UL>. Misalnya: <UL type=”circle”> atau <UL type=”disc”> atau <UL type=”square”>.

Ordered List

Ordered List adalah paragraf dalam bentuk daftar yang tersusun menurut abjad atau angka. Ditandai dengan Tag <OL> dan ditutup dengan </OL>. Ordered List dipergunakan untuk menjabarkan sub bagian satu demi satu. Setiap Item yang menjadi bagian dari List diberi Tag <LI> dan ditutup dengan </LI>. Contohnya adalah sebagai berikut:

<html>
<body>

Agar dapat membuat website yang baik,
kita harus memiliki pengetahuan dan menguasai beberapa software,
di antaranya:
<OL>
<LI>HTML</LI>
<LI>Dreamweaver</LI>
<LI>Photoshop</LI>
<LI>Search Engine Optimization</LI>
<LI>Internet Marketing</LI>
</OL>
</body>
</html>

Hasilnya terlihat seperti di bawah ini:

Membuat website itu mudah

Bentuk lain dapat dipilih dari jenis angka Romawi, angka Romawi kecil, huruf besar, dan huruf kecil dengan menambahkan properti “type” pada Tag <OL>. Misalnya: <OL type=”1″> atau <OL type=”I”> atau <OL type=”i”> atau <OL type=”A”> atau <OL type=”a”>.

List Bersarang

List Bersarang atau Nested List diperlukan ketika kita ingin menjabarkan sub item dari item yang ada dalam List. List Bersarang dapat dipergunakan baik pada Unordered List maupun Ordered List. Contohnya adalah sebagai berikut:

<html>
<body>
Untuk dapat menguasai web dinamis kita harus memiliki pengetahuan,
pemahaman dan menguasai software, antara lain:
<OL>
<LI>HTML</LI>
<LI>Web Design </LI>
<UL>
<LI>Microsoft Frontpage</LI>
<LI>Adobe Dreamweaver</LI>
</UL>
<LI>Image Processing</LI>
<UL>
<LI>Image Editing</LI>
<UL>
<LI>Adobe Photoshop</LI>
<LI>Image Editing</LI>
</UL>
<LI>Web Image Optimization</LI>
<UL>
<LI>Adobe ImageReady</LI>
</UL>
</UL>
<LI>Database</LI>
<LI>Client & Server Side Programming</LI>
</OL>
</body>
</html>

Yang hasilnya akan terlihat sebagai berikut:

Membuat website itu mudah

Definition List

Definition List dipergunakan untuk membuat keterangan mengenai suatu istilah. Daftar istilah menjadi item-item yang dipisahkan dari keterangannya, sedangkan paragraf yang menerangkan Definition List diberi menjorok ke dalam (indent). Definition List ditandai dengan Tag <DL> dan ditutup dengan </DL>. Item-item istilah diberi Tag <DT> atau Definition Type, sedangkan penjelasannya diberi Tag <DD> atau Definition Definition. Contoh:

<html>
<body>
Berikut ini adalah Daftar Istilah yang dipergunakan dalam buku ini:
<DL>
<DT><b>WWW (World Wide Web)</b></DT>
<DD>Merupakan sebuah sistem dimana informasi (yang berupa teks, gambar, suara, dan lain-lain)
dipresentasikan dalam bentuk <i>hypertext</i> dan dapat diakses oleh sebuah peraga WWW
(yang sering disebut sebagai <u>browser</u>).
<DT><b>HTML ( Hypertext Markup Language)</b></DT>
<DD>Sebuah standar dalam penulisan website, di mana kode-kodenya dituliskan dalam bentuk Tag.
File HTML disimpan di server internet dan kemudian dibaca, diterjemahkan dan ditampilkan oleh
Internet Browser.</DD>
</DL>
</body>
</html>

Hasilnya adalah sebagai berikut:

Membuat website itu mudah

Sampai di sini topik bahasan mengenai Paragraf dalam HTML, selanjutnya kita dapat mulai membahas mengenai Warna dan Font. ■

Membuat Website Itu Mudah (Bagian III – Paragraf)

HTML (Hypertext Markup Language) sebaiknya ditulis dengan menggunakan format standar dokumen HTML yang berlaku secara umum. Hal ini dimaksudkan agar tidak terjadi kesalahan pada Internet Browser dalam menerjemahkan dokumen HTML mengingat tidak semua website ditulis dengan format HTML

Standar penulisan dokumen HTML adalah sebagai berikut:

<html>
<head>
<title>JUDUL HALAMAN HTML</title>
<head>
<body>

ISI HALAMAN HTML
</body>
</html>

Perlu diketahui bahwa penulisan kode html tidak case sensitive, sehingga tidak ada perbedaan antara penggunaan huruf besar dengan huruf kecil. Tag-tag HTML bisa ditulis dengan huruf besar maupun dengan huruf kecil.

Perhatikan bahwa standar dokumen HTML terdiri atas 3 blok utama, yakni:

1. Blok HTML

Sebuah dokumen HTML diawali dengan penulisan Tag <HTML> dan ditutup dengan Tag </HTML>. Hal ini dimaksudkan agar Browser mengenali dokumen tersebut ditulis dengan format HTML. Kode-kode perintah yang ditempatkan di antara pembuka dan penutup Tag HTML tersebut akan diperlakukan oleh Browser sebagai kode-kode perintah HTML.

2. Blok HEAD

Diawali dengan penulisan Tag <HEAD> dan ditutup dengan Tag </HEAD>. Di dalam blok HEAD ini dituliskan informasi mengenai dokumen yang kita buat, misalnya mengenai Judul Halaman HTML, Pembuat, Tanggal dibuat, Bahasa yang dipergunakan, Kata Kunci, Deskripsi mengenai halaman ini, dll.

3. Blok BODY

Diawali dengan penulisan Tag <BODY> dan ditutup dengan Tag </BODY>. Di dalam blok BODY ini dituliskan perintah-perintah dan segala macam hal yang nanti akan dibaca dan ditampilkan oleh Internet Browser.

Paragraf

Format Paragraf ditandai dengan Tag <p> dan ditutup dengan </p>. Dengan menempatkan tulisan ke dalam paragraf, maka kita dapat mengatur perataan tulisan: Rata Kiri <p align=”left”>, Rata Tengah <p align=”center”>, Rata Kanan <p align=”right”>, atau Rata Kiri Kanan <p align=”justify”>. Secara default tulisan otomatis rata kiri, namun jika ingin memastikannya kita dapat menuliskan Tag Paragraf <p align=”left”>. Khusus untuk rata tengah, dapat juga digunakan Tag <center>, meskipun penggunaannya untuk teks biasa, bukan untuk format paragraf. Perbedaannya adalah, dengan menggunakan Tag Paragraf maka akan terdapat satu baris kosong sebagai jarak antara paragraf dengan tulisan lainnya.

Contoh penggunaan paragraf adalah sebagai berikut:

<html>
<head>
<title>KURSUS PRIVAT – Kursus Profesional Di Rumah Anda</title>
</head>
<body><center><h1>www.kursusprivat.com</h1>
<b>Belajar efektif dalam waktu yang singkat </b></center>
<hr>
<p align=”right”>Jakarta, 28 September 2008</p>
<p align=”left”>Belajar aplikasi komputer yang menarik sangatlah menyenangkan,
apalagi kalau bisa dilakukan di rumah sendiri. Kini Anda tidak perlu repot-repot
datang ke tempat kursus, sebab di kota Anda telah hadir <strong>www.kursusprivat.com
</strong>yang akan melayani kebutuhan Anda dalam mempelajari software-software
yang menarik.</p>
<p align=”justify”>Berbagai aplikasi komputer dapat Anda pelajari langsung di rumah
Anda, sehingga Anda tahu pasti hasilnya sesuai dengan yang Anda inginkan. Waktu
Anda tidak akan terganggu disebabkan oleh jarak dan waktu tempuh ke tempat kursus
sudah tidak ada lagi. Efektivitas pelatihan juga menjadi maksimal dengan penerapan pola
satu guru untuk satu murid. </p>
<hr>
<p align=”center”><b>copyright (C)2008, http://www.kursusprivat.com</b></p&gt;
</body>
</html>

Pada Internet Browser akan terlihat seperti ini :

Membuat website itu mudah

Dengan menggunakan Tag Paragraf yang berbeda, maka terlihat perataan tulisan yang berbeda pula. Di sini penulis menggunakan tambahan 2 buah Tag <hr> yang ditampilkan sebagai Garis Horizontal. Penggunaan Tag <hr> biasanya untuk memisahkan bagian-bagian pada tulisan.

Paragraf Preformat

Paragraf Preformat <pre> adalah paragraf yang tidak akan dilakukan formating, sehingga akan ditampilkan apa adanya. Hal ini akan menyebabkan penulisan spasi beberapa kali akan terlihat, begitu pula dengan pergantian baris tanpa menggunakan <br>. Paragraf preformat terutama diperlukan untuk menuliskan kode program.

<html>
<body>
Paragraf Preformat diperlukan untuk menuliskan kode program.
Contoh:
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>

Hasilnya akan terlihat seperti ini :

Membuat website itu mudah

Paragraf Kutipan

Ada dua jenis paragraf kutipan atau quote, yaitu paragraf kutipan panjang <blockquote> dan paragraf kutipan pendek <q>. Keduanya dipakai untuk memisahkan tulisan kutipan dari tulisan lainnya.

Contoh:

<html>
<body>
Seperti yang ditulis di dalam bukunya sebagai berikut:<blockquote><b>World Wide Web</b> (WWW) merupakan sebuah sistem dimana informasi (yang berupa teks, gambar, suara, dan lain-lain) dipresentasikan dalam bentuk <i>hypertext</i> dan dapat diakses oleh sebuah peraga WWW (yang sering disebut sebagai <u>browser</u>).</blockquote>
Seperti yang dikatakan olehnya: <q><b>WWW</b> adalah singkatan dari <b>World Wide Web.</b></q>
</body>
</html>

Hasilnya akan terlihat seperti ini:

Membuat website itu mudah

Masih ada bentuk paragraf yang lain, yaitu List. Terdiri dari Ordered List, Unordered List, dan Definition List. Kita lanjutkan di topik bahasan selanjutnya. ■