Enkripsi CSS Image Opacity & Bootstrap

♠ Posted by Unknown

Enkripsi CSS Image Opacity & Bootstrap


Berikut coding untuk membuat gambar dengan opacity dari bootstrap.

<DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Mencoba Bootstrap </title>
    <link rel="stylesheet" href="asset/css/bootstrap.css">
    <link rel="stylesheet" href="asset/css/bootstrap.min.css">
    <link rel="stylesheet" href="asset/css/bootstrap-theme.css">
    <link rel="stylesheet" href="asset/css/bootstrap-theme.min.css">
    <script src="asset/js/bootstrap.js"></script>
    <script src="asset/js/bootstrap.min.js"></script>
    <script src="asset/js/jquery.js"></script>
    <script src="asset/js/jquery.min.js"></script>
<style>
 .jumbotron {
      color: #ffffff;
      padding: 70px 25px;
      background: url(image/coklat.jpeg) repeat;
      border: 2px solid black;
     }
div.transbox {
    margin: 20px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity:0.9=;
    filter: alpha(opacity=60);
}

div.transbox h1, p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
div.form {
    background-color="lightblue";
}
</style>
</head>
<body>
<div class="jumbotron text-center">
  <div class="transbox">
    <h1><img src="image/lambang.png" alt="lambang" style="float:left;width:20%;height:20%;border:0;">Smk Muhammadiyah 1 Weleri</h1>
    <p>Mutu Dalam Prestasi Mulia Dalam Pakarti</p>
     
    <form class="form-inline">
        <div class="form">
        <input type="email" class="form-control" size="50" placeholder="Email Address" required>
        <button type="button" class="btn btn-danger">Send</button>
        </div>
    </form>
       
  </div>
</div>
</body>
<body>
    <!-- ini salah -->
 Mencoba bootstrap
</body>
</html>


Maka hasil dari coding diatas adalah sebagai berikut.


Sharing Pengenalan Bootstrap

♠ Posted by Unknown

Bootstrap




        Sebenarnya ini masih hanya pengenalan saja untuk membantu saya mempunyai gambaran untuk membuat web dikemudian kelak. Saya dan teman-teman saya sharing dengan mbk Mutiara Auliya Khadija (mahasiswi UNS). Langsung saja pada ulasannya sebagai berikut.

        Bootstrap merupakan framework gratis front-end untuk pengembangan web lebih cepat dan lebih mudah. Bootstrap adalah HTML , CSS , dan JavaScript kerangka paling populer untuk mengembangkan responsif , situs web mobile pertama. Bootstrap adalah gratis untuk men-download dan menggunakan. 
  
         Bootstrap berdasarkan HTML dan CSS memiliki desain template untuk tipografi, bentuk, tombol, tabel, navigasi, kata modal, komidi putar gambar dan banyak plugin JavaScript opsional lainnya, serta Bootstrap juga memberikan Anda kemampuan untuk dengan mudah membuat desain responsif.
  
 Apa itu Desain Web Responsif ? 

         Desain web responsif adalah tentang menciptakan situs web yang secara otomatis menyesuaikan diri untuk terlihat baik pada semua perangkat. Baik itu ponsel maupun di laptop ataupun komputer. 

Berikut dokumentasinya.








Diskusi & Kuliah Umum "Revolusi Mental & Pendidikan Berkarakter" oleh Dr.Petrus Darmadi

♠ Posted by Unknown

"Revolusi Mental & Pendidikan Berkarakter" oleh Dr.Petrus Darmadi



Sebenarnya manusia adalah sebuah bangunan yang luar biasa. Memiliki otak yang sampai saat ini masih banyak misteri yang belum bisa terpecahkan. Otak manusia itu seperti file komputer. Cobalah kita belajar dengan benar. Dengan cara mencari referensi sendiri dan membaca sebanyak-banyaknya karena disitu sumber pengetahuan. Guru harus memiliki intuisi untuk maju kedepan.

