EBOOK COMPUTER LANGUAGE VISUAL BASIC HTML CCS

Belajar Visual Basic | Permulaan Visual Basic

berikut

tampilan

awal

visual

basic

2010

express

:

dan

berikut

tampilan

awal

di

visual

basic

2008

:

dalam folder "New project". tampilan untuk visual basic 2010 . Maka tampilan akan untuk terlihat visual seperti basic berikut 2008 : .Sebagai pemula. Itu bukan nama yang baik untuk project anda. Jika Anda melihat di textbox di bagian kanan. untuk mengubahnya klik kanan di tulisan tersebut dan pilih rename kemudian ubah namanya dengan nama "My Fisrts Project". Sebaiknya Anda memiliih dengan opsi : "Windows Forms Application". Ini adalah nama default untuk proyek-proyek Anda. Anda akan melihat "WindowsApplication1". Ini berarti bahwa Anda akan merancang sebuah program untuk dijalankan pada komputer yang menjalankan sistem operasi Microsoft Windows.

kita akan belajar Cara menjalankan program di visual basic (Start Debugging) .. kita akan masih lanjut ke tutorial berikutnya . Belajar Visual Basic | Menjalankan Program (Start Debugging) Dalam belajar visual basic di lingkungan desain VB..itu adalah permulaan untuk anda belajar visual basic. hal pertama yang harus anda lakukan adalah berkonsentrasi pada tampilan kotak perseginya dengan nama default form1. 1. pada tutorial belajar visual basic untuk pemula selanjutnya. sekarang coba anda jalankan program pertama anda tersebut yang belum berisi kode satupun dengan cara : .NET. ini adalah tampilan pertama ketika anda memulai program dan hasil dari program anda akan seperti itu jadinya.

maka anda akan kembali ke program anda. Nah. mulai saat ini jika saya bilang untuk menjalankan program berarti anda harus mengklik F5 pada keyboard anda ya .  Dari menu bar atau dengan cara singkat klik F5 pada keyboard anda program anda akan klik Debug kemudian klik start debugging Maka di jalankan dan seperti ini hasilnya : Untuk keluar dari proses debugging klik tombol x merah di sudut kanan atas.. Mereka dikenal sebagai Kontrol. Toolbox dapat ditemukan di sebelah kiri layar. kotak teks. dan disimpan dalam Toolbox untuk memudahkan penggunaan. kita akan mempelajari cara menampilkan kontrol toolbox ke form project anda. Pada tutorial belajar visual basic untuk pemula selanjutnya. Belajar Visual Basic | Menambahkan Kontrol ToolBox Ke Form Hal-hal seperti tombol. Pada gambar di bawah ini. dan label adalah segala sesuatu yang dapat Anda tambahkan ke form project anda. Anda dapat melihat ikon toolbox disebelah Form1 : tampilan di VB 2010 .

tampilan di VB 2008 Untuk menampilkan semua Tools pada toolbox. anda cukup mengarahkan mouse anda ke icon toolbox. dan Anda akan melihat tampilan seperti berikut : VB 2010 VB 2008 .

Kemudian cari di All windows Form / Common Controls. icon textbox 3. ok pada tutorial belajar visual basic selanjutnya kita akan belajar menambahkan textbox ke form . cari aja di toolbox dengan nama depan T ) nya Textbox akan ditambahkan ke posisi kiri atas form Anda. sementar untuk menampilkannya kembali klik view pada menu bar kemudian klik other window dan pilihtoolbox atau dengan klik Ctrl + Alt + X pada keyboard anda. Untuk memindahkan ke bawah. Buka Toolbox 2. Belajar Visual Basic | Menambahkan TextBox Ke Form Mari kita mulai langkah belajar visual basic dengan menambahkan tool textbox untuk membentuk tampilan dan fungsi pada form kita. 2. fungsi toolbox ini sangat banyak pengaruhnya pada software atau game yang akan anda buat nantinya. Dengan alat yang ditampilkan pada toolbox.Untuk menutup kembali anda tinggal menjauhkan mouse dari toolbox tersebut dan untuk menghilangkan icon tool box tersebut klik lambang X di sudut kanan atas pada toolbox. Kemudian Klik 2x icon Textbox ( jika sulit menemukannya. tahan mouse anda di atas textbox dan tarik/drag ke posisi baru yang anda mau: . jadi harap mohon di mengerti . lakukanlah hal berikut: 1.

Perhatikan kotak kecil di kiri dan kanan textbox. dengan cara : . Atau jika anda suka yang sulit-sulit . Microsoft beralasan. Coba gerakkan mouse Anda ke salah satu dari mereka. kita lanjut untuk membuat textbox lebih banyak di form kita. Anda akan melihat bagaimana cara melakukannya di tutorial belajar visual basic selanjutnya . textbox hanya dapat dibuat lebih tinggi jika diatur ke beberapa baris teks.klik kanan pada textbox . textbox itu hanya berisi satu baris teks. Maka Textbox akan berubah ukuran panjangnya . pointer Mouse akan berubah menjadi garis panjang. Cara mudah untuk membuat banyak textbox di form adalah dengan copas (copy paste) textbox pertama.kemudian pilih paste atau dengan cara mudah -> klik CTRL + C pada textbox -> kemudian klik CTRL + V di form kita 2. karena itu adalah tindakan default dari textbox. . Alasan mengapa Anda tidak dapat membuat textbox lebih tinggi. tidak ada alasan mengapa Anda harus dapat mengubah tingginya.pilih copy . pilih textbox lagi di toolbox. Satu Fakta yang dapat Anda perhatikan di sini adalah bahwa Anda tidak dapat membuat ukuran lebih tinggi tetapi Anda dapat membuatnya lebih panjang.udah ane jelaskan di atas gan !!! . Tahan tombol kiri mouse Anda dan kemudian tarik (untuk memperpanjang textbox) . Ini adalah untuk menangani ukuran textbox. 1.kemudian klik kanan lagi di form kita .

Maka Tampilannya . lalu copas label nya (sama seperti copas textbox) kemudian lakukan hal yang sama pada textbox . Menambahkan Label untuk Formulir Anda Mari kita tambahkan beberapa label di dekat textbox sehingga pengguna aplikasi yang anda buat akan tahu apa yang sedang mereka lakukan pada aplikasi buatan anda.. Caranya : 1.. Klik 2x icon nya Maka seharusnya akan terlihat seperti ini : Klik kiri pada Label kemudian tahan mouse dan arahkan tepat di samping kiri textbox. Cari Icon Label ( di lambangkan dengan huruf A ) 3. Buka ToolBox 2.

ok slow but sure . atau lihat gambar berikut : untuk menghentikan program cukup klik X merah di sudut pojok atas form debug. jalankanlah program (Debug) jika belum tahu cara start debugging cukup klik F5 pada keyboard. kita sama sekali belum mengisinya dengan koding-koding VB agar dapat mempunyai suatu fungsi.sekarang kita memiliki bentuk pada form kita dengan textbox dan label. Untuk melihat apakah program anda sudah terlihat seperti program.berikutnya Maka akan tampak seperti ini : . sesuatu yang tampak seperti pengguna aplikasi yang kita buat dapat mengisi sesuatu pada textbox itu. untuk sementara cukup itu dahulu dalam memulai belajar visual basic dan kita akan mulai tentang koding-koding di tutorial belajar visual selanjutnya . Baiklah. padahal tidak.

. untuk mengubah propertynya kita cukup klik pada label yang ingin kita ubah propertynya dan pastikan kotak property berubah nama menjadi nama Label kita. dll. Font. sifat-sifat ini adalah nilai-nilai untuk mereka. "AccessibleRole". dan lain-lain. Belajar Visual Basic | Mengenal Properties di VB Ikuti terus tutorial . Terlebih dahulu anda arahkan konsentrasi propertiesnya ke form1 dengan cara klik di manapun asalkan di dalam kotak form kita.. hingga kotak property terkonsntrasi ke form kita. Anda mungkin telah melihat daerah di sebelah kanan bawah dari VB kan. Gambar. daerah dengan semua text dan box dalam kotak. "AccessibleName".tutorial belajar visual basic untuk pemula di blog ini . Di sebelah kanan dari lingkungan desain visual basic. salah satunya memiliki nama seperti "Auto Size". kotak properti akan seperti tampilannya : Dalam Kotak property Apa yang Anda cari adalah suatu daftar dari sifat-sifat yang membentuk dan memiliki: Nama. dan dapat diubah. BackColor..4. Nilai-nilai ini adalah nilai-nilai default. dan Itulah kotak Properties yang akan kita bahas kali ini. Begitu pula untuk yang lain seperti Label. Teks.

sesuatu yang kuat dan Anda dapat mengontrol sifatnya . (Anda juga dapat mengubah properti menggunakan kode-kode. Contoh mudahnya adalah televisi. seperti pada gambar di bawah ini: Sebelum kita lebih jauh tentang properties. mematikan tv. Anda dapat mengubah properti dari kontrol Kotak Properties. yang akan Anda lakukan dengan cukup banyak. Apa Itu Properties ? properties adalah kontrol. membuatnya dengan bunyi pelan.Pertama. dimana anda dapat menyalahkan tv. klik ikon abjad di bagian atas kotak Properties.label dll). Anda dapat menganggap kontrol sebagai benda. "akan saya jelaskan nanti") Jika kita kembali ke objek form kita. Untuk melakukannya. dalam sebuah televisi terdapat remot untuk mengendalikannya. dan bentuk itu sendiri disebut objek kontrol. membuatnya dengan bunyi kuat dan lain-lain. *Pada contoh berikut kita akan mengubah nilai text pada form1 kita : . Anda mungkin ingin untuk menampilkan daftar Properties dalam bentuk yang lebih mudah diakses. kontrol yang anda dapat tambahkan ke bentuk (textbox. sifat-sifat dan nilainilai yang terdapat pada form kita dapat di lihat di kotak properties. kita juga dapat untuk mengubahnya dengan menggunakan Kotak Properties. mari kita pahami lebih detail apa itu properties pada visual basic. Anda dapat menampilkan properti dengan daftar abjad. Dalam visual basic.

sekarang coba ubah nama properties form1 text dengan nama My First Form Maka form yang kita buat di tutorial sebelumnya kan tampak seperti ini : .lihat kotak properties form1 perhatikan tulisan text sama dengan form1 form1 adalah nama default dari form kita .

.*perhatikan tulisan My first Form di atas Sekarang anda sudah cukup mengenal apa itu properties pada visual basic . . pada tutorial belajar visual basic selanjutnya kita akan membahas tentang mengubah properties Label dan Textbox yang kita buat pada tutorial sebelumnya .

sini aldi berikan sedikit gambaran tentang html . bila anda membangun sebuah situs dengan web hosting seperti blogger. sini kawan biar aldi pandu untuk belajar html . ( untuk memperdalam ilmu tentang html silakan anda baca terus tutorial html pada blog aldi ini. loh . untuk artikel kali ini aldi hanya akan menjelaskan secara singkat untuk anda dalam pengenalan html.. tentu saja anda akan di wajibkan untuk setidaknya familiar dengan code-code html tersebut .) lihat contoh singkat : <html> <body> <h1>My First Heading</h1> <p>My first paragraph. kok bingung siii aihhh ..Belajar HTML Langkah Menjadi Webmaster HTML adalah code-code khusus dalam pembangunan sebuah situs web / blog.</p> </body> </html> mungkin bagi anda yang baru pertama kali belajar html akan kebingungan dengan code-code html tersebut. . namun tentu saja jika anda ingin mempercantik blog dan semacamnya yang bersangkutan.maka secara otomatis situs anda sudah akan mempunyai code-code html secara otomatis.

html terdiri dari banyak kode-kode namun yang terpenting dan mungkin memang wajib deh untuk di pasang yaitu <html> <head> <body> ( dan banyak kode-kode html lainnya ) dalam kode-kode html semua tag-tag seperti contoh di atas harus ditutup kembali dengan simbol "/ " contoh jika anda membuat tag <html> maka anda pun harus menutupnya dengan tag </htnl>.!! aldi rasa untuk artikel pengenalan html kali ini cukup untuk kalian dalam hal pengenalan html . untuk memperdalam ilmu html ..kalo kata pepatah mengatakan tak kenal maka tak sayang . semoga bermanfaat .. mungkin bagi anda yang masih kebingungan dengan tutorial HTML aldi yang pertama dan masih pusing 7 keliling mengelilingi senayan tentang penjelasan HTML . saya</p> </body> </html> dari contoh di atas maka dalam layar web/blog anda akan seperti ini hasilnya : . ya emang dari sono nya udah begitooo . hehehe .untuk itu mari kita pelajari dengan singkat mengenai html .....html lainnya silakan kalian ikuti terus artikel tutorial html selanjutnya pada blog ini .biar lebih asik lihat contoh dulu yaa : <html> <body> <h1>tulisan saya oke engga</h1> <p>paragraph. klo ada yg bantah ayo ankat tangannya .. alright.. aihhh kok nanya .. Pengenalan HTML episode 2 Hei teman... mengapa begitu yaaa ????? . sekarang aldi akan jelaskan dengan detail dan lengkap tentang HTML tersebut ..

tulisan saya oke engga paragraph. HTML singkatan dari Hyper Text Markup Language HTML bukanlah bahasa pemrograman. adapun struktur <h> sebagai berikut : h1 = tulisan saya oke engga h2 = tulisan saya oke engga h3 = tulisan saya oke engga h4 = tulisan saya oke engga dan untuk tag <p> itu adalah berarti paragraf . untuk <h1> itu sendiri pun maksudnya adalah tulisan pertama dan biasanya di pakai untuk judul blog . mari kita lets go. kalo paragraf kalian juga sudah pasti tahu kan . tag kedua adalah tag akhir ini juga sering disebut tag pembuka dan tag penutup.. nih ada contoh singkat pengenalan HTML jika kalian masih belum engeh juga dengan penjelasan di atas barusan : ... apa si itu HTML ??? kalo pengertiannya menurut orang-orang pinter kaya gini nih HTML adalah bahasa untuk mendeskripsikan halaman web. oke aldi anggap kalian sudah mengetahuinya . saya untuk contoh di atas aldi hanya menggunakan sedikit kode HTML yaitu <h1> dan <p>. itu adalah bahasa markup Sebuah bahasa markup adalah seperangkat tag markup HTML menggunakan tag markup untuk mendeskripsikan halaman web tag HTML HTML markup tag biasanya disebut tag HTML Tag HTML adalah kata kunci dikelilingi oleh sudut kurung seperti <html> Tag HTML umumnya selalu berpasangan seperti <b> dan </ b> Tag pertama dalam pasangan adalah tag pembuka.

pilih edit html .. .new post ...login blogger .Teks di antara <html> dan </ html> menjelaskan halaman web Teks di antara <body> dan </ body> adalah isi halaman yang terlihat Teks di antara <h1> dan </ h1> ditampilkan sebagai judul Teks di antara <p> dan </ p> ditampilkan sebagai sebuah paragraf nahh untuk artikel pengenalan HTML episode 2 nya aldi rasa sudah cukup yaa . lalu tinggal copas deh bisa di postingan kalian ataupun di template blog kalian .. sedangkan untuk meletakan kode html pada template blog . gmna engga .pilih design ( untuk blogger berbahasa indonesia : rancangan ) ... sebenarnya untuk meletakan kode html itu bisa dmna saja .. atuh nannya nya aneh-aneh aja si dya ..pertama login dahulu ke blogger . sini merapat biar aldi jelaskan : [ ini untuk contoh blogspot ] .hehehe tapi dari tampang mukanya siii . hmmm . "aldi html ini di ketiknya dimana sii ??? " .... nahhh mudahkan . dya serius bngettt . . .:) Dimana Meletakan HTML belum lama ini ada teman aldi yang masih benar-benar blank tentang html. aldi yakin kalian semua pinter-pinter kok .seperti notepad dan lain sebagainya . namun bila kalian masih bingung juga tentan peletakannya . .kemudian pilih posting .... oke deh klo bgitu sekalian saja saya buat postingan untuk dya .. mungkin bagi teman yang masih blank juga tentang html bisa membaca artikel ini .lalu pada kotak postingannya kalian klik edit html letaknya ada di pojok kanan atas . dia nanya sama aldi .. sebenarnya aldi pun ingin ketawa mendengarnya ..

