Membuat Tempelate Menggunkanan Boostrap

Ukuran: px
Mulai penontonan dengan halaman:

Download "Membuat Tempelate Menggunkanan Boostrap"

Transkripsi

1 Membuat Tempelate Menggunkanan Boostrap Jihadul Akbar, S.Kom PUSTIK STMIK LOMBOK 3/30/2017

2 Tentang Modul Bootstrap adalah kerangka front-end yang paling populer dalam waktu terakhir. Sangat ringan, handal dalam membuat kerangka front-end mobile yang cepat dan pengembangan web lebih mudah. Menggunakan HTML, CSS dan Javascript. Modul ini akan mengajarkan Anda dasar-dasar Bootstrap yang Anda dapat gunakan untuk membuat proyek web dengan mudah. Modul ini dibagi menjadi beberapa bagian seperti Struktur dasar Bootstrap, CSS Bootstrap, Bootstrap Komponen Layout dan Bootstrap Plugins. Setiap Ulasan ini Mengandung bagian-bagian terkait topik dengan sederhana dan contoh yang berguna. Modul Ini Untuk Modul ini telah dipersiapkan untuk siapa saja yang memiliki pengetahuan dasar tentang HTML dan CSS dan memiliki dorongan untuk mengembangkan website. Setelah menyelesaikan modul ini Anda akan bisa mengembangkan proyek-proyek web menggunakan Twitter Bootstrap

3 Pendahuluan Apa itu Boostrap? Bootstrap adalah HTML, CSS, dan kerangka JS yang paling populer untuk mengembangkan web responsif, mengutamakan agar website bisa diakses melalui pragakat mobile. Sejarah Bootstrap di buat dan dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter. Dirilis sebagai produk open source pada bulan Agustus 2011 pada GetHub. Kenapa harus menggunkanan Bootstrap? 1. Pendekatan pertama pada perangkat Mobile 2. Bowser Suport 3. Mudah untuk di terapkan 4. Responsive Design Apa saja yang ada dalam paket Bootstrap? 1. Sistem Kolom (Grid System) Dengan menggunkana struktur grid system memudahkan dalam membuat layout halaman website yang akan anda buat. 2. Cascading Style Sheet (CSS) Bootstrap hadir dengan fasilitas pengaturan global CSS. Pundamental HTML style dengan banyak kelas yang dapat digunakan untuk mengatur berbagai macam bagian. 3. Komponen Bootstrap memiliki banyak komponen yang dapat digunakan kembali untuk membangun halaman web memberikan icon, dropdown, navigasi, peringatan, pop-overs, dan lebih banyak. 4. JavaScript Bootstrap memiliki banyak fungsi memasukkan semua, atau satu per satu. 5. Meyesuaikan dari jquery. Anda dapat dengan mudah Kita bisa mengembangakan CSS, Komponen dan Javascript sesuai dengan kebutuhan.

4 Download Bootstrap Persiapan Untuk mendapatkan bootstrap kita bisa download di Struktur File Cara menambahkan Bootstrap pada halaman web Tambahkan link dibawah ini pada bagian tag head <link href="css/bootstrap.min.css" rel="stylesheet"> Untuk menggunakan JavaScript bootstrap, kita harus menambahkan jquery terlebih dahulu baru kita menambah Javascript bawaan dari Bootstrap. Karna dalam paket boostrap tidak termasuk Jquery maka kita harus download terlebih dahulu pada link Dan simpan di dalam direktori bootstrap/js/. Tempat penaruhan dari JavaScript adalah sebelum bagian akhir tag body <! Pemgangginalan jquery --> <script src="js/jquery.min.js"></script> <! Pemangginlan JavaScrept Boostrap --> <script src="js/bootstrap.min.js"></script>

5 Membuat tempelate sederhana <!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>menggunakan Boostrap CSS</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>hello, world!</h1> <!-- jquery --> <script src="js/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="js/bootstrap.min.js"></script> </body> </html> Hasilnya adalah :

6 Menggunkan Grid System <!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>grid System</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="row"> <!--membuat menjadi 12 kolom --> <div class="col-md-1">.col-md-1 <div class="col-md-1">.col-md-1 <div class="col-md-1">.col-md-1 <div class="col-md-1">.col-md-1 <div class="col-md-1">.col-md-1 <div class="col-md-1">.col-md-1 <div class="col-md-1">.col-md-1 <div class="col-md-1">.col-md-1 <div class="col-md-1">.col-md-1 <div class="col-md-1">.col-md-1 <div class="col-md-1">.col-md-1 <div class="col-md-1">.col-md-1 <div class="row"> <!-- 2 kolom kiri lebih besar 8 dan kanan 4 --> <div class="col-md-8">.col-md-8 <div class="col-md-4">.col-md-4 <div class="row"> <!-- 3 kolom semua sama besar --> <div class="col-md-4">.col-md-4 <div class="col-md-4">.col-md-4 <div class="col-md-4">.col-md-4 <div class="row"> <!-- 2 kolom sama besar --> <div class="col-md-6">.col-md-6 <div class="col-md-6">.col-md-6 <!-- jquery --> <script src="js/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="js/bootstrap.min.js"></script> </body> </html> Hasilnya adalah

7 Membuat Form <!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>membuat Form</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <form> <div class="form-group"> <label for="exampleinput 1"> address</label> <input type=" " class="form-control" placeholder=" "> <div class="form-group"> <label for="exampleinputpassword1">password</label> <input type="password" class="form-control" placeholder="password"> <div class="form-group"> <label for="exampleinputfile">file input</label> <input type="file" id="exampleinputfile"> <p class="help-block">example block-level help text here.</p> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> <button type="submit" class="btn btn-default">submit</button> </form> <!-- jquery --> <script src="js/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="js/bootstrap.min.js"></script> </body> </html> Hasilnya adalah

