Cara Membuat Tampilan Dasar Web Dengan Bahasa HTML - Part 2






kali ini saya kembali dengan tema yang sama hanya saja kali ini akan memberikan informasi tahap lanjutan dari pembuatan web dengan bahasa HTML part 2. yang mana lanjutan dari pos membuat tampilan dasar web dengan bahasa HTML - Part 1.

Cukup ketik kode script berikut ini
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
</div>
<div id="header">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="News.html">News</a></li>
<li><a href="Image.html">Image</a></li>
</ul>
</div>

<div id="nav">
<ul>
<li><a href="Naruto.html">Naruto</a></li>
<li><a href="Sasuke.html">Sasuke</a></li>
<li><a href="Sakura.html">Sakura</a></li>
<li><a href="Kakashi.html">Kakashi</a></li>
</ul>
</div>

<div id="section">
<h1>Anime Naruto</h1>
<p>
Naruto (???) adalah sebuah serial manga karya Masashi Kishimoto yang diadaptasi menjadi serial anime. Manga Naruto bercerita seputar kehidupan tokoh utamanya, Naruto Uzumaki, seorang ninja yang berisik, hiperaktif, dan ambisius yang ingin mewujudkan keinginannya untuk mendapatkan gelar Hokage, pemimpin dan ninja terkuat di desanya. Serial ini didasarkan pada komik one-shot oleh Kishimoto yang diterbitkan dalam edisi Akamaru Jump pada Agustus 1997.
</p>
<p>
Manga Naruto pertama kali diterbitkan di Jepang oleh Shueisha pada tahun 1999 dalam edisi ke-43 majalah Shonen Jump. Di Indonesia, manga ini diterbitkan oleh Elex Media Komputindo. Popularitas dan panjang seri Naruto sendiri (terutama di Jepang) menyaingi Dragon Ball karya Akira Toriyama, sedangkan serial anime Naruto, diproduksi oleh Studio Pierrot dan Aniplex, disiarkan secara perdana di Jepang oleh jaringan TV Tokyo dan juga oleh jaringan televisi satelit khusus anime, seperti Animax dan stasiun televisi lainnya, pada 3 Oktober 2002 sampai sekarang. Seri pertama terdiri atas 9 musim dan berlangsung 220 episode. Musim pertama dari seri kedua mulai ditayangkan pada tanggal 15 Februari 2007. Di Indonesia sendiri, anime Naruto pernah ditayangkan oleh stasiun televisi Trans TV, yang kemudian ditayangkan lebih lanjut oleh Global TV.
</p>
</div>

<div id ="footer">
<marquee>
Copyright © Naruichigo.co.id </marquee>
</div>
</body>
</html>



Simpan di folder baru dengan file name type (.html) lagi
Tahap selanjutnya adalah kita akan bermain atau mengedit letak gambar, warna, ukuran tampilan, dll. Dengan cukup mengetik kode script ini di Notepad

#image
{
background-image:url("images.jpg");
padding-left:100px;
height:165px;
}
#header {
background-color:#B22222;
color:red;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:30px;
height:300px;
width:150px;
float:left;
padding:5px;
}
#section{
width:670px;
float:left;
padding:10px;
}
#footer {
background-color:#20B2AA;
color:red;
clear:both;
text-align:center;
padding:5px;
}

ul{
list-style-type: none;
margin: 0;
padding:0;
overflow: hidden;
}

li{
float: left;
}

a:link, a:visited{
display: block;
width: 120px;
font-weight: bold;
color: #DEB887;
background-color:#CD5C5C;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}

a:hover, a:active {
background-color: #FFF8DC;


Kali ini simpan dengan file name type (.css) Cascade Style Sheet
Dan hasilnya sebagai berikut

Semoga bermanfaaat, terimah kasih atas kunjungannya.