Dasar-Dasar HTML

Kode Dasar HTML Bag. 1

Kode dasar HTML ini pasti terdapat di semua halaman web. Jadi, kode dasar inilah yang harus Anda kuasai terlebih dahulu.

Ini dia kode dasar tersebut:

<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

Jangan bingung melihat kode-kode di atas, karena akan saya jelaskan satu-persatu.

Setiap kode punya pasangan, dan setiap pasangan saya beri warna yang sama.. Karena itu, coba mempelajarinya dengan cara melihat dan membandingkan kode dengan warna yang berbeda-beda tersebut.

Berikut penjelasannya:

1. <html>

Ini adalah kode atau tag yang terdapat di bagian atas dari semua halaman web.

(memang, pada halaman web masa kini, kadang-kadang ada juga kode tertentu yang terdapat sebelum kode HTML. Tapi ini kita abaikan dulu ya, berhubung ini masih pelajaran tingkat dasar)

Nah, setiap tag itu pasti ada tag penutupnya
(memang ada juga tag yang tak perlu pakai penutup, tapi ini akan kita pelajari nanti, ya....)

Maka, tag penutup dari <html> adalah </html>

PERBEDAANNYA:
Pada setiap tag penutup, setelah "<" pasti ada tanda "/".



2. <head>

Ini boleh dibilang sebagai "dapurnya halaman web". Kenapa? Sebab semua kode yang diletakkan di antara tag dan tidak akan terlihat di halaman web. Di bagian HEAD ini, kita bisa melakukan berbagai macam pengaturan, seperti:

- meletakkan kode javascript
- meletakkan kode css
- meletakkan meta tag
- dan seterusnya

3. <title>
Ini adalah tag untuk meletakkan JUDUL halaman web. Ingat, judul halaman web tidak sama dengan nama file.

Sebagai contoh, coba lihat ke bagian paling atas (pojok kiri) dari halaman ini. Di situ tertulis:

Asian Brainers Forum :: Lihat Topik - Panduan Dasar-dasar HTML (Ingat: HMTL Itu Sangat Mudah!)

Nah, itu adalah title atau judul dari halaman ini.

Kebetulan, pada forum diskusi AB ini, title di atas dibuat secara otomatis oleh sebuah script. Namun bila dibuat secara manual, maka penulisannya sebagai berikut:

<title>Asian Brainers Forum :: Lihat Topik - Panduan Dasar-dasar HTML (Ingat: HMTL Itu Sangat Mudah!)</title>

Nah, gampang, bukan?

4. <body>

Nah, body ini adalah tempat untuk meletakkan SEMUA HAL yang hendak kita tampilkan di halaman web kita.

Bila kode-kode lainnya adalah "urusan belakang layar", maka BODY ini adalah "urusan di depan layar" atau "panggung yang akan ditonton oleh hadirin".

Jadi, apapun yang kita letakan di bagian BODY, maka itulah yang akan dilihat oleh pengunjung website kita.

LATIHAN:

Oke, sebagai latihan, coba ketik ulang kode-kode berikut di Notepad (INGAT, JANGAN COPY PASTE, agar mudah dipahami)

<html>
<head>
<title>Website Pertama Gue</title>
</head>
<body>
Ini dia website pertamaku, bagus kan?
</body>
</html>

