Skip to content
March 2, 2012 / panghaidar

Cara mudah dan sederhana membuat website HTML5


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


Memorabilia4Music

Gambar dan form akan tampil disini

Sebelum kita melangkah ke step berikutnya kita perlu mengetahui fungsi-fungsi tags di atas.
1. <!DOCTYPE html>


Doctype yang singkat sebagai ciri khas HTML5

2. <html> dan </html>


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>


Judul Website Kita

Tags ini untuk memberitahu apa judul dari website kita :D

4. <body>…</body>


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

</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.


<!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


@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 images kini 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>

<link href="style.css" rel="stylesheet" type="text/css" />

12 Comments

Leave a Comment
  1. chzrt / Apr 17 2012 4:49 pm

    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

  2. sawung / Jul 28 2012 9:57 pm

    untuk nambah “meta tag”nya gimana gan?? thank’s

  3. yulihendani / Sep 6 2012 2:01 am

    terimakasih atas infonya

  4. aeroyid / Nov 7 2012 6:36 am

    Tantab gan,,,, tak izin download…

  5. ipulmujab / Feb 9 2013 3:32 am

    makasih gan, sanagat membantu

  6. exabytesid / Dec 14 2013 7:30 pm

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

  7. Running Text / Mar 17 2014 3:14 am

    Wah sangat membantu saya gan! terimakasih.

  8. Pekku Instant Website / Apr 16 2014 4:59 am

    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

  9. ganas dingin / Jul 13 2014 8:18 pm

    keren gan, ane coba ahh

Trackbacks

  1. Cara mudah dan sederhana membuat website HTML5 – Sebuah Impian Perubahan
  2. Membuat halaman web dengan menggunakan HTML5 | noktaviani59
  3. Membuat halaman web dengan menggunakan HTML5, CSS3 dan Bootstrap | noktaviani59

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 478 other followers

%d bloggers like this: