P. 1
Materi HTML

Materi HTML

|Views: 320|Likes:
Published by Widya Permatasari

More info:

Published by: Widya Permatasari on Oct 25, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

01/12/2012

pdf

text

original

Sections

  • Pengenalan Kode HTML
  • Mengutak-atik Huruf
  • Belajar membuat Header
  • Header level 1
  • Bekerja dengan Paragraph
  • Karakter Khusus
  • Alignment atau Perataan
  • Indentasi
  • Membuat Daftar
  • Link atau Kaitan
  • Menyisipkan Gambar
  • Cara Membuat Tabel
  • Belajar Membuat Frame
  • Keterangan Situs (META)
  • Membuat text berjalan
  • Membuat garis pembatas
  • Membuat formulir
  • Tag INPUT
  • Menu Dropdown
  • Input Komentar
  • Mengirim data rahasia
  • Belajar Promosi Website
  • Meng-Online-kan Website
  • Search Engine Optimization (SEO)
  • Title Tag Optimization
  • Body Text Optimization
  • Keyword Research Tips
  • Link Building and Link Popularity
  • Header Tag Optimization
  • hingga
  • didefinisikan dengan heading terbesar
  • menjadi pertimbangan yang paling penting dan
  • menjadi pertimbangan utama dan
  • untuk keyword paling utama,
  • Text Hyperlink Optimization
  • Promosi Web Ruang Publik
  • Meraih Rangking Teratas
  • Meningkatkan Page Rank
  • Tips Yahoo!

Pengenalan Kode HTML

Dalam program Notepad anda, tulislah seperti ini:
<HTML> </HTML>

Masing-masing baris di atas disebut tag. Tag adalah kode yang digunakan untuk memark-up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing. Ada tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML> yang ditandai dengan tanda slash (garis miring) di depan awal tulisannya. Tag di atas memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah isi dari dokumen HTML. Perlu anda ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun huruf kecil. Artinya, penulisan <HTML> atau <html> atau <Html> sama saja hasilnya. Namun perlu selalu diingat bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa ditampilkan dalam browser. Sekarang kita akan beralih pada tag selanjutnya. Tambahkanlah tag seperti berikut:
<HTML> <BODY> </BODY> </HTML>

Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag <BODY>. Coba tuliskan:
<HTML> <BODY> Belajar HTML itu mudah. </BODY> </HTML>

Sekarang simpanlah file ini dengan meng-klik menu File lalu Save As. Pada kotak dialog yang muncul, terlebih dahulu klik anak panah kecil di ujung kanan kotak Save as type kemudian pilih All Files (*.*). Setelah itu, isilah kotak File name dengan nama file yang anda inginkan misalnya: latih1.htm. Jangan lupa penambahan ekstensi .htm di belakang nama file! Akhirnya, klik tombol Save maka file akan tersimpan sebagai dokumen web. Kini, tutuplah program Notepad anda. Sekarang bukalah lagi program browser (Internet Explorer) selain jendela browser yang anda baca ini. Klik menu File lalu Open. Pada kotak dialog yang muncul, klik tombol Browse. Cari dan pilih file latih1.htm lalu klik Open. Nah, lihatlah hasil karya anda yang pertama!

Belajar HTML itu mudah. Apakah tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web? Tidak, dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan berpengaruh terhadap format atau tampilan halaman web secara keseluruhan. Pada kesempatan ini kita mengambil contoh bagaimana mengubah warna latar belakang dan warna tulisan dari halaman web dengan penambahan atribut ke dalam tag BODY. Sekarang lihatlah kembali browser anda yang sedang menampilkan file latih1.htm tadi. Klik menu View lalu Source. Dengan instruksi ini akan muncullah program Notepad yang di dalamnya tampak source code atau kode-kode HTML yang tadi anda buat. Misalnya kita akan menjadikan halaman web latih1.htm ini menjadi berwarna latar belakang kuning dengan tulisan berwarna merah. Untuk itu, kita perlu menambahkan atribut BGCOLOR dan TEXT ke dalam tag body sebagai berikut:
<HTML> <BODY BGCOLOR="yellow" TEXT="red"> Belajar HTML itu mudah. </BODY> </HTML>

Simpanlah kembali file ini (klik File lalu Save). Untuk melihat bagaimana hasilnya, pergilah lagi ke program browser yang menampilkan halaman web latih1 tadi. Klik menu View lalu Refresh atau klik tombol Refresh pada toolbar atau bisa juga dengan menekan tombol F5 pada keyboard. Dengan demikian, browser akan memanggil ulang file latih1 yang kini sudah mengalami perubahan. Maka akan tampaklah hasilnya: Belajar HTML itu mudah Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa #rrggbb. Berikut ini adalah 16 nama warna beserta kodenya dalam format heksa (harap diingat bahwa tulisan 0 adalah angka nol, bukan huruf O).
black white red yellow #000000 #FFFFFF #FF0000 #FFFF00 blue fuchsia gray silver #0000FF #FF00FF #808080 #C0C0C0 olive green teal navy #808000 #008000 #008080 #000080 lime maroon purple aqua #00FF00 #800000 #800080 #00FFFF

Untuk warna putih sengaja saya kasih warna abu -abu, soalnya kalo dikasih warna putih, kodenya ndak keliatan kan? Tapi kodenya tetap #FFFFFFkok. Dengan demikian, kode HTML untuk contoh di atas bisa ditulis sebagai berikut:
<HTML> <BODY BGCOLOR="#FFFF00" TEXT="#FF0000"> Belajar HTML itu mudah. </BODY> </HTML>

Dengan menggunakan kode warna heksa, variasi warna yang dibuat bisa lebih banyak. Klik di sini untuk melihat daftar kode warna yang lainnya! Demikianlah sekilas fungsi tag BODY. Sekarang bukalah kembali source code alias kode-kode HTML. Masih ingat, kan caranya? (Klik menu View lalu Source). Tambahkanlah tag-tag berikut ini:
<HTML> <HEAD>

<TITLE></TITLE> </HEAD> <BODY BGCOLOR="yellow" TEXT="red"> Belajar HTML itu mudah. </BODY> </HTML>

Di sini terlihat bahwa kita menambah tag <HEAD> dan tag <TITLE>. Tag HEAD berfungsi untuk mengapit berbagai macam fungsi dan informasi yang berkenan dengan halaman web yang bersangkutan. Pada latihan kali ini, kita memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi untuk mengapit kalimat yang menjadi judul dari halaman web tersebut. Sekarang mari kita tuliskan judul halaman web ini:
<HTML> <HEAD> <TITLE>Belajar HTML</TITLE> </HEAD> <BODY BGCOLOR="yellow" TEXT="red"> Belajar HTML itu mudah. </BODY> </HTML>

Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang kita akan melihat bagaimana perubahannya dalam browser. Lakukan lagi Refresh seperti di atas. Maka anda akan melihat di baris teratas (yang dinamakan Title Bar) dari program browser akan menampilkan judul atau titel dari halaman web anda yaitu: Karya Pertamaku. Alhamdulillah, selesailah latihan pertama kita.

Mengutak-atik Huruf
Dalam latihan kedua ini, kita akan mempelajari beberapa tag yang relatif mudah diingat. Tag-tag ini berfungsi untuk mengubah tipe huruf yaitu menebalkan (bold), membuat tulisan miring (italic) atau memberi garis bawah (underline). Buka lagi program Notepad kemudian tuliskan seperti berikut ini:
<HTML> <HEAD> <TITLE>Tipe-tipe Teks</TILE> </HEAD> <BODY> Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen apa saja. Ketiga tipe tersebut ialah tulisan tebal, tulisan miring dan tulisan bergaris bawah. Bisa pula dua tipe huruf dipadukan misalnya tulisan tebal dan miring, tulisan tebal dan bergaris bawah atau tulisan miring

dan bergaris bawah. Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung menjadi satu berupa tulisan tebal, miring dan bergaris bawah. </BODY> </HTML>

Simpanlah file tersebut. Jangan lupa mengikuti langkah-langkah cara menyimpan file HTML yang sudah kita pelajari dalam latihan pertama dahulu. Setelah file tersimpan, bukalah file tersebut dengan program Internet Explorer. Perhatikanlah bahwa semua tulisan dalam dokumen tersebut masih seragam. Kini, kita akan melakukan sedikit perubahan pada beberapa kata dan kalimat yang ada di situ sehingga menjadi seperti ini: Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen apa saja. Ketiga tipe tersebut ialah tulisan tebal, tulisan miring dan tulisan bergaris bawah. Bisa pula dua tipe huruf dipadukan misalnya tulisan tebal dan miring, tulisan tebal dan bergaris bawah atau tulisan miring dan bergaris bawah. Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung menjadi satu berupa tulisan tebal, miring dan bergaris bawah. Bagaimana caranya? Bukalah source code dari dokumen tadi (tekan F5), kemudian tambahkan tag-tag berikut. Tag-tag tersebut adalah : 1. <B> untuk menebalkan (bold) tulisan, 2. <I> untuk memiringkan (italic) tulisan dan 3. <U> untuk menggaris-bawahi (underline) tulisan Sehingga hasilnya akan seperti ini :
<HTML> <HEAD> <TITLE>Tipe-tipe Teks</TITLE> </HEAD> <BODY> Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen apa saja. Ketiga tipe tersebut ialah tulisan <B>tebal</B>, tulisan <I>miring</I> dan tulisan <U>bergaris bawah</U>. Bisa pula dua tipe huruf dipadukan misalnya tulisan <B> <I>tebal dan miring</B></I>, tulisan <B><U>tebal dan bergaris bawah</B></U> atau tulisan <I><U>miring dan bergaris bawah</I></U>. Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung menjadi satu berupa tulisan <B><I><U>tebal, miring dan bergaris bawah</B></I></U>. </BODY> </HTML>

<FONT SIZE="2">Font Size 2</FONT>. simpan (Save) file source code itu kemudian lakukan Refresh pada dokumen web yang tampak pada program browser anda. Meski demikian. ini adalah font <FONT FACE="Verdana">Verdana</FONT>. <FONT SIZE="4">Font Size 4</FONT>. akan tampak seperti ini: Ini adalah font Arial. Size 7</FONT> Bila dilihat dalam browser. Sudah samakah? Variasi Font Tanpa campur tangan kita. Misalnya: bila tag </TITLE> anda tulis </TILE> maka browser tidak akan menampilkan tulisan apa-apa dalam dokumen anda. bukalah dan lihatlah hasilnya dalam program browser. Kita bisa mengubah jenis. Editor-editor teks tersebut dapat membimbing anda mempelajari kode-kode HTML secara luar dalam. Misalnya untuk mengubah jenis font kita gunakan atribut FACE: <HTML><BODY> Ini adalah font <FONT FACE="Arial">Arial</FONT>. menggunakan teks editor untuk membuat halaman web adalah cara terbaik untuk benar-benar mengerti tentang struktur file HTML Bila anda sudah menyimpannya. dokumen HTML menggunakan font default dari Windows (Sistem Operasi Komputer) atau browser (Internet Explorer). Buatlah dokumen dengan judul (titel): Pemantapan Tipe-tipe Teks. warna dan ukuran font sesuai dengan selera kita menggunakan tag <FONT> diikut dengan atribut-atributnya. Kalau tidak percaya. coba perhatikan baik-baik penulisan tag-tag anda. Font Size 1 Font Size 5. biasanya Times New Roman dengan ukuran 12 point. <FONT SIZE="6">Font Size 6</FONT>. Size 3</FONT>. simpan (save) kemudian refresh dokumen anda dan lihatlah hasilnya! Untuk lebih mempermantap keterampilan yang anda dapatkan dari latihan kedua ini. gunakan atribut SIZE: <HTML><BODY> <FONT SIZE="1">Font <FONT SIZE="3">Font <FONT SIZE="5">Font <FONT SIZE="7">Font </BODY></HTML> Size 1</FONT>. Font Size 7 . Font Size 6. Lihatlah hasil perubahannya! Andaikata ada yang tidak beres. Size 5</FONT>. dan ini adalah font Impact Untuk mengubah ukuran font.Setelah anda menambahkan semua tag-tag tersebut. akan tampak seperti ini: . cobalah menulis source code yang salah seperti itu. dan lain-lain. MS Write. Font Size 3. Font Size 2. mulai dari tag pembuka <HTML> hingga </HTML> jangan sampai ada yang salah tulis meskipun satu karakter. Akan tetapi mungkin anda sedikit frustrasi karena harus mengetik semua kode HTML baris per baris yang dalam perkembangannya akan menjadi sangat rumit. dan ini adalah font <FONT FACE="Impact">Impact</FONT> </BODY></HTML> Bila dilihat dalam browser. Font Size 4. Notepad. ada baiknya anda mencoba membuat dokumen HTML berikut ini. ini adalah font Verdana. yang isinya adalah tulisan seperti berikut: Karena file-file HTML sebenarnya adalah file-file ASCII biasa. maka anda dapat menggunakan editor-editor teks sederhana seperti WordStar (WS).

Inilah contohnya: <HTML><BODY> Tulisan Normal<SUB>Tulisan Subscript</SUB> <P>Tulisan Normal<SUP>Tulisan Superscript</SUP> </BODY></HTML> Beginilah hasilnya dalam browser: Tulisan NormalTulisan Subscript Tulisan NormalTulisan Superscript Bagusnya. akan tampak seperti ini: Font Arial ukuran 2. Perhatikan contoh berikut: <HTML><BODY> <FONT FACE="Arial" SIZE="2">Font Arial ukuran 2</FONT>. Font Verdana warna merah. <FONT COLOR="red">Tulisan warna merah</FONT>. Tulisan warna merah. Coba buat tulisan berikut: . anda berlatih sedikit. menggunakan atribut COLOR: <HTML><BODY> <FONT COLOR="blue">Tulisan warna biru</FONT>. digunakan tag <BASEFONT> yang ditempatkan diantara tag <HEAD> dan </HEAD>. <FONT COLOR="yellow">Tulisan warna kuning</FONT> </BODY></HTML> Bila dilihat dalam browser. Font Impact ukuran 5 warna biru Untuk mengubah font default untuk satu halaman HTML. Tulisan warna kuning Dalam satu tag FONT kita bisa menggabungkan lebih dari satu atribut. FACE="Verdana" COLOR="red">Font Verdana warna merah</FONT>. Untuk menulis subscript kita gunakan tag <SUB> sedang untuk menulis superscript kita gunakan tag <SUP>. Contoh: <HTML> <HEAD> <BASEFONT FACE="arial" SIZE="10" COLOR="blue"> </HEAD> <BODY> Font default untuk semua tulisan pada halaman ini adalah font arial dengan ukuran 10 dan warna biru. </BODY></HTML> Cobalah buat dalam sebuah file HTML kemudian lihat hasilnya dalam browser! SUBSCRIPT DAN SUPERSCRIPT Subscript adalah tulisan yang agak kecil dan letaknya agak di bawah sedangkan superscript adalah tulisan yang agak kecil dan letaknya agak di atas.Sedangkan untuk mengubah warna tulisan. akan tampak seperti ini: Tulisan warna biru. FACE="Impact SIZE="5" COLOR="blue">Font Impact ukuran 5 biru</FONT> </BODY></HTML> <FONT <FONT warna Bila dilihat dalam browser.

kan? Belajar membuat Header Header adalah huruf-huruf berukuran khusus yang digunakan untuk menuliskan judul bab atau sub bab. Hasilnya akan tampak sebagai berikut: Header level 1 Header level 2 Header level 3 Header level 4 Header level 5 Header level 6 Biasakanlah menggunakan tag header ini dalam setiap judul yang ingin kamu buat. . H1 adalah header yang paling besar dan H6 adalah header yang paling kecil. search engine sangat menyukai header ini dalam mempermudah mereka menemukan situs kamu nantinya.Rumus kimia Asam Sulfat adalah H2SO4 Luas kolam 150 m2 sedang volume kolam 300 m3 Gampang. Coba tulis dalam Notepad anda sebagai berikut: <HTML> <BODY> <H1>Header level 1</H1> <H2>Header level 2</H2> <H3>Header level 3</H3> <H4>Header level 4</H4> <H5>Header level 5</H5> <H6>Header level 6</H6> </BODY> </HTML> Simpanlah dalam format file HTML kemudian buka dalam browser. Ada enam tingkatan header mulai dari H1 hingga H6.

Bagaimana dengan dokumen HTML? Cobalah membuat tulisan berikut pada Notepad: <HTML> <BODY> Baris pertama Baris kedua Baris ketiga </BODY> </HTML> Simpanlah sebagai file HTML kemudian bukalah dalam browser. Hasilnya kurang lebih akan seperti ini: Baris Baris Baris ketiga pertama kedua Membuat baris kalimat.Bekerja dengan Paragraph Sekarang kita akan mempelajari bagaimana cara membuat baris dan paragraf.htm menjadi seperti ini: <HTML> <BODY> Baris pertama<br><br> Baris kedua<br><br> Baris ketiga </BODY> </HTML> Simpan lalu refresh sekali lagi maka hasilnya akan seperti ini: Baris Baris Baris keempat pertama kedua . Bukalah source kode file HTML tadi lalu edit seperti berikut: <HTML> <BODY> Baris pertama<br> Baris kedua<br> Baris ketiga </BODY> </HTML> Simpan kemudian lihat hasilnya dengan me-refresh pada browser. untuk membuat baris baru. Lantas. artinya baris yang tidak mempunyai kalimat apa-apa. Editlah sekali lagi source code latih4. Kesimpulannya. Tag ini tidak mempunyai tag penutup. Bagaimana hasilnya? Ternyata hasilnya hanya seperti ini: Baris pertama Baris kedua Baris ketiga. gampang kan ? Tag <BR> tersebut dapat pula digunakan untuk membuat baris kosong. bagaimana caranya membuat baris? Gunakanlah tag <BR>. penekanan tombol Enter tidak menghasilkan baris dalam tampilan browser. Biasanya. Demikianlah sifat penulisan dokumen HTML. kita lakukan dengan menekan tombol Enter.

dan lain-lain) dipresentasikan dalam bentuk <I>hypertext</I> dan dapat diakses oleh sebuah peraga WWW (yang sering disebut sebagai <U>browser</U>). JPG. WAV). dan objek multimedia lainnya (seperti MIDI. Perhatikanlah contoh tulisan di bawah ini: <HTML> <BODY> Paragraf pertama <P> Paragraf kedua <P> Paragraf ketiga </BODY> </HTML> Bila dilihat dalam browser. <P>Informasi di WWW pada umumnya ditulis dalam bentuk HTML (Hypertext Markup Language). hasilnya akan seperti ini: Paragraf pertama Paragraf kedua Paragraf ketiga Dengan berpatokan pada contoh penggunaan tag <P> di atas. dan lain-lain) dipresentasikan dalam bentuk hypertext dan dapat diakses oleh sebuah peraga WWW (yang sering disebut sebagai browser). Setelah pandai membuat baris. Shockwave. sekarang kita akan belajar membuat paragraf. demikian seterusnya. JPG. WAV). . gambar. suara (dalam format AU. suara (dalam format AU. Bila anda masih mengingat pelajaran-pelajaran terdahulu. maka tanpa kesulitan yang berarti anda akan bisa membuat source code untuk menghasilkan tulisan-tulisan di atas. informasi lain dapat berupa: gambar (dalam format GIF. Informasi di WWW pada umumnya ditulis dalam bentuk HTML (Hypertext Markup Language). dan objek multimedia lainnya (seperti MIDI. cobalah buat file HTML dengan menggunakan Notepad sehingga menghasilkan dokumen HTML yang akan tampak di browser seperti ini: World Wide Web (WWW) merupakan sebuah sistem dimana informasi (teks. Quicktime Movie. Quicktime Movie. Shockwave. Selain itu. gambar. </BODY></HTML> Simpanlah file di atas kemudian buka dalam browser. suara.Di sini kita lihat bahwa tag <BR> yang ditulis dua kali akan menghasilkan dua baris. 3D World). suara. PNG). Kode sumbernya kira-kira sebagai berikut: <HTML><BODY> <B>World Wide Web</B> (WWW) merupakan sebuah sistem dimana informasi (teks. PNG). 3D World). Selain itu. informasi lain dapat berupa gambar (dalam format GIF.

._________/\ \ / \. sehingga untuk menampilkan hasil seperti diatas._________/\ \ / \.@#####@|_--" /\ \_|l|_/ (\ (=-\ |l| / \ \.___|l|___/ /\ |_| / (=-\.(### ###) \ / (### ###) (=. kode sumbernya sebagai berikut : <HTML> <BODY> <PRE> ^ | | @#####@ (### ###)-._________/ # ---# # __ # \########/ ) MOVE AND I SHOT!!! </PRE> </BODY> Selamat mencoba !! Karakter Khusus .Tampil Apa Adanya Bagaimana kalo ternyata kamu butuh tampilan yang membutuhkan banyak spasi dan tak bisa diwakili oleh perintah2 HTML diatas? Misalnya kamu pengen bikin tampilan seperti ini : ^ | | @#####@ (### ###)-.@#####@|_--" /\ \_|l|_/ (\ (=-\ |l| / \ \.___|l|___/ /\ |_| / (=-\.(### ###) \ / (### ###) (=._________/ # ---# # __ # \########/ MOVE AND I SHOT!!! ) Maka gunakanlah tag <PRE>. .

&quot. Dan setiap artikel terdaftar&reg. Banyaknya &plusmn. Karakter-karakter ini harus dituliskan dengan notasi khusus mengingat karakter-karakter ini dipakai juga sebagai kode-kode tag atau karena memang tidak dijumpai dalam karakter teks ASCII.Kita telah mengetahui bahwa browser tidak mengenal pembuatan baris dengan tombol Enter. <br>&lt. Contoh atribut perataan dalam tag header: <HTML><BODY> <H1>Header level 1</H1> <H2 .harap maklum&gt. dikenal tiga atau empat macam perataan yaitu rata kiri (align left). </HTML></BODY> Alignment atau Perataan Dalam tulisan cetak. Disamping itu..&nbsp.&nbsp. rata kanan (align right) dan rata kiri dan kanan (justify). browser juga tidak mengenal pembuatan spasi lebih dari satu spasi dengan menekan tombol Spasi ataupun tombol Tab. <harap maklum> Beginilah cara penulisannya dengan bahasa HTML: <HTML><BODY> Tip &amp. Trik ini disajikan untuk para &quot.&nbsp.&nbsp.pemula&quot. &copy. 75 artikel. di tengah (center). Misalnya kita akan membuat tulisan seperti ini: Tip & Trik ini disajikan untuk para "pemula".&nbsp. Dan setiap artikel terdaftar® dalam direktorat hak cipta©. ini &nbsp. dalam direktorat hak cipta&copy. spasi </HTML></BODY> Bila dilihat dalam browser hasilnya akan seperti ini: Kata-kata ini diantarai satu spasi sedangkan kata-kata ini diantarai lima spasi Disamping notasi untuk pembuatan spasi (&nbsp. diantarai &nbsp. Nah.&nbsp. Tag Header dan Tag Paragraf dapat disisipi dengan atribut align untuk melakukan perataan ini.&nbsp. lima &nbsp. &reg. &amp.) ada lagi sejumlah notasi khusus untuk penulisan karakter-karakter tertentu. seperti yang bisa kita lihat pada contoh berikut ini: <HTML><BODY> kata-kata ini diantarai satu spasi sedangkan<br>kata-kata &nbsp.. Banyaknya ± 75 artikel. bagaimana caranya membuat lebih dari satu spasi dalam dokumen HTML? Pembuatan spasi dalam kode-kode HTML diganti tulisan &nbsp.&nbsp.. &gt. &plusmn. Berikut beberapa diantaranya: Karakter < > & " + © ® Keterangan kurung runcing buka kurung runcing tutup dan tanda petik ganda tanda plus minus hak cipta atau copyright terdaftar atau registered Notasi &lt.

organisasi-organisasi yang terdapat di dalamnya. tipe dan jenisnya. anda dapat membuat website untuk memperkenalkan sekolah atau universitas anda.align="center">Header level 2</H2> <H3 align="right">Header level 3</H3> </BODY></HTML> Bila dilihat dalam browser. Selain itu. Jika anda seorang pengusaha. jadwal seminar. anda juga bisa membuat polling online untuk keperluan riset atau untuk mendukung teori-teori anda. anda dapat mengisi website anda dengan barang-barang produksi atau perdagangan anda. tesis. tampak seperti ini: Header level 1 Header level 2 Header level 3 Contoh atribut perataan dalam tag paragraf: <HTML><BODY> <P>paragraf rata kiri adalah default</p> <P align="center">paragraf di tengah</p> <P align="right">paragraf rata kanan</p> <P align="justify">paragraf rata kiri dan kanan</p> </BODY></HTML> Hasilnya seperti yang anda bayangkan: paragraf rata kiri adalah default paragraf di tengah paragraf rata kanan paragraf rata kiri dan kanan Berpedoman dengan contoh di atas. program kerjanya di masa datang. masalah yang dihadapi dalam penelitian. dukungan purna jualnya. . peneliti atau saintis. rencana penelitian. website anda bisa diisi dengan publikasi karya ilmiah anda. dan lain sebagainya. dan lain sebagainya. Apa kegiatannya. Jika anda seorang ilmuwan. proposal-proposal iptek. cobalah membuat tulisan dengan model header dan paragraf sebagai berikut: Untuk Apa Mempunyai Website? Jika anda seorang pelajar atau mahasiswa.

jumlah karyawan. membuat paragraf yang semua barisnya agak masuk ke dalam. dan sebagainya. grafik kemajuan perusahaan. belajar bikin website di http://aku. Untuk membuat paragraf semacam ini kita menggunakan tag <DD>. Namun biasa pula paragraf itu ditandai dengan posisi baris pertamanya yang agak masuk ke dalam. Dengan kalimat yang agak panjang. Kedua. kita lihat bahwa <b>semua baris</b> dalam paragraf . Yuk. <HTML><BODY> Ini adalah paragraf normal <BLOCKQUOTE> <P>Ini paragraf yang agak masuk ke dalam. Ada tiga macam bentuk indentasi paragraf. profil perusahaan. lowongan pekerjaan. Maka. semoga sukses !! Indentasi Disamping mengatur perataan.</DD> </BODY> </HTML> Beginilah hasilnya bila dibuka dalam browser: Paragraf atau alinea ialah sekumpulan kalimat yang mengandung satu pokok pikiran. Pertama. buatlah sebuah website. Antara satu paragraf dengan paragraf lainnya biasanya dipisahkan oleh baris kosong.id Selamat mencoba. siapapun anda. Contoh: <HTML> <BODY> <DD>Paragraf atau alinea ialah sekumpulan kalimat yang mengandung satu pokok pikiran. Namun biasa pula paragraf itu ditandai dengan posisi baris pertamanya yang agak masuk ke dalam. Karena website adalah untuk siapa saja. kita pun bisa mengatur posisi baris-baris paragraf dari margin (tepi halaman).punya. <P align="justify">Ini juga contoh paragraf yang agak masuk ke dalam.pemasarannya.web. dan siapa saja harus punya website. baris pertamanya saja yang agak masuk ke dalam. Antara satu paragraf dengan paragraf lainnya biasanya dipisahkan oleh baris kosong. Untuk membuat paragraf semacam ini kita menggunakan tag <BLOCKQUOTE> yang mengapit paragraf-paragraf yang hendak kita jadikan masuk ke dalam.

Dengan kalimat yang agak panjang. paragraf ini kembali normal. kan? Ketiga. Daftar definisi ialah susunan paragraf yang berselang-seling antara paragraf normal yang merupakan kalimat yang hendak dijelaskan dengan paragraf yang agak masuk ke dalam yang merupakan penjelasan atau definisi dari kalimat di atasnya. FTP. Nah. HTTP Singkatan dari Hypertext Transfer Protocol adalah salah satu protokol bahasa yang digunakan untuk berkomunikasi antar server komputer dalam internet. kita lihat bahwa semua baris dalam paragraf ini letaknya agak masuk ke dalam. <DD> yang menandai paragraf yang agak masuk ke dalam (yang menjelaskan paragraf di atasnya). Ngerti. berikut ini contoh daftar definisi: Daftar Istilah Penting: Internet Singkatan dari interconnection network atau hubungan antar jaringan. Untuk membuat daftar definisi semacam di atas digunakan tiga macam tag yaitu : 1. Nah. Internet ialah jaringan komputer . Untuk lebih jelasnya. kan? </BODY></HTML> Beginilah tampilannya dalam browser: Ini adalah paragraf normal Ini paragraf yang agak masuk ke dalam. Gropher. Protokol bahasa yang lain dalam internet misalnya: Telnet. <DT> yang menandai paragraf normal (yang dijelaskan) dan 3. 2. Ngerti. paragraf ini kembali normal. Untuk contoh di atas beginilah kode sumbernya: <DL> <DT><B>Internet</b></DT> <DD>Singkatan dari <i>interconnection network</i> atau hubungan antar jaringan. Karena cuma demo. <i>Sama rata sama jauhnya</i>. karena tag <i>blockquote</i> sudah berlalu alias sudah ditutup di atas. cukup dua definisi sajalah. </BLOCKQUOTE> <P>Nah. karena tag blockquote sudah berlalu alias sudah ditutup di atas. Sama rata sama jauhnya. Internet ialah jaringan komputer global dan merupakan jaringan komputer yang terbesar di dunia karena mampu menghubungkan seluruh komputer yang ada di dunia. membuat paragraf dalam susunan daftar definisi (definition list). Ini juga contoh paragraf yang agak masuk ke dalam. paragraf ini kembali normal.ini letaknya agak masuk ke dalam. <DL> yang menandai dimulai atau diakhirinya daftar definisi. News.

item pertama 2. Sekarang. FTP. item kedua 3. Gropher. Protokol bahasa yang lain dalam internet misalnya: Telnet. Beginilah kode sumber untuk daftar item tak berurut di atas: <ul> <li>item <li>item <li>item </ul> pertama</li> kedua</li> ketiga</li> Dan beginilah kode sumber untuk daftar item berurut di atas: <ol> <li>item pertama</li> .global dan merupakan jaringan komputer yang terbesar di dunia karena mampu menghubungkan seluruh komputer yang ada di dunia. paragraf ini kembali normal. item ketiga Untuk membuat daftar item tak berurut kita gunakan tag <UL> sedang untuk membuat daftar item berurut digunakan tag <OL>. News.</DD> <DT><b>HTTP</B></DT> <DD>Singkatan dari <i>Hypertext Transfer Protocol</i> adalah salah satu protokol bahasa yang digunakan untuk berkomunikasi antar server komputer dalam internet. cobalah berlatih membuat daftar definisi sendiri! Selamat Mencoba!! Membuat Daftar Ada dua macam daftar item yaitu daftar item tak berurut (bullet) dan daftar item berurut (numbering). Contoh daftar item tak berurut (bullet): • • • item pertama item kedua item ketiga Contoh daftar item berurut (numbering): 1.</DD> </DL> Karena cuma demo. cukup dua definisi sajalah. Adapun setiap item ditandai dengan tag <LI>. Nah.

Contohnya sebagai berikut: • • item pertama item kedua o sub item pertama o sub item kedua  sub sub item pertama  sub sub item kedua  sub sub item ketiga o sub item ketiga item ketiga • Untuk membuat daftar item bertingkat seperti di atas tidak ada penambahan tag atau atribut apa-apa. lingkaran untuk untuk item-item level kedua. Sebenarnya. hasilnya dalam browser tetap akan menggunakan spasi agak ke dalam untuk level-level di bawahnya. Kita tinggal mengganti tag <UL> dengan tag <OL> maka hasilnya akan seperti ini: 1. sub sub item pertama 2. sub item kedua 1. tanpa pemberian spasi. Sebenarnya kita pun bisa memilih sendiri bullet jenis apa yang kita ingin gunakan dengan menambah atribut TYPE dalam tag <UL>. 2. Rumusnya: <UL . sub sub item kedua 3. sub sub item ketiga 3. dan kotak hitam untuk item-item level ketiga. sub item ketiga item ketiga 3. Yang dilakukan hanyalah menempatkan tag-tag daftar item tingkat bawah di dalam daftar item tingkat di atasnya. Dari contoh daftar item tak berurut yang bertingkat di atas. Cara yang sama dilakukan untuk membuat daftar item berurut bertingkat. Untuk jelasnya beginilah source kodenya: <ul> <li>item pertama</li> <li>item <ul> <li>sub <li>sub <ul> <li>sub sub <li>sub sub <li>sub sub </ul> <li>sub </ul> <li>item </ul> kedua</li> item item item item item item pertama</li> kedua</li> pertama</li> kedua</li> ketiga</li> ketiga</li> ketiga</li> Penulisan kode-kode HTML di atas sengaja kita beri spasi agak ke dalam. sub item pertama 2. item pertama item kedua 1. kita lihat bahwa secara default. kedua dan seterusnya. agar lebih mudah dibaca dan dimengerti mana yang level pertama.<li>item <li>item </ol> kedua</li> ketiga</li> Kita pun dapat membuat daftar item bertingkat atau daftar item di dalam daftar item. browser akan menampilkan gambar (bullet) bulatan hitam untuk item-item level pertama.

Link atau Kaitan . sub sub item pertama 2.TYPE="jenis bullet">. sub item ketiga item ketiga III. II. "circle" untuk lingkaran. dan "square" untuk kotam hitam. I. Sekian pelajaran tentang bullet dan numbering. Jadi bila kita ingin membuat daftar item semacam ini:    item pertama item kedua item ketiga Maka kita menuliskan kode-kode HTML sebagai berikut: <ul <li>item <li>item <li>item </ul> type="square"> pertama</li> kedua</li> ketiga</li> Untuk daftar item berurut (numbering). sub item pertama B. jenis angkanya pun dapat diganti dengan menggunakan atribut yang sama. sub sub item kedua 3. a. atau i tergantung selera kita. A. sub sub item ketiga C. Jadi rumusnya: <OL TYPE="jenis angka">. Sedangkan jenis angkanya diisi dengan angka 1. Contoh: <ol <li>item <li>item <ol <li>sub <li>sub <ol <li>sub <li>sub <li>sub </ol> <li>sub </ol> <li>item </ol> type="I"> pertama</li> kedua</li> type="A"> pertama</li> kedua</li> type="1"> pertama</li> kedua</li> ketiga</li> ketiga</li> ketiga</li> item item sub sub sub item item item item Akan menghasilkan daftar item sebagai berikut: I. sub item kedua 1. Dimana nama bullet ada tiga macam: "disc" untuk bulatan hitam. item pertama item kedua A.

6. file kompresi (ZIP). 2.com". 4. 3. Misalnya: href="javascript/js001. maka harus kita tuliskan alamat URL dan lokasi filenya. Pada kotak tujuan email (To:) sudah tercantum alamat email tujuan. Link yang menuju ke bagian tertentu (bookmark) dalam halaman yang berbeda Link yang mengarah ke sebuah file yang dapat ditampilkan dalam browser. Link yang menuju ke homepage (halaman pertama) dari situs lain. link dapat dibedakan atas: 1.hidayatullah. Link yang menuju ke halaman lain dalam situs lain. 7. Link adalah sebuah teks atau gambar yang bila di-klik akan membawa anda ke bagian lain dari dokumen web. Proses pengambilan dan penyimpanan file semacam inilah yang dinamakan download. BMP dan sebagainya. Link yang mengarah ke sebuah file tertentu yang tidak bisa ditampilkan atau dijalankan dalam browser misalnya: file program (EXE). 2. c) Sedangkan bila file yang dituju itu berada dalam folder yang lain di atas folder yang ditempati oleh file dari link tersebut maka dituliskan seperti . Bila link ini diklik akan membuka jendela pengiriman email dari program email yang terinstall pada komputer user (misalnya Microsoft Outlook). kita lakukan dengan mengapitnya dengan tag pembuka <A HREF> dan tag penutup </A>.htm". file audio (seperti MP3. Misalnya: href="http://www. maka harus dituliskan nama foldernya.situs. maka cukup dituliskan lokasi filenya. b) Bila file yang dituju itu berada dalam folder yang lain di bawah folder yang ditempati oleh link tersebut. tanpa menuliskan alamat URL situs itu. Contoh link yang menuju ke situs lain: hidayatullah online.com/sini/situ. 8. misalnya: href="freeware1. Inilah kode sumbernya: <A HREF="http://www. dan lain-lain. 5. file video.htm". misalnya file image (gambar) atau animasi seperti GIF. Untuk setiap jenis link di atas. cukup dituliskan alamat URL dari website tersebut. Link yang mengarah ke alamat email. Lokasi ini ditulis diantara tanda kutip sesudah atribut href=. yang penting untuk diketahui adalah cara penulisan alamat atau lokasi (URL) dari situs atau file yang dituju oleh link itu. Untuk membuat sebuah teks atau gambar menjadi sebuah link. akan muncul kotak dialog yang menanyakan apakah anda akan menyimpan (save) file itu dalam hardisk atau menjalankannya dengan program yang sesuai. Link yang menuju ke homepage (halaman pertama) dari sebuah situs Link yang menuju ke halaman yang lain dalam situs yang sama Link yang menuju ke halaman yang lain dalam situs yang lain Link yang menuju ke bagian tertentu (bookmark) dalam halaman yang sama.htm". Ketentuannya sebagai berikut: 1.com">hidayatullah online</A> Berdasarkan lokasi tujuannya. JPG. Link yang menuju ke halaman lain dalam situs yang sama. Jadi rumusnya kira-kira sebagai berikut: <A HREF="lokasi_tujuan">link</A>.situs. RM). Bila link semacam ini diklik. Sebuah link biasanya ditandai dengan teks warna biru bergaris bawah atau pointer mouse yang berubah menjadi telunjuk tangan. 3.Sekarang kita akan belajar membuat link yang merupakan ciri khas dari dokumen web. misalnya: href="http://www. Dalam hal ini ada beberapa kemungkinan: a) Bila file tersebut berlokasi pada folder yang sama dengan file dari link tersebut maka cukup dituliskan nama filenya.

berikut: href="/rainbow. Sekarang sebagai contoh. Menyisipkan Gambar Sekarang kita akan belajar menyisipkan gambar ke dalam website kita. a) Bila tempat yang dituju itu terdapat dalam halaman yang sama dengan link tersebut maka cukup dituliskan nama lokasi yang dituju itu. selanjutnya anda dapat berlatih membuat beberapa halaman web dengan sejumlah link di dalamnya. sebelumnya kita harus memberi nama pada tempat/lokasi yang akan dituju itu dengan mencantumkan tag <a name="bagian"></a> pada baris yang akan dituju itu. kita harus menambahkan atribut TARGET="_blank" dalam tag <A HREF>. Cara browser memunculkan halaman tujuan ini ada dua macam. 6. Artinya. Contoh: <a href="webpage.com". Link yang mengarah ke sebuah file yang bukan file HTML misalnya file program. 5.htm" target="_blank">. Telah kita ketahui bahwa bila sebuah link diklik maka browser akan menampilkan halaman yang dituju oleh link tersebut. Ditampilkan pada jendela yang lain. d) Bila file tersebut letaknya dua tingkat di atas maka dituliskan dua kali titik dua seperti ini: href="/rainbow. Dalam hal ini ada dua kemungkinan. Misalnya: href=#bagian. kita akan membuat website yang hasilnya kira-kira seperti ini : . 2 dan 3 di atas. image. 1. Ditampilkan pada jendela yang sama.gif". Misalnya: href="lain. Sekian pelajaran tentang link. Artinya. halaman tempat link itu akan digantikan oleh halaman yang dituju oleh link tersebut. Setelah itu barulah kita bisa membuat link yang menuju ke bagian tersebut. 4. dan lain-lain cara penulisannya sama saja caranya dengan file HTML seperti pada point 1. Untuk membuat link yang menuju ke bagian tertentu dari sebuah halaman web. Ini merupakan cara pemunculan default. Untuk membuat link semacam ini. Agar anda lebih mengerti cara pembuatan macam-macam link tersebut. 2. b) Bila tempat yang dituju itu terletak pada halaman yang lain maka harus dituliskan nama file dari halaman itu baru nama tempatnya.htm#bagian". Link yang berisi alamat email dituliskan seperti berikut: href="mailto:adifitrah@maktoob. akan muncul jendela baru yang menampilkan halaman yang dituju.gif" dan seterusnya. audio.

sebelum saya kasih source codenya. title . 3. Berikut ini atribut yang bisa kita terapkan untuk gambar kita : 1. file gambar yang digunakan bernama kaligrafi. Berikut ini contoh penggunaan atribut gambar : <img src="kaligrafi.Selamat Datang di PUSAT KALIGRAFI Nah. maka codenya adalah sebagai berikut . Jadi misalkan file htmlnya berada di D:\website\ maka file gambar juga harus diletakkan di folder tersebut.gif" border="2" /> . Atribut Gambar Gambar yang kita sisipkan. Saat pengunjung mengarahkan kursor pada gambar. misalnya dari contoh diatas.gif. kita akan kasih tahu dulu cara memasukkan gambar pada website. 2. maka akan muncul tulisan yang menerangkan gambar tersebut. 4. border . <img src="kaligrafi.untuk memberi bingkai pada gambar width . Berikut ini adalah kode untuk memasukkan gambar : <img src="file_gambar" /> Gampang kan? Nah.gif" /> Ingat. bisa kita atur tampilannya.mengatur lebar gambar height .memberi text alternatif bila gambar tak berhasil dimunculkan pada website (biasanya karena pengunjung menghilangkan fungsi menampilkan gambar) 5.mengatur tinggi gambar alt . file gambar harus diletakkan di folder yang sama dengan file htmlnya. tahu kan kira-kira seperti apa scriptnya? Baiklah.memberi text penunjuk keterangan gambar.

Untuk alt.gif" width="50" /> <img src="kaligrafi. Membuat background gambar Seperti contoh diatas.gif" title="Gambar kaligrafi" /> Coba arahkan kursor ke gambar diatas dan sebuah tulisan "Gambar kaligrafi" akan muncul.gif" height="50" /> <img src="kaligrafi.<img src="kaligrafi.gif"> Test gambar background . kita akan menempatkan gambar sebagai background website kita. Maka kita perlu menyisipkan kodenya di tag <BODY> sehingga hasilnya sebagai berikut : <HTML> <BODY BACKGROUND="background. sengaja tak ditampilkan disini karena hasilnya akan sama aja di layar.

Berikut tag2 yang dipergunakan untuk membentuk suatu tabel : <TABLE></TABLE> .menentukan berapa baris yang akan digabung Dan sekarang. Bahkan menggabungkan antara satu tabel dengan tabel yang lain. Misalnya kita akan membuat suatu website dengan tampilan seperti ini : HEADER DAFTAR MENU Nah. Kebanyakan website dibuat dengan berbentuk tabel-tabel. Cara Membuat Tabel Pelajaran berikut ini sangat penting. mari kita coba mempraktekkannya satu persatu : <HTML> <BODY> <TABLE WIDTH="80%" BORDER="1"> <TR> <TD>Ini kolom pertama</TD> <TD>Ini kolom kedua</TD> </TR> <TR> .adalah tag yang akan membagi baris menjadi beberapa kolom.atribut untuk menentukan jarak antara isi dengan tepi kolom colspan menentukan berapa kolom yang akan digabung rowspan . <TR></TR> .adalah tag awal.atribut untuk menentukan gambar yang akan menjadi latar belakang tabel / kolom width atribut untuk menentukan lebar height atribut untuk menentukan tinggi align mengatur perataan horizontal valign mengatur perataan vertikal border atribut untuk menentukan lebar bingkai tabel cellspacing atribut untuk menentukan jarak antar kolom cellpadding .</BODY> </HTML> Sekarang coba buatlah sebuah website yang tampilannya seperti contoh pertama kali diatas. terutama jika kamu ingin membuat suatu website yang menarik dengan berbagai fasilitas. penanda awal dan akhir suatu tabel.adalah tag yang menandakan suatu baris dalam tabel <TD></TD> . untuk membuat tampilan website seperti diatas. Tabel memungkinkan kita membuat kolom2. kita gunakan tag <TABLE> beserta tag2 lain untuk membentuk baris dan kolom. Masing-masing tag memiliki atribut sebagai berikut : bgcolor atribut untuk menentukan warna latar belakang background .

sedangkan kolom kedua cukup 30% saja. Kolom pertama kita buat lebarnya 70%. maka kita telah membuat suatu tabel dengan lebar hanya 80% lebar layar. Dengan source yang sama kita akan mencoba mewarnai kolom pertama dengan warna hijau dan kolom kedua kita beri background gambar. Selanjutnya tinggi baris kedua kita buat 200. dengan fungsi width. align dan valign.gif">Ini kolom kedua</TD> </TR> <TR> <TD>Ini kolom pertama baris kedua</TD> <TD>Ini kolom kedua baris kedua</TD> </TR> </TABLE> </BODY> </HTML> Maka hasilnya adalah seperti ini : Ini kolom pertama Ini kolom pertama baris kedua Ini kolom kedua Ini kolom kedua baris kedua Sekarang kita akan mencoba 4 atribut sekaligus yaitu width. kita akan buat kolom pertama baris kedua rata atas dan kolom kedua baris kedua rata kanan. Sehingga hasilnya seperti berikut : <HTML> <BODY> <TABLE WIDTH="80%" BORDER="1"> <TR> <TD bgcolor="#009900">Ini kolom pertama</TD> <TD background="background. height.<TD>Ini kolom pertama baris kedua</TD> <TD>Ini kolom kedua baris kedua</TD> </TR> </TABLE> </BODY> </HTML> Sekarang kita lihat bagaimana hasilnya jika kita jalankan di browser : Ini kolom pertama Ini kolom pertama baris kedua Ini kolom kedua Ini kolom kedua baris kedua Seperti kita lihat. Sehingga sourcenya seperti ini : <HTML> <BODY> <TABLE WIDTH="80%" BORDER="1"> . Untuk perataan.

maka kita akan membuat tabel yang memakai cellpadding dulu.gif" width="30%"> Ini kolom kedua</TD> </TR> . kita akan mencoba atribut Cellpadding dan cellspacing. itu adalah atribut2 baru yang saya tambahkan. Dengan penambahan tersebut. Agar kamu tahu bedanya.gif" width="30%"> Ini kolom kedua</TD> </TR> <TR height="200"> <TD valign="top">Ini kolom pertama baris kedua</TD> <TD align="right">Ini kolom kedua baris kedua</TD> </TR> </TABLE> </BODY> </HTML> Perhatikan huruf-huruf yang dicetak tebal dan merah.<TR> <TD bgcolor="#009900" width="70%"> Ini kolom pertama</TD> <TD background="background. maka di browser akan terlihat sebagai berikut: Ini kolom pertama Ini kolom pertama baris kedua Ini kolom kedua Ini kolom kedua baris kedua Berikutnya. dan kita akan menambahnya lagi dengan atribut cellpadding <HTML> <BODY> <TABLE WIDTH="80%" BORDER="1" CELLPADDING="5"> <TR> <TD bgcolor="#009900" width="70%"> Ini kolom pertama</TD> <TD background="background. Perhatikan tabel diatas barusan.

textnya menjauh dari tepi kolom.<TR height="200"> <TD valign="top">Ini kolom pertama baris kedua</TD> <TD align="right">Ini kolom kedua baris kedua</TD> </TR> </TABLE> </BODY> </HTML> Berikut ini hasilnya : Ini kolom pertama Ini kolom pertama baris kedua Ini kolom kedua Ini kolom baris kedua kedua Tahu kan bedanya? Ya. Lalu apa gunanya cellspacing? Mari kita lihat contoh berikut : <HTML> <BODY> <TABLE WIDTH="80%" BORDER="1" CELLSPACING="5"> <TR> <TD bgcolor="#009900" width="70%"> Ini kolom pertama</TD> <TD background="background. Itulah manfaat dari cellpadding.gif" width="30%"> Ini kolom kedua</TD> </TR> <TR height="200"> <TD valign="top">Ini kolom pertama baris kedua</TD> <TD align="right">Ini kolom kedua baris kedua</TD> </TR> </TABLE> </BODY> </HTML> . memberi jarak antara text dengan tepi kolom.

Berikut sourcenya : <TABLE WIDTH="80%" BORDER="1" CELLSPACING="5"> <TR> <TD bgcolor="#009900" COLSPAN="2"> Ini kolom gabungan</TD> </TR> <TR height="200"> <TD valign="top">Ini kolom pertama baris kedua</TD> <TD align="right">Ini kolom kedua baris kedua</TD> </TR> </TABLE> Perhatikan. karena kita akan menggabungkannya. Dan inilah hasilnya : Ini kolom gabungan Ini kolom pertama baris kedua Ini kolom kedua baris kedua . Dan sekarang tinggal 2 atribut lagi. hanya saja sekarang menggunakan cellspacing. Maka hasilnya adalah sebagai berikut : Ini kolom pertama Ini kolom pertama baris kedua Ini kolom kedua Ini kolom kedua baris kedua Yup. Sekarang kita akan mencoba menggabungkan kolom pertama dan kedua yang ada di baris 1. yaitu colspan dan rowspan.Saya gunakan source yang sama dengan sebelumnya. saya menempatkan atribut colspan di kolom pertama dan menghapus kolom kedua. kolom-kolom saling menjauh. Saya juga mengganti textnya dengan "Ini kolom gabungan".

dengan adanya perintah ini. Berikut sorcenya : <TABLE WIDTH="80%" BORDER="1" CELLSPACING="5"> <TR> <TD bgcolor="#009900" width="70%" ROWSPAN="2"> Ini kolom pertama gabungan</TD> <TD background="background.Lihat !! Kolom pertama dan kedua telah bergabung dan membentuk kolom gabungan. saya menempatkan rowspan di tag TD kolom pertama. sekarang tugas anda adalah membuat tabel seperti contoh pertama kali yaitu seperti ini : HEADER DAFTAR MENU Selamat Mencoba !! . Berikutnya kita akan coba menggabungkan kolom pertama dengan kolom pertama baris kedua.gif" width="30%"> Ini kolom kedua</TD> </TR> <TR height="200"> <TD align="right">Ini kolom kedua baris kedua</TD> </TR> </TABLE> Perhatikan. Dan inilah hasilnya : Ini kolom kedua Ini kolom pertama gabungan Ini kolom kedua baris kedua Nah. maka 2 baris kolom pertama akan digabung.

Terutama di halaman utama. saya sangat menyarankan agar anda meminimalisir penggunaan frame.htm dengan source seperti ini: <HTML> <FRAMESET COLS="20%. Bila anda terpaksa menggunakan frame maka gunakan juga tag <NOFRAME> sebagai antisipasi agar search engine dapat membacanya.htm dengan source seperti ini : <HTML> <BODY bgcolor="#FFFFCC"> Ini adalah halaman pertama.htm II Untuk membuat website dengan tampilan seperti diatas. Misalnya file pertama adalah file menu dan file kedua adalah isinya. Upayakan untuk mengganti frame dengan tabel. browser anda tak mendukung Frame </NOFRAME></HTML> . </BODY> </HTML> Terakhir. kita akan menggabungkan dua file tersebut ke dalam satu file yang kita beri nama gabung. Karena Search Engine sangat membenci frame dan membuat halaman websitemu tak terindex dengan sempurna. kamu perlu menyiapkan 2 buah file pengisi frame dan 1 buah file yang menggabungkan keduanya. halaman ini muncul di awal tampilan.htm"> </FRAMESET> <NOFRAME> Maaf.Belajar Membuat Frame Sebelum anda melangkah lebih lanjut. kita bisa menampilkan beberapa file html sekaligus. Dengan frame.htm IFrame isi. Sehingga tampilan pada browser kira-kira seperti ini : Frame menu. Oke.htm">Isi pertama</a> <A HREF="isi2. Frame adalah bingkai yang membagi jendela browser sesuai keinginan kita.htm"> <FRAME SRC="isi1. misalnya file 1 kita beri nama menu. 80%"> <FRAME SRC="menu.htm dengan source seperti ini : <HTML> <BODY bgcolor="#0000FF" TEXT="#FFFFFF"> <A HREF="isi1.htm">Isi kedua</a> </BODY> </HTML> Dan file 2 kita beri nama isi1.

Artinya. Dengan adanya nama tersebut. maka penggulung layar otomatis akan muncul bila diperlukan. ukuran frame tersebut tidak bisa diubah (diperkecil atau diperbesar). Nilai AUTO merupakan nilai default. dengan adanya atribut ini maka border dari frame yang bersangkutan tidak bisa digeser. 2. frame ketiga (frame pada kolom kedua dari baris kedua halaman) kita berinama "utama". kita bisa mengatur agar link yang terdapat pada halaman di frame lainnya bila di-klik akan memunculkan halaman targetnya pada frame "utama" tersebut.80%" BORDERCOLOR="#FF1493"> <FRAME src="/judul. mengatur fasilitas scroll (penggulung layar) dari frame. untuk memberi nama terhadap frame yang bersangkutan. NAME. Contoh: <FRAMESET ROWS="20%. 5. SCROLLING. Sedangkan untuk tag <FRAME> biasanya dilengkapi dengan atribut-atribut berikut: 1. Mari kita coba bedah satu per satu : • • • Tag FRAMESET adalah memberi tahu browser bahwa halaman ini akan terbagi menjadi beberapa kolom yaitu 20% dan 80%. warna yang didefinisikan oleh tag yang lebih dalam menang atas warna yang didefinisikan oleh tag yang luar. BORDERCOLOR.Untuk melihat hasilnya silahkan klik disini.70%" BORDER="10"> <FRAME src="/menu. Nilainya bisa YES. NO atau AUTO. Dalam hal ini. bila atribut SCROLLING tidak dituliskan. MARGINHEIGHT untuk menentukan jarak antara batas atas atau batas bawah frame dengan isi frame. 6. Tag FRAME memberi tahu browser halaman yang dimaksud Tag NOFRAME bertugas sebagai alternatif apabila browser tak mampu menangani fungsi frame.htm" SCROLLING="YES" NAME="utama"> </FRAMESET> </FRAMESET> Dalam contoh di atas. Dengan kata lain. sedang AUTO berarti penggulung ada bila diperlukan (isi frame melebihi ukuran layar) dan tidak ada bila tidak diperlukan (isi frame dimuat oleh layar). Hal ini perlu agar search engine masih dapat menikmati menu dan mengindex halaman web dengan sempurna.htm">BAB II</A> . Bingung? Misalnya.htm" BORDERCOLOR="#9C661F"> <FRAME src="/isi. 3. browser anda tak mendukung Frame bisa anda ganti dengan tulisan lain atau kode HTML lain sehingga pengujung masih dapat menikmati websitemu. Maka terlebih dahulu kita harus memberi nama terhadap frame tersebut. 4.htm" NORESIZE> <FRAMESET COLS="30%. NO berarti penggulung selalu tidak ada. Tulisan Maaf. Nilai YES berarti penggulung selalu ada. Adapun atribut NAME diperlukan dalam kaitannya dengan fungsi navigasi dari halaman ber-frame. NORESIZE.htm terdapat link dengan kode HTML seperti berikut: <A HREF="bab2. fungsinya sama dengan BORDERCOLOR pada tag FRAMESET. pada halaman menu. MARGINWIDTH untuk menentukan jarak antara batas kiri atau batas kanan frame dengan isi frame. Misalnya kita ingin mengatur agar suatu link bila di-klik akan memunculkan halaman targetnya dalam frame tertentu. Kegunaannya akan dijelaskan kemudian. Untuk halaman home (halaman utama) saya sarankan di antara tag <NOFRAME> anda masukkan saja link-link yang menuju ke file-file HTML anda.

_self : halaman yang dipanggil akan mengisi tempat yang sama.htm akan kita arahkan pada frame "utama" maka kita bisa menyisipkan tag <BASE TARGET="utama"> diantara tag <HEAD> dan </HEAD>. Agar file bab2. Berikut beberapa cara pengarahan link dengan atribut TARGET: • • • • _blank : halaman yang dipanggil akan muncul pada jendela baru (ini sudah kita pelajari) _top : halaman yang dipanggil akan mengisi penuh jendela yang sama. semua link yang ada dalam halaman tersebut akan diarahkan ke frame yang dicantumkan dalam BASET TARGET. satu tingkat lebih tinggi dari FRAME tempat link yang bersangkutan. . secara otomatis. kita tidak perlu lagi menuliskan dalam setiap link atribut TARGET tersebut satu-persatu. kita harus memberi atribut TARGET seperti ini: <A HREF="bab2.htm itu muncul pada frame "utama" saja. bila link tersebut dalam sebuah frame maka halaman yang dipanggil akan mengisi frame tersebut. Dengan demikian.Bila kata BAB II di-klik maka akan membuka file bab2. kan tentang atribut TARGET pada pelajaran tentang LINK? Seandainya semua link yang terdapat dalam file menu.htm.htm tersebut akan mengisi seluruh jendela browser.htm" TARGET="utama">BAB II</A> Masih ingat. meskipun tadinya ada frame. _parent : halaman yang dipanggil akan akan mengisi FRAMESET. Karena dengan adanya tag BASE TARGET itu. Tapi halaman bab2. Artinya halaman yang berframe akan hilang. Kecuali link yang mempunyai TARGET tersendiri.

bahwa tak semua Search Engine membaca META Tag kita. Perlu diingat. sekarang kita lihat informasi apa aja yang bisa kita masukkan : &ltHTML> &ltHEAD> &ltMETA NAME="Author" Value="Lutvi Avandi"> &ltMETA NAME="KeyWords" Value="belajar. Pada script diatas adalah Lutvi Avandi. Keterangan-keterangan tersebut di deklarasikan dengan menggunakan tag <META>. Karena Search Engine saat ini tak hanya memperhatikan informasi dari Meta Tag. Jadi kalo ada seseorang yang menggunakan Search Engine lalu mengetikkan kata-kata yang kita masukkan diatas. Katakata yang di bold dan juga link-link yang ada. bahwa informasi pada Meta Tag ini. TITLE digunakan untuk menamai halaman web site dan nanti text Title ini bakalan ditempatkan di pojok kiri atas browser. Discription adalah info singkat seputar web site kita. Kebanyaknya search engine justru mengambil informasi dari tag TITLE.Keterangan Situs (META) Kita dapat menempatkan keterangan-keterangan umum soal situs kita di antara tag <HEAD> dan </HEAD>. Oke. bukanlah segala-galanya. atau beberapa search engine yang masih menggunakan metode lama akan membutuhkannya. . H1. Meskipun begitu. Terkadang mereka mengambil paragraph pertama website kita. karena itu usahakan awal-awal paragraph yang kita buat menceritakan website kita. maka link ke situs kita bakalan ditampilkan di Search Engine tersebut. Lalu KeyWords yaitu kata kunci. karena websitewebsite directory.H4.gratis"> &ltMETA NAME="Description" Value="Belajar Komputer Gratis ! Cara baru pintar komputer tanpa biaya"> &ltTITLE>Belajar Komputer GRATIS</TITLE> </HEAD> &ltBODY> </BODY> </HTML> Pertama kita jelasin siapa pembuat situs ini (Author). Namun perlu diingat. Tag-tag keterangan pada meta ini nantinya bakalan di baca oleh Search Engine bila kita mendaftarkan situs kita pada Database mereka.. hendaknya kita tetap perlu untuk memuat Meta tag ini.komputer.

BGCOLOR="warna" => menentukan warna background 2. 6. BEHAVIOR="scroll|slide|alternate" => mengatur perilaku gerakan text (scroll = berputar. ini dia caranya. TITLE="pesan" => Pesan yang akan muncul saat mouse berada diatasnya 5.Membuat text berjalan Kamoe punya sesuatu yang pengen ditampilin secara berjalan ?? Nah. atribut yang bisa digunakan : 1. semakin banyak berlatih kamu akan semakin pintar dan semakin mahir !! Anda juga bisa merubah text dengan gambar. WIDTH="lebar" => mengatur lebar blok text dalam pixel atau persen 8. makin besar angka semakin cepat gerakannya. SCROLLDELAY="angka|-1|infinite" => mengatur jumlah perulangan gerakan 7. DIRECTION="left|right|up|down" => menentukan arah gerakan text 3. slide = bergerak sekali lalu berhenti. alternate = text bergerak ke kiri dan kanan) 4. SCROLLAMOUNT="angka" => mengatur kecepatan gerak dalam pixel. Masih ingat kan pelajaran cara menampilkan gambar? Selamat Mencoba !! . HEIGHT="angka" => mengatur tinggi blok text dalam pixel Sebagai contoh lihat script berikut : <MARQUEE WIDTH="70%" HEIGHT="30" BGCOLOR="red" DIRECTION="left" LOOP="-1" BEHAVIOR="scroll" SCROLLAMOUNT="2"> Text yang akan ditampilkan </MARQUEE> Dan hasilnya : Nah. silahkan dicoba-coba sendiri segala atribut yang ada. Tag yang digunakan ialah : <MARQUEE>text yang ditampilkan</MARQUEE> Sementara.

PHP hanya bisa menampilkan tagtag HTML aja.com) maka kamoe dapat mengisi ACTION dengan "/cgibin/homestead/mail. artikel di website akan terlihat lebih rapi dan terkesan tak terlalu panjang. masalah.. ada banyak cara and yang paling sederhana dengan menyisipkan tag &ltHR>.Membuat garis pembatas Ada saatnya kita perlu membagi halaman web site kita dengan sebuah garis. Untuk menangani bisa menggunakan script ASP. HTML nggak bisa menangani database. gunain aja tag berikut : <FORM .. Trus. dan inget ! pilih post sebagai METHOD . jadi tag form ini murni milik HTML. Membuat formulir Formulir dalam Tapi yang jadi database kamoe menggunakan HTML sangat diperlukan untuk memasukkan data ke dalam database.. </FORM> file_tujuan ACTION="file_tujuan" METHOD="post|get"> adalah alamat file tempat memproses file. Bila kamoe anggota Geocities (http://www. Selamat Belajar Terus!! Tag INPUT . cukup dengan tag itu sebuah garis akan muncul seperti ini : Tag ini punya atribut sbb : WIDTH="angka" => untuk menentukan lebar garis dalam satuan pixel / persen ALIGN="left|right|center" => menentukan perataan garis SIZE="angka" => menentukan ukuran ketebalan garis. knapa pembuatan formulir ini diajarin di kelas HTML ?? Sebab.. Ganti member_name dengan nama member pada geocities atau Yahoo! anda.. PHP ataupun CGI tapi gue saranin 'tuk PHP karena paling mudah and nggak rumit-rumit amat.hehehe.geocities. yang bisa bikin Formulir cuman HTML doang. Kalo PHP nggak bisa.. Sebelum bikin formulir kita musti ngasih tahu dulu ke browser kalo bakal ada formulir di website kita.pl?member_name" ini adalah alamat tempat memproses form dari website anda. dan hasilnya akan dikirim ke email anda di yahoo!. Selanjutnya tinggal memasukkan perangkat masukkan dari pengunjung website kita yang akan dijelaskan di pelajaran-pelajaran yang ada di bawah ini .. NOSHADE => menghilangkan bayangan Dengan menggunakan baris ini..nya.

