BatWeber

Belajar HTML Part 13 - Tabel

<br />
<br />
Simpan file tersebut, misal dengan nama <b>tabel.html. </b>Berikut tampilan yang dihasilkan dari <i>scrypt </i>di atas :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGvcVCptzuCoo238-VQc9epJb45Fek8TtAghG2reHJbDNwSpvWxr5NjG9ltAMkftYWu9UPyAEATsR924e5FTpPqLStYjj7AWuglya2x_5qV0tEUeVz8DSKp0XLpBxF91vEQvtNKW4Kzn0/s1600/tutorial_html_tabel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML tabel" border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGvcVCptzuCoo238-VQc9epJb45Fek8TtAghG2reHJbDNwSpvWxr5NjG9ltAMkftYWu9UPyAEATsR924e5FTpPqLStYjj7AWuglya2x_5qV0tEUeVz8DSKp0XLpBxF91vEQvtNKW4Kzn0/s400/tutorial_html_tabel.jpg" title="Tutorial HTML Part 13 tabel" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>1. Border</b></div>
<div class="separator" style="clear: both; text-align: justify;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: justify;">
Namun demikian kita lihat <i>scrypt </i>di atas menghasilkan tabel tanpa garis. Jika kita ingin menambahkan garis pada tabel tersebut kita perlu menambahkan atribut <b>border </b>pada tag <b><table>.</b></div>
<div class="separator" style="clear: both; text-align: justify;">
<b><br /></b></div>
Jelasnya, ubah file di atas dengan <i>scrypt </i>di bawah ini :<br />
<br />
<code><table></code><br />
<code> <tr></code><br />
<code>  <th>Nama</th></code><br />
<code>  <th>Usia</th></code><br />
<code> </tr></code><br />
<code> <tr></code><br />
<code>  <td>Kamaludin Khoir</td></code><br />
<code>  <td>22</td></code><br />
<code> </tr> </code><br />
<code></table>
</code><br />
<br />
Simpan perubahan lalu jalankan pada <i>web browser. </i>Berikut hasilnya :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MRrivoOqpnLAonbdCv9BgD7aAV9-EJKZ608cf9y8nLvpp0dfYhZtjg6aO_uh3f2aigADQxU68TpfQZ-_cRRQvX6hh4SvSqI104oG8Zd71iRheGL08j3U1Db3J0rdoqcAX1Ab1wa8mug/s1600/tutorial_html_tabel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Tabel" border="0" height="347" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MRrivoOqpnLAonbdCv9BgD7aAV9-EJKZ608cf9y8nLvpp0dfYhZtjg6aO_uh3f2aigADQxU68TpfQZ-_cRRQvX6hh4SvSqI104oG8Zd71iRheGL08j3U1Db3J0rdoqcAX1Ab1wa8mug/s640/tutorial_html_tabel.jpg" title="Tutorial HTML Part 13 Tabel" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Kita juga bisa menambahkan atribut border tersebut dalam <i>style </i><b>CSS </b>dengan menambahkan <i>scrypt </i>berikut :</div>
<br />
<code><style></code><br />
<code> table, th, td {</code><br />
<code>      border: 1px solid black;</code><br />
<code> } </code><br />
<code></style>
</code><br />
<br />
<b>2. <i>Collapsed Border</i></b><br />
<b><i><br /></i></b>
Dalam tampilan di atas kita melihat terdapat jarak antar <i>cell </i>dalam tabel. Dengan menambahkan atribut <i>collapsed border </i>kita bisa menghilangkan jarak tersebut. Berikut contoh <i>scrypt-</i>nya :<br />
<br />
<code><style></code><br />
<code> table, th, td {</code><br />
<code>      border: 1px solid black;
border-collapse: collapse;</code><br />
<code> } </code><br />
<code></style>
</code><br />
<br />
Kita tinggal menambahkan <i>scrypt </i><b>border-collapse : collapse; </b>seperti di atas, maka hasilnya akan berubah menjadi seperti berikut :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8DZ2o3BvWtyc35g_ZPXRa7cRcCm1lTfEuXmpyidte_hSxEmhxJsXTbfD9W6aRcfXeCYnJa3tV-c_bbTk49p06sVUmj97bWtDALEq4X3-SkDvNe-shut2_Jel_Xj98cEdSW_AgnGTfyAc/s1600/tutorial_html_tabel.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Tabel" border="0" height="94" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8DZ2o3BvWtyc35g_ZPXRa7cRcCm1lTfEuXmpyidte_hSxEmhxJsXTbfD9W6aRcfXeCYnJa3tV-c_bbTk49p06sVUmj97bWtDALEq4X3-SkDvNe-shut2_Jel_Xj98cEdSW_AgnGTfyAc/s640/tutorial_html_tabel.png" title="Tutorial HTML Part 13 Tabel" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Seperti yang kita lihat, jarak antar <i>cell </i>pada tabel menghilang hingga hanya dipisahkan oleh border.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>3. <i>Cell Padding</i></b></div>
<div class="separator" style="clear: both; text-align: justify;">
<b><i><br /></i></b></div>
<div class="separator" style="clear: both; text-align: justify;">
<i>Cell Padding </i>berfungsi untuk mengatur jarak antara tepi <i>cell </i>dengan konten yang ada dalam <i>cell </i>tersebut. Lebih jelasnya silahkan ubah <i>style </i>yang telah kita buat tadi menjadi seperti berikut :</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<code><style></code><br />
<code> table, th, td {</code><br />
<code>      border: 1px solid black;
border-collapse: collapse;</code><br />
<code> }</code><br />
<code> th, td {</code><br />
<code>  padding : 15px;</code><br />
<code> } </code><br />
<code></style>
</code><br />
<br />
Simpan perubahan dan jalankan file yang telah kita buat tadi. Berikut tampilan perubahannya :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvLjuYFE-KZ5kac2shP6M-CGkExxDO6IyiN40qeeEBF-Dy-HA8-cTGgy-vnl2e2eUqFoBoT-w00d5L63ax6YUbgcmmHw4pUD6ttHqmP2kwSIVjoSF6whpoVqKZRQIk2niiHk5UILqbi3o/s1600/tutorial_html_tabel.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Tabel" border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvLjuYFE-KZ5kac2shP6M-CGkExxDO6IyiN40qeeEBF-Dy-HA8-cTGgy-vnl2e2eUqFoBoT-w00d5L63ax6YUbgcmmHw4pUD6ttHqmP2kwSIVjoSF6whpoVqKZRQIk2niiHk5UILqbi3o/s640/tutorial_html_tabel.png" title="Tutorial HTML Part 13 Tabel" width="640" /></a></div>
<br />
Terdapat jarak sebesar 15 pixel antara garis tepi dengan isi <i>cell. </i>Untuk mengurangi dan menambah jarak, kita tinggal merubah angka 15 yang telah kita tulis tadi.<br />
<br />
<b>4. <i>Border Spacing </i>dan <i>Text-Alignment</i></b><br />
<b><i><br /></i></b>
<i>Border Spacing </i>dimanfaatkan untuk mengatur jarak antar <i>border </i>pada sebuah tabel. Sedangkan <i>Text Alignment </i>digunakan untuk mengatur posisi teks dalam tabel. Contoh penggunaanya adalah sebagai berikut. Ubah <i>scrypt </i>yang tadi kita buat menjadi sebagai berikut :<br />
<br />
<code><style></code><br />
<code> table, th, td {</code><br />
<code>      border: 1px solid black;
border-spacing: 5px;</code><br />
<code> }
th, td {</code><br />
<code>  padding : 15px;</code><br />
<code> }
th {</code><br />
<code>      text-align: center;</code><br />
<code> } </code><br />
<code></style>
</code><br />
<br />
Berikut perubahan yang dihasilkan :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidbjgIvuD9FHM1PjAJ94r2eN7Bn8NQd28IfNHG2bVAF-1vLnVWC050-yyJcN8hefdKTKhMl_UJVJdIQiss3T0JZPdAIhPiRzW_KsHqBh_5mK4FAGkZvk22S2rajnjAWoLdCrf39VIO6YE/s1600/tutorial_html_tabel.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML Part 13 - Tabel" border="0" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidbjgIvuD9FHM1PjAJ94r2eN7Bn8NQd28IfNHG2bVAF-1vLnVWC050-yyJcN8hefdKTKhMl_UJVJdIQiss3T0JZPdAIhPiRzW_KsHqBh_5mK4FAGkZvk22S2rajnjAWoLdCrf39VIO6YE/s640/tutorial_html_tabel.png" title="Belajar HTML Part 13 - Tabel" width="640" /></a></div>
<br />
<ol>
<li>Perlu diperhatikan bahwa <i style="font-weight: bold;">border-spacing </i>dimasukkan mengganti <b><i>b</i></b><b style="font-style: italic;">order-collapse </b>karena <i style="font-weight: bold;">border-spacing </i>tidak bisa digunakan berbarengan dengan <b><i>border-collapse.</i></b></li>
<li>Dengan menambahkan <i style="font-weight: bold;">text-align: center; </i>pada elemen <b>th</b>, maka teks dalam <b><i>table heading </i></b>akan pindah ke tengah.</li>
</ol>
<div>
<b>5. <i>Colspan </i>dan <i>Rowspan</i></b></div>
<div>
<b><i><br /></i></b></div>
<div style="text-align: justify;">
Bagaimana jika kita ingin membuat <i>merger </i>untuk lebih dari satu kolom atau baris dalam tabel? Sekarang coba ubah <i>scrypt </i>yang tadi kita tulis menjadi seperti di bawah :</div>
<div style="text-align: justify;">
<br /></div>
<code><table></code><br />
<code> <tr></code><br />
<code>  <th colspan ="2">Nama</th></code><br />
<code>  <th rowspan="2">Usia</th></code><br />
<code> </tr></code><br />
<code> <tr></code><br />
<code>  <th>Nama Depan</th></code><br />
<code>  <th>Nama Belakang</th></code><br />
<code> </tr></code><br />
<code> <tr></code><br />
<code>  <td>Kamaludin</td></code><br />
<code>  <td>Khoir</td></code><br />
<code>  <td>22</td></code><br />
<code> </tr> </code><br />
<code></table> </code><br />
<code><style></code><br />
<code>  table, th, td {</code><br />
<code>      border: 1px solid black;
border-spacing: 5px;</code><br />
<code>  }</code><br />
<code> th, td {</code><br />
<code>  padding : 15px;</code><br />
<code>  }</code><br />
<code> th {
    text-align: center;</code><br />
<code> } </code><br />
<code></style>
</code><br />
<br />
<div style="text-align: justify;">
Yang perlu diperhatikan adalah :<br />
<ol>
<li>Pemberian atribut <b>colspan="2" </b>pada <i>cell </i><b>Nama. </b>Maksud dari <i>scrypt </i>ini, kita akan me-<i>merger</i> dua kolom menjadi satu kolom dengan isi konten <b>Nama</b>.</li>
<li>Pemberian atribut <b>rowspan="2" </b>pada <i>cell </i><b>Usia. </b>Maksud dari <i>scrypt </i>ini, kita akan me-<i>merger</i> dua baris menjadi satu baris dengan isi konten <b>Usia</b>.<b> </b></li>
</ol>
<b>S</b>ehingga menghasilkan tampilan sebagai berikut :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPCYD4BKqwIodNWPs-L0CVMD9jcwKnIlRS7woqP3E8aUs5uPZ2bnacdXvUf1_ggdprVVF3AC3tzj9xZfptzdI9i9I4GN02NntXegaTg3y9LtQdNbb1T-S5ycuqIUYxsdwS6GwclGMP85k/s1600/tutorial_html_tabel.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML Part 13 - Tabel" border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPCYD4BKqwIodNWPs-L0CVMD9jcwKnIlRS7woqP3E8aUs5uPZ2bnacdXvUf1_ggdprVVF3AC3tzj9xZfptzdI9i9I4GN02NntXegaTg3y9LtQdNbb1T-S5ycuqIUYxsdwS6GwclGMP85k/s400/tutorial_html_tabel.png" title="Belajar HTML Part 13 - Tabel" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>6. <i>Caption</i></b></div>
<div class="separator" style="clear: both; text-align: justify;">
<b><i><br /></i></b></div>
<div class="separator" style="clear: both; text-align: justify;">
Untuk menambahkan <i>caption </i>kita tinggal menambahkan tag <caption> tepat setelah tag <table>. Contohnya sebagai berikut :</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<code><table></code><br />
<code> <caption>Biodata Diri</caption></code><br />
<code> <tr></code><br />
<code>  <th colspan ="2">Nama</th></code><br />
<code>  <th rowspan="2">Usia</th></code><br />
<code> </tr></code><br />
<code> <tr></code><br />
<code>  <th>Nama Depan</th></code><br />
<code>  <th>Nama Belakang</th></code><br />
<code> </tr></code><br />
<code> <tr></code><br />
<code>  <td>Kamaludin</td></code><br />
<code>  <td>Khoir</td></code><br />
<code>  <td>22</td></code><br />
<code> </tr> </code><br />
<code></table> </code><br />
<code><style></code><br />
<code> table, th, td {</code><br />
<code>      border: 1px solid black;
border-spacing: 5px;</code><br />
<code> }</code><br />
<code> th, td {</code><br />
<code>  padding : 15px;</code><br />
<code>  }</code><br />
<code> th {</code><br />
<code>      text-align: center;</code><br />
<code>  } </code><br />
<code></style>
</code><br />
<br />
Berikut hasilnya :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg29qMDGJyWN_WwKaulraBmmPfHl9aOTOW_VrnVDKkrAg6PBGbaU4TQie0KptPa1mXyt7GYWIPC4hPWu7uRUmgrrayEDbUASHLYgQRpeWxV_XEQbJmLlkzuwY1GKX5IPrLJdUjp-CeFEV8/s1600/tutorial_html_tabel.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Tabel" border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg29qMDGJyWN_WwKaulraBmmPfHl9aOTOW_VrnVDKkrAg6PBGbaU4TQie0KptPa1mXyt7GYWIPC4hPWu7uRUmgrrayEDbUASHLYgQRpeWxV_XEQbJmLlkzuwY1GKX5IPrLJdUjp-CeFEV8/s400/tutorial_html_tabel.png" title="Tutorial HTML Part 13 Tabel" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>7. Menambahkan S<i>tyle </i>Khusus Untuk Tabel yang Berbeda</b></div>
<div class="separator" style="clear: both; text-align: justify;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: justify;">
Kita bisa membuat sebuah tabel dengan <i>style </i>khusus. Coba buka kembali file yang kita edit tadi, kemudian beri atribut pada tag <<b>table> </b>yang pertama yaitu atribut <b>id </b>dengan value <b>t1. </b>Kemudian buat satu tabel baru dengan <b>id t2.</b> Tambahkan satu baris pada kedua tabel dengan menggunakan tag <tr> dan <td>. Kemudian ubah isi dari tag <style> menjadi seperti berikut :</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<code><style></code><br />
<code> table {</code><br />
<code>      width:100%;</code><br />
<code>  }</code><br />
<code> table, th, td {</code><br />
<code>      border: 1px solid black;
    border-collapse: collapse;</code><br />
<code> }</code><br />
<code> th, td {</code><br />
<code>      padding: 5px;
    text-align: left;</code><br />
<code>  } </code><br />
<code> table#t1 tr:nth-child(even) {</code><br />
<code>      background-color: #eee;</code><br />
<code> }</code><br />
<code> table#t1 tr:nth-child(odd) {</code><br />
<code>     background-color:#fff;
}</code><br />
<code> table#t1 th {</code><br />
<code>      background-color: black;
    color: white;</code><br />
