Archive for February 2016

Belajar HTML Form Part 3 - Elemen Baru pada Form HTML5

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxYRbmKC0UlN26qG8siwvWK7gDZmJQnak1492vdXXUr5p2k_db-tPUDntYTmjYKgcWXWaPncQB1C6Rix06qZJbJbf5FWXbItc62VLBv1wSo3rDSkAZSMKovbCIMTradbXdTeUFbwqCFw4/s1600/html_tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML Form Part 3 - Elemen Baru pada Form HTML5" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxYRbmKC0UlN26qG8siwvWK7gDZmJQnak1492vdXXUr5p2k_db-tPUDntYTmjYKgcWXWaPncQB1C6Rix06qZJbJbf5FWXbItc62VLBv1wSo3rDSkAZSMKovbCIMTradbXdTeUFbwqCFw4/s320/html_tutorial.jpg" title="Belajar HTML Form Part 3 - Elemen Baru pada Form HTML5" width="320" /></a></div>
 
Assalamu'alaikum warohmatullaahi wabarokaatuh. 
 
 
<div style="text-align: justify;">
Kali ini kita masih akan melanjutkan <a href="http://batweber.blogspot.co.id/2016/02/belajar-html-form-part-2-elemen-elemen-pada-form-html.html" target="_blank">Tutorial sebelumnya</a> tentang Elemen - elemen pada form HTML. Namun kali ini, kita akan mempelajari beberapa elemen baru pada form HTML5. </div>
<div style="text-align: justify;">
Ada beberapa elemen yang tidak ada sebelumnya, namun ditambahkan pada versi HTML5. Yaitu :</div>
<div style="text-align: justify;">
</div>
<ul>
<li><datalist></li>
<li><keygen></li>
<li><output></li>
</ul>
<div>
A. <DATALIST></div>
<div>
 </div>
<div>
Elemen <datalist> berfungsi untuk memberikan opsi pada elemen <input></div>
<div>
Lebih jelasnya silahkan coba script berikut :</div>
<div>
<pre><code>
<form action="action_page.php">
 <input list="browser">
 <datalist id="browser">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
 </datalist> 
</form>
</code></pre>
</div>
<div>
 
Penjelasan : 
<ul>
<li style="text-align: justify;">Pertama, kita membuat dua elemen di dalam elemen <form>, yaitu elemen <input> dam elemen <datalist>.</li>
<li style="text-align: justify;">Kemudian kita menambahkan atribut list pada elemen <input> yang telah kita buat.</li>
<li style="text-align: justify;">Setelah itu kita membuat elemen <datalist> dengan atribut id. Catatan penting adalah value dari atribut list pada elemen input harus sama dengan value dari atribut id pada elemen datalist. Misalnya, kita lihat pada contoh di atas, atribut list pada elemen <input> dan id pada <datalist> sama-sama saya beri nama browser. Jika tidak demikian, maka elemen <datalist> ini tidak akan muncul.</li>
<li style="text-align: justify;">Terakhir, di antara tag pembuka <datalist> dan tag penutup </datalist> kita masukkan opsi-opsi yang ingin kita masukkan. Seperti pada contoh di atas, datalist akan memunculkan opsi Internet Explorer, Firefox, Chrome, Opera, dan Safari</li>
</ul>
<div>
Berikut tampilan yang dihasilkan :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPR5j0n1a8wTsBRRMKQYh8fXdNUr6ARYI6lGd_MlUkFgvT8YVhJbayna7wnFbxgJOsur6JFEJNy9hL-emLcvVOkGyOZg2Htw8uDyeuXUei4hXvU5c5-JLblf4gtvGqyYkM7-hE5K0yAIk/s1600/tutorial_html_form_part_3_elemen_baru_pada_form_html5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML Form Part 3 - Elemen Baru pada Form HTML5" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPR5j0n1a8wTsBRRMKQYh8fXdNUr6ARYI6lGd_MlUkFgvT8YVhJbayna7wnFbxgJOsur6JFEJNy9hL-emLcvVOkGyOZg2Htw8uDyeuXUei4hXvU5c5-JLblf4gtvGqyYkM7-hE5K0yAIk/s1600/tutorial_html_form_part_3_elemen_baru_pada_form_html5.jpg" title="Belajar HTML Form Part 3 - Elemen Baru pada Form HTML5" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div>
Catatan :</div>
<div>
<ul>
<li>Elemen datalist tidak akan muncul pada Internet Explorer dan sebelumnya.</li>
</ul>
</div>
<div>
 </div>
</div>
<div>
B. <KEYGEN> 
 
 
<div style="text-align: justify;">
Elemen <keygen> digunakan untuk melakukan otentikasi user. Elemen <keygen> akan memiliki value  berupa key-pair generator . Ketika form di-submit, akan ada dua kunci yang digenerasi. Yaitu ptivate key dan public key. Private key akan disimpan lokal, sedangkan public key akan disimpan di server. Public key ini akan berguna untuk otentikasi user jika dibutuhkan.</div>
<div style="text-align: justify;">
Contoh penggunaannya adalah sebagai berikut :</div>
<pre><code>
<form action="action_page.php">
 Username: <input type="text" name="user">
 Encryption: <keygen name="security">
 <input type="submit">
</form>
</code></pre>
 
Berikut tampilan yang dihasilkan : 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVgj73k0RLEMl_fhKqANfRiq72P2g1CxUr9nsVAVD28hY1wFg5WKaaH_sPXswMKlvEBnbW2wd_0FRSk1p3jJNgFF3woCFXL7ld086lQSZr9Ii9uOU0P8a1cAQHRdQy5b2YdlKhnITI7YI/s1600/tutorial_html_form_part_3_elemen_baru_pada_form_html5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML Form Part 3 - Elemen Baru pada Form HTML5" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVgj73k0RLEMl_fhKqANfRiq72P2g1CxUr9nsVAVD28hY1wFg5WKaaH_sPXswMKlvEBnbW2wd_0FRSk1p3jJNgFF3woCFXL7ld086lQSZr9Ii9uOU0P8a1cAQHRdQy5b2YdlKhnITI7YI/s1600/tutorial_html_form_part_3_elemen_baru_pada_form_html5.jpg" title="Belajar HTML Form Part 3 - Elemen Baru pada Form HTML5" /></a></div>
 </div>
