ikram.web.id » HTML http://ikram.web.id Integrity, truthfulness, and straightforwardness Sun, 24 Oct 2010 01:18:45 +0000 en hourly 1 http://wordpress.org/?v=3.0 Bagaimana Memasang Favicon di Website Sendirihttp://ikram.web.id/webmaster/html/bagaimana-memasang-favicon-di-website-sendiri/ http://ikram.web.id/webmaster/html/bagaimana-memasang-favicon-di-website-sendiri/#comments Fri, 22 Jan 2010 10:07:52 +0000 Raden Ikram http://ikram.web.id/?p=271

Favicon adalah icon kecil yang muncul di Browser URL tab, contohnya seperti gambar diatas.

Sekarang bagaimana cara memasang favicon tersebut di website anda sendiri.

Langkah Pertama (1)

Persiapkan dulu gambar yang akan digunakan untuk menjadi favicon tersebut, format gambar biasanya adalah .ico namun bisa juga menggunakan .png, .gif, .jpeg (menggunakan selain .ico mungkin tidak berfungsi di beberapa browser)

Ukuran gambar yang disiapkan adalah 16 x 16 pixel

Anda yang menggunakan windows biasanya memakai  photoshop untuk mengolah gambar, dan mungkin akan bertanya-tanya karena tidak bisa save file dengan ekstensi .ico, namun tidak perlu khawatir, solusinya download plugin berikut .ico photoshop

Setelah download dan install, maka pada photoshop jika save as image akan ada pilihan untuk save dalam format .ico

Jika menggunakan Linux, biasanya memakai GIMP bisa langsung save as dengan ekstensi .ico

Masih kesulitan juga untuk mempersiapkan file favicon.ico, tenang masih ada jalan lain yaitu menggunakan favicon generator, gampangnya menggunakan yang online sehingga anda tinggal upload, dan kemudian tinggal download file .ico yang dihasilkan

beberapa favicon generator

http://www.favicongenerator.com/

http://tools.dynamicdrive.com/favicon/

http://www.favicon.cc/

Langkah Kedua (2)

Gambar sudah siap. Upload file favicon.ico tersebut ke folder website anda

Langkah Ketiga (2)

Sekarang tinggal memasukkan sedikit script kedalam file index.html (homepage) anda

copy script berikut, pilih salah satu sesuai tipe image yang digunakan (pastikan ubah href untuk menunjukkan dimana gambar berada pada folder website anda)

  1. <link rel="icon" type="image/vnd.microsoft.icon" href="http://yourweb.com/image.ico" />
  2. <link rel="icon" type="image/jpeg" href="http://yourweb.com/image.jpeg" />
  3. <link rel="icon" type="image/png" href="http://yourweb/image.png" />
  4. <link rel="icon" type="image/gif" href="http://yourweb.com/image.gif" />

Langkah Keempat (4)

Buka file index.html anda (atau file lain yang digunakan sebagai home). cari baris <head> dan </head> paste kan script yang di copy tadi di antara keduanya

contoh

  1. <head>
  2. <title>ikram.web.id</title>
  3. <link rel="icon" type="image/vnd.microsoft.icon" href="http://yourweb.com/image.ico" />
  4. </head>

Selesai, sekarang website anda sudah memiliki favicon sendiri

]]> http://ikram.web.id/webmaster/html/bagaimana-memasang-favicon-di-website-sendiri/feed/ 0 Membuat Tabel dan Seting Atributhttp://ikram.web.id/webmaster/html/tutorial-html-membuat-tabel-table-dan-setting-attributes/ http://ikram.web.id/webmaster/html/tutorial-html-membuat-tabel-table-dan-setting-attributes/#comments Fri, 15 Aug 2008 06:24:36 +0000 Raden Ikram http://websick.wordpress.com/?p=78 Tables

<table></table> membuat table

<tr></tr> set row pada tiap table

<td></td> set cell pada tiap row

<th></th> set table header

contoh:

<table width=”200″ border=”1″>

<tr>

<th>header</th>

</tr>

<tr>

<td>isi</td>

</tr>

</table>

akan menghasilkan:

header
isi

Table Attributes

<table border=”0″> set ukuran border

<table cellspacing=”1″> set ukuran spasi antar table cell

<table cellpadding=”1″> set spasi antara cell’s border dengan konten

<table width=”750″> set panjang table, (pixel / percentage)

<tr align=”left”> / <td align=”left”>  (left, center, or right)

<tr valign=”top”> / <td valign=”top”> (top, middle, or bottom)

<td colspan=”1″>  (default=1)

<td rowspan=”2″>  (default=1)

<td nowrap>

]]> http://ikram.web.id/webmaster/html/tutorial-html-membuat-tabel-table-dan-setting-attributes/feed/ 2 Mengenal Text Tag Pada HTMLhttp://ikram.web.id/webmaster/html/tutorial-html-text-tag/ http://ikram.web.id/webmaster/html/tutorial-html-text-tag/#comments Fri, 15 Aug 2008 06:05:25 +0000 Raden Ikram http://websick.wordpress.com/?p=73 <pre></pre> membuat preformatted text .

contoh:

huhuy

<h1></h1> membuat headline ukuran terbesar
<h6></h6> membuat headline terkecil .

contoh:

huhuy

<b></b> membuat text bold .

contoh: huhuy

<i></i> membuat text italic .

contoh: huhuy

<tt></tt> membuat teletype .

contoh: huhuy

