Archive for 2015

Belajar CSS Part 3 - Background

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI-OMpOUPrqrQEUr8Ga8mvoPzH2pBW2-Faz1bAZtNtOu7Rssw1fXyo0s0gjih5W7um0BmaUMjdzoBpWpMErWUwV5Yo0L54FeFhj-YoaGntAljWSuHG6y0ksKPShT0xAleyAP3gzaQwPQ/s1600/tutorial_css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial CSS Background" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI-OMpOUPrqrQEUr8Ga8mvoPzH2pBW2-Faz1bAZtNtOu7Rssw1fXyo0s0gjih5W7um0BmaUMjdzoBpWpMErWUwV5Yo0L54FeFhj-YoaGntAljWSuHG6y0ksKPShT0xAleyAP3gzaQwPQ/s1600/tutorial_css.jpg" title="Tutorial CSS Part 3 - Background" /></a></div>
<br />
<i>Assalamu'alaikum warohmatullaahi wabarokatuh.</i><br />
<br />
<div style="text-align: justify;">
<i>Properties </i><b>background </b>digunakan untuk mengatur efek latar belakang dari sebuah elemen. Kita bisa memilih <b>background </b>dengan dua pilihan :</div>
<ul>
<li><b>Background warna</b></li>
<li><b>Background gambar</b></li>
</ul>
<div>
<b>A. BACKGROUND WARNA</b></div>
<div>
<b><br /></b></div>
<div style="text-align: justify;">
Opsi pertama, kita bisa menggunakan <b>background </b>warna. Kelebihan dari menggunakan <b>background warna</b>, yaitu lebih fleksibel dan lebih ringan. </div>
<div style="text-align: justify;">
Untuk menggunakan <b>background warna </b>kita bisa menggunakan nama warna, kode Hexa, ataupun kode RGB. Penjelasan tentang kode-kode ini bisa Anda lihat di <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-19-penyisipan-warna.html" target="_blank">Belajar <b>HTML</b> Part 19 tentang Penyisipan Warna</a>. Berikut contoh <i>script </i>untuk menggunakan <b>background warna </b>:</div>
<pre><code><span style="background-color: #444444;">
</span><span style="background-color: black;"><span style="color: orange;">h1</span> <span style="color: yellow;">{</span>
    <span style="color: lime;">background-color</span><span style="color: yellow;">:</span> <span style="color: cyan;">green</span><span style="color: yellow;">;</span>
<span style="color: yellow;">}
</span><span style="color: orange;">div</span> <span style="color: yellow;">{</span>
    <span style="color: lime;">background-color</span><span style="color: yellow;">:</span><span style="color: cyan;"> #ff0000</span><span style="color: yellow;">;</span>
<span style="color: yellow;">}</span>
<span style="color: orange;">p</span> <span style="color: yellow;">{</span>
    <span style="color: lime;">background-color</span><span style="color: yellow;">:</span> <span style="color: cyan;">rgb(0,0,255)</span><span style="color: yellow;">;</span>
<span style="color: yellow;">}</span></span>
</code>
</pre>
Penjelasan :
<br />
<ul>
<li>Dengan <i>script </i>di atas, elemen h1 akan memiliki background berwarna hijau. Elemen div akan memiliki background berwarna merah, dan elemen p akan memiliki background biru.</li>
</ul>
 <a class="coba" href="http://batweber.greengaluh.com/css_background.html" target="_blank">Coba sendiri di sini</a><br />
  <br />
<ul>
</ul>
<div>
<b>B. BACKGROUND GAMBAR</b></div>
<div>
<b><br /></b></div>
<div>
Opsi kedua, kita bisa menggunakan gambar sebagai <b>background</b>. Dengan menggunakan <b>background gambar</b>, kita bisa menambahkan beberapa pengaturan tambahan :</div>
<div>
<ul>
<li>background-repeat</li>
<li>background-position</li>
<li>background-attachment</li>
</ul>
<div>
Berikut contoh <i>script-</i>nya :</div>
</div>
<div>
<br /></div>
<div>
<pre><code><span style="background-color: black;"><span style="color: orange;">body</span> <span style="color: yellow;">{</span>
    <span style="color: lime;">background-image</span><span style="color: yellow;">:</span> <span style="color: cyan;">url("gambar/contoh_bg_gambar.jpg")</span><span style="color: yellow;">;</span>
    <span style="color: lime;">background-repeat</span><span style="color: yellow;">:</span><span style="color: cyan;"> repeat-x</span><span style="color: yellow;">;</span>
    <span style="color: lime;">background-attachment</span><span style="color: yellow;">:</span> <span style="color: cyan;">fixed</span><span style="color: yellow;">;</span></span></code></pre>
<pre><code><pre><code style="background-color: black;">    <span style="color: lime;">background-position</span><span style="color: yellow;">:</span> <span style="color: cyan;">right top</span><span style="color: yellow;">;</span></code></pre>
<span style="background-color: black; color: yellow;">}</span></code></pre>
</div>
<div>
<br /></div>
<div>
Penjelasan :</div>
<div>
<ul>
<li>background-image digunakan untuk memilih gambar yang akan digunakan. lokasi gambar kita tulis dalam tanda kurung. Dalam contoh di atas, gambar yang digunakan untuk background bernama contoh_bg_gambar.jpg yang berlokasi di dalam folder gambar. Anda bisa mengubahnya sesuai kebutuhan.</li>
<li>background-repeat digunakan untuk mengatur pengulangan gambar. repeat-x berarti gambar akan berulang secara horizontal. Jika ingin gambar berulang secara vertikal, kita bisa menggunakan repeat-y</li>
<li>background-attachment : fixed; berarti gambar tidak akan mengikuti tampilan layar jika di-<i>scroll</i></li>
<li>background-position digunakan untuk mengatur posisi gambar. right top berarti gambar akan berada di posisi kanan atas.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_background_image.html" target="_blank">Coba sendiri di sini</a><br />
<br />
<ul>
</ul>
<div>
<b>C. <i>BACKGROUND SHORTHAND PROPERTY</i></b></div>
</div>
<div>
<b><i><br /></i></b></div>
<div>
<i>Background Sorthand Property </i>maksudnya, kita bisa meringkas seluruh <i>property </i>dalam satu kali deklarasi. Caranya bisa kita lihat dalam contoh berikut :</div>
<div>
<br /></div>
<div>
<pre><code><span style="background-color: black;"><span style="color: orange;">body</span> <span style="color: yellow;">{</span>
    <span style="color: lime;">background</span><span style="color: yellow;">:</span> <span style="color: cyan;">#ffffff url("gambar/contoh_bg_gambar.jpg")</span><span style="color: yellow;"> </span><span style="color: cyan;">repeat-x</span><span style="color: yellow;"> </span><span style="color: cyan;">fixed</span><span style="color: yellow;"> </span></span></code><span style="background-color: black; color: cyan;">right top</span><span style="background-color: black; color: yellow;">;</span></pre>
<pre><code><span style="background-color: black; color: yellow;">}</span></code></pre>
<pre><code><span style="background-color: white; color: yellow;">
</span></code></pre>
Dalam contoh di atas, kita meringkas seluruh deklarasi dalam satu property.<br />
<br />
 <a class="coba" href="http://batweber.greengaluh.com/css_background_shorthand_property.html" target="_blank">Coba sendiri di sini</a><br />
<br />
<br />
Demikian <b>Seri Belajar CSS tentang Background, </b>Semoga bermanfaat.<br />
Terima kasih, <i>wassalamu'alaikum warohmatullaahi wabarokaatuh.</i></div>

Belajar CSS Part 3 - Background

Assalamu'alaikum warohmatullaahi wabarokatuh. Properties background digunakan untuk mengatur efek latar belakang dari sebuah ele...