silkana ikuti petunjuk berikut ..Kode Dasar Pada HTML postingan kali ini aldi mulai menjelaskan kode .aldi rasa kalo mau meletakan kode-kode html di blog .pilih design .kode HTML. oke langsung saja merapat ke topik artikel .plih page elemens .dan kalian pun dapat memasukan kode-kode javascript juga lohh. truss masukan deh kode-kdoe HTML nya ..klik add gadget . untuk basic html yang pertama adalah heading mungkin jika kalian membaca postingan aldi sebelumnya . pasti kalian ssudah dapat familiar dengan kata heading..benar ingin belajar HTML . kalo kalian ingin meletakan kode-kode html pada sidebar blog. untuk kali ini yang paling dasar dulu ya .login blogger . sekian dulu deh Kode . <h1>tulisan kamu </h1> <h2>tulisan kamu </h2> <h3>tulisan kamu </h3> <h4>tulisan kamu </h4> <h5>tulisan kamu </h5> <h6>tulisan kamu </h6> ..kemudian pilih HTML/java script . html heading terdiri dari h1 sampai h6 sini merapat kita lihat contoh dulu biar asikk . oh iya ada lagi .. yaaa di situ dehh .: ... tapi untuk kalian yang ingin belajar html . jika tidak lupakan saja artikel ini yaa. kode-kode html itu ternyata mempunyai dasar kode yang harus di ketahui jika kalian memang benar . ehmmm . sebaiknya baca dulu artikel ini sebelum lanjut ke artikel selanjutnya . berhubung kode html itu memang kalo di bilang banyak juga sii ..

.. html paragraf kayanya aldi ga perlu jelasin lagi deh tentang html paragraf . .dari contoh di atas dapat simpulkan bahwa h1 adalah tulisan kamu yang terbesar dan seterusnya hingga h6 tulisan kamu yang terkecil. ayo kita lanjutt html image maksud html image ini adalah kode hml untuk memasukan gambar . kode html ini harus di ketik sendiri karena untuk saat ini blogger masih belum meluncurkan asesoris untuk membuat html image secara praktis.. ( ukuran sesuai keinginan anda ). <a href=" di sini alamat link yang kalian ingin tuju">contoh link</a> maka hasil nya akan seperti ini : contoh link oke aldi rasa kalian sudah paham dehhh .. bisa kalian lihat di atas kolom posingan ada tulisan link . jika kalian sedang membuat postingan . pasti adalah .. tapi bagi anda yang menggunakan blogger classic maka lambang link biasanya di ubah dengan gambar rantai waduhh berarti mudah donkkk untuk membuat link pada blog yaa ??? jika anda bertanya seperti itu jawabannya adalah yaa .akan tetapi jika anda ingin membuat link pada template blog anda silakan kalian lihat contoh berikut yaa . oke aldi anggap kalian sudah mengetahui apa itu paragraf .link ke artikel lain di blog anda ataupun ke alamat web lain . kalau di dalam blogger untuk membuat link nya itu mudah kok .ya kan . yaitu html link ... biar aldi kasih contoh aja yaa . html link berfungsi untuk anda dalam hal membuat link ... berbeda dengan kode html pada pembuatan link . ada engga . mari merapat kita lihat contoh html nya : <img src="di sini alamat gambar tersebut" width="20" height="30"/> pada contoh di atas fungsi width adalah untuk mengatur panjang gambar sedangkan height untuk mengatur lebar . <p> disini letak paragraf kamu </p> <p> dsini letak paragraf tulisan kamu selanjutnya </p> html links nahh untuk yang ini nih yang paling penting .

pada penulisan html terdapat format penulisan yang berbeda-beda .miring ..miring dan sebagainya ini dia kode html nya : <p><b>ini tulisan tebal</b></p> <p><strong>ini tulisan strong</strong></p> <p><big>ini tulisan besar</big></p> <p><i>ini tulisan italic</i></p> <p><em>ini tulisan emphasized</em></p> <p><code>ini tulisan gaya komputer</code></p> <p>ini tulisan<sub> subscript</sub> dan <sup>superscript</sup></p> dari contoh di atas maka akan menghasilkan tulisan seperti dibawah ini : ini tulisan tebal ini tulisan strong ini tulisan besar ini tulisan italic ini tulisan emphasized ini tulisan gaya komputer ini tulisan subscript dan superscript . Format penulisan pada HTML okeyy kali ini kita membahas format penulisan pada HTML untuk kalian yang ingin belajar html . oke dehhh aldi rasa cukup basic html nya . gmna artikelnya nih teman .. mungkin dari judul di atas kalian masih bingung yaa . nahh biar aldi jelaskan sekarang .. apa maksudnya sii aldi bikin judul kaya bgitu . mungkin bagi kalian yang ingin belajar membuat tulisan-tulisan seperti itu silakan ikuti terus artikel ini .. mungkin kalian sering lihat atau mungkin membaca tulisan-tulisan yang tebal . nahhh itulah yang di maksud dengan format penulisan .tulisan seperti di notepad dsan sebagainya .. untuk membuat tulisan seperti tebal .ehmm . mudah-mudahan dapat membantu yaaa ..

mendingan ngopi aja dulu yaa .. mari kita lanjut . oke sebelumnya jika kalian belum membaca postingan aldi sebelumnya silakan baca disini atau disini ehmmm . kenapa engga dibaca sii .<tr> dan <td> dan tentunya harus di tutup kembali dengan kode "/" . kali ini aldi akan menjelaskan cara membuat tabel menggunakan html .. biar lebih asik kita lihat contoh aja yukk . membuat tabel dengan html ini sangat di perlukan untuk kalian dalam hal mempostingkan artikel yang memerlukan tabel .contoh di atas bisa kalian terapkan pada blog atau pun web dengan sesuka hati kalian ... dalam hal membuat tabel dengan kode html. hehehehe ) Cara membuat tabel menggunakan HTML mungkin dari judul artikel di atas kalian pun pasti sudah paham yaa . ( pendek ya artikel nya. oke deh untuk artikel kali ini sekian dulu yaa ... kode yang wajib anda masukan adalah . jika kalian sudah membaca artikel aldi sebelumnya mungkin kalian pasti sudah paham tentang tag-tag penutupan html tersebut . oke aldi anngap kalian sudah paham . tabel nah untuk tabel di atas itu aldi memakai kode html di bawah ini : <table border="1"> <tr> <td>tabel</td> ..<table> ... yaa ..tabel dalam hal penjelsannya .. mari langsung aja kita bahas .. oke deh kalo engga mao dibaca juga engga apa-apa .

..berarti kalo mao membuat tabel yang lebih besar seperti ini caranya : <table border="4"> <tr> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> <td>400</td> <td>500</td> <td>600</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> <td>400</td> <td>500</td> <td>600</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> .</tr> </table> keterangan : table tr td table border "1" border : html awal pembuatan tabel : jumlah baris ke bawah : jumlah baris ke samping : untuk angka 1 pada table yaitu ketebalan garis pinggir atau nahhh.

bisa kok kalian copas kode html di atas ...... jika kalian tertarik untuk menggunkan tabel dalam menulis artikel. . sebeenarnya itu sangat mudah lohh ..<td>400</td> <td>500</td> <td>600</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> <td>400</td> <td>500</td> <td>600</td> </tr> </table> dari contoh di atas maka akan menghasil kan tabel seperti dibawah ini :\ 100 200 300 400 500 600 400 500 600 400 500 600 400 500 600 400 500 600 400 500 600 400 500 600 400 500 600 400 500 600 bagaimana ??? . tinggal kamu masukan kode <!-..dan di akhiri dengan kode --> gmana mudah kan . huruf dalam tabel dapat anda rubah sesuai kebutuhan . mungkin bagi kalian yang belum mengetahui cara membuat tulisan coment padahtml akan sedikit kebingungan dengannya .. bagaimana caranya yaa ????? hahahhaha.... oke deh biar lebih asik kita lihat contoh aja yukk . dan tinggal kalian rubah aja kok . Cara membuat tulisan coment HTML wew... mudah kan .... selamat mencoba . kata-katanya .

.. aldi kira juga yang di maksud dia ntuh tulisan seperti ini tulisan bergaris bawah tapi ternyata bukan yang itu lohh ternyata ehh ternyata yang di maksud dia ntuh tulisan seperti ini tohh tulisan ini hanya contoh tulisan ini hanya contoh tulisan ini hanya contoh tulisan ini hanya contoh tulisan ini hanya contoh ..betul . kenapa ??? kok bingung .<!--Di sini tulisan tak terlihat--> nih hasilnya lohh ..kan tulisan memang ga kelihatan .. Cara Membuat Tulisan Bergaris Di bawah pada HTML belum lama ini ada teman aldi yang bertanya !! "gmna cara membuat tulisan biar bergaris bawah dengan HTML ??? " pasti dugaan kalian pun akan sama bukan dengan dugaan yang aldi kira dari pertanyaan tersebut .wkwkwkwkwk selamat mencoba .....?? yyaaaa ..kok engga ada .

.. nahhh kan trus tulisannya jadi ke bawah ntuhhh . untuk kode html kali ini sebenarnya engga jauh beda dengan kode html paragraf tersebut .tulisan ini hanya contoh mungkin di antara kalian juga masih ada yang bingung bukan .. mudah kok . pada tutorial sebelumnya sebenarnya telah aldi terangkan lohh tentang html paragraf ..... gmna caranya ntuhhh ????? aihhhh ... biar lebih jelas lihat contoh aja yuu . tinggal di tambahkan kode " <hr/> " aja. ga percaya .atau kalau kita sedang membuat postingan di blogger ntuh .. namun untuk kali ini jauh lebih simple untuk anda yang sedang terburu-buru ... lah trusss ngapain di jelasin donk ???? .. oke untuk fungsi html kali ini fungsinya memang sama persis seperti membuat paragraf baru ....... tulisan ini hanya contoh <hr /> tulisan ini hanya contoh <hr /> tulisan ini hanya contoh <hr /> tulisan ini hanya contoh <hr /> tulisan ini hanya contoh <hr /> tulisan ini hanya contoh <hr /> dari contoh tersebut maka hasilnya akan seperti yang di atas tadi lohh . hahahaha emang mau ngapain yaa kok buru-buru .??? coba aja sendiri weeeee Cara Membuat Baris Baru Pada HTML ehmmm. kurang lebih kaya mencet enter deh .

.. so'alnya .. Cara Membuat Tulisan HTML Ber-style Komputer ternyata HTML juga bisa di buat ber-style gaya komputer lohhh .. udah ah .... aldi kok malah ceramah yaaa engga usah ribet-ribet yaa . kalo kalian mau ngotak-ngatik template blogspot itu kan engga bisa kalian mencet enter truss tulisan kalian jadi ada di bawah pass di tampilinnya nanti . hehehe . selain itu fungsi ini pun juga sangat bermanfaat untuk kalian yang tidak menggunakan hosting blogspot ....gini nih teman . oke deh langsung aja di jelasin .. ga percaya ???? @#$%$#@$%$#@ baguss memang jangan pernah percaya sama aldi tapi cukup percaya sama yang di atas saja .. dalam setiap tulisan yang ingin di buat baris baru tambahkan saja kode ini " <br/> " contoh tulisan ini hanya contoh <br/>tulisan ini hanya contoh lagi <br/> tulisan ini hanya contoh <br/>contoh lagi ahhh <br/>contoh tulisan saya <br/> dari contoh tersebut maka akan menghasilkan tulisan seperti dibawah ini : tulisan ini hanya contoh tulisan ini hanya contoh lagi tulisan ini hanya contoh contoh lagi ahhh contoh tulisan saya bagaimana ???? mudah kan . di sini aldi cuma memberikan arahan saja kok ....weeeeee . kok jadi ngelantur tingkat stress nih aldi .

oke langsung aja deh ...lihat contohnya : <code>komputer code</code> <kbd>Keyboard input</kbd> <tt>Teletype text</tt> <samp>Sample text</samp> <var>Computer variable</var> maka hasilnya ( secara berurutan dari atas ke bawah : Komputer code Keyboard input Teletype text Sample text Computer variable bagaimana mudah kan .. !!! bocah : yah bagi duit !!! ayah : sono minta sama emak luh !!! bocah : .. selamat mencoba Cara Membuat Link Mengirim Email Dengan HTML Pada suatu hari ada seorang bocah yang bertanya pada ayahnya .

selamat mencoba ..bila anda ingin menanyakan sesuatu bisa contact saya melalui email itu ) dan hasil nya akan seperti ini ( coba tekan ) Email saya pada dasar nya membuat link email itu cukup di tambahkan kode " mailto: " dan "alamat email" saja kok . ....kalian juga dapat menggantinya sesuai kebutuhan.com">di sini hanya contoh</a> nahhh kalau untuk membuat link untuk membuka outlok express ... bagaimana mudah kan . ( sebenarnya masih banyak lagi fungsi dari html .anda : @#$%$#@#$ dan saya : hahahahahahhahahahahahhahaha yang di atas engga ada nyambungnya sama sekali yaa sama judul artikelnya .. akan tetapi juga dapat sebagai pembuka outlok express ...contohblog. ( alamat email di atas adalah alamat email saya . sebenarnya fungsi .tapi kali ini akan aldi jelaskan fungsi untuk email saja dulu ) biasanya kalian kalo membuat link kurang lebih seperti ini kan kodenya <a href="www.com" itu adalah alamat email yang akan kalian tuju .. ayo kita kembali ke topik pembahasan cara membuat link Mengirim email dengan html ..com">Email saya</a> keterangan : pada kata " aldi_fe@yahoo.wkwkwk oke deh sebelum ngelantur terlalu jauh . mungkin bagi kalian yang belum begitu memahami fungsi dari pembuatan link-link pada html akan bingung yaa . yaitu alat untuk mengirim email .seperti ini nih teman : <a href="mailto:aldi_fe@yahoo.. oke biar aldi jelaskan .fungsi link tersebut selain juga untuk membuka halaman lain baik di bagian lain dari blog kalian ataupun dari blog-blog lain yang kalian taru link nya .

.lets go pertama aldi akan sharing sedikit info nih untuk kalian .com">disini link untuk membuka halaman baru<a/> dan hasilnya ..com"> <img src="http://us.yimg.Link HTML Gambar | Cara Membuat Link HTML Bergambar oke selamat malam semua ( so'alnya aldi membuatnya malem hari nih .. belum lama ini banyak teman aldi yang bertanya ..blogspot..zengbogel.com">disini link untuk mengirim email<a/> and . engga percaya .com/us. ini untuk membuat link biasa ) ..... lon kok engga tau tapi mau bikin . langsung masuk ke topik pembahasan aja yuk . oke deh sekalian aja aldi buatin postingan buat teman aldi yang satu ini . ehmm ..hehehe .com/i/mesg/emoticons7/77..i1. oke desss kalo gitu .yimg. kok engga di klik ??? . nih contoh nya . ini dia hasilnya ( coba klik deh ) disini link untuk mengirim email nahhh untuk yang ini nih link bergambarnya lihat yukk . engga tertarik yaa .. tapi sayangnya mereka engga tau ntuh cara ngebuatnya ...zengbogel.link html itu sebenarnya mempunyai banyak ke gunaan lhoo .gif" width="20" height="20" /> </a> . gpp ... jrrrrengggg disini link untuk membuka halaman baru dan yang ini link untuk mengirim email <a href="mailto:aldi_fe@yahoo.. ehmmm . Mereka ingin membuat Link HTML bergambar <a href="www. sekedar mengingatkan saja sebelumnya aldi kan sudah buat tutorial HTML untuk membuat link email bagi kalian yang mungkin ingin membacanya silakan klik disini yaa . dalam link . <a href="www..blogspot.