8 Membuat Tombol <!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>membuat Tombol</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- Standard button --> <button type="button" class="btn btn-default">default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">link</button> <!-- jquery --> <script src="js/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="js/bootstrap.min.js"></script> </body> </html> Hasilnya adalah :

9 Membuat Menu <!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>membuat menu</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" datatoggle="collapse" data-target="#bs-example-navbar-collapse-1" ariaexpanded="false"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">brand</a> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">link <span class="sronly">(current)</span></a></li> <li><a href="#">link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" ariaexpanded="false">dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">one more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" datatoggle="dropdown" role="button" aria-haspopup="true" ariaexpanded="false">dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">separated link</a></li>

10 </ul> </li> </ul> <!-- /.navbar-collapse --> <!-- /.container-fluid --> </nav> <!-- jquery --> <script src="js/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="js/bootstrap.min.js"></script> </body> </html> Hasilnya adalah

11 <!DOCTYPE html> <html> <head> </head> <body> Membuat Halaman Profil Dengan Booststrap File <title>profil</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Memanggil Boostrap CSS --> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!-- Menambah CSS Untuk Mengatur Website --> <link rel="stylesheet" type="text/css" href="css/style.css"> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" datatoggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">hello</a> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="profil.html">profil</a></li> <li><a href="#">hoby</a></li> <li><a href="#">kontak</a></li> </ul> </nav> <!-- Container Pertama --> <div class="container-fluid bg-1 text-center"> <h3>perkenalkan Saya</h3> <img src="img/jihad.jpg" alt="jihadul Akbar" width="30%" class="img-responsive img-circle" style="display:inline"> <h3>saya Adalah Jihadul Akbar</h3> <!-- Container Kedua --> <div class="container-fluid bg-2 text-center"> <h3>saya Adalah?</h3> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <a href="#" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-search"> </span> Selengkapnya </a>

12 </body> </html> <!-- Kontiner ke Empat dengan Grid --> <div class="container-fluid bg-3 text-center"> <h3 class="margin">temukan Saya?</h3><br> <div class="row"> <div class="col-sm-4"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <img src="img/satu.jpg" class="img-responsive margin" style="width:100%" alt="gambar"> <div class="col-sm-4"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <img src="img/satu.jpg" class="img-responsive margin" style="width:100%" alt="gambar"> <div class="col-sm-4"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <img src="img/satu.jpg" class="img-responsive margin" style="width:100%" alt="gambar"> <!-- Footer --> <footer class="container-fluid bg-4 text-center"> <p>copyright by <a href="#">jihadul Akbar</a></p> </footer> <!-- jquery --> <script src="js/jquery.min.js"></script> <!-- Memanggil JavaScript --> <script src="js/bootstrap.min.js"></script>

13 Membuat Halaman Profil Dengan Booststrap File CSS body { font: 20px Montserrat, sans-serif; line-height: 1.8; color: #f5f6f7;.bg-1 { background-color: #1abc9c; /* Green */ color: #ffffff;.bg-2 { background-color: #474e5d; /* Dark Blue */ color: #ffffff;.bg-3 { background-color: #ffffff; /* White */ color: #555555;.bg-4 { background-color: #2f2f2f; /* Black Gray */ color: #fff; p {font-size: 16px;.margin {margin-bottom: 45px;.container-fluid { padding-top: 70px; padding-bottom: 70px;.navbar { padding-top: 15px; padding-bottom: 15px; border: 0; border-radius: 0; margin-bottom: 0; font-size: 12px; letter-spacing: 5px;.navbar-nav li a:hover { color: #1abc9c!important;

14 Hasil Desainnya

Permasalahan Tambahan

Permasalahan Tambahan Permasalahan Membuat tampilan web yang bagus dan konsisten itu susah dan butuh waktu lama Untuk SEO (Search Engine Optimization) yang lebih baik, hanya gunakan tag dan html untuk menyimpan isi web.

Lebih terperinci

Responsive Sidebar dengan Bootstrap

Responsive Sidebar dengan Bootstrap Responsive Sidebar dengan Bootstrap Oleh: Boy Panjaitan Hai, Berjumpa lagi dengan saya Boy Panjaitan. kali ini saya akan membagikan tutorial tentang CSS lagi.pernahkah anda melihat website dengan sidebar

Lebih terperinci

Beralih dari Input Submit ke Button dan Cara Mudah Membuat Button Bootstrap

Beralih dari Input Submit ke Button dan Cara Mudah Membuat Button Bootstrap Beralih dari Input Submit ke Button dan Cara Mudah Membuat Button Bootstrap Oleh: Arinadi Nur Rohmad Kenapa beralih dari Input Submit ke Button? Ya, menurut saya button lebih Power Full dari pada Input

Lebih terperinci

Membuat Scrollspy Dengan Bootstrap

Membuat Scrollspy Dengan Bootstrap Membuat Scrollspy Dengan Bootstrap Oleh: Hasyemi Rafsanjani Asyari Hai JagoCodingers. Apa kabar? Pernah ngga kalian membuka sebuah website lalu ada menu link navigasi yang akan terupdate atau terlihat

Lebih terperinci

Membuat Top Fixed Responsive Navbar Twitter Bootstrap

Membuat Top Fixed Responsive Navbar Twitter Bootstrap Membuat Top Fixed Responsive Navbar Twitter Bootstrap Oleh: ricky orlando napitupulu Salam bro and sis :), selamat datang di tulisan tutorial pertama ane ni, makasi da mau singga disini ye walopun kesasar

Lebih terperinci

Responsive Layout dengan Bootstrap [Part 2]

Responsive Layout dengan Bootstrap [Part 2] Responsive Layout dengan Bootstrap [Part 2] Oleh: Christian Rosandhy Salam jaco,, sebagai lanjutan dari tutorial Membuat Layout Responsive dengan Container Bootstrap, kali ini kita akan mencoba membuat

