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

Jenis Motor Harley Davidson

Jenis-Jenis Motor Harley Davidson TOURING   Kadang-kadang disebut sebagai “Baggers”, Harley Touring dari bentuk memang di disain siap untuk sebuah perjalanan jauh. Jika kita sedang merencanakan untuk mengambil model ini untuk perjalanan jauh maka jenis ini memang cocok. Ketika memilih motor touring, berat atau beban adalah sesuatu yang perlu dipertimbangkan. Model touring ajkan tetap membuat anda nyaman walau selama berjam-jam lamanya diatas jok motor akan tetapi bisa memiliki berat sekitar 400 kg apabila semua terpasang lengkap. CRUISERS   Harley Fat Boy, Heritage dan lebih awalnya model Nostalgia akan masuk dalam kategori ini. Motor ini hampir mirip dengan Harley jenis Touring, sehubungan dengan gaya big FL mereka pada bagian depan meskipun mereka lebih dikelompokkan sebagai softails. Meski tidak seberat Harley model touring, motor ini masih tergolong berat dan tidak dianjurkan untuk pengendara pemula. SOFTAILS  Motor ini jenis Harley ...
Post a Comment
Read more

Tembang Macapat Sinom

Tembang macapat Sinom merupakan salah satu tembang macapat yang banyak berbicara tentang anak muda yang sedang mengalami pertumbuhan. Di usianya ini biasanya masih dalam proses pencarian identitas, selalu masih bertanya-tanya tentang “siapa aku”, sehingga tidak sedikit para remaja ini akan mencari sosok yang bisa menjadi panutan ataupun teladan bagi dirinya. Dalam tradisi jawa, tembang banyakk dimanfaatkan sebagi sebuah piwulang (ajaran) dan wewarah (mengajari). Salah satu tembang macapat sinom yang paling populer adalah karya KGPAA Mangkunegoro ke IV (1811-1882 M) yang terdapat dalam Serat Wedatama, Pupuh Sinom, podo 15. Tembang ini sering dikenal dengan nama Sinom Gadhung Melati. Pupuh 1 Nuladha laku utama Tumraping wong tanah jawi Wong agung ngeksiganda Panembahan senapati Kapati amarsudi Sudaning hawa lan nepsu Pinesu tapa brata Tanapi ing siyang ratri Amamangun karyenak tyasing sasama Pupuh 2 Saben nendra saking wis wisma Lelana le...
Post a Comment
Read more