<div>
C. <OUTPUT> 
 
Elemen <output> digunakan untuk menampilkan secara otomatis hasil kalkulasi matematika yang dijalankan oleh sebuah script. Contoh : 
<pre><code>
<form action="action_page.asp" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
 0
 <input type="range" id="a" name="a" value="50">
 100 +
 <input type="number" id="b" name="b" value="50">
 =
 <output name="x" for="a b"></output>
 
 <input type="submit">
</form>
</code></pre>
 
Penjelasan : 
 
<ul>
<li>Pada script di atas, kita membuat sebuah form yang dilengkapi dengan javascript oninput="x.value=parseInt(a.value)+parseInt(b.value)</li>
<li>Untuk saat ini, kita tidak perlu pusing dengan javascript di atas, kita akan mempelajarinya nanti. Yang perlu diketahui, Javascript tersebut berfungsi untuk melakukan pertambahan antara a dan b dan menghasilkan x</li>
<li>a adalah nama dari input pertama, dilihat dari atribut name="a"</li>
<li>b adalah nama dari input kedua, dilihat dari atribut name="b"</li>
<li>hasil dari penjumlahan a dan b akan menjadi x. X akan ditampilkan pada elemen output di mana kita lihat terdapat atribut name=x.</li>
</ul>
<div>
Berikut tampilan dari hasil script di atas : 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3wYrG6Wwt7oLjRVVrQVPkwA606OGCqS0Jb4tSe0puNwPN2aYCq962XFNe7HwC3Pw4YR74P5FHTK8Rgw4bJbSyk1UjtJWMLAmDjKPXsQUpSVoI-UqioJrBJ_VCa9ou0jW1bQYDuRCIi9c/s1600/tutorial_html_form_part_3_elemen_baru_pada_form_html5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML Form Part 3 - Elemen Baru pada Form HTML5" border="0" height="43" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3wYrG6Wwt7oLjRVVrQVPkwA606OGCqS0Jb4tSe0puNwPN2aYCq962XFNe7HwC3Pw4YR74P5FHTK8Rgw4bJbSyk1UjtJWMLAmDjKPXsQUpSVoI-UqioJrBJ_VCa9ou0jW1bQYDuRCIi9c/s400/tutorial_html_form_part_3_elemen_baru_pada_form_html5.jpg" title="Belajar HTML Form Part 3 - Elemen Baru pada Form HTML5" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: justify;">
Demikian seri belajar HTML Part 3 tentang Elemen baru pada form HTML5, semoga bermanfaat.</div>
<div class="separator" style="clear: both; text-align: justify;">
Terima kasih, wassalamu'alaikum warohmatullaahi wabarokaatuh.</div>
</div>
</div>

Belajar HTML Form Part 3 - Elemen Baru pada Form HTML5

Assalamu'alaikum warohmatullaahi wabarokaatuh. Kali ini kita masih akan melanjutkan Tutorial sebelumnya tentang Elemen - elemen ...

Belajar HTML Form Part 2 - Elemen-Elemen pada Form HTML

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEittY2f5poLeayIuofliQCmY7kfIzAx7egxFX2vkjZz_xxnsOqlB_2_WLaXE636VwabZgXoBSfxurWPdltaymGqa2QO2dBTomQH2UJE3NrMzTkw-kIJqJpAHsAbXhRr8y_BCW3e5aBed2s/s1600/html_tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Form Part 2 - Elemen-Elemen pada Form HTML" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEittY2f5poLeayIuofliQCmY7kfIzAx7egxFX2vkjZz_xxnsOqlB_2_WLaXE636VwabZgXoBSfxurWPdltaymGqa2QO2dBTomQH2UJE3NrMzTkw-kIJqJpAHsAbXhRr8y_BCW3e5aBed2s/s320/html_tutorial.jpg" title="Tutorial HTML Form Part 2 - Elemen-Elemen pada Form HTML" width="320" /></a></div>
 
<div class="separator" style="clear: both; text-align: center;">
</div>
Assalamu'alaikum warohmatullaahi wabarokaatuh 
 
 
<div style="text-align: justify;">
Pada kesempatan kali ini kita akan melanjutkan seri belajar Form HTML kita. Bagi yang belum membaca Tutorial sebelumnya silahkan klik <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-form-part-1-mengenal-form-dalam-html.html" target="_blank">di sini</a>.</div>
 
Elemen-elemen yang terdapat pada form HTML adalah sebagai berikut : 
<ul>
<li><input></li>
<li><select></li>
<li><textarea></li>
<li><button></li>
<li><datalist></li>
<li><keygen></li>
<li><output></li>
</ul>
<div>
A. ELEMEN <INPUT></div>
<div>
 </div>
<div>
Elemen <input> merupakan elemen yang paling penting dalam form HTML. Elemen <input> bisa dalam berbagai bentuk. Untuk elemen <input> ini kita akan bahas lebih lanjut pada <a href="http://batweber.blogspot.com/2016/02/belajar-html-form-part-3-elemen-baru-pada-form-html5.html" target="_blank">Belajar HTML Form Part 3</a>.</div>
<div>
 </div>
<div>
B. ELEMEN <SELECT></div>
<div>
 </div>
<div style="text-align: justify;">
Elemen <select> biasa kita kenal juga dengan drop down list. Yaitu ketika sebuah inputan yang digunakan ketika kita memiliki beberapa opsi isian yang sudah ditentukan. Contoh penggunaannya adalah sebagai berikut :</div>
<pre><code>
<select name="mobil">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="fiat">Fiat</option>
 <option value="audi">Audi</option>
</select>
</code></pre>
<pre><code>
</code></pre>
Penjelasan :
 
