tag:blogger.com,1999:blog-35067470340336821082024-03-13T04:25:56.382-07:00Inspire Use AllSebuah tulisan tangan sederhana yang mampu memberikan inspirasi bagi kita semua
Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.comBlogger29125tag:blogger.com,1999:blog-3506747034033682108.post-66079649731738114852012-12-07T04:44:00.001-08:002012-12-07T04:48:38.569-08:00Membuat Dropdown MenuDropdown menu sering sekali muncul pada halaman sebuah web. Fungsinya sangat vital yaitu sebagai tombol navigasi yang sering dipakai dalam suatu halaman web. Misal menu page About Us jika diklik akan menuju ke page about us, dan sebagainya.<br />
Untuk menjelaskannya mungkin agak rumit, lebih jelasnya saya akan memraktekkan cara membuat menu dropdown pada halaman web.<br />
<br />
Krtik script dibawah ini kemudian simpan dengan ekstensi<b> .html</b>. Saya akan menyimpan dengan nama <b>index.html </b>:<br />
<br />
<br />
<span style="font-family: Courier New, Courier, monospace;"><html></span><br />
<span style="font-family: Courier New, Courier, monospace;"><head></span><br />
<span style="font-family: Courier New, Courier, monospace;"><link href="style.css" rel="stylesheet" type="text/css"></span><br />
<span style="font-family: Courier New, Courier, monospace;"></head></span><br />
<span style="font-family: Courier New, Courier, monospace;"><body></span><br />
<span style="font-family: Courier New, Courier, monospace;"><ul id="nav"></span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="">Home</a></li></span><br />
<span style="font-family: Courier New, Courier, monospace;"> <li><a href="">About</a></span><br />
<span style="font-family: Courier New, Courier, monospace;"> <ul></span><br />
<span style="font-family: Courier New, Courier, monospace;"> <li><a href="">Facebook</a></li></span><br />
<span style="font-family: Courier New, Courier, monospace;"> <li><a href="">Twitter</a></li></span><br />
<span style="font-family: Courier New, Courier, monospace;"> </ul></span><br />
<span style="font-family: Courier New, Courier, monospace;"> </li></span><br />
<span style="font-family: Courier New, Courier, monospace;"> <li><a href="">Contact</a></span><br />
<span style="font-family: Courier New, Courier, monospace;"> <ul></span><br />
<span style="font-family: Courier New, Courier, monospace;"> <li><a href="">Email</a></li></span><br />
<span style="font-family: Courier New, Courier, monospace;"> <li><a href="">Mobile</a></li></span><br />
<span style="font-family: Courier New, Courier, monospace;"> </ul></span><br />
<span style="font-family: Courier New, Courier, monospace;"> </li></span><br />
<span style="font-family: Courier New, Courier, monospace;"> <li><a href="">Post Feed</a></span><br />
<span style="font-family: Courier New, Courier, monospace;"> <ul></span><br />
<span style="font-family: Courier New, Courier, monospace;"> <li><a href="">Via Web</a></li></span><br />
<span style="font-family: Courier New, Courier, monospace;"> <li><a href="">Via Phone</a></li></span><br />
<span style="font-family: Courier New, Courier, monospace;"> <li><a href="">Via RSS</a></li></span><br />
<span style="font-family: Courier New, Courier, monospace;"> </ul></span><br />
<span style="font-family: Courier New, Courier, monospace;"> </li></span><br />
<span class="Apple-tab-span" style="font-family: Courier New, Courier, monospace; white-space: pre;"> </span><br />
<span style="font-family: Courier New, Courier, monospace;"></ul></span><br />
<span style="font-family: Courier New, Courier, monospace;"></body></span><br />
<span style="font-family: Courier New, Courier, monospace;"></html></span><br />
<br />
Kemudian buat file baru dengan ektensi <b>.css</b>, saya akan memberi nama<b> style.css</b>. File css ini berguna untuk membuat tampilan lebih menarik.<br />
<br />
<br />
<span style="font-family: Courier New, Courier, monospace;">ul {</span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>margin: 0;</span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 0;</span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>list-style: none;</span><br />
<span style="font-family: Courier New, Courier, monospace;">}</span><br />
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;">ul li {</span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>position: relative;</span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>float: left;</span><br />
<span style="font-family: Courier New, Courier, monospace;"> width: 100px;</span><br />
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;">}</span><br />
<span style="font-family: Courier New, Courier, monospace;">li ul {</span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>position: absolute;</span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>top: 30px;</span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>display: none;</span><br />
<span style="font-family: Courier New, Courier, monospace;">}</span><br />
<span style="font-family: Courier New, Courier, monospace;">ul li a {</span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>display: block;</span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>text-decoration: none;</span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>line-height: 20px;</span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>color: #000;</span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 5px;</span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background: #CC0;</span><br />
<span style="font-family: Courier New, Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>margin: 0 2px;</span><br />
<span style="font-family: Courier New, Courier, monospace;">}</span><br />
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;">ul li a:hover { background: #66F; }</span><br />
<span style="font-family: Courier New, Courier, monospace;">li:hover ul, li.over ul { display: block; }</span><br />
<br />
Jalankan file<b> index.html </b>ke browser kesayangan anda. File<b> index.html</b> dan <b>style.css</b> usahakan satu folder. Untuk tampilannya adalah sebagai berikut :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-7ahBrOHxaTU/UMHk6mC6NhI/AAAAAAAAAVs/otFwRPwW7ls/s1600/dropdown+menu.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Membuat Dropdown Menu" border="0" height="227" src="http://2.bp.blogspot.com/-7ahBrOHxaTU/UMHk6mC6NhI/AAAAAAAAAVs/otFwRPwW7ls/s320/dropdown+menu.jpg" title="Membuat Dropdown Menu" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Pahami contoh sederhana diatas, akan lebih paham jika anda mencobanya.<br />
Semoga bermanfaat !!!<br />
<br />Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com11tag:blogger.com,1999:blog-3506747034033682108.post-6952998787876789212012-12-01T23:51:00.001-08:002012-12-01T23:55:07.271-08:00Belajar HTML Membuat Text AreaText area hampir mirip dengan text box. Perbedaannya adalah text area lebih dapat banyak menampung sebuah text lebih dari satu baris dari pada text box. Baca juga artikel tentang "<a href="http://creativitywhitoutlimits.blogspot.com/2012/11/belajar-html-membuat-text-box.html">Belajar HTML Membuat Text Box</a>".<br />
<br />
Mari saya akan contohkan membuat text area :<br />
<br />
<br />
<span style="font-family: Courier New, Courier, monospace;"><html></span><br />
<span style="font-family: Courier New, Courier, monospace;"><head><title>Belajar HTML Membuat Text Area</title></head></span><br />
<span style="font-family: Courier New, Courier, monospace;"><body></span><br />
<span style="font-family: Courier New, Courier, monospace;"><h1>Masukkan Alamat Anda</h1></span><br />
<span style="font-family: Courier New, Courier, monospace;"><form method="post" action=""></span><br />
<span style="font-family: Courier New, Courier, monospace;"><textarea name="alamat" rows="5" cols="40"></textarea></span><br />
<span style="font-family: Courier New, Courier, monospace;"><br/><br/></span><br />
<span style="font-family: Courier New, Courier, monospace;"><input type="submit" name="submit" value="Kirim"/></span><br />
<span style="font-family: Courier New, Courier, monospace;"></form></span><br />
<span style="font-family: Courier New, Courier, monospace;"></body></span><br />
<span style="font-family: Courier New, Courier, monospace;"></html></span><br />
<br />
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: inherit;">Simpan script diatas dengan ektensi<b> .html</b>. Jalankan pada browser yang anda sukai. Misal saya akan menyimpan dengan nama<b> index.html </b>kemudian akan saya jalankan pada browser <b>Mozilla Firefox</b>.</span><br />
<span style="font-family: inherit;">Untuk tampilannya sebagai berikut :</span><br />
<span style="font-family: inherit;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-CaHczjE0ozM/ULsHzx3ocHI/AAAAAAAAAUM/7Tj7-wOICI0/s1600/textarea.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML Membuat Text Area" border="0" height="245" src="http://4.bp.blogspot.com/-CaHczjE0ozM/ULsHzx3ocHI/AAAAAAAAAUM/7Tj7-wOICI0/s320/textarea.jpg" title="Belajar HTML Membuat Text Area" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Penjelasan :</div>
<div class="separator" style="clear: both; text-align: left;">
Tag yang digunakan dalam membuat text area adalah </div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><textarea name="alamat" rows="5" cols="40"></textarea></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: inherit;">Anda bisa mengubah ukuran sesuai dengan keinginan anda (rows dan cols).</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: inherit;">Semoga bermanfaat !!!</span></div>
<span style="font-family: inherit;"><br /></span>Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com8tag:blogger.com,1999:blog-3506747034033682108.post-84092703166595067232012-11-30T17:25:00.002-08:002012-11-30T18:28:56.709-08:00Belajar HTML Membuat Text Box PasswordDalam artikel saya sebelumnya pernah saya bahas tentang "<a href="http://creativitywhitoutlimits.blogspot.com/2012/11/belajar-html-membuat-text-box.html">Belajar HTML Membuat Text Box</a>", kali ini saya akan contohkan membuat text box yang digunakan untuk input data rahasia seperti password. Text box ini sering digunakan untuk keperluan login, seperti ketika anda login ke akun <b>Blogger</b> anda atau <b>Email</b> anda pasti untuk data pasword tulisan menjadi bentuk simbol. Itu karena text bersifat rahasia jadi hanya berupa simbol saja yang terlihat.<br />
<br />
Berikut saya akan contohkan membuat text box password.<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head>
<title> Belajar HTML Membuat Text Box </title>
</head>
<body>
<h1>
Form </h1>
<form method="post" action="">
Password <input type="password" name="passwordgue"/>
<input type="submit" name="submit" value="Kirim"/>
</form>
</body>
</html>
</textarea><br />
<br />
Untuk membuat inputan password berikut tag-nya :<br />
<span style="font-family: Courier New, Courier, monospace;"><input type="password" name="passwordgue"/></span><br />
<br />
<span style="font-family: inherit;">Untuk tampilannya setelah dijalankan di Mozilla Firefox sebagai berikut :</span><br />
<span style="font-family: inherit;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-xsj1azdzLBE/ULlcCon5cnI/AAAAAAAAATs/FEdgzsvryR4/s1600/password.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Belajar HTML Membuat Text Box Password" border="0" height="308" src="http://1.bp.blogspot.com/-xsj1azdzLBE/ULlcCon5cnI/AAAAAAAAATs/FEdgzsvryR4/s400/password.jpg" title="Belajar HTML Membuat Text Box Password" width="400" /></a></div>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: inherit;">Mudah bukan membuat text box di HTML. Semoga artikel ini bermanfaat !!!</span>Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com7tag:blogger.com,1999:blog-3506747034033682108.post-38260562609355944202012-11-30T01:42:00.001-08:002012-11-30T01:59:00.707-08:00Belajar HTML Membuat Text Box<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-QcDnmjpDYoE/ULh6QE5Q0-I/AAAAAAAAASI/57ikzhr3Z_w/s1600/textbox.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="Belajar HTML Membuat Text Box" border="0" height="306" src="http://4.bp.blogspot.com/-QcDnmjpDYoE/ULh6QE5Q0-I/AAAAAAAAASI/57ikzhr3Z_w/s400/textbox.jpg" title="Belajar HTML Membuat Text Box" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span><br />
<span style="font-family: inherit;">Pernahkah anda melihat tampilan seperti gambar diatas?
Namanya adalah text box, kadang ini dipakai dalam membuat form seperti untuk pendaftaran atau memasukkan suatu data.
Daripada berbasa-basi langsung saya akan contohkan cara membuat text box sederhana.</span><b></b>
<br />
<span style="font-family: inherit;"><br /></span>
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head>
<title> Belajar HTML Membuat Text Box </title>
</head>
<body>
<h1>
Masukkan Nama Anda </h1>
<form method="post" action="">
Nama <input type="text" name="nama"/>
<input type="submit" name="submit" value="Kirim"/>
</form>
</body>
</html>
</textarea><br />
<br />
Simpan script diatas dengan nama <b>index.html</b> atau terserah anda yang penting ekstensi harus <b>.html</b>. Jalankan pada browser pilihan anda, saya memakai Mozilla Firefox versi terbaru.<br />
Untuk tampilannya sebagai berikut :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-QcDnmjpDYoE/ULh6QE5Q0-I/AAAAAAAAASI/57ikzhr3Z_w/s1600/textbox.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML Membuat Text Box" border="0" height="245" src="http://4.bp.blogspot.com/-QcDnmjpDYoE/ULh6QE5Q0-I/AAAAAAAAASI/57ikzhr3Z_w/s320/textbox.jpg" title="Belajar HTML Membuat Text Box" width="320" /></a></div>
<br />
<br />
<br />
Komponen text box dibuat dengan menuliskan tag berikut :<br />
<span style="font-family: Courier New, Courier, monospace;"><input type="text" name="namakomponen"/></span><br />
Dengan atribut name diisi dengan nama komponen yang sesuai dengan data isian. Nama komponen harus dituliskan karena akan digunakan pada script pengolah data nantinya.<br />
<br />
<br />
Untuk membuat tombol kirim berikut tag-nya :<br />
<span style="font-family: Courier New, Courier, monospace;"><input type="submit" name="submit" value="Kirim"/></span><br />
Tombol ini nantinya akan digunakan untuk mengirim data ke script pengolah data.<br />
<br />
<br />
Untuk mengatur lebar field text box yaitu dengan menambahkan atribut size="nilai", nilai disini adalah bilangan integer atau angka.<br />
Berikut contohnya :<br />
<span style="font-family: Courier New, Courier, monospace;"><input type="text" name="nama" size="40"/></span><br />
<br />
Atribut lain yang harus dipahami adalah value="nilai". Atribut ini digunakan untuk menampilkan nilai ke dalam text box.<br />
Berikut contohnya :<br />
<span style="font-family: Courier New, Courier, monospace;"><input type="text" name="nama" size="40" value="Yogo Prestiyanto"/></span><br />
Jika anda menambahkan atribut value seperti contoh diatas, maka akan menjadi seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-v_rBPhaxzg8/ULh97cBx45I/AAAAAAAAASc/El2ghQ5Z130/s1600/textbox1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Belajar HTML Membuat Text Box" border="0" height="305" src="http://4.bp.blogspot.com/-v_rBPhaxzg8/ULh97cBx45I/AAAAAAAAASc/El2ghQ5Z130/s400/textbox1.jpg" title="Belajar HTML Membuat Text Box" width="400" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Semoga artikel ini bermanfaat !!!<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com13tag:blogger.com,1999:blog-3506747034033682108.post-11521109184945897542012-11-29T03:14:00.001-08:002012-11-29T03:21:14.127-08:00Belajar HTML Membuat Radio ButtonPernahkah anda melihat sebuah halaman web yang isinya menampilkan sebuah pilihan yang bisa kita pilih salah satunya. Namanya adalah "Radio Button". Fungsinya yaitu digunakan untuk input data yang sifatnya optional atau pilihan.<br />
Berikut contoh dari radio button sederhana yang telah saya buat.<br />
<br />
Untuk script HTML-nya dibawah ini :<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10">
<html>
<head><title>Belajar HTML Membuat Radio Button</title></head>
<body>
<h1>Pilih Jenis Kelamin</h1>
<form method="post" action="#">
<input type="radio" name="jk" value="Laki"/>Laki-laki<br/>
<input type="radio" name="jk" value="Perempuan"/>Perempuan<br/>
<input type="radio" name="jk" value="Lainnya"/>Lainnya<br/>
<br/>
<input type="submit" name="submit" value="Kirim"/>
</form>
</body>
</html>
</textarea>
<br />
<br />
Simpan script diatas dengan nama <b>index.html </b>atau terserah anda yang penting ektensi harus<b> .html</b>.<br />
Kemudian jalankan pada browser yang anda sukai, kali ini saya memakai Mozilla Firefox.<br />
<br />
Untuk tampilannya adalah sebagai berikut :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-PNSxrb8ul08/ULdCd--kR8I/AAAAAAAAAR0/XhU6RLwfXxk/s1600/radiobutton.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Belajar HTML Membuat Radio Button" border="0" height="302" src="http://4.bp.blogspot.com/-PNSxrb8ul08/ULdCd--kR8I/AAAAAAAAAR0/XhU6RLwfXxk/s400/radiobutton.jpg" title="Belajar HTML Membuat Radio Button" width="400" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Penjelasan :<br />
Dari setiap tag diatas, setiap komponen radio button memiliki nama komponen yang sama yaitu <i>name="jk"</i>. Karena ketiga kelompok ini masuk kedalam satu kelompok yaitu jk yang sama, yang nantinya akan dipilih.<br />
<br />
Semoga bermanfaat !!!Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com16tag:blogger.com,1999:blog-3506747034033682108.post-57864986758733925742012-11-28T06:44:00.000-08:002012-11-28T06:54:50.432-08:00Penyebab Demam Berdarah<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/--oqdqPs_qMo/ULYiIDM4HXI/AAAAAAAAARg/vnfrP5ZLOBo/s1600/stop+db.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Penyebab Demam Berdarah" border="0" height="320" src="http://2.bp.blogspot.com/--oqdqPs_qMo/ULYiIDM4HXI/AAAAAAAAARg/vnfrP5ZLOBo/s320/stop+db.jpg" title="Penyebab Demam Berdarah" width="245" /></a></div>
Musim hujan sudah tiba, itu artinya akan banyak genangan-genangan air dimana-mana. Hati-hati karena akan banyak nyamuk yang mencari tempat untuk bertelur, terutama nyamuk penyebab demam berdarah yaitu nyamuk aedes aegypti. Ada juga ternyata nyamuk yang lain yaitu nyamuk aedes albopictus. Demam berdarah adalah penyakit berbahaya dan bisa menyerang siapa saja. Penyakit ini disebabkan oleh virus dengue selanjutnya ditularkan melalui gigitan nyamuk <b>aedes aegypti</b> dan <b>aedes albobictus</b>.<br />
Nyamuk ini bisa menggigit siapa saja, akan tetapi jika kita mampu menjaga kebersihan lungkungan dan mengurangi perkembangbiakan dari si nyamuk itu maka Insya Allah kita akan aman dari gigitan nyamuk yang mengakibatkan demam berdarah.<br />
Mari kita selalu mengecek apakah tempat-tempat yang berpotensi untuk sarang nyamuk dapat kita cegah perkembangbiakannya. Contoh tempat-tempat yang bisa untuk sarang nyamuk antara lain bak penampungan air, bak mandi, kaleng bekas, bungkus plastik, dll. Perlu diketahui bahwa nyamuk aedes aegypti ini sangat suka dengan air yang jernih.<br />
<br />
Gejala-gejala terkena demam berdarah :<br />
<ul>
<li>Mendadak badan panas tinggi selama 2 sampai 7 hari</li>
<li>Terlihat lemah dan lesu</li>
<li>Timbul bintik-bintik merah pada kulit</li>
<li>Merasakan nyeri di ulu hati</li>
<li>Terjadi pendarahan di hidung atau mimisan</li>
<li>Terjadi muntah darah dan berak darah</li>
</ul>
<div>
Agar tidak terlalu parah kenali gejala-gejala demam berdarah diatas, supaya kita mampu mencegahnya dan mungkin akan menyelamatkan nyawa orang yang kita cintai. </div>
<div>
Apabila sudah parah penderita merasa gelisah, tangan dan kaki dingin serta berkeringat. Segeralah tolong mereka yang merasakan gejala-gejala ini ke rumah sakit terdekat.</div>
<div>
<br /></div>
<div>
Berikut pertolongan jika anda melihat langsung penderita gejala demam berdarah :</div>
<div>
- Beri minum sebanyak-banyaknya</div>
<div>
- Kompres agar panasnya turun</div>
<div>
- Berikan obat penurun panas seperti paracetamol</div>
<div>
- Segera antarkan ke Puskesmas, atau Rumah Sakit terdekat</div>
<div>
<br /></div>
<div>
Berantas jentik nyamuk dan hindari gigitan nyamuk Demam Berdarah dengan cara 3M Plus, yaitu :</div>
<div>
<ul>
<li>Menguras tempat-tempat penampungan air (bak mandi/WC, tempayan, ember, vas bunga, dsb) seminggu sekali.</li>
<li>Menutup rapat semua tempat penampungan air seperti ember,gentong, dan drum.</li>
<li>Mengubur barang-barang bekas yang ada di sekitar atau di luar rumah yang dapat menampung air hujan. Seperti kaleng bekas, botol, plastik, dan tempurung kelapa.</li>
<li>Menaburkan bubuk abate atau altosid 2-3 bulan sekali di tempat air yang sulit dikuras atau tempat sulit air.</li>
<li>Memelihara ikan pemakan jentik nyamuk.</li>
<li>Cegah gigitan nyamuk dengan menggunakan obat nyamuk, memakai obat repelant, memasang kawat kasa pada jendela dan ventilasi, dsb.</li>
</ul>
<div>
<i><span style="font-size: xx-small;">Dikutip dari Brosur WASPADA DEMAM BERDARAH CEGAH DENGAN 3M PLUS! oleh : Pusat Komunikasi Publik Setjend Depkes RI</span></i></div>
</div>
<div>
<i><span style="font-size: xx-small;"><br /></span></i></div>
<div>
Semoga artikel diatas dapat bermanfaat bagi kita semua. Ingat "mencegah lebih baik daripada mengobati". Sehatlah selalu dengan memperhatikan kesehatan dan kebersihan lingkungan sekitar.</div>
Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com4tag:blogger.com,1999:blog-3506747034033682108.post-15317631926210858462012-11-26T17:21:00.001-08:002012-11-26T17:21:50.578-08:00Tipe Data dan Variabel Pada JavascriptArtikel saya tentang "Javascript" sebelumnya sudah pernah saya contohkan tentang <a href="http://creativitywhitoutlimits.blogspot.com/2012/11/menampilkan-javacript-pada-html.html">Menampilkan Javascript Pada HTML</a> , <a href="http://creativitywhitoutlimits.blogspot.com/2012/11/penulisan-javascript.html">Penulisan Javascript</a>. Lanjut yukk, biar semakin paham dengan javascript, tak kenal maka tak sayang, kata pepatah. Hehehe.<br />
Dalam artikel ini saya memakai judul Tipe Data Variabel Pada Javascript. Mari akan saya bahas biar lebih jelasnya.<br />
Variabel digunakan untuk menyimpan data atau informasi. Sebuah nilai variabel dapat diubah. Ketentuan nama variabel dalam javacript adalah sebagai berikut :<br />
<ul>
<li>Variabel harus terdiri dari rangkaian huruf, angka, dan underscore.</li>
<li>case sensitive, artinya membedakan huruf kecil dan besar.</li>
<li>Harus diawali dengan huruf.</li>
<li>Tidak harus deklarasi variabel dan tercipta sendiri ketika pertama kali digunakan.</li>
<li>Berbentuk varian (tidak terikat pada satu tipe data, tetapi dapat diisi oleh tipe data yang berbeda dengan awalnya ketika pertama kali digunakan).</li>
</ul>
<div>
Berikut contoh mendeklarasikan variabel pada javascript :</div>
<div>
Variabel diawali dengan var.</div>
<div>
Contoh :</div>
<div>
var strname=nilai;</div>
<div>
<br /></div>
<div>
Variabel juga bisa dibuat tanpa harus menggunakan var.</div>
<div>
Contoh :</div>
<div>
strname=nilai;</div>
<div>
<br /></div>
<div>
Javascript mempunyai tiga tipe data :</div>
<div>
<ul>
<li>strings</li>
<li>numbers</li>
<li>booleans : true false</li>
</ul>
<div>
Contoh :</div>
</div>
<div>
var strname = "Yogo";</div>
<div>
atau bisa ditulis, strname="Yogo";</div>
<div>
Contoh diatas adalah memberikan nilai "Yogo" pada variabel <b>strname</b>.</div>
<div>
<br /></div>
<div>
Saya akan berikan contoh penggunaan variabel agar lebih jelasnya :</div>
<div>
<br /></div>
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head><title>Belajar Variabel Javascript</title></head>
<body>
<script type="text/javascript">
p=1000;
document.write("<p>
panjang adalah="+p+"</p>
");
l=200;
document.write("<p>
lebar adalah="+l+"</p>
");
</script>
</body>
</html>
</textarea><br />
<br />
Seperti contoh yang lain di artikel saya. Ketik script diatas simpan dengan nama <b>index.html</b>. Kemudian jalankan pada browser kesayangan anda.<br />
<br />
Untuk tampilannya akan seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-FtdI5hkVnsE/ULQU0RFjJCI/AAAAAAAAARM/TVulNv6u49Q/s1600/var.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Tipe Data dan Variabel Pada Javascript" border="0" height="259" src="http://4.bp.blogspot.com/-FtdI5hkVnsE/ULQU0RFjJCI/AAAAAAAAARM/TVulNv6u49Q/s320/var.JPG" title="Tipe Data dan Variabel Pada Javascript" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Variabel <b>p=1000</b> dipanggil untuk ditampilkan di <b>panjang adalah=</b><br />
Variabel <b>l=200</b> dipanggil untuk ditampilkan di <b>lebar adalah=</b><br />
<br />
<br />
<br />
<br />
Semoga bermanfaat !!Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com4tag:blogger.com,1999:blog-3506747034033682108.post-31207231678420923432012-11-25T16:58:00.002-08:002012-11-25T17:01:26.951-08:00Penulisan JavascriptDalam artikel saya sebelumnya pernah saya bahas tentang <a href="http://creativitywhitoutlimits.blogspot.com/2012/11/menampilkan-javacript-pada-html.html">Menampilkan Javacript Pada HTML</a>. Kali ini saya akan menjelaskan penulisan javascript di HTML.<br />
Ada 3 cara untuk menuliskan Javascript :<br />
<br />
<ol>
<li>Diletakkan diantara tag <head></head></li>
<li>Diletakkan didalam <body></body></li>
<li>Eksternal</li>
</ol>
<div>
<br /></div>
<div>
<h4>
1. Script diantara tag <head></head></h4>
</div>
<div>
Script diantara tag <head></head> akan dieksekusi ketika dipanggil (berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu. Meletakkan script didalam <head> script otomatis akan di load terlebih dahulu sebelum digunakan/dipanggil.</div>
<div>
Berikut contoh untuk meletakkan Javascript didalam <head> :</div>
<div>
<br /></div>
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head>
<script type="text/javascript">
function message()
{
alert("Alert dipanggil ketika event onload");
}
</script>
</head>
<body onload="message()">
</body>
</html>
</textarea><br />
<br />
Simpan script diatas dengan ektensi .html. Jalankan pada browser kesayangan anda. Maka untuk tampilannya seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-yTiChnQhjXs/ULK4fQibzQI/AAAAAAAAAPU/iHc6Z2-61vE/s1600/js1.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Penulisan Javascript" border="0" height="238" src="http://1.bp.blogspot.com/-yTiChnQhjXs/ULK4fQibzQI/AAAAAAAAAPU/iHc6Z2-61vE/s400/js1.JPG" title="Penulisan Javascript" width="400" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h4>
2. Script didalam <body></body></h4>
Javascript akan dieksekusi saat halaman di load sampai pada bagian <body>. Saat menuliskan script didalam <body> maka antara isi halaman dan script javascript dijadikan satu bagian.<br />
Daripada bingung langsung saya kasih contoh javascript didalam <body>.<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Pesan akan muncul ketika halaman di load");
</script>
</body>
</html>
</textarea><br />
<br />
Simpan script diatas dengan ektensi <b>.html</b>. Jalankan pada browser dan untuk tampilannya akan seperti dibawah ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ybqr1YJrdt4/ULK6mvqFPFI/AAAAAAAAAPc/XRwEgXr37jo/s1600/js2.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Penulisan Javascript" border="0" height="291" src="http://2.bp.blogspot.com/-ybqr1YJrdt4/ULK6mvqFPFI/AAAAAAAAAPc/XRwEgXr37jo/s400/js2.JPG" title="Penulisan Javascript" width="400" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h4>
3. Eksternal</h4>
Fungsi dari cara eksternal adalah jika ingin menjalankan javascript yang sama dalam beberapa kali pada halaman yang berbeda. Daripada harus menulis ulang script yang ingin dibuat di setiap halaman.<br />
Menggunakan cara ini berarti script javascript dan html akan terpisah. Langsung saya suka memberi contoh daripada banyak teori.<br />
Script dibawah ini adalah javascript yang akan digunakan.<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10">document.write("Pesan akan muncul ketika halaman di load");
</textarea><br />
<br />
Simpan script diatas dengan nama <b>contoh.js</b><br />
Kemudian membuat halaman html seperti dibawah ini.<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head>
</head>
<body>
<script src="contoh.js">
</script>
<p>
Contoh diatas adalah script javascript contoh.js menggunakan cara eksternal</p>
</body>
</html>
</textarea><br />
<br />
Simpan script diatas dengan nama <b>index.html</b>, buat satu folder bersama file <b>contoh.js</b>. Kemudian jalankan <b>index.html </b>pada browser, untuk tampilannya sebagai berikut :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-0A0csyUX3lg/ULK9pw4SbfI/AAAAAAAAAPw/6Up9MDx_o88/s1600/js3.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Penulisan Javascript" border="0" height="261" src="http://2.bp.blogspot.com/-0A0csyUX3lg/ULK9pw4SbfI/AAAAAAAAAPw/6Up9MDx_o88/s400/js3.JPG" title="Penulisan Javascript" width="400" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Sudahkah anda paham dengan penjelasan dan contoh penulisan pada javascript diatas? Jika belum paham silahkan jangan ragu dan malu untuk bertanya dan berkomentar.<br />
Semoga bermanfaat!!!Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com8tag:blogger.com,1999:blog-3506747034033682108.post-32839181086602102532012-11-24T06:26:00.001-08:002012-11-25T05:58:13.319-08:00Manfaat Kopi Bagi Kesehatan<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-oAKqBLGbi2g/ULDSVGMbzvI/AAAAAAAAAPA/l3S74A3JOTA/s1600/kopikopi.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Manfaat Kopi Bagi Kesehatan" border="0" height="300" src="http://1.bp.blogspot.com/-oAKqBLGbi2g/ULDSVGMbzvI/AAAAAAAAAPA/l3S74A3JOTA/s400/kopikopi.jpg" title="Manfaat Kopi Bagi Kesehatan" width="400" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Taukah anda tentang minuman yang berwarna hitam, beraroma khas dan jika diminum terasa nikmat di mulut. Jawabannya adalah "Kopi". Kopi merupakan suatu jenis minuman berwarna hitam pekat yang mampu memberikan cita rasa unik bagi yang meminumnya. Bahkan tidak sedikit orang menjadi kecanduan karena cita rasa kopi karena adanya kandungan kafein yang terdapat dalam kopi. Kafein adalah senyawa kimia alkaloid yang dikenal sebagai trimetilsantin dengan rumus molekul C8H10N4O2. Jumlah kandungan zat kafein yang terdapat dalam kopi adalah antara 1 hingga 1,5%. Wow<br />
Saya adalah pecinta kopi, apakah sobat juga ada yang pecinta kopi seperti saya?<br />
Dari berbagai penelitian oleh ilmuwan-ilmuwan di dunia bahwa ternyata kopi dapat mencegah berbagai penyakit dalam tubuh kita. Meminum kopi satu cangkir atau dua cangkir sehari sebenarnya tidak berbahaya bagi kesehatan. Akan tetapi palah dianjurkan.<br />
Berikut hasil penelitian para ilmuwan tentang kopi :<br />
<ul>
<li>Kopi dapat mencegah timbulnya penyakit jantung dan stroke</li>
<li>Bermanfaat mencegah penyakit diabetes dan kanker</li>
<li>Kopi mencegah kaker mulut</li>
<li>Kopi memberi manfaat untuk melindungi gigi</li>
<li>Kopi sebagai penambah energi</li>
<li>Kopi mampu mengurangi rasa depresi seseorang</li>
<li>Dapat mengurangi sakit kepala seseorang</li>
</ul>
<div>
Dari manfaat diatas tentu saja ada sisi negatifnya kopi bagi kesehatan kita. Seperti kasus Mbah Surip jaman dulu itu yang katanya terlalu banyak mengkonsumsi kopi setiap harinya. Kopi selalu disajikan bersama gula, jika gula terlalu banyak yang kita minum akan berat untuk ginjal kita dalam mengolahnya dan akan menimbulkan berbagai penyakit kemudian. Untuk itu agar kita selalu sehat minumlah kopi sewajarnya saja agar kita selalu sehat nantinya.</div>
<div>
<br /></div>
<div>
Semoga bermanfaat bagi sobat semuanya !!</div>
<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com24tag:blogger.com,1999:blog-3506747034033682108.post-41769784097229409122012-11-24T03:22:00.001-08:002012-11-24T03:28:22.193-08:00Perbedaan ID dengan CLASS<h3>
Perbedaan ID dengan CLASS</h3>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0cm;">
<b><span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">1. id<o:p></o:p></span></b></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%; mso-bidi-font-weight: bold;">ID adalah sebuah identitas untuk sebuah elemen maka
dari itu ID bersifat unik, jadi dalam satu document tidak boleh ada lebih dari
1 ID. <o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%; mso-bidi-font-weight: bold;">Contoh :<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="background-color: #f4cccc; font-family: "Times New Roman","serif"; font-size: 12pt; line-height: 150%;"><div id=”wrapper”><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="background-color: #f4cccc; font-family: "Times New Roman","serif"; font-size: 12pt; line-height: 150%;"> <div
id=”konten”> isi konten </div><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0cm; text-indent: 36.0pt;">
<span style="background-color: #f4cccc; font-family: "Times New Roman","serif"; font-size: 12pt; line-height: 150%;"><div
id=”sidebar”> isi sidebar </div><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%; mso-bidi-font-weight: bold;"><span style="background-color: #f4cccc;"></div></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0cm;">
<br /></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0cm;">
<b><span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">2. class<o:p></o:p></span></b></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%; mso-bidi-font-weight: bold;">Berbeda dengan ID, CLASS dapat dipakai untuk lebih
dari 1 elemen.<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%; mso-bidi-font-weight: bold;">Contoh :<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="background-color: #f4cccc; font-family: "Times New Roman","serif"; font-size: 12pt; line-height: 150%;"><h1>Header 1</h1><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="background-color: #f4cccc; font-family: "Times New Roman","serif"; font-size: 12pt; line-height: 150%;"><p class=”rata-kiri”> Paragraf pertama rata
kiri </p><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="background-color: #f4cccc; font-family: "Times New Roman","serif"; font-size: 12pt; line-height: 150%;"><h2>Header 2</h2><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="background-color: #f4cccc; font-family: "Times New Roman","serif"; font-size: 12pt; line-height: 150%;"><p class=”rata-kiri”> Paragraf kedua rata kiri
</p></span><b><span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;"><o:p></o:p></span></b></div>
Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com2tag:blogger.com,1999:blog-3506747034033682108.post-19417356709740093192012-11-24T01:51:00.000-08:002012-11-24T01:55:48.939-08:00Pengertian PHP<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-UvmRQt38vnU/ULCZiHboHtI/AAAAAAAAAOs/WinQyCoPwmc/s1600/PHP.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="168" src="http://3.bp.blogspot.com/-UvmRQt38vnU/ULCZiHboHtI/AAAAAAAAAOs/WinQyCoPwmc/s320/PHP.png" width="320" /></a></div>
<br />
Dalam artikel kali ini saya ingin share tentang sedikit pengertian dari PHP. PHP merupakan bahasa berbentuk script yang ditempatkan didalam dan diproses server kemudian hasilnya akan dikirim ke client menggunakan browser.<br />
Secara khusus PHP dibuat untuk membuat sebuah web dinamis. PHP mempunyai fungsi yang sama dengan script-script seperti Active Server Page (ASP), Cold Fusion, dan Perl.<br />
PHP bersaing dengan VB (Visual Basic) dan C++ untuk posisi ketiga sebagai bahasa pemrograman paling populer setelah Java dan C.<br />
PHP adalah bahasa open source dan dinyatakan sebagai software gratis oleh Free Software Foundation.<br />
<br />
Berikut ini sistem database yang didukung oleh PHP :<br />
<br />
<ol>
<li>Oracle</li>
<li>Sybase</li>
<li>mSQL</li>
<li>MySQL</li>
<li>Solid</li>
<li>Generic ODBC</li>
<li>Postgres SQL</li>
</ol>
<div>
Sekian semoga artikel sederhana tentang PHP ini bermanfaat bagi kita semua.</div>
Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com4tag:blogger.com,1999:blog-3506747034033682108.post-23384953104896099412012-11-23T09:06:00.003-08:002012-11-23T09:12:17.747-08:00Membuat Dropdown Menu Dengan CSSPada artikel kali ini saya ingin mencontohkan membuat dropdown menu dengan css.<br />
Fungsi dari dropdown menu sendiri adalah untuk menghemat ruang pada web kita karena terlalu banyaknya link atau teks yang ditampilkan di halaman web.<br />
Langsung saja saya suka memberi contoh daripada bertele-tele dengan tulisan.<br />
Lihat contoh dibawah ini kalau perlu praktekkan sendiri :<br />
<br />
Persiapan, saya akan membuat 2 file yaitu terdiri dari file<b> index.html</b>. Untuk file css nya akan terpisah dengan nama file<b> style.css</b>.<br />
<br />
Untuk file<b> index.html </b>berikut scriptnya :<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10"><html>
<html>
<head>
<title> Dropdown Menu </title>
<link rel="stylesheet" type="text/css" href="dropdown.css">
</head>
<body>
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="#"> Menu </a>
<ul>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
</ul>
<li>
</ul>
</div>
</div>
<body>
</html>
</textarea><br />
<br />
Untuk file <b>style.css</b> berikut scriptnya :<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10">body {
background:black;}
#navMenu{
margin:0;
padding:0;
width:180px;
height:30px;
cursor:pointer;
background-color:red;
color:#ffffff;
font:normal 20px/100% Georgia,Serif;
text-decoration:none;
outline:none;
vertical-align:middle;
float:left;
text-align: center;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
vertical-align: baseline;
border-radius:10px;
}
#navMenu:hover{
background: #d57ea5;
background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
border-radius:10px;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
}
#navMenu ul li a {
text-align:center;
font-family:"Comic Sans";
text-decoration:none;
height:30px;
width:180px;
display:block;
color:#404040;
}
#navMenu ul li a:hover {
background: #d57ea5;
background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
border-radius:10px;
}
#navMenu ul li ul{
width:180px;
height:auto;
background:pink;
box-shadow:0 1px 4px #e0e0e0;
-webkit-box-shadow:0 1px 4px #e0e0e0;
-moz-box-shadow:0 1px 4px #e0e0e0;
border:1px solid #e0e0e0;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
}
#navMenu ul li:hover ul{
visibility:visible;
}
</textarea><br />
<br />
Untuk hasil, simpan kedua file tersebut kedalam satu folder. Jalankan<b> index.html</b> pada browser kesayangan anda. Tampilannya seperti berikut ini :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-E5QK506xwFI/UK-rz6rvgWI/AAAAAAAAAOY/N1LUl-QVVk4/s1600/dess.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Membuat Dropdown Menu Dengan CSS" border="0" height="285" src="http://2.bp.blogspot.com/-E5QK506xwFI/UK-rz6rvgWI/AAAAAAAAAOY/N1LUl-QVVk4/s320/dess.jpg" title="Membuat Dropdown Menu Dengan CSS" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
File <b>style.css</b> hanya memberikan efek warna supaya tampilan dari dropdown menu agar lebih menarik.<br />
Jika anda mungkin malas mencoba file diatas berikut saya akan berikan file <b>index.html</b> dan <b>style.css</b> secara gratis.<br />
<br />
<div style="text-align: center;">
<a href="http://www.mediafire.com/?aijshcajslui5dm">DOWNLOAD FILE DROPDOWN MENU CSS</a></div>
<br />
<br />
<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com1tag:blogger.com,1999:blog-3506747034033682108.post-91829060371674866802012-11-22T17:58:00.001-08:002012-11-22T17:58:32.651-08:00Belajar Format Teks di HTMLDalam artikel saya sebelumnya pernah saya contohkan membuat sebuah paragraf di HTML "<a href="http://creativitywhitoutlimits.blogspot.com/2012/11/belajar-membuat-paragraflink-heading-di.html">Belajar Membuat Paragraf,Link,& Heading di HMTL</a>". Kali ini saya akan memberi contoh cara menulis format teks di HTML. Contoh dari format teks yang sering digunakan antara lain cetak tebal,huruf miring,dll.<br />
<br />
Daripada berteori langsung saja saya praktekkan :D<br />
<br />
Lihat script dibawah ini :<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head>
<title>Belajar Format Teks</title>
</head>
<body>
<b> Berfungsi untuk Menebalkan teks</b><br/>
<strong>Sama fungsinya dengan tag b yaitu menebalkan </strong><br/>
<i>Membuat teks cetak miring</i><br/>
<em>Sama fungsinya dengan tag u yaitu untuk cetak miring teks</em><br/>
<u>Membuat teks underline atau bergaris bawah</u><br/>
</body>
</html>
</textarea><br />
<br />
Maka untuk tampilannya akan seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-jkqdw5XhvCs/UK7O-7vOgMI/AAAAAAAAAOE/1hZs7bLdjZQ/s1600/formatteks.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="246" src="http://1.bp.blogspot.com/-jkqdw5XhvCs/UK7O-7vOgMI/AAAAAAAAAOE/1hZs7bLdjZQ/s400/formatteks.JPG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Saya hanya mencontohkan tag yang sering dipakai dan populer dalam penulisan sebuah teks saja. Untuk tag-tag lainnya mungkin anda bisa bereksperimen sendiri agar lebih bisa menguasainya.<br />
Dibawah ini adalah contoh-contoh tag yang berfungsi untuk pemformatan teks pada HTML :<br />
<h4>
Format Teks Pada HTML</h4>
<table border="1">
<tbody>
<tr>
<td><b>Tag</b></td><td><b>Fungsi</b></td>
</tr>
<tr>
<td><b></b> atau <strong></strong></td><td><b>Berfungsi untuk membuat teks tebal</b></td></tr>
<tr><td><u></u> </td><td><u>Berfungsi untuk membuat teks underline atau garis bawah</u></td>
</tr>
<tr>
<td><i></i> atau <em></em></td><td><i>Berfungsi untuk membuat cetak miring</i></td>
</tr>
<tr>
<td><strike></strike></td><td><strike>Membuat teks bergaris</strike></td>
</tr>
<tr>
<td><small></small></td><td>Mendefinisikan teks kecil</td>
</tr>
<tr>
<td><sub></sub></td><td>Mendefinisikan teks subscript</td>
</tr>
<tr>
<td><sup></sup></td><td>Mendefinisikan teks superscript</td>
</tr>
<tr>
<td><ins></ins></td><td>Mendefinisikan teks yang disisipkan</td>
</tr>
<tr>
<td><del></del></td><td>Mendefinisikan teks yang dihapus</td>
</tr>
</tbody></table>
<br />
<h4>
Tag Output Komputer Pada HTML</h4>
<table border="1">
<tbody>
<tr><td><b>Tag</b></td><td><b>Fungsi</b></td></tr>
<tr><td><code></td><td>Mendefinisikan sebuah teks pada komputer</td></tr>
<tr><td><kbd></td><td>Mendefinisikan teks keyboard</td></tr>
<tr><td><samp></td><td>Mendefinisikan sampel pada komputer</td></tr>
<tr><td><var></td><td>Mendefinisikan variabel</td></tr>
<tr><td><pre></td><td>Mendefinisikan teks terformat</td></tr>
</tbody></table>
<br />
<h4>
Tag Definisi dan Kutipan Pada HTML</h4>
<table border="1">
<tbody>
<tr><td><b>Tag</b></td><td><b>Fungsi</b></td></tr>
<tr><td><abbr></td><td>Mendefinisikan singkatan atau akronim</td></tr>
<tr><td><address></td><td>Mendefinisikan kontak penulis atau pemilik dokumen</td></tr>
<tr><td><bdo></td><td>Mendefinisikan arah teks</td></tr>
<tr><td><dfn></td><td>Mendefinisikan sebuah definisi</td></tr>
<tr><td><cite></td><td>Mendefinisikan judul karya</td></tr>
<tr><td><q></td><td>Mendefinisikan kutipan pendek atau inline</td></tr>
<tr><td><blockquote></td><td>Mendefinisikan bagian yang dikutip dari sumber lain</td></tr>
</tbody></table>
<br /><div>
Selamat mencoba !!</div>
Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com39tag:blogger.com,1999:blog-3506747034033682108.post-16018792056028250702012-11-22T08:43:00.001-08:002012-11-24T19:50:30.336-08:00Belajar Membuat Paragraf,Link, & Heading di HTML<h4>
Paragraf</h4>
Sebuah halaman web sangat membutuhkan yang namanya paragraf. Tanpa paragraf bagaimana akan menulis sebuah dokumen untuk dibaca oleh user. Misal saja sebuah web berita pastinya membutuhkan sebuah paragraf, walaupun ada video dan gambar tetap saja paragraf dibutuhkan untuk menyampaiakan informasi ke user supaya lebih jelas.<br />
Langsung saja saya beri contoh tata cara penulisan paragraf di HTML. Contoh ini adalah dasar banget untuk mengenal HTML.<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10"><!DOCTYPE html>
<html>
<body>
<p>
Paragraf silahkan ditulis diantara tag p</p>
<p>
Paragraf silahkan ditulis diantara tag p</p>
<p>
Paragraf silahkan ditulis diantara tag p</p>
<p>
Paragraf silahkan ditulis diantara tag p</p>
</body>
</html>
</textarea><br />
<br />
Sebuah paragraf di HTML ditulis diantara tag <p> .. </p><br />
<br />
Ketik script diatas simpan dengan nama <b>index.html</b> jalankan di browser kesayangan anda dan untuk tampilannya sebagai berikut :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-rfGNXXuMUvQ/UK5R4xziCbI/AAAAAAAAANI/MkCkf-gEW8c/s1600/p.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="270" src="http://4.bp.blogspot.com/-rfGNXXuMUvQ/UK5R4xziCbI/AAAAAAAAANI/MkCkf-gEW8c/s320/p.JPG" width="320" /></a></div>
<br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<h4>
</h4>
<h4>
<br /></h4>
<h4>
Link</h4>
</div>
<div>
Pengertian dari link adalah sesuatu yang bisa menghubungkan ke suatu halaman web itu sendiri atau ke web yang lain.</div>
<div>
Link di HTML didefinisikan diantara tag <a>..</a></div>
<div>
<br /></div>
<div>
Saya akan memberi contoh :</div>
<div>
<br /></div>
<div>
<a href="http://creativitywhitoutlimits.blogspot.com">Ini Adalah Link</a>. Maka kalimat <a href="http://creativitywhitoutlimits.blogspot.com/">Ini Adalah Link</a> akan menuju ke halaman http://creativitywhitoutlimits.blogspot.com.</div>
<div>
<br /></div>
<div>
<h4>
Heading</h4>
</div>
<div>
Pengertian heading adalah kepala. Lhoh kok kepala?? artinya disini adalah untuk membuat sebuah judul.</div>
<div>
Tag Heading <h1> </h1> sampai <h6> </h6></div>
<div>
<br /></div>
<div>
Untuk contoh sebagai berikut :</div>
<div>
<br /></div>
<textarea class="c#" cols="60" name="code" rows="10"><!DOCTYPE html>
<html>
<body>
<h1>
Heading 1</h1>
<h2>
Heading 2</h2>
<h3>
Heading 3</h3>
<h4>
Heading 4</h4>
<h5>
Heading 5</h5>
<h6>
Heading 6</h6>
</body>
</html>
</textarea><br />
<br />
Tampilan dari contoh heading adalah :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-clbki3C-NME/UK5VeMfk52I/AAAAAAAAANc/0r4rd3UTa0k/s1600/heading.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-clbki3C-NME/UK5VeMfk52I/AAAAAAAAANc/0r4rd3UTa0k/s320/heading.JPG" width="239" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h4>
Gambar</h4>
<div>
Untuk menampilkan sebuah gambar pada HTML sudah pernah saya tulis dalam artikel saya sebelumnya dengan judul <a href="http://creativitywhitoutlimits.blogspot.com/2012/11/menampilkan-gambar-di-html.html">Menampilkan Gambar di HTML</a>. Karena saya males untuk nulis ulang :D</div>
Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com2tag:blogger.com,1999:blog-3506747034033682108.post-10349130896612733892012-11-22T07:50:00.002-08:002012-11-22T07:50:53.048-08:00Belajar CSS Menggunakan PaddingPadding adalah jarak dalam. Masih bingung mungkin dari pengertian padding. Sebagai contoh saya mempunyai sebuah kaos, setelah saya pakai terdapatlah sebuah jarak antara badan saya dengan kaos tadi. Begitu kira-kira yang dimaksud dengan padding.<br />
Apakah juga masih bingung pengertiannya?<br />
Mending langsung saja saya akan memberikan contoh dari kasus padding ini.<br />
<br />
Berikut contoh script padding :<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10"><!DOCTYPE html>
<html>
<head>
<style>
p
{
background-color:pink;
}
p.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>
<body>
<p>
Disini adalah sebuah paragraf yang tidak menggunakan padding</p>
<p class="padding">
Paragraf ini menggunakan padding, dan terlihat bedanya top=atas,bottom=bawah,right=kanan,left=kiri</p>
</body>
</html>
</textarea><br />
<br />
Untuk tampilannya adalah sebagai berikut :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-GB9mCw5vgV8/UK5IU6wMceI/AAAAAAAAAMs/wf9OQeVOyLo/s1600/padding.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="243" src="http://3.bp.blogspot.com/-GB9mCw5vgV8/UK5IU6wMceI/AAAAAAAAAMs/wf9OQeVOyLo/s640/padding.JPG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: left;">
Maka akan terlihat jika paragraf yang diatas tidak menggunakan padding sedangkan yang bawah menggunakan padding.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Pada bagian ini anda bisa melihat perbedaanya :</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<div>
<style></div>
<div>
<span style="background-color: orange;">p</span></div>
<div>
<span style="background-color: orange;">{</span></div>
<div>
<span style="background-color: orange;">background-color:pink;</span></div>
<div>
<span style="background-color: orange;">}</span></div>
<div>
<span style="background-color: #f4cccc;">p.padding</span></div>
<div>
<span style="background-color: #f4cccc;">{</span></div>
<div>
<span style="background-color: #f4cccc;">padding-top:25px;</span></div>
<div>
<span style="background-color: #f4cccc;">padding-bottom:25px;</span></div>
<div>
<span style="background-color: #f4cccc;">padding-right:50px;</span></div>
<div>
<span style="background-color: #f4cccc;">padding-left:50px;</span></div>
<div>
<span style="background-color: #f4cccc;">}</span></div>
<div>
<span style="background-color: white;"></style></span></div>
<div>
<span style="background-color: white;"><body></span></div>
</div>
<div style="text-align: left;">
<div>
<span style="background-color: orange;"><p>Disini adalah sebuah paragraf yang tidak menggunakan padding</p></span></div>
<div>
<span style="background-color: #f4cccc;"><p class="padding">Paragraf ini menggunakan padding, dan terlihat bedanya top=atas,bottom=bawah,right=kanan,left=kiri</p></span></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com2tag:blogger.com,1999:blog-3506747034033682108.post-82415278597476124972012-11-21T08:21:00.000-08:002012-11-21T08:21:27.789-08:00Membuat Bayangan Kotak dengan CSSDalam artikel sederhana saya sebelumnya membahas tentang <b><a href="http://creativitywhitoutlimits.blogspot.com/2012/11/belajar-border-radius-di-css.html">Belajar Border Radius di CSS</a> </b>, kali ini saya akan mencoba membuat sebuah bayangan kotak dengan CSS.<br />
Wahh pasti sangat kerenn nihh !! :D<br />
Mari kita praktekkan bersama-sama.<br />
<br />
Tulis script dibawah ini :<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10"><!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:blue;
-moz-box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
</textarea><br />
<br />
Simpan dengan nama file <b>index.html</b>, kemudian jalankan pada browser favorit anda. Maka tampilannya seperti berikut :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-nZ9oyiyOHeo/UKz9lXUeOpI/AAAAAAAAAMY/-D27-F64Wr4/s1600/border.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="212" src="http://4.bp.blogspot.com/-nZ9oyiyOHeo/UKz9lXUeOpI/AAAAAAAAAMY/-D27-F64Wr4/s320/border.JPG" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Kenapa bisa muncul bayangan??<br />
Berikut penjelasannya :<br />
<br />
<span style="background-color: #f4cccc;">width:300px; </span>= adalah panjang objek yang kita buat<br />
<span style="background-color: #f4cccc;">height:100px;</span> = lebar objek yang kita buat<br />
<span style="background-color: #f4cccc;">background-color:blue;</span> = warna latar belakang<br />
<span style="background-color: #f4cccc;">-moz-box-shadow: 10px 10px 5px #888888;</span> = bayangan untuk browser Mozilla Firefox<br />
<span style="background-color: #f4cccc;">box-shadow: 10px 10px 5px #888888; </span>= bayangan, <span style="background-color: #f4cccc;">#888888 </span>= adalah warna dari bayangan<br />
<br />
<br />
Sebenarnya <b>box-shadow</b> sudah compatible disemua browser yang ada sekarang ini.<br />
Selamat mencoba !!Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com2tag:blogger.com,1999:blog-3506747034033682108.post-32937716087668771372012-11-21T07:48:00.000-08:002012-11-21T07:54:37.376-08:00Belajar Border Radius di CSSBorder radius adalah membuat sudut bulat di CSS. Border radius semakin memudahkan kita dalam membuat desain yang menarik untuk halaman web.<br />
Properti border radius mudah digunakan dan mendukung untuk semua browser walaupun dengan beberapa perbedaan.<br />
<br />
Langsung saja, saya lebih suka memberi contoh daripada ber-teori.<br />
<br />
Tulis script dibawah ini dengan text editor simpan dengan nama file <b>index.html</b><br />
<br />
<textarea class="c#" cols="60" name="code" rows="10"><!DOCTYPE html>
<html>
<head>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px;
}
</style>
</head>
<body>
<div>
Properti border-radius memungkinkan Anda untuk membuat sudut bulat</div>
</body>
</html>
</textarea><br />
<br />
Untuk tampilannya gunakan Mozilla Firefox atau browser lainnya, jalankan file <b>index.html.</b><br />
<br />
Priview dari script diatas adalah seperti ini :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-U07_gCkp4gk/UKz3IsdNAII/AAAAAAAAAME/2m4hAgPbWT8/s1600/border.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Belajar Border Radius di CSS" border="0" height="251" src="http://1.bp.blogspot.com/-U07_gCkp4gk/UKz3IsdNAII/AAAAAAAAAME/2m4hAgPbWT8/s320/border.JPG" title="Belajar Border Radius di CSS" width="400" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Maka bentuk akan menjadi lebih menarik dengan garis lengkung di setiap sudutnya.<br />
Tertarik untuk belajar lagi silahkan anda kembangkan sendiri script diatas untuk lebih jelasnya.<br />
<br />Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com0tag:blogger.com,1999:blog-3506747034033682108.post-22219544636624654552012-11-20T05:00:00.001-08:002012-11-20T05:03:11.457-08:00Membuat Template Sederhana dengan CSSTemplate sederhana ini adalah buatan saya ketika masih berkenalan pertama kali dengan CSS. Agar dapat menginspirasi banyak orang akhirnya saya buat saja artikel tutorial mengenai Membuat Template Sederhana dengan CSS. Semoga bermanfaat nantinya !! :D<br />
<br />
Hal pertama yang harus disiapkan tentu saja text editor, saya sering memakai Notepad++.<br />
Kedua adalah web browser, saya memakai Mozilla Firefox versi terbaru.<br />
<br />
Disini saya menggunakan cara Eksternal CSS, yaitu memanggil file .css untuk ditampilkan di HTML. Cara ini sudah saya tulis di artikel sebelumnya yang berjudul <a href="http://creativitywhitoutlimits.blogspot.com/2012/11/belajar-css.html">Belajar CSS</a> dimana terdapat cara-cara pemakaian CSS untuk mempercantik halaman web.<br />
<br />
Langsung saja, tulis script dibawah ini dan simpan didalam satu folder (terserah anda) dengan nama <b>style.css</b> :<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10">#bungkus {
background-color:red;
width:800px;
height:900px;
margin:auto;
}
#header{
background-color:pink;
width:800px;
height:100px;
float:left;
}
#navkiri{
background-color:black;
width:200px;
height:780px;
float:left;
}
#footer{
background-color:blue;
width:800px;
height:20px;
float:left;
}
</textarea><br />
<br />
Setelah anda menulis script diatas, kemudian buka lembar kerja baru kemudia tulis script seperti dibawah ini :<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head><title>Membuat Template Sederhana dengan CSS</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="bungkus">
<div id="header">
</div>
<div id="navkiri">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
</textarea><br />
<br />
Simpan script diatas dengan nama <b>index.html</b> dan harus satu folder bersama file <b>style.css</b> tadi.<br />
Jalankan file <b>index.html </b>di Mozilla Firefox!!!<br />
Jika tidak ada kesalahan maka tampilannya akan seperti berikut ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-0KLJzkjQ9VA/UKt98qB1wKI/AAAAAAAAALw/QMBn5YGV8sI/s1600/css.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Membuat Template Sederhana dengan CSS" border="0" height="400" src="http://4.bp.blogspot.com/-0KLJzkjQ9VA/UKt98qB1wKI/AAAAAAAAALw/QMBn5YGV8sI/s400/css.JPG" title="Membuat Template Sederhana dengan CSS" width="371" /></a></div>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b><br />
<br />
Taraaaaa !!!! anda sudah memiliki sebuah template sederhana menggunakan CSS. kabari teman-teman anda jika anda berhasil :D, sekian terima kasih.<br />
Mungkin dari artikel diatas masih banyak yang belum jelas janganlah ragu untuk bertanya ke saya. Mari kita belajar bareng :DAnonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com3tag:blogger.com,1999:blog-3506747034033682108.post-16055439243224638642012-11-20T04:13:00.002-08:002012-11-20T04:13:58.903-08:00Menampilkan Javacript pada HTMLContoh berikut ini adalah membuat halaman HTML yang didalamnya terkandung Javascript :<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head><title>Membuat Javascript</title>
</head>
<body>
<script type="text/javascript">
document.write("Halaman Javascript Saya");
document.write("<p>
Hallo Semua<br/>"+"<i>Saya adalah</i>?</p>
");
</script>
<p>
Membuat output menampilkan teks dengan Javascript</p>
</body>
</html>
</textarea><br />
<br />
Jika anda ingin mencobanya, ketik script diatas menggunakan text editor kesukaan anda (saya lebih suka memakai Notepad++). Kemudian simpan dengan nama <b>index.html</b>. Jalankan pada browser anda seperti Mozilla Firefox, saya sendiri lebih suka menggunakan Mozilla Firefox versi terbaru.<br />
<br />
Untuk tampilan dari script diatas adalah :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-5M6Jlpe4wc4/UKtyebHP6vI/AAAAAAAAALc/NM2iUr5kASo/s1600/javascript.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Menampilkan Javacript pada HTML" border="0" height="190" src="http://3.bp.blogspot.com/-5M6Jlpe4wc4/UKtyebHP6vI/AAAAAAAAALc/NM2iUr5kASo/s320/javascript.JPG" title="Menampilkan Javacript pada HTML" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Penjelasan :<br />
<span style="background-color: #f4cccc;">document:write</span> = untuk menampilkan teks di halaman HTML<br />
Teks yang ingin ditampilkan dapat dimasukkan ke dalam tag HTML. Tag akan diekseskusi oleh browser ketika teks ditampilkan.<br />
<br />
Untuk tutorial selanjutnya mungkin saya akan menulis tentang tata cara penulisan Javascript. Yah, karena keterbatasan waktu saya cukupkan semoga artikel ini bermanfaat bagi semua.<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com2tag:blogger.com,1999:blog-3506747034033682108.post-13268852494759135762012-11-19T18:41:00.000-08:002012-11-19T18:42:37.096-08:00Belajar Fitur Baru HTML 5Mari kenal lebih jauh dengan HTML 5 dan mempelajari fitur-fitur terbaru dari HTML 5.<br />
Berikut fitur baru yang ada pada HTML 5 :<br />
<ul>
<li>Elemen <canvas> berguna untuk menggambar 2D</li>
<li>Elemen <video> dan <audio> untuk media pemutaran video dan audio</li>
<li>Dukungan untuk penyimpanan lokal</li>
<li>Konten spesifik seperti elemen <article>, <footer>, <header>, <nav>, <section></li>
<li>Kontrol bentuk baru, seperti kalender, tanggal, waktu, email, url, pencarian</li>
</ul>
<div>
Agar lebih jelasnya saya berikan tabel penjelasan elemen baru di HTML.<br />
<h4>
Elemen baru</h4>
</div>
<table border="1">
<tbody>
<tr><td><b>Tag</b></td><td><b>Penjelasan</b></td></tr>
<tr><td><article></td><td>untuk konten eksternal, sperti teks dari artikel berita,blog,forum,atau konten lainnya dari sumber eksternal</td></tr>
<tr><td><aside></td><td>untuk konten selain konten itu ditempatkan disamping konten yang masuk harus berkaitan dengan isi sekitarnya</td></tr>
<tr><td><command></td><td>sebuah tombol atau radio button, kotak centang</td></tr>
<tr><td><details></td><td>untuk rincian menggambarkan tentang sebuah dokumen atau bagian dari dokumen</td></tr>
<tr><td><summary></td><td>sebuah keterangan atau ringkasan dalam rincian elemen</td></tr>
<tr><td><figure></td><td>untuk pengelompokan bagian dari konten berdiri sendiri, bisa video</td></tr>
<tr><td><figcaption></td><td>keterangan dari tokoh bagian</td></tr>
<tr><td><footer></td><td>untuk footer dari dokumen atau bagian, dapat meliputi nama penulis, tanggal dokumen, informasi kontak, atau informasi hak cipta</td></tr>
<tr><td><header></td><td>untuk penerapan suatu dokumen atau bagian, dapat mencakup navigasi</td></tr>
<tr><td><hgroup></td><td>untuk bagian dari pos, menggunakan <h1> untuk <h6>, dimana yang terbesar adalah pos utama bagian tersebut dan yang lainnya sub judul</td></tr>
<tr><td><mark></td><td>untuk teks yang harus disorot</td></tr>
<tr><td><meter></td><td>untuk pengukuran, digunakan hanya jika nilai-nilai maksimum dan minimum diketahui</td></tr>
<tr><td><nav></td><td>untuk bagian navigasi atau menu</td></tr>
<tr><td><progress></td><td>keadaan pekerjaan berlangsung</td></tr>
<tr><td><ruby></td><td>untuk penjelasan tentang penjelasan ruby</td></tr>
<tr><td><rp></td><td>untuk menunjukkan browser yang tidak mendukung elemen ruby</td></tr>
<tr><td><section></td><td>untuk bagian dalam dokumen seperti bab,header,footer, atau bagian lain dari dokumen</td></tr>
<tr><td><time></td><td>untuk menentukan waktu atau tanggal atau keduanya</td></tr>
</tbody></table>
<br />
<div>
<h4>
Elemen media</h4>
</div>
<table border="1">
<tbody>
<tr><td><b>Tag</b></td><td><b>Penjelasan</b></td></tr>
<tr><td><audio></td><td>untuk konten multimedia, suara, musik, atau streaming audio lainnya</td></tr>
<tr><td><video></td><td>untuk konten video, seperti klik film atau streaming video lainnya</td></tr>
<tr><td><source></td><td>untuk sumber suatu media pada elemen media, menjelaskan didalam video atau media audio</td></tr>
<tr><td><embed></td><td>untuk mengisi embedded, contohnya seperti plug-in atau mengambil video dari Youtube </td></tr>
</tbody></table>
<br />
<div>
<h4>
Elemen Canvas</h4>
</div>
<table border="1">
<tbody>
<tr><td><b>Tag</b></td><td><b>Penjelasan</b></td>
</tr>
<tr><td><canvas></td><td>untuk membuat gambar pada halaman web</td></tr>
</tbody></table>
<br />
<div>
<h4>
Elemen Form</h4>
</div>
<table border="1">
<tbody>
<tr><td><b>Tag</b></td><td><b>Penjelasan</b></td>
</tr>
<tr><td><datalist></td><td>daftar pilihan untuk nilai input</td></tr>
<tr><td><keygen></td><td>hasilkan kunci untuk mengotentikasi pengguna</td></tr>
<tr><td><output></td><td>untuk berbagai jenis output seperti output yang ditulis oleh script</td></tr>
</tbody></table>
<br />
<div>
<h4>
Atribut Tipe Input</h4>
</div>
<table border="1">
<tbody>
<tr><td><b>Tipe</b></td><td><b>Penjelasan</b></td></tr>
<tr><td>tel</td><td>nilai input untuk nomor telepon</td></tr>
<tr><td>search</td><td>untuk bidang pencarian</td></tr>
<tr><td>url</td><td>nilai input untuk memasukkan URL</td></tr>
<tr><td>email</td><td>untuk mengisi email atau lebih dari satu email</td></tr>
<tr><td>datetime</td><td>untuk pengisian waktu dan tanggal</td></tr>
<tr><td>date</td><td>untuk pengisian tanggal</td></tr>
<tr><td>month</td><td>untuk pengisian bulan</td></tr>
<tr><td>week</td><td>untuk pengisian minggu</td></tr>
<tr><td>time</td><td>untuk pengisian waktu</td></tr>
<tr><td>datetime-local</td><td>untuk pengisian lokal waktu/tanggal</td></tr>
<tr><td>number</td><td>untuk pengisian nomer</td></tr>
<tr><td>range</td><td>untuk pengisian rentang waktu</td></tr>
<tr><td>color</td><td>untuk pengisian heksadesimal sebuah warna</td></tr>
</tbody></table>
<br /><div>
Semoga artikel ini bermanfaat !!</div>
Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com0tag:blogger.com,1999:blog-3506747034033682108.post-64082378882539032152012-11-19T17:52:00.000-08:002012-11-20T03:38:02.521-08:00Mengenal HTML 5<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-lsUB_s451mo/UKtrboSDxxI/AAAAAAAAALI/uCRVlE2CpQY/s1600/htmlt55.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML 5" border="0" src="http://3.bp.blogspot.com/-lsUB_s451mo/UKtrboSDxxI/AAAAAAAAALI/uCRVlE2CpQY/s1600/htmlt55.JPG" title="HTML 5" /></a></div>
<br />
Apa itu HTML 5?<br />
Apa kegunaan HTML 5?<br />
Apa perbedaan dengan HTML sebelumnya?<br />
<br />
Mungkin pertanyaan seperti ini akan muncul ketika anda mendengar pertama kali istilah HTML 5. Disini penulis ingin mencoba menjelaskan sedikit pengertian HTML 5 dan fitur-fitur terbaru daripada HTML sebelumnya.<br />
<br />
HTML 5 adalah merupakan perkembangan dari versi HTML sebelumnya, yaitu HTML 4 atau XHTML 1.0. HTML 5 mempunyai banyak kelebihan dari versi sebelumnya yang hadir di tahun 1999.<br />
<br />
HTML 5 telah diluncurkan oleh W3C atau Word Wide Web Consortium pada bulan Februari 2011. Direncanakan akan diresmikan pada bulan Juli 2014, dimana HTML5 akan dijadikan sebagai rekomendasi resmi dalam web standard.<br />
Nah, lo. Apakah anda sia-sia kalau hari ini sedang mempelajari versi HTML sebelumnya. Tidak usah khawatir karena HTML 5 tidak jauh berbeda dengan HTML sebelumnya yang dimana terdapat attribut dan tag baru saja didalamnya. Selebihnya bisa dikatakan mirip.<br />
<br />
Langsung saja saya akan memberikan contoh untuk script sederhana HTML 5 :<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10"><!DOCTYPE html>
<html>
<head>
<title>Membuat Halaman HTML 5</title>
</head>
<body>
Dokumen yang akan ditulis disini, dst. . .
</body>
</html>
</textarea>
<br />
<br />
HTML 5 menggunakan <!DOCTYPE> untuk mendeklarasikannya.<br />
Simpan halaman diatas, dan jangan lupa beri extensi <b>.html</b>. Jalankan pada browser anda! disini saya memakai Mozilla Firefox versi terbaru.<br />
Berikut untuk tampilannya :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-9OIrM-ja6_o/UKrgEwSjR7I/AAAAAAAAAK0/xCOiRdwmURQ/s1600/html5.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="HTML 5" border="0" height="189" src="http://2.bp.blogspot.com/-9OIrM-ja6_o/UKrgEwSjR7I/AAAAAAAAAK0/xCOiRdwmURQ/s320/html5.JPG" title="HTML 5" width="320" /></a></div>
<b><br /></b>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
HTML 5 belum menjadi standar resmi dan belum ada browser yang memiliki dukungan penuh terhadap HTML 5. Akan tetapi semua browser utama seperti Safari, Chrome, Firefox, Opera, IE terus menambahkan fitur HTML 5 untuk versi terbaru mereka.<br />
Untuk mengenal fitur-fitur terbaru dari HTML 5 anda bisa membaca artikel saya selanjutnya <a href="http://creativitywhitoutlimits.blogspot.com/2012/11/belajar-fitur-baru-html-5.html">Belajar Fitur Baru HTML 5</a><br />
<br />
Semoga memberi manfaat !!<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com1tag:blogger.com,1999:blog-3506747034033682108.post-11735072631120103302012-11-19T06:42:00.000-08:002012-11-19T08:49:39.704-08:00Membuat Tabel di HTMLPernahkah anda melihat sebuah halaman web yang didalamnya terdapat sebuah tabel. Bagaimana cara membuatnya? Kali ini saya ingin mempraktekkan dan memberikan pengertian tentang tag yang berfungsi dalam pembuatan tabel. Fungsi dari tabel sendiri adalah untuk mengatur agar informasi dari halaman web dapat disajikan dengan tampilan yang baik untuk dibaca.<br />
<br />
Berikut yang harus anda pahami tag yang berfungsi untuk pembuatan sebuah tabel:<br />
<br />
<table border="1">
<tbody>
<tr><td><div style="text-align: center;">
<b>Tag</b></div>
</td><td><div style="text-align: center;">
<b>Fungsi</b></div>
</td></tr>
<tr><td><table>...</table></td> <td>Tag harus ditulis yang berguna sebagai pembuka dan penutup sebuah tabel </td></tr>
<tr><td><caption>...</caption></td><td>Membuat judul tabel</td></tr>
<tr><td><th>...</th></td><td>Membuat judul kolom</td></tr>
<tr><td><tr>...</tr></td><td>Menentukan sebuah baris dalam tabel</td></tr>
<tr><td><td>...</td></td><td>Membuat sel data </td></tr>
</tbody></table>
<div>
<br /></div>
<div>
Setelah anda mengerti tag diatas, langsung saja yukk kita praktekkan !!</div>
<div>
<ol>
<li>Siapkan Text Editor (Notepad++,Adobe Dreamweaver, dll). Disini saya memakai Notepad++</li>
<li>Siapkan Browser (Mozilla Firefox, Google Chrome, dll). </li>
<li>Segelas Kopi atau camilan biar anda semangat :D</li>
</ol>
<div>
<br /></div>
<h4>
Membuat Tabel Sederhana dengan HTML</h4>
<div>
Berikut source code membuat tabel sederhana :<br />
<br /></div>
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head>
<title> Membuat Tabel Sederhana </title>
</head>
<body>
<table>
<caption>Daftar Teman Saya</caption>
<tr><th>Nama</th><th>Jenis Kelamin</th></tr>
<tr><td>Yogo</td><td>Laki-laki</td></tr>
<tr><td>Fungky</td><td>Laki-laki</td></tr>
<tr><td>Cintya</td><td>Perempuan</td></tr>
<tr><td>Arman</td><td>Laki-laki</td></tr>
</table>
</body>
</html>
</textarea><br />
<br />
Setelah anda mengetik source code diatas, kemudian simpan dengan nama file <b>membuattabel.html</b>.<br />
Jalankan file <b>membuattabel.html</b> klik 2x file tersebut.<br />
<br />
Maka untuk tampilan adalah berikut ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-qnPcDwBCRF4/UKo9yzn70zI/AAAAAAAAAKE/pinqDS-NAYo/s1600/tabel1.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Membuat Tabel di HTML" border="0" height="232" src="http://3.bp.blogspot.com/-qnPcDwBCRF4/UKo9yzn70zI/AAAAAAAAAKE/pinqDS-NAYo/s320/tabel1.JPG" title="Membuat Tabel di HTML" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h4>
Memberi Garis dan Warna Background Tabel</h4>
<div>
Dari contoh diatas yang sudah saya praktekkan tabel belum memiliki garis. Untuk membuat sebuah garis anda bisa menggunakan atribut <strong> border </strong>pada tag <table>, contoh sebagai berikut :<br />
<span style="background-color: #f4cccc;"><table border="<i>bilangan untuk border</i>"></span><br />
<span style="background-color: white;">Masih menggunakan file index.html yang telah dibuat tadi. Kemudian disini saya akan setting garis dengan angka 1, maka yang harus dilakukan hanya menambahkan pada tag <table> menjadi seperti berikut :</span><br />
<span style="background-color: #f4cccc;"><table border="1"></span><br />
<span style="background-color: #f4cccc;"><br /></span></div>
</div>
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head>
<title> Membuat Tabel Sederhana </title>
</head>
<body>
<table border="1">
<caption>Daftar Teman Saya</caption>
<tr><th>Nama</th><th>Jenis Kelamin</th></tr>
<tr><td>Yogo</td><td>Laki-laki</td></tr>
<tr><td>Fungky</td><td>Laki-laki</td></tr>
<tr><td>Cintya</td><td>Perempuan</td></tr>
<tr><td>Arman</td><td>Laki-laki</td></tr>
</table>
</body>
</html>
</textarea>
<br />
<br />
Setelah anda edit kemudian save kembali pekerjaanya. Jalankan kembali file <b>membuattabel.html</b> ke web browser anda. Maka tampilan akan menjadi seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-SVMNOmNPnkI/UKpBhd-yoKI/AAAAAAAAAKY/_fW46c1twD0/s1600/tabel2.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Membuat Tabel di HTML" border="0" height="229" src="http://1.bp.blogspot.com/-SVMNOmNPnkI/UKpBhd-yoKI/AAAAAAAAAKY/_fW46c1twD0/s320/tabel2.JPG" title="Membuat Tabel di HTML" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Mudah bukan? Setelah anda mampu membuat sebuah garis di tabel. Ilmu selanjutnya adalah pemberian warna latar belakang di tabel. Caranya hanya menambahkan atribut <b>bgcolor</b> pada tag <table>.<br />
<span style="background-color: #f4cccc;"><table border="1" bgcolor="yellow"></span><br />
<span style="background-color: white;">Masih menggunakan file <b>membuattabel.html</b> yang telah dibuat tadi. Tambahkan atribut bgcolor pada tag <table> seperti diatas. </span><br />
<span style="background-color: white;"><br /></span>
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head>
<title> Membuat Tabel Sederhana </title>
</head>
<body>
<table border="1" bgcolor="yellow">
<caption>Daftar Teman Saya</caption>
<tr><th>Nama</th><th>Jenis Kelamin</th></tr>
<tr><td>Yogo</td><td>Laki-laki</td></tr>
<tr><td>Fungky</td><td>Laki-laki</td></tr>
<tr><td>Cintya</td><td>Perempuan</td></tr>
<tr><td>Arman</td><td>Laki-laki</td></tr>
</table>
</body>
</html>
</textarea><br />
<br />
Simpan dan jalankan file <b>membuattabel.html</b> di web browser anda. Jadilah untuk tampilan setelah diberi warna latar belakang adalah sebagai berikut :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-YbftYMI7Xbo/UKpDhBfc4UI/AAAAAAAAAKg/woITT_atJik/s1600/tabel3.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Membuat Tabel di HTML" border="0" height="214" src="http://3.bp.blogspot.com/-YbftYMI7Xbo/UKpDhBfc4UI/AAAAAAAAAKg/woITT_atJik/s320/tabel3.JPG" title="Membuat Tabel di HTML" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Mudah bukan dalam membuat tabel dalam HTML? Mudah-mudahan apa yang telah saya berikan kali ini bermanfaat bagi pembaca. Terima kasih !!Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com2tag:blogger.com,1999:blog-3506747034033682108.post-44481910013202026142012-11-18T19:41:00.000-08:002012-11-20T04:32:54.575-08:00Belajar CSSApa itu CSS? dan apa kegunaanya?. Pernahkah anda melihat sebuah halaman web dengan bentuk yang rapi, warna-warna yang indah. Itulah yang disebut dengan CSS(Cascading Style Sheet). Penggunaan CSS dilakukan untuk mempercantik tampilan web. Kode CSS ditulis didalam tag <style> </style>.<br />
Ada 3 cara untuk membuat CSS bisa diterapkan ke dalam HTML :<br />
<ul>
<li>Inline CSS</li>
<li>Embedded CSS</li>
<li>External CSS</li>
</ul>
<div>
Untuk bisa belajar CSS yang harus disiapkan adalah :</div>
<div>
<ol>
<li>Text Editor (Notepad, Adobe Dreamweaver, dll), disini penulis lebih senang menggunakan text editor Notepad++</li>
<li>Browser seperti Mozilla Firefox, Google Chrome,Opera, dll</li>
</ol>
</div>
<div>
<h3>
Inline</h3>
Inline CSS digunakan pada tag HTML-nya</div>
<div>
Sebagai contoh, ketikkan source code berikut :</div>
<div>
<br /></div>
<textarea class="c#" cols="60" name="code" rows="10"><body>
<body>
<h1 style="color:red;">
Contoh Inline CSS</h1>
</body>
</textarea><br />
<br />
Simpan file CSS diatas dengan nama <b>terserahanda.html, </b>kemudian jalankan di Mozilla Firefox atau Browser lainnya. Disini sebagai contoh adalah akan membuat tag header <h1> </h1> yang akan dibuat menjadi warna merah. Untuk tampilannya seperti berikut :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-eczC7QEybCg/UKmgQJxdCTI/AAAAAAAAAJU/xZRR0ib8_ig/s1600/inlinecss.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="187" src="http://3.bp.blogspot.com/-eczC7QEybCg/UKmgQJxdCTI/AAAAAAAAAJU/xZRR0ib8_ig/s320/inlinecss.JPG" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h3>
Embedded CSS</h3>
<div>
CSS ini menempel diantara tag <head> .. </head></div>
<div>
Sebagai contoh :</div>
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head>
<style type="text/css">
p {
color:red;
}
</style>
</head>
<body>
<p>
Paragraf cara belajar CSS dengan cepat adalah dengan sering berlatih <p>
</body>
</html>
</textarea><br />
<br />
Simpan file CSS diatas dengan nama <b>terserahanda.html, </b>kemudian jalankan di Mozilla Firefox atau Browser lainnya.<br />
<br />
<span style="background-color: #f4cccc;"><style type="text/css"></span><br />
<span style="background-color: #f4cccc;">p {</span><br />
<span style="background-color: #f4cccc;">color:red;</span><br />
<span style="background-color: #f4cccc;">}</span><br />
<span style="background-color: #f4cccc;"></style></span><br />
Source kode diatas adalah tag untuk CSS yang akan membuat tag yang didalam paragraf <p> </p> berubah menjadi warna merah.<br />
<br />
Untuk tampilannya sebagai berikut :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Hkqr5WbyatQ/UKmiBhzV4rI/AAAAAAAAAJc/1XKKmXQxZ38/s1600/embedded.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="188" src="http://3.bp.blogspot.com/-Hkqr5WbyatQ/UKmiBhzV4rI/AAAAAAAAAJc/1XKKmXQxZ38/s320/embedded.JPG" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h3>
External CSS</h3>
External CSS adalah cara dimana kita nantinya akan membuat file.css sendiri, kemudian memanggilnya dengan link dari tag HTML. Langsung saja saya contohkan dari External CSS.<br />
Pertama buatlah satu Folder. Buatlah halaman dengan nama <b>style.css </b>simpan kedalam folder yang anda buat tadi, kemudian ketik source code dibawah :<br />
<textarea class="c#" cols="60" name="code" rows="10">#kotak1 {
background-color:red;
width:200px;
height:200px;
float:left;
}
</textarea>
<br />
<br />
<span style="background-color: #f4cccc;">#kotak1 {</span><br />
<span style="background-color: #f4cccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-color:red;</span><br />
<span style="background-color: #f4cccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>width:200px;</span><br />
<span style="background-color: #f4cccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>height:200px;</span><br />
<span style="background-color: #f4cccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>float:left;</span><br />
<span style="background-color: #f4cccc;">}</span><br />
<span style="background-color: white;">Pengertian source code diatas adalah :</span><br />
<span style="background-color: #f4cccc;">#kotak1</span><span style="background-color: white;"> = nama id</span><br />
<span style="background-color: #f4cccc;">background-color:red;</span><span style="background-color: white;"> = membuat background menjadi warna merah</span><br />
<span style="background-color: #f4cccc;">width:200px;</span><span style="background-color: white;"> = membuat panjang dengan ukuran 200px</span><br />
<span style="background-color: #f4cccc;">height:200px;</span><span style="background-color: white;"> = membuat lebar kebawah dengan ukuran 200px</span><br />
<span style="background-color: #f4cccc;">float:left;</span><span style="background-color: white;"> = posisi objek berada di kiri</span><br />
<span style="background-color: #f4cccc;"><br /></span>
<br />
Untuk bisa menampilkan kita harus memanggil file .css yang telah dibuat tadi. Buatlah satu file dengan nama <b>index.html</b>. Kemudian tuliskan source code dibawah ini :<br />
<br />
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="kotak1">
</div>
</body>
</html>
</textarea><br />
<br />
<br />
<span style="background-color: #f4cccc;"><link rel="stylesheet" href="style.css" type="text/css"></span> = memamnggil file style.css<br />
<br />
Masukkan kedua file tersebut ke dalam satu folder. Jika file <b>style.css </b>dan <b>index.html</b> sudah ada di dalam satu folder langkah selanjutnya adalah jalankan file <b>index.html</b> di Mozilla Firefox atau Browser lainnya.<br />
<br />
Untuk tampilannya sebagai berikut :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-BUvGUR1CNcA/UKmmQN79eQI/AAAAAAAAAJw/S-9260IT9e4/s1600/ex.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="226" src="http://3.bp.blogspot.com/-BUvGUR1CNcA/UKmmQN79eQI/AAAAAAAAAJw/S-9260IT9e4/s320/ex.JPG" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Artikel diatas hanyalah dasar dari membuat CSS yang saya ketahui. Jika ada kekurangan dari penulisan harap dimaafkan.Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com2tag:blogger.com,1999:blog-3506747034033682108.post-41273102471354932602012-11-18T05:55:00.001-08:002012-11-18T18:14:35.858-08:00Menampilkan Gambar di HTML<span style="font-family: Arial, Helvetica, sans-serif;">Gambar merupakan elemen yang sangat penting dalam halaman web. Tanpa gambar kita mungkin akan kembali pada jaman web 1.0 dimana halaman web hanya berupa text atau tulisan saja.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Kali ini saya akan memberikan tutorial menampilkan gambar pada halaman web.</span><br />
<br />
<ol>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Pertama yang harus disiapkan adalah tentu saja file gambar, bisa berupa <b>.jpg, .gif</b>, dll. Gambar yang akan saya gunakan kali ini berformat<b> .jpg </b>dengan nama gambar yaitu gambar1.jpg. Supaya lebih semangat dalam berlatihnya saya menggunakan contoh gambar yang bikin tambah fresh dalam coding :D. </span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Buatlah satu folder bernama image, atau terserah anda.</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Siapkan <b>Text Editor HTML</b>, disini saya memakai <b>Notepad++</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Tag HTML yang harus anda mengerti kali ini adalah tag <b><img></b></span></li>
</ol>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">Source Code :</span><br />
<br />
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head>
<title> Menampilkan Gambar Untuk HTML </title>
</head>
<body>
<img align="left" alt="Gambar1" src="gambar1.jpg" />
</body>
</html>
</textarea>
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;">Kemudian silahkan simpan dengan nama <b>index.html</b> kedalam folder <b>image</b>. </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">Keterangan :</span><br />
<ul>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: #f4cccc;"><img src="gambar1.jpg"</span><span style="background-color: white;"> = Pemanggilan gambar. Jika file<b> index.html </b>disimpan di luar folder images, maka pemanggilannya menjadi </span><span style="background-color: #f4cccc;"><image src="images/gambar1.jpg"</span></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: #f4cccc;">align="left"></span><span style="background-color: white;"> = posisi gambar</span></span></li>
</ul>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">Berikut untuk priviewnya dengan menggunakan browser <b>Mozilla Firefox</b>:</span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-2tcmGnUDgFE/UKjiOFFBFGI/AAAAAAAAAIs/169P6c5LcfI/s1600/web1.bmp" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="311" src="http://2.bp.blogspot.com/-2tcmGnUDgFE/UKjiOFFBFGI/AAAAAAAAAIs/169P6c5LcfI/s320/web1.bmp" width="320" /></span></a></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">Jika kita sudah mendapat ilmu tentang menampilkan gambar dengan HTML, berikutnya kita akan mengatur ukuran gambar yang akan kita tampilkan.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Kita bisa mengaturnya melalui atribut pada tag <b><img></b> yang bernama<b> height</b> dan <b>width.</b></span><br />
<br />
<ul>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Height </b>= Untuk mengatur tinggi gambar</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Width</b> = Untuk mengatur lebar gambar</span></li>
</ul>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">Berikut source code setelah dirubah untuk mengatur ukuran gambar :</span><br />
<textarea class="c#" cols="60" name="code" rows="10"><html>
<head>
<title> Menampilkan Gambar Untuk HTML </title>
</head>
<body>
<img src="gambar1.jpg" align="left">
<img src="gambar1.jpg" align="left" height="500px" width="400px">
</body>
</html>
</textarea>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;">Dalam hal ini yang sering digunakan satuannya adalah pixel yang disingkat menjadi <b>px</b>.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Berikut priview dari <b>index.html</b> yang telah ditambahkan pengaturan ukurannya. </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-axprYrNf2aw/UKjldLcIKHI/AAAAAAAAAI8/ntrfUys0xBk/s1600/web1.bmp" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="311" src="http://4.bp.blogspot.com/-axprYrNf2aw/UKjldLcIKHI/AAAAAAAAAI8/ntrfUys0xBk/s320/web1.bmp" width="320" /></span></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">Akan terlihat gambar yang sebelah kanan adalah gambar yang belum disetting ukurannya sehingga tampak memenuhi tampilan di browser.Sedangkan gambar yang sebelah kiri adalah gambar yang sudah disetting ukurannya. </span><span style="font-family: Arial, Helvetica, sans-serif;">Gambar yang kecil adalah gambar yang telah dirubah ukurannya menjadi </span><span style="background-color: #f4cccc; font-family: Arial, Helvetica, sans-serif;">height="500px"</span><span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">dan </span><span style="background-color: #f4cccc; font-family: Arial, Helvetica, sans-serif;">width="400px"</span><span style="font-family: Arial, Helvetica, sans-serif;">.</span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">Selamat mencoba !!!</span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<br /></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com13tag:blogger.com,1999:blog-3506747034033682108.post-5394240202886497252012-11-18T01:39:00.000-08:002012-11-18T01:42:39.469-08:00Membuat Halaman Web Pertama Saya<span style="font-family: Arial, Helvetica, sans-serif;">Pernahkah anda membuat sebuah halaman web. Pernahkah anda berpikir dari mana dan awal bisa tampilnya halaman web ke layar monitor kita. Tentu saja kita melihat halaman web dari web browser. Contoh web browser sendiri adalah seperti Mozilla Firefox, Google Chrome, Safari, dll.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">Di artikel ini saya tidak akan membahas lebih detail apa itu HTML, bagaimana HTML bisa tampil dalam Web Browser kita. Karena sudah banyak orang yang share artikel mengenai pengertian-pengertian diatas tadi.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">Saya hanya ingin memberikan tutorial kepada anda membuat sebuah halaman web sederhana. Harapan saya setiap tutorial dapat dipraktekkan langsung dan anda akan mengerti dan lebih paham akhirnya, daripada anda membaca dan sekedar melihatnya.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Langsung saja kita mempersiapkan apa saja yang dibutuhkan :</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<ol>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Text Editor</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Web Browser</span></li>
</ol>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">Text Editor, mengapa kita membutuhkan ini? Fungsi dari text editor adalah untuk menyusun tag HTML yang akan kita tulis nantinya. Banyak text editor HTML profesional, akan tetapi saya menyarankan anda memakai text editor yang lebih sederhana seperti Notepad, Notepad++,dll. Suapaya anda lebih mudah untuk paham daripada menggunakan text editor HTML yang seperti Dreamweaver dan lainnya, akan membuat anda sedikit manja akhirnya.</span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">Web Browser berfungsi tentu saja untuk menampilkan halaman web yang sudah dirancang di text editor.</span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">Langsung kita buka Notepad++, disini saya menggunakan Notepad++ karena sangat nyaman untuk berlatih coding. Notepad++ adalah software opensource dan anda bisa mendownloadnya coba googling pasti banyak.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">1. Langkah pertama buka Notepad++, setelah itu ketikkan sama seperti gambar dibawah ini :</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-y7br9YU6SMc/UKiqhfwYa5I/AAAAAAAAAIU/87KPjG-hzVU/s1600/web1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="288" src="http://4.bp.blogspot.com/-y7br9YU6SMc/UKiqhfwYa5I/AAAAAAAAAIU/87KPjG-hzVU/s400/web1.jpg" width="400" /></span></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;">Penjelasan :</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><h1> Header Pertama Saya </h1> artinya kita akan membuat sebuah Header</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><p> Paragraf Pertama Saya </p> artinya kita akan membuat sebuah paragraf. Silahkan diisi sesuka anda dalam tag <p>paragraf yang ingin anda buat</p></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">2. Kemudian Klik Berkas - Simpan Sebagai...</span><br />
<br />
<span style="font-family: Arial, Helvetica, sans-serif;">Di Notepad++ sendiri ada pilihan Bahasa pemrograman yang bisa kita pilih. Jika kita memilih bahasa HTML saat kita pilih Simpan Sebagai... , maka file ektensi akan otomatis menjadi .html</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Sekarang simpan halaman dengan nama index.html dan buat satu folder taruh index.html didalamnya atau di luar folder juga bisa sebenarnya.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">3. Jika sudah di simpan maka kita sudah mempunyai file halaman web sendiri. Sekarang double klik file index.html. Atau dari Notepad++ kita bisa memilih menu Jalankan - Launch in Chrome (karena saya memakai browser Chrome).</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">4. Tampilan dari halaman yang sudah kita buat adalah seperti berikut ini :</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-i6y7Kt62Pyg/UKiroWYAVBI/AAAAAAAAAIc/EZBiwEWyeUc/s1600/html.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="281" src="http://3.bp.blogspot.com/-i6y7Kt62Pyg/UKiroWYAVBI/AAAAAAAAAIc/EZBiwEWyeUc/s640/html.JPG" width="640" /></span></a><a href="http://3.bp.blogspot.com/-i6y7Kt62Pyg/UKiroWYAVBI/AAAAAAAAAIc/EZBiwEWyeUc/s1600/html.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></a><a href="http://3.bp.blogspot.com/-i6y7Kt62Pyg/UKiroWYAVBI/AAAAAAAAAIc/EZBiwEWyeUc/s1600/html.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></a><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<br />
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;">Semoga artikel ini bermanfaat bagi kita semua, jika ingin copas silahkan dan jangan lupa menyertakan link saya. Terima kasih. </span></blockquote>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<br />Anonymoushttp://www.blogger.com/profile/15594565137490167462noreply@blogger.com0