Kamis, 27 April 2017

Latihan Soal Menentukan hasil Log

  16.48      No comments   Edit

Latihan Soal Menentukan hasil Log



Soal : 
ALog B = C
Jawab :


Hasil : -

Latihan Soal Sn Deret Geometri

  04.57      No comments   Edit

Latihan Soal Sn Deret Geometri



Soal : 
U1 + U2 + U3 + ... + Un
Berapakah Jumlah (Sn) Dari Urutan ke ... dari deret tersebut?

Jawab :


Hasil : -





Rabu, 26 April 2017

Latihan Soal Sn Deret Aritmatika

  19.07      No comments   Edit

Latihan Soal S ke-n Deret Aritmatika



Soal : 
U1 + U2 + U3 + ... + Un
Berapakah Jumlah (Sn) Dari Urutan ke ... dari deret tersebut?

Jawab :


Hasil : -





Latihan Urutan Ke N Baris Geometri

  18.53      No comments   Edit

Latihan Soal U ke-n Deret Geometri



Soal : 
U1, U2, U3, ..., Un
Berapakah Urutan ke ... dari baris tersebut?

Jawab :


Hasil : -





Selasa, 25 April 2017

Latihan Urutan Ke N Baris Aritmatika

  00.30      No comments   Edit

Latihan Soal U ke-n Deret Aritmatika



Soal : 
U1, U2, U3, ..., Un
Berapakah Urutan ke ... dari baris tersebut?

Jawab :


Hasil : -





Minggu, 23 April 2017

Pengenalan CSS

  19.16      No comments   Edit


Pengenalan CSS

CSS singkatan dari Cascading Style Sheets.
CSS menjelaskan bagaimana elemen HTML ditampilkan di layar, kertas, atau media lainnya
CSS banyak digunakan untuk tampilan dan desain.
CSS bisa menghemat waktu dan mengurangi pekerjaan karena bisa digunakan untuk beberapa file.

Syyntax CSS

Aturan CSS terdiri dari Selector dan Declaration Block
Selector menunjuk ke elemen HTML yang ingin Anda rubah tampilanya.
Declaration Block berisi satu atau lebih declatrasi(declaration) yang dipisahkan oleh titik koma.
Setiap declarasi mencakup nama property CSS dan nilainya(value), dipisahkan oleh titik dua.
Deklarasi CSS selalu berakhir dengan titik koma, dan declaration block dikelilingi oleh kurung kurawal.
Pada contoh berikut semua elemen <p> akan berada di tengah-tengah, dengan warna teks merah:

<head>
<style>
p {
    color: red;
    text-align: center;
}
</style>
</head>
<body>
<p>Contoh paragraf</p>
</body>


Hasil :
Contoh paragraf


Cara Penggunaan CSS

Ada 3 Cara menggunakan CSS :
  • Internal
  • Eksternal
  • Inline

Internal CSS

Penggunaan internal CSS yaitu dengan membuat CSS di bagian <head> dari HTML yang anda buat dengan menggunakan tag <style>.
Contoh : 
<head>
<style>
p {
    color: red;
    text-align: center;
}
</style>
</head>

Eksternal CSS

Penggunaan Eksternal CSS yaitu dengan membuat CSS di file yang terpisah dari HTML yang dibuat, file tersebut dipanggil ke HTML yang anda buat. File CSS disimpan dengan ekstensi .css
Contoh :
Cara memanggil file CSS eksternal di HTML
<head>
<style>
<link rel="stylesheet" type="text/css" href="nama_css.css">
</style>
</head>
Pada Attribut href isi dengan nama file CSSnya.
Contoh File CSS :
p {
    color: red;
    text-align: center;
}

Inline CSS

penggunaan CSS inline yaitu dengan menulis Script CSS pada attribut style di dalam tag yang ingin kita rubah.
Contoh :
<p style="color: red; text-align: center;">Contoh paragraf</p>

Sabtu, 15 April 2017

Entities HTML

  14.59      No comments   Edit

Pengenalan Entities HTML

Beberapa karakter/simbol digunakan pada script html
misalkan anda ingin membuat halaman web tutorial html tapi ketika anda membuat scriptnya, tidak tertampil di browser anda, karena itu script html.

Cara menuliskan tanda < dan > harus menggunakan Entitas karakter(Character entities). cara penulisanya dengan &entities_name; atau &#entity_number;
Contoh :
&lt; Table &gt;
Hasil :
< Table >

atau
Contoh :
&#60; Table &#62;
Hasil :
< Table >

Non-breaking Space

Kalau anda membuat teks dan menambahkan 10 spasi pada scriptnya, maka spasi yang akan dieksekusi(ditampilkan) adalah 1.
Cara membuat banyak spasi dengan entitas &nbsp;
Digunakan juga untuk memberi spasi tanpa memotong 2 kata tersebut ke dalam baris yang berbeda.
Contoh :
teks 1 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; teks 2
Hasil :
teks 1           teks 2

Beberapa Entitas yang sering digunakan

Hasil
Keterangan
 Nama Entitas Nomber Entitas
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" double quotation mark &quot; &#34;
' single quotation mark (apostrophe) &apos; &#39;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

Iframe HTML

  14.23      No comments   Edit

