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]
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...--> -->
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