<ul>
<li style="text-align: justify;">Sebuah drop down list dalam HTML diapit dengan tab pembuka <select> dan tab penutup </select></li>
<li style="text-align: justify;">Pilihan-pilihan yang ingin kita masukkan pada drop down list kita masukkan di antara tag pembuka dan tag penutup <select> dengan setiap opsi diawali dengan tag <option> dan diakhiri dengan tag </option></li>
<li style="text-align: justify;">name="mobil" merupakan nama dari drop down list</li>
<li style="text-align: justify;">value="volvo" menunjukkan nilai dari opsi yang pertama yaitu volvo. Begitu juga opsi kedua dan seterusnya</li>
<li style="text-align: justify;">Volvo yang berwarna merah di atas merupakan teks yang akan ditampilkan pada opsi pertama. Untuk teks ini hanya berupa teks yang ditampilkan pada opsi. Jadi bisa saja value atau nilai dari pilihan kita volvo, tapi kita memilih teks fiat yang akan ditampilkan. Begitu juga opsi kedua dan seterusnya.</li>
</ul>
<div style="text-align: justify;">
Berikut tampilan yang dihasilkan dari script di atas : 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWE5ZhyEALu79zN6nDy9tM7mk8xvfjOs4pkROlojchVvkcj0Ed_59MRw03D2T-5b-qIWntaTEuQj9xfDVtPupqpKUEZa7t5of_0DO5jX164SAaWT7YJyWyaFe4IuMZsgDF880cPEoY3lU/s1600/tutorial_html_form_part_2_elemen-elemen_pada_form_html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Form Part 2 - Elemen-Elemen pada Form HTML" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWE5ZhyEALu79zN6nDy9tM7mk8xvfjOs4pkROlojchVvkcj0Ed_59MRw03D2T-5b-qIWntaTEuQj9xfDVtPupqpKUEZa7t5of_0DO5jX164SAaWT7YJyWyaFe4IuMZsgDF880cPEoY3lU/s1600/tutorial_html_form_part_2_elemen-elemen_pada_form_html.jpg" title="Tutorial HTML Form Part 2 - Elemen-Elemen pada Form HTML" /></a></div>
</div>
<div>
C. ELEMEN <TEXTAREA> 
 
Elemen <textarea> digunakan untuk membuat form input teks lebih dari satu baris. Contoh penggunaan : 
<pre><code>
<textarea name="pesan" rows="10" cols="30">
u know why? bikoz im batmaan...!!
</textarea>
</code></pre>
 
Penjelasan :
 
<ul>
<li style="text-align: justify;">Sebuah text area dalam HTML diapit dengan tab pembuka <textarea> dan tab penutup </textarea></li>
<li style="text-align: justify;">name="pesan" berarti nama dari text area yang kita buat.</li>
<li style="text-align: justify;">rows="10" berarti jumlah baris yang ditampilkan dalam text area tersebut atau bisa menjadi ukuran tinggi text area.</li>
<li style="text-align: justify;">cols="30"  berarti lebar text area</li>
<li style="text-align: justify;">Tulisan "u know why? bikoz im batmaan...!!" adalah teks yang akan kita masukkan pada text area</li>
</ul>
<div style="text-align: justify;">
Berikut tampilan yang dihasilkan dari script di atas : 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq3RhmbukhiJeLIDMNjw3IcPif5T4ndtAm8HZJl1lU2eDbO2KmGeenbl7iBA8W9_quPdzY12TNIYZKtazV4ZCvhPdcUJwAmJYUig2_GG1V9PcPUgD_zpg2FDYlmOcICsa2DTpScZowEgY/s1600/tutorial_html_form_part_2_elemen-elemen_pada_form_html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Form Part 2 - Elemen-Elemen pada Form HTML" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq3RhmbukhiJeLIDMNjw3IcPif5T4ndtAm8HZJl1lU2eDbO2KmGeenbl7iBA8W9_quPdzY12TNIYZKtazV4ZCvhPdcUJwAmJYUig2_GG1V9PcPUgD_zpg2FDYlmOcICsa2DTpScZowEgY/s1600/tutorial_html_form_part_2_elemen-elemen_pada_form_html.jpg" title="Tutorial HTML Form Part 2 - Elemen-Elemen pada Form HTML" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
D. ELEMEN <BUTTON> 
 
 
<div style="text-align: justify;">
Elemen <button> merupakan elemen yang digunakan untuk membuat tombol. Contoh penggunaannya :</div>
<div style="text-align: justify;">
<pre><code>
<button type="button">Klik saya!</button>
</code></pre>
</div>
 
 
Penjelasan :
 
<ul>
<li style="text-align: justify;">Sebuah button dalam HTML diapit dengan tab pembuka <button> dan tab penutup </button></li>
<li style="text-align: justify;">type="button" berarti nama dari button yang kita buat.</li>
<li style="text-align: justify;">Tulisan Klik Saya! merupakan tulisan yang akan dimunculkan pada button.</li>
</ul>
<div style="text-align: justify;">
Berikut tampilan yang dihasilkan dari script di atas : 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjISLQhCcJKU6_66U-GuiImoWBcy1MO0ayiWGtESlFBX1X3XsMKahw6cAzp36IEUUoFdNqI3K_gExPooSoYeYwNoIn5aqWJ948AQIkR760Rj8qY8C0YVJM5JjIuvhsYwyDHynbLPCU44Z4/s1600/tutorial_html_form_part_2_elemen-elemen_pada_form_html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Form Part 2 - Elemen-Elemen pada Form HTML" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjISLQhCcJKU6_66U-GuiImoWBcy1MO0ayiWGtESlFBX1X3XsMKahw6cAzp36IEUUoFdNqI3K_gExPooSoYeYwNoIn5aqWJ948AQIkR760Rj8qY8C0YVJM5JjIuvhsYwyDHynbLPCU44Z4/s1600/tutorial_html_form_part_2_elemen-elemen_pada_form_html.jpg" title="Tutorial HTML Form Part 2 - Elemen-Elemen pada Form HTML" /></a></div>

