SMK INFORMATIKA PESAT: Materi Produktif

Pengenalan HTML

Pengertian singkat tentang HTML

HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti texs, grafik, animasi link maupun audio-video.

Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Exsplorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.

HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi anda boleh menyimpan file dokumen HTML dengan extention “.htm” atau “.html”.

Untuk mulai belajar HTML kita akan menggunakan Texs Editor, Notepad. Di bawah ini adalah contoh suatu dokumen HTML yang sangat sederhana. Buka Notepad, silahkan mulai dengan mengetikkan (copy/paste) texs di bawah ini:

<html>
<head>
<title>Titel Websiteku</title>
</head>
<body>
Ini adalah dokumen HTML pertamaku
</body>
</html>
Preview

Simpan file tersebut dengan pilihan “save as” ke C:\My Documents dengan nama “websiteku.htm.” Kemudian buka browser dari menu File, klik Open dan tujukan ke C:\My Documents\websiteku.htm “klik Ok” maka halaman website pertama anda akan ditampilkan.
*Lakukan hal yang sama untuk contoh-contoh selanjutnya.

Perintah didalam dokumen HTML terdiri dari berbagai struktur penyusun seperti tag, elemen, atribut dan nilai. Tag terdiri dari lambang-lambang khusus seperti: ” <”, ” >” dan “/”, untuk menuliskannya di dalam dokumen HTML dimulai dengan tag pembuka ” <…>”dan diakhiri dengan tag penutup ” </…>”. Kemudian di dalam tag tersebut terdapat teks seperti contoh diatas :html, head, title,body dan yang lainnya ini disebut dengan Elemen HTML.

Elemen HTML kemudian ada yang memiliki atribut dan nilai tertentu, seperti contoh untuk membuat warna latar belakang (background): <body bgcolor=”0000ff”>, body merupakan elemen, bgcolor adalah atribut dan 0000ff merupakan nilai (value).

Elemen HTML mempunyai tiga hal penting yaitu: tag pembuka, isi, dan tag penutup. Sebagai contoh: Elemen html mempunyai tag pembuka ” <html>” dan tag penutup ” </html>” dan yang berada diantaranya merupakan isi dari elemen html. Untuk menuliskan Elemen HTML bisa menggunakan huruf besar maupun huruf kecil. Contoh: <HTML>, <HtMl>, <HTml>, <html>, semuanya adalah sama.

Tag Dasar HTML

Komponen dasar dari suatu dokumen HTML terdiri dari tag elemen HTML, HEAD dan BODY. Berikut ini adalah penjelasan dari Tag Elemen tersebut:

<html>
<head>
<title>Disini titel websiteku</title>
</head>
<body>
Disini adalah konten yang tampil di browser
</body>
</html>
Preview

Tag pertama pada dokumen HTML diatas adalah: ” <html>” tag ini merupakan awal dari suatu dokumen HTML, dan tag ” </html>” merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag <html>…</html>.

