Halo, ketemu lagi dengan saya, pada kesempatan kali ini saya akan membahas artikel mengenai Perbedaan CSS dan CSS3, Sebelum kita membahas CSS3 terlebih dahulu akan saya Uraikan mengenai CSS. Apa itu CSS? CSS (Cascading Style Sheet) adalah salah satu bahasa pemrograman web yang digunakan untuk mengendalikan beberapa komponen dalam sebuah web sehinggan akan terlihat lebih terstruktur dan seragam.
       CSS dikembangkan untuk mengatur gaya tampilan pada web. Pada awalnya CSS dikembangkan pada SSGML pada tahun 1970 dan terus dikembangkann sehingga saat ini CSS telah mendukung banyak bahsa Markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozila XUL (XML User Interfaces Language).
Dibawah ini saya tuliskan sedikit contoh coding CSS :

<p style=”font-weight: bold”> Contoh Paragraf dengan style font-weight:bold</p>
<span style=”font-weight: bold”>Contoh SPAN dengan style font-weight:bold</span>
<p> contoh Paragraf tanpa style</p>
<span>Contoh SPAN tanpa style</span>

•  Lalu, apa prngertian  CSS3 itu? 

      CSS3 merupakan generasi ke-3 dari perkembangan CSS sebelumnya, jadi pada dasarnya pengertian CSS3 sama dengan pengertian CSS generasi sebelumnya hanya saja beberapa standar baru untuk CSS3 menggantikan CSS2 dan mungkin akan membuat kita dapat berkolaborasi lebih dalam lagi untuk membuat tampilan situs lebih menarik dan mulai meninggalkan situs yang membuat kita menunngu dengan loading yang yang lama.
Beberapa kelebihan yang terdapat pada CSS3 :

• CSS3 lebih detail untuk mendeklarasikan objek yang akan diberikan style. Contohnya didalam objek ‘blockquote’ bisa membuat(quote) diawal dan akhir menggunakan font lebih besar dan konten blockquote itu sendiri.
• CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek, yang sebelumnya tidak bisa dilakukan oleh CSS1 dan CSS2.
• Dengan menggunakan CSS3 situs yang kita buat akan lebih berkembang dan bisa lebih interaktif dengan pengunjung.
• Bisa mengurangi ukuran file yang di-load dan lebih ringan, secara otomatis mengurangi bandwith inbound/outbound situs. 

       CSS3 juga memiliki fasilitas untuk shadow (bayangan) dari suatu div layout, fitur transparasi, gradien warna pada border, warna pada teks yang diseleksi, fitur skala untuk memperkecil atau memperbesar layout, kolom pada teks dan fitur gradien pada background serta masih banyak lagi fitur-fitur yang lainnya.
Baiklah  sampai disini artikel mengenai Perbedaan CSS dan CSS3, Semoga bisa bermanfaat, sampai ketemu dilain kesempatan 

Mengatur List menggunakan CSS - CSS Memiliki sintaxs pengaturan yang dapat mengatur atau memanipulasi list pada html menggunakan CSS. Bagaimana caranya ? Pada kesempatan kali ini saya akan berbagi bagaimana tutorial mengatur list menggunkan CSS.

Berikut contoh :

Script 1.1

Script Css 1.2

 Penerapan CSS untuk mengatur list dapat menggunakan property CSS list-style-type:#; dapat menisiskan value sesuai dengan keinginan dan selera teman - teman .
Berikut ini beberapa contoh yang dapat digunakan untuk mengatur list :

• Untuk membuat list menggunakan kotak dapat menggunakan 

list-style-type:square;

• Untuk membuat list menggunakan bentuk bulat dapat menggunkan

list-style-type:circle;

• Untuk membuat ordered list menggunakan alpabeth dapat menggunakan 

list-style-type:upper-alpha;

• Untuk membuat ordered list menggunakan angka romawi dapat menggunakan 

list-style-type:upper-roman;

Sekian. Tutorial mengatur list menggunakan CSS semoga dapat menambah pengetahuan teman - teman.
Terimaksih, Wassalamualaikum wr.wb 

Mengatur Hyperlink Menggunakan CSS

   Hyperlink merupakan link yang digunakan  untuk mengalihkan ke link halaman lain ketika teks ber-link di klik. tag link ini menggunakan tag <a> dan diakhiri tag </a>. Pada tutorial kali ini saya akan menyampaikan bagaimana membuat link menggunakan CSS mulai dari warnanya ketika di-klik dll.

• Ada empat status Hyperlink pada html yang dapat dimanipulasi menggunakan CSS, dan untuk pemanggilannya menggunakan sintaxs: 

       a:link      : Merupakan link aktif biasa
       a:visited : Merupakan status sebuah link yang dikunjungi
       a:hover  : Merupakan status sebuah link yang ketika kursor diarahkan pada

                       link gayanya akan berubah
       a:active  : Merupakan status sebuah link atau hyperlink yang sudah di-klik 

Berikut contoh penerapannya :

buat scrip html dan css seperti ini: 

Hasilnya:

secara tidak langsung di kala kursor kita pindah ke huruf yang sudah link kan tadi otomatis warna huruf tersebut akan berubah

Dapat teman-teman lihat bahwa setiap sintaxs CSS yang yang diterapkan pada link html memiliki perubahan masing - masing.
Sekian apa yang dapat saya sampaikan, ssemoga dapat menambah pengetahuan teman- teman.
Terimaksih 

Wassalamualaikum wr.wb

