Membuat Layout Website Dengan Tabel

download

of 10

  • date post

    24-Oct-2015
  • Category

    Documents
  • view

    16
  • download

    5

Embed Size (px)

description

Cara mudah membuat layout website dengan tabel html

transcript

<ul><li><p>Membuat </p><p>Layout </p><p>Website </p><p>Dengan Tabel </p><p>Rizky Bintang Utama </p></li><li><p> 1 </p><p>ssalamualaium b </p><p>Kali ini saya akan memberikan tutorial tentang cara membuat layout website dengan tabel. </p><p>Pertama, anda sebelumya harus paham dengan struktur tag HTML dan CSS agar dapat memahami </p><p>dengan baik tutorial yang saya berikan ini. </p></li><li><p> 2 </p><p>Membuat onse </p><p>Hal penting pertama yang harus anda pikirkan adalah membuat konsep dari layout yang akan anda </p><p>buat. Contohnya saya akan membuat konsep layout seperti ini: </p><p>Yap, kira kira seperti itulah bayangan layout yang akan saya buat dalam tutorial ini. </p><p>Meealisasian onse ang ua </p><p>Di uat </p><p>Saat anda sudah membuat konsep, maka anda harus merealisasikannya. Yang harus anda buat </p><p>selanjutnya adalah file index.html </p><p>Tulis dalam text editor anda: </p><p>Document </p></li><li><p> 3 </p><p> Ini Header </p><p> Ini Isi </p><p> Ini Sidebar </p><p> Ini Footer </p><p>Maka tampilannya akan seperti ini: </p><p>Untuk saat ini tampilan masih tidak beraturan. </p><p>Sekarang saya beri penjelasannya ... </p><p>Ini adalah tag awal menyatakan bahwa dokumen ini berisi script HTML. </p><p>Document </p></li><li><p> 4 </p><p>Ini adalah wilayah header yg berisi content type dan title. </p><p>Lalu link rel stylesheet menyatakan bahwa akan meload stylesheet, href adalah lokasi stylesheet, </p><p>dan type adalah tipe stylesheet. </p><p> Ini Header </p><p> Ini Isi </p><p> Ini Sidebar </p><p> Ini Footer </p><p>Body : script didalamnya lah yang akan tampil dalam web browser. </p><p>Table : menyatakan bahwa kita akan membuat tabel. </p><p>Width : menyatakan ukuran objek yang akan dibuat. </p><p>Border : menyatakan besarnya garis yg mengelilingi objek. </p><p>Align : menyatakan posisi objek yang akan dibuat. </p><p>Cellpadding &amp; Cellspacing : menyatakan jarak spasi antar baris dan kolom. </p><p>Tr : menyatakan baris didalam tabel. </p><p>Td : menyatakan kolom didalam tabel. </p><p>Colspan : menyatakan jumlah kolom yang di satukan dalam baris tersebut. </p></li><li><p> 5 </p><p>Valign : meyatakan posisi vertikal isi dari kolom tersebut. </p><p>Membuat tyle ntu Layout </p><p>Website </p><p>Nah sekaranglah saat nya membuat style atau desain dari layout yang ingin kita buat. </p><p>Buka text editor anda dan tulis script berikut: </p><p>body { </p><p> background:#CCCCCC; </p><p> margin:0 auto; </p><p> font-family:Verdana, Arial, Helvetica, sans-serif; </p><p> font-size:12px; </p><p>} </p><p>a { </p><p> color:#0066FF; </p><p> text-decoration:none; </p><p>} </p><p>a:hover { </p><p> color:#0099FF; </p><p> border-bottom:1px dotted #0099FF; </p><p>} </p><p>.header { </p><p> background:#0099FF; </p><p> border-bottom:2px solid #333333; </p><p> height:90px; </p><p> padding-left:20px; </p><p> padding-top:20px; </p><p>} </p><p>.header a { </p><p> color:#FFFFFF; </p><p> text-decoration:none; </p><p> font-size:26px; </p><p> font-weight:bold; </p><p>} </p><p>.header a:hover { </p><p> border-bottom:2px dotted #FFFFFF; </p><p>} </p><p>.content { </p><p> padding:5px; </p><p> background:#FFFFFF; </p><p>} </p></li><li><p> 6 </p><p>#content-title { </p><p> font-size:14px; </p><p> font-weight:bold; </p><p>} </p><p>#content-post { </p><p> padding-bottom:10px; </p><p> text-align:justify; </p><p>} </p><p>.sidebar { </p><p> padding:5px; </p><p> background:#ECECEC; </p><p>} </p><p>#sidebar-title { </p><p> font-size:13px; </p><p> font-weight:bold; </p><p>} </p><p>#sidebar-post { </p><p> padding-bottom:10px; </p><p>} </p><p>.footer { </p><p> background:#333333; </p><p> padding:5px; </p><p> font-size:11px; </p><p> color:#FFFFFF; </p><p>} </p><p>Penjelasannya .. </p><p>Kan udah belajar CSS, jadi ga perlu detail :D </p><p>. adalah untuk class </p><p># untuk id </p><p>:hover untuk menyatakan style saat objek disorot dengan kursor </p></li><li><p> 7 </p><p>!inising </p><p>Setelah membuat style nya, maka anda tinggal memasukkan class dan id pada file indx.html sesuai </p><p>dengan posisinya seperti ini: </p><p>Document </p><p> Header </p><p> Lorem ipsum </p><p> Lorem ipsum no has veniam elaboraret </p><p>constituam, ne nibh posidonium vel. Has ad quaeque omittantur, malis abhorreant eam no, </p><p>qui cu minim placerat definitionem. Et sonet ludus apeirian mei, ut tibique corpora </p><p>posidonium vis, iusto nominavi prodesset in pro. Ad mea omnes aliquando, </p><p>idque democritum incorrupte at sed, nostrud feugiat consetetur duo in. Aeque reformidans </p><p>ex quo, facilisis appellantur ea mei. Illud scaevola pertinacia mel ad, est ex tractatos </p><p>aliquando, cibo eloquentiam ea per. </p><p>Cibo quas assum mel an, mel partiendo adipiscing quaerendum ne, dictas iisque ad usu. </p><p>Invenire delicata sit at, ad est mollis civibus corrumpit. Ne has delenit eligendi splendide, </p><p>harum numquam epicuri quo ea, sed verear aliquando consequuntur eu. Ad mea mucius </p><p>expetenda liberavisse, mei ea assentior dissentiunt, delectus antiopam disputando vel ad. </p><p>Ad pro erat quaeque suscipiantur, vis alia pertinacia at, ei duo zzril tibique necessitatibus. </p><p>Tritani reprehendunt et vel, et habeo viderer eruditi eos, ornatus pertinax periculis mel </p><p>ea. </p><p>[Readmore ..] </p><p> Ei brute deserunt </p><p> Ei brute deserunt delicata nam, mundi </p><p>moderatius ex quo. Id per modo molestie lobortis, perfecto corrumpit omittantur nec an. </p><p>Albucius intellegam scripserit et cum, no mei porro tantas menandri. Nam detraxit </p><p>disputando efficiantur cu, nisl petentium repudiandae eum ut. Pri reque scripta admodum </p><p>te, rebum legere inimicus et has, ne qui amet meis commodo. </p></li><li><p> 8 </p><p>Sint illud inani cum an, et primis nostrum adipiscing usu, ut alienum insolens omittantur eos. </p><p>Ad dolore torquatos moderatius vim, modo vero definitiones te his. Mea ei solet decore </p><p>quaestio, nam an dolores concludaturque. Has illud mazim deserunt in, qui ad mazim </p><p>democritum moderatius. Has essent sensibus id, dicant recusabo reprehendunt te pro, meis </p><p>facilis maiorum id pri. Et nec mutat erroribus, ad fugit aliquando incorrupte has. </p><p>[Readmore ..] </p><p> Search </p><p> Login </p><p> Username </p><p> Password </p><p> Links </p><p> Google </p><p> Kaskus </p><p> Indowebster </p></li><li><p> 9 </p><p> Copyright 2011 | All right reservedDesign by Rizky </p><p>Bintang Utama </p><p>Ket: </p><p>Merah adalah class. </p><p>Biru adalah id. </p><p>Dan Hijau adalah isinya. </p><p>Maka tampilan akhirnya akan seperti ini : </p></li></ul>