<code> } </code><br />
<code></style>
</code>
<br />
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Berikut <i>scrypt </i>lengkapnya :</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<code><table id="t1"></code><br />
<code> <caption>Biodata Diri</caption></code><br />
<code> <tr></code><br />
<code>  <th colspan ="2">Nama</th></code><br />
<code>  <th rowspan="2">Usia</th></code><br />
<code> </tr>
<tr></code><br />
<code>  <th>Nama Depan</th></code><br />
<code>  <th>Nama Belakang</th></code><br />
<code> </tr></code><br />
<code> <tr></code><br />
<code>  <td>Kamaludin</td></code><br />
<code>  <td>Khoir</td></code><br />
<code>  <td>22</td></code><br />
<code> </tr> </code><br />
<code></table> </code><br />
<code><table id="t2"></code><br />
<code> <caption>Biodata Diri</caption></code><br />
<code> <tr></code><br />
<code>  <th colspan ="2">Nama</th></code><br />
<code>  <th rowspan="2">Usia</th></code><br />
<code> </tr></code><br />
<code> <tr></code><br />
<code>  <th>Nama Depan</th></code><br />
<code>  <th>Nama Belakang</th></code><br />
<code> </tr></code><br />
<code> <tr></code><br />
<code>  <td>Kamaludin</td></code><br />
<code>  <td>Khoir</td></code><br />
<code>  <td>22</td></code><br />
<code> </tr> </code><br />
<code></table> </code><br />
<code><style></code><br />
<code> table {
    width:100%;
}</code><br />
<code> table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}</code><br />
<code> th, td {
    padding: 5px;
    text-align: left;
}</code><br />
<code> table#t1 tr:nth-child(even) {
    background-color: #eee;
}</code><br />
<code> table#t1 tr:nth-child(odd) {
   background-color:#fff;
}</code><br />
<code> table#t1 th {
    background-color: black;
    color: white;
} </code><br />
<code></style>
</code><br />
<br />
Berikut hasilnya :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUCi6cU_7w7VNZg4v_Yxs4P6Z16lrFvI_7J5vtz4dj0dLKIhcBUyVmhAsZ5Cz0H2plAlQyRkNTQ3iyNNGK8OGjd_8pZf0i50Gss01UhDvF8EtHISxC7F9zyIeVXfuYv21EP3WsVcKrc6A/s1600/tutorial_html_tabel.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML Part 13 - Tabel" border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUCi6cU_7w7VNZg4v_Yxs4P6Z16lrFvI_7J5vtz4dj0dLKIhcBUyVmhAsZ5Cz0H2plAlQyRkNTQ3iyNNGK8OGjd_8pZf0i50Gss01UhDvF8EtHISxC7F9zyIeVXfuYv21EP3WsVcKrc6A/s640/tutorial_html_tabel.png" title="Belajar HTML Part 13 - Tabel" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Penjelasan :</div>
<div class="separator" style="clear: both; text-align: justify;">
</div>
<ol>
<li>Kita membuat dua tabel dengan <b>id yang berbeda </b>yaitu <b>t1 </b>dan <b>t2</b></li>
<li>Pada tag <style> kita memberi desain khusus pada tabel dengan <b>id t1 </b>dengan menambahkan elemen table#t1</li>
<li><b>table#t1 nth-child(even) </b>bertujuan untuk menambahkan <i>style </i>khusus untuk baris anak urutan genap (baris kedua, keempat, keenam, dst)</li>
<li><b>background-color :#eee; </b>maksudnya kita menambahkan <i>style </i>untuk <i>background </i>elemen yang dipilih (baris anak urutan genap) dengan kode warna #eeeeee (abu-abu)</li>
<li><b>table#t1 nth-child(odd) </b>bertujuan untuk menambahkan <i>style </i>khusus untuk baris anak urutan ganjil (baris ketiga, kelima, ketujuh, dst)</li>
<li><b>background-color :#eee; </b>maksudnya kita menambahkan <i>style </i>untuk <i>background </i>elemen yang dipilih (baris anak urutan ganjil) dengan kode warna #ffffff (putih)</li>
<li><b>table#t1 th </b>bertujuan untuk menambahkan <i>style </i>khusus untuk <b><i>Table Heading</i></b></li>
<li><b>background-color: black;<i> </i></b>maksudnya kita menambahkan <i>style </i>untuk <i>background </i>elemen yang dipilih (baris <b>table heading</b>) dengan warna black (hitam)<b><i></i></b></li>
<li><b>color: white; </b>maksudnya kita menambahkan <i>style </i>untuk teks<i> </i>elemen yang dipilih (baris <b>table heading</b>) dengan warna white (putih)</li>
</ol>
<div>
Demikian <b>Seri Belajar HTML untuk penjelasan tentang Tabel. </b>Semoga bermanfaat.<br />
<br /></div>
<div>
Terima kasih, <i>Wassalamu'alaikum Warahmatullaahi Wabarakaatuh.</i></div>
<br />
<br />

