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>
<link rel = "stylesheet"
href="style.css" type="text/css">
<body>
<div id="main">
<div id="head">
</div>
<div id="menu">
<table>
<tr>
<td><a class="navi"
href="home.html">Home</a></td>
<td><a class="navi"
href="website.html">Website</a></td>
<td width=400px></td>
<td><a
href="http://www.facebook.com/qiqynongg">
<img src="logo_facebook.png";
style="width: 30px;"></a></td>
<td><a
href="https://twitter.com/qiqynongg">
<img src="Twitter_logo.png";
style="width: 35px;"></a></td>
</tr>
</table>
<h2> Home </h2>
<table>
<tr><th align=center
colspan=3><strong> DATA PRIBADI </strong></th></tr>
<tr><td></td></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></td></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>
<div id="footer">
Copy © 2013 <br>
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>
<link rel = "stylesheet"
href="style.css" type="text/css">
<body>
<div id="main">
<div id="head">
</div>
<div id="menu">
<table>
<tr>
<td><a class="navi"
href="home.html">Home</a></td>
<td><a class="navi"
href="website.html">Website</a></td>
<td width=400px></td>
<td><a
href="http://www.facebook.com/qiqynongg"><img
src="logo_facebook.png"; style="width: 30px;"></a></td>
<td><a
href="https://twitter.com/qiqynongg"><img
src="Twitter_logo.png"; style="width:
35px;"></a></td>
</tr>
</table>
<h2> Website </h2>
<table>
<tr></th> Situs Web
</th><tr>
<tr><td width=700px> <img
src="unduhan.png"; style="width: 250px;">
<p align=justify>
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.
<br><br><br></p></td></tr>
<tr><td> Sumber :
<a
href="http://id.wikipedia.org/wiki/Situs_web">http://id.wikipedia.org/wiki/Situs_web</a>
</td></tr></table>
</div>
<div id="footer">
Copy © 2013 <br>
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 :)
