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: ,

Monday, October 13, 2014

Tag del HTML

Tag <del> HTML digunakan untuk menginformasikan teks dimaksud telah dihapus. Teks yang berada di antara tag del otomatis diberikan garis horizontal di atas teks. Tag del hampir mirip dengan <strikethrough>.

Meskipun jika diartikan ke dalam bahasa Indonesia del artinya hapus, bukan berarti teks dihapus tetapi hanya dicoret. Menandakan teks yang dicoret informasinya sudah tidak berlaku.

Contoh: del.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag del HTML</title>
        </head>
    <body>
    Presiden RI setelah tanggal 20 Oktober 2014 adalah
    <del>Susilo Bambang Yudhoyono</del> Joko Widodo.
    </body>
</html> 

Output:


^Baca juga: Tag <dfn> HTML untuk membuat defenisi suatu kata istilah yang terhubung dengannya.

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

Saturday, October 11, 2014

Tag dl, dt dan dd HTML

Ketiga tag <dl>, <dt> dan <dd> digunakan untuk menampilkan glosarium atau menampilkan metadata. Bahasa sederhananya menuliskan istilah dan menuliskan juga pengertiaannya. Tag dl menandakan satu blok glosarium, tag dt berisi kata istilah dan tag dd berisi deskripsi dari tag dt. Teks yang berada di dalam tag dd otomatis menjorok ke dalam.

Contoh: ddd.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag dt, dl, dd HTML</title>
        </head>
    <body>
    <dl>
        <dt>Private browsing</dt>
        <dd>Mengakses internet dengan private, browser tidak akan menyimpan
        sesi, cookie, password dan data penjelajahan. Private browsing sangat
        cocok diaktifkan ketika menggunakan komputer umum.
        </dd>
    </dl>
    </body>
</html>

Ouput:

Satu deklarasi tag dd menandakan satu paragraf atau satu penjelas. Jika masih ada penjelasan lain terkait istilah, deklarasikan kembali dalam tag dd, begitu juga dengan paragraf berikutnya.

ddd2.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag dt, dl, dd HTML</title>
        </head>
    <body>
    <dl>
        <dt>Private browsing</dt>
        <dd>Mengakses internet dengan private, browser tidak akan menyimpan
        sesi, cookie, password dan data penjelajahan. Private browsing sangat
        cocok diaktifkan ketika menggunakan komputer umum.
        </dd>
        <dd>
        Untuk mengaktifkan private browsing di Mozilla Firefox,
        dari Menu pilih New Private Window.
        </dd>
    </dl>
    </body>
</html>

Output:


Jika beberapa istilah namun tetap satu deskripsi berarti tag dt lebih dari satu kali dideklarasikan dan hanya satu tag dd.

ddd3.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag dt, dl, dd HTML</title>
        </head>
    <body>
    <dl>
        <dt>Facebook</dt>
        <dt>Fb</dt>
        <dt>F</dt>
        <dd>Media sosial yang diciptakan oleh Mark Zuckerberg
        yang memudahkan semua orang di dunia dapat terhubung,
        di manapun kapan pun..
        </dd>
    </dl>
    </body>
</html>

Output:


Sedangkan untuk penggunaan medatada berikut adalah contohnya:

ddd4.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag dt, dl, dd HTML</title>
        </head>
    <body>
    <dl>
        <dt>Nama</dt>
        <dd>Erwin Sholeh Siregar</dd>
        <dt>Lahir</dt>
        <dd>24 April 1991</dd>
        <dt>Website</dt>
        <dd>tipspengetahuan.com</dd>
        <dt>Keahlian</dt>
        <dd>Web developer, penulis, blogger</dd>
    </dl>
    </body>
</html>

Output:

^Baca juga: Tag <del> HTML untuk menandai teks yang tidak berlaku lagi.

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

Wednesday, October 8, 2014

Tag datalist HTML5

