About Me, My World and Mine: Pemrograman Web

Pada kesempatan kali ini saya akan membagikan ilmu saya untuk membuat webuah web sederhana menggunakan html dan css. Pada dasarnya kalu hanya ingin membuat website sederhana cukup menggunakan hmtl saja, tetapi tampilannya akan biasa saja, tanpa banyak permainan warna. Untuk membuat website lebih rapih dan lebih menarik dari segi interface maka saya tambahkan file css. Berikut adalah tampilan layout dari website sederhana yang akan saya buat.

Simpan file css tersebut dengan nama style.css

Untuk membuat website ada beberapa tahap tahap yang harus dilalui. Untuk membuat website hanya membutuhkan 2 program yang sudah pasti kalian punya.

Notepad ++ / notepad
Web browser (Mozilla firefox, google chrome, internet explorer, dll)
Jika kalian sudah mempunyai software software yang telah disebutkan diatas selanjutnya adalah :
Buat folder khusus web yang akan dibuat.
Buka notepad ++ lalu ketikkan skrip kode dibawah ini

Skrip halaman style.css

body {

background-color: white;

background-image:url(paper.png);

background-attachment: fixed;

}

#main {

width : 800px;

margin: 10px auto;

background: #fff;

margin-top : 10px;

overflow:hidden;

}

#head{

margin:10px;

padding: 10 50px 10px 10px;

background: url(www.png) no-repeat;

height: 250px;

}

#menu {

margin: 20px;

padding: 10px 10px 10px 5px;

font-size: 11pt;

font-family: candara;

width:1150px;

background-position: top left;

}

a, a:link, a:visited, a:active{

font-family: Candara;

letter-spacing: 1px;

color: orange;

}

a:hover {

color: black;

text-decoration: none;

}

a.navi{

padding:5px;

text-decoration:none;

font-family:Candara;

font-size:12px;

color:green;

text-align:center;

width:100px;

background: #ff99ff;

display:inline-block;

-webkit-transition: 2.0s;-moz-transition: 2.0s;-moz-box-shadow:inset 200px 0px 0px #efefef;

-webkit-box-shadow:inset 200px 0px 0px #fff;

box-shadow:inset 200px 0px 0px #ff9933;

}

a.navi:hover{

color: yellow;

-webkit-transition: 2.0s;

-moz-transition: 2.0s;padding-left : 5px;

-moz-box-shadow:inset -100px 0px -200px -0.5px #aaa;

-webkit-box-shadow:inset -100px 0px -200px -0.5px #fff;

box-shadow:inset -100px 0px 0px -0.5px #ff00ff;

}

#footer {

background-color:#D42C54;

margin-top: 7px;

margin-bottom: 3px;

margin-left: 30px;

margin-right: 30px;

color:Black;

letter-spacing:1.5px;

padding-left: 7px;

padding-right: 7px;padding-top: 4px;

padding-bottom: 4px;

font-weight: bold;font: 12px Candara;

line-height:17px;

text-align: center;

}

Pada bagian body didefinisikan bahwa background website dengan gambar dari file paper.png. perlu diperhatikan bahwa jika ingin memasukkan gambar dalam sebuah website harus dipastikan bahwa file gambar tersebut berada dalam satu folder dengan file css dan html.

Pada bagian main didefinisikan bahwa panjang bagian main tersebut adalah 800 piksel. Jarak(margin) dari bagian body adalah 10 piksel. Warna background dari bagian main adalah berwarna putih. Pada bagian head terdapat gambar unduhan.png dimana no-repeat dimaksudkan untuk tidak mengulang gambar tersebut. Berikut adalah kilasan penjelasan dari skrip file style.css

Simpan skrip yang telah diketikkan diatas dengan nama style.css

Buat file baru dan disimpan dengan nama home.html

Skrip halaman home.html

<html>

<title>Biodata</title>

<body>

</div>

<table>

<tr>

<td><a class="navi" href="website.html">Website</a></td>

</tr>

</table>

<table>

<tr><th align=center colspan=3><strong> DATA PRIBADI </strong></th></tr>

<tr><td>Nama Lengkap</td><td>:</td><td>Rizki Lestari </td></tr>

<tr><td>Nama Panggilan</td><td>:</td><td> Kiki </td></tr>

<tr><td>Tempat Tanggal Lahir</td><td>:</td><td>Jakarta, 20 Januari 1992 </td></tr>

<tr><td>Status</td><td>:</td><td>Mahasiswa, Jurusan Sistem Informasi <br> Universitas Gunadarma </td></tr>

