Agar lancar dalam mengikuti tutorial ini, disarankan menggunakan notepad++
STEP 1
Basic Start
Sebelum ke step berikutnya, kita perlu mengetahui fungsi
tags berikut ;
<!DOCTYPE html>
Docktype merupakan elemen yang membantu browser untuk mengetahui
tipe HTML yang akan diuraikan.
<html> dan </html>
Tags yang berfungsi memberitahu browser type dokumen tersebut
bertipe html, yang perlu diperhatikan semua tag html harus ada pembuka dan
penutup.
<title>Judul Website </title>
Tags ini untuk memberitahu apa judul website yang akan
dibuat.
<body>…</body>
Bagian Body adalah isi dari dokumen HTML yang didalamnya
telah disusun kode sehingga akan menampilkan halaman website yang dikehendaki.
STEP 2
Tambahkan CSS ntuk mepercantik tampilan website tersebut.
Buat file seperti berikut, dan simpan dengan nama 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
|
/*
------------------------------
Page
Structure
------------------------------
*/
body,
h1, h2, h3, ul{
margin:0;
padding:0;
}
body{
background:#F0F0F0;
color:#444;
font:11pt Arial, Helvetica, sans-serif;
}
h1{
font-size:26pt;
color:#BBB;
}
h1:hover{
color:#FFF;
}
h2{
font-size:21pt;
}
h3{
font-size:18pt;
}
a{
text-decoration:none;
}
a:hover,
a:active, a:visited{
cursor:pointer;
}
spacer{
clear:both;
height:10px;
display:block;
}
#container{
width:860px;
margin:auto;
background:#FFF;
}
/*
------------------------------
Header
------------------------------
*/
header{
width:auto;
display:block;
padding:10px 30px;
background:#222;
}
/*
------------------------------
Navigation
Bar
------------------------------
*/
nav{
width:100%;
display:block;
background:#777;
float:left;
}
nav
ul{
list-style: none;
}
nav
ul li {
display: inline;
}
nav
ul li a {
color: #EEE;
float:left;
font:13pt Verdana, Arial, Helvetica, sans-serif;
padding:7px 20px;
border-bottom:2px solid #777;
border-left:1px solid #444;
border-right:1px solid #AAA;
}
nav
ul li a.first{
border-left:0;
}
nav
ul li a.last{
border-right:0;
}
nav
ul li a:hover, nav ul li a:active, nav ul li a:visited {
color:#fff;
border-bottom:2px solid #21A400;
}
/*
------------------------------
Content
------------------------------
*/
section{
float:left;
width:540px;
padding:10px 10px 10px 20px;
}
/*
------------------------------
side
Bar
------------------------------
*/
aside{
float:left;
width:260px;
padding:10px 20px 10px 10px;
}
aside
ul {
list-style-type: none;
padding-left: 3px;
margin-bottom:10px;
}
aside
ul li {
font-size: 10pt;
padding: 2px 0 3px 20px;
margin-bottom:-2px;
border-bottom:1px dashed #CCC;
}
aside
ul li a {
color: #0381DC;
display:block;
}
aside
ul li a:hover {
color:#7F7F7F;
}
/*
------------------------------
Footer
------------------------------
*/
footer{
width:auto;
display:block;
padding:10px 30px;
background:#222;
font-size:8pt;
color:#BBB;
}
|
MAKA SETELAH ITU, TAMPILAN WEB AKAN TERLIHAT SEPERTI INI
Sekian demikian tutorial cara membuat desain web menggunakan HTML5 dan CSS3.
BOOTSTRAP
Berikutnya saya ingin memberitahu sedikit yang saya ketahui tentang penggunaan bootstrap dalam mendesain web.Bootstrap adalah salah satu teknik web desain dimana didalamnya terdapat kode - kode yang dapat mempercantik web desain yang telah kita buat.
Berikut tutorial dari saya :
Hal pertama yang harus dilakukan sebelum mendesain web menggunakan bootstrap
Pertama, silahkan download paketan versi siap pakainya di
sini.
Sebenarnya anda bisa melakukan personalisasi akan apa saja komponen yang
ingin anda pakai di BootStrap, tapi pada tutorial ini kita gunakan yang versi
dasar dulu.
Setelah diunduh, silahkan ekstrak file .zip tersebut
sehingga anda akan mendapatkan folder “bootstrap” yang berisi 3 folder: css, js
dan img.
Sekarang copy ketiga folder tersebut (beserta isinya) ke folder lain tempat anda meletakkan proyek desain web anda.
Di tutorial ini saya coba memulai dari awal, jadi saya buat sebuah folder dengan nama ngulikweb sebagai contoh.
Selanjutnya kita buat sebuah file HTML baru. Sebagai contoh
saya beri nama index.html dan simpan di folder yang sama. Caranya, buka text
editor, klik “Save as”, lalu pilih “All file types” dan beri nama dengan
akhiran .html.
Pertama kita coba pakai template html berikut ini:
Layout Grid Bootstrap
Sistem layout Grid dari Bootstrap menggunakan susunan 12 kolom dengan kontainer selebar 940px jika tanpa fitur responsive.
Jika anda menambahkan fitur responsive maka ukuran lebar menjadi 724px dan 1170px, tergantung pada ukuran layar tampilan.
Untuk mengaktifkan fitur responsive bisa dengan menambahkan kode berikut di bagian head.
Dengan demikian telah selesai tutorial singkat saya mengenai membuat web desain menggunakan HTML5, CSS3, dan Bootstrap.
Semoga bisa bermanfaat dan berguna bagi perngguna. TERIMA KASIH
Sumber Referensi :
1. http://www.ngulikweb.com/design/tutorial-responsive-bootstrap/
2. http://blog.sevima.com/tutorial-sederhana-membuat-halaman-website-menggunakan-html5.html
Nama Lengkap : Agam Prastiono
NPM : 1306470703
Kelas : MID - A
Angkatan : 2013
