flash 2

31 Maret 2012

contoh soal rekonsiliasi

Contoh Soal Rekonsiliasi Bank

di buat oleh: Mr. Galau

Contoh Soal

PT.MIDI mengadakan rekonsiliasi bank pada bulan Juni dengan saldo awal :
a.  Saldo awal  :
–        Buku bank : $  3.359,78
–        Buku deposan : $  2.549,99
b.  Setoran sebesar $  816,2 tidak muncul dilaporan bank.
c.  Bank menerima $ 400 untuk pembayaran wesel dengan bunga sebesar
$ 8, untuk PT.MIDI.
d. 3 cek yang terikat selama periode tersebut belum muncul dilaporan
bank :
No . 812 : $  1.061
No . 878 : $     435,39
No . 883 : $       48,6
e. Bank mengirim cek kosong dari salah satu pelanggan perusahaan
sebesar $ 300, cek tersebut adalah pelunasan piutang .
f. Total biaya administrasi bank adalah $ 18.
g. Cek No. 879 : $ 732,26 untuk pelunasan utang “Tailor Company” di
jurnal sebesar $ 723,26
Jawaban
Buku Deposan
a. Saldo Awal $ 2.549,99



c. Pembayaran wesel $ 408,00 +







$ 2.957,99








e. Pelunasan Utang $ 300,00



f. Biaya Administrasi $ 18,00



g. Pelunasan utang $ 9,00 +







$ 327,00 -





$ 2.630,99
Buku Bank
a. Saldo Awal $ 3.359,78




b. Penambahan catatan $ 816,20 +








$ 4175,98










d. Cek No. 812 $ 1061,00





Cek No.878 $ 435,39





Cek No.882 $ 48,60 +








$ 1544,99 -





$ 2.630,99












Catatan :
Hal-hal yang sudah di catat perusahaan, tetapi belum dicatat oleh bank, semisal untuk bagian :
b. merupakan Setoran dalam perjalanan (outstanding deposit). Perusahaan telah mencatat setorannya namun bank belum mencatatnya.
d. merupakan Cek dalam Peredaran. Cek ini sudah dikeluarkan oleh perusahaan dan dicatat dalam buku perusahaan namun belum dibayarkan oleh bank

rekonsiliasi bank

Rekonsiliasi Bank


Perbedaan saldo kas versi laporan bank dan saldo kas versi perusahaan merupakan alasan utama diperlukannya penyesuaian atau mencari kecocokan antara keduanya, yang lazim dinamakan dengan rekonsiliasi bank. Dengan memperhatikan jumlah saldo kas dalam laporan bank dan catatan kas yang dilakukan perusahaan maka dapat ditelusuri sebab musabab perbedaan yang tertuang dalam laporan rekonsiliasi bank.

BENTUK PENYAJIAN :

Report Form :
Rekonsiliasi bank disajikan dari atas kebawah atau versi vertikal.

Account Form :
Rekonsiliasi bank disajikan dari kiri ke kanan atau versi horizontal.



PETA REKONSILIASI BANK :

Saldo kas menurut laporan bank pada akhir bulan=xxx

Tambah :

Setoran dalam perjalanan==============xxx
(ada setoran kas yang dilakukan perusahaan tetapi bank
belum mencatat dalam laporan bank)

Kesalahan bank terjadi bila bank membayar cek lebih
besar dari yang seharusnya=============xxx+
Jumlah penambahan======================xxx +Jumlah================================xxx

Kurang :
Cek yang beredar====================xxx

Cek yang kita buat yang berada ditangan penjual
Kesalahan bank terjadi bila bank membayar cek lebih
kecil dari yang seharusnya==============xxx+
Jumlah pengurangan======================xxx-

Saldo kas yang sudah disesuaikan=================xxxx


Saldo kas menurut catatan perusahaan pada akhir bulan.........................xxx
Tambah :
Setoran dari hasil penagihan piutang dagang atau wesel..........................................................................xxx
Bank sukses menagih piutang dagang atau piutang wesel
kita dan oleh bank langsung ditambahkan rekening kita,
tentu bank meminta imbalan.
Kesalahan perusahaan terjadi bila perusahaan catat cek
lebih besar sari yang seharusnya.................................................................xxx

Jumlah saldo kas ditambah dengan penambahan.....................................................................................xxxx

Kurang :
Cek kosong...................................................................xxx
Cek yang dananya tidak cukup, sudah terlanjur ditambahkan
sebagai kas, namun dikembalikan.
Biaya administrasi bank............................................................................xxx
Kesalahan perusahaan terjadi bila perusahaan catat cek
lebih kecil dari yang seharusnya.................................................................xxx

Jumlah pengurangan...................................................................................xxx
Saldo kas setelah disesuaikan............................................................xxxx

JURNAL :
Tergantung transaksi yang terjadi, antara lain :
D: Kas................................xxx
C: Piutang dagang.....................xxx
C: Penghasilan bunga.................xxx
C: Utang dagang........................xxx

D: Biaya administrasi bank...xxx
D: Piutang dagang..............xxx
D: Utang dagang.................xxx
C: Kas.......................................xxx

KATA-KATA PENTING :
Penting juga diketahui bila rekonsiliasi bank ini dalam bahasa inggris :
Kas = Cash
Piutang dagang = Account Receivable (A/R)
Piutang wesel = Note Receivable ( N/R)
Utang dagang = Account Payable ( A/P )
Utang wesel = Note Payable ( N/P)
Biaya administrasi bank = Bank Service Charge
Penghasilan Bunga = Interest Revenue
Kesalahan Bank = Bank Error
Kesalahan Perusahaan = Depositor Error
Cek yang beredar = Outstanding Check
Setoran dalam perjalanan = Deposit in Transit
Cek Kosong = Not Sufficient Fund
Sado kas yang disesuaikan = Adjusted Cash Balance

Ilustrasi 1 :
Saldo menurut catatan Cincai,Co per 31 Desember 20A sebesar Rp. 31.500.000,- . Jumlah tersebut tidak sama dengan saldo menurut laporan bank. Adapun penyebabnya adalah :
• Adanya cek yang beredar Rp. 1.000.000,-
• Adanya setoran dalam perjalanan Rp. 1.500.000,-
• Biaya bank dan jasa giro belum tampak dalam catatan Cincai, Co jumlahnya masing-masing adalah biaya bank Rp. 150.000,- dan jasa giro bank Rp. 200.000,-
• Cek kepada langganan keliru dicatat oleh Cincai, Co. Jumlah yang benar Rp.1.800.000,- Jumlah yang salah Rp. 1.200.000,-
• Setoran Sancai, Co sebesar Rp. 800.000,- oleh bank keliru dicatat sebagai setoran Cincai, Co.
Instruksi:
1. Hitunglah saldo menurut laporan bank per 31 Desember 20A
2. Buatlah Rekonsiliasi Bank untuk menghitung Saldo yang benar pada tanggal 31 Desember 20A.
3. Buat Jurnal Koreksi

Solusi:
a. Menghitung Saldo Laporan Bank

Saldo menurut Cincai,Co per Desember 20A Rp.31.500.000
ditambah:
Cek beredar........................Rp.1.000.000
Jasa giro bank.......................Rp. 200.000
Setoran.............................Rp. 800.000 Rp. 2.000.000
Jumlah..................................................Rp.33.500.000

dikurangi:
Setoran dalam perjalanan.......Rp.1.500.000
Biaya bank..........................Rp. 150.000
Cek kepada langganan.............Rp. 600.000Rp. 2.250.000
Saldo menurut laporan bank per 31 Desember 20A Rp. 31.250.000

b. Menyusun rekonsiliasi bank


Saldo sebelum rekonsiliasi..Rp.31.500.000 Rp.31.250.000
ditambah:
Setoran dalam perjalanan ....................Rp. 1.500.000
Jasa giro bank ...............Rp. 200.000
Jumlah...........................Rp.31.700.000 Rp.32.750.000

dikurangi:
Cek beredar.......................................Rp. 1.000.000
Biaya bank ......................Rp. 150.000
Cek dicatat terlalu kecil......Rp. 600.000
Setoran .............................................Rp. 800.000
Saldo yang benar...............Rp.30.950.000.Rp.30.950.000

c. Jurnal Koreksi

D: Utang usaha Rp. 600.000
D: Biaya bank Rp. 150.000
K: Pendapatan Jasa Giro Rp. 200.000
K: Kas Rp. 450.000

cara menginstal MySQL

