Buatlah folder “images” didalam folder yang baru dibuat.
Buka Notepad++, dan ketikkan skrip berikut untuk bagian header :
Masukkan skrip berikut ke dalam wrapping untuk bagian content/isi:
Masukkan skrip berikut untuk bagian sidebar:
Masukkan skrip berikut untuk footer:
Jika anda masih bingung, berikut adalah penulisan seluruh skrip yang telah saya buat sesuai dengan keinginan saya:
<html>
<head>
<title>Latihan Markup</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/logo andy.PNG" alt="Logo"/>
<ul id="menu-utama">
<li><a href="">Home</a></li>
<li><a href="">Klasemen</a></li>
<li><a href="">Tugas</a></li>
</ul>
<form>
<input type="text" name="search" />
</form>
</div>
</div>
<div id="daftar-artikel">
<img src="images/Logo Typography.JPG" width="20%" alt= "Gambar Artikel" />
<h1> Typography</h1>
<b>Nov 13, 2015</b><b>Views : 10,000,000</b>
<p>Tipografi bisa juga dapat dikatakan sebagai “visual language” atau dapat berarti “Bahasa yang dapat dilihat”.
Tipografi dibagi kedalam 2 macam jenis, yaitu :
"Typography" (Tipografi) merupakan suatu ilmu dalam memilih dan menata huruf dengan</br>
pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan tertentu, sehingga dapat menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin.
<a href="">Selengkapnya</a>
</div>
<div class="artikel">
<img src="images/Typography.PNG"width="20%" alt="Gambar Artikel" />
<h1>Gambar Hasil Typography</h1>
<b>Nov 13, 2015</b><b>Views : 10,000,000</b>
<p>Gambar ini dibuat menggunakan aplikasi Photoshop</br>
dengan cara mendesain semenarik mungkin.</p>
<a href="">Selengkapnya</a>
</div>
<div id="sidebar">
<h2>Who i am?</h2>
<img src="images/1.JPG" alt="ME:)"/>
<p>Andy.net adalah siswa SMK Al-Madani</br>
Mempunyai hobi mendengarkan musik dan main game.</br>
Selalu ingi tau akan sesuatu yang baru dan tidak akan berhenti mengejar sesuatu yang dia inginkan</p>
<h2>Artikel berdasarkan kategori</h2>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Klasemen</a></li>
<li><a href="">Tugas</a></li>
<li><a href="">Inspirasi</a></li>
<li><a href="">Berita</a></li>
<li><a href="">Off Topic</a></li>
</ul>
</div>
<div id="footer">
<p>Andy.net copyright 2015 by Andy, Andy</p>
</div>
</div>
</body>
</html>
0 komentar: