Pengenalan CSS Dasar


Setelah sebelumnya sobat PP mempelajari Pengenalan HTML, langkah selanjutnya saya akan membahas tentang Pengenalan CSS Dasar. Dimana CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya, “HTML for content, CSS for Presentation”.

Sedikit pengertian tentang CSS,  CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.

Fungsi dan Kegunaan CSS

Awal mula diperlukannya CSS dikarenakan kebutuhan akan halaman web yang semakin kompleks. Pada awal kemunculan HTML, kita bisa membuat suatu paragraf bewarna merah dengan menulis langsung kode tersebut didalam tag HTML, atau membuat latar belakang sebuah halaman dengan warna biru. Contoh kode HTML untuk hal itu adalah sebagai berikut :



Hasil dari eksekusi di atas adalah :



Saya menggunakan tag <font> untuk membuat beberapa kata di dalam paragraf tersebut berwarna merah. Hal ini tidak salah, dan semuanya berjalan sesuai keinginan. Untuk sebuah artikel yang memiliki 5 paragraf, kita tinggal copy-paste tag <font color=”red”> pada kata-kata tertentu.

Namun setelah website tersebut memiliki katakanlah 50 artikel seperti diatas, dan karena sesuatu hal anda ingin merubah seluruh text merah tadi menjadi biru, maka akan dibutuhkan waktu yang lama untuk mengubahnya satu persatu, halaman per halaman.

Dalam kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten. Untuk paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:


Hasil eksekusi diatas adalah :



Dalam contoh CSS diatas, saya mengubah tag <font> menjadi tag <span>. Tag <span> sendiri merupakan tag yang tidak bermakna, namun bisa di kostumasi menggunakan CSS. Tag span saya tambahkan dengan atribut atribut class=”warna”. Atribut class berguna untuk memasukkan kode CSS pada tag <style> di bagian head.

Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal mengubah isi dari CSS color: red menjadi color:blue, dan seluruh tag yang memiliki class=”warna” akan otomatis berubah menjadi biru.

 Untuk penjelasan lebih lanjut mengenai CSS, sobat bisa simak vidio dibawah ini :



Simak vidio yang ini juga sobat :



Jika sobat mau download vidionya bisa klik
DISINI

Sekian dulu pembahasan tentang  Pengenalan CSS Dasar. Sampai jumpa di pembahasan selanjutnya.

Salam Koding..!!!

Elemen Image


Halo..Sobat PP kali ini kita akan mempelajari tentang Elemen Image dan Object pada HTML. Tanpa basa basi kita langsung aja ya sobat. Kalau kebanyakan penjelasan takut nanti sobat malah pusing heheheh..


  1. Elemen IMG
          Elemen IMG digunakan untuk mendefinisikan wadah gambar pada dokumen.

          Contoh :



Keterangan :


  1. Untuik elemen yang di dalam kotak warna biru, merupakan alternatif jika gambar tidak bisa muncul. Jadi apabila gambar tiak bisa muncul, maka yang nampak adalah berupa tulisan dengan keterangan 'gambar'.


Untuk lebih jelasnya dalam menapilkan gambar pada HTML silahkan sobat simak vidio di bawah ini.

Atau jika sobat mau mendownload vidionya bisa klik DISINI

Ini vidionya :



Sekian dulu pembahasan kita tentang Elemen Image

Salam Koding

Pengenalan JavaScript




Halo sobat PP, kali ini kita akan sedikit membahas tentang Pengenalan JavaScript. Sebelum belajar lebih jauh kita pahami dulu apa itu JavaSript. Sobat bia lihat penjelasannya didawah ini.  

JavaScript adalah bahasa pemograman yang digunakan untuk menambahkan fitur interaktif pada website anda, seperti ketika ingin membuat game, melakukan perubahan ketika mengklik tombol, efek dinamik, animasi, dan masih banyak lagi. Tutorial ini adalah dasar dari JavaScript yang akan memberikan gambaran apa yang bisa anda buat dengan JavaScript.

Apakah JavaScript yang Sebenarnya?

