MACAM-MACAM CSS

Assalamualaikum Wr. Wb

Hello guys !!!!

Disini kami akan membahas tentang pengertian css dan versi-versinya

CSS merupakan singkatan dari Cascading Style Sheet adalah salah satu bahasa pemograman web untuk mengendalikan beberapa komponen dalam suatu web. Sama halnya dengan pengolahan kata pada Microsoft Word yang dapat mengatur beberapa style, contohnya heading, subbab, bodytext, images, footer, dan style lainnya. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

Dengan CSS kita dapat mengendalikan ukuran gambar, warna bagian tubuh pada text, warna tabel, ukuran border, spasi antar paragraf, spasi antar text, ukuran text, bentuk text, margin kiri, margin kanan, margin atas, margin bawah, warna mouse over, dan parameter lainnya.

CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada performatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan, dan yang terakhir CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel/table layout dan media tipe untuk printer. Kehadiran CSS yang kedua diharapkan lebih baik dari versi pertama.

CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border -radius, drop- shadow, border -image, CSS Object Model, dan CSS Math.

Demikian pembahasan kami tentang CSS dan versi- versinya dan terima kasih telah membaca postingan dari kami, dan semoga postingan ini dapat membantu teman- teman sekalian dalam belajar.

kalo lo belom ngerti klik disini!

PENGERTIAN DAN SEJARAH HTML

HTML?? ada yang tau HTML?? HTML adalah bahasa pemrograman web yang sering digunakan..
nah situs situs yang sudah banyak anda kunjungi sebagian besar menggunakan bahasa pemrograman HTML…

1. pengertian html
   HTML adalah singkatan dari Hyper Text Markup Language yaitu suatu metode untuk mengimplementasikan (mengubah)  konsep hypertext dalam suatu naskah atau dokumen. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.
   HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).  nah,itulah sekilas pengertian HTML selanjutnya kita akan membahas awal mula perkembangan HTML.
2. Awal Mula Perkembangan HTML                                                                                           Selamat siang para pembaca. siang ini saya akan menjelaskan sedikit tentang HTML. Pasti kalian sudah pada tau HTML kn??? Disini saya akan menjelaskan sedikit tentang sejarah dan perkembangan HTML. Semua pasti penasaran kan…..langsung saja yuk kita liat d TKP…

Sejarah HTML diciptakan oleh Timothy John  Berners-lee Robert   dan pertama dipopulerkan oleh browser mosaic ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa) mengusulkan dan menyusun ENQUIRE, sebuah sistem untuk ilmuwan CERN dalam membagi dokumen. Pada saat itu Tim Barners Lee sedang menjalankan sebuah proyek yang berbasiskan konsep hypertext untuk memfasilitasi pembagian dan pembaharuan informasi diantara para peneliti, tujuan awalnya adalah agar setiap peneliti dapat melakukan share atau membagikan ilmu terhadap apa yang telah ditemukan selama proses penelitian, berkat bantuan dari Robert Cailliau akhirnya prototipe bernama Enquire tercipta dari sinilah Sejarah HTML dan Perkembangan HTML5 dimulai . Tim Berners-Lee menciptakan HTML pada tahun 1989 sebagai cara sederhana namun efektif untuk mengkodekan dokumen elektronik. Bahkan, tujuan awal dari web browser adalah untuk melayani pembaca untuk membuka dokumen berformat HTML.
Dulunya web hanya berisi teks,sehingga terkesan monoton dan tidak menarik,seperti file.txt dalam mengaksesnya user menggunakan sebuah
terminal hal itu sangat tidak menyenangkan Sedangkan sekarang web sudah sangat berbeda,web yang sekarang sering kita lihat dalam situs-situs dilengkapi dengan audio dan background animasi yang menarik untuk dilihat. Bahkan sudah banyak sekali website yang berisi kumpulan video  yang bisa kita download dengan mudah seperti website oplovers, kurogaze, samehadaku, mangaku, animesubindo, wibudesu,dll yang menjadi tempat ngumpulnya para penikmat anime untuk mendownload anime kesukaann.

kalo lo belom ngerti klik disini!

BAHASA PEMOGRAMAN BOOTSTRAP