gif" width=18 height=18 border=0> .com/i/mesg/emoticons7/2.gif" width=18 height=18 border=0> :(sad <img src="http://us.com/i/mesg/emoticons7/3.yimg.yimg. kira-kira 2 hari lagi  oke lanjut ke tulisan berwarna hijau : untuk yang ini adalah tinggi dan lebar gambarnya .i1.. nahhh link itulah yang akan kalian pakai dalam hal ini) .hehehe tapi sekali lagi makasih yaaa kang rohman . udah paham kan ) dan hasilnya .)winking <img src="http://us..com/us.. nih kebetulan aldi ada kok setelah nyopet punyanya kang rohman .... :)happy <img src="http://us.com/us.gif" width=18 height=18 border=0> :Dbig grin <img src="http://us.yimg..com/us.yimg..nanti akan aldi jelaskan cara meng uploadgambarnya ke photobucket.yimg..com/i/mesg/emoticons7/4.i1.i1.yimg..coba klik sendiri aja deh gambarnya . untuk kalian yang mungkin menginginkan alamat gambar yang lain . ( misal kalian membuat gambar dan meng upload nya di photobucket . ( kalo yang ini engga usah di jelasin .gif" width=18 height=18 border=0> .com/i/mesg/emoticons7/1.yimg.keterangan :   tulisan yang aldi beri warna merah : disni adalah letak alamat web/blog yang ingin kalian tuju tulisan yang berwarna biru : ini adalah letak alamat gambarnya .i1.com/us. maka nanti akan ada linknya kan .yimg.

gif" width=34 height=18 border=0> .gif" width=18 height=18 border=0> >:D<big hug <img src="http://us.yimg.com/us.com/i/mesg/emoticons7/7.yimg.yimg.com/i/mesg/emoticons7/12.yimg.com/us.yimg.gif" width=20 height=18 border=0> :xlove struck <img src="http://us.gif" width=18 height=18 border=0> :Ptongue <img src="http://us.com/us.com/i/mesg/emoticons7/10.yimg.com/us.com/us.yimg.gif" width=18 height=18 border=0> X(angry <img src="http://us.i1.com/i/mesg/emoticons7/6.yimg.com/i/mesg/emoticons7/14.com/i/mesg/emoticons7/13.gif" width=18 height=18 border=0> =((broken heart <img src="http://us.i1.com/us.)batting eyelashes <img src="http://us.yimg.yimg.i1.yimg.yimg.i1.gif" width=18 height=18 border=0> :">blushing <img src="http://us.gif" width=18 height=18 border=0> :-*kiss <img src="http://us.com/us..yimg..i1.i1.i1.com/i/mesg/emoticons7/11.yimg.gif" width=18 height=18 border=0> :-Osurprise <img src="http://us.i1.com/i/mesg/emoticons7/9.com/i/mesg/emoticons7/5.yimg.com/us.yimg.com/i/mesg/emoticons7/8.yimg.yimg.com/us.com/us.gif" width=42 height=18 border=0> :-/confused <img src="http://us.i1.yimg.i1.yimg.

yimg.yimg.i1.gif" width=18 height=18 border=0> #:-Swhew! <img src="http://us.yimg.i1.yimg.com/i/mesg/emoticons7/24.i1.com/i/mesg/emoticons7/17.i1.gif" width=18 height=18 border=0> :-Sworried <img src="http://us.i1.com/i/mesg/emoticons7/21.yimg.yimg.yimg.i1.gif" width=22 height=18 border=0> :))laughing <img src="http://us.gif" width=18 height=18 border=0> :straight face <img src="http://us.com/us.i1.com/i/mesg/emoticons7/19.com/i/mesg/emoticons7/18.i1.yimg.com/us.yimg.yimg.yimg.yimg.yimg.com/us.com/us.yimg.com/us.com/i/mesg/emoticons7/15.gif" width=18 height=18 border=0> :((crying <img src="http://us.com/i/mesg/emoticons7/16.gif" width=30 height=18 border=0> O:-)angel .com/us.com/us.i1.yimg.com/us.yimg.gif" width=18 height=18 border=0> /:)raised eyebrow <img src="http://us.yimg.com/i/mesg/emoticons7/22.com/i/mesg/emoticons7/23.com/us.com/i/mesg/emoticons7/20.gif" width=18 height=18 border=0> B-)cool <img src="http://us.yimg.gif" width=18 height=18 border=0> =))rolling on the floor <img src="http://us.i1.:>smug <img src="http://us.yimg.com/us.gif" width=34 height=18 border=0> >:)devil <img src="http://us.yimg.

yimg.com/i/mesg/emoticons7/25.yimg.yimg.yimg.com/us.yimg.yimg.gif" width=18 height=18 border=0> 3:-Ocow <img src="http://us.gif" width=18 height=18 border=0> :()monkey <img src="http://us.com/us.com/i/mesg/emoticons7/107.com/us.com/us.gif" width=18 height=18 border=0> .i1.com/i/mesg/emoticons7/26.yimg.talk to the hand <img src="http://us.yimg.com/us.i1.yimg.yimg.gif" width=21 height=18 border=0> ~:>chicken <img src="http://us.gif" width=18 height=18 border=0> :o3puppy dog eyes .yimg.i1.New! <img src="http://us.com/i/mesg/emoticons7/50.yimg.i1.yimg.gif" width=31 height=18 border=0> :-??I don't know <img src="http://us.<img src="http://us.i1.com/i/mesg/emoticons7/49.yimg.i1.com/i/mesg/emoticons7/52.com/us.gif" width=40 height=18 border=0> %-(not listening <img src="http://us.yimg.com/us.i1.com/i/mesg/emoticons7/106.com/us.yimg.i1.yimg.yimg.yimg.gif" width=52 height=18 border=0> :@)pig <img src="http://us.com/us.yimg.com/i/mesg/emoticons7/51.i1.com/i/mesg/emoticons7/108.com/us.com/i/mesg/emoticons7/27.gif" width=24 height=18 border=0> =.i1.gif" width=30 height=18 border=0> :-Bnerd <img src="http://us.

yimg.gif" width=20 height=18 border=0> >-)alien <img src="http://us.com/i/mesg/emoticons7/60.com/us.com/i/mesg/emoticons7/53.yimg.com/i/mesg/emoticons7/59.com/us.com/us.com/us.com/i/mesg/emoticons7/54.yimg.yimg.com/us.gif" width=18 height=18 border=0> [-O<praying .gif" width=18 height=18 border=0> *-:)idea <img src="http://us.yimg.i1.com/i/mesg/emoticons7/57.i1.yimg.i1.com/us.gif" width=30 height=18 border=0> 8-Xskull <img src="http://us.i1.yimg.com/i/mesg/emoticons7/55.com/us.yimg.yimg.yimg.com/i/mesg/emoticons7/56.yimg.i1.com/i/mesg/emoticons7/61.com/us.yimg.com/i/mesg/emoticons7/58.i1.yimg.yimg.i1.com/us.-rose <img src="http://us.yimg.yimg.gif" width=18 height=18 border=0> =:)bug <img src="http://us.i1.gif" width=18 height=18 border=0> %%-good luck <img src="http://us.yimg.gif" width=17 height=18 border=0> ~O)coffee <img src="http://us.yimg.i1.@}.yimg.gif" width=18 height=18 border=0> **==flag <img src="http://us.com/us.i1.com/i/mesg/emoticons7/62.gif" width=25 height=18 border=0> (~~)pumpkin <img src="http://us.yimg.gif" width=18 height=18 border=0> :-Lfrustrated <img src="http://us.

i1.yimg.yimg.yimg.com/i/mesg/emoticons7/68.i1.com/i/mesg/emoticons7/69.gif" width=22 height=18 border=0> b-(feeling beat up <img src="http://us.yimg.gif" width=18 height=18 border=0> :-@chatterbox <img src="http://us.gif" width=36 height=18 border=0> ^:)^not worthy <img src="http://us.com/i/mesg/emoticons7/71.i1.com/us.i1.com/i/mesg/emoticons7/70.i1.yimg.yimg.yimg.com/i/mesg/emoticons7/77.gif" width=18 height=18 border=0> :)>-peace sign <img src="http://us.com/us.yimg.com/i/mesg/emoticons7/76.yimg.yimg.yimg.yimg.yimg.yimg.i1.yimg.i1.<img src="http://us.com/us.yimg.com/us.com/us.yimg.i1.yimg.gif" width=26 height=18 border=0> >:/bring it on <img src="http://us.com/us.com/i/mesg/emoticons7/66.i1.))hee hee <img src="http://us.gif" width=23 height=18 border=0> .com/i/mesg/emoticons7/63.yimg.com/us.i1.yimg.gif" width=22 height=18 border=0> [-Xshame on you <img src="http://us.com/i/mesg/emoticons7/64.gif" width=18 height=18 border=0> :-"whistling <img src="http://us.i1.gif" .com/us.com/us.com/i/mesg/emoticons7/67.com/i/mesg/emoticons7/65.com/us.yimg.gif" width=22 height=18 border=0> \:D/dancing <img src="http://us.yimg.com/us.gif" width=18 height=18 border=0> $-)money eyes <img src="http://us.

kalo yang ini engga nyopet .gif" width=18 height=18 border=0> o->hiro <img src="http://us.i1.yimg.yimg.yimg.yimg.com/i/mesg/emoticons7/74. .i1.yimg.com/us.yimg.gif" width=18 height=18 border=0> Artikel Tambahan : ada lagi nih .gif" width=18 height=18 border=0> o=>billy <img src="http://us.width=32 height=18 border=0> :-joh go on <img src="http://us.com/i/mesg/emoticons7/75.com/i/mesg/emoticons7/78.com/i/mesg/emoticons7/79..com/us.yimg..com/us.hehehe.yimg.yimg..yimg.i1.gif" width=18 height=18 border=0> o-+april <img src="http://us.com/us.com/i/mesg/emoticons7/73.yimg.com/i/mesg/emoticons7/72.gif" width=26 height=18 border=0> (*)star <img src="http://us.i1. lihat yaa kalo engga nanti aldi chidori nih .gif" width=18 height=18 border=0> (%)yin yang <img src="http://us.com/us.i1.i1.yimg.com/us..

<img border="0" src="http://pic60.picturetrail.com/VOL1698/12134860/21582353/355343104.jpg " title="Click to get more." /></img>

<img border="0" src="http://onepieceindo.files.wordpress.com/2009/10/luffyattack.gif?w=200&h=100" title="Click to get more." /></img>

<img border="0" src="http://onepieceindo.files.wordpress.com/2009/10/zoroattack.gif?w=150&h=100" title="Click to get more." /></img>

<img border="0" src="http://onepieceindo.files.wordpress.com/2009/10/sanji.gif?w=120&h=76" title="Click to get more." /></img>

<img border="0" src="http://onepieceindo.files.wordpress.com/2009/10/1_121.gif?w=100&h=150" title="Click to get more." /></img>

<img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Akatsuki%20gif/DeidaraBird.gif " title="Click to get more." /></img>

<img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/Kakashi.gif " title="Click to get more." /></img>

untuk kalian yang ingin melihat animasi-animasi seperti di atas lebih banyak lagi .. silakan klik disini nanti kalian copypaste saja .. sebagai contoh :

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://www.zengbogel.blogspot.com" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Akatsuki%20gif/DeidaraBird.g if " title="Click to get more." /></a><small><center><a href="http://www.zengbogel.blogspot.com" target="_blank">Widget Animasi</a></center></small></div>

sekedar mengingatkan perhatikan tulisan yang berwarna merah .. kalian copy paste alamatalamat animasi tersebut yaa ..

oke deh kalo kalian masih bingung juga cara membuat link dengan animasi di atas, biar aldi kasih contoh : langsung di klik aja yaa ...

dan ini scriptnya <a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank"><img src="http://i446.photobucket.com/albums/qq182/kisot06/Akatsuki%20gif/DeidaraBird.gif" width="200" height="150" /></a>

....kalian dapat mengatur tinggi gambar dan panjang gambar dengan mengubah angka pada tulisan yang berwarna orange pada contoh di atas .. akan aldi jelaskan maksudnya . tapi gpp lah .. mungkin bagi kalian yang baru mengetahui fungsi .. bagi kalian yang ingin membuat gambar animasi lucu ada di pojok blog kalian silakan klik disini dan bagi kalian yang ingin membuat tulisan berjalan (marquee) dengan animasi silakan klik disini selamat mencoba cara membuat link | cara membuat link html ber tab baru ehmm .aldi sekedar sharing saja sama yang belum begitu tahu tentang html . width="100" => untuk mengatur panjang gambar height="100" => untuk mengatur tinggi gambar sekedar tambahan sebenarnya link ini sudah aldi berikan tadi di atas . tapi tidak apalah sekedar mengingatkan saja yaa .. judulnya aneh yaa .link html juga akan bingung kan ...fungsi link untuk yang satu ini pasti akan lucu ya kan dengan postingan aldi yang satu ini .blogspot.fungsi dari link . pembahasan yukk sebelumnya kita telah ketahui bahwa untuk membuat link itu. kita hanya membuat kode html seperti ini : <a href="www.. bagi kalian yang baru belajar html sekarang dapat belajar dengan cara klik disini atau untuk kalian yang memang tertarik dengan postingan ini silakan baca terus saja yaa . maksud aldi membuat judul postingan seperti itu adalah untuk membuat link agar membuka tab baru saat di klik..com">di sini nama link</a> ..zengbogel. bagi kalian yang sudah familiar dengan fungsi . sebelumnya aldi telah membuat postingan tentang berbagai cara untuk membuat link .. oke dechh ..

3. The first list item The second list item The third list item An unordered list:    List item List item List item oke..blogspot. sekarang kalian bisa mencobanya sendiri pada blog kalian selamat mencoba Belajar HTML | HTML List ( Daftar ) Penggunaan HTML List ( daftar ) dalam document HTML akan terlihat seperti di bawah ini : HTML Lists ( daftar ) An ordered list: 1.... oke teman . 2. taraaa di sini nama link dan untuk membuat link tersebut membuka dengan tab baru .. sekarang kita test kemampuan kita dalam hal tag html list seperti contoh di atas tersebut : An ordered list Cara membuat daftar unordered dalam sebuah dokumen HTML.coba klik dehh link nya : di sini nama link bagaimana ???? mudah kan .dan hasilnya . tinggal kita masukan saja kode html di bawah ini : target="_blank" oke sekarang mari mulai gabungkan kode html di atas dengan kode link html yang ingin kita buat . dan hasilnya akan seperti ini : <a href="www.com" target="_blank">di sini nama link</a> dan link dengan tab baru pun berhasil kita buat . An unordered list .zengbogel..

Daftar item ditandai dengan lingkaran hitam ( biasanyakecil ). dan Setiap item list dimulai dengan tag <li>.Cara membuat daftar ordered. Milk . Ordered list ditandai dengan angka. Coffee 2. Contoh : <ul> <li>Coffee</li> <li>Milk</li> </ul> maka hasilnya akan seperti dibawah ini :   Coffee Milk HTML Ordered Lists Ordered list dimulai dengan tag <ol>. Unordered Lists HTML Unordered list dimulai dengan tag <ul>. contoh : <ol> <li>Coffee</li> <li>Milk</li> </ol> maka hasilnya akan seperti dibawah ini : 1. dalam sebuah dokumen HTML. dan Setiap item List dimulai dengan tag <li>.

Nested list Menunjukkan bagaimana Anda dapat Nested List. Different types of unordered lists Menunjukkan berbagai jenis daftar unordered. dengan deskripsi dari setiap item. Tag <dl> digunakan dalam hubungannya dengan <dt> (mendefinisikan item dalam Lists) dan <dd> (menjelaskan item dalam Lists) contoh: <dl> <dt>Coffee</dt> <dd>. Nested list 2 Menunjukkan daftar nested lebih rumit. sekarang kita akan lanjut dengan contoh .black hot drink</dd> <dt>Milk</dt> <dd>. . Tag <dl> mendefinisikan definition Lists .white cold drink oke.HTML Definition Lists Sebuah definition Lists adalah daftar item.contoh di bawah ini: Different types of ordered lists Menunjukkan berbagai jenis daftar dipesan.black hot drink Milk .white cold drink</dd> </dl> maka hasilnya akan seperti dibawah ini : Coffee .

HTML Form HTML form di gunakan untuk menginput data. Dan biasanya para pembuat website membuat FORM dan di khususkan untuk para user misalnya dalam hal input data. akan tetapi anda akan membutuhkannya saat anda sudah mahir nanti . oke.. sekarang kita akan mencobanya sendiri dengan contoh . </form> HTML FORM . form login dll. mungkin untuk saat ini bagi anda yang baru berkecimpung di dunia website membuat form html belum begitu berpengaruh besar.Definition list Menunjukkan daftar definisi.contoh di bawah ini: Create text fields cara membuat form text Create password field cara membuat form password (kita akan melihat lebih banyak contoh pada bagian bawah artikel ini) HTML FORM html form mempunyai tag <form> contoh <form> . untuk itu ikuti terus tutorial belajar html di bab-bab selanjutnya :) oke.ELEMEN INPUT . masukan element tag . form html akan sangat berguna sekali untuk anda yang ingin membuat website dinamis. kita akan lanjut ke tutorial belajar HTML selanjutnya . Belajar HTML .

metode teg input yang di gunakan akan terlihat seperti ini <input type ="text"/> contoh: <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /> </form> Maka akan terlihat seperti di bawah ini : First name: Last name: catatan: input type jenis ini hanya dapat memasukan 20 karakter . dan banyak lagi. Sebuah elemen input dapat bervariasi dalam banyak cara. tombol submit. PASSWORD FIELD Tag form pada feld password adalah <input type="password"/> contoh : <form> Password: <input type="password" name="pwd" /> </form> maka akan terlihat seperti di bawah ini : . Elemen input digunakan untuk memilih informasi pengguna. Sebuah elemen input dapat di gunakan dengan jenis teks. tombol radio. Jenis input yang paling digunakan akan di jelaskan di bawah ini : TEXT FIELDS Dalam pengimputan data dengan metode tag text. kotak centang.Unsur bentuk yang paling penting dari form adalah elemen input.tergantung pada jenis atribut. sandi.

laki<br/> <input type="radio" name="sex" value="female" /> perempuan </form> maka akan terlihat seperti di bawah ini : laki .laki perempuan CHECK BOX tag pada check box ini terlihat seperti ini <input type="checkbox"/> contoh : <form> <input type="checkbox" name="vehicle" value="Bike" /> saya manusia<br /> <input type="checkbox" name="vehicle" value="Car" /> saya laki-laki </form> maka akan terlihat seperti di bawah ini : saya manusia saya laki-laki SUBMIT BUTTON .Password: catatan : semua karakter yang di input ke field password akan tidak terlihat atau hanya berbentuk ( hitam bulat) RADIO BUTTON tag pada radio button terlihat seperti ini <input type="radio"/> contoh: <form> <input type="radio" name="sex" value="male" /> laki .

textarea Cara membuat kontrol multi-baris teks masukan.tag submit akan terlihat seperti ini <input type="submit"/> Sebuah tombol submit digunakan untuk mengirim data formulir ke server. (kita akan belajar submit fungsi submit button dalam bab-bab selanjutnya) contoh: <form name="input" action="html_form_action. Daftar drop-down dengan nilai pra-dipilih Cara membuat daftar drop-down dengan nilai pra-dipilih. checkbox Cara membuat kotak centang. Dalam sebuaharea teks-pengguna dapat menulis jumlah yang tidak terbataskarakter.File didefinisikan dalam atribut action. biasanya akan melakukan sesuatu dengan input yang diterima. Seorang pengguna dapat memilih atau tidak memilih kotak centang. sekarang anda dapat melihat kumpulan contoh . .contoh tag input : tombol radio ( radio button ) Cara membuat tombol radio.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> maka akan terlihat seperti di bawah ini: Username: Submit oke. Data dikirim ke halaman tertentu dalam atribut action form.contoh tag form html di bawah ini : contoh . Sederhana daftar drop-down Cara membuat daftar drop-down yang sederhana.

Kirim e-mail dari formulir Bagaimana untuk mengirim e-mail dari formulir (form). kita akan melihat contoh langsung dari html frames : vertikal frameset Cara membuat frameset dengan tiga dokumen vertikal yang berbeda. Belajar HTML . Formulir dengan tombol radio Bagaimana menciptakan sebuah form dengan dua tombol radio. (Anda dapat menemukan lebih banyak contoh di bagian bawah halaman ini) . Formulir dengan kotak centang (chexkboxes) Bagaimana menciptakan sebuah form dengan dua kotak centang dan tombol submit. oke.HTML Frames Dengan Frames beberapa jendela halaman web dapat di tampilkan dalam satu halaman saja .. Formulir dengan bidang teks dan sebuah tombol submit Bagaimana menciptakan sebuah form dengan dua bidang teksdan sebuah tombol submit. frameset horizontal Cara membuat frameset horizontal dengan tiga dokumen yang berbeda.HTML Frames Belajar HTML . kita akan lanjut ke tutorial belajar html selajutnya .Membuat tombol Bagaimana membuat tombol.contoh tag form Fieldset sekitar form-data Cara membuat perbatasan tepi di sekitar elemen dalam formulir. oke. contoh .dan sebuah tombol submit..

Elemen frameset menyatakan BERAPA BANYAK kolom atau baris yang akan ada dalam rangkaian frame.htm" /> <frame src="frame_b. Pada contoh di bawah kita memiliki sebuah frameset dengan dua kolom.htm" dimasukkan ke dalam kolom kedua.htm" dimasukkan ke dalam kolom pertama.75%"> <frame src="frame_a. dan setiap frame adalah independen dari yang lain. contoh : <frameset cols="25%. (Mencetak seluruh halaman sulit). Pengembang web harus melacak semua dokumen HTML yang lebih. Anda dapat menampilkan lebih dari satu dokumen HTML di jendela browser yang sama. Dokumen"frame_a.Setiap elemen frameset dapat memegang dokumen yang terpisah. dan berapa banyak persentase / pixel dari ruang yang akan menempati masing-masing frame. Kelemahan dari menggunakan frame adalah: Frame kemungkinan tidak akan didukung pada versi mendatang dari HTML Frame sulit untuk digunakan. Kolom kedua adalah set ke 75% dari lebar jendela browser. Elemen HTML frame Tag <frame> mendefinisikan satu jendela tertentu (frame) dalam sebuah frameset. Elemen HTML frameset Elemen frameset memegang satu atau lebih elemen frame. dan dokumen "frame_b. Setiap dokumen HTML disebut sebuah frame.HTML Frame Dengan frame. Kolom pertama diatur ke 25% dari lebar jendela browser.htm" /> </frameset> .

Gerakkan mouse di atasbatas antara frame dan melihat bahwa Anda tidak dapat memindahkan perbatasan. Frame keduamenunjukkan dokumen terkait. Langsung ke bagian tertentu dalam bingkai Dua frame. Nested framesets Bagaimana menciptakan sebuah frameset dengan tigadokumen. navigasi frame Bagaimana untuk membuat frame navigasi. Frameset dengan noresize = "noresize" Cara menggunakan atribut noresize. Frame navigasi (content. dengan asterisk (cols = "25%.htm".htm" menargetkan ="showframe"> Bingkai b</ a> <br> <a href ="frame_c.Catatan: Ukuran kolom frameset juga dapat diatur dalam pixel(cols = "200.htm) sebagai target. .htm" berisi tiga link. File yang bernama "tryhtml_contents.htm "target =" showframe "> link dengan Anchor </ a>.htm" terlihat seperti ini: <a href="link.500"). dan salah satu kolom dapat diatur dengan menggunakan ruang yang tersisa. Salah satu link dalam framenavigasi terkait dengan bagian yang ditentukan dalam file target. Kode sumberdari link: <a href ="frame_a.htm) ke kiri berisi daftar linkdengan frame kedua (link. kita langsung praktekan dengan contoh .htm" menargetkan ="showframe"> Bingkai c</ a> Frame kedua akan menunjukkan dokumen terkait. oke.*").htm" menargetkan ="showframe"> Frame </ a> <br> <a href ="frame_b. Frame navigasi berisi daftar link dengan frame kedua sebagai target. Bagian yang ditentukan adalah dibuat denganname="C10"> <a di file "link. Langsung ke bagian tertentu dengan bingkai navigasi Dua frame. dan bagaimana campuran mereka dalam baris dankolom. Salah satu frame memiliki sumber ke bagian tertentudalam sebuah file.contoh di bawah ini : contoh Cara menggunakan tag <noframes> Cara menggunakan tag <noframes> (untuk browser yang tidak mendukung frame).Kode HTML dalam file "content.htm" sasaran ="showframe"> Tautan tanpa Anchor </ a><br> <a href = "# C10 link.

.. kita lihat contoh penggunaan tag iframe pada document HTML. kita akan lanjut tutorial panduan belajar html untuk pemula selanjutnya .Penggunaan tag iframes pada HTML oke.oke.htm" width="200" height="200"></iframe> Cobalah Sendiri » Menghilangkan Garis Tepi ( border) pada iframe Untuk menghilangkan garis tepi (border) pada iframe tag yang di perlukan adalah frameborder dan di atur dengan ketebalan "0" . syntax sederhana dari iframe adalah sebagai berikut : <iframe src=" alamat url "></iframe> Mengatur attribut lebar dan panjang iframe Attribut lebar dan panjang iframe dapat di atur dengan attribut width dan height Nilai suatu attribut dapat di tentukan dengan pixel (secara default akan di tentukan dengan pixel walaupun tidak di terapkan ) atau persen "%" contoh (80%) contoh <iframe src="demo_iframe. Belajar HTML .HTML Iframes Belajar HTML .

htm" name="iframe_a"></iframe> <p><a href="http://www.w3schools. Atribut target link harus mengacu pada nama atribut iframe: Contoh <iframe src="demo_iframe.0. kita akan lanjut ke tutorial berikutnya .htm" frameborder="0"></iframe> Cobalah Sendiri » Menggunakan iframe sebagai Sasaran untuk sebuah Link Iframe dapat digunakan sebagai kerangka target untuk link.0) rgb(0..0) . Berikut adalah contoh kode HTML warna : Contoh Warna Color #000000 #FF0000 #00FF00 #0000FF #FFFF00 Color HEX Color RGB rgb(0..0) rgb(255.255) rgb(255.HTML Warna Dalam HTML kita dapat membuat berbagai warna sesuai dengan keinginan kita .255.0.255.com" target="iframe_a">W3Schools.com</a></p> Cobalah Sendiri » oke..0. Belajar HTML .Contoh <iframe src="demo_iframe..0) rgb(0.

192) rgb(200.136.88) rgb(96.64.24) rgb(32.16) rgb(24.8.80) rgb(88.240) .40) rgb(48.64) rgb(72.216.152.kode HTML untuk warna : Gray Shades Color HEX #000000 #080808 #101010 #181818 #202020 #282828 #303030 #383838 #404040 #484848 #505050 #585858 #606060 #686868 #707070 #787878 #808080 #888888 #909090 #989898 #A0A0A0 #A8A8A8 #B0B0B0 #B8B8B8 #C0C0C0 #C8C8C8 #D0D0D0 #D8D8D8 #E0E0E0 #E8E8E8 #F0F0F0 Color RGB rgb(0.112.152) rgb(160.160.32.24.232.184.184) rgb(192.8) rgb(16.208) rgb(216.32) rgb(40.104) rgb(112.0.80.176.120) rgb(128.0) rgb(8.144.232) rgb(240.224.128.160) rgb(168.72) rgb(80.255) rgb(255.240.255) rgb(192.192) rgb(255.255.144) rgb(152.255) Cobalah Sendiri » Masih banyak lagi kode .255.40.192.168) rgb(176.72.48) rgb(56.208.88.168.48.56) rgb(64.104.200) rgb(208.136) rgb(144.224) rgb(232.16.96.128) rgb(136.56.0.96) rgb(104.176) rgb(184.192.120.216) rgb(224.#00FFFF #FF00FF #C0C0C0 #FFFFFF rgb(0.112) rgb(120.200.

248.255) 000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF Anda pun dapat menentukan sendiri kode HTML warna anda : .#F8F8F8 #FFFFFF rgb(248.255.248) rgb(255.

Belajar HTML .Tampilan (Layout) Dalam proses belajar HTML. kita akan lanjut ke tutorial belajar HTML untuk pemula selanjutnya .oke. 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 : .. proese membuat tampilan pada sebuah halaman (layout) web/blog adalah sangat penting hukumnya bagi anda yang sedang belajar dalam pembuatan sebuah web/blog..

contoh <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500."> Copyright © 2011 W3Schools.textalign:top.width:100px.width:400px.com</td> </tr> </table> </body> </html> Cobalah Sendiri » Maka akan tampak seperti di bawah ini : .contoh ini di ambil dari w3school.text-align:top."> <b>Menu</b><br /> HTML<br /> CSS<br /> JavaScript </td> <td style="background-color:#EEEEEE."> <h1>Main Title of Web Page</h1> </td> </tr> <tr valign="top"> <td style="background-color:#FFD700.text-align:center.height:200px."> Content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500.

">Main Title of Web Page</h1></div> <div id="menu" style="backgroundcolor:#FFD700.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."> <b>Menu</b><br /> HTML<br /> CSS<br /> JavaScript</div> . 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.width:100px."> <h1 style="margin-bottom:0.height:200px.float:left. Contoh berikut menggunakan lima elemen div untuk membuat tata letak kolom.

 Saya sarankan setelah anda menguasai ataupun sudah familiar dengan tag-tag HTML anda sebaiknya belajar CSS terlebih dahulu. PHP .<div id="content" style="backgroundcolor:#EEEEEE.textalign:center. .height:200px.ASP dan lain sebagainya . dan kemudian baru belajar javascript dan seterusnya .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.clear:both.com Tips . namun nanti (setelah anda menguasai HTML dan CSS ) anda akan dapat mengkolaborasikannya sendiri sesuai dengan kreasi anda seperti dengan javascript.width:400px.float:left."> Content goes here</div> <div id="footer" style="background-color:#FFA500."> Copyright © 2011 W3Schools.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).

dtd"> <html> <head> <title>Title Halaman</title> </head> <body> . Tips: Biasakan Selalu menambahkan DOCTYPE ke halaman Anda. DTD menetapkan aturan untuk bahasa markup. Deklarasi DOCTYPE harus menjadi hal pertama dalam dokumen HTML. oke. Ini akan membantu browser untuk membuat halaman web/blog dengan benar! contoh Doctype berikut adalah contoh sederhana dari deklarasi doctype dengan menggunakan HTML 4.01 Transitional//EN" "http://www. Deklarasi DOCTYPE mengacu pada Document Type Definition(DTD). Belajar HTML . kita akan lanjut ke tutorial belajar HTML lanjutan untuk pemula selanjutnya .01 Transitional : (kita akan belajar deklarasi lebih dalam di bagian bawah artikel) contoh <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.. sehingga browser dapat membuat konten halaman tersebut dengan benar..org/TR/html4/loose. doctype adalah instruksi untuk web browser tentang apa versi bahasa markup halaman yang ditulis.Doctype Apa Itu Doctype ? DOCTYPE bukanlah tag HTML. sebelum tag <html>. insyaallah nanti saya akan membuat tutorial belajar CSS juga .w3.

DAN MEMPERBOLEHKAN elemen presentasional (seperti font).isi dari kontent.01 Transitional DTD ini berisi semua elemen HTML dan atributnya.. oke. Fungsi Framesets tidak diperbolehkan: berikut deklarasi doctype html 4. kita bisa lihat bahwa kita menggunakan doctype jenis HTML 4.01 Strict DTD ini berisi semua elemen HTML dan beserta atributnya.01 Transitional//EN" "http://www.01Transitional.w3. Fungsi Framesets tidak diperbolehkan: berikut deklarasi doctype HTML 4.01 Tranditional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www..org/TR/html4/strict.dtd"> HTML 4. kita akan membahasnya lebih dalam kali ini.. </body> </html> Pada contoh penggunaan deklarasi doctype di atas.dtd"> HTML 4..01 Framset .. lihat contoh-contoh dan fungsi dari doctype yang dapat di gunakan pada sebuah halaman berikut ini : HTML 4.w3. namun MEMUNGKINKAN penggunaan Frameset : berikut deklarasi doctype HTML 4.01 Transitional. tapi TIDAK MEMPERBOLEHKAN presentasional (seperti font dan center).org/TR/html4/loose.01 Strict : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset Ini sama dengan DTD HTML 4.

Belajar HTML .. Link ke style sheet eksternal ~ klik Cara menggunakan tag <link> untuk link ke style sheet eksternal. dengan atribut style. bahwa HTML dan Styles CSS tidak dapat di pisahkan dimana kedua document ini saling berkegantungan satu sama lainnya.dtd"> oke..01 Frameset//EN" "http://www. Tag <link> masuk ke dalam bagian <head>: . dan waktunya untuk lanjut . Membuat Link yang tidak digaris bawahi ~ klik Bagaimana membuat link yang tidak digarisbawahi.w3. Anda dapat mengubah tampilan seluruh situs Web dengan hanya mengubah satu file.Eksternal Style Sheet eksternal style sheet sangat cocok ketika style CSS akan diterapkan pada banyak halaman. kali ini kita akan membahas sedikit tentang penggabungan style CSS dan HTML pada sebuah halaman web/blog. Bagaimana cara menambahkan fungsi styles CSS Ada tiga cara untuk memasukan fungsi style css ke document HTML :    External style sheet Internal style sheet Inline styles .org/TR/html4/frameset. Mari kita lihat contoh simpel berikut bersama : Menggunakan Styles dalam HTML ~ klik Bagaimana menambah informasi Styles ke bagian <head>.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.HTML dan Styles (CSS) Seperti kita ketahui bersama pada tutorial sebelumnya. Setiap halaman harus mempunyai link ke style sheet menggunakan tag <link>. oke. Dengan style sheet eksternal. sekarang kita telah memahami fungsi dari DOCTYPE.

} </style> </head> . seperti ini: <head> <style type="text/css"> body {background-color:yellow.} p {color:blue.css" /> </head> . contoh : hosting blogspot seperti yang saya gunakan Dalam hosting blogspot. Contoh di bawah ini menunjukkan bagaimana untuk mengubah warna teks dan margin kiri dari sebuah paragraf : <p style="color:blue.">This is a paragraph. .Internal style sheet style sheet internal dapat digunakan jika satu dokumen tunggal memiliki gaya yang unik. dengan menggunakan tag <style>.Inline styles Inline Styles adalah sebuah style yang langung di letakan pada sabuah dokument tunggal .margin-left:20px.contoh : <head> <link rel="stylesheet" type="text/css" href="mystyle.</p> Catatan !!! penggunaan Style Eksternal Style Sheet tidak dapat di gunakan jika anda menggunakan hosting yang hanya menggunakan template dalam pembuatan halamannya . untuk mengedit style CSS anda dapat mengedit ataupun membuatnya di atas kode ]]></b:skin> . Gaya internal didefinisikan dalam bagian <head> dari sebuah halaman HTML.

