Jumat, 28 Agustus 2015

Domain adalah nama unik yang diberikan untuk mengidentifikasi nama server komputer seperti web server atau email server di jaringan komputer ataupun internet. Fungsi Domain adalah untuk mempermudah pengguna di internet pada saat melakukan akses ke server, selain juga dipakai untuk mengingat nama server yang dikunjungi tanpa harus mengenal deretan angka yang rumit yang dikenal sebagai IP address. Nama domain ini juga dikenal sebagai sebuah kesatuan dari sebuah situs web seperti contohnya "wikipedia.org". Nama domain kadang-kadang disebut pula dengan istilah URL, atau alamat website.
penjelasan domain Change text between marquee tags
Alternate marquee behavior venni alvionita XII PM2 <<< Opposite Direction Marquees>>>

penjelasan ISP

ISP Pengertian
ISP (Internet Service Provider) adalah perusahaan atau badan usaha yang menjual koneksi internet atau sejenisnya kepada pelanggan. ISP awalnya sangat identik dengan jaringan telepon, karena dulu ISP menjual koneksi atau access internet melalui jaringan telepon. Seperti salah satunya adalah telkomnet instant dari Telkom.
Sekarang, dengan perkembangan teknologi ISP itu berkembang tidak hanya dengan menggunakan jaringan telepon tapi juga menggunakan teknologi seperti fiber optic dan wireless. Di Bali, denpasar pada khususnya ISP dengan teknologi wireless paling banyaktumbuh.
Sumber : http://en.wikipedia.org/wiki/ISP Membuat Marquee Change text between marquee tags
Alternate marquee behavior Up marquee direction Down marquee direction <<< Opposite Direction Marquees>>>
Membuat Marquee Change text between marquee tags
Alternate marquee behavior Up marquee direction Down marquee direction <<< Opposite Direction Marquees>>> kolom Menulis dalam 2 kolom
WEB INTRODUCING
WEB INTRODUCING

Selasa, 18 Agustus 2015

tugas kontent 19082015

7. Apakah yang disebut sharing online pada Google Drive ? Sharing Online Pada Google Drive Berbagi (sharing) dokumen Dokumen yang sudah dibuat di Google Drive dapat di-share, sehingga memungkinkan banyak orang dapat menggunakan secara bersamaan, bekerja pada dokumen yang sama meski tidak berada pada satu tempat,. Pengguna bebas memilih kepada siapa saja dokumen tersebut akan di-share.

tugas kontent 19082015

6. Apakah yang disebut Forum dan berilah 3 contoh dan berilah keterangan singkat mengenai forum tersebut Forum adalah suatu gelanggang terbuka, dimana seseorang mendapat kesempatan berbicara tentang masalah apapun. Pembicara dapat datang dari kelompok massa, dan segera setelah selesai pembicaraannya ia harus kembali ke tempat semula. Jadi dalam forum tidak ada anggota tertentu yang duduk terpisah dari pendengar, tetapi ditekankan pada pemberian kesempatan bagi setiap orang untuk mengemukakan pikiran dan perasaan di depan khalayak. Berbagai macam cara pertemuan untuk bertukar pikiran secara bebas, mulai dari simposium, seminar, lokakarya atau yang sering disebut workshop, rapat, diskusi, konferensi, kongres, dan musyawarah kerja. Disini akan dijabarkan tentang masing-masing forum tersebut. 1. Seminar Seminar merupakan suatu pembahasan masalah secara ilmiah, walaupun topik yang dibahas adalah masalah sehari-hari. Dalam membahas masalah, tujuannya adalah mencari suatu pemecahan, oleh karena itu suatu seminar selalu diakhiri dengan kesimpulan atau keputusan-keputusan yang merupakan hasil pendapat bersama, yang kadang-kadang diikuti dengan resolusi atau rekomendasi. Pembahasan dalam seminar berpangkal pada makalah atau kertas kerja yang telah disusun sebelumnya oleh beberapa orang pembicara sesuai dengan pokok-pokok bahasan yang diminta oleh sesuatu panitia penyelenggara. Pokok-pokok bahasan yang diminta oleh suatu penitia penyelenggara. Pokok bahasan yang telah ditentukan, akan dibahas secara teoritis dan dibagi menjadi beberapa subpokok bahasan bila masalahnya sangat luas. Pada awal seminar, dapat dibuka dengan suatu pandangan umum oleh orang berwenang (yang ditunjuk panitia) sehingga tujuan seminar terarah. Kemudian hadirin (massa) dibagi menjadi beberapa kelompok untuk membahas permasalahan lebih lanjut. Tiap kelompok dapat diserahi tugas membahas suatu sub pokok bahasan untuk dibahas dalam kelompok yang biasanya juga disebut seksi/komisi, di bawah pimpinan seorang ketua komisi (kelompok). Dari hasil-hasil kelompok, disusun suatu perumusan yang merupakan suatu kesimpulan yang dirumuskan oleh suatu tim perumus yang ditunjuk. Pembahasan dalam seminar memakan waktu yang lebih lama karena sifatnya yang ilmiah. Apabila para pembicara tidak dapat mengendalikan diri biasanya waktu banyak dipergunakan untuk pembahasan yang kurang penting. Oleh karena itu dibutuhkan pimpinan kelompok yang menguasai persoalan sehingga penyimpangan dari pokok persoalan dapat dicegah. Penyimpangan ini dapat diatasi bila setiap kali ketua sidang menyimpulkan hasil pembicaraan sehingga apa yang akan dibicarakan selanjutnya sudah terarah. 2. Lokakarya atau workshop Lokakarya atau dalam bahasa Inggris workshop adalah suatu acara pertemuan antara para ahli (pakar) untuk membahas masalah praktis di mana beberapa orang berkumpul untuk memecahkan masalah tertentu dan mencari solusinya. Sebuah lokakarya adalah pertemuan ilmiah yang kecil. 3. Rapat Rapat merupakan suatu bentuk media komunikasi kelompok resmi yang bersifat tatap muka, yang sering diselenggarakan oleh banyak organisasi, baik swasta maupun pemerintah. Rapat merupakan alat untuk mendapatkan mufakat, melalui musyawarah kelompok. Rapat merupakan media yang dapat dipakai unttuk pengambilan keputusan secara musyawarah untuk mufakat. Rapat merupakan pertemuan antara para anggota di lingkungan kantor/ perusahaan/ organisasi sendiri untuk membicarakan, merundingkan suatu masalah yang menyangkut kepentingan bersama. Rapat merupakan alat/media komunikasi kelompok yang bersifat tatap muka dan sangat penting, diselenggarakan oleh banyak organisasi, baik swasta maupun pemerintah untuk mendapatkan mufakat melalui musyawarah untuk pengambilan keputusan. 4. Diskusi Kata diskusi berasal dari bahas Latin discutio atau discusum yang berarti bertukar pikiran. Dalam bahasa Inggris digunakan kata discussion yang berarti perundingan atau pembicaraan. Dari segi istilah, diskusi berarti perundingan/bertukar pikiran tentang suatu masalah: untuk memahami, menemukan sebab terjadinya masalah, dan mencari jalan keluarnya. Diskusi ini dapat dilakukan oleh dua-tiga orang, puluhan, dan bahkan ratusan orang. Diskusi adalah sebuah proses tukar menukar informasi, pendapat, dan unsur unsur pengalaman secara teratur dengan maksud untuk mendapatkan pengertian bersama yang lebih jelas, lebih teliti tentang sesuatu atau untuk mempersiapkan dan merampungkan kesimpulan/pernyataan/keputusan. Di dalam diskusi selalu muncul perdebatan. Debat ialah adu argumentasi, adu paham dan kemampuan persuasi untuk memenangkan pemikiran/paham seseorang. 5. Konferensi Konferensi adalah rapat atau pertemuan untuk berunding atau bertukar pendapat mengenai suatu masalah yang dihadapi bersama. Konferensi bisnis, pertemuan untuk membahas masalah bisnis. Konferensi pers, suatu pengumuman untuk pers (cetak, radio, televisi) dengan diikuti oleh sesi tanya jawab tentang hal yang diumumkan. 6. Kongres Kongres merupakan pertemuan besar para wakil organisasi (politik, sosial, profesi) untuk mendiskusikan dan mengambil keputusan mengenai berbagai masalah. Kongres lebih kepada tujuan politik. Kongres biasanya digunakan untuk mengawasi dan mencocokkan kegiatan pemerintahan. 7. Musyawarah kerja Musyawarah kerja atau rapat kerja (raker) merupakan suatu pertemuan yang hanya dihadiri oleh sekelompok massa tertentu yang bergerak dalam bidang kerja sejenis. Dengan massa yang lebih terbatas, raker dilaksanakan untuk saling bertukar pengalaman atau pengetahuan dalam bidang kerja masing-masing, untuk mengevaluasi program-program kerja yang telah dilaksanakan atau untuk mengadakan pembaharuan dalam bidang kerja tersebut.Permasalahan yang akan dibahas, dipersiapkan jauh sebelumnya dengan menginventarisasi masalah dari lapangan kemudian diklasifikasikan ke dalam aspek-aspek tertentu yang akan dibahas dalam pertemuan tersebut. Bila perlu pada permulaan raker didahului dengan ceramah sebagai pengarahan dari seorang nara sumber, di samping ada beberapa nara sumber lain yang sewaktu-waktu dapat memberikan bantuan bila mengalami kesulitan. Peserta dibagi atas beberapa kelompok, yang masing-masing dipimpin oleh seorang ketua kelompok. Hasil akhir sidang kelompok disampaikan pada sidang pleno (lengkap) untuk mendapatkan tinjauan umum secara menyeluruh, untuk pada akhimya diambil satu keputusan. Biasanya raker dilaksanakan selama beberapa hari (lima hari sampai seminggu), oleh karena itu di tengah-tengah raker dapat disisipi acara karyawisata, pameran, demonstrasi, diskusi panel, dan sebagainya.
5. Apakah yang disebut Google Maps ? Apakah yang disebut Google Maps ? Google Maps adalah sebuah jasa peta globe virtual gratis dan onlinedisediakan oleh Google dapat ditemukan di http://maps.google.com. Ia menawarkan peta yang dapat diseret dan gambar satelit untuk seluruh dunia dan baru-baru ini, Bulan, dan juga menawarkan perencana rute dan pencari letak bisnis di Amerika Serikat, Kanada, Jepang, Hong Kong, Cina, UK, Irlandia(hanya pusat kota) dan beberapa bagian Eropa. Google Maps masih berada dalam tahap beta. Google Maps adalah Peta Online atau Membuka peta secara online. kini dapat dilakukan secara mudah melalui servis gratis dari Google ini. bahkan, servis ini menyediakan API )Application Programming Interface) yang memungkinkan developer lain untuk memanfaatkan aplikasi ini di aplikasi buatannya. Tampilan GoogleMaps pun dapat dipilih, berdasarkan foto asli atau peta gambar rute saja. - See more at: http://bocahvillage.blogspot.com/2011/06/definisi-atau-pengertian-istilah-google.html#sthash.osvAzgnP.dpuf

