Kode Warna Html/Javascript - Font Color
Kode Warna
Showing posts with label Kode Dasar HTML. Show all posts
Showing posts with label Kode Dasar HTML. Show all posts
Friday, December 23, 2011
Wednesday, December 21, 2011
Dasar Pengertian CSS (Cascading Style Sheet)
Apa itu CSS(Cascading Style Sheet)? Sebenarnya ini Judul artikel makalah yang jadi tugas kuliah saya akhir-akhir ini.tapi tidak ada salahnya saya share untuk saling berbagi pengetahuan(mungkin agak jadul sihh karena masih dasar).
Ok lanjut saja tentang CSS.
Pengertian CSS adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.
Keuntungan menggunakan CSS :
• Memisahkan presentastion sebuah dokumen dari content document itu sendiri.
• Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web
• Mempercepat proses rendering/pembacaan HTML.
Sepertinya kita sering banget denger istilah CSS, tapi bagi yang awam tentang dunia web dan Internet seperti kita pasti bingung atau bahkan banyak yang ga peduli apa itu CSS. Sebenarnya kalo kita punya profile di Friendster dan kita sering ngotak-ngatik tampilan profile kita, berarti secara langsung kita udah berhubungan dengan yang namanya CSS, Nah lo…baru nyadar kan?
CSS bekerja sebagai pelengkap pada HTML, jadi untuk mengerti CSS paling tidak kita harus sedikit tahu tentang HTML.
CSS(Cascading Style Sheet) adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Singkatnya dengan menggunakan Methode CSS ini anda dengan mudah mengubah secara keseluruhan warna dan tampilan yang ada di situs anda, sekaligus memformat ulang situs anda (merubah secara cepat). CSS juga memungkinkan si pembuat web untuk memodifikasi HTML untuk membentuk tampilan sebuah website. Jadi kalo kita ini adalah arsitek, maka HTML adalah bangunannya dan CSS adalah desain interior dan eksteriornya. Web tanpa CSS bagai sayur tanpa garam. Lho?
Lalu apa sih style sheet (css) itu sebenarnya? apa kegunaan sebenarnya? dan bagaimana cara menggunakannya?
CSS diperkenalkan untuk pengembangan website pada tahun 1996. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian akan membentuk hubungan parent-child pada setiap style. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
CSS adalah sebuah dokumen yang berdiri sendiri dan dapat dimasukkan dalam kode HTML atau sekedar mejadi rujukan oleh HTML dalam pendefinisian style. CSS menggunakan kode2 yang tersusun untuk menetapkan style pda elemen HTML atau dapat juga digunakan membuat style baru yang biasa disebut class.
CSS dapat mengubah besar kecilnya text, mengganti warna background pada sebuah halaman, atau dapat pula mengubah warna border pada tabel, dan masih banyak lagi hal yang dapat dilakukan oleh CSS.
Singkatnya, CSS digunakan untuk mengatur susunan tampilan pada halaman HTML.
CSS dapat digunakan untuk menggantikan , , dan , dikarenakan hal berikut:
sebuah file css dapat menjadi rujukan banyak halaman HTML. Hanya dibutuhkan 1 baris kode untuk melakukan hal tersebut. Ini berarti akan meminimalkan file2 HTML yang akan dibuat.
Jika ingin mengubah tampilan website yang telah dibuat, maka yang perlu dilakukan hanya mengganti baris-baris kode pada css nya saja, tanpa perlu mengutak-atik file-file HTML nya.
CSS dapat mengatur banyak atribut pada sebuah halaman secara mudah. Misalnya: warna background, border, shadow, yang berbeda pada masing-masing tag yang digunakan.
Satu dari beberapa kehebatan tekhnologi css ini dan merupakan alasan banyak orang menyukai
penggunaannya adalah memperbolehkan kita untuk mendefinisikan sebuah style-sheet global yang dapat menerapkan aturan-aturan css tersebut untuk keseluruhan dokumen-dokumen HTML pada halaman web site anda. Keuntungannya jelas sekali, jika kita ingin mengubah tampilan situs, kita tinggal mengedit satu file saja
Sekarang, kita akan mencoba melihat bagaimana css itu bekerja. Untuk itu, kita butuh sebuah text editor (notepad, wordpad, Ms word, semua tergantung kesukaan masing2), dan sebuah web browser tentunya.
Contoh tanpa Css:
masukkan kode dibawah ini ke dalam text editor, lalu simpan dengan nama, tanpacss.html:
Tanpa CSS
tag H1
Contoh pakai Css:
masukkan kode dibawah ini kedalam text editor, lalu simpan dengan nama pakaicss.html
Pakai CSS
h1
{
color: #FF66CC;
font-family: Verdana;
size: 18pt;
}
tag H1 yang besar dan berwarna
Berarti sekarang ada 2 file html yang telah dibuat. Langkah selanjutnya, buka file-file html tersebut dengan menggunakan web browser.
pasti akan terlihat bedanya kan? Tag pada file tanpacss.html merupakan yang masih polos (tanpa dikenai atribut apapun), sedangkan pada file pakaicss.html telah diberi atribut berupa warna, font-family dan besar font yang digunakan. Pemberian atribut itu, terletak diantara tag dan .
Penggunaan css yang langsung dimasukkan ke dalam file HTML, biasa disebut inline style sheet.
Ok, kira-kira seperti itulah Dasar Pengertian CSS.mohon dimaafkan bila ada yang salah,karena sayapun masih tahap belajar.Artikel ini saya buat dengan menyadur dari Abe Poetra dan rumah web.semoga bisa bermanfaat buat kita semua.
Ok lanjut saja tentang CSS.
Pengertian CSS adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.
Keuntungan menggunakan CSS :
• Memisahkan presentastion sebuah dokumen dari content document itu sendiri.
• Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web
• Mempercepat proses rendering/pembacaan HTML.
Sepertinya kita sering banget denger istilah CSS, tapi bagi yang awam tentang dunia web dan Internet seperti kita pasti bingung atau bahkan banyak yang ga peduli apa itu CSS. Sebenarnya kalo kita punya profile di Friendster dan kita sering ngotak-ngatik tampilan profile kita, berarti secara langsung kita udah berhubungan dengan yang namanya CSS, Nah lo…baru nyadar kan?
CSS bekerja sebagai pelengkap pada HTML, jadi untuk mengerti CSS paling tidak kita harus sedikit tahu tentang HTML.
CSS(Cascading Style Sheet) adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Singkatnya dengan menggunakan Methode CSS ini anda dengan mudah mengubah secara keseluruhan warna dan tampilan yang ada di situs anda, sekaligus memformat ulang situs anda (merubah secara cepat). CSS juga memungkinkan si pembuat web untuk memodifikasi HTML untuk membentuk tampilan sebuah website. Jadi kalo kita ini adalah arsitek, maka HTML adalah bangunannya dan CSS adalah desain interior dan eksteriornya. Web tanpa CSS bagai sayur tanpa garam. Lho?
Lalu apa sih style sheet (css) itu sebenarnya? apa kegunaan sebenarnya? dan bagaimana cara menggunakannya?
CSS diperkenalkan untuk pengembangan website pada tahun 1996. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian akan membentuk hubungan parent-child pada setiap style. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
CSS adalah sebuah dokumen yang berdiri sendiri dan dapat dimasukkan dalam kode HTML atau sekedar mejadi rujukan oleh HTML dalam pendefinisian style. CSS menggunakan kode2 yang tersusun untuk menetapkan style pda elemen HTML atau dapat juga digunakan membuat style baru yang biasa disebut class.
CSS dapat mengubah besar kecilnya text, mengganti warna background pada sebuah halaman, atau dapat pula mengubah warna border pada tabel, dan masih banyak lagi hal yang dapat dilakukan oleh CSS.
Singkatnya, CSS digunakan untuk mengatur susunan tampilan pada halaman HTML.
CSS dapat digunakan untuk menggantikan , , dan , dikarenakan hal berikut:
sebuah file css dapat menjadi rujukan banyak halaman HTML. Hanya dibutuhkan 1 baris kode untuk melakukan hal tersebut. Ini berarti akan meminimalkan file2 HTML yang akan dibuat.
Jika ingin mengubah tampilan website yang telah dibuat, maka yang perlu dilakukan hanya mengganti baris-baris kode pada css nya saja, tanpa perlu mengutak-atik file-file HTML nya.
CSS dapat mengatur banyak atribut pada sebuah halaman secara mudah. Misalnya: warna background, border, shadow, yang berbeda pada masing-masing tag yang digunakan.
Satu dari beberapa kehebatan tekhnologi css ini dan merupakan alasan banyak orang menyukai
penggunaannya adalah memperbolehkan kita untuk mendefinisikan sebuah style-sheet global yang dapat menerapkan aturan-aturan css tersebut untuk keseluruhan dokumen-dokumen HTML pada halaman web site anda. Keuntungannya jelas sekali, jika kita ingin mengubah tampilan situs, kita tinggal mengedit satu file saja
Sekarang, kita akan mencoba melihat bagaimana css itu bekerja. Untuk itu, kita butuh sebuah text editor (notepad, wordpad, Ms word, semua tergantung kesukaan masing2), dan sebuah web browser tentunya.
Contoh tanpa Css:
masukkan kode dibawah ini ke dalam text editor, lalu simpan dengan nama, tanpacss.html:
Tanpa CSS
tag H1
Contoh pakai Css:
masukkan kode dibawah ini kedalam text editor, lalu simpan dengan nama pakaicss.html
Pakai CSS
h1
{
color: #FF66CC;
font-family: Verdana;
size: 18pt;
}
tag H1 yang besar dan berwarna
Berarti sekarang ada 2 file html yang telah dibuat. Langkah selanjutnya, buka file-file html tersebut dengan menggunakan web browser.
pasti akan terlihat bedanya kan? Tag pada file tanpacss.html merupakan yang masih polos (tanpa dikenai atribut apapun), sedangkan pada file pakaicss.html telah diberi atribut berupa warna, font-family dan besar font yang digunakan. Pemberian atribut itu, terletak diantara tag dan .
Penggunaan css yang langsung dimasukkan ke dalam file HTML, biasa disebut inline style sheet.
Ok, kira-kira seperti itulah Dasar Pengertian CSS.mohon dimaafkan bila ada yang salah,karena sayapun masih tahap belajar.Artikel ini saya buat dengan menyadur dari Abe Poetra dan rumah web.semoga bisa bermanfaat buat kita semua.
Saturday, June 25, 2011
Pengertian Website
Sebelum membuat Websiite bagi yang belum tau tentu saja ingin mengetahui apa itu Website atau Blog.
Mungkin bagi yang baru pertama mendengar kata ‘Website / blog’ sama membingungkannya ketika pertama kali penulis mendengar kata internet,Email,maupun chating.
Berikut penjelasan tentang Website :
Website adalah suatu halaman atau pekarangan atau bangunan media informasi yang disediakan melalui jalur internet sehingga bisa diakses di seluruh dunia selama terkoneksi dengan jaringan internet. Website merupakan kumpulan komponen yang terdiri dari teks, gambar, suara animasi sehingga lebih merupakan media informasi yang menarik untuk dikunjungi. Secara garis besar, website bisa digolongkan menjadi 3 tipe / jenis yaitu:
* Website Statis
* Website Dinamis
* Website Interaktif
Website Statis adalah web yang mempunyai halaman tidak berubah. Artinya untuk melakukan perubahan pada suatu halaman dilakukan secara manual dengan mengedit code yang menjadi struktur dari website tersebut.
Website Dinamis merupakan website yang secara struktur diperuntukan untuk update sesering mungkin. Biasanya selain halaman utama yang bisa diakses oleh pengguna atau pengunjung pada umumnya, juga disediakan halaman backend untuk mengedit kontent dari website. Contoh mengenai website dinamis adalah web berita atau web portal yang didalamnya terdapat fasilitas berita, polling dan sebagainya.
Website Interaktif adalah web yang saat ini memang sedang booming. Salah satu contoh website interaktif adalah blog dan forum. Di website ini pengguna atau pengunjung bisa berinteraksi dan beradu argument mengenai apa yang menjadi pemikiran mereka. Biasanya website seperti memiliki moderator untuk mengatur supaya topik yang diperbincangkan tidak keluar jalur.
Apa itu Blog ?
Blog termasuk dalam golongan Website tipe ketiga seperti yang di jelaskan di atas yaitu tipe Website Interaktif dimana pengguna atau pengunjung bisa berinteraksi dan beradu argument mengenai apa yang menjadi pemikiran mereka. Blog juga merupakan situs yang sifatnya lebih menitik beratkan kepada penggambaran dari si pembuat blog itu sendiri menurut salah seorang webmaster/Blogger indonesia Kang Roman.
Menurut penulis sendiri bangunan media informasi ini terbentuk dari tiga bahan pokok (emangnya adonan kue?), maksudnya tiga unsur utama seperti halnya di ibaratkan saja manusia mempunyai tiga unsur yaitu nama, tubuh / wadah (body) yang merupakan tempat penyimpanan isi, dan ketiga adalah isi (jiwa,roh,sukma,tulang,dan juga isi perut. kwkh..).
Nah ketiga unsur Website itu adalah :
1. Domain : yaitu nama atau alamat website itu sendiri. ingat, Domain hanyalah sebuah nama dari Website, contoh: www.bikinsitusweb.co.cc, www.google.com, www.yahoo.com, www.facebook.com adalah nama / alamat sebuah website.
2. Webhosting : yaitu tempat penyimpanan domain itu sendiri serta content yang dipakai untuk membangun website itu. ibarat ada isi ada juga wadahnya. juga bisa kita ambil contoh bangunan tempat pedagang menyimpan barang dagangannya disebut ‘warung atau toko’, tak akan disebut ‘warung’ jika barang daganganya di letakan berserak di atas tanah belakang halaman rumah di semak-semak ilalang, dia mesti ada tempat (bangunan) khusus untuk menletakan/menyimpan barang daganganya, entah tempat itu terbuat dari papan,triplex,atau beton, yang penting ada tempat penyimpanan.
seperti itulah ibaratnya webhostig adalah tempat penyimpanan domain dan file-file. webhosting ini lah yang akan meng-online-kan sebuah website sehingga bisa di akses oleh pengguna internet di seluruh dunia.
3. File CMS (Content System Management) : yang adalah isi, yaitu content yang di pakai untuk membangun website seperti menulis artikel dalam postingan web/blog seperti artikel yang sedang anda baca ini, intinya CMS adalah Mesin Dari Sebuah Situs, Blog Ini Menggunakan CMS WordPress. File-File CMS ini juga harus tersimpan di webhosting.
Mungkin bagi yang baru pertama mendengar kata ‘Website / blog’ sama membingungkannya ketika pertama kali penulis mendengar kata internet,Email,maupun chating.
Berikut penjelasan tentang Website :
Website adalah suatu halaman atau pekarangan atau bangunan media informasi yang disediakan melalui jalur internet sehingga bisa diakses di seluruh dunia selama terkoneksi dengan jaringan internet. Website merupakan kumpulan komponen yang terdiri dari teks, gambar, suara animasi sehingga lebih merupakan media informasi yang menarik untuk dikunjungi. Secara garis besar, website bisa digolongkan menjadi 3 tipe / jenis yaitu:
* Website Statis
* Website Dinamis
* Website Interaktif
Website Statis adalah web yang mempunyai halaman tidak berubah. Artinya untuk melakukan perubahan pada suatu halaman dilakukan secara manual dengan mengedit code yang menjadi struktur dari website tersebut.
Website Dinamis merupakan website yang secara struktur diperuntukan untuk update sesering mungkin. Biasanya selain halaman utama yang bisa diakses oleh pengguna atau pengunjung pada umumnya, juga disediakan halaman backend untuk mengedit kontent dari website. Contoh mengenai website dinamis adalah web berita atau web portal yang didalamnya terdapat fasilitas berita, polling dan sebagainya.
Website Interaktif adalah web yang saat ini memang sedang booming. Salah satu contoh website interaktif adalah blog dan forum. Di website ini pengguna atau pengunjung bisa berinteraksi dan beradu argument mengenai apa yang menjadi pemikiran mereka. Biasanya website seperti memiliki moderator untuk mengatur supaya topik yang diperbincangkan tidak keluar jalur.
Apa itu Blog ?
Blog termasuk dalam golongan Website tipe ketiga seperti yang di jelaskan di atas yaitu tipe Website Interaktif dimana pengguna atau pengunjung bisa berinteraksi dan beradu argument mengenai apa yang menjadi pemikiran mereka. Blog juga merupakan situs yang sifatnya lebih menitik beratkan kepada penggambaran dari si pembuat blog itu sendiri menurut salah seorang webmaster/Blogger indonesia Kang Roman.
Menurut penulis sendiri bangunan media informasi ini terbentuk dari tiga bahan pokok (emangnya adonan kue?), maksudnya tiga unsur utama seperti halnya di ibaratkan saja manusia mempunyai tiga unsur yaitu nama, tubuh / wadah (body) yang merupakan tempat penyimpanan isi, dan ketiga adalah isi (jiwa,roh,sukma,tulang,dan juga isi perut. kwkh..).
Nah ketiga unsur Website itu adalah :
1. Domain : yaitu nama atau alamat website itu sendiri. ingat, Domain hanyalah sebuah nama dari Website, contoh: www.bikinsitusweb.co.cc, www.google.com, www.yahoo.com, www.facebook.com adalah nama / alamat sebuah website.
2. Webhosting : yaitu tempat penyimpanan domain itu sendiri serta content yang dipakai untuk membangun website itu. ibarat ada isi ada juga wadahnya. juga bisa kita ambil contoh bangunan tempat pedagang menyimpan barang dagangannya disebut ‘warung atau toko’, tak akan disebut ‘warung’ jika barang daganganya di letakan berserak di atas tanah belakang halaman rumah di semak-semak ilalang, dia mesti ada tempat (bangunan) khusus untuk menletakan/menyimpan barang daganganya, entah tempat itu terbuat dari papan,triplex,atau beton, yang penting ada tempat penyimpanan.
seperti itulah ibaratnya webhostig adalah tempat penyimpanan domain dan file-file. webhosting ini lah yang akan meng-online-kan sebuah website sehingga bisa di akses oleh pengguna internet di seluruh dunia.
3. File CMS (Content System Management) : yang adalah isi, yaitu content yang di pakai untuk membangun website seperti menulis artikel dalam postingan web/blog seperti artikel yang sedang anda baca ini, intinya CMS adalah Mesin Dari Sebuah Situs, Blog Ini Menggunakan CMS WordPress. File-File CMS ini juga harus tersimpan di webhosting.
Thursday, June 9, 2011
Membuat efek berjalan
Apa itu marquee ? Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat tempat pada halaman blog.
Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.
Atribut yang sering di gunakan adalah :
BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks
DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks
BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan
Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)
TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks
SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.
SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik
LOOP="angka|-1|infinite" --> Mengatur jumlah loop
WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen
Agar lebih jelas akan saya sertakan contohnya :
Contoh marquee dari gerakan :
hasilnya :
marquee dari kanan ke kiri
ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .
Contoh marquee dari perilaku gerakan :
marquee menurut perilaku
marquee menurut perilaku
Contoh marquee dengan variasi hurup dan warna latar belakang :
hasilnya :
Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.
Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :
silahkan tunjuk ke sini
hasilnya :
silahkan tunjuk ke sini
Contoh marquee yang di dalam nya terdapat link :
hasilnya :Free Template
Kolom iklan
Kang Rohman
Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.
Selamat ber eksperimen
Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.
Atribut yang sering di gunakan adalah :
BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks
DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks
BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan
Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)
TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks
SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.
SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik
LOOP="angka|-1|infinite" --> Mengatur jumlah loop
WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen
Agar lebih jelas akan saya sertakan contohnya :
Contoh marquee dari gerakan :
<MARQUEE align="center" direction="right"height="200" scrollamount="2" width="30%">marquee dari kanan ke kiri</MARQUEE>hasilnya :
marquee dari kanan ke kiri
ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .
Contoh marquee dari perilaku gerakan :
<MARQUEE align="center"direction="left" height="200" scrollamount="3"width="70%" behavior="alternate">marquee menurut perilaku
</MARQUEE>marquee menurut perilaku
Contoh marquee dengan variasi hurup dan warna latar belakang :
<div align="left"><FONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate"></MARQUEE></b></FONT></div>hasilnya :
marquee dengan variasi hurup
Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.
Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">silahkan tunjuk ke sini
</marquee>hasilnya :
silahkan tunjuk ke sini
Contoh marquee yang di dalam nya terdapat link :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href="http://rubrik-elektronik.blogspot.com" target="new">Rubrik Elektronik</a><br/>
<a href="http://electronic-rubric.blogspot.com" target="new">Electronic Rubric </a><br/>
<a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan </a><br/>
</marquee>hasilnya :Free Template
Kolom iklan
Kang Rohman
Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.
Selamat ber eksperimen
Tuesday, June 7, 2011
Cara Membuat Teks Berjalan Ke atas, ke Bawah dan Kesamping
Tutorial berikut kita akan membahas bagaimana cara membuat teks berjalan, baik itu berjalan dari kiri ke kanan dan sebaliknya serta dari bawah ke atas dan juga sebaliknya. Kode perintah HTML yang digunakan untuk membuat teks berjalan ini adalah MARQUEE dan tanpa bertele-tele yuk kita mulai.
1. Teks berjalan dari Kiri ke Kanan , kodenya adalah :
<MARQUEE align="center" direction="right" height="45" scrollamount="2" width="20%">
marquee dari kiri ke kanan
</MARQUEE>
Kode diatas akan menghasilkan tampilan sebagai berikut:
marquee dari kiri ke kanan
Note: Pada huruf yang berwarna merah dapat anda sesuaikan dengan keinginan, contohnya jika tulisan ingin berjalan dari kanan ke kiri maka di ubah menjadi "left" , ukuran height adalah tinggi dari area tulisan yang bergerak, scrollamount adalah kecepatan teks bergerak.Semua teks yang berwarna merah dapat disesuaikan dengan lebar sidebar blog.
2. Teks berjalan menurut sifat, kodenya adalah :
<MARQUEE align="center" direction="left" height="50" scrollamount="3" width="20%" behavior="alternate">
marquee menurut sifat
</MARQUEE>
Kode diatas akan menghasilkan tampilan sebagai berikut:
marquee menurut sifat
3. Teks berjalan / bergulir keatas, kodenya adalah :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="20%" height="50" align="center">
<a href="http://www.ageboy.co.cc/" target="new">Community Brudu PB</a><br />
<a href="http://ridho-n-indah.blogspot.com/" target="new">Anggota Brudu PB</a><br />
<a href="http://frespector.blogspot.com/" target="new">Bogelmen</a><br />
</marquee>
Kode diatas akan menghasilkan tampilan sebagai berikut:
Community Brudu PB
Anggota Brudu PB
Bogelmen
Note: Jika Anda menginginkan yang berjalan adalah sebuah image/gambar, maka gantilah semua teks yang berwarna hijau dengan sourch image Anda.
4. Teks berjalan dengan background, kodenya adalah :
<div align="left"> <B><MARQUEE BGCOLOR="RED" width="20%" scrollamount="3" behavior="alternate">
dengan background
</MARQUEE></b> </div>
Kode diatas akan menghasilkan tampilan sebagai berikut:
1. Teks berjalan dari Kiri ke Kanan , kodenya adalah :
<MARQUEE align="center" direction="right" height="45" scrollamount="2" width="20%">
marquee dari kiri ke kanan
</MARQUEE>
Kode diatas akan menghasilkan tampilan sebagai berikut:
marquee dari kiri ke kanan
Note: Pada huruf yang berwarna merah dapat anda sesuaikan dengan keinginan, contohnya jika tulisan ingin berjalan dari kanan ke kiri maka di ubah menjadi "left" , ukuran height adalah tinggi dari area tulisan yang bergerak, scrollamount adalah kecepatan teks bergerak.Semua teks yang berwarna merah dapat disesuaikan dengan lebar sidebar blog.
2. Teks berjalan menurut sifat, kodenya adalah :
<MARQUEE align="center" direction="left" height="50" scrollamount="3" width="20%" behavior="alternate">
marquee menurut sifat
</MARQUEE>
Kode diatas akan menghasilkan tampilan sebagai berikut:
marquee menurut sifat
3. Teks berjalan / bergulir keatas, kodenya adalah :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="20%" height="50" align="center">
<a href="http://www.ageboy.co.cc/" target="new">Community Brudu PB</a><br />
<a href="http://ridho-n-indah.blogspot.com/" target="new">Anggota Brudu PB</a><br />
<a href="http://frespector.blogspot.com/" target="new">Bogelmen</a><br />
</marquee>
Kode diatas akan menghasilkan tampilan sebagai berikut:
Community Brudu PB
Anggota Brudu PB
Bogelmen
Note: Jika Anda menginginkan yang berjalan adalah sebuah image/gambar, maka gantilah semua teks yang berwarna hijau dengan sourch image Anda.
4. Teks berjalan dengan background, kodenya adalah :
<div align="left"> <B><MARQUEE BGCOLOR="RED" width="20%" scrollamount="3" behavior="alternate">
dengan background
</MARQUEE></b> </div>
Kode diatas akan menghasilkan tampilan sebagai berikut:
dengan background
Mudah bukan membuat teks berjalan di blog? Selamat mencoba....salam Community Brudu PB
Monday, June 6, 2011
Kode-kode dasar HTML
Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.Bagi anda yang belum begitu mengerti HTML,bisa baca disini
Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halaman HTML dengan software instant seperti Dreamweaver dll.
Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:
Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :
Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :
Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :
Belajar
Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :
Belajar
Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :
Belajar
Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :
<b><i><u>Belajar</u></i></b> hasilnya seperti :
Belajar
Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :
Belajar
Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span> hasilnya seperti :
Namanya juga hidden..ya..ga keliatan..
Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :
Belajar
Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:
Belajar
Membuat Huruf Subscribe / kecil di bawah gunakan kode:
<p>4<sub>2</sub></p>hasilnya seperti ini:
42
Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4<sup>2</sup></p> hasilnya seperti ini:
42
Membuat Huruf bergaris atas gunakan kode:
<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:
Belajar mengganti huruf
Membuat Huruf bergaris tengah gunakan kode:
<strike>Belajar</strike> hasilnya seperti ini:
Belajar
Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:
Belajar
Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:
Belajar
Menentukan warna huruf gunakan kode:
<p style="color: green; >Belajar</p> hasilnya seperti ini:
Belajar
Membuat bullet dot bolong gunakan kode:
<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
Membuat bullet dot kotak gunakan kode:
<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
Membuat bullet dot bulat gunakan kode:
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
Mengatur posisi bullet gunakan kode:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
hasilnya seperti ini:
Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:
<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>
hasilnya seperti ini:
Membuat tabel border solid gunakan kode:
Membuat tabel border dot gunakan kode:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>
hasilnya seperti ini:
Membuat tabel border dashed gunakan kode:
<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
hasilnya seperti ini:
Membuat tabel border groove gunakan kode:
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Membuat tabel border Ridge gunakan kode:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Membuat tabel border Insert gunakan kode:
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Membuat tabel border Outset gunakan kode:
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Membuat Tabel Biasa gunakan kode :
<table border="1"width="200"><td>Text</td></table>
hasilnya seperti:
Membuat Tabel berwarna gunakan kode :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :
Membuat Tabel berwarna tak berbingkai gunakan kode :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:
Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.
**Tabel-tabel diatas,akan terlihat sempurna jika dibuka pada browser IE (Internet Explorer)
Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halaman HTML dengan software instant seperti Dreamweaver dll.
Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:
Belajar
Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :
Belajar
Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :
Belajar
Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :
Belajar
Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :
Belajar
Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :
Belajar
Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :
<b><i><u>Belajar</u></i></b> hasilnya seperti :
Belajar
Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :
Belajar
Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span> hasilnya seperti :
Namanya juga hidden..ya..ga keliatan..
Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :
Belajar
Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:
Belajar
Membuat Huruf Subscribe / kecil di bawah gunakan kode:
<p>4<sub>2</sub></p>hasilnya seperti ini:
42
Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4<sup>2</sup></p> hasilnya seperti ini:
42
Membuat Huruf bergaris atas gunakan kode:
<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:
Belajar mengganti huruf
Membuat Huruf bergaris tengah gunakan kode:
<strike>Belajar</strike> hasilnya seperti ini:
Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:
Belajar
Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:
Belajar
Menentukan warna huruf gunakan kode:
<p style="color: green; >Belajar</p> hasilnya seperti ini:
Belajar
Membuat bullet dot bolong gunakan kode:
<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
- DOT 1
- DOT 2
- DOT 3
Membuat bullet dot kotak gunakan kode:
<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
- DOT 1
- DOT 2
- DOT 3
Membuat bullet dot bulat gunakan kode:
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
- DOT 1
- DOT 2
- DOT 3
Mengatur posisi bullet gunakan kode:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
hasilnya seperti ini:
- DOT 1
- DOT 2
- DOT 3
Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:
<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>
hasilnya seperti ini:
Belajar
Membuat tabel border solid gunakan kode:
<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>
hasilnya seperti :<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>
| Text |
Membuat tabel border dot gunakan kode:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>
hasilnya seperti ini:
| Text |
Membuat tabel border dashed gunakan kode:
<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
hasilnya seperti ini:
| Text |
Membuat tabel border groove gunakan kode:
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
| Text |
Membuat tabel border Ridge gunakan kode:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
| Text |
Membuat tabel border Insert gunakan kode:
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
| Text |
Membuat tabel border Outset gunakan kode:
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
| Text |
Membuat Tabel Biasa gunakan kode :
<table border="1"width="200"><td>Text</td></table>
hasilnya seperti:
| Text |
Membuat Tabel berwarna gunakan kode :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :
| Text |
Membuat Tabel berwarna tak berbingkai gunakan kode :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:
| Text |
Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.
**Tabel-tabel diatas,akan terlihat sempurna jika dibuka pada browser IE (Internet Explorer)
Subscribe to:
Posts (Atom)