01 Membuat Web CSS

HTML Dasar
Membuat Web One Page

dengan CSS (polosan)
Tutorial membuat web satu-halaman dengan efek geser-horizontal hanya
dengan HTML dan CSS. Hasilnya berupa kerangka web satu-halaman yang
dapat dimodifikasi sesuai selera.
Halo semuanya yang lagi bingung mikirin engine untuk lomba Majalah Digital (Madig)! Kali ini saya coba
tunjukkan bagaimana membuat halaman web One Page. One Page bisa diartikan web hanya terdiri dari
satu file HTML saja.
Sebelum dilanjut lebih jauh, sebaiknya anda sudah memiliki pengetahuan dasar tentang HTML dan CSS.
Karena saya gak akan njelasin satu-per-satu. Pelajaran itu sudah berlalu. Untuk editornya, anda bebas
mau menggunakan Adobe Dreamweaver, Notepad++, atau bahkan Notepad bawaan Windows.
HTML Dasar
Umumnya, sebuah website terdiri dari beberapa file ber-ekstensi .html yang dikaitkan menggunakan
hyperlink. Untuk web one page semua halaman dibuat dalam bentuk ruang-ruang. Sehingga, jumlah
halaman sama dengan jumlah ruang yang dibuat. Perhatikan gambar berikut:
Gambar 1. Pembagian area pada halaman web

SLAMET BUDI SANTOSO
HTML Dasar
Nah, sekarang bagaimana membuatnya di HTML? Ketikkan kode HTML berikut dan simpan dengan nama
onepage.html atau nama file yang lain.
<!DOCTYPE html>
<head>
<title>One Page Web</title>
</head>
<body>

<div id="home" class="content">
<h2>Home</h2>
<p>teks untuk halaman pertama</p>
</div>


<div id="halaman2" class="panel">
<div class="content">
<h2>Halaman 2</h2>
<p>teks halaman dua</p>
</div>
</div>


<h2>Halaman 3</h2>
<p>Isi halaman 3</p>
</div>
</div>


<h2>Halaman 4</h2>
<p>Isi halaman 4</p>
</div>
</div>


<div id="navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#halaman2">Portfolio</a></li>
<li><a href="#halaman3">About Me</a></li>
<li><a href="#halaman4">Contact</a></li>
</ul>
</div>

</body>
</html>
SLAMET BUDI SANTOSO
Cascading Style Sheet
Dan hasilnya akan tampak seperti ini...
Gambar 2. Halaman web murni

Waduh, kok jelek banget yah? Ya, karenanya tidak cukup HTML saja untuk membuat web yang baik.
Untuk memberikan tampilan yang lebih baik, perlu ditambahkan CSS dengan menambahkan tag
<style> dan </style> sebelum </head>. Lihat di bawah ini:
<head>
<title>One Page Web</title>
<style>
...style web...
</style>
</head>
Langkah pertama yang disarankan oleh para desain web dunia adalah melakukan CSS reset. Kenapa
perlu di-reset? Karena setiap browser (sebutan untuk: Internet Explorer, Firefox, Opera, Chrome, Safari,
dll.) pada dasarnya memiliki style-nya masing-masing dalam menampilkan halaman web. Ketikkan skrip
berikut di antara tag <style> dan </style>.
html,body {
margin:0;
padding:0;
height:100%;
}
body {
width: 100%;
background: #fff;
overflow-x: hidden;
SLAMET BUDI SANTOSO
overflow-y: auto;
}
Beberapa istilah yang penting untuk dipahami:
Margin adalah jarak antara sebuah elemen dengan elemen yang lain, dalam hal ini antara <body>
dengan tepian browser.
Padding adalah jarak suatu elemen web dengan elemen lain yang ada di dalamnya.
Height adalah ketinggian suatu elemen web.
Width adalah lebar suatu elemen web.
Overflow digunakan untuk mengatur tampilan konten halaman web yang melampaui batas (overflow).
Berikutnya, tambahkan style untuk mengatur tampilan tiap halaman. Dalam contoh ini, tiap halaman
diberi kelas panel.
.panel{
width: 100%;
min-height: 100%;
position: absolute;
background-color: #000;
box-shadow: 4px -4px 4px rgba(0,0,0,0.2);
margin-left: -102%;
z-index:2;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
Tambahkan juga style untuk navigasi dan .content, seperti ini:

#navigation {
position: absolute;
z-index: 2000;
}
.content{
right: 40px;
left: 280px;
position: absolute;
padding-bottom: 30px;
color: #000;
}
Dan... anda akan mendapati tampilan seperti ini.
SLAMET BUDI SANTOSO
Gambar 3. Halaman web yang sudah diatur
Hanya saja, apa yang terjadi ketika link navigasi di-klik? Ya, tidak terjadi apa-apa. Halaman tidak berubah.
Nah, agar link dapat berfungsi, tambahkan lagi style berikut:
.panel:target{
margin-left: 0%;
background-color: #abc;
}
Dan... lihat hasilnya.

Sampai di sini dulu tutorial sangat-sederhana ini. Yang terpenting, anda coba pahami prinsip pembuatan
halaman web khususnya pengaturan tampilan menggunakan CSS. Contoh di atas menggunakan desain
layout:
Gambar 4. Layout contoh
Anda boleh merubahnya sesuai selera masing-masing.
SLAMET BUDI SANTOSO

01 Membuat Web CSS

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

01 Membuat Web CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML Dasar

Membuat Web One Page

Gambar 1. Pembagian area pada halaman web

SLAMET BUDI SANTOSO

Cascading Style Sheet

Dan hasilnya akan tampak seperti ini...

Gambar 2. Halaman web murni

Cascading Style Sheet

SLAMET BUDI SANTOSO

Cascading Style Sheet

Beberapa istilah yang penting untuk dipahami:

Tambahkan juga style untuk navigasi dan .content, seperti ini:

Dan... anda akan mendapati tampilan seperti ini.

SLAMET BUDI SANTOSO

Cascading Style Sheet

Gambar 3. Halaman web yang sudah diatur

Dan... lihat hasilnya.

Gambar 4. Layout contoh

Anda boleh merubahnya sesuai selera masing-masing.

SLAMET BUDI SANTOSO

Anda mungkin juga menyukai