Skip to main content

Cara Membuat Template dengan HTML dan CSS

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 :

<DOCTYPE! 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>

IDCloudHost | SSD Cloud Hosting Indonesia <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

Popular posts from this blog

Ternak Ayam Cemani Mudah

Cara Memelihara Ayam Cemani dari Anakan hingga Indukan Ayam Cemani termasuk salah satu ayam hias asli Indonesia yang mempunyai ciri khas yang tidak dimiliki ayam hias lainnya. Konon, ayam cemani pada awalnya hanya ada di Indonesia. Sekarang ini ayam cemani telah ada di berbagai negara yang mempunyai ketertarikan pada ayam yang mempunyai warna serba hitam ini. Tak sedikit para peneliti dari perguruan tinggi yang meneliti tentang ayam cemani ini. Namun hasil penelitian selengkapnya tentang Ayam Cemani ini belum resmi dirilis hingga sekarang yang bisa menjawab rasa penasaran masyarakat pada Ayam Cemani ini. Hingga kini banyak masyarakat yang bertanya tentang penyebab warna hitam pada keseluruhan bagian ayam, pengaruh makanan terhadap warna ayam dan pembuktian bahwa darah Ayam Cemani benar-benar hitam dan bukan hasil rekayasa semata. Terlepas dari berbagai teori atau misteri yang melingkupi ayam cemani, saat kita akan beternak Ayam Cemani kita tidak perlu secara detail tentang A...
1 comment
Read more

Cara Mengatasi Virus

    Virus Komputer adalah sebuah program yang terdapat di komputer atau laptop yang dapat membuat sistem yang ada di Komputer atau laptop tersebut menjadi rusak atau bermasalah, Virus sangat bersifat merusak komputer dan laptop, Mengapa Virus dibilang merusak ? Karena Virus akan menggandakan dirinya menjadi lebih banyak untuk merusak sistem software (komponen luna yang terdapat di dalam sistem komputer) pada suatu komputer, maka dari itu jika virus dibiarkan lama berada di Komputer ataupun Laptop anda, akan membuat sistem komputer anda menjadi error dan bermasalah, dan akibatnya dapat membuat Komputer anda menjadi Hank. dari sifat virus tersebut anda tentu sudah dapat menyimpulkan bahwa virus sangat menganggu dan merusak komputer anda. Virus dapat merusak data-data penting ataupun aplikasi-aplikasi yang terdapat di memori pada komputer anda, Hal ini yang membuat para pengguna komputer menjadi terganggu. ada beberapa virus yang bahkan ditakuti oleh para pengg...
1 comment
Read more

Cara Agar Blog Banyak Pengunjung Dengan Cepat 100%

Merupakan sebuah impian seorang pemilik blog, jika blognya dibanjiri pengunjung. Untuk tujuan apa? Ada yang ingin agar jika banyak pengunjung maka konversi penjualan meningkat dan lain-lain alasan, yang pasti pengen banyak trafic di blognya. Nah, kali ini saya akan membahas tentang cara agar blog banyak pengunjung. Cara Agar Blog Banyak Pengunjung Sebenarnya banyak cara yang dapat anda lakukan agar blog anda banyak didatangi pengunjung, disini saya akan bahas satu per satu ya, nanti  tinggal anda pilih mana yang cocok ataupun dapat anda kolaborasikan agar tercipta strategi yang jitu supaya blog anda banyak pengunjung. 1. SEO Merupakan trik yang jitu agar blog anda banyak pengunjung, mungkin kebanyakan dari anda menemukan artikel ini melalui google dan mengetik kata kunci “cara agar blog banyak pengunjung”, mengapa harus google? Berikut saya akan memberi data statistik yang dikeluarkan statowl.com Perbandingan Pasar Search Engine Dari data diatas, jelas bahwa google me...
Post a Comment
Read more