Blog Belajar HTML: html 4

Showing posts with label html 4. Show all posts

Thursday, April 9, 2015

Contoh Fragmen URL

Fragmen URL adalah URL yang mengarah ke halaman internal halaman web. URL ini ditandai dengan #.

Kegunaan
Fragmen URL sering digunakan untuk memudahkan navigasi artikel panjang yang mempunyai daftar isi. Topik-topik pada daftar isi berisi link untuk penjabaran. Pembaca artikel dapat menelusuri artikel per topik lebih cepat dari daftar isi.

Di bagian paling bawah halaman biasanya juga dibuat fragmen url untuk kembali ke bagian atas.

Sintak penulisan fragmen url
<a href="#nama_id">Teks link</a>
nama_id diganti dengan id link yang ditargetkan.
Teks link diganti dengan keterangan link.
Untuk id link-nya: <div id="nama_id">penjabaran topik...</div>

Contohnya, artikel yang menjabarkan tentang penulisan skripsi yang mempunyai daftar isi, sala satunya: "Cara mengutip langsung". Maka fragmen url-nya, misalnya id link-nya bernama "kutiplangsung": <a href="#kutiplangsung">Cara mengutip langsung</a>. Maka id link targetnya adalah: <div id="kutiplangsung">Di sini penjelasan cara mengutip langsung…bla..bla….</div>

