hisman.org » HTML

Sedikit penjelasan tentang tag div

hisman — Sun, 25 Jan 2009 07:32:53 +0000

Pada beberapa artikel saya sebelumnya misalnya tentang membuat layout dan membuat menu, saya selalu menggunakan tag div di kode HTMLnya, nah sebenernya apa sih gunanya tag div itu??

div itu singkatan dari division, tag ini merupakan block element yang berguna untuk menggabungkan atau membuat group tag-tag/element-element baik itu block ataupun inline element yang ada di dalam tag div itu.

Misalnya



Judul
Deskripsi

Nah, tag h1 dan p yang ada di dalam tag div di atas itu menjadi satu group yang idnya itu header. Secara default, tag div yang ditulis di atas tag div yang lain, ketika ditampilkan di browser juga berada di atas tag div yang di bawahnya. Makanya ketika membuat layout tanpa tabel, di CSSnya kita memakai property float untuk membuat tag div itu berada di kanan atau kiri tag div yang lain.

Ada lagi temennya tag div, yaitu tag span. Tag span ini sama-sama membuat group tag yang ada di dalamnya, tapi karena span merupakan inline element, jadi yang di group juga cuman inline element juga…

Inline element dan Block element pada HTML

hisman — Wed, 21 Jan 2009 03:12:04 +0000

Oke… kali ini saya akan bahas tentang inline element dan block element pada HTML, apa itu??

Sebenernya element-element pada HTML itu terbagi dua jenis yaitu ada yang merupakan inline element dan juga ada yang block, apa bedanya? Hmm… saya jelasin satu-satu ya…

Pertama yang inline element dulu, dari namanya dah keliatan khan?? Hehe… inline element itu adalah element pada HTML yang cuman sebaris, nah lho bingung khan?? pokoknya ya gitu dech,, gak boleh protes , yang termasuk inline element itu contohnya tag-tag , , , dll deh…hehe…

Nah, beda halnya dengan yang block element, yang ini lawannya yang tadi, berarti gak cuman sebaris, hehe… yang termasuk block element contohnya tag-tag

dan sebagainya…

Makanya di dalam block element boleh di taruh block element lagi atau inline element, sedangkan di dalam inline element gak boleh di taruh block element, cuman bisa di taruh inline element juga. Contohnya :



Contoh 1
ini boleh dilakukan


ini tidak boleh

ini boleh

Yang ini boleh

Dah ngerti khan?? tambahan, element-element tersebut, di CSS bisa dirubah bentuknya yang tadinya inline bisa jadi block dengan property display.

Membuat layout yang ada menunya

hisman — Sat, 18 Oct 2008 00:40:18 +0000

Kemaren saya dah posting tentang cara ngebuat layout tanpa tabel, dan juga cara ngebuat menu horizontal. Nah, sekarang kita coba gabungin menu yang dah kita buat dengan layout yang udah kita buat juga.

Coba buka ke dua file HTML menu sama layout yang dah di buat. Klo belum punya bisa di download disini dan disini.

Trus copy paste tag div yang idnya nav di file HTMLnya horizontal menu beserta isinya ke file HTMLnya layout, sehingga hasilnya seperti ini :






Layout+menu







Home
About
Contact
FAQ
Product

Dalam hal ini menunya kita taruh di header.

Trus copy paste juga CSS yang ada di file CSSnya horizontal menu ke file CSSnya layout sehingga ntar CSSnya layout jadi kayak gini :


body{
   background:#000000;
}
#wrapper {
   width:800px;
   margin:auto;
}
#header{
   background:#000099;
   height:200px;
}
#sidebar{
   background:#00CC66;
   float:left;
   width:250px;
   height:800px;
}
#posting{
   background:#FFFFFF;
   float:right;
   width:550px;
   height:800px;
}
#footer{
   background:#666666;
   height:300px;
   clear:both;
}
#nav ul{
   display:block;
   margin: 0px;
   padding: 0px;
}
#nav li{
   float:left;
   list-style-type:none;
   padding:3px 5px 3px 5px;
   margin:1px;
   border:#CCCCCC 1px solid;
}
#nav li a{
   text-decoration:none;
   color:#999999;
}
#nav li:hover{
   background:#00FFFF;
}

Simpen, dan jadi dech… Klo kamu bingung tentang kode-kode di atas, kamu bisa baca postingan sebelumnya tentang ngebuat layout dan juga horizontal menu.

File layout yang dah digabungin bisa di download di sini…

Membuat horizontal menu dengan CSS

hisman — Wed, 15 Oct 2008 02:58:59 +0000

Horizontal menu tau khan?? Contohnya klo di blog ini tuh menu yang ada di pojok kanan atas. Jadi kita akan coba buat menu kayak gitu dengan CSS (tapi sederhana dulu ya).