<tr><td>Email</td><td>:</td><td><a href="rizki.borneotelecom@gmail.com">rizki.borneotelecom@gmail.com </a></td></tr>

<tr><td>Golongan Darah</td><td>:</td><td>A </td></tr>

</table><br><br>

<table>

<tr><th align=center colspan=2><strong> PENDIDIKAN FORMAL </strong></th></tr>

<tr><td>1.</td><td>SDN Cipondoh 8, Lulus tahun 2003 </td></tr>

<tr><td>2.</td><td>SMPN 3 Tangerang, Lulus tahun 2006</td></tr>

<tr><td>3.</td><td>SMAN 3 Tangerang, Lulus tahun 2009</td></tr>

<tr><td>4.</td><td>Universitas Gunadarma Jakarta, Fakultas Ilmu Komputer, Jurusan Sistem Informasi</td></tr>

</table>

</div>

Created By <a href="home.html"> Rizki Lestari </a>

</div>

Buat file baru lagi dan simpan dengan nama website.html

Skrip halaman website.hmtl

<html>

<title>Website</title>

<body>

</div>

<table>

<tr>

<td><a class="navi" href="website.html">Website</a></td>

</tr>

</table>

<h2> Website </h2>

<table>

<tr></th> Situs Web </th><tr>

Situs web (bahasa Inggris: web site) atau sering disingkat dengan istilah situs[1] adalah sejumlah halaman web yang memiliki topik saling terkait, terkadang disertai pula dengan berkas-berkas gambar, video, atau jenis-jenis berkas lainnya. Sebuah situs web biasanya ditempatkan setidaknya pada sebuah server web yang dapat diakses melalui jaringan seperti internet, ataupun jaringan wilayah lokal (LAN) melalui alamat internet yang dikenali sebagai URL. Gabungan atas semua situs yang dapat diakses publik di internet disebut pula sebagai Waring Wera Wanua atau lebih dikenal dengan singkatan WWW. Meskipun setidaknya halaman beranda situs internet umumnya dapat diakses publik secara bebas, pada prakteknya tidak semua situs memberikan kebebasan bagi publik untuk mengaksesnya, beberapa situs web mewajibkan pengunjung untuk melakukan pendaftaran sebagai anggota, atau bahkan meminta pembayaran untuk dapat menjadi aggota untuk dapat mengakses isi yang terdapat dalam situs web tersebut, misalnya situs-situs yang menampilkan pornografi, situs-situs berita, layanan surel (e-mail), dan lain-lain. Pembatasan-pembatasan ini umumnya dilakukan karena alasan keamanan, menghormati privasi, atau karena tujuan komersil tertentu.

<tr><td> Sumber :

<a href="http://id.wikipedia.org/wiki/Situs_web">http://id.wikipedia.org/wiki/Situs_web</a>

</td></tr></table>

</div>

Created By <a href="home.html"> Rizki Lestari </a>

</div>

Pada halaman html yang dibuat terdapat sintak yang dapat memanggil file css yang telah dibuat. Sintak yang digunakan adalah <link rel = "stylesheet" href="style.css" type="text/css">. Pembuatan table dalam halaman web tersebut adalah digunakan untuk membuat tampilan web menjadi lebih rapih. Untuk mengkoneksikan halaman web yang satu dengan yang lainnya adalah dengan menggunakan tag <a href=”link_yang_bersangkutan”> nama link </a>. selanjutnya pada pembuatan table terdapat sintak <tr><td></td></tr>, <tr> digunakan untuk membuat baris dalam table sedangkan <td> adalah membuat kolom pada table. Jika ingin membuat table dengan 1 baris dan 3 kolom maka sintaknya adalah <tr><td>kolom1</td><td>kolom2</td><td>kolom3</td></tr>. Tidak lupa meletakkan </table> untuk mengakhiri pembuatan table.

Setelah membuat 3 file tersebut selanjutnya adalah, melihat hasil dari file yang telah kita buat, yaitu dengan cara membuka web browser (Mozilla Firefox) lalu tekan CTRL-O, lalu pilih folder dimana kita menyimpan file untuk membuat web tersebut. Klik file tersebut lalu open.

Berikut adalah hasil web yang telah saya buat

Tampilan Halaman Home

Tampilan Halaman Website

Sekian penjelasan cara membuat web dari saya, semoga bermanfaat untuk kalian yang ingin belajar pemrograman web. Terima kasih :)

About Me, My World and Mine

Label

Sabtu, 04 Mei 2013

Pemrograman Web

Tidak ada komentar:

Posting Komentar