Wednesday, December 31, 2014

Tag sup HTML

Tag <sup> atau Superscript digunakan untuk menaikkan karakter lebih tinggi dari karakter di sampingnya. Contohnya menulis kesetaraan nilai energi dan massa oleh Einstein E=mc2. Angka 2 perlu dinaikkan lebih tinggi dari huruf c atau m, untuk itulah dibutuhkan tag sup.

Maka penulisannya dalam bentuk file html; sup.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag sup html</title>
        </head>
    <body>
        <p>Albert Einstein menemukan rumus fenonemal: E=mc<sup>2</sup></p>
    </body>
</html>

Output:
Tampilan tag sup di Firefox.
sup versi css
Efek tag sub juga bisa dibuat dengan css menggukan properti vertical-align: super. vertical-align artinya rata teks pada posisi vertikal dan super adalah nilainya. Super diartikan berada (lebih) di atas. Skrip; supcss.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag sup html</title>
            <style type="text/css">
                span.teksup{
                vertical-align:super;
                }
            </style>
        </head>
    <body>
        <p>Albert Einstein menemukan rumus fenonemal: E=mc<span class="teksup">2</span></p>
    </body>
</html>

Output:
Output tag sup versi css.
Referensi tulisan:
  1. Playit Vertical Align CSS; ditulis oleh: W3Schools.com, w3schools.com, diakses 01 Januari 2015.
  2. E=mc²; ditulis oleh: Kontributor Wikipedia, id.wikipedia.org, diakses 01 Januari 2015.
Posted by at No comments:
Labels:

Sunday, December 28, 2014

Tag sub HTML

Tag <sub> atau Subscript digunakan untuk menampilkan huruf/angka lebih rendah dari karakter sebelum atau sesudahnya. Contohnya saat penulisan rumus kimia: H2O, di mana angka 2 ditampilkan turun ke bawah (lebih kecil).

Penulisan sintax: <sub>huruf/angka</sub>. Contoh; sub.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag sub html</title>
        </head>
    <body>
        <p>Rumus kimia air adalah: H<sub>2</sub>O</p>
    </body>
</html>

Output:
Output tag sub di Firefox.
Versi css
Untuk hasil yang hampir sama Anda juga bisa membuatnya dalam versi css yaitu menggunakan style vertical-align: sub seperti berikut: subcss.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag sub html</title>
            <style type="text/css">
            span.teksub{
                vertical-align:sub;
            }
            </style>
        </head>
    <body>
        <p>Rumus kimia air adalah: H<span class="teksub">2</span>O</p>
    </body>
</html>

Output:
Output dengan style vertical align di Firefox.
Referensi tulisan:
  1. <sub>; ditulis oleh: Kontributor MDN, developer.mozill.org, diakses 29 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels:

Thursday, December 25, 2014

Tag strong HTML

Tag <strong> digunakan untuk menandai teks yang dianggap penting dan biasanya ditampilkan dalam huruf tebal.

Contoh: strong.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag strong html</title>
        </head>
    <body>
        <p>Yang terpenting bukanlah engaku pintar atau tidak,
        tetapi yang penting adalah engkau <strong>berusaha dan tidak menyerah</strong>.
        Karena banyak orang yang pintar saja tetapi tak cukup sukses.
    </body>
</html>

Output:
Output tag strong di Firefox.
Jika Anda berpikir, tag <strong> dan <b> sama-sama menghasilkan efek huruf tebal, lalu mengapa ada 2 (tag strong dan b)? Menurut penulis kesimpulannya adalah tag <strong> digunakan untuk kata-kata yang sifatnya penting untuk diperhatikan dalam sebuah kalimat atau paragraf.

Namun tag <b> tidak harus seperti itu, Anda bisa saja memberikan tag <b> pada nama produk dalam sebuah riview atau pada kata kunci pada halaman abstrak atau teks lain yang mana pembaca tidak harus memfokuskan perhatian terhadap teks itu.

Referensi tulisan:
  1. <strong>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 25 Desember 2014.
  2. HTML/Elements/b; ditulis oleh: Kontributor W3, w3.org, diakses 25 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Sunday, December 21, 2014

Tag span HTML

Tag <span> merupakan wadah untuk menampung teks yang tidak memberikan efek apa-apa, misalnya tag <b> yang memberikan efek huruf tebal, sedangkan <span> hanya menampilkan teks seperti aslinya. Teks yang ditampilkan dalam bentuk inline (memanjang ke samping), tidak dalam bentuk blok-blok seperti halnya jika menggunakan tag <div> atau tag <p>.

Contoh: span.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag span html</title>
        </head>
    <body>
    <span>Teks ini dalam tag span. Ditampilkan seperti teks biasa.</span>
    <span>Lagi ini teks dalam span</span>
    <br />
    <i>Lihat bedanya dengan tag div</i>
    <div>Teks pertama dalam tag div</div>
    <div>Teks lainnya dalam tag div juga</div>
    </body>
</html>

Output:

Output tag span.
Diaplikasikan dalam Css.
Sama seperti tag lain pada umumnya, tag <span> juga diaplikasikan dengan css, misalnya menambahkan warna latar menjadi kuning:

span2.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag span html</title>
            <style type="text/css">
            span{background-color: yellow;
            }
            </style>
        </head>
    <body>
    <span>Teks ini dalam tag span. Ditampilkan seperti teks biasa.</span>
    <span>Lagi ini teks dalam span</span>
    <br />
    <i>Lihat bedanya dengan tag div</i>
    <div>Teks pertama dalam tag div</div>
    <div>Teks lainnya dalam tag div juga</div>
    </body>
</html>

Output:

Penambahan warna latar.
Referensi tulisan:
  1. <span>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 22 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Thursday, December 18, 2014

Tag small HTML

Tag <small> digunakan untuk membuat ukuran font lebih kecil dari ukuran default yang ditampilkan browser. Untuk HTML5, tag <small> digunakan untuk menulis catatan singkat, keterangan hak cipta dan sejenisnya yang tidak terlalu perlu ditonjolkan dari teks lainnya.

Contoh:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag small html</title>
        </head>
    <body>
    <p>Ini adalah teks ukuran default browser IE.<br><br>
    <small>Sedangkan teks ini dengan tag small.</small></p>
    </body>
</html>

Output:
Tampilan tag small di IE (Internet Explorer).
Referensi tulisan:
  1. ; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 19 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Monday, December 15, 2014

Tag script HTML

Tag <script> digunakan untuk menyematkan skrip pada halaman HTML atau XHTML. Skrip yang sering disematkan adalah javascript, bahasa skrip yang membuat halaman web menjadi interaktif.

Beberapa atribut tag <script>:

type : tipe sript yang disematkan, contohnya adalah: text/javascript, text/ecmascript, application/javascript, and application/ecmascript.

src : sumber atau letak skrip (eksternal). Jika berada di dalam folder, tuliskan folder dan nama file skripnya, jika skrip berupa url (link), tulis alamat lengkap url-nya.

Contoh:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag script html</title>
            <script type="text/javasript" src="file.js" />
        </head>
    <body>
    <p>Bagian body</p>
    </body>
</html>

Note: file.js hanya contoh nama file skrip js, bukan nama sebenarnya.

Jika file.js ada di dalam folder dengan nama misalnya; javasc. Maka penulisannya berubah menjadi:  <script type="text/javasript" src="javasc/file.js" />

Jika file js berada di internet (dalam url) maka tulis lengkap nama url dan nama file.js. Contohnya file.js ada di situs web.com dan di foler file: http://webku.com/file/file.js maka penulisannya adalah; <script type="text/javasript" src="http://webku.com/file/file.js" />

Referensi tulisan:
  1. <script>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 16 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Thursday, December 11, 2014

Tag samp HTML

Tag <samp> HTML digunakan untuk menampilkan contoh output program komputer. Hal ini biasanya ditampilkan dalam jenis font default browser (dalam hal ini font Lucida Console).

Contoh:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag samp html</title>
        </head>
    <body>
    <p>Ini teks normal (default font) di browser IE</p>
    <p><samp>Ini tampilan teks dengan tag samp</samp></p>
    </body>
</html>

Output:
Tampilan tag samp di IE.
Referensi tulisan:
  1. <samp>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 12 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Monday, December 8, 2014

Tag q HTML

Tag <q> digunakan menandai teks sebagai kutipan singkat. Kutipan singkat artinya kutipan tidak berbentuk paragraf tetapi beberapa kata saja. Untuk kutipan panjang gunakan tag <blockquote>.

Atribut tag <q>:

cite: Link (url) artikel yang dijadikan sebagai kutipan.

Contoh:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag q html</title>
        </head>
    <body>
    Facebook merupakan media sosial nomor satu di dunia.
    <q cite="http://id.wikipedia.org/wiki/Facebook,_Inc.">Facebook melakukan penawaran umum perdana pada tanggal 1 Februari 2012.</q>
    </body>
</html>

Output:
Output tag q di Firefox.
Referensi tulisan:
  1. <q>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 09 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels:

Friday, December 5, 2014

Tag progress HTML

Tag <progress> digunakan untuk menampilkan suatu proses task (tugas) yang sedang berlangsung. Contoh sederhananya, bayangkan ketika Anda mengcopy suatu file ke flashdisk, saat proses copy berlangsung, itu ada progress bar (warna hijau) yang bergerak ke arah kanan menunjukkan tahap proses pengopian.

Proses copy file dengan progress bar warna hijau.
Beberapa atribut tag <progress>:

max : nilai maksimal yang menandakan proses selesai.
value : nilai proses yang sedang berlangsung (sedang dikerjakan).

Note: Progress bar HTML hanya bersifat statis, progress bar tidak bergerak sesuai tahap proses tugas yang dikerjakan, jika ingin membuatnya bergerak (dinamis) dengan tambahan javascript, silahkan pelajari di sini.

Contoh tag <progress> HTML (statik): progress.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag progress html</title>
        </head>
    <body>
        Contoh tag progress:<br />
        <progress value="90" max="150">90 %</progress>
    </body>
</html>

Output:
Tampilan tag <progress> di Firefox.
Referensi tulisan:
  1. <progress>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 06 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels:

Thursday, December 4, 2014

Tag pre HTML

Tag <pre> digunakan untuk menampilkan teks apa adanya, artinya teks yang diapitnya yang diketik di editor (contoh Notepad++) ditampilkan persis sama di browser. Spasi kosong dan baris baru pun dianggap sebagai pemformatan.
Contoh: pre.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag pre</title>
        </head>
    <body>
        <pre>
            Teks ini   akan ditampilkan di browser
            seperti ini juga.
               Oke!
        </pre>
    </body>
</html>

Output:
Tampilan tag pre di Firefox.
Tag pre juga sangat membantu ketika menuliskan kode di browser; misalnya kode css. Seperti diketahui, agar kode css mudah dibaca maka baris-baris kode ditulis menjorok ke dalam untuk menandakan satu blok.
Contoh: pre2.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag pre</title>
        </head>
    <body>
        <pre>
            p{
                font-size:12px;
            }
           
            body{
                margin:0 auto;
                width: 900px;
            }
        </pre>
    </body>
</html>

Output:
Pemformatan persis seperti saat ditulis di editor.
Referensi tulisan:
  1. <pre>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 04 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Monday, December 1, 2014

Tag option HTML

Tag <option> digunakan untuk membuat daftar item-item pada tag<select>, <datalist> dan <optgroup>. Tag option memiliki tag pembuka (<option>) dan penutup (</option>).

Beberapa atribut tag option:

disabled: Jika atribut ini dipakai maka pilihan daftar tidak bisa dipilih. Sebagian browser menampilkan pilihan dengan warna abu-abu, menandakan dalam kondisi tidak bisa dipilih.

label: Atribut untuk memberi kategori (label) dari daftar pilihan. Misalnya kategori buah berisi daftar; pisang, semangka, apel, jeruk dan lainnya.

selected: Atribut ini dideklarasikan untuk menentukan suatu daftar pilihan dalam kondisi terpilih.

value: Atribut ini berisi nilai dari suatu daftar pilihan yang akan disimpan ke database (jika dikombinasikan ke php). Jika tidak dideklarasikan, maka nilai defaultnya adalah teks di antara tag option.

Contoh:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag option</title>
        </head>
    <body>
    <select>
      <optgroup label="Sayuran">
        <option value="bayam">Bayam</option>
        <option>Daun ubi</option>
        <option>Kol</option>
      </optgroup>
      <optgroup label="Buah">
        <option>Pisang</option>
        <option>Mangga</option>
        <option>Pepaya</option>
      </optgroup>
      <optgroup label="Kacang-kacangan">
        <option>Kacang hijau</option>
        <option>Kacang tanah</option>
        <option selected>Kacang kedelai</option>
      </optgroup>
      <optgroup label="Lainnya" disabled>
        <option>Lainnya 1</option>
        <option>Lainnya 2</option>
        <option>Lainnya 3</option>
      </optgroup>
    </select>
    </body>
</html>

Output:

Pilihan "Kacang kedelai" dalam posisi terpilih.
Referensi tulisan:
  1. <option>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 02 Desember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Wednesday, November 26, 2014

Tag optgroup HTML

Tag <optgroup> digunakan untuk mengelompokkan jenis data per grup di dalam tag <select>. Tag select digunakan untuk membuat daftar pilihan dalam combox box, namun tidak per grup. Tag optgroup membuat data tampil per jenis. Misalnya, nama buah, nama sayur, nama kacang-kacangan.

Atribut tag optgroup:
label = nama (jenis) grup.
option = nama (nilai) data daftar grup.
disabled = pilihan tidak diaktifkan.

Contoh: optgroup.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag optgroup html</title>
        </head>
    <body>
    <select>
      <optgroup label="Sayuran">
        <option>Bayam</option>
        <option>Daun ubi</option>
        <option>Kol</option>
      </optgroup>
      <optgroup label="Buah">
        <option>Pisang</option>
        <option>Mangga</option>
        <option>Pepaya</option>
      </optgroup>
      <optgroup label="Kacang-kacangan">
        <option>Kacang hijau</option>
        <option>Kacang tanah</option>
        <option>Kacang kedelai</option>
      </optgroup>
      <optgroup label="Lainnya" disabled>
        <option>Lainnya 1</option>
        <option>Lainnya 2</option>
        <option>Lainnya 3</option>
      </optgroup>
    </select>
    </body>
</html>

Output:

Pilihan Lainnya dinonaktifkan.
Ket: Kode html di atas menggunakan 4 grup dengan masing-masing 3 nilai per grup. Jika ingin suatu grup dinonaktifkan, maka tambahan disabled setelah nama grup. Perhatikan potongan kode <optgroup label="Lainnya" disabled>. Selamat mencoba!

Referensi tulisan:
  1. <optgroup>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 27 Nopember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Sunday, November 23, 2014

Tag noscript HTML

Tag <noscript> digunakan untuk mendeteksi dukungan browser terhadap javascript. Javascript merupakan bahasa pemrograman web yang membuat halaman web lebih interaktif.

