Membuat Tampilan Web Sederhana Dengan HTML5 dan CSS

  • ..


Setelah sebelumnya kita membuat kerangka web dengan menggunakan HTML5, sekarang saya mencoba membuat desain halaman web sederhana dengan menggunakan HTML5 yang dipadukan dengan CSS.
Untuk tampilannya, bisa dilihat dibawah ini:

 


Desain diatas dapat dibuat dengan menggunakan kode HTML dibawah ini:
Next section >>

Membuat Kerangka Web dengan menggunakan HTML5

  • ..


Kali ini, saya mencoba membuat kerangka sebuah web dengan menggunakan HTML5. HTML5 sendiri masih tergolong sangat jarang digunakan. Selain itu, HTML5 juga menuntut kompatibilitas sebuah browser, tidak semua broses dapat mendukung penggunaan HTML5.
Berikut ini adalah contoh tampilan kerangka web menggunakan HTML5 :


Next section >>

Membuat Tampilan Seperti Facebook Menggunakan CSS

  • ..


Pada kesempatan kali ini, saya akan mencoba membuat tampilan halaman web seperti Facebook. Disini saya akan memanfaatkan penggunaan CSS. Akan tetapi, saat ini saya hanya akan membuat kerangkanya saja, untuk membuat isinya, prinsipnya sama dengan membuat kerangkanya.
Untuk tampilannya, silakan lihat dibawah :

 

Untuk tampilan di atas, kode htmlnya adalah seperti berikut: 
Next section >>

Membuat Halaman Web dengan Menggunakan Elemen Table dan Hyperlink

  • ..


Dengan memanfaatkan elemen tabel dan hyperlink, kita bisa membuat web yang menyuguhkan tampilan indexing.
Untuk itu, kita perlu membuat halaman-halaman yang ingin dikaitkan. Pada contoh kali ini, saya membuat 3 halaman yang akan saya kaitkan.
Agar lebih jelasnya, langsung saja kita lihat kode HTML-nya dibawah ini.

<!DOCTYPE HTML>
<HTML lang="en">
 <head>
  <title>Download Dataku</title>
  <LINK REL="SHORTCUT ICON" HREF="/Prak.BPW/images/ICON%20AJAH/Microsoft%20Xbox.ico"/>
 </head>
 <body>
 <table border=0 cellspacing=0 cellpadding=5>
 <caption align="center">Download Dataku<br /><br /></caption>
  <tr align="center">
   <td bgcolor="#4aab5d" rowspan=8 width=10></td>
   <td width=1></td>
   <td bgcolor="#00c72f" width=250><a href="/Prak.BPW/Mod2-StudiFilm.html">Film</a></td>
   <td width=1></td>
   <td bgcolor="#4aab5d" width=250><a href="/Prak.BPW/Mod2-StudiDokumen.html">Dokumen</a></td>
   <td width=1></td>
   <td bgcolor="#4aab5d" width=250><a href="/Prak.BPW/Mod2-StudiMusic.html">Musik</a></td>
   <td width=1></td>
   <td bgcolor="#4aab5d" rowspan=8 width=10></td>
  </tr>
  <tr>
   <td bgcolor="#00c72f" rowspan=7 width=1></td>
   <td bgcolor="#00c72f" colspan=5></td>
   <td bgcolor="#00c72f" rowspan=7 width=2></td>
  </tr>
    <!--LINK URL DIBAWAH INI BERSIFAT STATIS, GANTI DENGAN LINK ANDA-->
  <tr>
   <td bgcolor="#00c72f" colspan=5><a href="/Prak.BPW/Mod2-StudiFilm.html">1. Devil's Playground</a></td>
  </tr>
  <tr>
   <td bgcolor="#00c72f" colspan=5><a href="/Prak.BPW/Mod2-StudiFilm.html">2. Blackjack</a></td>
  </tr>
  <tr>
   <td bgcolor="#00c72f" colspan=5><a href="/Prak.BPW/Mod2-StudiFilm.html">3. Harry Potter 1-7</a></td>
  </tr>
  <tr>
   <td bgcolor="#00c72f" colspan=5><a href="/Prak.BPW/Mod2-StudiFilm.html">4. The Lord of The Ring 1-3</a></td>
  </tr>
  <tr>
   <td bgcolor="#00c72f" colspan=5><a href="/Prak.BPW/Mod2-StudiFilm.html">5. Wanted</a></td>
  </tr>
  <tr>
   <td bgcolor="#00c72f" colspan=5></td>
  </tr>
  <tr>
   <td bgcolor="#4aab5d" colspan=9 align="center"><i>&copy; haqiphoenix</i></td>
  </tr>
 </table>
 </body>
</html>


Next section >>

Menggunakan Fitur Pengelompokan Tabel dalam HTML

  • ..


Setelah pada kesempatan sebelumnya kita mengetahui bagaimana membentuk sebuah grafik batang dengan menggunakan tabel, pada kesempatan ini, kita akan menggunakan fitur pengelompokan yang ada pada tabel. Sebenarnya hasil tampilan dari fitur ini dapat disamakan dengan hasil ketika kita menggunakan fitur merge. Akan tetapi, disini tabel yang ada tidak akan digabung, hanya "dihilangkan" garis pembatasnya.

Tampilan dari kode HTML diatas adalah sebagai berikut:


 Untuk kode HTML-nya, bisa langsung dilihat dibawah ini :
Next section >>

Membuat Grafik dengan Menggunakan Tabel

  • ..


Pada kesempatan kali ini, saya akan mencoba berbagi tentang cara pembuatan grafik dengan memanfaatkan elemen tabel pada kode html. Sebuah grafik batang dapat dibentuk dari kolom-kolom dan baris-baris yang disatukan(di-merge).

Tampilan dari kode HTML adalah sebagai berikut:


Untuk lebih jelasnya, silahkan lihat kode-HTML-nya dibawah ini.
Next section >>

Balon Udara

  • ..


Balon udara panas adalah teknologi penerbangan pertama oleh manusia, ditemukan oleh Montgolfier bersaudara di Annonay, Perancis pada 1783. Penerbangan pertama dengan manusia diadakan pada 21 November 1783, di Paris oleh Pilâtre de Rozier dan Marquis d'Arlandes. Balon udara panas dapat dikendalikan dan bukan hanya dibawa angin yang dikenal dengan airship atau thermal airship. Sebelum pesawat terbang dicip-takan oleh Wrigth bersaudara, angan-angan manusia untuk terbang menjelajahi langit telah diwujudkan oleh Mongolfier bersaudara lewat balon udara yang mereka temukan.
 

Next section >>