Password . Nah selamat mencoba Menu Dropdown . SIZE="angka" => menentukan panjang kotak input dalam karakter MAXLENGTH="angka" => menentukan panjang karakter maksimum yang bisa dimasukkan. dll. item 1 item 2 item 3 5. Radio . untuk type checkbox atau radio merupakan nilai item yang dipilih.Digunakan untuk menghapus daftar isian yang udah diisi oleh pengguna Reset 6. CheckBox . Musti di berikan kecuali untuk type Submit dan reset. Atribut yang dipake : NAME="text" => mendefinisikan objek input. Reset .untuk membuat daftar pilihan dan hanya boleh memilih salah satu. password.Tag ini tak memerlukan tag penutup.digunakan untuk membuat masukan password dimana karakter yang dimasukkan akan berubah menjadi * ******** 3. Submit .digunakan untuk menerima masukkan pilihan lebih dari satu item 1 item 2 item 3 4. Untuk submit atau reset merupakan tulisan pada tombol CHECKED => Hanya untuk type checkbox dan radio untuk menentukan pilihan yang terpilih secara otomatis (default) TYPE => menentukan type input yang dibuat Type input yang dapat dibuat antara lain : 1. Text . penekanan tombol.digunakan sebagai tombol untuk mulai memproses masukkan pengunjung Submit Inputan tersebut diletakkan diantara Tag <FORM> dan </FORM>. Digunakan untuk meminta masukkan berupa text.digunakan untuk membuat kotak masukan text þÿ 2. VALUE="text" => untuk type text menentukan text yang tertulis di kotak input.

