(http://www.histats.com) (http://www.histats.com)
Home (http://www.malasngoding.com) » Posts (http://www.malasngoding.com) » Membuat Template Web Responsive Dengan HTML dan CSS 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
Membuat Template Web Responsive Dengan HTML dan CSS
Membuat Template Web Responsive Denga
Membuat Template Web Responsive Denga n HTML dan CSS
n HTML dan CSS
– Pada tutorial ini kita akan membuat sebuah template web
– Pada tutorial ini kita akan membuat sebuah template web
sederhana responsive dengan menggunakan HTML dan CSS. karena kemarin ada teman-teman yang rutin mengikuti
sederhana responsive dengan menggunakan HTML dan CSS. karena kemarin ada teman-teman yang rutin mengikuti
tutorial di w
tutorial di www.malasngoding.com meminta untuk di buatkan tutorial
ww.malasngoding.com meminta untuk di buatkan tutorial
Membuat Template Web Responsive Dengan HTML
Membuat Template Web Responsive Dengan HTML
dan CSS
dan CSS
ini. untuk menyelesaikan tugas pemrograman web dari kampus.
ini. untuk menyelesaikan tugas pemrograman web dari kampus.
Saya akan mencoba membantu dengan menjelaskan cara pembuatan template website atau blog sederhana. dan
Saya akan mencoba membantu dengan menjelaskan cara pembuatan template website atau blog sederhana. dan
tentunya
tentunya
responsive
responsive
(https://www.w3schools.com/html/html_responsive.asp).
(https://www.w3schools.com/html/html_responsive.asp).
Membuat Template Web Responsive Dengan HTML dan CSS
Membuat Template Web Responsive Dengan HTML dan CSS
Baiklah, dengan bismillah langsu
Baiklah, dengan bismillah langsung saja kita mulai untuk
ng saja kita mulai untuk membuat templa
membuat template blog sederhana dengan HTML dan CSS
te blog sederhana dengan HTML dan CSS ini.
ini.
semoga berkah dan bermanfaat.
semoga berkah dan bermanfaat.
PENTING
PENTING
Pada saat teman-teman memulai mempelajari tutorial kali ini, sangat di sarankan agar teman-teman mempelajari dulu
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.
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.
Agar tidak ada masalah dan insyaallah dapat lebih mudah memberikan pemahaman.
Tutorial dasar HTML (http://www.malasngoding.com/category/html)
Tutorial dasar HTML (http://www.malasngoding.com/category/html)
Tutorial dasar CSS (http://www.malasngoding.com/category/css)
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
Atau teman-teman bisa melihat pada bagian list tutorial dasar di www.malasngoding.com. agar bisa mempelajarinya
step
step
by step
by step
..
ByBy Diki Alfarabi Hadi Diki Alfarabi Hadi (http:/(http://www.malasngoding.com/author/admin/)/www.malasngoding.com/author/admin/) •• 10 May 201710 May 2017 •• CSS
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.
style.css
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 <!DOCTYPE html> <html> <head> <title>MalasNgoding's Blog</title><link rel="stylesheet" type="text/css" href="style.css"> </head>
<body>
<!-- bagian header template --> <header>
<h1 class="judul">Malas Ngoding's Blog</h1>
<p class="deskripsi">Tutorial pemrograman web, mobile dan desktop lengkap berbahasa indonesia. da </header>
<!-- akhir bagian header template --> <div class="wrap"> <!-- bagian menu --> <nav class="menu"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Tutorial</a> </li> <li> <a href="#">Kontak</a> </li> </ul> </nav>
<!-- akhir bagian menu --> <!-- bagian sidebar website --> <aside class="sidebar">
<div class="widget"> <h2>Tutorial</h2>
<p>Selamat datang di www.malasngoding.com, situs ini menyediakan tutorial pemrograman web, </div>
<div class="widget"> <h2>Ebook Gratis</h2>
<p>Teman-teman bisa mendapatkan ebook tutorial gratis di sini <a target="_blank" href="ht </div>
</aside>
<!-- akhir bagian sidebar website --> <!-- bagian konten Blog -->
<div class="blog">
<div class="conteudo"> <div class="post-info">
Di Posting Oleh <b>Diki Alfarabi Hadi</b> </div>
<img src="http://www.malasngoding.com/wp-content/uploads/2016/02/tutorial-css-bahasa-indo <h1> Template Sederhana HTML & CSS </h1>
<hr> <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incid </p>
<a href="#" class="continue-lendo">Selengkapnya →</a>
</div>
<div class="conteudo"> <div class="post-info">
Di Posting Oleh <b>Diki Alfarabi Hadi</b> </div>
<img src="http://www.malasngoding.com/wp-content/uploads/2016/02/tutorial-html-bahasa-ind <h1> Belajar HTML Lengkap </h1>
<hr> <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incid </p>
<a href="#" class="continue-lendo">Selengkapnya →</a>
</div> </div>
<!-- akhir bagian konten Blog --> </div> </body> </html> 1 2 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300);
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;
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%;
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.
171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 } nav.menu ul { width: 100%; } nav.menu ul { float:inherit; } nav.menu ul li { float:inherit; margin:0; } nav.menu ul a { padding:15px; font-size: 16px;border-top:1px solid #1abf9f; border-bottom:1px solid #16a085; } .blog { width:90%; } .conteudo { float:inherit; margin:0 auto 25px; width:101%;
border:1px solid #dedede; padding:5%; background: #fff; } .conteudo img { max-width: 110%; margin:0 0 25px -5%; min-width: 110%; } .conteudo .continue-lendo:hover { margin-left:0; } }
@media screen and (max-width: 460px) { nav.menu ul a { padding:15px; font-size: 14px; } .sidebar { display:none } .post-info { display:none; } .conteudo { margin:25px auto; } .conteudo img { margin:-5% 0 25px -5%; } }
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.
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/membuat-tampilan-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 :
(http://www.facebook.com/share.php?u=http://www.malasngoding.com/membuat-template-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/conrm?url=http://www.malasngoding.com/membuat-template-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-dan-css/&title=Membuat Template Web Responsive Dengan HTML dan CSS)
Digg
(http://digg.com/submit?url=http://www.malasngoding.com/membuat-template-web-responsive-dengan-html-dan-css/)
StumbleUpon
(http://www.stumbleupon.com/submit?url=http://www.malasngoding.com/membuat-template-web-responsive-dengan-html-dan-css/&title=Membuat Template Web Responsive Dengan
HTML dan CSS)
Tags: cara membuat template html di notepad
template-html-di-notepad/), cara membuat template website dengan bootstrap
(http://www.malasngoding.com/tag/cara-membuat-template-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
membuat-template-website-dengan-photoshop/), cara membuat web responsive dengan bootstrap
(http://www.malasngoding.com/tag/cara-membuat-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/html5-dan-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/)
(http://shop.malasngoding.com/)
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 prole (http://www.malasngoding.com/author/admin/) •
All posts by Diki Alfarabi Hadi (http://www.malasngoding.com/author/admin/) • ( )
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
Email *
Website
Kirim komentar
CENTANG untuk bisa mengirimkan komentar. [ Verikasi 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)