Membuat Frame dengan HTML Heru Cimay rwxr-xr-x 0 5/14/2011

Filename	Membuat Frame dengan HTML
Permission	rw-r--r--
Author	Heru Cimay
Date and Time	5/14/2011
Label
Action

 

     Ooopppsss, maaf baru update lagi ni maklum lagi sibuk kuliah soalnya, (padahal setiap hari kerjanya cuma nge-Game, Facebookan, Twitteran doang) . Nah kali ini kita akan mencoba membuat suatu frame/pembagian layar dengan HTML. Untuk tutorial kali ini sedikit panjang dan tentunya akan menyita waktu anda jika harus membaca tutorial ini dengan online, tapi jangan khawatir untuk tutorial kali ini saya sudah persiapkan link untuk downloadnya jadi anda bisa mencoba/mengedit tutorial ini secara offline.

     Langsung saja silahkan download tutorialnya disini. Semoga tutorial ini bermanfaat bagi anda dan mohon maaf atas ketidaknyamanan anda dengan keterbatasan tutorial-tutorial yang saya sediakan karena saya masih newbie . 

Salam hormat .

Membuat Bullets dan Numbering pada HTML Heru Cimay rwxr-xr-x 0 3/31/2011

Filename	Membuat Bullets dan Numbering pada HTML
Permission	rw-r--r--
Author	Heru Cimay
Date and Time	3/31/2011
Label
Action

   Langsung aja ya karena TIME IS MONEY , untuk membuat Bullets dan Numbering pada HTML hampir mempunyai kesamaan, namun dalam HTML walaupun hany beda satu huruf dari huruf yang ditentukan maka dijamin hasilnya tidak akan dapat muncul pada Browser anda. Berikut kode-kode Bullets dan Numbering beserta Type dan Fungsinya :

BULLETS

Type Bullets	Fungsi
square	Bullets yang ditampilkan berbentuk kotak kecil
circle	Bullets yang ditampilkan berbentuk bulat polos
Visk	Bullets yang ditampilkan berbentuk bulat hitam

   Untuk Bullets kita menggunakan kode <UL TYPE="TYPE BULLETS">, sebagai contoh <UL TYPE="square"> dan untuk menutup Bullets menggunakan kode </UL>.

NUMBERING

Type Numbering	Fungsi
1	Numbering yang ditampilkan dimulai dari "1"
I	Numbering yang ditampilkan dimulai dari "I"
i	Numbering yang ditampilkan dimulai dari "i"
A	Numbering yang ditampilkan dimulai dari "A"
a	Numbering yang ditampilkan dimulai dari "a"

   Selain itu perlu temen-temen ketahui sebelum teks yang akan dijadikan Bullets dan Numbering itu harus disisipkan kode <LI>. Untuk lebih jelas silahkan temen-temen copy pastekan kode dibawah ini pada Ultraedit :

<HTML> <HEAD> <TITLE>BULLETS DAN NUMBERING HTML HERU VERSION</TITLE> <BODY> <B>BULLETS</B> <BR> <UL TYPE="square"> <LI>BULLETS PERTAMA </UL> <UL TYPE="circle"> <LI>BULLETS KE DUA </UL> <UL TYPE=visk> <LI>BULLETS KE TIGA </UL> <BR> <B>NUMBERING</B> <BR> <OL TYPE="1"> <LI>NUMBERING PERTAMA </OL> <OL TYPE="I"> <LI>NUMBERING KE DUA </OL> <OL TYPE="i"> <LI>NUMBERING KE TIGA </OL> <OL TYPE="A"> <LI>NUMBERING KE EMPAT </OL> <OL TYPE="a"> <LI>NUMBERING KE LIMA </OL> </BODY> </HTML>

   Untuk langkah selanjutnya silahkan klik disini! Dan tampilan di Browsernya seperti ini :

   Cukup mudah ya? Pasti temen-temen bisa semua ko. Regards.

Menyisipkan Berbagai Objek pada HTML Heru Cimay rwxr-xr-x 0 3/30/2011