Sebenernya sich cara untuk ngebuat menu kayak gitu gak pake CSS juga bisa, contohnya aja kamu bisa pake flash, trus bisa juga pake HTML aja. Tapi yang lebih banyak di pakai untuk saat ini ya yang pake CSS, karena katanya sich lebih search engine friendly.

Seperti biasa kita buat file HTMLnya dulu. Isinya kayak gini :






Horizontal Menu





  
    Home
    About
    Contact
    FAQ
    Product

Kalau diperhatikan, ada tag

sama

ya? Tag-tag itu gunanya untuk ngebuat list (klo di Microsoft word itu namanya bullet).

Ngapa kita pake list untuk ngebuat menunya?

Karena agar menu yang kita buat itu lebih search engine friendly. (katanya sich google lebih menyukai situs dengan menu yang seperti itu).

Klo pake list itu khan jelek ya hasilnya (trus ke bawah lagi bukan horizontal). Nah kita pake CSS untuk ngebuat menu itu ke samping (horizontal).

Ini CSSnya :
```
#nav ul{
    display:block;
    margin: 0px;
    padding: 0px;
}
#nav li{
   float:left;
   list-style-type:none;
   padding:3px 5px 3px 5px;
   margin:1px;
   border:#CCCCCC 1px solid;
}
#nav li a{
   text-decoration:none;
}
#nav li:hover{
   background:#00FFFF;
}
```
Saya jelasin satu-satu ya?

~~Yang pertama, coba kamu liat di selector #nav ul, di situ ada property display yang valuenya block. Gunanya tuh untuk ngebuat tag~~

Membuat layout web tanpa tabel

hisman — Wed, 15 Oct 2008 02:34:12 +0000

Hai,, pa kabar nich?? Dah lama gak posting nich, dua minggu lebih kayaknya ya, sorry ya, hehehe…

O iya,, selamet hari raya idul fitri ya,,mohon maaf lahir dan batin. Telat ya ngucapinnya,, gak pa2 lah daripada gak sama sekali,,

Kemaren-kemaren khan (kemaren kapan ya?) saya dah sedikit apa itu layout dan juga alasan-alasan membuat layout web tanpa tabel, masih inget khan? Klo dah lupa coba baca aja lagi postingan yang ini dan ini.

Nah,,Kali ini saya akan coba bahas tentang cara ngebuat layout web tanpa menggunakan tabel. Tapi mungkin lebih ke praktek aja ya (langsung ke contoh).

Layout yang akan dicoba kali ini adalah layout standar yang memiliki header di atasnya, sidebar di kiri trus ada postingan dan juga ada footer di bawahnya. Kira-kira klo dah jadi kayak gini nich…

Pertama-tama,, kita buat dulu file htmlnya, namanya index.html biar enak. Karena kita cuman buat layout, jadi di file htmlnya itu kita bagi-bagi yang mana daerah header, sidebar , posting atau footer. Dalam hal ini cara menbagi daerah-daerah tersebut kita gunakan tag div (bukan tabel).

File htmlnya kira-kira isinya kayak gini :






Layout

Klo kamu perhatikan, di file htmlnya itu ada tag div yang idnya wrapper ya? Gunanya buat apa ya?
Hmmm… kamu masih inget khan cara untuk ngebuat halaman web berada di tengah-tengah browser? Nah layout yang kita buat kali ini menggunakan teknik tersebut.

Trus di div yang idnya content, kita bagi dua jadi sidebar dan juga posting. Karena nantinya sidebarnya itu akan dibuat berada di sebelah kiri postingnya.

Nah, file html dah jadi, sekarang kita buat file cssnya yang isinya itu intinya adalah mengatur tag div-div yang kita buat.


body{
    background:#000000;
}
#wrapper {
    width:800px;
    margin:auto;
}
#header{
    background:#000099;
    height:200px;
}
#sidebar{
    background:#00CC66;
    float:left;
    width:250px;
    height:800px;
}
#posting{
    background:#FFFFFF;
    float:right;
    width:550px;
    height:800px;
}
#footer{
    background:#666666;
    height:300px;
    clear:both;
}

Untuk yang body, wrapper, header dah agak ngerti khan? Mungkin saya sedikit jelasin yang sidebar, posting sama footer soalnya di ketiga id tersebut ada property yang aneh, yaitu float sama clear.

Pertama yang sidebar sama posting dulu. Rencana kita khan sidebarnya itu berada di sebelah kiri postingnya ya? Sedangkan, secara default tag div yang kita gunakan itu memposisikan daerah-daerah yang di buat itu berada di atas atau di bawah.

Jadi secara default, sidebarnya itu ada di atasnya posting. Nah, agar sidebarnya berada di sebelah kiri posting maka kita gunakan property float dengan valuenya left untuk sidebar dan value right untuk postingnya.