Kemudian tag ” <head>…</head>” (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Selain Title informasi di dalam header ini nantinya tidak akan di tampilkan di web browser.

Tag berikutnya adalah ” <title>…</title>” merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser. Sebagai contoh sewaktu anda membuka file contoh diatas perhatikan akan muncul tulisan “Disini titel websiteku”.

Tag “<body>…</body>” merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa texs, grafik, link, animasi maupun audio-video (multimedia).

Format Font HTML

Tag HTML untuk font adalah <font>…</font>, dengan tag ini kita bisa menentukan jenis font (face), warna (color), dan ukuran (size), untuk lebih jelasnya mari kita perhatikan contoh berikut ini:

<html>
<head></head>
<body>
Untuk membuat jenis font (face):
<h1><font face=”Verdana”>Judul dengan font Verdana</font></h1>
<p><font face=”Times”>Konten dengan font Times</font></p>
Untuk membuat ukuran (size):
<h1><font size=”5″>Judul dengan size 5</font></h1>
<p><font size=”3″>Konten dengan size 3</font></p>
Untuk membuat warna font (color):
<h1><font color=”blue”>Judul dengan warna biru</font></h1>
<p><font color=”red”>Konten dengan warna merah</font></p>
Contoh komplit untuk membuat jenis font (face),size dan color:
<h1><font face=”Verdana” size=”4″ color=”green”>Judulnya Tentang Font</font></h1>
<p><font face=”Arial” size=”3″ color=”#660000″>Ini adalah contoh tulisan dengan <i>pengaturan font</i> yang menggunakan<br>
tag HTML elemen <b>font</b> dengan atribut face, size dan color…</font></p>
</body>
</html>
Preview
Berikut adalah sebagai referensi bagi anda untuk memanipulasi atribut face, color dan size:
Atribut
face=”Jenis font yang digunakan”, contoh: face=”Tahoma”
size=”Ukuran dari font (1-7)”, contoh: size=”3″
size=”Memperbesar ukuran font”, contoh: size=”+1″
size=”Memperkecil ukuran font”, contoh: size=”-1″
color=”Warna dari font”, contoh: color=”blue”
color=”Warna dari font”, contoh: color=”#FF0000″

Sesuai dengan recomendasi dari World Web Consortium (W3C), Untuk HTML 4.0 keatas, tag <font> tidak dipergunakan lagi, sebagai gantinya dibuat tag <style> atau disebut dengan Cassading Style Sheets (CSS). Dengan CSS penggunaanya akan lebih kompleks dan lebih luas lagi karena dapat dikombinasikan dengan tag elemen-elemen lainnya di dalam dokumen HTML. Berikut adalah contoh penggunaan tag style sheets:

<html>
<head></head>
<body>
Untuk membuat jenis font (face):
<h1 style=”font-family:verdana”>Judul Menggunakan font verdana</h1>
<p style=”font-family:tahoma”>Konten menggunakan font tahoma</p>
Untuk membuat ukuran (size):
<h1 style=”font-size:150%”>Judul dengan ukuran 150%</h1>
<p style=”font-size:80%”>Konten dengan ukuran 80%</p>
Untuk membuat warna font (color):
<h1 style=”color:blue”>Judul dengan warna Biru</h1>
<p style=”color:red”>Konten dengan warna merah</p>
Contoh komplit untuk membuat jenis font (face),size dan color:
<p style=”font-family:verdana;font-size:80%;color:green”>
Ini adalah contoh tulisan pengaturan font dengan <i>Cassading Style Sheets</i> (CSS) yang<br>
menggunakan tag HTML elemen <b>style:</b> font-family, font-size dan color…</p>
</body>
</html>
Preview
Untuk mengetahui lebih lanjut tentang CSS, nanti akan dibuat tutorial khusus untuk membahas hal ini.

Format text HTML

Untuk menulis biasanya ada paragraf dan baris baru, lantas bagaiman cara menuliskannya di dokumen HTML?. Dari contoh yang sudah kita buat sebelumnya, coba tambahkan dengan tag-tag berikut ini:

<html>
<head>
<title>Selamat Datang di Websiteku</title>
</head>
<body>
Ini adalah halaman HTML pertamaku.
<p>Aku sedang membuat paragraf dan ini contohnya.</p>
<p>Ini contoh paragraf yang lainnya.</p>
<p>Ini juga paragraf mm…tapi de-<br>
ngan baris baru.<br>
Ini baris baru yang lain.</p>
</body>
</html>
Preview

Untuk membuat suatu paragraf, tag elemennya adalah <p>…</p>, dan untuk baris baru adalah <br>, perlu diketahui bahwa sebagian tag elemen HTML tidak memerlukan tag penutup, sebagai contoh adalah <br> ada juga <hr>, apa itu <hr>?, coba lanjutkan lagi dengan contoh berikut ini:

<html>
<head>
<title>Selamat Datang di Websiteku</title>
</head>
<body>
<hr>
<h1>Ini adalah halaman HTML pertamaku.</h1>
Dikerjakan oleh: <!– Tolong isikan dengan nama anda –>
<hr>
<p>Aku sedang membuat paragraf dan ini contohnya.</p>
<p>Ini contoh paragraf yang lainnya.</p>
<p>Ini juga paragraf mm…tapi de-<br>
ngan baris baru.<br>
Ini baris baru yang lain.</p>
</body>
</html>
Preview

Nah..udah tau kan apa itu <hr>. Garis Horizontal <hr> juga tidak menggunakan tag penutup. Kemudian ada <h1>…</h1> disebut dengan Heading, merupakan ukuran teks yang biasa di pakai untuk judul, bab, maupun sub-bab lainnya. Ukurannya ada 6 jenis mulai dari <h1> sampai <h6>, ukuran yang paling besar adalah h1 dan yang terkecil adalah h6.

Selanjutnya tag <!–…–> adalah Comments digunakan untuk memasukkan (menyisipkan) suatu komentar di dalam HTML. Suatu comments akan diabaikasn oleh browser. Kamu dapat menggunakan komentar untuk menjelaskan sesuatu hal.
Dibawah ini adalah contoh format teks yang sering digunakan di dalam dokumen HTML :
<html>
<head></head>
<body>
<hr>
<h1>Ini adalah halaman HTML pertamaku.</h1>
Dikerjakan oleh: <!– Tolong isikan dengan nama anda –>
<hr>
<p>Aku sedang mempelajari format-format teks.<br>
Contoh-contohnya adalah sebagai berikut:</p>
<p>Teks Normal<br>
<tt>Teks mesin ketik</tt><br>
<b>Teks tebal (bold)</b><br>
<strong>Teks tebal dengan perintah Strong</strong><br>
<i>Teks dengan italic (miring)</i><br>
<em>Teks miring dengan perintah Emphasized</em><br>
<u>Teks bergaris bawah (underline)</u><br>
<strike>Teks tercoret (strike)</strike><br>
<big>Teks lebih besar dari normal</big><br>
<small>Teks lebih kecil dari normal</small><br>
Teks menggunakan Subscript: Molekul Air adalah H<sub>2</sub>O<br>
Teks menggunakan Superscript: Hasil dari 10<sup>2</sup>=100<br></p>
</body>
</html>

Preview
Kemudian untuk menampilkan teks sesuai dengan yang tertulis kita gunakan tag <pre>…</pre>, misalnya jika anda menuliskan syair sebuah lagu atau puisi:

<html>
<body>
<pre>
<b>PUITUIS ASA</b>
Hari ini…
Aku sedang belajar…
Belajar tentang HTML.
Sulit ‘ntuk dimengerti,
Karena banyaknya teks-teks aneh.
Tapi biarlah…
Akan kucoba…
Sampai pingsan.
</pre>
</body>
</html>
Preview

Hyperlink HTML

Hyperlink digunakan untuk menghubungkan antar halaman dokumen di dalam web. Tag HTML Hyperlink biasa disebut dengan anchor (a) kemudian diikuti dengan href sebagai alamat tujuan dari link tersebut. Berikut kita akan membuat suatu Hyperlink ke suatu alamat url:

<html>
<head></head>
<body>
<p>Aku sekarang sedang membuat hyperlink</p>
Jika anda ingin mengunjungi Microsoft
<a href=”http://www.microsoft.com/”>Klik disini</a><br>
<a href=”http://www.yahoo.com/”>Link ini</a> akan membawa anda ke Yahoo.com
<p>Untuk membuat hyperlink url agar dibuka pada jendela browser yang baru:<p>
<a href=”http://www.mp3.com/”target=”_blank”>Website Musik</a>
<p>Agar hyperlink tidak bergaris bawah:<p>
<a href=”http://www.mp3.com/”target=”_blank” style=”text-decoration: none”>Website Musik</a>
<p>Hyperlink ke suatu halaman tertentu dalam web:<p>
<!–dengan catatan anda harus tau nama halaman tujuan tersebut–>
<a href=”http://wordpress.htmlcssguides.com/belajar-css/”>Link ini</a> akan membawa anda ke halaman belajar css.
</body>
</html>
Preview

Untuk membuat hyperlink dengan menggunakan gambar (image). Pastikan gambar tersebut berada pada folder yang sama dengan dokumen html anda dan harus tahu nama dan extentionnya, kemudian ganti ke atribut yang bertuliskan scr, misalkan jika nama gambar tersebut adalah yahoo.gif, maka :

Img merupakan atribut untuk suatu image (gambar), border adalah garis yang mengelilingi sisi image, width dan height merupakan lebar dan tinggi dari image. Kreatiflah untuk menganti nilai yang ada diantar tanda “…”sehingga anda akan lebih mengerti. Untuk memposisikan gambar, tambahkan dengan atribut align=”…”, left= kiri, center= tengah dan right= kanan.

Sekarang coba geser mouse anda ke gambar di atas, jangan di-klik, perhatikan akan ditampilkan suata tulisan singkat mengenai gambar tesebut, ini disebut dengan screen tips, cara membuatnya adalah menambahkan title pada tag anchor (a) sehingga menjadi:

Agar cepat mengakses internet kita boleh mengatur browser untuk tidak menampilkan image (gambar). Dan semua gambar akan ditampilkan dengan teks alternatif (alt), jika gambar tesebut tidak memiliki alternatif teks maka hanya akan dilambangkan dengan lambang x.

<a href=”http://www.yahoo.com”> <img border=”0″ src=”contoh.jpg” width=”120″ height=”30″ align=”left” alt=”Text Alternatif Yahoo.com”></a>

Background HTML

Dengan menggunakan latar belakang (background) maka website kita akan nampak semakin menarik. Untuk memasukkan latar belakang kita bisa menggunakan pilihan warna maupun grafik (gambar).
Sekarang kita mulai dengan menggunakan pilihan warna:

<html>
<head></head>
<body bgcolor=”#FF99FF”>
<p>Hai.. Saat ini saya sedang belajar membuat latar belakang dengan warna</p>
<p>Kalau anda kurang suka dengan warnanya… ganti aja deh… kode warnanya… </p>
</body>
</html>

Preview
Untuk nilai dari atribut bgcolor diatas anda bisa menggunakan Kode hexadecimal, Nilai RGB atau Nama dari warna tersebut.
Coba anda ganti nilai dari atribut bgcolor dengan contoh dibawah ini:

<body bgcolor=”#FFFF00″>
<body bgcolor=”rgb(250,250,0)”>
<body bgcolor=”yellow”>
Hasilnya akan sama. Ikuti link berikut ini untuk mengetahui Kode Hexadecimal dan Nilai RGB dari suatu warna, tapi maaf untuk nama warnanya cari sendiri aja deh…
Selanjutnya membuat latar belakang dengan grafik atau gambar.
Pertama anda harus punya gambar yang ber-extention .gif atau .jpg yang akan dijadikan background, masukkan (copy) gambar tersebut ke folder tempat file dokumen HTML anda berada, dan harus tahu nama dan perluasan (extention) dari file tersebut, misalkan nama filenya adalah: background.jpg
<html>
<head></head>
<body background=”background.jpg”>
<font color=”blue”><h1 color=”red”>Selamat datang di Websiteku</h1></font><hr color=”#ff0000″ size=”2″>
<p><font face=”Verdana” size=”4″ color=”black”>Hai… Saat ini saya sedang belajar membuat latar belakang dengan gambar,<br>
Biar bagaimanapun anda diwajibkan harus menyukainya…</font></p>
</body>
</html>
Preview
Kemudian latar belakang dapat juga menggunakan gambar yang ada di website orang lain, tapi dengan catatan anda harus sedang terhubung ke internet (online) dan harus tahu alamat url dari gambar tersebut di internet. Untuk mengetahui alamat suatu gambar klik kanan gambar tersebut kemudian pilih properties dan lihat image location, copy alamat tersebut dan ganti ke contoh dibawah ini diawali dari http:
<html>
<head></head>
<body background=”http://i703.photobucket.com/albums/ww40/Jessie4life007/background.jpg”>
<p>Hai.. Saat ini saya sedang belajar membuat latarbelakang dengan menggunakan gambar dari website orang lain! hua ha..ha..ha..</p>
<p>Mudah-mudahan yang punya website ngamuk sekalian deh…siapa takut!!</p>
</body>
</html>
Dalam pelajaran HTML kali ini kita akan mempelajari tentang bagaimana cara menampilkan Favicon di browser.
Favicon adalah sebuah icon image yang berukuran kecil yang ditampilkan di address bar dan tab browser.
Dengan adanya favicon ini memang kelihatan menarik, bahkan kita bisa hafal suatu situs web dengan hanya melihat favicon-nya, jika kita memiliki banyak bookmark di browser kita, maka kita akan melihat beraneka ragam favicon disana.

Lantas bagaimana cara menampilkan favicon tersebut?
Pertama, anda harus memiliki gambar yang ber-ekstension .ico tersebut yang standart ukurannya sekitar 16X16px, program grafik seperti Photoshop atau Corel Draw bisa membuat jenis file ini, namun jika anda ingin yang siap saji anda bisa mendownload dari freefavicon, ratusan favicon menarik dapat anda temukan disana.
Jika anda sudah menemukan yang anda sukai, download dan simpan icon tersebut ke komputer anda dengan nama “favicon.ico”
Selanjutnya agar dokumen html dapat menampilkan icon ini, kita harus menambahkan kode berikut ini di antara tag elemen <head> dan </head>:
<link rel=”shortcut icon” type=”image/ico” href=”favicon.ico”>
Setelah dimasukkan kedalam dokumen html maka akan seperti dibawah ini:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Titel Websiteku</title>
<link rel=”shortcut icon” type=”image/ico” href=”favicon.ico”>
</head>
<body>
<p>Harap tenang… saya sedang belajar tentang favicon</p>
</body>
</html>
Buka Notepad kemudian salin kode diatas dan simpan ke komputer dengan nama “testicon.html” jangan lupa agar menyimpannya di folder yang sama dengan favicon.ico tadi.
Selanjutnya dengan browser buka file “testicon.html” tersebut, maka jika anda melakukannya dengan benar maka favicon tersebut akan tampil di address bar dan tab browser seperti berikut ini.
Preview

Memasukkan kode favicon ke WordPress secara manual.
Caranya adalah dengan memasukkan favicon.ico tersebut ke folder themes favourite kita, kemudian buka file “header.php” dan masukkan kode berikut ini diantara tag elemen <head> dan </head>:
<link rel=”shortcut icon” type=”image/ico” href=”<?php bloginfo(‘template_url’); ?>/favicon.ico” />
Cara ini tidak bisa dilakukan di WordPress.com, karena kita tidak diizinkan untuk mengedit template.

Alat untuk membuat meta tag
Meta tag adalah informasi singkat yang dimasukkan didalam header atau diantara tag elemen <head> dan </head>, untuk menjelaskan sesuatu hal dari sebuah halaman website. Description dan Keywords merupakan meta tag yang sangat penting harus dimasukkan ke halaman website selain titel tentunya karena mesin pencari biasa menggunakan informasi yang ada didalam meta tag ini untuk ditampilkan di halaman hasil pencarian.
Berikut ini adalah alat yang bisa digunakan untuk membuat meta tag, ini tergantung kebutuhan dari website anda jika tidak diperlukan bisa dikosongkan.

Top of Form

Titel	:
		Titel dari website
Description	:
		Deskripsi atau gambaran singkat dari website (max. 200 kata)
Keywords	:
		Kata kunci, bisa hingga 12 kata dengan dibatasai oleh tanda koma
Author	:
		Nama dari pengarang, penulis atau pengelola website
Subject	:
		Hal pokok yang dibahas di dalam website (Cth: Computer, Education dll)
Generator	:
		Program yang digunakan untuk membuat halaman website
Expires	:
		Waktu berakhir (Cth: Mon, 10 May 2009 04:42:18 GMT)
Abstract	:
		Sama seperti description
Copyright	:
		Hak cipta (Cth: 2008 PT Rugi Melulu, atau 2008 www.mydomain.com)
Designer	:
		Perancang dari halaman website
Publisher	:
		Penerbit jika ada
Revisit-after	:
		Waktu dari mesin pencari kembali mengunjungi website (cth: 4, 10, 15 dll).
Language	:	Pilih salah satu Bulgarian Czech Danish German Greek English English-Great Britain English-United States Spanish Spanish-Spain Finnish Croatian Indonesian Italian French French-Quebec French-France Italian Japanese Korean Dutch Norwegian Polish Portuguese Russian Swedish Chinese
		Pilih bahasa yang digunakan
Distribution	:	Pilih salah satu Global Local Intern Use
		Pilih didistribusikan untuk umum, organisasi atau pribadi
Charset	:	Pilih salah satu gb2312 us-ascii iso-8859-1 iso-8859-2 iso-8859-3 iso-8859-4 iso-8859-5 iso-8859-6 iso-8859-7 iso-8859-8 iso-8859-9 iso-2022-jp iso-2022-jp-2 iso-2022-kr shift_jis euc-kr big5 koi8-r ksc_5601 hz-gb-2312 jis_x0208 utf-8 other
		Pilih karakter huruf yang digunakan
Robots	:	Pilih salah satu All None Index No Index Follow No Follow
		Bagaimana mesin pencari melakukan tugasnya di halaman website

Bottom of Form

Posted on May 16th, 2008 in Belajar HTML by: Masim man

Dengan menggunakan gambar untuk tombol Form HTML seperti: submit, search, send dll memang akan kelihatan lebih menarik.
Bagaimana cara membuatnya? ikuti langkah-langkah berikut ini.
Untuk tombol pada Form HTML, kode untuk menuliskannya adalah:
<input type="submit" value="Tombol">
Maka hasilnya adalah seperti berikut:
Untuk menggunakan gambar kita cukup mengubah kodenya menjadi:
<input type="image" src="contoh.jpg">
Dimana src adalah lokasi dan nama dari gambar (image) yang akan kita gunakan.
Untuk membuat gambar, kita bisa menggunakan program grafik seperti Photoshop atau Corel Photopaint atau bisa juga mencarinya di Internet dengan kata kunci free button. BTW, Google search yang dibawah berfungsi lho, kenapa ngak sekalian dicoba?
Gambar tersebut harus berada tepat ditengah dengan dikelilingi oleh kekuatan warna yang sama pada setiap sisinya sehingga akan mudah nantinya untuk menyesuaikan dengan warna latar belakang website kita, berikut adalah contoh sebuah gambar tombol:
Kita akan menggunakan Google Search sebagai contoh dalam pelajaran ini.
Berikut adalah Google Search dengan menggunakan table dan masih menggunakan tombol standar, tulisan yang tebal adalah merupakan input untuk tombol pada form ini:
<form action="http://www.google.com/search" method="get">
<table border="0" cellpadding="2" width="180">
<tr>
<td>
<input type="text" maxlength="30" name="q" size="18">
<input type="hidden" name="hl" value="en">
</td>
<td valign="middle">
<input type=”submit” name=”button” value=”Go”>
</td>
</tr>
</table>
</form>
Hasil dari kode diatas adalah sebagai berikut:
Selanjutnya kita akan memasukkan gambar, agar sesuai dengan warna gambar tadi maka kita harus membuat warna yang sama pada latar belakang tabel atau halaman website, jadi kita harus mengetahui kode dari warna tersebut kemudian masukkan ke “bgcolor” seperti dibawah.
<form action="http://www.google.com/search" method="get">
<table bgcolor="#B0D8E2" border="0" cellpadding="2" width="180">
<tr>
<td>
<input type="text" maxlength="30" name="q" size="18">
<input type="hidden" name="hl" value="en">
</td>
<td valign="middle">
<input type=”image” name=”button” src=”go.jpg”>
</td>
</tr>
</table>
</form>
Tulisan yang tebal merupakan kode yang ditambah dan diubah dari kode sebelummya.
Dan hasil dari Form diatas adalah sebagai berikut:
Jika anda tidak ingin menggunakan table, anda bisa menggunakan kode dibawah ini.
Code HTML:
<div id="google-search">
<form action="http://www.google.com/search" method="get">
<input type="text" maxlength="30" name="q" size="18" />
<input type="hidden" name="hl" value="en" />
<input type="image" name="button" alt="Search" src="go.jpg" />
</form>
</div>
Code CSS:
#google-search {
width: 180px;
background: #B0D8E2;
height: 28px;
margin: 0;
padding: 2px;
}
#google-search .s-text {
float: left;
height: 18px;
margin: 4px;
padding: 0;
border: 1px solid #B0D8E2;
background: #fff;
}
#google-search .s-images {
float: right;
margin: 0;
padding: 0;
Berikut adalah hasilnya:

Tips untuk mengetahui Kode Warna dengan Ms FrontPage

Lebih lanjut mengenai kode warna, untuk mengetahui kode warna dari image, anda bisa menggunakan Ms ProntPage, yang saya pernah coba adalah Ms FrontPage XP Professional, caranya adalah buka Program tersebut kemudian kecilkan jendelanya sehingga anda bisa melihat gambar yang akan anda cari kode warnanya. Kemudian pada tombol untuk mengubah font color, klik More Color:
Maka akan tampil jendela seperti berikut:
Kemudian tekan tombol “Select” dengan alat ini tujukan ke warna gambar yang ingin anda ketahui kode warnanya, jadi tool ini bisa bekerja walaupun diluar dari jendela Ms ProntPage tersebut, asal jangan diluar layar monitor.
Setelah posisinya sudah tepat ke warna yang diinginkan kemudian klik, maka kode dari warna tersebut akan terlihat di “value” seperti contoh gambar diatas adalah: Hex={E8,E6,D7}maka sebagai hasil akhirnya kita cukup ambil angka dan huruf yang ada diantara kurung dan menghapus tanda koma kemudian menambahkan tanda “#” sehingga menjadi: #E8E6D7, dan tinggal memasukkannya ke kode html.
Kalau saya sendiri biasa mencari kode warna tersebut dengan menggunakan CSS editor seperti Top Style Lite, sangat cocok apalagi jika web kita menggunakan CSS.
Posted on May 18th, 2008 in Belajar HTML by: Masim man

Special Characters – Karakter Khusus HTML
Spesial Karakter, kenapa spesial? karena bentuknya memang spesial dan kebanyakan dari karakter tersebut tidak akan kita temukam di keyboard komputer kita, jadi kita harus mengetikkan gabungan dari beberapa karakter di keyboard ke dalam dokumen HTML untuk bisa menampilkan karakter khusus ini di browser.
Misalnya agar browser dapat menampilkan tulisan:
<head>
maka di dalam kode html kita harus mengetikkan:
<head>
Atau jika ingin membuat simbol:
©
maka kita harus mengetikkan:
©
Klik link berikut ini untuk melihat tabel dari Karakter-karakter Khusus (Special Characters), untuk menuliskannya di dalam dokumen html, anda bisa menggunakan “kode nama” maupun “kode angka” hasil dari kedua kode tersebut akan sama.
Spesial karakater ini sangat penting bagi kita yang sering mengetikkan kode-kode HTML, satu hal yang perlu diperhatikan ketika menuliskan kode-kode html yang pasif usahakan agar mengetikkan kode tersebut menggunakan tag elemen:
<code>kode html</code>
untuk menghindari efeknya ke kode-kode html lainnya yang sedang aktif, atau jika ingin lebih clear bisa menggunakan:
<pre><code>kode html</code></pre>
CSS adalah singkatan dari Cascading Style Sheets, yang berfungsi untuk mengontrol tampilan dari sebuah halaman website.
Ada 3 cara untuk memasukkan CSS ke dalam dokumen HTML yaitu:
1. Dengan menambahkan langsung di tag dokumen html, sebagai contoh:
<p style="color:blue">Membuat tulisan warna biru</p>
<p style="font-family:arial;font-size:150%;color:green">Membuat jenis font, ukuran dan warna</p>
<p style="color:yellow;background-color:red;width:60px;text-align: center">Test</p>
<p style="font-style:italic;">Membuat tulisan miring</p>
Maka hasil dari style diatas adalah sebagai berikut:
Membuat tulisan warna biru
Membuat jenis font, ukuran dan warna
Test
Membuat tulisan miring
2. Dengan menaruhnya di dalam header dokumen html.
Sebagai contoh kita akan membuat CSS untuk mengontrol tampilan paragraf di dokumen html, cara penulisannya adalah sebagai berikut:
<style>