maka akan ditambahkan satu baris kosong dan bila pengunjung memilihnya maka berarti null atau tak memilih. VALUE adalah nilai yang akan dikirim bila pengunjung memilih menu1. maka berapa panjang halaman website kamoe. gunakan menu ini.</TEXTAREA> COLS lebar text area dalam satuan karakter. titik. atau koma. pujian.--> </SELECT> nama adalah nama objek masukan. kamoe kudu ngasih ruang buat mereka. Bila atribut ini tak dicantumkan. Perhatiin contoh ini : &ltFORM> Isi <TEXTAREA Komentar </TEXTAREA> </FORM> komentar COLS="35" default anda ROWS="7"> disini Dan Isi hasilnya komentar : anda . hujatan. maka default baris yang dicantumkan adalah satu baris. SELECTED adalah menu yang terpilih secara otomatis. Gunain aja tag berikut : <TEXTAREA COLS="angka" ROWS="angka">. ROWS tinggi text area dalam satuan karakter.Menu dropdown bisa menjadi alternatif penggunaan input radio. Berguna untuk menentukan berapa baris menu yang ingin ditampilkan. Bisa apa aja tapi ingat jangan menggunakan spasi. Tag yang diperlukan : <SELECT NAME="nama"> <OPTION VALUE="nilai1" SELECTED>menu1 <OPTION VALUE="nilai2">menu2 <OPTION VALUE="nilai3">menu3 <!--dan seterusnya.. biar ringkas. kurasa itu dulu deh ! Input Komentar Terkadang pengunjung ingin memberi komentar baik itu kritik. Bila atribut ini tak dicantumkan. titik-titik bisa dihilangkan atau diganti kata-kata yang akan muncul secara otomatis saat pengunjung mengunjungi halaman web site kita. Script diatas akan menghasilkan menu berikut : þÿ Oke. Sebagai tuan rumah yang baik.. saran. Nah. Ada satu atribut lagi yaitu Size yang ditempatkan dalam tag SELECT. dll.. Bayangin kalo pilihan yang ada jumlahnya puluhan bahkan ratusan seperti nama negara atau nama kota..