BLC Telkom - KPLI Klaten kali ini saya akan shere ilmu di awal pembuka hari baru yaitu hari senin saya akan membahas tentang pengenalan margin,padding dan, model kotak

Assalamualaikum wr wb .
    Salam IT mari kita selalu bahas gali sedalam - dalamnya tentang CSS untuk memperindah tampilan web/blog .Selanjutnya saya akan membahas tentang Margin,Paddng dan Model Kotak . berikut penjelasan dan beberapa contoh penerapan .

• Margin-CSS 

CSS Margin properti yang digunakan untuk menghasilkan ruang di sekitar elemen. 
CSS memiliki sifat untuk menentukan margin untuk setiap sisi elemen:

• margin-top
• margin-right
• margin-bottom
• margin-left

Script Penerapan margin dengan pembagian masing - masing sisi

Script tag penerapan margin menjadi satu kelompok

Hasil dari Script 1

• Padding-CSS

CSS Properti yang digunakan untukmenghasilkan ruang disekitar konten.
Padding membersihkan area disekitar konten (dalam perbatasan dari elemeen.
Dengan CSS, teman - teman memliki kontrol penuh atas padding. Pengaturan padding untuk setiap sisi elemen (atas,bawah,samping kanan,kiri).
CSS memiliki sifat untuk menentukan padding untuk setiap sisi elemen:

• padding-top
• padding-right
• padding-bottom
• padding-left

Script Penerapan padding dengan pembagian masing - masing sisi

Script tag penerapan margin menjadi satu kelompok

Hasil dari Script 1

• Mengatur Panjang dan Lebar Element

The height dan width properti yang diguanakan untuk mengatur tinggi dan lebar elemen .

Script Pengaturan panjang dan lebar elemen

Hasil Script 1

• Model Kotak

Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah "model kotak" digunakan ketika berbicara tentang desain dan tata letak.
Kotak CSS Model pada dasarnya adalah sebuah kotak yang membungkus di sekitar setiap elemen HTML. Ini terdiri dari: margin, perbatasan, padding, dan konten yang sebenarnya. Gambar di bawah mengilustrasikan model kotak:

Contoh penerapan dasarnya : 

Sekian, apa yang dapat saya sampaikan , kesimpulannya bahwa pengaturan untuk tampilan menggunakan CSS dapat mengatur bagian margin,padding, letak posisinya dll.

Terimakasih, Wassalamualaikum wr.wb 

Assalamu'alaikum wr.wb.

I. Pengertian

   Menurut wikipedia bahasa Indonesia, Flowchart atau diagram alir merupakan sebuah diagram dengan simbol-simbol grafis yang menyatakan aliran algoritma atau proses yang menampilkan langkah-langkah yang disimbolkan dalam bentuk kotak, beserta urutannya dengan menghubungkan masing masing langkah tersebut menggunakan tanda panah. Diagram ini bisa memberi solusi selangkah demi selangkah untuk penyelesaian masalah yang ada di dalam proses atau algoritma tersebut. 

II. Latar Belakang

      Ada banyak tahapan saat seorang programmer merancang program. Salah satu yang paling penting adalah tahap perancangan program. Tahapan ini dikatakan sebagai tahapan yang paling penting karena pada tahapan ini dasar dari program akan dibuat (rancangan program).
       Untuk membuat rancangan program tersebut programmer menggunakan alat bantu,yakni flowchart. Flowchart adalah penggambaran secara grafik dari langkah-langkah dan urut-urutan prosedur dari suatu program. Flowchart biasanya mempermudah penyelesaian suatu masalah khususnya masalah yang perlu dipelajari dan dievaluasi lebih lanjut.
       Bagi kita yang notabenenya sebagai calon programmer, mungkin masih ada yang belum memahami benar tentang apa itu flowchart dan simbol-simbolnya.

III. Alat dan Bahan 

•  Dia (Diagram Editor)
• OS Linux Mint 18.1

IV. Tujuan

     Bertujuan untuk mengenal apa itu flowchart, bagaimana cara menggunakan dan penyusunan dari flowchart.

V. Tahap Pelaksanaan

• Pada tahap pelaksanaan ini kita akan mempraktekkan membuat sebuah flowchart sederhana menggunakan software aplikasi Dia. Bisa mendownload aplikasinya di sini. Jika juga langsung masuk ke Menu -> software manager -> ketikkan pada pencarian Dia.
• Kali ini kita akan membuat sebuah contoh pembuatan dari flowchat dari login. Mari kita buka aplikasi Dia yang ada di laptop kita masing-masing.

Gambar dari Aplikasi Dia

• Simbol-simbol yang kita gunakan untuk membuat flowchat login yaitu sebagai berikut 

• Kita akan membuat flowchart dari login yaitu seperti dibawah ini.

Keterangan :

• Kita mulai terlebih dahulu
• Kita masukkan username dan password yang telah ada 
• Jika password salah maka kita akan mengisi ulang
• Jika password yang kita masukkan benar maka akan masuk ke halaman yang lain.
• Selesai

VI. Kesimpulan

     Dari  pembahasan diatas dapat ditarik kesimpulan bahwa penggunaan dari flowchart dalam pembangunan sebuah sistem atau aplikasi dapat mempermudah kita sebagai programmer ataupun bagi pembaca agar supaya dapat membaca dan mengetahui alur yang kita buat. 

VII. Referensi

•  https://id.wikipedia.org/wiki/Diagram_alir

Sekian dan Terimakasih.

SMK Bisa!!

Wasalamu'alaikum wr.wb.