h3ru blog

Hyphenation

noreply@blogger.com (h3ru) — Sat, 14 May 2011 20:37:10 PDT

HTML mempunyai dua tipe penghubung, yaitu plain hyphen dan soft hyphen. Plain hypen akan menghubungkan dua kata dengan suatu karakter ( ‘-‘ atau yang lain) sedangkan soft hypen akan menggabungkan dua kata yang terpisah atau menggabungkan dengan suatu karakter. Plain hypen ditampilkan dengan karakter &#45 atau &#x2D sedangkan soft hypen ditampilkan dengan karakter &#173 atau &#xAD
Contohnya seperti ini :

<html>

<head>

<title>Hyphenation</title>

<meta name="author" content="Heru Iryanto">

</head>

<body bgcolor="lightgrey">

<h3>Pemakaian Hyphenation</h3>

Ini adalah contoh pemakaian plain hyphenation :

plain&#45hyphenation<BR>

Ini adalah contoh pemakaian soft hyphenation :

soft&#173hyphenation

</body>

</html>

Hasilnya seperti ini :

Hyphenation ini berfungsi untuk menampilkan kode-kode yang tidak bisa ditampilkan melalui keyboard misalnya saja code copyright ( © ). Untuk kode selengkapnya dapat dilihat di ASCII Table. Berikut ini kode untuk 0-127 :

Ini code extendednya 128-255:

Sedangkan khusus untuk web atau HTML agar tidak bingung boleh dilihat kode dibawah ini (bisa memakai kode Friendly atau Numeric) :

Kode hyphenation ini juga sangat berguna untuk membuat totorial di web, karena kode <> atau </> akan langsung dibaca oleh html, sehingga kode tersebut tidak bisa muncul. Untuk memunculkannya bisa menggunakan kode diatas yaitu < untuk menampilkan tanda kurung buka ( < ) dan > untuk menampilkan tanda kurung tutup ( > )

iPad 2 gratis!!

noreply@blogger.com (h3ru) — Sat, 14 May 2011 20:38:23 PDT

Bagi anda yang ingin memiliki iPad 2 namun tidak ingin mengeluarkan uang 7 juta untuk membelinya, inilah kesempatan anda untuk bisa mendapatkan iPad 2 secara GRATIS!! Jika anda yang ingin memiliki iPad 2 ini, saya akan menunjukkan bagaimana caranya kepada anda untuk bisa mendapatkan iPad 2 gratis ini! Silahkan ikuti langkah-langkah berikut ini :

1. Kunjungi halaman ini
2. Isikan data yang diperlukan dengan lengkap dan benar di form yang telah disediakan.

3. Masukkan kode captcha dan klik tombol “Proceed”
4. Anda akan mendapatkan email/sms yang berisi password anda.
5. Silahkan login menggunakan username dan password tersebut.

6. Klik link iPad 2 Promo

Di halaman tersebut akan dijelaskan kepada anda secara mendetail bagaimana cara mendapatkan iPad 2 gratis! Tunggu apa lagi? Daftar sekarang juga dan dapatkan iPad 2 gratisnya karena promo ini hanya berlaku sampai tanggal 30 Juni 2011! Semoga informasi untuk mendapatkan iPad 2 gratis ini bermanfaat...

Funny Resign Letter

noreply@blogger.com (h3ru) — Thu, 14 Apr 2011 06:15:29 PDT

Setelah belajar beberapa hal tentang basic HTML di postingan-postingan sebelumnya, sekarang saatnya kita mencoba membuat sebuah surat resign yang akan kita tampilkan dihalaman web dengan menggunakan tag-tag HTML yang telah kita pelajari di postingan-postingan sebelumnya seperti tag paragraf, menambah baris, heading, garis horizontal, preformatted text dan blockquote. Hasil akhir yang diinginkan yaitu seperti ini :

Jika sudah mengutak atik sendiri, coba lihat apakah koding HTML anda seperti ini:

<html>
<head>
<title>Resign Letter</title>
<meta name="author" content="Heru Iryanto">
</head>
<body bgcolor="lightgrey">
<h1 align="center">RESIGN LETTER</h1>
<hr>
Dear Boss,
<p align="justify">
You know why I want to resign?<br>
Since I worked for you, I have no time to blog anymore. When I don't have time to blog anymore, my readers hate me. When my reader hate me, they don't visit my blog anymore. When they don't visit my blog anymore, my hits drop. When my hits drop, I become unhappy. When I become unhappy, I will eat a lot. When I eat a lot, I will get fat. When I get fat, it will affect your company's image. When your company's image is affected, your business no good. When your business no good, you become unhappy. When you become unhappy, you eat a lot, like me. When you eat a lot, I'm afraid you will become fat, like me.
</p>

<p align="justify">
You see, Boss. It's a vicious cycle. I did everything for your own good, because I care for you, Boss.
</p>

<p align="justify">
So the conclusion is :
<blockquote>I WANT TO RESIGN</blockquote>
Please let me go, my good Boss...
</p>

<br>
<pre>
Yours cheesily,

Heru
</pre>

</body>
</html>

Menggunakan Tag Blockquote di HTML

noreply@blogger.com (h3ru) — Sun, 10 Apr 2011 10:02:00 PDT

Tag <blockquote> digunakan untuk menuliskan suatu kutipan teks. Browser akan menampilkan kutipan teks dengan meng-indentasi teks tersebut atau dengan membuatnya miring. <blockquote> juga menimbulkan suatu baris kosong dan mengabaikan spasi dalam teks seperti pada tag paragraph. Tag ini berisi paragraph dan tag-tag yang lain, kecuali tag heading. Elemen yang digunakan : <blockquote> … </blockquote>. Coba script berikut :

<html>
<head>
<title>Blockquote</title>
<meta name="author" content="Heru Iryanto">
</head>
<body bgcolor="lightgrey">

<p>
Paragraph insert here. for more content.
</p>

<blockquote>

Adobe efforts in the Open Source world are not new at all, but now they have better : a new open source website to keep you up to date on Adobe open source activities.

</blockquote>

<p>
New paragraph insert here. for more content.
</p>

</body>
</html>

Hasilnya seperti ini :

Menggunakan Preformatted Text di HTML

noreply@blogger.com (h3ru) — Tue, 19 Apr 2011 10:11:32 PDT

Preformatted text memerintahkan browser untuk menampilkan teks persis seperti yang diketikan dalam dokumen HTML. Dengan demikian, masalah pengetikan pada baris baru dan penambahan spasi dapat diatasi. Namun font tulisan yang ditampilkan menjadi sangat sederhana. Elemen yang digunakan adalah <pre>…</pre>. Sekarang kita coba menggunakan tag ini untuk membuat spasi dan baris baru :

<html>
<head>
<title>Membuat PRE</title>
<meta name="author" content="Heru Iryanto">
</head>
<body bgcolor="lightgrey">
<pre>
Berikut ini text menggunakan Preformatted Text
Baris pertama

Baris kedua
Yang akan muncul dilayar sesuai dengan apa yang kita tulis
di editor
</pre>
</body>
</html>

Hasilnya seperti ini :

Tag pre juga bisa diberi atribut seperti ini <pre width="20">, atribut width berfungsi untuk membatas lebar pre sebesar 20px, sehingga hasilnya seperti ini:

Jika tag pre nya dihilangkan maka akan menjadi tulisan seperti biasa (dari awal kata sampai akhir kata akan menjadi satu kalimat), hasilnya seperti ini:

First Project - iNove Template Modification

noreply@blogger.com (h3ru) — Tue, 26 Apr 2011 08:50:31 PDT

Sebenarnya dibilang project juga bukan c, coz ini cuma sekedar iseng-iseng sambil belajar html dan ngembangin ilmu juga c. Lebih tepatnya, postingan ini merupakan dokumentasi untuk perubahan-perubahan yang saya lakukan terhadap template iNove asli yang saya download pertama kali. Awalnya template ini diperuntukkan untuk pengguna blog di wordpress.com, kemudian para pengembang blogger template pun akhirnya mulai mengembangkan template ini untuk dipakai di blogger.com. Dari sekian banyak template yang ada akhirnya saya memilih template iNove karena tampilannya sangat simple tapi juga sangat stylish. Jika ingin menggunakan template iNove silahkan download disini.

