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

:

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

tampilan

untuk

visual

basic

2010

itu adalah permulaan untuk anda belajar visual basic, kita akan masih lanjut ke tutorial berikutnya . pada tutorial belajar visual basic untuk pemula selanjutnya, kita akan belajar Cara menjalankan program di visual basic (Start Debugging) ...

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

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, 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 .. Pada tutorial belajar visual basic untuk pemula selanjutnya, kita akan mempelajari cara menampilkan kontrol toolbox ke form project anda. Belajar Visual Basic | Menambahkan Kontrol ToolBox Ke Form Hal-hal seperti tombol, kotak teks, dan label adalah segala sesuatu yang dapat Anda tambahkan ke form project anda. Mereka dikenal sebagai Kontrol, dan disimpan dalam Toolbox untuk memudahkan penggunaan. Toolbox dapat ditemukan di sebelah kiri layar. Pada gambar di bawah ini, 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

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, sementar untuk menampilkannya kembali klik view pada menu bar kemudian klik other window dan pilihtoolbox atau dengan klik Ctrl + Alt + X pada keyboard anda. fungsi toolbox ini sangat banyak pengaruhnya pada software atau game yang akan anda buat nantinya, jadi harap mohon di mengerti . ok pada tutorial belajar visual basic selanjutnya kita akan belajar menambahkan textbox ke form .

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. Dengan alat yang ditampilkan pada toolbox, lakukanlah hal berikut:

1. Buka Toolbox 2. Kemudian cari di All windows Form / Common Controls, icon textbox 3. Kemudian Klik 2x icon Textbox ( jika sulit menemukannya, cari aja di toolbox dengan nama depan T )

nya

Textbox akan ditambahkan ke posisi kiri atas form Anda. Untuk memindahkan ke bawah, tahan mouse anda di atas textbox dan tarik/drag ke posisi baru yang anda mau:

Perhatikan kotak kecil di kiri dan kanan textbox. Ini adalah untuk menangani ukuran textbox. Coba gerakkan mouse Anda ke salah satu dari mereka. pointer Mouse akan berubah menjadi garis panjang. Tahan tombol kiri mouse Anda dan kemudian tarik (untuk memperpanjang textbox) . Maka Textbox akan berubah ukuran panjangnya . Satu Fakta yang dapat Anda perhatikan di sini adalah bahwa Anda tidak dapat membuat ukuran lebih tinggi tetapi Anda dapat membuatnya lebih panjang. Alasan mengapa Anda tidak dapat membuat textbox lebih tinggi, karena itu adalah tindakan default dari textbox, textbox itu hanya berisi satu baris teks, Microsoft beralasan, tidak ada alasan mengapa Anda harus dapat mengubah tingginya. textbox hanya dapat dibuat lebih tinggi jika diatur ke beberapa baris teks. Anda akan melihat bagaimana cara melakukannya di tutorial belajar visual basic selanjutnya .

kita lanjut untuk membuat textbox lebih banyak di form kita. 1. Cara mudah untuk membuat banyak textbox di form adalah dengan copas (copy paste) textbox pertama. dengan cara : - klik kanan pada textbox - pilih copy - kemudian klik kanan lagi di form kita - kemudian pilih paste atau dengan cara mudah -> klik CTRL + C pada textbox -> kemudian klik CTRL + V di form kita 2. Atau jika anda suka yang sulit-sulit , pilih textbox lagi di toolbox. - udah ane jelaskan di atas gan !!!

Maka Tampilannya ...

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. Buka ToolBox 2. Cari Icon Label ( di lambangkan dengan huruf A ) 3. Klik 2x icon nya Maka seharusnya akan terlihat seperti ini :

Klik kiri pada Label kemudian tahan mouse dan arahkan tepat di samping kiri textbox, lalu copas label nya (sama seperti copas textbox) kemudian lakukan hal yang sama pada textbox

berikutnya Maka akan tampak seperti ini :

.

Untuk melihat apakah program anda sudah terlihat seperti program, jalankanlah program (Debug) jika belum tahu cara start debugging cukup klik F5 pada keyboard, atau lihat gambar berikut :

untuk menghentikan program cukup klik X merah di sudut pojok atas form debug. Baiklah,sekarang kita memiliki bentuk pada form kita dengan textbox dan label, sesuatu yang tampak seperti pengguna aplikasi yang kita buat dapat mengisi sesuatu pada textbox itu, padahal tidak, kita sama sekali belum mengisinya dengan koding-koding VB agar dapat mempunyai suatu fungsi, untuk sementara cukup itu dahulu dalam memulai belajar visual basic dan kita akan mulai tentang koding-koding di tutorial belajar visual selanjutnya . ok slow but sure

4. Belajar Visual Basic | Mengenal Properties di VB Ikuti terus tutorial - tutorial belajar visual basic untuk pemula di blog ini ... Anda mungkin telah melihat daerah di sebelah kanan bawah dari VB kan, daerah dengan semua text dan box dalam kotak, salah satunya memiliki nama seperti "Auto Size", "AccessibleName", "AccessibleRole". dan lain-lain, dan Itulah kotak Properties yang akan kita bahas kali ini. Di sebelah kanan dari lingkungan desain visual basic, kotak properti akan seperti tampilannya :

Dalam Kotak property Apa yang Anda cari adalah suatu daftar dari sifat-sifat yang membentuk dan memiliki: Nama, BackColor, Font, Gambar, Teks, dll, sifat-sifat ini adalah nilai-nilai untuk mereka. Nilai-nilai ini adalah nilai-nilai default, dan dapat diubah. 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. Begitu pula untuk yang lain seperti Label, untuk mengubah propertynya kita cukup klik pada label yang ingin kita ubah propertynya dan pastikan kotak property berubah nama menjadi nama Label kita.

Pertama, Anda mungkin ingin untuk menampilkan daftar Properties dalam bentuk yang lebih mudah diakses. Anda dapat menampilkan properti dengan daftar abjad. Untuk melakukannya, klik ikon abjad di bagian atas kotak Properties, seperti pada gambar di bawah ini:

Sebelum kita lebih jauh tentang properties, mari kita pahami lebih detail apa itu properties pada visual basic. Apa Itu Properties ? properties adalah kontrol, kontrol yang anda dapat tambahkan ke bentuk (textbox,label dll), dan bentuk itu sendiri disebut objek kontrol. Anda dapat menganggap kontrol sebagai benda, sesuatu yang kuat dan Anda dapat mengontrol sifatnya . Contoh mudahnya adalah televisi, dalam sebuah televisi terdapat remot untuk mengendalikannya, dimana anda dapat menyalahkan tv, mematikan tv, membuatnya dengan bunyi pelan, membuatnya dengan bunyi kuat dan lain-lain. Dalam visual basic, Anda dapat mengubah properti dari kontrol Kotak Properties. (Anda juga dapat mengubah properti menggunakan kode-kode, yang akan Anda lakukan dengan cukup banyak, "akan saya jelaskan nanti") Jika kita kembali ke objek form kita, sifat-sifat dan nilainilai yang terdapat pada form kita dapat di lihat di kotak properties, kita juga dapat untuk mengubahnya dengan menggunakan Kotak Properties.

*Pada

contoh

berikut

kita

akan

mengubah

nilai

text

pada

form1

kita

:

lihat

kotak

properties

form1

perhatikan tulisan text sama dengan form1 form1 adalah nama default dari form kita - sekarang coba ubah nama properties form1 text dengan nama My First Form

Maka form yang kita buat di tutorial sebelumnya kan tampak seperti ini :

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

Belajar HTML Langkah Menjadi WebmasterHTML adalah code-code khusus dalam pembangunan sebuah situs web / blog, bila anda membangun sebuah situs dengan web hosting seperti blogger.maka secara otomatis situs anda sudah akan mempunyai code-code html secara otomatis. namun tentu saja jika anda ingin mempercantik blog dan semacamnya yang bersangkutan, tentu saja anda akan di wajibkan untuk setidaknya familiar dengan code-code html tersebut . sini aldi berikan sedikit gambaran tentang html . ( untuk memperdalam ilmu tentang html silakan anda baca terus tutorial html pada blog aldi ini.) lihat contoh singkat :

My First Heading

My first paragraph.

mungkin bagi anda yang baru pertama kali belajar html akan kebingungan dengan code-code html tersebut. loh .. kok bingung siii aihhh .. sini kawan biar aldi pandu untuk belajar html . untuk artikel kali ini aldi hanya akan menjelaskan secara singkat untuk anda dalam pengenalan html.

