Trik4yu Blogs

Belajar css Format Teks

2013-07-19T10:42:00.001+07:00

Dengan style css, text pada halaman dapat diformat dan diatur sedemikian rupa sehingga tampilan bacaan/text pada halaman web menjadi menarik, enak dan nyaman untuk dibaca.

css: Format Font

Pengaturan text dengan style css menggunakan properti-properti yang meliputi :

color
text-align
text-decoratin
text-transform
text-indent

Properti-properti diatas dapat dijelaskan sebagai berikut.

Warna teks.

Warna pada teks sebuah artikel dapat diatur sedemikian rupa sehingga tampilan teks menjadi semarak dan menarik, selain itu kita dapat membedakan mana teks untuk link,mana yang bukan link, atau kita dapat memberi warna yang berbeda pada kata atau kalimat yang dianggap penting dalam uraian sebuah paragraf misalnya.

Untuk menentukan warna teks digunakan properti color, dengan nilai/value dari warna dapat menggunakan:

nilai HEX misalnya: "#FF0000"
nilai rgb misalnya: "rgb(255,0,0)"
nama warna misalnya: "red" (dalam bahasa Inggris).

/* warna default ditetapkan pada selector body */

body { color: rgb(25,100,100); }

h2 { color: white; }

p { color: #FFD700; }

Pada contoh diatas, elemen body ditaur dengan value/nilai: nama warna, h2 dengan nilai rgb dan p dengan nilai hexadecimal.

Tampilan pada halaman web.

ini judul

ini sebuah paragraf

dan ini paragraf yang lain.

Perataan/alignment.

Properti text-align digunakan untuk mengatur perataan teks secara garis horizontal (horizontal line). Kita dapat mengatur perataan teks (text alignment) dengan memilih value/nilai :

left ( rata kiri )
right ( rata kanan )
center (berpusat ditengah)
justify (rata kiri dan rata kanan)

Contoh :

body { text-align:left; )

h1 { text-align:center; }

p { text-align:justify; }

p { text-align: right; }

.

Tampilan pada halaman web.

teks pada paragraf ini diatur dengan properti text-align dan dengan value: left, teks menjadi rata kiri.

ini contoh judul

dan teks pada paragraf ini diatur dengan properti text-align dengan value/nilainya: justify, sehingga teks menjadi rata kiri dan rata kanan. Namun pada pengaturan ini akan bekerja apabila sesuai dengan jendela browser.

sedangkan teks pada paragraf ini diatur dengan properti text-align dengan value: right, dan teks menjadi rata kanan.

Dekorasi teks.

Untuk membuat dekorasi teks digunakan properti text-decoration, dengan value yang dapat dipilih adalah :

underline: teks dengan garis bawah.
overline: teks dengan garis atas.
line-through: teks tercoret
none: untuk me-remove gaya standar
blink: teks berkelip.

h2 { text-decoration:underline; }

h3 { text-decoration:overline; }

p { text-decoration:line-through; }

a { text-decoration:none; }
.

Tampilan pada halaman web.

ini judul

ini sub judul

text tercoret

text berkelip

ini sebuah link tanpa dekorasi .
.

Indentasi teks.

Untuk membuat teks pada baris pertama dari elemen html menjorok lebih kedalam dari baris normal digunakan properti text-indent, dengan value yang digunakan adalah: px ( pixel ) atau % ( persen ). Ini digunakan biasanya untuk membuat paragraf baru pada sebuah artikel.
Contoh.

.
p { text-indent: 40px; }

p { text-indent: 10%; }
.

Tampilan pada halaman web.

paragraf ini diatur dengan properti text-indent, dengan value:40pixel.

sedang teks dalam paragraf ini diatur dengan indentasi value: 10%.

Selain formating teks seperti yang dijelaskan diatas, masih banyak lagi cara memformat teks, diantaranya:

direction: mengatur arah dari teks (ltr, rtl)
line-height: mengatur jarak diantara baris teks (normal, px, length, %).
letter-spacing: mengatur jarak spasi antar karakter teks (normal, length).
text-shadow: untuk memberi bayangan pada teks.
vertical-align: mengatur posisi text secara garis vertikal dari suatu elemen.
word-spacing: Untuk menambah atau mengurangi jarak spaci antar kata (normal, length).

Demikianlah bagaimana kita mengatur format teks dengan css. Semoga bermanfaat.

Sumber materi: W3Schools.

Baca juga materi sebelumnya:

Belajar css Format Font

2013-07-13T12:00:00.003+07:00

css: font styling

CSS memberi gaya pada font/huruf. Dengan css style, huruf atau font diformat ke dalam berbagai bentuk, warna, ukuran dan lain-lain, seperti yang akan diuraikan bagaimana memformat font dengan css, yang meliputi:

font-family.
color
font-size
font-style
font-variant
font-weight

Jenis huruf.

Dalam memilih bentuk font css, ada dua jenis nama keluarga font:

- keluarga generik: kelompok keluarga font dengan tampilan yang sama (seperti : "serif" atau "monospace")

- fon: keluarga font tertentu (seperti: "times new roman" atau "arial")

keluarga generik	font family	penjelasan
serif	times new roman georgia	serif font memiliki garis kecil di ujung pada beberapa karakter.
sans-serif	arial verdana	"sans" berarti tidak : font ini tidak memiliki garis diujung karakter
monospace	courier new lucida console	semua karakter monospace memiliki lebar yang sama

Untuk memilih keluarga font dalam memformat font/teks digunakan properti Font-family. Properti font-family harus diikuti dengan beberapa nama font sebagai sistem "fallback". Jika browser tidak mendukung font pertama, ia akan memilih font berikutnya yang didukung.

Mulailah dengan nama font yang anda inginkan, dan diakhiri dengan keluarga generik agar browser memilih font yang sama dalam keluarga generik jika tidak ada font lain yang tersedia.

Jika nama font yang dipilih lebih dari satu kata maka dalam menulis nama font harus berada dalam tanda kutif, Seperti "Times New Roman". Dan jika memilih lebih dari satu nama harus dipisahkan dengan tanda koma.

body { font-family: "Times New Roman", Times, Serif; }

p { font-family: "Trebuchet MS", Arial; }

Warna huruf.

Untuk menentukan warna huruf digunakan properti color dengan nilai/value yang dapat dipilih dengan: nama warna, kode hexadecimal, atau nilai rgb.

Contoh.

body { color: aquamarine; }

h1 { color: #0000FF; }

Ukuran huruf.

Untuk menentukan ukuran huruf digunakan properti font-size. Sedangkan nilai/value dari properti tersebut adalah: small, medium, large, px; % dan lainnya.

Contoh

body { font-size: 12px ; }

h1 { font-size: larger; }

p { font-size: medium; }

Tampilan pada halaman web.

Judul ukuran larger

paragraf ini berukuran 12px

sedangkan paragraf ini berukuran medium

Gaya huruf/style.

Untuk menentukan gaya/style huruf digunakan properti: font-style, dengan memilih nilai: normal, italic, oblique.

Contoh.

p { font-style: italic; }

Tampilan pada halaman web.

tulisan pada paragraf ini bergaya miring (italic).

sedangkan tulisan ini bergaris bawah.

Font variant.

Properti font-variant digunakan untuk mengatur teks agar bergaya small caps atau tidak. Atribut ini dengan memilih value: small-caps maka teks yang tadinya berhuruf kecil berubah menjadi huruf capital semua.

Contoh

p { font-variant: small-caps; }

Tampilan pada halaman web.

paragraf ini bergaya small-caps, asalnya semua berhuruf kecil.

Huruf tebal.

Untuk membuat huruf tebal, digunakan properti font-weight dengan nilai/value yaitu: normal, bold, bolder atau lighter.

Contoh.

h1 { font-weight: bolder; }

p { font-weight: lighter; }

Tampilan pada halaman web.

ini heading

teks pada paragraf ini bergaya lighter.

Itulah, bagaimana css mengatur variasi gaya pada huruf atau teks.

Sumber materi: W3Schools.

Baca juga:

Belajar css Background styling.

2013-06-27T09:07:00.001+07:00

Setelah sebelumnya kita mempelajari Belajar css cara menyisipkan script css pada html. yang mudah-mudahan bisa difahami, kali ini dilanjutkan belajar css kita pada Css Background.

Dengan css background membuat halaman web kita semakin menarik. Kita dapat memasang backgroud pada halaman web berupa warna maupun gambar yang sesuai keinginan dan selera.
Bakground dapat dipasang untuk seluruh halaman yaitu tag body, pada tag heading maupun pada paragraf.

Css memungkinkan kita untuk mengatur background, pengaturan itu meliputi :

background-color.

background-image.

background-repeat.

background-attachment.

background-position.

Background color.

Untuk memasang warrna sebagai background, digunakan properti background-color.

Properti background-color mendefinisikan latar belakang warna untuk elemen html yang ditetapkan ( body, heading, paragraf maupun div ). Untuk mengatur background warna pada seluruh halaman web, maka kita menempatkan properti background-color pada selector body

body
{
background-color:#FF00FF;
}

Selain diterapkan pada selector body, properti background juga dapat diterapkan pada selector elemen html lainnya, misalnya pada selector heading (h1....h6), selector paragraf, selector div dan lainnya.

h2
{

backgroun-color:blue;
}

p
{

background-color:#FFD700;

}
div
{

background-color:rgb(255,0,0);

}

Dalam menuliskan nilai/value dari sebuah warna dapat mengunakan : nama warna ( dalam bahasa inggris ), kode hexadecimal (misalnya: #FFD700 ) atau nilai rgb misalnya: rgb( 255,0,0).

Background image.

Untuk memasang gambar sebagai background digunakan properti background-image. Gambar yang ditetapkan sebagai background sebaiknya berada pada satu folder yang sama dengan folder tempat menyimpan dokumen css/html hal ini memudahkan dalam penulisannya. Akan tetapi kita bisa juga mengambil gambar dari tempat lain di internet, yang dalam menuliskannya harus mencantumkan alamat/url gambar tersebut dengan lengkap.

Berikut ini contoh penggunaan properti background-image :

<html>

<head>

<style type="text/css">

body { background-image:url(gambar.png); }

#header { background-image: url(http://alamat/nama.png); }

</style>

</head>

<body>

</body>

</html>

Background repeat.

Untuk memenuhi halaman yang menggunakan gambar sebagai background, secara default penempatan gambar akan melakukan pengulangan (repeat) baik secara vertikal maupun horizontal. Namun kita dapat mengubahnya dengan menggunakan properti background-repeat, dengan memilih value:
" repeat-x " (untuk pengulangan horizontal),
" repeat-y " (untuk pengulangan vertikal) dan
" no-repeat " (jika tidak menginginkan pengulangan).

/* pengulangan horizontal */

body {

background-image: url(gambar.png);

background-repeat:repeat-x; }

/* pengulangan vertikal */

body {

background-image: url(gambar.png);

background-repeat:repeat-y; }

/* tidak ada pengulangan */

body {

background-image: url(gambar.png);

background-repeat:no-repeat; }

Background attachment.

Properti background-attachment mengatur pergeseran terhadap gambar background. Ketika kita membuka halaman web dengan background gambar yang tidak diatur, maka saat menggeser mose maka gambar background ikut bergerak, untuk agar gambar tidak ikut bergerak maka digunakan pengaturan menggunakan properti background-attachment.
Nilai dari backround-attachment adalah: scroll (untuk bergerak) dan pixed (untuk diam).

body { backgraund-image: url(gambar.jpg); background-attachment: pixed; }

.header { backgraund-image: url(gambar.jpg); background-attachment:scroll; }

Background position.

Properti background-position mendefinisikan posisi awal gambar saat digunakan sebagai background.

Nilai dari properti background-position dapat dipilih:

top-left, top-center, top-right,
center-left; center-center, center-right,
bottom-left, bottom-center, bottom-right,
x%, y%
xpos, ypos.

Contoh penggunaanya :

body {

background-image: url("gambar.jpg");
background-position: top left; }

Jika kita akan menggunakan semua properti diatas, maka urutan dalam penulisannnya adalah :

background-color

background-image

background-repeat

background-attachment

background-position

body {

background-color:green;

background-image: url("gambar.jpg");

background-repeat:no-repeat;

background-attachment:fixed;

background-position:top left;
}

Kita dapat menyingkatkan tulisan menjadi :

body
{

background: green
url("gambar.jpg")
no-repeat pixed
top left;
}

Begitulah uraian tentang cara css memberi gaya pada background.

Sumber materi: W3Schools.

Cara praktis membuat akun email google.

2013-06-16T06:19:00.001+07:00

Kali ini saya share tentang Cara Membuat Akun Email Dari Google, tentu saja diperuntukkan bagi anda yang ingin membut akun google/gmail tetapi belum tahu caranya. Hari gini belum punya akun email.....?. Terrrlaaluu..!

Mungkin anda sudah menyadari bahwa saat sekarang ini hampir setiap orang dari usia ABG sampai ORANG TUA menggunakan aplikasi online jejaring sosial seperti Facebook, Twitter, atau situs-situs jejaring sosial lainnya. Situs-situs tersebut dapat dimanfaatkan untuk pertemanan, bahkan banyak pula yang memanfaatkannya untuk promosi, penawaran produk berdagang online dan sebagainya.

Untuk bisa menggunakan aplikasi online atau situs tersebut kita tentunya membuthkan atau perlu memiliki alamat email. Sebenarnya banyak aplikasi online yang menyediakan layanan email lainnya, seperti Yahoo dan lain-lain. Tapi pada kesempatan ini saya akan menyajikan cara pembuatan akun email dari google atau dikenal dengan sebutan Gmail.

Untuk membuat dan mendaftarkan akun gmail itu tidak sulit alias sangat mudah, kita hanya cukup meluangkan waktu tidak lebih dari 5 menit, tentu saja jika jaringan internet cukup kuat dan stabil. Selain itu kita bisa membuatnya menggunakan handphone, dan inilah yang saya share kali ini yaitu membuat akun gmail menggunakan handphone, sebaiknya gunakan aplikasi browser seperti opera mini atau ucweb.

Baiklah, lansung saja ikuti langkah-langkahnya :

Pertama :
Buka alamat mail.google.com. Maka akan terbuka halaman login atau sign in ke google seperti gambar berikut ini.

klik disini untuk melihat gambar

Kedua :
Pada halaman sepeti gambar diatas, geser mose ke bawah lalu klik pada tulisan link Create New Accounts atau Buat Akun Baru, maka akan terbuka halaman seperti gambr berikut.

klik disini untuk melihat gambar

Pada tahap ini anda diminta untuk memasukkan nomor handphone anda. Masukan atau tulis nomor hp anda pada kotak yang tersedia, menulis nomornya tanpa angka nol didepan. Contohnya 81234567890. Pastikan diatas kotak sudah diubah kode negaranya menjadi +62, jika belum ubahlah dengan menekan tulisan change atau ubah lalu pilih Indonesia.
Setelah memasukan nomor hp, geser ke bawah dan klik pada tulisan link next. Nanti akan muncul halaman seperti ini.

klik disini untuk melihat gambar

Maka sesaat kemudian anda akan menerima sms dari 4664000 yang berisikan link tautan seperti ini.

klik disini untuk melihat gambar

Ketiga :
Setelah anda menerima sms yang berisi link tautan, catatlah atau copy link tersebut yaitu tulisan berwarna biru. Perlu diketahui bahwa link ini akan kadaluarsa setelah 10 menit maka segeralah membuka linknya.
Kemudian buka browser hp atau operamini anda, dan pastekan atau ketikkan link tautan yang dicatat atau di copy tadi pada adress bar dan klik go. Maka anda akan dibawa kehalaman format isian seperti ini.

klik disini untuk melihat gambar

Lalu isilah data yang diminta pada kotak yang tersedia dengan benar. Lalu klik link yang bertuliskan next. dibawah.

klik disini untuk melihat gambar

Keempat :
Pada halaman berikutnya ada diminta untuk menentukan nama pengguna atau username buatlah sesuai yang anda inginkan. Buatlah nama pengguna yang unik yang belum ada yang menggunakannya. Jika nama yang anda ajukan sudah digunakan orang lain, maka ini akan ditolak, atau andapun bisa memilih pilihan yang direkomendasikan oleh google. Lalu klik next

klik disini untuk melihat gambar

Kelima :
Pada halaman berikutnya adalah menetukan kata sandi atau password. Buatlah password yang unik dan susah ditebak orang lain untuk mengantisipasi para hacker, anda bisa memadukan karakter huruf besar, huruf kecil, angka dan tanda garis bawah (tanpa spasi), isi pula kotak dibawahnya dengan kata sandi yang sama. Sebaiknya anda mencatat kata sandi yang anda buat untuk berjaga-jaga ketika anda lupa. Laku klik finish.

klik disini untuk melihat gambar

Jika semua langkah diatas sudah benar dan lancar, maka sebenarnya sudah selesai dalam membuat akun. Dan pada halaman berikutnya anda akan melihat halaman email anda.

klik disini untuk melihat gambar

Selamat, anda sudah memiliki alamat email dari google.

Cara membuat gambar transparan dengan Image Fuse

2013-06-13T06:14:00.001+07:00

Seperti yang tercantum dalam judul postingan kali ini, yang dimaksudkan dengan gambar transparant adalah obyek gambar seolah-olah menyatu dengan background dari gambar itu sendiri.

Untuk lebih jelasnya, cobalah perhatikan perbedaan dua buah gambar berikut ini:

Dimana pada gambar (a), adalah gambar obyek dengan background yang biasa. Sedangkan pada gambar (b) adalah gambar obyek yang menyatu dengan gambar background, boleh disebut dengan istilah gambar tenggelam pada background atau gambar transparant.

Untuk membuat gambar obyek tenggelam/menyatu pada background atau gambar transparant, dibutuhkan aplikasi, namanya Image Fuse. Aplikasi ini dapat didownload di akhir uraian ini.

Penggunaan aplikasi ini sangat mudah. Langkah-langkah dalam membuat gambar transparant adalah sbb :

pertama: siapkan dua buah gambar, yaitu gambar yang akan dijadikan gambar transparant dan yang ke dua gambar yang akan dijadikan background.

Dalam hal ini, saya mengambil contoh dua gambar berikut: yaitu gambar pertama sebagai obyek transparant dan gambar kedua sebagai background.

kedua: Buka aplikasi Image Fuse kemudian tekan pilihan softkey kiri, lalu pilih gambar untuk backgraund dilanjutkan pilih gambar untuk obyek transparan. Selanjutnya tentukan transparansi lalu klik simpan.

Selesai.

Gambar hasil editan dapat dijumpai pada folder Fuse di file Gambar.

Demikian cara membuat obyek gambar transparant pada background.

Untuk aplikasi Image Fuse, silakan klik download di bawah ini.

Semoga bermanfaat.

sumber : Nurar.

Cara mengubah grid menu s60v3

2013-06-12T08:46:00.001+07:00

Senang rasanya apabila apa yang kita usahakan dengan susah payah akhirnya berhasil .

Bagaimana tidak, seperti yang saya alami, yaitu ingin mengubah tampilan menu pada hp Nokia E52 saya yang tadinya memiliki bawaan grid 3 kolom ingin diubah menjadi lebih dari itu, misalnya 4 kolom atau 5 kolom.

Tetapi setelah melakukan modding dengan beberapa cara ternyata tidak berhasil. Rupanya begitu kuat penjagaan pada handphone fp2.

Namun saya tidak menyerah begitu saja, selanjutnya saya googling sana sini sampe2 jari tangan ku yang tadinya berjumlah sepuluh buah sekarang masih tetep sepuluh buah...hehehe..., akhir cerita saya temukan
blog luar nagreg yang saya lupa dan tidak menyimpan halaman maupun di boomark saking buru-buru ingin menerapkan tutorialnya.

Itulah cerita singkat saya... dan akhirnya saya dapat mengubah grid menu hp saya sesuka hati.

Nah, kali ini saya share buat anda yang membutuhkan informasi tentang mengubah menu grid pada hp s60v3 fp2 khususnya Nokia E52.

Yang saya share ini bukan melakukan modding dari awal, tapi anda tinggal memasangkan saja pada Handphone anda.

Syaratnya :

- hp berstatus hacked

- sudah terinstal phyhon.

Berikut Cara-caranya :

1. Download bahan-bahannya yang dapat di ambil di akhir post ini.

2. Apply Open4All.rmp pada Rompatcher+.

3. Ekstarak folder :10207254 beserta isinya yang sudah anda download dan tempatkan ke C:\Private\ (disini), timpa/overwrite aja folder yang ada.

4. Ekstrak patch Extendedmenugrid.rmp dan simpan di E:\Patches\ (disini)

5. Buka Rompatcher+ dan apply patch ExtendMenuGrid . Jangan di add to outo dulu untuk jaga2 apabila belum berhasil dan tidak bisa mengakses menu cukup matikan hp saja secara manual.

6. Keluar dari halaman menu dengan mengklik pilihan softkey kiri dan pilih exit.

7. Buka menu kembali pilih setting > pilih theme > pilih menu view. Jika berhasil maka akan ada banyak pilihan menu. Pilih sesuai keinginan.

8. Selesai.

Keterangan :

Jika anda ingin mengembalikan pada grid asli/bawaan, cukup matikan saja patch ExtendGridMenu pada Rompatcher+, yaitu dengan mengkliknya dan mengubah menjadi remove from auto ( warna menjadi biru dan lingkaran hilangkan ).

Silakan download bahan-bahan nya berikut ini :

atau disini >>

Itulah informasi tentang cara mengubah grid menu pada hp s60v3 fp2 khususnya nokia E52.

Semoga berhasil.

Gerentes hate

2013-06-09T14:52:00.001+07:00

Gerentes hate.

Rinakit dangding hariring, hariring haleuang tembang.

Lumayan kanggo landong ngalolongsong.
Panglipur anu bingung, panglejar anu bingbang.

Manah kuring ngabarunsinang.

Keur sare sok mineng lilir, da hate keur teu jonglar.
Dumeh katilar, raga asa teu genah gumelar.
Kaduyung kunu sampulur, kabandang kunu lenjang, katarik ati ku nu camperenik, kapentang asmara ku marahmayna basa.

Oman Nurar

Belajar css Cara Menyisipkan css

2013-06-07T07:05:00.001+07:00

Materi :

External style
Internal style
Inline style

Dalam membangun sebuah halaman web, css tidak dapat berdiri sendiri, css fungsinya adalah membantu mempermudah memberi gaya pada dokumen html dalam membangun sebuah halaman web. Akan tetapi, hanya dengan satu file css dapat mengubah seluruh halaman web. Seperti yang telah diutarakan pada materi sebelumnya tentang Belajar css Selector Id dan Class. serta dalam dalam Belajar css Pendahuluan.

Dengan css, tag-tag html yang harus ditulis secara berulang-ulang dapat dipersingkat hanya dengan membuat satu file css.

Untuk menyisipkan css kedalam dokumen html, ada 3 cara yang dapat kita lakukan. Yaitu :

Eksternal style.
Internal style
Inline style

Cara eksternal style.

Cara eksternal merupakan cara yang ideal dalam menyisipkan file css ke dalam dokumen html karena lebih mudah dalam pengelolaannya. Misalnya untuk mengedit tampilan halaman, kita cukup mebuka file cssnya saja.

File css dibuat secara terpisah dari dokumen html dan disimpan dalam format file .css dengan nama misalnya gayaku.css.

Contoh css scrypt :

body
{
bacground-color:#7fffd4;
font-size:12px;
padding-left:3px;
}
#header
{
border:1px #DC143C solid;
background-color:#00CED1;
color:blue;
text-align:center;
margin-top:20px;
}
#menu
{
background-color:#40E0D0;
text-align:left;
padding-left:6px;
border:1px #800080 solid;
}
#content
{
background-color:#40E0d0;
text-align:left;
padding:3px;
color:black;
}
h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font size: 12px; }
#footter
{
background-color:#00CED1;
color:blue;
text-align:center;
}
/* dan seterusnya */

Simpanlah file tersebut dalam format css dan berilah nama dengan nama file misalnya: gayaku.css, pada folder yang sama dengan folder tempat menyimpan file dokumen html.

Untuk menerapkan script css tersebut ke dalam dokumen html, adalah dengan membuat link pada dokumen html yang merujuk pada file gayaku.css. Link tersebut harus ditempatkan diantara tag <head> dan tag </head>, dan harus dibuat pada tiap halaman. Sebagai contoh bagaimana sebuah dokumen html memanggil file css bernama gayaku.css yang akan diterapkan pada dokumen html.

Cara internal style.

Menyisipkan css denagn cara internal style adalah dengan menyisipkan script css pada dokumen html yang ditempatkandi bagian header, yaitu diantara tag <head> dan tag </head>. Disini kita langsung menuliskan srypt css untuk mengatur style halaman yang kita inginkan, yang dalam penulisannya didahului dengan menuliskan tag <style> dan diakhiri dengan tag </style>.

Berikut ini adalah contoh menyisipkan script css pada dokumen dengan cara internal.

<html>
<head>
<style type="text/css">
body
{
bacground-color:#7fffd4;
/*7FFFD4=Aquamarine*/
font-size:12px;
padding-left:3px;
}
#header
{
border:1px #DC143C solid;
background-color:#00CED1;
color:blue;
text-align:center;
margin-top:20px;
}
#menu
{
background-color:#40E0D0;
text-align:left;
padding-left:6px;
border:1px #800080 solid;
}
h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font size: 12px; }
#footter
{
background-color:#00CED1;
color:blue;
text-align:center;
}
</style>
</head>
<body>
<div id="">
</div>

<div id="">
</div>

<div id="">
</div>

</body>
</html>

Cara inline style.

Memasukan css kedalam dokumen html dengan cara inline style dapat dilakukan apabila kita menginginkan gaya/style pada kejadian tunggal yang unik atau khusus. Gaya inline diletakan pada elemen html yang relevan, misalnya kita memasukan gaya tulisan pada sebuah paragraf tertenu, maka properti css ini kita terapkan pada tag <p> dan dengan atribut style: Dengan kata lain kita memasukan gaya untuk elemen html, dengan atribut style yang dapat berisi properti css. Misalnya kita akan memberi gaya pada sebuah paragraf.

<p style="color:blue; margin-left:40px;"> ini sebuah paragraf
</p>

Contoh diatas dapat dijelaskan bahwa kita memberi gaya pada paragraf tersebut dengan properti css yaitu color (memberi warna tulisan) dan margin-left (memberi jarak tepi tulisan) dengan nilai/value masing-masing blue dan 40px. Dan gaya tersebut haya berlaku untuk paragraf ini saja, sedang paragraf yang lain tidak mengikuti gaya ini.

Contoh lainnya :

<body style="color:black; background-color:#FFD700; font-size:12px; padding:3px; > menerapkan style css pada bagian tubuh
</body>

Demikianlah bagaimana cara menyisipkan css ke dalam dokumen html.
back to top

Belajar css Selector Id dan Class.

2013-06-04T12:10:00.001+07:00

Sebelumnya telah dibahas tentang belajar css sebagai pendahuluan yaitu dengan judul Belajar css Pendahuluan. Di sana diuraikan mengenai latar belakang css, sintaks css dan komentar css yang mudah-mudahan sudah difahami dengan baik. Kali ini dilanjutkan pembahasan berikutnya yaitu Belajar css Selector Id dan Class. Berikut pembahasannya.

Ketika kita memberi gaya/style css pada dokumen html secara external style ( dokumen css terpisah dengan html ), maka gaya seluruh halaman web akan mengikuti gaya/style yang telah diatur dalam file css tadi. Nah, bagaimana kalau kita menghendaki tampilan yang lain pada point tertentu?. Untuk menjawab pertanyaan itulah pembahasan kali ini ditampilkan.

Dalam css, selain kita dapat mengatur satu gaya pada satu elemen html untuk seluruh halaman web, kita juga bisa mengatur gaya pada elemen yang sama dengan gaya yang berbeda dan spesifik dari gaya yang telah ditetapkan.

Misalnya kita telah menetapkan elemen h3 yang berposisi tengah dengan properti : { warna:merah } , lalu kita menginginkan elemen h3 yang lain yang berposisi kiri dengan properti: { warna:biru } . Nah, untuk solusinya dapat diatasi dengan menambahkan selector id dan selector class, dengan pengaturan yang lebih spesifik lagi. Berikut, uraian tentang selector id dan class.

Selector id

Selector id digunakan untuk mengatur gaya pada elemen tunggal yang unik, yang biasanya seperti : header, footer, sidebar ataupun logo.

Selector id menggunakan atribut id dari elemen html, yang didefinisikan dengan tanda " # ".

Sintaks selector id :

#nama-id { properti: value; }

Contoh :

.
#gaya-1
{
color:red;
text-align:center;
font-size:20px;
}

#gaya-2
{
color:blue;
text-align:left;
font-size: 14px;
}
.

Ingat:
jangan memulai selector id dengan menggunakan angka.
pada satu dokumen, tidak boleh memiliki elemen html dengan selector id yang sama.

Dan contoh menerapkan pada elemen html :

<h3 id="gaya-1">
ini heading
</h3>

Heading h3 diatas akan mengikuti gaya yang ditentukan pada gaya-1, sedangkan heading h3 yang dibawah ini akan mengikuti gaya yang ditentukan pada gaya-2.

<h3 id="gaya-2">
ini heading
</h3>

Hasilnya :

ini heading

Selector class.

Jika dalam selector id memberikan gaya pada elemen tunggal, pada selector class dapat memberikan gaya pada kelompok elemen. Artinya dapat mengatur pada beberapa elemen, misalnya dalam pengaturan properti: seperti color, size, text-align dan yang lainnya.

Selector class dalam penulisannya harus didahului dengan tanda titik ( "." ).

Sintaksnya :

.nama-class { properti:value; }

Contoh :

.bold { font-weight:bold; }

.center { text-align:center; }

Misalnya kita terapkan pada elemen html berikut:

<h3 class="center"> ini heading </h3>

<p class="bold"> ini sebuah paragraf yang memiliki class=bold </p>.

<a href="http://url_link.com" class="bold"> ini sebuah link blog </a>

Pada contoh diatas, setiap elemen html yang memiliki class=bold akan mengikuti pengaturan yang ditetapkan pada selector ".bold", dan setiap elemen yang memilki class=center akan mengikuti aturan gaya yang ditetapkan pada selector ".center".

Contoh diatas hasilnya seperti ini.

ini heading

ini sebuah paragraf yang memiliki class=bold

ini sebuah link

Contoh penerapan dalam dokumen html

Contoh di bawah ini adalah bagaimana menempatkan selector class dan selector id pada dokumen html secara internal style, yaitu ditempatkan diantara tag header.

<head>
<style>
#ruang
{
width:240px;
background-color:#ffa500;
padding:5px;
margin-top:20px;
border:1px blue solid;
}
.kelas1
{
color:white; font-size:18px;
text-align:center;
}
.kelas2
{
color:#800080; font-size:14px;
text-align:left;
}

</style>
</head>
.

Untuk memanggil selector class dan id yang akan diterapkan pada dokumen html kita dapat menggunakan tag <div> seperti ini :

<div id="ruang">

<h2 class="kelas1"> ini heading
</h2>

/*heading diatas mengikuti gaya yang diatur dengan class=kelas1*/

<p class="kelas1">
ini paragraf yang diatur mengikuti aturan class=kelas1
</p>

<p class="kelas2">
sedangkan paragraf ini mengikuti aturan pada class=kelas2.
</p>

</div>

Yang tampil di browser adalah seperti berikut ini :

ini heading

heading diatas mengikuti gaya yang diatur dengan class=kelas1.

ini paragraf yang diatur mengikuti aturan class=kelas1

sedangkan paragraf ini mengikuti aturan pada class=kelas2

Demikianlah pembahasan materi tentang Belajar css selector id dan class.
back to top

Belajar html Blok Elemen.

2013-05-31T09:46:00.003+07:00

Setelah sebelumnya kita telah mempelajari tentang Belajar html Frame., maka berikut ini kita akan lanjutkan Belajar html kita dengan materi Blok Elemen

Secara umum Elemen html dapat dikelompokkan ke dalam dua kelompok besar yaitu : Elemen Blok dan Elemen Inline.

Elemen Blok

Yang termasuk ke dalam elemen blok adalah : <h1>...<h6> (header), <p>, (paragraf), <ul> (unordered list), <ol> (ordered list), <table> (tabel), dan lainnya.

Elemen-elemen tingkat blok biasanya akan memberikan baris kosong sebelum dan sesudahnya ketika ditampilkan pada halaman browser.

Elemen Inline

Contoh yang termasuk elemen inline adalah : <b> ( bold=huruf tebal), <a> (anchor ), <td> (table data), <img> (image) dan lainnya.

Elemen-elemen tingkat inline ini tidak memberikan baris kosong baik sebelum maupun sesudahnya ketika tampil pada halaman browser. Elemen inline biasanya digunakan untuk memberi gaya pada text tertentu dan khusus diantara teks di dalam kalimat ataupun paragraf.

Elemen <div>

Unsur <div> adalah tingkat elemen blok yang dapat digunakan sebagai wadah untuk mengelompokan elemen html lainnya.

Unsur <div> tidak memiliki arti khusus. Kecuali itu, karena elemen <div> merupakan elemen tingkat blok, maka pemakaian elemen ini secara otomatis akan memberikan baris kosong sebelum dan sesudahnya ketika tampil pada halaman browser.

Ketika digunakan bersama dengan CSS, elemen <div> dapat digunakan untuk mengatur gaya atribut pada konten blok besar.

Sebagai contoh, misalnya kita akan mengatur letak gambar pada halaman, maka kita bisa menggunakakan elemen <div> dengan menerapkan atribut style.

Pada contoh ini, elemen <div> digunakan untuk menempatkan sebuah gambar berada di tengah, menggunakan atribut style.

hasilnya seperti ini :

Penggunaan umum lainnya dari unsur <div> adalah untuk mengatur tata letak dokumen, ini menggantikan "cara lama" mendefinisikan tata letak menggunakan tag table. Menggunakan tag table bukanlah cara yang benar jika digunakan untuk mengatur tata letak. Tujuan dari elemen <table> adalah untuk menampilkan data tabular.

Elemen <span>

Elemen <span> merupakan elemen inline yang dapat digunakan sebagai wadah untuk teks yang khusus (unik) diantara teks dalam kalimat.

Elemen <span> tidak mempunyai arti khusus. Ketika digunakan bersama dengan CSS, elemen <span> dapat digunakan untuk mengatur gaya pada bagian atribut dari teks.

Sebagai contoh, misalnya kita menggunakan elemen <span> untuk mengatur gaya pada teks tertentu dalam sebuah paragraf.

<p>
elemen <span style="color:blue"> <div> </span> tidak mempunyai arti khusus.
</p>

hasilnya adalah:

elemen <div> tidak mempunyai arti khusus.

Dari contoh dapat dilihat bahwa elemen <span> digunakan untuk memberi gaya warna biru pada teks "<div>" yang berada diantara teks "elemen" dan teks "tidak" dalam sebuah paragraf.

back to top.

Belajar css Pendahuluan.

2013-05-30T18:49:00.001+07:00

Memahami tentang script css memudahkan dalam memformat dokumen htm.

Assalaamu'alaikuum wr.wb.

Setelah sebelumnya saya membuat posting tentang Belajar html , dalam kesempatan ini kita lanjutkan dengan Belajar CSS.

Latar belakang.

CSS merupakan kependekan dari Cascading Steel Sheet yang diciptakan oleh W3C (World Wide Consorcium ) sebuah consorcium yang dibentuk untuk menangani masalah-masalah yang timbul pada saat html berada pada versi 3.2.

Pada html versi 3.2 ini dalam penggunaannya menjadi masalah besar bagi para pengembang web, karena untuk memberi gaya/style pada rancangan dokumen html, para pengembang harus menuliskan tag-tag , properti maupun atribut secara berulang-ulang untuk setiap style yang sama, hal ini menimbulkan kerepotaan pada saat membangun dokumen html dalam skala besar, karena akan menjadi sangat kompleks,rumit dan menjadi sangat mahal.

CSS mulai dikembangkan ketika html berada pada versi 4.0, tag-tag yang ada pada versi sebelumnya mulai ditinggalkan pemakaiannya dan diganti dengan cara yang lebih baik dan simple. CSS memudahkan dalam mendefinisikan penulisan dalam membuat dokumen html.
Dengan css pekerjaan html menjadi ramping, sehingga sangat membantu bagi para pengembang web.
Secara terpisah file css disimpan dalam format *.css .
Sebelum mempelajari CSS, seharusnya kita sudah mahir dan memahami cara-menulis html, karena css bukanlah materi yang berdiri sendiri, dan css tidak dapat membangun web sendiri, tetapi css membantu mempermudah dalam memberi gaya pada dokumen html. Jadi yang membangun halaman web adalah html, itulah sebabnya kita harus memahami cara-cara menulis html sebelum mempelajari css. Untuk belajar menulis html, silakan kunjungi Belajar html disini.

Contoh CSS

Source code:

<html>
<head>
<style>
body {background-color: yellow;}
h1 {font-size: 24px;}
h2 {color: blue;}
p {margin-left: 50px;}
</ style>
</ head >
<body>
<h1> Header ini adalah 24px </h1>
<h2> Header ini berwarna biru</h2>
<p> ayat ini memiliki margin kiri 50 pixel </ p>
</ body>
</html>

Sintaks css.

Susunan sintaks css biasanya terdiri dari selector, properti dan value. Untuk jelasnya, cara penulisan css sintaks dapat digambarkan sebagai berikut:

selector { declaration; }

selector { properti:value; }

selector (pemilih): adalah nama elemen html yang dipilih untuk diatur atau diberi gaya. Misalnya elemen: body, heading, paragraf dan lainnya.
declaration (deklarasi) merupakan rincian gaya/style yang akan diberikan untuk selector.
- Declaration terdiri dari pasangan properti dan value/nilai
- setiap declaration harus diakhiri dengan tanda titik-koma ( ; ). Dan kelompok declaration harus berada diantara dua tanda kurung-kurawa ( { dan } )
properti adalah atribut style atau gaya yang ingin anda ubah. Dan setiap properti memiliki nilai atau value.

Contoh css :

body { background-color:lime; }

h1 { font-familly:verdana; }

p { color:blue; font-size:16px; }

Dari 3 contoh sintaks css di atas dapat dijelaskan bahwa body, h1 dan p adalah selector yang dipilih untuk diberi gaya, "background-color:", "font-family:", "color:", "font-size:" adalah properti, sedangkan yang merupakan nilai/value dari properti tadi adalah "lime", "verdana","blue" ,dan "16px".

Satu hal yang harus diingat, jangan menyimpan spasi diantara pasangan value dengan satuannya, misalnya :

p { font-size:12 px }

Contoh diatas dapat kita lihat diantara teks value "12" dan teks satuan "px" terdapat satu spasi, ini tidak dibenarkan. Dan cara penulisan yang benar adalah :

p { font-size:12px; }

Komentar css.

Seperti halnya pada html, pada dokumen css juga kita bisa menyelipkan komentar pada dokument. Komentar memudahkan kita dalam mengedit kode-kode css dikemudian hari apabila serasa ingin mengeditnya.

Komentar dalam css, cara penulisannya dimulai dengan tanda " /* ", dan diakhiri dengan tanda " */ ". Kita dapat menyimpan komentar atau keterangan diantara kedua tanda itu. Kita dapat menempatkan komentar dimanapun yang kita perlukan, bahkan kita bisa menempatkannya diantara properti dalam deklarasi.
Contoh :

/* ini sebuah komentar */
p { text-align:center;
/* ini komentar yang lain */
color:blue; font-family:arial; }

Demikianlah sekedar pendahuluan tentang belajar css. Dan untuk melanjutkan ke materi berikutnya, silakan buka tentang Belajar css Id dan Class.
Semoga berhasil.

back to top
kembali ke atas

Belajar html Frame.

2013-05-27T14:35:00.005+07:00

ke bawah

Frame dalam dokumen html merupakan rancanngan atau pola yang mengatur tataletak atau susunan dari kontent-konten apapun yang akan ditampilkan pada suatu halaman web.
Dengan frame kita bisa menampilkan beberapa halaman html sekaligus dalam satu jendela browser. Maksudnya adalah dengan membuka satu halaman yang mengandung frame kita dapat melihat beberapa halaman sekaligus yang telah diatur pada sebuah halaman yang be-frame.
Selain mempercantik halaman, dengan frame dapat memudahkan navigasi untuk menuju pada jendela baru.
Ok, untuk memahami tentang hal ini, misalkan kita akan membuat halaman yang berframe seperti yang terlihat pada gambar berikut ini:

frame 3.

file isi/content.htm

Kita anggap saja gambar diatas merupakan sebuah halaman yang mengandung 3 frame, masing2 berisi frame 1 yang diisi dengan file judul.htm, frame 2 berisi file menu.htm dan frame 3 yang berisi file isi.htm. Maka kita harus membuat 4 buah file.htm, yaitu: 3 file yang disebutkan diatas sebagai file yang ditampilkan, dan 1 file yang menampilkan.File yang menampilan ini kita sebut saja file utama.htm. File utama inilah yang disebut Frame halaman, yaitu seperti gambar contoh diatas.
Untuk membuat file utama ini kita hanya membutuhkan 2 tag, yaitu:
Tag <frameset>:Tag ini berfungsi untuk mengatur pembuatan halaman yang berframe. Dan
Tag <frame> : tag ini berfungsi untuk mengatur dan menentukan file target bagi setiap frame.
Kode html untuk halaman yang berframe atau file "utama.htm" adalah:
<html>
<head>
<title>halaman utama
</title>
</head>
<frameset>
</frameset>
</html>
Dari cara penulisannya, halaman yang berframe tidak memerlukan tag <body> karena yang menjadi isi dari halaman yg berframe adalah isi dari halaman lain yang menjadi target dari setiap frame.
Coba perhatikan kembali gambar contoh halaman berframe diatas. Halaman itu terdapat 3 frame terdiri dari dua baris (anggap baris pertama tingginya 30% dan baris kedua 70%) dan dua kolom pada baris kedua (kolom sebelah kiri anggap saja 40% dan sebelah kanan 60%).
Untuk pembagian baris digunakan atribut <rows> dan untuk pembagian kolom digunakan atribut <cols> Jadi gambar diatas kode htmlnya adalah:
<frameset rows="30%,70%">
<frame>
<frameset cols="40%,60%">
<frame>
<frame>
</frameset>
</frameset>
Seperti halnya dalam pembuatan table, nilai dari pembagian rows dan cols selain menggunakan persen (%), juga bisa menggunakan ukuran pixel misalnya rows="120,480". Bahkan kita juga bisa menulisnya dengan hanya satu ukuran didepan, dan yang lain adalah sisanya dari lebar jendela browser pengguna. Misalnya cols="120,*".
Untuk selanjut nya kita isi setitap <frame> dengan file target yang tentunya sudah dibuat sebelumnya yaitu: file judul.htm, file menu.htm dan file isi.htm, seperti ini:
<frameset rows="30%,70%">
<frame src="http://.../judul.htm">
<frameset cols="40%,60%">
<frame src="http://.../menu.htm">
<frame src="http://.../isi.htm">
</frameset>
</frameset>
Perhatikanlah kode html diatas, pada tag frame terdapat atribut src, ini berfungsi untuk merujuk alamat dari isi frame yang akan ditempatkan pada frame yang telah disediakan tersebut.
Selain atribut src yang merupakan atribut yang sangat penting, dalam tag <frameset> dan tag <frame>, biasanya juga dilengkapi dengan atribut lainnya, yaitu :
Frameborder: Atribut ini berfungsi untuk memilih apakah frame akan diberi border atau tidak. Dan nilai dari atribut ini adalah: "yes" atau "no".
Border: Berfungsi untuk menentukan ketebalan garis tepi pada tiap frame, satuan/nilainya adalah pixel.
Bordercolor: Ini berfungsi untuk memberi warna pada border.
Marginwidth: Atribut ini berfungsi untuk memberi jarak antara tepi kiri frame atau tepi kanan frame dengan isi frame.
Marginheight: berfungsi memberi jarak antara tepi atas frame atau tepi bawah frame dengan isi frame.
Noresize: Dengan adanya atribut ini artinya ukuran frame tidak bisa diubah atau tidak bisa digeser, jika layar browser tidak sesuai atau lebih kecil maka sebagian isi halaman tidak akan terlihat.
Scrolling : ini berfungsi sebagai penggulung layar, Ada tiga pilihan value/nilai yang disediakan yaitu:
yes : artinya fasilitas penggulung selalu tersedia,
no : artinya tidak ada fasilitas penggulung, dan
auto : berarti fasilitas ada bila diperlukan.
Name : atribut name berfungsi untuk memberi nama pada frame.
Atribut name diperlukan sebagai pengarah navigasi pada target yang ditentukan, misalnya frame isi diberi nama "isi", lalu setiap link pada halaman ini ditentukan dengan target="isi" maka apabila sebuah link diklik, maka halaman yang dipanggil akan muncul pada halaman dengan frame isi.
Adapun target untuk memunculkan halaman dapat pula ditempatkan pada:
Target="blank" : halaman yang dipanggil akan muncul pada jendela baru, artinya: tidak lagi mengisi halaman yang berframe tadi.
Target="self" : halaman yang dipanggil akan menempati tempat dimana link itu berada. Misalnya kita mengklik satu link pada daftar menu, maka halaman akan menempati frame menu.
Target="parent" : halaman yang dipanggil akan mengisi framset, satu tingkat lebih tinggi dari frame tempat dimana link itu berada.
Berikut contoh html dalam penerapan atribut tersebut diatas.
<framset rows="30%,70%" bordercolor="warna" frameborder="yes" border="pixel">
<frame src="/judul.htm" name="judul" border="10" bordercolor="warna" marginwidth="angka" marginheight="angka" noresize>
<frameset cols="40%,60%" scrolling="no" frameborder="yes">
<frame src="/menu.htm" name="menu" target="isi" scrolling="no" noresize>
<frame src="/isi.htm" name="isi" marginwidth="angka" marginheight="angka">
</frameset>
Apabila kita ingin agar setiap link pada file menu akan diarahkan pada frame isi maka pada penulisan link tsb harus disisipkan atribut target yang mengarah pada frame isi. Misalnya ada salah satu link pada file menu seperti ini:
<a href="/List_item"> List Item
</a>
Dan apabila link yang dipanggil ini ingin diarahkan pada frame isi apabila diklik, maka kita harus menyisipkan atribut target=isi pada link tsb seperti ini:
<a href="/List_item" target="isi"> List Item
</a>
Apabila anda ingin agar semua link yang ada pada halaman yang mengisi halaman yang berframe ini akan diarahkan pada frame isi, anda bisa menambahkan atribut:
<basetarget="isi">
sehingga kita tidak perlu menuliskan atribut target pada setiap link. Atribut basetarget harus ditempatkan diantara tag <head> dan </head>.
Demikianlah sekelumit saya sajikan tentang cara membuat frame halaman. Tentu saja masih banyak variasi lainnya dengan atribut2 yang lain pula.
Semoga bermanfaat.
back to top

Cara Membuat file Dokumen html/css Menggunakan X-plore pada S60v3v5.

2013-05-26T08:02:00.000+07:00

ke bawah
Tak ada rotan, akarpun jadi.
Tak ada Notepad, x-plole pun bisa.
Assalaamu'alaikum....
Pada kesempatan kali ini, saya share mengenai manfaat lain dari aplikasi X-plore yang ternyata selain digunakan sebagai manager file yang terdapat pada handphone, juga dapat digunakan sebagai text editor bisa menggantikan Notepad pada handphone.
Dengan sistim edit, dengan x-plore ini kita dapat membuat file dokumen html, dokumen css ataupun membuat halaman web.
Adapun langkah-langkah cara membuat dokumen html/css dapat diuraikan sebagai berikut:
pertama: anda harus punya file yang berekstensikan atau format .txt maupun format .xml.
Untuk mendapatkan file .txt atau file .xml, anda bisa meng-copy file .txt atau .xml yang ada pada dokumen file handphone, bisa dicari menggunakan x-plore pada folder private baik pada drive C maupun drive E, lalu di copy dan ditempatkan pada folder kosong (atau membuat folder baru).

kedua: ubahlah nama/rename file ekstensi txt atau xml tadi menjadi file dengan nama (terserah anda) tetapi dengan ekstensi .htm , .html ataupun .css tergantung kebutuhan anda. (jangan lupa memberi tanda titik ( . ) sesudah nama file sebelum nama ekstensi (misalnya: "halaman.htm ", "black.css" ).

ketiga: masih menggunakan x-plore, arahkan kursor pada file yang sudah di-rename tadi ->> klik option ->> klik file ->> arahkan kursor pada tulisan Edit ->> lalu klik.

Maka akan terbuka isi dari file yang telah anda copy dan rename tadi. Lalu hapus dan bersihkan.

keempat: Setelah bersih, mulailah membuat dokumen html maupun css dengan mengetikkan kode-kode html maupun css hingga selesai.

kelima: Setelah selesai mengetikkan isi dokumen ->> klik Option lalu arahkan kursor ke bawah ->> lalu klik Save.

Selesai sudah anda membuat dokumen html maupun css dengan memanfaatkan aplikasi x-plore yang difungsikan sebagai teks editor.
Semoga info kecil ini bermanfaat buat kita semua. kembali ke atas

Belajar html Layout.

2013-05-24T08:56:00.001+07:00

ke bawah

Homepage sebuah situs web ditata sedemikian rupa sehingga tampilannya menjadi bagus dan menarik.
Konten-konten kelompok ditempatkan di dalam kolom-kolom untuk memudahkan dalam melihat kategori navigasi dan lain-lain.
Untuk itulah penataan tata-letak pada halaman web menjadi sangat penting.

Untuk membuat kolom-kolom tata letak konten-konten dapat digunakan elemen <div> maupun elemen <table>. Namun demikian penggunaan elemen table untuk membuat tata letak halaman, hal ini tidak dibenarkan. Elemen tabel adalah diperuntukkan membuat daftar tabular.

Kehadiran css dalam hal ini dapat digunakan untuk memposisikan elemen, mebuat latarbelakang dan membuat tampilan warna-warni pada halaman.

Layout html menggunakan elemen <div>.

Elemen div adalah tingkat elemen blok dalam hal ini digunakan untuk mengelompokkan elemen.

Di bawah ini adalah contoh menggunakan lima elemen <div> dalam menyusun tataletak elemen lainnya pada halaman.

<!DOCTYPE html >

<html>

<body>

<div id="container" style="width:300px">

<div id="header" style="background-color:#00ff88; height:60px;">

<h2 style="margin-bottom:0; text-align:center;"> judul halaman web
</ h2>

</div>

<div id="menu" style="background-color:#00DD55; height:200px; width:80px; float:left;" >

<b>Menu:</b> <br> html <br /> css <br /> javascript

</div>

<div id="content" style="background-color:#00EEDE; height:200px; width:220px; float:left;" >

<h3 style="text-align:center;" > di sini isi konten </h3>

</div>

<div id ="footer" style="background-color: #0055d5; text-align: center;">

Hak Cipta © DoMain.com

</div>

</div>

</ body>

</ html>

Dengan kode html diatas akan menampilkan halaman seperti berikut ini.

di sini isi konten

Layout html menggunakan elemen <table>.

Jalan yang singkat dalam membuat layout menggunakan elemen html <table>. Penggunaan tag <table> dalam membuat layout halaman bukanlah cara yang benar, tag <table> hanya diperuntukan membuat tabel data.

Untuk membuat layout dalam multi-kolom dapat digunakan elemen <table> atau <div>. CSS digunakan untuk mengatur posisi elemen, background dan memberi warna.

Berikut ini contoh membuat layot menggunakan tag <table> dengan 3 baris dan 2 kolom.

<! D OCTYPE html >

< html>

< body>

<table style="width:300; border:0px;">

<tr>

<td colspan="2" style="background-color:#00d5d5; text-align:center;">

<h2>judul halaman web </h2>
</td>

</tr> <tr>

<td style="background-color:#00dd55; width:80px;text-align:top;">
<b> Menu </b> html <br> css <br> javascript
</td>

<td style="background-color:#00ffee; height:200px;width:220px; text-align:center;">
di sini konten halaman

</td>

</tr> <tr>

<td colspan="2" style="background-color:#00d5d5; text-align:center;">
Copyright © DoMain.com
</td>

</tr> </table>

</ body>

</ html>

Berikut ini yang tampil di browser.

judul halaman web
Menu: html css javascript	di sini konten halaman
Copyright © DoMain.com

Demikianlah cara membuat layout html halaman. Semoga bermanfaat.

kembali ke atas

Belajar html Cara Membuat Teks/Obyek Bergerak.

2013-05-19T09:32:00.001+07:00

ke bawah

Marquee merupakan salah satu tag dalam html yang berguna untuk menampilkan sesuatu yang bergerak pada halaman web, bisa berupa teks biasa, gambar dan yang lainnya.

Dengan adanya tag ini, tampilan halaman menjadi sangat interaktif karena menampilkan sesuatu yang bergerak, sehingga menarik perhatian para pengunjung. Tag ini akan sangat baik bila digunakan untuk kepentingan pengumuman-pengumuman, iklan dan yang lainya.

Susunan html sederhana tag marquee :

<marquee>
tulisan ini tampil berjalan
</marquee>
Maka akan tampak pada halaman seperti ini :

tulisan ini tampil berjalan
Agar tampilan lebih atraktif lagi bisa ditambahkan atribut-atributnya yaitu: BGCOLOR, WIDTH, HEIGHT, DIRECTION, BEHAVIOUR, SCROLL, VSPACE, HSPACE dan lainnya.

bgcolor :

atribut bgcolor berguna untuk memberi latar belakang warna pada objek yang bergerak. Atau menggunakan atribut style dengan properti background-color. Value dari atribut ini adalah warna.

<marquee style="background-color:yellow">
teks berjalan dengan latarbelakang warna kuning
</marquee>

teks berjalan dengan latarbelakang warna kuning

width dan height:

Atribut ini berguna untuk menentukan ukuran dari objek yang ditampilkan bergerak. Width: untuk menentukan lebar, dan height: untuk menetukan tingginya.

<marquee width="100" height="40">
objek berjalan dengan lebar:100 dan tinggi:40
</marquee>

teks berjalan dengan width:100 dan height:40

vspace dan hspace :

Kedua tag ini berfungsi untuk menentukan jarak antara obyek yang bergerak dengan tulisan, kiri-kanan untuk hspace dan atas-bawah untuk vspace.

direction :

Atribut ini berfungsi untuk menentukan arah gerakan, value dari atribut direction dapat dipilih: left (ke kiri), right (ke kanan), up (ke atas) dan down (ke bawah).

<marquee direction="left" |"right" |"up" |"down">
objek berjalan ke kiri, ke kanan, ke atas atau ke bawah
</marquee>

tulisan ini tampak berjalan kekanan.

behaviour:

Atribut ini berguna untuk menentukan bagaimana tampilan itu bergerak. Jika pada atribut direction menentukan arah dari gerakan, maka pada atribut behaviour yang ditentukan adalah prilaku gerakannya. Value dari atribut ini adalah : scroll, slide, alternate.

behaviour=scrool : dengan atribut behaviour=scroll maka obyek akan bergerak sesuai arah yang ditentukan, dan mengulangi gerakannya dari titik awal.

behaviour=slide : Dengan cara ini, maka obyek akan bergerak sesuai arah yang ditentukan dan berhenti di titik akhir dan tidak mengulangi gerakannya.

behaviour=alternate : Dengan penentuan behaviour=alternate maka obyek akan melakukan gerakan bolak-balik.

<marquee behaviour="scroll" |"slide" |"alternate"> obyek bergerak dengan prilaku gerakan
</marquee>

tulisan ini tampak berjalan dengan prilaku behaviour

loop :

Dengan atribut loop maka obyek yang bergerak akan diatur jumlah gerakannya. Dengan kata lain, tanpa menggunakan atribut ini maka obyek yang bergerak akan melakukan gerakannya secara terus menerus.
Sebagai contoh:

<marquee width="200" height="60"
vspace="8" hsvace="6" bgcolor="yellow"
direction="left" loop="8"> teks berjalan dengan 8kali gerakan
</marquee>

Gerakan dengan loop:8, dan berhenti setelah 8 kali gerakan :

contoh teks bergerak dengan latar belakang warna kuning dan atribut lainnya

Itulah beberapa contoh cara membuat text /obyek bergerak pada halaman web.

back to top

Belajar html Cara Membuat Form.

2013-05-18T07:58:00.001+07:00

ke bawah

Form atau Borang ( dalam istilah bahasa Indonesia ) adalah merupakan daftar isian yang digunakan untuk berbagai keperluan, misalnya untuk pengumpulan data, login, registrasi dan bahkan survey.

Tag Form dan Atributnya.
Tag <form> merupakan sebuah tag yang digunakan untuk menandakan sebuah formulir isian pada dokumen html.
Pada tag ini, atribut yang digunakan yaitu: atribut action dan atribut method.

Action:

Atribut ini berfungsi untuk menindaklanjuti data yang yang dibuat dan dikirim, yang nantinya akan diproses melalui dokumen proses.php.

Method:

Atribut ini berfungsi untuk menentukan cara pengiriman sebuah dokumen formulir isian. ada dua methode yang digunakan yaitu: Methode Get dan Methode Post.

Berikut adalah contoh kerangka penulisan html sebuah form:

<form id="form" name="form"
action="proses.php"

method="get"|"post">

<input type="....">

<input type="....">
. . . . . . . . . . . . . .

<input type=".....">

<input type="submit"....>

<input type="reset"....>

</form>

Input type yang sering digunakan diantaranya adalah:

Type text : merupakan kolom untuk memasukan data text biasa dengan ukuran atau jumlah karakter yang sedikit, misalnya untuk memasukan data berupa nama, alamat email, alamat tempat tinggal dan lain-lain.

Cara menuliskan htmlnya sbb:

Nama Anda:

<input type="text"

name="nama" size="25">

Alamat Email:

<input type="text" name="e_mail" size="25">

Dan inilah hasilnya yang tampil dihalaman web.

Nama Anda :

Alamat Email :

Dalam penulisan html diatas terlihat atribut name : ini berfungsi untuk memberitahukan pada server bahwa input data yang terkirim adalah sebuah nama.

Sedangkan atribut size berfungsi menentukan lebar kolom untuk menuliskan data.

Input type: Password.

Dalam type password ini tidak jauh beda dengan type text biasa, hanya saja setelah pengunjung menuliskan data maka karakter yang dituliskan akan langsung berubah menjadi karakter lain yaitu berupa tanda bintang atau titik( * ).
Ini diperuntukkan menjaga kerahasiaan sebuah password atau kata sandi.

Penulisannya adalah sbb:

Kata Sandi :

<input type="password"

name="password" size="20">

Inilah hasil yang dapat ditampilkan pada halaman browser.

Kata Sandi :

Input type: Select.

Input select dimaksudkan agar pengunjung hanya memilih salah satu dari beberapa pilihan yang disediakan.

Pada tag ini terdapat pula atribut selected dan value yang telah ditentukan. Karakater dari atribut selected adalah: apabila pengunjung tidak memilih satupun dari pilihan yang ada, maka otomatis data yang ditentukan oleh selected itulah yang dimasukkan sebagai pilihan.

Seperti pada contoh berikut, selected menentukan Jakarta sebagai pilihan jika tak satupun yang dipilih oleh pengunjung.

Berikut adalah cara menuliskan htmlnya:

Kota Asal:

<select name="kota_asal">

<option selected> Jakarta
</option>

<option> Bandung

</option>

<option> Semarang

</option>

<option> Surabaya

</option>

</select>

Berikut penampilannya:

Kota Asal :

Input type: Radio.

Option dengan type radio digunakan apabila diharuskan memilih satu diantara dua atau beberapa pilihan yang disediakan. Pada tag dengan type radio selalu disertakan atribut value yang merupakakan pilihan atau option yang disediakan.

Type radio biasanya digunakan untuk mengambil data pilihan dari pengunjung halaman web, misalnya status perkawinan, jenis kelamin dll.

Berikut cara menuliskan htmlnya misalnya untuk mengambil data jenis kelamin :

Jenis Kelamin :

<input type="radio" name="jenis_kelamin" value="pria"> Pria

<input type="radio" name="jenis_kelamin" value="wanita"> Wanita

Berikut yang ditampilkan pada halaman web.

Jenis Kelamin :

Pria

Wanita

Type checkbox :
Sebenarnya type ini mirip dengan type radio maupun select, yang berbeda pada type ini, pengunjung bisa menentukan pilihannya lebih dari satu, semua, bahkan tidak memilih sama sekali. Tentu saja jika tidak memilih maka tidak ada data yang terkirim.

Cara menuliskan htmlnya adalah seperti dibawah ini:

Hobbi Anda:

<input type="chackbox" name="hobi" value="olah_raga"> Olah Raga

<input type="chackbox" name="hobi" value="jalan_jalan"> Jalan-jalan

<input type="chackbox" name="hobi" value="computer"> Komputer

<input type="chackbox" name="hobi" value="lainnya"> Lainnya

Inilah penampakannya dihalaman web browser:

Hobi Anda :

Olah Raga
Jalan-jalan
Computer
Lainnya

Text Area :

Text area merupakan suatu papan atau kolom yang disediakan untuk mengambil data dari pengunjung, yang sifatnya memiliki tulisan yang lebih panjang jika dibandingkan dengan input yang lainnya.

Pada papan text area biasanya data yang dimasukkan adalah descriptsi diri, kesan-kesan, komentar dan yang lainnya.
Berikut cara menuliskan htmlnya.

Tentang Anda :

<textarea name="descript"cols="20" rows="10">
Tulis tentang diri anda disini.
</textarea>
Berikut adalah penampilannya:

Tentang Anda :

Submit dan Reset :

Type Submit berfungsi menyediakan tombol untuk mengirim data ke server untuk diproses melalui kode pemroses pada sistem php.

Type ini merupakan hal yang sangat penting karena tanpa adanya type submit data yang telah dibuat tidak dapat diproses pada server. Sehingga data yang telah kita buat tidak akan berarti apa-apa tanpa diproses.

Berbeda dengan type submit yang berguna untuk mengirim data, maka type reset adalah justru menyediakan tombol yang berfungsi untuk menghapus semua data yang telah ditulis oleh pengguna, hal ini dimaksudkan misalnya untuk mengatur ulang data dan sebagainya.

Berikut cara menuliskan htmlnya:

<input type="submit" name="submit" value="Kirim">
<input type="reset" name="reset" value="Hapus">

Inilah penampakannya di halaman web browser.

Itulah beberapa input type yang banyak digunakan dalam Form.

Semoga bermanfaat.

kembali ke atas

Cara Menempel Banyak Gambar Dalam Satu Bidang Dengan IDesigner.

2013-05-14T09:07:00.001+07:00

tempel gambar

ke bawah

Assalaamu'alaikum....

Kali ini post yang akan saya sajikan adalah cara menempelkan banyak gambar dalam satu bidang menggunakan aplikasi handphone symbian s60 yaitu: IDesigner atau Image Designer seperti gambar berikut ini.

Bagi yang membutuhkan aplikasi IDesigner dalam bahasa INA silakan klik download di bawah ini.

Berikut ini langkah-langkahnya:

pertama : Buatlah bidang kosong dengan ukuran yang dapat menampung gambar-gambar yang akan ditempel.

Caranya:

(i). Buka IDesigner >> klik Options (softkey kiri) >> klik File >> lalu klik pada no.4 (Buat gambar baru). Maka akan muncul text area, isilah sesuai ukuran lebar dan tinggi bidang yang dikehendaki (misalnya: 240x320, 300x400, 480x640 dsb). Jangan lupa menambahkan ukuran jarak antar gambar. >> lalu klik Ok.

(ii). Simpan gambar dengan meng-klik softkey kiri >> klik File >> lalu klik no.6 (Simpan gambar),>> lalu klik ok.

Maka akan muncul pilihan folder tempat menyimpan gambar. >> lalu klik softkey kiri >> klik pada "Simpan gambar". Maka akan muncul textarea lalu tulis nama file >> klik ok .>> lalu pilih format file (pilih saja jpeg) >> klik ok.

Akan muncul textarea untuk menentukan kwalitas gambar, tulis saja 100 >> klik ok.

Maka bidang kosongpun tersimpan.

kedua: Menempel gambar pada bidang kosong yang telah di simpan tadi.

Sebelum gambar-gambar ditempelkan, sebaiknya gambar-gambar tersebut disamakan ukurannya agar hasilnya rapi.

Selanjutnya kita akan menempel gambar-gambar pada bidang kosong yang telah dibuat satu per satu.

Langkah-langkahnya:

Buka IDesigner lalu klik sofkey kiri >> klik File >> klik Buka/open lalu pilih gambar.

Kemudian klik angka 1 pada keypad hp lalu pilih dan klik icon kotak strip-strip.

Arahkan kursor dipojok kiri atas klik tombol tengah1 kali >> geser ke kanan lalu geser lagi ke bawah sampai pojok kanan bawah, lalu klik 1 kali, nanti akan muncul pilihan. Kemudian klik Kopi.

Selanjutnya tekan tombol sofkey kiri, pilih dan klik File >> klik open, dan cari gambar bidang kosong yang tadi dibuat lalu klik 1 kali.

Kemudian tekan sofkey kanan lalu pilih dan klik Tempel/Paste. Bisa di geser untuk mengatur posisi lalu klik tombol tengah 1 kali.

Jengjreeeng...satu buah gambar telah ditempelkan.

Sebelum menempelkan gambar-gambar berikutnya, simpan dulu gambar tadi yang telah menempel satu gambar >> klik softkey kiri >> klik File >> klik Simpan gambar.

Lakukanlah cara yang sama seperti di atas untuk menempel gambar-gambar selanjutnya.

Demikianlah cara menempel banyak gambar dalam satu bidang menggunakan Aplikasi IDesigner.

Semoga bermanfaat.

kembali ke atas

Mengganti Background Gambar Denagan IDesigner.

2013-05-14T08:17:00.001+07:00

ke bawah

Dalam kesempatan kali ini saya ingin menyajikan dan share salah satu cara mengganti background gambar menggunakan IDesigner.

Mungkin bagi anda yang suka mengkoleksi gambar-gambar ataupun photo atau sekedar berkreasi dalam mendesain gambar/photo anda boleh mencoba cara ini untuk mengganti-ganti background-nya sesuai selera anda sesuka hati yaitu dengan menggunakan aplikasi ini.

Untuk yang belum memiliki aplikasinya silakan klik download di bawah ini.

Untuk mengganti background gambar tentu saja kita siapkan dua buah gambar yaitu gambar yang akan diganti backgroundnya dan gambar sebagai pengganti background. Dalam hal ini kedua gambar background sebaiknya mempunyai ukuran yang sama, agar rapi dan pas dalam penempelan gambarnya.

Semisal kita akan mengganti background gambar di bawah ini dengan background yang lain.

Langkah-langkahnya adalah:

Buka aplikasi idesigner >> klik menu softkey kiri >> klik file >> klik open/buka >> lalu cari gambar yang akan diganti backgroundnya. Dan klik pada gambar tersebut.

Setelah muncul gambarnya kemudian >> klik pada angka 1 keypad hp >> lalu arahkan kursor pada icon seperti pada gambar berikut untuk ditandai .

Arah kan kursor pada tepi gambar yang akan diambil >> klik tombol tengah 1 kali dan mulailah menandai mengelilingi tepi gambar dengan menggeser-geserkan kursor.

Perhatikan:

>> untuk berbelok arah tanda, klik dulu tobol tengah kemudian geser kursor.

>> jangan mengklik tombol tengah dua kali pada satu titik jika penandaan belum selesai, karena akan otomatis mengakhiri penandaan.

Setelah selesai penandaan pada sekeliling gambar, lalu klik 1 kali, maka akan muncul pilihan, pilih kopi dan klik 1 kali.

Selanjutnya klik softkey kiri >> klik file >> klik open/buka, lalu cari gambar yang akan dijadikan background baru lalu klik tombol tengah.

Setelah muncul gambarnya, lalu klik softkey kanan, maka akan muncul pilihan >> dan klik paste/tempel.>>lalu klik tombol tengah 1 kali.

>> lalu klik tombol tengah 1 kali. Geser kursor untuk mengatur posisi gambar.

Berikutnya simpan gambar: >> klik softkey kiri >> klik file >> klik open/buka >> pilih dan klik "simpan dengan format lain" >> pilih folder penyimpanan >> klik softkey kiri >> klik simpan gambar.

Selanjutnya anda akan dihadapkan pada pilihan dan isian, yaitu : nama file baru, format file dan lainnya. Silakan isi dan pilih sesuai keinginan anda.

Selesai.

Demikianlah uraian tentang mengganti background gambar menggunakan image designer.

Semoga bermanfaat.

oleh : Nurar

kembali ke atas

Belajar html Table ( Tabel ).

2013-05-13T17:23:00.001+07:00

ke bawah

Table dalam html digunakan untuk mengatur urutan atau susunan klasifikasi data dalam satu format data yang terpadu, sehingga dengan mudah kita dapat melihat data secara akumulatif hanya dengan melihat satu halaman berkas saja.misalnya berupa buku kas, daftar nama, data penduduk dsb.

Tag dasar table

Untuk membuat table yang sederhana, tag pokok yang digunakan terdiri dari Tag <table>, tag <tr> dan tag <td>.

tag <table>: berfungsi untuk membuat tabel yang selalu diikuti dengan tag <tr> dan tag <td>.
tag <tr> (table rows) digunakan untuk membuat baris pada tabel.
tag <td> (table data) berfungsi untuk menulis data sekaligus untuk membuat kolom data.
Ruang yang dihasilkan oleh tr dan td itu disebut table cell. Table cell inilah yang digunakan untuk menyimpan data.
Untuk berbagai keperluan, ketiga tag diatas dapat dilengkapi dengan atribut-atribut.

Susunan html sederhana untuk membuat tabel adalah sebagai berikut:
<table>

<tr>
<td> susunan dasar table
</td>

</tr>
</table>

Susunan html di atas hanya menghasilkan satu ruang cell saja.
Dan hasilnya seperti ini :

susunan dasar table

Contoh berikut ini adalah cara menulis html untuk membuat tabel dengan 3 baris dan 2 kolom.

<table border="1">
<tr>

<td> cell 1 </td>

<td> cell 2 </td>

</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
<tr>

<td> cell 5 </td>

<td> cell 6 </td>
</tr>
</table>

Dalam contoh ini dicantumkan atribut border: berguna untuk memberikan ketebalan garis, nilai satuan dapat digunakan pixel (px ) atau persen (%).

hasilnya :

cell 1	cell 2
cell 3	cell 4
cell 5	cell 6

Menentukan ukuran tabel
Untuk mengatur lebar tabel digunakan digunakan atribut width dan untuk mengatur tingginya digunakan atribut height, atau menggunakan atribut style dengan properti width dan height. Sedang nilai satuan dapat menggunakan satuan pixel (px) atau persen (%).

Misalnya kita akan mengatur contoh tabel diatas dengan lebar tabel:200px, lebar td (table data):50% dari lebar tabel dan tinggi td pada baris pertama (cell 1 dan 2): 40px. Cara penulisannya seperti ini:

<table border="1" style="width:200px;">
<tr>

<td style="width:50%; height:40px> cell 1 </td>

<td> cell 2 </td>

</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
<tr>

<td> cell 5 </td>

<td> cell 6 </td>

</tr>
</table>
maka hasilnya seperti ini:

cell 1	cell 2
cell 3	cell 4
cell 5	cell 6

Untuk mengatur lebar dan tinggi td, jika kita hanya mengatur pada cell 1 saja, maka secara otomatis tinggi td pada kolom berikutnya mengikuti tinggi td pada cell 1, dan lebar td pada baris berikutnya akan otomatis mengikuti lebar td pada cell diatasnya (cell 1).

Menggabungkan baris dan kolom

Baris-baris dan kolom-kolom dapat digabungkan sesuai kebutuhan.
Untuk menggabungkan 2 kolom atau lebih digunakan atribut collspan dan untuk menggabungkan 2 baris atau lebih digunakan atribut rowspan. Sedangkan nilai dari kedua atribut itu menyatakan berapa baris atau berapa kolom yang akan digabungkan.

Pada contoh berikut cell 1 dan cell 2 dalam baris pertama disatukan (colspan=2).
code html :

<table border="1" width="220">

<tr>

<td colspan="2"> cell 1 dan 2 </td>
</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
</table>

cell 1 dan cell 2
Cell 3	cell 4

Contoh berikut adalah menyatukan cell 1 dan cell 2 pada kolom ke1 (colspan=2)

code html :

<table border="1" width="220">

<tr>

<td width"50%" rowspan="2"> cell 1 dan 3
</td>

<td> cell 2

</td>
</tr>
<tr>
<td> cell 4

</td>
</tr>

</table>
hasilnya :

bidang 1 dan 3	sell 2
	cell 4

Gambar ini menyatukan cell 1 dan cell 3 yang terletak dalam kolom 1 (rowspan=2)

Contoh dibawah ini, dua kolom yaitu: cell 1 dan cell 2 digabungkan (colspan=2), dan dua baris pada kolom ke-1 yaitu: cell 3 dan cell 5 digabungkan (rowspan=2). Dan cara menyusun html-nya seperti ini.

<table border="1" style="width:220px;">
<tr>

<td colspan="2"> cell 1 dan cell 2 </td> </tr>

<tr>

<td rowspan="2"> cell 3 dan cell 5 </td>

<td> cell 4 </td>

</tr>
<tr>

<td> cell 6 </td>

</tr>
</table>
maka hasilnya seperti ini:

cell 1 dan cell 2
cell 3 dan cell 5	cell 4
	cell 6

colspan = 2 dan rowspan = 2

Menentukan jarak cell

Untuk mengatur jarak cell digunakan atribut cellpadding dan atribut cellspacing.

cellpadding: atribut ini digunakan untuk mengatur jarak pada bagian dalam cell yaitu jarak antara cell dengan text data.
cellspacing: digunakan untuk mengatur jarak antar cell yaitu jarak bagian luar cell.

<table border="1" style="width:160px;" cellpadding="14px" cellspacing="8px" >
<tr>

<td style="width:50%;"> cell 1 </td>

<td> cell 2 </td>

</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
</table>
Pada contoh ini jarak cell diatur dengan cellpadding=14px dan cellspacing=8px. Ukuran cell sengaja dibuat besar dan tidak seimbang, hal ini untuk memperjelas pemahaman penggunaan atribut cellpadding dan cellspacing saja.

maka hasilnya seperti ini:

cell 1	cell 2
cell 3	cell 4

Perhatikanlah :
jarak antara text dengan cell (cellpadding=14px)
jarak antara cell dengan cell (cellspacing=8px).

Membuat judul pada table
Cara untuk membuat tabel yang dilengkapi dengan kop dan judul cell, dalam menulis html-nya menggunakan tag <caption> yang diletakan setelah tag <table> untuk membuat kop dan tag <th> (table header) sebagai ganti dari tag <td> untuk membuat header cell.

Sebagai contoh kita akan membuat tabel dilengkapi dengan kop dan table header.

<table border="1" style="width:200px;">

<caption> tabel contoh </caption>
<tr>

<th> header 1 </th>

<th> header 2 </th>

</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
<tr>

<td> cell 5 </td>

<td> cell 6 </td>

</tr>
</table>

maka hasilnya seperti ini:

tabel contoh
header 1	header 2
cell 3	cell 4
cell 5	cell 6

Secara otomatis tag <caption> dan tag <th> akan membuat text berada di tengah dan huruf tebal.

Membuat background tabel
Pada tabel kita bisa memasang background, baik background dengan warna maupun dengan background gambar.

Untuk membuat background pada tabel, digunakan atribut style yang dipasang pada tag <table> (untuk keseluruhan) dan tag <td> untuk backgroud tiap cell.

Berikut ini cara pemasangannya :

<table border="1" style="background-image:url(..../image.jpg); width:200px;">

<caption> tabel contoh </caption>

<tr>

<th style="background-color:aqua;"> header 1 </th>

<th style="background-color:aqua;"> header 2 </th>

</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
<tr>

<td> cell 5 </td>

<td> cell 6 </td>

</tr>
</table>
Semoga bermanfaat.

Belajar html Entitas.

2013-05-12T18:45:00.001+07:00

entitas

ke bawah

Entitas merupakan cara penulisan karakter teks khusus yang tidak dijumpai dalam karakter teks ASCII.

Misalnya kita ingin menampilkan karakter "<" (tanda kurang dari) pada halaman web, maka kita tidak bisa dengan cara menuliskanya langsung seperti itu, karena browser tidak mengenalinya dan pada halaman web tidak menampilkan apa-apa. Untuk itu ada cara untuk menuliskan karakter seperti itu, yaitu dengan menuliskan kode-kode tertentu yang direkomendasikan W3C. Kode-kode itu disebut Entitas.

Sebagai contoh kita ingin menampilkan pertidaksamaan matematika seperti ini :

Sepuluh dikurang x kurang dari 8

dan kita langsung menulisnya seperti ini:

10 - x < 8

maka yang akan muncul pada browser adalah:

10 - x 8

ternyata tanda < tidak muncul. Untuk itu kita ganti tanda < dengan kode < , sehingga kalimat matematika di atas kita ketik seperti ini.

10 - x < 8

cobalah sendiri apa yang muncul di browser.

Contoh lain, misalnya kita membutuhkan lebih dari satu spasi secara berurutan diantara kata dalam suatu kalimat, tentu saja kita tidak bisa hanya menggunakan tab spasi untuk membuat beberapa spasi berurutan, karena browser secara otomatis hanya mengizinkan satu spasi saja.

Untuk mendapatkan beberapa spasi berurutan caranya adalah dengan menuliskan kode & (sebagai pengganti satu spasi), sebanyak spasi yang kita butuhkan.

Berikut beberapa kode entitas yang paling banyak digunakan dalam menulis dokumen html.

Entitas karakter
Hasil	Penje- lasan	Nama entitas	Nomor entitas
( )	spasi
( < )	kurang dari	<	<
( > )	lebih dari	>	>
( " )	kutif ganda	"	"
( ' )	kutif tunggal	'	'
( & )	dan	&	&

Sekarang timbul pertanyaan, lalu bagaimana cara menuliskannya agar di browser menampilkan tulisan & ?

Mudah saja, kita ganti karakter & dengan kode & diikuti dengan tulisan amp;, sehingga kita tulis &amp; (ingat: tanpa spasi), gampang kan?.

kembali ke atas

Belajar html Daftar Item ( List Item ).

2013-05-12T11:00:00.001+07:00

list item

ke bawah

Ada dua macam Daftar item yang dapat digunakan dengan html, yaitu: Daftar Tak Berurut (unordered list/bullet) dan Daftar Berurut (Ordered list).

Contoh Daftar tak berurut :

item kesatu
item kedua
item ketiga

Contoh Daftar berurut :

item kesatu
item kedua
item ketiga

Kode html Daftar tak berurut untuk contoh diatas sbb :

<ul>

<li> item kesatu </li>

<li> item kedua </li>

<li> item ketiga </li>

</ul>

Sedangkan kode html Daftar berurut untuk contoh diatas adalah sbb :

<ol>

<li> item kesatu </li>

<li> item kedua </li>

<li> item ketiga </li>

</ol>

Untuk membuat Daftar tak berurut (bullet) digunakan tag <ul> dan untuk membuat Daftar berurut (numberic) digunakan tag <ol> . Sedangkan tag <li> digunakan untuk menempatkan item. Tentusaja masing2 tag tersebut harus disertai dengan tag penutupnya masing -masing.

Ada 3 type tanda bullet dalam Daftar tak berurut yaitu: type "disc "(bulat hitam), type "circle" (lingkaran) dan type "scuare" (kotak hitam), sedangkan untuk Daftar berurut (numberic) adalah : type "I"(romawi besar), type "¡" (romawi kecil), type "A" (huruf besar), type "a" (huruf kecil), dan type "1" (angka decimal).

Dengan tag-tag tersebut diatas, kita juga bisa membuat Daftar item bertingkat, baik untuk Daftar tak berurut maupun Daftar berurut.

Contoh Daftar item bertingkat:

item kesatu
item kedua

sub item kesatu
sub item kedua

sub sub item kesatu
sub sub item kedua
sub sub item ketiga

sub item ketiga

item ketiga

Daftar item bertingkat dengan numberik:

item kesatu
item kedua

sub item kesatu
sub item kedua

sub sub item kesatu
sub sub item kedua
sub sub item ketiga

sub item ketiga

item ketiga

Untuk membuat Daftar item bertingkat, tidak ada penambahan tag, yang perlu diperhatikan adalah cara penyusunan saja. Perhatikanlah susunan penempatan tag html untuk contoh daftar item bertingkat seperti diatas.

kode html :

<ul>

<li> item kesatu </li>

<li> item kedua </li>

<ul>

<li> sub item kesatu </li>

<li> sub item kedua </li>

<ul>

<li> sub sub item kesatu </li>

<li> sub sub item kedua </li>

<li> sub sub item ketiga </li>

</ul>

<li> sub item ketiga </li>
</ul>

<li> item ketiga </li>

</ul>

Cara penulisan yang sama juga untuk membuat source html list item bertingkat untuk numberik (bernomor urut).

ke atas

Belajar html Menyisipkan Script CSS Pada HTML.

2013-05-12T10:26:00.001+07:00

Dalam membangun sebuah halaman web, css tidak dapat berdiri sendiri, css fungsinya adalah membantu mempermudah memberi gaya pada dokumen html dalam membangun sebuah halaman web.

Dengan css, tag-tag html yang harus ditulis secara berulang-ulang dapat dipersingkat hanya dengan membuat satu file css.

Untuk menyisipkan css kedalam dokumen html, ada 3 cara yang dapat kita lakukan. Yaitu :

Eksternal style.
Internal style
Inline style

Cara eksternal style.

body
{
bacground-color:#7fffd4;
font-size:12px;
padding-left:3px;
}

#header
{

border:1px #DC143C solid;
background-color:#00CED1;
color:blue;
text-align:center;
margin-top:20px;
}

#menu
{
background-color:#40E0D0;
text-align:left;
padding-left:6px;
border:1px #800080 solid;
}

#content
{
background-color:#40E0d0;
text-align:left;
padding:3px;
color:black;
}

h1 { font-size:24px; }
h2 { font-size:20px; }

h3 { font-size:16px; }

h4 { font size: 12px; }

#footter
{

background-color:#00CED1;
color:blue;
text-align:center;
}

/* dan seterusnya */

Simpanlah file tersebut dalam format css dan berilah nama dengan nama file misalnya: gayaku.css, pada folder yang sama dengan folder tempat menyimpan file dokumen html.

Untuk menerapkan script css tersebut ke dalam dokumen html, adalah dengan membuat link pada dokumen html yang merujuk pada file gayaku.css. Link tersebut ditempatkan diantara tag dan tag , dan harus dibuat pada tiap halaman.

Cara internal style.

Menyisipkan css denagn cara internal style adalah dengan menyisipkan script css pada dokumen html yang ditempatkandi bagian header, yaitu diantara tag dan tag . Disini kita langsung menuliskan gaya/css untuk mengatur style halaman yang kita inginkan didahului dengan menuliskan tag <style> dan diakhiri dengan tag </style>.

Berikut ini adalah contoh menyisipkan script css pada dokumen dengan cara internal.

<html>

<head>

<style type="text/css">

body

{
bacground-color:#7fffd4;

/*7FFFD4=Aquamarine*/

font-size:12px;

padding-left:3px;

}

#header

{

border:1px #DC143C solid;

background-color:#00CED1;

color:blue;

text-align:center;

margin-top:20px;

}

#menu

{

background-color:#40E0D0;

text-align:left;

padding-left:6px;

border:1px #800080 solid;

}

h1 { font-size:24px; }

h2 { font-size:20px; }

h3 { font-size:16px; }

h4 { font size: 12px; }

#footter

{

background-color:#00CED1;

color:blue;

text-align:center;

}

</style>

</head>

<body>

<div id="">

</div>

<div id="">

</div>

<div id="">

</div>

</body>

</html>

Cara inline style.

Memasukan css kedalam dokumen html dengan cara inline style dapat dilakukan apabila kita menginginkan gaya/style pada kejadian tunggal yang unik atau khusus. Gaya inline diletakan pada elemen html yang relevan, misalnya kita memasukan gaya tulisan pada sebuah paragraf tertenu, maka properti css ini kita terapkan pada tag

dan dengan atribut style: Dengan kata lain kita memasukan gaya untuk elemen html, dengan atribut style yang dapat berisi properti css.

<p style="color:blue; margin-left:40px;"> ini sebuah paragraf
</p>

Contoh diatas dapat dijelaskan bahwa kita memberi gaya pada paragraf tersebut dengan properti css yaitu color: dan margin-left: dengan nilai/value masing-masing blue dan 40px. Dan gaya tersebut haya berlaku untuk paragraf ini saja, sedang paragraf yang lain tidak mengikuti gaya ini.

Contoh lainnya :

<body style="color:black; background-color:#FFD700; font-size:12px; padding:3px; "> menerapkan style css pada bagian tubuh

</body>

Belajar html Image.

2013-05-11T16:58:00.001+07:00

image

ke bawah

Selain memperindah halaman, kadang gambar juga dibutuhkan sebagai ilustrasi pada artikel atau promosi suatu product. Tapi perlu diingat bahwa semakin banyak gambar yang disimpan pada halaman maka semakin lama saat loading.

Tag <img>, Atribut "src:" dan atribut "alt:"

Untuk menempatkan gambar pada halaman, dalam penulisan dokumen html digunakan tag <img>, atribut src dan atribut alt.

Syntact di atas merupakan contoh cara penulisan html untuk menempatkan gambar dengan nama gambarnya adalah: "gambarku.jpg" dan alamat gambarnya adalah: "http://alamat_gambar/".

tag<img>: berfungsi untuk menempatkan gambar pada halaman.
atribut src: (source=sumber) untuk menginformasikan dimana letak (sumber) gambar itu berada.
atribut alt yang merupakan singkatan dari kata "alternate", berfungsi sebagai informasi alternatif apabila karena satu dan lain hal gambar yang kita tempatkan tidak muncul, sebagai gantinya adalah teks tersebut.
tag <img> tidak menggunakan tag penutup, sebagai gantinya adalah ditutup pada tag awal yaitu dicantumkannya tanda slash ( / ) sebelun tanda >, yang sebelumnya harus diberi spasi.

Memposisikan gambar

Posisi gambar dapat diatur menggunakan atribut style dengan properti: float dan dengan value /nilai: left (untuk posisi sebelah kiri), dan right (untuk posisi sebelah kanan.)

letak gambar sebelah kiri

letak gambar sebelah kanan.

Untuk meletakan gambar dengan posisi ditengah halaman, kita bisa memasukan elemen img pada blok elemen, misalnya pada tag <p>, elemen <div> tag <table> dan lainnya, menggunakan atribut style dengan properti text-align.

Sebagai contoh, misalnya kita menggunakan elemen div seperti ini.

gambar terletak ditengah.

Menentukan ukuran gambar

Untuk menentukan ukuran gambar digunakan atribut width untuk menentukan lebar gambar dan atribut height untuk menentukan tinggi gambar. Sedangkan nilai ukurannya bisa menggunakan satuan pixel (px) atau persen (%).

gambar diperkecil.

gambar diperbesar

Membuat bingkai gambar

Untuk membuat bingkai/border gambar kita perlu menambahkan properti border pada atribut style, dengan nilai dalam satuan "px" kemudian diikuti dengan tulisan solid dan nilai warna (sebagai warna bingkai), yang penulisannya diantarai dengan spasi.

Berikut ini adalah Contoh bagaimana membuat bingkai/border setebal:5px, dengan warna border: lemon.

hasilnya seperti berikut ini :

gambar dengan bingkai.

Gambar sebagai Background.

Cara memasang gambar sebagai background sama saja dengan background warna, kita hanya mengganti propertinya saja dengan "background-image" dengan value : "url(http://..../gambarku.jpg)" pada atribut style yang dapat dipasang pada tag <p>, tag <hx> dan tag <body>.

<p style="background-image:
url(http://.../gambarku.jpg)"> Tulisan pada paragraf ini dilatarbelakangi oleh gambar.
</p>

alamat gambar harus berada dalam tanda kurung.
hasilnya seperti ini :

Tulisan pada paragraf ini dilatarbelakangi oleh gambar.

Demikian juga untuk background gambar pada heading dan body.
back to top

Belajar HTML Hyperlink.

2013-05-11T09:34:00.001+07:00

hyperlink
ke bawah

Hampir di semua halaman web kita akan menemukan link. Ya, tentu saja internet kan bekerja dari link ke link.
Sebuah link adalah yang apabila kita arahkan kursor diatasnya kemudian diklik maka akan mengarahkan kita pada tempat yang lain.
Dengan kata lain sebuah hyperlink atau disingkat dengan link adalah merupakan akses untuk menuju tempat lain pada halaman web.
Sebuah link dapat berupa text atau gambar.
Link didefinisikan menggunakan tag <a> dengan atribut href:

Tag <a> dapat digunakan untuk 2 tujuan :

Untuk membuat link ke dokumen lain menggunakan atribut href.
Untuk membuat bookmark dalam dokumen, menggunakan atribut name:

Contoh berikut adalah pola sederhana cara menulis kode html membuat link :

Link ke homepage situs lain.

Untuk membuat link ke homepage (halaman pertama) suatu situs web, kita kita cukup menuliskan alamat url-nya saja.

Sebagai contoh misalnya kita akan membuat link ke situs yahoo mobile , alamatnya adalah: "http://m.yahoo.com/". Maka untuk membuat link-nya adalah seperti berikut ini:

Link menuju situs

<a href="http://m.yahoo.com"> yahoo mobil </a>

hasilnya :
Link menuju situs yahoo mobil

Link ke bagian tertentu halaman yang sama.

Untuk membuat link menuju bagian atas halaman yang sama, caranya cukup mudah yaitu kita cukup menuliskan alamat "#top" setelah atribut href. Cara menulis html nya seperti berikut ini:

<a href="#top">
Kembali ke atas

</a>

hasilnya :

Kembali ke atas

Sedangkan untuk membuat link ke bagian bawah halaman, maka pada tempat yang akan dituju kita harus menempatkan nama dari tempat yang akan dituju oleh link tersebut. Misalnya kita akan memberi nama pada bagian paling bawah halaman dengan nama "bawah", maka pada bagian paling bawah halaman kita harus mencantumkan:

Dan untuk membuat link nya seperti ini :

<a href="#bawah"> ke bawah </a>

hasilnya : ke bawah .

Link menuju topik tertentu pada situs yang sama.

Seperti halnya pada cara membuat link menuju bagian tertentu pada halaman yang sama di atas, untuk membuat Link menuju topik tertentu pada situs yang sama, kita juga harus menempatkan nama atau id pada judul topik yang akan dituju oleh link tersebut. Misalnya pada topik dengan nama judul: "cara membuat", maka sebelumnya kita harus menuliskan nama topik di sekitar judul topik tersebut (sebelum atau sesudah) seperti ini :

Atau kita juga bisa menambahkan atribut "id" pada tag yang ditempati oleh judul topik tersebut, misalnya judul topik cara membuat berada pada tag h3, maka kita bisa menambahkan atribut id pada tag tersebut seperti ini :

<h3 id="cara membuat"> cara membuat </h3>

Dan untuk membuat linknya ditulis seperti ini :
Kita menuju ke topik :

<a href="#cara membuat"> cara membuat </a>

hasilnya :

Kita menuju ke topik: cara membuat

Cara diatas berlaku apabila tempat yang dituju berada pada folder yang sama dengan dokumen tempat pembuatan link. Tetapi jika folder dokumen yang dituju berbeda folder dengan tempat link dibuat, tetapi masih pada satu situs, maka harus ditulis "nama folder"nya diikuti dengan "nama topik" yang dituju.

<a href="/nama_folder/
#nama topik"> nama topik
</a>

Link menuju ke topik tertentu pada situs lain.

Untuk membuat link menuju topik tertentu pada situs lain, kita harus menulisnya dengan lengkap dan tepat, yaitu "alamat url" dan "nama topik"nya. Dan cara membuat link-nya seperti ini

<a href="http://alamat_url/
nama_topik.htm"> nama topik
</a>

Link menuju situs Aneka Cara dengan topik:
Belajar HTML/CSS

Email link

Email link dimaksudkan untuk akses mengirim pesan email dari alamat email milik pengunjung situs ke alamat email tempat layanan milik situs. Untuk membuat email link digunakan atribut mailto.

Jika ada pertanyaan, silakan kirim email ke bagian pelayanan kami.

Link dengan gambar.

Selain dengan teks biasa, untuk membuat link juga bisa menggunakan gambar, gambar yang digunakan dapat berformat gif, png jpg atau format lainnya.

Klik gambar berikut utuk menuju facebook mobile:

Thumbnail link.

Thumbnail link adalah sebuah link dengan gambar yang diperkecil untuk melihat gambar asli ( ukuran sebenarnya ) yang jauh lebih besar dari gambar yang digunakan pada link. Gambar duplikat yang ukurannya kecil yang digunakan untuk link ini disebut Thumbnail . Ukuran gambar yang sebenarnya itu baru dapat dilihat setelah kita meng-klik linknya.

klik gambar ini untuk melihat gambar ukuran sebenarnya.

Target link.

Secara default sebuah link apabila diklik akan menempati jendela yang sama dengan jendela (halaman) tempat link itu berada, artinya halaman yang dituju oleh link tersebut akan menggantikan halaman tempat link yang di klik tadi berada.

Agar halaman dari sebuah link yang apabila di klik muncul di jendela baru ( halaman baru ) maka dalam pembuatan link harus ditambahkan atribut target="_blank" pada tag <a>.

<a href="alamat_url" target="_blank"> halaman-situs </a>

Lebih jelas tentang target link akan dibahas pada topik rmembuat Frame.

ke atas

Belajar html Format Teks.

2013-05-10T21:26:00.001+07:00

ke bawah

Jika pada topik sebelumnya membahas tentang memberi variasi gaya/style pada huruf. Kali ini kita akan membahas tentang formasi dari teks atau tulisan dalam suatu kalimat, paragraf maupun alinea. Pembahasan ini meliputi perataan teks dalam paragraf, definisi dan lain-lain.

Perataan teks.

Alignment atau perataan teks dimaksudkan untuk mengatur posisi teks yang terdiri dari: rata kiri (left), rata kanan (right) dan rata tengah (center) dalam suatu paragraf atau tulisan.

Sebelumnya, yaitu pada versi html 3.2 ke bawah, untuk mengatur perataan teks digunakan atribut align,
namun atribut tersebut tidak lagi digunakan untuk perataan teks pada versi html 4 ke atas, sebagai gantinya digunakan atribut style dengan properti text-align:left (untuk rata kiri), text-align:right (untuk rata kanan) dan text-align:center (untuk teks berada ditengah). Kitapun bisa mengatur teks menjadi rata bagian kiri dan kanan, yaitu dengan properti text-align:justify pada atribut style.

Di bawah ini adalah bagaimana cara mengatur teks rata kiri, tengah, rata kanan dan rata kiri-kanan.

Mengatur teks rata kiri.

<p style="text align:left;">

Teks ini diatur dengan atribut style menjadi rata kiri.
</p>

Mengatur teks berpusat di tengah:

<p style="text-align:center">

Teks ini diatur dengan atribut style menjadi berpusat ditengah.

</p>

Mengatur teks rata kanan

<p style="text-align:right">

Teks ini diatur dengan atribut style menjadi rata kanan.
</p>

Mengatur teks rata kiri-kanan.

<p style="text-align:justify">

Text ini diatur dengan atribut style menjadi rata kiri dan rata kanan.
</p>

Di bawah ini adalah hasilnya yang tampil di halaman web.

Rata kiri.

Teks ini diatur dengan atribut style menjadi rata kiri.

Rata tengah.

Teks ini diatur menggunakan atribut style menjadi berpusat ditengah.

Rata kanan.

Teks ini diatur dengan atribut style menjadi rata kanan.

Rata kiri-kanan.

Teks diatur dengan atribut style menjadi rata kiri dan rata kanan.

Mengatur perataan teks ini, tidak hanya diterapkan pada elemen paragraf saja, tetapi kita juga bisa menerapkannya pada elemen body, heading, table, image dan lainya.

Berikut ini contoh mengatur heading berada di tengah.

<h2 style="text-align:center"> ini heading </h2>

hasilnya:

ini heading

Daftar Definisi.

Daftar definisi (Definition List) merupakan serangkaian atau kumpulan definisi dari kata atau istilah penting pada sebuah buku dan lainnya. Membuat daftar definisi dimaksudkan untuk memudahkan pembaca mencari pengertian dari kata atau istilah yang baru dikenalnya, juga untuk membuat penampilan menjadi menarik.

Berikut ini satu contoh penampilan definisi.

HTML: Merupakan singkatan dari HyperText Markup Language
Notepad: Adalah sebuah aplikasi untuk menulis dan mengedit teks.

Untuk membuat daftar definisi seperti pada pola teks diatas digunakan 3 (tiga) tag, yaitu tag <dl>, <dt> dan tag <dd>.

tag <dl> berguna untuk menandakan dimulainya pembuatan daftar definisi, dan tag </dl> sebagai akhir pembuatan daftar definisi.
tag <dt> merupakan tempat untuk menyimpan teks/istilah yang akan diterangkan, dan teks ini akan berada pada posisi paragraf normal.
tag <dd> adalah tempat untuk menyimpan uraian definisi atau penjelasan. Karakter dari tag ini membuat teks menjorok ke dalam.
tag <dt> dan tag <dd> tidak menggunakan tag penutup.

Berikut ini cara menulis htmlnya.

<dl>

<dt> HTML

<dd> Merupakan singkataan dari HyperText Markup Language.

<dt> Notepad

<dd> Adalah sebuah aplikasi untuk menulis dan mengedit teks.
</dl>

Blockquote

Untuk membuat tulisan, dimana teks awal pada tiap baris masuk ke dalam, digunakan tag <blockquote>.

Berikut cara menulis htmlnya.

<blockquote>

Karakter dari tag blockquote
adalah membuat teks pada semua baris akan masuk ke dalam.

</blockquote>

Dan inilah hasilnya.

Karakter dari tag blockquote adalah membuat teks pada semua baris akan masuk ke dalam.

Trik4yu Blogs

Belajar css Format Teks

Warna teks.

ini judul

Perataan/alignment.

ini contoh judul

Dekorasi teks.

ini judul

ini sub judul

Indentasi teks.

Belajar css Format Font

Jenis huruf.

Warna huruf.

Ukuran huruf.

Judul ukuran larger

Gaya huruf/style.

Font variant.

Huruf tebal.

ini heading

Belajar css Background styling.

Background color.

Background image.

Background repeat.

Background attachment.

Background position.

Cara praktis membuat akun email google.

Cara membuat gambar transparan dengan Image Fuse

Cara mengubah grid menu s60v3

Gerentes hate

Belajar css Cara Menyisipkan css

Cara eksternal style.

Cara internal style.

Cara inline style.

Belajar css Selector Id dan Class.

Selector id

ini heading

ini heading

Selector class.

ini heading

Contoh penerapan dalam dokumen html

ini heading

Belajar html Blok Elemen.

Elemen Blok

Elemen Inline

Elemen <div>

Elemen <span>

Belajar css Pendahuluan.

Latar belakang.

Contoh CSS

Sintaks css.

Komentar css.

Belajar html Frame.

Cara Membuat file Dokumen html/css Menggunakan X-plore pada S60v3v5.

Belajar html Layout.

judul halaman web

Menu :

di sini isi konten

judul halaman web

Belajar html Cara Membuat Teks/Obyek Bergerak.

bgcolor :

width dan height:

vspace dan hspace :

direction :

behaviour:

loop :

Belajar html Cara Membuat Form.

Cara Menempel Banyak Gambar Dalam Satu Bidang Dengan IDesigner.

Mengganti Background Gambar Denagan IDesigner.

Belajar html Table ( Tabel ).

Belajar html Entitas.

Belajar html Daftar Item ( List Item ).

Belajar html Menyisipkan Script CSS Pada HTML.

Cara eksternal style.

Cara internal style.

Cara inline style.

Belajar html Image.

Tag <img>, Atribut "src:" dan atribut "alt:"

Memposisikan gambar

Menentukan ukuran gambar

Membuat bingkai gambar