Belajar HTML Part 13 - Tabel

Assalamu'alaikum Warahmatullaahi Wabarakaatuh. Sebelumnya kita telah membahas tentang Gambar pada HTML . Kali ini kita akan me...

Belajar HTML Part 12 - Gambar

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEittY2f5poLeayIuofliQCmY7kfIzAx7egxFX2vkjZz_xxnsOqlB_2_WLaXE636VwabZgXoBSfxurWPdltaymGqa2QO2dBTomQH2UJE3NrMzTkw-kIJqJpAHsAbXhRr8y_BCW3e5aBed2s/s1600/html_tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Gambar" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEittY2f5poLeayIuofliQCmY7kfIzAx7egxFX2vkjZz_xxnsOqlB_2_WLaXE636VwabZgXoBSfxurWPdltaymGqa2QO2dBTomQH2UJE3NrMzTkw-kIJqJpAHsAbXhRr8y_BCW3e5aBed2s/s320/html_tutorial.jpg" title="Tutorial HTML Part 12 Gambar" width="320" /></a></div>
<br />
<i>Assalamu'alaikum Warahmatullaahi Wabarakatuh</i><br />
<div style="text-align: justify;">
Sebelumnya kita telah belajar tentang <a href="http://batweber.blogspot.com/2015/12/belajar-html-part-11-tautan-link.html" target="_blank">Tautan atau link pada HTML.</a> Kali ini kita akan mempelajari tentang <b>gambar. </b><i>Syntaks </i>dasar untuk menyisipkan gambar adalah sebagai berikut :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<img src="lokasi gambar" alt="teks alternatif" /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
atribut src kita isi dengan lokasi gambar yang akan kita sisipkan sedangkan atribut alt kita isi dengan teks yang akan menjadi alternatif jika gambar yang kita sisipkan tidak bisa ditampilkan.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>1. Atribut <i>Width,</i> <i>Height </i>dan <i>Style </i>untuk mengatur ukuran gambar</b></div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
Pada <i>default-</i>nya sebuah gambar akan ditampilkan dengan ukuran sesuai dengan gambar aslinya. Namun tentu sering kali kita menginginkan ukuran yang tepat untuk menampilkan gambar. Ada dua cara untuk mengatur ukuran gambar. Yang pertama adalah dengan menggunakan atribut <i style="font-weight: bold;">width </i>dan <i style="font-weight: bold;">height. </i>Berikut <i>syntax </i>dasarnya :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<img src="lokasi gambar" alt="teks alternatif"  width="lebar" height="tinggi" /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
atau kita juga bisa menggunakan atribut <i style="font-weight: bold;">style. </i>Berikut cara penggunaannya :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<img src="lokasi gambar" alt="teks alternatif" style="width:lebar;height:tinggi;" /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Untuk lebih jelasnya, ikuti langkah berikut :<br />
1. Buat sebuah folder, simpan satu gambar di dalam folder tersebut. Misalnya, saya di sini menyimpan sebuah gambar dengan nama <b>batcomputer93.jpg. </b>Kemudian coba ketik <i>scrypt </i>berikut pada notepad++ Anda :</div>
<br />
<code><img src="batcomputer93.jpg" alt="gambar tidak bisa dimunculkan" width="100px" height="100px" /><br>
<img src="batcomputer93.jpg" alt="gambar tidak bisa dimunculkan" style="width:100px;height:100px;" />
</code><br />
<br />
Simpan file yang berisi <i>scrypt </i>tersebut dalam folder yang sama dengan gambar yang telah disediakan sebelumnya. Berikut tampilan yang dihasilkan :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1N-nj7f0EV0y8ggTICAsuAAOol_ffSZJ4RRW2EWqIzAnLboIVb3n53_7yoweDaAigJuRPvOS9mX8HyP9NeA8W55Ngv8DmV8JJsihJmYfj1mW-admRHZweXaAI9W5wxcMaU0oPeR6JZGQ/s1600/tutorial_html_gambar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Gambar" border="0" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1N-nj7f0EV0y8ggTICAsuAAOol_ffSZJ4RRW2EWqIzAnLboIVb3n53_7yoweDaAigJuRPvOS9mX8HyP9NeA8W55Ngv8DmV8JJsihJmYfj1mW-admRHZweXaAI9W5wxcMaU0oPeR6JZGQ/s640/tutorial_html_gambar.jpg" title="Tutorial HTML Part 12 Gambar" width="640" /></a></div>
<br />
<b>2. Menampilkan gambar dari folder lain</b><br />
<b><br /></b>
<br />
<div style="text-align: justify;">
Selanjutnya, kita bisa mengambil sebuah gambar dari folder lain. Biasanya, dalam membuat sebuah halaman web, konten-konten yang dibutuhkan haruslah tertata secara rapi. Oleh karena itu kita harus menyimpan gambar-gambar pada satu folder terpisah. Untuk mengakses gambar dalam sebuah folder, coba kita akses kembali folder yang telah kita buat tadi, kemudian buat folder baru di dalamnya. Kita beri nama folder baru tersebut, misal dengan nama <b>gambar. </b>Lalu pindahkan gambar yang tadi kita telah siapkan, ke dalam folder baru tersebut.</div>
<div style="text-align: justify;">
Kemudian kita buka kembali file yang berisi <i>scrypt </i>tadi. Lalu kita ubah <i>scrypt</i>-nya seperti berikut :</div>
<div style="text-align: justify;">
<br /></div>
<code><img src="gambar/batcomputer93.jpg" alt="gambar tidak bisa dimunculkan" width="100px" height="100px" /><br /></code><br />
<code><img src="gambar/batcomputer93.jpg" alt="gambar tidak bisa dimunculkan" style="width:100px;height:100px;" />
</code><br />
<br />
<div style="text-align: justify;">
Perlu kita perhatikan, yang kita ubah di sini terletak pada atribut <b>src. </b>Yang pada awalnya <b>src="batcomputer93.jpg" </b>kita ubah menjadi <b>src="gambar/batcomputer93.jpg.</b></div>
<div style="text-align: justify;">
Tambahan kata <b>gambar</b> di sana berarti kita mengakses folder bernama <b>gambar. </b>Selanjutnya kita mengakses isi folder tersebut dengan menambahkan <i>slash</i>(/) dan diikuti nama file yang kita inginkan.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>3. Menampilkan gambar dari internet dengan (<i>server </i>yang berbeda)</b></div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
Jika kita ingin menampilkan sebuah gambar dari internet, kita harus memiliki <i>link </i>atau tautan dari gambar tersebut. Contohnya bisa kita lihat dalam <i>scrypt </i>berikut :</div>
<div style="text-align: justify;">
<br /></div>
<code><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GNP8BO2kyY_I4mC_wPZRbjdZUUANJ5PD4dxoItzkLcIwKa9SDj7iowyYaNXJQJy_rlpjsVLYsC63ApmKwxfP36pTWeTa1fE3qAki7AuxEeLJba9sD_aMS46I4YMTZN5il5NbyhyphenhyphenPqII/s640-Ic42/thebatcomputer93_logo.jpg" alt="gambar tidak bisa dimunculkan" width="100px" height="100px" /><br />
</code><br />
<br />
<div style="text-align: justify;">
Yang berubah di sana adalah pada atribut <b>src. </b>Di mana lokasi gambar kita arahkan pada sebuah tautan yang menuju pada gambar tersebut. Berikut hasil dari <i>scrypt </i>di atas :</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/AVvXsEhGRbvWtoPMYD3tayvn8WUqa3a5xClgJHafKO9SjFzMpiDuQYoMPDvIUCTNS4zgKKEqCseOhTmrgIHYcaZUiNKcVqE5gtQb_-yT_qBFLFE8oqpnqmiYZsJdFomzyMNlXkHD5Xev5d3YJL0/s1600/tutorial_html_gambar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Gambar" border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGRbvWtoPMYD3tayvn8WUqa3a5xClgJHafKO9SjFzMpiDuQYoMPDvIUCTNS4zgKKEqCseOhTmrgIHYcaZUiNKcVqE5gtQb_-yT_qBFLFE8oqpnqmiYZsJdFomzyMNlXkHD5Xev5d3YJL0/s640/tutorial_html_gambar.jpg" title="Tutorial HTML Part 12 Gambar" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>4. Floating</b></div>
<div class="separator" style="clear: both; text-align: justify;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: justify;">
Selanjutnya, kita bisa mengatur <b>floating image. Floating image </b>digunakan untuk menyesuaikan posisi gambar dengan teks. Lebih jelasnya, coba ketik <i>scrypt </i>berikut :</div>
<br />
<code><img alt="gambar tidak bisa dimunculkan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GNP8BO2kyY_I4mC_wPZRbjdZUUANJ5PD4dxoItzkLcIwKa9SDj7iowyYaNXJQJy_rlpjsVLYsC63ApmKwxfP36pTWeTa1fE3qAki7AuxEeLJba9sD_aMS46I4YMTZN5il5NbyhyphenhyphenPqII/s640-Ic42/thebatcomputer93_logo.jpg" style="float: right; height: 100px; width: 100px;" />Gambar ini berada di sebelah kanan teks<><br /> </code><br />
<code>
<img alt="gambar tidak bisa dimunculkan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GNP8BO2kyY_I4mC_wPZRbjdZUUANJ5PD4dxoItzkLcIwKa9SDj7iowyYaNXJQJy_rlpjsVLYsC63ApmKwxfP36pTWeTa1fE3qAki7AuxEeLJba9sD_aMS46I4YMTZN5il5NbyhyphenhyphenPqII/s640-Ic42/thebatcomputer93_logo.jpg" style="float: left; height: 100px; width: 100px;" />Gambar ini berada di sebelah kiri teks<br />
</code><br />
<br />
Berikut hasilnya :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK43wPFJz6Lk-tyGNsv4wD4PLjdiaU3NC4-ATAIMRHplOA-zyHrJYOmRcayultGk1IYHyc3ItEDJiQO_ZAVcFrIqod927swSxVr2KpdvwrnEBCfMpE-oKIH0QcMr0F3goCf7pMCu2uM2w/s1600/tutorial_html_gambar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Gambar" border="0" height="346" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK43wPFJz6Lk-tyGNsv4wD4PLjdiaU3NC4-ATAIMRHplOA-zyHrJYOmRcayultGk1IYHyc3ItEDJiQO_ZAVcFrIqod927swSxVr2KpdvwrnEBCfMpE-oKIH0QcMr0F3goCf7pMCu2uM2w/s640/tutorial_html_gambar.jpg" title="Tutorial HTML Part 12 Gambar" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>5. <i>Image Maps</i></b></div>
<b><i><br /></i></b>
<br />
<div style="text-align: justify;">
Dengan fungsi <i>image-map</i>, kita bisa membuat pemetaan pada sebuah gambar, sehingga sebuah gambar bisa memiliki tautan pada area-area tertentu. Untuk mempraktekkannya, coba ikuti langkah-langkah berikut :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
1. Siapkan sebuah folder, misal kita beri nama folder tersebut <b>image map, </b>lalu kita siapkan sebuah gambar dengan nama <b>batcomputer93.jpg</b></div>
<div style="text-align: justify;">
2. Kita buat sebuah file dengan nama area_satu.html. Ketik <i>scrypt </i>berikut pada file tersebut :</div>
<div style="text-align: justify;">
<br />
<code>
<p>File ini berasal dari area satu gambar</p></code></div>
<br />
3. Buat file kedua misal dengan nama area_dua.html. Lalu masukkan <i>scrypt </i>berikut pada file tersebut :<br />
<br />
<code><p>File ini berasal dari area dua gambar</p></code><br />
<br />
4. Terakhir kita buat sebuah file dengan nama gambar_utama.html. Kemudian masukkan <i>scrypt </i>berikut pada file tersebut :<br />
<br />
<code><img alt="Tidak bisa menampilkan gambar" src="batcomputer93.jpg" style="height: 126px; width: 145px;" usemap="#imagemap" /> </code><br />
<code><map name="imagemap"></code><br />
<code> <area alt="Sun" coords="0,0,82,126" href="area_satu.html" shape="rect"></area></code><br />
<code> <area alt="Mercury" coords="90,58,3" href="area_dua.html" shape="circle"></area> </code><br />
<code></map>
</code><br />
<br />
Simpan dan jalankan file gambar_utama.html<br />
<br />
Setelah disimpan, gambar yang terdapat pada file <b>gambar_utama.html </b>akan memiliki dua area yang mengarahkan kita pada file yang berbeda.<br />
<br />
Penjelasan :<br />
1. Atribut <b>usemap pada tag <img> </b>menunjukkan nama map yang akan kita gunakan<br />
2. Tag <b><map> </b>adalah pemetaan gambar yang kita buat. Dalam atribut <b>name </b>kita beri nama map tersebut dengan nama <b>imagemap.</b><br />
3. Tag <b>area </b>menunjukkan area-area yang kita buat dalam pemetaan tersebut.<br />
4. Atribut <b>shape </b>menunjukkan bentuk area yang dibuat. <b>rect </b>untuk persegi panjang, dan <b>circle </b>untuk bentuk bulat.<br />
5. <b>Coords </b>menunjukkan koordinat area yang kita sisipi <i>link. </i><br />
<i>6. </i><b>href </b>menunjukkan file yang akan menjadi target dari <i>link </i>pada area yang telah kita buat.<br />
<br />
Demikian <b>seri belajar HTML Part 12 tentang menyisipkan gambar pada HTML. </b><br />
Semoga artikel ini bisa bermanfaat. Terima kasih,<br />
<i>Wassalamu'alaikum Wr Wb</i>