Pendidikan dianggap proyek bukan program mulia. Jadikan pendidikan ini sebagai tempat untuk mencari jati diri kita. Tetapi dalam mencari jati diri ini banyak faktor yang mempengaruhinya. Seperti faktor lingkungan yang terdiri dari daya tahan diri.Daya tahan diri ini menimbulkan orang gampang terpengaruh oleh banyak hal. Baik itu positif maupun negatif. Dalam revolusi karakter, kita harus mengenal bangsa kita yang beranekaragam ini. Pendidikan ditimbulkan dari imajinasi. Tokoh-tokoh dunia bisa menciptakan sesuatu dari imajinasi.












HTML Local Storage

♠ Posted by Unknown

 HTML Local Storage (Penyimpanan Lokal)


Apa itu HTML Local Storage (Penyimpanan Lokal) ?

       Dengan penyimpanan lokal , aplikasi web dapat menyimpan data secara lokal dalam browser pengguna . Sebelum HTML5 , data aplikasi harus disimpan dalam cookie , termasuk dalam setiap permintaan server. Penyimpanan lokal lebih aman , dan sejumlah besar data dapat disimpan secara lokal , tanpa mempengaruhi kinerja website . Tidak seperti cookies , batas penyimpanan yang jauh lebih besar ( setidaknya 5MB ) dan informasi yang tidak pernah ditransfer ke server . Penyimpanan lokal adalah per asal ( per domain dan protokol ) . Semua halaman , dari satu asal , dapat menyimpan dan mengakses data yang sama.

HTML Local Storage Objects
  
HTML penyimpanan lokal memberikan dua objek untuk menyimpan data pada klien :     
  • window.localStorage - menyimpan data tanpa tanggal kedaluwarsa
  • window.sessionStorage - menyimpan data untuk satu sesi ( data hilang ketika tab browser ditutup )
  
Sebelum menggunakan penyimpanan lokal , memeriksa dukungan browser untuk localStorage dan sessionStorage :



The localStorage Object
  
Objek localStorage menyimpan data tanpa tanggal kedaluwarsa . Data tidak akan dihapus bila browser ditutup , dan akan tersedia pada hari berikutnya , minggu, atau tahun.
  
Contoh : 
  • Membuat nama localStorage / nilai pasangan dengan nama = "Lastname" dan value = " Smith "     
  • Mengambil nilai dari "Lastname" dan masukkan ke dalam elemen dengan id = "result"


Sintaks untuk menghapus "Lastname" item localStorage adalah sebagai berikut:


  
Catatan : Nama / nilai pasangan selalu disimpan sebagai string . Ingatlah untuk mengkonversikannya ke format lain bila diperlukan.
  
Contoh berikut menghitung berapa kali pengguna telah mengklik tombol. Dalam kode ini string nilai dikonversi menjadi angka untuk dapat meningkatkan counter :


The sessionStorage Object
  
Objek sessionStorage sama dengan objek localStorage , kecuali bahwa itu menyimpan data hanya untuk satu sesi . Data tersebut dihapus ketika pengguna menutup tab browser tertentu.
Contoh berikut menghitung berapa kali pengguna telah mengklik tombol , dalam sesi saat ini :




 
 Sumber : http://www.w3schools.com

HTML Tag Reference

♠ Posted by Unknown

HTML Tag Reference