Browser tidak mendukung javascript karena dua kondisi; pertama, karena pengguna menonaktifkan dukungan javascript di browser, kedua browser itu sendiri memang tidak mendukung javascript.

Penulisan tag <noscript>:
- Sintax: <noscript>...</noscript>
- Tanda titik-titik diganti dengan teks (informasi), link, gambar atau lainnya yang memberitahu pengunjung web bahwa browser yang digunakannya tidak mendukung javascript.

Contoh:
noscript.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag noscript html</title>
        </head>
    <body>
        <noscript>Maaf, mohon aktifkan javascript di browser Anda.</noscript>
        <p>Ini teks lain...</p>
    </body>
</html>

Output jika browser mendukung java script:

Namun jika browser tidak mendukung java script:

Selamat mencoba!

^ Baca juga: Tag optgroup HTML.

Referensi tulisan:
  1. <noscript>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 24 Nopember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Wednesday, November 19, 2014

Tag meter HTML

Tag <meter> HTML5 digunakan untuk mewakili nilai skala, baik bilangan bulat atau pecahan. Nilai skala ini mempunyai batas maksimum - tetapi nilai sebenarnya bisa hanya sepertiga, setengah atau nilai lainnya. Misalnya, hardisk Anda kapasitasnya 100 Gb (Gigabyte) tetapi hanya terisi 10 Gb. Untuk menggambarkan 10 Gb dalam 100 Gb bisa dibuat dengan tag meter.

Tampilan tag meter berupa persegi panjang berukuran kecil, warna abu-abu sebagai kapasitas maksimum dan warna hijau berarti nilai yang sebenarnya.

Contoh: meter.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag meter html</title>
        </head>
    <body>
        <p>Kapasitas hardisk Anda (100 Gb) setelah terisi: <meter max="100" value="10">10 Gb</meter></p>
    </body>
</html>

Output:
Tampilan tag meter di Mozilla Firefox.
Atribut-atribut tag meter:
value= nilai meter sebenarnya.
min= nilai minimal (jika dibutuhkan).
max= nilai maksimal meter.

Contoh 2: meter2.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag meter html</title>
        </head>
    <body>
        <p>Daya baterai ponsel Anda telah kritis: <meter min="4" max="100" value="8"></meter> segera lakukan isi ulang.</p>
    </body>
</html>

Output:

^Baca juga: Tag noscript HTML.

Referensi tulisan:
  1. <meter>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 19 Nopember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
  2. The HTML5 meter Element; ditulis oleh: Guest Author, css-tricks.com, diakses 19 Nopember 2014.
Posted by at No comments:
Labels:

Sunday, November 16, 2014

Tag mark HTML

Tag <mark> digunakan untuk menandai teks di halaman web. Teks yang ditandai berarti penting dan memudahkan melihatnya di antara teks lain.

Contoh mark di dalam bentuk benda adalah menandai teks dalam bacaan dengan Stabilo. Kata atau kalimat yang ditandai menandakan penting dan jika telah ditandai, tidak sulit mencarinya di lain waktu.

Teks yang ada di dalam tag mark ditampilkan dalam warna latar kuning. Jika ingin menukar warnanya, sesuaikan dengan css.

Tag mark memiliki pembuka dan penutup. <mark> dan </mark>.

Contoh: mark.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag mark html</title>
        </head>
    <body>
    <p>Apa yang dicita-citakan langsung dipraktekkan,
    bukan sekedar dibayangkan. Tak masalah prosesnya sedikit lambat
    karena ada prioritas lain yang lebih penting. <mark>Jalanin aja..</mark>
    </body>
</html>

