diff options
Diffstat (limited to 'id-id')
| -rw-r--r-- | id-id/css-id.html.markdown | 246 | ||||
| -rw-r--r-- | id-id/json-id.html.markdown | 60 | ||||
| -rw-r--r-- | id-id/xml-id.html.markdown | 130 |
3 files changed, 436 insertions, 0 deletions
diff --git a/id-id/css-id.html.markdown b/id-id/css-id.html.markdown new file mode 100644 index 00000000..456dfafe --- /dev/null +++ b/id-id/css-id.html.markdown @@ -0,0 +1,246 @@ +--- +language: css +contributors: + - ["Mohammad Valipour", "https://github.com/mvalipour"] +translators: + - ["Eka Y Saputra", "http://github.com/ekajogja"] +lang: id-id +filename: learncss-id.css +--- + +Pada mulanya, web tidak memiliki elemen visual, murni teks saja. +Tapi seiring perkembangan peramban, laman web dengan elemen visual menjadi umum. +CSS adalah bahasa standar yang ada untuk menjaga keterpisahan antara +konten (HTML) serta tampilan-dan-kesan laman web. + +Singkatnya, fungsi CSS ialah menyajikan sintaks yang memampukan kita +untuk memilih elemen tertentu dalam sebuah laman HTML +dan menerapkan berbagai properti visual bagi elemen tersebut. + +Seperti bahasa lainnya, CSS memiliki banyak versi. +Di artikel ini, kita fokus pada CSS2.0 - yang meskipun bukan versi termutakhir +namun paling kompatibel dan didukung secara luas. + +**CATATAN:** Lantaran keluaran dari CSS berwujud efek-efek visual, +maka untuk mempelajarinya, kita perlu mencoba berbagai hal dalam dunia olah CSS +semisal [dabblet](http://dabblet.com/). +Fokus utama artikel ini ialah pada sintaks dan sejumlah tips umum. + + +```css +/* komentar terletak diantara sepasang tanda garis miring dan bintang, +persis seperti larik ini! */ + +/* #################### + ## SELEKTOR + ####################*/ + +/* Secara garis besar, statemen utama dalam CSS sangat sederhana */ +selektor { properti: nilai; /* properti lainnya */ } + +/* selektor berfungsi untuk memilih suatu elemen dalam sebuah laman. + +Kita juga bisa memilih semua elemen di sebuah halaman! */ +* { color:red; } + +/* +Dengan menentukan sebuah elemen seperti ini pada sebuah laman: + +<div class='suatu-class class2' id='suatuId' attr='nilai' /> +*/ + +/* kita bisa memilih elemen berdasarkan nama class-nya */ +.suatu-class { } + +/*atau dengan dua class sekaligus! */ +.suatu-class.class2 { } + +/* atau dengan nama tag-nya */ +div { } + +/* atau id-nya */ +#suatuId { } + +/* atau - jika ada - dengan attribute-nya! */ +[attr] { font-size:smaller; } + +/* atau jika attribute tersebut memiliki nilai spesifik */ +[attr='nilai'] { font-size:smaller; } + +/* dibuka dengan sebuah nilai*/ +[attr^='nil'] { font-size:smaller; } + +/* atau ditutup dengan nilai */ +[attr$='ai'] { font-size:smaller; } + +/* atau bahkan disisipi nilai */ +[attr~='la'] { font-size:smaller; } + + +/* dan yang lebih penting lagi, kita bisa mengombinasikannya sekaligus +dengan syarat tidak ada spasi diantara selektor-selektor. sebab adanya spasi +akan membuat selektor itu memiliki makna yang berbeda.*/ +div.suatu-class[attr$='ai'] { } + +/* kita juga bisa memilih sebuah elemen berdasarkan posisi elemen induknya.*/ + +/*sebuah elemen yang merupakan anak langsung dari elemen induk (diseleksi dng +cara yang sama) */ +div.suatu-induk > .-suatu-class {} + +/* atau salah satu induk elemennya dalam hirarki elemen */ +/* berikut ini dimaksudkan pada elemen manapun dengan class "class-entah" dan +merupakan anak elemen dari suatu div dengan class "induk-entah" PADA LEVEL +HIRARKI MANAPUN */ +div.suatu-induk .suatu-class {} + +/* peringatan: selektor yang sama jika tanpa ada spasi akan bermakna lain. +misalnya? */ +div.suatu-induk.suatu-class {} + +/* kita juga bisa memilih sebuah elemen berdasarkan saudara elemen yang muncul +tepat sebelumnya */ +.aku-muncul-tepat-sebelum + .elemen-ini { } + +/*atau saudara elemen manapun yang pernah muncul selang beberapa elemen +sebelumnya */ +.aku-pernah-muncul-sebelum ~ .elemen-ini {} + +/* Ada beberapa pseudo-class yang memampukan kita memilih suatu elemen +berdasarkan perilaku lamannya (bukan struktur lamannya) */ + +/* semisal ketika sebuah elemen ditimpa hover (pointer mouse) */ +:hover {} + +/* atau link yang sudah pernah diklik*/ +:visited {} + +/* atau link yang belum pernah diklik*/ +:link {} + +/* atau elemen input yang menjadi fokus */ +:focus {} + + +/* #################### + ## PROPERTI + ####################*/ + +selektor { + + /* Unit */ + width: 50%; /* dalam persen */ + font-size: 2em; /* angka kali jumlah font-size saat ini */ + width: 200px; /* dalam pixel */ + font-size: 20pt; /* dalam point */ + width: 5cm; /* dalam centimeter */ + width: 50mm; /* dalam milimeter */ + width: 5in; /* dalam inci */ + + /* Warna */ + background-color: #F6E; /* dalam short hex */ + background-color: #F262E2; /* dalam format long hex */ + background-color: tomato; /* warna yang sudah punya konvensi nama */ + background-color: rgb(255, 255, 255); /* dalam rgb */ + background-color: rgb(10%, 20%, 50%); /* dalam persen rgb */ + background-color: rgba(255, 0, 0, 0.3); /* dalam rgb semi-transparan*/ + + /* Gambar */ + background-image: url(/folder-gambar/image.jpg); + + /* Font */ + font-family: Arial; + font-family: "Courier New"; /* jika nama font memiliki spasi, + ia diketik dalam tanda petik ganda */ + font-family: "Courier New", Trebuchet, Arial; /* jika font pertama tidak + ditemukan, peramban menggunakan font berikutnya, + demikian secara berturut-turut */ +} + +``` + +## Penggunaan + +Simpan semua CSS yang hendak kita pakai dengan ekstensi `.css`. + +```xml +<!-- kita harus menautkan file css itu ke laman di bagian <head>: --> +<link rel='stylesheet' type='text/css' href='folder/namafile.css' /> + +<!-- kita juga bisa mengetik CSS secara inline di dalam markup. +Namun, sebisa mungkin metode ini dihindari. --> +<style> + selektor { properti:nilai; } +</style> + +<!-- atau langsung mengetik properti CSS pada sebuah elemen. +Metode ini harus dihindari sebisa mungkin. --> +<div style='properti:nilai;'> +</div> + +``` + +## Prioritas + +Kita tahu bahwa sebuah elemen bisa dipilih dengan lebih dari satu selektor, +serta bisa diberi lebih dari satu properti. +Dalam kasus seperti ini, hanya salah satu properti saja yang akan diterapkan +pada elemen dengan prioritas tertentu. + +Dengan susunan CSS: + +```css + +/*A*/ +p.class1[attr='nilai'] + +/*B*/ +p.class1 {} + +/*C*/ +p.class2 {} + +/*D*/ +p {} + +/*E*/ +p { properti: nilai !important; } + +``` + +dan susunan markup: + +```xml +<p style='/*F*/ properti:nilai;' class='class1 class2' attr='nilai'> +</p> +``` + +Maka prioritas penerapan style-nya ialah sbb.: +Ingat, penerapan ini untuk masing-masing **properti**, +bukan keseluruhan larik. + +* `E` prioritas pertama sebab ada kata `!important`. + Dianjurkan untuk menghindari kata ini jika tidak benar-benar perlu. +* `F` prioritas kedua sebab ia diketik secara inline. +* `A` prioritas ketiga sebab selektor ini lebih spesifik dibanding yang lain. + lebih spesifik = lebih banyak unsur selektor. contoh ini punya 3 unsur: + 1 tagname `p` + 1 nama class `class1` + 1 attribute `attr='nilai'` +* `C` prioritas berikutnya sebab meski sama spesifik dengan `B` namun + ia muncul lebih akhir. +* Lalu `B` +* dan terakhir baru `D`. + +## Kompatibilitas + +Sebagian besar fitur dalam CSS2 (dan lambat laun juga CSS3) kompatibel dengan +semua peramban dan perangkat. Namun selalu vital untuk memastikan kompatibilitas +unsur dan nilai yang kita ketikkan dalam CSS dengan peramban yang ditargetkan. + +[QuirksMode CSS](http://www.quirksmode.org/css/) ialah salah satu sumber terbaik untuk memeriksa kompatibilitas CSS dan peramban. + +## Referensi Lanjut + +* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) + diff --git a/id-id/json-id.html.markdown b/id-id/json-id.html.markdown new file mode 100644 index 00000000..52e61449 --- /dev/null +++ b/id-id/json-id.html.markdown @@ -0,0 +1,60 @@ +--- +language: json +filename: learnjson.json +contributors: + - ["Anna Harren", "https://github.com/iirelu"] + - ["Marco Scannadinari", "https://github.com/marcoms"] +translators + - ["Rizky Luthfianto", "https://github.com/rilut"] +--- + +JSON adalah format pertukaran data yang sangat simpel, kemungkinan besar, +ini adalah "Learn X in Y Minutes" yang paling singkat. + +Murninya, JSON tidak mempunyai fitur komentar, tapi kebanyakan parser akan +menerima komentar bergaya bahasa C (`//`, `/* */`). Namun, pada halaman ini, +hanya dicontohkan JSON yang 100% valid. + +```json +{ + "kunci": "nilai", + + "kunci": "harus selalu diapit tanda kutip", + "angka": 0, + "strings": "Halø, dunia. Semua karaktor unicode diperbolehkan, terumasuk \"escaping\".", + "punya tipe data boolean?": true, + "nilai kosong": null, + + "angka besar": 1.2e+100, + + "obyek": { + "komentar": "Most of your structure will come from objects.", + + "array": [0, 1, 2, 3, "Array bisa berisi apapun.", 5], + + "obyek lainnya": { + "komentar": "Obyek-obyek JSON dapat dibuat bersarang, sangat berguna." + } + }, + + "iseng-iseng": [ + { + "sumber potassium": ["pisang"] + }, + [ + [1, 0, 0, 0], + [0, 1, 0, 0], + [0, 0, 1, "neo"], + [0, 0, 0, 1] + ] + ], + + "gaya alternatif": { + "komentar": "lihat ini!" + , "posisi tanda koma": "tak masalah. selama sebelum nilai berikutnya, valid-valid saja" + , "komentar lainnya": "betapa asyiknya" + }, + + "singkat": "Dan Anda selesai! Sekarang Anda tahu apa saja yang disediakan oleh JSON." +} +``` diff --git a/id-id/xml-id.html.markdown b/id-id/xml-id.html.markdown new file mode 100644 index 00000000..c1e985aa --- /dev/null +++ b/id-id/xml-id.html.markdown @@ -0,0 +1,130 @@ +--- +language: xml +filename: learnxml.xml +contributors: + - ["João Farias", "https://github.com/JoaoGFarias"] +translators: + - ["Rizky Luthfianto", "https://github.com/rilut"] +lang: id-id +--- + +XML adalah bahasa markup yang dirancang untuk menyimpan dan mengirim data. + +Tidak seperti HTML, XML tidak menentukan bagaimana menampilkan atau format data, hanya membawanya. + +* Sintaks XML + +```xml +<!-- Komentar di XML seperti ini --> + +<?xml version="1.0" encoding="UTF-8"?> +<tokobuku> + <buku category="MEMASAK"> + <judul lang="en">Everyday Italian</judul> + <pengarang>Giada De Laurentiis</pengarang> + <tahun>2005</tahun> + <harga>30.00</harga> + </buku> + <buku category="ANAK"> + <judul lang="en">Harry Potter</judul> + <pengarang>J K. Rowling</pengarang> + <tahun>2005</tahun> + <harga>29.99</harga> + </buku> + <buku category="WEB"> + <judul lang="en">Learning XML</judul> + <pengarang>Erik T. Ray</pengarang> + <tahun>2003</tahun> + <harga>39.95</harga> + </buku> +</tokobuku> + +<!-- Di atas adalah contoh file XML biasa. + Dimulai dengan deklarasi, menginformasikan beberapa metadata (opsional). + + XML menggunakan struktur pohon. Di atas, simpul akar adalah 'tokobuku', + yang memiliki tiga node anak, para 'buku'. Node-node tersebut dapat memiliki + node-node anak, dan seterusnya ... + + Node dibuat menggunakan tag buka/tutup, dan node-node anak hanya + berada di antara tag buka dan tutup .--> + + +<!-- XML membawa dua jenis data: + 1 - Atribut -> Itu metadata tentang sebuah node. + Biasanya, parser XML menggunakan informasi ini untuk menyimpan data dengan + benar. Hal ini ditandai dengan muncul dengan format nama = "nilai" dalam pembukaan tag. + 2 - Elemen -> Itu data yang murni. + Itulah yang parser akan mengambil dari file XML. + Elemen muncul antara tag membuka dan menutup.--> + + +<!-- Di bawah ini, unsur dengan dua atribut--> +<file type="gif" id="4293">komputer.gif</file> + + +``` + +* Dokumen yang well-formated & Validasi + +Sebuah dokumen XML disebut well-formated jika sintaksisnya benar. +Namun, juga mungkin untuk mendefinisikan lebih banyak batasan dalam dokumen, +menggunakan definisi dokumen, seperti DTD dan XML Schema. + +Sebuah dokumen XML yang mengikuti definisi dokumen disebut valid, +jika sesuai dokumen itu. + +Dengan alat ini, Anda dapat memeriksa data XML di luar logika aplikasi. + +```xml + +<!-- Di bawah, Anda dapat melihat versi sederhana dari dokumen tokobuku, + dengan penambahan definisi DTD .--> + +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE catatan SYSTEM "tokobuku.dtd"> +<tokobuku> + <buku category="MEMASAK"> + <judul >Everyday Italian</judul> + <harga>30.00</harga> + </buku> +</tokobuku> + +<!-- This DTD could be something like:--> + +<!DOCTYPE catatan +[ +<!ELEMENT tokobuku (buku+)> +<!ELEMENT buku (judul,harga)> +<!ATTLIST buku category CDATA "Sastra"> +<!ELEMENT judul (#PCDATA)> +<!ELEMENT harga (#PCDATA)> +]> + + +<!-- DTD dimulai dengan deklarasi. + Berikut, node akar dinyatakan, membutuhkan 1 atau lebih anak node 'buku'. + Setiap 'buku' harus berisi tepat satu 'judul' dan 'harga' dan atribut + disebut 'kategori', dengan "Sastra" sebagai nilai default. + Node yang 'judul' dan 'harga' mengandung karakter data diurai .--> + +<!-- DTD dapat dideklarasikan di dalam file XML itu sendiri .--> + +<?xml version="1.0" encoding="UTF-8"?> + +<!DOCTYPE catatan +[ +<!ELEMENT tokobuku (buku+)> +<!ELEMENT buku (judul,harga)> +<!ATTLIST buku category CDATA "Sastra"> +<!ELEMENT judul (#PCDATA)> +<!ELEMENT harga (#PCDATA)> +]> + +<tokobuku> + <buku category="MEMASAK"> + <judul >Everyday Italian</judul> + <harga>30.00</harga> + </buku> +</tokobuku> +``` |