Membuat Desain Layout Website Responsive Dengan Html5

Halo guys, sebelumnya aku sudah pernah membahas wacana bagaimana menciptakan desain layout website yaitu membuat design layout website dengan tabel dan menciptakan design layout website dengan tag div. Nah, kali ini sama ibarat sebelumnya cuma agak sedikit berbeda. Yap, kita akan menciptakan layout website kita menjadi responsive. Apa itu responsive???

Responsive sanggup diartikan “menyesuaikan”, artinya kita sanggup menciptakan tampilan website yang sanggup berubah dan menyesuaikan dengan ukuran dari layar device. Contohnya dari ukuran versi desktop ke versi mobile.

Web responsive telah banyak dipakai di website-website dengan design yang lebih modern. Karena perkembangan website yang begitu pesat, maka wajib bagi kita untuk mengupgrade ilmu seputar web design.

Oke eksklusif saja simak tutorialnya sebagai berikut :

1. Membuat kerangka halaman responsive dengan HTML
Kita akan menciptakan halaman responsive dengan HTML5, tentu saja banyak yang gres di dalam HTML5. Jika ingin mengetahui lebih banyak wacana HTML5 sanggup berkunjung ke w3school.com. Kerangka umum untuk menciptakan halaman sebagai berikut :

<!DOCTYPE html> <html lang="en"> <head> </head> <body id="home">  <div id="wrapper">   <header><!--header-->    <nav>    </nav>   </header><!--/header-->      <section id="main-content"><!--section-->    <div id="featured"><!--featured-->         </div> <!--/featured-->        <hr/>    <div id="latest"><!--latest-->     <section class="left-col"><!--left column-->       </section> <!--/left column-->           <aside class="sidebar"><!--sidebar-->       </aside><!--/sidebar-->    </div><!--/latest-->        <div class="clearfix"></div>    <div id="about">         </div>        </section><!--/section-->   <hr/>   <footer>       </footer>   </div>   </body> </html>

Setiap area kita berikan id dan class untuk memudahkan dalam pengaturan style CSS. Sekilas dari tag HTML di atas maka layout yang kita buat terlihat ibarat ini :


2. Membuat style CSS
Buat folder dengan nama css lalu buat file css dan beri nama style.css, lalu masukkan ke folder css tadi. Berikut code css nya :

body {     background: #F9F9F9;     color: #222;     font-family: 'Droid Serif', serif;     font-size: 16px; }  #wrapper {     margin: 10px auto;     max-width: 980px;     width: 90%;     background: #fff;     padding: 10px 0; }  header {     padding: 3px; } ::-moz-selection {     background-color: #91D8f7;     color: #fff; } ::selection {     background-color: #91D8f7;     color: #fff; } a {     outline: 0;     color: #222;     text-decoration: none; } a:hover {     text-decoration: underline; } p a:hover {     color: #318CE7; } a:active {     outline: 0;     position: relative;     top: 2px; } .clearfix {     clear: both; } h1 {     font-size: 89px;     font-family: 'Open Sans', serif;     line-height: 75px;     padding: 10px; } h1 a:hover {     text-decoration: none;     color: #318CE7; } h2 {     font-family: Helvetica;     font-size: 18px;     padding: 10px; } h3 {     font-family: 'Droid Serif', serif;     font-size: 30px; } h4 {     font-family: 'Droid Serif', serif;     padding: 3px;     margin: 5px 0 0; } h4 a {     text-decoration: underline; } nav {     background: #222;     padding: 0;     margin: 10px 0; } nav a {     color: #F9F9F9;     display: block;     float: left;     padding: 10px; } nav a:visited {     color: #f9f9f9; } nav a:hover {     text-decoration: none;     background: #318CE7; } nav a:active {     position: relative;     top: 0; } .left-col {     width: 70%;     float: left; } .sidebar {     width: 20%;     float: right;     margin-bottom: 10px; } #about, #featured, #latest {     padding: 20px; } p {     padding: 0 5px; } ul {     list-style: none; } ul li {     margin: 0 5px; } footer {     padding: 5px; } pre {     overflow: scroll;     font-size: 10px; }

3. Membuat style Media Queries
Buat file CSS media queries yang fungsinya supaya halaman web sanggup responsive, beri nama media-queries.css. Dalam file CSS tersebut atur ukuran font dari h1, h2 dan ukuran lainnya untuk sanggup menyesuaikan saat layar halaman web berubah.

@media screen and (max-width:478px) {  h1 {   font-size: 70px;   padding: 1px;  }  h2 {   font-size: 13px;   padding: 1px;  }  body {   font-size: 13px;  } }@media screen and (max-width:740px) {     .left-col, .sidebar {     width: 100%} }img {     max-width: 100%;     height: auto; }

4. Membuat Reset style CSS
Buat file css dan beri nama reset.css.

a , abbr , acronym , address , applet , article , aside , audio , b , big , blockquote , body , canvas , caption , center , cite , code , command , datalist , dd , del , details , dfn , div , dl , dt , em , embed , fieldset , figcaption , figure , font , footer , form , h1 , h2 , h3 , h4 , h5 , h6 , header , hgroup , html , i , iframe , img , ins , kbd , keygen , label , legend , li , meter , nav , object , ol , output , p , pre , progress , q , s , samp , section , small , source , span , strike , strong , sub , sup , table , tbody , tdvideo , tfoot , th , thead , tr , tt , u , ul , var {     background: 0 0;     border: 0;     font-size: 100%;     margin: 0;     padding: 0;     vertical-align: baseline; }

Berikut yakni source code lengkap untuk bab HTML.

      Membuat Layout Website Responsive                <!--[if IE]>     <![endif]
<!--header

My Personal Website

Selamat Datang di Website Saya





Artikel Populer :

Artikel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at ipsum posuere, quis dapibus metus tempus. Vivamus sodales egestas consequat. Donec sodales aliquet lectus pellentesque dignissim. Curabitur ipsum magna, sodales quis auctor quis, pulvinar eu neque.llis...
More →

Artikel Terbaru :


Artikel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at ipsum posuere, quis dapibus metus tempus.   More →

Artikel 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at ipsum posuere, quis dapibus metus tempus.   More →

Artikel 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at ipsum posuere, quis dapibus metus tempus.   More →

Artikel 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at ipsum posuere, quis dapibus metus tempus.   More →

Artikel 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at ipsum posuere, quis dapibus metus tempus.   More →

Tentang

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at ipsum posuere, quis dapibus metus tempus. Vivamus sodales egestas consequat. Donec sodales aliquet lectus pellentesque dignissim. Curabitur ipsum magna, sodales quis auctor quis, pulvinar eu neque.llis...


© 2016 - Wim Sonevel
--> -->
Jalankan di browser, minimize atau maximize layar browser untuk melihat perubahan pada tampilan halaman web.



Source : nyekrip.com 

Sekian tutorial dari aku agar bermanfaat. Selamat mencoba.
Happy coding :)