Belajar HTML Part 12 - Gambar

Assalamu'alaikum Warahmatullaahi Wabarakatuh Sebelumnya kita telah belajar tentang Tautan atau link pada HTML. Kali ini kita akan...

Belajar HTML Part 11 - Tautan (Link)

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxYRbmKC0UlN26qG8siwvWK7gDZmJQnak1492vdXXUr5p2k_db-tPUDntYTmjYKgcWXWaPncQB1C6Rix06qZJbJbf5FWXbItc62VLBv1wSo3rDSkAZSMKovbCIMTradbXdTeUFbwqCFw4/s1600/html_tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Part 11 - Tautan (link)" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxYRbmKC0UlN26qG8siwvWK7gDZmJQnak1492vdXXUr5p2k_db-tPUDntYTmjYKgcWXWaPncQB1C6Rix06qZJbJbf5FWXbItc62VLBv1wSo3rDSkAZSMKovbCIMTradbXdTeUFbwqCFw4/s320/html_tutorial.jpg" title="Tutorial HTML Part 11 - Tautan (link)" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<i>Assalamu'alaikum Warahmatullaahi Wabarakatuh</i><br />
<i><br /></i>
<br />
<div style="text-align: justify;">
Sebelumnya kita telah mempelajari <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-10-kombinasi-dengan-css.html" target="_blank">kombinasi HTML dengan CSS</a>. Pada tutorial kali ini kita akan mempelajari tentang <b>tautan (link). </b>Sebuah <i>link </i>atau tautan  menghubungkan sebuah halaman <b>website</b> ke halaman lain melalui sebuah klik. <i>Syntax </i>dasar dari sebuah <i>link </i>adalah :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<a href="alamat tautan">Teks</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Misal, coba ketik <i>script </i>berikut :</div>
<div style="text-align: justify;">
<br /></div>
<code><a href="http://batcweber.blogspot.com">Kunjungi blog kami</a>
</code><br />
<br />
Simpan dan jalankan. Berikut tampilannya :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6rho8WTBehkImYP73i-T5xeM5vKcgs2GBgXF9poPOSPMWNDMWOJ3YpRZ7bcywPX_LU0bnmQPdSx8vLFjYcBALsnFEWApp-dc24fkApL_r7ofFoiWQ5-wWzznRe_RaEhtEV-VK06gvWDs/s1600/tutorial_html_part_11_tautan_link.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Part 11 - Tautan (Link)" border="0" height="370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6rho8WTBehkImYP73i-T5xeM5vKcgs2GBgXF9poPOSPMWNDMWOJ3YpRZ7bcywPX_LU0bnmQPdSx8vLFjYcBALsnFEWApp-dc24fkApL_r7ofFoiWQ5-wWzznRe_RaEhtEV-VK06gvWDs/s640/tutorial_html_part_11_tautan_link.jpg" title="Tutorial HTML Part 11 - Tautan (Link)" width="640" /></a></div>
<br />
<div style="text-align: justify;">
File yang kita buat akan membentuk sebuah <i>link </i>yang ketika kita klik, akan mengarahkan pada halaman tertentu. </div>
<div style="text-align: justify;">
Ada beberapa hal yang harus kita ketahui tentang link. Yaitu :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>1. <i>Local Link</i></b></div>
<div style="text-align: justify;">
<b><i><br /></i></b></div>
<div style="text-align: justify;">
<i>Local link </i>dibuat untuk menghubungkan sebuah halaman ke halaman lain yang terletak pada <i>server </i>yang sama. Contohnya, coba Anda ketik <i>script </i>berikut :</div>
<div style="text-align: justify;">
<br /></div>
<code><a href="halaman 2.html">ke halaman 2</a>
</code><br />
<br />
<div style="text-align: justify;">
Simpan <i>script </i>di atas dengan nama <b>halaman 1.html. </b>Kemudian buat file lain dengan <i>script </i>sebagai berikut :</div>
<br />
<code><a href="halaman 1.html">ke halaman 1</a>
</code><br />
<br />
<div style="text-align: justify;">
Simpan file tersebut dengan nama <b>halaman 2.html. </b>Kemudian jalankan salah satu dari file tersebut. Maka akan ada 2 file berisi tautan yang ketika kita klik akan saling mengarahkan satu sama lain.</div>
<br />
<b>2. <i>Link Styling</i></b><br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sebuah link memiliki cara khusus ketika kita akan menyisipinya <i>style.</i> Ada 4 jenis <i>link </i>yang bisa kita sisipi <i>style.</i></div>
<ul>
<li style="text-align: justify;"><i>Link </i>:<i> Link </i>biasa. <i>style default-</i>nya berwarna biru dan bergaris bawah.</li>
<li style="text-align: justify;"><i>Visited </i>: <i>Link </i>yang sudah dikunjungi. <i>Default</i>-nya berwarna ungu dan bergaris bawah.</li>
<li style="text-align: justify;"><i>Hover </i>: <i>Link </i>ketika mous berada di atasnya.</li>
<li style="text-align: justify;"><i>Active </i>: <i>Link </i>yang sedang aktif. <i>Default-</i>nya berwarna merah dan bergaris bawah.</li>
</ul>
<div>
<div style="text-align: justify;">
Untuk mengaturnya, kita bisa menyisipkannya dalam <i>internal</i> ataupun <i>external </i>CSS dengan <i>script </i>seperti berikut :</div>
</div>
<div>
<br /></div>
<code>a:link {masukkan atribut dan nilai di sini}
a:visited {masukkan atribut dan nilai di sini}
a:hover {masukkan atribut dan nilai di sini}
a:active {masukkan atribut dan nilai di sini}
</code><br />
<br />
<b>3. Atribut Target</b><br />
<br />
<div style="text-align: justify;">
Sebuah <i>link </i>bisa disisipi <b>atribut target. </b>Yaitu di mana <i>link </i>tersebut akan dibuka. Ada 5 nilai dalam atribut target.</div>
<ul>
<li style="text-align: justify;">_blank : membuka tautan di tab baru</li>
<li style="text-align: justify;">_self : membuka tautan di frame yang sama</li>
<li style="text-align: justify;">_top : membuka tautan di frame teratas</li>
<li style="text-align: justify;">_parent : membuka tautan di frame induk</li>
<li style="text-align: justify;">framename : membuka tautan di nama frame secara spesifik</li>
</ul>
<div>
<div style="text-align: justify;">
Contoh <i>syntax </i>dari atribut target adalah sebagai berikut :</div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
<a href="http://batweber.blogspot.co.id" target="_blank">Kunjungi blog kami</a></div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
Dengan <i>syntax </i>di atas, <i>link </i>yang kita tuju akan dibuka pada tab baru.</div>
</div>
<div>
<br /></div>
<div>
<b>4. Menggunakan gambar sebagai <i>link.</i></b></div>
<div>
<div style="text-align: justify;">
<b><i><br /></i></b></div>
</div>
<div>
<div style="text-align: justify;">
Hal yang sering dilakukan adalah menjadikan sebuah gambar menjadi <i>link.</i> Caranya adalah kita tinggal memasukkan tag <img> di dalam tag <a>. Lebih jelasnya ikuti langkah berikut:</div>
<div style="text-align: justify;">
1. Buka kembali folder yang berisi <b>halaman 1.html </b>dan <b>halaman 2.html </b>yang tadi kita buat.</div>
<div style="text-align: justify;">
2. Cari sebuah gambar, kemudian tempatkan gambar tersebut pada folder yang sama dengan kedua file di atas. Beri nama gambar tersebut. Misal namanya <b>batweber.jpg</b></div>
<div style="text-align: justify;">
3.  Lalu ganti <i>script</i> pada halaman 1 dengan <i>script </i>berikut :</div>
</div>
<div>
<br /></div>
<code><a href="halaman 2.html"></code><br />
<code> <img src="batweber.jpg" /></code><br />
<code></a>
</code><br />
<br />
<div style="text-align: justify;">
Anda tinggal merubah tulisan yang tadi Anda buat (tulisan "ke halaman 2") dengan tag <img>. Kemudian jalankan file tersebut pada <i>web</i> <i>browser </i>Anda. Jangan lupa ganti <b>batweber.jpg </b>dengan file gambar yang Anda tambahkan. Berikut tampilan file tersebut :</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYf8gQyRDLIPc4aqAnibEZL9QbeHn2N05_XkNWkL579hlCdfptDz36sjiLJp97QTFLxK3Cr8c7MAKO65FklYZ1PODXD1vf3QZkxUd8FOuLewBf3sBc6U-AXlmxGxZV1oD3sKOfI8L7mes/s1600/tutorial_html_tautan_link.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Tautan Link" border="0" height="346" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYf8gQyRDLIPc4aqAnibEZL9QbeHn2N05_XkNWkL579hlCdfptDz36sjiLJp97QTFLxK3Cr8c7MAKO65FklYZ1PODXD1vf3QZkxUd8FOuLewBf3sBc6U-AXlmxGxZV1oD3sKOfI8L7mes/s640/tutorial_html_tautan_link.jpg" title="Tutorial HTML Part 11 Tautan Link" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Gambar yang muncul di atas merupakan gambar saya yang bernama <b>batweber.jpg.</b> Gambar yang muncul pada halaman Anda tentu akan menyesuaikan. Coba klik gambar tersebut, maka kita Anda akan di arahkan pada file <b>halaman 2.html</b></div>
<div class="separator" style="clear: both; text-align: justify;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>5. Mengarahkan tautan ke bagian tertentu pada halaman yang sama(Bookmark)</b></div>
<div class="separator" style="clear: both; text-align: justify;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: justify;">
Terakhir, kita akan coba membuat <i>link </i>yang mengarah ke <i>bookmark </i>atau kepada bagian tertentu pada halaman yang sama. Untuk jelasnya, coba ketik <i>script </i>di bawah :</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<code><a id="atas" href="#bawah">Klik untuk menuju ke bawah</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> </code><br />
<code><a id="bawah" href=#atas>Klik untuk kembali ke atas</a>
</code><br />
<br />
Yang perlu diperhatikan adalah atribut <b>id </b>dan <b>href. id </b>adalah bagian yang dituju, dan <b>href </b>adalah <i>link </i>yang akan mengarahkan kita pada bagian tersebut. Sekarang simpan file tersebut. Misalnya dengan nama <b>bookmark.html.</b> Kemudian jalankan pada <i>web browser. </i>Berikut tampilannya :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2089LaZiaSRq8ZBRJFtK_lJwL0iVLN6O0Y_EwVA8e4wDoesoXo0td38b2oc-dBjGgDe5Ot9TikQbFDpaRxd9Ppz5fL-XW5ZxUYnPuKyzMufXzg4fBilqXTZXYyMdtVGeM9-kksgI6wQ/s1600/tutorial_html_tautan_link.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Tautan Link" border="0" height="346" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2089LaZiaSRq8ZBRJFtK_lJwL0iVLN6O0Y_EwVA8e4wDoesoXo0td38b2oc-dBjGgDe5Ot9TikQbFDpaRxd9Ppz5fL-XW5ZxUYnPuKyzMufXzg4fBilqXTZXYyMdtVGeM9-kksgI6wQ/s640/tutorial_html_tautan_link.jpg" title="Tutorial HTML Part 11 Tautan Link" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Ketika kita klik tulisan tersebut, maka kita akan diarahkan pada bagian bawah file seperti tampilan di bawah :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinJ2vNsHLqoNOZdF_vivXgLupzww-As4E8nFwc4gXffeJq3lGPCaFMcVfQinCW3oee0yU6TDU8iv3d70UriW_4pTopW339yKxRCFoBvLaJUxwCNfDIjqIAoijVemo0y4MDkp3vxb91fbs/s1600/tutorial_html_tautan_link.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Tautan Link" border="0" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinJ2vNsHLqoNOZdF_vivXgLupzww-As4E8nFwc4gXffeJq3lGPCaFMcVfQinCW3oee0yU6TDU8iv3d70UriW_4pTopW339yKxRCFoBvLaJUxwCNfDIjqIAoijVemo0y4MDkp3vxb91fbs/s640/tutorial_html_tautan_link.jpg" title="Tutorial HTML Part 11 Tautan Link" width="640" /></a></div>
<br />
Begitu pun sebaliknya, ketika kita klik bagian bawah, kita akan diarahkan pada bagian atas file.<br />
<br />
Demikian <b>Seri Belajar HTML  </b>untuk <b>membuat tautan/<i>link. </i> </b>Semoga artikel ini bermanfaat bagi Anda. Terima kasih, <i>wassalamu'alaikum warahmatullaahi wabarakatuh.</i>

