A2S : atribut HTML wajib pake kutip

Ketika kamu mendapat Pilihan lebih mudah

pertanyaan:

saya menulis tag seperti berikut

< input type=text name=tes value=ini adalah tes />

tetapi kenapa yang keluar malah
ini
????

Kejadian ini sebenarnya sederhana.. tetapi menjawabnya yang sulit

BORDER

Dalam contoh di atas, kita memakai border untuk menunjukkan wilayah. Border sendiri lebih umum terlihat di table yang sayangnya hendak di hapuskan secara tak langsung dalam html walau penggunaannya sendiri masih ada.

di CSS border terdiri dari 3 elemen yaitu

• warna
• ukuran
• tipe border terdiri dari
• solid
• ridge
• none

Border sendiri tidak di atur secara tunggal untuk posisi atas,bawah,kiri dan kanan dalam 1 perintah. kita bisa mengatur untuk posisi berbeda dengan style berbeda. style tersebut dapat di lihat di

• border-top
• border-bottom
• border-left
• border-right

CSS REPEAT

Gunakan css dan HTML berikut

<style>

.icon {

background-image:url(http://wscont1.apps.microsoft.com/winstore/1x/a14c3995-34d7-454c-82e2-0c192e48b91a/Icon.173718.png);

min-height:160px;

min-width:160px;

border:2px blue double;

margin:2px;

}

.icon2a {

background-repeat: repeat-x;

}

.icon2b {

background-repeat: repeat-y;

}

</style>

<div class='icon'></div>

<div class='icon icon2a'></div>

<div class='icon icon2b'></div>

LATAR BELAKANG CSS

internet..

Dalam membuat sebuah latar, css memiliki style bernama background. Namun background sendiri terdiri dari

• background warna
• background gambar dan pendukungnya

Untuk Background warna sangat mudah yaitu dengan menuliskan salah satu dari contoh dibawah. Kita sudah melakukan pada contoh sebelumnya

• background:blue;
• background-color:blue;

PERULANGAN CSS

Berbicara tentang perulangan. Terkadang kita membuat 2 class (id) atau lebih yang memiliki bentuk yang sama. Dalam hal ini kita membuat 2 class (kotak1 dan kotak2) memiliki style yang sama. Daripada menulis 2 style yang sama, akan lebih baik menulis 1 kali.

.kotak1, .kotak2 {

border:1px solid blue;

}

contoh:

<style>

.kotak1, .kotak2 {

border:1px solid green;

width:100px;

margin:10px 0;

min-height:10px;

}

</style>

<div class=”kotak1”>kotak 1</div>

<div class=’kotak2’>kotak 2</div>

HIRARKI pada CSS

Dalam HTML, kita akan berhadapan dengan css yang memiliki semacam hirarki. Di contoh dibawah, kita membuat murid (kotak) yang memiliki warna berbeda.Untuk mencoba tuliskan ini dalam 1 tempat seperti yang tertulis pada artikel pelajaran css dan html pada artikel sebelumnya

Webdesign : merancang design web sederhana

Tujuan : Membuat tampilan menggunakan CSS inline

Untuk membuat css inline, kita mulai dengan menuliskan < div > < /div > terlebih dahulu. Lalu memasukkan kedalamnya style sehingga mendapatkan seperti berikut

< DIV style="{masukkan style}"> </div>

lakukan hal tersebut untuk tugas dibawah ini. Untuk isinya bisa di masukkan sendiri

Buatlah tampilan sebagai berikut sebagai berikut:

JUDUL

MENU ( home, about me, contact us)

ISI (tulisan sebanyak 2 paragraf)

FOOTER

Template dasar pelajaran HTML

Untuk kedepannya, saya akan share tulisan saya tentang pelajaran html dan css. Di pelajaran itu ada template dasar yang harus di ikuti. Template itu mungkin tidak sesuai dengan bagaimana html seharusnya.

Pada template ini, semuanya digabung jadi satu! kecuali script atau js luar yang tidak langsung bersangkutan seperti jquery.js alasan kenapa memakai template ini murni buat belajar. Bila dalam keadaan sebenarnya!
letakkan javascript dan style pada file di luar HTML.. dan terpenting jangan memakai inline css .. kecuali itu memang tidak ada jalan lain.

silabus belajar webdesign

Webdesign itu bukan pelajaran 1 minggu kelar.. ada beberapa hal yang harus di pelajari dahulu.. Berikut ini adalah basic.
buka bootstrap dahulu .. website bootstrap.. disana km akan dapat basenya.. kl urutannya
1. cara bikin html yg benar, memakai h1, h2,..., P, BR.. terakhir bikin artikel sederhana memakai pelajaran ini

2. cara pake table, hr, div dan parameter didalamnya . terakhir bikin artikel sederhana pake metode2 tsb. dan ada table

3. cara memakai css

4. cara memakai jquery,js, memakai jquery ui

5. memakai bootstrap => sampai km rasa dapet semua

6. memakai javascript bootstrap

7. padukan bootstrap dengan jquery ui

8. buat website dgn bootstrap

dengan membuat website memakai bootstrap, tetapi yang dibuat hanya 1 page yaitu halaman DEPAN.. kamu sudah bisa masuk ke tingkat advance. Lalu apa isi tingkat advance

script membuat laporan

ada beberapa hal yang perlu di bahas dahulu yaitu laporan apa yang akan kamu buat? apa hasil dari laporan (excel atau pdf), bagaimana format bila ketemu angka, tanggal dan lain-lain.
Semua itu sudah dibahas di blog ini, dengan kata kunci "excel".. Kenapa mesti excel? kenapa tidak pdf?

Dear agan2.bagi script php untuk membuat report dong.

dari kata-katanya sudah terlihat malas.. tetapi apakah saya berhak mengatakan demikian? pertama kita harus fahami dasarnya diatas dahulu dan berikutnya kenapa harus excel.

Beberapa perusahaan membutuhkan laporan itu untuk di pakai kembali .Atau lebih mudahnya memakai excel untuk melakukan penginputan, pengambilan sebagian data dan lain-lain! Hal yang menurut kita lebih mudah tetapi boros karena sama saja tidak mencerminkan kegunaan dari program yang kita buat!

klik untuk keluar form

ada beberapa pertanyaan berkaitan dengan klik sesuatu untuk keluar form tertentu. Pertama adalah pemilihan form yang akan digunakan, kedua apa yang terjadi saat keluar? apakah bertambah atau ...

gan kalo mau buat radio button terus kalo di klik radio button tersebut keluar textfield, gimana ya caranya? atau key cari di google apa ya?

Kita memulai dari membuat radio nya dahulu. walau saya lebih suka memakai button. Berikutnya kita buat textarea/textbox. Lalu pastikan keduanya tersembunyi.. Saya memakai style/css "display:none" dan untuk menampilkan kugunakan jquery show. lengkapnya bisa dicoba dibawah
CODE LENGKAPNYA.

namun bila kode di atas kurang memuaskan. cobalah diperbaiki dan dicari apa yang bisa diperbaiki.. Terima kasih.

960.gs kalahkan dominasi table

saya mengenal 960 sejak lama, tetapi sejujurnya belum pernah menyentuh jadi tidak tahu bagaimana rasanya. Namun menurut teman dia cukup senang dengan ini. sayangnya tutorialnya lebih kepada grid dibandingkan tambahan lain! tapi itu wajar saja karena 960 itu lebih kepada grid dibandingkan css lainnya. Komen ini mungkin bukanlah komen final! karena bila anda tak mengenal, maka anda tidak bisa sayang padanya.

Tentu agak tidak etis bila membandingkan ini dengan bootstrap! Namun kita tidak membutuhkan tambahan-tambahan itu bila kita faham atas apa yang dibikin. Nyatanya tanpa ada css tambahan itu, buatan 960 juga bagus!
Bila melihat dari tampilan berikut kita mungkin tidak mengerti penggunaannya

namun sebenarnya ini menjelaskan bagaimana grid itu terbentuk. contoh bagian slider berasal dari 12 grid, bagian bawah 4 dan seterusnya. Sayangnya kita tidak mendapatkan html yang dapat dibaca, apalagi perlu extra keras memahami jika kamu lebih suka cepat!

hasil 960 sendiri cukup enak dimata! namun bila ke masalah coding akan menyusahkan tanpa adanya design yang sudah kamu tentukan! Mana lagi respon atas 960 (dibagian tutorial) agak lambat dan tertulis disana reply terakhir 3 tahun yang lalu!
Tetapi tujuan utama dari 960 adalah untuk mengalahkan dominasi table yang cukup cetar saat itu!! bahkan sekarang juga tetap cetar walau kita tak pernah bisa melihat table kecuali di view source!
walau saya mengakui bahwa memakai table masih tetap lebih mudah daripada div atau dl/dd

Foundation - komen tentang pengganti Bootstrap -

berangkat dari pertanyaan berikut, saya berniat memberikan sedikit komen

Twitter bootstrap itu desainnya terlalu official style, ada yang lainnya gak yang lebih kinclong untuk tampilan produk komersial?

walau bilangnya sedikit, namun itu karena saya udah terlanjur pake bootstrap tetapi ngak menutup kemungkinan projek saya berikutnya pake ini. Sekedar info, anda dapat menekan linknya di judul yang kuberi di atas

Foundation

saat pertama kali masuk kesitusnya, saya melihat iklan mantap didepannya yaitu

The most advanced responsive front-end framework in the world.

tetapi kita tekan download membawa kita ke halaman download! Pada halaman ini kita seolah mengerti cara memakainya. Harusnya dia memberikan penjelasan cara pakai bukan langsung download dan memberikan tampilan basenya
untuk alamat memulainya bisa menekan 'getting started'. Tetapi disini seolah-olah mengajak untuk memakai foundation.. Kita bisa memakai SASS

Sass is a superset of CSS that adds in amazing features such as variables, nested selectors and loops. It's also the easiest way to customize Foundation!

sebenarnya saya tidak tertarik memakainya, tetapi saya bisa ignore ini. Tutorialnya sangat jelas namun sayang penempatan untuk penjelasan mungkin agak menyusahkan. Pertama saya coba download dan saya mendapatkan hanya FOUNDATION tanpa tutorial ?!?

edit data memakai select

Sebelum memulai.. dalam membuat sebuah program input-ouput! kita juga ada yang namanya program edit. Mari asumsikan bahwa kita membuat sebuah program informasi loket. Perlu dicatat, bukan informasi nomor antrian ya. Jadi program ini menunjukkan loket mana yang buka dan loket mana yang tutup.

Untuk tablenya tidak dibuat rumit, hanya terdiri dari 3 field yaitu

• id
• nama
• status

Dimana status hanya terdiri dari BUKA dan TUTUP. Untuk scriptnya kita akan memakai form yang terdiri dari select saja dan tentu saja 1 hidden! Namun sebelum meneruskan mari asumsikan bahwa kita menentukan tipe status (buka dan tutup) dari table lain. Jadi bisa dibilang terdapat 2 table yang saling mendukung yaitu table loket dan table loket_status

bootstrap part 4 pake Fam icons

sesuai janjiku untuk menjelaskan pake FAM icons.. saya harus tekankan beberapa hal yaitu

• tulisan ini hanya menjelaskan yang ada di part 2
• masing-masing metode memiliki kelebihan dan kekurangan
• peletakan js,img, dan lain-lain sesuaikan dengan kebiasan anda

tanpa membuang waktu, kita akan membahas pemakaian tombol dahulu. Disini kita dapat memakai tombol atau tag a. Sejujurnya saya memilih <button>, namun perlu di garis bawahi bahwa kita harus menyesuaikan dengan kebutuhan. Untuk kedepannya manfaatkan <a> saja.

Belajar web dari mana

lukisan yang indah

html dan css bs dibilang emang dasar dari semua web.. namun dengan standarisasi browser (thx god mikocok dah sadar), adanya mobile, dan juga kemudahan framework (non php dulu) yg memperbagus tampilan.. juga pemilihan macam2.. sy hrs mengakui kl step awal belajar adalah mempelajari bootstrap..

HTML : mengapa kita belajar HTML dahulu?

Dasar dari sebuah aplikasi adalah tampilan. Bagaimanapun juga kita sudah pergi dari dunia kelam text! Tapi bukan berarti metode di dunia kelam itu tidak kita gunakan.

Dbase 3+

Tidak banyak yang mengenal Dbase 3+, dengan segala teknologi yang baru. Nama ini seolah menghilang. Padahal dbase adalah salah satu database yang kupelajari waktu kuliah. Namun apa daya, ada oracle, mysql dan lain-lain yang lebih bagus.

kendoui-grid

berawal dari keinginan pake JSON di kendoui.. gw ampe bongkar-bongkar dan akhirnya ketemu. Cuma ternyata metode buat memakainya di grid emang ada sedikit perbedaan walau intinya sama.

ajax sederhana : pilih select dan keluar gambar

Mumpung lagi inget punya coding neh .. jadi gw punya select dengan nama gbr didalamnya.. kalau dipilih maka gbr dibawah akan berubah.. normalnya pake PHP buat baca.. tapi biar cepet.. gw kasi NON PHP (HTML doank)

Pemakaian TEXT AREA

penggunaan [textarea] sebenarnya akan terlihat saat kita ingin memasukkan data yang banyak walaupun tidak membutuhkan enter didalam form. Sebagai contoh adalah alamat. Memang seharusnya kita tidak menggunakan enter dalam alamat, namun terkadang kita membutuhkan. Apalagi input yang dimasukkan sangatlah PANJANG dan kebiasaan kita memberikan enter