Comments

Post a Comment

Popular posts from this blog

Pewarnaan Objek Geometri Di Java 2D

Image
Pewarnaan (filling) sanggup diterapkan ke dalam pembuatan objek geometri. Objek geometri sanggup digambar dengan method fill atau draw . Untuk menambahkan warna pada objek geometri, kita sanggup menambahkan method dari kelas Graphics. void setColor(Color c)  Objek Color didefinisikan sebagai sebuah warna. Kelas Color secara default memakai rentan warna RGB. Berikut ini yaitu pola penggunaan Color di Java 2D. /** * * @author Wim Sonevel */ import java.awt.*; import java.awt.geom.*; import javax.swing.*; public class SegiPanjangWarna extends JApplet { public static void main(String[] args) { JFrame frame = new JFrame(); frame.setTitle("Persegi Panjang Warna"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JApplet applet = new SegiPanjangWarna(); applet.init(); frame.getContentPane().add(applet); frame.pack(); frame.setVisible(true); } @Override public void init() { JPan...
Read more

(Tutorial Ios) Custom Uitableviewcell In Uitableview

Image
Hallo gaes, sudah usang rasanya tidak menulis tutorial wacana iOS. Nah pada kesempatan kali ini aku akan coba membahas wacana UITableView . UITableView merupakan widget yang biasa dipakai untuk menampilkan data dalam bentuk list. Pada umumnya komponen di dalam UITableView disebut dengan UITableViewCell . Komponen UITableViewCell inilah yang mengisi setiap baris-baris di dalam list. Secara default, UITabelViewCell cuma berisi title dan subtitle. Maka dari itu jikalau ingin menciptakan baris yang lebih komplek maka kita perlu menciptakan custom UITableViewCell . Oke singkat penjelasannya di atas, kini eksklusif kita praktekkan aja. Pertama buat project gres di Xcode, untuk bahasa pemrogramannya memakai Swift 3. Kemudian pada halaman storyboard-nya kita memakai Table View Controller . Drag and drop Table View Controller ke halaman storyboard , kemudian jadikan sebagai Root View Controller (alias tanda panah berada di Table View Controller). Setelah itu tambahkan beb...
Read more

Tugas Komplemen Terakhir

(Ainun Najib) 1. Buat sebuah aplikasi berbasis GUI untuk registrasi siswa gres : - hitung nilai tes untuk mata pelajaran tertentu dan jikalau rata-rata <  70 maka gagal - inputkan data-data siswa dan simpan dalam database - tampilkan data dalam bentuk tabel - data sanggup disimpan, diedit, dihapus dan dicari (Moh. Fachrudin) 2. Buat sebuah aplikasi berbasis GUI untuk registrasi musyrif gres : - hitung nilai tes b.arab, b.ing, Afkar, dan Al-Quran dan jikalau rata - rata < 70 maka gagal - inputkan data-data siswa dan simpan dalam database - tampilkan data dalam bentuk tabel - data sanggup disimpan, diedit, dihapus dan dicari (Aulia) 3. Buat sebuah aplikasi berbasis GUI untuk menghitung nilai selesai suatu matakuliah dan berikan nilai huruf.    - Rumus nilai selesai = kiprah 20% + uts 30% + uas 50 %    - Berikan nilai karakter :       46-55 Nilai C         56-65 Nilai C+  ...
Read more