Box model materi kelas XI Semester Genap

 

Box model

·         Setiap elemen di halaman berada di dalam sebuah box

·         Kita bias mengatur ukuran dan posisi kotak tersebut

·         Kita bias memberi warna/gambar sebagai background kotak tersebut

§  Merah adalah marginnya

§  Biru adalah border

§  Biru muda adalah padding

§  Putih adalah contennya

 

 

CSS Box Model

·        Margin

Area transparan di sekitar kotak  (di luar border)

·        Padding

Area transparan di dalam kotak (antara content dan border)

·         Border

Batas disekeliling content dan padding

·        Content

Konten di dalam box dan berupa text

 

 

Properti untuk margin, padding dan border

1.      Margin-top                  1. Padding-top                                    1. Border-top

2.      Margin-right                2. Padding-right                                 2. Border-right

3.      Margin-bottom            3. Padding-bottom                              3. Border-bottom

4.      Margin-left                  4. Padding-left                                    4. Border-left

5.      Margin                         5. Padding                                          5. Border

 

 

Margin

Cara pakai

 

·         Overlapping margin

·         Negative margin

·         Auto

·         shorthand

 

 

Read More

Javascript

 

Javascript

 

JavaScript adalah salah satu bahasa pemrograman yang paling banyak digunakan dalam kurun waktu dua puluh tahun ini. Bahkan JavaScript juga dikenal sebagai salah satu dari tiga bahasa pemrograman utama bagi web developer:

 

HTML: Memungkinkan Anda untuk menambahkan konten ke halaman web.

CSS: Menentukan layout, style, serta keselarasan halaman website.

JavaScript: Menyempurnakan tampilan dan sistem halaman web.

JavaScript dapat dipelajari dengan cepat dan mudah serta digunakan untuk berbagai tujuan, mulai dari meningkatkan fungsionalitas website hingga mengaktifkan permainan (games) dan software berbasis web. Selain itu, terdapat ribuan template dan aplikasi JavaScript yang bisa Anda gunakan secara gratis dan semuanya ini berkat beberapa situs, seperti Github.

 

Sejarah JavaScript

JavaScript dibuat dan didesain selama sepuluh hari oleh Brandan Eich, seorang karyawan Netscape, pada bulan September 1995. Awalnya bahasa pemrograman ini disebut Mocha, kemudian diganti ke Mona, lalu LiveScript sebelum akhirnya resmi menyandang nama JavaScript. Versi pertama dari bahasa ini hanya terbatas di kalangan Netscape saja. Fungsionalitas yang ditawarkan pun terbatas. Namun, JavaScript terus dikembangkan oleh komunitas developer yang tak henti-hentinya mengerjakan bahasa pemrograman ini.

 

Pada tahun 1996, JavaScript secara resmi disebut sebagai ECMAScript, di mana ECMAScript 2 diluncurkan pada tahun 1998 dan ECMAScript 3 diperkenalkan pada tahun 1999. ECMAScript tersebut dikembangkan hingga akhirnya menjadi JavaScript sebagaimana yang kita kenal saat ini. Tak hanya lintas browser, JavaScript juga bisa digunakan di berbagai perangkat, termasuk perangkat mobile dan komputer.

 

Sejak saat itu, JavaScript terus bertumbuh dan berkembang. Pada akhirnya di tahun 2016, sebanyak 92% website diketahui menggunakan JavaScript. Hanya dala kurun waktu dua puluh tahun, JavaScript telah beralih dari bahasa pemrograman yang serba terbatas dan ‘primitif’ menjadi salah satu tool terpenting bagi web developer. Jika sebagian besar waktu dihabiskan untuk berselancar di internet, maka Anda pastinya sudah sangat familiar dengan JavaScript.

 

Kelebihan JavaScript

Terdapat sejumlah kelebihan JavaScript yang menjadikan bahasa pemrograman ini lebih unggul jika dibandingkan dengan kompetitornya, terutama di beberapa kasus tertentu. Berikut beberapa kelebihan JavaScript:

 

Anda tidak membutuhkan compiler karena web browser mampu menginterpretasikannya dengan HTML;

Lebih mudah dipelajari jika dibandingkan dengan bahasa pemrograman lainnya;

Error atau kesalahan lebih mudah dicari dan ditangani;

Dapat dialihtugaskankan ke elemen halaman web atau even tertentu, misalnya klik atau mouseover;

JS dapat digunakan di berbagai browser, platform, dan lain-lain.

Anda dapat menggunakan JavaScript untuk memvalidasi input dan mengurangi keinginan untuk mengecek data secara manual;

