Dokumen HTML akan menarik bila ditambah gambar. Format gambar yang dapat ditampilkan : GIF, PNG, WMF, dll. Format gambar yang dikenal oleh hampir semua browser adalah GIF dan JPEG.
Untuk menambah gambar digunakan tag <IMG>.
Tag <IMG> mempunyai atribut :
SRC untuk merujuk URL atau direktori file gambar.
ALIGN untuk posisi teks di sekitar gambar, nilainya adalah TOP, MIDDLE, BOTTOM, LEFT, RIGHT.
WIDTH untuk lebar gambar dalam pixel.
HEIGHT untuk tinggi gambar dalam pixel.
ALT untuk menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan.
HSPACE untuk mengatur jarak kiri dan kanan gambar dengan objek lain.
VSPACE untuk mengatur jarak atas dan bawah gambar dengan objek lain.
BORDER untuk memberi efek bingkai pada gambar. Diisi dengan angka 1,2,3 dst.
Contoh :
<IMG src="tutorial.gif" width="200" height="150" alt="Mejeng yuk" align="center" border="4">
Oke, segini dulu saja untuk kali ini. Postingan selanjutnya akan saya bahas pembuatan link dengan HTML. Salam blogger...
Jumat, 18 Maret 2011
Kamis, 17 Maret 2011
Menata banner secara horizontal
Banner adalah iklan yang tampil didalam halaman website. Banner ditempatkan pada posisi yang menarik sehingga pengunjung dengan mudah melihatnya dan jika klik banner tersebut maka akan muncul informasi yang relevan atau masuk ke website Anda.
Dalam memasang banner hal yang perlu diperhatikan adalah penataan yang strategis agar mudah dilihat dan disesuaikan dengan komposisi template web. Jadi tidak asal tempel karena mata pengunjung tidak suka melihat seuatu yang kurang menarik.
Pemasangan banner iklan dapat disusun secara vertical dari atas ke bawah juga secara horizontal arah menyamping dari kiri ke kanan. Tergantung selera masing-masing pemilik blog. Tapi saya pribadi lebih suka pada susunan yang horizontal menyamping karena akan langsung terlihat semua tanpa harus memutar scroll mouse, apalagi bila ada banyak banner yang akan dipasang.
Simple saja sebenarnya menata banner agar dapat dipasang berjajar menyamping horizontal memerlukan tips khusus, yaitu dengan memanfaatkan fungsi table.
Berikut ini kode yang diperlukan :
Tetapi perlu diingat usahakan ukuran bannernya sama, misalnya jika banner 1 berukuran 125x125 px maka banner ke-2 dan ke-3 juga 125 x 125 px, tujuannya agar setelah jadi akan terlihat rapih.
Dalam memasang banner hal yang perlu diperhatikan adalah penataan yang strategis agar mudah dilihat dan disesuaikan dengan komposisi template web. Jadi tidak asal tempel karena mata pengunjung tidak suka melihat seuatu yang kurang menarik.
Pemasangan banner iklan dapat disusun secara vertical dari atas ke bawah juga secara horizontal arah menyamping dari kiri ke kanan. Tergantung selera masing-masing pemilik blog. Tapi saya pribadi lebih suka pada susunan yang horizontal menyamping karena akan langsung terlihat semua tanpa harus memutar scroll mouse, apalagi bila ada banyak banner yang akan dipasang.
Simple saja sebenarnya menata banner agar dapat dipasang berjajar menyamping horizontal memerlukan tips khusus, yaitu dengan memanfaatkan fungsi table.
Berikut ini kode yang diperlukan :
<table border="0" cellpadding="2" cellspacing="0" style="border-collapse: collapse"
bordercolor="#111111" width="383">
<tr>
<td>kode banner1</td>
<td>kode banner2</td>
<td>kode banner3</td>
</tr>
</table>
Tetapi perlu diingat usahakan ukuran bannernya sama, misalnya jika banner 1 berukuran 125x125 px maka banner ke-2 dan ke-3 juga 125 x 125 px, tujuannya agar setelah jadi akan terlihat rapih.
HTML "Pengaturan Teks"
Untuk mendapatkan halaman web yang baik anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini biasa digunakan dalam pengaturan teks :
Headers :
<Hn>..</Hn>
Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.
Contoh :
<H2> Belajar HTML </H2>
Paragraf baru :
<P>
Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </p> tapi juga bisa tidak diberi. Mempunyai Attribute Align berguna untuk mengatur perataan penulisan pada paragraf.
Contoh :
<P align="right"> All you can Learn !! </P>
Line Break :
<BR>
Digunakan untuk pindah ke baris baru.
No Line Break :
<NOBR>
Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.
Font :
<FONT>
Untuk mendefinisikan berbagai attribut FONT, yaitu : size, face, color.
SIZE : Ukuran font yang akan digunakan. Berkisar antara 1 - 7.
FACE : Jenis atau nama font.
COLOR : Warna font yang akan digunakan.
Contoh :
<FONT size="4" face="verdana" color="cyan"> Teks anda </FONT>
Base Font :
<BASEFONT>
Digunakan untuk mendefinisikan "default text". Attributnya sama dengan attribut FONT. Tag FONT akan meng-overwrite setting pada BASEFONT.
Contoh :
<BASEFONT size="2" face="arial" color="brown">
Marquee :
Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.
Atribut yang sering digunakan :
BGCOLOR="warna" untuk mengatur warna background teks.
DIRECTION="left/right/up/down" mengatur arah gerakan teks.
BEHAVIOR="scroll/slide/alternate" untuk mengatur perilaku gerakan teks.
Headers :
<Hn>..</Hn>
Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.
Contoh :
<H2> Belajar HTML </H2>
Paragraf baru :
<P>
Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </p> tapi juga bisa tidak diberi. Mempunyai Attribute Align berguna untuk mengatur perataan penulisan pada paragraf.
Contoh :
<P align="right"> All you can Learn !! </P>
Line Break :
<BR>
Digunakan untuk pindah ke baris baru.
No Line Break :
<NOBR>
Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.
Font :
<FONT>
Untuk mendefinisikan berbagai attribut FONT, yaitu : size, face, color.
SIZE : Ukuran font yang akan digunakan. Berkisar antara 1 - 7.
FACE : Jenis atau nama font.
COLOR : Warna font yang akan digunakan.
Contoh :
<FONT size="4" face="verdana" color="cyan"> Teks anda </FONT>
Base Font :
<BASEFONT>
Digunakan untuk mendefinisikan "default text". Attributnya sama dengan attribut FONT. Tag FONT akan meng-overwrite setting pada BASEFONT.
Contoh :
<BASEFONT size="2" face="arial" color="brown">
Marquee :
Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.
Atribut yang sering digunakan :
BGCOLOR="warna" untuk mengatur warna background teks.
DIRECTION="left/right/up/down" mengatur arah gerakan teks.
BEHAVIOR="scroll/slide/alternate" untuk mengatur perilaku gerakan teks.
- Scroll untuk bergerak berputar
- Slide untuk bergerak sekali lalu berhenti
- Alternate untuk bergerak dari kiri ke kanan lalu balik lagi (bolak-balik)
TITLE="pesan" untuk pesan yang akan muncul saat pointer berada di atas teks.
SCROLLMOUNT="angka" untuk mengatur kecepatan gerakan dalam pixel.
SCROLLDELAY="angka" untuk mengatur waktu tunda gerakan dalam mili detik.
LOOP="angka" untuk mengatur jumlah loop.
WIDTH="lebar" untuk mengatur lebar blok teks dalam pixel atau persen.
Contoh :
<MARQUEE align="center" direction="right" height="200" scrollamount="2" width="30%"> Teks </MARQUEE>
Selain tag di atas, masih ada beberapa lagi tag yang berhubungan dengan pengaturan teks, yaitu :
<B>...</B> untuk menebalkan teks.
<U>...</U> untuk membuat garis bawah tulisan.
<I>...</I> untuk membuat tulisan miring.
<big>...</big> untuk membuat tulisan menjadi sedikit lebih besar.
<small>...</small> untuk membuat tulisan menjadi sedikit lebi kecil.
<S>...</S> untuk membuat garis mencoret pada tulisan.
<pre>...</pre> untuk membuat tulisan tetap pada keadaan yang kita inginkan.
<center>...</center> untuk membuat tulisan ada di tengah.
<blink>...</blink> untuk membuat tulisan tampak berkedip.
<TT>...</TT> untuk membuat tulisan seperti huruf mesin ketik.
<SUP>...</SUP> untuk menampilakan superscript.
<SUB>...</SUB> untuk menampilkan subscript.
Sip, segitu dulu untuk seri HTML ke-2 ini... Edisi selanjutnya akan saya bahas mengenai cara menambahkan gambar atau image... Oke, moga bermanfaat yha.. Keep blogging...
Selain tag di atas, masih ada beberapa lagi tag yang berhubungan dengan pengaturan teks, yaitu :
<B>...</B> untuk menebalkan teks.
<U>...</U> untuk membuat garis bawah tulisan.
<I>...</I> untuk membuat tulisan miring.
<big>...</big> untuk membuat tulisan menjadi sedikit lebih besar.
<small>...</small> untuk membuat tulisan menjadi sedikit lebi kecil.
<S>...</S> untuk membuat garis mencoret pada tulisan.
<pre>...</pre> untuk membuat tulisan tetap pada keadaan yang kita inginkan.
<center>...</center> untuk membuat tulisan ada di tengah.
<blink>...</blink> untuk membuat tulisan tampak berkedip.
<TT>...</TT> untuk membuat tulisan seperti huruf mesin ketik.
<SUP>...</SUP> untuk menampilakan superscript.
<SUB>...</SUB> untuk menampilkan subscript.
Sip, segitu dulu untuk seri HTML ke-2 ini... Edisi selanjutnya akan saya bahas mengenai cara menambahkan gambar atau image... Oke, moga bermanfaat yha.. Keep blogging...
Dasar HTML
HTML atau Hypertext Markup Language merupakan protokol yang digunakan untuk mentransfer data atau document dari web ke broeser, seperti Internet Explorer, Opera, Mozilla dll. HTML inilah yang memungkinkan kita menjelajahi internet dan melihat halaman web yang menarik.
HTML digunakan untuk membangun suatu halaman web. Sekalipun banyak orang menyebutnya sebagai bahasa pemrograman HTML sama sekali bukan bahasa pemrograman, tapi merupakan bahasa markup (penandaan) terhadap sebuah dokumen teks. Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < ) dan tanda lebih besar ( > ), dan disebut tag.
Sekarang ini di pasaran terdapat banyak HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web). MacromediaDreamweaver, Adobe GoLive, MS Frontpage contohnya. Tetapi tanpa mengetahui dasar-dasarnya, kita tidak akan memperoleh hasil yang maksimal. Mengapa ? Karena walaupun software-software tersebut menawarkan kemudahan dalam membuat web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web yang sangat kompleks.
STRUKTUR DASAR HTML :
Sebuah file HTML merupakan file teks biasa yang mengandung tag-tag HTML. Karena merupakan file teks, maka HTML dapat dibuat dengan menggunakan teks editor yang sederhana, misalnya Notepad. Dapat juga menggunakan HTML editor yang bersifat visual, misalnya Frontpage. Untuk menandai bahwa sebuah file teks merupakan file HTML, maka ciri yang paling nampak jelas adalah ekstensi filenya, yaitu .htm atau .html.
Dalam penggunaannya sebagian besar kode HTML tesebut harus terletak di antara tag kontainer. Yaitu diawali dengan <nama tag> dan diakhiri </nama tag> (terdapat tanda "/"). Tag sifatnya incase sensitive, artinya penulisan tag boleh menggunakan huruf besar atau kecil.
Sebuah halaman web minimal mempunyai empat buah tag, yaitu :
<HTML> Sebagai tanda awal dokumen HTML.
<HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
<TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser anda (pada title bar).
Contoh :
<TITLE> Belajar HTML </TITLE>
<BODY> Di dalam tag ini bisa diletakkan berbagai page attributes seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.
Atribut :
BGCOLOR, BACKGROUNF, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.
Contoh :
<BODY bgcolor="black" background="images.gif" text="red" link="blue" vlink="yellow" alink="pink">
ket :
BGCOLOR : Memberikan warna pada teks
BACKGROUND : Memberi warna pada latar belakang dokumen HTML
LINK : Memberi warna pada link
ALINK : Memberi warna pada link aktiv
VLINK : Memberi warna pada visited link
LEFTMARGIN : Batas kiri dokumen
TOPMARGIN : Mnentukan batas atas
BGPROPERTIES : Jika diisi "fixed", maka gambar latar belakang tidak ikut tergulung. Jika diisi "scroll" maka gambar latar belakang ikut tergulung.
Sebuah contoh sederhana dokumen HTML :
<HTML>
<HEAD>
<TITLE> Belajar HTML </TITLE>
<BODY bgcolor="black" background="gambar1.jpeg" text="red">
Letakkan text, images, dan link anda disini
</BODY>
</HTML>
Oke, Semoga bermanfaat yha.. Postingan selanjutnya akan membahas Pengaturan text dengan HTML.. Keep reading,guys...
HTML digunakan untuk membangun suatu halaman web. Sekalipun banyak orang menyebutnya sebagai bahasa pemrograman HTML sama sekali bukan bahasa pemrograman, tapi merupakan bahasa markup (penandaan) terhadap sebuah dokumen teks. Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < ) dan tanda lebih besar ( > ), dan disebut tag.
Sekarang ini di pasaran terdapat banyak HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web). MacromediaDreamweaver, Adobe GoLive, MS Frontpage contohnya. Tetapi tanpa mengetahui dasar-dasarnya, kita tidak akan memperoleh hasil yang maksimal. Mengapa ? Karena walaupun software-software tersebut menawarkan kemudahan dalam membuat web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web yang sangat kompleks.
STRUKTUR DASAR HTML :
Sebuah file HTML merupakan file teks biasa yang mengandung tag-tag HTML. Karena merupakan file teks, maka HTML dapat dibuat dengan menggunakan teks editor yang sederhana, misalnya Notepad. Dapat juga menggunakan HTML editor yang bersifat visual, misalnya Frontpage. Untuk menandai bahwa sebuah file teks merupakan file HTML, maka ciri yang paling nampak jelas adalah ekstensi filenya, yaitu .htm atau .html.
Dalam penggunaannya sebagian besar kode HTML tesebut harus terletak di antara tag kontainer. Yaitu diawali dengan <nama tag> dan diakhiri </nama tag> (terdapat tanda "/"). Tag sifatnya incase sensitive, artinya penulisan tag boleh menggunakan huruf besar atau kecil.
Sebuah halaman web minimal mempunyai empat buah tag, yaitu :
<HTML> Sebagai tanda awal dokumen HTML.
<HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
<TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser anda (pada title bar).
Contoh :
<TITLE> Belajar HTML </TITLE>
<BODY> Di dalam tag ini bisa diletakkan berbagai page attributes seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.
Atribut :
BGCOLOR, BACKGROUNF, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.
Contoh :
<BODY bgcolor="black" background="images.gif" text="red" link="blue" vlink="yellow" alink="pink">
ket :
BGCOLOR : Memberikan warna pada teks
BACKGROUND : Memberi warna pada latar belakang dokumen HTML
LINK : Memberi warna pada link
ALINK : Memberi warna pada link aktiv
VLINK : Memberi warna pada visited link
LEFTMARGIN : Batas kiri dokumen
TOPMARGIN : Mnentukan batas atas
BGPROPERTIES : Jika diisi "fixed", maka gambar latar belakang tidak ikut tergulung. Jika diisi "scroll" maka gambar latar belakang ikut tergulung.
Sebuah contoh sederhana dokumen HTML :
<HTML>
<HEAD>
<TITLE> Belajar HTML </TITLE>
<BODY bgcolor="black" background="gambar1.jpeg" text="red">
Letakkan text, images, dan link anda disini
</BODY>
</HTML>
Oke, Semoga bermanfaat yha.. Postingan selanjutnya akan membahas Pengaturan text dengan HTML.. Keep reading,guys...
Rabu, 16 Maret 2011
Cara Mendaftar Blog ke Google
Berikut ini langkah-langkah mempromosikan blog ke search engine google :
1. Klik http://google.com/addurl
2. Pada form url masukan alamat blog Anda, comment isikan deskripsi blog dan masukkan code pengaman sesuai gambar.
Jika langkah Anda di atas benar kira-kira 2 minggu blog Anda akan terdaftar di search engine google. Untuk memastikan blog Anda sudah terdaftar pada form search google ketikan site:bloganda.com
1. Klik http://google.com/addurl
2. Pada form url masukan alamat blog Anda, comment isikan deskripsi blog dan masukkan code pengaman sesuai gambar.
Jika langkah Anda di atas benar kira-kira 2 minggu blog Anda akan terdaftar di search engine google. Untuk memastikan blog Anda sudah terdaftar pada form search google ketikan site:bloganda.com
Untung Rugi Blog Do Follow...
Setelah saya bahas pengertia Do follow dan No follow blog.. Kali ini saya kasih tahu secara singkat untung rugi-nya Do follow.. Gini nih..
Keuntungan :
1. Traffic akan melonjak cepat.
2. Banyak yang akan comment di blog kita.
3. Biasanya akan ada pengunjung setia ke blog kita.
4. Traffic akan lebih stabil walau jarang di-update.
5. Blog akan jadi populer terlebih jika sudah populer saat no follow.
6. Jadi lebih nge-hargain komentator yang udah comment dengan susah payah.
Kerugian :
1. Banyak komen yang sifatnya SPAM.
2. Kalau terlalau banyak comment, Search Engine jadi susah untuk men-direktorinya.
3. Dan ini yang masih jadi mitos.. Akan menurunkan PR kita. Karena blog do follow akan dianggap farm link.
Ya udah, segitu dulu yha infonya.. Happy blogging..
Keuntungan :
1. Traffic akan melonjak cepat.
2. Banyak yang akan comment di blog kita.
3. Biasanya akan ada pengunjung setia ke blog kita.
4. Traffic akan lebih stabil walau jarang di-update.
5. Blog akan jadi populer terlebih jika sudah populer saat no follow.
6. Jadi lebih nge-hargain komentator yang udah comment dengan susah payah.
Kerugian :
1. Banyak komen yang sifatnya SPAM.
2. Kalau terlalau banyak comment, Search Engine jadi susah untuk men-direktorinya.
3. Dan ini yang masih jadi mitos.. Akan menurunkan PR kita. Karena blog do follow akan dianggap farm link.
Ya udah, segitu dulu yha infonya.. Happy blogging..
PTC Indonesia paling terpercaya...
Salah satu mengais recehan lewat internet adala dengan PTC. Tugas kita adalah meng-klik iklan yang sudah disediakan oleh program tersebut, per klik biasanya Rp.50 untuk PTC lokal dan Rp.100 untuk PTC asing.. Nah, biar lebih mantap... Sebaiknya ikuti PTC yang benar-benar membayar saja,gan. Berikut ni daftarnya...
1. idr-clickit.com
2.sentraclix.com
3. klikajadeh.com
Nah, itu sebagian PTC yang saya ikuti dan termasuk PTC lokal yang super legit (terbukti membayar). Untuk lebih jelasnya... Langsung aja gabung gan.. Klik banner yang saya sediain.. Selamat mencoba...
1. idr-clickit.com
2.sentraclix.com
3. klikajadeh.com
Nah, itu sebagian PTC yang saya ikuti dan termasuk PTC lokal yang super legit (terbukti membayar). Untuk lebih jelasnya... Langsung aja gabung gan.. Klik banner yang saya sediain.. Selamat mencoba...
Langganan:
Komentar (Atom)