Untuk kesempatan kali ini saya akan memposting bagaimana cara untuk membuat tampilan web sederhana mengunakan HTML, dan sedikit sentuhan CSS untuk mempercantik tampilannya. pertama-tama siapkan beberapa kebutuhan sebelum kita memulai untuk membuat tampilan web sederhana ini:
body {
background-image:url(image1.png);
background-attachment: fixed;
}
#main {
width : 1000px;
margin: 10px auto;
background:#FFF;
overflow:hidden;
}
#head1{
margin:10px;
padding: 10 50px 10px 10px;
background: url(banner1.jpg) no-repeat;
height: 250px;
}
#head2{
margin:10px;
margin-left:300px;
padding: 10 50px 10px 10px;
background: url(prof.png) no-repeat;
height: 250px;
}
#menu {
margin: 20px;
padding: 10px 10px 10px 5px;
font-size: 12pt;
font-family: Californian FB;
width:1150px;
background-position: top left;
}
a, a:link, a:visited, a:active{
font-family: Candara;
letter-spacing: 1px;
color:black;
}
a:hover {
color:#00e020;
}
a.navi{
padding:5px;
text-decoration:none;
font-family:Californian FB;
font-size:14px;
color:black;
text-align:center;
width:100px;
background:#aedb58;
display:inline-block;
}
a.navi:hover{
color:white;
}
background-image:url(image1.png); adalah nama file gambar yang penulis gunakan untuk header pada web ini, pembaca boleh mengganti gambar sesuai dengan keinginan
>> Baca Selengkapnya
- Buat satu folder khusus untuk menyimpan semua file yang akan kita buat nanti.
- siapkan 4 buah gambar untuk kebutuhan pembuatan tampilan web ini :
- gambar dengan nama image1.png (sebagai background web yg akan dibuat)
- gambar dengan nama banner1.jpg (sebagai tampilan header pada halaman 1)
- gambar dengan nama prof.png (sebagai tampilan header pada halaman 2)
- gambar dengan nama jehan.png (untuk foto dalam halaman profil)
Setelah semua persiapan diatas selesai barulah kita mulai membuat tampilan web nya.
- Untuk langkah awal, buatlah file baru dengan notepad/notepad++ dan beri nama style.css, dan ketikkan script dibawah ini :
body {
background-image:url(image1.png);
background-attachment: fixed;
}
#main {
width : 1000px;
margin: 10px auto;
background:#FFF;
overflow:hidden;
}
#head1{
margin:10px;
padding: 10 50px 10px 10px;
background: url(banner1.jpg) no-repeat;
height: 250px;
}
#head2{
margin:10px;
margin-left:300px;
padding: 10 50px 10px 10px;
background: url(prof.png) no-repeat;
height: 250px;
}
#menu {
margin: 20px;
padding: 10px 10px 10px 5px;
font-size: 12pt;
font-family: Californian FB;
width:1150px;
background-position: top left;
}
a, a:link, a:visited, a:active{
font-family: Candara;
letter-spacing: 1px;
color:black;
}
a:hover {
color:#00e020;
}
a.navi{
padding:5px;
text-decoration:none;
font-family:Californian FB;
font-size:14px;
color:black;
text-align:center;
width:100px;
background:#aedb58;
display:inline-block;
}
a.navi:hover{
color:white;
}
- kemudian save file tersebut dalam satu folder yang telah dibuat sebelumnya, agar memudahkan dalam pemanggilan.
background-image:url(image1.png); adalah nama file gambar yang penulis gunakan untuk header pada web ini, pembaca boleh mengganti gambar sesuai dengan keinginan
- Kemudian buatlah file dengan notepad/notepad++ dan beri nama web.html, dan ketikkan script dibawah ini :
<html>
<title>PROFIL</title>
<link rel ="stylesheet" href="style.css" type="text/css">
<body>
<div id="main">
<div id="head1">
</div>
<div id="menu">
<table>
<tr>
<td><a class="navi" href="web.html">PROFIL</a></td>
<td><a class="navi" href="link.html">ANDROID</a></td>
<td><a class="navi" href="http://muhammadsatra.blogspot.com/">BLOG</a></td>
</tr>
</table>
<h2>PROFIL</h2>
<table>
<tr><td align=center colspan=2><img src="jehan.png"; style="width:150px;"></td></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td>Nama</td><td>:</td><td>Jehan Muhammad Satra</td></tr>
<tr><td>Tempat Lahir</td><td>:</td><td>Jakarta</td></tr>
<tr><td>Tanggal Lahir</td><td>:</td><td>28 September 1991</td></tr>
<tr><td>Jenis Kelamin</td><td>:</td><td>Laki-Laki</td></tr>
<tr><td>Agama</td><td>:</td><td>Islam</td></tr>
<tr><td>Alamat</td><td>:</td><td>JL. H. Lebar RT. 007/02 No.35</td></tr>
<tr><td>Kelurahan</td><td>:</td><td>Meruya Selatan</td></tr>
<tr><td>Kecamatan</td><td>:</td><td>Kebon Jeruk</td></tr>
<tr><td>Kota Madya</td><td>:</td><td>Jakarta Barat</td></tr>
<tr><td>Status</td><td>:</td><td>Mahasiswa, Sistem Informasi</td></tr>
<tr><td>Universitas</td><td>:</td><td>Gunadarma</td></tr>
<tr><td>Jurusan</td><td>:</td><td>Sistem Informasi</td></tr>
<tr><td>No. Kontak</td><td>:</td><td>0821108XXXXX</td></tr>
<tr><td>Email</td><td>:</td><td><a href="jehansatra.borneotelecom@gmail.com">jehansatra.borneotelecom@gmail.com</a></td></tr>
</table>
</div>
- Setelah selesai save file tersebut dan simpan dalam satu folder dengan style.css.
- Kemudian buat file menggunakan notepad/notepad++ dan beri nama link.hta, dan ketikkan script berikut:
<html>
<title>ANDROID</title>
<link rel ="stylesheet" href="style.css" type="text/css">
<body>
<div id="main">
<div id="head2">
</div>
<div id="menu">
<table>
<tr>
<td><a class="navi" href="web.html">PROFIL</a></td>
<td><a class="navi" href="link.html">ANDROID</a></td>
<td><a class="navi" href="https://www.muhammadsatra.blogspot.com">BLOG</a></td>
</tr>
</table>
<h2>Sejarah Singkat Android</h2>
<table>
<tr><th><strong>Kerjasama Dengan Android Inc.</strong></th></tr>
<tr></tr>
<tr><td width=950px>
<p align=justify>Pada Juli 2005, Google bekerjasama dengan Android Inc., perusahaan yang berada di Palo Alto,
California Amerika Serikat. Para pendiri Android Inc. bekerja pada Google, di antaranya Andy Rubin, Rich Miner,
Nick Sears, dan Chris White. Saat itu banyak yang menganggap fungsi Android Inc. hanyalah sebagai perangkat lunak pada telepon seluler.
Sejak saat itu muncul rumor bahwa Google hendak memasuki pasar telepon seluler. Di perusahaan Google, tim yang dipimpin Rubin bertugas
mengembangkan program perangkat seluler yang didukung oleh kernel Linux. Hal ini menunjukkan indikasi bahwa Google sedang bersiap menghadapi
persaingan dalam pasar telepon seluler.<br><br><br></p></td><tr/>
<tr><th><strong>Produk Awal</strong></th></tr>
<tr></tr>
<tr><td width=950px>
<p align=justify>Sekitar September 2007 sebuah studi melaporkan bahwa Google mengajukan hak paten aplikasi telepon seluler
(akhirnya Google mengenalkan Nexus One, salah satu jenis telepon pintar GSM yang menggunakan Android pada sistem operasinya.
Telepon seluler ini diproduksi oleh HTC Corporation dan tersedia di pasaran pada 5 Januari 2010).<br><br></p></td><tr/>
<tr><td width=950px>
Pada 9 Desember 2008, diumumkan anggota baru yang bergabung dalam program kerja Android ARM Holdings, Atheros Communications,
diproduksi oleh Asustek Computer Inc, Garmin Ltd, Softbank, Sony Ericsson, Toshiba Corp, dan Vodafone Group Plc. Seiring pembentukan Open Handset Alliance,
OHA mengumumkan produk perdana mereka, Android, perangkat bergerak (mobile) yang merupakan modifikasi kernel Linux 2.6. Sejak Android dirilis telah dilakukan
berbagai pembaruan berupa perbaikan bug dan penambahan fitur baru.
Telepon pertama yang memakai sistem operasi Android adalah HTC Dream, yang dirilis pada 22 Oktober 2008. Pada penghujung tahun 2009 diperkirakan
di dunia ini paling sedikit terdapat 18 jenis telepon seluler yang menggunakan Android.<br><br></p></td><tr/>
<tr><td> Sumber : <a href="http://id.wikipedia.org/wiki/Android_(sistem_operasi)">http://id.wikipedia.org/wiki/Android_(sistem_operasi)</a></td></tr></table>
</div>
- Setelah selesai, save file diatas kemudian buka file web.html yang telah dibuat sebelumnya menggunakan web browser (internet explorer, mozzila firefox, google chrome, dsb)
- Dan lihat hasilnya