+ oke. kita dah pun selesai pembahasan html .insyaallah nanti saya akan membuat juga tutorial belajar CSS untuk pemula .

CSS dapat digunkana untuk meringkas pekerjaan. CSS mempunyai kode kode untuk mendesain tampilan html kalian ke bentuk yang berkualitas. silakan untuk berkenalan dulu yaa . Contoh singkat CSS <html> <head> <style type="text/css"> body { background-color:#d0e4fe. di dalam proses pembelajaran css hal yang pertama harus kalian pahami atau setidaknya familiar dengan yang namanya html. text-align:center.dan tentunya kalian pun akan sedikit menggunakan kode kode pada blog kalian . Sebelum kalian lanjut untuk belajar CSS. jika kalian ingin belajar html silakan klik disini atau baca artikel-artikel yang berhubungan dengan html .selain itu css juga dapat meringkas kode-kode yang di gunakan pada template kalian . belajar lah dulu html . jadi intinya jika kalian mau belajar css.Dasar kode CSS | Belajar CSS | Penjelasan CSS Sebelumnya aldi ingin memberi arahan kepada kalian yang ingin belajar CSS.. Css sendiri berfungsi untuk mendesain blog kalian agar nampak lebih indah dan berkualitas. } h2 { color:orange.     CSS adalah singkatan dari Cascading Style Sheets CSS digunakan untuk mendesain tampilan dari html. } p .

.kode yang berbeda .. jawabannya adalah salah besar ..kode css tidak muncul kedalam tampilan. namanya juga belajar pasti membutuhkan proses bukan ??? . h2 dan . font-size:20px.. heheheheh . loh kok salah besar . atau mungkin di antara kalian masih ada yang ngangguk ngangguk seolah .. sersan aja yaa ( serius tapi santai ) Oke kita lanjut ke tahap selanjutnya . mungkin di antara kalian masih ada yang belum paham yaa . "untuk apa membuat kode sebanyak itu kalau hanya untuk membuat tampilan sesingkat itu ??? " hemmm ...P .. jadi jangan terlalu di bawa serius dan juga terlalu santai yaaa ..olah sudah paham .. Mungkin bagi kalian yang sudah terbiasa mengedit kode . nahhhh ternyata kode kode tersebut bisa juga di gunakan ataupun di masukan ke dalam kode kode html yang lainnya untuk kalian desain sama seperti kode kode . jadi intinya css adalah pendukung styles dari html.. } </style> </head> <body> <h2>Contoh CSS</h2> <p>Di sini letak tulisan kamu...{ font-family:"Times New Roman"..mempunyai kode .</p> </body> </html> Dan akan menghasilkan seperti di bawah ini : Contoh CSS Disini letak tulisan kamu Dari contoh di atas dapat di simpulkan bahwa kode . dalam kode kode css di atas bisa kalian lihat bahwa body . kalau di antara kalian ada yang berpikir seperti itu .!!!! jadi begini .kode html akan merasa aneh bukan ..

kode css dapat di gunakan untuk banyak desain kode kode html ..kode yang di pakai untuk nantinya dapat di terapkan pada html .hihihihihi .... itu BERBEDA dengan kode-kode html ... .sebagai contoh ( body." bagaimana ????? udah paham belumm ???? oke deh aldi asumsikan kalian sudah paham . capek aldi nulisnya" ) Declaration :  bisa kita lihat dari contoh di atas bahwa di dalam declaration terdapat pula properti properti dan juga value . " jadi intinya kode .. untuk lebih jelasnya pada artikel selanjutnya akan aldi postingkan berbagai macam fungsi kode kdoe css nya .. lihat gambar agar lebih jelas ..a.. contoh gambar itu aldi copet dari w3school ..header.yang di ringkas dalam satu paket dengan awalan pembuka "{" dan di tutup dengan "}" ... h1... abis susah nyari gambar yang serupa .. ayo lanjut ke tahap selanjutnya .. dapat di simpulkan bahwa : selector :  simbol kode . di dalam css terdapat selector dan declarations . dan lain sebagainya .. karenatidak mungkin untuk menjelaskan semua kode kode css hanya dalam 1 postingan "banyak banget broo .h2.outerwrapper. penulisan kode css ( SYNTAX ) dalam penulisan kode css. dari contoh gambar di atas ...jadi intinya declaration itu adalah kumpulan dari properti dan juga value .h3. aihhh kok ga ngerti ngerti sii ...html yang telah kalian desain sebelumnya .. pusing deh . gmana ??? masih belum ngerti .

/*Di sini tulisan yang tidak terbaca */ color:black. } huh .nilai dari property seperi yang telah aldi jelaskan tadi sebelumnya .. Value :  Value adalah nilai . dalam setiap properti memiliki Value ( nilai )..... contoh /*Disini tulisan comment*/ p { text-align:center. ID di lambangkan dengan simbol "#" ( pager ) ID di tulis ke html / body dengan style "<div id="nama_selector_anda">" dan di tutup dengan kode </div> . weeee heheheheheheh . oke lanjut . . mau ???? fungsi ID dan CLASS pada CSS Fungsi ID :    ID di gunakan untuk style elemen tunggal yang unik dan biasanya mempunyai banyak element-element lain di dalamnya. aihhh .untuk mendesain html sesuai ke butuhan blog / web kalian .atribut style yang dapat kalian ubah .... beli donkk . css comment ( tulisan yang tidak terbaca oleh mesin ) atau biasa di sebut comment . aldi ngopi dulu yaa .. untuk menambahkan tulisan coment hal yang harus anda lakukan adalah menambahkan kode "/*" pada awal kata dan di akhiri dengan kode "*/" .Property :  proeprty adalah atribut .. capek juga yaa ngetik .. font-family:arial.

... Fungsi CLASS :      Class digunakan untuk menentukan style pada sekelompok element Class biasanya terdapat di dalam selector ID Class memungkinkan kalian untuk menetapkan style tertentu untuk setiap element html dengan banyak class yang sama .} . margin :0px.} jika kalian menggunakan class selector dalam menggunakan css .untuk penulisan pada html / body menjadi seperti di bawah ini : <div id="namaselector"> dan di tutup </div> ingat !! di atas hanya contoh ." ( titik ) lihat contoh di bawah untuk lebih jelasnya : .. kalian juga dapat langsung menambahkan kode html khusus untuk menambahkan kode css ke dalamnya ..center {text-align:center. akan aldi tambahkan kode html h1 agar letaknya menjadi di tengah ( di tengah karena css class di atas menggunakan center .. } Dari contoh di atas dapat di simpulkan bahwa pemakaian ID dengan selector "namaselector" . color : red. p. untuk penjelasan ini akan aldi jelaskan pada postingan selanjutnya ) hasil penggabungan kode di atas dengan h1 . contoh singkat ID #namaselector { text-align : center. asalkan sesuai ketentuan . untuk isi dari "namaselector" adalah isi dari berbagai macam kodekode yang kalian gunakan dalam membangun web/blog kalian sendiri .center {text-align:center. background : #ffffff. padding:10px.. jika kalian menggunkan kode css lain juga bisa . dari contoh di atas . Class di lambangkan dengan simbol ".