JavaScript adalah bahasa pemograman yang sangat matang dan dapat dikolaborasikan dengan dokumen HTML dan digunakan untuk membuat website yang interaktif. JavaScript diciptakan oleh Brendan Eich yang juga co-founder dari Mozilla project, Mozilla Foundation dan Mozilla Corporation.
Anda dapat melakukan banyak hal dengan JavaScript. Anda akan memulai dari fitur sederhana seperti menentukan layout, membuat respon ketika mengkil button, caousels, dan gallery gambar. Namun pada akhirnya ketika anda sudah mendapat banyak pengetahuan anda juga akan dapat membuat game, animasi 2D dan 3D, aplikasi yang berhubungan dengan database, dan masih banyak lagi.
JavaScript sendiri adalah bahasa yang cukup komplek namun sangat fleksibel, dan banyak Developer (Programmer) telah menyediakan tool yang berdiri diatas core JavaScript agar anda dapat menggunakan fungsi - fungsi ekstra, tool tersebut sebagai berikut :
  • Application Programming Interfaces (APIs) dibangun pada web browser agar memungkinkan anda melakukan apapun dari dinamik dokumen HTML dan set CSS yang anda buat, untuk menangkap dan memodifikasi video dari web cam, atau membuat animasi 3D dan sampel audio.
  • 3rd party APIs menyediakan akses bagi Developer untuk menghubungkan aplikasi mereka pada website atau aplikasi lain layaknya facebook dan twitter. Pernahkan anda login soundcloud dengan facebook ? itu 3rd party APIs.
  • 3rd party frameworks dan libraries dapat digabungkan pada HTML sehingga memungkinkan Developer membangun website atau aplikasi dengan cepat.

Contoh "Hello World"

Judul diatas terdengar menarik bukan ?. JavaScript adalah salah satu bahasa yang sangar menarik dari banyak teknologi web yang lain. dan jika anda mengikuti tutorial ini dengan baik, anda dapat menambahkan dimensi baru dan hal lain yang kreatif pada website anda.
Namun, JavaScript sedikit lebih rumit dari pada HTML dan CSS, dan anda akan belajar sedikit demi sedikit, dan tetaplah belajar pada langkah-langkah kecil yang kami berikan. Untuk memulainya, kami akan menunjukkan bagaimana cara menambah beberapa skrip JavaScript yang sangat sederhana pada halaman Anda, yakni dengan contoh cara membuat "Hello, world!" (contoh standar pada dasar pemrograman.)
Penting: Jika anda belum mengikuti semua kursus kami, download contoh kode berikut dan gunakan untuk memulai.
Catatan: Alasan kita menepatkan elemen <script> di bawah file html adalah ketika HTML di muat oleh browser untuk ditampilkan pada sebuah file. Jika JavaScript dimuat pertama kali dan seharusnya mempengatuhi HTML di bawahnya, kemungkinan ini tidak bisa bekerja, oleh karena itu JavaScript dimuat sebelum HTML bekeja seperti seharusnya. Oleh karena itu, strategi yang terbaik biasanya adalah di bawah halaman.
  • Pertama-tema, buka situs percobaan anda, dan buatlah sebuah file baru bernama main.js. Simpan di dalam folder scripts.
  • Selanjutnya, buka file index.html Anda, dan masukkan elemen berikut pada sebuah baris bari sebelum tag penutup </body>:
    <script src="scripts/main.js"></script>. 
    Ini sama halnya dengan cara kerja elemen <link> untuk CSS — ini menempatkan JavaScript ke halaman, sehingga dapat memberikan pegaruh pada HTML (CSS, dan lainnya pada halaman).


  • Sekarang tambahkan ode berikut pada file main.js:
    var myHeading = document.querySelector('h1');
    myHeading.innerHTML = 'Hello world!';

  • Sekarang pastikan file HTML dan JavaScript disimpan, dan muat index.html di browser. Anda seharusnya mendapatkan hasil seperti berikut:

Apa yang Terjadi?

Jadi text heading anda telah diubah menjadi "Hello world!" mengunakan JavaScript. Kita melakukannya dengan menggunakan fungsi querySelector() untuk mendapatkan referensi untuk heading, dan menyimpannya di variabel myHeading. Ini sama halnya seperti yang kita lakukan saat menggunakan CSS selector — kita menginginkan untuk melakukan sesuatu ke sebuah elemen, maka kita perlu memilihnya terlebih dahulu.
Setelah itu, kita tambahkan nilai dari variabel myHeading  properti innerHTML  ( dimana mewakili konten heading) ke "Hello world!".

Segini dulu pengenalan mengenai JavaSript, pada tab selanjutnya saya akan membahas mengenai elemen-elemen apa saja yang ada di javascript.

Salam Koding...!!!

Belajar Bootstrap Untuk Pemula