Belajar HTML Form Part 1 - Mengenal Form dalam HTML

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEittY2f5poLeayIuofliQCmY7kfIzAx7egxFX2vkjZz_xxnsOqlB_2_WLaXE636VwabZgXoBSfxurWPdltaymGqa2QO2dBTomQH2UJE3NrMzTkw-kIJqJpAHsAbXhRr8y_BCW3e5aBed2s/s1600/html_tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Form Mengenal Form dalam HTML" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEittY2f5poLeayIuofliQCmY7kfIzAx7egxFX2vkjZz_xxnsOqlB_2_WLaXE636VwabZgXoBSfxurWPdltaymGqa2QO2dBTomQH2UJE3NrMzTkw-kIJqJpAHsAbXhRr8y_BCW3e5aBed2s/s320/html_tutorial.jpg" title="Tutorial HTML Form Part 1 - Mengenal Form dalam HTML" width="320" /></a></div>
<br />
<i>Assalamu'alaikum warohmatullaahi wabarokaatuh.</i><br />
<br />
<div style="text-align: justify;">
Pada postingan kali ini kita akan mulai mempelajari tentang form dalam <b>HTML</b>. Elemen <form> pada <b>HTML</b> digunakan untuk menerima input dari <i>user</i>. Sebuah elemen <form> diapit dengan tag pembuka <form> dan tag penutup </form></div>
<div style="text-align: justify;">
<br /></div>
<code style="background-color: #444444;"><span style="color: orange;">
<form></span></code><br />
<code style="background-color: #444444;">
<span style="color: lime;">.
Isi form
.</span> </code><br />
<code style="background-color: #444444;"><span style="color: orange;"></form>
</span></code>
<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Dalam sebuah form, kita bisa memasukkan berbagai macam inputan seperti input teks, radiogroup, checkbox, dsb. Untuk mengawali, kita coba mempraktekkan penggunaan form dengan inputan teks. Sintaks dasarnya adalah dengan tag <input> tanpa tag penutup.<br />
<br />
Contoh penggunaan form input teks dalam sebuah halaman <b>HTML</b> :<br />
<pre><code>
<span style="background-color: #444444;"><span style="color: orange;"><form></span>
  <span style="color: lime;">Nama Depan:</span><span style="color: orange;"><br>
  <input type="text" name="namadepan">
  <br></span>
  <span style="color: lime;">Nama Belakang:</span><span style="color: orange;"><br>
  <input type="text" name="namabelakang">
</form></span></span>
</code>
</pre>
Simpan file tersebut, kemudian jalankan pada <i>web browser.</i> Berikut tampilan yang dihasilkan :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHS2CZdKo7L7NsHIKPx3J-D98VoS-RzgaU7ONADkOZfHuYD9rFU7Ff_fn-lpcGPLLZMeboxV82cQhQZ_813vKgONfl8l0SRmCywWilOHNahse2xXyHAnfqBsZUw4lCru29o-OWyWflecE/s1600/tutorial_html_form_part_1_mengenal_form_pada_html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Form Mengenal Form dalam HTML" border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHS2CZdKo7L7NsHIKPx3J-D98VoS-RzgaU7ONADkOZfHuYD9rFU7Ff_fn-lpcGPLLZMeboxV82cQhQZ_813vKgONfl8l0SRmCywWilOHNahse2xXyHAnfqBsZUw4lCru29o-OWyWflecE/s400/tutorial_html_form_part_1_mengenal_form_pada_html.jpg" title="Tutorial HTML Form Part 1 - Mengenal Form dalam HTML" 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>ATRIBUT PADA FORM</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>1. Atribut Action</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>Atribut Action</b> digunakan untuk menspesifikasikan halaman yang akan dieksekusi ketika sebuah form dikirimkan. Contoh :</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<code><span style="background-color: #444444; color: orange;">
<form action="action_page.php">
</span></code>
<br />
<br />
Dengan <i>script </i>di atas, ketika <i>user </i>mengirim informasi yang dia input, misal dengan menekan tombol submit, maka form akan mengeksekusi halaman <b>action_page.php</b>. Namun jika <b>atribut action </b>ini dilewati (tidak ditulis), maka form akan mengeksekusi halaman itu sendiri.<br />
<br />
<b>2. Atribut Method</b><br />
<b><br /></b>
<b>Atribut Method </b>digunakan untuk menspesifikasikan metode pengiriman data yang digunakan. Ada dua metode yang biasa digunakan. Yaitu GET dan POST.<br />
<br />
Method GET digunakan jika data yang dikirim bersifat pasif (hanya mengirim data saja) dan tidak mengandung data yang sensitif (misal password). Contoh penggunaan method GET :<br />
<span style="background-color: #444444; color: orange;"><br /></span>
<code><span style="background-color: #444444; color: orange;"><form action="action_page.php" method="get"></span></code>
<br />
<code><span style="background-color: #444444; color: orange;"><br /></span></code>
Dengan menggunakan method GET, maka data yang dikirim akan tampil pada alamat URL seperti berikut :<br />
<br />
<span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">action_page.php?firstname=Mickey&lastname=Mouse</span><br />
<span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><br /></span>
Method POST digunakan jika form yang dikirim perlu melakukan perubahan data dan jika data mengandung data yang sensitif (misal password). Contoh penggunaan method POST :<br />
<br />
<span style="background-color: #444444; color: orange; font-family: monospace;"><form action="action_page.php" method="post"></span><br />
<span style="background-color: #444444; color: orange; font-family: monospace;"><br /></span>
Dengan menggunakan method POST, maka data yang dikirim tidak akan tampil pada alamat URL.<br />
<br />
<b>3. Atribut Name</b><br />
<b><br /></b>
Agar data yang terdapat dalam form bisa dikirim dan dieksekusi dengan benar, maka penting untuk memberi nama kepada masing-masing elemen dalam form. Contoh :<br />
<br />
<pre><code><span style="background-color: #444444;"><span style="color: orange;"><form></span>
  <span style="color: lime;">Nama Depan:</span><span style="color: orange;"><br>
  <input type="text" name="namadepan">
  <br></span>
  <span style="color: lime;">Nama Belakang:</span><span style="color: orange;"><br>
  <input type="text" name="namabelakang">
</form></span></span></code></pre>
<pre><code><span style="background-color: #444444;"><span style="color: orange;">
</span></span></code></pre>
Dalam form di atas, dua elemen input memiliki nama yang berbeda, yaitu "namadepan" dan "namabelakang". Sehingga ketika dikirim, data yang diinput di masing-masing elemen bisa dibedakan.
<b>4. Beberapa Atribut Lain</b>
Selain ke-3 atribut di atas, ada beberapa atribut lain seperti <b>accept-charset </b>untuk <i>Character Set </i>yang digunakan pada form, <b>enctype, autocomplete, </b>dan <b>novalidate</b>. Berikut contoh form dengan atribut lengkap :
</div>
<pre><code><span style="background-color: #444444;">
<span style="color: orange;"><form action="action_page.php" method="post" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate></span>
<span style="color: lime;">.
Isi Form
.</span>
<span style="color: orange;"></form></span></span>
</code></pre>
<pre><code><span style="background-color: #444444;"><span style="color: orange;">
</span></span></code></pre>
<b>MENGELOMPOKKAN FORM DENGAN FIELDSET</b><br />
<br />
Kita bisa membagi elemen-elemen yang terdapat pada form ke dalam beberapa kelompok dengan menggunakan <b>tag <fieldset></b>. Contoh :
<br />
<pre><code>
<span style="background-color: #444444;"><span style="color: orange;"><form action="action_page.php">
  <fieldset>
    <legend></span><span style="color: lime;">Personal information:</span><span style="color: orange;"></legend></span>
  <span style="color: lime;">  First name:</span><span style="color: orange;"><br>
    <input type="text" name="firstname" value="Mickey">
    <br></span>
<span style="color: lime;">    Last name:</span><span style="color: orange;"><br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form></span></span>
</code></pre>
<pre><code>
</code></pre>
Simpan dan jalankan <i>script </i>di atas pada <i>web browser </i>Anda<i>. </i>Berikut tampilan yang dihasilkan :

<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiil8et-HZrAzTc52UxT1cra5DKrLKZTfYEImzSuP5h0giK6guAi0Iz4oz0qmFy4B9RmB6xHRj41XymtQKjOjeq_SQ3M9GAWPudxtkTg_mGKQS-7ZphOBGv0Ngp4vFyfWKuafeOGdotpdg/s1600/tutorial_html_form_part_1_mengenal_form_pada_html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Form Mengenal Form dalam HTML" border="0" height="113" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiil8et-HZrAzTc52UxT1cra5DKrLKZTfYEImzSuP5h0giK6guAi0Iz4oz0qmFy4B9RmB6xHRj41XymtQKjOjeq_SQ3M9GAWPudxtkTg_mGKQS-7ZphOBGv0Ngp4vFyfWKuafeOGdotpdg/s640/tutorial_html_form_part_1_mengenal_form_pada_html.jpg" title="Tutorial HTML Form Part 1 - Mengenal Form dalam HTML" width="640" /></a></div>
Penjelasan :

<br />
<ul>
<li>Satu kelompok dalam form ditandai dari tag pembuka <fieldset> dan tag penutup </fieldset></li>
<li>Tag <legend> berfungsi untuk memberi judul pada satu <b>fieldset</b></li>
</ul>
<div>
Demikian <b>seri belajar HTML Form tentang pengenalan HTML Form</b>, semoga bermanfaat.</div>
<div>
Terima kasih, <i>wassalamu'alaikum warohmatullaahi wabarokaatuh.</i></div>