. capekk brooo . sekarang cuma bisa ngangguk . untuk tutorial meletakan kode css dengan 3 cara tersebut .. bagaimana ???? udah ngudeng belumm . semua kode css itu terdapat setelah kode "<head>" dan sebelum kode "</head>"...tutorial mengenai CSS di atas dapat berguna yaa ... oke kita lanjut ..kode di atas...ngagguk aja yaaa . . untuk peletakan kode css secara lengkap ... . External style sheet 2 .hehehehehehhehe .. 1 .aihhh kalo sampe ke jadian kaya begitu bisa kacau urusannya ini . jangan .... mudah .. Letak kode CSS | Belajar CSS . sebenarnya ada 3 cara dalam peletakannya loh . Internal style sheet 3 ... kalian yang telah membaca tutorial panjang di atas .. oke deh mungkin di antara kalian jika memang benar masih ada yang belum tahu di mana letak kode .... . sekarang biar aldi kasih tahu . sabar aja yaaa semua butuh proses ... akan tetapi biar lebih jelasnya .. Inline style aduhhhh capekk aja yaa .Maka hasil dari kode html untuk P akan menjadi di tengah .jangan belum tahu lagi dimana letak kode kode css pada blog / web di tempatkan .mudahan tutorial .kode css di letakan . aldi jelaskan pada tutorial css berikutnya saja yaa ... semoga bermanfaat .. lihat tutorial di bawah : catatan kalau aldi sendiri biasa meletakan kode CSS itu tepat di atas kode "]]></b:skin>" . pasti bagi kalian yang baru pertama kali mendengar kode ....