Namun perlu diingat, agar teknik ini berhasil, maka width (lebar) dari sidebar dan juga postingnya itu harus di set dulu. Berapa lebarnya? Terserah kamu,tapi jumlah lebar sidebar dan posting tidak boleh lebih dari total halaman web yang dibuat. Dalam hal ini, halaman web yang kita buat lebarnya 800px jadi kita set sidebarnya 250px dan postingnya 550px (jumlahnya 800px khan).

Nah, sekarang yang footer. Buat apa sich ada property clear disitu??
Intinya gini aja dech. Di sidebar dan juga posting, khan kita memakai property float, agar footernya tidak terpengaruh property float yang digunakan, maka kita kasih property clear dengan value both.

Trus kenapa cuman footer? Headernya ga?

Soalnya headernya itu khan letaknya di atas sidebar dan posting jadi floatnya tidak terlalu berpengaruh bagi headernya.

Nah, layoutnya dah jadi. Kamu bisa berkreasi sendiri mencoba-coba biar tambah ngerti. O iy, kamu bisa download file latihan layout ini di sini.

Membuat halaman web berada di tengah-tengah browser

hisman — Sat, 20 Sep 2008 01:30:22 +0000

Sebenernya ada banyak cara biar halaman web yang kita buat terlihat berada di tengah-tengah browser. Tapi saya akan jelasin satu cara aja yang sering dipake sama para web designer, dan cara ini lebih kompatibel di kebanyakan browser.

Kita mulai ya… Coba kamu salin kode ini ke notepad trus simpen dengan nama tengah.html









Tengah








berada di tengah browser khan

Nah, sekarang buat CSSnya. CSS kita letakin di luar file HTML yang tadi karena di file HTML di atas udah diletakin tag (tapi harus satu folder ya)
Oke sekarang salin kode CSS ini ke notepad juga dan simpen dengan nama style.css


body{
       background:#000000;
}

#wrapper {
      background:#FFFFFF;
      width:700px;
      height:800px;
      margin:auto;
      padding:10px;
}

Coba file tengah.html nya di buka pake browser, gimana??

Oke, ni sedikit penjelasannya :

Di file HTML, kita ngebuat sebuah blok dari tag div yang kita kasih id namanya wrapper. Nah, trus di CSSnya kita atur tag div yang idnya wrapper tadi.

Untuk property background pada tag body dan wrapper dah tau khan fungsinya, trus di wrappernya ada width sama height, klo width itu ngatur lebarnya kesampingnya mo berapa pixel (dalam hal ini saya pake satuan pixel) dan height itu kebawahnya berapa pixel (px).

Trus ada margin:auto , nah property itulah yang ngebuat halaman HTML tadi berada di tengah browser, klo yang terakhir padding:10px; itu buat nentuin jarak dari kotak wrapper tadi ke isinya (dalam hal ini text yang ada) berapa pixel.

Nah, jadi klo kamu naro tulisan atau apapun di dalam tag div yang idnya wrapper tersebut, akan terlihat berada di tengah browser. Dah ngerti khan??

O iya, supaya trik ini berhasil selain kamu ngeset margin:auto ,kamu juga harus ngeset berapa widthnya. Klo contoh di atas saya ngeset widthnya jadi 700 pixel.

Kamu bisa ngedownload file latihan tersebut disini..

Berkenalan Dengan HTML

hisman — Thu, 04 Sep 2008 10:25:28 +0000

Oke mamen,, masih semangat belajar webdesign? Nah, kali ini kita kenalan dulu yuk sama yang namanya HTML, karena rasanya kalo mo belajar webdesign ataupun ngedesian web harus tau terlebih dahulu HTML…

Saya tau kamu yang udah sering berinternet ria pasti udah gak asing lagi telinganya sama yang namanya HTML. Tapi gak apa kalo saya bahas sedikit disini, biar lebih kenal dan lebih dekat lagi dengan HTML. Karena kalau kamu pengen jadi seorang webdesigner pastinya HTML akan jadi makanan sehari-hari kamu .

Umm.. pengertian HTML apa ya??saya juga sebenernya bingung sich. Klo kepanjangannya sih HyperText Markup Language (hahlah apa ya artinya ada yang tau??). Cuman yang pasti HTML ada di setiap source code website2 yang ada saat ini. Coba aja kamu buka sorce code website ini pasti ada HTMLnya..

Trus tag-tag HTML itu seperti apa ??

Nah ini contohnya : belajar webdesign Kalau kamu ngeliat kode-kode mirip kayak gitu ya itu yang namanya HTML. Klo kamu pengen memperdalam/belajar kode-kode HTML kamu bisa ke situs HTML dog.

