Anda di halaman 1dari 8

Berubung banyak yang nanyain mo belajar HTML secara praktis dan cepat untuk sekedar utak-

atik FS dan Blog (multiply)


Ini ana cariin yang paling praktis, semoga bermanfaat

HTML? â€ン GAMPANG BANGETâ€ン langsung Praktek saja

Tips:

o Tinggal copy codenya > paste ke blog kita > ubah text dalemnya > jadi
deh

Sambil dikit-dikit memahaminya ya

o Atau bisa juga, pas butuh baru buka link artikel ini
o Cara Mudah memahami tiap fungsi tiap kode, yaitu:
 Copy sedikit demi sedikit codenya (dari tag pembuka sampai penutup dari
code tersebut), kemudian save
 Lalu lihat perubahan apa yang muncul di browser kita
 Maka tinggal kita ubah-ubah attributnya (warna ukuran dll yang bisa
diubah), sesuai dengan yang kita inginkan
 Kalo pingin sambil nyuba bisa juga gunakan ini:
http://www.w3schools.com/html/html_examples.asp (lebih asyik
praktek langsung)

o Untuk mempermudah editing, sangat direkomendasikan


menggunakan program editor khusus;
 Teknik efektif= "manfatkan fasilitas Compose Journal" di MP
 http://arrohwany.multiply.com/journal/comp
ose
 Untuk melihat code HTML:
 >>> tinggal kita check box Edit
HTML tiap kita melakukan pemformatan
>>>
 "Jadi kalo diformat ini... code
htmlnya itu seperti ini..."
 Aplikasi khusus yang support html syntax
highlighting (sehingga cepat memisahkan bagian-
bagian code dan kita mudah memahami code html
tersebut), Program open source yang sangat kami
rekomendasikan: :
 Notepad++
 Silahkan download lengkap disini:
http://notepad-
plus.sourceforge.net/uk/download.php
 Untuk lebih mudah lagi memahami; gunakan
program WYSWYG HTML Editor terutama
apliaksi open source NVU ini:
 Versi portable diisni:
http://portableapps.com/apps/development/nvu_po
rtable
 Situs Developher asli:
http://www.nvudev.com/download.php
 Dan lebih simpel + keren: Gunakan add on
firefox ini: "Scribefire"
 "ScribeFire is a full-featured blog editor that integrates with
your browser and lets you easily post to your blog"
 https://addons.mozilla.org/en-
US/firefox/addon/1730

Pengantar HTML (Hyper Text Markup Language)


HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan
tampilan sesuai dengan yang diinginkan

Antara HTML & CSS

• HTML = Sebuah isi dari sebuah halaman web yang terstruktur


• Sedang CSS = yang memformat tampilan itu (mendefinisikan bagaimana
menampilkan suatu element HTML)

Di HTML ada ID dan CLASS yang bisa kita manfatkan untuk Edit CSS seperti:
<div id="top-navâ€ン>
<div id=â€ン headerâ€ン>
<li class="bts">

Basic Codes
Tag HTML Keterangan
<B>Teks</B> Ini membuat teks TEBAL
<I>Teks kita</I> Ini membuat teks kita MIRING
<U>Teks Kita</U> Ini membuat teks kita BERGARIS BAWAH
<S>Teks Kita</S> Ini membuat teks kita DICORET
<B><I><U>Teks Kita</U></I></B> Kita bisa mengkombinasikan bermacam kode untuk
membuat teks kita memiliki ATRIBUT YANG
BERMACAM-MACAM
<font face="Comic Sans MS" size="8" Gunakan tag <font> untuk memilih jenis, ukuran, dan
color="#ff0000">Teks Kita</font> warna huruf.
Lihat daftar huruf dan warna yang bisa kita gunakan!
Contoh: Text ini merah, jenis comic sans!
<BR /> Ini akan membuat sebuah baris baru.
Letakkan di akhir setiap baris untuk menjadikan
teks
kita
seperti
ini!
<a Ini akan membuat sebuah link menuju alamat yang
href="http://arrohwany.web.id">Situsku</a> ditentukan pada 'ALAMAT URL'.
Contoh: Situsku
<img Kode ini digunakan untuk memasukkan sebuah gambar.
src="http://i74.photobucket.com/albums/i271/a Kita bisa menentukan lebar dan tinggi gambar tersebut.
rrohwany/natu06.gif" width="100"
Contoh:
height="100" />