Belajar HTML Part 11 - Tautan (Link)

Assalamu'alaikum Warahmatullaahi Wabarakatuh Sebelumnya kita telah mempelajari kombinasi HTML dengan CSS . Pada tutorial kali i...

Belajar HTML Part 10 - Kombinasi dengan CSS

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEittY2f5poLeayIuofliQCmY7kfIzAx7egxFX2vkjZz_xxnsOqlB_2_WLaXE636VwabZgXoBSfxurWPdltaymGqa2QO2dBTomQH2UJE3NrMzTkw-kIJqJpAHsAbXhRr8y_BCW3e5aBed2s/s1600/html_tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML kombinasi dengan CSS" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEittY2f5poLeayIuofliQCmY7kfIzAx7egxFX2vkjZz_xxnsOqlB_2_WLaXE636VwabZgXoBSfxurWPdltaymGqa2QO2dBTomQH2UJE3NrMzTkw-kIJqJpAHsAbXhRr8y_BCW3e5aBed2s/s320/html_tutorial.jpg" title="Tutorial HTML Part 10 kombinasi dengan CSS" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<i>Assalamu'alaikum Warahmatullaahi Wabarakatuh.</i></div>
<div class="separator" style="clear: both; text-align: left;">
<i><br /></i></div>
<div class="separator" style="clear: both; text-align: justify;">
Pada artikel sebelumnya kita telah mempelajari tentang <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-9-komentar.html" target="_blank">komentar</a>. Kali ini kita akan membahas <i>styling</i>. Sebenarnya kita pernah membahas sepintas pada <a href="http://batweber.blogspot.com/2015/12/belajar-html-part-5-pengaturan-style.html" target="_blank">Belajar HTML Part 5 - Pengaturan Style</a>. Namun di sini kita akan lebih memperdalamnya, khususnya bagaimana cara mengombinasikan <b>HTML</b> dengan <b>CSS</b>.</div>
<div style="text-align: justify;">
Sebelumnya, apa itu <b>CSS</b>? Anda bisa membacanya di artikel saya <span style="font-weight: bold;"><a href="http://batweber.blogspot.com/2015/12/belajar-css-part-1-mengenal-css-dan-sintaks-dasar-css.html" target="_blank">Belajar CSS Part 1 - Mengenal CSS dan Sintaks Dasar CSS</a><i>.</i></span></div>
<div style="text-align: justify;">
Langsung saja, terdapat 3 cara dalam mengombinasikan <b>HTML </b>dengan <b>CSS</b>. Yaitu dengan <i>Inline Styling, Internal Styling, </i>dan <i>External Styling.</i></div>
<div style="text-align: justify;">
<i><br /></i></div>
<div style="text-align: justify;">
<b>A. <i>INLINE STYLING</i></b></div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
Teknik yang pertama adalah <i>inline styling</i>. Yaitu dengan menyisipkan <i>style </i>secara langsung pada elemen tertentu. Untuk <i>inline styling </i>ini sebenarnya kita telah mempelajarinya pada <a href="http://batweber.blogspot.com/2015/12/belajar-html-part-5-pengaturan-style.html" target="_blank">Part 5 </a>Tapi tidak ada salahnya kita di sini sedikit mengulas kembali. Misalnya, coba ketik <i>script </i>berikut :</div>
<div style="text-align: justify;">
<br /></div>
<code>
<p style="color: blue;">
Paragraf ini akan berubah menjadi warna biru.</p>
</code><br />
<br />
Simpan <i>script </i>tersebut dan jalankan pada <i>browser. </i>Berikut hasilnya :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhInU9XtTpX_9L5IYmFaKskyoxEUFILPez1bmFx9SyyTR780aCwRHLVZv3RJD6OjZ_vSit-AqExumPzwKqUqjaSkJWN1jZ_R3fCP0W6iWQNVcygIFjhhXyb_sFeXPUsGHHqZdeoJ7otYWA/s1600/tutorial_html_part_10_kombinasi_dengan_css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Part 10 - Kombinasi dengan CSS" border="0" height="382" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhInU9XtTpX_9L5IYmFaKskyoxEUFILPez1bmFx9SyyTR780aCwRHLVZv3RJD6OjZ_vSit-AqExumPzwKqUqjaSkJWN1jZ_R3fCP0W6iWQNVcygIFjhhXyb_sFeXPUsGHHqZdeoJ7otYWA/s640/tutorial_html_part_10_kombinasi_dengan_css.jpg" title="Tutorial HTML Part 10 - Kombinasi dengan CSS" width="640" /></a></div>
<br />
<div style="text-align: justify;">
Teknik <i>inline styling </i>ini biasa digunakan jika sebuah elemen memiliki kebutuhan <i>style </i>khusus.</div>
<br />
<b>B. <i>INTERNAL STYLING</i></b><br />
<br />
<div style="text-align: justify;">
Jika <i>inline styling </i>digunakan untuk satu elemen khsusus, <i>internal styling </i>digunakan untuk satu dokumen yang sama.</div>
<br />
<div style="text-align: justify;">
<i>internal styling </i>ditulis di dalam tag <head>  dengan menggunakan tag <style>. Lebih jelasnya silahkan ketik <i>script </i>di bawah ini :</div>
<br />
<code><!DOCTYPE html></code><br />
<code><html></code><br />
<code> <head></code><br />
<code>  <title>Kombinasi HTML dan CSS</title></code><br />
<code>  <style></code><br />
<code>   body {background: green;}</code><br />
<code>   h1 {color: blue;}</code><br />
<code>   p {font-family :jokerman;}</code><br />
<code>  </style></code><br />
<code> </head></code><br />
<code> <body></code><br />
<code>  <h1>
Judul ini berwarna biru</h1></code><br />
<code>  <p>
Paragraf ini ditulis dalam font Jokerman</p></code><br />
<code> </body> </code><br />
<code></html>
</code><br />
<br />
Simpan file tersebut kemudian jalankan pada <i>browser. </i>Berikut hasilnya :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikaI_fIomiDXIwPgP0i1-6zfK-XLSUw1b_kULJfyUhjwwEWlEaSn2ITzCdNHtECsrmag98UV_VZs8eKYWn-MTaVJ-Yynr_IbhmztLd-kScuZ2ULmHxK2VmRGyVjA49EfTryFV4xPfUFnw/s1600/tutorial_html_part_10_kombinasi_dengan_css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Part 10 - Kombinasi dengan CSS" border="0" height="376" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikaI_fIomiDXIwPgP0i1-6zfK-XLSUw1b_kULJfyUhjwwEWlEaSn2ITzCdNHtECsrmag98UV_VZs8eKYWn-MTaVJ-Yynr_IbhmztLd-kScuZ2ULmHxK2VmRGyVjA49EfTryFV4xPfUFnw/s640/tutorial_html_part_10_kombinasi_dengan_css.jpg" title="Tutorial HTML Part 10 - Kombinasi dengan CSS" width="640" /></a></div>
<br />
<div style="text-align: justify;">
Bisa kita lihat, apa yang didefinisikan pada tag <style> akan digunakan di seluruh dokumen <b>HTML </b>yang kita tulis. Demikian bisa difahami bahwa satu <i>script internal styling </i>dapat digunakan untuk satu halaman.</div>
<br />
<b>C. <i>EXTERNAL STYLING</i></b><br />
<br />
<div style="text-align: justify;">
Dengan teknik <i>external styling, </i>kita akan membuat satu buah file terpisah yang telah berisi kode-kode <b>CSS</b>, kemudian kita akan memanggil file tersebut dari file <b>HTML </b>kita.</div>
<div style="text-align: justify;">
Langkah pertama yang akan kita lakukan yaitu membuat file <b>CSS</b>-nya. Silahkan ketik <i>script </i>berikut :</div>
<br />
<code>body {
background: green;
}</code><br />
<code>h1 {
color: blue;
} </code><br />
<code>p {
font-family :jokerman;
font-size : 24px;
}
</code><br />
<br />
Kemudian simpan misalnya dengan nama <b>style.css. </b>Jangan lupa menambahkan ekstensi <b>.css </b>dalam penamaan sebuah file css.<br />
Selanjutnya kita akan memanggil file tersebut dari file <b>HTML</b> kita. Silahkan ketik <i>script </i>di bawah :<br />
<br />
<code><!DOCTYPE html> </code><br />
<code><html></code><br />
<code> <head></code><br />
<code>  <title>Kombinasi HTML dan CSS</title></code><br />
<code>  <link rel="style/css" href="style.css" /></code><br />
<code> </head></code><br />
<code> <body></code><br />
<code>  <h1>
Judul ini berwarna biru</h1></code><br />
<code>  <p>
Paragraf ini ditulis dalam font Jokerman dan ukuran font 24</p></code><br />
<code> </body> </code><br />
<code></html>
</code>
<br />
<br />
<div style="text-align: justify;">
Kemudian kita simpan file tersebut pada folder yang sama dengan file <b>style.css. </b>Kemudian kita jalankan file <b>HTML </b>yang kita buat barusan. Berikut hasilnya :</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwZIP6QukMSVfBEdV69pkKr_iPKMxBKZnjJ_1xLGfm2PVCCQa-Q_MYA5XAine9WIuGzXeZ3RMgWrqdSckiAzT2K9JIJHFjF7YjhTvZejEAFSlYDDajn-LnO8kcP3ESpglQtDjT5-mepFc/s1600/tutorial_html_part_10_kombinasi_dengan_css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Part 10 - Kombinasi HTML dan CSS" border="0" height="384" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwZIP6QukMSVfBEdV69pkKr_iPKMxBKZnjJ_1xLGfm2PVCCQa-Q_MYA5XAine9WIuGzXeZ3RMgWrqdSckiAzT2K9JIJHFjF7YjhTvZejEAFSlYDDajn-LnO8kcP3ESpglQtDjT5-mepFc/s640/tutorial_html_part_10_kombinasi_dengan_css.jpg" title="Tutorial HTML Part 10 - Kombinasi HTML dan CSS" width="640" /></a></div>
<br />
<div style="text-align: justify;">
Penggunaan <i>external link </i>ini adalah jika sebuah <i>style </i><b>CSS </b>dibutuhkan dalam banyak file <b>HTML</b>. Dimaksudkan agar kita tidak harus mengetik kode <i>style </i>tersebut satu per satu di setiap file <b>HTML </b>kita, namun dengan cukup satu kali penulisan kode, kita bisa memanggil file <b>CSS </b>tersebut untuk setiap <b>HTML </b>kapan pun kita membutuhkannya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Demikian <b>Belajar </b><b>Kombinasi </b><b>HTML dengan CSS. </b>Mudah-mudahan bermanfaat. Terima kasih, </div>
<div style="text-align: justify;">
<i>Wassalamu'alaikum Warahmatullaahi Wabarakatuh</i></div>