Belajar HTML Form Part 1 - Mengenal Form dalam HTML

Assalamu'alaikum warohmatullaahi wabarokaatuh. Pada postingan kali ini kita akan mulai mempelajari tentang form dalam HTML . Eleme...

Belajar CSS Part 2 - Selector dan Komentar

<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI-OMpOUPrqrQEUr8Ga8mvoPzH2pBW2-Faz1bAZtNtOu7Rssw1fXyo0s0gjih5W7um0BmaUMjdzoBpWpMErWUwV5Yo0L54FeFhj-YoaGntAljWSuHG6y0ksKPShT0xAleyAP3gzaQwPQ/s1600/tutorial_css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial CSS Selector dan Komentar " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI-OMpOUPrqrQEUr8Ga8mvoPzH2pBW2-Faz1bAZtNtOu7Rssw1fXyo0s0gjih5W7um0BmaUMjdzoBpWpMErWUwV5Yo0L54FeFhj-YoaGntAljWSuHG6y0ksKPShT0xAleyAP3gzaQwPQ/s1600/tutorial_css.jpg" title="Tutorial CSS Part 2 - Selector dan Komentar " /></a></div>
<br />
<i>Assalamu'alaikum warohmatullaahi wabarokatuh.</i><br />
<i><br /></i>
<br />
<div style="text-align: justify;">
Kali ini kita akan mempelajari tentang <i style="font-weight: bold;">selector </i><b>dan komentar </b>dalam <b>CSS</b>. Tentang apa itu <i style="font-weight: bold;">selector </i>sudah kami bahas pada <a href="http://batweber.blogspot.co.id/2015/12/belajar-css-part-1-mengenal-css-dan-sintaks-dasar-css.html" target="_blank">Belajar CSS Part 1 tentang Pengenalan dan Sintaks Dasar CSS</a>. Sedangkan komentar, tidak berbeda fungsinya dengan <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-9-komentar.html" target="_blank">komentar pada HTML</a>, yaitu agar sebuah <i>script </i>tidak diproses oleh <i>browser. </i>Yang berbeda hanya dari segi cara penyisipannya saja.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>A. <i>SELECTOR</i></b></div>
<div style="text-align: justify;">
<b><i><br /></i></b></div>
<div style="text-align: justify;">
<b>1. <i>Element Selector </i></b></div>
<div style="text-align: justify;">
<b><i><br /></i></b></div>
<div style="text-align: justify;">
<i style="font-weight: bold;">Element Selector </i>digunakan untuk memilih elemen biasa yang akan digunakan untuk menyeleksi elemen biasa. Lebih jelanya kita simak contoh berikut ini :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<code><span style="background-color: black;"><span style="color: red;">p </span><span style="color: orange;">{ font-size:12px;}</span></span></code></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Yang menjadi <b style="font-style: italic;">element selector </b>di sana adalah p. Dengan demikian semua tag <p> pada dokumen <b>HTML</b> yang disisipi file <b>CSS</b> tersebut akan memiliki font-size atau ukuran font 12 pixel.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>2. <i>Id Selector</i></b></div>
<div style="text-align: justify;">
<b><i><br /></i></b></div>
<div style="text-align: justify;">
<i style="font-weight: bold;">Id selector </i>digunakan untuk menyeleksi elemen yang telah diberi atribut id tertentu. <i style="font-weight: bold;">id selector </i>ditandai dengan tanda pagar(#). Contoh :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<code><span style="background-color: black;"><span style="color: red;">#paragrafkhusus</span> <span style="color: orange;">{font-size:16px;}</span></span></code></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Dengan <b><i>id</i></b><b style="font-style: italic;"> selector </b>di atas sebuah elemen yang diberi id paragrafkhusus akan memiliki ukuran font 16 pixel.<br />
<br />
<a class="coba" href="http://batweber.greengaluh.com/paragraf_khusus.html" target="_blank">Coba sendiri di sini</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br />
<b>3. <i>Class Selector</i></b></div>
<div style="text-align: justify;">
<b><i><br /></i></b></div>
<div style="text-align: justify;">
<b style="font-style: italic;">Class Selector </b>akan menyeleksi elemen dalam sebuah dokumen <b>HTML</b> dengan class tertentu. Untuk mempelajari tentang Class pada<b> HTML</b>, Anda bisa membaca <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-16-class.html" target="_blank">artikel </a><a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-16-class.html" target="_blank">pada link ini</a>. </div>
<div style="text-align: justify;">
Perbedaan id dengan class adalah, id hanya bisa digunakan satu kali di setiap halaman<b> HTML</b>, sedangkan class bisa digunakan berkali-kali dalam sebuah file <b>HTML</b>. </div>
<div style="text-align: justify;">
<i style="font-weight: bold;">Class Selector </i>ditandai dengan tanda titik(.). Contoh :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<code><span style="background-color: black;"><span style="color: red;">.paragraftertentu</span> <span style="color: orange;">{font-size:14px;}</span></span></code></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Dengan <i>script </i>di atas, maka setiap elemen yang diberi class paragraftertentu akan memiliki font dengan ukuran 14 pixel.<br />
<br />
<a class="coba" href="http://batweber.greengaluh.com/paragraf_tertentu.html" target="_blank">Coba sendiri di sini</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br />
<b>4. Pengelompokan <i>selector</i></b></div>
<div style="text-align: justify;">
<b><i><br /></i></b></div>
<div style="text-align: justify;">
Jika beberapa elemen, class, ataupun id memiliki <i style="font-weight: bold;">declaration </i>yang sama, maka kita bisa mengelompokkannya dengan memberi koma(,) sebagai pemisah masing-masing elemen. Contoh :</div>
<div style="text-align: justify;">
<span style="background-color: black;"><br /></span></div>
<div style="text-align: justify;">
<code><span style="background-color: black;"><span style="color: red;">h1, h2, p </span><span style="color: orange;">{</span></span></code></div>
<div style="text-align: justify;">
<span style="background-color: black; color: orange;">text-align : center;</span></div>
<div style="text-align: justify;">
<span style="background-color: black; color: orange;">color : red;</span></div>
<div style="text-align: justify;">
<span style="background-color: black; color: orange;">}</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Dengan <i>script </i>di atas, semua elemen <h1>, <h2>, dan <p> pada sebuah file HTML akan rata tengah dan memiliki teks berwarna merah.<br />
<br />
<a class="coba" href="http://batweber.greengaluh.com/pengelompokkan_selector.html" target="_blank">Coba sendiri di sini</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br />
<b>B. KOMENTAR</b></div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
Komentar pada <b>CSS</b> dimulai dengan tanda slash dan bintang (/*) dan diakhiri dengan bintang dan slash (*/). Contoh : </div>
<div style="text-align: justify;">
<span style="background-color: black;"><br /></span></div>
<div style="text-align: justify;">
<span style="background-color: black; color: lime;"><code>/* ini adalah komentar </code></span></div>
<div style="text-align: justify;">
<span style="background-color: black; color: lime;">komentar tidak akan diproses oleh browser, </span></div>
<div style="text-align: justify;">
<span style="background-color: black; color: lime;">namun akan mempermudah pembuat script*/</span></div>
<div style="text-align: justify;">
<span style="background-color: black;"><span style="color: red;">p</span> <span style="color: orange;">{text-align:center;}</span></span></div>
<div style="text-align: justify;">
<br />
<a class="coba" href="http://batweber.greengaluh.com/komentar.html" target="_blank">Coba sendiri di sini</a><br />
<br />
<br /></div>
<div style="text-align: justify;">
Demikian <b>Seri Belajar CSS tentang <i>Selector </i>dan Komentar. </b>Semoga bermanfaat.<br />
Terima kasih, <i>wassalamu'alaikum warohmatullaahi wabarokaatuh.</i></div>

Belajar CSS Part 2 - Selector dan Komentar

Assalamu'alaikum warohmatullaahi wabarokatuh. Kali ini kita akan mempelajari tentang selector dan komentar dalam CSS . Tentang...

Belajar CSS Part 1 - Mengenal CSS dan Sintaks Dasar CSS

<br />
<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/AVvXsEi8l7r-ebnBUYWfjHx4N7-mhoeD6hyphenhyphenKMsAIgQA3XmB5yLJlnbecxplNAZWjvBLSqhFWBgc8REPG13rrSePzftiDg2LKjEeuqDzLCz4uOwep6GRNgpP76tRSZjzLuQ60fZw7bsBcjQlp964/s1600/tutorial_css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial CSS Mengenal CSS dan Sintaks Dasar CSS" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8l7r-ebnBUYWfjHx4N7-mhoeD6hyphenhyphenKMsAIgQA3XmB5yLJlnbecxplNAZWjvBLSqhFWBgc8REPG13rrSePzftiDg2LKjEeuqDzLCz4uOwep6GRNgpP76tRSZjzLuQ60fZw7bsBcjQlp964/s1600/tutorial_css.jpg" title="Tutorial CSS Part 1 - Mengenal CSS dan Sintaks Dasar CSS" /></a></div>
<br />
<i>Assalamu'alaikum warohmatullaahi wabarokaatuh.</i><br />
<i><br /></i>
<br />
<div style="text-align: justify;">
Selamat datang di <b>Seri Belajar CSS BatWeber. </b>Kali ini kita akan mulai mempelajari <b>CSS</b>. Untuk mempelajari <b>CSS</b> ini, disarankan Anda harus mengenal <b>HTML</b> terlebih dahulu. Jika Anda ingin mempelajari <b>HTML</b> terlebih dahulu, Anda bisa mulai mencarinya <a href="http://batweber.blogspot.co.id/search/label/Belajar%20HTML" target="_blank">di sini</a>. </div>
<div style="text-align: justify;">
Sebelumnya, kami juga pernah membahas tentang <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-10-kombinasi-dengan-css.html" target="_blank">kombinasi HTML dengan CSS</a>. Disarankan Anda memahami artikel tersebut terlebih dahulu.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Ok, kita langsung saja.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>A. APA ITU CSS?</b></div>
<div style="text-align: justify;">
</div>
<ul>
<li><b>CSS </b>merupakan singkatan dari <i><b>Cascading Style Sheet</b></i></li>
<li><b>CSS </b>berfungsi untuk mengatur bagaimana sebuah file <b>HTML</b> ditampilkan pada sebuah halaman<b> web</b></li>
<li>Ekstensi dari sebuah file <b>CSS </b>adalah .css</li>
</ul>
<div>
<b>B. SINTAKS DASAR CSS</b></div>
<div>
<br /></div>
<div>
Sintaks dasar CSS terdiri dari <i style="font-weight: bold;">selector </i>dan <i style="font-weight: bold;"> declaration </i>atau bisa didefinisikan sebagai berikut :</div>
<div>
<b><br /></b></div>
<code style="background-color: black;"><span style="color: red;">
selector</span> <span style="color: orange;">{declaration}
</span></code><span style="color: orange;">
</span><br />
<code><br /></code>
<br />
<div style="text-align: justify;">
<i><b>Declaration</b></i> itu sendiri terdiri dari dua komponen yaitu <i style="font-weight: bold;">property </i>dan <b style="font-style: italic;">value</b>. Berikut sintaks lengkapnya :<br />
<br />
<code style="background-color: black;"><span style="color: red;">selector</span><span style="color: orange;"> {property:value;}</span></code><br />
<ul>
<li><b style="font-style: italic;">Selector </b>adalah elemen yang dipilih dari <b>HTML</b> untuk diatur tampilannya</li>
<li><b style="font-style: italic;">Declaration </b>adalah pengaturan tampilan yang akan kita terapkan pada <b><i>selector</i></b></li>
<li><i style="font-weight: bold;">Property </i>adalah properti yang akan diubah dari <i style="font-weight: bold;">selector </i>(misal : lebar, warna, dsb)</li>
<li><b style="font-style: italic;">Value </b>adalah nilai yang diberikan terhadap <i style="font-weight: bold;">property </i>(misal : hijau atau merah untuk warna, dsb)</li>
</ul>
<div>
Contoh penggunaannya adalah sebagai berikut :<br />
<br /></div>
</div>
<code style="background-color: black;"><span style="color: red;">
h1</span> <span style="color: orange;">{color:blue;background-color:red;} </span></code><br />
<br />
<i>Script </i>di atas berarti :<br />
<ul>
<li><b>h1 </b>sebagai <b><i>selector </i></b></li>
<li><b>color:blue; </b>dan <b>background-color:red; </b>sebagai <b><i>declaration</i></b></li>
<li><b>color </b>dan <b>background-color </b>sebagai <b><i>property</i></b></li>
<li><b>blue </b>dan <b>red </b>sebagai <b><i>value</i></b></li>
</ul>
<div style="text-align: justify;">
Dengan menggunakan <i>script </i>di atas dalam file <b>CSS</b> kita, maka setiap file <b>HTML</b> yang memuat file tersebut akan memiliki elemen <h1> dengan teks berwarna biru dan background berwarna merah.<br />
<br />
atau Anda juga bisa mencoba langsung  :<br />
<br />
<a class="coba" href="http://batweber.greengaluh.com/syntaks_dasar_css.html" target="_blank">Coba sendiri di sini</a></div>
<div style="text-align: justify;">
<br />
<br /></div>
<div style="text-align: justify;">
Demikian <b>Pengenalan CSS dan Sintaks Dasar CSS. </b>Semoga artikel ini bermanfaat.</div>
<div style="text-align: justify;">
Terima kasih, <i>wassalamu'alaikum warohmatullaahi wabarokaatuh.</i></div>

Belajar CSS Part 1 - Mengenal CSS dan Sintaks Dasar CSS

Assalamu'alaikum warohmatullaahi wabarokaatuh. Selamat datang di Seri Belajar CSS BatWeber. Kali ini kita akan mulai mempela...

Belajar HTML Part 25 (Basic-Tamat) - XHTML

Belajar HTML Part 25 (Basic-Tamat) - XHTML

Assalamu'alaikum warohmatullaahi wabarokaatuh. Artikel ini merupakan artikel terakhir dalam Seri Belajar HTML Basic . Sebenarnya ...

Belajar HTML Part 24 - URL Encoding

Belajar HTML Part 24 - URL Encoding

Assalamu'alaikum Warohmatullaahi Wabarokaatuh A. URL ( UNIFORM RESOURCE LOCATOR ) URL merupakan singkatan dari Uniform Resour...

Belajar HTML Part 23 - Character Set

Belajar HTML Part 23 - Character Set

Assalamu'alaikum warohmatullaahi wabarokaatuh Untuk menampilkan sebuah halaman HTML dengan tepat, sebuah web browser harus men...

Belajar HTML Part 22 - Penulisan Kode-Kode Simbol dan Entitas

</code>

Belajar HTML Part 22 - Penulisan Kode-Kode Simbol dan Entitas

Assalamu'alaikum Warohmatullaahi Wabarokatuh Dalam menulis sebuah dokumen HTML , entitas-entitas tertentu tidak bisa kita tulis...

Belajar HTML Part 21 - Head

<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 Head" 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 21 - Head" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<i>Assalamu'alaikum warahmatullaahi wabarakatuh</i></div>
<div class="separator" style="clear: both; text-align: justify;">
<i><br /></i></div>
<div class="separator" style="clear: both; text-align: justify;">
Seperti yang telah kita pelajari pada <a href="http://batweber.blogspot.com/2015/12/belajar-html-part-1-pengenalan-dan-teori-dasar-html.html" target="_blank">artikel pertama tentang pengenalan dan teori dasar HTML</a>, bahwa <b>struktur dasar HTML </b>terdiri dari tag <<b>html>, <head> </b>dan <b><body>. </b></div>
<div class="separator" style="clear: both; text-align: justify;">
Telah dijelaskan pada artikel tersebut bahwa <b>tag <head> </b>berisi informasi dari dokumen yang diproses di belakang layar dan tidak akan ditampilkan pada halaman<b> web</b>.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>A. MELEWATI DEKLARASI TAG <HEAD></b></div>
<div class="separator" style="clear: both; text-align: justify;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: justify;">
Deklarasi <b>tag <head> </b>sebenarnya bisa kita lewati (tidak dicantumkan) karena sebuah elemen yang disisipkan sebelum tag <body> akan secara otomatis didefinisikan sebagai bagian <b><head>. </b>Contoh :</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<code>
<!DOCTYPE html> </code><br />
<code><html></code><br />
<code>  <title>Judul halaman</title></code><br />
<code> <body></code><br />
<code>  <h1>Heading</h1></code><br />
<code>  <p>Paragraf.</p></code><br />
<code> </body> </code><br />
<code></html>
</code>
<br />
<code><br /></code>
Pada <i>script </i>di atas, tidak ada deklarasi <b>tag <head> </b>namun secara otomatis, tag <title> akan didefinisikan sebagai bagian dari <b>tag <head></b> oleh <i>browser.</i><br />
<i><br /></i>
<b>B. ELEMEN-ELEMEN DASAR PADA TAG <HEAD></b><br />
<b><br /></b>
Elemen-elemen dasar pada <b>tag <head> </b>di antaranya :<br />
<br />
<b>1. Elemen <title></b><br />
<b><br /></b>
<br />
<div style="text-align: justify;">
Elemen <title> dibutuhkan di setiap dokumen <b>HTML</b>. Elemen ini merupakan judul dari sebuah halaman dokumen. Elemen <title> berfungsi :</div>
<ul>
<li>Mendefinisikan yang akan ditampilkan pada tab <i>browser</i></li>
<li>Menjadi judul pada sebuah laman ketika laman tersebut ditambahkan doi <i>bookmark/favorit</i></li>
<li>Menampilkan judul sebuah laman pada hasil pencarian <i>search engine</i></li>
</ul>
<code>
<!DOCTYPE html> </code><br />
<code><html></code><br />
<code>  <title>Elemen title</title></code><br />
<code> <body>
Konten dokumen......</code><br />
<code> </body> </code><br />
<code></html>
</code>
<br />
<code><br /></code>
<b>2. Elemen <Style></b><br />
<b><br /></b>
Elemen <style> mendefinisikan <i>style </i>atau tampilan dari sebuah dokumen. Contoh :<br />
<br />
<code>
<style></code><br />
<code> body {background-color:yellow;}</code><br />
<code> p {color:blue;} </code><br />
<code></style>
</code>
<br />
<code><br /></code>
<br />
<div style="text-align: justify;">
Elemen <style> ini biasa digunakan untuk CSS internal, Anda bisa membacanya pada <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-10-kombinasi-dengan-css.html" target="_blank">Belajar HTML Part 10 - Kombinasi dengan CSS</a>. </div>
<br />
<b>3. Elemen <link></b><br />
<b><br /></b>
<br />
<div style="text-align: justify;">
Elemen <link> mendefinisikan relasi dengan file eksternal, misalnya dengan sebuah file <b>CSS</b>. Contoh :</div>
<code>
<link rel="stylesheet" href="style.css">
</code><br />
<code><br /></code>
<b>4. Elemen <meta></b><br />
<b><br /></b>
<br />
<div style="text-align: justify;">
Elemen <meta> digunakan untuk menspesifikasikan metadata dari sebuah dokumen. Beberapa metadata yang bisa dispesifikasikan di sini adalah :</div>
<ul>
<li>description = mendeskripsikan berisi tentang apa sebuah halaman <b>web</b></li>
<li>keyword = menspesifikasikan kata kunci yang digunakan sebuah halaman web pada <i>search engine</i></li>
<li>author = menspesifikasikan pemilik dari sebuah halaman <b>web</b></li>
</ul>
<div>
Contoh :</div>
<div>
<br /></div>
<code>
<head></code><br />
<code> <meta name="description" content="Blog tentang wawasan, tips & trik, serta berbagai tutorial tentang komputer"></code><br />
<code> <meta name="keywords" content="Wawasan komputer,Tips & Trik komputer,Tutorial Web, Tutorial HTML, Tutorial Animasi"></code><br />
<code> <meta name="author" content="Kamaludin Khoir"></code><br />
<code> <meta charset="UTF-8"> </code><br />
<code></head>
</code><br />
<code><br /></code>
<b>5. Elemen <script></b>
<br />
<b><br /></b>
Elemen <script> digunakan untuk menempatkan <b>javascript </b>sisi klien. Contoh :<br />
<br />
<code>
<script></code><br />
<code> function myFunction</code><br />
<code>  {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
} </code><br />
<code></script>
</code><br />
<code><br /></code>
<b>6. Elemen <base></b><br />
<b><br /></b>
Elemen <base> digunakan untuk target pada tautan-tautan pada sebuah halaman <b>web</b>. Contoh :<br />
<br />
<code>
<base href="http://www.batweber.blogspot.co.id" target="_blank">
</code>
<br />
<code><br /></code>
<br />
<div style="text-align: justify;">
Dengan menyisipkan <i>script </i> di atas, seluruh elemen tautan dalam dokumen <b>HTML</b> yang mengarah pada <a href="http://batweber.blogspot.com/" target="_blank">http://batweber.blogspot.com/</a> akan ditampilkan pada tab baru, dengan atribut target = "_blank".</div>
<br />
<br />
Demikian <b>seri belajar HTML tentang tag <head>. </b>Semoga bermanfaat, terima kasih,<br />
<i><br /></i>
<i>wassalamu'alaikum warohmatullaahi wabarokatuh.</i>

Belajar HTML Part 21 - Head

Assalamu'alaikum warahmatullaahi wabarakatuh Seperti yang telah kita pelajari pada artikel pertama tentang pengenalan dan teor...

Belajar HTML Part 20 - Kombinasi dengan Javascript

Belajar HTML Part 20 - Kombinasi dengan Javascript

Assalamu'alaikum Warahmatullaahi Wabarakatuh Kali ini kita akan mempelajari tentang kombinasi HTML dengan Javascript. Dengan mena...

Belajar HTML Part 19 - Penyisipan Warna

<code>
<style></code><br />
<code> body {</code><br />
<code>  background-color:rgb(0,255,0);</code><br />
<code> } </code><br />
<code></style>
</code><br />
<code></code> 
<code><span style="font-family: "times new roman"; text-align: justify;"> </span></code><br />
<br />
Dengan menggunakan kode RGB dan Hexa, kita bisa memiliki 16.777.216 (256x256x256) pilihan variasi warna. berbeda dengan menggunakan nama warna yang hanya terbatas hingga 140 warna.<br />
<br />
Demikian <b>seri belajar HTML tentang penyisipan warna, </b>semoga bermanfaat.<br />
Terima kasih, <i>wassalamu'alaikum warahmatullaahi wabarakaatuh.</i>

Belajar HTML Part 19 - Penyisipan Warna

Assalamu'alaikum warahmatullaahi wabarakaatuh Jika Anda sudah sampai pada seri belajar HTML Part 19 ini, maka Anda sudah tidak as...

Belajar HTML Part 18 - Iframes

<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 Iframes" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxYRbmKC0UlN26qG8siwvWK7gDZmJQnak1492vdXXUr5p2k_db-tPUDntYTmjYKgcWXWaPncQB1C6Rix06qZJbJbf5FWXbItc62VLBv1wSo3rDSkAZSMKovbCIMTradbXdTeUFbwqCFw4/s320/html_tutorial.jpg" title="Tutorial HTML Part 18 Iframes" width="320" /></a></div>
<i>Assalamu'alaikum Warahmatullaahi Wabarakaatuh</i><br />
<i><br /></i>
<br />
<div style="text-align: justify;">
Kali ini kita akan mempelajari tentang <b>elemen Iframes. Elemen Iframes </b>digunakan untuk menampilkan sebuah halaman di dalam sebuah halaman lain. <i>Syntax </i>dari elemen ini adalah :</div>
<div style="text-align: justify;">
<br /></div>
<code>
<iframe src="URL"></iframe>
</code>

<br />
<code><br /></code>Untuk lebih jelasnya, silahkan ketik <i>scrypt </i>berikut :<br />
<br />
<code>
<iframe src="http://batweber.blogspot.co.id" name="iframe_a" style="border:none; width:1000px; height: 400px;"></code><br />
<code></iframe> </code><br />
<code><p><a href="http://batweber.blogspot.co.id" target="iframe_a">BatWeber</a></p>
</code>
<br />
<code><br /></code>
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/AVvXsEhX9tW9K8zSNECdsz3D-2AptzTeaNS4oGnoLxe66RbruGUFIUVAde_V3GGac8BIl7cR8sesv5btIm5PosxFRWDOJtsCW3-apLGDXPq3Byh6N7N6YItVixGDfrSpywbZEi5ZUdgiPRPK4xw/s1600/belajar_html_part_18_iframes.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML Part 18 - Iframes" border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX9tW9K8zSNECdsz3D-2AptzTeaNS4oGnoLxe66RbruGUFIUVAde_V3GGac8BIl7cR8sesv5btIm5PosxFRWDOJtsCW3-apLGDXPq3Byh6N7N6YItVixGDfrSpywbZEi5ZUdgiPRPK4xw/s640/belajar_html_part_18_iframes.jpg" title="Belajar HTML Part 18 - Iframes" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Penjelasan :<br />
<ul>
<li>Atribut <b>src </b>mendefinisikan alamat halaman yang akan kita tampilkan dalam frame.</li>
<li><b>name="iframe_a"</b>mendefinisikan nama dari frame yang kita buat yaitu <b>iframe_a</b></li>
<li><b>style="border:none; width:1000px; height: 400px;" </b>mendefinisikan bahwa border yang kita buat tidak memiliki border, serta memiliki lebar 1000 pixel dan tinggi 400 pixel</li>
<li><b><p><a href="http://batweber.blogspot.co.id" target="iframe_a">BatWeber</a></p></b> mendefinisikan sebuah <i>link </i>yang jika kita klik, akan me-<i>reload</i> <i>frame </i>yang kita buat sebagai target.</li>
</ul>
<br />
<div>
Demikian <b>seri belajar HTML </b>untuk kali ini. Semoga bermanfaat.</div>
<div>
Terima kasih, <i>wassalamu'alaikum warahmatullaahi wabarakatuh.</i></div>

Belajar HTML Part 18 - Iframes

Assalamu'alaikum Warahmatullaahi Wabarakaatuh Kali ini kita akan mempelajari tentang elemen Iframes. Elemen Iframes digunakan untu...

Belajar HTML Part 17 - Layout

<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 Layout" 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 17 Layout" width="320" /></a></div>
<i>Assalamu'alaikum Warahmatullaahi Wabarakatuh</i><br />
<i><br /></i>
<br />
<div style="text-align: justify;">
Pada artikel sebelumnya kita telah mempelajari tentang <b><a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-16-class.html" target="_blank">Class</a>. </b>Kali ini kita akan belajar tentang <b>layout </b>dengan <b>HTML</b>. Yang dimaksud <b>layout pada HTML </b>di sini adalah cara kita membagi-bagi sebuah halaman <b>HTML</b> menjadi beberapa bagian, misalnya seperti majalah. Ada bagian judul, bagian isi, samping. dan bagian bawah atau kaki. Misalnya seperti berikut :</div>
<div style="text-align: justify;">
<br /></div>
<div align="center">
<table border="3" cellspacing="0">
<tbody>
<tr>
<td colspan="2" height="100px" width="250px">Header</td>
</tr>
<tr>
<td colspan="2" width="250px">Navigasi</td>
</tr>
<tr><td height="250px" width="30%">Sidebar</td>
<td>Konten</td></tr>
<tr>
<td colspan="2">Footer</td>
</tr>
</tbody></table>
</div>
<div style="text-align: justify;">
Dalam membuat sebuah tampilan layout pada halaman <b>HTML</b> kita bisa menggunakan tiga cara. Yaitu :</div>
<div style="text-align: justify;">
<ul>
<li>Menggunakan <<b>div></b></li>
<li>Menggunakan <b>elemen HTML5</b></li>
<li>Menggunakan <<b>table><table></table>
</b></li>
</ul>
<div>
<b>1. Membuat Layout Menggunakan tag <div></b><br />
<div>
</div>
<b>
</b></div>
<div>
<b><br /></b>
Untuk menggunakan tag <b><div> </b>coba buat file dengan isi <i>scrypt </i>berikut :</div>
<div>
<b><br /></b>
<code>
<body></code><br />
<code> <div id="header"></code><br />
<code>  <h1>Galeri Kota</h1></code><br />
<code> </div></code><br />
<code>   <div id="nav">
London<br>
Paris<br>
Tokyo
</div></code><br />
<code>   <div id="section">
<h1>London</h1>
<p>London adalah sebuah kota yang merupakan Ibu kota dari Negara Inggris</p></code><br />
<code>  </div> </code><br />
<code>  <div id="footer">
Copyright © batcomputer93.blogspot.co.id</div> </code><br />
<code></body>
</code>
<br />
<br /></div>
</div>
Kemudian save file tersebut. Misalnya dengan nama <b>layout_div.html. </b>Selanjutnya, tambahkan <i>scrypt </i>berikut :<br />
<br />
<code>
<style></code><br />
<code> #header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}</code><br />
<code> #nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}</code><br />
<code> #section {
    width:350px;
    float:left;
    padding:10px; 
}</code><br />
<code> #footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
} </code><br />
<code></style>
</code><br />
<code><br /></code>
<b>2. Membuat Layout dengan menggunakan Elemen HTML5</b><br />
<b><br /></b>
Pada <b>HTML5, </b>kita telah disediakan elemen semantik untuk membuat <b>layout. </b>Berikut elemen semantik yang dimiliki <b>HTML5 :</b><br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidayvcMI913UmfbSeqjtLLywDpShJLyg_uNP0L2yxR_rVycmK39QL-b1aS78rNZbI6kDpdApIo5GSj-20sPvWj0vY9hm0WrQHFI6fQguxSc5NAQ1k5BfhAjZjXtAZs6-YwD2yq4ImHrS0/s1600/tutorial_html_layout.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="Tutorial HTML Layout" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidayvcMI913UmfbSeqjtLLywDpShJLyg_uNP0L2yxR_rVycmK39QL-b1aS78rNZbI6kDpdApIo5GSj-20sPvWj0vY9hm0WrQHFI6fQguxSc5NAQ1k5BfhAjZjXtAZs6-YwD2yq4ImHrS0/s1600/tutorial_html_layout.jpg" title="Tutorial HTML Part 17 Layout" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sumber : <a href="http://www.w3schools.com/html/html_layout.asp" target="_blank">www.w3schools.com</a><br />
<br />
<div style="text-align: justify;">
</div>
</td></tr>
</tbody></table>
<ul>
<li><span style="font-size: small;"><b><header></b> =  Elemen untuk header laman</span></li>
<li><span style="font-size: small;"><<b>nav> = </b>Elemen untuk bagian navigasi</span></li>
<li><span style="font-size: small;"><<b>section> = </b>Elemen untuk membuat sebuah bagian (section) dari sebuah laman</span></li>
<li><span style="font-size: small;"><<b>article> = </b>Mendefinisikan sebuah bagian independen yang berisi artikel</span></li>
<li><span style="font-size: small;"><b><aside> = </b>Mendefinisikan bagian pinggir dari dokumen. (Misal : Sidebar, dsb)</span></li>
<li><span style="font-size: small;"><<b>footer> = </b>Mendefinisikan kaki dokumen</span></li>
<li><span style="font-size: small;"><<b>details> = </b>Mendefinisikan detail tambahan</span></li>
<li><span style="font-size: small;"><<b>summary> = </b>Mendefinisikan heading dari elemen <b><details></b></span></li>
</ul>
<div>
<b><br /></b></div>
<div>
<b><br /></b></div>
<div>
<b><br /></b></div>
<div>
<b><br /></b></div>
<div>
Untuk lebih jelasnya, bisa dipraktekkan dengan menulis <i>scrypt </i>berikut :</div>
<div>
<br /></div>
<code>
<body></code><br />
<code> <header></code><br />
<code>    <h1>Galeri Kota</h1></code><br />
<code> </header></code><br />
<code> <nav> London<br> Paris<br> Tokyo</code><br />
<code> </nav>
   <section> <h1>London</h1> <p>London adalah sebuah kota yang merupakan Ibu kota dari Negara Inggris</p></code><br />