Dengan JavaScript, website Anda menjadi lebih interaktif dan juga mampu menarik perhatian lebih banyak pengunjung;

Lebih cepat dan ringan jika dibandingkan dengan bahasa pemrograman lainnya.

 

Kekurangan JavaScript

Setiap bahasa pemrograman pasti memiliki beberapa kekurangan. Salah satu penyebabnya adalah semakin populernya bahasa pemrograman yang Anda pilih, termasuk dalam hal ini adalah JavaScript. Popularitas tersebut, sialnya, mengundang para hacker, scammer, dan pihak ketiga berbahaya lainnya untuk mencari celah keamanan. Beberapa kekurangan JavaScript, yaitu:

 

Berisiko tinggi terhadap eksploitasi;

Dapat dimanfaatkan untuk mengaktifkan kode berbahaya di komputer pengguna;

Tidak selalu didukung oleh berbagai browser dan perangkat;

JS code snippet agak banyak;

Dapat di-render secara berbeda pada masing-masing perangkat yang malah mengarah ke inkonsistensi.

 

Cara Kerja dan Fungsi JavaScript di Website

Biasanya JavaScript  di-embbed secara langsung ke halaman website atau diarahkan melalui file .js yang terpisah. JavaScript merupakan bahasa dari sisi klien yang berarti script diunduh di perangkat yang dimiliki oleh pengunjung situs Anda, lalu diproses di sana. Berbeda dengan halnya bahasa di sisi server yang dijalankan pada server sebelum bahasa pemrograman tersebut mengirimkan file ke pengunjung situs.

 

Perlu diketahui, sebagian web browser juga menawarkan kesempatan bagi user untuk menonaktifkan JavaScript. Karena itulah, sangat disarankan bagi Anda untuk mencari tahu apa yang terjadi pada event yang diunduh ke mesin yang bahkan tidak men-support-nya.

 

Mengapa JavaScript Berbeda dari Bahasa Pemrograman Lainnya?

Alasan mengapa JavaScript menjadi salah satu bahasa pemrograman yang populer adalah kemudahan untuk dipelajari dan digunakan. Bisa dilihat jika sudah banyak developer yang pada akhirnya memilih JavaScript sebagai bahasa pemrograman terbaik. Bahasa pemrograman lainnya hanya diperlukan bilamana seorang developer menginginkan sesuatu yang lebih spesifik.

 

 

Berikut beberapa bahasa pemrograman yang paling populer dan banyak digunakan:

 

JavaScript        Fungsi JavaScript, atau yang sering disingkat JS, adalah menjadikan website lebih interaktif. Scriptnya dijalankan di browser user alih-alih server, dan biasanya masuk ke library pihak ketiga untuk menyediakan fungsionalitas tingkat lanjut tanpa mengharuskan developer melakukan coding dari awal.

HTML Merupakan singkatan dari Hypertext Markup Languange, HTML dikenal sebagai salah satu bahasa pemrograman yang paling lazim digunakan di web serta membentuk buildin block  dari suatu halaman situs. Sebagai contoh, tag HTML yang termasuk <p> untuk paragraf dan <img> untuk gambar.

PHP     PHP merupakan bahasa pemrograman server-side, sedangkan JavaScript adalah bahasa pemrograman yang dijalankan di client-side. Bahasa ini sering terlihat di sistem manajemen konten berbasis PHP, misalnya WordPress, tapi juga sering digunakan untuk pengembangan back-end karena menyediakan jalan terbaik guna memfasilitasi proses transfer informasi dari dan ke database.

CSS     CSS adalah singkatan dari Cascading Style Sheets. CSS memungkinkan webmaster untuk mengatur style serta menentukan bagaimana masing-masing jenis konten ditampilkan. Untuk menampilkan konten, Anda bisa melakukannya secara manual terhadap setiap elemen dalam HTML. Hanya saja, jika Anda melakukannya di CSS, maka Anda tidak perlu berulang kali menentukan bagaimana elemen-elemen tersebut ditampilkan setiap kali digunakan.

Anggap saja kita sedang membangun sebuah rumah. HTML adalah struktur bangunan rumah dan sandaran bagi pintu dan tembok, sedangkan CSS adalah karpet dan wallpaper yang menghiasi setiap sudut rumah sehingga tampak lebih indah dan menarik. JavaScript, dalam hal ini, menambahkan sifat responsif sehingga Anda bisa membuka pintu dan menyalakan lampu. Anda bisa saja tidak menggunakan lampu atau tidak membutuhkan pintu. Namun, risikonya adalah rumah yang gelap dan usang, layaknya bangunan yang telah berdiri sejak tahun 1995. Hal ini sama seperti ketika Anda memanfaatkan JavaScript untuk webiste.

 

