Latest Article

Promotion Ads

Buat Website Murah

Featured Article

Popular Article

Menghias Tulisan Text Dengan Tag HTML

Pada Latihan kali ini, kita akan mempelajari beberapa tag yang mudah diingat. Tag-tag ini berfungsi untuk mengubah tipe huruf yaitu :

  1. Membuat Text Menjadi Tebal {Bold}
  2. Membuat Text Menjadi Miring {Italic}
  3. Membuat Text Di Garis Bawahi {Underline}
  4. Membuat Text Di Garis Tengah {Strikethrough}
  5. Membuat Text Berada Di Atas {Superscript}
  6. Membuat Text Berada Di Bawah {Subscript}

Cara Penggunaannya

Pertama-tama hafalkan dulu fungsi dan cara penggunaannya. Di Bawah ini saya buat lagi daftar cara penggunaannya.

  1. Membuat Text Menjadi Tebal {<b> atau <strong>}
  2. Membuat Text Menjadi Miring {<i> atau <em>}
  3. Membuat Text Di Garis Bawahi {<u> atau <ins>}
  4. Membuat Text Di Garis Tengah {<del> atau <strike>}
  5. Membuat Text Berada Di Atas {<sup>}
  6. Membuat Text Berada Di Bawah {<sub>}

Hal yang harus kita ingat dari catatan yang sudah saya publish sebelumnya adalah “Kita harus menutup tag HTML dan jika menggunakan XHTML penyusunan awal dan akhir tag harus berurutan”. Contoh sederhananya gini, Misalkan kita mau membuat huruf tebal maka kita harus menulis tag pembuka yakni <strong> dan harus di akhiri dengan tag penutupnya dengan hanya menambahkan slash seperti </strong>. Penyusunan tag harus Rapih jika kita menggunakan XHTML, Contohnya adalah :

Penulisan Yang Salah
<strong>Sepertinya <ins>Belajar HTML</strong> itu Mudah Sekali</ins>
Penulisan Yang Benar
<strong>Sepertinya <ins>Belajar HTML</ins> itu Mudah Sekali</strong>

Contoh Penerapan Dalam Artikel

Oke, Buka Aplikasi Notepad, gEdit, dan semacamnya. Lalu coba ketik secara manual jangan kopi paste kode di bawah ini :

<html>
<head>
<title>Ini Adalah Tulisan Standard</title>
</head>
<body bgcolor="#fcf" text="#000">
Banyak Tag HTML untuk merubah suatu jenis tulisan 
dan di antaranya ialah tulisan tebal, tulisan miring, 
tulisan bergaris bawah, tulisan bergaris tengah, 
tulisan Berada Di Atasdan tulisan Berada Di Atas. 
Kita Bisa Membuat 2 tipe huruf dipadukan misalnya tulisan tebal 
dan miring, tulisan tebal dan bergaris bawah atau tulisan miring 
dan bergaris bawah. Bahkan Kita Juga Bisa Menggabungkan sekaligus 
menjadi tulisan bergaris tengah, tulisan tebal, miring dan bergaris bawah. 
</body>
</html>

Kemudian simpan tulisan tadi dengan nama tulisan-biasa.html lalu buka dan perhatikanlah tulidan tersebut. Tulisan tersebut masih dalam kondisi yang sama alias tidak ada huruf tebal, miring, dan lain-lain. Disini kita akan coba merubah tulisan tersebut agar di garis bawahi, di tebalkan, dan lain sebagainya.

Buka Notepad Lagi, Lalu Perhatikan Dan Ketikkan Kode yang ada di bawah ini :

<html>
<head>
<title>Ini Adalah Tulisan Modifikasi</title>
</head>
<body bgcolor="#fcf" text="#000">
Banyak Tag <sup>HTML</sup> untuk merubah suatu jenis tulisan dan 
di antaranya ialah <strong>tulisan tebal</strong>, 
<em>tulisan miring</em>, <ins>tulisan bergaris bawah</ins>, 
<del>tulisan bergaris tengah</del>, <sup>tulisan Berada Di Atas</sup>
dan <sub>tulisan Berada Di Atas</sub>.
Kita Bisa Membuat 2 tipe huruf dipadukan misalnya 
<strong><em>tulisan tebal dan miring</em></strong>, 
<ins><strong>tulisan tebal dan 
bergaris bawah</strong></ins> atau 
<em><ins>tulisan miring dan bergaris bawah</ins></em>.
Bahkan Kita Juga Bisa Menggabungkan sekaligus
menjadi tulisan <strong><em><del><ins>bergaris tengah, 
tulisan tebal, miring dan bergaris bawah</ins></del></em></strong>.
</body>
</html>