<code> </section></code><br />
<code> <footer> Copyright © batcomputer93.blogspot.co.id</code><br />
<code> </footer> </code><br />
<code></body>
</code><br />
<code><style></code><br />
<code> header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}</code><br />
<code> nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}</code><br />
<code> section {
    width:350px;
    float:left;
    padding:10px; 
}</code><br />
<code> footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
} </code><br />
<code></style></code>
<code><br /></code><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9RjQ92HFewZe8Ya0shBso7FnzZefm16YVp0bch36S0NJsAzwu0xjw4WbHKmELY-BWLdTACmn64VJ5NcsP5A_uK1dPo0I90OSyihPFGUCImvajZvPTJ0NhjNKYqLszY2S7e6GI4NJEJ9M/s1600/tutorial_html_layout.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Layout" border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9RjQ92HFewZe8Ya0shBso7FnzZefm16YVp0bch36S0NJsAzwu0xjw4WbHKmELY-BWLdTACmn64VJ5NcsP5A_uK1dPo0I90OSyihPFGUCImvajZvPTJ0NhjNKYqLszY2S7e6GI4NJEJ9M/s640/tutorial_html_layout.jpg" title="Tutorial HTML Part 17 Layout" width="640" /></a></div>
<br />
<div style="text-align: justify;">
Tampilan di atas merupakan hasil dari kedua <i>scrypt </i>yang telah Anda buat di atas. Keduanya menghasilkan tampilan yang sama. Saya di sini lebih merekomendasikan menggunakan <i>scrypt </i>dengan elemen <b>HTML5</b>. Karena selain lebih mudah, juga lebih familiar dengan <i>Search Engine Optimization (SEO)</i></div>
<br />
<b>3. Membuat layout dengan menggunakan tag <table></b><br />
<div style="text-align: justify;">
<span style="font-weight: bold;"><br /></span></div>
<div style="text-align: justify;">
Dulu, pertama saya belajar <b>HTML</b>, saya menggunakan tag <<b>table> </b>untuk membuat <b>layout</b>. Pada tutorial lain mungkin Anda juga sempat mempelajari membuat desain <b>layout </b>dengan menggunakan tag <<b>table>. </b>Memang bisa saja kita menggunakan cara ini. Namun sangat tidak direkomendasikan. Beberapa alasan yang saya fahami adalah sebagai berikut :</div>
<div style="text-align: justify;">
<ul>
<li>Membuat <b>layout </b>dengan tag <<b>table> </b>menjadikan laman yang kita buat tidak responsif dengan perangkat pengguna.</li>
<li>Penggunaan tag <<b>table> </b>untuk desain <b>layout </b>membuat laman yang kita buat tidak familiar dalam <i>Search Engine Optimization (SEO)</i></li>
<li>Pada tahap awal mungkin lebih mudah menggunakan tag <<b>table>. </b>Tapi pada kelanjutannya, akan sulit membuat sebuah tampilan yang menarik dengan menggunakan tag <<b>table>. </b>Karena memang tag ini bukan diperuntukkan untuk membuat <b>layout. </b>Sehingga akan tidak familiar dengan <i>style </i><b>CSS</b></li>
<li>Tag <<b>table> </b>memang tidak dibuat untuk <b> </b>desain <b>layout.</b></li>
</ul>
<div>
Demikian <b>Seri belajar HTML </b>untuk kali ini, semoga bermanfaat.</div>
<div>
Terima kasih, <i>wassalamu'alaikum warahmatullaahi wabarakaatuh.</i></div>
</div>