Lebih terperinci

Tutorial Penggunaan Twitter Bootstrap

Tutorial Penggunaan Twitter Bootstrap Tutorial Penggunaan Twitter Bootstrap Oleh: Gilang Sonar Amanu Terimakasih telah mengunjungi tutorial saya lagi, setelah tutorial sebelumnya tentang Pengenalan Twitter Bootstrap Oke.. sebelum melangkah

Lebih terperinci

Pengembangan Aplikasi dengan Laravel Langkah-Langkah Pembangunan Website. Husni

Pengembangan Aplikasi dengan Laravel Langkah-Langkah Pembangunan Website. Husni Pengembangan Aplikasi dengan Laravel Langkah-Langkah Pembangunan Website Husni Husni@Trunojoyo.ac.id Outline Struktur direktori Laravel Memahami rute dalam web.php Mengubah home page Laravel Menambah halaman

Lebih terperinci

BAB II KOMPONEN HTML LANJUT

BAB II KOMPONEN HTML LANJUT BAB II KOMPONEN HTML LANJUT A. KOMPETENSI DASAR Memahami komponen-komponen HTML lanjutan. Memahami kegunaan dan cara penerapan komponen HTML. Mampu memanfaatkan komponen-komponen HTML untuk membuat halaman

Lebih terperinci

membuat website dengan bootstrap v3.0.0

membuat website dengan bootstrap v3.0.0 membuat website dengan bootstrap v3.0.0 Oleh: reski hamsah Belakangan ini, bootstrap telah merilis versi terbarunya dengan berbagai tawaran menarik mulai dari desain, fitur, dan customizer terbaru untuk

Lebih terperinci

BAB I DASAR-DASAR HTML

BAB I DASAR-DASAR HTML BAB I DASAR-DASAR HTML A. KOMPETENSI DASAR Memahami struktur dasar dokumen HTML dan HTML5 Mampu membuat dokumen HTML yang baik dan benar. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi.

Lebih terperinci

1. Apa itu Bootstrap?

1. Apa itu Bootstrap? Pendahuluan Dalam rangka memenuhi tugas mata kuliah Web Statis, Prodi TI, STMIK EL Rahma, dengan topik dan konten yang telah ditetapkan, yaitu mengenai Bootstrap. Maka saya mengekspresikan sebuah pemahaman

Lebih terperinci

MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP

MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP NURLITA nurlita.icha@gmail.com Abstrak Kali ini kita akan membahas cara membuat layout dengan container bootstrap. Bootstrap adalah suatu framework front-end yang

Lebih terperinci

MODUL III CASCADING STYLE SHEET

MODUL III CASCADING STYLE SHEET MODUL III CASCADING STYLE SHEET A. TUJUAN Memahami jenis dan struktur dasar dokumen CSS. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk menghasilkan halaman

Lebih terperinci

PRAKTIKUM. Rekayasa Web. Modul 3: CRUD Part II. Laboratorium Teknik Informatika Universitas Pasundan

PRAKTIKUM. Rekayasa Web. Modul 3: CRUD Part II. Laboratorium Teknik Informatika Universitas Pasundan PRAKTIKUM Rekayasa Web Modul 3: CRUD Part II Laboratorium Teknik Informatika Universitas Pasundan Konten modul: 1. Update Data 2. Search Data Tujuan praktikum: 1. Praktikan diharapkan mampu memahami proses

Lebih terperinci

Membuat Duplikasi Form dengan Jquery (Dynamic Form)

Membuat Duplikasi Form dengan Jquery (Dynamic Form) Membuat Duplikasi Form dengan Jquery (Dynamic Form) Oleh: Dimas Agung Noviyanto Membuat dynamic field mungkin bukan hal baru bagi seorang web programmer, field inputan yang dapat ditambah maupun di hapus

Lebih terperinci

RWD (Responsive Web Design) dengan Grid System Bootsrtap

RWD (Responsive Web Design) dengan Grid System Bootsrtap RWD (Responsive Web Design) dengan Grid System Bootsrtap Oleh: Jaf Al Azam RWD (Responsive Web Design) dengan Grid System Bootsrtap Bootstrap merupkakan Framework CSS yang sedang Booming tahun 2015 ini,

Lebih terperinci

Nama: ahmad edi purwanto. Nim: Tugas uts web statis. Tutorial cara penggunaan suatu framework CSS

Nama: ahmad edi purwanto. Nim: Tugas uts web statis. Tutorial cara penggunaan suatu framework CSS Nama: ahmad edi purwanto Nim:12111027 Tugas uts web statis. Tutorial cara penggunaan suatu framework CSS Pengertian dasar dari Framework itu sendiri adalah; sebuah konsep yang memiliki struktur serta terorganisir

Lebih terperinci

Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap [Part 2]

Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap [Part 2] Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap 2.3.2 [Part 2] Oleh: d-newbie pada tutorial sebelumnya kita sudah membuat 2 modal, yaitu modal "Masuk" dan modal "Daftar" dan pada tahap ini

Lebih terperinci

Pemrograman Web PRAKTIKUM 3 CSS. TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml

Pemrograman Web PRAKTIKUM 3 CSS. TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml PRAKTIKUM 3 CSS TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml MATERI Sintaks CSS, cara memakai CSS, jenis-jenis selektor, satuan ukuran, satuan warna, properti

Lebih terperinci

Membuat Display Produk dalam Layout Box 4 Kolom

Membuat Display Produk dalam Layout Box 4 Kolom Membuat Display Produk dalam Layout Box 4 Kolom Oleh: Debrian Ruhut Saragih Selamat pagi Sobat sekalian, saat ini kita banyak menemukan toko online bertebaran di Internet. Saya sering memperhatikan bagaimana

Lebih terperinci

BAB IV IMPLEMENTASI DAN PEMBAHASAN SISTEM. menggunakan bahasa pemrograman berbasis web yaitu PHP dan database