Sebelum menginstal MySQL pastikan bahwa Apache Server dan PHP sudah terinstal dan berjalan dengan baik.
Klik link berikut ini untuk mendownload MySQL http://dev.mysql.com/downloads/mysql/
Ketika mendownload pilih yang Windows MSI Installer versi GA (Generally Available) Release.
Setelah download selesai double klik file tersebut untuk memulai penginstalasian.
Install MySQL-01
Klik Next untuk melanjutkan penginstalasian.
Install MySQL-02
Silahkan dibaca dan disimak surat perjanjian bila anda setuju dengan isi surat perjajian tersebut tanda "I accept the terms in the License Agrement" kemudian klik Next.
Install MySQL-03
Pilih "Custom" untuk tipe penginstalasian.
Install MySQL-04
Klik "Browse" untuk mengubah folder tujuan penginstalasian.
Install MySQL-05
"Look in" tujukan ke C:\Apache, kemudian buat sebuah folder dengan nama "mysql" atau bisa juga langsung mengetikkan "C:\Apache\mysql\" didalam "Folder name" kemudian klik OK.
Install MySQL-06
Setelah kita membuat foldernya maka akan terlihat seperti gambar diatas. Masih ada kesempatan untuh mengubah seandainya masih ada yang kurang tepat, tapi jika semua sudah beres dan anda sudah yakin klik Next.
Install MySQL-07
Klik Install untuk mulai menginstal MySQL. Tunggu hingga proses penginstalasian selesai.
Berikutnya akan muncul 2 jendela tentang MySQL Enterprise klik More untuk mengetahui lebih lanjut atau klik Next untuk melanjutkan penginstalasian.
Install MySQL-08
Tandai Launch the MySQL Instance Configuration Wizard kemudian klik Finish.
Install MySQL-09
Klik Next,
Install MySQL-10
Pilih Detailed Configuration, kemudian Next.
Install MySQL-11.png
Pilih Develover Machine, kemudian Next.
Install MySQL-12
Tandai Multifunctional Database, kemudian Next.
Install MySQL-13
Biarkan saja tanpa perubahan, klik Next.
Install MySQL-14
Pilih Decision Support DSS/OLAP untuk membatasi koneksi, klik Next
Install MySQL-15
Tandai Enable TCP/IP Networking dan Enable Strict Mode, kemudian Next.
Install MySQL-16
Pilih Best Support For Multilingualism, klik Next.
Install MySQL-17
Tandai Install As Windows Service. Untuk Servise Name sesuaikan dengan Versi MySQL anda. Tandai Include Bin Directory In Windows PATH agar kita bisa langsung mengakses MySQL dari Command prompt. Klik Next untuk melanjutkan.
Install MySQL-18
Pilih Modify Security Settings, kemudian isikan password. Password ini adalah yang akan kita gunakan nantinya setiap kali mengakses MySQL, jadi jika anda pelupa sebaiknya tulis pasword tersebut di Notepad dan simpan dengan nama "MySQL password" selanjutnya tandai "Enable root access from remote machine", klik Next.
Install MySQL-19.png
Klik Execute untuk memproses segala pengaturan yang telah kita buat.
Install MySQL-20
Setelah semua berjalan dengan baik maka akan tampil seperti gambar diatas, klik Finish untuk keluar dari penginstalasian.
Untuk mengetahui bahwa MySQL ini sudah bekerja dengan baik buka Command prompt. Klik Start > Run – ketik "cmd" kemudian "Enter" ketik:
mysql -u root -p
Kemudian "Enter" dan masukkan password yang kita masukkan ketika menginstal MySQL dan "Enter". Maka selanjutnya akan tampil seperti berikut ini, berarti MySQL sudah berjalan dengan baik. Sorry nama saya sengaja di coret karena tidak ingin terkenal.
Test MySQL dari CMD
Ketik "\q" untuk keluar dari MySQL dan kemudian "exit" untuk keluar dari Command prompt.
Selanjutnya agar MySQL terhubung dengan Server dan PHP maka kita harus mengedit kembali file konfigurasi.
Buka file pengaturan PHP "C:\Apache\php\php.ini" di bawah Dynamic Extensions cari kedua extension di bawah ini:
;extension=php_mysql.dll
;extension=php_mysqli.dll
Aktifkan kedua extension tersebut dengan cara menghapus titik koma ";" yang berada di depannya:
extension=php_mysql.dll
extension=php_mysqli.dll
Simpan file tersebut kemudian Restart Server.
Buka Notepad kemudian salin kode berikut, setelah mengisikan MySQL password anda, simpan file tersebut ke "D:\My Websites" dengan nama "index.php"
<?php
$dbServer='localhost';
$dbUser='root';
$dbPass='xxxxx'; //Ganti xxxxx dengan password MySQL anda.
$dbName='test';
$link = mysql_connect("$dbServer", "$dbUser", "$dbPass") or die("Koneksi ke server gagal");
print "<h1>Koneksi ke MySQL berhasil!!!</h1>";
mysql_select_db("$dbName") or die("Database tidak ditemukan");
print "<h2>Koneksi ke Database berhasil!!!</h2>";
mysql_close($link);
?>
Kemudian buka browser, di address bar ketikkan "http://localhost/" kemudian "Enter."
Jika bekerja dengan baik maka akan tampil seperti berikut:
MySQL Script Test.png

