Sabtu, 18 Februari 2017

CSS: Width dan Height



Assalamualaikum wr.wb

Selamat Sore masih bersama blog saya ,kali ini kita akan mempelajari tentang Width dan Height .
Pengertian Width adalah properti yang digunakan untuk mengatur lebar dan Height adalah properti yang digunakan untuk mengatur tinggi
contoh:

Menggunakan max-widthsebaliknya, dalam situasi ini, akan meningkatkan penanganan browser dari jendela kecil.

nah itu lah contohnya penggunaan width dan height
keterangan:
  •  element p diatur lebar dan panjangnya dengan width dan height
  • lebar elemen p 50%
  • tinggi elemen p 400px
ada juga properti max-width dugunakan untuk mengatur lebar maksimum dari elemen
bisa kalian coba sendiri karena jika kita hanya membaca tidak mencoba belm tentu itu benar jika belum dicoba
maaf jika ada salah bisa ditanya di koment
referensi:www.w3schools.com
Menggunakan max-widthsebaliknya, dalam situasi ini, akan meningkatkan penanganan browser dari jendela kecil.

sekian Wassalamualaikum wr.wb

Jumat, 17 Februari 2017

CSS: Hover

Assalamualaikum wr.wb

pada kesempatan pada hari ini saya akan membahas tentang CSS Hover adalah sebuah style yang digunakan untuk merubah style content apabila kursor diarahkan ke konten .biasanya warna content itu akan berubah jika diarahkan ke konten hover ini digunakan agar tampilan lebih menarik dan keren, langsung ke contohnya
:




 keterangan:

  • pemanggilan menggunakan selector elemen html
  • background awal bewarna merah dan text putih
  • setelah kursor di arahkan ke content maka background berubah bewarnahijau dan text hitam
nah itu mungkin contoh sederhananya kalian bisa menggunkan hover disetiap elemen seperti :button,list,content dan lain lain
mungkin bisa langsung dipraktekan agar langsung paham kegunaanya
mungkin sekian dri saya
referensi:www.w3schools.com

Wassalamualaikum wr.wb

Kamis, 16 Februari 2017

CSS: Menambah Icon

Assalamualaikum wr.wb
kali ini saya akan membahas cara menambah icon . icon disini berguna untuk mempercantik tampilan agar tampilan tidak menjadi sepi karena hanya berisi text saja.icon juga biasa digunkan untuk memperhemat tempat dibanding text. disini kita akan mempelajari cara menambah icon secara online dan offline

contoh penggunaan secara online
1.memkai font awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 taruh link diatas di dalam tag head untuk menghubungkan fontawesome ke html
 2.kalian download font awesomenya dan menaruhnya sefolder dan dopanggil
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
berarti font awesome berada di dalam folder css

pemanggilan icon:<i class="fa fa-car"
hasil:



itu dengan font aweome ada lagi menggunkan bootstrap:
hampir sama cuma berbeda pemanggilan dan linknya
1.bootstrap secara online:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
2.secara offline sama seperti font awesome kalian download dan panggil dengan link
penggunaan:
<i class="glyphicon glyphicon-cloud"></i>
bedanya disini pemanggilan iconya menggunakan glyphicon
mungkin kalian bisa langsung mencobanya

referensi:www.w3schools.com
sekian Wassalamualaikum wr.wb

Selasa, 14 Februari 2017

CSS: Style Table

Assalamualaikum wr.wb

hai pada hari ini saya akan membahas style table. biasanya table sering digunakan dalam sebuah tampilan web, disini saya akan membagikan cara agar tampilan table agar lebih menarik
lansung ke contoh

ini adalah contoh hanya dengan penggunaan border:
itu adalah contoh sengan border biasa
coba pakai yang ini




itu adalah contoh script HTML,CSS dan Hasilnya
keterangan:
  • menetapkan apakah perbatasan harus runtuh kedalam perbatasan tunggal
  • nth-child(even) berfungsi memberi background secara berseling
  • hover didalam table itu berfungsi warna background akan berubah jika kursor diarahkan ke table sesuai dengan syntaknya 