BAB IV IMPLEMENTASI DAN PEMBAHASAN SISTEM. menggunakan bahasa pemrograman berbasis web yaitu PHP dan database BAB IV IMPLEMENTASI DAN PEMBAHASAN SISTEM A. Implementasi Sistem Aplikasi sistem pakar untuk diagnosa penyakit kambing dibangun dengan menggunakan bahasa pemrograman berbasis web yaitu PHP dan database

Lebih terperinci

[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap

[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap [SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap Oleh: Arinadi Nur Rohmad Asalamualaikum.. Bagi yang seorang yang belum paham betul JQuery seperti saya, membuat Tab adalah pekerjaan yang cukup sulit..

Lebih terperinci

Plugin Javascript Bootstrap 2

Plugin Javascript Bootstrap 2 Plugin Javascript Bootstrap 2 Oleh: ricky orlando napitupulu Salam bro/sis :) Setelah sebelumnya saya memberikan tutorial tentang plugin JS jquery yang super keren. Nah kini saya tambahin lagi lanjutanya.

Lebih terperinci

DAFTAR PUSTAKA. Pressman, Roger S Rekayasa Perangkat Lunak: pendekatan praktisi.

DAFTAR PUSTAKA. Pressman, Roger S Rekayasa Perangkat Lunak: pendekatan praktisi. DAFTAR PUSTAKA Anhar. 2010. PHP & MySql Secara Otodidak. Jakarta : Mediakita. Bin Ladjamudin, Al-Bahra. 2005. Analisis dan Desain Sistem Informasi. Graha Ilmu : Yogyakarta Connolly, T., Begg, C. 2010.

Lebih terperinci

FRAMEWORK CSS :CSS BOOTSTRAP

FRAMEWORK CSS :CSS BOOTSTRAP BAB 5 FRAMEWORK CSS :CSS BOOTSTRAP A. TUJUAN 1. Memahami dan mempelajaricara membuat tampilan web yang responsive dengan framework CSS. 2. Mengimplementasikan CSS pada Bootstrap. B. LANDASAN TEORI 1. TEXT/TYPOGRAPHY

Lebih terperinci

WEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS

WEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS WEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS Oleh : EMA SETYA KARISNA TI. 12141391 A. PENGERTIAN FRAMEWORK CSS Bootswatch.com Bootswatch merupakan penyedia tema berbagai macam bootstrap dengan

Lebih terperinci

LAMPIRAN. A. Source Code Halaman Utama

LAMPIRAN. A. Source Code Halaman Utama A. Source Code Halaman Utama LAMPIRAN include 'config/config.php'; include 'config/statistik.php'; sa-prol

Lebih terperinci

BAB V DESAIN WEB CSS

BAB V DESAIN WEB CSS BAB V DESAIN WEB CSS A. KOMPETENSI DASAR Memahami konsep dan strategi desain web yang rapi berbasis HTML dan CSS/CSS3. Mampu mengoptimalkan fitur-fitur CSS dalam desain web. Mampu memanfaatkan pendekatan

Lebih terperinci

MODUL III CASCADING STYLE SHEET

MODUL III CASCADING STYLE SHEET MODUL III CASCADING STYLE SHEET A. TUJUAN Memahami struktur dasar dokumen HTML. Mampu membuat dokumen HTML yang baik dan benar. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi. B. PETUNJUK

Lebih terperinci

LEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html :

LEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html : LEMBAR KERJA PRAKTIKUM Nim : 13-1401-164 Hari / Tgl TTD Asisten Nama Kelas : Muh. Idrus : DK-13 Mata kuliah : Pemrograman Web I Materi : JavaScript - JavaScript Alert yang ditampilkan browser saat membuka

Lebih terperinci

Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya

Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya Oleh: Arinadi Nur Rohmad Glyphicon ini berbasis text jadi lebih ringan dan biasa diganti warna seperti huruf pada umumnya yang berbeda dari

Lebih terperinci

KAJIAN 3 Web Responsive

KAJIAN 3 Web Responsive KAJIAN 3 Web Responsive Modul 10 Pengantar Web Responsive Modul 11 Perancangan Web Responsive 73 KAJIAN 3 Web Responsive MODUL 10 Pengantar Web Responsive 10.1. TUJUAN Mengetahui dan memahami dasar perancangan

Lebih terperinci

[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3

[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3 [SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3 Oleh: Arinadi Nur Rohmad Oke, Membuat slide show adalah pekerjaan yang sulit untuk yang baru belajar CSS karena pada dasarnya Slide Show dibuat

Lebih terperinci

Pemrograman Web PRAKTIKUM 6. Query Data 2. TUJUAN BELAJAR Mahasiswa dapat menggunakan PHP dan MySQL untuk mengupdate data

Pemrograman Web PRAKTIKUM 6. Query Data 2. TUJUAN BELAJAR Mahasiswa dapat menggunakan PHP dan MySQL untuk mengupdate data PRAKTIKUM 6 Query Data 2 TUJUAN BELAJAR Mahasiswa dapat menggunakan PHP dan MySQL untuk mengupdate data MATERI Program edit dan hapus TUGAS Menambahkan fitur edit dan hapus untuk semua form input data

Lebih terperinci

TUGAS AKHIR DANIEL SAHALA HUTABARAT

TUGAS AKHIR DANIEL SAHALA HUTABARAT TUGAS AKHIR DANIEL SAHALA HUTABARAT 142406091 PROGRAM STUDI TEKNIK INFORMATIKA D3 DEPARTEMEN MATEMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM MEDAN 2017 TUGAS AKHIR Diajukan untuk melengkapi tugas

Lebih terperinci

Sistem Voting dengan PHP dan Mysql untuk Admin dan Anggota

Sistem Voting dengan PHP dan Mysql untuk Admin dan Anggota Sistem Voting dengan PHP dan Mysql untuk Admin dan Anggota Oleh: Boy Panjaitan Hai, Kembali lagi dengan saya Boy Panjaitan.Kali ini saya akan memberikan tutorial yang berhubungan dengan PHP. Yap disini

Lebih terperinci

DAFTAR PUSTAKA. Fathansyah. (2007). Basis Data. Informatika : Bandung.

DAFTAR PUSTAKA. Fathansyah. (2007). Basis Data. Informatika : Bandung. DAFTAR PUSTAKA Fathansyah. (2007). Basis Data. Informatika : Bandung. Pressman, Roger S. (2012). Rekayasa Perangkat Lunak Buku Dua, Pendekatan Praktisi (Edisi 7). Andi : Yogyakarta. Saputra, Agus. (2012).

Lebih terperinci

Gambar Surat Pengantar Fakultas

Gambar Surat Pengantar Fakultas Gambar Surat Pengantar Fakultas L2 Gambar Surat Keterangan Perusahaan L3 L4 Gambar Formulir Pengajuan Pinjaman L5 L6 Gambar Kwitansi Pencairan Dana L7 Gambar Tanda Terima Uang Pinjaman L8 Index.php

Lebih terperinci

DAFTAR PUSTAKA. Azmi, F. (2015) Berkenalan dengan HTML. Jakarta: Fauzan Azmi

DAFTAR PUSTAKA. Azmi, F. (2015) Berkenalan dengan HTML. Jakarta: Fauzan Azmi DAFTAR PUSTAKA Azmi, F. (2015) Berkenalan dengan HTML. Jakarta: Fauzan Azmi Fachrudin, C., Yunus, Drs. A., Umar, R., dan Yunus, H. A. (2006) Arti Lambang dan Fungsi Tata Rias Pengantin dalam Menanamkan

Lebih terperinci

6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco

6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco 6. HTML & CSS PTI15010 Pemrograman Web Agi Putra Kharisma, S.T., M.T. Genap 2014/2015 Desain slide ini dadaptasi dari University of San Fransisco HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan

Lebih terperinci

Cara Membuat website dengan Dreamweaver

Cara Membuat website dengan Dreamweaver Cara Membuat website dengan Dreamweaver Pajrin Wurika Sahara Wurika.sahara@gmail.com Abstrak Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG What You See

Lebih terperinci

PEMROGRAMAN WEB. Indra Gunawan, ST., M.Kom., CEH., CHFI

PEMROGRAMAN WEB. Indra Gunawan, ST., M.Kom., CEH., CHFI PEMROGRAMAN WEB Indra Gunawan, ST., M.Kom., CEH., CHFI Curiculum Vitae Pendidikan : S1 Teknik Informatika, Minat Studi Kecerdasarn Buatan, 2007, Universitas Islam Indonesia Yogyakarta Skripsi : Membuat

Lebih terperinci

Membuat Autentikasi Pengguna pada Laravel

Membuat Autentikasi Pengguna pada Laravel Membuat Autentikasi Pengguna pada Laravel Abdul Rohman admin@abdulrohman.web.id :: http://www.abdulrohman.web.id Abstrak Autentikasi merupakan hal yang sangat penting dalam sebuah website. Dengan menggunakan

Lebih terperinci

2. CARA MENGGUNAKAN FRAMEWORK CSS GETBOOTSTRAP.COM/232/ Bagaimana Cara Menggunakan Bootstrap?

2. CARA MENGGUNAKAN FRAMEWORK CSS GETBOOTSTRAP.COM/232/ Bagaimana Cara Menggunakan Bootstrap? NAMA : SITI NURWANTI NIM : 12141385 MATA KULIAH : PEMROGRAMAN WEB STATIS 1. PENGERTIAN FRAMEWORK CSS GETBOOTSTRAP.COM/232/ Bootstrap merupakan sebuah framework CSS,yang menyediakan kumpulan komponen-komponen

Lebih terperinci

if(isset($_session['register'])): <div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert">

if(isset($_session['register'])): <div class=alert alert-success> <button type=button class=close data-dismiss=alert> Lampiran a) Halaman Login ( Admin / Siswa ) empty( $app )? header('location:../index.php') : '' ; if(isset($_session['register'])): $pesan = ($_SESSION['register']== 1)?' Data Akun Perpustakaan

Lebih terperinci

Membuat Tema WordPress Sederhana

Membuat Tema WordPress Sederhana Membuat Tema WordPress Sederhana posted by Yusuf Syaifudin on November 10, 2014 Ok, jadi sepertinya saya masih punya hutang sama teman saya tentang janji mau nulis gimana caranya bikin tema WordPress..

Lebih terperinci

MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5

MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5 MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5 NELI WIDI ASTUTI Neliwidiastuti97@gmail.com Abstrak Pada kesempatan ini saya akan mencoba menjelaskan tentang membuat website sederhana dengan HTML 5 dan CSS 3,

Lebih terperinci

108

108 LAMPIRAN 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 KODE PROGRAM 1. Script Konsultasi 1.

Lebih terperinci

Triswansyah Yuliano

Triswansyah Yuliano Mendesain Menu dengan CSS Triswansyah Yuliano triswansyah_yuliano@yahoo.com http://triswan.wordpress.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan

Lebih terperinci

CSS. inheritance (pewarisan)

CSS. inheritance (pewarisan) {CSS} lanjut CSS inheritance (pewarisan) sebuah elemen mewarisi beberapa nilai dari properti yang dimiliki oleh elemen parent-nya http://www.w3.org/tr/css21/cascade.html#inheritance http://www.slideshare.net/diniscorreia/htmlcss-3-introduction-to-css

Lebih terperinci

DAFTAR PUSTAKA.

DAFTAR PUSTAKA. DAFTAR PUSTAKA 1. Arief, M.Rudianto. 2011. Pemrograman Web Dinamis Menggunakan Php dan Mysql. Yogyakarta: ANDI 2. Arifializevic Maribondang. 2014. Rancang bangun sistem informasi perangkat lunak pemetaan

Lebih terperinci

BAB VI DESAIN WEB RESPONSIF

BAB VI DESAIN WEB RESPONSIF BAB VI DESAIN WEB RESPONSIF A. KOMPETENSI DASAR Memahami konsep dasar desain halaman web responsif Mampu menerapkan konsep desain web responsif ke dalam aplikasi Mampu menghasilkan desain aplikasi web

Lebih terperinci

BAB V IMPLEMENTASI SISTEM

BAB V IMPLEMENTASI SISTEM BAB V IMPLEMENTASI SISTEM Pada bab ini merupakan tahapan penerjemahan kebutuhan pembuatan software ke dalam representasi perangkat lunak sebeleum penulisan kode program dimulai sesuai dengan hasil analisis

Lebih terperinci

BAB 2 TINJAUAN PUSTAKA DAN DASAR TEORI

BAB 2 TINJAUAN PUSTAKA DAN DASAR TEORI BAB 2 TINJAUAN PUSTAKA DAN DASAR TEORI 2.1. Tinjauan Pustaka Penelitian yang dilakukan oleh Irma Eka Ayu Novita dan Hernawan Sulistyanto (2015) dengan judul Pengembangan Aplikasi Untuk Mengetahui Kebutuhan

Lebih terperinci

PRAKTIKUM PEMROGRAMAN WEB MODUL 7 TWITTER BOOTSTRAP

PRAKTIKUM PEMROGRAMAN WEB MODUL 7 TWITTER BOOTSTRAP PRAKTIKUM PEMROGRAMAN WEB MODUL 7 TWITTER BOOTSTRAP Disusun oleh: (Nama) (NIM) PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH JEMBER 2015 Modul 7 Twitter Bootstrap I. Tujuan:

Lebih terperinci

MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119)

MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119) MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119) Disusun oleh : KARTINI, SKom.,MMSI LABORATORIUM KOMPUTER FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL MODUL PRATIKUM PBW 04A Cascading Style Sheets

Lebih terperinci

PRAKTIKUM. Rekayasa Web. Modul 1: Introduction CodeIgniter. Laboratorium Teknik Informatika Universitas Pasundan

PRAKTIKUM. Rekayasa Web. Modul 1: Introduction CodeIgniter. Laboratorium Teknik Informatika Universitas Pasundan PRAKTIKUM Rekayasa Web Modul 1: Introduction CodeIgniter Laboratorium Teknik Informatika Universitas Pasundan Konten modul: 1. What is CodeIgniter? 2. MVC 3. Template Tujuan praktikum: 1. Praktikan diharapkan

Lebih terperinci

Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS

Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS Oleh: Ardie Jocong pada tutorial ini saya akan mencoba menjelaskan Bagaimana Membuat Desain Layout Website dengan Menggunakan HTML5 dan CSS.. Okeh Langsung

Lebih terperinci

MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119)

MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119) MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119) Disusun oleh : KARTINI, SKom.,MMSI LABORATORIUM KOMPUTER FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL MODUL PRATIKUM PBW 04B CSS : Layout dan Posisi

Lebih terperinci

LAMPIRAN. href="./resources/bootstrap/css/bootstraptheme.min.css" rel="stylesheet" type="text/css"/> <link

LAMPIRAN. href=./resources/bootstrap/css/bootstraptheme.min.css rel=stylesheet type=text/css/> <link LAMPIRAN 1. Halaman Utama include './conn.php'; $page = 'home'; if (isset($_get['p'])) { $page = $_GET['p']; $step = 0; if (isset($_get['s'])) { $step = $_GET['s']; pemesanan

Lebih terperinci

Daftar Isi Elemen Estetis Tumpal Formulasi Tumpal Sebagai Elemen Estetis

Daftar Isi Elemen Estetis Tumpal Formulasi Tumpal Sebagai Elemen Estetis Daftar Isi 2 3 4 5 6 7 8-14 15-16 17-18 19-20 21-23 24 25 26-27 Sejarah Jakarta Logo Logo Utama Rumus Skala Logo Logo Positif dan Diapositif Ukuran Logo Panduan Warna Varian Logo Perlakuan Logo Typeface

Lebih terperinci

Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat

Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat Contoh ke dua layout menggunakan CSS Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat HEADER ISI NAVIGASI

Lebih terperinci

TUGAS UTS WEB STATIS. : Apriyanto Wibowo NIM : : Teknik Informatika S1 (Malam) Pengertian framework

TUGAS UTS WEB STATIS. : Apriyanto Wibowo NIM : : Teknik Informatika S1 (Malam) Pengertian framework TUGAS UTS WEB STATIS Nama : Apriyanto Wibowo NIM : 12141362 Prodi Mata Kuliah : Teknik Informatika S1 (Malam) : Pemrograman Web Statis Pengertian framework Framework adalah kerangka kerja. Framework juga

Lebih terperinci

2011 Ahmad Amarullah

2011 Ahmad Amarullah 1 Silabus Mata Kuliah Program Studi : Sistem Informasi Kode Mata Kuliah : Nama Mata Kuliah : Komputer Aplikasi IT ( XHTML & CSS ) Jumlah SKS : 2 SKS Semester : 1 Deskripsi Mata Kuliah : Mata kuliah ini

Lebih terperinci

Langkah Cara Membuat Form Login Menggunakan PHP dan MySQL Langkah 1: Membuat Tabel MySQL User/Pengguna

Langkah Cara Membuat Form Login Menggunakan PHP dan MySQL Langkah 1: Membuat Tabel MySQL User/Pengguna Dalam tutorial cara membuat form login dengan PHP dan MySQL, kita akan belajar membuat halaman login untuk website dengan menggunakan PHP Session. Tutorial ini merupakan tutorial tingkat dasar, sederhana

Lebih terperinci

Tutorial Layouting CSS Part 1

Tutorial Layouting CSS Part 1 Tutorial Layouting CSS Part 1 Oleh: Cecep Yusuf Pada tutorial kali ini, mari kita belajar tentang layouting HTML dengan CSS, sebenarnya tutorial ini bersumber dari artikel saya juga di situs harian.cheyuz.com,

Lebih terperinci

CSS RANDY CAHYA WIHANDIKA, S.ST., M.KOM

CSS RANDY CAHYA WIHANDIKA, S.ST., M.KOM CSS RANDY CAHYA WIHANDIKA, S.ST., M.KOM CSS Cascading Style Sheet Bahasa yang digunakan untuk mengatur tampilan dan format dari dokumen markup (HTML) CSS didesain untuk memisahkan antara dokumen yang mendeskripsikan

Lebih terperinci

Nama : Dwi Untari. Nim : A TUGAS SEMESTERAN 1. HOME 2. MATERI

Nama : Dwi Untari. Nim : A TUGAS SEMESTERAN 1. HOME 2. MATERI Nama : Dwi Untari Nim : A410090202 TUGAS SEMESTERAN 1. HOME 2. MATERI 3. SILABUS DAN RPP 4. GALERY 5. LATIHAN SOAL 6. BERITA 7. LINK SKRIP 1. Membuat frame

Lebih terperinci

MODUL PRAKTIKUM PEMROGRAMAN WEB (DASAR)

MODUL PRAKTIKUM PEMROGRAMAN WEB (DASAR) MODUL PRAKTIKUM PEMROGRAMAN WEB (DASAR) MATERI KULIAH SEMESTER 3 D3 TEKNIK INFORMATIKA STMIK AMIKOM YOGYAKARTA 2009 Disusun Oleh : ANGGIT DWI HARTANTO, S.KOM MODUL II CASCADING STYLE SHEET (CSS) I. PENGERTIAN

Lebih terperinci

BAB IV CASCADING STYLE SHEET (CSS)

BAB IV CASCADING STYLE SHEET (CSS) BAB IV CASCADING STYLE SHEET (CSS) A. KOMPETENSI DASAR Memahami jenis dan struktur dasar dokumen CSS dan CSS3. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk

Lebih terperinci

SURAT KETERANGAN Hasil Uji Program Tugas Akhir

SURAT KETERANGAN Hasil Uji Program Tugas Akhir SURAT KETERANGAN Hasil Uji Program Tugas Akhir Yang bertanda tangan dibawah ini, menerangkan bahwa Tugas Akhir Mahasiswa Program Diploma 3 Teknik Informatika : Nama : DANIEL SIJABAT NIM : 132406111 Program

Lebih terperinci

CSS Eksternal. Instruktur: Arif Nurwidyantoro

CSS Eksternal. Instruktur: Arif Nurwidyantoro CSS Eksternal Instruktur: Arif Nurwidyantoro Definisi CSS, selain diletakkan dalam file yang sama dengan file HTML, dapat juga diletakkan pada file terpisah. Pernyataan untuk menyambungkan file HTML dengan

Lebih terperinci

TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah

TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah www.ilmuwebsite.com Bagian 7. Membuat Data Pagination Menggunakan

Lebih terperinci

SMH2D3 Web Programming. 4 BAB IV WEB DESIGN CSS3. H a l IDENTITAS. Kajian Web Design menggunakan HTML5 dan CSS3

SMH2D3 Web Programming. 4 BAB IV WEB DESIGN CSS3. H a l IDENTITAS. Kajian Web Design menggunakan HTML5 dan CSS3 4 BAB IV WEB DESIGN CSS3 41 IDENTITAS Kajian Web Design menggunakan HTML5 dan CSS3 Topik Penggunaan CSS3 untuk Design dan Layout Web Kompetensi Utama 1 Mengetahui penggunaan script HTML5 dan CSS3 2 Penggunaan

Lebih terperinci

Analisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya.

Analisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya. TUGAS CSS LAYAOUT PRAKTIKUM 6 1. Percobaan 1 Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya. 2. Percobaan2 Position: relative;

Lebih terperinci

DASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN

DASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN DASAR-DASAR CSS DASAR-DASAR CSS 2015 A. PENGENALAN CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk mempercantik tampilan HTML atau mengatur bagaimana elemen HTML

Lebih terperinci

Membuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 3]

Membuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 3] Membuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 3] Oleh: Arinadi Nur Rohmad Asalamualaikum, Setelah di part sebelumnya kita sudah membuat design dan