membuat back ground transparan

Membuat background yang transparan dalam HTML dapat kita lakukan dengan menggunakan CSS maupun gambar.
Membuat background transparan dengan CSS.
Untuk membuat background transparan dengan CSS dapat menggunakan style CSS dengan properti opacity dan background dengan nilai rgba. Kedua properti tersebut merupakan properti dari CSS3.
Kekurangan dari kedua properti diatas adalah tidak mendukung Internet Explorer 8. Untuk properti opacity W3school memberikan solusinya dengan menggunakan filter:alpha.
filter:alpha(opacity=nilai dalam %);
Untuk properti background dengan nilai rgba belum bisa jalan di IE. Dan perlu diperhatikan juga, bila menggunakan filter diatas maka dokumen CSS kita tidak akan memenuhi standar CSS3 alias tidak valid.
Ikuti link berikut ini untuk melihat contoh-contoh dan untuk mengetahui lebih lanjut tentang membuat background transparan dengan CSS.
Membuat background transparan dengan gambar.
Untuk gambar yang transparan dengan pengaturan opacity dapat di buat di program grafik seperti Photoshop atau Firework dalam format PNG.
Menggunakan gambar yang transparan ini lebih baik karena mendukung CSS2.1 dan dapat dijalankan di berbagai browser modern saat ini termasuk juga di IE7.
Problemnya adalah untuk IE6 dan versi dibawahnya belum mendukung penggunaan gambar PNG yang transparan ini.
Jika anda perduli dengan IE6 bisa mencari solusinya dengan menggunakan javascript atau jquery yang tidak akan di bahas dalam modul ini.
Klik link berikut untuk melihat langsung contoh dari membuat background transparan dengan gambar.
Bonus bagi pengguna Firework,
Berikut adalah cara membuat gambar transparan untuk background dengan Firework CS3, untuk Photoshop silahkan cari sendiri tutornya. ;)
Membuat gambar transparan dengan Firework CS3.
Pertama buat Dokumen baru dengan ukuran 100pxX100px, pada Canvas color pilih transparent.
Background Transparan PNG 01
Selanjutnya dari Vector pilih "Rectangle Tool" dan gambar sebuah kotak pada Canvas.
ackground Transparan PNG 02
Pada Properties set width dan height = 100 kemudian X,Y = 0. Untuk warna terserah mau warna apa.
ackground Transparan PNG 03
Klik gambar untuk mengaktifkan maka pada jendela Properties sebelah kanan akan muncul pengaturan opacity tepat diatas Filters, atur posisinya sekitar 50.
ackground Transparan PNG 04
Dari menu "File" pilih "Save As", kemudian untuk File name masukkan nama filenya pada "Save as type" pilih "Flattenet PNG". Sebelum di simpan tekan tombol Option maka akan muncul jendela seperti berikut.
ackground Transparan PNG 05
Untuk "type of transparency" pilih "Alpha Transparency", tekan "Ok" baru disimpan (Save).
Sekarang gambar tesebut sudah dapat digunakan sebagai contoh untuk membuat background transparan dengan gambar.
Selamat mencoba.

background html

