Mengenal dasar-dasar HTML

Posted by & filed under , , , , .

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>

Coba simpan dokumen HTML anda dan refresh di browser, anda akan menemukan paragraf baru dengan hyperlink ke halaman website Google dan Facebook.

Menggunakan list

Ada 3 jenis list dalam HTML.
List pertama yaitu bullet list yang juga disebut unordered list, menggunakan tag <ul> dan tag <li>


<ul>
<li>Ini list pertama</li>
<li>Ini list kedua</li>
<li>Ini list ketiga</li>
</ul>

Perhatikan bahwa unordered list selalu dimulai dengan tag <ul> dan ditutup dengan tag </ul>

List berikutnya adalah list bernomor atau disebut ordered list


<ol>
<li>Ini list pertama</li>
<li>Ini list kedua</li>
<li>Ini list ketiga</li>
</ol>

List yang terakhir adalah list definisi yang dapat anda gunakan untuk menuliskan daftar istilah dan definisinya


<dl>
<dt>Istilah pertama</dt>
<dd>Definisi dari istilah pertama</dd>
<dt>Istilah kedua</dt>
<dd>Definisi dari istilah kedua</dd>
<dt>Istilah ketiga</dt>
<dd>Definisi dari istilah ketiga</dd>
</dl>

Membuat halaman HTML sederhana

Pada dasarnya jika anda mengikuti contoh diatas, anda telah berhasil membuat halaman HTML, namun standar sebuah dokumen HTML harus memiliki head dan body dan sebuah dokumen HTM harus selalu dimulai dengan tag <html> dan ditutup dengan tag </html>, jadi dokumen html anda harus berbentuk seperti berikut :


<html>
<head>
  <title>Judul halaman HTML saya</title>
</head>
<body>

isi halaman HTML disini

</body>
</html>

Mudah bukan? Pada tutorial berikutnya kita akan mengenal HTML lebih jauh bersama CSS.

One Response to “Mengenal dasar-dasar HTML”

  1. Ansory Esce

    Makasih kang tutorialnya tentang HTML

Leave a Reply

Your email address will not be published. Required fields are marked *