Apakah anda tak ingin membagi website anda dengan orang lain sehingga tak melakukan promosi website? Sudah menjadi impian para webmaster agar situsnya dikunjungi oleh banyak orang. akan terkirim pula kode rahasia itu. Cara Promosi Website Jadi. Atau kode data yang udah di tentukan dan ingin dikirimkan bersamaan dengan isian dari pengunjung. Nggak percaya? Di tutorial yang lain anda akan tahu bagaimana memanfaatkan website untuk mencari uang. terlebih dahulu anda perlu mendapatkan trafik alias kunjungan yang cukup banyak.web. Maka tag yang perlu di masukkan : <INPUT TYPE="hidden" NAME="website" VALUE="http://gudanginfo. . bagaimana cara mempromosikan website kita? Inilah yang akan dibahas di sini. Maka tag yang digunakan : <INPUT TYPE="hidden" NAME="nama" VALUE="nilai"> Misalkan kita akan mengirim alamat website tempat pengunjung mengisi formulir. Untuk itu kita perlu melakukan promosi website. jadi disini takkan di uji cobakan. Bahkan bila anda mampu meraih pengunjung yang banyak. peluang usaha bisa anda gunakan. Belajar Promosi Website Kenapa perlu promosi? Ya. Berikut ini ada beberapa sub menu lagi yang perlu anda kunjungi dan pelajari agar anda mampu mendatangkan banyak pengunjung ke website anda.Komentar default disini Oke kaan ?? Mengirim data rahasia Suatu saat mungkin anda perlu mengirimkan data secara rahasia tanpa sepengetahuan pengunjung. karena kita ingin mendatangkan banyak pengunjung ke website kita. Ingat! tag ini takkan ditampilkan di halaman browser.id"> Maka bersamaan dengan isian yang dikirimkan pengunjung. Misalnya : alamat web site tempat ia mengisi formulir. Namun.