Sebenarnya banyak yang menyediakan blogger template iNove ini. Coba saja anda cari di google dengan kata kunci "inove blogger template", pasti banyak yang menyediakannya. Namun saya kira template iNove yang ini yang hampir mirip dengan template iNove yang dipakai di wordpress.com, meskipun masih banyak kekurangannya. Contoh blog di wordpress.com yang memakai template iNove adalah blog saya sendiri, http://heru768.wordpress.com/ . Sedangkan contoh blog di blogger.com adalah http://inove-xml.blogspot.com/ . Sedangkan contoh blog di blogger yang sudah dimodifikasi adalah http://heru768.blogspot.com/ .

Perubahan-perubahan pada template iNove yang saya lakukan di blog saya ini antara lain (mungkin ada beberapa perubahan yang tidak jadi saya pakai di blog saya ini):

Menambahkan Search Engine Optimization / SEO.
Setelah saya membuat 1 postingan, ternyata tombol numbered list dan bullet list tidak berfungsi seperti di menu editornya, alias tidak sama hasilnya antara di editor dengan hasil akhirnya setelah postingan diterbitkan. akhirnya saya edit templatenya sehingga fungsi numbered list dan bullet list nya berfungsi kembali.
Menu Read more pun tidak berfungsi seperti yang ada di editor blogger, akhirnya saya edit templatenya sehingga menu Read more nya menjadi muncul.
Setelah saya membuat 2 postingan, ternyata muncul kolom kosong dibawah postingan yang kadang-kadang muncul kadang-kadang tidak muncul. Ternyata itu adalah google adsense bawaan dari template ini, agar tidak menggangu akhirnya saya hilangkan.
Setelah itu saya mengedit kata-kata yang ada di header dan footer blog.
Mengedit tampilan menu navigasinya.
Mengedit widget yang ada disebelah kanan.
Mengganti background.
Menambahkan kolom iklan.

Perubahan-perubahan atau update template iNove pada blog saya ini akan saya tulis terus pada postingan ini. Jadi, silahkan dibaca yakz jangan sampai ketinggalan...

Membuat Garis Horizontal di HTML

noreply@blogger.com (h3ru) — Mon, 11 Apr 2011 08:42:11 PDT

Untuk membuat garis pemisah horizontal antara satu baris dengan baris lainnya, gunakan elemen <hr>. Elemen ini akan membuat garis horizontal sepanjang lebar jendela browser. Contoh programnya :

<html>
<head>
<title>Membuat garis</title>
<meta name="author" content="Heru Iryanto">
</head>
<body bgcolor="lightgrey">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr>
Heading selanjutnya silahkan coba sendiri.
</body>
</html>

Hasilnya seperti ini :

Membuat Heading di HTML

noreply@blogger.com (h3ru) — Tue, 26 Apr 2011 08:43:39 PDT

Heading adalah sebuah kumpulan kata atau frasa yang menjadi judul atau subjudul dalam suatu dokumen HTML. Cara membuatnya yaitu dengan memberikan tag heading pada kata atau frase yang ingin dijadikan judul tersebut. Contoh kode programnya : <h1>Ini Contoh Heading</h1>. Untuk lebih jelasnya lihat contoh berikut :

<html>
<head>
<title>Contoh Heading</title>
<meta name="author" content="Heru Iryanto">
</head>
<body bgcolor="yellow">
<h1>Ini Contoh Heading 1</h1>
<h2>Ini Contoh Heading 2</h2>
<h3>Ini Contoh Heading 3</h3>
<h4>Ini Contoh Heading 4</h4>
<h5>Ini Contoh Heading 5</h5>
<h6>Ini Contoh Heading 6</h6>
</body>
</html>

Hasilnya seperti ini:

Menambah Baris dengan BR di HTML

