Para Pencari Ilmu Tuts: HTML

HTML Dasar: Bermain dengan Table

<div style="text-align: justify;">
Assalamualaikum Wr. Wb.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://ppi-tuts.blogspot.com/2016/06/html-dasar-table.html" target="_blank"><img alt="HTML Dasar: Bermain dengan Table" border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmgYJDpALxKUP_88fsfYpND_vqBwed4SLJNX0PtPTlNsKIU71EbitaYuF7iYPUjuexRH4FeCax07EiAe20xZgdaxE44yrJkO_pKnXDYJZhVFQ6nrkfBQUZ2cpDmgHtfyqMiJSWTNGY5yc/s320/g.png" title="HTML Dasar: Bermain dengan Table" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>HTML Dasar: Bermain dengan Table</b> | Pada kesempatan ini saya akan membahas tentang table dalam <a href="http://ppi-tuts.blogspot.com/search/label/HTML" target="_blank">HTML</a>, Fungsi tabel ini sangat banyak dan di butuhkan dalam <i><a href="http://ppi-tuts.blogspot.com/search/label/Web%20Design" target="_blank">Web</a></i>, biasanya fungsi table dalam HTML di gunakan untuk membuat sebuah tabel, layouting, design form, dan lain sebagainya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Oke, langsung saja kita mulai dengan tag awal yang di gunakan dalam table adalah tag <table>..</table>, tag ini adalah sebuah tag pembuka untuk mengidentifikasi sebuah table dalam file HTML, selanjutnya yaitu untuk membuat sebuah row atau baris dengan tag <tr>..</tr>, di dalam sebuah tag row, barulah ada tag <td>...</td> yang mengidentifikasikan sebuah coloumn atau kolom yang menyamping ke kanan, dan ada juga tag <th>..</th> yang digunakan untuk membuat sebuah table heading.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Langsung saja kita praktikkan...</div>
<div style="text-align: justify;">
<br /></div>
<pre class="brush: html"><table border="1" style="width:50%">
  <tr>
    <td><b>No</b></td>
    <td><b>Heading</b></td> 
    <td><b>Heading Lagi</b></td>
  </tr>
  <tr>
    <td>1</td>
    <td>Data</td> 
    <td>Datadata</td>
  </tr>
</table>
</pre>
<div style="text-align: justify;">
<br />
Maka hasilnya seperti ini:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpHrxHnQi65hASlEoLw59YnulKBzsoil8KtroDqasmb8ZZ0RvEXo0rrGhtvSyqXB40iX9BQ4Ddxl-ENG0SsHNeX9QcM3V6ecB6HTxL9MjWBRFoxSDLYQbOxV_68UcpNOCpkxaCCGYpyI8/s1600/Screenshot+from+2016-06-25+08%253A05%253A47.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Dasar: Bermain dengan Table" border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpHrxHnQi65hASlEoLw59YnulKBzsoil8KtroDqasmb8ZZ0RvEXo0rrGhtvSyqXB40iX9BQ4Ddxl-ENG0SsHNeX9QcM3V6ecB6HTxL9MjWBRFoxSDLYQbOxV_68UcpNOCpkxaCCGYpyI8/s400/Screenshot+from+2016-06-25+08%253A05%253A47.png" title="HTML Dasar: Bermain dengan Table" width="400" /></a></div>
<br />
Atribut border diatas digunakan untuk menentukan bahwa tabel tersebut terdapat border (garis) atau tidak, sedangkan width digunakan untuk menentukan lebar tabel tersebut.<br />
<br />
Sekarang kita akan mencoba untuk styling tabel menggunakan <i><a href="http://ppi-tuts.blogspot.com/search/label/CSS" target="_blank">CSS</a></i> dengan menambahkan tag <style> atau dengan file <i><a href="http://ppi-tuts.blogspot.com/search/label/CSS" target="_blank">CSS</a></i>.<br />
<br /></div>
<pre class="brush: css">table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
</pre>
<br />
Maka border akan berubah<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwSNOkcVlu6XJpywQ7M8-PhQad5q_j6kPDscXJlGn8WCH3JSUebiMHuKHvIIMHC9YpHUvl5pkNrjjW-N-ROuAs9EV6d7GSqZLCj0PDmGNDn4VMTnK-7BFIRVw5suoXIiogcBMweybG-7E/s1600/Screenshot+from+2016-06-25+08%253A10%253A56.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Dasar: Bermain dengan Table" border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwSNOkcVlu6XJpywQ7M8-PhQad5q_j6kPDscXJlGn8WCH3JSUebiMHuKHvIIMHC9YpHUvl5pkNrjjW-N-ROuAs9EV6d7GSqZLCj0PDmGNDn4VMTnK-7BFIRVw5suoXIiogcBMweybG-7E/s400/Screenshot+from+2016-06-25+08%253A10%253A56.png" title="HTML Dasar: Bermain dengan Table" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
Terlihat border pada tabel tersebut menjadi tanpa space dan berwarna hitam tebal dan berukuran 1 px.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Sekarang kita akan belajar tentang colspan dan rowspan, colspan adalah sebuah fungsi yang digunakan untuk membuat beberapa kolom dalam sebuah tabel menjadi satu, sedangkan rowspan membuat beberapa baris menjadi satu. Langsung saja kita praktikkan</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<pre class="brush: html"><table border="1" width="50%">
  <tr>
    <th>Nama:</th>
    <td>Roihan Azian</td>
  </tr>
  <tr>
    <th rowspan="2">HP:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
  <tr>
      <td colspan="2">Telpon</td>
  </tr>
</table></pre>
<br />
Maka jika kita preview hasilnya akan seperti gambar di bawah:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyS7efUNRIvrhj8Z12d089cyTMp9sSedlS1Y06GYyO-XZ985wMKzJ5vnVp4kGu8cronjexKVpZUaVR9zs2JK_9ara1EMU9RKGZNWJ1FABRhWDY0i3cxo054G4l7x5fcd2s1xvdzz4C3j8/s1600/Screenshot+from+2016-06-25+08%253A21%253A40.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Dasar: Bermain dengan Table" border="0" height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyS7efUNRIvrhj8Z12d089cyTMp9sSedlS1Y06GYyO-XZ985wMKzJ5vnVp4kGu8cronjexKVpZUaVR9zs2JK_9ara1EMU9RKGZNWJ1FABRhWDY0i3cxo054G4l7x5fcd2s1xvdzz4C3j8/s400/Screenshot+from+2016-06-25+08%253A21%253A40.png" title="HTML Dasar: Bermain dengan Table" width="400" /></a></div>
<div style="text-align: justify;">
Kolom <i>HP</i> diatas menjadi seperti itu karena menggabungkan 2 baris dengan atribut <i>rowspan="2"</i>, sedangkan kolom <i>telpon</i> menjadi panjang karena menggabungkan 2 kolom dengan atribut colspan="2".</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Itulah sedikit pembahasan tentang <i>HTML</i> table, jika ada kesalahan atau pertanyaan silahkan kirimkan ke <i><b><a href="https://www.facebook.com/ppituts/" rel="nofollow" target="_blank">Facebook</a></b></i> dan <b><i><a href="https://twitter.com/Official_PPI" rel="nofollow" target="_blank">Twitter</a></i></b> kami, atau bisa juga dengan berkomentar di bawah.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Terima kasih atas kunjungan anda, semoga bermanfaat.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Wassalamualaikum Wr. Wb.</div>

