Belajar css Format Teks

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.
• Belajar html Hyperlink.
• Belajar html Background Styling.
• Cara Mengubah Grid Menu Pada Symbian S60v3v5.
• Belajar HTML Cara Membuat Teks/Obyek Berjalan.

back to top.

Belajar css Format Font

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 html Background Styling.
• Cara Membuat Gambar Transparan.
• Cara Mengubah Grid Menu Pada Symbian S60v3v5.
• Belajar HTML Cara Membuat Teks/Obyek Berjalan.
• Belajar html Hyperlink.

back to top

Belajar css Background styling.

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.

Baca juga:
¤Belajar css cara menyisipkan script css pada html.

¤Cara praktis membuat akun email google.

¤Cara membuat gambar transparan dengan IDesigner.

¤Belajar html bagi peemula.

¤Cara membuat dokumen html/css dengan X-plore.

back to top

Cara praktis membuat akun email google.

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

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

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.

Gerentes hate

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

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.

Belajar css Selector Id dan Class.

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

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.

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.

<div style="text-align:center">
<img src="http://alamat/nama.jpg" alt="gambar" style="width:200px; height:100px;" />
</div>

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.

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.

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 1.

file judul.htm

frame 2.

file menu.htm

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.

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.

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.

judul halaman web

Menu :

html
css
javascript

di sini isi konten

Hak Cipta © DoMain.com

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.

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.

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 :


Jakarta

Bandung
Semarang
Surabaya


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 :

Tulis tentang diri anda. <br />

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.

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.

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 ).

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.