Kalau sebelumnya kita menggunakan atribut background dan bgcolor dalam pelajaran HTML tentang Background HTML, sekarang kita akan belajar membuat latar belakang atau background tersebut dengan menggunakan atribut style.
Untuk membuat background dengan warna di gunakan properti background-color.
Membuat background di halaman website dengan warna:
<body style="background-color:yellow">...</body>
Contoh di dalam dokumen HTML:
<html>
<head></head>
<body style="background-color:yellow">
<h1>Contoh membuat background warna dengan atribut style background-color.</h1>
</body></html>
Hasil: lihat Preview
Contoh background di dalam tag HTML:
<p style="background-color:aqua">Paragraf dengan background aqua</p>
Hasil:
Paragraf dengan background aqua
Untuk nilai dari properti background-color tersebut kita bisa menggunakan kode RGB, Hexadecimal maupun Nama Warna.
<p style="background-color:rgb(127,255,212)">Warna background menggunakan kode RGB</p>
<p style="background-color:#7fffd4">Warna background menggunakan kode Hexadecimal</p>
<p style="background-color:aquamarine">Warna background menggunakan Nama Warna</p>
Hasil dari ketiga kode HTML diatas akan sama:
Warna background menggunakan kode RGB
Warna background menggunakan kode Hexadecimal
Warna background menggunakan Nama Warna
Klik link berikut untuk melihat kode hexadecimal dan nama warna, untuk RGB dapat menggunakan tool kode warna RGB.
Untuk membuat background dengan gambar di gunakan properti background-image.
Membuat background dengan gambar di dokumen HTML:
<body style="background-image:url(lokasi dan nama gambar)">...</body>
background
Sebagai contoh kita akan menggunakan gambar di samping (background.jpg) untuk membuat background di dokumen HTML, ukuran gambar tersebut adalah 100px X 100px :
<html>
<head></head>
<body style="background-image:url(background.jpg)">
<h1>Contoh membuat background gambar dengan atribut style background-image.</h1>
</body></html>
Hasil: lihat Preview
Maka secara otomatis browser akan mengisi penuh halaman website dengan gambar tersebut secara berulang (repeat) baik secara vertikal maupun horizontal.
Dengan adanya pengulangan ini maka dengan gambar ukuran 1 x 2px, hanya 2 titik (pixel) yaitu putih dan abu-abu kita dapat membuat background seperti berikut.
Hasil: Lihat Preview
Untuk pengaturan pengulangan tersebut dapat menggunakan properti background-repeat dengan nilai atau value: no-repeat, repeat, repeat-x dan repeat-y.
Contoh jika kita ingin membuat pengulangan secara horizontal maka kita dapat menambah kode repeat-x ke dalam contoh diatas:
<body style="background-image:url(background.jpg);background-repeat:repeat-x;">...<body>
Hasil: lihat Preview
Sedangkan untuk pengulangan secara vertikal kita tambahkan kode repeat-y:
<body style="background-image:url(background.jpg);background-repeat:repeat-y;">...<body>
Hasil: lihat Preview
Anda bisa melakukan latihan selanjutnya dengan mengganti gambar dan nilainya.
Untuk memposisikan background digunakan properti background-position dengan value top=atas, right=kanan, bottom=bawah left=kiri dan center=tengah atau dengan nilai x dan y.
Sebagai contoh kita akan menggunakan gambar berikut yang berukuran 800px X 1px dengan nama bg-example.png.
bg-example
Kita akan membuat agar gambar tersebut berada tepat ditengah dokumen dengan pengulangan (repeated) secara vertikal.
<body style="background-color:#000;background-image:url(bg-example.png);background-repeat:repeat-y;background-position:center;">
Hasil: lihat Preview

» Tutorial selanjutnya:
« Tutorial sebelumnya:
Post

html. format font

Tag <font> termasuk salah satu (Deprecated tags) dimana saat ini sudah jarang digunakan karena sudah ada alternatif pengganti yang lebih baik untuk tag tersebut. Untuk Tag <font> sebagai gantinya digunakan atribut style atau CSS. Untuk penjelasan singkat tentang CSS ini bisa di baca di Belajar CSS.
Pada tulisan sebelumnya tentang Belajar HTML dengan topik Format Font HTML telah dibuat beberapa contoh format font dengan menggunakan tag <font>. Di tutorial HTML ini kita akan melupakan tag tersebut dan beralih menggunakan atribut style.
Untuk mengganti jenis font digunakan properti font-family:
<p style="font-family:Georgia">Tulisan dengan font-family Georgia</p>
Hasil:
Tulisan dengan font-family Georgia
Untuk melakukan eksperimen lebih lanjut anda bisa mengganti jenis font-nya dengan font-font yang bisa dilihat di Jenis-jenis Font Family untuk CSS
Untuk membuat tulisan miring digunakan properti font-style:
<p style="font-style:italic">Membuat tulisan miring</p>
Hasil:
Membuat tulisan miring
Untuk membuat tulisan tebal digunakan properti font-weight:
<p style="font-weight:bold">Membuat tulisan tebal</p>
Hasil:
Membuat tulisan tebal
Untuk mengatur ukuran font digunakan properti font-size:
<p style="font-size:16px">Tulisan dengan ukuran font 16px</p>
Hasil:
Tulisan dengan ukuran font 16px
Untuk pengaturan ukuran font-size dapat menggunakan satuan px, em, % atau pt. Kode HTML berikut akan menghasilkan ukuran font yang sama.
<p style="font-size:16px">Tulisan dengan ukuran 16px</p>
<p style="font-size:100%">Tulisan dengan ukuran 100%</p>
<p style="font-size:1em">Tulisan dengan ukuran 1em</p>
<p style="font-size:12pt">Tulisan dengan ukuran 12pt</p>
Hasil:
Tulisan dengan ukuran 16px
Tulisan dengan ukuran 100%
Tulisan dengan ukuran 1em
Tulisan dengan ukuran 12pt
Untuk membuat warna font digunakan properti color:
<p style="color:blue">Tulisan ini akan berwarna biru</p>
Hasil:
Tulisan ini akan berwarna biru
Untuk kode warna bisa menggunakan nilai RGB, Hexadecimal atau Nama Warna. Kode HTML berikut akan menghasilkan warna tulisan yang sama.
<p style="color:rgb(0,128,0)">Membuat warna tulisan dengan Nilai RGB</p>
<p style="color:#008000">Membuat warna tulisan dengan Kode Hexadecimal</p>
<p style="color:green">Membuat warna tulisan dengan Nama Warna</p>
Hasil:
Membuat warna tulisan dengan Nilai RGB
Membuat warna tulisan dengan Kode Hexadecimal
Membuat warna tulisan dengan Nama Warna
Ikuti link berikut untuk melihat Kode Hexadecimal dan Nama Warna atau gunakan tool kode warna untuk melihat nilai RGB.
Atribut style dapat memiliki beberapa properti dengan dibatasi oleh tanda titik koma.
<p style="font-family:Georgia;font-size:16px;font-weight:bold;">Contoh tulisan dengan font-family, font-size dan font-weight</p>
Hasil:
Contoh tulisan dengan font-family, font-size dan font-weight.
Kemudian style tersebut diatas dapat di persingkat dengan menggunakan properti font.
<p style="font:bold 16px Georgia">Contoh tulisan dengan properti font.</p>
Hasil:
Contoh tulisan dengan properti font.

