\

Sabtu, 25 Desember 2010

HTML ADALAH


Apakah HTML itu?

HTML adalah singkatan dari Hypertext Markup Language. Terdiri dari sepasang kode yang disisipkan dalam suatu dokumen untuk mengontrol tampilan dokumen di layar monitor oleh Web Browser, seperti Netscape atau Mosaic. Apabila kita akan memandang suatu dokumen di Internet kita harus menggunakan Web Browser dan disana ada fasilitas "View source" untuk melihat kode-kode web page ini. Suatu dokumen berisi kode-kode ini disebut HTML.
Suatu dokumen HTML harus mempunyai formulir yang tepat, sehingga dapat dikenal dan di Interpretasikan dengan tepat oleh perangkat lunak dari Browser.
Dasar-dasar dari Form tersebut adalah sbb:
<HTML>
<HEAD>
<TITLE  > Ketik_Apa_saja_Judulnya < /TITLE>
</HEAD>
<BODY>
Bagian utama dari Isi suatu dokumen atau citra.
</BODY>
</HTML>
Ada dua hal yang anda perhatikan yaitu kode pembuka dan penutup didalam kurung (< >),dan (</ >). Sebagai contoh suatu HTML akan dibuka oleh <HTML> dan ditutup oleh </HTML> dan hal ini adalah keharusan akan tetapi tidak semuanya pakai kode penutup. Editor GeoCities akan membantu pembuatan dasar-dasar struktur dokumen untuk anda.

Warna

Warna, citra sebagai latarbelakang, dan beberapa hal akan dikontrol oleh Tag <BODY>. Jika anda menggunakan Editor GeoCities secara otomatis telah dibuatkan tag <BODY> anda tidak dapat membuat latarbelakang dari citra tapi itu dulu, sekarang GeoCities telah memiliki Editor HTML yang canggih. Anda dapat mengontrol home page yang sedang dibuat termasuk latarbelakang. Informasi dalam page ini akan membantu anda untuk mengembangkan dari pengertian dasar dari HTML.
Untuk mengontrol warna, tag <BODY>ditulis seperti ini: <BODY bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx"> Anda dibolehkan menggunakan seluruh item tersebut (bgcolor, text, link, vlink or alink), atau sebagian. Untuk menset latarbelakang, text, link, visited link, atau alink masukkan kode warna untuk xxxxxx seperti contoh diatas dan berikut ini ada beberapa warna yang dapat anda pergunakan :
  • Putih = FFFFFF
  • Kuning = FFFF66
  • Merah = FF0000
  • Abu-abu = CC9999
  • Biru = 0000FF
  • Hujau = 00FF00
  • Hitam = 000000
  • Terong = CC33FF
  • Biru muda = 00CCFF
Nilai tersebut diatas adalah nilai Hexadecimal, kombinasi warna dari Merah/Hijau/Biru yang menghasilkan warna baru. Penjelasan yang lebih lengkap dari nilai hexadecimal dapat anda lihat di home page ini atau di web lain. Coba converter warna hexadecimal ini dengan menggunakan kombinasi yang proporsional setiap warna dapat diarsipkan. Jika anda menginginkan seperti warna yang anda lihat di home page lain, anda dapat menggunakan "View Source" di browser yang sedang anda gunakan untuk melihat kode dari warna tersebut.
CATATAN: Mulailah dengan menambah tag <BODY BGCOLOR="#ffffaa"> sebagai percobaan pertama dalam hal ini akan anda dapatkan kombinasi warna seperti home page ini. Sekali anda berhasil, tinggal membuat percobaan selanjutnya yang lebih mantap.
Contoh sederhana pemakaian warna utk background :
  • <body bgcolor="#99CC32" link="#0000FF" vlink="#663399"> (Hijau muda)
  • <body bgcolor="#FFFFCC" link="#0000FF" vlink="#663399"> (Kuning muda)
  • <body bgcolor="#CC99CC" link="#0000FF" vlink="#663399"> (Coklat muda)
  • <body bgcolor="663399" text="FFFFFF" link="00CC00" vlink="000000"> (Violet tua)

Garis Horizontal

Anda dapat menyisipkan sebuah garis horizontal (Horizontal Rule) dalam suatu dokumen dengan menyisipkan sebuah tag <HR>. Sebagai defaultnya adalah garis biasa dengan ukuran dan ketebalan yang standard seperti ini:

Mengenai tag ini dikenal dengan Browser modern, dapat dibuat beberapa macam dari tampilan garis dengan menambah LINE=NUMBER, ketebalan dari suatu garis dapat ditentukan. Letak dari suatu garis juga dapat diatur sesuai dengan kebutuhan dengan menambahkan ALIGN=LEFT/RIGHT/CENTER. Ketebalan garis juga dapat ditentukan dengan menambahkan WIDTH=PERCENT.
Kombinasi dari penjelasan diatas dapat kita buat seperti ini <HR ALIGN=CENTER WIDTH=50% SIZE=10 NOSHADE> akan dibuatkan (tampilkan) suatu garis tebal yang hitam dan ditempatkan ditengah-tengah.
Catatan: Dalam pembuatan garis yang cantik seperti pelangi dll. tidak dibuat pakai tag <HR> melainkan sebuah citra.