Fungsi Iframe

Iframe digunakan untuk menampilkan halaman web lain di halaman web yang anda buat.
untuk mengatur panjang dan lebarnya gunakan attribut width dan height.

Contoh :
<iframe src="/p/materi-html.html" width="500" height="500"></iframe>

Hasil :

List HTML

  01.56      No comments   Edit

Pengertian List HTML

List adalah sebuah daftar .
Untuk membuat daftar anda bisa menggunakan salah satu tag <ol> atau <ul> .
<ol> yaitu ordered list Untuk membuat daftar yang berurutan . Daftarnya diawali dengan angka(bisa diubah dengan angka/huruf/angka romawi) .
<ul> yaitu unordered list Untuk membuat daftar yang tidak berurutan . Tidak berurutan disini bukan berarti daftar yang ditampilkan tidak sesuai dengan urutan yang anda tulis. Daftarnya diawali dengan bulat(bisa diubah jadi kotak) .

Penggunaan Ol dan Ul

Tag <Ol> biasanya digunakan untuk menulis daftar yang berurutan, seperti menulis tutorial, pancasila, dll . konten yang ditulis dengan tag <ol> biasanya urutanya tidak boleh diubah susunanya.
Contoh penggunaan Ol:
<b>Cara Membuat Nasi Goreng</b>
<ol>
<li>Taruh wajan diatas kompor</li>
<li>Nyalakan kompor&nbsp;</li>
<li>Masukan nasi ke wajan</li>
<li>Tambahkan bumbu</li>
<li>Aduk</li>
<li>Setelah merata matikan kompor dan angkat</li>
<li>Masukan ke piring dan nasi goreng siap dihidangkan</li>
</ol>


Hasil :
Cara Membuat Nasi Goreng
  1. Taruh wajan diatas kompor
  2. Nyalakan kompor 
  3. Masukan nasi ke wajan
  4. Tambahkan bumbu
  5. Aduk
  6. Setelah merata matikan kompor dan angkat
  7. Masukan ke piring dan nasi goreng siap dihidangkan
*Note : list diatas contoh ordered list. karena jika langkahnya diacak bisa terjadi masalah(nasi gorengnya gagal). Bayangkan jika list diatas no 2 anda pindah ke paling bawah, pasti gagal membuatnya.

Contoh penggunaan Ul:
<b>Daftar Band Favorite Saya</b>
<ul>
<li>Avenged Sevenfold</li>
<li>Noah</li>
<li>Setia Band</li>
<li>Wali</li>
</ul>

Hasil :
Daftar Band Favorite Saya
  • Avenged Sevenfold
  • Noah
  • Setia Band
  • Wali
*Note : list diatas contoh unordered list. Karena jika urutanya diacak tidak akan ada masalah karena keempatnya tetap band favorite saya

Type Ordered List

Ada beberapa penulisan ordered list selain dengan angka. Gunakan attribut type pada tag <ol>
Type Ol :
  • 1 : untuk penulisan dengan angka dari 1, 2, 3, dst.(default untuk ol)
  • A : untuk penulisan dengan huruf besar(kapital) dari A, B, C, dst.
  • a : untuk penulisan dengan huruf kecil dari a, b, c, dst.
  • I : untuk penulisan dengan angka romawi(kapital) dari I, II, III, dst.
  • i : untuk penulisan dengan angka romawi dari i, ii, iii, dst.
Contoh :
<ol type="A">
<li>ke-1</li>
<li>ke-2</li>
<li>ke-3</li>
</ol>
Hasil :
  1. ke-1
  2. ke-2
  3. ke-3

Type Unordered List

Ada beberapa penulisan unordered list selain dengan bulat. Gunakan attribut type pada tag <ol>
Type Ol :
  • disc : untuk penulisan dengan bentuk bullet(ini default untuk ul) .
  • circle : untuk penulisan dengan bentuk lingkaran .
  • square : untuk penulisan dengan bentuk kotak .
  • none : untuk penulisan tanpa bentuk apapun(tidak ada tanda di listnya) .
Contoh :
<ul type="square">
<li>ke-1</li>
<li>ke-2</li>
<li>ke-3</li>
</ul>
Hasil :
  • ke-1
  • ke-2
  • ke-3

Description List

Description List adalah list dengan sebuah keterangan
List deskripsi didefinisikan dengan <dl>. menggunakan tag <dt> untuk item list nya, dan <dd> untuk keteranganya .
Contoh :
<dl>
  <dt>Sapi</dt>
  <dd>- hewan yang menghasilkan susu</dd>
  <dt>Domba</dt>
  <dd>- hewan yang menghasilkan wol(bulu)</dd>
</dl>
Hasil :
Sapi
- hewan yang menghasilkan susu
Domba
- hewan yang menghasilkan wol(bulu)

Nested HTML Lists

Nested list yaitu istilah untuk sebuah list didalam list .
Untuk membuat list didalam list caranya seperti dibawah :
Contoh :
<ul>
<li>Kopi
<ul>
<li>Kopi hitam</li>
<li>Capuchino</li>
</ul>
</li>
<li>Tea
<ul>
<li>Teh Manis</li>
<li>Teh Hijau</li>
</ul>
</li>
<li>Milk</li>
</ul>
Hasil :
  • Kopi
    • Kopi hitam
    • Capuchino
  • Tea
    • Teh Manis
    • Teh Hijau
  • Milk

