Membuat Template Web Responsive Dengan HTML dan CSS
- By Diki Alfarabi Hadi
- 10 May 2017
- CSS 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 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.
Membuat Template Web Responsive Dengan HTML dan CSS
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
- Tutorial dasar CSS
Atau teman-teman bisa melihat pada bagian list tutorial dasar di www.malasngoding.com. agar bisa mempelajarinya step by step.
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 file HTML. di sini saya membuat file HTML dengan nama index.html
- Buat sebuah file CSS. untuk menyimpan syntax CSS. di sini saya membuat sebuah file 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
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. dari dasar hingga mahir.
Home
Tutorial
Kontak
Tutorial
Selamat datang di www.malasngoding.com, situs ini menyediakan tutorial pemrograman web, mobile & desktop.
Ebook Gratis
Teman-teman bisa mendapatkan ebook tutorial gratis di sini www.malasngoding.com.
Di Posting Oleh Diki Alfarabi Hadi
Template Sederhana HTML & CSS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Selengkapnya →
Di Posting Oleh Diki Alfarabi Hadi
Belajar HTML Lengkap
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Selengkapnya →
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
78
79
80
81
82
83
84
85
86
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
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
@import url[http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300];
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;
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%;
}
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%;
}
}
Oke selesai. simpan kedua file 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.
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] dari www.malasngoding.com.
BACA JUGA :
- 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.
Jika teman-teman membutuhkan referensi tentang kesalahan-kesalahan yang umum atau sering di lakukan pada saat mendesign sebuah website, teman-teman bisa membaca artikelnya di sini. artikel 6 kesalahan umum mendesign web tersebut di tulis oleh niagahoster.
Incoming search terms:
- cara membuat template website
- cara membuat web responsive
- contoh script web responsive
- Membuat template web
- //www malasngoding com/membuat-template-web-responsive-dengan-html-dan-css/
- cara membuat web dinamis dengan html dan css
- membuat web responsive
- Membuat template website
- contoh web responsive
- cara membuat template html
- SHARE :
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's profile
- All posts by Diki Alfarabi Hadi
Tags: cara membuat template html di notepad, cara membuat template website dengan bootstrap, cara membuat template website dengan css, cara membuat template website dengan dreamweaver, cara membuat template website dengan photoshop, cara membuat web responsive dengan bootstrap, cara membuat web responsive dengan css, cara mudah membuat template web, contoh script web responsive, contoh template web responsive, Desain Website, html5 dan css3, notepad ++, template blog, template html dan css gratis, template responsive, template web gratis, web design
Tutorial CSS Dasar
- #1. Pengenalan CSS
- #2. Penulisan CSS
- #3. Background CSS
- #4. Margin dan Padding CSS
- #5. Font CSS
- #6. Link / Hyperlink CSS
- #7. Format Text CSS
- #8. Position CSS
- #9. Border CSS
- #10. List CSS
- #11. Float CSS
- #12. Tutorial CSS Lainnya
Tutorial CSS3 Dasar
- #1. Pengenalan CSS3
- #2. Rounded Corner CSS3
- #3. Warna Gradient CSS3
- #4. Efek Bayangan CSS3
- #5. Transform CSS3
- #6. Transition CSS3
- #7. Animasi CSS3
- #8. Tutorial CSS3 Lainnya
Produk
- Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
- Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
- Source Code Toko Sport PHP dan MySQLi Rp 200,000
- Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000
Tutorial Terbaru
- Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
- Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
- Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
- Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
- Membuat QR Code Dengan PHP August 3, 2022
Toko Kami
SOCIAL
Malas Ngoding
TUTORIAL MENARIK LAINNYA
Membuat Bentuk Segitiga Dengan CSS – Selamat datang kembali di tutorial css di malasngoding.com. beberapa waktu lalu ada beberapa teman-teman pembaca tutorial di malasngoding.com yang ... Diki Alfarabi HadiMembuat Bentuk Segitiga Dengan CSS
7 July 2020
Membuat Lingkaran Dengan CSS Membuat Lingkaran Dengan CSS – Pada tutorial ini kita akan belajar membuat lingkaran atau nembuat bulat dengan menggunakan CSS. Memang mungkin ... Diki Alfarabi HadiMembuat Lingkaran Dengan CSS
25 September 2018
Cara Membuat Text Di Tengah Dengan HTML dan CSS – Sebenarnya cara membuat text berada di tengah sudah pernah kita jelaskan di tutorial CSS dasar ... Diki Alfarabi HadiCara Membuat Text Di Tengah Dengan HTML dan CSS
2 May 2017
Selamat datang kembali di www.malasngoding.com. situs yang fokus membahas tentang tutorial pemograman web, mobile dan desktop. Sesuai dengan judul “Cara Disable Resize Form Textarea Dengan ...Cara Disable Resize Form Textarea Dengan CSS
31 March 2017Langkah langkah membuat form login HTML?
Form HTML apa saja?
Langkah utama yang dilakukan untuk membuat formulir di HTML adalah menggunakan tag?
Atribut apa saja yang digunakan membuat form dalam dokumen HTML?