Saturday, November 28

Cara Sederhana Membuat Website Dengan HTML5

4:11 AM  Unknown  No comments


Pada tutorial kali ini kita akan belajar membuat website yang sangat sederhana:
1. Bagaimana cara memanggil Css dari html
2. Membuat form sederhana
3. Membuat folder-folder untuk membuat website
4. Mengetahui fungsi beberapa tags
Untuk hasil akhirnya seperti pada gambar dibawah ini.
Step 1
Untuk tutorial ini saya tidak akan memberitahu bagaimana cara menginstal XAMPP, saya anggap kita sudah mengetahui menggunakan XAMPP ok langsung saja membuat folder untuk memanggil file-file html nya. Misal folder instalasi XAMPP nya berada di C:\xampp\htdocs\music, pada contoh ini kita membuat folder dengan nama “music” seperti contoh di atas.
Di dalam folder music ini terdiri dari 3 files diantaranya index.html, style.css dan folder images, untuk membuat file index.html dan style.css bisa menggunakan notepad atau lainnya tapi disarankan menggunakan Notepad ++.
Sehingga susunan foldernya seperti gambar di bawah ini.
Step 2

a.Basic Mark Up

1
2
3
Memorabilia4Music
 
Gambar dan form akan tampil disini
Sebelum kita melangkah ke step berikutnya kita perlu mengetahui fungsi-fungsi tags di atas.
1. <!DOCTYPE html>
1
 
Doctype yang singkat sebagai ciri khas HTML5
2. <html> dan </html>
1
 
Tags yang harus ada untuk memberitahu browsers kalau type dokumen ini bertype html, yang perlu diperhatikan semua tag html harus ada pembuka dan penutup, maksudnya seperti <tags> harus diakhiri dengan tag penutup </tags>.
3. Tag <title>Judul Website Kita</title>
1
Judul Website Kita
Tags ini untuk memberitahu apa judul dari website kita :D
4. <body>…</body>
1
 
Bagian Body adalah isi dari dokumen HTML yang didalamnya telah disusun kode kode sehingga akan menampilkan website yang anda hendaki.
b. Memasukan script pendukung ke dalam bagian Body html
Persis di bawah tag <body> masukan kode berikut
1
2
3
4
5
6
7
8
9
10
11
</pre>
<div id="wrapper">
<div id="header"></div>
<div id="main"><form action="" method="post">
<label class="push-top" for="name">name:</label><input id="name" class="push-top" type="text" name="name" value="" />
 
<label for="email">email:</label><input id="email" type="text" name="email" value="" />
 
<input id="button" class="push-bottom" type="submit" name="button" value="" /></form></div>
</div>
<pre>
1. File index.html
Sehingga script lengkap untuk contoh di atas adalah sebagai berikut, silahkan copy ke Notepad ++ atau lainnnya kemudian simpan dengan nama index.html di folder music.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Memorabilia4Music</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main">
<form action="" method="post">
<p><label  for="name">name:</label><input id="name" name="name" type="text"  value=""/></p>
<p><label for="email">email:</label><input id="email" name="email" type="text" value=""/></p>
 
<p><input type="submit" name="button" id="button" value="" /></p>
</form>
</div>
</div>
</body>
</html>
2. File 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
@charset "UTF-8";
/* CSS Document
Panghaidar.wordpress.com
 */
 
body {
 background-image: url(images/back.png);
 background-repeat: repeat-x;
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 color:#FFFFFF;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
}
 
#wrapper {
 
width:960px;
margin:auto;
 
}
#header {
 
background-image:url(images/logo.png);
background-repeat:no-repeat;
height:145px;
}
#main {
 position:relative;
 
background-image:url(images/main.png);
background-repeat:no-repeat;
height:455px;
}
form {
 position:absolute;
 top:140px;
 left:711px;
 height:185px;
 background-image:url(images/send-form.png);
 width:228px;
}
label {
float:left;
margin-left:15px;
width:40px;
 
}
input {
 
 border:none;
 background-color:transparent;
 background-image:url(images/input.png);
 line-height:20px;
 padding:4px 0;
width:162px;
 
}
textarea {
 
border:none;
 background-color:transparent;
 background-image:url(images/textarea.png);
width:162px;
line-height:20px;
 
}
p {
 
margin:5px 0;
}
.push-top {
 
margin-top:40px;
 
}
 
.push-bottom {
 
background-image:url(images/enquiry.png);
 height:38px;
 width:209px;
 margin:15px 0 0 10px;
 
}
 
#main form p
{
 position:relative;
}
 
#main form p .errors
{
 display:block;
 position:absolute;
 left:-170px;
 padding:5px;
 background-color:white;
 color:red;
 border:1px solid;
 top:0px;
 width:auto !important;
}
Selamat mencoba dan semoga bermanfaat:)
Baca selengkapnya: Tutorial PHP Untuk Pemula, Tutorial CSS Untuk Pemula

Posted in: , ,

0 comments:

Post a Comment