Welcome to my blog

Sabtu, 02 Maret 2013

Belajar HTML - Tampilan (Layout)

 Belajar HTML - Tampilan (Layout)

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
<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 tampak seperti 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, semoga bermanfaat ya buat kalian semua :D
jangan lupa comment ya

0 komentar:

Posting Komentar

Diberdayakan oleh Blogger.