Tag <datalist> digunakan untuk menampilkan daftar dalam sebuah kotak teks (text box). Ketika Anda mengetikkan awalan huruf yang sama dengan daftar, maka akan ditampilkan saran pilihan (mirip autocomplete). Ini memudahkan memilih satu pilihan dari sekian daftar yang tersedia.


Tag datalist digabung dengan tag <input> dengan atribut list (daftar) pilihan. Nama atribut list pada tag input menjadi nilai id pada tag datalist. Untuk isi daftar dimuat dalam tag <option> dengan atribut value. Hampir sama dengan dengan ketika Anda membuat daftar dengan tag <select> dengan atribut name dan tag option untuk menampung data daftar.

datalist.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag datalist HTML5</title>
        </head>
    <body>
<div>Dari mana Anda berasal:</div>
<input list="kota" />
<datalist id="kota">
  <option value="Medan">
  <option value="Bandung">
  <option value="Jakarta">
  <option value="Palembang">
  <option value="Padang">
  <option value="Malang">
  <option value="Madura">
  <option value="Madiun">
  <option value="Batu">
  <option value="Blitar">
  <option value="Nganjuk">
  <option value="Nabire">
  <option value="Pekanbaru">
  <option value="Pontianak">
  <option value="Pekalongan">
  <option value="Riau">
</datalist>
    </body>
</html>

^Baca juga: Tag <dl>, <dt> dan <dd> untuk membuat daftar kata istilah dan penjelasannya.

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

Tuesday, October 7, 2014

Tag code HTML

Tag <code> merupakan tag khusus untuk penempatan kode program atau sejenis yang mirip dengannya di halaman web, misalnya html, javascript, php, mysql dan lainnya. Teks yang berada di dalam tag code otomatis ditampilan dengan font monoscpace, font yang identik dengan kode program. Meskipun tidak ada kewajiban setiap kode harus diberada di dalam tag code, tetapi dengan tag code mampu membedakan tampilan mana yang teks dan mana yang kode dalam suatu artikel.

Tag code diawali pembuka (<code>) dan penutup (</code>). Contoh:

code html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag code html</title>
        </head>
    <body>
    <p>Berikut adalah contoh penulisan tag b, i dan u: .</p>
    <code>
&lt;b&gt;Teks...&lt;/b&gt; &lt;br /&gt;<br />
&lt;i&gt;Teks...&lt;/i&gt; &lt;br /&gt;<br />
&lt;u&gt;Teks...&lt;/u&gt;
    </code>
<p>'Teks' Anda ganti dengan teks sebenarnya.</p>
    </body>
</html>

Tampilan di browser Firefox:


Tag code mendukung di semua browser populer. Jadi, Anda tidak perlu menggunakan tag ini untuk halaman web Anda.

Anda juga bisa mengganti jenis font tag code jika dibutuhkan, juga style-nya seperti font-size (ukuran font), font-style (normal, italic), dan nama font dalam css. Misalnya mengganti font default (monospace) menjadi georgia.

codeedit.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag code html</title>
            <style type="text/css">
            code{
            font-family: georgia;
            font-size: 13px;
            font-style: italic;
            }
            </style
        </head>
    <body>
    <p>Berikut adalah contoh penulisan tag b, i dan u:</p>
    <code>
&lt;b&gt;Teks...&lt;/b&gt; &lt;br /&gt;<br />
&lt;i&gt;Teks...&lt;/b&gt; &lt;br /&gt;<br />
&lt;u&gt;Teks...&lt;/u&gt;
    </code>
    <p>'Teks' Anda ganti dengan teks sebenarnya.</p>
    </body>
</html>

Hasil tampilan.

^Baca juga tag: Tag <datalist> untuk menampilkan data interaktif.

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

Sunday, October 5, 2014

Tag cite HTML