noreply@blogger.com (h3ru) — Sun, 10 Apr 2011 00:50:47 PDT

Dalam membuat halaman web, suatu teks dapat ditulis dalam baris baru. Hal ini tidak dapat dilakukan seperti mengetik dalam program editor biasa yang cukup dengan tekan tombol ENTER. Tag <br> digunakan untuk membuat teks, ditulis pada baris berikutnya. Tag ini merupakan single text, artinya hanya mempunyai tag awal tetapi tidak mempunya tag akhir. Tag ini juga dapat ditulis seperti ini <br/>, namun jika tulisannya seperti ini </br> itu salah. Coba buat program seperti berikut ini:

<html>
<head>
<title>Menambah baris BR</title>
<meta name="author" content="Heru Iryanto">
</head>
<body bgcolor="green">
Baris pertama<br>
Baris kedua<br>
Baris ketiga<br><br>
Baris keempat<br>
Baris kelima<br><br><br><br>
<i>Membuat lompat baris dengan BR</i>
</body>
</html>

Hasilnya seperti ini:

Lihat hasil tersebut, dengan menambahkan 2 <br>, (<br> <br>) itu akan nampak seperti kita membuat dengan paragraph <p>.

Membuat Paragraf di HTML

noreply@blogger.com (h3ru) — Tue, 26 Apr 2011 08:38:41 PDT

Suatu paragraph dalam document HTML ditandai dengan pasangan elemen <p> … </p>. Tag <p> menyatakan awal suatu paragraph sedangkan akhir paragraph ditandai dengan tag </p>, tetapi tag akhir boleh tidak digunakan. Suatu paragraph secara otomatis akan berakhir jika paragraph baru dimulai, pemakaian heading, table, blockquote, atau list. Atribut yang digunakan dalam paragraph adalah ALIGN.

Sekarang kita coba dengan contoh program berikut ini :

<html>
<head>
<title>Paragraf</title>
<meta name="author" content="Heru Iryanto">
</head>
<body bgcolor="lightgrey">
Jangan awali paragraf dengan suatu tag paragraf jika tidak ingin suatu baris kosong pada paragraf.

<p>Penekanan tombol ENTER, spasi dan tab tidak akan membentuk suatu paragraf dalam halaman web, hanya satu spasi yang ditampilkan dalam halaman web.</p>

<p>Paragraf ini diawali dengan tag awal, tetapi tidak diakhiri dengan tag akhir, lihat hasilnya dengan paragraf berikutnya.

<h4>Pemakaian atribut dalam paragraf</h4>

<p align="left">
Teks dalam paragraph ini menggunakan atribut ALIGN=left, sehingga paragraph akan rata kiri dengan margin. </p>

<p align="center">
Teks dalam paragraph ini menggunakan atribut ALIGN=center, sehingga paragraph akan rata tengah dengan margin. </p>

<p align="right">
Teks dalam paragraph ini menggunakan atribut ALIGN=right, sehingga paragraph akan rata kanan dengan margin. </p>

<p align="justify">

Teks dalam paragraph ini menggunakan atribut ALIGN=justify, sehingga paragraph akan rata dari kiri ke kanan dengan margin. Saya ulangi, Teks dalam paragraph ini menggunakan atribut ALIGN=justify, sehingga paragraph akan rata dari kiri ke kanan dengan margin. Saya ulangi lagi, Teks dalam paragraph ini menggunakan atribut ALIGN=justify, sehingga paragraph akan rata dari kiri ke kanan dengan margin. </p>

</body>
</html>

Hasil dari program tersebut seperti ini:

Basic Tag HTML

noreply@blogger.com (h3ru) — Tue, 26 Apr 2011 08:35:09 PDT

Command HTML biasanya disebut dengan TAG. TAG digunakan untuk menentukan tampilan dari document HTML. Umumnya sebuah TAG diawali dengan tag pembuka <BEGIN TAG> dan diakhir dengan tag penutup </END TAG> . Contohnya, untuk setiap dokumen HTML maka harus diawali dan diakhiri dengan TAG HTML yaitu :
<HTML>
...........
</HTML>

