tahukah anda tanpa html(Hyper Text Markup Language) sebuah halaman website tidak dapat terbentuk dan tanpa html pula style css tidak dapat berfungsi, setidaknya itu yang terjadi sampai detik ini(untuk kedepannya saya tidak tahu).
sebenarnya aku pengen banget ngebahas semua tentang html, akan tetapi yang saya pahami hanya html 4, sedangkan untuk kedepannya sebagian atribut di html 4 tidak akan berfungsi di html 5, ditambah lagi html 5 belum support di semua browser(saya sarankan ganti browser anda dengan browser versi terbaru).

apa perbedaan antara html 4 dan 5?

  • sebagian tag pada html 4 tidak berfungsi lagi di html 5, sedangkan html 5 ada beberapa tag yang di tambah
  • intinya ialah hanya terletak pada pemambahan dan pengurangan tag. Oia satu lagi, dalam penulisan html sangat disarankan menggunakan huruf kecil
  • sobat tidak perlu bingung sebab ketentuan dan cara penulisan html 4 dan 5 tetap sama, berikut adalah aturan penulisan html
  • pada penulisan html selalu diapit oleh dua karakter yaituh buka kurung siku (<)dan tutup kurung siku (>)
  • dalam penulisan html selalu berpasangan dimana tag penutup ditambahkan karakter /(garis miring)
contoh

<a> dan </a>

<div>dan </div>

<font> dan </font>

<b> dan </b> dan lain sebagainya

  • jika dalam suatu tag terdapat beberapa tag lagi, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan
contoh yang benar

<div><b> xxx </b> </div>

<table><th> xxx </th> </table>

<b><a> xxx </a></b>

contoh yang salah

<div><b> xxx </div></b>

<table><th> xxx </table></th>

<b><a> xxx </b></a>

  • dalam dukument html lengkap, penulisannya harus diawali dengan <html> dan berakhiran </html>(jika hanya menambah widget abaikan aturan ini)
  • pada penulisan atribut, anda harus menambahkan karakter =(sama dengan) dan untuk nilai diapit oleh “(petik dua)
  • setiap atribut dipisahkan oleh (apasi)

berikut adalah cara membuat link html

  • penulisan html diawali dengan karakter <
  • kemudian masukkan karakter a yang diikuti oleh beberapa atribut
  • ketikkan atribut href kemudian = dan "
  • setelah itu masukkan urlnya misal http://www.indaam.com di ikuti dengan karakter petik dua "
  • anda dapat menambah atribut lagi diantaranya, title, target, rel dll
  • setelah menambah beberapa atribut jangan lupa tambahkan karakter tutup kurung siku >
  • berikutnya ketik karakter yang akan tampil pada browser, tentunya di sesuaikan dengan url, tadi kan http://www.indaam.com maka sebaiknya ketik indaam.com/sebenarnya anda bebas tulis apa
  • berikutnya ketik lagi buka kurung siku <
  • kemudian garis miring /
  • trus ketik lagi karakter a (tag html selalu berpasangan)
  • trakhir tambahkan karakter tutup kurung siku >
  • maka jadinya akan seperti ini

<a href="http://www.indaam.com">indaam.com</a>

  • sedangkan tampilan pada browser seperti ini indaam.com
  • href adalah salah satu atribut dalam html
  • http://www.indaam.com adalah value

berikut adalah cara membuat/menampilkan gambar

  • diawali dengan buka kurung siku <
  • kemudian masukkan tag img
  • masukkan atribut src diikuti dengan =(sama dengan) dan "(petik dua) tambahkan url lokasi gambar(extensi filenya antara lain jpg, png, gif)
  • setelah memasukkan url gambar jangan lupa tambahkan karater "(petik dua)
  • anda dapat menambah beberapa atribut lagi antara lain
  • width="150px"(ukuran lebar gambar dalam pixel)
  • height="140px"(ukuran tinggi gambar dalam pixex)
  • alt="google"(keterangan gambar)
  • setelah menambahkan beberapa atribut jangan lupa tambahkan karakter > (tutup kurung siku)
  • berikutnya ketik </img>(sebagai penutup)

khusus

<img xxx="xxx" >(jika kosong)</img> dapat disingkat menjadi seperti ini <img xxx="xxx" />

contoh

<img src="http://sites.google.com/site/indamsite/indamwordpress/indampavicon.jpg" width="100px" height="100px" alt="pavicon lama indaam.com"/>

maka tampilanya seperti ini

pavicon lama indaam.com

contoh penulisan dua tag html

  • tadi kita telah membuat link dan gambar dengan html,
  • sekarang kita akan mengabungkan kedua tag tadi
  • tadi kode link seperti ini

<a href="http://www.indaam.com">indaam.com</a>

  • dimana indaam.com adalah tampilan pada browser
  • sedangkan kode gambar seperti ini

<img src="http://sites.google.com/site/indamsite/indamwordpress/indampavicon.jpg" width="100px" height="100px" alt="pavicon lama indaam.com"/>

  • karna text indaam.com adalah tampilan pada browser, gantikan saja text indaam.com dengan kode gambar tadi
  • seperti ini

<a href="http://www.indaam.com"><img src="http://sites.google.com/site/indamsite/indamwordpress/indampavicon.jpg" width="100px" height="100px" alt="pavicon lama indaam.com"/></a>

  • tampilan pada browser akan seperti ini

pavicon lama indaam.com

  • nah gimana, mudah kan html itu
  • yang terpenting adalah mengerti aturan penulisan html dan penampatan tag
shared to : facebook | twitter

tentang penulis

indamindam

Indam, seorang web designer, wordpress theme development, -
blogger dan penulis yang ingin terus belajar! read more about indam ⇉


Indam on | facebook | twitter

Related post

Berlangganan via FeedBurner

Sorry, formulir komentar sedang dalam perbaikan