Pemahaman dasar HTML

tahukah anda tanpa html(Hyper Text Markup Language) sebuah halaman website tidak dapat terbentuk dan tanpa html pula

Kita tidak bisa menjadi bijaksana dengan kebijaksanaan orang lain, tapi kita bisa berpengetahuan dengan pengetahuan orang lain. Michel De Montaigne

tahukah anda tanpa html(Hyper Text Markup Language) sebuah halaman website tidak dapat terbentuk dan tanpa html pula

Last Modif at July 7th, 2011

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.net 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.net maka sebaiknya ketik indaam.net/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.net">indaam.net</a>

  • sedangkan tampilan pada browser seperti ini indaam.net
  • href adalah salah satu atribut dalam html
  • http://www.indaam.net 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.net"/>

maka tampilanya seperti ini

pavicon lama indaam.net

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.net">indaam.net</a>

  • dimana indaam.net 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.net"/>

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

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

  • tampilan pada browser akan seperti ini

pavicon lama indaam.net

  • nah gimana, mudah kan html itu
  • yang terpenting adalah mengerti aturan penulisan html dan penampatan tag

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

One thought on “Pemahaman dasar HTML”

  1. saya masih bingung boss..
    maklum newbie nie
    tapi trimakasih ilmunya bisa buat tambah referensi

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=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-