• Jika berminat silahkan gunakan


koleksi photobucket ana disini:
• http://s74.photobucket.com/albums/i
271/arrohwany
• Tinggal copy sumbernya: "direct
links"

<center>Teks Kita</center> Ini akan membuat teks, gambar, atau apapun yang
berada di dalam tag <center> berada di bagian tengah.
Contoh:

Teks ini akan berada di tengah!

Colour, Size & Font Chart


Dibawah ini adalah kode Hexadecimal untuk semua warna 'web-safe' yang bisa kita gunakan untuk
mempercantik FS dan Multiply kita! Kita juga bisa melihat daftar jenis huruf 'web-safe' yang biasa digunakan, dan
ukuran huruf yang digunakan
Untuk menentukan jenis, warna, dan ukuran huruf pada teks yang kita buat, gunakan kode ini:
<font face="Nama Huruf" color="#Kode Hexadecimal" size="Nilai Ukuran">Teks Kita</font>

Text Colour Chart


00000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF
KOTAK WARNA 1
Untuk mudahnya silahkan gunakan Tool ini: color calculator

000000 000033 000066 000099 0000CC 0000FF


003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
http://sidjabat.multiply.com/journal/item/34/Merah_Kuning_Hijau_dilangit_yang_Biru

KOTAK WARNA 2
#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00

#FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00

#FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900

#FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600

#FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300


#FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000

#CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00

#CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00

#CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900

#CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600

#CC33FF #CC33CC #CC3399 #CC3366 #CC3333 #CC3300

#CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000

#99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00

#99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00

#9999FF #9999CC #999999 #999966 #999933 #999900

#9966FF #9966CC #996699 #996666 #996633 #996600

#9933FF #9933CC #993399 #993366 #993333 #993300

#9900FF #9900CC #990099 #990066 #990033 #990000

#66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00

#66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00

#6699FF #6699CC #669999 #669966 #669933 #669900

#6666FF #6666CC #666699 #666666 #666633 #666600

#6633FF #6633CC #663399 #663366 #663333 #663300

#6600FF #6600CC #660099 #660066 #660033 #660000

#33FFFF #33FFCC #33FF99 #33FF66 #33FF33 #33FF00

#33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00

#33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00

#3399FF #3399CC #339999 #339966 #339933 #339900

#3366FF #3366CC #336699 #336666 #336633 #336600

#3333FF #3333CC #333399 #333366 #333333 #333300

#3300FF #3300CC #330099 #330066 #330033 #330000

#00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00

#00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00

#0099FF #0099CC #009999 #009966 #009933 #009900

#0066FF #0066CC #006699 #006666 #006633 #006600


#0033FF #0033CC #003399 #003366 #003333 #003300

#0000FF #0000CC #000099 #000066 #000033 #000000


http://lilblog.multiply.com/journal/item/57/Daftar_216_kode_warna

Fonts Chart
Jenis Huruf Web-Safe
Huruf Web-safe adalah huruf-huruf yang selalu tersedia pada sistem operasi Microsoft dan Macintosh secara
default. Tentu saja tersedia banyak sekali jenis huruf lainnya yang tersedia di internet, namun untuk menjamin
bahwa huruf yang kita gunakan bisa ditampilkan dengan benar pada komputer lain, pastikan kita menggunakan
salah jenis huruf di bawah ini!

Nama Huruf Contoh


Arial ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Arial Black ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Comic Sans MS ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Courier New ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Georgia ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Impact ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Times New ABCDEFGHIJKLMNOPQRSTUVWXYZ
Roman abcdefghijklmnopqrstuvwxyz
Trebuchet MS ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Verdana ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Webdings 


Font Size Chart


Ukuran Huruf
Ukuran setiap angka dibawah ini memperlihatkan ukuran teks dengan nilai sebesar angka tersebut

1 2345 67
Marquee
Example 1
<marquee behavior="scroll">Lihat kawan, Aku Terbang!</marquee>

Example 2
<marquee behavior="alternate" bgcolor="silver" width="25%" >Boing! Boing!</marquee>

Example 3
<marquee behavior="alternate" bgcolor="#ffffff" width="40%" ><img src="wink.gif" alt=" " border="0"
height="16" width="16"> <b>Allow!</b></marquee>
Scrollbox
Jika kita ingin mengisi bagian Body Text (About Me) dengan banyak informasi, tetapi kita juga ingin memiliki
kesan Multiply/FS yang tidak banyak memakan space, kita bisa membuat scrollbox
Kode dibawah ini akan membuatkan kita sebuah scrollbox, atau lebih dikenal sebagai DIV