Tag
Decription
<!--…--> Mendefinisikan komentar
<!DOCTYPE> Mendefinisikan jenis dokumen
<a> Mendefinisikan Hyperlink
<abbr> Mendefinisikan sebuah singkatan atau akronim
<acronym> Tidak didukung di HTML5. Gunakan <abbr> sebagai gantinya. Mendefinisikan sebuah akronim
<address> Mendefinisikan informasi kontak untuk penulis /pemilik dokumen
<applet> Tidak didukung di HTML5. Gunakan <embed> atau <object> sebagai gantinya. Mendefinisikan sebuah applet tertanam
<area> Mendefinisikan area didalam gambar-peta
<article> Mendefinisikan sebuah artikel
<aside> Mendefinisikan konten selain dari konten halaman
<audio> Mendefinisikan konten suara
<b> Mendefinisikan teks tebal
<base> Mendefinisikan basis URL/target untuk semua URL relatif dalam dokumen
<basefont> Tidak didukung di HTML5. Gunakan CSS sebagai gantinya. Menentukan warna default, ukuran dan font untuk semua teks dalam dokumen
<bdi> Isolat bagian dari teks yang mungkin diformat dalam arah yang berbeda dari teks lain diluar itu
<bdo> Menimpa arah teks saat ini
<big> Tidak didukung di HTML5. Gunakan CSS sebagai gantinya. Mendefinisikan teks besar
<blockquote> Mendefinisikan bagian yang dikutip dari sumber lain
<body> Mendefinisikan tubuh dokumen
<br> Mendefinisikan garis istirahat tunggal
<button> Mendefinisikan sebuah tombol diklik
<canvas> Digunakan untuk menggambar grafik, dengan cepat, melalui scripting (JavaScript biasanya)
<caption> Mendefinisikan sebuah caption tabel
<center> Tidak didukung di HTML5. Gunakan CSS sebagai gantinya. Mendefinisikan teks berpusat
<cite> Mendefinisikan judul karya
<code> Mendefinisikan sepotong kode komputer
<col> Menentukan sifat kolom untuk setiap kolom dalam <colgroup> elemen
<colgroup> Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat
<datalist> Menentukan daftar yang telah ditentukan pilihan untuk kontrol input
<dd> Mendefinisikan deskripsi /nilai istilah dalam daftar deskripsi
<del> Mendefinikan teks yang telah dihapus dari dokumen
<details> Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan
<dfn> Merupakan contoh mendefinisikan istilah
<dialog> Mendefinisikan sebuah kotak dialog atau jendela
<dir> Tidak didukung di HTML5. Gunakan <ul> sebagai gantinya. Mendefinisikan daftar direktori
<div> Mendefinisikan sebuah bagian dalam sebuah dokumen
<dl> Mendefinisikan daftar deskripsi
<dt> Mendefinisikan istilah/nama dalam daftar deskripsi
<em> Mendefinisikan teks menekankan
<embed> Mendefinisikan sebuah wadah untuk (non-HTML) aplikasi luar
<fieldset> Kelompok unsur yang tekait dalam bentuk
<figcaption> Mendifinisikan sebuah caption untuk <figure> elemen
<figure> Menentukan konten mandiri
<font> Tidak didukung di HTML5. Gunakan CSS sebagai gantinya. Mendefinisikan font, warna, dan ukuran untuk teks
<footer> Mendefinisikan footer untuk dokumen atau bagian
<form> Mendefinisikan sebuah form HTML untuk input pengguna
<frame> Tidak didukung di HTML5. Mendefinisikan sebuah jendela (frame) dalam sebuah frameset
<frameset> Tidak didukung di HTML5. Mendefinisikan satu set frame
<h1> to <h6> Mendefinisikan judul HTML
<head> Mendefinisikan informasi tentang dokumen
<header> Mendefinisikan sebuah header untuk dokumen atau bagian
<hr> Mendefinisikan perubahan tematik dalam konten
<html> Mendefinisikan root dari suatu dokumen HTML
<i> Mendefinisikan sebuah bagian dari teks dengan suara alternatif atau suasana hati
<iframe> Mendefinisikan sebuah frame inline
<img> Mendefinisikan gambar
<input> Mendefinisikan kontrol input
<ins>
Mendefinisikan teks yang telah dimasukkan ke dalam dokumen
<kbd>
Mendefinisikan input keyboard
<keygen>
Mendefinisikanbidang kunci-pasangan Generator (untuk bentuk)
<label>
Mendefinisikan label untuk sebuah <input> elemen
<legend>
Mendefinisikan sebuah caption untuk <fieldset> elemen
<li>
Mendefinisikan sebuah item daftar
<link>
Mendefinisikan hubungan antara dokumen dan sumber daya eksternal (paling digunakan untuk link ke style sheets)
<main>
Menentukan isi utama dokumen
<map>
Mendefinisikan client-side image-map
<mark>
Mendefinisikan ditandai /teks yang disorot
<menu>
Mendefinisikan daftar /menu perintah
<menuitem>
Mendefinisikan item perintah /item menu bahwa pengguna dapat memanggil dari menu popup
<meta>
Mendefinisikan metadata tentang dokumen HTML
<meter>
Mendefinisikan pengukuran saklar dalam kisaran dikenal (gauge)
<nav>
Mendefinisikan link navigasi
<noframes>
Tidak didukung di HTML5. Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung frame
<noscript>
Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung script sisi klien
<object>
Mendefinisikan sebuah objek tertanam
<ol>
Mendefinisikan daftar memerintahkan
<optgroup>
Mendefinisikan kelompok pilihan yang terkait dalam daftar drop-down
<option>
Mendefinisikan pilihan dalam daftar drop-down
<output>
Mendefinisikan hasil perhitungan
<p>
Mendefinisikan sebuah paragraf
<param>
Mendefinisikan parameter untuk objek
<pre>
Mendefinisikan teks terformat
<progress>
Merupakan kemajuan tugas
<q>
Mendefinisikan sebuah kutipan singkat
<rp>
Mendefinisikan apa yang ditampilkan di browser yang tidak mendukung penjelasan ruby
<rt>
Mendefinisikan sebuah penjelasan /pengucapan karakter (untuk tipografi Asia Timur)
<ruby>
Mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur)
<s>
Mendefinisikan teks yang tidak lagi benar
<samp>
Mendefinisikan contoh keluaran dari program komputer
<script>
Mendefinisikan sebuah script sisi klien
<section>
Mendefinisikan sebuah bagian dalam sebuah dokumen
<select>
Mendefinisikan sebuah daftar drop-down
<small>
Mendefinisikan teks kecil
<source>
Mendefinisikan sumber beberapa media untuk elemen media (<video> dan <audio>)
<span>
Mendefinisikan sebuah bagian dalam sebuah dokumen
<strike>
Tidak didukung di HTML5. Gunakan <del> atau <s> sebagai gantinya. Mendefinisikan teks strikethrough
<strong>
Mendefinisikan teks penting
<style>
Mendefinisikan informasi style untuk dokumen
<sub>
Mendefinisikan teks subscript
<summary>
Mendefinisikan judul terlihat untuk <rincian> elemen
<sup>
Mendefinisikan teks superscripted
<table>
Mendefinisikan sebuah tabel
<tbody>
Grup isi tubuh dalam sebuah tabel
<td>
Mendefinisikan sel dalam sebuah tabel
<textarea>
Mendefinisikan kontrol masukan multiline (text area)
<tfoot>
Grup konten footer di meja
<th>
Mendefinisikan sel header tabel
<thead>
Grup isi header dalam sebuah tabel
<time>
Mendefinisikan tanggal/waktu
<title>
Mendefinisikan judul untuk dokumen
<tr>
Mendefinisikan baris dalam tabel
<track>
Mendefinisikan trek teks untuk elemen media (<video> dan <audio>)
<tt>
Tidak didukung di HTML5. Gunakan CSS sebagai gantinya. Mendefinisikan teks teletype
<u>
Mendefinisikan teks yang harus gaya yang berbeda dari teks biasa
<ul>
Mendefinisikan daftar unordered
<var>
Mendefinisikan variabel
<video>
Mendefinisikan sebuah video atau film
<wbr>
Mendefinisikan kemungkinan line-break

Sumber : http://www.w3schools.com/

Kerja Bakti di BLC Telkom Klaten

♠ Posted by Unknown

Kerja Bakti di BLC Telkom Klaten

       Kemarin salah satu siswa prakerin BLC Telkom Klaten mengutarakan bahwa mereka ingin bekerja bakti di BLC Telkom kepada Pengurus Harian BLC Telkom Klaten (Septia R Wulansari), Kemudian dengan pengurus Harian menyetujuinya dan siswa-siswi prakerin juga bersepakat untuk ikut bekerja bakti. Berikut adalah beberapa foto yang diambil pada saat sedang kerja bakti.






Membantu Pelatihan "INTERNET MARKETING" dari PHDI Kab. Klaten

♠ Posted by Unknown

Membantu Pelatihan "INTERNET MARKETING" dari PHDI Kab. Klaten


Dalam internet marketing ini kita memiliki konsep yang menjelaskan dari dasar terlebih dahulu. Berikut urutan alurnya :

1. Kita mengenalkan terlebih dahulu yaitu BLC Telkom Klaten
2. Pengenalan internet
3. Internet sehat
4. Cara pembuatan blog dan pengelolaan blog