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

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

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