Belajar HTML Part 17 - Layout

Assalamu'alaikum Warahmatullaahi Wabarakatuh Pada artikel sebelumnya kita telah mempelajari tentang Class . Kali ini kita akan bel...

Belajar HTML Part 16 - Class

<div class="negara"></code><br />
<code>  <h2>Indonesia</h2></code><br />
<code>  <p>Indonesia merupakan salah satu negara yang terdapat di Asia Tenggara.</p></code><br />
<code> </div></code><br />
<code> <div class="kota"></code><br />
<code>  <h2>Tokyo</h2></code><br />
<code>  <p>Tokyo adalah Ibu kota dari Negara Jepang.</p></code><br />
<code> </div></code><br />
<code> <div class="negara"></code><br />
<code>  <h2>Jepang</h2></code><br />
<code>  <p>Jepang merupakan salah satu negara yang terdapat di Asia Timur.</p></code><br />
<code> </div> </code><br />
<code> </body> </code><br />
<code></html>
</code>
<br />
<code><br /></code>
Pada <i>scrypt </i>di atas kita memiliki dua <b>class </b>yaitu "kota" dan "negara". Masing-masing <b>class </b>tersebut kita beri <i>style </i>yang berbeda. 
<br />
Berikut hasil dari <i>scrypt </i>di atas :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtA_O4JF0AuBuTzcM-94GNMY4cwOz0837pvsfMmaBGhvSvGJKQhYzj8FveqKdr3TfrMviXpOBhfCfpawgoepYPehV4BNQQBAeLXsGtb2fBUdXLwx72eh-Mxda9IeRvIeBgwtZT7198Sgo/s1600/tutorial_html_class.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML Class" border="0" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtA_O4JF0AuBuTzcM-94GNMY4cwOz0837pvsfMmaBGhvSvGJKQhYzj8FveqKdr3TfrMviXpOBhfCfpawgoepYPehV4BNQQBAeLXsGtb2fBUdXLwx72eh-Mxda9IeRvIeBgwtZT7198Sgo/s640/tutorial_html_class.png" title="Tutorial HTML Part 16 Class" width="640" /></a></div>
<br />
<div style="text-align: justify;">
Penjelasan :</div>
<ul>
<li style="text-align: justify;">Pada tag <head> kita menyisipkan <style></li>
<li style="text-align: justify;">Sebuah <b>class </b>dalam style ditandai dengan tanda titik(.)</li>
<li style="text-align: justify;">Dalam tag <style> kita membuat dua div dengan <b>class </b>yang berbeda yaitu <b>div.kota</b> dan <b>div.negara</b></li>
<li style="text-align: justify;"><b>div.kota </b>kita beri <b>background-color: black; </b>dan <b>color:white; </b>yang berarti kita memberi background pada <b>div </b>tersebut dengan warna hitam dan memberi warna pada teks yang terdapat di dalamnya dengan warna putih</li>
<li style="text-align: justify;"><b>div.negara </b>kita beri <b>background-color: green; </b>dan <b>color:red; </b>yang berarti kita memberi background pada <b>div </b>tersebut dengan warna hijau dan memberi warna pada teks yang terdapat di dalamnya dengan warna merah</li>
<li style="text-align: justify;">Dengan demikian setiap <b>div </b>yang kita definisikan dengan <b>class kota </b>akan diberi background hitam dan warna teks putih, dan setiap <b>div </b>dengan <b>class negara </b>akan diberi background hijau dan warna teks merah.</li>
</ul>
<div style="text-align: justify;">
Demikian <b>Seri Belajar HTML tentang Class. </b>Semoga bermanfaat, terima kasih,<br />
<br /></div>
<div style="text-align: justify;">
<i>wassalamu'alaikum warahmatullaahi wabarakaatuh.</i></div>

