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 >>




Posting Lama Posting Lebih Baru

Comments :

ada 5 komentar ke “Belajar HTML - Tampilan (Layout)”
kacamata rayban mengatakan...
pada  

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

Bhogell Rhobett Bhonze mengatakan...
pada  

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 ..

ahmad mengatakan...
pada  

copas brow ya...?????

Faissal mengatakan...
pada  

thank you gan

ricko mengatakan...
pada  

thanks

Poskan Komentar


Copyright © 2014 - Aldi Ferdiyan - My Facebook - Powered By Pasa Iklan / Pasang Iklan Gratis


"Belajar HTML - Tampilan (Layout)"

Sewa Laptop Infonindo.com - Penyewaan Laptop - Sewa Laptop di jakarta - Warta kesehatan - Warta Sehat - Profil - Seks - alkes lab - Obat Penyakit Ibu Anak