SlideShare a Scribd company logo
1 of 4
Boostrap
Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan
bebas untuk merancang situs web dan aplikasi web. Kerangka
kerja ini berisi template desain berbasis HTML dan CSS untuk
tipografi, formulir, tombol, navigasi, dan komponen antarmuka
lainnya, serta juga ekstensi opsional JavaScript.
Dengan adanya bootstrap tersebut tentu saja membuat halaman
website bisa menyesuaikan dengan ukuran monitor device. Baik
jika di akses lewat ponsel, tablet ataupun desktop. Awal
mulanya, bootstrap sendiri bernama Twitter Blueprint.
 jQuery adalah salah satu library JavaScript terpopuler,
dan oleh karena itu, ada banyak sumber online, seperti
artikel dan tutorial, yang bisa Anda baca. Meskipun
sudah memiliki pemahaman dasar tentang JavaScript,
Anda tetap tidak bisa mengesampingkan HTML dan
CSS.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 1 : Pengertian dan Cara Menggunakan
Bootstrap</title>
<link rel="stylesheet" type="text/css"
href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<h1>Cara Menggunakan Bootstrap </h1>
<button class="btn btn-danger">TOMBOL MERAH</button>
<button class="btn btn-primary">TOMBOL BIRU</button>
</body>
</html>

More Related Content

Similar to Materi SPL Berbasis Web

Java web application 2 - membuat template web
Java web application 2 - membuat template webJava web application 2 - membuat template web
Java web application 2 - membuat template webDoni Andriansyah
 
Tutorial web programing x rpl 1
Tutorial web programing x rpl 1Tutorial web programing x rpl 1
Tutorial web programing x rpl 1eghha
 
Kumpulan Koding open source gratis buat blog/Website
Kumpulan Koding open source gratis buat blog/WebsiteKumpulan Koding open source gratis buat blog/Website
Kumpulan Koding open source gratis buat blog/WebsiteSyahrial HSB
 
Tutorial web programing
Tutorial web programingTutorial web programing
Tutorial web programingeghha
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)T Ghazali
 
Membuat curriculum vitae diko
Membuat curriculum vitae dikoMembuat curriculum vitae diko
Membuat curriculum vitae dikogerypangs
 
Membuat curriculum vitae
Membuat curriculum vitaeMembuat curriculum vitae
Membuat curriculum vitaeibnu aqil
 
Sourcode Web Berbasis HTML, PHP, CMS, MYSQL
Sourcode Web Berbasis HTML, PHP, CMS, MYSQLSourcode Web Berbasis HTML, PHP, CMS, MYSQL
Sourcode Web Berbasis HTML, PHP, CMS, MYSQLAngga Joe Amstrong
 
tugas 6 - 0316 (individu)
tugas 6 - 0316 (individu)tugas 6 - 0316 (individu)
tugas 6 - 0316 (individu)arif_rachman740
 

Similar to Materi SPL Berbasis Web (20)

Java web application 2 - membuat template web
Java web application 2 - membuat template webJava web application 2 - membuat template web
Java web application 2 - membuat template web
 
Tutorial web programing x rpl 1
Tutorial web programing x rpl 1Tutorial web programing x rpl 1
Tutorial web programing x rpl 1
 
Kumpulan Koding open source gratis buat blog/Website
Kumpulan Koding open source gratis buat blog/WebsiteKumpulan Koding open source gratis buat blog/Website
Kumpulan Koding open source gratis buat blog/Website
 
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
 
Tutorial web programing
Tutorial web programingTutorial web programing
Tutorial web programing
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
 
Membuat curriculum vitae diko
Membuat curriculum vitae dikoMembuat curriculum vitae diko
Membuat curriculum vitae diko
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Modul web-design
Modul web-designModul web-design
Modul web-design
 
Materi CSS lanjut
Materi CSS lanjutMateri CSS lanjut
Materi CSS lanjut
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Cantik
CantikCantik
Cantik
 
Membuat curriculum vitae
Membuat curriculum vitaeMembuat curriculum vitae
Membuat curriculum vitae
 
Laporan tugas besar_web
Laporan tugas besar_webLaporan tugas besar_web
Laporan tugas besar_web
 
Rekayasa web
Rekayasa webRekayasa web
Rekayasa web
 
Sourcode Web Berbasis HTML, PHP, CMS, MYSQL
Sourcode Web Berbasis HTML, PHP, CMS, MYSQLSourcode Web Berbasis HTML, PHP, CMS, MYSQL
Sourcode Web Berbasis HTML, PHP, CMS, MYSQL
 
Mpw
MpwMpw
Mpw
 
tugas 6 - 0316 (individu)
tugas 6 - 0316 (individu)tugas 6 - 0316 (individu)
tugas 6 - 0316 (individu)
 

Materi SPL Berbasis Web

  • 1.
  • 2. Boostrap Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs web dan aplikasi web. Kerangka kerja ini berisi template desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, dan komponen antarmuka lainnya, serta juga ekstensi opsional JavaScript. Dengan adanya bootstrap tersebut tentu saja membuat halaman website bisa menyesuaikan dengan ukuran monitor device. Baik jika di akses lewat ponsel, tablet ataupun desktop. Awal mulanya, bootstrap sendiri bernama Twitter Blueprint.
  • 3.  jQuery adalah salah satu library JavaScript terpopuler, dan oleh karena itu, ada banyak sumber online, seperti artikel dan tutorial, yang bisa Anda baca. Meskipun sudah memiliki pemahaman dasar tentang JavaScript, Anda tetap tidak bisa mengesampingkan HTML dan CSS.
  • 4. <!DOCTYPE html> <html> <head> <title>Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <h1>Cara Menggunakan Bootstrap </h1> <button class="btn btn-danger">TOMBOL MERAH</button> <button class="btn btn-primary">TOMBOL BIRU</button> </body> </html>