Yang pertama adalah Onpage Optimization atau Optimasi didalam.. Namun ada pula yang menyediakan secara gratis dan tanpa iklan sama sekali Oke. Kebanyakan SE dan direktori menjadikan Title Tag sebagai hal yang paling penting dalam merangking website.. Title Tag Optimization Title Tag Optimization adalah salah satu hal yang paling penting dalam proses optimasi search engine (SE). bahwa jika seseorang menggunakan search engine (misalnya google) maka setelah ia memasukkan keyword (kata kunci) maka akan muncul hasil pencarian yang sesuai dengan kata kunci yang ia inginkan. Berikut ini cara mengoptimalkan title tag : 1.gratis. Tag-tag yang dipergunakan meliputi header. 5. Hal ini juga penting sebagai judul dalam hasil pencarian search engine.. biar seluruh pengguna Internet bisa melihat situs kamoe. anda akan mampu menempatkan website anda di peringkat atas. Ada banyak ISP yang menyediakan free web space (Space web gratis) untuk meletakkan file-file kamoe. 4. Semua halaman di websitemu harus memiliki title tag yang unik Title tag harus ditempatkan langsung dibawah tag Sertakan 1-2 keyword penting di title tag Gunakan hanya keyword dan kalimat yang ada di isi halaman Title tag harus berupa kalimat yang mudah dibaca Jangan meletakkan 2 keyword yang sama dalam judul . Ini adalah salah satu upaya untuk mengoptimalkan hasil pencarian pada search engine. image. 3. Nah. Untuk lebih lengkapnya.tis. Optimasi di dalam halaman meliputi penggunaan aneka tag HTML yang mendukung pencarian search engine. inilah langkah-langkah yang musti kamoe pelajari. Tapi kebanyakan mereka memasukkan iklan di website kita.Meng-Online-kan Website Takkan ada gunanya kamoe bikin website tapi cuman di konsumsi sendiri. Atau biasa disebut ISP (Internet Service Provider). title dan juga pemilihan text yang tepat untuk setiap halaman. untuk membuat websitemu online dan dapat diakses oleh pengunjung dari berbagai penjuru dunia : Search Engine Optimization (SEO) Apa itu SEO? SEO adalah singkatan dari Search Engine Optimization. 6. Nah. Seperti anda tahu. Minimal di halaman pertama hasil pencarian Search Engine. 2. maka kamoe perlu meletakkan di Komputer yang selalu terhubung dengan Internet. dengan metode SEO ini. Nah.tis. GRATIS ?? ya. Cara Mengoptimalkan Website SEO memiliki 2 bagian untuk mengoptimalkan website. anda bisa langsung menuju pelajaran yang tersedia..

Hindari menggunakan koma an gunakan karakter '|' untuk mengganti koma 12. Tempatkan semua keyword di body text 2. Jika kamu terpaksa menggunakannya. Ketikkan saja keyword anda dan dia akan menunjukkan pencarian yang telah dilakukan selama sebulan terkait dengan keyword tersebut 2. Pilih keyword yang populer namun sedikit pesaing 4. Buatlah halaman layoutmu tetap sederhana.dll. Ini digunakan SE untuk menentukan inti sebuah web dan merangkingnya. tabel. 6. Sebagai contoh. 4. SE membenci frame. Update isi body yang penting secara teratur. grafik. hala ini akan dianggap sebagai spam oleh SE 8. Jangan meletakkan keyword yang sama secara berdampingan. Jangan menggunakan text yang sangat kecil atau link di halamanmu 9. Jangan menggunakan text yang memiliki warna yang sama dengan background. Jangan menggunakan frame untuk halaman anda. Memilih keyword yang paling sesuai untuk sebuah website sangatlah penting. 12. Ini akan dianggap spam oleh SE 8. Cobalah menyertakan keyword dalam bentuk tebal atau miring 10. warna. Jangan meletakkan keyword yang sama berdekatan.7. Tempatkanlah keyword utama sebagai awal judul 11. Gunakan kalimat keyword yang spesifik dibanding keyword tunggal. Keyword anda haruslah 3-6% dari seluruh text. 3. maka gunakan tag . Ikutilah langkah-langkah di atas untuk mengoptimalkan body textmu. Keyword terpilih akan digunakan selama proses optimalisasi untuk meningkatkan rangking website. Mempertimbangkan penggunaan kedua-duanya bentuk tunggal dan bentuk jamak dari kata kunci yang penting di title tag 9. Body text adalah text di halaman web yang berada diantara tag dan Tips untuk mengoptimalkan Tag Body 1. Gunakan Keyword Selector Tool atau Good Keyword (gratis) untuk menemukan keyword yang tepat. 5. Ini berarti 3-6 keyword per 100 kata. akan lebih baik menggunakan "permen coklat" daripada "permen" . gambar. Judul hendaknya sepanjang 60-90 karakter termasuk spasi 10. Body text ditampilkan oleh SE di hasil pencarian mereka. Keyword Research Tips Keyword Research berarti menemukan keyword yang tepat untuk websitemu dan akan membawa pengunjung yang banyak ke website melalui search engine. Sertakan fungsi javascript dan CSS di file yang berbeda 11. Jangan terlalu sering mengubah judul Body Text Optimization Body text sangat penting dalam mengoptimalkan pencarian. Tempatkanlah keyword yang digunakan di judul ke dalam body text 7. Ini dianggap sebagai "text tak terlihat" oleh SE dan situs kamu akan di black list karena ini. Berikut ini tips dan trik Keyword Research: 1. Ini meliputi semua isi dokumen termasuk text. Cobalah menempatkan keyword utama di awal body 3. Lihat jumlah hasil di google untuk keywordmu dan pilih keyword yang sering digunakan untuk mencari dan sedikit hasilnya.

Link Building Tips 1. Anda harus melink website yang bagus saja dan memiliki rangking bagus dan telah online lebih dari 6 bulan.DomainAnda. Buatlah program pertukaran link di website anda. Semakin banyak link berkualitas dari situs yang relevan. 3. Hindari penggunakan kata sambung seperti di. Algoritma SE menggunakan formula rangking yang .com">Kalimat Keyword</a> 7. Link dari situs ke situs haruslah berupa text. Gunakan keyword salah eja dimana itu akan membawa lebih banyak kunjungan. apa. karena kata tersebut akan diabaikan oleh kebanyakan SE 7. dan. Jika anda memberikan link ke partner pertukaran. Cari Google dengan menggunakan keyword utamamu.5. 11. Hubungi pemilik website lain yang berhubungan untuk mendiskusikan pertukaran link 8. Pilihlah keyword yang relevan dan unik untuk setiap halaman web. Jangan melakukan pertukaran link dengan situs yang tak berhubungan dengan websitemu. jika keyword utamamu "kursus komputer online". 6. maka gunakanlah kursuskomputeronline. Cobalah menggunakan domain yang mengandung keyword utama. 12. Cek pagerank setiap website yang anda link.com atau kursusonline. pastikan untuk memberikan format sebagai berikut : <a href="http://www. Gunakan Misspelled Keyword Generator untuk mencari keyword salah eja yang berhubungan dengan keywordmu. adalah. Link building juga memiliki tempat yang sangat penting dalam proses mengoptimalkan Search Engine. Cobalah untuk membuat deskripsi link secara singkat 9. cobalah membangun link dengan website bagus yang relevan 2. Link yang datang tak hanya meningkatkan jumlah pengunjung namun juga meningkatkan rangking websitemu di SE. Maka. Link berkualitas dari situs dengan rangking tinggi akan memberi lebih banyak daripada link banyak dari situs dengan rangking rendah. 4. 10. Itu akan meningkatkan rangking SE anda untuk kata tersebut. Pilih keyword yang bisa disatukan dengan judul dan body halamanmu Link Building and Link Popularity Link Populary adalah jumlah website yang melakukan link ke websitemu. ca. Cek 10 website teratas di hasil pencarian untuk melihat apakah ada kesempatan untuk melakukan pertukaran link dengan website ini. Header tag digunakan oleh SE untuk mengenali isi website. Header Tag Optimization Header Tag Optimization adalah bagian yang penting dalam SEO. Gunakan salah satu keyword utama anda. Pertimbangkan untuk menggunakan bentuk jamak dan tunggal untuk keyword 8. be. Maka anda harus mencoba melakukan hubungan dengan webmaster web berkualitas daripada dengan 100 website yang tak berkualitas. bukan gambar.com atau domain lain yang berisi keyword utamamu 9. Pastikan halaman link anda terlink dan terlihat di halaman utama. 6. Itu akan meningkatkan link 5. a. dll. maka semakin baik rankingmu dan semakin banyak trafik didapat. are. Submit ke direktori yang bagus yang memiliki pagerank bagus (harus lebih dari 4) dan telah online lebih dari 1 tahun. Sebagai contoh. 10.

harus ditempatkan sedekat dengan tag di halamanmu. . Maka tempatkan keyword sesuai tempatnya. Tempatkan keyword dimana ia terkandung di dalam text di bawah header saja. Tag untuk keyword paling utama. Tips untuk mengoptimalisasi Header Tag untuk SE : yang paling Gunakan 2-4 header tags .memberi titik berat pada keyword yang digunakan di header text. didefinisikan dengan heading terbesar. mungkin . Begitu seterusnya. didefinisikan dengan heading terkecil. menjadi pertimbangan penting dan memiliki kepentingan yang lebih kecil didalam SEO. . Ini didefinisikan dengan tag hingga . yang lebih rendah dan lebih rendah lagi. di setiap halaman website Tag ini harus mengandung keyword yang spesifik bersama dengan text dekriptif yang relevan dengan isi halaman Cobalah untuk menyertakan kalimat kunci yang paling penting di header tags jika bisa Letakkan kata kunci utama di tag menjadi pertimbangan utama dan yang paling kecil.

SE biasanya mencari kata kunci di link dan mempertimbangkan text pengait dari link yang datang untuk merangking halaman. maka gunakan "webmaster resource" sebagai ganti home. Buku Tamu. Mailing List (Milis) dan Open Directory. 6. Buatlah text link dan gunakan menu navigasi umum untuk semua halaman. Akan sangat konyol nantinya jika anda mempromosikan website tentang masakan di forum diskusi yang membicarakan musik. Masing-masing Ruang Publik memiliki ciri khas tersendiri dan keunggulan serta kekurangan masing-masing. Jangan mengulang link di seluruh halaman 10. Hindari menggunakan link javascript karena tak terbaca oleh SE 8. Anda harus menggunakan kalimat kunci di dalam link itu sendiri dan mungkin juga disekitar link 3.Text Hyperlink Optimization Mengoptimalkan Hyperlink dapat meningkatkan rangking di search engine. ruang publik-ruang publik tersebut sangatlah bermanfaat untuk meningkatkan jumlah trafik anda. 9. Ini adalah salah satu aspek penting dalam SEO. SE akan memberi perhatian spesial pada kata yang kamu gunakan di dalam link tersebut. Ada beberapa hal yang perlu diingat dalam pemanfaatan ruang publik agar potensi kunjungan ke website anda semakin besar. jika keywordmu Webmaster Resource. Shout Box. Ruang Publik ada beberapa macam yaitu : Forum Diskusi. Website flash harus memiliki text link di bawah halaman sebagai tambahan navigasi flash Promosi Web Ruang Publik Apa itu Ruang Publik? Ruang Publik disini adalah website-website yang menyediakan ruang terbuka untuk dapat diisi oleh publik. terutama home. Gunakan maksimum 40-50 karakter di dalam text link 5. Pastikan halaman di websitemu terhubung satu sama lain. Jika kamu melakukan link ke suatu halaman. Gunakan kata/kalimat kunci yang menggambarkan target halaman 4.gif" 7. Anda harus pandai-pandai mencari komunitas yang sesuai dengan website anda. Dengan memanfaatkan ruang publik-ruang publik tersebut. Maka pandai-pandailah memilih ruang publik. 2. Misalnya kalimat kuncinya "website resource". Adapun hal-hal yang bisa dilakukan di ruang publik ini adalah sebagai berikut : . kita akan dapat melakukan promosi secara gratis dan berpotensi mengantarkan pengunjung website tersebut ke website anda. Cobalah menggunakan kalimat kunci sebagai nama file html atau gambar.html" atau "website-resource. Tips untuk Optimasi Text Link 1. Gunakan text deskriptif pada semua text link. maka gunakan sebagai nama file menjadi "website-resource. Namun. Saya akan membaginya menurut bentuk ruang publik masing-masing : Forum Diskusi Pengunjung forum ini adalah suatu komunitas tertentu. Contohnya.