assalamualaikum wr.wb

Baiklah teman-teman kali ini kita akan membahas tentang Apa Itu BOOTSTRAP?

CEKIDOUT…

Mari Kita Bahas Teman-teman:)

sebenarnya Bahasa pemograman Bootstrap di gunakan untuk membantu pekerjaan kita dalam membuat sebuah website

Bahasa Pemograman Boostrap adalah bahasa pemograman front-end framework yang sangat bagus dan luar biasa yang sangat mengedepankan untuk pemakaian melalui mobile device contoh nya seperti:Handphone,smartphone,dsb.Di dalam Bootstrap sendiri mencakup atau menyediakan beberapa contoh bahasa pemograman lainnya seperti:HTML,CSS, dan Javascript yang siap di gunakan dan bisa untuk dikembangkan teman-teman.

Untuk apa itu BOOTSTRAP?

sebenarnya tujuan utamanya itu digunakan untuk memudahkan atau meringankan pekerjaan kita di dalam membuat website.bila secara rinci Bootstrap juga digunakan untuk membangun sebuah desain web secara responsive,arti dari responsive itu sendiri adalah yang dimana tampilan web nya di sesuaikan ukuran layar dari browser yang kita gunakan bisa melalui desktop,tablet maupun mobile device tetapi mode bisa kita aktifkan maupun di nonaktifkan sesuai keinginan kita teman-teman,.jadi,bila teman-teman ingin mengaktifkan mode ini maka tampilan web teman-teman akan mengikuti ukuran brower yang teman-teman gunakan tetapi bila teman-teman ingin meng-nonaktifkan mode ini maka tampilan web nya tidak akan mengikuti ukuran browernya.biasanya bila mode nya di nonaktifkan tampilan web teman-teman tidak bisa beradaptasi sesuai layar.Dengan menggunakan Bootsrap teman-teman bisa membuat sebuah web yang dinamis maupun statis.

bila teman-teman ingin belajar Bootsrap berikut langkah-langkah nya bagi pemula:

1. Teman -teman Harus memiliki file distribusi Bootstrap
2. Download jQuery Library Untuk Bekerja Offline
3. Teman-teman harus memiliki code editor.
4. selanjutnya teman-teman bisa memulai nya sendiri

Memang bagi pemula Bootstrap agak sulit untuk memahami tetapi bila sudah dipelajari dengan serius dan teliti insya Allah bisa mudah Menggunakan nya.

baiklah teman-teman sekian pembahasan kita tentang Bootstrap semoga bisa bermanfaat bagi teman-teman dan bisa dimengerti.Apabila ada kata-kata yang sulit dimengerti mohon kiranya teman-teman untuk mengerti dan memaklumkan kami yang baru belajar ini.karena kita sama-sama ingin belajar dan sukses dalam pendidikan.

thank you for attention

bila ada jarum yang patah

jangan disimpan di dalam peti

bila ada kata yang salah

jangan disimpan di dalam hati.

menerima komentar dan kritik yang sopan ya teman-teman:)

ok sampai jumpa di pembahasan kita selanjutnya.see you

wassalamualaikum wr.wb

kalo lo belom ngerti klik disini!

PENGERTIAN BOOTSTRAP

Assalamu’alaikum

Apa kabar teman ?, baiklah kali ini kami akan menjelaskan tentang Bootstrap. Pernah dengar gak??,

Sebelum mengetahui apa itu bootstrap,kita akan mengenal terlebih dahulu sejarahnya.

Bootstrap dibuat pada tahun 2011 oleh dua orang programer twitter yang bernama mark octo dan jacob thornton, saat itu bootstrap digunakan di lingkungan internal twitter. Nama lain dari Bootstrap adalah Twitter Bootstrap.

Pada januari 2012, Bootstrap merilis versi 2.0 yang didalamnya sudah memasukkan fitur responsive layout, sejak itu popularitas Bootstrap tak tertahankan lagi dan sampai saat ini Bootstrap merupakan projek GitHub yang paling  banyak di copy (forked) yaitu seitar18.500 kali.

