Cara Membuat Blog dengan HTML dan CSS
Pertama yang harus anda lakukan adalah meng-copy script HTML di bawah ini dan simpan dengan nama web.html :
<head>
<META content="prakasa.com" name="AUTHOR>
<META content="prakasa idaman perempuan."
name=description>
<META content="lelaki,pandai,berani,jujur,ganteng,sehat" name=keywords>
<META content="INDEX, FOLLOW" name=ROBOTS>
<META http-equiv="Content-Language" content="en-us">
<META http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>YS CORPORATION</title>
<link rel="stylesheet" href="style.css"
type="text/css"/>
</head>
<body>
<bgcolor="gray">
<div id="content">
<header>
<h1>YS CORPORATION</h1>
</header>
<nav id="navbg">
<ul class="navigation">
<li>
<a href="#">Kontak</a></li>
<li>
<a href="#">Profile</a></li>
<li>
<a href="#">Artikel</a></li>
<li>
<a href="#">Beranda</a></li>
</ul>
</nav>
<section id="banner">
<header>
<banner="racer.jpg">
</header>
</section>
<section>
<article>
<ul class="kategori">
<li id="kat1">
<h3>Berita ke 1</h3>
<p>Nama aplikasi : Web Server</p>
<p> Port ini biasanya digunakan untuk web server, jadi ketika user mengetikan alamat IP atau hostname di web broeser maka web browser akan melihat IP tsb pada port 80,
</p>
<p><center><a href="">Baca selanjutnya...</p></a></center>
</li>
<li id="kat2">
<h3>Berita ke 2</h3>
<p>Nama aplikasi : Web Server Alternatif</p>
<p>ketika port 80 diblok maka port 81 akan digunakan sebagai port altenatif hosting website </p>
<p><center><a href="">Baca selanjutnya...</p></a></center>
</li>
<li id="kat3"><h3>Berita ke 3</h3>
<p>Nama aplikasi : FTP Server</p>
<p>: Ketika seseorang mengakses FTP server, maka ftp client secara default akan melakukan koneksi melalui port 21 dengan ftp server </p>
<p><center><a href="">Baca selanjutnya...</p></a></center>
</li>
<li id="kat4">
<h3>Service 4</h3>
<p>Nama aplikasi : Telnet</p>
<p>Jika anda menjalankan server telnet maka port ini digunakan client telnet untuk hubungan dengan server telnet </p>
<p><center><a href="">Baca selanjutnya...</p></a></center>
</li>
</ul>
</article>
</section>
<footer id="footer">
<ul class="footer">
<li>
<strong>Kontak Kami</strong>
<ul class="footertext">
<li>
<a href="#">Kontak</a></li>
<li>
<a href="#">Portofolio</a></li>
<li>
<a href="#">Tentang Kami</a></li>
</ul>
</li>
<li>
<strong> Temukan kami di SOCMED...</strong>
<ul class="footertext">
<li>
<a href="#">Facebook</a></li>
<li>
<a href="#">Twitter</a></li>
</ul>
</li>
</ul>
</footer>
</div>
<center><footer>ini untuk isi bagian footer</footer></center>
</body>
</html>
Setelah itu,copy juga script css dibawah ini dan simpan demgan nama script.css :
body
{
font-family: "Lucida Grande", sans-serif; font-size:14px;
margin:0;
background-color:#f1f1f1;
}
p,h1,h2,h3
{
margin-left:5px;
}
#content
{
width:1002px;
clear: both; margin: 0 auto;
}
ul.navigation {
padding: 0;
margin: 0;
width: 100%;
}
ul.navigation li {
list-style-type: none;
display: block;
width: 100px;
line-height:35px;
margin:0 15px;
padding:0 5px;
float: right;
text-align:35px;
background:#663300;
margin-top:-10px;
font-size:16px;
font-weight:bold;
}
ul.navigation li a {
display: block;
text-decoration: none;
color:#FFF;
}
ul.navigation li a:hover {
display: block;
width: 100px;
line-height:35px;
margin-top:-10px;
text-decoration: none;
}
#navbg
{
display: block;
background-color:#336600;
height:35px;
}
.navigation li:before {
content:"";
display:block;
position:relative;
left:-15px;
width:0;
height:0;
border-width:5px 5px 5px 5px;
border-style:solid;
border-color: transparent #2e3f00 #2e3f00
transparent ;
}
#banner
{
display:block;
height:250px;
background-image:url(kopasus4.jpg)
}
ul.kategori {
padding: 0;
margin: 0;
width: 100%;
}
ul.kategori li {
list-style-type: none;
display:block;
float: left;
text-align: left;
background:#5f7e0a;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px;
width: 210px;
}
li#kat1
{background-color:#66CC00;}
li#kat2
{background-color:#669933;}
li#kat3
{background-color:#99CC33;}
li#kat4
{background-color:#99CC99;}
#footer
{
display:block;
clear:both;
background-color:#666633;
height:120px;
padding:5px;
}
ul.footer {
padding:0;
margin:0;
list-style: none;
}
ul.footer li {
list-style-type: none;
display: block;
margin-right:50px;
float: left;
text-align: left;
line-height:30px;
color:#FFF;
}
ul.footertext {
padding: 0;
margin: o;
list-style: none;
}
ul.footertext li {
text-align: left;
float:left;
clear:both;
}
ul.footertext li a {
text-decoration: none;
display: block;
width: auto;
color: #FFFFFF;
}
ul.footertext li a:hover {
width:auto;
color: #dff293;
}
Setelah semua scriptnya jadi, simpan kedua script tersebut dalam satu folder yang sama.Selamat mencoba.....
Comments
Post a Comment