Belajar HTML - Tampilan (Layout)

00.18
Dalam proses belajar HTML, proese membuat tampilan pada sebuah halaman (layout) web/blog adalah sangat penting hukumnya bagi anda yang sedang belajar dalam pembuatan sebuah web/blog.

berikut adalah contoh tampilan (layout) HTML sederhana dengan kolaborasi style (CSS)
"Tenang saja kita akan belajar css pada bab-bab selanjutnya"


Tampilan ( Layout) dengan kolaborasi Tabel
pada contoh ini kita akan menggunakan kolaborasi tabel pada tampilan layout, perhatikan contoh :



contoh ini di ambil dari w3school.

contoh

<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2011 W3Schools.com</td>
</tr>
</table>

</body>
</html>

Cobalah Sendiri »

Maka akan tampak seperti di bawah ini :

Main Title of Web Page

Menu
HTML
CSS
JavaScript		Content goes here
Copyright © 2011 W3Schools.com



 Tampilan (Layout) dengan kolaborasi element DIV
Elemen div merupakan tingkat blok elemen yang digunakan untuk mengelompokkan elemen HTML.

Contoh berikut menggunakan lima elemen div untuk membuat tata letak kolom, dan menciptakan hasil yang sama seperti pada contoh di atas sebelumnya :


contoh

<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2011 W3Schools.com</div>

</div>

</body>
</html>

Cobalah Sendiri »

Maka akan tamoak seperti di bawah ini :

Main Title of Web Page

Menu
HTML
CSS
JavaScript
Content goes here
Copyright © 2011 W3Schools.com

Tips - HTML Layout

  •  Dalam proses membuat sebuah tampilan web/blog sederhana yang di perlukan adalah sebuah tag-tag HTML dan CSS dimana tag-tag CSS tersebut di gunakan untuk membuat tampilan HTML menjadi lebih dinamis ( lebih bagus). namun nanti (setelah anda menguasai HTML dan CSS ) anda akan dapat mengkolaborasikannya sendiri sesuai dengan kreasi anda seperti dengan javascript, PHP ,ASP dan lain sebagainya .


  • Saya sarankan setelah anda menguasai ataupun sudah familiar dengan tag-tag HTML anda sebaiknya belajar CSS terlebih dahulu. dan kemudian baru belajar javascript dan seterusnya .


  • insyaallah nanti saya akan membuat tutorial belajar CSS juga .


oke, kita akan lanjut ke tutorial belajar HTML lanjutan untuk pemula selanjutnya ...



<< HTML Warna : Sebelumnya                                                Selanjutnya :  DOCTYPE >>


Post a Comment

5 komentar:

  1. kacamata rayban13 Januari 2012 pukul 16.17

    bro ..mantep nie tutorialnya...
    bdw,, ada referensi gag dmna tempat bljar bikin website dengan harga yang murah ???

    BalasHapus
  2. Aldi14 Januari 2012 pukul 04.24

    bikin website kalo buat belajar aja yang gratis juga bisa bro .. pake hosting 00webhost yang gratisan aja .. terus nama domain co.cc dah ..

    kalo engga bikin local host aja dulu ..pertama download xampp dulu ..

    BalasHapus
  3. ahmad22 Mei 2012 pukul 01.46

    copas brow ya...?????

    BalasHapus
  4. Unknown30 Oktober 2012 pukul 06.01

    thank you gan

    BalasHapus
  5. ricko12 Maret 2013 pukul 21.46

    thanks

    BalasHapus

Langganan: Posting Komentar ( Atom )
Diberdayakan oleh Blogger.