</style>
Kemudian kita masukkan style tersebut di antara tag <head> dan </head> :
<html>
<head>
<style>

</style>
</head>
<body>
<p>Saat ini saya sedang belajar CSS</p>
<p>Pengaturan paragraf dengan menggunakan CSS di dalam header dokumen html</p>

<p>Dengan contoh ini, maka setiap paragraf atau yang berada 
diantara <p>dan</p>akan memiliki format yang sama</p>

</body>
</html>
Preview
3. Kemudian yang ketiga adalah dengan membuat file CSS tersendiri yang tespisah dari dokumen html, secara umum yang terakhir ini adalah yang paling sering digunakan. Untuk menghubungkan dokumen html dengan CSS tersebut kita cukup menambahakan yang berikut ini di header dokumen html:
<link rel="stylesheet" href="style.css" type="text/css">
Sehingga di dokumen html akan terlihat seperti berikut ini:
<html>
<head>
<title>Titel websiteku</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
</body>
</html>
Untuk mengetahui lebih lanjut tentang bagaimana CSS mengontrol sebuah halaman website, berikut kita akan membuat sebuah halaman website sederhana yang menggunakan CSS.
Buka Notepad kemudian salin kode berikut, dan simpan file tersebut dengan nama “csstest.html”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel websiteku</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="halaman">
<div id="judul">
<h1>Disini judul websiteku</h1>
<h2>Disini sub-judul websiteku</h2>
</div>
<div id="konten">
<div>
<p>Disini navigasi bagian kiri</p>
</div>
<div>
<p>Disini konten websiteku</p>
</div>
<div>
<p>Disini navigasi bagian kanan</p>
</div>
</div>
<div>
<p>Disini Footer websiteku</p>
</div>
</div>
</body>
</html>
Preview
Yang berada diantara <– dan –> hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya. Sekarang buka file tersebut dengan browser, maka kita akan melihat halaman yang polos dengan tulisan seadanya.
Sekarang salin CCS berikut kemudian simpan ke folder yang sama dengan “csstest.html” dengan nama “style.css”
#halaman {/* "id" dilambangkan dengan "#" */
width: 800px;
margin: 0 auto;/* agar dokumen berada ditengah */
padding: 0 auto;
}
#judul {
width: 100%;
height: 100px;
background: #5F9EA0;
margin: 0;/* pengaturan sisi bagian luar */
padding: 0;/* pengaturan sisi bagian dalam */
}
#konten {
width: 100%;
margin: 0;
padding: 0;
}
.kiri {/* "class" dilambangkan dengan "." */
width: 25%;
height: 300px;
float: left;
background: #ADD8E6;
}
.tengah{
width: 50%;
height: 300px;
float: left;
background: #FDF5E6;
}
.kanan{
width: 25%;
height: 300px;
float: right;
background: #ADD8E6;
}
.footer{
height: 40px;
background: #8FBC8F;
clear: both;
}
.judul {
color: Red;
padding: 10px 0 0 10px; /* penulisan untuk semua sisi: atas kanan bawah kiri */
}
.sub-judul {
color: #ff0;
padding: 0 10px 10px;
}
p {
padding-left: 10px;/* penulisan untuk satu sisi saja */
}
Yang berada diantara /* dan */ hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya.
Sekarang buka file “csstest.html” dengan browser anda.
Preview
Itulah kira-kira secara dasar cara kerja dari CSS untuk mengontrol halaman website.
Untuk melakukan eksperimen lebih lanjut dan untuk mengetahui perintah-perintah CSS lainnya anda bisa mendownload CSS editor TopStyle Lite. Dengan program tersebut buka file CSS diatas kemudian lakukan perubahan-perubahan dan refresh browser untuk melihat hasilnya.