tugas kontent 19082015

4. Apakah yang disebut Google Docs ? Pengertian Google Docs Google Docs merupakan salah satu aplikasi yang dikembangkan Google untuk kebutuhan manajemen dokumen. Khususnya aplikasi office. Mulai dari pengolah kata (word processor), pengolah lembar kerja (spreadsheet) dan presentasi (presentation). Google Docs bukan hanya menyimpan saja, namun juga bisa digunakan untuk untuk mengolah, menyimpan, membuat, meng-edit dokumen perkantoran seperti layaknya Microsoft Office pada Windows atau Open Office pada Linux dengan secara online. Semuanya dalam satu paket dan tidak perlu menginstal di komputer. Karena sangat tangguh dan dasyat maka sering disebut aplikasi pembunuh Microsoft Office, Open Office, dan Neo Office. Fitur penyimpanan di ‘udara’ seperti ini memang bukanlah yang perdana. Beberapa layanan penyimpanan online lain yang tak kalah menariknya juga sudah lama tersedia, seperti DropBox (Google), Box.Net, Live Mesh (Microsoft) dan SkyDrive (Microsoft). Tampilannya berbasis Web, dengan aplikasi ini anda dapat membuat dokumen baru, seperti doc, xls, dan bisa juga file odt, ods, rtf, csv, ppt, dan html. Tentu ini jauh lebih komplit karena file berektensi odt itu hanya hdimiliki oleh open office. Fitur yang tidak dimiliki oleh aplikasi lain adalah fitur kolaborasi, fitur ini bisa langsung anda gunakan degan memberi cek di depan nama file, lalu klik tombol share di atasnya. Sebuah boks akan menawarkan berbagai pilihan akan muncul, tersedia opsi "as collaborator" yang akan membuka akses baca tulis dokumen utuk orang-orang terpilih, sementara fungsi as viewer hanya akan memberikan akses baca saja. Tampilannya mirip dengan MS. Office 2003, sehingga akan dengan mudah menjalankannya. Sejarah Awal mulanya,Google Docs berasal dari dua produk terpisah, Writely dan Google Spreadsheets. Writely adalah web berbasis pengolah kata yang dibikin oleh perusahaan software Upstartle dan diluncurkan pada Agustus 2005.Spreadsheet, diluncurkan sebagai Google Labs Spreadsheets pada tanggal 6 Juni 2006, berasal dari akuisisi dari produk XL2Web oleh 2Web Technologies . Fitur asli Writely termasuk kolaborasi editing teks dan kontrol akses. Menu, shortcut keyboard, dan kotak dialog mirip – mirip dan sesuai dengan harapan kita sama dengan pengolah kata desktop seperti Microsoft Word atau OpenOffice.org Writer. Google Docs dapat digunakan (melihat dan mengedit) dalam modus offline menggunakan Google Gears. Fitur dasar dalam google docs · Mengedit dan menyimpan file · Mengu-upload file · Mengatur hak akses · Bekerja secara offline dokumen · Mendownload atau mengunduh file · Fasilitas see revision history · Translate dokumen Kelebihan Google Docs 1 ) Gratis 2 ) Mudah penggunaannya 3 ) Support dan dokumentasinya lengkap. 4 ) Tragedi data hilang akibat kerusakan harddisk bisa dihindarkan. 5 ) Menggunakan editor WYSIWYG (What You See Is What You Get) yang sederhana untuk memformat dokumen, memeriksa ejaan, dan sebagainya. 6 ) Akses pekerjaan kapan saja, di mana saja Google Documents diberdayakan dengan aman oleh web, memberikan Anda fleksibilitas untuk tetap produktif di meja, di perjalanan, di rumah, dan di ponsel Anda, bahkan ketika Anda sedang luring sekali pun. 7 ) Bekerja di beragam sistem operasi Google Documents bekerja pada peramban di komputer PC, Mac, dan Linux, serta mendukung format umum seperti .doc, .xls, .ppt, dan .pdf. 8 ) Kontrol akses aman Administrator dapat mengelola izin berbagi berkas di seluruh sistem, dan pemilik dokumen dapat berbagi dan mencabut akses berkas setiap saat. 9 ) Kemudahan mengunggah dan berbagi berkas Berkas yang disimpan di Google Documents dapat selalu diakses baik untuk mengunggah atau berbagi. Kekurangan Google Docs · Membutuhkan koneksi internet · Harus dikerjakan secara online terlebih dahulu. Fasilitas Google Docs Ø Dalam Word Processor atau Pengolah Kata · Membuat dokumen Word, OpenOffice, RTF, HTML, atau teks. · Upload dokumen yang sudah kita miliki. · Sharing dengan orang lain (melalui alamat e-mail) untuk mengedit atau melihat dokumen dan spreadsheet. · Meng-edit dokumen online dengan siapa pun yang kita pilih. · Melihat riwayat revisi dokumen dan spreadsheet · Mempublikasikan dokumen secara online ke dunia, sebagai bagian situs atau mengirimkan dokumen ke blog Anda. · Mendownload dokumen ke desktop sebagai Word, OpenOffice, RTF, PDF, HTML atau zip. · Email dokumen kita sebagai lampiran. · Setiap dokumen dapat mencapai sebesar 500K, ditambah 2MB per gambar yang dimasukkan. · Setiap pengguna memiliki batas kombinasi 5000 dokumen dan presentasi serta 5000 gambar. Ø Dalam menggunakan spreadsheet atau pengolah angka : · Mengimpor dan mengekspor data berformat .xls, .csv, .txt dan .ods (dan mengekspor fungsionalitas untuk .pdf dan html). · Menikmati navigasi dan pengeditan intuitif, seperti dokumen atau spreadsheet tradisional. · Menggunakan format dan formula. · Mengobrol dengan orang lain yang sedang mengedit. · Memasukkan spreadsheet, atau bagian dari spreadsheet, ke situs web kita. · Setiap spreadsheet dapat mencapai hingga 10,000 baris, atau hingga 256 kolom, atau hingga 100,000 sel, atau hingga 40 sheet — batas mana saja yang tercapai lebih dulu. · Setiap pengguna memiliki batas hingga 200 spreadsheet. · Batas untuk spreadsheet terbuka pada saat bersamaan adalah 11. · Dapat mengimpor spreadsheet hingga mencapai 1 MB dalam format xls, csv, atau ods, txt, tsv, tsb. Ø Dalam menggunakan Impress atau presentasi : · Mengimpor presentasi yang ada dalam jenis file ppt dan pps. · Mengekspor presentasi menggunakan fitur Simpan sebagai Zip dari menu File. · Mengedit presentasi kita menggunakan editor WYSIWYG yang sederhana. · Menyisipkan gambar, dan memformat slide sesuai keinginan. · Berbagi-pakai dan mengedit presentasi bersama teman dan rekan kerja. · Mengizinkan melihat presentasi secara realtime, dari lokasi jauh yang terpisah. · Mempublikasikan presentasi kita di web, dan dapat di akses oleh orang lain. · Setiap presentasi dapat mencapai sebesar 500K, ditambah 2MB per gambar yang dimasukkan. · Kita dapat meng-upload presentasi dalam format .ppt maupun .pps. · Setiap pengguna memiliki batas kombinasi 5000 dokumen dan presentasi serta 5000 gambar.

tugas kontent 19082015

3. Apakah yang disebut Google Drive ? Pengertian, Kelebihan, kekurangan dan Fitur Google Drive GOOGLE DRIVE Google Drive adalah layanan penyimpanan daring milik Google yang diluncurkan pada 24 April 2012. Layanan ini merupakan ekstensi dari Google Docs dan akan mengganti URL docs.google.com dengan drive.google.com setelah diaktifkan. Google Drive memberikan layanan penyimpanan gratis sebesar 5 GB dan dapat ditambahkan dengan pembayaran tertentu. Saat ini google drive juga bisa diakses di ponsel android sehingga memudahkan untuk mengakses dimanapun kita berada. Fungsi Dari Google Drive : Banyak sekali fungsi-fungsi dari Gogle Drive, diantranya : Files Host (Java Script, Css, HTML). Documents Host. Membuat dan Mengetik Dokumen Secara Online. Membuat Presentasion Secara Online. Membuat Spreadsheet Secara Online. Membuat Form. Menggambar. Kelebihan Google Drive : Dengan Hard Google, yang dapat menyimpan semua file di satu tempat, sehingga kita dapat mengaksesnya dari mana saja dan berbagi dengan orang lain. Gunakan Google Hard Android app untuk mengakses foto, dokumen, video dan file lain yang disimpan pada Drive Google. Kita bisa Upload/Download file ke Hard Google langsung dari perangkat Membuat file Foler yang tersedia offline sehingga Anda dapat mengaksesnya bahkan ketika Anda tidak memiliki koneksi Internet Membuat dan mengedit dokumen Google dengan format rich text Lakukan perubahan cepat untuk spreadsheet Bisa membaca file PDF Upload dan mengkonversi file ke format Google Docs Mengambil foto dari teks dicetak dan mengubahnya menjadi dokumen Google Support untuk pengguna tablet, Honeycomb (Android 3.0 +) Buka dan lihat file apapun Simpan file seseorang di tempat yang aman Akses dimana saja Buka dan lihat file apapun Simpan file seseorang di tempat yang aman Penelusuran yang canggih Lebih dari penyimpana kolaborasi Kelemahan Google Drive : Kelemahan penyimpanan data online adalah ketergantungan kita dengan jaringan internet. Untuk wilayah Indonesia tidak semua tempat memiliki akses internet yang memunkinkan dapat berjalan dengan lancar. Beberapa fitur yang tersedia di layanan Google Drive : Kapasitas penyimpanan dokumen gratis hingga 5GB. Google Drive akan memberikan ruang penyimpanan gratis bagi penggunanya sebesar 5GB, tidak terhitung dokumen yang Anda buat melalui Drive. Anda dapat mengupload 30 jenis file termasuk file Photoshop, video, foto dan sebagainya. Google Drive mendukung hampir seluruh jenis file yang populer. Berbagi file, folder dan seluruh isi drive Anda. Sama seperti Google Docs, Anda dapat berbagi file melalui Google Drive. Hanya dengan meng-klik kanan di file atau folder dan memilih “Share” dan memilih opsi sharing yang ada. Untuk mengijinkan seseorang dapat mengakses seluruh drive Anda, klik tombol orang tersebut dan tanda tambah (plus) di bagian atas. Menggunakan sistem pencari Google. Dengan teknologi pencarian Google yang dibenamkan di aplikasi Google Drive, Anda dapat melakukan pencarian foto pada bagian ‘search’. Anda juga dapat melakukan pencarian teks pada dokumen yang di-scan. Setelah beberapa pengujian, fitur ini ternyata tidak sepenuhnya dapat dipercaya, tapi cukup pantas untuk dicoba sebagai penolong pencarian file atau foto. Mengkolaborasikan video, foto dan lainnya. Fitur kolaborasi Google Docs sekarang tersedia untuk berbagai jenis file. Sebagai contoh, jika Anda meng-upload sebuah video di Drive dan berbagi dengan seseorang, Anda dapat berdiskusi mengenai video tersebut dengan fasilitas komentar. Menginstal aplikasi dari pihak ketiga. Developer pihak ketiga dapat membangun aplikasi yang dapat bekerja dengan baik di Google Drive. Anda dapat melakukan edit foto dengan menggunakan aplikasi Pixlr, mengirim fax secara gratis dengan aplikasi HelloFax dan menandatangani dokumen resmi dengan aplikasi DocuSign. Semuanya dapat dilakukan lewat layanan Google Drive.