</div>
</div>
Demikian seri belajar HTML Form tentang elemen-elemen yang terdapat pada form HTML, semoga bermanfaat. 
Terima kasih, wassalamu'alaikum warohmatullaahi wabarokaatuh.

Belajar HTML Form Part 2 - Elemen-Elemen pada Form HTML

Assalamu'alaikum warohmatullaahi wabarokaatuh Pada kesempatan kali ini kita akan melanjutkan seri belajar Form HTML kita . Bagi...

Belajar CSS Part 10 - Tautan (Link)

Link seringkali ditampilkan dengan pengaturan CSS sedemikian rupa sehingga ditampilkan seperti sebuah button.
Berikut contohnya :
 
 
a:link, a:visited { 
    background-color: #f44336; 
    color: white; 
    padding: 14px 25px; 
    text-align: center;  
    text-decoration: none; 
    display: inline-block; 
} 
 
a:hover, a:active { 
    background-color: red; 
} 
 
Dengan menggunakan script CSS di atas, link akan ditampilkan dengan tampilan seperti sebuah button. 
 
<a href="http://batweber.greengaluh.com/css_link.html" class="coba" target="_blank">Coba sendiri di sini</a> 
<div>
 
 
Demikian Belajar CSS tentang link, semoga bermanfaat.</div>
<div>
Terima kasih dan wassalamu'alaikum warohmatullaahi wabarokaatuh.</div>

Belajar CSS Part 10 - Tautan (Link)

Assalamu'alaikum warohmatullaahi wabarokaatuh. Belajar CSS kali ini akan menjelaskan tentang bagaimana kita bisa mengatur style ...

Belajar CSS Part 9 - Font

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI-OMpOUPrqrQEUr8Ga8mvoPzH2pBW2-Faz1bAZtNtOu7Rssw1fXyo0s0gjih5W7um0BmaUMjdzoBpWpMErWUwV5Yo0L54FeFhj-YoaGntAljWSuHG6y0ksKPShT0xAleyAP3gzaQwPQ/s1600/tutorial_css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial CSS Part 9 - Font" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI-OMpOUPrqrQEUr8Ga8mvoPzH2pBW2-Faz1bAZtNtOu7Rssw1fXyo0s0gjih5W7um0BmaUMjdzoBpWpMErWUwV5Yo0L54FeFhj-YoaGntAljWSuHG6y0ksKPShT0xAleyAP3gzaQwPQ/s1600/tutorial_css.jpg" title="Tutorial CSS Part 9 - Font" /></a></div>
 
Assalamu'alaikum warohmatullaahi wabarokaatuh. 
 
<div style="text-align: justify;">
Dalam Belajar CSS kali ini kita akan mempelajari tentang penggunaan Font dalam CSS.</div>
 