HTML Dasar: Bermain dengan Table

Assalamualaikum Wr. Wb. HTML Dasar: Bermain dengan Table | Pada kesempatan ini saya akan membahas tentang table dalam HTML , Fungs...

Baca selengkapnya »

Belajar HTML dan Menjalankannya Secara Online

Assalamualaikum Wr. Wb.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://ppi-tuts.blogspot.com/2016/06/online-html-editor.html" target="_blank"><img alt="Belajar HTML dan Menjalankannya Secara Online" border="0" height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1uYcenBz87SUBt9Cz8kgLsevornoFx1hSoMqzxQMJ8nuNC3ttrQ4egKpMwDbDTzyGXWJ_Zy85AjAsC07nG4tiPnEy60kgAodOPCFUmHtradA5ADcUzy2954GxpjbQ7cbrZevsHXoS57g/s400/Screenshot+from+2016-06-24+14%253A53%253A42.png" title="Belajar HTML dan Menjalankannya Secara Online" width="400" /></a></div>
<br />
<br />
<div style="text-align: justify;">
<b>Belajar HTML dan Menjalankannya Secara Online</b> | Pada kesempatan kali ini saya akan berbagi sedikit untuk mempermudah kita dalam belajar <a href="http://ppi-tuts.blogspot.com/search/label/Web%20Design" target="_blank">Pemrograman Web</a> khususnya <i><a href="http://ppi-tuts.blogspot.com/search/label/HTML" target="_blank">HTML</a></i>, mungkin teman-teman sudah sering membaca artikel tentang Tutorial <i><a href="http://ppi-tuts.blogspot.com/search/label/Web%20Design" target="_blank">Web Design</a></i> <i>HTML</i> dan <a href="http://ppi-tuts.blogspot.com/search/label/CSS" target="_blank"><i>CSS</i></a> disini, di tutorial tersebut biasanya teman teman akan mempraktikkannya secara langsung di notepad dan di jalankan di browser.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Tetapi kali ini saya akan berbagi sedikit tips untuk mempermudah menjalankan sebuah file HTML dan CSS untuk pemula agar mudah dalam praktik nya nanti.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Oke langsung saja kita mulai dari yang pertama.</div>
<br />
<span style="font-size: large;">1. html-online.com</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAfTZP_AHUt34AOU5rUq3zRYJHUZAMRENsyRnuukb481NCYMrPMoq5GO8t4qcIb3JcyuUOiaLVBeQEfdUyEn4zAjLnhaBV-qD7Aua8HSCpvrfSUWBTGaz6mNj4u2kQ-uHchMJqTe_FiQ/s1600/Screenshot+from+2016-06-24+14%253A39%253A59.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML dan Menjalankannya Secara Online" border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAfTZP_AHUt34AOU5rUq3zRYJHUZAMRENsyRnuukb481NCYMrPMoq5GO8t4qcIb3JcyuUOiaLVBeQEfdUyEn4zAjLnhaBV-qD7Aua8HSCpvrfSUWBTGaz6mNj4u2kQ-uHchMJqTe_FiQ/s400/Screenshot+from+2016-06-24+14%253A39%253A59.png" title="Belajar HTML dan Menjalankannya Secara Online" width="400" /></a></div>
<br />
<div style="text-align: justify;">
Dalam aplikasi ini anda bisa secara langsung menjalankan file HTML dnegan live preview di layar sebelah kirinya, jadi bisa mempermudah anda dalam belajar HTML.</div>
<br />
<span style="font-size: large;">2. onlinehtmleditor.net</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVTtsUo95X3915k5ocevsrW9ag-4lIesZWJYjRCNGnE7Lmx8KWdKOVZICa-R_tvgQ7N7vI0xeB56zBp_MU7TaKFsmoxfP16v3NXxq4MWdAUN6yGDWVNlruVo4Hrd8vjvTaEXo9rzJetA/s1600/Screenshot+from+2016-06-24+14%253A44%253A00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML dan Menjalankannya Secara Online" border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVTtsUo95X3915k5ocevsrW9ag-4lIesZWJYjRCNGnE7Lmx8KWdKOVZICa-R_tvgQ7N7vI0xeB56zBp_MU7TaKFsmoxfP16v3NXxq4MWdAUN6yGDWVNlruVo4Hrd8vjvTaEXo9rzJetA/s400/Screenshot+from+2016-06-24+14%253A44%253A00.png" title="Belajar HTML dan Menjalankannya Secara Online" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hampir sama dengan yang atas, aplikasi/web ini mempunyai tampilan yang lebih sederhana, dan bentuk previewnya hampir sama dengan browser pada umumnya, tidak seperti editor atas yang mempunyai tampilan seperti di text editor.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;">3. www.tutorialspoint.com/try_html_online.php</span></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1QxJw8xWK0nHW3V5_hgD3ybkw5iiTnhAz63FES6qLzzFc2tW1rdicvpzWcQE5u7bK0Z1MQGfBEfED5fdDovTZATBmxFHPU5nMWY1Eo82rDZ2AGqeh1W8Ukk-5VeMp56RXhLPQeEpMC54/s1600/Screenshot+from+2016-06-24+14%253A49%253A41.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML dan Menjalankannya Secara Online" border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1QxJw8xWK0nHW3V5_hgD3ybkw5iiTnhAz63FES6qLzzFc2tW1rdicvpzWcQE5u7bK0Z1MQGfBEfED5fdDovTZATBmxFHPU5nMWY1Eo82rDZ2AGqeh1W8Ukk-5VeMp56RXhLPQeEpMC54/s400/Screenshot+from+2016-06-24+14%253A49%253A41.png" title="Belajar HTML dan Menjalankannya Secara Online" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Yang terakhir ada dari sebuah situs penyedia layanan pembelajaran online secara gratis, TutorialsPoint, didalamnya tidak hanya bisa menjalankan HTML saja, tapi banyak sekali Bahasa Pemrograman yang bisa di jalankan seperti, PHP, MySQL, Java, Perl, dan lain sebagainya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Nah, itulah beberapa Online HTML editor yang bisa mempermudah kita dalam menjalankan atau mencoba menjalankan file HTML, semoga bermanfaat untuk anda yang masih belajar.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sekian dan Terima Kasih.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Wassalamualaikum Wr. Wb.</div>