» Tutorial selanjutnya:
« Tutorial sebelumnya:

tag marquee dengan gambar

marquee1 marquee2 marquee3 marquee1marquee2marquee3

30 Maret 2012

LTHN TAG MARQUEE DENGAN PUISI CINTA

bgcolor="yellow"

<<< PUISI - PUISI CINTA PUISI - PUISI CINTA>>>
di buat oleh: eko nova budi saputro sekolah di STMIK INSAN PEMBANGUNAN jurusan KOMPUTERISASI AKUNTANSI SEMESTER II

APA CINTA ITU??? Makna Cinta. Suatu ungkapan yang begitu misterius. Apakah cinta punya makna? Bagaimana menurut kalian? Oh, cinta kau kurindu kau kukejar kau kudamba Suatu saat kau hilang kau pergi lenyap ke dalam sepi Oh, cinta apakah yang kurasa ketika engkah t'lah tiada...? Sungguh, cinta itu misterius. Dan dengan sentuhan cinta, setiap orang menjadi penyair... Share on Facebook.

HTML ekonovabudisaputro.blogspot.com
JANGANLAH TAKUT AKAN JATUH CINTA KARENA SEMUA ORANG PASTI PERNAH MERASAKAN SAKIT HATI.

HTML mr. galau.com

tag marquee

Contoh-contoh penggunaan tag marquee

Standar tag marquee tanpa atribut
<marquee>Standar tag marquee tanpa atribut</marquee>
Standar tag marquee tanpa Atribut
Marquee dengan atribut direction
<marquee direction="up">marquee direction="up"</marquee>
<marquee direction="right">marquee direction="right"</marquee>
<marquee direction="down">marquee direction="down"</marquee>
<marquee direction="left">marquee direction="left"</marquee>
direction="up"
direction="right"
marquee direction="down"
marquee direction="left"
Marquee dengan atribut behavior
<marquee behavior="alternate">marquee behavior="alternate"</marquee>
<marquee behavior="scroll">marquee behavior="scroll"</marquee>
<marquee behavior="slide">marquee behavior="slide"</marquee>
marquee behavior="alternate"
marquee behavior="scroll"
marquee behavior="slide"
Marquee dengan atribut scrolldelay
<marquee scrolldelay="100">marquee scrolldelay="100"</marquee>
<marquee scrolldelay="200">marquee scrolldelay="200"</marquee>
<marquee scrolldelay="300">marquee scrolldelay="300"</marquee>
marquee scrolldelay="100"
marquee scrolldelay="200"
marquee scrolldelay="300"
Marquee dengan atribut scrollamount
<marquee scrollamount="10">marquee scrollamount="10"</marquee>
<marquee scrollamount="20">marquee scrollamount="20"</marquee>
<marquee scrollamount="30">marquee scrollamount="30"</marquee>
marquee scrollamount="10"
marquee scrollamount="20"
marquee scrollamount="30"
Marquee dengan atribut width
<marquee width="75%">marquee width="75%"</marquee>
<marquee width="160">marquee width="160"</marquee>
marquee width="75%"
marquee width="160"
Marquee dengan atribut height
<marquee height="75%">marquee height="75%"</marquee>
<marquee height="30">marquee height="30"</marquee>
marquee height="75%"
marquee height="30"
Marquee dengan atribut bgcolor
<marquee bgcolor="red">marquee bgcolor="red"</marquee>
<marquee bgcolor="#ddd">marquee bgcolor="#ddd"</marquee>
marquee bgcolor="red"
marquee bgcolor="#ddd"
Marquee dengan atribut style
<p><marquee style="padding:4px;font-size:18px;color:#0C9;background:#000;">HTML CSS Guides.com<br />
<span style="font-size:12px;color:#ff3;">Web design, Belajar HTML, CSS, Javascript, tips, triks dan tutorial bagi pemula.</span></marquee></p>
HTML CSS Guides.com
Web design, Belajar HTML, CSS, Javascript, tips, triks dan tutorial bagi pemula.