lihat tutorial belajar css di bawah ini :. bagaimana tidak jika kalian ingin belajar css tentunya kalian pun harus tahu cara meletakan kode-kode css itu pada template ..dalam hal ini kalian bagaikan perahu tanpa dayung . langsung aja yuk belajar css . Mungkin di antara kalian ada yang sudah pernah membaca tutorial belajar css.mungkin di antara kalian yang sudah pernah membaca tutorial-tutorial tentang belajar css akan familiar dengan postingan aldi kali ini.. kalian mau tahu . walaupun mereka secara praktek sudah paham. yaitu kalian hanya berlayar tanpa bisa di kendalikan . hehehe ( gak jelas ) Padahal jika kalian sudah mengerti ataupun sudah pernah belajar kode css pastinya kalian mengertikan dengan penempatan kode-kode css pada template blog. jika kalian sudah membaca tutorial belajar css pada postingan yang pertama.Inline style . External style sheet Pertama-tama mari kita belajar meletakan kode css dengan cara External style sheet . beneran pengen tahu .apa ...maksudnya apa ya???? .Menerus kan postingan aldi sebelumya. yaa itulah langkah pertama untuk kalian dalam belajar css... mari kita lanjut . dan pastinya kan sudah tahu dengan kata-kata External style sheet -Internal style sheet . meletakan css . pastinyakan kalian sudah paham.??? jadi begini : . Tutorial belajar CSS sebelum lanjut aldi ingin mengingatkan jika kalian belum membaca postingan sebelumnya tentang langkah pertama belajar css silakan klik disini langkah pertama belajar css . akan tetapi masih ada saja kok yang tidak tahu dengan kata-kata tersebut . Pada kesempatan kali ini aldi akan menjelaskan kepada kalian belajar css dalam hal "dimana meletakan kode-kode css" pada template blog . oke deh kok aldi jadi muter-muter gini yaa . hehehe ..nah iya begitu deh pokonya . kebanyakan para blogger mania tidak tahu dengan kata-kata tersebut.

jadi cara untuk menggunakan fungsi External style sheet css ini. ??? jadi intinya adalah seperti yang telah aldi sampaikan tadi sebelumnya bahwa penempatan kode css dengan sistem External style sheet ini kalian dapat mengubah satu buah page halaman dengan menggunakan kode css tentunya ... kode html hanya berada setelah kode <body> dan di akhiri dengan kode </body> . kira-kira adalah sama dengan cara menggunakan penempatan kode css yang seperti biasa kalian lakukan untuk mengedit kode-kode css pada template kalian untuk lebih memperindah tampilan website atau blog kalian ..aldi rasa cukup untuk belajar sistem penempatan kode css dengan cara external style sheet nya . untuk menggunakan fungsi letak External style sheet css pada blog template kalian adalah dengan memanfaatkan link external pada page halaman kalian . jadi intinnya dengan menggunakan cara penempatan kode css ini adalah hanya satu halaman saja yang akan kalian ubah tampilan akan tetapi kalian pun dapat mengubah dua tiga bahkan lebih dengan cara penempatan kode css ini .css" /> </head> Dari contoh penempatan kode css di atas mungkin belumlah begitu jelas.} hr {color:sienna.untuk tutorial belajar css kali ini intinya adalah kalian letakan kode <link> setelah kode <head> dan sebelum kode </head> .} body {background-image:url("images/back40. yaa seperti itulah . . akan tetapi kelebihan menggunakan fungsi External style sheet ini adalah kalian dapat menerapkan fungsi css tersebut hanya pada satu page halaman . udah paham belum .kelebihan menggunakan external style sheet ???? . akan tetapi inti dari letak kode css dengan menggunakan cara External style sheet ini. Cara menggunakan penempatan External style sheet css ini hal perlu kalian tambahkan adalah kode <link> pada bagian header template . pada dasarnya kode css itu tidak lah berisi kode-kode html. untuk lebih jelasnya seperti inilah kira-kira jadinya : a {color:#FFF.gif")..} a :hover {color:Navy. oke lanjut .untuk lebih jelasnya lihat contoh pem belajar an penempatan css ini: <head> <link rel="stylesheet" type="text/css" href="mystyle.} p {margin-left:20px.} Dapat dilihat bahwa penulisan kode-kode css dengan cara External style sheet ini yaitu sama dengan kode-kode css yang biasa kalian edit pada template kalian. kelebihannya adalah dengan menggunakan cara penempatan kode css dengan cara ini adalah kalian dapat mengubah satu page lembar blog kalian tanpa mengubah page lembar lainnya.

mungkin di antara kalian yang sering ngoprek-ngoprek template blog akan sering melihat kode-kdoe seperti ini bukan ??? hayooo ngaku. betul ora son . jadi dalam menggunakan belajar sistem css internal style sheet ini kalian akan memasukan kode css yang ber type unik ke dalam kode <style>."hr" -"p" -"body" dan lain-lain .} body {background-image:url("images/back40. di dalam meletakan kode css dengan fungsi Internal Style Sheet ini . kalian harus setidaknya paham dengan kode-kode css sistem unik . berarti template blog kalian telah menggunakan sistem penempatan kode css dengan cara ini . Dalam peletakan kode css dengan sistem Internal style sheet ini adalah kalian harus menaruhnya dengan kode <style> dan di akhiri dengan kode </style> dan peletakannya pun berada setelah kode <head> dan sebelum kode </head>.gif"). apa itu penempatan kode css dengan fungsi Internal Style Sheet ??? sebenarnya penempatan kode css dengan sistem internal style sheet ini digunakan untuk dokumen tunggal yang unik.Internal Style Sheet Dalam belajar penempatan kode css selanjutnya adalah Internal Style Sheet. jadi secara otomatis loading blog akan menjadi lebih cepat di karenakan fungsi kode css yang sedikit . (Gunakan metode ini untuk menghemat !!! ) . Inline Styles Cara selanjutnya dalam belajar penempatan kode css adakah Inline style sheet. . seperti "a". lihat contoh : <head> <style type="text/css"> hr {color:sienna. emang dari sononya ) .kode yang kalian perlu tambahkan hanyalah kode <style type="text/css"> dan di akhiri dengan kode </style>. dalam hal belajar letak kode css dengan cara ini.untuk lebih jelasnya biar kalian tidak malah jadi bingung nantinya dalam belajar css .. jika ya . akan tetapi keuntungan kalian dalam belajar penempatan kode css ini adalah penggunaanya yang hemat . dalam menggunakan cara sistem kerja inline style sheet ini kalian akan kehilangan banyak keuntungan dari style sheet dengan mencampurkan konten dengan presentasi.maksud unik di sini adalah kode css yang secara langsung memang di buat oleh si pembuat kode css ini ( kalo dalam bahasa betawi nya .} p {margin-left:20px.} </style> </head> Kita dapat lihat bersama.

mungkin kalian masih ada yang belum paham yaa . </p> Dari contoh di atas dapat kita lihat bersama..... <p style="color:blue. mungkin engga lama lagi . jadi hasil dari atribut css <p> tersebut akan menghasilkan seperti apa yang telah di terapkan di atas yaitu tulisan dengan paragraf<p> akan berwarna biru dan akan berjarak 20px ke kiri . sementara untuk padding adalah jarak antara tulisan tersebut jika atribut berupa kotak maka padding adalah jarak antara garis border dengan apa yang ada di dalam kotak tersebut sementara jika atribut berupa kotak maka fungsi margin disini adalah jarak antar kotak dengan sisi kiri ataupun sisi lainnya. bahwa atribut css<p> di gabungkan dengan properti css color dan margin .. fungsi margin dari contoh di atas maksudnya adalah margin-left yaitu jarak tulisan dengan tepi kiri atau jarak dari kiri dengan tulisan . jadi begini sistem kerja atribut di atas mungkin jika diantara kalian ada yang pernah membaca artikel / belajar kode css tentang color dan margin serta padding pastinya kalian akan paham dengan sistem kerjanya . kalian menggunakan atribut style dalam tag yang relevan.Dalam hal belajar menggunakan metode letak kode css inline style sheet .margin-left:20px"> Ini adalah paragraf. jadi begini. lihat gambar : untuk lebih jelasnya nanti akan aldi postingkan artikel tentang margin dan padding ini deh . Atribut style dapat berisi properti CSS..untuk lebih jelasnya dalam proses belajar letak css dengan metode inline style sheet ini . lihat contoh . tapi engga apa deh aldi tulis juga . Multiple style sheet .. mungkin ini sedikit melenceng dari topik pembahasan . Keterangan Penempatan Metode-Metode di atas .

bingung yaa ??? loh kok bingung . .maka atrbut properti untuk h1 akan menjadi: h1 { color:Navy. font-size:20pt. maka fungsi atributatribut yang ada di dalam internal style sheet akan di wariskan oleh metode external style sheet . text-align:right. oke deh lihat contoh aja yukk . } Dan kali ini aldi akan menggunakan atribut h1 pada internal style sheet: h1 { text-align:left.. dapat kita buktikan di sini . biar belajar lebih semangat !!! Pada contoh ini aldi menggunakan atribut h1 pada external style sheet : h1 { color:Navy..Multiple style sheet ini terjadi apabila internal style sheet berada dalam link external style sheet. jika kalian menggunakan kode css dengan metode internal style sheet dan kalian meletakannya di dalam metode external style sheet . padding:10px } Jika halaman dengan internal style sheet juga link ke external style sheet.. font-size:20pt. margin:10px.

. font-size:20pt.!!! sialnya dasar-dasar penempatan kode css tersebut adalah dasar dari pem belajar an kalian untuk menghasilkan kode tampilan html menjadi lebih menarik dengan sentuhan css .. silakan kalian lihat pada bagian atas blog ini . padding:10px } Dapat kita lihat bersama.bagaimana tidak . mungkin di antara kalian ada yang beranggapan bahwa cara-cara penempatan kode-kode di atas tersebut tidaklah penting . kalian sudah paham / familiar dengan kode-kode css akan tetapi kalian tidak paham dengan dasar-dasar penempatan kode css tersebut .. maka external style sheet akan menimpa internal style sheet untuk melihat tutorial-tutorial belajar CSS lainnya silakan kalian lihat pada bagian atas blog ini . jika kalian ingin belajar CSS sebaiknya itu dululah yang perlu kalian pahami ..??? sama seperti tutorial css . mungkin kalian benar .!! semoga bermanfaat .metode di atas . atau mungkin kalian ingin belajar html terlebih dahulu .nah itulah sistem kerja dari metode .. bahwa internal style sheet mendapatkan warisan warna"color" dari external style sheet . terimakasih . Catatan: Jika link external style sheet ditempatkan setelah internal style sheet pada <head> HTML. atau mungkin kalian SALAH BESAR.margin:10px.text-align:left..

. baiklah biar aldi kasih tahu caranya . Dalam belajar kode css untuk ubah background halaman blog hal yang perlu kalian tambahkan adalah yaa kode background donk. Sudah di baca belum ??? oke deh kalo kalian memang sudah paham . tekan F3 / ctrl+F . kalian harus cari dulu kode css "body" mungkin diantara kalian masih ada yang kebingungan mencari-cari dimana kata body tersebut di letakan ??? jika yaa . =>Mudahkan Belajar CSS .. Jika kalian ingin belajar mengubah kode css untuk background. namun bagi anda yang belum tahu sama sekali tentang css dan ingin belajar CSS. Belajar CSS : Mengubah Background Blog Belajar CSS : cara mengubah background halaman pada blog / website kalian . => jika kalian susah untuk menemukannya ..sebenarnya mudah untuk mengubah background pada halaman blog dengan menggunakan kode css..jika kalian kebingungan untuk mengubah background halaman blog kalian dengan kode css. aldi sarankan kalian untuk membaca artikel aldi sebelumnya tentang langkah awal dalam belajar CSS . kira-kira letaknya ada di daerah atas kok .. ayo lanjut . akan tetapi masalahnya banyak para blogger mania yang tidak tahu dimana meletakannya pada template mereka .. sini aldi jelaskan : Untuk mencarinya silakan kalian ikuti cara berikut ini: => login ke blog di blogger => Pilih Design/rancangan => Pilih edit HTML => kemudian cari kata "body" pada kotak edit template yang di sediakan. apa lagi untuk kalian yang sudah pernah belajar css atau setidaknya sudah familiar dengan kata css . => Sudah ketemu belum ??? kalo belum kalian bisa mencarinya secara manual juga. kemudian ketikan kata "body" .

. padding:0.. kalian dapat mengubah CSS background tersebut dengan kode warna dan juga CSS background dengan alamat gambar . sekarang kalian ubah atribut background tersebut .karena yaa memang untuk mengubah beckground halaman blog dengan kode css. . harus sama dengan template blog kalian. yaa background body lah yang harus di ubah .oke jika kalian sudah sampai ketahap yang barusan aldi jelaskan atau kalian sudah menemukan kata body pada template blog kalian . font-size: 13px. lihat contoh agar lebih jelas : Sebelumnya saya ingat kan bahwa contoh kode di bawah ini tidak lah pada dasarnya . jawabannya adalah 100% tepat . width: 100%. jika kalian menjawab alamat url background yang harus di ubah !!!. Sebelumnya ingin aldi jelaskan bahwa dalam mengubah background suatu halaman blog. yang kalian butuhkan hanya menambahkan kode css background tersebut dengan kode warna saja tanpa ... sekarang lihat kebawah sedikit dan kalian akan menemukan kata : "background " . } Langkah selanjutnya mungkin kalian pun sudah tahu bukan setelah melihat contoh di atas . biasanya kode css background tersebut telah memiliki atribut-atribut yang telah terpasang secara otomatis. color: #000000. margin: 0 auto 0. Apabila kalian ingin mengubah css background kalian dengan dengan kode warna .. font-family: Arial. oke deh sekarang kita langsung ubah saja kode css tersebut dengan background yang berbeda . karena sesungguhnya semua template blog itu berbeda-beda akan tetapi mempunyai fungsi yang sama atribut background body yang telah terpasang secara otomatis pada template kalian"kira-kira seperti ini ": body { background :#FFF url(disini alamat gambar pada blog kalian dengan asumsi "jika blog kalian telah memiliki background beralamat sebelumnya" ).