Jadi, pengertian Bootstrap adalah suatu framework yang isinya terdapat komponen-komponen dasar web yang dirancang sedemikian rupa untuk digunakan secara bersama.Bootstrap juga digunakan untuk membuat layout halaman , serta momodifikasinya.Perangkat yang juga dapat membuat website yang sederhana.

Untuk menggunakan Bootstrap yang harus pertama kali dilakukan adalah instalasi bootsrtrap dengan mendownload di website resminya di http://getbootstrap.com/getting-started/

Baik, untuk bisa menggunakan Bootstrap berikut ini langkah-langkahnya:

1. DOWNLOAD FILE BOOTSTRAP

Untuk memulainya, pertama-tama kita harus mendownload file Bootstrap terlebih di http://getbootstrap.com/getting-started/.

Kemudian klik tombol Download Bootstrap yang paling kiri. FYI, di situ kan ada beberapa jenis file Bootstrap yang bisa didownload, untuk sementara abaikan saja dulu. Dua tombol sisanya itu merupakan pembahasan yang terpisah 

Setelah selesai mendownload maka kita akan mendapatkan sebuah file zip dengan nama bootstrap-3.3.6-dist.zip.

2. EKSTRAK FILE BOOTSTRAP

Selanjutnya ekstraklah file Bootstrap yang telah didownload tadi (bootstrap-3.3.6-dist.zip) kemudian simpan di sebuah folder tertentu. Akan muncul sebuah folder dengan nama bootstrap-3.3.6-dist dan di dalamnya ada beberapa folder lagi yaitu css, js dan fonts. Jika file Bootstrap yang kamu download sama versinya dengan saat tulisan ini dibuat, maka kurang lebih seperti berikut isi file bootstrap-3.3.6-dist.zip yang telah diekstrak tadi.

bootstrap-3.3.6-dist/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2

3. BUATLAH SEBUAH FILE

Selanjutnya, buatlah sebuah file sebagai bahan percobaan. Misalnya dengan nama index.html, simpan file tersebut di dalam folder bootstrap-3.3.6-dist tadi, kemudian tuliskan kode berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <h1>Hello, world!</h1>

      <p><button class="btn btn-primary btn-lg">SAMPLE BUTTON</button></p>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Kode di atas merupakan format standar Bootstrap. Yang perlu diperhatikan adalah:

1. PASTIKAN LINK STYLESHEET BOOTSTRAP MENGARAH PADA PATH YANG TEPAT DIMANA FILE CSS BOOTSTRAP BERADA, RELATIVE TERHADAP FILE HTML YANG MEMANGGILNYA.

<link href="css/bootstrap.min.css" rel="stylesheet">

Karena kebetulan file index.html yang kita buat berada di dalam folder bootstrap-3.3.6-dist dan di dalamnya langsung bersisi file Bootstrap, maka kita tulis css/bootstrap.min.css.

2. PASTIKAN JUGA SCRIPT JAVASCRIPT BOOTSTRAP MENGARAH PADA PATH YANG TEPAT DIMANA FILE JAVASCRIPT BOOTSTRAP BERADA, RELATIVE TERHADAP FILE HTML YANG MEMANGGILNYA.

<script src="js/bootstrap.min.js"></script>

Karena pada contoh kita, file index.html yang kita buat di dalam folder bootstrap-3.3.6-dist dan di dalamnya sudah ada file Bootstrap, maka path-nya bisa kita tulis js/bootstrap.min.js. Jika nanti kamu membuat file index.html nya tidak seperti path yang kita buat di atas nggak usah masalah, tinggal disesuaikan saja path-nya.

3. PASTIKAN JQUERY TERPANGGIL

Bootstrap membutuhkan JQuery agar berjalan dengan sempurna. Karena JavaScript-nya Bootstrap tidak akan bekerja jika tidak ada JQuery. So, pastikan JavaScript-nya terpanggil dengan baik. Sebagai contoh di atas, kita panggil JQuery langsung dari library-nya Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Sebenernya kamu bisa juga sih memanggil JQuery-nya offline (karena mungkin aplikasi kamu tidak harus online) yaitu dengan download file JQuery-nya terlebih dahulu, itu bebas-bebas saja.

Oke, jika semuanya sudah aman, coba silahkan buka file index.html yang tadi dibuat dengan menggunakan browser. Jika tampilannya sudah seperti berikut, maka itu artinya kamu telah berhasil menginstall Bootstrap pada halaman web yang kamu buat.