Output:
Teks jalanin aja di mark.
Untuk mengganti warna latar mark, berikut contohnya dengan menyesuaikan warna di css: mark2.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag mark html</title>
            <style type="text/css">
            mark{background-color:#C3ED43;}
            </style>
        </head>
    <body>
    <p>Apa yang dicita-citakan langsung dipraktekkan,
    bukan sekedar dibayangkan. Tak masalah prosesnya sedikit lambat
    karena ada prioritas lain yang lebih penting. <mark>Jalanin aja..</mark>
    </body>
</html>

Output:
Warna latar menjadi hijau.
^ Baca juga: Tag meter HTML.

Referensi tulisan:
  1. <mark>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 16 Nopember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Friday, November 14, 2014

Tips: Tulis Kode HTML Sedikit Demi Sedikit dan Lihat Hasilnya

Halo pelajar html! Kali ini penulis berbagi tips tentang menulis (mengetik) kode html. Meskipun kode html tidak menimbulkan pesan eror ketika lupa menutup tag atau salah mengetik tag, tetapi jika menulis kode langsung banyak akan susah nanti mencari kesalahannya di mana saat hasil/tampilan di browser tak sesuai harapan. Untuk itulah penulis sarankan bagi pemula agar menulis kode html sedikit demi sedikit agar mudah dalam mencari letak kesalahan kode.

Contohnya ketika membuat tabel dengan tag <table>, setelah membuat satu baris dan satu kolom, langsung lihat hasilnya di browser, apakah sudah benar atau masih salah. Jika sudah, lanjut lagi ke kolom kedua atau baris kedua dan seterusnya. Untuk membuat tabel baca artikel ini. Kesalahan yang sering terjadi saat membuat tabel ketika memecah baris (rowspan) dan memecah kolom (colspan), sehingga saat bekerja di bagian ini perlu melihat hasilnya, jika sudah benar baru beranjak ke kolom atau baris selanjutnya.

Cara yang sama berlaku juga ketika Anda membangun web dari desain yang telah dibuat, misalnya desain yang digambar di atas kertas atau yang dibuat dengan aplikasi pengolah gambar seperti Corel Draw dan Photoshop. Baris demi baris kode ditulis dan dilihat hasilnya apakah sudah sesuai desain atau tidak.

Jika Anda memang menggunakan editor (tempat penulisan kode) berbayar seperti Adobe Dreamweaver, aplikasi ini dilengkapi fitur yang bisa langsung melihat hasil kode html. Namun, jika Anda tidak sanggup membayar lisensi, Anda tidak perlu khawatir. Notepad++ jadi solusi, gratis dan 'ringan' dalam prosesnya, tapi itu tadi tidak dilengkapi fitur seperti Adobe Dreamweaver, maka solusinya menulis kode sedikit demi sedikit dan lihat hasilnya. Link download Notepad++ di sini.

Menulis kode html dengan Notepad++.
Teknik yang dijelaskan dari awal juga berlaku saat Anda sedang ujian di kampus atau di sekolah. Seperti diketahui, saat ujian biasanya timbul perasaan tegang dan gugup. Jika saat itu Anda telah menulis kode html sedemikian banyak tetapi saat dilihat hasilnya di browser tidak sesuai harapan, itu bisa membuat frustasi. Untuk mencari letak kesalahan sulit karena sudah terlalu banyak baris kode yang diteliti dari awal sampai akhir. Makanya, ditulis sedikit demi sedikit, jika tampilan tak sesuai harapan langsung perbaiki, setelah itu melangkah mulus ke tahap selanjutnya. Semoga membantu!

^Baca juga: Tag mark html.
Posted by at No comments:
Labels:

Tuesday, November 11, 2014

Tips: Mengecek Apakah Penutup Tag Berlebih

Halo yang sedang belajar HTML! Ketika Anda telah selesai mengetik beberapa baris HTML dan merasa lengkap tag pembuka dan penutupnya dan melihat hasil (tampilan) di browser persis seperti apa yang diharapkan itu sudah menyenangkan hati. Tetapi ada baiknya Anda memeriksa apakah ada tag penutup yang berlebih, artinya satu tag memiliki 2 tag penutup, padahal harusnya satu tag pembuka dan hanya satu tag penutup.

Sebelum membahas lebih jauh, ada beberapa tag yang memang tidak membutuhkan tag penutup, contohnya <br> untuk enter (baris baru), <hr> untuk membuat garis horizontal, <link> untuk menampilkan file dari suatu lokasi (folder) misalnya css dan tag <img> untuk menampilkan gambar.

Kita balik lagi ke topik, misalnya Anda menggunakan tag yang membutuhkan tag penutup seperti tag <table> untuk membuat tabel termasuk di dalamnya <tr> (baris baru), <td> (kolom baru). Contoh: tabel.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Test penutup tag</title>
        </head>
    <body>
    <table border="1" width="400px">
        <tr>
            <td>Kolom pertama</td>
            <td>Kolom kedua</td>
            <td>Kolom ketiga</td>
        </tr>
        <tr>
            <td>Kolom keempat</td>
            <td>Kolom kelima</td>
            <td>Kolom keenam</td>
        </tr>
    </table>
    </body>
</html>

Output:

Baris kode di atas telah memiliki tag penutup, artinya sudah sesuai standar. Sekarang kita sengaja lebihkan tag penutup tabel</table> menjadi dua, pada potongan kode berikut:

        <tr>
            <td>Kolom keempat</td>
            <td>Kolom kelima</td>
            <td>Kolom keenam</td>
        </tr>
    </table>
    </table>


Nah, sangat mudah mendeteksi tag berlebih ini dengan browser, misalnya Firefox. Dengan cara klik kanan di area kosong pada tampilan tabel.html, kemudian pilih View Page Source seperti gambar berikut:

Jika browser menggunakan bahasa Indonesia, maka menjadi "Tampilkan kode sumber"
Anda akan melihat tulisan warna merah yang menandakan tag </table> berlebih, yang seharusnya satu saja, karena hanya satu tag pembuka <table>.

Tips ini juga berlaku untuk tag lain yang memerlukan tag penutup.
Itulah tips sederhana yang bisa Anda praktektan, jadi daripada melihat satu per satu tag, lebih baik menerapkan cara di atas. Jauh lebih hemat waktu. Selamat mencoba.

^Baca juga: Tips menulis kode html untuk pemula.
Posted by at 1 comment:
Labels:

Friday, November 7, 2014

Tag kbd HTML

Tag kbd (keyboard) merupakan HTML elemen input dalam inline untuk menuliskan perintah keyboard yang ditampilkan dalam font (jenis huruf) monospace.

Inline artinya teks ditampilkan tetap satu baris dengan teks sebelumnya.

Contoh perintah keyboard adalah Ctrl+S untuk menyimpan, Ctrl+V untuk menempel, Ctrl+C untuk menggandakan.

Untuk membedakan jenis huruf dari beberapa perintah keyboard ini maka dianjurkan diletakkan dalam tag <kbd>.

Contoh: kbd.html

 <!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag kbd HTML</title>
        </head>
    <body>
        <p>Untuk menyimpan dokumen gunakan perintah <kbd>Ctrl+S</kbd> <br />
        Untuk menempel dokumen gunakan perintah <kbd>Ctrl+V</kbd> <br />
        Untuk memindahkan dokumen gunakan perintah <kbd>Ctrl+X</kbd> <br />
        Untuk menggandakan dokumen gunakan perintah <kbd>Ctrl+C</kbd> <br />
        Untuk membuka dokumen gunakan perintah <kbd>Ctrl+O</kbd>
        </p>
    </body>
</html>

Output:

Hasil tampilan di browser.
^Baca juga: Tips: Mengecek tag penutup berlebih.

Referensi tulisan:
  1. <kbd>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 08 Nopember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Tuesday, November 4, 2014

Tag ins HTML

Tag <ins> digunakan untuk menginformasikan bahwa suatu data telah ditambahkan ke dokumen. Teks yang berada di dalam tag ins otomatis ditampilkan dengan garis bawah. Tag ins diawali tag pembuka (<ins>) dan tag penutup (</ins>).

Contoh: ins.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag ins HTML</title>
        </head>
    <body>
        <ins>Sukses, teks telah ditambahkan.</ins>
    </body>
</html>

Output:

Tag ins mempunyai dua atribut:
- cite: Atribut cite berisi url (link) yang menginformasikan alasan penambahan teks. Penulisan: <ins cite="url.html">Sukses, teks telah ditambahkan</ins>. url html diganti dengan url sebenarnya.
- datetime: Atribut datetime berisi informasi waktu kapan teks ditambahkan. Contohnya bisa dilihat di sini.

^Baca juga: Tak kbd HTML.

Referensi tulisan:
  1. <ins>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 04 Nopember 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: , ,

Friday, October 31, 2014

Tag footer HTML

Tag <footer> biasanya berisi informasi tentang penulis atau pemilik web/blog, data hak cipta, kebijakan, privasi dan link-link terkait. Jika menuliskan informasi alamat kantor web/blog, sertakan di dalam tag <addres>. Tag footer biasanya diletakkan di bagian paling bawah, atau di kanan atau kiri bawah halaman web/blog jika menggunakan otomatis load konten (konten di load ketika halaman di geser ke bawah), namun bisa juga di mana saja, misalnya di bagian akhir artikel (footer artikel).

Sebelum jauh mengenal tag <footer>, berikut beberapa contoh tampilan footer dari berbagai gaya tampilan:

Footer situs detik.com

Footer liputan6.com

Footer tribunnews.com berada di kanan bawah tampilan.

Footer Facebook di kanan bawah.
 Footer Twitter berada di kiri bawah.
Pada beberapa kasus, blog atau web tidak menggunakan tag <footer> sebagai penanda bahwa informasi yang terkandung di dalamnya adalah informasi bagian footer. Namun, jika Anda mengikuti aturan dasar HTML yang valid, maka tag <footer> digunakan.

Penulisan tag <footer> di awali pembuka dan penutup. Tag <footer> boleh lebih dari satu kali dideklarasikan di halaman yang sama.

Contoh penulisan standar: footer.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag footer HTML</title>
        </head>
    <body>
    <div id="header">Di sini header....</header>
    <div id="content">Di sini content web...</div>
<footer>
    <a href="about.html">Tentang</a> - <a href="privasi.html">Privasi</a> -
    <a href="kontak.html">Contact</a>
    <address>Alamat kami: Jl. Juanda Gg. Hidayah No. 5 Padang, Sumatera Barat, Indonesia.
    </address>
</footer>
    </body>
</html>

Output:


Contoh lain bisa dilihat di sini.

^Baca juga: Tag ins HTML.

Referensi tulisan:
  1. <footer>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 31 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at 1 comment:
Labels: , ,

Tuesday, October 28, 2014

Tag figure dan figcaption

Tag <figure> digunakan untuk mewakilkan gambar, ilustrasi, diagram, potongan kode, skema atau sejenisnya. Untuk menjelaskan apa maksud objek yang berada di dalam tag figure, digunakan tag <figcaption>. Tag <figcaption> bersifat opsional, jika gambar, ilustrasi, potongan kode atau sejenisnya maknanya sudah jelas, maka tak perlu ada teks keterangan yang dibuat dengan tag figcaption.

Contoh 1; <figure> tanpa figcaption dengan tag img (menampilkan gambar/foto) : figure.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag figure dan figcaption</title>
        </head>
    <body>
    <figure>
        <img src="lake_toba.jpg" alt="Danau Toba" />
    </figure>
    </body>
</html>

Note: Gambar "lake_toba.jpg" bisa diganti dengan gambar apapun yang Anda mau.

Contoh 2, figure dengan tag figcaption: figure2.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag figure dan figcaption</title>
        </head>
    <body>
    <figure>
        <img src="lake_toba.jpg" alt="Danau Toba" />
        <figcaption>Ini adalah Danau Toba, danau vulkanik dengan ukuran panjang 100 kilometer dan lebar 30 kilometer yang terletak di Provinsi Sumatera Utara, Indonesia.
        </figcaption>
    </figure>
    </body>
</html>

Tag figure caption juga bisa dalam menjelaskan potongan kode, misalnya kode html yang di bawahnya terdapat penjelasan tentangnya, sehingga pengunjung web lebih mudah memahaminya.

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag figure dan figcaption</title>
        </head>
    <body>
    <figure>
        <figcaption>Contoh potongan kode penggunaan tag figure dan figcaption: </figcaption>
            <br />
<code>
&lt;figure&gt;<br />
&lt;img src="lake_toba.jpg" alt="Danau Toba" /&gt;<br />
&lt;figcaption&gt;Ini adalah Danau Toba, danau vulkanik
dengan ukuran panjang 100 kilometer dan lebar 30 kilometer
yang terletak di Provinsi Sumatera Utara, Indonesia.<br />
&lt;/figcaption&gt;<br />
&lt;/figure&gt;
</code>
</figure>
    </body>
</html>

Output:


Referensi tulisan:
  1. <figure>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 29 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
  2. <figcaption>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 29 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
  3. Danau Toba; ditulis oleh: Kontributor Wikipedia, id.wikipedia.org, diakses 29 Oktober 2014.
Posted by at No comments:
Labels: ,

Saturday, October 25, 2014

Tag fieldset HTML

Tag <fieldset> digunakan untuk mengelompokkan beberapa beberapa kontrol pada sebuah form yang memberikan informasi tambahan tentang kontrol. Untuk memberikan nama kelompok digunakan tag <legend>. Contohnya nama fieldset 'Buah' yang di dalamnya berisi informasi macam-macam buah. Kontrol di dalam fieldset bisa berupa checkbox, radio button, text, selet dan sebagainya. Jumlahnya bisa satu atau lebih.

Contoh: fieldset.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag fieldset 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;}
            </style>
        </head>
    <body>
    <form>
    <fieldset>
    <legend>Buah</legend>
    <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"> Pir
    </fieldset>
    <br />
   
    <fieldset>
    <legend>Mata uang</legend>
    <input type="radio" name="radio1" value="Pisang" checked> Rupiah
    <input type="radio" name="radio1" value="Apel"> Dollar
    <input type="radio" name="radio1" value="Melon"> Euro
    <input type="radio" name="radio1" value="Melon"> Poundsterling
    </fieldset>
    <br />
    <fieldset>
    <legend>Klub sepakbola</legend>
    <select name="pilih">
    <option value="arsenal">Arsenal</option>
    <option value="chelsea">Chelsea</option>
    <option value="mu">Manchester United</option>
    <option value="lvpool">Liverpool</option>
    </select>
    </fieldset>
    </form>
    </body>
