ebook computer language
TRANSCRIPT
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 " [email protected]" 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 ...