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.
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 :
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..
Elemen IMG
Elemen IMG digunakan untuk mendefinisikan wadah gambar pada dokumen.
Contoh :
Keterangan :
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
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>:
<scriptsrc="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.
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><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Bootstrap 3.3.6 Starter Template - by dul.web.id</title><!-- Bootstrap --><linkhref="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) --><divclass="container"><h1>Apa Kabar Dunia?</h1><!-- Small modal --><buttonclass="btn btn-danger"data-toggle="modal"data-target=".bs-example-modal-sm">Klik Aku</button><divclass="modal fade bs-example-modal-sm"tabindex="-1"role="dialog"aria-labelledby="mySmallModalLabel"aria-hidden="true"><divclass="modal-dialog modal-sm"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"><spanaria-hidden="true">×</span><spanclass="sr-only">Close</span></button><h4class="modal-title"id="mySmallModalLabel">Small modal</h4></div><divclass="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) --><scriptsrc="js/jquery-1.12.0.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><scriptsrc="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 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.
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 ?. 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 dengan ilmu yang dibutuhkan 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 menyenangkan. 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.
Akhir kata mungkin 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.
Hai sobat PP, disini kita akan mencoba Pengenalan HTML. Mungkin sebagian sobat PP ada yang sudah tau apa itu HTML tapi ngga ada salahnya kita perdalam lagi.
HTML adalah bahasa yang digunakan pada dokumen web sebagai bahasa untuk pertukaran dokumen web. Struktur dokumen HTML terdiri dari Tag pembukan dan Tag penutup.
Struktur dokumen HTML sebagai berikut :
Agar sobat lebih mengerti mengenai tag-tag HTML silahkan sobat simak vidio dibawah ini. Sekedar info, vidio dibawah ini di buat oleh mas Hilman Ramadan dari "SEKOLAH KODING". Kenapa vidio-vidio dari mas hilman sangat saya rekomendasikan, karena penjelasannya sangat mudah dimengerti. Ini bukan promosi atau apapun, ini murni dari pengalaman saya dalam mempelajari programing.
Untuk Sobat yang mau mendownload vidionya bisa klik Disini
