IDENTITAS
Nim :
1504411142
Nama : Wayan Suka Arsana
Putra
Semester/Kelas : III/f
Dosen :Syafriadi,.S.Kom.,M.Kom
Langkah-langkah Pembuatan :
1. Buka Notepad Terlebih dahulu, kemudian buat kode seperti cara-cara
dibawah ini. Untuk keterangan sudah diberikan dengan himpitan simbol /* dan
*/
<HTML>
<!-- bagian kepala -->
<head>
<title>--Membuat Template web
Sederhana--</title> <div style="text-align:center">
<span style="color:orange;
font-size: 35px;"><b>/* Bagian ini
merupakan bagian judul */
</b></span>
</div>
<style>
/* CSS */
#wrapper{
width: 800px; /* Ini lebar Template secara keseluruhan */
margin: auto; /* Ini untuk membuat "CENTER" blog pada Browser
*/
}
.header{
height: 150px; /* Ini Untuk mengatur tinggi di header */
background-color: #8B0000; /*
Ini Untuk mengatur warna background pada header*/
margin: 10px 10px 1px 10px;
padding: 10px;
border: 2px 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:400px;
margin: 0 10px 1px 0;
padding: 10px;
background-color: #ffffff;
border: 2px solid #000000;
}
.bagian-widget{
float: left; /* Ini untuk memposisikan Widget di Kanan */
width: 205px;
height:400px;
margin: 0 1px 1px 10px;
padding: 10px;
background-color: #A52A2A;
border: solid 2px #000000;
}
.footer{
width: 800x;
background-color: #800000;
margin: 0 10px 10px 10px;
padding: 10px;
text-align: center; /* Ini untuk memposisikan tulisan berada ditengah atau
center */
border: 2px solid #000000;
}
</style>
</head>
2. Selanjutnya masukkan terlebih dahulu kode
untuk membangun bagian atasnya. Pada kode bawah terdapat 2 kode, yaitu body dan
header. Semua itu saya buat untuk mengatur atau membuat tampilan background
berupa gambar. Sobat juga bisa merubahnya dengan warna saja dengan memasukkan
kode warna entah dengan nama gambar atau url gambar. NB : Jika sobat ingin memberi background gambar dengan nama
gambar, maka gambar harus dijadikan satu folder dengan notepad yang telah
disave ! Untuk keterangan sudah diberikan dalam himpitan
simbol /* dan */ .
<!-- bagian badan/body nya -->
<body background="bg.jpg"> /* Ini untuk gambar atau warna background
keseluruhan */
<div id='wrapper'>
<!-- bagian kepala/ header nya
-->
<div class='header' align="center">
<h1><img src="uncp.jpg"
width="80" height="80" border="2" >
<div
style="text-align:center; font-size: 25px"><B> UNIVERSITAS
COKROAMINOTO PALOPO /* Ini untuk gambar atau warna background pada header */</B></div>
</h1>
</div>
3. Kemudian saatnya membuat bagian pada
postingan artikel/ isinya. Caranya seperti dibawah, yaitu dengan membuat
heading kemudian membuat paragraf. untuk heading disimbolkan dengan kode
<h3> dan ditutup dengan </h3> . Kemudian untuk paragraf disimbolkan
dengan kode <p> dan ditutup dengan </p> . Pada heading juga bisa
diibaratkan sebagai judul artikel/ isi. Nah untuk kode pagar (#) dibawah,
silahkan isi dengan link yang akan dituju/ lanjutan artikel. Karena itu
diibaratkan dengan read more atau baca selengkapnya.
<!--Bagian Postingan-->
<div class='bagian-post'>
<h3>Visi Misi UNCP
Palopo</h3>
<p>Visi
Menjadi Perguruan Tinggi yang unggul
dalam pendidikan karakter pada tahun 2030.
Misi
Menyiapkan peserta didik menjadi anggota masyarakat yang bermoral serta
memiliki kemampuan akademik dan atau profesional yang unggul dan mampu bersaing
secara nasional maupun internasional;
Menemukan, mengembangkan menciptakan karya di bidang ilmu pengetahuan,
teknologi dan budaya, serta menyebarkan demi kepentingan ilmu pengetahuan dan
kesejahteraan umat manusia;...</p>
<a
href="http://uncp.ac.id/blog/page/visi-dan-misi"><b>Baca
Selengkapnya ...</b></a> <br><br>
<h3>Sejarah UNCP</h3>
<p>Universitas Cokroaminoto Palopo (UNCP) yang
populer dengan nama Uncokro Palopo berdiri sejak 1 Maret 1967. Perguruan Tinggi
ini pada awalnya dibina oleh Yayasan Perguruan Tinggi Cokroaminoto Makassar
berdasarkan Akte Notaris Nomor: 33 Tanggal 16 Mei 1986 oleh Notaris M.G.
Ohorella, S.H. dengan...</p>
<a
href="http://uncp.ac.id/blog/page/sejarah"><b>Baca
Selengkapnya ...</b></a> <br><br>
</div>
4. Setelah itu membuat bagian widget tautan
artikel. Caranya seperti dibawah dan kode pagar (#) juga sama diisi link yang akan
dituju. Pada kode dibawah juga menggunakan kode heading yaitu <h2> dan
ditutup dengan </h2> .
<!-- Bagian Widget-->
<div class='bagian-widget'>
<h2>Artikel Terkait</h2>
<ul type="square">
<li><a
href="http://uncp.ac.id/">Beranda UNCP</a></li>
<li><a
href="http://wayansukaap.blogspot.co.id/2016/11/biografi-pemilik-blog.html">About
Me</a></li>
<li><a
href="http://wayansukaap.blogspot.co.id/2016/10/elemen-dasar-jenis-dokumen-terdapat.html">Dasar-dasar
Html</a></li>
<li><a
href="http://zukeputra.blogspot.co.id/">Pengetahuan
Komputer</a></li>
</ul>
</div>
<div style='clear:both'>
5. Kemudian yang terakhir saatnya membuat bagian
footer atau kaki pada template. Biasanya diisi dengan credit link atau yang
lainya dengan membuat paragraf.
<!-- bagian footer-->
<div class='footer'>
<p>Copyright ©2015 - Design
template : by Faiz Ihsan - Web Created : www.microcyber2.blogspot.com</p>
</div>
</body>
</HTML>
6. Setelah selesai, kemudian save
notepad tadi dengan ekstensi dot html dan pada bagian type pilih all files!
Lalu coba buka hasilnya.
*harusnya hasil Outpunya seperti
berikut:
