- Buka program macromedia dreamwever dari komputer Anda.
- Buatlah sebuah dokumen baru dengan jenis misalnya HTML. Pilih menu File -> New, kemudian pilih kategori Basic Page dan gunakan tipe HTML.
- Simpan terlebih dahulu dokumen tersebut. Beri nama misalnya "menu_flash.html". Saran saya, simpanlah di dalam sebuah folder baru, beri nama folder misalnya "menu".
- Masuklah ke dalam layar design.
Pilih menu Insert -> Media -> Flash Button, maka akan muncul sebuah kotak dialog pembuatan tombol flash yang akan digunakan sebagai menu pada website.
- Sample. Menunjukkan preview dari tombol flash yang kita pilih.
- Style. Bentuk dari tombol yang kita bisa kita pilih. Sebagai contoh kita pilih "Slider".
- Button Text. Tulisan yang terlihat pada tombol. Sebagai contoh kita tulis "Home".
- Font. Jenis huruf dari button text.
- Size. Ukuran huruf dari button text.
- Link. Alamat URL yang akan dituju bila tombol menu flash tersebut diklik. Anda bisa memilih halaman/dokumen dari website yang sedang Anda desain pada komputer Anda dengan mengklik tombol Browse. Pada contoh ini kita akan me-link kan ke halaman luar misalnya: "http://www.banditbatak.com". Tuliaslah URL tersebut pada isian Link.
- Target.Untuk memilih target halaman ketika menu tersebut diklik.
- Bg color. Memilih warna background dari tombol flash yang sedang kita buat. Pilihlah transparent dengan mengklik tombol kecil yang berdiagonal warna merah.
- Save as. Nama file flash yang sedang kita buat. Simpanlah dengan nama misalnya "home.swf"
- Setelah semua dirasakan cukup dan benar, klik tombol Save.
- Pada dukumen kerja Dreamweaver akan muncul tombol flash menu yang telah kita buat tadi.
- Kita bisa menambah menu flash baru disamping menu Home yang telah kita buat tersebut. Misalkan kita ingin membuat menu lain yang letaknya sejajar dengan menu Home tersebut sehingga tampil secara horizontal. Terlebih dahulu letakkan pointer di sebelah kanan tombol flash menu Home, kemudian lakukan hal yang sama seperti membuat menu flash dengan nama Home tersebut dari langkah 5 -6. Sebagai contoh saya membuat menu flash baru bernama "Tutorial Website" dengan link : "http://tutorial-website.blogspot.com" dan saya simpan dengan nama "tutorial_website.swf". Hasilnya akan tampak seperti gambar di bawah ini.
- Di dalam folder "menu" yang Anda jadikan sebagai tempat menyimpan dokumen "menu_flash.html" tadi telah bertambah 2 buah file flash yang bernama home.swf dan tutorial_website.swf
Selasa, 27 November 2012
ARTIKEL
Berikut langkah-langkah yang akan kita lakukan untuk membuat menu flash dengan Dreamweaver:
Senin, 19 November 2012
sedikit tentang "perjuangan GITA SESA WANDA CANTIKA melawan kanker ganas"
surat kecil untuk tuhan adalah sebuah buku yang diangkat dari kisah nyata perjuangan seorang gadis remaja Indonesia bernama Gita Sesa Wanda Cantika atau keke melawan kanker ganasnya.
Gadis cantik, pintar dan mantan artis penyanyi cilik berusia 13tahun yang menjadi penderita kanker jaringan lunak pertama di Indonesia. Kanker itu menyerang wajahnya yang cantik dan menjadikannya seperti monster, bahkan dokter pun mengatakan kalau hidupnya hanya tinggal beberapa bulan saja.
Tak mau menyerah, sang ayah terus berjuang agar keke dapat lepas dari vonis kematian. Perjuangan sang ayah menyelamatkan putrinya begitu mengharukan. keke yang menyadari hidupnya akan berakhir kemudia menuliskan surat kecil untuk tuhan untuk terakhir kalinya.
Tuhan memberikan anugerah dalam hidupnya. Keke mampu bertahan bersama kanker itu selama tiga tahun lamanya sebelum akhirnya ia menyerah dan pergi meninggalkanorang-orang yang ia cintai. Kisah hidup perjuangan keke diangkat ke layar lebar pada tahun 2011 dan menjadi film terlaris di tahun yang sama. Menjadikan kisah ini meraih beberapa penghargaan inspiratif dan tentunya menjadi inspirasi bagi siapapun yang menonton dan membacanya.
Gadis cantik, pintar dan mantan artis penyanyi cilik berusia 13tahun yang menjadi penderita kanker jaringan lunak pertama di Indonesia. Kanker itu menyerang wajahnya yang cantik dan menjadikannya seperti monster, bahkan dokter pun mengatakan kalau hidupnya hanya tinggal beberapa bulan saja.
Tak mau menyerah, sang ayah terus berjuang agar keke dapat lepas dari vonis kematian. Perjuangan sang ayah menyelamatkan putrinya begitu mengharukan. keke yang menyadari hidupnya akan berakhir kemudia menuliskan surat kecil untuk tuhan untuk terakhir kalinya.
Tuhan memberikan anugerah dalam hidupnya. Keke mampu bertahan bersama kanker itu selama tiga tahun lamanya sebelum akhirnya ia menyerah dan pergi meninggalkanorang-orang yang ia cintai. Kisah hidup perjuangan keke diangkat ke layar lebar pada tahun 2011 dan menjadi film terlaris di tahun yang sama. Menjadikan kisah ini meraih beberapa penghargaan inspiratif dan tentunya menjadi inspirasi bagi siapapun yang menonton dan membacanya.
CARA MERAKIT PC
Berikut ini akan dibahas mengenai bagaimana cara merakit komputer, terutama bagi mereka yang baru belajar .. dari beberapa referensi yang saya pelajari .. maka berikut ini akan dijelaskan langkah demi langkah cara merakit komputer, mudah-mudahan bermanfaat ..
Komponen perakit komputer tersedia di pasaran dengan beragam pilihan kualitas dan harga. Dengan merakit sendiri komputer, kita dapat menentukan jenis komponen, kemampuan serta fasilitas dari komputer sesuai kebutuhan.Tahapan dalam perakitan komputer terdiri dari:A. Persiapan
B. Perakitan
C. Pengujian
D. Penanganan Masalah
Persiapan
Persiapan yang baik akan memudahkan dalam perakitan komputer serta menghindari permasalahan yang mungkin timbul.Hal yang terkait dalam persiapan meliputi:
- Penentuan Konfigurasi Komputer
- Persiapan Kompunen dan perlengkapan
- Pengamanan
Konfigurasi komputer berkait dengan penentuan jenis komponen dan fitur dari komputer serta bagaimana seluruh komponen dapat bekerja sebagai sebuah sistem komputer sesuai keinginan kita.Penentuan komponen dimulai dari jenis prosessor, motherboard, lalu komponen lainnya. Faktor kesesuaian atau kompatibilitas dari komponen terhadap motherboard harus diperhatikan, karena setiap jenis motherboard mendukung jenis prosessor, modul memori, port dan I/O bus yang berbeda-beda.
Persiapan Komponen dan Perlengkapan
Komponen komputer beserta perlengkapan untuk perakitan dipersiapkan untuk perakitan dipersiapkan lebih dulu untuk memudahkan perakitan. Perlengkapan yang disiapkan terdiri dari:
- Komponen komputer
- Kelengkapan komponen seperti kabel, sekerup, jumper, baut dan sebagainya
- Buku manual dan referensi dari komponen
- Alat bantu berupa obeng pipih dan philips
Buku manual diperlukan sebagai rujukan untuk mengatahui diagram posisi dari elemen koneksi (konektor, port dan slot) dan elemen konfigurasi (jumper dan switch) beserta cara setting jumper dan switch yang sesuai untuk komputer yang dirakit.Diskette atau CD Software diperlukan untuk menginstall Sistem Operasi, device driver dari piranti, dan program aplikasi pada komputer yang selesai dirakit.
Pengamanan
Tindakan pengamanan diperlukan untuk menghindari masalah seperti kerusakan komponen oleh muatan listrik statis, jatuh, panas berlebihan atau tumpahan cairan.Pencegahan kerusakan karena listrik statis dengan cara:
- Menggunakan gelang anti statis atau menyentuh permukaan logam pada casing sebelum memegang komponen untuk membuang muatan statis.
- Tidak menyentuh langsung komponen elektronik, konektor atau jalur rangkaian tetapi memegang pada badan logam atau plastik yang terdapat pada komponen.
Tahapan proses pada perakitan komputer terdiri dari:
- Penyiapan motherboard
- Memasang Prosessor
- Memasang heatsink
- Memasang Modul Memori
- memasang Motherboard pada Casing
- Memasang Power Supply
- Memasang Kabel Motherboard dan Casing
- Memasang Drive
- Memasang card Adapter
- Penyelesaian Akhir
Periksa buku manual motherboard untuk mengetahui posisi jumper untuk pengaturan CPU speed, speed multiplier dan tegangan masukan ke motherboard. Atur seting jumper sesuai petunjuk, kesalahan mengatur jumper tegangan dapat merusak prosessor.
2. Memasang Prosessor
Prosessor lebih mudah dipasang sebelum motherboard menempati casing. Cara memasang prosessor jenis socket dan slot berbeda.Jenis socket
- Tentukan posisi pin 1 pada prosessor dan socket prosessor di motherboard, umumnya terletak di pojok yang ditandai dengan titik, segitiga atau lekukan.
- Tegakkan posisi tuas pengunci socket untuk membuka.
- Masukkan prosessor ke socket dengan lebih dulu menyelaraskan posisi kaki-kaki prosessor dengan lubang socket. rapatkan hingga tidak terdapat celah antara prosessor dengan socket.
- Turunkan kembali tuas pengunci.
- Pasang penyangga (bracket) pada dua ujung slot di motherboard sehingga posisi lubang pasak bertemu dengan lubang di motherboard
- Masukkan pasak kemudian pengunci pasak pada lubang pasak
3. Memasang Heatsink
Fungsi heatsink adalah membuang panas yang dihasilkan oleh prosessor lewat konduksi panas dari prosessor ke heatsink.Untuk mengoptimalkan pemindahan panas maka heatsink harus dipasang rapat pada bagian atas prosessor dengan beberapa clip sebagai penahan sedangkan permukaan kontak pada heatsink dilapisi gen penghantar panas.Bila heatsink dilengkapi dengan fan maka konektor power pada fan dihubungkan ke konektor fan pada motherboard.
4. Memasang Modul Memori
Modul memori umumnya dipasang berurutan dari nomor socket terkecil. Urutan pemasangan dapat dilihat dari diagram motherboard.Setiap jenis modul memori yakni SIMM, DIMM dan RIMM dapat dibedakan dengan posisi lekukan pada sisi dan bawah pada modul.Cara memasang untuk tiap jenis modul memori sebagai berikut.
Jenis SIMM
- Sesuaikan posisi lekukan pada modul dengan tonjolan pada slot.
- Masukkan modul dengan membuat sudut miring 45 derajat terhadap slot
- Dorong hingga modul tegak pada slot, tuas pengunci pada slot akan otomatis mengunci modul.
Cara memasang modul DIMM dan RIMM sama dan hanya ada satu cara sehingga tidak akan terbalik karena ada dua lekukan sebagai panduan. Perbedaanya DIMM dan RIMM pada posisi lekukan
- Rebahkan kait pengunci pada ujung slot
- sesuaikan posisi lekukan pada konektor modul dengan tonjolan pada slot. lalu masukkan modul ke slot.
- Kait pengunci secara otomatis mengunci modul pada slot bila modul sudah tepat terpasang.
Motherboard dipasang ke casing dengan sekerup dan dudukan (standoff). Cara pemasangannya sebagai berikut:
- Tentukan posisi lubang untuk setiap dudukan plastik dan logam. Lubang untuk dudukan logam (metal spacer) ditandai dengan cincin pada tepi lubang.
- Pasang dudukan logam atau plastik pada tray casing sesuai dengan posisi setiap lubang dudukan yang sesuai pada motherboard.
- Tempatkan motherboard pada tray casing sehinga kepala dudukan keluar dari lubang pada motherboard. Pasang sekerup pengunci pada setiap dudukan logam.
- Pasang bingkai port I/O (I/O sheild) pada motherboard jika ada.
- Pasang tray casing yang sudah terpasang motherboard pada casing dan kunci dengan sekerup.
Beberapa jenis casing sudah dilengkapi power supply. Bila power supply belum disertakan maka cara pemasangannya sebagai berikut:
- Masukkan power supply pada rak di bagian belakang casing. Pasang ke empat buah sekerup pengunci.
- HUbungkan konektor power dari power supply ke motherboard. Konektor power jenis ATX hanya memiliki satu cara pemasangan sehingga tidak akan terbalik. Untuk jenis non ATX dengan dua konektor yang terpisah maka kabel-kabel ground warna hitam harus ditempatkan bersisian dan dipasang pada bagian tengah dari konektor power motherboard. Hubungkan kabel daya untuk fan, jika memakai fan untuk pendingin CPU.
Setelah motherboard terpasang di casing langkah selanjutnya adalah memasang kabel I/O pada motherboard dan panel dengan casing.
- Pasang kabel data untuk floppy drive pada konektor pengontrol floppy di motherboard
- Pasang kabel IDE untuk pada konektor IDE primary dan secondary pada motherboard.
- Untuk motherboard non ATX. Pasang kabel port serial dan pararel pada konektor di motherboard. Perhatikan posisi pin 1 untuk memasang.
- Pada bagian belakang casing terdapat lubang untuk memasang port tambahan jenis non slot. Buka sekerup pengunci pelat tertutup lubang port lalumasukkan port konektor yang ingin dipasang dan pasang sekerup kembali.
- Bila port mouse belum tersedia di belakang casing maka card konektor mouse harus dipasang lalu dihubungkan dengan konektor mouse pada motherboard.
- Hubungan kabel konektor dari switch di panel depan casing, LED, speaker internal dan port yang terpasang di depan casing bila ada ke motherboard. Periksa diagram motherboard untuk mencari lokasi konektor yang tepat.
Prosedur memasang drive hardisk, floppy, CD ROM, CD-RW atau DVD adalah sama sebagai berikut:
- Copot pelet penutup bay drive (ruang untuk drive pada casing)
- Masukkan drive dari depan bay dengan terlebih dahulu mengatur seting jumper (sebagai master atau slave) pada drive.
- Sesuaikan posisi lubang sekerup di drive dan casing lalu pasang sekerup penahan drive.
- Hubungkan konektor kabel IDE ke drive dan konektor di motherboard (konektor primary dipakai lebih dulu)
- Ulangi langkah 1 samapai 4 untuk setiap pemasangan drive.
- Bila kabel IDE terhubung ke du drive pastikan perbedaan seting jumper keduanya yakni drive pertama diset sebagai master dan lainnya sebagai slave.
- Konektor IDE secondary pada motherboard dapat dipakai untuk menghubungkan dua drive tambahan.
- Floppy drive dihubungkan ke konektor khusus floppy di motherboard
9. Memasang Card Adapter
Card adapter yang umum dipasang adalah video card, sound, network, modem dan SCSI adapter. Video card umumnya harus dipasang dan diinstall sebelum card adapter lainnya. Cara memasang adapter:
- Pegang card adapter pada tepi, hindari menyentuh komponen atau rangkaian elektronik. Tekan card hingga konektor tepat masuk pada slot ekspansi di motherboard
- Pasang sekerup penahan card ke casing
- Hubungkan kembali kabel internal pada card, bila ada.
- Pasang penutup casing dengan menggeser
- sambungkan kabel dari catu daya ke soket dinding.
- Pasang konektor monitor ke port video card.
- Pasang konektor kabel telepon ke port modem bila ada.
- Hubungkan konektor kabel keyboard dan konektor mouse ke port mouse atau poert serial (tergantung jenis mouse).
- Hubungkan piranti eksternal lainnya seperti speaker, joystick, dan microphone bila ada ke port yang sesuai. Periksa manual dari card adapter untuk memastikan lokasi port.
Senin, 05 November 2012
KEBOHONGAN SEORANG ANAK
Pada suatu hari, ada seorang gadis cantik yang masih berusia 20th. Nama gadis itu adalah Ayu, ia tinggal disebuah perkampungan kecil yg ada di kota bandung. Ayu tinggal bersama ayah dan ibunya. Ayahnya bekerja sebagai pembersih sawah seorang juragan kaya yang ada di desanya dan ibunya bekerja sebagai pencuci keliling, sedangkan Ayu hanya menganggur dirumah. Ia tidak tahu mau bekerja apa, karna ia hanyalah murid tamatan SMP.
Keesokan harinya, Ayu meminta izin kepada ayah dan ibunya untuk mencari pekerjaan di ibukota Jakarta. Kedua orang tuanya pun ragu memberikan izin kepada Ayu, karena mengingat kalau Ayu hanyalah murid tamatan SMP. Didesa saja tidak ada yg mau menerima Ayu, apalagi di ibukota?
Karena ayah dan ibunya kasian kepada Ayu, maka mereka memberikan izin kepada Ayu untuk mencari pekerjaan di jakarta.Ibu Ayu sangat cemas dengannya, karena Ayu adalah anak satu-satunya yang sangat ia cintai.
*DiJakarta*
Setibanya di Jakarta, Ayu langsung saja mencari kontrakan untuk ia tinggal. Setelah mendapatkan kontrakan Ayu pun langsung berkeliling kota Jakarta untuk mencari pekerjaan walaupun dengan rasa lelahm, tetapi Ayu tidak pantang menyerah demi ayah dan ibunya.
Sebulan kemudian, Ayu pun tak juga mendapatkan pekerjaan. Sekali ia melamar pekerjaan orang perusahaan itu langsung menolaknya karna ia hanyalah seorang tamatan SMP. Hari demi hari telah ia lewati, tapi pekerjaan tak kunjung datang, sampai-sampai uang Ayu habis tak tersisa. Ia bingung harus bagaimana sedangkan besok ia harus kembali ke kampung halaman. Ia tidak mungkin tidak membawa uang untuk ayah dan ibunya.
Danp pada akhirnya, ia pum menjual 1 ginjalnya kerumah sakit dengan harga Rp.200.000.000. kemudian ia pulang kedesa dengan menggunakan kereta api. Sesampainya di desa ia langsung mencari kedua orang tuanya. Dengan rasa bangga ia memperlihatkan uang yang ia hasilkan dari menjual ginjal, tetapi ia tidak memberitahu kalau uang yang ia dapatkan dari hasil ginjalnya sendiri. Saat ibunya bertanya "darimana kamu mendapatkan uang sebanyak ini nak?" ia langsung menjawab "aku mendapatkan uang ini dari hasil kerkja ku bu, aku bekerja disebuah pabrik besar dijakarta".
Hari demi hari ia lewati disebuah desa kecil, semakin lama badan Ayu semakin lemah sampai-sampai ia tidak sadarkan diri. Saat ia tersadar, ibunya langsung saja bertanya"apa yang terjadi padamu nak?"sambil menagis. Ayu pun menjawab "ibu, ayah maafkan aku. uang yang aku dapatkan karna aku menjual ginjalku". Ayah dan ibunya pun terkejut.
Kemudian ibunya pergi meninggalkan rumah itu, sedangkan Ayu ditemani oleh ayahnya. Keesokan harinya datanglah seorang dokter yang ingin mengajaknya ikut kerumah sakit untuk melakukan operasi pemasangan ginjal. Ayu pun bingung, darimana dokter itu bisa melakukan pemasangan ginjal tanpa biaya sepersenpun.
Setelah operasi itu berhasil, datanglah seorang suster memberikan amplop yang berisi surat dari ibunya.
"Anakku sayang, mungkin kau bertanya siapalah orang yang memberi mu ginjal? Akulah orangnya nak, aku yang memberimu 1 ginjalku. Ibu ingin kau selalu sehat, ibu tidak ingin melihatmu menderita. Kau jagalah ke 2 ginjalmu itu an jangan kau sia-siakan. Ayu tolong kau jaga ayah baik-baik kau turuti perintahnya, karena ialah yang akan merawatmu. Maafkan ibu nak, ibu hanya bisa menulis surat ini, karena ibu tidak ingin melihat kau menangis saat aku berbicara langsung di depanmu. Ini adalah surat terakhir ibu, karena ibu tidak akan kembali untuk selama-selamanya".
Ayu pun langsung menangis, ayahnya hanya bisa berkata sabar karena ayah nya pun juga tak rela kehilangan istrinya tercinta. Ayu menyesal telah menjual ginjalnya, kalai saja ia tidak menjual ginjalnya demi kebahagiaan sesaat mungkin saja kejadian ini tidak akan terjadi dan ia juga tidak akan kehilangan ibunya. Tetapi Ayu tidak akan menyerah untuk membahagiakan ayahnya dan ibu nya yang sudah disurga.
-Cukup sekian:) maaf kalau tidak menarik ceritanya-
Keesokan harinya, Ayu meminta izin kepada ayah dan ibunya untuk mencari pekerjaan di ibukota Jakarta. Kedua orang tuanya pun ragu memberikan izin kepada Ayu, karena mengingat kalau Ayu hanyalah murid tamatan SMP. Didesa saja tidak ada yg mau menerima Ayu, apalagi di ibukota?
Karena ayah dan ibunya kasian kepada Ayu, maka mereka memberikan izin kepada Ayu untuk mencari pekerjaan di jakarta.Ibu Ayu sangat cemas dengannya, karena Ayu adalah anak satu-satunya yang sangat ia cintai.
*DiJakarta*
Setibanya di Jakarta, Ayu langsung saja mencari kontrakan untuk ia tinggal. Setelah mendapatkan kontrakan Ayu pun langsung berkeliling kota Jakarta untuk mencari pekerjaan walaupun dengan rasa lelahm, tetapi Ayu tidak pantang menyerah demi ayah dan ibunya.
Sebulan kemudian, Ayu pun tak juga mendapatkan pekerjaan. Sekali ia melamar pekerjaan orang perusahaan itu langsung menolaknya karna ia hanyalah seorang tamatan SMP. Hari demi hari telah ia lewati, tapi pekerjaan tak kunjung datang, sampai-sampai uang Ayu habis tak tersisa. Ia bingung harus bagaimana sedangkan besok ia harus kembali ke kampung halaman. Ia tidak mungkin tidak membawa uang untuk ayah dan ibunya.
Danp pada akhirnya, ia pum menjual 1 ginjalnya kerumah sakit dengan harga Rp.200.000.000. kemudian ia pulang kedesa dengan menggunakan kereta api. Sesampainya di desa ia langsung mencari kedua orang tuanya. Dengan rasa bangga ia memperlihatkan uang yang ia hasilkan dari menjual ginjal, tetapi ia tidak memberitahu kalau uang yang ia dapatkan dari hasil ginjalnya sendiri. Saat ibunya bertanya "darimana kamu mendapatkan uang sebanyak ini nak?" ia langsung menjawab "aku mendapatkan uang ini dari hasil kerkja ku bu, aku bekerja disebuah pabrik besar dijakarta".
Hari demi hari ia lewati disebuah desa kecil, semakin lama badan Ayu semakin lemah sampai-sampai ia tidak sadarkan diri. Saat ia tersadar, ibunya langsung saja bertanya"apa yang terjadi padamu nak?"sambil menagis. Ayu pun menjawab "ibu, ayah maafkan aku. uang yang aku dapatkan karna aku menjual ginjalku". Ayah dan ibunya pun terkejut.
Kemudian ibunya pergi meninggalkan rumah itu, sedangkan Ayu ditemani oleh ayahnya. Keesokan harinya datanglah seorang dokter yang ingin mengajaknya ikut kerumah sakit untuk melakukan operasi pemasangan ginjal. Ayu pun bingung, darimana dokter itu bisa melakukan pemasangan ginjal tanpa biaya sepersenpun.
Setelah operasi itu berhasil, datanglah seorang suster memberikan amplop yang berisi surat dari ibunya.
"Anakku sayang, mungkin kau bertanya siapalah orang yang memberi mu ginjal? Akulah orangnya nak, aku yang memberimu 1 ginjalku. Ibu ingin kau selalu sehat, ibu tidak ingin melihatmu menderita. Kau jagalah ke 2 ginjalmu itu an jangan kau sia-siakan. Ayu tolong kau jaga ayah baik-baik kau turuti perintahnya, karena ialah yang akan merawatmu. Maafkan ibu nak, ibu hanya bisa menulis surat ini, karena ibu tidak ingin melihat kau menangis saat aku berbicara langsung di depanmu. Ini adalah surat terakhir ibu, karena ibu tidak akan kembali untuk selama-selamanya".
Ayu pun langsung menangis, ayahnya hanya bisa berkata sabar karena ayah nya pun juga tak rela kehilangan istrinya tercinta. Ayu menyesal telah menjual ginjalnya, kalai saja ia tidak menjual ginjalnya demi kebahagiaan sesaat mungkin saja kejadian ini tidak akan terjadi dan ia juga tidak akan kehilangan ibunya. Tetapi Ayu tidak akan menyerah untuk membahagiakan ayahnya dan ibu nya yang sudah disurga.
-Cukup sekian:) maaf kalau tidak menarik ceritanya-
BELAJAR HTML
HTML (Hypertext Markup Language)
merupakan bahasa yang digunakan untuk membuat website. Menggunakan tag
untuk mendeklarasikan sesuatu dan tag tersebut tidak ditampilkan tetapi
tag tersebut memberi tahu browser bagaimana cara menampilkan dokumen
website. Serta dapat saling berhubungan dengan dokumen HTML lain yang
dikenal dengan istilah link.
Suatu halaman website sebenarnya hanya sebuah halaman teks, jika anda menggunakan browser internet explorer dan anda mengklik view - source, maka anda dapat melihat teks dari web tersebut. Tetapi teks tersebut diterjemahkan oleh browser menjadi halaman website yang enak dilihat. Teks merupakan bahasa universal bagi komputer, yang berarti setiap dokumen teks (termasuk website) yang anda buat melalui Windows dapat dibaca di sistem perasi lain seperti Mac OS, Linux, Unix dan lainnya.
HTML dan hal-hal yang berkaitan dengan website distandarisasi oleh sebuah badan yang disebut World Wide Web Consortium (W3C). Standard terbaru, konsep dan proposal mengenai starndarisasi web dapat dilihat di http://www.w3.org. Standar untuk HTML terbaru adalah HTML 4.0 yang telah didukung oleh bermacam-macam browser seperti Microsoft Internet Explorer, Netscape Navigator, Opera, Mozilla, Safari dan masih banyak lagi. Browser menterjemahkan tag yang terdapat pada dokumen HTML. Kita akan segera membicarakan mengenai tag.
Suatu halaman web merupakan file teks yang berarti anda dapat membuatnya hanya dengan menggunakan notepad saja. Bahkan jika anda masih pertama kali mempelajari HTML, notepad merupakan alat yang tepat. Saya menyarankan untuk menggunakan editplus karena menurut saya enak aja dipakainya, tetapi anda bebas menggunakan teks editor lain.
Sekarang buka saja notepad anda dan kita mulai.
Kode HTML pertama
Buka notepad dan tuliskan kode dibawah ini
Simpan file tersebut dengan nama hello.html didalam suatu folder (misal c:\webku) dan buka file HTML tersebut dengan browser kesukaan anda. Hasilnya seperti ini:
Hello <b>World!!</b>
Oke jadi apa yang dimaksud oleh "<" dan ">", ketika anda menuliskan sesuatu diantara tanda "<" dan ">" maka anda membuat sesuatu yang disebut dengan tag, kalau anda lihat dikamus bahasa inggris tag artinya tanda/label. Sebagai contoh tag <b> maksudnya untuk memulai huruf tebal (bold) dan tag </b> merupakan tag penutup untuk menghentikan huruf tebal.
Sebuah halaman HTML yang baik harus memiliki tag <head> dan <body>, tapi kita akan membicarakan masalah ini belakangan. Yang penting sekarang pahami dulu mengenai tag HTML. Sekarang akan kita pelajari lebih jauh mengenai tag HTML.
Tag HTML dibagi menjadi dua, yaitu tag HTML yang memiliki penutup (containers) atau yang berdiri sendiri (standalone).
Containers
Kebanyakan tag HTML adalah containers (kita sebut containers saja sebab sulit mencari terjemahannya dalam bahasa Indonesia) yang berarti tag tersebut memiliki pembuka (batas awal) dan penutup (batas akhir). Teks yang berada diantara tag pembuka dan penutup akan berubah sesuai dengan fungsi dari tag tersebut. Perhatikan contoh berikut:
Hello <i>World!!</i><br>
Hasil:
Tag <i> berguna untuk memiringkan teks (italic) tag <i> memiliki penutup yaitu </i>. Tag penutup selalu ditandai dengan "/". Contoh diatas terdapat teks World!! diantara tag pembuka <i> dan tag penutup </i> sehingga menghasilkan tulisan World!! yang miring. Tag pembuka memiliki atribut tetapi tag penutup tidak memiliki atribut.
Standalone Tag
Beberapa tag tidak memerlukan penutup sebab tag tersebut hanya berfungsi untuk menempatkan sebuah elemen pada halaman web. Sebagai contoh tag <img> yang merupakan tag untuk memasang sebuah gambar didalam halaman web. Tag lain yang tidak memiliki penutup adalah <br> yang berguna untuk memberi jarak antar teks dan tag <hr> untuk memberi garis. Tag HTML cukup banyak jumlahnya, anda dapat mencarinya dibuku-buku atau mencarinya melalui google untuk mengetahui apa saja jenis tag HTML. Tapi saya akan beritahu yangpenting-penting saja.
Atribut
Atribut dipasang didalam tag pembuka untuk menambahkan fungsi dari tag tersebut. Setiap tag memiliki beberapa atribut dan dipasang sesudah nama tag dibatasi oleh spasi. Urutan atribut tidak perlu diperhatikan. Kebanyakan atribut memiliki nilai yang dipanggil dengan menggunakan tanda "=" sesudah nama atribut. Bingung? coba kode berikut ini dijamin anda mengerti:
Hasilnya:
Hello World!!
Tulisan World!! terletak ditengah tag <font> nah tag <font> memiliki atribut face, size dan color yang dapat anda ubah nilainya. Cobalah untuk mengubah ukuran (size) menjadi 3 atau jenis fontnya ubahlah dari verdana menjadi arial. Kira-kira seperti itu kegunaan atribut. Bagaimana? lanjut?
HTML Entity
Jika anda ingin menuliskan karakter khusus dalam web, maka anda perlu menulisnya menggunakan kode khusus. Kode khusus ini dikenal dengan istilah HTML entity. Sebagai contoh anda ingin menulis seperti ini:
Saya belajar web
Anda lihat ada jarak spasi antara belajar dan web. Anda tidak bisa membuat spasi dengan menekan tombol space bar berkali-kali. Meskipun pada kode HTML hasilnya terdapat jarak namun browser hanya membacanya sekali, jadi sebanyak apapun space bar yang tekan browser hanya membacanya satu spasi. Lalu bagaimana caranya? Spasi dalam HTML memiliki kode HTML entity yaitu jadi untuk membuat seperti contoh diatas anda perlu menulisnya seperti ini:
HTML entity selalu diawali dengan "&" dan diakhiri dengan ";" ada banyak sekali HTML entity anda dapat mencarinya, dan lagi-lagi saya akan menyuruh anda mencarinya sendiri melalui google.
Struktur Dokumen HTML
Tadi sudah saya katakan bahwa HTML yang baik memiliki tag <head> dan <body>. <head> mendefiniskan bagian header dari dokumen HTML yang berisi informasi mengenai dokumen HTML tersebut. Tag <head> tidak memiliki atribut tetapi memiliki container khusus didalam header seperti <base>, <meta>, dan <title>. Tag <body> mendefinisikan awal dari isi website dan ditutup dengan </body>. Tag <body> berisi isi dokumen yang akan tampil di browser anda. Oke sekarang cobalah kode berikut ini:
Hasilnya didalam Microsoft Internet Explorer :
Anda lihat teks yang berada diantara tag <title> muncul dibagian atas browser. Apapun yang anda tulis diantara tag <body> akan muncul sebagai isi dari website anda. Jika anda lihat terdapat tag <body bgcolor="#cccccc"> bgcolor merupakan atribut dari <body> yang berguna untuk memberi warna pada background halaman website. Pelajari dan pahami kode tersebut maka anda akan mudah untuk mempelajari kode selanjutnya.
Susun file Anda
Sangat penting untuk meletakkan file-file HTML anda. Akan lebih baik jika anda membuat folder untuk meletakkan file-file HTML dan didalamnya anda membuat subfolder (misalnya images) untuk menyimpan file-file gambar. Semakin sering anda membuat website anda akan semakin berpengalaman dan mengetahui teknik dalam menyusun file. Jadi ini tergantung pengalaman anda.
index.html
Ketika anda membuka dhimasronggobramantyo.com/belajar.html maka otomatis browser akan membuka file belajar.html. Tetapi jika kita membuka dhimasronggobramantyo.com saja, file apa yang dibuka? Semua server web otomatis akan mencari file index.html.
Karena itu jika website anda memiliki banyak halaman, anda harus memiliki sebuah file index.html yang akan menjadi halaman pertama dari website anda.
Oke, sekarang kita pelajari tag-tag HTML yang penting. Semua kode HTML berikut ini harus ditulis didalam tag <body>
Teks dan Paragraf
Header/judul akan membuat mata pembaca tertuju pada judul dan tertarik untuk membacanya. Dengan menggunakan tag heading maka search engine dapat membaca seberapa penting isi dari suatu website.
Heading merupakan container yang diawali dengan tag <h1> dan ditutup dengan tag </h1>. Ada 6 level heading mulai dari h1 sampai h6.
Cobalah kode berikut ini:
Hasil:
Saya rasa anda dapat dengan mudah memahami kode tersebut, sekarang kita coba tag HTML penting lainnya. <p> digunakan untuk membuat paragraf, ini merupakan salah satu tag yang banyak digunakan, tag penting lainnya adalah <b> untuk menebalkan,<i> untuk memiringkan dan <u> untuk garis bawah
Sekarang coba kode berikut ini:
Bagaimana hasilnya? silahkan anda coba sendiri, jika anda selalu melihat contoh dihalaman ini, anda tidak akan mencoba
Beberapa tag mempunyai atribut ALIGN, termasuk <p> dan <h1> - <h6>. ALIGN berguna untuk membuat teks rata kiri, tengah atau kanan. Cobalah kode berikut:
Hasilnya:
[imghttp://www.dhimasronggobramantyo.com/images/artikel/contohalign.gif[/img
Anda dapat mengubah jenis huruf, ukuran dan warna. Untuk mengubah huruf digunakan tag <font>, tag <font> memiliki atribut seperti face, size dan color. Contoh:
Silahkan anda coba sendiri untuk melihat seperti apa hasilnya
Didalam HTML, untuk memberi jarak anda tidak bisa hanya menekan "enter" saja. Untuk memberi jarak perbaris kita perlu tag HTML yaitu <br> sedangkan untuk spasi seperti yang sudah saya jelaskan tadi, kita perlu menggunakan HTML entity / character entity, untuk spasi character entitynya adalah . Langsung saja coba kode berikut ini:
[/code]
<p>Baris 1<br>Baris 2<br>Baris 3<br>Baris
<b>4</b></p>
[/code]
Hasil:
Baris 1
Baris 2
Baris 3
Baris 4
Untuk memberikan garis horisontal digunakan tag <hr>. Tag <hr> memiliki beberapa atribut. Tag <hr> tidak memerlukan tag penutup jadi tag <hr> merupakan standalone tag. Coba contoh berikut ini:
[/code]
<p>Halo nama saya Telo</p>
<hr width="25%" align="justify">
<p>Saya lagi belajar membuat garis horisontal.</p>
<hr size="4" align="justify">
<p>Matur nuwun</p>
<hr size="3" noshade color="#000000" width="25%" align="justify">
[/code]
Hasil:
Seperti yang anda lihat, anda bisa memasang banyak atribut dalam satu tag. Pada tag <hr> terdapat atribut yang tidak memiliki nilai yaitu noshade. Memang dalam beberapa tag HTML terdapat atribut-atribut yang tidak memiliki nilai. Salah satunya adalah noshade yang berarti menghilangkan bayangan pada garis. Anda dapat melihat perbedaan tag <hr> yang menggunakan noshade dengan yang tidak pada kode diatas.
Links
Oke anda telah membuat banyak halaman HTML, sekarang bagaimana caranya anda berpindah dari satu halaman ke halaman yang lain? Apakah saya perlu menuliskan alamatnya di browser? Link adalah jawabannya. <a> merupakan tag HTML untuk membuat link agar kita dapat berpindah ke halaman lain. Tag <a> memiliki atribut yang sangat penting yaitu href. Langsung saja coba kode berikut ini:
My [/code] <a href="http://lordarea.co.cc">Homepage</a> [/code]
Hasil:
My Homepage
Jika anda lihat, maka teks homepage telah berubah menjadi link, jika anda klik maka browser akan menuju alamat yang tertera pada atribut href. Sekarang jika anda memiliki banyak file HTML dalam satu folder, apakah saya perlu menggunakan http:// untuk melinknya? tentu tidak anda cukup menulis nama filenya saja, asalkan file tersebut berada satu folder dengan file yang berisi link. Contoh:
My <a href="contact.html">homepage</a>
Hasil:
My homepage
Images
Pertengahan tahun 90'an website-website yang ada tidak memiliki gambar, karena browser yang ada tidak memiliki kemampuan untuk menampilkan gambar. Tetapi sekarang website tanpa gambar akan terlihat membosankan, tetapi website dengan banyak gambar akan terlihat menyebalkan, nah lo. Jadi gunakan gambar seperlunya, keluarkan semua imajinasi dan nilai seni anda untuk dapat membuat website yang nyaman dilihat. Saya tidak akan mengajarkan bagaimana cara membuat gambar disini, ada kategori lain diwebsite ini untuk belajar mendesain, anda dapat belajar menggunakan Photoshop. Gambar yang dipasang di website disarankan menggunakan bertipe file gif atau jpg. Untuk memasang image anda memerlukan tag <img>. Tag <img> tidak memerlukan penutup dan memiliki atribut src untuk mengambil gambar dari suatu alamat. Coba contoh berikut ini:
Hasil:
Atribut src disini sama dengan atribut href pada tag <a> yang berisi alamat posisi gambar. Pada contoh kode diatas anda memiliki gambar introhtml_02.gif yang berada pada folder images. Jika anda tidak memiliki file tersebut maka gambar tidak ditampilkan. Atribut width dan height merupakan opsional, tapi saya sarankan untuk mencantumkannya agar browser mengetahui ukuran gambar apabila gambar gagal ditampilkan. Atribut alt berguna untuk menampilkan teks pada gambar jika gambar gagal ditampilkan atau belum selesai ditampilkan. Anda dapat memberikan garis tepi pada gambar dengan menambahkan atribut border
Hasil:
Komentar
Anda dapat menuliskan komentar dikode HTML, komentar berguna apabila anda ingin kembali mengutak-atik kode maka anda ingat kode tersebut fungsinya apa. Komentar hanya untuk memudahkan anda saja. Komentar tidak ditampilkan oleh browser. Untuk menulis komentar diawali dengan <!-- dan diakhiri dengan --> lihat contoh berikut ini:
List
Tag list berguna untuk menampilkan list-list. Ada 3 macam jenis list pada HTML. Yang pertama adalah Unordered List <ul>:
Hasil:
* List 1
* List 2
* List 3
Tag <ul> merupakan tag pembuka. Diantara tag <ul> Anda dapat menambahkan tag <li> untuk setiap list yang akan ditampilkan. Tag list lainnya adalah Ordered List <ol> Anda dapat menggunakannya sama seperti tag <ul> Contoh:
Hasil:
1. List 1
2. List 2
3. List 3
Jika anda ingin memulai list tidak dari nomor satu tambahkan atribut start. Contoh:
Hasil:
3. List 1
4. List 2
5. List 3
Tabel merupakan hal yang paling penting dalam membuat interface website anda. Dengan tabel anda dapat memecah layout website menjadi beberapa kolom atau baris. Dengan tabel halaman website anda akan lebih rapih.
Untuk membuat tabel maka diperlukan tag-tag dasar seperti ini :
* <TABLE></TABLE>--Tag ini merupakan containers untuk membuat tabel.
* <TR></TR>--Didalam tabel tag ini berfungsi untuk membuat baris.
* <TD></TD>--Tag untuk membuat kolom. didalam tag <tr> harus terdapat tag <td>, anda bisa menambahkan banyak tag <td> didalam <tr> untuk membuat kolom.
* <TH></TH>--Sama dengan <td> hanya saja berfungsi sebagai header, biasanya digunakan pada baris pertama didalam tabel.
Setiap tag tabel tersebut memiliki banyak atribut. Oke langsung saja coba kode berikut ini:
Contoh:
Hasilnya liat sendiri
Tabel diawali dengan tag <table> dan biasanya memiliki atribut border. Jika border="0" maka garis pada tabel tidak ditampilkan. Biasanya jika kita tidak menampilkan atribut border maka otomatis tabel tersebut juga tidak memiliki garis. <table> memiliki atribut cellpadding untuk memberi jarak didalam kolom dan cellspacing untuk memberi jarak antara kolom. Coba kode berikut ini:
Hasil liat sendiri
Coba anda ubah nilai dari atribut cellpadding dan cellspacing untuk melihat perbedaannya, cobalah untuk mengutak-atik kode diatas dengan mengubah nilai-nilai atributnya.
Setiap tabel memiliki baris dengan menggunakan tag <tr>. Didalam baris perlu sebuah kolom atau lebih, kolom dibuat dengan menggunakan tag <td>. Untuk lebih jelasnya cobalah kode berikut ini:
Hasil liat sendiri di internet explorer
Bagaimana anda mengerti maksudnya kode diatas, coba anda pahami dulu. Pada kode diatas terdapat atribut bgcolor yang berguna untuk memberi warna pada background. Didalam kolom <td> anda dapat menuliskan kode HTML apa saja, bahkan anda dapat memasang tag <table> didalamnya, yang berarti anda memasang tabel didalam tabel. Contoh lainnya:
Hasilnya cari tahu sendiri
Anda lihat ada atribut rowspan="2" ini berguna untuk menggabungkan 2 baris menjadi satu, jika anda ingin menggabungkan lebih dari 2 baris, ubah saja nilainya. Bagaiman susah? coba anda pelajari terus. Jika sudah coba anda pahami kode berikut ini:
Hasil cari tahu... kapan mau belajar kalo liat terus hasilnya
Anda sudah mengetahui dasar-dasar HTML. Masih banyak lagi tag-tag HTML lainnya seperti frames dan form. Saya akan mengajarkan frames diartikel lainnya, tetapi frames harus dihindari dalam membuat website, alasan utama apa yang ada didalam frames tidak terbaca oleh Search Engine. Tag form hanya dibutuhkan apabila anda membuat website dinamis menggunakan bahasa pemrograman web seperti PHP, ASP, Perl atau JSP.
Sekarang kita akan membicarakan tag <META>. Tag <META> digunakan agar search engine mengenal dan dapat mengkategorisasikan website anda, gampangnya agar search engine mengetahui website anda isinya tentang apa. Tetapi tidak semua search engine membaca tag <META> tetapi sebagian besar membaca tag ini, jadi kita perlu menyertakannya pada website kita. Tag <META> berada diantara tag <head> bukan <body> yang berarti isi tag tersebut tidak ditampilkan dibrowser.
Sebenarnya apa sih kegunaan Search Engine dan apa pengaruhnya untuk website? Saya akan jelaskan secara gampang, anda memiliki website katakan websitesaya.com, nah bagaiman milyaran pengguna internet dapat mengetahui kalau ada sebuah situs websitesaya.com diantara ratusan juta situs lainnya. Pengguna internet banyak yang melakukan pencarian melalui search engine seperti google atau yahoo. Jika mereka melakukan pencarian dan situs anda muncul pada hasil pencarian tersebut, maka anda mendapatkan pengunjung yang mengunjungi website anda. Bagaimana agar website saya ada di google atau search engine lainnya? ya dengan menggunakan <META> maka search engine akan mengenali website anda. Sebenarnya prosesnya jauh lebih rumit, search engine memiliki perhitungannya sendiri seperti ranking, backlink, recipocal link, tetapi kita ambil gampangnya saja.
Oke anda sudah mengerti pentingnya tag <META>Tag <META> memiliki atribut yang paling penting Keywords dan DESCRIPTION dimana kita memasukkan deskripsi dan kata kunci yang berhubungan dengan website kita.
Sebagai contoh misalnya kita memiliki website kecoak.com yang berisi bagaimana cara memelihara dan beternak kecoa. Maka kira-kira kita perlu membuat meta seperti ini:
Kira-kira seperti itu, ok anda telah mempelajari HTML, sekarang anda tinggal turun gunung dan mempraktekkan apa yang sudah dipelajari. Teruslah mencoba agar anda semakin ahli. saya juga masih belajar dan butuh bimbingan dari kawan-kawan yang lebih mahir..
Suatu halaman website sebenarnya hanya sebuah halaman teks, jika anda menggunakan browser internet explorer dan anda mengklik view - source, maka anda dapat melihat teks dari web tersebut. Tetapi teks tersebut diterjemahkan oleh browser menjadi halaman website yang enak dilihat. Teks merupakan bahasa universal bagi komputer, yang berarti setiap dokumen teks (termasuk website) yang anda buat melalui Windows dapat dibaca di sistem perasi lain seperti Mac OS, Linux, Unix dan lainnya.
HTML dan hal-hal yang berkaitan dengan website distandarisasi oleh sebuah badan yang disebut World Wide Web Consortium (W3C). Standard terbaru, konsep dan proposal mengenai starndarisasi web dapat dilihat di http://www.w3.org. Standar untuk HTML terbaru adalah HTML 4.0 yang telah didukung oleh bermacam-macam browser seperti Microsoft Internet Explorer, Netscape Navigator, Opera, Mozilla, Safari dan masih banyak lagi. Browser menterjemahkan tag yang terdapat pada dokumen HTML. Kita akan segera membicarakan mengenai tag.
Suatu halaman web merupakan file teks yang berarti anda dapat membuatnya hanya dengan menggunakan notepad saja. Bahkan jika anda masih pertama kali mempelajari HTML, notepad merupakan alat yang tepat. Saya menyarankan untuk menggunakan editplus karena menurut saya enak aja dipakainya, tetapi anda bebas menggunakan teks editor lain.
- Code:
Jika anda baru pertama kali mengenal HTML, hindari Program WYSIWIG (What You See Is What You Get) seperti Dreamweaver atau Frontpage/Web Expression. Program-program ini memang memudahkan anda membuat website tetapi anda akan kurang memahami HTML, gunakan Frontpage atau Dreamweaver apabila anda sudah paham mengenai HTML.
Sekarang buka saja notepad anda dan kita mulai.
Kode HTML pertama
Buka notepad dan tuliskan kode dibawah ini
- Code:
Hello World
Simpan file tersebut dengan nama hello.html didalam suatu folder (misal c:\webku) dan buka file HTML tersebut dengan browser kesukaan anda. Hasilnya seperti ini:
Hello <b>World!!</b>
Oke jadi apa yang dimaksud oleh "<" dan ">", ketika anda menuliskan sesuatu diantara tanda "<" dan ">" maka anda membuat sesuatu yang disebut dengan tag, kalau anda lihat dikamus bahasa inggris tag artinya tanda/label. Sebagai contoh tag <b> maksudnya untuk memulai huruf tebal (bold) dan tag </b> merupakan tag penutup untuk menghentikan huruf tebal.
Sebuah halaman HTML yang baik harus memiliki tag <head> dan <body>, tapi kita akan membicarakan masalah ini belakangan. Yang penting sekarang pahami dulu mengenai tag HTML. Sekarang akan kita pelajari lebih jauh mengenai tag HTML.
Tag HTML dibagi menjadi dua, yaitu tag HTML yang memiliki penutup (containers) atau yang berdiri sendiri (standalone).
Containers
Kebanyakan tag HTML adalah containers (kita sebut containers saja sebab sulit mencari terjemahannya dalam bahasa Indonesia) yang berarti tag tersebut memiliki pembuka (batas awal) dan penutup (batas akhir). Teks yang berada diantara tag pembuka dan penutup akan berubah sesuai dengan fungsi dari tag tersebut. Perhatikan contoh berikut:
Hello <i>World!!</i><br>
Hasil:
- Code:
Hello World!!
Tag <i> berguna untuk memiringkan teks (italic) tag <i> memiliki penutup yaitu </i>. Tag penutup selalu ditandai dengan "/". Contoh diatas terdapat teks World!! diantara tag pembuka <i> dan tag penutup </i> sehingga menghasilkan tulisan World!! yang miring. Tag pembuka memiliki atribut tetapi tag penutup tidak memiliki atribut.
Standalone Tag
Beberapa tag tidak memerlukan penutup sebab tag tersebut hanya berfungsi untuk menempatkan sebuah elemen pada halaman web. Sebagai contoh tag <img> yang merupakan tag untuk memasang sebuah gambar didalam halaman web. Tag lain yang tidak memiliki penutup adalah <br> yang berguna untuk memberi jarak antar teks dan tag <hr> untuk memberi garis. Tag HTML cukup banyak jumlahnya, anda dapat mencarinya dibuku-buku atau mencarinya melalui google untuk mengetahui apa saja jenis tag HTML. Tapi saya akan beritahu yangpenting-penting saja.
Atribut
Atribut dipasang didalam tag pembuka untuk menambahkan fungsi dari tag tersebut. Setiap tag memiliki beberapa atribut dan dipasang sesudah nama tag dibatasi oleh spasi. Urutan atribut tidak perlu diperhatikan. Kebanyakan atribut memiliki nilai yang dipanggil dengan menggunakan tanda "=" sesudah nama atribut. Bingung? coba kode berikut ini dijamin anda mengerti:
Hello <font face="verdana" size="2" color="red">World!!</font>
Hasilnya:
Hello World!!
Tulisan World!! terletak ditengah tag <font> nah tag <font> memiliki atribut face, size dan color yang dapat anda ubah nilainya. Cobalah untuk mengubah ukuran (size) menjadi 3 atau jenis fontnya ubahlah dari verdana menjadi arial. Kira-kira seperti itu kegunaan atribut. Bagaimana? lanjut?
HTML Entity
Jika anda ingin menuliskan karakter khusus dalam web, maka anda perlu menulisnya menggunakan kode khusus. Kode khusus ini dikenal dengan istilah HTML entity. Sebagai contoh anda ingin menulis seperti ini:
Saya belajar web
Anda lihat ada jarak spasi antara belajar dan web. Anda tidak bisa membuat spasi dengan menekan tombol space bar berkali-kali. Meskipun pada kode HTML hasilnya terdapat jarak namun browser hanya membacanya sekali, jadi sebanyak apapun space bar yang tekan browser hanya membacanya satu spasi. Lalu bagaimana caranya? Spasi dalam HTML memiliki kode HTML entity yaitu jadi untuk membuat seperti contoh diatas anda perlu menulisnya seperti ini:
- Code:
Saya belajar web
HTML entity selalu diawali dengan "&" dan diakhiri dengan ";" ada banyak sekali HTML entity anda dapat mencarinya, dan lagi-lagi saya akan menyuruh anda mencarinya sendiri melalui google.
Struktur Dokumen HTML
Tadi sudah saya katakan bahwa HTML yang baik memiliki tag <head> dan <body>. <head> mendefiniskan bagian header dari dokumen HTML yang berisi informasi mengenai dokumen HTML tersebut. Tag <head> tidak memiliki atribut tetapi memiliki container khusus didalam header seperti <base>, <meta>, dan <title>. Tag <body> mendefinisikan awal dari isi website dan ditutup dengan </body>. Tag <body> berisi isi dokumen yang akan tampil di browser anda. Oke sekarang cobalah kode berikut ini:
- Code:
<html>
<head>
<title>Your title</title>
</head>
<body bgcolor="#cccccc">
Hello <b>World!!</b>
</body>
</html>
Hasilnya didalam Microsoft Internet Explorer :
Anda lihat teks yang berada diantara tag <title> muncul dibagian atas browser. Apapun yang anda tulis diantara tag <body> akan muncul sebagai isi dari website anda. Jika anda lihat terdapat tag <body bgcolor="#cccccc"> bgcolor merupakan atribut dari <body> yang berguna untuk memberi warna pada background halaman website. Pelajari dan pahami kode tersebut maka anda akan mudah untuk mempelajari kode selanjutnya.
Susun file Anda
Sangat penting untuk meletakkan file-file HTML anda. Akan lebih baik jika anda membuat folder untuk meletakkan file-file HTML dan didalamnya anda membuat subfolder (misalnya images) untuk menyimpan file-file gambar. Semakin sering anda membuat website anda akan semakin berpengalaman dan mengetahui teknik dalam menyusun file. Jadi ini tergantung pengalaman anda.
index.html
Ketika anda membuka dhimasronggobramantyo.com/belajar.html maka otomatis browser akan membuka file belajar.html. Tetapi jika kita membuka dhimasronggobramantyo.com saja, file apa yang dibuka? Semua server web otomatis akan mencari file index.html.
Karena itu jika website anda memiliki banyak halaman, anda harus memiliki sebuah file index.html yang akan menjadi halaman pertama dari website anda.
Oke, sekarang kita pelajari tag-tag HTML yang penting. Semua kode HTML berikut ini harus ditulis didalam tag <body>
Teks dan Paragraf
Header/judul akan membuat mata pembaca tertuju pada judul dan tertarik untuk membacanya. Dengan menggunakan tag heading maka search engine dapat membaca seberapa penting isi dari suatu website.
Heading merupakan container yang diawali dengan tag <h1> dan ditutup dengan tag </h1>. Ada 6 level heading mulai dari h1 sampai h6.
Cobalah kode berikut ini:
- Code:
<h1>My First HTML</h1>
<h2>My First HTML</h2>
<h3>My First HTML</h3>
<h4>My First HTML</h4>
<h5>My First HTML</h5>
<h6>My First HTML</h6>
Hasil:
Saya rasa anda dapat dengan mudah memahami kode tersebut, sekarang kita coba tag HTML penting lainnya. <p> digunakan untuk membuat paragraf, ini merupakan salah satu tag yang banyak digunakan, tag penting lainnya adalah <b> untuk menebalkan,<i> untuk memiringkan dan <u> untuk garis bawah
Sekarang coba kode berikut ini:
- Code:
<p>Halo, nama saya <b>Budi</b> dan
saya ingin belajar HTML.</p>
<p>Ini merupakan <i>kode HTML pertama saya</i> dan saya
belajar untuk <u>memformat</u> teks dalam HTML </p>
Bagaimana hasilnya? silahkan anda coba sendiri, jika anda selalu melihat contoh dihalaman ini, anda tidak akan mencoba
Beberapa tag mempunyai atribut ALIGN, termasuk <p> dan <h1> - <h6>. ALIGN berguna untuk membuat teks rata kiri, tengah atau kanan. Cobalah kode berikut:
- Code:
<h1 align="center">Nama saya Jono</h1>
<p>Halo nama saya Jono dan saya lagi belajar HTML</p>
<p align="right">James, 2006</p>
Hasilnya:
[imghttp://www.dhimasronggobramantyo.com/images/artikel/contohalign.gif[/img
Anda dapat mengubah jenis huruf, ukuran dan warna. Untuk mengubah huruf digunakan tag <font>, tag <font> memiliki atribut seperti face, size dan color. Contoh:
- Code:
<p><font face="Arial" size="2" color="#FF0000">Nama
saya</font>
<b>Bambang</b><font face="Arial" size="2">
dan </font><font face="Tahoma">saya cinta rupiah</font></p>
Silahkan anda coba sendiri untuk melihat seperti apa hasilnya
Didalam HTML, untuk memberi jarak anda tidak bisa hanya menekan "enter" saja. Untuk memberi jarak perbaris kita perlu tag HTML yaitu <br> sedangkan untuk spasi seperti yang sudah saya jelaskan tadi, kita perlu menggunakan HTML entity / character entity, untuk spasi character entitynya adalah . Langsung saja coba kode berikut ini:
[/code]
<p>Baris 1<br>Baris 2<br>Baris 3<br>Baris
<b>4</b></p>
[/code]
Hasil:
Baris 1
Baris 2
Baris 3
Baris 4
Untuk memberikan garis horisontal digunakan tag <hr>. Tag <hr> memiliki beberapa atribut. Tag <hr> tidak memerlukan tag penutup jadi tag <hr> merupakan standalone tag. Coba contoh berikut ini:
[/code]
<p>Halo nama saya Telo</p>
<hr width="25%" align="justify">
<p>Saya lagi belajar membuat garis horisontal.</p>
<hr size="4" align="justify">
<p>Matur nuwun</p>
<hr size="3" noshade color="#000000" width="25%" align="justify">
[/code]
Hasil:
Seperti yang anda lihat, anda bisa memasang banyak atribut dalam satu tag. Pada tag <hr> terdapat atribut yang tidak memiliki nilai yaitu noshade. Memang dalam beberapa tag HTML terdapat atribut-atribut yang tidak memiliki nilai. Salah satunya adalah noshade yang berarti menghilangkan bayangan pada garis. Anda dapat melihat perbedaan tag <hr> yang menggunakan noshade dengan yang tidak pada kode diatas.
Links
Oke anda telah membuat banyak halaman HTML, sekarang bagaimana caranya anda berpindah dari satu halaman ke halaman yang lain? Apakah saya perlu menuliskan alamatnya di browser? Link adalah jawabannya. <a> merupakan tag HTML untuk membuat link agar kita dapat berpindah ke halaman lain. Tag <a> memiliki atribut yang sangat penting yaitu href. Langsung saja coba kode berikut ini:
My [/code] <a href="http://lordarea.co.cc">Homepage</a> [/code]
Hasil:
My Homepage
Jika anda lihat, maka teks homepage telah berubah menjadi link, jika anda klik maka browser akan menuju alamat yang tertera pada atribut href. Sekarang jika anda memiliki banyak file HTML dalam satu folder, apakah saya perlu menggunakan http:// untuk melinknya? tentu tidak anda cukup menulis nama filenya saja, asalkan file tersebut berada satu folder dengan file yang berisi link. Contoh:
My <a href="contact.html">homepage</a>
Hasil:
My homepage
Images
Pertengahan tahun 90'an website-website yang ada tidak memiliki gambar, karena browser yang ada tidak memiliki kemampuan untuk menampilkan gambar. Tetapi sekarang website tanpa gambar akan terlihat membosankan, tetapi website dengan banyak gambar akan terlihat menyebalkan, nah lo. Jadi gunakan gambar seperlunya, keluarkan semua imajinasi dan nilai seni anda untuk dapat membuat website yang nyaman dilihat. Saya tidak akan mengajarkan bagaimana cara membuat gambar disini, ada kategori lain diwebsite ini untuk belajar mendesain, anda dapat belajar menggunakan Photoshop. Gambar yang dipasang di website disarankan menggunakan bertipe file gif atau jpg. Untuk memasang image anda memerlukan tag <img>. Tag <img> tidak memerlukan penutup dan memiliki atribut src untuk mengambil gambar dari suatu alamat. Coba contoh berikut ini:
- Code:
<img src="images/artikel/introhtml_02.gif" width="313" height="43"
alt="Contoh Gambar">
Hasil:
Atribut src disini sama dengan atribut href pada tag <a> yang berisi alamat posisi gambar. Pada contoh kode diatas anda memiliki gambar introhtml_02.gif yang berada pada folder images. Jika anda tidak memiliki file tersebut maka gambar tidak ditampilkan. Atribut width dan height merupakan opsional, tapi saya sarankan untuk mencantumkannya agar browser mengetahui ukuran gambar apabila gambar gagal ditampilkan. Atribut alt berguna untuk menampilkan teks pada gambar jika gambar gagal ditampilkan atau belum selesai ditampilkan. Anda dapat memberikan garis tepi pada gambar dengan menambahkan atribut border
- Code:
<a href="http://www.dhimasronggobramantyo.com">
<img border="1" src="images/introhtml_02.gif" width="313"
height="43"></a>
Hasil:
Komentar
Anda dapat menuliskan komentar dikode HTML, komentar berguna apabila anda ingin kembali mengutak-atik kode maka anda ingat kode tersebut fungsinya apa. Komentar hanya untuk memudahkan anda saja. Komentar tidak ditampilkan oleh browser. Untuk menulis komentar diawali dengan <!-- dan diakhiri dengan --> lihat contoh berikut ini:
- Code:
<!--Kode untuk menampilkan nama saya-->
<p>Nama saya <b>Dhimas</b></p>
List
Tag list berguna untuk menampilkan list-list. Ada 3 macam jenis list pada HTML. Yang pertama adalah Unordered List <ul>:
- Code:
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
Hasil:
* List 1
* List 2
* List 3
Tag <ul> merupakan tag pembuka. Diantara tag <ul> Anda dapat menambahkan tag <li> untuk setiap list yang akan ditampilkan. Tag list lainnya adalah Ordered List <ol> Anda dapat menggunakannya sama seperti tag <ul> Contoh:
- Code:
<ol>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
Hasil:
1. List 1
2. List 2
3. List 3
Jika anda ingin memulai list tidak dari nomor satu tambahkan atribut start. Contoh:
- Code:
<ol start="3">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
Hasil:
3. List 1
4. List 2
5. List 3
Tabel merupakan hal yang paling penting dalam membuat interface website anda. Dengan tabel anda dapat memecah layout website menjadi beberapa kolom atau baris. Dengan tabel halaman website anda akan lebih rapih.
perhatian wrote:Table merupakan tag html terumit, karena didalam tag table terdapat tag-tag lainnya. Dan table sangat penting. Karena itu sebelum meneruskan, tarik nafas dalam-dalam dan konsentrasi.
Untuk membuat tabel maka diperlukan tag-tag dasar seperti ini :
* <TABLE></TABLE>--Tag ini merupakan containers untuk membuat tabel.
* <TR></TR>--Didalam tabel tag ini berfungsi untuk membuat baris.
* <TD></TD>--Tag untuk membuat kolom. didalam tag <tr> harus terdapat tag <td>, anda bisa menambahkan banyak tag <td> didalam <tr> untuk membuat kolom.
* <TH></TH>--Sama dengan <td> hanya saja berfungsi sebagai header, biasanya digunakan pada baris pertama didalam tabel.
Setiap tag tabel tersebut memiliki banyak atribut. Oke langsung saja coba kode berikut ini:
Contoh:
- Code:
<table border="1" width="60%">
<tr>
<td>Contoh Table</td>
</tr>
</table>
Hasilnya liat sendiri
Tabel diawali dengan tag <table> dan biasanya memiliki atribut border. Jika border="0" maka garis pada tabel tidak ditampilkan. Biasanya jika kita tidak menampilkan atribut border maka otomatis tabel tersebut juga tidak memiliki garis. <table> memiliki atribut cellpadding untuk memberi jarak didalam kolom dan cellspacing untuk memberi jarak antara kolom. Coba kode berikut ini:
- Code:
<table border="1" width="200" cellpadding="4" cellspacing="5">
<tr>
<td width="100">Cell 1</td>
<td width="100">Cell 2</td>
</tr>
</table>
Hasil liat sendiri
Coba anda ubah nilai dari atribut cellpadding dan cellspacing untuk melihat perbedaannya, cobalah untuk mengutak-atik kode diatas dengan mengubah nilai-nilai atributnya.
Setiap tabel memiliki baris dengan menggunakan tag <tr>. Didalam baris perlu sebuah kolom atau lebih, kolom dibuat dengan menggunakan tag <td>. Untuk lebih jelasnya cobalah kode berikut ini:
- Code:
<table border="1" width="200" cellpadding="2">
<tr>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td> /
</tr>
<tr>
<td width="100">cell 1</td>
<td width="100">cell 2</td>
</tr>
<tr>
<td width="100">cell 3</td>
<td width="100">cell 4</td> /
</tr>
</table>
Hasil liat sendiri di internet explorer
Bagaimana anda mengerti maksudnya kode diatas, coba anda pahami dulu. Pada kode diatas terdapat atribut bgcolor yang berguna untuk memberi warna pada background. Didalam kolom <td> anda dapat menuliskan kode HTML apa saja, bahkan anda dapat memasang tag <table> didalamnya, yang berarti anda memasang tabel didalam tabel. Contoh lainnya:
- Code:
<table border="1" width="200" cellpadding="2">
<tr>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
</tr>
<tr>
<td width="100" rowspan="2" valign="top">cell 1</td>
<td width="100">cell 2</td>
</tr>
<tr>
<td width="100">cell 4</td>
</tr>
</table>
Hasilnya cari tahu sendiri
Anda lihat ada atribut rowspan="2" ini berguna untuk menggabungkan 2 baris menjadi satu, jika anda ingin menggabungkan lebih dari 2 baris, ubah saja nilainya. Bagaiman susah? coba anda pelajari terus. Jika sudah coba anda pahami kode berikut ini:
- Code:
<table border="0" width="200" cellpadding="2" cellspacing="1" bgcolor="#000000">
<tr>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
</tr>
<tr>
<td width="100" valign="top" bgcolor="#CCCCCC" align="left">Left</td>
<td width="100" bgcolor="#CCCCCC" align="right">Right</td>
</tr>
<tr>
<td width="200" valign="top" colspan="2" bgcolor="#FFFFFF" align="center">
Table is cool</td>
</tr>
<tr>
<td width="200" valign="top" colspan="2" bgcolor="#FFFFFF" align="center">
But it's not easy</td>
</tr>
</table>
Hasil cari tahu... kapan mau belajar kalo liat terus hasilnya
Anda sudah mengetahui dasar-dasar HTML. Masih banyak lagi tag-tag HTML lainnya seperti frames dan form. Saya akan mengajarkan frames diartikel lainnya, tetapi frames harus dihindari dalam membuat website, alasan utama apa yang ada didalam frames tidak terbaca oleh Search Engine. Tag form hanya dibutuhkan apabila anda membuat website dinamis menggunakan bahasa pemrograman web seperti PHP, ASP, Perl atau JSP.
Sekarang kita akan membicarakan tag <META>. Tag <META> digunakan agar search engine mengenal dan dapat mengkategorisasikan website anda, gampangnya agar search engine mengetahui website anda isinya tentang apa. Tetapi tidak semua search engine membaca tag <META> tetapi sebagian besar membaca tag ini, jadi kita perlu menyertakannya pada website kita. Tag <META> berada diantara tag <head> bukan <body> yang berarti isi tag tersebut tidak ditampilkan dibrowser.
Sebenarnya apa sih kegunaan Search Engine dan apa pengaruhnya untuk website? Saya akan jelaskan secara gampang, anda memiliki website katakan websitesaya.com, nah bagaiman milyaran pengguna internet dapat mengetahui kalau ada sebuah situs websitesaya.com diantara ratusan juta situs lainnya. Pengguna internet banyak yang melakukan pencarian melalui search engine seperti google atau yahoo. Jika mereka melakukan pencarian dan situs anda muncul pada hasil pencarian tersebut, maka anda mendapatkan pengunjung yang mengunjungi website anda. Bagaimana agar website saya ada di google atau search engine lainnya? ya dengan menggunakan <META> maka search engine akan mengenali website anda. Sebenarnya prosesnya jauh lebih rumit, search engine memiliki perhitungannya sendiri seperti ranking, backlink, recipocal link, tetapi kita ambil gampangnya saja.
Oke anda sudah mengerti pentingnya tag <META>Tag <META> memiliki atribut yang paling penting Keywords dan DESCRIPTION dimana kita memasukkan deskripsi dan kata kunci yang berhubungan dengan website kita.
Sebagai contoh misalnya kita memiliki website kecoak.com yang berisi bagaimana cara memelihara dan beternak kecoa. Maka kira-kira kita perlu membuat meta seperti ini:
- Code:
<html>
<head>
<META content="kecoak.com" name=AUTHOR>
<META content="Cara memelihara dan beternak kecoak." name=description>
<META content="kecoa, beternak, memelihara, kadal, ternak, pelihara" name=keywords>
<META content="INDEX, FOLLOW" name=ROBOTS>
<META http-equiv="Content-Language" content="en-us">
<META http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ternak Kecoa</title>
</head>
Kira-kira seperti itu, ok anda telah mempelajari HTML, sekarang anda tinggal turun gunung dan mempraktekkan apa yang sudah dipelajari. Teruslah mencoba agar anda semakin ahli. saya juga masih belajar dan butuh bimbingan dari kawan-kawan yang lebih mahir..
. 
Langganan:
Postingan (Atom)