Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Pemrograman Web

Memahami Dokumen HTML Dalam Pembuatan Website

Oleh Nikita Dini Posting Komentar
Memahami Dokumen HTML Dalam Pembuatan Website - HTML (HyperText Markup Language) adalah bahasa yang digunakan untuk membuat dokumen halaman web, sehingga dokumen html tersebut dapat ditampilkan pada penjelajah internet (internet browser). HTML merupakan standar yang digunakan secara luas sebagai bahasa tanda untuk halaman web yang dikelola dan dikendalikan oleh W3C ( World Wide Web Consortium).

Adapun versi-versi dari HTML meurut tahung diperkenalkanya adalah sebagai berikut:
  • HTML 2 (22 September 1995)
  • HTML 3.2 (14 Januari 1996)
  • HTML 4 (8 Desember 1997)
  • HTML 4.01 (24 Desember 1999)
  • ISO HTML, ISO 15445:20000 (15 Mei 2000)
  • HTML 5 (Januari 2008)

Dengan HTML kita dapat melakukan hal-hal berikut ini:
  • Mempresentasikan text, gambar dan multimedia secara online
  • Menghubungkan antar dokumen HTML (hyperlink)
  • Menghubungkan isi dokumen dan isi dokumen lainya berdasarkan jangkar-jangkar yang telah didefinisikan
  • Membuat form interaktif untuk pengiriman data sesuai keinginan .

Dokumen HTML

Format Dokumen HTML

Agar dokumen HTML dapat berjalan maka, dokumen HTML harus mengikuti aturan format penulisan yang diantaranya adalah sebagai berikut:

  • Dokumen HTML terdiri dari tag-tag berpasangan yang memiliki fungsi-fungsi berbeda
  • Setiap tag ada yang mengandung element, atribut dan value
  • Setiap dokumen HTML diawali dan diakhiri dengan tag <html>.....</html>
  • Ektensi dokumen html adalah .htm atau .html
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Isi dokumen
</body>
</html>

Editor yang dapat digunakan dalam membuat dokumen HTML diantaranya adalah:
  • Notepad
  • Notepad++
  • Eclipse
  • Netbean
  • Vi
  • Homesite
  • Dreamweaver
  • Dan lain-lain

Memahami Dokumen HTML Dalam Pembuatan Website_
image source: www.findicons.com
baca juga: Pengertian, Tipe, dan Fungsi CSS Beserta Contoh

Heading dan Sub Heading

Fungsi heading dan sub heading pada HTML adalah untuk membuat judul tulisan dalam dokumen HTML.

Tag HTML yang digunkan untuk membuat heading adalah tag h dengan format penulisan heading sebagai berikut:
<hx atribut=“value”>judul</hx>
  • Dimana x adalah angka 1 s/d 6
  • Dimana atribut adalah align untuk menentukan letak text
  • Dimana value adalah left, center atau right

Contoh 1:
<html>
<head>
<title>Latihan Heading</title>
</head>
<body>
<h1>Latihan heading h1</h1>
<h2>Latihan heading h2</h2>
<h3>Latihan heading h3</h3>
<h4>Latihan heading h4</h4>
<h5>Latihan heading h5</h5>
<h6>Latihan heading h6</h6>
</body>
</html>

Tampilan 1:

Latihan heading h1
Latihan heading h2
Latihan heading h3
Latihan heading h4
Latihan heading h5

Contoh 2:
<html>
<head>
<title>Latihan Heading</title>
</head>
<body>
<h1 align=“left”>Latihan heading left</h1>
<h2 align=“center”>Latihan heading center</h2>
<h3 align=“right”>Latihan heading right</h3>
</body>
</html>

Tampilan 2:

Latihan heading left
Latihan heading center
Latihan heading right

Membuat Garis Horisontal (Tag Hr)

Tag hr digunakan untuk membuat garis horizontal dan memiliki atribut align, size, width, noshade, color. Adapun penjelasan dari masing-masing atribut hr adalah sebagai berikut:
  • Atribut align mempunyai value left, center, right, fungsinya untuk memposisikan dari garis horizontal yang dibuat.
  • Atribut size mempunyai value angka dalam pixel, fungsinya untuk menetukan tebal dan tipisnya garis horizontal yang dibuat.
  • Atribut width mempunyai value angka dalam pixel dan %, fungsinya untuk menetukan lebar dan sempitnya garis horizontal yang dibuat.
  • Atribut color mempunyai value jenis warna, fungsinya untuk memberikan warna dari garis horizontal yang dibuat.
  • Atribut noshade tidak memiliki value berfungsi memberikan efek tanpa bayangan

Contoh 3:
<html>
<head>
<title>Latihan HR</title>
</head>
<body>
<hr align=“left” width=“50%” size=“5” color=“red”>
<hr align=“center” width=“100” size=“5” color=“#ffffff” noshade>
</body>
</html>

Tampilan 3:

Memahami Dokumen HTML Dalam Pembuatan Website 1_
Memahami Dokumen HTML Dalam Pembuatan Website 2_

Mengatur Font (Tag Font)

Tag font memiliki beberapa atribut yaitu:
  • Face untuk memilih jenis tipe font
  • Size untuk menentukan ukuran dari font
  • Color untuk menentukan warna font

Contoh 4:
<html>
<head>
<title>Latihan Font</title>
</head>
<body>
<font face=“verdana” size=“6” color=“red”>Latihan Font 1</font>
<font face=“Times New Roman” size=“5” color=“blue”>Latihan Font 2</font>
<font face=“Arial” size=“4” color=“yelow”>Latihan Font 3</font>
</body>
</html>

Tag yang memberikan penekanan pada text

Berikut ini adalah tag-tag yang berfungsi memberikan tekanan pada text pada dokumen HTML:
  • <b>....</b> atau <strong>...</strong> untuk menebalkan teks
  • <u>....</u> untuk memberikan garis bawah
  • <i>...</i> untuk cetak miring
  • <strike>...</strike> untuk coret teks
  • <small>...</small> untuk membuat kecil ukuraan font
  • <sub>....<sub> untuk cetak bawah
  • <sup>....</sup> untuk cetek atas

Contoh 5:
<html>
<head>
<title>Latihan 5</title>
</head>
<body>
Kata berikut ini akan dibuat <strong>tebal</strong>
Berikut ini adalah <u>garis bawah</u><br>
<i>Tulisan ini akan menjadi miring</i><br>
<strike>Tanda ini menujukan koreksi</strike>
</body>
</html>

Sekian artikel tentang Memahami Dokumen HTML Dalam Pembuatan Website.
Nikita Dini
Nikita Dini Blogger, Internet Marketer, Web Designer

Posting Komentar untuk "Memahami Dokumen HTML Dalam Pembuatan Website"

Tata tertib berkomentar
1. Komentar harus relevan dengan konten yang dibaca
2. Gunakan bahasa yang sopan
3. Tidak mengandung unsur SARA or Bullying.
4. Dilarang SPAM.
5. Dilarang menyisipkan link aktif pada isi komentar.

Berlakulah dengan bijak dalam menggunakan sarana publik ini. Baca dan pahami isinya terlebih dahulu, barulah Berkomentar. Terimakasih.