Sedikit penjelasan dari tag belajar webdesign :
adalah tag pembuka, trus href itu attribute. ”http://hisman.org” merupakan attribute value dan adalah tag penutup.

Secara umum, struktur dari sebuah dokumen HTML adalah sebagai berikut :

Kalo kamu perhatikan, pada tag !DOCTYPE ada juga yang memakai DTD XHTML 1.0 Transitional, jadi tagnya :

Mana yang sering kamu liat? Yang strict atau yang transitional. Hmm. Kalau saya jujur sering ngeliat yang transitional. Template blog saya ini juga pake yang transitional. Soalnya kalo kamu buatnya pake dreamweaver, tag DOCTYPE itu langsung ada dan defaultnya transitional. Walaupun sebenernya katanya sich yang ideal itu pake yang strict.

Konten web yang kamu liat di browser itu ada di dalam tag . Jadi kalau kamu mau ngisi konten ya di dalam tag tersebut. Kalau di dalam tag gak akan muncul di browser.

Nah, dah mulai kenal sama HTML?? Oke tunggu artikel berikutnya tentang CSS..

Skill dasar yang harus dimiliki oleh seorang webdesigner

hisman — Sat, 23 Aug 2008 09:21:46 +0000

Yups, dari artikel sebelumnya,kamu dah tau tentang webdesign yang baik itu seperti apa sich. Nah klo artikel yang ini akan membahas tentang skill-skill dasar yang harus kamu miliki jika ingin mendesign sebuah web.

Sebenernya sich menurut saya skillnya gak banyak-banyak, cuman tiga sich yang dasar, hanya kalau kamu ingin jadi master ya harus ditambah lagi skillnya hihi.. Tapi kalo kamu ngedalemin 3 skill ini kamu bisa kok ngebuat desain web yang wah.(tergantung kreativitas ya..)

Kreativitas yang bagus dan kemampuan mengolah gambar di komputer

Sebenernya kreativitas tuch skill bukan ya?hihi.. saya juga bingung. Tapi yang pasti kreativitas itu penting untuk memunculkan ide2 desain webnya. Ini bisa dilatih kok, kamu sering-sering aja ngunjungin web-web/blog2 trus perhatikan desain web mereka. Saya juga sering melakukan hal ini untuk mencari ide2 desain web.

Nah kalo mengolah gambar di komputer tuch, sedikit sepele namun penting. Biasanya seorang webdesigner tuch tidak langsung mengolah ide dikepalanya menjadi web, namun mereka terlebih dahulu membuat semacam desain kasar di software2 pengolah gambar seperti photoshop, corel dll. Nah, para webdesigner biasanya menguasai software2 seperti itu (yah minimal bisa make lah, n walaupun gak bisa semua salah satu juga gak apa2)

Menguasai HTML

Tau HTML khan?? Setiap web yang dibangun itu pasti memiliki/ada HTMLnya di dalam sorce codenya. Soalnya HTML merupakan kodingan inti dari sebuah web. Jadi, seorang webprogrammer ,webdesigner atau orang2 yang berkecimpung di dunia web itu sepertinya harus tau tentang HTML. (bisa menulis dan membaca/mengerti kode2 HTML)

Menguasai CSS

Setelah bisa menguasai HTML, seorang webdesigner juga harus mengetahui dan menguasai CSS. Karena dengan menggunakan CSS itulah sang webdesigner dapat mendesain sebuah web (meskipun sebenarnya hanya dengan HTML saja bisa, tapi akan lebih mudah dan terstruktur jika dilakukan dengan CSS).

Setelah membaca artikel ini pasti kamu berpikir, lho kok susah ya untuk mendesain web harus tau HTML lah, CSS lah, perasaan dlu tinggal pake dreamweaver, atau frontpage trus klik2 jadi dech.. ehmm iya sich, tapi perlu kamu ingat kalo memakai yang instant2 seperti itu biasanya kode HTMLnya akan hancur dan tidak SE friendly khan kamu masih ingat webdesign yang baik itu seperti apa.

Nah,akan lebih enak jika kita tau sedikit tentang HTML ato CSS, setidaknya dapat mengurangi efek kode HTML yang berantakan. Saya sendiri walaupun menggunakan dreamweaver untuk mendesain web, tapi saya hanya menggunakannya sebagai tempat nulis HTML dan CSSnya (karena lebih enak).

Dan juga, sebenarnya HTML dan CSS itu tidak susah2 amat kok (masih dalam tahap newbie lah,hihi). Klo yang master2 tuh biasanya dah make ajax,javascript dll (saya aja gak ngerti yang begituan hihihi..). So, kalau kamu pengen bisa ngedesain web kamu sendiri, terus belajar ,pantang menyerah dan yang terpenting baca n kunjungin blog ini terus (hahlah..)