Belajar HTML Part 10 - Kombinasi dengan CSS

Assalamu'alaikum Warahmatullaahi Wabarakatuh. Pada artikel sebelumnya kita telah mempelajari tentang komentar . Kali ini kita ...

Belajar HTML Part 9 - Komentar

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1pbazBCYTcGJhWB18dtfbd2Io1Td9nqyTxWSuNqfxz66PgS0Y98s4FWojArP9I69j7oNd2b7OkQkZuV63_ckUFrQSk8BA9mbVIji9ZRXCNRBtlkZ6Pb0b1cnytI6HvNdNMWP7a6E8Ef8/s1600/html_tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Komentar" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1pbazBCYTcGJhWB18dtfbd2Io1Td9nqyTxWSuNqfxz66PgS0Y98s4FWojArP9I69j7oNd2b7OkQkZuV63_ckUFrQSk8BA9mbVIji9ZRXCNRBtlkZ6Pb0b1cnytI6HvNdNMWP7a6E8Ef8/s320/html_tutorial.jpg" title="Tutorial HTML Part 9 Komentar" width="320" /></a></div>
<br />
<i>Assalamu'alaikum Warahmatullaahi Wabarakatuh.</i><br />
<i><br /></i>
Pada artikel sebelumnya kita telah mempelajari tentang <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-8-penulisan-kode-kode-komputer.html" target="_blank">penulisan kode-kode komputer.</a> Kali ini kita akan mempelajari tentang penulisan komentar. Sebuah komentar yang terdapat pada sebuah dokumen <b>HTML</b>, tidak akan ditampilkan pada <i>browser.</i> Sebuah komentar diawali dengan <b>.<br />
<br />
Ada beberapa fungsi komentar yang biasa digunakan. Berikut di antaranya :<br />
<b><br /></b>
<b>A. MEMBERI CIRI PADA <i>SCRIPT</i></b><br />
<b><i><br /></i></b>
Komentar biasa digunakan untuk memberi ciri sebuah bagian dari dokumen agar kita tidak kesulitan mencari bagian tersebut.<br />
Sebagai contoh, coba ketik <i>script </i>berikut :<br />
<br />
<code></code><br />
<code> <h1>
Judul</h1> </code><br />
<code>
</code><br />
<br />
Simpan dan jalankan pada <i>browser. </i>Berikut hasil yang kita dapatkan :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5TEf-Wih-g6S5QelNmgfGlaMMM1ubFcDad2YQlgK7yZfQnXckuAfTszRmZlihCsKNLeUdFsY8oY1rPAwm3z2nvVd1bw314pyxzFUfIzS-3pS_Eix2yzFeiv0hLXZF3IIC0eMDjYdr5bY/s1600/tutorial_html_part_9_komentar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Komentar" border="0" height="136" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5TEf-Wih-g6S5QelNmgfGlaMMM1ubFcDad2YQlgK7yZfQnXckuAfTszRmZlihCsKNLeUdFsY8oY1rPAwm3z2nvVd1bw314pyxzFUfIzS-3pS_Eix2yzFeiv0hLXZF3IIC0eMDjYdr5bY/s640/tutorial_html_part_9_komentar.jpg" title="Tutorial HTML Part 9 - Komentar" width="640" /></a></div>
<br />
Seperti yang kita lihat, komentar yang kita ketik tidak ditampilkan oleh <i>browser. </i><br />
<i><br /></i>
<b>B. MELEWATI SEBUAH <i>SCRIPT </i>AGAR TIDAK DIPROSES</b><br />
<b><br /></b>
Dalam beberapa kasus, kita perlu membuat sebuah <i>script</i> menjadi komentar. Misal jika kita ingin menghilangkan sebuah bagian untuk sementara, namun kita tidak ingin menghapusnya karena suatu saat <i>script </i>tersebut bisa dibutuhkan.<br />
Misal ketik contoh berikut :<br />
<br />
<code>
</code><br />
<br />
Simpan lalu jalankan pada <i>browser. </i>Berikut hasilnya :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKLq1OgUKHeOkh5LEo8X8RT0My9Xb5ud63keCh0Z9fT3x7cCg9LV_8pPysO8j7a1SBf_5FypUz0NHVLYmiSibTC5I09rPhDWsCJQhQFHjusxVRciBhMakTEPSAqG_65rFXN04PhbeeGS4/s1600/tutorial_html_part_9_komentar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Komentar" border="0" height="432" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKLq1OgUKHeOkh5LEo8X8RT0My9Xb5ud63keCh0Z9fT3x7cCg9LV_8pPysO8j7a1SBf_5FypUz0NHVLYmiSibTC5I09rPhDWsCJQhQFHjusxVRciBhMakTEPSAqG_65rFXN04PhbeeGS4/s640/tutorial_html_part_9_komentar.jpg" title="Tutorial HTML Part 9 Komentar" width="640" /></a></div>
<br />
Kita lihat, elemen judul tidak ditampilkan karena kita ubah jadi komentar. Namun suatu saat kita bisa menggunakannya kembali jika dibutuhkan dengan cara menghapus tanda komentar yang kita tambahkan tadi.<br />
<br />
<b>C. KOMENTAR KONDISIONAL</b><br />
<b><br /></b>
Komentar kondisional hanya diproses jika memenuhi kondisi tertentu. Misal :<br />
<br />
<code>
</code><br />
<br />
<div style="text-align: justify;">
Pada <i>script </i>di atas, <b>[if IE 8] </b>maksudnya adalah <i>script </i>tersebut hanya digunakan untuk Internet Explorer 8. Untuk mengeceknya coba simpan file tersebut, kemudian jalankan dengan Internet Explorer(versi 8), lalu jalankan juga dengan <i>browser </i>yang lain, misal dengan Mozilla Firefox atau Google Chrome.</div>
<div style="text-align: justify;">
Kita saksikan perbedaannya seperti pada gambar berikut :</div>
<div style="text-align: justify;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5bKT5PSLAbyEd2eXUgIieJmc4daIhwjVvVDgTlNd4oar6SRSuJqlejXABzbCv5RdEXH6m5Da7n1x25fFr_nRkaqXOqlsWZyjYZGJFXv5KukR_iBGAmZhIr0gnab7fIdnupwpf6PsM21g/s1600/tutorial_html_part_9_komentar.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tutorial HTML Komentar" border="0" height="352" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5bKT5PSLAbyEd2eXUgIieJmc4daIhwjVvVDgTlNd4oar6SRSuJqlejXABzbCv5RdEXH6m5Da7n1x25fFr_nRkaqXOqlsWZyjYZGJFXv5KukR_iBGAmZhIr0gnab7fIdnupwpf6PsM21g/s640/tutorial_html_part_9_komentar.jpg" title="Tutorial HTML Part 9 Komentar" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>Komentar Kondisional hanya ditampilkan di Internet Explorer</b><br />
<div style="text-align: left;">
<br /></div>
</td></tr>
</tbody></table>
<div style="text-align: justify;">
Pada gambar di atas, saya menjalankan <i>script </i>tadi di Internet Explorer, Mozilla Firefox, dan Google Chrome. Namun yang menampilkan komentar kondisional tadi hanya Internet Explorer.</div>
<div style="text-align: justify;">
Demikian <b>Seri Belajar HTML tentang Penulisan Komentar pada HTML. </b>Semoga bermanfaat. Terima kasih,</div>
<div style="text-align: justify;">
<i>Wassalamu'alaikum Warahmatullaahi Wabarakatuh.</i></div>