Contoh: fragmen.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh fragmen URL</title>
            <style type="text/css">
                body{width: 500px;}
                #content{margin: 10px;}
                #daftar_isi{width:200px;border: 1px solid #333;}
                hr {border: 1px solid #000;}
            </style>
        </head>
    <body>
    <div id="content">
    <p>Menulis skripsi merupakan kewajiban bagi mahasiswa sebagai
        syarat untuk mendapatkan gelar sarjana. Skripsi ditulis menggunakan
        bahasa Indonesia sesuai Ejaan Yang Disempurnakan dan mematuhi
        aturan-aturan lain seperti cara mengutip, cara membuat daftar pustaka,
        pengaturan margin teks, spasi dan lainnya.
    </p>
    <p>Mahasiswa Sistem Informasi mengerjakan 2 kali lebih berat daripada
    mahasiswa umum. Sebab, selain skripsi harus mengerjakan program, misalnya
    sistem informasi. Program harus sesuai dengan rancangan yang terdapat
    pada bab IV.
    </p>
    <p>Setelah skripsi telah selesai disusun, maka tahap selanjutnya adalah
    ujian komprehensif. Mahasiswa menjelaskan secara umum tentang skripsi yang
    dibuatnya kemudian dosen penguji melontarkan beberapa pertanyaan dan saran.
    Beberapa perbaikan mungkin saja terjadi.
    </p>
    <p>Setelah kompre dan memperbaiki beberapa kekurangan-kekurangan kemudian 
    konsul lagi, maka tahap selanjutnya adalah penjilidan. Skripsi dijilid dan
    meminta tanda tangan dari dosen penguji dan dosen pembimbing.
    </p>
    <div id="daftar_isi">
    Daftar isi:<br />
    - <a href="#kutiplangsung">Cara mengutip langsung</a><br />
    - <a href="#jrspasi">Jarak spasi antar paragraf</a><br />
    - <a href="#tuf">Tulisan dan ukuran font</a><br />
    </div>
    <hr />
    <div id="kutiplangsung">
    <b>Cara mengutip langsung</b><br />
    <p>
    Jika kutipan sama atau kurang dari lima baris, kutipan diapit tanda kutip dua ("),
    menggunakan spasi ganda. Jika lebih dari lima baris, diketik dengan spasi
    tunggal dan dipisahkan dengan kalimat pembuka. Jika mengutip dari buku,
    contohnya: Menurut Jogianto (2005:10) Sistem adalah "sekumpulan..bla bla..".
    </p>
        <p>
    Jika kutipan sama atau kurang dari lima baris, kutipan diapit tanda kutip dua ("),
    menggunakan spasi ganda. Jika lebih dari lima baris, diketik dengan spasi
    tunggal dan dipisahkan dengan kalimat pembuka. Jika mengutip dari buku,
    contohnya: Menurut Jogianto (2005:10) Sistem adalah "sekumpulan..bla bla..".
    </p>
        <p>
    Jika kutipan sama atau kurang dari lima baris, kutipan diapit tanda kutip dua ("),
    menggunakan spasi ganda. Jika lebih dari lima baris, diketik dengan spasi
    tunggal dan dipisahkan dengan kalimat pembuka. Jika mengutip dari buku,
    contohnya: Menurut Jogianto (2005:10) Sistem adalah "sekumpulan..bla bla..".
    </p>
        <p>
    Jika kutipan sama atau kurang dari lima baris, kutipan diapit tanda kutip dua ("),
    menggunakan spasi ganda. Jika lebih dari lima baris, diketik dengan spasi
    tunggal dan dipisahkan dengan kalimat pembuka. Jika mengutip dari buku,
    contohnya: Menurut Jogianto (2005:10) Sistem adalah "sekumpulan..bla bla..".
    </p>
    </div>
    <div id="jrspasi">
    <b>Cara spasi antar paragraf</b><br />
    <p>
    Semua jarak antar paragraf menggunakan spasi ganda. Untuk mengatur margin
    di Microsoft Word; pilih tab Home, di bagian Paragraf klik Line Spacing.
    </p>
        <p>
    Semua jarak antar paragraf menggunakan spasi ganda. Untuk mengatur margin
    di Microsoft Word; pilih tab Home, di bagian Paragraf klik Line Spacing.
    </p>
        <p>
    Semua jarak antar paragraf menggunakan spasi ganda. Untuk mengatur margin
    di Microsoft Word; pilih tab Home, di bagian Paragraf klik Line Spacing.
    </p>
        <p>
    Semua jarak antar paragraf menggunakan spasi ganda. Untuk mengatur margin
    di Microsoft Word; pilih tab Home, di bagian Paragraf klik Line Spacing.
    </p>
        <p>
    Semua jarak antar paragraf menggunakan spasi ganda. Untuk mengatur margin
    di Microsoft Word; pilih tab Home, di bagian Paragraf klik Line Spacing.
    </p>
        <p>
    Semua jarak antar paragraf menggunakan spasi ganda. Untuk mengatur margin
    di Microsoft Word; pilih tab Home, di bagian Paragraf klik Line Spacing.
    </p>
        <p>
    Semua jarak antar paragraf menggunakan spasi ganda. Untuk mengatur margin
    di Microsoft Word; pilih tab Home, di bagian Paragraf klik Line Spacing.
    </p>
    </div>
    <div id="tuf">
    <b>Tulisan dan ukuran font</b><br />
    <p>
    Semua teks menggunakan font Times New Roman, ukuran 12 point (pt). Untuk
    sumber buku dalam penulisan judul gambar dan tabel ukuran font 10 pt.
    </p>
        <p>
    Semua teks menggunakan font Times New Roman, ukuran 12 point (pt). Untuk
    sumber buku dalam penulisan judul gambar dan tabel ukuran font 10 pt.
    </p>
        <p>
    Semua teks menggunakan font Times New Roman, ukuran 12 point (pt). Untuk
    sumber buku dalam penulisan judul gambar dan tabel ukuran font 10 pt.
    </p>
        <p>
    Semua teks menggunakan font Times New Roman, ukuran 12 point (pt). Untuk
    sumber buku dalam penulisan judul gambar dan tabel ukuran font 10 pt.
    </p>
        <p>
    Semua teks menggunakan font Times New Roman, ukuran 12 point (pt). Untuk
    sumber buku dalam penulisan judul gambar dan tabel ukuran font 10 pt.
    </p>
    </div>
    <hr />
    <a href="#daftar_isi">Kembali ke atas (Daftar isi)</a>
    </div>
    </body>
</html>

Silahkan simpan skrip fragmen.html di atas dan klik salah satu bagian daftar isi untuk melihat cara kerjanya.

Referensi tulisan:

a; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 09 April 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Wednesday, January 21, 2015

Tag em HTML

Tag <em> digunakan untuk menandai penekanan kata dalam kalimat. Dalam bahasa Inggris atau bahasa Indonesia penekanan kata bertujuan untuk memberi tahu pembaca bahwa kata-kata itu perlu diperhatikan sehingga pembaca mudah memahami. Tag <em> menghasilkan tulisan miring.

Contoh: em.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag em download</title>
        </head>
    <body>
        Anisah sangat cantik, <em>apalagi</em> saat ia mengenakan hijab.
        <br />
        Anak itu hidupnya sangat <em>sederhana</em> padahal orang tuanya <em>kaya raya</em>.
    </body>
</html>

Output:

Tampilan di Firefox.

<i> vs <em>
Tag <i> dan <em> secara hasil visual terlihat sama, yaitu menampilkan tulisan miring. Tetapi berdasrkan makna berbeda. Tag <em> lebih kepada penekanan kata tetapi tag <i> tidak memperhatikan penekanan kata seperti hanya menandai kata asing, nama buku, judul film.

Referensi tulisan:

<em>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 22 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Penekanan Pada Kalimat Efektif; ditulis oleh: Fauziah Husnaa, fa-husnaa.blogspot.com, diakses 22 Januari 2015.

Monday, January 19, 2015

Tag br HTML

Tag <br> atau breakline digunakan untuk baris baru. Tag <br> menampilkan hasil yang sama apakah pakai penutup atau tidak, <br> sama dengan <br />. Jika membuat tulisan per paragraf maka Anda bisa menggunakan tag <p> saja, karena setiap tag <p>...</p> membentuk jarak (vertikal). Namun, jika tetap menggunakan tag <br> maka gunakan 2 sekaligus (2 tag <br> setara 1 tag <p>).

Contoh tag <br>: br.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag br download</title>
        </head>
    <body>
    Bob Sadino: Wirausaha itu bukan diperbincangkan,<br />
    tetapi langsung dipraktekkan.
   
    <p>Tag p digunakan untuk membuat paragraf. Setiap paragraf
    mempunyai beberapa kalimat. Setiap kalimat mempunyai beberapa
    kata. Satu paragraf membentuk satu opini atau lebih.
    </p>
    </body>
</html>

Output:

Output br dan tag p.

Penulisan kode html apakah sebaris atau tidak, tidak mempengaruhi hasil tampilan di browser.

    Bob Sadino: Wirausaha itu bukan diperbincangkan,<br />
    tetapi langsung dipraktekkan.

Akan sama hasilnya dengan:

Bob Sadino: Wirausaha itu bukan diperbincangkan,<br /> tetapi langsung dipraktekkan.

Namun untuk mempermudah pemahaman maka kode html diketik per satu kode dalam satu baris.

Monday, January 12, 2015

Tag a download HTML5

Pada tag <a> HTML5 terdapat atribut dowload yang berfungsi sebagai pemberian nama file saat file hendak di dowload. Seperti diketahui, umumnya apa nama file yang berada di server itulah nama file yang Anda download, tetapi dengan atribut download Anda bisa memodifikasinya.

Contohnya, mendownload file txt dari server tipspengetahuan.com bernama note.txt. Nama awal 'note' kita ganti dengan 'File note'. Maka penulisan kodenya seperti berikut:


<a href="note.txt" download="file note">Download note.</a>

Kode di atas hanya demo. Kode ini seharusnya dicoba di web server (seperti di hosting tipspengetahuan.com), yang perlu Anda pahami adalah konsepnya.

Demo
Untuk menguji efek kode di atas, silahkan akses link: http://www.tipspengetahuan.com/membuat-tag-posting-dengan-htaccess-php-mysql-web-591.html

Di bawah gambar ada tulisan Download note klik link tersebut di samping 'Ilustrasi tagging'. Nama awalnya note.txt berubah menjadi file note saat di download.

Link download note.

Nama file berubah menjadi file note.

Selamat mencoba!

Referensi tulisan:

<a>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 13 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
HTML5 download Attribute; ditulis oleh: David Walsh, davidwalsh.name, diakses 13 Januari 2015.

Thursday, January 8, 2015

Tag var HTML

Tag <var> atau variable digunakan untuk menuliskan suatu variabel, contohnya dalam perhitungan matematika. Contoh; rumus persamaan garis lurus: y = mx + c. Output tag <var> berupa tulisan miring.

Format penulisan: <var>...</var>.

Contoh skrip: var.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag var html</title>
        </head>
    <body>
        <p>Rumus persamaan garis lurus: <var>y</var> = <var>mx</var> + <var>c</var></p>
    </body>
</html>

Output:

Tampilan tag var di Firefox.

Referensi tulisan:

<var>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 09 Januari 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Tuesday, January 6, 2015

Tag UL (Nested) HTML

Tag <ul> digunakan untuk membuat daftar tak berurutan. Artinya daftar item tidak memperhatikan urutan layaknya penomoran (angka) melainkan item-item diberi tanda bullet, circle dan square. Bullet berupa lingkaran hitam kecil penuh, circle berupa lingkaran kecil dengan warna putih ditengahnya dan square dalam bentuk persegi kecil. Jika Anda tidak menentukan salah satunya maka style bullet yang dipakai.

Daftar item-item diletakkan dalam tag <li> yang telah didahuli tag <ul>. Berikut contoh dasarnya: ul.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag ul (dasar) html</title>
        </head>
    <body>
        <p>Daftar buah-buahan:</p>
        <ul>
            <li>Apel</li>
            <li>Semangka</li>
            <li>Pisang</li>
            <li>Nangka</li>
            <li>Jambu</li>
        </ul>
    </body>
</html>

Output:

Tampilan hasil tag ul di Firefox.

Jika Anda menggunakan style circle atau square yaitu dengan mendeklarasikannya dengan list-style menggunakan css, misalnya dengan teknik secara langsung seperti berikut: ul2.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag ul (dasar) html</title>
        </head>
    <body>
        <p>Daftar buah-buahan:</p>
        <ul>
            <li style="list-style: square">Apel</li>
            <li style="list-style: square">Semangka</li>
            <li>Pisang</li>
            <li>Nangka</li>
            <li style="list-style: circle">Jambu</li>
        </ul>
    </body>
</html>

Output:

Tampilan tag ul dengan list-style.

Nested UL (UL berulang).
Nested UL adalah ketika daftar item mempunyai daftar item lagi, dengan kata lain di dalam tag <li> ada tag <ul> dan tag <li>. Anda bisa membuat UL berulang sebanyak apapun. Contohnya daftar item apel terbagi dari beberapa varietas apel, misalnya Red Delicious, Golden Delicious, Fuji, Gala dan Braeburns Washington. Yang perlu Anda pahami adalah setiap tag ada penutupnya dan harus tepat peletakannya. Contoh: ul3.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag ul (dasar) html</title>
        </head>
    <body>
        <p>Daftar buah-buahan:</p>
        <ul>
            <li style="list-style: square">Apel
                <ul>
                    <li>Red Delicious</li>
                    <li>Golden Delicious</li>
                    <li>Fuji</li>
                    <li>Gala</li>
                    <li>Braeburns Washington</li>
                </ul>
            </li>
           
            <li style="list-style: square">Semangka
                <ul>
                    <li>Semangka merah</li>
                    <li>Semangka kuning</li>
                    <li>Semangka busuk</li>
                </ul>
            </li>
           
            <li>Pisang</li>
            <li>Nangka</li>
           
            <li style="list-style: circle">Jambu
                <ul>
                    <li>Jambu monyet</li>
                   
                    <li>Jambu biji
                        <ul>
                            <li>Varietas unggul</li>
                            <li>Varietas biasa</li>
                        </ul>
                    </li>
                   
                    <li>Jambu merah</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

Output:

Output tag ul nested.

Referensi tulisan:

<ul>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 07 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Jenis Apel; ditulis oleh: 100buah.wordpress.com, 100buah.wordpress.com, diakses 07 Januari 2015.

Sunday, January 4, 2015

Tag textarea HTML5

Tag <textarea> digunakan untuk menampung teks multi baris. Pada HTML5 <textarea> ditambahkan fitur-fitur di antaranya autofocus, maxlength dan minlength. Fitur-fitur ini membuat texarea tak hanya berfungsi sebagai media penampung teks saja tetapi sudah lebih interaktif.

Atribut dasar <textarea> adalah:

cols: lebar rata-rata karakter di dalam textarea, diisi dengan nilai integer. Nilai defaultnya 20.
rows: tinggi rata-rata karakter di dalam textarea.
name: nama variabel textarea.
disabled: textarea dinonaktifkan.
readonly: teks yang ada di dalam textarea tidak dapat diedit, hanya ditampilkan saja.

Contoh: textarea.html dengan name=deskripsi, cols=22, rows=10 dan disertai teks (bawaan), bisanya kosong.


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag textarea html</title>
            <style type="text/css">
            </style>
        </head>
    <body>
        <textarea name="deskripsi" cols="22" rows="10">Ini teks di dalam textarea, jika tidak ada ini dikosongkan.</textarea>
    </body>
</html>

Output:

Output di Firefox.

Contoh 2: textarea2.html dengan atribut readonly.


<!DOCTYPE HTML>

    <html>

        <head>

            <title>Contoh tag textarea html</title>

            <style type="text/css">

            </style>

        </head>

    <body>

        <textarea name="deskripsi" cols="22" rows="10" readonly>Ini teks di dalam textarea, jika tidak ada ini dikosongkan.</textarea>

    </body>

</html>

Untuk properti disabled sama seperti contoh di atas ganti readonly dengan disabled.

Textarea HTML5
Beberapa atribut textarea pada HTML5 adalah:

autofocus: posisi kursor fokus pada textarea padanya.
maxlength: membatasi (jumlah) karakter maksimal pada textarea, diisi dengan angka bulat (integer).
minlength: membatasi (jumlah) karakter minimal pada textarea,diisi dengan angka bulat (integer).
required: mengharuskan textarea harus diisi, tidak boleh kosong. Jika kosong timbul warna latar merah jambu sebagai tanda peringatan harus diisi.
placeholder: teks penanda sebagai informasi pengisian textarea. Teks placeholder akan hilang ketika user mengisi (mengetik) teks di textarea.

Catatan: atribut-atribut di atas tidak harus semua dideklarasikan, sesuaikan dengan kebutuhan saja.

Contoh: textarea3.html dengan atribut autofocus, minlength dan required.


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag textarea html</title>
            <style type="text/css">
            </style>
        </head>
    <body>
        <textarea name="deskripsi" cols="22" rows="10">Ini teks di dalam textarea, jika tidak ada ini dikosongkan.</textarea>
        <textarea name="deskripsi" cols="22" rows="10" maxlength="200" autofocus required>Ini teks di dalam textarea kedua.</textarea>
    </body>
</html>

Untuk atribut minlength sama dengan maxlength, bila perlu tinggal ganti maxlength dengan minlength.

Contoh textarea4.html dengan atribut placeholder dengan pesan: "Isi dengan data sebenarnya" yang mengharuskan user mengisi dengan data valid (tidak asal isi).


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag textarea html</title>
            <style type="text/css">
            </style>
        </head>
    <body>
        <textarea name="deskripsi" cols="22" rows="10" maxlength="200" placeholder="Isi dengan data sebenarnya" required></textarea>
    </body>
</html>

Selesai. Selamat mencoba!

Referensi tulisan:

textarea; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 04 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

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:

Playit Vertical Align CSS; ditulis oleh: W3Schools.com, w3schools.com, diakses 01 Januari 2015.
E=mc²; ditulis oleh: Kontributor Wikipedia, id.wikipedia.org, diakses 01 Januari 2015.

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:

<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.

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:

<strong>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 25 Desember 2014.
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.

Sunday, December 21, 2014

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:

<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.

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:

; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 19 Desember 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

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:

<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.

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:

<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.

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:

<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.

Thursday, December 4, 2014

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:

<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.

Monday, December 1, 2014

Pilihan "Kacang kedelai" dalam posisi terpilih.

Referensi tulisan:

<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.

Wednesday, November 26, 2014

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:

<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.

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:

<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.

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:

<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.

Thursday, April 9, 2015

Contoh Fragmen URL

Wednesday, January 21, 2015

Tag em HTML

Monday, January 19, 2015

Tag br HTML

Monday, January 12, 2015

Tag a download HTML5

Thursday, January 8, 2015

Tag var HTML

Tuesday, January 6, 2015

Tag UL (Nested) HTML

Sunday, January 4, 2015

Tag textarea HTML5

Wednesday, December 31, 2014

Tag sup HTML

Sunday, December 28, 2014

Tag sub HTML

Thursday, December 25, 2014

Tag strong HTML

Sunday, December 21, 2014

Tag span HTML

Thursday, December 18, 2014

Tag small HTML

Monday, December 15, 2014

Tag script HTML

Thursday, December 11, 2014

Tag samp HTML

Monday, December 8, 2014

Tag q HTML

Thursday, December 4, 2014

Tag pre HTML

Monday, December 1, 2014

Tag option HTML

Wednesday, November 26, 2014

Tag optgroup HTML

Sunday, November 23, 2014

Tag noscript HTML

Friday, November 7, 2014

Tag kbd HTML