Pastikan setiap postingan anda bermutu sehingga penghuni forum akan mengenal anda sebagai profesional. Pastikan milis tersebut se-visi dengan website anda. Siapkan signature yang menarik. Berikut ini contoh kata-kata yang informatif dan promotif : PROMOTIF INFORMATIF Kunjungilah websiteku Saya dari http://belajar. Signature ini akan muncul di setiap pesan yang kamu kirimkan. Anda bisa mengirimkan resumenya saja dan memberikan link untuk membaca artikel secara lengkap. silahkan profesional.com . Shout Box dan Buku Tamu Pesan di Shout Box ini sebenarnya sangat jarang dilihat. Hindari OOT Pilihlah subject surat yang menarik dan mampu menggambarkan isi email dengan baik. maka anda bisa langsung beriklan disini. Hindari OOT alias Out Of Topic. ada beberapa hal yang perlu anda perhatikan : • • • • • • • Pilihlah milis yang memiliki anggota cukup banyak (minimal 100 orang) Bila anda menemukan milis yang tanpa moderator.website.com Saya memiliki banyak informasi soal Butuh informasi soal cara membangun website yang website? langsung saja efektif dan ingin membaginya klik http://belajarbersama anda di http://belajarwebsite. pada kata-kata yang informatif. akan lebih baik jika kata-kata yang dipilih cenderung informatif daripada promotif. cukup gunakan text saja. kita memperlakukan pemilik website sebagai rekan atau sahabat kita dan seolah-olah anda ingin memberinya sesuatu yang berharga. mohon masukan untuk berkunjung ke website baru saya di http://belajarhttp://belajarwebsite. Ayoo Kunjungi. Buatlah signature emailmu semenarik mungkin. Berusahalah menyelesaikan permasalahan yang ada di forum dengan solusi-solusi cerdas. saya ada website. Usahakan tak bernada promosi.• • • • • Isilah profil secara lengkap terutama nama website dan URL website. http://belajarWebsite anda bagus. karena tak semua web mail mendukung HTML. Ingat! Jangan gunakan gambar.com Perhatikan. Mailing List (Milis) Mailing List adalah bentuk komunikasi melalui e-mail yang akan disebarkan ke semua anggota milis. segeralah bergabung.com di http://belajar.Website informasi menarik yang sesuai dengan segala informasi dengan website anda di menarik. Untuk melakukan promsi melalui milis ini. Namun. . Hal ini sangat penting untuk meningkatkan reputasimu di forum tersebut.kebetulan berkunjung ke website website. Kirimlah update terbaru websitemu di milis.com website.com anda. Postingkan sedikit hal tentang website anda di forum tersebut.com website.com Saya baru saja membuat Saya lihat website anda cukup website nih. http://belajar-website.

miring atau garis bawah Atribut ALT pada gambar Awal dan akhir halaman Faktor Eksternal Halaman yaitu hal-hal terkait dengan link dari website lain yang menuju ke halaman anda 1.Namun di kalimat promotif. 6. Dan disini. di webmaster tutorial kita akan belajar meningkatkan posisi kita bahkan meningkatkan page rank kita di search engine. anda bisa dengan mudah mengotak-atiknya sesuai dengan aturan diatas. Tag header Tag title Kata-kata yang ditebali. Lalu tawarkan sebuah solusi yang ada di website anda. 4. 2. Hal ini akan menjadi sebuah informasi yang sangat berharga bagi pemilik web dan sudah pasti dia akan berkunjung ke website anda. ada baiknya anda mencari kelemahan website tersebut. Rangking ini berdasarkan pada banyak faktor diantaranya sebagai berikut : Faktor Internal Halaman yaitu apakah sebuah keyword yang dipilih terdapat pada : 1.link Untuk faktor internal. Meraih Rangking Teratas Meraih posisi teratas dalam hasil pencarian search engine adalah idaman setiap webmaster. 5. Karena faktor eksternallah yang justru paling efektif meningkatkan posisi kita di search engine.link Jumlah dan type link yang digunakan untuk me-link IP Address dari website yang me. TIPS : Sebelum beriklan di shout box atau buku tamu. 2. 4. Maka silahkan buat kata-kata anda sendiri sehingga mampu membuat pembaca merasa dirinya mendapat informasi yang berharga. 3. Meningkatkan Page Rank . pemilik web cenderung kita perlakukan sebagai konsumen atau "target iklan". Anda juga bisa membacanya di halaman Search Engine Optimization yang khusus membahas cara meningkatkan rating search engine melalui faktor internal. 3. kita akan membahas tentang bagaimana mendapatkan posisi teratas melalui faktor eksternal. 5. Nah. Apalagi kalo hasil yang didapat menggunakan keyword yang memiliki daya saing paling tinggi dengan hasil pencarian yang mencapai ribuan halaman website. 7. Website mana yang me-link ke halaman anda Jumlah website yang me-link Google Page Rank dari halaman yang me-link Judul halaman website yang me-link Text yang digunakan untuk me. Apa itu Page Rank? Page Rank adalah rangking yang diberikan Google terhadap suatu halaman yang terindex ke database mereka.

net. miring atau digaris bawahi Atribut ALT pada gambar Bagian awal dan akhir halaman Bila semua telah digunakan. Oh iya. Sekarang anda perlu mengunjungi website tersebut satu per satu. mereka pasti mendapat banyak link dari website lain. maka anda perlu waspada dan bekerja keras untuk membuatnya sesuai dengan milik webmaster-tutorial. sehingga anda akan lebih mudah nantinya. Nah. jika ternyata ada "lubang"-nya maka itulah keunggulan anda. kita punya banyak rencana cadangan.net akan muncul. hehehe. dan lihatlah toolbar google anda. cobalah menganalisa halaman webmaster-tutorial. karena ini cuma karangan. Selanjutnya silahkan buka Google. Namun terlebih dahulu anda harus menempatkan link website mereka di website anda sehingga mereka akan dengan senang hati pula untuk menempatkan link website anda..net.net kita jadikan target operasi kita. Apakah mereka menggunakan kata webmaster dan tutorial pada bagian-bagian berikut: • • • • • Tag Header Tag Title Kata-kata yang ditebali. Kalo kebetulan sama. sekarang kita telah menentukan target operasi kita yaitu website webmaster-tutorial. maaf aja deh.com.net. Cobalah untuk melakukan pertukaran link dengan mereka. Dalam sekejap website-website yang memasang link ke webmaster-tutorial. Namun. Temukan Link Pendukung webmaster-tutorial. Saya ndak tahu apakah www. Namun.. Anda bisa mendownloadnya di http://toolbar.webmastertutorial. Temukan Kelemahannya Masih ingat pelajaran tentang SEO untuk faktor internal? Ya. Anggap saja peringkat teratas saat ini adalah http://www.net mampu meraih posisi teratas tentu bukan kebetulan.webmaster-tutorial. Nah. Hal ini penting karena di dalam Google Toolbar anda akan dapat mengetahui page rank dari website tersebut. Caranya ketikkan kode berikut di Google : link:webmaster. terlebih dahulu anda membutuhkan browser yang memiliki Google Toolbar. Pastikan anda menggunakannya dan tentu saja yang sudah ada jangan dihilangkan.net.net benar-benar ada atau ndak.tutorial. Selanjutnya webmaster-tutorial. Lalu masukkan kata kunci yang akan kita perjuangkan. Tapi jangan khawatir. Kita lihat berapa website yang melakukan link ke webmaster-tutorial.net.net. . Jika mereka memiliki page rank lebih dari 4 maka itulah target utama kita dan usahakan menemukan link contact webmaster atau pemiliknya. Misalnya kita telah memilih kata "webmaster tutorial".net..google. cara ini belum tentu berhasil. Selanjutnya anda bisa langsung melakukan penawaran pertukaran link ke webmaster webmaster-tutorial. Sekarang kita perlu mengetahui website-website yang melakukan link ke webmaster-tutorial. anda lihat website apa yang meraih peringkat teratas. Bagimana caranya? Silahkan menyimak : Tentukan target! Gunakan Google dan mari kita mulai mencari target operasi.Cara paling mudah untuk meningkatkan page rank adalah dengan meniru kesuksesan dari peraih tingkat pertama dan membuatnya kembali dengan lebih baik.net dengan melihat source codenya.

Banyak orang mempergunakan situs ini sebagai situs uji coba koneksi website mereka. Bila masih ada waktu. Banyak sekali direktori di Internet namun.banyaklah berdoa dan ulangi lagi 2 minggu lagi. maka semakin tinggi pula peringkatmu di search engine Tips Yahoo! Yahoo! Directory adalah situs standart. Cantumkan juga kenapa website mu begitu perlu untuk ditampung di database mereka.heee Dan jangan lupa. Tapi kalo kamoe bikin situs tentang cara efektif memelihara lele. Yah ! mereka memang unggul di bidang per website-an. Bila kamoe udah cukup yakin. Semakin banyak kamu mendapatkan link yang mengarah ke websitemu.he. biasanya direktori paling tak suka dengan website redirect. coba periksa situs kamoe.. maka kunjungi Yahoo! dan cari Kategori yang tepat untuk situsmu. satu link dari Yahoo! memiliki rangking yang jauh lebih baik daripada 10 website selain Yahoo! Mendaftar pada Yahoo! susah . Susah karena mereka ini manusia dan gampang karena kalo situs kita sesuai dengan selera mereka. apakah perlu gambar itu disini. Sebelumnya. Mulai sekarang fokuslah terus pada website-website yang se-visi dengan websitemu dan mencobalah terus untuk dapat melakukan pertukaran link dengan pemilik websitewebsite tersebut. apakah tidak menyakitkan mata orang yang melihatnya. Tapi pastikan situsmu belum tercantum dalam daftar mereka. barulah ke direktori yang kecil page ranknya. dan ingat catatan kecil itu sebaiknya berbahasa Inggris. apakah udah cukup rapi. he. cobalah untuk memilih dan memprioritaskan pada direktori yang memiliki page rank tinggi. Biar mereka segera paham dan langsung meletakkannya pada database mereka. dan warna-warnanya. apakah link ini udah tepat. jadi kamu harus memberikan url asli websitemu. Usahakan pula websitemu telah selesai alias tak ada broken link. Sebelum mendaftarkannya.. Anda bisa berharap situsmu mejeng di database mereka seratus tahun lagi. Dan yang terakhir.saya ucapin SELAMAT buat kamoe yang telah berhasil meletakkan situsnya di Yahoo !! . Bila anda telah terdaftar di direktori Yahoo. Karena ini akan menjadi pertimbangan besar untuk menolak websitemu. Ada beberapa direktori yang memiliki page rank cukup tinggi yaitu Yahoo! dan DMOZ. Yang paling hebat lagi.Daftarkan ke Direktori Biasanya direktori memiliki page rank yang cukup tinggi. Sebuah situs tentang Leonardo de Caprio takkan mudah masuk ke situs mereka kecuali kamoe menyuguhkannya secara spektakuler... untuk memberikan catatan kecil tentang apa dan untuk apa websitemu ada. Tapi ingat. maka itu adalah prestasi tersendiri dan akan menentukan sekali posisi anda di search engine. berusahalah untuk mendaftarkan website kesana.susah gampang. dan yang paling penting jangan sampai ada Broken Link atau Link dengan tulisan "Dalam Tahap Pengembangan". Fast Loading dan komplit fasilitasnya. Ingat! Yahoo! paling benci orang yang mendaftar pada Kategori yang tak sesuai dengan isinya.. maka mereka akan segera memasukkan situs kita dalam daftar mereka. maka dengan segera situsmu akan nongol di halaman mereka.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->