Tuesday, September 30, 2014

Tag base HTML

Tag <base> alamat dasar dari halaman web. Satu halaman web hanya punya satu tag <base>. Tag base diletakkan dalam tag <head>. Contohnya alamat dasar webnya: http://www.tipspengetahuan.com maka jika di dalam ada alamat url di tag body <a href="populer.html">Populer</a>, maka jika diklik Populer, urlnya berubah menjadi: http://www.tipspengetahuan.com/populer.html.

Tetapi jika url di tag body tidak ingin dipengaruhi oleh tag base, Anda dapat menuliskan urlnya secara lengkap, dengan kata lain sertakan dengan http. Misalnya Anda ingin menulis url di tag body yang terhubung ke situs lain, misalnya: detik.com. Maka penulisan urlnya: <a href="http://detik.com">Link ke detik.com</a>. Mak url Link ke detik.com tidak menjadi http://www.tipspengetahuan.com/detik.com, tetapi menjadi http://detik.com.

Tag base ditulis dengan


Contoh penulisan:

base.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag base html</title>
            <base href="http://www.tipspengetahuan.com/">
<!--Jika ingin dibuka dalam tab baru, tambahkan
            atribut target="_blank" seperti berikut:
            <base target="_blank" href="http://www.tipspengetahuan.com/">
            -->

        </head>
    <body>
    <a href="populer.html">Populer</a>
    <br />
    <a href="http://detik.com">Link ke detik.com</a>
    </body>
</html>

Tampilan:


 ^Baca juga: Tag <bdo> HTML.
Referensi tulisan:
  1. <base>; ditulis oleh: Tim MDN (Mozilla Developer Network), mozilla.developer.org, diakses 01 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
  2. base; ditulis oleh: Tim W3 (Word Wide Web), w3.org, diakses 01 Oktober 2014.

Sunday, September 28, 2014

Tag audio HTML5

Tag <audio> HTML5 digunakan untuk memutar file audio di halaman web. Contoh file audio yang didukung berupa MP3, AAC, Oog, WAV. Tetapi format yang didukung hampir semua browser populer adalah formpat MP3 dan AAC. Tag <audio> menggunakan atribut src yang menunjukkan sumber dan nama audio.

Contoh sederhana (siapkan 1 file audio apa saja):

audio.html

<!DOCTYPE HTML>
    <html>
        <head>
        <title>Tag audio HTML5</title>
        </head>
    <body>
    <!--
    controls digunakan untuk menampilkan menu kontrol
    pada pemutaran audio, seperti adanya pengaturan volume
    dan play-pause
    -->
    <!--Jika Anda meletakkan file audio di dalam folder,
    tuliskan nama folder kemudian nama audio. misalnya:
    src="audio/nama_audio.m3"
    -->
    <strong>Surat Al Fatihah oleh Fahd al kanderi:</strong>
    <br />
    <br />
    <audio controls src="alfatihah_alkanderi.mp3">
    <!--Jika browser tidak mendukung tag audio, tampilkan
    peringatan
    -->
    <p>Maaf, browser Anda tidak mendukung tag audio. Update segera
    browser Anda.
    </p>
    <!--Jika ingin ketika audio di tampilkan langsung diputar,
    tambahkan atribut autoplay.
    <audio controls src="alfatihah_alkanderi.mp3" autoplay></audio>
    -->
    </audio>
</body>
</html>


Tampilan di Firefox 32.0.2:


^Baca juga: Tag <base> HTML untuk membuat alamat dasar web.

Referensi tulisan:
  1. <audio>; ditulis oleh: Tim MDN (Mozilla Developer Network), developer.mozilla.org, diakses 29 September 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
  2. HTML/Elements/audio; ditulis oleh Tim W3C, w3.org, diakses 29 September 2014.
  3. HTML5 Audio; ditulis oleh Kontributor Wikipedia, en.wikipedia.org, diakses 29 September 2014.

Friday, September 26, 2014

Tag aside HTML 5

Aside atau as side merupakan tag HTML5 berisi informasi yang masih berkaitan dengan konten utama, tetapi beridiri sendiri. Bingung? Penulis beri contoh saja, penggunaannya untuk artikel atau informasi terkait, menu untuk share ke media sosial, penempatan iklan, informasi pemilik blog, dan informasi aplikasi web untuk ponsel pintar.

Contoh penerapan tag aside (mashable.com)