kesimpulanya table jika dikasih CSS akan lebih menarik dan lebih bervariatif kalian juga bisa langsung mempraktekanya
referensi:www.w3schools.com

mungkin itu saja yang bisa saya bagikan sekian dari saya
Wassalamualaikum wr.wb

Senin, 13 Februari 2017

CSS: Style Link

Assalamualaikum wr.wb


haii..kali ini saya akan membahas tentang style link di CSS .
ya kegunaan CSS di style link yaitu untuk mengatur tampilan link agar lebih menarik dan tidak hanya sekedar link yang berupa text saja namun kita bisa hmembuatnya seperti button

contoh:

nah tampilanya akan lebih menarik jika diatur dalam css bisa kalian lihat contoh diatas tampilan link dengan CSS dan tanpa CSS lebih menarik mana
keterangan:
  • link yang bawah dipanggil di CSS dengan class
  • link mempunyai background merah dan warna putih
  • mempunyai jarak konten ke luar sebesar 10pixel
nah mungkin itu saja dan ada tembahan mengenai text decoration digunakan untuk menghilangkan underline dalam text. dan supaya lebih menarik link bisa di beri hover
contoh:


keterangan:
  • hover latarbelakang bewarna biru jika kursor diarahkan ke link
yah jadi intinya CSS dalam link digunakan agar membuat tampilan link menarik dan lebih berfariasi mungkin kalian bisa langsung mempraktekanya
referensi:www.w3schools.com

sekian dari saya
Wassalamualaikum wr.wb

Sabtu, 11 Februari 2017

CSS: Text

Assalamualaikum wr.wb

masih seputar CSS kali ini kita akan belajar Text di CSS. Text ditata dengan bebarapa format Text. di CSS Text pun bisa diatur agar semenarik mungkin untuk memberi kesan untuk orang mengunjungi web itu kagum dan tidak bosan mengunjungi lagi adapun materi berikut

1.Text Color(warna Text)
yaitu properti yang digunakan untuk mengatur warna Text
contoh:


keterangan:
  • pemanggilan dengan selector h1
  • text bewarna merah
2.Text Align (text keselarasan)
yaitu properti yang digunakan untuk mengatur keselarasn horisontal text
contoh:


keterangan:
  • text-align center digunakan untuk membuat rata tengah
bisa kalian coba yang lain misalnya right dan left

3.Text Decoration (dekorasi text)
biasanya sering digunakan untuk menghilangkan underline(garis bawah) di text
penulisan: {
 text-decoration:none;
}

4.Tranformasi Text
yaitu proerti yang digunakan untuk mengatur huruf kecil dan huruf besar text
contoh:



5.Text Shadow
yaitu properti yang digunakan dalam menambah efek bayangan pada Text
contoh:


nah itulah beberapa properti Text CSS dan kalian yang bingung langsung saja dipraktekan jika ada yang salah bisa dibahas ,dan jika ada kesalahan saya minta maaf

Wassalamualaikum wr.wb

Jumat, 10 Februari 2017

Jum'at Bersih BLC TELKOM KLATEN

Assalamualaikum wr.wb

Kali ini Saya akan membagi pengalaman saya P.I di BLC TELKOM KLATEN yaitu kegiatan jum'at bersih , yaitu kita melaksanakan kegitan bersih bersih pada hari jum'at yang dilakukan beberapa minggu sekali agar tempat prakerin bisa menjadi bersih dan nyaman
Dokumentasi:

biasanya laki-laki membersihkan halaman belakang dan perempuan membersihkan halaman depan. kegiatan laki-laki belakang adalah membersihkan rumput dengan alat alat yang terbatas dan yang lain bersih bersih pakai tangan
dan setelah kegiatan bersih adapun kegiatan istirahat dan makan bareng


"abaikan yang pakai kacamata(bukan saya)"nah itulah kegitan jum'at bersih BLC TELKOM KLATEN 10 Februari 2016

sekian dari saya Wassalamualaikum wr.wb