Lebih terperinci

VOLUME I No 2 Juli 2013 Halaman

VOLUME I No 2 Juli 2013 Halaman Community Health VOLUME I No 2 Juli 2013 Halaman 112-121 Artikel Penelitian Faktor Faktor Yang Berhubungan Dengan Tingkat Keterlambatan Pengembalian Berkas Rekam Medis Dari Instalasi Rawat Inap Ke Instalasi

Lebih terperinci

BAB III CASCADING STYLE SHEET

BAB III CASCADING STYLE SHEET BAB III CASCADING STYLE SHEET A. KOMPETENSI DASAR Memahami jenis dan struktur dasar dokumen CSS dan CSS3. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk menghasilkan

Lebih terperinci

BAB V PENUTUP. Sesuai dengan apa yang telah dibahas pada bab-bab terdahulu, maka

BAB V PENUTUP. Sesuai dengan apa yang telah dibahas pada bab-bab terdahulu, maka BAB V PENUTUP A. Kesimpulan Sesuai dengan apa yang telah dibahas pada bab-bab terdahulu, maka penulis mengambil kesimpulan sebagai berikut: 1. Telah dibangunnya Sistem Informasi Geografi Masjid Agung Di

Lebih terperinci

XHTML Part 1. Wahyu Catur Wibowo Amalia Zahra