Table HTML

  00.21      No comments   Edit

Membuat Tabel

  • Tabel dalam html didefinisikan dengan tag <table> .
  • Setiap barisnya didefinisikan dengan <tr> .
  • Setiap data tabel(cell) didefinisikan dengan <td> .
  • Membuat garis tabelnya menggunakan attribut border pada tag <table> .
  • Menentukan posisi tabel dengan attribut align pada tag <table> .
  • Mengatur lebar tabel dengan attribut width, bisa menggunakan px atau %, default px(pixel) , bisa juga digunakan pada <td> untuk mengatur lebar tiap kolomnya(gunakan di <td> baris paling atas karena yang bawahnya akan otomatis mengikuti yang atas) .
  • Menggabungkan kolom menggunakan attribut colspan pada tag <td>, lalu valuenya dengan no(tergantung berapa kolom yang ingin digabung) 
  • Menggabungkan baris menggunakan attribut rowspan pada tag <td>, lalu valuenya dengan no(tergantung berapa baris yang ingin digabung)  


Contoh :
<table border="1" align="center"  width="500px">
<tr>
<td colspan="2">Nama</td>
<td rowspan="2">Umur</td>
</tr>
<tr>
<td>Depan</td>
<td>Belakang</td>
</tr>
<tr>
<td>data ke-1</td>
<td>data ke-2</td>
<td>data ke-3</td>
</tr>
<tr>
<td>data ke-4</td>
<td>data ke-5</td>
<td>data ke-6</td>
</tr>
</table>
Hasil :
Nama Umur
Depan Belakang
Alexander Jajang 24
Royal Jelly 41

Menambah Caption pada tabel

Untuk menambahkan tulisan diatas tabel menggunakan tag <caption> dibawah tag <table>.
Fungsinya untuk memberi judul diatas tabel dan posisinya tepat di tengah tabelnya.
Contoh :
<table border="1" align="center"  width="500px">
<caption>Tabel Umur Pegawai</caption>
<tr>
<td colspan="2">Nama</td>
<td rowspan="2">Umur</td>
</tr>
<tr>
<td>Depan</td>
<td>Belakang</td>
</tr>
<tr>
<td>Alexander</td>
<td>Jajang</td>
<td>24</td>
</tr>
</table>
Hasil :
Tabel Umur Pegawai
Nama Umur
Depan Belakang
Alexander Jajang 24

Kamis, 13 April 2017

Image HTML

  20.33      No comments   Edit

Tag Images

Tag images didefinisikan dengan <img>. ini adalah tag kosong, harus diisi dengan attribut, dan tidak memiliki tag penutup.
Attribut src untuk url  gambar(tempat menyimpan gambar)

Alt Attribute

Alt attribut digunakan untuk membuat teks kalau gambar yang anda masukan tidak bisa ditampilkan karena ada masalah(Contoh : koneksi salah, src yang anda masukan salah, atau pembaca menggunakan screen reader)
*Note : Screen reader adalah aplikasi yang digunakan untuk membaca HTML dan user bisa mendengarkan isi kontenya. Aplikasi ini sangat berguna untuk orang yang buta, Tunanetra, atau Cacat belajar.

Size Image

Untuk mengatur ukuran anda bisa gunakan attribut width dan height, bisa diatur dalam ukuran pixel atau %an dari ukuran aslinya untuk default jika anda tidak menambahkan px / % dibelakang angka yang dimasukan maka secara otomatis dalam ukuran pixel.
Contoh :
menggunakan pixel
<img width="50px" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib2minTN6CQhozsorhJX2fUP9SkL87rAnCdE8i7r7J6Slvns57VL1Ji2eKeMZfQ5Be8W7ihBLZp_fNGeAW6D7XFllwO_C9O28SgNEH2a74aVz5lfs0nV3oOLepQ6SJoMAzwgkHChG7A0I/s320/home_galsum.png" />

menggunakan persen
<img width="30%" height="30%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib2minTN6CQhozsorhJX2fUP9SkL87rAnCdE8i7r7J6Slvns57VL1Ji2eKeMZfQ5Be8W7ihBLZp_fNGeAW6D7XFllwO_C9O28SgNEH2a74aVz5lfs0nV3oOLepQ6SJoMAzwgkHChG7A0I/s320/home_galsum.png" />

Hasil :
menggunakan pixel

Menggunakan Persen


Src Image

src adalah attribut yang digunakan untuk url gambar(tempat gambar disimpan)
Contoh :
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib2minTN6CQhozsorhJX2fUP9SkL87rAnCdE8i7r7J6Slvns57VL1Ji2eKeMZfQ5Be8W7ihBLZp_fNGeAW6D7XFllwO_C9O28SgNEH2a74aVz5lfs0nV3oOLepQ6SJoMAzwgkHChG7A0I/s320/home_galsum.png" />

Jika Offline ambil gambar dari folder yang sama dengan file html ini
<img width="30%" height="30%" src="home_galsum.png" />
*note : home_galsum adalah nama filenya, .png adalah ekstensinya(.png, .jpg, .gif, dll)