Simpan dan Lihatlah Perbedaannya. Anda juga dapat melihat perbedaannya di Halaman Tulisan Standard Dan Halaman Tulisan Modifikasi. Coba anda perhatikan tulisan Output Browsernya dan lihat juga Source Codenya Dengan CTRL + U. Usahakan untuk menggunakan Editor Notepad dan jangan memakai Editor Seperti Macromedia Dreamweaver. Karena jika anda menggunakan Editor Notepad dan menuliskannya secara manual, itu akan membuat anda lebih cepat mengerti tentang Tag HTML.

Created By :        Date : 11 - July - 2011

Jasa Pembuatan Website

18 Comments

  1. Jaka @psdesain.netReply

    perbedaan b/strong, i/em, u/ins, del/strike apaan mas?

    Satu lagi, cara bedain HTML dan XHTML gimana?

    Beritahu saya jika komentar ini dibalas, thanks :)

  2. Nurul ImamReply

    && Jaka @psdesain.net : Perbedaannya klo strong, em, ins, del, itu sifatnya menegaskan. Klo Outputnya sih sama aja. Ini Berefek SEO untuk mesin pencari mas.

    XHTML itu EXtensible HyperText Markup Language. XHTML itu versi bersihnya HTML karena ketatnya peraturan penulisan tag HTML, Dan XHTML merupakan Rekomendasi W3C.

  3. Jaka @psdesain.netReply

    Oww,, berarti pemakaian strong, em, ins, del, itu lebih baik ya dimata SEO (search engine)?

    Thanks tanggapannya. :)

  4. Nurul ImamReply

    && Jaka @psdesain.net : Tapi itu menurut deskripsi dari W3C aja. Saya sih ga terlalu memperhatikan mas.

  5. Jaka @psdesain.netReply

    Hmmm..
    Begitu ya..

    Saya juga sekarang sering berada di tab HTML jika mau posting sesuatu. Itu karena masukan-masukan develop pada postingan saya : psdesain.net/visual-editor-wordpress-yang-tidak-nampak-muncul[dot]html. dan sekarang saya dapat ilmu baru disini, thanks ini menjadi masukan besar buat saya :)

  6. Nurul ImamReply

    && Jaka @psdesain.net : Saya juga dapat banyak masukkan dari blog kamu tentang Photoshop. Maklum saya masih awam tentang Photoshop. Intinya kita saling berbagi kan ? hehehhe

  7. WidodoReply

    untuk sementara belum berani mas,
    takut kacau ntr lw ngedit sendiri, , :)
    perlu pembimbing ni, ntr lw tambh kacau bhya. . .

  8. Nurul ImamReply

    && Widodo : Jangan di coba lewat blog yang udah Online mas, Mending di coba lewat Dekstop aja.

  9. WidodoReply

    wah. . tengkyu-tengkyu mas, :)
    moga bisa ni,
    ntr tek googling dulu, mbil cari referensinya . .

  10. WidodoReply

    duh mpe lupa, di depanku kan udah ada. . hehe_
    maklum mas, udah jarang tidur sekarang, cz blogging terus. . . :)

  11. FIKRI SHAREReply

    berhubung lagi ngomongin HTML saya mau tanya nih sob, gimana y cara buat hurum tm, atau R di atas judul blog. contohnya FIKRI SHARE dan ada tm di atas hurus E terakhir.

  12. Nurul ImamReply

    && Widodo : Wuih rajin blogging yah ? Hebat dah… Saya malah dikit banget waktu buat blogging

  13. Nurul ImamReply

    && FIKRI SHARE : Maksudnya FIKRI SHARE ™ ® / FIKRI SHARE ™ ®

  14. FIKRI SHAREReply

    y gan maksudnya itu, ma’af y gan kl saya salah kamar :) coz saya belum paham n pengen tahu caranya..

  15. Nurul ImamReply

    && FIKRI SHARE : Sekarang udah tau kan ?

  16. Rahmat Irfan DenasReply

    boleh nambah gak, selain tag <i> dan <em> . tag <cite> juga bisa digunakan untuk membuat tulisan miring..

  17. R Bagus tri pReply

    ass mau tnya gan, sya ini seorg pemula yg bru bljr mulai dasar banget,sudah 1 minggu sya bljar tentang html agan yg terhormat n sya belum ada laptop,sya bljar smntara diwarnet gan,ketika saya mencoba membuat contoh link di notepad,dan lalu setelah selesai mengetik yang dibawah ini,apa yg harus sya lakukan gan soalnya menurut contoh setelah selesai mengetik,harus di klik tp alamat link ini ga bs di klik gan begitu pula waktu sya mmbuatkode html….
    mohon bantuan penjelasanya gan,,sebagai pemula saya butuh ssekali bantuan dr agan2 sekalian

    • Nurul ImamReply

      Linknya di isi dengan file html lain

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>