Tutorial Merancang Template Website Sederhana Bag. 2

Oke sekarang kita lengkapi kode htmlnya ya! Mudah2an yang mencoba langsung pusing!
Pertama
Buka index.html yang kita buat di sesi sebelumnya. Edit menjadi seperti di bawah ini :
Kalau yang ingin ke bagian pertama klik link ini.

<html>
<head>
<title>JockerDT</title>
<meta name="author" content="Jocker" />
<link rel="stylesheet" href="gaya.css" type="text/css" />
</head>
<body>

<div id="container">
<div id="banner">
<div id="judulbanner"> JockerDT.blogspot.com
</div>
</div>
<div id="kiri">
<div id="menu">
<ul>
<li><a href="jockerdt.blogspot.com" >Home</a></li>
<li><a href="#" >Photoshop</a></li>
<li><a href="#" >Web Design</a></li>
<li><a href="#" >Article</a></li>
<li><a href="#" >About Us</a></li>
</ul>
</div>
</div>
<!-- akhir dari id kiri -->

<div id="konten">
<h2>Salam Hangat</h2>

</div>
<!-- akhir dari konten -->
</div>

<!-- akhir dari container-->
</body>
</html>

 Simpan ya. Lalu coba lihat hasilnya. kalo di ane begini gan.


Sekarang lanjut lagi ya. Edit lagi file html-nya. Tambahkan ini tepat setelah <h2>Salam Hangat</h2>.
Kalau mau diedit juga boleh.

<p>
Halo! Selamat datang di jockerDT.blogspot.com. Terima kasih sudah berkunjung di blog ini. Semoga isi dari blog ini dapat anda nikmati.  Halo! Selamat datang di jockerDT.blogspot.com. Terima kasih sudah berkunjung di blog ini. Semoga isi dari blog ini dapat anda nikmati. Halo! Selamat datang di jockerDT.blogspot.com. Terima kasih sudah berkunjung di blog ini. Semoga isi dari blog ini dapat anda nikmati. Halo! Selamat datang di jockerDT.blogspot.com. Terima kasih sudah berkunjung di blog ini. Semoga isi dari blog ini dapat anda nikmati. Halo! Selamat datang di jockerDT.blogspot.com. Terima kasih sudah berkunjung di blog ini. Semoga isi dari blog ini dapat anda nikmati. Halo! Selamat datang di jockerDT.blogspot.com. Terima kasih sudah berkunjung di blog ini. Semoga isi dari blog ini dapat anda nikmati.
</p>
<p>
Ini adalah template yang saya tiru dari template gratisan. Mumpung gratis, ya aya download trus saya pelajari. Ternyata belajar merancang website itu memang membuat pusing. Semoga anda yang mengikuti tutorial ini juga pusing. :D
</p>
<p>
Untuk cari tutorial photoshop, desain website(yang sederhana-sederhana aja :D ), dan berbagai artikel, silahkan mampir di jockerDT.blogspot.com. Di jockerDT.blogspot.com kamu bisa temukan berbagai coretan-coretan saya yang menarik, walaupun sebagian bikin pusing sih! Tapi yang penting hampir semua tulisan di blog saya original. Tapi hampir semua ya. Heheheheh.
</p>
<p>
Bagi yang ingin bertanya silahkan buat komentar di bawah ya. Semoga saya dapat menjawab dan bikin anda semakin pusing. Bagi yang ingin bertanya silahkan buat komentar di bawah ya. Semoga saya dapat menjawab dan bikin anda semakin pusing. Bagi yang ingin bertanya silahkan buat komentar di bawah ya. Semoga saya dapat menjawab dan bikin anda semakin pusing. Bagi yang ingin bertanya silahkan buat komentar di bawah ya. Semoga saya dapat menjawab dan bikin anda semakin pusing. Bagi yang ingin bertanya silahkan buat komentar di bawah ya. Semoga saya dapat menjawab dan bikin anda semakin pusing.
</p>
<p>
Bagi yang pusing, selamat berpusing ria. Bagi yang tidak pusing, selamat tidak berpusing ria. Bagi si Ria, semoga tidak membaca artikel ini biar tidak pusing. Bagi selamat, selamat berpusing ria.
</p>
<p> 
Maaf untuk tulisan in yang rada ngawur. Bila ada kesamaan nama tokoh, tempat dan peristiwa, itu bukan merupakan unsur kesengajaan. Inikan hanya contoh. Enjoy this tutorial.
<br />:D
</p>

Simpan lagi! Buka lagi di browsernya!



Lanjut ! Edit lagi. Tambahin kode ini setelah komentar <!-- akhir dari konten --> .

<div id="kaki">
<h3><a href="http://jockerdt.blogpsot.com" >JockerDT</a></h3>
</div>

Simpan lagi, trus buka lagi deh di browsernya!



Gimana? Pusing?
Lanjut trus!
Kalau mau langsung lanjut ke CSS-nya, klik link ini.

0 komentar:

Posting Komentar

Hai :)




Kategori