Jika Offline ambil gambar dari folder yang berbeda dengan file anda
<img width="30%" height="30%" src="../gambar_web/home_galsum.png" />
*note : ../ digunakan untuk keluar dari folder html ini, gambar_web/ nama folder lain yang berisi gambar, home_galsum.png adalah file gambarnya

Jika ambil gambar dari Web lain
<img width="30%" height="30%" src="https://i2.wp.com/copastoo.com/wp-content/uploads/2017/04/Solusi-Error-Install-Ulang-Windows-Can%E2%80%99t-Be-Installed-On-Drive-0-Partition.jpg?resize=300%2C300" />
hasil : 
 
*Note : Gambar diatas berasal dari web copastoo.com. web partner saya, berisi tentang informasi menarik dan bermanfaat seputar komputer dan blog.

Using an Image as a Link

Menggunakan gambar sebagai link, caranya mudah gunakan tag <img> diantara tag <a> dan </a>
Contoh :
<a href="https://galsum.blogspot.com/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib2minTN6CQhozsorhJX2fUP9SkL87rAnCdE8i7r7J6Slvns57VL1Ji2eKeMZfQ5Be8W7ihBLZp_fNGeAW6D7XFllwO_C9O28SgNEH2a74aVz5lfs0nV3oOLepQ6SJoMAzwgkHChG7A0I/s320/home_galsum.png" />
</a>
Hasil :

*Note : jika klik gambar di atas akan buka new tab ke halaman depan galsum

Image Maps

Image map fungsinya untuk pemetaan link dalam sebuah gambar, jadi bisa masukan banyak link kedalam 1 gambar. Menggunakan tag <map> dan attribut usemap pada tag <img>.
Sulit buat dijelaskan jadi langsung saja ke contoh(agar mudah dipelajari).
Contoh :
<map name="galsum_map">
<area shape="rect" coords="65,110,405,147" href="https://galsum.blogspot.co.id/" target="_blank">
<area shape="circle" coords="469,35,45" href="https://galsum.blogspot.co.id/" target="_blank">
</map>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib2minTN6CQhozsorhJX2fUP9SkL87rAnCdE8i7r7J6Slvns57VL1Ji2eKeMZfQ5Be8W7ihBLZp_fNGeAW6D7XFllwO_C9O28SgNEH2a74aVz5lfs0nV3oOLepQ6SJoMAzwgkHChG7A0I/s320/home_galsum.png" usemap="galsum_map"/>

*Note : Ini adalah script untuk map linknya
<map name="galsum_map"> fungsinya untuk memberi nama map yang dibuat.

<area shape="rect" coords="65,110,405,147" href="home.htm" target="_blank">
Fungsinya untuk membuat daerah yang bisa di klik menggunakan tag <area>.
Attribut shape diisi dengan bentuk link nya(rect berbentuk kotak, dan circle bentuknya bulat)
Attribut Coords menentukan daerah mana yang bisa di klik.
Formatnya x,y,x2,y2. Untuk x,y adalah koordinat awal. x2 batasan lebar, y2 batasan tinggi
jadi jika saya set coords="65,110,405,147" maka yg bisa di klik dari koordinat x dari 65 sampai 405, dan y 110 sampai 147. ukuranya dalam pixel
attribut href untuk linknya
attribut target="_blank" agar ketika di klik muncul di tab baru

<area shape="circle" coords="469,35,45" href="https://galsum.blogspot.co.id/" target="_blank">
Fungsinya untuk membuat daerah bulat yang bisa di klik
Attribut Coords formatnya x,y,r Untuk x,y adalah koordinat awal, sedangkan r adalah panjang jari jari. ukuranya dalam pixel

</map> Adalah penutup tag <map>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib2minTN6CQhozsorhJX2fUP9SkL87rAnCdE8i7r7J6Slvns57VL1Ji2eKeMZfQ5Be8W7ihBLZp_fNGeAW6D7XFllwO_C9O28SgNEH2a74aVz5lfs0nV3oOLepQ6SJoMAzwgkHChG7A0I/s320/home_galsum.png" usemap="galsum_map"/>
Tag img untuk gambarnya, diberi attribute usemap="galsum_map" ganti galsum_map dengan nama map yang sudah dibuat

Hasil :

*Note : Jika klik tulisan "Galsum Home" atau gambar matahari akan buka new tab ke halaman depan galsum

Rabu, 12 April 2017

Link HTML

  23.32      No comments   Edit

Pengenalan Link

Link Adalah Hyperlink.
Jika Anda klik link anda akan dipindahkan ke halaman(dokument/file kalau offline) yang lain.
Jika Anda arahkan kursor mouse ke arah link maka akan berubah menjadi gambar tangan.
Link berfungsi untuk pidah dari halaman ke halaman yang lain.

Cara Membuat Link

Link didefinisikan dengan tag <a href="halamantujuan.html"> ganti kata halamantujuan menjadi nama halaman(nama file jika offline) yang diinginkan, dan ganti akhiran .html sesuaikan dengan type dokumenya(.php, .html, dll).
diantara tag <a> dan </a> adalah teks yang ditampilkan untuk di klik
Contoh :
<a href="https://galsum.blogspot.com/">Ini link ke halaman depan galsum </a>