Demikianlah penjelasan dari kami, semoga bermanfaat 

Wassalamu’alaikum

 kalo lo belom ngerti klik disini!

MACAM MACAM JENIS HTML?

Macam-macam jenis Tag HTML beserta fungsi

Assalamualaikum wr. wb.

Sebelum menjelaskan tentang macam-macam tag HTML, kami akan sedikit menjelaskan pengertian dari HTML. HTML atau Hyper Text Markup Language adalah sebuah bahasa pemograman yang digunakan untuk membuat suatu web yang menampilkan sebuah informasi. Tag HTML sendiri adalah kata kunci yang berada di antara kurung sudut. Tag HTML juga mempunyai suatu fungsi, yaitu untuk membuat suatu web menjadi lebih menarik dan lebih hidup. Sedangkan untuk macam-macam jenis tag HTML akan saya jelaskan dibawah ini :

<!– … –>

Digunakan untuk memberi sebuah komentar atau keterangan. Kalimat yang terletak pada kontiner ini tidak akan terlihat pada browser

<!DOCTYPE>

Mendefinisikan informasi tipe dokumen

<a>

Mendefinisikan sebuah anchor, tetapi lebih tepat jika diartikan sebagai tautan dikarenakan tautan ini digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain

<abbr>

Digunakan untuk menguraikan satu ungkapan yang disingkat dan Anda dapat memberikan informasi bermanfaat kepada penelusur-penulusur page source(halaman sumber kode) / pembaca layar, sistem terjemahan dan mesin pencari yang berasal dari singkatan yang sudah diuraikan, tetapi saat di browser uraian tersebut tidak akan tampil dan hanya sebagai informasi saja

<acronym>

Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag <abbr>

<address>

Mendefinisikan informasi kontak untuk penulis/pemilik dokumen

<applet>

Digunakan untuk memasukan file java kedalam dokumen HTML

<area />

Mendefinisikan daerah yang dapat diklik (link) pada peta gambar

<b>

Membuat teks tebal

<base />

Mendefinisikan URL dasar/target untuk semua URL relatif dalam dokumen

<basefont />

Membuat atribut teks default, seperti warna, ukuran, jenis font untuk semua teks dalam dokumen

<bdo>

Digunakan untuk menimpa arah teks

<big>

Memperbesar ukuran teks sebesar satu point dari defaultnya

<blink>

Membuat teks berkedip

<blockquote>

Mendefinisikan sebuah kutipan panjang. Pada saat di browser teks akan tampil menjorok kedalam

<body>

Mendefinisikan body/isi dokumen HTML, berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan di web browsernya. Isi dokumen tersebut dapat berupa teks, gambar, animas, link dan seterusnya

<br />

Memberi baris baru/pindah baris

<button>

Mendefinisikan sebuah tombol diklik

<caption>

Membuat caption pada tabel

<center>

Untuk perataan tengah terhadap teks atau gambar

<cite>

Mendefinisikan kutipan

<code

Mendefinisikan sebuah bagian dari kode komputer

<col />

Mendefinisikan nilai atribut dari satu kolom atau lebih dalam sebuah tabel

<colgroup>

Menentukan kelompok dari satu kolom atau lebih dalam sebuah tabel untuk performatan

<dd>

Mendefinisikan deskripsi dari item dalam daftar definisi

<del>

Untuk memberi garis tengah pada teks/mencoret teks

<dfn>

Mendefinisikan sebuah istilah definisi

<dir>

Mendefinisikan sebuah daftar direktori

<div>

Mendefinisikan sebuah section dalam dokumen

<dl>

Mendefinisikan sebuah daftar definisi

<dt>

Mendefinisikan istilah (item) dalam daftar definisi

<em>

Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring

<embed>

Digunakan untuk memasukkan file video atau file musik

<fieldset>

Untuk mengelompokkan elemen-elemen yang terkait dalam form / membuat seperti frame-box di dalam form

<font>

Mendefinisikan jenis font, warna dan ukuran untuk teks

<form>

Mendefinisikan sebuah form HTML untuk input form

<frame />

Mendefinisikan frame dalam fremeset

<frameset>

Mendefinisikan satu set frame

<h1> to <h6>

Digunakan untuk menunjukkan awal dari suatu header/judul dari dokumen HTML tersebut.

<head>

Digunakan untuk memberikan informasi tentang dokumen tersebut

<hr />

Membuat garis horisontal

<html>

Mendefinisikan root dari suatu dokumen HTML

<i>

Membuat teks miring

<iframe>

Mendefinisikan sebuah inline frame

<img />

Berfungsi untuk menampilkan gambar pada dokumen HTML

<input />

Mendefinisikan input field pada form

<ins>

Membuat teks bergaris bawah

<kbd>

Mendefinisikan teks yang di input dari keyboard

<label>

Mendefinisikan label untuk sebuah elemen <input>

<legend>

Mendefinisikan sebuah caption untuk elemen <fieldset>

<li>

Digunakan untuk menampilkan informasi dalam bentuk item daftar

<link />

Mendefinisikan hubungan antara dokumen dan sumber eksternalnya

<listing>

Fungsi tag ini sama dengan tag <pre> dan dianjurkan menggunakan tag <pre> karena tag <listing> tidak layak/diprotes

<map>

Mendefinisikan client-side peta gambar

<marquee>

Membuat teks berjalan secara vertikal atau horisontal

<menu>

Mendefinisikan sebuah daftar menu

<meta />

Mendefinisikan metadata tentang sebuah dokumen HTML

<nobr>

Mencegah ganti baris pada teks atau gambar

<noframes>

Jika browser user tidak mendukung frame

<noscript>

Jika browser user tidak mendukung client-side scripts

<object>

meletakkan embed sebuah objek

<ol>

Mendefinisikan daftar dalam format penomoran

<optgroup>

Menampilkan beberapa pilihan yang sudah dikelompokkan dalam bentuk sebuah daftar drop-down

<option>

Menampilkan beberapa pilihan yang berbentuk dalam sebuah daftar drop-down

<p>

Membuat sebuah paragraf

<param />

Mendefinisikan sebuah parameter untuk objek

<pre>

Membuat teks dengan ukuran huruf yang sama

<q>

Mendefinisikan sebuah kutipan singkat

<s>

Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del> tetapi tag <s> tidak dianjurkan sebagai gantinya menggunakan tag <del>

<samp>

Mendefinisikan contoh keluaran dari program komputer

<script>

Mendefinisikan client-side script

<select>

Membuat daftar drop-down

<small>

Memperkecil ukuran teks dari ukuran defaultnya

<span>

Mendefinisikan sebuah section dalam dokumen

<strike>

Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del>

<strong>

Membuat teks tebal, fungsi tag ini sama dengan tag <b>

<style>

Mendefinisikan informasi style untuk dokumen HTML

<sub>

Memberikan efek subscript pada teks

<sup>

Memberikan efek superscript pada teks

<table>

Membuat tabel

<tbody>

Untuk mengelompokkan isi body di dalam sebuah tabel

<td>

Mendefinisikan sel di dalam sebuah tabel

<textarea>

Mendefinisikan sebuah kontrol input multiline

<tfoot>

Untuk mengelompokkan isi footer di dalam sebuah tabel

<th>

Mendefinisikan sel header di dalam  sebuah tabel

<thead>

Untuk mengelompokkan isi header di dalam sebuah tabel

<title>

Membuat judul untuk dokumen HTML

<tr>

Membuat baris di dalam sebuah tabel

<tt>

Mendefinisikan teletype text

<u>

Membuat teks bergaris bawah, fungsi tag ini sama dengan tag <ins> tetapi tag <u> tidak dianjurkan untuk kategori HTML text formatting melainkan termasuk kategori HTML Style

<ul>

Mendefinisikan daftar dalam format bullet

<var>

Mendefinisikan sebuah variabel

<xmp>

Mendefinisikan preformatted text, fungsi tag ini sama dengan tag <pre>

Terima Kasih atas perhatiannya. Semoga ilmu yang saya berikan bermanfaat untuk teman-teman. Wassalamualaikum wr. wb.

kalo lo belom pada ngerti klik disini!