Apa Itu Bootstrap?

Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.

Untuk Apa itu bootstrap?

Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

Bagaimana Belajar Bootstrap untuk pemula?

Untuk memulai belajar Bootstrap, Anda harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan belajar tersebut. Baiklah langsung saja.

Persiapan:

1. Anda Harus memiliki file distribusi Bootstrap
                   
Untuk menggunakan bootstrap, terlebih dahulu Anda harus mendownload resource file atau file distribusi yang disediakan oleh bootstrap di situs resminya getbootstrap.com. Pada halaman tersebut, terdapat tombol Download Bootstrap sebagaimana terlihat pada gambar diatas, langsung saja! klik tombol tersebut. Kemudian pilih lagi Download Bootstrap
Setelah didownload, kemudian extract menggunakan program seperti 7zip (Gratis) atau winRAR (shareware). Sebetulnya, Anda juga bisa membuka file tersebut dengan aplikasi bawaan windows dengan cara membuka file tersebut, kemudian copy seluruh file dan paste-kan ke folder lain.

2. Download jQuery Library Untuk Bekerja Offline
                    
Untuk bisa mengaplikasikan bootstrap component seperti modal dialog, navigation bar dan lainnya yang membutuhkan boostrap JS, Bootstrap JS juga membutuhkan jQuery library agar bisa berjalan normal. Bootstrap tidak menyertakan jQuery di dalam file download-nya untuk itu, kita harus mendownloadnya secara terpisah. Hal ini dilakukan agar kita bisa bekerja dan menggunakannya secara offline (tanpa koneksi internet). Silahkan download jQuery library dengan menuju situs resmi jQuery Download, pilih jQuery 1.x kemudian, download dengan mengklik link Download the compressed, production jQuery 1.12.0

3. Anda harus memiliki code editor.
                   
Code editor penting sekali untuk memanipulasi file yang akan kita kembangkan khususnya file HTML, CSS dan Javascript sebagaimana file tersebut terdapat pada bootstrap. Anda juga bisa menggunakan Code Editor dari kami yang dibuat untuk tes atau uji coba kode. Jangan pernah menggunakan Word processor (Microsoft Word, dll) ataupun notepad untuk memanipulasi file-file tersebut. Karena aplikasi tersebut tidak cocok dan terdapat banyak kekurangan yang akan membingungkan kita sendiri nantinya.
Ada banyak sekali code editor yang tersebar di internet yang dapat kita gunakan baik yang gratis maupun yang berbayar. Sebagai pemula, tapi saya sangat menyarankan sobat  pake text editor yang bernama 'Sublime text'. Dengan tampilan background warna hitam dan warna-warna koding yang berwarna membuat sobat tidak kebingungan dalam membedakan koding yang satu dengan yang lainnya.


Memulai...

Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Baik, ikuti tahap-tahapnya berikut ini:

1.Buat Folder Baru            
   Buatlah folder baru, beri nama misalkan "Belajar_Bootstrap".

2. Copy seluruh file Bootstrap ke dalam Folder Baru Tersebut
Copy folder css, fonts dan js yang ada pada Bootstrap yang telah kita download tadi, ke dalam folder   baru tersebut (Belajar_Bootstrap)

3. Copy file jQuery ke dalam folder js
Copy dan Gabungkan file jquery-1.12.0.min.js yang telah kita download kedalam folder js punya bootstrap tadi, hal ini dilakukan untuk mempermudah proses pembelajaran.
4. Buat file html


Buat file baru dengan notepadd++ kemudian copy code snippet yang saya sediakan dibawah ini, kemudian save dan berilah nama seperti: index.html atau default.html dan simpanlah file tersebut ke folder "Belajar_Bootstrap" yang telah dibuat diatas. Berikut kodenya:
<!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">
    <title>Bootstrap 3.3.6 Starter Template - by dul.web.id</title>

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

    <!-- HTML5 Shim and Respond.js 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>
    <!-- AWAL CONTENT  -- hapus dari sini kebawah (sampai AKHIR CONTENT) -->
    <div class="container">
      <h1>Apa Kabar Dunia?</h1>
      <!-- Small modal -->
      <button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Klik Aku</button>

      <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">

            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
            </div>
            <div class="modal-body">
              Hai... salam kenal dari <strong>dul</strong>. Jika dialog ini muncul dan Anda bisa baca tulisan ini berarti Bootstrap berhasil di load dan terintegrasi dengan baik. Selamat Belajar
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- AKHIR CONTENT - dari sini kebawah jgn dihapus -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.12.0.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>