</html>

Output:


Di HTML5 tag fieldset mendukung fitur disabled, membuat suatu kontrol di dalam suatu fieldset tidak bisa dipilih, diedit atau berinteraksi dengannya. Sebagian besar browser menampilkannya dalam warna abu-abu.

    <fieldset disabled="disabled">
    <legend>Mata uang</legend>
    <input type="text" value="Informasi mata uang" />
    <br />
    <input type="radio" name="radio1" value="Pisang" checked> Rupiah
    <input type="radio" name="radio1" value="Apel"> Dollar
    <input type="radio" name="radio1" value="Melon"> Euro
    <input type="radio" name="radio1" value="Melon"> Poundsterling
    </fieldset>

Output:

^Baca juga: Tag <figure> dan tag <caption> HTML5.

Referensi tulisan:
  1. <fieldset>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 25 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: , ,

Sunday, October 19, 2014

Tag embed HTML

Tag <embed> digunakan untuk mengintegrasikan aplikasi eksternal atau konten interaktif, dengan kata lain plug-in. Contoh file yang dapat diembed yaitu gambar, kode program javascript, video, suara dan file css.

Atribut tag embed:
height: Ukuran tinggi resource yang diembed.
src: Sumber resource.
type: Tipe resource yang diembed, misalnya video swf, mov atau avi. Daftar tipe MIME yang dapat diembed bisa dilihat di sini.
width: Ukuran lebar resource yang diembed.