Setelah selesai, klik "Save As"
Pada bagian "Save as type", pilih "All Files"
Pada bagian "File Name", beri nama "index.html" (tanda " harus disertakan)
Cari lokasi penyimpanan, misalnya di Desktop
Klik "Save".

Nah, sekarang, coba masuk ke Desktop, klik dua-kali file "index.html" tadi, lalu lihatlah hasilnya.

Selamat mencoba!
(original post by : Mr.Jonru)

18 comments:

  1. mas saya boleh numpang tanya?
    gimana sih caranya kasih link untuk nampilin gambar di html?
    kita harus pake apa?

    ReplyDelete
  2. Eddo :
    Untuk menampilkan gambar berikut dengan link nya..caranya sbb :
    <a href="http://domainlinknya.com"><img src="UR:-alamat gambar"/></a>

    ReplyDelete
  3. artikel dan cukup mudah di cerna. hanya saja yang menjadi ganjalan, saumpama kita banyak menyisipkan kode html misalnya membuat kotak, apakah itu berpengaruh juga dalam loading blog kita?

    kalau boleh, minta tolong dong di posting juga, cara menyisipkan kode htmlnya di dalam postingan. soalnya melihat kode html pas di blog "edit html" banyak banget kodenya. pernah nyoba eh malah berantakan blog saya ^_^

    terima kasih sebelumnya. happy blogging dan sukses selalu.

    ReplyDelete
  4. nambah satu lagi ya mas, agak jauh dari postingan di atas, bgaimana cara menyisipkan flash format swf di blog itu bagaimana ya? apakah swf itu juga mempunyai kode html juga? kalau iya, bagaimana melihat kodenya? terima kasih.

    ReplyDelete
  5. To mas wibowo. Untuk memasukkan kode HTML yg tujuannya utk menampilkan misalnya banner atau kode iklan, anda bisa memasukkannya lewat : Dashbor-Setting-Formating-Post Template : Masukkan kode2 HTML di kotak Post Template. Nanti kode2 HTML akan muncul di kotak editor posting,pada saat kita mau menulis postingan artikel.

    Cara kedua masukkan kode HTML di editor HTML template , caranya masuk Dashbor-Design atau Layout-Edit Html-Centang kotak Expand Widget Templates- cari tag : <data:post.body/> .
    JIka sudah ketemu anda bisa memasukkan kode2 HTML sesudah ataupun sebelum kode tsb.
    Semoga membantu
    Salam
    bahrul Ulum

    ReplyDelete
  6. to Mas Wibowo lagi:
    SWF adalah untuk menampilkan banner flash dan juga Video. Kode2 nya berupa kode HTML juga. Jika mau menampilkan di postingan, tinggal masukkan aja semua kode HTMLnya.
    Untuk kode Banner flash, jika mau gampang, coba upload dulu ke photobucket.com , nanti tinggal masukkan URL alamat flash yg diberikan photobucket.
    Jelasnya bisa lihat disini :
    cara-bikin-banner-flash-atau-animasi

    ReplyDelete
  7. ane masih bingung mas..mohon petunjuknya tentang HTML ne..

    ReplyDelete
  8. gimana cara bikin kolom komentar kaya gini. bagus juga . tolong kasih petunjuk. dan koling saya gan di blog terapinarkoba.blogspot.com

    ReplyDelete
  9. ada kok programnya yang lbih mudah digunakan, pake aja microsoft frontpage....
    tapi kalo pingin tau2 dasarnya pake ini juga boleh.... hmmm hehehe

    ReplyDelete
  10. salam kenal!
    sy ada problem ketika saya edit html di blog saya (memasang status ym online) tertulis "Error parsing XML, line 948, column 2: The markup in the document following the root element must be well-formed."
    mohon solusinya gan!

    ReplyDelete
  11. To Muhammad Rifansyah:
    Error Parsing biasanya ada tag yang belum ditutup, misalnya ditutp dengan tanda garis miring
    atau kurang tanda kutip dll.
    Atau tanda kutipnya salah.Biasanya jika kita mengcopy langsung kode sript dari tutorial di blog lain, itu tanda kutipnya akan seperti tanda kutip di MS-words. Untuk itu editlah tanda kutipnya dulu yah.


    Cara termudah masang Icon Yahoo Messeger sbb :
    Pasang di bagian Gadget
    pergi ke dashbor blogspot
    Lalu ke tata letak (Layout) lalu Tambah Gadget,
    Lalu pilih gadget HTML javascript.
    Kemudian copy dan pastekan kode script dibawah ini di gadget HTML tsb :
    <a href="ymsgr:sendIM?ID-YM-ANDA"><img src=”http://opi.yahoo.com/online?u=ID-YM-ANDA&m=g&t=1″ border="0″></a>

    ReplyDelete
  12. Selamat Menunaikan Ibadah Puasa
    Mas numpang tanya,di blog saya ada beberapa gambar (gambar screenshoot game
    Gimana ya mas cara ngilanginnya, masalahnya di Tata Letak gak ada? mohon pencerahannya!!
    silahkan berkunjung mas ke -- http://perryporsche.blogspot.com --

    ReplyDelete
  13. maaf mas saya masih gaptek nih,lokasi notepad dimana ya,apa di microsoft word,terima kasih

    ReplyDelete
  14. To Fenk :
    Untuk menghilangkan gambar background, bukan dari Tata letak, tapi dari edit HTML, cari pada kode yang seprti ini :
    bacground: url(http://alamat gamabr)
    atau img src="alamat gamabr"
    hapus kode untuk gamabr yang ingin dihilangkan,
    semoga membantu

    ReplyDelete
  15. Gan,saya numpang Tanya.mengenai bloger.kenapa bloger di tampilkan di komputer saya tampilanya tak bisa normal SEMUA TEKS yang tampil berukuran kecil banget..?tolong Gan kasih tau jawaban-nya.

    ReplyDelete
  16. Mas, kalo mau buat menu tapi pake drop down gimana?
    Tks

    ReplyDelete

Saya berterimakasih atas koment anda yang Sopan dan Ramah...
Sebelum kasih komentar,sebaiknya lihat Contoh komentar spam disini , Agar komentar anda tdk tertangkap oleh spam filter blogger.