HTML digunakan untuk membuat sebuah halaman web yg menghasilkan tampilan terintegerasi seperti seperti texs, grafik, animasi, hyperlink maupun audio-video. Read More
Manfaatkan Tutorial cara buat web gratis,tutorial blog, blogspot, blogger, Css, Html, javascript,tips, trik, widget dan fitur-fitur menarik untuk kebutuhan blogging anda. Read More
Anda bisa belajar cara buat blog blogspot dari blogger, hanya dengan tiga langkah mudah cepat dan gratis. Silahkan anda ikuti langkah - langkahnya. Read More
Fungsi Properti css border - radius memudahkan kita merubah sudut pada sebuah box atau kotak menjadi tumpul atau melengkung. Bahkan dengan properti css border - radius ini kita bisa membuat sebuah lingkaran. Dan masing - masing sudut bisa diatur nilainnya secara sendiri - sendiri, seperti bagian atas - kanan, atas - kiri, bawah - kanan, dan bawah - kiri.
Contoh A
Berikut hasilnya :
Contoh B
Berikut hasilnya :
Contoh C
Berikut hasilnya :
Contoh D
Berikut hasilnya :
Contoh E
Berikut hasilnya :
Contoh F
Berikut hasilnya :
Ok...., Silahkan anda bisa coba mengganti nilai ukurannya sesuka anda, agar terlihat perbedaan hasilnya.
Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Fitur Css Box digunakan pada saat kita membuat desain web termasuk mengatur tata letaknya. Css Box pada dasarnya adalah sebuah kotak yang membungkus elemen HTML, dan sesuai fungsi tata letaknya Fitur Css Box terdiri atas: margin, border, padding, dan konten.
* Properti Margin berfungsi membuat ruang kosong atau memberikan jarak disekitar border.
* Properti Border yaitu Sebuah batas yang terjadi di sekitar padding dan konten.
* Properti Padding berfungsi membuat ruang kosong atau memberikan jarak disekitar konten.
* Properti Content berfungsi sebagai Isi kotak, di mana teks dan gambar ditampilkan
Lebih jelasnya silahkan perhatikan gambar dibawah ini :
Berikut kode penggunaan box dalam fitur css :
Berikut hasilnya :
Contoh ini menunjukkan bahwa margin atau jarak dari kiri hingga border dengan nilai 15px, sedang jarak dari border hingga konten atau teks ini dengan nilai 10px. Dan lebar border 400px dengan ketebalan border 10px
Ok...., Silahkan anda bisa coba mengganti nilai-nilai dari margin, border, lebar border, atau paddingnya sesuka anda, agar terlihat perbedaan hasilnya.
Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Banyak sekali properti dari fitur css border, yang semuanya berfungsi mengatur tampilan gaya dan warna dari sebuah border. Berikut beberapa properti dari fitur css border yang bisa kita gunakan dalam pembuatan web atau untuk keperluan lain :
1. Border-style
Properti ini dapat mengatur tampilan border dengan bermacam-macam bentuk dan efek.
2. Border-width
Properti border-width digunakan untuk mengatur ketebalan border. Dan nilai ketebalan border bisa diatur dengan satuan nilai Pixel (px) atau menggunakan nilai yang sudah ditentukan yaitu thin, medium, dan thick.
Ok...., Silahkan anda bisa mengexplore sendiri bentuk border yang lain sesuai keinginan
anda sambil belajar.
Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan
email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Seperti halnya HTML List, fitur css List juga berfungsi untuk membuat sebuah List atau tanda pada daftar. Dalam hal ini ada tiga macam bentuk yang bisa kita gunakan yaitu :
Ordered lists adalah daftar item yang ditandai dengan bentuk lingkaran kecil ataupun kotak kecil.
Unordered lists adalah daftar item yang ditandai dengan bentuk angka atau huruf.
Image lists adalah daftar item yang ditandai dengan bentuk gambar.
1. Ordered lists
Berikut hasilnya :
2. Unordered
Berikut hasilnya :
3. Image lists
Berikut hasilnya :
Catatan :
Silahkan anda ganti Ulr gambar List dengan Ulr gambar List milik anda.
Untuk penerapan, anda bisa pilih salah satu bentuk yang disukai dan langsung ditempatkan pada posting bisa, langsung pada gadget juga bisa. Jadi bila salah satu yg dipakai (misal saya pakai List yg paling bawah), maka kode yg dipakai jadi seperti ini :
Catatan : Huruf "t" yg berwarna biru merupakan ID, anda bisa ganti ID seperti huruf "t" diatas dgn nama bebas asal keduannya sama.
Bila ditambahkan Link, maka jadinya seperti berikut : Catatan :Jangan lupa ganti ukuran gambar berwarna pink (utk blogger biasanya s104 atauh104), dengan ukuran lebih kesil misal: "15px" , sehingga menjadi s15 atau h15.
List pertama adalah contoh Link langsung keartikel
List kedua adalah contoh Link Label CSS List
List ketiga adalah contoh Link Label CSS
Berikut hasilnya :
Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Penggunaan css pada fitur css link sangat bervariasi. Ada banyak fungsi pada fitur css link, kita bisa mengatur warna link, warna latar pada link, merubah warna pada saat dikunjungi ataupun warna bila link dipilih atau diklik.
Beberapa properti yang digunakan yaitu :
* a: link - link, normal belum dikunjungi
* a: visited - link pengguna telah mengunjungi
* a: hover - link ketika krusor mouse di atasnya
* a: active - link saat itu diklik
Berikut contoh-contoh Penggunaan fitur Css Link : 1. Menambahkan warna link, saat dikunjungi serta pada saat diklik
Berikut hasilnya :
2. Penggunaan text-decoration pada link
Berikut hasilnya :
3. Menentukan warna latar belakang untuk link
Berikut hasilnya :
4. Memberikan efek lain pada link
Berikut hasilnya :
4. Membuat kotak link berbentuk tab menu
Berikut hasilnya :
Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Fitur Css Font memang sangat diperlukan dalam pembuatan website. Beberapa kegunaan fitur Css Font yang bisa digunakan diantaranya seperti :
Mengatur jenis font
Mengatur ukuran font
Mengatur ketebalan font
Mengatur kemiringan font
OK..., mari kita lihat contohnya satu-persatu :
1. Mengatur jenis font
Hasilnya sebagai berikut :
2. Mengatur ukuran font
Hasilnya sebagai berikut :
Catatan :
Untuk Mengatur ukuran font, ada tiga satuan nilai yang bisa kita gunakan yaitu "px", "em", "%". Pada tampilan standart, nilai ukuran font biasanya 16 px atau sama dengan 1 em, atau sama dengan 100%.
Hasilnya sebagai berikut :
3. Mengatur ketebalan font
Hasilnya sebagai berikut :
4. Mengatur kemiringan font
Hasilnya sebagai berikut :
Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Beberapa fungsi fitur CSS teks atau disebut juga dengan format teks seperti warna teks, penempatan atau posisi teks mengunakan properti align, properti Dekorasi teks yang berfungsi untuk membuat dekorasi atau menghilangkan dekorasi seperti menghilangkan garis bawah pada link, Transformasi teks yang berfungsi untuk menentukan besar kecilnya huruf dalam teks, Identitas teks yang berfungsi untuk menentukan posisi teks baris pertama pada suatu paragraf.
Berikut ini contoh fungsi fitur css yang digunakan dalam pemformatan teks :
1. Warna Teks
Berikut hasilnya :
Catatan :
Pada dasarnya warna teks secara default adalah hitam. Dalam contoh diatas Warna dasar teks diberi warna merah, hal ini ditentukan oleh kata body atau body selector.
Pemberian warna bisa menggunakan salah satu diantara :
* nama-nama warna, seperti "red" * kode warna RGB, seperti "rgb (255,0,0)" * kode warna hex, seperti "# FF0000"
2. Align Taks
Berikut hasilnya :
3. Dekorasi teks
Contoh membuat dekorasi teks :
Berikut hasilnya :
Catatan : Untuk dekorasi "blink" tidak suport pada browser IE, Chrome, dan Safari.
Contoh untuk menghilangkan garis bawah pada link :
Berikut hasilnya :
4. Transformasi teks
Berikut hasilnya :
5. Identitas teks
Berikut hasilnya :
Silahkan anda bisa coba otak atik sesuai selera anda.
Ok...., Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Fitur dari css Background berfungsi untuk memberi efek latar belakang suatu elemen. Beberapa properti dan kelebihan dari fitur ini diantaranya kita bisa memberi efek latar belakang seperti; Latar belakang warna, Latar belakang gambar, mengulang Latar belakang gambar secara vertikal maupun horisontal, Mengatur posisi Latar belakang gambar.
Dengan fitur css ini, kita bisa gunakan untuk membuat sebuah web atau sekedar untuk memberi efek Background pada postingan artikel pada blog.
OK..., mari kita lihat contohnya satu-persatu :
1. Latar belakang warna
Berikut hasilnya :
JUDUL TEKS
Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang warna
2. Latar belakang gambar
3. Mengulang Latar belakang gambar secara horisontal
Berikut hasilnya :
4. Mengatur posisi Latar belakang gambar
Dengan properti css ini kita bisa membuat artikel dengan memberikan efek latar belakang gambar yang bisa kita atur posisi penempatan gambar baik di sebelah kiri atau disebelah kanan, dan kita bisa menempatkan artikel atau posting dalam sebuah kotak yang ada disebelah gambar.
Berikut hasilnya :
JUDUL TEKS
Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang gambar yang bisa kita atur posisi penempatan gambar baik di sebelah kiri atau disebelah kanan, dan kita bisa menempatkan artikel atau posting dalam sebuah kotak
Catatan :
Ganti Ulr image berwarna biru dengan Ulr tempat anda menyimpan gambar, dan tulisan berwarna merah adalah nilai ukuran besar dan kecilnya gambar.
nilai width:40% adalah lebar dari kotak
Silahkan anda bisa coba otak atik sesuai selera anda.
Ok...., Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
List termasuk atribut yang sering digunakan dalam membuat sebuah daftar ataupun sub daftar. Biasanya bentuk list yang sering digunakan adalah seperti Angka, huruf, romawi, titik atau bentuk-bentuk bidang seperti lingkaran, kotak, dll.
Berikut beberapa contoh bentuk list yang sering digunakan :
<h4>List bentuk Angka :</h4>
<ol>
<li>Satu</li>
<li>Dua</li>
<li>Tiga</li>
<li>Empat</li>
</ol>
List bentuk Angka :
Satu
Dua
Tiga
Empat
<h4>List bentuk Huruf besar:</h4>
<ol type="A">
<li>Huruf besar A</li>
<li>Huruf besar B</li>
<li>Huruf besar C</li>
<li>Huruf besar D</li>
</ol>
List bentuk Huruf besar :
Huruf besar A
Huruf besar B
Huruf besar C
Huruf besar D
<h4>List bentuk Huruf kecil:</h4>
<ol type="a">
<li>Huruf kecil a</li>
<li>Huruf kecil b</li>
<li>Huruf kecil c</li>
<li>Huruf kecil d</li>
</ol>
List bentuk Huruf kecil :
Huruf kecil a
Huruf kecil b
Huruf kecil c
Huruf kecil d
<h4>List bentuk Romawi besar:</h4>
<ol type="I">
<li>Romawi besar I</li>
<li>Romawi besar II</li>
<li>Romawi besar III</li>
<li>Romawi besar IV</li>
</ol>
List bentuk Romawi besar :
Romawi besar I
Romawi besar II
Romawi besar III
Romawi besar IV
<h4>List bentuk Romawi kecil:</h4>
<ol type="i">
<li>Romawi kecil i</li>
<li>Romawi kecil ii</li>
<li>Romawi kecil iii</li>
<li>Romawi kecil iv</li>
</ol>
OK....Selamat membaca artikel yang lain dan semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Dalam format html,Tabel didefinisikan dengan tag awal <table> dan tag akhir </table>. Secara dasar pada sebuah tabel terdapat beberapa elemen yaitu baris yang ditandai dengan tag <tr>, dan setiap baris atau tag <tr> terdiri atas sel-sel data yang ditandai dengan tag <td> singkatan dari "data tabel" . Didalam tag <td> inilah tempat meletakkan sebuah data atau dokumen seperti teks, link, gambar, video, animasi, daftar, bentuk suatu bidang, dll, termasuk bisa diisi sebuah tabel itu sendiri, dengan kata lain tabel didalam tabel.
Secara keseluruhan, dalam pembuatan sebuah tabel, terdapat banyak unsur atau elemen tag, yang perlu diperhatikan sesuai dengan bentuk dan fungsinya masing-masing. Langsung saja silahkan perhatikan beberapa bentuk tabel dan perbedaan penulisannya dalam format html :
1. Tabel 1 kolom, dan 1 baris
Berikut hasilnya :
Tabel 1 kolom, dan 1 baris
2. Tabel 1 kolom, dan 2 baris
Untuk membuat tabel 2 baris dan seterusnya, kita tinggal menambahkan elemen tag <tr></tr> diantara tag <table> </table> yaitu :
Berikut hasilnya :
Tabel 1 kolom, dan baris pertama
Tabel 1 kolom, dan baris kedua
3. Tabel 2 kolom, dan 1 baris
Untuk membuattabel 2 kolom dan seterusnya kita tinggal menambahkan elemen tag <td></td> diantara <tr></tr> yaitu :
Berikut hasilnya :
Kolom Pertama
Kolom Kedua
4. Tabel 2 kolom dengan 2 baris
Berikut hasilnya :
Baris pertama dan Kolom Pertama
Baris pertama dan Kolom Kedua
Baris Kedua dan Kolom Pertama
Baris Kedua dan Kolom Kedua
5. Tabel dengan garis tebal
Garis tebal ditentukan oleh Nilai border, semakin besar nilainya semakin Tebal garisnya dan terlihat seperti 3D (efek bevel)
Berikut hasilnya :
Teks
6. Tabel dengan garis berwarna
Untuk memberi warna border kita tinggal menambah “bordercolor “
Berikut hasilnya :
Teks
7. Tabel dengan warna background sama
Untuk memberi warna Background dengan warna sama seluruh tabel kita tinggal menambah “bgcolor “.
Berikut hasilnya :
Teks
Teks
8. Tabel dengan warna beda
Untuk memberi warna Background dengan warna berbeda pada setiap kolomnya :
Berikut hasilnya :
Teks
Teks
9. Tabel dengan Judul
Berikut hasilnya :
JUDUL TABEL
Judul Kolom 1
Judul Kolom 2
Judul Kolom 3
Teks
Teks
Teks
Teks
Teks
Teks
10. Tabel header atau Judul
Judul diatas
Berikut hasilnya :
Judul disamping
Berikut hasilnya :
11. Tabel Header dan keterangan
Berikut hasilnya :
12. Tabel dengan sel-sel yang lebih dari satu baris / kolom
Sel yang mencakup dua kolom:Sel yang mencakup dua kolom:
Berikut hasilnya :
Sel yang mencakup dua baris:
Berikut hasilnya :
13. Tag di dalam tabel
Bagaimana menampilkan elemen-elemen di dalam unsur-unsur lain.
Berikut hasilnya :
14. Cell padding
Cellpadding berfungsi agar teks atau gambar tidak terlalu dekat dengan garis pada tabel.
Berikut hasilnya :
15. Cell jarak
Cara menggunakan cellspacing untuk meningkatkan jarak antara sel.
Berikut hasilnya :
OK....Selamat membaca artikel yang lain dan semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini. CEO BLOG MAS NOER Noer cholis
Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini.
Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....