Mengenal dasar-dasar HTML

Tidak lengkap rasanya memulai dan mengisi blog ini denga tutorial-tutorial HTML tanpa memberikan tutorial dasar pengenalan HTML meskipun artikel seperti ini sudah banyak ditemukan di Internet.

HTML adalah bahasa yang digunakan untuk memerintahkan web browser menampilkan teks, gambar dan elemen-elemen lainnya. Penulisan bahasa HTML selalu disertai dengan CSS untuk mengatur dan memodifikasi bagaimana elemen-elemen tadi ditampilkan di halaman browser, namun untuk artikel pengenalan HTML ini kita belum membahas CSS.

Pada tutorial pertama ini anda akan belajar :

  • Membuat judul/title halaman HTML/website
  • Membuat heading dan paragraf
  • Membuat teks tebal dan miring
  • Menampilkan gambar
  • Membuat hyperlink
  • Menggunakan list
  • Membuat halaman HTML sederhana

Untuk belajar menulis bahasa HTML pertama kali sebaiknya gunakan teks editor sederhana seperti Notepad pada Windows atau TextEdit pada Mac. Hindari dulu penggunaan HTML Editor yang canggih seperti Dreamweaver, GoLive dan lain-lain karena fokus anda akan terganggu dengan fitur-fitur otomatis yang tersedia pada software-software editor tersebut. Jika anda sudah mengerti prinsip-prinsip dasar HTML, silahkan gunakan HTML Editor yang lebih canggih.

Sekarang silahkan buka text editor Notepad atau TextEdit anda dan simpan dengan nama index.html, jika anda buka file index.html ini di browser akan tampak layar putih karena halaman HTML anda masih kosong.

Membuat Judul/Title HTML

Setiap dokumen HTML harus memiliki judul dan harus berada di bagian atas dokumen. Untuk membuat judul tulis kode berikut di text editor anda :

<p>Judul halaman HTML saya</p>

Simpan file index.html kemudian coba anda buka lagi di browser. Ada masih menemukan layar putih, tapi coba perhatikan pada bagian paling atas browser, judul HTML anda sudah tampak disitu.

Menulis Heading (kepala) dan Paragraf

Kalau anda pengguna Microsoft Word pasti sudah terbiasa dengan Heading atau kepala paragraf. Di HTML ada 6 tingkatan Heading yaitu Heading 1 sampai 6. Teks yang ditampilkan sebagai heading di HMTL dianggap sebagai teks-teks yang penting. Untuk menulis heading menggunakan tag <h1></h1> kemudian <h2></h2> dan seterusnya. Tuliskan contoh berikut di file index.html anda :

<h1>Ini kepala paragraf pertama</h1> <h2>Ini kepala paragraf kedua</h2>

Sedangkan untuk paragraf menggunakan tag

. Tambahkan kode berikut di file index.html anda :

<p>Ini paragraf pertama saya</p> <p>Dan ini adalah paragraf kedua</p>

Sekarang simpan file anda dan buka kembali di browser. Nah sekarang di halaman website anda sudah memiliki 4 baris teks yang terdiri dari heading 1, heading 2 dan 2 buah paragraf.

Membuat teks tebal dan miring

Sekarang rubah dua paragraf sebelumnya menjadi seperti ini :

<p>Ini paragraf <strong>pertama</strong> <em>saya</em></p> <p>Dan ini <b>adalah<b> <italic>paragraf</italic> kedua</p>

Simpan dan refresh browser anda, akan terlihat perubahan. teks yang diapit oleh tag <strong> dan </strong> atau tag <b> dan </b> akan dicetak tebal sedangkan teks yang diapit oleh tag <i></i> dan <em></em>akan dicetak miring (italic).

Menampilkan gambar

Untuk menampilkan gambar di halaman html menggunakan tag img. Berbeda dengan tag-tag sebelumnya tag img tidak memiliki tag penutup. Simpan file gambar di folder yang sama dengan file index.html anda. Misalkan nama file gambar adalah gambar1.jpg maka kode untuk menampilkan gambar tersebut adalah sebagai berikut :

<img src="gambar1.jpg" />

Perhatikan bahwa dibelakang tag img terdapat tanda /. Ini diberlakukan untuk tag-tag HTML yang tidak memiliki tag penutup, misalnya tag <br /> untuk memotong paragraf, tag <hr />untuk membuat garis batas dan lain-lain.

Anda juga dapat menambahkan atribut lain pada tag img misalahnya mengatur width (lebar) dan height (tinggi) gambar seperti berikut :

<img src="gambar1.jpg" width="200" height="300" />

kemudian anda juga dapat menambahkan atribut alt seperti berikut :

<img src="gambar1.jpg" width="200" height="300" alt="gambar saya" />

atribut alt berfungsi seperti nama gambar.

Membuat hyperlink

Hyperlink adalah link/tautan pada teks atau gambar, atau elemen HTML lainnya yang terhubung ke alamat url lainnya yang jika di klik akan menuju ke url tujuan. Contoh :

<p><a href="http://www.google.com">Ini adalah hyperlink ke website Google</a><p> <p>Ini adalah hyperlink ke <a href="http://www.facebook.com">Facebook</p>

Page 1 of 2 | Next page