Membuat Template Web Responsive Dengan HTML Dan CSS

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

By Diki Alfarabi Hadi (http://www.malasngoding.com/author/admin/) 10 May 2017
CSS (http://www.malasngoding.com/category/css/) Web Design (http://www.malasngoding.com/category/web-design/)
Membuat Template Web Responsive Dengan 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 meminta untuk di buatkan tutorialMembuat 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).

Baiklah, dengan bismillah langsung saja kita mulai untuk membuat 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

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
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>MalasNgoding's Blog</title>
5 <link rel="stylesheet" type="text/css" href="style.css">
6 </head>
7 <body>
8
9 
10 <header>
11 <h1 class="judul">Malas Ngoding's Blog</h1>
12 <p class="deskripsi">Tutorial pemrograman web, mobile dan desktop lengkap berbahasa indonesia. dari
13 </header>
14 
15
16 <div class="wrap">
17 
18 <nav class="menu">
19 <ul>
20 <li>
21 <a href="#">Home</a>
22 </li>
23 <li>
24 <a href="#">Tutorial</a>
25 </li>
26 <li>
27 <a href="#">Kontak</a>
28 </li>
29 </ul>
30 </nav>
31 
32
33 
34 <aside class="sidebar">
35 <div class="widget">
36 <h2>Tutorial</h2>
37 <p>Selamat datang di www.malasngoding.com, situs ini menyediakan tutorial pemrograman web,
38 </div>
39 <div class="widget">
40 <h2>Ebook Gratis</h2>
41 <p>Teman-teman bisa mendapatkan ebook tutorial gratis di sini <a target="_blank" href="http://www.mala
42 </div>
43 </aside>
44 
45
46 
47 <div class="blog">
48 <div class="conteudo">
49 <div class="post-info">
50 Di Posting Oleh <b>Diki Alfarabi Hadi</b>
51 </div>
52 <img src="http://www.malasngoding.com/wp-content/uploads/2016/02/tutorial-css-bahasa-indonesia.png"
53 <h1> Template Sederhana HTML & CSS </h1>
54 <hr>
55 <p>
56 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
57 </p>
58 <a href="#" class="continue-lendo">Selengkapnya </a>
59 </div>
60 <div class="conteudo">
61 <div class="post-info">
62 Di Posting Oleh <b>Diki Alfarabi Hadi</b>
63 </div>
64 <img src="http://www.malasngoding.com/wp-content/uploads/2016/02/tutorial-html-bahasa-indonesia.png"
65 <h1> Belajar HTML Lengkap </h1>
66 <hr>
67 <p>
68 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
69 </p>
70 <a href="#" class="continue-lendo">Selengkapnya </a>
71 </div>
72 </div>
73 
74 </div>
75
76 </body>
77 </html>
style.css
1 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300);
2
3 body {
4 background: #eee;
5 margin:0;
6 font-family: 'Open Sans', sans-serif;
7 }
8
9 hr {
10 border:0;
11 background:#dedede;
12 height:1px;
13 }
14
15 header{
16 text-align: center;
17 color: #232323;
18 }
19
20 header .judul{
21 font-size: 17pt;
22 }
23
24 header .deskripsi{
25 font-size: 11pt;
26 }
27
28 .wrap {
29 width: 950px;
30 margin:25px auto;
31 }
32
33 nav.menu ul {
34 overflow:hidden;
35 color:#fff;
36 list-style: none;
37 float:left;
38 padding:0;
39 width: 650px;
40 margin:0 0 0;
41 background: #1abc9c;
42 -webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);
43 -moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);
44 box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);
45 }
46
47 nav.menu ul li {
48 margin:0;
49 float:left;
50 }
51
52 nav.menu ul a {
53 padding:25px;
54 display:block;
55 font-weight:600;
56 font-size: 16px;
57 color:#fff;
58 text-transform: uppercase;
59 transition: all 0.5s ease;
60 text-decoration: none;
61 }
62
63 nav.menu ul a:hover {
64 text-decoration: underline;
65 background:#16a085;
66 }
67
68 .sidebar {
69 float:right;
70 width:275px;
71 }
72
73 .sidebar .widget {
74 padding:25px;
75 margin:0 0 25px;
76 background:#fff;
77 border-bottom: 2px solid #fff;
79 }
80
81 .sidebar .widget:hover {
82 border-bottom: 2px solid #3498db;
83 }
84
85 .sidebar .widget h2 {
86 padding:0;
87 margin:0 0 15px;
88 color:#3498db;
89 font-size: 18px;
90 font-weight:800;
92 }
93
94 .sidebar .widget p {
95 font-size: 14px;
96 }
97
98 .sidebar .widget p:last-child {
99 margin:0;
100 }
101
102 .blog {
103 float:left;
104 }
105
106 .conteudo {
107 width:600px;
108 padding:25px;
110 background: #fff;
111 border:1px solid #dedede;
112 -webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
113 -moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
114 box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
115 }
116
117 .conteudo img {
118 min-width: 650px;
119 margin:0 0 25px -25px;
120 max-width: 650px;
121 }
122
123 .conteudo h1 {
124 padding:0;
125 margin:0 0 15px;
126 font-weight: normal;
127 color: #666;
128 font-family: Georgia;
129 }
130
131 .conteudo p:last-child {
132 margin: 0;
133 }
134
135 .conteudo .continue-lendo {
136 color:#000;
138 text-decoration: none;
139 font-weight: 700;
140 }
141
142 .conteudo .continue-lendo:hover {
143 margin-left:10px;
144 }
145
146 .post-info {
147 float: right;
148 font-size: 12px;
149 margin: -10px 0 15px;
151 }
152
153 @media screen and (max-width: 960px) {
154
155 .header {
156 position:inherit;
157 }
158
159 .wrap {
160 width: 90%;
162 }
163 .sidebar {
164 width:100%;
165 margin:25px 0 0;
166 float:right;
167 }
168
169 .sidebar .widget {
170 padding:5%;
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;
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;
224 }
225
226 .sidebar {
227 display:none
228 }
229 .post-info {
230 display:none;
231 }
232
233 .conteudo {
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.
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 tutorialMembuat 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/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/con rm?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 (http://www.malasngoding.com/tag/cara-membuat-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 (http://www.malasngoding.com/tag/cara-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/desain-website/), html5 dan css3 (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/)
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 *
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)

Membuat Template Web Responsive Dengan HTML Dan CSS - Malas Ngoding

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Template Web Responsive Dengan HTML Dan CSS - Malas Ngoding

Diunggah oleh

Hak Cipta:

Format Tersedia

30/7/2017 Membuat Template Web Responsive Dengan HTML dan CSS - Malas Ngoding

Membuat Template Web Responsive Dengan HTML dan CSS

Tutorial dasar HTML (http://www.malasngoding.com/category/html)

Membuat Template Web Responsive Dengan HTML dan CSS

Membuat Template Web Responsive Dengan HTML dan CSS

Membuat Template Web Responsive

Incoming search terms:

Tags: cara membuat template html di notepad (http://www.malasngoding.com/tag/cara-membuat-template-html-di-

css3/), notepad ++ (http://www.malasngoding.com/tag/notepad/), template blog

About the author

Diki Alfarabi Hadi

Author pro le (http://www.malasngoding.com/author/admin/)

Foundation Part 3 : Grid System Framework Foundation Malas Ngoding

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

Tutorial CSS Dasar

#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

#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)

Anda mungkin juga menyukai