Belajar HTML Part 16 - Class

Assalamu'alaikum Warahmatullaahi Wabarkaatuh Pada artikel sebelumnya kita telah belajar tentang Elemen Blok dan Inline . Pada artike...

Belajar HTML Part 15 - Elemen Blok dan Inline

<br />
<code><br /></code>
Kemudian simpan dan jalankan pada <i>browser </i>Anda. Berikut tampilan yang dihasilkan :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghLqbSLavNYAGwF120Z3KUK0ED4KMY2GTcJnfgR_lDpKLQiRY1XAPJ7McJ6HDtFUCZfDZlQMJZOWT_5K9PiOq-6NCD4-wGgpc5VrdY-J_mZPHU5_Bthi9SbNbjjBlwUyWtIYZC_re6mRg/s1600/tutorial_html_elemen_blok_dan_inline.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghLqbSLavNYAGwF120Z3KUK0ED4KMY2GTcJnfgR_lDpKLQiRY1XAPJ7McJ6HDtFUCZfDZlQMJZOWT_5K9PiOq-6NCD4-wGgpc5VrdY-J_mZPHU5_Bthi9SbNbjjBlwUyWtIYZC_re6mRg/s640/tutorial_html_elemen_blok_dan_inline.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Demikian <b>Seri Belajar HTML perbedaan elemen blok dan inline. </b>Semoga artikel ini bisa memberikan manfaat bagi Anda.</div>
<div class="separator" style="clear: both; text-align: justify;">
Terima kasih,</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<i>Wassalamu'alaikum Warahmatullaahi Wabarakaatuh.</i></div>