Saatnya untuk Uji Coba

Buka file html yang telah dibuat dengan code snippet diatas, buka dengan browser terbaru misalkan Google Chrome atau Firefox jangan gunakan internet explorer. Jika file Bootstrap.css berhasil diload maka tombol button akan memiliki style ala bootstrap seperti ini: Kita coba lagi apakah bootstrap.js berhasil di load dengan cara mengklik tombol tersebut. Apabila muncul dialog box, maka bootstrap.js berhasil di load dan siap digunakan sebagai template. Gunakan template ini untuk setiap materi pembelajaran bootstrap dan hapuslah AWAL CONTENT sampai AKHIR CONTENT untuk memulai file baru kosong tanpa konten.


Elemen Body HTML


Elemen Body di gunakan sebagai tempat untuk menampilkan konten dokumen. Elemen body juga di sebut sebagai layar presentasi, karena setiap perubahan pada elemen Body akan mempengaruhi informasi yang tampil pada browser.

1. Elemen Block
  • Elemen P
          Elemen P digunakan untuk mendefinisikan suatu paragraf, elemen ini berisi nilai Text.
     
          Contoh :


Yang di kotak hijau kanan adalah tag dari elemen 'P' nya. Sementara yang di kotak hijau sebelah kiri adalah hasil eksekusi dari tag elemen 'P'.

  •  Elemen H1,H2,H3
           Elemen H digunakan untuk mendefinisikan suatu judul.

           Contoh :



Sebenarnya untuk elemen 'H' tidak hanya sampai 'H3' saja. Bisa sampai 'H6', sampai ukuran judul yang kita inginkan.

  • Elemen DL
          Elemen DL digunakan untuk mendefinisikan daftar definisi.

          Contoh :



Keterangan :
  1. Elemen 'DT' digunakan untuk mendefinisikan item pada <dl>, secara format 'DT' sejajar ke kiri.
  2. Elemen 'DD' digunakan untuk mendefinisikan item keteranga <dl>, secara format tulisan 'DD' sejajar ke kanan.

  • Elemen OL
          Elemen OL digunakan untuk mendefinisikan daftar dengan menampilkan urutan angka atau     huruf.

 Contoh :



Keterangan :

  1. Elemen 'OL' yang berfungsi untuk mendefinisikan daftar item di dalamnya secara urut.
  2. Elemen 'LI' yang berfungsi untuk mendefinisikan isi item dari 'OL'.
  3. Hasil eksekusi dari elemen 'OL'.



  • Elemen UL
          Elemen 'UL' digunakan untuk mendefinisikan daftar tanpa urutan.

          Contoh :



Keterangan :
  1. Elemen 'UL' yang berfungsi untuk mendefinisikan daftar item di dalamnya secara tidak urut.
  2. Elemen 'LI' yang berfungsi untuk mendefinisikan isi item dari 'UL'.
  3. Hasil eksekusi dari elemen 'UL'.

  • Elemen ADDRESS
          Elemen Address digunakan untuk mendefinisikan Text dalam format alamat.

          Contoh :




  • Elemen BLOCKQUOTE
          Elemen Blockquote digunakan untuk mendefinisikan sebuah kutipan, format text menjorok ke kanan dan memberikan jarak sepasi sebelum dan sesudahnya.

Contoh :




  • Elemen DEL
          Elemen DEL digunakan untuk mendefinisikan text yang tidak digunakan pada dokumen. format penulisan garis di tengah text.

Contoh :



Segini dulu pembelajaran kita ya sobat..nanti kita lanjut lagi.

Salam Koding...!!!

Elemen Head HTML






Elemen head dapat digunakan sebagai tempat penulisan judul dokumen, informasi mengenai dokumen dan referensi alamat
 
a. Elemen Base
Elemen Base digunakan untuk mendefinisikan suatu alamat URL agar browser mengikut sertakan alamat   tersebut.

Contoh :


 b. Elemen Title
Elemen Title digunakan untuk mendefinisikan judul dokumen.

Contoh :


Lihat gambar yang dilingkari hasil isi dari Title berada di taksbar paling atas pada browser.

c. Elemen Script
Elemen Script digunakan untuk mendefinisikan suatu script fungsi. Seperti Javascript, VB script atau mendefinisikan suatu tautan lokasi file script untuk digunakan dokumen.