A. FONT FAMILY 
 
 
<div style="text-align: justify;">
font-family digunakan untuk menentukan font family (jenis font) yang akan digunakan. Ada dua tipe dari font family :</div>
<ol>
<li style="text-align: justify;">generic family : font yang memiliki tampilan hampir sama. Contoh : Serif, Sans-Serif, Monospace</li>
<li style="text-align: justify;">font family : font yang memiliki tampilan yang lebih specific. Contoh : Times New Roman, Arial</li>
</ol>
<div style="text-align: justify;">
Ketika menggunakan font-family dalam CSS, disarankan untuk menentukan memilih lebih dari satu font sehingga ketika browser tidak support pada font yang pertama, maka kita memiliki opsi font yang kedua dan selanjutnya. Jika nama dari font-family  yang kita pilih memiliki lebih dari satu kata, maka kita tulis di dalam tanda kutip ("). Dan untuk memisahkan antar font-family digunakan tanda koma (,) Disarankan untuk memilih font yang Anda inginkan sebagai opsi pertama, dan generic font sebagai opsi terakhir. Contoh penggunaannya :</div>
<pre><code>
p {
 font-family: "Times New Roman", Times, serif;
}
</code></pre>
<div style="text-align: justify;">
 
Penjelasan : 
<ul>
<li>Paragraf yang kita buat akan ditampilkan dengan font Times New Roman. Namun jika browser tidak support untuk Times New Roman, browser akan menggantinya dengan Times. Dan jika asih tidak support maka akan diganti dengan serif.</li>
</ul>
<div>
<a class="coba" href="http://batweber.greengaluh.com/css_font_family.html" target="_blank">Coba sendiri di sini</a></div>
<div>
 </div>
<div>
 </div>
<div>
B. FONT STYLE</div>
<div>
 </div>
<div>
font-style biasa digunakan untuk menspesifikasikan sebuah tulisan untuk ditulis miring atau tidak.  Ada tiga value yang bisa digunakan untuk properti font-style :</div>
<div>
<ul>
<li>normal : teks biasa</li>
<li>italic : teks miring</li>
<li>oblique : hampir sama dengan italic, namun tidak begitu disarankan.</li>
</ul>
<div>
Contoh penggunaan :</div>
</div>
<div>
 </div>
 
<pre style="text-align: start;"><code>p.normal {
 font-style: normal;
}</code></pre>
<pre style="text-align: start;"><code><pre><code>p.italic {
 font-style: italic;
}</code></pre>
p.oblique {
 font-style: oblique;
}</code></pre>
 
Penjelasan :
 
<ul>
<li>Dengan script CSS di atas, paragraf  dengan class normal akan ditampilkan seperti teks biasa</li>
<li>Paragraf dengan class italic akan ditulis miring</li>
<li>Paragraf dengan class oblique juga akan ditulis miring, namun agak tebal dari italic.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_font_style.html" target="_blank">Coba sendiri di sini</a>

<div>
 
 
C. FONT SIZE</div>
<div>

</div>
<div>
 
font-size memiliki fungsi untuk mengatur ukuran font. Ukuran font bisa ditulis dalam satuan piksel atau em. Ukuran em disarankan oleh W3C. Satu em sama dengan 16 piksel. Namun dengan menggunakan satuan em, terdapat kekurangan jika dijalankan pada IE. Maka dari itu, maka solusi diambil dengan menentukan persentase ukuran font pada elemen body.</div>
<div>
Contoh : </div>
<div>
</div>
<div>
<pre style="text-align: start;"><code>
</code></pre>
<pre style="text-align: start;"><code>body {
 font-size: 100%;
}</code></pre>
<pre style="text-align: start;"><code><pre><code>p.piksel {
 font-size: 12px;
}</code></pre>
p.em {
 font-size: 0.75em;
}</code></pre>
 
Penjelasan :
 
<ul>
<li>Dengan script di atas, paragraf dengan class piksel dan class em sebenarnya memiliki ukuran yang sama, karena 16 piksel = 1 em, berarti 12 piksel = 0.75 em.</li>
</ul>
<div>
<a class="coba" href="http://batweber.greengaluh.com/css_font_size.html" target="_blank">Coba sendiri di sini</a></div>
</div>
<div>
 
 
D. FONT WEIGHT</div>
<div>

</div>
<div>
 
font-weight merupakan properti yang berfungsi untuk mengatur sebuah teks apakah akan ditulis tebal atau normal. Contoh :</div>
<div>
</div>
<div>
<pre style="text-align: start;"><code>p.normal {
 font-weight: normal;
}
p.bold {
 font-weight: bold;
}
</code></pre>
</div>
 
Penjelasan :
 
<ul>
<li>Dengan script CSS di atas, paragraf yang kita beri class normal akan ditampilkan dalam teks biasa (tidak tebal).</li>
<li>Sedangkan paragraf yang kita beri class bold akan ditampilkan dalam bentuk cetak tebal alias bold.</li>
</ul>
<div>
<a class="coba" href="http://batweber.greengaluh.com/css_font_weight.html" target="_blank">Coba sendiri di sini</a></div>
</div>
<div>
</div>
<div>
</div>
<div>
 
 
E. FONT VARIANT</div>
<div>
</div>
<div>
<div>
 
font-variant biasa digunakan untuk menentukan apakah sebuah teks akan ditulis dalam bentuk small-caps atau tidak. Dalam bentuk small-caps, seluruh teks akan ditulis dalam huruf kapital. Namun ukuran teks yang awalnya lowercase atau huruf kecil akan lebih kecil dibandingkan yang sudah kapital sejak awal,  Contoh :</div>
<div>
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG_4iX66ATTePNhBP1ce7YfZQe7bQK-Mp_eRdPbbg1jWZch5GzNo2T53OjR8mSKRBMxBmYPaLd9ZI9b_1-57b6r7i94xdT1POub8RA2IHSCR-Grlxv2RgF_eQLGGFu1br8bGjIKJa-Vuo/s1600/tutorial_css_font.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tutorial CSS Part 9 - Font" border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG_4iX66ATTePNhBP1ce7YfZQe7bQK-Mp_eRdPbbg1jWZch5GzNo2T53OjR8mSKRBMxBmYPaLd9ZI9b_1-57b6r7i94xdT1POub8RA2IHSCR-Grlxv2RgF_eQLGGFu1br8bGjIKJa-Vuo/s320/tutorial_css_font.jpg" title="Tutorial CSS Part 9 - Font" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Atas : font normal 
Bawah : small caps</td></tr>
</tbody></table>
<div>
</div>
<div>
p.normal {</div>
<div>
<pre style="text-align: start;"><code> font-variant: normal;
}</code></pre>
<pre style="text-align: start;"><code><pre><code>p.small {
 font-variant: small-caps;
}</code></pre>
</code></pre>
</div>
Penjelasan :
 
<ul>
<li>Dengan script CSS di atas, paragraf yang kita beri class normal akan ditampilkan dalam teks biasa.</li>
<li>Sedangkan paragraf yang kita beri class bold akan ditampilkan dalam bentuk small-caps.</li>
</ul>
<div>
<a class="coba" href="http://batweber.greengaluh.com/css_font_variant.html" target="_blank">Coba sendiri di sini</a></div>
 
 
Demikian Belajar CSS tentang Font, semoga bermanfaat.
Terima kasih dan wassalamu'alaikum warohmatullaahi wabarokaatuh.
</div>

Belajar CSS Part 9 - Font

Assalamu'alaikum warohmatullaahi wabarokaatuh. Dalam Belajar CSS kali ini kita akan mempelajari tentang penggunaan Font dalam C...

Belajar CSS Part 8 - Text Formatting

h1 {
 color: green;
}
</code></pre>
Penjelasan :
 
<ul>
<li>Dengan script CSS di atas, seluruh teks yang berada pada bagian body akan berwarna biru kecuali teks yang diberi tag h1.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_text_color.html" target="_blank">Coba sendiri di sini</a>
 
<div>
<div>
 
 
B. TEXT ALIGNMENT</div>
<div>
 
text-alignment adalah properti yang digunakan untuk mengatur sebuah teks atau paragraf apakah akan rata kiri, rata tengah, atau rata kanan. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
h1 {
 text-align: left;
}

h2 {
 text-align: center;
}
</code></pre>
<pre><code>
</code></pre>
<pre><code><pre style="color: black;"><code>h3 {
 text-align: right;
}</code></pre>
</code></pre>
<pre><code>
</code></pre>
Penjelasan :
 
<ul>
<li>Dengan script CSS di atas, elemen dengan tag h1 akan tersusun rata kiri, elemen h2 akan tersusun rata tengah, dan elemen h3 akan tersusun rata kanan.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_text_alignment.html" target="_blank">Coba sendiri di sini</a>
</div>
<div>
 
 
C. TEXT DECORATION 
 
text-decoration biasa digunakan untuk menghapus decoration berupa garis bawah dari sebuah teks. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
h1 {
 text-decoration: none;
}</code></pre>
<pre><code><pre style="color: black;"><code>h2 {
 text-decoration: overline;
}</code></pre>
</code></pre>
<pre><code><pre style="color: black;"><code>h3 {
 text-decoration: line-through;
}</code></pre>
<pre style="color: black;"><code><pre><code>h4 {
 text-decoration: underline;
}</code></pre>
</code></pre>
</code></pre>
Penjelasan :
 
<ul>
<li>Dengan script CSS di atas, elemen dengan tag h1 tidak akan diberi decoration apapun.</li>
<li>Elemen dengan tag h2 akan diberi garis atas.</li>
<li>Elemen dengan tag h3 akan diberi garis yang mencoret teks.</li>
<li>Elemen dengan tag h4 akan diberi garis bawah.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_text_decoration.html" target="_blank">Coba sendiri di sini</a>
</div>
<div>
 
 
D. TEXT TRANSFORMATION 
 
text-transform adalah properti yang digunakan untuk mengatur kapitalisasi dari sebuah teks. Misal mengatur sebuah teks apakah akan dijadikan huruf kapital semua, apakah hanya awalnya saja, atau dijadikan huruf kecil semua. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
p.uppercase {
 text-transform: uppercase;
}
p.lowercase {
 text-transform: lowercase;
}</code></pre>
<pre><code>p.capital {
 text-transform: capitalize;
}</code></pre>
Penjelasan :
 
<ul>
<li style="text-align: justify;">Dengan script CSS di atas, elemen paragraf dengan class uppercase akan dijadikan huruf kapital secara keseluruhan.</li>
<li style="text-align: justify;">Elemen paragraf dengan class lowercase akan dijadikan huruf kecil seluruhnya.</li>
<li style="text-align: justify;">Elemen paragraf dengan class capital akan dijadikan huruf kapital di setiap awal kata.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_text_transformation.html" target="_blank">Coba sendiri di sini</a>
</div>
<div>
 
 
E. TEXT INDENTATION 
 
text-indent adalah properti yang digunakan untuk mengatur ukuran seberapa jauh baris pertama menjorok. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
p {
 text-indent: 10px;
}</code></pre>
<pre></pre>
Penjelasan :
 
<ul>
<li style="text-align: justify;">Dengan script CSS di atas, elemen paragraf dalam file HTML yang kita buat akan menjorok ke dalam sejauh 10 piksel.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_text_indent.html" target="_blank">Coba sendiri di sini</a>
</div>
<div>
 
 
F. LETTER SPACING 
 
letter-spacing adalah properti yang digunakan untuk mengatur jarak antar huruf. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
p {
 letter-spacing: 2px;
}</code></pre>
<pre></pre>
 
Penjelasan :
 
<ul>
<li style="text-align: justify;">Dengan script CSS di atas, Setiap huruf pada elemen paragraf dalam file HTML yang kita buat akan diberi jarak sebanyak 2 piksel.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_letter_spacing.html" target="_blank">Coba sendiri di sini</a>
</div>
<div>
 
 
G. LINE HEIGHT 
 
line-height adalah properti yang digunakan untuk mengatur jarak antar baris. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
p {
 line-height: 0.8;
}</code></pre>
<pre></pre>
 
Penjelasan :
 
<ul>
<li style="text-align: justify;">Dengan script CSS di atas, Setiap baris pada elemen paragraf dalam file HTML yang kita buat akan diberi jarak 0.8 inchi.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_line_height.html" target="_blank">Coba sendiri di sini</a>
</div>
<div>
 
 
H. TEXT DIRECTION 
 
direction adalah properti yang digunakan untuk menentukan apakah kita akan menulis dari kiri ke kanan, atau kanan ke kiri. Ya, kita bisa merubah teks menjadi ditulis dari kanan. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
p {
 direction: rtl;
}</code></pre>
<pre></pre>
Penjelasan :
 
<ul>
<li style="text-align: justify;">Dengan script CSS di atas, Paragraf yang kita tulis akan berorientasi dari kanan ke kiri. rtl di sana berarti right to left.</li>
</ul>
<div>
<a class="coba" href="http://batweber.greengaluh.com/css_text_direction.html" target="_blank">Coba sendiri di sini</a></div>
<div>
</div>
<div style="text-align: justify;">
</div>
 
 
I. WORD SPACING</div>
 
word-spacing adalah properti yang digunakan untuk mengatur jarak antar kata. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
p {
 word-spacing: 4px;
}</code></pre>
Penjelasan :
 
<ul>
<li style="text-align: justify;">Dengan script CSS di atas, Setiap kata pada elemen paragraf dalam file HTML yang kita buat akan diberi jarak sebanyak 5 piksel.</li>
</ul>
<div>
<a class="coba" href="http://batweber.greengaluh.com/css_word_spacing.html" target="_blank">Coba sendiri di sini</a></div>
<div style="text-align: justify;">
<div style="text-align: justify;">
 
 
Demikian Belajar CSS Part 8 tentang Text Formatting, semoga bermanfaat. 
Terima kasih dan wassalamu'alaikum warohmatullaahi wabarokaatuh. </div>
</div>
</div>

Belajar CSS Part 8 - Text Formatting

Assalamu'alaikum warohmatullaahi wabarokaatuh. Pada artikel kali ini kita akan mempelajari tentang Text Formatting . Dengan fung...

Belajar CSS Part 7 - Height dan Width (Pengaturan Tinggi dan Lebar Elemen)

<li>Script di atas akan mengatur elemen gambar sehingga memiliki tinggi 200 pixel dan lebar 100 pixel</li>
 
<div>
 
<a class="coba" href="http://batweber.greengaluh.com/css_height_width.html" target="_blank">Coba sendiri di sini</a> 
 
 </div>
<div>
</div>
<div>
</div>
B. MENGATUR MAX-WIDTH
 
<div style="text-align: justify;">
Kita juga bisa menggunakan properti max-width untuk pengaturan lebar sebuah elemen. Max-width merupakan properti untuk mengatur lebar maksimal dari sebuah elemen. Perbedaannya dengan width, max-width memiliki fungsi lebih fleksibel. Elemen yang kita gunakan (misalnya gambar) akan secara otomatis menyesuaikan dengan lebar aslinya selama belum menyentuh batas max-width.</div>
<div>
Contoh :</div>
<div>
</div>
<div>
<pre><code>div {
height : 200px;
max-width : 100px;
}</code></pre>
<pre><code>
</code></pre>
Dengan script  di atas, sebuah elemen div akan memiliki tinggi tetap, yaitu 200 pixel. Namun lebar dari elemen tersebut akan menyesuaikan dengan lebar browser dengan catatan tidak melebihi dari 100 pixel. 
 
<a class="coba" href="http://batweber.greengaluh.com/css_height_maxwidth.html" target="_blank">Coba sendiri di sini</a> 
 
 
Demikian Belajar CSS tentang Pengaturan Tinggi dan Lebar (Height dan Width), semoga bermanfaat.
Terima kasih dan wassalamu'alaikum warohmatullaahi wabarokaatuh.
</div>

Belajar CSS Part 7 - Height dan Width (Pengaturan Tinggi dan Lebar Elemen)

Assalamu'alaikum warohmatullaahi wabarokaatuh Kali ini kita akan mempelajari tentang pengaturan tinggi dan lebar dari sebuah e...

Belajar CSS Part 6 - Padding

</div>
</div>

Belajar CSS Part 6 - Padding

Assalamu'alaikum warohmatullaahi wabarokaatuh Dalam Seri Belajar CSS kali ini kita akan mempelajari tentang padding . Padding adal...

Belajar CSS Part 5 - Margin

Belajar CSS Part 5 - Margin

Assalamu'alaikum Warohmatullaahi Wabarokaatuh. Dalam Seri Belajar CSS kali ini kita akan mempelajari tentang penggunaan Margin. ...

Belajar CSS Part 4 - Border

<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI-OMpOUPrqrQEUr8Ga8mvoPzH2pBW2-Faz1bAZtNtOu7Rssw1fXyo0s0gjih5W7um0BmaUMjdzoBpWpMErWUwV5Yo0L54FeFhj-YoaGntAljWSuHG6y0ksKPShT0xAleyAP3gzaQwPQ/s1600/tutorial_css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar CSS Part 4 - Border" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI-OMpOUPrqrQEUr8Ga8mvoPzH2pBW2-Faz1bAZtNtOu7Rssw1fXyo0s0gjih5W7um0BmaUMjdzoBpWpMErWUwV5Yo0L54FeFhj-YoaGntAljWSuHG6y0ksKPShT0xAleyAP3gzaQwPQ/s1600/tutorial_css.jpg" title="Belajar CSS Part 4 - Border" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
Assalamu'alaikum Warohmatullaahi Wabarokaatuh. 
 
 
<div style="text-align: justify;">
Border merupakan garis batas sebuah elemen. Dengan CSS kita bisa mengatur style, width, dan warna dari border tersebut.</div>
 
 
A. BORDER STYLE 
 
<div style="text-align: justify;">
Border Style digunakan untuk mendefinisikan jenis tampilan dari sebuah border. Value yang digunakan dalam pengaturan border style adalah sebagai berikut :</div>
<ul>
<li>dotted</li>
<li>dashed</li>
<li>solid</li>
<li>double</li>
<li>groove</li>
<li>ridge</li>
<li>inset</li>
<li>outset</li>
<li>none</li>
<li>hidden</li>
</ul>
<div>
Berikut merupakan contoh penggunaannya :</div>
<div>
<pre><code>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style</code>: dotted dashed solid double;}</pre>
 
