Membuat Template Web Responsive Dengan HTML Dan CSS - Malas Ngoding

30/7/2017

Membuat Template Web Responsive Dengan HTML dan CSS - Malas Ngoding

(http://www.histats.com)

Home (http://www.malasngoding.com) » Posts (http://www.malasngoding.com) » Membuat Template Web Responsive Dengan HTML dan CSS

Membuat Template Web Responsive Dengan HTML dan CSS (http://www.malasngoding.com/author/admin/) • 10 May 2017 • By Diki Alfarabi Hadi (http://www.malasngoding.com/author/admin/) CSS (http://www.malas (http://www.malasngoding.com/category/cs ngoding.com/category/css/) s/) Web Design (http://www.mal (http://www.malasngoding.com/category asngoding.com/category/web-design/) /web-design/)

Membuat Template Web Responsive Denga n HTML dan CSS – – Pada tutorial ini kita akan membuat sebuah template web

sederhana responsive dengan menggunakan HTML dan CSS. karena kemarin ada teman-teman yang rutin mengikuti tutorial di www.malasngoding.com www.malasngoding.com meminta untuk di buatkan tutorial Membuat Template Web Responsive Dengan HTML dan CSS ini. untuk menyelesaikan tugas pemrograman web dari kampus. Saya akan mencoba membantu dengan menjelaskan cara pembuatan template website atau blog sederhana. dan tentunya responsive (https://www.w3schools.com/html/html_responsive.asp).

Membuat Template Web Responsive Dengan HTML dan CSS Baiklah, dengan bismillah langsung langsung saja kita mulai untuk membuat template template blog sederhana dengan HTML dan CSS ini. semoga berkah dan bermanfaat. PENTING Pada saat teman-teman memulai mempelajari tutorial kali ini, sangat di sarankan agar teman-teman mempelajari dulu tutorial-tutorial HTML dan CSS dasar yang telah kita bahas di www.malasngoding.com sebelumnya. Agar tidak ada masalah dan insyaallah dapat lebih mudah memberikan pemahaman. Tutorial dasar HTML (http://www.malasngoding.com/category/html) Tutorial dasar CSS (http://www.malasngoding.com/category/css) Atau teman-teman bisa melihat pada bagian list tutorial dasar di www.malasngoding.com. agar bisa mempelajarinya step by step .

http://www.malasngoding.com/membuat-template-web-responsive-dengan-html-dan-css/

1/10

30/7/2017


Membuat Template Web Responsive Dengan HTML dan CSS Apa saja yang harus di lakukan untuk membuat template website sederhana yang responsive dengan HTML dan CSS ? Buat sebuah le HTML. di sini saya membuat le HTML dengan nama index.html Buat sebuah le CSS. untuk menyimpan syntax CSS. di sini saya membuat sebuah le CSS dengan nama style.css Berikut adalah syntax HTML dan CSS nya. silahkan teman-teman copas. dan akan saya jelaskan setelah teman-teman selesai ikuti. index.html


2/10

30/7/2017


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

MalasNgoding's Blog

Malas Ngoding's Blog

Tutorial pemrograman web, mobile dan desktop lengkap berbahasa indonesia. da

Home

Tutorial

Kontak

Tutorial

Selamat datang di www.malasngoding.com, situs ini menyediakan tutorial pemrograman web,

Ebook Gratis

Teman-teman bisa mendapatkan ebook tutorial gratis di sini

Di Posting Oleh Diki Alfarabi Hadi
Selengkapnya

Di Posting Oleh Diki Alfarabi Hadi
Selengkapnya

→

→

style.css 1 2

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300);


3/10

30/7/2017

3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86


body { background: #eee; margin:0; font-family: 'Open Sans', sans-serif; } hr { border:0; background:#dedede; height:1px; } header{ text-align: center; color: #232323; } header .judul{ font-size: 17pt; } header .deskripsi{ font-size: 11pt; } .wrap { width: 950px; margin:25px auto; } nav.menu ul { overflow:hidden; color:#fff; list-style: none; float:left; padding:0; width: 650px; margin:0 0 0; background: #1abc9c; -webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55); -moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55); box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55); } nav.menu ul li { margin:0; float:left; } nav.menu ul a { padding:25px; display:block; font-weight:600; font-size: 16px; color:#fff; text-transform: uppercase; transition: all 0.5s ease; text-decoration: none; } nav.menu ul a:hover { text-decoration: underline; background:#16a085; } .sidebar { float:right; width:275px; } .sidebar .widget { padding:25px; margin:0 0 25px; background:#fff; border-bottom: 2px solid #fff; transition: all 0.5s ease; } .sidebar .widget:hover { border-bottom: 2px solid #3498db; } .sidebar .widget h2 { padding:0;


4/10

30/7/2017

87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 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 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170


margin:0 0 15px; color:#3498db; font-size: 18px; font-weight:800; text-transform: uppercase; } .sidebar .widget p { font-size: 14px; } .sidebar .widget p:last-child { margin:0; } .blog { float:left; } .conteudo { width:600px; padding:25px; margin:25px auto; background: #fff; border:1px solid #dedede; -webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35); -moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35); box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35); } .conteudo img { min-width: 650px; margin:0 0 25px -25px; max-width: 650px; } .conteudo h1 { padding:0; margin:0 0 15px; font-weight: normal; color: #666; font-family: Georgia; } .conteudo p:last-child { margin: 0; } .conteudo .continue-lendo { color:#000; transition: all 0.5s ease; text-decoration: none; font-weight: 700; } .conteudo .continue-lendo:hover { margin-left:10px; } .post-info { float: right; font-size: 12px; margin: -10px 0 15px; text-transform: uppercase; } @media screen and (max-width: 960px) { .header { position:inherit; } .wrap { width: 90%; margin:25px auto; } .sidebar { width:100%; margin:25px 0 0; float:right; } .sidebar .widget { padding:5%;


5/10

30/7/2017


171 } 172 173 nav.menu ul { 174 width: 100%; 175 } 176 177 nav.menu ul { 178 float:inherit; 179 } 180 181 nav.menu ul li { 182 float:inherit; 183 margin:0; 184 } 185 186 nav.menu ul a { 187 padding:15px; 188 font-size: 16px; 189 border-top:1px solid #1abf9f; 190 border-bottom:1px solid #16a085; 191 } 192 193 .blog { 194 width:90%; 195 } 196 197 .conteudo { 198 float:inherit; 199 margin:0 auto 25px; 200 width:101%; 201 border:1px solid #dedede; 202 padding:5%; 203 background: #fff; 204 } 205 206 .conteudo img { 207 max-width: 110%; 208 margin:0 0 25px -5%; 209 min-width: 110%; 210 } 211 212 .conteudo .continue-lendo:hover { 213 margin-left:0; 214 } 215 216 217 } 218 219 @media screen and (max-width: 460px) { 220 221 nav.menu ul a { 222 padding:15px; 223 font-size: 14px; 224 } 225 226 .sidebar { 227 display:none 228 } 229 .post-info { 230 display:none; 231 } 232 233 .conteudo { 234 margin:25px auto; 235 } 236 237 .conteudo img { 238 margin:-5% 0 25px -5%; 239 } 240 }

Oke selesai. simpan kedua le tersebut. kemudian jalankan pada browser. Membuat Template Web Responsive Dengan HTML dan CSS.

dan hasilnya adalah sebagai berikut. template web responsive sederhana kita telah jadi.


6/10

30/7/2017


Membuat Template Web Responsive Dengan HTML dan CSS

jika di akses dari ukuran layar smartphone, maka layout akan di sesuaikan dengan otomatis(responsive).

Membuat Template Web Responsive

Penjelasan Sebenarnya dengan hanya memperhatikan penulisan dan kegunaan syntax html atau css pada contoh template web responsive di atas, teman-teman pasti sudah bisa memahaminya. karena kita telah mengulasnya pada tutorial-tutorial CSS dan HTML dasar sebelumnya di www.malasngoding.com. http://www.malasngoding.com/membuat-template-web-responsive-dengan-html-dan-css/

7/10

30/7/2017


Atau teman-teman bisa download EBOOK GRATIS (EBOOK BELAJAR HTML & CSS DASAR (http://www.malasngoding.com/download-ebook-belajar-html-dan-css-dasar-gratis/)) dari www.malasngoding.com. BACA JUGA : Membuat tampilan layout website sederhana dengan HTML dan CSS (http://www.malasngoding.com/membuattampilan-layout-website-sederhana-dengan-html-dan-css/) Sekian tutorial Membuat Template Web Responsive Dengan HTML dan CSS . semoga dapat bermanfaat untuk orang banyak. terima kasih. sampai jumpa di tutorial selanjutnya di www.malasngoding.com (http://www.malasngoding.com).

Incoming search terms: cara membuat template website dengan dreamweaver Coding membuat template website template web desain responsife menggunakan html css dengan analisis Membuat template web cara membuat teplate we contoh template untuk membuat web cara membuat web responsive dengan css buat template web contoh css mobile cara membuat temoalte web dengan html5 dan css

SHARE :

Facebook (http://www.facebook.com/share.php?u=http://www.malasngoding.com/membuattemplate-web-responsive-dengan-html-dan-css/) Twitter (http://twitter.com/share?text=Membuat Template Web Responsive Dengan HTML dan CSS&url=http://www.malasngoding.com/membuat-template-web-responsive-dengan-html-dan-css/) Google+ (https://plusone.google.com/_/+1/conrm?url=http://www.malasngoding.com/membuattemplate-web-responsive-dengan-html-dan-css/) LinkedIn (http://www.linkedin.com/shareArticle? mini=true&url=http://www.malasngoding.com/membuat-template-web-responsive-dengan-html-dancss/&title=Membuat Template Web Responsive Dengan HTML dan CSS) Digg (http://digg.com/submit?url=http://www.malasngoding.com/membuat-template-webresponsive-dengan-html-dan-css/) StumbleUpon (http://www.stumbleupon.com/submit?url=http://www.malasngoding.com/membuattemplate-web-responsive-dengan-html-dan-css/&title=Membuat Template Web Responsive Dengan HTML dan CSS)

Tags: cara membuat template html di notepad (http://www.malasngoding.com/tag/cara-membuat-template-html-dinotepad/), cara membuat template website dengan bootstrap (http://www.malasngoding.com/tag/cara-membuattemplate-website-dengan-bootstrap/), cara membuat template website dengan css (http://www.malasngoding.com/tag/cara-membuat-template-website-dengan-css/), cara membuat template website dengan dreamweaver (http://www.malasngoding.com/tag/cara-membuat-template-website-dengan-dreamweaver/), cara membuat template website dengan photoshop (http://www.malasngoding.com/tag/cara-membuat-template-websitedengan-photoshop/), cara membuat web responsive dengan bootstrap (http://www.malasngoding.com/tag/caramembuat-web-responsive-dengan-bootstrap/), cara membuat web responsive dengan css (http://www.malasngoding.com/tag/cara-membuat-web-responsive-dengan-css/), cara mudah membuat template web (http://www.malasngoding.com/tag/cara-mudah-membuat-template-web/), contoh script web responsive (http://www.malasngoding.com/tag/contoh-script-web-responsive/), contoh template web responsive (http://www.malasngoding.com/tag/contoh-template-web-responsive/), Desain Website (http://www.malasngoding.com/tag/desain-website/), html5 dan css3 (http://www.malasngoding.com/tag/html5-danhttp://www.malasngoding.com/membuat-template-web-responsive-dengan-html-dan-css/

8/10

30/7/2017


css3/), notepad ++ (http://www.malasngoding.com/tag/notepad/), template blog (http://www.malasngoding.com/tag/template-blog/), template html dan css gratis (http://www.malasngoding.com/tag/template-html-dan-css-gratis/), template responsive (http://www.malasngoding.com/tag/template-responsive/), template web gratis (http://www.malasngoding.com/tag/template-web-gratis/), web design (http://www.malasngoding.com/tag/web-design/)

About the author



Diki Alfarabi Hadi Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other. Author prole (http://www.malasngoding.com/author/admin/) • All posts by Diki Alfarabi Hadi (http://www.malasngoding.com/author/admin/) • ( )

(http://shop.malasngoding.com/)

Discussion



Foundation Part 3 : Grid System Framework Foundation – Malas Ngoding 2 months ago

[…] BACA JUGA : Cara Membuat Template Website Responsive Dengan HTML dan CSS […]

 Reply (http://www.malasngoding.com/membuat-template-web-responsive-dengan-html-dan-css/?replytocom=6110#respond)

Write a Comment Your email address will not be published. Required elds are marked * Comment

Name *


9/10

30/7/2017


Email *

Website

Kirim komentar CENTANG untuk bisa mengirimkan komentar. [ Verikasi bukan robot ]

Tutorial CSS Dasar #1. Pengenalan CSS (http://www.malasngoding.com/belajar-css-pengertian-dan-pengenalan-css/) #2. Penulisan CSS (http://www.malasngoding.com/belajar-css-dasar-cara-penulisan-css/) #3. Background CSS (http://www.malasngoding.com/belajar-css-mengubah-background-dengan-css/) #4. Margin dan Padding CSS (http://www.malasngoding.com/belajar-css-margin-dan-padding-pada-css/) #5. Font CSS (http://www.malasngoding.com/belajar-css-mengatur-font-dengan-css/) #6. Link / Hyperlink CSS (http://www.malasngoding.com/belajar-css-mengatur-hyperlink-dengan-css/) #7. Format Text CSS (http://www.malasngoding.com/belajar-css-mengatur-format-text-dengan-css/) #8. Position CSS (http://www.malasngoding.com/belajar-css-mengenal-position-css/) #9. Border CSS (http://www.malasngoding.com/belajar-css-mengubah-border-dengan-css/) #10. List CSS (http://www.malasngoding.com/belajar-css-mengubah-list-dengan-css/) #11. Float CSS (http://www.malasngoding.com/belajar-css-menggunakan-oat-css/) #12. Tutorial CSS Lainnya (http://www.malasngoding.com/category/css)

Tutorial CSS3 Dasar #1. Pengenalan CSS3 (http://www.malasngoding.com/tutorial-css3-part-1-pengertian-dan-pengenalan-css3/) #2. Rounded Corner CSS3 (http://www.malasngoding.com/tutorial-css3-part-2-membuat-sudut-melengkung-dengan-css3/) #3. Warna Gradient CSS3 (http://www.malasngoding.com/membuat-warna-gradient-css3/) #4. Efek Bayangan CSS3 (http://www.malasngoding.com/membuat-efek-bayangan-dengan-css3/) #5. Transform CSS3 (http://www.malasngoding.com/tutorial-css3-part-5-belajar-css3-transform/) #6. Transition CSS3 (http://www.malasngoding.com/tutorial-css3-part/) #7. Animasi CSS3 (http://www.malasngoding.com/tutorial-css3-part-7-membuat-efek-animasi-css3/) #8. Tutorial CSS3 Lainnya (http://www.malasngoding.com/category/css3)


10/10

Membuat Template Web Responsive Dengan HTML Dan CSS - Malas Ngoding

Recommend Documents