Hasil :
Ini link ke halaman depan galsum

Cara Membuat Link Dengan Gambar

Cukup tambahkan tag <img> diantara tag <a> dan </a>
Contoh :
<a href="https://galsum.blogspot.com/">
<img height="172" width="320" src="https://4.bp.blogspot.com/LICxw2kUn2Q/WO8VP_DR2uI/AAAAAAAAAYU/XRk_MW-QiKEI8nLsI_XBUus5EQheUBJbQCLcB/s320/home%2Bgalsum.png"/>
</a>

 *Note : di tag <img> pada attribut src="Ininamafile.jpg" ganti teks ininamafile dengan nama gambarnya dan .jpg dengan format gambarnya(.jpg, .png, .gif, dll)

 Hasil :

Target Attribute Link

Attribut Target fungsinya untuk menentukan bagaimana cara membuka link tersebut
List Attribute Target :
  • _blank - Membuka link di new tab/window
  • _self - Membuka link pada tab yang sama ketika klik (defaultnya ini)
  • _parent - Opens the linked document in the parent frame
  • _top - Opens the linked document in the full body of the window
  • framename - Opens the linked document in a named frame
*Note : Ma'af yang bahasa inggris saya tidak tahu penggunaanya, jika anda tahu tolong kirimkan komentar, maklum saya juga masih belajar

Contoh : 
<a href="https://galsum.blogspot.com/" target="_blank">New tab ke halaman depan galsum</a>
Hasil :
New tab ke halaman depan galsum

External Path Link

Untuk Mengarahkan link ke situs lain pada attribut src="https://webtujuan.com/" ganti kata webtujuan menjadi nama web/situs yang anda ingin dan .com ganti sesuaikan dengan web tujuan.
*Note : jika halaman tujuan ada pada situs anda pada attribut src="namahalaman.com" bisa digunakan tanpa https://namasitusanda.com/ .

Contoh :
<a href="https://copastoo.com/" target="_blank">New tab ke web copastoo(web partner) tempat belajar seputar komputer dan blog</a>
Hasil :
New tab ke web copastoo.com(web partner) tempat belajar seputar komputer dan blog

Selasa, 11 April 2017

Semua Warna HTML

  21.04      No comments   Edit


Color Name
HEX
Color
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGrey #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
DarkOrange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Grey #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGray #D3D3D3
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSlateGrey #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370DB
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #DB7093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
RebeccaPurple #663399
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
SlateGrey #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32

Color HTML

  20.12      No comments   Edit


Memberi Warna Pada HTML

ada beberapa cara untuk pemberian warna :

Nama Warna

Memberikan warna dengan cara menuliskan nama warnanya(namanya dalam bahasa inggris)
Contoh warna :
Nama Hasil
Red
Green
Blue
Black
Yellow
Tampilkan Semua Warna

Hex Value Warna

Untuk mendapatkan warna yang lebih spesifik gunakan hex value, formatnya seperti ini : #RRGGBB, untuk RR(Red / warna merah), GG(Green / hijau), BB(Blue / biru). value ini antara 0 - 255 tapi dalam bentuk hexadesimal(0-FF)
Contoh Warna :
Hex Hasil
#FF0000
#00FF00
#0000FF
#000000
#FFFF00
Tampilkan Semua Warna

Memberi Warna Background

Gunakan attribute bgcolor pada tag yang diinginkan.
Contoh :
  • Memberi warna seluruh background halaman pada tag <body bgcolor="Blue">
  • Memberi warna tabel  pada tag <table bgcolor="Blue">
  • Memberi warna kolom tabel pada tag <td bgcolor="Blue">

Memberi Warna Font

Gunakan attribute color pada tag <font> yang diinginkan.
Contoh : Memberi warna pada suatu tulisan <font color="Blue"> ini tulisanya </font>
Hasil :  ini tulisanya

Senin, 10 April 2017

Persamaan dan Pertidaksamaan Linear Satu Variabel

  19.22      No comments   Edit

Pengertian Persamaan linear satu variabel

Persamaan linear satu variabel merupakan sebuah konsep kalimat terbuka yang memiliki sebuah variabel. Kalimat terbuka tersebut biasanya dihubungkan dengan sebuah tanda sama dengan (=).

Variabel (peubah) adalah lambang (symbol) pada kalimat terbuka yang dapat diganti oleh sembarang nilai(nilainya belum ditentukan).
Konstanta adalah lambang yang menyatakan suatu bilangan tertentu(nilainya sudah ditentukan)

Contoh Persamaan linear satu variabel :
x + 2 = 5
Pada kalimat diatas x adalah variabel karna nilainya belum ada, sedangkan 2 dan 5 adalah konstanta.

7 + y = 13
Pada kalimat diatas y adalah variabel karna nilainya belum ada, sedangkan 7 dan 13 adalah konstanta.

Cara Menyelesaikan Persamaan Linear Satu Variabel

Contoh soal :
3x + 3 = 15 , Tentukan nilai x!