Berikut hasilnya : 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0t_x-KaBXnzj_vQQ6MYLrUQ2_Nnv9aE53XKDClw8b2Py30TbGOEmZRGHCV-O3Iv_e-e6LkUBzkcLwL_OxkeeWcBlSBFMGXO23fEKZn3ezXs_uW9trVdlQgTH6cqcioJTD9xLVUnjCicc/s1600/Tutorial+CSS+Part+4+-+Border.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial CSS Border" border="0" height="512" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0t_x-KaBXnzj_vQQ6MYLrUQ2_Nnv9aE53XKDClw8b2Py30TbGOEmZRGHCV-O3Iv_e-e6LkUBzkcLwL_OxkeeWcBlSBFMGXO23fEKZn3ezXs_uW9trVdlQgTH6cqcioJTD9xLVUnjCicc/s640/Tutorial+CSS+Part+4+-+Border.png" title="Tutorial CSS Part 4 - Border" width="640" /></a></div>
 
<a class="coba" href="http://batweber.greengaluh.com/css_border.html" target="_blank">Coba sendiri di sini</a> 
 
 
B. BORDER WIDTH 
 
<div style="text-align: justify;">
Border Width digunakan untuk mengatur ketebalan dari border. Value dari Border Width bisa didefinisikan dalam nilai spesifik (dalam satuan px, cm, in, dsb.) atau dengan value yang telah didefinisikan yaitu thin (tipis), medium (menengah), atau thick (tebal).</div>
 
