Membuat Layout Website Dengan Tabel

download Membuat Layout Website Dengan Tabel

of 10

  • date post

    24-Oct-2015
  • Category

    Documents

  • view

    18
  • download

    5

Embed Size (px)

description

Cara mudah membuat layout website dengan tabel html

Transcript of Membuat Layout Website Dengan Tabel

  • Membuat

    Layout

    Website

    Dengan Tabel

    Rizky Bintang Utama

  • 1

    ssalamualaium b

    Kali ini saya akan memberikan tutorial tentang cara membuat layout website dengan tabel.

    Pertama, anda sebelumya harus paham dengan struktur tag HTML dan CSS agar dapat memahami

    dengan baik tutorial yang saya berikan ini.

  • 2

    Membuat onse

    Hal penting pertama yang harus anda pikirkan adalah membuat konsep dari layout yang akan anda

    buat. Contohnya saya akan membuat konsep layout seperti ini:

    Yap, kira kira seperti itulah bayangan layout yang akan saya buat dalam tutorial ini.

    Meealisasian onse ang ua

    Di uat

    Saat anda sudah membuat konsep, maka anda harus merealisasikannya. Yang harus anda buat

    selanjutnya adalah file index.html

    Tulis dalam text editor anda:

    Document

  • 3

    Ini Header

    Ini Isi

    Ini Sidebar

    Ini Footer

    Maka tampilannya akan seperti ini:

    Untuk saat ini tampilan masih tidak beraturan.

    Sekarang saya beri penjelasannya ...

    Ini adalah tag awal menyatakan bahwa dokumen ini berisi script HTML.

    Document

  • 4

    Ini adalah wilayah header yg berisi content type dan title.

    Lalu link rel stylesheet menyatakan bahwa akan meload stylesheet, href adalah lokasi stylesheet,

    dan type adalah tipe stylesheet.

    Ini Header

    Ini Isi

    Ini Sidebar

    Ini Footer

    Body : script didalamnya lah yang akan tampil dalam web browser.

    Table : menyatakan bahwa kita akan membuat tabel.

    Width : menyatakan ukuran objek yang akan dibuat.

    Border : menyatakan besarnya garis yg mengelilingi objek.

    Align : menyatakan posisi objek yang akan dibuat.

    Cellpadding & Cellspacing : menyatakan jarak spasi antar baris dan kolom.

    Tr : menyatakan baris didalam tabel.

    Td : menyatakan kolom didalam tabel.

    Colspan : menyatakan jumlah kolom yang di satukan dalam baris tersebut.

  • 5

    Valign : meyatakan posisi vertikal isi dari kolom tersebut.

    Membuat tyle ntu Layout

    Website

    Nah sekaranglah saat nya membuat style atau desain dari layout yang ingin kita buat.

    Buka text editor anda dan tulis script berikut:

    body {

    background:#CCCCCC;

    margin:0 auto;

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:12px;

    }

    a {

    color:#0066FF;

    text-decoration:none;

    }

    a:hover {

    color:#0099FF;

    border-bottom:1px dotted #0099FF;

    }

    .header {

    background:#0099FF;

    border-bottom:2px solid #333333;

    height:90px;

    padding-left:20px;

    padding-top:20px;

    }

    .header a {

    color:#FFFFFF;

    text-decoration:none;

    font-size:26px;

    font-weight:bold;

    }

    .header a:hover {

    border-bottom:2px dotted #FFFFFF;

    }

    .content {

    padding:5px;

    background:#FFFFFF;

    }

  • 6

    #content-title {

    font-size:14px;

    font-weight:bold;

    }

    #content-post {

    padding-bottom:10px;

    text-align:justify;

    }

    .sidebar {

    padding:5px;

    background:#ECECEC;

    }

    #sidebar-title {

    font-size:13px;

    font-weight:bold;

    }

    #sidebar-post {

    padding-bottom:10px;

    }

    .footer {

    background:#333333;

    padding:5px;

    font-size:11px;

    color:#FFFFFF;

    }

    Penjelasannya ..

    Kan udah belajar CSS, jadi ga perlu detail :D

    . adalah untuk class

    # untuk id

    :hover untuk menyatakan style saat objek disorot dengan kursor

  • 7

    !inising

    Setelah membuat style nya, maka anda tinggal memasukkan class dan id pada file indx.html sesuai

    dengan posisinya seperti ini:

    Document

    Header

    Lorem ipsum

    Lorem ipsum no has veniam elaboraret

    constituam, ne nibh posidonium vel. Has ad quaeque omittantur, malis abhorreant eam no,

    qui cu minim placerat definitionem. Et sonet ludus apeirian mei, ut tibique corpora

    posidonium vis, iusto nominavi prodesset in pro. Ad mea omnes aliquando,

    idque democritum incorrupte at sed, nostrud feugiat consetetur duo in. Aeque reformidans

    ex quo, facilisis appellantur ea mei. Illud scaevola pertinacia mel ad, est ex tractatos

    aliquando, cibo eloquentiam ea per.

    Cibo quas assum mel an, mel partiendo adipiscing quaerendum ne, dictas iisque ad usu.

    Invenire delicata sit at, ad est mollis civibus corrumpit. Ne has delenit eligendi splendide,

    harum numquam epicuri quo ea, sed verear aliquando consequuntur eu. Ad mea mucius

    expetenda liberavisse, mei ea assentior dissentiunt, delectus antiopam disputando vel ad.

    Ad pro erat quaeque suscipiantur, vis alia pertinacia at, ei duo zzril tibique necessitatibus.

    Tritani reprehendunt et vel, et habeo viderer eruditi eos, ornatus pertinax periculis mel

    ea.

    [Readmore ..]

    Ei brute deserunt

    Ei brute deserunt delicata nam, mundi

    moderatius ex quo. Id per modo molestie lobortis, perfecto corrumpit omittantur nec an.

    Albucius intellegam scripserit et cum, no mei porro tantas menandri. Nam detraxit

    disputando efficiantur cu, nisl petentium repudiandae eum ut. Pri reque scripta admodum

    te, rebum legere inimicus et has, ne qui amet meis commodo.

  • 8

    Sint illud inani cum an, et primis nostrum adipiscing usu, ut alienum insolens omittantur eos.

    Ad dolore torquatos moderatius vim, modo vero definitiones te his. Mea ei solet decore

    quaestio, nam an dolores concludaturque. Has illud mazim deserunt in, qui ad mazim

    democritum moderatius. Has essent sensibus id, dicant recusabo reprehendunt te pro, meis

    facilis maiorum id pri. Et nec mutat erroribus, ad fugit aliquando incorrupte has.

    [Readmore ..]

    Search

    Login

    Username

    Password

    Links

    Google

    Kaskus

    Indowebster

  • 9

    Copyright 2011 | All right reservedDesign by Rizky

    Bintang Utama

    Ket:

    Merah adalah class.

    Biru adalah id.

    Dan Hijau adalah isinya.

    Maka tampilan akhirnya akan seperti ini :