Konversi desain ke HTML awal
Seperti biasanya kita buat folder dulu di dalam htdocs , ya
di sini saya akan membuat folder “Indonesia”
Dan jangan lupa di dalam tersebut tambahkan folder “gambar”
Buka notepad++
Kita
mulai dari pembuatan sebuah div untuk menampung seluruh konten situs yang
akan dibuat yaitu Wrapper
akan dibuat yaitu Wrapper
Setelah
itu kita lanjutkan membuat header
Seperti
di bawah ini
Kita
lanjutkan dengan proses markup Content/isi Situs.
Seperti
di bawah ini
Kita
lanjutkan dengan pembuatan sidebar,
Seperti
di bawah ini
Dan
terakhir kita buat bagian footer
Bila
kurang jelas berikut adalah script dari keseluruhan :
<html>
<head>
<title>INDONESIA</title>
</head>
<body>
<div
id="wrapper">
<div
id="header">
<img
src="Gambar/ss.jpg" width="200" height="80"
alt="logo"/>
<ul
id="Menu-utama">
<li><a
href="">Beranda</a></li>
<li><a
href=""> Provinsi
Indonesia</a></li>
<li><a
href="">Budaya Indonesia</a></li>
</ul>
<form>
<input
type="text" name="search"/>
</form>
</div><!--
Penutup div "header" -->
<div
id="daftar-artikel">
<div
class="artikel">
<img
src="Gambar/indah.jpg" width="300" height="150"
alt="Gambar
Artikel"/>
<h1>
Indonesia Itu Indah</h1>
<b>Nov
13,2015</b> <b>Views : 11,030,016</b>
<p>Indonesia
itu Indah Men , makanya sering sering keluar rumah dan rasakan sensasi angin
segarnya </br>, banyak gunung , pantai , pulau pulau , dan air terjun
yang sangat luar biasa , yang ALLAH ciptakan , </br>dan semua yang ALLAH
ciptakan harus di jamah , jangan di biarkan aja !!</p>
<a
href="">Baca Selanjutnya</a>
</div><!--
Penutup div "artikel"-->
<div
class="artikel">
<img
src="Gambar/Aku Cinta Indonesia.png" width="300" height="150"
alt="Gambar
Artikel"/>
<h1>Saya
Cinta Indonesia</h1>
<b>Nov
13,2015</b> <b>Views : 11,030,016</b>
<p>Indonesia
itu Indah Men , saya sangat cinta indonesia dengan budaya melimpah , kekayaan
</br>alam serta tempat wisata nya</p>
<a
href="">Baca Selanjutnya</a>
</div><!--
Penutup div "artikel"-->
<div
class="artikel">
<img
src="Gambar/Indonesia.png" width="300"
height="150"
alt="Gambar
Artikel"/>
<h1>Kepulauan
Indonesia</h1>
<b>Nov
13,2015</b> <b>Views : 11,030,016</b>
<p>Indonesia
itu Indah Men , banyak pulau indonesia yang menakjubkan , sangat
menakjubkan</p>
<a
href="">Baca Selanjutnya</a>
</div><!--
Penutup div "artikel"-->
</div><!--Penutup
div "daftar-artikel"-->
<div
id="sidebar">
</br>
</br>
<h2>Tentang
INDONESIA !! </h2>
<p>
Kita orang indonesia wajib tau , kalau indonesia itu negara dengan penduduk
muslim terbesar </br>, jadi harus bangga !!</p>
<h2>Artikel
Berdasarkan Provinsi</h2>
<ul>
<li><a
href="">Kalimantan Barat</a></li>
<li><a
href="">Kalimantan Tengah</a></li>
<li><a
href="">Kalimantan Utara</a></li>
<li><a
href="">Kalimantan Selatan</a></li>
</ul>
</div><!--Penutup
div "sidebar"-->
<div
id="footer">
<p>Rioopambudi.blogspot.co.id
Copyright 2015 by Rio Pambudi </p>
</div>
</div><!--Penutup
div "wrapper"-->
</body>
</html>
Jika
anda buka file HTML tersebut, maka yang akan anda lihat adalah seperti berikut
:
Sign up here with your email
ConversionConversion EmoticonEmoticon