Rabu, 18 April 2012

Belajar Tentang Dasar² HTML



Selamat petang Gan, kang, Mbak, Mas, Dll,... :D
Kemaren² kita telah berkenalan dengan HTML, sekarang kita akan mencoba belajar bersama & mengenal dasar dasar dari html yang mencakup beberapa pertanyaan dasar berikut:

  1. Apa yang harus dipersiapkan sebelum mempelajari html?
  2. Ekstensi file html manakah yang digunakan (.htm atau .html)?
  3. Apaan tuh Headings?
  4. Bagaimana membuat paragraf?
  5. Bagaimana membuat sebuah link?
  6. Menampilkan gambar pada dokumen?


Apa yang harus dipersiapkan sebelum mempelajari html
Html sangat fleksibel, kita hanya membutuhkan editor teks semacam notepad atau dreamweaver dan kita sudah siap untuk mencoba membuat halaman web dengan html. Html juga tidak membutuhkan webserver, untuk menjalankannya cukup klik 2x pada file html yang kita buat.

Ekstensi file html manakah yang digunakan (.htm atau .html)?
Keduanya dapat anda gunakan, tidak ada perbedaan pada ekstensi file .htm atau .html. Semuanya terserah anda mau menggunakan yang mana.

Apaan tuh Headings?
Saat berkenalan dengan html pada tutorial sebelumnya, anda telah melihat struktur dasar dari sebuah dokumen html, di dalamnya terdapat tag  <h1>Ini judul tulisan</h1> . Tag seperti inilah yang disebut headings. Headings biasanya digunakan untuk mendeskripsikan sebuah judul artikel atau judul dari sebuah halaman web.

Headings terdiri dari 6 tag yang berbeda, yaitu tag <h1> sampai <h6>. contoh penggunaan headings bisa dilihat pada demo di bawah.



Di atas adalah contoh penulisan headings dari h1 sampai h6, sedangkan disamping adalah tampilan yang keluar saat kita menjalankan kode di atas.




Bagaimana membuat paragraf?
Tag html yang bertugas untuk membuat paragraf adalah tag <p>
Contoh:
<p>paragraf pertama</p>
<p>paragraf kedua</p>


Kalo membuat link bagaimana?
Untuk membuat sebuah link menggunakan Tag <a>. Sedangkan alamat linknya didefinisikan dengan atribut href.
contoh:
<a href="http://ivan-lionel.blogspot.com/">ivanlionel</a> 

jika dijalankan akan menjadi sebuah link seperti ini "ivanlionel".

Menampilkan gambar pada dokumen?
Tag <img /> berfungsi untuk menampilkan gambar pada dokumen html, yang diselipi oleh atribut src. Atribut src inilah yang mendefinisikan alamat asli gambar dan menampilkannya pada halaman web.

contoh: <img src="images.jpg" />.

file images.jpg juga bisa diganti dengan alamat gambar yang ada pada internet. Misal saya memiliki alamat gambar http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif, Jika kita masukkan pada tag <img> kurang lebih menjadi seperti ini:


<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif" />
gambar akan muncul seperti ini

Oke pembahasan dasar html sudah selesai, sekarang kita akan mencoba membuat halaman web sederhana dengan tag tag yang sudah kita pelajari di atas.

<html>
<title>latihan html dasar</title>
<head>
</head>
<body>
 <h3>Judul dengan tag h3</h3>
 <p>Kita sedang latihan dasar html bersama ivanlionel</p>
 <p>ini adalah contoh dari paragraf kedua kita</p>
 <a href="http://ivan-lionel.blogspot.com/">yang ini contoh link</a>
 <br />
 Yang ini gambar <img src="http://i1131.photobucket.com/albums/m554/ipan45/ivan-lionel.jpg" />
</body>
</html>


Dokumen html di atas merupakan penerapan dari tag tag yang sudah kita pelajari sebelumnya, seperti headings, paragraf, membuat link dan memasukkan gambar. Silahkan agan coba ketik ulang kode kode html yang ada pada textarea menggunakan notepad, kemudian save dengan ekstensi .html, ..Kemudian agan jalankan file yang anda buat, kurang lebih hasilnya seperti ini:

Judul dengan tag h3

Kita sedang latihan dasar html bersama ivanlionel
ini adalah contoh dari paragraf kedua kita
yang ini contoh link  
Yang ini gambar

Sekian pembahasan html dasar kali ini, Bukan bermaksud untuk menggurui & saya yakin pasti Agan² yg baca artikel ini banyak yang jauh lebih tau dan lebih pinter mengutik² HTML. oleh karna itu, saya mohon koreksinya... :)
insya ALLAH akan ada tutorials html lanjutan dari step ini. Tetep tongkrongin gubug saya ini ya :)

Artikel sebelumnya ► Berkenalan dengan html

:)

23 komentar:

  1. Balasan
    1. ada kang... silahkan cek di : http://123codegeneratorina.blogspot.com/2010/03/download-gratis-software-untuk-belajar.html

      Hapus
    2. bisa juga pake dreamweaver.. :)

      Hapus
  2. wah ilmu nih kang, saya baru belajar kaya beginian :D

    BalasHapus
  3. sebelumnya sya belum kenalan sma html,jadi sy mau knalan dulu baru k sini lagi.. :D:D
    XD
    nice share kawwand :)

    BalasHapus
  4. It’s so refreshing to find articles like the ones you post on your site. Very informative reading. I will keep you bookmarked. Thanks!

    BalasHapus
  5. Artikel yg benar2 bermanfaat, terima kasih infonya sobat, oh ya ditunggu juga follow back, ...

    BalasHapus
  6. wahhh, manteb banget nih sobat..
    ikutan baca-baca untuk menambah pengetahuan :)

    thanks udah share :)

    BalasHapus
    Balasan
    1. silahkan masbro... :)
      trimakasih kembali... :)

      Hapus
  7. Ane Krng Paham Nich Gan tntang Html ...

    BalasHapus
  8. nice share..informasi yang sangat berguna sahabat,

    salam persahabatan

    BalasHapus
  9. Sip deh sob tutor sederhana tapi bermakna.

    Salam dari SR11. :)

    BalasHapus
  10. Ilmu ini perlu banget untuk para Blogger pemula seperti Saya.. Trims infonya sobb.. :)

    BalasHapus
  11. kode html memang penting dan sepertinya setiap kode2 dalam dunia blogger itu menggunakannya ya sob, ...sangat bermanfaat sekali postingannya sobat, saya benar2 menyukainya dan penting buat saya
    terima kasih sobat....

    BalasHapus

► Silahkan di comeng...
► Silahkan mengkritik, tapi dengan bahasa yang sopan.
► No spam, no sara, & no ngece Yaa... !!!


╚══▓▒░► ▄╘IVAN╛▄ ◄░▒▓══╝

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Ivan Lionel Andreas Fathurrohman | Bloggerized by Ivan - Blogger | Pancoer Cyber