Tugas 8

Pertama, buat folder “latihan_markup” di dalam htdocs.






Buat 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 kustomisasi sesuai dengan keinginan saya
 
<HTML>
<head>
      <title>Latihan Markup</title>
    </head>
    
    <body>
      <div id="wrapper">
<div id="header">    
     <img src="images/logo_izzul.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">
  <div class="artikel">
    <img src="images/arsenal.jpg" width="400" height="250" alt= "Gambar Artikel" />
    <h1> Apa itu Arsenal</h1>
    <b>Nov 11, 2015</b><b>Views : 4,000,000</b>
    <p>Arsenal Football Club (dikenal pula sebagai Arsenal atau The Gunners) adalah klub sepak bola profesional Inggris yang berbasis di daerah London Utara, London. didirikan pada 1886 dengan nama Dial Square.</p>
    <a href="">Selengkapnya</a>
  </div>
  <div class="artikel">
    <img src="images/ozil.jpg" width="400" height="250" alt= "Gambar Artikel" />
    <h1> Mesut Ozil</h1>
    <b>Nov 11, 2015</b><b>Views : 4,000,000</b>
    <p>Mesut Özil adalah seorang pesepak bola Jerman yang bermain untuk klub Liga Premier Inggris, Arsenal dan Tim nasional Jerman.</p>
    <a href="">Selengkapnya</a>
  </div>
  <div class="artikel">
    <img src="images/giroud.jpg" width="400" height="250" alt= "Gambar Artikel" />
    <h1> Olivier Giroud</h1>
    <b>Nov 11, 2015</b><b>Views : 4,000,000</b>
    <p>Olivier Giroud (lahir di Chambéry, 30 September 1986; umur 29 tahun) adalah seorang pemain sepak bola berkewarganegaraan Perancis yang bermain untuk klub Arsenal pada posisi penyerang. Dia bermain dikenal karena ukuran fisik dan kemampuan headingnya.</p>
    <a href="">Selengkapnya</a>
  </div>
  <div id="sidebar">
  <h2>Who we are?</h2>
  <p>Izzul.net adalah tempat anda berbagi pengetahuan seputar web design dan web
  development serta segala informasi yang berhubungan dengan internet</p>

  <h2>Artikel berdasarkan kategori</h2>
  <ul>
    <li><a href="">Arsenal</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>Izzul.net copyright 2015 by Izzul, Izzul</p>
</div> 
</div>
   </body>
</HTML>

Berikut adalah tampilannya





Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 (3 Wadah)

Gambar
Ini adalah riddle kedua dari guru produktif saya. Begini Pertanyaannya, ada 3 buah wadah yang diketahui bervolume 8 liter, 5 liter, dan 3 liter. Pada keadaan awal hanya wadah 8 L yang penuh berisi air. Pertanyaannya : Bagaimana caranya memindahkan air dari wadah 8 L sehingga wadah 5 L berisi air sebanyak 4 L dengan saling menuang air pada wadah-wadah tersebut? Untuk penyelesaiannya, mungkin jawaban saya yang paling aneh. Tapi mau aneh atau tidak, ini hasil logika saya sendiri. Jadi saya menggunakan 3 langkah, kebanyakan orang menggunakan 6 maupun 8 cara yang merupakan jawaban yang cukup rasional dibandingkan dengan jawaban saya. But who cares about rational? Masukkan wadah bervolume 3 liter ke dalam wadah yang bervolume 5 liter. Tuang air yang ada pada wadah bervolume 8 liter ke dalam wadah yang bervolume 5 liter. Angkat wadah yang bervolume 3 liter. Maka wadah bervolume 3 liter berisi 3 liter air, wadah yang bervolume 5 liter berisi 2 liter air, dan wadah yang bervolume...
Baca selengkapnya

Tugas 3 (Klausa)

Gambar
Tugas 3 (Klausa) Untuk menggunakan perintah-perintah berikut maka anda harus memiliki sebuah tabel yang memiliki baris-baris yang telah diisi. Sebagai contoh, saya telah memiliki tabel “aneka_jus”. 1.        Count Count adalah perintah yang memiliki fungsi untuk menghitung berapa banyak field yang berada di dalam sebuah kolom, dimana field-field tersebut memiliki nilai yang sama. Berikut adalah perintahnya: “ select count(rating) from aneka_jus where rating=’50’ ” Dimana : “count(rating)”   ‘rating’ yang dimaksud adalah nama kolom yang akan dihitung field yang memiliki nilai yang sama. Sedangkan ‘50’ adalah nilai yang akan dihitung berapa banyak jumlahnya. ‘2’ adalah jumlah field dari kolom ‘rating’, karena field yang memiliki nilai 50 hanya ada 2 field. 2.        Order by Order by adalah perintah yang memiliki fungsi untuk mengurutkan urutan field berdasarkan kolom tertentu. Perintah ord...
Baca selengkapnya

Tugas 7 (Website HTML)

Gambar
Buat folder di dalam xampp pada folder htdocs dengan nama "web_izzul". Buka notepad++, ketikkan skrip berikut : <html> <head> <title>Beranda</title> </head> <body> <h1><center>Selamat Datang di web saya</center></h><br> <br> <a href="index.html"><center>Beranda<center></a><br> <a href="profil.html"><center>Profil<center></a><br> <a href="artikel.html"><center>Artikel<center></a><br> <br> </body> </html> Simpan pada folder "web_izzul" dengan nama "index.html" Untuk halaman profil, buat folder didalam folder "web_izzul" dengan nama "gambar" terlebih dahulu Isi folder tersebut dengan gambar yang diinginkan, dan sesuaikan nama file gambar dengan skrip nantinya Ketikkan skrip berikut pada notepad++ : <html> ...
Baca selengkapnya