Jawaban :
3x + 3 = 15
3x + 3 - 3 = 15 - 3  <=== Kedua ruas dikurangi 3
3x = 12
3x / 3 = 12 / 3 <=== Kedua ruas dibagi 3
x = 4
Jadi nilai x = 4
Jika masih ragu anda bisa cek dengan cara seperti ini
3x + 3 = 15
3(4) + 3 = 15 <=== x tadi diganti dengan 4, karena menurut diatas x = 4
12 + 3 = 15
15 = 15 <=== Jika angka di kedua ruas sama berarti jawaban benar

Jadi Konsepnya seperti ini

Apapun yang anda lakukan pada ruas kiri harus anda lakukan pada ruas yang kanan juga begitu pula sebaliknya.

Misalnya saya punya kartu dan kertas, keduanya memiliki persamaan yaitu bentuknya persegi panjang

Saya ingin memotong kartu menjadi trapesium
Jadi tidak sama kan? Makanya saya juga harus lakukan hal yang sama pada kertas agar bentuknya tetap sama seperti kartu
Saya ingin memotong lagi kertas, jadi saya harus lakukan pemotongan pada keduanya agar tetap sama
Bentuk keduannya tetap sama, jadi kurang lebih seperti itu persamaan linear apapun yang anda lakukan pada ruas yang satu, harus anda lakukan juga pada ruas yang lain agar bentuknya tetap sama.

Pertidaksamaan Linear Satu Variabel

Pertidaksamaan linier dengan satu variable adalah suatu kalimat terbuka yang hanya memuat satu variable dengan derajad satu, yang dihubungkan oleh lambang <, >, ≥, dan ≤ .
Contoh :
3x ≤ 60
atau
y > 5

Cara Menyelesaikan Pertidaksamaan Linear Satu Variabel

Contoh soal :
Sebuah persegi panjang memiliki panjang 5 cm lebih dari lebarnya dan kelilikngnya tidak lebih dari 38 cm. jika lebarnya x cm . maka batas - bata nilai x adalah ...

Jawaban :
2p + 2l = k <=== rumus keliling peregi panjang(k = 2p + 2l)
2(x + 5) + 2x ≤ 38 <=== l  = x, p = x+5, k ≤ 38. tanda juga diganti
2x + 10 + 2x ≤ 38
4x + 10 ≤ 38
4x + 10 - 10 ≤ 38 - 10 <=== kedua ruas dikurangi 10
4x ≤ 28
4x / 4 ≤ 28 / 4 <=== kedua ruas dibagi 4
x ≤ 7
Jadi panjangnya ≤ 7

Pengertian dan Sifat - sifat Logaritma

  05.26      No comments   Edit

Pengertian Logaritma

Logaritma adalah operasi kebalikan dari pemangkatan

Bentuk Dasar Logaritma : 
ab = c ⇔ alog c = b

Latihan Soal Klik Disini


Contoh :
23 = 8 ⇔ 2log 8 = 3
52 = 25 ⇔ 5log 25 = 2

Sifat - sifat Logartima

  • alog xy = alog x + alog y
  •  
  • alog xn = na log x
  • aalog x = x
  • alog x . xlog b = alog b
  • alog a = 1
  • alog 1 = 0

Minggu, 09 April 2017

Baris Dan Deret (Aritmatika dan Geometri)

  22.12      No comments   Edit

Pengertian Baris Dan Deret


Pengertian Baris

Baris adalah daftar urutan bilangan yang mempunyai pola tertentu. Setiap bilangan dalam barisan merupakan suku dalam barisan. Ciri - ciri barisan setiap sukunya dipisah dengan tanda koma(,)
Contoh:
U1, U2, U3, ..., Un
1, 2, 3, 4, 5, ... , Un
3, 5, 7, 9, 11, … , Un

Deret

Deret adalah penjumlahan suku-suku dari suatu barisan. Ciri - ciri deret setiap sukunya dipisah dengan tanda tambah(+)
Contoh:
U1 + U2 + U3 + ... + Un
1 + 2 + 3 + 4 + 5, ... + Un
3 + 5 + 7 + 9 + 11 + … + Un.

Barisan Aritmatika

Barisan aritmatika adalah barisan dengan selisih antara sukunya selalu tetap. Selisih tersebut dinamakan beda dan dilambangkan dengan “b”
Contoh:
1, 3, 5, 7, 9, 11.
Barisan diatas merupakan barisan aritmatika karena selisih dari setiap suku yang berurutan selalu sama/tetap, yaitu 2.
U2 - U1 = 3 - 1 = 2
U3 - U2 = 5 - 3 = 2
Jadi beda dari baris diatas = 2.
Dari contoh diatas dapat disimpulkan kalau rumus mencari beda adalah 
b = Un - Un-1

Rumus Untuk Mencari Urutan ke sekian / Urutan ke n / Un
Un = a + (n - 1)b

Keterangan :
a = U1 = Suku pertama
b = beda
n = banyak suku
Un= Suku ke-n

Latihan Soal Klik Disini


Deret Aritmatika

Deret aritmatika adalah deret dengan selisih antara sukunya selalu tetap. Selisih tersebut dinamakan beda dan dilambangkan dengan “b”

