Tugas uts web statis

Transkripsi

1 Tugas uts web statis Nama :Tri subadar NIM : Prodi :Teknik informatika S1 (malam) Mata kuliah :Perogram web setatis METRO UI METRO UI CSS Fremwork yang dapat di gunakan untuk membuat websait dengan tampilan yang tidak membosankan dan memang sangat menarik / berbeda dengan yanglain kerena tampilannya separti serasa menggunakan windous 8. METRO UI CSS ini style css yang tampilan nya memang seperti windous 8. Ber kunjunglah di

2 2. Cara menggunakan Framework css bootstrap Anda perlu menambahkan beberapa kode seperti ini. <script src="js/jquery/jquery.min.js"></script> <script src="js/jquery/jquery.widget.min.js"></script> <script src="js/metro/metro.min.js"></script> 3. untuk membagi colom di lakukan dengan cara seperti ini 1. <div class="row"> 2. <div class="span1">span1 3. <div class="span1">span1 4. <div class="span1">span1

3 5. <div class="span1">span1 6. <div class="span1">span1 7. <div class="span1">span1 8. <div class="span1">span1 9. <div class="span1">span1 10. <div class="span1">span1 11. <div class="span1">span1 12 <div class="span1">span1 13. <div class="span1">span1 14. <div class="row"> 15 <div class="span2">span2 16. <div class="span3">span3 17. <div class="span7">span7 18. <div class="row"> 19. <div class="span12">span12 4. Scrinshot hasil dari sorource kode

4 Agak mudah tapi memper indah tema 5.Contoh membuat form sederhana - Contoh TCKBOK dan radio yang saya buat

5 - Kemudian HTML yang di buat dengan menggunakan aplikasi dari DreamWeaver - 6. Membuat form yang mudah misalnya,membuat ,sandi dan lain-lain 1. <form> 2. <fieldset> 3. <legend>legend</legend> 4. <label>label name</label>

6 5. <div class="input-control text" data-role="input-control"> 6. <input type="text" placeholder="type text"> 7. <button class="btn-clear" tabindex="-1"></button> 9. <label>label name</label> 10. <div class="input-control password" data-role="input-control"> 11. <input type="password" placeholder="type password" autofocus> 12. <button class="btn-reveal" tabindex="-1"></button> 13. <div class="input-control checkbox" data-role="input-control"> <label> 14. <input type="checkbox" checked /> 15. <span class="check"></span> 16 </label> <div> 17. <div class="input-control radio default-style" data-role="input-control"> <label> 18.< input type="radio" name="r1" checked /> 19 <span class="check"></span> </label> 20. <div class="input-control radio default-style" data-role="input-control"> <label> 21. <input type="radio" name="r1" /> 22. <span class="check"></spa 7. Tiles komponen Tiles ini adalah representasi dari aplikasi atau sub modul. Isi ditampilkan pada Tiles Anda bisa, dan idealnya harus, berubah secara teratur, terutama jika Tiles Anda dapat berkomunikasi baru, informasi real

7 -time untuk pengguna Tiles bisa menunjukkan kombinasi teks dan gambar, dan lencana untuk menunjukkan status.

8 9. Navigasi Bar Componen 1.<div class="tile half"> 2.<div class="tile"> 3.<div class="tile double"> 4.<div class="tile triple"> 5.<div class="tile quadro"> 10. Anda dapat mengubah <nav> tag untuk <a>, <div>atau <span> kemudian anda dapat melakukan perbaikan navigasi atas atau bawah 1.<nav class="navigation-bar fixed-top">...</nav> 2.<nav class="navigation-bar fixed-bottom">...</nav>

9 11. Mengubah warna bar navigasi dengan kode di bawah 1.<nav class="navigation-bar dark">...</nav> 2.<nav class="navigation-bar light">...</nav> 3.<nav class="navigation-bar white">...</nav> 12.conto mewarnai navigasi 13.Botton set component Botton sangat penting untuksetiap kerangka Metro ui css dan kita akan mudah untuk menciptakan tombol 1.<button class="button large primary">large</button> 2.<button class="button success">default</button> 3.<button class="button small info">small</button> 4.<button class="button mini danger">mini</button>

10 14. Untuk merubah ukuran tombol kita dapat menggunakan tombol Build- in class Besar, kecil dan mini Untuk tombol styling booton kita dapat menggunakan tombol yang telah di sediakan booton subclass : primery info 15. Window componen Pop-up atau window modal ini berfungsi untuk peng informasikn/ peringatan Kepada pengunjung. 16. Tampilan dari widow modal,untuk membuat window / komponen window Kemudian yang harus di lakukan untuk bentuk shadow, penngaktifan / non aktifan 17. Manual creating HTML selanjutnya

11 17. Untuk mengatur mode aktif kita dapat menambahkan INACTIVE, untuk DIV dengan class WINDOW. 18. Buat mengatur shadow utuk window Dapat menambahkan subclass SHADOW untuk,div dengan class WINDOW

12 18. Inilah satu contoh tampilan wep yang menggunakan METRO UI Itulab beberapa tutorial MERO UI CSS. yang dapat saya sampekan dan selamat mencoba. Untuk lebih lengkapnya anda dapat mengunjungi

13