Code

<div style="border: 2px solid silver; overflow: auto; width: 200px; height: 200px; color: silver; font-size:
9pt; font-family: arial; background-color: black;">Seluruh Isi Scrollbox Kita Ketikkan Di Sini! Seluruh
Isi Scrollbox Kita Ketikkan Di Sini! Seluruh Isi Scrollbox Kita Ketikkan Di Sini! Seluruh Isi Scrollbox
Kita Ketikkan Di Sini!</div>

Hasil:

Seluruh Isi Scrollbox Kita Ketikkan Di Sini! Seluruh Isi Scrollbox Kita Ketikkan Di Sini! Seluruh Isi Scrollbox Kita
Ketikkan Di Sini! Seluruh Isi Scrollbox Kita Ketikkan Di Sini!

Kita mungkin mau mengganti value dari border sesuai keinginan. Kita bisa menggunakan tipe border berikut:
Outset, Inset, Dotted, Dashed, Double, Ridge atau Groove

Lines
Untuk meletakkan sebuah garis pada halaman, gunakan <hr> yang berarti 'Horizontal Rule'. Letakkan kode ini di
mana saja (tanpa tag penutup)

Example 1
<hr width="100">

Example 2
<hr width="80%">

Example 3
<hr size="4" noshade>

Kumpulan Tag HTML Lainya


<!-- --> Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan
terlihat pada browser
<a href> Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
<a name> Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
<applet> Sebagai awal dari Java applets
<area> Mendefinisikan daerah yang dapat diklik (link) pada image map
<basefont> Membuat atribut teks default seperti jenis, ukuran dan warna font
<bgsound> Memberi (suara latar) background sound pada halaman web
<big> Memperbesar ukuran teks sebesar satu point dari defaultnya
<body> Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
<caption> Membuat caption pada tabel
<comment> Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
<dd> Indents teks
<embed> Menambahkan sound or file avi ke halaman web
<fn> Seperti tag <a name>
<form> Mendefinisikan input form
<frame> Mendefinisikan frame
<frameset> Mendefinisikan attribut halaman yang akan menggunakan frame
<h1> ... <h6> Ukuran font
<head> Mendefinisikan head document.
<img> Image, imagemap atau an animation
<input> Mendefinisikan input field pada form
<li> Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>,
<ol> and <ul> )
<map> Mendefinisikan client-side map
<noframes> Jika browser user tidak mendukung frame
<ol> Mendefinisikan awal dan akhir list
<pre> Membuat teks dengan ukuran huruf yg sama
<script> Mendefinisikan awal script
<table> Membuat tabel
<td> Kolom pada tabel
<title> Mendefinisikan title
<tr> Baris pada tabel
<P> Paragraph Baru, Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran
</P> tapi juga bisa tidak diberi.
<BR> Line Break, Digunakan untuk pindah ke baris baru
<NOBR> No Line Break, Mencegah ganti baris pada teks atau images, sehingga teks yang panjang
tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang
<BASEFONT> Base Font, Digunakan untuk mendefinisikan "default text". Attribut sama dengan
attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT
<TT> Typewriter
<S> Strikeout - draws a line through the text
<BLINK> Text berkedip (gunakan bila perlu saja)
<CITE>Digunakan untuk quoting text
<CODE>Monospaced font (digunakan bila Kita ingin meletakkan (memperlihatkan) kode HTML
pada dokumen HTML Kita)
<SAMP> Monospaced font (digunakan bila Kita ingin meletakkan (memperlihatkan) kode HTML
pada dokumen HTML Kita)
<KBD> Monospaced font (digunakan bila Kita ingin meletakkan (memperlihatkan) kode HTML
pada dokumen HTML Kita)
<SMALL> Ukuran teks akan lebih kecil satu ukuran
<SUP> Membuat tekssuperscript
<SUB> membuat tekssub script
<ABBREV> Abbreviations
<ACRONYM> Untuk akronim
<PERSON> Digunakan untuk indexing
<Q> Membuat short inline quotation
<VAR> Membuat variable name, selalu dalam italics

/*AUTOHIDE HEADER

div.header = Layout bagian paling atas (daerah tulisan Setting - Inbox-My site-
Post,-dll)*/

div.header {opacity: 0;

div.header:hover {opacity: 100;