TigaPutra: Pertemuan 6 ( Membuat Navigasi )

Melakukan Navigasi

Script Web dibawah ini

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Wisata Kota Malang</h1>

<div class="header">Surga Wisata Alam, Rekreasi, dan Kuliner di Kota Malang</div>

<div id="sosialmedia">Social Media</div>

</div>

<div id="menu"><marquee>Wisata Kota Malang</marquee></div>

<li><a href="#">Wisata Alam</a>

<ul>

<li><a href="pegunungan.html">Pegunungan</a></li>

<li><a href="bahari.html">Bahari</a></li>

<li><a href="agro.html">Agro Wisata</a></li>

</ul>

</li>

<li><a href="rekreasi.html">Wisata Rekreasi</a></li>

<li><a href="#">Wisata Kuliner</a>

<ul>

<li><a href="makan.html">Tempat Makan</a></li>

</ul>

</li>

</ul>

</div>

<div id="search">search</div>

<div id="trending">Trending</div>

</div>

<div id="slide">Slide Gambar</div>

<div id="isi"><h2>Daftar Tempat Wisata di Malang dan Kota Batu</h2>

<p style text-align="justify"><b>Wisata Modern di Malang</b><br/>

1. Wisata Jawa Timur Park (Jatim Park 1 dan 2 Batu), meliputi Eco Green Park, Museum Satwa dan Batu Secret Zoo<br/>

2. BNS - Batu Night Spectaculler<br/>

3. Museum Mobil Antik di Batu<br/><br/>

<b>Wisata Bendungan di Malang :</b><br/>

1. Bendungan Karangkates di Sumber Pucung 35 km dr Kota Malang<br/>

2. Bendungan Sengguruh Kepanjen 23 km dr Kota Malang<br/>

3. Bendungan Selorejo, terletak di Kecamatan Ngantang<br/>

<br/><i>dan masih banyak lagi tempat wisata yang ada di kota malang dan Batu malang </i>

</p>

</div>

<div id="footer">Telp.xxxxxxx,<br/>Email : xxxx@go.id</div>

</div>

</body>

</html>

Script CSS

#wrap {

max-width:1000px;

margin:auto;

}

#menu {

width:997px;

height:25px;

top:0px;

border:1px solid black;

background-color:black;

color:white;

font-size:20px;

position:absolute;

z-index:200;

}

#header {

position:relative;

top:21px;

max-width:997px;

height:200px;

border:1px solid black;

background-color:lightgrey;

display:block;

}

#header h1 {

font-family:gabrielle;

font-size:55px;

text-align:left;

font-weight:bold;

color:black;

margin-top:60px;

margin-left:170px;

margin-bottom:0px;

padding:0;

text-shadow:3px 2px 1px grey;

}

#header .header{

font-family:tahoma,verdana,arial;

font-size:14px;

text-align:left;

margin-left:170px;

text-decoration:overline;

color:brown;

font-weight:bold;

font-style:italic;

}

#logo {

position:absolute;

width:130px;

height:130px;

top:10px;

border:1px solid black;

left:20px;

background-color:lightgrey;

text-align:center;

border-radius:360px;

}

#sosialmedia {

position:absolute;

width:200px;

height:30px;

top:160px;

right:10px;

border:1px solid black;

background-color:lightgrey;

text-align:center;

}

#menu_horisontal {

width:997px;

height:31px;

margin-top:22px;

border:1px solid black;

background-color:black;

color:white;

text-align:center;

position:relative;

z-index:200;

}

#menu_horisontal ul { /*mengatur style list*/

padding:0px;

margin:0px;

list-style-type:none;

text-align:center;

}

#menu_horisontal ul li { /*mengatur posisi list*/

display:block;

position:relative;

float:left;

border-bottom:1px solid white;

background:black;

}

#menu_horisontal ul li a { /*mengatur ukuran dan bentuk*/

display:block;

text-decoration:none;

background-color:black;

color:white;

padding: 5px 20px 5px 20px;

font-size:16px;

border-radius:10px;

border:1px solid white;

}

#menu_horisontal li ul{ /*menghilangkan tampilan pada submenu*/

