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
:)