Belajar HTML Part 15 - Elemen Blok dan Inline

Assalamu'alaikum Warahmatullaahi Wabarakatuh. Pada artikel sebelumnya, kita telah belajar tentang list pada HTML . Kali ini kita ...

Belajar HTML Part 14 - List

<br />
<code><br /></code>
<code><br /></code>Berikut hasil 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/AVvXsEgGX8_dQf5GegqnVt0Ef0VHLp0mNUDIewKKvH08GL5bL_AAw9-Gk0vRNZNU-eyGw6lfkAgjQBS99VF-YsjucDdNWVfDAY7h2KOuHqdzf6p8SwEH0lMAMh68yMgruhCjge1P1P-dmpcOm3g/s1600/tutorial_html_list.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML List" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGX8_dQf5GegqnVt0Ef0VHLp0mNUDIewKKvH08GL5bL_AAw9-Gk0vRNZNU-eyGw6lfkAgjQBS99VF-YsjucDdNWVfDAY7h2KOuHqdzf6p8SwEH0lMAMh68yMgruhCjge1P1P-dmpcOm3g/s320/tutorial_html_list.png" title="Tutorial HTML Part 14 List" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Kita lihat setiap <i>style </i>menghasilkan tipe yang berbeda.</div>
<br />
<b>2. <i>ORDERED LIST</i></b><br />
<b><i><br /></i></b>
<i>Ordered List </i>digunakan untuk membuat <i>list </i>yang berurutan. Contoh :<br />
<ol>
<li>item pertama</li>
<li>item kedua</li>
<li>item ketiga</li>
</ol>
<div>
<i>Syntax </i>yang digunakan untuk membuat <i>list </i>item seperti di atas adalah :</div>
<div>
<br /></div>
<div>
<code>
<ol></code><br />
<code> <li>item</li></code><br />
<code> <li>item</li></code><br />
<code> <li>item</li> </code><br />
<code></ol>
</code>
<br />
<br /></div>
<b>Tipe-tipe <i>Ordered List</i></b><br />
<b><i><br /></i></b>
Pada contoh di atas, kita menggunakan urutan 1,2,3, dan seterusnya. Bagaimana jika kita ingin menggunakan urutan a,b,c atau yang lainnya? Berikut contoh <i>scrypt</i>-nya :<br />
<br />
<code>
<ol type="1"></code><br />
<code> <li>Item Pertama</li></code><br />
<code> <li>Item Kedua</li></code><br />
<code> <li>Item Ketiga</li> </code><br />
<code></ol> </code><br />
<code><ol type="A"></code><br />
<code> <li>Item Pertama</li></code><br />
<code> <li>Item Kedua</li></code><br />
<code> <li>Item Ketiga</li> </code><br />
<code></ol> </code><br />
<code><ol type="a"></code><br />
<code> <li>Item Pertama</li></code><br />
<code> <li>Item Kedua</li></code><br />
<code> <li>Item Ketiga</li> </code><br />
<code></ol> </code><br />
<code><ol type="I"></code><br />
<code> <li>Item Pertama</li></code><br />
<code> <li>Item Kedua</li></code><br />
<code> <li>Item Ketiga</li> </code><br />
<code></ol> </code><br />
<code><ol type="i"></code><br />
<code> <li>Item Pertama</li></code><br />
<code> <li>Item Kedua</li></code><br />
<code> <li>Item Ketiga</li> </code><br />
<code></ol>
</code><br />
<br />
Berikut tampilan dari hasil <i>scrypt </i>di atas :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvCekUrMfILGyUpyAPle5gxwPBuqjOHaKGYMHDWLM9HWxzgkO-WMi-dFReUdYL2qSLRNdOxhLkc94LOSsGZZvUcgYbi4RvZ0ZEyKNF3hG38oUhLUZYHH3LkgogS6emhyPwfrO5GED6YTo/s1600/tutorial_html_list.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML List" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvCekUrMfILGyUpyAPle5gxwPBuqjOHaKGYMHDWLM9HWxzgkO-WMi-dFReUdYL2qSLRNdOxhLkc94LOSsGZZvUcgYbi4RvZ0ZEyKNF3hG38oUhLUZYHH3LkgogS6emhyPwfrO5GED6YTo/s320/tutorial_html_list.png" title="Tutorial HTML Part 14 List" width="128" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>3. <i>DESCRIPTION LIST</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>Description list </i>digunakan untuk sebuah <i>list </i>yang dilengkapi penjelasan dari setiap itemnya. Contoh:</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_jsmk5-5SkeZRUDLizAElyasHcZG4lm3wy4rRd1uRt4JZLf-WG-Ub2PxWYMXOhxEiiq0PRUbiWRNH0l6kr_wDm_YCYuRcH5BtwILJ2cT68CZDFMKtIL43pNglR5sur8e_I3dkUea3LEM/s1600/tutorial_html_list.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML Part 14 - List" border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_jsmk5-5SkeZRUDLizAElyasHcZG4lm3wy4rRd1uRt4JZLf-WG-Ub2PxWYMXOhxEiiq0PRUbiWRNH0l6kr_wDm_YCYuRcH5BtwILJ2cT68CZDFMKtIL43pNglR5sur8e_I3dkUea3LEM/s320/tutorial_html_list.png" title="Belajar HTML Part 14 - List" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
 Untuk membuat tampilan seperti di atas, gunakan <i>scrypt </i>berikut :</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<code>