Filename	Menyisipkan Berbagai Objek pada HTML
Permission	rw-r--r--
Author	Heru Cimay
Date and Time	3/30/2011
Label
Action

   Selain dapat merubah tampilan HTML kita juga dapat menambahkan berbagai macam objek ke HTML seperti Gambar, Suara, ataupun yang lainnya, nah pertama-tama mari kita belajar menambahkan/menyisipkan objek gambar pada web kita, codenya adalah <IMG SRC="NAMA_GAMBAR.FORMAT GAMBAR"> sebagai contoh <IMG SRC="PANTAI.JPG">, namun agar gambar tersebut bisa tampil pada web kita gambar tersebut tentunya harus di copy terlebih dahulu pada folder yang kita gunakan untuk menyimpan website kita, langkah-langkahnya disini!  Kita juga bisa mengatur ukuran gambar tersebut dengan cara menambahkan kode "WIDTH=" (untuk ukuran lebar) dan "HEIGHT=" (untuk ukuran tinggi), sebagai contoh : <IMG SRC="PANTAI.JPG" WIDTH="100" HEIGHT="100">. Selain menambahkan gambar kita juga bisa mengatur perataan teks di samping gambar tersebut, sebagai contoh :

<HTML> <HEAD> <TITLE>MENGATUR TEKS PADA GAMBAR</TITLE> <BODY> <CENTER> Ini contoh web yang sudah diatur perataan teksnya <BR> <IMG SRC="FB logo.JPG" WIDTH="160" HEIGHT="160" ALIGN="BOTTOM">I LOVE FACEBOOK <BR> <IMG SRC="FB logo.JPG" WIDTH="160" HEIGHT="160" ALIGN="MIDDLE">I LOVE FACEBOOK <BR> <IMG SRC="FB logo.JPG" WIDTH="160" HEIGHT="160" ALIGN="TOP">I LOVE FACEBOOK <BR>

   Kode "BOTTOM" diatas dimaksudkan agar teks berada pada posisi bawah gambar, "MIDDLE" dimaksudkan agar teks berada pada posisi tengah gambar, sedangkan "TOP" dimaksudkan agar teks berada pada posisi atas gambar.
   Untuk langkah selanjutnya silahkan klik disini! Dan tampilan pada browser akan seperti ini :

   Nah sekarang kita membahas tentang cara memasukkan objek suara pada HTML, kodenya adalah <BGSOUND SRC="NAMA FILE SUARA.FORMAT FILE SUARA"> Sebagai contoh : <BGSOUND SRC="DECODE.MP3">, kode tersebut hanya untuk memutar satu kali file suara tersebut, sedangkan untuk menampilkan berkali-kali/berulang-ulang kita cukup menambahkan kode LOOP="-1", sebagai contoh <BGSOUND SRC="DECODE.MP3" LOOP="-1">.
   Gampang banget kan? Semoga Berhasil Bro and Sis .

Mengganti Background pada HTML Heru Cimay rwxr-xr-x 0 3/29/2011

Filename	Mengganti Background pada HTML
Permission	rw-r--r--
Author	Heru Cimay
Date and Time	3/29/2011
Label
Action

   Sebelum kita masuk pada cara mengganti background, Menindaklanjuti postingan saya yang sebelumnya tentang merubah tampilan font pada HTML, selain warna yang kemarin saya sediakan masih banyak warna-warna yang lainnya seperti : AQUA, OLIVE, FUCHSIA, SILVER, LIME, NAVY, PURPLE, TEAL, dan MAROON. Bahkan temen-temen juga bisa mengedit sendiri agar tampilan warna pada font itu sesuai dengan selera temen-temen, caranya adalah jika temen-temen pengen warnanya cerah yang dominan maka temen-temen cukup memperbanyak unsur "F" dan jika sebaliknya temen-temen lebih suka yang gelap-gelap seperti kulit saya ini maka yang harus diperbanyak adalah unsur "0". Nah sekarang coba temen-temen copy pastekan code dibawah ini pada Ultraedit.