Bagaimana Cara Membuat JavaScript di Website?

Untuk memasukan string kode JavaScript ke webpage, Anda harus menggunakan tag <script>. Anda juga bisa melihat contoh di bawah ini untuk mengecek tampilannya:

 

<script type="text/javascript">

Your JavaScript code

</script>

Sebaiknya, sertakan JavaScript ke dalam tag <header> untuk situs Anda, kecuali bahasa tersebut harus dijalankan pada waktu tertentu atau dengan elemen halaman web tertentu. Kode JavaScript juga dapat disimpan sebagai file yang terpisah dan ‘memanggil’ file tersebut jika dibutuhkan di website.

 

Untuk informasi selengkapnya, silakan baca tutorial kami tentang cara membuat JavaScript di website.

 

Jadi, Apa Itu JavaScript?

Berbicara soal pengertian JavaScript sangatlah mudah. JavaScript merupakan bahasa pemrograman yang menjadikan website Anda lebih hidup dan menarik. Bahasa ini berbeda dari HTML (yang mengatur konten) dan CSS (yang mengelola layout). Berbeda dari PHP, bahasa pemrograman ini dijalankan di perangkat pengunjung situs Anda dan bukannya di server.

 

Hal-hal yang harus Anda ketahui tentang JavaScript:

 

JavaScript mudah dipelajari;

Dikembangkan oleh Netscape dan sampai saat ini telah digunakan oleh 92% website;

Dapat dialihkan ke elemen halaman web tertentu atau event, seperti klik;

Dapat dgunakan di berbagai browser dan perangkat;

Lebih cepat dan ringan daripada bahasa pemrograman lainnya;

Kurang aman jika dibandingkan dengan opsi bahasa pemrograman lainnya. Hal ini disebabkan karena popularitasnya yang kian meningkat;

JavaScript bisa dibuat secara langsung di HTML atau dapat disimpan dalam file terpisah dan fungsionalitasnya digunakan bila diperlukan.

Pada akhirnya Anda kini tahu alasan JavaScript begitu populer: memiliki keunggulan dan kualias terbaik. Semoga artikel ini dapat menjawab kegelisahan Anda mengenai apa itu JavaScript serta fungsi dan cara kerjanya.

Read More

Frame

 

Frame pada HTML

 

Frame adalah satuan terkecil dalam video sedangkan pada program flash, frame diumpamakan seperti kertas hvs yang telah digambar, dan contoh apabila framenya kita perpanjang sebanyak 5 frame, maka diumpamakan seperti 5 kertas hvs dengan

 

gambar yang sama.apabila kita merubah gambar salah satu frame, maka frame yang lain akan mengikuti perubahan gambar tersebut. karena frame tidak dapat berdiri sendiri.

 

Frame adalah sebuah jendela khusus atau dalam bahasa mudahnya adalah sebuah bingkai di sebuah halaman HTML yang digunakan untuk menampilkan sebuah halaman HTML lainnya secara utuh.

 

Frame di deklarasikan di dalam HTML menggunakan tag <frame>. Frame dapat digunakan bersama dengan tag <frameset>. Tag <frame> harus di letakkan di dalam elemen <frameset>.

 

Jika kita membahas tentang tag ini, banyak hal menarik yang dapat diulas, karena kemampuannya yang dapat menampilkan sebuah halaman HTML secara utuh.

 

Sebelum dihapuskan di HTML5 karena kurang efektifnya dalam penggunaan dan permasalahan tentang aksebilitas, tag ini merupakan salah satu tag yang banyak dimanfaatkan untuk menampilkan sebuah halaman HTML.

 

Meskipun sudah tidak dianjurkan lagi di HTML5, tak masalah kita belajar tag ini sebagai tambahan pengetahuan.

 

Frame adalah teknik yang digunakan untuk membagi window menjadi beberapa bagian. Setiap bagian kita isi dengan sebuah halaman web yang sesuai.

 

Keuntungan dari penggunaan frame adalah mudahnya pengaturan hubungan antar satu halaman dengan halaman lainnya.

 

Frame dapat digunakan untuk berbagai macam keperluan, antara lain:

1.      Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isinya

2.      Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isis dokumen

3.      Membuat suatu dokumen tanya jawab, dll.

 

Contoh beberapa atribut yang dapat digunakan dalam tag frame adalah:

frameborder (membuat ketebalan garis bingkai)

name (menentukan nama frame)

noresize (tidak memperbolehkan frame diberi ukuran)

scrolling (membuat frame dapat di scroll atau digulir)

src (menentukan sumber halaman yang akan ditampilkan di dalam frame)

Read More