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

Modifikasi Motor Cafe Racer

   Cara modifikasi Yamaha Scorpio dengan konsep Cafe Racer mungkin memang dapat dikatakan antara mudah dan ReseP dan Cara Membuat Kue Cucur Gula Merahtidak mudah. Namun jika berbicara soal dasar atau basicnya sendiri, Yamaha Scorpio sendiri memang dapat diaktakan tepat untuk dimodifikasi dengan menggunakan salah satu aliran berbasis vintage tersebut, pasalnya kapasitas mesin dari motor ini memang sudah terhitung besar dan mumpuni yakni mencapai 225cc.     Namun seperti yang telah kita ketahui bersama bahwa Yamaha Scorpio sendiri merupakan salah satu varian motor modern dengan desain body yang cenderung sporty, sedangkan konsep Cafe Racer sendiri merupakan konsep vintage atau klasik sehingga gaya desainnya sendiri akan berbeda jauh. Akan tetapi jika di modifikasi, tentu tidak menutup kemungkinan jika sebuah Yamaha Scorpio dapat menjadi sebuah motor berkonsep Cafe Racer, dan berikut ini adalah beberapa cara modifikasi Yamaha Scorpio dengan konsep C...
Post a 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

Puisi Anekdot

Hukum dan Tikus Pemerintah Apakah hukum itu ? Dimana hukum itu ada ? Mengapa harus ada hukum ? Kenapa hukum itu penting ? Negara kita apakah negeri hukum ? Negara yang penuh akan peraturan Dan penuh dengan norma-norma hukum Apakah rakyat mematuhinya ? Apakah rakyat takut dengan hukum ? Dan apakah Negara kita punya dasar hukum ? Dasar hukum apakah itu ? Coba telusuri ! Apakah hukum ada di rumah ? Di sekolah apakah ada hukum ? Di jalan ada hukum ? Di gedung pengadilan ada hukum ? Di gedung DPR juga ada hukum ? Di mana-mana ada hukum Apakah tikus-tikus pemerintah takut hukum ? Apakah mereka menyalahi hukum ? Aku mencoba menelusurinya Aku heran, mengapa mereka masih berkeliaran ? Tanpa melihat hukum ada di mana-mana Apakah para petugas hukum mencoba membasmi tikus-tikus itu ? Apakah KPK dan BNN takut dengan tikus ? Dan apakah petugas hukum membantu mereka keluar  dari  jebakan hukum ? Apakah mereka berteman ...
Post a Comment
Read more