pada postingan kali ini saya akan menjelaskan sedikit tentang website sederhana yang saya buat untuk tugas mata kuliah Pemrograman Berbasis WEB. di dalam web ini terdiri dari dua buah halaman web, untuk halaman pertama berisi CV dari penulis dan halaman kedua berisi hasil seminar dan portofolio yang diikuti selama tahun 2013.
Untuk Membuat website ini, harap pastikan bahwa pada laptop telah terinstal :
1. Notepad++ atau bisa di donwload disini
2. Browser firefox atau google chrome
Setelah itu mari kita mulai tutorial ini.
kumpulkan semua image pendukung dalam satu folder, ingat bahwa semua file nantinya akan disimpan dalam satu folder tersebut.
Script dibawah ini merupakan script untuk halaman pertama pada website. silahkan di copy paste, kemudian simpan dengan type .php
Untuk Membuat website ini, harap pastikan bahwa pada laptop telah terinstal :
1. Notepad++ atau bisa di donwload disini
2. Browser firefox atau google chrome
Setelah itu mari kita mulai tutorial ini.
kumpulkan semua image pendukung dalam satu folder, ingat bahwa semua file nantinya akan disimpan dalam satu folder tersebut.
Script dibawah ini merupakan script untuk halaman pertama pada website. silahkan di copy paste, kemudian simpan dengan type .php
1: <head>
2: <style>
3: body{
4: background-image: url('341857671_164.jpg');
5: background-repeat: no-repeat;
6: background-color: rgb(252, 252, 252);
7: }
8: #wrapper{
9: width: 1180px;
10: margin: 0 auto;
11: background-size:1200px;
12: font-family:Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
13: }
14:
15: .box {
16: margin: 31px 31px 31px 470px;
17: width: 683px;
18: background: rgb(228, 144, 144);
19: padding: 20px;
20: border-radius: 12px;
21: opacity: 0.8;
22: float: right;
23: border: 9px solid rgb(80, 181, 221);
24: box-shadow: 14px 17px 19px rgb(224, 68, 68);
25: }
26: #title {
27: float: right;
28: width: 550px;
29: margin: 0px 31px;
30: padding-top: 1px;
31: text-align: center;
32: font-size: 23px;
33: text-align: right;
34: }
35: #title h1 {
36: font-size: 2em;
37: }
38: table {
39: text-align:right;
40: width: 680px;
41: }
42: table td{
43: vertical-align:top;
44: }
45: </style>
46: </head>
47: <body>
48: <div id='wrapper'>
49: <div id='title'><h1>Dinda Prasetia</h1>@ndadutt</div>
50:
51: <div class='box'>
52: <table>
53: <tr><td colspan="3"><h3>Personal Details</h3></td></tr>
54: <tr><td>Name </td><td>:</td><td>Dinda Prasetia</td></tr>
55: <tr><td>Place, Date of Birth </td><td>:</td><td>Depok, December 01th, 1990</td></tr>
56: <tr><td>Sex </td><td>:</td><td>Female</td></tr>
57: <tr><td>Address </td><td>:</td><td>Jambu No.2 Rt.002/007<br/> Depok 16431</td></tr>
58: <tr><td>Nationality </td><td>:</td><td>Indonesia</td></tr>
59: <tr><td>E-mail </td><td>:</td><td>dindaprasetia@yahoo.com</td></tr>
60: </table>
61: </div>
62:
63: <div class='box'>
64: <table>
65: <tr><td colspan="3"><h3>Formal Education</h3></td></tr>
66: <tr><td>1995 - 2007 </td><td>:</td><td>Mardi Yuana Kindergarten, Depok</td></tr>
67: <tr><td>1997 - 2003 </td><td>:</td><td>Mardi Yuana Elementary School, Depok</td></tr>
68: <tr><td>2003 - 2006 </td><td>:</td><td>Mardi Yuana Junior High School, Depok</td></tr>
69: <tr><td>2006 - 2009 </td><td>:</td><td>Bintara Senior High School, Depok</td></tr>
70: <tr><td>2009 - present </td><td>:</td><td>Gunadarma University</td></tr>
71: </table>
72: </div>
73:
74: <div class='box'>
75: <table>
76: <tr><td colspan="3"><h3>Working Experience</h3></td></tr>
77: <tr><td>June 2010 - August 2012 </td><td>:</td><td>Working at Multimedia Laboratory-Gunadarma University<br/> (Honorer Asistant)</td></tr>
78: <tr><td>August 2012 - September 2012 </td><td>:</td><td>Working at Al-Fath Junior High School-Cirendeu<br/> (Honorer IT Teacher)</td></tr>
79: <tr><td>August 2012 - present </td><td>:</td><td>Working at Multimedia Laboratory-Gunadarma University<br/> (Permanent Asistant)</td></tr>
80: </table>
81: </div>
82: </div>
83: <a href='hal2.php' style="float: right;padding: 20px;margin: 0 146px 0 0;"><button>next</button></a>
84: </body>
script diatas merupakan script untuk halaman pertama.. dibawah ini adalah script untuk halaman kedua :)
1: <head>
2: <style>
3: body{
4: background-image: url('341857671_164.jpg');
5: background-repeat: no-repeat;
6: background-color: rgb(252, 252, 252);
7: }
8: #wrapper{
9: width: 1180px;
10: margin: 0 auto;
11: background-size:1200px;
12: font-family:Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
13: }
14:
15: .box {
16: margin: 31px 31px 31px 470px;
17: width: 683px;
18: background: rgb(228, 144, 144);
19: padding: 20px;
20: border-radius: 12px;
21: opacity: 0.8;
22: float: right;
23: border: 9px solid rgb(80, 181, 221);
24: box-shadow: 14px 17px 19px rgb(224, 68, 68);
25: }
26: #title {
27: float: right;
28: width: 550px;
29: margin: 0px 31px;
30: padding-top: 1px;
31: text-align: center;
32: font-size: 23px;
33: text-align: right;
34: }
35: #title h1 {
36: font-size: 2em;
37: }
38: table {
39: text-align:right;
40: width: 680px;
41: }
42: table td{
43: vertical-align:top;
44: }
45: table img{
46: width :300px;
47: height:300px;
48: }
49: </style>
50: </head>
51: <body>
52: <div id='wrapper'>
53: <div id='title'><h1>Dinda Prasetia</h1>@ndadutt</div>
54:
55: <div class='box'>
56: <table>
57: <tr><td colspan="3"><h3>Seminar</h3></td></tr>
58: <tr><td style="width:20%">5 Maret 2013 </td><td>:</td><td>Seminar Pengembangan Mobile Aplikasi Berbasis Teknologi Android</td></tr>
59: <tr><td>26 Maret 2013 </td><td>:</td><td>Perspektif Terhadap Interaksi Manusia dan Teknologi Dalam Menghadapi Era Globalisasi</td></tr>
60: <tr><td>26 Maret 2013 </td><td>:</td><td>Seminar Uni-Industry Collaboration "Berkarir Sebagai Profesional di Bidang Keamanan Informasi"</td></tr>
61: </table>
62: </div>
63:
64:
65: <div class='box'>
66: <table>
67: <tr><td colspan="3"><h2>Portofolio</h2><h3>Penulisan Ilmiah</h3><h3>Aplikasi AR Magic Book Ensiklopedia Kupu-Kupu Berbasis Desktop</h3></td></tr>
68:
69:
70: </table>
71: <table><tr><td><img src='1.jpg'></td><td><img src='2.jpg'></td></tr></table>
72:
73: </div>
74: </div>
75: <a href='index.php' style="float: right;padding: 20px;"><button>prev</button></a>
76: </body>
penjelasan dari script :
Halaman Pertama
· <head>
Digunakan untuk menuliskan keterangan dokumen HTML, misalnya berupa judul halaman.
· <style>
Digunakan untuk mengatur atribut style yang akan digunakan dan muncul pada halaman HTML.
· #wrapper
Digunakan untuk sebagai alternative halaman website.
· #title
Digunakan untuk memberikan judul pada halaman website.
· #title h1
Digunakan untuk memberikan heading teks dari yang terbesar (h1).
· </style></head>
Digunakan untuk memberikan syle/atribut pada head website.
· <body>
Digunakan untuk menuliskan tag-tag atau isi yang akan menjadi konten website.
· <div id=’wrapper’>
Digunakan untuk mendefinisikan sebuah section pada dokumen pada sebuah wrapper.
· <div id=’title’><h1>Dinda Prasetia</h1>@ndadutt</div>
Digunakan untuk mengatur jenis dan ukuran dari teks yang ingin ditampilkan.
· <div class=’box’>
Digunakan untuk memberikan section class yaitu box.
· <table>
Digunakan untuk untuk membuat sebuah table pada website.
· <tr><td colspan=”3”><h3>Personal Details</h3></td></tr>
Digunakan untuk membuat baris di dalam sebuah table yang kemudian di definisikan didalam cell pada table,dengan heading teks (h3).
· <table>
Digunakan untuk membuat sebuah table pada website.
· </div>
Digunakan untuk mengakahiri section.
· <tr><td colspan=”3”><h3>Formal Education</h3></td></tr>
Digunakan untuk membuat baris di dalam sebuah table yang kemudian di definisikan didalam cell pada table,dengan heading teks (h3).
· <tr><td colspan=”3”><h3>Working Experience</h3></td></tr>
Digunakan untuk membuat baris di dalam sebuah table yang kemudian di definisikan didalam cell pada table,dengan heading teks (h3).
· <a href='hal2.php' style="float: right;padding: 20px;margin: 0 146px 0 0;"><button>next</button></a>
Digunakan Untuk membuat button next.
· </body>
Digunakan untuk mengakhiri statement pada body.
Halaman Kedua
· <head>
Digunakan untuk menuliskan keterangan dokumen HTML, misalnya berupa judul halaman.
· <body>
Digunakan untuk menuliskan tag-tag atau isi yang akan menjadi konten website.
· <table><tr><td><img src='1.jpg'></td><td><img src='2.jpg'></td></tr></table>
Digunakan untuk membuat table dan juga menampilkan image/gambar.
· </body>
Digunakan untuk mengakhiri statement pada body.
Dan berikut ini adalah hasil printscreen dari script diatas :
 |
| Printscreen Halaman 1 |
 |
| Printscreen Halaman 2 |
Demikian penjelasan singkat tentang pembuatan website sederhana... terima kasih atas perhatian nya semoga bermanfaat :)