Marquee dengan beberapa atribut
<p style="background: #366;text-align:center;padding:4px;font-size:20px;color:#0fc;">
<marquee direction="left" scrollamount="5" width="200"><<< MACAM-MACAM</marquee>
<marquee direction="right" scrollamount="5" width="200">MACAM-MACAM >>></marquee><br />
<marquee behavior="alternate" width="400" style="font-size:14px;color: #fff;" >Contoh Marquee</marquee></p>
<<< MACAM-MACAM MACAM-MACAM >>>
Contoh Marquee
Marquee dengan link dan mouseover atribut
<marquee onmouseover="this.stop();" onmouseout="this.start();">Jika ada komentar anda tentang marquee ini silahkan sampaikan melaui <a href="/membuat-teks-berjalan-dengan-tag-marquee#comment" title="Tinggalkan pesan">comment</a></a></marquee>
Ketika kita menggeser mouse ke area teks dibawah maka teksnya akan berhenti.
Jika ada komentar anda tentang marquee ini silahkan sampaikan melaui comment
Marquee dengan gambar
Untuk gambar kita cupup memasukkan lokasi gambarnya dan lakukan pengaturan dengan atribut-atribut marquee tersebut.
<marquee><img src="../images/marquee1.jpg" /> <img src="../images/marquee2.jpg" /> <img src="../images/marquee3.jpg" /></marquee>
marquee1 marquee2 marquee3
<marquee scrollamount="2" width="100" style="background:url(../images/marqueebg.jpg);"><img src="../images/marquee1.jpg" /><img src="../images/marquee2.jpg" /><img src="../images/marquee3.jpg" /></marquee>
marquee1marquee2marquee3
Jika ada pertanyaan atau komentar silahkan sampaikan melalui Comment.
Kembali ke Membuat teks berjalan dengan tag Marquee.

TABEL HTML

Sekilas tentang tabel.
Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.
Cara membuat tabel.
Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.
Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.
<table border="1">
 <tr>
  <td>Cell 1 - Baris 1 Kolom 1</td>
  <td>Cell 2 - Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Cell 3 - Baris 2 Kolom 1</td>
  <td>Cell 4 - Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Cell 5 - Baris 3 Kolom 1</td>
  <td>Cell 6 - Baris 3 Kolom 2</td>
 </tr>
</table>
Hasil:
Cell 1 – Baris 1 Kolom 1 Cell 2 – Baris 1 Kolom 2
Cell 3 – Baris 2 Kolom 1 Cell 4 – Baris 2 Kolom 2
Cell 5 – Baris 3 Kolom 1 Cell 6 – Baris 3 Kolom 2
Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>.
Mengatur lebar dan tinggi tabel.
Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height.
Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.
<table border="1" width="75%">
 <tr>
  <td style="width:50%;height:40px;">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 1</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
 </tr>
</table>
Hasil:
Baris 1 Kolom 1 Baris 1 Kolom 1
Baris 2 Kolom 1 Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2
Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.
Menggabungkan kolom pada tabel
Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.
Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.
<table border="1" width="75%">
 <tr>
  <td colspan="2">Gabungan Kolom 1&amp;2 pada Baris 1</td>
 </tr>
 <tr>
  <td style="width:50%">Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
 </tr>
</table>
Hasil:
Gabungan Kolom 1&2 pada Baris 1
Baris 2 Kolom 1 Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2
Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.
<table border="1" width="75%">
 <tr>
  <td style="width:50%" rowspan="2">Gabungan Baris 1&amp;2 pada Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
 </tr>
</table>
Hasil:
Gabungan Baris 1&2 pada Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2
Mengatur jarak kolom pada tabel
Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.
Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.
<table border="1" width="75%" cellpadding="8">
 <tr>
  <td style="width:50%;">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>
Hasil:
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.
<table border="1" width="75%" cellspacing="8">
 <tr>
  <td style="width:50%">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>