Bullet lists

Anda dapat membuat bullet dengan menggunakan tag <UL> (unordered list).
Formatnya sbb:
<UL>
<LI> item satu
<LI> item dua
<LI> item tiga
</UL>
Tampilannya seperti ini:
  • item satu
  • item dua
  • item tiga

Numbered lists

Juga dapat dibuat list dengan nomor urut dengan menggunakan tag <OL> (ordered list). Tampilannya seperti ini:
<OL>
<LI> bagian satu
<LI> bagian dua
<LI> bagian tiga
</OL>
Tampilannya seperti ini:
  1. bagian satu
  2. bagian dua
  3. bagian tiga

Membuat Definisi list

Cara termudah menerangkan definisi list adalah seperti contoh dibawah ini:
<dl> <dt>Jeruk <dd>Sebuah jeruk adalah hampir sama ukurannya dengan sebuah apel, yang masih satu keluarga dengan buah citrun. Di Indonesia buah jeruk hampir tumbuh disemua tempat.
<dt>Mangga <dd>Mangga juga dapat dijumpai diseluruh Indonesia, hanya saja daerah tertentu menghasilkan buah mangga yang spesialis seperti Arumanis, Manalagi dll.
</dl>
Sama halnya dengan tag dibawah ini:

Jeruk
Sebuah jeruk adalah hampir sama ukurannya dengan sebuah apel, yang masih satu keluarga dengan buah citrun. Di Indonesia buah jeruk hampir tumbuh disemua tempat.
Mangga
Mangga juga dapat dijumpai diseluruh Indonesia, hanya saja daerah tertentu menghasilkan buah mangga yang spesialis seperti Arumanis, Manalagi dll.

Judul/Headers

Browser pada web mengenal 6 level dari Header/Judul.
<H1>Judul level satu </H1>
<H2>Judul level dua </H2>
<H3>Judul level tiga </H3>
<H4>Judul level empat </H4>
<H5>Judul level lima </H5>
<H6>Judul level enam </H6>
akan terlihat seperti ini:

Judul level satu

Judul level dua

Judul level tiga

Judul level empat

Judul level lima
Judul level enam

Penempatan Teks ditengah

Anda dapat menempatkan teks ditengah-tengah tampilan layar agar menarik dengan membuat tag <CENTER> </CENTER>.
seperti ini:
<CENTER> Belajar membuat Home page </CENTER>
akan muncul:
Belajar membuat Home page
Jika lebih dari satu baris yang akan dibuat ketengah maka semuanya akan ikut terpusat ketengah dengan tag <CENTER>.

Penempatan Graphic sejajar

Untuk membuat graphic sejajar di kiri, tengah dan kanan perlu dibuatkan tag khusus.
<A HREF=xxx.html><IMG SRC=xxx.gif" ALT="xxxxx" ALIGN=left width=?? height=??></a>
xxx=nama file
xxxx=tulisan yg ada di graphic tsb.
Selanjutnya ALIGN=center dan ALIGN=right

Huruf Tebal dan Miring

Teks dan tulisan dapat kita buat tebal atau miring agar tampilannya lebih indah dan bervariasi dengan menggunakan tag seperti berikut ini:
<B>Teks tebal </B>
akan muncul seperti ini:
Teks tebal
<I>Teks miring </I>
akan muncul seperti ini:
Teks miring
<B> <I>Teks tebal dan Miring </I> </B>
akan terlihat seperti ini:
Teks tebal dan Miring

Paragraf dan mengakhiri satu baris

Browser web tidak mengenal dan mengindahkan enter untuk mengakhiri suatu baris seperti software pengolah kata kecuali dengan memberi instruksi khusus, barulah teks yang dimaksudkan bisa pas panjangnya di Browser yang anda gunakan. Dengan menyisipkan suatu tag <BR> akan mengakhiri suatu baris dan baris baru akan tercipta dibawahnya.
Untuk membatasi suatu paragraf cukup dengan menyisipkan tag
dan tidak perlu tag penutup
ini adalah pengecualian.

Teks Preformatted

Jika anda ingin menginginkan tampilan teks seperti yang anda inginkan, hanya dengan menempatkan tag
 diawal suatu paragraf dan tag 
diakhir paragraf akan dihasilkan seperti yang anda maksudkan, kita lihat seperti dibawah ini:
                Monas adalah singkatan Monumen Nasional
                  letaknya persis di jantung kota Jakarta
                     dibatasi oleh jalan-jalan besar seperti
                       Jl.Merdeka Utara, Selatan, Timur dan Barat.

Membuat kelap-kelip

Untuk membuat teks atau graphik kelap-kelip cukup dengan menambahkan tag <BLINK></BLINK>.
Kodenya <BLINK> Kelap-kelip Ibukota!</BLINK> akan terlihat seperti ini:
Kelap-kelip Ibukota!


 Baca juga : 

Related Posts by Categories



Tidak ada komentar:

Posting Komentar