Blog Business Review Gadget Games General Highlight Humour Internet Mailbox Opinion Tips&Tricks Tutorial

Belajar HTML lebih lanjut – Bagian 2



Author: DHINATACOM
Posted: 13.08.2008 at 10:14.
Last Updated: 13.08.2008 at 00:32.
9 Komentar.

Artikel sebelumnya kita telah membahas cara penulisan tag HTML, struktur HTML, dan beberapa tag standar HTML serta cara penggunaannya. Artikel ini masih kelanjutan artikel tersebut. Materi yang dibahas adalah berbagai format HTML untuk teks, link, serta gambar. Seperti biasa, tanpa banyak basa-basi lagi.. mari kita mulai..

Berbagai Format Text

Tag Keterangan
<b> … </b> Cetak tebal
<i> … </i> Cetak miring
<u> … </u> Garis bawah
<strike> … </strike> Garis tengah
<center> … </center> Rata tengah
<big> … </big> Ukuran text menjadi lebih besar
<small> … </small> Ukuran text menjadi lebih kecil
<sup> … </sup> Membuat efek Superscript
<sub> … </sub> Membuat efek Subscript
<blockquote> … </blockquote> Membuat indentasi paragraf

Semua tag diatas harus diletakkan diantara tag <body> ... </body>.

Membuat Link

Hyperlink yang sering juga disingkat menjadi link menggunakan anchor tag <a> untuk menentukan hyperlink dalam dokumen HTML. Cara penulisannya seperti berikut.

  1. <a href="URL tujuan" target="target"> Tulisan/Gambar </a>

URL tujuan harus ditulis lengkap beserta protokol yang digunakan.
Misal http://www.dhinata.com/.

Target menentukan apakah sebuah halaman web tujuan perlu dibuka dalam browser baru atau tidak. Jika ingin membuka link tanpa harus menutup halaman yang sedang dibuka, maka target yang harus digunakan adalah _blank. Sebagai contoh jika ingin membuat link untuk dhinata.com dengan menggunakan target blank, skripnya sebagai berikut.

  1. <a href="http://www.dhinata.com" target="_blank"> Tulisan/Gambar </a>

Menampilkan Gambar

Cukup dengan 1 baris skrip saja Anda sudah bisa menampilkan gambar. Cara penulisannya adalah sebagai berikut.

  1. <img src="URL gambar"/>

Ukuran gambar seperti tinggi dan lebar bisa diatur sesuai dengan keinginan. Cukup dengan menambahkan properti width="value" dan height="value". Misalnya jika ada sebuah gambar Jpeg berukuran 800×600 pixel yang ingin ditampilkan dengan ukuran 200×150 pixel, penulisan tag-nya seperti ini.

  1. <img src="namagambar.jpg" width="200" height="150"/>

Sebenarnya masih banyak lagi tag HTML dan properti yang belum dibahas dalam artikel ini dan kemarin. Tujuannya supaya perlahan-lahan Anda lebih dapat memahami ketimbang lebih banyak materi malah jadi bingung. Bagi yang merasa masih kurang, silahkan download ebook berikut ini yang menurut saya pribadi sudah lengkap kok materinya. Malah ada bahasan tentang CSS lagi..

Download Ebook HTML dan CSS

Besok kita akan bahas CSS sesuai dengan kebutuhan aja.. selamat belajar ide



komentar pembaca DHINATACOM

  1. tutik says:

    bgs bngt artikelny. q bth artikel ttg html spt in, bwt modul u ngjr ttg HTML. cpt dlnjutn dong artikelny, bwt tmbhn modul sy. thanks y

  2. agakoi says:

    mimpi maksih baget bgi2 ilmux moga diberi amal kebajikan oleh tuhan

  3. Maryati says:

    makasih banget ya, ini sangat cocok dengan materi pada sekolah kami. Sekali lagi terima kasih.

  4. xcasperx says:

    tutorialnya bagus malu boleh dong minta diajarin bikin blog yang bagus. malu

  5. Anis says:

    HTML memang memungkinan qt mengubah ukuran (tingi/lebar)gambar dengan menambahkan property “height” dan “width”. Tp sangat disarankan untuk tidak melakukannya! Mengubah ukuran gambar sebaiknya tetap menggunakan image editor seperti Photoshop atau Gimp.

    salam kenal!

  6. azhila says:

    sangat bermanfaat. mksi byk infonya
    ayuk

D . ( . P . diem . piss . kaget . nocomment . malu . mimpi . licik . ide . yess . tipi . tendang . sombong . sinchan . sial . senam . nyerah . ngiler . nggaya . nangis . musik . males . love . konslet . kembar . gatau . damn . bye . ayuk . belajar . tutupkuping . tolong . terharu . strees . serang . sendiri . ngakak . mimisan . mati . mantap . kesel . keren . kartukuning . kartumerah . fiuhhh . cendol . salaman . recseller . maho . marah . najis . kiss . bingung . berduka . takut . ngacir . ngacir2 . janganribut . capedeh .

Petunjuk komentar:
1. Tolong tulis komentar yang berhubungan dengan topik artikel. Jangan mengirim SPAM!
2. Komentar yang tidak berhubungan atau SPAM akan dihapus.
3. Klik gambar emoticon diatas untuk menampilkannya pada komentar Anda.

Catatan: Beberapa emoticon yang ditampilkan merupakan hak cipta dari Kaskus.

(required)

home DHINATACOM


Home Article Index Contact Disclaimer F.A.Q


langganan majalah DHINATACOM
Artikel Terbaru

Membersihkan Jamur di Dinding Apartemen

3 Hal Penting Yang Menentukan Kecantikan Pada Rumah Minimalis

Disclaimer . Contact Info . Privacy Policy . F A Q . Servis Komputer Tangerang
DHINATA.COM © 2008-2017 oleh Yoki DHINATA. Theme: D-Magz 3.1
Desain Tema oleh Yoki DHINATA. My Copyright Is Not Your Right To Copy.
Powered by WordPress. Hak Cipta Dilindungi.
home DHINATACOM