Rumus Untuk Mencari Jumlah deret ke sekian / Jumlah ke n / Sn
Sn = 1/2n ( 2a + ( n – 1 ) b )

Untuk mencari beda rumusnya sama dengan baris aritmatika
b = Un - Un-1

Keterangan :
Sn = jumlah deret ke n

Latihan Soal Klik Disini


Baris Geometri

Barisan geometri adalah barisan yang tiap-tiap sukunya didapatkan dari hasil perkalian suku sebelumnya dengan sebuah konstanta tertentu(r). Konstanta tersebut dinamakan rasio dan dilambangkan dengan “r”

Contoh:
2, 4, 8, 16, 32, 64.
Barisan diatas merupakan barisan geometri karena setiap sukunya hasil dari perkalian dengan rasio yang sama/tetap, yaitu 2.
U2 / U1 = 4 / 2 = 2
U3 / U2 = 8 / 4 = 2
Jadi rasio dari baris diatas = 2.
Dari contoh diatas dapat disimpulkan kalau rumus mencari rasio adalah 
r = Un / Un-1

 Keterangan :
r = rasio

Rumus untuk mencari Urutan ke sekian / Urutan ke n / Un baris geometri adalah :
Un = a . rn - 1

Latihan Soal Klik Disini


Deret Geometri

Deret geometri adalah deret yang tiap-tiap sukunya didapatkan dari hasil perkalian suku sebelumnya dengan sebuah konstanta tertentu(r). Konstanta tersebut dinamakan rasio dan dilambangkan dengan “r”.

Rumus Untuk Mencari Jumlah deret ke sekian / Jumlah ke n / Sn baris geometri adalah :
Sn = a (1-rn ) / (1-r)

Latihan Soal Klik Disini

Comments HTML

  17.11      No comments   Edit


Pengertian Comments

Comment yaitu komentar, anda bisa menambahkan komentar pada script yang anda buat, ini tidak ada pengaruhnya pada script yang anda buat dan tidak akan tertampil pada halaman yang anda buat.

Fungsi Tag Comment

Fungsinya sebagai pengingat untuk anda, jika anda sudah membuat script yang sangat panjang ini akan sangat berguna untuk penanda 

Cara Buat Comment

Untuk 1 Baris
Untuk membuat komentar 1 baris gunakan tag <!-- Komentarnya --> ganti kata "Komentarnya" dengan komentar yang anda inginkan.
Contoh :
 <!-- Ingat Script dibawah untuk tabel harga barang -->


Untuk Banyak Baris
Untuk membuat komentar panjang cukup pakai tag <!-- untuk awalan lalu di akhir pakai -->
Contoh :
<!--
komentar baris 1
komentar baris 2
komentar baris 3
-->

Text Formating HTML

  05.00      No comments   Edit

Berbagai tag yang bisa dipakai untuk edit tulisan

  • <b> - Untuk menebalkan huruf
  • <i> - Untuk mencetak miring huruf
  • <u> - Untuk menggaris bawahi huruf
  • <strong> - Important text, menebalkan huruf
  • <em> - Emphasized text, mencetak miring
  • <ins> - Inserted text, digaris bawahi
  • <mark> - Marked text, menandai huruf dengan warna(mirip stabilo kalo nandain buku)
  • <small> - membuat huruf jadi kecil
  • <del> - Mencoret huruf
  • <sub> - Subscript text, membuat kecil dan sejajar dengan huruf normal
  • <sup> - Superscript text, membuat kecil dan diatas huruf normal(untuk pangkat)

Mengubah Ukuran Font

Menggunakan attribute size pada tag <font>
Contoh : <font size="12px">Ini Tulisan</font>
*note :  ubah angka 12px menjadi angka yang diinginkan, makin besar angka makin besar ukuranya




*Ma'af yang atas pake gambar soalnya di blogger size keubah otomatis

Mengubah Warna Font