XHTML Part 1. Wahyu Catur Wibowo Amalia Zahra XHTML Part 1 Wahyu Catur Wibowo Amalia Zahra wibowo@cs.ui.ac.id http://wcw.cs.ui.ac.id Well-formed XHTML mengadopsi well-formness dari XML Penulisan elemen XHTML dikatakan well-formed apabila: (a) dalam

Lebih terperinci

Tutorial Membuat Template Joomla 1.5

Tutorial Membuat Template Joomla 1.5 Tutorial Membuat Template Joomla 1.5 Tempate joomla sebenarnya sangat sederhana, tidak rumit sama sekali. Satu file layout html bisa kita konversi langsung menjadi template joomla 1.5 yang valid. Tutorial

Lebih terperinci

MODUL 1 PENGENALAN HTML

MODUL 1 PENGENALAN HTML MODUL 1 PENGENALAN HTML TUJUAN PRAKTIKUM : 1. Praktikan memahami tentang HTML, CSS, frame dan JS pada HTML serta kegunaannya. 2. Praktikan memahami bagaimana cara membuat web menggunakan HTML, CSS dan

Lebih terperinci

Pendahuluan. Hal itu dimungkinkan dengan adanya framework bernama PhoneGap. PhoneGap

Pendahuluan. Hal itu dimungkinkan dengan adanya framework bernama PhoneGap. PhoneGap Pendahuluan Dahulu, membuat aplikasi mobile semacam android packege (apk) boleh dibilang sulit dan tidak praktis. Seseorang butuh kemampuan bahasa pemrograman java yang boleh jadi bukanlah bahasa yang