display:none;

}

#menu_horisontal li:hover ul{ /*untuk menampilkan sub menu*/

display:block;

position:absolute;

}

#menu_horisontal li:hover li{ /*mengatur sub menu agar tidak mengambang*/

float: none;

}

#menu_horisontal li:hover a{ /*mengatur warna submenu*/

color:white;

background:black;

}

#menu_horisontal li:hover a:hover{ /*mengatur warna saat dipilih submenu*/

color:black;

background:gray;

}

#kanan {

width:201px;

margin-top:1px;

min-height:510px;

position:relative;

display:block;

float:right;

}

#search {

position:absolute;

width:198px;

height:30px;

background-color:lightgrey;

display:block;

border:1px solid black;

text-align:center;

}

#trending {

position:absolute;

width:198px;

height:297px;

margin-top:33px;

background-color:lightgrey;

display:block;

border:1px solid black;

text-align:center;

}

#banner {

position:absolute;

top:333px;

width:198px;

height:172px;

background-color:lightgrey;

display:block;

border:1px solid black;

margin-bottom:200px;

text-align:center;

}

#content {

position:relative;

top:1px;

max-width:795px;

height:505px;

display:block;

border:1px solid black;

text-align:left;

}

#slide {

position:relative;

max-width:795px;

height:200px;

background-color:lightgrey;

display:block;

border:1px solid black;

}

#isi {

position:relative;

top:2px;

max-width:795px;

height:300px;

background-color:lightgrey;

display:block;

border:1px solid black;

}

#footer {

clear:both;

margin-top:2px;

max-width:1000px;

height:40px;

background-color:lightgray;

color:black;

display:block;

text-align:center;

padding:2px;

opacity:0.4;

filter: alpha(opacity=40);

}

Tampilan Home

Dari Home Link ke Pegunungan.html

Script pegunungan.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Wisata Kota Malang</h1>

<div class="header">Surga Wisata Alam, Rekreasi, dan Kuliner di Kota Malang</div>

<div id="sosialmedia">Social Media</div>

</div>

<div id="menu"><marquee>Wisata Kota Malang</marquee></div>

<li><a href="#">Wisata Alam</a>

<ul>

<li><a href="pegunungan.html">Pegunungan</a></li>

<li><a href="bahari.html">Bahari</a></li>

<li><a href="agro.html">Agro Wisata</a></li>

</ul>

</li>

<li><a href="rekreasi.html">Wisata Rekreasi</a></li>

<li><a href="#">Wisata Kuliner</a>

<ul>

<li><a href="makan.html">Tempat Makan</a></li>

</ul>

</li>

</ul>

</div>

<div id="search">search</div>

<div id="trending">Trending</div>

</div>

<div id="slide">Slide Gambar</div>

<div id="isi"><h2><b>Wisata Pegunungan</b></h2>

<p style text-align="justify"><b>Wisata Pendakian gunung :</b><br/>

1. Wisata Gunung Bromo lewat. Wisata Bromo dapat di akses dari Malang mulalui rute Desa Tumpang<br/>

2. Gunung Kawi, terletak di wilayah Kecamatan Wonosari. Terkenal sebagai tempat wisata spiritual.<br/>

3. Gunung Arjuno-Welirang, sering dipakai untuk pendakian dengan rute Junggo, Cangar, Singosari, Lawang.<br/>

4. Gunung Semeru lewat desa Ngadas kecamatan Poncokusumo<br/><br/>

<b>Wisata Sepeda Gunung/ Moto Trail Adventure</b><br/>

1. Wisata Sepeda Gunung di Batu<br/>

2. Wisata Sepeda Gunung di Pujon<br/>

3. Wisata Sepeda Gunung di Bromo<br/>

<i>Dan masih banyak lagi wisata Pegunungan yang ada di Kota Malang dan sekitarnya</i>

</p>

</div>

<div id="footer">Telp.xxxxxxx,<br/>Email : xxxx@go.id</div>

</div>

</body>

</html>

TigaPutra

Selasa, 14 April 2015

Pertemuan 6 ( Membuat Navigasi )

Tidak ada komentar:

Posting Komentar