Contoh :

  

d. Elemen Link
Elemen Link digunakan untuk mendefinisikan style dokumen dan mendefinisikan tautan lokasi file style untuk menggabungkan antara dokumen dengan sumber lainnya.

Contoh :

 

 Untuk penggunaan Elemen link di atas, saya mencontohkan dalam penggunaan link untuk CSS. Yang kotak warna hijau merupakan link untuk memanggil fungsi CSS nya. Sedangkan kotak warna merah merupakan style CSS nya. Untuk Pembahasan mengenai CSS lebih lanjut bisa mengklik tab CSS di blog ini.

Mungkin Sekian dulu pembahasan kita mengenai Elemen Head.

Jika ada pertanyaan atau ada kesalahan mengenai penjelasan saya. Silahkan isi di kolom komentar.
Terima Kasih....Salam koding..!!

Bagaimana Menjadi Seorang Programer ?


Bagaimana Menjadi Seorang Programer ?. Ya, itu lah mungkin yang selalu ada di benak sobat PP sekalian apalagi bagi lulusan Tehnik Informatika sama seperti saya. Jujur walaupun saya lulusan TI tapi masih bingung harus melaju ke arah mana. Sebab begitu tidak singkronnya materi yang di berikan waktu kuliah sama ilmu yang di butuhkan oleh dunia kerja, apalagi para programer selalu di tuntut untuk menguasai segala sesuatu teknologi yang baru terutama dalam bidang programing.

Kadang saya selalu miris apabila melihat lowongan pekerjaan khususnya untuk programer. Para perusahaan menuntut kita yang mempunyai background TI untuk menguasai begitu banyaknya bahasa pemograman. Apalagi ada beberapa perusahaan yang mengsyarati pelamarnya, selain bisa pemograman kita juga harus bisa menguasai jaringan bahkan harus mahir  membetulkan printer beserta perangkatnya.haduuuhh...saya tidak habis fikir. Apakah para perusahaan tidak tahu? kalo dunia IT itu luas,dan mereka punya spesialisasi masing-masing.

Berawal dari kejadian di atas, saya mengejak sobat PP untuk kita belajar berasama di blog ini mengenai pemograman. Bukan maksud saya merasa lebih pintar atau apapun, di blog ini kita bisa saling berbagi.

Dalam pembelajaran programing di blog ini, saya berusaha untuk membuat suasana maupun isi blog ini menjadi meneyenangkan. Seperti yang kita ketahui banyak situs tutorial programing yang isinya membuat kita jenuh tidak pada intinya,sehingga membuat kita malah tambah pusing. Di blog ini kita akan membuat pembelajaran menjadi lebih santai dan ringan.

Dan di blog ini juga saya akan membahas pemograman langsung pada intinya saja. Tanpa Ba..Bi..Bu atau embel-embel teori yang panjang. Yang malah akan menambah bingung sobat sekalian.

Sekedar tips dari saya, agar kita lebih mudah atau cepat bisa menguasai bahasa pemograman. Coba buat suatu project, entah itu aplikasi atau web. Jangan terpaku pada buku atau ebook yg saat ini banyak bertebaran di internet. Terus jangan pernah menghafalkan setiap koding pemograman karena itu akan sia-sia. Yang sobat dapat hanyalah kepala pusing...heheh. Untuk dapat mengusai pemograman harus banyak-banyak latihan, yaitu dengan membuat project. Secara tidak langsung sobat juga sudah menghafal beberapa koding, sehingga makin terbiasa. Dan satu lagi sobat, coba belajar juga melalui vidio tutorial, Insya Allah dengan melihat vidio tutorial kita lebih mengerti mengenai alur pemograman. Untuk vidio tutorialnya Insya Allah saya akan posting link download atau streamingnya di blog ini.

Saya juga sangat berterima kasih kepada "Sekolah Koding" (bukan promosi ya..!!) yang sudah memberikan vidio tutorialnya mengenai pemograman secara gratis. Dan sedikit banyaknya membuat saya lebih mengerti mengenai pemograman. Hal itulah yang membuat saya untuk mencoba membuat blog ini, agar kita bisa saling berbagi.

Akhir kata mengkin segitu aja basa-basi dari saya.

Adapun saran dan kritik dari sobat PP sangat saya harapkan. Karena saya yakin isi blog ini masih jauh dari kata sempurna.

                                                                                                                     Salam Koding

                                                                                                              Admin Pusat Programing