Sintax: <embed type="tipe_MIME" src="sumber_resource" width="angka" height="angka">

Contoh: embed.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag embed HTML</title>
        </head>
    <body>
    <embed type="application/x-shockwave-flash" src="videoku.swf" width="650" height="300">
    </body>
</html>

Note: "videoku.swf" silahkan diganti dengan video Anda yang memiliki ekstensi swf.

Nilai atribut width dan height pada contoh di atas dituliskan secara langsung, selain itu bisa juga diatur dengan css.

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag embed HTML</title>
            <style type="text/css">
            .embedWH{width:650px;height:300px;}
            </style>
        </head>
    <body>
    <embed type="application/x-shockwave-flash" src="videoku.swf" class="embedWH">
    </body>
</html>

^Baca juga: Tag <fieldset> dan tag <legend> untuk mengelompokkan kontrol.

Referensi tulisan:
  1. <embed>; ditulis oleh: Tim MDN (Mozilla Developer Network), developer.mozilla.org, diakses 20 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: , ,

Friday, October 17, 2014

Tag div HTML

Tag <div> mendefenisikan suatu blok pada web sebagai wadah penampung komponen web yang tidak memberikan 'efek' apapun. Berbeda dengan tag <hr>: membuat garis, <b>: membuat huruf tebal, tag div tidak memberikan efek apapun. Anda bisa langsung mengisi konten (teks, gambar, video) ke dalam tag div atau menggunakan tag-tag lain di dalamnya, seperti <p>, <a>, <table>, <em> dan tag lainnya.

