| N.I.M | 1504411213 |
|---|---|
| Nama | Suryadi |
| Semester/Kelas | III/F |
| Dosen | Syafriady ,S.kom,.M.kom |
- Buka Notepad++.
- Ketik Skrip brikut:
<HTML>
<!-- bagian kepala -->
<head>
<title>----Micro Cyber KW 2----</title>
<style>
/* CSS */
#wrapper{
width: 800px; /* Ini lebar Template secara keseluruhan */
margin: auto; /* Ini untuk membuat "CENTER" blog pada Browser */
}
.header{
height: 100px; /* Ini Untuk mengatur tinggi di header */
background-color:#00FF00 ; /* Ini Untuk mengatur warna background pada header*/
margin: 5px 5px 1px 5px;
padding: 10px;
border: 1.5px solid #000000; /* Border untuk mengatur ketebalan garis tepi dan #000000 adalah warna untuk garis tepi*/
}
.bagian-post{
float: right; /* Ini Untuk memposisikan Widget di kiri */
width: 525px; /* Ini Untuk mengatur lebar kotak postingan*/
height:450px;
margin: 0 10px 1px 0;
padding: 10px;
background-color: #00BFFF ;
border: 2px solid #000000;
}
.bagian-widget{
float: left; /* Ini untuk memposisikan Widget di Kanan */
width: 205px;
height:450px;
margin: 0 1px 1px 10px;
padding: 10px;
background-color:#FF0000 ;
border: solid 2px #000000;
}
.footer{
width: 800x;
background-color: #FFFF00 ;
margin: 0 10px 10px 10px;
padding: 10px;
text-align: center; /* Ini untuk memposisikan tulisan berada ditengah atau center */
border: 2px solid #000000;
}
</style>
(Pada bagian ini merupakan inti dari pengaturan gaya pada template seperti bagian header, bagian posting dan pada bagian fotoher, baik itu pegaturan warna latar, jenis tulisan, maupun ukuran kotaknya).
- Setelah mengetik skrip di atas, mari kita lajutkan skrip brikut:
</head>
<!-- bagian badan/body nya -->
<body background="image3.jpg">
<div id='wrapper'>
<!-- bagian kepala/ header nya -->
<div class='header'>
<h1>Template Web Sederhana</h1>
</div>
<!--Bagian Postingan-->
<div class='bagian-post'>
<h3>Pengertian Template</h3>
<p>Template merupakan sebuah tampilan awal dalam sebuah situs web / blog sedangkan template
tersebut untuk mempercantik tampilan blog anda sehinga bisa menarik pengunjung apa lagi jika
template itu sangat ringan, template banyak macamnya tergantung anda ingin menginginkan apa
dan carilah template yang cocok untuk niche atau karakter situs yang anda kelola.</p>
<a href="#"><b>Baca Selengkapnya ...</b></a> <br><br>
<h3>IDENTITAS</h3>
<p>
N.I.Me : 1504411213
<br>Nama : Suryadi
<br>Semester: III/F
<br>Dosen : Syafriady S.kom,.M.kom
</p>
</div>
<!-- Bagian Widget-->
<div class='bagian-widget'>
<h2>Artikel Terkait</h2>
<ul type="square">
<li><a href="/">Beranda</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Dasar-dasar HTML</a></li>
<li><a href="#">Buku Tamu</a></li>
<li><a href="#">MyWebsite Online</a></li>
</ul>
</div>
<div style='clear:both'>
<!-- bagian footer-->
<div class='footer'>
<p>Design template</p>
</div>
</body>
</HTML>
(Skrip ini merupakan Isi postingan yang terdapat pada template).
- Nah langkah berikutnya menyatuhkan semua skrip, berikut skrip beserta hasil screenshot:
<HTML>
<!-- bagian kepala -->
<head>
<title>----Micro Cyber KW 2----</title>
<style>
/* CSS */
#wrapper{
width: 800px; /* Ini lebar Template secara keseluruhan */
margin: auto; /* Ini untuk membuat "CENTER" blog pada Browser */
}
.header{
height: 100px; /* Ini Untuk mengatur tinggi di header */
background-color:#00FF00 ; /* Ini Untuk mengatur warna background pada header*/
margin: 5px 5px 1px 5px;
padding: 10px;
border: 1.5px solid #000000; /* Border untuk mengatur ketebalan garis tepi dan #000000 adalah warna untuk garis tepi*/
}
.bagian-post{
float: right; /* Ini Untuk memposisikan Widget di kiri */
width: 525px; /* Ini Untuk mengatur lebar kotak postingan*/
height:450px;
margin: 0 10px 1px 0;
padding: 10px;
background-color: #00BFFF ;
border: 2px solid #000000;
}
.bagian-widget{
float: left; /* Ini untuk memposisikan Widget di Kanan */
width: 205px;
height:450px;
margin: 0 1px 1px 10px;
padding: 10px;
background-color:#FF0000 ;
border: solid 2px #000000;
}
.footer{
width: 800x;
background-color: #FFFF00 ;
margin: 0 10px 10px 10px;
padding: 10px;
text-align: center; /* Ini untuk memposisikan tulisan berada ditengah atau center */
border: 2px solid #000000;
}
</style>
</head>
<!-- bagian badan/body nya -->
<body background="image3.jpg">
<div id='wrapper'>
<!-- bagian kepala/ header nya -->
<div class='header'>
<h1>Template Web Sederhana</h1>
</div>
<!--Bagian Postingan-->
<div class='bagian-post'>
<h3>Pengertian Template</h3>
<p>Template merupakan sebuah tampilan awal dalam sebuah situs web / blog sedangkan template
tersebut untuk mempercantik tampilan blog anda sehinga bisa menarik pengunjung apa lagi jika
template itu sangat ringan, template banyak macamnya tergantung anda ingin menginginkan apa
dan carilah template yang cocok untuk niche atau karakter situs yang anda kelola.</p>
<a href="#"><b>Baca Selengkapnya ...</b></a> <br><br>
<h3>IDENTITAS</h3>
<p>
N.I.Me : 1504411213
<br>Nama : Suryadi
<br>Semester: III/F
<br>Dosen : Syafriady S.kom,.M.kom
</p>
</div>
<!-- Bagian Widget-->
<div class='bagian-widget'>
<h2>Artikel Terkait</h2>
<ul type="square">
<li><a href="/">Beranda</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Dasar-dasar HTML</a></li>
<li><a href="#">Buku Tamu</a></li>
<li><a href="#">MyWebsite Online</a></li>
</ul>
</div>
<div style='clear:both'>
<!-- bagian footer-->
<div class='footer'>
<p>Design template</p>
</div>
</body>
</HTML>