kalo kata pepatah mengatakan tak kenal maka tak sayang . hehehe ...untuk itu mari kita pelajari dengan singkat mengenai html . html terdiri dari banyak kode-kode namun yang terpenting dan mungkin memang wajib deh untuk di pasang yaitu ( 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 maka anda pun harus menutupnya dengan tag .. mengapa begitu yaaa ????? .. aihhh kok nanya .. ya emang dari sono nya udah begitooo .. klo ada yg bantah ayo ankat tangannya ..!! aldi rasa untuk artikel pengenalan html kali ini cukup untuk kalian dalam hal pengenalan html .. untuk memperdalam ilmu html - html lainnya silakan kalian ikuti terus artikel tutorial html selanjutnya pada blog ini .. semoga bermanfaat ..

Pengenalan HTML episode 2Hei teman, mungkin bagi anda yang masih kebingungan dengan tutorial HTML aldi yang pertama dan masih pusing 7 keliling mengelilingi senayan tentang penjelasan HTML . sekarang aldi akan jelaskan dengan detail dan lengkap tentang HTML tersebut . alright...biar lebih asik lihat contoh dulu yaa :

tulisan saya oke engga paragraph. saya dari contoh di atas maka dalam layar web/blog anda akan seperti ini hasilnya :

tulisan saya oke enggaparagraph. saya untuk contoh di atas aldi hanya menggunakan sedikit kode HTML yaitu dan , untuk itu sendiri pun maksudnya adalah tulisan pertama dan biasanya di pakai untuk judul blog . adapun struktur sebagai berikut :

h1 = tulisan saya oke enggah2 = tulisan saya oke enggah3 = tulisan saya oke enggah4 = tulisan saya oke engga

dan untuk tag itu adalah berarti paragraf .. kalo paragraf kalian juga sudah pasti tahu kan .. oke aldi anggap kalian sudah mengetahuinya . mari kita lets go.. apa si itu HTML ??? kalo pengertiannya menurut orang-orang pinter kaya gini nih HTML adalah bahasa untuk mendeskripsikan halaman web. HTML singkatan dari Hyper Text Markup Language HTML bukanlah bahasa pemrograman, 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 Tag HTML umumnya selalu berpasangan seperti dan Tag pertama dalam pasangan adalah tag pembuka, 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 :Teks di antara dan menjelaskan halaman web Teks di antara dan adalah isi halaman yang terlihat Teks di antara dan ditampilkan sebagai judul Teks di antara dan ditampilkan sebagai sebuah paragrafnahh untuk artikel pengenalan HTML episode 2 nya aldi rasa sudah cukup yaa .. aldi yakin kalian semua pinter-pinter kok . .:)Dimana Meletakan HTMLbelum lama ini ada teman aldi yang masih benar-benar blank tentang html, dia nanya sama aldi .. "aldi html ini di ketiknya dimana sii ??? " .. hmmm ... sebenarnya aldi pun ingin ketawa mendengarnya ... gmna engga .. atuh nannya nya aneh-aneh aja si dya .hehehe tapi dari tampang mukanya siii .. dya serius bngettt ... oke deh klo bgitu sekalian saja saya buat postingan untuk dya .. mungkin bagi teman yang masih blank juga tentang html bisa membaca artikel ini . sebenarnya untuk meletakan kode html itu bisa dmna saja .seperti notepad dan lain sebagainya .. lalu tinggal copas deh bisa di postingan kalian ataupun di template blog kalian . namun bila kalian masih bingung juga tentan peletakannya . sini merapat biar aldi jelaskan : [ ini untuk contoh blogspot ] - pertama login dahulu ke blogger . - kemudian pilih posting - new post - lalu pada kotak postingannya kalian klik edit html letaknya ada di pojok kanan atas .. nahhh mudahkan .. sedangkan untuk meletakan kode html pada template blog .. - login blogger - pilih design ( untuk blogger berbahasa indonesia : rancangan ) - pilih edit html ..aldi rasa kalo mau meletakan kode-kode html di blog .. yaaa di situ dehh .. oh iya ada lagi , kalo kalian ingin meletakan kode-kode html pada sidebar blog. silkana ikuti petunjuk berikut .: - login blogger - pilih design - plih page elemens - klik add gadget - kemudian pilih HTML/java script . truss masukan deh kode-kdoe HTML nya ..dan kalian pun dapat memasukan kode-kode javascript juga lohh.. ehmmm .. sekian dulu dehKode - Kode Dasar Pada HTMLpostingan kali ini aldi mulai menjelaskan kode - kode HTML, untuk kali ini yang paling dasar dulu ya ... berhubung kode html itu memang kalo di bilang banyak juga sii .. tapi untuk kalian yang ingin belajar html , sebaiknya baca dulu artikel ini sebelum lanjut ke artikel selanjutnya . kode-kode html itu ternyata mempunyai dasar kode yang harus di ketahui jika kalian memang benar - benar ingin belajar HTML . jika tidak lupakan saja artikel ini yaa. oke langsung saja merapat ke topik artikel . untuk basic html yang pertama adalah heading mungkin jika kalian membaca postingan aldi sebelumnya . pasti kalian ssudah dapat familiar dengan kata heading. html heading terdiri dari h1 sampai h6 sini merapat kita lihat contoh dulu biar asikk .tulisan kamu tulisan kamu tulisan kamu tulisan kamu tulisan kamu tulisan kamu dari contoh di atas dapat simpulkan bahwa h1 adalah tulisan kamu yang terbesar dan seterusnya hingga h6 tulisan kamu yang terkecil. html paragraf kayanya aldi ga perlu jelasin lagi deh tentang html paragraf . oke aldi anggap kalian sudah mengetahui apa itu paragraf .. biar aldi kasih contoh aja yaa . disini letak paragraf kamu dsini letak paragraf tulisan kamu selanjutnya html links nahh untuk yang ini nih yang paling penting . yaitu html link .. html link berfungsi untuk anda dalam hal membuat link - link ke artikel lain di blog anda ataupun ke alamat web lain . kalau di dalam blogger untuk membuat link nya itu mudah kok .. jika kalian sedang membuat postingan , bisa kalian lihat di atas kolom posingan ada tulisan link .. ada engga . pasti adalah .ya kan .. 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 .. contoh link maka hasil nya akan seperti ini : contoh linkoke aldi rasa kalian sudah paham dehhh ... ayo kita lanjutt html image maksud html image ini adalah kode hml untuk memasukan gambar . berbeda dengan kode html pada pembuatan link . kode html ini harus di ketik sendiri karena untuk saat ini blogger masih belum meluncurkan asesoris untuk membuat html image secara praktis. mari merapat kita lihat contoh html nya : pada contoh di atas fungsi width adalah untuk mengatur panjang gambar sedangkan height untuk mengatur lebar . ( ukuran sesuai keinginan anda ).ehmm .. gmna artikelnya nih teman ... mudah-mudahan dapat membantu yaaa .. oke dehhh aldi rasa cukup basic html nya ..Format penulisan pada HTMLokeyy kali ini kita membahas format penulisan pada HTML untuk kalian yang ingin belajar html . mungkin dari judul di atas kalian masih bingung yaa .. apa maksudnya sii aldi bikin judul kaya bgitu . nahh biar aldi jelaskan sekarang . pada penulisan html terdapat format penulisan yang berbeda-beda . mungkin kalian sering lihat atau mungkin membaca tulisan-tulisan yang tebal - miring - tulisan seperti di notepad dsan sebagainya . nahhh itulah yang di maksud dengan format penulisan . mungkin bagi kalian yang ingin belajar membuat tulisan-tulisan seperti itu silakan ikuti terus artikel ini . untuk membuat tulisan seperti tebal - miring dan sebagainya ini dia kode html nya :ini tulisan tebal ini tulisan strong ini tulisan besar ini tulisan italic ini tulisan emphasized ini tulisan gaya komputer ini tulisan subscript dan superscript dari contoh di atas maka akan menghasilkan tulisan seperti dibawah ini :ini tulisan tebal ini tulisan strongini tulisan besarini tulisan italic ini tulisan emphasized ini tulisan gaya komputerini tulisan subscriptdan superscriptcontoh di atas bisa kalian terapkan pada blog atau pun web dengan sesuka hati kalian . oke deh untuk artikel kali ini sekian dulu yaa ... ( pendek ya artikel nya.. hehehehe )Cara membuat tabel menggunakan HTMLmungkin dari judul artikel di atas kalian pun pasti sudah paham yaa . yaa ... kali ini aldi akan menjelaskan cara membuat tabel menggunakan html . membuat tabel dengan html ini sangat di perlukan untuk kalian dalam hal mempostingkan artikel yang memerlukan tabel - tabel dalam hal penjelsannya . oke sebelumnya jika kalian belum membaca postingan aldi sebelumnya silakan baca disini atau disini ehmmm ... kenapa engga dibaca sii .. oke deh kalo engga mao dibaca juga engga apa-apa , mendingan ngopi aja dulu yaa . mari langsung aja kita bahas . dalam hal membuat tabel dengan kode html, kode yang wajib anda masukan adalah - - dan dan tentunya harus di tutup kembali dengan kode "/" .. jika kalian sudah membaca artikel aldi sebelumnya mungkin kalian pasti sudah paham tentang tag-tag penutupan html tersebut .. oke aldi anngap kalian sudah paham .. mari kita lanjut . biar lebih asik kita lihat contoh aja yukk ..tabelnah untuk tabel di atas itu aldi memakai kode html di bawah ini : tabel 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 ataunahhh...berarti kalo mao membuat tabel yang lebih besar seperti ini caranya : 100 200 300 400 500 600 400 500 600 400 500 600 400 500 600 400 500 600 400 500 600400 500 600 400 500 600 400 500 600 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 600bagaimana ??? .. huruf dalam tabel dapat anda rubah sesuai kebutuhan .. jika kalian tertarik untuk menggunkan tabel dalam menulis artikel, bisa kok kalian copas kode html di atas .. dan tinggal kalian rubah aja kok .. kata-katanya .. mudah kan .. selamat mencoba ...Cara membuat tulisan coment HTMLwew.. mungkin bagi kalian yang belum mengetahui cara membuat tulisan coment padahtml akan sedikit kebingungan dengannya ... bagaimana caranya yaa ????? hahahhaha... sebeenarnya itu sangat mudah lohh .. tinggal kamu masukan kode gmana mudah kan .. oke deh biar lebih asik kita lihat contoh aja yukk .. nih hasilnyalohh ..kok engga ada . kenapa ??? kok bingung ...kan tulisan memang ga kelihatan ...wkwkwkwkwk selamat mencoba ...Cara Membuat Tulisan Bergaris Di bawah pada HTMLbelum 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 ..?? yyaaaa ..betul .. 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 contohtulisan ini hanya contoh tulisan ini hanya contoh tulisan ini hanya contoh tulisan ini hanya contohtulisan ini hanya contohmungkin di antara kalian juga masih ada yang bingung bukan .. gmna caranya ntuhhh ????? aihhhh .. mudah kok .. tinggal di tambahkan kode " " aja.. biar lebih jelas lihat contoh aja yuu ..tulisan ini hanya contoh tulisan ini hanya contoh tulisan ini hanya contoh tulisan ini hanya contoh tulisan ini hanya contoh tulisan ini hanya contoh dari contoh tersebut maka hasilnya akan seperti yang di atas tadi lohh ... ga percaya ...??? coba aja sendiri weeeeeCara Membuat Baris Baru Pada HTMLehmmm.. pada tutorial sebelumnya sebenarnya telah aldi terangkan lohh tentang html paragraf . untuk kode html kali ini sebenarnya engga jauh beda dengan kode html paragraf tersebut .. namun untuk kali ini jauh lebih simple untuk anda yang sedang terburu-buru .. hahahaha emang mau ngapain yaa kok buru-buru ..oke untuk fungsi html kali ini fungsinya memang sama persis seperti membuat paragraf baru ..atau kalau kita sedang membuat postingan di blogger ntuh .. kurang lebih kaya mencet enter deh ... nahhh kan trus tulisannya jadi ke bawah ntuhhh ... lah trusss ngapain di jelasin donk ????gini nih teman .. so'alnya .. 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 .. selain itu fungsi ini pun juga sangat bermanfaat untuk kalian yang tidak menggunakan hosting blogspot . oke deh langsung aja di jelasin .. aldi kok malah ceramah yaaa engga usah ribet-ribet yaa .. dalam setiap tulisan yang ingin di buat baris baru tambahkan saja kode ini "
"contohtulisan ini hanya contoh
tulisan ini hanya contoh lagi
tulisan ini hanya contoh
contoh lagi ahhh
contoh tulisan saya
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 ..Cara Membuat Tulisan HTML Ber-style Komputerternyata HTML juga bisa di buat ber-style gaya komputer lohhh ... ga percaya ???? @#$%$#@$%$#@ baguss memang jangan pernah percaya sama aldi tapi cukup percaya sama yang di atas saja .. di sini aldi cuma memberikan arahan saja kok ... udah ah .. kok jadi ngelantur tingkat stress nih aldi .. hehehe ...weeeeeeoke langsung aja deh ..lihat contohnya :komputer codeKeyboard input Teletype textSample textComputer variablemaka hasilnya ( secara berurutan dari atas ke bawah :Komputer code Keyboard input Teletype textSample text Computer variable bagaimana mudah kan .. selamat mencobaCara Membuat Link Mengirim Email Dengan HTMLPada suatu hari ada seorang bocah yang bertanya pada ayahnya ... !!! bocah : yah bagi duit !!! ayah : sono minta sama emak luh !!! bocah :anda : @#$%$#@#$ dan saya : hahahahahahhahahahahahhahaha yang di atas engga ada nyambungnya sama sekali yaa sama judul artikelnya ...wkwkwk oke deh sebelum ngelantur terlalu jauh ... ayo kita kembali ke topik pembahasan cara membuat link Mengirim email dengan html . mungkin bagi kalian yang belum begitu memahami fungsi dari pembuatan link-link pada html akan bingung yaa .. oke biar aldi jelaskan . sebenarnya fungsi - 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 . akan tetapi juga dapat sebagai pembuka outlok express .. yaitu alat untuk mengirim email .. ( sebenarnya masih banyak lagi fungsi dari html ,tapi kali ini akan aldi jelaskan fungsi untuk email saja dulu ) biasanya kalian kalo membuat link kurang lebih seperti ini kan kodenyadi sini hanya contoh nahhh kalau untuk membuat link untuk membuka outlok express ..seperti ini nih teman : Email saya keterangan : pada kata " aldi_fe@yahoo.com" itu adalah alamat email yang akan kalian tuju ,kalian juga dapat menggantinya sesuai kebutuhan. ( alamat email di atas adalah alamat email saya .bila anda ingin menanyakan sesuatu bisa contact saya melalui email itu ) dan hasil nya akan seperti ini ( coba tekan )Email sayapada dasar nya membuat link email itu cukup di tambahkan kode " mailto: " dan "alamat email" saja kok .. bagaimana mudah kan .. selamat mencoba ...Link HTML Gambar | Cara Membuat Link HTML Bergambaroke selamat malam semua ( so'alnya aldi membuatnya malem hari nih . tapi sayangnya mereka engga tau ntuh cara ngebuatnya .. lon kok engga tau tapi mau bikin .hehehe . oke deh sekalian aja aldi buatin postingan buat teman aldi yang satu ini . ehmm .. langsung masuk ke topik pembahasan aja yuk .... sekedar mengingatkan saja sebelumnya aldi kan sudah buat tutorial HTML untuk membuat link email bagi kalian yang mungkin ingin membacanya silakan klik disini yaa . ehmmm ... kok engga di klik ??? . engga tertarik yaa . oke desss kalo gitu , gpp ..lets go pertama aldi akan sharing sedikit info nih untuk kalian .. dalam link - link html itu sebenarnya mempunyai banyak ke gunaan lhoo .. engga percaya .. nih contoh nya .. ini untuk membuat link biasa ) .. belum lama ini banyak teman aldi yang bertanya .. Mereka ingin membuat Link HTML bergambardisini link untuk membuka halaman baru dan hasilnya .. jrrrrengggg disini link untuk membuka halaman barudan yang ini link untuk mengirim emaildisini link untuk mengirim email and ... ini dia hasilnya ( coba klik deh ) disini link untuk mengirim emailnahhh untuk yang ini nih link bergambarnya lihat yukk .. 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 . ( misal kalian membuat gambar dan meng upload nya di photobucket .. maka nanti akan ada linknya kan .. nahhh link itulah yang akan kalian pakai dalam hal ini) - nanti akan aldi jelaskan cara meng uploadgambarnya ke photobucket. kira-kira 2 hari lagioke lanjut ke tulisan berwarna hijau : untuk yang ini adalah tinggi dan lebar gambarnya .. ( kalo yang ini engga usah di jelasin .. udah paham kan )dan hasilnya ...coba klik sendiri aja deh gambarnya ...untuk kalian yang mungkin menginginkan alamat gambar yang lain .. nih kebetulan aldi ada kok setelah nyopet punyanya kang rohman .hehehe tapi sekali lagi makasih yaaa kang rohman ..:)happy :(sad ;)winking :Dbig grin ;;)batting eyelashes >:D-peace sign[-Xshame on you\:D/dancing>:/bring it on;))hee hee:-@chatterbox^:)^not worthy:-joh go on(*)staro->hiroo=>billyo-+april(%)yin yangArtikel Tambahan : ada lagi nih ..kalo yang ini engga nyopet ..hehehe.lihat yaa kalo engga nanti aldi chidori nih ...untuk kalian yang ingin melihat animasi-animasi seperti di atas lebih banyak lagi .. silakan klik disini nanti kalian copypaste saja .. sebagai contoh :Widget Animasisekedar 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 kalian dapat mengatur tinggi gambar dan panjang gambar dengan mengubah angka pada tulisan yang berwarna orange pada contoh di atas . width="100" => untuk mengatur panjang gambar height="100" => untuk mengatur tinggi gambarsekedar tambahan sebenarnya link ini sudah aldi berikan tadi di atas .. tapi tidak apalah sekedar mengingatkan saja yaa . 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 mencobacara membuat link | cara membuat link html ber tab baruehmm ... judulnya aneh yaa .. mungkin bagi kalian yang baru mengetahui fungsi - fungsi dari link - link html juga akan bingung kan .. oke dechh .. akan aldi jelaskan maksudnya .. maksud aldi membuat judul postingan seperti itu adalah untuk membuat link agar membuka tab baru saat di klik. bagi kalian yang sudah familiar dengan fungsi - fungsi link untuk yang satu ini pasti akan lucu ya kan dengan postingan aldi yang satu ini .... tapi gpp lah ..aldi sekedar sharing saja sama yang belum begitu tahu tentang html .. sebelumnya aldi telah membuat postingan tentang berbagai cara untuk membuat link .. 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 ... pembahasan yukk sebelumnya kita telah ketahui bahwa untuk membuat link itu, kita hanya membuat kode html seperti ini :di sini nama linkdan hasilnya .. taraaadi sini nama linkdan untuk membuat link tersebut membuka dengan tab baru .. 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 : di sini nama link dan link dengan tab baru pun berhasil kita buat ..coba klik dehh link nya : di sini nama linkbagaimana ???? mudah kan . oke teman ... sekarang kalian bisa mencobanya sendiri pada blog kalian selamat mencobaBelajar HTML | HTML List ( Daftar )Penggunaan HTML List ( daftar ) dalam document HTML akan terlihat seperti di bawah ini :HTML Lists ( daftar ) An ordered list:1. 2. 3. The first list item The second list item The third list itemAn unordered list: List item List item List itemoke, 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. An unordered listCara membuat daftar ordered, dalam sebuah dokumen HTML.Unordered Lists HTMLUnordered list dimulai dengan tag