Belajar HTML dan Menjalankannya Secara Online

Assalamualaikum Wr. Wb. Belajar HTML dan Menjalankannya Secara Online | Pada kesempatan kali ini saya akan berbagi sedikit untuk mem...

Baca selengkapnya »

HTML Dasar: Bermain Dengan Paragraf

Assalamualaikum Wr. Wb.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmgYJDpALxKUP_88fsfYpND_vqBwed4SLJNX0PtPTlNsKIU71EbitaYuF7iYPUjuexRH4FeCax07EiAe20xZgdaxE44yrJkO_pKnXDYJZhVFQ6nrkfBQUZ2cpDmgHtfyqMiJSWTNGY5yc/s1600/g.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmgYJDpALxKUP_88fsfYpND_vqBwed4SLJNX0PtPTlNsKIU71EbitaYuF7iYPUjuexRH4FeCax07EiAe20xZgdaxE44yrJkO_pKnXDYJZhVFQ6nrkfBQUZ2cpDmgHtfyqMiJSWTNGY5yc/s320/g.png" width="320" /></a></div>
<br />
<div style="text-align: justify;">
<b>HTML Dasar: Bermain Dengan Paragraf</b> | Setelah lama tak berjumpa, kali ini saya akan berbagi sedikit ilmu tentang Web Programming <i><a href="http://ppi-tuts.blogspot.com/search/label/HTML" target="_blank">HTML</a></i> karena beberapa request dari teman-teman yang baru memulai belajar tentang Web Programming, setelah sebelumnya saya pernah posting tentang <a href="http://ppi-tuts.blogspot.co.id/2015/08/html-dasar-part-1.html" target="_blank">HTML dasar</a>, kali ini adalah lanjutan dari artikel tersebut.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pertama, apa sih yang di maksud dengan paragraf ? Paragraf adalah merupakan suatu kumpulan suatu kesatuan pikiran yang lebih tinggi serta lebih luas dari pada kalimat. Atau definisi paragraf adalah bagian yang berasal dari suatu karangan yang terdiri dari sejumlah kalimat, yang isinya mengungkapkan satuan informasi/kalimat dengan pikiran utama sebagai pengendaliannya dan juga pikiran penjelas sebagai pendukungnya. (<a href="http://www.pengertianku.net/2014/12/pengertian-paragraf-dan-jenisnya-secara-lengkap.html" rel="nofollow" target="_blank">Link</a>).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Tetapi dalam dunia Web Programming, paragraf digunakan untuk memulai sebuah baris baru dalam penulisan text, atau digunakan untuk sebuah judul (heading) di suatu paragraf.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Langsung saja kita mulai dengan tag yg pertama yaitu tag <p>...</p>, tag ini digunakan untuk membuat sebuah paragraf dengan ukuran huruf normal, dan setiap tag ini akan di batasi oleh break line</div>
<div style="text-align: justify;">
<br />
<span style="font-size: large;">Tag <p></span><br />
<br /></div>
<div style="text-align: justify;">
Contoh: </div>
<pre class="brush: html">Baris Pertama
Baris Kedua
<p>Baris Pertama</p><p>Baris Kedua</p></pre>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Maka Hasilnya akan seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyoWyoYOJ-yaH6pYVs5r4veGtQS5fdT2Crmezk21pXoVJthvoY62Yf03nkzcSajhzZ8K6MrPppmMgnfDY5BQBmWiCegdEbW355lPMHWoqkTD4tP8uwNPRtG_2k23R3Rjoy0vu7XcVp3iw/s1600/Screenshot+from+2016-06-23+12%253A37%253A31.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Dasar: Bermain Dengan Paragraf" border="0" height="313" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyoWyoYOJ-yaH6pYVs5r4veGtQS5fdT2Crmezk21pXoVJthvoY62Yf03nkzcSajhzZ8K6MrPppmMgnfDY5BQBmWiCegdEbW355lPMHWoqkTD4tP8uwNPRtG_2k23R3Rjoy0vu7XcVp3iw/s400/Screenshot+from+2016-06-23+12%253A37%253A31.png" title="HTML Dasar: Bermain Dengan Paragraf" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Artinya adalah tag <p></p> Akan secara otomatis membuat paragraf baru, dan tanpa tag tersebut maka sebuah tulisan tidak akan menjadi paragraf.<br />
<br />
<span style="font-size: large;">Tag <h1> - <h6></span><br />
<br />
Selanjutnya kita akan membahas tag <h1> - <h6>, tag ini digunakan untuk membuat sebuah Heading, H berarti heading dan nomor menentukan ukuran heading tersebut.<br />
<br />
Contoh:
<br />
<br />
<pre class="brush: html"><h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6></pre>
<br />
Maka Hasilnya akan seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil9kORpwFKynus-09Rp7YG8JUd1XOKEsNzdwUBtsqUsCypHTxulIu1rKGCHDWCGeODmPVoTaziAP_47BhRC4i2OzLUFniDi7OZ9uqQ4ZHOjdIPuHLiaZMnRrpDihLXjKy57gV3B4TInfk/s1600/Screenshot+from+2016-06-23+12%253A46%253A02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Dasar: Bermain Dengan Paragraf" border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil9kORpwFKynus-09Rp7YG8JUd1XOKEsNzdwUBtsqUsCypHTxulIu1rKGCHDWCGeODmPVoTaziAP_47BhRC4i2OzLUFniDi7OZ9uqQ4ZHOjdIPuHLiaZMnRrpDihLXjKy57gV3B4TInfk/s400/Screenshot+from+2016-06-23+12%253A46%253A02.png" title="HTML Dasar: Bermain Dengan Paragraf" width="400" /></a></div>
<br />
Heading biasanya digunakan untuk sebuah judul atau awalan sebuah laman.<br />
<br />
Selanjutnya kita akan membahas tentang beberapa font styling<br />
<br /></div>
<pre class="brush: html"><strong>Strong</strong>
<em>Text<em><br>
<i>AAAA</i>
<b>BOLD</b></pre>
<br />
Maka Hasilnya akan seperti ini:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtDGKpHPmZT3974KQb3FbJ6jKbXzLdjdKejIRmqr-_6LHPDLCmOXKmHdGovOWzjA5Pzjm6TT-8INgXqgn3l0H5lpRpLQlQwTmG4h8RxN24ru9AGuagdr44aND9lTEYZsukQjahX10a0-s/s1600/Screenshot+from+2016-06-23+12%253A53%253A25.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Dasar: Bermain Dengan Paragraf" border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtDGKpHPmZT3974KQb3FbJ6jKbXzLdjdKejIRmqr-_6LHPDLCmOXKmHdGovOWzjA5Pzjm6TT-8INgXqgn3l0H5lpRpLQlQwTmG4h8RxN24ru9AGuagdr44aND9lTEYZsukQjahX10a0-s/s400/Screenshot+from+2016-06-23+12%253A53%253A25.png" title="HTML Dasar: Bermain Dengan Paragraf" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<strong> Digunakan untuk menebalkan text sama seperti <b>, sedangkan <em> dan <i> digunakan untuk memiringkan text (Italic), dan <br> digunakan untuk membuat baris baru (Break Line)<br />
<br />
Sekian artikel kali ini, untuk semua kritik dan saran harap kirimkan ke Twitter dan Facebook kami atau bisa berkomentar di bawah.<br />
<br />
Terima Kasih atas kunjungannya.<br />
<br />
Wassalamualaikum Wr. Wb.