Contoh : 
 
 
<pre><code>p.satu {</code></pre>
<pre><code>border-style: solid;</code></pre>
<pre><code><pre style="color: black;"><code>border-width: 5px;</code></pre>
}</code></pre>
<pre>p.dua {</pre>
<pre><code>border-style: solid;</code></pre>
<pre><code>border-width: medium;</code></pre>
<pre><code>}</code></pre>
<pre><code><pre style="color: black;"><code>border-style: solid;</code></pre>
</code><code><pre style="color: black;">p.tiga {</pre>
</code><code><pre style="color: black;"><code>border-width: 3px 10px 5px 4px;</code></pre>
</code><code></code><code><pre style="color: black;"><code>}</code></pre>
</code><code></code><code>
</code></pre>
Penjelasan :
 
<ul>
<li style="text-align: justify;">p.satu menandakan paragraf dengan nama class satu didefinisikan dengan ketebalan 5 pixel</li>
<li style="text-align: justify;">p.dua menandakan paragraf dengan nama class dua didefinisikan dengan ketebalan menengah</li>
<li style="text-align: justify;">p.tiga menandakan paragraf dengan nama class tiga diberi ketebalan masing-masing border atas 3 pixel, border kanan 10 pixel, border bawah 5 pixel, dan border kiri 4 pixel</li>
</ul>
 <a class="coba" href="http://batweber.greengaluh.com/css_border_width.html" target="_blank">Coba sendiri di sini</a> 
 