tugas kontent 19082015

2. Apakah yang disebut Upload dan Download ? Pengertian Upload dan Download pengertian upload dan download Pengertian Upload dan Download – Bicara tentang aktifitas Internet, pasti takkan luput dari yang namanya kegiatan Upload dan Download. Saya yakin anda semua sudah melakukan aktifitas yang satu ini dalam internet. Contoh kecil saja yang paling sering dilakukan adalah upload foto di jejaring sosial facebook dll, atau juga sering mencari lagu mp3 di internet. Nah postingan kali ini hanya sekedar informasi pembelajaran saja mengenai pengertian upload dan download, bagi yang masih awam dalam dunia internet. Dalam Teknologi Informasi Upload dan Download adalah istilah yang digunakan untuk menggambarkan proses pemindahan data elektronik antara dua komputer atau sistem serupa lainnya. Pengertian Upload Upload atau unggah adalah proses mengirim data dari komputer pribadi ke suatu sistem seperti server web, FTP server, server mail atau sistem serupa lainnya yang kemudian akan dipublikasikan di internet baik secara pribadi maupun umum. Pengertian Download Download atau unduh merupakan proses menyalin file dari suatu sistem seperti server web, FTP server, server mail atau sistem serupa lainnya yang kemudian akan tersimpan di komputer pribadi.

tugas kontent 19082015

1.Bagaimana cara / langkah-langkah membuat email pada Google Mail (Gmail) ? Cara Membuat Email Gmail - Google Mail atau Gmail merupakan layanan email gratis dari Google, cara membuat email gmail sendiri tidaklah sulit. Meskipun demikian namun faktanya saat ini banyak sekali orang yang belum bisa membuat akun email. Padahal kita hanya perlu memasukan beberapa data, dan itupun hanya memerlukan beberapa langkah saja. Untuk itu kali ini admin blog kumpulan terbaru ingin memberikan cara membuat email dari layanan Google Mail tersebut. Meskipun saat ini banyak sekali layanan email namun saya sangat menyarankan anda untuk memilih Gmail karena faktor keamanan'nya lebih baik ketimbang layanan email lainnya. Cara Membuat Email Gmail Saat ini email sudah banyak digunakan karena untuk membuka email tidak harus melalui komputer, dimana anda sudah dapat membuka email dengan menggunakan smartphone. Baiklah tanpa perlu panjang lebar lagi berikut ini saya berikan tutorial cara membuat email gmail dengan mudah dan cepat. 1. Klik tautan ini : https://accounts.google.com/SignUp?service=mail 2. Isi data seperti gambar dibawah ini. Silahkan baca keterangan dibawah gambar. Jika semua sudah benar lalu klik "Next Step". KETERANGAN : Name : Isi dengan nama depan dan nama belakang anda. Choose your username : Isi dengan alamat email yang anda inginkan, pada contoh diatas saya mengisi dengan "irsatrifai33". Create a password : Isi dengan kata kunci/password yang ingin anda gunakan untuk login email nantinya. Confirm your password : Masukan lagi password yang anda tulis tadi pada bagian ini. Birthday : Isi dengan tanggal lahir. Isi dengan Bulan, Tanggal, dan Tahun lahir. Gender : Pilih "Male" jika anda laki-laki dan pilih "Female" jika anda perempuan. Mobile phone : Isi dengan nomor hp anda yang aktif. Your current email address : Pada bagian ini tidak perlu di isi. Prove you're not a robot : Isi dengan tulisan/nomor yang terlihat pada kotak. Pada contoh diatas saya mengisikan angka 843. 3. Pada langkah ini klik "No Thanks". 4. Pada langkah ini klik "Continue to Gmail". 5. Selamat,, email anda sudah jadi. Dibawah ini merupakan gambar yang menunjukan anda sudah login/masuk akun email. Untuk membuat/mengirim email baru klik "COMPOSE"

Selasa, 11 Agustus 2015

4. pengertian template, tidak hanya newbie terkadang yang sudah lama menjadi pengguna blog juga tidak mengetahui pengertian dari template, banyak dari blogger yang hanya menggunkan saja tapi tidak tahu arti, maksud dan kegunaan dari komponen sebuah blog. Sebenranya apa sebenarnya yang dinamakan template blog itu? Pengertian Template blog atau website adalah desain-desain halaman blog ataupun website beserta seluruh komponennya (misal : gambar, stylesheet, dan sebagainya) baik berupa file statis maupun file dinamis berupa program dan aplikasi yang berjalan sebagai aplikasi blog. Contoh dari template sendiri seperti yang tampak pada layar monitor anda yang sedang membuka blog belajar blog bersama blogspot untuk pemula tampilan halaman yang terlihat berupa gambar serta tulisan di layar monitor anda, itulah yang dinamakan template.

Para penyedia blog seperti blogspot, wordpress dan lain-lainbiasanya menyediakan template meskipun di wordpress ada saja template yang berbayar. anda dapat dapat mengganti template blog anda secara bebas sesuai dengan selera dan keinginan masing-masing. Jika anda telah mahir membuat template sendiri, anda dapat menggunakan template tersebut untuk blog anda. Namun, jika anda masih awam dalam membuat template, pihak blogger atau blogspot sendiri telah menyediakan beberapa template yang bisa anda pilih sesuai dengan pilihan keinginan.
anda juga dapat mengunduh atau mendownload template blogger gratis dari penyedia template blogger, karena sekarang banyak blog atau web yang menyediakan template yang gratis dan tinggal sedot, hehehe., di rumahnya si mbah google terdapat ratusan bahkan jutaan template blogger yang bisa anda download dan menggunakannya gunakan secara gratis tinggal upload saja, dengan cara mengganti template blogspot yang terpasang saat itu. Namun, jika anda menggunakan template gratis, syarat yang harus ditaati adalah tidak boleh menghapus atau menghilangkan kredit link dari pembuat template tersebut. Dengan tidak membuang link credit pembuat template, itu adalah sebagai apresiasi atas kerja keras mereka dalam menyediakan template secara gratis.
begitu saja ya,,, kalau masih kurang paham bisa ditanyakan pada kolom komentar di bawah ini. salam blogsot pemula

