Membuat Tampilan Dasar Web Dengan Bahasa HTML [ Tahap Lanjutan ]
Salam Jumpa Gan, kali ini saya akan mengepos tentang informasi yang sama yaitu membuat web dengan bahasa HTML. Hanya saja kali ini lebih dalam lagi. langsung aja kita menuju ke TKP.
- Tetap mengetik kode script yang sama di Notepad tapi hanya mengganti pembahasannya saja, berikut kode scriptnya
<!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="Contact.html">Contact</a></li>
<li><a href="About.html">About</a></li>
</ul>
</div>
<div id="nav">
<div id="garis"><ol><b>Biodata</b></ol></div>
<img src="Yaoming.jpg" width="200px" height="200px">
<p>
Nama : Yaoming<br/>
Pekerjaan : Artis MEME<br/>
Negara : Zimbabwe<br/>
Alamat : Jalan Jomblo Kel. Sendiri Kec. Ngenes No.69<br/>
Hoby : Wancakan<br/> </p>
<hr>
<p align="justify">
Saya adalah Yoming tokoh terkenal dalam MEME. Saya sering digunakan disitus MEME terpopuler di indonesia disitu saya mengekspresikan sesuatu yang hal yang dianggap kocak.
</p>
</div>
<div id="kanan">
<ul>
<li><a href="nav.html">Menu 5</a></li>
<li><a href="nav.html">Menu 6</a></li>
<li><a href="nav.html">Menu 7</a></li>
<li><a href="nav.html">Menu 8</a></li>
</ul>
</div>
<div id="section">
<h1>APA ITU MEME? </h1>
<p>
Sejak pertama kali baca dan mendengar kata meme rasa penasaran timbul. Apa sih meme itu..? kok bahasanya kayak gimana gitu..?
</p>
<p>
Jadi, meme menurut yang ane pahami adalah sebuah gambar yang diberi tulisan yang mendukung ekpresi gambar tersebut. Seperti contohnya gambar dibawah ini adalah ekspresi sedang frustasi. Lalu didukung dengan teks “Hari Gini Gak tau Meme! Kemana Aja”. Menggambarkan seseorang yang frustasi mendapati fakta bahwa kamu belum tahu apa itu meme. :)
<p align="left">
<img src="image.png" widht="400" height="400"/>
</p>
</div>
<div id="tengah"></div>
<body bgcolor="green">
<div id="footer">
<marquee>
Copyright © Wancak.com
</div>
</body>
</html>
- Tetap menyimpa. dengan format file name type (.html)
- Kemudian ketik kode script baru ini di notepad, dan save dengan file name type (.css). Kali ini saya akan menyimpanya dengan format nama style.
#image
{
background-image:url("header.jpg");
padding-left:100px;
height:450px;
}
#header {
background-color:#B22222;
color:white;
text-align:center;
padding:5px;
padding-left:200px;
}
#nav {
line-height:30px;
height:730px;
width:200px;
float:left;
padding-top:5px;
}
#kanan {
line-height:30px;
height:300px;
width:200px;
float:right;
padding-top:5px;
}
#section {
width:350px;
float:left;
padding:50px;
}
#footer {
background-color:#B22222;
color:white;
text-align:center;
padding:5px;
clear:both;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 200px;
font-weight: bold;
color: #FFFFFF;
background-color: #20B2AA;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
#garis {
width: 200px;
float:left;
background-color:#20B2AA;
text-transform: uppercase;
}
- Dan akan terlihat seperti ini
- Dan Hasilnya akan seperti ini
Selamat berkreasi dengan Web anda.
0 komentar:
Posting Komentar