<dl></code><br />
<code> <dt>Unordered List</dt></code><br />
<code> <dd>- List item tidak berurutan</dd></code><br />
<code> <dt>Ordered List</dt></code><br />
<code> <dd>- List item berurutan</dd> </code><br />
<code></dl></code><br />
<br />
<ul>
<li>Dalam <i>scrypt </i>di atas, tag <b><dl></b> berarti mencakup keselruhan <i>list</i>.</li>
<li>tag <<b>dt> </b>berarti item yang akan diberi deskripsi</li>
<li>tag <b><dd> </b>berarti deskripsi dari item</li>
</ul>
<div>
<b>4. <i>LIST </i>BERCABANG (<i>NESTED LIST</i>)</b></div>
<div>
<b><br /></b></div>
<div>
<i>Nested List </i>digunakan bila kita ingin membua <i>list </i>di dalam <i>list. </i>Contoh :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGD3zFXC_lL-5TLu_lHo-NsR9HGoeaE4d6U55FMlcHRuP8d9-mTFOfGT2nQpZsRDeC6hvVhJTOcIABxzwxJkcdpm2DNpk9Np8yKhWVyBSdvUN_uRz47VOmit9tZxnXw7C6MQmAFDcqtXI/s1600/tutorial_html_list.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML Part 14 - List" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGD3zFXC_lL-5TLu_lHo-NsR9HGoeaE4d6U55FMlcHRuP8d9-mTFOfGT2nQpZsRDeC6hvVhJTOcIABxzwxJkcdpm2DNpk9Np8yKhWVyBSdvUN_uRz47VOmit9tZxnXw7C6MQmAFDcqtXI/s1600/tutorial_html_list.png" title="Belajar HTML Part 14 - List" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Untuk membuat tampilan di atas, gunakan <i>scrypt </i>berikut :</div>
<div>
<br /></div>
<code>
<ul></code><br />
<code> <li>Kopi</li></code><br />
<code> <li>Teh </code><br />
<code> <ul></code><br />
<code>     <li>Teh Hitam</li></code><br />
<code>     <li>Teh Hijau</li> </code><br />
<code> </ul></code><br />
<code> </li> </code><br />
<code> <li>Susu</li> </code><br />
<code></ul>
</code><br />
<code><br /></code>
<b>4. LIST HORIZONTAL</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdRhFBaQZhAl4ujllEJwt3RcsBsRHOlQG4Oh5vgxDcTstm-77i2PzRBGI1Ddqrc0vNWhd9tVwMmmu_ULucADLwAkyZnkgf8AjUPEXinDsM64p4TZp8v85pDGhxzdwV7NiJMosOV7bAQ14/s1600/tutorial_html_list.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial HTML List" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdRhFBaQZhAl4ujllEJwt3RcsBsRHOlQG4Oh5vgxDcTstm-77i2PzRBGI1Ddqrc0vNWhd9tVwMmmu_ULucADLwAkyZnkgf8AjUPEXinDsM64p4TZp8v85pDGhxzdwV7NiJMosOV7bAQ14/s320/tutorial_html_list.png" title="Tutorial HTML Part 14 List" width="320" /></a></div>
<b><br /></b>
<br />
<div style="text-align: justify;">
Pada gambar di atas, terdapat empat item yang di-<i>list </i>secara horizontal, yaitu HTML, CSS, Javascript, dan PHP.</div>
<div style="text-align: justify;">
Untuk membuat <i>list </i>yang kita buat berurutan secara horizontal seperti di atas, kita perlu menambahkan <i>scrypt </i>pada <i>style </i>CSS kita dengan atribut <b>display </b>dan <i>value</i> <b>inline</b>.</div>
<div style="text-align: justify;">
Berikut <i>scrypt </i>lengkapnya :</div>
<br />
<code><!DOCTYPE html><br />
<html><br />
 <head><br />
  <style><br />
   ul#menu li {
    display:inline;
}<br />
 </style><br />
</head><br />
 <body><br />
 <h2>Horizontal List</h2><br />
 <ul id="menu"><br />
 <li>HTML</li><br />
 <li>CSS</li><br />
 <li>JavaScript</li><br />
 <li>PHP</li><br />
 </ul><br />
 </body><br />
</html>
</code><br />
<br />
Demikian <b>Seri Belajar HTML Part 14 tentang <i>List </i>pada HTML. </b>Semoga bermanfaat.<br />
<br />
<i>Wassalamu'alaikum Warahmatullaahi Wabarakatuh.</i>

Belajar HTML Part 14 - List

Assalamu'alaikum Warahmatullaahi Wabarakatuh. Setelah mempelajari Tabel pada artikel sebelumnya , sekarang kita akan mempelaja...