Belajar HTML Part 9 - Komentar

Assalamu'alaikum Warahmatullaahi Wabarakatuh. Pada artikel sebelumnya kita telah mempelajari tentang penulisan kode-kode komputer....

Belajar HTML Part 8 - Penulisan Kode-Kode Komputer

Belajar HTML Part 8 - Penulisan Kode-Kode Komputer

Assalamu'alaikum Warahmatullaahi Wabarakatuh Pada artikel sebelumnya, kita telah membahas tentang membuat kutipan atau quotation...

Belajar HTML Part 7 - Membuat Kutipan (Quotations)

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEittY2f5poLeayIuofliQCmY7kfIzAx7egxFX2vkjZz_xxnsOqlB_2_WLaXE636VwabZgXoBSfxurWPdltaymGqa2QO2dBTomQH2UJE3NrMzTkw-kIJqJpAHsAbXhRr8y_BCW3e5aBed2s/s1600/html_tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Membuat Kutipan (Quotations)" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEittY2f5poLeayIuofliQCmY7kfIzAx7egxFX2vkjZz_xxnsOqlB_2_WLaXE636VwabZgXoBSfxurWPdltaymGqa2QO2dBTomQH2UJE3NrMzTkw-kIJqJpAHsAbXhRr8y_BCW3e5aBed2s/s320/html_tutorial.jpg" title="Tutorial HTML Part 7 Membuat Kutipan (Quotations)" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<i>Assalamu'alaikum Warahmatullaahi Wabarakatuh</i></div>
<div class="separator" style="clear: both; text-align: left;">
Pada artikel sebelumnya kita telah belajar tentang <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-6-text-formating.html" target="_blank">Text Formatting</a>. Pada kali ini kita akan <b>belajar membuat sebuah kutipan</b> atau dalam istilah<b> HTML </b>disebut <b style="font-style: italic;">quotations. </b>Langsung saja siapkan Notepad++ Anda. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>A. <q> untuk Kutipan Pendek</b></div>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: left;">
Ketik <i>script </i>berikut pada Notepad++ Anda :</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<code><p>
Jack Sparrow berkata : <q>The Problem is not the Problem. The Problem is your attitude about the problem</q></p>
</code><br />
<br />
Simpan dengan nama <b>quotations.html </b>kemudian jalankan pada <i>web browser </i>Anda. Berikut hasilnya :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHkLfjs8sjSQPVmRje1ce9PU2eAkGjHY3Sq32QOxGSJ9dcBv5eZVdPQjoZYtR7KnYgtRRaEv0GsBNzRub_2aCek7BWrntYUmML2r1X9-VqjmSMQErVcjMPUyYedQWnb8vblSGYVmZazUw/s1600/tutorial_html_part_7_membuat_kutipan_quotations.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Membuat Kutipan (quotations)" border="0" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHkLfjs8sjSQPVmRje1ce9PU2eAkGjHY3Sq32QOxGSJ9dcBv5eZVdPQjoZYtR7KnYgtRRaEv0GsBNzRub_2aCek7BWrntYUmML2r1X9-VqjmSMQErVcjMPUyYedQWnb8vblSGYVmZazUw/s640/tutorial_html_part_7_membuat_kutipan_quotations.png" title="Tutorial HTML Part 7 Membuat Kutipan (quotations)" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Dengan tag <q>, <i>browser </i>akan menandai elemen yang kita beri tag tersebut dengan "(tanda kutip)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>B. <blockquote> untuk Kutipan Panjang</b></div>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: left;">
Untuk membuat kutipan panjang, ketik <i>script </i>berikut pada Notepad++ :</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<code><p>
Rasulullah SAW bersabda : <blockquote>
Iman terbagi menjadi 60 atau 70 lebih cabang. Cabang yang paling utama adalah kalimat Laa ilaaha illallaah, cabang yang yang terendah adalah menyingkirkan gangguan dari jalan, dan malu adalah cabang dari iman</blockquote>
</p>
</code><br />
<br />
Simpan misal dengan nama <b>quotations.html </b>kemudian jalankan pada <i>web browser. </i>Berikut hasilnya :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl54XAa_DG38L2IRe_Rso8-8U4mEw1KMAm4F5o1NVZdg1jdmrLPoO-t88qAuTt8kaGEUENSA9j15nmjianl-sgKZ_vCjCxgXM19aovC8eW97uOoPx-Vast_Ib2GlMvuyFZ4BixF1SOwuE/s1600/tutorial_html_part_7_membuat_kutipan_quotations.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Membuat Kutipan (Quotations)" border="0" height="136" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl54XAa_DG38L2IRe_Rso8-8U4mEw1KMAm4F5o1NVZdg1jdmrLPoO-t88qAuTt8kaGEUENSA9j15nmjianl-sgKZ_vCjCxgXM19aovC8eW97uOoPx-Vast_Ib2GlMvuyFZ4BixF1SOwuE/s640/tutorial_html_part_7_membuat_kutipan_quotations.png" title="Tutorial HTML Part 7 Membuat Kutipan (Quotations)" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Seperti yang kita lihat, <i>browser </i>akan merubah elemen yang diapit tag <blockquote> dengan penulisan yang berbeda.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>C. <abbr> untuk Singkatan</b></div>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: left;">
Tag <abbr> ini digunakan untuk mendefinisikan singkatan. Coba ketik <i>script </i>berikut :</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<code><p>
<abbr title="Badan Usaha Milik Negara">BUMN</abbr> merupakan singkatan dari Badan Usaha Milik Negara</p>
</code>
<br />
<br />
Simpan kembali dengan nama <b>quotations.html. </b>Secara fisik tidak ada perubahan. Namun tag <abbr> ini bermanfaat untuk mendefinisikan sebuah singkatan sehingga bisa lebih mudah dilacak oleh <i>search engine.</i><br />
<i><br /></i>
<b>D. <address> untuk Informasi Kontak</b><br />
<b><br /></b>
Tag <address> digunakan untuk menandai sebuah informasi kontak. Ketik <i>script </i>berikut :<br />
<br />
<code><p>
Berikut Informasi Kontak saya :
<address>
Nama : Kamaludin Khoir<br>
Alamat : Kp. Gunung Tanjung RT/01Rw 09, Kel. Sukamanah, Kec. Cipedes, Kota Tasikmalaya
</address>
Terima kasih</p>
</code><br />
<br />
Simpan dengan nama <b>quotations.html. </b>Berikut hasilnya :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjko1n1YtbeU7Fx7RJS72gZZUcn3UkeO7-okMCeiyJxnNgjTTZpfxeRXO22VFZTMSlRhVXndB4L4I79ESCQdbLu-qrRVPcHbQvS5NtMZaikrS9S_7u30uAMRpLrzTDvEZMS0CAE532seF0/s1600/tutorial_html_part_7_membuat_kutipan_quotations.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Membuat Kutipan (quotations)" border="0" height="136" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjko1n1YtbeU7Fx7RJS72gZZUcn3UkeO7-okMCeiyJxnNgjTTZpfxeRXO22VFZTMSlRhVXndB4L4I79ESCQdbLu-qrRVPcHbQvS5NtMZaikrS9S_7u30uAMRpLrzTDvEZMS0CAE532seF0/s640/tutorial_html_part_7_membuat_kutipan_quotations.png" title="Tutorial HTML Part 7 Membuat Kutipan (quotations)" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Secara otomatis elemen dalam tag <address> akan dibuat italic(miring) dan diberi jeda satu enter dengan konten sebelumnya.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>E.<cite> untuk titel atau sitasi Buah Karya</b></div>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: left;">
Tag <cite> digunakan untuk memberi titel atau sitasi dari sebuah karya. Contoh, coba ketik <i>script </i>berikut :</div>
<br />
<code>Kalau sampai waktuku<br> </code><br />
<code>‘Ku mau tak seorang ‘kan merayu<br> </code><br />
<code>Tidak juga kauTak perlu sedu sedan ituAku ini binatang jalang<br> </code><br />
<code>Dari kumpulannya terbuangBiar peluru menembus kulitku<br> </code><br />
<code>Aku tetap meradang menerjangLuka dan bisa kubawa berlari<br> </code><br />
<code>Berlari<br> </code><br />
<code>Hingga hilang pedih perih <br></code><br />
<code>Dan akan akan lebih tidak perduli<br> </code><br />
<code>Aku mau hidup seribu tahun lagi<br> </code><br />
<code><cite>Aku</cite> Karya : Chairil Anwar
</code><br />
<br />
Simpan dengan nama <b>quotations.html. </b>Kemudian jalankan pada <i>web browser. </i>Berikut hasilnya :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAL9iw63_x9WssWaqzw6OQ5aTlrbvHTaCQJB7i1YJKa1Ye-mBI-47flPrY2M_3BSboabYtFngVyyoDsikef4FanodfvzG-tjM2gjtaawVxd_KKJp7pvNyceZykzcSGKBqVU5qMWWdhVp0/s1600/tutorial_html_part_7_membuat_kutipan_quotations.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Membuat Kutipan (Quotations)" border="0" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAL9iw63_x9WssWaqzw6OQ5aTlrbvHTaCQJB7i1YJKa1Ye-mBI-47flPrY2M_3BSboabYtFngVyyoDsikef4FanodfvzG-tjM2gjtaawVxd_KKJp7pvNyceZykzcSGKBqVU5qMWWdhVp0/s640/tutorial_html_part_7_membuat_kutipan_quotations.png" title="Tutorial HTML Part 7 Membuat Kutipan (Quotations)" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Secara otomatis, elemen dengan tag <cite> akan ditulis secara miring.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>F. Tag <bdo> untuk Arah Penulisan Sebuah Teks.</b></div>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: left;">
bdo adalah singkatan dari <b>Bi-Directional Override. </b>Sebuah teks bisa kita ubah arah penulisannya untuk kebutuhan tertentu. Ketik <i>script </i>berikut :</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<code><bdo dir="rtl">Teks ini akan ditampilkan dari arah kanan ke kiri</bdo>
</code><br />
<br />
Seperti biasa simpan dengan nama <b>quotations.html </b>kemudian jalankan pada <i>web browser </i>Anda. Berikut adalah tampilan yang dihasilkan :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw6jSahg9qIXiXgFSI0wq7GsYfaeuKLNRDRYiqqj-YxbskHc6yXOSgidrQ8F7YS9nWqtimj1I0K7ttz3YfwHURtdagIRfXvq64SN-3zPMykjKdKAPdVNg0XjVx_GZs2PLEYICDQ3ZDKFE/s1600/tutorial_html_part_7_membuat_kutipan_quotations.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Membuat Kutipan (Quotations)" border="0" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw6jSahg9qIXiXgFSI0wq7GsYfaeuKLNRDRYiqqj-YxbskHc6yXOSgidrQ8F7YS9nWqtimj1I0K7ttz3YfwHURtdagIRfXvq64SN-3zPMykjKdKAPdVNg0XjVx_GZs2PLEYICDQ3ZDKFE/s640/tutorial_html_part_7_membuat_kutipan_quotations.png" title="Tutorial HTML Part 7 Membuat Kutipan (Quotations)" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Dalam <i>script </i>yang kita tulis di atas, terdapat atribut <b>dir="rtl" </b>yang berarti <i>direction </i>atau arah penulisan akan ditulis secara <b>rtl (Right to Left) </b>atau dari kanan ke kiri. Dan hasilnya, seperti yang kita lihat, teks yang kita tulis akan terbalik menjadi dari arah kanan ke kiri. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Demikian <b>Seri Belajar HTML Membuat Kutipan (Quotations). </b>Semoga bermanfaat. Terima kasih,</div>
<div class="separator" style="clear: both; text-align: left;">
<i>Wassalamu'alaikum Warahmatullaahi Wabarakatuh.</i></div>
<br />

Belajar HTML Part 7 - Membuat Kutipan (Quotations)

Assalamu'alaikum Warahmatullaahi Wabarakatuh Pada artikel sebelumnya kita telah belajar tentang Text Formatting . Pada kali ini ...

Belajar HTML Part 6 - Text Formating

Belajar HTML Part 6 - Text Formating

Assalamu'alaikum Warahmatullahi Wabarakatuh. Sebelumnya kita telah mempelajari tentang Pengaturan Style . Kali ini kita akan mem...

Belajar HTML Part 5 - Pengaturan Style

Belajar HTML Part 5 - Pengaturan Style

Assalamu'alaikum Wr Wb Setelah membahas heading dan paragraf pada artikel sebelumnya , kini kita akan membahas tentang cara meru...