Lebih terperinci

CSS Cascading Style Sheet

CSS Cascading Style Sheet CSS Cascading Style Sheet Pengenalan CSS CSS adalah singkatan dari Cascading Style Sheets CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style

Lebih terperinci

Membuat Animasi Loading Bubble dengan Full CSS

Membuat Animasi Loading Bubble dengan Full CSS Membuat Animasi Loading Bubble dengan Full CSS Oleh: Christian Rosandhy Masih bermain dengan animasi,, sekarang kita akan belajar membuat sendiri animasi bubble loading dengan bantuan CSS3. Di tutorial

Lebih terperinci

Persiapan. File latihan.rar diekstrak. Contoh apabila Bahan diekstrak di d:\

Persiapan. File latihan.rar diekstrak. Contoh apabila Bahan diekstrak di d:\ CSS & CSS Framework CSS Cascading Style Sheets (CSS) adalah sebuah bahasa yang digunakan untuk menampilkan style dari sebuah dokumen HTML. CSS menjelaskan bagaimana elemen HTML harus ditampilkan. Persiapan

Lebih terperinci

Page 1 of 8 Tutorial Font Awesome UTS Stmik El Rahma

Page 1 of 8 Tutorial Font Awesome UTS Stmik El Rahma Page 1 of 8 Tutorial Font Awesome Nama : Faqum Alf a Dwiyanto NIM : 12141368 Prodi : TI / I Buat tutorial cara penggunaan suatu framework CSS yang diimplementasikan pada layout semantik html. Tulislah

Lebih terperinci

Author : Minarni, S.Kom.,MM

Author : Minarni, S.Kom.,MM S Cascading Style Sheets Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit Kalimantan Tengah Internet Multimedia Keuntungan Menggunakan CSS Mempermudah dan mempersingkat pembuatan dan pemeliharaan

Lebih terperinci

Pemrograman Web PRAKTIKUM 4. Bootstrap. TUJUAN BELAJAR Mahasiswa dapat menggunakan Bootstrap untuk meningkatkan proses pengaturan layout laman web

Pemrograman Web PRAKTIKUM 4. Bootstrap. TUJUAN BELAJAR Mahasiswa dapat menggunakan Bootstrap untuk meningkatkan proses pengaturan layout laman web PRAKTIKUM 4 Bootstrap TUJUAN BELAJAR Mahasiswa dapat menggunakan Bootstrap untuk meningkatkan proses pengaturan layout laman web MATERI Sifat responsive bootstrap, file-file bootstrap, konsep grid bootstrap,

Lebih terperinci

Prak. E-Bussiness & E-Commerce HTML. (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto.wordpress.com

Prak. E-Bussiness & E-Commerce HTML. (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto.wordpress.com Prak. E-Bussiness & E-Commerce HTML (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto@gmail.com liyantanto.wordpress.com Pendahuluan HTML adalah sebuah bahasa markup yang digunakan untuk membuat

Lebih terperinci

Membuat Layout Desain Awal dengan Photoshop

Membuat Layout Desain Awal dengan Photoshop 2 Websiteku Membuat Layout Desain Awal dengan Photoshop jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height

Lebih terperinci

Materi 9 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya

Materi 9 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya Materi 9 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com Nama Mahasiswa NIM Kelas Kompetensi Dasar Memahami perkembangan HTML5.

Lebih terperinci

Aplikasi Cordova dengan Bootstrap

Aplikasi Cordova dengan Bootstrap Aplikasi Cordova dengan Bootstrap Juli 2015 Tingkat: Oleh : Feri Djuandi Pemula Menengah Mahir Artikel kali ini akan menjelaskan cara membuat sebuah aplikasi sederhana menggunakan API Cordova. Hasil yang

Lebih terperinci

CSS (Cascade Style Sheet)

CSS (Cascade Style Sheet) CSS (Cascade Style Sheet) CSS merupakan bahasa (script) yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa

Lebih terperinci

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) Instruktur: Arif Nurwidyantoro Intro Cascading Style Sheets (CSS) digunakan untuk mendefinisikan bagaimana sebuah elemen HTML ditampilkan. Sebuah elemen HTML dapat ditampilkan

Lebih terperinci