<HTML> <HEAD> <TITLE>MERUBAH TAMPILAN FONT</TITLE> </HEAD> <BODY> <CENTER> <H1> BELAJAR MERUBAH TAMPILAN FONT PADA HTML <</H1> </CENTER> <BR> <H3> <FONT COLOR="LIME">FONT PERTAMA</FONT> <BR> <B>FONT KEDUA</B> <BR> <I>FONT KETIGA</I> <BR> <U>FONT KEEMPAT</U> <BR> <S>FONT KELIMA</S> <BR> <BLINK> FONT KEENAM</BLINK> <BR> <TT>FONT KETUJUH</TT> <BR> <BIG>FONT KEDELAPAN</BIG> <BR> <SMALL>FONT KESEMBILAN</SMALL> <BR> <SUB>FONT KESEPULUH</SUB> <BR> <SUP>FONT KESEBELAS</SUP> </H3> <HR> </BODY> </HTML> 

   Untuk langkah-langkah melihat tampilan HTML yang sudah kita buat pada Browser pasti temen-temen udah pada tau semua, kalo belum tau silahkan klik disini!

   Nah sekarang kita mulai mengacu pada judul postingan diatas, untuk mengganti Background HTML kita bisa menggantinya dengan warna dan image , tapi kalo menurut saya sendiri pastinya lebih cool dan elegan jika kita menggantinya dengan image. Untuk pilihan warna ada diawal postingan ini dan disini. Bagi yang ingin merubah Background dengan warna kodenya adalah <BODY BGCOLOR="warna yang diinginkan"> sebagai contoh <BODY BGCOLOR="GRAY">. Sedangkan untuk yang ingin menggantinya dengan image gunakan code <BODY BACKGROUND="NAMA IMAGE.FORMAT IMAGE">, misalnya : <BODY BACKGROUND="HERU.JPG">, namun khusus untuk background yang memakai image syaratnya adalah image tersebut dicopy terlebih dahulu pada folder untuk kita menyimpan File HTML kita. Sebagai contoh saya menyimpan data web saya di Folder "Farro Web" :

   Maka saya harus menyimpan/mengcopy image yang akan saya jadikan background kedalam folder tersebut :

   Nah setelah itu barulah temen-temen bisa liat hasil modifan backgroundnya , untuk langkah-langkahnya kalau belum tau klik disini!

   Tar saya update lagi ya . Regards.

Merubah Tampilan Font pada HTML Heru Cimay rwxr-xr-x 0 3/29/2011

Filename	Merubah Tampilan Font pada HTML
Permission	rw-r--r--
Author	Heru Cimay
Date and Time	3/29/2011
Label
Action

   Rasanya kurang profesional apabila tampilan font pada website kita standar (biasa), Tapi temen-temen ga usah khawatir karena saya akan berbagi bagaimana cara merubah tampilan font pada HTML, tapi ini cuma sebatas yang saya tau aja ya karena saya juga masih dalam tahap belajar HTML . Tapi apa salahnya kalau saya berbagi pada temen-temen tentang ilmu yang selama ini saya miliki meskipun saya juga "pemula" untuk hal ini.

   Perlu temen-temen ketahui bahwa dalam merubah font pada HTML kita juga disuguhkan beberapa code yang masing-masing mempunyai fungsi tersendiri. Ya sudahlah kita simpan saja basa-basi ini, waktu adalah uang. Langsung saja berikut ini beberapa code-code beserta fungsinya :

<FONT COLOR="...">	Untuk memberikan warna pada font/teks di HTML.
</FONT>	Untuk mengakhiri pemberian warna pada font/teks di HTML.
<B>	Untuk memberikan efek font/teks cetak tebal pada HTML.
</B>	Untuk mengakhiri efek font/teks cetak tebal pada HTML.
<I>	Untuk memberikan efek font/teks miring pada HTML.
</I>	Untuk mengakhiri efek font/teks miring pada HTML.
<U>	Untuk memberikan efek font/teks bergaris bawah pada HTML.
</U>	Untuk mengakhiri efek font/teks bergaris bawah pada HTML.
<S>	Untuk memberikan efek coretan font/teks pada HTML.
</S>	Untuk mengakhiri efek coretan font/teks pada HTML.
<BLINK>	Untuk memberikan efek teks berkedip pada HTML.
</BLINK>	Untuk mengakhiri efek teks berkedip pada HTML.
<TT>	Untuk memberikan efek teks dalam format Typewriter pada HTML.
</TT>	Untuk mengakhiri efek teks dalam format Typewriter pada HTML.
<BIG>	Untuk membesarkan Font/teks pada HTML.
</BIG>	Untuk mengakhiri membesarkan Font/teks pada HTML.
<SMALL>	Untuk mengecilkan Font/teks pada HTML.
</SMALL>	Untuk mengakhiri mengecilkan Font/teks pada HTML.
<SUB>	Untuk memberikan Font/teks Subscript pada HTML.
</SUB>	Untuk mengakhiri Font/teks Subscript pada HTML.
<SUP>	Untuk memberikan Font/teks Superscript pada HTML.
</SUP>	Untuk mengakhiri Font/teks Superscript pada HTML

  Untuk pemberian warna pada HTML biasanya diapit oleh tanda ("warna yang diinginkan "), sebagai contoh  <FONT COLOR="RED">. Untuk mempermudah temen-temen memilih warna yang temen-temen suka cekidot nih warna-warna yang biasa digunakan pada HTML :

