Jumat, 12 Desember 2014
Berubung banyak yang nanyain mo belajar HTML secarapraktis dan cepat untuk sekedar utak-atik Ini
Tips:
Tinggal copy codenya > paste ke blog kita > ubah text dalemnya> jadi deh
Sambil dikit-dikit memahaminya ya
Atau bisa juga, pas butuh baru buka link artikel ini
Cara Mudah memahami tiap fungsi tiap kode, yaitu:
Copy sedikit demi sedikit codenya (dari tag pembukasampai 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)
Untuk mempermudah editing, sangat direkomendasikan menggunakan program editor khusus;
Teknik efektif= "manfatkan fasilitas Compose Journal"di MP
http://arrohwany.multiply.com/journal/compose
Untuk melihat code HTML:
>>> tinggal kita check box Edit HTML tiap kita melakukan pemformatan >>>
"Jadi kalo diformat ini... code htmlnya itu sepertiini..."
Aplikasi khusus yang support html syntax highlighting (sehingga cepat memisahkan bagian-bagian cod
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 sour
ini:
Versi portable diisni: http://portableapps.com/apps/development/nvu_portable
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
Basic Codes
Tag HTML Keterangan
<B>Teks</B> Ini membuat teks TEBAL 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" color="#ff0000">Teks
Kita</font>
Gunakan tag <font> untuk memilih jenis, ukuran,
dan 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 href="http://arrohwany.web.id">Situsku</a> Ini akan membuat sebuah link menuju alamat
yang ditentukan pada 'ALAMAT URL'.
Contoh: Situsku
<img
src="http://i74.photobucket.com/albums/i271/arrohwany/natu06.gif"
width="100" height="100" />
Kode ini digunakan untuk memasukkan sebuah
gambar. Kita bisa menentukan lebar dan tinggi
gambar tersebut.
Contoh:
Jika berminat silahkan gunakan koleksi
photobucket ana disini:
http://s74.photobucket.com/albums/i271/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
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-f
arial; background-color: black;">Seluruh Isi Scrollbox Kita Ketikkan Di Sini! Seluruh Isi Scrollbox Kita Ketikkan D
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 D
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 kodeini di mana saja (tanpa
tag penutup)
Example 1
<hr width="100">
Example 2
<hr width="80%">
Example 3
<hr size="4" noshade>
Download
Label: dasar HTML