.tapi kalo menurut aldi sii tutorial belajar css untuk mengubah background body di atas sudah cukup jelas . hehhe.w3schools. setelah di edit Dapat di lihat dari contoh di atas bahwa alamat url gambar tidak ada dan hanya ada kode warna saja pada background body. Mungkin jika di antara kalian masih ada yang bingung dengan tutorial di atas. width: 100%. . margin: 0 auto 0...adanya alamat url gambar . font-family: Arial. langsung lanjutkan pembahasannya aja yukk !!! Oke jikalau diantar kalian masih ada yang tidak tahu kode-kode warna untuk di letakan pada css background body template blog kalian . karena yang namanya belajar itu butuh proses bukan !!!atau memang aldi yaa yang menerangkannya kurang jelas .oke deh agar kalian lebih mahir lagi untuk mengubah background body kalian agar tampilan blog atau website menjadi lebih menarik dengan CSS. yaa harap sabar aja yaa . Dari contoh di atas dapat di pastikan bahwa background halaman blog kalian akan berwarna putih saja di karenakan css background yang di terapkan hanya kode untuk warna putih .lihat contoh pemasangan kode css background di bawah ini untuk lebih jelasnya : body { background :#ffffff.mungkin kode-kode html warna yang aldi ambil dari alamat http://www.itu jika kalian menerapkan kode di atas pada background template blog kalian sendiri.. jadi kalian belajarnya acak-acakan dehh . } Sebelumnya aldi ingatkan sekali lagi bahwa yang di atas itu hanya contoh yaa !!! tapi kira-kira ya seperti itu lah kode css body pada template kalian .. font-size: 13px..asp dan allblogtools. mungkin di antar kalian ada saja yaaa yang belum paham .com ini dapat sedikit membantu kalian.. padding:0.com/html/html_colors. color: #000000.

setelah itu copy kode yang terletak setelah tulisan HEX : jika masih dengan cara belajar di atas. lihat ini aja deh : 000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF . .Silakan kalian arahkan saja yaa kemudian klik pada warna yang kalian sukai.

48) rgb(56.24.128) rgb(136.16.669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF Mungkin di antara kalian juga ada yang berminat untuk belajar mengganti css background dengan kode warna di antar hitam dan putih ??? .120.88) rgb(96.88.104) rgb(112.40) rgb(48.8.8) rgb(16.120) rgb(128.72) rgb(80.32) rgb(40.56.32.24) rgb(32.112) rgb(120.104.96) rgb(104.40. lihat kumpulan warna di bawah ini !!! Gray Shades Color HEX #000000 #080808 #101010 #181818 #202020 #282828 #303030 #383838 #404040 #484848 #505050 #585858 #606060 #686868 #707070 #787878 #808080 #888888 Color RGB rgb(0.64) rgb(72.0) rgb(8.136.80) rgb(88.128.16) rgb(24..80.64.56) rgb(64.136) .96.48.72.112.0.

248) rgb(255.168..224) rgb(232.hehehe ..248.208) rgb(216.240.hemm jadi malu ) Css background dari alamat url gambar Dalam hal belajar Css mungkin inilah yang paling di minati oleh para blogger mania untuk mempercantik blog mereka .168) rgb(176. hehhhehe .232..184.152.216.208. oke deh langsung aja di terangin yukk !!! Untuk mengubah background halaman blog dengan memanfaatkan css sebenarnya tidaklah jauh berbeda dengan mengubah background halaman blog dengan kode warna biasa .200.192.160) rgb(168. untuk lebih jelasnya lihat di bawah ini : => Gambar haruslah beralamat ( gambar mempunyai link ) => Jika gambar belum mempunyai link kalian bisa meng uploadnya terlebih dahulu diwww. kalian dapat mencarinya sendiri di google dengan kata kunci kode warna html .255.255) Jika menurut kalian kode-kode warna di atas tersebut masih kurang dapat membantu . Jika di lihat dari judul postingan kali ini pun. jadi ngerepotin web dan blog orang mulu nih jadinya ..akan tetapi untuk jika kalian ingin mengubah background blog kalian dengan sebuah gambar tentunya gambar tersebut haruslah mempunyai alamat url ( gambar mempunyai link ) . ( mungkin lain kali seharusnya aldi membuat postingan yang berisi mengenai kode warna sendiri yaa .160..192) rgb(200.com .240) rgb(248.152) rgb(160..144) rgb(152.216) rgb(224.144.176.200) rgb(208..photobucket.176) rgb(184.232) rgb(240. aldi rasa kalian juga membaca artikel ini yaa untuk belajar yang satu ini bukan ??? betul ora son ..#909090 #989898 #A0A0A0 #A8A8A8 #B0B0B0 #B8B8B8 #C0C0C0 #C8C8C8 #D0D0D0 #D8D8D8 #E0E0E0 #E8E8E8 #F0F0F0 #F8F8F8 #FFFFFF rgb(144.184) rgb(192.224.

( maka posisi pengambilan background akan mengambil bagian bawah ) => background-position : top .kira-kira maksudnya seperti ini : background-position adalah Letak posisis pengambilan gambar background pada saat layar halaman tampil di blog ataupun web kalian .com kalian di wajibkan untuk mendaftar terlebih dahulu di www.. color: #000000.photobucket. mungkin bagi sebagian blogger mania yang belum tahu maksud dari tulisan yang berwarna biru di atas akan bertanya-tanya maksud dari background-position tersebut bukan ???biar aldi jelaskan . margin: 0 auto 0..=> Untuk meng upload gambar ke photobucket. font-family: Arial.. yang perlu di tambahkan adalah alamat dari gambar tersebut . silakan kalian ikuti petunjuk contoh pemasangan css background halaman pada blog sebagai berikut : body { background :#FFF url(di sini alamat link gambar). font-size: 13px. ( posisi pengambilan background akan mengambil .com Jika kalian sudah mempunyai alamat gambar untuk di pasangkan pada background blog kalian. background-position:bottom .misalkan .. padding:0. width: 100%. } Bisa kita lihat bersama di dalam pemasangan css background blog dengan gambar. => background-position : bottom ..misalkan contoh alamat tersebut aldi beri tanda warna merah . ( maka posisi pengambilan background akan mengambil bagian di atas ) => background-position : left .

.) . => background-repeat : no-repeat. body { background :#FFF url(di sini alamat link gambar). yaitu dengan menambahkan kode background-repeat : no-repeat. lihat contoh aja deh !! => background-position : bottom right . dan jika kalian ingin mengambil background kalian dengan cara horizontal maka kode yang kalian cantumkan adalah kurang lebih seperti ini pada css background ( background-repeat:repeat-x. jika di antara kalian masih ada yang belum ngerti juga . misal kalian ingin hanya mengambil gambar dengan posisi pengambilan di kanan dan di atas .bagian samping kiri ) => background-position : right ...... untuk lebih jelasnya dalam belajar CSS perulangan background silakan kalian lihat di bawah ini saja yaa .). ... ( posisi background di kanan bawah ) => background-position : top right.. ( posisi background di kiri bawah ) => background-position : top left. ( untuk menghentikan perulangan pada background ) => background-repeat:repeat-x. maka atribut properti yang harus di tambahkan adalah ( right top ) . yang dimaksud background-repeat ini adalah perulangan pada background yang kalian pasang di template kalian . (posisi background di kanan atas ) => background-position : bottom left. mungkin masih bingung yaaa kalian . aldi kasih contoh penggabungannya juga dehh . (untuk mengambil background secara horizontal ) Dari semua tutorial belajar memasang background di atas dapat di gabungkan sesuai dengan kebutuhan kalian masing-masing . ( posisi pengambilan background akan mengambil bagian samping kanan ) dalam fungsi kode css background-positio ini pun dapat di gabungkan . ( posisi background di kiri atas ) Sementara untuk menghentikan perulangan pada background blog jikalau background blog tersebut lebih kecil dari pada ukuran yang template nya . jadi kira-kira seperti ini jadinya : (background-position : right top ..

tenang saja kok aldi akan memberikan sedikit tips dan contoh background yang boleh kalian copy alamat nya . 1.background-position:top . width: 100%.. width: 100%. oke lah di misalkan kalian sudah paham dengan tutorial-tutorial diatas tersebut akan tetapi kalian tidak mempunyai inspirasi background apa yang akan kalian gunakan pad blog kalian !!! . di karenakan jika background dan tampilan warna sekitar berebeda jauh . font-size: 13px... font-family: Arial. Dalam proses penulisannya masih bisa di singkat lagi lohh . } Lebih simple lagikan teman ????. font-size: 13px. margin: 0 auto 0. padding:0. padding:0.. color: #000000.. Tips belajar memasang background pada blog => usahakan agar background sesuai dengan warna sekitar tampilan blog anda setidaknya miripmirip saja deh . berwarna biru adalah posisi pengambilan gambar background dan tulisan berwarna ungu adalah pengambilan background secara horizontal . color: #000000. seperti ini : body { background :#FFF url(di sini alamat link gambar)repeat-x right top. background-repeat:repeat-x.. dan akhirnya pengunjung pun . margin: 0 auto 0.. font-family: Arial.pastinya akan membuat pusing para pengunjung blog tersebut . hmmmm . } Bagaimana sudah paham belum ??? Seperti yang telah aldi jelaskan tadi yaitu maksud dari tulisan berwarna merah adalah contoh alamat gambar tersebut.