Tag <aside> dalam bahasa Indoensia diartikan "selain". Selain dari konten, tetapi masih berkaitan. Penempatannya bisa di mana saja, tak harus di side bar. Tag aside memiliki tag pembuka <aside> dan penutup </aside>. Tag aside menudukung css untuk pemformatan dan tata letak. Tag aside bisa berada di dalam tag article atau berdiri sendiri.

Contoh: aside.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag aside</title>
            <style type="text/css">
            #isi{font-family: Tahoma, Verdana; width:850px;font-size:12px;}
            #kiri{width:490px; padding:right:8px;
            display:inline-block;
            border-right:1px solid #ccc;float:left;}
            #kanan{width:330px;margin-left:20px; float:left;}
            aside.ref{background-color:#FAFAFA;}
            aside.share{background-color:#FAFAFA;
            pading:5px;width:490px; height:40px;}
            aside.author{background-color:#FAFAFA;font-size:10px;}
            </style>
        </head>
    <body>
    <div id="isi">
        <div id="kiri">

<article>
        <strong>Tag aside share: Di sini kode share ke fb, twitter, Google+</strong>
        <aside class="share">
        Fb, Google+, Twitter.
        </aside>
        <p>Muhammad bin Abdullah (lahir di Mekkah, 20 April 570 – meninggal di Madinah,
        8 Juni 632 pada umur 62 tahun) adalah seorang nabi dan rasul yang terakhir bagi
        umat Muslim. Muhammad menciptakan ajaran dan ilmu pengetahuan berupa agama Islam.
        </p>
        <p>
        Michael H. Hart dalam bukunya The 100 menilai Muhammad sebagai
        tokoh paling berpengaruh sepanjang sejarah manusia. Menurut Hart,
        Muhammad adalah satu-satunya orang yang berhasil meraih
        keberhasilan luar biasa baik dalam hal spiritual maupun kemasyarakatan.
        Hart mencatat bahwa Muhammad mampu mengelola bangsa yang awalnya egoistis,
        barbar, terbelakang, dan terpecah-belah oleh sentimen kesukuan menjadi
        bangsa yang maju dalam bidang ekonomi, kebudayaan, dan kemiliteran
        bahkan sanggup mengalahkan pasukan Romawi yang saat itu merupakan
        kekuatan militer terdepan di dunia.
        </p>
<strong>Tag aside tentang penulis:</strong>
        <aside class="author">
        Artikel ini ditulis oleh kontributor Wikipedia, dengan url: http://id.wikipedia.org/wiki/Muhammad

</aside>
</article>
        </div>

 
        <div id="kanan">
        <strong>Tag aside informasi terkait:</strong>
        <aside class="ref">
        Gelar: Khatamul Anbiya, al-Mahi, Nabi ar-Rahmah, Rasulullah/Rasul (utusan),
        An-Nabi, Syahidan (Saksi), Mubasysyiran (Pemberi kabar gembira),
        Nazhir (Pemberi peringatan), Da'i (Penyeru kepada Allah)[1] Al-Mustafa,
        Al-Amin, Shalallahu alaihi wa Salam.
        </aside>
        </div>


</div>
</body>
</html>


Tampilan:


^Baca juga: Tag <audio> HTML5 untuk memasukkan file audio ke halaman web.

Referensi tulisan:
  1. <aside>; ditulis oleh: Tim MDN (Mozilla Developer Network, developer.mozilla.org, diakses 27 September 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
  2. Muhammad, ditulis oleh Kontributor Wikipedia, id.wikipedia.org, diakses 27 September 2014.

Wednesday, September 24, 2014

Tag map dan Tag area HTML

Tag <map> dan tag <area> merupakan 2 tag yang saling berhubungan, digunakan untuk pemetaan dalam gambar dan bisa dituliskan url di dalamnya. Tag map memiliki atribut name, nama map. Nama map tidak boleh pakai spasi. Tag area memiliki atribut yang umum digunakan; di antaranya; href (url target), shape (bentuk map), target (dibuka dalam tab sama atau tab baru di browser, _blank, _self), dan coords (koordinat).

Untuk titik koordinat (coords) nilainya bergantung pada atribut shape (bentuk map) dan berhubungan dengan pelajaran matematika, jika shape bernilai circle, maka nilai koordinatnya x, y, dan r. X dan y nilai pusat lingkaran sedangkan r untuk nilai jari-jari. Shape polygon nilai koordinatnya x dan y, untuk setiap titik di poligon: x1, y1, x2, y2, x3, y3, dan sebagainya. Untuk shape rect (rectangle) penulis tidak tahu bagaimana cara memberi nilainya, soalnya tidak pintar matematika, tetapi intinya mengikut pelajaran matematika.

Penentuan kapan harus menggunakan circle, polygon atau rect tergantung dari bentuk gambar, jika lingkaran gunakan circle, jika poligon gunakan polygon, jika persegi panjang gunakan rect.

Langkah pengunaan:
- Siapkan gambar, ukuran kecil saja misalnya 149x97px, beri nama misalnya imgmap.jpg. Jika ingin sama dengan gambar yang digunakan penulis, download saja gambar ini, (klik kanan > Save images as):
 

- Tampilkan gambar dengan tag <img>
- Tulis tag map
- Sertakan atribut usemap pada tag img
- Tentukan shape, koordinat dan link tujuan pada gambar
- Selesai.

Contoh: map.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Map</title>
        </head>
    <body>
    <!-- perhatikan, nama map sama dengan nilai
    atribut usemap.
    -->
    <map name="mapku">
    <img src="imgmap.jpg" usemap="#mapku" />
    <area shape="circle" coords="80,30,20" href="http://tipspengetahuan.com" target="_self" />
    </map>

    </body>
</html>


Jika diarahkan kursor ke gambar tadi dan pas dengan koordinat maka muncul tanda link pada kursor dan jika diklik akan mengarah ke atribut href dalam contoh ini ke website tipspengetahuan.com.


Catatan: Pemberian nilai lingkaran untuk x y dan r di atas mungkin tidak valid. Penulis hanya berusaha memberikan gambaran saja. Yang dipelajari di sini ilmu tentang map (html) bukan belajar matematika. Contoh penulisan tag map dan area bisa dilihat di sini (contoh dari situs lain).

^Baca juga: Tag <aside> HTML5.

Referensi tulisan:
  1. <map>; ditulis oleh: Tim MDN (Mozilla Developer Network), developer.mozilla.org, diakses 24 September 2014.
  2. <area>; ditulis oleh: Tim MDN (Mozilla Developer Network), developer.mozilla.org, diakses 24 September 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Sunday, September 21, 2014

Tag address HTML5

Tag <address> HTML5 merupakan tag yang digunakan untuk menuliskan kontak halaman web. Di dalam tag address webmaster bisa menginformasikan kontak yang bisa dihubungi seperti alamat situs, email, nomor telpon, jalan dan alamat lainnya.

Teks yang ada di dalam tag address akan otomatis ditampilkan dengan style miring. Penulisannya dimulai tag pembuka (<address>) dan tag penutup (</address>). Normalnya tag address diletakkan paling bawah sebelum penutup tag body. Tag address didukung browser Chrome, Firefox, Internet Explorer, Opera, Safari dan mungkin juga browser lain.

Contoh: address.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag adress HTML5</title>
        <body>

<div id="header"><h2>Ini header</h2>bla..bla..bla..</div>
<div id="content"><h2>Ini content</h2>bla..bla..bla...
<br />
.......
<br />
.......
</div>
<br />
<br />
<br />
 <address>
        <b>Hubungi kami</b> <br />
        Hi, jika Anda ingin menghubungi mengetahui siapa pemilik blog ini, silahkan klik <a href="http://www.tipspengetahuuan.com/about.html">www.tipspengetahuan.com</a>.<br>
        Jika Anda ingin chat langsung, silakan via <a href="http://facebook.com/erwinsaleh.siregar">Facebook</a>.<br>
        Anda juga bisa menghungi:<br>
        Alamat:.....<br>
        No hp:....<br>
        Twitter: @tipstahu<br>
        Google+:....<br>
        </address>
    </body>
</html>


Tampilan di browser Firefox:


^Baca juga: Tag <map> dan <area> HTML untuk pemetaan gambar.

Referensi tulisan:
  1. <address>; ditulis oleh: Tim MDN (Mozilla Developer Network), developer.mozilla.org, diakses 22 September 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Saturday, September 20, 2014

Tag abbr HTML

Abbr singkatan dari Abbreviation dalam bahasa Indonesi menyingkat. Setelah disingkat kemudian diberikan penjelasan melalui tooltip - ketika kursor diarahkan kepada kata yang disingkat. Penulisannya; <abbr atribut>kata</abbr>. Contoh ini memakai atribut title.

abbr.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag abbr</title>
        </head>
    <body>
    Nama saya Erwin Sholeh <abbr title="Siregar">SRG</abbr>. Ibu saya marganya <abbr title="Harahap">HRP</abbr>
    </body>
    </html>


Tampilan di browser Firefox:


Firefox memberikan style dengan tanda titik-titik (....), namun jika dilihat di Internet Explorer 11, maka tampilannya beda, hanya menampilkan seperti teks biasa:


Untuk mengatasinya, tambahkan css abbr. Caranya ubah jenis font atau warna background:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag abbr</title>
            <style type="text/css">
            abbr{background-color:#FAFAFA;
            font-family:Georgia,Verdana;
            font-size:14px;}
            </style>

        </head>
    <body>
    Nama saya Erwin Sholeh <abbr title="Siregar">SRG</abbr>. Ibu saya marganya <abbr title="Harahap">HRP</abbr>
    </body>
    </html>


Hasilnya di IE:


Penambahan warna ini diharapkan membuat yang melihatnya menjadi penasaran dan akan mengarahkan kursor di atasnya.

^Baca juga: Tag <address> HTML5.

Referensi tulisan:
  1. <abbr>; ditulis oleh: Tim MDN (Mozilla Developer Network), developer.mozilla.org, diakses 20 September 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Wednesday, September 17, 2014

Tag yang Sering Digunakan Untuk Edit Teks

Ketika para penulis seperti blogger hendak mempublish artikel, terlebih dahulu memeriksa ejaan, tanda baca, tebal-miring-garis bawah, menambahkan daftar dan edit lainnya agar bisa dibaca dan dipahami jelas pengunjung web.

Ketika Anda tidak mendapatkan editor, seperti ketika menulis artikel di blog, Anda dapat secara manual menuliskan tag untuk mengedit teks, misalnya tag <b> untuk menebalkan huruf, tag <i> untuk membuat tulisan miring, dan tag <u> untuk tulisan bergaris bawah.

Berikut ulasan tag yang mungkin sering digunakan ketika mengedit teks:
- Tag <b>: Contoh: Apel, Mangga, Anggur. Sintax: <b>Apel</b>, <b>Mangga</b>, <b>Anggur</b> 

- Tag <i>: Contoh: Merah, Kuning, Hijau. Sintax: <i>Merah</i>, <i>Kuning</i>, <i>Hijau</i>.

- Tag <u>: Contoh: Dilarang membuka Facebook ketika sedang bekerja di kantor. Sintax: <u>Dilarang membuka Facebook ketika sedang bekerja di kantor.</u> 

- Tag <strike>: Contoh: Harga: Rp 100.00 > Rp 60.000. Sintax: Harga: <strike>Rp 100.00</strike> &gt; Rp 60.000.

- Tag <sup>: Contoh: Lebar tanah 500m2. Sintax: Lebar tanah 500m<sup>2</sup>.

- Tag <sub>: Contoh: Rumus kimia oksigen: O2. Sintax: Rumus kimia oksigen: O<sub>2</sub>.

- Tag <blockquote>: Contoh:
Cara terbaik meraih impian adalah memulainya dengan tindakan.
Sintax: <blockquote>
Cara terbaik meraih impian adalah memulainya dengan tindakan.</blockquote>


- Memberikan link pada teks, bisa dipelajari di sini.
- Membuat daftar, bisa dipelajari di sini.
- Memberikan tag heading, bisa dipelajari di sini.
- Membuat tabel, pelajari di sini.

^Baca juga: Tag <abbr> HTML.

Sunday, September 14, 2014

Form pada HTML

Setelah Anda memahami input type pada artikel sebelumnya, selanjutnya belajar memahami form pada html. Form digunakan untuk mengontrol elemen-elemen form yang berisi informasi dan di kirim ke web server. Contoh sederhananya, ketika Anda login, Anda mengisikan username dan password. Ketika Anda klik Login (Masuk), username dan password dikirimkan ke web server melalui bantuan kode PHP. Data login Anda tadi ditampung dan dikirim melalui form.

Tag form memiliki beberapa atribut yaitu;
- method, yaitu cara informasi dikirimkan ke server. Terdiri dari dua; post dan get. Metode post; data yang dikirimkan mengikut (tergabung) dalam form. Metode get; data yang dikirimkan dipisahkan dengan tanda ? dan & serta data yang terkirim ditampilkan di address bar browser.

Lihat perbedaannya: Misalnya ada form yang meminta 2 data, username dan password. Untuk memproses kedua data ini dibutuhkan file php bernama check.php. Jika memakai metode post, maka url dibrowser menjadi namawebsite.com/check.php. Dan bila memakai metode get, maka url di browser menjadi namawebsite.com/check.php?username=nama&pass=password.

Sehingga, metode post cocok digunakan untuk data-data yang bersifat rahasia seperti username dan password, data yang dikirimkan tidak ditampilkan di address bar browser. Sedangkan untuk proses data yang tidak rahasia, gunakan metode get. Misalnya untuk mengedit artikel.

- action, yaitu url (alamat) file php yang akan menjadi eksekutor pemrosesan data-data yang dikirimkan. Dalam contoh di atas, yaitu check.php

- enctype, mengindikasikan jenis data yang dikirimkan ke web server. Terdiri tiga macam; application/x-www-form-urlencoded, ini merupakan nilai default dari enctype form (standar). Kedua, multipart/form-data, ini digunakan jika form diizinkan untuk mengupload file (seperti dokumen dan gambar).

- target, yaitu bagaimana perilaku browser ketika form melakukan pemrosesan. Apakah di muat dalam tab baru pada browser atau masih di halaman yang sama. Nilai defaultnya _self (di halaman yang sama). Jika ingin dimuat dalam tab baru, gunakan _blank.

Tag form diawali dengan <form> dan diakhiri dengan </form>.  Berikut contoh penulisan form dalam file html: method.html dengan file aksinya proses.php. Untuk memastikan proses.php bekerja, Anda butuh web server seperti Wamp, Xamp, atau AppServ yang terinstal di laptop Anda dan letakkan file method.html dan proses.php di folder WWW.

method.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Belajar form html</title>
            <!-- Css ini hanya tambahan, hanya untuk mempercantik tampilan
            elemen form, tidak menjadi syarat.
            -->
            <style type="text/css">
            body{background-color:#F5F5F5;font-family:georgia, tahoma;}
            input{border:1px solid #BFBFBF;padding:6px;margin-bottom:5px;}
            input.sz{width:300px;}
            input:focus{border:1px solid #000;}
            .bt{padding:6px;font-weight:bold;-moz-border-radius:2px;
            -webkit-border-radius:2px;border-radius:2px;border:1px solid #2D6066;
            width:100px;background-color:#03B9D0;color:#fff;
            }
            .bt:hover{
            background-color :#02AABF;-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
            -moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
            box-shadow: 0 0 1px rgba(0,0,0, .75);
            border:1px solid #2E3131;
            }
            textarea{width:500px;height:300px;font-family:Tahoma, Verdana; font-size:12px;}
            </style>
        </head>
    <body>
 <form action="proses.php" method="post" enctype="
application/x-www-form-urlencoded" target="_self">
<table>
<tr>
    <td>Username</td>
    <td>
    <input type="text" maxlength="40" name="nama" class="sz" />
    </td>
</tr>
<tr>
    <td>Password</td>
    <td>
    <input type="password" maxlength="20" class="sz" name="mypass" />
    </td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>
    <input type="submit" value="Login" class="bt"/>
    </td>
</tr>
</table>
   </form>
   </body>
</html>


proses.php

<?php
$username=$_POST["nama"];
$pass=$_POST["mypass"];
echo "Ini nama Anda: $username<br />
    Ini password Anda: $pass
    ";
?>


Galeri:

 Simpan file method.html dan proses.php di folder www.

Akses method.html dari localhost (nama host ketika menginstal web server).

Setelak di klik tombol Login, akses proses.php dan tampilkan hasilnya.

Coba ganti dengan metode get.
Hasilnya, data login (username dan password) 'dibawa' lewat url di address bar.

Thursday, September 11, 2014

Input Type HTML

Sebelum belajar <form> di html, perlu mengenal cara membuat komponen-komponen yang ada pada form, seperti kotak isian (text box), submit, button, checkbox, radio, password, file, reset dan lainnya. Ini adalah beberapa komponen yang diletakkan dalam suatu form. Jadi, sebelum membuat form, tahap awal yaitu mempalajari bagaimana cara membuat komponen itu, yang disebut dengan input type pada html.

- Text
Type text digunakan untuk membentuk kotak isian.

- Submit
Type submit digunakan untuk membuat tombol submit pada form (tombol ekesekusi) yang ditargetkan pada action.

-Button
Type button digunakan untuk membuat tombol tetapi defaultnya tidak ada aksi, kecuali jika memang diberikan seperti melalui javascript dengan parameter id. Berbede dengan submit yang khusus untuk eksekusi.

- Checkbox
Type checkbox digunakan untuk memilih pilihan dengan memberi tanda centang. Pilihan boleh lebih dari satu. Jika ingin membuat pilihan terpilih secara default, beri nilai checked.

-Radio
Type radio mirip dengan checkbox dar segi fungsi, tetapi berbeda dalam tampilan, dan hanya satu pilihan yang dapat dipilih dalam satu waktu.

- Password
Type password digunakan untuk membuat teks isian dalam bentuk password (bulat-bulat hitam), ketika teks dimasukkan ke dalamnya.

- File
Type file digunakan untuk upload file dokumen (gambar, file, video).

- Reset
Type reset digunakan untuk membatalkan (mereset) form, mengembalikan keadaan form seperti semula.

-Hidden
Type hidden digunakan untuk membuat suatu elemen yang tidak tampak tetapi ada, nilainya akan dikirimkan ke server (via php).

Elemen penting lain form adalah <textarea>, meskipun bukan tergolong ke dalam input type - tetapi berdiri sendiri. Textarea digunakan untuk membuat teks isian, tempat menulis isi artikel jika dijelaskan lebih sederhana, sedangkan text isian biasa - untuk judul artikel. Lebih gamblangnya seperti itu.

Elemen kedua adalah <select> untuk membuat daftar pilihan secara vertikal. Hanya satu pilihan yang dapat dipilih dalam satu waktu.

Dari penjabaran di atas, berikut penulisannya dalam kode html. input.html:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Input type html</title>
            <!-- Css ini hanya tambahan, hanya untuk mempercantik tampilan
            elemen form, tidak menjadi syarat.
            -->
            <style type="text/css">
            body{background-color:#F5F5F5;}
            input{border:1px solid #BFBFBF;padding:6px;margin-bottom:5px;}
            input.sz{width:300px;}
            input:focus{border:1px solid #000;}
            .bt{padding:6px;font-weight:bold;-moz-border-radius:2px;
            -webkit-border-radius:2px;border-radius:2px;border:1px solid #2D6066;
            width:100px;background-color:#03B9D0;color:#fff;
            }
            .bt:hover{
            background-color :#02AABF;-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
            -moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
            box-shadow: 0 0 1px rgba(0,0,0, .75);
            border:1px solid #2E3131;
            }
            textarea{width:500px;height:300px;font-family:Tahoma, Verdana; font-size:12px;}
            </style>
        </head>
    <body>
    <form>
    <!-- text-->
    <input type="text" maxlength="40" name="nama" class="sz" />
    <br />
    <!-- submit-->
    <input type="submit" value="Simpan" class="bt"/>
    <br />
    <!-- button-->
    <input type="button" value="Go" class="bt"/>
    <br />
    <!-- checkbox-->
    <input type="checkbox" name="pisang" value="Pisang" checked> Pisang
    <input type="checkbox" name="apel" value="Apel"> Apel
    <input type="checkbox" name="melon" value="Melon"> Melon
    <input type="checkbox" name="Pir" value="Melon" checked> Pir

    <br />
    <!-- radio-->
    <input type="radio" name="radio1" value="Pisang" checked> Pisang
    <input type="radio" name="radio1" value="Apel"> Apel
    <input type="radio" name="radio1" value="Melon"> Melon
    <input type="radio" name="radio1" value="Melon"> Pir

    <br />
    <!-- password-->
    <input type="password" maxlength="20" class="sz" name="mypass" />
    <br />
    <!-- file-->
    <input type="file" name="fileU" class="sz" />
    <br />
    <!-- file-->
    <input type="reset" value="Batalkan" class="bt"/>
    <br />
    <!-- hidden-->
    <input type="hidden" value="123dh3298ag3" name="idunik"/>
    <br />
    <!-- texarea-->
    <textarea name="txtarea"></textarea>
    <br />
    <!-- select-->
    <select name="pilih">
    <option value="arsenal">Arsenal</option>
    <option value="chelsea">Chelsea</option>
    <option value="mu">Manchester United</option>
    <option value="lvpool">Liverpool</option>

    <br />
    <br />
    </select>
    </form>
    </body>
</html>


Keterangan: Penambahan atribut class digunakan untuk memanggil css, bukan bagian dari input type.

Tampilan input type.

^Baca juga: Membuat form dengan tag <form>.

Referensi tulisan:
  1. <input>; ditulis oleh: Tim MDN (Mozilla Developer Network), developer.mozilla.org, diakses 11 September 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Monday, September 8, 2014

IFrame pada HTML

IFrame (Inline Frame) merupakan teknik semat dalam bingkai (frame). Dengan iframe, Anda tidak harus mengetikkan url (link) pada address bar browser, tetapi cukup menuliskannya pada atribut src pada tag iframe. Tag iframe menampilkan objek seperti situs, video, gambar di dalam sebuah halaman web, yang disematkan di antara tag <body> dan tag </body>.

Tipspengetahuan.com ditampilkan dalam iframe.
Ada beberapa atribut tag <iframe> yang umum digunakan:
- src yaitu alamat (url) yang ditampilkan dalam iframe
- width digunakan untuk menentukan lebar iframe (dalam px/piksel)
- height digunakan untuk menentukan tinggi iframe (dalam px/piksel)
- frameborder mengatur border iframe (dalam angka di mulai 0/tidak ada border)
 Catatan: urutan penulisan atribut tidak ada urutan, boleh dimulai dari mana saja; misalnya dari height dulu kemudian src.

Contohnya seperti berikut: iframe.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Testing iframe</title>
        </head>
    <body>
        <h3>Iframe tipspengetahuan.com</h3>
        <iframe height="300px"
        src="http://tipspengetahuan.com"
        frameborder="0"
        width="600px"></iframe>

    </body>
</html>
 

Iframe video (embedded video) dari YouTube
Video yang ada di Youtube bisa Anda buat dalam iframe dan ditonton dari halaman web Anda. Dari menu Share pada video yang sedang ditonton, pilih Embed dan copy srcript yang ada di kotak teks:

Iframe embed video dari YouTube.

Selanjutnya Anda tuliskan dalam file html, iframeytube.html:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Testing iframe dari Youtube</title>
        </head>
    <body>
        <h3>Contoh Bacaan Ijab Kabul Pernikahan </h3>
        <iframe width="420px" height="315px"
        src="//www.youtube.com/embed/VXU5raThoZQ"
        frameborder="0" allowfullscreen></iframe>

    </body>
</html>

Iframe video YouTube.

Iframe gambar dari Photobucket
File gambar juga bisa Anda tampilkan dalam iframe dengan menuliskan alamat gambar pada atribut src. Contohnya gambariframe.html:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Testing iframe dari Photobucket</title>
        </head>
    <body>
        <h3>Kucing imut lagi tidur</h3>
        <iframe width="600px" height="500px"
        src="http://i794.photobucket.com/albums/yy228/jade95_2010/CUTENESS/206110120_j95.jpg"
        frameborder="0" allowfullscreen></iframe>

    </body>
</html>

Iframe file gambar dari Photobucket.

Catatan: Semua contoh-contoh di atas akan bekerja jika terkoneksi dengan internet.

^Baca juga: Belajar menggunakan input type HTMl untuk membuat beberapa kontrol.

Thursday, September 4, 2014

Layout pada HTML

Setiap website mempunyai layout (tata letak). Ada beberapa bagian layout, mulai dari yang paling sederhana sampai pada tingkat paling kompleks. Setidaknya ada tiga bagian layout yang harus ada, pertama bagian header, content, dan footer. Alangkah lebih baik lagi ditambah dengan menu navigasi, baik posisinya di kiri atau kanan.

Layout header berisi informasi tentang logo dan menu utama yang mencakup halaman-halaman inti web. Content berisi informasi baik berupa teks, foto, video yang akan disajikan kepada pengunjung. Footer  berisi informasi pendukung website, seperti menu tentang kami, privacy policy, disclaimer, contact. Sedangkan menu navigasi kiri atau kanan merupakan menu pembantu; baik untuk artikel terkait dari artikel yang sedang dibaca, topik terkait, terbaru, terpopuler, dan tag populer.

 Contoh layout header

Contoh 1; logo dan menu utama (detik.com)

Contoh 2; logo dan menu utama (okezone.com)

Contoh layout content
Contoh layout 1; layout konten republika.co.id

 Contoh layout 2; layout konten okezone.com

Contoh menu navigasi
Contoh menu navigasi (kiri) untuk berita terkait (detik.com).


Contoh menu navigasi (kiri) untuk berita terkini dan terpopuler (republika.co.id).

 Navigasi kanan dengan di isi tag terkini (merdeka.com).

Contoh layout footer
Menu footer merdeka.com
Menu footer liputan6.com
Menu footer detik.com
Contoh-contoh layout di atas hanya untuk referensi atau gambaran saja, Anda tidak disuruh membuat persis sama. Apalagi menconteknya secara penuh, tentu menimbulkan citra buruk, kurang kreativitas. Tidak ada aturan wajib dalam membuat layout, Anda boleh berkreasi sebagus mungkin, asalkan desain tetap konsisten, mudah di navigasi dan tidak membingungkan pengunjung.

Perhatikan dalam membuat warna link, warna link harus berbeda dengan warna tulisan artikel, agar tidak membingungkan pengunjung dalam membedakan mana link mana tulisan biasa. Ukuran logo tidak terlalu besar dan tidak pula terlalu kecil, size-nya seminimal mungkin. Jangan mencamtumkan link (url) yang belum terhubung (belum ada halamannya), karena membuat kecewa pengunjung. Untuk layout konten gunakan warna latar putih, sedangkan menu navigasi, header, footer boleh warna lain, asalkan huruf (teks) bisa dibaca dengan jelas.
Gunakan huruf (font) standar; yang muda dibaca, seperti Tahoma, Verdana, Times New Roman. Ukuran huruf jangan terlalu kecil dan tidak pula terlalu besar, normalnya 14px.

^Baca juga: Menggunakan tag <iframe> untuk video, web dan gambar.

Tuesday, September 2, 2014

Tag UL dan OL pada HTML

Untuk membuat daftar pada html, maka digunakan tag UL atau tag OL. UL artinya daftar tak berurut, sedangkan OL daftar berurutan. Tidak berurut berarti icon setiap isi daftar hanya ditandai icon disc (default), circle dan square. Sedangkan berurutan isi daftar diurutkan dengan penomoran angka, huruf abjad dan penomoran huruf roman.

Tag UL dan OL menandakan permulaan pembuatan daftar, sedangkan tag LI untuk mengisi item-item pada daftar. Tag ul (<ul>) ditutup dengan penutup tag ul juga (</ul>) dan tag ol (<ol>) juga ditutup dengan tag ol (</ol>).

Contoh daftar tak berurutan:
ul.html
<!DOCTYPE HTML>
    <html>
        <head>
            <title>Membuat daftar dengan UL</title>
        </head>
    <body>
    <ul style="list-style-type:disc">
        <li>Apel</li>
        <li>Anggur</li>
        <li>Strawberry</li>
    </ul>
    <ul style="list-style-type:circle">
        <li>Apel</li>
        <li>Anggur</li>
        <li>Strawberry</li>
    </ul>
    <ul style="list-style-type:square">
        <li>Apel</li>
        <li>Anggur</li>
        <li>Strawberry</li>
    </ul>
    </body>
</html>


Contoh penggunaan tag UL.

Contoh daftar berurutan
Untuk daftar berurutan terdiri dari angka, huruf abjad dan huruf roman, yang dituliskan dalam bentuk type. Type 1 untuk penomoran angka (default), Type A; penomoran dengan abjad dengan huruf kapital, Type a; penomoran dengan abjad dengan huruf kecil, Type I untuk penomoran huruf roman kapital dan Type i untuk penomoran huruf roman dengan huruf kecil.

Contohnya: ol.html
<!DOCTYPE HTML>
    <html>
        <head>
            <title>Membuat daftar dengan OL</title>
        </head>
    <body>
    <ol type="1">
        <li>Apel</li>
        <li>Anggur</li>
        <li>Strawberry</li>
    </ol>
    <ol type="A">
        <li>Apel</li>
        <li>Anggur</li>
        <li>Strawberry</li>
    </ol>
    <ol type="a">
        <li>Apel</li>
        <li>Anggur</li>
        <li>Strawberry</li>
    </ol>
    <ol type="I">
        <li>Apel</li>
        <li>Anggur</li>
        <li>Strawberry</li>
    </ol>
    <ol type="i">
        <li>Apel</li>
        <li>Anggur</li>
        <li>Strawberry</li>
    </ol>
    </body>
</html>


Penggunaan tag OL.

Kombinasi UL dan OL
Tag UL dan OL juga bisa dikombinasikan, Anda bisa bereksperimen semaunya asalkan tetap tidak lupa menutup tag-tag yang telah dibuka di awal, misalnya seperti contoh dibawah (ulol.html):

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Membuat daftar kombinasi UL dan OL</title>
        </head>
    <body>
    <ol style="list-style-type:square">
        <li>Apel
            <ol type="1">
                <li>Apel Merah</li>
                <li>Apel putih</li>
            </ol>
        </li>
        <li>Anggur
            <ol type="a">
                <li>Anggur merah</li>
                <li>Anggur hijau</li>
            </ol>
        </li>
        <li>Strawberry
            <ol type="i">
                <li>Strawberry matang</li>
                <li>Strawberry muda</li>
            </ol>
        </li>
    </ol>
    </body>
</html>


Tag UL dan OL dikombinasikan.