Jumat, 08 Agustus 2014

meneteskan jeripayah hidup


·         Pang Haidar Blog
·         Home
·         Tentang Saya
·        
Contact us
Cara mudah dan sederhana membuat website HTML

Pada tutorial kali ini kita akan belajar membuat website yang sangat sederhana, website ini sendiri digunakan untuk website yang akan launcing, ” website coming soon” mungkin lebih tepat nya :), untuk webservernya sendiri saya menggunakan XAMPP yang bisa di download disini. (hmmm scriptnya suka menghilang sendiri, langsung aja download tutorialnya di bawah ya )
Setelah mengikuti tutorial ini diharapkan kita menguasai
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;
}
3. Folder Images
Untuk mendapatkan folder images silahkan download disini
Setelah semua terkumpul di folder music yang terdiri dari file index.html, style.css dan folder imageskini saatnya kita memanggil di browser dengan mengetikan url http://localhost/music
Hampir ketinggalan hehehe, untuk memanggil file css kita perlu menambahkan script ini di bawah tag <title>
1
<link href="style.css" rel="stylesheet" type="text/css" />
http://panghaidar.files.wordpress.com/2012/03/download.png?w=595
Share this:
Loading...
Related
Cara Membuat AGC di WordpressIn "Blogging"
Video tutorial cara install Wordpress di localhostIn "Blogging"
Mengaktifkan CURL di XAMPPIn "Blogging"
Filed under Blogging
← Bermula dari yang kecil dan untung tidak punya BB
UNIC – BISIKAN MALAM →
9 Comments
 leave a comment
1.     chzrt / Apr 17 2012 4:49 pm
http://1.gravatar.com/avatar/177b1ad5b25684586fad9b41d9e9a08c?s=32&d=identicon&r=G
mantap gan…..
selama ini ane pusing 777 keliling indonesia……..
akhirnya dapet yang simple disini……..
meskipun inti dari masalah nulisnya di ujung postingan
hehehe
tapi sekali lagi mantafffff
reply
2.     sawung / Jul 28 2012 9:57 pm
http://0.gravatar.com/avatar/c9677b9b12330eac544e0056664b2fd9?s=32&d=identicon&r=G
untuk nambah “meta tag”nya gimana gan?? thank’s
reply
3.     yulihendani / Sep 6 2012 2:01 am
http://0.gravatar.com/avatar/9ae67ff1649f024c0788898aca5cc6af?s=32&d=identicon&r=G
terimakasih atas infonya
reply
4.     aeroyid / Nov 7 2012 6:36 am
http://0.gravatar.com/avatar/662f7ed84523b95a42895dae4a4edb50?s=32&d=identicon&r=G
Tantab gan,,,, tak izin download…
reply
5.     ipulmujab / Feb 9 2013 3:32 am
http://2.gravatar.com/avatar/893cd0ba73c5cfa0304b187d89db53e8?s=32&d=identicon&r=G
makasih gan, sanagat membantu
reply
6.     exabytesid / Dec 14 2013 7:30 pm
http://0.gravatar.com/avatar/01128f778fdae6d9bdb4e9c140d02c7b?s=32&d=identicon&r=G
Sekedar saran , untuk mempermudah pekerjaan dalam membuat web dengan HTML 5 baiknya menggunakan Fremwork yang sudah di kembangkan Bisa menggunakan Fremwork HTML 5 INTIALIZR atau HTML5 Boilerplate
Salam Hangat
Exabytes indonesia :)
reply
7.     Running Text / Mar 17 2014 3:14 am
http://0.gravatar.com/avatar/6130e5796c23718aaad65fbd8ec679e8?s=32&d=identicon&r=G
Wah sangat membantu saya gan! terimakasih.
reply
8.     Pekku Instant Website / Apr 16 2014 4:59 am
http://2.gravatar.com/avatar/87c3bbee673bf16a10aa22b946e74082?s=32&d=identicon&r=G
Artikel yang bagus, ada satu lagi mas untuk membuat website dengan mudah bisa menggunakan http://www.pekku.com, platform untuk membuat website, buatan anak Indonesia loh :D
reply
Trackbacks

Diposting oleh di Tidak ada komentar:
Label:
Langganan: Komentar (Atom)