<ul>
</ul>
<div>
C. BORDER COLOR</div>
</div>
<div>
 </div>
<div>
<div style="text-align: justify;">
Border Color digunakan untuk mendefinisikan warna dari border. Pendefinisian value warna dapat dilakukan dengan beberapa cara, yaitu :</div>
</div>
<div>
<ul>
<li>Dengan nama warna. Contoh "red", "green", dsb.</li>
<li>Dengan nilai hexa. Contoh "#ff0000", "#00ff00", dsb.</li>
<li>Dengan nilai RGB. Contoh "rgb(255,0,0)", "rgb (0,255,0)", dsb.</li>
<li>Dengan nilai HSL. Contoh "hsl(100%,0,0)", "hsl(0,100%,0)", dsb.</li>
<li>Dengan nilai transparent.</li>
</ul>
<div>
<div style="text-align: justify;">
Penjelasan tentang penyisipan warna bisa Anda baca di <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-19-penyisipan-warna.html" target="_blank">Belajar HTML Part 19 - Penyisipan Warna</a>. </div>
</div>
</div>
<div>
<div style="text-align: justify;">
Seperti halnya border width, kita bisa mengatur warna setiap sisi secara terpisah yaitu secara berurutan border atas, border kanan, border bawah, dan border kiri.</div>
</div>
<div>
Contoh : 
 
 
<pre><code>p.satu {</code></pre>
<pre><code>border-style: solid;</code></pre>
<pre><code><pre style="color: black;"><code>border-color: red;</code></pre>
</code></pre>
<pre><code>}</code></pre>
<pre>p.dua {</pre>
<pre><code>border-style: solid;</code></pre>
<pre><code>border-color: red green blue yellow;</code></pre>
<pre><code>}</code></pre>
<pre><code> </code></pre>
Penjelasan : 
<ul>
<li>p.satu menandakan paragraf dengan nama class satu diberi warna merah</li>
<li style="text-align: justify;">p.tiga menandakan paragraf dengan nama class tiga diberi warna masing-masing border atas merah, border kanan hijau, border bawah biru, dan border kiri kuning</li>
</ul>
 <a class="coba" href="http://batweber.greengaluh.com/css_border_color.html" target="_blank">Coba sendiri di sini</a> 
 
<ul>
</ul>
<div>
D. PENDEFINISIAN SETIAP SISI SECARA TERPISAH</div>
</div>
<div>
 </div>
<div>
<div style="text-align: justify;">
Kita juga bisa mendefinisikan warna dari setiap sisi atas, kanan, bawah, dan kiri secara terpisah. Berikut contoh penggunaannya :</div>
</div>
<div>
 </div>
<div>
<pre><code>p.satu {</code></pre>
<pre><code>border-top-style: dotted;</code></pre>
<pre><code><pre style="color: black;"><code>border-right-style: solid;</code></pre>
<pre style="color: black;"><pre><code>border-bottom-style: double;</code></pre>
<pre><code>border-left-style: dashed;</code></pre>
</pre>
</code></pre>
<pre><code>}</code></pre>
<pre><code><pre style="color: black;"><code>p.dua {</code></pre>
<pre style="color: black;"><code>border-style: dotted solid;</code></pre>
<pre style="color: black;"><code>}</code></pre>
</code></pre>
<pre><code>
</code></pre>
Penjelasan : 
<ul>
<li style="text-align: justify;">p.satu diberi nilai berbeda di tiap sisi yaitu dotted untuk border atas, solid untuk border kanan, double untuk border bawah, dan dashed untuk border kiri.</li>
<li style="text-align: justify;">p.dua diberi dua nilai berbeda di tiap sisi yaitu dotted untuk border atas dan bawah, dan solid untuk border kanan dan kiri.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_border_deklarasi_terpisah.html" target="_blank">Coba sendiri di sini</a> 
 
 
<ul>
</ul>
<div>
E. SHORTHAND PROPERTY</div>
<div>
 </div>
<div style="text-align: justify;">
Semua kode di atas bisa kita ringkas dengan menggunakan metode shorthand property. Yaitu dengan menggunakan banyak deklarasi ke dalam satu kali deklarasi. Untuk lebih jelasnya, berikut contoh penggunaannya :</div>
<div>
 </div>
 
<pre><code><pre style="color: black;"><code>p {</code></pre>
<pre style="color: black;"><code>border : 5px solid red;</code></pre>
<pre style="color: black;"><code>}</code></pre>
</code></pre>
<div>
</div>
 
<div>
</div>
<div>
Penjelasan :</div>
<div>
<ul>
<li style="text-align: justify;">Dengan script di atas, kita mendefinisikan seluruh paragraf dalam dokumen yang kita buat akan diberi border setebal 5 pixel, style solid, dan warna merah.</li>
<li style="text-align: justify;">Dengan menggunakan shorthand property, kita bisa mendefinisikan semuanya dengan lebih ringkas.</li>
</ul>
 <a class="coba" href="http://batweber.greengaluh.com/css_border_shorthand_property.html" target="_blank">Coba sendiri di sini</a> 
 
 
<ul>
</ul>
<div style="text-align: justify;">
Demikian Seri Belajar CSS tentang Border. Semoga bermanfaat. Aamiin.</div>
</div>
<div style="text-align: justify;">
Terima kasih dan</div>
<div style="text-align: justify;">
Wassalamu'alaikum Warohmatullaahi Wabarokaatuh.</div>
</div>

Belajar CSS Part 4 - Border

Assalamu'alaikum Warohmatullaahi Wabarokaatuh. Border merupakan garis batas sebuah elemen. Dengan CSS kita bisa mengatur...