MERAH	RED	#FF0000
BIRU	BLUE	#0000FF
KUNING	YELLOW	#FFFF00
PUTIH	WHITE	#FFFFFF
HITAM	BLACK	#000000
ABU-ABU	GRAY	#888888
COKLAT	BROWN	#AA8800
HIJAU	GREEN	#00FF00
ORANYE	ORANGE	#FF8800

Belajar HTML Dasar Heru Cimay rwxr-xr-x 0 3/27/2011

Filename	Belajar HTML Dasar
Permission	rw-r--r--
Author	Heru Cimay
Date and Time	3/27/2011
Label
Action

   Karena saya bukan type orang yang suka ingkar janji , maka sesuai dengan janji saya pada postingan sebelumnya, pada postingan kali ini saya akan memberikan tutorial dasar membuat HTML. Sebelum kita belajar HTML, seperti pepatah "Tak Kenal maka Tak Sayang"  maka alangkah lebih baiknya kita kenalan dulu dengan HTML. Apa itu HTML? Dan apa saja yang dapat kita lakukan dengan HTML? Cekidot .
   HTML (HyperText Mark up Language) merupakan suatu metoda untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program. Berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :

1. Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

2. Markup
Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web.

3. Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen. Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.

Apa yang dapat dilakukan dengan HTML ?

a. Menentukan format suatu teks.

b. Membuat list tentang sekelompok hal.

c. Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama.

d. Menyisipkan citra atau gambar.

e. Menampilkan informasi dalam bentuk tabel.

f. Dll. 

     Nah bagi yang sudah mendownload kita mulai aja ya. Pertama-tama kita harus mengetahui code-code HTML dan fungsinya.

Berikut code-code HTML beserta fungsinya :

<HTML>	Perintah ini wajib/harus diketikkan paling atas untuk memulai membuat HTML.
<HEAD>	Perintah ini merupakan perintah untuk membuat bagian header pada HTML.
</HEAD>	Perintah ini merupakan perintah untuk menutup bagian header pada HTML.
<TITLE>	Perintah ini merupakan perintah untuk membuat title/judul yang akan tampil di title bar.
<TITLE>	Perintah ini merupakan perintah untuk menutup title/judul yang akan tampil di title bar.
<BODY>	Perintah ini merupakan perintah untuk membuat bagian isi HTML.
</BODY>	Perintah ini merupakan perintah untuk menutup bagian isi HTML.
<CENTER>	Perintah ini untuk meratakan Teks/Gambar berada di tengah.
</CENTER>	Perintah ini untuk mengakhiri meratakan Teks/Gambar berada di tengah.
<H1>	Perintah ini digunakan untuk menentukan ukuran font, dalam HTML ukuran font terbesar adalah H1 dan yang terkecil H7.
</H1>	Perintah ini digunakan untuk mengakhiri ukuran font H1.
<BR>	Perintah ini digunakan untuk menampilkan efek ENTER (Ganti baris) tanpa garis batas.
<HR>	Perintah ini digunakan untuk menampilkan efek ENTER (Ganti baris) dengan garis batas.

   
   Nah sekarang coba anda copy pastekan code dibawah ini keultraedit anda dan save dengan nama TUTOR1 atau whatever you want, jangan lupa kalo kita ingin menyimpan file berformat HTML maka pada saat menyimpannyapun kita harus kasih kode ".HTML", dibelakangnya. Sebagai contoh "TUTOR1.HTML".

<HTML> <HEAD> <TITLE>TUTORIAL HTML 1</TITLE> </HEAD> <BODY> <CENTER> <H1> BELAJAR HTML DASAR VERSI HERU </H1> </CENTER> <BR> <H7> INI HTML PERTAMA YANG SAYA BUAT <HR> DAN MUDAH-MUDAHAN UNTUK KEDEPANNYA SAYA BISA BIKIN HTML YANG LEBIH BAGUS LAGI </H7> </BODY> </HTML> 

   Jika semua kode sudah dipaste dan save, klik "Show file in default browser" pada toolbar ultraedit anda.

 
Jika anda menggunakan browser firefox maka yang akan tampil seperti berikut :

Selamat Mencoba kawan .