gstatic.. ( sebaiknya pasang background yang simple aja deh ) 2.com/images?q=tbn:ANd9GcQdMuJc5npoowGslLvmXuhy7ekTYTIAYsE67QbZtEv JDbtV7nHsww http://t3.com/images?q=tbn:ANd9GcSJ4MbkgUxqh2jgr96qEAPM_Mk8WPToJ_gRjesbz7nqUUBUxTHjZMj1hfy . tepat berada di bawah gambar ) http://t2.akan bosan untuk berkunjung ke blog tersebut bukan .gstatic.( untuk link. Contoh untuk inspirasi anda dalam belajar memasang background blog .. => jangan terlalu menggunakan background yang banyak warna nya atau background yang berwarna-warni dan juga jangan terlalu memasang background yang berlebihan .

gstatic.com/images?q=tbn:ANd9GcR8TK4cpkyw2dK9X_zjGcmxURU56tf8egzZRgYkwc5 6y4CBUDxB http://t2.gstatic.com/images?q=tbn:ANd9GcQVtHTZSsZeuSTUD4WeqUn8cL_rvxvX1n0IPrWqKi6 lCONh5pUVDA .http://t0.

com/images?q=tbn:ANd9GcQ1hPr4TSn1C_jcI6iQ2jZc9Ch_tpnBK_5q6LGcxB5hvr zwGxeH Mungkin di antara kalian ada yang suka gambar-gambar naruto untuk di pasang sebagai background blog .http://t0.. silakan copy saja gambar naruto berikut ini :( biasanya backgroundbackground dengan gambar-gambar naruto tersebut tidak besar jadi kemungkinan background akan berulang-ulang ataupun kecil hasilnya ) .com/images?q=tbn:ANd9GcRzWe9_0qibM_QJO7ptMV3ItdHiFht3vP6RRN5NGp OeK71ebmhPzw http://t0.gstatic.gstatic.

net/wpcontent/uploads/2011/06/Naruto-wallpaper02.google.com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid= gQfsX_r5rFc69M:&imgrefurl=http://www.com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid=x QPy8LT4mOYa7M:&imgrefurl=http://narutowallpaper.net/anime/naruto-wallpaper02.jpg&w=400&h=300&ei=NBvETrm CNsnirAfmqbHoCw&zoom=1 http://www.com/images/1024x768/naruto-and-sasukebackground.us/pic/title/Naruto%2BTeam%2BHebi%2BBackground%2BPicture/&docid= P1_OhNJ-MSMThM&imgurl=http://www.com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid= 4nvYvGAqFPZPGM:&imgrefurl=http://anime-wallpapers.jpg&w=1024&h=768&ei=NBvETrmCNsnirAfmqbHoCw&zoom=1 http://www.wallpaperdesktops.html&docid=J2JN8p_sNbLBzM&imgurl=http://www.com/naruto/naruto-and-sasukebackground.blogspot.com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid= 4cao2ySnyr-mBM:&imgrefurl=http://www.narutopictures.com/&docid=iRkmeoh4MD8WJM&imgurl=http://bp1.google.google.google.html&docid=o8fuDERllcmdZM&imgurl=http://animewallpapers.wallpaperdesktops.blogger.http://www.narutopictures.jpg&w=1024&h= 768&ei=NBvETrmCNsnirAfmqbHoCw&zoom=1 http://www.us/uploads/images/Naruto_Team_Hebi_Background_Picture.com /_rg7WY6fRQ4M/Rwp3_4WOg2I/AAAAAAAAAYk/f1qsIeBveCA/s400/Naruto%25 2BWallpaper%252BUchiha%252BSasuke%252B2.jpg&w=1024&h=768&ei=NBvETrmCNsnirAfmqbHoCw&zoom=1 .

com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid= NCZ7OAGVqQHmiM:&imgrefurl=http://narutowallpaperz.php/ psp-sakura-haruno-and-uzumaki-narutowallpaper/&docid=bkrxsKVmweD6fM&imgurl=http://narutowallpaperz.tk/naruto-shippuden-wallpaper-in3d/&docid=hK4qP94nnAztuM&imgurl=http://screensaver104.http://www.net/index.jpg&w=1024&h=768&ei=NBvETrmCNsnirAfmqbHoCw&zoom=1 .com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid= UYh1hjE37t365M:&imgrefurl=http://screensaver104.google.net/wpcontent/uploads/2009/02/naruto-sasuke-darkwallpaper.jpg&w=800&h=600&ei=NBvETrmCNsnirAfmqbHoCw&zoom=1 http://www.google.tk/wpcontent/uploads/2011/10/naruto-shippuden-wallpaper-in3d.

profilethai.html&docid=FVz_eeFjDhQEUM&imgurl=http://www.com /wallpapers/10/3826.com/wallpapers/archivebackground-wallaper-naruto-uploads-wallpapers-content-anime60237.desktopwallpaperhd.com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid= K-kza-boygI1aM:&imgrefurl=http://www.http://www.jpg&w=1440&h=900&ei=NBvETrmCNsnirAfmqbHoCw&zoom=1 http://www. com/download/original/Sasuke-Wallpaper-naruto60339_1280_1024.profilethai.com/download/download-8170-more-narutowallpaper1280.jpg&w=1280&h=1024&ei=NBvETrmCNsnirAfmqbHoCw&zoom=1 .google.desktopwallpaperhd.com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid= 8B2yJEQaynzNXM:&imgrefurl=http://www.google.html&docid=0x1a__mjvpfP1M&imgurl=http://www.

semoga artikel belajar css untuk mengubah background blog ini dapat bermanfaat untuk orang banyak . hehehe Jika ada gambar yang rusak ataupun ada gambar yang tidak bisa di pakai untuk background halaman blog anda . Menu ini sebenarnya merupakan salah satu pesanan teman yang pernah diterapkan disalah satu template website umum berbasis php.dan itu biasanya di saat mengambil link dari google .Catatan : Mungkin di antara kalian ada yang mempunyai problem ketika ingin mengambil link gambar ternyata link tersebut begitu panjang dan terlihat seperti bukan link . selamat mencoba . ambil link alamat di googlenya saja . padahal itu sama loh ... silakan coment saja nanti akan aldi cari solusinya ... sekalinya tidak error malah menunya entah berada dimana. tentang belajar css untuk mengubah lebar halaman pada blog . Maklum Blogger pemula dan sangat awam dengan yang namanya koding CSS dan jQuery..... Sempat dibuat pusing juga dengan menu jenis ini. simplekan .... link juga . tunggu artikel aldi selanjutnya yaa ... dan jangan ambil alamat background url nya langsung . nahh jika ada yang mempunyai problem seperti itu jawabannya adalah . berkali-kali melakukan percobaan yang cukup melelahkan dengan beberapa kali error.hehehe Mari kita buat menu dropdown bertingkat (Multilevel Dropdown MenuLangkah 1 Struktur dasar dari menu dropdown yang akan kita buat menggunakan stuktur XHTML misalnya .!!! Cara Membuat Submenu Dropdown Dengan CSS dan Jquery Kali ini saya akan membuat menu dropdown bertingkat dengan CSS yang kemudian diberikan sentuhan efek jQuery agar lebih indah.

seperti dibawah ini:

<ul id="nav"> <li><a href="#">Beranda</a></li> <li><a href="#">Kontak</a></li> <li><a href="#">Arsip</a> <ul> <li><a href="#">jQuery</a> <ul> <li><a href="#">Download</a></li> <li><a href="#">Tutorial</a></li> </ul> </li> <li><a href="#">Bloghack</a></li> <li><a href="#">JavaScript</a></li> </ul> </li> </ul> Lihat hasil langkah 1 disini. Langkah 2 Setelah itu kita menggunakan kode CSS untuk memperbaiki penampilannya: #nav, #nav ul{ margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; } Kode CSS diatas akan menghilangkan identasi pada browser dan membuang semua tanda bullet pada #nav dan semua elemen yang ada didalamnya. Kode "position:relative;" digunakan untuk menyusun ulang posisi menu yang akan ditempatkan secara relative dan absolute. Hal ini nantinya digunakan untuk menata menu-menu berikutnya yang akan disusun sesuai dengan isi blok serta atribut-atribut lainnya. Kode "line-height:1.5em;" digunakan untuk mendefinisikan tinggi setiap item menu. Kita dapat mengesetnya sesuai dengan tinggi yang kita inginkan, tetapi link teks akan berada pada posisi center secara vertikal hal ini makanya kita tidak memerlukan pengesetan margin dan padding pada kode CSS ini.

Langkah 3 Percantik menu dengan setting CSS lebih lanjut: /* keadaan menu normal, aktif dan pernah diakses */ #nav a:link, #nav a:active, #nav a:visited { display:block; /* link menu di blok */ padding:0px 5px; /* jarak atas bawah 0 dan kiri kanan 5 pixel */ border:1px solid #333; /* ketebalan garis pinggir dan warna garis */ color:#fff; /* warna teks */ text-decoration:none; /* menghilangkan garis bawah pada link menu */ background-color:#333; /* warna latar belakang menu */ } /* keadaan menu saat dipilih */ #nav a:hover { background-color:#fff; /* warna latar belakang menu */ color:#333; /* warna huruf */ } Kode CSS diatas ini pelengkap dari kode CSS sebelumnya, hal ini untuk membedakan efek pada menu yang sedang dipilih (hover) dengan menu yang tidak dipilih. Pada saat keadaan menu normal, aktif, dan pernah diakses maka menu memiliki tampilan yang sama. Lihat hasil langkah 2 dan 3 disini. Langkah 4 Menyempurnakan tampilan dengan kode CSS berikutnya: #nav li { float:left; /* menu ditempatkan pada sebelah kiri */ position:relative; /* posisi relatif */ } Kode CSS diatas akan membuat menu tersusun secara horisontal

#nav ul { position:absolute; /* posisi absolute */ width:12em; /* lebar menu */ top:1.5em; /* jarak menu bagian atas */ display:none; /* menu disembunyikan */ } Kode CSS diatas digunakan untuk menyembunyikan menu berikutnya (menu utama tetap tampil). Lebar masing-masing menu ditetapkan 12em (width:12em;) hal ini agar menu memiliki ukuran tetap, jika kurang anda bisa set lebih lebar lagi. Jarak 1.5em (top:1.5em;) harus sama dengan jarak yang telah ditetapkan sebelumnya di kode CSS "line-height:1.5em;" pada #nav (lihat langkah 2)

#nav li ul a { width:12em; float:left; } Kode CSS diatas digunakan untuk mengeset lebar link menu selebar 12em.

#nav ul ul{ top:auto; } #nav li ul ul { left:12em; margin:0px 0 0 10px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ display:none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ display:block; } #nav ul ul dan #nav li ul ul digunakan untuk memperbaiki penempatan menu. Hal ini sangat penting untuk memperbaiki posisi menu saat dipilih (hover) dan susunan tingkatnya.

Sampai disini sebenarnya menu sudah bagus, silahkan lihat hasil langkah 4 disini. Tetapi menu belum memiliki efek yang lembut saat menu-menu ditampilkan. Langkah 5 Sekarang mari kita kombinasikan menu-menu dropdown yang sudah kita buat dengan sentuhan efek jQuery, tambahkan kode dibawah ini: $(document).ready(function(){ $(" #nav ul ").css({display: "none"}); $(" #nav li").hover(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); }); });

Alhamdulillah langkah demi langkah telah selesai. Pada saat kita menggeser mouse (hover) pada sub menu.show(400). Sedangkan script . // Perbaikan di Opera Kode diatas merupakan perbaikan untuk Opera yang tidak mampu menyembunyikan menu dengan cepat.ul) didalam #nav dan kemudian mengesetnya menjadi tidak ditampilkan (display:none). . silahkan lihat hasil akhirnya disini.display: "none"}).Dan jangan lupa klik iklan di bawah yaa "pesan sponsor" sebagai tanda terimakasih . Menggunakan kode visibility untuk mencegah berkedip (flicker) pada animasi menu. Sederhananya memberikan efek pada saat menu dipilih dan tidak dipilih. $(" #nav li"). Dan kembangkanlah menu ini semenarik dan seindah mungkin menurut keinginan anda.show digunakan untuk menampilkan menu dengan durasi waktu yang ditentukan didalam kurung (400).css({visibility: "hidden"}). maka menu akan memiliki efek berkedip (flicker). $(this). $(this). Kode ini berfungsi untuk menampilkan sub menu pertama yang tersembunyi dari menu yang sedang dipilih. Kode diatas untuk memberikan efek pada menu sesuai dengan posisi pointer mouse (hovering)..css({display: "none"}).find('ul:first'). Kode ini berfungsi mengembalikan posisi menu kembali tersembunyi melalui blok mode pada akhir animasinya.hover(function(){ //memberikan efek saat menu dipilih (hover) }.function(){ //memberikan efek saat pointer mouse meninggalkan menu }).css({visibility: "visible". Hal ini akan memberikan efek menampilkan menu yang sangat lembut. $(" #nav ul ") script jQuery digunakan untuk memilih semua daftar yang tidak berurutan (unordered lists ..find('ul:first').Fungsi dari masing-masing script jQuery: $(" #nav ul ").

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.