Hasil:
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Membuat titel pada tabel.
Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom.
Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.
<table border="1" width="75%">
<caption>Disini adalah titel tabel ini</caption>
 <tr>
  <th style="width:50%;">Header Kolom 1</th>
  <th>Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>
Hasil:
Disini adalah titel tabel ini
Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Membuat background pada tabel
Untuk membuat background pada tabel kita gunakan atribut style dengan properti background.
Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.
<table style="background:#ffc" width="75%" border="1">
 <tr>
  <th style="background:red;width:50%;">Header Kolom 1</th>
  <th style="background:red;">Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>
Hasil:
Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Seperti kita lihat bahwa border dari cell tersebut terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah 1px.
Ini terjadi karena secara default atribut cellpadding dan cellspacing pada elemen table memiliki nilai masing-masing 1px.
Jadi untuk menghilangkannya kita harus memasukkan kedua atribut tersebut dengan nilai 0.
<table cellpadding="0" cellspacing="0" style="background:#ffc" width="75%" border="1">
...
</table>
Atau kita juga bisa menggunakan style CSS yaitu dengan properti border-collapse:collapse.
<table style="border-collapse:collapse;background:#ffc" width="75%" border="1">
 <tr>
  <th style="background:red;width:50%;">Header Kolom 1</th>
  <th style="background:red;">Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>
Hasil:
Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Pada link berikut ini kita akan membuat contoh tabel dengan CSS baik itu dengan atribut style (inline) maupun internal dan eksternal CSS.

« Tutorial sebelumnya:

GAMBAR (IMAGE) HTML

Dengan gambar atau image akan membuat website lebih menarik dan enak di pandang, tapi perlu diperhatikan bahwa semakin banyak gambar di website kita maka semakin lama juga waktu yang dibutuhkan untuk mengakses website kita.
Format Gambar
Untuk format gambar ada 3 macam yang sering digunakan yaitu: GIF, JPG dan PNG. GIF dan PNG bisa digunakan untuk membuat gambar yang transparan serta biasa juga digunakan untuk gambar yang warnanya minim seperti untuk logo, banner, icon, dsb, Gif bisa membuat gambar animasi juga. Untuk menampilkan gambar yang berkualitas bagus dengan warna yang memadai digunakan format JPG.
Memasukkan gambar ke HTML
Untuk memasukkan gambar ke dalam dokumen HTML digunakan elemen img di ikuti dengan src (source) sebagai sumber atau lokasi dari gambar.
<img src="lokasi gambar" />
Ketika memasukkan gambar ke dalam dokumen HTML ada tiga atribut yang sangat penting harus selalu disertakan dengan elemen img yaitu alt, width dan height.
Alt (alternate) adalah sebagai teks alternatif yang ditampilkan oleh browser ketika gambar tidak dapat ditampilkan atau ditemukan sedangkan width dan height adalah ukuran lebar dan tinggi gambar dalam satuan pixel(px).
<img src="lokasi gambar" alt="teks alternatif" width="lebar" height="tinggi" />
Contoh:
<img src="http://htmlcssguides.com/images/gambar-avril.jpg" alt="Gambar Avril" width="100" height="100" />
Hasil:
Gambar Avril
Memposisikan Gambar
Untuk memposisikan gambar ke kiri dan ke kanan digunakan atribut style dengan properti float di ikuti dengan nilai (value) left (kiri) atau right (kanan).
Contoh membuat gambar disebelah kanan
<img src="http://htmlcssguides.com/images/gambar-avril.jpg" style="float:right;" alt="Gambar Avril" width="100" height="100" />
Hasil:
Gambar Avril
Membuat gambar di tengah dokumen
Untuk membuat gambar berada ditengah dokumen HTML kita harus memasukkan gambar tersebut di dalam blok elemen seperti p, div, table dsb. Kemudian kita masukkan atribut style dengan properti text-align kedalam elemen blok tersebut, dalam contoh kita akan menggunakan elemen div.
<div style="text-align:center;"><img src="http://htmlcssguides.com/images/gambar-avril.jpg" alt="Gambar Avril" width="100" height="100" /></div>
Hasil:
Gambar Avril
Membuat border gambar
Untuk membuat border pada gambar anda dapat menambahkan atribut style dengan properti border dengan nilai dalam px atau jika ingin menghilangkan border anda cukup menuliskan style="border:none"
Berikut adalah contoh gambar dengan border 4px warna hitam.
<img src="http://htmlcssguides.com/images/gambar-avril.jpg" style="border:4px solid #000" alt="Gambar Avril" width="100" height="100" />
Hasil:
Gambar Avril

» Tutorial selanjutnya:
« Tutorial sebelumnya:
Po