Rabu, 21 Agustus 2013

Dasar-Dasar HTML - Membuat Kotak Download Ziddu



Dasar-Dasar HTML - Membuat Kotak Download Ziddu, salam jumpa lagi teman-teman yang kali ini berkunjung lagi atau bagi yang baru pertama kali berkunjung ke blog saya. Disini saya akan mencoba berbagi sedikit mengenai HTML. tentu anda semua pasti sudah mengenal dengan bahasa pemrograman desain web yang satu ini, karena ini paling sering digunakan dan diterapkan para desainer web saat ini. Walaupun bisa terbilang ketinggalan dalam update karena sudah banyak yang duluan tapi saya tak peduli karena apapun yang saya tulis diblog ini adalah untuk saya pribadi secara khusus dan untuk orang banyak secara umum. Walaupun sudah banyak yang nulis mengenai Dasar-Dasar HTML tentu setiap tulisan yang ditulis oleh admin dari setiap website berbeda-beda kecuali copas dan tentu juga  cara penjelasan dan penyampaiannya pun berbeda-beda dan pasti mempengaruhi pemahaman para pembaca itu sendiri. Saya sendiri pun belum menguasai secara penuh dengan bahasa HTML ini akan tetapi saya coba terus belajar untuk mencapai hasil maksimal. Juga dalam artikel mengenai Dasar-Dasar HTML ini pun saya yakin masih banyak kekurangan karena keterbatasan pengetahuan saya mengenai HTML ini.

Dan kali ini saya akan mencoba berbagi dengan teman-teman semua dan khususnya bagi teman-teman yang sudah ada sedikit pengetahuan mengenai HTML ini. Artikel kali ini kita coba membuat kotak download yang berada pada ziddu dan tenttu teman-teman semua pasti sudah tidak asing lagi dengan kotak download milik ziddu seperti gambar dibawah ini :



Seperti gambar diataslah kotak download yang dimiliki oleh ziddu dan kemudian yang akan kita buat sebagai file latihan praktikum kita adalah kurang lebih gambarnya seperti gambar berikut ini :


Yaaahhhh mungkin bisa dibilang desainnya tidak sampai 90% mirip tapi yaa lumayan laah untuk seorang pemula seperti saya ini :)

Bagi teman-teman silahkan buat yang lebih baik lagi dari yang saya buat dan ingaatt !! dalam pembuatan desain ini saya sarankan hanya menggunakan notapad saja dan dilarang menggunakan softwere yang sifatnya WYSIWYG seperti dreamweaver ataupun yang lainnya karena softwere WYSIWYG tidak akan mengembangkan kemampuan kita.

Untuk membantu teman-teman yang mungkin masih belum mengeti berikut saya sertakan kodenya dan silahkan anda utak-atik sesuai keinginan anda dan tentunya harus lebih baik dari yang saya hasilkan pada gambar diatas.
NB : Hanya HTML dan tidak ada CSS !!!

<html>
<head>
    <title>Latihan 2</title>
<body>
    <table width=50% border=0 bordercolor=#24ACC4 cellspacing=0 cellpadding=5>
       
        <tr>
            <td width=2% bgcolor=#24ACC4></td>
            <td bgcolor=#24ACC4 width=20% colspan="4"><font color="white"><center><b>Thank You For Downloading</b></font></td>
            <td width=2% bgcolor=#24ACC4></td>
        </tr>
               
        <tr>
            <td width=2% bgcolor=#24ACC4></td>
            <td colspan="4"><center><font color=#24ACC4><b>File Size : </font><font face=times new roman color="black">15 MB</font></td>
            <td width=2% bgcolor=#24ACC4></td>
        </tr>
       
        <tr>
            <td width=2% bgcolor=#24ACC4></td>
            <td width=100% colspan=4><center><font color=#24ACC4><b>Verification Code : </font>
            <input type="text" name=varCode size=9>
            <b><font face=times size=5 new roman color="blue">xKy4K</font></td>
            <td width=2% bgcolor=#24ACC4></td>
        </tr>
       
        <tr>
            <td width=2% bgcolor=#24ACC4></td>
            <td colspan="4"><center><input type="submit" value="download"></td>
            <td width=2% bgcolor=#24ACC4></td>
        </tr>
       
        <tr>
            <td width=2% bgcolor=#24ACC4></td>
            <td colspan="4"><font color=#24ACC4>By downloading the file you agree to the terms and conditions of ziddu</font><br>
            <input type="checkbox" name="downloader" value="download">Download with Ziddu accelerator and get recomended offers</td>
            <td width=2% bgcolor=#24ACC4></td>
        </tr>
       
    </table>
   
    <table border=8 bordercolor=#24ACC4 cellpadding=10 width=50%>
        <tr>
            <td><center><a href=http://neptura.blogspot.com target="_blank"><img src="fb.jpg" width="50" hight="50"></a></td>
            <td><center><a href=http://neptura.blogspot.com target="_blank"><img src="twit.jpg" width="50" hight="50"></a></td>
            <td><center><a href=http://neptura.blogspot.com target="_blank"><img src="mail.jpg" width="50" hight="50"></a></td>
            <td><center><a href=http://neptura.blogspot.com target="_blank"><img src="link.jpg" width="50" hight="50"></a></td>
        </tr>
    </table>
</body>
</html>



Demikian dari saya sedikit pengetahun tambahan mengenai Dasar-dasar HTML yang bisa kita pelajari sama-sama. Terima kasih atas kunjungan anda dan jangan lupa tinggalkan komentar anda dan sampai jumpa lagi ....

Tidak ada komentar:

Posting Komentar

W A R N I N G !!!
=Pembaca yang Baik selalu Meninggalkan Komentar=

~ Berkomentarlah secara baik dan sopan maka admin akan merespon
~ JANGAN ANONIM
~ Komentar Sesuai dengan Topik Pembicaraan
~ Tidak Menyertakan Link Aktif
~ Dilarang Promosi dalam Bentuk Apapun !

Related Posts Plugin for WordPress, Blogger...