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:
- Apa yang harus dipersiapkan sebelum mempelajari html?
- Ekstensi file html manakah yang digunakan (.htm atau .html)?
- Apaan tuh Headings?
- Bagaimana membuat paragraf?
- Bagaimana membuat sebuah link?
- Menampilkan gambar pada dokumen?
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.
Keduanya dapat anda gunakan, tidak ada perbedaan pada ekstensi file .htm atau .html. Semuanya terserah anda mau menggunakan yang mana.
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.
Tag html yang bertugas untuk membuat paragraf adalah tag <p>
Contoh:
<p>paragraf pertama</p>
<p>paragraf kedua</p>
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
:)
apa ada, software buat belajar html?
BalasHapusada kang... silahkan cek di : http://123codegeneratorina.blogspot.com/2010/03/download-gratis-software-untuk-belajar.html
Hapusbisa juga pake dreamweaver.. :)
Hapuswah ilmu nih kang, saya baru belajar kaya beginian :D
BalasHapusiya kang, saya jg baru belajar... :)
Hapussebelumnya sya belum kenalan sma html,jadi sy mau knalan dulu baru k sini lagi.. :D:D
BalasHapusXD
nice share kawwand :)
jiahaha...
Hapussilahkan.. :D
_thanks... :)
i like this site
BalasHapusThanks mbak anie... :)
HapusTerimakasih... :)
BalasHapusIt’s so refreshing to find articles like the ones you post on your site. Very informative reading. I will keep you bookmarked. Thanks!
BalasHapusThanks for visit here.. :)
HapusArtikel yg benar2 bermanfaat, terima kasih infonya sobat, oh ya ditunggu juga follow back, ...
BalasHapusok thanks...
Hapussiaap meluncur ndan...
:D
wahhh, manteb banget nih sobat..
BalasHapusikutan baca-baca untuk menambah pengetahuan :)
thanks udah share :)
silahkan masbro... :)
Hapustrimakasih kembali... :)
Ane Krng Paham Nich Gan tntang Html ...
BalasHapussaya jg masih belajar sob... :)
Hapusnice share..informasi yang sangat berguna sahabat,
BalasHapussalam persahabatan
thanks sob... ►SALKOMSEL◄ :)
HapusSip deh sob tutor sederhana tapi bermakna.
BalasHapusSalam dari SR11. :)
Ilmu ini perlu banget untuk para Blogger pemula seperti Saya.. Trims infonya sobb.. :)
BalasHapuskode 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
BalasHapusterima kasih sobat....