Menggunakan attribute color
Contoh : <font color="blue">Ini Tulisan</font>
*note :  ubah blue menjadi warna yang diinginkan(dalam bahasa inggris contoh : blue), atau dengan kode warna (contoh : #0000ff untuk warna biru)
Hasil :  Ini Tulisan

Mengubah Jenis Font

Menggunakan attribute face .
Contoh : <font face="algerian">Ini Tulisan</font>
*note :  ubah algerian menjadi nama dari jenis hurufnya(contoh : arial, algerian).
Hasil :  Ini Tulisan

Mencetak Tebal Font

Menggunakan tag <b> Bold
Contoh : <b>Ini Tulisan </b>
Hasil :  Ini Tulisan

Mencetak Miring Font

Menggunakan tag <i> Italic
Contoh : <i>Ini Tulisan </i>
Hasil :  Ini Tulisan

Menggaris Bawahi Font

Menggunakan tag <u> Underline
Contoh : <u>Ini Tulisan </u>
Hasil :  Ini Tulisan

Menandai Font Dengan Warna

Menggunakan tag <mark>
Contoh : <mark>Ini tulisan</mark>
Hasil :  Ini tulisan

Membuat Font dicoret

Menggunakan tag <del>
Contoh : <del>Ini tulisan</del>
Hasil : Ini tulisan

Membuat Font subscripted

Menggunakan tag <sub> . Tag ini membuat huruf jadi kecil dan dibawah, biasanya digunakan dalam matematika .
Contoh : X<sub>1</sub>
Hasil :  X1

Membuat Font superscripted

Menggunakan tag <sup> . Tag ini membuat huruf jadi kecil dan diatas, biasanya digunakan dalam matematika untuk pangkat.
Contoh : 2<sup>3</sup>
Hasil : 23


Membuat Font Strong

Menggunakan tag <strong>. Untuk menebalkan huruf, mirip tag <b>
Contoh : <strong>Ini tulisan</strong>
Hasil :  Ini tulisan

Membuat Font Emphasized

Menggunakan tag <em>. Untuk memiringkan huruf, mirip tag <i>
Contoh : <em>Ini tulisan</em>
Hasil :  Ini tulisan

Membuat Font Inserted

Menggunakan tag <ins>. Untuk menggaris bawahi huruf, mirip tag <u>
Contoh : <ins>Ini tulisan</ins>
Hasil :Ini tulisan

Membuat Font Small

Menggunakan tag <small>. Untuk membuat huruf jadi kecil
Contoh : <small>Ini tulisan</small>
Hasil :  Ini tulisan

HTML Dasar

  04.58      No comments   Edit

HTML Dokumen

semua html harus diawali <!DOCTYPE html>
html diawali dengan <html> dan diakhiri dengan </html>
bagian yang terlihat di halaman web ada diantara tag <body> dan </body>

Contoh :

<!DOCTYPE html>
<html>
<head>
<title>Ini Judul Halaman</title>
</head>
<body>
<h1>Ini adalah heading 1</h1><br>
<p>Ini adalah paragraf</p>
</body>
</html>

Hasil :


HTML Heading(Teks Judul)

Judul bisa didefinisikan dengan tag <h1> , <h2>, sampai <h6> disesuaikan dengan ukuran yang ingin dibuat dari <h1> yang paling besar sampai <h6> yang paling kecil
Contoh :

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

Hasil :

HTML Paragraphs

Paragraf didefinisikan dengan tag <p>
Contoh :

<p>Ini Paragraf</p>
<p>Ini Paragraf ke 2</p>

Hasil :

HTML Links

untuk menambahkan link didefinisikan dengan tag <a> dan tambahkan attribut href untuk link tujuanya.
Contoh :

<a href="www.galsum.blogspot.com">Ini Link</a>

Hasil : Ini Link


Jika Anda membuat web offline di <a href="namafile.html">Ini Link</a> jika file yang di link 1 folder
Jika halaman yang di klik ada di folder lain <a href="namafolder/namafile.html">Ini Link</a>
Jika ada di luar folder <a href="../namafile.html">Ini Link</a>
Jika ada di folder yang berbeda <a href="../namafolder/namafile.html">Ini Link</a>

HTML Images

Tag untuk menyisipkan gambar yaitu <img>. Attribut src untuk namafile(contoh : apel.jpg, nanas.png), attribute width untuk mengatur lebar dan attribute height untuk mengatur tinggi
Contoh :

<img src="apel.jpg" width="200" height="100" />

hasil :

src="apel.jpg" untuk nama filenya, jika membuat web offline harus 1 folder dengan file html nya, kalau diluar folder src="../apel.jpg", kalau di dalam folder src="namafolder/apel.jpg" .
width="200" ini untuk mengatur lebarnya
height="100" ini untuk mengatur tingginya

Pengenalan HTML

  04.56      No comments   Edit


Apa Itu HTML?

HTML singkatan dari Hyper Text Markup Language yaitu bahasa pemrograman dasar yang digunakan untuk membuat sebuah web.

HTML terbuat dari beberapa tag untuk membuat sebuah halaman web. tag selalu diawali < ... > dan diakhiri dengan </ ... >, kebanyakan tag selalu berpasangan.
Contoh : <html> dengan </html> , <p> dengan </p>, <h1> dengan </h1>, <font> dengan </font>

Dalam sebuah tag ada yang namanya attribut, yang fungsinya memberikan informasi tambahan terhadap tag tersebut(menambahkan fungsi tertentu)
Contoh : pada tag <font color="blue" size="8"> color adalah attribut dan ="blue" adalah valuenya, size adalah attribut dan ="8". color dan size adalah attribut dari tag <font>

HTML dibuat dengan teks editor(contoh : notepad) di save dengan ekstensi .html, dan bisa di cek hasilnya menggunakan browser(contoh : Google Chrome)

Contoh script HTML :
<!DOCTYPE html>
<html>
<head>
<title>Ini Judul Halaman</title>
</head>
<body>
<h1>Ini adalah heading 1</h1><br>
<p>Ini adalah paragraf</p>
</body>
</html>

<!DOCTYPE html> mendefinisikan dokumen ini menjadi HTML5
<Html> tag halaman HTML, ini tag yang wajib ada
<Head> tag berisi informasi meta tentang dokumen
<Title> tag yang mendefinisikan judul untuk halaman web
<Body> tag berisi konten halaman yang terlihat
<H1> tag mendefinisikan judul besar
<p>  tag mendefinisikan sebuah paragraf

Script tadi jika dilihat menggunakan browser :
Langganan: Komentar (Atom)