HTML Dasar: Bermain Dengan Paragraf

Assalamualaikum Wr. Wb. HTML Dasar: Bermain Dengan Paragraf | Setelah lama tak berjumpa, kali ini saya akan berbagi sedikit ilmu tent...

Baca selengkapnya »

HTML Dasar Part 1

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-WyLlqEHcNbzSk8d66fPAiWWCEtleTCrHnHWptrG-ngLNyTQafA8O6l6ZRP2KJBGe0LLbng8NixFQpmXK3yHdUUA2o8pGnsK2Zm4g0wtP0knxylw9LJji4nt3A_0btAaTfHafOXJxNOo/s1600/html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Dasar Part 1" border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-WyLlqEHcNbzSk8d66fPAiWWCEtleTCrHnHWptrG-ngLNyTQafA8O6l6ZRP2KJBGe0LLbng8NixFQpmXK3yHdUUA2o8pGnsK2Zm4g0wtP0knxylw9LJji4nt3A_0btAaTfHafOXJxNOo/s320/html.jpg" title="HTML Dasar Part 1" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Assalamualaikum Wr. Wb.<br />
<div style="text-align: justify;">
<b>HTML Dasar Part 1</b> | Kali ini Para Pencari Ilmu aktif kembali dengan materi-materi yang ringan saja, yap, materi kali ini adalah HTML Dasar, walaupun hampir semua artikel di blog ini sudah menggunakan HTML tetapi tidak ada salahnya untuk mengulas kembali materi tentang HTML.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pertama pasti sudah tahu semua tag apa yang digunakan untuk mengawali script html, yaitu <html> dan di setiap tag di tutup dengan </html>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Selanjutnya ada tag <head> yang berfungsi sebagai kepala document html, di tutup juga dengan </head></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Di dalam tag head biasanya berisi tag tag seperti, <title></title>, <meta/>, <link> ini untuk menyisipkan file CSS biasanya, lalu ada <style></style>, dan lain sebagainya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Setelah itu ada tag yang juga tak kalah penting, yaitu tag <body>  </body> yang berisi content yang akan di tampilkan pada sebuah web.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Berikut ini adalah salah satu script dasar dari HTML :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<pre class="php" name="code"><html>
<head>
<title>Para Pencari Ilmu</title>
</head>
<body>
Para Pencari Ilmu<br/>
<h2>heading2</h2>
</body>
</html>
</pre>
</div>
<br />
Setelah itu jangan lupa di save dengan ekstensi .html agar bisa terdeteksi sebagai file html, dan harus di save dalam sebuah folder agar mudah mencari dan membukanya.<br />
<br />
Sekian Artikel singkat kali ini, semoga bermanfaat ^_^<br />
<br />
Wassalamualaikum Wr. Wb.

HTML Dasar Part 1

Assalamualaikum Wr. Wb. HTML Dasar Part 1 | Kali ini Para Pencari Ilmu aktif kembali dengan materi-materi yang ringan saja, yap, mate...

Baca selengkapnya »

Membuat Efek Shadow atau Bayangan dengan CSS