TAG tidak case sensitive, artinya penulisan dengan huruf kapital ataupun huruf kecil akan menghasilkan output yang sama. Jadi anda bisa gunakan <HTML> atau <html> keduanya menghasilkan output yang sama.

Secara lebih detail, bentuk dari TAG HTML sebagai berikut:
<ELEMENT ATTRIBUTE="value">
Element - nama tag
Attribute - atribut dari tag
Value - nilai dari atribut.
Contohnya :
<body bgcolor="yellow">
..........
</body>
BODY merupakan element, BGCOLOR(Background) merupakan atribut yang memiliki nilai yellow.

Struktur HTML Document

Document HTML bisa di bagi mejadi tiga bagian utama, yaitu:

HTML. Setiap document HTML harus di awali dan di tutup dengan tag HTML
<html>
...........
</html>
tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document HTML.
HEAD. Bagian header dari document HTML di apit oleh tag
<head>
...........
</head>
di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada title browser. Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title digunakan sebagai keyword. Contoh tag TITLE :
<title>Welcome To HTML</title>
Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML. Anda bisa menentukan author name, keywords, description, dan lainya pada tag META. Contoh :
<meta name="author" content="Heru Iryanto">
<meta name="keywords" content="HTML, web">
<meta name="description" content="Belajar Pemrograman Web">
BODY. Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page. Contohnya :
<body bgcolor="yellow">
..........
</body>

Setelah kita mempelajari basic tag HTML diatas, maka kita sudah dapat membuat dokumen HTML sederhana. Silahkan buka editor anda dan kopi paste kode dibawah ini, lalu save as dengan extention .html :

<html>

<head>

<title>Welcome To HTML</title>

</head>

<body bgcolor="yellow">

Ini contoh dokumen HTML sederhana buatan Anda

</body>

</html>

Jika dijalankan di browser, maka hasilnya seperti ini :

Mengenal HyperText Markup Language (HTML)

noreply@blogger.com (h3ru) — Tue, 26 Apr 2011 08:16:59 PDT

HyperText Markup Language (HTML) merupakan standard bahasa yang di gunakan untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu:

Mengontrol tampilan dari web page dan contentnya.
Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.
Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.
Menambahkan object-object seperti image, audio, video dan juga java applet dalam document HTML.

Untuk merancang sebuah dociment web, minimal kita memerlukan 2 buah software/program yaitu :

Browser. Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator, Opera, Mozilla Firefox, Safari dan masih banyak yang lainya. Pada contoh-contoh selanjutnya saya akan menggunakan browser Mozilla Firefox sebagai default browsernya, anda terserah mau menggunakan browser yang mana. Download Mozilla Firefox disini.
Editor. Editor merupakan program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya : Ms FrontPage, Dreamweaver, Notepad, Notepad++, EditPlus. Pada contoh-contoh selanjutnya saya akan menggunakan browser Notepad++ sebagai default editornya, anda terserah mau menggunakan editor yang mana. Download Notepad++ Portable disini.

Web adalah sarana yang bermanfaat untuk mengemukakan ide-ide anda. Dalam merancang sebuah website, tentukan terlebih dulu tujuan pembuatan website tersebut, apakah untuk mempublikasikan perusahaan anda, publikasi diri pribadi, publikasi produk-produk baru usaha anda, atau yang lain. Setelah itu putuskan halaman-halaman web apa yang diperlukan untuk website tersebut. Dengan menambahkan suara, gambar, dan video website anda akan menjadi lebih menarik. Anda harus mengorganisasikan ide-ide anda dan mengembangkan strategi khusus sebelum membuat dokumen web.

Jika sasaran pembaca web page anda adalah orang local, sebaiknya dokumen web tersebut menggunakan bahasa Indonesia. Hal ini agar pembaca dapat degan cepat memahami dan memberikan reaksi untuk mempercepat reaksi atas web page anda.

Ingin segera mengetahui lebih jauh tentang HTML, tunggu postingan saya selanjutnya........