. dan Setiap item list dimulai dengan tag . Daftar item ditandai dengan lingkaran hitam ( biasanyakecil ). Contoh :CoffeeMilkmaka hasilnya akan seperti dibawah ini : Coffee MilkHTML Ordered ListsOrdered list dimulai dengan tag . dan Setiap item List dimulai dengan tag . Ordered list ditandai dengan angka. contoh : Coffee Milk maka hasilnya akan seperti dibawah ini : 1. Coffee 2. MilkHTML Definition ListsSebuah definition Lists adalah daftar item, dengan deskripsi dari setiap item. Tag mendefinisikan definition Lists . Tag digunakan dalam hubungannya dengan (mendefinisikan item dalam Lists) dan (menjelaskan item dalam Lists) contoh: Coffee - black hot drink Milk - white cold drink maka hasilnya akan seperti dibawah ini : Coffee - black hot drink Milk - white cold drinkoke, sekarang kita akan lanjut dengan contoh - contoh di bawah ini:Different types of ordered listsMenunjukkan berbagai jenis daftar dipesan.Different types of unordered listsMenunjukkan berbagai jenis daftar unordered.Nested listMenunjukkan bagaimana Anda dapat Nested List.Nested list 2Menunjukkan daftar nested lebih rumit.Definition listMenunjukkan daftar definisi. oke, kita akan lanjut ke tutorial belajar HTML selanjutnya ..Belajar HTML - HTML FormHTML form di gunakan untuk menginput data. Dan biasanya para pembuat website membuat FORM dan di khususkan untuk para user misalnya dalam hal input data, form login dll. form html akan sangat berguna sekali untuk anda yang ingin membuat website dinamis, mungkin untuk saat ini bagi anda yang baru berkecimpung di dunia website membuat form html belum begitu berpengaruh besar, akan tetapi anda akan membutuhkannya saat anda sudah mahir nanti . untuk itu ikuti terus tutorial belajar html di bab-bab selanjutnya :) oke, sekarang kita akan mencobanya sendiri dengan contoh - contoh di bawah ini:Create text fieldscara membuat form textCreate password fieldcara membuat form password (kita akan melihat lebih banyak contoh pada bagian bawah artikel ini)HTML FORMhtml form mempunyai tag contoh . masukan element tag . HTML FORM - ELEMEN INPUTUnsur bentuk yang paling penting dari form adalah elemen input. Elemen input digunakan untuk memilih informasi pengguna. Sebuah elemen input dapat bervariasi dalam banyak cara,tergantung pada jenis atribut. Sebuah elemen input dapat di gunakan dengan jenis teks, kotak centang, sandi, tombol radio, tombol submit, dan banyak lagi. Jenis input yang paling digunakan akan di jelaskan di bawah ini :TEXT FIELDSDalam pengimputan data dengan metode tag text, metode teg input yang di gunakan akan terlihat seperti ini contoh: First name:
Last name: Maka akan terlihat seperti di bawah ini :First name: Last name: catatan: input type jenis ini hanya dapat memasukan 20 karakter .PASSWORD FIELDTag form pada feld password adalah contoh : Password: maka akan terlihat seperti di bawah ini :Password: catatan : semua karakter yang di input ke field password akan tidak terlihat atau hanya berbentuk ( hitam bulat)RADIO BUTTONtag pada radio button terlihat seperti ini contoh: laki - laki
perempuan maka akan terlihat seperti di bawah ini :laki - laki perempuanCHECK BOXtag pada check box ini terlihat seperti ini contoh : saya manusia
saya laki-laki maka akan terlihat seperti di bawah ini :saya manusia saya laki-lakiSUBMIT BUTTONtag submit akan terlihat seperti ini Sebuah tombol submit digunakan untuk mengirim data formulir ke server. Data dikirim ke halaman tertentu dalam atribut action form.File didefinisikan dalam atribut action, biasanya akan melakukan sesuatu dengan input yang diterima. (kita akan belajar submit fungsi submit button dalam bab-bab selanjutnya) contoh: Username: maka akan terlihat seperti di bawah ini:Username:Submitoke, sekarang anda dapat melihat kumpulan contoh - contoh tag form html di bawah ini :contoh - contoh tag input :tombol radio ( radio button ) Cara membuat tombol radio. checkbox Cara membuat kotak centang. Seorang pengguna dapat memilih atau tidak memilih kotak centang. Sederhana daftar drop-down Cara membuat daftar drop-down yang sederhana. Daftar drop-down dengan nilai pra-dipilih Cara membuat daftar drop-down dengan nilai pra-dipilih. textarea Cara membuat kontrol multi-baris teks masukan. Dalam sebuaharea teks-pengguna dapat menulis jumlah yang tidak terbataskarakter.Membuat tombol Bagaimana membuat tombol.contoh - contoh tag formFieldset sekitar form-data Cara membuat perbatasan tepi di sekitar elemen dalam formulir. Formulir dengan bidang teks dan sebuah tombol submit Bagaimana menciptakan sebuah form dengan dua bidang teksdan sebuah tombol submit. Formulir dengan kotak centang (chexkboxes) Bagaimana menciptakan sebuah form dengan dua kotak centang dan tombol submit. Formulir dengan tombol radio Bagaimana menciptakan sebuah form dengan dua tombol radio,dan sebuah tombol submit. Kirim e-mail dari formulir Bagaimana untuk mengirim e-mail dari formulir (form).oke, kita akan lanjut ke tutorial belajar html selajutnya ...Belajar HTML - HTML FramesBelajar HTML - HTML FramesDengan Frames beberapa jendela halaman web dapat di tampilkan dalam satu halaman saja . oke, kita akan melihat contoh langsung dari html frames : vertikal frameset Cara membuat frameset dengan tiga dokumen vertikal yang berbeda. frameset horizontal Cara membuat frameset horizontal dengan tiga dokumen yang berbeda. (Anda dapat menemukan lebih banyak contoh di bagian bawah halaman ini)HTML FrameDengan frame, Anda dapat menampilkan lebih dari satu dokumen HTML di jendela browser yang sama. Setiap dokumen HTML disebut sebuah frame, dan setiap frame adalah independen dari yang lain. Kelemahan dari menggunakan frame adalah: Frame kemungkinan tidak akan didukung pada versi mendatang dari HTML Frame sulit untuk digunakan. (Mencetak seluruh halaman sulit). Pengembang web harus melacak semua dokumen HTML yang lebih.Elemen HTML framesetElemen frameset memegang satu atau lebih elemen frame.Setiap elemen frameset dapat memegang dokumen yang terpisah. Elemen frameset menyatakan BERAPA BANYAK kolom atau baris yang akan ada dalam rangkaian frame, dan berapa banyak persentase / pixel dari ruang yang akan menempati masing-masing frame.Elemen HTML frameTag mendefinisikan satu jendela tertentu (frame) dalam sebuah frameset. Pada contoh di bawah kita memiliki sebuah frameset dengan dua kolom. Kolom pertama diatur ke 25% dari lebar jendela browser. Kolom kedua adalah set ke 75% dari lebar jendela browser. Dokumen"frame_a.htm" dimasukkan ke dalam kolom pertama, dan dokumen "frame_b.htm" dimasukkan ke dalam kolom kedua. contoh : Catatan: Ukuran kolom frameset juga dapat diatur dalam pixel(cols = "200.500"), dan salah satu kolom dapat diatur dengan menggunakan ruang yang tersisa, dengan asterisk (cols = "25%,*").oke, kita langsung praktekan dengan contoh - contoh di bawah ini :contohCara menggunakan tag Cara menggunakan tag (untuk browser yang tidak mendukung frame). Nested framesets Bagaimana menciptakan sebuah frameset dengan tigadokumen, dan bagaimana campuran mereka dalam baris dankolom. Frameset dengan noresize = "noresize" Cara menggunakan atribut noresize. Gerakkan mouse di atasbatas antara frame dan melihat bahwa Anda tidak dapat memindahkan perbatasan. navigasi frame Bagaimana untuk membuat frame navigasi. Frame navigasi berisi daftar link dengan frame kedua sebagai target. File yang bernama "tryhtml_contents.htm" berisi tiga link. Kode sumberdari link: Frame
Bingkai b
Bingkai c Frame kedua akan menunjukkan dokumen terkait. Langsung ke bagian tertentu dalam bingkai Dua frame. Salah satu frame memiliki sumber ke bagian tertentudalam sebuah file. Bagian yang ditentukan adalah dibuat denganname="C10"> .insyaallah nanti saya akan membuat juga tutorial belajar CSS untuk pemula .+ oke, kita dah pun selesai pembahasan htmlDasar kode CSS | Belajar CSS | Penjelasan CSSSebelumnya aldi ingin memberi arahan kepada kalian yang ingin belajar CSS, di dalam proses pembelajaran css hal yang pertama harus kalian pahami atau setidaknya familiar dengan yang namanya html, jika kalian ingin belajar html silakan klik disini atau baca artikel-artikel yang berhubungan dengan html . Css sendiri berfungsi untuk mendesain blog kalian agar nampak lebih indah dan berkualitas.selain itu css juga dapat meringkas kode-kode yang di gunakan pada template kalian .dan tentunya kalian pun akan sedikit menggunakan kode kode pada blog kalian . Sebelum kalian lanjut untuk belajar CSS, silakan untuk berkenalan dulu yaa .. CSS adalah singkatan dari Cascading Style Sheets CSS digunakan untuk mendesain tampilan dari html, jadi intinya jika kalian mau belajar css, belajar lah dulu html . CSS dapat digunkana untuk meringkas pekerjaan. CSS mempunyai kode kode untuk mendesain tampilan html kalian ke bentuk yang berkualitas.Contoh singkat CSS body { background-color:#d0e4fe; } h2 { color:orange; text-align:center; } p{ font-family:"Times New Roman"; font-size:20px; } Contoh CSS Di sini letak tulisan kamu. Dan akan menghasilkan seperti di bawah ini :Contoh CSSDisini letak tulisan kamuDari contoh di atas dapat di simpulkan bahwa kode - kode css tidak muncul kedalam tampilan. jadi intinya css adalah pendukung styles dari html. mungkin di antara kalian masih ada yang belum paham yaa . atau mungkin di antara kalian masih ada yang ngangguk ngangguk seolah - olah sudah paham .. heheheheh .. namanya juga belajar pasti membutuhkan proses bukan ??? .. jadi jangan terlalu di bawa serius dan juga terlalu santai yaaa ... sersan aja yaa ( serius tapi santai ) Oke kita lanjut ke tahap selanjutnya . Mungkin bagi kalian yang sudah terbiasa mengedit kode - kode html akan merasa aneh bukan .. "untuk apa membuat kode sebanyak itu kalau hanya untuk membuat tampilan sesingkat itu ??? " hemmm ... kalau di antara kalian ada yang berpikir seperti itu .. jawabannya adalah salah besar .. loh kok salah besar ...!!!! jadi begini .. dalam kode kode css di atas bisa kalian lihat bahwa body , h2 dan ,P ..mempunyai kode - kode yang berbeda .. 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 kodehtml yang telah kalian desain sebelumnya .. gmana ??? masih belum ngerti .. aihhh kok ga ngerti ngerti sii ... pusing deh .." jadi intinya kode - kode css dapat di gunakan untuk banyak desain kode kode html .."bagaimana ????? udah paham belumm ???? oke deh aldi asumsikan kalian sudah paham .. ayo lanjut ke tahap selanjutnya ...penulisan kode css ( SYNTAX ) dalam penulisan kode css, itu BERBEDA dengan kode-kode html ... di dalam css terdapat selector dan declarations .. lihat gambar agar lebih jelas ..contoh gambar itu aldi copet dari w3school ..hihihihihi , abis susah nyari gambar yang serupa ..dari contoh gambar di atas .. dapat di simpulkan bahwa :selector :simbol kode - kode yang di pakai untuk nantinya dapat di terapkan pada html ,sebagai contoh ( body, h1,h2,h3,a,header,outerwrapper, dan lain sebagainya .. untuk lebih jelasnya pada artikel selanjutnya akan aldi postingkan berbagai macam fungsi kode kdoe css nya .. karenatidak mungkin untuk menjelaskan semua kode kode css hanya dalam 1 postingan "banyak banget broo ... capek aldi nulisnya" )Declaration :bisa kita lihat dari contoh di atas bahwa di dalam declaration terdapat pula properti properti dan juga value ..jadi intinya declaration itu adalah kumpulan dari properti dan juga value .yang di ringkas dalam satu paket dengan awalan pembuka "{" dan di tutup dengan "}" ...Property :proeprty adalah atribut - atribut style yang dapat kalian ubah .untuk mendesain html sesuai ke butuhan blog / web kalian . dalam setiap properti memiliki Value ( nilai ).Value :Value adalah nilai - nilai dari property seperi yang telah aldi jelaskan tadi sebelumnya ..css comment ( tulisan yang tidak terbaca oleh mesin ) atau biasa di sebut comment ..untuk menambahkan tulisan coment hal yang harus anda lakukan adalah menambahkan kode "/*" pada awal kata dan di akhiri dengan kode "*/" .. contoh /*Disini tulisan comment*/ p { text-align:center; /*Di sini tulisan yang tidak terbaca */ color:black; font-family:arial; }huh .. capek juga yaa ngetik ... aldi ngopi dulu yaa .. aihhh .. beli donkk .. weeee heheheheheheh ... oke lanjut . .mau ????fungsi ID dan CLASS pada CSSFungsi ID : ID di gunakan untuk style elemen tunggal yang unik dan biasanya mempunyai banyak element-element lain di dalamnya. ID di lambangkan dengan simbol "#" ( pager ) ID di tulis ke html / body dengan style "" dan di tutup dengan kode contoh singkat ID#namaselector { text-align : center; color : red; background : #ffffff; margin :0px; padding:10px; } Dari contoh di atas dapat di simpulkan bahwa pemakaian ID dengan selector "namaselector" ...untuk penulisan pada html / body menjadi seperti di bawah ini : dan di tutup ingat !! di atas hanya contoh .. untuk isi dari "namaselector" adalah isi dari berbagai macam kodekode yang kalian gunakan dalam membangun web/blog kalian sendiri .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 . Class di lambangkan dengan simbol "." ( titik ) lihat contoh di bawah untuk lebih jelasnya :.center {text-align:center;} jika kalian menggunakan class selector dalam menggunakan css .. kalian juga dapat langsung menambahkan kode html khusus untuk menambahkan kode css ke dalamnya . dari contoh di atas .. akan aldi tambahkan kode html h1 agar letaknya menjadi di tengah ( di tengah karena css class di atas menggunakan center .. jika kalian menggunkan kode css lain juga bisa .. asalkan sesuai ketentuan . untuk penjelasan ini akan aldi jelaskan pada postingan selanjutnya )hasil penggabungan kode di atas dengan h1 . p.center {text-align:center;}Maka hasil dari kode html untuk P akan menjadi di tengah ...bagaimana ???? udah ngudeng belumm ......pasti bagi kalian yang baru pertama kali mendengar kode - kode di atas, sekarang cuma bisa ngangguk - ngagguk aja yaaa ...hehehehehehhehe .. sabar aja yaaa semua butuh proses .oke kita lanjut .. kalian yang telah membaca tutorial panjang di atas .. jangan - jangan belum tahu lagi dimana letak kode kode css pada blog / web di tempatkan ..aihhh kalo sampe ke jadian kaya begitu bisa kacau urusannya ini .. ..oke deh mungkin di antara kalian jika memang benar masih ada yang belum tahu di mana letak kode - kode css di letakan .. sekarang biar aldi kasih tahu .. lihat tutorial di bawah : catatan kalau aldi sendiri biasa meletakan kode CSS itu tepat di atas kode "]]>" .. akan tetapi biar lebih jelasnya .. semua kode css itu terdapat setelah kode "" dan sebelum kode ""..untuk peletakan kode css secara lengkap .. sebenarnya ada 3 cara dalam peletakannya loh .. 1 . External style sheet2 . Internal style sheet 3 . Inline styleaduhhhh capekk aja yaa ....untuk tutorial meletakan kode css dengan 3 cara tersebut .. aldi jelaskan pada tutorial css berikutnya saja yaa .. capekk brooo ... mudah - mudahan tutorial - tutorial mengenai CSS di atas dapat berguna yaa .. semoga bermanfaat ....Letak kode CSS | Belajar CSSMenerus kan postingan aldi sebelumya, 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 . jika kalian sudah membaca tutorial belajar css pada postingan yang pertama, mari kita lanjut . Pada kesempatan kali ini aldi akan menjelaskan kepada kalian belajar css dalam hal "dimana meletakan kode-kode css" pada template blog .mungkin di antara kalian yang sudah pernah membaca tutorial-tutorial tentang belajar css akan familiar dengan postingan aldi kali ini. meletakan css , yaa itulah langkah pertama untuk kalian dalam belajar css, bagaimana tidak jika kalian ingin belajar css tentunya kalian pun harus tahu cara meletakan kode-kode css itu pada template . Mungkin di antara kalian ada yang sudah pernah membaca tutorial belajar css, dan pastinya kan sudah tahu dengan kata-kata External style sheet -Internal style sheet - Inline style . kebanyakan para blogger mania tidak tahu dengan kata-kata tersebut, walaupun mereka secara praktek sudah paham, akan tetapi masih ada saja kok yang tidak tahu dengan kata-kata tersebut .dalam hal ini kalian bagaikan perahu tanpa dayung . yaitu kalian hanya berlayar tanpa bisa di kendalikan . hehehe .maksudnya apa ya???? .. kalian mau tahu .. beneran pengen tahu ..??? jadi begini : ..nah iya begitu deh pokonya .. 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. pastinyakan kalian sudah paham. oke deh kok aldi jadi muter-muter gini yaa .. langsung aja yuk belajar css , lihat tutorial belajar css di bawah ini :.. External style sheet Pertama-tama mari kita belajar meletakan kode css dengan cara External style sheet .apakelebihan menggunakan external style sheet ???? .. 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, 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 . Cara menggunakan penempatan External style sheet css ini hal perlu kalian tambahkan adalah kode pada bagian header template .untuk tutorial belajar css kali ini intinya adalah kalian letakan kode setelah kode dan sebelum kode . untuk menggunakan fungsi letak External style sheet css pada blog template kalian adalah dengan memanfaatkan link external pada page halaman kalian .untuk lebih jelasnya lihat contoh pem belajar an penempatan css ini: Dari contoh penempatan kode css di atas mungkin belumlah begitu jelas, akan tetapi inti dari letak kode css dengan menggunakan cara External style sheet ini, yaa seperti itulah .. padadasarnya kode css itu tidak lah berisi kode-kode html. kode html hanya berada setelah kode dan di akhiri dengan kode . jadi cara untuk menggunakan fungsi External style sheet css ini, 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 . untuk lebih jelasnya seperti inilah kira-kira jadinya :a {color:#FFF;} a :hover {color:Navy;} hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} 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. akan tetapi kelebihan menggunakan fungsi External style sheet ini adalah kalian dapat menerapkan fungsi css tersebut hanya pada satu page halaman . udah paham belum .. ??? 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 .aldi rasa cukup untuk belajar sistem penempatan kode css dengan cara external style sheet nya . oke lanjut ..Internal Style SheetDalam belajar penempatan kode css selanjutnya adalah Internal Style Sheet, 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,maksud unik di sini adalah kode css yang secara langsung memang di buat oleh si pembuat kode css ini ( kalo dalam bahasa betawi nya .. emang dari sononya ) , dalam hal belajar letak kode css dengan cara ini, kalian harus setidaknya paham dengan kode-kode css sistem unik . seperti "a"- "hr" -"p" -"body" dan lain-lain . jadi dalam menggunakan belajar sistem css internal style sheet ini kalian akan memasukan kode css yang ber type unik ke dalam kode . Dalam peletakan kode css dengan sistem Internal style sheet ini adalah kalian harus menaruhnya dengan kode dan di akhiri dengan kode dan peletakannya pun berada setelah kode dan sebelum kode .untuk lebih jelasnya biar kalian tidak malah jadi bingung nantinya dalam belajar css , lihat contoh : hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} Kita dapat lihat bersama, di dalam meletakan kode css dengan fungsi Internal Style Sheet ini .kode yang kalian perlu tambahkan hanyalah kode dan di akhiri dengan kode . mungkin di antara kalian yang sering ngoprek-ngoprek template blog akan sering melihat kode-kdoe seperti ini bukan ??? hayooo ngaku. jika ya , berarti template blog kalian telah menggunakan sistem penempatan kode css dengan cara ini . betul ora son . Inline Styles Cara selanjutnya dalam belajar penempatan kode css adakah Inline style sheet, dalam menggunakan cara sistem kerja inline style sheet ini kalian akan kehilangan banyak keuntungan dari style sheet dengan mencampurkan konten dengan presentasi. akan tetapi keuntungan kalian dalam belajar penempatan kode css ini adalah penggunaanya yang hemat , jadi secara otomatis loading blog akan menjadi lebih cepat di karenakan fungsi kode css yang sedikit , (Gunakan metode ini untuk menghemat !!! ) .Dalam hal belajar menggunakan metode letak kode css inline style sheet . kalian menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS.untuk lebih jelasnya dalam proses belajar letak css dengan metode inline style sheet ini . lihat contoh . Ini adalah paragraf. Dari contoh di atas dapat kita lihat bersama, bahwa atribut css di gabungkan dengan properti css color dan margin . jadi hasil dari atribut css tersebut akan menghasilkan seperti apa yang telah di terapkan di atas yaitu tulisan dengan paragraf akan berwarna biru dan akan berjarak 20px ke kiri .mungkin kalian masih ada yang belum paham yaa .. 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 . jadi begini, mungkin ini sedikit melenceng dari topik pembahasan ... tapi engga apa deh aldi tulis juga . fungsi margin dari contoh di atas maksudnya adalah margin-left yaitu jarak tulisan dengan tepi kiri atau jarak dari kiri dengan tulisan .. 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. lihat gambar :untuk lebih jelasnya nanti akan aldi postingkan artikel tentang margin dan padding ini deh .. mungkin engga lama lagi .Keterangan Penempatan Metode-Metode di atas ... Multiple style sheetMultiple style sheet ini terjadi apabila internal style sheet berada dalam link external style sheet. dapat kita buktikan di sini , jika kalian menggunakan kode css dengan metode internal style sheet dan kalian meletakannya di dalam metode external style sheet , maka fungsi atributatribut yang ada di dalam internal style sheet akan di wariskan oleh metode external style sheet ..bingung yaa ??? loh kok bingung .. oke deh lihat contoh aja yukk .. biar belajar lebih semangat !!! Pada contoh ini aldi menggunakan atribut h1 pada external style sheet : h1 { color:Navy; text-align:right; font-size:20pt; } Dan kali ini aldi akan menggunakan atribut h1 pada internal style sheet: h1 { text-align:left; font-size:20pt; margin:10px; padding:10px }Jika halaman dengan internal style sheet juga link ke external style sheet,maka atrbut properti untuk h1 akan menjadi:h1 { color:Navy;text-align:left; font-size:20pt;margin:10px; padding:10px }Dapat kita lihat bersama, bahwa internal style sheet mendapatkan warisan warna"color" dari external style sheet .nah itulah sistem kerja dari metode - metode di atas , jika kalian ingin belajar CSS sebaiknya itu dululah yang perlu kalian pahami . mungkin di antara kalian ada yang beranggapan bahwa cara-cara penempatan kode-kode di atas tersebut tidaklah penting . mungkin kalian benar .. atau mungkin kalian SALAH BESAR..bagaimana tidak , kalian sudah paham / familiar dengan kode-kode css akan tetapi kalian tidak paham dengan dasar-dasar penempatan kode css tersebut ..!!! 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 .Catatan: Jika link external style sheet ditempatkan setelah internal style sheet pada HTML, maka external style sheet akan menimpa internal style sheetuntuk melihat tutorial-tutorial belajar CSS lainnya silakan kalian lihat pada bagian atas blog ini . atau mungkin kalian ingin belajar html terlebih dahulu ...??? sama seperti tutorial css . silakan kalian lihat pada bagian atas blog ini .. terimakasih .!!semoga bermanfaat.Belajar CSS : Mengubah Background BlogBelajar CSS : cara mengubah background halaman pada blog / website kalian .sebenarnya mudah untuk mengubah background pada halaman blog dengan menggunakan kode css. apa lagi untuk kalian yang sudah pernah belajar css atau setidaknya sudah familiar dengan kata css . namun bagi anda yang belum tahu sama sekali tentang css dan ingin belajar CSS. aldi sarankan kalian untuk membaca artikel aldi sebelumnya tentang langkah awal dalam belajar CSS . Sudah di baca belum ??? oke deh kalo kalian memang sudah paham , ayo lanjut .. Dalam belajar kode css untuk ubah background halaman blog hal yang perlu kalian tambahkan adalah yaa kode background donk. akan tetapi masalahnya banyak para blogger mania yang tidak tahu dimana meletakannya pada template mereka .jika kalian kebingungan untuk mengubah background halaman blog kalian dengan kode css, baiklah biar aldi kasih tahu caranya . Jika kalian ingin belajar mengubah kode css untuk background, kalian harus cari dulu kode css "body" mungkin diantara kalian masih ada yang kebingungan mencari-cari dimana kata body tersebut di letakan ??? jika yaa .. 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. => jika kalian susah untuk menemukannya .. tekan F3 / ctrl+F .. kemudian ketikan kata "body" . => Sudah ketemu belum ??? kalo belum kalian bisa mencarinya secara manual juga, kira-kira letaknya ada di daerah atas kok .. =>Mudahkan Belajar CSSoke jika kalian sudah sampai ketahap yang barusan aldi jelaskan atau kalian sudah menemukan kata body pada template blog kalian . sekarang lihat kebawah sedikit dan kalian akan menemukan kata : "background " . biasanya kode css background tersebut telah memiliki atribut-atribut yang telah terpasang secara otomatis. sekarang kalian ubah atribut background tersebut .. lihat contoh agar lebih jelas : Sebelumnya saya ingat kan bahwa contoh kode di bawah ini tidak lah pada dasarnya .harus sama dengan template blog kalian. karenasesungguhnya semua template blog itu berbeda-beda akan tetapi mempunyai fungsi yang samaatribut 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" ); width: 100%; color: #000000; font-size: 13px; font-family: Arial; margin: 0 auto 0; padding:0; }Langkah selanjutnya mungkin kalian pun sudah tahu bukan setelah melihat contoh di atas ... jika kalian menjawab alamat url background yang harus di ubah !!!.. jawabannya adalah 100% tepat .karena yaa memang untuk mengubah beckground halaman blog dengan kode css, yaa background body lah yang harus di ubah . . oke deh sekarang kita langsung ubah saja kode css tersebut dengan background yang berbeda .. Sebelumnya ingin aldi jelaskan bahwa dalam mengubah background suatu halaman blog, kalian dapat mengubah CSS background tersebut dengan kode warna dan juga CSS background dengan alamat gambar .Apabila kalian ingin mengubah css background kalian dengan dengan kode warna . yang kalian butuhkan hanya menambahkan kode css background tersebut dengan kode warna saja tanpaadanya alamat url gambar .lihat contoh pemasangan kode css background di bawah ini untuk lebih jelasnya :body { background :#ffffff; width: 100%; color: #000000; font-size: 13px; font-family: Arial; margin: 0 auto 0; padding:0; } 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 . 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. 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 .itu jika kalian menerapkan kode di atas pada background template blog kalian sendiri. Mungkin jika di antara kalian masih ada yang bingung dengan tutorial di atas, yaa harap sabar aja yaa .. karena yang namanya belajar itu butuh proses bukan !!!atau memang aldi yaa yang menerangkannya kurang jelas .. jadi kalian belajarnya acak-acakan dehh ..tapi kalo menurut aldi sii tutorial belajar css untuk mengubah background body di atas sudah cukup jelas .. hehhe.. mungkin di antar kalian ada saja yaaa yang belum paham ,oke deh agar kalian lebih mahir lagi untuk mengubah background body kalian agar tampilan blog atau website menjadi lebih menarik dengan CSS.. 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 ..mungkin kode-kode html warna yang aldi ambil dari alamat http://www.w3schools.com/html/html_colors.asp dan allblogtools.com ini dapat sedikit membantu kalian.Silakan kalian arahkan saja yaa kemudian klik pada warna yang kalian sukai. . 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 6666FF669900 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 FFFFFFMungkin di antara kalian juga ada yang berminat untuk belajar mengganti css background dengan kode warna di antar hitam dan putih ??? .. 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,0,0) rgb(8,8,8) rgb(16,16,16) rgb(24,24,24) rgb(32,32,32) rgb(40,40,40) rgb(48,48,48) rgb(56,56,56) rgb(64,64,64) rgb(72,72,72) rgb(80,80,80) rgb(88,88,88) rgb(96,96,96) rgb(104,104,104) rgb(112,112,112) rgb(120,120,120) rgb(128,128,128) rgb(136,136,136)#909090 #989898 #A0A0A0 #A8A8A8 #B0B0B0 #B8B8B8 #C0C0C0 #C8C8C8 #D0D0D0 #D8D8D8 #E0E0E0 #E8E8E8 #F0F0F0 #F8F8F8 #FFFFFFrgb(144,144,144) rgb(152,152,152) rgb(160,160,160) rgb(168,168,168) rgb(176,176,176) rgb(184,184,184) rgb(192,192,192) rgb(200,200,200) rgb(208,208,208) rgb(216,216,216) rgb(224,224,224) rgb(232,232,232) rgb(240,240,240) rgb(248,248,248) rgb(255,255,255)Jika menurut kalian kode-kode warna di atas tersebut masih kurang dapat membantu , kalian dapat mencarinya sendiri di google dengan kata kunci kode warna html ... ( mungkin lain kali seharusnya aldi membuat postingan yang berisi mengenai kode warna sendiri yaa .. hehhhehe .. jadi ngerepotin web dan blog orang mulu nih jadinya ..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 . Jika di lihat dari judul postingan kali ini pun, aldi rasa kalian juga membaca artikel ini yaa untuk belajar yang satu ini bukan ??? betul ora son ..hehehe ... 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 .akan tetapi untuk jika kalian ingin mengubah background blog kalian dengan sebuah gambar tentunya gambar tersebut haruslah mempunyai alamat url ( gambar mempunyai link ) , 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.photobucket.com=> Untuk meng upload gambar ke photobucket.com kalian di wajibkan untuk mendaftar terlebih dahulu di www.photobucket.com Jika kalian sudah mempunyai alamat gambar untuk di pasangkan pada background blog kalian.. silakan kalian ikuti petunjuk contoh pemasangan css background halaman pada blog sebagai berikut :body { background :#FFF url(di sini alamat link gambar); background-position:bottom ; width: 100%; color: #000000; font-size: 13px; font-family: Arial; margin: 0 auto 0; padding:0; }Bisa kita lihat bersama di dalam pemasangan css background blog dengan gambar, yang perlu di tambahkan adalah alamat dari gambar tersebut ..misalkan contoh alamat tersebut aldi beri tanda warna merah .. 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 ..kira-kira maksudnya seperti ini : background-position adalah Letak posisis pengambilan gambar background pada saat layar halaman tampil di blog ataupun web kalian .misalkan .. => background-position : bottom ; ( maka posisi pengambilan background akan mengambil bagian bawah ) => background-position : top ; ( maka posisi pengambilan background akan mengambil bagian di atas )=> background-position : left ; ( posisi pengambilan background akan mengambilbagian samping kiri ) => background-position : right ; ( posisi pengambilan background akan mengambil bagian samping kanan ) dalam fungsi kode css background-positio ini pun dapat di gabungkan . misal kalian ingin hanya mengambil gambar dengan posisi pengambilan di kanan dan di atas , maka atribut properti yang harus di tambahkan adalah ( right top ) .. jadi kira-kira seperti ini jadinya : (background-position : right top ;).. mungkin masih bingung yaaa kalian .. lihat contoh aja deh !! => background-position : bottom right ; ( posisi background di kanan bawah ) => background-position : top right; (posisi background di kanan atas )=> background-position : bottom left; ( posisi background di kiri bawah ) => background-position : top left; ( posisi background di kiri atas )Sementara untuk menghentikan perulangan pada background blog jikalau background blog tersebut lebih kecil dari pada ukuran yang template nya .. yaitu dengan menambahkan kode background-repeat : no-repeat; yang dimaksud background-repeat ini adalah perulangan pada background yang kalian pasang di template kalian .. 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;) , untuk lebih jelasnya dalam belajar CSS perulangan background silakan kalian lihat di bawah ini saja yaa .. => background-repeat : no-repeat; ( untuk menghentikan perulangan pada background ) => background-repeat:repeat-x; (untuk mengambil background secara horizontal ) Dari semua tutorial belajar memasang background di atas dapat di gabungkan sesuai dengan kebutuhan kalian masing-masing ,.. jika di antara kalian masih ada yang belum ngerti juga .. aldi kasih contoh penggabungannya juga dehh ..body { background :#FFF url(di sini alamat link gambar);background-position:top ; background-repeat:repeat-x; width: 100%; color: #000000; font-size: 13px; font-family: Arial; margin: 0 auto 0; padding:0; } Bagaimana sudah paham belum ??? Seperti yang telah aldi jelaskan tadi yaitu maksud dari tulisan berwarna merah adalah contoh alamat gambar tersebut, berwarna biru adalah posisi pengambilan gambar background dan tulisan berwarna ungu adalah pengambilan background secara horizontal . Dalam proses penulisannya masih bisa di singkat lagi lohh .. seperti ini :body { background :#FFF url(di sini alamat link gambar)repeat-x right top; width: 100%; color: #000000; font-size: 13px; font-family: Arial; margin: 0 auto 0; padding:0; } Lebih simple lagikan teman ????..hmmmm .. 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 !!! .. tenang saja kok aldi akan memberikan sedikit tips dan contoh background yang boleh kalian copy alamat nya .. 1. Tips belajar memasang background pada blog => usahakan agar background sesuai dengan warna sekitar tampilan blog anda setidaknya miripmirip saja deh , di karenakan jika background dan tampilan warna sekitar berebeda jauh ..pastinya akan membuat pusing para pengunjung blog tersebut .. dan akhirnya pengunjung punakan bosan untuk berkunjung ke blog tersebut bukan .. => jangan terlalu menggunakan background yang banyak warna nya atau background yang berwarna-warni dan juga jangan terlalu memasang background yang berlebihan .. ( sebaiknya pasang background yang simple aja deh ) 2. Contoh untuk inspirasi anda dalam belajar memasang background blog ,( untuk link, tepat berada di bawah gambar )http://t2.gstatic.com/images?q=tbn:ANd9GcQdMuJc5npoowGslLvmXuhy7ekTYTIAYsE67QbZtEv JDbtV7nHswwhttp://t3.gstatic.com/images?q=tbn:ANd9GcSJ4MbkgUxqh2jgr96qEAPM_Mk8WPToJ_gRjesbz7nqUUBUxTHjZMj1hfyhttp://t0.gstatic.com/images?q=tbn:ANd9GcR8TK4cpkyw2dK9X_zjGcmxURU56tf8egzZRgYkwc5 6y4CBUDxBhttp://t2.gstatic.com/images?q=tbn:ANd9GcQVtHTZSsZeuSTUD4WeqUn8cL_rvxvX1n0IPrWqKi6 lCONh5pUVDAhttp://t0.gstatic.com/images?q=tbn:ANd9GcRzWe9_0qibM_QJO7ptMV3ItdHiFht3vP6RRN5NGp OeK71ebmhPzwhttp://t0.gstatic.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 .. 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 )http://www.google.com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid= gQfsX_r5rFc69M:&imgrefurl=http://www.narutopictures.us/pic/title/Naruto%2BTeam%2BHebi%2BBackground%2BPicture/&docid= P1_OhNJ-MSMThM&imgurl=http://www.narutopictures.us/uploads/images/Naruto_Team_Hebi_Background_Picture.jpg&w=1024&h= 768&ei=NBvETrmCNsnirAfmqbHoCw&zoom=1http://www.google.com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid= 4nvYvGAqFPZPGM:&imgrefurl=http://anime-wallpapers.com/naruto/naruto-and-sasukebackground.html&docid=o8fuDERllcmdZM&imgurl=http://animewallpapers.com/images/1024x768/naruto-and-sasukebackground.jpg&w=1024&h=768&ei=NBvETrmCNsnirAfmqbHoCw&zoom=1http://www.google.com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid=x QPy8LT4mOYa7M:&imgrefurl=http://narutowallpaper.blogspot.com/&docid=iRkmeoh4MD8WJM&imgurl=http://bp1.blogger.com /_rg7WY6fRQ4M/Rwp3_4WOg2I/AAAAAAAAAYk/f1qsIeBveCA/s400/Naruto%25 2BWallpaper%252BUchiha%252BSasuke%252B2.jpg&w=400&h=300&ei=NBvETrm CNsnirAfmqbHoCw&zoom=1http://www.google.com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid= 4cao2ySnyr-mBM:&imgrefurl=http://www.wallpaperdesktops.net/anime/naruto-wallpaper02.html&docid=J2JN8p_sNbLBzM&imgurl=http://www.wallpaperdesktops.net/wpcontent/uploads/2011/06/Naruto-wallpaper02.jpg&w=1024&h=768&ei=NBvETrmCNsnirAfmqbHoCw&zoom=1http://www.google.com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid= NCZ7OAGVqQHmiM:&imgrefurl=http://narutowallpaperz.net/index.php/ psp-sakura-haruno-and-uzumaki-narutowallpaper/&docid=bkrxsKVmweD6fM&imgurl=http://narutowallpaperz.net/wpcontent/uploads/2009/02/naruto-sasuke-darkwallpaper.jpg&w=800&h=600&ei=NBvETrmCNsnirAfmqbHoCw&zoom=1http://www.google.com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid= UYh1hjE37t365M:&imgrefurl=http://screensaver104.tk/naruto-shippuden-wallpaper-in3d/&docid=hK4qP94nnAztuM&imgurl=http://screensaver104.tk/wpcontent/uploads/2011/10/naruto-shippuden-wallpaper-in3d.jpg&w=1024&h=768&ei=NBvETrmCNsnirAfmqbHoCw&zoom=1http://www.google.com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid= 8B2yJEQaynzNXM:&imgrefurl=http://www.desktopwallpaperhd.com/wallpapers/archivebackground-wallaper-naruto-uploads-wallpapers-content-anime60237.html&docid=0x1a__mjvpfP1M&imgurl=http://www.desktopwallpaperhd.com /wallpapers/10/3826.jpg&w=1440&h=900&ei=NBvETrmCNsnirAfmqbHoCw&zoom=1http://www.google.com/imgres?q=background+naruto&hl=en&gbv=2&biw=1024&bih=485&tbm=is ch&tbnid= K-kza-boygI1aM:&imgrefurl=http://www.profilethai.com/download/download-8170-more-narutowallpaper1280.html&docid=FVz_eeFjDhQEUM&imgurl=http://www.profilethai. com/download/original/Sasuke-Wallpaper-naruto60339_1280_1024.jpg&w=1280&h=1024&ei=NBvETrmCNsnirAfmqbHoCw&zoom=1Catatan : Mungkin di antara kalian ada yang mempunyai problem ketika ingin mengambil link gambar ternyata link tersebut begitu panjang dan terlihat seperti bukan link .. padahal itu sama loh .. link juga ..dan itu biasanya di saat mengambil link dari google .. nahh jika ada yang mempunyai problem seperti itu jawabannya adalah .. ambil link alamat di googlenya saja , dan jangan ambil alamat background url nya langsung .. simplekan .. hehehe Jika ada gambar yang rusak ataupun ada gambar yang tidak bisa di pakai untuk background halaman blog anda .. silakan coment saja nanti akan aldi cari solusinya . semoga artikel belajar css untuk mengubah background blog ini dapat bermanfaat untuk orang banyak ... selamat mencoba .. tunggu artikel aldi selanjutnya yaa .. tentang belajar css untuk mengubah lebar halaman pada blog ..!!!Cara Membuat Submenu Dropdown Dengan CSS dan JqueryKali ini saya akan membuat menu dropdown bertingkat dengan CSS yang kemudian diberikan sentuhan efek jQuery agar lebih indah. Menu ini sebenarnya merupakan salah satu pesanan teman yang pernah diterapkan disalah satu template website umum berbasis php. Sempat dibuat pusing juga dengan menu jenis ini, berkali-kali melakukan percobaan yang cukup melelahkan dengan beberapa kali error, sekalinya tidak error malah menunya entah berada dimana. Maklum Blogger pemula dan sangat awam dengan yang namanya koding CSS dan jQuery.heheheMari kita buat menu dropdown bertingkat (Multilevel Dropdown MenuLangkah 1 Struktur dasar dari menu dropdown yang akan kita buat menggunakan stuktur XHTML misalnyaseperti dibawah ini:BerandaKontak Arsip jQuery DownloadTutorialBloghack JavaScript 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"}); }); });Fungsi dari masing-masing script jQuery:$(" #nav ul ").css({display: "none"}); // Perbaikan di Opera Kode diatas merupakan perbaikan untuk Opera yang tidak mampu menyembunyikan menu dengan cepat. Pada saat kita menggeser mouse (hover) pada sub menu, maka menu akan memiliki efek berkedip (flicker). $(" #nav ul ") script jQuery digunakan untuk memilih semua daftar yang tidak berurutan (unordered lists - ul) didalam #nav dan kemudian mengesetnya menjadi tidak ditampilkan (display:none).$(" #nav li").hover(function(){ //memberikan efek saat menu dipilih (hover) },function(){ //memberikan efek saat pointer mouse meninggalkan menu }); Kode diatas untuk memberikan efek pada menu sesuai dengan posisi pointer mouse (hovering). Sederhananya memberikan efek pada saat menu dipilih dan tidak dipilih.$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); Kode ini berfungsi untuk menampilkan sub menu pertama yang tersembunyi dari menu yang sedang dipilih. Sedangkan script .show digunakan untuk menampilkan menu dengan durasi waktu yang ditentukan didalam kurung (400). Hal ini akan memberikan efek menampilkan menu yang sangat lembut.$(this).find('ul:first').css({visibility: "hidden"}); Kode ini berfungsi mengembalikan posisi menu kembali tersembunyi melalui blok mode pada akhir animasinya. Menggunakan kode visibility untuk mencegah berkedip (flicker) pada animasi menu.Alhamdulillah langkah demi langkah telah selesai, silahkan lihat hasil akhirnya disini. Dan kembangkanlah menu ini semenarik dan seindah mungkin menurut keinginan anda.Dan jangan lupa klik iklan di bawah yaa "pesan sponsor" sebagai tanda terimakasih ...