Tag cite digunakan untuk menuliskan sumber kutipan. Sebagaimana diketahui, setiap karya di internet memiliki hak cipta. Untuk menghargai karya orang lain dan agar tidak disebut plagiat, harus menuliskan sumbernya. Menuliskan sumber kutipan secara online memakai tag <cite>. Berikut penjelasan w3.org tentang tag cite:
Meskipun versi sebelumnya HTML tersirat bahwa mengutip elemen dapat digunakan untuk menandai nama seseorang, penggunaan ini tidak lagi dianggap sesuai. Mengutip elemen sekarang semata-mata untuk judul yang dikutip dari karya; misalnya, judul buku, paper, esai, puisi, skor, lagu, naskah, film, acara TV, game, patung (seni rupa), lukisan, produksi teater, play, opera, musik, pameran, laporan kasus hukum, atau lainnya sejenis karya.
— cite – cited title of a work, oleh Tim W3, diakses 06 Okotber 2014.
Isi kutipan mencakup judul, nama pengarang dan url (link). Tetapi yang atribut yang memakai tag cite hanya untuk judul karya saja, selainnya tidak. Tambahkan juga atribut lainnya, seperti tanggal akses. Jika mengutip dari sumber online, gunakan tag <blockquote> pada kutipan. Contoh:

cite.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Atribut murni rtl HTML</title>
        </head>
    <body>
Penjelasan tag &lt;cite&gt; versi MDN (Mozilla Developer Network, judul artikel: &lt;cite&gt;, ditulis oleh Tim MDN, diakses 06 Oktober 2014:
<blockquote>
HTML &lt;cite&gt; Elemen (atau HTML Citation Elemen)
merupakan referensi untuk sebuah karya kreatif.
Ini harus mencakup judul karya, nama penulis, atau referensi URL,
yang mungkin dalam bentuk singkatan sesuai
dengan konvensi yang digunakan untuk penambahan kutipan metadata.
<br />
— <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite" target="_blank"><cite>&lt;cite&gt;</cite></a>, oleh Tim MDN, diakses 06 Okotber 2014.
</blockquote>
    </body>
</html>

^Baca juga: Tag <code> HTML untuk menuliskan kode program di halaman web.

Referensi tulisan:
  1. <cite>; ditulis oleh: Tim MDN, developer.mozilla.org, diakses 06 Oktober 2014.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
  2. cite – cited title of a work; ditulis oleh: Tim W3, w3.org, diakses 06 Oktober 2014.
Posted by at No comments:
Labels: , ,

Thursday, October 2, 2014

Tag bdo HTML


Tag <bdo> digunakan untuk untuk memutar arah baca teks seperti gambar di atas. Normalnya teks biasa dibaca dari kiri ke kanan, tetapi bila diterapkan tag bdo maka teks dibaca dari kanan ke kiri.

bdo.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Tag bdo HTML</title>
        </head>
    <body>
<p>Saya berusaha bangun pagi dengan tepat waktu.</p>
<p><bdo dir="rtl">Saya berusaha bangun pagi dengan tepat waktu.</bdo></p>
    </body>
</html> 

Tag bdo berhubungan dengan atribut dir (direction/arah teks), yaitu mengatur pembacaan arah teks, apakah dari kiri ke kanan; ltr, kanan ke kiri; rtl dan inherit. Untuk tag bdo berlaku atribut ltr. Sebagai perbandingan jika tidak memakai tag bdo, murni memakai atribut dir rtl, maka hasilnya seperti berikut:


Anda lihat tampilan di atas, teks hanya pindah ke kanan tanpa mengubah arah baca.

dirrtl.html

<!DOCTYPE HTMl>
    <html>
        <head>
            <title>Atribut murni rtl HTML</title>
        </head>
    <body>
<p>Saya berusaha bangun pagi dengan tepat waktu.</p>
<p dir="rtl">Saya berusaha bangun pagi dengan tepat waktu.</p>
    </body>
</html>

^Baca juga: Tag <cite> HTML untuk membuat sumber kutipan.

Referensi tulisan:
  1. direction; ditulis oleh: Tim MDN (Mozilla Developer Network, developer.mozilla.org, diakses 03 Oktober 2014.
  2. <bdo>; ditulis oleh: Tim MDN (Mozilla Developer Network, developer.mozilla.org, diakses 03 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)