3. Javascript dasar Pengertian dan Program Dasar
Pengertian JavaScript
Javascript adalah bahasa scripting yang digunakan untuk membuat aplikasi web, sifatnya client-side sehingga dapat diolah langsung di browser tanpa harus terhubung keserver terlebih dahulu. Walaupun namanya menggunakan kata “Java”, Javascript tidak berhubungan dengan bahasa pemprograman java, meskipun keduanya memiliki kemiripan dalam hal syntax yang meniru bahasa C.
Nama Asli dari bahasa ini adalah LiveScript yang kemudian diganti karena adanya perjanjian kerjasama antaraNetscape dan Sun dengan balasan Netscape memperbolehkan untuk membundel browse mereka dengan menggunakan Java dan Sun. “JavaScript” merupakan merk terdaftar milik Sun MicrosystemInc dan dilisensikan oleh Sun untuk Netscape Comunications dan entitas lainnya seperti Mozilla Foundation.
Kegunaan JavaScript
Kegunaan utama JavaScript adalah untuk menuliskan fungsi yang disisipkan kedalam HTML baik secara langsung disisipkan maupun diletakan ke file teks dan di link dari dokumen HTML. (http://joisetrick.blogspot.com/2013/01/pengertian-dan-kegunaan-javascript.html)

1. Anti Klik Kanan

Kode javascript ini buat menonaktifkan klik kanan di blog kalian gan, jadi pengunjung gak bisa klik kanan dan melihat source kode blog loe. Cari kode <body> di template blog kalian lalu ganti dengan kode dibawah ini gan.
<body oncontextmenu=”return false;”>

2. Kotak Pesan Peringatan ( Alert Box )

Pesan Pembuka

Kode ini buat nampilin pesan saat pengunjung pertama kali membuka atau mengunjungi blog kalian gan. Cari kode </head> di template blog, lalu copy paste kode di bawah ini tepat di bawahnya gan. Tinggal di edit aja kalimat yang di highlight sesuai keinginan kalian gan.
<script type=”text/javascript”>
alert(“SELAMAT DATANG DI BLOG GAK JELAS INI”);
</script>

Pesan Penutup

Kode ini muncul kalau pengunjung mau meninggalkan atau menutup tab blog kalian gan. Cara pasangnya sama dengan pesan pembuka, cari kode </head> lalu copy paste kode berikut di bawahnya gan. Tinggal di edit aja kalimat yang di highlight sesuai keinginan kalian gan.
<script type=”text/javascript”>
window.onbeforeunload=function(){
return confirm(“Yakin Ingin Meninggalkan Blog Ini?? Masih Banyak Yang Menarik Loh Untuk Di Baca!!”);
}
</script>

3.Onmouseover Sound

Kode ini buat memberikan backsound musik kalau pengunjung mengarahkan atau mengklik mousenya ke text atau gambar gan. Caranya tinggal copy paste kode di bawah ini ke mode HTML edit post blog kalian.
<script language=”javascript” type=”text/javascript”>
function playSound(soundfile) {
document.getElementById(“SCsound”).innerHTML=
“<embed src=\””+soundfile+”\” hidden=\”true\” autostart=\”true\” loop=\”false\” />”;
}
</script>
<span id=”SCsound”></span>
Lalu copy dan paste kode di bawah ini buat ngemunculin musik/soundnya gan.
<a href=”#” onmouseover=”playSound(‘URL-FILE-MUSIK/SOUND’);”>
Mouseover DISINI Buat Dengerin Musik</a>
Atau
<a href=”#” onclick=”playSound(‘URL-FILE-MUSIK/SOUND’);”>Klik DISINI Buat Dengerin Musik</a>
Tinggal dipilih aja mau yang onmouseover atau onclick gan. Lalu ganti URL-FILE-MUSIK/SOUND dengan Url file musik/sound kalian. Silahkan di edit sendiri kalimatnya atau bisa juga diganti sama gambar gan. Contoh kayak di bawah ini, silahkan di coba dan mungkin loadnya agak lama karena gw pake file mp3 gan.
Mouseover DISINI Buat Dengerin Musik
Klik DISINI Buat Dengerin Musik

4.Show Hide Konten / Spoiler

Kode untuk menampilkan atau menyembunyikan konten, mirip tombol spoiler yang ada  di forum-forum gan. Cara pasangnya gampang, loe cari kode </head> lalu copy paste kode javascript di bawah ini di atasnya gan.
<script language=’javascript’ type=’text/javascript’>
function showHide() {     var ele = document.getElementById(“showHideDiv”);
if(ele.style.display == “block”) {             ele.style.display = “none”;       }
else {         ele.style.display = “block”;     } }
</script>
Sekarang tinggal nambahin kode di konten yang pengen di isi tombol buka tutupnya gan. Copy paste kode di bawah ini dan letakan kontenya di tempat yang udah gw kasi tanda gan.
<form action=”” method=”post”>
<input onclick=”return showHide();” type=”button” value=”Show-Hide” />
</form>
<div id=”showHideDiv” style=”display: none;”>
———> Konten Disini Gan <———
</div>
Konten bisa apa aja bisa gambar, teks atau apapun. Buat edit tulisan di tombolnya ganti aja Show-Hide sesuai keinginan loe. Contoh seperti di bawah ini di klik aja gan.

5. Teks Berjalan / Marquee

Kode ini bisa kalian gunakan untuk menampilkan teks berjalan gan. Kodenya sangat sederhana bisa juga untuk gambar atau link gan. Tinggal copy kode di bawah ini dan pastekan di manapun kalian suka.
<marquee onmouseover=”this.stop()” onmouseout=”this.start()” behavior=”scroll” direction=”left” bgcolor=”#FF0000″>Teks, Link Atau Gambar Kalian Disini</marquee>
Buat ngerubah arahnya tinggal di ganti aja “left” sesuai keinginan kemana arah yang loe mau gan. Buat behavior bisa juga diganti pake alternate atau slide, untuk bgcolor silahkan ganti warnanya sesuka hati gan.
Contoh :
“scrool” direction=”left”
Contoh marquee atau teks berjalan
“alternate”
Contoh marquee atau teks berjalan
“scrool” direction=”left” dengan gambar
badge

6. Downloading Progress Bar

Dengan kode ini kita bisa dengan mudah membuat bar proses download yang sederhana gan. Yang ini pake javascript kalau di klik progress barnya bergerak atau berubah otomatis gan. Tinggal copy dan paste kode di bawah ini dimana pun loe mau gan.
<script type=”text/javascript”>
//current progress
var currProgress = 0;
//is the task complete
var done = false;
//total progress amount
var total = 100;
//function to update progress
function startProgress() {
//get the progress element
var prBar = document.getElementById(“prog”);
//get the start button
var startButt = document.getElementById(“startBtn”);
//get the textual element
var val = document.getElementById(“numValue”);
//disable the button while the task is unfolding
startButt.disabled=true;
//update the progress level
prBar.value = currProgress;
//update the textual indicator
val.innerHTML = Math.round((currProgress/total)*100)+”%”;
//increment the progress level each time this function executes
currProgress++;
//check whether we are done yet
if(currProgress>100) done=true;
//if not done, call this function again after a timeout
if(!done)
setTimeout(“startProgress()”, 100);
//task done, enable the button and reset variables
else
{
document.getElementById(“startBtn”).disabled = false;
done = false;
currProgress = 0;
}
}
</script>
<progress id=”prog” value=”0″ max=”100″></progress>
<br />
<input id=”startBtn” onclick=”startProgress()” type=”button” value=”start” />
<div id=”numValue”>
0%</div>
Standarnya progress bar ini kodenya cuma <progress value=”0″ max=”100″></progress> gan. Contoh seperti yang dibawah ini, silahkan di coba gan.
Sumber : http://www.developerdrive.com/2012/07/displaying-the-progress-of-tasks-with-html5/
Progress Bar 
0%

7. Textarea

Fungsi textarea ini bisa buat naruh kode di postingan gan sebagai pengganti blockquote. Cara pasangnya gampang gan tinggal copy paste kode di bawah ini dan ada tiga pilihan gan.
Biasa
<textarea rows=”4″ cols=”50″>
Teks atau Kode Disini Gan
</textarea>
Seleksi Otomatis
<textarea rows=”4″ cols=”50″ onclick=”this.focus();this.select()” readonly=”readonly”>
Teks atau Kode Disini Gan
</textarea>
Seleksi Dengan Tombol
<form name=”selectall”>
<textarea name=”messageBody” rows=”4″ cols=”50″>Teks atau Kode Disini Gan</textarea>
<br />
<input type=”button” value=”Select Text” onClick=”javascript:this.form.messageBody.focus();this.form.messageBody.select();”>
</form>
Tinggal di edit aja gan rows buat tinggi dan cols buat lebar. Untuk yang pake tombol kalian bisa ganti tulisan Select Text sesuai keinginan gan. Contoh ada dibawah ini gan silahkan dicoba.
Biasa

Seleksi Otomatis

Seleksi Dengan Tombol

8.Link Dengan Pop Up

Yang terakhir gan, ini kode buat link kalau di klik bakal muncul pop up sesuai dengan target Urlnya. Misal digunakan untuk iklan atau link download gan. Copy paste kode javascript di bawah ini di atas kode </head> atau bisa juga paste langsung di postingan dengan linknya gan.
<script language=”javascript” type=”text/javascript”>
function scpopup(url) {
newwindow=window.open(url,’name’,’height=200,width=150′);
if (window.focus) {newwindow.focus()}
return false;
}
</script>
Buat kode linknya seperti di bawah ini silahkan di copy paste gan.
<a href=”Target URL Pop up” onclick=”return scpopup(‘Target URL Pop up’)”>Contoh Link Popup</a>
Tinggal diganti aja Target URL Pop up dengan link yang kalian inginkan gan. Buat contoh klik aja link di bawah ini gan.
Sumber: http://seociyus.blogspot.com/2013/02/kode-javascript-dan-html-sederhana-buat-di-blog.html#ixzz2UC60SpSv
2. pengertian CSS dan perintah perintahnya

CSS atau Cascading Style Sheets adalah sebuah dokumen yang berisi aturan yang digunakan untuk memisahkan isi dengan layout dalam halaman-halaman web yang dibuat. CSS memperkenalkan “template” yang berupa style untuk dibuat dan mengijinkan penulisan kode yang lebih mudah dari halaman-halaman web yang dirancang. CSS mampu menciptakan halaman yang tampak sama pada resolusi layar yang berbeda dari pengunjung berbeda tanpa memerlukan penggunaan tabel seperti pada html klasik.
Dengan CSS anda akan lebih mudah dalam melakukan setting tampilan keseluruhan web hanya dengan menggantikan atribut-atribut atau perintah dalam style CSS dengan atribut yang diinginkan. Anda tidak perlu repot merubah satu per satu atribut tiap elemen yang ada dalam halaman web jika anda menggunakan style CSS ini.
Dengan menggunakan CSS, maka dokumen yang dibuat menggunakan HTML murni akan dapat lebih disingkat dan akan lebih mengefisiensikan waktu yang dibutuhkan. Bayangkan jika kita membuat sebuah situs yang kompleks dengan banyak atribut untuk tiap halaman dalam situs tersebut, maka kita harus menentukan tiap atribut untuk tiap halaman tersebut satu per satu.
Bagaimana jika terdapat seratus atau lebih halaman dalam situs tersebut? Bayangkan berapa banyak waktu yang kita habiskan hanya untuk memformat tiap halaman jika terdapat kesalahan dalam halaman-halaman tersebut? Namun masalah tersebut dapat lebih diminimalisir dengan menggunakan CSS, karena kita hanya akan membuat sebuah style yang akan memformat keseluruhan halaman dalam situs yang dibuat dan kita cukup menentukan selector dalam style yang akan digunakan dalam halaman-halaman tersebut dan mengeditnya.
Saat ini CSS merupakan style yang banyak digunakan dikarenakan berbagai kemudahan dan lengkapnya atribut yang dimilikinya, disamping berbagai kemudahan lain yang ditawarkannya. Penggunaan CSS dalam web akan lebih efisien dikarenakan CSS dapat digunakan untuk penggunaan secara berulang pada tag-tag tertentu, sehingga kita tidak usah mengetikkan ulang seluruh perintah pemformatan seperti halnya dalam HTML klasik.
Cara Kerja
Cara kerja CSS sangatlah mudah, karena CSS hanya membutuhkan style sebagai penentu dari font, warna, dan format-format lain untuk memformat atribut sebuah halaman web yang kita buat. Tiap style memiliki dua buah elemen dasar yaitu “selector” dan “declaration”.
Sebuah selector biasanya adalah tag HTML, sementara declaration adalah satu atau beberapa perintah / nilai dari CSS yang menunjukkan type bentuk yang diaplikasikan pada selector. Declaration ini biasanya di tandai dengan tanda kurung kurawal “{ }” , dan perintah atau nilai CSS yang berbeda dipisahkan satu dengan yang lain dengan menggunakan titik-koma “;” seperti terlihat pada contoh berikut :
< style type="text/css">
.teks {font-family:verdana; color:blue;}
< /style>

Disini terlihat bahwa .teks adalah selector, dan {font-family:verdana; color:blue;} adalah declaration.
Selector-selector dan style dalam CSS akan dimasukkan dalam sebuah tempat yang sama dalam isi dokumen HTML atau dibuat diluar dokumen HTML yang nantinya akan dipanggil untuk menentukan isi tampilan dokumen HTML. Anda hanya menunjuk pada selector-selector dimana akan mengaktifkan sebuah style yang anda inginkan.
Hal yang paling umum dalam memasukkan kode Style CSS dengan menggunakan tag < style type=”text/css”>. Tag < style type=”text/css”> ini selalu tampil dalam bagian < head> dan sebelum < /head> dari dokumen anda seperti terlihat pada contoh berikut :
< html>
< head>
< style type="text/css">
... aturan-aturan css ...
< /style>
< /head>
< body>
... Dokumen html yang akan diberikan aturan CSS ...
< /body>
< /html>

Untuk menentukan font dan warna-warna tiap kali anda memulai sebuah cell table, anda dapat menentukan sebuah style dan kemudian anda tinggal menunjuk ke style dalam cell table anda. Bandingkan contoh dari sebuah table berikut yang dibuat menggunakan HTML sederhana :
< html>
< head>belajar css
< /head>
< body>
< table>
< tr>< td bgcolor="red" align="center">
< font face="verdana" color="blue">belajar css1
< /font>< /td>< /tr>
< /table>
< /body>
< /html>

Bandingkan jika dokumen tersebut dibuat dengan menggunakan CSS (dengan menganggap bahwa sebuah selector yang dipanggil “teks” telah ditetapkan yang akan mengatur format teks dokumen html tersebut).
< html>
< head>< title>belajar css< /title>
< style type="text/css">
.teks { background-color:red; color:blue; font-family:verdana;}
< /style>
< /head>
< body>
< table>
< tr>< td class="teks">belajar css1< /td>< /tr>
< /table>
< /body>
< /html>

Penempatan CSS
Menempatkan style CSS dalam dokumen web yang kita buat dalam bahasa html dapat dilakukan dengan beberapa cara dan tingkatan yang berbeda sesuai dengan keinginan kita. Cara penempatan dalam HTML adalah dengan menggunakan beberapa cara, diantaranya adalah menggunakan Inline Style, Internal Style, External style, dan juga teknik Importing dengan Internal Style.
Inline Style
Adalah CSS yang dibuat dalam sebuah tag HTML yang hanya berlaku untuk dokumen yang diapitnya saja. Biasanya teknik ini digunakan pada pemformatan khusus pada sebuah elemen HTML dan tidak digunakan untuk memformat seluruh elemen dalam dokumen web. Contohnya adalah sebagai berikut :
< html>
< head>
< title>belajar css< /title>
< /head>
< body>
< font style="arial; font-family:Arial; font-size: 20px; background-color:yellow">Penerapan Inline Style < /font>
< /body>
< /html>

Dalam script di atas dapat diketahui bahwa style tersebut memiliki nama style arial yang memiliki nilai atau value untuk style tersebut. Adapun nilai style adalah jenis font arial dengan ukuran 20 pixel dan memiliki warna latar kuning.
Internal Style
Pada teknik ini, style CSS diletakkan pada tengah tag antara tagdan. Aturan-aturan dalam style ini diatur sedemikian rupa untuk digunakan pada suatu tempat maupun untuk keseluruhan situs. Contoh dari teknik ini terlihat pada contoh berikut :
< html>
< head>
< title>Belajar CSS< /title>
< style type="text/css">
< !-- .teks {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; color: white; background-color: blue;} -->
< /style>
< /head>
< body>
< div class=teks>Penerapan Internal Style

< /body>
< /html>

Maksud dari < !– aturan css –> diatas adalah berguna agar browser yang tidak mendukung CSS tidak menampilkan perintah-perintah CSS, jadi perintah CSS didalam < !– –> akan dianggap sebagai komentar HTML biasa dan tidak akan ditampilkan dalam browser walaupun browser tersebut mendukung CSS.
Import Style
Dengan teknik ini sebuah Style tidak disimpan pada halaman tersebut, namun untuk menghubungkannya dengan halaman web yang kita buat digunakan perintah import yang terdapat pada style CSS. Seperti terlihat pada contoh berikut :
< html>
< head>
< title>Belajar CSS< /title>
< style type="text/css">
< !-- @import url (http://www.nama_situs.com/style.css); -->
< /style>
< /head>
< body>
< div class=teks>Penerapan Import Style< /div>
< /body>
< /html>

Pada teknik diatas, dokumen HTML akan mengambil atau import style CSS untuk dipergunakan dalam dokumen tersebut. Dimana pada contoh diatas dokumen akan mengimport file style dengan nama style yang berekstensi CSS pada alamat url http://www.nama_situs.com dengan menggunakan perintah :
@import url (http://www.nama_situs.com/style.css);
External Style
Dengan menggunakan teknik ini kita dapat memanggil style CSS pada file CSS yang kita inginkan dengan menggunakan perintah “Link rel” yang berfungsi untuk menghubungkan kedalam sebuah style CSS eksternal dengan nama yang telah kita tentukan seperti terlihat pada contoh :
< link rel="stylesheet" type="text/css" href="style.css
Dalam contoh diatas kita menghubungkan sebuah dokumen html dengan sebuah style eksternal dengan nama style.css yang telah kita buat sedemikian rupa sehingga style tersebut dihubungkan untuk memformat tampilan dalam dokumen html tersebut.
Dalam mengimport file CSS, kita dapat langsung mengimport beberapa file CSS sekaligus dalam sebuah dokumen agar memperkaya tampilan dokumen kita seperti terlihat pada contoh berikut :
< link rel="stylesheet" type="text/css" href="style1.css">
< link rel="stylesheet" type="text/css" href="style2.css">
< link rel="stylesheet" type="text/css" href="style3.css">

Atau kita dapat menggunakan perintah :
< style>
< !-- @import url(style1.css); @import url(style2.css); @import url(style3.css); -->
< /style>

Perbedaan dalam teknik terakhir adalah perintah import tersebut akan mengambil style CSS dengan cara import style dari alamat url yang kita tentukan. Cara ini lebih efisien dikarenakan dokumen yang kita beri perintah import tersebut hanya akan mengimport file css yang pada akhirnya, style CSS tersebut hanya perlu di download sekali saja dalam dokumen style sheet eksternal yang terpisah dengan dokumen HTML asli. Ketika surfing ke dalam situs anda maka CSS akan disembunyikan dalam komputer user sehingga akan memperkecil ukuran file sebuah situs yang kita buat. Jadi jika anda menggunakan cara terakhir ini, maka sebelumnya anda harus membuat sebuah dokumen style CSS eksternal tersebut dengan ekstensi .css dimana dokumen style tersebut berisi aturan yang akan mengatur tampilan dokumen web yang dibuat
STRUKTUR CSS
Dalam pembuatan dokumen web menggunakan style CSS di kenal adanya aturan atau struktur penulisan baku agar style CSS yang kita buat tersebut dapat ditampilkan dengan baik dalam dokumen web yang dibuat. Contoh :
< html>
< head>
< title>HTML Selector< /title>
< style type=”text/CSS”>
< !– p {font-family: verdana;} –>
< /style>
< /head>
< body>
< p> penggunaan HTML Selector dalam CSS < /p>
< /body>
< /html>
Pada contoh diatas dipergunakan tag HTML < p> sebagai selector dan setiap huruf yang berada diantara tag < p>
dan < /p> akan memiliki jenis font verdana sesuai dengan value atau nilai yang diberikan dalam property style tersebut.
Selector
Jika dalam HTML kita mengenal adanya tag-tag yang menyusun sebuah dokumen HTML, maka dalam CSS kita juga mengenalnya dengan sebutan selector. Selector adalah nama-nama yang diberikan untuk style-style yang berbeda baik itu style internal maupun eksternal. Dalam style tujuan, anda harus menentukan bagaimana tiap selector seharusnya bekerja yang dinamakan properties di dalam tanda { } (curly bracket) yang dapat memiliki nilai berupa font, warna dll, kemudian dalam body di halaman web anda, anda arahkan ke selector-selector ini untuk mengaktifkan style tersebut.
Karena CSS memiliki aturan tersendiri dalam penulisan sintaknya dalam CSS, dan penulisan sintak tersebut terbagi ke dalam tiga bagian yaitu : Selector, Property, dan Value. Sebagai penjelas coba perhatikan contoh berikut :
Selector {property: value;}
Selector dalam CSS adalah elemen yang akan didefinisikan dalam style CSS, sedangkan elemen ini dapat berupa tag HTML maupun Class. Sedangkan Property dalam CSS adalah atribut yang berfungsi untuk mendefinisikan Selector, sedangkan Value adalah nilai atau harga dari sebuah Property. Sebagai contoh :
< html>
< head>
< style type="text/css">
B.besar {
color:red; font-size:15px; font-family:arial;
}
< /style>
< /head>
< body>
< b>ini adalah huruf besar dengan html

< b class="besar">ini adalah huruf besar dengan CSS
< /body>
< /html>

Class Selector
Digunakan untuk menentukan style yang dapat digunakan tanpa menentukan lagi tag HTML sederhana. Penulisan class adalah dengan menggunakan tanda titik atau dot. Selain aturan penulisan diatas, CSS juga mengenal Class Selector dimana dalam elemen yang sama kita dapat menerapkan lebih dari satu style. Adapun contohnya adalah sebagai berikut
< html>
< head>
< title>Class Selector< /title>
< style type="text/CSS">
< !-- f.times {font-family: times;} f.verdana {font-family: verdana;} .courier {font-family: "courier";} -->
/style>
< /head>
< body>
< f class="times"> Ini adalah Contoh penggunaan class sebagai selector, setiap huruf memiliki huruf times new roman

Ini adalah Contoh penggunaan class sebagai selector, setiap huruf memiliki huruf verdana< /f>< br />
< f class="courier"> Ini adalah Contoh penggunaan class sebagai selector, setiap huruf memiliki huruf courier< /f>
< /body>
< /html>

Pada contoh diatas, tag f memiliki 2 class yang berbeda untuk memformat paragraf yaitu .times dan .verdana dikarenakan tag class .times dan .verdana adalah class yang dimiliki oleh tag f maka ia hanya dapat dikenakan pada elemen f saja. Lain halnya dengan class .courier, ia dapat dipergunakan oleh semua elemen tanpa harus menggunakan tag f di awal dan akhir elemen yang akan di format.
Nama untuk tiap class dapat berbeda-beda, Anda dibebaskan menentukan nama class sendiri, namun ada baiknya memilih nama dari tiap class yang mengacu kepada fungsi dari class tersebut. Hal ini ditujukan agar anda tidak bingung mempergunakan class pada saat menggabungkannya ke dalam tag HTML. Contoh :
< p class="blog"> Ini teks untuk paragraph pada blog < /p>
< p class="menukiri"> Ini teks untuk paragraph pada menu kiri < /p>

Id Selector
ID selector digunakan untuk menentukan style yang berhubungan dengan objek-objek dengan sebuah ID yang unik. Berbeda dengan Class Selector yang dapat kita pergunakan pada berbagai tag, ID Selector ini memiliki sifat-sifat yang berbeda. ID selector hanya dapat dipergunakan pada satu elemen saja pada setiap halaman web yang kita buat. ID Selector menggunakan tag # (kres) sebelum menggunakan nama Selector. Adapun contohnya adalah sebagai berikut :
#helvetica {font-family: Helvetica;}
Dalam penerapannya pada tag HTML, Anda dapat menggunakan aribut < span> ataupun < div>, seperti terlihat pada contoh berikut :
< span id="helvetica">Ini adalah huruf helvetica< /span>
< div id=”helvetica”>Ini adalah huruf helvetica< /div>

Adapun penulisan dalam dokumen dapat dituliskan seperti pada contoh berikut :
< html>
< head>
< title>ID Selector< /title>
< style type="text/CSS">
< !-- #times {font-family: times;} #verdana {font-family: verdana;} #courier {font-family: "courier";} -->
< /style>
< /head>
< body>
< div id="times"> Ini adalah Contoh penggunaan id sebagai selector, setiap huruf memiliki huruf times new roman< /div>< br>
< div id="verdana"> Ini adalah Contoh penggunaan id sebagai selector, setiap huruf memiliki huruf verdana< /div>< br>
< div id="courier"> Ini adalah Contoh penggunaan id sebagai selector, setiap huruf memiliki huruf courier< /div>
< /body>
< /html>

Selain yang dijelaskan diatas, dalam CSS kita juga mengenal adanya Pewarisan (inheritance), Pseudo Classes, Pseudo-Element, dan Selectors-Kontekstual (Contextual Selector).
Pewarisan / Inheritance
Yang dimaksud pewarisan atau inheritance disini adalah satu kondisi dimana bagian-bagian HTML dalam dokumen kita yang kekurangan dalam spesifikasi aturan CSS dapat mengikuti atau dibuat menurut aturan CSS yang menutupinya. Setiap aturan yang tidak ada dalam format huruf yang dibuat dengan HTML atau ingin menggantikannya dengan aturan CSS, tetap akan mempengaruhi huruf yang ada didalam kurungan CSS.
< html>
< head>< title>inheritance< /title>
< style type="text/css">
B {background-color : green; color : white;}
< /style>
< /head>
< body>
< B>belajar membuat web dengan < fontsize="+1">< em>CSS< /em>< /font> sangatlah mudah. < br>
hanya dengan program notepad pun jadi.< /B>
< /body>
< /html>

Jika dilihat dari contoh diatas dapat dilihat bahwa tag < B> dalam aturan CSS akan mendefinisikan warna font dan warna latar dari font sedangkan tag < B> dalam HTML bisa diartikan sebagai bold atau format untuk menebalkan huruf. Sedangkan tag < font> yang berada dalam lingkup CSS dapat menerapkan aturan HTML dasar akan tetapi tetap terpengaruh dengan kondisi warna dan tebalnya huruf dari aturan CSS yang melingkupinya. Cara ini dapat anda gunakan untuk dikombinasikan lebih lanjut dengan tag-tag lain agar sesuai dengan keperluan dalam dokumen anda.
Pseudo Classess
Pseudo classes dalam CSS dibuat tebal dalam selector-selector untuk menentukan sebuah statemen atau relasi selector, dan penulisannya hanya dipisahkan dengan sebuah tanda titik dua : diantara selector dan pseudo class. Adapun contoh format penulisannya adalah :
selector:pseudo class { property: value; }
Banyak format CSS yang tidak didukung oleh kebanyakan browser, namun terdapat empat pseudo classes yang dapat digunakan secara aman ketika diaplikasikan kedalam hyperlink atau link, yaitu :
  • link : untuk tampilan sebuah link yang belum dikunjungi.
  • visited : untuk tampilan sebuah link ke halaman yang telah dikunjungi.
  • active : untuk tampilan sebuah link yang sedang aktif (ketika di klik).
  • hover : untuk tampilan sebuah link yang hover (ketika cursor melintas diatasnya).
Contoh penggunaan :
a.budi:link {color:blue;}
a.budi:visited {color:purple;}
a.budi:active {color:red;}
a.budi:hover {text-decoration:none; color:blue; background-color:yellow;}
Anda dapat menggunakan hover pseudo class dengan elemen-elemen lain selain link.
Pseudo Element
Pseudo element dalam CSS ditempatkan dalam sebuah selector sama seperti pada pseudo classes, penulisannya akan seperti contoh berikut :
selector:pseudoelement {property: nilai;}
Contoh setting huruf dan baris pertama :
Pseudo element pada huruf pertama di aplikasikan elemen dari huruf pertama dan baris pertama pada atas baris sebuah elemen. Anda dapat membuat huruf besar dan huruf tebal baris pertama pada paragraf dengan menggunakan perintah berikut :
p:first-letter {font-size:5px; float:left;}
p:first-line {font-weight:bold;}

Before dan Ater
Pseudo element before dan after digunakan dengan property content untuk menempatkan isi dari sebuah elemen tanpa menyentuh kode HTML. Nilai dari property content ini dapat berupa open-quote, close-quote, no-open-quote, no-close-quote, berbagai string yang disertakan dalam tanda kutip atau berbagai image gambar menggunakan url(nama image) seperti contoh berikut :
blockquote:before {content: open-quote;}
blockquote:after {content: close-quote;}
li:before {content: "POW: "}
p:before {content: url(images/gambar.jpg)}

Selector Kontekstual
Selektor Kontekstual dalam CSS hampir sama dengan pernyataan-pernyataan kondisional dimana deklarasi dalam Style-Sheet CSS yang ada akan berpengaruh jika menemui kondisi atau keadaan tertentu. Contoh dari selector kontekstual adalah :
< html>
< head>
< title>selector kontekstual < /title>
< style type="text/css">
b em {font-family: verdana; background: blue; color: white; }
< /style>
< /head>
< body>
< b>
belajar membuat web dengan < em>CSS< /em>sangatlah mudah < br>
< /b>
< em>hanya dengan program notepad pun jadi< /em>
< /body>
< /html>

Dalam contoh diatas dapat dilihat bahwa dokumen web tersebut akan menerapkan style CSS tersebut pada dokumen yang berada dalam tag < em> (font verdana, warna latar biru dan font berwarna putih) dimana tag < em> tersebut berada di dalam tag < b> dan (bold/tebal), sedangkan tag < em> yang berada di luar tag < b> dan tag < /b> tidak akan terpengaruh dengan setting style tersebut atau hanya memiliki nilai < em> biasa atau huruf miring.
Shorthand CSS
Spesifikasi dalam CSS, dimana anda harus mengetikkkan aturan-aturan CSS ke dalam style kadang membuat kita merasa jemu jika harus menuliskan seluruh aturan-aturan yang panjang tersebut. Teknik seperti ini biasa disebut dengan Longhand Notation dimana seluruh aturan harus diketikkan tanpa adanya penyingkatan kata seperti ketika kita menulis sms ke teman kita.
Namun jika anda menggunakan teknik shorthand CSS dimana dengan menggunakan teknik ini memungkinkan anda untuk membuat berbagai style menggunakan sintaks yang lebih singkat yang dikenal dengan shorthand CSS atau Shorthand Notation. Shorthand CSS memungkinkan anda untuk menentukan nilai dari beberapa property sekaligus dengan menggunakan sebuah property tag, contoh adalah pada penggunaan property font yang memungkinkan anda untuk menentukan property font-style, font-variant, font-weight, font-size, line-height, dan font-family dalam sebuah baris sintak. Contoh :
< html>
< title>menggunakan shorthand CSS< /title>
< head>
< style>
H1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
< /style>
< /head>
< body>
< h1>huruf ini akan tebal dengan jenis huruf arial sebesar 16 point < /h1>
< /body>
< /html>

Jika ditulis dalam shorthand CSS, tag diatas akan terlihat sama seperti :
H1 {font: bold 16pt/18pt Arial}
Sebagai perbandingan adalah pada tag H1 dibawah ini yang menggunakan sintak longhand CSS (Catatan bahwa property font-variant, font-stretch, font-size-adjust, dan font-style telah dibuat kedalam nilai default).
Dengan menggunakan shorthand CSS ini memungkinkan anda untuk menempatkan hanya beberapa nilai saja dari property yang kita inginkan dalam sebuah style. Penempatan property tersebut dalam dokumen web diwakili oleh nilai yang dipisahkan dengan spasi.
Sebagai contoh dalam menyingkat penulisan pembuatan layout seperti margin, padding dan border-width dengan Shorthand CSS kita dapat menjadikan satu ke dalam margin-top-width, margin-right-width, margin-bottom-width dan lain sebagainya dalam susunan property seperti top, right, bottom dan left. Seperti dalam contoh berikut :
p {border-top-width: 1px; border-right-width: 5px; border-bottom-width: 10px; border-left-width: 20px; }
Dapat dibuat menjadi lebih singkat dengan mengunakan shorthand notation sehingga akan menjadi :
p {border-width: 1px 5px 10px 20px; color: red; }
Kemudian untuk property border-width, border-color dan border-style dapat juga dijadikan satu menjadi :
p {border: 1px red solid;}
Cara ini dapat juga di aplikasikan untuk border-top, border-right dan sebagainya dengan hanya menetapkan dua nilai (seperti margin: 1em 10em;), dimana nilai pertama akan menjadi nilai untuk posisi atas dan posisi bawah, kemudian nilai kedua akan menjadi nilai dari posisi kiri dan kanan. Property yang berhubungan dengan font juga dapat dijadikan satu dengan mengunakan property font seperti dalam contoh berikut ini dimana nilai ‘/1.5′ adalah mengacu pada nilai untuk line-height :
p {font: italic bold 1em/1.5 courier;}
Jika diterapkan dalam dokumen HTML maka akan menjadi :
< html>
< title>menggunakan shorthand CSS< /title>
< head>
< style>
body {border: 1px red solid;}
p {font: italic bold 1em/1.5 courier;}
H1 {font: bold 16pt/18pt Arial}
< /style>
< /head>
< body>
< p>huruf ini akan tebal dan miring dengan line height 1,5< /p>
< h1>huruf ini akan tebal dengan jenis huruf arial sebesar 16 point < /h1>
< /body>
< /html>

Ketika ditulis menggunakan shorthand notation, nilai lain akan diabaikan secara otomatis dan menetapkan nilai default untuk nilai yang diabaikan tersebut. Jika anda memiliki style-style yang ditentukan dalam lebih dari satu lokasi sebagai contoh adalah style CSS yang diikutkan dalam halaman HTML dan style yang diimport dari external style sheet menggunakan sintaks CSS shorthand dan longhand. Sebaiknya anda berhati-hati jika anda mengabaikan property tersebut karena jika terdapat aturan CSS yang berlawanan maka akan dapat mengakibatkan adanya property yang bertumbuk sehingga akan merusak tampilan yang dibuat.

Terkait dengan Mengenal Sistem Kerja Cascading Style Sheet (CSS)

  • Mengubah Teks Website dengan Google Font

    Tampilan website biasanya memiliki jenis huruf/font yang standar karena halaman web yang ditampilkan dalam seluruh browser memiliki tampilan dengan huruf/font yang berbeda tergantung font yang ...
  • Membuat Efek Transisi Pada Tombol dengan CSS

    Seperti yang telah kita ketahui bersama bahwa sebuah tombol/hyperlink memiliki tampilan standar (biasanya berwarna biru dengan garis biru dibawahnya/underscore). Dan ketika mouse anda melintas diatas ...
  • Mengganti Logo di Halaman Login Admin dari Functions

    Dalam tutorial sebelumnya tentang Mengganti Logo di Halaman Login Admin WordPress 3.5.1 telah dijelaskan tentang cara mengganti tampilan logo pada halaman login admin. Namun dikarenakan ...
1. Pengertian HTML (Hypertext Markup Language) | HTML atau Hypertext Markup Language adalah suatu sistem penulisan perintah dan formating hypertext sederhana yang ditulis ke dalam dokumen teks ASCII agar dapat menghasilkan tampilan visual yang terintegrasi.

PERINTAH-PERINTAH HTML

PERINTAH-PERINTAH HTML Sumber Modul MR. HANDRI SUNJAYA
TEKS
Berikut ini adalah perintah-perintah HTML untuk penanganan TEKS.

<H1> Sampai <H6>
fungsi  : untuk membuat (memilih) ukuran teks.
Sintak  : <H1>             </H1>
Contoh
<HTML>
<HEAD><TITLE>Contoh Heading</TITLE></HEAD>
<BODY>
<H1> Teks dengan Heading 1</H1>
<H2> Teks dengan Heading 2</H2>
<H3> Teks dengan Heading 3</H3>
<H4> Teks dengan Heading 4</H4>
<H5> Teks dengan Heading 5</H5>
<H6> Teks dengan Heading 6</H6>
</BODY>
</HTML>

<HR>
Perintah ini digunakan untuk membuat garis horizontal penuh layar
Sintaks            : <HR>
Contoh            :
<HTML>
<HEAD><TITLE>     </TITLE></HEAD>
<BODY>

<HR> Kalimat ini diapit oleh 2 buah garis<HR>

</BODY>
</HTML>

<I>
Perintah ini digunakan untuk membuat teks miring.
Sintaks            : <I>    </I>
Contoh
<HTML>
<HEAD><TITLE>     </TITLE></HEAD>
<BODY>

<I> Selamat Datang Ke Websiteku</I>

</BODY>
</HTML>
<B>
Perintah ini digunakan untuk membuat teks tebal.
Sintaks            : <B>   </B>
Contoh
<HTML>
<HEAD><TITLE>     </TITLE></HEAD>
<BODY>
<B> Selamat Datang Ke Websiteku</B>
</BODY>
</HTML>

<U>
Perintah ini digunakan untuk membuat teks bergaris bawah.
Sintaks            : <U>   </U>
<HTML>
<HEAD><TITLE>     </TITLE></HEAD>
<BODY>
<U> Selamat Datang Ke Websiteku</U>
<U><B> Selamat Datang Ke Websiteku</U></B>
</BODY>
</HTML>

<CENTER>
Perintah ini untuk membuat teks ke tengah layar.
Sintaks            : <CENTER>  </CENTER>
Contoh            :
<HTML>
<HEAD><TITLE>     </TITLE></HEAD>
<BODY>
<H1><CENTER> Selamat Datang Ke Websiteku</CENTER></H1>
</BODY>
</HTML>

ALIGN
Digunakan untuk membuat teks rata kiri, tengah, kanan atau rata kanan dan kiri.
Sintaks            :
<P ALIGN=right>      → Rata Kanan
<P ALIGN=left>        → Rata Kiri
<P ALIGN=center>   → Rata Tengah
<P ALIGN=justify>   → Rata Kanan dan Kiri
atau
<H ALIGN=right>
<H ALIGN=left>
<H ALIGN=center>
<H ALIGN=justify>
Contoh pemakaian :
<H2 ALIGN=center>SELAMAT DATANG </H2>

<BR> (Line Break)
Perintah ini digunakan untuk memasukan fungsi Enter. Sebagai contoh, jika perintah <BR> diberikan di akhir baris, maka kalimat berikutnya akan dicetak pada baris berikutnya.

<!–
Perintah untuk membuat KOMENTAR. Semua teks atau perintah yang diapit perintah ini tidak akan dijalankan. Ini hanya komentar untuk program.
Sintaks            : <!–    –>
Contoh            : <!—Ini adalah contoh komentar –>

<SMALL>
Perintah untuk membuat teks berukuran kecil.

<BIG>
Perintah untuk membuat teks berukuran besar

<P> (Paragraph)
Perintah ini digunakan untuk memisahkan paragraph yang satu dengan paragraph yang lain.
Sintaks            : <P>   </P>

<DD>
Perintah ini digunakan untuk membuat teks atau sebuah paragraph agak masuk ke dalam.
Sintaks            : <DD>

BASEFONT
Perintah ini digunakan untuk mengubah ukuran font.
Contoh            :
<HTML>
<HEAD><TITLE>     </TITLE></HEAD>
<BODY>

<BASEFONT SIZE=6>
Teks dengan ukuran 6 pt<BR>
<B>Teks dengan ukuran 6 pt dan tebal</B>

<BASEFONT SIZE=10>
<BR>
Teks dengan ukuran 10 pt

</BODY>
</HTML>

FONT
Juga untuk mengubah ukuran font, tetapi angka yang terdapat dalam SIZE yang merupkan ukuran font harus diberi tanda kutip.
FACE
Untuk mengubah jenis font
Contoh :
<HTML>
<HEAD><TITLE>     </TITLE>
</HEAD>
<BODY>

<FONT SIZE =”6” FACE=”Times New Roman”>
Teks dengan jenis font Times New Roman.
<FONT SIZE =”6” FACE=”Arial”>
Teks dengan jenis font Arial.

</BODY>
</HTML>

<SUP>
Perintah ini digunakan untuk membuat cetak naik suatu teks.
Contoh :
<HTML>
<HEAD><TITLE>     </TITLE>
</HEAD>
<BODY>

Kami adalah yang pertama : 1<SUP>st</SUP> in the world.

</BODY>
</HTML>

<SUB>
Perintah ini digunakan untuk membuat cetak turun suatu teks.
Contoh :
<HTML>
<HEAD><TITLE>     </TITLE></HEAD>
<BODY>

H<SUB>2</SUB>O (disebut air(

</BODY>
</HTML>

<UL>
Perintah <UL> (Unordered List) adalah perintah untuk membuat daftar (list).

<LI>
Perintah <LI> (List Item) adalah perintah untuk membuat daftar (list)
CATATAN : Perintah <LI> harus berada dalam perintah OL, UL, DIR, MENU.

Contoh            :
<HTML>
<HEAD><TITLE>     </TITLE>
</HEAD>
<BODY>

<UL>
<LI>
<H2>JAWA TIMUR</H2>
<UL>
<LI>SURABAYA</LI>
<LI>MALANG</LI>
<LI>GRESIK</LI>
</UL>
</LI>
<BR>
<LI>
<H2>JAWA BARAT</H2>
<UL>
<LI>BANDUNG</LI>
<LI>SUKABUMI</LI>
<LI>BOGOR</LI>
</UL>
</LI>
</BODY>
</HTML>

BODY

<BODY … </BODY>
Perintah BODY adalah perintah untuk membuat warna latar belakang pada layar, mengubah warna link, mengubah warna dasar link, menampilkan pesan ketika halaman ditutup, dan lain-lain sesuai dengan atribut yang diberikan. Sedangkan BODY memiliki 8 atribut, antara lain :
TEXT=warna Untuk menentukan warna teks.
BGCOLOR=warna Untuk mengubah warna dasar layar (halaman).
BACKGROUND=URL Untuk mengatur warna latar belakang gambar.
LINK=warna Untuk menentukan warna link.
ALINK=warna Untuk menentukan warna link yang sedang dipilih.
VLINK=warna Untuk menentukan warna link yang sudah dikunjungi.
ONLOAD=string Perintah yang akan dilaksanakan ketika halaman Website selesai di Download
ONUNLOAD=string Perintah yang akan dilaksanakan ketika halaman Website ditutup.



Contoh :
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000” LINK=”#0000FF” VLINK=”#800080”>
<BODY ONUNLOAD=”window.alert(‘Terima kasih!’)”>

INPUT

<INPUT>
Adalah perintah untuk meminta memasukan (input) dari pengunjung, sedangkan INPUT memiliki cukup banyak atribut, antara lain:
  • TYPE=[text | password | checkbox | radio | submit | reset | file | hidden | image | button] (jenis input)
  • NAME=string (kunci dalam form submit)
  • VALUE=string (nilai dari input)
  • CHECKED (tombol check radio atau checkbox)
  • SIZE=number(panjang kotak teks)
  • MAXLENGHT=number (panjang karakter)
  • SCR=URL (lokasi URL atau gambar)
  • ALT=string (keterangan untuk gambar)
  • ALIGN=[top | middle | bottom | left | right] (pengaturan teks atau gambar)
  • DISABLED (menyembunyikan elemen)
  • READONLY (mencegah perubahan)
  • ACCEPT=string (media untuk upload file)
  • ACCESSKEY=character (tombol shortcut)
  • TABINDEX=number (posisi tab)
  • ONFOCUS=string (kotak teks yang menerima fokus / kursor)
  • ONBLUR=string (kotak teks yang ditinggalkan focus / kursor)
  • ONSELECT=string (teks yang dipilih)
  • ONCHANGE=string (nilai yang akan diganti)
  • ONCLICK=string (perintah yang akan dilaksanakan apabila tombol di klik)

Contoh :
Program 1
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>

<p> <label accesskey=u>Nama Anda: <input type=”text” name=”username” size=”20″ maxlength=”30″></label></p>
<p> <label accesskey=p>Password: <input type=”password” name=”pw” size=”20″ maxlength=”20″></label></p>
</BODY>
</HTML>
Program 2
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>

<p> Silahkan pilih jenis pembayaran Anda :</p>
<p><label accesskey=c><input type=”radio” name=”jenis pembayaran” value=”master card” checked>Master card </label><br>
<p><label accesskey=d><input type=”radio” name=”jenis pembayaran” value=”visa card” checked>Visa card </label><br>
<p><label accesskey=m><input type=”radio” name=”jenis pembayaran” value=”wesel pos” checked>Wesel pos </label><br>
<p><label accesskey=s><input type=”checkbox” name=”kirim” value=”yes” checked>Kirim vie e-mail </label><br>
</BODY>
</HTML>

FORM

<FORM>       </FORM>
Perintah FORM adalah suatu metode untuk membuat format input seperti formulir, dan terdiri dari beberapa atribut:
ACTION=URL Penanganan form
METHOD=[get | post] Metode HTTP untuk submit form.
ENCTYPE=string Tipe isi submit form.
TARGET=string Target berupa jendela atau frame.
ONSUBMIT=string From yang sudah di-Submit.
ONRESET=string Form yang di-reset.

Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>

<form>
<p>
1:<INPUT type=”radio” NAME=”radio” value=”Anda Memilih Nomor ” onclick=”alert(Value)”>
2:<INPUT type=”radio” NAME=”radio” value=”Anda Memilih Nomor ” onclick=”alert(Value)”>
3:<INPUT type=”radio” NAME=”radio” value=”Anda Memilih Nomor ” onclick=”alert(Value)”>
</form>
</BODY>
</HTML>

LABEL

<LABEL>  </LABEL>
adalah suatu perintah untuk membuat keterangan field (kotak input) dalam pembuatan form, dan umumnya digunakan dengan perintah INPUT. Sedangkan LABEL terdiri dari beberapa atribut :
ACCESSKEY=character Tombol shortcut.
ONFOCUS=script Elemen yang menerima fokus (kursor)
ONBLUR=script Elemen yang ditinggalkan fokus (kursor).

Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<p>
<label accesskey=U>Nama Anda :
<input type=”text” name=”username” size=”20″ maxlength=”15″></label>
</p>

<p>
<label accesskey=P>Password :
<input type=”password” name=”pw” size=”20″ maxlength=”20″></label>
</p>

</BODY>
</HTML>

TEXTAREA

<TEXTAREA>   </TEXTAREA>
adalah suatu perintah untuk membuat pengunjung dapat mengetik sekumpulan teks dalam sebuah kotak. Atribut yang dapat digunakan dengan perintah TEXTAREA adalah sebagai berikut :
  • NAME=string (kunci untuk submit form)
  • ROW=number (jumlah baris)
  • COLS=number (jumlah kolom)
  • DISABLE=menyembunyikan elemen
  • READONLY=mencegah perubahan
  • ACCESSKEY=character (tombol shortcut)
  • TABINDEX=number (posisi tab)
  • ONFOCUS=string (kotak teks yang menerima fokus/kursor)
  • ONBLUR=string (kotak teks yang ditinggalkan focus/kursor)
  • ONSELECT=string (teks yang dipilih)
  • ONCHANGE=string (nilai yang akan diganti)

Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>

<p>
<label accesskey=C>
Ketik pesan Anda dalam kotak di bawah ini : <br>
<textarea name=”komentar” cols=”50″ rows=”8″> </textarea>
</label>
</p>

</BODY>
</HTML>

FIELDSET

<FIELDSET>       </FIELDSET>
adalah suatu perintah untuk membuat beberapa formulir yang terdiri dari beberapa bagian:

PEMBUATAN MENU

<SELECT>         </SELECT>
Perintah ini digunakan untuk membuat daftar menu pilihan (options selector), dan umumnya digunakan dengan perintah OPTIONS (pembuat menu pilihan) dan OPTGROUP (pembuat group pilihan). Dengan perintah ini maka Anda akan dapat membuat daftar pilihan seperti yang sering Anda lihat dalam Website professional:

ATRIBUT :
  • NAME=string (kunci untuk submit form)
  • MULTIPLE=dapat membuat menu pilihan berganda
  • SIZE=number (jumlah pilihan yang tampak)
  • DISABLE=menyembunyikan elemen
  • TABINDEX=number (posisi tab)
  • ONFOCUS=string (kotak teks yang menerima fokus/kursor)
  • ONBLUR=string (kotak teks yang ditinggalkan focus/kursor)
  • ONCHANGE=string (nilai yang akan diganti)

<OPTIONS>       </OPTIONS>
Perintah ini untuk membuat menu pilihan, dan umumnya digunakan dengan perintah kontrol SELECT :

ATRIBUT :
  • VALUE=string (nilai pilihan)
  • SELECTED=pilihan berupa inisial
  • DISABLE=menyembunyikan pilihan
  • LABEL=string (pilihan label)

Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>

Pilih status perkawinan Anda :
<select name=”status”>
<option selected value=”">Status … </option>
<option> Belum kawin </option>
<option> kawin </option>
<option> Janda </option>
<option> Duda </option>
</select>

</BODY>
</HTML>

STYLE

<STYLE>      </STYLE>
adalah perintah untuk memasukan (embedding) stylr sheet, misalnya untuk penanganan warna latar belakang halaman (background).

ATRIBUT :
  • TYPE=string(harus “text/css”)
  • MEDIA=MediaDesc (jenis media yang akan dimasukan)
  • TITLE=strings (judul style sheet)

Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
<META name=”description” content=”">
<META name=”keywords” content=”">
<META name=”generator” content=”CuteHTML”>
</HEAD>

<font color=”white”><h1> Selamat datang ke Websiteku. </h1> </font>

<style type=”text/css” media=screen>
BODY {background: red; color:black }
</style>
</BODY>
</HTML>

KETERANGAN
  • <FONT COLOR=WHITE>
Perintah ini untuk membuat warna teks (foreground) dengan warna putih. Jika ingin warna lain, misalnya merah, ganti dengan RED.
  • BODY { background: red; color:black}
Perintah untuk membuat warna latar belakang halaman Website, jika ingin warna aqua misalnya, ganti red dengan aqua.

TABEL & KOTAK

Perintah-perintah yang termasuk ke dalam kategori TABEL adalah sebagai berikut :
  • TABLE
  • CAPTION
  • COLGROUP
  • COL                – Table Column
  • THEAD          – Table Head
  • TFOOT           – Table Foot
  • TBODY          – Table Body
  • TR                   – Table Row
  • TTD                 – Table Data Cell
  • TH                   – Table Header Cell

<TABLE> </TABLE>
Perintah untuk membuat table. Dan terdiri dari beberapa atribut:
  • SUMMARY=string (struktur table)
  • WIDTH=length (lebar table)
  • BORDER=pixels (lebar border)
  • FRAME=[void | above | hsides | lhs | rhs | vsides | box | border] (bagian luar border)
  • RULES=[none | groups | row | cols | all] (bagian dalam border)
  • CELLSPACING=length (spasi antara cell)
  • CELLPADDING=length (spasi dalam cell)
  • ALIGN=[left | center | right] (perata tabel)
  • BGCOLOR=color (warna background table)

Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>

<table>
<tr align=”left”>
<th scope=”col”>Nama</th>
<th scope=”col”>Umur</th>
<th scope=”col”>Alamat</th>
</tr>
<tr align=”left”>
<td>Hans </td>
<td>22 </td>
<td>Paingan </td>
</tr>
</table>
</BODY>
</HTML>

MEMBUAT KOTAK
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>

<table width=”400″ cellspacing=”0″ cellpadding=”5″ border=”2″>
<tr>
<td width=”400″ bgcolor=”#ffcb10″>
<font size=”2″ face=”MS Sans Serif”>
Kalimat biasa dalam kotak <br>
<b>Kalimat tebal dalam kotak</b> <br>
<i>Kalimat miring dalam kotak</i> <br>
</tr>
</table>

</BODY>
</HTML>
MEMBUAT TABLE & KOTAK
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>

<table width=”544″ cellspacing=”0″ cellpadding=”5″ border=”2″>
<tr align=”left”>
<th scope=”col”>Nama</th>
<th scope=”col”>Umur</th>
<th scope=”col”>Alamat</th>
</tr>
<tr align=”left”>
<td>Hans </td>
<td>22 </td>
<td>Paingan </td>
</tr>
</table>

</BODY>
</HTML>

WARNA

FONT COLOR
Perintah untuk memasukan warna kedalam teks.
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>

<basefont size=”6″>

<b>
<font color=”red”>Teks dengan warna merah</font><br>
<font color=”black”>Teks dengan warna hitam</font><br>
<font color=”blue”>Teks dengan warna biru</font>
</b>

</BODY>
</HTML>
BACKGROUND
Adalah perintah untuk membuat warna latar belakang sebuah teks.
KODE-KODE WARNA UNTUK WARNA BACKGROUND
#000000          : Black
#c0c0c0           : Silver
#808080          : Gray
#ffffff             : White
#800000          : Maroon
#ff0000           : Red
#800080          : Purple
#ff00ff                        : Fuchsia
#008000          : Green
#00ff00           : Lime
#808000          : Olive
#ffff00                        : Yellow
#000080          : Navy
#0000ff           : Blue
#008080          : Teal
#00ffff                        : Aqua

Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>

<table cellpadding=”5″ cellspacing=”5″>
<td style=”BACKGROUND: #000000; COLOR: white”>Dasar Hitam </td>
<td style=”BACKGROUND: #ff0000; COLOR: white”>Dasar Merah </td>
</table>

</BODY>
</HTML>

GAMBAR & MUSIK
Perintah-perintah untuk memasukan GAMBAR & MUSIK adalah sebagai berikut :
  • IMG SRC          : Untuk memasukan gambar ke dalam Website
  • IMG BORDER : Untuk membuat bingkai gambar dengan kotak
  • BGSOUND       : Untuk memasukkan suara atau musik ke dalam Website Anda.

IMG SRC
Adalah perintah untuk memasukkan gambar ke dalam Website. Anda dapat memasukkan gambar yang berakhiran (berformat) .JPG, .GIF, .BMP dan lain-lain. Untuk kemudahan pengiriman gambar kelak ke dalam server, satukan terlebih dahulu gambar ke dalam folder program. Barulah panggil ke dalam program.
Sintaks : <IMG SRC=”lokasi gambar”>

IMG BORDER
Untuk membingkai gambar dengan kotak
Sintaks : <IMG BORDER=”5
Angka 5 adalah ukuran border (bingkai), ganti angka ini sesuai dengan ukuran border yang Anda inginkan.

BGSOUND
Perintah ini untuk memasukan suara atau musik ke dalam Website Anda.
Sintaks : <BGSOUND loop=infinite SCR=”Lokasi File”>
PERHATIAN : Ukuran file musik yang sangat besar (misalnya MP3), tidak dapat kita masukkan ke dalam Website kita. Karena nanti kita tidak dapat memindahkannya ke dalam server agar dapat diakses pemakai internet, karena ukurannya sangat besar, akan keluar pernyataan kehabisan waktu ketika kita memindahkannya ke dalam server.

FRAME
Adalah suatu fasilitas dalam HTML yang berfungsi untuk membagi layar ke dalam beberapa jendela. Ada pun perintah-perintah untuk membuat frame dalam HTML adalah sebagai berikut:
  • FRAMESET
  • FRAME
  • IFRAME

<FRAMESET>     </FRAMESET>
Adalah perintah untuk membuat frame, dan umumnya berpasangan dengan perintah FRAME. Atribut untuk FRAMESET :
  • ROWS=length (panjang baris dalam satuan pixel)
  • COLS=length (panjang kolom dalam satuan pixel)
  • ONLOAD=string (semua frame sudah selesai di-load)
  • ONUNLOAD=string (semua frame sudah dihapus)

Contoh :
  • <FRAMESET COLS=”lebar jendela bagian kiri, lebar jendela bagian kanan”>
  • <FRAME COLS=”*,*”>
  • <FRAME ROWS=”*,*”>

FRAME
Perintah ini untuk memasukan gambar, halaman atau URL ke dalam jendela (frame), mengatur margin, menggulung frame dan lain-lain. FRAME terdiri dari beberapa atribut, antara lain :
  • NAME=string (nama frame)
  • SRC=URL (isi frame)
  • LONGDESC=URL (uraian dari frame)
  • FRAMEBORDER=[1 | 0] (border frame)
  • MARGINWIDTH=pixels (batas kiri terhadap ini frame)
  • MARGINHEIGHT=pixels (batas atas terhadap ini frame)
  • NORESIZE
  • SCROLLING=[yes | no | auto] (penggulung frame)

Contoh :
<FRAME SRC=”link” NAME=”nama”
SCROLLING=”auto” MARGINWIDTH=1 MARGINHEIGHT=1
NORESIZE>

Keterangan :
Untuk pembuatan FRAME perintah <BODY> tidak digunakan dalam program, karena jika ada perintah <BODY> maka program ini tidak dapat berjalan.

IFRAME SRC
Adalah perintah untuk membuat jendela dengan lebar dan tinggi sesuai dengan keinginan programmer, dan dapat diletakan di bagian kiri, tengah, atau bagian kanan.

Sintaks :
<IFRAME SRC=”link” WITDH=400 HEIGHT=105></IFRAME>

Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>

<p align=”center”>
<iframe src=”link” WIDTH=400 HEIGHT=90>
</iframe> </p>
<p align=”center”>
<img src=”link”></p>

</BODY>
</HTML>

A HREF

<A HREF
Adalah perintah HTML untuk membuat LINK (membuka sebuah halam atau URL dari sebuah halaman). Ada pun atribut yang dapat digunakan dengan HREF adalah sebagai berikut:
  • ONCLICK                  : Membuka link setelah tombol di-klik
  • ONMOUSEOVER     : Membuka link hanya dengan menyorot tombol
    • ONMOUSEOUT        : Membuka link hanya dengan menyorot tombol, dan kembali kehalaman semula apabila mouse dijauhkan dari link.
Sintaks:
<A HREF=”gambar atau halaman atau URL”> Nama Link</A>

CARA PEMBERIAN NAMA FILE
Untuk menjaga kesalahan, berilah nama file dengan ketentuan sebagai berikut:
  • File pertama (file induk) simpan dengan nama index.html (semua huruf kecil)
  • File-file berikutnya juga disimpan dengan huruf kecil.
  • Tentang file gambar, juga disimpan dengan huruf kecil.
  • Jika nama file lebih dari satu kata, pisahkan dengan underscore ( _ ).