<cite></cite> membuat citation, mirip italic .

contoh:huhuy

<em></em> Emphasizes sebuah kata dengan italic atau bold .

contoh: huhuy

<strong></strong> Emphasizes sebuah kata dengan italic atau bold .

contoh: huhuy

<font size=”5″></font> mengatur besar huruf, dari 1 – 7 .

contoh: huhuy

<font color=”yellow”></font> set warna font .

contoh: huhuy

]]> http://ikram.web.id/webmaster/html/tutorial-html-text-tag/feed/ 0 Tutorial HTML Mengenai Body attributeshttp://ikram.web.id/webmaster/html/tutorial-html-body-attributes/ http://ikram.web.id/webmaster/html/tutorial-html-body-attributes/#comments Fri, 15 Aug 2008 05:52:14 +0000 Raden Ikram http://websick.wordpress.com/?p=64 <body bgcolor=”#cccccc”> untuk set warna background

<body text=”black”> untuk set warna text

<body link=”white”> untuk set warna link

<body vlink=”#fccdda”> untuk set warna  followed link

<body alink=”#000000″> untuk set warna link yang ditekan

<body ondragstart=”return false” onselectstart=”return false”> agar text tidak bisa di select dan drag. bisa untuk menghindari copy paste

]]> http://ikram.web.id/webmaster/html/tutorial-html-body-attributes/feed/ 0 Berkenalan Dengan Comment Tag HTMLhttp://ikram.web.id/webmaster/html/tutorial-html-comment-tag/ http://ikram.web.id/webmaster/html/tutorial-html-comment-tag/#comments Wed, 13 Aug 2008 15:57:46 +0000 Raden Ikram http://websick.wordpress.com/?p=60 Tag html untuk menuliskan komen, atau bisa juga diartikan “abaikan baris ini”

diawalai dengan <!– kemudian komentar dan ditutup dengan –>

contoh

<!– Tanggal dibuat: 14-08-2008 –>

<!– Dibuat Oleh: huhuy –>

keterangan: tulisan tersebut tidak akan ditampilkan dibrowser namun bisa dilihat pada source code dari script yang kita buat

]]> http://ikram.web.id/webmaster/html/tutorial-html-comment-tag/feed/ 1 Lanjutan pengenalan HTMLhttp://ikram.web.id/webmaster/html/tutorial-html-lanjutan-pengenalan-html/ http://ikram.web.id/webmaster/html/tutorial-html-lanjutan-pengenalan-html/#comments Tue, 12 Aug 2008 21:11:22 +0000 Raden Ikram http://websick.wordpress.com/?p=55 Lanjutan dari pengenalan HTML

Tag HTML lainnya yang akan dibahas yaitu

<b></b> = untuk membuat text bold

<i></i> = untuk membuat text italic

<p></p> = untuk membuat paragraf

<br /> = untuk membuat text berikutnya pada line baru (menggunakan slash agar sesuai dengan standar XHTML)

tulis code / script berikut

<html>
<head>
<title>Judul Halaman</title>
</head>
<body>

<b>huhuy, saya bisa bikin html!!</b>

<br />

<i>huhuy, saya bisa bikin html!!</i>

<br />

<p align=”right”>huhuy, saya bisa bikin html!!</p>

</body>
</html>

maka pada web browser akan tampil seperti berikut ini

————————————————————-

huhuy, saya bisa bikin html!!

huhuy, saya bisa bikin html!!

huhuy, saya bisa bikin html!!

————————————————————-

ket

pada <p> ada atribut align yang artinya menjelaskan bagaimana paragraf akan ditampilkan (left, right, justify)

]]> http://ikram.web.id/webmaster/html/tutorial-html-lanjutan-pengenalan-html/feed/ 0 Pengenalan HTMLhttp://ikram.web.id/webmaster/html/tutorial-html-pengenalan-html/ http://ikram.web.id/webmaster/html/tutorial-html-pengenalan-html/#comments Tue, 12 Aug 2008 20:49:14 +0000 Raden Ikram http://websick.wordpress.com/?p=50 HTML (HyperText Markup Language) adalah cara untuk menampilkan text pada browser

script html diawali dengan tag <html> dan diakhiri dengan </html>

dimana tanda slash (/) pada tag kedua adalah sebagai penutup

contoh script html

untuk membuat file html bisa dengan text editor ( notepad pada windows, SimpleText pada mac) atau bisa juga dengan aplikasi web design / web development seperti dreamweaver (windows) ato quanta (linux)

tulis script berikut ini

<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
huhuy, saya bisa bikin html!!
</body>
</html>

save dengan nama, contoh: test.html

buka web browser (mozzila, ie, dll) dan open file yang di save tadi, maka pada browser anda akan ditampilkan text “huhuy, saya bisa bikin html!!” tanpa tanda petik

ket:

<html></html> = untuk menampilkan script sebagai html

bagian yang terletak antara <head> dan </head> tidak ditampilkan pada web browser, dimana yang terletak dibagian itu ditujukan untuk search engine dan web browser.

<title></title> = sangatlah penting dan menunjukan isi dari halaman tersebut

<head></head> = Header.
ini adalah dimana meta tags ditaruh dan disambungkan dengan link lainnya (scripts and CSS)

<body></body> = body / isi dari suatu halaman (text, grafik serta elemen lainnya).

]]> http://ikram.web.id/webmaster/html/tutorial-html-pengenalan-html/feed/ 3