Tag <div> tidak membutuhkan tag <br> untuk berpindah baris (enter), karena apa yang di bawahnya otomatis tidak akan sejajar dengannya. Berbeda dengan teks biasa, Anda butuh tag br untuk membuat baris baru.

Contoh: div.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag div HTML</title>
        </head>
    <body>
    <div>
    <p>Wiki tipspengetahuan merupakan kanal artikel dari tipspengetahuan
    yang menyajikan artikel wiki, siapapun dapat menulis dan mengeditnya
    untuk menjadi artikel sempurna.
    </p>
    </div>
    <div>
    Tipspengetahuan.com 2012-2014
    </div>
    </body>
</html>

Output:


Untuk pemformatan gunakan css, seperti mengatur nama font, ukuran font, line height (spasi vertikal teks) dan atribut css umum lainnya. Anda dapat mendeklarasikan class atau id di css yang nantinya di panggil di tag div. Ingat, jika menggunakan id(#) nama id hanya bisa sekali dipanggil di satu halaman, tetapi class(.) boleh berulang kali.

Contoh: div2.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag div HTML</title>
            <style type="text/css">
            .content{
            font-family:Tahoma;
            font-size:13px;
            line-height:17px;
            }
          
            #footer{
            font family: Georgia;
            font-size:11px;
            font-style:italic;
            }
            </style>
        </head>
    <body>
    <div class="content">
    <p>Wiki tipspengetahuan merupakan kanal artikel dari tipspengetahuan
    yang menyajikan artikel wiki, siapapun dapat menulis dan mengeditnya
    untuk menjadi artikel sempurna.
    </p>
    </div>
    <div id="footer">
    Tipspengetahuan.com 2012-2014
    </div>
    </body>
</html>

Output:


^Baca juga: Tag <embed> untuk menanamkan file dan resource interaktif.

Referensi tulisan:
  1. <div>; ditulis oleh: Kontributor MDN (Mozilla Developer Network), developer.mozilla.org, diakses 18 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,

Wednesday, October 15, 2014

Tag dfn HTML

Tag <dfn> digunakan untuk mendefenisikan istilah. Untuk menghubungkan kata istilah dengan penjelasannya digunakan tag <a> yang mengarah pada halaman yang sama. Misalnya kata istilah ada di awal atau di tengah halaman kemudian penjelasan ada di bagian bawah, maka link kata istilah jika diklik maka browser akan menggeser (fokus) ke kalimat penjelas.

Untuk mengujinya teks pada halaman harus banyak (melebihi batas normal) vertical scroll bar. Contoh di bawah hanya menggunakan teks sedikit (agar contoh kode tidak terlalu panjang). Sialahkan tambahkan teks apa saja di bagian Media sosial adalah...

Tag dfn memiliki atribut id yang nilainya sama dengan nilai href pada tag a (diawali dengan tanda #). Tag dfn berhubungan dengan tag ddl-dt-dd dan tag abbr.

Contoh:

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag dfn HTML</title>
        </head>
    <body>
    <p><dfn id="dfnFb">Facebook</dfn> adalah media sosial yang diciptakan Mark Zuckerberg.
    Facebook dikenal sebagai Fb atau F mampu menghubungkan orang dari segala penjuru dunia
    selama tersedia koneksi internet.
    </p>
   
<dl>
    <dt>
        <dfn>
            <abbr title="Media Sosial">Media Sosial</abbr>
        </dfn>
    </dt>
        <dd>Media sosial adalah situs yang bisa menghubungkan, mendekatkan, memudahkan
        para penggunanya untuk berinteraksi dan berbagi, contohnya <a href="#dfnFb">Facebook</a>.
    </dd>
</dl>
    </body>
</html>

Output:

^Baca juga: Tag <div> HTML untuk membuat blok-blok.

Referensi tulisan:
  1. <dfn>; ditulis oleh: Kontributor MDN (Mozilla Developer Network), developer.mozilla.org, diakses 15 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Posted by at No comments:
Labels: ,
Subscribe to: Posts (Atom)