<div class="separator" style="clear: both; text-align: center;">
<img alt="Membuat Efek Shadow atau Bayangan dengan CSS" border="0" height="203" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIF5FJwjlm_440Ji15Wwle4zT_OhUUJNspaoUMFjYFc9Mi_XdnvwJJbyGILWautOES_bEnvRDeWH-JvBlt0E0pho_7ERGh4rQ6zPVCHzkCz975tYQgNBJSkX4v1-GxUUj9Lt1p9ymUmU/s1600/ss+shadow1.jpg" title="Membuat Efek Shadow atau Bayangan dengan CSS" width="640" /></div>
<br />
Assalamualaikum Wr. Wb.<br />
<div style="text-align: justify;">
<b>Membuat Efek Shadow atau Bayangan dengan CSS</b> | <b><i><a href="http://ppi-tuts.blogspot.com/" target="_blank">Para Pencari Ilmu</a></i></b> kembali lagi setelah 4 hari tidak posting artikel karena kesibukan sekolah ^_^ kali ini kami akan share tentang Web Design, yaitu efek shadow atau bayangan dengan <i><a href="http://www.parapencariilmu.com/search/label/CSS" target="_blank">CSS</a></i>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Yap, Mari kita mulai dengan membuat file html, silahkan ketikkan script seperti di bawah (di tutorial ini mulai dari bagian intinya saja, silahkan ketikkan script utama <b><i><html></i></b> dan <b><i><link ... css</i></b>  telebih dahulu).</div>
<blockquote class="tr_bq">
<p <span style="color: purple;">class</span>="<span style="color: blue;">button1</span>"><a href="http://www.parapencariilmu.com" title="Like" target="blank">Like Us</a></p></blockquote>
<div style="text-align: justify;">
Ya, ini hanyalah contoh, anda bisa isi dengan sesuai kebutuhan anda, code yang berwarna <span style="color: blue;">biru</span> tersebut adalah nama <span style="color: purple;">class</span> efek shadow nantinya. Setelah itu kita membuat file <b><i><a href="http://ppi-tuts.blogspot.com/search/label/CSS" target="_blank">css</a> </i></b>nya, ketikkan script seperti di bawah.<br />
<br />
<pre name='code' class='css'>
.button1 {
text-align: center;<br /> background-color: #333;<br /> height: 50px;<br /> width: 150px;<br /> padding-top: 1.4em;<br /> margin-left: 14.8em;<br /> border-radius: 8px;<br /> -moz-border-radius: 8px;<br /> -webkit-border-radius: 8px;<br /> -moz-border-radius: 8px;<br /> -webkit-border-radius: 8px;<br />}<br />.button1:hover {<br /> box-shadow: #333 0px 0px 15px;<br /> -moz-box-shadow: #333 0px 0px 15px;<br /> -webkit-box-shadow: #333 0px 0px 15px;<br />}<br />.button1 a {<br /> color: #ADADAD;<br />}<br />.<br /><br />button1 a:hover {<br /> text-decoration: none;<br /> color: #FFF;
</pre><div>
<br /><div style="text-align: justify;">
Script di atas adalah contoh button like yang di lengkapi juga dengan efek <span style="color: lime;">border radius</span>, code <span style="color: yellow;">.button1:hover</span> disitu berguna ketika mouse hover/menuju ke button tersebut, maka button itu akan mengeluarkan bayangan <span style="color: #e06666;">15px</span> di setiap sisi dengan warna #333 (hitam), maka hasilnya akan seperti ini :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUvu-HMkqVfcnaZ-SJKz0AjgS3zAqnbmN4eVMqJJ_Elk3N_soE8Xzz0rc2Z2UYxSOsKRGTEi4MQJ5sFWoMmKouFnyGlueuXUdJmQEfEx8LLO5pW5vwvzshgrNWG7C4G8KcKULnLzcUAcY/s1600/ss+shadow2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Efek Shadow atau Bayangan dengan CSS" border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUvu-HMkqVfcnaZ-SJKz0AjgS3zAqnbmN4eVMqJJ_Elk3N_soE8Xzz0rc2Z2UYxSOsKRGTEi4MQJ5sFWoMmKouFnyGlueuXUdJmQEfEx8LLO5pW5vwvzshgrNWG7C4G8KcKULnLzcUAcY/s1600/ss+shadow2.jpg" title="Membuat Efek Shadow atau Bayangan dengan CSS" width="320" /></a></div>

<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Jika menurut anda bayangan kurang lebar, anda bisa merubah <span style="color: #e06666;">15px </span>sesuai keinginan anda.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Cukup mudah dipahami bukan ? Jika ada pertanyaan seputar script di atas silahkan <b>berkomentar</b> di bawah yaa ^_^</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Anda juga bisa request artikel ke kami dengan mengirimkannya ke <a href="http://twitter.com/Official_PPI" rel="nofollow" target="_blank"><b><i>Twitter</i></b></a> atau <b><i>Fanspage</i></b> kami.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Jika artikel ini dirasa bermanfaat silahkan share artikel ini ke orang yang membutuhkan dengan mencantumkan sumbernya yaa ^_^</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sekian artikel kali ini, mohon maaf jika ada kesalahan.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Wassalamualaikum Wr. Wb.<br />
<br />
<br />
<div style="text-align: center;">
<span style="font-size: large;"><a href="http://ppi-tuts.blogspot.com/2014/02/ppi-design.html" target="_blank">Download Template PPI Design</a></span></div>
</div>
</div>

Membuat Efek Shadow atau Bayangan dengan CSS

Assalamualaikum Wr. Wb. Membuat Efek Shadow atau Bayangan dengan CSS | Para Pencari Ilmu kembali lagi setelah 4 hari tidak posting ar...

Baca selengkapnya »

Mempercantik Kontak Form dengan CSS3

<div class="separator" style="clear: both; text-align: center;">
<img alt="Mempercantik Kontak Form dengan CSS3" border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtC9HJ63yh4iKaQEMGsH6wr9dCNzmZflIENbOBYWSBeOTxnGDuq1N3erE_igqm2pPELfqpMZ1gyOUk1mtYC1ZSoogTQaRCCszdVlbFWjPIT8-MmZdakNCrVYXyNH3lT4Hq_AnevYeYxSg/s1600/contact+form+1.jpg" title="Mempercantik Kontak Form dengan CSS3" width="320" /></div>
<br />
Assalamualaikum Wr. Wb.<br />
<div style="text-align: justify;">
<b>Mempercantik Kontak Form dengan CSS3</b> | Kali ini kami akan share tentang cara membuat kontak form dengan HTML dan <a href="http://ppi-tuts.blogspot.comsearch/label/CSS" target="_blank">CSS</a>3, file-file yang di butuhkan disini ada 2, yaitu contact-form.html dan style.css, pertama-tama kita buat file contact-form.html terlebih dahulu.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Silahkan buat file HTML baru, bisa di edit dengan notepad atau dreamweaver, setelah itu copy script di bawah dan paste-kan ke file tersebut.</div>
<div style="text-align: justify;">
</div>
<blockquote>
<!DOCTYPE html><br />
<html><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><head><br />
<span class="Apple-tab-span" style="white-space: pre;">  </span><title>CSS Contact Form</title><br />
<span class="Apple-tab-span" style="white-space: pre;">  </span><meta charset="utf-8"><br />
<span class="Apple-tab-span" style="white-space: pre;">  </span><link rel="stylesheet" type="text/css" href="style.css" media="all"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></head><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><body><br />
<span class="Apple-tab-span" style="white-space: pre;">  </span><h2>Kontak Kami</h2><br />
<span class="Apple-tab-span" style="white-space: pre;">  </span><form class="form"><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span><p class="name"><br />
<span class="Apple-tab-span" style="white-space: pre;">    </span><input type="text" name="name" id="name" placeholder="Nama Anda"><br />
<span class="Apple-tab-span" style="white-space: pre;">    </span><label for="name">Nama</label><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span></p><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span><p class="email"><br />
<span class="Apple-tab-span" style="white-space: pre;">    </span><input type="text" name="email" id="email" placeholder="mail@contoh.com"><br />
<span class="Apple-tab-span" style="white-space: pre;">    </span><label for="name">Email</label><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span></p><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span><p class="web"><br />
<span class="Apple-tab-span" style="white-space: pre;">    </span><input type="text" name="web" id="web" placeholder="www.contoh.com"><br />
<span class="Apple-tab-span" style="white-space: pre;">    </span><label for="name">Website</label><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span></p><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span><p class="text"><br />
<span class="Apple-tab-span" style="white-space: pre;">    </span><textarea name="text" placeholder="Tulis apa yang ingin anda sampaikan ke kami"></textarea><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span></p><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span><p class="submit"><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span><input type="submit" value="Kirim"><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span></p><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></body><br />
</html></blockquote>
Pada bagian class jangan sampai ada yang di ubah namanya, jika ingin di rubah silahkan di edit juga di file CSSnya. Save file dengan nama <b>contact-form.html</b><br />
<br />
Maka hasilnya akan seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrvd5-QJOtMxKO7makcifTLEakmDdnJNzIS-D5bOesRAmuHnv2XjU_yF7f97rHfO7p2i28XKbUDZ0ExDODL7xoGZ7PCVQYsI5cDJG2ODRfbpNRYjJvtMrfWPBNd9K3_R99mwbfN78eH7U/s1600/contact+form+2jpg.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mempercantik Kontak Form dengan CSS3" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrvd5-QJOtMxKO7makcifTLEakmDdnJNzIS-D5bOesRAmuHnv2XjU_yF7f97rHfO7p2i28XKbUDZ0ExDODL7xoGZ7PCVQYsI5cDJG2ODRfbpNRYjJvtMrfWPBNd9K3_R99mwbfN78eH7U/s1600/contact+form+2jpg.jpg" title="Mempercantik Kontak Form dengan CSS3" width="320" /></a></div>
<br />
Tampilannya memang sederhana karena belum kita buat file CSSnya, sekarang kita buat file <a href="http://ppi-tuts.blogspot.com/search/label/CSS" target="_blank">CSS</a>nya.<br />
<br />
Silahkan lihat file css di bawah<br />
<br />
<blockquote>
body {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 40px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>font-size: 14px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>font-style: Verdana, Arial, Sans-serif;<br />
}<br />
h2 {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-bottom: 20px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #474E69;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>font-style: Arial;<br />
}<br />
input, textarea {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 10px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 1px solid #E5E5E5;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 200px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #999999;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;<br />
}<br />
textarea{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 400px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 150px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>max-width: 400px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>line-height: 18px;<br />
}<br />
input:hover, textarea:hover,<br />
input:focus, textarea:focus{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-color: 1px solid #06f;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>box-shadow: #333 0px 0px 8px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-box-shadow: #333 0px 0px 8px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-box-shadow: #333 0px 0px 8px;<br />
}<br />
.form label {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-left: 10px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #333<span class="Apple-tab-span" style="white-space: pre;"> </span>;<br />
}<br />
.submit input {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 100px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 40px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #06f;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #fff;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-radius: 4px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-border-radius:4px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-border-radius:4px;<br />
} </blockquote>
<br />
<ul>
<li>Pada bagian <b><i>color</i></b> bisa di ubah sesuai keinginan.</li>
<li><b><i>box shadow</i></b> berguna untuk memberikan effect bayangan pada textarea dan input.</li>
<li><b><i>hover</i></b> dan <b><i>focus</i></b> berguna jika cursor menuju ke textarea, maka dibagian luarnya akan ada effect bayangan dan jika di klik bordernya akan berwarna #06f biru muda (bisa di ganti)</li>
</ul>
<div>
Nah tadi itu adalah file <a href="http://www.parapencariilmu.com/search/label/CSS" target="_blank">CSS</a>nya, silahkan di save dengan nama <b><i>style.css</i></b>, anda bisa mengubah isinya sesuai kebutuhan. Maka hasilnya akan seperti ini </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDrhBPFyLNys8lRTb4uBdPU2LJa8RBHbVv7b2b8RrtRmDXX2T1OCiZzxTnVwsw9ceyHrSJ5_I99Dhz48B-1VIR9eZN4MPWOu7P84coNrog2PFT9S2ZTxNyjFYUOL6T_jSS7grw6TVj9A/s1600/contact+form+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mempercantik Kontak Form dengan CSS3" border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDrhBPFyLNys8lRTb4uBdPU2LJa8RBHbVv7b2b8RrtRmDXX2T1OCiZzxTnVwsw9ceyHrSJ5_I99Dhz48B-1VIR9eZN4MPWOu7P84coNrog2PFT9S2ZTxNyjFYUOL6T_jSS7grw6TVj9A/s1600/contact+form+1.jpg" title="Mempercantik Kontak Form dengan CSS3" width="320" /></a></div>
<div>
<br />
<div style="text-align: center;">
<span style="font-size: large;"><a href="http://ppi-design-demo.bl.ee/demo/contact%20form.html" rel="nofollow" target="_blank"><b>DEMO</b></a></span></div>
</div>
<div>
<br /></div>
<div>
Untuk penjelasan tentang file CSS dan file HTMLnya bisa anda tanyakan dengan komentar di bawah atau kirim ke <b><i>Twitter</i></b> dan <b><i>fanspage</i></b> kami.</div>
<div>
<br /></div>
<div>
Sekian <a href="http://ppi-tuts.blogspot.com/search/label/Tutorial" target="_blank">Tutorial</a> kali ini, jika dirasa bermanfaat silahkan share ke Social Media dan Web anda dengan mencantumkan sumbernya.</div>
<div>
<br /></div>
<div>
Follow <b><i><a href="http://twitter.com/official_PPI" target="_blank">@Official_PPI</a></i></b> di Twitter dan Like <b><i>Fanspage</i></b> Kami di Facebook untuk update seputar blog ini.</div>
<div>
<br /></div>
<div>
Wassalamualaikum Wr. Wb.</div>
<br />
<div style="text-align: center;">
<a href="http://api.idhostinger.com/redir/858332" target="_blank"><img alt="Hosting Gratis" border="0" height="125" src="http://www.idhostinger.com/banners/id/hostinger-125x125-powered-2.gif" width="125" /></a></div>

Mempercantik Kontak Form dengan CSS3

Assalamualaikum Wr. Wb. Mempercantik Kontak Form dengan CSS3 | Kali ini kami akan share tentang cara membuat kontak form dengan HTML d...

Baca selengkapnya »

Membuat Buku Tamu dengan PHP dan MySQL

<div class="separator" style="clear: both; text-align: center;">
<a href="http://ppi-tuts.blogspot.com/2013/12/database-dengan-php-dan-sql-sederhana.html" target="_blank"><img alt="Membuat Buku Tamu dengan PHP dan MySQL" border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOF4zSR20z8r_LBHsQJ-jB1zykTzi5rXtqYa2-oDPOXEDKo7vjvwwfoKnxDc9qPhmqAGKQ8Y7XTGnDd8aDFmUcbCVU4Ziv3-O7jdDkICncidSIArqXVsKCVf2O_MGrLS6Hel5Ej8rJdto/s320/bukutamuphp.jpg" title="Membuat Buku Tamu dengan PHP dan MySQL" width="320" /></a></div>
<br />
Assalamualaikum Wr. Wb.<br />
<div style="text-align: justify;">
<b>Membuat Buku Tamu dengan PHP dan MySQL</b> | Pagi hari ini admin akan share cara membuat <a href="http://ppi-tuts.blogspot.com/2013/12/database-dengan-php-dan-sql-sederhana.html" target="_blank">buku tamu</a> dengan <b><a href="http://ppi-tuts.blogspot.com/search/label/PHP" target="_blank">PHP</a></b> dan <b>MySQL</b>, cara ini adalah materi UAS admin nanti, jadi biar cepat hafal scriptnya lebih baik di posting di blog ini hehe.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pertama kita membuat database di localhost, jangan lupa install Xampp dan run Apache dan <b><a href="http://ppi-tuts.blogspot.com/2013/12/database-dengan-php-dan-sql-sederhana.html" target="_blank">MySQL</a></b> nya, setelah database terbuat, lalu buatlah tabel di dalam database tersebut dengan kolom Nama, Umur, Pesan. Anda juga bisa membuat kolom lain sesuai kebutuhan anda.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Setelah tabel terbuat, langkah selanjutnya buatlah form untuk pengisian data yang akan di upload ke database.</div>
<div style="text-align: justify;">
Ini adalah contoh form yang sudah saya buat : </div>
<div style="text-align: justify;">
</div>
<blockquote>
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<title>Untitled Document</title><br />
</head><br />
<body><br />
<form id="form1" name="form1" method="post" action="<span style="color: blue;">proses.php</span>"><br />
<label>Nama<br />
<input name="nama" type="text" id="nama" /><br />
</label><br />
<p><br />
<label>Umur<br />
<input name="umur" type="text" id="umur" /><br />
</label><br />
</p><br />
<p><br />
<label>Pesan<br />
<textarea name="pesan" id="pesan"></textarea><br />
</label><br />
</p><br />
<p><br />
  <label><br />
  <input type="submit" name="Submit" value="Submit" /><br />
  </label><br />
</p><br />
</form><br />
</body><br />
</html></blockquote>
lalu save dengan nama form.php, maka hasilnya akan seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyATK0uOLL3G6K5dKWS8kJIN1_-J2PCzBEPa5eIG9lcajT90_6xtsi4z_zk_KYgKl9gUPOI6H2I8-4-TLRvAaLbX6fk0H2pVt2IPVBbOgxj6g9lCdsmyeORb_9Kja9RkjcWO8c4h9OWoU/s1600/formnya.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Buku Tamu dengan PHP dan MySQL" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyATK0uOLL3G6K5dKWS8kJIN1_-J2PCzBEPa5eIG9lcajT90_6xtsi4z_zk_KYgKl9gUPOI6H2I8-4-TLRvAaLbX6fk0H2pVt2IPVBbOgxj6g9lCdsmyeORb_9Kja9RkjcWO8c4h9OWoU/s1600/formnya.jpg" title="Membuat Buku Tamu dengan PHP dan MySQL" /></a></div>
<br />
sederhana memang, tapi anda bisa memodifikasinya sendiri, setelah itu kita buat file <a href="http://ppi-tuts.blogspot.com/search/label/PHP" target="_blank">PHP</a> untuk input data ke database :<br />
<br />
<blockquote>
<html><br />
<head><title>Redirect</title><br />
</head><br />
<body><br />
<?php<br />
$server='localhost';<br />
$user='root';<br />
$password='';<br />
$database='test'; //nama database yang sudah di buat<br />
$koneksi=mysql_connect($server,$user,$password);<br />
mysql_select_db($database,$koneksi);<br />
$nama=$_POST['nama'];<br />
$umur=$_POST['umur'];    //data yang di input ke database<br />
$pesan=$_POST['pesan'];<br />
//variasi jika data sudah terkirim<br />
echo 'Pesan anda sudah terkirim, Lihat pesan anda disini';<br />
echo '<br>';<br />
echo '<a href="isipesan.php">Click</a>';<br />
$sql="INSERT INTO pesan(nama, umur, pesan) VALUES ('$nama','$umur','$pesan')";<br />
mysql_query($sql);<br />
?><br />
</body><br />
</html></blockquote>
Setelah itu save dengan nama <span style="color: blue;">proses.php</span> karena "action" setelah form yang sudah di buat tadi akan berlanjut ke file PHP ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPMzb40BhGNX3BEFepkHRH1tnmh874CjgkLKGKAchVREawuXaZGxUAy-f4TJbt9yWa6zBJH0bVkinPK1gBOdq-EOEj87VGGySk3Y4GW_63SW0R_uVM4-J7_29UidTyKJWeak6FbWmSUb4/s1600/redirectnya.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Buku Tamu dengan PHP dan MySQL" border="0" height="74" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPMzb40BhGNX3BEFepkHRH1tnmh874CjgkLKGKAchVREawuXaZGxUAy-f4TJbt9yWa6zBJH0bVkinPK1gBOdq-EOEj87VGGySk3Y4GW_63SW0R_uVM4-J7_29UidTyKJWeak6FbWmSUb4/s320/redirectnya.jpg" title="Membuat Buku Tamu dengan PHP dan MySQL" width="320" /></a></div>
<br />
Nah, jika sudah selesai, sekarang kita mencoba untuk menampilkan data tersebut di dalam sebuah tabel, silahkan ketik script di bawah :<br />
<br />
<blockquote>
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<title>Untitled Document</title><br />
</head><br />
<body><br />
<?php<br />
$server = 'localhost';<br />
$user='root';<br />
$password='';<br />
$database='test';<br />
//koneksi dengan server<br />
$koneksi=mysql_connect($server, $user, $password);<br />
mysql_select_db ($database, $koneksi);<br />
//koneksi dengan database<br />
$sql="SELECT <span style="color: lime;">* FROM pesan</span>";<br />
$query=mysql_query($sql);<br />
echo "<table border='1'>";<br />
echo "<tr>";<br />
echo "<td><b>Nama</b></td> <td><b>Umur<br></td> <td><b>Pesan<b></td>";<br />
echo "</tr>";<br />
  while($tampil=mysql_fetch_array($query)){<br />
  $nama = $tampil['nama'];<br />
  $umur=$tampil['umur'];<br />
  $pesan=$tampil['pesan'];<br />
<br />
  echo "<tr><br />
    <td>$nama</td><br />
    <td>$umur</td><br />
    <td>$pesan</td><br />
  </tr><br />
  <tr><br />
    <td></td><br />
    <td></td><br />
    <td></td><br />
  </tr>";<br />
<br />
 }<br />
echo  "</table>";<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>?><br />
</body><br />
</html></blockquote>
save dengan nama tampil.php, yang berwarna <span style="background-color: lime;">hijau</span> adalah tabel yang ingin di ambil datanya, maka hasilnya akan seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWtpy4CU7PLsSj7kkpbpa5dRD5Yhyphenhyphen26TZqGaHDWTUF2tSGGUf2adAUTyMMdfUpoyQRrOaaHE5NfFw2Kui3s5Gtq6URoy0uTDuj0e5E1w107MOZ6-jH-HdbxznL0vHC6BEUjGC_PnlDEqQ/s1600/tampilphpsdf.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Buku Tamu dengan PHP dan MySQL" border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWtpy4CU7PLsSj7kkpbpa5dRD5Yhyphenhyphen26TZqGaHDWTUF2tSGGUf2adAUTyMMdfUpoyQRrOaaHE5NfFw2Kui3s5Gtq6URoy0uTDuj0e5E1w107MOZ6-jH-HdbxznL0vHC6BEUjGC_PnlDEqQ/s320/tampilphpsdf.jpg" title="Membuat Buku Tamu dengan PHP dan MySQL" width="320" /></a></div>
<br />
Jika semua sudah selesai, copy semua file tersebut ke folder htdocs di folder xampp nya, lalu jalankan di browser <i>localhost/nama.foldernya/form.php</i>, jangan lupa xampp sudah run atau berjalan.<br />
<br />
Sekian artikel hari ini, jika ada pertanyaan dan kesulitan silahkan berkomentar di bawah atau kirimkan ke fanspage dan Twitter kami.<br />
<br />
semoga bisa bermanfaat untuk kita semua.<br />
<br />
Wassalamualaikum Wr. Wb.<br />
<br />
<br />
<div style="text-align: center;">
<a href="http://api.idhostinger.com/redir/858332" target="_blank"><img alt="Hosting Gratis" border="0" height="125" src="http://www.idhostinger.com/banners/id/hostinger-125x125-powered-2.gif" width="125" /></a></div>

Membuat Buku Tamu dengan PHP dan MySQL

Assalamualaikum Wr. Wb. Membuat Buku Tamu dengan PHP dan MySQL | Pagi hari ini admin akan share cara membuat buku tamu dengan PHP da...

Baca selengkapnya »

Cara Membuat Effect Background Transparan dengan CSS

<div class="separator" style="clear: both; text-align: center;">
<img alt="Cara Membuat Effect Background Transparan dengan CSS" border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHy5EKYj6oSyvXt5rQZdpNYM_qdtHkTcib1JYnnlUATG6WhXyNg6XfVAl6Z_FqoXJ4fs7gg6yAAzKy4_qnKvv8J3EbqbCgG5dl2LuFbs7RKD1L4fwkMIuPfjUojiKDrXz2xzTh7I8t_-w/s400/ss+hover1.jpg" title="Cara Membuat Effect Background Transparan dengan CSS" width="400" /></div>
<br />
Assalamualaikum Wr. Wb.<br />
<div style="text-align: justify;">
<b>Cara Membuat Effect Background Transparan dengan CSS</b> | Pada malam hari ini admin akan membagikan cara membuat effect background <a href="http://ppi-tuts.blogspot.com/2013/11/membuat-effect-transparan-css-1.html" target="_blank">transparan</a> dengan menggunakan <b>CSS</b> (<b>Cascading Style Sheet</b>), cara ini tidak hanya bisa digunakan untuk background saja, tapi bisa juga di gunakan untuk gambar, table, dan lain lain.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Langkah pertama, buatlah file CSSnya : </div>
<div style="text-align: justify;">
</div>
<blockquote class="tr_bq">
<style title="<span style="color: red;">transparan1</span>" type="text/css"><br />
.transparan1{background:<span style="color: lime;">#333333</span>;opacity:0.7;-moz-opacity:0.7;-khtml-opacity: 0.7;filter:alpha(opacity=<span style="color: blue;">70</span>);}<br />
</style></blockquote>
<div class="separator" style="clear: both; text-align: justify;">
Pada teks yang berwarna <b><span style="color: red;">merah</span></b> bisa anda ganti sesuai keinginan anda, untuk teks berwarna <b><span style="color: blue;">biru</span></b> adalah tingkat transparannya,  yang berwarna <span style="color: lime;">hijau</span> adalah warna backgroundnya, anda bisa mengganti warna tersebut sesuai keinginan anda, untuk peletakannya bisa lihat seperti gambar di bawah</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Cara Membuat Effect Background Transparan dengan CSS" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjekJszj5O6pOsft3JWVugnDPoGF13luvYj0PGLUi8zfsBFk2ZqafZIvXYYFZa4A-ue_fghdjqJDaJCSSX4O_V38tCcbsydEfmNprB6LVwPRcN1os_r_7DjLKIj5Ywc7DOsStyxS-T02LU/s1600/ss+transparan1.jpg" title="Cara Membuat Effect Background Transparan dengan CSS" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Setelah itu kita akan memanggil CSS tersebut dengan menggunakan class="transparan1" pada bagian yang ingin diberikan effect transparan, contohnya :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPeeC4XjOoRPKsq7CVCdwN7U_TKeejLPHg8VYAz2hn-dO-bQorhwdA-1gR2eRhQMvb-igQJ-oVzEXIH-tJCjDACV0DunpjTx-aNxDYg4XA6bQNRnJpXYCe5jIcDt5enkcD3QAglo7q4tg/s1600/ss+transparan2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Effect Background Transparan dengan CSS" border="0" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPeeC4XjOoRPKsq7CVCdwN7U_TKeejLPHg8VYAz2hn-dO-bQorhwdA-1gR2eRhQMvb-igQJ-oVzEXIH-tJCjDACV0DunpjTx-aNxDYg4XA6bQNRnJpXYCe5jIcDt5enkcD3QAglo7q4tg/s640/ss+transparan2.jpg" title="Cara Membuat Effect Background Transparan dengan CSS" width="640" /></a></div>
<br />
Jika sudah, silahkan preview di Browser, bisa di Firefox atau Chromium.<br />
<br />
Nah, tadi itu adalah cara mudah untuk membuat effect transparan menggunakan <b>CSS</b>, jika ada kesulitan silahkan komentar di bawah atau kirimkan ke fanspage kami, bisa juga mention ke twitter kami :D<br />
<br />
Semoga Bermanfaat<br />
<br />
Wassalamualaikum Wr. Wb.

Cara Membuat Effect Background Transparan dengan CSS

Assalamualaikum Wr. Wb. Cara Membuat Effect Background Transparan dengan CSS | Pada malam hari ini admin akan membagikan cara membuat ...

Baca selengkapnya »

HTML Dasar: Bermain dengan Table

Belajar HTML dan Menjalankannya Secara Online

HTML Dasar: Bermain Dengan Paragraf

HTML Dasar Part 1

Membuat Efek Shadow atau Bayangan dengan CSS

Mempercantik Kontak Form dengan CSS3

Membuat Buku Tamu dengan PHP dan MySQL

Cara Membuat Effect Background Transparan dengan CSS

Artikel Populer Minggu Ini

Kategori

Arsip